bord-design-system 0.0.53 → 0.0.54

package/dist/components/BordFavoriteButton/BordFavoriteButton.d.ts

@@ -10,6 +10,10 @@ import './BordFavoriteButton.scss';
  * tiendas donde aplicar el favorito, cuya confirmación se emite vía
  * `onSaveStores`.
  *
+ * La apertura del popover es no controlada por defecto. Con `isPopoverOpen`
+ * el consumidor la controla, por ejemplo para abrirlo apenas se marca el
+ * favorito sin que el usuario haga click en la flecha.
+ *
  * El tamaño se controla con `size` (`sm` | `md` | `lg`), que resuelve alto,
  * padding, tipografía del label y tamaño de los iconos. Esos estilos se
  * declaran con especificidad cero, así que una clase de dimensión pasada por
@@ -20,6 +24,6 @@ import './BordFavoriteButton.scss';
  * chevron cuando hay tiendas para elegir. El `label` pasa a usarse como
  * nombre accesible, así que sigue siendo obligatorio en la práctica.
  */
-declare const BordFavoriteButton: ({ isFavorited, onToggleFavorite, stores, onSaveStores, isLoading, isLoadingStores, label, popoverInstructionText, selectAllLabel, saveLabel, popoverWidth, customClassName, variant, size, onPopoverOpenChange, onSelectAllToggle, disabled, removeActionLabel, selectStoresLabel, popoverAccessibleName, ...restProps }: IBordFavoriteButtonProps) => import("react/jsx-runtime").JSX.Element;
+declare const BordFavoriteButton: ({ isFavorited, onToggleFavorite, stores, onSaveStores, isLoading, isLoadingStores, label, popoverInstructionText, selectAllLabel, saveLabel, popoverWidth, customClassName, variant, size, onPopoverOpenChange, isPopoverOpen: controlledIsPopoverOpen, onSelectAllToggle, disabled, removeActionLabel, selectStoresLabel, popoverAccessibleName, ...restProps }: IBordFavoriteButtonProps) => import("react/jsx-runtime").JSX.Element;
 export default BordFavoriteButton;
 //# sourceMappingURL=BordFavoriteButton.d.ts.map

package/dist/components/BordFavoriteButton/BordFavoriteButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BordFavoriteButton.d.ts","sourceRoot":"","sources":["../../../src/components/BordFavoriteButton/BordFavoriteButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,wBAAwB,EAAsB,MAAM,4BAA4B,CAAC;AAI/F,OAAO,2BAA2B,CAAC;AA0BnC;;;;;;;;;;;;;;;;;;;GAmBG;AACH,QAAA,MAAM,kBAAkB,6TAsBrB,wBAAwB,4CAuL1B,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"BordFavoriteButton.d.ts","sourceRoot":"","sources":["../../../src/components/BordFavoriteButton/BordFavoriteButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,wBAAwB,EAAsB,MAAM,4BAA4B,CAAC;AAI/F,OAAO,2BAA2B,CAAC;AA0BnC;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,QAAA,MAAM,kBAAkB,qWAuBrB,wBAAwB,4CAyM1B,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/components/BordFavoriteButton/BordFavoriteButton.types.d.ts

@@ -60,8 +60,22 @@ export interface IBordFavoriteButtonProps extends Omit<HTMLAttributes<HTMLElemen
      * necesidad de `!important`.
      */
     size?: TBordFavoriteButtonSize;
-    /** Se invoca cada vez que cambia el estado interno de apertura del popover (por click en la flecha o al cerrarse). */
+    /**
+     * Se invoca cada vez que el usuario pide abrir o cerrar el popover (click en la flecha, Guardar,
+     * click afuera o Escape). En modo no controlado, también cuando el popover se cierra solo porque
+     * dejó de poder mostrarse.
+     */
     onPopoverOpenChange?: (isOpen: boolean) => void;
+    /**
+     * Controla la apertura del popover desde el consumidor. Si se omite, el botón maneja su propio
+     * estado (modo no controlado).
+     *
+     * En modo controlado el popover se muestra solo cuando este valor es `true` y además puede
+     * mostrarse (favorito marcado, al menos una tienda y botón habilitado); mientras no se cumplan
+     * esas condiciones queda en espera, sin notificar un cierre. Las interacciones del usuario no
+     * cambian la apertura por sí solas: se notifican por `onPopoverOpenChange` y el consumidor decide.
+     */
+    isPopoverOpen?: boolean;
     /**
      * Se invoca en cada click sobre la opción de seleccionar todas las tiendas, con el estado
      * resultante: `true` cuando el click las marca todas y `false` cuando las desmarca.

package/dist/components/BordFavoriteButton/BordFavoriteButton.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BordFavoriteButton.types.d.ts","sourceRoot":"","sources":["../../../src/components/BordFavoriteButton/BordFavoriteButton.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,MAAM,MAAM,oBAAoB,GAAG,MAAM,GAAG,MAAM,CAAC;AAEnD;;;;;GAKG;AACH,MAAM,MAAM,0BAA0B,GAAG,SAAS,GAAG,UAAU,CAAC;AAEhE;;;;;;GAMG;AACH,MAAM,MAAM,uBAAuB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEzD,MAAM,WAAW,kBAAkB;IACjC,EAAE,EAAE,oBAAoB,CAAC;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED;;;;;;;;;;;;;;GAcG;AACH,MAAM,WAAW,wBACf,SAAQ,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,GAAG,SAAS,GAAG,WAAW,CAAC;IAC/E,WAAW,EAAE,OAAO,CAAC;IACrB,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,MAAM,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAC9B,YAAY,CAAC,EAAE,CAAC,gBAAgB,EAAE,oBAAoB,EAAE,KAAK,IAAI,CAAC;IAClE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,8IAA8I;IAC9I,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yFAAyF;IACzF,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,mFAAmF;IACnF,OAAO,CAAC,EAAE,0BAA0B,CAAC;IACrC;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,uBAAuB,CAAC;IAC/B,sHAAsH;IACtH,mBAAmB,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAChD;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,CAAC,cAAc,EAAE,OAAO,KAAK,IAAI,CAAC;IACtD,iFAAiF;IACjF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0LAA0L;IAC1L,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,+GAA+G;IAC/G,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,4GAA4G;IAC5G,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAChC;AAED,MAAM,WAAW,+BAA+B;IAC9C,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;IACnC,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,kBAAkB,EAAE,CAAC;IAC7B,YAAY,CAAC,EAAE,CAAC,gBAAgB,EAAE,oBAAoB,EAAE,KAAK,IAAI,CAAC;IAClE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oGAAoG;IACpG,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,wDAAwD;IACxD,iBAAiB,CAAC,EAAE,CAAC,cAAc,EAAE,OAAO,KAAK,IAAI,CAAC;IACtD,eAAe,EAAE,MAAM,CAAC;IACxB,cAAc,EAAE,MAAM,CAAC;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,kHAAkH;IAClH,cAAc,EAAE,MAAM,CAAC;CACxB"}
+{"version":3,"file":"BordFavoriteButton.types.d.ts","sourceRoot":"","sources":["../../../src/components/BordFavoriteButton/BordFavoriteButton.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,MAAM,MAAM,oBAAoB,GAAG,MAAM,GAAG,MAAM,CAAC;AAEnD;;;;;GAKG;AACH,MAAM,MAAM,0BAA0B,GAAG,SAAS,GAAG,UAAU,CAAC;AAEhE;;;;;;GAMG;AACH,MAAM,MAAM,uBAAuB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEzD,MAAM,WAAW,kBAAkB;IACjC,EAAE,EAAE,oBAAoB,CAAC;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED;;;;;;;;;;;;;;GAcG;AACH,MAAM,WAAW,wBACf,SAAQ,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,GAAG,SAAS,GAAG,WAAW,CAAC;IAC/E,WAAW,EAAE,OAAO,CAAC;IACrB,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,MAAM,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAC9B,YAAY,CAAC,EAAE,CAAC,gBAAgB,EAAE,oBAAoB,EAAE,KAAK,IAAI,CAAC;IAClE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,8IAA8I;IAC9I,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yFAAyF;IACzF,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,mFAAmF;IACnF,OAAO,CAAC,EAAE,0BAA0B,CAAC;IACrC;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,uBAAuB,CAAC;IAC/B;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAChD;;;;;;;;OAQG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,CAAC,cAAc,EAAE,OAAO,KAAK,IAAI,CAAC;IACtD,iFAAiF;IACjF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0LAA0L;IAC1L,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,+GAA+G;IAC/G,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,4GAA4G;IAC5G,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAChC;AAED,MAAM,WAAW,+BAA+B;IAC9C,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;IACnC,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,kBAAkB,EAAE,CAAC;IAC7B,YAAY,CAAC,EAAE,CAAC,gBAAgB,EAAE,oBAAoB,EAAE,KAAK,IAAI,CAAC;IAClE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oGAAoG;IACpG,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,wDAAwD;IACxD,iBAAiB,CAAC,EAAE,CAAC,cAAc,EAAE,OAAO,KAAK,IAAI,CAAC;IACtD,eAAe,EAAE,MAAM,CAAC;IACxB,cAAc,EAAE,MAAM,CAAC;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,kHAAkH;IAClH,cAAc,EAAE,MAAM,CAAC;CACxB"}

package/dist/index.d.ts

@@ -3218,8 +3218,22 @@ interface IBordFavoriteButtonProps extends Omit<HTMLAttributes<HTMLElement>, 'on
      * necesidad de `!important`.
      */
     size?: TBordFavoriteButtonSize;
-    /** Se invoca cada vez que cambia el estado interno de apertura del popover (por click en la flecha o al cerrarse). */
+    /**
+     * Se invoca cada vez que el usuario pide abrir o cerrar el popover (click en la flecha, Guardar,
+     * click afuera o Escape). En modo no controlado, también cuando el popover se cierra solo porque
+     * dejó de poder mostrarse.
+     */
     onPopoverOpenChange?: (isOpen: boolean) => void;
+    /**
+     * Controla la apertura del popover desde el consumidor. Si se omite, el botón maneja su propio
+     * estado (modo no controlado).
+     *
+     * En modo controlado el popover se muestra solo cuando este valor es `true` y además puede
+     * mostrarse (favorito marcado, al menos una tienda y botón habilitado); mientras no se cumplan
+     * esas condiciones queda en espera, sin notificar un cierre. Las interacciones del usuario no
+     * cambian la apertura por sí solas: se notifican por `onPopoverOpenChange` y el consumidor decide.
+     */
+    isPopoverOpen?: boolean;
     /**
      * Se invoca en cada click sobre la opción de seleccionar todas las tiendas, con el estado
      * resultante: `true` cuando el click las marca todas y `false` cuando las desmarca.
@@ -3246,6 +3260,10 @@ interface IBordFavoriteButtonProps extends Omit<HTMLAttributes<HTMLElement>, 'on
  * tiendas donde aplicar el favorito, cuya confirmación se emite vía
  * `onSaveStores`.
  *
+ * La apertura del popover es no controlada por defecto. Con `isPopoverOpen`
+ * el consumidor la controla, por ejemplo para abrirlo apenas se marca el
+ * favorito sin que el usuario haga click en la flecha.
+ *
  * El tamaño se controla con `size` (`sm` | `md` | `lg`), que resuelve alto,
  * padding, tipografía del label y tamaño de los iconos. Esos estilos se
  * declaran con especificidad cero, así que una clase de dimensión pasada por
@@ -3256,7 +3274,7 @@ interface IBordFavoriteButtonProps extends Omit<HTMLAttributes<HTMLElement>, 'on
  * chevron cuando hay tiendas para elegir. El `label` pasa a usarse como
  * nombre accesible, así que sigue siendo obligatorio en la práctica.
  */
-declare const BordFavoriteButton: ({ isFavorited, onToggleFavorite, stores, onSaveStores, isLoading, isLoadingStores, label, popoverInstructionText, selectAllLabel, saveLabel, popoverWidth, customClassName, variant, size, onPopoverOpenChange, onSelectAllToggle, disabled, removeActionLabel, selectStoresLabel, popoverAccessibleName, ...restProps }: IBordFavoriteButtonProps) => react_jsx_runtime.JSX.Element;
+declare const BordFavoriteButton: ({ isFavorited, onToggleFavorite, stores, onSaveStores, isLoading, isLoadingStores, label, popoverInstructionText, selectAllLabel, saveLabel, popoverWidth, customClassName, variant, size, onPopoverOpenChange, isPopoverOpen: controlledIsPopoverOpen, onSelectAllToggle, disabled, removeActionLabel, selectStoresLabel, popoverAccessibleName, ...restProps }: IBordFavoriteButtonProps) => react_jsx_runtime.JSX.Element;
 
 type TBordPopoverPositions = 'top' | 'bottom' | 'left' | 'right' | 'bottomLeft' | 'bottomRight' | 'topLeft';
 type TBordPopoverTrigger = 'click' | 'hover';

package/dist/index.esm.js

@@ -47114,6 +47114,10 @@ const buildClassName = (...classNames) => classNames.filter(Boolean).join(' ');
  * tiendas donde aplicar el favorito, cuya confirmación se emite vía
  * `onSaveStores`.
  *
+ * La apertura del popover es no controlada por defecto. Con `isPopoverOpen`
+ * el consumidor la controla, por ejemplo para abrirlo apenas se marca el
+ * favorito sin que el usuario haga click en la flecha.
+ *
  * El tamaño se controla con `size` (`sm` | `md` | `lg`), que resuelve alto,
  * padding, tipografía del label y tamaño de los iconos. Esos estilos se
  * declaran con especificidad cero, así que una clase de dimensión pasada por
@@ -47124,10 +47128,13 @@ const buildClassName = (...classNames) => classNames.filter(Boolean).join(' ');
  * chevron cuando hay tiendas para elegir. El `label` pasa a usarse como
  * nombre accesible, así que sigue siendo obligatorio en la práctica.
  */
-const BordFavoriteButton = ({ isFavorited, onToggleFavorite, stores = EMPTY_STORES, onSaveStores, isLoading = false, isLoadingStores = false, label = DEFAULT_LABEL, popoverInstructionText = DEFAULT_INSTRUCTION_TEXT, selectAllLabel = DEFAULT_SELECT_ALL_LABEL, saveLabel = DEFAULT_SAVE_LABEL, popoverWidth = DEFAULT_POPOVER_WIDTH, customClassName = '', variant = 'default', size = DEFAULT_SIZE, onPopoverOpenChange, onSelectAllToggle, disabled = false, removeActionLabel = DEFAULT_REMOVE_ACTION_LABEL, selectStoresLabel = DEFAULT_SELECT_STORES_LABEL, popoverAccessibleName = DEFAULT_POPOVER_ACCESSIBLE_NAME, ...restProps }) => {
-    const [isPopoverRequested, setIsPopoverRequested] = useState(false);
+const BordFavoriteButton = ({ isFavorited, onToggleFavorite, stores = EMPTY_STORES, onSaveStores, isLoading = false, isLoadingStores = false, label = DEFAULT_LABEL, popoverInstructionText = DEFAULT_INSTRUCTION_TEXT, selectAllLabel = DEFAULT_SELECT_ALL_LABEL, saveLabel = DEFAULT_SAVE_LABEL, popoverWidth = DEFAULT_POPOVER_WIDTH, customClassName = '', variant = 'default', size = DEFAULT_SIZE, onPopoverOpenChange, isPopoverOpen: controlledIsPopoverOpen, onSelectAllToggle, disabled = false, removeActionLabel = DEFAULT_REMOVE_ACTION_LABEL, selectStoresLabel = DEFAULT_SELECT_STORES_LABEL, popoverAccessibleName = DEFAULT_POPOVER_ACCESSIBLE_NAME, ...restProps }) => {
+    const [isPopoverRequestedInternally, setIsPopoverRequestedInternally] = useState(false);
     const containerRef = useRef(null);
     const popoverId = useId$1();
+    /** En modo controlado la intención de apertura la define el consumidor con `isPopoverOpen`. */
+    const isControlled = controlledIsPopoverOpen !== undefined;
+    const isPopoverRequested = isControlled ? controlledIsPopoverOpen : isPopoverRequestedInternally;
     const iconStroke = isFavorited ? bordColorTheme.primary.bgDefault : bordColorTheme.content.default;
     const pillStateClassName = isFavorited ? 'favorited' : 'notFavorited';
     const isIconOnly = variant === 'iconOnly';
@@ -47154,19 +47161,31 @@ const BordFavoriteButton = ({ isFavorited, onToggleFavorite, stores = EMPTY_STOR
      * `disabled`, con sus controles todavía operables.
      */
     const isPopoverOpen = isPopoverRequested && canShowPopover;
-    /** Registra la intención de apertura del popover y notifica al consumidor el cambio. */
+    /**
+     * Notifica al consumidor la intención de apertura del popover y, en modo no controlado, la
+     * registra en el estado interno. En modo controlado la apertura cambia solo cuando el consumidor
+     * actualiza `isPopoverOpen`.
+     */
     const setPopoverOpen = useCallback((nextIsOpen) => {
-        setIsPopoverRequested(nextIsOpen);
+        if (!isControlled)
+            setIsPopoverRequestedInternally(nextIsOpen);
         onPopoverOpenChange?.(nextIsOpen);
-    }, [onPopoverOpenChange]);
+    }, [isControlled, onPopoverOpenChange]);
     /** Cierra el popover de selección de tiendas, descartando el borrador. */
     const closePopover = () => setPopoverOpen(false);
     /** Alterna la visibilidad del popover sin afectar el estado de favorito. */
     const handleTogglePopover = () => setPopoverOpen(!isPopoverOpen);
-    /** Invoca el callback de favorito solo cuando no está cargando. */
+    /**
+     * Invoca el callback de favorito solo cuando no está cargando. Si el popover está abierto, lo
+     * cierra antes: el click en la estrella queda dentro del trigger, así que el cierre por click
+     * afuera no lo detecta, y el popover (en un portal) taparía el modal de confirmación que suele
+     * abrir el consumidor.
+     */
     const handleToggleFavorite = () => {
         if (isLoading)
             return;
+        if (isPopoverOpen)
+            closePopover();
         onToggleFavorite();
     };
     /**
@@ -47177,11 +47196,15 @@ const BordFavoriteButton = ({ isFavorited, onToggleFavorite, stores = EMPTY_STOR
      * hacia el consumidor, que es una side effect legítima, y limpiar
      * `isPopoverRequested` para que el popover no reaparezca solo si más tarde
      * vuelven a cumplirse las condiciones.
+     *
+     * No aplica en modo controlado: ahí la intención es del consumidor, que puede
+     * pedir la apertura antes de que las condiciones se cumplan (por ejemplo,
+     * mientras se guarda el favorito) y el popover debe esperar en vez de cerrarse.
      */
     useEffect(() => {
-        if (isPopoverRequested && !canShowPopover)
+        if (!isControlled && isPopoverRequested && !canShowPopover)
             setPopoverOpen(false);
-    }, [isPopoverRequested, canShowPopover, setPopoverOpen]);
+    }, [isControlled, isPopoverRequested, canShowPopover, setPopoverOpen]);
     const renderPill = () => {
         if (isLoading) {
             return (jsx("div", { className: buildClassName('bordFavoriteButtonSkeleton', 'animationLoader', variantClassName, sizeClassName, customClassName), ref: containerRef }));