@producteca/producteca-ui-kit 1.78.0 → 1.78.2

package/dist/components/patterns/pickChannelModal/pickChannelModal.d.ts

@@ -1,5 +1,5 @@
 import { PickChannelModalChannel, PickChannelModalProps } from './pickChannelModal.types';
 
 export declare const productecaStrategy: PickChannelModalChannel;
-export declare const PickChannelModal: ({ open, onClose, channels, generalEditionDescription, channelEditionDescription, showGeneralEdition, onSelectChannel, titleProps, generalEditionTitle, channelEditionTitle, }: PickChannelModalProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PickChannelModal: ({ open, onClose, channels, fitContent, generalEditionTitle, channelEditionTitle, generalEditionDescription, channelEditionDescription, showGeneralEdition, onSelectChannel, titleProps, }: PickChannelModalProps) => import("react/jsx-runtime").JSX.Element;
 export default PickChannelModal;

package/dist/components/patterns/pickChannelModal/pickChannelModal.examples.d.ts

@@ -2,4 +2,5 @@ import { PickChannelModalProps, PickChannelModalChannel } from './pickChannelMod
 
 export declare const sampleChannels: PickChannelModalChannel[];
 export declare const manyChannels: PickChannelModalChannel[];
+export declare const channelsWithDisabled: PickChannelModalChannel[];
 export declare const renderInteractive: (args: PickChannelModalProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/patterns/pickChannelModal/pickChannelModal.types.d.ts

@@ -4,9 +4,12 @@ export interface PickChannelModalChannel {
     clientId: string | number;
     iconUrl: string;
     name?: string;
+    disabled?: boolean;
+    tooltipMessage?: string;
 }
 export interface PickChannelModalProps {
     open: boolean;
+    fitContent: boolean;
     channels: PickChannelModalChannel[];
     onClose?: () => void;
     titleProps?: ModalTitleProps;

package/dist/locales/description.d.ts

@@ -39,13 +39,14 @@ export declare const headerSectionExample = "\n## Uso del componente\n\nEl compo
 export declare const iconWithIdentifierExample = "\n## Uso del componente\n\nEl componente `IconWithIdentifier` muestra un \u00EDcono junto a un texto (por ejemplo un ID o c\u00F3digo).\n\n### Ejemplo b\u00E1sico:\n\n```tsx\n<IconWithIdentifier\n  icon={<Image src=\"/flag.png\" />}\n  text=\"#ID8765\"\n  showDivider\n/>\n```\n";
 export declare const linkWithIconExample = "\n## Uso del componente\n\nEl componente `LinkWithIcon` muestra un enlace con un \u00EDcono a la izquierda.\n\n### Ejemplo b\u00E1sico:\n\n```tsx\n<LinkWithIcon\n  text=\"Historial de cambios\"\n  icon={<CustomIcon><History /></CustomIcon>}\n  onClick={() => navigate('/history')}\n/>\n```\n";
 export declare const conditionalOperatorExample = "\n## Uso del componente\n\nEl componente `ConditionalOperator` permite elegir entre operador l\u00F3gico \"Y\" u \"O\" para filtrar o combinar condiciones.\n\n### Ejemplo b\u00E1sico:\n\n```tsx\n<ConditionalOperator\n  value=\"or\"\n  options={[{ value: 'and', label: 'Y' }, { value: 'or', label: 'O' }]}\n  onChange={(event) => setOperator(event.target.value)}\n/>\n```\n";
-export declare const pickChannelModalExample = "\n## Uso del componente\n\nEl componente `PickChannelModal` muestra un modal con una grilla de canales seleccionables. Recibe el listado `channels` con `{ clientId, iconUrl, name? }`. Opcionalmente, mediante `showGeneralEdition`, agrega una secci\u00F3n superior con la opci\u00F3n Producteca (exportada como `productecaStrategy`) para editar atributos generales \u2014 se comporta como un canal m\u00E1s y se notifica por el mismo `onSelectChannel`. El header acepta cualquier `ModalTitleProps` v\u00EDa `titleProps` (`title`, `icon`, `subtitle`, `helpArticleUrl`, `helpTooltip`).\n\n### Ejemplo b\u00E1sico:\n\n```tsx\n<PickChannelModal\n  open={open}\n  channels={channels}\n  showGeneralEdition\n  titleProps={{\n    title: 'Editar atributos',\n    icon: <InfoIcon />,\n    subtitle: 'Eleg\u00ED el canal a editar',\n    helpArticleUrl: 'https://help.producteca.com/articles/pick-channel',\n  }}\n  onSelectChannel={(channel) => handleChannelSelected(channel)}\n  onClose={() => setOpen(false)}\n/>\n```\n";
+export declare const pickChannelModalExample = "\n## Uso del componente\n\nEl componente `PickChannelModal` muestra un modal con una grilla de canales seleccionables. Recibe el listado `channels` con `{ clientId, iconUrl, name?, disabled?, tooltipMessage? }`. Un canal con `disabled` se muestra atenuado y no dispara `onSelectChannel` al clickearlo; `tooltipMessage` agrega un tooltip a la card, visible al pasar el mouse. Opcionalmente, mediante `showGeneralEdition`, agrega una secci\u00F3n superior con la opci\u00F3n Producteca (exportada como `productecaStrategy`) para editar atributos generales \u2014 se comporta como un canal m\u00E1s y se notifica por el mismo `onSelectChannel`. El header acepta cualquier `ModalTitleProps` v\u00EDa `titleProps` (`title`, `icon`, `subtitle`, `helpArticleUrl`, `helpTooltip`).\n\n### Ejemplo b\u00E1sico:\n\n```tsx\n<PickChannelModal\n  open={open}\n  channels={channels}\n  showGeneralEdition\n  titleProps={{\n    title: 'Editar atributos',\n    icon: <InfoIcon />,\n    subtitle: 'Eleg\u00ED el canal a editar',\n    helpArticleUrl: 'https://help.producteca.com/articles/pick-channel',\n  }}\n  onSelectChannel={(channel) => handleChannelSelected(channel)}\n  onClose={() => setOpen(false)}\n/>\n```\n";
 export declare const pickChannelModalDefault = "\nEstado por defecto con `showGeneralEdition` activado. Se muestra la secci\u00F3n de edici\u00F3n general con la card de Producteca y la secci\u00F3n de canales. Clickear cualquier card invoca `onSelectChannel` con el objeto del canal seleccionado.\n";
 export declare const pickChannelModalWithoutGeneralEdition = "\nVariante sin la secci\u00F3n de edici\u00F3n general \u2014 solo se renderizan las cards recibidas por `channels`. \u00DAtil cuando el flujo no necesita editar atributos gen\u00E9ricos a nivel Producteca.\n";
 export declare const pickChannelModalCustomTexts = "\nDemuestra c\u00F3mo overridear todos los textos visibles (`title`, `generalEditionTitle`, `generalEditionDescription`, `channelEditionTitle`, `channelEditionDescription`) cuando los defaults no encajan con el contexto del producto.\n";
 export declare const pickChannelModalWithFullTitle = "\nHeader con todas las `ModalTitleProps` configuradas: `title`, `subtitle`, `icon` (icono al lado del t\u00EDtulo) y `helpArticleUrl` + `helpTooltip` (que renderizan el \u00EDcono de ayuda con tooltip a la derecha). \u00DAtil cuando el modal necesita contextualizar la acci\u00F3n o linkear a documentaci\u00F3n.\n";
 export declare const pickChannelModalScrollableContent = "\nMuestra el modal con una gran cantidad de canales para verificar que el contenido scrollea internamente cuando supera la altura m\u00E1xima del modal (`85vh`). El header se mantiene fijo y solo la grilla de cards se desplaza.\n";
 export declare const pickChannelModalWithoutText = "\nSin `channelEditionTitle` ni `channelEditionDescription` (ni los textos de edici\u00F3n general): los `<h3>` y `<p>` no se renderizan y la grilla de cards queda sin margen superior. Verifica el render condicional de los textos opcionales y el margen condicional del grid.\n";
+export declare const pickChannelModalWithDisabledChannel = "\nUno de los canales se pasa con `disabled` y `tooltipMessage`: la card se muestra atenuada, no dispara `onSelectChannel` al clickearla y expone un tooltip explicando el motivo al pasar el mouse.\n";
 export declare const emptyStateExample = "\n## Uso del componente\n\nEl componente `EmptyState` muestra un estado vac\u00EDo con mensaje, \u00EDcono opcional y acci\u00F3n (por ejemplo \"Agregar\").\n\n### Ejemplo b\u00E1sico:\n\n```tsx\n<EmptyState\n  message=\"No hay resultados\"\n  actionLabel=\"Agregar\"\n  onAction={() => openCreate()}\n/>\n```\n";
 export declare const asyncContentExample = "\n## Uso del componente\n\nEl componente `AsyncContent` maneja los estados de una operaci\u00F3n as\u00EDncrona deriv\u00E1ndolos de las props `isLoading`, `error` y `empty`. La prioridad es: `isLoading` \u2192 `error.value` \u2192 `empty.items` vac\u00EDo \u2192 `success`. Muestra el contenido solo en `success`.\n\n### Ejemplo b\u00E1sico:\n\n```tsx\n<AsyncContent\n  isLoading={isLoading}\n  error={{\n    value: hasError,\n    text: 'Ocurri\u00F3 un error',\n    actionText: 'Reintentar',\n    onClick: () => refetch(),\n  }}\n  empty={{\n    items,\n    text: 'No hay datos',\n  }}\n>\n  <div>Contenido cuando hay datos disponibles</div>\n</AsyncContent>\n```\n";
 export declare const tooltipExample = "\n## Uso del componente\n\nLos componentes de tooltip (`WithTooltip`, `WithOverflowTooltip`) muestran un mensaje al hacer hover o click. `WithOverflowTooltip` solo muestra el tooltip cuando el contenido se desborda.\n\n### Ejemplo b\u00E1sico:\n\n```tsx\n<WithTooltip content=\"Texto del tooltip\" placement=\"top\">\n  <span>Hover sobre m\u00ED</span>\n</WithTooltip>\n```\n\n### Solo si hay overflow:\n\n```tsx\n<WithOverflowTooltip maxWidth=\"200px\">\n  <span>Texto que puede truncarse...</span>\n</WithOverflowTooltip>\n```\n";

package/dist/locales/es.d.ts

@@ -217,6 +217,7 @@ declare const _default: {
             withFullTitle: string;
             scrollableContent: string;
             withoutText: string;
+            withDisabledChannel: string;
         };
         copyButton: {
             example: string;
@@ -404,6 +405,7 @@ declare const _default: {
         channelEditionDescription: string;
         channelName: string;
         openModal: string;
+        disabledChannelTooltip: string;
         fullTitle: {
             title: string;
             subtitle: string;

package/dist/producteca-ui-kit.es.js

@@ -19709,7 +19709,7 @@ El componente \`ConditionalOperator\` permite elegir entre operador lógico "Y"
 const pickChannelModalExample = `
 ## Uso del componente
 
-El componente \`PickChannelModal\` muestra un modal con una grilla de canales seleccionables. Recibe el listado \`channels\` con \`{ clientId, iconUrl, name? }\`. Opcionalmente, mediante \`showGeneralEdition\`, agrega una sección superior con la opción Producteca (exportada como \`productecaStrategy\`) para editar atributos generales — se comporta como un canal más y se notifica por el mismo \`onSelectChannel\`. El header acepta cualquier \`ModalTitleProps\` vía \`titleProps\` (\`title\`, \`icon\`, \`subtitle\`, \`helpArticleUrl\`, \`helpTooltip\`).
+El componente \`PickChannelModal\` muestra un modal con una grilla de canales seleccionables. Recibe el listado \`channels\` con \`{ clientId, iconUrl, name?, disabled?, tooltipMessage? }\`. Un canal con \`disabled\` se muestra atenuado y no dispara \`onSelectChannel\` al clickearlo; \`tooltipMessage\` agrega un tooltip a la card, visible al pasar el mouse. Opcionalmente, mediante \`showGeneralEdition\`, agrega una sección superior con la opción Producteca (exportada como \`productecaStrategy\`) para editar atributos generales — se comporta como un canal más y se notifica por el mismo \`onSelectChannel\`. El header acepta cualquier \`ModalTitleProps\` vía \`titleProps\` (\`title\`, \`icon\`, \`subtitle\`, \`helpArticleUrl\`, \`helpTooltip\`).
 
 ### Ejemplo básico:
 
@@ -19747,6 +19747,9 @@ Muestra el modal con una gran cantidad de canales para verificar que el contenid
 const pickChannelModalWithoutText = `
 Sin \`channelEditionTitle\` ni \`channelEditionDescription\` (ni los textos de edición general): los \`<h3>\` y \`<p>\` no se renderizan y la grilla de cards queda sin margen superior. Verifica el render condicional de los textos opcionales y el margen condicional del grid.
 `;
+const pickChannelModalWithDisabledChannel = `
+Uno de los canales se pasa con \`disabled\` y \`tooltipMessage\`: la card se muestra atenuada, no dispara \`onSelectChannel\` al clickearla y expone un tooltip explicando el motivo al pasar el mouse.
+`;
 const emptyStateExample = `
 ## Uso del componente
 
@@ -20162,7 +20165,8 @@ const es$3 = {
       customTexts: pickChannelModalCustomTexts,
       withFullTitle: pickChannelModalWithFullTitle,
       scrollableContent: pickChannelModalScrollableContent,
-      withoutText: pickChannelModalWithoutText
+      withoutText: pickChannelModalWithoutText,
+      withDisabledChannel: pickChannelModalWithDisabledChannel
     },
     copyButton: {
       example: copyButtonExample
@@ -20350,6 +20354,7 @@ const es$3 = {
     channelEditionDescription: "Edita los atributos específicos y obligatorios según la categoría del canal",
     channelName: "Cuenta {{number}}",
     openModal: "Abrir selector de canales",
+    disabledChannelTooltip: "Este canal está deshabilitado. Pasa el mouse para más información.",
     fullTitle: {
       title: "Editar atributos del producto",
       subtitle: "Seleccioná en qué canal querés editar los atributos",
@@ -67717,15 +67722,19 @@ const ChannelIcon = ({ iconUrl, name }) => /* @__PURE__ */ jsx$1(
     sx: { height: "36px", maxHeight: "36px", maxWidth: "128px", width: "128px" }
   }
 );
-const ChannelCard = ({ channel, onSelect }) => /* @__PURE__ */ jsx$1(
-  Card,
-  {
-    description: channel.name,
-    sx: { width: "200px", height: "88px" },
-    onClick: () => onSelect(channel),
-    icon: /* @__PURE__ */ jsx$1(ChannelIcon, { iconUrl: channel.iconUrl, name: channel.name })
-  }
-);
+const ChannelCard = ({ channel, onSelect }) => {
+  const { name, iconUrl, disabled: disabled2, tooltipMessage } = channel;
+  return /* @__PURE__ */ jsx$1(WithTooltip, { content: tooltipMessage, shouldShowTooltip: !!tooltipMessage, children: /* @__PURE__ */ jsx$1("div", { children: /* @__PURE__ */ jsx$1(
+    Card,
+    {
+      disabled: disabled2,
+      description: name,
+      sx: { width: "200px", height: "88px" },
+      onClick: () => !disabled2 && onSelect(channel),
+      icon: /* @__PURE__ */ jsx$1(ChannelIcon, { iconUrl, name })
+    }
+  ) }) });
+};
 const productecaStrategy = {
   clientId: 1,
   iconUrl: "https://imagesproducteca.blob.core.windows.net/producteca/isologo-producteca.svg"
@@ -67734,15 +67743,16 @@ const PickChannelModalBase = ({
   open,
   onClose,
   channels,
+  fitContent = true,
+  generalEditionTitle,
+  channelEditionTitle,
   generalEditionDescription,
   channelEditionDescription,
   showGeneralEdition = false,
   onSelectChannel = () => {
   },
-  titleProps = { title: locale("pickChannelModal.title") },
-  generalEditionTitle,
-  channelEditionTitle
-}) => /* @__PURE__ */ jsxs(Modal2, { open, onClose, size: "md", fitContent: true, className: styles$g["modal"], children: [
+  titleProps = { title: locale("pickChannelModal.title") }
+}) => /* @__PURE__ */ jsxs(Modal2, { open, onClose, size: "md", fitContent, className: styles$g["modal"], children: [
   /* @__PURE__ */ jsx$1(Modal2.Title, { ...titleProps }),
   /* @__PURE__ */ jsx$1(Modal2.Body, { className: styles$g["body"], children: /* @__PURE__ */ jsxs("div", { className: styles$g["sections"], children: [
     showGeneralEdition && /* @__PURE__ */ jsxs("section", { className: styles$g["section"], children: [