@strapi/upload 5.12.0 → 5.12.2

package/dist/admin/components/AssetDialog/BrowseStep/utils/isSelectable.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"isSelectable.mjs","sources":["../../../../../../admin/src/components/AssetDialog/BrowseStep/utils/isSelectable.ts"],"sourcesContent":["export const isSelectable = (allowedTypes: string[], mime = '') => {\n  if (!mime) return false;\n\n  const fileType = mime.split('/')[0];\n\n  return (\n    allowedTypes.includes(fileType) ||\n    (allowedTypes.includes('file') && !['video', 'image', 'audio'].includes(fileType))\n  );\n};\n"],"names":["isSelectable","allowedTypes","mime","fileType","split","includes"],"mappings":"AAAaA,MAAAA,YAAAA,GAAe,CAACC,YAAAA,EAAwBC,OAAO,EAAE,GAAA;IAC5D,IAAI,CAACA,MAAM,OAAO,KAAA;AAElB,IAAA,MAAMC,WAAWD,IAAKE,CAAAA,KAAK,CAAC,GAAA,CAAI,CAAC,CAAE,CAAA;IAEnC,OACEH,YAAAA,CAAaI,QAAQ,CAACF,QAAAA,CAAAA,IACrBF,aAAaI,QAAQ,CAAC,WAAW,CAAC;AAAC,QAAA,OAAA;AAAS,QAAA,OAAA;AAAS,QAAA;AAAQ,KAAA,CAACA,QAAQ,CAACF,QAAAA,CAAAA;AAE5E;;;;"}

package/dist/admin/components/AssetDialog/DialogFooter.js

@@ -0,0 +1,31 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var designSystem = require('@strapi/design-system');
+var reactIntl = require('react-intl');
+
+const DialogFooter = ({ onClose, onValidate })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Modal.Footer, {
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Button, {
+                onClick: onClose,
+                variant: "tertiary",
+                children: formatMessage({
+                    id: 'app.components.Button.cancel',
+                    defaultMessage: 'Cancel'
+                })
+            }),
+            onValidate && /*#__PURE__*/ jsxRuntime.jsx(designSystem.Button, {
+                onClick: onValidate,
+                children: formatMessage({
+                    id: 'global.finish',
+                    defaultMessage: 'Finish'
+                })
+            })
+        ]
+    });
+};
+
+exports.DialogFooter = DialogFooter;
+//# sourceMappingURL=DialogFooter.js.map

package/dist/admin/components/AssetDialog/DialogFooter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogFooter.js","sources":["../../../../admin/src/components/AssetDialog/DialogFooter.tsx"],"sourcesContent":["import { Button, Modal } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\ninterface DialogFooterProps {\n  onClose: () => void;\n  onValidate?: () => void;\n}\n\nexport const DialogFooter = ({ onClose, onValidate }: DialogFooterProps) => {\n  const { formatMessage } = useIntl();\n\n  return (\n    <Modal.Footer>\n      <Button onClick={onClose} variant=\"tertiary\">\n        {formatMessage({ id: 'app.components.Button.cancel', defaultMessage: 'Cancel' })}\n      </Button>\n      {onValidate && (\n        <Button onClick={onValidate}>\n          {formatMessage({ id: 'global.finish', defaultMessage: 'Finish' })}\n        </Button>\n      )}\n    </Modal.Footer>\n  );\n};\n"],"names":["DialogFooter","onClose","onValidate","formatMessage","useIntl","_jsxs","Modal","Footer","_jsx","Button","onClick","variant","id","defaultMessage"],"mappings":";;;;;;MAQaA,YAAe,GAAA,CAAC,EAAEC,OAAO,EAAEC,UAAU,EAAqB,GAAA;IACrE,MAAM,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;IAE1B,qBACEC,eAAA,CAACC,mBAAMC,MAAM,EAAA;;0BACXC,cAACC,CAAAA,mBAAAA,EAAAA;gBAAOC,OAAST,EAAAA,OAAAA;gBAASU,OAAQ,EAAA,UAAA;0BAC/BR,aAAc,CAAA;oBAAES,EAAI,EAAA,8BAAA;oBAAgCC,cAAgB,EAAA;AAAS,iBAAA;;AAE/EX,YAAAA,UAAAA,kBACCM,cAACC,CAAAA,mBAAAA,EAAAA;gBAAOC,OAASR,EAAAA,UAAAA;0BACdC,aAAc,CAAA;oBAAES,EAAI,EAAA,eAAA;oBAAiBC,cAAgB,EAAA;AAAS,iBAAA;;;;AAKzE;;;;"}

package/dist/admin/components/AssetDialog/DialogFooter.mjs

@@ -0,0 +1,29 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Modal, Button } from '@strapi/design-system';
+import { useIntl } from 'react-intl';
+
+const DialogFooter = ({ onClose, onValidate })=>{
+    const { formatMessage } = useIntl();
+    return /*#__PURE__*/ jsxs(Modal.Footer, {
+        children: [
+            /*#__PURE__*/ jsx(Button, {
+                onClick: onClose,
+                variant: "tertiary",
+                children: formatMessage({
+                    id: 'app.components.Button.cancel',
+                    defaultMessage: 'Cancel'
+                })
+            }),
+            onValidate && /*#__PURE__*/ jsx(Button, {
+                onClick: onValidate,
+                children: formatMessage({
+                    id: 'global.finish',
+                    defaultMessage: 'Finish'
+                })
+            })
+        ]
+    });
+};
+
+export { DialogFooter };
+//# sourceMappingURL=DialogFooter.mjs.map

package/dist/admin/components/AssetDialog/DialogFooter.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogFooter.mjs","sources":["../../../../admin/src/components/AssetDialog/DialogFooter.tsx"],"sourcesContent":["import { Button, Modal } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\ninterface DialogFooterProps {\n  onClose: () => void;\n  onValidate?: () => void;\n}\n\nexport const DialogFooter = ({ onClose, onValidate }: DialogFooterProps) => {\n  const { formatMessage } = useIntl();\n\n  return (\n    <Modal.Footer>\n      <Button onClick={onClose} variant=\"tertiary\">\n        {formatMessage({ id: 'app.components.Button.cancel', defaultMessage: 'Cancel' })}\n      </Button>\n      {onValidate && (\n        <Button onClick={onValidate}>\n          {formatMessage({ id: 'global.finish', defaultMessage: 'Finish' })}\n        </Button>\n      )}\n    </Modal.Footer>\n  );\n};\n"],"names":["DialogFooter","onClose","onValidate","formatMessage","useIntl","_jsxs","Modal","Footer","_jsx","Button","onClick","variant","id","defaultMessage"],"mappings":";;;;MAQaA,YAAe,GAAA,CAAC,EAAEC,OAAO,EAAEC,UAAU,EAAqB,GAAA;IACrE,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;IAE1B,qBACEC,IAAA,CAACC,MAAMC,MAAM,EAAA;;0BACXC,GAACC,CAAAA,MAAAA,EAAAA;gBAAOC,OAAST,EAAAA,OAAAA;gBAASU,OAAQ,EAAA,UAAA;0BAC/BR,aAAc,CAAA;oBAAES,EAAI,EAAA,8BAAA;oBAAgCC,cAAgB,EAAA;AAAS,iBAAA;;AAE/EX,YAAAA,UAAAA,kBACCM,GAACC,CAAAA,MAAAA,EAAAA;gBAAOC,OAASR,EAAAA,UAAAA;0BACdC,aAAc,CAAA;oBAAES,EAAI,EAAA,eAAA;oBAAiBC,cAAgB,EAAA;AAAS,iBAAA;;;;AAKzE;;;;"}

package/dist/admin/components/AssetDialog/SelectedStep/SelectedStep.js

@@ -0,0 +1,60 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var designSystem = require('@strapi/design-system');
+var reactIntl = require('react-intl');
+require('byte-size');
+require('date-fns');
+var getTrad = require('../../../utils/getTrad.js');
+require('qs');
+require('../../../constants.js');
+require('../../../utils/urlYupSchema.js');
+var AssetGridList = require('../../AssetGridList/AssetGridList.js');
+
+// TODO: find a better naming convention for the file that was an index file before
+const SelectedStep = ({ selectedAssets, onSelectAsset, onReorderAsset })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+        direction: "column",
+        alignItems: "stretch",
+        gap: 4,
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                gap: 0,
+                direction: "column",
+                alignItems: "start",
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                        variant: "pi",
+                        fontWeight: "bold",
+                        textColor: "neutral800",
+                        children: formatMessage({
+                            id: getTrad.getTrad('list.assets.to-upload'),
+                            defaultMessage: '{number, plural, =0 {No asset} one {1 asset} other {# assets}} ready to upload'
+                        }, {
+                            number: selectedAssets.length
+                        })
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                        variant: "pi",
+                        textColor: "neutral600",
+                        children: formatMessage({
+                            id: getTrad.getTrad('modal.upload-list.sub-header-subtitle'),
+                            defaultMessage: 'Manage the assets before adding them to the Media Library'
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(AssetGridList.AssetGridList, {
+                size: "S",
+                assets: selectedAssets,
+                onSelectAsset: onSelectAsset,
+                selectedAssets: selectedAssets,
+                onReorderAsset: onReorderAsset
+            })
+        ]
+    });
+};
+
+exports.SelectedStep = SelectedStep;
+//# sourceMappingURL=SelectedStep.js.map

package/dist/admin/components/AssetDialog/SelectedStep/SelectedStep.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectedStep.js","sources":["../../../../../admin/src/components/AssetDialog/SelectedStep/SelectedStep.tsx"],"sourcesContent":["// TODO: find a better naming convention for the file that was an index file before\nimport { Flex, Typography } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { getTrad } from '../../../utils';\nimport { AssetGridList } from '../../AssetGridList/AssetGridList';\n\nimport type { File } from '../../../../../shared/contracts/files';\n\ninterface SelectedStepProps {\n  onSelectAsset: (asset: File) => void;\n  selectedAssets: File[];\n  onReorderAsset?: (fromIndex: number, toIndex: number) => void;\n}\n\nexport const SelectedStep = ({\n  selectedAssets,\n  onSelectAsset,\n  onReorderAsset,\n}: SelectedStepProps) => {\n  const { formatMessage } = useIntl();\n\n  return (\n    <Flex direction=\"column\" alignItems=\"stretch\" gap={4}>\n      <Flex gap={0} direction=\"column\" alignItems=\"start\">\n        <Typography variant=\"pi\" fontWeight=\"bold\" textColor=\"neutral800\">\n          {formatMessage(\n            {\n              id: getTrad('list.assets.to-upload'),\n              defaultMessage:\n                '{number, plural, =0 {No asset} one {1 asset} other {# assets}} ready to upload',\n            },\n            { number: selectedAssets.length }\n          )}\n        </Typography>\n        <Typography variant=\"pi\" textColor=\"neutral600\">\n          {formatMessage({\n            id: getTrad('modal.upload-list.sub-header-subtitle'),\n            defaultMessage: 'Manage the assets before adding them to the Media Library',\n          })}\n        </Typography>\n      </Flex>\n\n      <AssetGridList\n        size=\"S\"\n        assets={selectedAssets}\n        onSelectAsset={onSelectAsset}\n        selectedAssets={selectedAssets}\n        onReorderAsset={onReorderAsset}\n      />\n    </Flex>\n  );\n};\n"],"names":["SelectedStep","selectedAssets","onSelectAsset","onReorderAsset","formatMessage","useIntl","_jsxs","Flex","direction","alignItems","gap","_jsx","Typography","variant","fontWeight","textColor","id","getTrad","defaultMessage","number","length","AssetGridList","size","assets"],"mappings":";;;;;;;;;;;;;AAAA;AAeO,MAAMA,eAAe,CAAC,EAC3BC,cAAc,EACdC,aAAa,EACbC,cAAc,EACI,GAAA;IAClB,MAAM,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;AAE1B,IAAA,qBACEC,eAACC,CAAAA,iBAAAA,EAAAA;QAAKC,SAAU,EAAA,QAAA;QAASC,UAAW,EAAA,SAAA;QAAUC,GAAK,EAAA,CAAA;;0BACjDJ,eAACC,CAAAA,iBAAAA,EAAAA;gBAAKG,GAAK,EAAA,CAAA;gBAAGF,SAAU,EAAA,QAAA;gBAASC,UAAW,EAAA,OAAA;;kCAC1CE,cAACC,CAAAA,uBAAAA,EAAAA;wBAAWC,OAAQ,EAAA,IAAA;wBAAKC,UAAW,EAAA,MAAA;wBAAOC,SAAU,EAAA,YAAA;kCAClDX,aACC,CAAA;AACEY,4BAAAA,EAAAA,EAAIC,eAAQ,CAAA,uBAAA,CAAA;4BACZC,cACE,EAAA;yBAEJ,EAAA;AAAEC,4BAAAA,MAAAA,EAAQlB,eAAemB;AAAO,yBAAA;;kCAGpCT,cAACC,CAAAA,uBAAAA,EAAAA;wBAAWC,OAAQ,EAAA,IAAA;wBAAKE,SAAU,EAAA,YAAA;kCAChCX,aAAc,CAAA;AACbY,4BAAAA,EAAAA,EAAIC,eAAQ,CAAA,uCAAA,CAAA;4BACZC,cAAgB,EAAA;AAClB,yBAAA;;;;0BAIJP,cAACU,CAAAA,2BAAAA,EAAAA;gBACCC,IAAK,EAAA,GAAA;gBACLC,MAAQtB,EAAAA,cAAAA;gBACRC,aAAeA,EAAAA,aAAAA;gBACfD,cAAgBA,EAAAA,cAAAA;gBAChBE,cAAgBA,EAAAA;;;;AAIxB;;;;"}

package/dist/admin/components/AssetDialog/SelectedStep/SelectedStep.mjs

@@ -0,0 +1,58 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Flex, Typography } from '@strapi/design-system';
+import { useIntl } from 'react-intl';
+import 'byte-size';
+import 'date-fns';
+import { getTrad } from '../../../utils/getTrad.mjs';
+import 'qs';
+import '../../../constants.mjs';
+import '../../../utils/urlYupSchema.mjs';
+import { AssetGridList } from '../../AssetGridList/AssetGridList.mjs';
+
+// TODO: find a better naming convention for the file that was an index file before
+const SelectedStep = ({ selectedAssets, onSelectAsset, onReorderAsset })=>{
+    const { formatMessage } = useIntl();
+    return /*#__PURE__*/ jsxs(Flex, {
+        direction: "column",
+        alignItems: "stretch",
+        gap: 4,
+        children: [
+            /*#__PURE__*/ jsxs(Flex, {
+                gap: 0,
+                direction: "column",
+                alignItems: "start",
+                children: [
+                    /*#__PURE__*/ jsx(Typography, {
+                        variant: "pi",
+                        fontWeight: "bold",
+                        textColor: "neutral800",
+                        children: formatMessage({
+                            id: getTrad('list.assets.to-upload'),
+                            defaultMessage: '{number, plural, =0 {No asset} one {1 asset} other {# assets}} ready to upload'
+                        }, {
+                            number: selectedAssets.length
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(Typography, {
+                        variant: "pi",
+                        textColor: "neutral600",
+                        children: formatMessage({
+                            id: getTrad('modal.upload-list.sub-header-subtitle'),
+                            defaultMessage: 'Manage the assets before adding them to the Media Library'
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(AssetGridList, {
+                size: "S",
+                assets: selectedAssets,
+                onSelectAsset: onSelectAsset,
+                selectedAssets: selectedAssets,
+                onReorderAsset: onReorderAsset
+            })
+        ]
+    });
+};
+
+export { SelectedStep };
+//# sourceMappingURL=SelectedStep.mjs.map

package/dist/admin/components/AssetDialog/SelectedStep/SelectedStep.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectedStep.mjs","sources":["../../../../../admin/src/components/AssetDialog/SelectedStep/SelectedStep.tsx"],"sourcesContent":["// TODO: find a better naming convention for the file that was an index file before\nimport { Flex, Typography } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { getTrad } from '../../../utils';\nimport { AssetGridList } from '../../AssetGridList/AssetGridList';\n\nimport type { File } from '../../../../../shared/contracts/files';\n\ninterface SelectedStepProps {\n  onSelectAsset: (asset: File) => void;\n  selectedAssets: File[];\n  onReorderAsset?: (fromIndex: number, toIndex: number) => void;\n}\n\nexport const SelectedStep = ({\n  selectedAssets,\n  onSelectAsset,\n  onReorderAsset,\n}: SelectedStepProps) => {\n  const { formatMessage } = useIntl();\n\n  return (\n    <Flex direction=\"column\" alignItems=\"stretch\" gap={4}>\n      <Flex gap={0} direction=\"column\" alignItems=\"start\">\n        <Typography variant=\"pi\" fontWeight=\"bold\" textColor=\"neutral800\">\n          {formatMessage(\n            {\n              id: getTrad('list.assets.to-upload'),\n              defaultMessage:\n                '{number, plural, =0 {No asset} one {1 asset} other {# assets}} ready to upload',\n            },\n            { number: selectedAssets.length }\n          )}\n        </Typography>\n        <Typography variant=\"pi\" textColor=\"neutral600\">\n          {formatMessage({\n            id: getTrad('modal.upload-list.sub-header-subtitle'),\n            defaultMessage: 'Manage the assets before adding them to the Media Library',\n          })}\n        </Typography>\n      </Flex>\n\n      <AssetGridList\n        size=\"S\"\n        assets={selectedAssets}\n        onSelectAsset={onSelectAsset}\n        selectedAssets={selectedAssets}\n        onReorderAsset={onReorderAsset}\n      />\n    </Flex>\n  );\n};\n"],"names":["SelectedStep","selectedAssets","onSelectAsset","onReorderAsset","formatMessage","useIntl","_jsxs","Flex","direction","alignItems","gap","_jsx","Typography","variant","fontWeight","textColor","id","getTrad","defaultMessage","number","length","AssetGridList","size","assets"],"mappings":";;;;;;;;;;;AAAA;AAeO,MAAMA,eAAe,CAAC,EAC3BC,cAAc,EACdC,aAAa,EACbC,cAAc,EACI,GAAA;IAClB,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;AAE1B,IAAA,qBACEC,IAACC,CAAAA,IAAAA,EAAAA;QAAKC,SAAU,EAAA,QAAA;QAASC,UAAW,EAAA,SAAA;QAAUC,GAAK,EAAA,CAAA;;0BACjDJ,IAACC,CAAAA,IAAAA,EAAAA;gBAAKG,GAAK,EAAA,CAAA;gBAAGF,SAAU,EAAA,QAAA;gBAASC,UAAW,EAAA,OAAA;;kCAC1CE,GAACC,CAAAA,UAAAA,EAAAA;wBAAWC,OAAQ,EAAA,IAAA;wBAAKC,UAAW,EAAA,MAAA;wBAAOC,SAAU,EAAA,YAAA;kCAClDX,aACC,CAAA;AACEY,4BAAAA,EAAAA,EAAIC,OAAQ,CAAA,uBAAA,CAAA;4BACZC,cACE,EAAA;yBAEJ,EAAA;AAAEC,4BAAAA,MAAAA,EAAQlB,eAAemB;AAAO,yBAAA;;kCAGpCT,GAACC,CAAAA,UAAAA,EAAAA;wBAAWC,OAAQ,EAAA,IAAA;wBAAKE,SAAU,EAAA,YAAA;kCAChCX,aAAc,CAAA;AACbY,4BAAAA,EAAAA,EAAIC,OAAQ,CAAA,uCAAA,CAAA;4BACZC,cAAgB,EAAA;AAClB,yBAAA;;;;0BAIJP,GAACU,CAAAA,aAAAA,EAAAA;gBACCC,IAAK,EAAA,GAAA;gBACLC,MAAQtB,EAAAA,cAAAA;gBACRC,aAAeA,EAAAA,aAAAA;gBACfD,cAAgBA,EAAAA,cAAAA;gBAChBE,cAAgBA,EAAAA;;;;AAIxB;;;;"}

package/dist/admin/components/AssetGridList/AssetGridList.js

@@ -0,0 +1,72 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var designSystem = require('@strapi/design-system');
+var AssetCard = require('../AssetCard/AssetCard.js');
+var Draggable = require('./Draggable.js');
+
+// TODO: find a better naming convention for the file that was an index file before
+const AssetGridList = ({ allowedTypes = [
+    'files',
+    'images',
+    'videos',
+    'audios'
+], assets, onEditAsset, onSelectAsset, selectedAssets, size = 'M', onReorderAsset, title = null })=>{
+    return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.KeyboardNavigable, {
+        tagName: "article",
+        children: [
+            title && /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                paddingTop: 2,
+                paddingBottom: 2,
+                children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                    tag: "h2",
+                    variant: "delta",
+                    fontWeight: "semiBold",
+                    children: title
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Grid.Root, {
+                gap: 4,
+                children: assets.map((asset, index)=>{
+                    const isSelected = !!selectedAssets.find((currentAsset)=>currentAsset.id === asset.id);
+                    if (onReorderAsset) {
+                        return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Grid.Item, {
+                            col: 3,
+                            height: "100%",
+                            children: /*#__PURE__*/ jsxRuntime.jsx(Draggable.Draggable, {
+                                index: index,
+                                moveItem: onReorderAsset,
+                                id: asset.id,
+                                children: /*#__PURE__*/ jsxRuntime.jsx(AssetCard.AssetCard, {
+                                    allowedTypes: allowedTypes,
+                                    asset: asset,
+                                    isSelected: isSelected,
+                                    onEdit: onEditAsset ? ()=>onEditAsset(asset) : undefined,
+                                    onSelect: ()=>onSelectAsset(asset),
+                                    size: size
+                                })
+                            })
+                        }, asset.id);
+                    }
+                    return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Grid.Item, {
+                        col: 3,
+                        height: "100%",
+                        direction: "column",
+                        alignItems: "stretch",
+                        children: /*#__PURE__*/ jsxRuntime.jsx(AssetCard.AssetCard, {
+                            allowedTypes: allowedTypes,
+                            asset: asset,
+                            isSelected: isSelected,
+                            onEdit: onEditAsset ? ()=>onEditAsset(asset) : undefined,
+                            onSelect: ()=>onSelectAsset(asset),
+                            size: size
+                        }, asset.id)
+                    }, asset.id);
+                })
+            })
+        ]
+    });
+};
+
+exports.AssetGridList = AssetGridList;
+//# sourceMappingURL=AssetGridList.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AssetGridList.js","sources":["../../../../admin/src/components/AssetGridList/AssetGridList.tsx"],"sourcesContent":["// TODO: find a better naming convention for the file that was an index file before\nimport { Box, Grid, KeyboardNavigable, Typography } from '@strapi/design-system';\n\nimport { AssetCard } from '../AssetCard/AssetCard';\n\nimport { Draggable } from './Draggable';\n\nimport type { File } from '../../../../shared/contracts/files';\nimport type { AllowedTypes } from '../AssetCard/AssetCard';\n\nexport interface AssetGridListProps {\n  allowedTypes?: AllowedTypes[];\n  assets: File[];\n  onEditAsset?: (asset: File) => void;\n  onSelectAsset: (asset: File) => void;\n  selectedAssets: File[];\n  size?: 'S' | 'M';\n  onReorderAsset?: (fromIndex: number, toIndex: number) => void;\n  title?: string | null;\n}\n\nexport const AssetGridList = ({\n  allowedTypes = ['files', 'images', 'videos', 'audios'],\n  assets,\n  onEditAsset,\n  onSelectAsset,\n  selectedAssets,\n  size = 'M',\n  onReorderAsset,\n  title = null,\n}: AssetGridListProps) => {\n  return (\n    <KeyboardNavigable tagName=\"article\">\n      {title && (\n        <Box paddingTop={2} paddingBottom={2}>\n          <Typography tag=\"h2\" variant=\"delta\" fontWeight=\"semiBold\">\n            {title}\n          </Typography>\n        </Box>\n      )}\n\n      <Grid.Root gap={4}>\n        {assets.map((asset, index) => {\n          const isSelected = !!selectedAssets.find((currentAsset) => currentAsset.id === asset.id);\n\n          if (onReorderAsset) {\n            return (\n              <Grid.Item key={asset.id} col={3} height=\"100%\">\n                <Draggable index={index} moveItem={onReorderAsset} id={asset.id}>\n                  <AssetCard\n                    allowedTypes={allowedTypes}\n                    asset={asset}\n                    isSelected={isSelected}\n                    onEdit={onEditAsset ? () => onEditAsset(asset) : undefined}\n                    onSelect={() => onSelectAsset(asset)}\n                    size={size}\n                  />\n                </Draggable>\n              </Grid.Item>\n            );\n          }\n\n          return (\n            <Grid.Item col={3} key={asset.id} height=\"100%\" direction=\"column\" alignItems=\"stretch\">\n              <AssetCard\n                key={asset.id}\n                allowedTypes={allowedTypes}\n                asset={asset}\n                isSelected={isSelected}\n                onEdit={onEditAsset ? () => onEditAsset(asset) : undefined}\n                onSelect={() => onSelectAsset(asset)}\n                size={size}\n              />\n            </Grid.Item>\n          );\n        })}\n      </Grid.Root>\n    </KeyboardNavigable>\n  );\n};\n"],"names":["AssetGridList","allowedTypes","assets","onEditAsset","onSelectAsset","selectedAssets","size","onReorderAsset","title","_jsxs","KeyboardNavigable","tagName","_jsx","Box","paddingTop","paddingBottom","Typography","tag","variant","fontWeight","Grid","Root","gap","map","asset","index","isSelected","find","currentAsset","id","Item","col","height","Draggable","moveItem","AssetCard","onEdit","undefined","onSelect","direction","alignItems"],"mappings":";;;;;;;AAAA;AAqBaA,MAAAA,aAAAA,GAAgB,CAAC,EAC5BC,YAAe,GAAA;AAAC,IAAA,OAAA;AAAS,IAAA,QAAA;AAAU,IAAA,QAAA;AAAU,IAAA;AAAS,CAAA,EACtDC,MAAM,EACNC,WAAW,EACXC,aAAa,EACbC,cAAc,EACdC,IAAAA,GAAO,GAAG,EACVC,cAAc,EACdC,KAAAA,GAAQ,IAAI,EACO,GAAA;AACnB,IAAA,qBACEC,eAACC,CAAAA,8BAAAA,EAAAA;QAAkBC,OAAQ,EAAA,SAAA;;AACxBH,YAAAA,KAAAA,kBACCI,cAACC,CAAAA,gBAAAA,EAAAA;gBAAIC,UAAY,EAAA,CAAA;gBAAGC,aAAe,EAAA,CAAA;AACjC,gBAAA,QAAA,gBAAAH,cAACI,CAAAA,uBAAAA,EAAAA;oBAAWC,GAAI,EAAA,IAAA;oBAAKC,OAAQ,EAAA,OAAA;oBAAQC,UAAW,EAAA,UAAA;AAC7CX,oBAAAA,QAAAA,EAAAA;;;AAKP,0BAAAI,cAAA,CAACQ,kBAAKC,IAAI,EAAA;gBAACC,GAAK,EAAA,CAAA;0BACbpB,MAAOqB,CAAAA,GAAG,CAAC,CAACC,KAAOC,EAAAA,KAAAA,GAAAA;AAClB,oBAAA,MAAMC,UAAa,GAAA,CAAC,CAACrB,cAAAA,CAAesB,IAAI,CAAC,CAACC,YAAAA,GAAiBA,YAAaC,CAAAA,EAAE,KAAKL,KAAAA,CAAMK,EAAE,CAAA;AAEvF,oBAAA,IAAItB,cAAgB,EAAA;wBAClB,qBACEK,cAAA,CAACQ,kBAAKU,IAAI,EAAA;4BAAgBC,GAAK,EAAA,CAAA;4BAAGC,MAAO,EAAA,MAAA;AACvC,4BAAA,QAAA,gBAAApB,cAACqB,CAAAA,mBAAAA,EAAAA;gCAAUR,KAAOA,EAAAA,KAAAA;gCAAOS,QAAU3B,EAAAA,cAAAA;AAAgBsB,gCAAAA,EAAAA,EAAIL,MAAMK,EAAE;AAC7D,gCAAA,QAAA,gBAAAjB,cAACuB,CAAAA,mBAAAA,EAAAA;oCACClC,YAAcA,EAAAA,YAAAA;oCACduB,KAAOA,EAAAA,KAAAA;oCACPE,UAAYA,EAAAA,UAAAA;oCACZU,MAAQjC,EAAAA,WAAAA,GAAc,IAAMA,WAAAA,CAAYqB,KAASa,CAAAA,GAAAA,SAAAA;AACjDC,oCAAAA,QAAAA,EAAU,IAAMlC,aAAcoB,CAAAA,KAAAA,CAAAA;oCAC9BlB,IAAMA,EAAAA;;;AARIkB,yBAAAA,EAAAA,KAAAA,CAAMK,EAAE,CAAA;AAa5B;oBAEA,qBACEjB,cAAA,CAACQ,kBAAKU,IAAI,EAAA;wBAACC,GAAK,EAAA,CAAA;wBAAkBC,MAAO,EAAA,MAAA;wBAAOO,SAAU,EAAA,QAAA;wBAASC,UAAW,EAAA,SAAA;AAC5E,wBAAA,QAAA,gBAAA5B,cAACuB,CAAAA,mBAAAA,EAAAA;4BAEClC,YAAcA,EAAAA,YAAAA;4BACduB,KAAOA,EAAAA,KAAAA;4BACPE,UAAYA,EAAAA,UAAAA;4BACZU,MAAQjC,EAAAA,WAAAA,GAAc,IAAMA,WAAAA,CAAYqB,KAASa,CAAAA,GAAAA,SAAAA;AACjDC,4BAAAA,QAAAA,EAAU,IAAMlC,aAAcoB,CAAAA,KAAAA,CAAAA;4BAC9BlB,IAAMA,EAAAA;AANDkB,yBAAAA,EAAAA,KAAAA,CAAMK,EAAE;AAFOL,qBAAAA,EAAAA,KAAAA,CAAMK,EAAE,CAAA;AAYpC,iBAAA;;;;AAIR;;;;"}

package/dist/admin/components/AssetGridList/AssetGridList.mjs

@@ -0,0 +1,70 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { KeyboardNavigable, Box, Typography, Grid } from '@strapi/design-system';
+import { AssetCard } from '../AssetCard/AssetCard.mjs';
+import { Draggable } from './Draggable.mjs';
+
+// TODO: find a better naming convention for the file that was an index file before
+const AssetGridList = ({ allowedTypes = [
+    'files',
+    'images',
+    'videos',
+    'audios'
+], assets, onEditAsset, onSelectAsset, selectedAssets, size = 'M', onReorderAsset, title = null })=>{
+    return /*#__PURE__*/ jsxs(KeyboardNavigable, {
+        tagName: "article",
+        children: [
+            title && /*#__PURE__*/ jsx(Box, {
+                paddingTop: 2,
+                paddingBottom: 2,
+                children: /*#__PURE__*/ jsx(Typography, {
+                    tag: "h2",
+                    variant: "delta",
+                    fontWeight: "semiBold",
+                    children: title
+                })
+            }),
+            /*#__PURE__*/ jsx(Grid.Root, {
+                gap: 4,
+                children: assets.map((asset, index)=>{
+                    const isSelected = !!selectedAssets.find((currentAsset)=>currentAsset.id === asset.id);
+                    if (onReorderAsset) {
+                        return /*#__PURE__*/ jsx(Grid.Item, {
+                            col: 3,
+                            height: "100%",
+                            children: /*#__PURE__*/ jsx(Draggable, {
+                                index: index,
+                                moveItem: onReorderAsset,
+                                id: asset.id,
+                                children: /*#__PURE__*/ jsx(AssetCard, {
+                                    allowedTypes: allowedTypes,
+                                    asset: asset,
+                                    isSelected: isSelected,
+                                    onEdit: onEditAsset ? ()=>onEditAsset(asset) : undefined,
+                                    onSelect: ()=>onSelectAsset(asset),
+                                    size: size
+                                })
+                            })
+                        }, asset.id);
+                    }
+                    return /*#__PURE__*/ jsx(Grid.Item, {
+                        col: 3,
+                        height: "100%",
+                        direction: "column",
+                        alignItems: "stretch",
+                        children: /*#__PURE__*/ jsx(AssetCard, {
+                            allowedTypes: allowedTypes,
+                            asset: asset,
+                            isSelected: isSelected,
+                            onEdit: onEditAsset ? ()=>onEditAsset(asset) : undefined,
+                            onSelect: ()=>onSelectAsset(asset),
+                            size: size
+                        }, asset.id)
+                    }, asset.id);
+                })
+            })
+        ]
+    });
+};
+
+export { AssetGridList };
+//# sourceMappingURL=AssetGridList.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AssetGridList.mjs","sources":["../../../../admin/src/components/AssetGridList/AssetGridList.tsx"],"sourcesContent":["// TODO: find a better naming convention for the file that was an index file before\nimport { Box, Grid, KeyboardNavigable, Typography } from '@strapi/design-system';\n\nimport { AssetCard } from '../AssetCard/AssetCard';\n\nimport { Draggable } from './Draggable';\n\nimport type { File } from '../../../../shared/contracts/files';\nimport type { AllowedTypes } from '../AssetCard/AssetCard';\n\nexport interface AssetGridListProps {\n  allowedTypes?: AllowedTypes[];\n  assets: File[];\n  onEditAsset?: (asset: File) => void;\n  onSelectAsset: (asset: File) => void;\n  selectedAssets: File[];\n  size?: 'S' | 'M';\n  onReorderAsset?: (fromIndex: number, toIndex: number) => void;\n  title?: string | null;\n}\n\nexport const AssetGridList = ({\n  allowedTypes = ['files', 'images', 'videos', 'audios'],\n  assets,\n  onEditAsset,\n  onSelectAsset,\n  selectedAssets,\n  size = 'M',\n  onReorderAsset,\n  title = null,\n}: AssetGridListProps) => {\n  return (\n    <KeyboardNavigable tagName=\"article\">\n      {title && (\n        <Box paddingTop={2} paddingBottom={2}>\n          <Typography tag=\"h2\" variant=\"delta\" fontWeight=\"semiBold\">\n            {title}\n          </Typography>\n        </Box>\n      )}\n\n      <Grid.Root gap={4}>\n        {assets.map((asset, index) => {\n          const isSelected = !!selectedAssets.find((currentAsset) => currentAsset.id === asset.id);\n\n          if (onReorderAsset) {\n            return (\n              <Grid.Item key={asset.id} col={3} height=\"100%\">\n                <Draggable index={index} moveItem={onReorderAsset} id={asset.id}>\n                  <AssetCard\n                    allowedTypes={allowedTypes}\n                    asset={asset}\n                    isSelected={isSelected}\n                    onEdit={onEditAsset ? () => onEditAsset(asset) : undefined}\n                    onSelect={() => onSelectAsset(asset)}\n                    size={size}\n                  />\n                </Draggable>\n              </Grid.Item>\n            );\n          }\n\n          return (\n            <Grid.Item col={3} key={asset.id} height=\"100%\" direction=\"column\" alignItems=\"stretch\">\n              <AssetCard\n                key={asset.id}\n                allowedTypes={allowedTypes}\n                asset={asset}\n                isSelected={isSelected}\n                onEdit={onEditAsset ? () => onEditAsset(asset) : undefined}\n                onSelect={() => onSelectAsset(asset)}\n                size={size}\n              />\n            </Grid.Item>\n          );\n        })}\n      </Grid.Root>\n    </KeyboardNavigable>\n  );\n};\n"],"names":["AssetGridList","allowedTypes","assets","onEditAsset","onSelectAsset","selectedAssets","size","onReorderAsset","title","_jsxs","KeyboardNavigable","tagName","_jsx","Box","paddingTop","paddingBottom","Typography","tag","variant","fontWeight","Grid","Root","gap","map","asset","index","isSelected","find","currentAsset","id","Item","col","height","Draggable","moveItem","AssetCard","onEdit","undefined","onSelect","direction","alignItems"],"mappings":";;;;;AAAA;AAqBaA,MAAAA,aAAAA,GAAgB,CAAC,EAC5BC,YAAe,GAAA;AAAC,IAAA,OAAA;AAAS,IAAA,QAAA;AAAU,IAAA,QAAA;AAAU,IAAA;AAAS,CAAA,EACtDC,MAAM,EACNC,WAAW,EACXC,aAAa,EACbC,cAAc,EACdC,IAAAA,GAAO,GAAG,EACVC,cAAc,EACdC,KAAAA,GAAQ,IAAI,EACO,GAAA;AACnB,IAAA,qBACEC,IAACC,CAAAA,iBAAAA,EAAAA;QAAkBC,OAAQ,EAAA,SAAA;;AACxBH,YAAAA,KAAAA,kBACCI,GAACC,CAAAA,GAAAA,EAAAA;gBAAIC,UAAY,EAAA,CAAA;gBAAGC,aAAe,EAAA,CAAA;AACjC,gBAAA,QAAA,gBAAAH,GAACI,CAAAA,UAAAA,EAAAA;oBAAWC,GAAI,EAAA,IAAA;oBAAKC,OAAQ,EAAA,OAAA;oBAAQC,UAAW,EAAA,UAAA;AAC7CX,oBAAAA,QAAAA,EAAAA;;;AAKP,0BAAAI,GAAA,CAACQ,KAAKC,IAAI,EAAA;gBAACC,GAAK,EAAA,CAAA;0BACbpB,MAAOqB,CAAAA,GAAG,CAAC,CAACC,KAAOC,EAAAA,KAAAA,GAAAA;AAClB,oBAAA,MAAMC,UAAa,GAAA,CAAC,CAACrB,cAAAA,CAAesB,IAAI,CAAC,CAACC,YAAAA,GAAiBA,YAAaC,CAAAA,EAAE,KAAKL,KAAAA,CAAMK,EAAE,CAAA;AAEvF,oBAAA,IAAItB,cAAgB,EAAA;wBAClB,qBACEK,GAAA,CAACQ,KAAKU,IAAI,EAAA;4BAAgBC,GAAK,EAAA,CAAA;4BAAGC,MAAO,EAAA,MAAA;AACvC,4BAAA,QAAA,gBAAApB,GAACqB,CAAAA,SAAAA,EAAAA;gCAAUR,KAAOA,EAAAA,KAAAA;gCAAOS,QAAU3B,EAAAA,cAAAA;AAAgBsB,gCAAAA,EAAAA,EAAIL,MAAMK,EAAE;AAC7D,gCAAA,QAAA,gBAAAjB,GAACuB,CAAAA,SAAAA,EAAAA;oCACClC,YAAcA,EAAAA,YAAAA;oCACduB,KAAOA,EAAAA,KAAAA;oCACPE,UAAYA,EAAAA,UAAAA;oCACZU,MAAQjC,EAAAA,WAAAA,GAAc,IAAMA,WAAAA,CAAYqB,KAASa,CAAAA,GAAAA,SAAAA;AACjDC,oCAAAA,QAAAA,EAAU,IAAMlC,aAAcoB,CAAAA,KAAAA,CAAAA;oCAC9BlB,IAAMA,EAAAA;;;AARIkB,yBAAAA,EAAAA,KAAAA,CAAMK,EAAE,CAAA;AAa5B;oBAEA,qBACEjB,GAAA,CAACQ,KAAKU,IAAI,EAAA;wBAACC,GAAK,EAAA,CAAA;wBAAkBC,MAAO,EAAA,MAAA;wBAAOO,SAAU,EAAA,QAAA;wBAASC,UAAW,EAAA,SAAA;AAC5E,wBAAA,QAAA,gBAAA5B,GAACuB,CAAAA,SAAAA,EAAAA;4BAEClC,YAAcA,EAAAA,YAAAA;4BACduB,KAAOA,EAAAA,KAAAA;4BACPE,UAAYA,EAAAA,UAAAA;4BACZU,MAAQjC,EAAAA,WAAAA,GAAc,IAAMA,WAAAA,CAAYqB,KAASa,CAAAA,GAAAA,SAAAA;AACjDC,4BAAAA,QAAAA,EAAU,IAAMlC,aAAcoB,CAAAA,KAAAA,CAAAA;4BAC9BlB,IAAMA,EAAAA;AANDkB,yBAAAA,EAAAA,KAAAA,CAAMK,EAAE;AAFOL,qBAAAA,EAAAA,KAAAA,CAAMK,EAAE,CAAA;AAYpC,iBAAA;;;;AAIR;;;;"}

package/dist/admin/components/AssetGridList/Draggable.js

@@ -0,0 +1,65 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var reactDnd = require('react-dnd');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const Draggable = ({ children, id, index, moveItem })=>{
+    const ref = React__namespace.useRef(null);
+    const [, drop] = reactDnd.useDrop({
+        accept: 'draggable',
+        hover (hoveredOverItem) {
+            if (!ref.current) {
+                return;
+            }
+            if (hoveredOverItem.id !== id) {
+                moveItem(hoveredOverItem.index, index);
+                hoveredOverItem.index = index;
+            }
+        }
+    });
+    const [{ isDragging }, drag] = reactDnd.useDrag({
+        type: 'draggable',
+        item () {
+            return {
+                index,
+                id
+            };
+        },
+        collect: (monitor)=>({
+                isDragging: monitor.isDragging()
+            })
+    });
+    const opacity = isDragging ? 0.2 : 1;
+    drag(drop(ref));
+    return /*#__PURE__*/ jsxRuntime.jsx("div", {
+        ref: ref,
+        style: {
+            opacity,
+            cursor: 'move'
+        },
+        children: children
+    });
+};
+
+exports.Draggable = Draggable;
+//# sourceMappingURL=Draggable.js.map

package/dist/admin/components/AssetGridList/Draggable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Draggable.js","sources":["../../../../admin/src/components/AssetGridList/Draggable.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useDrag, useDrop } from 'react-dnd';\n\ninterface DraggableProps {\n  id: string | number;\n  index: number;\n  children: React.ReactNode;\n  moveItem: (fromIndex: number, toIndex: number) => void;\n}\n\nexport const Draggable = ({ children, id, index, moveItem }: DraggableProps) => {\n  const ref = React.useRef(null);\n\n  const [, drop] = useDrop({\n    accept: 'draggable',\n    hover(hoveredOverItem: { id: number; index: number }) {\n      if (!ref.current) {\n        return;\n      }\n\n      if (hoveredOverItem.id !== id) {\n        moveItem(hoveredOverItem.index, index);\n\n        hoveredOverItem.index = index;\n      }\n    },\n  });\n\n  const [{ isDragging }, drag] = useDrag({\n    type: 'draggable',\n    item() {\n      return { index, id };\n    },\n    collect: (monitor) => ({\n      isDragging: monitor.isDragging(),\n    }),\n  });\n\n  const opacity = isDragging ? 0.2 : 1;\n\n  drag(drop(ref));\n\n  return (\n    <div ref={ref} style={{ opacity, cursor: 'move' }}>\n      {children}\n    </div>\n  );\n};\n"],"names":["Draggable","children","id","index","moveItem","ref","React","useRef","drop","useDrop","accept","hover","hoveredOverItem","current","isDragging","drag","useDrag","type","item","collect","monitor","opacity","_jsx","div","style","cursor"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAWO,MAAMA,SAAY,GAAA,CAAC,EAAEC,QAAQ,EAAEC,EAAE,EAAEC,KAAK,EAAEC,QAAQ,EAAkB,GAAA;IACzE,MAAMC,GAAAA,GAAMC,gBAAMC,CAAAA,MAAM,CAAC,IAAA,CAAA;IAEzB,MAAM,GAAGC,IAAK,CAAA,GAAGC,gBAAQ,CAAA;QACvBC,MAAQ,EAAA,WAAA;AACRC,QAAAA,KAAAA,CAAAA,CAAMC,eAA8C,EAAA;YAClD,IAAI,CAACP,GAAIQ,CAAAA,OAAO,EAAE;AAChB,gBAAA;AACF;YAEA,IAAID,eAAAA,CAAgBV,EAAE,KAAKA,EAAI,EAAA;gBAC7BE,QAASQ,CAAAA,eAAAA,CAAgBT,KAAK,EAAEA,KAAAA,CAAAA;AAEhCS,gBAAAA,eAAAA,CAAgBT,KAAK,GAAGA,KAAAA;AAC1B;AACF;AACF,KAAA,CAAA;AAEA,IAAA,MAAM,CAAC,EAAEW,UAAU,EAAE,EAAEC,IAAAA,CAAK,GAAGC,gBAAQ,CAAA;QACrCC,IAAM,EAAA,WAAA;AACNC,QAAAA,IAAAA,CAAAA,GAAAA;YACE,OAAO;AAAEf,gBAAAA,KAAAA;AAAOD,gBAAAA;AAAG,aAAA;AACrB,SAAA;QACAiB,OAAS,EAAA,CAACC,WAAa;AACrBN,gBAAAA,UAAAA,EAAYM,QAAQN,UAAU;aAChC;AACF,KAAA,CAAA;IAEA,MAAMO,OAAAA,GAAUP,aAAa,GAAM,GAAA,CAAA;AAEnCC,IAAAA,IAAAA,CAAKP,IAAKH,CAAAA,GAAAA,CAAAA,CAAAA;AAEV,IAAA,qBACEiB,cAACC,CAAAA,KAAAA,EAAAA;QAAIlB,GAAKA,EAAAA,GAAAA;QAAKmB,KAAO,EAAA;AAAEH,YAAAA,OAAAA;YAASI,MAAQ,EAAA;AAAO,SAAA;AAC7CxB,QAAAA,QAAAA,EAAAA;;AAGP;;;;"}

package/dist/admin/components/AssetGridList/Draggable.mjs

@@ -0,0 +1,44 @@
+import { jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { useDrop, useDrag } from 'react-dnd';
+
+const Draggable = ({ children, id, index, moveItem })=>{
+    const ref = React.useRef(null);
+    const [, drop] = useDrop({
+        accept: 'draggable',
+        hover (hoveredOverItem) {
+            if (!ref.current) {
+                return;
+            }
+            if (hoveredOverItem.id !== id) {
+                moveItem(hoveredOverItem.index, index);
+                hoveredOverItem.index = index;
+            }
+        }
+    });
+    const [{ isDragging }, drag] = useDrag({
+        type: 'draggable',
+        item () {
+            return {
+                index,
+                id
+            };
+        },
+        collect: (monitor)=>({
+                isDragging: monitor.isDragging()
+            })
+    });
+    const opacity = isDragging ? 0.2 : 1;
+    drag(drop(ref));
+    return /*#__PURE__*/ jsx("div", {
+        ref: ref,
+        style: {
+            opacity,
+            cursor: 'move'
+        },
+        children: children
+    });
+};
+
+export { Draggable };
+//# sourceMappingURL=Draggable.mjs.map

package/dist/admin/components/AssetGridList/Draggable.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Draggable.mjs","sources":["../../../../admin/src/components/AssetGridList/Draggable.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useDrag, useDrop } from 'react-dnd';\n\ninterface DraggableProps {\n  id: string | number;\n  index: number;\n  children: React.ReactNode;\n  moveItem: (fromIndex: number, toIndex: number) => void;\n}\n\nexport const Draggable = ({ children, id, index, moveItem }: DraggableProps) => {\n  const ref = React.useRef(null);\n\n  const [, drop] = useDrop({\n    accept: 'draggable',\n    hover(hoveredOverItem: { id: number; index: number }) {\n      if (!ref.current) {\n        return;\n      }\n\n      if (hoveredOverItem.id !== id) {\n        moveItem(hoveredOverItem.index, index);\n\n        hoveredOverItem.index = index;\n      }\n    },\n  });\n\n  const [{ isDragging }, drag] = useDrag({\n    type: 'draggable',\n    item() {\n      return { index, id };\n    },\n    collect: (monitor) => ({\n      isDragging: monitor.isDragging(),\n    }),\n  });\n\n  const opacity = isDragging ? 0.2 : 1;\n\n  drag(drop(ref));\n\n  return (\n    <div ref={ref} style={{ opacity, cursor: 'move' }}>\n      {children}\n    </div>\n  );\n};\n"],"names":["Draggable","children","id","index","moveItem","ref","React","useRef","drop","useDrop","accept","hover","hoveredOverItem","current","isDragging","drag","useDrag","type","item","collect","monitor","opacity","_jsx","div","style","cursor"],"mappings":";;;;AAWO,MAAMA,SAAY,GAAA,CAAC,EAAEC,QAAQ,EAAEC,EAAE,EAAEC,KAAK,EAAEC,QAAQ,EAAkB,GAAA;IACzE,MAAMC,GAAAA,GAAMC,KAAMC,CAAAA,MAAM,CAAC,IAAA,CAAA;IAEzB,MAAM,GAAGC,IAAK,CAAA,GAAGC,OAAQ,CAAA;QACvBC,MAAQ,EAAA,WAAA;AACRC,QAAAA,KAAAA,CAAAA,CAAMC,eAA8C,EAAA;YAClD,IAAI,CAACP,GAAIQ,CAAAA,OAAO,EAAE;AAChB,gBAAA;AACF;YAEA,IAAID,eAAAA,CAAgBV,EAAE,KAAKA,EAAI,EAAA;gBAC7BE,QAASQ,CAAAA,eAAAA,CAAgBT,KAAK,EAAEA,KAAAA,CAAAA;AAEhCS,gBAAAA,eAAAA,CAAgBT,KAAK,GAAGA,KAAAA;AAC1B;AACF;AACF,KAAA,CAAA;AAEA,IAAA,MAAM,CAAC,EAAEW,UAAU,EAAE,EAAEC,IAAAA,CAAK,GAAGC,OAAQ,CAAA;QACrCC,IAAM,EAAA,WAAA;AACNC,QAAAA,IAAAA,CAAAA,GAAAA;YACE,OAAO;AAAEf,gBAAAA,KAAAA;AAAOD,gBAAAA;AAAG,aAAA;AACrB,SAAA;QACAiB,OAAS,EAAA,CAACC,WAAa;AACrBN,gBAAAA,UAAAA,EAAYM,QAAQN,UAAU;aAChC;AACF,KAAA,CAAA;IAEA,MAAMO,OAAAA,GAAUP,aAAa,GAAM,GAAA,CAAA;AAEnCC,IAAAA,IAAAA,CAAKP,IAAKH,CAAAA,GAAAA,CAAAA,CAAAA;AAEV,IAAA,qBACEiB,GAACC,CAAAA,KAAAA,EAAAA;QAAIlB,GAAKA,EAAAA,GAAAA;QAAKmB,KAAO,EAAA;AAAEH,YAAAA,OAAAA;YAASI,MAAQ,EAAA;AAAO,SAAA;AAC7CxB,QAAAA,QAAAA,EAAAA;;AAGP;;;;"}

package/dist/admin/components/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,49 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var designSystem = require('@strapi/design-system');
+var reactIntl = require('react-intl');
+var reactRouterDom = require('react-router-dom');
+var CrumbSimpleMenuAsync = require('./CrumbSimpleMenuAsync.js');
+
+const Breadcrumbs = ({ breadcrumbs, onChangeFolder, currentFolderId, ...props })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Breadcrumbs, {
+        ...props,
+        children: breadcrumbs.map((crumb, index)=>{
+            if (Array.isArray(crumb)) {
+                return /*#__PURE__*/ jsxRuntime.jsx(CrumbSimpleMenuAsync.CrumbSimpleMenuAsync, {
+                    parentsToOmit: [
+                        ...breadcrumbs
+                    ].splice(index + 1, breadcrumbs.length - 1).map((parent)=>parent.id),
+                    currentFolderId: currentFolderId,
+                    onChangeFolder: onChangeFolder
+                }, `breadcrumb-${crumb?.id ?? 'menu'}`);
+            }
+            const isCurrentFolderMediaLibrary = crumb.id === null && currentFolderId === undefined;
+            if (currentFolderId !== crumb.id && !isCurrentFolderMediaLibrary) {
+                if (onChangeFolder) {
+                    return /*#__PURE__*/ jsxRuntime.jsx(designSystem.CrumbLink, {
+                        type: "button",
+                        onClick: ()=>onChangeFolder(crumb.id, crumb.path),
+                        children: typeof crumb.label !== 'string' && crumb.label?.id ? formatMessage(crumb.label) : crumb.label
+                    }, `breadcrumb-${crumb?.id ?? 'root'}`);
+                }
+                return /*#__PURE__*/ jsxRuntime.jsx(designSystem.CrumbLink, {
+                    to: crumb.href,
+                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                    // @ts-ignore - `tag` prop is not defined in the `BaseLinkProps` type
+                    tag: reactRouterDom.Link,
+                    children: typeof crumb.label !== 'string' && crumb.label?.id ? formatMessage(crumb.label) : crumb.label
+                }, `breadcrumb-${crumb?.id ?? 'root'}`);
+            }
+            return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Crumb, {
+                isCurrent: index + 1 === breadcrumbs.length,
+                children: typeof crumb.label !== 'string' && crumb.label?.id ? formatMessage(crumb.label) : crumb.label
+            }, `breadcrumb-${crumb?.id ?? 'root'}`);
+        })
+    });
+};
+
+exports.Breadcrumbs = Breadcrumbs;
+//# sourceMappingURL=Breadcrumbs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumbs.js","sources":["../../../../admin/src/components/Breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["import {\n  Breadcrumbs as BaseBreadcrumbs,\n  Crumb,\n  CrumbLink,\n  BreadcrumbsProps as BaseBreadcrumbsProps,\n} from '@strapi/design-system';\nimport { useIntl, MessageDescriptor } from 'react-intl';\nimport { Link as ReactRouterLink } from 'react-router-dom';\n\nimport { CrumbSimpleMenuAsync } from './CrumbSimpleMenuAsync';\n\nexport type CrumbDefinition = {\n  id?: number | null;\n  label?: MessageDescriptor | string;\n  href?: string;\n  path?: string;\n};\n\nexport interface BreadcrumbsProps extends BaseBreadcrumbsProps {\n  breadcrumbs: Array<CrumbDefinition>;\n  currentFolderId?: number;\n  onChangeFolder?: (id: number, path?: string) => void;\n}\n\nexport const Breadcrumbs = ({\n  breadcrumbs,\n  onChangeFolder,\n  currentFolderId,\n  ...props\n}: BreadcrumbsProps) => {\n  const { formatMessage } = useIntl();\n\n  return (\n    <BaseBreadcrumbs {...props}>\n      {breadcrumbs.map((crumb, index) => {\n        if (Array.isArray(crumb)) {\n          return (\n            <CrumbSimpleMenuAsync\n              parentsToOmit={[...breadcrumbs]\n                .splice(index + 1, breadcrumbs.length - 1)\n                .map((parent) => parent.id!)}\n              key={`breadcrumb-${crumb?.id ?? 'menu'}`}\n              currentFolderId={currentFolderId}\n              onChangeFolder={onChangeFolder}\n            />\n          );\n        }\n\n        const isCurrentFolderMediaLibrary = crumb.id === null && currentFolderId === undefined;\n\n        if (currentFolderId !== crumb.id && !isCurrentFolderMediaLibrary) {\n          if (onChangeFolder) {\n            return (\n              <CrumbLink\n                key={`breadcrumb-${crumb?.id ?? 'root'}`}\n                type=\"button\"\n                onClick={() => onChangeFolder(crumb.id!, crumb.path)}\n              >\n                {typeof crumb.label !== 'string' && crumb.label?.id\n                  ? formatMessage(crumb.label)\n                  : (crumb.label as string)}\n              </CrumbLink>\n            );\n          }\n          return (\n            <CrumbLink\n              key={`breadcrumb-${crumb?.id ?? 'root'}`}\n              to={crumb.href}\n              // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n              // @ts-ignore - `tag` prop is not defined in the `BaseLinkProps` type\n              tag={ReactRouterLink}\n            >\n              {typeof crumb.label !== 'string' && crumb.label?.id\n                ? formatMessage(crumb.label)\n                : (crumb.label as string)}\n            </CrumbLink>\n          );\n        }\n\n        return (\n          <Crumb\n            key={`breadcrumb-${crumb?.id ?? 'root'}`}\n            isCurrent={index + 1 === breadcrumbs.length}\n          >\n            {typeof crumb.label !== 'string' && crumb.label?.id\n              ? formatMessage(crumb.label)\n              : (crumb.label as string)}\n          </Crumb>\n        );\n      })}\n    </BaseBreadcrumbs>\n  );\n};\n"],"names":["Breadcrumbs","breadcrumbs","onChangeFolder","currentFolderId","props","formatMessage","useIntl","_jsx","BaseBreadcrumbs","map","crumb","index","Array","isArray","CrumbSimpleMenuAsync","parentsToOmit","splice","length","parent","id","isCurrentFolderMediaLibrary","undefined","CrumbLink","type","onClick","path","label","to","href","tag","ReactRouterLink","Crumb","isCurrent"],"mappings":";;;;;;;;AAwBO,MAAMA,WAAc,GAAA,CAAC,EAC1BC,WAAW,EACXC,cAAc,EACdC,eAAe,EACf,GAAGC,KACc,EAAA,GAAA;IACjB,MAAM,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;AAE1B,IAAA,qBACEC,cAACC,CAAAA,wBAAAA,EAAAA;AAAiB,QAAA,GAAGJ,KAAK;kBACvBH,WAAYQ,CAAAA,GAAG,CAAC,CAACC,KAAOC,EAAAA,KAAAA,GAAAA;YACvB,IAAIC,KAAAA,CAAMC,OAAO,CAACH,KAAQ,CAAA,EAAA;AACxB,gBAAA,qBACEH,cAACO,CAAAA,yCAAAA,EAAAA;oBACCC,aAAe,EAAA;AAAId,wBAAAA,GAAAA;AAAY,qBAAA,CAC5Be,MAAM,CAACL,KAAQ,GAAA,CAAA,EAAGV,WAAYgB,CAAAA,MAAM,GAAG,CAAA,CAAA,CACvCR,GAAG,CAAC,CAACS,MAAAA,GAAWA,OAAOC,EAAE,CAAA;oBAE5BhB,eAAiBA,EAAAA,eAAAA;oBACjBD,cAAgBA,EAAAA;AAFX,iBAAA,EAAA,CAAC,WAAW,EAAEQ,KAAOS,EAAAA,EAAAA,IAAM,OAAO,CAAC,CAAA;AAK9C;AAEA,YAAA,MAAMC,2BAA8BV,GAAAA,KAAAA,CAAMS,EAAE,KAAK,QAAQhB,eAAoBkB,KAAAA,SAAAA;AAE7E,YAAA,IAAIlB,eAAoBO,KAAAA,KAAAA,CAAMS,EAAE,IAAI,CAACC,2BAA6B,EAAA;AAChE,gBAAA,IAAIlB,cAAgB,EAAA;AAClB,oBAAA,qBACEK,cAACe,CAAAA,sBAAAA,EAAAA;wBAECC,IAAK,EAAA,QAAA;AACLC,wBAAAA,OAAAA,EAAS,IAAMtB,cAAeQ,CAAAA,KAAAA,CAAMS,EAAE,EAAGT,MAAMe,IAAI,CAAA;AAElD,wBAAA,QAAA,EAAA,OAAOf,KAAMgB,CAAAA,KAAK,KAAK,QAAA,IAAYhB,KAAMgB,CAAAA,KAAK,EAAEP,EAAAA,GAC7Cd,aAAcK,CAAAA,KAAAA,CAAMgB,KAAK,CAAA,GACxBhB,MAAMgB;AANN,qBAAA,EAAA,CAAC,WAAW,EAAEhB,KAAOS,EAAAA,EAAAA,IAAM,OAAO,CAAC,CAAA;AAS9C;AACA,gBAAA,qBACEZ,cAACe,CAAAA,sBAAAA,EAAAA;AAECK,oBAAAA,EAAAA,EAAIjB,MAAMkB,IAAI;;;oBAGdC,GAAKC,EAAAA,mBAAAA;AAEJ,oBAAA,QAAA,EAAA,OAAOpB,KAAMgB,CAAAA,KAAK,KAAK,QAAA,IAAYhB,KAAMgB,CAAAA,KAAK,EAAEP,EAAAA,GAC7Cd,aAAcK,CAAAA,KAAAA,CAAMgB,KAAK,CAAA,GACxBhB,MAAMgB;AARN,iBAAA,EAAA,CAAC,WAAW,EAAEhB,KAAOS,EAAAA,EAAAA,IAAM,OAAO,CAAC,CAAA;AAW9C;AAEA,YAAA,qBACEZ,cAACwB,CAAAA,kBAAAA,EAAAA;gBAECC,SAAWrB,EAAAA,KAAAA,GAAQ,CAAMV,KAAAA,WAAAA,CAAYgB,MAAM;AAE1C,gBAAA,QAAA,EAAA,OAAOP,KAAMgB,CAAAA,KAAK,KAAK,QAAA,IAAYhB,KAAMgB,CAAAA,KAAK,EAAEP,EAAAA,GAC7Cd,aAAcK,CAAAA,KAAAA,CAAMgB,KAAK,CAAA,GACxBhB,MAAMgB;AALN,aAAA,EAAA,CAAC,WAAW,EAAEhB,KAAOS,EAAAA,EAAAA,IAAM,OAAO,CAAC,CAAA;AAQ9C,SAAA;;AAGN;;;;"}

package/dist/admin/components/Breadcrumbs/Breadcrumbs.mjs

@@ -0,0 +1,47 @@
+import { jsx } from 'react/jsx-runtime';
+import { Breadcrumbs as Breadcrumbs$1, CrumbLink, Crumb } from '@strapi/design-system';
+import { useIntl } from 'react-intl';
+import { Link } from 'react-router-dom';
+import { CrumbSimpleMenuAsync } from './CrumbSimpleMenuAsync.mjs';
+
+const Breadcrumbs = ({ breadcrumbs, onChangeFolder, currentFolderId, ...props })=>{
+    const { formatMessage } = useIntl();
+    return /*#__PURE__*/ jsx(Breadcrumbs$1, {
+        ...props,
+        children: breadcrumbs.map((crumb, index)=>{
+            if (Array.isArray(crumb)) {
+                return /*#__PURE__*/ jsx(CrumbSimpleMenuAsync, {
+                    parentsToOmit: [
+                        ...breadcrumbs
+                    ].splice(index + 1, breadcrumbs.length - 1).map((parent)=>parent.id),
+                    currentFolderId: currentFolderId,
+                    onChangeFolder: onChangeFolder
+                }, `breadcrumb-${crumb?.id ?? 'menu'}`);
+            }
+            const isCurrentFolderMediaLibrary = crumb.id === null && currentFolderId === undefined;
+            if (currentFolderId !== crumb.id && !isCurrentFolderMediaLibrary) {
+                if (onChangeFolder) {
+                    return /*#__PURE__*/ jsx(CrumbLink, {
+                        type: "button",
+                        onClick: ()=>onChangeFolder(crumb.id, crumb.path),
+                        children: typeof crumb.label !== 'string' && crumb.label?.id ? formatMessage(crumb.label) : crumb.label
+                    }, `breadcrumb-${crumb?.id ?? 'root'}`);
+                }
+                return /*#__PURE__*/ jsx(CrumbLink, {
+                    to: crumb.href,
+                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                    // @ts-ignore - `tag` prop is not defined in the `BaseLinkProps` type
+                    tag: Link,
+                    children: typeof crumb.label !== 'string' && crumb.label?.id ? formatMessage(crumb.label) : crumb.label
+                }, `breadcrumb-${crumb?.id ?? 'root'}`);
+            }
+            return /*#__PURE__*/ jsx(Crumb, {
+                isCurrent: index + 1 === breadcrumbs.length,
+                children: typeof crumb.label !== 'string' && crumb.label?.id ? formatMessage(crumb.label) : crumb.label
+            }, `breadcrumb-${crumb?.id ?? 'root'}`);
+        })
+    });
+};
+
+export { Breadcrumbs };
+//# sourceMappingURL=Breadcrumbs.mjs.map