react-simple-step-wizard - npm Package Compare versions

Comparing version 0.1.0 to 1.0.0

lib/common/types.d.ts

 /// <reference types="react" />
+interface WizardBooleans {
+    isNextAvailable: boolean;
+    isPrevAvailable: boolean;
+}
+interface WizardStepsBase {
+    currentStep: number;
+    steps: string[];
+}
+export declare interface WizardSteps extends WizardStepsBase {
+    totalSteps: number;
+}
+interface WizardStateWithoutHelpers extends WizardBooleans, WizardSteps {
+}
 export declare interface WizardProps {
@@ -6,31 +19,33 @@ children: JSX.Element[] | JSX.Element;
 }
-export declare interface WizardState {
-    steps: string[];
-    currentStep: number;
-    totalSteps: number;
-    isNextAvailable: boolean;
-    isPrevAvailable: boolean;
-    prevStep(): void;
-    nextStep(): void;
-}
 export declare interface WizardHandlers {
-    prevStep(): void;
+    firstStep(): void;
+    goToStep(number: number): void;
+    lastStep(): void;
     nextStep(): void;
-}
-export declare interface NavigatorProps {
-    isNextAvailable: boolean;
-    isPrevAvailable: boolean;
     prevStep(): void;
-    nextStep(): void;
 }
-export declare interface CustomNavigatorProps {
+export declare interface WizardPropGetters {
+    getFirstStepProps(props?: unknown): React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
+    getLastStepProps(props?: unknown): React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
+    getNextStepProps(props?: unknown): React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
+    getPrevStepProps(props?: unknown): React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
+}
+export declare interface WizardState extends WizardStateWithoutHelpers, WizardHandlers, WizardPropGetters {
+}
+export declare interface NavigatorProps extends WizardBooleans, WizardHandlers, WizardPropGetters {
+}
+export declare interface CompoundNavigatorProps {
     children?: (props: NavigatorProps) => JSX.Element;
 }
-export declare interface StepTrackerProps {
-    currentStep: number;
-    steps: string[];
+export declare interface CustomNavigatorProps {
+    children: (props: NavigatorProps) => JSX.Element;
 }
-export declare interface CustomStepTrackerProps {
+export declare interface StepTrackerProps extends WizardStepsBase {
+}
+export declare interface CompoundStepTrackerProps {
     children?: (props: StepTrackerProps) => JSX.Element;
 }
+export declare interface CustomStepTrackerProps {
+    children: (props: StepTrackerProps) => JSX.Element;
+}
 export declare interface StepsProps {
@@ -42,1 +57,5 @@ children: JSX.Element[] | JSX.Element;
 }
+export declare interface InjectedWizardProps {
+    wizard: WizardState;
+}
+export {};

lib/components/DefaultNavigator.d.ts

 /// <reference types="react" />
-import { NavigatorProps } from '../common/types';
-declare function DefaultNavigator({ isNextAvailable, isPrevAvailable, nextStep, prevStep, }: NavigatorProps): JSX.Element;
+declare function DefaultNavigator(): JSX.Element;
 export default DefaultNavigator;

lib/components/DefaultStepTracker.d.ts

 /// <reference types="react" />
-import { StepTrackerProps } from '../common/types';
-declare function DefaultStepTracker({ currentStep, steps, }: StepTrackerProps): JSX.Element;
+declare function DefaultStepTracker(): JSX.Element;
 export default DefaultStepTracker;

lib/components/Navigator.d.ts

 /// <reference types="react" />
-import { CustomNavigatorProps } from '../common/types';
-declare function Navigator({ children }: CustomNavigatorProps): JSX.Element;
+import { CompoundNavigatorProps } from '../common/types';
+declare function Navigator({ children }: CompoundNavigatorProps): JSX.Element;
 export default Navigator;

lib/components/Steps.d.ts

 /// <reference types="react" />
+import * as PropTypes from 'prop-types';
 import { StepsProps } from '../common/types';
 declare function Steps({ children }: StepsProps): JSX.Element;
+declare namespace Steps {
+    var propTypes: {
+        children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+    };
+}
 export default Steps;

lib/components/StepTracker.d.ts

 /// <reference types="react" />
-import { CustomStepTrackerProps } from '../common/types';
-declare function StepTracker({ children }: CustomStepTrackerProps): JSX.Element;
+import { CompoundStepTrackerProps } from '../common/types';
+declare function StepTracker({ children }: CompoundStepTrackerProps): JSX.Element;
 export default StepTracker;

lib/components/Wizard.d.ts

 import * as React from 'react';
 import Navigator from './Navigator';
+import StepGroup from './StepGroup';
 import StepTracker from './StepTracker';
@@ -8,2 +9,3 @@ import Steps from './Steps';
     static Navigator: typeof Navigator;
+    static StepGroup: typeof StepGroup;
     static StepTracker: typeof StepTracker;
@@ -17,6 +19,22 @@ static Steps: typeof Steps;
     };
-    componentDidUpdate(_: WizardProps, prevState: WizardState): void;
+    componentDidUpdate(prevProps: WizardProps, prevState: WizardState): void;
+    handleChildrenChange: (children: JSX.Element | JSX.Element[], currentStep: number) => void;
     handleStepChange: (currentStep: number, totalSteps: number) => void;
+    goToStep: (step: number) => void;
+    firstStep: () => void;
+    lastStep: () => void;
     nextStep: () => void;
     prevStep: () => void;
+    getFirstStepProps: (props?: {
+        onClick: undefined;
+    }) => React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
+    getLastStepProps: (props?: {
+        onClick: undefined;
+    }) => React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
+    getNextStepProps: (props?: {
+        onClick: undefined;
+    }) => React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
+    getPrevStepProps: (props?: {
+        onClick: undefined;
+    }) => React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
     state: WizardState;
@@ -23,0 +41,0 @@ render(): JSX.Element;

lib/contexts/WizardContext.d.ts

 import * as React from 'react';
-import { WizardState, WizardConsumerProps } from '../common/types';
+import hoistNonReactStatics from 'hoist-non-react-statics';
+import { WizardState, WizardConsumerProps, InjectedWizardProps } from '../common/types';
 declare const WizardContext: React.Context<WizardState>;
 export declare function WizardConsumer({ children }: WizardConsumerProps): JSX.Element;
-export declare function withWizardContext<T extends WizardState>(WrappedComponent: React.ComponentType<T>): {
-    new (props: Readonly<Pick<T, import("utility-types").SetDifference<keyof T, "steps" | "currentStep" | "totalSteps" | "isNextAvailable" | "isPrevAvailable" | "prevStep" | "nextStep">>>): {
-        render(): JSX.Element;
-        context: any;
-        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<Pick<T, import("utility-types").SetDifference<keyof T, "steps" | "currentStep" | "totalSteps" | "isNextAvailable" | "isPrevAvailable" | "prevStep" | "nextStep">>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
-        forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<Pick<T, import("utility-types").SetDifference<keyof T, "steps" | "currentStep" | "totalSteps" | "isNextAvailable" | "isPrevAvailable" | "prevStep" | "nextStep">>> & Readonly<{
-            children?: React.ReactNode;
-        }>;
-        state: Readonly<{}>;
-        refs: {
-            [key: string]: React.ReactInstance;
-        };
-        componentDidMount?(): void;
-        shouldComponentUpdate?(nextProps: Readonly<Pick<T, import("utility-types").SetDifference<keyof T, "steps" | "currentStep" | "totalSteps" | "isNextAvailable" | "isPrevAvailable" | "prevStep" | "nextStep">>>, nextState: Readonly<{}>, nextContext: any): boolean;
-        componentWillUnmount?(): void;
-        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
-        getSnapshotBeforeUpdate?(prevProps: Readonly<Pick<T, import("utility-types").SetDifference<keyof T, "steps" | "currentStep" | "totalSteps" | "isNextAvailable" | "isPrevAvailable" | "prevStep" | "nextStep">>>, prevState: Readonly<{}>): any;
-        componentDidUpdate?(prevProps: Readonly<Pick<T, import("utility-types").SetDifference<keyof T, "steps" | "currentStep" | "totalSteps" | "isNextAvailable" | "isPrevAvailable" | "prevStep" | "nextStep">>>, prevState: Readonly<{}>, snapshot?: any): void;
-        componentWillMount?(): void;
-        UNSAFE_componentWillMount?(): void;
-        componentWillReceiveProps?(nextProps: Readonly<Pick<T, import("utility-types").SetDifference<keyof T, "steps" | "currentStep" | "totalSteps" | "isNextAvailable" | "isPrevAvailable" | "prevStep" | "nextStep">>>, nextContext: any): void;
-        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Pick<T, import("utility-types").SetDifference<keyof T, "steps" | "currentStep" | "totalSteps" | "isNextAvailable" | "isPrevAvailable" | "prevStep" | "nextStep">>>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<Pick<T, import("utility-types").SetDifference<keyof T, "steps" | "currentStep" | "totalSteps" | "isNextAvailable" | "isPrevAvailable" | "prevStep" | "nextStep">>>, nextState: Readonly<{}>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<Pick<T, import("utility-types").SetDifference<keyof T, "steps" | "currentStep" | "totalSteps" | "isNextAvailable" | "isPrevAvailable" | "prevStep" | "nextStep">>>, nextState: Readonly<{}>, nextContext: any): void;
-    };
-    new (props: Pick<T, import("utility-types").SetDifference<keyof T, "steps" | "currentStep" | "totalSteps" | "isNextAvailable" | "isPrevAvailable" | "prevStep" | "nextStep">>, context?: any): {
-        render(): JSX.Element;
-        context: any;
-        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<Pick<T, import("utility-types").SetDifference<keyof T, "steps" | "currentStep" | "totalSteps" | "isNextAvailable" | "isPrevAvailable" | "prevStep" | "nextStep">>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
-        forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<Pick<T, import("utility-types").SetDifference<keyof T, "steps" | "currentStep" | "totalSteps" | "isNextAvailable" | "isPrevAvailable" | "prevStep" | "nextStep">>> & Readonly<{
-            children?: React.ReactNode;
-        }>;
-        state: Readonly<{}>;
-        refs: {
-            [key: string]: React.ReactInstance;
-        };
-        componentDidMount?(): void;
-        shouldComponentUpdate?(nextProps: Readonly<Pick<T, import("utility-types").SetDifference<keyof T, "steps" | "currentStep" | "totalSteps" | "isNextAvailable" | "isPrevAvailable" | "prevStep" | "nextStep">>>, nextState: Readonly<{}>, nextContext: any): boolean;
-        componentWillUnmount?(): void;
-        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
-        getSnapshotBeforeUpdate?(prevProps: Readonly<Pick<T, import("utility-types").SetDifference<keyof T, "steps" | "currentStep" | "totalSteps" | "isNextAvailable" | "isPrevAvailable" | "prevStep" | "nextStep">>>, prevState: Readonly<{}>): any;
-        componentDidUpdate?(prevProps: Readonly<Pick<T, import("utility-types").SetDifference<keyof T, "steps" | "currentStep" | "totalSteps" | "isNextAvailable" | "isPrevAvailable" | "prevStep" | "nextStep">>>, prevState: Readonly<{}>, snapshot?: any): void;
-        componentWillMount?(): void;
-        UNSAFE_componentWillMount?(): void;
-        componentWillReceiveProps?(nextProps: Readonly<Pick<T, import("utility-types").SetDifference<keyof T, "steps" | "currentStep" | "totalSteps" | "isNextAvailable" | "isPrevAvailable" | "prevStep" | "nextStep">>>, nextContext: any): void;
-        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Pick<T, import("utility-types").SetDifference<keyof T, "steps" | "currentStep" | "totalSteps" | "isNextAvailable" | "isPrevAvailable" | "prevStep" | "nextStep">>>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<Pick<T, import("utility-types").SetDifference<keyof T, "steps" | "currentStep" | "totalSteps" | "isNextAvailable" | "isPrevAvailable" | "prevStep" | "nextStep">>>, nextState: Readonly<{}>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<Pick<T, import("utility-types").SetDifference<keyof T, "steps" | "currentStep" | "totalSteps" | "isNextAvailable" | "isPrevAvailable" | "prevStep" | "nextStep">>>, nextState: Readonly<{}>, nextContext: any): void;
-    };
-    displayName: string;
-    contextType?: React.Context<any> | undefined;
-};
+export declare function withWizard<P extends InjectedWizardProps>(Component: React.ComponentType<P>): React.ForwardRefExoticComponent<React.PropsWithoutRef<Pick<P, Exclude<keyof P, "wizard">>> & React.RefAttributes<unknown>> & hoistNonReactStatics.NonReactStatics<React.ComponentType<P>, {}>;
 export default WizardContext;

lib/index.es.js

@@ -1,2 +0,3 @@
-import { createElement, createContext, Children, cloneElement, PureComponent } from 'react';
+import { createContext, createElement, Fragment, Children, cloneElement, PureComponent } from 'react';
+import { func, arrayOf, node, oneOfType } from 'prop-types';
 
@@ -43,9 +44,339 @@ /*! *****************************************************************************
 
-function DefaultNavigator(_a) {
-    var isNextAvailable = _a.isNextAvailable, isPrevAvailable = _a.isPrevAvailable, nextStep = _a.nextStep, prevStep = _a.prevStep;
-    return (createElement("div", null,
-        createElement("button", { type: "button", onClick: prevStep, disabled: !isPrevAvailable }, "Previous"),
-        createElement("button", { type: "button", onClick: nextStep, disabled: !isNextAvailable }, "Next")));
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
 }
 
+function unwrapExports (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
+function createCommonjsModule(fn, module) {
+	return module = { exports: {} }, fn(module, module.exports), module.exports;
+}
+
+var reactIs_production_min = createCommonjsModule(function (module, exports) {
+Object.defineProperty(exports,"__esModule",{value:!0});
+var b="function"===typeof Symbol&&Symbol.for,c=b?Symbol.for("react.element"):60103,d=b?Symbol.for("react.portal"):60106,e=b?Symbol.for("react.fragment"):60107,f=b?Symbol.for("react.strict_mode"):60108,g=b?Symbol.for("react.profiler"):60114,h=b?Symbol.for("react.provider"):60109,k=b?Symbol.for("react.context"):60110,l=b?Symbol.for("react.async_mode"):60111,m=b?Symbol.for("react.concurrent_mode"):60111,n=b?Symbol.for("react.forward_ref"):60112,p=b?Symbol.for("react.suspense"):60113,q=b?Symbol.for("react.suspense_list"):
+60120,r=b?Symbol.for("react.memo"):60115,t=b?Symbol.for("react.lazy"):60116,v=b?Symbol.for("react.fundamental"):60117,w=b?Symbol.for("react.responder"):60118,x=b?Symbol.for("react.scope"):60119;function y(a){if("object"===typeof a&&null!==a){var u=a.$$typeof;switch(u){case c:switch(a=a.type,a){case l:case m:case e:case g:case f:case p:return a;default:switch(a=a&&a.$$typeof,a){case k:case n:case h:return a;default:return u}}case t:case r:case d:return u}}}function z(a){return y(a)===m}
+exports.typeOf=y;exports.AsyncMode=l;exports.ConcurrentMode=m;exports.ContextConsumer=k;exports.ContextProvider=h;exports.Element=c;exports.ForwardRef=n;exports.Fragment=e;exports.Lazy=t;exports.Memo=r;exports.Portal=d;exports.Profiler=g;exports.StrictMode=f;exports.Suspense=p;
+exports.isValidElementType=function(a){return "string"===typeof a||"function"===typeof a||a===e||a===m||a===g||a===f||a===p||a===q||"object"===typeof a&&null!==a&&(a.$$typeof===t||a.$$typeof===r||a.$$typeof===h||a.$$typeof===k||a.$$typeof===n||a.$$typeof===v||a.$$typeof===w||a.$$typeof===x)};exports.isAsyncMode=function(a){return z(a)||y(a)===l};exports.isConcurrentMode=z;exports.isContextConsumer=function(a){return y(a)===k};exports.isContextProvider=function(a){return y(a)===h};
+exports.isElement=function(a){return "object"===typeof a&&null!==a&&a.$$typeof===c};exports.isForwardRef=function(a){return y(a)===n};exports.isFragment=function(a){return y(a)===e};exports.isLazy=function(a){return y(a)===t};exports.isMemo=function(a){return y(a)===r};exports.isPortal=function(a){return y(a)===d};exports.isProfiler=function(a){return y(a)===g};exports.isStrictMode=function(a){return y(a)===f};exports.isSuspense=function(a){return y(a)===p};
+});
+
+unwrapExports(reactIs_production_min);
+var reactIs_production_min_1 = reactIs_production_min.typeOf;
+var reactIs_production_min_2 = reactIs_production_min.AsyncMode;
+var reactIs_production_min_3 = reactIs_production_min.ConcurrentMode;
+var reactIs_production_min_4 = reactIs_production_min.ContextConsumer;
+var reactIs_production_min_5 = reactIs_production_min.ContextProvider;
+var reactIs_production_min_6 = reactIs_production_min.Element;
+var reactIs_production_min_7 = reactIs_production_min.ForwardRef;
+var reactIs_production_min_8 = reactIs_production_min.Fragment;
+var reactIs_production_min_9 = reactIs_production_min.Lazy;
+var reactIs_production_min_10 = reactIs_production_min.Memo;
+var reactIs_production_min_11 = reactIs_production_min.Portal;
+var reactIs_production_min_12 = reactIs_production_min.Profiler;
+var reactIs_production_min_13 = reactIs_production_min.StrictMode;
+var reactIs_production_min_14 = reactIs_production_min.Suspense;
+var reactIs_production_min_15 = reactIs_production_min.isValidElementType;
+var reactIs_production_min_16 = reactIs_production_min.isAsyncMode;
+var reactIs_production_min_17 = reactIs_production_min.isConcurrentMode;
+var reactIs_production_min_18 = reactIs_production_min.isContextConsumer;
+var reactIs_production_min_19 = reactIs_production_min.isContextProvider;
+var reactIs_production_min_20 = reactIs_production_min.isElement;
+var reactIs_production_min_21 = reactIs_production_min.isForwardRef;
+var reactIs_production_min_22 = reactIs_production_min.isFragment;
+var reactIs_production_min_23 = reactIs_production_min.isLazy;
+var reactIs_production_min_24 = reactIs_production_min.isMemo;
+var reactIs_production_min_25 = reactIs_production_min.isPortal;
+var reactIs_production_min_26 = reactIs_production_min.isProfiler;
+var reactIs_production_min_27 = reactIs_production_min.isStrictMode;
+var reactIs_production_min_28 = reactIs_production_min.isSuspense;
+
+var reactIs_development = createCommonjsModule(function (module, exports) {
+
+
+
+if (process.env.NODE_ENV !== "production") {
+  (function() {
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+// The Symbol used to tag the ReactElement-like types. If there is no native Symbol
+// nor polyfill, then a plain number is used for performance.
+var hasSymbol = typeof Symbol === 'function' && Symbol.for;
+var REACT_ELEMENT_TYPE = hasSymbol ? Symbol.for('react.element') : 0xeac7;
+var REACT_PORTAL_TYPE = hasSymbol ? Symbol.for('react.portal') : 0xeaca;
+var REACT_FRAGMENT_TYPE = hasSymbol ? Symbol.for('react.fragment') : 0xeacb;
+var REACT_STRICT_MODE_TYPE = hasSymbol ? Symbol.for('react.strict_mode') : 0xeacc;
+var REACT_PROFILER_TYPE = hasSymbol ? Symbol.for('react.profiler') : 0xead2;
+var REACT_PROVIDER_TYPE = hasSymbol ? Symbol.for('react.provider') : 0xeacd;
+var REACT_CONTEXT_TYPE = hasSymbol ? Symbol.for('react.context') : 0xeace; // TODO: We don't use AsyncMode or ConcurrentMode anymore. They were temporary
+// (unstable) APIs that have been removed. Can we remove the symbols?
+
+var REACT_ASYNC_MODE_TYPE = hasSymbol ? Symbol.for('react.async_mode') : 0xeacf;
+var REACT_CONCURRENT_MODE_TYPE = hasSymbol ? Symbol.for('react.concurrent_mode') : 0xeacf;
+var REACT_FORWARD_REF_TYPE = hasSymbol ? Symbol.for('react.forward_ref') : 0xead0;
+var REACT_SUSPENSE_TYPE = hasSymbol ? Symbol.for('react.suspense') : 0xead1;
+var REACT_SUSPENSE_LIST_TYPE = hasSymbol ? Symbol.for('react.suspense_list') : 0xead8;
+var REACT_MEMO_TYPE = hasSymbol ? Symbol.for('react.memo') : 0xead3;
+var REACT_LAZY_TYPE = hasSymbol ? Symbol.for('react.lazy') : 0xead4;
+var REACT_FUNDAMENTAL_TYPE = hasSymbol ? Symbol.for('react.fundamental') : 0xead5;
+var REACT_RESPONDER_TYPE = hasSymbol ? Symbol.for('react.responder') : 0xead6;
+var REACT_SCOPE_TYPE = hasSymbol ? Symbol.for('react.scope') : 0xead7;
+
+function isValidElementType(type) {
+  return typeof type === 'string' || typeof type === 'function' || // Note: its typeof might be other than 'symbol' or 'number' if it's a polyfill.
+  type === REACT_FRAGMENT_TYPE || type === REACT_CONCURRENT_MODE_TYPE || type === REACT_PROFILER_TYPE || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || typeof type === 'object' && type !== null && (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || type.$$typeof === REACT_FUNDAMENTAL_TYPE || type.$$typeof === REACT_RESPONDER_TYPE || type.$$typeof === REACT_SCOPE_TYPE);
+}
+
+/**
+ * Forked from fbjs/warning:
+ * https://github.com/facebook/fbjs/blob/e66ba20ad5be433eb54423f2b097d829324d9de6/packages/fbjs/src/__forks__/warning.js
+ *
+ * Only change is we use console.warn instead of console.error,
+ * and do nothing when 'console' is not supported.
+ * This really simplifies the code.
+ * ---
+ * Similar to invariant but only logs a warning if the condition is not met.
+ * This can be used to log issues in development environments in critical
+ * paths. Removing the logging code for production environments will keep the
+ * same logic and follow the same code paths.
+ */
+var lowPriorityWarningWithoutStack = function () {};
+
+{
+  var printWarning = function (format) {
+    for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+      args[_key - 1] = arguments[_key];
+    }
+
+    var argIndex = 0;
+    var message = 'Warning: ' + format.replace(/%s/g, function () {
+      return args[argIndex++];
+    });
+
+    if (typeof console !== 'undefined') {
+      console.warn(message);
+    }
+
+    try {
+      // --- Welcome to debugging React ---
+      // This error was thrown as a convenience so that you can use this stack
+      // to find the callsite that caused this warning to fire.
+      throw new Error(message);
+    } catch (x) {}
+  };
+
+  lowPriorityWarningWithoutStack = function (condition, format) {
+    if (format === undefined) {
+      throw new Error('`lowPriorityWarningWithoutStack(condition, format, ...args)` requires a warning ' + 'message argument');
+    }
+
+    if (!condition) {
+      for (var _len2 = arguments.length, args = new Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) {
+        args[_key2 - 2] = arguments[_key2];
+      }
+
+      printWarning.apply(void 0, [format].concat(args));
+    }
+  };
+}
+
+var lowPriorityWarningWithoutStack$1 = lowPriorityWarningWithoutStack;
+
+function typeOf(object) {
+  if (typeof object === 'object' && object !== null) {
+    var $$typeof = object.$$typeof;
+
+    switch ($$typeof) {
+      case REACT_ELEMENT_TYPE:
+        var type = object.type;
+
+        switch (type) {
+          case REACT_ASYNC_MODE_TYPE:
+          case REACT_CONCURRENT_MODE_TYPE:
+          case REACT_FRAGMENT_TYPE:
+          case REACT_PROFILER_TYPE:
+          case REACT_STRICT_MODE_TYPE:
+          case REACT_SUSPENSE_TYPE:
+            return type;
+
+          default:
+            var $$typeofType = type && type.$$typeof;
+
+            switch ($$typeofType) {
+              case REACT_CONTEXT_TYPE:
+              case REACT_FORWARD_REF_TYPE:
+              case REACT_PROVIDER_TYPE:
+                return $$typeofType;
+
+              default:
+                return $$typeof;
+            }
+
+        }
+
+      case REACT_LAZY_TYPE:
+      case REACT_MEMO_TYPE:
+      case REACT_PORTAL_TYPE:
+        return $$typeof;
+    }
+  }
+
+  return undefined;
+} // AsyncMode is deprecated along with isAsyncMode
+
+var AsyncMode = REACT_ASYNC_MODE_TYPE;
+var ConcurrentMode = REACT_CONCURRENT_MODE_TYPE;
+var ContextConsumer = REACT_CONTEXT_TYPE;
+var ContextProvider = REACT_PROVIDER_TYPE;
+var Element = REACT_ELEMENT_TYPE;
+var ForwardRef = REACT_FORWARD_REF_TYPE;
+var Fragment = REACT_FRAGMENT_TYPE;
+var Lazy = REACT_LAZY_TYPE;
+var Memo = REACT_MEMO_TYPE;
+var Portal = REACT_PORTAL_TYPE;
+var Profiler = REACT_PROFILER_TYPE;
+var StrictMode = REACT_STRICT_MODE_TYPE;
+var Suspense = REACT_SUSPENSE_TYPE;
+var hasWarnedAboutDeprecatedIsAsyncMode = false; // AsyncMode should be deprecated
+
+function isAsyncMode(object) {
+  {
+    if (!hasWarnedAboutDeprecatedIsAsyncMode) {
+      hasWarnedAboutDeprecatedIsAsyncMode = true;
+      lowPriorityWarningWithoutStack$1(false, 'The ReactIs.isAsyncMode() alias has been deprecated, ' + 'and will be removed in React 17+. Update your code to use ' + 'ReactIs.isConcurrentMode() instead. It has the exact same API.');
+    }
+  }
+
+  return isConcurrentMode(object) || typeOf(object) === REACT_ASYNC_MODE_TYPE;
+}
+function isConcurrentMode(object) {
+  return typeOf(object) === REACT_CONCURRENT_MODE_TYPE;
+}
+function isContextConsumer(object) {
+  return typeOf(object) === REACT_CONTEXT_TYPE;
+}
+function isContextProvider(object) {
+  return typeOf(object) === REACT_PROVIDER_TYPE;
+}
+function isElement(object) {
+  return typeof object === 'object' && object !== null && object.$$typeof === REACT_ELEMENT_TYPE;
+}
+function isForwardRef(object) {
+  return typeOf(object) === REACT_FORWARD_REF_TYPE;
+}
+function isFragment(object) {
+  return typeOf(object) === REACT_FRAGMENT_TYPE;
+}
+function isLazy(object) {
+  return typeOf(object) === REACT_LAZY_TYPE;
+}
+function isMemo(object) {
+  return typeOf(object) === REACT_MEMO_TYPE;
+}
+function isPortal(object) {
+  return typeOf(object) === REACT_PORTAL_TYPE;
+}
+function isProfiler(object) {
+  return typeOf(object) === REACT_PROFILER_TYPE;
+}
+function isStrictMode(object) {
+  return typeOf(object) === REACT_STRICT_MODE_TYPE;
+}
+function isSuspense(object) {
+  return typeOf(object) === REACT_SUSPENSE_TYPE;
+}
+
+exports.typeOf = typeOf;
+exports.AsyncMode = AsyncMode;
+exports.ConcurrentMode = ConcurrentMode;
+exports.ContextConsumer = ContextConsumer;
+exports.ContextProvider = ContextProvider;
+exports.Element = Element;
+exports.ForwardRef = ForwardRef;
+exports.Fragment = Fragment;
+exports.Lazy = Lazy;
+exports.Memo = Memo;
+exports.Portal = Portal;
+exports.Profiler = Profiler;
+exports.StrictMode = StrictMode;
+exports.Suspense = Suspense;
+exports.isValidElementType = isValidElementType;
+exports.isAsyncMode = isAsyncMode;
+exports.isConcurrentMode = isConcurrentMode;
+exports.isContextConsumer = isContextConsumer;
+exports.isContextProvider = isContextProvider;
+exports.isElement = isElement;
+exports.isForwardRef = isForwardRef;
+exports.isFragment = isFragment;
+exports.isLazy = isLazy;
+exports.isMemo = isMemo;
+exports.isPortal = isPortal;
+exports.isProfiler = isProfiler;
+exports.isStrictMode = isStrictMode;
+exports.isSuspense = isSuspense;
+  })();
+}
+});
+
+unwrapExports(reactIs_development);
+var reactIs_development_1 = reactIs_development.typeOf;
+var reactIs_development_2 = reactIs_development.AsyncMode;
+var reactIs_development_3 = reactIs_development.ConcurrentMode;
+var reactIs_development_4 = reactIs_development.ContextConsumer;
+var reactIs_development_5 = reactIs_development.ContextProvider;
+var reactIs_development_6 = reactIs_development.Element;
+var reactIs_development_7 = reactIs_development.ForwardRef;
+var reactIs_development_8 = reactIs_development.Fragment;
+var reactIs_development_9 = reactIs_development.Lazy;
+var reactIs_development_10 = reactIs_development.Memo;
+var reactIs_development_11 = reactIs_development.Portal;
+var reactIs_development_12 = reactIs_development.Profiler;
+var reactIs_development_13 = reactIs_development.StrictMode;
+var reactIs_development_14 = reactIs_development.Suspense;
+var reactIs_development_15 = reactIs_development.isValidElementType;
+var reactIs_development_16 = reactIs_development.isAsyncMode;
+var reactIs_development_17 = reactIs_development.isConcurrentMode;
+var reactIs_development_18 = reactIs_development.isContextConsumer;
+var reactIs_development_19 = reactIs_development.isContextProvider;
+var reactIs_development_20 = reactIs_development.isElement;
+var reactIs_development_21 = reactIs_development.isForwardRef;
+var reactIs_development_22 = reactIs_development.isFragment;
+var reactIs_development_23 = reactIs_development.isLazy;
+var reactIs_development_24 = reactIs_development.isMemo;
+var reactIs_development_25 = reactIs_development.isPortal;
+var reactIs_development_26 = reactIs_development.isProfiler;
+var reactIs_development_27 = reactIs_development.isStrictMode;
+var reactIs_development_28 = reactIs_development.isSuspense;
+
+var reactIs = createCommonjsModule(function (module) {
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = reactIs_production_min;
+} else {
+  module.exports = reactIs_development;
+}
+});
+
+var FORWARD_REF_STATICS = {
+    '$$typeof': true,
+    render: true,
+    defaultProps: true,
+    displayName: true,
+    propTypes: true
+};
+
+var TYPE_STATICS = {};
+TYPE_STATICS[reactIs.ForwardRef] = FORWARD_REF_STATICS;
+
 var WizardContext = createContext({});
@@ -63,46 +394,96 @@ function WizardConsumer(_a) {
 
+function CustomNavigator(_a) {
+    var children = _a.children;
+    return createElement(WizardConsumer, null, function (context) { return children(context); });
+}
+CustomNavigator.propTypes = {
+    children: func.isRequired,
+};
+
+function DefaultNavigator() {
+    return (createElement(CustomNavigator, null, function (_a) {
+        var getNextStepProps = _a.getNextStepProps, getPrevStepProps = _a.getPrevStepProps;
+        return (createElement("div", null,
+            createElement("button", __assign({ type: "button" }, getPrevStepProps()), "Previous"),
+            createElement("button", __assign({ type: "button" }, getNextStepProps()), "Next")));
+    }));
+}
+
 function Navigator(_a) {
     var children = _a.children;
-    return (createElement(WizardConsumer, null, function (context) { return (children ? children(context) : DefaultNavigator(context)); }));
+    return children ? CustomNavigator({ children: children }) : DefaultNavigator();
 }
 
-function DefaultStepTracker(_a) {
-    var _b = _a.currentStep, currentStep = _b === void 0 ? 0 : _b, _c = _a.steps, steps = _c === void 0 ? [] : _c;
-    return (createElement("div", { style: { display: 'block', padding: '25px' } },
-        createElement("div", { style: {
-                display: 'flex',
-                flexDirection: 'row',
-                justifyContent: 'space-between',
-            } }, steps.map(function (step, index) {
-            var key = index + "-" + step;
-            return (createElement("div", { key: key, style: { display: 'block', textAlign: 'center' } },
-                createElement("span", { style: {
-                        display: 'inline-block',
-                        borderRadius: '50%',
-                        lineHeight: '2rem',
-                        height: '30px',
-                        width: '30px',
-                        border: '0.1rem solid #ff161b',
-                        background: currentStep >= index
-                            ? 'linear-gradient(#ff161b,#ff009a)'
-                            : 'white',
-                        color: 'white',
-                    } }, currentStep > index ? '✓' : null),
-                createElement("div", null,
-                    createElement("span", null, step ? index + 1 + ". " + step : ''))));
-        }))));
+function StepGroup(_a) {
+    var children = _a.children, rest = __rest(_a, ["children"]);
+    return (createElement(Fragment, null, Children.map(children, function (childElement) {
+        return cloneElement(childElement, rest);
+    })));
 }
+StepGroup.propTypes = {
+    children: arrayOf(node).isRequired,
+};
 
+function CustomStepTracker(_a) {
+    var children = _a.children;
+    return createElement(WizardConsumer, null, function (context) { return children(context); });
+}
+CustomStepTracker.propTypes = {
+    children: func.isRequired,
+};
+
+function DefaultStepTracker() {
+    return (createElement(CustomStepTracker, null, function (_a) {
+        var _b = _a.currentStep, currentStep = _b === void 0 ? 0 : _b, _c = _a.steps, steps = _c === void 0 ? [] : _c;
+        return (createElement("div", { style: { display: 'block', padding: '25px' } },
+            createElement("div", { style: {
+                    display: 'flex',
+                    flexDirection: 'row',
+                    justifyContent: 'space-between',
+                } }, steps.map(function (step, index) {
+                var key = index + "-" + step;
+                return (createElement("div", { key: key, style: { display: 'block', textAlign: 'center' } },
+                    createElement("span", { style: {
+                            display: 'inline-block',
+                            borderRadius: '50%',
+                            lineHeight: '2rem',
+                            height: '30px',
+                            width: '30px',
+                            border: '0.1rem solid #ff161b',
+                            background: currentStep >= index
+                                ? 'linear-gradient(#ff161b,#ff009a)'
+                                : 'white',
+                            color: 'white',
+                        } }, currentStep > index ? '✓' : null),
+                    createElement("div", null,
+                        createElement("span", null, step ? index + 1 + ". " + step : ''))));
+            }))));
+    }));
+}
+
 function StepTracker(_a) {
     var children = _a.children;
-    return (createElement(WizardConsumer, null, function (context) { return (children ? children(context) : DefaultStepTracker(context)); }));
+    return children ? CustomStepTracker({ children: children }) : DefaultStepTracker();
 }
 
+function getValidSteps(children) {
+    return Children.map(children, function (child) {
+        var _a = child.props.stepCondition, stepCondition = _a === void 0 ? true : _a;
+        return stepCondition ? child : null;
+    });
+}
+
 function Steps(_a) {
     var children = _a.children;
+    var ValidSteps = getValidSteps(children);
     return (createElement(WizardContext.Consumer, null, function (context) {
         return context.totalSteps > 0
-            ? Children.map(children, function (child, index) {
+            ? Children.map(ValidSteps, function (child, index) {
                 return context.currentStep === index
-                    ? cloneElement(child, {})
+                    ? cloneElement(child, {
+                        wizard: {
+                            nexStep: context.nextStep,
+                            prevStep: context.prevStep,
+                        },
+                    })
                     : null;
@@ -113,3 +494,52 @@ })
 }
+Steps.propTypes = {
+    children: oneOfType([
+        arrayOf(node),
+        node,
+    ]).isRequired,
+};
 
+var callAll = function () {
+    var fns = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        fns[_i] = arguments[_i];
+    }
+    return function () {
+        var args = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            args[_i] = arguments[_i];
+        }
+        return fns.forEach(function (fn) { return typeof fn === 'function' && fn.apply(void 0, args); });
+    };
+};
+
+var isInRange = function (number, start, end) {
+    return number >= Math.min(start, end) && number < Math.max(start, end);
+};
+
+function getWizardSteps(children) {
+    var instances = 0;
+    var totalSteps = 0;
+    var steps = [];
+    Children.forEach(children, function (child) {
+        instances = Steps === child.type ? instances + 1 : instances;
+        if (instances > 1) {
+            throw new Error("Wizard must only have a single component of type Steps");
+        }
+        if (child.type === Steps && child.props.children) {
+            var ValidSteps = getValidSteps(child.props.children);
+            totalSteps = Children.count(ValidSteps);
+            Children.forEach(ValidSteps, function (step) {
+                if (step) {
+                    steps = steps.concat(step.props.stepLabel);
+                }
+            });
+        }
+    });
+    return {
+        totalSteps: totalSteps,
+        steps: steps,
+    };
+}
+
 var WizardPropTypes = {
@@ -120,3 +550,3 @@ children: function (props, propName, componentName) {
             if (![Navigator, StepTracker, Steps].some(function (component) { return component === child.type; })) {
-                error = new Error(componentName + " children should only include components of types Wizard.Navigator or Wizard.Steps");
+                error = new Error("Invalid prop `children` passed to `" + componentName + "`. Expected one of the following components `Navigator`, `StepTracker` or `Steps`");
             }
@@ -127,14 +557,5 @@ });
 };
-var getInitialState = function (props, handlers) {
-    var totalSteps = 0;
-    var steps = [];
-    Children.forEach(props.children, function (child) {
-        if (child.type === Steps && child.props.children) {
-            totalSteps = child.props.children.length;
-            Children.forEach(child.props.children, function (step) {
-                steps = steps.concat(step.props.stepLabel);
-            });
-        }
-    });
+var getInitialState = function (props, handlers, propGetters) {
     var currentStep = 0;
+    var _a = getWizardSteps(props.children), steps = _a.steps, totalSteps = _a.totalSteps;
     var isNextAvailable = currentStep < totalSteps - 1;
@@ -149,3 +570,3 @@ var isPrevAvailable = currentStep > 0;
     };
-    return __assign(__assign({}, state), handlers);
+    return __assign(__assign(__assign({}, state), handlers), propGetters);
 };
@@ -156,2 +577,8 @@ var Wizard = (function (_super) {
         var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.handleChildrenChange = function (children, currentStep) {
+            var _a = getWizardSteps(children), totalSteps = _a.totalSteps, rest = __rest(_a, ["totalSteps"]);
+            _this.setState(__assign({ currentStep: isInRange(currentStep, 0, totalSteps)
+                    ? currentStep
+                    : totalSteps - 1, totalSteps: totalSteps }, rest));
+        };
         _this.handleStepChange = function (currentStep, totalSteps) {
@@ -167,2 +594,18 @@ _this.setState({
         };
+        _this.goToStep = function (step) {
+            var totalSteps = _this.state.totalSteps;
+            if (isInRange(step, 0, totalSteps)) {
+                _this.setState({ currentStep: step });
+            }
+            else {
+                throw new Error("Step `" + step + "` is out of the range [0, " + (totalSteps - 1) + "]");
+            }
+        };
+        _this.firstStep = function () {
+            _this.goToStep(0);
+        };
+        _this.lastStep = function () {
+            var totalSteps = _this.state.totalSteps;
+            _this.goToStep(totalSteps - 1);
+        };
         _this.nextStep = function () {
@@ -182,11 +625,47 @@ var isNextAvailable = _this.state.isNextAvailable;
         };
+        _this.getFirstStepProps = function (props) {
+            if (props === void 0) { props = { onClick: undefined }; }
+            var isPrevAvailable = _this.state.isPrevAvailable;
+            var onClick = props.onClick, rest = __rest(props, ["onClick"]);
+            return __assign(__assign({}, rest), { type: 'button', role: 'button', disabled: !isPrevAvailable, onClick: callAll(onClick, _this.firstStep) });
+        };
+        _this.getLastStepProps = function (props) {
+            if (props === void 0) { props = { onClick: undefined }; }
+            var isNextAvailable = _this.state.isNextAvailable;
+            var onClick = props.onClick, rest = __rest(props, ["onClick"]);
+            return __assign(__assign({}, rest), { type: 'button', role: 'button', disabled: !isNextAvailable, onClick: callAll(onClick, _this.lastStep) });
+        };
+        _this.getNextStepProps = function (props) {
+            if (props === void 0) { props = { onClick: undefined }; }
+            var isNextAvailable = _this.state.isNextAvailable;
+            var onClick = props.onClick, rest = __rest(props, ["onClick"]);
+            return __assign(__assign({}, rest), { type: 'button', role: 'button', disabled: !isNextAvailable, onClick: callAll(onClick, _this.nextStep) });
+        };
+        _this.getPrevStepProps = function (props) {
+            if (props === void 0) { props = { onClick: undefined }; }
+            var isPrevAvailable = _this.state.isPrevAvailable;
+            var onClick = props.onClick, rest = __rest(props, ["onClick"]);
+            return __assign(__assign({}, rest), { type: 'button', role: 'button', disabled: !isPrevAvailable, onClick: callAll(onClick, _this.prevStep) });
+        };
         _this.state = getInitialState(_this.props, {
+            firstStep: _this.firstStep,
+            goToStep: _this.goToStep,
+            lastStep: _this.lastStep,
             nextStep: _this.nextStep,
             prevStep: _this.prevStep,
+        }, {
+            getFirstStepProps: _this.getFirstStepProps,
+            getLastStepProps: _this.getLastStepProps,
+            getNextStepProps: _this.getNextStepProps,
+            getPrevStepProps: _this.getPrevStepProps,
         });
         return _this;
     }
-    Wizard.prototype.componentDidUpdate = function (_, prevState) {
+    Wizard.prototype.componentDidUpdate = function (prevProps, prevState) {
+        var children = this.props.children;
         var _a = this.state, currentStep = _a.currentStep, totalSteps = _a.totalSteps;
-        if (prevState.currentStep !== currentStep)
+        if (prevProps.children !== children)
+            this.handleChildrenChange(children, currentStep);
+        if (prevState.currentStep !== currentStep ||
+            prevState.totalSteps !== totalSteps)
             this.handleStepChange(currentStep, totalSteps);
@@ -200,2 +679,3 @@ };
     Wizard.Navigator = Navigator;
+    Wizard.StepGroup = StepGroup;
     Wizard.StepTracker = StepTracker;
@@ -202,0 +682,0 @@ Wizard.Steps = Steps;

lib/index.js

@@ -6,2 +6,3 @@ 'use strict';
 var React = require('react');
+var PropTypes = require('prop-types');
 
@@ -48,9 +49,339 @@ /*! *****************************************************************************
 
-function DefaultNavigator(_a) {
-    var isNextAvailable = _a.isNextAvailable, isPrevAvailable = _a.isPrevAvailable, nextStep = _a.nextStep, prevStep = _a.prevStep;
-    return (React.createElement("div", null,
-        React.createElement("button", { type: "button", onClick: prevStep, disabled: !isPrevAvailable }, "Previous"),
-        React.createElement("button", { type: "button", onClick: nextStep, disabled: !isNextAvailable }, "Next")));
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
 }
 
+function unwrapExports (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
+function createCommonjsModule(fn, module) {
+	return module = { exports: {} }, fn(module, module.exports), module.exports;
+}
+
+var reactIs_production_min = createCommonjsModule(function (module, exports) {
+Object.defineProperty(exports,"__esModule",{value:!0});
+var b="function"===typeof Symbol&&Symbol.for,c=b?Symbol.for("react.element"):60103,d=b?Symbol.for("react.portal"):60106,e=b?Symbol.for("react.fragment"):60107,f=b?Symbol.for("react.strict_mode"):60108,g=b?Symbol.for("react.profiler"):60114,h=b?Symbol.for("react.provider"):60109,k=b?Symbol.for("react.context"):60110,l=b?Symbol.for("react.async_mode"):60111,m=b?Symbol.for("react.concurrent_mode"):60111,n=b?Symbol.for("react.forward_ref"):60112,p=b?Symbol.for("react.suspense"):60113,q=b?Symbol.for("react.suspense_list"):
+60120,r=b?Symbol.for("react.memo"):60115,t=b?Symbol.for("react.lazy"):60116,v=b?Symbol.for("react.fundamental"):60117,w=b?Symbol.for("react.responder"):60118,x=b?Symbol.for("react.scope"):60119;function y(a){if("object"===typeof a&&null!==a){var u=a.$$typeof;switch(u){case c:switch(a=a.type,a){case l:case m:case e:case g:case f:case p:return a;default:switch(a=a&&a.$$typeof,a){case k:case n:case h:return a;default:return u}}case t:case r:case d:return u}}}function z(a){return y(a)===m}
+exports.typeOf=y;exports.AsyncMode=l;exports.ConcurrentMode=m;exports.ContextConsumer=k;exports.ContextProvider=h;exports.Element=c;exports.ForwardRef=n;exports.Fragment=e;exports.Lazy=t;exports.Memo=r;exports.Portal=d;exports.Profiler=g;exports.StrictMode=f;exports.Suspense=p;
+exports.isValidElementType=function(a){return "string"===typeof a||"function"===typeof a||a===e||a===m||a===g||a===f||a===p||a===q||"object"===typeof a&&null!==a&&(a.$$typeof===t||a.$$typeof===r||a.$$typeof===h||a.$$typeof===k||a.$$typeof===n||a.$$typeof===v||a.$$typeof===w||a.$$typeof===x)};exports.isAsyncMode=function(a){return z(a)||y(a)===l};exports.isConcurrentMode=z;exports.isContextConsumer=function(a){return y(a)===k};exports.isContextProvider=function(a){return y(a)===h};
+exports.isElement=function(a){return "object"===typeof a&&null!==a&&a.$$typeof===c};exports.isForwardRef=function(a){return y(a)===n};exports.isFragment=function(a){return y(a)===e};exports.isLazy=function(a){return y(a)===t};exports.isMemo=function(a){return y(a)===r};exports.isPortal=function(a){return y(a)===d};exports.isProfiler=function(a){return y(a)===g};exports.isStrictMode=function(a){return y(a)===f};exports.isSuspense=function(a){return y(a)===p};
+});
+
+unwrapExports(reactIs_production_min);
+var reactIs_production_min_1 = reactIs_production_min.typeOf;
+var reactIs_production_min_2 = reactIs_production_min.AsyncMode;
+var reactIs_production_min_3 = reactIs_production_min.ConcurrentMode;
+var reactIs_production_min_4 = reactIs_production_min.ContextConsumer;
+var reactIs_production_min_5 = reactIs_production_min.ContextProvider;
+var reactIs_production_min_6 = reactIs_production_min.Element;
+var reactIs_production_min_7 = reactIs_production_min.ForwardRef;
+var reactIs_production_min_8 = reactIs_production_min.Fragment;
+var reactIs_production_min_9 = reactIs_production_min.Lazy;
+var reactIs_production_min_10 = reactIs_production_min.Memo;
+var reactIs_production_min_11 = reactIs_production_min.Portal;
+var reactIs_production_min_12 = reactIs_production_min.Profiler;
+var reactIs_production_min_13 = reactIs_production_min.StrictMode;
+var reactIs_production_min_14 = reactIs_production_min.Suspense;
+var reactIs_production_min_15 = reactIs_production_min.isValidElementType;
+var reactIs_production_min_16 = reactIs_production_min.isAsyncMode;
+var reactIs_production_min_17 = reactIs_production_min.isConcurrentMode;
+var reactIs_production_min_18 = reactIs_production_min.isContextConsumer;
+var reactIs_production_min_19 = reactIs_production_min.isContextProvider;
+var reactIs_production_min_20 = reactIs_production_min.isElement;
+var reactIs_production_min_21 = reactIs_production_min.isForwardRef;
+var reactIs_production_min_22 = reactIs_production_min.isFragment;
+var reactIs_production_min_23 = reactIs_production_min.isLazy;
+var reactIs_production_min_24 = reactIs_production_min.isMemo;
+var reactIs_production_min_25 = reactIs_production_min.isPortal;
+var reactIs_production_min_26 = reactIs_production_min.isProfiler;
+var reactIs_production_min_27 = reactIs_production_min.isStrictMode;
+var reactIs_production_min_28 = reactIs_production_min.isSuspense;
+
+var reactIs_development = createCommonjsModule(function (module, exports) {
+
+
+
+if (process.env.NODE_ENV !== "production") {
+  (function() {
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+// The Symbol used to tag the ReactElement-like types. If there is no native Symbol
+// nor polyfill, then a plain number is used for performance.
+var hasSymbol = typeof Symbol === 'function' && Symbol.for;
+var REACT_ELEMENT_TYPE = hasSymbol ? Symbol.for('react.element') : 0xeac7;
+var REACT_PORTAL_TYPE = hasSymbol ? Symbol.for('react.portal') : 0xeaca;
+var REACT_FRAGMENT_TYPE = hasSymbol ? Symbol.for('react.fragment') : 0xeacb;
+var REACT_STRICT_MODE_TYPE = hasSymbol ? Symbol.for('react.strict_mode') : 0xeacc;
+var REACT_PROFILER_TYPE = hasSymbol ? Symbol.for('react.profiler') : 0xead2;
+var REACT_PROVIDER_TYPE = hasSymbol ? Symbol.for('react.provider') : 0xeacd;
+var REACT_CONTEXT_TYPE = hasSymbol ? Symbol.for('react.context') : 0xeace; // TODO: We don't use AsyncMode or ConcurrentMode anymore. They were temporary
+// (unstable) APIs that have been removed. Can we remove the symbols?
+
+var REACT_ASYNC_MODE_TYPE = hasSymbol ? Symbol.for('react.async_mode') : 0xeacf;
+var REACT_CONCURRENT_MODE_TYPE = hasSymbol ? Symbol.for('react.concurrent_mode') : 0xeacf;
+var REACT_FORWARD_REF_TYPE = hasSymbol ? Symbol.for('react.forward_ref') : 0xead0;
+var REACT_SUSPENSE_TYPE = hasSymbol ? Symbol.for('react.suspense') : 0xead1;
+var REACT_SUSPENSE_LIST_TYPE = hasSymbol ? Symbol.for('react.suspense_list') : 0xead8;
+var REACT_MEMO_TYPE = hasSymbol ? Symbol.for('react.memo') : 0xead3;
+var REACT_LAZY_TYPE = hasSymbol ? Symbol.for('react.lazy') : 0xead4;
+var REACT_FUNDAMENTAL_TYPE = hasSymbol ? Symbol.for('react.fundamental') : 0xead5;
+var REACT_RESPONDER_TYPE = hasSymbol ? Symbol.for('react.responder') : 0xead6;
+var REACT_SCOPE_TYPE = hasSymbol ? Symbol.for('react.scope') : 0xead7;
+
+function isValidElementType(type) {
+  return typeof type === 'string' || typeof type === 'function' || // Note: its typeof might be other than 'symbol' or 'number' if it's a polyfill.
+  type === REACT_FRAGMENT_TYPE || type === REACT_CONCURRENT_MODE_TYPE || type === REACT_PROFILER_TYPE || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || typeof type === 'object' && type !== null && (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || type.$$typeof === REACT_FUNDAMENTAL_TYPE || type.$$typeof === REACT_RESPONDER_TYPE || type.$$typeof === REACT_SCOPE_TYPE);
+}
+
+/**
+ * Forked from fbjs/warning:
+ * https://github.com/facebook/fbjs/blob/e66ba20ad5be433eb54423f2b097d829324d9de6/packages/fbjs/src/__forks__/warning.js
+ *
+ * Only change is we use console.warn instead of console.error,
+ * and do nothing when 'console' is not supported.
+ * This really simplifies the code.
+ * ---
+ * Similar to invariant but only logs a warning if the condition is not met.
+ * This can be used to log issues in development environments in critical
+ * paths. Removing the logging code for production environments will keep the
+ * same logic and follow the same code paths.
+ */
+var lowPriorityWarningWithoutStack = function () {};
+
+{
+  var printWarning = function (format) {
+    for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+      args[_key - 1] = arguments[_key];
+    }
+
+    var argIndex = 0;
+    var message = 'Warning: ' + format.replace(/%s/g, function () {
+      return args[argIndex++];
+    });
+
+    if (typeof console !== 'undefined') {
+      console.warn(message);
+    }
+
+    try {
+      // --- Welcome to debugging React ---
+      // This error was thrown as a convenience so that you can use this stack
+      // to find the callsite that caused this warning to fire.
+      throw new Error(message);
+    } catch (x) {}
+  };
+
+  lowPriorityWarningWithoutStack = function (condition, format) {
+    if (format === undefined) {
+      throw new Error('`lowPriorityWarningWithoutStack(condition, format, ...args)` requires a warning ' + 'message argument');
+    }
+
+    if (!condition) {
+      for (var _len2 = arguments.length, args = new Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) {
+        args[_key2 - 2] = arguments[_key2];
+      }
+
+      printWarning.apply(void 0, [format].concat(args));
+    }
+  };
+}
+
+var lowPriorityWarningWithoutStack$1 = lowPriorityWarningWithoutStack;
+
+function typeOf(object) {
+  if (typeof object === 'object' && object !== null) {
+    var $$typeof = object.$$typeof;
+
+    switch ($$typeof) {
+      case REACT_ELEMENT_TYPE:
+        var type = object.type;
+
+        switch (type) {
+          case REACT_ASYNC_MODE_TYPE:
+          case REACT_CONCURRENT_MODE_TYPE:
+          case REACT_FRAGMENT_TYPE:
+          case REACT_PROFILER_TYPE:
+          case REACT_STRICT_MODE_TYPE:
+          case REACT_SUSPENSE_TYPE:
+            return type;
+
+          default:
+            var $$typeofType = type && type.$$typeof;
+
+            switch ($$typeofType) {
+              case REACT_CONTEXT_TYPE:
+              case REACT_FORWARD_REF_TYPE:
+              case REACT_PROVIDER_TYPE:
+                return $$typeofType;
+
+              default:
+                return $$typeof;
+            }
+
+        }
+
+      case REACT_LAZY_TYPE:
+      case REACT_MEMO_TYPE:
+      case REACT_PORTAL_TYPE:
+        return $$typeof;
+    }
+  }
+
+  return undefined;
+} // AsyncMode is deprecated along with isAsyncMode
+
+var AsyncMode = REACT_ASYNC_MODE_TYPE;
+var ConcurrentMode = REACT_CONCURRENT_MODE_TYPE;
+var ContextConsumer = REACT_CONTEXT_TYPE;
+var ContextProvider = REACT_PROVIDER_TYPE;
+var Element = REACT_ELEMENT_TYPE;
+var ForwardRef = REACT_FORWARD_REF_TYPE;
+var Fragment = REACT_FRAGMENT_TYPE;
+var Lazy = REACT_LAZY_TYPE;
+var Memo = REACT_MEMO_TYPE;
+var Portal = REACT_PORTAL_TYPE;
+var Profiler = REACT_PROFILER_TYPE;
+var StrictMode = REACT_STRICT_MODE_TYPE;
+var Suspense = REACT_SUSPENSE_TYPE;
+var hasWarnedAboutDeprecatedIsAsyncMode = false; // AsyncMode should be deprecated
+
+function isAsyncMode(object) {
+  {
+    if (!hasWarnedAboutDeprecatedIsAsyncMode) {
+      hasWarnedAboutDeprecatedIsAsyncMode = true;
+      lowPriorityWarningWithoutStack$1(false, 'The ReactIs.isAsyncMode() alias has been deprecated, ' + 'and will be removed in React 17+. Update your code to use ' + 'ReactIs.isConcurrentMode() instead. It has the exact same API.');
+    }
+  }
+
+  return isConcurrentMode(object) || typeOf(object) === REACT_ASYNC_MODE_TYPE;
+}
+function isConcurrentMode(object) {
+  return typeOf(object) === REACT_CONCURRENT_MODE_TYPE;
+}
+function isContextConsumer(object) {
+  return typeOf(object) === REACT_CONTEXT_TYPE;
+}
+function isContextProvider(object) {
+  return typeOf(object) === REACT_PROVIDER_TYPE;
+}
+function isElement(object) {
+  return typeof object === 'object' && object !== null && object.$$typeof === REACT_ELEMENT_TYPE;
+}
+function isForwardRef(object) {
+  return typeOf(object) === REACT_FORWARD_REF_TYPE;
+}
+function isFragment(object) {
+  return typeOf(object) === REACT_FRAGMENT_TYPE;
+}
+function isLazy(object) {
+  return typeOf(object) === REACT_LAZY_TYPE;
+}
+function isMemo(object) {
+  return typeOf(object) === REACT_MEMO_TYPE;
+}
+function isPortal(object) {
+  return typeOf(object) === REACT_PORTAL_TYPE;
+}
+function isProfiler(object) {
+  return typeOf(object) === REACT_PROFILER_TYPE;
+}
+function isStrictMode(object) {
+  return typeOf(object) === REACT_STRICT_MODE_TYPE;
+}
+function isSuspense(object) {
+  return typeOf(object) === REACT_SUSPENSE_TYPE;
+}
+
+exports.typeOf = typeOf;
+exports.AsyncMode = AsyncMode;
+exports.ConcurrentMode = ConcurrentMode;
+exports.ContextConsumer = ContextConsumer;
+exports.ContextProvider = ContextProvider;
+exports.Element = Element;
+exports.ForwardRef = ForwardRef;
+exports.Fragment = Fragment;
+exports.Lazy = Lazy;
+exports.Memo = Memo;
+exports.Portal = Portal;
+exports.Profiler = Profiler;
+exports.StrictMode = StrictMode;
+exports.Suspense = Suspense;
+exports.isValidElementType = isValidElementType;
+exports.isAsyncMode = isAsyncMode;
+exports.isConcurrentMode = isConcurrentMode;
+exports.isContextConsumer = isContextConsumer;
+exports.isContextProvider = isContextProvider;
+exports.isElement = isElement;
+exports.isForwardRef = isForwardRef;
+exports.isFragment = isFragment;
+exports.isLazy = isLazy;
+exports.isMemo = isMemo;
+exports.isPortal = isPortal;
+exports.isProfiler = isProfiler;
+exports.isStrictMode = isStrictMode;
+exports.isSuspense = isSuspense;
+  })();
+}
+});
+
+unwrapExports(reactIs_development);
+var reactIs_development_1 = reactIs_development.typeOf;
+var reactIs_development_2 = reactIs_development.AsyncMode;
+var reactIs_development_3 = reactIs_development.ConcurrentMode;
+var reactIs_development_4 = reactIs_development.ContextConsumer;
+var reactIs_development_5 = reactIs_development.ContextProvider;
+var reactIs_development_6 = reactIs_development.Element;
+var reactIs_development_7 = reactIs_development.ForwardRef;
+var reactIs_development_8 = reactIs_development.Fragment;
+var reactIs_development_9 = reactIs_development.Lazy;
+var reactIs_development_10 = reactIs_development.Memo;
+var reactIs_development_11 = reactIs_development.Portal;
+var reactIs_development_12 = reactIs_development.Profiler;
+var reactIs_development_13 = reactIs_development.StrictMode;
+var reactIs_development_14 = reactIs_development.Suspense;
+var reactIs_development_15 = reactIs_development.isValidElementType;
+var reactIs_development_16 = reactIs_development.isAsyncMode;
+var reactIs_development_17 = reactIs_development.isConcurrentMode;
+var reactIs_development_18 = reactIs_development.isContextConsumer;
+var reactIs_development_19 = reactIs_development.isContextProvider;
+var reactIs_development_20 = reactIs_development.isElement;
+var reactIs_development_21 = reactIs_development.isForwardRef;
+var reactIs_development_22 = reactIs_development.isFragment;
+var reactIs_development_23 = reactIs_development.isLazy;
+var reactIs_development_24 = reactIs_development.isMemo;
+var reactIs_development_25 = reactIs_development.isPortal;
+var reactIs_development_26 = reactIs_development.isProfiler;
+var reactIs_development_27 = reactIs_development.isStrictMode;
+var reactIs_development_28 = reactIs_development.isSuspense;
+
+var reactIs = createCommonjsModule(function (module) {
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = reactIs_production_min;
+} else {
+  module.exports = reactIs_development;
+}
+});
+
+var FORWARD_REF_STATICS = {
+    '$$typeof': true,
+    render: true,
+    defaultProps: true,
+    displayName: true,
+    propTypes: true
+};
+
+var TYPE_STATICS = {};
+TYPE_STATICS[reactIs.ForwardRef] = FORWARD_REF_STATICS;
+
 var WizardContext = React.createContext({});
@@ -68,46 +399,96 @@ function WizardConsumer(_a) {
 
+function CustomNavigator(_a) {
+    var children = _a.children;
+    return React.createElement(WizardConsumer, null, function (context) { return children(context); });
+}
+CustomNavigator.propTypes = {
+    children: PropTypes.func.isRequired,
+};
+
+function DefaultNavigator() {
+    return (React.createElement(CustomNavigator, null, function (_a) {
+        var getNextStepProps = _a.getNextStepProps, getPrevStepProps = _a.getPrevStepProps;
+        return (React.createElement("div", null,
+            React.createElement("button", __assign({ type: "button" }, getPrevStepProps()), "Previous"),
+            React.createElement("button", __assign({ type: "button" }, getNextStepProps()), "Next")));
+    }));
+}
+
 function Navigator(_a) {
     var children = _a.children;
-    return (React.createElement(WizardConsumer, null, function (context) { return (children ? children(context) : DefaultNavigator(context)); }));
+    return children ? CustomNavigator({ children: children }) : DefaultNavigator();
 }
 
-function DefaultStepTracker(_a) {
-    var _b = _a.currentStep, currentStep = _b === void 0 ? 0 : _b, _c = _a.steps, steps = _c === void 0 ? [] : _c;
-    return (React.createElement("div", { style: { display: 'block', padding: '25px' } },
-        React.createElement("div", { style: {
-                display: 'flex',
-                flexDirection: 'row',
-                justifyContent: 'space-between',
-            } }, steps.map(function (step, index) {
-            var key = index + "-" + step;
-            return (React.createElement("div", { key: key, style: { display: 'block', textAlign: 'center' } },
-                React.createElement("span", { style: {
-                        display: 'inline-block',
-                        borderRadius: '50%',
-                        lineHeight: '2rem',
-                        height: '30px',
-                        width: '30px',
-                        border: '0.1rem solid #ff161b',
-                        background: currentStep >= index
-                            ? 'linear-gradient(#ff161b,#ff009a)'
-                            : 'white',
-                        color: 'white',
-                    } }, currentStep > index ? '✓' : null),
-                React.createElement("div", null,
-                    React.createElement("span", null, step ? index + 1 + ". " + step : ''))));
-        }))));
+function StepGroup(_a) {
+    var children = _a.children, rest = __rest(_a, ["children"]);
+    return (React.createElement(React.Fragment, null, React.Children.map(children, function (childElement) {
+        return React.cloneElement(childElement, rest);
+    })));
 }
+StepGroup.propTypes = {
+    children: PropTypes.arrayOf(PropTypes.node).isRequired,
+};
 
+function CustomStepTracker(_a) {
+    var children = _a.children;
+    return React.createElement(WizardConsumer, null, function (context) { return children(context); });
+}
+CustomStepTracker.propTypes = {
+    children: PropTypes.func.isRequired,
+};
+
+function DefaultStepTracker() {
+    return (React.createElement(CustomStepTracker, null, function (_a) {
+        var _b = _a.currentStep, currentStep = _b === void 0 ? 0 : _b, _c = _a.steps, steps = _c === void 0 ? [] : _c;
+        return (React.createElement("div", { style: { display: 'block', padding: '25px' } },
+            React.createElement("div", { style: {
+                    display: 'flex',
+                    flexDirection: 'row',
+                    justifyContent: 'space-between',
+                } }, steps.map(function (step, index) {
+                var key = index + "-" + step;
+                return (React.createElement("div", { key: key, style: { display: 'block', textAlign: 'center' } },
+                    React.createElement("span", { style: {
+                            display: 'inline-block',
+                            borderRadius: '50%',
+                            lineHeight: '2rem',
+                            height: '30px',
+                            width: '30px',
+                            border: '0.1rem solid #ff161b',
+                            background: currentStep >= index
+                                ? 'linear-gradient(#ff161b,#ff009a)'
+                                : 'white',
+                            color: 'white',
+                        } }, currentStep > index ? '✓' : null),
+                    React.createElement("div", null,
+                        React.createElement("span", null, step ? index + 1 + ". " + step : ''))));
+            }))));
+    }));
+}
+
 function StepTracker(_a) {
     var children = _a.children;
-    return (React.createElement(WizardConsumer, null, function (context) { return (children ? children(context) : DefaultStepTracker(context)); }));
+    return children ? CustomStepTracker({ children: children }) : DefaultStepTracker();
 }
 
+function getValidSteps(children) {
+    return React.Children.map(children, function (child) {
+        var _a = child.props.stepCondition, stepCondition = _a === void 0 ? true : _a;
+        return stepCondition ? child : null;
+    });
+}
+
 function Steps(_a) {
     var children = _a.children;
+    var ValidSteps = getValidSteps(children);
     return (React.createElement(WizardContext.Consumer, null, function (context) {
         return context.totalSteps > 0
-            ? React.Children.map(children, function (child, index) {
+            ? React.Children.map(ValidSteps, function (child, index) {
                 return context.currentStep === index
-                    ? React.cloneElement(child, {})
+                    ? React.cloneElement(child, {
+                        wizard: {
+                            nexStep: context.nextStep,
+                            prevStep: context.prevStep,
+                        },
+                    })
                     : null;
@@ -118,3 +499,52 @@ })
 }
+Steps.propTypes = {
+    children: PropTypes.oneOfType([
+        PropTypes.arrayOf(PropTypes.node),
+        PropTypes.node,
+    ]).isRequired,
+};
 
+var callAll = function () {
+    var fns = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        fns[_i] = arguments[_i];
+    }
+    return function () {
+        var args = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            args[_i] = arguments[_i];
+        }
+        return fns.forEach(function (fn) { return typeof fn === 'function' && fn.apply(void 0, args); });
+    };
+};
+
+var isInRange = function (number, start, end) {
+    return number >= Math.min(start, end) && number < Math.max(start, end);
+};
+
+function getWizardSteps(children) {
+    var instances = 0;
+    var totalSteps = 0;
+    var steps = [];
+    React.Children.forEach(children, function (child) {
+        instances = Steps === child.type ? instances + 1 : instances;
+        if (instances > 1) {
+            throw new Error("Wizard must only have a single component of type Steps");
+        }
+        if (child.type === Steps && child.props.children) {
+            var ValidSteps = getValidSteps(child.props.children);
+            totalSteps = React.Children.count(ValidSteps);
+            React.Children.forEach(ValidSteps, function (step) {
+                if (step) {
+                    steps = steps.concat(step.props.stepLabel);
+                }
+            });
+        }
+    });
+    return {
+        totalSteps: totalSteps,
+        steps: steps,
+    };
+}
+
 var WizardPropTypes = {
@@ -125,3 +555,3 @@ children: function (props, propName, componentName) {
             if (![Navigator, StepTracker, Steps].some(function (component) { return component === child.type; })) {
-                error = new Error(componentName + " children should only include components of types Wizard.Navigator or Wizard.Steps");
+                error = new Error("Invalid prop `children` passed to `" + componentName + "`. Expected one of the following components `Navigator`, `StepTracker` or `Steps`");
             }
@@ -132,14 +562,5 @@ });
 };
-var getInitialState = function (props, handlers) {
-    var totalSteps = 0;
-    var steps = [];
-    React.Children.forEach(props.children, function (child) {
-        if (child.type === Steps && child.props.children) {
-            totalSteps = child.props.children.length;
-            React.Children.forEach(child.props.children, function (step) {
-                steps = steps.concat(step.props.stepLabel);
-            });
-        }
-    });
+var getInitialState = function (props, handlers, propGetters) {
     var currentStep = 0;
+    var _a = getWizardSteps(props.children), steps = _a.steps, totalSteps = _a.totalSteps;
     var isNextAvailable = currentStep < totalSteps - 1;
@@ -154,3 +575,3 @@ var isPrevAvailable = currentStep > 0;
     };
-    return __assign(__assign({}, state), handlers);
+    return __assign(__assign(__assign({}, state), handlers), propGetters);
 };
@@ -161,2 +582,8 @@ var Wizard = (function (_super) {
         var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.handleChildrenChange = function (children, currentStep) {
+            var _a = getWizardSteps(children), totalSteps = _a.totalSteps, rest = __rest(_a, ["totalSteps"]);
+            _this.setState(__assign({ currentStep: isInRange(currentStep, 0, totalSteps)
+                    ? currentStep
+                    : totalSteps - 1, totalSteps: totalSteps }, rest));
+        };
         _this.handleStepChange = function (currentStep, totalSteps) {
@@ -172,2 +599,18 @@ _this.setState({
         };
+        _this.goToStep = function (step) {
+            var totalSteps = _this.state.totalSteps;
+            if (isInRange(step, 0, totalSteps)) {
+                _this.setState({ currentStep: step });
+            }
+            else {
+                throw new Error("Step `" + step + "` is out of the range [0, " + (totalSteps - 1) + "]");
+            }
+        };
+        _this.firstStep = function () {
+            _this.goToStep(0);
+        };
+        _this.lastStep = function () {
+            var totalSteps = _this.state.totalSteps;
+            _this.goToStep(totalSteps - 1);
+        };
         _this.nextStep = function () {
@@ -187,11 +630,47 @@ var isNextAvailable = _this.state.isNextAvailable;
         };
+        _this.getFirstStepProps = function (props) {
+            if (props === void 0) { props = { onClick: undefined }; }
+            var isPrevAvailable = _this.state.isPrevAvailable;
+            var onClick = props.onClick, rest = __rest(props, ["onClick"]);
+            return __assign(__assign({}, rest), { type: 'button', role: 'button', disabled: !isPrevAvailable, onClick: callAll(onClick, _this.firstStep) });
+        };
+        _this.getLastStepProps = function (props) {
+            if (props === void 0) { props = { onClick: undefined }; }
+            var isNextAvailable = _this.state.isNextAvailable;
+            var onClick = props.onClick, rest = __rest(props, ["onClick"]);
+            return __assign(__assign({}, rest), { type: 'button', role: 'button', disabled: !isNextAvailable, onClick: callAll(onClick, _this.lastStep) });
+        };
+        _this.getNextStepProps = function (props) {
+            if (props === void 0) { props = { onClick: undefined }; }
+            var isNextAvailable = _this.state.isNextAvailable;
+            var onClick = props.onClick, rest = __rest(props, ["onClick"]);
+            return __assign(__assign({}, rest), { type: 'button', role: 'button', disabled: !isNextAvailable, onClick: callAll(onClick, _this.nextStep) });
+        };
+        _this.getPrevStepProps = function (props) {
+            if (props === void 0) { props = { onClick: undefined }; }
+            var isPrevAvailable = _this.state.isPrevAvailable;
+            var onClick = props.onClick, rest = __rest(props, ["onClick"]);
+            return __assign(__assign({}, rest), { type: 'button', role: 'button', disabled: !isPrevAvailable, onClick: callAll(onClick, _this.prevStep) });
+        };
         _this.state = getInitialState(_this.props, {
+            firstStep: _this.firstStep,
+            goToStep: _this.goToStep,
+            lastStep: _this.lastStep,
             nextStep: _this.nextStep,
             prevStep: _this.prevStep,
+        }, {
+            getFirstStepProps: _this.getFirstStepProps,
+            getLastStepProps: _this.getLastStepProps,
+            getNextStepProps: _this.getNextStepProps,
+            getPrevStepProps: _this.getPrevStepProps,
         });
         return _this;
     }
-    Wizard.prototype.componentDidUpdate = function (_, prevState) {
+    Wizard.prototype.componentDidUpdate = function (prevProps, prevState) {
+        var children = this.props.children;
         var _a = this.state, currentStep = _a.currentStep, totalSteps = _a.totalSteps;
-        if (prevState.currentStep !== currentStep)
+        if (prevProps.children !== children)
+            this.handleChildrenChange(children, currentStep);
+        if (prevState.currentStep !== currentStep ||
+            prevState.totalSteps !== totalSteps)
             this.handleStepChange(currentStep, totalSteps);
@@ -205,2 +684,3 @@ };
     Wizard.Navigator = Navigator;
+    Wizard.StepGroup = StepGroup;
     Wizard.StepTracker = StepTracker;
@@ -207,0 +687,0 @@ Wizard.Steps = Steps;

package.json

 {
   "name": "react-simple-step-wizard",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "description": "React simple step wizard",
@@ -16,10 +16,16 @@ "keywords": [
     "build": "rollup -c",
+    "cz": "git-cz",
     "deploy": "gh-pages -d example/build",
+    "lint-staged": "lint-staged",
     "lint": "eslint \"src/**/*.{ts,tsx}\"",
-    "lint-staged": "lint-staged",
+    "lockfile-lint": "lockfile-lint --path package-lock.json --type npm --allowed-hosts npm",
+    "precommit": "npm run lint-staged && npm run lockfile-lint && npm run test -- --verbose",
+    "dev": "concurrently \"npm run start\" \"npm run start --prefix ./example\"",
     "predeploy": "cd example && npm install && npm run build",
     "prepare": "npm run build",
     "prettier": "prettier \"src/**/*.+(js|jsx|json|yml|yaml|css|less|scss|ts|tsx|md|mdx)\"",
+    "release": "standard-version",
     "start": "rollup -c -w",
-    "test": "echo \"Error: no test specified\" && exit 1",
+    "test:watch": "npm run test -- --watch",
+    "test": "jest -c jest.config.js",
     "validate": "npm run lint && npm run prettier -- --list-different"
@@ -39,6 +45,14 @@ },
     "react": "^16.3.0",
-    "react-dom": "^16.3.0"
+    "react-dom": "^16.3.0",
+    "prop-types": "^15.6.0"
   },
   "devDependencies": {
+    "@commitlint/cli": "^8.2.0",
+    "@commitlint/config-conventional": "^8.2.0",
     "@svgr/rollup": "^4.3.3",
+    "@testing-library/jest-dom": "^4.1.2",
+    "@testing-library/react": "^9.3.0",
+    "@types/hoist-non-react-statics": "^3.3.1",
+    "@types/jest": "^24.0.18",
+    "@types/prop-types": "^15.7.3",
     "@types/react": "^16.9.3",
@@ -48,2 +62,4 @@ "@types/react-dom": "^16.9.1",
     "@typescript-eslint/parser": "^2.3.0",
+    "concurrently": "^5.0.0",
+    "cz-conventional-changelog": "^3.0.2",
     "eslint": "^6.5.1",
@@ -53,2 +69,3 @@ "eslint-config-airbnb": "^18.0.1",
     "eslint-plugin-import": "^2.17.1",
+    "eslint-plugin-jest": "^22.17.0",
     "eslint-plugin-jsx-a11y": "^6.2.3",
@@ -59,5 +76,9 @@ "eslint-plugin-prettier": "^3.1.1",
     "gh-pages": "^2.1.1",
+    "hoist-non-react-statics": "^3.3.0",
     "husky": "^3.0.8",
+    "jest": "^24.9.0",
     "lint-staged": "^9.4.1",
+    "lockfile-lint": "^2.1.4",
     "prettier": "^1.18.2",
+    "prop-types": "^15.7.2",
     "react": "^16.3.0",
@@ -73,5 +94,11 @@ "react-dom": "^16.3.0",
     "rollup-plugin-url": "^2.2.2",
-    "typescript": "^3.6.3",
-    "utility-types": "^3.8.0"
+    "standard-version": "^7.0.0",
+    "ts-jest": "^24.1.0",
+    "typescript": "^3.6.3"
+  },
+  "config": {
+    "commitizen": {
+      "path": "cz-conventional-changelog"
+    }
   }
 }

README.md

 <div align="center">
   <h1>react-simple-step-wizard 🧙</h1>
 
-  <p>A simple and composable step wizard in React!</p>
+  <p>A simple and composable step wizard in React! Made with ❤ in El Salvador 🇸🇻</p>
 </div>
@@ -10,5 +10,7 @@
 [![Version][version-badge]][package]
+[![Build][build-badge]][build]
 [![Install Size][size-badge]][package-size]
 [![Downloads][downloads-badge]][npmcharts]
 [![PRs Welcome][prs-badge]][prs]
+[![Commitizen friendly][cz-badge]][cz]
 [![MIT License][license-badge]][license]
@@ -26,3 +28,3 @@
 
-### How to install it in your app?
+### Installation
 
@@ -33,7 +35,7 @@ ```
 
-### How to use it in your app?
+### Usage
 
 ```javascript
+import Wizard from 'react-simple-step-wizard';
 import React, { Component } from 'react';
-import Wizard from 'react-simple-step-wizard';
 
@@ -45,3 +47,4 @@ const Step1 = () => <div>This is Step 1</div>;
 const Step5 = () => <div>This is Step 5</div>;
-const MyStepStracker = ({ currentStep = 0, steps = [] }) => (
+const Step6 = () => <div>This is Step 6</div>;
+const MyStepTracker = ({ currentStep = 0, steps = [] }) => (
   <div>
@@ -52,18 +55,20 @@ <p>Current step is: {steps[currentStep]}</p>
 const MyNavigator = ({
-  isNextAvailable,
-  isPrevAvailable,
-  nextStep,
-  prevStep,
+  getFirstStepProps,
+  getLastStepProps,
+  getNextStepProps,
+  getPrevStepProps,
 }) => (
   <div>
-    {isPrevAvailable && (
-      <button type="button" onClick={prevStep}>
-        &lt; Back
-      </button>
-    )}
-    {isNextAvailable && (
-      <button type="button" onClick={nextStep}>
-        Next &gt;
-      </button>
-    )}
+    <button type="button" {...getFirstStepProps()}>
+      &lt;&lt; First
+    </button>
+    <button type="button" {...getPrevStepProps()}>
+      &lt; Back
+    </button>
+    <button type="button" {...getNextStepProps()}>
+      Next &gt;
+    </button>
+    <button type="button" {...getLastStepProps()}>
+      Last &gt;&gt;
+    </button>
   </div>
@@ -73,2 +78,4 @@ );
 class App extends Component {
+  state = { isCustomizeVisible: true };
+
   handleStepChange = currentStep => {
@@ -78,6 +85,19 @@ console.log(currentStep);
 
+  onClick = () => {
+    this.setState(prevState => ({
+      isCustomizeVisible: !prevState.isCustomizeVisible,
+    }));
+  };
+
   render() {
+    const { isCustomizeVisible } = this.state;
     return (
       <div>
         <h1>react-simple-step-wizard demo</h1>
+        <div>
+          <p>Step 3 visible: {isCustomizeVisible.toString()}</p>
+          <button type="button" onClick={this.onClick}>
+            Toggle Step 3
+          </button>
+        </div>
         <Wizard onStepChange={this.handleStepChange}>
@@ -88,9 +108,12 @@ <Wizard.StepTracker />
             <Step2 stepLabel="Select" />
-            <Step3 stepLabel="Customize" />
+            <Step3 stepLabel="Customize" stepCondition={isCustomizeVisible} />
             <Step4 stepLabel="Review" />
-            <Step5 stepLabel="Submit" />
+            <Wizard.StepGroup stepLabel="Submit">
+              <Step5 />
+              <Step6 />
+            </Wizard.StepGroup>
           </Wizard.Steps>
           {/* You can implement your custom components via render-props */}
           <Wizard.StepTracker>
-            {stepTrackerProps => <MyStepStracker {...stepTrackerProps} />}
+            {stepTrackerProps => <MyStepTracker {...stepTrackerProps} />}
           </Wizard.StepTracker>
@@ -131,2 +154,6 @@ <Wizard.Navigator>
 [prs]: http://makeapullrequest.com
+[build-badge]: https://img.shields.io/circleci/build/gh/jonathanpalma/react-simple-step-wizard?style=flat-square
+[build]: https://circleci.com/gh/jonathanpalma/react-simple-step-wizard
+[cz-badge]: https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square
+[cz]: http://commitizen.github.io/cz-cli/
 [size-badge]: https://flat.badgen.net/packagephobia/install/react-simple-step-wizard
@@ -133,0 +160,0 @@ [version-badge]: https://img.shields.io/npm/v/react-simple-step-wizard.svg?style=flat-square

src/common/types.ts

@@ -1,41 +0,91 @@
-export declare interface WizardProps {
-  children: JSX.Element[] | JSX.Element;
-  onStepChange?: (currentStep: number) => void;
+interface WizardBooleans {
+  isNextAvailable: boolean;
+  isPrevAvailable: boolean;
 }
 
-export declare interface WizardState {
+interface WizardStepsBase {
+  currentStep: number;
   steps: string[];
-  currentStep: number;
+}
+
+export declare interface WizardSteps extends WizardStepsBase {
   totalSteps: number;
-  isNextAvailable: boolean;
-  isPrevAvailable: boolean;
-  prevStep(): void;
-  nextStep(): void;
 }
 
+interface WizardStateWithoutHelpers extends WizardBooleans, WizardSteps {}
+
+export declare interface WizardProps {
+  children: JSX.Element[] | JSX.Element;
+  onStepChange?: (currentStep: number) => void;
+}
+
 export declare interface WizardHandlers {
+  firstStep(): void;
+  goToStep(number: number): void;
+  lastStep(): void;
+  nextStep(): void;
   prevStep(): void;
-  nextStep(): void;
 }
 
-export declare interface NavigatorProps {
-  isNextAvailable: boolean;
-  isPrevAvailable: boolean;
-  prevStep(): void;
-  nextStep(): void;
+export declare interface WizardPropGetters {
+  getFirstStepProps(
+    props?: unknown
+  ): React.DetailedHTMLProps<
+    React.ButtonHTMLAttributes<HTMLButtonElement>,
+    HTMLButtonElement
+  >;
+  getLastStepProps(
+    props?: unknown
+  ): React.DetailedHTMLProps<
+    React.ButtonHTMLAttributes<HTMLButtonElement>,
+    HTMLButtonElement
+  >;
+  getNextStepProps(
+    props?: unknown
+  ): React.DetailedHTMLProps<
+    React.ButtonHTMLAttributes<HTMLButtonElement>,
+    HTMLButtonElement
+  >;
+  getPrevStepProps(
+    props?: unknown
+  ): React.DetailedHTMLProps<
+    React.ButtonHTMLAttributes<HTMLButtonElement>,
+    HTMLButtonElement
+  >;
 }
 
-export declare interface CustomNavigatorProps {
+export declare interface WizardState
+  extends WizardStateWithoutHelpers,
+    WizardHandlers,
+    WizardPropGetters {}
+
+// Navigator
+
+export declare interface NavigatorProps
+  extends WizardBooleans,
+    WizardHandlers,
+    WizardPropGetters {}
+
+export declare interface CompoundNavigatorProps {
   children?: (props: NavigatorProps) => JSX.Element;
 }
 
-export declare interface StepTrackerProps {
-  currentStep: number;
-  steps: string[];
+export declare interface CustomNavigatorProps {
+  children: (props: NavigatorProps) => JSX.Element;
 }
 
-export declare interface CustomStepTrackerProps {
+// StepTracker
+
+export declare interface StepTrackerProps extends WizardStepsBase {}
+
+export declare interface CompoundStepTrackerProps {
   children?: (props: StepTrackerProps) => JSX.Element;
 }
 
+export declare interface CustomStepTrackerProps {
+  children: (props: StepTrackerProps) => JSX.Element;
+}
+
+// Steps
+
 export declare interface StepsProps {
@@ -45,4 +95,10 @@ children: JSX.Element[] | JSX.Element;
 
+// Context
+
 export declare interface WizardConsumerProps {
   children(props: WizardState): JSX.Element;
 }
+
+export declare interface InjectedWizardProps {
+  wizard: WizardState;
+}

tsconfig.json

@@ -5,2 +5,3 @@ {
     "declaration": true,
+    "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
@@ -7,0 +8,0 @@ "jsx": "react",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No tests

Quality

Package does not have any tests. This is a strong signal of a poorly maintained or low quality package.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

237989

increased by148.1%

Number of package files

59

increased by90.32%

Lines of code

2233

increased by126.7%

Number of low quality alerts

0

decreased by-100%

Number of lines in readme file

158

increased by20.61%

Worsened metrics

Dependency count

3

increased by50%

Dev dependency count

44

increased by51.72%

Number of low supply chain risk alerts

4

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes