@apia/components 4.0.47 → 4.0.58

package/LICENSE.md

@@ -0,0 +1,6 @@
+All Rights Reserved.
+
+Copyright (c) 2026 Statum
+
+This software and associated documentation files are proprietary and confidential.
+Unauthorized copying, distribution, modification, or use is strictly prohibited.

package/dist/index.d.ts

@@ -333,6 +333,7 @@ declare class TabsController<TabType extends TTab = TTab> {
      */
     append(tab: TabType, behavior?: TAppendBehavior): void;
     closeAll(closeFixedTabsAsWell?: boolean, force?: boolean): Promise<void>;
+    openAll(): Promise<void>;
     closeOpenTab(force?: boolean): void;
     closeToRight(targetId: string, force?: boolean): Promise<void>;
     closeToLeft(targetId: string, force?: boolean): Promise<void>;
@@ -980,6 +981,7 @@ type TIconButton = Omit<IconButtonProps, 'sx'> & React$1.AriaAttributes & {
     size?: TIconSize;
     title?: string;
     variant?: string;
+    'data-test-id'?: string;
 };
 /**
  * Renderiza un botón con un ícono adentro.
@@ -1066,8 +1068,9 @@ type TDateProps = {
     onError?: (error: string) => unknown;
     value?: string;
     inputRef?: MutableRefObject<any>;
+    props?: React.HTMLAttributes<HTMLInputElement>;
 };
-declare const DateInput: (({ className, disabled, id: outerId, inputRef, onBlur, onChange, onError, readonly, value: outerValue, }: TDateProps) => React$1.JSX.Element) & {
+declare const DateInput: (({ className, disabled, id: outerId, inputRef, onBlur, onChange, onError, readonly, value: outerValue, props, }: TDateProps) => React$1.JSX.Element) & {
     displayName: string;
 };
 
@@ -1123,15 +1126,17 @@ declare function parseNumberInputValueToNumber(value: string): number;
 declare function parseNumberValueToNumberInput(value: string | number): string;
 declare const NumberInput: React__default.ForwardRefExoticComponent<Omit<TNumberInput, "ref"> & React__default.RefAttributes<HTMLInputElement>>;
 
-interface IRequiredMark {
+interface IRequiredMark extends Partial<BoxProps> {
     isFormReadonly?: boolean;
     isRequired?: boolean;
     isReadonly?: boolean;
+    sx?: ThemeUICSSObject;
+    style?: Record<string, any>;
 }
 /**
  * Muestra el * en los campos de requerido.
  */
-declare const RequiredMark: ({ isFormReadonly, isRequired, isReadonly, }: IRequiredMark) => React$1.JSX.Element | null;
+declare const RequiredMark: ({ isFormReadonly, isRequired, isReadonly, sx, style, ...rest }: IRequiredMark) => React$1.JSX.Element | null;
 
 declare const getFieldErrorStyles: (isValid: boolean) => ThemeUICSSObject;
 declare const getFieldTouchedStyles: (isTouched: boolean) => ThemeUICSSObject;
@@ -1901,15 +1906,20 @@ declare const FileCard: React$1.ForwardRefExoticComponent<{
     onDoubleClick?: () => void;
     onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
     onDropFiles?: (files: File[]) => void;
+    previewProps?: {
+        hasPreview?: boolean;
+        previewUrl?: string;
+    };
 } & React$1.RefAttributes<unknown>>;
 
-declare const Dropzone: ({ sx, className, messageError, progress, defaultLabel, draggingLabel, onClick, onChange, handleInfoButton, }: {
+declare const Dropzone: ({ sx, className, messageError, progress, defaultLabel, draggingLabel, onClick, onChange, handleInfoButton, infoButtonProps, }: {
     sx?: ThemeUIStyleObject;
     className?: string;
     messageError?: string;
     progress?: number;
     defaultLabel?: string;
     draggingLabel?: string;
+    infoButtonProps?: any;
     onClick?: (e: MouseEvent$1) => void;
     onChange?: (e: File[]) => any;
     handleInfoButton?: (e: MouseEvent$1) => void;

package/dist/index.js

@@ -1594,9 +1594,15 @@ class ApiaUtilNotifications {
     });
     __publicField$m(this, "notify", (notification) => {
       if (notification.type === "modal") {
-        this.util.dialogs.alert({
+        this.util.modals.open({
+          size: "flex",
           children: notification.message,
-          title: notification.title || ""
+          title: notification.title || "",
+          onConfirm: () => {
+          },
+          confirmProps: {
+            hideCancelButton: true
+          }
         });
       } else {
         defaultNotifier.notify({
@@ -1867,9 +1873,9 @@ const Confirm = ({
   children,
   additionalButtons,
   additionalButtonsOnRight,
-  cancelButtonText: cancelText = getLabel("btnCan").text,
+  cancelButtonText: cancelText,
   className,
-  confirmButtonText: confirmText = getLabel("btnCon").text,
+  confirmButtonText: confirmText,
   confirmButtonVariant = "primary",
   contentRef,
   disabled,
@@ -1881,6 +1887,14 @@ const Confirm = ({
   variant
 }) => {
   const { descriptionId } = useModalContext();
+  const showsCancelButton = onCancel && !hideCancelButton;
+  const showsConfirmButton = !hideConfirmButton;
+  if (!showsCancelButton && showsConfirmButton) {
+    confirmText = confirmText || getLabel("btnClose").text;
+  } else if (showsConfirmButton) {
+    confirmText = confirmText || getLabel("btnCon").text;
+    cancelText = cancelText || getLabel("btnCan").text;
+  }
   return /* @__PURE__ */ jsxs(
     Box,
     {
@@ -1918,12 +1932,12 @@ const Confirm = ({
                 children: additionalButtonsOnRight
               }
             ),
-            !hideConfirmButton && /* @__PURE__ */ jsx(
+            showsConfirmButton && /* @__PURE__ */ jsx(
               SimpleButton,
               {
                 onClick: onConfirm,
                 title: confirmText,
-                variant: confirmButtonVariant,
+                variant: !showsCancelButton && showsConfirmButton ? "outline" : confirmButtonVariant,
                 disabled: isLoading ?? disabled,
                 isLoading,
                 className: "confirm__confirmButton",
@@ -1932,7 +1946,7 @@ const Confirm = ({
                 children: confirmText
               }
             ),
-            onCancel && !hideCancelButton && /* @__PURE__ */ jsx(
+            showsCancelButton && /* @__PURE__ */ jsx(
               SimpleButton,
               {
                 onClick: onCancel,
@@ -4120,7 +4134,7 @@ const getMaskForDateFormat = () => {
   return "99/99/9999";
 };
 class DateInputController {
-  constructor(actualId) {
+  constructor() {
     __publicField$c(this, "props", {});
     __publicField$c(this, "state", {});
     __publicField$c(this, "_ref", null);
@@ -4128,22 +4142,26 @@ class DateInputController {
     __publicField$c(this, "inputValue", "");
     __publicField$c(this, "value", null);
     __publicField$c(this, "previousValue", "");
-    this.props.id = uniqueId$4(actualId ?? "date-input");
+    this.props.id = uniqueId$4("date-input");
     makeAutoObservable(this);
   }
   clear() {
-    this.setValueFromString("");
-    this.focus();
+    if (!this.state.disabled) {
+      this.setValueFromString("");
+      this.focus();
+    }
   }
   focus() {
-    const input = this._ref?.querySelector("input");
-    if (input) {
-      input.focus();
-      setTimeout(() => {
-        window.requestAnimationFrame(() => {
-          input.setSelectionRange(0, input.value.length);
-        });
-      }, 0);
+    if (!this.state.disabled) {
+      const input = this._ref?.querySelector("input");
+      if (input) {
+        input.focus();
+        setTimeout(() => {
+          window.requestAnimationFrame(() => {
+            input.setSelectionRange(0, input.value.length);
+          });
+        }, 0);
+      }
     }
   }
   ref(el) {
@@ -4158,13 +4176,15 @@ class DateInputController {
     );
   }
   onBlur(ev) {
-    if (!this.isInsidePicker(ev.relatedTarget)) {
-      if (this.error) {
-        this.inputValue = "";
-        this.value = null;
-        this.error = false;
+    if (!this.state.disabled) {
+      if (!this.isInsidePicker(ev.relatedTarget)) {
+        if (this.error) {
+          this.inputValue = "";
+          this.value = null;
+          this.error = false;
+        }
+        this.props.onBlur?.(this.inputValue, ev);
       }
-      this.props.onBlur?.(this.inputValue, ev);
     }
   }
   onInputChange(ev) {
@@ -4174,76 +4194,82 @@ class DateInputController {
     this.setValue(value);
   }
   openCalendar(ev) {
-    const tooltip = ApiaUtil.instance.tooltips.open({
-      attachToElement() {
-        return ev.target.closest("button");
-      },
-      attachToElementAnchorPoint: "center",
-      closeOnClick: false,
-      closeOnClickOut: true,
-      closeOnEscape: true,
-      closeOnMouseLeaveTooltip: false,
-      closeOnMouseLeaveAttachedElement: false,
-      closeOnScrollOut: true,
-      children: /* @__PURE__ */ jsx("div", { id: this.calendarElementId, children: /* @__PURE__ */ jsx(
-        CalModal,
-        {
-          calValue: this.value || /* @__PURE__ */ new Date(),
-          locale: DEFAULT_LOCALE,
-          handleClickDay: (date) => {
-            tooltip.close();
-            this.onCalendarSelect(date);
-            this.focus();
+    if (!this.state.disabled) {
+      const tooltip = ApiaUtil.instance.tooltips.open({
+        attachToElement() {
+          return ev.target.closest("button");
+        },
+        attachToElementAnchorPoint: "center",
+        closeOnClick: false,
+        closeOnClickOut: true,
+        closeOnEscape: true,
+        closeOnMouseLeaveTooltip: false,
+        closeOnMouseLeaveAttachedElement: false,
+        closeOnScrollOut: true,
+        children: /* @__PURE__ */ jsx("div", { id: this.calendarElementId, children: /* @__PURE__ */ jsx(
+          CalModal,
+          {
+            calValue: this.value || /* @__PURE__ */ new Date(),
+            locale: DEFAULT_LOCALE,
+            handleClickDay: (date) => {
+              tooltip.close();
+              this.onCalendarSelect(date);
+              this.focus();
+            }
           }
+        ) }),
+        initialFocusGetter(el) {
+          return el.querySelector(`.react-calendar__tile--active`);
+        },
+        minSize: { width: 350, height: 310 },
+        onClose: () => {
+          window.requestAnimationFrame(() => {
+            if (!this.isInsidePicker(document.activeElement)) {
+              this.props.onBlur?.(this.inputValue);
+            }
+          });
         }
-      ) }),
-      initialFocusGetter(el) {
-        return el.querySelector(`.react-calendar__tile--active`);
-      },
-      minSize: { width: 350, height: 310 },
-      onClose: () => {
-        window.requestAnimationFrame(() => {
-          if (!this.isInsidePicker(document.activeElement)) {
-            this.props.onBlur?.(this.inputValue);
-          }
-        });
-      }
-    });
+      });
+    }
   }
   setValueFromString(str, fire = true) {
-    if (str === "" || str.replaceAll("_", "9") === getMaskForDateFormat()) {
-      this.inputValue = "";
-      this.setValue(null, fire);
-    } else if (str !== this.inputValue) {
-      const hasPlaceHolder = str.match(/_/);
-      if (!hasPlaceHolder) {
-        const value = dayjs(str, dateFormat);
-        const formattedDate = value.format(dateFormat);
-        if (value.isValid() && formattedDate === str) {
-          this.setValue(value.toDate(), fire);
+    if (!this.state.disabled) {
+      if (str === "" || str.replaceAll("_", "9") === getMaskForDateFormat()) {
+        this.inputValue = "";
+        this.setValue(null, fire);
+      } else if (str !== this.inputValue) {
+        const hasPlaceHolder = str.match(/_/);
+        if (!hasPlaceHolder) {
+          const value = dayjs(str, dateFormat);
+          const formattedDate = value.format(dateFormat);
+          if (value.isValid() && formattedDate === str) {
+            this.setValue(value.toDate(), fire);
+          } else {
+            this.inputValue = str;
+            this.props.onError?.(getLabel("msgInvalidDate").text);
+            this.error = true;
+          }
         } else {
           this.inputValue = str;
-          this.props.onError?.(getLabel("msgInvalidDate").text);
-          this.error = true;
         }
-      } else {
-        this.inputValue = str;
       }
     }
   }
   async setValue(date, fire = true) {
-    this.error = false;
-    if (date !== this.value) {
-      const dateValue = dayjs(date);
-      const newValue = dateValue.isValid() ? dateValue.format(dateFormat) : "";
-      const res = fire ? await this.props.onChange?.(newValue) : null;
-      this.inputValue = newValue || "";
-      if (typeof res !== "string") {
-        this.value = date;
-      } else {
-        this.error = true;
-        this.value = null;
-        this.props.onError?.(res);
+    if (!this.state.disabled) {
+      this.error = false;
+      if (date !== this.value) {
+        const dateValue = dayjs(date);
+        const newValue = dateValue.isValid() ? dateValue.format(dateFormat) : "";
+        const res = fire ? await this.props.onChange?.(newValue) : null;
+        this.inputValue = newValue || "";
+        if (typeof res !== "string") {
+          this.value = date;
+        } else {
+          this.error = true;
+          this.value = null;
+          this.props.onError?.(res);
+        }
       }
     }
   }
@@ -4273,12 +4299,10 @@ const DateInput = observer(
     onChange,
     onError,
     readonly,
-    value: outerValue
+    value: outerValue,
+    props
   }) => {
-    const controller = useMemo(
-      () => new DateInputController(outerId),
-      [outerId]
-    );
+    const controller = useMemo(() => new DateInputController(), []);
     controller.render({
       className,
       disabled,
@@ -4288,7 +4312,8 @@ const DateInput = observer(
       onChange,
       onError,
       readonly,
-      value: outerValue
+      value: outerValue,
+      props
     });
     return /* @__PURE__ */ jsx(
       Box,
@@ -4301,7 +4326,7 @@ const DateInput = observer(
         children: /* @__PURE__ */ jsx(
           IconInput,
           {
-            additionalButtons: controller.inputValue && getMaskForDateFormat().replaceAll("9", DEFAULT_MASK_PLACEHOLDER) !== controller.inputValue ? /* @__PURE__ */ jsx(
+            additionalButtons: controller.inputValue && getMaskForDateFormat().replaceAll("9", DEFAULT_MASK_PLACEHOLDER) !== controller.inputValue && !disabled ? /* @__PURE__ */ jsx(
               Close,
               {
                 as: "button",
@@ -4319,8 +4344,7 @@ const DateInput = observer(
               disabled,
               onChange: controller.onInputChange.bind(controller),
               value: controller.inputValue,
-              id: outerId,
-              name: outerId
+              ...props
             },
             mask: getMaskForDateFormat(),
             maskPlaceholder: DEFAULT_MASK_PLACEHOLDER,
@@ -4507,9 +4531,29 @@ const NumberInput = React__default.forwardRef(
 const RequiredMark = ({
   isFormReadonly = false,
   isRequired = false,
-  isReadonly = false
+  isReadonly = false,
+  sx,
+  style,
+  ...rest
 }) => {
-  return isRequired && !isReadonly && !isFormReadonly ? /* @__PURE__ */ jsx("span", { className: "requiredMark", title: getLabel("msgReqField").text, children: "*" }) : null;
+  const mergedSx = {
+    color: "palette.error.main",
+    fontWeight: "bold",
+    ...sx ?? style ?? {}
+  };
+  if (!isRequired || isReadonly || isFormReadonly)
+    return null;
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      as: "span",
+      sx: mergedSx,
+      className: "requiredMark",
+      title: getLabel("msgReqField").text,
+      ...rest,
+      children: "*"
+    }
+  );
 };
 
 const getFieldErrorStyles = (isValid) => {
@@ -7528,7 +7572,8 @@ const FileCard = forwardRef(
     handleClose,
     onDoubleClick,
     onClick,
-    onDropFiles
+    onDropFiles,
+    previewProps
   }, ref) => {
     const [isDragOver, setIsDragOver] = useState(false);
     return /* @__PURE__ */ createElement(
@@ -7570,32 +7615,35 @@ const FileCard = forwardRef(
           }
         }
       },
-      /* @__PURE__ */ jsxs(Box, { className: "fileCard__content", children: [
-        /* @__PURE__ */ jsx(FileIcon, { docName: name, iconSize: iconsSize }),
-        /* @__PURE__ */ jsx(Box, { as: "span", className: "fileCard__name", children: name })
-      ] }),
-      /* @__PURE__ */ jsx(Box, { className: "fileCard__additionalButtons", children: additionalButtons?.map((c) => {
-        return /* @__PURE__ */ jsx(
-          IconButton,
+      /* @__PURE__ */ jsxs(Box, { className: "fileCard__container", children: [
+        /* @__PURE__ */ jsxs(Box, { className: "fileCard__content", children: [
+          /* @__PURE__ */ jsx(FileIcon, { docName: name, iconSize: iconsSize }),
+          /* @__PURE__ */ jsx(Box, { as: "span", className: "fileCard__name", children: name })
+        ] }),
+        /* @__PURE__ */ jsx(Box, { className: "fileCard__additionalButtons", children: additionalButtons?.map((c) => {
+          return /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              iconSize: "Md",
+              ...c,
+              className: `fileCard__additionalButton ${c.className ?? ""}`
+            }
+          );
+        }) }),
+        handleClose && /* @__PURE__ */ jsx(
+          Close,
           {
-            iconSize: "Md",
-            ...c,
-            className: `fileCard__additionalButton ${c.className ?? ""}`
-          }
-        );
-      }) }),
-      handleClose && /* @__PURE__ */ jsx(
-        Close,
-        {
-          type: "button",
-          className: "fileCard__delete",
-          onClick: (e) => {
-            e.stopPropagation();
-            e.preventDefault();
-            handleClose(name);
+            type: "button",
+            className: "fileCard__delete",
+            onClick: (e) => {
+              e.stopPropagation();
+              e.preventDefault();
+              handleClose(name);
+            }
           }
-        }
-      )
+        )
+      ] }),
+      previewProps?.hasPreview && previewProps?.previewUrl && /* @__PURE__ */ jsx(Box, { className: "fileCard__preview", children: /* @__PURE__ */ jsx("img", { src: previewProps.previewUrl, alt: name }) })
     );
   }
 );
@@ -7609,7 +7657,8 @@ const Dropzone = ({
   draggingLabel = getLabel("lblDroping").text,
   onClick,
   onChange,
-  handleInfoButton
+  handleInfoButton,
+  infoButtonProps
 }) => {
   const innerSx = messageError ? { borderLeft: "2px solid", borderColor: "danger" } : {};
   const fileInputRef = useRef(null);
@@ -7683,6 +7732,7 @@ const Dropzone = ({
         handleInfoButton && /* @__PURE__ */ jsx(
           IconButton,
           {
+            ...infoButtonProps,
             className: "info",
             iconSize: "Sm",
             icon: "Info",
@@ -8036,7 +8086,7 @@ const NoMemoPagination = ({
             {
               disabled: isPerforming,
               className: "pagination__deleteFiltersButton",
-              "data-id": "delete-filters",
+              "data-test-id": "btn-clear-filters",
               onClick: onDeleteFilters,
               children: [
                 breakPoint > 3 && /* @__PURE__ */ jsx(Box, { as: "span", className: "pagination__deleteLabels", children: definedLabels.deleteFilters }),
@@ -8062,7 +8112,8 @@ const NoMemoPagination = ({
               disabled: disabled || isLoading,
               variant: "icon-primary",
               isLoading: isPerforming,
-              className: "pagiantion__refreshIcon"
+              className: "pagiantion__refreshIcon",
+              "data-test-id": "btn-refresh"
             }
           )
         ] }) })
@@ -8306,7 +8357,8 @@ const TagReplacers = {
   label: Label$1,
   input: Input,
   p: Paragraph,
-  select: Select
+  select: Select,
+  table: (props) => /* @__PURE__ */ jsx(Box, { as: "table", ...props })
 };
 
 const contextMethods = {};
@@ -9104,10 +9156,15 @@ const DefaultTabsLabelRenderer = observer(
     );
     const handleMouseDown = React__default.useCallback(
       (ev) => {
+        if (ev.shiftKey && ev.button === 0) {
+          tab.controller.openAll();
+          return;
+        }
         if (ev.button === 1) {
           tab.close();
-        } else if (ev.button === 0)
+        } else if (ev.button === 0) {
           tab.open();
+        }
       },
       [tab]
     );
@@ -9467,6 +9524,13 @@ class TabsController {
       }
     }
   }
+  async openAll() {
+    for (const tab of this.tabsList) {
+      if (!tab.state.isFixed) {
+        tab.open(false);
+      }
+    }
+  }
   closeOpenTab(force) {
     const openTab = this.activeTab;
     openTab?.close(force);
@@ -10278,7 +10342,7 @@ class Parameter {
     this.state.values = this.getValues().filter((x) => !!x && x !== value);
   }
   asPayloadElement() {
-    return this.state.type === "label" ? null : toJS(this.state.values);
+    return this.state.type === "label" ? null : toJS(this.state.values.filter((x) => !!x));
   }
   includes(value) {
     return this.state.values.includes(value);
@@ -10328,7 +10392,8 @@ const ParameterRender = observer(
                 onChange: (ev) => {
                   parameter.setValue(ev.target.value, index);
                 },
-                value: parameter.state.values[index] ?? ""
+                value: parameter.state.values[index] ?? "",
+                className: parameter.state.validationError ? "requiredFilter__Border" : ""
               }
             ),
             error
@@ -10364,7 +10429,8 @@ const ParameterRender = observer(
                     index
                   );
                 },
-                value: parameter.state.values.join("")
+                value: parameter.state.values.join(""),
+                className: parameter.state.validationError ? "requiredFilter__Border" : ""
               }
             ),
             error
@@ -10387,7 +10453,8 @@ const ParameterRender = observer(
                 onChange: (ev) => {
                   parameter.setValue(String(ev.target.checked), index);
                 },
-                checked: parameter.state.values[index] === "true"
+                checked: parameter.state.values[index] === "true",
+                className: parameter.state.validationError ? "requiredFilter__Border" : ""
               }
             ),
             error
@@ -10411,6 +10478,7 @@ const ParameterRender = observer(
                   parameter.setValue(ev.target.value, index);
                 },
                 value: parameter.state.values[index],
+                className: parameter.state.validationError ? "requiredFilter__Border" : "",
                 children: arrayOrArray(parameter.state.possibleValues).map((c) => /* @__PURE__ */ jsx("option", { value: c.value, children: c.text }))
               }
             ),