@strapi/upload 5.51.0 → 5.51.2

package/dist/admin/components/AssetCard/VideoPreview.js

@@ -16,7 +16,7 @@ const VideoPreview = ({ url, mime, onLoadDuration = ()=>{}, alt, ...props })=>{
             canvas.width = video.videoWidth;
             canvas.getContext('2d')?.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
             video.replaceWith(canvas);
-            onLoadDuration && onLoadDuration(video.duration);
+            onLoadDuration?.(video.duration);
         }
     };
     const handleThumbnailVisibility = (e)=>{

package/dist/admin/components/AssetCard/VideoPreview.js.map

@@ -1 +1 @@
-{"version":3,"file":"VideoPreview.js","sources":["../../../../admin/src/components/AssetCard/VideoPreview.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, VisuallyHidden } from '@strapi/design-system';\n\n// According to MDN\n// https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/readyState#value\nconst HAVE_FUTURE_DATA = 3;\n\ninterface VideoPreviewProps {\n  alt: string;\n  url: string;\n  mime: string;\n  onLoadDuration?: (duration?: number) => void;\n  size?: 'S' | 'M';\n}\n\nexport const VideoPreview = ({\n  url,\n  mime,\n  onLoadDuration = () => {},\n  alt,\n  ...props\n}: VideoPreviewProps) => {\n  const handleTimeUpdate = (e: React.SyntheticEvent<HTMLVideoElement>) => {\n    if (e.currentTarget.currentTime > 0) {\n      const video = e.currentTarget;\n      const canvas = document.createElement('canvas');\n\n      canvas.height = video.videoHeight;\n      canvas.width = video.videoWidth;\n      canvas.getContext('2d')?.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);\n\n      video.replaceWith(canvas);\n      onLoadDuration && onLoadDuration(video.duration);\n    }\n  };\n\n  const handleThumbnailVisibility = (e: React.SyntheticEvent<HTMLVideoElement>) => {\n    const video = e.currentTarget;\n\n    if (video.readyState < HAVE_FUTURE_DATA) return;\n\n    video.play();\n  };\n\n  return (\n    <Box tag=\"figure\" key={url} {...props}>\n      <video\n        muted\n        onLoadedData={handleThumbnailVisibility}\n        src={url}\n        crossOrigin=\"anonymous\"\n        onTimeUpdate={handleTimeUpdate}\n      >\n        <source type={mime} />\n      </video>\n      <VisuallyHidden tag=\"figcaption\">{alt}</VisuallyHidden>\n    </Box>\n  );\n};\n"],"names":["HAVE_FUTURE_DATA","VideoPreview","url","mime","onLoadDuration","alt","props","handleTimeUpdate","e","currentTarget","currentTime","video","canvas","document","createElement","height","videoHeight","width","videoWidth","getContext","drawImage","replaceWith","duration","handleThumbnailVisibility","readyState","play","_jsxs","Box","tag","_jsx","muted","onLoadedData","src","crossOrigin","onTimeUpdate","source","type","VisuallyHidden"],"mappings":";;;;;;AAIA;AACA;AACA,MAAMA,gBAAAA,GAAmB,CAAA;AAUlB,MAAMC,YAAAA,GAAe,CAAC,EAC3BC,GAAG,EACHC,IAAI,EACJC,cAAAA,GAAiB,KAAO,CAAC,EACzBC,GAAG,EACH,GAAGC,KAAAA,EACe,GAAA;AAClB,IAAA,MAAMC,mBAAmB,CAACC,CAAAA,GAAAA;AACxB,QAAA,IAAIA,CAAAA,CAAEC,aAAa,CAACC,WAAW,GAAG,CAAA,EAAG;YACnC,MAAMC,KAAAA,GAAQH,EAAEC,aAAa;YAC7B,MAAMG,MAAAA,GAASC,QAAAA,CAASC,aAAa,CAAC,QAAA,CAAA;YAEtCF,MAAAA,CAAOG,MAAM,GAAGJ,KAAAA,CAAMK,WAAW;YACjCJ,MAAAA,CAAOK,KAAK,GAAGN,KAAAA,CAAMO,UAAU;YAC/BN,MAAAA,CAAOO,UAAU,CAAC,IAAA,CAAA,EAAOC,SAAAA,CAAUT,KAAAA,EAAO,CAAA,EAAG,CAAA,EAAGA,KAAAA,CAAMO,UAAU,EAAEP,KAAAA,CAAMK,WAAW,CAAA;AAEnFL,YAAAA,KAAAA,CAAMU,WAAW,CAACT,MAAAA,CAAAA;YAClBR,cAAAA,IAAkBA,cAAAA,CAAeO,MAAMW,QAAQ,CAAA;AACjD,QAAA;AACF,IAAA,CAAA;AAEA,IAAA,MAAMC,4BAA4B,CAACf,CAAAA,GAAAA;QACjC,MAAMG,KAAAA,GAAQH,EAAEC,aAAa;QAE7B,IAAIE,KAAAA,CAAMa,UAAU,GAAGxB,gBAAAA,EAAkB;AAEzCW,QAAAA,KAAAA,CAAMc,IAAI,EAAA;AACZ,IAAA,CAAA;AAEA,IAAA,qBACEC,eAAA,CAACC,gBAAAA,EAAAA;QAAIC,GAAAA,EAAI,QAAA;AAAoB,QAAA,GAAGtB,KAAK;;0BACnCuB,cAAA,CAAClB,OAAAA,EAAAA;gBACCmB,KAAK,EAAA,IAAA;gBACLC,YAAAA,EAAcR,yBAAAA;gBACdS,GAAAA,EAAK9B,GAAAA;gBACL+B,WAAAA,EAAY,WAAA;gBACZC,YAAAA,EAAc3B,gBAAAA;AAEd,gBAAA,QAAA,gBAAAsB,cAAA,CAACM,QAAAA,EAAAA;oBAAOC,IAAAA,EAAMjC;;;0BAEhB0B,cAAA,CAACQ,2BAAAA,EAAAA;gBAAeT,GAAAA,EAAI,YAAA;AAAcvB,gBAAAA,QAAAA,EAAAA;;;AAVbH,KAAAA,EAAAA,GAAAA,CAAAA;AAa3B;;;;"}
+{"version":3,"file":"VideoPreview.js","sources":["../../../../admin/src/components/AssetCard/VideoPreview.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, VisuallyHidden } from '@strapi/design-system';\n\n// According to MDN\n// https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/readyState#value\nconst HAVE_FUTURE_DATA = 3;\n\ninterface VideoPreviewProps {\n  alt: string;\n  url: string;\n  mime: string;\n  onLoadDuration?: (duration?: number) => void;\n  size?: 'S' | 'M';\n}\n\nexport const VideoPreview = ({\n  url,\n  mime,\n  onLoadDuration = () => {},\n  alt,\n  ...props\n}: VideoPreviewProps) => {\n  const handleTimeUpdate = (e: React.SyntheticEvent<HTMLVideoElement>) => {\n    if (e.currentTarget.currentTime > 0) {\n      const video = e.currentTarget;\n      const canvas = document.createElement('canvas');\n\n      canvas.height = video.videoHeight;\n      canvas.width = video.videoWidth;\n      canvas.getContext('2d')?.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);\n\n      video.replaceWith(canvas);\n      onLoadDuration?.(video.duration);\n    }\n  };\n\n  const handleThumbnailVisibility = (e: React.SyntheticEvent<HTMLVideoElement>) => {\n    const video = e.currentTarget;\n\n    if (video.readyState < HAVE_FUTURE_DATA) return;\n\n    video.play();\n  };\n\n  return (\n    <Box tag=\"figure\" key={url} {...props}>\n      <video\n        muted\n        onLoadedData={handleThumbnailVisibility}\n        src={url}\n        crossOrigin=\"anonymous\"\n        onTimeUpdate={handleTimeUpdate}\n      >\n        <source type={mime} />\n      </video>\n      <VisuallyHidden tag=\"figcaption\">{alt}</VisuallyHidden>\n    </Box>\n  );\n};\n"],"names":["HAVE_FUTURE_DATA","VideoPreview","url","mime","onLoadDuration","alt","props","handleTimeUpdate","e","currentTarget","currentTime","video","canvas","document","createElement","height","videoHeight","width","videoWidth","getContext","drawImage","replaceWith","duration","handleThumbnailVisibility","readyState","play","_jsxs","Box","tag","_jsx","muted","onLoadedData","src","crossOrigin","onTimeUpdate","source","type","VisuallyHidden"],"mappings":";;;;;;AAIA;AACA;AACA,MAAMA,gBAAAA,GAAmB,CAAA;AAUlB,MAAMC,YAAAA,GAAe,CAAC,EAC3BC,GAAG,EACHC,IAAI,EACJC,cAAAA,GAAiB,KAAO,CAAC,EACzBC,GAAG,EACH,GAAGC,KAAAA,EACe,GAAA;AAClB,IAAA,MAAMC,mBAAmB,CAACC,CAAAA,GAAAA;AACxB,QAAA,IAAIA,CAAAA,CAAEC,aAAa,CAACC,WAAW,GAAG,CAAA,EAAG;YACnC,MAAMC,KAAAA,GAAQH,EAAEC,aAAa;YAC7B,MAAMG,MAAAA,GAASC,QAAAA,CAASC,aAAa,CAAC,QAAA,CAAA;YAEtCF,MAAAA,CAAOG,MAAM,GAAGJ,KAAAA,CAAMK,WAAW;YACjCJ,MAAAA,CAAOK,KAAK,GAAGN,KAAAA,CAAMO,UAAU;YAC/BN,MAAAA,CAAOO,UAAU,CAAC,IAAA,CAAA,EAAOC,SAAAA,CAAUT,KAAAA,EAAO,CAAA,EAAG,CAAA,EAAGA,KAAAA,CAAMO,UAAU,EAAEP,KAAAA,CAAMK,WAAW,CAAA;AAEnFL,YAAAA,KAAAA,CAAMU,WAAW,CAACT,MAAAA,CAAAA;AAClBR,YAAAA,cAAAA,GAAiBO,MAAMW,QAAQ,CAAA;AACjC,QAAA;AACF,IAAA,CAAA;AAEA,IAAA,MAAMC,4BAA4B,CAACf,CAAAA,GAAAA;QACjC,MAAMG,KAAAA,GAAQH,EAAEC,aAAa;QAE7B,IAAIE,KAAAA,CAAMa,UAAU,GAAGxB,gBAAAA,EAAkB;AAEzCW,QAAAA,KAAAA,CAAMc,IAAI,EAAA;AACZ,IAAA,CAAA;AAEA,IAAA,qBACEC,eAAA,CAACC,gBAAAA,EAAAA;QAAIC,GAAAA,EAAI,QAAA;AAAoB,QAAA,GAAGtB,KAAK;;0BACnCuB,cAAA,CAAClB,OAAAA,EAAAA;gBACCmB,KAAK,EAAA,IAAA;gBACLC,YAAAA,EAAcR,yBAAAA;gBACdS,GAAAA,EAAK9B,GAAAA;gBACL+B,WAAAA,EAAY,WAAA;gBACZC,YAAAA,EAAc3B,gBAAAA;AAEd,gBAAA,QAAA,gBAAAsB,cAAA,CAACM,QAAAA,EAAAA;oBAAOC,IAAAA,EAAMjC;;;0BAEhB0B,cAAA,CAACQ,2BAAAA,EAAAA;gBAAeT,GAAAA,EAAI,YAAA;AAAcvB,gBAAAA,QAAAA,EAAAA;;;AAVbH,KAAAA,EAAAA,GAAAA,CAAAA;AAa3B;;;;"}

package/dist/admin/components/AssetCard/VideoPreview.mjs

@@ -14,7 +14,7 @@ const VideoPreview = ({ url, mime, onLoadDuration = ()=>{}, alt, ...props })=>{
             canvas.width = video.videoWidth;
             canvas.getContext('2d')?.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
             video.replaceWith(canvas);
-            onLoadDuration && onLoadDuration(video.duration);
+            onLoadDuration?.(video.duration);
         }
     };
     const handleThumbnailVisibility = (e)=>{

package/dist/admin/components/AssetCard/VideoPreview.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VideoPreview.mjs","sources":["../../../../admin/src/components/AssetCard/VideoPreview.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, VisuallyHidden } from '@strapi/design-system';\n\n// According to MDN\n// https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/readyState#value\nconst HAVE_FUTURE_DATA = 3;\n\ninterface VideoPreviewProps {\n  alt: string;\n  url: string;\n  mime: string;\n  onLoadDuration?: (duration?: number) => void;\n  size?: 'S' | 'M';\n}\n\nexport const VideoPreview = ({\n  url,\n  mime,\n  onLoadDuration = () => {},\n  alt,\n  ...props\n}: VideoPreviewProps) => {\n  const handleTimeUpdate = (e: React.SyntheticEvent<HTMLVideoElement>) => {\n    if (e.currentTarget.currentTime > 0) {\n      const video = e.currentTarget;\n      const canvas = document.createElement('canvas');\n\n      canvas.height = video.videoHeight;\n      canvas.width = video.videoWidth;\n      canvas.getContext('2d')?.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);\n\n      video.replaceWith(canvas);\n      onLoadDuration && onLoadDuration(video.duration);\n    }\n  };\n\n  const handleThumbnailVisibility = (e: React.SyntheticEvent<HTMLVideoElement>) => {\n    const video = e.currentTarget;\n\n    if (video.readyState < HAVE_FUTURE_DATA) return;\n\n    video.play();\n  };\n\n  return (\n    <Box tag=\"figure\" key={url} {...props}>\n      <video\n        muted\n        onLoadedData={handleThumbnailVisibility}\n        src={url}\n        crossOrigin=\"anonymous\"\n        onTimeUpdate={handleTimeUpdate}\n      >\n        <source type={mime} />\n      </video>\n      <VisuallyHidden tag=\"figcaption\">{alt}</VisuallyHidden>\n    </Box>\n  );\n};\n"],"names":["HAVE_FUTURE_DATA","VideoPreview","url","mime","onLoadDuration","alt","props","handleTimeUpdate","e","currentTarget","currentTime","video","canvas","document","createElement","height","videoHeight","width","videoWidth","getContext","drawImage","replaceWith","duration","handleThumbnailVisibility","readyState","play","_jsxs","Box","tag","_jsx","muted","onLoadedData","src","crossOrigin","onTimeUpdate","source","type","VisuallyHidden"],"mappings":";;;;AAIA;AACA;AACA,MAAMA,gBAAAA,GAAmB,CAAA;AAUlB,MAAMC,YAAAA,GAAe,CAAC,EAC3BC,GAAG,EACHC,IAAI,EACJC,cAAAA,GAAiB,KAAO,CAAC,EACzBC,GAAG,EACH,GAAGC,KAAAA,EACe,GAAA;AAClB,IAAA,MAAMC,mBAAmB,CAACC,CAAAA,GAAAA;AACxB,QAAA,IAAIA,CAAAA,CAAEC,aAAa,CAACC,WAAW,GAAG,CAAA,EAAG;YACnC,MAAMC,KAAAA,GAAQH,EAAEC,aAAa;YAC7B,MAAMG,MAAAA,GAASC,QAAAA,CAASC,aAAa,CAAC,QAAA,CAAA;YAEtCF,MAAAA,CAAOG,MAAM,GAAGJ,KAAAA,CAAMK,WAAW;YACjCJ,MAAAA,CAAOK,KAAK,GAAGN,KAAAA,CAAMO,UAAU;YAC/BN,MAAAA,CAAOO,UAAU,CAAC,IAAA,CAAA,EAAOC,SAAAA,CAAUT,KAAAA,EAAO,CAAA,EAAG,CAAA,EAAGA,KAAAA,CAAMO,UAAU,EAAEP,KAAAA,CAAMK,WAAW,CAAA;AAEnFL,YAAAA,KAAAA,CAAMU,WAAW,CAACT,MAAAA,CAAAA;YAClBR,cAAAA,IAAkBA,cAAAA,CAAeO,MAAMW,QAAQ,CAAA;AACjD,QAAA;AACF,IAAA,CAAA;AAEA,IAAA,MAAMC,4BAA4B,CAACf,CAAAA,GAAAA;QACjC,MAAMG,KAAAA,GAAQH,EAAEC,aAAa;QAE7B,IAAIE,KAAAA,CAAMa,UAAU,GAAGxB,gBAAAA,EAAkB;AAEzCW,QAAAA,KAAAA,CAAMc,IAAI,EAAA;AACZ,IAAA,CAAA;AAEA,IAAA,qBACEC,IAAA,CAACC,GAAAA,EAAAA;QAAIC,GAAAA,EAAI,QAAA;AAAoB,QAAA,GAAGtB,KAAK;;0BACnCuB,GAAA,CAAClB,OAAAA,EAAAA;gBACCmB,KAAK,EAAA,IAAA;gBACLC,YAAAA,EAAcR,yBAAAA;gBACdS,GAAAA,EAAK9B,GAAAA;gBACL+B,WAAAA,EAAY,WAAA;gBACZC,YAAAA,EAAc3B,gBAAAA;AAEd,gBAAA,QAAA,gBAAAsB,GAAA,CAACM,QAAAA,EAAAA;oBAAOC,IAAAA,EAAMjC;;;0BAEhB0B,GAAA,CAACQ,cAAAA,EAAAA;gBAAeT,GAAAA,EAAI,YAAA;AAAcvB,gBAAAA,QAAAA,EAAAA;;;AAVbH,KAAAA,EAAAA,GAAAA,CAAAA;AAa3B;;;;"}
+{"version":3,"file":"VideoPreview.mjs","sources":["../../../../admin/src/components/AssetCard/VideoPreview.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, VisuallyHidden } from '@strapi/design-system';\n\n// According to MDN\n// https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/readyState#value\nconst HAVE_FUTURE_DATA = 3;\n\ninterface VideoPreviewProps {\n  alt: string;\n  url: string;\n  mime: string;\n  onLoadDuration?: (duration?: number) => void;\n  size?: 'S' | 'M';\n}\n\nexport const VideoPreview = ({\n  url,\n  mime,\n  onLoadDuration = () => {},\n  alt,\n  ...props\n}: VideoPreviewProps) => {\n  const handleTimeUpdate = (e: React.SyntheticEvent<HTMLVideoElement>) => {\n    if (e.currentTarget.currentTime > 0) {\n      const video = e.currentTarget;\n      const canvas = document.createElement('canvas');\n\n      canvas.height = video.videoHeight;\n      canvas.width = video.videoWidth;\n      canvas.getContext('2d')?.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);\n\n      video.replaceWith(canvas);\n      onLoadDuration?.(video.duration);\n    }\n  };\n\n  const handleThumbnailVisibility = (e: React.SyntheticEvent<HTMLVideoElement>) => {\n    const video = e.currentTarget;\n\n    if (video.readyState < HAVE_FUTURE_DATA) return;\n\n    video.play();\n  };\n\n  return (\n    <Box tag=\"figure\" key={url} {...props}>\n      <video\n        muted\n        onLoadedData={handleThumbnailVisibility}\n        src={url}\n        crossOrigin=\"anonymous\"\n        onTimeUpdate={handleTimeUpdate}\n      >\n        <source type={mime} />\n      </video>\n      <VisuallyHidden tag=\"figcaption\">{alt}</VisuallyHidden>\n    </Box>\n  );\n};\n"],"names":["HAVE_FUTURE_DATA","VideoPreview","url","mime","onLoadDuration","alt","props","handleTimeUpdate","e","currentTarget","currentTime","video","canvas","document","createElement","height","videoHeight","width","videoWidth","getContext","drawImage","replaceWith","duration","handleThumbnailVisibility","readyState","play","_jsxs","Box","tag","_jsx","muted","onLoadedData","src","crossOrigin","onTimeUpdate","source","type","VisuallyHidden"],"mappings":";;;;AAIA;AACA;AACA,MAAMA,gBAAAA,GAAmB,CAAA;AAUlB,MAAMC,YAAAA,GAAe,CAAC,EAC3BC,GAAG,EACHC,IAAI,EACJC,cAAAA,GAAiB,KAAO,CAAC,EACzBC,GAAG,EACH,GAAGC,KAAAA,EACe,GAAA;AAClB,IAAA,MAAMC,mBAAmB,CAACC,CAAAA,GAAAA;AACxB,QAAA,IAAIA,CAAAA,CAAEC,aAAa,CAACC,WAAW,GAAG,CAAA,EAAG;YACnC,MAAMC,KAAAA,GAAQH,EAAEC,aAAa;YAC7B,MAAMG,MAAAA,GAASC,QAAAA,CAASC,aAAa,CAAC,QAAA,CAAA;YAEtCF,MAAAA,CAAOG,MAAM,GAAGJ,KAAAA,CAAMK,WAAW;YACjCJ,MAAAA,CAAOK,KAAK,GAAGN,KAAAA,CAAMO,UAAU;YAC/BN,MAAAA,CAAOO,UAAU,CAAC,IAAA,CAAA,EAAOC,SAAAA,CAAUT,KAAAA,EAAO,CAAA,EAAG,CAAA,EAAGA,KAAAA,CAAMO,UAAU,EAAEP,KAAAA,CAAMK,WAAW,CAAA;AAEnFL,YAAAA,KAAAA,CAAMU,WAAW,CAACT,MAAAA,CAAAA;AAClBR,YAAAA,cAAAA,GAAiBO,MAAMW,QAAQ,CAAA;AACjC,QAAA;AACF,IAAA,CAAA;AAEA,IAAA,MAAMC,4BAA4B,CAACf,CAAAA,GAAAA;QACjC,MAAMG,KAAAA,GAAQH,EAAEC,aAAa;QAE7B,IAAIE,KAAAA,CAAMa,UAAU,GAAGxB,gBAAAA,EAAkB;AAEzCW,QAAAA,KAAAA,CAAMc,IAAI,EAAA;AACZ,IAAA,CAAA;AAEA,IAAA,qBACEC,IAAA,CAACC,GAAAA,EAAAA;QAAIC,GAAAA,EAAI,QAAA;AAAoB,QAAA,GAAGtB,KAAK;;0BACnCuB,GAAA,CAAClB,OAAAA,EAAAA;gBACCmB,KAAK,EAAA,IAAA;gBACLC,YAAAA,EAAcR,yBAAAA;gBACdS,GAAAA,EAAK9B,GAAAA;gBACL+B,WAAAA,EAAY,WAAA;gBACZC,YAAAA,EAAc3B,gBAAAA;AAEd,gBAAA,QAAA,gBAAAsB,GAAA,CAACM,QAAAA,EAAAA;oBAAOC,IAAAA,EAAMjC;;;0BAEhB0B,GAAA,CAACQ,cAAAA,EAAAA;gBAAeT,GAAAA,EAAI,YAAA;AAAcvB,gBAAAA,QAAAA,EAAAA;;;AAVbH,KAAAA,EAAAA,GAAAA,CAAAA;AAa3B;;;;"}

package/dist/admin/components/TableList/TableList.js

@@ -19,7 +19,7 @@ const TableList = ({ assetCount = 0, folderCount = 0, indeterminate = false, onC
     const handleClickSort = (isSorted, name)=>{
         const nextSortOrder = isSorted && sortOrder === 'ASC' ? 'DESC' : 'ASC';
         const nextSort = `${name}:${nextSortOrder}`;
-        onChangeSort && onChangeSort(nextSort);
+        onChangeSort?.(nextSort);
     };
     return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Table, {
         colCount: constants.tableHeaders.length + 2,

package/dist/admin/components/TableList/TableList.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableList.js","sources":["../../../../admin/src/components/TableList/TableList.tsx"],"sourcesContent":["// TODO: find a better naming convention for the file that was an index file before\nimport {\n  Checkbox,\n  IconButton,\n  Table,\n  Th,\n  Thead,\n  Tooltip,\n  Tr,\n  Typography,\n  VisuallyHidden,\n} from '@strapi/design-system';\nimport { CaretDown, CaretUp } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\n\nimport { tableHeaders } from '../../constants';\nimport { getTrad } from '../../utils';\n\nimport { TableRows } from './TableRows';\n\nimport type { File } from '../../../../shared/contracts/files';\nimport type { Folder } from '../../../../shared/contracts/folders';\nimport type { AllowedTypes } from '../AssetCard/AssetCard';\n\nexport interface FileRow extends File {\n  folderURL?: string;\n  isSelectable?: boolean;\n  type?: string;\n}\n\nexport interface FolderRow extends Folder {\n  folderURL?: string;\n  isSelectable?: boolean;\n  type?: string;\n}\n\nexport interface TableListProps {\n  isFolderSelectionAllowed?: boolean;\n  allowedTypes?: AllowedTypes[];\n  assetCount?: number;\n  folderCount?: number;\n  indeterminate?: boolean;\n  onChangeSort?: ((sortQuery: string) => void) | null;\n  onChangeFolder?: ((folderId: number, folderPath?: string) => void) | null;\n  onEditAsset?: ((asset: FileRow) => void) | null;\n  onEditFolder?: ((folder: FolderRow) => void) | null;\n  onSelectAll: (checked: boolean | string, rows?: FolderRow[] | FileRow[]) => void;\n  onSelectOne: (element: FileRow | FolderRow) => void;\n  rows?: FileRow[] | FolderRow[];\n  selected?: FileRow[] | FolderRow[];\n  shouldDisableBulkSelect?: boolean;\n  sortQuery?: string;\n}\n\nexport const TableList = ({\n  assetCount = 0,\n  folderCount = 0,\n  indeterminate = false,\n  onChangeSort = null,\n  onChangeFolder = null,\n  onEditAsset = null,\n  onEditFolder = null,\n  onSelectAll,\n  onSelectOne,\n  rows = [],\n  selected = [],\n  shouldDisableBulkSelect = false,\n  sortQuery = '',\n}: TableListProps) => {\n  const { formatMessage } = useIntl();\n  const [sortBy, sortOrder] = sortQuery.split(':');\n\n  const handleClickSort = (isSorted: boolean, name: string) => {\n    const nextSortOrder = isSorted && sortOrder === 'ASC' ? 'DESC' : 'ASC';\n    const nextSort = `${name}:${nextSortOrder}`;\n\n    onChangeSort && onChangeSort(nextSort);\n  };\n\n  return (\n    <Table colCount={tableHeaders.length + 2} rowCount={assetCount + folderCount + 1}>\n      <Thead>\n        <Tr>\n          <Th>\n            <Checkbox\n              aria-label={formatMessage({\n                id: getTrad('bulk.select.label'),\n                defaultMessage: 'Select all folders & assets',\n              })}\n              disabled={shouldDisableBulkSelect}\n              onCheckedChange={(checked) => onSelectAll(checked, rows)}\n              checked={\n                indeterminate && !shouldDisableBulkSelect\n                  ? 'indeterminate'\n                  : (assetCount > 0 || folderCount > 0) &&\n                    selected.length === assetCount + folderCount\n              }\n            />\n          </Th>\n          {tableHeaders.map(({ metadatas: { label, isSortable }, name, key }) => {\n            const isSorted = sortBy === name;\n            const isUp = sortOrder === 'ASC';\n            const tableHeaderLabel = formatMessage(label);\n            const sortLabel = formatMessage(\n              { id: 'list.table.header.sort', defaultMessage: 'Sort on {label}' },\n              { label: tableHeaderLabel }\n            );\n\n            return (\n              <Th\n                action={\n                  isSorted && (\n                    <IconButton\n                      label={sortLabel}\n                      onClick={() => handleClickSort(isSorted, name)}\n                      variant=\"ghost\"\n                    >\n                      {isUp ? <CaretUp /> : <CaretDown />}\n                    </IconButton>\n                  )\n                }\n                key={key}\n              >\n                <Tooltip label={isSortable ? sortLabel : tableHeaderLabel}>\n                  {isSortable ? (\n                    <Typography\n                      onClick={() => handleClickSort(isSorted, name)}\n                      tag={isSorted ? 'span' : 'button'}\n                      textColor=\"neutral600\"\n                      variant=\"sigma\"\n                    >\n                      {tableHeaderLabel}\n                    </Typography>\n                  ) : (\n                    <Typography textColor=\"neutral600\" variant=\"sigma\">\n                      {tableHeaderLabel}\n                    </Typography>\n                  )}\n                </Tooltip>\n              </Th>\n            );\n          })}\n          <Th>\n            <VisuallyHidden>\n              {formatMessage({\n                id: getTrad('list.table.header.actions'),\n                defaultMessage: 'actions',\n              })}\n            </VisuallyHidden>\n          </Th>\n        </Tr>\n      </Thead>\n      <TableRows\n        onChangeFolder={onChangeFolder}\n        onEditAsset={onEditAsset!}\n        onEditFolder={onEditFolder!}\n        rows={rows}\n        onSelectOne={onSelectOne}\n        selected={selected}\n      />\n    </Table>\n  );\n};\n"],"names":["TableList","assetCount","folderCount","indeterminate","onChangeSort","onChangeFolder","onEditAsset","onEditFolder","onSelectAll","onSelectOne","rows","selected","shouldDisableBulkSelect","sortQuery","formatMessage","useIntl","sortBy","sortOrder","split","handleClickSort","isSorted","name","nextSortOrder","nextSort","_jsxs","Table","colCount","tableHeaders","length","rowCount","_jsx","Thead","Tr","Th","Checkbox","aria-label","id","getTrad","defaultMessage","disabled","onCheckedChange","checked","map","metadatas","label","isSortable","key","isUp","tableHeaderLabel","sortLabel","action","IconButton","onClick","variant","CaretUp","CaretDown","Tooltip","Typography","tag","textColor","VisuallyHidden","TableRows"],"mappings":"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"}
+{"version":3,"file":"TableList.js","sources":["../../../../admin/src/components/TableList/TableList.tsx"],"sourcesContent":["// TODO: find a better naming convention for the file that was an index file before\nimport {\n  Checkbox,\n  IconButton,\n  Table,\n  Th,\n  Thead,\n  Tooltip,\n  Tr,\n  Typography,\n  VisuallyHidden,\n} from '@strapi/design-system';\nimport { CaretDown, CaretUp } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\n\nimport { tableHeaders } from '../../constants';\nimport { getTrad } from '../../utils';\n\nimport { TableRows } from './TableRows';\n\nimport type { File } from '../../../../shared/contracts/files';\nimport type { Folder } from '../../../../shared/contracts/folders';\nimport type { AllowedTypes } from '../AssetCard/AssetCard';\n\nexport interface FileRow extends File {\n  folderURL?: string;\n  isSelectable?: boolean;\n  type?: string;\n}\n\nexport interface FolderRow extends Folder {\n  folderURL?: string;\n  isSelectable?: boolean;\n  type?: string;\n}\n\nexport interface TableListProps {\n  isFolderSelectionAllowed?: boolean;\n  allowedTypes?: AllowedTypes[];\n  assetCount?: number;\n  folderCount?: number;\n  indeterminate?: boolean;\n  onChangeSort?: ((sortQuery: string) => void) | null;\n  onChangeFolder?: ((folderId: number, folderPath?: string) => void) | null;\n  onEditAsset?: ((asset: FileRow) => void) | null;\n  onEditFolder?: ((folder: FolderRow) => void) | null;\n  onSelectAll: (checked: boolean | string, rows?: FolderRow[] | FileRow[]) => void;\n  onSelectOne: (element: FileRow | FolderRow) => void;\n  rows?: FileRow[] | FolderRow[];\n  selected?: FileRow[] | FolderRow[];\n  shouldDisableBulkSelect?: boolean;\n  sortQuery?: string;\n}\n\nexport const TableList = ({\n  assetCount = 0,\n  folderCount = 0,\n  indeterminate = false,\n  onChangeSort = null,\n  onChangeFolder = null,\n  onEditAsset = null,\n  onEditFolder = null,\n  onSelectAll,\n  onSelectOne,\n  rows = [],\n  selected = [],\n  shouldDisableBulkSelect = false,\n  sortQuery = '',\n}: TableListProps) => {\n  const { formatMessage } = useIntl();\n  const [sortBy, sortOrder] = sortQuery.split(':');\n\n  const handleClickSort = (isSorted: boolean, name: string) => {\n    const nextSortOrder = isSorted && sortOrder === 'ASC' ? 'DESC' : 'ASC';\n    const nextSort = `${name}:${nextSortOrder}`;\n\n    onChangeSort?.(nextSort);\n  };\n\n  return (\n    <Table colCount={tableHeaders.length + 2} rowCount={assetCount + folderCount + 1}>\n      <Thead>\n        <Tr>\n          <Th>\n            <Checkbox\n              aria-label={formatMessage({\n                id: getTrad('bulk.select.label'),\n                defaultMessage: 'Select all folders & assets',\n              })}\n              disabled={shouldDisableBulkSelect}\n              onCheckedChange={(checked) => onSelectAll(checked, rows)}\n              checked={\n                indeterminate && !shouldDisableBulkSelect\n                  ? 'indeterminate'\n                  : (assetCount > 0 || folderCount > 0) &&\n                    selected.length === assetCount + folderCount\n              }\n            />\n          </Th>\n          {tableHeaders.map(({ metadatas: { label, isSortable }, name, key }) => {\n            const isSorted = sortBy === name;\n            const isUp = sortOrder === 'ASC';\n            const tableHeaderLabel = formatMessage(label);\n            const sortLabel = formatMessage(\n              { id: 'list.table.header.sort', defaultMessage: 'Sort on {label}' },\n              { label: tableHeaderLabel }\n            );\n\n            return (\n              <Th\n                action={\n                  isSorted && (\n                    <IconButton\n                      label={sortLabel}\n                      onClick={() => handleClickSort(isSorted, name)}\n                      variant=\"ghost\"\n                    >\n                      {isUp ? <CaretUp /> : <CaretDown />}\n                    </IconButton>\n                  )\n                }\n                key={key}\n              >\n                <Tooltip label={isSortable ? sortLabel : tableHeaderLabel}>\n                  {isSortable ? (\n                    <Typography\n                      onClick={() => handleClickSort(isSorted, name)}\n                      tag={isSorted ? 'span' : 'button'}\n                      textColor=\"neutral600\"\n                      variant=\"sigma\"\n                    >\n                      {tableHeaderLabel}\n                    </Typography>\n                  ) : (\n                    <Typography textColor=\"neutral600\" variant=\"sigma\">\n                      {tableHeaderLabel}\n                    </Typography>\n                  )}\n                </Tooltip>\n              </Th>\n            );\n          })}\n          <Th>\n            <VisuallyHidden>\n              {formatMessage({\n                id: getTrad('list.table.header.actions'),\n                defaultMessage: 'actions',\n              })}\n            </VisuallyHidden>\n          </Th>\n        </Tr>\n      </Thead>\n      <TableRows\n        onChangeFolder={onChangeFolder}\n        onEditAsset={onEditAsset!}\n        onEditFolder={onEditFolder!}\n        rows={rows}\n        onSelectOne={onSelectOne}\n        selected={selected}\n      />\n    </Table>\n  );\n};\n"],"names":["TableList","assetCount","folderCount","indeterminate","onChangeSort","onChangeFolder","onEditAsset","onEditFolder","onSelectAll","onSelectOne","rows","selected","shouldDisableBulkSelect","sortQuery","formatMessage","useIntl","sortBy","sortOrder","split","handleClickSort","isSorted","name","nextSortOrder","nextSort","_jsxs","Table","colCount","tableHeaders","length","rowCount","_jsx","Thead","Tr","Th","Checkbox","aria-label","id","getTrad","defaultMessage","disabled","onCheckedChange","checked","map","metadatas","label","isSortable","key","isUp","tableHeaderLabel","sortLabel","action","IconButton","onClick","variant","CaretUp","CaretDown","Tooltip","Typography","tag","textColor","VisuallyHidden","TableRows"],"mappings":"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"}

package/dist/admin/components/TableList/TableList.mjs

@@ -17,7 +17,7 @@ const TableList = ({ assetCount = 0, folderCount = 0, indeterminate = false, onC
     const handleClickSort = (isSorted, name)=>{
         const nextSortOrder = isSorted && sortOrder === 'ASC' ? 'DESC' : 'ASC';
         const nextSort = `${name}:${nextSortOrder}`;
-        onChangeSort && onChangeSort(nextSort);
+        onChangeSort?.(nextSort);
     };
     return /*#__PURE__*/ jsxs(Table, {
         colCount: tableHeaders.length + 2,

package/dist/admin/components/TableList/TableList.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TableList.mjs","sources":["../../../../admin/src/components/TableList/TableList.tsx"],"sourcesContent":["// TODO: find a better naming convention for the file that was an index file before\nimport {\n  Checkbox,\n  IconButton,\n  Table,\n  Th,\n  Thead,\n  Tooltip,\n  Tr,\n  Typography,\n  VisuallyHidden,\n} from '@strapi/design-system';\nimport { CaretDown, CaretUp } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\n\nimport { tableHeaders } from '../../constants';\nimport { getTrad } from '../../utils';\n\nimport { TableRows } from './TableRows';\n\nimport type { File } from '../../../../shared/contracts/files';\nimport type { Folder } from '../../../../shared/contracts/folders';\nimport type { AllowedTypes } from '../AssetCard/AssetCard';\n\nexport interface FileRow extends File {\n  folderURL?: string;\n  isSelectable?: boolean;\n  type?: string;\n}\n\nexport interface FolderRow extends Folder {\n  folderURL?: string;\n  isSelectable?: boolean;\n  type?: string;\n}\n\nexport interface TableListProps {\n  isFolderSelectionAllowed?: boolean;\n  allowedTypes?: AllowedTypes[];\n  assetCount?: number;\n  folderCount?: number;\n  indeterminate?: boolean;\n  onChangeSort?: ((sortQuery: string) => void) | null;\n  onChangeFolder?: ((folderId: number, folderPath?: string) => void) | null;\n  onEditAsset?: ((asset: FileRow) => void) | null;\n  onEditFolder?: ((folder: FolderRow) => void) | null;\n  onSelectAll: (checked: boolean | string, rows?: FolderRow[] | FileRow[]) => void;\n  onSelectOne: (element: FileRow | FolderRow) => void;\n  rows?: FileRow[] | FolderRow[];\n  selected?: FileRow[] | FolderRow[];\n  shouldDisableBulkSelect?: boolean;\n  sortQuery?: string;\n}\n\nexport const TableList = ({\n  assetCount = 0,\n  folderCount = 0,\n  indeterminate = false,\n  onChangeSort = null,\n  onChangeFolder = null,\n  onEditAsset = null,\n  onEditFolder = null,\n  onSelectAll,\n  onSelectOne,\n  rows = [],\n  selected = [],\n  shouldDisableBulkSelect = false,\n  sortQuery = '',\n}: TableListProps) => {\n  const { formatMessage } = useIntl();\n  const [sortBy, sortOrder] = sortQuery.split(':');\n\n  const handleClickSort = (isSorted: boolean, name: string) => {\n    const nextSortOrder = isSorted && sortOrder === 'ASC' ? 'DESC' : 'ASC';\n    const nextSort = `${name}:${nextSortOrder}`;\n\n    onChangeSort && onChangeSort(nextSort);\n  };\n\n  return (\n    <Table colCount={tableHeaders.length + 2} rowCount={assetCount + folderCount + 1}>\n      <Thead>\n        <Tr>\n          <Th>\n            <Checkbox\n              aria-label={formatMessage({\n                id: getTrad('bulk.select.label'),\n                defaultMessage: 'Select all folders & assets',\n              })}\n              disabled={shouldDisableBulkSelect}\n              onCheckedChange={(checked) => onSelectAll(checked, rows)}\n              checked={\n                indeterminate && !shouldDisableBulkSelect\n                  ? 'indeterminate'\n                  : (assetCount > 0 || folderCount > 0) &&\n                    selected.length === assetCount + folderCount\n              }\n            />\n          </Th>\n          {tableHeaders.map(({ metadatas: { label, isSortable }, name, key }) => {\n            const isSorted = sortBy === name;\n            const isUp = sortOrder === 'ASC';\n            const tableHeaderLabel = formatMessage(label);\n            const sortLabel = formatMessage(\n              { id: 'list.table.header.sort', defaultMessage: 'Sort on {label}' },\n              { label: tableHeaderLabel }\n            );\n\n            return (\n              <Th\n                action={\n                  isSorted && (\n                    <IconButton\n                      label={sortLabel}\n                      onClick={() => handleClickSort(isSorted, name)}\n                      variant=\"ghost\"\n                    >\n                      {isUp ? <CaretUp /> : <CaretDown />}\n                    </IconButton>\n                  )\n                }\n                key={key}\n              >\n                <Tooltip label={isSortable ? sortLabel : tableHeaderLabel}>\n                  {isSortable ? (\n                    <Typography\n                      onClick={() => handleClickSort(isSorted, name)}\n                      tag={isSorted ? 'span' : 'button'}\n                      textColor=\"neutral600\"\n                      variant=\"sigma\"\n                    >\n                      {tableHeaderLabel}\n                    </Typography>\n                  ) : (\n                    <Typography textColor=\"neutral600\" variant=\"sigma\">\n                      {tableHeaderLabel}\n                    </Typography>\n                  )}\n                </Tooltip>\n              </Th>\n            );\n          })}\n          <Th>\n            <VisuallyHidden>\n              {formatMessage({\n                id: getTrad('list.table.header.actions'),\n                defaultMessage: 'actions',\n              })}\n            </VisuallyHidden>\n          </Th>\n        </Tr>\n      </Thead>\n      <TableRows\n        onChangeFolder={onChangeFolder}\n        onEditAsset={onEditAsset!}\n        onEditFolder={onEditFolder!}\n        rows={rows}\n        onSelectOne={onSelectOne}\n        selected={selected}\n      />\n    </Table>\n  );\n};\n"],"names":["TableList","assetCount","folderCount","indeterminate","onChangeSort","onChangeFolder","onEditAsset","onEditFolder","onSelectAll","onSelectOne","rows","selected","shouldDisableBulkSelect","sortQuery","formatMessage","useIntl","sortBy","sortOrder","split","handleClickSort","isSorted","name","nextSortOrder","nextSort","_jsxs","Table","colCount","tableHeaders","length","rowCount","_jsx","Thead","Tr","Th","Checkbox","aria-label","id","getTrad","defaultMessage","disabled","onCheckedChange","checked","map","metadatas","label","isSortable","key","isUp","tableHeaderLabel","sortLabel","action","IconButton","onClick","variant","CaretUp","CaretDown","Tooltip","Typography","tag","textColor","VisuallyHidden","TableRows"],"mappings":"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"}
+{"version":3,"file":"TableList.mjs","sources":["../../../../admin/src/components/TableList/TableList.tsx"],"sourcesContent":["// TODO: find a better naming convention for the file that was an index file before\nimport {\n  Checkbox,\n  IconButton,\n  Table,\n  Th,\n  Thead,\n  Tooltip,\n  Tr,\n  Typography,\n  VisuallyHidden,\n} from '@strapi/design-system';\nimport { CaretDown, CaretUp } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\n\nimport { tableHeaders } from '../../constants';\nimport { getTrad } from '../../utils';\n\nimport { TableRows } from './TableRows';\n\nimport type { File } from '../../../../shared/contracts/files';\nimport type { Folder } from '../../../../shared/contracts/folders';\nimport type { AllowedTypes } from '../AssetCard/AssetCard';\n\nexport interface FileRow extends File {\n  folderURL?: string;\n  isSelectable?: boolean;\n  type?: string;\n}\n\nexport interface FolderRow extends Folder {\n  folderURL?: string;\n  isSelectable?: boolean;\n  type?: string;\n}\n\nexport interface TableListProps {\n  isFolderSelectionAllowed?: boolean;\n  allowedTypes?: AllowedTypes[];\n  assetCount?: number;\n  folderCount?: number;\n  indeterminate?: boolean;\n  onChangeSort?: ((sortQuery: string) => void) | null;\n  onChangeFolder?: ((folderId: number, folderPath?: string) => void) | null;\n  onEditAsset?: ((asset: FileRow) => void) | null;\n  onEditFolder?: ((folder: FolderRow) => void) | null;\n  onSelectAll: (checked: boolean | string, rows?: FolderRow[] | FileRow[]) => void;\n  onSelectOne: (element: FileRow | FolderRow) => void;\n  rows?: FileRow[] | FolderRow[];\n  selected?: FileRow[] | FolderRow[];\n  shouldDisableBulkSelect?: boolean;\n  sortQuery?: string;\n}\n\nexport const TableList = ({\n  assetCount = 0,\n  folderCount = 0,\n  indeterminate = false,\n  onChangeSort = null,\n  onChangeFolder = null,\n  onEditAsset = null,\n  onEditFolder = null,\n  onSelectAll,\n  onSelectOne,\n  rows = [],\n  selected = [],\n  shouldDisableBulkSelect = false,\n  sortQuery = '',\n}: TableListProps) => {\n  const { formatMessage } = useIntl();\n  const [sortBy, sortOrder] = sortQuery.split(':');\n\n  const handleClickSort = (isSorted: boolean, name: string) => {\n    const nextSortOrder = isSorted && sortOrder === 'ASC' ? 'DESC' : 'ASC';\n    const nextSort = `${name}:${nextSortOrder}`;\n\n    onChangeSort?.(nextSort);\n  };\n\n  return (\n    <Table colCount={tableHeaders.length + 2} rowCount={assetCount + folderCount + 1}>\n      <Thead>\n        <Tr>\n          <Th>\n            <Checkbox\n              aria-label={formatMessage({\n                id: getTrad('bulk.select.label'),\n                defaultMessage: 'Select all folders & assets',\n              })}\n              disabled={shouldDisableBulkSelect}\n              onCheckedChange={(checked) => onSelectAll(checked, rows)}\n              checked={\n                indeterminate && !shouldDisableBulkSelect\n                  ? 'indeterminate'\n                  : (assetCount > 0 || folderCount > 0) &&\n                    selected.length === assetCount + folderCount\n              }\n            />\n          </Th>\n          {tableHeaders.map(({ metadatas: { label, isSortable }, name, key }) => {\n            const isSorted = sortBy === name;\n            const isUp = sortOrder === 'ASC';\n            const tableHeaderLabel = formatMessage(label);\n            const sortLabel = formatMessage(\n              { id: 'list.table.header.sort', defaultMessage: 'Sort on {label}' },\n              { label: tableHeaderLabel }\n            );\n\n            return (\n              <Th\n                action={\n                  isSorted && (\n                    <IconButton\n                      label={sortLabel}\n                      onClick={() => handleClickSort(isSorted, name)}\n                      variant=\"ghost\"\n                    >\n                      {isUp ? <CaretUp /> : <CaretDown />}\n                    </IconButton>\n                  )\n                }\n                key={key}\n              >\n                <Tooltip label={isSortable ? sortLabel : tableHeaderLabel}>\n                  {isSortable ? (\n                    <Typography\n                      onClick={() => handleClickSort(isSorted, name)}\n                      tag={isSorted ? 'span' : 'button'}\n                      textColor=\"neutral600\"\n                      variant=\"sigma\"\n                    >\n                      {tableHeaderLabel}\n                    </Typography>\n                  ) : (\n                    <Typography textColor=\"neutral600\" variant=\"sigma\">\n                      {tableHeaderLabel}\n                    </Typography>\n                  )}\n                </Tooltip>\n              </Th>\n            );\n          })}\n          <Th>\n            <VisuallyHidden>\n              {formatMessage({\n                id: getTrad('list.table.header.actions'),\n                defaultMessage: 'actions',\n              })}\n            </VisuallyHidden>\n          </Th>\n        </Tr>\n      </Thead>\n      <TableRows\n        onChangeFolder={onChangeFolder}\n        onEditAsset={onEditAsset!}\n        onEditFolder={onEditFolder!}\n        rows={rows}\n        onSelectOne={onSelectOne}\n        selected={selected}\n      />\n    </Table>\n  );\n};\n"],"names":["TableList","assetCount","folderCount","indeterminate","onChangeSort","onChangeFolder","onEditAsset","onEditFolder","onSelectAll","onSelectOne","rows","selected","shouldDisableBulkSelect","sortQuery","formatMessage","useIntl","sortBy","sortOrder","split","handleClickSort","isSorted","name","nextSortOrder","nextSort","_jsxs","Table","colCount","tableHeaders","length","rowCount","_jsx","Thead","Tr","Th","Checkbox","aria-label","id","getTrad","defaultMessage","disabled","onCheckedChange","checked","map","metadatas","label","isSortable","key","isUp","tableHeaderLabel","sortLabel","action","IconButton","onClick","variant","CaretUp","CaretDown","Tooltip","Typography","tag","textColor","VisuallyHidden","TableRows"],"mappings":"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"}

package/dist/admin/components/UploadAssetDialog/AddAssetStep/FromUrlForm.js

@@ -33,11 +33,31 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
+const isMessageDescriptor = (error)=>typeof error === 'object' && error !== null && 'id' in error;
 const FromUrlForm = ({ onClose, onAddAsset, trackedLocation })=>{
     const [loading, setLoading] = React__namespace.useState(false);
     const [error, setError] = React__namespace.useState(undefined);
     const { formatMessage } = reactIntl.useIntl();
     const { trackUsage } = useTracking.useTracking();
+    /**
+   * `urlSchema` errors are message descriptors: they carry the values needed to interpolate
+   * placeholders such as `{max}` or `{number}`, even though Formik types the error as a string.
+   */ const formatValidationError = (validationError)=>{
+        if (isMessageDescriptor(validationError)) {
+            const { values, ...message } = validationError;
+            return formatMessage({
+                defaultMessage: 'An error occurred',
+                ...message
+            }, values);
+        }
+        if (typeof validationError === 'string') {
+            return formatMessage({
+                id: validationError,
+                defaultMessage: 'An error occurred'
+            });
+        }
+        return undefined;
+    };
     const handleSubmit = async ({ urls })=>{
         setLoading(true);
         const urlArray = urls.split(/\r?\n/);
@@ -77,10 +97,7 @@ const FromUrlForm = ({ onClose, onAddAsset, trackedLocation })=>{
                                 id: getTrad.getTrad('input.url.description'),
                                 defaultMessage: 'Separate your URL links by a carriage return.'
                             }),
-                            error: error?.message || (errors.urls ? formatMessage({
-                                id: errors.urls,
-                                defaultMessage: 'An error occurred'
-                            }) : undefined),
+                            error: error?.message || formatValidationError(errors.urls),
                             children: [
                                 /*#__PURE__*/ jsxRuntime.jsx(designSystem.Field.Label, {
                                     children: formatMessage({

package/dist/admin/components/UploadAssetDialog/AddAssetStep/FromUrlForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"FromUrlForm.js","sources":["../../../../../admin/src/components/UploadAssetDialog/AddAssetStep/FromUrlForm.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, Button, Field, Modal, Textarea } from '@strapi/design-system';\nimport { Form, Formik } from 'formik';\nimport { useIntl } from 'react-intl';\n\nimport { useTracking } from '../../../hooks/useTracking';\nimport { getTrad, urlsToAssets, urlSchema } from '../../../utils';\n\nimport type { FileWithRawFile } from './AddAssetStep';\n\ninterface FromUrlFormProps {\n  onClose: () => void;\n  onAddAsset: (assets: FileWithRawFile[]) => void;\n  trackedLocation?: string;\n}\n\nexport const FromUrlForm = ({ onClose, onAddAsset, trackedLocation }: FromUrlFormProps) => {\n  const [loading, setLoading] = React.useState(false);\n  const [error, setError] = React.useState<Error | undefined>(undefined);\n  const { formatMessage } = useIntl();\n  const { trackUsage } = useTracking();\n\n  const handleSubmit = async ({ urls }: { urls: string }) => {\n    setLoading(true);\n    const urlArray = urls.split(/\\r?\\n/);\n    try {\n      const assets: FileWithRawFile[] = await urlsToAssets(urlArray);\n\n      if (trackedLocation) {\n        trackUsage('didSelectFile', { source: 'url', location: trackedLocation });\n      }\n\n      // no need to set the loading to false since the component unmounts\n      onAddAsset(assets);\n    } catch (e: unknown) {\n      setError(e as Error);\n      setLoading(false);\n    }\n  };\n\n  return (\n    <Formik\n      enableReinitialize\n      initialValues={{\n        urls: '',\n      }}\n      onSubmit={handleSubmit}\n      validationSchema={urlSchema}\n      validateOnChange={false}\n    >\n      {({ values, errors, handleChange }) => (\n        <Form noValidate>\n          <Box paddingLeft={8} paddingRight={8} paddingBottom={6} paddingTop={6}>\n            <Field.Root\n              hint={formatMessage({\n                id: getTrad('input.url.description'),\n                defaultMessage: 'Separate your URL links by a carriage return.',\n              })}\n              error={\n                error?.message ||\n                (errors.urls\n                  ? formatMessage({ id: errors.urls, defaultMessage: 'An error occurred' })\n                  : undefined)\n              }\n            >\n              <Field.Label>\n                {formatMessage({ id: getTrad('input.url.label'), defaultMessage: 'URL' })}\n              </Field.Label>\n              <Textarea name=\"urls\" onChange={handleChange} value={values.urls} />\n              <Field.Hint />\n              <Field.Error />\n            </Field.Root>\n          </Box>\n\n          <Modal.Footer>\n            <Button onClick={onClose} variant=\"tertiary\">\n              {formatMessage({ id: 'app.components.Button.cancel', defaultMessage: 'cancel' })}\n            </Button>\n            <Button type=\"submit\" loading={loading}>\n              {formatMessage({\n                id: getTrad('button.next'),\n                defaultMessage: 'Next',\n              })}\n            </Button>\n          </Modal.Footer>\n        </Form>\n      )}\n    </Formik>\n  );\n};\n"],"names":["FromUrlForm","onClose","onAddAsset","trackedLocation","loading","setLoading","React","useState","error","setError","undefined","formatMessage","useIntl","trackUsage","useTracking","handleSubmit","urls","urlArray","split","assets","urlsToAssets","source","location","e","_jsx","Formik","enableReinitialize","initialValues","onSubmit","validationSchema","urlSchema","validateOnChange","values","errors","handleChange","_jsxs","Form","noValidate","Box","paddingLeft","paddingRight","paddingBottom","paddingTop","Field","Root","hint","id","getTrad","defaultMessage","message","Label","Textarea","name","onChange","value","Hint","Error","Modal","Footer","Button","onClick","variant","type"],"mappings":"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"}
+{"version":3,"file":"FromUrlForm.js","sources":["../../../../../admin/src/components/UploadAssetDialog/AddAssetStep/FromUrlForm.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, Button, Field, Modal, Textarea } from '@strapi/design-system';\nimport { Form, Formik } from 'formik';\nimport { useIntl } from 'react-intl';\n\nimport { useTracking } from '../../../hooks/useTracking';\nimport { getTrad, urlsToAssets, urlSchema } from '../../../utils';\n\nimport type { FileWithRawFile } from './AddAssetStep';\nimport type { MessageDescriptor, PrimitiveType } from 'react-intl';\n\ntype TranslationMessage = MessageDescriptor & { values?: Record<string, PrimitiveType> };\n\nconst isMessageDescriptor = (error: unknown): error is TranslationMessage =>\n  typeof error === 'object' && error !== null && 'id' in error;\n\ninterface FromUrlFormProps {\n  onClose: () => void;\n  onAddAsset: (assets: FileWithRawFile[]) => void;\n  trackedLocation?: string;\n}\n\nexport const FromUrlForm = ({ onClose, onAddAsset, trackedLocation }: FromUrlFormProps) => {\n  const [loading, setLoading] = React.useState(false);\n  const [error, setError] = React.useState<Error | undefined>(undefined);\n  const { formatMessage } = useIntl();\n  const { trackUsage } = useTracking();\n\n  /**\n   * `urlSchema` errors are message descriptors: they carry the values needed to interpolate\n   * placeholders such as `{max}` or `{number}`, even though Formik types the error as a string.\n   */\n  const formatValidationError = (validationError: unknown) => {\n    if (isMessageDescriptor(validationError)) {\n      const { values, ...message } = validationError;\n\n      return formatMessage({ defaultMessage: 'An error occurred', ...message }, values);\n    }\n\n    if (typeof validationError === 'string') {\n      return formatMessage({ id: validationError, defaultMessage: 'An error occurred' });\n    }\n\n    return undefined;\n  };\n\n  const handleSubmit = async ({ urls }: { urls: string }) => {\n    setLoading(true);\n    const urlArray = urls.split(/\\r?\\n/);\n    try {\n      const assets: FileWithRawFile[] = await urlsToAssets(urlArray);\n\n      if (trackedLocation) {\n        trackUsage('didSelectFile', { source: 'url', location: trackedLocation });\n      }\n\n      // no need to set the loading to false since the component unmounts\n      onAddAsset(assets);\n    } catch (e: unknown) {\n      setError(e as Error);\n      setLoading(false);\n    }\n  };\n\n  return (\n    <Formik\n      enableReinitialize\n      initialValues={{\n        urls: '',\n      }}\n      onSubmit={handleSubmit}\n      validationSchema={urlSchema}\n      validateOnChange={false}\n    >\n      {({ values, errors, handleChange }) => (\n        <Form noValidate>\n          <Box paddingLeft={8} paddingRight={8} paddingBottom={6} paddingTop={6}>\n            <Field.Root\n              hint={formatMessage({\n                id: getTrad('input.url.description'),\n                defaultMessage: 'Separate your URL links by a carriage return.',\n              })}\n              error={error?.message || formatValidationError(errors.urls)}\n            >\n              <Field.Label>\n                {formatMessage({ id: getTrad('input.url.label'), defaultMessage: 'URL' })}\n              </Field.Label>\n              <Textarea name=\"urls\" onChange={handleChange} value={values.urls} />\n              <Field.Hint />\n              <Field.Error />\n            </Field.Root>\n          </Box>\n\n          <Modal.Footer>\n            <Button onClick={onClose} variant=\"tertiary\">\n              {formatMessage({ id: 'app.components.Button.cancel', defaultMessage: 'cancel' })}\n            </Button>\n            <Button type=\"submit\" loading={loading}>\n              {formatMessage({\n                id: getTrad('button.next'),\n                defaultMessage: 'Next',\n              })}\n            </Button>\n          </Modal.Footer>\n        </Form>\n      )}\n    </Formik>\n  );\n};\n"],"names":["isMessageDescriptor","error","FromUrlForm","onClose","onAddAsset","trackedLocation","loading","setLoading","React","useState","setError","undefined","formatMessage","useIntl","trackUsage","useTracking","formatValidationError","validationError","values","message","defaultMessage","id","handleSubmit","urls","urlArray","split","assets","urlsToAssets","source","location","e","_jsx","Formik","enableReinitialize","initialValues","onSubmit","validationSchema","urlSchema","validateOnChange","errors","handleChange","_jsxs","Form","noValidate","Box","paddingLeft","paddingRight","paddingBottom","paddingTop","Field","Root","hint","getTrad","Label","Textarea","name","onChange","value","Hint","Error","Modal","Footer","Button","onClick","variant","type"],"mappings":"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"}

package/dist/admin/components/UploadAssetDialog/AddAssetStep/FromUrlForm.mjs

@@ -11,11 +11,31 @@ import 'qs';
 import { urlsToAssets } from '../../../utils/urlsToAssets.mjs';
 import { urlSchema } from '../../../utils/urlYupSchema.mjs';
 
+const isMessageDescriptor = (error)=>typeof error === 'object' && error !== null && 'id' in error;
 const FromUrlForm = ({ onClose, onAddAsset, trackedLocation })=>{
     const [loading, setLoading] = React.useState(false);
     const [error, setError] = React.useState(undefined);
     const { formatMessage } = useIntl();
     const { trackUsage } = useTracking();
+    /**
+   * `urlSchema` errors are message descriptors: they carry the values needed to interpolate
+   * placeholders such as `{max}` or `{number}`, even though Formik types the error as a string.
+   */ const formatValidationError = (validationError)=>{
+        if (isMessageDescriptor(validationError)) {
+            const { values, ...message } = validationError;
+            return formatMessage({
+                defaultMessage: 'An error occurred',
+                ...message
+            }, values);
+        }
+        if (typeof validationError === 'string') {
+            return formatMessage({
+                id: validationError,
+                defaultMessage: 'An error occurred'
+            });
+        }
+        return undefined;
+    };
     const handleSubmit = async ({ urls })=>{
         setLoading(true);
         const urlArray = urls.split(/\r?\n/);
@@ -55,10 +75,7 @@ const FromUrlForm = ({ onClose, onAddAsset, trackedLocation })=>{
                                 id: getTrad('input.url.description'),
                                 defaultMessage: 'Separate your URL links by a carriage return.'
                             }),
-                            error: error?.message || (errors.urls ? formatMessage({
-                                id: errors.urls,
-                                defaultMessage: 'An error occurred'
-                            }) : undefined),
+                            error: error?.message || formatValidationError(errors.urls),
                             children: [
                                 /*#__PURE__*/ jsx(Field.Label, {
                                     children: formatMessage({

package/dist/admin/components/UploadAssetDialog/AddAssetStep/FromUrlForm.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FromUrlForm.mjs","sources":["../../../../../admin/src/components/UploadAssetDialog/AddAssetStep/FromUrlForm.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, Button, Field, Modal, Textarea } from '@strapi/design-system';\nimport { Form, Formik } from 'formik';\nimport { useIntl } from 'react-intl';\n\nimport { useTracking } from '../../../hooks/useTracking';\nimport { getTrad, urlsToAssets, urlSchema } from '../../../utils';\n\nimport type { FileWithRawFile } from './AddAssetStep';\n\ninterface FromUrlFormProps {\n  onClose: () => void;\n  onAddAsset: (assets: FileWithRawFile[]) => void;\n  trackedLocation?: string;\n}\n\nexport const FromUrlForm = ({ onClose, onAddAsset, trackedLocation }: FromUrlFormProps) => {\n  const [loading, setLoading] = React.useState(false);\n  const [error, setError] = React.useState<Error | undefined>(undefined);\n  const { formatMessage } = useIntl();\n  const { trackUsage } = useTracking();\n\n  const handleSubmit = async ({ urls }: { urls: string }) => {\n    setLoading(true);\n    const urlArray = urls.split(/\\r?\\n/);\n    try {\n      const assets: FileWithRawFile[] = await urlsToAssets(urlArray);\n\n      if (trackedLocation) {\n        trackUsage('didSelectFile', { source: 'url', location: trackedLocation });\n      }\n\n      // no need to set the loading to false since the component unmounts\n      onAddAsset(assets);\n    } catch (e: unknown) {\n      setError(e as Error);\n      setLoading(false);\n    }\n  };\n\n  return (\n    <Formik\n      enableReinitialize\n      initialValues={{\n        urls: '',\n      }}\n      onSubmit={handleSubmit}\n      validationSchema={urlSchema}\n      validateOnChange={false}\n    >\n      {({ values, errors, handleChange }) => (\n        <Form noValidate>\n          <Box paddingLeft={8} paddingRight={8} paddingBottom={6} paddingTop={6}>\n            <Field.Root\n              hint={formatMessage({\n                id: getTrad('input.url.description'),\n                defaultMessage: 'Separate your URL links by a carriage return.',\n              })}\n              error={\n                error?.message ||\n                (errors.urls\n                  ? formatMessage({ id: errors.urls, defaultMessage: 'An error occurred' })\n                  : undefined)\n              }\n            >\n              <Field.Label>\n                {formatMessage({ id: getTrad('input.url.label'), defaultMessage: 'URL' })}\n              </Field.Label>\n              <Textarea name=\"urls\" onChange={handleChange} value={values.urls} />\n              <Field.Hint />\n              <Field.Error />\n            </Field.Root>\n          </Box>\n\n          <Modal.Footer>\n            <Button onClick={onClose} variant=\"tertiary\">\n              {formatMessage({ id: 'app.components.Button.cancel', defaultMessage: 'cancel' })}\n            </Button>\n            <Button type=\"submit\" loading={loading}>\n              {formatMessage({\n                id: getTrad('button.next'),\n                defaultMessage: 'Next',\n              })}\n            </Button>\n          </Modal.Footer>\n        </Form>\n      )}\n    </Formik>\n  );\n};\n"],"names":["FromUrlForm","onClose","onAddAsset","trackedLocation","loading","setLoading","React","useState","error","setError","undefined","formatMessage","useIntl","trackUsage","useTracking","handleSubmit","urls","urlArray","split","assets","urlsToAssets","source","location","e","_jsx","Formik","enableReinitialize","initialValues","onSubmit","validationSchema","urlSchema","validateOnChange","values","errors","handleChange","_jsxs","Form","noValidate","Box","paddingLeft","paddingRight","paddingBottom","paddingTop","Field","Root","hint","id","getTrad","defaultMessage","message","Label","Textarea","name","onChange","value","Hint","Error","Modal","Footer","Button","onClick","variant","type"],"mappings":"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"}
+{"version":3,"file":"FromUrlForm.mjs","sources":["../../../../../admin/src/components/UploadAssetDialog/AddAssetStep/FromUrlForm.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, Button, Field, Modal, Textarea } from '@strapi/design-system';\nimport { Form, Formik } from 'formik';\nimport { useIntl } from 'react-intl';\n\nimport { useTracking } from '../../../hooks/useTracking';\nimport { getTrad, urlsToAssets, urlSchema } from '../../../utils';\n\nimport type { FileWithRawFile } from './AddAssetStep';\nimport type { MessageDescriptor, PrimitiveType } from 'react-intl';\n\ntype TranslationMessage = MessageDescriptor & { values?: Record<string, PrimitiveType> };\n\nconst isMessageDescriptor = (error: unknown): error is TranslationMessage =>\n  typeof error === 'object' && error !== null && 'id' in error;\n\ninterface FromUrlFormProps {\n  onClose: () => void;\n  onAddAsset: (assets: FileWithRawFile[]) => void;\n  trackedLocation?: string;\n}\n\nexport const FromUrlForm = ({ onClose, onAddAsset, trackedLocation }: FromUrlFormProps) => {\n  const [loading, setLoading] = React.useState(false);\n  const [error, setError] = React.useState<Error | undefined>(undefined);\n  const { formatMessage } = useIntl();\n  const { trackUsage } = useTracking();\n\n  /**\n   * `urlSchema` errors are message descriptors: they carry the values needed to interpolate\n   * placeholders such as `{max}` or `{number}`, even though Formik types the error as a string.\n   */\n  const formatValidationError = (validationError: unknown) => {\n    if (isMessageDescriptor(validationError)) {\n      const { values, ...message } = validationError;\n\n      return formatMessage({ defaultMessage: 'An error occurred', ...message }, values);\n    }\n\n    if (typeof validationError === 'string') {\n      return formatMessage({ id: validationError, defaultMessage: 'An error occurred' });\n    }\n\n    return undefined;\n  };\n\n  const handleSubmit = async ({ urls }: { urls: string }) => {\n    setLoading(true);\n    const urlArray = urls.split(/\\r?\\n/);\n    try {\n      const assets: FileWithRawFile[] = await urlsToAssets(urlArray);\n\n      if (trackedLocation) {\n        trackUsage('didSelectFile', { source: 'url', location: trackedLocation });\n      }\n\n      // no need to set the loading to false since the component unmounts\n      onAddAsset(assets);\n    } catch (e: unknown) {\n      setError(e as Error);\n      setLoading(false);\n    }\n  };\n\n  return (\n    <Formik\n      enableReinitialize\n      initialValues={{\n        urls: '',\n      }}\n      onSubmit={handleSubmit}\n      validationSchema={urlSchema}\n      validateOnChange={false}\n    >\n      {({ values, errors, handleChange }) => (\n        <Form noValidate>\n          <Box paddingLeft={8} paddingRight={8} paddingBottom={6} paddingTop={6}>\n            <Field.Root\n              hint={formatMessage({\n                id: getTrad('input.url.description'),\n                defaultMessage: 'Separate your URL links by a carriage return.',\n              })}\n              error={error?.message || formatValidationError(errors.urls)}\n            >\n              <Field.Label>\n                {formatMessage({ id: getTrad('input.url.label'), defaultMessage: 'URL' })}\n              </Field.Label>\n              <Textarea name=\"urls\" onChange={handleChange} value={values.urls} />\n              <Field.Hint />\n              <Field.Error />\n            </Field.Root>\n          </Box>\n\n          <Modal.Footer>\n            <Button onClick={onClose} variant=\"tertiary\">\n              {formatMessage({ id: 'app.components.Button.cancel', defaultMessage: 'cancel' })}\n            </Button>\n            <Button type=\"submit\" loading={loading}>\n              {formatMessage({\n                id: getTrad('button.next'),\n                defaultMessage: 'Next',\n              })}\n            </Button>\n          </Modal.Footer>\n        </Form>\n      )}\n    </Formik>\n  );\n};\n"],"names":["isMessageDescriptor","error","FromUrlForm","onClose","onAddAsset","trackedLocation","loading","setLoading","React","useState","setError","undefined","formatMessage","useIntl","trackUsage","useTracking","formatValidationError","validationError","values","message","defaultMessage","id","handleSubmit","urls","urlArray","split","assets","urlsToAssets","source","location","e","_jsx","Formik","enableReinitialize","initialValues","onSubmit","validationSchema","urlSchema","validateOnChange","errors","handleChange","_jsxs","Form","noValidate","Box","paddingLeft","paddingRight","paddingBottom","paddingTop","Field","Root","hint","getTrad","Label","Textarea","name","onChange","value","Hint","Error","Modal","Footer","Button","onClick","variant","type"],"mappings":"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"}

package/dist/admin/future/components/Drawer.js

@@ -89,7 +89,9 @@ const DrawerContainer = styledComponents.styled(designSystem.Flex)`
   z-index: 200;
   overflow: hidden;
   width: ${({ width })=>width ?? '400px'};
-  max-height: ${({ maxHeight })=>maxHeight ?? '100vh'};
+  /* dvh, not vh: anchored to the bottom, a 100vh cap on mobile (visual
+     viewport < 100vh under the URL bar) would push the drawer top off-screen. */
+  max-height: ${({ maxHeight })=>maxHeight ?? '100dvh'};
 
   &:focus {
     outline: none;

package/dist/admin/future/components/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","sources":["../../../../admin/src/future/components/Drawer.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport * as Dialog from '@radix-ui/react-dialog';\nimport { Box, ScrollArea, IconButton, Flex, FlexProps } from '@strapi/design-system';\nimport { Cross } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { keyframes, styled } from 'styled-components';\n\n/** Duration of the close animation in ms. Use for timing cleanup (e.g. removing URL params). */\nexport const DRAWER_CLOSE_ANIMATION_MS = 300;\n\n/* -------------------------------------------------------------------------------------------------\n * Animations\n * -----------------------------------------------------------------------------------------------*/\n\n// Direction: up\nconst slideUpFromBottomIn = keyframes`\n  from {\n    opacity: 0;\n    transform: translateY(100%);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n`;\n\nconst slideUpFromBottomOut = keyframes`\n  from {\n    opacity: 1;\n    transform: translateY(0);\n  }\n  to {\n    opacity: 0;\n    transform: translateY(100%);\n  }\n`;\n\n// Direction: left\nconst slideLeftFromRightIn = keyframes`\n  from {\n    opacity: 0;\n    transform: translateX(100%);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n`;\n\nconst slideLeftFromRightOut = keyframes`\n  from {\n    opacity: 1;\n    transform: translateX(0);\n  }\n  to {\n    opacity: 0;\n    transform: translateX(100%);\n  }\n`;\n\n/* -------------------------------------------------------------------------------------------------\n * Styled components\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DrawerContainerProps {\n  $animationDirection?: DrawerBodyProps['animationDirection'];\n}\n\nconst DrawerContainer = styled(Flex)<DrawerContainerProps>`\n  flex-direction: column;\n  position: fixed;\n  bottom: 0;\n  right: 0;\n  padding: ${({ theme }) => theme.spaces[2]};\n  max-width: 100%;\n  /* Sit just below the overlay token (300) so that:\n     - popovers (500) and tooltips (1000) rendered from descendant components\n       surface above the drawer panel,\n     - AlertDialog overlays (300) and contents (310) opened from inside the\n       drawer (e.g. the asset details \"delete\" confirm) cover the drawer. */\n  z-index: 200;\n  overflow: hidden;\n  width: ${({ width }) => width ?? '400px'};\n  max-height: ${({ maxHeight }) => maxHeight ?? '100vh'};\n\n  &:focus {\n    outline: none;\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    &[data-state='open'] {\n      animation: ${({ $animationDirection }) =>\n          $animationDirection === 'up' ? slideUpFromBottomIn : slideLeftFromRightIn}\n        ${DRAWER_CLOSE_ANIMATION_MS}ms cubic-bezier(0.32, 0.72, 0, 1) forwards;\n    }\n\n    &[data-state='closed'] {\n      animation: ${({ $animationDirection }) =>\n          $animationDirection === 'up' ? slideUpFromBottomOut : slideLeftFromRightOut}\n        ${DRAWER_CLOSE_ANIMATION_MS}ms cubic-bezier(0.32, 0.72, 0, 1) forwards;\n      pointer-events: none;\n    }\n  }\n`;\n\nconst DrawerContent = styled(Box)`\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-height: 0;\n  width: 100%;\n  background-color: ${({ theme }) => theme.colors.neutral0};\n  border-radius: ${({ theme }) => theme.borderRadius};\n  box-shadow: ${({ theme }) => theme.shadows.popupShadow};\n  overflow: hidden;\n  border: 1px solid ${({ theme }) => theme.colors.neutral150};\n`;\n\ninterface CollapsibleContentProps {\n  $isVisible: boolean;\n}\n\nconst CollapsibleContent = styled(Box)<CollapsibleContentProps>`\n  display: grid;\n  flex: 1;\n  min-height: 0;\n  grid-template-rows: ${({ $isVisible }) => ($isVisible ? '1fr' : '0fr')};\n  transition: grid-template-rows 0.3s ease-in-out;\n\n  > div {\n    overflow: hidden;\n    min-height: 0;\n  }\n`;\n\nconst CloseIconButton = styled(IconButton)`\n  &:hover {\n    background: transparent;\n  }\n`;\n\n/* -------------------------------------------------------------------------------------------------\n * Drawer.Body\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DrawerBodyProps extends FlexProps {\n  animationDirection?: 'up' | 'left';\n  children: React.ReactNode;\n}\n\nconst DrawerBody = React.forwardRef<HTMLDivElement, DrawerBodyProps>(\n  ({ animationDirection, children, ...props }, ref) => (\n    <Dialog.Content\n      ref={ref}\n      forceMount\n      asChild\n      onPointerDownOutside={(e) => e.preventDefault()}\n      onInteractOutside={(e) => e.preventDefault()}\n      data-animation-direction={animationDirection}\n    >\n      <DrawerContainer $animationDirection={animationDirection} {...props}>\n        <DrawerContent>{children}</DrawerContent>\n      </DrawerContainer>\n    </Dialog.Content>\n  )\n);\nDrawerBody.displayName = 'DrawerBody';\n\n/* -------------------------------------------------------------------------------------------------\n * Drawer.Root\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DrawerRootProps {\n  isVisible?: boolean;\n  onClose?: () => void;\n  children: React.ReactNode;\n}\n\nconst DrawerRoot = ({ isVisible, onClose, children }: DrawerRootProps): React.ReactElement => (\n  <Dialog.Root\n    open={isVisible}\n    onOpenChange={(nextVisible) => !nextVisible && onClose?.()}\n    modal={false}\n  >\n    <Dialog.Portal>{children}</Dialog.Portal>\n  </Dialog.Root>\n);\n\n/* -------------------------------------------------------------------------------------------------\n * Drawer.Content - composable content slot (collapsible when isContentExpanded is used)\n * Contains a scrollable area\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DrawerScrollableContentProps {\n  children: React.ReactNode;\n  /** When provided, content can collapse/expand (e.g. for minimize). Omit to always show. */\n  isContentExpanded?: boolean;\n}\n\nconst DrawerScrollableContent = ({\n  children,\n  isContentExpanded = true,\n}: DrawerScrollableContentProps) => (\n  <CollapsibleContent $isVisible={isContentExpanded} data-collapsed={!isContentExpanded}>\n    <ScrollArea>{children}</ScrollArea>\n  </CollapsibleContent>\n);\n\n/* -------------------------------------------------------------------------------------------------\n * Drawer.CloseButton - composable close icon button (Cross icon by default)\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DrawerCloseButtonProps extends React.PropsWithChildren {\n  onClose: () => void;\n  label?: string;\n}\n\nconst DrawerCloseButton = ({ onClose, label, children }: DrawerCloseButtonProps) => {\n  const { formatMessage } = useIntl();\n  const labelMessage = label ?? formatMessage({ id: 'global.close', defaultMessage: 'Close' });\n  return (\n    <CloseIconButton onClick={onClose} label={labelMessage} variant=\"ghost\">\n      {children ?? <Cross />}\n    </CloseIconButton>\n  );\n};\n\nconst Drawer = {\n  Root: DrawerRoot,\n  Body: DrawerBody,\n  ScrollableContent: DrawerScrollableContent,\n  CloseButton: DrawerCloseButton,\n  Title: Dialog.Title,\n  Description: Dialog.Description,\n};\n\nexport { Drawer };\n"],"names":["DRAWER_CLOSE_ANIMATION_MS","slideUpFromBottomIn","keyframes","slideUpFromBottomOut","slideLeftFromRightIn","slideLeftFromRightOut","DrawerContainer","styled","Flex","theme","spaces","width","maxHeight","$animationDirection","DrawerContent","Box","colors","neutral0","borderRadius","shadows","popupShadow","neutral150","CollapsibleContent","$isVisible","CloseIconButton","IconButton","DrawerBody","React","forwardRef","animationDirection","children","props","ref","_jsx","Dialog","Content","forceMount","asChild","onPointerDownOutside","e","preventDefault","onInteractOutside","data-animation-direction","displayName","DrawerRoot","isVisible","onClose","Root","open","onOpenChange","nextVisible","modal","Portal","DrawerScrollableContent","isContentExpanded","data-collapsed","ScrollArea","DrawerCloseButton","label","formatMessage","useIntl","labelMessage","id","defaultMessage","onClick","variant","Cross","Drawer","Body","ScrollableContent","CloseButton","Title","Description"],"mappings":"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"}
+{"version":3,"file":"Drawer.js","sources":["../../../../admin/src/future/components/Drawer.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport * as Dialog from '@radix-ui/react-dialog';\nimport { Box, ScrollArea, IconButton, Flex, FlexProps } from '@strapi/design-system';\nimport { Cross } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { keyframes, styled } from 'styled-components';\n\n/** Duration of the close animation in ms. Use for timing cleanup (e.g. removing URL params). */\nexport const DRAWER_CLOSE_ANIMATION_MS = 300;\n\n/* -------------------------------------------------------------------------------------------------\n * Animations\n * -----------------------------------------------------------------------------------------------*/\n\n// Direction: up\nconst slideUpFromBottomIn = keyframes`\n  from {\n    opacity: 0;\n    transform: translateY(100%);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n`;\n\nconst slideUpFromBottomOut = keyframes`\n  from {\n    opacity: 1;\n    transform: translateY(0);\n  }\n  to {\n    opacity: 0;\n    transform: translateY(100%);\n  }\n`;\n\n// Direction: left\nconst slideLeftFromRightIn = keyframes`\n  from {\n    opacity: 0;\n    transform: translateX(100%);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n`;\n\nconst slideLeftFromRightOut = keyframes`\n  from {\n    opacity: 1;\n    transform: translateX(0);\n  }\n  to {\n    opacity: 0;\n    transform: translateX(100%);\n  }\n`;\n\n/* -------------------------------------------------------------------------------------------------\n * Styled components\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DrawerContainerProps {\n  $animationDirection?: DrawerBodyProps['animationDirection'];\n}\n\nconst DrawerContainer = styled(Flex)<DrawerContainerProps>`\n  flex-direction: column;\n  position: fixed;\n  bottom: 0;\n  right: 0;\n  padding: ${({ theme }) => theme.spaces[2]};\n  max-width: 100%;\n  /* Sit just below the overlay token (300) so that:\n     - popovers (500) and tooltips (1000) rendered from descendant components\n       surface above the drawer panel,\n     - AlertDialog overlays (300) and contents (310) opened from inside the\n       drawer (e.g. the asset details \"delete\" confirm) cover the drawer. */\n  z-index: 200;\n  overflow: hidden;\n  width: ${({ width }) => width ?? '400px'};\n  /* dvh, not vh: anchored to the bottom, a 100vh cap on mobile (visual\n     viewport < 100vh under the URL bar) would push the drawer top off-screen. */\n  max-height: ${({ maxHeight }) => maxHeight ?? '100dvh'};\n\n  &:focus {\n    outline: none;\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    &[data-state='open'] {\n      animation: ${({ $animationDirection }) =>\n          $animationDirection === 'up' ? slideUpFromBottomIn : slideLeftFromRightIn}\n        ${DRAWER_CLOSE_ANIMATION_MS}ms cubic-bezier(0.32, 0.72, 0, 1) forwards;\n    }\n\n    &[data-state='closed'] {\n      animation: ${({ $animationDirection }) =>\n          $animationDirection === 'up' ? slideUpFromBottomOut : slideLeftFromRightOut}\n        ${DRAWER_CLOSE_ANIMATION_MS}ms cubic-bezier(0.32, 0.72, 0, 1) forwards;\n      pointer-events: none;\n    }\n  }\n`;\n\nconst DrawerContent = styled(Box)`\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-height: 0;\n  width: 100%;\n  background-color: ${({ theme }) => theme.colors.neutral0};\n  border-radius: ${({ theme }) => theme.borderRadius};\n  box-shadow: ${({ theme }) => theme.shadows.popupShadow};\n  overflow: hidden;\n  border: 1px solid ${({ theme }) => theme.colors.neutral150};\n`;\n\ninterface CollapsibleContentProps {\n  $isVisible: boolean;\n}\n\nconst CollapsibleContent = styled(Box)<CollapsibleContentProps>`\n  display: grid;\n  flex: 1;\n  min-height: 0;\n  grid-template-rows: ${({ $isVisible }) => ($isVisible ? '1fr' : '0fr')};\n  transition: grid-template-rows 0.3s ease-in-out;\n\n  > div {\n    overflow: hidden;\n    min-height: 0;\n  }\n`;\n\nconst CloseIconButton = styled(IconButton)`\n  &:hover {\n    background: transparent;\n  }\n`;\n\n/* -------------------------------------------------------------------------------------------------\n * Drawer.Body\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DrawerBodyProps extends FlexProps {\n  animationDirection?: 'up' | 'left';\n  children: React.ReactNode;\n}\n\nconst DrawerBody = React.forwardRef<HTMLDivElement, DrawerBodyProps>(\n  ({ animationDirection, children, ...props }, ref) => (\n    <Dialog.Content\n      ref={ref}\n      forceMount\n      asChild\n      onPointerDownOutside={(e) => e.preventDefault()}\n      onInteractOutside={(e) => e.preventDefault()}\n      data-animation-direction={animationDirection}\n    >\n      <DrawerContainer $animationDirection={animationDirection} {...props}>\n        <DrawerContent>{children}</DrawerContent>\n      </DrawerContainer>\n    </Dialog.Content>\n  )\n);\nDrawerBody.displayName = 'DrawerBody';\n\n/* -------------------------------------------------------------------------------------------------\n * Drawer.Root\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DrawerRootProps {\n  isVisible?: boolean;\n  onClose?: () => void;\n  children: React.ReactNode;\n}\n\nconst DrawerRoot = ({ isVisible, onClose, children }: DrawerRootProps): React.ReactElement => (\n  <Dialog.Root\n    open={isVisible}\n    onOpenChange={(nextVisible) => !nextVisible && onClose?.()}\n    modal={false}\n  >\n    <Dialog.Portal>{children}</Dialog.Portal>\n  </Dialog.Root>\n);\n\n/* -------------------------------------------------------------------------------------------------\n * Drawer.Content - composable content slot (collapsible when isContentExpanded is used)\n * Contains a scrollable area\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DrawerScrollableContentProps {\n  children: React.ReactNode;\n  /** When provided, content can collapse/expand (e.g. for minimize). Omit to always show. */\n  isContentExpanded?: boolean;\n}\n\nconst DrawerScrollableContent = ({\n  children,\n  isContentExpanded = true,\n}: DrawerScrollableContentProps) => (\n  <CollapsibleContent $isVisible={isContentExpanded} data-collapsed={!isContentExpanded}>\n    <ScrollArea>{children}</ScrollArea>\n  </CollapsibleContent>\n);\n\n/* -------------------------------------------------------------------------------------------------\n * Drawer.CloseButton - composable close icon button (Cross icon by default)\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DrawerCloseButtonProps extends React.PropsWithChildren {\n  onClose: () => void;\n  label?: string;\n}\n\nconst DrawerCloseButton = ({ onClose, label, children }: DrawerCloseButtonProps) => {\n  const { formatMessage } = useIntl();\n  const labelMessage = label ?? formatMessage({ id: 'global.close', defaultMessage: 'Close' });\n  return (\n    <CloseIconButton onClick={onClose} label={labelMessage} variant=\"ghost\">\n      {children ?? <Cross />}\n    </CloseIconButton>\n  );\n};\n\nconst Drawer = {\n  Root: DrawerRoot,\n  Body: DrawerBody,\n  ScrollableContent: DrawerScrollableContent,\n  CloseButton: DrawerCloseButton,\n  Title: Dialog.Title,\n  Description: Dialog.Description,\n};\n\nexport { Drawer };\n"],"names":["DRAWER_CLOSE_ANIMATION_MS","slideUpFromBottomIn","keyframes","slideUpFromBottomOut","slideLeftFromRightIn","slideLeftFromRightOut","DrawerContainer","styled","Flex","theme","spaces","width","maxHeight","$animationDirection","DrawerContent","Box","colors","neutral0","borderRadius","shadows","popupShadow","neutral150","CollapsibleContent","$isVisible","CloseIconButton","IconButton","DrawerBody","React","forwardRef","animationDirection","children","props","ref","_jsx","Dialog","Content","forceMount","asChild","onPointerDownOutside","e","preventDefault","onInteractOutside","data-animation-direction","displayName","DrawerRoot","isVisible","onClose","Root","open","onOpenChange","nextVisible","modal","Portal","DrawerScrollableContent","isContentExpanded","data-collapsed","ScrollArea","DrawerCloseButton","label","formatMessage","useIntl","labelMessage","id","defaultMessage","onClick","variant","Cross","Drawer","Body","ScrollableContent","CloseButton","Title","Description"],"mappings":"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"}

package/dist/admin/future/components/Drawer.mjs

@@ -66,7 +66,9 @@ const DrawerContainer = styled(Flex)`
   z-index: 200;
   overflow: hidden;
   width: ${({ width })=>width ?? '400px'};
-  max-height: ${({ maxHeight })=>maxHeight ?? '100vh'};
+  /* dvh, not vh: anchored to the bottom, a 100vh cap on mobile (visual
+     viewport < 100vh under the URL bar) would push the drawer top off-screen. */
+  max-height: ${({ maxHeight })=>maxHeight ?? '100dvh'};
 
   &:focus {
     outline: none;

package/dist/admin/future/components/Drawer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.mjs","sources":["../../../../admin/src/future/components/Drawer.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport * as Dialog from '@radix-ui/react-dialog';\nimport { Box, ScrollArea, IconButton, Flex, FlexProps } from '@strapi/design-system';\nimport { Cross } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { keyframes, styled } from 'styled-components';\n\n/** Duration of the close animation in ms. Use for timing cleanup (e.g. removing URL params). */\nexport const DRAWER_CLOSE_ANIMATION_MS = 300;\n\n/* -------------------------------------------------------------------------------------------------\n * Animations\n * -----------------------------------------------------------------------------------------------*/\n\n// Direction: up\nconst slideUpFromBottomIn = keyframes`\n  from {\n    opacity: 0;\n    transform: translateY(100%);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n`;\n\nconst slideUpFromBottomOut = keyframes`\n  from {\n    opacity: 1;\n    transform: translateY(0);\n  }\n  to {\n    opacity: 0;\n    transform: translateY(100%);\n  }\n`;\n\n// Direction: left\nconst slideLeftFromRightIn = keyframes`\n  from {\n    opacity: 0;\n    transform: translateX(100%);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n`;\n\nconst slideLeftFromRightOut = keyframes`\n  from {\n    opacity: 1;\n    transform: translateX(0);\n  }\n  to {\n    opacity: 0;\n    transform: translateX(100%);\n  }\n`;\n\n/* -------------------------------------------------------------------------------------------------\n * Styled components\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DrawerContainerProps {\n  $animationDirection?: DrawerBodyProps['animationDirection'];\n}\n\nconst DrawerContainer = styled(Flex)<DrawerContainerProps>`\n  flex-direction: column;\n  position: fixed;\n  bottom: 0;\n  right: 0;\n  padding: ${({ theme }) => theme.spaces[2]};\n  max-width: 100%;\n  /* Sit just below the overlay token (300) so that:\n     - popovers (500) and tooltips (1000) rendered from descendant components\n       surface above the drawer panel,\n     - AlertDialog overlays (300) and contents (310) opened from inside the\n       drawer (e.g. the asset details \"delete\" confirm) cover the drawer. */\n  z-index: 200;\n  overflow: hidden;\n  width: ${({ width }) => width ?? '400px'};\n  max-height: ${({ maxHeight }) => maxHeight ?? '100vh'};\n\n  &:focus {\n    outline: none;\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    &[data-state='open'] {\n      animation: ${({ $animationDirection }) =>\n          $animationDirection === 'up' ? slideUpFromBottomIn : slideLeftFromRightIn}\n        ${DRAWER_CLOSE_ANIMATION_MS}ms cubic-bezier(0.32, 0.72, 0, 1) forwards;\n    }\n\n    &[data-state='closed'] {\n      animation: ${({ $animationDirection }) =>\n          $animationDirection === 'up' ? slideUpFromBottomOut : slideLeftFromRightOut}\n        ${DRAWER_CLOSE_ANIMATION_MS}ms cubic-bezier(0.32, 0.72, 0, 1) forwards;\n      pointer-events: none;\n    }\n  }\n`;\n\nconst DrawerContent = styled(Box)`\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-height: 0;\n  width: 100%;\n  background-color: ${({ theme }) => theme.colors.neutral0};\n  border-radius: ${({ theme }) => theme.borderRadius};\n  box-shadow: ${({ theme }) => theme.shadows.popupShadow};\n  overflow: hidden;\n  border: 1px solid ${({ theme }) => theme.colors.neutral150};\n`;\n\ninterface CollapsibleContentProps {\n  $isVisible: boolean;\n}\n\nconst CollapsibleContent = styled(Box)<CollapsibleContentProps>`\n  display: grid;\n  flex: 1;\n  min-height: 0;\n  grid-template-rows: ${({ $isVisible }) => ($isVisible ? '1fr' : '0fr')};\n  transition: grid-template-rows 0.3s ease-in-out;\n\n  > div {\n    overflow: hidden;\n    min-height: 0;\n  }\n`;\n\nconst CloseIconButton = styled(IconButton)`\n  &:hover {\n    background: transparent;\n  }\n`;\n\n/* -------------------------------------------------------------------------------------------------\n * Drawer.Body\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DrawerBodyProps extends FlexProps {\n  animationDirection?: 'up' | 'left';\n  children: React.ReactNode;\n}\n\nconst DrawerBody = React.forwardRef<HTMLDivElement, DrawerBodyProps>(\n  ({ animationDirection, children, ...props }, ref) => (\n    <Dialog.Content\n      ref={ref}\n      forceMount\n      asChild\n      onPointerDownOutside={(e) => e.preventDefault()}\n      onInteractOutside={(e) => e.preventDefault()}\n      data-animation-direction={animationDirection}\n    >\n      <DrawerContainer $animationDirection={animationDirection} {...props}>\n        <DrawerContent>{children}</DrawerContent>\n      </DrawerContainer>\n    </Dialog.Content>\n  )\n);\nDrawerBody.displayName = 'DrawerBody';\n\n/* -------------------------------------------------------------------------------------------------\n * Drawer.Root\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DrawerRootProps {\n  isVisible?: boolean;\n  onClose?: () => void;\n  children: React.ReactNode;\n}\n\nconst DrawerRoot = ({ isVisible, onClose, children }: DrawerRootProps): React.ReactElement => (\n  <Dialog.Root\n    open={isVisible}\n    onOpenChange={(nextVisible) => !nextVisible && onClose?.()}\n    modal={false}\n  >\n    <Dialog.Portal>{children}</Dialog.Portal>\n  </Dialog.Root>\n);\n\n/* -------------------------------------------------------------------------------------------------\n * Drawer.Content - composable content slot (collapsible when isContentExpanded is used)\n * Contains a scrollable area\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DrawerScrollableContentProps {\n  children: React.ReactNode;\n  /** When provided, content can collapse/expand (e.g. for minimize). Omit to always show. */\n  isContentExpanded?: boolean;\n}\n\nconst DrawerScrollableContent = ({\n  children,\n  isContentExpanded = true,\n}: DrawerScrollableContentProps) => (\n  <CollapsibleContent $isVisible={isContentExpanded} data-collapsed={!isContentExpanded}>\n    <ScrollArea>{children}</ScrollArea>\n  </CollapsibleContent>\n);\n\n/* -------------------------------------------------------------------------------------------------\n * Drawer.CloseButton - composable close icon button (Cross icon by default)\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DrawerCloseButtonProps extends React.PropsWithChildren {\n  onClose: () => void;\n  label?: string;\n}\n\nconst DrawerCloseButton = ({ onClose, label, children }: DrawerCloseButtonProps) => {\n  const { formatMessage } = useIntl();\n  const labelMessage = label ?? formatMessage({ id: 'global.close', defaultMessage: 'Close' });\n  return (\n    <CloseIconButton onClick={onClose} label={labelMessage} variant=\"ghost\">\n      {children ?? <Cross />}\n    </CloseIconButton>\n  );\n};\n\nconst Drawer = {\n  Root: DrawerRoot,\n  Body: DrawerBody,\n  ScrollableContent: DrawerScrollableContent,\n  CloseButton: DrawerCloseButton,\n  Title: Dialog.Title,\n  Description: Dialog.Description,\n};\n\nexport { Drawer };\n"],"names":["DRAWER_CLOSE_ANIMATION_MS","slideUpFromBottomIn","keyframes","slideUpFromBottomOut","slideLeftFromRightIn","slideLeftFromRightOut","DrawerContainer","styled","Flex","theme","spaces","width","maxHeight","$animationDirection","DrawerContent","Box","colors","neutral0","borderRadius","shadows","popupShadow","neutral150","CollapsibleContent","$isVisible","CloseIconButton","IconButton","DrawerBody","React","forwardRef","animationDirection","children","props","ref","_jsx","Dialog","Content","forceMount","asChild","onPointerDownOutside","e","preventDefault","onInteractOutside","data-animation-direction","displayName","DrawerRoot","isVisible","onClose","Root","open","onOpenChange","nextVisible","modal","Portal","DrawerScrollableContent","isContentExpanded","data-collapsed","ScrollArea","DrawerCloseButton","label","formatMessage","useIntl","labelMessage","id","defaultMessage","onClick","variant","Cross","Drawer","Body","ScrollableContent","CloseButton","Title","Description"],"mappings":"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"}
+{"version":3,"file":"Drawer.mjs","sources":["../../../../admin/src/future/components/Drawer.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport * as Dialog from '@radix-ui/react-dialog';\nimport { Box, ScrollArea, IconButton, Flex, FlexProps } from '@strapi/design-system';\nimport { Cross } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { keyframes, styled } from 'styled-components';\n\n/** Duration of the close animation in ms. Use for timing cleanup (e.g. removing URL params). */\nexport const DRAWER_CLOSE_ANIMATION_MS = 300;\n\n/* -------------------------------------------------------------------------------------------------\n * Animations\n * -----------------------------------------------------------------------------------------------*/\n\n// Direction: up\nconst slideUpFromBottomIn = keyframes`\n  from {\n    opacity: 0;\n    transform: translateY(100%);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n`;\n\nconst slideUpFromBottomOut = keyframes`\n  from {\n    opacity: 1;\n    transform: translateY(0);\n  }\n  to {\n    opacity: 0;\n    transform: translateY(100%);\n  }\n`;\n\n// Direction: left\nconst slideLeftFromRightIn = keyframes`\n  from {\n    opacity: 0;\n    transform: translateX(100%);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n`;\n\nconst slideLeftFromRightOut = keyframes`\n  from {\n    opacity: 1;\n    transform: translateX(0);\n  }\n  to {\n    opacity: 0;\n    transform: translateX(100%);\n  }\n`;\n\n/* -------------------------------------------------------------------------------------------------\n * Styled components\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DrawerContainerProps {\n  $animationDirection?: DrawerBodyProps['animationDirection'];\n}\n\nconst DrawerContainer = styled(Flex)<DrawerContainerProps>`\n  flex-direction: column;\n  position: fixed;\n  bottom: 0;\n  right: 0;\n  padding: ${({ theme }) => theme.spaces[2]};\n  max-width: 100%;\n  /* Sit just below the overlay token (300) so that:\n     - popovers (500) and tooltips (1000) rendered from descendant components\n       surface above the drawer panel,\n     - AlertDialog overlays (300) and contents (310) opened from inside the\n       drawer (e.g. the asset details \"delete\" confirm) cover the drawer. */\n  z-index: 200;\n  overflow: hidden;\n  width: ${({ width }) => width ?? '400px'};\n  /* dvh, not vh: anchored to the bottom, a 100vh cap on mobile (visual\n     viewport < 100vh under the URL bar) would push the drawer top off-screen. */\n  max-height: ${({ maxHeight }) => maxHeight ?? '100dvh'};\n\n  &:focus {\n    outline: none;\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    &[data-state='open'] {\n      animation: ${({ $animationDirection }) =>\n          $animationDirection === 'up' ? slideUpFromBottomIn : slideLeftFromRightIn}\n        ${DRAWER_CLOSE_ANIMATION_MS}ms cubic-bezier(0.32, 0.72, 0, 1) forwards;\n    }\n\n    &[data-state='closed'] {\n      animation: ${({ $animationDirection }) =>\n          $animationDirection === 'up' ? slideUpFromBottomOut : slideLeftFromRightOut}\n        ${DRAWER_CLOSE_ANIMATION_MS}ms cubic-bezier(0.32, 0.72, 0, 1) forwards;\n      pointer-events: none;\n    }\n  }\n`;\n\nconst DrawerContent = styled(Box)`\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-height: 0;\n  width: 100%;\n  background-color: ${({ theme }) => theme.colors.neutral0};\n  border-radius: ${({ theme }) => theme.borderRadius};\n  box-shadow: ${({ theme }) => theme.shadows.popupShadow};\n  overflow: hidden;\n  border: 1px solid ${({ theme }) => theme.colors.neutral150};\n`;\n\ninterface CollapsibleContentProps {\n  $isVisible: boolean;\n}\n\nconst CollapsibleContent = styled(Box)<CollapsibleContentProps>`\n  display: grid;\n  flex: 1;\n  min-height: 0;\n  grid-template-rows: ${({ $isVisible }) => ($isVisible ? '1fr' : '0fr')};\n  transition: grid-template-rows 0.3s ease-in-out;\n\n  > div {\n    overflow: hidden;\n    min-height: 0;\n  }\n`;\n\nconst CloseIconButton = styled(IconButton)`\n  &:hover {\n    background: transparent;\n  }\n`;\n\n/* -------------------------------------------------------------------------------------------------\n * Drawer.Body\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DrawerBodyProps extends FlexProps {\n  animationDirection?: 'up' | 'left';\n  children: React.ReactNode;\n}\n\nconst DrawerBody = React.forwardRef<HTMLDivElement, DrawerBodyProps>(\n  ({ animationDirection, children, ...props }, ref) => (\n    <Dialog.Content\n      ref={ref}\n      forceMount\n      asChild\n      onPointerDownOutside={(e) => e.preventDefault()}\n      onInteractOutside={(e) => e.preventDefault()}\n      data-animation-direction={animationDirection}\n    >\n      <DrawerContainer $animationDirection={animationDirection} {...props}>\n        <DrawerContent>{children}</DrawerContent>\n      </DrawerContainer>\n    </Dialog.Content>\n  )\n);\nDrawerBody.displayName = 'DrawerBody';\n\n/* -------------------------------------------------------------------------------------------------\n * Drawer.Root\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DrawerRootProps {\n  isVisible?: boolean;\n  onClose?: () => void;\n  children: React.ReactNode;\n}\n\nconst DrawerRoot = ({ isVisible, onClose, children }: DrawerRootProps): React.ReactElement => (\n  <Dialog.Root\n    open={isVisible}\n    onOpenChange={(nextVisible) => !nextVisible && onClose?.()}\n    modal={false}\n  >\n    <Dialog.Portal>{children}</Dialog.Portal>\n  </Dialog.Root>\n);\n\n/* -------------------------------------------------------------------------------------------------\n * Drawer.Content - composable content slot (collapsible when isContentExpanded is used)\n * Contains a scrollable area\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DrawerScrollableContentProps {\n  children: React.ReactNode;\n  /** When provided, content can collapse/expand (e.g. for minimize). Omit to always show. */\n  isContentExpanded?: boolean;\n}\n\nconst DrawerScrollableContent = ({\n  children,\n  isContentExpanded = true,\n}: DrawerScrollableContentProps) => (\n  <CollapsibleContent $isVisible={isContentExpanded} data-collapsed={!isContentExpanded}>\n    <ScrollArea>{children}</ScrollArea>\n  </CollapsibleContent>\n);\n\n/* -------------------------------------------------------------------------------------------------\n * Drawer.CloseButton - composable close icon button (Cross icon by default)\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DrawerCloseButtonProps extends React.PropsWithChildren {\n  onClose: () => void;\n  label?: string;\n}\n\nconst DrawerCloseButton = ({ onClose, label, children }: DrawerCloseButtonProps) => {\n  const { formatMessage } = useIntl();\n  const labelMessage = label ?? formatMessage({ id: 'global.close', defaultMessage: 'Close' });\n  return (\n    <CloseIconButton onClick={onClose} label={labelMessage} variant=\"ghost\">\n      {children ?? <Cross />}\n    </CloseIconButton>\n  );\n};\n\nconst Drawer = {\n  Root: DrawerRoot,\n  Body: DrawerBody,\n  ScrollableContent: DrawerScrollableContent,\n  CloseButton: DrawerCloseButton,\n  Title: Dialog.Title,\n  Description: Dialog.Description,\n};\n\nexport { Drawer };\n"],"names":["DRAWER_CLOSE_ANIMATION_MS","slideUpFromBottomIn","keyframes","slideUpFromBottomOut","slideLeftFromRightIn","slideLeftFromRightOut","DrawerContainer","styled","Flex","theme","spaces","width","maxHeight","$animationDirection","DrawerContent","Box","colors","neutral0","borderRadius","shadows","popupShadow","neutral150","CollapsibleContent","$isVisible","CloseIconButton","IconButton","DrawerBody","React","forwardRef","animationDirection","children","props","ref","_jsx","Dialog","Content","forceMount","asChild","onPointerDownOutside","e","preventDefault","onInteractOutside","data-animation-direction","displayName","DrawerRoot","isVisible","onClose","Root","open","onOpenChange","nextVisible","modal","Portal","DrawerScrollableContent","isContentExpanded","data-collapsed","ScrollArea","DrawerCloseButton","label","formatMessage","useIntl","labelMessage","id","defaultMessage","onClick","variant","Cross","Drawer","Body","ScrollableContent","CloseButton","Title","Description"],"mappings":"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"}