@apia/components 4.0.31 → 4.0.33

package/dist/index.d.ts

@@ -816,14 +816,14 @@ type AutocompleteProps = {
      * Si este flag es true, la búsqueda se realiza con .toLowerCase() en el valor y en la cadena de búsqueda.
      */
     caseInsensitive?: boolean;
+    icon?: TIconName;
     onChange?: (value: string, controller: AutocompleteController) => void | Promise<boolean>;
     /**
-     * Si se pasa una función de búsqueda, cuando el usuario busque se llamará a esta función para determinar qué opciones deberán mostrarse. Las opciones devueltas deberán tener filtered !== true para mostrarse.
+     * Si se pasa una función de búsqueda, cuando el usuario busque se llamará a esta función para determinar qué opciones deberán mostrarse.
      *
      * La función de búsqueda será llamada mediante un debounce con tiempo = state.searchDebounce (ms).
      *
      * Si no se pasa función de búsqueda, la comparación se realizará contra this.state.options, siguiendo el algoritmo descrito en AutocompleteOption.
-     *
      */
     onSearch?: (str: string, controller: AutocompleteController) => Promise<AutocompleteOption[]>;
     options: AutocompleteOption[];

package/dist/index.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import React__default, { createContext, useContext, useEffect, useMemo, useState, useCallback, useRef, forwardRef, Fragment as Fragment$1, useDeferredValue, lazy, Suspense, useTransition, Children, memo, isValidElement, cloneElement, createRef } from 'react';
 import parse, { domToReact, Element } from 'html-react-parser';
 import { Spinner as Spinner$1, Box as Box$1 } from 'theme-ui';
-import { uniqueId as uniqueId$3, debounce, cloneDeep, isFunction } from 'lodash-es';
+import { uniqueId as uniqueId$3, cloneDeep, isFunction } from 'lodash-es';
 import { Box, getVariant, useBreakpointIndex, Close, responsive, spacing, Heading, Link, Button, Spinner, createElement, Select, Input, Flex, IconButton as IconButton$1, Image, injectStyles, Progress, Label as Label$1, Paragraph, Container, Form, focusOutline, makeStyledComponent, useThemeUI, Grid, Textarea } from '@apia/theme';
 import { BarLoader } from 'react-spinners';
 import uniqueId$2 from 'lodash-es/uniqueId';
@@ -3146,7 +3146,7 @@ var __privateSet$5 = (obj, member, value, setter) => {
   member.set(obj, value);
   return value;
 };
-var _timeout, _tooltipTimeout, _unsuscribe, _tooltip;
+var _timeout$1, _tooltipTimeout, _unsuscribe, _tooltip;
 let y$1 = 0, x$1 = 0;
 document?.addEventListener("mousemove", (ev) => {
   x$1 = ev.clientX;
@@ -3155,7 +3155,7 @@ document?.addEventListener("mousemove", (ev) => {
 class AutomaticTooltip {
   constructor(tooltip = null, handler) {
     this.handler = handler;
-    __privateAdd$8(this, _timeout, 500);
+    __privateAdd$8(this, _timeout$1, 500);
     __privateAdd$8(this, _tooltipTimeout, 0);
     __privateAdd$8(this, _unsuscribe, null);
     __publicField$l(this, "ref", (el) => {
@@ -3172,7 +3172,7 @@ class AutomaticTooltip {
               ...__privateGet$7(this, _tooltip),
               anchorPoint: { left: x$1 + 3, top: y$1 + 3 }
             });
-        }, __privateGet$7(this, _timeout)));
+        }, __privateGet$7(this, _timeout$1)));
       };
       const reset = () => {
         clearTimeout(__privateGet$7(this, _tooltipTimeout));
@@ -3195,11 +3195,11 @@ class AutomaticTooltip {
     });
     __privateSet$5(this, _tooltip, tooltip);
     if (tooltip?.timeout !== void 0) {
-      __privateSet$5(this, _timeout, tooltip?.timeout);
+      __privateSet$5(this, _timeout$1, tooltip?.timeout);
     }
   }
 }
-_timeout = new WeakMap();
+_timeout$1 = new WeakMap();
 _tooltipTimeout = new WeakMap();
 _unsuscribe = new WeakMap();
 _tooltip = new WeakMap();
@@ -4008,7 +4008,7 @@ var __privateSet$2 = (obj, member, value, setter) => {
   member.set(obj, value);
   return value;
 };
-var _actualSearch, _makeSearch, _search;
+var _actualSearch, _timeout;
 class AutocompleteController {
   constructor(properties) {
     __publicField$f(this, "state", {
@@ -4022,22 +4022,28 @@ class AutocompleteController {
       value: "",
       width: 55
     });
-    __privateAdd$4(this, _actualSearch, (str) => {
-      this.state.options.forEach((c) => {
-        if (this.state.caseInsensitive) {
-          c.filtered = (c.searchLabel ?? c.label?.toString?.() ?? c.value).toLowerCase().indexOf(str.toLowerCase()) === -1;
-        } else {
-          c.filtered = (c.searchLabel ?? c.label?.toString?.() ?? c.value)?.indexOf(str) === -1;
-        }
-        if (this.getOptionByValue(this.state.focusedValue)?.filtered) {
-          this.state.focusedValue = this.state.options.find((c2) => !c2.filtered)?.value || null;
-        }
-      });
-    });
-    __privateAdd$4(this, _makeSearch, () => {
-      return debounce(__privateGet$3(this, _actualSearch), this.state.searchDebounce);
+    __privateAdd$4(this, _actualSearch, async (str) => {
+      if (this.state.onSearch) {
+        if (str === "")
+          this.state.value = "";
+        const newOptions = await this.state.onSearch(str, this);
+        this.state.options = newOptions;
+      } else {
+        this.state.options.forEach((c) => {
+          if (this.state.caseInsensitive) {
+            c.filtered = (c.searchLabel ?? c.label?.toString?.() ?? c.value).toLowerCase().indexOf(str.toLowerCase()) === -1;
+          } else {
+            c.filtered = (c.searchLabel ?? c.label?.toString?.() ?? c.value)?.indexOf(
+              str
+            ) === -1;
+          }
+          if (this.getOptionByValue(this.state.focusedValue)?.filtered) {
+            this.state.focusedValue = this.state.options.find((c2) => !c2.filtered)?.value || null;
+          }
+        });
+      }
     });
-    __privateAdd$4(this, _search, __privateGet$3(this, _makeSearch).call(this));
+    __privateAdd$4(this, _timeout, 0);
     __publicField$f(this, "tooltipRef", null);
     Object.assign(this.state, properties);
     if (properties.value) {
@@ -4050,12 +4056,6 @@ class AutocompleteController {
       getAutocompleteBox: false,
       getOptionByValue: false
     });
-    reaction(
-      () => this.state.searchDebounce,
-      () => {
-        __privateSet$2(this, _search, __privateGet$3(this, _makeSearch).call(this));
-      }
-    );
     reaction(
       () => this.state.focusedValue,
       () => {
@@ -4083,7 +4083,8 @@ class AutocompleteController {
   close(selectValue = true) {
     this.tooltipRef?.close();
     this.tooltipRef = null;
-    __privateGet$3(this, _actualSearch).call(this, "");
+    if (!this.state.showValue)
+      __privateGet$3(this, _actualSearch).call(this, "");
     if (selectValue) {
       let currentValue = this.state.options.find(
         (c) => c.value === this.state.focusedValue
@@ -4210,7 +4211,10 @@ class AutocompleteController {
       return;
     }
     this.state.showValue = str;
-    __privateGet$3(this, _search).call(this, str);
+    clearTimeout(__privateGet$3(this, _timeout));
+    __privateSet$2(this, _timeout, setTimeout(() => {
+      __privateGet$3(this, _actualSearch).call(this, str);
+    }, 100));
   }
   selectFocused() {
     this.close();
@@ -4239,8 +4243,7 @@ class AutocompleteController {
   }
 }
 _actualSearch = new WeakMap();
-_makeSearch = new WeakMap();
-_search = new WeakMap();
+_timeout = new WeakMap();
 
 const SearchBox = observer((props) => {
   const handler = useAutocompleteContext();
@@ -4271,7 +4274,7 @@ const SearchBox = observer((props) => {
           ...props,
           ref: inputRef,
           className: `autocomplete__search ${handler.state.disabled ? "disabled" : ""} ${handler.state.readOnly ? "readOnly" : ""}`,
-          onChange: (ev) => {
+          onChange: async (ev) => {
             handler.search(ev.target.value);
           },
           onMouseDown: () => {
@@ -4293,7 +4296,7 @@ const SearchBox = observer((props) => {
           Icon$1,
           {
             title: "",
-            name: "ArrowDown",
+            name: handler.state?.icon || "ArrowDown",
             className: "autocomplete__downArrow"
           }
         )
@@ -4910,6 +4913,7 @@ const DateInput = React__default.forwardRef(
     const { deleteFiltersTimestamp, ...otherProps } = props;
     const hasBlured = useRef(false);
     const [stateError, setError] = React__default.useState(error ?? null);
+    const [isFocused, setIsFocused] = React__default.useState(false);
     const lastEmittedValue = React__default.useRef(outerValue ?? "");
     useUpdateEffect$1(() => {
       setInputValue(outerValue ?? "");
@@ -5044,6 +5048,9 @@ const DateInput = React__default.forwardRef(
         value: stateError ? "" : renderLabel ? renderLabel(inputValue) : inputValue,
         ref,
         onChange: (ev) => {
+          if (props.readOnly) {
+            return;
+          }
           setInputValue(ev.target.value);
           if (getMaskForDateFormat().replaceAll("9", DEFAULT_MASK_PLACEHOLDER) !== ev.target.value && ev.target.value !== "") {
             setError(null);
@@ -5053,6 +5060,7 @@ const DateInput = React__default.forwardRef(
           }
         },
         onBlur: (ev) => {
+          setIsFocused(false);
           if (!(props.readOnly || getCustomMask || document.querySelector(".overlay.screenLock")))
             setCalendarValue(ev.target.value, false, true);
           if (hasBlured.current) {
@@ -5061,6 +5069,9 @@ const DateInput = React__default.forwardRef(
             handleBlur(ev);
           }
         },
+        onFocus: () => {
+          setIsFocused(true);
+        },
         onKeyDown: (ev) => {
           if (ev.key === "Enter")
             setCalendarValue(inputValue);
@@ -5088,25 +5099,38 @@ const DateInput = React__default.forwardRef(
       }),
       [outerButtonProps, props.disabled, props.readOnly]
     );
-    const additionalButtons = React__default.useMemo(
-      () => /* @__PURE__ */ jsx(
-        Close,
+    const additionalButtons = React__default.useMemo(() => {
+      const doDelete = (e) => {
+        e?.stopPropagation();
+        setCalendarValue("");
+        onDelete?.();
+        document.querySelector(`#DateInput${id} input`)?.focus();
+      };
+      return /* @__PURE__ */ jsx(
+        "span",
         {
-          className: "delete_date_button",
-          onClick: () => {
-            setCalendarValue("");
-            onDelete?.();
-            document.querySelector(
-              `#DateInput${id} input`
-            )?.focus();
+          role: "button",
+          tabIndex: 0,
+          onMouseDown: (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+          },
+          onClick: (e) => {
+            e.stopPropagation();
+            doDelete(e);
+          },
+          onKeyDown: (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              doDelete(e);
+            }
           },
-          title: getLabel("btnAiDelete").text,
           "aria-label": getLabel("btnAiDelete").text,
-          type: "button"
+          title: getLabel("btnAiDelete").text,
+          children: /* @__PURE__ */ jsx(Close, { type: "button", className: "delete_date_button" })
         }
-      ),
-      [id, onDelete, setCalendarValue]
-    );
+      );
+    }, [id, onDelete, setCalendarValue]);
     return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
       Box,
       {
@@ -5115,6 +5139,7 @@ const DateInput = React__default.forwardRef(
         id: `DateInput${id}`,
         ref: boxRef,
         onBlur: (e) => {
+          setIsFocused(false);
           if (hasBlured.current) {
             hasBlured.current = false;
           } else if (!document.querySelector(".overlay.screenLock")) {
@@ -5124,10 +5149,14 @@ const DateInput = React__default.forwardRef(
         children: /* @__PURE__ */ jsx(
           IconInput,
           {
-            additionalButtons: inputValue && inputValue !== getMaskForDateFormat().replaceAll(
-              "9",
-              DEFAULT_MASK_PLACEHOLDER
-            ) && !props.readOnly && !props.disabled ? additionalButtons : void 0,
+            additionalButtons: (
+              // mostrar sólo si el campo tiene valor, no está en modo placeholder,
+              // no es readOnly/disabled Y el input está enfocado
+              inputValue && inputValue !== getMaskForDateFormat().replaceAll(
+                "9",
+                DEFAULT_MASK_PLACEHOLDER
+              ) && !props.readOnly && !props.disabled && isFocused ? additionalButtons : void 0
+            ),
             buttonProps,
             className: `${stateError !== null ? "field__withError" : ""}`,
             icon: FaCalendarAlt,