linear-react-components-ui 1.1.26-beta.17 → 1.1.26-beta.18

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,10 +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
-};
-//# sourceMappingURL=helpers.js.map
+"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,3 +1,7 @@
-import { IUITourProps } from './types';
-declare const UiTour: (props: IUITourProps) => import('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,188 +1,255 @@
-import { jsxs as j, jsx as r } from "react/jsx-runtime";
-import { c as Ie } from "../_virtual/compiler-runtime.js";
-import { useState as a, useRef as se, useEffect as oe } from "react";
-import { createPortal as Se } from "react-dom";
-import ve from "../buttons/Button.js";
-import ie from "../buttons/PrimaryButton.js";
-import '../assets/styles/uitour.css';import '../assets/styles/button.css';/* empty css                           */
-/* empty css                           */
-import { STEP_POSITIONS as M, ARROW_WIDTH as pe, ARROW_HEIGHT as he } from "./helpers.js";
-const Re = (be) => {
-  const e = Ie.c(54), {
-    data: o,
-    nextButtonLabel: $,
-    backButtonLabel: z,
-    finishButtonLabel: D,
-    showCloseButton: le,
-    showBackButton: ce,
-    visible: re,
-    onFinish: b,
-    onStepChange: g
-  } = be, F = le === void 0 ? !0 : le, G = ce === void 0 ? !0 : ce, l = re === void 0 ? !0 : re, [s, U] = a(void 0), [f, q] = a(!1), [u, J] = a(!1), [I, K] = a(!1), [Q, de] = a(null), [m, ae] = a(l), [V, fe] = a(M.left), X = se(null), Y = se(null);
-  let S;
-  e[0] === Symbol.for("react.memo_cache_sentinel") ? (S = [], e[0] = S) : S = e[0];
-  const d = se(S);
-  let v;
-  e[1] !== s?.id || e[2] !== o || e[3] !== f ? (v = () => {
-    if (f) {
-      const t = o.findIndex((c) => c.id === s?.id), n = o[t + 1], i = o.findIndex((c) => c.id === n.id);
-      document.getElementById(n.targetId) && U({
-        ...n,
-        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 _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 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?.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?.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] = s?.id, e[2] = o, e[3] = f, e[4] = v) : v = e[4];
-  const Z = v;
-  let x;
-  e[5] !== s?.id || e[6] !== o || e[7] !== u ? (x = () => {
-    if (u) {
-      const t = o.findIndex((c) => c.id === s?.id), n = o[t - 1], i = o.findIndex((c) => c.id === n.id);
-      document.getElementById(n.targetId) && U({
-        ...n,
-        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?.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] = s?.id, e[6] = o, e[7] = u, e[8] = x) : x = e[8];
-  const ee = x;
-  let B;
-  e[9] !== b ? (B = () => {
-    ae(!1), b && b(!0);
-  }, e[9] = b, e[10] = B) : B = e[10];
-  const y = B;
-  let E;
-  e[11] !== s?.position ? (E = (t) => {
-    if (X.current) {
-      const n = X.current.getBoundingClientRect(), i = window.innerWidth;
-      n.right >= i || s?.position === M.right ? (fe(M.right), de({
-        top: t.top - he,
-        left: t.left - n.width - pe
-      })) : (fe(M.left), de({
-        top: t.top - he,
-        left: t.left + t.width + pe
-      }));
+  };
+  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] = s?.position, e[12] = E) : E = e[12];
-  const te = E;
-  let w;
-  e[13] !== l ? (w = (t) => {
-    ae(l), U(t);
-  }, e[13] = l, e[14] = w) : w = e[14];
-  const k = w;
-  let _;
-  e[15] === Symbol.for("react.memo_cache_sentinel") ? (_ = () => {
-    d.current.length > 0 && d.current.forEach((n) => {
-      const i = document.getElementById(n.elementId);
-      i && (delete i.dataset.uitour, d.current = d.current.filter((h) => h.elementId !== n.elementId));
-    });
-  }, e[15] = _) : _ = e[15];
-  const ue = _;
-  let C;
-  e[16] === Symbol.for("react.memo_cache_sentinel") ? (C = (t) => {
-    const n = document.getElementById(t.elementId);
-    n && (n.dataset.uitour = t.effect, d.current && d.current.push(t));
-  }, e[16] = C) : C = e[16];
-  const me = C;
-  let N;
-  e[17] === Symbol.for("react.memo_cache_sentinel") ? (N = (t) => {
-    if (t.effect) {
+  }, []);
+  const showElementsEffects = currentData => {
+    if (currentData.effect) {
       const {
-        effect: n,
-        targetId: i
-      } = t;
-      me({
-        effect: n,
-        elementId: i
+        effect,
+        targetId
+      } = currentData;
+      addElementEffect({
+        effect,
+        elementId: targetId
       });
     }
-    if (t.elementsEffects) {
+    if (currentData.elementsEffects) {
       let {
-        elementsEffects: n
-      } = t;
-      Array.isArray(n) || (n = [n]), n.forEach((i) => {
-        me(i);
+        elementsEffects
+      } = currentData;
+      if (!Array.isArray(elementsEffects)) elementsEffects = [elementsEffects];
+      elementsEffects.forEach(ef => {
+        addElementEffect(ef);
       });
     }
-  }, e[17] = N) : N = e[17];
-  const ge = N;
-  let R;
-  e[18] !== s || e[19] !== o || e[20] !== te || e[21] !== g ? (R = () => {
-    if (s) {
-      const t = document.getElementById(s.targetId);
-      if (t) {
-        const n = t.getBoundingClientRect(), i = o.findIndex((c) => c.id === s.id), h = o.length - 1;
-        e: switch (i) {
-          case h: {
-            q(!1), J(!0), K(!0);
-            break e;
-          }
-          case 0: {
-            q(!0), K(!1), J(!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:
-            q(!0), J(!0), K(!1);
+            setHasNextStep(true);
+            setHasBackStep(true);
+            setIsLastStep(false);
         }
-        te(n), ue(), ge(o[i]), g && g(t);
+        getStepPosition(targetRect);
+        removePreviousElementsEffects();
+        showElementsEffects(data[currentStepIndex]);
+        if (onStepChange) onStepChange(target);
+      }
+      if (descriptionRef.current) {
+        descriptionRef.current.innerHTML = currentStep.description;
       }
-      Y.current && (Y.current.innerHTML = s.description);
     }
-  }, e[18] = s, e[19] = o, e[20] = te, e[21] = g, e[22] = R) : R = e[22];
-  let T;
-  e[23] !== s ? (T = [s], e[23] = s, e[24] = T) : T = e[24], oe(R, T);
-  let O;
-  e[25] !== o || e[26] !== k || e[27] !== l ? (O = () => {
-    let t = null;
-    if (o && l) {
-      const n = {
-        ...o[0],
-        number: 1
-      };
-      document.getElementById(n.targetId) ? k(n) : (t = new MutationObserver(() => {
-        document.getElementById(n.targetId) && (k(n), 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) {
+            showStepTour(initialStep);
+            mutationObserver?.disconnect();
+            mutationObserver = null;
+          }
+        });
+        mutationObserver.observe(document, {
+          subtree: true,
+          childList: true
+        });
+      }
     }
     return () => {
-      t?.disconnect(), t = null;
+      mutationObserver?.disconnect();
+      mutationObserver = null;
     };
-  }, e[25] = o, e[26] = k, e[27] = l, e[28] = O) : O = e[28];
-  let P;
-  e[29] !== o || e[30] !== l ? (P = [l, o], e[29] = o, e[30] = l, e[31] = P) : P = e[31], oe(O, P);
-  let L, H;
-  e[32] !== m ? (L = () => {
-    !m && d.current.length > 0 && ue(), m ? document.body.style.overflow = "hidden" : document.body.style.overflow = "auto";
-  }, H = [m], e[32] = m, e[33] = L, e[34] = H) : (L = e[33], H = e[34]), oe(L, H);
-  let p;
-  e[35] !== z || e[36] !== s || e[37] !== D || e[38] !== ee || e[39] !== Z || e[40] !== u || e[41] !== f || e[42] !== I || e[43] !== $ || e[44] !== y || e[45] !== G || e[46] !== F || e[47] !== Q || e[48] !== V ? (p = s && /* @__PURE__ */ j("div", { ref: X, className: `step -${V}`, style: {
-    ...Q
-  }, children: [
-    F && /* @__PURE__ */ r("div", { className: "closebutton", children: /* @__PURE__ */ r(ve, { 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 -${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__ */ j("div", { className: "content", children: [
-      /* @__PURE__ */ r("span", { className: "number", children: s.number }),
-      /* @__PURE__ */ j("div", { className: "about", children: [
-        /* @__PURE__ */ r("h3", { children: s.title }),
-        /* @__PURE__ */ r("p", { className: "description", ref: Y })
-      ] })
-    ] }),
-    /* @__PURE__ */ j("div", { className: "footer", children: [
-      /* @__PURE__ */ r(ie, { label: z, onClick: ee, disabled: !u, visible: G, customClass: "back-button" }),
-      /* @__PURE__ */ r(ie, { label: $, onClick: Z, disabled: !f, visible: !I, customClass: "next-button" }),
-      /* @__PURE__ */ r(ie, { label: D, visible: I, onClick: y, customClass: "finish-button" })
-    ] })
-  ] }, s.id), e[35] = z, e[36] = s, e[37] = D, e[38] = ee, e[39] = Z, e[40] = u, e[41] = f, e[42] = I, e[43] = $, e[44] = y, e[45] = G, e[46] = F, e[47] = Q, e[48] = V, e[49] = p) : p = e[49];
-  let A;
-  e[50] !== p ? (A = /* @__PURE__ */ r("div", { className: "uitour-component", children: p }), e[50] = p, e[51] = A) : A = e[51];
-  const ne = A;
-  if (!m)
-    return null;
-  let W;
-  return e[52] !== ne ? (W = Se(ne, document.body), e[52] = ne, e[53] = W) : W = e[53], W;
-};
-export {
-  Re 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);
 };
-//# sourceMappingURL=index.js.map
+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
+});