stream-chat-react 14.11.1 → 14.12.0

package/dist/es/components/Form/SwitchField.mjs

@@ -0,0 +1,103 @@
+import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import { AriaLiveAnnouncerContext } from "../Accessibility/useAriaLiveAnnouncer.mjs";
+import { useStableId } from "../UtilityComponents/useStableId.mjs";
+import { isValidElement, useContext, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/Form/SwitchField.tsx
+var SwitchField = ({ children, description, fieldClassName, title, ...props }) => {
+	const { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, checked, defaultChecked, disabled, id, onChange, onKeyDown, ...rest } = props;
+	const generatedSwitchId = useStableId();
+	const switchId = id ?? `str-chat__switch-field-${generatedSwitchId}`;
+	const switchLabelId = `${switchId}-label`;
+	const inputRef = useRef(null);
+	const announce = useContext(AriaLiveAnnouncerContext)?.announce;
+	const { t } = useTranslationContext("SwitchField");
+	const [uncontrolledChecked, setUncontrolledChecked] = useState(Boolean(defaultChecked));
+	const isControlled = checked !== void 0;
+	const isOn = isControlled ? checked : uncontrolledChecked;
+	const isReadOnly = isControlled && onChange === void 0;
+	const childLabelId = (isValidElement(children) ? children : void 0)?.props.id;
+	const resolvedAriaLabelledBy = ariaLabelledBy ?? (!ariaLabel ? title ? switchLabelId : childLabelId : void 0);
+	const resolveAnnouncementName = () => {
+		if (title) return title;
+		if (ariaLabel) return ariaLabel;
+		if (resolvedAriaLabelledBy) {
+			const labelEl = document.getElementById(resolvedAriaLabelledBy);
+			return ((labelEl?.querySelector(".str-chat__form__switch-field__label__text"))?.textContent || labelEl?.textContent || "").trim() || void 0;
+		}
+	};
+	const handleChange = (event) => {
+		if (!isControlled) setUncontrolledChecked(event.target.checked);
+		onChange?.(event);
+		const setting = resolveAnnouncementName();
+		if (!announce || !setting) return;
+		announce(event.target.checked ? t("aria/{{ setting }} enabled", { setting }) : t("aria/{{ setting }} disabled", { setting }), { priority: "polite" });
+	};
+	const handleKeyDown = (event) => {
+		onKeyDown?.(event);
+		if (event.defaultPrevented || event.key !== " ") return;
+		event.preventDefault();
+		event.currentTarget.click();
+	};
+	const handleSwitchClick = (event) => {
+		if (disabled || event.target === inputRef.current) return;
+		inputRef.current?.click();
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx("str-chat__form__switch-field", fieldClassName, disabled && "str-chat__form__switch-field--disabled"),
+		children: [title ? /* @__PURE__ */ jsx(SwitchFieldLabel, {
+			description,
+			htmlFor: switchId,
+			id: switchLabelId,
+			title
+		}) : children, /* @__PURE__ */ jsx(Switch, {
+			...rest,
+			"aria-label": ariaLabel,
+			"aria-labelledby": resolvedAriaLabelledBy,
+			checked: isOn,
+			disabled,
+			id: switchId,
+			on: isOn,
+			onChange: handleChange,
+			onKeyDown: handleKeyDown,
+			onSwitchClick: handleSwitchClick,
+			readOnly: isReadOnly,
+			switchRef: inputRef
+		})]
+	});
+};
+var Switch = ({ className, on, onSwitchClick, presentation, switchRef, ...props }) => /* @__PURE__ */ jsxs("div", {
+	"aria-hidden": presentation ? true : void 0,
+	className: clsx("str-chat__form__switch-field__switch", { "str-chat__form__switch-field__switch--on": on }),
+	onClick: presentation ? void 0 : onSwitchClick,
+	children: [!presentation && /* @__PURE__ */ jsx("input", {
+		...props,
+		className: clsx("str-chat__form__switch-field__input", className),
+		ref: switchRef,
+		role: "switch",
+		type: "checkbox"
+	}), /* @__PURE__ */ jsx("span", { className: "str-chat__form__switch-field__switch-handle" })]
+});
+var SwitchFieldLabel = ({ asError, children, className, description, title, ...props }) => /* @__PURE__ */ jsx("label", {
+	className: clsx("str-chat__form__switch-field__label", { "str-chat__form__switch-field__label--as-error": asError }, className),
+	...props,
+	children: /* @__PURE__ */ jsx("div", {
+		className: "str-chat__form__switch-field__label__content",
+		children: title ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(SwitchFieldTitle, { children: title }), description != null && description !== "" && /* @__PURE__ */ jsx(SwitchFieldDescription, { children: description })] }) : children
+	})
+});
+var SwitchFieldTitle = ({ children, className, title, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: clsx("str-chat__form__switch-field__label__text", className),
+	...props,
+	children: children ?? title
+});
+var SwitchFieldDescription = ({ children, className, description, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: clsx("str-chat__form__switch-field__label__description", className),
+	...props,
+	children: children ?? description
+});
+//#endregion
+export { Switch, SwitchField, SwitchFieldDescription, SwitchFieldLabel, SwitchFieldTitle };
+
+//# sourceMappingURL=SwitchField.mjs.map

package/dist/es/components/Form/SwitchField.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwitchField.mjs","names":[],"sources":["../../../../src/components/Form/SwitchField.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport type {\n  ChangeEventHandler,\n  ComponentProps,\n  KeyboardEventHandler,\n  MouseEventHandler,\n  PropsWithChildren,\n  ReactNode,\n} from 'react';\nimport React, { isValidElement, useContext, useRef, useState } from 'react';\nimport { useStableId } from '../UtilityComponents/useStableId';\nimport { AriaLiveAnnouncerContext } from '../Accessibility';\nimport { useTranslationContext } from '../../context';\n\nexport type SwitchFieldProps = Omit<\n  PropsWithChildren<ComponentProps<'input'>>,\n  'children'\n> & {\n  /** Main label content when title/description are not used */\n  children?: ReactNode;\n  /** Optional description line below title */\n  description?: string;\n  /** Class applied to the root div element of the SwitchField component */\n  fieldClassName?: string;\n  /** Optional title line */\n  title?: string;\n};\n\nexport const SwitchField = ({\n  children,\n  description,\n  fieldClassName,\n  title,\n  ...props\n}: SwitchFieldProps) => {\n  const {\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    checked,\n    defaultChecked,\n    disabled,\n    id,\n    onChange,\n    onKeyDown,\n    ...rest\n  } = props;\n  const generatedSwitchId = useStableId();\n  const switchId = id ?? `str-chat__switch-field-${generatedSwitchId}`;\n  const switchLabelId = `${switchId}-label`;\n  const inputRef = useRef<HTMLInputElement | null>(null);\n  // Read the announcer optionally: a SwitchField may render outside an announcer provider (e.g. in\n  // isolation), where it simply stays silent rather than warning.\n  const announce = useContext(AriaLiveAnnouncerContext)?.announce;\n  const { t } = useTranslationContext('SwitchField');\n\n  const [uncontrolledChecked, setUncontrolledChecked] = useState(Boolean(defaultChecked));\n  const isControlled = checked !== undefined;\n  const isOn = isControlled ? checked : uncontrolledChecked;\n  const isReadOnly = isControlled && onChange === undefined;\n\n  // When no title/aria-label is provided, SwitchField can still be named by a caller-supplied\n  // child element id via aria-labelledby.\n  const childElement = isValidElement<{ id?: string }>(children) ? children : undefined;\n  const childLabelId = childElement?.props.id;\n  // Accessible-name precedence:\n  // 1) explicit aria-labelledby prop\n  // 2) explicit aria-label prop\n  // 3) generated title label id (title path)\n  // 4) caller-supplied child id (children path)\n  const resolvedAriaLabelledBy =\n    ariaLabelledBy ?? (!ariaLabel ? (title ? switchLabelId : childLabelId) : undefined);\n\n  // Name the toggled setting for the announcement: prefer the explicit title/aria-label; otherwise\n  // fall back to the text of the aria-labelledby target (its title row, when present, so the\n  // description is not read out as part of the name).\n  const resolveAnnouncementName = () => {\n    if (title) return title;\n    if (ariaLabel) return ariaLabel;\n    if (resolvedAriaLabelledBy) {\n      const labelEl = document.getElementById(resolvedAriaLabelledBy);\n      const titleEl = labelEl?.querySelector(\n        '.str-chat__form__switch-field__label__text',\n      );\n      return (titleEl?.textContent || labelEl?.textContent || '').trim() || undefined;\n    }\n    return undefined;\n  };\n\n  const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n    if (!isControlled) {\n      setUncontrolledChecked(event.target.checked);\n    }\n\n    onChange?.(event);\n\n    const setting = resolveAnnouncementName();\n    if (!announce || !setting) return;\n    announce(\n      event.target.checked\n        ? t('aria/{{ setting }} enabled', { setting })\n        : t('aria/{{ setting }} disabled', { setting }),\n      { priority: 'polite' },\n    );\n  };\n\n  const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = (event) => {\n    onKeyDown?.(event);\n    if (event.defaultPrevented || event.key !== ' ') return;\n\n    event.preventDefault();\n    event.currentTarget.click();\n  };\n\n  const handleSwitchClick: MouseEventHandler<HTMLDivElement> = (event) => {\n    if (disabled || event.target === inputRef.current) return;\n    inputRef.current?.click();\n  };\n\n  return (\n    <div\n      className={clsx(\n        'str-chat__form__switch-field',\n        fieldClassName,\n        disabled && 'str-chat__form__switch-field--disabled',\n      )}\n    >\n      {title ? (\n        <SwitchFieldLabel\n          description={description}\n          htmlFor={switchId}\n          id={switchLabelId}\n          title={title}\n        />\n      ) : (\n        children\n      )}\n      <Switch\n        {...rest}\n        aria-label={ariaLabel}\n        aria-labelledby={resolvedAriaLabelledBy}\n        checked={isOn}\n        disabled={disabled}\n        id={switchId}\n        on={isOn}\n        onChange={handleChange}\n        onKeyDown={handleKeyDown}\n        onSwitchClick={handleSwitchClick}\n        readOnly={isReadOnly}\n        switchRef={inputRef}\n      />\n    </div>\n  );\n};\nexport type SwitchProps = Omit<ComponentProps<'input'>, 'type'> & {\n  on?: boolean;\n  onSwitchClick?: MouseEventHandler<HTMLDivElement>;\n  /**\n   * Renders the switch as a visual-only indicator when another element owns interaction.\n   * Example: a button row with a trailing switch indicator must not render an input inside the button.\n   */\n  presentation?: boolean;\n  switchRef?: React.RefObject<HTMLInputElement | null>;\n};\n\nexport const Switch = ({\n  className,\n  on,\n  onSwitchClick,\n  presentation,\n  switchRef,\n  ...props\n}: SwitchProps) => (\n  <div\n    aria-hidden={presentation ? true : undefined}\n    className={clsx('str-chat__form__switch-field__switch', {\n      'str-chat__form__switch-field__switch--on': on,\n    })}\n    onClick={presentation ? undefined : onSwitchClick}\n  >\n    {!presentation && (\n      <input\n        {...props}\n        className={clsx('str-chat__form__switch-field__input', className)}\n        ref={switchRef}\n        role='switch'\n        type='checkbox'\n      />\n    )}\n    <span className='str-chat__form__switch-field__switch-handle' />\n  </div>\n);\n\nexport type SwitchFieldLabelProps = ComponentProps<'label'> & {\n  /** Adds className str-chat__form__switch-field__label--as-error to the root */\n  asError?: boolean;\n  title?: string;\n  description?: string;\n};\n\nexport const SwitchFieldLabel = ({\n  asError,\n  children,\n  className,\n  description,\n  title,\n  ...props\n}: SwitchFieldLabelProps) => (\n  <label\n    className={clsx(\n      'str-chat__form__switch-field__label',\n      { 'str-chat__form__switch-field__label--as-error': asError },\n      className,\n    )}\n    {...props}\n  >\n    <div className='str-chat__form__switch-field__label__content'>\n      {title ? (\n        <>\n          <SwitchFieldTitle>{title}</SwitchFieldTitle>\n          {description != null && description !== '' && (\n            <SwitchFieldDescription>{description}</SwitchFieldDescription>\n          )}\n        </>\n      ) : (\n        children\n      )}\n    </div>\n  </label>\n);\n\nexport type SwitchFieldTitleProps = ComponentProps<'div'> & {\n  title?: string;\n};\n\nexport const SwitchFieldTitle = ({\n  children,\n  className,\n  title,\n  ...props\n}: SwitchFieldTitleProps) => (\n  <div\n    className={clsx('str-chat__form__switch-field__label__text', className)}\n    {...props}\n  >\n    {children ?? title}\n  </div>\n);\n\nexport type SwitchFieldDescriptionProps = ComponentProps<'div'> & {\n  description?: string;\n};\n\nexport const SwitchFieldDescription = ({\n  children,\n  className,\n  description,\n  ...props\n}: SwitchFieldDescriptionProps) => (\n  <div\n    className={clsx('str-chat__form__switch-field__label__description', className)}\n    {...props}\n  >\n    {children ?? description}\n  </div>\n);\n"],"mappings":"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"}

package/dist/es/components/Form/TextInput.mjs

@@ -0,0 +1,113 @@
+import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
+import { useStableId } from "../UtilityComponents/useStableId.mjs";
+import { forwardRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/Form/TextInput.tsx
+var TextInputIconMessageLine = ({ icon, text }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+	"aria-hidden": true,
+	className: "str-chat__form-text-input__message-icon",
+	children: icon
+}), /* @__PURE__ */ jsx("span", {
+	className: "str-chat__form-text-input__message-text",
+	children: text
+})] });
+var TextInputFieldMessage = (props) => {
+	const { IconCheckmark, IconExclamationMark } = useComponentContextIcons();
+	if (props.kind === "neutral") return /* @__PURE__ */ jsx("div", {
+		className: clsx("str-chat__form-text-input__message", props.insidePlacement && "str-chat__form-text-input__message--field-message-inside"),
+		id: props.id,
+		children: props.text
+	});
+	else if (props.kind === "success") return /* @__PURE__ */ jsx("div", {
+		className: clsx("str-chat__form-text-input__message", "str-chat__form-text-input__message--success", props.insidePlacement && "str-chat__form-text-input__message--field-message-inside"),
+		id: props.id,
+		children: /* @__PURE__ */ jsx(TextInputIconMessageLine, {
+			icon: props.successMessageIcon ?? /* @__PURE__ */ jsx(IconCheckmark, {}),
+			text: props.text
+		})
+	});
+	else if (props.kind === "error") return /* @__PURE__ */ jsx("div", {
+		className: clsx("str-chat__form-text-input__message", "str-chat__form-field-error", props.insidePlacement && "str-chat__form-text-input__message--field-message-inside"),
+		id: props.id,
+		role: "alert",
+		children: /* @__PURE__ */ jsx(TextInputIconMessageLine, {
+			icon: props.errorMessageIcon ?? /* @__PURE__ */ jsx(IconExclamationMark, {}),
+			text: props.text
+		})
+	});
+	return null;
+};
+var TextInput = forwardRef(function TextInput({ className, disabled, error = false, errorMessage, errorMessageIcon, fieldMessagePlacement = "outside", id: idProp, label, leading, message, successMessage, successMessageIcon, trailing, trailingText, variant = "outline", ...inputProps }, ref) {
+	const autoId = useStableId();
+	const id = idProp ?? autoId;
+	const hasError = error && (errorMessage != null || message != null);
+	const showSuccess = !hasError && successMessage != null;
+	const showNeutral = !hasError && !showSuccess && message != null;
+	const messageInside = fieldMessagePlacement === "inside" && (hasError || showSuccess || showNeutral);
+	const messageId = hasError ? `${id}-field-error` : showSuccess || showNeutral ? `${id}-message` : void 0;
+	const describedBy = [inputProps["aria-describedby"], messageId].filter((value) => !!value).join(" ");
+	const fieldMessage = hasError ? /* @__PURE__ */ jsx(TextInputFieldMessage, {
+		errorMessageIcon,
+		id: messageId,
+		insidePlacement: messageInside,
+		kind: "error",
+		text: errorMessage ?? message
+	}) : showSuccess ? /* @__PURE__ */ jsx(TextInputFieldMessage, {
+		id: messageId,
+		insidePlacement: messageInside,
+		kind: "success",
+		successMessageIcon,
+		text: successMessage
+	}) : showNeutral ? /* @__PURE__ */ jsx(TextInputFieldMessage, {
+		id: messageId,
+		insidePlacement: messageInside,
+		kind: "neutral",
+		text: message
+	}) : null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx("str-chat__form-text-input", error && "str-chat__form-text-input--error", showSuccess && "str-chat__form-text-input--success", disabled && "str-chat__form-text-input--disabled", messageInside && "str-chat__form-text-input--field-message-inside", className),
+		children: [
+			label ? /* @__PURE__ */ jsx("label", {
+				className: "str-chat__form-text-input__label",
+				htmlFor: id,
+				children: label
+			}) : null,
+			/* @__PURE__ */ jsxs("div", {
+				className: clsx("str-chat__form-text-input__wrapper", `str-chat__form-text-input__wrapper--${variant}`, messageInside && "str-chat__form-text-input__wrapper--field-message-inside"),
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "str-chat__form-text-input__control-row",
+					children: [
+						leading ? /* @__PURE__ */ jsx("span", {
+							className: "str-chat__form-text-input__leading",
+							children: leading
+						}) : null,
+						/* @__PURE__ */ jsx("input", {
+							"aria-describedby": describedBy,
+							"aria-invalid": error,
+							className: "str-chat__form-text-input__input",
+							disabled,
+							id,
+							ref,
+							...inputProps
+						}),
+						trailingText != null ? /* @__PURE__ */ jsx("span", {
+							"aria-hidden": true,
+							className: "str-chat__form-text-input__suffix",
+							children: trailingText
+						}) : null,
+						trailing ? /* @__PURE__ */ jsx("span", {
+							className: "str-chat__form-text-input__trailing",
+							children: trailing
+						}) : null
+					]
+				}), messageInside ? fieldMessage : null]
+			}),
+			messageInside ? null : fieldMessage
+		]
+	});
+});
+//#endregion
+export { TextInput };
+
+//# sourceMappingURL=TextInput.mjs.map

package/dist/es/components/Form/TextInput.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextInput.mjs","names":[],"sources":["../../../../src/components/Form/TextInput.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, { forwardRef } from 'react';\nimport type { ComponentProps, ReactNode } from 'react';\nimport { useStableId } from '../UtilityComponents/useStableId';\nimport { useComponentContextIcons } from '../../context';\n\nexport type TextInputVariant = 'outline' | 'ghost';\n\n/** Where the active field message (error, success, or neutral) sits relative to the bordered control */\nexport type TextInputFieldMessagePlacement = 'outside' | 'inside';\n\nexport type TextInputProps = Omit<ComponentProps<'input'>, 'className'> & {\n  /** Root class name */\n  className?: string;\n  /**\n   * `outside` (default): message below the bordered wrapper.\n   * `inside`: message under the value row, inside the border (error, success, or neutral).\n   */\n  fieldMessagePlacement?: TextInputFieldMessagePlacement;\n  /** Optional label above the input */\n  label?: string;\n  /** Optional leading content (e.g. icon) inside the input area */\n  leading?: ReactNode;\n  /** Optional trailing content (e.g. clear button) inside the input area */\n  trailing?: ReactNode;\n  /** Optional suffix text shown after the input value, inside the field */\n  trailingText?: string;\n  /** Neutral/helper message below the input (no icon) */\n  message?: ReactNode;\n  /** Error message; shown when `error` is true, with `errorMessageIcon` */\n  errorMessage?: ReactNode;\n  /** Icon before error text (default: exclamation) */\n  errorMessageIcon?: ReactNode;\n  /** Success message below the input */\n  successMessage?: ReactNode;\n  /** Icon before success text (default: checkmark) */\n  successMessageIcon?: ReactNode;\n  /** When true, error border and error styling */\n  error?: boolean;\n  /** `outline` = border always; `ghost` = border on focus */\n  variant?: TextInputVariant;\n};\n\ntype TextInputIconMessageLineProps = {\n  icon: ReactNode;\n  text: ReactNode;\n};\n\nconst TextInputIconMessageLine = ({ icon, text }: TextInputIconMessageLineProps) => (\n  <>\n    <span aria-hidden className='str-chat__form-text-input__message-icon'>\n      {icon}\n    </span>\n    <span className='str-chat__form-text-input__message-text'>{text}</span>\n  </>\n);\n\n/** At most one of error / success / neutral is shown under the field */\ntype TextInputFieldMessageProps =\n  | {\n      kind: 'error';\n      id?: string;\n      insidePlacement: boolean;\n      errorMessageIcon?: ReactNode;\n      text: ReactNode;\n    }\n  | {\n      kind: 'success';\n      id?: string;\n      insidePlacement: boolean;\n      successMessageIcon?: ReactNode;\n      text: ReactNode;\n    }\n  | {\n      kind: 'neutral';\n      id?: string;\n      insidePlacement: boolean;\n      text: ReactNode;\n    };\n\nconst TextInputFieldMessage = (props: TextInputFieldMessageProps) => {\n  const { IconCheckmark, IconExclamationMark } = useComponentContextIcons();\n  if (props.kind === 'neutral') {\n    return (\n      <div\n        className={clsx(\n          'str-chat__form-text-input__message',\n          props.insidePlacement &&\n            'str-chat__form-text-input__message--field-message-inside',\n        )}\n        id={props.id}\n      >\n        {props.text}\n      </div>\n    );\n  } else if (props.kind === 'success') {\n    return (\n      <div\n        className={clsx(\n          'str-chat__form-text-input__message',\n          'str-chat__form-text-input__message--success',\n          props.insidePlacement &&\n            'str-chat__form-text-input__message--field-message-inside',\n        )}\n        id={props.id}\n      >\n        <TextInputIconMessageLine\n          icon={props.successMessageIcon ?? <IconCheckmark />}\n          text={props.text}\n        />\n      </div>\n    );\n  } else if (props.kind === 'error') {\n    return (\n      <div\n        className={clsx(\n          'str-chat__form-text-input__message',\n          'str-chat__form-field-error',\n          props.insidePlacement &&\n            'str-chat__form-text-input__message--field-message-inside',\n        )}\n        id={props.id}\n        role='alert'\n      >\n        <TextInputIconMessageLine\n          icon={props.errorMessageIcon ?? <IconExclamationMark />}\n          text={props.text}\n        />\n      </div>\n    );\n  }\n\n  return null;\n};\n\nexport const TextInput = forwardRef<HTMLInputElement, TextInputProps>(function TextInput(\n  {\n    className,\n    disabled,\n    error = false,\n    errorMessage,\n    errorMessageIcon,\n    fieldMessagePlacement = 'outside',\n    id: idProp,\n    label,\n    leading,\n    message,\n    successMessage,\n    successMessageIcon,\n    trailing,\n    trailingText,\n    variant = 'outline',\n    ...inputProps\n  },\n  ref,\n) {\n  const autoId = useStableId();\n  const id = idProp ?? autoId;\n\n  const hasError = error && (errorMessage != null || message != null);\n  const showSuccess = !hasError && successMessage != null;\n  const showNeutral = !hasError && !showSuccess && message != null;\n  const hasFeedback = hasError || showSuccess || showNeutral;\n  const messageInside = fieldMessagePlacement === 'inside' && hasFeedback;\n\n  const messageId = hasError\n    ? `${id}-field-error`\n    : showSuccess || showNeutral\n      ? `${id}-message`\n      : undefined;\n  const describedBy = [inputProps['aria-describedby'], messageId]\n    .filter((value): value is string => !!value)\n    .join(' ');\n\n  const fieldMessage = hasError ? (\n    <TextInputFieldMessage\n      errorMessageIcon={errorMessageIcon}\n      id={messageId}\n      insidePlacement={messageInside}\n      kind='error'\n      text={errorMessage ?? message}\n    />\n  ) : showSuccess ? (\n    <TextInputFieldMessage\n      id={messageId}\n      insidePlacement={messageInside}\n      kind='success'\n      successMessageIcon={successMessageIcon}\n      text={successMessage}\n    />\n  ) : showNeutral ? (\n    <TextInputFieldMessage\n      id={messageId}\n      insidePlacement={messageInside}\n      kind='neutral'\n      text={message}\n    />\n  ) : null;\n\n  return (\n    <div\n      className={clsx(\n        'str-chat__form-text-input',\n        error && 'str-chat__form-text-input--error',\n        showSuccess && 'str-chat__form-text-input--success',\n        disabled && 'str-chat__form-text-input--disabled',\n        messageInside && 'str-chat__form-text-input--field-message-inside',\n        className,\n      )}\n    >\n      {label ? (\n        <label className='str-chat__form-text-input__label' htmlFor={id}>\n          {label}\n        </label>\n      ) : null}\n      <div\n        className={clsx(\n          'str-chat__form-text-input__wrapper',\n          `str-chat__form-text-input__wrapper--${variant}`,\n          messageInside && 'str-chat__form-text-input__wrapper--field-message-inside',\n        )}\n      >\n        <div className='str-chat__form-text-input__control-row'>\n          {leading ? (\n            <span className='str-chat__form-text-input__leading'>{leading}</span>\n          ) : null}\n          <input\n            aria-describedby={describedBy}\n            aria-invalid={error}\n            className='str-chat__form-text-input__input'\n            disabled={disabled}\n            id={id}\n            ref={ref}\n            {...inputProps}\n          />\n          {trailingText != null ? (\n            <span aria-hidden className='str-chat__form-text-input__suffix'>\n              {trailingText}\n            </span>\n          ) : null}\n          {trailing ? (\n            <span className='str-chat__form-text-input__trailing'>{trailing}</span>\n          ) : null}\n        </div>\n        {messageInside ? fieldMessage : null}\n      </div>\n      {messageInside ? null : fieldMessage}\n    </div>\n  );\n});\n"],"mappings":"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"}

package/dist/es/components/Form/TextInputFieldSet.mjs

@@ -0,0 +1,21 @@
+import { DragAndDropContainer } from "../DragAndDrop/DragAndDropContainer.mjs";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/Form/TextInputFieldSet.tsx
+var TextInputFieldSet = ({ children, className, draggable, label, onSetNewOrder }) => /* @__PURE__ */ jsxs("fieldset", {
+	className: clsx("str-chat__form__input-fieldset", className),
+	children: [/* @__PURE__ */ jsx("legend", {
+		className: "str-chat__form__input-fieldset__label",
+		children: label
+	}), /* @__PURE__ */ jsx(DragAndDropContainer, {
+		className: "str-chat__form__input-fieldset__values",
+		draggable,
+		onSetNewOrder,
+		children
+	})]
+});
+//#endregion
+export { TextInputFieldSet };
+
+//# sourceMappingURL=TextInputFieldSet.mjs.map

package/dist/es/components/Form/TextInputFieldSet.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextInputFieldSet.mjs","names":[],"sources":["../../../../src/components/Form/TextInputFieldSet.tsx"],"sourcesContent":["import React from 'react';\nimport clsx from 'clsx';\nimport {\n  DragAndDropContainer,\n  type DragAndDropContainerProps,\n} from '../DragAndDrop/DragAndDropContainer';\n\nexport type TextInputFieldSetProps = DragAndDropContainerProps & {\n  label?: string;\n};\n\nexport const TextInputFieldSet = ({\n  children,\n  className,\n  draggable,\n  label,\n  onSetNewOrder,\n}: TextInputFieldSetProps) => (\n  <fieldset className={clsx('str-chat__form__input-fieldset', className)}>\n    <legend className='str-chat__form__input-fieldset__label'>{label}</legend>\n    <DragAndDropContainer\n      className='str-chat__form__input-fieldset__values'\n      draggable={draggable}\n      onSetNewOrder={onSetNewOrder}\n    >\n      {children}\n    </DragAndDropContainer>\n  </fieldset>\n);\n"],"mappings":";;;;;AAWA,IAAa,qBAAqB,EAChC,UACA,WACA,WACA,OACA,oBAEA,qBAAC,YAAD;CAAU,WAAW,KAAK,kCAAkC,SAAS;WAArE,CACE,oBAAC,UAAD;EAAQ,WAAU;YAAyC;CAAc,CAAA,GACzE,oBAAC,sBAAD;EACE,WAAU;EACC;EACI;EAEd;CACmB,CAAA,CACd"}

package/dist/es/components/Form/hooks/useFormState.mjs

@@ -0,0 +1,54 @@
+import { useCallback, useState } from "react";
+//#region src/components/Form/hooks/useFormState.ts
+function useFormState(options) {
+	const { initialValue, onSubmit, validators = {} } = options;
+	const [value, setValue] = useState(initialValue);
+	const [fieldErrors, setFieldErrors] = useState({});
+	const setFieldValue = useCallback((field, fieldValue) => {
+		setValue((prev) => ({
+			...prev,
+			[field]: fieldValue
+		}));
+		const validator = validators[field];
+		if (validator) {
+			const err = validator(fieldValue);
+			setFieldErrors((prev) => {
+				const next = { ...prev };
+				if (err) next[field] = err;
+				else delete next[field];
+				return next;
+			});
+		}
+	}, [validators]);
+	return {
+		fieldErrors,
+		handleSubmit: useCallback((e) => {
+			e?.preventDefault();
+			const errors = {};
+			for (const key of Object.keys(value)) {
+				const validator = validators[key];
+				if (validator) {
+					const err = validator(value[key]);
+					if (err) errors[key] = err;
+				}
+			}
+			if (Object.keys(errors).length > 0) {
+				setFieldErrors(errors);
+				return;
+			}
+			setFieldErrors({});
+			onSubmit(value);
+		}, [
+			value,
+			validators,
+			onSubmit
+		]),
+		setFieldValue,
+		setValue,
+		value
+	};
+}
+//#endregion
+export { useFormState };
+
+//# sourceMappingURL=useFormState.mjs.map

package/dist/es/components/Form/hooks/useFormState.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFormState.mjs","names":[],"sources":["../../../../../src/components/Form/hooks/useFormState.ts"],"sourcesContent":["import type { Dispatch, SetStateAction } from 'react';\nimport { useCallback, useState } from 'react';\n\nexport type Validators<V extends Record<string, unknown>> = {\n  [K in keyof V]?: (value: V[K]) => Error | undefined;\n};\n\nexport type UseFormStateOptions<V extends Record<string, unknown>> = {\n  initialValue: V;\n  validators?: Validators<V>;\n  onSubmit: (value: V) => Promise<void>;\n};\n\nexport type UseFormStateReturn<V extends Record<string, unknown>> = {\n  value: V;\n  setValue: Dispatch<SetStateAction<V>>;\n  setFieldValue: (field: keyof V, value: V[keyof V]) => void;\n  fieldErrors: Record<string, Error>;\n  handleSubmit: (e?: React.FormEvent) => void;\n};\n\nexport function useFormState<V extends Record<string, unknown>>(\n  options: UseFormStateOptions<V>,\n): UseFormStateReturn<V> {\n  const { initialValue, onSubmit, validators = {} as Validators<V> } = options;\n  const [value, setValue] = useState<V>(initialValue);\n  const [fieldErrors, setFieldErrors] = useState<Record<string, Error>>({});\n\n  const setFieldValue = useCallback(\n    (field: keyof V, fieldValue: V[keyof V]) => {\n      setValue((prev) => ({ ...prev, [field]: fieldValue }) as V);\n      const validator = validators[field];\n      if (validator) {\n        const err = validator(fieldValue);\n        setFieldErrors((prev) => {\n          const next = { ...prev };\n          if (err) next[field as string] = err;\n          else delete next[field as string];\n          return next;\n        });\n      }\n    },\n    [validators],\n  );\n\n  const handleSubmit = useCallback(\n    (e?: React.FormEvent) => {\n      e?.preventDefault();\n      const errors: Record<string, Error> = {};\n      for (const key of Object.keys(value) as (keyof V)[]) {\n        const validator = validators[key];\n        if (validator) {\n          const err = validator(value[key]);\n          if (err) errors[key as string] = err;\n        }\n      }\n      if (Object.keys(errors).length > 0) {\n        setFieldErrors(errors);\n        return;\n      }\n      setFieldErrors({});\n      void onSubmit(value);\n    },\n    [value, validators, onSubmit],\n  );\n\n  return {\n    fieldErrors,\n    handleSubmit,\n    setFieldValue,\n    setValue,\n    value,\n  };\n}\n"],"mappings":";;AAqBA,SAAgB,aACd,SACuB;CACvB,MAAM,EAAE,cAAc,UAAU,aAAa,CAAC,MAAuB;CACrE,MAAM,CAAC,OAAO,YAAY,SAAY,YAAY;CAClD,MAAM,CAAC,aAAa,kBAAkB,SAAgC,CAAC,CAAC;CAExE,MAAM,gBAAgB,aACnB,OAAgB,eAA2B;EAC1C,UAAU,UAAU;GAAE,GAAG;IAAO,QAAQ;EAAW,EAAO;EAC1D,MAAM,YAAY,WAAW;EAC7B,IAAI,WAAW;GACb,MAAM,MAAM,UAAU,UAAU;GAChC,gBAAgB,SAAS;IACvB,MAAM,OAAO,EAAE,GAAG,KAAK;IACvB,IAAI,KAAK,KAAK,SAAmB;SAC5B,OAAO,KAAK;IACjB,OAAO;GACT,CAAC;EACH;CACF,GACA,CAAC,UAAU,CACb;CAuBA,OAAO;EACL;EACA,cAvBmB,aAClB,MAAwB;GACvB,GAAG,eAAe;GAClB,MAAM,SAAgC,CAAC;GACvC,KAAK,MAAM,OAAO,OAAO,KAAK,KAAK,GAAkB;IACnD,MAAM,YAAY,WAAW;IAC7B,IAAI,WAAW;KACb,MAAM,MAAM,UAAU,MAAM,IAAI;KAChC,IAAI,KAAK,OAAO,OAAiB;IACnC;GACF;GACA,IAAI,OAAO,KAAK,MAAM,CAAC,CAAC,SAAS,GAAG;IAClC,eAAe,MAAM;IACrB;GACF;GACA,eAAe,CAAC,CAAC;GACjB,SAAc,KAAK;EACrB,GACA;GAAC;GAAO;GAAY;EAAQ,CAK5B;EACA;EACA;EACA;CACF;AACF"}

package/dist/es/components/Gallery/Gallery.mjs

@@ -0,0 +1,60 @@
+import { useComponentContext } from "../../context/ComponentContext.mjs";
+import { GalleryContext } from "./GalleryContext.mjs";
+import { GalleryUI } from "./GalleryUI.mjs";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Gallery/Gallery.tsx
+var Gallery = ({ closeOnBackgroundClick = true, GalleryUI: GalleryUI$1, initialIndex = 0, items, onIndexChange, onRequestClose }) => {
+	const { GalleryUI: ContextGalleryUI } = useComponentContext();
+	const ResolvedGalleryUI = GalleryUI$1 ?? ContextGalleryUI ?? GalleryUI;
+	const [currentIndex, setCurrentIndex] = useState(initialIndex);
+	const itemCount = items.length;
+	const goToIndex = useCallback((index) => {
+		if (index >= 0 && index < itemCount) setCurrentIndex(index);
+	}, [itemCount]);
+	const goToNext = useCallback(() => {
+		setCurrentIndex((prev) => prev < itemCount - 1 ? prev + 1 : prev);
+	}, [itemCount]);
+	const goToPrevious = useCallback(() => {
+		setCurrentIndex((prev) => prev > 0 ? prev - 1 : prev);
+	}, []);
+	useEffect(() => {
+		onIndexChange?.(currentIndex);
+	}, [currentIndex, onIndexChange]);
+	const hasNext = currentIndex < itemCount - 1;
+	const hasPrevious = currentIndex > 0;
+	const currentItem = items[currentIndex];
+	const contextValue = useMemo(() => ({
+		closeOnBackgroundClick,
+		currentIndex,
+		currentItem,
+		goToIndex,
+		goToNext,
+		goToPrevious,
+		hasNext,
+		hasPrevious,
+		itemCount,
+		items,
+		onRequestClose
+	}), [
+		closeOnBackgroundClick,
+		currentIndex,
+		currentItem,
+		goToIndex,
+		goToNext,
+		goToPrevious,
+		hasNext,
+		hasPrevious,
+		itemCount,
+		items,
+		onRequestClose
+	]);
+	return /* @__PURE__ */ jsx(GalleryContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx(ResolvedGalleryUI, {})
+	});
+};
+//#endregion
+export { Gallery };
+
+//# sourceMappingURL=Gallery.mjs.map

package/dist/es/components/Gallery/Gallery.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Gallery.mjs","names":[],"sources":["../../../../src/components/Gallery/Gallery.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState } from 'react';\n\nimport { GalleryContext } from './GalleryContext';\nimport { GalleryUI as DefaultGalleryUI } from './GalleryUI';\nimport { useComponentContext } from '../../context';\n\nimport type { GalleryContextValue, GalleryItem } from './GalleryContext';\n\nexport type GalleryProps = {\n  /** Whether clicking the empty gallery background should request close (default: true) */\n  closeOnBackgroundClick?: boolean;\n  /** Array of media attachments to display */\n  items: GalleryItem[];\n  /** Custom UI component to replace the default GalleryUI */\n  GalleryUI?: React.ComponentType;\n  /** Initial index of the item to display (default: 0) */\n  initialIndex?: number;\n  /** Callback when the active item changes */\n  onIndexChange?: (index: number) => void;\n  /** Callback invoked when the gallery requests to close */\n  onRequestClose?: () => void;\n};\n\nexport const Gallery = ({\n  closeOnBackgroundClick = true,\n  GalleryUI,\n  initialIndex = 0,\n  items,\n  onIndexChange,\n  onRequestClose,\n}: GalleryProps) => {\n  const { GalleryUI: ContextGalleryUI } = useComponentContext();\n  const ResolvedGalleryUI = GalleryUI ?? ContextGalleryUI ?? DefaultGalleryUI;\n  const [currentIndex, setCurrentIndex] = useState(initialIndex);\n\n  const itemCount = items.length;\n\n  const goToIndex = useCallback(\n    (index: number) => {\n      if (index >= 0 && index < itemCount) {\n        setCurrentIndex(index);\n      }\n    },\n    [itemCount],\n  );\n\n  const goToNext = useCallback(() => {\n    setCurrentIndex((prev) => (prev < itemCount - 1 ? prev + 1 : prev));\n  }, [itemCount]);\n\n  const goToPrevious = useCallback(() => {\n    setCurrentIndex((prev) => (prev > 0 ? prev - 1 : prev));\n  }, []);\n\n  useEffect(() => {\n    onIndexChange?.(currentIndex);\n  }, [currentIndex, onIndexChange]);\n\n  const hasNext = currentIndex < itemCount - 1;\n  const hasPrevious = currentIndex > 0;\n  const currentItem = items[currentIndex];\n\n  const contextValue = useMemo<GalleryContextValue>(\n    () => ({\n      closeOnBackgroundClick,\n      currentIndex,\n      currentItem,\n      goToIndex,\n      goToNext,\n      goToPrevious,\n      hasNext,\n      hasPrevious,\n      itemCount,\n      items,\n      onRequestClose,\n    }),\n    [\n      closeOnBackgroundClick,\n      currentIndex,\n      currentItem,\n      goToIndex,\n      goToNext,\n      goToPrevious,\n      hasNext,\n      hasPrevious,\n      itemCount,\n      items,\n      onRequestClose,\n    ],\n  );\n\n  return (\n    <GalleryContext.Provider value={contextValue}>\n      <ResolvedGalleryUI />\n    </GalleryContext.Provider>\n  );\n};\n"],"mappings":";;;;;;AAuBA,IAAa,WAAW,EACtB,yBAAyB,MACzB,WAAA,aACA,eAAe,GACf,OACA,eACA,qBACkB;CAClB,MAAM,EAAE,WAAW,qBAAqB,oBAAoB;CAC5D,MAAM,oBAAoB,eAAa,oBAAoB;CAC3D,MAAM,CAAC,cAAc,mBAAmB,SAAS,YAAY;CAE7D,MAAM,YAAY,MAAM;CAExB,MAAM,YAAY,aACf,UAAkB;EACjB,IAAI,SAAS,KAAK,QAAQ,WACxB,gBAAgB,KAAK;CAEzB,GACA,CAAC,SAAS,CACZ;CAEA,MAAM,WAAW,kBAAkB;EACjC,iBAAiB,SAAU,OAAO,YAAY,IAAI,OAAO,IAAI,IAAK;CACpE,GAAG,CAAC,SAAS,CAAC;CAEd,MAAM,eAAe,kBAAkB;EACrC,iBAAiB,SAAU,OAAO,IAAI,OAAO,IAAI,IAAK;CACxD,GAAG,CAAC,CAAC;CAEL,gBAAgB;EACd,gBAAgB,YAAY;CAC9B,GAAG,CAAC,cAAc,aAAa,CAAC;CAEhC,MAAM,UAAU,eAAe,YAAY;CAC3C,MAAM,cAAc,eAAe;CACnC,MAAM,cAAc,MAAM;CAE1B,MAAM,eAAe,eACZ;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,IACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAEA,OACE,oBAAC,eAAe,UAAhB;EAAyB,OAAO;YAC9B,oBAAC,mBAAD,CAAoB,CAAA;CACG,CAAA;AAE7B"}

package/dist/es/components/Gallery/GalleryContext.mjs

@@ -0,0 +1,21 @@
+import { toBaseImageDescriptors } from "../BaseImage/toBaseImageDescriptors.mjs";
+import { createContext, useContext } from "react";
+//#region src/components/Gallery/GalleryContext.tsx
+/**
+* Maps an attachment (or link preview) to gallery item fields.
+* Delegates to {@link toBaseImageDescriptors}.
+*/
+var toGalleryItemDescriptors = (...args) => toBaseImageDescriptors(...args);
+var GalleryContext = createContext(void 0);
+var useGalleryContext = () => {
+	const contextValue = useContext(GalleryContext);
+	if (!contextValue) {
+		console.warn(`The useGalleryContext hook was called outside of the GalleryContext provider. Make sure this hook is called within a child of the Gallery component.`);
+		return {};
+	}
+	return contextValue;
+};
+//#endregion
+export { GalleryContext, toGalleryItemDescriptors, useGalleryContext };
+
+//# sourceMappingURL=GalleryContext.mjs.map

package/dist/es/components/Gallery/GalleryContext.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"GalleryContext.mjs","names":[],"sources":["../../../../src/components/Gallery/GalleryContext.tsx"],"sourcesContent":["import { createContext, useContext } from 'react';\n\nimport { toBaseImageDescriptors } from '../BaseImage';\nimport type { BaseImageProps } from '../BaseImage';\nimport type { Dimensions } from '../../types/types';\n\nexport type GalleryItem = Omit<BaseImageProps, 'src'> & {\n  dimensions?: Dimensions;\n  imageUrl?: string;\n  videoThumbnailUrl?: string;\n  videoUrl?: string;\n};\n\n/**\n * Maps an attachment (or link preview) to gallery item fields.\n * Delegates to {@link toBaseImageDescriptors}.\n */\nexport const toGalleryItemDescriptors = (\n  ...args: Parameters<typeof toBaseImageDescriptors>\n):\n  | Pick<\n      GalleryItem,\n      'alt' | 'dimensions' | 'imageUrl' | 'title' | 'videoThumbnailUrl' | 'videoUrl'\n    >\n  | undefined => toBaseImageDescriptors(...args);\n\nexport type GalleryContextValue = {\n  /** Whether clicking the empty gallery background should request close */\n  closeOnBackgroundClick: boolean;\n  /** Currently displayed item index */\n  currentIndex: number;\n  /** Currently displayed item */\n  currentItem: GalleryItem;\n  /** Navigate to a specific index */\n  goToIndex: (index: number) => void;\n  /** Navigate to the next item */\n  goToNext: () => void;\n  /** Navigate to the previous item */\n  goToPrevious: () => void;\n  /** Whether there is a next item */\n  hasNext: boolean;\n  /** Whether there is a previous item */\n  hasPrevious: boolean;\n  /** Total number of items */\n  itemCount: number;\n  /** All items in the gallery */\n  items: GalleryItem[];\n  /** Request closing the gallery viewer */\n  onRequestClose?: () => void;\n};\n\nexport const GalleryContext = createContext<GalleryContextValue | undefined>(undefined);\n\nexport const useGalleryContext = () => {\n  const contextValue = useContext(GalleryContext);\n\n  if (!contextValue) {\n    console.warn(\n      `The useGalleryContext hook was called outside of the GalleryContext provider. Make sure this hook is called within a child of the Gallery component.`,\n    );\n\n    return {} as GalleryContextValue;\n  }\n\n  return contextValue;\n};\n"],"mappings":";;;;;;;AAiBA,IAAa,4BACX,GAAG,SAMY,uBAAuB,GAAG,IAAI;AA2B/C,IAAa,iBAAiB,cAA+C,KAAA,CAAS;AAEtF,IAAa,0BAA0B;CACrC,MAAM,eAAe,WAAW,cAAc;CAE9C,IAAI,CAAC,cAAc;EACjB,QAAQ,KACN,sJACF;EAEA,OAAO,CAAC;CACV;CAEA,OAAO;AACT"}

package/dist/es/components/Gallery/GalleryHeader.mjs

@@ -0,0 +1,65 @@
+import { useComponentContext } from "../../context/ComponentContext.mjs";
+import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
+import { useMessageContext } from "../../context/MessageContext.mjs";
+import { ModalContext } from "../../context/ModalContext.mjs";
+import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import { Button } from "../Button/Button.mjs";
+import { MessageTimestamp } from "../Message/MessageTimestamp.mjs";
+import { useContext, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { sanitizeUrl } from "@braintree/sanitize-url";
+//#region src/components/Gallery/GalleryHeader.tsx
+var GalleryHeader = ({ currentItem }) => {
+	const { IconArrowDownCircle, IconXmark } = useComponentContextIcons();
+	const { t } = useTranslationContext();
+	const { MessageTimestamp: MessageTimestamp$1 = MessageTimestamp } = useComponentContext("GalleryUI");
+	const { isMyMessage, message } = useMessageContext("GalleryUI");
+	const modalContext = useContext(ModalContext);
+	const headerTitle = isMyMessage?.() && t("You") || message?.user?.name || message?.user?.id || currentItem.title || t("User uploaded content");
+	const downloadUrl = useMemo(() => {
+		const rawDownloadUrl = currentItem.videoUrl ?? currentItem.imageUrl;
+		if (!rawDownloadUrl) return void 0;
+		const sanitizedUrl = sanitizeUrl(rawDownloadUrl);
+		return sanitizedUrl === "about:blank" ? void 0 : sanitizedUrl;
+	}, [currentItem.imageUrl, currentItem.videoUrl]);
+	const downloadLabel = t("aria/Download attachment");
+	return /* @__PURE__ */ jsxs("div", {
+		className: "str-chat__gallery__header",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				"aria-hidden": "true",
+				className: "str-chat__gallery__header-spacer"
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "str-chat__gallery__header-meta",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "str-chat__gallery__title",
+					children: headerTitle
+				}), message?.created_at ? /* @__PURE__ */ jsx(MessageTimestamp$1, { customClass: "str-chat__gallery__timestamp" }) : null]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "str-chat__gallery__header-actions",
+				children: [downloadUrl ? /* @__PURE__ */ jsx("a", {
+					"aria-label": downloadLabel,
+					className: "str-chat__gallery__action-button str-chat__gallery__action-button--download",
+					download: true,
+					href: downloadUrl,
+					rel: "noreferrer",
+					target: "_blank",
+					title: downloadLabel,
+					children: /* @__PURE__ */ jsx(IconArrowDownCircle, {})
+				}) : null, modalContext?.close ? /* @__PURE__ */ jsx(Button, {
+					"aria-label": t("Close"),
+					className: "str-chat__gallery__action-button str-chat__gallery__action-button--close",
+					onClick: modalContext.close,
+					title: t("Close"),
+					children: /* @__PURE__ */ jsx(IconXmark, {})
+				}) : null]
+			})
+		]
+	});
+};
+//#endregion
+export { GalleryHeader };
+
+//# sourceMappingURL=GalleryHeader.mjs.map

package/dist/es/components/Gallery/GalleryHeader.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"GalleryHeader.mjs","names":[],"sources":["../../../../src/components/Gallery/GalleryHeader.tsx"],"sourcesContent":["import React, { useContext, useMemo } from 'react';\nimport { sanitizeUrl } from '@braintree/sanitize-url';\n\nimport { type GalleryItem } from './GalleryContext';\nimport { Button } from '../Button';\nimport { MessageTimestamp as DefaultMessageTimestamp } from '../Message/MessageTimestamp';\nimport {\n  ModalContext,\n  useComponentContext,\n  useComponentContextIcons,\n  useMessageContext,\n  useTranslationContext,\n} from '../../context';\n\ntype GalleryHeaderProps = {\n  currentItem: GalleryItem;\n};\n\nexport const GalleryHeader = ({ currentItem }: GalleryHeaderProps) => {\n  const { IconArrowDownCircle, IconXmark } = useComponentContextIcons();\n\n  const { t } = useTranslationContext();\n  const { MessageTimestamp = DefaultMessageTimestamp } = useComponentContext('GalleryUI');\n  const { isMyMessage, message } = useMessageContext('GalleryUI');\n  const modalContext = useContext(ModalContext);\n\n  const headerTitle =\n    (isMyMessage?.() && t('You')) ||\n    message?.user?.name ||\n    message?.user?.id ||\n    currentItem.title ||\n    t('User uploaded content');\n  const downloadUrl = useMemo(() => {\n    const rawDownloadUrl = currentItem.videoUrl ?? currentItem.imageUrl;\n\n    if (!rawDownloadUrl) return undefined;\n\n    const sanitizedUrl = sanitizeUrl(rawDownloadUrl);\n\n    return sanitizedUrl === 'about:blank' ? undefined : sanitizedUrl;\n  }, [currentItem.imageUrl, currentItem.videoUrl]);\n  const downloadLabel = t('aria/Download attachment');\n\n  return (\n    <div className='str-chat__gallery__header'>\n      <div aria-hidden='true' className='str-chat__gallery__header-spacer' />\n      <div className='str-chat__gallery__header-meta'>\n        <div className='str-chat__gallery__title'>{headerTitle}</div>\n        {message?.created_at ? (\n          <MessageTimestamp customClass='str-chat__gallery__timestamp' />\n        ) : null}\n      </div>\n      <div className='str-chat__gallery__header-actions'>\n        {downloadUrl ? (\n          <a\n            aria-label={downloadLabel}\n            className='str-chat__gallery__action-button str-chat__gallery__action-button--download'\n            download\n            href={downloadUrl}\n            rel='noreferrer'\n            target='_blank'\n            title={downloadLabel}\n          >\n            <IconArrowDownCircle />\n          </a>\n        ) : null}\n        {modalContext?.close ? (\n          <Button\n            aria-label={t('Close')}\n            className='str-chat__gallery__action-button str-chat__gallery__action-button--close'\n            onClick={modalContext.close}\n            title={t('Close')}\n          >\n            <IconXmark />\n          </Button>\n        ) : null}\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAkBA,IAAa,iBAAiB,EAAE,kBAAsC;CACpE,MAAM,EAAE,qBAAqB,cAAc,yBAAyB;CAEpE,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,kBAAA,qBAAmB,qBAA4B,oBAAoB,WAAW;CACtF,MAAM,EAAE,aAAa,YAAY,kBAAkB,WAAW;CAC9D,MAAM,eAAe,WAAW,YAAY;CAE5C,MAAM,cACH,cAAc,KAAK,EAAE,KAAK,KAC3B,SAAS,MAAM,QACf,SAAS,MAAM,MACf,YAAY,SACZ,EAAE,uBAAuB;CAC3B,MAAM,cAAc,cAAc;EAChC,MAAM,iBAAiB,YAAY,YAAY,YAAY;EAE3D,IAAI,CAAC,gBAAgB,OAAO,KAAA;EAE5B,MAAM,eAAe,YAAY,cAAc;EAE/C,OAAO,iBAAiB,gBAAgB,KAAA,IAAY;CACtD,GAAG,CAAC,YAAY,UAAU,YAAY,QAAQ,CAAC;CAC/C,MAAM,gBAAgB,EAAE,0BAA0B;CAElD,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACE,oBAAC,OAAD;IAAK,eAAY;IAAO,WAAU;GAAoC,CAAA;GACtE,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,OAAD;KAAK,WAAU;eAA4B;IAAiB,CAAA,GAC3D,SAAS,aACR,oBAAC,oBAAD,EAAkB,aAAY,+BAAgC,CAAA,IAC5D,IACD;;GACL,qBAAC,OAAD;IAAK,WAAU;cAAf,CACG,cACC,oBAAC,KAAD;KACE,cAAY;KACZ,WAAU;KACV,UAAA;KACA,MAAM;KACN,KAAI;KACJ,QAAO;KACP,OAAO;eAEP,oBAAC,qBAAD,CAAsB,CAAA;IACrB,CAAA,IACD,MACH,cAAc,QACb,oBAAC,QAAD;KACE,cAAY,EAAE,OAAO;KACrB,WAAU;KACV,SAAS,aAAa;KACtB,OAAO,EAAE,OAAO;eAEhB,oBAAC,WAAD,CAAY,CAAA;IACN,CAAA,IACN,IACD;;EACF;;AAET"}