@smwb/ui-solid 0.12.1 → 0.14.0

package/dist/headless/source/components/dataDisplay/avatar/avatar.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/dataDisplay/avatar/avatar.tsx"],"sourcesContent":["import {\n  type JSX,\n  type ParentProps,\n  Show,\n  children as resolveChildren,\n  createSignal,\n  mergeProps,\n  splitProps,\n} from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { callHandler } from \"../../../primitives/callHandler\";\n\nexport type AvatarSize = \"small\" | \"medium\" | \"large\";\n\nexport interface AvatarProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  /** Image source. Falls back to children (initials / icon) on error or when absent. */\n  src?: string | undefined;\n  alt?: string | undefined;\n  /** Preset size or an explicit pixel value. */\n  size?: AvatarSize | number;\n  variant?: \"circular\" | \"rounded\" | \"square\";\n  /** Background color for the fallback (initials / icon). */\n  color?: string;\n  /** Extra attributes forwarded to the underlying <img> (srcSet, loading…). */\n  imgProps?: JSX.ImgHTMLAttributes<HTMLImageElement>;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst isPresetSize = (size: AvatarSize | number): size is AvatarSize => typeof size === \"string\";\n\nexport function Avatar(props: ParentProps<AvatarProps>): JSX.Element {\n  const merged = mergeProps({ size: \"medium\" as AvatarSize | number, variant: \"circular\" as const }, props);\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"src\",\n    \"alt\",\n    \"size\",\n    \"variant\",\n    \"color\",\n    \"style\",\n    \"imgProps\",\n    \"children\",\n    \"ref\",\n  ]);\n\n  const [imgFailed, setImgFailed] = createSignal(false);\n  const showImage = (): boolean => Boolean(local.src) && !imgFailed();\n\n  const inlineStyle = (): JSX.CSSProperties => {\n    const size = local.size;\n    return {\n      ...(typeof local.style === \"object\" && local.style ? local.style : {}),\n      ...(isPresetSize(size) ? {} : { width: `${size}px`, height: `${size}px`, \"font-size\": `${size / 2.5}px` }),\n      ...(local.color && !showImage() ? { \"background-color\": local.color } : {}),\n    };\n  };\n\n  return (\n    <div\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid=\"avatar\"\n      class={cn(\n        \"smwb-avatar\",\n        `smwb-avatar_${local.variant}`,\n        isPresetSize(local.size) ? `smwb-avatar_${local.size}` : undefined,\n        local.class\n      )}\n      style={inlineStyle()}\n    >\n      <Show\n        when={showImage()}\n        fallback={\n          <span class=\"smwb-avatar__fallback\" role=\"img\" aria-label={local.alt}>\n            {local.children}\n          </span>\n        }\n      >\n        <img\n          {...(local.imgProps ?? {})}\n          class={cn(\"smwb-avatar__img\", local.imgProps?.class)}\n          src={local.src}\n          alt={local.alt}\n          onError={(event) => {\n            setImgFailed(true);\n            callHandler(local.imgProps?.onError, event);\n          }}\n        />\n      </Show>\n    </div>\n  );\n}\n\nexport interface AvatarGroupProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  /** Maximum avatars to show before collapsing the rest into a \"+N\" surplus. */\n  max?: number;\n  /** Override the total count used for the surplus label (defaults to children count). */\n  total?: number;\n  /** Click handler for the \"+N\" surplus chip. */\n  onSurplusClick?: () => void;\n  /** Accessible name of the \"+N\" surplus chip. */\n  surplusAriaLabel?: (count: number) => string;\n  /** Size of the \"+N\" surplus chip: match the avatars in the group. */\n  size?: AvatarSize | number;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function AvatarGroup(props: ParentProps<AvatarGroupProps>): JSX.Element {\n  const merged = mergeProps(\n    { max: 5, surplusAriaLabel: (count: number) => `${count} more` },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"max\",\n    \"total\",\n    \"onSurplusClick\",\n    \"surplusAriaLabel\",\n    \"size\",\n    \"children\",\n    \"ref\",\n  ]);\n\n  const resolved = resolveChildren(() => local.children);\n  const items = (): unknown[] => resolved.toArray();\n  const totalCount = (): number => local.total ?? items().length;\n  const clampedMax = (): number => Math.max(local.max, 1);\n  const visible = (): unknown[] => items().slice(0, clampedMax());\n  const hidden = (): unknown[] => items().slice(clampedMax());\n  const surplus = (): number => totalCount() - visible().length;\n\n  // In order, the first avatar first; the \"+N\" chip ends the row.\n  return (\n    <div {...rest} ref={mergeRefs(local.ref)} data-testid=\"avatar-group\" class={cn(\"smwb-avatar-group\", local.class)}>\n      {visible() as JSX.Element}\n      <Show when={surplus() > 0}>\n        <Avatar\n          class=\"smwb-avatar-group__surplus\"\n          size={local.size ?? \"medium\"}\n          alt={local.surplusAriaLabel(surplus())}\n          onClick={local.onSurplusClick}\n          style={local.onSurplusClick ? { cursor: \"pointer\" } : undefined}\n        >\n          {`+${surplus()}`}\n        </Avatar>\n      </Show>\n      {/* Avatars past max are created with the rest (the children resolve at\n          once), so they are rendered, hidden: a server that left them out would\n          leave the browser without nodes to hydrate them from. */}\n      <Show when={hidden().length > 0}>\n        <span class=\"smwb-avatar-group__hidden\" hidden>\n          {hidden() as JSX.Element}\n        </span>\n      </Show>\n    </div>\n  );\n}\n\nexport default Avatar;\n"],"mappings":"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","names":[],"file":"avatar.jsx"}
+{"version":3,"sources":["../../../../../../src/components/dataDisplay/avatar/avatar.tsx"],"sourcesContent":["import {\n  type JSX,\n  type ParentProps,\n  Show,\n  children as resolveChildren,\n  createSignal,\n  mergeProps,\n  splitProps,\n} from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { callHandler } from \"../../../primitives/callHandler\";\nimport { mergeStyle } from \"../../../primitives/mergeStyle\";\n\nexport type AvatarSize = \"small\" | \"medium\" | \"large\";\n\nexport interface AvatarProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  /** Image source. Falls back to children (initials / icon) on error or when absent. */\n  src?: string | undefined;\n  alt?: string | undefined;\n  /** Preset size or an explicit pixel value. */\n  size?: AvatarSize | number;\n  variant?: \"circular\" | \"rounded\" | \"square\";\n  /** Background color for the fallback (initials / icon). */\n  color?: string;\n  /** Extra attributes forwarded to the underlying <img> (srcSet, loading…). */\n  imgProps?: JSX.ImgHTMLAttributes<HTMLImageElement>;\n  /** Test id of the root `<div>`; `avatar` unless given. */\n  \"data-testid\"?: string | undefined;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst isPresetSize = (size: AvatarSize | number): size is AvatarSize => typeof size === \"string\";\n\nexport function Avatar(props: ParentProps<AvatarProps>): JSX.Element {\n  const merged = mergeProps({ size: \"medium\" as AvatarSize | number, variant: \"circular\" as const }, props);\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"src\",\n    \"alt\",\n    \"size\",\n    \"variant\",\n    \"color\",\n    \"style\",\n    \"imgProps\",\n    \"children\",\n    \"ref\",\n    \"data-testid\",\n  ]);\n\n  const [imgFailed, setImgFailed] = createSignal(false);\n  const showImage = (): boolean => Boolean(local.src) && !imgFailed();\n\n  const inlineStyle = (): JSX.CSSProperties | string | undefined => {\n    const size = local.size;\n    return mergeStyle(local.style, {\n      ...(isPresetSize(size) ? {} : { width: `${size}px`, height: `${size}px`, \"font-size\": `${size / 2.5}px` }),\n      ...(local.color && !showImage() ? { \"background-color\": local.color } : {}),\n    });\n  };\n\n  return (\n    <div\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid={local[\"data-testid\"] ?? \"avatar\"}\n      class={cn(\n        \"smwb-avatar\",\n        `smwb-avatar_${local.variant}`,\n        isPresetSize(local.size) ? `smwb-avatar_${local.size}` : undefined,\n        local.class\n      )}\n      style={inlineStyle()}\n    >\n      <Show\n        when={showImage()}\n        fallback={\n          <span class=\"smwb-avatar__fallback\" role=\"img\" aria-label={local.alt}>\n            {local.children}\n          </span>\n        }\n      >\n        <img\n          {...(local.imgProps ?? {})}\n          class={cn(\"smwb-avatar__img\", local.imgProps?.class)}\n          src={local.src}\n          alt={local.alt}\n          onError={(event) => {\n            setImgFailed(true);\n            callHandler(local.imgProps?.onError, event);\n          }}\n        />\n      </Show>\n    </div>\n  );\n}\n\nexport interface AvatarGroupProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  /** Maximum avatars to show before collapsing the rest into a \"+N\" surplus. */\n  max?: number;\n  /** Override the total count used for the surplus label (defaults to children count). */\n  total?: number;\n  /** Click handler for the \"+N\" surplus chip. */\n  onSurplusClick?: () => void;\n  /** Accessible name of the \"+N\" surplus chip. */\n  surplusAriaLabel?: (count: number) => string;\n  /** Size of the \"+N\" surplus chip: match the avatars in the group. */\n  size?: AvatarSize | number;\n  /** Test id of the root `<div>`; `avatar-group` unless given. */\n  \"data-testid\"?: string | undefined;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function AvatarGroup(props: ParentProps<AvatarGroupProps>): JSX.Element {\n  const merged = mergeProps(\n    { max: 5, surplusAriaLabel: (count: number) => `${count} more` },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"max\",\n    \"total\",\n    \"onSurplusClick\",\n    \"surplusAriaLabel\",\n    \"size\",\n    \"children\",\n    \"ref\",\n    \"data-testid\",\n  ]);\n\n  const resolved = resolveChildren(() => local.children);\n  const items = (): unknown[] => resolved.toArray();\n  const totalCount = (): number => local.total ?? items().length;\n  const clampedMax = (): number => Math.max(local.max, 1);\n  const visible = (): unknown[] => items().slice(0, clampedMax());\n  const hidden = (): unknown[] => items().slice(clampedMax());\n  const surplus = (): number => totalCount() - visible().length;\n\n  // In order, the first avatar first; the \"+N\" chip ends the row.\n  return (\n    <div\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid={local[\"data-testid\"] ?? \"avatar-group\"}\n      class={cn(\"smwb-avatar-group\", local.class)}\n    >\n      {visible() as JSX.Element}\n      <Show when={surplus() > 0}>\n        <Avatar\n          class=\"smwb-avatar-group__surplus\"\n          size={local.size ?? \"medium\"}\n          alt={local.surplusAriaLabel(surplus())}\n          onClick={local.onSurplusClick}\n          style={local.onSurplusClick ? { cursor: \"pointer\" } : undefined}\n        >\n          {`+${surplus()}`}\n        </Avatar>\n      </Show>\n      {/* Avatars past max are created with the rest (the children resolve at\n          once), so they are rendered, hidden: a server that left them out would\n          leave the browser without nodes to hydrate them from. */}\n      <Show when={hidden().length > 0}>\n        <span class=\"smwb-avatar-group__hidden\" hidden>\n          {hidden() as JSX.Element}\n        </span>\n      </Show>\n    </div>\n  );\n}\n\nexport default Avatar;\n"],"mappings":"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","names":[],"file":"avatar.jsx"}

package/dist/headless/source/components/dataDisplay/card/card.jsx

@@ -2,6 +2,8 @@ import { Show, children, mergeProps, splitProps } from "solid-js";
 import cn from "clsx";
 import { mergeRefs } from "../../../primitives/mergeRefs";
 import { callHandler } from "../../../primitives/callHandler";
+import { isOwnClick } from "../../../utils/ownClick";
+import { splitControlProps } from "../../../utils/controlProps";
 function Card(props) {
   const merged = mergeProps({ variant: "elevated" }, props);
   const [local, rest] = splitProps(merged, [
@@ -13,35 +15,52 @@ function Card(props) {
     "footer",
     "onClick",
     "onKeyDown",
-    "ref"
+    "ref",
+    "data-testid"
   ]);
   const footer = children(() => local.footer);
   const interactive = () => !!local.onClick && !local.disabled;
+  const [control, box] = splitControlProps(rest, () => !!local.onClick);
+  let content;
   const handleKeyDown = (event) => {
     callHandler(local.onKeyDown, event);
-    if (interactive() && (event.key === "Enter" || event.key === " ")) {
+    if (!interactive() || event.target !== content) return;
+    if (event.key === "Enter" || event.key === " ") {
       event.preventDefault();
       callHandler(local.onClick, event);
     }
   };
+  const handleClick = (event) => {
+    if (isOwnClick(event, content ?? null)) callHandler(local.onClick, event);
+  };
   return <div
-    {...rest}
+    {...box}
     ref={mergeRefs(local.ref)}
-    data-testid="card"
+    data-testid={local["data-testid"] ?? "card"}
     class={cn("smwb-card", `smwb-card_${local.variant}`, local.class, {
       card_disabled: local.disabled,
       "smwb-card_interactive": interactive()
     })}
-    role={interactive() ? "button" : void 0}
-    tabindex={interactive() ? 0 : void 0}
-    aria-disabled={local.disabled || void 0}
-    onClick={interactive() ? local.onClick : void 0}
+    aria-disabled={!local.onClick && local.disabled || void 0}
+    onClick={interactive() ? handleClick : void 0}
     onKeyDown={handleKeyDown}
   >
-      <Show when={local.title}>
-        <div class="smwb-card__title">{local.title}</div>
-      </Show>
-      {local.children}
+      <div
+    {...control}
+    ref={(el) => content = el}
+    class="smwb-card__content"
+    role={local.onClick ? "button" : void 0}
+    tabindex={control.tabindex ?? (interactive() ? 0 : void 0)}
+    aria-disabled={!!local.onClick && local.disabled || void 0}
+  >
+        <Show when={local.title}>
+          <div class="smwb-card__title">{local.title}</div>
+        </Show>
+        {local.children}
+      </div>
+      {
+    /* Beside the button, not in it: controls here keep their names and input. */
+  }
       <Show when={footer()}>
         <div class="smwb-card__footer">{footer()}</div>
       </Show>

package/dist/headless/source/components/dataDisplay/card/card.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/dataDisplay/card/card.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, children, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { callHandler } from \"../../../primitives/callHandler\";\n\nexport interface CardProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  variant?: \"filled\" | \"elevated\" | \"outlined\";\n  disabled?: boolean;\n  title?: string;\n  /** Footer slot rendered after the content. */\n  footer?: JSX.Element;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function Card(props: ParentProps<CardProps>): JSX.Element {\n  const merged = mergeProps({ variant: \"elevated\" as const }, props);\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"variant\",\n    \"children\",\n    \"disabled\",\n    \"title\",\n    \"footer\",\n    \"onClick\",\n    \"onKeyDown\",\n    \"ref\",\n  ]);\n\n  // Read the footer once: markup passed as a prop is created anew on every read,\n  // and during hydration a copy the server never rendered has no DOM node.\n  const footer = children(() => local.footer);\n  const interactive = (): boolean => !!local.onClick && !local.disabled;\n\n  const handleKeyDown: JSX.EventHandler<HTMLDivElement, KeyboardEvent> = (event) => {\n    callHandler(local.onKeyDown, event);\n    if (interactive() && (event.key === \"Enter\" || event.key === \" \")) {\n      event.preventDefault();\n      callHandler(local.onClick, event as unknown as MouseEvent & { currentTarget: HTMLDivElement; target: Element });\n    }\n  };\n\n  return (\n    <div\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid=\"card\"\n      class={cn(\"smwb-card\", `smwb-card_${local.variant}`, local.class, {\n        card_disabled: local.disabled,\n        \"smwb-card_interactive\": interactive(),\n      })}\n      role={interactive() ? \"button\" : undefined}\n      tabindex={interactive() ? 0 : undefined}\n      aria-disabled={local.disabled || undefined}\n      onClick={interactive() ? local.onClick : undefined}\n      onKeyDown={handleKeyDown}\n    >\n      <Show when={local.title}>\n        <div class=\"smwb-card__title\">{local.title}</div>\n      </Show>\n      {local.children}\n      <Show when={footer()}>\n        <div class=\"smwb-card__footer\">{footer()}</div>\n      </Show>\n    </div>\n  );\n}\n\nexport default Card;\n"],"mappings":"AAAA,SAAqC,MAAM,UAAU,YAAY,kBAAkB;AACnF,OAAO,QAAQ;AACf,SAAS,iBAA2B;AACpC,SAAS,mBAAmB;AAWrB,SAAS,KAAK,OAA4C;AAC/D,QAAM,SAAS,WAAW,EAAE,SAAS,WAAoB,GAAG,KAAK;AACjE,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAID,QAAM,SAAS,SAAS,MAAM,MAAM,MAAM;AAC1C,QAAM,cAAc,MAAe,CAAC,CAAC,MAAM,WAAW,CAAC,MAAM;AAE7D,QAAM,gBAAiE,CAAC,UAAU;AAChF,gBAAY,MAAM,WAAW,KAAK;AAClC,QAAI,YAAY,MAAM,MAAM,QAAQ,WAAW,MAAM,QAAQ,MAAM;AACjE,YAAM,eAAe;AACrB,kBAAY,MAAM,SAAS,KAAmF;AAAA,IAChH;AAAA,EACF;AAEA,SACE,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,YAAY;AAAA,IACZ,OAAO,GAAG,aAAa,aAAa,MAAM,OAAO,IAAI,MAAM,OAAO;AAAA,MAChE,eAAe,MAAM;AAAA,MACrB,yBAAyB,YAAY;AAAA,IACvC,CAAC;AAAA,IACD,MAAM,YAAY,IAAI,WAAW;AAAA,IACjC,UAAU,YAAY,IAAI,IAAI;AAAA,IAC9B,eAAe,MAAM,YAAY;AAAA,IACjC,SAAS,YAAY,IAAI,MAAM,UAAU;AAAA,IACzC,WAAW;AAAA,GACZ;AAAA,MACC,CAAC,KAAK,MAAM,MAAM,OAAO;AAAA,QACvB,CAAC,IAAI,MAAM,oBAAoB,MAAM,MAAM,EAA1C,IAAgD;AAAA,MACnD,EAFC,KAEM;AAAA,OACN,MAAM,SAAS;AAAA,MAChB,CAAC,KAAK,MAAM,OAAO,GAAG;AAAA,QACpB,CAAC,IAAI,MAAM,qBAAqB,OAAO,EAAE,EAAxC,IAA8C;AAAA,MACjD,EAFC,KAEM;AAAA,IACT,EArBC;AAuBL;AAEA,IAAO,eAAQ;","names":[],"file":"card.jsx"}
+{"version":3,"sources":["../../../../../../src/components/dataDisplay/card/card.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, children, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { callHandler } from \"../../../primitives/callHandler\";\nimport { isOwnClick } from \"../../../utils/ownClick\";\nimport { splitControlProps } from \"../../../utils/controlProps\";\n\nexport interface CardProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Class name(s) for the root `<div>`, the card's box. `style`, `id`, `data-*`, `aria-hidden`, `ref` and event\n   * handlers go to the root too. With `onClick`, `role`, `tabindex`, `onFocus`, `onBlur` and the other `aria-*`\n   * attributes go to the card's button, `.smwb-card__content` (the title and the children), which is also the element\n   * to focus. Without `onClick` the card is not a control, and they stay on the root, which holds the footer too.\n   */\n  class?: string | undefined;\n  variant?: \"filled\" | \"elevated\" | \"outlined\";\n  /**\n   * Disables the card: it says `aria-disabled`, and neither clicks nor keys run `onClick`. With `onClick` the card is\n   * still a button, out of the tab order.\n   */\n  disabled?: boolean;\n  /**\n   * A heading drawn at the top of the card, not the `title` attribute. With `onClick` it is part of the card's button,\n   * and the button's name starts with it.\n   */\n  title?: string;\n  /**\n   * Makes the card interactive: its content (the title and the children) becomes a button, named by that content, with\n   * a focus ring around the whole card. The footer is not part of that button but its sibling, so the card's controls\n   * go there: a control in the children would sit inside the button, and its name would join the card's.\n   *\n   * Runs when the card is activated: a click on it, or Enter / Space while its button has focus. A click on a control\n   * (button, link, input, anything focusable), in the footer or the children, or in a portal opened from the card does\n   * not run it, and neither do Enter / Space pressed on such a control. Content that is not a control keeps its click\n   * from activating the card by calling `preventDefault()` on it.\n   */\n  onClick?: JSX.EventHandlerUnion<HTMLDivElement, MouseEvent> | undefined;\n  /**\n   * Footer slot rendered after the content. With `onClick` it sits beside the card's button, not inside it, so\n   * controls here keep their own names, clicks and keys; see `onClick`.\n   */\n  footer?: JSX.Element;\n  /** Test id of the root `<div>`; `card` unless given. */\n  \"data-testid\"?: string | undefined;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function Card(props: ParentProps<CardProps>): JSX.Element {\n  const merged = mergeProps({ variant: \"elevated\" as const }, props);\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"variant\",\n    \"children\",\n    \"disabled\",\n    \"title\",\n    \"footer\",\n    \"onClick\",\n    \"onKeyDown\",\n    \"ref\",\n    \"data-testid\",\n  ]);\n\n  // Read the footer once: markup passed as a prop is created anew on every read,\n  // and during hydration a copy the server never rendered has no DOM node.\n  const footer = children(() => local.footer);\n  const interactive = (): boolean => !!local.onClick && !local.disabled;\n  // With onClick the card's content is its button, and what the card is to the\n  // keyboard and to assistive tech goes there. Without it the card is not a\n  // control: the caller's role and ARIA attributes stay on the root, around\n  // the footer too.\n  const [control, box] = splitControlProps(rest, () => !!local.onClick);\n  let content: HTMLDivElement | undefined;\n\n  // Keys pressed in the footer or on a control inside bubble up here too; only\n  // the keys of the card's button activate it. The caller's onKeyDown still\n  // sees them all.\n  const handleKeyDown: JSX.EventHandler<HTMLDivElement, KeyboardEvent> = (event) => {\n    callHandler(local.onKeyDown, event);\n    if (!interactive() || event.target !== content) return;\n    if (event.key === \"Enter\" || event.key === \" \") {\n      event.preventDefault();\n      callHandler(local.onClick, event as unknown as MouseEvent & { currentTarget: HTMLDivElement; target: Element });\n    }\n  };\n\n  // A click on the card's button, or on what is not a control beside it (the\n  // footer's text, the padding), activates the card: not one on a control, nor\n  // one in a Portal rendered inside (Solid delivers it here, though it landed\n  // outside), nor one whose default a handler inside has prevented.\n  const handleClick: JSX.EventHandler<HTMLDivElement, MouseEvent> = (event) => {\n    if (isOwnClick(event, content ?? null)) callHandler(local.onClick, event);\n  };\n\n  return (\n    <div\n      {...box}\n      ref={mergeRefs(local.ref)}\n      data-testid={local[\"data-testid\"] ?? \"card\"}\n      class={cn(\"smwb-card\", `smwb-card_${local.variant}`, local.class, {\n        card_disabled: local.disabled,\n        \"smwb-card_interactive\": interactive(),\n      })}\n      // A disabled card says so where the caller's ARIA attributes are: on its\n      // button with onClick, on the root without. Where it sets none\n      // (undefined), the caller's stay.\n      aria-disabled={(!local.onClick && local.disabled) || undefined}\n      onClick={interactive() ? handleClick : undefined}\n      onKeyDown={handleKeyDown}\n    >\n      <div\n        {...control}\n        ref={(el) => (content = el)}\n        class=\"smwb-card__content\"\n        // With onClick the content is the card's button, and a disabled card\n        // says so: these win over the caller's, and where the card sets none\n        // (undefined), the caller's stay. Its tabindex is a default: the\n        // caller's wins, e.g. for roving focus.\n        role={local.onClick ? \"button\" : undefined}\n        tabindex={control.tabindex ?? (interactive() ? 0 : undefined)}\n        aria-disabled={(!!local.onClick && local.disabled) || undefined}\n      >\n        <Show when={local.title}>\n          <div class=\"smwb-card__title\">{local.title}</div>\n        </Show>\n        {local.children}\n      </div>\n      {/* Beside the button, not in it: controls here keep their names and input. */}\n      <Show when={footer()}>\n        <div class=\"smwb-card__footer\">{footer()}</div>\n      </Show>\n    </div>\n  );\n}\n\nexport default Card;\n"],"mappings":"AAAA,SAAqC,MAAM,UAAU,YAAY,kBAAkB;AACnF,OAAO,QAAQ;AACf,SAAS,iBAA2B;AACpC,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,yBAAyB;AA0C3B,SAAS,KAAK,OAA4C;AAC/D,QAAM,SAAS,WAAW,EAAE,SAAS,WAAoB,GAAG,KAAK;AACjE,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAID,QAAM,SAAS,SAAS,MAAM,MAAM,MAAM;AAC1C,QAAM,cAAc,MAAe,CAAC,CAAC,MAAM,WAAW,CAAC,MAAM;AAK7D,QAAM,CAAC,SAAS,GAAG,IAAI,kBAAkB,MAAM,MAAM,CAAC,CAAC,MAAM,OAAO;AACpE,MAAI;AAKJ,QAAM,gBAAiE,CAAC,UAAU;AAChF,gBAAY,MAAM,WAAW,KAAK;AAClC,QAAI,CAAC,YAAY,KAAK,MAAM,WAAW,QAAS;AAChD,QAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;AAC9C,YAAM,eAAe;AACrB,kBAAY,MAAM,SAAS,KAAmF;AAAA,IAChH;AAAA,EACF;AAMA,QAAM,cAA4D,CAAC,UAAU;AAC3E,QAAI,WAAW,OAAO,WAAW,IAAI,EAAG,aAAY,MAAM,SAAS,KAAK;AAAA,EAC1E;AAEA,SACE,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,aAAa,MAAM,aAAa,KAAK;AAAA,IACrC,OAAO,GAAG,aAAa,aAAa,MAAM,OAAO,IAAI,MAAM,OAAO;AAAA,MAChE,eAAe,MAAM;AAAA,MACrB,yBAAyB,YAAY;AAAA,IACvC,CAAC;AAAA,IAID,eAAgB,CAAC,MAAM,WAAW,MAAM,YAAa;AAAA,IACrD,SAAS,YAAY,IAAI,cAAc;AAAA,IACvC,WAAW;AAAA,GACZ;AAAA,MACC,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,CAAC,OAAQ,UAAU;AAAA,IACxB,MAAM;AAAA,IAKN,MAAM,MAAM,UAAU,WAAW;AAAA,IACjC,UAAU,QAAQ,aAAa,YAAY,IAAI,IAAI;AAAA,IACnD,eAAgB,CAAC,CAAC,MAAM,WAAW,MAAM,YAAa;AAAA,GACvD;AAAA,QACC,CAAC,KAAK,MAAM,MAAM,OAAO;AAAA,UACvB,CAAC,IAAI,MAAM,oBAAoB,MAAM,MAAM,EAA1C,IAAgD;AAAA,QACnD,EAFC,KAEM;AAAA,SACN,MAAM,SAAS;AAAA,MAClB,EAhBC,IAgBK;AAAA;AAAA;AAAA,GACyE;AAAA,MAC/E,CAAC,KAAK,MAAM,OAAO,GAAG;AAAA,QACpB,CAAC,IAAI,MAAM,qBAAqB,OAAO,EAAE,EAAxC,IAA8C;AAAA,MACjD,EAFC,KAEM;AAAA,IACT,EApCC;AAsCL;AAEA,IAAO,eAAQ;","names":[],"file":"card.jsx"}

package/dist/headless/source/components/dataDisplay/carousel/carousel.jsx

@@ -179,6 +179,12 @@ function Carousel(props) {
     trackEl.addEventListener(mouse ? "mouseup" : "touchend", onEnd);
     if (mouse) trackEl.addEventListener("mouseleave", onEnd);
   };
+  const onMouseEnter = () => {
+    if (local.pauseOnHover) setIsHovered(true);
+  };
+  const onMouseLeave = () => {
+    setIsHovered(false);
+  };
   const onSlideClick = (index) => {
     if (motion.dragged) return;
     if (local.enableFullscreen) setFullscreenIndex(index);
@@ -279,8 +285,8 @@ function Carousel(props) {
     aria-roledescription="carousel"
     aria-label={local["aria-label"]}
     style={rootStyle()}
-    onMouseEnter={local.pauseOnHover ? () => setIsHovered(true) : void 0}
-    onMouseLeave={local.pauseOnHover ? () => setIsHovered(false) : void 0}
+    onMouseEnter={onMouseEnter}
+    onMouseLeave={onMouseLeave}
   >
       <div class="smwb-carousel__inner" ref={(el) => rootEl = el}>
         <Show when={showArrows()}>
@@ -314,7 +320,7 @@ function Carousel(props) {
       "smwb-carousel__slide-inner",
       local.enableFullscreen && "smwb-carousel__slide-inner_clickable"
     )}
-    onClick={local.enableFullscreen ? () => onSlideClick(index()) : void 0}
+    onClick={() => onSlideClick(index())}
   >
                     {child}
                   </div>

package/dist/headless/source/components/dataDisplay/carousel/carousel.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/dataDisplay/carousel/carousel.tsx"],"sourcesContent":["import {\n  type JSX,\n  type ParentProps,\n  For,\n  Show,\n  children as resolveChildren,\n  createEffect,\n  createMemo,\n  createSignal,\n  createUniqueId,\n  mergeProps,\n  onCleanup,\n  splitProps,\n} from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { Modal } from \"../../feedBack/modal\";\nimport {\n  clamp,\n  coordX,\n  coordY,\n  dragPrevent,\n  getSlideIndexForMultipleParts,\n  getSlideStyle,\n  getSlideWidth,\n  getSlidesToShow,\n  getStartSlide,\n  isMouseEvent,\n  isTouchEvent,\n  toCssLength,\n  toCssNumber,\n} from \"./utils\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface CarouselProps {\n  slidesToShow?: number;\n  startSlide?: number;\n  class?: string;\n  showNavigation?: boolean;\n  showArrows?: boolean;\n  arrowsSize?: number;\n  navigationClassName?: string;\n  onSlideChange?: (slideIndex: number) => void;\n  navigationDotRenderer?: (index: number, isActive: boolean, onClick: (index: number) => void) => JSX.Element;\n  \"aria-label\"?: string;\n  autoplay?: boolean;\n  autoplayInterval?: number;\n  pauseOnHover?: boolean;\n  /** Height of each cell/photo. Number is treated as px. Overrides the default 205px. */\n  cellHeight?: number | string;\n  /** Aspect ratio of each cell/photo (e.g. 0.9 or \"16 / 9\"). Overrides the default 0.9. */\n  aspectRatio?: number | string;\n  /** Per-side spacing around each slide. Number is treated as px (default 4). */\n  gap?: number | string;\n  /** Max width of the carousel. Number is treated as px (default 412). */\n  maxWidth?: number | string;\n  /** Open the clicked slide in a fullscreen lightbox (arrows / swipe / Esc to navigate & close). */\n  enableFullscreen?: boolean;\n  ref?: Ref<HTMLDivElement>;\n}\n\ntype Axis = \"x\" | \"y\" | null;\n\ninterface Motion {\n  isPressed: boolean;\n  startX: number;\n  startY: number;\n  lastX: number;\n  lastT: number;\n  axis: Axis;\n  dragged: boolean;\n}\n\nconst TAP_THRESHOLD = 8;\nconst FLICK_VELOCITY = 0.4;\n\nconst now = (): number => (typeof performance !== \"undefined\" ? performance.now() : Date.now());\n\nexport function Carousel(props: ParentProps<CarouselProps>): JSX.Element {\n  const merged = mergeProps(\n    {\n      slidesToShow: 3,\n      startSlide: 0,\n      showNavigation: true,\n      arrowsSize: 30,\n      \"aria-label\": \"Carousel\",\n      autoplay: false,\n      autoplayInterval: 4000,\n      pauseOnHover: true,\n      enableFullscreen: false,\n    },\n    props\n  );\n  const [local] = splitProps(merged, [\n    \"slidesToShow\",\n    \"startSlide\",\n    \"children\",\n    \"class\",\n    \"showNavigation\",\n    \"showArrows\",\n    \"arrowsSize\",\n    \"navigationClassName\",\n    \"onSlideChange\",\n    \"navigationDotRenderer\",\n    \"aria-label\",\n    \"autoplay\",\n    \"autoplayInterval\",\n    \"pauseOnHover\",\n    \"cellHeight\",\n    \"aspectRatio\",\n    \"gap\",\n    \"maxWidth\",\n    \"enableFullscreen\",\n    \"ref\",\n  ]);\n\n  const resolved = resolveChildren(() => local.children);\n  const slides = (): unknown[] => resolved.toArray();\n  const slidesCount = (): number => slides().length;\n  const slidesToShow = (): number => getSlidesToShow(local.slidesToShow, slidesCount());\n  const startSlide = (): number => getStartSlide(local.startSlide, slidesCount());\n  const showArrows = (): boolean => !!local.showArrows && slidesCount() > 1;\n  const maxShift = (): number => Math.max(0, slidesCount() - slidesToShow());\n\n  const [activeSlideIndex, setActiveSlideIndex] = createSignal(startSlide());\n  const [animation, setAnimation] = createSignal<boolean | undefined>(undefined);\n  const [isHovered, setIsHovered] = createSignal(false);\n  const [dragPx, setDragPx] = createSignal(0);\n  const [isDragging, setIsDragging] = createSignal(false);\n  const [fullscreenIndex, setFullscreenIndex] = createSignal<number | null>(null);\n  const [fullscreenDragPx, setFullscreenDragPx] = createSignal(0);\n  const [isFullscreenDragging, setIsFullscreenDragging] = createSignal(false);\n\n  let rootEl: HTMLDivElement | undefined;\n  let trackEl: HTMLDivElement | undefined;\n  const motion: Motion = { isPressed: false, startX: 0, startY: 0, lastX: 0, lastT: 0, axis: null, dragged: false };\n  let fullscreenTouchX: number | null = null;\n  const slideId = createUniqueId();\n\n  createEffect(() => {\n    slidesToShow();\n    setAnimation(false);\n  });\n\n  createEffect(() => {\n    const start = startSlide();\n    setActiveSlideIndex(start);\n    local.onSlideChange?.(start);\n    if (animation() !== undefined) setAnimation(true);\n  });\n\n  const goToSlide = (index: number): void => {\n    const target = clamp(index, 0, maxShift());\n    setActiveSlideIndex(target);\n    setAnimation(true);\n    local.onSlideChange?.(target);\n  };\n\n  const detachListeners = (mouse: boolean): void => {\n    if (!trackEl) return;\n    trackEl.removeEventListener(mouse ? \"mousemove\" : \"touchmove\", onMove as EventListener);\n    trackEl.removeEventListener(mouse ? \"mouseup\" : \"touchend\", onEnd as EventListener);\n    if (mouse) trackEl.removeEventListener(\"mouseleave\", onEnd as EventListener);\n  };\n\n  const onMove = (event: MouseEvent | TouchEvent): void => {\n    if (!rootEl || !motion.isPressed) return;\n    if (isTouchEvent(event) && event.touches.length > 1) {\n      onEnd(event);\n      return;\n    }\n\n    const clientX = coordX(event);\n    const clientY = coordY(event);\n    const shiftX = clientX - motion.startX;\n    const shiftY = clientY - motion.startY;\n\n    if (motion.axis === null) {\n      if (Math.abs(shiftX) < TAP_THRESHOLD && Math.abs(shiftY) < TAP_THRESHOLD) return;\n      motion.axis = Math.abs(shiftX) >= Math.abs(shiftY) ? \"x\" : \"y\";\n      motion.dragged = true;\n      if (motion.axis === \"y\") {\n        onEnd(event);\n        return;\n      }\n      if (slidesCount() > 1) setIsDragging(true);\n    }\n\n    if (motion.axis !== \"x\") return;\n\n    event.preventDefault();\n    event.stopPropagation();\n\n    if (slidesCount() > 1) {\n      const atStart = activeSlideIndex() <= 0;\n      const atEnd = activeSlideIndex() >= maxShift();\n      const offset = (atStart && shiftX > 0) || (atEnd && shiftX < 0) ? shiftX * 0.35 : shiftX;\n      setDragPx(offset);\n    }\n\n    motion.lastX = clientX;\n    motion.lastT = now();\n  };\n\n  const onEnd = (event: MouseEvent | TouchEvent): void => {\n    if (!motion.isPressed) return;\n\n    const mouse = isMouseEvent(event);\n    detachListeners(mouse);\n\n    const { axis, dragged, startX, lastX, lastT } = motion;\n    motion.isPressed = false;\n    setIsDragging(false);\n\n    if (axis === \"x\" && dragged && slidesCount() > 1 && rootEl) {\n      const clientX = coordX(event);\n      const totalShift = clientX - startX;\n      const widthPerSlide = rootEl.offsetWidth / slidesToShow();\n      const velocity = lastT ? (clientX - lastX) / Math.max(1, now() - lastT) : 0;\n\n      let movedSlides = widthPerSlide > 0 ? Math.round(-totalShift / widthPerSlide) : 0;\n      if (movedSlides === 0 && Math.abs(velocity) > FLICK_VELOCITY) {\n        movedSlides = velocity < 0 ? 1 : -1;\n      }\n      goToSlide(activeSlideIndex() + movedSlides);\n    }\n\n    setDragPx(0);\n  };\n\n  const onStart: JSX.EventHandler<HTMLDivElement, MouseEvent | TouchEvent> = (event) => {\n    if (!trackEl) return;\n    const mouse = isMouseEvent(event);\n    if (mouse && (event as MouseEvent).button !== 0) return;\n    event.stopPropagation();\n\n    motion.isPressed = true;\n    motion.startX = coordX(event);\n    motion.startY = coordY(event);\n    motion.lastX = motion.startX;\n    motion.lastT = now();\n    motion.axis = null;\n    motion.dragged = false;\n\n    trackEl.addEventListener(mouse ? \"mousemove\" : \"touchmove\", onMove as EventListener, { passive: false });\n    trackEl.addEventListener(mouse ? \"mouseup\" : \"touchend\", onEnd as EventListener);\n    if (mouse) trackEl.addEventListener(\"mouseleave\", onEnd as EventListener);\n  };\n\n  const onSlideClick = (index: number): void => {\n    if (motion.dragged) return;\n    if (local.enableFullscreen) setFullscreenIndex(index);\n  };\n\n  const getNextIndex = (direction: 1 | -1): number => {\n    const isSingle = slidesToShow() === 1;\n    const totalGroups = isSingle ? slidesCount() : Math.ceil(slidesCount() / slidesToShow());\n    const activeIndex = activeSlideIndex() + slidesToShow();\n    const isNextDisabled = slidesCount() - slidesToShow() <= activeSlideIndex();\n    const currentIndex = getSlideIndexForMultipleParts(activeIndex, slidesToShow(), slidesCount(), isNextDisabled);\n    const nextIndex = (currentIndex + direction + totalGroups) % totalGroups;\n    return isSingle ? nextIndex : nextIndex * slidesToShow();\n  };\n\n  const dots = (): Array<{ index: number; nextIndex: number; isActive: boolean }> => {\n    const isNextDisabled = slidesCount() - slidesToShow() <= activeSlideIndex();\n    const isSingle = slidesToShow() === 1;\n    const count = isSingle ? slidesCount() : Math.ceil(slidesCount() / slidesToShow());\n    const result: Array<{ index: number; nextIndex: number; isActive: boolean }> = [];\n    for (let index = 0; index < count; index++) {\n      let nextIndex = index;\n      let currentIndex = activeSlideIndex();\n      if (!isSingle) {\n        const isLast = index === count - 1;\n        const activeIndex = activeSlideIndex() + slidesToShow();\n        nextIndex = isLast ? slidesCount() - slidesToShow() : index * slidesToShow();\n        currentIndex = getSlideIndexForMultipleParts(activeIndex, slidesToShow(), slidesCount(), isNextDisabled);\n      }\n      result.push({ index, nextIndex, isActive: currentIndex === index });\n    }\n    return result;\n  };\n\n  const indent = (): number => {\n    const shiftSlides = activeSlideIndex() > maxShift() ? maxShift() : activeSlideIndex();\n    return getSlideWidth(slidesToShow()) * shiftSlides;\n  };\n\n  const rootStyle = createMemo<JSX.CSSProperties>(() => {\n    const style: Record<string, string> = {};\n    const cellHeightValue = toCssLength(local.cellHeight);\n    const aspectRatioValue = toCssNumber(local.aspectRatio);\n    const gapValue = toCssLength(local.gap);\n    const maxWidthValue = toCssLength(local.maxWidth);\n    if (cellHeightValue) style[\"--smwb-carousel-cell-height\"] = cellHeightValue;\n    if (aspectRatioValue) style[\"--smwb-carousel-aspect-ratio\"] = aspectRatioValue;\n    if (gapValue) style[\"--smwb-carousel-gap\"] = gapValue;\n    if (maxWidthValue) style[\"--smwb-carousel-max-width\"] = maxWidthValue;\n    return style;\n  });\n\n  const moveFullscreen = (direction: 1 | -1): void => {\n    const prev = fullscreenIndex();\n    if (prev === null) return;\n    setFullscreenIndex((prev + direction + slidesCount()) % slidesCount());\n  };\n\n  // A DOM node can only live in one place, so the carousel's own slide nodes\n  // can't be reused inside the modal — render clones of every slide into a\n  // sliding track so navigation animates smoothly instead of swapping nodes.\n  const fullscreenClones = createMemo<Array<Node | string>>(() =>\n    slides().map((node) => {\n      // `Node` is a browser global — guard it so this memo (which is evaluated\n      // during render) does not throw `Node is not defined` under SSR.\n      if (typeof Node !== \"undefined\" && node instanceof Node) return node.cloneNode(true);\n      return node == null ? \"\" : String(node);\n    })\n  );\n\n  // Autoplay\n  createEffect(() => {\n    if (!local.autoplay || slidesCount() <= 1 || (local.pauseOnHover && isHovered()) || fullscreenIndex() !== null) {\n      return;\n    }\n    const timer = window.setInterval(() => goToSlide(getNextIndex(1)), local.autoplayInterval);\n    onCleanup(() => window.clearInterval(timer));\n  });\n\n  // Keyboard navigation while the lightbox is open.\n  createEffect(() => {\n    if (fullscreenIndex() === null || slidesCount() <= 1) return;\n    const onKeyDown = (event: KeyboardEvent): void => {\n      if (event.key === \"ArrowLeft\") moveFullscreen(-1);\n      else if (event.key === \"ArrowRight\") moveFullscreen(1);\n    };\n    document.addEventListener(\"keydown\", onKeyDown);\n    onCleanup(() => document.removeEventListener(\"keydown\", onKeyDown));\n  });\n\n  const onFullscreenTouchStart = (event: TouchEvent): void => {\n    fullscreenTouchX = event.touches[0]?.clientX ?? null;\n  };\n\n  const onFullscreenTouchMove = (event: TouchEvent): void => {\n    if (fullscreenTouchX === null || slidesCount() <= 1) return;\n    const delta = (event.touches[0]?.clientX ?? fullscreenTouchX) - fullscreenTouchX;\n    setIsFullscreenDragging(true);\n    setFullscreenDragPx(delta);\n  };\n\n  const onFullscreenTouchEnd = (event: TouchEvent): void => {\n    const startX = fullscreenTouchX;\n    fullscreenTouchX = null;\n    setIsFullscreenDragging(false);\n    setFullscreenDragPx(0);\n    if (startX === null || slidesCount() <= 1) return;\n    const delta = (event.changedTouches[0]?.clientX ?? startX) - startX;\n    if (Math.abs(delta) > 40) moveFullscreen(delta < 0 ? 1 : -1);\n  };\n\n  return (\n    <div\n      class={cn(\"smwb-carousel\", local.class)}\n      data-testid=\"carousel\"\n      ref={mergeRefs(local.ref)}\n      role=\"region\"\n      aria-roledescription=\"carousel\"\n      aria-label={local[\"aria-label\"]}\n      style={rootStyle()}\n      onMouseEnter={local.pauseOnHover ? () => setIsHovered(true) : undefined}\n      onMouseLeave={local.pauseOnHover ? () => setIsHovered(false) : undefined}\n    >\n      <div class=\"smwb-carousel__inner\" ref={(el) => (rootEl = el)}>\n        <Show when={showArrows()}>\n          <Icon\n            name=\"chevron_left\"\n            size={local.arrowsSize}\n            class={cn(\"smwb-carousel__arrow\", \"smwb-carousel__arrow_prev\")}\n            style={{ top: `calc(50% - ${local.arrowsSize / 2}px)`, left: `${-local.arrowsSize / 2}px` }}\n            onClick={() => goToSlide(getNextIndex(-1))}\n          />\n        </Show>\n        <div\n          ref={(el) => (trackEl = el)}\n          class=\"smwb-carousel__track\"\n          onMouseDown={onStart}\n          onTouchStart={onStart}\n          onDragStart={dragPrevent}\n          onDragEnd={dragPrevent}\n        >\n          <div\n            class=\"smwb-carousel__layer\"\n            style={{\n              transform: `translateX(calc(-${indent()}% + ${dragPx()}px))`,\n              transition:\n                isDragging() || animation() === undefined\n                  ? \"none\"\n                  : animation()\n                    ? \"transform 500ms cubic-bezier(.1, 0, .25, 1)\"\n                    : \"none\",\n            }}\n          >\n            <For each={slides()}>\n              {(child, index) => (\n                <div id={`${slideId}${index()}`} class=\"smwb-carousel__slide\" style={getSlideStyle(slidesToShow())}>\n                  <div\n                    class={cn(\n                      \"smwb-carousel__slide-inner\",\n                      local.enableFullscreen && \"smwb-carousel__slide-inner_clickable\"\n                    )}\n                    onClick={local.enableFullscreen ? () => onSlideClick(index()) : undefined}\n                  >\n                    {child as JSX.Element}\n                  </div>\n                </div>\n              )}\n            </For>\n          </div>\n        </div>\n        <Show when={showArrows()}>\n          <Icon\n            name=\"chevron_right\"\n            size={local.arrowsSize}\n            class={cn(\"smwb-carousel__arrow\", \"smwb-carousel__arrow_next\")}\n            style={{ top: `calc(50% - ${local.arrowsSize / 2}px)`, right: `${-local.arrowsSize / 2}px` }}\n            onClick={() => goToSlide(getNextIndex(1))}\n          />\n        </Show>\n      </div>\n      <Show when={local.showNavigation}>\n        <div class={cn(\"smwb-carousel__navigation\", local.navigationClassName)}>\n          <For each={dots()}>\n            {(dot) =>\n              local.navigationDotRenderer ? (\n                local.navigationDotRenderer(dot.index, dot.isActive, (i) => goToSlide(i))\n              ) : (\n                <div\n                  class={cn(\"smwb-carousel__navigation__dot\", dot.isActive && \"current\")}\n                  onClick={() => goToSlide(dot.nextIndex)}\n                />\n              )\n            }\n          </For>\n        </div>\n      </Show>\n      <Show when={local.enableFullscreen}>\n        <Modal\n          open={fullscreenIndex() !== null}\n          size=\"fullscreen\"\n          backdrop=\"darkBlured\"\n          class=\"smwb-carousel__fullscreen\"\n          onClose={() => setFullscreenIndex(null)}\n          aria-label=\"Image viewer\"\n        >\n          <div class=\"smwb-carousel__fullscreen-content\">\n            <Show when={slidesCount() > 1}>\n              <Icon\n                name=\"chevron_left\"\n                size={40}\n                class={cn(\"smwb-carousel__fullscreen-arrow\", \"smwb-carousel__fullscreen-arrow_prev\")}\n                onClick={() => moveFullscreen(-1)}\n              />\n            </Show>\n            <div\n              class=\"smwb-carousel__fullscreen-stage\"\n              onTouchStart={onFullscreenTouchStart}\n              onTouchMove={onFullscreenTouchMove}\n              onTouchEnd={onFullscreenTouchEnd}\n            >\n              <div\n                class=\"smwb-carousel__fullscreen-track\"\n                style={{\n                  transform: `translateX(calc(-${(fullscreenIndex() ?? 0) * 100}% + ${fullscreenDragPx()}px))`,\n                  transition: isFullscreenDragging() ? \"none\" : \"transform 350ms cubic-bezier(.22, .61, .36, 1)\",\n                }}\n              >\n                <For each={fullscreenClones()}>\n                  {(node, index) => (\n                    <div class=\"smwb-carousel__fullscreen-slide\" aria-hidden={index() !== fullscreenIndex()}>\n                      {node as JSX.Element}\n                    </div>\n                  )}\n                </For>\n              </div>\n            </div>\n            <Show when={slidesCount() > 1}>\n              <Icon\n                name=\"chevron_right\"\n                size={40}\n                class={cn(\"smwb-carousel__fullscreen-arrow\", \"smwb-carousel__fullscreen-arrow_next\")}\n                onClick={() => moveFullscreen(1)}\n              />\n            </Show>\n            <Icon\n              name=\"close\"\n              size={32}\n              class=\"smwb-carousel__fullscreen-close\"\n              onClick={() => setFullscreenIndex(null)}\n            />\n          </div>\n        </Modal>\n      </Show>\n    </div>\n  );\n}\n\nexport default Carousel;\n"],"mappings":"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","names":[],"file":"carousel.jsx"}
+{"version":3,"sources":["../../../../../../src/components/dataDisplay/carousel/carousel.tsx"],"sourcesContent":["import {\n  type JSX,\n  type ParentProps,\n  For,\n  Show,\n  children as resolveChildren,\n  createEffect,\n  createMemo,\n  createSignal,\n  createUniqueId,\n  mergeProps,\n  onCleanup,\n  splitProps,\n} from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { Modal } from \"../../feedBack/modal\";\nimport {\n  clamp,\n  coordX,\n  coordY,\n  dragPrevent,\n  getSlideIndexForMultipleParts,\n  getSlideStyle,\n  getSlideWidth,\n  getSlidesToShow,\n  getStartSlide,\n  isMouseEvent,\n  isTouchEvent,\n  toCssLength,\n  toCssNumber,\n} from \"./utils\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface CarouselProps {\n  slidesToShow?: number;\n  startSlide?: number;\n  class?: string;\n  showNavigation?: boolean;\n  showArrows?: boolean;\n  arrowsSize?: number;\n  navigationClassName?: string;\n  onSlideChange?: (slideIndex: number) => void;\n  navigationDotRenderer?: (index: number, isActive: boolean, onClick: (index: number) => void) => JSX.Element;\n  \"aria-label\"?: string;\n  autoplay?: boolean;\n  autoplayInterval?: number;\n  pauseOnHover?: boolean;\n  /** Height of each cell/photo. Number is treated as px. Overrides the default 205px. */\n  cellHeight?: number | string;\n  /** Aspect ratio of each cell/photo (e.g. 0.9 or \"16 / 9\"). Overrides the default 0.9. */\n  aspectRatio?: number | string;\n  /** Per-side spacing around each slide. Number is treated as px (default 4). */\n  gap?: number | string;\n  /** Max width of the carousel. Number is treated as px (default 412). */\n  maxWidth?: number | string;\n  /** Open the clicked slide in a fullscreen lightbox (arrows / swipe / Esc to navigate & close). */\n  enableFullscreen?: boolean;\n  ref?: Ref<HTMLDivElement>;\n}\n\ntype Axis = \"x\" | \"y\" | null;\n\ninterface Motion {\n  isPressed: boolean;\n  startX: number;\n  startY: number;\n  lastX: number;\n  lastT: number;\n  axis: Axis;\n  dragged: boolean;\n}\n\nconst TAP_THRESHOLD = 8;\nconst FLICK_VELOCITY = 0.4;\n\nconst now = (): number => (typeof performance !== \"undefined\" ? performance.now() : Date.now());\n\nexport function Carousel(props: ParentProps<CarouselProps>): JSX.Element {\n  const merged = mergeProps(\n    {\n      slidesToShow: 3,\n      startSlide: 0,\n      showNavigation: true,\n      arrowsSize: 30,\n      \"aria-label\": \"Carousel\",\n      autoplay: false,\n      autoplayInterval: 4000,\n      pauseOnHover: true,\n      enableFullscreen: false,\n    },\n    props\n  );\n  const [local] = splitProps(merged, [\n    \"slidesToShow\",\n    \"startSlide\",\n    \"children\",\n    \"class\",\n    \"showNavigation\",\n    \"showArrows\",\n    \"arrowsSize\",\n    \"navigationClassName\",\n    \"onSlideChange\",\n    \"navigationDotRenderer\",\n    \"aria-label\",\n    \"autoplay\",\n    \"autoplayInterval\",\n    \"pauseOnHover\",\n    \"cellHeight\",\n    \"aspectRatio\",\n    \"gap\",\n    \"maxWidth\",\n    \"enableFullscreen\",\n    \"ref\",\n  ]);\n\n  const resolved = resolveChildren(() => local.children);\n  const slides = (): unknown[] => resolved.toArray();\n  const slidesCount = (): number => slides().length;\n  const slidesToShow = (): number => getSlidesToShow(local.slidesToShow, slidesCount());\n  const startSlide = (): number => getStartSlide(local.startSlide, slidesCount());\n  const showArrows = (): boolean => !!local.showArrows && slidesCount() > 1;\n  const maxShift = (): number => Math.max(0, slidesCount() - slidesToShow());\n\n  const [activeSlideIndex, setActiveSlideIndex] = createSignal(startSlide());\n  const [animation, setAnimation] = createSignal<boolean | undefined>(undefined);\n  const [isHovered, setIsHovered] = createSignal(false);\n  const [dragPx, setDragPx] = createSignal(0);\n  const [isDragging, setIsDragging] = createSignal(false);\n  const [fullscreenIndex, setFullscreenIndex] = createSignal<number | null>(null);\n  const [fullscreenDragPx, setFullscreenDragPx] = createSignal(0);\n  const [isFullscreenDragging, setIsFullscreenDragging] = createSignal(false);\n\n  let rootEl: HTMLDivElement | undefined;\n  let trackEl: HTMLDivElement | undefined;\n  const motion: Motion = { isPressed: false, startX: 0, startY: 0, lastX: 0, lastT: 0, axis: null, dragged: false };\n  let fullscreenTouchX: number | null = null;\n  const slideId = createUniqueId();\n\n  createEffect(() => {\n    slidesToShow();\n    setAnimation(false);\n  });\n\n  createEffect(() => {\n    const start = startSlide();\n    setActiveSlideIndex(start);\n    local.onSlideChange?.(start);\n    if (animation() !== undefined) setAnimation(true);\n  });\n\n  const goToSlide = (index: number): void => {\n    const target = clamp(index, 0, maxShift());\n    setActiveSlideIndex(target);\n    setAnimation(true);\n    local.onSlideChange?.(target);\n  };\n\n  const detachListeners = (mouse: boolean): void => {\n    if (!trackEl) return;\n    trackEl.removeEventListener(mouse ? \"mousemove\" : \"touchmove\", onMove as EventListener);\n    trackEl.removeEventListener(mouse ? \"mouseup\" : \"touchend\", onEnd as EventListener);\n    if (mouse) trackEl.removeEventListener(\"mouseleave\", onEnd as EventListener);\n  };\n\n  const onMove = (event: MouseEvent | TouchEvent): void => {\n    if (!rootEl || !motion.isPressed) return;\n    if (isTouchEvent(event) && event.touches.length > 1) {\n      onEnd(event);\n      return;\n    }\n\n    const clientX = coordX(event);\n    const clientY = coordY(event);\n    const shiftX = clientX - motion.startX;\n    const shiftY = clientY - motion.startY;\n\n    if (motion.axis === null) {\n      if (Math.abs(shiftX) < TAP_THRESHOLD && Math.abs(shiftY) < TAP_THRESHOLD) return;\n      motion.axis = Math.abs(shiftX) >= Math.abs(shiftY) ? \"x\" : \"y\";\n      motion.dragged = true;\n      if (motion.axis === \"y\") {\n        onEnd(event);\n        return;\n      }\n      if (slidesCount() > 1) setIsDragging(true);\n    }\n\n    if (motion.axis !== \"x\") return;\n\n    event.preventDefault();\n    event.stopPropagation();\n\n    if (slidesCount() > 1) {\n      const atStart = activeSlideIndex() <= 0;\n      const atEnd = activeSlideIndex() >= maxShift();\n      const offset = (atStart && shiftX > 0) || (atEnd && shiftX < 0) ? shiftX * 0.35 : shiftX;\n      setDragPx(offset);\n    }\n\n    motion.lastX = clientX;\n    motion.lastT = now();\n  };\n\n  const onEnd = (event: MouseEvent | TouchEvent): void => {\n    if (!motion.isPressed) return;\n\n    const mouse = isMouseEvent(event);\n    detachListeners(mouse);\n\n    const { axis, dragged, startX, lastX, lastT } = motion;\n    motion.isPressed = false;\n    setIsDragging(false);\n\n    if (axis === \"x\" && dragged && slidesCount() > 1 && rootEl) {\n      const clientX = coordX(event);\n      const totalShift = clientX - startX;\n      const widthPerSlide = rootEl.offsetWidth / slidesToShow();\n      const velocity = lastT ? (clientX - lastX) / Math.max(1, now() - lastT) : 0;\n\n      let movedSlides = widthPerSlide > 0 ? Math.round(-totalShift / widthPerSlide) : 0;\n      if (movedSlides === 0 && Math.abs(velocity) > FLICK_VELOCITY) {\n        movedSlides = velocity < 0 ? 1 : -1;\n      }\n      goToSlide(activeSlideIndex() + movedSlides);\n    }\n\n    setDragPx(0);\n  };\n\n  const onStart: JSX.EventHandler<HTMLDivElement, MouseEvent | TouchEvent> = (event) => {\n    if (!trackEl) return;\n    const mouse = isMouseEvent(event);\n    if (mouse && (event as MouseEvent).button !== 0) return;\n    event.stopPropagation();\n\n    motion.isPressed = true;\n    motion.startX = coordX(event);\n    motion.startY = coordY(event);\n    motion.lastX = motion.startX;\n    motion.lastT = now();\n    motion.axis = null;\n    motion.dragged = false;\n\n    trackEl.addEventListener(mouse ? \"mousemove\" : \"touchmove\", onMove as EventListener, { passive: false });\n    trackEl.addEventListener(mouse ? \"mouseup\" : \"touchend\", onEnd as EventListener);\n    if (mouse) trackEl.addEventListener(\"mouseleave\", onEnd as EventListener);\n  };\n\n  // Solid binds event handlers once, so the hover and slide handlers are always\n  // attached and check their props themselves: `pauseOnHover` and\n  // `enableFullscreen` can change after the carousel renders. Leaving always\n  // ends the hover, so a hover that ends while `pauseOnHover` is off does not\n  // pause autoplay once it is back on.\n  const onMouseEnter = (): void => {\n    if (local.pauseOnHover) setIsHovered(true);\n  };\n  const onMouseLeave = (): void => {\n    setIsHovered(false);\n  };\n\n  const onSlideClick = (index: number): void => {\n    if (motion.dragged) return;\n    if (local.enableFullscreen) setFullscreenIndex(index);\n  };\n\n  const getNextIndex = (direction: 1 | -1): number => {\n    const isSingle = slidesToShow() === 1;\n    const totalGroups = isSingle ? slidesCount() : Math.ceil(slidesCount() / slidesToShow());\n    const activeIndex = activeSlideIndex() + slidesToShow();\n    const isNextDisabled = slidesCount() - slidesToShow() <= activeSlideIndex();\n    const currentIndex = getSlideIndexForMultipleParts(activeIndex, slidesToShow(), slidesCount(), isNextDisabled);\n    const nextIndex = (currentIndex + direction + totalGroups) % totalGroups;\n    return isSingle ? nextIndex : nextIndex * slidesToShow();\n  };\n\n  const dots = (): Array<{ index: number; nextIndex: number; isActive: boolean }> => {\n    const isNextDisabled = slidesCount() - slidesToShow() <= activeSlideIndex();\n    const isSingle = slidesToShow() === 1;\n    const count = isSingle ? slidesCount() : Math.ceil(slidesCount() / slidesToShow());\n    const result: Array<{ index: number; nextIndex: number; isActive: boolean }> = [];\n    for (let index = 0; index < count; index++) {\n      let nextIndex = index;\n      let currentIndex = activeSlideIndex();\n      if (!isSingle) {\n        const isLast = index === count - 1;\n        const activeIndex = activeSlideIndex() + slidesToShow();\n        nextIndex = isLast ? slidesCount() - slidesToShow() : index * slidesToShow();\n        currentIndex = getSlideIndexForMultipleParts(activeIndex, slidesToShow(), slidesCount(), isNextDisabled);\n      }\n      result.push({ index, nextIndex, isActive: currentIndex === index });\n    }\n    return result;\n  };\n\n  const indent = (): number => {\n    const shiftSlides = activeSlideIndex() > maxShift() ? maxShift() : activeSlideIndex();\n    return getSlideWidth(slidesToShow()) * shiftSlides;\n  };\n\n  const rootStyle = createMemo<JSX.CSSProperties>(() => {\n    const style: Record<string, string> = {};\n    const cellHeightValue = toCssLength(local.cellHeight);\n    const aspectRatioValue = toCssNumber(local.aspectRatio);\n    const gapValue = toCssLength(local.gap);\n    const maxWidthValue = toCssLength(local.maxWidth);\n    if (cellHeightValue) style[\"--smwb-carousel-cell-height\"] = cellHeightValue;\n    if (aspectRatioValue) style[\"--smwb-carousel-aspect-ratio\"] = aspectRatioValue;\n    if (gapValue) style[\"--smwb-carousel-gap\"] = gapValue;\n    if (maxWidthValue) style[\"--smwb-carousel-max-width\"] = maxWidthValue;\n    return style;\n  });\n\n  const moveFullscreen = (direction: 1 | -1): void => {\n    const prev = fullscreenIndex();\n    if (prev === null) return;\n    setFullscreenIndex((prev + direction + slidesCount()) % slidesCount());\n  };\n\n  // A DOM node can only live in one place, so the carousel's own slide nodes\n  // can't be reused inside the modal — render clones of every slide into a\n  // sliding track so navigation animates smoothly instead of swapping nodes.\n  const fullscreenClones = createMemo<Array<Node | string>>(() =>\n    slides().map((node) => {\n      // `Node` is a browser global — guard it so this memo (which is evaluated\n      // during render) does not throw `Node is not defined` under SSR.\n      if (typeof Node !== \"undefined\" && node instanceof Node) return node.cloneNode(true);\n      return node == null ? \"\" : String(node);\n    })\n  );\n\n  // Autoplay\n  createEffect(() => {\n    if (!local.autoplay || slidesCount() <= 1 || (local.pauseOnHover && isHovered()) || fullscreenIndex() !== null) {\n      return;\n    }\n    const timer = window.setInterval(() => goToSlide(getNextIndex(1)), local.autoplayInterval);\n    onCleanup(() => window.clearInterval(timer));\n  });\n\n  // Keyboard navigation while the lightbox is open.\n  createEffect(() => {\n    if (fullscreenIndex() === null || slidesCount() <= 1) return;\n    const onKeyDown = (event: KeyboardEvent): void => {\n      if (event.key === \"ArrowLeft\") moveFullscreen(-1);\n      else if (event.key === \"ArrowRight\") moveFullscreen(1);\n    };\n    document.addEventListener(\"keydown\", onKeyDown);\n    onCleanup(() => document.removeEventListener(\"keydown\", onKeyDown));\n  });\n\n  const onFullscreenTouchStart = (event: TouchEvent): void => {\n    fullscreenTouchX = event.touches[0]?.clientX ?? null;\n  };\n\n  const onFullscreenTouchMove = (event: TouchEvent): void => {\n    if (fullscreenTouchX === null || slidesCount() <= 1) return;\n    const delta = (event.touches[0]?.clientX ?? fullscreenTouchX) - fullscreenTouchX;\n    setIsFullscreenDragging(true);\n    setFullscreenDragPx(delta);\n  };\n\n  const onFullscreenTouchEnd = (event: TouchEvent): void => {\n    const startX = fullscreenTouchX;\n    fullscreenTouchX = null;\n    setIsFullscreenDragging(false);\n    setFullscreenDragPx(0);\n    if (startX === null || slidesCount() <= 1) return;\n    const delta = (event.changedTouches[0]?.clientX ?? startX) - startX;\n    if (Math.abs(delta) > 40) moveFullscreen(delta < 0 ? 1 : -1);\n  };\n\n  return (\n    <div\n      class={cn(\"smwb-carousel\", local.class)}\n      data-testid=\"carousel\"\n      ref={mergeRefs(local.ref)}\n      role=\"region\"\n      aria-roledescription=\"carousel\"\n      aria-label={local[\"aria-label\"]}\n      style={rootStyle()}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n    >\n      <div class=\"smwb-carousel__inner\" ref={(el) => (rootEl = el)}>\n        <Show when={showArrows()}>\n          <Icon\n            name=\"chevron_left\"\n            size={local.arrowsSize}\n            class={cn(\"smwb-carousel__arrow\", \"smwb-carousel__arrow_prev\")}\n            style={{ top: `calc(50% - ${local.arrowsSize / 2}px)`, left: `${-local.arrowsSize / 2}px` }}\n            onClick={() => goToSlide(getNextIndex(-1))}\n          />\n        </Show>\n        <div\n          ref={(el) => (trackEl = el)}\n          class=\"smwb-carousel__track\"\n          onMouseDown={onStart}\n          onTouchStart={onStart}\n          onDragStart={dragPrevent}\n          onDragEnd={dragPrevent}\n        >\n          <div\n            class=\"smwb-carousel__layer\"\n            style={{\n              transform: `translateX(calc(-${indent()}% + ${dragPx()}px))`,\n              transition:\n                isDragging() || animation() === undefined\n                  ? \"none\"\n                  : animation()\n                    ? \"transform 500ms cubic-bezier(.1, 0, .25, 1)\"\n                    : \"none\",\n            }}\n          >\n            <For each={slides()}>\n              {(child, index) => (\n                <div id={`${slideId}${index()}`} class=\"smwb-carousel__slide\" style={getSlideStyle(slidesToShow())}>\n                  <div\n                    class={cn(\n                      \"smwb-carousel__slide-inner\",\n                      local.enableFullscreen && \"smwb-carousel__slide-inner_clickable\"\n                    )}\n                    onClick={() => onSlideClick(index())}\n                  >\n                    {child as JSX.Element}\n                  </div>\n                </div>\n              )}\n            </For>\n          </div>\n        </div>\n        <Show when={showArrows()}>\n          <Icon\n            name=\"chevron_right\"\n            size={local.arrowsSize}\n            class={cn(\"smwb-carousel__arrow\", \"smwb-carousel__arrow_next\")}\n            style={{ top: `calc(50% - ${local.arrowsSize / 2}px)`, right: `${-local.arrowsSize / 2}px` }}\n            onClick={() => goToSlide(getNextIndex(1))}\n          />\n        </Show>\n      </div>\n      <Show when={local.showNavigation}>\n        <div class={cn(\"smwb-carousel__navigation\", local.navigationClassName)}>\n          <For each={dots()}>\n            {(dot) =>\n              local.navigationDotRenderer ? (\n                local.navigationDotRenderer(dot.index, dot.isActive, (i) => goToSlide(i))\n              ) : (\n                <div\n                  class={cn(\"smwb-carousel__navigation__dot\", dot.isActive && \"current\")}\n                  onClick={() => goToSlide(dot.nextIndex)}\n                />\n              )\n            }\n          </For>\n        </div>\n      </Show>\n      <Show when={local.enableFullscreen}>\n        <Modal\n          open={fullscreenIndex() !== null}\n          size=\"fullscreen\"\n          backdrop=\"darkBlured\"\n          class=\"smwb-carousel__fullscreen\"\n          onClose={() => setFullscreenIndex(null)}\n          aria-label=\"Image viewer\"\n        >\n          <div class=\"smwb-carousel__fullscreen-content\">\n            <Show when={slidesCount() > 1}>\n              <Icon\n                name=\"chevron_left\"\n                size={40}\n                class={cn(\"smwb-carousel__fullscreen-arrow\", \"smwb-carousel__fullscreen-arrow_prev\")}\n                onClick={() => moveFullscreen(-1)}\n              />\n            </Show>\n            <div\n              class=\"smwb-carousel__fullscreen-stage\"\n              onTouchStart={onFullscreenTouchStart}\n              onTouchMove={onFullscreenTouchMove}\n              onTouchEnd={onFullscreenTouchEnd}\n            >\n              <div\n                class=\"smwb-carousel__fullscreen-track\"\n                style={{\n                  transform: `translateX(calc(-${(fullscreenIndex() ?? 0) * 100}% + ${fullscreenDragPx()}px))`,\n                  transition: isFullscreenDragging() ? \"none\" : \"transform 350ms cubic-bezier(.22, .61, .36, 1)\",\n                }}\n              >\n                <For each={fullscreenClones()}>\n                  {(node, index) => (\n                    <div class=\"smwb-carousel__fullscreen-slide\" aria-hidden={index() !== fullscreenIndex()}>\n                      {node as JSX.Element}\n                    </div>\n                  )}\n                </For>\n              </div>\n            </div>\n            <Show when={slidesCount() > 1}>\n              <Icon\n                name=\"chevron_right\"\n                size={40}\n                class={cn(\"smwb-carousel__fullscreen-arrow\", \"smwb-carousel__fullscreen-arrow_next\")}\n                onClick={() => moveFullscreen(1)}\n              />\n            </Show>\n            <Icon\n              name=\"close\"\n              size={32}\n              class=\"smwb-carousel__fullscreen-close\"\n              onClick={() => setFullscreenIndex(null)}\n            />\n          </div>\n        </Modal>\n      </Show>\n    </div>\n  );\n}\n\nexport default Carousel;\n"],"mappings":"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","names":[],"file":"carousel.jsx"}

package/dist/headless/source/components/dataDisplay/chart/chart.jsx

@@ -11,8 +11,8 @@ import {
 import cn from "clsx";
 import { Skeleton } from "../../feedBack/skeleton";
 import { mergeRefs } from "../../../primitives/mergeRefs";
+import { mergeStyle } from "../../../primitives/mergeStyle";
 import { chartTheme, readChartPalette, samePalette } from "./chartTheme";
-const styleObject = (style) => typeof style === "object" && style ? style : {};
 const cssLength = (value) => typeof value === "number" ? `${value}px` : value;
 const loadECharts = () => import("echarts");
 function Chart(props) {
@@ -28,7 +28,8 @@ function Chart(props) {
     "renderer",
     "onClick",
     "onReady",
-    "ref"
+    "ref",
+    "data-testid"
   ]);
   let root;
   let canvas;
@@ -145,11 +146,11 @@ function Chart(props) {
     });
   });
   return <div
-    data-testid="chart"
+    data-testid={local["data-testid"] ?? "chart"}
     {...rest}
     ref={mergeRefs(local.ref, (el) => root = el)}
     class={cn("smwb-chart", local.class)}
-    style={{ ...styleObject(local.style), height: cssLength(local.height) }}
+    style={mergeStyle(local.style, { height: cssLength(local.height) })}
   >
       <div ref={canvas} class="smwb-chart__canvas" role="img" aria-label={local.label} />
       <Show when={!ready()}>

package/dist/headless/source/components/dataDisplay/chart/chart.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/dataDisplay/chart/chart.tsx"],"sourcesContent":["import {\n  type JSX,\n  Show,\n  createEffect,\n  createSignal,\n  mergeProps,\n  onCleanup,\n  onMount,\n  splitProps,\n  untrack,\n} from \"solid-js\";\nimport cn from \"clsx\";\nimport { Skeleton } from \"../../feedBack/skeleton\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { type ChartOption, type ChartPalette, chartTheme, readChartPalette, samePalette } from \"./chartTheme\";\n\n/** What an ECharts event hands its handler: the item under the pointer. */\nexport interface ChartEventParams {\n  componentType?: string;\n  seriesType?: string;\n  seriesIndex?: number;\n  seriesName?: string;\n  name?: string;\n  dataIndex?: number;\n  data?: unknown;\n  value?: unknown;\n  [key: string]: unknown;\n}\n\n/** The part of an ECharts instance the chart uses; `onReady` hands over the instance itself. */\nexport interface ChartInstance {\n  setOption(option: ChartOption, opts?: { notMerge?: boolean }): void;\n  resize(): void;\n  on(eventName: string, handler: (params: ChartEventParams) => void): void;\n  dispose(): void;\n  /** ECharts 6 switches the theme in place; with ECharts 5 the chart is created anew. */\n  setTheme?(theme: object): void;\n}\n\n/** What `loader` resolves to: `echarts`, or `echarts/core` with the charts you use registered. */\nexport interface ChartModule {\n  init(dom: HTMLElement, theme?: object | string | null, opts?: { renderer?: \"canvas\" | \"svg\" }): ChartInstance;\n}\n\nexport interface ChartProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, \"onClick\"> {\n  /** What the chart shows: its accessible name. */\n  label: string;\n  /** The chart in words, for screen readers; it is there before the chart draws, and on the server. */\n  summary?: string;\n  /**\n   * The ECharts option, or a function of the theme's palette that returns it.\n   * It is applied whole whenever it or the theme changes.\n   */\n  option: ChartOption | ((palette: ChartPalette) => ChartOption);\n  /** The chart's height: a number of pixels or any CSS length; 240 by default. It fills the width. */\n  height?: number | string;\n  /**\n   * Loads ECharts in the browser: `import(\"echarts\")` by default, the whole\n   * library. For a smaller bundle pass `() => import(\"./my-echarts\")`, a module\n   * that registers only the charts you use with `echarts/core`.\n   */\n  loader?: () => Promise<ChartModule>;\n  /** How ECharts draws: \"canvas\" (default) or \"svg\". Read once, when the chart is created. */\n  renderer?: \"canvas\" | \"svg\";\n  /** A click on an item: a bar, a point, a node. */\n  onClick?: (params: ChartEventParams) => void;\n  /** The ECharts instance, once it has drawn — for other events and actions. Called again if a theme change re-creates it. */\n  onReady?: (chart: ChartInstance) => void;\n  ref?: Ref<HTMLDivElement>;\n}\n\ntype Style = JSX.CSSProperties | string | undefined;\n\nconst styleObject = (style: Style): JSX.CSSProperties => (typeof style === \"object\" && style ? style : {});\nconst cssLength = (value: number | string): string => (typeof value === \"number\" ? `${value}px` : value);\n\nconst loadECharts = (): Promise<ChartModule> => import(\"echarts\") as unknown as Promise<ChartModule>;\n\n/**\n * An ECharts chart in the theme's palette. On the server, and until ECharts\n * loads in the browser, a skeleton of the same size stands in its place, so\n * the page does not jump; the chart follows theme switches and its box's size.\n */\nexport function Chart(props: ChartProps): JSX.Element {\n  const merged = mergeProps({ height: 240 as number | string, renderer: \"canvas\" as \"canvas\" | \"svg\" }, props);\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"style\",\n    \"label\",\n    \"summary\",\n    \"option\",\n    \"height\",\n    \"loader\",\n    \"renderer\",\n    \"onClick\",\n    \"onReady\",\n    \"ref\",\n  ]);\n\n  let root!: HTMLDivElement;\n  let canvas!: HTMLDivElement;\n  const [palette, setPalette] = createSignal<ChartPalette>();\n  const [ready, setReady] = createSignal(false);\n  let module: ChartModule | undefined;\n  let instance: ChartInstance | undefined;\n  let themed: ChartPalette | undefined;\n  let announced: ChartInstance | undefined;\n  let pending = false;\n\n  const hasSize = (): boolean => canvas.clientWidth > 0 && canvas.clientHeight > 0;\n  const optionFor = (colours: ChartPalette): ChartOption =>\n    typeof local.option === \"function\" ? local.option(colours) : local.option;\n\n  const create = (loaded: ChartModule, colours: ChartPalette): ChartInstance => {\n    const created = loaded.init(canvas, chartTheme(colours), { renderer: local.renderer });\n    created.on(\"click\", (params) => local.onClick?.(params));\n    themed = colours;\n    return created;\n  };\n\n  // Not at zero size (a hidden tab, a collapsed panel): there the graph of\n  // ECharts 6.1 inverts a degenerate matrix and throws. The option waits for\n  // the chart to get a size, and a failed redraw is caught up on the next one.\n  const draw = (option: ChartOption): void => {\n    if (!instance) return;\n    if (!hasSize()) {\n      pending = true;\n      return;\n    }\n    pending = false;\n    try {\n      instance.setOption(option, { notMerge: true });\n    } catch (error) {\n      console.error(\"[smwb] Chart: the option did not draw.\", error);\n    }\n  };\n\n  const retheme = (colours: ChartPalette): void => {\n    if (!instance || !module || (themed && samePalette(themed, colours))) return;\n    if (typeof instance.setTheme === \"function\") {\n      try {\n        instance.setTheme(chartTheme(colours));\n      } catch (error) {\n        console.error(\"[smwb] Chart: the theme did not apply.\", error);\n      }\n      themed = colours;\n    } else {\n      instance.dispose();\n      instance = create(module, colours);\n    }\n  };\n\n  createEffect(() => {\n    const colours = palette();\n    if (!ready() || !colours || !instance) return;\n    retheme(colours);\n    draw(optionFor(colours));\n    const current = instance;\n    if (current && announced !== current) {\n      announced = current;\n      untrack(() => local.onReady?.(current));\n    }\n  });\n\n  onMount(() => {\n    let disposed = false;\n    const refresh = (): void => {\n      const next = readChartPalette(root);\n      const current = untrack(palette);\n      if (!current || !samePalette(current, next)) setPalette(next);\n    };\n    refresh();\n\n    // The theme switches by an attribute on <html> (data-theme, a class) or\n    // with the system setting.\n    const themeObserver = new MutationObserver(() => requestAnimationFrame(refresh));\n    themeObserver.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"data-theme\", \"class\", \"style\"],\n    });\n    const media =\n      typeof window.matchMedia === \"function\" ? window.matchMedia(\"(prefers-color-scheme: dark)\") : undefined;\n    media?.addEventListener(\"change\", refresh);\n\n    // The palette is read again here, not taken from mount: a theme set after\n    // the chart mounted would otherwise show for a frame in the old colours.\n    const start = (): void => {\n      if (disposed || instance || !module || !hasSize()) return;\n      const colours = readChartPalette(root);\n      const current = untrack(palette);\n      if (!current || !samePalette(current, colours)) setPalette(colours);\n      instance = create(module, colours);\n      setReady(true);\n    };\n\n    const onResize = (): void => {\n      if (!hasSize()) return;\n      if (!instance) {\n        start();\n        return;\n      }\n      try {\n        instance.resize();\n      } catch {\n        // It catches up on the next resize.\n      }\n      const colours = untrack(palette);\n      if (pending && colours) draw(untrack(() => optionFor(colours)));\n    };\n    // In the next frame, not in the observer's callback: drawing there resizes\n    // what it observes, and the browser reports a ResizeObserver loop.\n    let frame = 0;\n    const resizeObserver =\n      typeof ResizeObserver === \"function\"\n        ? new ResizeObserver(() => {\n            cancelAnimationFrame(frame);\n            frame = requestAnimationFrame(onResize);\n          })\n        : undefined;\n    resizeObserver?.observe(canvas);\n\n    (local.loader ?? loadECharts)().then(\n      (loaded) => {\n        module = loaded;\n        start();\n      },\n      (error: unknown) => console.error(\"[smwb] Chart: ECharts did not load.\", error)\n    );\n\n    onCleanup(() => {\n      disposed = true;\n      themeObserver.disconnect();\n      media?.removeEventListener(\"change\", refresh);\n      resizeObserver?.disconnect();\n      cancelAnimationFrame(frame);\n      instance?.dispose();\n      instance = undefined;\n    });\n  });\n\n  return (\n    <div\n      data-testid=\"chart\"\n      {...rest}\n      ref={mergeRefs(local.ref, (el) => (root = el))}\n      class={cn(\"smwb-chart\", local.class)}\n      style={{ ...styleObject(local.style), height: cssLength(local.height) }}\n    >\n      <div ref={canvas} class=\"smwb-chart__canvas\" role=\"img\" aria-label={local.label} />\n      <Show when={!ready()}>\n        <Skeleton class=\"smwb-chart__skeleton\" variant=\"rounded\" width=\"100%\" height=\"100%\" />\n      </Show>\n      <Show when={local.summary}>\n        <p class=\"smwb-chart__summary\">{local.summary}</p>\n      </Show>\n    </div>\n  );\n}\n\nexport default Chart;\n"],"mappings":"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","names":[],"file":"chart.jsx"}
+{"version":3,"sources":["../../../../../../src/components/dataDisplay/chart/chart.tsx"],"sourcesContent":["import {\n  type JSX,\n  Show,\n  createEffect,\n  createSignal,\n  mergeProps,\n  onCleanup,\n  onMount,\n  splitProps,\n  untrack,\n} from \"solid-js\";\nimport cn from \"clsx\";\nimport { Skeleton } from \"../../feedBack/skeleton\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { mergeStyle } from \"../../../primitives/mergeStyle\";\nimport { type ChartOption, type ChartPalette, chartTheme, readChartPalette, samePalette } from \"./chartTheme\";\n\n/** What an ECharts event hands its handler: the item under the pointer. */\nexport interface ChartEventParams {\n  componentType?: string;\n  seriesType?: string;\n  seriesIndex?: number;\n  seriesName?: string;\n  name?: string;\n  dataIndex?: number;\n  data?: unknown;\n  value?: unknown;\n  [key: string]: unknown;\n}\n\n/** The part of an ECharts instance the chart uses; `onReady` hands over the instance itself. */\nexport interface ChartInstance {\n  setOption(option: ChartOption, opts?: { notMerge?: boolean }): void;\n  resize(): void;\n  on(eventName: string, handler: (params: ChartEventParams) => void): void;\n  dispose(): void;\n  /** ECharts 6 switches the theme in place; with ECharts 5 the chart is created anew. */\n  setTheme?(theme: object): void;\n}\n\n/** What `loader` resolves to: `echarts`, or `echarts/core` with the charts you use registered. */\nexport interface ChartModule {\n  init(dom: HTMLElement, theme?: object | string | null, opts?: { renderer?: \"canvas\" | \"svg\" }): ChartInstance;\n}\n\nexport interface ChartProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, \"onClick\"> {\n  /** What the chart shows: its accessible name. */\n  label: string;\n  /** The chart in words, for screen readers; it is there before the chart draws, and on the server. */\n  summary?: string;\n  /**\n   * The ECharts option, or a function of the theme's palette that returns it.\n   * It is applied whole whenever it or the theme changes.\n   */\n  option: ChartOption | ((palette: ChartPalette) => ChartOption);\n  /** The chart's height: a number of pixels or any CSS length; 240 by default. It fills the width. */\n  height?: number | string;\n  /**\n   * Loads ECharts in the browser: `import(\"echarts\")` by default, the whole\n   * library. For a smaller bundle pass `() => import(\"./my-echarts\")`, a module\n   * that registers only the charts you use with `echarts/core`.\n   */\n  loader?: () => Promise<ChartModule>;\n  /** How ECharts draws: \"canvas\" (default) or \"svg\". Read once, when the chart is created. */\n  renderer?: \"canvas\" | \"svg\";\n  /** A click on an item: a bar, a point, a node. */\n  onClick?: (params: ChartEventParams) => void;\n  /** The ECharts instance, once it has drawn — for other events and actions. Called again if a theme change re-creates it. */\n  onReady?: (chart: ChartInstance) => void;\n  /** Test id of the root `<div>`; `chart` unless given. */\n  \"data-testid\"?: string | undefined;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst cssLength = (value: number | string): string => (typeof value === \"number\" ? `${value}px` : value);\n\nconst loadECharts = (): Promise<ChartModule> => import(\"echarts\") as unknown as Promise<ChartModule>;\n\n/**\n * An ECharts chart in the theme's palette. On the server, and until ECharts\n * loads in the browser, a skeleton of the same size stands in its place, so\n * the page does not jump; the chart follows theme switches and its box's size.\n */\nexport function Chart(props: ChartProps): JSX.Element {\n  const merged = mergeProps({ height: 240 as number | string, renderer: \"canvas\" as \"canvas\" | \"svg\" }, props);\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"style\",\n    \"label\",\n    \"summary\",\n    \"option\",\n    \"height\",\n    \"loader\",\n    \"renderer\",\n    \"onClick\",\n    \"onReady\",\n    \"ref\",\n    \"data-testid\",\n  ]);\n\n  let root!: HTMLDivElement;\n  let canvas!: HTMLDivElement;\n  const [palette, setPalette] = createSignal<ChartPalette>();\n  const [ready, setReady] = createSignal(false);\n  let module: ChartModule | undefined;\n  let instance: ChartInstance | undefined;\n  let themed: ChartPalette | undefined;\n  let announced: ChartInstance | undefined;\n  let pending = false;\n\n  const hasSize = (): boolean => canvas.clientWidth > 0 && canvas.clientHeight > 0;\n  const optionFor = (colours: ChartPalette): ChartOption =>\n    typeof local.option === \"function\" ? local.option(colours) : local.option;\n\n  const create = (loaded: ChartModule, colours: ChartPalette): ChartInstance => {\n    const created = loaded.init(canvas, chartTheme(colours), { renderer: local.renderer });\n    created.on(\"click\", (params) => local.onClick?.(params));\n    themed = colours;\n    return created;\n  };\n\n  // Not at zero size (a hidden tab, a collapsed panel): there the graph of\n  // ECharts 6.1 inverts a degenerate matrix and throws. The option waits for\n  // the chart to get a size, and a failed redraw is caught up on the next one.\n  const draw = (option: ChartOption): void => {\n    if (!instance) return;\n    if (!hasSize()) {\n      pending = true;\n      return;\n    }\n    pending = false;\n    try {\n      instance.setOption(option, { notMerge: true });\n    } catch (error) {\n      console.error(\"[smwb] Chart: the option did not draw.\", error);\n    }\n  };\n\n  const retheme = (colours: ChartPalette): void => {\n    if (!instance || !module || (themed && samePalette(themed, colours))) return;\n    if (typeof instance.setTheme === \"function\") {\n      try {\n        instance.setTheme(chartTheme(colours));\n      } catch (error) {\n        console.error(\"[smwb] Chart: the theme did not apply.\", error);\n      }\n      themed = colours;\n    } else {\n      instance.dispose();\n      instance = create(module, colours);\n    }\n  };\n\n  createEffect(() => {\n    const colours = palette();\n    if (!ready() || !colours || !instance) return;\n    retheme(colours);\n    draw(optionFor(colours));\n    const current = instance;\n    if (current && announced !== current) {\n      announced = current;\n      untrack(() => local.onReady?.(current));\n    }\n  });\n\n  onMount(() => {\n    let disposed = false;\n    const refresh = (): void => {\n      const next = readChartPalette(root);\n      const current = untrack(palette);\n      if (!current || !samePalette(current, next)) setPalette(next);\n    };\n    refresh();\n\n    // The theme switches by an attribute on <html> (data-theme, a class) or\n    // with the system setting.\n    const themeObserver = new MutationObserver(() => requestAnimationFrame(refresh));\n    themeObserver.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"data-theme\", \"class\", \"style\"],\n    });\n    const media =\n      typeof window.matchMedia === \"function\" ? window.matchMedia(\"(prefers-color-scheme: dark)\") : undefined;\n    media?.addEventListener(\"change\", refresh);\n\n    // The palette is read again here, not taken from mount: a theme set after\n    // the chart mounted would otherwise show for a frame in the old colours.\n    const start = (): void => {\n      if (disposed || instance || !module || !hasSize()) return;\n      const colours = readChartPalette(root);\n      const current = untrack(palette);\n      if (!current || !samePalette(current, colours)) setPalette(colours);\n      instance = create(module, colours);\n      setReady(true);\n    };\n\n    const onResize = (): void => {\n      if (!hasSize()) return;\n      if (!instance) {\n        start();\n        return;\n      }\n      try {\n        instance.resize();\n      } catch {\n        // It catches up on the next resize.\n      }\n      const colours = untrack(palette);\n      if (pending && colours) draw(untrack(() => optionFor(colours)));\n    };\n    // In the next frame, not in the observer's callback: drawing there resizes\n    // what it observes, and the browser reports a ResizeObserver loop.\n    let frame = 0;\n    const resizeObserver =\n      typeof ResizeObserver === \"function\"\n        ? new ResizeObserver(() => {\n            cancelAnimationFrame(frame);\n            frame = requestAnimationFrame(onResize);\n          })\n        : undefined;\n    resizeObserver?.observe(canvas);\n\n    (local.loader ?? loadECharts)().then(\n      (loaded) => {\n        module = loaded;\n        start();\n      },\n      (error: unknown) => console.error(\"[smwb] Chart: ECharts did not load.\", error)\n    );\n\n    onCleanup(() => {\n      disposed = true;\n      themeObserver.disconnect();\n      media?.removeEventListener(\"change\", refresh);\n      resizeObserver?.disconnect();\n      cancelAnimationFrame(frame);\n      instance?.dispose();\n      instance = undefined;\n    });\n  });\n\n  return (\n    <div\n      data-testid={local[\"data-testid\"] ?? \"chart\"}\n      {...rest}\n      ref={mergeRefs(local.ref, (el) => (root = el))}\n      class={cn(\"smwb-chart\", local.class)}\n      style={mergeStyle(local.style, { height: cssLength(local.height) })}\n    >\n      <div ref={canvas} class=\"smwb-chart__canvas\" role=\"img\" aria-label={local.label} />\n      <Show when={!ready()}>\n        <Skeleton class=\"smwb-chart__skeleton\" variant=\"rounded\" width=\"100%\" height=\"100%\" />\n      </Show>\n      <Show when={local.summary}>\n        <p class=\"smwb-chart__summary\">{local.summary}</p>\n      </Show>\n    </div>\n  );\n}\n\nexport default Chart;\n"],"mappings":"AAAA;AAAA,EAEE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,OAAO,QAAQ;AACf,SAAS,gBAAgB;AACzB,SAAS,iBAA2B;AACpC,SAAS,kBAAkB;AAC3B,SAA8C,YAAY,kBAAkB,mBAAmB;AA2D/F,MAAM,YAAY,CAAC,UAAoC,OAAO,UAAU,WAAW,GAAG,KAAK,OAAO;AAElG,MAAM,cAAc,MAA4B,OAAO,SAAS;AAOzD,SAAS,MAAM,OAAgC;AACpD,QAAM,SAAS,WAAW,EAAE,QAAQ,KAAwB,UAAU,SAA6B,GAAG,KAAK;AAC3G,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,MAAI;AACJ,MAAI;AACJ,QAAM,CAAC,SAAS,UAAU,IAAI,aAA2B;AACzD,QAAM,CAAC,OAAO,QAAQ,IAAI,aAAa,KAAK;AAC5C,MAAI;AACJ,MAAI;AACJ,MAAI;AACJ,MAAI;AACJ,MAAI,UAAU;AAEd,QAAM,UAAU,MAAe,OAAO,cAAc,KAAK,OAAO,eAAe;AAC/E,QAAM,YAAY,CAAC,YACjB,OAAO,MAAM,WAAW,aAAa,MAAM,OAAO,OAAO,IAAI,MAAM;AAErE,QAAM,SAAS,CAAC,QAAqB,YAAyC;AAC5E,UAAM,UAAU,OAAO,KAAK,QAAQ,WAAW,OAAO,GAAG,EAAE,UAAU,MAAM,SAAS,CAAC;AACrF,YAAQ,GAAG,SAAS,CAAC,WAAW,MAAM,UAAU,MAAM,CAAC;AACvD,aAAS;AACT,WAAO;AAAA,EACT;AAKA,QAAM,OAAO,CAAC,WAA8B;AAC1C,QAAI,CAAC,SAAU;AACf,QAAI,CAAC,QAAQ,GAAG;AACd,gBAAU;AACV;AAAA,IACF;AACA,cAAU;AACV,QAAI;AACF,eAAS,UAAU,QAAQ,EAAE,UAAU,KAAK,CAAC;AAAA,IAC/C,SAAS,OAAO;AACd,cAAQ,MAAM,0CAA0C,KAAK;AAAA,IAC/D;AAAA,EACF;AAEA,QAAM,UAAU,CAAC,YAAgC;AAC/C,QAAI,CAAC,YAAY,CAAC,UAAW,UAAU,YAAY,QAAQ,OAAO,EAAI;AACtE,QAAI,OAAO,SAAS,aAAa,YAAY;AAC3C,UAAI;AACF,iBAAS,SAAS,WAAW,OAAO,CAAC;AAAA,MACvC,SAAS,OAAO;AACd,gBAAQ,MAAM,0CAA0C,KAAK;AAAA,MAC/D;AACA,eAAS;AAAA,IACX,OAAO;AACL,eAAS,QAAQ;AACjB,iBAAW,OAAO,QAAQ,OAAO;AAAA,IACnC;AAAA,EACF;AAEA,eAAa,MAAM;AACjB,UAAM,UAAU,QAAQ;AACxB,QAAI,CAAC,MAAM,KAAK,CAAC,WAAW,CAAC,SAAU;AACvC,YAAQ,OAAO;AACf,SAAK,UAAU,OAAO,CAAC;AACvB,UAAM,UAAU;AAChB,QAAI,WAAW,cAAc,SAAS;AACpC,kBAAY;AACZ,cAAQ,MAAM,MAAM,UAAU,OAAO,CAAC;AAAA,IACxC;AAAA,EACF,CAAC;AAED,UAAQ,MAAM;AACZ,QAAI,WAAW;AACf,UAAM,UAAU,MAAY;AAC1B,YAAM,OAAO,iBAAiB,IAAI;AAClC,YAAM,UAAU,QAAQ,OAAO;AAC/B,UAAI,CAAC,WAAW,CAAC,YAAY,SAAS,IAAI,EAAG,YAAW,IAAI;AAAA,IAC9D;AACA,YAAQ;AAIR,UAAM,gBAAgB,IAAI,iBAAiB,MAAM,sBAAsB,OAAO,CAAC;AAC/E,kBAAc,QAAQ,SAAS,iBAAiB;AAAA,MAC9C,YAAY;AAAA,MACZ,iBAAiB,CAAC,cAAc,SAAS,OAAO;AAAA,IAClD,CAAC;AACD,UAAM,QACJ,OAAO,OAAO,eAAe,aAAa,OAAO,WAAW,8BAA8B,IAAI;AAChG,WAAO,iBAAiB,UAAU,OAAO;AAIzC,UAAM,QAAQ,MAAY;AACxB,UAAI,YAAY,YAAY,CAAC,UAAU,CAAC,QAAQ,EAAG;AACnD,YAAM,UAAU,iBAAiB,IAAI;AACrC,YAAM,UAAU,QAAQ,OAAO;AAC/B,UAAI,CAAC,WAAW,CAAC,YAAY,SAAS,OAAO,EAAG,YAAW,OAAO;AAClE,iBAAW,OAAO,QAAQ,OAAO;AACjC,eAAS,IAAI;AAAA,IACf;AAEA,UAAM,WAAW,MAAY;AAC3B,UAAI,CAAC,QAAQ,EAAG;AAChB,UAAI,CAAC,UAAU;AACb,cAAM;AACN;AAAA,MACF;AACA,UAAI;AACF,iBAAS,OAAO;AAAA,MAClB,QAAQ;AAAA,MAER;AACA,YAAM,UAAU,QAAQ,OAAO;AAC/B,UAAI,WAAW,QAAS,MAAK,QAAQ,MAAM,UAAU,OAAO,CAAC,CAAC;AAAA,IAChE;AAGA,QAAI,QAAQ;AACZ,UAAM,iBACJ,OAAO,mBAAmB,aACtB,IAAI,eAAe,MAAM;AACvB,2BAAqB,KAAK;AAC1B,cAAQ,sBAAsB,QAAQ;AAAA,IACxC,CAAC,IACD;AACN,oBAAgB,QAAQ,MAAM;AAE9B,KAAC,MAAM,UAAU,aAAa,EAAE;AAAA,MAC9B,CAAC,WAAW;AACV,iBAAS;AACT,cAAM;AAAA,MACR;AAAA,MACA,CAAC,UAAmB,QAAQ,MAAM,uCAAuC,KAAK;AAAA,IAChF;AAEA,cAAU,MAAM;AACd,iBAAW;AACX,oBAAc,WAAW;AACzB,aAAO,oBAAoB,UAAU,OAAO;AAC5C,sBAAgB,WAAW;AAC3B,2BAAqB,KAAK;AAC1B,gBAAU,QAAQ;AAClB,iBAAW;AAAA,IACb,CAAC;AAAA,EACH,CAAC;AAED,SACE,CAAC;AAAA,IACC,aAAa,MAAM,aAAa,KAAK;AAAA,QACjC;AAAA,IACJ,KAAK,UAAU,MAAM,KAAK,CAAC,OAAQ,OAAO,EAAG;AAAA,IAC7C,OAAO,GAAG,cAAc,MAAM,KAAK;AAAA,IACnC,OAAO,WAAW,MAAM,OAAO,EAAE,QAAQ,UAAU,MAAM,MAAM,EAAE,CAAC;AAAA,GACnE;AAAA,MACC,CAAC,IAAI,KAAK,QAAQ,MAAM,qBAAqB,KAAK,MAAM,YAAY,MAAM,OAAO,EAAE;AAAA,MACnF,CAAC,KAAK,MAAM,CAAC,MAAM,GAAG;AAAA,QACpB,CAAC,SAAS,MAAM,uBAAuB,QAAQ,UAAU,MAAM,OAAO,OAAO,OAAO,EAAE;AAAA,MACxF,EAFC,KAEM;AAAA,MACP,CAAC,KAAK,MAAM,MAAM,SAAS;AAAA,QACzB,CAAC,EAAE,MAAM,uBAAuB,MAAM,QAAQ,EAA7C,EAAiD;AAAA,MACpD,EAFC,KAEM;AAAA,IACT,EAdC;AAgBL;AAEA,IAAO,gBAAQ;","names":[],"file":"chart.jsx"}

package/dist/headless/source/components/dataDisplay/chat/chat.jsx

@@ -4,6 +4,7 @@ import { FloatingButton } from "../../inputs/floatingButton";
 import { Icon } from "../../base/icon";
 import { createControllableState } from "../../../primitives/createControllableState";
 import { createId } from "../../../primitives/createId";
+import { Composer } from "../../inputs/composer/composer";
 import { ChatComposer } from "./chatComposer";
 import { ChatHeader } from "./chatHeader";
 import { ChatMessages } from "./chatMessages";
@@ -66,12 +67,19 @@ function Chat(props) {
   });
   const attachInputId = createId();
   const showComposer = () => Boolean(p.onSendMessage) || fileUpload.enabled();
+  const useLegacyComposer = () => Boolean(p.legacyComposer) || fileUpload.enabled() && !p.onSendMessage;
   const fileInput = () => <Show when={fileUpload.enabled()}>
       <input {...fileUpload.getInputProps({ id: attachInputId })} data-testid="chat-file-input" />
     </Show>;
-  const resolvedFooter = () => p.footer ?? p.children ?? (showComposer() ? <>
-        {fileInput()}
-        <ChatComposer
+  const sendText = (text) => {
+    void p.onSendMessage?.(text);
+  };
+  const uploadFiles = (files) => {
+    void p.onUploadFiles?.(files);
+  };
+  const legacyFooter = () => <>
+      {fileInput()}
+      <ChatComposer
     onSendMessage={p.onSendMessage}
     placeholder={p.composerPlaceholder}
     disabled={p.composerDisabled}
@@ -81,7 +89,33 @@ function Chat(props) {
     attachInputId={fileUpload.enabled() ? attachInputId : void 0}
     attachAriaLabel={p.attachAriaLabel}
   />
-      </> : void 0);
+    </>;
+  const composerOnSend = createMemo(() => p.onSendMessage ? sendText : void 0);
+  const composerOnAttach = createMemo(() => fileUpload.enabled() ? uploadFiles : void 0);
+  const composerAccept = createMemo(() => fileUpload.enabled() ? p.fileUploadAccept : void 0);
+  const composerMaxFiles = createMemo(() => fileUpload.enabled() ? fileUpload.maxFiles : void 0);
+  const composerMultiple = createMemo(() => fileUpload.enabled() ? fileUpload.maxFiles > 1 : void 0);
+  const composerFooter = () => <Composer
+    {...p.composerProps}
+    class={cn("smwb-chat__composer", p.composerProps?.class)}
+    sendKey={p.composerProps?.sendKey ?? "enter"}
+    aria-label={p.composerProps?.["aria-label"] ?? (p.composerProps?.["aria-labelledby"] ? void 0 : "Message")}
+    sendLabel={p.composerProps?.sendLabel ?? "Send message"}
+    attachLabel={p.attachAriaLabel ?? p.composerProps?.attachLabel}
+    placeholder={p.composerPlaceholder}
+    disabled={p.composerDisabled}
+    busy={p.busy}
+    onStop={p.onStop}
+    onSend={composerOnSend()}
+    onAttach={composerOnAttach()}
+    accept={composerAccept()}
+    maxFiles={composerMaxFiles()}
+    multiple={composerMultiple()}
+    dropTarget={false}
+  />;
+  const resolvedFooter = () => p.footer ?? p.children ?? (showComposer() ? <Show when={useLegacyComposer()} fallback={composerFooter()}>
+        {legacyFooter()}
+      </Show> : void 0);
   const closeButtonVisible = () => shouldShowChatCloseButton({
     floatingTrigger: p.floatingTrigger,
     embedded: p.embedded,

package/dist/headless/source/components/dataDisplay/chat/chat.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/dataDisplay/chat/chat.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, children, createMemo, mergeProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { FloatingButton } from \"../../inputs/floatingButton\";\nimport { Icon } from \"../../base/icon\";\nimport { createControllableState } from \"../../../primitives/createControllableState\";\nimport { createId } from \"../../../primitives/createId\";\nimport { ChatComposer } from \"./chatComposer\";\nimport { ChatHeader } from \"./chatHeader\";\nimport { ChatMessages } from \"./chatMessages\";\nimport { ChatShell } from \"./chatShell\";\nimport { createChatFileUpload } from \"./useChatFileUpload\";\nimport {\n  type ChatAnchor,\n  type ChatLayoutMode,\n  type ChatMessage,\n  type ChatMessageRenderContext,\n  type ChatThemeMode,\n  CHAT_EXPAND_LAYOUTS,\n} from \"./types\";\nimport { pickInitialLayout, resolveAllowedLayouts, shouldShowChatCloseButton } from \"./utils\";\n\nexport interface ChatProps extends ParentProps, Omit<ChatMessageRenderContext, \"showAvatars\" | \"showAttachments\"> {\n  class?: string | undefined;\n  messages: ChatMessage[];\n  showAvatars?: boolean | undefined;\n  showAttachments?: boolean | undefined;\n  headerTitle?: JSX.Element;\n  headerSubtitle?: JSX.Element;\n  headerActions?: JSX.Element;\n  footer?: JSX.Element;\n  anchor?: ChatAnchor | undefined;\n  themeMode?: ChatThemeMode | undefined;\n  allowedLayouts?: ChatLayoutMode[] | undefined;\n  layout?: ChatLayoutMode | undefined;\n  defaultLayout?: ChatLayoutMode | undefined;\n  onLayoutChange?: ((layout: ChatLayoutMode) => void) | undefined;\n  open?: boolean | undefined;\n  defaultOpen?: boolean | undefined;\n  onOpenChange?: ((open: boolean) => void) | undefined;\n  floatingTrigger?: boolean | undefined;\n  triggerIcon?: JSX.Element;\n  triggerLabel?: string | undefined;\n  onLoadMore?: (() => void | Promise<void>) | undefined;\n  hasMore?: boolean | undefined;\n  onSendMessage?: ((text: string) => void | Promise<void>) | undefined;\n  composerPlaceholder?: string | undefined;\n  composerDisabled?: boolean | undefined;\n  composerShiftEnterNewline?: boolean | undefined;\n  composerCtrlEnterNewline?: boolean | undefined;\n  fileUpload?: boolean | undefined;\n  onUploadFiles?: ((files: File[]) => void | Promise<void>) | undefined;\n  fileUploadAccept?: Record<string, string[]> | string | undefined;\n  fileUploadMaxFiles?: number | undefined;\n  attachAriaLabel?: string | undefined;\n  loading?: boolean | undefined;\n  loadingMore?: boolean | undefined;\n  loadingSkeletonCount?: number | undefined;\n  renderMessage?: ((message: ChatMessage, ctx: ChatMessageRenderContext) => JSX.Element) | undefined;\n  embedded?: boolean | undefined;\n  overlayContext?: boolean | undefined;\n  showCloseButton?: boolean | undefined;\n}\n\nexport function Chat(props: ChatProps): JSX.Element {\n  const p = mergeProps(\n    {\n      showAvatars: false,\n      showAttachments: false,\n      anchor: \"bottom-right\" as const,\n      themeMode: \"inherit\" as const,\n      defaultOpen: false,\n      floatingTrigger: false,\n      composerPlaceholder: \"message\",\n      composerShiftEnterNewline: true,\n      composerCtrlEnterNewline: true,\n      fileUpload: false,\n      embedded: false,\n      overlayContext: false,\n      showStatus: false,\n    },\n    props\n  );\n\n  const allowedLayouts = createMemo(() => resolveAllowedLayouts(p.allowedLayouts ?? CHAT_EXPAND_LAYOUTS));\n\n  const [open, setOpen] = createControllableState<boolean>({\n    value: () => p.open,\n    defaultValue: p.defaultOpen,\n    onChange: p.onOpenChange,\n  });\n\n  const [layout, setLayout] = createControllableState<ChatLayoutMode>({\n    value: () => p.layout,\n    defaultValue: pickInitialLayout(allowedLayouts(), p.defaultLayout),\n    onChange: p.onLayoutChange,\n  });\n\n  const effectiveLayout = (): ChatLayoutMode =>\n    p.embedded ? \"fullHeight\" : p.floatingTrigger ? (open() ? layout() : \"closed\") : layout();\n\n  const handleOpen = (): void => {\n    setOpen(true);\n    if (layout() === \"closed\") {\n      setLayout(pickInitialLayout(allowedLayouts(), p.defaultLayout));\n    }\n  };\n\n  const handleClose = (): void => {\n    setOpen(false);\n  };\n\n  const handleLayoutChange = (next: ChatLayoutMode): void => {\n    setOpen(true);\n    setLayout(next);\n  };\n\n  const fileUpload = createChatFileUpload({\n    enabled: () => p.fileUpload,\n    accept: p.fileUploadAccept,\n    maxFiles: p.fileUploadMaxFiles,\n    onUploadFiles: p.onUploadFiles,\n    disabled: () => Boolean(p.composerDisabled),\n  });\n\n  const attachInputId = createId();\n\n  const showComposer = (): boolean => Boolean(p.onSendMessage) || fileUpload.enabled();\n\n  const fileInput = (): JSX.Element => (\n    <Show when={fileUpload.enabled()}>\n      <input {...fileUpload.getInputProps({ id: attachInputId })} data-testid=\"chat-file-input\" />\n    </Show>\n  );\n\n  const resolvedFooter = (): JSX.Element =>\n    p.footer ??\n    p.children ??\n    (showComposer() ? (\n      <>\n        {fileInput()}\n        <ChatComposer\n          onSendMessage={p.onSendMessage}\n          placeholder={p.composerPlaceholder}\n          disabled={p.composerDisabled}\n          shiftEnterNewline={p.composerShiftEnterNewline}\n          ctrlEnterNewline={p.composerCtrlEnterNewline}\n          fileUpload={fileUpload.enabled()}\n          attachInputId={fileUpload.enabled() ? attachInputId : undefined}\n          attachAriaLabel={p.attachAriaLabel}\n        />\n      </>\n    ) : undefined);\n\n  const closeButtonVisible = (): boolean =>\n    shouldShowChatCloseButton({\n      floatingTrigger: p.floatingTrigger,\n      embedded: p.embedded,\n      overlayContext: p.overlayContext,\n      effectiveLayout: effectiveLayout(),\n      showCloseButton: p.showCloseButton,\n    });\n\n  // The trigger icon is read once, and only while the trigger is drawn: markup\n  // passed as a prop is created anew on every read, and during hydration a copy\n  // the server never rendered has no DOM node.\n  const triggerIcon = children(() => (p.floatingTrigger && !p.embedded && !open() ? p.triggerIcon : undefined));\n\n  return (\n    <div\n      class={cn(\n        \"smwb-chat\",\n        !p.embedded && `smwb-chat_${p.anchor}`,\n        p.embedded && \"smwb-chat_embedded\",\n        p.overlayContext && \"smwb-chat_overlay-context\",\n        p.class\n      )}\n      data-testid=\"chat\"\n    >\n      <Show when={p.floatingTrigger && !p.embedded && !open()}>\n        <FloatingButton\n          class=\"smwb-chat__trigger\"\n          aria-label={p.triggerLabel ?? \"Open chat\"}\n          data-testid=\"chat-trigger\"\n          onClick={handleOpen}\n        >\n          <Show when={triggerIcon()} fallback={<Icon name=\"chat\" size={24} />}>\n            {triggerIcon()}\n          </Show>\n        </FloatingButton>\n      </Show>\n      <ChatShell\n        layout={effectiveLayout()}\n        anchor={p.anchor}\n        themeMode={p.themeMode}\n        embedded={p.embedded}\n        overlayContext={p.overlayContext}\n        fileDropzoneRootProps={fileUpload.enabled() ? fileUpload.getRootProps() : undefined}\n        fileDropzoneActive={fileUpload.enabled() && fileUpload.isDragActive()}\n        header={\n          <ChatHeader\n            title={p.headerTitle}\n            subtitle={p.headerSubtitle}\n            actions={p.headerActions}\n            layout={effectiveLayout() === \"closed\" ? layout() : effectiveLayout()}\n            allowedLayouts={allowedLayouts()}\n            onLayoutChange={handleLayoutChange}\n            onClose={closeButtonVisible() ? handleClose : undefined}\n          />\n        }\n        footer={resolvedFooter()}\n      >\n        <ChatMessages\n          messages={p.messages}\n          showAvatars={p.showAvatars}\n          showAttachments={p.showAttachments}\n          showStatus={p.showStatus}\n          statusIcons={p.statusIcons}\n          renderStatus={p.renderStatus}\n          onLoadMore={p.onLoadMore}\n          hasMore={p.hasMore}\n          loading={p.loading}\n          loadingMore={p.loadingMore}\n          loadingSkeletonCount={p.loadingSkeletonCount}\n          renderMessage={p.renderMessage}\n        />\n      </ChatShell>\n    </div>\n  );\n}\n\nexport default Chat;\n"],"mappings":"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","names":[],"file":"chat.jsx"}
+{"version":3,"sources":["../../../../../../src/components/dataDisplay/chat/chat.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, children, createMemo, mergeProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { FloatingButton } from \"../../inputs/floatingButton\";\nimport { Icon } from \"../../base/icon\";\nimport { createControllableState } from \"../../../primitives/createControllableState\";\nimport { createId } from \"../../../primitives/createId\";\nimport { Composer } from \"../../inputs/composer/composer\";\nimport type { ComposerProps } from \"../../inputs/composer/composer\";\nimport { ChatComposer } from \"./chatComposer\";\nimport { ChatHeader } from \"./chatHeader\";\nimport { ChatMessages } from \"./chatMessages\";\nimport { ChatShell } from \"./chatShell\";\nimport { createChatFileUpload } from \"./useChatFileUpload\";\nimport {\n  type ChatAnchor,\n  type ChatLayoutMode,\n  type ChatMessage,\n  type ChatMessageRenderContext,\n  type ChatThemeMode,\n  CHAT_EXPAND_LAYOUTS,\n} from \"./types\";\nimport { pickInitialLayout, resolveAllowedLayouts, shouldShowChatCloseButton } from \"./utils\";\n\n/**\n * Props for the `Composer` Chat draws as its footer. The props Chat owns itself — `onSendMessage` (the composer's\n * `onSend`), `busy`, `onStop`, `composerPlaceholder` (`placeholder`), `composerDisabled` (`disabled`), the file upload\n * props (`onAttach`, `accept`, `multiple`, `maxFiles`) and `dropTarget` (always `false`: the Chat shell is the drop\n * target) — are left out, Chat passes them and does not let a caller override them.\n */\nexport type ChatFooterComposerProps = Omit<\n  ComposerProps,\n  | \"onSend\"\n  | \"busy\"\n  | \"onStop\"\n  | \"disabled\"\n  | \"placeholder\"\n  | \"onAttach\"\n  | \"accept\"\n  | \"multiple\"\n  | \"maxFiles\"\n  | \"dropTarget\"\n>;\n\nexport interface ChatProps extends ParentProps, Omit<ChatMessageRenderContext, \"showAvatars\" | \"showAttachments\"> {\n  class?: string | undefined;\n  messages: ChatMessage[];\n  showAvatars?: boolean | undefined;\n  showAttachments?: boolean | undefined;\n  headerTitle?: JSX.Element;\n  headerSubtitle?: JSX.Element;\n  headerActions?: JSX.Element;\n  footer?: JSX.Element;\n  anchor?: ChatAnchor | undefined;\n  themeMode?: ChatThemeMode | undefined;\n  allowedLayouts?: ChatLayoutMode[] | undefined;\n  layout?: ChatLayoutMode | undefined;\n  defaultLayout?: ChatLayoutMode | undefined;\n  onLayoutChange?: ((layout: ChatLayoutMode) => void) | undefined;\n  open?: boolean | undefined;\n  defaultOpen?: boolean | undefined;\n  onOpenChange?: ((open: boolean) => void) | undefined;\n  floatingTrigger?: boolean | undefined;\n  triggerIcon?: JSX.Element;\n  triggerLabel?: string | undefined;\n  onLoadMore?: (() => void | Promise<void>) | undefined;\n  hasMore?: boolean | undefined;\n  onSendMessage?: ((text: string) => void | Promise<void>) | undefined;\n  /**\n   * The agent is replying: the composer's send button turns into Stop and calls `onStop`, the keys do not send, the\n   * text stays editable. Not the same as `loading` (the message list skeleton). The default composer only.\n   */\n  busy?: boolean | undefined;\n  /** Called when Stop is pressed while `busy` (and not `composerDisabled`). The default composer only. */\n  onStop?: (() => void) | undefined;\n  /**\n   * More props for the built-in `Composer`: `toolbar`, `attachments`, `maxLength`, `counter`, `minRows`, `maxRows`,\n   * `layout`, `sendKey` (default here `\"enter\"`), `value`/`defaultValue`/`onValueChange`, `clearOnSend`, `autofocus`,\n   * `inputRef`, `aria-*`, `sendLabel`, `stopLabel`, `attachLabel`, `class`, `data-*`, … Chat's own props\n   * (`onSendMessage`, `busy`, `onStop`, `composerPlaceholder`, `composerDisabled`, the file upload props) win.\n   */\n  composerProps?: ChatFooterComposerProps | undefined;\n  /**\n   * Deprecated: draws the old `ChatComposer` (Enter sends, TextField DOM, `chat-composer*` test ids) instead of the\n   * built-in `Composer`. Kept for the migration and removed with `ChatComposer` in the next major; `busy`, `onStop`\n   * and `composerProps` are ignored in this mode.\n   *\n   * @deprecated Migrate to the default `Composer`; see the README section \"Migrating from ChatComposer\".\n   */\n  legacyComposer?: boolean | undefined;\n  composerPlaceholder?: string | undefined;\n  composerDisabled?: boolean | undefined;\n  /**\n   * Deprecated: works with `legacyComposer` only — the built-in `Composer` always inserts a newline on Shift+Enter.\n   * Pass it together with `legacyComposer` until that is removed.\n   *\n   * @deprecated Use `legacyComposer`; the default `Composer` has no equivalent flag.\n   */\n  composerShiftEnterNewline?: boolean | undefined;\n  /**\n   * Deprecated: works with `legacyComposer` only — with the built-in `Composer` Ctrl/⌘+Enter sends. Pass it together\n   * with `legacyComposer` until that is removed.\n   *\n   * @deprecated Use `legacyComposer`; the default `Composer` has no equivalent flag.\n   */\n  composerCtrlEnterNewline?: boolean | undefined;\n  fileUpload?: boolean | undefined;\n  onUploadFiles?: ((files: File[]) => void | Promise<void>) | undefined;\n  fileUploadAccept?: Record<string, string[]> | string | undefined;\n  fileUploadMaxFiles?: number | undefined;\n  attachAriaLabel?: string | undefined;\n  loading?: boolean | undefined;\n  loadingMore?: boolean | undefined;\n  loadingSkeletonCount?: number | undefined;\n  renderMessage?: ((message: ChatMessage, ctx: ChatMessageRenderContext) => JSX.Element) | undefined;\n  embedded?: boolean | undefined;\n  overlayContext?: boolean | undefined;\n  showCloseButton?: boolean | undefined;\n}\n\nexport function Chat(props: ChatProps): JSX.Element {\n  const p = mergeProps(\n    {\n      showAvatars: false,\n      showAttachments: false,\n      anchor: \"bottom-right\" as const,\n      themeMode: \"inherit\" as const,\n      defaultOpen: false,\n      floatingTrigger: false,\n      composerPlaceholder: \"message\",\n      composerShiftEnterNewline: true,\n      composerCtrlEnterNewline: true,\n      fileUpload: false,\n      embedded: false,\n      overlayContext: false,\n      showStatus: false,\n    },\n    props\n  );\n\n  const allowedLayouts = createMemo(() => resolveAllowedLayouts(p.allowedLayouts ?? CHAT_EXPAND_LAYOUTS));\n\n  const [open, setOpen] = createControllableState<boolean>({\n    value: () => p.open,\n    defaultValue: p.defaultOpen,\n    onChange: p.onOpenChange,\n  });\n\n  const [layout, setLayout] = createControllableState<ChatLayoutMode>({\n    value: () => p.layout,\n    defaultValue: pickInitialLayout(allowedLayouts(), p.defaultLayout),\n    onChange: p.onLayoutChange,\n  });\n\n  const effectiveLayout = (): ChatLayoutMode =>\n    p.embedded ? \"fullHeight\" : p.floatingTrigger ? (open() ? layout() : \"closed\") : layout();\n\n  const handleOpen = (): void => {\n    setOpen(true);\n    if (layout() === \"closed\") {\n      setLayout(pickInitialLayout(allowedLayouts(), p.defaultLayout));\n    }\n  };\n\n  const handleClose = (): void => {\n    setOpen(false);\n  };\n\n  const handleLayoutChange = (next: ChatLayoutMode): void => {\n    setOpen(true);\n    setLayout(next);\n  };\n\n  const fileUpload = createChatFileUpload({\n    enabled: () => p.fileUpload,\n    accept: p.fileUploadAccept,\n    maxFiles: p.fileUploadMaxFiles,\n    onUploadFiles: p.onUploadFiles,\n    disabled: () => Boolean(p.composerDisabled),\n  });\n\n  const attachInputId = createId();\n\n  const showComposer = (): boolean => Boolean(p.onSendMessage) || fileUpload.enabled();\n  // Composer has no text-less mode, so an upload without a send handler keeps the old attach-only ChatComposer.\n  const useLegacyComposer = (): boolean => Boolean(p.legacyComposer) || (fileUpload.enabled() && !p.onSendMessage);\n\n  const fileInput = (): JSX.Element => (\n    <Show when={fileUpload.enabled()}>\n      <input {...fileUpload.getInputProps({ id: attachInputId })} data-testid=\"chat-file-input\" />\n    </Show>\n  );\n\n  // The handlers are attached always and read the props when called: a handler that appears later still works.\n  const sendText = (text: string): void => {\n    void p.onSendMessage?.(text);\n  };\n\n  const uploadFiles = (files: File[]): void => {\n    void p.onUploadFiles?.(files);\n  };\n\n  const legacyFooter = (): JSX.Element => (\n    <>\n      {fileInput()}\n      <ChatComposer\n        onSendMessage={p.onSendMessage}\n        placeholder={p.composerPlaceholder}\n        disabled={p.composerDisabled}\n        shiftEnterNewline={p.composerShiftEnterNewline}\n        ctrlEnterNewline={p.composerCtrlEnterNewline}\n        fileUpload={fileUpload.enabled()}\n        attachInputId={fileUpload.enabled() ? attachInputId : undefined}\n        attachAriaLabel={p.attachAriaLabel}\n      />\n    </>\n  );\n\n  // Chat's own props are plain attributes after the spread, so they win; `dropTarget` is off because the shell\n  // already takes the drops. Every prop Chat owns is omitted from `ChatFooterComposerProps`, so none of them can\n  // leak back from the spread when its value is `undefined`.\n  // The upload gate is resolved in memos rather than inline: a conditional prop compiles to a `memo` created\n  // inside the prop getter, and Composer reads `onAttach`/`accept`/`maxFiles`/`multiple` from its pick and drop\n  // handlers — outside any owner, where such a computation is never disposed.\n  const composerOnSend = createMemo(() => (p.onSendMessage ? sendText : undefined));\n  const composerOnAttach = createMemo(() => (fileUpload.enabled() ? uploadFiles : undefined));\n  const composerAccept = createMemo(() => (fileUpload.enabled() ? p.fileUploadAccept : undefined));\n  const composerMaxFiles = createMemo(() => (fileUpload.enabled() ? fileUpload.maxFiles : undefined));\n  const composerMultiple = createMemo(() => (fileUpload.enabled() ? fileUpload.maxFiles > 1 : undefined));\n\n  const composerFooter = (): JSX.Element => (\n    <Composer\n      {...p.composerProps}\n      class={cn(\"smwb-chat__composer\", p.composerProps?.class)}\n      sendKey={p.composerProps?.sendKey ?? \"enter\"}\n      aria-label={p.composerProps?.[\"aria-label\"] ?? (p.composerProps?.[\"aria-labelledby\"] ? undefined : \"Message\")}\n      sendLabel={p.composerProps?.sendLabel ?? \"Send message\"}\n      attachLabel={p.attachAriaLabel ?? p.composerProps?.attachLabel}\n      placeholder={p.composerPlaceholder}\n      disabled={p.composerDisabled}\n      busy={p.busy}\n      onStop={p.onStop}\n      onSend={composerOnSend()}\n      onAttach={composerOnAttach()}\n      accept={composerAccept()}\n      maxFiles={composerMaxFiles()}\n      multiple={composerMultiple()}\n      dropTarget={false}\n    />\n  );\n\n  const resolvedFooter = (): JSX.Element =>\n    p.footer ??\n    p.children ??\n    (showComposer() ? (\n      <Show when={useLegacyComposer()} fallback={composerFooter()}>\n        {legacyFooter()}\n      </Show>\n    ) : undefined);\n\n  const closeButtonVisible = (): boolean =>\n    shouldShowChatCloseButton({\n      floatingTrigger: p.floatingTrigger,\n      embedded: p.embedded,\n      overlayContext: p.overlayContext,\n      effectiveLayout: effectiveLayout(),\n      showCloseButton: p.showCloseButton,\n    });\n\n  // The trigger icon is read once, and only while the trigger is drawn: markup\n  // passed as a prop is created anew on every read, and during hydration a copy\n  // the server never rendered has no DOM node.\n  const triggerIcon = children(() => (p.floatingTrigger && !p.embedded && !open() ? p.triggerIcon : undefined));\n\n  return (\n    <div\n      class={cn(\n        \"smwb-chat\",\n        !p.embedded && `smwb-chat_${p.anchor}`,\n        p.embedded && \"smwb-chat_embedded\",\n        p.overlayContext && \"smwb-chat_overlay-context\",\n        p.class\n      )}\n      data-testid=\"chat\"\n    >\n      <Show when={p.floatingTrigger && !p.embedded && !open()}>\n        <FloatingButton\n          class=\"smwb-chat__trigger\"\n          aria-label={p.triggerLabel ?? \"Open chat\"}\n          data-testid=\"chat-trigger\"\n          onClick={handleOpen}\n        >\n          <Show when={triggerIcon()} fallback={<Icon name=\"chat\" size={24} />}>\n            {triggerIcon()}\n          </Show>\n        </FloatingButton>\n      </Show>\n      <ChatShell\n        layout={effectiveLayout()}\n        anchor={p.anchor}\n        themeMode={p.themeMode}\n        embedded={p.embedded}\n        overlayContext={p.overlayContext}\n        fileDropzoneRootProps={fileUpload.enabled() ? fileUpload.getRootProps() : undefined}\n        fileDropzoneActive={fileUpload.enabled() && fileUpload.isDragActive()}\n        header={\n          <ChatHeader\n            title={p.headerTitle}\n            subtitle={p.headerSubtitle}\n            actions={p.headerActions}\n            layout={effectiveLayout() === \"closed\" ? layout() : effectiveLayout()}\n            allowedLayouts={allowedLayouts()}\n            onLayoutChange={handleLayoutChange}\n            onClose={closeButtonVisible() ? handleClose : undefined}\n          />\n        }\n        footer={resolvedFooter()}\n      >\n        <ChatMessages\n          messages={p.messages}\n          showAvatars={p.showAvatars}\n          showAttachments={p.showAttachments}\n          showStatus={p.showStatus}\n          statusIcons={p.statusIcons}\n          renderStatus={p.renderStatus}\n          onLoadMore={p.onLoadMore}\n          hasMore={p.hasMore}\n          loading={p.loading}\n          loadingMore={p.loadingMore}\n          loadingSkeletonCount={p.loadingSkeletonCount}\n          renderMessage={p.renderMessage}\n        />\n      </ChatShell>\n    </div>\n  );\n}\n\nexport default Chat;\n"],"mappings":"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","names":[],"file":"chat.jsx"}

package/dist/headless/source/components/dataDisplay/chat/chatComposer.jsx

@@ -48,6 +48,7 @@ function ChatComposer(props) {
     setValue("");
   };
   const handleKeyDown = (event) => {
+    if (event.isComposing || event.keyCode === 229) return;
     if (shouldComposerNewlineOnEnter(event, { shiftEnterNewline: merged.shiftEnterNewline, ctrlEnterNewline: merged.ctrlEnterNewline })) {
       if (event.currentTarget instanceof HTMLTextAreaElement) {
         event.preventDefault();