@gustavo-valsechi/client 1.4.316 → 1.4.318

package/dist/src/components/types/loading/app/styles.js

@@ -44,7 +44,8 @@ const Container = import_styled_components.default.div`
     bottom: 0;
     left: 0;
     background: ${({ initialization, theme }) => initialization ? `${theme.maingrad}, ${theme.primary}` : "transparent"};
-    z-index: ${({ initialization }) => initialization ? "9" : "0"};
+    z-index: ${({ initialization }) => initialization ? "9" : "1"};
+    pointer-events: none;
     
     .loading-logo {
         font-size: 4rem;

package/dist/src/components/types/loading/app/styles.mjs

@@ -11,7 +11,8 @@ const Container = styled.div`
     bottom: 0;
     left: 0;
     background: ${({ initialization, theme }) => initialization ? `${theme.maingrad}, ${theme.primary}` : "transparent"};
-    z-index: ${({ initialization }) => initialization ? "9" : "0"};
+    z-index: ${({ initialization }) => initialization ? "9" : "1"};
+    pointer-events: none;
     
     .loading-logo {
         font-size: 4rem;

package/dist/src/components/types/table/index.js

@@ -129,7 +129,7 @@ function Table(props) {
       {
         className: "table-content-elipse",
         "data-tooltip": import_lodash.default.isString(body) && !row.info ? body : "",
-        "data-tooltip-props": '{"position":"bottom"}',
+        "data-tooltip-props": '{"position":"bottom","align":"start"}',
         children: body
       }
     );

package/dist/src/components/types/table/index.mjs

@@ -95,7 +95,7 @@ function Table(props) {
       {
         className: "table-content-elipse",
         "data-tooltip": _.isString(body) && !row.info ? body : "",
-        "data-tooltip-props": '{"position":"bottom"}',
+        "data-tooltip-props": '{"position":"bottom","align":"start"}',
         children: body
       }
     );

package/dist/src/components/types/tooltip/styles.js

@@ -34,44 +34,59 @@ __export(styles_exports, {
 });
 module.exports = __toCommonJS(styles_exports);
 var import_styled_components = __toESM(require("styled-components"));
-const setPosition = ({ position = "top", theme }, isBorder) => {
+const setPosition = ({
+  position = "top",
+  align = "center",
+  noArrow = false,
+  theme
+}, isBorder) => {
+  const arrow = noArrow ? "0px" : "8px";
   const coord = isBorder ? "9" : "8";
   const color = isBorder ? theme.t05 : theme.tooltip;
+  let alignment = "50%";
+  switch (align) {
+    case "end":
+      alignment = `calc(100% - ${arrow} - 5px)`;
+      break;
+    case "start":
+      alignment = `calc(${arrow} + 5px)`;
+      break;
+  }
   const defaultPosition = `
         transform: translateX(-50%);
         bottom: -${coord}px;
-        left: 50%;
-        border-left: 8px solid transparent;
-        border-right: 8px solid transparent;
-        border-top: 8px solid ${color};
+        left: ${alignment};
+        border-left: ${arrow} solid transparent;
+        border-right: ${arrow} solid transparent;
+        border-top: ${arrow} solid ${color};
     `;
   switch (position) {
     case "bottom":
       return `
             transform: translateX(-50%);
             top: -${coord}px;
-            left: 50%;
-            border-left: 8px solid transparent;
-            border-right: 8px solid transparent;
-            border-bottom: 8px solid ${color};
+            left: ${alignment};
+            border-left: ${arrow} solid transparent;
+            border-right: ${arrow} solid transparent;
+            border-bottom: ${arrow} solid ${color};
         `;
     case "left":
       return `
             transform: translateY(-50%);
             right: -${coord}px;
-            top: 50%;
-            border-top: 8px solid transparent;
-            border-bottom: 8px solid transparent;
-            border-left: 8px solid ${color};
+            top: ${alignment};
+            border-top: ${arrow} solid transparent;
+            border-bottom: ${arrow} solid transparent;
+            border-left: ${arrow} solid ${color};
         `;
     case "right":
       return `
             transform: translateY(-50%);
             left: -${coord}px;
-            top: 50%;
-            border-top: 8px solid transparent;
-            border-bottom: 8px solid transparent;
-            border-right: 8px solid ${color};
+            top: ${alignment};
+            border-top: ${arrow} solid transparent;
+            border-bottom: ${arrow} solid transparent;
+            border-right: ${arrow} solid ${color};
         `;
     case "top":
       return defaultPosition;
@@ -90,21 +105,6 @@ const Container = import_styled_components.default.div`
     border-radius: 5px;
     z-index: 10;
     border: 1px solid ${({ theme }) => theme.t05};
-    transform: ${({ position = "top" }) => {
-  const defaultPosition = "translateX(-50%)";
-  switch (position) {
-    case "left":
-      return "translateX(0)";
-    case "right":
-      return "translateX(-100%)";
-    case "bottom":
-      return defaultPosition;
-    case "top":
-      return defaultPosition;
-    default:
-      return defaultPosition;
-  }
-}};
 
     @media(max-width: ${({ theme }) => theme.mobileMaxWidth}) {
         display: none;

package/dist/src/components/types/tooltip/styles.mjs

@@ -1,44 +1,59 @@
 "use client";
 "use client";
 import styled from "styled-components";
-const setPosition = ({ position = "top", theme }, isBorder) => {
+const setPosition = ({
+  position = "top",
+  align = "center",
+  noArrow = false,
+  theme
+}, isBorder) => {
+  const arrow = noArrow ? "0px" : "8px";
   const coord = isBorder ? "9" : "8";
   const color = isBorder ? theme.t05 : theme.tooltip;
+  let alignment = "50%";
+  switch (align) {
+    case "end":
+      alignment = `calc(100% - ${arrow} - 5px)`;
+      break;
+    case "start":
+      alignment = `calc(${arrow} + 5px)`;
+      break;
+  }
   const defaultPosition = `
         transform: translateX(-50%);
         bottom: -${coord}px;
-        left: 50%;
-        border-left: 8px solid transparent;
-        border-right: 8px solid transparent;
-        border-top: 8px solid ${color};
+        left: ${alignment};
+        border-left: ${arrow} solid transparent;
+        border-right: ${arrow} solid transparent;
+        border-top: ${arrow} solid ${color};
     `;
   switch (position) {
     case "bottom":
       return `
             transform: translateX(-50%);
             top: -${coord}px;
-            left: 50%;
-            border-left: 8px solid transparent;
-            border-right: 8px solid transparent;
-            border-bottom: 8px solid ${color};
+            left: ${alignment};
+            border-left: ${arrow} solid transparent;
+            border-right: ${arrow} solid transparent;
+            border-bottom: ${arrow} solid ${color};
         `;
     case "left":
       return `
             transform: translateY(-50%);
             right: -${coord}px;
-            top: 50%;
-            border-top: 8px solid transparent;
-            border-bottom: 8px solid transparent;
-            border-left: 8px solid ${color};
+            top: ${alignment};
+            border-top: ${arrow} solid transparent;
+            border-bottom: ${arrow} solid transparent;
+            border-left: ${arrow} solid ${color};
         `;
     case "right":
       return `
             transform: translateY(-50%);
             left: -${coord}px;
-            top: 50%;
-            border-top: 8px solid transparent;
-            border-bottom: 8px solid transparent;
-            border-right: 8px solid ${color};
+            top: ${alignment};
+            border-top: ${arrow} solid transparent;
+            border-bottom: ${arrow} solid transparent;
+            border-right: ${arrow} solid ${color};
         `;
     case "top":
       return defaultPosition;
@@ -57,21 +72,6 @@ const Container = styled.div`
     border-radius: 5px;
     z-index: 10;
     border: 1px solid ${({ theme }) => theme.t05};
-    transform: ${({ position = "top" }) => {
-  const defaultPosition = "translateX(-50%)";
-  switch (position) {
-    case "left":
-      return "translateX(0)";
-    case "right":
-      return "translateX(-100%)";
-    case "bottom":
-      return defaultPosition;
-    case "top":
-      return defaultPosition;
-    default:
-      return defaultPosition;
-  }
-}};
 
     @media(max-width: ${({ theme }) => theme.mobileMaxWidth}) {
         display: none;

package/dist/src/contexts/target/index.js

@@ -40,7 +40,6 @@ var import_styles = require("./styles");
 var import_theme = require("../theme");
 var import_react_dom = require("react-dom");
 var import_events = require("./events");
-var import_navigation = require("next/navigation");
 var import_lodash = __toESM(require("lodash"));
 var import_modal = __toESM(require("./modal"));
 const TargetContext = (0, import_react.createContext)({});
@@ -50,7 +49,6 @@ const TargetProviderContainer = ({ children }) => {
   const inputRef = (0, import_react.useRef)([]);
   const containerRef = (0, import_react.useRef)([]);
   const theme = (0, import_theme.useTheme)();
-  const pathname = (0, import_navigation.usePathname)();
   const [targets, setTargets] = (0, import_react.useState)([]);
   const [modal, setModal] = (0, import_react.useState)(-1);
   (0, import_react.useEffect)(() => {
@@ -72,18 +70,17 @@ const TargetProviderContainer = ({ children }) => {
     });
   }, [targets, inputRef, containerRef, theme.content.isMobile]);
   (0, import_react.useEffect)(() => {
-    const removeTarget = (node) => {
-      if (!(node instanceof HTMLElement)) return;
-      memory = import_lodash.default.filter(memory, (target) => !!target.ref.current);
-      insideMemory = [];
-      setTargets([...memory]);
-    };
     const observer = new MutationObserver((mutations) => {
       for (const mutation of mutations) {
-        mutation.removedNodes.forEach(removeTarget);
+        mutation.removedNodes.forEach((node) => {
+          if (!(node instanceof HTMLElement)) return;
+          memory = import_lodash.default.filter(memory, (target) => !!target.ref.current);
+          insideMemory = [];
+          setTargets([...memory]);
+        });
       }
     });
-    observer.observe(document.getElementById("modal-context-container"), { childList: true, subtree: true });
+    observer.observe(document.body, { childList: true, subtree: true });
     return () => observer.disconnect();
   }, []);
   const getCoords = (target, component) => {

package/dist/src/contexts/target/index.mjs

@@ -6,7 +6,6 @@ import { Container } from "./styles";
 import { useTheme } from "../theme";
 import { createPortal } from "react-dom";
 import { onScroll, onBlur, onFocus, onClick } from "./events";
-import { usePathname } from "next/navigation";
 import _ from "lodash";
 import Modal from "./modal";
 const TargetContext = createContext({});
@@ -16,7 +15,6 @@ const TargetProviderContainer = ({ children }) => {
   const inputRef = useRef([]);
   const containerRef = useRef([]);
   const theme = useTheme();
-  const pathname = usePathname();
   const [targets, setTargets] = useState([]);
   const [modal, setModal] = useState(-1);
   useEffect(() => {
@@ -38,18 +36,17 @@ const TargetProviderContainer = ({ children }) => {
     });
   }, [targets, inputRef, containerRef, theme.content.isMobile]);
   useEffect(() => {
-    const removeTarget = (node) => {
-      if (!(node instanceof HTMLElement)) return;
-      memory = _.filter(memory, (target) => !!target.ref.current);
-      insideMemory = [];
-      setTargets([...memory]);
-    };
     const observer = new MutationObserver((mutations) => {
       for (const mutation of mutations) {
-        mutation.removedNodes.forEach(removeTarget);
+        mutation.removedNodes.forEach((node) => {
+          if (!(node instanceof HTMLElement)) return;
+          memory = _.filter(memory, (target) => !!target.ref.current);
+          insideMemory = [];
+          setTargets([...memory]);
+        });
       }
     });
-    observer.observe(document.getElementById("modal-context-container"), { childList: true, subtree: true });
+    observer.observe(document.body, { childList: true, subtree: true });
     return () => observer.disconnect();
   }, []);
   const getCoords = (target, component) => {

package/dist/src/contexts/tooltip/index.js

@@ -37,6 +37,7 @@ module.exports = __toCommonJS(tooltip_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_components = require("../../components");
+var import_styles = require("./styles");
 var import_lodash = __toESM(require("lodash"));
 const TooltipContext = (0, import_react.createContext)({});
 const TooltipProviderContainer = ({ children }) => {
@@ -47,26 +48,54 @@ const TooltipProviderContainer = ({ children }) => {
     const props = JSON.parse(((_a = target.dataset) == null ? void 0 : _a.tooltipProps) || "{}");
     const targetTop = rect.top + window.scrollY;
     const targetLeft = rect.left + window.scrollX;
-    const coords = {
-      top: targetTop - (target.offsetHeight + 8),
-      left: targetLeft + target.offsetWidth / 2
+    const arrowSize = props.noArrow ? 0 : 8;
+    const style = {
+      top: targetTop - (target.offsetHeight + arrowSize),
+      left: targetLeft + target.offsetWidth / 2,
+      transform: "translateX(-50%)"
+    };
+    switch (props.align) {
+      case "start":
+        style.left = targetLeft;
+        style.transform = "translateX(0)";
+        break;
+      case "end":
+        style.left = targetLeft + target.offsetWidth;
+        style.transform = "translateX(-100%)";
+        break;
+    }
+    const verticalAlign = (params) => {
+      switch (props.align) {
+        case "start":
+          params.top = targetTop;
+          params.transform = props.position === "left" ? "translateX(-100%) translateY(0)" : "translateY(0)";
+          break;
+        case "end":
+          params.top = targetTop + target.offsetHeight;
+          params.transform = props.position === "left" ? "translateX(-100%) translateY(-100%)" : "translateY(-100%)";
+          break;
+      }
     };
     switch (props.position) {
       case "bottom":
-        coords.top = targetTop + (target.offsetHeight + 8);
+        style.top = targetTop + (target.offsetHeight + arrowSize);
         break;
       case "left":
-        coords.top = targetTop;
-        coords.left = targetLeft - target.offsetWidth;
+        style.top = targetTop + target.offsetHeight / 2;
+        style.left = targetLeft - arrowSize;
+        style.transform = "translateX(-100%) translateY(-50%)";
+        verticalAlign(style);
         break;
       case "right":
-        coords.top = targetTop;
-        coords.left = targetLeft + target.offsetWidth;
+        style.top = targetTop + target.offsetHeight / 2;
+        style.left = targetLeft + target.offsetWidth + arrowSize;
+        style.transform = "translateX(0) translateY(-50%)";
+        verticalAlign(style);
         break;
     }
     return {
-      ...coords,
       content: ((_b = target.dataset) == null ? void 0 : _b.tooltip) || "",
+      style,
       props
     };
   };
@@ -109,21 +138,18 @@ const TooltipProviderContainer = ({ children }) => {
     return () => observer.disconnect();
   }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(TooltipContext.Provider, { value: {}, children: [
-    import_lodash.default.map(
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.Container, { id: "tooltip-context-container", children: import_lodash.default.map(
       tooltips,
       (data, index) => !!data.content && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_components.Tooltip,
         {
-          style: {
-            top: data.top,
-            left: data.left
-          },
+          style: data.style,
           ...data.props,
           children: data.content
         },
         index
       )
-    ),
+    ) }),
     children
   ] });
 };

package/dist/src/contexts/tooltip/index.mjs

@@ -3,6 +3,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createContext, useContext, useEffect, useState } from "react";
 import { Tooltip } from "../../components";
+import { Container } from "./styles";
 import _ from "lodash";
 const TooltipContext = createContext({});
 const TooltipProviderContainer = ({ children }) => {
@@ -13,26 +14,54 @@ const TooltipProviderContainer = ({ children }) => {
     const props = JSON.parse(((_a = target.dataset) == null ? void 0 : _a.tooltipProps) || "{}");
     const targetTop = rect.top + window.scrollY;
     const targetLeft = rect.left + window.scrollX;
-    const coords = {
-      top: targetTop - (target.offsetHeight + 8),
-      left: targetLeft + target.offsetWidth / 2
+    const arrowSize = props.noArrow ? 0 : 8;
+    const style = {
+      top: targetTop - (target.offsetHeight + arrowSize),
+      left: targetLeft + target.offsetWidth / 2,
+      transform: "translateX(-50%)"
+    };
+    switch (props.align) {
+      case "start":
+        style.left = targetLeft;
+        style.transform = "translateX(0)";
+        break;
+      case "end":
+        style.left = targetLeft + target.offsetWidth;
+        style.transform = "translateX(-100%)";
+        break;
+    }
+    const verticalAlign = (params) => {
+      switch (props.align) {
+        case "start":
+          params.top = targetTop;
+          params.transform = props.position === "left" ? "translateX(-100%) translateY(0)" : "translateY(0)";
+          break;
+        case "end":
+          params.top = targetTop + target.offsetHeight;
+          params.transform = props.position === "left" ? "translateX(-100%) translateY(-100%)" : "translateY(-100%)";
+          break;
+      }
     };
     switch (props.position) {
       case "bottom":
-        coords.top = targetTop + (target.offsetHeight + 8);
+        style.top = targetTop + (target.offsetHeight + arrowSize);
         break;
       case "left":
-        coords.top = targetTop;
-        coords.left = targetLeft - target.offsetWidth;
+        style.top = targetTop + target.offsetHeight / 2;
+        style.left = targetLeft - arrowSize;
+        style.transform = "translateX(-100%) translateY(-50%)";
+        verticalAlign(style);
         break;
       case "right":
-        coords.top = targetTop;
-        coords.left = targetLeft + target.offsetWidth;
+        style.top = targetTop + target.offsetHeight / 2;
+        style.left = targetLeft + target.offsetWidth + arrowSize;
+        style.transform = "translateX(0) translateY(-50%)";
+        verticalAlign(style);
         break;
     }
     return {
-      ...coords,
       content: ((_b = target.dataset) == null ? void 0 : _b.tooltip) || "",
+      style,
       props
     };
   };
@@ -75,21 +104,18 @@ const TooltipProviderContainer = ({ children }) => {
     return () => observer.disconnect();
   }, []);
   return /* @__PURE__ */ jsxs(TooltipContext.Provider, { value: {}, children: [
-    _.map(
+    /* @__PURE__ */ jsx(Container, { id: "tooltip-context-container", children: _.map(
       tooltips,
       (data, index) => !!data.content && /* @__PURE__ */ jsx(
         Tooltip,
         {
-          style: {
-            top: data.top,
-            left: data.left
-          },
+          style: data.style,
           ...data.props,
           children: data.content
         },
         index
       )
-    ),
+    ) }),
     children
   ] });
 };

package/dist/src/contexts/tooltip/styles.d.ts

@@ -0,0 +1 @@
+export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", any> & string;

package/dist/src/contexts/tooltip/styles.js

@@ -0,0 +1,43 @@
+"use client";
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var styles_exports = {};
+__export(styles_exports, {
+  Container: () => Container
+});
+module.exports = __toCommonJS(styles_exports);
+var import_styled_components = __toESM(require("styled-components"));
+const Container = import_styled_components.default.div`
+
+`;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Container
+});

package/dist/src/contexts/tooltip/styles.mjs

@@ -0,0 +1,9 @@
+"use client";
+"use client";
+import styled from "styled-components";
+const Container = styled.div`
+
+`;
+export {
+  Container
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gustavo-valsechi/client",
-  "version": "1.4.316",
+  "version": "1.4.318",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",