linear-react-components-ui 1.1.26-beta.9 → 1.1.27-rc.0

package/lib/treeview/types.d.ts

@@ -1,25 +1,26 @@
-import { CSSProperties, ReactElement, ReactNode } from 'react';
-import { Size } from '../@types/Size';
-export type NodeItem<T = void> = T & {
+import { ReactNode, CSSProperties, ReactElement } from 'react';
+import { Size } from '../@types/Size.js';
+
+type NodeItem<T = void> = T & {
     id: number;
     itens?: NodeItem<T>[];
     statusEnum?: {
         id: number | string;
     };
 };
-export interface IValidator<T = void> {
+interface IValidator<T = void> {
     validator: (node: NodeItem<T>) => boolean;
     applyBehavior?: 'unvisible' | 'disabled';
 }
-export interface INodeElementsValidations<T = void> {
+interface INodeElementsValidations<T = void> {
     [key: string]: IValidator<T>[];
 }
-export interface INodeValidationProps {
+interface INodeValidationProps {
     validationKey: string | null;
     onNodeElementClick: (node: any) => void;
     visible: boolean;
 }
-export interface ITreeviewProps {
+interface ITreeviewProps {
     data: object;
     valuePropName: string;
     labelPropName: string;
@@ -49,7 +50,7 @@ export interface ITreeviewProps {
     customClassForNodes?: string;
     customStyleForNodes?: CSSProperties;
 }
-export interface ITreeNodeProps {
+interface ITreeNodeProps {
     node: any;
     children: ReactNode;
     startNodesOpened: boolean;
@@ -69,12 +70,12 @@ export interface ITreeNodeProps {
     customClass?: string;
     customStyle?: CSSProperties;
 }
-export interface ITreeHeaderProps {
+interface ITreeHeaderProps {
     title?: string;
     customClass?: string;
     children?: ReactNode;
 }
-export interface ITreeViewContext extends ITreeviewProps {
+interface ITreeViewContext extends ITreeviewProps {
     requiredIds: number[] | string[];
     selectedIds?: number[];
     isHandlingSelectedIds: boolean;
@@ -94,7 +95,7 @@ type ItensMock = {
     }[];
     itens: ItensMock[];
 };
-export interface IDataMock {
+interface IDataMock {
     id: number;
     titulo: string;
     codigo: string;
@@ -103,4 +104,5 @@ export interface IDataMock {
     }[];
     itens: ItensMock[];
 }
-export {};
+
+export { IDataMock, INodeElementsValidations, INodeValidationProps, ITreeHeaderProps, ITreeNodeProps, ITreeViewContext, ITreeviewProps, IValidator, NodeItem };

package/lib/treeview/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/types.d-b477e076.d.ts

@@ -0,0 +1,47 @@
+import { CSSProperties, ReactElement } from 'react';
+import { ITableProps, ITableRowProps } from './table/types.js';
+
+type RowItem<T = void> = T & {
+  id: number | string;
+  statusEnum: {
+    id: number | string
+  }
+};
+
+interface IValidatorElements<T = void> {
+  validator: (row: RowItem<T>) => boolean;
+  onDenied: 'unvisible' | 'disabled';
+}
+
+interface IRowElementsValidations<T = void> {
+  [key: string]: IValidatorElements<T>[]
+}
+
+interface ITreeTableProps extends ITableProps {
+  data: Array<{ [key: string]: any }>;
+  dataColumns: Array<{
+    title: string;
+    name: string;
+    style?: CSSProperties
+  }>;
+  rootPropName: string;
+  parentPropName: string;
+  leftToolbarElements?: Array<ReactElement>;
+  rightToolbarElements?: Array<ReactElement>;
+  toolbarElementsValidations?: IRowElementsValidations<any>;
+  stylesForRow?: CSSProperties;
+  onClickGetChildrens?: (id?: string | number) => Promise<void>;
+  onClickFirstColumn?: (id?: string | number) => void;
+  styleForRightToolbar?: CSSProperties;
+  styleForLeftToolbar?: CSSProperties;
+  openNodeId?: number;
+}
+
+interface ITreeTableRow extends ITableRowProps {
+  dataRow: {
+    [key: string]: any
+  };
+  rowLevel: number;
+}
+
+export { ITreeTableRow as I, RowItem as R, ITreeTableProps as a, IRowElementsValidations as b };

package/lib/uitour/helpers.d.ts

@@ -4,4 +4,5 @@ declare const STEP_POSITIONS: {
     right: string;
     left: string;
 };
-export { ARROW_WIDTH, ARROW_HEIGHT, STEP_POSITIONS, };
+
+export { ARROW_HEIGHT, ARROW_WIDTH, STEP_POSITIONS };

package/lib/uitour/helpers.js

@@ -1,9 +1,12 @@
-const t = 26, o = 20, I = {
-  right: "right",
-  left: "left"
-};
-export {
-  o as ARROW_HEIGHT,
-  t as ARROW_WIDTH,
-  I as STEP_POSITIONS
-};
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.STEP_POSITIONS = exports.ARROW_WIDTH = exports.ARROW_HEIGHT = void 0;
+const ARROW_WIDTH = exports.ARROW_WIDTH = 26;
+const ARROW_HEIGHT = exports.ARROW_HEIGHT = 20;
+const STEP_POSITIONS = exports.STEP_POSITIONS = {
+  right: 'right',
+  left: 'left'
+};

package/lib/uitour/index.d.ts

@@ -1,4 +1,7 @@
-import { default as React } from 'react';
-import { IUITourProps } from './types';
-declare const UiTour: (props: IUITourProps) => React.ReactPortal | null;
-export default UiTour;
+import React__default from 'react';
+import { IUITourProps } from './types.js';
+import './helpers.js';
+
+declare const UiTour: (props: IUITourProps) => React__default.ReactPortal | null;
+
+export { UiTour as default };

package/lib/uitour/index.js

@@ -1,187 +1,256 @@
-import { j as l } from "../chunks/jsx-runtime.D1SHvdVE.js";
-import { c as xe } from "../chunks/compiler-runtime.Cu50tn6L.js";
-import { useState as a, useRef as se, useEffect as ne } from "react";
-import { createPortal as ge } from "react-dom";
-import Ie from "../buttons/Button.js";
-import oe from "../buttons/PrimaryButton.js";
-import "../icons/index.js";
-import '../assets/button.css';import '../assets/index19.css';/* empty css                        */
-import { STEP_POSITIONS as W, ARROW_WIDTH as me, ARROW_HEIGHT as pe } from "./helpers.js";
-const Ce = (he) => {
-  const e = xe.c(54), {
-    data: o,
-    nextButtonLabel: M,
-    backButtonLabel: $,
-    finishButtonLabel: z,
-    showCloseButton: ie,
-    showBackButton: le,
-    visible: ce,
-    onFinish: b,
-    onStepChange: x
-  } = he, D = ie === void 0 ? !0 : ie, F = le === void 0 ? !0 : le, c = ce === void 0 ? !0 : ce, [n, G] = a(void 0), [f, U] = a(!1), [u, q] = a(!1), [g, J] = a(!1), [K, re] = a(null), [m, de] = a(c), [Q, ae] = a(W.left), V = se(null), X = se(null);
-  let I;
-  e[0] === Symbol.for("react.memo_cache_sentinel") ? (I = [], e[0] = I) : I = e[0];
-  const d = se(I);
-  let S;
-  e[1] !== n?.id || e[2] !== o || e[3] !== f ? (S = () => {
-    if (f) {
-      const t = o.findIndex((r) => r.id === n?.id), s = o[t + 1], i = o.findIndex((r) => r.id === s.id);
-      document.getElementById(s.targetId) && G({
-        ...s,
-        number: i + 1
-      });
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactDom = require("react-dom");
+var _buttons = _interopRequireWildcard(require("../buttons"));
+require("../assets/styles/uitour.scss");
+var _helpers = require("./helpers");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+const UiTour = props => {
+  const {
+    data,
+    nextButtonLabel,
+    backButtonLabel,
+    finishButtonLabel,
+    showCloseButton = true,
+    showBackButton = true,
+    visible = true,
+    onFinish,
+    onStepChange
+  } = props;
+  const [currentStep, setCurrentStep] = (0, _react.useState)(undefined);
+  const [hasNextStep, setHasNextStep] = (0, _react.useState)(false);
+  const [hasBackStep, setHasBackStep] = (0, _react.useState)(false);
+  const [isLastStep, setIsLastStep] = (0, _react.useState)(false);
+  const [stepDimensions, setStepDimensions] = (0, _react.useState)(null);
+  const [showTour, setShowTour] = (0, _react.useState)(visible);
+  const [stepPosition, setStepPosition] = (0, _react.useState)(_helpers.STEP_POSITIONS.left);
+  const stepRef = (0, _react.useRef)(null);
+  const descriptionRef = (0, _react.useRef)(null);
+  const activatedEffects = (0, _react.useRef)([]);
+  const handleNextStep = () => {
+    if (hasNextStep) {
+      const currentStepIndex = data.findIndex(item => item.id === (currentStep === null || currentStep === void 0 ? void 0 : currentStep.id));
+      const nextStep = data[currentStepIndex + 1];
+      const nextStepIndex = data.findIndex(item => item.id === nextStep.id);
+      const target = document.getElementById(nextStep.targetId);
+      if (target) {
+        setCurrentStep(_objectSpread(_objectSpread({}, nextStep), {}, {
+          number: nextStepIndex + 1
+        }));
+      }
+    }
+  };
+  const handleBackStep = () => {
+    if (hasBackStep) {
+      const currentStepIndex = data.findIndex(item => item.id === (currentStep === null || currentStep === void 0 ? void 0 : currentStep.id));
+      const backStep = data[currentStepIndex - 1];
+      const backStepIndex = data.findIndex(item => item.id === backStep.id);
+      const target = document.getElementById(backStep.targetId);
+      if (target) {
+        setCurrentStep(_objectSpread(_objectSpread({}, backStep), {}, {
+          number: backStepIndex + 1
+        }));
+      }
     }
-  }, e[1] = n?.id, e[2] = o, e[3] = f, e[4] = S) : S = e[4];
-  const Y = S;
-  let v;
-  e[5] !== n?.id || e[6] !== o || e[7] !== u ? (v = () => {
-    if (u) {
-      const t = o.findIndex((r) => r.id === n?.id), s = o[t - 1], i = o.findIndex((r) => r.id === s.id);
-      document.getElementById(s.targetId) && G({
-        ...s,
-        number: i + 1
+  };
+  const onCloseTour = () => {
+    setShowTour(false);
+    if (onFinish) onFinish(true);
+  };
+  const getStepPosition = target => {
+    if (stepRef.current) {
+      const stepRect = stepRef.current.getBoundingClientRect();
+      const windowWidth = window.innerWidth;
+      if (stepRect.right >= windowWidth || (currentStep === null || currentStep === void 0 ? void 0 : currentStep.position) === _helpers.STEP_POSITIONS.right) {
+        setStepPosition(_helpers.STEP_POSITIONS.right);
+        setStepDimensions({
+          top: target.top - _helpers.ARROW_HEIGHT,
+          left: target.left - stepRect.width - _helpers.ARROW_WIDTH
+        });
+      } else {
+        setStepPosition(_helpers.STEP_POSITIONS.left);
+        setStepDimensions({
+          top: target.top - _helpers.ARROW_HEIGHT,
+          left: target.left + target.width + _helpers.ARROW_WIDTH
+        });
+      }
+    }
+  };
+  const showStepTour = step => {
+    setShowTour(visible);
+    setCurrentStep(step);
+  };
+  const removePreviousElementsEffects = () => {
+    if (activatedEffects.current.length > 0) {
+      const effects = activatedEffects.current;
+      effects.forEach(ef => {
+        const element = document.getElementById(ef.elementId);
+        if (element) {
+          delete element.dataset.uitour;
+          activatedEffects.current = activatedEffects.current.filter(r => r.elementId !== ef.elementId);
+        }
       });
     }
-  }, e[5] = n?.id, e[6] = o, e[7] = u, e[8] = v) : v = e[8];
-  const Z = v;
-  let B;
-  e[9] !== b ? (B = () => {
-    de(!1), b && b(!0);
-  }, e[9] = b, e[10] = B) : B = e[10];
-  const y = B;
-  let E;
-  e[11] !== n?.position ? (E = (t) => {
-    if (V.current) {
-      const s = V.current.getBoundingClientRect(), i = window.innerWidth;
-      s.right >= i || n?.position === W.right ? (ae(W.right), re({
-        top: t.top - pe,
-        left: t.left - s.width - me
-      })) : (ae(W.left), re({
-        top: t.top - pe,
-        left: t.left + t.width + me
-      }));
+  };
+  const addElementEffect = (0, _react.useCallback)(elementEffect => {
+    const element = document.getElementById(elementEffect.elementId);
+    if (element) {
+      element.dataset.uitour = elementEffect.effect;
+      if (activatedEffects.current) activatedEffects.current.push(elementEffect);
     }
-  }, e[11] = n?.position, e[12] = E) : E = e[12];
-  const ee = E;
-  let w;
-  e[13] !== c ? (w = (t) => {
-    de(c), G(t);
-  }, e[13] = c, e[14] = w) : w = e[14];
-  const j = w;
-  let k;
-  e[15] === Symbol.for("react.memo_cache_sentinel") ? (k = () => {
-    d.current.length > 0 && d.current.forEach((s) => {
-      const i = document.getElementById(s.elementId);
-      i && (delete i.dataset.uitour, d.current = d.current.filter((h) => h.elementId !== s.elementId));
-    });
-  }, e[15] = k) : k = e[15];
-  const fe = k;
-  let _;
-  e[16] === Symbol.for("react.memo_cache_sentinel") ? (_ = (t) => {
-    const s = document.getElementById(t.elementId);
-    s && (s.dataset.uitour = t.effect, d.current && d.current.push(t));
-  }, e[16] = _) : _ = e[16];
-  const ue = _;
-  let C;
-  e[17] === Symbol.for("react.memo_cache_sentinel") ? (C = (t) => {
-    if (t.effect) {
+  }, []);
+  const showElementsEffects = currentData => {
+    if (currentData.effect) {
       const {
-        effect: s,
-        targetId: i
-      } = t;
-      ue({
-        effect: s,
-        elementId: i
+        effect,
+        targetId
+      } = currentData;
+      addElementEffect({
+        effect,
+        elementId: targetId
       });
     }
-    if (t.elementsEffects) {
+    if (currentData.elementsEffects) {
       let {
-        elementsEffects: s
-      } = t;
-      Array.isArray(s) || (s = [s]), s.forEach((i) => {
-        ue(i);
+        elementsEffects
+      } = currentData;
+      if (!Array.isArray(elementsEffects)) elementsEffects = [elementsEffects];
+      elementsEffects.forEach(ef => {
+        addElementEffect(ef);
       });
     }
-  }, e[17] = C) : C = e[17];
-  const be = C;
-  let N;
-  e[18] !== n || e[19] !== o || e[20] !== ee || e[21] !== x ? (N = () => {
-    if (n) {
-      const t = document.getElementById(n.targetId);
-      if (t) {
-        const s = t.getBoundingClientRect(), i = o.findIndex((r) => r.id === n.id), h = o.length - 1;
-        e: switch (i) {
-          case h: {
-            U(!1), q(!0), J(!0);
-            break e;
-          }
-          case 0: {
-            U(!0), J(!1), q(!1);
-            break e;
-          }
+  };
+  (0, _react.useEffect)(() => {
+    if (currentStep) {
+      const target = document.getElementById(currentStep.targetId);
+      if (target) {
+        const targetRect = target.getBoundingClientRect();
+        const currentStepIndex = data.findIndex(item => item.id === currentStep.id);
+        const lastDataIndex = data.length - 1;
+        const initialDataIndex = 0;
+        switch (currentStepIndex) {
+          case lastDataIndex:
+            setHasNextStep(false);
+            setHasBackStep(true);
+            setIsLastStep(true);
+            break;
+          case initialDataIndex:
+            setHasNextStep(true);
+            setIsLastStep(false);
+            setHasBackStep(false);
+            break;
           default:
-            U(!0), q(!0), J(!1);
+            setHasNextStep(true);
+            setHasBackStep(true);
+            setIsLastStep(false);
         }
-        ee(s), fe(), be(o[i]), x && x(t);
+        getStepPosition(targetRect);
+        removePreviousElementsEffects();
+        showElementsEffects(data[currentStepIndex]);
+        if (onStepChange) onStepChange(target);
+      }
+      if (descriptionRef.current) {
+        descriptionRef.current.innerHTML = currentStep.description;
       }
-      X.current && (X.current.innerHTML = n.description);
     }
-  }, e[18] = n, e[19] = o, e[20] = ee, e[21] = x, e[22] = N) : N = e[22];
-  let R;
-  e[23] !== n ? (R = [n], e[23] = n, e[24] = R) : R = e[24], ne(N, R);
-  let T;
-  e[25] !== o || e[26] !== j || e[27] !== c ? (T = () => {
-    let t = null;
-    if (o && c) {
-      const s = {
-        ...o[0],
-        number: 1
-      };
-      document.getElementById(s.targetId) ? j(s) : (t = new MutationObserver(() => {
-        document.getElementById(s.targetId) && (j(s), t?.disconnect(), t = null);
-      }), t.observe(document, {
-        subtree: !0,
-        childList: !0
-      }));
+  }, [currentStep, stepRef.current]);
+  (0, _react.useEffect)(() => {
+    let mutationObserver = null;
+    if (data && visible) {
+      const initialNumber = 1;
+      const initialStep = _objectSpread(_objectSpread({}, data[0]), {}, {
+        number: initialNumber
+      });
+      const target = document.getElementById(initialStep.targetId);
+      if (target) {
+        showStepTour(initialStep);
+      } else {
+        mutationObserver = new MutationObserver(() => {
+          const targetObserved = document.getElementById(initialStep.targetId);
+          if (targetObserved) {
+            var _mutationObserver;
+            showStepTour(initialStep);
+            (_mutationObserver = mutationObserver) === null || _mutationObserver === void 0 ? void 0 : _mutationObserver.disconnect();
+            mutationObserver = null;
+          }
+        });
+        mutationObserver.observe(document, {
+          subtree: true,
+          childList: true
+        });
+      }
     }
     return () => {
-      t?.disconnect(), t = null;
+      var _mutationObserver2;
+      (_mutationObserver2 = mutationObserver) === null || _mutationObserver2 === void 0 ? void 0 : _mutationObserver2.disconnect();
+      mutationObserver = null;
     };
-  }, e[25] = o, e[26] = j, e[27] = c, e[28] = T) : T = e[28];
-  let O;
-  e[29] !== o || e[30] !== c ? (O = [c, o], e[29] = o, e[30] = c, e[31] = O) : O = e[31], ne(T, O);
-  let P, L;
-  e[32] !== m ? (P = () => {
-    !m && d.current.length > 0 && fe(), m ? document.body.style.overflow = "hidden" : document.body.style.overflow = "auto";
-  }, L = [m], e[32] = m, e[33] = P, e[34] = L) : (P = e[33], L = e[34]), ne(P, L);
-  let p;
-  e[35] !== $ || e[36] !== n || e[37] !== z || e[38] !== Z || e[39] !== Y || e[40] !== u || e[41] !== f || e[42] !== g || e[43] !== M || e[44] !== y || e[45] !== F || e[46] !== D || e[47] !== K || e[48] !== Q ? (p = n && /* @__PURE__ */ l.jsxs("div", { ref: V, className: `step -${Q}`, style: {
-    ...K
-  }, children: [
-    D && /* @__PURE__ */ l.jsx("div", { className: "closebutton", children: /* @__PURE__ */ l.jsx(Ie, { iconName: "cancel2", iconAlign: "center", size: "large", transparent: !0, boxShadow: !1, style: {
+  }, [visible, data]);
+  (0, _react.useEffect)(() => {
+    if (!showTour && activatedEffects.current.length > 0) {
+      removePreviousElementsEffects();
+    }
+    if (showTour) document.body.style.overflow = 'hidden';else document.body.style.overflow = 'auto';
+  }, [showTour, activatedEffects.current.length]);
+  const component = (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement("div", {
+    className: "uitour-component"
+  }, currentStep && /*#__PURE__*/_react.default.createElement("div", {
+    ref: stepRef,
+    className: "step -".concat(stepPosition),
+    key: currentStep.id,
+    style: _objectSpread({}, stepDimensions)
+  }, showCloseButton && /*#__PURE__*/_react.default.createElement("div", {
+    className: "closebutton"
+  }, /*#__PURE__*/_react.default.createElement(_buttons.default, {
+    iconName: "cancel2",
+    iconAlign: "center",
+    size: "large",
+    transparent: true,
+    boxShadow: false,
+    style: {
       padding: 0
-    }, onClick: y }) }),
-    /* @__PURE__ */ l.jsxs("div", { className: "content", children: [
-      /* @__PURE__ */ l.jsx("span", { className: "number", children: n.number }),
-      /* @__PURE__ */ l.jsxs("div", { className: "about", children: [
-        /* @__PURE__ */ l.jsx("h3", { children: n.title }),
-        /* @__PURE__ */ l.jsx("p", { className: "description", ref: X })
-      ] })
-    ] }),
-    /* @__PURE__ */ l.jsxs("div", { className: "footer", children: [
-      /* @__PURE__ */ l.jsx(oe, { label: $, onClick: Z, disabled: !u, visible: F, customClass: "back-button" }),
-      /* @__PURE__ */ l.jsx(oe, { label: M, onClick: Y, disabled: !f, visible: !g, customClass: "next-button" }),
-      /* @__PURE__ */ l.jsx(oe, { label: z, visible: g, onClick: y, customClass: "finish-button" })
-    ] })
-  ] }, n.id), e[35] = $, e[36] = n, e[37] = z, e[38] = Z, e[39] = Y, e[40] = u, e[41] = f, e[42] = g, e[43] = M, e[44] = y, e[45] = F, e[46] = D, e[47] = K, e[48] = Q, e[49] = p) : p = e[49];
-  let H;
-  e[50] !== p ? (H = /* @__PURE__ */ l.jsx("div", { className: "uitour-component", children: p }), e[50] = p, e[51] = H) : H = e[51];
-  const te = H;
-  if (!m)
-    return null;
-  let A;
-  return e[52] !== te ? (A = ge(te, document.body), e[52] = te, e[53] = A) : A = e[53], A;
-};
-export {
-  Ce as default
+    },
+    onClick: onCloseTour
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "content"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "number"
+  }, currentStep.number), /*#__PURE__*/_react.default.createElement("div", {
+    className: "about"
+  }, /*#__PURE__*/_react.default.createElement("h3", null, currentStep.title), /*#__PURE__*/_react.default.createElement("p", {
+    className: "description",
+    ref: descriptionRef
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "footer"
+  }, /*#__PURE__*/_react.default.createElement(_buttons.PrimaryButton, {
+    label: backButtonLabel,
+    onClick: handleBackStep,
+    disabled: !hasBackStep,
+    visible: showBackButton,
+    customClass: "back-button"
+  }), /*#__PURE__*/_react.default.createElement(_buttons.PrimaryButton, {
+    label: nextButtonLabel,
+    onClick: handleNextStep,
+    disabled: !hasNextStep,
+    visible: !isLastStep,
+    customClass: "next-button"
+  }), /*#__PURE__*/_react.default.createElement(_buttons.PrimaryButton, {
+    label: finishButtonLabel,
+    visible: isLastStep,
+    onClick: onCloseTour,
+    customClass: "finish-button"
+  })))), [currentStep, stepPosition, stepDimensions, showCloseButton, onCloseTour, backButtonLabel, handleBackStep, hasBackStep, showBackButton, nextButtonLabel, handleNextStep, hasNextStep, isLastStep, finishButtonLabel, isLastStep, onCloseTour]);
+  if (!showTour) return null;
+  return /*#__PURE__*/(0, _reactDom.createPortal)(component, document.body);
 };
+var _default = exports.default = UiTour;

package/lib/uitour/types.d.ts

@@ -1,10 +1,11 @@
-import { STEP_POSITIONS } from './helpers';
-export type Effect = 'hover' | 'focus' | 'blur' | 'active' | 'selected';
-export type ElementEffect = {
+import { STEP_POSITIONS } from './helpers.js';
+
+type Effect = 'hover' | 'focus' | 'blur' | 'active' | 'selected';
+type ElementEffect = {
     elementId: string;
     effect: Effect;
 };
-export type UITourData = {
+type UITourData = {
     id: string | number;
     targetId: string;
     effect?: Effect;
@@ -13,16 +14,16 @@ export type UITourData = {
     position?: keyof typeof STEP_POSITIONS;
     elementsEffects?: ElementEffect | ElementEffect[];
 };
-export interface CurrentStep extends UITourData {
+interface CurrentStep extends UITourData {
     number: number;
 }
-export interface StepDimensions {
+interface StepDimensions {
     top?: number;
     left?: number;
     right?: number;
     bottom?: number;
 }
-export interface IUITourProps {
+interface IUITourProps {
     data: UITourData[];
     nextButtonLabel: string;
     backButtonLabel: string;
@@ -33,3 +34,5 @@ export interface IUITourProps {
     onFinish: (value: boolean) => void;
     onStepChange?: (target: HTMLElement) => void;
 }
+
+export { CurrentStep, Effect, ElementEffect, IUITourProps, StepDimensions, UITourData };

package/lib/uitour/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});