linear-react-components-ui 1.1.20-beta.8 → 1.1.20-rc.0

package/lib/dialog/Alert.js

@@ -11,10 +11,14 @@ var _icons = _interopRequireDefault(require("../icons"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const Alert = props => {
+  const {
+    onConfirmClick,
+    confirmLabel = 'Confirmar'
+  } = props;
   const buttons = [/*#__PURE__*/_react.default.createElement(_buttons.PrimaryButton, {
     key: "confirm-buttom",
-    onClick: props.onConfirmClick,
-    label: "Confirmar"
+    onClick: onConfirmClick,
+    label: confirmLabel
   })];
   return /*#__PURE__*/_react.default.createElement(_Custom.default, _extends({}, props, {
     buttons: buttons,

package/lib/dialog/Custom.js

@@ -30,9 +30,11 @@ const Custom = props => {
   const {
     width = '35%',
     height = 'auto',
-    iconName = null
+    iconName = null,
+    open
   } = props;
   return /*#__PURE__*/_react.default.createElement(_base.default, _extends({
+    open: open,
     width: width,
     height: height
   }, props, {
@@ -48,7 +50,7 @@ const Custom = props => {
   }, props.text)), props.buttons && props.buttons.length > 0 && /*#__PURE__*/_react.default.createElement(_Footer.default, props, /*#__PURE__*/_react.default.createElement(_buttons.ButtonContainer, {
     position: "right"
   }, props.buttons.map(button => /*#__PURE__*/_react.default.cloneElement(button, {
-    key: "button-".concat(uuid.v1())
+    key: `button-${uuid.v1()}`
   })))));
 };
 var _default = exports.default = Custom;

package/lib/dialog/Error.js

@@ -11,10 +11,14 @@ var _icons = _interopRequireDefault(require("../../lib/icons"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const Error = props => {
+  const {
+    onConfirmClick,
+    confirmLabel = 'Confirmar'
+  } = props;
   const buttons = [/*#__PURE__*/_react.default.createElement(_buttons.PrimaryButton, {
     key: "confirm-buttom",
-    onClick: props.onConfirmClick,
-    label: "Confirmar"
+    onClick: onConfirmClick,
+    label: confirmLabel
   })];
   return /*#__PURE__*/_react.default.createElement(_Custom.default, _extends({}, props, {
     buttons: buttons,

package/lib/dialog/Information.js

@@ -11,10 +11,14 @@ var _icons = _interopRequireDefault(require("../../lib/icons"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const Information = props => {
+  const {
+    onConfirmClick,
+    confirmLabel = 'Confirmar'
+  } = props;
   const buttons = [/*#__PURE__*/_react.default.createElement(_buttons.PrimaryButton, {
     key: "confirm-buttom",
-    onClick: props.onConfirmClick,
-    label: "Confirmar"
+    onClick: onConfirmClick,
+    label: confirmLabel
   })];
   return /*#__PURE__*/_react.default.createElement(_Custom.default, _extends({}, props, {
     buttons: buttons,

package/lib/dialog/Question.js

@@ -4,36 +4,54 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _buttons = _interopRequireWildcard(require("../buttons"));
 var _Custom = _interopRequireDefault(require("./Custom"));
 var _icons = _interopRequireDefault(require("../icons"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const Question = props => {
   const {
     visible = true,
+    closeOnEsc = false,
     isWaiting,
     onConfirmClick,
-    onUnconfirmClick
+    onUnconfirmClick,
+    confirmLabel = 'Sim',
+    declineLabel = 'Não'
   } = props;
+  const idUnconfirm = 'botao-unconfirm-click';
   const buttons = [/*#__PURE__*/_react.default.createElement(_buttons.DangerButton, {
     key: "yes-buttom",
     disabled: isWaiting,
     onClick: onConfirmClick,
     isLoading: isWaiting,
-    label: "Sim"
+    label: confirmLabel
   }), /*#__PURE__*/_react.default.createElement(_buttons.default, {
+    id: idUnconfirm,
     key: "no-buttom",
     disabled: isWaiting,
     onClick: onUnconfirmClick,
-    label: "N\xE3o"
+    label: declineLabel
   })];
+  (0, _react.useLayoutEffect)(() => {
+    const lastElementActive = document.activeElement;
+    return () => {
+      lastElementActive?.focus?.();
+    };
+  }, [visible]);
+  (0, _react.useEffect)(() => {
+    const buttonUnconfirm = document.getElementById(idUnconfirm);
+    buttonUnconfirm?.focus?.();
+  }, [visible, document.activeElement]);
   if (!visible) return null;
   return /*#__PURE__*/_react.default.createElement(_Custom.default, _extends({}, props, {
+    open: visible,
     buttons: buttons,
+    closeOnEsc: closeOnEsc,
+    handlerClose: onUnconfirmClick,
     icon: /*#__PURE__*/_react.default.createElement(_icons.default, {
       name: "question",
       color: "#3498db",

package/lib/dialog/Warning.js

@@ -11,9 +11,13 @@ var _icons = _interopRequireDefault(require("../../lib/icons"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const Warning = props => {
+  const {
+    onConfirmClick,
+    confirmLabel = 'Confirmar'
+  } = props;
   const buttons = [/*#__PURE__*/_react.default.createElement(_buttons.PrimaryButton, {
-    onClick: props.onConfirmClick,
-    label: "Confirmar",
+    onClick: onConfirmClick,
+    label: confirmLabel,
     key: 1
   })];
   return /*#__PURE__*/_react.default.createElement(_Custom.default, _extends({}, props, {

package/lib/dialog/base/Content.d.ts

@@ -4,6 +4,6 @@ import '../../@types/Align.js';
 import '../../@types/Icon.js';
 import '../../icons/helper.js';
 
-declare const Content: ({ children, styleForContent }: IContentProps) => JSX.Element;
+declare const Content: ({ children, styleForContent, className }: IContentProps) => JSX.Element;
 
 export { Content as default };

package/lib/dialog/base/Content.js

@@ -10,11 +10,12 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 const Content = _ref => {
   let {
     children,
-    styleForContent
+    styleForContent,
+    className = ''
   } = _ref;
   return /*#__PURE__*/_react.default.createElement("div", {
     id: "modal-dialog-content",
-    className: "dialog-content",
+    className: `dialog-content ${className}`,
     style: styleForContent
   }, children);
 };

package/lib/dialog/base/Header.js

@@ -46,10 +46,10 @@ const Header = _ref => {
     tabIndex: -1,
     onFocus: () => {},
     onBlur: () => {},
-    ref: formDialogContext === null || formDialogContext === void 0 ? void 0 : formDialogContext.headerRef,
+    ref: formDialogContext?.headerRef,
     className: "dialog-header"
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(icon !== null || titleIcon !== null ? 'left' : '')
+    className: `${icon !== null || titleIcon !== null ? 'left' : ''}`
   }, getIcon(titleIcon, icon)), /*#__PURE__*/_react.default.createElement("div", {
     className: "right"
   }, /*#__PURE__*/_react.default.createElement("h5", {

package/lib/dialog/base/index.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.DialogContext = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactDom = _interopRequireDefault(require("react-dom"));
+var uuid = _interopRequireWildcard(require("uuid"));
 var _style = _interopRequireDefault(require("./style"));
 require("../../assets/styles/dialog.scss");
 var _form = require("../form");
@@ -17,11 +18,14 @@ const {
   body
 } = document;
 const BaseDialog = props => {
+  const baseDialogId = uuid.v4();
   const {
+    id = baseDialogId,
     overlay = true,
     closeOnEsc,
     closeOnOutsideClick,
-    wrapperClassName,
+    wrapperClassName = '',
+    className = '',
     children,
     open: openProp,
     onOpenChange,
@@ -42,9 +46,7 @@ const BaseDialog = props => {
       onOpenChange(false);
     } else {
       if (handlerClose) handlerClose();
-      if (onOpenChange) {
-        onOpenChange(false);
-      }
+      if (onOpenChange) onOpenChange(false);
     }
   };
   const handleClickOutside = event => {
@@ -56,7 +58,8 @@ const BaseDialog = props => {
     }
   };
   const handleCloseOnEsc = event => {
-    if (event.key === 'Escape') {
+    if (event?.key === 'Escape') {
+      event.stopPropagation();
       handleClose();
     }
   };
@@ -74,7 +77,7 @@ const BaseDialog = props => {
       let y = positionY <= 0 ? 0 : positionY;
       if (x + width >= window.innerWidth) x = window.innerWidth - width;
       if (y + height >= window.innerHeight) y = window.innerHeight - height;
-      wrapperEl.current.style.transform = "translate(".concat(x, "px, ").concat(y, "px)");
+      wrapperEl.current.style.transform = `translate(${x}px, ${y}px)`;
       wrapperEl.current.style.transition = 'none';
       wrapperEl.current.style.left = '0';
       wrapperEl.current.style.top = '0';
@@ -94,15 +97,15 @@ const BaseDialog = props => {
     }
   };
   const onMouseDown = event => {
-    var _headerRef$current;
     const element = event.target;
-    const isHeader = headerRef === null || headerRef === void 0 ? void 0 : (_headerRef$current = headerRef.current) === null || _headerRef$current === void 0 ? void 0 : _headerRef$current.contains(element);
+    const isHeader = headerRef?.current?.contains(element);
     if (wrapperEl.current && isHeader) setIsDragging(true);
   };
   const onMouseUp = () => {
     if (wrapperEl.current) setIsDragging(false);
   };
   const createdModal = /*#__PURE__*/_react.default.createElement("div", {
+    id: id,
     className: "modalcontainer",
     onMouseDown: handleClickOutside,
     style: {
@@ -112,7 +115,7 @@ const BaseDialog = props => {
     className: "modal-overlay",
     "data-testid": "modal-overlay"
   }), /*#__PURE__*/_react.default.createElement("div", {
-    className: "dialog",
+    className: `dialog ${className}`,
     "data-testid": "dialog-component"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: wrapperClassName,

package/lib/dialog/form/index.js

@@ -29,7 +29,10 @@ const ModalForm = props => {
     width = '50%',
     height = '50%',
     content,
-    children
+    children,
+    className = '',
+    wrapperClassName = '',
+    contentClassName = ''
   } = props;
   const headerRef = (0, _react.useRef)(null);
   const context = (0, _react.useContext)(_withFormSecurity.FormSecurityContext);
@@ -56,7 +59,8 @@ const ModalForm = props => {
     width: width,
     height: height
   }, props, {
-    wrapperClassName: "dialog-form-wrapper"
+    className: className,
+    wrapperClassName: `dialog-form-wrapper ${wrapperClassName}`
   }), props.title && /*#__PURE__*/_react.default.createElement("div", {
     className: "header-form"
   }, /*#__PURE__*/_react.default.createElement(_Header.default, {
@@ -64,7 +68,8 @@ const ModalForm = props => {
     handlerClose: props.handlerClose,
     icon: props.icon
   })), /*#__PURE__*/_react.default.createElement(_Content.default, {
-    styleForContent: _objectSpread(_objectSpread({}, props.styleForContent), overlayStyle)
+    styleForContent: _objectSpread(_objectSpread({}, props.styleForContent), overlayStyle),
+    className: contentClassName
   }, content || children), getSpinner(), showFooter && props.buttons && /*#__PURE__*/_react.default.createElement(_Footer.default, null, /*#__PURE__*/_react.default.createElement(_index.ButtonContainer, _extends({}, props, {
     style: _objectSpread({}, overlayStyle)
   }), _react.default.Children.toArray(props.buttons.map(button => {

package/lib/dialog/types.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode, CSSProperties, ReactElement } from 'react';
+import { ReactNode, CSSProperties, ReactElement, Dispatch } from 'react';
 import { TextAlign } from '../@types/Align.js';
 import { IconNames } from '../@types/Icon.js';
 import '../icons/helper.js';
@@ -6,6 +6,7 @@ import '../icons/helper.js';
 interface IContentProps {
     children: ReactNode | ReactNode[];
     styleForContent?: CSSProperties;
+    className?: string;
 }
 interface IFooterProps {
     children: ReactElement | ReactElement[];
@@ -18,10 +19,11 @@ interface IHeaderProps {
     titleIcon?: IconNames;
 }
 interface IBaseProps {
-    wrapperClassName: string;
+    wrapperClassName?: string;
     width?: string;
     height?: string;
     children: ReactNode | ReactNode[];
+    className?: string;
     closeOnEsc?: boolean;
     closeOnOutsideClick?: boolean;
     overlay?: boolean;
@@ -30,8 +32,9 @@ interface IBaseProps {
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
     handlerClose?: () => void;
+    id?: string;
 }
-interface IFormProps extends Omit<IBaseProps, 'textAlign' | 'zIndex' | 'wrapperClassName'> {
+interface IFormProps extends Omit<IBaseProps, 'textAlign' | 'zIndex'> {
     buttons?: JSX.Element[];
     styleForContent?: CSSProperties;
     title?: string;
@@ -39,11 +42,13 @@ interface IFormProps extends Omit<IBaseProps, 'textAlign' | 'zIndex' | 'wrapperC
     isWaiting?: boolean;
     icon?: JSX.Element;
     content?: ReactNode;
+    contentClassName?: string;
 }
 interface ICommonDialogProps {
     onConfirmClick?: () => void;
     text?: string;
     title?: string;
+    confirmLabel?: string;
 }
 interface IQuestionProps {
     onUnconfirmClick: () => void;
@@ -53,6 +58,9 @@ interface IQuestionProps {
     text?: string;
     title?: string;
     zIndex?: number | string;
+    closeOnEsc?: boolean;
+    confirmLabel?: string;
+    declineLabel?: string;
 }
 interface ICustomProps {
     icon: ReactElement;
@@ -62,9 +70,41 @@ interface ICustomProps {
     height?: string;
     width?: string;
     iconName?: IconNames | null;
+    open?: boolean;
+    closeOnEsc?: boolean;
+    handlerClose?: () => void;
 }
 interface IFormDialogContext {
     headerRef?: React.RefObject<HTMLDivElement>;
 }
+interface WizardComponentProps extends Omit<IFormProps, 'content'> {
+    children: React.ReactNode;
+    buttons?: JSX.Element[];
+    showProgressbar?: boolean;
+    title?: string;
+    handlerClose?: () => void;
+    controls: WizardControls;
+    customStyleForProgressBar?: CSSProperties;
+    customStyleForBody?: CSSProperties;
+}
+interface WizardStepComponentProps {
+    children: React.ReactNode;
+    title: string;
+    customClass?: string;
+    customStyle?: CSSProperties;
+}
+interface WizardControls extends Omit<UseWizardReturn, 'controls'> {
+    setTotalSteps: Dispatch<React.SetStateAction<number>>;
+}
+interface UseWizardReturn {
+    changeStep: (nextStep: number) => void;
+    nextStep: () => void;
+    hasNextStep: boolean;
+    previousStep: () => void;
+    hasPreviousStep: boolean;
+    currentStep: number;
+    totalSteps: number;
+    controls: WizardControls;
+}
 
-export { IBaseProps, ICommonDialogProps, IContentProps, ICustomProps, IFooterProps, IFormDialogContext, IFormProps, IHeaderProps, IQuestionProps };
+export { IBaseProps, ICommonDialogProps, IContentProps, ICustomProps, IFooterProps, IFormDialogContext, IFormProps, IHeaderProps, IQuestionProps, UseWizardReturn, WizardComponentProps, WizardControls, WizardStepComponentProps };

package/lib/dialog/wizard/index.d.ts

@@ -0,0 +1,13 @@
+import React__default from 'react';
+import { WizardControls, WizardComponentProps } from '../types.js';
+export { WizardStep as Step } from './step.js';
+export { useWizard } from './useWizard.js';
+import '../../@types/Align.js';
+import '../../@types/Icon.js';
+import '../../icons/helper.js';
+
+declare const WizardContext: React__default.Context<WizardControls | null>;
+declare const useWizardContext: () => WizardControls | null;
+declare function Wizard({ children, controls, showProgressbar, customStyleForProgressBar, customStyleForBody, ...dialogProps }: Readonly<WizardComponentProps>): JSX.Element;
+
+export { Wizard as Container, WizardContext, Wizard as default, useWizardContext };

package/lib/dialog/wizard/index.js

@@ -0,0 +1,78 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Container = Wizard;
+Object.defineProperty(exports, "Step", {
+  enumerable: true,
+  get: function () {
+    return _step.WizardStep;
+  }
+});
+exports.default = exports.WizardContext = void 0;
+Object.defineProperty(exports, "useWizard", {
+  enumerable: true,
+  get: function () {
+    return _useWizard.useWizard;
+  }
+});
+exports.useWizardContext = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _lodash = _interopRequireDefault(require("lodash"));
+var _form = _interopRequireDefault(require("../form/"));
+var _progressbar = require("./progressbar");
+require("../../assets/styles/wizard.scss");
+var _step = require("./step");
+var _useWizard = require("./useWizard");
+const _excluded = ["children", "controls", "showProgressbar", "customStyleForProgressBar", "customStyleForBody"];
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
+const WizardContext = exports.WizardContext = /*#__PURE__*/_react.default.createContext(null);
+const useWizardContext = () => _react.default.useContext(WizardContext);
+exports.useWizardContext = useWizardContext;
+function Wizard(_ref) {
+  let {
+      children,
+      controls,
+      showProgressbar = true,
+      customStyleForProgressBar,
+      customStyleForBody
+    } = _ref,
+    dialogProps = _objectWithoutProperties(_ref, _excluded);
+  const {
+    currentStep,
+    setTotalSteps
+  } = controls;
+  const steps = _react.default.Children.toArray(children);
+  const stepsTitle = steps.map((step, index) => {
+    return {
+      title: String(step.props.title),
+      number: index + 1,
+      completed: index < currentStep - 1 && index !== currentStep
+    };
+  });
+  const currentStepElement = steps[currentStep - 1];
+  if (!controls || _lodash.default.isEmpty(controls)) throw new Error('Wizard must be have controls by using useWizard hook or creating manually.');
+  (0, _react.useEffect)(() => {
+    setTotalSteps(steps.length);
+  }, [steps.length]);
+  return /*#__PURE__*/_react.default.createElement(WizardContext.Provider, {
+    value: controls
+  }, /*#__PURE__*/_react.default.createElement(_form.default, _extends({
+    className: "wizard-dialog",
+    wrapperClassName: "wizard-wrapper",
+    contentClassName: "wizard-content"
+  }, dialogProps), showProgressbar && /*#__PURE__*/_react.default.createElement(_progressbar.Progressbar, {
+    stepsTitle: stepsTitle,
+    customStyle: customStyleForProgressBar
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "wizard-body",
+    style: customStyleForBody
+  }, currentStepElement)));
+}
+var _default = exports.default = Wizard;

package/lib/dialog/wizard/progressbar.d.ts

@@ -0,0 +1,13 @@
+import { CSSProperties } from 'react';
+
+declare function Progressbar({ customClass, customStyle, stepsTitle }: Readonly<{
+    customClass?: string;
+    stepsTitle: {
+        title: string;
+        number: number;
+        completed: boolean;
+    }[];
+    customStyle?: CSSProperties;
+}>): JSX.Element;
+
+export { Progressbar };

package/lib/dialog/wizard/progressbar.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Progressbar = Progressbar;
+var _react = _interopRequireDefault(require("react"));
+var _ = require(".");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function Progressbar(_ref) {
+  let {
+    customClass,
+    customStyle,
+    stepsTitle
+  } = _ref;
+  const context = (0, _.useWizardContext)();
+  if (!context) throw new Error('WizardProgressbar must be used within a Wizard component');
+  const {
+    currentStep
+  } = context;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: `wizard-progresbar ${customClass}`,
+    style: customStyle
+  }, stepsTitle.map(step => /*#__PURE__*/_react.default.createElement("div", {
+    key: step.number,
+    className: "title",
+    "data-completed": step.completed,
+    "data-disabled": step.number > currentStep
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "step"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "number"
+  }, step.number)), /*#__PURE__*/_react.default.createElement("span", {
+    className: "step-title"
+  }, step.title))));
+}

package/lib/dialog/wizard/step.d.ts

@@ -0,0 +1,9 @@
+import { WizardStepComponentProps } from '../types.js';
+import 'react';
+import '../../@types/Align.js';
+import '../../@types/Icon.js';
+import '../../icons/helper.js';
+
+declare function WizardStep({ children, customClass, customStyle }: Readonly<WizardStepComponentProps>): JSX.Element;
+
+export { WizardStep };

package/lib/dialog/wizard/step.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WizardStep = WizardStep;
+var _react = _interopRequireDefault(require("react"));
+var _ = require(".");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function WizardStep(_ref) {
+  let {
+    children,
+    customClass = '',
+    customStyle
+  } = _ref;
+  const context = (0, _.useWizardContext)();
+  if (!context) throw new Error('WizardStep must be used within a Wizard component');
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: `wizard-step-component ${customClass}`,
+    style: customStyle
+  }, children);
+}

package/lib/dialog/wizard/useWizard.d.ts

@@ -0,0 +1,9 @@
+import { UseWizardReturn } from '../types.js';
+import 'react';
+import '../../@types/Align.js';
+import '../../@types/Icon.js';
+import '../../icons/helper.js';
+
+declare const useWizard: () => UseWizardReturn;
+
+export { useWizard };

package/lib/dialog/wizard/useWizard.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useWizard = void 0;
+var _react = _interopRequireWildcard(require("react"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const useWizard = () => {
+  const [totalSteps, setTotalSteps] = (0, _react.useState)(0);
+  const [currentStep, setCurrentStep] = _react.default.useState(1);
+  const hasNextStep = currentStep < totalSteps;
+  const hasPreviousStep = currentStep > 1;
+  const changeStep = nextStep => {
+    setCurrentStep(state => state + nextStep);
+  };
+  const nextStep = () => {
+    if (hasNextStep) {
+      changeStep(1);
+    }
+  };
+  const previousStep = () => {
+    if (hasPreviousStep) {
+      changeStep(-1);
+    }
+  };
+  return {
+    changeStep,
+    nextStep,
+    hasNextStep,
+    previousStep,
+    hasPreviousStep,
+    currentStep,
+    totalSteps,
+    controls: {
+      changeStep,
+      nextStep,
+      hasNextStep,
+      previousStep,
+      hasPreviousStep,
+      currentStep,
+      totalSteps,
+      setTotalSteps
+    }
+  };
+};
+exports.useWizard = useWizard;