@smwb/ui-react 2.7.0 → 2.9.0

package/dist/components/dataDisplay/chat/chatComposer.js.map

@@ -1 +1 @@
-{"version":3,"file":"chatComposer.js","sources":["../../../../src/components/dataDisplay/chat/chatComposer.tsx"],"sourcesContent":["import React, { useId, useRef, useState } from \"react\";\nimport cn from \"clsx\";\nimport Icon from \"../../base/icon/icon\";\nimport { TextField } from \"../../inputs/textField\";\nimport { TextFieldWrapper } from \"../../inputs/textField/textFieldWrapper\";\nimport ChatIconButton from \"./chatIconButton\";\nimport { shouldComposerNewlineOnEnter } from \"./utils\";\n\nexport interface ChatComposerProps {\n  className?: string;\n  onSendMessage?: (text: string) => void | Promise<void>;\n  placeholder?: string;\n  disabled?: boolean;\n  sendAriaLabel?: string;\n  shiftEnterNewline?: boolean;\n  ctrlEnterNewline?: boolean;\n  fileUpload?: boolean;\n  attachInputId?: string;\n  onAttachClick?: () => void;\n  attachAriaLabel?: string;\n}\n\nfunction stopPropagation(event: React.SyntheticEvent) {\n  event.stopPropagation();\n}\n\nfunction insertNewlineAtCursor(element: HTMLTextAreaElement, value: string, setValue: (next: string) => void) {\n  const start = element.selectionStart ?? value.length;\n  const end = element.selectionEnd ?? value.length;\n  const nextValue = `${value.slice(0, start)}\\n${value.slice(end)}`;\n\n  setValue(nextValue);\n\n  requestAnimationFrame(() => {\n    element.selectionStart = start + 1;\n    element.selectionEnd = start + 1;\n  });\n}\n\nexport function ChatComposer({\n  className,\n  onSendMessage,\n  placeholder = \"message\",\n  disabled = false,\n  sendAriaLabel = \"Send message\",\n  shiftEnterNewline = true,\n  ctrlEnterNewline = true,\n  fileUpload = false,\n  attachInputId,\n  onAttachClick,\n  attachAriaLabel = \"Attach file\",\n}: ChatComposerProps) {\n  const [value, setValue] = useState(\"\");\n  const [isFocused, setIsFocused] = useState(false);\n  const inputId = useId();\n  const textareaRef = useRef<HTMLTextAreaElement>(null);\n  const multiline = shiftEnterNewline || ctrlEnterNewline;\n  const canSend = Boolean(onSendMessage) && value.trim().length > 0 && !disabled;\n  const showAttach = fileUpload && Boolean(attachInputId || onAttachClick);\n\n  const handleSend = () => {\n    if (!onSendMessage) {\n      return;\n    }\n\n    const text = value.trim();\n\n    if (!text || disabled) {\n      return;\n    }\n\n    void onSendMessage(text);\n    setValue(\"\");\n  };\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n    if (shouldComposerNewlineOnEnter(event, { shiftEnterNewline, ctrlEnterNewline })) {\n      if (event.currentTarget instanceof HTMLTextAreaElement) {\n        event.preventDefault();\n        insertNewlineAtCursor(event.currentTarget, value, setValue);\n      }\n\n      return;\n    }\n\n    if (event.key !== \"Enter\") {\n      return;\n    }\n\n    event.preventDefault();\n    handleSend();\n  };\n\n  const attachClassName = cn(\n    \"smwb-chat-icon-button\",\n    \"smwb-chat-icon-button_edge-start\",\n    disabled && \"smwb-chat-icon-button_disabled\"\n  );\n\n  const attachButton = showAttach ? (\n    attachInputId ? (\n      <label\n        htmlFor={disabled ? undefined : attachInputId}\n        className={attachClassName}\n        aria-label={attachAriaLabel}\n        aria-disabled={disabled || undefined}\n        data-testid=\"chat-composer-attach\"\n        onMouseDown={stopPropagation}\n      >\n        <Icon name=\"attach_file\" size={24} />\n      </label>\n    ) : (\n      <ChatIconButton\n        edge=\"start\"\n        aria-label={attachAriaLabel}\n        data-testid=\"chat-composer-attach\"\n        disabled={disabled}\n        onClick={onAttachClick}\n        onMouseDown={stopPropagation}\n      >\n        <Icon name=\"attach_file\" size={24} />\n      </ChatIconButton>\n    )\n  ) : null;\n\n  const sendButton = onSendMessage ? (\n    <ChatIconButton\n      edge=\"end\"\n      color=\"primary\"\n      aria-label={sendAriaLabel}\n      data-testid=\"chat-composer-send\"\n      disabled={!canSend}\n      onClick={handleSend}\n      onMouseDown={stopPropagation}\n    >\n      <Icon name=\"send\" size={24} />\n    </ChatIconButton>\n  ) : null;\n\n  if (showAttach && !onSendMessage) {\n    return (\n      <div\n        className={cn(\"smwb-chat-composer\", \"smwb-chat-composer_attach-only\", className)}\n        data-testid=\"chat-composer\"\n      >\n        {attachButton}\n      </div>\n    );\n  }\n\n  if (!multiline) {\n    return (\n      <TextField\n        className={cn(\"smwb-chat-composer\", className)}\n        data-testid=\"chat-composer\"\n        fullWidth\n        value={value}\n        disabled={disabled}\n        placeholder={placeholder}\n        onChange={(event) => setValue(event.target.value)}\n        startAdornment={attachButton}\n        endAdornment={sendButton}\n        onKeyDown={handleKeyDown}\n      />\n    );\n  }\n\n  const onHolderMouseDown: React.MouseEventHandler<HTMLDivElement> = (event) => {\n    if (textareaRef.current && event.currentTarget === event.target) {\n      event.preventDefault();\n      textareaRef.current.focus();\n    }\n  };\n\n  return (\n    <TextFieldWrapper\n      className={cn(\"smwb-chat-composer\", className)}\n      data-testid=\"chat-composer\"\n      fullWidth\n      disabled={disabled}\n      isFilledState={value.length > 0}\n      isFocused={isFocused}\n      htmlFor={inputId}\n      shrink={Boolean(attachButton)}\n      onHolderMouseDown={onHolderMouseDown}\n      startAdornment={attachButton}\n      endAdornment={sendButton}\n    >\n      <textarea\n        id={inputId}\n        ref={textareaRef}\n        className={cn(\n          \"smwb-text-field__input\",\n          \"smwb-chat-composer__input\",\n          \"smwb-text-field__input--show-placeholder\",\n          attachButton && \"smwb-text-field__input--adornment-start\",\n          sendButton && \"smwb-text-field__input--adornment-end\"\n        )}\n        value={value}\n        disabled={disabled}\n        placeholder={placeholder}\n        rows={1}\n        onChange={(event) => setValue(event.target.value)}\n        onFocus={() => setIsFocused(true)}\n        onBlur={() => setIsFocused(false)}\n        onKeyDown={handleKeyDown}\n      />\n    </TextFieldWrapper>\n  );\n}\n\nexport default ChatComposer;\n"],"names":["stopPropagation","event","insertNewlineAtCursor","element","value","setValue","start","_a","end","_b","nextValue","ChatComposer","className","onSendMessage","placeholder","disabled","sendAriaLabel","shiftEnterNewline","ctrlEnterNewline","fileUpload","attachInputId","onAttachClick","attachAriaLabel","useState","isFocused","setIsFocused","inputId","useId","textareaRef","useRef","multiline","canSend","showAttach","handleSend","text","handleKeyDown","shouldComposerNewlineOnEnter","attachClassName","cn","attachButton","jsx","Icon","ChatIconButton","sendButton","TextField","onHolderMouseDown","TextFieldWrapper"],"mappings":"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"}
+{"version":3,"file":"chatComposer.js","sources":["../../../../src/components/dataDisplay/chat/chatComposer.tsx"],"sourcesContent":["import React, { useId, useRef, useState } from \"react\";\nimport cn from \"clsx\";\nimport Icon from \"../../base/icon/icon\";\nimport { TextField } from \"../../inputs/textField\";\nimport { TextFieldWrapper } from \"../../inputs/textField/textFieldWrapper\";\nimport ChatIconButton from \"./chatIconButton\";\nimport { shouldComposerNewlineOnEnter } from \"./utils\";\n\n/**\n * Deprecated: the props of the old chat input. Use `ComposerProps` — `Chat` now draws a `Composer` as its footer,\n * and the standalone `Composer` replaces these props (`onSendMessage` → `onSend`, `sendAriaLabel` → `sendLabel`,\n * `attachAriaLabel` → `attachLabel`, `fileUpload` + `attachInputId`/`onAttachClick` → `onAttach`,\n * `shiftEnterNewline` → `sendKey=\"enter\"`; `ctrlEnterNewline` has no equivalent — Ctrl/⌘+Enter always sends).\n * Removed in the next major.\n *\n * @deprecated Use `Composer` (`ComposerProps`); see the README section \"Migrating from ChatComposer\".\n */\nexport interface ChatComposerProps {\n  className?: string;\n  onSendMessage?: (text: string) => void | Promise<void>;\n  placeholder?: string;\n  disabled?: boolean;\n  sendAriaLabel?: string;\n  shiftEnterNewline?: boolean;\n  ctrlEnterNewline?: boolean;\n  fileUpload?: boolean;\n  attachInputId?: string;\n  onAttachClick?: () => void;\n  attachAriaLabel?: string;\n}\n\nfunction stopPropagation(event: React.SyntheticEvent) {\n  event.stopPropagation();\n}\n\nfunction insertNewlineAtCursor(element: HTMLTextAreaElement, value: string, setValue: (next: string) => void) {\n  const start = element.selectionStart ?? value.length;\n  const end = element.selectionEnd ?? value.length;\n  const nextValue = `${value.slice(0, start)}\\n${value.slice(end)}`;\n\n  setValue(nextValue);\n\n  requestAnimationFrame(() => {\n    element.selectionStart = start + 1;\n    element.selectionEnd = start + 1;\n  });\n}\n\n/**\n * Deprecated: the old chat input — Enter sends, a TextField-based DOM and the `chat-composer*` test ids.\n * `Chat` draws a `Composer` as its footer now, and the standalone `Composer` replaces this component\n * (`onSendMessage` → `onSend`, Enter-to-send → `sendKey=\"enter\"`). Kept for the migration and removed in the\n * next major; to keep this markup inside a Chat while migrating, pass `legacyComposer` to `Chat`.\n *\n * @deprecated Use `Composer`; see the README section \"Migrating from ChatComposer\".\n */\nexport function ChatComposer({\n  className,\n  onSendMessage,\n  placeholder = \"message\",\n  disabled = false,\n  sendAriaLabel = \"Send message\",\n  shiftEnterNewline = true,\n  ctrlEnterNewline = true,\n  fileUpload = false,\n  attachInputId,\n  onAttachClick,\n  attachAriaLabel = \"Attach file\",\n}: ChatComposerProps) {\n  const [value, setValue] = useState(\"\");\n  const [isFocused, setIsFocused] = useState(false);\n  const inputId = useId();\n  const textareaRef = useRef<HTMLTextAreaElement>(null);\n  const multiline = shiftEnterNewline || ctrlEnterNewline;\n  const canSend = Boolean(onSendMessage) && value.trim().length > 0 && !disabled;\n  const showAttach = fileUpload && Boolean(attachInputId || onAttachClick);\n\n  const handleSend = () => {\n    if (!onSendMessage) {\n      return;\n    }\n\n    const text = value.trim();\n\n    if (!text || disabled) {\n      return;\n    }\n\n    void onSendMessage(text);\n    setValue(\"\");\n  };\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n    // Enter that commits or cancels an IME composition belongs to the IME, not to the composer.\n    if (event.nativeEvent.isComposing || event.keyCode === 229) {\n      return;\n    }\n\n    if (shouldComposerNewlineOnEnter(event, { shiftEnterNewline, ctrlEnterNewline })) {\n      if (event.currentTarget instanceof HTMLTextAreaElement) {\n        event.preventDefault();\n        insertNewlineAtCursor(event.currentTarget, value, setValue);\n      }\n\n      return;\n    }\n\n    if (event.key !== \"Enter\") {\n      return;\n    }\n\n    event.preventDefault();\n    handleSend();\n  };\n\n  const attachClassName = cn(\n    \"smwb-chat-icon-button\",\n    \"smwb-chat-icon-button_edge-start\",\n    disabled && \"smwb-chat-icon-button_disabled\"\n  );\n\n  const attachButton = showAttach ? (\n    attachInputId ? (\n      <label\n        htmlFor={disabled ? undefined : attachInputId}\n        className={attachClassName}\n        aria-label={attachAriaLabel}\n        aria-disabled={disabled || undefined}\n        data-testid=\"chat-composer-attach\"\n        onMouseDown={stopPropagation}\n      >\n        <Icon name=\"attach_file\" size={24} />\n      </label>\n    ) : (\n      <ChatIconButton\n        edge=\"start\"\n        aria-label={attachAriaLabel}\n        data-testid=\"chat-composer-attach\"\n        disabled={disabled}\n        onClick={onAttachClick}\n        onMouseDown={stopPropagation}\n      >\n        <Icon name=\"attach_file\" size={24} />\n      </ChatIconButton>\n    )\n  ) : null;\n\n  const sendButton = onSendMessage ? (\n    <ChatIconButton\n      edge=\"end\"\n      color=\"primary\"\n      aria-label={sendAriaLabel}\n      data-testid=\"chat-composer-send\"\n      disabled={!canSend}\n      onClick={handleSend}\n      onMouseDown={stopPropagation}\n    >\n      <Icon name=\"send\" size={24} />\n    </ChatIconButton>\n  ) : null;\n\n  if (showAttach && !onSendMessage) {\n    return (\n      <div\n        className={cn(\"smwb-chat-composer\", \"smwb-chat-composer_attach-only\", className)}\n        data-testid=\"chat-composer\"\n      >\n        {attachButton}\n      </div>\n    );\n  }\n\n  if (!multiline) {\n    return (\n      <TextField\n        className={cn(\"smwb-chat-composer\", className)}\n        data-testid=\"chat-composer\"\n        fullWidth\n        value={value}\n        disabled={disabled}\n        placeholder={placeholder}\n        onChange={(event) => setValue(event.target.value)}\n        startAdornment={attachButton}\n        endAdornment={sendButton}\n        onKeyDown={handleKeyDown}\n      />\n    );\n  }\n\n  const onHolderMouseDown: React.MouseEventHandler<HTMLDivElement> = (event) => {\n    if (textareaRef.current && event.currentTarget === event.target) {\n      event.preventDefault();\n      textareaRef.current.focus();\n    }\n  };\n\n  return (\n    <TextFieldWrapper\n      className={cn(\"smwb-chat-composer\", className)}\n      data-testid=\"chat-composer\"\n      fullWidth\n      disabled={disabled}\n      isFilledState={value.length > 0}\n      isFocused={isFocused}\n      htmlFor={inputId}\n      shrink={Boolean(attachButton)}\n      onHolderMouseDown={onHolderMouseDown}\n      startAdornment={attachButton}\n      endAdornment={sendButton}\n    >\n      <textarea\n        id={inputId}\n        ref={textareaRef}\n        className={cn(\n          \"smwb-text-field__input\",\n          \"smwb-chat-composer__input\",\n          \"smwb-text-field__input--show-placeholder\",\n          attachButton && \"smwb-text-field__input--adornment-start\",\n          sendButton && \"smwb-text-field__input--adornment-end\"\n        )}\n        value={value}\n        disabled={disabled}\n        placeholder={placeholder}\n        rows={1}\n        onChange={(event) => setValue(event.target.value)}\n        onFocus={() => setIsFocused(true)}\n        onBlur={() => setIsFocused(false)}\n        onKeyDown={handleKeyDown}\n      />\n    </TextFieldWrapper>\n  );\n}\n\nexport default ChatComposer;\n"],"names":["stopPropagation","event","insertNewlineAtCursor","element","value","setValue","start","_a","end","_b","nextValue","ChatComposer","className","onSendMessage","placeholder","disabled","sendAriaLabel","shiftEnterNewline","ctrlEnterNewline","fileUpload","attachInputId","onAttachClick","attachAriaLabel","useState","isFocused","setIsFocused","inputId","useId","textareaRef","useRef","multiline","canSend","showAttach","handleSend","text","handleKeyDown","shouldComposerNewlineOnEnter","attachClassName","cn","attachButton","jsx","Icon","ChatIconButton","sendButton","TextField","onHolderMouseDown","TextFieldWrapper"],"mappings":"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"}

package/dist/components/dataDisplay/chat/chatIconButton.d.ts

@@ -4,5 +4,5 @@ export interface ChatIconButtonProps extends React.ButtonHTMLAttributes<HTMLButt
     edge?: "start" | "end";
     color?: "default" | "primary";
 }
-export declare function ChatIconButton({ className, children, disabled, edge, color, onMouseDown: onMouseDownProp, ...rest }: ChatIconButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatIconButton({ className, children, disabled, edge, color, onMouseDown: onMouseDownProp, onPointerDown: onPointerDownProp, type, ...rest }: ChatIconButtonProps): import("react/jsx-runtime").JSX.Element;
 export default ChatIconButton;

package/dist/components/dataDisplay/chat/chatIconButton.js

@@ -1,47 +1,51 @@
-import { jsxs as b, jsx as p } from "react/jsx-runtime";
-import l from "react";
-import h from "clsx";
-import { Ripple as R } from "../../base/ripple/ripple.js";
-function d({
+import { jsxs as h, jsx as R } from "react/jsx-runtime";
+import p from "react";
+import _ from "clsx";
+import { Ripple as x } from "../../base/ripple/ripple.js";
+function w({
   className: i,
-  children: m,
+  children: r,
   disabled: t,
-  edge: o,
-  color: a = "default",
+  edge: a,
+  color: s = "default",
   onMouseDown: n,
-  ...u
+  // The button sets this on its root too; its own handler calls the caller's first.
+  onPointerDown: m,
+  // A default: the caller's type wins.
+  type: f = "button",
+  ...b
 }) {
-  const e = l.useRef(null), s = (c) => {
+  const u = p.useRef(null), l = (c) => {
     n == null || n(c);
-  }, f = (c) => {
-    var r;
-    t || (r = e.current) == null || r.onRipple(c);
+  }, o = (c) => {
+    var e;
+    m == null || m(c), t || (e = u.current) == null || e.onRipple(c);
   };
-  return /* @__PURE__ */ b(
+  return /* @__PURE__ */ h(
     "button",
     {
-      type: "button",
-      className: h(
+      type: f,
+      className: _(
         "smwb-chat-icon-button",
-        o === "start" && "smwb-chat-icon-button_edge-start",
-        o === "end" && "smwb-chat-icon-button_edge-end",
-        a === "primary" && "smwb-chat-icon-button_primary",
+        a === "start" && "smwb-chat-icon-button_edge-start",
+        a === "end" && "smwb-chat-icon-button_edge-end",
+        s === "primary" && "smwb-chat-icon-button_primary",
         t && "smwb-chat-icon-button_disabled",
         i
       ),
       disabled: t,
-      onMouseDown: s,
-      onPointerDown: f,
-      ...u,
+      onMouseDown: l,
+      onPointerDown: o,
+      ...b,
       children: [
-        m,
-        t ? null : /* @__PURE__ */ p(R, { actionRef: e, center: !0 })
+        r,
+        t ? null : /* @__PURE__ */ R(x, { actionRef: u, center: !0 })
       ]
     }
   );
 }
 export {
-  d as ChatIconButton,
-  d as default
+  w as ChatIconButton,
+  w as default
 };
 //# sourceMappingURL=chatIconButton.js.map

package/dist/components/dataDisplay/chat/chatIconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"chatIconButton.js","sources":["../../../../src/components/dataDisplay/chat/chatIconButton.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"clsx\";\nimport { Ripple, RippleActionsRef } from \"../../base/ripple/ripple\";\n\nexport interface ChatIconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  className?: string;\n  edge?: \"start\" | \"end\";\n  color?: \"default\" | \"primary\";\n}\n\nexport function ChatIconButton({\n  className,\n  children,\n  disabled,\n  edge,\n  color = \"default\",\n  onMouseDown: onMouseDownProp,\n  ...rest\n}: ChatIconButtonProps) {\n  const rippleRef = React.useRef<RippleActionsRef>(null);\n\n  const onMouseDown = (event: React.MouseEvent<HTMLButtonElement>) => {\n    onMouseDownProp?.(event);\n  };\n\n  const onPointerDown = (event: React.PointerEvent<HTMLButtonElement>) => {\n    if (!disabled) {\n      rippleRef.current?.onRipple(event);\n    }\n  };\n\n  return (\n    <button\n      type=\"button\"\n      className={cn(\n        \"smwb-chat-icon-button\",\n        edge === \"start\" && \"smwb-chat-icon-button_edge-start\",\n        edge === \"end\" && \"smwb-chat-icon-button_edge-end\",\n        color === \"primary\" && \"smwb-chat-icon-button_primary\",\n        disabled && \"smwb-chat-icon-button_disabled\",\n        className\n      )}\n      disabled={disabled}\n      onMouseDown={onMouseDown}\n      onPointerDown={onPointerDown}\n      {...rest}\n    >\n      {children}\n      {!disabled ? <Ripple actionRef={rippleRef} center /> : null}\n    </button>\n  );\n}\n\nexport default ChatIconButton;\n"],"names":["ChatIconButton","className","children","disabled","edge","color","onMouseDownProp","rest","rippleRef","React","onMouseDown","event","onPointerDown","_a","jsxs","cn","jsx","Ripple"],"mappings":";;;;AAUO,SAASA,EAAe;AAAA,EAC7B,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,aAAaC;AAAA,EACb,GAAGC;AACL,GAAwB;AACtB,QAAMC,IAAYC,EAAM,OAAyB,IAAI,GAE/CC,IAAc,CAACC,MAA+C;AAClE,IAAAL,KAAA,QAAAA,EAAkBK;AAAA,EACpB,GAEMC,IAAgB,CAACD,MAAiD;;AACtE,IAAKR,MACHU,IAAAL,EAAU,YAAV,QAAAK,EAAmB,SAASF;AAAA,EAEhC;AAEA,SACE,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAWC;AAAA,QACT;AAAA,QACAX,MAAS,WAAW;AAAA,QACpBA,MAAS,SAAS;AAAA,QAClBC,MAAU,aAAa;AAAA,QACvBF,KAAY;AAAA,QACZF;AAAA,MAAA;AAAA,MAEF,UAAAE;AAAA,MACA,aAAAO;AAAA,MACA,eAAAE;AAAA,MACC,GAAGL;AAAA,MAEH,UAAA;AAAA,QAAAL;AAAA,QACCC,IAAqD,OAA1C,gBAAAa,EAACC,GAAA,EAAO,WAAWT,GAAW,QAAM,IAAC;AAAA,MAAK;AAAA,IAAA;AAAA,EAAA;AAG7D;"}
+{"version":3,"file":"chatIconButton.js","sources":["../../../../src/components/dataDisplay/chat/chatIconButton.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"clsx\";\nimport { Ripple, RippleActionsRef } from \"../../base/ripple/ripple\";\n\nexport interface ChatIconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  className?: string;\n  edge?: \"start\" | \"end\";\n  color?: \"default\" | \"primary\";\n}\n\nexport function ChatIconButton({\n  className,\n  children,\n  disabled,\n  edge,\n  color = \"default\",\n  onMouseDown: onMouseDownProp,\n  // The button sets this on its root too; its own handler calls the caller's first.\n  onPointerDown: onPointerDownProp,\n  // A default: the caller's type wins.\n  type = \"button\",\n  ...rest\n}: ChatIconButtonProps) {\n  const rippleRef = React.useRef<RippleActionsRef>(null);\n\n  const onMouseDown = (event: React.MouseEvent<HTMLButtonElement>) => {\n    onMouseDownProp?.(event);\n  };\n\n  const onPointerDown = (event: React.PointerEvent<HTMLButtonElement>) => {\n    onPointerDownProp?.(event);\n    if (!disabled) {\n      rippleRef.current?.onRipple(event);\n    }\n  };\n\n  return (\n    <button\n      type={type}\n      className={cn(\n        \"smwb-chat-icon-button\",\n        edge === \"start\" && \"smwb-chat-icon-button_edge-start\",\n        edge === \"end\" && \"smwb-chat-icon-button_edge-end\",\n        color === \"primary\" && \"smwb-chat-icon-button_primary\",\n        disabled && \"smwb-chat-icon-button_disabled\",\n        className\n      )}\n      disabled={disabled}\n      onMouseDown={onMouseDown}\n      onPointerDown={onPointerDown}\n      {...rest}\n    >\n      {children}\n      {!disabled ? <Ripple actionRef={rippleRef} center /> : null}\n    </button>\n  );\n}\n\nexport default ChatIconButton;\n"],"names":["ChatIconButton","className","children","disabled","edge","color","onMouseDownProp","onPointerDownProp","type","rest","rippleRef","React","onMouseDown","event","onPointerDown","_a","jsxs","cn","jsx","Ripple"],"mappings":";;;;AAUO,SAASA,EAAe;AAAA,EAC7B,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,aAAaC;AAAA;AAAA,EAEb,eAAeC;AAAA;AAAA,EAEf,MAAAC,IAAO;AAAA,EACP,GAAGC;AACL,GAAwB;AACtB,QAAMC,IAAYC,EAAM,OAAyB,IAAI,GAE/CC,IAAc,CAACC,MAA+C;AAClE,IAAAP,KAAA,QAAAA,EAAkBO;AAAA,EACpB,GAEMC,IAAgB,CAACD,MAAiD;;AACtE,IAAAN,KAAA,QAAAA,EAAoBM,IACfV,MACHY,IAAAL,EAAU,YAAV,QAAAK,EAAmB,SAASF;AAAA,EAEhC;AAEA,SACE,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAAR;AAAA,MACA,WAAWS;AAAA,QACT;AAAA,QACAb,MAAS,WAAW;AAAA,QACpBA,MAAS,SAAS;AAAA,QAClBC,MAAU,aAAa;AAAA,QACvBF,KAAY;AAAA,QACZF;AAAA,MAAA;AAAA,MAEF,UAAAE;AAAA,MACA,aAAAS;AAAA,MACA,eAAAE;AAAA,MACC,GAAGL;AAAA,MAEH,UAAA;AAAA,QAAAP;AAAA,QACCC,IAAqD,OAA1C,gBAAAe,EAACC,GAAA,EAAO,WAAWT,GAAW,QAAM,IAAC;AAAA,MAAK;AAAA,IAAA;AAAA,EAAA;AAG7D;"}

package/dist/components/dataDisplay/chat/chatLayout.d.ts

@@ -15,6 +15,8 @@ export interface ChatLayoutProps extends PropsWithChildren, HTMLAttributes<HTMLD
     expandAriaLabel?: string;
     floatingAnchor?: ChatAnchor;
     chat: ChatLayoutChatProps;
+    /** Test id of the root `<div>`; `chat-layout` unless given. */
+    "data-testid"?: string;
 }
-export declare function ChatLayout({ className, contentClassName, chatClassName, side, chatWidth, collapsed: collapsedProp, defaultCollapsed, onCollapsedChange, collapseAriaLabel, expandAriaLabel, floatingAnchor, chat, children, style, ...rest }: ChatLayoutProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatLayout({ className, contentClassName, chatClassName, side, chatWidth, collapsed: collapsedProp, defaultCollapsed, onCollapsedChange, collapseAriaLabel, expandAriaLabel, floatingAnchor, chat, children, style, "data-testid": dataTestId, ...rest }: ChatLayoutProps): import("react/jsx-runtime").JSX.Element;
 export default ChatLayout;

package/dist/components/dataDisplay/chat/chatLayout.js

@@ -1,102 +1,103 @@
-import { jsxs as l, Fragment as _, jsx as t } from "react/jsx-runtime";
-import { useEffect as E } from "react";
+import { jsxs as l, Fragment as b, jsx as t } from "react/jsx-runtime";
+import { useEffect as H } from "react";
 import n from "clsx";
-import { Icon as b } from "../../base/icon/icon.js";
-import { ChatIconButton as g } from "./chatIconButton.js";
-import { useControllableState as w } from "../../../hooks/useControllableState.js";
-import { Chat as C } from "./chat.js";
-const H = (a) => typeof a == "number" ? `${a}px` : a, S = (a) => a === "left" ? "bottom-left" : "bottom-right";
-function P({
+import { Icon as g } from "../../base/icon/icon.js";
+import { ChatIconButton as w } from "./chatIconButton.js";
+import { useControllableState as C } from "../../../hooks/useControllableState.js";
+import { Chat as x } from "./chat.js";
+const S = (a) => typeof a == "number" ? `${a}px` : a, $ = (a) => a === "left" ? "bottom-left" : "bottom-right";
+function R({
   className: a,
-  contentClassName: r,
-  chatClassName: i,
+  contentClassName: i,
+  chatClassName: r,
   side: e = "right",
-  chatWidth: x = 400,
-  collapsed: k,
-  defaultCollapsed: I = !1,
-  onCollapsedChange: N,
-  collapseAriaLabel: v = "Collapse chat panel",
-  expandAriaLabel: A = "Expand chat panel",
-  floatingAnchor: c,
+  chatWidth: k = 400,
+  collapsed: I,
+  defaultCollapsed: N = !1,
+  onCollapsedChange: v,
+  collapseAriaLabel: A = "Collapse chat panel",
+  expandAriaLabel: B = "Expand chat panel",
+  floatingAnchor: s,
   chat: o,
   children: u,
   style: p,
-  ...m
+  "data-testid": m = "chat-layout",
+  ...f
 }) {
-  const [s, h] = w({
-    value: k,
-    defaultValue: I,
-    onChange: N
-  }), [B, d] = w({
+  const [c, h] = C({
+    value: I,
+    defaultValue: N,
+    onChange: v
+  }), [F, d] = C({
     defaultValue: !1
   });
-  E(() => {
-    s || d(!1);
-  }, [s, d]);
-  const F = c != null ? c : S(e), L = e === "left" ? "dock_to_left" : "dock_to_right", O = /* @__PURE__ */ t(
-    g,
+  H(() => {
+    c || d(!1);
+  }, [c, d]);
+  const L = s != null ? s : $(e), O = e === "left" ? "dock_to_left" : "dock_to_right", V = /* @__PURE__ */ t(
+    w,
     {
-      "aria-label": v,
+      "aria-label": A,
       "data-testid": "chat-layout-collapse",
       onClick: () => h(!0),
-      children: /* @__PURE__ */ t(b, { name: e === "left" ? "left_panel_close" : "right_panel_close", size: 18 })
+      children: /* @__PURE__ */ t(g, { name: e === "left" ? "left_panel_close" : "right_panel_close", size: 18 })
     }
-  ), V = /* @__PURE__ */ t(g, { "aria-label": A, "data-testid": "chat-layout-expand", onClick: () => h(!1), children: /* @__PURE__ */ t(b, { name: L, size: 18 }) }), j = /* @__PURE__ */ l(_, { children: [
-    o.headerActions,
-    O
-  ] }), z = /* @__PURE__ */ l(_, { children: [
+  ), j = /* @__PURE__ */ t(w, { "aria-label": B, "data-testid": "chat-layout-expand", onClick: () => h(!1), children: /* @__PURE__ */ t(g, { name: O, size: 18 }) }), z = /* @__PURE__ */ l(b, { children: [
     o.headerActions,
     V
-  ] }), f = {
-    "--smwb-chat-layout-w": H(x)
+  ] }), E = /* @__PURE__ */ l(b, { children: [
+    o.headerActions,
+    j
+  ] }), y = {
+    "--smwb-chat-layout-w": S(k)
   };
-  if (s)
+  if (c)
     return /* @__PURE__ */ l(
       "div",
       {
         className: n("smwb-chat-layout", "smwb-chat-layout_collapsed", a),
-        style: { ...f, ...p },
-        "data-testid": "chat-layout",
+        style: { ...y, ...p },
+        "data-testid": m,
+        ...f,
         "data-collapsed": "true",
-        ...m,
         children: [
-          /* @__PURE__ */ t("div", { className: n("smwb-chat-layout__content", r), "data-testid": "chat-layout-content", children: u }),
+          /* @__PURE__ */ t("div", { className: n("smwb-chat-layout__content", i), "data-testid": "chat-layout-content", children: u }),
           /* @__PURE__ */ t(
-            C,
+            x,
             {
               ...o,
-              className: i,
+              className: r,
               floatingTrigger: !0,
-              anchor: F,
+              anchor: L,
               allowedLayouts: ["floating"],
               layout: "floating",
-              open: B,
+              open: F,
               onOpenChange: d,
-              headerActions: z
+              headerActions: E
             }
           )
         ]
       }
     );
-  const y = /* @__PURE__ */ t("aside", { className: "smwb-chat-layout__panel", "data-testid": "chat-layout-panel", children: /* @__PURE__ */ t(C, { ...o, className: i, embedded: !0, allowedLayouts: [], headerActions: j }) });
+  const _ = /* @__PURE__ */ t("aside", { className: "smwb-chat-layout__panel", "data-testid": "chat-layout-panel", children: /* @__PURE__ */ t(x, { ...o, className: r, embedded: !0, allowedLayouts: [], headerActions: z }) });
   return /* @__PURE__ */ l(
     "div",
     {
       className: n("smwb-chat-layout", `smwb-chat-layout_${e}`, a),
-      style: { ...f, ...p },
-      "data-testid": "chat-layout",
+      style: { ...y, ...p },
+      "data-testid": m,
+      ...f,
       "data-collapsed": "false",
-      ...m,
       children: [
-        e === "left" ? y : null,
-        /* @__PURE__ */ t("div", { className: n("smwb-chat-layout__content", r), "data-testid": "chat-layout-content", children: u }),
-        e === "right" ? y : null
+        e === "left" ? _ : null,
+        /* @__PURE__ */ t("div", { className: n("smwb-chat-layout__content", i), "data-testid": "chat-layout-content", children: u }),
+        e === "right" ? _ : null
       ]
     }
   );
 }
 export {
-  P as ChatLayout,
-  P as default
+  R as ChatLayout,
+  R as default
 };
 //# sourceMappingURL=chatLayout.js.map

package/dist/components/dataDisplay/chat/chatLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"chatLayout.js","sources":["../../../../src/components/dataDisplay/chat/chatLayout.tsx"],"sourcesContent":["import React, { CSSProperties, HTMLAttributes, PropsWithChildren, useEffect } from \"react\";\nimport cn from \"clsx\";\nimport Icon from \"../../base/icon/icon\";\nimport ChatIconButton from \"./chatIconButton\";\nimport { useControllableState } from \"../../../hooks/useControllableState\";\nimport Chat, { ChatProps } from \"./chat\";\nimport { ChatAnchor, ChatLayoutSide } from \"./types\";\n\nconst len = (value: number | string) => (typeof value === \"number\" ? `${value}px` : value);\n\nconst floatingAnchorForSide = (side: ChatLayoutSide): ChatAnchor => (side === \"left\" ? \"bottom-left\" : \"bottom-right\");\n\nexport type ChatLayoutChatProps = Omit<\n  ChatProps,\n  | \"className\"\n  | \"embedded\"\n  | \"floatingTrigger\"\n  | \"anchor\"\n  | \"allowedLayouts\"\n  | \"layout\"\n  | \"defaultLayout\"\n  | \"open\"\n  | \"defaultOpen\"\n  | \"onOpenChange\"\n  | \"onLayoutChange\"\n>;\n\nexport interface ChatLayoutProps extends PropsWithChildren, HTMLAttributes<HTMLDivElement> {\n  className?: string;\n  contentClassName?: string;\n  chatClassName?: string;\n  side?: ChatLayoutSide;\n  chatWidth?: number | string;\n  collapsed?: boolean;\n  defaultCollapsed?: boolean;\n  onCollapsedChange?: (collapsed: boolean) => void;\n  collapseAriaLabel?: string;\n  expandAriaLabel?: string;\n  floatingAnchor?: ChatAnchor;\n  chat: ChatLayoutChatProps;\n}\n\nexport function ChatLayout({\n  className,\n  contentClassName,\n  chatClassName,\n  side = \"right\",\n  chatWidth = 400,\n  collapsed: collapsedProp,\n  defaultCollapsed = false,\n  onCollapsedChange,\n  collapseAriaLabel = \"Collapse chat panel\",\n  expandAriaLabel = \"Expand chat panel\",\n  floatingAnchor,\n  chat,\n  children,\n  style,\n  ...rest\n}: ChatLayoutProps) {\n  const [collapsed, setCollapsed] = useControllableState<boolean>({\n    value: collapsedProp,\n    defaultValue: defaultCollapsed,\n    onChange: onCollapsedChange,\n  });\n\n  const [floatingOpen, setFloatingOpen] = useControllableState<boolean>({\n    defaultValue: false,\n  });\n\n  useEffect(() => {\n    if (!collapsed) {\n      setFloatingOpen(false);\n    }\n  }, [collapsed, setFloatingOpen]);\n\n  const anchor = floatingAnchor ?? floatingAnchorForSide(side);\n  const dockIcon = side === \"left\" ? \"dock_to_left\" : \"dock_to_right\";\n  const collapseIcon = side === \"left\" ? \"left_panel_close\" : \"right_panel_close\";\n\n  const collapseButton = (\n    <ChatIconButton\n      aria-label={collapseAriaLabel}\n      data-testid=\"chat-layout-collapse\"\n      onClick={() => setCollapsed(true)}\n    >\n      <Icon name={collapseIcon} size={18} />\n    </ChatIconButton>\n  );\n\n  const expandButton = (\n    <ChatIconButton aria-label={expandAriaLabel} data-testid=\"chat-layout-expand\" onClick={() => setCollapsed(false)}>\n      <Icon name={dockIcon} size={18} />\n    </ChatIconButton>\n  );\n\n  const dockedHeaderActions = (\n    <>\n      {chat.headerActions}\n      {collapseButton}\n    </>\n  );\n\n  const floatingHeaderActions = (\n    <>\n      {chat.headerActions}\n      {expandButton}\n    </>\n  );\n\n  const cssVars = {\n    \"--smwb-chat-layout-w\": len(chatWidth),\n  } as CSSProperties;\n\n  if (collapsed) {\n    return (\n      <div\n        className={cn(\"smwb-chat-layout\", \"smwb-chat-layout_collapsed\", className)}\n        style={{ ...cssVars, ...style }}\n        data-testid=\"chat-layout\"\n        data-collapsed=\"true\"\n        {...rest}\n      >\n        <div className={cn(\"smwb-chat-layout__content\", contentClassName)} data-testid=\"chat-layout-content\">\n          {children}\n        </div>\n        <Chat\n          {...chat}\n          className={chatClassName}\n          floatingTrigger\n          anchor={anchor}\n          allowedLayouts={[\"floating\"]}\n          layout=\"floating\"\n          open={floatingOpen}\n          onOpenChange={setFloatingOpen}\n          headerActions={floatingHeaderActions}\n        />\n      </div>\n    );\n  }\n\n  const panel = (\n    <aside className=\"smwb-chat-layout__panel\" data-testid=\"chat-layout-panel\">\n      <Chat {...chat} className={chatClassName} embedded allowedLayouts={[]} headerActions={dockedHeaderActions} />\n    </aside>\n  );\n\n  return (\n    <div\n      className={cn(\"smwb-chat-layout\", `smwb-chat-layout_${side}`, className)}\n      style={{ ...cssVars, ...style }}\n      data-testid=\"chat-layout\"\n      data-collapsed=\"false\"\n      {...rest}\n    >\n      {side === \"left\" ? panel : null}\n      <div className={cn(\"smwb-chat-layout__content\", contentClassName)} data-testid=\"chat-layout-content\">\n        {children}\n      </div>\n      {side === \"right\" ? panel : null}\n    </div>\n  );\n}\n\nexport default ChatLayout;\n"],"names":["len","value","floatingAnchorForSide","side","ChatLayout","className","contentClassName","chatClassName","chatWidth","collapsedProp","defaultCollapsed","onCollapsedChange","collapseAriaLabel","expandAriaLabel","floatingAnchor","chat","children","style","rest","collapsed","setCollapsed","useControllableState","floatingOpen","setFloatingOpen","useEffect","anchor","dockIcon","collapseButton","jsx","ChatIconButton","Icon","expandButton","dockedHeaderActions","jsxs","Fragment","floatingHeaderActions","cssVars","cn","Chat","panel"],"mappings":"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"}
+{"version":3,"file":"chatLayout.js","sources":["../../../../src/components/dataDisplay/chat/chatLayout.tsx"],"sourcesContent":["import React, { CSSProperties, HTMLAttributes, PropsWithChildren, useEffect } from \"react\";\nimport cn from \"clsx\";\nimport Icon from \"../../base/icon/icon\";\nimport ChatIconButton from \"./chatIconButton\";\nimport { useControllableState } from \"../../../hooks/useControllableState\";\nimport Chat, { ChatProps } from \"./chat\";\nimport { ChatAnchor, ChatLayoutSide } from \"./types\";\n\nconst len = (value: number | string) => (typeof value === \"number\" ? `${value}px` : value);\n\nconst floatingAnchorForSide = (side: ChatLayoutSide): ChatAnchor => (side === \"left\" ? \"bottom-left\" : \"bottom-right\");\n\nexport type ChatLayoutChatProps = Omit<\n  ChatProps,\n  | \"className\"\n  | \"embedded\"\n  | \"floatingTrigger\"\n  | \"anchor\"\n  | \"allowedLayouts\"\n  | \"layout\"\n  | \"defaultLayout\"\n  | \"open\"\n  | \"defaultOpen\"\n  | \"onOpenChange\"\n  | \"onLayoutChange\"\n>;\n\nexport interface ChatLayoutProps extends PropsWithChildren, HTMLAttributes<HTMLDivElement> {\n  className?: string;\n  contentClassName?: string;\n  chatClassName?: string;\n  side?: ChatLayoutSide;\n  chatWidth?: number | string;\n  collapsed?: boolean;\n  defaultCollapsed?: boolean;\n  onCollapsedChange?: (collapsed: boolean) => void;\n  collapseAriaLabel?: string;\n  expandAriaLabel?: string;\n  floatingAnchor?: ChatAnchor;\n  chat: ChatLayoutChatProps;\n  /** Test id of the root `<div>`; `chat-layout` unless given. */\n  \"data-testid\"?: string;\n}\n\nexport function ChatLayout({\n  className,\n  contentClassName,\n  chatClassName,\n  side = \"right\",\n  chatWidth = 400,\n  collapsed: collapsedProp,\n  defaultCollapsed = false,\n  onCollapsedChange,\n  collapseAriaLabel = \"Collapse chat panel\",\n  expandAriaLabel = \"Expand chat panel\",\n  floatingAnchor,\n  chat,\n  children,\n  style,\n  \"data-testid\": dataTestId = \"chat-layout\",\n  ...rest\n}: ChatLayoutProps) {\n  const [collapsed, setCollapsed] = useControllableState<boolean>({\n    value: collapsedProp,\n    defaultValue: defaultCollapsed,\n    onChange: onCollapsedChange,\n  });\n\n  const [floatingOpen, setFloatingOpen] = useControllableState<boolean>({\n    defaultValue: false,\n  });\n\n  useEffect(() => {\n    if (!collapsed) {\n      setFloatingOpen(false);\n    }\n  }, [collapsed, setFloatingOpen]);\n\n  const anchor = floatingAnchor ?? floatingAnchorForSide(side);\n  const dockIcon = side === \"left\" ? \"dock_to_left\" : \"dock_to_right\";\n  const collapseIcon = side === \"left\" ? \"left_panel_close\" : \"right_panel_close\";\n\n  const collapseButton = (\n    <ChatIconButton\n      aria-label={collapseAriaLabel}\n      data-testid=\"chat-layout-collapse\"\n      onClick={() => setCollapsed(true)}\n    >\n      <Icon name={collapseIcon} size={18} />\n    </ChatIconButton>\n  );\n\n  const expandButton = (\n    <ChatIconButton aria-label={expandAriaLabel} data-testid=\"chat-layout-expand\" onClick={() => setCollapsed(false)}>\n      <Icon name={dockIcon} size={18} />\n    </ChatIconButton>\n  );\n\n  const dockedHeaderActions = (\n    <>\n      {chat.headerActions}\n      {collapseButton}\n    </>\n  );\n\n  const floatingHeaderActions = (\n    <>\n      {chat.headerActions}\n      {expandButton}\n    </>\n  );\n\n  const cssVars = {\n    \"--smwb-chat-layout-w\": len(chatWidth),\n  } as CSSProperties;\n\n  if (collapsed) {\n    return (\n      <div\n        className={cn(\"smwb-chat-layout\", \"smwb-chat-layout_collapsed\", className)}\n        style={{ ...cssVars, ...style }}\n        data-testid={dataTestId}\n        {...rest}\n        // The collapsed state is the layout's own; it wins over the caller's.\n        data-collapsed=\"true\"\n      >\n        <div className={cn(\"smwb-chat-layout__content\", contentClassName)} data-testid=\"chat-layout-content\">\n          {children}\n        </div>\n        <Chat\n          {...chat}\n          className={chatClassName}\n          floatingTrigger\n          anchor={anchor}\n          allowedLayouts={[\"floating\"]}\n          layout=\"floating\"\n          open={floatingOpen}\n          onOpenChange={setFloatingOpen}\n          headerActions={floatingHeaderActions}\n        />\n      </div>\n    );\n  }\n\n  const panel = (\n    <aside className=\"smwb-chat-layout__panel\" data-testid=\"chat-layout-panel\">\n      <Chat {...chat} className={chatClassName} embedded allowedLayouts={[]} headerActions={dockedHeaderActions} />\n    </aside>\n  );\n\n  return (\n    <div\n      className={cn(\"smwb-chat-layout\", `smwb-chat-layout_${side}`, className)}\n      style={{ ...cssVars, ...style }}\n      data-testid={dataTestId}\n      {...rest}\n      // The collapsed state is the layout's own; it wins over the caller's.\n      data-collapsed=\"false\"\n    >\n      {side === \"left\" ? panel : null}\n      <div className={cn(\"smwb-chat-layout__content\", contentClassName)} data-testid=\"chat-layout-content\">\n        {children}\n      </div>\n      {side === \"right\" ? panel : null}\n    </div>\n  );\n}\n\nexport default ChatLayout;\n"],"names":["len","value","floatingAnchorForSide","side","ChatLayout","className","contentClassName","chatClassName","chatWidth","collapsedProp","defaultCollapsed","onCollapsedChange","collapseAriaLabel","expandAriaLabel","floatingAnchor","chat","children","style","dataTestId","rest","collapsed","setCollapsed","useControllableState","floatingOpen","setFloatingOpen","useEffect","anchor","dockIcon","collapseButton","jsx","ChatIconButton","Icon","expandButton","dockedHeaderActions","jsxs","Fragment","floatingHeaderActions","cssVars","cn","Chat","panel"],"mappings":"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"}

package/dist/components/dataDisplay/chat/chatOverlayLayout.d.ts

@@ -12,6 +12,8 @@ export interface ChatOverlayLayoutProps extends PropsWithChildren, HTMLAttribute
     defaultLayout?: ChatLayoutMode;
     defaultOpen?: boolean;
     chat: ChatOverlayLayoutChatProps;
+    /** Test id of the root `<div>`; `chat-overlay-layout` unless given. */
+    "data-testid"?: string;
 }
-export declare function ChatOverlayLayout({ className, contentClassName, chatClassName, side, chatWidth, allowedLayouts, defaultLayout, defaultOpen, chat, children, style, ...rest }: ChatOverlayLayoutProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatOverlayLayout({ className, contentClassName, chatClassName, side, chatWidth, allowedLayouts, defaultLayout, defaultOpen, chat, children, style, "data-testid": dataTestId, ...rest }: ChatOverlayLayoutProps): import("react/jsx-runtime").JSX.Element;
 export default ChatOverlayLayout;

package/dist/components/dataDisplay/chat/index.d.ts

@@ -3,7 +3,7 @@ export type { ChatLayoutProps, ChatLayoutChatProps } from "./chatLayout";
 export { default as ChatOverlayLayout } from "./chatOverlayLayout";
 export type { ChatOverlayLayoutProps, ChatOverlayLayoutChatProps } from "./chatOverlayLayout";
 export { default as Chat } from "./chat";
-export type { ChatProps } from "./chat";
+export type { ChatProps, ChatFooterComposerProps } from "./chat";
 export { default as ChatShell } from "./chatShell";
 export type { ChatShellProps } from "./chatShell";
 export { default as ChatHeader } from "./chatHeader";

package/dist/components/dataDisplay/chat/utils.d.ts

@@ -14,10 +14,24 @@ export declare function shouldShowChatCloseButton(options: {
     effectiveLayout?: ChatLayoutMode;
     showCloseButton?: boolean;
 }): boolean;
+/**
+ * Deprecated: the newline flags of the old `ChatComposer`. `Composer` picks the send key with `sendKey` instead
+ * (`"enter"` = Enter sends, Shift+Enter makes a newline; `"modEnter"` = Ctrl/⌘+Enter sends). Removed with
+ * `ChatComposer` in the next major.
+ *
+ * @deprecated Use `Composer`'s `sendKey`; see the README section "Migrating from ChatComposer".
+ */
 export interface ChatComposerNewlineOptions {
     shiftEnterNewline?: boolean;
     ctrlEnterNewline?: boolean;
 }
+/**
+ * Deprecated: the key rule of the old `ChatComposer` (which Enter sends, which makes a newline).
+ * `Composer` resolves the same choice through `sendKey` in `resolveComposerKeyAction`, and `Chat` draws a `Composer`
+ * by default. Kept for `ChatComposer` and `legacyComposer` only; removed in the next major.
+ *
+ * @deprecated Use `Composer`'s `sendKey`; see the README section "Migrating from ChatComposer".
+ */
 export declare function shouldComposerNewlineOnEnter(event: {
     key: string;
     shiftKey: boolean;

package/dist/components/dataDisplay/chat/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../../src/components/dataDisplay/chat/utils.ts"],"sourcesContent":["import {\n  ChatAttachment,\n  ChatLayoutMode,\n  CHAT_EXPAND_LAYOUTS,\n  CHAT_MESSAGE_DELIVERY_STATUSES,\n  CHAT_MESSAGE_STATUS_ICONS,\n  CHAT_MESSAGE_STATUS_LABELS,\n  ChatMessageDeliveryStatus,\n  ChatMessageStatus,\n  ChatMessageStatusIcons,\n} from \"./types\";\n\nexport function isChatMessageDeliveryStatus(status: ChatMessageStatus): status is ChatMessageDeliveryStatus {\n  return CHAT_MESSAGE_DELIVERY_STATUSES.includes(status as ChatMessageDeliveryStatus);\n}\n\nexport function resolveChatMessageStatusIcon(\n  status: ChatMessageStatus,\n  icons?: ChatMessageStatusIcons & Record<string, string | undefined>\n): string | undefined {\n  const custom = icons?.[status];\n  if (custom) {\n    return custom;\n  }\n\n  if (isChatMessageDeliveryStatus(status)) {\n    return CHAT_MESSAGE_STATUS_ICONS[status];\n  }\n\n  return undefined;\n}\n\nexport function resolveChatMessageStatusLabel(status: ChatMessageStatus): string {\n  if (isChatMessageDeliveryStatus(status)) {\n    return CHAT_MESSAGE_STATUS_LABELS[status];\n  }\n\n  return String(status);\n}\n\nexport function isImageAttachment(attachment: ChatAttachment): boolean {\n  if (attachment.mimeType?.startsWith(\"image/\")) {\n    return true;\n  }\n\n  return /\\.(png|jpe?g|gif|webp|bmp|svg)$/i.test(attachment.name);\n}\n\nexport function formatChatTimestamp(value?: string | Date): string {\n  if (!value) {\n    return \"\";\n  }\n\n  const date = value instanceof Date ? value : new Date(value);\n\n  if (Number.isNaN(date.getTime())) {\n    return String(value);\n  }\n\n  return new Intl.DateTimeFormat(undefined, {\n    hour: \"2-digit\",\n    minute: \"2-digit\",\n  }).format(date);\n}\n\nexport function resolveAllowedLayouts(input?: ChatLayoutMode[]): ChatLayoutMode[] {\n  if (input == null) {\n    return [\"floating\"];\n  }\n\n  if (input.length === 0) {\n    return [];\n  }\n\n  return CHAT_EXPAND_LAYOUTS.filter((mode) => input.includes(mode));\n}\n\nexport function pickInitialLayout(allowed: ChatLayoutMode[], preferred?: ChatLayoutMode): ChatLayoutMode {\n  if (preferred && preferred !== \"closed\" && allowed.includes(preferred)) {\n    return preferred;\n  }\n\n  return allowed[0] ?? \"floating\";\n}\n\nexport function getChatLayoutActions(\n  allowedLayouts: ChatLayoutMode[],\n  currentLayout?: ChatLayoutMode\n): Exclude<ChatLayoutMode, \"closed\">[] {\n  return resolveAllowedLayouts(allowedLayouts).filter(\n    (mode): mode is Exclude<ChatLayoutMode, \"closed\"> => mode !== \"closed\" && mode !== currentLayout\n  );\n}\n\nexport function shouldShowChatCloseButton(options: {\n  floatingTrigger?: boolean;\n  embedded?: boolean;\n  overlayContext?: boolean;\n  effectiveLayout?: ChatLayoutMode;\n  showCloseButton?: boolean;\n}): boolean {\n  if (options.showCloseButton === false) {\n    return false;\n  }\n\n  if (options.showCloseButton === true) {\n    return true;\n  }\n\n  if (\n    options.overlayContext &&\n    options.floatingTrigger &&\n    !options.embedded &&\n    (options.effectiveLayout === \"floating\" || options.effectiveLayout === \"fullHeight\")\n  ) {\n    return true;\n  }\n\n  return Boolean(options.floatingTrigger && !options.embedded && options.effectiveLayout === \"floating\");\n}\n\nexport interface ChatComposerNewlineOptions {\n  shiftEnterNewline?: boolean;\n  ctrlEnterNewline?: boolean;\n}\n\nexport function shouldComposerNewlineOnEnter(\n  event: { key: string; shiftKey: boolean; ctrlKey: boolean; metaKey: boolean },\n  options: ChatComposerNewlineOptions = {}\n): boolean {\n  if (event.key !== \"Enter\") {\n    return false;\n  }\n\n  const { shiftEnterNewline = true, ctrlEnterNewline = true } = options;\n  const isCtrl = event.ctrlKey || event.metaKey;\n\n  if (shiftEnterNewline && event.shiftKey && !isCtrl) {\n    return true;\n  }\n\n  if (ctrlEnterNewline && isCtrl && !event.shiftKey) {\n    return true;\n  }\n\n  return false;\n}\n"],"names":["isChatMessageDeliveryStatus","status","CHAT_MESSAGE_DELIVERY_STATUSES","resolveChatMessageStatusIcon","icons","custom","CHAT_MESSAGE_STATUS_ICONS","resolveChatMessageStatusLabel","CHAT_MESSAGE_STATUS_LABELS","isImageAttachment","attachment","_a","formatChatTimestamp","value","date","resolveAllowedLayouts","input","CHAT_EXPAND_LAYOUTS","mode","pickInitialLayout","allowed","preferred","getChatLayoutActions","allowedLayouts","currentLayout","shouldShowChatCloseButton","options","shouldComposerNewlineOnEnter","event","shiftEnterNewline","ctrlEnterNewline","isCtrl"],"mappings":";AAYO,SAASA,EAA4BC,GAAgE;AAC1G,SAAOC,EAA+B,SAASD,CAAmC;AACpF;AAEO,SAASE,EACdF,GACAG,GACoB;AACpB,QAAMC,IAASD,KAAA,gBAAAA,EAAQH;AACvB,MAAII;AACF,WAAOA;AAGT,MAAIL,EAA4BC,CAAM;AACpC,WAAOK,EAA0BL,CAAM;AAI3C;AAEO,SAASM,EAA8BN,GAAmC;AAC/E,SAAID,EAA4BC,CAAM,IAC7BO,EAA2BP,CAAM,IAGnC,OAAOA,CAAM;AACtB;AAEO,SAASQ,EAAkBC,GAAqC;;AACrE,UAAIC,IAAAD,EAAW,aAAX,QAAAC,EAAqB,WAAW,YAC3B,KAGF,mCAAmC,KAAKD,EAAW,IAAI;AAChE;AAEO,SAASE,EAAoBC,GAA+B;AACjE,MAAI,CAACA;AACH,WAAO;AAGT,QAAMC,IAAOD,aAAiB,OAAOA,IAAQ,IAAI,KAAKA,CAAK;AAE3D,SAAI,OAAO,MAAMC,EAAK,QAAA,CAAS,IACtB,OAAOD,CAAK,IAGd,IAAI,KAAK,eAAe,QAAW;AAAA,IACxC,MAAM;AAAA,IACN,QAAQ;AAAA,EAAA,CACT,EAAE,OAAOC,CAAI;AAChB;AAEO,SAASC,EAAsBC,GAA4C;AAChF,SAAIA,KAAS,OACJ,CAAC,UAAU,IAGhBA,EAAM,WAAW,IACZ,CAAA,IAGFC,EAAoB,OAAO,CAACC,MAASF,EAAM,SAASE,CAAI,CAAC;AAClE;AAEO,SAASC,EAAkBC,GAA2BC,GAA4C;;AACvG,SAAIA,KAAaA,MAAc,YAAYD,EAAQ,SAASC,CAAS,IAC5DA,KAGFV,IAAAS,EAAQ,CAAC,MAAT,OAAAT,IAAc;AACvB;AAEO,SAASW,EACdC,GACAC,GACqC;AACrC,SAAOT,EAAsBQ,CAAc,EAAE;AAAA,IAC3C,CAACL,MAAoDA,MAAS,YAAYA,MAASM;AAAA,EAAA;AAEvF;AAEO,SAASC,EAA0BC,GAM9B;AACV,SAAIA,EAAQ,oBAAoB,KACvB,KAGLA,EAAQ,oBAAoB,MAK9BA,EAAQ,kBACRA,EAAQ,mBACR,CAACA,EAAQ,aACRA,EAAQ,oBAAoB,cAAcA,EAAQ,oBAAoB,gBAEhE,KAGF,GAAQA,EAAQ,mBAAmB,CAACA,EAAQ,YAAYA,EAAQ,oBAAoB;AAC7F;AAOO,SAASC,EACdC,GACAF,IAAsC,IAC7B;AACT,MAAIE,EAAM,QAAQ;AAChB,WAAO;AAGT,QAAM,EAAE,mBAAAC,IAAoB,IAAM,kBAAAC,IAAmB,OAASJ,GACxDK,IAASH,EAAM,WAAWA,EAAM;AAMtC,SAJI,GAAAC,KAAqBD,EAAM,YAAY,CAACG,KAIxCD,KAAoBC,KAAU,CAACH,EAAM;AAK3C;"}
+{"version":3,"file":"utils.js","sources":["../../../../src/components/dataDisplay/chat/utils.ts"],"sourcesContent":["import {\n  ChatAttachment,\n  ChatLayoutMode,\n  CHAT_EXPAND_LAYOUTS,\n  CHAT_MESSAGE_DELIVERY_STATUSES,\n  CHAT_MESSAGE_STATUS_ICONS,\n  CHAT_MESSAGE_STATUS_LABELS,\n  ChatMessageDeliveryStatus,\n  ChatMessageStatus,\n  ChatMessageStatusIcons,\n} from \"./types\";\n\nexport function isChatMessageDeliveryStatus(status: ChatMessageStatus): status is ChatMessageDeliveryStatus {\n  return CHAT_MESSAGE_DELIVERY_STATUSES.includes(status as ChatMessageDeliveryStatus);\n}\n\nexport function resolveChatMessageStatusIcon(\n  status: ChatMessageStatus,\n  icons?: ChatMessageStatusIcons & Record<string, string | undefined>\n): string | undefined {\n  const custom = icons?.[status];\n  if (custom) {\n    return custom;\n  }\n\n  if (isChatMessageDeliveryStatus(status)) {\n    return CHAT_MESSAGE_STATUS_ICONS[status];\n  }\n\n  return undefined;\n}\n\nexport function resolveChatMessageStatusLabel(status: ChatMessageStatus): string {\n  if (isChatMessageDeliveryStatus(status)) {\n    return CHAT_MESSAGE_STATUS_LABELS[status];\n  }\n\n  return String(status);\n}\n\nexport function isImageAttachment(attachment: ChatAttachment): boolean {\n  if (attachment.mimeType?.startsWith(\"image/\")) {\n    return true;\n  }\n\n  return /\\.(png|jpe?g|gif|webp|bmp|svg)$/i.test(attachment.name);\n}\n\nexport function formatChatTimestamp(value?: string | Date): string {\n  if (!value) {\n    return \"\";\n  }\n\n  const date = value instanceof Date ? value : new Date(value);\n\n  if (Number.isNaN(date.getTime())) {\n    return String(value);\n  }\n\n  return new Intl.DateTimeFormat(undefined, {\n    hour: \"2-digit\",\n    minute: \"2-digit\",\n  }).format(date);\n}\n\nexport function resolveAllowedLayouts(input?: ChatLayoutMode[]): ChatLayoutMode[] {\n  if (input == null) {\n    return [\"floating\"];\n  }\n\n  if (input.length === 0) {\n    return [];\n  }\n\n  return CHAT_EXPAND_LAYOUTS.filter((mode) => input.includes(mode));\n}\n\nexport function pickInitialLayout(allowed: ChatLayoutMode[], preferred?: ChatLayoutMode): ChatLayoutMode {\n  if (preferred && preferred !== \"closed\" && allowed.includes(preferred)) {\n    return preferred;\n  }\n\n  return allowed[0] ?? \"floating\";\n}\n\nexport function getChatLayoutActions(\n  allowedLayouts: ChatLayoutMode[],\n  currentLayout?: ChatLayoutMode\n): Exclude<ChatLayoutMode, \"closed\">[] {\n  return resolveAllowedLayouts(allowedLayouts).filter(\n    (mode): mode is Exclude<ChatLayoutMode, \"closed\"> => mode !== \"closed\" && mode !== currentLayout\n  );\n}\n\nexport function shouldShowChatCloseButton(options: {\n  floatingTrigger?: boolean;\n  embedded?: boolean;\n  overlayContext?: boolean;\n  effectiveLayout?: ChatLayoutMode;\n  showCloseButton?: boolean;\n}): boolean {\n  if (options.showCloseButton === false) {\n    return false;\n  }\n\n  if (options.showCloseButton === true) {\n    return true;\n  }\n\n  if (\n    options.overlayContext &&\n    options.floatingTrigger &&\n    !options.embedded &&\n    (options.effectiveLayout === \"floating\" || options.effectiveLayout === \"fullHeight\")\n  ) {\n    return true;\n  }\n\n  return Boolean(options.floatingTrigger && !options.embedded && options.effectiveLayout === \"floating\");\n}\n\n/**\n * Deprecated: the newline flags of the old `ChatComposer`. `Composer` picks the send key with `sendKey` instead\n * (`\"enter\"` = Enter sends, Shift+Enter makes a newline; `\"modEnter\"` = Ctrl/⌘+Enter sends). Removed with\n * `ChatComposer` in the next major.\n *\n * @deprecated Use `Composer`'s `sendKey`; see the README section \"Migrating from ChatComposer\".\n */\nexport interface ChatComposerNewlineOptions {\n  shiftEnterNewline?: boolean;\n  ctrlEnterNewline?: boolean;\n}\n\n/**\n * Deprecated: the key rule of the old `ChatComposer` (which Enter sends, which makes a newline).\n * `Composer` resolves the same choice through `sendKey` in `resolveComposerKeyAction`, and `Chat` draws a `Composer`\n * by default. Kept for `ChatComposer` and `legacyComposer` only; removed in the next major.\n *\n * @deprecated Use `Composer`'s `sendKey`; see the README section \"Migrating from ChatComposer\".\n */\nexport function shouldComposerNewlineOnEnter(\n  event: { key: string; shiftKey: boolean; ctrlKey: boolean; metaKey: boolean },\n  options: ChatComposerNewlineOptions = {}\n): boolean {\n  if (event.key !== \"Enter\") {\n    return false;\n  }\n\n  const { shiftEnterNewline = true, ctrlEnterNewline = true } = options;\n  const isCtrl = event.ctrlKey || event.metaKey;\n\n  if (shiftEnterNewline && event.shiftKey && !isCtrl) {\n    return true;\n  }\n\n  if (ctrlEnterNewline && isCtrl && !event.shiftKey) {\n    return true;\n  }\n\n  return false;\n}\n"],"names":["isChatMessageDeliveryStatus","status","CHAT_MESSAGE_DELIVERY_STATUSES","resolveChatMessageStatusIcon","icons","custom","CHAT_MESSAGE_STATUS_ICONS","resolveChatMessageStatusLabel","CHAT_MESSAGE_STATUS_LABELS","isImageAttachment","attachment","_a","formatChatTimestamp","value","date","resolveAllowedLayouts","input","CHAT_EXPAND_LAYOUTS","mode","pickInitialLayout","allowed","preferred","getChatLayoutActions","allowedLayouts","currentLayout","shouldShowChatCloseButton","options","shouldComposerNewlineOnEnter","event","shiftEnterNewline","ctrlEnterNewline","isCtrl"],"mappings":";AAYO,SAASA,EAA4BC,GAAgE;AAC1G,SAAOC,EAA+B,SAASD,CAAmC;AACpF;AAEO,SAASE,EACdF,GACAG,GACoB;AACpB,QAAMC,IAASD,KAAA,gBAAAA,EAAQH;AACvB,MAAII;AACF,WAAOA;AAGT,MAAIL,EAA4BC,CAAM;AACpC,WAAOK,EAA0BL,CAAM;AAI3C;AAEO,SAASM,EAA8BN,GAAmC;AAC/E,SAAID,EAA4BC,CAAM,IAC7BO,EAA2BP,CAAM,IAGnC,OAAOA,CAAM;AACtB;AAEO,SAASQ,EAAkBC,GAAqC;;AACrE,UAAIC,IAAAD,EAAW,aAAX,QAAAC,EAAqB,WAAW,YAC3B,KAGF,mCAAmC,KAAKD,EAAW,IAAI;AAChE;AAEO,SAASE,EAAoBC,GAA+B;AACjE,MAAI,CAACA;AACH,WAAO;AAGT,QAAMC,IAAOD,aAAiB,OAAOA,IAAQ,IAAI,KAAKA,CAAK;AAE3D,SAAI,OAAO,MAAMC,EAAK,QAAA,CAAS,IACtB,OAAOD,CAAK,IAGd,IAAI,KAAK,eAAe,QAAW;AAAA,IACxC,MAAM;AAAA,IACN,QAAQ;AAAA,EAAA,CACT,EAAE,OAAOC,CAAI;AAChB;AAEO,SAASC,EAAsBC,GAA4C;AAChF,SAAIA,KAAS,OACJ,CAAC,UAAU,IAGhBA,EAAM,WAAW,IACZ,CAAA,IAGFC,EAAoB,OAAO,CAACC,MAASF,EAAM,SAASE,CAAI,CAAC;AAClE;AAEO,SAASC,EAAkBC,GAA2BC,GAA4C;;AACvG,SAAIA,KAAaA,MAAc,YAAYD,EAAQ,SAASC,CAAS,IAC5DA,KAGFV,IAAAS,EAAQ,CAAC,MAAT,OAAAT,IAAc;AACvB;AAEO,SAASW,EACdC,GACAC,GACqC;AACrC,SAAOT,EAAsBQ,CAAc,EAAE;AAAA,IAC3C,CAACL,MAAoDA,MAAS,YAAYA,MAASM;AAAA,EAAA;AAEvF;AAEO,SAASC,EAA0BC,GAM9B;AACV,SAAIA,EAAQ,oBAAoB,KACvB,KAGLA,EAAQ,oBAAoB,MAK9BA,EAAQ,kBACRA,EAAQ,mBACR,CAACA,EAAQ,aACRA,EAAQ,oBAAoB,cAAcA,EAAQ,oBAAoB,gBAEhE,KAGF,GAAQA,EAAQ,mBAAmB,CAACA,EAAQ,YAAYA,EAAQ,oBAAoB;AAC7F;AAqBO,SAASC,EACdC,GACAF,IAAsC,IAC7B;AACT,MAAIE,EAAM,QAAQ;AAChB,WAAO;AAGT,QAAM,EAAE,mBAAAC,IAAoB,IAAM,kBAAAC,IAAmB,OAASJ,GACxDK,IAASH,EAAM,WAAWA,EAAM;AAMtC,SAJI,GAAAC,KAAqBD,EAAM,YAAY,CAACG,KAIxCD,KAAoBC,KAAU,CAACH,EAAM;AAK3C;"}

package/dist/components/dataDisplay/chip/chip.d.ts

@@ -1,24 +1,55 @@
 import React from "react";
 export type ChipColor = "default" | "primary" | "secondary" | "error" | "success" | "warning" | "info";
 export interface ChipProps extends React.HTMLAttributes<HTMLSpanElement | HTMLAnchorElement> {
+    /**
+     * Class name(s) for the chip's root, a `<span>` (an `<a>` with `asLink`). `style`, `id`, `data-*`, `aria-hidden`,
+     * `ref` and event handlers go to the root too. In a clickable chip (`onClick`), `role`, `tabIndex`, `onFocus`,
+     * `onBlur` and the other `aria-*` attributes go to its button, `.smwb-chip__content` (the icon and the label), which
+     * is also the element to focus. Otherwise they stay on the root, which holds the delete button too.
+     */
     className?: string;
     variant?: "filled" | "outlined";
     size?: "small" | "medium";
     color?: ChipColor;
+    /**
+     * Shows a delete button in the chip and runs when it is pressed: a click, or
+     * Enter / Space while the button has focus. In a clickable chip it sits
+     * beside the chip's button, not inside it, and pressing it does not run the
+     * chip's `onClick`.
+     */
     onDelete?: (event: React.SyntheticEvent) => void;
     icon?: React.ReactNode;
     deleteIcon?: React.ReactNode;
     label: string;
+    /**
+     * Makes the chip clickable: its icon and label become a button, named by
+     * them, with a focus ring around the whole chip. The delete button is not
+     * part of that button but its sibling, so it keeps its own name.
+     *
+     * Runs on a click on the chip and on Enter / Space while the chip's button
+     * has focus, but not on a click or key on the delete button.
+     */
     onClick?: () => void;
     onDeleteMouseDown?: React.MouseEventHandler;
+    /**
+     * Disables the chip: it is dimmed, takes no pointer input and says `aria-disabled`, and its delete button is
+     * disabled too. With `onClick` the chip is still a button, out of the tab order.
+     */
     disabled?: boolean;
     asLink?: boolean;
     href?: string;
     /** Open the link in a new tab (asLink only). */
     target?: string;
     selected?: boolean;
+    /**
+     * Id of the label's element, for another element to take the chip's text as
+     * its name (`aria-labelledby`) without the delete button's name.
+     */
+    labelId?: string;
     /** Accessible label for the delete control. */
     deleteAriaLabel?: string;
+    /** Test id of the root; `chip`, or `chip-link` for a link, unless given. */
+    "data-testid"?: string;
 }
 export declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLSpanElement | HTMLAnchorElement>>;
 export default Chip;