@apia/components 4.0.46 → 4.0.50

package/dist/index.d.ts

@@ -980,6 +980,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 +1067,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 +1125,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;
@@ -1184,6 +1188,7 @@ interface IAccordionItemButton {
     className?: string;
     disableSelection?: boolean;
     domButtonProps?: ISimpleButton;
+    isHtml?: boolean | boolean[];
     label: string;
     /**
      * Evento que se dispara cuando el usuario hace click en el checkbox o
@@ -1900,6 +1905,10 @@ 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, }: {

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 = getLabel("btnCon").text;
+    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,
@@ -4273,7 +4287,8 @@ const DateInput = observer(
     onChange,
     onError,
     readonly,
-    value: outerValue
+    value: outerValue,
+    props
   }) => {
     const controller = useMemo(
       () => new DateInputController(outerId),
@@ -4288,7 +4303,8 @@ const DateInput = observer(
       onChange,
       onError,
       readonly,
-      value: outerValue
+      value: outerValue,
+      props
     });
     return /* @__PURE__ */ jsx(
       Box,
@@ -4320,7 +4336,8 @@ const DateInput = observer(
               onChange: controller.onInputChange.bind(controller),
               value: controller.inputValue,
               id: outerId,
-              name: outerId
+              name: outerId,
+              ...props
             },
             mask: getMaskForDateFormat(),
             maskPlaceholder: DEFAULT_MASK_PLACEHOLDER,
@@ -4507,9 +4524,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) => {
@@ -4884,7 +4921,25 @@ const DefaultAccordionItemButton = (props) => {
               onChange: setIsChecked
             }
           ),
-          /* @__PURE__ */ jsx(Box, { as: "h3", className: "accordion__item__button__label", children: /* @__PURE__ */ jsx(AutoEllipsis, { overrideStyles: () => ({ textAlign: "left" }), children: props.label ?? props.title ?? props.ariaLabel }) })
+          (props.label ?? props.title ?? props.ariaLabel).split(" | ").map((content, i) => {
+            if (typeof props.isHtml === "boolean" && props.isHtml || Array.isArray(props.isHtml) && props.isHtml[i]) {
+              return /* @__PURE__ */ jsx(
+                Box,
+                {
+                  className: "accordion__item__button__html",
+                  dangerouslySetInnerHTML: {
+                    __html: String(content).replaceAll(
+                      /<TOK(\d+)/g,
+                      "&lt;TOK$1"
+                    )
+                  },
+                  as: "span"
+                }
+              );
+            } else {
+              return /* @__PURE__ */ jsx(Box, { as: "h3", className: "accordion__item__button__label", children: /* @__PURE__ */ jsx(AutoEllipsis, { overrideStyles: () => ({ textAlign: "left" }), children: content }) });
+            }
+          })
         ] }),
         /* @__PURE__ */ jsxs(Box, { className: "accordion__item__button__rightGroup", children: [
           props.rightButtons,
@@ -7510,7 +7565,8 @@ const FileCard = forwardRef(
     handleClose,
     onDoubleClick,
     onClick,
-    onDropFiles
+    onDropFiles,
+    previewProps
   }, ref) => {
     const [isDragOver, setIsDragOver] = useState(false);
     return /* @__PURE__ */ createElement(
@@ -7552,32 +7608,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 }) })
     );
   }
 );
@@ -8018,7 +8077,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 }),
@@ -8044,7 +8103,8 @@ const NoMemoPagination = ({
               disabled: disabled || isLoading,
               variant: "icon-primary",
               isLoading: isPerforming,
-              className: "pagiantion__refreshIcon"
+              className: "pagiantion__refreshIcon",
+              "data-test-id": "btn-refresh"
             }
           )
         ] }) })
@@ -8288,7 +8348,8 @@ const TagReplacers = {
   label: Label$1,
   input: Input,
   p: Paragraph,
-  select: Select
+  select: Select,
+  table: (props) => /* @__PURE__ */ jsx(Box, { as: "table", ...props })
 };
 
 const contextMethods = {};