@rehagro/ui 1.0.58 → 1.0.60

package/dist/index.d.mts

@@ -960,6 +960,10 @@ type TableProps<T> = Omit<React__default.HTMLAttributes<HTMLTableElement>, "chil
     rowClickable?: boolean;
     /** Callback invoked when a row is clicked: `(row, index, event)` */
     onRowClick?: (row: T, index: number, event?: React__default.MouseEvent<HTMLTableRowElement>) => void;
+    /** Disables all editable controls inside table cells ("select", "date", "textInput") */
+    disableEditableControls?: boolean;
+    /** @deprecated Use `disableEditableControls` instead */
+    disableEditableSelects?: boolean;
 };
 declare const Table: <T>(props: TableProps<T> & {
     ref?: React__default.ForwardedRef<HTMLTableElement>;

package/dist/index.d.ts

@@ -960,6 +960,10 @@ type TableProps<T> = Omit<React__default.HTMLAttributes<HTMLTableElement>, "chil
     rowClickable?: boolean;
     /** Callback invoked when a row is clicked: `(row, index, event)` */
     onRowClick?: (row: T, index: number, event?: React__default.MouseEvent<HTMLTableRowElement>) => void;
+    /** Disables all editable controls inside table cells ("select", "date", "textInput") */
+    disableEditableControls?: boolean;
+    /** @deprecated Use `disableEditableControls` instead */
+    disableEditableSelects?: boolean;
 };
 declare const Table: <T>(props: TableProps<T> & {
     ref?: React__default.ForwardedRef<HTMLTableElement>;

package/dist/index.js

@@ -2844,6 +2844,17 @@ function getClockPosition(index, radius) {
     top: `calc(50% + ${Math.sin(angle) * radius}px)`
   };
 }
+function getRehagroPortalStyle(source) {
+  const root = source?.closest(".rh-root");
+  if (!root) return void 0;
+  const variables = {};
+  for (let index = 0; index < root.style.length; index += 1) {
+    const property = root.style.item(index);
+    if (!property.startsWith("--rh-")) continue;
+    variables[property] = root.style.getPropertyValue(property);
+  }
+  return variables;
+}
 var TimePicker = React9.forwardRef(
   function TimePicker2(props, ref) {
     const {
@@ -3159,128 +3170,129 @@ var TimePicker = React9.forwardRef(
               ]
             }
           ),
-          isOpen && presentation === "clock" && /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              role: "presentation",
-              className: "rh-fixed rh-inset-0 rh-z-50 rh-flex rh-items-center rh-justify-center rh-bg-text/50 rh-p-4",
-              onMouseDown: (event) => {
-                if (event.target === event.currentTarget) closeClockDialog();
-              },
-              children: /* @__PURE__ */ jsxRuntime.jsxs(
-                "div",
-                {
-                  ref: dropdownRef,
-                  role: "dialog",
-                  "aria-modal": "true",
-                  "aria-label": "Seletor de hora",
-                  className: "rh-flex rh-w-full rh-max-w-[360px] rh-flex-col rh-rounded-sm rh-bg-surface rh-p-6 rh-text-text",
-                  style: { boxShadow: "0 24px 48px rgb(8 11 18 / 0.24)" },
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rh-text-sm rh-font-normal rh-uppercase rh-text-text-muted", children: "Selecione a hora" }),
-                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rh-mt-6 rh-flex rh-items-center rh-justify-between", children: [
-                      isManualClockInput ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rh-flex rh-items-center rh-gap-2", children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          "input",
-                          {
-                            "aria-label": "Hora",
-                            inputMode: "numeric",
-                            maxLength: 2,
-                            value: pad(pendingHour),
-                            onChange: (event) => handleManualClockChange("hour", event.target.value),
-                            className: "rh-h-12 rh-w-14 rh-rounded-xs rh-border rh-border-border rh-bg-surface rh-text-center rh-text-2xl rh-font-semibold rh-text-text rh-outline-none focus:rh-border-primary focus:rh-ring-2 focus:rh-ring-gray-200"
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rh-text-3xl rh-font-semibold rh-text-text-muted", children: ":" }),
+          isOpen && presentation === "clock" && typeof document !== "undefined" && reactDom.createPortal(
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rh-root", style: getRehagroPortalStyle(wrapperRef.current), children: /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                role: "presentation",
+                className: "rh-fixed rh-inset-0 rh-z-50 rh-flex rh-items-center rh-justify-center rh-bg-text/50 rh-p-4",
+                onMouseDown: (event) => {
+                  if (event.target === event.currentTarget) closeClockDialog();
+                },
+                children: /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    ref: dropdownRef,
+                    role: "dialog",
+                    "aria-modal": "true",
+                    "aria-label": "Seletor de hora",
+                    className: "rh-flex rh-w-full rh-max-w-[360px] rh-flex-col rh-rounded-sm rh-bg-surface rh-p-6 rh-text-text",
+                    style: { boxShadow: "0 24px 48px rgb(8 11 18 / 0.24)" },
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rh-text-sm rh-font-normal rh-uppercase rh-text-text-muted", children: "Selecione a hora" }),
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rh-mt-6 rh-flex rh-items-center rh-justify-between", children: [
+                        isManualClockInput ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rh-flex rh-items-center rh-gap-2", children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            "input",
+                            {
+                              "aria-label": "Hora",
+                              inputMode: "numeric",
+                              maxLength: 2,
+                              value: pad(pendingHour),
+                              onChange: (event) => handleManualClockChange("hour", event.target.value),
+                              className: "rh-h-12 rh-w-14 rh-rounded-xs rh-border rh-border-border rh-bg-surface rh-text-center rh-text-2xl rh-font-semibold rh-text-text rh-outline-none focus:rh-border-primary focus:rh-ring-2 focus:rh-ring-gray-200"
+                            }
+                          ),
+                          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rh-text-2xl rh-font-semibold rh-text-text-muted", children: ":" }),
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            "input",
+                            {
+                              "aria-label": "Minuto",
+                              inputMode: "numeric",
+                              maxLength: 2,
+                              value: pad(pendingMinute),
+                              onChange: (event) => handleManualClockChange("minute", event.target.value),
+                              className: "rh-h-12 rh-w-14 rh-rounded-xs rh-border rh-border-border rh-bg-surface rh-text-center rh-text-2xl rh-font-semibold rh-text-text rh-outline-none focus:rh-border-primary focus:rh-ring-2 focus:rh-ring-gray-200"
+                            }
+                          )
+                        ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rh-flex rh-items-center rh-gap-1 rh-text-2xl rh-font-semibold", children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            "button",
+                            {
+                              type: "button",
+                              onClick: () => setClockStep("hour"),
+                              className: [
+                                "rh-rounded-xs rh-px-1 rh-transition-colors rh-duration-150",
+                                clockStep === "hour" ? "rh-text-text" : "rh-text-text-muted hover:rh-bg-background"
+                              ].join(" "),
+                              children: clockDisplayText.slice(0, 2)
+                            }
+                          ),
+                          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rh-text-text-muted", children: ":" }),
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            "button",
+                            {
+                              type: "button",
+                              onClick: () => setClockStep("minute"),
+                              className: [
+                                "rh-rounded-xs rh-px-1 rh-transition-colors rh-duration-150",
+                                clockStep === "minute" ? "rh-text-text" : "rh-text-text-muted hover:rh-bg-background"
+                              ].join(" "),
+                              children: clockDisplayText.slice(3, 5)
+                            }
+                          )
+                        ] }),
                         /* @__PURE__ */ jsxRuntime.jsx(
-                          "input",
+                          "button",
                           {
-                            "aria-label": "Minuto",
-                            inputMode: "numeric",
-                            maxLength: 2,
-                            value: pad(pendingMinute),
-                            onChange: (event) => handleManualClockChange("minute", event.target.value),
-                            className: "rh-h-12 rh-w-14 rh-rounded-xs rh-border rh-border-border rh-bg-surface rh-text-center rh-text-2xl rh-font-semibold rh-text-text rh-outline-none focus:rh-border-primary focus:rh-ring-2 focus:rh-ring-gray-200"
+                            type: "button",
+                            "aria-label": isManualClockInput ? "Voltar ao rel\xF3gio" : "Digitar hor\xE1rio manualmente",
+                            onClick: () => setIsManualClockInput((current) => !current),
+                            className: "rh-rounded-full rh-p-2 rh-text-text hover:rh-bg-background",
+                            children: /* @__PURE__ */ jsxRuntime.jsx(PencilIcon, {})
                           }
                         )
-                      ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rh-flex rh-items-center rh-gap-1 rh-text-3xl rh-font-semibold", children: [
+                      ] }),
+                      !isManualClockInput && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rh-mx-auto rh-mt-8 rh-flex rh-h-[256px] rh-w-[256px] rh-items-center rh-justify-center rh-rounded-full rh-bg-background", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rh-relative rh-h-full rh-w-full", children: [
+                        clockStep === "hour" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                          CLOCK_HOURS_OUTER.map(
+                            (hour, index) => clockHourButton(hour, index, 102)
+                          ),
+                          CLOCK_HOURS_INNER.map(
+                            (hour, index) => clockHourButton(hour, index, 68)
+                          )
+                        ] }) : CLOCK_MINUTES.map((minute, index) => clockMinuteButton(minute, index)),
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rh-absolute rh-left-1/2 rh-top-1/2 rh-h-2 rh-w-2 -rh-translate-x-1/2 -rh-translate-y-1/2 rh-rounded-full rh-bg-primary" })
+                      ] }) }),
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rh-mt-8 rh-flex rh-justify-end rh-gap-6", children: [
                         /* @__PURE__ */ jsxRuntime.jsx(
                           "button",
                           {
                             type: "button",
-                            onClick: () => setClockStep("hour"),
-                            className: [
-                              "rh-rounded-xs rh-px-1 rh-transition-colors rh-duration-150",
-                              clockStep === "hour" ? "rh-text-text" : "rh-text-text-muted hover:rh-bg-background"
-                            ].join(" "),
-                            children: clockDisplayText.slice(0, 2)
+                            onClick: closeClockDialog,
+                            className: "rh-text-base rh-font-medium rh-uppercase rh-text-primary hover:rh-opacity-80",
+                            children: "Cancelar"
                           }
                         ),
-                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rh-text-text-muted", children: ":" }),
                         /* @__PURE__ */ jsxRuntime.jsx(
                           "button",
                           {
                             type: "button",
-                            onClick: () => setClockStep("minute"),
-                            className: [
-                              "rh-rounded-xs rh-px-1 rh-transition-colors rh-duration-150",
-                              clockStep === "minute" ? "rh-text-text" : "rh-text-text-muted hover:rh-bg-background"
-                            ].join(" "),
-                            children: clockDisplayText.slice(3, 5)
+                            onClick: () => {
+                              if (hasPendingValue) commit(pendingHour, pendingMinute);
+                              else closeClockDialog();
+                            },
+                            className: "rh-text-base rh-font-medium rh-uppercase rh-text-primary hover:rh-opacity-80",
+                            children: "OK"
                           }
                         )
-                      ] }),
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        "button",
-                        {
-                          type: "button",
-                          "aria-label": isManualClockInput ? "Voltar ao rel\xF3gio" : "Digitar hor\xE1rio manualmente",
-                          onClick: () => setIsManualClockInput((current) => !current),
-                          className: "rh-rounded-full rh-p-2 rh-text-text hover:rh-bg-background",
-                          children: /* @__PURE__ */ jsxRuntime.jsx(PencilIcon, {})
-                        }
-                      )
-                    ] }),
-                    !isManualClockInput && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rh-mx-auto rh-mt-8 rh-flex rh-h-[256px] rh-w-[256px] rh-items-center rh-justify-center rh-rounded-full rh-bg-background", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rh-relative rh-h-full rh-w-full", children: [
-                      clockStep === "hour" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                        CLOCK_HOURS_OUTER.map(
-                          (hour, index) => clockHourButton(hour, index, 102)
-                        ),
-                        CLOCK_HOURS_INNER.map(
-                          (hour, index) => clockHourButton(hour, index, 68)
-                        )
-                      ] }) : CLOCK_MINUTES.map(
-                        (minute, index) => clockMinuteButton(minute, index)
-                      ),
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rh-absolute rh-left-1/2 rh-top-1/2 rh-h-2 rh-w-2 -rh-translate-x-1/2 -rh-translate-y-1/2 rh-rounded-full rh-bg-primary" })
-                    ] }) }),
-                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rh-mt-8 rh-flex rh-justify-end rh-gap-6", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        "button",
-                        {
-                          type: "button",
-                          onClick: closeClockDialog,
-                          className: "rh-text-base rh-font-medium rh-uppercase rh-text-primary hover:rh-opacity-80",
-                          children: "Cancelar"
-                        }
-                      ),
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        "button",
-                        {
-                          type: "button",
-                          onClick: () => {
-                            if (hasPendingValue) commit(pendingHour, pendingMinute);
-                            else closeClockDialog();
-                          },
-                          className: "rh-text-base rh-font-medium rh-uppercase rh-text-primary hover:rh-opacity-80",
-                          children: "OK"
-                        }
-                      )
-                    ] })
-                  ]
-                }
-              )
-            }
+                      ] })
+                    ]
+                  }
+                )
+              }
+            ) }),
+            document.body
           ),
           helperText && !isHelperDismissed && /* @__PURE__ */ jsxRuntime.jsxs(
             "span",
@@ -4561,7 +4573,8 @@ var CustomSelect = ({
   textColor,
   placeholderColor,
   backgroundColor,
-  type = "select"
+  type = "select",
+  disabled = false
 }) => {
   const [isOpen, setIsOpen] = React9.useState(false);
   const [dropdownStyle, setDropdownStyle] = React9.useState({});
@@ -4595,6 +4608,7 @@ var CustomSelect = ({
     };
   };
   const openDropdown = () => {
+    if (disabled) return;
     if (!isOpen) setDropdownStyle(calcPosition());
     setIsOpen((prev) => !prev);
   };
@@ -4643,6 +4657,7 @@ var CustomSelect = ({
         {
           ref: textAreaRef,
           value,
+          disabled,
           placeholder,
           rows: 1,
           onClick: (e) => e.stopPropagation(),
@@ -4654,7 +4669,7 @@ var CustomSelect = ({
             color: inputTextColor,
             backgroundColor: backgroundColor || "transparent"
           },
-          className: "rh-table-textarea rh-flex rh-items-center rh-leading-[20px] rh-py-[7px] rh-w-full rh-min-h-[40px] rh-text-sm rh-px-1 rh-border rh-bg-surface rh-rounded-xs rh-border-transparent rh-line-height-[20px] rh-outline-none rh-resize-none rh-overflow-hidden hover:rh-border-primary hover:rh-ring-2 hover:rh-ring-gray-200"
+          className: "rh-table-textarea rh-flex rh-items-center rh-leading-[20px] rh-py-[7px] rh-w-full rh-min-h-[40px] rh-text-sm rh-px-1 rh-border rh-bg-surface rh-rounded-xs rh-border-transparent rh-line-height-[20px] rh-outline-none rh-resize-none rh-overflow-hidden hover:rh-border-primary hover:rh-ring-2 hover:rh-ring-gray-200 disabled:rh-opacity-60 disabled:rh-cursor-not-allowed disabled:hover:rh-border-transparent disabled:hover:rh-ring-0"
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx("style", { children: `.rh-table-textarea::placeholder { color: ${inputPlaceholderColor}; }` })
@@ -4665,12 +4680,13 @@ var CustomSelect = ({
       "button",
       {
         type: "button",
+        disabled,
         onClick: (e) => {
           e.stopPropagation();
           openDropdown();
         },
         style: { backgroundColor: backgroundColor || void 0 },
-        className: "rh-w-full rh-min-h-[40px] rh-flex rh-items-center rh-border rh-bg-surface rh-rounded-sm rh-border-transparent rh-justify-between rh-py-2 hover:rh-border-primary hover:rh-ring-2 hover:rh-ring-gray-200 rh-cursor-pointer rh-text-left",
+        className: "rh-w-full rh-min-h-[40px] rh-flex rh-items-center rh-border rh-bg-surface rh-rounded-sm rh-border-transparent rh-justify-between rh-py-2 hover:rh-border-primary hover:rh-ring-2 hover:rh-ring-gray-200 rh-cursor-pointer rh-text-left disabled:rh-cursor-not-allowed disabled:rh-opacity-60 disabled:hover:rh-border-transparent disabled:hover:rh-ring-0",
         children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rh-flex rh-items-center rh-gap-2 rh-flex-1 rh-px-0.5", children: /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
@@ -4756,6 +4772,8 @@ function TableInner({
   rowKey,
   rowClickable = false,
   onRowClick,
+  disableEditableControls = false,
+  disableEditableSelects = false,
   size = "md",
   variant = "default",
   sort,
@@ -4775,6 +4793,7 @@ function TableInner({
   className = "",
   ...rest
 }, ref) {
+  const shouldDisableEditableControls = disableEditableControls || disableEditableSelects;
   const handleSort = (column) => {
     if (!column.sortable || !onSortChange) return;
     const newDirection = sort?.key === column.key ? sort.direction === "asc" ? "desc" : sort.direction === "desc" ? null : "asc" : "asc";
@@ -4867,7 +4886,7 @@ function TableInner({
     }
     return column.editablePlaceholderColor;
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rh-w-full rh-rounded rh-overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rh-w-full rh-rounded", children: /* @__PURE__ */ jsxRuntime.jsxs(
     "table",
     {
       ref,
@@ -4985,6 +5004,7 @@ function TableInner({
                       CustomSelect,
                       {
                         type: column.type ?? "select",
+                        disabled: shouldDisableEditableControls,
                         options: column.choices,
                         value: column.editableValue(row),
                         placeholder: column.editablePlaceholder,