nexaas-ui-components 1.0.85 → 1.0.88

package/dist/index.cjs

@@ -9,11 +9,11 @@ var zustand = require('zustand');
 var dateFns = require('date-fns');
 var react = require('@headlessui/react');
 var react$1 = require('@headlessui-float/react');
+var reactTooltip = require('react-tooltip');
 var IntlCurrencyInputRaw = require('react-intl-currency-input');
 var lodashNamespace = require('lodash');
 var InputMask = require('react-input-mask');
 var Modal = require('react-modal');
-var reactTooltip = require('react-tooltip');
 var Select = require('react-select');
 var AsyncSelect = require('react-select/async');
 var reactTable = require('@tanstack/react-table');
@@ -163,8 +163,11 @@ var variants = {
   successOutline: {
     text: "active:shadow-none text-success-500 font-bold bg-surface border-[0.5px] border-success-500 hover:bg-success-100 active:bg-success-500 active:text-white active:border-transparent disabled:opacity-50 disabled:bg-surface disabled:text-success-500"
   },
+  // Node 412:5067 — faltava o véu branco no default (ficava warning-500 chapado, enquanto
+  // danger/success já tinham o gradiente). Mesmo padrão dos dois: ::before com
+  // mix-blend-plus-lighter, zerado no hover (que troca pro gradiente opaco) e no active.
   warn: {
-    text: "shadow-[0_1px_1.5px_0_rgba(242,153,20,0.2)] text-white bg-warning-500 hover:bg-gradient-to-b hover:from-warning-start hover:to-warning-end hover:shadow-[0_2px_3px_0_rgba(56,61,77,0.12)] active:bg-warning-600 active:shadow-none disabled:opacity-50 disabled:shadow-none"
+    text: "relative isolate shadow-[0_1px_1.5px_0_rgba(242,153,20,0.2)] text-white bg-warning-500 before:content-[''] before:absolute before:inset-0 before:-z-10 before:rounded-lg before:pointer-events-none before:mix-blend-plus-lighter before:bg-gradient-to-b before:from-[rgba(255,255,255,0.15)] before:to-[rgba(255,255,255,0)] hover:bg-gradient-to-b hover:from-warning-start hover:to-warning-end hover:shadow-[0_2px_3px_0_rgba(56,61,77,0.12)] hover:before:opacity-0 active:bg-warning-600 active:shadow-none active:before:opacity-0 disabled:opacity-50 disabled:shadow-none"
   },
   blue: {
     text: "shadow-button bg-blue-500 text-accent-label hover:bg-blue-600 active:bg-blue-600 text-bold"
@@ -815,20 +818,8 @@ var DatePickerInput = React5.forwardRef(
     var _a;
     const [invalidDate, setInvalidDate] = React5.useState(false);
     const [showCalendar, setShowCalendar] = React5.useState(false);
-    const [inputWidth, setInputWidth] = React5.useState(0);
     const inputContainerRef = React5.useRef(null);
     const dateFnsFormat = "dd/MM/yyyy";
-    React5.useEffect(() => {
-      const updateWidth = () => {
-        if (inputContainerRef.current) {
-          setInputWidth(inputContainerRef.current.offsetWidth + 10);
-        }
-      };
-      updateWidth();
-      window.addEventListener("resize", updateWidth);
-      return () => window.removeEventListener("resize", updateWidth);
-    }, []);
-    const finalOffset = popoverOffset || [inputWidth || 250, -46];
     const fieldValidation = useFieldErrorsStore((state) => state.field);
     const fieldValidationMessages = [
       (_a = fieldValidation[name ? name : registration == null ? void 0 : registration.name]) == null ? void 0 : _a.message,
@@ -874,10 +865,6 @@ var DatePickerInput = React5.forwardRef(
                     ref.current = node;
                   }
                 },
-                style: {
-                  ["--popover-offset-x"]: `${finalOffset[0]}px`,
-                  ["--popover-offset-y"]: `${ -100}px`
-                },
                 children: [
                   icon && /* @__PURE__ */ jsxRuntime.jsx(
                     "div",
@@ -902,10 +889,21 @@ var DatePickerInput = React5.forwardRef(
                         style: { height: "46px" }
                       },
                       popoverProps: {
-                        placement: "bottom",
-                        usePortal: false,
+                        placement: "bottom-start",
+                        // usePortal false renderizava o calendario dentro do proprio input, entao
+                        // qualquer ancestral com overflow auto/hidden (modal com scroll, painel
+                        // lateral) o cortava e ele ficava inutilizavel. Com portal ele vai pro body e
+                        // o Popper reposiciona sozinho quando nao ha espaco abaixo.
+                        usePortal: true,
                         minimal: true,
-                        popoverClassName: "date-picker-popover"
+                        popoverClassName: "date-picker-popover",
+                        // Sem boundary o flip ignora o viewport quando o input esta dentro de um
+                        // container com scroll.
+                        modifiers: {
+                          preventOverflow: { enabled: true, options: { padding: 8 } },
+                          flip: { enabled: true },
+                          ...popoverOffset ? { offset: { enabled: true, options: { offset: popoverOffset } } } : {}
+                        }
                       },
                       disabled,
                       onChange: (e, isUserChange) => {
@@ -1304,6 +1302,26 @@ var Checkbox = ({
     }
   ) })
 ] }) });
+var Popover = ({
+  id,
+  displayArrow = true,
+  openOnClick = false
+}) => {
+  const style = {
+    noArrow: "hidden"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    reactTooltip.Tooltip,
+    {
+      id,
+      className: "absolute bg-neutral-700 text-p-md text-neutral-0 rounded-lg shadow-dropdown py-[6px] px-3 max-w-[430px] break-words whitespace-normal",
+      classNameArrow: !displayArrow ? style.noArrow : "",
+      openOnClick,
+      delayHide: 0,
+      delayShow: 0
+    }
+  ) });
+};
 var FilterCalendar = ({
   icon,
   label,
@@ -1598,6 +1616,9 @@ var FilterCalendar = ({
                   {
                     type: "button",
                     "aria-label": "Limpar",
+                    "data-tooltip-id": `filter-calendar-clear-${name}`,
+                    "data-tooltip-content": "Limpar",
+                    "data-tooltip-place": "top",
                     onClick: (e) => {
                       e.stopPropagation();
                       e.preventDefault();
@@ -1610,7 +1631,8 @@ var FilterCalendar = ({
                     ),
                     children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-full w-7 items-center justify-center rounded-[6px] text-white", children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "uil uil-times text-[18px]" }) })
                   }
-                )
+                ),
+                hasValue && clearButton && /* @__PURE__ */ jsxRuntime.jsx(Popover, { id: `filter-calendar-clear-${name}` })
               ] }) }),
               open && /* @__PURE__ */ jsxRuntime.jsx(react$1.Float.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(react.PopoverPanel, { className: "p-3 whitespace-nowrap bg-surface rounded-lg shadow-dropdown border-[0.5px] border-neutral-200", children: ({ close }) => {
                 const onClose = () => {
@@ -2322,6 +2344,9 @@ var FilterSelect = ({
                     {
                       type: "button",
                       "aria-label": clearLabel,
+                      "data-tooltip-id": `filter-select-clear-${name}`,
+                      "data-tooltip-content": clearLabel,
+                      "data-tooltip-place": "top",
                       onClick: (e) => {
                         e.stopPropagation();
                         e.preventDefault();
@@ -2337,7 +2362,8 @@ var FilterSelect = ({
                       ),
                       children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-full w-7 items-center justify-center rounded-[6px] text-white", children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "uil uil-times text-[18px]" }) })
                     }
-                  )
+                  ),
+                  hasValue && clearButton && /* @__PURE__ */ jsxRuntime.jsx(Popover, { id: `filter-select-clear-${name}` })
                 ] }) }),
                 open && /* @__PURE__ */ jsxRuntime.jsx(react$1.Float.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(
                   react.PopoverPanel,
@@ -3197,26 +3223,6 @@ var ModalDialog = ({
     )
   ] });
 };
-var Popover4 = ({
-  id,
-  displayArrow = true,
-  openOnClick = false
-}) => {
-  const style = {
-    noArrow: "hidden"
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
-    reactTooltip.Tooltip,
-    {
-      id,
-      className: "absolute bg-neutral-700 text-p-md text-neutral-0 rounded-lg shadow-dropdown py-[6px] px-3 max-w-[430px] break-words whitespace-normal",
-      classNameArrow: !displayArrow ? style.noArrow : "",
-      openOnClick,
-      delayHide: 0,
-      delayShow: 0
-    }
-  ) });
-};
 
 // src/components/Select/Select.styles.ts
 var customStyles = {
@@ -5112,7 +5118,7 @@ function CopyPopover({ children, valueToCopy }) {
             "data-tooltip-content": copied ? "Copiado" : "Copiar",
             "data-tooltip-place": "top",
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(Popover4, { id: "copy-id" }),
+              /* @__PURE__ */ jsxRuntime.jsx(Popover, { id: "copy-id" }),
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-neutral-400 text-xs", children })
             ]
           }
@@ -5124,7 +5130,7 @@ function CopyPopover({ children, valueToCopy }) {
             "data-tooltip-content": copied ? "Copiado" : "Copiar",
             "data-tooltip-place": "top",
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(Popover4, { id: "icon-id" }),
+              /* @__PURE__ */ jsxRuntime.jsx(Popover, { id: "icon-id" }),
               /* @__PURE__ */ jsxRuntime.jsx("i", { className: "uil uil-copy text-base text-blue-500 cursor-pointer -mt-[1px]" })
             ]
           }
@@ -6084,7 +6090,7 @@ function InfoIcon({
       "data-tooltip-html": content,
       "data-tooltip-place": "top",
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Popover4, { id }),
+        /* @__PURE__ */ jsxRuntime.jsx(Popover, { id }),
         /* @__PURE__ */ jsxRuntime.jsx("i", { className: "uil uil-info-circle text-p-lg text-neutral-400" })
       ]
     }
@@ -7606,7 +7612,7 @@ exports.MultiSelectBottom = MultiSelectBottom;
 exports.PageBox = PageBox;
 exports.PageHeader = PageHeader;
 exports.PaginationSelect = PaginationSelect;
-exports.Popover = Popover4;
+exports.Popover = Popover;
 exports.ProgressBar = ProgressBar;
 exports.Radio = Radio;
 exports.RocketIcon = RocketIcon;