@apia/components 4.0.50 → 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>;
@@ -1911,13 +1912,14 @@ declare const FileCard: React$1.ForwardRefExoticComponent<{
     };
 } & 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

@@ -1892,8 +1892,8 @@ const Confirm = ({
   if (!showsCancelButton && showsConfirmButton) {
     confirmText = confirmText || getLabel("btnClose").text;
   } else if (showsConfirmButton) {
-    confirmText = getLabel("btnCon").text;
-    cancelText = getLabel("btnCan").text;
+    confirmText = confirmText || getLabel("btnCon").text;
+    cancelText = cancelText || getLabel("btnCan").text;
   }
   return /* @__PURE__ */ jsxs(
     Box,
@@ -4134,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);
@@ -4142,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) {
@@ -4172,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) {
@@ -4188,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);
+        }
       }
     }
   }
@@ -4290,10 +4302,7 @@ const DateInput = observer(
     value: outerValue,
     props
   }) => {
-    const controller = useMemo(
-      () => new DateInputController(outerId),
-      [outerId]
-    );
+    const controller = useMemo(() => new DateInputController(), []);
     controller.render({
       className,
       disabled,
@@ -4317,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",
@@ -4335,8 +4344,6 @@ const DateInput = observer(
               disabled,
               onChange: controller.onInputChange.bind(controller),
               value: controller.inputValue,
-              id: outerId,
-              name: outerId,
               ...props
             },
             mask: getMaskForDateFormat(),
@@ -7650,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);
@@ -7724,6 +7732,7 @@ const Dropzone = ({
         handleInfoButton && /* @__PURE__ */ jsx(
           IconButton,
           {
+            ...infoButtonProps,
             className: "info",
             iconSize: "Sm",
             icon: "Info",
@@ -9147,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]
     );
@@ -9510,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);
@@ -10321,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);
@@ -10371,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
@@ -10407,7 +10429,8 @@ const ParameterRender = observer(
                     index
                   );
                 },
-                value: parameter.state.values.join("")
+                value: parameter.state.values.join(""),
+                className: parameter.state.validationError ? "requiredFilter__Border" : ""
               }
             ),
             error
@@ -10430,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
@@ -10454,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 }))
               }
             ),