@corva/ui 3.75.0-17 → 3.75.0-18

package/components/AttachmentPreview/AttachmentDownloadLink.js

@@ -1,2 +1,2 @@
-import{ButtonIcon as o}from"../../componentsV2/ButtonIcon/ButtonIcon.js";import{Tooltip as s}from"../../componentsV2/Tooltip/Tooltip.js";import{saveAttachment as c}from"../AttachmentLightbox/downloadAttachment.js";import{DownloadIcon as i}from"../../icons/iconParkIcons.js";import"../../icons/customIcons/icons/AddMessage.js";import"../../icons/customIcons/icons/DragOne.js";import"../../icons/customIcons/icons/Attention.js";import"../../icons/customIcons/icons/Collapse.js";import"../../icons/customIcons/icons/Dashboard.js";import"../../icons/customIcons/icons/Expand.js";import"../../icons/customIcons/icons/FolderClosed.js";import"../../icons/customIcons/icons/FolderClosedFilled.js";import"../../icons/customIcons/icons/FolderOpened.js";import"../../icons/customIcons/icons/GreaterOrEqual.js";import"../../icons/customIcons/icons/LessOrEqual.js";import"../../icons/customIcons/icons/Search.js";import"../../icons/customIcons/icons/SearchOne.js";import"../../icons/customIcons/icons/Wellhub.js";import"../../icons/customIcons/icons/MultiRuler.js";import"../../icons/customIcons/icons/Checkbox.js";import"../../icons/customIcons/icons/CheckboxChecked.js";import"../../icons/customIcons/icons/CheckboxIndeterminate.js";import"../../icons/customIcons/icons/Radio.js";import"../../icons/customIcons/icons/RadioChecked.js";import"../../icons/customIcons/icons/SimulFrac.js";import"../../icons/customIcons/icons/ZipperFrac.js";import"../../icons/customIcons/icons/CautionFilled.js";import"../../icons/customIcons/icons/InfoRounded.js";import"../../icons/customIcons/icons/FlameFilled.js";import"../../icons/customIcons/icons/MoreApp.js";import"../../icons/customIcons/icons/Pad.js";import"../../icons/customIcons/icons/DrilloutUnit.js";import"../../icons/customIcons/icons/FracFleet.js";import"../../icons/customIcons/icons/Global.js";import"../../icons/customIcons/icons/Program.js";import"../../icons/customIcons/icons/Rig.js";import"../../icons/customIcons/icons/Well.js";import"../../icons/customIcons/icons/Gap.js";import"../../icons/customIcons/icons/Pin.js";import"../../icons/customIcons/icons/CloseOneFilled.js";import"../../icons/customIcons/icons/AttentionFilled.js";import"../../icons/customIcons/icons/CheckOneFilled.js";import"../../icons/customIcons/icons/Archive.js";import"../../icons/customIcons/icons/ArchiveCancel.js";import"../../icons/customIcons/icons/Unarchive.js";import"../../icons/customIcons/icons/Archived.js";import"../../icons/customIcons/icons/InterventionUnit.js";import"../../icons/customIcons/icons/CloudDelete.js";import"../../icons/customIcons/icons/Lasso.js";import"../../icons/customIcons/icons/Radius.js";import"../../icons/customIcons/icons/ErrorOps.js";import"../../icons/customIcons/icons/DataTypeOps.js";import"../../icons/customIcons/icons/FalsePositiveOps.js";import"../../icons/customIcons/icons/CalibrationOps.js";import"../../icons/customIcons/icons/CriticalOps.js";import"../../icons/customIcons/icons/Company.js";import"../../icons/customIcons/icons/ArchiveOne.js";import"../../icons/customIcons/icons/ParseBotFusion.js";import"../../icons/customIcons/icons/Connect.js";import"../../icons/customIcons/icons/PuzzleOne.js";import"../../icons/customIcons/icons/Feed.js";import"../../icons/customIcons/icons/Prompt.js";import"../../icons/customIcons/icons/Companies.js";import"../../icons/customIcons/icons/ClipboardAi.js";import"../../icons/customIcons/icons/Key.js";import"../../icons/customIcons/icons/AtSignCrossed.js";import"../../icons/customIcons/icons/MappingManual.js";import"../../icons/customIcons/icons/Mapping.js";import"../../icons/customIcons/icons/Metrics.js";import"../../icons/customIcons/icons/Drops.js";import"../../icons/customIcons/icons/ClipboardSearch.js";import"../../icons/customIcons/icons/Template.js";import"../../icons/customIcons/icons/ClipboardMetrics.js";import"../../icons/customIcons/icons/ClipboardBuilder.js";import"../../icons/customIcons/icons/UnitConversion.js";import"../../icons/customIcons/icons/NPT.js";import"../../icons/customIcons/icons/GuidedFrac.js";import{jsx as n}from"react/jsx-runtime";var t=function(t){var m=t.url,r=t.fileName,e=t.size,p=void 0===e?"small":e,u=t.className,I=t.testId;return n(s,{title:"Download",children:n("a",{href:m,download:r,target:"_blank",rel:"noopener noreferrer",className:u,"data-testid":void 0===I?"attachment-download":I,onClick:function(o){o.preventDefault(),o.stopPropagation(),c(m,r)},children:n(o,{size:p,type:"tertiaryBg",ariaLabel:"Download",children:n(i,{size:"xs"===p?"small":void 0})})})})};export{t as AttachmentDownloadLink};
+import{ButtonIcon as o}from"../../componentsV2/ButtonIcon/ButtonIcon.js";import{Tooltip as s}from"../../componentsV2/Tooltip/Tooltip.js";import{saveAttachment as c}from"../AttachmentLightbox/downloadAttachment.js";import{DownloadIcon as i}from"../../icons/iconParkIcons.js";import"../../icons/customIcons/icons/AddMessage.js";import"../../icons/customIcons/icons/DragOne.js";import"../../icons/customIcons/icons/Attention.js";import"../../icons/customIcons/icons/Collapse.js";import"../../icons/customIcons/icons/Dashboard.js";import"../../icons/customIcons/icons/Expand.js";import"../../icons/customIcons/icons/FolderClosed.js";import"../../icons/customIcons/icons/FolderClosedFilled.js";import"../../icons/customIcons/icons/FolderOpened.js";import"../../icons/customIcons/icons/GreaterOrEqual.js";import"../../icons/customIcons/icons/LessOrEqual.js";import"../../icons/customIcons/icons/Search.js";import"../../icons/customIcons/icons/SearchOne.js";import"../../icons/customIcons/icons/Wellhub.js";import"../../icons/customIcons/icons/MultiRuler.js";import"../../icons/customIcons/icons/Checkbox.js";import"../../icons/customIcons/icons/CheckboxChecked.js";import"../../icons/customIcons/icons/CheckboxIndeterminate.js";import"../../icons/customIcons/icons/Radio.js";import"../../icons/customIcons/icons/RadioChecked.js";import"../../icons/customIcons/icons/SimulFrac.js";import"../../icons/customIcons/icons/ZipperFrac.js";import"../../icons/customIcons/icons/CautionFilled.js";import"../../icons/customIcons/icons/InfoRounded.js";import"../../icons/customIcons/icons/FlameFilled.js";import"../../icons/customIcons/icons/MoreApp.js";import"../../icons/customIcons/icons/Pad.js";import"../../icons/customIcons/icons/DrilloutUnit.js";import"../../icons/customIcons/icons/FracFleet.js";import"../../icons/customIcons/icons/Global.js";import"../../icons/customIcons/icons/Program.js";import"../../icons/customIcons/icons/Rig.js";import"../../icons/customIcons/icons/Well.js";import"../../icons/customIcons/icons/Gap.js";import"../../icons/customIcons/icons/Pin.js";import"../../icons/customIcons/icons/PinOne.js";import"../../icons/customIcons/icons/PinOneCrossed.js";import"../../icons/customIcons/icons/CloseOneFilled.js";import"../../icons/customIcons/icons/AttentionFilled.js";import"../../icons/customIcons/icons/CheckOneFilled.js";import"../../icons/customIcons/icons/Archive.js";import"../../icons/customIcons/icons/ArchiveCancel.js";import"../../icons/customIcons/icons/Unarchive.js";import"../../icons/customIcons/icons/Archived.js";import"../../icons/customIcons/icons/InterventionUnit.js";import"../../icons/customIcons/icons/CloudDelete.js";import"../../icons/customIcons/icons/Lasso.js";import"../../icons/customIcons/icons/Radius.js";import"../../icons/customIcons/icons/ErrorOps.js";import"../../icons/customIcons/icons/DataTypeOps.js";import"../../icons/customIcons/icons/FalsePositiveOps.js";import"../../icons/customIcons/icons/CalibrationOps.js";import"../../icons/customIcons/icons/CriticalOps.js";import"../../icons/customIcons/icons/Company.js";import"../../icons/customIcons/icons/ArchiveOne.js";import"../../icons/customIcons/icons/ParseBotFusion.js";import"../../icons/customIcons/icons/Connect.js";import"../../icons/customIcons/icons/PuzzleOne.js";import"../../icons/customIcons/icons/Feed.js";import"../../icons/customIcons/icons/Prompt.js";import"../../icons/customIcons/icons/Companies.js";import"../../icons/customIcons/icons/ClipboardAi.js";import"../../icons/customIcons/icons/Key.js";import"../../icons/customIcons/icons/AtSignCrossed.js";import"../../icons/customIcons/icons/MappingManual.js";import"../../icons/customIcons/icons/Mapping.js";import"../../icons/customIcons/icons/Metrics.js";import"../../icons/customIcons/icons/Drops.js";import"../../icons/customIcons/icons/ClipboardSearch.js";import"../../icons/customIcons/icons/Template.js";import"../../icons/customIcons/icons/ClipboardMetrics.js";import"../../icons/customIcons/icons/ClipboardBuilder.js";import"../../icons/customIcons/icons/UnitConversion.js";import"../../icons/customIcons/icons/NPT.js";import"../../icons/customIcons/icons/GuidedFrac.js";import{jsx as n}from"react/jsx-runtime";var t=function(t){var m=t.url,r=t.fileName,e=t.size,p=void 0===e?"small":e,u=t.className,I=t.testId;return n(s,{title:"Download",children:n("a",{href:m,download:r,target:"_blank",rel:"noopener noreferrer",className:u,"data-testid":void 0===I?"attachment-download":I,onClick:function(o){o.preventDefault(),o.stopPropagation(),c(m,r)},children:n(o,{size:p,type:"tertiaryBg",ariaLabel:"Download",children:n(i,{size:"xs"===p?"small":void 0})})})})};export{t as AttachmentDownloadLink};
 //# sourceMappingURL=AttachmentDownloadLink.js.map

package/components/AttachmentPreview/AttachmentDownloadLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"AttachmentDownloadLink.js","sources":["../../../src/components/AttachmentPreview/AttachmentDownloadLink.tsx"],"sourcesContent":["import { MouseEvent } from 'react';\n\nimport { ButtonIcon } from '../../componentsV2/ButtonIcon';\nimport { Tooltip } from '../../componentsV2/Tooltip';\nimport { saveAttachment } from '../AttachmentLightbox/downloadAttachment';\n\nimport { DownloadIcon } from '~/icons';\n\nexport type AttachmentDownloadLinkProps = {\n  url: string;\n  fileName: string;\n  /** `xs` sits on a tile, `small` in the preview modal's header. */\n  size?: 'xs' | 'small';\n  className?: string;\n  testId?: string;\n};\n\n/** Keeps the link semantics but fetches the bytes, since `download` is ignored cross-origin. */\nexport const AttachmentDownloadLink = ({\n  url,\n  fileName,\n  size = 'small',\n  className,\n  testId = 'attachment-download',\n}: AttachmentDownloadLinkProps) => {\n  const handleClick = (event: MouseEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n    saveAttachment(url, fileName);\n  };\n\n  return (\n    <Tooltip title=\"Download\">\n      <a\n        href={url}\n        download={fileName}\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        className={className}\n        data-testid={testId}\n        onClick={handleClick}\n      >\n        <ButtonIcon size={size} type=\"tertiaryBg\" ariaLabel=\"Download\">\n          <DownloadIcon size={size === 'xs' ? 'small' : undefined} />\n        </ButtonIcon>\n      </a>\n    </Tooltip>\n  );\n};\n"],"names":["AttachmentDownloadLink","_ref","url","fileName","_ref$size","size","className","_ref$testId","testId","_jsx","Tooltip","title","children","href","download","target","rel","onClick","event","preventDefault","stopPropagation","saveAttachment","ButtonIcon","type","ariaLabel","DownloadIcon","undefined"],"mappings":"q/HAkBaA,IAAAA,EAAyB,SAMHC,GAAA,IALjCC,IAAAA,IACAC,IAAAA,SAAQC,EAAAH,EACRI,KAAAA,aAAO,QAAOD,EACdE,IAAAA,UAASC,EAAAN,EACTO,OAQA,OACEC,EAACC,EAAO,CAACC,MAAM,WAAUC,SACvBH,EAAA,IAAA,CACEI,KAAMX,EACNY,SAAUX,EACVY,OAAO,SACPC,IAAI,sBACJV,UAAWA,EACX,yBAhBG,sBAAqBC,EAiBxBU,QAfc,SAACC,GACnBA,EAAMC,iBACND,EAAME,kBACNC,EAAenB,EAAKC,IAYKS,SAErBH,EAACa,EAAU,CAACjB,KAAMA,EAAMkB,KAAK,aAAaC,UAAU,WAAUZ,SAC5DH,EAACgB,EAAY,CAACpB,KAAe,OAATA,EAAgB,aAAUqB,SAKxD"}
+{"version":3,"file":"AttachmentDownloadLink.js","sources":["../../../src/components/AttachmentPreview/AttachmentDownloadLink.tsx"],"sourcesContent":["import { MouseEvent } from 'react';\n\nimport { ButtonIcon } from '../../componentsV2/ButtonIcon';\nimport { Tooltip } from '../../componentsV2/Tooltip';\nimport { saveAttachment } from '../AttachmentLightbox/downloadAttachment';\n\nimport { DownloadIcon } from '~/icons';\n\nexport type AttachmentDownloadLinkProps = {\n  url: string;\n  fileName: string;\n  /** `xs` sits on a tile, `small` in the preview modal's header. */\n  size?: 'xs' | 'small';\n  className?: string;\n  testId?: string;\n};\n\n/** Keeps the link semantics but fetches the bytes, since `download` is ignored cross-origin. */\nexport const AttachmentDownloadLink = ({\n  url,\n  fileName,\n  size = 'small',\n  className,\n  testId = 'attachment-download',\n}: AttachmentDownloadLinkProps) => {\n  const handleClick = (event: MouseEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n    saveAttachment(url, fileName);\n  };\n\n  return (\n    <Tooltip title=\"Download\">\n      <a\n        href={url}\n        download={fileName}\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        className={className}\n        data-testid={testId}\n        onClick={handleClick}\n      >\n        <ButtonIcon size={size} type=\"tertiaryBg\" ariaLabel=\"Download\">\n          <DownloadIcon size={size === 'xs' ? 'small' : undefined} />\n        </ButtonIcon>\n      </a>\n    </Tooltip>\n  );\n};\n"],"names":["AttachmentDownloadLink","_ref","url","fileName","_ref$size","size","className","_ref$testId","testId","_jsx","Tooltip","title","children","href","download","target","rel","onClick","event","preventDefault","stopPropagation","saveAttachment","ButtonIcon","type","ariaLabel","DownloadIcon","undefined"],"mappings":"4lIAkBaA,IAAAA,EAAyB,SAMHC,GAAA,IALjCC,IAAAA,IACAC,IAAAA,SAAQC,EAAAH,EACRI,KAAAA,aAAO,QAAOD,EACdE,IAAAA,UAASC,EAAAN,EACTO,OAQA,OACEC,EAACC,EAAO,CAACC,MAAM,WAAUC,SACvBH,EAAA,IAAA,CACEI,KAAMX,EACNY,SAAUX,EACVY,OAAO,SACPC,IAAI,sBACJV,UAAWA,EACX,yBAhBG,sBAAqBC,EAiBxBU,QAfc,SAACC,GACnBA,EAAMC,iBACND,EAAME,kBACNC,EAAenB,EAAKC,IAYKS,SAErBH,EAACa,EAAU,CAACjB,KAAMA,EAAMkB,KAAK,aAAaC,UAAU,WAAUZ,SAC5DH,EAACgB,EAAY,CAACpB,KAAe,OAATA,EAAgB,aAAUqB,SAKxD"}

package/components/AttachmentPreview/AttachmentTile.js

@@ -1,2 +1,2 @@
-import o from"@babel/runtime/helpers/defineProperty";import{useRef as s}from"react";import i from"classnames";import{FileIcon as n}from"../../componentsV2/FileIcon/FileIcon.js";import{ButtonIcon as c}from"../../componentsV2/ButtonIcon/ButtonIcon.js";import{Tooltip as t}from"../../componentsV2/Tooltip/Tooltip.js";import{LoaderCircular as e}from"../../componentsV2/LoaderCircular/LoaderCircular.js";import{PlayOneIcon as r,UndoIcon as m,CloseSmallIcon as a}from"../../icons/iconParkIcons.js";import"../../icons/customIcons/icons/AddMessage.js";import"../../icons/customIcons/icons/DragOne.js";import"../../icons/customIcons/icons/Attention.js";import"../../icons/customIcons/icons/Collapse.js";import"../../icons/customIcons/icons/Dashboard.js";import"../../icons/customIcons/icons/Expand.js";import"../../icons/customIcons/icons/FolderClosed.js";import"../../icons/customIcons/icons/FolderClosedFilled.js";import"../../icons/customIcons/icons/FolderOpened.js";import"../../icons/customIcons/icons/GreaterOrEqual.js";import"../../icons/customIcons/icons/LessOrEqual.js";import"../../icons/customIcons/icons/Search.js";import"../../icons/customIcons/icons/SearchOne.js";import"../../icons/customIcons/icons/Wellhub.js";import"../../icons/customIcons/icons/MultiRuler.js";import"../../icons/customIcons/icons/Checkbox.js";import"../../icons/customIcons/icons/CheckboxChecked.js";import"../../icons/customIcons/icons/CheckboxIndeterminate.js";import"../../icons/customIcons/icons/Radio.js";import"../../icons/customIcons/icons/RadioChecked.js";import"../../icons/customIcons/icons/SimulFrac.js";import"../../icons/customIcons/icons/ZipperFrac.js";import"../../icons/customIcons/icons/CautionFilled.js";import"../../icons/customIcons/icons/InfoRounded.js";import"../../icons/customIcons/icons/FlameFilled.js";import"../../icons/customIcons/icons/MoreApp.js";import"../../icons/customIcons/icons/Pad.js";import"../../icons/customIcons/icons/DrilloutUnit.js";import"../../icons/customIcons/icons/FracFleet.js";import"../../icons/customIcons/icons/Global.js";import"../../icons/customIcons/icons/Program.js";import"../../icons/customIcons/icons/Rig.js";import"../../icons/customIcons/icons/Well.js";import"../../icons/customIcons/icons/Gap.js";import"../../icons/customIcons/icons/Pin.js";import"../../icons/customIcons/icons/CloseOneFilled.js";import"../../icons/customIcons/icons/AttentionFilled.js";import"../../icons/customIcons/icons/CheckOneFilled.js";import"../../icons/customIcons/icons/Archive.js";import"../../icons/customIcons/icons/ArchiveCancel.js";import"../../icons/customIcons/icons/Unarchive.js";import"../../icons/customIcons/icons/Archived.js";import"../../icons/customIcons/icons/InterventionUnit.js";import"../../icons/customIcons/icons/CloudDelete.js";import"../../icons/customIcons/icons/Lasso.js";import"../../icons/customIcons/icons/Radius.js";import"../../icons/customIcons/icons/ErrorOps.js";import"../../icons/customIcons/icons/DataTypeOps.js";import"../../icons/customIcons/icons/FalsePositiveOps.js";import"../../icons/customIcons/icons/CalibrationOps.js";import"../../icons/customIcons/icons/CriticalOps.js";import"../../icons/customIcons/icons/Company.js";import"../../icons/customIcons/icons/ArchiveOne.js";import"../../icons/customIcons/icons/ParseBotFusion.js";import"../../icons/customIcons/icons/Connect.js";import"../../icons/customIcons/icons/PuzzleOne.js";import"../../icons/customIcons/icons/Feed.js";import"../../icons/customIcons/icons/Prompt.js";import"../../icons/customIcons/icons/Companies.js";import"../../icons/customIcons/icons/ClipboardAi.js";import"../../icons/customIcons/icons/Key.js";import"../../icons/customIcons/icons/AtSignCrossed.js";import"../../icons/customIcons/icons/MappingManual.js";import"../../icons/customIcons/icons/Mapping.js";import"../../icons/customIcons/icons/Metrics.js";import"../../icons/customIcons/icons/Drops.js";import"../../icons/customIcons/icons/ClipboardSearch.js";import"../../icons/customIcons/icons/Template.js";import"../../icons/customIcons/icons/ClipboardMetrics.js";import"../../icons/customIcons/icons/ClipboardBuilder.js";import"../../icons/customIcons/icons/UnitConversion.js";import"../../icons/customIcons/icons/NPT.js";import"../../icons/customIcons/icons/GuidedFrac.js";import{AttachmentActionsMenu as l}from"./AttachmentActionsMenu.js";import{AttachmentImage as p}from"./AttachmentImage.js";import{AttachmentDownloadLink as u}from"./AttachmentDownloadLink.js";import d from"./AttachmentPreview.scss.js";import j from"../../utils/main.js";import{jsxs as I,jsx as h,Fragment as f}from"react/jsx-runtime";function v(o,s){var i=Object.keys(o);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(o);s&&(n=n.filter((function(s){return Object.getOwnPropertyDescriptor(o,s).enumerable}))),i.push.apply(i,n)}return i}function b(s){for(var i=1;i<arguments.length;i++){var n=null!=arguments[i]?arguments[i]:{};i%2?v(Object(n),!0).forEach((function(i){o(s,i,n[i])})):Object.getOwnPropertyDescriptors?Object.defineProperties(s,Object.getOwnPropertyDescriptors(n)):v(Object(n)).forEach((function(o){Object.defineProperty(s,o,Object.getOwnPropertyDescriptor(n,o))}))}return s}var C=function(o){var s,i=o.split(".");return i.length>1?(null!==(s=i.pop())&&void 0!==s?s:"").toUpperCase():""},g=function(o){var s=o.item,i=o.onShare,n=o.imageRef,c=j.getFileNameWithExtensionFromPath(s.name),t=s.hideDownload?void 0:s.downloadUrl||s.src;return I("div",{className:d.tileActions,"data-testid":"attachment-tile-actions",children:[!!t&&h(u,{url:t,fileName:c,size:"xs",className:d.tileActionLink}),h(l,{item:s,onShare:i,size:"xs",testIdPrefix:"attachment-tile",tooltip:"More actions",imageRef:n})]})},y=function(o){return function(s){s.stopPropagation(),o()}},O=function(o){var s=o.item,n=o.onRemove,r=o.onRetry;return I(f,{children:[s.isUploading&&I(f,{children:[h("div",{className:d.uploadingOverlay}),h("div",{className:d.uploadingSpinner,children:h(e,{size:"xs",className:d.loader})})]}),!!s.error&&I(f,{children:[h("div",{className:d.errorOverlay}),r&&h(t,{title:"Retry upload",children:h("div",{className:d.retryButton,children:h(c,{size:"xs",type:"tertiaryBg",onClick:y((function(){return r(s.id)})),testId:"attachment-retry",children:h(m,{size:"small"})})})})]}),n&&!s.isUploading&&h(t,{title:"Remove",children:h("div",{className:i(d.removeButton,!!s.error&&d.removeButtonVisible),children:h(c,{size:"xs",type:"tertiaryBg",onClick:y((function(){return n(s.id)})),testId:"attachment-remove",children:h(a,{size:"small"})})})})]})},F=function(o){var c,e,m=o.item,a=o.onRemove,l=o.onRetry,u=o.onItemClick,v=o.isSelected,y=o.hideActions,F=o.onShare,N=s(null),P=null!==(c=m.kind)&&void 0!==c?c:"file",k=h(O,{item:m,onRemove:a,onRetry:l}),A=j.getFileNameWithExtensionFromPath(m.name),R=!m.isUploading&&!m.error,x=!!u&&R,D=!y&&!a&&R;if("image"===P||"video"===P)return I("div",{className:i(d.thumbnail,x&&d.clickable,v&&d.selected,!!m.error&&d.thumbnailError),onClick:x?function(){return null==u?void 0:u(m)}:void 0,children:[h("div",{className:d.thumbnailInner,children:"image"===P?h(p,{ref:N,src:m.src,alt:A,className:d.thumbnailImage}):h("video",{src:(e=m.src,e&&!e.includes("#t=")?"".concat(e,"#t=0.1"):e),className:d.thumbnailImage,preload:"metadata",playsInline:!0,muted:!0})}),"video"===P&&h("div",{className:d.videoOverlay,children:h(r,{theme:"filled",className:d.playIcon})}),D&&h(g,{item:m,onShare:F,imageRef:N}),k]});var S,w=I(f,{children:[I("div",{className:d.fileCardContent,children:[h(n,{name:A}),I("div",{className:d.fileInfo,children:[h(t,{title:A,children:h("div",{className:d.fileName,children:(S=A,S.replace(/\.[^/.]+$/,""))})}),h("div",{className:d.fileType,children:C(A)})]})]}),D&&h(g,{item:m,onShare:F}),k]}),E=x?{role:"button",tabIndex:0,onClick:function(){return null==u?void 0:u(m)},onKeyDown:function(o){o.target===o.currentTarget&&("Enter"!==o.key&&" "!==o.key||(o.preventDefault(),null==u||u(m)))}}:{};return h("div",b(b({className:i(d.fileCard,x&&d.fileCardLink,v&&d.selected,!!m.error&&d.thumbnailError)},E),{},{children:w}))};export{F as AttachmentTile};
+import o from"@babel/runtime/helpers/defineProperty";import{useRef as s}from"react";import i from"classnames";import{FileIcon as n}from"../../componentsV2/FileIcon/FileIcon.js";import{ButtonIcon as c}from"../../componentsV2/ButtonIcon/ButtonIcon.js";import{Tooltip as t}from"../../componentsV2/Tooltip/Tooltip.js";import{LoaderCircular as e}from"../../componentsV2/LoaderCircular/LoaderCircular.js";import{PlayOneIcon as r,UndoIcon as m,CloseSmallIcon as a}from"../../icons/iconParkIcons.js";import"../../icons/customIcons/icons/AddMessage.js";import"../../icons/customIcons/icons/DragOne.js";import"../../icons/customIcons/icons/Attention.js";import"../../icons/customIcons/icons/Collapse.js";import"../../icons/customIcons/icons/Dashboard.js";import"../../icons/customIcons/icons/Expand.js";import"../../icons/customIcons/icons/FolderClosed.js";import"../../icons/customIcons/icons/FolderClosedFilled.js";import"../../icons/customIcons/icons/FolderOpened.js";import"../../icons/customIcons/icons/GreaterOrEqual.js";import"../../icons/customIcons/icons/LessOrEqual.js";import"../../icons/customIcons/icons/Search.js";import"../../icons/customIcons/icons/SearchOne.js";import"../../icons/customIcons/icons/Wellhub.js";import"../../icons/customIcons/icons/MultiRuler.js";import"../../icons/customIcons/icons/Checkbox.js";import"../../icons/customIcons/icons/CheckboxChecked.js";import"../../icons/customIcons/icons/CheckboxIndeterminate.js";import"../../icons/customIcons/icons/Radio.js";import"../../icons/customIcons/icons/RadioChecked.js";import"../../icons/customIcons/icons/SimulFrac.js";import"../../icons/customIcons/icons/ZipperFrac.js";import"../../icons/customIcons/icons/CautionFilled.js";import"../../icons/customIcons/icons/InfoRounded.js";import"../../icons/customIcons/icons/FlameFilled.js";import"../../icons/customIcons/icons/MoreApp.js";import"../../icons/customIcons/icons/Pad.js";import"../../icons/customIcons/icons/DrilloutUnit.js";import"../../icons/customIcons/icons/FracFleet.js";import"../../icons/customIcons/icons/Global.js";import"../../icons/customIcons/icons/Program.js";import"../../icons/customIcons/icons/Rig.js";import"../../icons/customIcons/icons/Well.js";import"../../icons/customIcons/icons/Gap.js";import"../../icons/customIcons/icons/Pin.js";import"../../icons/customIcons/icons/PinOne.js";import"../../icons/customIcons/icons/PinOneCrossed.js";import"../../icons/customIcons/icons/CloseOneFilled.js";import"../../icons/customIcons/icons/AttentionFilled.js";import"../../icons/customIcons/icons/CheckOneFilled.js";import"../../icons/customIcons/icons/Archive.js";import"../../icons/customIcons/icons/ArchiveCancel.js";import"../../icons/customIcons/icons/Unarchive.js";import"../../icons/customIcons/icons/Archived.js";import"../../icons/customIcons/icons/InterventionUnit.js";import"../../icons/customIcons/icons/CloudDelete.js";import"../../icons/customIcons/icons/Lasso.js";import"../../icons/customIcons/icons/Radius.js";import"../../icons/customIcons/icons/ErrorOps.js";import"../../icons/customIcons/icons/DataTypeOps.js";import"../../icons/customIcons/icons/FalsePositiveOps.js";import"../../icons/customIcons/icons/CalibrationOps.js";import"../../icons/customIcons/icons/CriticalOps.js";import"../../icons/customIcons/icons/Company.js";import"../../icons/customIcons/icons/ArchiveOne.js";import"../../icons/customIcons/icons/ParseBotFusion.js";import"../../icons/customIcons/icons/Connect.js";import"../../icons/customIcons/icons/PuzzleOne.js";import"../../icons/customIcons/icons/Feed.js";import"../../icons/customIcons/icons/Prompt.js";import"../../icons/customIcons/icons/Companies.js";import"../../icons/customIcons/icons/ClipboardAi.js";import"../../icons/customIcons/icons/Key.js";import"../../icons/customIcons/icons/AtSignCrossed.js";import"../../icons/customIcons/icons/MappingManual.js";import"../../icons/customIcons/icons/Mapping.js";import"../../icons/customIcons/icons/Metrics.js";import"../../icons/customIcons/icons/Drops.js";import"../../icons/customIcons/icons/ClipboardSearch.js";import"../../icons/customIcons/icons/Template.js";import"../../icons/customIcons/icons/ClipboardMetrics.js";import"../../icons/customIcons/icons/ClipboardBuilder.js";import"../../icons/customIcons/icons/UnitConversion.js";import"../../icons/customIcons/icons/NPT.js";import"../../icons/customIcons/icons/GuidedFrac.js";import{AttachmentActionsMenu as l}from"./AttachmentActionsMenu.js";import{AttachmentImage as p}from"./AttachmentImage.js";import{AttachmentDownloadLink as u}from"./AttachmentDownloadLink.js";import d from"./AttachmentPreview.scss.js";import j from"../../utils/main.js";import{jsxs as I,jsx as h,Fragment as f}from"react/jsx-runtime";function v(o,s){var i=Object.keys(o);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(o);s&&(n=n.filter((function(s){return Object.getOwnPropertyDescriptor(o,s).enumerable}))),i.push.apply(i,n)}return i}function b(s){for(var i=1;i<arguments.length;i++){var n=null!=arguments[i]?arguments[i]:{};i%2?v(Object(n),!0).forEach((function(i){o(s,i,n[i])})):Object.getOwnPropertyDescriptors?Object.defineProperties(s,Object.getOwnPropertyDescriptors(n)):v(Object(n)).forEach((function(o){Object.defineProperty(s,o,Object.getOwnPropertyDescriptor(n,o))}))}return s}var C=function(o){var s,i=o.split(".");return i.length>1?(null!==(s=i.pop())&&void 0!==s?s:"").toUpperCase():""},O=function(o){var s=o.item,i=o.onShare,n=o.imageRef,c=j.getFileNameWithExtensionFromPath(s.name),t=s.hideDownload?void 0:s.downloadUrl||s.src;return I("div",{className:d.tileActions,"data-testid":"attachment-tile-actions",children:[!!t&&h(u,{url:t,fileName:c,size:"xs",className:d.tileActionLink}),h(l,{item:s,onShare:i,size:"xs",testIdPrefix:"attachment-tile",tooltip:"More actions",imageRef:n})]})},g=function(o){return function(s){s.stopPropagation(),o()}},y=function(o){var s=o.item,n=o.onRemove,r=o.onRetry;return I(f,{children:[s.isUploading&&I(f,{children:[h("div",{className:d.uploadingOverlay}),h("div",{className:d.uploadingSpinner,children:h(e,{size:"xs",className:d.loader})})]}),!!s.error&&I(f,{children:[h("div",{className:d.errorOverlay}),r&&h(t,{title:"Retry upload",children:h("div",{className:d.retryButton,children:h(c,{size:"xs",type:"tertiaryBg",onClick:g((function(){return r(s.id)})),testId:"attachment-retry",children:h(m,{size:"small"})})})})]}),n&&!s.isUploading&&h(t,{title:"Remove",children:h("div",{className:i(d.removeButton,!!s.error&&d.removeButtonVisible),children:h(c,{size:"xs",type:"tertiaryBg",onClick:g((function(){return n(s.id)})),testId:"attachment-remove",children:h(a,{size:"small"})})})})]})},P=function(o){var c,e,m=o.item,a=o.onRemove,l=o.onRetry,u=o.onItemClick,v=o.isSelected,g=o.hideActions,P=o.onShare,F=s(null),N=null!==(c=m.kind)&&void 0!==c?c:"file",k=h(y,{item:m,onRemove:a,onRetry:l}),A=j.getFileNameWithExtensionFromPath(m.name),R=!m.isUploading&&!m.error,x=!!u&&R,D=!g&&!a&&R;if("image"===N||"video"===N)return I("div",{className:i(d.thumbnail,x&&d.clickable,v&&d.selected,!!m.error&&d.thumbnailError),onClick:x?function(){return null==u?void 0:u(m)}:void 0,children:[h("div",{className:d.thumbnailInner,children:"image"===N?h(p,{ref:F,src:m.src,alt:A,className:d.thumbnailImage}):h("video",{src:(e=m.src,e&&!e.includes("#t=")?"".concat(e,"#t=0.1"):e),className:d.thumbnailImage,preload:"metadata",playsInline:!0,muted:!0})}),"video"===N&&h("div",{className:d.videoOverlay,children:h(r,{theme:"filled",className:d.playIcon})}),D&&h(O,{item:m,onShare:P,imageRef:F}),k]});var S,w=I(f,{children:[I("div",{className:d.fileCardContent,children:[h(n,{name:A}),I("div",{className:d.fileInfo,children:[h(t,{title:A,children:h("div",{className:d.fileName,children:(S=A,S.replace(/\.[^/.]+$/,""))})}),h("div",{className:d.fileType,children:C(A)})]})]}),D&&h(O,{item:m,onShare:P}),k]}),E=x?{role:"button",tabIndex:0,onClick:function(){return null==u?void 0:u(m)},onKeyDown:function(o){o.target===o.currentTarget&&("Enter"!==o.key&&" "!==o.key||(o.preventDefault(),null==u||u(m)))}}:{};return h("div",b(b({className:i(d.fileCard,x&&d.fileCardLink,v&&d.selected,!!m.error&&d.thumbnailError)},E),{},{children:w}))};export{P as AttachmentTile};
 //# sourceMappingURL=AttachmentTile.js.map

package/components/AttachmentPreview/AttachmentTile.js.map

@@ -1 +1 @@
-{"version":3,"file":"AttachmentTile.js","sources":["../../../src/components/AttachmentPreview/AttachmentTile.tsx"],"sourcesContent":["import { KeyboardEvent, MouseEvent, RefObject, useRef } from 'react';\nimport classNames from 'classnames';\n\nimport { FileIcon } from '../../componentsV2/FileIcon';\nimport { ButtonIcon } from '../../componentsV2/ButtonIcon';\nimport { Tooltip } from '../../componentsV2/Tooltip';\nimport { LoaderCircular } from '../../componentsV2/LoaderCircular';\nimport { PlayOneIcon, CloseSmallIcon, UndoIcon } from '../../icons';\n\nimport { AttachmentActionsMenu } from './AttachmentActionsMenu';\nimport { AttachmentImage } from './AttachmentImage';\nimport { AttachmentDownloadLink } from './AttachmentDownloadLink';\nimport { AttachmentPreviewItem, AttachmentPreviewProps } from './AttachmentPreview.types';\n\nimport styles from './AttachmentPreview.scss';\n\nimport utils from '~/utils/main';\n\nconst getExtension = (name: string) => {\n  const parts = name.split('.');\n  return parts.length > 1 ? (parts.pop() ?? '').toUpperCase() : '';\n};\n\nconst dropExtension = (name: string) => name.replace(/\\.[^/.]+$/, '');\n\n// A bare <video> paints nothing until a frame is decoded; the media fragment forces one.\nconst withFirstFrame = (src?: string) => (src && !src.includes('#t=') ? `${src}#t=0.1` : src);\n\nexport type AttachmentTileProps = {\n  item: AttachmentPreviewItem;\n  onRemove?: AttachmentPreviewProps['onRemove'];\n  onRetry?: AttachmentPreviewProps['onRetry'];\n  onItemClick?: AttachmentPreviewProps['onItemClick'];\n  isSelected?: boolean;\n  hideActions?: boolean;\n  /** Adds \"Share file\" to the tile's hover menu. */\n  onShare?: (item: AttachmentPreviewItem) => void;\n};\n\nconst TileActions = ({\n  item,\n  onShare,\n  imageRef,\n}: Pick<AttachmentTileProps, 'item' | 'onShare'> & {\n  imageRef?: RefObject<HTMLImageElement>;\n}) => {\n  const fileName = utils.getFileNameWithExtensionFromPath(item.name);\n  const downloadUrl = item.hideDownload ? undefined : item.downloadUrl || item.src;\n\n  return (\n    <div className={styles.tileActions} data-testid=\"attachment-tile-actions\">\n      {!!downloadUrl && (\n        <AttachmentDownloadLink\n          url={downloadUrl}\n          fileName={fileName}\n          size=\"xs\"\n          className={styles.tileActionLink}\n        />\n      )}\n\n      <AttachmentActionsMenu\n        item={item}\n        onShare={onShare}\n        size=\"xs\"\n        testIdPrefix=\"attachment-tile\"\n        tooltip=\"More actions\"\n        imageRef={imageRef}\n      />\n    </div>\n  );\n};\n\nconst stopAndRun = (action: () => void) => (event: MouseEvent) => {\n  event.stopPropagation();\n  action();\n};\n\nconst TileOverlays = ({ item, onRemove, onRetry }: Omit<AttachmentTileProps, 'onItemClick'>) => (\n  <>\n    {item.isUploading && (\n      <>\n        <div className={styles.uploadingOverlay} />\n        <div className={styles.uploadingSpinner}>\n          <LoaderCircular size=\"xs\" className={styles.loader} />\n        </div>\n      </>\n    )}\n\n    {!!item.error && (\n      <>\n        <div className={styles.errorOverlay} />\n        {onRetry && (\n          <Tooltip title=\"Retry upload\">\n            <div className={styles.retryButton}>\n              <ButtonIcon\n                size=\"xs\"\n                type=\"tertiaryBg\"\n                onClick={stopAndRun(() => onRetry(item.id))}\n                testId=\"attachment-retry\"\n              >\n                <UndoIcon size=\"small\" />\n              </ButtonIcon>\n            </div>\n          </Tooltip>\n        )}\n      </>\n    )}\n\n    {onRemove && !item.isUploading && (\n      <Tooltip title=\"Remove\">\n        <div\n          className={classNames(styles.removeButton, !!item.error && styles.removeButtonVisible)}\n        >\n          <ButtonIcon\n            size=\"xs\"\n            type=\"tertiaryBg\"\n            onClick={stopAndRun(() => onRemove(item.id))}\n            testId=\"attachment-remove\"\n          >\n            <CloseSmallIcon size=\"small\" />\n          </ButtonIcon>\n        </div>\n      </Tooltip>\n    )}\n  </>\n);\n\nexport const AttachmentTile = ({\n  item,\n  onRemove,\n  onRetry,\n  onItemClick,\n  isSelected,\n  hideActions,\n  onShare,\n}: AttachmentTileProps) => {\n  const imageRef = useRef<HTMLImageElement>(null);\n  const kind = item.kind ?? 'file';\n  const overlays = <TileOverlays item={item} onRemove={onRemove} onRetry={onRetry} />;\n  const fileName = utils.getFileNameWithExtensionFromPath(item.name);\n  const isReady = !item.isUploading && !item.error;\n  const clickable = !!onItemClick && isReady;\n  // A tile being composed shows Remove in the same corner, and has nothing to link to.\n  const showActions = !hideActions && !onRemove && isReady;\n\n  if (kind === 'image' || kind === 'video') {\n    return (\n      // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events\n      <div\n        className={classNames(\n          styles.thumbnail,\n          clickable && styles.clickable,\n          isSelected && styles.selected,\n          !!item.error && styles.thumbnailError\n        )}\n        onClick={clickable ? () => onItemClick?.(item) : undefined}\n      >\n        <div className={styles.thumbnailInner}>\n          {kind === 'image' ? (\n            <AttachmentImage\n              ref={imageRef}\n              src={item.src}\n              alt={fileName}\n              className={styles.thumbnailImage}\n            />\n          ) : (\n            <video\n              src={withFirstFrame(item.src)}\n              className={styles.thumbnailImage}\n              preload=\"metadata\"\n              playsInline\n              muted\n            />\n          )}\n        </div>\n        {kind === 'video' && (\n          <div className={styles.videoOverlay}>\n            <PlayOneIcon theme=\"filled\" className={styles.playIcon} />\n          </div>\n        )}\n        {showActions && <TileActions item={item} onShare={onShare} imageRef={imageRef} />}\n        {overlays}\n      </div>\n    );\n  }\n\n  const fileCardContent = (\n    <>\n      <div className={styles.fileCardContent}>\n        <FileIcon name={fileName} />\n        <div className={styles.fileInfo}>\n          <Tooltip title={fileName}>\n            <div className={styles.fileName}>{dropExtension(fileName)}</div>\n          </Tooltip>\n          <div className={styles.fileType}>{getExtension(fileName)}</div>\n        </div>\n      </div>\n      {showActions && <TileActions item={item} onShare={onShare} />}\n      {overlays}\n    </>\n  );\n\n  const cardInteraction = clickable\n    ? {\n        role: 'button',\n        tabIndex: 0,\n        onClick: () => onItemClick?.(item),\n        onKeyDown: (event: KeyboardEvent) => {\n          // Keys bubbling from the nested download link must reach it, not open the preview.\n          if (event.target !== event.currentTarget) return;\n          if (event.key !== 'Enter' && event.key !== ' ') return;\n\n          // Space would otherwise scroll the surrounding feed.\n          event.preventDefault();\n          onItemClick?.(item);\n        },\n      }\n    : {};\n\n  return (\n    <div\n      className={classNames(\n        styles.fileCard,\n        clickable && styles.fileCardLink,\n        isSelected && styles.selected,\n        !!item.error && styles.thumbnailError\n      )}\n      {...cardInteraction}\n    >\n      {fileCardContent}\n    </div>\n  );\n};\n"],"names":["getExtension","name","_parts$pop","parts","split","length","pop","toUpperCase","TileActions","_ref","item","onShare","imageRef","fileName","utils","getFileNameWithExtensionFromPath","downloadUrl","hideDownload","undefined","src","_jsxs","className","styles","tileActions","children","_jsx","AttachmentDownloadLink","url","size","tileActionLink","AttachmentActionsMenu","testIdPrefix","tooltip","stopAndRun","action","event","stopPropagation","TileOverlays","_ref2","onRemove","onRetry","_Fragment","isUploading","uploadingOverlay","uploadingSpinner","LoaderCircular","loader","error","errorOverlay","Tooltip","title","retryButton","ButtonIcon","type","onClick","id","testId","UndoIcon","classNames","removeButton","removeButtonVisible","CloseSmallIcon","AttachmentTile","_ref3","_item$kind","onItemClick","isSelected","hideActions","useRef","kind","overlays","isReady","clickable","showActions","thumbnail","selected","thumbnailError","thumbnailInner","AttachmentImage","ref","alt","thumbnailImage","includes","concat","preload","playsInline","muted","videoOverlay","PlayOneIcon","theme","playIcon","fileCardContent","FileIcon","fileInfo","replace","fileType","cardInteraction","role","tabIndex","onKeyDown","target","currentTarget","key","preventDefault","_objectSpread","fileCard","fileCardLink"],"mappings":"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"}
+{"version":3,"file":"AttachmentTile.js","sources":["../../../src/components/AttachmentPreview/AttachmentTile.tsx"],"sourcesContent":["import { KeyboardEvent, MouseEvent, RefObject, useRef } from 'react';\nimport classNames from 'classnames';\n\nimport { FileIcon } from '../../componentsV2/FileIcon';\nimport { ButtonIcon } from '../../componentsV2/ButtonIcon';\nimport { Tooltip } from '../../componentsV2/Tooltip';\nimport { LoaderCircular } from '../../componentsV2/LoaderCircular';\nimport { PlayOneIcon, CloseSmallIcon, UndoIcon } from '../../icons';\n\nimport { AttachmentActionsMenu } from './AttachmentActionsMenu';\nimport { AttachmentImage } from './AttachmentImage';\nimport { AttachmentDownloadLink } from './AttachmentDownloadLink';\nimport { AttachmentPreviewItem, AttachmentPreviewProps } from './AttachmentPreview.types';\n\nimport styles from './AttachmentPreview.scss';\n\nimport utils from '~/utils/main';\n\nconst getExtension = (name: string) => {\n  const parts = name.split('.');\n  return parts.length > 1 ? (parts.pop() ?? '').toUpperCase() : '';\n};\n\nconst dropExtension = (name: string) => name.replace(/\\.[^/.]+$/, '');\n\n// A bare <video> paints nothing until a frame is decoded; the media fragment forces one.\nconst withFirstFrame = (src?: string) => (src && !src.includes('#t=') ? `${src}#t=0.1` : src);\n\nexport type AttachmentTileProps = {\n  item: AttachmentPreviewItem;\n  onRemove?: AttachmentPreviewProps['onRemove'];\n  onRetry?: AttachmentPreviewProps['onRetry'];\n  onItemClick?: AttachmentPreviewProps['onItemClick'];\n  isSelected?: boolean;\n  hideActions?: boolean;\n  /** Adds \"Share file\" to the tile's hover menu. */\n  onShare?: (item: AttachmentPreviewItem) => void;\n};\n\nconst TileActions = ({\n  item,\n  onShare,\n  imageRef,\n}: Pick<AttachmentTileProps, 'item' | 'onShare'> & {\n  imageRef?: RefObject<HTMLImageElement>;\n}) => {\n  const fileName = utils.getFileNameWithExtensionFromPath(item.name);\n  const downloadUrl = item.hideDownload ? undefined : item.downloadUrl || item.src;\n\n  return (\n    <div className={styles.tileActions} data-testid=\"attachment-tile-actions\">\n      {!!downloadUrl && (\n        <AttachmentDownloadLink\n          url={downloadUrl}\n          fileName={fileName}\n          size=\"xs\"\n          className={styles.tileActionLink}\n        />\n      )}\n\n      <AttachmentActionsMenu\n        item={item}\n        onShare={onShare}\n        size=\"xs\"\n        testIdPrefix=\"attachment-tile\"\n        tooltip=\"More actions\"\n        imageRef={imageRef}\n      />\n    </div>\n  );\n};\n\nconst stopAndRun = (action: () => void) => (event: MouseEvent) => {\n  event.stopPropagation();\n  action();\n};\n\nconst TileOverlays = ({ item, onRemove, onRetry }: Omit<AttachmentTileProps, 'onItemClick'>) => (\n  <>\n    {item.isUploading && (\n      <>\n        <div className={styles.uploadingOverlay} />\n        <div className={styles.uploadingSpinner}>\n          <LoaderCircular size=\"xs\" className={styles.loader} />\n        </div>\n      </>\n    )}\n\n    {!!item.error && (\n      <>\n        <div className={styles.errorOverlay} />\n        {onRetry && (\n          <Tooltip title=\"Retry upload\">\n            <div className={styles.retryButton}>\n              <ButtonIcon\n                size=\"xs\"\n                type=\"tertiaryBg\"\n                onClick={stopAndRun(() => onRetry(item.id))}\n                testId=\"attachment-retry\"\n              >\n                <UndoIcon size=\"small\" />\n              </ButtonIcon>\n            </div>\n          </Tooltip>\n        )}\n      </>\n    )}\n\n    {onRemove && !item.isUploading && (\n      <Tooltip title=\"Remove\">\n        <div\n          className={classNames(styles.removeButton, !!item.error && styles.removeButtonVisible)}\n        >\n          <ButtonIcon\n            size=\"xs\"\n            type=\"tertiaryBg\"\n            onClick={stopAndRun(() => onRemove(item.id))}\n            testId=\"attachment-remove\"\n          >\n            <CloseSmallIcon size=\"small\" />\n          </ButtonIcon>\n        </div>\n      </Tooltip>\n    )}\n  </>\n);\n\nexport const AttachmentTile = ({\n  item,\n  onRemove,\n  onRetry,\n  onItemClick,\n  isSelected,\n  hideActions,\n  onShare,\n}: AttachmentTileProps) => {\n  const imageRef = useRef<HTMLImageElement>(null);\n  const kind = item.kind ?? 'file';\n  const overlays = <TileOverlays item={item} onRemove={onRemove} onRetry={onRetry} />;\n  const fileName = utils.getFileNameWithExtensionFromPath(item.name);\n  const isReady = !item.isUploading && !item.error;\n  const clickable = !!onItemClick && isReady;\n  // A tile being composed shows Remove in the same corner, and has nothing to link to.\n  const showActions = !hideActions && !onRemove && isReady;\n\n  if (kind === 'image' || kind === 'video') {\n    return (\n      // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events\n      <div\n        className={classNames(\n          styles.thumbnail,\n          clickable && styles.clickable,\n          isSelected && styles.selected,\n          !!item.error && styles.thumbnailError\n        )}\n        onClick={clickable ? () => onItemClick?.(item) : undefined}\n      >\n        <div className={styles.thumbnailInner}>\n          {kind === 'image' ? (\n            <AttachmentImage\n              ref={imageRef}\n              src={item.src}\n              alt={fileName}\n              className={styles.thumbnailImage}\n            />\n          ) : (\n            <video\n              src={withFirstFrame(item.src)}\n              className={styles.thumbnailImage}\n              preload=\"metadata\"\n              playsInline\n              muted\n            />\n          )}\n        </div>\n        {kind === 'video' && (\n          <div className={styles.videoOverlay}>\n            <PlayOneIcon theme=\"filled\" className={styles.playIcon} />\n          </div>\n        )}\n        {showActions && <TileActions item={item} onShare={onShare} imageRef={imageRef} />}\n        {overlays}\n      </div>\n    );\n  }\n\n  const fileCardContent = (\n    <>\n      <div className={styles.fileCardContent}>\n        <FileIcon name={fileName} />\n        <div className={styles.fileInfo}>\n          <Tooltip title={fileName}>\n            <div className={styles.fileName}>{dropExtension(fileName)}</div>\n          </Tooltip>\n          <div className={styles.fileType}>{getExtension(fileName)}</div>\n        </div>\n      </div>\n      {showActions && <TileActions item={item} onShare={onShare} />}\n      {overlays}\n    </>\n  );\n\n  const cardInteraction = clickable\n    ? {\n        role: 'button',\n        tabIndex: 0,\n        onClick: () => onItemClick?.(item),\n        onKeyDown: (event: KeyboardEvent) => {\n          // Keys bubbling from the nested download link must reach it, not open the preview.\n          if (event.target !== event.currentTarget) return;\n          if (event.key !== 'Enter' && event.key !== ' ') return;\n\n          // Space would otherwise scroll the surrounding feed.\n          event.preventDefault();\n          onItemClick?.(item);\n        },\n      }\n    : {};\n\n  return (\n    <div\n      className={classNames(\n        styles.fileCard,\n        clickable && styles.fileCardLink,\n        isSelected && styles.selected,\n        !!item.error && styles.thumbnailError\n      )}\n      {...cardInteraction}\n    >\n      {fileCardContent}\n    </div>\n  );\n};\n"],"names":["getExtension","name","_parts$pop","parts","split","length","pop","toUpperCase","TileActions","_ref","item","onShare","imageRef","fileName","utils","getFileNameWithExtensionFromPath","downloadUrl","hideDownload","undefined","src","_jsxs","className","styles","tileActions","children","_jsx","AttachmentDownloadLink","url","size","tileActionLink","AttachmentActionsMenu","testIdPrefix","tooltip","stopAndRun","action","event","stopPropagation","TileOverlays","_ref2","onRemove","onRetry","_Fragment","isUploading","uploadingOverlay","uploadingSpinner","LoaderCircular","loader","error","errorOverlay","Tooltip","title","retryButton","ButtonIcon","type","onClick","id","testId","UndoIcon","classNames","removeButton","removeButtonVisible","CloseSmallIcon","AttachmentTile","_ref3","_item$kind","onItemClick","isSelected","hideActions","useRef","kind","overlays","isReady","clickable","showActions","thumbnail","selected","thumbnailError","thumbnailInner","AttachmentImage","ref","alt","thumbnailImage","includes","concat","preload","playsInline","muted","videoOverlay","PlayOneIcon","theme","playIcon","fileCardContent","FileIcon","fileInfo","replace","fileType","cardInteraction","role","tabIndex","onKeyDown","target","currentTarget","key","preventDefault","_objectSpread","fileCard","fileCardLink"],"mappings":"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"}

package/components/AttachmentPreview/SortableAttachments.js

@@ -1,2 +1,2 @@
-import o from"@babel/runtime/helpers/defineProperty";import n from"@babel/runtime/helpers/slicedToArray";import s from"@babel/runtime/helpers/toConsumableArray";import{forwardRef as t,useState as c,useRef as i,useEffect as r}from"react";import{createPortal as e}from"react-dom";import m from"classnames";import{useSensors as a,useSensor as u,PointerSensor as p,KeyboardSensor as l,DndContext as d,pointerWithin as j,closestCenter as f,DragOverlay as I}from"@dnd-kit/core";import{sortableKeyboardCoordinates as g,SortableContext as v,horizontalListSortingStrategy as h,useSortable as b}from"@dnd-kit/sortable";import{ButtonIcon as y}from"../../componentsV2/ButtonIcon/ButtonIcon.js";import{DragIcon as C}from"../../icons/iconParkIcons.js";import"../../icons/customIcons/icons/AddMessage.js";import"../../icons/customIcons/icons/DragOne.js";import"../../icons/customIcons/icons/Attention.js";import"../../icons/customIcons/icons/Collapse.js";import"../../icons/customIcons/icons/Dashboard.js";import"../../icons/customIcons/icons/Expand.js";import"../../icons/customIcons/icons/FolderClosed.js";import"../../icons/customIcons/icons/FolderClosedFilled.js";import"../../icons/customIcons/icons/FolderOpened.js";import"../../icons/customIcons/icons/GreaterOrEqual.js";import"../../icons/customIcons/icons/LessOrEqual.js";import"../../icons/customIcons/icons/Search.js";import"../../icons/customIcons/icons/SearchOne.js";import"../../icons/customIcons/icons/Wellhub.js";import"../../icons/customIcons/icons/MultiRuler.js";import"../../icons/customIcons/icons/Checkbox.js";import"../../icons/customIcons/icons/CheckboxChecked.js";import"../../icons/customIcons/icons/CheckboxIndeterminate.js";import"../../icons/customIcons/icons/Radio.js";import"../../icons/customIcons/icons/RadioChecked.js";import"../../icons/customIcons/icons/SimulFrac.js";import"../../icons/customIcons/icons/ZipperFrac.js";import"../../icons/customIcons/icons/CautionFilled.js";import"../../icons/customIcons/icons/InfoRounded.js";import"../../icons/customIcons/icons/FlameFilled.js";import"../../icons/customIcons/icons/MoreApp.js";import"../../icons/customIcons/icons/Pad.js";import"../../icons/customIcons/icons/DrilloutUnit.js";import"../../icons/customIcons/icons/FracFleet.js";import"../../icons/customIcons/icons/Global.js";import"../../icons/customIcons/icons/Program.js";import"../../icons/customIcons/icons/Rig.js";import"../../icons/customIcons/icons/Well.js";import"../../icons/customIcons/icons/Gap.js";import"../../icons/customIcons/icons/Pin.js";import"../../icons/customIcons/icons/CloseOneFilled.js";import"../../icons/customIcons/icons/AttentionFilled.js";import"../../icons/customIcons/icons/CheckOneFilled.js";import"../../icons/customIcons/icons/Archive.js";import"../../icons/customIcons/icons/ArchiveCancel.js";import"../../icons/customIcons/icons/Unarchive.js";import"../../icons/customIcons/icons/Archived.js";import"../../icons/customIcons/icons/InterventionUnit.js";import"../../icons/customIcons/icons/CloudDelete.js";import"../../icons/customIcons/icons/Lasso.js";import"../../icons/customIcons/icons/Radius.js";import"../../icons/customIcons/icons/ErrorOps.js";import"../../icons/customIcons/icons/DataTypeOps.js";import"../../icons/customIcons/icons/FalsePositiveOps.js";import"../../icons/customIcons/icons/CalibrationOps.js";import"../../icons/customIcons/icons/CriticalOps.js";import"../../icons/customIcons/icons/Company.js";import"../../icons/customIcons/icons/ArchiveOne.js";import"../../icons/customIcons/icons/ParseBotFusion.js";import"../../icons/customIcons/icons/Connect.js";import"../../icons/customIcons/icons/PuzzleOne.js";import"../../icons/customIcons/icons/Feed.js";import"../../icons/customIcons/icons/Prompt.js";import"../../icons/customIcons/icons/Companies.js";import"../../icons/customIcons/icons/ClipboardAi.js";import"../../icons/customIcons/icons/Key.js";import"../../icons/customIcons/icons/AtSignCrossed.js";import"../../icons/customIcons/icons/MappingManual.js";import"../../icons/customIcons/icons/Mapping.js";import"../../icons/customIcons/icons/Metrics.js";import"../../icons/customIcons/icons/Drops.js";import"../../icons/customIcons/icons/ClipboardSearch.js";import"../../icons/customIcons/icons/Template.js";import"../../icons/customIcons/icons/ClipboardMetrics.js";import"../../icons/customIcons/icons/ClipboardBuilder.js";import"../../icons/customIcons/icons/UnitConversion.js";import"../../icons/customIcons/icons/NPT.js";import"../../icons/customIcons/icons/GuidedFrac.js";import{AttachmentTile as O}from"./AttachmentTile.js";import D from"./AttachmentPreview.scss.js";import"../../constants/goals.js";import"../../constants/segment.js";import"../../constants/alerts.js";import"../../constants/apps.js";import"../../constants/drillstring.js";import"../../constants/completion.js";import"../../constants/appPackages.js";import"../../constants/notifications.js";import"../../constants/feed.js";import"../../constants/bha.js";import"../../constants/corvaCompanyId.js";import"lodash";import"../GradientManager/configuration/constants.js";import{DRAGGING_ATTRIBUTE as k}from"../../constants/attachments.js";import A from"../../utils/main.js";import{jsxs as F,jsx as P}from"react/jsx-runtime";function R(o,n){var s=Object.keys(o);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(o);n&&(t=t.filter((function(n){return Object.getOwnPropertyDescriptor(o,n).enumerable}))),s.push.apply(s,t)}return s}function w(n){for(var s=1;s<arguments.length;s++){var t=null!=arguments[s]?arguments[s]:{};s%2?R(Object(t),!0).forEach((function(s){o(n,s,t[s])})):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(t)):R(Object(t)).forEach((function(o){Object.defineProperty(n,o,Object.getOwnPropertyDescriptor(t,o))}))}return n}var E=function(o){document.body.toggleAttribute(k,o)},N=function(){setTimeout((function(){return E(!1)}),0)},S=function(o){var n=o.item,s=o.onRemove,t=o.onRetry,c=o.onItemClick,i=o.insertBefore,r=o.insertAfter,e=o.isFirst,a=b({id:String(n.id)}),u=a.attributes,p=a.listeners,l=a.setNodeRef,d=a.isDragging;return F("div",w(w(w({ref:l,className:m(D.slot,d&&D.slotDragging)},u),p),{},{onKeyDown:function(o){var t;null==p||null===(t=p.onKeyDown)||void 0===t||t.call(p,o),"Delete"!==o.key&&"Backspace"!==o.key||s&&(o.preventDefault(),s(n.id))},children:[i&&P("div",{className:m(D.insertion,e?D.insertionEdge:D.insertionBefore)}),P("div",{className:D.slotContent,children:P(O,{item:n,onRemove:s,onRetry:t,onItemClick:c})}),r&&P("div",{className:m(D.insertion,D.insertionAfter)})]}))},x=t((function(t,b){var R=t.items,x=t.onRemove,M=t.onRetry,B=t.onItemClick,G=t.onReorder,L=t.className,T=t.testId,z=c(null),K=n(z,2),U=K[0],W=K[1],q=c(-1),H=n(q,2),V=H[0],X=H[1],Z=i(-1);Z.current=V;var J=i(!1),Q=i([]),Y=i(null),$=a(u(p,{activationConstraint:{distance:4}}),u(l,{coordinateGetter:g})),_=R.map((function(o){return String(o.id)})),oo=U?_.indexOf(U):-1,no=R.find((function(o){return String(o.id)===U})),so=function(o){var n,s;return A.getFileNameWithExtensionFromPath(null!==(n=null===(s=R[o])||void 0===s?void 0:s.name)&&void 0!==n?n:"file")},to=function(o){Z.current=o,X(o)};r((function(){return function(){return E(!1)}}),[]);var co=function(o){return(o>oo?o-1:o)+1},io={onDragStart:function(o){var n=o.active,s=_.indexOf(String(n.id));return"Grabbed ".concat(so(s),". Position ").concat(s+1," of ").concat(_.length,".")},onDragOver:function(){return Z.current<0?"".concat(so(oo)," is back at position ").concat(oo+1," of ").concat(_.length,"."):"".concat(so(oo)," will move to position ").concat(co(Z.current)," of ").concat(_.length,".")},onDragEnd:function(){return Z.current<0?"".concat(so(oo)," was dropped in place."):"".concat(so(oo)," was dropped at position ").concat(co(Z.current)," of ").concat(_.length,".")},onDragCancel:function(){return"Reordering cancelled. ".concat(so(oo)," returned to its position.")}};r((function(){if(!(oo<0)&&J.current){var o=oo,n=function(n){var s={ArrowRight:1,ArrowLeft:-1}[n.key];s&&(o=Math.min(R.length-1,Math.max(0,o+s)),to(function(o){return o===oo?-1:o+(o>oo?1:0)}(o)))};return document.addEventListener("keydown",n),function(){return document.removeEventListener("keydown",n)}}}),[oo,R.length]);var ro=function(o){return to(function(o){var n=o.delta,s=o.activatorEvent,t=null==s?void 0:s.clientX,c=Y.current;if(oo<0||!c||"number"!=typeof t||Number.isNaN(t))return Z.current;var i=t+n.x+c.scrollLeft,r=Q.current.filter((function(o){return i>=o})).length;return r===oo||r===oo+1?-1:r}(o))};return F(d,{sensors:$,accessibility:{announcements:io},collisionDetection:function(o){var n=j(o);return n.length?n:f(o)},onDragStart:function(o){var n=o.active,s=o.activatorEvent;J.current=s instanceof globalThis.KeyboardEvent;var t=Y.current;Q.current=t?Array.from(t.children).map((function(o){var n=o.getBoundingClientRect();return n.left+n.width/2+t.scrollLeft})):[],W(String(n.id)),to(-1),E(!0)},onDragMove:ro,onDragOver:ro,onDragEnd:function(){var o,t,c,i,r,e=Z.current;e>=0&&oo>=0&&G((o=oo,t=e,c=s(_),i=c.splice(o,1),r=n(i,1)[0],c.splice(t>o?t-1:t,0,r),c)),W(null),to(-1),Q.current=[],N()},onDragCancel:function(){W(null),to(-1),Q.current=[],N()},children:[P(v,{items:_,strategy:h,children:P("div",w(w({ref:function(o){if(Y.current=o,"function"==typeof b)b(o);else if(b){b.current=o}},"data-testid":T,className:m(D.scroller,L)},U?o({},k,"true"):{}),{},{children:R.map((function(o,n){return P(S,{item:o,onRemove:x,onRetry:M,onItemClick:B,isFirst:0===n,insertBefore:V===n,insertAfter:n===R.length-1&&V===R.length},o.id)}))}))}),e(P(I,{dropAnimation:null,zIndex:2100,children:no&&F("div",w(w({className:D.dragGhost},o({},k,"true")),{},{children:[P(O,{item:no}),P("div",{className:D.dragGhostHandle,children:P(y,{size:"xs",type:"tertiaryBg",testId:"attachment-drag-handle",children:P(C,{size:"small"})})})]}))}),document.body)]})}));export{x as SortableAttachments};
+import o from"@babel/runtime/helpers/defineProperty";import n from"@babel/runtime/helpers/slicedToArray";import s from"@babel/runtime/helpers/toConsumableArray";import{forwardRef as t,useState as c,useRef as i,useEffect as r}from"react";import{createPortal as e}from"react-dom";import m from"classnames";import{useSensors as a,useSensor as u,PointerSensor as p,KeyboardSensor as l,DndContext as d,pointerWithin as j,closestCenter as f,DragOverlay as I}from"@dnd-kit/core";import{sortableKeyboardCoordinates as g,SortableContext as v,horizontalListSortingStrategy as h,useSortable as b}from"@dnd-kit/sortable";import{ButtonIcon as y}from"../../componentsV2/ButtonIcon/ButtonIcon.js";import{DragIcon as O}from"../../icons/iconParkIcons.js";import"../../icons/customIcons/icons/AddMessage.js";import"../../icons/customIcons/icons/DragOne.js";import"../../icons/customIcons/icons/Attention.js";import"../../icons/customIcons/icons/Collapse.js";import"../../icons/customIcons/icons/Dashboard.js";import"../../icons/customIcons/icons/Expand.js";import"../../icons/customIcons/icons/FolderClosed.js";import"../../icons/customIcons/icons/FolderClosedFilled.js";import"../../icons/customIcons/icons/FolderOpened.js";import"../../icons/customIcons/icons/GreaterOrEqual.js";import"../../icons/customIcons/icons/LessOrEqual.js";import"../../icons/customIcons/icons/Search.js";import"../../icons/customIcons/icons/SearchOne.js";import"../../icons/customIcons/icons/Wellhub.js";import"../../icons/customIcons/icons/MultiRuler.js";import"../../icons/customIcons/icons/Checkbox.js";import"../../icons/customIcons/icons/CheckboxChecked.js";import"../../icons/customIcons/icons/CheckboxIndeterminate.js";import"../../icons/customIcons/icons/Radio.js";import"../../icons/customIcons/icons/RadioChecked.js";import"../../icons/customIcons/icons/SimulFrac.js";import"../../icons/customIcons/icons/ZipperFrac.js";import"../../icons/customIcons/icons/CautionFilled.js";import"../../icons/customIcons/icons/InfoRounded.js";import"../../icons/customIcons/icons/FlameFilled.js";import"../../icons/customIcons/icons/MoreApp.js";import"../../icons/customIcons/icons/Pad.js";import"../../icons/customIcons/icons/DrilloutUnit.js";import"../../icons/customIcons/icons/FracFleet.js";import"../../icons/customIcons/icons/Global.js";import"../../icons/customIcons/icons/Program.js";import"../../icons/customIcons/icons/Rig.js";import"../../icons/customIcons/icons/Well.js";import"../../icons/customIcons/icons/Gap.js";import"../../icons/customIcons/icons/Pin.js";import"../../icons/customIcons/icons/PinOne.js";import"../../icons/customIcons/icons/PinOneCrossed.js";import"../../icons/customIcons/icons/CloseOneFilled.js";import"../../icons/customIcons/icons/AttentionFilled.js";import"../../icons/customIcons/icons/CheckOneFilled.js";import"../../icons/customIcons/icons/Archive.js";import"../../icons/customIcons/icons/ArchiveCancel.js";import"../../icons/customIcons/icons/Unarchive.js";import"../../icons/customIcons/icons/Archived.js";import"../../icons/customIcons/icons/InterventionUnit.js";import"../../icons/customIcons/icons/CloudDelete.js";import"../../icons/customIcons/icons/Lasso.js";import"../../icons/customIcons/icons/Radius.js";import"../../icons/customIcons/icons/ErrorOps.js";import"../../icons/customIcons/icons/DataTypeOps.js";import"../../icons/customIcons/icons/FalsePositiveOps.js";import"../../icons/customIcons/icons/CalibrationOps.js";import"../../icons/customIcons/icons/CriticalOps.js";import"../../icons/customIcons/icons/Company.js";import"../../icons/customIcons/icons/ArchiveOne.js";import"../../icons/customIcons/icons/ParseBotFusion.js";import"../../icons/customIcons/icons/Connect.js";import"../../icons/customIcons/icons/PuzzleOne.js";import"../../icons/customIcons/icons/Feed.js";import"../../icons/customIcons/icons/Prompt.js";import"../../icons/customIcons/icons/Companies.js";import"../../icons/customIcons/icons/ClipboardAi.js";import"../../icons/customIcons/icons/Key.js";import"../../icons/customIcons/icons/AtSignCrossed.js";import"../../icons/customIcons/icons/MappingManual.js";import"../../icons/customIcons/icons/Mapping.js";import"../../icons/customIcons/icons/Metrics.js";import"../../icons/customIcons/icons/Drops.js";import"../../icons/customIcons/icons/ClipboardSearch.js";import"../../icons/customIcons/icons/Template.js";import"../../icons/customIcons/icons/ClipboardMetrics.js";import"../../icons/customIcons/icons/ClipboardBuilder.js";import"../../icons/customIcons/icons/UnitConversion.js";import"../../icons/customIcons/icons/NPT.js";import"../../icons/customIcons/icons/GuidedFrac.js";import{AttachmentTile as C}from"./AttachmentTile.js";import D from"./AttachmentPreview.scss.js";import"../../constants/goals.js";import"../../constants/segment.js";import"../../constants/alerts.js";import"../../constants/apps.js";import"../../constants/drillstring.js";import"../../constants/completion.js";import"../../constants/appPackages.js";import"../../constants/notifications.js";import"../../constants/feed.js";import"../../constants/bha.js";import"../../constants/corvaCompanyId.js";import"lodash";import"../GradientManager/configuration/constants.js";import{DRAGGING_ATTRIBUTE as P}from"../../constants/attachments.js";import k from"../../utils/main.js";import{jsxs as A,jsx as F}from"react/jsx-runtime";function R(o,n){var s=Object.keys(o);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(o);n&&(t=t.filter((function(n){return Object.getOwnPropertyDescriptor(o,n).enumerable}))),s.push.apply(s,t)}return s}function w(n){for(var s=1;s<arguments.length;s++){var t=null!=arguments[s]?arguments[s]:{};s%2?R(Object(t),!0).forEach((function(s){o(n,s,t[s])})):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(t)):R(Object(t)).forEach((function(o){Object.defineProperty(n,o,Object.getOwnPropertyDescriptor(t,o))}))}return n}var E=function(o){document.body.toggleAttribute(P,o)},N=function(){setTimeout((function(){return E(!1)}),0)},S=function(o){var n=o.item,s=o.onRemove,t=o.onRetry,c=o.onItemClick,i=o.insertBefore,r=o.insertAfter,e=o.isFirst,a=b({id:String(n.id)}),u=a.attributes,p=a.listeners,l=a.setNodeRef,d=a.isDragging;return A("div",w(w(w({ref:l,className:m(D.slot,d&&D.slotDragging)},u),p),{},{onKeyDown:function(o){var t;null==p||null===(t=p.onKeyDown)||void 0===t||t.call(p,o),"Delete"!==o.key&&"Backspace"!==o.key||s&&(o.preventDefault(),s(n.id))},children:[i&&F("div",{className:m(D.insertion,e?D.insertionEdge:D.insertionBefore)}),F("div",{className:D.slotContent,children:F(C,{item:n,onRemove:s,onRetry:t,onItemClick:c})}),r&&F("div",{className:m(D.insertion,D.insertionAfter)})]}))},x=t((function(t,b){var R=t.items,x=t.onRemove,M=t.onRetry,B=t.onItemClick,G=t.onReorder,L=t.className,T=t.testId,z=c(null),K=n(z,2),U=K[0],W=K[1],q=c(-1),H=n(q,2),V=H[0],X=H[1],Z=i(-1);Z.current=V;var J=i(!1),Q=i([]),Y=i(null),$=a(u(p,{activationConstraint:{distance:4}}),u(l,{coordinateGetter:g})),_=R.map((function(o){return String(o.id)})),oo=U?_.indexOf(U):-1,no=R.find((function(o){return String(o.id)===U})),so=function(o){var n,s;return k.getFileNameWithExtensionFromPath(null!==(n=null===(s=R[o])||void 0===s?void 0:s.name)&&void 0!==n?n:"file")},to=function(o){Z.current=o,X(o)};r((function(){return function(){return E(!1)}}),[]);var co=function(o){return(o>oo?o-1:o)+1},io={onDragStart:function(o){var n=o.active,s=_.indexOf(String(n.id));return"Grabbed ".concat(so(s),". Position ").concat(s+1," of ").concat(_.length,".")},onDragOver:function(){return Z.current<0?"".concat(so(oo)," is back at position ").concat(oo+1," of ").concat(_.length,"."):"".concat(so(oo)," will move to position ").concat(co(Z.current)," of ").concat(_.length,".")},onDragEnd:function(){return Z.current<0?"".concat(so(oo)," was dropped in place."):"".concat(so(oo)," was dropped at position ").concat(co(Z.current)," of ").concat(_.length,".")},onDragCancel:function(){return"Reordering cancelled. ".concat(so(oo)," returned to its position.")}};r((function(){if(!(oo<0)&&J.current){var o=oo,n=function(n){var s={ArrowRight:1,ArrowLeft:-1}[n.key];s&&(o=Math.min(R.length-1,Math.max(0,o+s)),to(function(o){return o===oo?-1:o+(o>oo?1:0)}(o)))};return document.addEventListener("keydown",n),function(){return document.removeEventListener("keydown",n)}}}),[oo,R.length]);var ro=function(o){return to(function(o){var n=o.delta,s=o.activatorEvent,t=null==s?void 0:s.clientX,c=Y.current;if(oo<0||!c||"number"!=typeof t||Number.isNaN(t))return Z.current;var i=t+n.x+c.scrollLeft,r=Q.current.filter((function(o){return i>=o})).length;return r===oo||r===oo+1?-1:r}(o))};return A(d,{sensors:$,accessibility:{announcements:io},collisionDetection:function(o){var n=j(o);return n.length?n:f(o)},onDragStart:function(o){var n=o.active,s=o.activatorEvent;J.current=s instanceof globalThis.KeyboardEvent;var t=Y.current;Q.current=t?Array.from(t.children).map((function(o){var n=o.getBoundingClientRect();return n.left+n.width/2+t.scrollLeft})):[],W(String(n.id)),to(-1),E(!0)},onDragMove:ro,onDragOver:ro,onDragEnd:function(){var o,t,c,i,r,e=Z.current;e>=0&&oo>=0&&G((o=oo,t=e,c=s(_),i=c.splice(o,1),r=n(i,1)[0],c.splice(t>o?t-1:t,0,r),c)),W(null),to(-1),Q.current=[],N()},onDragCancel:function(){W(null),to(-1),Q.current=[],N()},children:[F(v,{items:_,strategy:h,children:F("div",w(w({ref:function(o){if(Y.current=o,"function"==typeof b)b(o);else if(b){b.current=o}},"data-testid":T,className:m(D.scroller,L)},U?o({},P,"true"):{}),{},{children:R.map((function(o,n){return F(S,{item:o,onRemove:x,onRetry:M,onItemClick:B,isFirst:0===n,insertBefore:V===n,insertAfter:n===R.length-1&&V===R.length},o.id)}))}))}),e(F(I,{dropAnimation:null,zIndex:2100,children:no&&A("div",w(w({className:D.dragGhost},o({},P,"true")),{},{children:[F(C,{item:no}),F("div",{className:D.dragGhostHandle,children:F(y,{size:"xs",type:"tertiaryBg",testId:"attachment-drag-handle",children:F(O,{size:"small"})})})]}))}),document.body)]})}));export{x as SortableAttachments};
 //# sourceMappingURL=SortableAttachments.js.map

package/components/AttachmentPreview/SortableAttachments.js.map

@@ -1 +1 @@
-{"version":3,"file":"SortableAttachments.js","sources":["../../../src/components/AttachmentPreview/SortableAttachments.tsx"],"sourcesContent":["import { forwardRef, KeyboardEvent, MutableRefObject, useEffect, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport classNames from 'classnames';\nimport {\n  Announcements,\n  DndContext,\n  DragMoveEvent,\n  DragStartEvent,\n  DragOverlay,\n  KeyboardSensor,\n  PointerSensor,\n  closestCenter,\n  pointerWithin,\n  useSensor,\n  useSensors,\n} from '@dnd-kit/core';\nimport {\n  SortableContext,\n  horizontalListSortingStrategy,\n  sortableKeyboardCoordinates,\n  useSortable,\n} from '@dnd-kit/sortable';\n\nimport { ButtonIcon } from '../../componentsV2/ButtonIcon';\nimport { DragIcon } from '../../icons';\n\nimport { AttachmentTile } from './AttachmentTile';\nimport { AttachmentPreviewItem, AttachmentPreviewProps } from './AttachmentPreview.types';\n\nimport styles from './AttachmentPreview.scss';\n\nimport { DRAGGING_ATTRIBUTE } from '~/constants';\nimport utils from '~/utils/main';\n\n// Above MUI's modal layer (1300) and the platform's panels.\nconst DRAG_GHOST_Z_INDEX = 2100;\n\nconst setDragActive = (isActive: boolean) => {\n  document.body.toggleAttribute(DRAGGING_ATTRIBUTE, isActive);\n};\n\nconst clearDragActive = () => {\n  setTimeout(() => setDragActive(false), 0);\n};\n\n/** Move `from` to boundary `insertAt` (0 = before everything, length = after everything). */\nconst moveToBoundary = <T,>(list: T[], from: number, insertAt: number): T[] => {\n  const next = [...list];\n  const [moved] = next.splice(from, 1);\n  next.splice(insertAt > from ? insertAt - 1 : insertAt, 0, moved);\n\n  return next;\n};\n\nexport type SortableAttachmentsProps = AttachmentPreviewProps & {\n  onReorder: NonNullable<AttachmentPreviewProps['onReorder']>;\n};\n\ntype SortableSlotProps = {\n  item: AttachmentPreviewItem;\n  onRemove?: AttachmentPreviewProps['onRemove'];\n  onRetry?: AttachmentPreviewProps['onRetry'];\n  onItemClick?: AttachmentPreviewProps['onItemClick'];\n  insertBefore: boolean;\n  insertAfter: boolean;\n  isFirst: boolean;\n};\n\nconst SortableSlot = ({\n  item,\n  onRemove,\n  onRetry,\n  onItemClick,\n  insertBefore,\n  insertAfter,\n  isFirst,\n}: SortableSlotProps) => {\n  const { attributes, listeners, setNodeRef, isDragging } = useSortable({ id: String(item.id) });\n\n  // The sensor owns onKeyDown (space/arrows/escape), so chain onto it rather than replace it.\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    listeners?.onKeyDown?.(event);\n\n    if (event.key !== 'Delete' && event.key !== 'Backspace') return;\n    if (!onRemove) return;\n\n    event.preventDefault();\n    onRemove(item.id);\n  };\n\n  return (\n    <div\n      ref={setNodeRef}\n      className={classNames(styles.slot, isDragging && styles.slotDragging)}\n      {...attributes}\n      {...listeners}\n      onKeyDown={handleKeyDown}\n    >\n      {insertBefore && (\n        <div\n          className={classNames(\n            styles.insertion,\n            isFirst ? styles.insertionEdge : styles.insertionBefore\n          )}\n        />\n      )}\n      <div className={styles.slotContent}>\n        <AttachmentTile\n          item={item}\n          onRemove={onRemove}\n          onRetry={onRetry}\n          onItemClick={onItemClick}\n        />\n      </div>\n      {insertAfter && <div className={classNames(styles.insertion, styles.insertionAfter)} />}\n    </div>\n  );\n};\n\nexport const SortableAttachments = forwardRef<HTMLDivElement, SortableAttachmentsProps>(\n  ({ items, onRemove, onRetry, onItemClick, onReorder, className, testId }, ref) => {\n    const [activeId, setActiveId] = useState<null | string>(null);\n    const [insertionIndex, setInsertionIndex] = useState(-1);\n    // Read in handlers that must not be re-created as the pointer moves.\n    const insertionRef = useRef(-1);\n    insertionRef.current = insertionIndex;\n    const isKeyboardDragRef = useRef(false);\n    const slotMidpointsRef = useRef<number[]>([]);\n\n    // The host's ref drives its scroll arrows; this one measures the strip mid-drag.\n    const scrollerRef = useRef<HTMLDivElement | null>(null);\n    const setScrollerRef = (node: HTMLDivElement | null) => {\n      scrollerRef.current = node;\n      if (typeof ref === 'function') ref(node);\n      else if (ref) {\n        const forwardedRef = ref as MutableRefObject<HTMLDivElement | null>;\n        forwardedRef.current = node;\n      }\n    };\n\n    const sensors = useSensors(\n      // A small threshold keeps Remove and the lightbox clickable on a plain press.\n      useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),\n      useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })\n    );\n\n    const ids = items.map(item => String(item.id));\n    const activeIndex = activeId ? ids.indexOf(activeId) : -1;\n    const activeItem = items.find(item => String(item.id) === activeId);\n    const nameOf = (index: number) =>\n      utils.getFileNameWithExtensionFromPath(items[index]?.name ?? 'file');\n\n    const setInsertion = (next: number) => {\n      insertionRef.current = next;\n      setInsertionIndex(next);\n    };\n\n    useEffect(() => () => setDragActive(false), []);\n\n    /** A landing position (0…n-1) expressed as the boundary the insertion bar draws at. */\n    const positionToBoundary = (position: number) =>\n      position === activeIndex ? -1 : position + (position > activeIndex ? 1 : 0);\n\n    // Compare against DOM midpoints captured at drag start: dnd-kit's rects follow its virtual\n    // sorted order, which drifts from the screen once transforms are suppressed.\n    const resolveInsertion = ({ delta, activatorEvent }: DragMoveEvent) => {\n      const startX = (activatorEvent as PointerEvent)?.clientX;\n      const scroller = scrollerRef.current;\n      if (activeIndex < 0 || !scroller || typeof startX !== 'number' || Number.isNaN(startX)) {\n        return insertionRef.current;\n      }\n\n      const pointerX = startX + delta.x + scroller.scrollLeft;\n      const boundary = slotMidpointsRef.current.filter(midpoint => pointerX >= midpoint).length;\n\n      // Dropping either side of where it already sits is a no-op.\n      return boundary === activeIndex || boundary === activeIndex + 1 ? -1 : boundary;\n    };\n\n    const positionOf = (boundary: number) => (boundary > activeIndex ? boundary - 1 : boundary) + 1;\n\n    const announcements: Announcements = {\n      onDragStart: ({ active }) => {\n        const index = ids.indexOf(String(active.id));\n\n        return `Grabbed ${nameOf(index)}. Position ${index + 1} of ${ids.length}.`;\n      },\n      onDragOver: () =>\n        insertionRef.current < 0\n          ? `${nameOf(activeIndex)} is back at position ${activeIndex + 1} of ${ids.length}.`\n          : `${nameOf(activeIndex)} will move to position ${positionOf(insertionRef.current)} of ${\n              ids.length\n            }.`,\n      onDragEnd: () =>\n        insertionRef.current < 0\n          ? `${nameOf(activeIndex)} was dropped in place.`\n          : `${nameOf(activeIndex)} was dropped at position ${positionOf(\n              insertionRef.current\n            )} of ${ids.length}.`,\n      onDragCancel: () => `Reordering cancelled. ${nameOf(activeIndex)} returned to its position.`,\n    };\n\n    // Step by position instead of reading dnd-kit's `over`: its keyboard coordinates come from\n    // rect geometry, so a wide tile can clear several narrow ones in one press and pin `over`\n    // to the last of them.\n    useEffect(() => {\n      if (activeIndex < 0 || !isKeyboardDragRef.current) return undefined;\n\n      let position = activeIndex;\n      const onKeyDown = (event: globalThis.KeyboardEvent) => {\n        const step = { ArrowRight: 1, ArrowLeft: -1 }[event.key];\n        if (!step) return;\n\n        position = Math.min(items.length - 1, Math.max(0, position + step));\n        setInsertion(positionToBoundary(position));\n      };\n\n      document.addEventListener('keydown', onKeyDown);\n\n      return () => document.removeEventListener('keydown', onKeyDown);\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [activeIndex, items.length]);\n\n    const handleDragStart = ({ active, activatorEvent }: DragStartEvent) => {\n      isKeyboardDragRef.current = activatorEvent instanceof globalThis.KeyboardEvent;\n      const scroller = scrollerRef.current;\n      slotMidpointsRef.current = scroller\n        ? Array.from(scroller.children).map(slot => {\n            const rect = slot.getBoundingClientRect();\n\n            return rect.left + rect.width / 2 + scroller.scrollLeft;\n          })\n        : [];\n      setActiveId(String(active.id));\n      setInsertion(-1);\n      setDragActive(true);\n    };\n\n    const handleDragMove = (event: DragMoveEvent) => setInsertion(resolveInsertion(event));\n\n    const handleDragEnd = () => {\n      // The bar is the source of truth, not `over` — a keyboard drag can move the target\n      // without `over` following, and dropping in a gap leaves `over` null.\n      const boundary = insertionRef.current;\n      if (boundary >= 0 && activeIndex >= 0) {\n        onReorder(moveToBoundary(ids, activeIndex, boundary));\n      }\n\n      setActiveId(null);\n      setInsertion(-1);\n      slotMidpointsRef.current = [];\n      clearDragActive();\n    };\n\n    const handleDragCancel = () => {\n      setActiveId(null);\n      setInsertion(-1);\n      slotMidpointsRef.current = [];\n      clearDragActive();\n    };\n\n    return (\n      <DndContext\n        sensors={sensors}\n        accessibility={{ announcements }}\n        // pointerWithin targets the tile under the cursor; closestCenter covers the gaps\n        // between tiles and keyboard drags, where there is no pointer.\n        collisionDetection={args => {\n          const within = pointerWithin(args);\n\n          return within.length ? within : closestCenter(args);\n        }}\n        onDragStart={handleDragStart}\n        onDragMove={handleDragMove}\n        onDragOver={handleDragMove}\n        onDragEnd={handleDragEnd}\n        onDragCancel={handleDragCancel}\n      >\n        <SortableContext items={ids} strategy={horizontalListSortingStrategy}>\n          <div\n            ref={setScrollerRef}\n            data-testid={testId}\n            className={classNames(styles.scroller, className)}\n            {...(activeId ? { [DRAGGING_ATTRIBUTE]: 'true' } : {})}\n          >\n            {items.map((item, index) => (\n              <SortableSlot\n                key={item.id}\n                item={item}\n                onRemove={onRemove}\n                onRetry={onRetry}\n                onItemClick={onItemClick}\n                isFirst={index === 0}\n                insertBefore={insertionIndex === index}\n                insertAfter={index === items.length - 1 && insertionIndex === items.length}\n              />\n            ))}\n          </div>\n        </SortableContext>\n\n        {/* Portalled so no ancestor transform/backdrop-filter can clip the fixed overlay. */}\n        {createPortal(\n          <DragOverlay dropAnimation={null} zIndex={DRAG_GHOST_Z_INDEX}>\n            {activeItem && (\n              <div className={styles.dragGhost} {...{ [DRAGGING_ATTRIBUTE]: 'true' }}>\n                <AttachmentTile item={activeItem} />\n                <div className={styles.dragGhostHandle}>\n                  <ButtonIcon size=\"xs\" type=\"tertiaryBg\" testId=\"attachment-drag-handle\">\n                    <DragIcon size=\"small\" />\n                  </ButtonIcon>\n                </div>\n              </div>\n            )}\n          </DragOverlay>,\n          document.body\n        )}\n      </DndContext>\n    );\n  }\n);\n"],"names":["setDragActive","isActive","document","body","toggleAttribute","DRAGGING_ATTRIBUTE","clearDragActive","setTimeout","SortableSlot","_ref","item","onRemove","onRetry","onItemClick","insertBefore","insertAfter","isFirst","_useSortable","useSortable","id","String","attributes","listeners","setNodeRef","isDragging","_jsxs","_objectSpread","ref","className","classNames","styles","slot","slotDragging","onKeyDown","event","_listeners$onKeyDown","key","preventDefault","children","_jsx","insertion","insertionEdge","insertionBefore","slotContent","AttachmentTile","insertionAfter","SortableAttachments","forwardRef","_ref2","items","onReorder","testId","useState","_useState2","_slicedToArray","_useState","activeId","setActiveId","_useState3","_useState4","insertionIndex","setInsertionIndex","insertionRef","useRef","current","isKeyboardDragRef","slotMidpointsRef","scrollerRef","sensors","useSensors","useSensor","PointerSensor","activationConstraint","distance","KeyboardSensor","coordinateGetter","sortableKeyboardCoordinates","ids","map","activeIndex","indexOf","activeItem","find","nameOf","index","_items$index$name","_items$index","utils","getFileNameWithExtensionFromPath","name","setInsertion","next","useEffect","positionOf","boundary","announcements","onDragStart","_ref4","active","concat","length","onDragOver","onDragEnd","onDragCancel","position","step","ArrowRight","ArrowLeft","Math","min","max","positionToBoundary","addEventListener","removeEventListener","handleDragMove","_ref3","delta","activatorEvent","startX","clientX","scroller","Number","isNaN","pointerX","x","scrollLeft","filter","midpoint","resolveInsertion","DndContext","accessibility","collisionDetection","args","within","pointerWithin","closestCenter","_ref5","globalThis","KeyboardEvent","Array","from","rect","getBoundingClientRect","left","width","onDragMove","insertAt","_next$splice","moved","list","splice","SortableContext","strategy","horizontalListSortingStrategy","node","createPortal","DragOverlay","dropAnimation","zIndex","dragGhost","dragGhostHandle","ButtonIcon","size","type","DragIcon"],"mappings":"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"}
+{"version":3,"file":"SortableAttachments.js","sources":["../../../src/components/AttachmentPreview/SortableAttachments.tsx"],"sourcesContent":["import { forwardRef, KeyboardEvent, MutableRefObject, useEffect, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport classNames from 'classnames';\nimport {\n  Announcements,\n  DndContext,\n  DragMoveEvent,\n  DragStartEvent,\n  DragOverlay,\n  KeyboardSensor,\n  PointerSensor,\n  closestCenter,\n  pointerWithin,\n  useSensor,\n  useSensors,\n} from '@dnd-kit/core';\nimport {\n  SortableContext,\n  horizontalListSortingStrategy,\n  sortableKeyboardCoordinates,\n  useSortable,\n} from '@dnd-kit/sortable';\n\nimport { ButtonIcon } from '../../componentsV2/ButtonIcon';\nimport { DragIcon } from '../../icons';\n\nimport { AttachmentTile } from './AttachmentTile';\nimport { AttachmentPreviewItem, AttachmentPreviewProps } from './AttachmentPreview.types';\n\nimport styles from './AttachmentPreview.scss';\n\nimport { DRAGGING_ATTRIBUTE } from '~/constants';\nimport utils from '~/utils/main';\n\n// Above MUI's modal layer (1300) and the platform's panels.\nconst DRAG_GHOST_Z_INDEX = 2100;\n\nconst setDragActive = (isActive: boolean) => {\n  document.body.toggleAttribute(DRAGGING_ATTRIBUTE, isActive);\n};\n\nconst clearDragActive = () => {\n  setTimeout(() => setDragActive(false), 0);\n};\n\n/** Move `from` to boundary `insertAt` (0 = before everything, length = after everything). */\nconst moveToBoundary = <T,>(list: T[], from: number, insertAt: number): T[] => {\n  const next = [...list];\n  const [moved] = next.splice(from, 1);\n  next.splice(insertAt > from ? insertAt - 1 : insertAt, 0, moved);\n\n  return next;\n};\n\nexport type SortableAttachmentsProps = AttachmentPreviewProps & {\n  onReorder: NonNullable<AttachmentPreviewProps['onReorder']>;\n};\n\ntype SortableSlotProps = {\n  item: AttachmentPreviewItem;\n  onRemove?: AttachmentPreviewProps['onRemove'];\n  onRetry?: AttachmentPreviewProps['onRetry'];\n  onItemClick?: AttachmentPreviewProps['onItemClick'];\n  insertBefore: boolean;\n  insertAfter: boolean;\n  isFirst: boolean;\n};\n\nconst SortableSlot = ({\n  item,\n  onRemove,\n  onRetry,\n  onItemClick,\n  insertBefore,\n  insertAfter,\n  isFirst,\n}: SortableSlotProps) => {\n  const { attributes, listeners, setNodeRef, isDragging } = useSortable({ id: String(item.id) });\n\n  // The sensor owns onKeyDown (space/arrows/escape), so chain onto it rather than replace it.\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    listeners?.onKeyDown?.(event);\n\n    if (event.key !== 'Delete' && event.key !== 'Backspace') return;\n    if (!onRemove) return;\n\n    event.preventDefault();\n    onRemove(item.id);\n  };\n\n  return (\n    <div\n      ref={setNodeRef}\n      className={classNames(styles.slot, isDragging && styles.slotDragging)}\n      {...attributes}\n      {...listeners}\n      onKeyDown={handleKeyDown}\n    >\n      {insertBefore && (\n        <div\n          className={classNames(\n            styles.insertion,\n            isFirst ? styles.insertionEdge : styles.insertionBefore\n          )}\n        />\n      )}\n      <div className={styles.slotContent}>\n        <AttachmentTile\n          item={item}\n          onRemove={onRemove}\n          onRetry={onRetry}\n          onItemClick={onItemClick}\n        />\n      </div>\n      {insertAfter && <div className={classNames(styles.insertion, styles.insertionAfter)} />}\n    </div>\n  );\n};\n\nexport const SortableAttachments = forwardRef<HTMLDivElement, SortableAttachmentsProps>(\n  ({ items, onRemove, onRetry, onItemClick, onReorder, className, testId }, ref) => {\n    const [activeId, setActiveId] = useState<null | string>(null);\n    const [insertionIndex, setInsertionIndex] = useState(-1);\n    // Read in handlers that must not be re-created as the pointer moves.\n    const insertionRef = useRef(-1);\n    insertionRef.current = insertionIndex;\n    const isKeyboardDragRef = useRef(false);\n    const slotMidpointsRef = useRef<number[]>([]);\n\n    // The host's ref drives its scroll arrows; this one measures the strip mid-drag.\n    const scrollerRef = useRef<HTMLDivElement | null>(null);\n    const setScrollerRef = (node: HTMLDivElement | null) => {\n      scrollerRef.current = node;\n      if (typeof ref === 'function') ref(node);\n      else if (ref) {\n        const forwardedRef = ref as MutableRefObject<HTMLDivElement | null>;\n        forwardedRef.current = node;\n      }\n    };\n\n    const sensors = useSensors(\n      // A small threshold keeps Remove and the lightbox clickable on a plain press.\n      useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),\n      useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })\n    );\n\n    const ids = items.map(item => String(item.id));\n    const activeIndex = activeId ? ids.indexOf(activeId) : -1;\n    const activeItem = items.find(item => String(item.id) === activeId);\n    const nameOf = (index: number) =>\n      utils.getFileNameWithExtensionFromPath(items[index]?.name ?? 'file');\n\n    const setInsertion = (next: number) => {\n      insertionRef.current = next;\n      setInsertionIndex(next);\n    };\n\n    useEffect(() => () => setDragActive(false), []);\n\n    /** A landing position (0…n-1) expressed as the boundary the insertion bar draws at. */\n    const positionToBoundary = (position: number) =>\n      position === activeIndex ? -1 : position + (position > activeIndex ? 1 : 0);\n\n    // Compare against DOM midpoints captured at drag start: dnd-kit's rects follow its virtual\n    // sorted order, which drifts from the screen once transforms are suppressed.\n    const resolveInsertion = ({ delta, activatorEvent }: DragMoveEvent) => {\n      const startX = (activatorEvent as PointerEvent)?.clientX;\n      const scroller = scrollerRef.current;\n      if (activeIndex < 0 || !scroller || typeof startX !== 'number' || Number.isNaN(startX)) {\n        return insertionRef.current;\n      }\n\n      const pointerX = startX + delta.x + scroller.scrollLeft;\n      const boundary = slotMidpointsRef.current.filter(midpoint => pointerX >= midpoint).length;\n\n      // Dropping either side of where it already sits is a no-op.\n      return boundary === activeIndex || boundary === activeIndex + 1 ? -1 : boundary;\n    };\n\n    const positionOf = (boundary: number) => (boundary > activeIndex ? boundary - 1 : boundary) + 1;\n\n    const announcements: Announcements = {\n      onDragStart: ({ active }) => {\n        const index = ids.indexOf(String(active.id));\n\n        return `Grabbed ${nameOf(index)}. Position ${index + 1} of ${ids.length}.`;\n      },\n      onDragOver: () =>\n        insertionRef.current < 0\n          ? `${nameOf(activeIndex)} is back at position ${activeIndex + 1} of ${ids.length}.`\n          : `${nameOf(activeIndex)} will move to position ${positionOf(insertionRef.current)} of ${\n              ids.length\n            }.`,\n      onDragEnd: () =>\n        insertionRef.current < 0\n          ? `${nameOf(activeIndex)} was dropped in place.`\n          : `${nameOf(activeIndex)} was dropped at position ${positionOf(\n              insertionRef.current\n            )} of ${ids.length}.`,\n      onDragCancel: () => `Reordering cancelled. ${nameOf(activeIndex)} returned to its position.`,\n    };\n\n    // Step by position instead of reading dnd-kit's `over`: its keyboard coordinates come from\n    // rect geometry, so a wide tile can clear several narrow ones in one press and pin `over`\n    // to the last of them.\n    useEffect(() => {\n      if (activeIndex < 0 || !isKeyboardDragRef.current) return undefined;\n\n      let position = activeIndex;\n      const onKeyDown = (event: globalThis.KeyboardEvent) => {\n        const step = { ArrowRight: 1, ArrowLeft: -1 }[event.key];\n        if (!step) return;\n\n        position = Math.min(items.length - 1, Math.max(0, position + step));\n        setInsertion(positionToBoundary(position));\n      };\n\n      document.addEventListener('keydown', onKeyDown);\n\n      return () => document.removeEventListener('keydown', onKeyDown);\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [activeIndex, items.length]);\n\n    const handleDragStart = ({ active, activatorEvent }: DragStartEvent) => {\n      isKeyboardDragRef.current = activatorEvent instanceof globalThis.KeyboardEvent;\n      const scroller = scrollerRef.current;\n      slotMidpointsRef.current = scroller\n        ? Array.from(scroller.children).map(slot => {\n            const rect = slot.getBoundingClientRect();\n\n            return rect.left + rect.width / 2 + scroller.scrollLeft;\n          })\n        : [];\n      setActiveId(String(active.id));\n      setInsertion(-1);\n      setDragActive(true);\n    };\n\n    const handleDragMove = (event: DragMoveEvent) => setInsertion(resolveInsertion(event));\n\n    const handleDragEnd = () => {\n      // The bar is the source of truth, not `over` — a keyboard drag can move the target\n      // without `over` following, and dropping in a gap leaves `over` null.\n      const boundary = insertionRef.current;\n      if (boundary >= 0 && activeIndex >= 0) {\n        onReorder(moveToBoundary(ids, activeIndex, boundary));\n      }\n\n      setActiveId(null);\n      setInsertion(-1);\n      slotMidpointsRef.current = [];\n      clearDragActive();\n    };\n\n    const handleDragCancel = () => {\n      setActiveId(null);\n      setInsertion(-1);\n      slotMidpointsRef.current = [];\n      clearDragActive();\n    };\n\n    return (\n      <DndContext\n        sensors={sensors}\n        accessibility={{ announcements }}\n        // pointerWithin targets the tile under the cursor; closestCenter covers the gaps\n        // between tiles and keyboard drags, where there is no pointer.\n        collisionDetection={args => {\n          const within = pointerWithin(args);\n\n          return within.length ? within : closestCenter(args);\n        }}\n        onDragStart={handleDragStart}\n        onDragMove={handleDragMove}\n        onDragOver={handleDragMove}\n        onDragEnd={handleDragEnd}\n        onDragCancel={handleDragCancel}\n      >\n        <SortableContext items={ids} strategy={horizontalListSortingStrategy}>\n          <div\n            ref={setScrollerRef}\n            data-testid={testId}\n            className={classNames(styles.scroller, className)}\n            {...(activeId ? { [DRAGGING_ATTRIBUTE]: 'true' } : {})}\n          >\n            {items.map((item, index) => (\n              <SortableSlot\n                key={item.id}\n                item={item}\n                onRemove={onRemove}\n                onRetry={onRetry}\n                onItemClick={onItemClick}\n                isFirst={index === 0}\n                insertBefore={insertionIndex === index}\n                insertAfter={index === items.length - 1 && insertionIndex === items.length}\n              />\n            ))}\n          </div>\n        </SortableContext>\n\n        {/* Portalled so no ancestor transform/backdrop-filter can clip the fixed overlay. */}\n        {createPortal(\n          <DragOverlay dropAnimation={null} zIndex={DRAG_GHOST_Z_INDEX}>\n            {activeItem && (\n              <div className={styles.dragGhost} {...{ [DRAGGING_ATTRIBUTE]: 'true' }}>\n                <AttachmentTile item={activeItem} />\n                <div className={styles.dragGhostHandle}>\n                  <ButtonIcon size=\"xs\" type=\"tertiaryBg\" testId=\"attachment-drag-handle\">\n                    <DragIcon size=\"small\" />\n                  </ButtonIcon>\n                </div>\n              </div>\n            )}\n          </DragOverlay>,\n          document.body\n        )}\n      </DndContext>\n    );\n  }\n);\n"],"names":["setDragActive","isActive","document","body","toggleAttribute","DRAGGING_ATTRIBUTE","clearDragActive","setTimeout","SortableSlot","_ref","item","onRemove","onRetry","onItemClick","insertBefore","insertAfter","isFirst","_useSortable","useSortable","id","String","attributes","listeners","setNodeRef","isDragging","_jsxs","_objectSpread","ref","className","classNames","styles","slot","slotDragging","onKeyDown","event","_listeners$onKeyDown","key","preventDefault","children","_jsx","insertion","insertionEdge","insertionBefore","slotContent","AttachmentTile","insertionAfter","SortableAttachments","forwardRef","_ref2","items","onReorder","testId","useState","_useState2","_slicedToArray","_useState","activeId","setActiveId","_useState3","_useState4","insertionIndex","setInsertionIndex","insertionRef","useRef","current","isKeyboardDragRef","slotMidpointsRef","scrollerRef","sensors","useSensors","useSensor","PointerSensor","activationConstraint","distance","KeyboardSensor","coordinateGetter","sortableKeyboardCoordinates","ids","map","activeIndex","indexOf","activeItem","find","nameOf","index","_items$index$name","_items$index","utils","getFileNameWithExtensionFromPath","name","setInsertion","next","useEffect","positionOf","boundary","announcements","onDragStart","_ref4","active","concat","length","onDragOver","onDragEnd","onDragCancel","position","step","ArrowRight","ArrowLeft","Math","min","max","positionToBoundary","addEventListener","removeEventListener","handleDragMove","_ref3","delta","activatorEvent","startX","clientX","scroller","Number","isNaN","pointerX","x","scrollLeft","filter","midpoint","resolveInsertion","DndContext","accessibility","collisionDetection","args","within","pointerWithin","closestCenter","_ref5","globalThis","KeyboardEvent","Array","from","rect","getBoundingClientRect","left","width","onDragMove","insertAt","_next$splice","moved","list","splice","SortableContext","strategy","horizontalListSortingStrategy","node","createPortal","DragOverlay","dropAnimation","zIndex","dragGhost","dragGhostHandle","ButtonIcon","size","type","DragIcon"],"mappings":"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"}