@mattermost/compass-ui 0.1.0-alpha.3 → 0.1.0-alpha.30

package/dist/components/image-preview/ImagePreview.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),a=require("../icon/Icon.cjs"),c=require("../icon-button/IconButton.cjs"),d=require("../../hooks/use-popover-transition.cjs"),__f=require("@mattermost/compass-icons/components/link-variant.js"),f=__f?.default??__f,__w=require("@mattermost/compass-icons/components/download-outline.js"),w=__w?.default??__w,___=require("@mattermost/compass-icons/components/menu-down.js"),_=___?.default??___,__j=require("@mattermost/compass-icons/components/menu-right.js"),j=__j?.default??__j,i=require("./ImagePreview.module.scss.cjs");function x({src:m,alt:p="",collapsed:l=!1,onToggleCollapse:s,onCopyLink:r,onDownload:t,aspectRatio:n="16:9",className:v=""}){const o=d.usePopoverTransition(!l),u=d.usePopoverTransition(l),g=[i.default["image-preview"],l?i.default["image-preview--collapsed"]:"",n==="4:3"?i.default["image-preview--ratio-4-3"]:"",n==="1:1"?i.default["image-preview--ratio-1-1"]:"",v].filter(Boolean).join(" ");return e.jsx("div",{className:g,children:e.jsxs("div",{className:i.default["image-preview__stage"],children:[u.mounted&&e.jsx("button",{type:"button",className:[i.default["image-preview__collapsed-trigger"],u.visible?i.default["image-preview__collapsed-trigger--visible"]:""].filter(Boolean).join(" "),onClick:s,"aria-label":"Show image preview",children:e.jsxs("span",{className:i.default["image-preview__show-label"],children:[e.jsx("span",{className:i.default["image-preview__show-icon"],"aria-hidden":"true",children:e.jsx(a.default,{size:"12",glyph:e.jsx(j,{})})}),"Show Image preview"]})}),o.mounted&&e.jsxs("div",{className:[i.default["image-preview__frame"],o.visible?i.default["image-preview__frame--visible"]:""].filter(Boolean).join(" "),children:[e.jsx("div",{className:i.default["image-preview__media"],children:e.jsx("img",{src:m,alt:p,className:i.default["image-preview__img"]})}),e.jsxs("div",{className:i.default["image-preview__actions"],children:[r!=null&&e.jsx(c.default,{size:"small",padding:"compact","aria-label":"Copy link",icon:e.jsx(a.default,{size:"16",glyph:e.jsx(f,{})}),onClick:r}),t!=null&&e.jsx(c.default,{size:"small",padding:"compact","aria-label":"Download",icon:e.jsx(a.default,{size:"16",glyph:e.jsx(w,{})}),onClick:t})]}),s!=null&&e.jsx("button",{type:"button",className:i.default["image-preview__collapse-btn"],onClick:s,"aria-label":"Collapse image preview",children:e.jsx(a.default,{size:"16",glyph:e.jsx(_,{})})})]})]})})}exports.default=x;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),t=require("../icon/Icon.cjs"),v=require("../icon-button/IconButton.cjs"),w=require("../../hooks/use-popover-transition.cjs"),__I=require("@mattermost/compass-icons/components/link-variant.js"),I=__I?.default??__I,__R=require("@mattermost/compass-icons/components/download-outline.js"),R=__R?.default??__R,__T=require("@mattermost/compass-icons/components/menu-down.js"),T=__T?.default??__T,__z=require("@mattermost/compass-icons/components/menu-right.js"),z=__z?.default??__z,l=require("react"),i=require("./ImagePreview.module.scss.cjs");function P({src:_,alt:j="",collapsed:r=!1,onToggleCollapse:o,onCopyLink:d,onDownload:f,aspectRatio:m="16:9",className:h="",showLabel:x="Show Image preview",showAriaLabel:b="Show image preview",collapseLabel:y="Collapse image preview",copyLinkLabel:k="Copy link",downloadLabel:q="Download"}){const a=w.usePopoverTransition(!r),s=w.usePopoverTransition(r),u=l.useRef(null),c=l.useRef(null),n=l.useRef(!1),g=p=>{(p.key==="Enter"||p.key===" ")&&(n.current=!0)};l.useEffect(()=>{if(n.current){if(r){if(!s.mounted||!u.current)return;n.current=!1,u.current.focus();return}!a.mounted||!c.current||(n.current=!1,c.current.focus())}},[r,a.mounted,s.mounted]);const N=[i.default["image-preview"],r?i.default["image-preview--collapsed"]:"",m==="4:3"?i.default["image-preview--ratio-4-3"]:"",m==="1:1"?i.default["image-preview--ratio-1-1"]:"",h].filter(Boolean).join(" ");return e.jsx("div",{className:N,children:e.jsxs("div",{className:i.default["image-preview__stage"],children:[s.mounted&&e.jsx("button",{ref:u,type:"button",className:[i.default["image-preview__collapsed-trigger"],s.visible?i.default["image-preview__collapsed-trigger--visible"]:""].filter(Boolean).join(" "),onClick:o,onKeyDown:g,"aria-label":b,children:e.jsxs("span",{className:i.default["image-preview__show-label"],children:[e.jsx("span",{className:i.default["image-preview__show-icon"],"aria-hidden":"true",children:e.jsx(t.default,{size:"12",glyph:e.jsx(z,{})})}),x]})}),a.mounted&&e.jsxs("div",{className:[i.default["image-preview__frame"],a.visible?i.default["image-preview__frame--visible"]:""].filter(Boolean).join(" "),children:[e.jsx("div",{className:i.default["image-preview__media"],children:e.jsx("img",{src:_,alt:j,className:i.default["image-preview__img"]})}),o!=null&&e.jsx("button",{ref:c,type:"button",className:i.default["image-preview__collapse-btn"],onClick:o,onKeyDown:g,"aria-label":y,children:e.jsx(t.default,{size:"16",glyph:e.jsx(T,{})})}),e.jsxs("div",{className:i.default["image-preview__actions"],children:[d!=null&&e.jsx(v.default,{size:"small",padding:"compact","aria-label":k,icon:e.jsx(t.default,{size:"16",glyph:e.jsx(I,{})}),onClick:d}),f!=null&&e.jsx(v.default,{size:"small",padding:"compact","aria-label":q,icon:e.jsx(t.default,{size:"16",glyph:e.jsx(R,{})}),onClick:f})]})]})]})})}exports.default=P;
 //# sourceMappingURL=ImagePreview.cjs.map

package/dist/components/image-preview/ImagePreview.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ImagePreview.cjs","sources":["../../../src/components/image-preview/ImagePreview.tsx"],"sourcesContent":["import Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport { usePopoverTransition } from '@/hooks/use-popover-transition';\nimport LinkVariantIcon from '@mattermost/compass-icons/components/link-variant';\nimport DownloadOutlineIcon from '@mattermost/compass-icons/components/download-outline';\nimport MenuDownIcon from '@mattermost/compass-icons/components/menu-down';\nimport MenuRightIcon from '@mattermost/compass-icons/components/menu-right';\nimport styles from './ImagePreview.module.scss';\n\nexport type ImagePreviewAspectRatio = '16:9' | '4:3' | '1:1';\n\nexport interface ImagePreviewProps {\n  /** Image src URL. */\n  src: string;\n  /** Alt text. */\n  alt?: string;\n  /** Whether the preview is collapsed (shows toggle label only). */\n  collapsed?: boolean;\n  /** Callback when the collapse toggle is clicked. */\n  onToggleCollapse?: () => void;\n  /** Callback when the copy-link action is clicked. */\n  onCopyLink?: () => void;\n  /** Callback when the download action is clicked. */\n  onDownload?: () => void;\n  /** Aspect ratio of the image container. Default: 16:9 */\n  aspectRatio?: ImagePreviewAspectRatio;\n  /** Optional CSS class name. */\n  className?: string;\n}\n\n/**\n * Image Preview displays image attachments, markdown images, and inline image links inside\n * the message stream. It frames the image, shows hover actions for copy and download, and\n * lets the user collapse the preview when it's in the way.\n */\nexport default function ImagePreview({\n  src,\n  alt = '',\n  collapsed = false,\n  onToggleCollapse,\n  onCopyLink,\n  onDownload,\n  aspectRatio = '16:9',\n  className = '',\n}: ImagePreviewProps) {\n  const frameTransition = usePopoverTransition(!collapsed);\n  const labelTransition = usePopoverTransition(collapsed);\n\n  const rootClass = [\n    styles['image-preview'],\n    collapsed ? styles['image-preview--collapsed'] : '',\n    aspectRatio === '4:3' ? styles['image-preview--ratio-4-3'] : '',\n    aspectRatio === '1:1' ? styles['image-preview--ratio-1-1'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass}>\n      <div className={styles['image-preview__stage']}>\n        {labelTransition.mounted && (\n          <button\n            type=\"button\"\n            className={[\n              styles['image-preview__collapsed-trigger'],\n              labelTransition.visible\n                ? styles['image-preview__collapsed-trigger--visible']\n                : '',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n            onClick={onToggleCollapse}\n            aria-label=\"Show image preview\"\n          >\n            <span className={styles['image-preview__show-label']}>\n              <span\n                className={styles['image-preview__show-icon']}\n                aria-hidden=\"true\"\n              >\n                <Icon size=\"12\" glyph={<MenuRightIcon />} />\n              </span>\n              Show Image preview\n            </span>\n          </button>\n        )}\n\n        {frameTransition.mounted && (\n          <div\n            className={[\n              styles['image-preview__frame'],\n              frameTransition.visible\n                ? styles['image-preview__frame--visible']\n                : '',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n          >\n            <div className={styles['image-preview__media']}>\n              <img src={src} alt={alt} className={styles['image-preview__img']} />\n            </div>\n\n            <div className={styles['image-preview__actions']}>\n              {onCopyLink != null && (\n                <IconButton\n                  size=\"small\"\n                  padding=\"compact\"\n                  aria-label=\"Copy link\"\n                  icon={<Icon size=\"16\" glyph={<LinkVariantIcon />} />}\n                  onClick={onCopyLink}\n                />\n              )}\n              {onDownload != null && (\n                <IconButton\n                  size=\"small\"\n                  padding=\"compact\"\n                  aria-label=\"Download\"\n                  icon={<Icon size=\"16\" glyph={<DownloadOutlineIcon />} />}\n                  onClick={onDownload}\n                />\n              )}\n            </div>\n\n            {onToggleCollapse != null && (\n              <button\n                type=\"button\"\n                className={styles['image-preview__collapse-btn']}\n                onClick={onToggleCollapse}\n                aria-label=\"Collapse image preview\"\n              >\n                <Icon size=\"16\" glyph={<MenuDownIcon />} />\n              </button>\n            )}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["ImagePreview","src","alt","collapsed","onToggleCollapse","onCopyLink","onDownload","aspectRatio","className","frameTransition","usePopoverTransition","labelTransition","rootClass","styles","jsx","jsxs","Icon","MenuRightIcon","IconButton","LinkVariantIcon","DownloadOutlineIcon","MenuDownIcon"],"mappings":"kjBAmCA,SAAwBA,EAAa,CACnC,IAAAC,EACA,IAAAC,EAAM,GACN,UAAAC,EAAY,GACZ,iBAAAC,EACA,WAAAC,EACA,WAAAC,EACA,YAAAC,EAAc,OACd,UAAAC,EAAY,EACd,EAAsB,CACpB,MAAMC,EAAkBC,uBAAqB,CAACP,CAAS,EACjDQ,EAAkBD,EAAAA,qBAAqBP,CAAS,EAEhDS,EAAY,CAChBC,EAAAA,QAAO,eAAe,EACtBV,EAAYU,EAAAA,QAAO,0BAA0B,EAAI,GACjDN,IAAgB,MAAQM,UAAO,0BAA0B,EAAI,GAC7DN,IAAgB,MAAQM,UAAO,0BAA0B,EAAI,GAC7DL,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEM,EAAAA,IAAC,OAAI,UAAWF,EACd,gBAAC,MAAA,CAAI,UAAWC,EAAAA,QAAO,sBAAsB,EAC1C,SAAA,CAAAF,EAAgB,SACfG,EAAAA,IAAC,SAAA,CACC,KAAK,SACL,UAAW,CACTD,EAAAA,QAAO,kCAAkC,EACzCF,EAAgB,QACZE,UAAO,2CAA2C,EAClD,EAAA,EAEH,OAAO,OAAO,EACd,KAAK,GAAG,EACX,QAAST,EACT,aAAW,qBAEX,SAAAW,EAAAA,KAAC,OAAA,CAAK,UAAWF,UAAO,2BAA2B,EACjD,SAAA,CAAAC,EAAAA,IAAC,OAAA,CACC,UAAWD,EAAAA,QAAO,0BAA0B,EAC5C,cAAY,OAEZ,eAACG,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOF,EAAAA,IAACG,IAAc,CAAA,CAAI,CAAA,CAAA,EACrC,oBAAA,CAAA,CAET,CAAA,CAAA,EAIHR,EAAgB,SACfM,EAAAA,KAAC,MAAA,CACC,UAAW,CACTF,EAAAA,QAAO,sBAAsB,EAC7BJ,EAAgB,QACZI,UAAO,+BAA+B,EACtC,EAAA,EAEH,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,SAAA,CAAAC,EAAAA,IAAC,MAAA,CAAI,UAAWD,EAAAA,QAAO,sBAAsB,EAC3C,SAAAC,EAAAA,IAAC,MAAA,CAAI,IAAAb,EAAU,IAAAC,EAAU,UAAWW,EAAAA,QAAO,oBAAoB,EAAG,EACpE,EAEAE,EAAAA,KAAC,MAAA,CAAI,UAAWF,EAAAA,QAAO,wBAAwB,EAC5C,SAAA,CAAAR,GAAc,MACbS,EAAAA,IAACI,EAAAA,QAAA,CACC,KAAK,QACL,QAAQ,UACR,aAAW,YACX,WAAOF,UAAA,CAAK,KAAK,KAAK,MAAOF,MAACK,IAAgB,EAAI,EAClD,QAASd,CAAA,CAAA,EAGZC,GAAc,MACbQ,EAAAA,IAACI,EAAAA,QAAA,CACC,KAAK,QACL,QAAQ,UACR,aAAW,WACX,WAAOF,UAAA,CAAK,KAAK,KAAK,MAAOF,MAACM,IAAoB,EAAI,EACtD,QAASd,CAAA,CAAA,CACX,EAEJ,EAECF,GAAoB,MACnBU,EAAAA,IAAC,SAAA,CACC,KAAK,SACL,UAAWD,EAAAA,QAAO,6BAA6B,EAC/C,QAAST,EACT,aAAW,yBAEX,eAACY,EAAAA,QAAA,CAAK,KAAK,KAAK,MAAOF,EAAAA,IAACO,IAAa,CAAA,CAAI,CAAA,CAAA,CAC3C,CAAA,CAAA,CAEJ,CAAA,CAEJ,CAAA,CACF,CAEJ"}
+{"version":3,"file":"ImagePreview.cjs","sources":["../../../src/components/image-preview/ImagePreview.tsx"],"sourcesContent":["import Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport { usePopoverTransition } from '@/hooks/use-popover-transition';\nimport LinkVariantIcon from '@mattermost/compass-icons/components/link-variant';\nimport DownloadOutlineIcon from '@mattermost/compass-icons/components/download-outline';\nimport MenuDownIcon from '@mattermost/compass-icons/components/menu-down';\nimport MenuRightIcon from '@mattermost/compass-icons/components/menu-right';\nimport { useEffect, useRef, type KeyboardEvent, type ReactNode } from 'react';\nimport styles from './ImagePreview.module.scss';\n\nexport type ImagePreviewAspectRatio = '16:9' | '4:3' | '1:1';\n\nexport interface ImagePreviewProps {\n  /** Image src URL. */\n  src: string;\n  /** Alt text. */\n  alt?: string;\n  /** Whether the preview is collapsed (shows toggle label only). */\n  collapsed?: boolean;\n  /** Callback when the collapse toggle is clicked. */\n  onToggleCollapse?: () => void;\n  /** Callback when the copy-link action is clicked. */\n  onCopyLink?: () => void;\n  /** Callback when the download action is clicked. */\n  onDownload?: () => void;\n  /** Aspect ratio of the image container. Default: 16:9 */\n  aspectRatio?: ImagePreviewAspectRatio;\n  /** Optional CSS class name. */\n  className?: string;\n  /** Visible text of the collapsed toggle. Default: \"Show Image preview\". */\n  showLabel?: ReactNode;\n  /** Accessible name of the collapsed toggle. Default: \"Show image preview\". */\n  showAriaLabel?: string;\n  /** Accessible name of the collapse button. Default: \"Collapse image preview\". */\n  collapseLabel?: string;\n  /** Accessible name of the copy-link button. Default: \"Copy link\". */\n  copyLinkLabel?: string;\n  /** Accessible name of the download button. Default: \"Download\". */\n  downloadLabel?: string;\n}\n\n/**\n * Image Preview displays image attachments, markdown images, and inline image links inside\n * the message stream. It frames the image, shows hover actions for copy and download, and\n * lets the user collapse the preview when it's in the way. Keyboard activation\n * moves focus to the paired expand/collapse control; pointer activation does not.\n */\nexport default function ImagePreview({\n  src,\n  alt = '',\n  collapsed = false,\n  onToggleCollapse,\n  onCopyLink,\n  onDownload,\n  aspectRatio = '16:9',\n  className = '',\n  showLabel = 'Show Image preview',\n  showAriaLabel = 'Show image preview',\n  collapseLabel = 'Collapse image preview',\n  copyLinkLabel = 'Copy link',\n  downloadLabel = 'Download',\n}: ImagePreviewProps) {\n  const frameTransition = usePopoverTransition(!collapsed);\n  const labelTransition = usePopoverTransition(collapsed);\n  const showTriggerRef = useRef<HTMLButtonElement>(null);\n  const collapseTriggerRef = useRef<HTMLButtonElement>(null);\n  const keyboardToggleRef = useRef(false);\n\n  const markKeyboardToggle = (event: KeyboardEvent<HTMLButtonElement>) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      keyboardToggleRef.current = true;\n    }\n  };\n\n  useEffect(() => {\n    if (!keyboardToggleRef.current) return;\n\n    if (collapsed) {\n      if (!labelTransition.mounted || !showTriggerRef.current) return;\n      keyboardToggleRef.current = false;\n      showTriggerRef.current.focus();\n      return;\n    }\n\n    if (!frameTransition.mounted || !collapseTriggerRef.current) return;\n    keyboardToggleRef.current = false;\n    collapseTriggerRef.current.focus();\n  }, [collapsed, frameTransition.mounted, labelTransition.mounted]);\n\n  const rootClass = [\n    styles['image-preview'],\n    collapsed ? styles['image-preview--collapsed'] : '',\n    aspectRatio === '4:3' ? styles['image-preview--ratio-4-3'] : '',\n    aspectRatio === '1:1' ? styles['image-preview--ratio-1-1'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass}>\n      <div className={styles['image-preview__stage']}>\n        {labelTransition.mounted && (\n          <button\n            ref={showTriggerRef}\n            type=\"button\"\n            className={[\n              styles['image-preview__collapsed-trigger'],\n              labelTransition.visible\n                ? styles['image-preview__collapsed-trigger--visible']\n                : '',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n            onClick={onToggleCollapse}\n            onKeyDown={markKeyboardToggle}\n            aria-label={showAriaLabel}\n          >\n            <span className={styles['image-preview__show-label']}>\n              <span\n                className={styles['image-preview__show-icon']}\n                aria-hidden=\"true\"\n              >\n                <Icon size=\"12\" glyph={<MenuRightIcon />} />\n              </span>\n              {showLabel}\n            </span>\n          </button>\n        )}\n\n        {frameTransition.mounted && (\n          <div\n            className={[\n              styles['image-preview__frame'],\n              frameTransition.visible\n                ? styles['image-preview__frame--visible']\n                : '',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n          >\n            <div className={styles['image-preview__media']}>\n              <img\n                src={src}\n                alt={alt}\n                className={styles['image-preview__img']}\n              />\n            </div>\n\n            {onToggleCollapse != null && (\n              <button\n                ref={collapseTriggerRef}\n                type=\"button\"\n                className={styles['image-preview__collapse-btn']}\n                onClick={onToggleCollapse}\n                onKeyDown={markKeyboardToggle}\n                aria-label={collapseLabel}\n              >\n                <Icon size=\"16\" glyph={<MenuDownIcon />} />\n              </button>\n            )}\n\n            <div className={styles['image-preview__actions']}>\n              {onCopyLink != null && (\n                <IconButton\n                  size=\"small\"\n                  padding=\"compact\"\n                  aria-label={copyLinkLabel}\n                  icon={<Icon size=\"16\" glyph={<LinkVariantIcon />} />}\n                  onClick={onCopyLink}\n                />\n              )}\n              {onDownload != null && (\n                <IconButton\n                  size=\"small\"\n                  padding=\"compact\"\n                  aria-label={downloadLabel}\n                  icon={<Icon size=\"16\" glyph={<DownloadOutlineIcon />} />}\n                  onClick={onDownload}\n                />\n              )}\n            </div>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["ImagePreview","src","alt","collapsed","onToggleCollapse","onCopyLink","onDownload","aspectRatio","className","showLabel","showAriaLabel","collapseLabel","copyLinkLabel","downloadLabel","frameTransition","usePopoverTransition","labelTransition","showTriggerRef","useRef","collapseTriggerRef","keyboardToggleRef","markKeyboardToggle","event","useEffect","rootClass","styles","jsx","jsxs","Icon","MenuRightIcon","MenuDownIcon","IconButton","LinkVariantIcon","DownloadOutlineIcon"],"mappings":"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"}

package/dist/components/image-preview/ImagePreview.css

@@ -0,0 +1 @@
+._image-preview_10doy_13{display:flex;flex-direction:column;align-items:flex-start;max-width:100%;min-width:0}._image-preview__stage_10doy_20{display:grid;align-items:start;container-type:inline-size;width:428px;max-width:100%}._image-preview__stage_10doy_20>*{grid-area:1/1}._image-preview__frame_10doy_30{position:relative;box-sizing:border-box;border:1px solid rgba(var(--center-channel-color-rgb),.08);border-radius:var(--radius-s);overflow:hidden;width:100%;height:0;opacity:0;transform:scale(.98);transform-origin:top left;pointer-events:none;transition:opacity var(--duration-quick) var(--ease-exit),transform var(--duration-quick) var(--ease-exit),height var(--duration-quick) var(--ease-exit),border-color var(--duration-quick) var(--ease-exit),box-shadow var(--duration-quick) var(--ease-exit)}._image-preview__frame--visible_10doy_44{height:56.25cqw;opacity:1;transform:scale(1);pointer-events:auto;overflow:visible;transition:opacity var(--duration-quick) var(--ease-entrance),transform var(--duration-quick) var(--ease-entrance),height var(--duration-quick) var(--ease-entrance),box-shadow var(--duration-quick) var(--ease-transition),border-color var(--duration-quick) var(--ease-transition)}._image-preview__frame_10doy_30:not(._image-preview__frame--visible_10doy_44){border-color:transparent;box-shadow:none}._image-preview__frame_10doy_30:hover,._image-preview__frame_10doy_30:focus-within{box-shadow:var(--elevation-2);border-color:rgba(var(--center-channel-color-rgb),.24);cursor:pointer}._image-preview__media_10doy_61{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;border-radius:calc(var(--radius-s) - 1px)}._image-preview--ratio-4-3_10doy_67 ._image-preview__stage_10doy_20{width:320px}._image-preview--ratio-4-3_10doy_67 ._image-preview__frame--visible_10doy_44{height:75cqw}._image-preview--ratio-1-1_10doy_73 ._image-preview__stage_10doy_20{width:240px}._image-preview--ratio-1-1_10doy_73 ._image-preview__frame--visible_10doy_44{height:100cqw}._image-preview__img_10doy_79{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}._image-preview__actions_10doy_88{position:absolute;top:var(--spacing-s);right:var(--spacing-s);display:flex;gap:0;background-color:var(--center-channel-bg);border:1px solid rgba(var(--center-channel-color-rgb),.08);border-radius:var(--radius-s);box-shadow:var(--elevation-1);padding:var(--spacing-xxxxs);opacity:0;transition:opacity var(--duration-quick) var(--ease-transition)}._image-preview__frame_10doy_30:hover ._image-preview__actions_10doy_88,._image-preview__frame_10doy_30:focus-within ._image-preview__actions_10doy_88{opacity:1}._image-preview__collapse-btn_10doy_105{position:absolute;top:-4px;left:-4px;display:flex;align-items:center;justify-content:center;background-color:var(--center-channel-bg);border:1px solid rgba(var(--center-channel-color-rgb),.16);border-radius:var(--radius-pill);box-shadow:var(--elevation-1);padding:var(--spacing-xxxs);cursor:pointer;color:var(--center-channel-color);opacity:0;transition:opacity var(--duration-quick) var(--ease-transition)}._image-preview__frame_10doy_30:hover ._image-preview__collapse-btn_10doy_105,._image-preview__frame_10doy_30:focus-within ._image-preview__collapse-btn_10doy_105{opacity:1}._image-preview--collapsed_10doy_125{min-height:0}._image-preview__collapsed-trigger_10doy_128{background:transparent;border:none;cursor:pointer;padding:0;opacity:0;transform:translateY(-2px);transition:opacity var(--duration-quick) var(--ease-exit),transform var(--duration-quick) var(--ease-exit)}._image-preview__collapsed-trigger--visible_10doy_137{opacity:1;transform:translateY(0);transition:opacity var(--duration-quick) var(--ease-entrance),transform var(--duration-quick) var(--ease-entrance)}._image-preview__show-label_10doy_142{display:flex;align-items:center;gap:1px;padding-right:var(--spacing-s);border-radius:var(--radius-s);font-size:var(--font-size-75);font-weight:var(--font-weight-regular);line-height:var(--line-height-75);color:rgba(var(--center-channel-color-rgb),.75)}._image-preview__show-icon_10doy_153{display:inline-flex;align-items:center;width:var(--icon-size-12);font-size:var(--font-size-100);color:rgba(var(--center-channel-color-rgb),.75)}

package/dist/components/image-preview/ImagePreview.d.ts

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 export type ImagePreviewAspectRatio = '16:9' | '4:3' | '1:1';
 export interface ImagePreviewProps {
     /** Image src URL. */
@@ -16,11 +17,22 @@ export interface ImagePreviewProps {
     aspectRatio?: ImagePreviewAspectRatio;
     /** Optional CSS class name. */
     className?: string;
+    /** Visible text of the collapsed toggle. Default: "Show Image preview". */
+    showLabel?: ReactNode;
+    /** Accessible name of the collapsed toggle. Default: "Show image preview". */
+    showAriaLabel?: string;
+    /** Accessible name of the collapse button. Default: "Collapse image preview". */
+    collapseLabel?: string;
+    /** Accessible name of the copy-link button. Default: "Copy link". */
+    copyLinkLabel?: string;
+    /** Accessible name of the download button. Default: "Download". */
+    downloadLabel?: string;
 }
 /**
  * Image Preview displays image attachments, markdown images, and inline image links inside
  * the message stream. It frames the image, shows hover actions for copy and download, and
- * lets the user collapse the preview when it's in the way.
+ * lets the user collapse the preview when it's in the way. Keyboard activation
+ * moves focus to the paired expand/collapse control; pointer activation does not.
  */
-export default function ImagePreview({ src, alt, collapsed, onToggleCollapse, onCopyLink, onDownload, aspectRatio, className, }: ImagePreviewProps): import("react/jsx-runtime").JSX.Element;
+export default function ImagePreview({ src, alt, collapsed, onToggleCollapse, onCopyLink, onDownload, aspectRatio, className, showLabel, showAriaLabel, collapseLabel, copyLinkLabel, downloadLabel, }: ImagePreviewProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ImagePreview.d.ts.map

package/dist/components/image-preview/ImagePreview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ImagePreview.d.ts","sourceRoot":"","sources":["../../../src/components/image-preview/ImagePreview.tsx"],"names":[],"mappings":"AASA,MAAM,MAAM,uBAAuB,GAAG,MAAM,GAAG,KAAK,GAAG,KAAK,CAAC;AAE7D,MAAM,WAAW,iBAAiB;IAChC,qBAAqB;IACrB,GAAG,EAAE,MAAM,CAAC;IACZ,gBAAgB;IAChB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kEAAkE;IAClE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oDAAoD;IACpD,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,qDAAqD;IACrD,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,oDAAoD;IACpD,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,yDAAyD;IACzD,WAAW,CAAC,EAAE,uBAAuB,CAAC;IACtC,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,GAAG,EACH,GAAQ,EACR,SAAiB,EACjB,gBAAgB,EAChB,UAAU,EACV,UAAU,EACV,WAAoB,EACpB,SAAc,GACf,EAAE,iBAAiB,2CA8FnB"}
+{"version":3,"file":"ImagePreview.d.ts","sourceRoot":"","sources":["../../../src/components/image-preview/ImagePreview.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAyC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAG9E,MAAM,MAAM,uBAAuB,GAAG,MAAM,GAAG,KAAK,GAAG,KAAK,CAAC;AAE7D,MAAM,WAAW,iBAAiB;IAChC,qBAAqB;IACrB,GAAG,EAAE,MAAM,CAAC;IACZ,gBAAgB;IAChB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kEAAkE;IAClE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oDAAoD;IACpD,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,qDAAqD;IACrD,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,oDAAoD;IACpD,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,yDAAyD;IACzD,WAAW,CAAC,EAAE,uBAAuB,CAAC;IACtC,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2EAA2E;IAC3E,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,8EAA8E;IAC9E,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iFAAiF;IACjF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,qEAAqE;IACrE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,mEAAmE;IACnE,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,GAAG,EACH,GAAQ,EACR,SAAiB,EACjB,gBAAgB,EAChB,UAAU,EACV,UAAU,EACV,WAAoB,EACpB,SAAc,EACd,SAAgC,EAChC,aAAoC,EACpC,aAAwC,EACxC,aAA2B,EAC3B,aAA0B,GAC3B,EAAE,iBAAiB,2CA8HnB"}

package/dist/components/image-preview/ImagePreview.js

@@ -1,100 +1,130 @@
-import { jsx as e, jsxs as a } from "react/jsx-runtime";
-import r from "../icon/Icon.js";
-import p from "../icon-button/IconButton.js";
-import { usePopoverTransition as g } from "../../hooks/use-popover-transition.js";
-import __h from "@mattermost/compass-icons/components/link-variant.js";const h=__h&&__h.default?__h.default:__h;
-import __f from "@mattermost/compass-icons/components/download-outline.js";const f=__f&&__f.default?__f.default:__f;
-import __u from "@mattermost/compass-icons/components/menu-down.js";const u=__u&&__u.default?__u.default:__u;
-import __b from "@mattermost/compass-icons/components/menu-right.js";const b=__b&&__b.default?__b.default:__b;
+import { jsx as e, jsxs as l } from "react/jsx-runtime";
+import t from "../icon/Icon.js";
+import w from "../icon-button/IconButton.js";
+import { usePopoverTransition as _ } from "../../hooks/use-popover-transition.js";
+import __B from "@mattermost/compass-icons/components/link-variant.js";const B=__B&&__B.default?__B.default:__B;
+import __C from "@mattermost/compass-icons/components/download-outline.js";const C=__C&&__C.default?__C.default:__C;
+import __D from "@mattermost/compass-icons/components/menu-down.js";const D=__D&&__D.default?__D.default:__D;
+import __R from "@mattermost/compass-icons/components/menu-right.js";const R=__R&&__R.default?__R.default:__R;
+import { useRef as p, useEffect as x } from "react";
 import i from "./ImagePreview.module.scss.js";
-function D({
-  src: v,
-  alt: d = "",
-  collapsed: l = !1,
-  onToggleCollapse: o,
-  onCopyLink: n,
-  onDownload: m,
-  aspectRatio: s = "16:9",
-  className: w = ""
+function G({
+  src: h,
+  alt: b = "",
+  collapsed: r = !1,
+  onToggleCollapse: m,
+  onCopyLink: u,
+  onDownload: f,
+  aspectRatio: g = "16:9",
+  className: y = "",
+  showLabel: N = "Show Image preview",
+  showAriaLabel: k = "Show image preview",
+  collapseLabel: I = "Collapse image preview",
+  copyLinkLabel: z = "Copy link",
+  downloadLabel: j = "Download"
 }) {
-  const t = g(!l), c = g(l), _ = [
+  const a = _(!r), n = _(r), s = p(null), c = p(null), o = p(!1), d = (v) => {
+    (v.key === "Enter" || v.key === " ") && (o.current = !0);
+  };
+  x(() => {
+    if (o.current) {
+      if (r) {
+        if (!n.mounted || !s.current) return;
+        o.current = !1, s.current.focus();
+        return;
+      }
+      !a.mounted || !c.current || (o.current = !1, c.current.focus());
+    }
+  }, [r, a.mounted, n.mounted]);
+  const T = [
     i["image-preview"],
-    l ? i["image-preview--collapsed"] : "",
-    s === "4:3" ? i["image-preview--ratio-4-3"] : "",
-    s === "1:1" ? i["image-preview--ratio-1-1"] : "",
-    w
+    r ? i["image-preview--collapsed"] : "",
+    g === "4:3" ? i["image-preview--ratio-4-3"] : "",
+    g === "1:1" ? i["image-preview--ratio-1-1"] : "",
+    y
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ e("div", { className: _, children: /* @__PURE__ */ a("div", { className: i["image-preview__stage"], children: [
-    c.mounted && /* @__PURE__ */ e(
+  return /* @__PURE__ */ e("div", { className: T, children: /* @__PURE__ */ l("div", { className: i["image-preview__stage"], children: [
+    n.mounted && /* @__PURE__ */ e(
       "button",
       {
+        ref: s,
         type: "button",
         className: [
           i["image-preview__collapsed-trigger"],
-          c.visible ? i["image-preview__collapsed-trigger--visible"] : ""
+          n.visible ? i["image-preview__collapsed-trigger--visible"] : ""
         ].filter(Boolean).join(" "),
-        onClick: o,
-        "aria-label": "Show image preview",
-        children: /* @__PURE__ */ a("span", { className: i["image-preview__show-label"], children: [
+        onClick: m,
+        onKeyDown: d,
+        "aria-label": k,
+        children: /* @__PURE__ */ l("span", { className: i["image-preview__show-label"], children: [
           /* @__PURE__ */ e(
             "span",
             {
               className: i["image-preview__show-icon"],
               "aria-hidden": "true",
-              children: /* @__PURE__ */ e(r, { size: "12", glyph: /* @__PURE__ */ e(b, {}) })
+              children: /* @__PURE__ */ e(t, { size: "12", glyph: /* @__PURE__ */ e(R, {}) })
             }
           ),
-          "Show Image preview"
+          N
         ] })
       }
     ),
-    t.mounted && /* @__PURE__ */ a(
+    a.mounted && /* @__PURE__ */ l(
       "div",
       {
         className: [
           i["image-preview__frame"],
-          t.visible ? i["image-preview__frame--visible"] : ""
+          a.visible ? i["image-preview__frame--visible"] : ""
         ].filter(Boolean).join(" "),
         children: [
-          /* @__PURE__ */ e("div", { className: i["image-preview__media"], children: /* @__PURE__ */ e("img", { src: v, alt: d, className: i["image-preview__img"] }) }),
-          /* @__PURE__ */ a("div", { className: i["image-preview__actions"], children: [
-            n != null && /* @__PURE__ */ e(
-              p,
+          /* @__PURE__ */ e("div", { className: i["image-preview__media"], children: /* @__PURE__ */ e(
+            "img",
+            {
+              src: h,
+              alt: b,
+              className: i["image-preview__img"]
+            }
+          ) }),
+          m != null && /* @__PURE__ */ e(
+            "button",
+            {
+              ref: c,
+              type: "button",
+              className: i["image-preview__collapse-btn"],
+              onClick: m,
+              onKeyDown: d,
+              "aria-label": I,
+              children: /* @__PURE__ */ e(t, { size: "16", glyph: /* @__PURE__ */ e(D, {}) })
+            }
+          ),
+          /* @__PURE__ */ l("div", { className: i["image-preview__actions"], children: [
+            u != null && /* @__PURE__ */ e(
+              w,
               {
                 size: "small",
                 padding: "compact",
-                "aria-label": "Copy link",
-                icon: /* @__PURE__ */ e(r, { size: "16", glyph: /* @__PURE__ */ e(h, {}) }),
-                onClick: n
+                "aria-label": z,
+                icon: /* @__PURE__ */ e(t, { size: "16", glyph: /* @__PURE__ */ e(B, {}) }),
+                onClick: u
               }
             ),
-            m != null && /* @__PURE__ */ e(
-              p,
+            f != null && /* @__PURE__ */ e(
+              w,
               {
                 size: "small",
                 padding: "compact",
-                "aria-label": "Download",
-                icon: /* @__PURE__ */ e(r, { size: "16", glyph: /* @__PURE__ */ e(f, {}) }),
-                onClick: m
+                "aria-label": j,
+                icon: /* @__PURE__ */ e(t, { size: "16", glyph: /* @__PURE__ */ e(C, {}) }),
+                onClick: f
               }
             )
-          ] }),
-          o != null && /* @__PURE__ */ e(
-            "button",
-            {
-              type: "button",
-              className: i["image-preview__collapse-btn"],
-              onClick: o,
-              "aria-label": "Collapse image preview",
-              children: /* @__PURE__ */ e(r, { size: "16", glyph: /* @__PURE__ */ e(u, {}) })
-            }
-          )
+          ] })
         ]
       }
     )
   ] }) });
 }
 export {
-  D as default
+  G as default
 };
 //# sourceMappingURL=ImagePreview.js.map

package/dist/components/image-preview/ImagePreview.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImagePreview.js","sources":["../../../src/components/image-preview/ImagePreview.tsx"],"sourcesContent":["import Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport { usePopoverTransition } from '@/hooks/use-popover-transition';\nimport LinkVariantIcon from '@mattermost/compass-icons/components/link-variant';\nimport DownloadOutlineIcon from '@mattermost/compass-icons/components/download-outline';\nimport MenuDownIcon from '@mattermost/compass-icons/components/menu-down';\nimport MenuRightIcon from '@mattermost/compass-icons/components/menu-right';\nimport styles from './ImagePreview.module.scss';\n\nexport type ImagePreviewAspectRatio = '16:9' | '4:3' | '1:1';\n\nexport interface ImagePreviewProps {\n  /** Image src URL. */\n  src: string;\n  /** Alt text. */\n  alt?: string;\n  /** Whether the preview is collapsed (shows toggle label only). */\n  collapsed?: boolean;\n  /** Callback when the collapse toggle is clicked. */\n  onToggleCollapse?: () => void;\n  /** Callback when the copy-link action is clicked. */\n  onCopyLink?: () => void;\n  /** Callback when the download action is clicked. */\n  onDownload?: () => void;\n  /** Aspect ratio of the image container. Default: 16:9 */\n  aspectRatio?: ImagePreviewAspectRatio;\n  /** Optional CSS class name. */\n  className?: string;\n}\n\n/**\n * Image Preview displays image attachments, markdown images, and inline image links inside\n * the message stream. It frames the image, shows hover actions for copy and download, and\n * lets the user collapse the preview when it's in the way.\n */\nexport default function ImagePreview({\n  src,\n  alt = '',\n  collapsed = false,\n  onToggleCollapse,\n  onCopyLink,\n  onDownload,\n  aspectRatio = '16:9',\n  className = '',\n}: ImagePreviewProps) {\n  const frameTransition = usePopoverTransition(!collapsed);\n  const labelTransition = usePopoverTransition(collapsed);\n\n  const rootClass = [\n    styles['image-preview'],\n    collapsed ? styles['image-preview--collapsed'] : '',\n    aspectRatio === '4:3' ? styles['image-preview--ratio-4-3'] : '',\n    aspectRatio === '1:1' ? styles['image-preview--ratio-1-1'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass}>\n      <div className={styles['image-preview__stage']}>\n        {labelTransition.mounted && (\n          <button\n            type=\"button\"\n            className={[\n              styles['image-preview__collapsed-trigger'],\n              labelTransition.visible\n                ? styles['image-preview__collapsed-trigger--visible']\n                : '',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n            onClick={onToggleCollapse}\n            aria-label=\"Show image preview\"\n          >\n            <span className={styles['image-preview__show-label']}>\n              <span\n                className={styles['image-preview__show-icon']}\n                aria-hidden=\"true\"\n              >\n                <Icon size=\"12\" glyph={<MenuRightIcon />} />\n              </span>\n              Show Image preview\n            </span>\n          </button>\n        )}\n\n        {frameTransition.mounted && (\n          <div\n            className={[\n              styles['image-preview__frame'],\n              frameTransition.visible\n                ? styles['image-preview__frame--visible']\n                : '',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n          >\n            <div className={styles['image-preview__media']}>\n              <img src={src} alt={alt} className={styles['image-preview__img']} />\n            </div>\n\n            <div className={styles['image-preview__actions']}>\n              {onCopyLink != null && (\n                <IconButton\n                  size=\"small\"\n                  padding=\"compact\"\n                  aria-label=\"Copy link\"\n                  icon={<Icon size=\"16\" glyph={<LinkVariantIcon />} />}\n                  onClick={onCopyLink}\n                />\n              )}\n              {onDownload != null && (\n                <IconButton\n                  size=\"small\"\n                  padding=\"compact\"\n                  aria-label=\"Download\"\n                  icon={<Icon size=\"16\" glyph={<DownloadOutlineIcon />} />}\n                  onClick={onDownload}\n                />\n              )}\n            </div>\n\n            {onToggleCollapse != null && (\n              <button\n                type=\"button\"\n                className={styles['image-preview__collapse-btn']}\n                onClick={onToggleCollapse}\n                aria-label=\"Collapse image preview\"\n              >\n                <Icon size=\"16\" glyph={<MenuDownIcon />} />\n              </button>\n            )}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["ImagePreview","src","alt","collapsed","onToggleCollapse","onCopyLink","onDownload","aspectRatio","className","frameTransition","usePopoverTransition","labelTransition","rootClass","styles","jsx","jsxs","Icon","MenuRightIcon","IconButton","LinkVariantIcon","DownloadOutlineIcon","MenuDownIcon"],"mappings":"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"}
+{"version":3,"file":"ImagePreview.js","sources":["../../../src/components/image-preview/ImagePreview.tsx"],"sourcesContent":["import Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport { usePopoverTransition } from '@/hooks/use-popover-transition';\nimport LinkVariantIcon from '@mattermost/compass-icons/components/link-variant';\nimport DownloadOutlineIcon from '@mattermost/compass-icons/components/download-outline';\nimport MenuDownIcon from '@mattermost/compass-icons/components/menu-down';\nimport MenuRightIcon from '@mattermost/compass-icons/components/menu-right';\nimport { useEffect, useRef, type KeyboardEvent, type ReactNode } from 'react';\nimport styles from './ImagePreview.module.scss';\n\nexport type ImagePreviewAspectRatio = '16:9' | '4:3' | '1:1';\n\nexport interface ImagePreviewProps {\n  /** Image src URL. */\n  src: string;\n  /** Alt text. */\n  alt?: string;\n  /** Whether the preview is collapsed (shows toggle label only). */\n  collapsed?: boolean;\n  /** Callback when the collapse toggle is clicked. */\n  onToggleCollapse?: () => void;\n  /** Callback when the copy-link action is clicked. */\n  onCopyLink?: () => void;\n  /** Callback when the download action is clicked. */\n  onDownload?: () => void;\n  /** Aspect ratio of the image container. Default: 16:9 */\n  aspectRatio?: ImagePreviewAspectRatio;\n  /** Optional CSS class name. */\n  className?: string;\n  /** Visible text of the collapsed toggle. Default: \"Show Image preview\". */\n  showLabel?: ReactNode;\n  /** Accessible name of the collapsed toggle. Default: \"Show image preview\". */\n  showAriaLabel?: string;\n  /** Accessible name of the collapse button. Default: \"Collapse image preview\". */\n  collapseLabel?: string;\n  /** Accessible name of the copy-link button. Default: \"Copy link\". */\n  copyLinkLabel?: string;\n  /** Accessible name of the download button. Default: \"Download\". */\n  downloadLabel?: string;\n}\n\n/**\n * Image Preview displays image attachments, markdown images, and inline image links inside\n * the message stream. It frames the image, shows hover actions for copy and download, and\n * lets the user collapse the preview when it's in the way. Keyboard activation\n * moves focus to the paired expand/collapse control; pointer activation does not.\n */\nexport default function ImagePreview({\n  src,\n  alt = '',\n  collapsed = false,\n  onToggleCollapse,\n  onCopyLink,\n  onDownload,\n  aspectRatio = '16:9',\n  className = '',\n  showLabel = 'Show Image preview',\n  showAriaLabel = 'Show image preview',\n  collapseLabel = 'Collapse image preview',\n  copyLinkLabel = 'Copy link',\n  downloadLabel = 'Download',\n}: ImagePreviewProps) {\n  const frameTransition = usePopoverTransition(!collapsed);\n  const labelTransition = usePopoverTransition(collapsed);\n  const showTriggerRef = useRef<HTMLButtonElement>(null);\n  const collapseTriggerRef = useRef<HTMLButtonElement>(null);\n  const keyboardToggleRef = useRef(false);\n\n  const markKeyboardToggle = (event: KeyboardEvent<HTMLButtonElement>) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      keyboardToggleRef.current = true;\n    }\n  };\n\n  useEffect(() => {\n    if (!keyboardToggleRef.current) return;\n\n    if (collapsed) {\n      if (!labelTransition.mounted || !showTriggerRef.current) return;\n      keyboardToggleRef.current = false;\n      showTriggerRef.current.focus();\n      return;\n    }\n\n    if (!frameTransition.mounted || !collapseTriggerRef.current) return;\n    keyboardToggleRef.current = false;\n    collapseTriggerRef.current.focus();\n  }, [collapsed, frameTransition.mounted, labelTransition.mounted]);\n\n  const rootClass = [\n    styles['image-preview'],\n    collapsed ? styles['image-preview--collapsed'] : '',\n    aspectRatio === '4:3' ? styles['image-preview--ratio-4-3'] : '',\n    aspectRatio === '1:1' ? styles['image-preview--ratio-1-1'] : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass}>\n      <div className={styles['image-preview__stage']}>\n        {labelTransition.mounted && (\n          <button\n            ref={showTriggerRef}\n            type=\"button\"\n            className={[\n              styles['image-preview__collapsed-trigger'],\n              labelTransition.visible\n                ? styles['image-preview__collapsed-trigger--visible']\n                : '',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n            onClick={onToggleCollapse}\n            onKeyDown={markKeyboardToggle}\n            aria-label={showAriaLabel}\n          >\n            <span className={styles['image-preview__show-label']}>\n              <span\n                className={styles['image-preview__show-icon']}\n                aria-hidden=\"true\"\n              >\n                <Icon size=\"12\" glyph={<MenuRightIcon />} />\n              </span>\n              {showLabel}\n            </span>\n          </button>\n        )}\n\n        {frameTransition.mounted && (\n          <div\n            className={[\n              styles['image-preview__frame'],\n              frameTransition.visible\n                ? styles['image-preview__frame--visible']\n                : '',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n          >\n            <div className={styles['image-preview__media']}>\n              <img\n                src={src}\n                alt={alt}\n                className={styles['image-preview__img']}\n              />\n            </div>\n\n            {onToggleCollapse != null && (\n              <button\n                ref={collapseTriggerRef}\n                type=\"button\"\n                className={styles['image-preview__collapse-btn']}\n                onClick={onToggleCollapse}\n                onKeyDown={markKeyboardToggle}\n                aria-label={collapseLabel}\n              >\n                <Icon size=\"16\" glyph={<MenuDownIcon />} />\n              </button>\n            )}\n\n            <div className={styles['image-preview__actions']}>\n              {onCopyLink != null && (\n                <IconButton\n                  size=\"small\"\n                  padding=\"compact\"\n                  aria-label={copyLinkLabel}\n                  icon={<Icon size=\"16\" glyph={<LinkVariantIcon />} />}\n                  onClick={onCopyLink}\n                />\n              )}\n              {onDownload != null && (\n                <IconButton\n                  size=\"small\"\n                  padding=\"compact\"\n                  aria-label={downloadLabel}\n                  icon={<Icon size=\"16\" glyph={<DownloadOutlineIcon />} />}\n                  onClick={onDownload}\n                />\n              )}\n            </div>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["ImagePreview","src","alt","collapsed","onToggleCollapse","onCopyLink","onDownload","aspectRatio","className","showLabel","showAriaLabel","collapseLabel","copyLinkLabel","downloadLabel","frameTransition","usePopoverTransition","labelTransition","showTriggerRef","useRef","collapseTriggerRef","keyboardToggleRef","markKeyboardToggle","event","useEffect","rootClass","styles","jsx","jsxs","Icon","MenuRightIcon","MenuDownIcon","IconButton","LinkVariantIcon","DownloadOutlineIcon"],"mappings":"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"}

package/dist/components/image-preview/ImagePreview.module.scss.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./ImagePreview.module.css');const e={"image-preview":"_image-preview_y3zdk_2","image-preview__stage":"_image-preview__stage_y3zdk_9","image-preview__frame":"_image-preview__frame_y3zdk_19","image-preview__frame--visible":"_image-preview__frame--visible_y3zdk_33","image-preview__media":"_image-preview__media_y3zdk_50","image-preview--ratio-4-3":"_image-preview--ratio-4-3_y3zdk_56","image-preview--ratio-1-1":"_image-preview--ratio-1-1_y3zdk_62","image-preview__img":"_image-preview__img_y3zdk_68","image-preview__actions":"_image-preview__actions_y3zdk_77","image-preview__collapse-btn":"_image-preview__collapse-btn_y3zdk_94","image-preview--collapsed":"_image-preview--collapsed_y3zdk_114","image-preview__collapsed-trigger":"_image-preview__collapsed-trigger_y3zdk_117","image-preview__collapsed-trigger--visible":"_image-preview__collapsed-trigger--visible_y3zdk_126","image-preview__show-label":"_image-preview__show-label_y3zdk_131","image-preview__show-icon":"_image-preview__show-icon_y3zdk_142"};exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./ImagePreview.css');const e={"image-preview":"_image-preview_10doy_13","image-preview__stage":"_image-preview__stage_10doy_20","image-preview__frame":"_image-preview__frame_10doy_30","image-preview__frame--visible":"_image-preview__frame--visible_10doy_44","image-preview__media":"_image-preview__media_10doy_61","image-preview--ratio-4-3":"_image-preview--ratio-4-3_10doy_67","image-preview--ratio-1-1":"_image-preview--ratio-1-1_10doy_73","image-preview__img":"_image-preview__img_10doy_79","image-preview__actions":"_image-preview__actions_10doy_88","image-preview__collapse-btn":"_image-preview__collapse-btn_10doy_105","image-preview--collapsed":"_image-preview--collapsed_10doy_125","image-preview__collapsed-trigger":"_image-preview__collapsed-trigger_10doy_128","image-preview__collapsed-trigger--visible":"_image-preview__collapsed-trigger--visible_10doy_137","image-preview__show-label":"_image-preview__show-label_10doy_142","image-preview__show-icon":"_image-preview__show-icon_10doy_153"};exports.default=e;
 //# sourceMappingURL=ImagePreview.module.scss.cjs.map

package/dist/components/image-preview/ImagePreview.module.scss.js

@@ -1,19 +1,19 @@
-import './ImagePreview.module.css';const e = {
-  "image-preview": "_image-preview_y3zdk_2",
-  "image-preview__stage": "_image-preview__stage_y3zdk_9",
-  "image-preview__frame": "_image-preview__frame_y3zdk_19",
-  "image-preview__frame--visible": "_image-preview__frame--visible_y3zdk_33",
-  "image-preview__media": "_image-preview__media_y3zdk_50",
-  "image-preview--ratio-4-3": "_image-preview--ratio-4-3_y3zdk_56",
-  "image-preview--ratio-1-1": "_image-preview--ratio-1-1_y3zdk_62",
-  "image-preview__img": "_image-preview__img_y3zdk_68",
-  "image-preview__actions": "_image-preview__actions_y3zdk_77",
-  "image-preview__collapse-btn": "_image-preview__collapse-btn_y3zdk_94",
-  "image-preview--collapsed": "_image-preview--collapsed_y3zdk_114",
-  "image-preview__collapsed-trigger": "_image-preview__collapsed-trigger_y3zdk_117",
-  "image-preview__collapsed-trigger--visible": "_image-preview__collapsed-trigger--visible_y3zdk_126",
-  "image-preview__show-label": "_image-preview__show-label_y3zdk_131",
-  "image-preview__show-icon": "_image-preview__show-icon_y3zdk_142"
+import './ImagePreview.css';const e = {
+  "image-preview": "_image-preview_10doy_13",
+  "image-preview__stage": "_image-preview__stage_10doy_20",
+  "image-preview__frame": "_image-preview__frame_10doy_30",
+  "image-preview__frame--visible": "_image-preview__frame--visible_10doy_44",
+  "image-preview__media": "_image-preview__media_10doy_61",
+  "image-preview--ratio-4-3": "_image-preview--ratio-4-3_10doy_67",
+  "image-preview--ratio-1-1": "_image-preview--ratio-1-1_10doy_73",
+  "image-preview__img": "_image-preview__img_10doy_79",
+  "image-preview__actions": "_image-preview__actions_10doy_88",
+  "image-preview__collapse-btn": "_image-preview__collapse-btn_10doy_105",
+  "image-preview--collapsed": "_image-preview--collapsed_10doy_125",
+  "image-preview__collapsed-trigger": "_image-preview__collapsed-trigger_10doy_128",
+  "image-preview__collapsed-trigger--visible": "_image-preview__collapsed-trigger--visible_10doy_137",
+  "image-preview__show-label": "_image-preview__show-label_10doy_142",
+  "image-preview__show-icon": "_image-preview__show-icon_10doy_153"
 };
 export {
   e as default

package/dist/components/link-preview/LinkPreview.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),j=require("../icon/Icon.cjs"),h=require("../icon-button/IconButton.cjs"),x=require("../image-preview/ImagePreview.cjs"),__g=require("@mattermost/compass-icons/components/close.js"),g=__g?.default??__g,l=require("./LinkPreview.module.scss.cjs");function N({siteName:d="Mattermost.com",title:u="Mattermost: Open-source, high-trust, developer-centric collaboration platform",description:m="Mattermost is a secure, open source platform for communication, collaboration, and workflow orchestration across tools and teams.",imageSrc:a,imageAlt:n="",imageSize:r="none",imageCollapsed:s=!1,onToggleImageCollapse:p,onCopyImageLink:v,onDownloadImage:_,onDismiss:t,className:f=""}){const o=a!=null&&r==="none"?"large":r,c=o==="small"&&a!=null,i=o==="large"&&a!=null,w=[l.default["link-preview"],f].filter(Boolean).join(" "),k=[l.default["link-preview__card"],c?l.default["link-preview__card--small-image"]:"",i&&!s?l.default["link-preview__card--large-image"]:"",i&&s?l.default["link-preview__card--collapsed-image"]:""].filter(Boolean).join(" ");return e.jsxs("div",{className:w,children:[t!=null&&e.jsxs(e.Fragment,{children:[e.jsx("div",{className:l.default["link-preview__dismiss-bridge"],"aria-hidden":!0}),e.jsx(h.default,{className:l.default["link-preview__dismiss"],size:"x-small",padding:"compact","aria-label":"Remove link preview",icon:e.jsx(j.default,{size:"12",glyph:e.jsx(g,{})}),onClick:t})]}),e.jsxs("div",{className:k,children:[e.jsxs("div",{className:l.default["link-preview__text"],children:[e.jsx("p",{className:l.default["link-preview__site-name"],children:d}),e.jsx("p",{className:l.default["link-preview__title"],children:u}),e.jsx("p",{className:l.default["link-preview__description"],children:m})]}),c&&e.jsx("div",{className:l.default["link-preview__thumbnail"],children:e.jsx("img",{src:a,alt:n,className:l.default["link-preview__thumbnail-img"]})}),i&&e.jsx(x.default,{className:l.default["link-preview__image-preview"],src:a,alt:n,collapsed:s,onToggleCollapse:p,onCopyLink:v,onDownload:_})]})]})}exports.default=N;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),x=require("../icon/Icon.cjs"),g=require("../icon-button/IconButton.cjs"),N=require("../image-preview/ImagePreview.cjs"),__b=require("@mattermost/compass-icons/components/close.js"),b=__b?.default??__b,l=require("./LinkPreview.module.scss.cjs");function I({siteName:d="Mattermost.com",title:u="Mattermost: Open-source, high-trust, developer-centric collaboration platform",description:m="Mattermost is a secure, open source platform for communication, collaboration, and workflow orchestration across tools and teams.",imageSrc:a,imageAlt:n="",imageSize:r="none",imageCollapsed:s=!1,onToggleImageCollapse:p,onCopyImageLink:v,onDownloadImage:_,onDismiss:t,dismissLabel:f="Remove link preview",imagePreviewLabels:w,className:k=""}){const o=a!=null&&r==="none"?"large":r,c=o==="small"&&a!=null,i=o==="large"&&a!=null,j=[l.default["link-preview"],k].filter(Boolean).join(" "),h=[l.default["link-preview__card"],c?l.default["link-preview__card--small-image"]:"",i&&!s?l.default["link-preview__card--large-image"]:"",i&&s?l.default["link-preview__card--collapsed-image"]:""].filter(Boolean).join(" ");return e.jsxs("div",{className:j,children:[t!=null&&e.jsxs(e.Fragment,{children:[e.jsx("div",{className:l.default["link-preview__dismiss-bridge"],"aria-hidden":!0}),e.jsx(g.default,{className:l.default["link-preview__dismiss"],size:"x-small",padding:"compact","aria-label":f,icon:e.jsx(x.default,{size:"12",glyph:e.jsx(b,{})}),onClick:t})]}),e.jsxs("div",{className:h,children:[e.jsxs("div",{className:l.default["link-preview__text"],children:[e.jsx("p",{className:l.default["link-preview__site-name"],children:d}),e.jsx("p",{className:l.default["link-preview__title"],children:u}),e.jsx("p",{className:l.default["link-preview__description"],children:m})]}),c&&e.jsx("div",{className:l.default["link-preview__thumbnail"],children:e.jsx("img",{src:a,alt:n,className:l.default["link-preview__thumbnail-img"]})}),i&&e.jsx(N.default,{...w,className:l.default["link-preview__image-preview"],src:a,alt:n,collapsed:s,onToggleCollapse:p,onCopyLink:v,onDownload:_})]})]})}exports.default=I;
 //# sourceMappingURL=LinkPreview.cjs.map

package/dist/components/link-preview/LinkPreview.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"LinkPreview.cjs","sources":["../../../src/components/link-preview/LinkPreview.tsx"],"sourcesContent":["import Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport ImagePreview from '@/components/image-preview/ImagePreview';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport styles from './LinkPreview.module.scss';\n\nexport type LinkPreviewImageSize = 'none' | 'small' | 'large';\n\nexport interface LinkPreviewProps {\n  /** The site/domain label shown above the title. */\n  siteName?: string;\n  /** The main link title. */\n  title?: string;\n  /** Description text. */\n  description?: string;\n  /** Preview image URL. Pair with `imageSize` to choose layout. */\n  imageSrc?: string;\n  /** Alt text for the preview image. */\n  imageAlt?: string;\n  /** Small: square thumbnail on the right. Large: ImagePreview below text. */\n  imageSize?: LinkPreviewImageSize;\n  /** Whether the large image preview is collapsed. Only applies when `imageSize` is `large`. */\n  imageCollapsed?: boolean;\n  /** Callback when the large image collapse toggle is clicked. */\n  onToggleImageCollapse?: () => void;\n  /** Callback when copy-link is clicked on the large image preview. */\n  onCopyImageLink?: () => void;\n  /** Callback when download is clicked on the large image preview. */\n  onDownloadImage?: () => void;\n  /** Called when the dismiss control is clicked. Shown on hover when provided. */\n  onDismiss?: () => void;\n  /** Optional CSS class name. */\n  className?: string;\n}\n\n/**\n * Link Previews appear under a message whenever it contains a URL with rich metadata — a\n * documentation page, a blog post, a product link. They give the recipient enough context to\n * decide whether to click without forcing them to open the link cold.\n */\nexport default function LinkPreview({\n  siteName = 'Mattermost.com',\n  title = 'Mattermost: Open-source, high-trust, developer-centric collaboration platform',\n  description = 'Mattermost is a secure, open source platform for communication, collaboration, and workflow orchestration across tools and teams.',\n  imageSrc,\n  imageAlt = '',\n  imageSize = 'none',\n  imageCollapsed = false,\n  onToggleImageCollapse,\n  onCopyImageLink,\n  onDownloadImage,\n  onDismiss,\n  className = '',\n}: LinkPreviewProps) {\n  const resolvedImageSize =\n    imageSrc != null && imageSize === 'none' ? 'large' : imageSize;\n  const hasSmallImage = resolvedImageSize === 'small' && imageSrc != null;\n  const hasLargeImage = resolvedImageSize === 'large' && imageSrc != null;\n\n  const rootClass = [styles['link-preview'], className]\n    .filter(Boolean)\n    .join(' ');\n\n  const cardClass = [\n    styles['link-preview__card'],\n    hasSmallImage ? styles['link-preview__card--small-image'] : '',\n    hasLargeImage && !imageCollapsed\n      ? styles['link-preview__card--large-image']\n      : '',\n    hasLargeImage && imageCollapsed\n      ? styles['link-preview__card--collapsed-image']\n      : '',\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass}>\n      {onDismiss != null && (\n        <>\n          <div\n            className={styles['link-preview__dismiss-bridge']}\n            aria-hidden\n          />\n          <IconButton\n            className={styles['link-preview__dismiss']}\n            size=\"x-small\"\n            padding=\"compact\"\n            aria-label=\"Remove link preview\"\n            icon={<Icon size=\"12\" glyph={<CloseIcon />} />}\n            onClick={onDismiss}\n          />\n        </>\n      )}\n\n      <div className={cardClass}>\n        <div className={styles['link-preview__text']}>\n          <p className={styles['link-preview__site-name']}>{siteName}</p>\n          <p className={styles['link-preview__title']}>{title}</p>\n          <p className={styles['link-preview__description']}>{description}</p>\n        </div>\n\n        {hasSmallImage && (\n          <div className={styles['link-preview__thumbnail']}>\n            <img\n              src={imageSrc}\n              alt={imageAlt}\n              className={styles['link-preview__thumbnail-img']}\n            />\n          </div>\n        )}\n\n        {hasLargeImage && (\n          <ImagePreview\n            className={styles['link-preview__image-preview']}\n            src={imageSrc}\n            alt={imageAlt}\n            collapsed={imageCollapsed}\n            onToggleCollapse={onToggleImageCollapse}\n            onCopyLink={onCopyImageLink}\n            onDownload={onDownloadImage}\n          />\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["LinkPreview","siteName","title","description","imageSrc","imageAlt","imageSize","imageCollapsed","onToggleImageCollapse","onCopyImageLink","onDownloadImage","onDismiss","className","resolvedImageSize","hasSmallImage","hasLargeImage","rootClass","styles","cardClass","jsxs","Fragment","jsx","IconButton","Icon","CloseIcon","ImagePreview"],"mappings":"0WAwCA,SAAwBA,EAAY,CAClC,SAAAC,EAAW,iBACX,MAAAC,EAAQ,gFACR,YAAAC,EAAc,oIACd,SAAAC,EACA,SAAAC,EAAW,GACX,UAAAC,EAAY,OACZ,eAAAC,EAAiB,GACjB,sBAAAC,EACA,gBAAAC,EACA,gBAAAC,EACA,UAAAC,EACA,UAAAC,EAAY,EACd,EAAqB,CACnB,MAAMC,EACJT,GAAY,MAAQE,IAAc,OAAS,QAAUA,EACjDQ,EAAgBD,IAAsB,SAAWT,GAAY,KAC7DW,EAAgBF,IAAsB,SAAWT,GAAY,KAE7DY,EAAY,CAACC,UAAO,cAAc,EAAGL,CAAS,EACjD,OAAO,OAAO,EACd,KAAK,GAAG,EAELM,EAAY,CAChBD,EAAAA,QAAO,oBAAoB,EAC3BH,EAAgBG,EAAAA,QAAO,iCAAiC,EAAI,GAC5DF,GAAiB,CAACR,EACdU,UAAO,iCAAiC,EACxC,GACJF,GAAiBR,EACbU,UAAO,qCAAqC,EAC5C,EAAA,EAEH,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEE,EAAAA,KAAC,MAAA,CAAI,UAAWH,EACb,SAAA,CAAAL,GAAa,MACZQ,EAAAA,KAAAC,EAAAA,SAAA,CACE,SAAA,CAAAC,EAAAA,IAAC,MAAA,CACC,UAAWJ,EAAAA,QAAO,8BAA8B,EAChD,cAAW,EAAA,CAAA,EAEbI,EAAAA,IAACC,EAAAA,QAAA,CACC,UAAWL,EAAAA,QAAO,uBAAuB,EACzC,KAAK,UACL,QAAQ,UACR,aAAW,sBACX,WAAOM,UAAA,CAAK,KAAK,KAAK,MAAOF,MAACG,IAAU,EAAI,EAC5C,QAASb,CAAA,CAAA,CACX,EACF,EAGFQ,EAAAA,KAAC,MAAA,CAAI,UAAWD,EACd,SAAA,CAAAC,EAAAA,KAAC,MAAA,CAAI,UAAWF,EAAAA,QAAO,oBAAoB,EACzC,SAAA,CAAAI,MAAC,IAAA,CAAE,UAAWJ,EAAAA,QAAO,yBAAyB,EAAI,SAAAhB,EAAS,QAC1D,IAAA,CAAE,UAAWgB,EAAAA,QAAO,qBAAqB,EAAI,SAAAf,EAAM,QACnD,IAAA,CAAE,UAAWe,EAAAA,QAAO,2BAA2B,EAAI,SAAAd,CAAA,CAAY,CAAA,EAClE,EAECW,GACCO,EAAAA,IAAC,MAAA,CAAI,UAAWJ,EAAAA,QAAO,yBAAyB,EAC9C,SAAAI,EAAAA,IAAC,MAAA,CACC,IAAKjB,EACL,IAAKC,EACL,UAAWY,EAAAA,QAAO,6BAA6B,CAAA,CAAA,EAEnD,EAGDF,GACCM,EAAAA,IAACI,EAAAA,QAAA,CACC,UAAWR,EAAAA,QAAO,6BAA6B,EAC/C,IAAKb,EACL,IAAKC,EACL,UAAWE,EACX,iBAAkBC,EAClB,WAAYC,EACZ,WAAYC,CAAA,CAAA,CACd,CAAA,CAEJ,CAAA,EACF,CAEJ"}
+{"version":3,"file":"LinkPreview.cjs","sources":["../../../src/components/link-preview/LinkPreview.tsx"],"sourcesContent":["import Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport type { ReactNode } from 'react';\nimport ImagePreview from '@/components/image-preview/ImagePreview';\nimport type { ImagePreviewProps } from '@/components/image-preview/ImagePreview';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport styles from './LinkPreview.module.scss';\n\nexport type LinkPreviewImageSize = 'none' | 'small' | 'large';\n\nexport interface LinkPreviewProps {\n  /** The site/domain label shown above the title. */\n  siteName?: ReactNode;\n  /** The main link title. Accepts translated nodes. */\n  title?: ReactNode;\n  /** Description text. Accepts translated nodes. */\n  description?: ReactNode;\n  /** Preview image URL. Pair with `imageSize` to choose layout. */\n  imageSrc?: string;\n  /** Alt text for the preview image. */\n  imageAlt?: string;\n  /** Small: square thumbnail on the right. Large: ImagePreview below text. */\n  imageSize?: LinkPreviewImageSize;\n  /** Whether the large image preview is collapsed. Only applies when `imageSize` is `large`. */\n  imageCollapsed?: boolean;\n  /** Callback when the large image collapse toggle is clicked. */\n  onToggleImageCollapse?: () => void;\n  /** Callback when copy-link is clicked on the large image preview. */\n  onCopyImageLink?: () => void;\n  /** Callback when download is clicked on the large image preview. */\n  onDownloadImage?: () => void;\n  /** Called when the dismiss control is clicked. Shown on hover when provided. */\n  onDismiss?: () => void;\n  /** Accessible name for the dismiss button. Default: \"Remove link preview\". */\n  dismissLabel?: string;\n  /** Label overrides for the large image preview. */\n  imagePreviewLabels?: Pick<\n    ImagePreviewProps,\n    | 'showLabel'\n    | 'showAriaLabel'\n    | 'collapseLabel'\n    | 'copyLinkLabel'\n    | 'downloadLabel'\n  >;\n  /** Optional CSS class name. */\n  className?: string;\n}\n\n/**\n * Link Previews appear under a message whenever it contains a URL with rich metadata — a\n * documentation page, a blog post, a product link. They give the recipient enough context to\n * decide whether to click without forcing them to open the link cold.\n */\nexport default function LinkPreview({\n  siteName = 'Mattermost.com',\n  title = 'Mattermost: Open-source, high-trust, developer-centric collaboration platform',\n  description = 'Mattermost is a secure, open source platform for communication, collaboration, and workflow orchestration across tools and teams.',\n  imageSrc,\n  imageAlt = '',\n  imageSize = 'none',\n  imageCollapsed = false,\n  onToggleImageCollapse,\n  onCopyImageLink,\n  onDownloadImage,\n  onDismiss,\n  dismissLabel = 'Remove link preview',\n  imagePreviewLabels,\n  className = '',\n}: LinkPreviewProps) {\n  const resolvedImageSize =\n    imageSrc != null && imageSize === 'none' ? 'large' : imageSize;\n  const hasSmallImage = resolvedImageSize === 'small' && imageSrc != null;\n  const hasLargeImage = resolvedImageSize === 'large' && imageSrc != null;\n\n  const rootClass = [styles['link-preview'], className]\n    .filter(Boolean)\n    .join(' ');\n\n  const cardClass = [\n    styles['link-preview__card'],\n    hasSmallImage ? styles['link-preview__card--small-image'] : '',\n    hasLargeImage && !imageCollapsed\n      ? styles['link-preview__card--large-image']\n      : '',\n    hasLargeImage && imageCollapsed\n      ? styles['link-preview__card--collapsed-image']\n      : '',\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={rootClass}>\n      {onDismiss != null && (\n        <>\n          <div className={styles['link-preview__dismiss-bridge']} aria-hidden />\n          <IconButton\n            className={styles['link-preview__dismiss']}\n            size=\"x-small\"\n            padding=\"compact\"\n            aria-label={dismissLabel}\n            icon={<Icon size=\"12\" glyph={<CloseIcon />} />}\n            onClick={onDismiss}\n          />\n        </>\n      )}\n\n      <div className={cardClass}>\n        <div className={styles['link-preview__text']}>\n          <p className={styles['link-preview__site-name']}>{siteName}</p>\n          <p className={styles['link-preview__title']}>{title}</p>\n          <p className={styles['link-preview__description']}>{description}</p>\n        </div>\n\n        {hasSmallImage && (\n          <div className={styles['link-preview__thumbnail']}>\n            <img\n              src={imageSrc}\n              alt={imageAlt}\n              className={styles['link-preview__thumbnail-img']}\n            />\n          </div>\n        )}\n\n        {hasLargeImage && (\n          <ImagePreview\n            {...imagePreviewLabels}\n            className={styles['link-preview__image-preview']}\n            src={imageSrc}\n            alt={imageAlt}\n            collapsed={imageCollapsed}\n            onToggleCollapse={onToggleImageCollapse}\n            onCopyLink={onCopyImageLink}\n            onDownload={onDownloadImage}\n          />\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["LinkPreview","siteName","title","description","imageSrc","imageAlt","imageSize","imageCollapsed","onToggleImageCollapse","onCopyImageLink","onDownloadImage","onDismiss","dismissLabel","imagePreviewLabels","className","resolvedImageSize","hasSmallImage","hasLargeImage","rootClass","styles","cardClass","jsxs","Fragment","jsx","IconButton","Icon","CloseIcon","ImagePreview"],"mappings":"0WAqDA,SAAwBA,EAAY,CAClC,SAAAC,EAAW,iBACX,MAAAC,EAAQ,gFACR,YAAAC,EAAc,oIACd,SAAAC,EACA,SAAAC,EAAW,GACX,UAAAC,EAAY,OACZ,eAAAC,EAAiB,GACjB,sBAAAC,EACA,gBAAAC,EACA,gBAAAC,EACA,UAAAC,EACA,aAAAC,EAAe,sBACf,mBAAAC,EACA,UAAAC,EAAY,EACd,EAAqB,CACnB,MAAMC,EACJX,GAAY,MAAQE,IAAc,OAAS,QAAUA,EACjDU,EAAgBD,IAAsB,SAAWX,GAAY,KAC7Da,EAAgBF,IAAsB,SAAWX,GAAY,KAE7Dc,EAAY,CAACC,UAAO,cAAc,EAAGL,CAAS,EACjD,OAAO,OAAO,EACd,KAAK,GAAG,EAELM,EAAY,CAChBD,EAAAA,QAAO,oBAAoB,EAC3BH,EAAgBG,EAAAA,QAAO,iCAAiC,EAAI,GAC5DF,GAAiB,CAACV,EACdY,UAAO,iCAAiC,EACxC,GACJF,GAAiBV,EACbY,UAAO,qCAAqC,EAC5C,EAAA,EAEH,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OACEE,EAAAA,KAAC,MAAA,CAAI,UAAWH,EACb,SAAA,CAAAP,GAAa,MACZU,EAAAA,KAAAC,EAAAA,SAAA,CACE,SAAA,CAAAC,MAAC,OAAI,UAAWJ,EAAAA,QAAO,8BAA8B,EAAG,cAAW,GAAC,EACpEI,EAAAA,IAACC,EAAAA,QAAA,CACC,UAAWL,EAAAA,QAAO,uBAAuB,EACzC,KAAK,UACL,QAAQ,UACR,aAAYP,EACZ,WAAOa,UAAA,CAAK,KAAK,KAAK,MAAOF,MAACG,IAAU,EAAI,EAC5C,QAASf,CAAA,CAAA,CACX,EACF,EAGFU,EAAAA,KAAC,MAAA,CAAI,UAAWD,EACd,SAAA,CAAAC,EAAAA,KAAC,MAAA,CAAI,UAAWF,EAAAA,QAAO,oBAAoB,EACzC,SAAA,CAAAI,MAAC,IAAA,CAAE,UAAWJ,EAAAA,QAAO,yBAAyB,EAAI,SAAAlB,EAAS,QAC1D,IAAA,CAAE,UAAWkB,EAAAA,QAAO,qBAAqB,EAAI,SAAAjB,EAAM,QACnD,IAAA,CAAE,UAAWiB,EAAAA,QAAO,2BAA2B,EAAI,SAAAhB,CAAA,CAAY,CAAA,EAClE,EAECa,GACCO,EAAAA,IAAC,MAAA,CAAI,UAAWJ,EAAAA,QAAO,yBAAyB,EAC9C,SAAAI,EAAAA,IAAC,MAAA,CACC,IAAKnB,EACL,IAAKC,EACL,UAAWc,EAAAA,QAAO,6BAA6B,CAAA,CAAA,EAEnD,EAGDF,GACCM,EAAAA,IAACI,EAAAA,QAAA,CACE,GAAGd,EACJ,UAAWM,EAAAA,QAAO,6BAA6B,EAC/C,IAAKf,EACL,IAAKC,EACL,UAAWE,EACX,iBAAkBC,EAClB,WAAYC,EACZ,WAAYC,CAAA,CAAA,CACd,CAAA,CAEJ,CAAA,EACF,CAEJ"}

package/dist/components/link-preview/LinkPreview.css

@@ -0,0 +1 @@
+._link-preview_1t849_13{--link-preview-dismiss-size: 20px;--link-preview-dismiss-outset: calc( var(--link-preview-dismiss-size) + var(--spacing-xxxs) );display:flex;align-items:flex-start;max-width:700px;position:relative}._link-preview__dismiss-bridge_1t849_23{position:absolute;top:calc(-1 * var(--link-preview-dismiss-outset));bottom:0;left:calc(-1 * var(--link-preview-dismiss-outset));width:var(--link-preview-dismiss-outset);z-index:1;pointer-events:none}._link-preview__dismiss_1t849_23{position:absolute;top:0;left:calc(-1 * var(--spacing-xxl));z-index:2;opacity:0;pointer-events:none;transition:opacity var(--duration-quick) var(--ease-transition)}._link-preview_1t849_13:hover ._link-preview__dismiss-bridge_1t849_23,._link-preview_1t849_13:focus-within ._link-preview__dismiss-bridge_1t849_23{pointer-events:auto}._link-preview_1t849_13:hover ._link-preview__dismiss_1t849_23,._link-preview_1t849_13:focus-within ._link-preview__dismiss_1t849_23{opacity:1;pointer-events:auto}._link-preview__card_1t849_48{background-color:var(--center-channel-bg);border:1px solid rgba(var(--center-channel-color-rgb),.16);border-radius:var(--radius-s);box-shadow:var(--elevation-1);display:flex;flex:1 0 0;align-items:flex-start;min-width:0;padding:var(--spacing-l);transition:box-shadow var(--duration-quick) var(--ease-transition),border-color var(--duration-quick) var(--ease-transition)}._link-preview__card_1t849_48:hover{box-shadow:var(--elevation-2);border-color:rgba(var(--center-channel-color-rgb),.24);cursor:pointer}._link-preview__card--small-image_1t849_65{gap:var(--spacing-m)}._link-preview__card--large-image_1t849_68{flex-direction:column;gap:var(--spacing-m)}._link-preview__card--collapsed-image_1t849_72{flex-direction:column;gap:var(--spacing-l)}._link-preview__text_1t849_76{display:flex;flex-direction:column;gap:var(--spacing-xxxs);align-items:flex-start;min-width:0;overflow:hidden}._link-preview__card--small-image_1t849_65 ._link-preview__text_1t849_76{flex:1 0 0}._link-preview__card--large-image_1t849_68 ._link-preview__text_1t849_76,._link-preview__card--collapsed-image_1t849_72 ._link-preview__text_1t849_76{flex:0 0 auto;width:100%}._link-preview__site-name_1t849_91{font-size:var(--font-size-50);font-weight:var(--font-weight-regular);line-height:var(--line-height-50);letter-spacing:.11px;color:rgba(var(--center-channel-color-rgb),.64);width:100%}._link-preview__title_1t849_99{font-size:var(--font-size-100);font-weight:var(--font-weight-semibold);line-height:var(--line-height-100);color:var(--link-color);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;width:100%}._link-preview__description_1t849_110{font-size:var(--font-size-100);font-weight:var(--font-weight-regular);line-height:var(--line-height-100);color:var(--center-channel-color);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;width:100%}._link-preview__thumbnail_1t849_121{flex-shrink:0;width:80px;height:80px;border-radius:var(--radius-s);overflow:hidden}._link-preview__thumbnail-img_1t849_128{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}._link-preview__image-preview_1t849_135{max-width:100%}

package/dist/components/link-preview/LinkPreview.d.ts

@@ -1,11 +1,13 @@
+import { ReactNode } from 'react';
+import { ImagePreviewProps } from '../image-preview/ImagePreview';
 export type LinkPreviewImageSize = 'none' | 'small' | 'large';
 export interface LinkPreviewProps {
     /** The site/domain label shown above the title. */
-    siteName?: string;
-    /** The main link title. */
-    title?: string;
-    /** Description text. */
-    description?: string;
+    siteName?: ReactNode;
+    /** The main link title. Accepts translated nodes. */
+    title?: ReactNode;
+    /** Description text. Accepts translated nodes. */
+    description?: ReactNode;
     /** Preview image URL. Pair with `imageSize` to choose layout. */
     imageSrc?: string;
     /** Alt text for the preview image. */
@@ -22,6 +24,10 @@ export interface LinkPreviewProps {
     onDownloadImage?: () => void;
     /** Called when the dismiss control is clicked. Shown on hover when provided. */
     onDismiss?: () => void;
+    /** Accessible name for the dismiss button. Default: "Remove link preview". */
+    dismissLabel?: string;
+    /** Label overrides for the large image preview. */
+    imagePreviewLabels?: Pick<ImagePreviewProps, 'showLabel' | 'showAriaLabel' | 'collapseLabel' | 'copyLinkLabel' | 'downloadLabel'>;
     /** Optional CSS class name. */
     className?: string;
 }
@@ -30,5 +36,5 @@ export interface LinkPreviewProps {
  * documentation page, a blog post, a product link. They give the recipient enough context to
  * decide whether to click without forcing them to open the link cold.
  */
-export default function LinkPreview({ siteName, title, description, imageSrc, imageAlt, imageSize, imageCollapsed, onToggleImageCollapse, onCopyImageLink, onDownloadImage, onDismiss, className, }: LinkPreviewProps): import("react/jsx-runtime").JSX.Element;
+export default function LinkPreview({ siteName, title, description, imageSrc, imageAlt, imageSize, imageCollapsed, onToggleImageCollapse, onCopyImageLink, onDownloadImage, onDismiss, dismissLabel, imagePreviewLabels, className, }: LinkPreviewProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=LinkPreview.d.ts.map

package/dist/components/link-preview/LinkPreview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LinkPreview.d.ts","sourceRoot":"","sources":["../../../src/components/link-preview/LinkPreview.tsx"],"names":[],"mappings":"AAMA,MAAM,MAAM,oBAAoB,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC;AAE9D,MAAM,WAAW,gBAAgB;IAC/B,mDAAmD;IACnD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wBAAwB;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iEAAiE;IACjE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,4EAA4E;IAC5E,SAAS,CAAC,EAAE,oBAAoB,CAAC;IACjC,8FAA8F;IAC9F,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,gEAAgE;IAChE,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;IACnC,qEAAqE;IACrE,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,oEAAoE;IACpE,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,gFAAgF;IAChF,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,QAA2B,EAC3B,KAAuF,EACvF,WAAiJ,EACjJ,QAAQ,EACR,QAAa,EACb,SAAkB,EAClB,cAAsB,EACtB,qBAAqB,EACrB,eAAe,EACf,eAAe,EACf,SAAS,EACT,SAAc,GACf,EAAE,gBAAgB,2CAyElB"}
+{"version":3,"file":"LinkPreview.d.ts","sourceRoot":"","sources":["../../../src/components/link-preview/LinkPreview.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wCAAwC,CAAC;AAIhF,MAAM,MAAM,oBAAoB,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC;AAE9D,MAAM,WAAW,gBAAgB;IAC/B,mDAAmD;IACnD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,qDAAqD;IACrD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,kDAAkD;IAClD,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,iEAAiE;IACjE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,4EAA4E;IAC5E,SAAS,CAAC,EAAE,oBAAoB,CAAC;IACjC,8FAA8F;IAC9F,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,gEAAgE;IAChE,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;IACnC,qEAAqE;IACrE,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,oEAAoE;IACpE,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,gFAAgF;IAChF,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,8EAA8E;IAC9E,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mDAAmD;IACnD,kBAAkB,CAAC,EAAE,IAAI,CACvB,iBAAiB,EACf,WAAW,GACX,eAAe,GACf,eAAe,GACf,eAAe,GACf,eAAe,CAClB,CAAC;IACF,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,QAA2B,EAC3B,KAAuF,EACvF,WAAiJ,EACjJ,QAAQ,EACR,QAAa,EACb,SAAkB,EAClB,cAAsB,EACtB,qBAAqB,EACrB,eAAe,EACf,eAAe,EACf,SAAS,EACT,YAAoC,EACpC,kBAAkB,EAClB,SAAc,GACf,EAAE,gBAAgB,2CAuElB"}