@strapi/upload 5.59.0 → 5.61.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"AssetCard.mjs","sources":["../../../../admin/src/components/MediaLibraryInput/AssetCard.tsx"],"sourcesContent":["import { Badge, Box, Flex, IconButton, Menu, Typography } from '@strapi/design-system';\nimport { ArrowClockwise, Cross, Link, More, Pencil, Trash } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { getTranslationKey } from '../../utils/translations';\n\nimport { AssetPreview, UploadPreview } from './AssetPreview';\nimport { FieldMenuItem, GhostIconButton } from './FieldControls';\nimport { UploadProgressBar } from './UploadProgressBar';\n\nimport type { FieldUpload } from './useFieldUploads';\nimport type { File } from '../../../../shared/contracts/files';\n\ntype CardTone = 'neutral' | 'primary' | 'danger';\n\nconst CARD_COLORS = {\n  neutral: { background: 'neutral0', border: 'neutral200' },\n  primary: { background: 'primary100', border: 'primary200' },\n  danger: { background: 'danger100', border: 'danger200' },\n} as const;\n\nconst Card = styled(Flex)<{ $tone: CardTone }>`\n  position: relative;\n  min-width: 0;\n  overflow: hidden;\n  background: ${({ theme, $tone }) => theme.colors[CARD_COLORS[$tone].background]};\n  border: 1px solid ${({ theme, $tone }) => theme.colors[CARD_COLORS[$tone].border]};\n  border-radius: ${({ theme }) => theme.borderRadius};\n`;\n\nconst Name = styled(Typography)`\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n`;\n\nconst PreviewOverlay = styled(Box)`\n  position: absolute;\n  inset: auto 0 0 0;\n`;\n\nconst DangerIconButton = styled(IconButton)`\n  color: ${({ theme }) => theme.colors.danger600};\n  background: ${({ theme }) => theme.colors.danger100};\n  border-color: ${({ theme }) => theme.colors.danger200};\n\n  svg path {\n    fill: currentColor;\n  }\n`;\n\ninterface CardFrameProps {\n  tone: CardTone;\n  preview: React.ReactNode;\n  overlay?: React.ReactNode;\n  name: React.ReactNode;\n  actions: React.ReactNode;\n}\n\nconst CardFrame = ({ tone, preview, overlay, name, actions }: CardFrameProps) => (\n  <Card $tone={tone} direction=\"column\" alignItems=\"stretch\">\n    <Box position=\"relative\">\n      {preview}\n      {overlay}\n    </Box>\n    <Flex\n      gap={3}\n      paddingLeft={3}\n      paddingRight={2}\n      paddingTop={2}\n      paddingBottom={2}\n      minHeight=\"4.8rem\"\n    >\n      {name}\n      <Flex gap={1} shrink={0} marginLeft=\"auto\">\n        {actions}\n      </Flex>\n    </Flex>\n  </Card>\n);\n\ninterface AssetCardProps {\n  asset: File;\n  disabled?: boolean;\n  onCopyLink: (asset: File) => void;\n  onEdit?: (asset: File) => void;\n  onRemove: (asset: File) => void;\n}\n\n/**\n * An asset a multiple-value field holds.\n */\nexport const AssetCard = ({\n  asset,\n  disabled = false,\n  onCopyLink,\n  onEdit,\n  onRemove,\n}: AssetCardProps) => {\n  const { formatMessage } = useIntl();\n\n  return (\n    <CardFrame\n      tone=\"neutral\"\n      preview={<AssetPreview asset={asset} size=\"L\" />}\n      name={<Name textColor=\"neutral800\">{asset.name}</Name>}\n      actions={\n        <Menu.Root modal={false}>\n          <Menu.Trigger\n            tag={IconButton}\n            icon={<More />}\n            variant=\"ghost\"\n            label={formatMessage(\n              {\n                id: getTranslationKey('content-manager.input.actions.more'),\n                defaultMessage: 'More actions for {name}',\n              },\n              { name: asset.name }\n            )}\n          />\n          <Menu.Content popoverPlacement=\"bottom-end\">\n            <FieldMenuItem startIcon={<Link />} onSelect={() => onCopyLink(asset)}>\n              {formatMessage({\n                id: getTranslationKey('asset-details.copy-link.trigger'),\n                defaultMessage: 'Copy link',\n              })}\n            </FieldMenuItem>\n            {onEdit && (\n              <FieldMenuItem\n                startIcon={<Pencil />}\n                disabled={disabled}\n                onSelect={() => onEdit(asset)}\n              >\n                {formatMessage({\n                  id: getTranslationKey('control-card.edit'),\n                  defaultMessage: 'Edit',\n                })}\n              </FieldMenuItem>\n            )}\n            <FieldMenuItem\n              variant=\"danger\"\n              startIcon={<Trash />}\n              disabled={disabled}\n              onSelect={() => onRemove(asset)}\n            >\n              {formatMessage({\n                id: getTranslationKey('content-manager.input.actions.remove-failed'),\n                defaultMessage: 'Remove',\n              })}\n            </FieldMenuItem>\n          </Menu.Content>\n        </Menu.Root>\n      }\n    />\n  );\n};\n\ninterface UploadCardProps {\n  upload: FieldUpload;\n  disabled?: boolean;\n  onCancel: (upload: FieldUpload) => void;\n  onRetry: (upload: FieldUpload) => void;\n  onRemove: (upload: FieldUpload) => void;\n}\n\n/**\n * A file a multiple-value field is uploading, or failed to upload.\n */\nexport const UploadCard = ({\n  upload,\n  disabled = false,\n  onCancel,\n  onRetry,\n  onRemove,\n}: UploadCardProps) => {\n  const { formatMessage } = useIntl();\n  const preview = <UploadPreview file={upload.sourceFile} size=\"L\" />;\n\n  if (upload.status === 'failed') {\n    const canRetry = upload.isInStore || upload.sourceFile !== undefined;\n\n    return (\n      <CardFrame\n        tone=\"danger\"\n        preview={preview}\n        name={<Name textColor=\"danger600\">{upload.name}</Name>}\n        actions={\n          <>\n            {canRetry && (\n              <GhostIconButton\n                disabled={disabled}\n                onClick={() => onRetry(upload)}\n                label={formatMessage(\n                  {\n                    id: getTranslationKey('content-manager.input.actions.retry'),\n                    defaultMessage: 'Retry uploading {name}',\n                  },\n                  { name: upload.name }\n                )}\n              >\n                <ArrowClockwise />\n              </GhostIconButton>\n            )}\n            <DangerIconButton\n              disabled={disabled}\n              onClick={() => onRemove(upload)}\n              label={formatMessage(\n                {\n                  id: getTranslationKey('content-manager.input.actions.remove'),\n                  defaultMessage: 'Remove {name}',\n                },\n                { name: upload.name }\n              )}\n            >\n              <Trash />\n            </DangerIconButton>\n          </>\n        }\n      />\n    );\n  }\n\n  const uploadingLabel = formatMessage({\n    id: getTranslationKey('content-manager.input.status.uploading'),\n    defaultMessage: 'Uploading',\n  });\n\n  return (\n    <CardFrame\n      tone=\"primary\"\n      preview={preview}\n      overlay={\n        <>\n          <Box position=\"absolute\" top={2} left={2}>\n            <Badge backgroundColor=\"primary100\" textColor=\"primary600\">\n              {uploadingLabel}\n            </Badge>\n          </Box>\n          <PreviewOverlay>\n            <UploadProgressBar progress={upload.progress} label={uploadingLabel} />\n          </PreviewOverlay>\n        </>\n      }\n      name={<Name textColor=\"neutral800\">{upload.name}</Name>}\n      actions={\n        <GhostIconButton\n          onClick={() => onCancel(upload)}\n          label={formatMessage(\n            {\n              id: getTranslationKey('content-manager.input.actions.cancel'),\n              defaultMessage: 'Cancel upload of {name}',\n            },\n            { name: upload.name }\n          )}\n        >\n          <Cross />\n        </GhostIconButton>\n      }\n    />\n  );\n};\n"],"names":["CARD_COLORS","neutral","background","border","primary","danger","Card","styled","Flex","theme","$tone","colors","borderRadius","Name","Typography","PreviewOverlay","Box","DangerIconButton","IconButton","danger600","danger100","danger200","CardFrame","tone","preview","overlay","name","actions","_jsxs","direction","alignItems","position","gap","paddingLeft","paddingRight","paddingTop","paddingBottom","minHeight","_jsx","shrink","marginLeft","AssetCard","asset","disabled","onCopyLink","onEdit","onRemove","formatMessage","useIntl","AssetPreview","size","textColor","Menu","Root","modal","Trigger","tag","icon","More","variant","label","id","getTranslationKey","defaultMessage","Content","popoverPlacement","FieldMenuItem","startIcon","Link","onSelect","Pencil","Trash","UploadCard","upload","onCancel","onRetry","UploadPreview","file","sourceFile","status","canRetry","isInStore","undefined","_Fragment","GhostIconButton","onClick","ArrowClockwise","uploadingLabel","top","left","Badge","backgroundColor","UploadProgressBar","progress","Cross"],"mappings":";;;;;;;;;;AAgBA,MAAMA,WAAAA,GAAc;IAClBC,OAAAA,EAAS;QAAEC,UAAAA,EAAY,UAAA;QAAYC,MAAAA,EAAQ;AAAa,KAAA;IACxDC,OAAAA,EAAS;QAAEF,UAAAA,EAAY,YAAA;QAAcC,MAAAA,EAAQ;AAAa,KAAA;IAC1DE,MAAAA,EAAQ;QAAEH,UAAAA,EAAY,WAAA;QAAaC,MAAAA,EAAQ;AAAY;AACzD,CAAA;AAEA,MAAMG,IAAAA,GAAOC,MAAAA,CAAOC,IAAAA,CAA0B;;;;AAIhC,cAAA,EAAE,CAAC,EAAEC,KAAK,EAAEC,KAAK,EAAE,GAAKD,KAAAA,CAAME,MAAM,CAACX,WAAW,CAACU,KAAAA,CAAM,CAACR,UAAU,CAAC,CAAC;AAC9D,oBAAA,EAAE,CAAC,EAAEO,KAAK,EAAEC,KAAK,EAAE,GAAKD,KAAAA,CAAME,MAAM,CAACX,WAAW,CAACU,KAAAA,CAAM,CAACP,MAAM,CAAC,CAAC;AACnE,iBAAA,EAAE,CAAC,EAAEM,KAAK,EAAE,GAAKA,KAAAA,CAAMG,YAAY,CAAC;AACrD,CAAC;AAED,MAAMC,IAAAA,GAAON,MAAAA,CAAOO,UAAAA,CAAW;;;;;AAK/B,CAAC;AAED,MAAMC,cAAAA,GAAiBR,MAAAA,CAAOS,GAAAA,CAAI;;;AAGlC,CAAC;AAED,MAAMC,gBAAAA,GAAmBV,MAAAA,CAAOW,UAAAA,CAAW;SAClC,EAAE,CAAC,EAAET,KAAK,EAAE,GAAKA,KAAAA,CAAME,MAAM,CAACQ,SAAS,CAAC;cACnC,EAAE,CAAC,EAAEV,KAAK,EAAE,GAAKA,KAAAA,CAAME,MAAM,CAACS,SAAS,CAAC;gBACtC,EAAE,CAAC,EAAEX,KAAK,EAAE,GAAKA,KAAAA,CAAME,MAAM,CAACU,SAAS,CAAC;;;;;AAKxD,CAAC;AAUD,MAAMC,SAAAA,GAAY,CAAC,EAAEC,IAAI,EAAEC,OAAO,EAAEC,OAAO,EAAEC,IAAI,EAAEC,OAAO,EAAkB,iBAC1EC,IAAA,CAACtB,IAAAA,EAAAA;QAAKI,KAAAA,EAAOa,IAAAA;QAAMM,SAAAA,EAAU,QAAA;QAASC,UAAAA,EAAW,SAAA;;0BAC/CF,IAAA,CAACZ,GAAAA,EAAAA;gBAAIe,QAAAA,EAAS,UAAA;;AACXP,oBAAAA,OAAAA;AACAC,oBAAAA;;;0BAEHG,IAAA,CAACpB,IAAAA,EAAAA;gBACCwB,GAAAA,EAAK,CAAA;gBACLC,WAAAA,EAAa,CAAA;gBACbC,YAAAA,EAAc,CAAA;gBACdC,UAAAA,EAAY,CAAA;gBACZC,aAAAA,EAAe,CAAA;gBACfC,SAAAA,EAAU,QAAA;;AAETX,oBAAAA,IAAAA;kCACDY,GAAA,CAAC9B,IAAAA,EAAAA;wBAAKwB,GAAAA,EAAK,CAAA;wBAAGO,MAAAA,EAAQ,CAAA;wBAAGC,UAAAA,EAAW,MAAA;AACjCb,wBAAAA,QAAAA,EAAAA;;;;;;AAcT;;AAEC,IACM,MAAMc,SAAAA,GAAY,CAAC,EACxBC,KAAK,EACLC,QAAAA,GAAW,KAAK,EAChBC,UAAU,EACVC,MAAM,EACNC,QAAQ,EACO,GAAA;IACf,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;AAE1B,IAAA,qBACEV,GAAA,CAAChB,SAAAA,EAAAA;QACCC,IAAAA,EAAK,SAAA;AACLC,QAAAA,OAAAA,gBAASc,GAAA,CAACW,YAAAA,EAAAA;YAAaP,KAAAA,EAAOA,KAAAA;YAAOQ,IAAAA,EAAK;;AAC1CxB,QAAAA,IAAAA,gBAAMY,GAAA,CAACzB,IAAAA,EAAAA;YAAKsC,SAAAA,EAAU,YAAA;AAAcT,YAAAA,QAAAA,EAAAA,KAAAA,CAAMhB;;QAC1CC,OAAAA,gBACEC,IAAA,CAACwB,KAAKC,IAAI,EAAA;YAACC,KAAAA,EAAO,KAAA;;AAChB,8BAAAhB,GAAA,CAACc,KAAKG,OAAO,EAAA;oBACXC,GAAAA,EAAKtC,UAAAA;AACLuC,oBAAAA,IAAAA,gBAAMnB,GAAA,CAACoB,IAAAA,EAAAA,EAAAA,CAAAA;oBACPC,OAAAA,EAAQ,OAAA;AACRC,oBAAAA,KAAAA,EAAOb,aAAAA,CACL;AACEc,wBAAAA,EAAAA,EAAIC,iBAAAA,CAAkB,oCAAA,CAAA;wBACtBC,cAAAA,EAAgB;qBAClB,EACA;AAAErC,wBAAAA,IAAAA,EAAMgB,MAAMhB;AAAK,qBAAA;;AAGvB,8BAAAE,IAAA,CAACwB,KAAKY,OAAO,EAAA;oBAACC,gBAAAA,EAAiB,YAAA;;sCAC7B3B,GAAA,CAAC4B,aAAAA,EAAAA;AAAcC,4BAAAA,SAAAA,gBAAW7B,GAAA,CAAC8B,IAAAA,EAAAA,EAAAA,CAAAA;AAASC,4BAAAA,QAAAA,EAAU,IAAMzB,UAAAA,CAAWF,KAAAA,CAAAA;sCAC5DK,aAAAA,CAAc;AACbc,gCAAAA,EAAAA,EAAIC,iBAAAA,CAAkB,iCAAA,CAAA;gCACtBC,cAAAA,EAAgB;AAClB,6BAAA;;AAEDlB,wBAAAA,MAAAA,kBACCP,GAAA,CAAC4B,aAAAA,EAAAA;AACCC,4BAAAA,SAAAA,gBAAW7B,GAAA,CAACgC,MAAAA,EAAAA,EAAAA,CAAAA;4BACZ3B,QAAAA,EAAUA,QAAAA;AACV0B,4BAAAA,QAAAA,EAAU,IAAMxB,MAAAA,CAAOH,KAAAA,CAAAA;sCAEtBK,aAAAA,CAAc;AACbc,gCAAAA,EAAAA,EAAIC,iBAAAA,CAAkB,mBAAA,CAAA;gCACtBC,cAAAA,EAAgB;AAClB,6BAAA;;sCAGJzB,GAAA,CAAC4B,aAAAA,EAAAA;4BACCP,OAAAA,EAAQ,QAAA;AACRQ,4BAAAA,SAAAA,gBAAW7B,GAAA,CAACiC,KAAAA,EAAAA,EAAAA,CAAAA;4BACZ5B,QAAAA,EAAUA,QAAAA;AACV0B,4BAAAA,QAAAA,EAAU,IAAMvB,QAAAA,CAASJ,KAAAA,CAAAA;sCAExBK,aAAAA,CAAc;AACbc,gCAAAA,EAAAA,EAAIC,iBAAAA,CAAkB,6CAAA,CAAA;gCACtBC,cAAAA,EAAgB;AAClB,6BAAA;;;;;;;AAOd;AAUA;;AAEC,IACM,MAAMS,UAAAA,GAAa,CAAC,EACzBC,MAAM,EACN9B,QAAAA,GAAW,KAAK,EAChB+B,QAAQ,EACRC,OAAO,EACP7B,QAAQ,EACQ,GAAA;IAChB,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;AAC1B,IAAA,MAAMxB,wBAAUc,GAAA,CAACsC,aAAAA,EAAAA;AAAcC,QAAAA,IAAAA,EAAMJ,OAAOK,UAAU;QAAE5B,IAAAA,EAAK;;IAE7D,IAAIuB,MAAAA,CAAOM,MAAM,KAAK,QAAA,EAAU;AAC9B,QAAA,MAAMC,WAAWP,MAAAA,CAAOQ,SAAS,IAAIR,MAAAA,CAAOK,UAAU,KAAKI,SAAAA;AAE3D,QAAA,qBACE5C,GAAA,CAAChB,SAAAA,EAAAA;YACCC,IAAAA,EAAK,QAAA;YACLC,OAAAA,EAASA,OAAAA;AACTE,YAAAA,IAAAA,gBAAMY,GAAA,CAACzB,IAAAA,EAAAA;gBAAKsC,SAAAA,EAAU,WAAA;AAAasB,gBAAAA,QAAAA,EAAAA,MAAAA,CAAO/C;;YAC1CC,OAAAA,gBACEC,IAAA,CAAAuD,QAAA,EAAA;;AACGH,oBAAAA,QAAAA,kBACC1C,GAAA,CAAC8C,eAAAA,EAAAA;wBACCzC,QAAAA,EAAUA,QAAAA;AACV0C,wBAAAA,OAAAA,EAAS,IAAMV,OAAAA,CAAQF,MAAAA,CAAAA;AACvBb,wBAAAA,KAAAA,EAAOb,aAAAA,CACL;AACEc,4BAAAA,EAAAA,EAAIC,iBAAAA,CAAkB,qCAAA,CAAA;4BACtBC,cAAAA,EAAgB;yBAClB,EACA;AAAErC,4BAAAA,IAAAA,EAAM+C,OAAO/C;AAAK,yBAAA,CAAA;AAGtB,wBAAA,QAAA,gBAAAY,GAAA,CAACgD,cAAAA,EAAAA,EAAAA;;kCAGLhD,GAAA,CAACrB,gBAAAA,EAAAA;wBACC0B,QAAAA,EAAUA,QAAAA;AACV0C,wBAAAA,OAAAA,EAAS,IAAMvC,QAAAA,CAAS2B,MAAAA,CAAAA;AACxBb,wBAAAA,KAAAA,EAAOb,aAAAA,CACL;AACEc,4BAAAA,EAAAA,EAAIC,iBAAAA,CAAkB,sCAAA,CAAA;4BACtBC,cAAAA,EAAgB;yBAClB,EACA;AAAErC,4BAAAA,IAAAA,EAAM+C,OAAO/C;AAAK,yBAAA,CAAA;AAGtB,wBAAA,QAAA,gBAAAY,GAAA,CAACiC,KAAAA,EAAAA,EAAAA;;;;;AAMb,IAAA;AAEA,IAAA,MAAMgB,iBAAiBxC,aAAAA,CAAc;AACnCc,QAAAA,EAAAA,EAAIC,iBAAAA,CAAkB,wCAAA,CAAA;QACtBC,cAAAA,EAAgB;AAClB,KAAA,CAAA;AAEA,IAAA,qBACEzB,GAAA,CAAChB,SAAAA,EAAAA;QACCC,IAAAA,EAAK,SAAA;QACLC,OAAAA,EAASA,OAAAA;QACTC,OAAAA,gBACEG,IAAA,CAAAuD,QAAA,EAAA;;8BACE7C,GAAA,CAACtB,GAAAA,EAAAA;oBAAIe,QAAAA,EAAS,UAAA;oBAAWyD,GAAAA,EAAK,CAAA;oBAAGC,IAAAA,EAAM,CAAA;AACrC,oBAAA,QAAA,gBAAAnD,GAAA,CAACoD,KAAAA,EAAAA;wBAAMC,eAAAA,EAAgB,YAAA;wBAAaxC,SAAAA,EAAU,YAAA;AAC3CoC,wBAAAA,QAAAA,EAAAA;;;8BAGLjD,GAAA,CAACvB,cAAAA,EAAAA;AACC,oBAAA,QAAA,gBAAAuB,GAAA,CAACsD,iBAAAA,EAAAA;AAAkBC,wBAAAA,QAAAA,EAAUpB,OAAOoB,QAAQ;wBAAEjC,KAAAA,EAAO2B;;;;;AAI3D7D,QAAAA,IAAAA,gBAAMY,GAAA,CAACzB,IAAAA,EAAAA;YAAKsC,SAAAA,EAAU,YAAA;AAAcsB,YAAAA,QAAAA,EAAAA,MAAAA,CAAO/C;;AAC3CC,QAAAA,OAAAA,gBACEW,GAAA,CAAC8C,eAAAA,EAAAA;AACCC,YAAAA,OAAAA,EAAS,IAAMX,QAAAA,CAASD,MAAAA,CAAAA;AACxBb,YAAAA,KAAAA,EAAOb,aAAAA,CACL;AACEc,gBAAAA,EAAAA,EAAIC,iBAAAA,CAAkB,sCAAA,CAAA;gBACtBC,cAAAA,EAAgB;aAClB,EACA;AAAErC,gBAAAA,IAAAA,EAAM+C,OAAO/C;AAAK,aAAA,CAAA;AAGtB,YAAA,QAAA,gBAAAY,GAAA,CAACwD,KAAAA,EAAAA,EAAAA;;;AAKX;;;;"}

package/dist/admin/components/MediaLibraryInput/AssetCarousel.js

@@ -0,0 +1,161 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var strapiAdmin = require('@strapi/admin/strapi-admin');
+var designSystem = require('@strapi/design-system');
+var icons = require('@strapi/icons');
+var reactIntl = require('react-intl');
+var styledComponents = require('styled-components');
+var translations = require('../../utils/translations.js');
+
+/** Narrowest a card and the tile get side by side before stacking, in px. */ const MIN_CARD_WIDTH = 130;
+/**
+ * Narrowest a card gets when two share the row, in px. Wider than the single
+ * card's, so the row drops to one card before names are cut to a few letters.
+ */ const MIN_CARD_WIDTH_FOR_TWO = 180;
+const GAP = 16;
+const MAX_CARDS = 2;
+const Container = styledComponents.styled(designSystem.Box)`
+  background: ${({ theme })=>theme.colors.neutral100};
+  border: 1px solid ${({ theme })=>theme.colors.neutral200};
+  border-radius: ${({ theme })=>theme.borderRadius};
+`;
+const Track = styledComponents.styled.div`
+  display: grid;
+  grid-template-columns: repeat(${({ $columns })=>$columns}, minmax(0, 1fr));
+  gap: ${GAP}px;
+`;
+const Cards = styledComponents.styled.div`
+  position: relative;
+  display: grid;
+  grid-column: span ${({ $columns })=>$columns};
+  grid-template-columns: repeat(${({ $columns })=>$columns}, minmax(0, 1fr));
+  gap: ${GAP}px;
+`;
+const Arrow = styledComponents.styled(designSystem.Box)`
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 1;
+  ${({ $side })=>$side === 'start' ? 'left: -1.6rem;' : 'right: -1.6rem;'}
+
+  button {
+    border-radius: 50%;
+    box-shadow: ${({ theme })=>theme.shadows.filterShadow};
+  }
+`;
+/**
+ * How the row fits the field. The edit layout's size sets it: a third of the
+ * form stacks one card over the drop zone, a full-width field shows two cards
+ * beside it, anything in between one. Mobile always shows one card, stacked on
+ * a phone. The measured width can only take cards away, for a field squeezed
+ * by a narrow component.
+ */ const getRowLayout = ({ width, layoutSize, isMobile, isPhone })=>{
+    const isNarrowLayout = isPhone || layoutSize !== undefined && layoutSize <= 4;
+    const maxCards = isMobile || layoutSize !== undefined && layoutSize < 12 ? 1 : MAX_CARDS;
+    // Unmeasured: no layout yet, or no `ResizeObserver`.
+    const isMeasured = width > 0;
+    const fitsCardAndTile = !isMeasured || width >= 2 * MIN_CARD_WIDTH + GAP;
+    const fitsTwoCardsAndTile = !isMeasured || width >= 3 * MIN_CARD_WIDTH_FOR_TWO + 2 * GAP;
+    if (isNarrowLayout || !fitsCardAndTile) {
+        return {
+            cards: 1,
+            isStacked: true
+        };
+    }
+    return {
+        cards: fitsTwoCardsAndTile ? maxCards : 1,
+        isStacked: false
+    };
+};
+/**
+ * A single row of cards followed by the drop tile. When the field holds more
+ * than fit, arrows page through the cards and the tile stays put.
+ */ const AssetCarousel = ({ children, renderDropZone, layoutSize })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    const theme = styledComponents.useTheme();
+    const isMobile = strapiAdmin.useIsMobile();
+    const isPhone = !strapiAdmin.useMediaQuery(theme.breakpoints.small);
+    const trackRef = React.useRef(null);
+    const [width, setWidth] = React.useState(0);
+    const [start, setStart] = React.useState(0);
+    const cards = React.Children.toArray(children);
+    const { cards: cardsPerRow, isStacked } = getRowLayout({
+        width,
+        layoutSize,
+        isMobile,
+        isPhone
+    });
+    const maxStart = Math.max(cards.length - cardsPerRow, 0);
+    const firstVisible = Math.min(start, maxStart);
+    // Fewer cards than fit leave the tile right after them, not at the far end.
+    const visibleCount = Math.min(cards.length, cardsPerRow);
+    React.useLayoutEffect(()=>{
+        const track = trackRef.current;
+        if (!track || typeof ResizeObserver === 'undefined') {
+            return undefined;
+        }
+        const observer = new ResizeObserver(([entry])=>setWidth(entry.contentRect.width));
+        observer.observe(track);
+        return ()=>observer.disconnect();
+    }, []);
+    // A card added at the end (a new upload) is scrolled into view.
+    const previousCount = React.useRef(cards.length);
+    React.useEffect(()=>{
+        if (cards.length > previousCount.current) {
+            setStart(maxStart);
+        }
+        previousCount.current = cards.length;
+    }, [
+        cards.length,
+        maxStart
+    ]);
+    return /*#__PURE__*/ jsxRuntime.jsxs(Container, {
+        padding: 4,
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsxs(Track, {
+                ref: trackRef,
+                $columns: isStacked ? 1 : cardsPerRow + 1,
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsxs(Cards, {
+                        $columns: visibleCount,
+                        children: [
+                            cards.slice(firstVisible, firstVisible + cardsPerRow),
+                            firstVisible > 0 && /*#__PURE__*/ jsxRuntime.jsx(Arrow, {
+                                $side: "start",
+                                children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
+                                    onClick: ()=>setStart(firstVisible - 1),
+                                    label: formatMessage({
+                                        id: translations.getTranslationKey('mediaLibraryInput.actions.previousSlide'),
+                                        defaultMessage: 'Previous slide'
+                                    }),
+                                    children: /*#__PURE__*/ jsxRuntime.jsx(icons.ChevronLeft, {})
+                                })
+                            }),
+                            firstVisible < maxStart && /*#__PURE__*/ jsxRuntime.jsx(Arrow, {
+                                $side: "end",
+                                children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
+                                    onClick: ()=>setStart(firstVisible + 1),
+                                    label: formatMessage({
+                                        id: translations.getTranslationKey('mediaLibraryInput.actions.nextSlide'),
+                                        defaultMessage: 'Next slide'
+                                    }),
+                                    children: /*#__PURE__*/ jsxRuntime.jsx(icons.ChevronRight, {})
+                                })
+                            })
+                        ]
+                    }),
+                    !isStacked && renderDropZone('tile')
+                ]
+            }),
+            isStacked && /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                paddingTop: 4,
+                children: renderDropZone('stacked')
+            })
+        ]
+    });
+};
+
+exports.AssetCarousel = AssetCarousel;
+//# sourceMappingURL=AssetCarousel.js.map

package/dist/admin/components/MediaLibraryInput/AssetCarousel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AssetCarousel.js","sources":["../../../../admin/src/components/MediaLibraryInput/AssetCarousel.tsx"],"sourcesContent":["import { Children, useEffect, useLayoutEffect, useRef, useState, type ReactNode } from 'react';\n\nimport { useIsMobile, useMediaQuery } from '@strapi/admin/strapi-admin';\nimport { Box, IconButton } from '@strapi/design-system';\nimport { ChevronLeft, ChevronRight } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled, useTheme } from 'styled-components';\n\nimport { getTranslationKey } from '../../utils/translations';\n\nimport type { ZoneVariant } from './AssetDropZone';\n\n/** Narrowest a card and the tile get side by side before stacking, in px. */\nconst MIN_CARD_WIDTH = 130;\n/**\n * Narrowest a card gets when two share the row, in px. Wider than the single\n * card's, so the row drops to one card before names are cut to a few letters.\n */\nconst MIN_CARD_WIDTH_FOR_TWO = 180;\nconst GAP = 16;\nconst MAX_CARDS = 2;\n\nconst Container = styled(Box)`\n  background: ${({ theme }) => theme.colors.neutral100};\n  border: 1px solid ${({ theme }) => theme.colors.neutral200};\n  border-radius: ${({ theme }) => theme.borderRadius};\n`;\n\nconst Track = styled.div<{ $columns: number }>`\n  display: grid;\n  grid-template-columns: repeat(${({ $columns }) => $columns}, minmax(0, 1fr));\n  gap: ${GAP}px;\n`;\n\nconst Cards = styled.div<{ $columns: number }>`\n  position: relative;\n  display: grid;\n  grid-column: span ${({ $columns }) => $columns};\n  grid-template-columns: repeat(${({ $columns }) => $columns}, minmax(0, 1fr));\n  gap: ${GAP}px;\n`;\n\nconst Arrow = styled(Box)<{ $side: 'start' | 'end' }>`\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  z-index: 1;\n  ${({ $side }) => ($side === 'start' ? 'left: -1.6rem;' : 'right: -1.6rem;')}\n\n  button {\n    border-radius: 50%;\n    box-shadow: ${({ theme }) => theme.shadows.filterShadow};\n  }\n`;\n\ninterface RowLayout {\n  /** Cards per row, the drop zone not included. */\n  cards: number;\n  /** Too narrow for a card and the tile side by side: the drop zone goes below. */\n  isStacked: boolean;\n}\n\n/**\n * How the row fits the field. The edit layout's size sets it: a third of the\n * form stacks one card over the drop zone, a full-width field shows two cards\n * beside it, anything in between one. Mobile always shows one card, stacked on\n * a phone. The measured width can only take cards away, for a field squeezed\n * by a narrow component.\n */\nconst getRowLayout = ({\n  width,\n  layoutSize,\n  isMobile,\n  isPhone,\n}: {\n  width: number;\n  layoutSize?: number;\n  /** Below the tablet breakpoint: one card, whatever the layout says. */\n  isMobile: boolean;\n  /** Below the small breakpoint: the drop zone goes under the card. */\n  isPhone: boolean;\n}): RowLayout => {\n  const isNarrowLayout = isPhone || (layoutSize !== undefined && layoutSize <= 4);\n  const maxCards = isMobile || (layoutSize !== undefined && layoutSize < 12) ? 1 : MAX_CARDS;\n\n  // Unmeasured: no layout yet, or no `ResizeObserver`.\n  const isMeasured = width > 0;\n  const fitsCardAndTile = !isMeasured || width >= 2 * MIN_CARD_WIDTH + GAP;\n  const fitsTwoCardsAndTile = !isMeasured || width >= 3 * MIN_CARD_WIDTH_FOR_TWO + 2 * GAP;\n\n  if (isNarrowLayout || !fitsCardAndTile) {\n    return { cards: 1, isStacked: true };\n  }\n\n  return { cards: fitsTwoCardsAndTile ? maxCards : 1, isStacked: false };\n};\n\ninterface AssetCarouselProps {\n  /** One card per asset or upload, in field order. */\n  children: ReactNode;\n  /** Always shown: after the cards, or below them on a narrow field. */\n  renderDropZone: (variant: Exclude<ZoneVariant, 'bar'>) => ReactNode;\n  /** The field's width in the edit layout, out of 12, when the host knows it. */\n  layoutSize?: number;\n}\n\n/**\n * A single row of cards followed by the drop tile. When the field holds more\n * than fit, arrows page through the cards and the tile stays put.\n */\nexport const AssetCarousel = ({ children, renderDropZone, layoutSize }: AssetCarouselProps) => {\n  const { formatMessage } = useIntl();\n  const theme = useTheme();\n  const isMobile = useIsMobile();\n  const isPhone = !useMediaQuery(theme.breakpoints.small);\n  const trackRef = useRef<HTMLDivElement>(null);\n  const [width, setWidth] = useState(0);\n  const [start, setStart] = useState(0);\n\n  const cards = Children.toArray(children);\n  const { cards: cardsPerRow, isStacked } = getRowLayout({ width, layoutSize, isMobile, isPhone });\n  const maxStart = Math.max(cards.length - cardsPerRow, 0);\n  const firstVisible = Math.min(start, maxStart);\n  // Fewer cards than fit leave the tile right after them, not at the far end.\n  const visibleCount = Math.min(cards.length, cardsPerRow);\n\n  useLayoutEffect(() => {\n    const track = trackRef.current;\n\n    if (!track || typeof ResizeObserver === 'undefined') {\n      return undefined;\n    }\n\n    const observer = new ResizeObserver(([entry]) => setWidth(entry.contentRect.width));\n    observer.observe(track);\n\n    return () => observer.disconnect();\n  }, []);\n\n  // A card added at the end (a new upload) is scrolled into view.\n  const previousCount = useRef(cards.length);\n  useEffect(() => {\n    if (cards.length > previousCount.current) {\n      setStart(maxStart);\n    }\n    previousCount.current = cards.length;\n  }, [cards.length, maxStart]);\n\n  return (\n    <Container padding={4}>\n      <Track ref={trackRef} $columns={isStacked ? 1 : cardsPerRow + 1}>\n        <Cards $columns={visibleCount}>\n          {cards.slice(firstVisible, firstVisible + cardsPerRow)}\n\n          {firstVisible > 0 && (\n            <Arrow $side=\"start\">\n              <IconButton\n                onClick={() => setStart(firstVisible - 1)}\n                label={formatMessage({\n                  id: getTranslationKey('mediaLibraryInput.actions.previousSlide'),\n                  defaultMessage: 'Previous slide',\n                })}\n              >\n                <ChevronLeft />\n              </IconButton>\n            </Arrow>\n          )}\n\n          {firstVisible < maxStart && (\n            <Arrow $side=\"end\">\n              <IconButton\n                onClick={() => setStart(firstVisible + 1)}\n                label={formatMessage({\n                  id: getTranslationKey('mediaLibraryInput.actions.nextSlide'),\n                  defaultMessage: 'Next slide',\n                })}\n              >\n                <ChevronRight />\n              </IconButton>\n            </Arrow>\n          )}\n        </Cards>\n        {!isStacked && renderDropZone('tile')}\n      </Track>\n      {isStacked && <Box paddingTop={4}>{renderDropZone('stacked')}</Box>}\n    </Container>\n  );\n};\n"],"names":["MIN_CARD_WIDTH","MIN_CARD_WIDTH_FOR_TWO","GAP","MAX_CARDS","Container","styled","Box","theme","colors","neutral100","neutral200","borderRadius","Track","div","$columns","Cards","Arrow","$side","shadows","filterShadow","getRowLayout","width","layoutSize","isMobile","isPhone","isNarrowLayout","undefined","maxCards","isMeasured","fitsCardAndTile","fitsTwoCardsAndTile","cards","isStacked","AssetCarousel","children","renderDropZone","formatMessage","useIntl","useTheme","useIsMobile","useMediaQuery","breakpoints","small","trackRef","useRef","setWidth","useState","start","setStart","Children","toArray","cardsPerRow","maxStart","Math","max","length","firstVisible","min","visibleCount","useLayoutEffect","track","current","ResizeObserver","observer","entry","contentRect","observe","disconnect","previousCount","useEffect","_jsxs","padding","ref","slice","_jsx","IconButton","onClick","label","id","getTranslationKey","defaultMessage","ChevronLeft","ChevronRight","paddingTop"],"mappings":"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"}

package/dist/admin/components/MediaLibraryInput/AssetCarousel.mjs

@@ -0,0 +1,159 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useState, Children, useLayoutEffect, useEffect } from 'react';
+import { useIsMobile, useMediaQuery } from '@strapi/admin/strapi-admin';
+import { Box, IconButton } from '@strapi/design-system';
+import { ChevronLeft, ChevronRight } from '@strapi/icons';
+import { useIntl } from 'react-intl';
+import { styled, useTheme } from 'styled-components';
+import { getTranslationKey } from '../../utils/translations.mjs';
+
+/** Narrowest a card and the tile get side by side before stacking, in px. */ const MIN_CARD_WIDTH = 130;
+/**
+ * Narrowest a card gets when two share the row, in px. Wider than the single
+ * card's, so the row drops to one card before names are cut to a few letters.
+ */ const MIN_CARD_WIDTH_FOR_TWO = 180;
+const GAP = 16;
+const MAX_CARDS = 2;
+const Container = styled(Box)`
+  background: ${({ theme })=>theme.colors.neutral100};
+  border: 1px solid ${({ theme })=>theme.colors.neutral200};
+  border-radius: ${({ theme })=>theme.borderRadius};
+`;
+const Track = styled.div`
+  display: grid;
+  grid-template-columns: repeat(${({ $columns })=>$columns}, minmax(0, 1fr));
+  gap: ${GAP}px;
+`;
+const Cards = styled.div`
+  position: relative;
+  display: grid;
+  grid-column: span ${({ $columns })=>$columns};
+  grid-template-columns: repeat(${({ $columns })=>$columns}, minmax(0, 1fr));
+  gap: ${GAP}px;
+`;
+const Arrow = styled(Box)`
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 1;
+  ${({ $side })=>$side === 'start' ? 'left: -1.6rem;' : 'right: -1.6rem;'}
+
+  button {
+    border-radius: 50%;
+    box-shadow: ${({ theme })=>theme.shadows.filterShadow};
+  }
+`;
+/**
+ * How the row fits the field. The edit layout's size sets it: a third of the
+ * form stacks one card over the drop zone, a full-width field shows two cards
+ * beside it, anything in between one. Mobile always shows one card, stacked on
+ * a phone. The measured width can only take cards away, for a field squeezed
+ * by a narrow component.
+ */ const getRowLayout = ({ width, layoutSize, isMobile, isPhone })=>{
+    const isNarrowLayout = isPhone || layoutSize !== undefined && layoutSize <= 4;
+    const maxCards = isMobile || layoutSize !== undefined && layoutSize < 12 ? 1 : MAX_CARDS;
+    // Unmeasured: no layout yet, or no `ResizeObserver`.
+    const isMeasured = width > 0;
+    const fitsCardAndTile = !isMeasured || width >= 2 * MIN_CARD_WIDTH + GAP;
+    const fitsTwoCardsAndTile = !isMeasured || width >= 3 * MIN_CARD_WIDTH_FOR_TWO + 2 * GAP;
+    if (isNarrowLayout || !fitsCardAndTile) {
+        return {
+            cards: 1,
+            isStacked: true
+        };
+    }
+    return {
+        cards: fitsTwoCardsAndTile ? maxCards : 1,
+        isStacked: false
+    };
+};
+/**
+ * A single row of cards followed by the drop tile. When the field holds more
+ * than fit, arrows page through the cards and the tile stays put.
+ */ const AssetCarousel = ({ children, renderDropZone, layoutSize })=>{
+    const { formatMessage } = useIntl();
+    const theme = useTheme();
+    const isMobile = useIsMobile();
+    const isPhone = !useMediaQuery(theme.breakpoints.small);
+    const trackRef = useRef(null);
+    const [width, setWidth] = useState(0);
+    const [start, setStart] = useState(0);
+    const cards = Children.toArray(children);
+    const { cards: cardsPerRow, isStacked } = getRowLayout({
+        width,
+        layoutSize,
+        isMobile,
+        isPhone
+    });
+    const maxStart = Math.max(cards.length - cardsPerRow, 0);
+    const firstVisible = Math.min(start, maxStart);
+    // Fewer cards than fit leave the tile right after them, not at the far end.
+    const visibleCount = Math.min(cards.length, cardsPerRow);
+    useLayoutEffect(()=>{
+        const track = trackRef.current;
+        if (!track || typeof ResizeObserver === 'undefined') {
+            return undefined;
+        }
+        const observer = new ResizeObserver(([entry])=>setWidth(entry.contentRect.width));
+        observer.observe(track);
+        return ()=>observer.disconnect();
+    }, []);
+    // A card added at the end (a new upload) is scrolled into view.
+    const previousCount = useRef(cards.length);
+    useEffect(()=>{
+        if (cards.length > previousCount.current) {
+            setStart(maxStart);
+        }
+        previousCount.current = cards.length;
+    }, [
+        cards.length,
+        maxStart
+    ]);
+    return /*#__PURE__*/ jsxs(Container, {
+        padding: 4,
+        children: [
+            /*#__PURE__*/ jsxs(Track, {
+                ref: trackRef,
+                $columns: isStacked ? 1 : cardsPerRow + 1,
+                children: [
+                    /*#__PURE__*/ jsxs(Cards, {
+                        $columns: visibleCount,
+                        children: [
+                            cards.slice(firstVisible, firstVisible + cardsPerRow),
+                            firstVisible > 0 && /*#__PURE__*/ jsx(Arrow, {
+                                $side: "start",
+                                children: /*#__PURE__*/ jsx(IconButton, {
+                                    onClick: ()=>setStart(firstVisible - 1),
+                                    label: formatMessage({
+                                        id: getTranslationKey('mediaLibraryInput.actions.previousSlide'),
+                                        defaultMessage: 'Previous slide'
+                                    }),
+                                    children: /*#__PURE__*/ jsx(ChevronLeft, {})
+                                })
+                            }),
+                            firstVisible < maxStart && /*#__PURE__*/ jsx(Arrow, {
+                                $side: "end",
+                                children: /*#__PURE__*/ jsx(IconButton, {
+                                    onClick: ()=>setStart(firstVisible + 1),
+                                    label: formatMessage({
+                                        id: getTranslationKey('mediaLibraryInput.actions.nextSlide'),
+                                        defaultMessage: 'Next slide'
+                                    }),
+                                    children: /*#__PURE__*/ jsx(ChevronRight, {})
+                                })
+                            })
+                        ]
+                    }),
+                    !isStacked && renderDropZone('tile')
+                ]
+            }),
+            isStacked && /*#__PURE__*/ jsx(Box, {
+                paddingTop: 4,
+                children: renderDropZone('stacked')
+            })
+        ]
+    });
+};
+
+export { AssetCarousel };
+//# sourceMappingURL=AssetCarousel.mjs.map

package/dist/admin/components/MediaLibraryInput/AssetCarousel.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AssetCarousel.mjs","sources":["../../../../admin/src/components/MediaLibraryInput/AssetCarousel.tsx"],"sourcesContent":["import { Children, useEffect, useLayoutEffect, useRef, useState, type ReactNode } from 'react';\n\nimport { useIsMobile, useMediaQuery } from '@strapi/admin/strapi-admin';\nimport { Box, IconButton } from '@strapi/design-system';\nimport { ChevronLeft, ChevronRight } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled, useTheme } from 'styled-components';\n\nimport { getTranslationKey } from '../../utils/translations';\n\nimport type { ZoneVariant } from './AssetDropZone';\n\n/** Narrowest a card and the tile get side by side before stacking, in px. */\nconst MIN_CARD_WIDTH = 130;\n/**\n * Narrowest a card gets when two share the row, in px. Wider than the single\n * card's, so the row drops to one card before names are cut to a few letters.\n */\nconst MIN_CARD_WIDTH_FOR_TWO = 180;\nconst GAP = 16;\nconst MAX_CARDS = 2;\n\nconst Container = styled(Box)`\n  background: ${({ theme }) => theme.colors.neutral100};\n  border: 1px solid ${({ theme }) => theme.colors.neutral200};\n  border-radius: ${({ theme }) => theme.borderRadius};\n`;\n\nconst Track = styled.div<{ $columns: number }>`\n  display: grid;\n  grid-template-columns: repeat(${({ $columns }) => $columns}, minmax(0, 1fr));\n  gap: ${GAP}px;\n`;\n\nconst Cards = styled.div<{ $columns: number }>`\n  position: relative;\n  display: grid;\n  grid-column: span ${({ $columns }) => $columns};\n  grid-template-columns: repeat(${({ $columns }) => $columns}, minmax(0, 1fr));\n  gap: ${GAP}px;\n`;\n\nconst Arrow = styled(Box)<{ $side: 'start' | 'end' }>`\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  z-index: 1;\n  ${({ $side }) => ($side === 'start' ? 'left: -1.6rem;' : 'right: -1.6rem;')}\n\n  button {\n    border-radius: 50%;\n    box-shadow: ${({ theme }) => theme.shadows.filterShadow};\n  }\n`;\n\ninterface RowLayout {\n  /** Cards per row, the drop zone not included. */\n  cards: number;\n  /** Too narrow for a card and the tile side by side: the drop zone goes below. */\n  isStacked: boolean;\n}\n\n/**\n * How the row fits the field. The edit layout's size sets it: a third of the\n * form stacks one card over the drop zone, a full-width field shows two cards\n * beside it, anything in between one. Mobile always shows one card, stacked on\n * a phone. The measured width can only take cards away, for a field squeezed\n * by a narrow component.\n */\nconst getRowLayout = ({\n  width,\n  layoutSize,\n  isMobile,\n  isPhone,\n}: {\n  width: number;\n  layoutSize?: number;\n  /** Below the tablet breakpoint: one card, whatever the layout says. */\n  isMobile: boolean;\n  /** Below the small breakpoint: the drop zone goes under the card. */\n  isPhone: boolean;\n}): RowLayout => {\n  const isNarrowLayout = isPhone || (layoutSize !== undefined && layoutSize <= 4);\n  const maxCards = isMobile || (layoutSize !== undefined && layoutSize < 12) ? 1 : MAX_CARDS;\n\n  // Unmeasured: no layout yet, or no `ResizeObserver`.\n  const isMeasured = width > 0;\n  const fitsCardAndTile = !isMeasured || width >= 2 * MIN_CARD_WIDTH + GAP;\n  const fitsTwoCardsAndTile = !isMeasured || width >= 3 * MIN_CARD_WIDTH_FOR_TWO + 2 * GAP;\n\n  if (isNarrowLayout || !fitsCardAndTile) {\n    return { cards: 1, isStacked: true };\n  }\n\n  return { cards: fitsTwoCardsAndTile ? maxCards : 1, isStacked: false };\n};\n\ninterface AssetCarouselProps {\n  /** One card per asset or upload, in field order. */\n  children: ReactNode;\n  /** Always shown: after the cards, or below them on a narrow field. */\n  renderDropZone: (variant: Exclude<ZoneVariant, 'bar'>) => ReactNode;\n  /** The field's width in the edit layout, out of 12, when the host knows it. */\n  layoutSize?: number;\n}\n\n/**\n * A single row of cards followed by the drop tile. When the field holds more\n * than fit, arrows page through the cards and the tile stays put.\n */\nexport const AssetCarousel = ({ children, renderDropZone, layoutSize }: AssetCarouselProps) => {\n  const { formatMessage } = useIntl();\n  const theme = useTheme();\n  const isMobile = useIsMobile();\n  const isPhone = !useMediaQuery(theme.breakpoints.small);\n  const trackRef = useRef<HTMLDivElement>(null);\n  const [width, setWidth] = useState(0);\n  const [start, setStart] = useState(0);\n\n  const cards = Children.toArray(children);\n  const { cards: cardsPerRow, isStacked } = getRowLayout({ width, layoutSize, isMobile, isPhone });\n  const maxStart = Math.max(cards.length - cardsPerRow, 0);\n  const firstVisible = Math.min(start, maxStart);\n  // Fewer cards than fit leave the tile right after them, not at the far end.\n  const visibleCount = Math.min(cards.length, cardsPerRow);\n\n  useLayoutEffect(() => {\n    const track = trackRef.current;\n\n    if (!track || typeof ResizeObserver === 'undefined') {\n      return undefined;\n    }\n\n    const observer = new ResizeObserver(([entry]) => setWidth(entry.contentRect.width));\n    observer.observe(track);\n\n    return () => observer.disconnect();\n  }, []);\n\n  // A card added at the end (a new upload) is scrolled into view.\n  const previousCount = useRef(cards.length);\n  useEffect(() => {\n    if (cards.length > previousCount.current) {\n      setStart(maxStart);\n    }\n    previousCount.current = cards.length;\n  }, [cards.length, maxStart]);\n\n  return (\n    <Container padding={4}>\n      <Track ref={trackRef} $columns={isStacked ? 1 : cardsPerRow + 1}>\n        <Cards $columns={visibleCount}>\n          {cards.slice(firstVisible, firstVisible + cardsPerRow)}\n\n          {firstVisible > 0 && (\n            <Arrow $side=\"start\">\n              <IconButton\n                onClick={() => setStart(firstVisible - 1)}\n                label={formatMessage({\n                  id: getTranslationKey('mediaLibraryInput.actions.previousSlide'),\n                  defaultMessage: 'Previous slide',\n                })}\n              >\n                <ChevronLeft />\n              </IconButton>\n            </Arrow>\n          )}\n\n          {firstVisible < maxStart && (\n            <Arrow $side=\"end\">\n              <IconButton\n                onClick={() => setStart(firstVisible + 1)}\n                label={formatMessage({\n                  id: getTranslationKey('mediaLibraryInput.actions.nextSlide'),\n                  defaultMessage: 'Next slide',\n                })}\n              >\n                <ChevronRight />\n              </IconButton>\n            </Arrow>\n          )}\n        </Cards>\n        {!isStacked && renderDropZone('tile')}\n      </Track>\n      {isStacked && <Box paddingTop={4}>{renderDropZone('stacked')}</Box>}\n    </Container>\n  );\n};\n"],"names":["MIN_CARD_WIDTH","MIN_CARD_WIDTH_FOR_TWO","GAP","MAX_CARDS","Container","styled","Box","theme","colors","neutral100","neutral200","borderRadius","Track","div","$columns","Cards","Arrow","$side","shadows","filterShadow","getRowLayout","width","layoutSize","isMobile","isPhone","isNarrowLayout","undefined","maxCards","isMeasured","fitsCardAndTile","fitsTwoCardsAndTile","cards","isStacked","AssetCarousel","children","renderDropZone","formatMessage","useIntl","useTheme","useIsMobile","useMediaQuery","breakpoints","small","trackRef","useRef","setWidth","useState","start","setStart","Children","toArray","cardsPerRow","maxStart","Math","max","length","firstVisible","min","visibleCount","useLayoutEffect","track","current","ResizeObserver","observer","entry","contentRect","observe","disconnect","previousCount","useEffect","_jsxs","padding","ref","slice","_jsx","IconButton","onClick","label","id","getTranslationKey","defaultMessage","ChevronLeft","ChevronRight","paddingTop"],"mappings":"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"}

package/dist/admin/components/MediaLibraryInput/AssetDropZone.js

@@ -8,50 +8,79 @@ var reactIntl = require('react-intl');
 var styledComponents = require('styled-components');
 var translations = require('../../utils/translations.js');
 
-const Zone = styledComponents.styled.button`
+const DRAG_FRAME_COLORS = {
+    accept: {
+        border: 'primary600',
+        background: 'primary100'
+    },
+    reject: {
+        border: 'neutral300',
+        background: 'neutral150'
+    }
+};
+const Zone = styledComponents.styled.div`
   position: relative;
   display: flex;
-  flex-direction: column;
   align-items: center;
-  justify-content: center;
-  gap: ${({ theme })=>theme.spaces[2]};
+  gap: ${({ theme })=>theme.spaces[4]};
   width: 100%;
-  min-height: 12rem;
-  padding: ${({ theme })=>theme.spaces[6]};
-  border: 1px solid ${({ theme })=>theme.colors.neutral200};
   border-radius: ${({ theme })=>theme.borderRadius};
-  background: ${({ theme })=>theme.colors.neutral100};
-  cursor: pointer;
+  text-align: ${({ $variant })=>$variant === 'bar' ? 'start' : 'center'};
 
-  // Only while a file is dragged over the zone: it marks where the file will
-  // land, so it has nothing to say to a pointer that is merely passing through.
-  // Drawn inside rather than on the box itself, so the field keeps its own
-  // outline and the invitation reads as an area to drop into.
-  &::after {
-    content: '';
-    position: absolute;
-    inset: ${({ theme })=>theme.spaces[2]} ${({ theme })=>theme.spaces[4]};
-    border: 1px dashed ${({ theme })=>theme.colors.primary600};
-    border-radius: ${({ theme })=>theme.borderRadius};
-    opacity: ${({ $isDragging })=>$isDragging ? 1 : 0};
-    pointer-events: none;
-  }
+  ${({ $variant, theme })=>$variant !== 'bar' ? `
+    flex-direction: column;
+    justify-content: center;
+    height: 100%;
+    min-height: ${$variant === 'tile' ? '20.8rem' : 'auto'};
+    padding: ${theme.spaces[4]};
+    border: 1px dashed ${theme.colors.neutral300};
+    background: ${theme.colors.neutral0};
+  ` : `
+    min-height: 7.2rem;
+    padding: ${theme.spaces[4]};
+    border: 1px solid ${theme.colors.neutral200};
+    background: ${theme.colors.neutral100};
+  `}
 
-  &[aria-disabled='true'] {
-    cursor: not-allowed;
-  }
+  // Only while a file is dragged over the zone: a solid frame inset from the
+  // zone's own border marks where the file will land, greyed out when it can't.
+  ${({ $dragState, theme })=>$dragState !== 'idle' && `
+    &::after {
+      content: '';
+      position: absolute;
+      inset: ${theme.spaces[2]};
+      border: 1px solid ${theme.colors[DRAG_FRAME_COLORS[$dragState].border]};
+      border-radius: ${theme.borderRadius};
+      background: ${theme.colors[DRAG_FRAME_COLORS[$dragState].background]};
+      pointer-events: none;
+    }
 
-  &:focus-visible {
-    outline: 2px solid ${({ theme })=>theme.colors.primary600};
-    outline-offset: 2px;
+    & > * {
+      z-index: 1;
+    }
+  `}
+
+  &[data-disabled='true'] {
+    cursor: not-allowed;
   }
 `;
+const IconFrame = styledComponents.styled(designSystem.Flex)`
+  flex-shrink: 0;
+  width: 4rem;
+  height: 4rem;
+  border-radius: ${({ theme })=>theme.borderRadius};
+  background: ${({ theme })=>theme.colors.neutral200};
+  color: ${({ theme })=>theme.colors.neutral500};
+`;
 /**
- * The field's own drop target. Deliberately not the Media Library page's
+ * The field's own drop target. It only takes drops: browsing and picking files
+ * go through the "Add asset" menu, so the field has one way in, not two.
+ *
+ * Deliberately not the Media Library page's
  * `UploadDropZoneProvider`: that one covers a whole route and paints a
  * full-surface overlay, where this has to stay inside one field on a form that
  * may hold several of them.
- */ const AssetDropZone = ({ disabled = false, onClick, onDropFiles })=>{
+ */ const AssetDropZone = ({ variant = 'bar', disabled = false, onDropFiles })=>{
     const { formatMessage } = reactIntl.useIntl();
     const [isDragging, setIsDragging] = React.useState(false);
     // Drag events fire on descendants too, so a plain boolean flickers as the
@@ -59,14 +88,12 @@ const Zone = styledComponents.styled.button`
     const dragDepth = React.useRef(0);
     const handleDragEnter = React.useCallback((event)=>{
         event.preventDefault();
-        if (disabled || !event.dataTransfer.types.includes('Files')) {
+        if (!event.dataTransfer.types.includes('Files')) {
             return;
         }
         dragDepth.current += 1;
         setIsDragging(true);
-    }, [
-        disabled
-    ]);
+    }, []);
     const handleDragLeave = React.useCallback((event)=>{
         event.preventDefault();
         dragDepth.current -= 1;
@@ -77,8 +104,11 @@ const Zone = styledComponents.styled.button`
     }, []);
     const handleDragOver = React.useCallback((event)=>{
         event.preventDefault();
-        event.dataTransfer.dropEffect = 'copy';
-    }, []);
+        // `none` shows the no-drop cursor, and the browser then fires no `drop`.
+        event.dataTransfer.dropEffect = disabled ? 'none' : 'copy';
+    }, [
+        disabled
+    ]);
     const handleDrop = React.useCallback((event)=>{
         event.preventDefault();
         dragDepth.current = 0;
@@ -95,30 +125,27 @@ const Zone = styledComponents.styled.button`
         onDropFiles
     ]);
     return /*#__PURE__*/ jsxRuntime.jsxs(Zone, {
-        type: "button",
-        $isDragging: isDragging,
-        "aria-disabled": disabled,
-        onClick: ()=>!disabled && onClick(),
+        $dragState: isDragging ? disabled ? 'reject' : 'accept' : 'idle',
+        $variant: variant,
+        "data-disabled": disabled,
         onDragEnter: handleDragEnter,
         onDragLeave: handleDragLeave,
         onDragOver: handleDragOver,
         onDrop: handleDrop,
         children: [
-            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+            /*#__PURE__*/ jsxRuntime.jsx(IconFrame, {
                 justifyContent: "center",
-                color: disabled ? 'neutral500' : 'primary600',
-                children: /*#__PURE__*/ jsxRuntime.jsx(icons.PlusCircle, {
-                    width: "3.2rem",
-                    height: "3.2rem"
+                alignItems: "center",
+                children: /*#__PURE__*/ jsxRuntime.jsx(icons.Images, {
+                    width: "2.4rem",
+                    height: "2.4rem"
                 })
             }),
             /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
                 textColor: "neutral600",
-                fontWeight: "bold",
-                variant: "pi",
                 children: formatMessage({
-                    id: translations.getTranslationKey('mediaLibraryInput.placeholder'),
-                    defaultMessage: 'Click to add an asset or drag and drop one in this area'
+                    id: translations.getTranslationKey('content-manager.input.placeholder'),
+                    defaultMessage: 'Drag & drop an asset here'
                 })
             })
         ]