bord-design-system 0.0.53 → 0.0.55
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/BordFavoriteButton/BordFavoriteButton.d.ts +5 -1
- package/dist/components/BordFavoriteButton/BordFavoriteButton.d.ts.map +1 -1
- package/dist/components/BordFavoriteButton/BordFavoriteButton.types.d.ts +15 -1
- package/dist/components/BordFavoriteButton/BordFavoriteButton.types.d.ts.map +1 -1
- package/dist/index.d.ts +20 -2
- package/dist/index.esm.js +32 -9
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +32 -9
- package/dist/index.js.map +1 -1
- package/dist/index.webpack.js +32 -9
- package/dist/index.webpack.js.map +1 -1
- package/package.json +1 -1
|
@@ -10,6 +10,10 @@ import './BordFavoriteButton.scss';
|
|
|
10
10
|
* tiendas donde aplicar el favorito, cuya confirmación se emite vía
|
|
11
11
|
* `onSaveStores`.
|
|
12
12
|
*
|
|
13
|
+
* La apertura del popover es no controlada por defecto. Con `isPopoverOpen`
|
|
14
|
+
* el consumidor la controla, por ejemplo para abrirlo apenas se marca el
|
|
15
|
+
* favorito sin que el usuario haga click en la flecha.
|
|
16
|
+
*
|
|
13
17
|
* El tamaño se controla con `size` (`sm` | `md` | `lg`), que resuelve alto,
|
|
14
18
|
* padding, tipografía del label y tamaño de los iconos. Esos estilos se
|
|
15
19
|
* declaran con especificidad cero, así que una clase de dimensión pasada por
|
|
@@ -20,6 +24,6 @@ import './BordFavoriteButton.scss';
|
|
|
20
24
|
* chevron cuando hay tiendas para elegir. El `label` pasa a usarse como
|
|
21
25
|
* nombre accesible, así que sigue siendo obligatorio en la práctica.
|
|
22
26
|
*/
|
|
23
|
-
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;
|
|
27
|
+
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;
|
|
24
28
|
export default BordFavoriteButton;
|
|
25
29
|
//# sourceMappingURL=BordFavoriteButton.d.ts.map
|
|
@@ -1 +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
|
|
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;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,QAAA,MAAM,kBAAkB,qWAuBrB,wBAAwB,4CAyM1B,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
|
|
@@ -60,8 +60,22 @@ export interface IBordFavoriteButtonProps extends Omit<HTMLAttributes<HTMLElemen
|
|
|
60
60
|
* necesidad de `!important`.
|
|
61
61
|
*/
|
|
62
62
|
size?: TBordFavoriteButtonSize;
|
|
63
|
-
/**
|
|
63
|
+
/**
|
|
64
|
+
* Se invoca cada vez que el usuario pide abrir o cerrar el popover (click en la flecha, Guardar,
|
|
65
|
+
* click afuera o Escape). En modo no controlado, también cuando el popover se cierra solo porque
|
|
66
|
+
* dejó de poder mostrarse.
|
|
67
|
+
*/
|
|
64
68
|
onPopoverOpenChange?: (isOpen: boolean) => void;
|
|
69
|
+
/**
|
|
70
|
+
* Controla la apertura del popover desde el consumidor. Si se omite, el botón maneja su propio
|
|
71
|
+
* estado (modo no controlado).
|
|
72
|
+
*
|
|
73
|
+
* En modo controlado el popover se muestra solo cuando este valor es `true` y además puede
|
|
74
|
+
* mostrarse (favorito marcado, al menos una tienda y botón habilitado); mientras no se cumplan
|
|
75
|
+
* esas condiciones queda en espera, sin notificar un cierre. Las interacciones del usuario no
|
|
76
|
+
* cambian la apertura por sí solas: se notifican por `onPopoverOpenChange` y el consumidor decide.
|
|
77
|
+
*/
|
|
78
|
+
isPopoverOpen?: boolean;
|
|
65
79
|
/**
|
|
66
80
|
* Se invoca en cada click sobre la opción de seleccionar todas las tiendas, con el estado
|
|
67
81
|
* resultante: `true` cuando el click las marca todas y `false` cuando las desmarca.
|
|
@@ -1 +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
|
|
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;;;;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
CHANGED
|
@@ -3218,8 +3218,22 @@ interface IBordFavoriteButtonProps extends Omit<HTMLAttributes<HTMLElement>, 'on
|
|
|
3218
3218
|
* necesidad de `!important`.
|
|
3219
3219
|
*/
|
|
3220
3220
|
size?: TBordFavoriteButtonSize;
|
|
3221
|
-
/**
|
|
3221
|
+
/**
|
|
3222
|
+
* Se invoca cada vez que el usuario pide abrir o cerrar el popover (click en la flecha, Guardar,
|
|
3223
|
+
* click afuera o Escape). En modo no controlado, también cuando el popover se cierra solo porque
|
|
3224
|
+
* dejó de poder mostrarse.
|
|
3225
|
+
*/
|
|
3222
3226
|
onPopoverOpenChange?: (isOpen: boolean) => void;
|
|
3227
|
+
/**
|
|
3228
|
+
* Controla la apertura del popover desde el consumidor. Si se omite, el botón maneja su propio
|
|
3229
|
+
* estado (modo no controlado).
|
|
3230
|
+
*
|
|
3231
|
+
* En modo controlado el popover se muestra solo cuando este valor es `true` y además puede
|
|
3232
|
+
* mostrarse (favorito marcado, al menos una tienda y botón habilitado); mientras no se cumplan
|
|
3233
|
+
* esas condiciones queda en espera, sin notificar un cierre. Las interacciones del usuario no
|
|
3234
|
+
* cambian la apertura por sí solas: se notifican por `onPopoverOpenChange` y el consumidor decide.
|
|
3235
|
+
*/
|
|
3236
|
+
isPopoverOpen?: boolean;
|
|
3223
3237
|
/**
|
|
3224
3238
|
* Se invoca en cada click sobre la opción de seleccionar todas las tiendas, con el estado
|
|
3225
3239
|
* resultante: `true` cuando el click las marca todas y `false` cuando las desmarca.
|
|
@@ -3246,6 +3260,10 @@ interface IBordFavoriteButtonProps extends Omit<HTMLAttributes<HTMLElement>, 'on
|
|
|
3246
3260
|
* tiendas donde aplicar el favorito, cuya confirmación se emite vía
|
|
3247
3261
|
* `onSaveStores`.
|
|
3248
3262
|
*
|
|
3263
|
+
* La apertura del popover es no controlada por defecto. Con `isPopoverOpen`
|
|
3264
|
+
* el consumidor la controla, por ejemplo para abrirlo apenas se marca el
|
|
3265
|
+
* favorito sin que el usuario haga click en la flecha.
|
|
3266
|
+
*
|
|
3249
3267
|
* El tamaño se controla con `size` (`sm` | `md` | `lg`), que resuelve alto,
|
|
3250
3268
|
* padding, tipografía del label y tamaño de los iconos. Esos estilos se
|
|
3251
3269
|
* declaran con especificidad cero, así que una clase de dimensión pasada por
|
|
@@ -3256,7 +3274,7 @@ interface IBordFavoriteButtonProps extends Omit<HTMLAttributes<HTMLElement>, 'on
|
|
|
3256
3274
|
* chevron cuando hay tiendas para elegir. El `label` pasa a usarse como
|
|
3257
3275
|
* nombre accesible, así que sigue siendo obligatorio en la práctica.
|
|
3258
3276
|
*/
|
|
3259
|
-
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;
|
|
3277
|
+
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;
|
|
3260
3278
|
|
|
3261
3279
|
type TBordPopoverPositions = 'top' | 'bottom' | 'left' | 'right' | 'bottomLeft' | 'bottomRight' | 'topLeft';
|
|
3262
3280
|
type TBordPopoverTrigger = 'click' | 'hover';
|
package/dist/index.esm.js
CHANGED
|
@@ -13394,7 +13394,7 @@ styleInject(css_248z$1l);
|
|
|
13394
13394
|
|
|
13395
13395
|
const LabeledSwitch = ({ checked, disabled, onLabel, offLabel, className, toggleSwitch, restProps }) => (jsx("button", { type: "button", role: "switch", "aria-checked": checked, className: className, disabled: disabled, onClick: toggleSwitch, ...restProps, children: jsx("span", { className: "dsSwitchThumb", children: jsx("span", { className: "dsSwitchThumbLabel", children: checked ? onLabel : offLabel }) }) }));
|
|
13396
13396
|
|
|
13397
|
-
var css_248z$1k = ".dsSwitchVariant-segmented{align-items:center;background-color:transparent;border-color:var(--ds-c-stroke-interactive);border-radius:4rem;border-style:solid;border-width:1px;border-width:.1rem;box-sizing:border-box;cursor:pointer;display:flex;flex-shrink:0;height:2.6rem;padding:0;position:relative;transition-duration:.2s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);width:6.4rem}.dsSwitchVariant-segmented .dsSwitchThumb{background-color:var(--ds-c-primary-bg-default);border-radius:15998.4rem;height:2rem;left:0;margin-left:.2rem;position:absolute;transform:translateX(0);transition-duration:.2s;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);width:3rem;z-index:1}.dsSwitchVariant-segmented .dsSwitchSegmentedLabel{align-items:center;color:var(--ds-c-content-secondary);display:flex;flex:1 1 0%;font-size:1rem;height:100%;justify-content:center;line-height:1.3rem;text-align:center;transition-duration:.2s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);z-index:10}.dsSwitchVariant-segmented .dsSwitchSegmentedLabel.isActive{color:var(--ds-c-primary-fg-default)}.dsSwitchVariant-segmented.dsSwitchRootOn .dsSwitchThumb{transform:translateX(2.8rem)}.dsSwitchVariant-segmented:disabled{background-color:var(--ds-c-bool-disabled-bg);border-color:var(--ds-c-stroke-default);cursor:not-allowed}.dsSwitchVariant-segmented:disabled .dsSwitchThumb{background-color:var(--ds-c-bool-disabled-fg)}.dsSwitchVariant-segmented:disabled .dsSwitchSegmentedLabel
|
|
13397
|
+
var css_248z$1k = ".dsSwitchVariant-segmented{align-items:center;background-color:transparent;border-color:var(--ds-c-stroke-interactive);border-radius:4rem;border-style:solid;border-width:1px;border-width:.1rem;box-sizing:border-box;cursor:pointer;display:flex;flex-shrink:0;height:2.6rem;padding:0;position:relative;transition-duration:.2s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);width:6.4rem}.dsSwitchVariant-segmented .dsSwitchThumb{background-color:var(--ds-c-primary-bg-default);border-radius:15998.4rem;height:2rem;left:0;margin-left:.2rem;position:absolute;transform:translateX(0);transition-duration:.2s;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);width:3rem;z-index:1}.dsSwitchVariant-segmented .dsSwitchSegmentedLabel{align-items:center;color:var(--ds-c-content-secondary);display:flex;flex:1 1 0%;font-size:1rem;height:100%;justify-content:center;line-height:1.3rem;text-align:center;transition-duration:.2s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);z-index:10}.dsSwitchVariant-segmented .dsSwitchSegmentedLabel.isActive{color:var(--ds-c-primary-fg-default)}.dsSwitchVariant-segmented.dsSwitchRootOn .dsSwitchThumb{transform:translateX(2.8rem)}.dsSwitchVariant-segmented:disabled{background-color:var(--ds-c-bool-disabled-bg);border-color:var(--ds-c-stroke-default);cursor:not-allowed}.dsSwitchVariant-segmented:disabled .dsSwitchThumb{background-color:var(--ds-c-bool-disabled-fg)}.dsSwitchVariant-segmented:disabled .dsSwitchSegmentedLabel{color:var(--ds-c-content-secondary)}.dsSwitchVariant-segmented:disabled .dsSwitchSegmentedLabel.isActive{color:var(--ds-c-bool-disabled-bg)}.dsSwitchSkeleton.dsSwitchVariant-segmented{height:2.6rem;width:6.4rem}";
|
|
13398
13398
|
styleInject(css_248z$1k);
|
|
13399
13399
|
|
|
13400
13400
|
const SegmentedSwitch = ({ checked, disabled, onLabel, offLabel, className, toggleSwitch, restProps }) => (jsxs("button", { type: "button", role: "switch", "aria-checked": checked, className: className, disabled: disabled, onClick: toggleSwitch, ...restProps, children: [jsx("span", { className: "dsSwitchThumb" }), jsx("span", { className: `dsSwitchSegmentedLabel ${!checked ? 'isActive' : ''}`, children: offLabel }), jsx("span", { className: `dsSwitchSegmentedLabel ${checked ? 'isActive' : ''}`, children: onLabel })] }));
|
|
@@ -47114,6 +47114,10 @@ const buildClassName = (...classNames) => classNames.filter(Boolean).join(' ');
|
|
|
47114
47114
|
* tiendas donde aplicar el favorito, cuya confirmación se emite vía
|
|
47115
47115
|
* `onSaveStores`.
|
|
47116
47116
|
*
|
|
47117
|
+
* La apertura del popover es no controlada por defecto. Con `isPopoverOpen`
|
|
47118
|
+
* el consumidor la controla, por ejemplo para abrirlo apenas se marca el
|
|
47119
|
+
* favorito sin que el usuario haga click en la flecha.
|
|
47120
|
+
*
|
|
47117
47121
|
* El tamaño se controla con `size` (`sm` | `md` | `lg`), que resuelve alto,
|
|
47118
47122
|
* padding, tipografía del label y tamaño de los iconos. Esos estilos se
|
|
47119
47123
|
* declaran con especificidad cero, así que una clase de dimensión pasada por
|
|
@@ -47124,10 +47128,13 @@ const buildClassName = (...classNames) => classNames.filter(Boolean).join(' ');
|
|
|
47124
47128
|
* chevron cuando hay tiendas para elegir. El `label` pasa a usarse como
|
|
47125
47129
|
* nombre accesible, así que sigue siendo obligatorio en la práctica.
|
|
47126
47130
|
*/
|
|
47127
|
-
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 }) => {
|
|
47128
|
-
const [
|
|
47131
|
+
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 }) => {
|
|
47132
|
+
const [isPopoverRequestedInternally, setIsPopoverRequestedInternally] = useState(false);
|
|
47129
47133
|
const containerRef = useRef(null);
|
|
47130
47134
|
const popoverId = useId$1();
|
|
47135
|
+
/** En modo controlado la intención de apertura la define el consumidor con `isPopoverOpen`. */
|
|
47136
|
+
const isControlled = controlledIsPopoverOpen !== undefined;
|
|
47137
|
+
const isPopoverRequested = isControlled ? controlledIsPopoverOpen : isPopoverRequestedInternally;
|
|
47131
47138
|
const iconStroke = isFavorited ? bordColorTheme.primary.bgDefault : bordColorTheme.content.default;
|
|
47132
47139
|
const pillStateClassName = isFavorited ? 'favorited' : 'notFavorited';
|
|
47133
47140
|
const isIconOnly = variant === 'iconOnly';
|
|
@@ -47154,19 +47161,31 @@ const BordFavoriteButton = ({ isFavorited, onToggleFavorite, stores = EMPTY_STOR
|
|
|
47154
47161
|
* `disabled`, con sus controles todavía operables.
|
|
47155
47162
|
*/
|
|
47156
47163
|
const isPopoverOpen = isPopoverRequested && canShowPopover;
|
|
47157
|
-
/**
|
|
47164
|
+
/**
|
|
47165
|
+
* Notifica al consumidor la intención de apertura del popover y, en modo no controlado, la
|
|
47166
|
+
* registra en el estado interno. En modo controlado la apertura cambia solo cuando el consumidor
|
|
47167
|
+
* actualiza `isPopoverOpen`.
|
|
47168
|
+
*/
|
|
47158
47169
|
const setPopoverOpen = useCallback((nextIsOpen) => {
|
|
47159
|
-
|
|
47170
|
+
if (!isControlled)
|
|
47171
|
+
setIsPopoverRequestedInternally(nextIsOpen);
|
|
47160
47172
|
onPopoverOpenChange?.(nextIsOpen);
|
|
47161
|
-
}, [onPopoverOpenChange]);
|
|
47173
|
+
}, [isControlled, onPopoverOpenChange]);
|
|
47162
47174
|
/** Cierra el popover de selección de tiendas, descartando el borrador. */
|
|
47163
47175
|
const closePopover = () => setPopoverOpen(false);
|
|
47164
47176
|
/** Alterna la visibilidad del popover sin afectar el estado de favorito. */
|
|
47165
47177
|
const handleTogglePopover = () => setPopoverOpen(!isPopoverOpen);
|
|
47166
|
-
/**
|
|
47178
|
+
/**
|
|
47179
|
+
* Invoca el callback de favorito solo cuando no está cargando. Si el popover está abierto, lo
|
|
47180
|
+
* cierra antes: el click en la estrella queda dentro del trigger, así que el cierre por click
|
|
47181
|
+
* afuera no lo detecta, y el popover (en un portal) taparía el modal de confirmación que suele
|
|
47182
|
+
* abrir el consumidor.
|
|
47183
|
+
*/
|
|
47167
47184
|
const handleToggleFavorite = () => {
|
|
47168
47185
|
if (isLoading)
|
|
47169
47186
|
return;
|
|
47187
|
+
if (isPopoverOpen)
|
|
47188
|
+
closePopover();
|
|
47170
47189
|
onToggleFavorite();
|
|
47171
47190
|
};
|
|
47172
47191
|
/**
|
|
@@ -47177,11 +47196,15 @@ const BordFavoriteButton = ({ isFavorited, onToggleFavorite, stores = EMPTY_STOR
|
|
|
47177
47196
|
* hacia el consumidor, que es una side effect legítima, y limpiar
|
|
47178
47197
|
* `isPopoverRequested` para que el popover no reaparezca solo si más tarde
|
|
47179
47198
|
* vuelven a cumplirse las condiciones.
|
|
47199
|
+
*
|
|
47200
|
+
* No aplica en modo controlado: ahí la intención es del consumidor, que puede
|
|
47201
|
+
* pedir la apertura antes de que las condiciones se cumplan (por ejemplo,
|
|
47202
|
+
* mientras se guarda el favorito) y el popover debe esperar en vez de cerrarse.
|
|
47180
47203
|
*/
|
|
47181
47204
|
useEffect(() => {
|
|
47182
|
-
if (isPopoverRequested && !canShowPopover)
|
|
47205
|
+
if (!isControlled && isPopoverRequested && !canShowPopover)
|
|
47183
47206
|
setPopoverOpen(false);
|
|
47184
|
-
}, [isPopoverRequested, canShowPopover, setPopoverOpen]);
|
|
47207
|
+
}, [isControlled, isPopoverRequested, canShowPopover, setPopoverOpen]);
|
|
47185
47208
|
const renderPill = () => {
|
|
47186
47209
|
if (isLoading) {
|
|
47187
47210
|
return (jsx("div", { className: buildClassName('bordFavoriteButtonSkeleton', 'animationLoader', variantClassName, sizeClassName, customClassName), ref: containerRef }));
|