@strapi/upload 5.60.0 → 5.61.0

package/dist/admin/components/AssetPickerDialog/MediaLibraryPickerDialog.js

@@ -0,0 +1,29 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactIntl = require('react-intl');
+var translations = require('../../utils/translations.js');
+var AssetPickerDialog = require('./AssetPickerDialog.js');
+
+/**
+ * The current asset picker behind the `media-library` component. The editors
+ * insert assets rather than hold a value, and don't pass a field label, so the
+ * title is generic.
+ */ const MediaLibraryPickerDialog = ({ allowedTypes, multiple = true, initiallySelectedAssets, onClose, onSelectAssets })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    return /*#__PURE__*/ jsxRuntime.jsx(AssetPickerDialog.AssetPickerDialog, {
+        open: true,
+        title: formatMessage({
+            id: translations.getTranslationKey('asset-picker.title.insert'),
+            defaultMessage: 'Add assets'
+        }),
+        initialSelection: initiallySelectedAssets,
+        multiple: multiple,
+        allowedTypes: allowedTypes,
+        onClose: onClose,
+        onConfirm: onSelectAssets
+    });
+};
+
+exports.MediaLibraryPickerDialog = MediaLibraryPickerDialog;
+//# sourceMappingURL=MediaLibraryPickerDialog.js.map

package/dist/admin/components/AssetPickerDialog/MediaLibraryPickerDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaLibraryPickerDialog.js","sources":["../../../../admin/src/components/AssetPickerDialog/MediaLibraryPickerDialog.tsx"],"sourcesContent":["import { useIntl } from 'react-intl';\n\nimport { getTranslationKey } from '../../utils/translations';\n\nimport { AssetPickerDialog } from './AssetPickerDialog';\n\nimport type { File } from '../../../../shared/contracts/files';\nimport type { MediaAllowedTypes } from '../../utils/isAllowedAssetType';\n\n/**\n * The `media-library` component contract, which the Wysiwyg and Blocks editors\n * render to insert images. Kept identical to the legacy `MediaLibraryDialog`.\n */\nexport interface MediaLibraryPickerDialogProps {\n  allowedTypes?: MediaAllowedTypes;\n  multiple?: boolean;\n  initiallySelectedAssets?: File[];\n  onClose: () => void;\n  onSelectAssets: (selectedAssets: File[]) => void;\n}\n\n/**\n * The current asset picker behind the `media-library` component. The editors\n * insert assets rather than hold a value, and don't pass a field label, so the\n * title is generic.\n */\nexport const MediaLibraryPickerDialog = ({\n  allowedTypes,\n  multiple = true,\n  initiallySelectedAssets,\n  onClose,\n  onSelectAssets,\n}: MediaLibraryPickerDialogProps) => {\n  const { formatMessage } = useIntl();\n\n  return (\n    <AssetPickerDialog\n      open\n      title={formatMessage({\n        id: getTranslationKey('asset-picker.title.insert'),\n        defaultMessage: 'Add assets',\n      })}\n      initialSelection={initiallySelectedAssets}\n      multiple={multiple}\n      allowedTypes={allowedTypes}\n      onClose={onClose}\n      onConfirm={onSelectAssets}\n    />\n  );\n};\n"],"names":["MediaLibraryPickerDialog","allowedTypes","multiple","initiallySelectedAssets","onClose","onSelectAssets","formatMessage","useIntl","_jsx","AssetPickerDialog","open","title","id","getTranslationKey","defaultMessage","initialSelection","onConfirm"],"mappings":";;;;;;;AAqBA;;;;AAIC,IACM,MAAMA,wBAAAA,GAA2B,CAAC,EACvCC,YAAY,EACZC,QAAAA,GAAW,IAAI,EACfC,uBAAuB,EACvBC,OAAO,EACPC,cAAc,EACgB,GAAA;IAC9B,MAAM,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;AAE1B,IAAA,qBACEC,cAAA,CAACC,mCAAAA,EAAAA;QACCC,IAAI,EAAA,IAAA;AACJC,QAAAA,KAAAA,EAAOL,aAAAA,CAAc;AACnBM,YAAAA,EAAAA,EAAIC,8BAAAA,CAAkB,2BAAA,CAAA;YACtBC,cAAAA,EAAgB;AAClB,SAAA,CAAA;QACAC,gBAAAA,EAAkBZ,uBAAAA;QAClBD,QAAAA,EAAUA,QAAAA;QACVD,YAAAA,EAAcA,YAAAA;QACdG,OAAAA,EAASA,OAAAA;QACTY,SAAAA,EAAWX;;AAGjB;;;;"}

package/dist/admin/components/AssetPickerDialog/MediaLibraryPickerDialog.mjs

@@ -0,0 +1,27 @@
+import { jsx } from 'react/jsx-runtime';
+import { useIntl } from 'react-intl';
+import { getTranslationKey } from '../../utils/translations.mjs';
+import { AssetPickerDialog } from './AssetPickerDialog.mjs';
+
+/**
+ * The current asset picker behind the `media-library` component. The editors
+ * insert assets rather than hold a value, and don't pass a field label, so the
+ * title is generic.
+ */ const MediaLibraryPickerDialog = ({ allowedTypes, multiple = true, initiallySelectedAssets, onClose, onSelectAssets })=>{
+    const { formatMessage } = useIntl();
+    return /*#__PURE__*/ jsx(AssetPickerDialog, {
+        open: true,
+        title: formatMessage({
+            id: getTranslationKey('asset-picker.title.insert'),
+            defaultMessage: 'Add assets'
+        }),
+        initialSelection: initiallySelectedAssets,
+        multiple: multiple,
+        allowedTypes: allowedTypes,
+        onClose: onClose,
+        onConfirm: onSelectAssets
+    });
+};
+
+export { MediaLibraryPickerDialog };
+//# sourceMappingURL=MediaLibraryPickerDialog.mjs.map

package/dist/admin/components/AssetPickerDialog/MediaLibraryPickerDialog.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaLibraryPickerDialog.mjs","sources":["../../../../admin/src/components/AssetPickerDialog/MediaLibraryPickerDialog.tsx"],"sourcesContent":["import { useIntl } from 'react-intl';\n\nimport { getTranslationKey } from '../../utils/translations';\n\nimport { AssetPickerDialog } from './AssetPickerDialog';\n\nimport type { File } from '../../../../shared/contracts/files';\nimport type { MediaAllowedTypes } from '../../utils/isAllowedAssetType';\n\n/**\n * The `media-library` component contract, which the Wysiwyg and Blocks editors\n * render to insert images. Kept identical to the legacy `MediaLibraryDialog`.\n */\nexport interface MediaLibraryPickerDialogProps {\n  allowedTypes?: MediaAllowedTypes;\n  multiple?: boolean;\n  initiallySelectedAssets?: File[];\n  onClose: () => void;\n  onSelectAssets: (selectedAssets: File[]) => void;\n}\n\n/**\n * The current asset picker behind the `media-library` component. The editors\n * insert assets rather than hold a value, and don't pass a field label, so the\n * title is generic.\n */\nexport const MediaLibraryPickerDialog = ({\n  allowedTypes,\n  multiple = true,\n  initiallySelectedAssets,\n  onClose,\n  onSelectAssets,\n}: MediaLibraryPickerDialogProps) => {\n  const { formatMessage } = useIntl();\n\n  return (\n    <AssetPickerDialog\n      open\n      title={formatMessage({\n        id: getTranslationKey('asset-picker.title.insert'),\n        defaultMessage: 'Add assets',\n      })}\n      initialSelection={initiallySelectedAssets}\n      multiple={multiple}\n      allowedTypes={allowedTypes}\n      onClose={onClose}\n      onConfirm={onSelectAssets}\n    />\n  );\n};\n"],"names":["MediaLibraryPickerDialog","allowedTypes","multiple","initiallySelectedAssets","onClose","onSelectAssets","formatMessage","useIntl","_jsx","AssetPickerDialog","open","title","id","getTranslationKey","defaultMessage","initialSelection","onConfirm"],"mappings":";;;;;AAqBA;;;;AAIC,IACM,MAAMA,wBAAAA,GAA2B,CAAC,EACvCC,YAAY,EACZC,QAAAA,GAAW,IAAI,EACfC,uBAAuB,EACvBC,OAAO,EACPC,cAAc,EACgB,GAAA;IAC9B,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;AAE1B,IAAA,qBACEC,GAAA,CAACC,iBAAAA,EAAAA;QACCC,IAAI,EAAA,IAAA;AACJC,QAAAA,KAAAA,EAAOL,aAAAA,CAAc;AACnBM,YAAAA,EAAAA,EAAIC,iBAAAA,CAAkB,2BAAA,CAAA;YACtBC,cAAAA,EAAgB;AAClB,SAAA,CAAA;QACAC,gBAAAA,EAAkBZ,uBAAAA;QAClBD,QAAAA,EAAUA,QAAAA;QACVD,YAAAA,EAAcA,YAAAA;QACdG,OAAAA,EAASA,OAAAA;QACTY,SAAAA,EAAWX;;AAGjB;;;;"}

package/dist/admin/components/Drawer.js

@@ -88,12 +88,15 @@ const DrawerContainer = styledComponents.styled(designSystem.Flex)`
   width: 100%;
   padding: ${({ theme })=>theme.spaces[2]};
   max-width: 100%;
-  /* Sit just below the overlay token (300) so that:
-     - popovers (500) and tooltips (1000) rendered from descendant components
-       surface above the drawer panel,
-     - AlertDialog overlays (300) and contents (310) opened from inside the
-       drawer (e.g. the asset details "delete" confirm) cover the drawer. */
-  z-index: 200;
+  /* On the overlay token, so ties resolve by DOM order, as they do between DS
+     modals: a drawer opened from inside a modal (e.g. a media field in the
+     content manager's relation modal) portals in after it and sits above its
+     overlay, while a dialog opened from inside the drawer (e.g. the asset
+     details "delete" confirm) portals in after the drawer and covers it.
+     Not the modal token (310): a DS dialog's content stacks inside its own
+     overlay at 300, so the drawer would cover its own confirmations.
+     Popovers (500) and tooltips (1000) still surface above the panel. */
+  z-index: ${({ theme })=>theme.zIndices.overlay};
   overflow: hidden;
   /* dvh, not vh: anchored to the bottom, a 100vh cap on mobile (visual
      viewport < 100vh under the URL bar) would push the drawer top off-screen. */
@@ -162,11 +165,13 @@ const CloseIconButton = styledComponents.styled(designSystem.IconButton)`
   }
 `;
 /** Vetoes an outside interaction that would otherwise dismiss the drawer. */ const keepOpen = (event)=>event.preventDefault();
-const DrawerBody = /*#__PURE__*/ React__namespace.forwardRef(({ animationDirection, width, maxHeight, onPointerDownOutside = keepOpen, children, ...props }, ref)=>/*#__PURE__*/ jsxRuntime.jsx(Dialog__namespace.Content, {
+const DrawerBody = /*#__PURE__*/ React__namespace.forwardRef(({ animationDirection, width, maxHeight, onPointerDownOutside = keepOpen, onOpenAutoFocus, onCloseAutoFocus, children, ...props }, ref)=>/*#__PURE__*/ jsxRuntime.jsx(Dialog__namespace.Content, {
         ref: ref,
         forceMount: true,
         asChild: true,
         onPointerDownOutside: onPointerDownOutside,
+        onOpenAutoFocus: onOpenAutoFocus,
+        onCloseAutoFocus: onCloseAutoFocus,
         // Non-modal, so focus legitimately moves outside (tabbing past the last
         // field); only a pointer press should ever dismiss.
         onFocusOutside: keepOpen,

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

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","sources":["../../../admin/src/components/Drawer.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport * as Dialog from '@radix-ui/react-dialog';\nimport { Box, ScrollArea, IconButton, Flex, FlexProps } from '@strapi/design-system';\nimport { Cross } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { keyframes, styled } from 'styled-components';\n\n/** Duration of the close animation in ms. Use for timing cleanup (e.g. removing URL params). */\nexport const DRAWER_CLOSE_ANIMATION_MS = 300;\n\n/* -------------------------------------------------------------------------------------------------\n * Animations\n * -----------------------------------------------------------------------------------------------*/\n\n// Direction: up\nconst slideUpFromBottomIn = keyframes`\n  from {\n    opacity: 0;\n    transform: translateY(100%);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n`;\n\nconst slideUpFromBottomOut = keyframes`\n  from {\n    opacity: 1;\n    transform: translateY(0);\n  }\n  to {\n    opacity: 0;\n    transform: translateY(100%);\n  }\n`;\n\n// Direction: left\nconst slideLeftFromRightIn = keyframes`\n  from {\n    opacity: 0;\n    transform: translateX(100%);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n`;\n\nconst slideLeftFromRightOut = keyframes`\n  from {\n    opacity: 1;\n    transform: translateX(0);\n  }\n  to {\n    opacity: 0;\n    transform: translateX(100%);\n  }\n`;\n\n/* -------------------------------------------------------------------------------------------------\n * Styled components\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DrawerContainerProps {\n  $animationDirection?: DrawerBodyProps['animationDirection'];\n  $width?: string;\n  $maxHeight?: string;\n}\n\nconst DrawerContainer = styled(Flex)<DrawerContainerProps>`\n  flex-direction: column;\n  position: fixed;\n  bottom: 0;\n  /* Mobile: full-bleed sheet. Anchoring to the right at a fixed width left a\n     dead gutter on every phone wider than the panel, and the panel only filled\n     the screen once the viewport happened to be narrower than it. Below the\n     medium breakpoint the panel is the screen; medium+ restores the\n     right-anchored rail. */\n  left: 0;\n  right: 0;\n  width: 100%;\n  padding: ${({ theme }) => theme.spaces[2]};\n  max-width: 100%;\n  /* Sit just below the overlay token (300) so that:\n     - popovers (500) and tooltips (1000) rendered from descendant components\n       surface above the drawer panel,\n     - AlertDialog overlays (300) and contents (310) opened from inside the\n       drawer (e.g. the asset details \"delete\" confirm) cover the drawer. */\n  z-index: 200;\n  overflow: hidden;\n  /* dvh, not vh: anchored to the bottom, a 100vh cap on mobile (visual\n     viewport < 100vh under the URL bar) would push the drawer top off-screen. */\n  max-height: ${({ $maxHeight }) => $maxHeight ?? '100dvh'};\n\n  ${({ theme }) => theme.breakpoints.medium} {\n    left: auto;\n    width: ${({ $width }) => $width ?? '400px'};\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    &[data-state='open'] {\n      animation: ${({ $animationDirection }) =>\n          $animationDirection === 'up' ? slideUpFromBottomIn : slideLeftFromRightIn}\n        ${DRAWER_CLOSE_ANIMATION_MS}ms cubic-bezier(0.32, 0.72, 0, 1) forwards;\n    }\n\n    &[data-state='closed'] {\n      animation: ${({ $animationDirection }) =>\n          $animationDirection === 'up' ? slideUpFromBottomOut : slideLeftFromRightOut}\n        ${DRAWER_CLOSE_ANIMATION_MS}ms cubic-bezier(0.32, 0.72, 0, 1) forwards;\n      pointer-events: none;\n    }\n  }\n`;\n\nconst DrawerContent = styled(Box)`\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-height: 0;\n  width: 100%;\n  background-color: ${({ theme }) => theme.colors.neutral0};\n  border-radius: ${({ theme }) => theme.borderRadius};\n  box-shadow: ${({ theme }) => theme.shadows.popupShadow};\n  overflow: hidden;\n  border: 1px solid ${({ theme }) => theme.colors.neutral150};\n`;\n\ninterface CollapsibleContentProps {\n  $isVisible: boolean;\n}\n\nconst CollapsibleContent = styled(Box)<CollapsibleContentProps>`\n  display: grid;\n  flex: 1;\n  min-height: 0;\n  grid-template-rows: ${({ $isVisible }) => ($isVisible ? '1fr' : '0fr')};\n  transition: grid-template-rows 0.3s ease-in-out;\n\n  > div {\n    overflow: hidden;\n    min-height: 0;\n  }\n\n  /* The scroll area wraps its children in a div styled inline as\n     display: table, min-width: 100%. A table box grows to its content, so a\n     single unbreakable string (a long file name) widens it past the scrollport\n     and the panel gains a horizontal scrollbar — with nothing left to clamp the\n     row, the name never truncates. Overriding to a block box makes the\n     scrollport the width again, which is what the vertical-only list wants.\n     Inline styles, hence the important. */\n  [data-radix-scroll-area-viewport] > div {\n    display: block !important;\n  }\n`;\n\nconst CloseIconButton = styled(IconButton)`\n  &:hover {\n    background: transparent;\n  }\n`;\n\n/* -------------------------------------------------------------------------------------------------\n * Drawer.Body\n * -----------------------------------------------------------------------------------------------*/\n\ntype PointerDownOutsideHandler = NonNullable<Dialog.DialogContentProps['onPointerDownOutside']>;\n\n/** Vetoes an outside interaction that would otherwise dismiss the drawer. */\nconst keepOpen = (event: { preventDefault: () => void }) => event.preventDefault();\n\ninterface DrawerBodyProps extends Omit<FlexProps, 'width' | 'maxHeight'> {\n  animationDirection?: 'up' | 'left';\n  /** Width of the panel from the medium breakpoint up. Mobile is always full-bleed. */\n  width?: string;\n  /** Cap on the panel height. Defaults to the dynamic viewport height. */\n  maxHeight?: string;\n  /**\n   * Opt in to dismiss-on-outside-click. Omitted, an outside pointer press never\n   * closes the drawer — it must be closed explicitly, as long-running panels\n   * like the upload progress dialog need. Passed, the handler can still veto\n   * individual presses via `event.preventDefault()`. Content rendered from\n   * inside the panel but portaled elsewhere (DS dialogs, popovers, tooltips)\n   * never counts as outside — Radix reads the React tree, not the DOM.\n   */\n  onPointerDownOutside?: PointerDownOutsideHandler;\n  children: React.ReactNode;\n}\n\nconst DrawerBody = React.forwardRef<HTMLDivElement, DrawerBodyProps>(\n  (\n    { animationDirection, width, maxHeight, onPointerDownOutside = keepOpen, children, ...props },\n    ref\n  ) => (\n    <Dialog.Content\n      ref={ref}\n      forceMount\n      asChild\n      onPointerDownOutside={onPointerDownOutside}\n      // Non-modal, so focus legitimately moves outside (tabbing past the last\n      // field); only a pointer press should ever dismiss.\n      onFocusOutside={keepOpen}\n      data-animation-direction={animationDirection}\n    >\n      {/* width/maxHeight go through transient props so the DS Flex never emits a\n          competing `width` rule that would outrank the mobile full-bleed one. */}\n      <DrawerContainer\n        $animationDirection={animationDirection}\n        $width={width}\n        $maxHeight={maxHeight}\n        {...props}\n      >\n        <DrawerContent>{children}</DrawerContent>\n      </DrawerContainer>\n    </Dialog.Content>\n  )\n);\nDrawerBody.displayName = 'DrawerBody';\n\n/* -------------------------------------------------------------------------------------------------\n * Drawer.Root\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DrawerRootProps {\n  isVisible?: boolean;\n  onClose?: () => void;\n  children: React.ReactNode;\n}\n\nconst DrawerRoot = ({ isVisible, onClose, children }: DrawerRootProps): React.ReactElement => (\n  <Dialog.Root\n    open={isVisible}\n    onOpenChange={(nextVisible) => !nextVisible && onClose?.()}\n    modal={false}\n  >\n    <Dialog.Portal>{children}</Dialog.Portal>\n  </Dialog.Root>\n);\n\n/* -------------------------------------------------------------------------------------------------\n * Drawer.Content - composable content slot (collapsible when isContentExpanded is used)\n * Contains a scrollable area\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DrawerScrollableContentProps {\n  children: React.ReactNode;\n  /** When provided, content can collapse/expand (e.g. for minimize). Omit to always show. */\n  isContentExpanded?: boolean;\n}\n\nconst DrawerScrollableContent = ({\n  children,\n  isContentExpanded = true,\n}: DrawerScrollableContentProps) => (\n  <CollapsibleContent $isVisible={isContentExpanded} data-collapsed={!isContentExpanded}>\n    <ScrollArea>{children}</ScrollArea>\n  </CollapsibleContent>\n);\n\n/* -------------------------------------------------------------------------------------------------\n * Drawer.CloseButton - composable close icon button (Cross icon by default)\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DrawerCloseButtonProps extends React.PropsWithChildren {\n  onClose: () => void;\n  label?: string;\n}\n\nconst DrawerCloseButton = ({ onClose, label, children }: DrawerCloseButtonProps) => {\n  const { formatMessage } = useIntl();\n  const labelMessage = label ?? formatMessage({ id: 'global.close', defaultMessage: 'Close' });\n  return (\n    <CloseIconButton onClick={onClose} label={labelMessage} variant=\"ghost\">\n      {children ?? <Cross />}\n    </CloseIconButton>\n  );\n};\n\nconst Drawer = {\n  Root: DrawerRoot,\n  Body: DrawerBody,\n  ScrollableContent: DrawerScrollableContent,\n  CloseButton: DrawerCloseButton,\n  Title: Dialog.Title,\n  Description: Dialog.Description,\n};\n\nexport { Drawer };\n"],"names":["DRAWER_CLOSE_ANIMATION_MS","slideUpFromBottomIn","keyframes","slideUpFromBottomOut","slideLeftFromRightIn","slideLeftFromRightOut","DrawerContainer","styled","Flex","theme","spaces","$maxHeight","breakpoints","medium","$width","$animationDirection","DrawerContent","Box","colors","neutral0","borderRadius","shadows","popupShadow","neutral150","CollapsibleContent","$isVisible","CloseIconButton","IconButton","keepOpen","event","preventDefault","DrawerBody","React","forwardRef","animationDirection","width","maxHeight","onPointerDownOutside","children","props","ref","_jsx","Dialog","Content","forceMount","asChild","onFocusOutside","data-animation-direction","displayName","DrawerRoot","isVisible","onClose","Root","open","onOpenChange","nextVisible","modal","Portal","DrawerScrollableContent","isContentExpanded","data-collapsed","ScrollArea","DrawerCloseButton","label","formatMessage","useIntl","labelMessage","id","defaultMessage","onClick","variant","Cross","Drawer","Body","ScrollableContent","CloseButton","Title","Description"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,iGACO,MAAMA,yBAAAA,GAA4B;AAEzC;;AAEkG;AAGlG,MAAMC,mBAAAA,GAAsBC,0BAAS;;;;;;;;;AASrC,CAAC;AAED,MAAMC,oBAAAA,GAAuBD,0BAAS;;;;;;;;;AAStC,CAAC;AAED;AACA,MAAME,oBAAAA,GAAuBF,0BAAS;;;;;;;;;AAStC,CAAC;AAED,MAAMG,qBAAAA,GAAwBH,0BAAS;;;;;;;;;AASvC,CAAC;AAYD,MAAMI,eAAAA,GAAkBC,uBAAAA,CAAOC,iBAAAA,CAA2B;;;;;;;;;;;;WAY/C,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAAA,CAAMC,MAAM,CAAC,CAAA,CAAE,CAAC;;;;;;;;;;;AAW9B,cAAA,EAAE,CAAC,EAAEC,UAAU,EAAE,GAAKA,cAAc,QAAA,CAAS;;EAEzD,EAAE,CAAC,EAAEF,KAAK,EAAE,GAAKA,KAAAA,CAAMG,WAAW,CAACC,MAAM,CAAC;;AAEjC,WAAA,EAAE,CAAC,EAAEC,MAAM,EAAE,GAAKA,UAAU,OAAA,CAAQ;;;;;;;;;iBAS9B,EAAE,CAAC,EAAEC,mBAAmB,EAAE,GACjCA,mBAAAA,KAAwB,IAAA,GAAOd,sBAAsBG,oBAAAA;AACvD,QAAA,EAAEJ,yBAAAA,CAA0B;;;;iBAInB,EAAE,CAAC,EAAEe,mBAAmB,EAAE,GACjCA,mBAAAA,KAAwB,IAAA,GAAOZ,uBAAuBE,qBAAAA;AACxD,QAAA,EAAEL,yBAAAA,CAA0B;;;;AAIpC,CAAC;AAED,MAAMgB,aAAAA,GAAgBT,uBAAAA,CAAOU,gBAAAA,CAAI;;;;;;oBAMb,EAAE,CAAC,EAAER,KAAK,EAAE,GAAKA,KAAAA,CAAMS,MAAM,CAACC,QAAQ,CAAC;AAC1C,iBAAA,EAAE,CAAC,EAAEV,KAAK,EAAE,GAAKA,KAAAA,CAAMW,YAAY,CAAC;cACvC,EAAE,CAAC,EAAEX,KAAK,EAAE,GAAKA,KAAAA,CAAMY,OAAO,CAACC,WAAW,CAAC;;oBAErC,EAAE,CAAC,EAAEb,KAAK,EAAE,GAAKA,KAAAA,CAAMS,MAAM,CAACK,UAAU,CAAC;AAC7D,CAAC;AAMD,MAAMC,kBAAAA,GAAqBjB,uBAAAA,CAAOU,gBAAAA,CAA6B;;;;AAIzC,sBAAA,EAAE,CAAC,EAAEQ,UAAU,EAAE,GAAMA,UAAAA,GAAa,QAAQ,KAAA,CAAO;;;;;;;;;;;;;;;;;;AAkBzE,CAAC;AAED,MAAMC,eAAAA,GAAkBnB,uBAAAA,CAAOoB,uBAAAA,CAAW;;;;AAI1C,CAAC;AAQD,8EACA,MAAMC,QAAAA,GAAW,CAACC,KAAAA,GAA0CA,MAAMC,cAAc,EAAA;AAoBhF,MAAMC,UAAAA,iBAAaC,iBAAMC,UAAU,CACjC,CACE,EAAEC,kBAAkB,EAAEC,KAAK,EAAEC,SAAS,EAAEC,oBAAAA,GAAuBT,QAAQ,EAAEU,QAAQ,EAAE,GAAGC,OAAO,EAC7FC,GAAAA,iBAEAC,cAAA,CAACC,iBAAAA,CAAOC,OAAO,EAAA;QACbH,GAAAA,EAAKA,GAAAA;QACLI,UAAU,EAAA,IAAA;QACVC,OAAO,EAAA,IAAA;QACPR,oBAAAA,EAAsBA,oBAAAA;;;QAGtBS,cAAAA,EAAgBlB,QAAAA;QAChBmB,0BAAAA,EAA0Bb,kBAAAA;AAI1B,QAAA,QAAA,gBAAAO,cAAA,CAACnC,eAAAA,EAAAA;YACCS,mBAAAA,EAAqBmB,kBAAAA;YACrBpB,MAAAA,EAAQqB,KAAAA;YACRxB,UAAAA,EAAYyB,SAAAA;AACX,YAAA,GAAGG,KAAK;AAET,YAAA,QAAA,gBAAAE,cAAA,CAACzB,aAAAA,EAAAA;AAAesB,gBAAAA,QAAAA,EAAAA;;;;AAKxBP,UAAAA,CAAWiB,WAAW,GAAG,YAAA;AAYzB,MAAMC,UAAAA,GAAa,CAAC,EAAEC,SAAS,EAAEC,OAAO,EAAEb,QAAQ,EAAmB,iBACnEG,cAAA,CAACC,iBAAAA,CAAOU,IAAI,EAAA;QACVC,IAAAA,EAAMH,SAAAA;QACNI,YAAAA,EAAc,CAACC,WAAAA,GAAgB,CAACA,WAAAA,IAAeJ,OAAAA,IAAAA;QAC/CK,KAAAA,EAAO,KAAA;gCAEPf,cAAA,CAACC,kBAAOe,MAAM,EAAA;AAAEnB,YAAAA,QAAAA,EAAAA;;;AAepB,MAAMoB,uBAAAA,GAA0B,CAAC,EAC/BpB,QAAQ,EACRqB,iBAAAA,GAAoB,IAAI,EACK,iBAC7BlB,cAAA,CAACjB,kBAAAA,EAAAA;QAAmBC,UAAAA,EAAYkC,iBAAAA;AAAmBC,QAAAA,gBAAAA,EAAgB,CAACD,iBAAAA;AAClE,QAAA,QAAA,gBAAAlB,cAAA,CAACoB,uBAAAA,EAAAA;AAAYvB,YAAAA,QAAAA,EAAAA;;;AAajB,MAAMwB,iBAAAA,GAAoB,CAAC,EAAEX,OAAO,EAAEY,KAAK,EAAEzB,QAAQ,EAA0B,GAAA;IAC7E,MAAM,EAAE0B,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;IAC1B,MAAMC,YAAAA,GAAeH,SAASC,aAAAA,CAAc;QAAEG,EAAAA,EAAI,cAAA;QAAgBC,cAAAA,EAAgB;AAAQ,KAAA,CAAA;AAC1F,IAAA,qBACE3B,cAAA,CAACf,eAAAA,EAAAA;QAAgB2C,OAAAA,EAASlB,OAAAA;QAASY,KAAAA,EAAOG,YAAAA;QAAcI,OAAAA,EAAQ,OAAA;AAC7DhC,QAAAA,QAAAA,EAAAA,QAAAA,kBAAYG,cAAA,CAAC8B,WAAAA,EAAAA,EAAAA;;AAGpB,CAAA;AAEA,MAAMC,MAAAA,GAAS;IACbpB,IAAAA,EAAMH,UAAAA;IACNwB,IAAAA,EAAM1C,UAAAA;IACN2C,iBAAAA,EAAmBhB,uBAAAA;IACnBiB,WAAAA,EAAab,iBAAAA;AACbc,IAAAA,KAAAA,EAAOlC,kBAAOkC,KAAK;AACnBC,IAAAA,WAAAA,EAAanC,kBAAOmC;AACtB;;;;;"}
+{"version":3,"file":"Drawer.js","sources":["../../../admin/src/components/Drawer.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport * as Dialog from '@radix-ui/react-dialog';\nimport { Box, ScrollArea, IconButton, Flex, FlexProps } from '@strapi/design-system';\nimport { Cross } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { keyframes, styled } from 'styled-components';\n\n/** Duration of the close animation in ms. Use for timing cleanup (e.g. removing URL params). */\nexport const DRAWER_CLOSE_ANIMATION_MS = 300;\n\n/* -------------------------------------------------------------------------------------------------\n * Animations\n * -----------------------------------------------------------------------------------------------*/\n\n// Direction: up\nconst slideUpFromBottomIn = keyframes`\n  from {\n    opacity: 0;\n    transform: translateY(100%);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n`;\n\nconst slideUpFromBottomOut = keyframes`\n  from {\n    opacity: 1;\n    transform: translateY(0);\n  }\n  to {\n    opacity: 0;\n    transform: translateY(100%);\n  }\n`;\n\n// Direction: left\nconst slideLeftFromRightIn = keyframes`\n  from {\n    opacity: 0;\n    transform: translateX(100%);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n`;\n\nconst slideLeftFromRightOut = keyframes`\n  from {\n    opacity: 1;\n    transform: translateX(0);\n  }\n  to {\n    opacity: 0;\n    transform: translateX(100%);\n  }\n`;\n\n/* -------------------------------------------------------------------------------------------------\n * Styled components\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DrawerContainerProps {\n  $animationDirection?: DrawerBodyProps['animationDirection'];\n  $width?: string;\n  $maxHeight?: string;\n}\n\nconst DrawerContainer = styled(Flex)<DrawerContainerProps>`\n  flex-direction: column;\n  position: fixed;\n  bottom: 0;\n  /* Mobile: full-bleed sheet. Anchoring to the right at a fixed width left a\n     dead gutter on every phone wider than the panel, and the panel only filled\n     the screen once the viewport happened to be narrower than it. Below the\n     medium breakpoint the panel is the screen; medium+ restores the\n     right-anchored rail. */\n  left: 0;\n  right: 0;\n  width: 100%;\n  padding: ${({ theme }) => theme.spaces[2]};\n  max-width: 100%;\n  /* On the overlay token, so ties resolve by DOM order, as they do between DS\n     modals: a drawer opened from inside a modal (e.g. a media field in the\n     content manager's relation modal) portals in after it and sits above its\n     overlay, while a dialog opened from inside the drawer (e.g. the asset\n     details \"delete\" confirm) portals in after the drawer and covers it.\n     Not the modal token (310): a DS dialog's content stacks inside its own\n     overlay at 300, so the drawer would cover its own confirmations.\n     Popovers (500) and tooltips (1000) still surface above the panel. */\n  z-index: ${({ theme }) => theme.zIndices.overlay};\n  overflow: hidden;\n  /* dvh, not vh: anchored to the bottom, a 100vh cap on mobile (visual\n     viewport < 100vh under the URL bar) would push the drawer top off-screen. */\n  max-height: ${({ $maxHeight }) => $maxHeight ?? '100dvh'};\n\n  ${({ theme }) => theme.breakpoints.medium} {\n    left: auto;\n    width: ${({ $width }) => $width ?? '400px'};\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    &[data-state='open'] {\n      animation: ${({ $animationDirection }) =>\n          $animationDirection === 'up' ? slideUpFromBottomIn : slideLeftFromRightIn}\n        ${DRAWER_CLOSE_ANIMATION_MS}ms cubic-bezier(0.32, 0.72, 0, 1) forwards;\n    }\n\n    &[data-state='closed'] {\n      animation: ${({ $animationDirection }) =>\n          $animationDirection === 'up' ? slideUpFromBottomOut : slideLeftFromRightOut}\n        ${DRAWER_CLOSE_ANIMATION_MS}ms cubic-bezier(0.32, 0.72, 0, 1) forwards;\n      pointer-events: none;\n    }\n  }\n`;\n\nconst DrawerContent = styled(Box)`\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-height: 0;\n  width: 100%;\n  background-color: ${({ theme }) => theme.colors.neutral0};\n  border-radius: ${({ theme }) => theme.borderRadius};\n  box-shadow: ${({ theme }) => theme.shadows.popupShadow};\n  overflow: hidden;\n  border: 1px solid ${({ theme }) => theme.colors.neutral150};\n`;\n\ninterface CollapsibleContentProps {\n  $isVisible: boolean;\n}\n\nconst CollapsibleContent = styled(Box)<CollapsibleContentProps>`\n  display: grid;\n  flex: 1;\n  min-height: 0;\n  grid-template-rows: ${({ $isVisible }) => ($isVisible ? '1fr' : '0fr')};\n  transition: grid-template-rows 0.3s ease-in-out;\n\n  > div {\n    overflow: hidden;\n    min-height: 0;\n  }\n\n  /* The scroll area wraps its children in a div styled inline as\n     display: table, min-width: 100%. A table box grows to its content, so a\n     single unbreakable string (a long file name) widens it past the scrollport\n     and the panel gains a horizontal scrollbar — with nothing left to clamp the\n     row, the name never truncates. Overriding to a block box makes the\n     scrollport the width again, which is what the vertical-only list wants.\n     Inline styles, hence the important. */\n  [data-radix-scroll-area-viewport] > div {\n    display: block !important;\n  }\n`;\n\nconst CloseIconButton = styled(IconButton)`\n  &:hover {\n    background: transparent;\n  }\n`;\n\n/* -------------------------------------------------------------------------------------------------\n * Drawer.Body\n * -----------------------------------------------------------------------------------------------*/\n\ntype PointerDownOutsideHandler = NonNullable<Dialog.DialogContentProps['onPointerDownOutside']>;\ntype AutoFocusHandler = NonNullable<Dialog.DialogContentProps['onOpenAutoFocus']>;\n\n/** Vetoes an outside interaction that would otherwise dismiss the drawer. */\nconst keepOpen = (event: { preventDefault: () => void }) => event.preventDefault();\n\ninterface DrawerBodyProps extends Omit<FlexProps, 'width' | 'maxHeight'> {\n  animationDirection?: 'up' | 'left';\n  /** Width of the panel from the medium breakpoint up. Mobile is always full-bleed. */\n  width?: string;\n  /** Cap on the panel height. Defaults to the dynamic viewport height. */\n  maxHeight?: string;\n  /**\n   * Opt in to dismiss-on-outside-click. Omitted, an outside pointer press never\n   * closes the drawer — it must be closed explicitly, as long-running panels\n   * like the upload progress dialog need. Passed, the handler can still veto\n   * individual presses via `event.preventDefault()`. Content rendered from\n   * inside the panel but portaled elsewhere (DS dialogs, popovers, tooltips)\n   * never counts as outside — Radix reads the React tree, not the DOM.\n   */\n  onPointerDownOutside?: PointerDownOutsideHandler;\n  /** Radix's hook as focus moves into the panel on open. */\n  onOpenAutoFocus?: AutoFocusHandler;\n  /**\n   * Radix's hook as the panel gives focus back on close. Opened from state\n   * rather than a `Dialog.Trigger`, it has nowhere to send it unless this does.\n   */\n  onCloseAutoFocus?: AutoFocusHandler;\n  children: React.ReactNode;\n}\n\nconst DrawerBody = React.forwardRef<HTMLDivElement, DrawerBodyProps>(\n  (\n    {\n      animationDirection,\n      width,\n      maxHeight,\n      onPointerDownOutside = keepOpen,\n      onOpenAutoFocus,\n      onCloseAutoFocus,\n      children,\n      ...props\n    },\n    ref\n  ) => (\n    <Dialog.Content\n      ref={ref}\n      forceMount\n      asChild\n      onPointerDownOutside={onPointerDownOutside}\n      onOpenAutoFocus={onOpenAutoFocus}\n      onCloseAutoFocus={onCloseAutoFocus}\n      // Non-modal, so focus legitimately moves outside (tabbing past the last\n      // field); only a pointer press should ever dismiss.\n      onFocusOutside={keepOpen}\n      data-animation-direction={animationDirection}\n    >\n      {/* width/maxHeight go through transient props so the DS Flex never emits a\n          competing `width` rule that would outrank the mobile full-bleed one. */}\n      <DrawerContainer\n        $animationDirection={animationDirection}\n        $width={width}\n        $maxHeight={maxHeight}\n        {...props}\n      >\n        <DrawerContent>{children}</DrawerContent>\n      </DrawerContainer>\n    </Dialog.Content>\n  )\n);\nDrawerBody.displayName = 'DrawerBody';\n\n/* -------------------------------------------------------------------------------------------------\n * Drawer.Root\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DrawerRootProps {\n  isVisible?: boolean;\n  onClose?: () => void;\n  children: React.ReactNode;\n}\n\nconst DrawerRoot = ({ isVisible, onClose, children }: DrawerRootProps): React.ReactElement => (\n  <Dialog.Root\n    open={isVisible}\n    onOpenChange={(nextVisible) => !nextVisible && onClose?.()}\n    modal={false}\n  >\n    <Dialog.Portal>{children}</Dialog.Portal>\n  </Dialog.Root>\n);\n\n/* -------------------------------------------------------------------------------------------------\n * Drawer.Content - composable content slot (collapsible when isContentExpanded is used)\n * Contains a scrollable area\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DrawerScrollableContentProps {\n  children: React.ReactNode;\n  /** When provided, content can collapse/expand (e.g. for minimize). Omit to always show. */\n  isContentExpanded?: boolean;\n}\n\nconst DrawerScrollableContent = ({\n  children,\n  isContentExpanded = true,\n}: DrawerScrollableContentProps) => (\n  <CollapsibleContent $isVisible={isContentExpanded} data-collapsed={!isContentExpanded}>\n    <ScrollArea>{children}</ScrollArea>\n  </CollapsibleContent>\n);\n\n/* -------------------------------------------------------------------------------------------------\n * Drawer.CloseButton - composable close icon button (Cross icon by default)\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DrawerCloseButtonProps extends React.PropsWithChildren {\n  onClose: () => void;\n  label?: string;\n}\n\nconst DrawerCloseButton = ({ onClose, label, children }: DrawerCloseButtonProps) => {\n  const { formatMessage } = useIntl();\n  const labelMessage = label ?? formatMessage({ id: 'global.close', defaultMessage: 'Close' });\n  return (\n    <CloseIconButton onClick={onClose} label={labelMessage} variant=\"ghost\">\n      {children ?? <Cross />}\n    </CloseIconButton>\n  );\n};\n\nconst Drawer = {\n  Root: DrawerRoot,\n  Body: DrawerBody,\n  ScrollableContent: DrawerScrollableContent,\n  CloseButton: DrawerCloseButton,\n  Title: Dialog.Title,\n  Description: Dialog.Description,\n};\n\nexport { Drawer };\n"],"names":["DRAWER_CLOSE_ANIMATION_MS","slideUpFromBottomIn","keyframes","slideUpFromBottomOut","slideLeftFromRightIn","slideLeftFromRightOut","DrawerContainer","styled","Flex","theme","spaces","zIndices","overlay","$maxHeight","breakpoints","medium","$width","$animationDirection","DrawerContent","Box","colors","neutral0","borderRadius","shadows","popupShadow","neutral150","CollapsibleContent","$isVisible","CloseIconButton","IconButton","keepOpen","event","preventDefault","DrawerBody","React","forwardRef","animationDirection","width","maxHeight","onPointerDownOutside","onOpenAutoFocus","onCloseAutoFocus","children","props","ref","_jsx","Dialog","Content","forceMount","asChild","onFocusOutside","data-animation-direction","displayName","DrawerRoot","isVisible","onClose","Root","open","onOpenChange","nextVisible","modal","Portal","DrawerScrollableContent","isContentExpanded","data-collapsed","ScrollArea","DrawerCloseButton","label","formatMessage","useIntl","labelMessage","id","defaultMessage","onClick","variant","Cross","Drawer","Body","ScrollableContent","CloseButton","Title","Description"],"mappings":"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"}

package/dist/admin/components/Drawer.mjs

@@ -65,12 +65,15 @@ const DrawerContainer = styled(Flex)`
   width: 100%;
   padding: ${({ theme })=>theme.spaces[2]};
   max-width: 100%;
-  /* Sit just below the overlay token (300) so that:
-     - popovers (500) and tooltips (1000) rendered from descendant components
-       surface above the drawer panel,
-     - AlertDialog overlays (300) and contents (310) opened from inside the
-       drawer (e.g. the asset details "delete" confirm) cover the drawer. */
-  z-index: 200;
+  /* On the overlay token, so ties resolve by DOM order, as they do between DS
+     modals: a drawer opened from inside a modal (e.g. a media field in the
+     content manager's relation modal) portals in after it and sits above its
+     overlay, while a dialog opened from inside the drawer (e.g. the asset
+     details "delete" confirm) portals in after the drawer and covers it.
+     Not the modal token (310): a DS dialog's content stacks inside its own
+     overlay at 300, so the drawer would cover its own confirmations.
+     Popovers (500) and tooltips (1000) still surface above the panel. */
+  z-index: ${({ theme })=>theme.zIndices.overlay};
   overflow: hidden;
   /* dvh, not vh: anchored to the bottom, a 100vh cap on mobile (visual
      viewport < 100vh under the URL bar) would push the drawer top off-screen. */
@@ -139,11 +142,13 @@ const CloseIconButton = styled(IconButton)`
   }
 `;
 /** Vetoes an outside interaction that would otherwise dismiss the drawer. */ const keepOpen = (event)=>event.preventDefault();
-const DrawerBody = /*#__PURE__*/ React.forwardRef(({ animationDirection, width, maxHeight, onPointerDownOutside = keepOpen, children, ...props }, ref)=>/*#__PURE__*/ jsx(Dialog.Content, {
+const DrawerBody = /*#__PURE__*/ React.forwardRef(({ animationDirection, width, maxHeight, onPointerDownOutside = keepOpen, onOpenAutoFocus, onCloseAutoFocus, children, ...props }, ref)=>/*#__PURE__*/ jsx(Dialog.Content, {
         ref: ref,
         forceMount: true,
         asChild: true,
         onPointerDownOutside: onPointerDownOutside,
+        onOpenAutoFocus: onOpenAutoFocus,
+        onCloseAutoFocus: onCloseAutoFocus,
         // Non-modal, so focus legitimately moves outside (tabbing past the last
         // field); only a pointer press should ever dismiss.
         onFocusOutside: keepOpen,

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

@@ -1 +1 @@
-{"version":3,"file":"Drawer.mjs","sources":["../../../admin/src/components/Drawer.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport * as Dialog from '@radix-ui/react-dialog';\nimport { Box, ScrollArea, IconButton, Flex, FlexProps } from '@strapi/design-system';\nimport { Cross } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { keyframes, styled } from 'styled-components';\n\n/** Duration of the close animation in ms. Use for timing cleanup (e.g. removing URL params). */\nexport const DRAWER_CLOSE_ANIMATION_MS = 300;\n\n/* -------------------------------------------------------------------------------------------------\n * Animations\n * -----------------------------------------------------------------------------------------------*/\n\n// Direction: up\nconst slideUpFromBottomIn = keyframes`\n  from {\n    opacity: 0;\n    transform: translateY(100%);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n`;\n\nconst slideUpFromBottomOut = keyframes`\n  from {\n    opacity: 1;\n    transform: translateY(0);\n  }\n  to {\n    opacity: 0;\n    transform: translateY(100%);\n  }\n`;\n\n// Direction: left\nconst slideLeftFromRightIn = keyframes`\n  from {\n    opacity: 0;\n    transform: translateX(100%);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n`;\n\nconst slideLeftFromRightOut = keyframes`\n  from {\n    opacity: 1;\n    transform: translateX(0);\n  }\n  to {\n    opacity: 0;\n    transform: translateX(100%);\n  }\n`;\n\n/* -------------------------------------------------------------------------------------------------\n * Styled components\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DrawerContainerProps {\n  $animationDirection?: DrawerBodyProps['animationDirection'];\n  $width?: string;\n  $maxHeight?: string;\n}\n\nconst DrawerContainer = styled(Flex)<DrawerContainerProps>`\n  flex-direction: column;\n  position: fixed;\n  bottom: 0;\n  /* Mobile: full-bleed sheet. Anchoring to the right at a fixed width left a\n     dead gutter on every phone wider than the panel, and the panel only filled\n     the screen once the viewport happened to be narrower than it. Below the\n     medium breakpoint the panel is the screen; medium+ restores the\n     right-anchored rail. */\n  left: 0;\n  right: 0;\n  width: 100%;\n  padding: ${({ theme }) => theme.spaces[2]};\n  max-width: 100%;\n  /* Sit just below the overlay token (300) so that:\n     - popovers (500) and tooltips (1000) rendered from descendant components\n       surface above the drawer panel,\n     - AlertDialog overlays (300) and contents (310) opened from inside the\n       drawer (e.g. the asset details \"delete\" confirm) cover the drawer. */\n  z-index: 200;\n  overflow: hidden;\n  /* dvh, not vh: anchored to the bottom, a 100vh cap on mobile (visual\n     viewport < 100vh under the URL bar) would push the drawer top off-screen. */\n  max-height: ${({ $maxHeight }) => $maxHeight ?? '100dvh'};\n\n  ${({ theme }) => theme.breakpoints.medium} {\n    left: auto;\n    width: ${({ $width }) => $width ?? '400px'};\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    &[data-state='open'] {\n      animation: ${({ $animationDirection }) =>\n          $animationDirection === 'up' ? slideUpFromBottomIn : slideLeftFromRightIn}\n        ${DRAWER_CLOSE_ANIMATION_MS}ms cubic-bezier(0.32, 0.72, 0, 1) forwards;\n    }\n\n    &[data-state='closed'] {\n      animation: ${({ $animationDirection }) =>\n          $animationDirection === 'up' ? slideUpFromBottomOut : slideLeftFromRightOut}\n        ${DRAWER_CLOSE_ANIMATION_MS}ms cubic-bezier(0.32, 0.72, 0, 1) forwards;\n      pointer-events: none;\n    }\n  }\n`;\n\nconst DrawerContent = styled(Box)`\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-height: 0;\n  width: 100%;\n  background-color: ${({ theme }) => theme.colors.neutral0};\n  border-radius: ${({ theme }) => theme.borderRadius};\n  box-shadow: ${({ theme }) => theme.shadows.popupShadow};\n  overflow: hidden;\n  border: 1px solid ${({ theme }) => theme.colors.neutral150};\n`;\n\ninterface CollapsibleContentProps {\n  $isVisible: boolean;\n}\n\nconst CollapsibleContent = styled(Box)<CollapsibleContentProps>`\n  display: grid;\n  flex: 1;\n  min-height: 0;\n  grid-template-rows: ${({ $isVisible }) => ($isVisible ? '1fr' : '0fr')};\n  transition: grid-template-rows 0.3s ease-in-out;\n\n  > div {\n    overflow: hidden;\n    min-height: 0;\n  }\n\n  /* The scroll area wraps its children in a div styled inline as\n     display: table, min-width: 100%. A table box grows to its content, so a\n     single unbreakable string (a long file name) widens it past the scrollport\n     and the panel gains a horizontal scrollbar — with nothing left to clamp the\n     row, the name never truncates. Overriding to a block box makes the\n     scrollport the width again, which is what the vertical-only list wants.\n     Inline styles, hence the important. */\n  [data-radix-scroll-area-viewport] > div {\n    display: block !important;\n  }\n`;\n\nconst CloseIconButton = styled(IconButton)`\n  &:hover {\n    background: transparent;\n  }\n`;\n\n/* -------------------------------------------------------------------------------------------------\n * Drawer.Body\n * -----------------------------------------------------------------------------------------------*/\n\ntype PointerDownOutsideHandler = NonNullable<Dialog.DialogContentProps['onPointerDownOutside']>;\n\n/** Vetoes an outside interaction that would otherwise dismiss the drawer. */\nconst keepOpen = (event: { preventDefault: () => void }) => event.preventDefault();\n\ninterface DrawerBodyProps extends Omit<FlexProps, 'width' | 'maxHeight'> {\n  animationDirection?: 'up' | 'left';\n  /** Width of the panel from the medium breakpoint up. Mobile is always full-bleed. */\n  width?: string;\n  /** Cap on the panel height. Defaults to the dynamic viewport height. */\n  maxHeight?: string;\n  /**\n   * Opt in to dismiss-on-outside-click. Omitted, an outside pointer press never\n   * closes the drawer — it must be closed explicitly, as long-running panels\n   * like the upload progress dialog need. Passed, the handler can still veto\n   * individual presses via `event.preventDefault()`. Content rendered from\n   * inside the panel but portaled elsewhere (DS dialogs, popovers, tooltips)\n   * never counts as outside — Radix reads the React tree, not the DOM.\n   */\n  onPointerDownOutside?: PointerDownOutsideHandler;\n  children: React.ReactNode;\n}\n\nconst DrawerBody = React.forwardRef<HTMLDivElement, DrawerBodyProps>(\n  (\n    { animationDirection, width, maxHeight, onPointerDownOutside = keepOpen, children, ...props },\n    ref\n  ) => (\n    <Dialog.Content\n      ref={ref}\n      forceMount\n      asChild\n      onPointerDownOutside={onPointerDownOutside}\n      // Non-modal, so focus legitimately moves outside (tabbing past the last\n      // field); only a pointer press should ever dismiss.\n      onFocusOutside={keepOpen}\n      data-animation-direction={animationDirection}\n    >\n      {/* width/maxHeight go through transient props so the DS Flex never emits a\n          competing `width` rule that would outrank the mobile full-bleed one. */}\n      <DrawerContainer\n        $animationDirection={animationDirection}\n        $width={width}\n        $maxHeight={maxHeight}\n        {...props}\n      >\n        <DrawerContent>{children}</DrawerContent>\n      </DrawerContainer>\n    </Dialog.Content>\n  )\n);\nDrawerBody.displayName = 'DrawerBody';\n\n/* -------------------------------------------------------------------------------------------------\n * Drawer.Root\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DrawerRootProps {\n  isVisible?: boolean;\n  onClose?: () => void;\n  children: React.ReactNode;\n}\n\nconst DrawerRoot = ({ isVisible, onClose, children }: DrawerRootProps): React.ReactElement => (\n  <Dialog.Root\n    open={isVisible}\n    onOpenChange={(nextVisible) => !nextVisible && onClose?.()}\n    modal={false}\n  >\n    <Dialog.Portal>{children}</Dialog.Portal>\n  </Dialog.Root>\n);\n\n/* -------------------------------------------------------------------------------------------------\n * Drawer.Content - composable content slot (collapsible when isContentExpanded is used)\n * Contains a scrollable area\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DrawerScrollableContentProps {\n  children: React.ReactNode;\n  /** When provided, content can collapse/expand (e.g. for minimize). Omit to always show. */\n  isContentExpanded?: boolean;\n}\n\nconst DrawerScrollableContent = ({\n  children,\n  isContentExpanded = true,\n}: DrawerScrollableContentProps) => (\n  <CollapsibleContent $isVisible={isContentExpanded} data-collapsed={!isContentExpanded}>\n    <ScrollArea>{children}</ScrollArea>\n  </CollapsibleContent>\n);\n\n/* -------------------------------------------------------------------------------------------------\n * Drawer.CloseButton - composable close icon button (Cross icon by default)\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DrawerCloseButtonProps extends React.PropsWithChildren {\n  onClose: () => void;\n  label?: string;\n}\n\nconst DrawerCloseButton = ({ onClose, label, children }: DrawerCloseButtonProps) => {\n  const { formatMessage } = useIntl();\n  const labelMessage = label ?? formatMessage({ id: 'global.close', defaultMessage: 'Close' });\n  return (\n    <CloseIconButton onClick={onClose} label={labelMessage} variant=\"ghost\">\n      {children ?? <Cross />}\n    </CloseIconButton>\n  );\n};\n\nconst Drawer = {\n  Root: DrawerRoot,\n  Body: DrawerBody,\n  ScrollableContent: DrawerScrollableContent,\n  CloseButton: DrawerCloseButton,\n  Title: Dialog.Title,\n  Description: Dialog.Description,\n};\n\nexport { Drawer };\n"],"names":["DRAWER_CLOSE_ANIMATION_MS","slideUpFromBottomIn","keyframes","slideUpFromBottomOut","slideLeftFromRightIn","slideLeftFromRightOut","DrawerContainer","styled","Flex","theme","spaces","$maxHeight","breakpoints","medium","$width","$animationDirection","DrawerContent","Box","colors","neutral0","borderRadius","shadows","popupShadow","neutral150","CollapsibleContent","$isVisible","CloseIconButton","IconButton","keepOpen","event","preventDefault","DrawerBody","React","forwardRef","animationDirection","width","maxHeight","onPointerDownOutside","children","props","ref","_jsx","Dialog","Content","forceMount","asChild","onFocusOutside","data-animation-direction","displayName","DrawerRoot","isVisible","onClose","Root","open","onOpenChange","nextVisible","modal","Portal","DrawerScrollableContent","isContentExpanded","data-collapsed","ScrollArea","DrawerCloseButton","label","formatMessage","useIntl","labelMessage","id","defaultMessage","onClick","variant","Cross","Drawer","Body","ScrollableContent","CloseButton","Title","Description"],"mappings":"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"}
+{"version":3,"file":"Drawer.mjs","sources":["../../../admin/src/components/Drawer.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport * as Dialog from '@radix-ui/react-dialog';\nimport { Box, ScrollArea, IconButton, Flex, FlexProps } from '@strapi/design-system';\nimport { Cross } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { keyframes, styled } from 'styled-components';\n\n/** Duration of the close animation in ms. Use for timing cleanup (e.g. removing URL params). */\nexport const DRAWER_CLOSE_ANIMATION_MS = 300;\n\n/* -------------------------------------------------------------------------------------------------\n * Animations\n * -----------------------------------------------------------------------------------------------*/\n\n// Direction: up\nconst slideUpFromBottomIn = keyframes`\n  from {\n    opacity: 0;\n    transform: translateY(100%);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n`;\n\nconst slideUpFromBottomOut = keyframes`\n  from {\n    opacity: 1;\n    transform: translateY(0);\n  }\n  to {\n    opacity: 0;\n    transform: translateY(100%);\n  }\n`;\n\n// Direction: left\nconst slideLeftFromRightIn = keyframes`\n  from {\n    opacity: 0;\n    transform: translateX(100%);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n`;\n\nconst slideLeftFromRightOut = keyframes`\n  from {\n    opacity: 1;\n    transform: translateX(0);\n  }\n  to {\n    opacity: 0;\n    transform: translateX(100%);\n  }\n`;\n\n/* -------------------------------------------------------------------------------------------------\n * Styled components\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DrawerContainerProps {\n  $animationDirection?: DrawerBodyProps['animationDirection'];\n  $width?: string;\n  $maxHeight?: string;\n}\n\nconst DrawerContainer = styled(Flex)<DrawerContainerProps>`\n  flex-direction: column;\n  position: fixed;\n  bottom: 0;\n  /* Mobile: full-bleed sheet. Anchoring to the right at a fixed width left a\n     dead gutter on every phone wider than the panel, and the panel only filled\n     the screen once the viewport happened to be narrower than it. Below the\n     medium breakpoint the panel is the screen; medium+ restores the\n     right-anchored rail. */\n  left: 0;\n  right: 0;\n  width: 100%;\n  padding: ${({ theme }) => theme.spaces[2]};\n  max-width: 100%;\n  /* On the overlay token, so ties resolve by DOM order, as they do between DS\n     modals: a drawer opened from inside a modal (e.g. a media field in the\n     content manager's relation modal) portals in after it and sits above its\n     overlay, while a dialog opened from inside the drawer (e.g. the asset\n     details \"delete\" confirm) portals in after the drawer and covers it.\n     Not the modal token (310): a DS dialog's content stacks inside its own\n     overlay at 300, so the drawer would cover its own confirmations.\n     Popovers (500) and tooltips (1000) still surface above the panel. */\n  z-index: ${({ theme }) => theme.zIndices.overlay};\n  overflow: hidden;\n  /* dvh, not vh: anchored to the bottom, a 100vh cap on mobile (visual\n     viewport < 100vh under the URL bar) would push the drawer top off-screen. */\n  max-height: ${({ $maxHeight }) => $maxHeight ?? '100dvh'};\n\n  ${({ theme }) => theme.breakpoints.medium} {\n    left: auto;\n    width: ${({ $width }) => $width ?? '400px'};\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    &[data-state='open'] {\n      animation: ${({ $animationDirection }) =>\n          $animationDirection === 'up' ? slideUpFromBottomIn : slideLeftFromRightIn}\n        ${DRAWER_CLOSE_ANIMATION_MS}ms cubic-bezier(0.32, 0.72, 0, 1) forwards;\n    }\n\n    &[data-state='closed'] {\n      animation: ${({ $animationDirection }) =>\n          $animationDirection === 'up' ? slideUpFromBottomOut : slideLeftFromRightOut}\n        ${DRAWER_CLOSE_ANIMATION_MS}ms cubic-bezier(0.32, 0.72, 0, 1) forwards;\n      pointer-events: none;\n    }\n  }\n`;\n\nconst DrawerContent = styled(Box)`\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-height: 0;\n  width: 100%;\n  background-color: ${({ theme }) => theme.colors.neutral0};\n  border-radius: ${({ theme }) => theme.borderRadius};\n  box-shadow: ${({ theme }) => theme.shadows.popupShadow};\n  overflow: hidden;\n  border: 1px solid ${({ theme }) => theme.colors.neutral150};\n`;\n\ninterface CollapsibleContentProps {\n  $isVisible: boolean;\n}\n\nconst CollapsibleContent = styled(Box)<CollapsibleContentProps>`\n  display: grid;\n  flex: 1;\n  min-height: 0;\n  grid-template-rows: ${({ $isVisible }) => ($isVisible ? '1fr' : '0fr')};\n  transition: grid-template-rows 0.3s ease-in-out;\n\n  > div {\n    overflow: hidden;\n    min-height: 0;\n  }\n\n  /* The scroll area wraps its children in a div styled inline as\n     display: table, min-width: 100%. A table box grows to its content, so a\n     single unbreakable string (a long file name) widens it past the scrollport\n     and the panel gains a horizontal scrollbar — with nothing left to clamp the\n     row, the name never truncates. Overriding to a block box makes the\n     scrollport the width again, which is what the vertical-only list wants.\n     Inline styles, hence the important. */\n  [data-radix-scroll-area-viewport] > div {\n    display: block !important;\n  }\n`;\n\nconst CloseIconButton = styled(IconButton)`\n  &:hover {\n    background: transparent;\n  }\n`;\n\n/* -------------------------------------------------------------------------------------------------\n * Drawer.Body\n * -----------------------------------------------------------------------------------------------*/\n\ntype PointerDownOutsideHandler = NonNullable<Dialog.DialogContentProps['onPointerDownOutside']>;\ntype AutoFocusHandler = NonNullable<Dialog.DialogContentProps['onOpenAutoFocus']>;\n\n/** Vetoes an outside interaction that would otherwise dismiss the drawer. */\nconst keepOpen = (event: { preventDefault: () => void }) => event.preventDefault();\n\ninterface DrawerBodyProps extends Omit<FlexProps, 'width' | 'maxHeight'> {\n  animationDirection?: 'up' | 'left';\n  /** Width of the panel from the medium breakpoint up. Mobile is always full-bleed. */\n  width?: string;\n  /** Cap on the panel height. Defaults to the dynamic viewport height. */\n  maxHeight?: string;\n  /**\n   * Opt in to dismiss-on-outside-click. Omitted, an outside pointer press never\n   * closes the drawer — it must be closed explicitly, as long-running panels\n   * like the upload progress dialog need. Passed, the handler can still veto\n   * individual presses via `event.preventDefault()`. Content rendered from\n   * inside the panel but portaled elsewhere (DS dialogs, popovers, tooltips)\n   * never counts as outside — Radix reads the React tree, not the DOM.\n   */\n  onPointerDownOutside?: PointerDownOutsideHandler;\n  /** Radix's hook as focus moves into the panel on open. */\n  onOpenAutoFocus?: AutoFocusHandler;\n  /**\n   * Radix's hook as the panel gives focus back on close. Opened from state\n   * rather than a `Dialog.Trigger`, it has nowhere to send it unless this does.\n   */\n  onCloseAutoFocus?: AutoFocusHandler;\n  children: React.ReactNode;\n}\n\nconst DrawerBody = React.forwardRef<HTMLDivElement, DrawerBodyProps>(\n  (\n    {\n      animationDirection,\n      width,\n      maxHeight,\n      onPointerDownOutside = keepOpen,\n      onOpenAutoFocus,\n      onCloseAutoFocus,\n      children,\n      ...props\n    },\n    ref\n  ) => (\n    <Dialog.Content\n      ref={ref}\n      forceMount\n      asChild\n      onPointerDownOutside={onPointerDownOutside}\n      onOpenAutoFocus={onOpenAutoFocus}\n      onCloseAutoFocus={onCloseAutoFocus}\n      // Non-modal, so focus legitimately moves outside (tabbing past the last\n      // field); only a pointer press should ever dismiss.\n      onFocusOutside={keepOpen}\n      data-animation-direction={animationDirection}\n    >\n      {/* width/maxHeight go through transient props so the DS Flex never emits a\n          competing `width` rule that would outrank the mobile full-bleed one. */}\n      <DrawerContainer\n        $animationDirection={animationDirection}\n        $width={width}\n        $maxHeight={maxHeight}\n        {...props}\n      >\n        <DrawerContent>{children}</DrawerContent>\n      </DrawerContainer>\n    </Dialog.Content>\n  )\n);\nDrawerBody.displayName = 'DrawerBody';\n\n/* -------------------------------------------------------------------------------------------------\n * Drawer.Root\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DrawerRootProps {\n  isVisible?: boolean;\n  onClose?: () => void;\n  children: React.ReactNode;\n}\n\nconst DrawerRoot = ({ isVisible, onClose, children }: DrawerRootProps): React.ReactElement => (\n  <Dialog.Root\n    open={isVisible}\n    onOpenChange={(nextVisible) => !nextVisible && onClose?.()}\n    modal={false}\n  >\n    <Dialog.Portal>{children}</Dialog.Portal>\n  </Dialog.Root>\n);\n\n/* -------------------------------------------------------------------------------------------------\n * Drawer.Content - composable content slot (collapsible when isContentExpanded is used)\n * Contains a scrollable area\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DrawerScrollableContentProps {\n  children: React.ReactNode;\n  /** When provided, content can collapse/expand (e.g. for minimize). Omit to always show. */\n  isContentExpanded?: boolean;\n}\n\nconst DrawerScrollableContent = ({\n  children,\n  isContentExpanded = true,\n}: DrawerScrollableContentProps) => (\n  <CollapsibleContent $isVisible={isContentExpanded} data-collapsed={!isContentExpanded}>\n    <ScrollArea>{children}</ScrollArea>\n  </CollapsibleContent>\n);\n\n/* -------------------------------------------------------------------------------------------------\n * Drawer.CloseButton - composable close icon button (Cross icon by default)\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DrawerCloseButtonProps extends React.PropsWithChildren {\n  onClose: () => void;\n  label?: string;\n}\n\nconst DrawerCloseButton = ({ onClose, label, children }: DrawerCloseButtonProps) => {\n  const { formatMessage } = useIntl();\n  const labelMessage = label ?? formatMessage({ id: 'global.close', defaultMessage: 'Close' });\n  return (\n    <CloseIconButton onClick={onClose} label={labelMessage} variant=\"ghost\">\n      {children ?? <Cross />}\n    </CloseIconButton>\n  );\n};\n\nconst Drawer = {\n  Root: DrawerRoot,\n  Body: DrawerBody,\n  ScrollableContent: DrawerScrollableContent,\n  CloseButton: DrawerCloseButton,\n  Title: Dialog.Title,\n  Description: Dialog.Description,\n};\n\nexport { Drawer };\n"],"names":["DRAWER_CLOSE_ANIMATION_MS","slideUpFromBottomIn","keyframes","slideUpFromBottomOut","slideLeftFromRightIn","slideLeftFromRightOut","DrawerContainer","styled","Flex","theme","spaces","zIndices","overlay","$maxHeight","breakpoints","medium","$width","$animationDirection","DrawerContent","Box","colors","neutral0","borderRadius","shadows","popupShadow","neutral150","CollapsibleContent","$isVisible","CloseIconButton","IconButton","keepOpen","event","preventDefault","DrawerBody","React","forwardRef","animationDirection","width","maxHeight","onPointerDownOutside","onOpenAutoFocus","onCloseAutoFocus","children","props","ref","_jsx","Dialog","Content","forceMount","asChild","onFocusOutside","data-animation-direction","displayName","DrawerRoot","isVisible","onClose","Root","open","onOpenChange","nextVisible","modal","Portal","DrawerScrollableContent","isContentExpanded","data-collapsed","ScrollArea","DrawerCloseButton","label","formatMessage","useIntl","labelMessage","id","defaultMessage","onClick","variant","Cross","Drawer","Body","ScrollableContent","CloseButton","Title","Description"],"mappings":"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"}

package/dist/admin/components/EditorFileDropZone/EditorFileDropZone.js

@@ -0,0 +1,188 @@
+'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 reactIntl = require('react-intl');
+var styledComponents = require('styled-components');
+var useAIMetadataEnabled = require('../../hooks/useAIMetadataEnabled.js');
+var useMediaLibraryPermissions = require('../../hooks/useMediaLibraryPermissions.js');
+var useTracking = require('../../hooks/useTracking.js');
+var api = require('../../services/api.js');
+var settings = require('../../services/settings.js');
+var allowedMediaTypes = require('../../utils/allowedMediaTypes.js');
+var translations = require('../../utils/translations.js');
+var typeFromMime = require('../../utils/typeFromMime.js');
+
+const FRAME_COLORS = {
+    accept: {
+        border: 'primary600',
+        background: 'primary100',
+        text: 'primary600'
+    },
+    reject: {
+        border: 'neutral300',
+        background: 'neutral150',
+        text: 'neutral600'
+    }
+};
+// Takes the place of the editor's content in its layout, so it fills the same
+// space: the editor stacks its parts against the start, sized to their content.
+const Root = styledComponents.styled.div`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  width: 100%;
+  min-height: 0;
+`;
+const Frame = styledComponents.styled.div`
+  position: absolute;
+  inset: ${({ theme })=>theme.spaces[2]};
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid ${({ theme, $dragState })=>theme.colors[FRAME_COLORS[$dragState].border]};
+  border-radius: ${({ theme })=>theme.borderRadius};
+  background: ${({ theme, $dragState })=>theme.colors[FRAME_COLORS[$dragState].background]};
+  pointer-events: none;
+`;
+const hasFiles = (event)=>event.dataTransfer.types.includes('Files');
+/**
+ * Lets an editor take files dropped onto it: they upload to the root of the
+ * Media Library, through the global upload progress dialog, and are handed
+ * back to the editor one by one. Drags that carry no file, such as an editor
+ * reordering its own blocks, pass through untouched.
+ */ const EditorFileDropZone = ({ children, disabled = false, allowedTypes, onDropFiles })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    const { toggleNotification } = strapiAdmin.useNotification();
+    const { trackUsage } = useTracking.useTracking();
+    const [uploadFiles] = api.useUploadFilesMutation();
+    const { canRead, canCreate, isLoading } = useMediaLibraryPermissions.useMediaLibraryPermissions();
+    const { data: settings$1 } = settings.useGetUploadSettingsQuery(undefined, {
+        skip: !canRead
+    });
+    const isAiMetadataEnabled = useAIMetadataEnabled.useAIMetadataEnabled();
+    const [dragState, setDragState] = React.useState('idle');
+    // Drag events fire on every descendant crossed, so count enter/leave pairs.
+    const dragDepth = React.useRef(0);
+    const canUpload = !disabled && !isLoading && canCreate;
+    const handleDragEnter = (event)=>{
+        if (!hasFiles(event)) {
+            return;
+        }
+        event.preventDefault();
+        dragDepth.current += 1;
+        setDragState(canUpload ? 'accept' : 'reject');
+    };
+    const handleDragLeave = (event)=>{
+        if (!hasFiles(event)) {
+            return;
+        }
+        dragDepth.current -= 1;
+        if (dragDepth.current <= 0) {
+            dragDepth.current = 0;
+            setDragState('idle');
+        }
+    };
+    const handleDragOver = (event)=>{
+        if (!hasFiles(event)) {
+            return;
+        }
+        // Without it the browser opens the file in the tab.
+        event.preventDefault();
+        // `none` shows the no-drop cursor, and the browser then fires no `drop`.
+        event.dataTransfer.dropEffect = canUpload ? 'copy' : 'none';
+    };
+    const handleDrop = async (event)=>{
+        if (!hasFiles(event)) {
+            return;
+        }
+        event.preventDefault();
+        dragDepth.current = 0;
+        setDragState('idle');
+        if (!canUpload) {
+            return;
+        }
+        const files = Array.from(event.dataTransfer.files);
+        const allowedFiles = allowedMediaTypes.filterAllowedFiles(allowedTypes, files);
+        if (allowedFiles.length < files.length) {
+            toggleNotification({
+                type: 'danger',
+                timeout: 4000,
+                message: formatMessage({
+                    id: translations.getTranslationKey('input.notification.not-supported'),
+                    defaultMessage: `You can't upload this type of file, only the following types are accepted – {fileTypes}`
+                }, {
+                    fileTypes: (allowedTypes ?? []).join(',')
+                })
+            });
+        }
+        if (allowedFiles.length === 0) {
+            return;
+        }
+        const onFileUploaded = onDropFiles(event);
+        const assetsCountByType = allowedFiles.reduce((acc, file)=>{
+            const type = typeFromMime.typeFromMime(file.type);
+            acc[type] = (acc[type] ?? 0) + 1;
+            return acc;
+        }, {});
+        trackUsage('didSelectFile', {
+            source: 'computer',
+            location: 'content-manager'
+        });
+        trackUsage('willAddMediaLibraryAssets', {
+            location: 'content-manager',
+            ...assetsCountByType
+        });
+        const formData = new FormData();
+        allowedFiles.forEach((file)=>formData.append('files', file));
+        formData.append('fileInfo', JSON.stringify(allowedFiles.map((file)=>({
+                name: file.name,
+                caption: null,
+                alternativeText: null,
+                folder: null
+            }))));
+        try {
+            await uploadFiles({
+                formData,
+                totalFiles: allowedFiles.length,
+                concurrency: settings$1?.data?.concurrentUploadRequests ?? 1,
+                generateAiMetadata: Boolean(isAiMetadataEnabled),
+                onFileUploaded
+            }).unwrap();
+        } catch  {
+        // Errors reach the user through the progress dialog, which the mutation
+        // populates itself.
+        }
+    };
+    return /*#__PURE__*/ jsxRuntime.jsxs(Root, {
+        onDragEnter: handleDragEnter,
+        onDragLeave: handleDragLeave,
+        onDragOver: handleDragOver,
+        onDrop: handleDrop,
+        children: [
+            children,
+            dragState !== 'idle' && /*#__PURE__*/ jsxRuntime.jsx(Frame, {
+                $dragState: dragState,
+                "data-testid": "editor-file-drop-zone",
+                children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                    fontWeight: "semiBold",
+                    textColor: FRAME_COLORS[dragState].text,
+                    children: dragState === 'accept' ? formatMessage({
+                        id: translations.getTranslationKey('editor-drop-zone.accept'),
+                        defaultMessage: 'Drop to upload and insert'
+                    }) : formatMessage({
+                        id: translations.getTranslationKey('editor-drop-zone.reject'),
+                        defaultMessage: "You don't have permission to upload files"
+                    })
+                })
+            })
+        ]
+    });
+};
+
+exports.EditorFileDropZone = EditorFileDropZone;
+//# sourceMappingURL=EditorFileDropZone.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EditorFileDropZone.js","sources":["../../../../admin/src/components/EditorFileDropZone/EditorFileDropZone.tsx"],"sourcesContent":["import { useRef, useState, type DragEvent, type ReactNode } from 'react';\n\nimport { useNotification } from '@strapi/admin/strapi-admin';\nimport { Typography } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { useAIMetadataEnabled } from '../../hooks/useAIMetadataEnabled';\nimport { useMediaLibraryPermissions } from '../../hooks/useMediaLibraryPermissions';\nimport { useTracking } from '../../hooks/useTracking';\nimport { useUploadFilesMutation } from '../../services/api';\nimport { useGetUploadSettingsQuery } from '../../services/settings';\nimport { filterAllowedFiles, type AllowedMediaType } from '../../utils/allowedMediaTypes';\nimport { getTranslationKey } from '../../utils/translations';\nimport { typeFromMime } from '../../utils/typeFromMime';\n\nimport type { File } from '../../../../shared/contracts/files';\n\ntype DragState = 'idle' | 'accept' | 'reject';\n\nconst FRAME_COLORS = {\n  accept: { border: 'primary600', background: 'primary100', text: 'primary600' },\n  reject: { border: 'neutral300', background: 'neutral150', text: 'neutral600' },\n} as const;\n\n// Takes the place of the editor's content in its layout, so it fills the same\n// space: the editor stacks its parts against the start, sized to their content.\nconst Root = styled.div`\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  width: 100%;\n  min-height: 0;\n`;\n\nconst Frame = styled.div<{ $dragState: Exclude<DragState, 'idle'> }>`\n  position: absolute;\n  inset: ${({ theme }) => theme.spaces[2]};\n  z-index: 2;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: 1px solid ${({ theme, $dragState }) => theme.colors[FRAME_COLORS[$dragState].border]};\n  border-radius: ${({ theme }) => theme.borderRadius};\n  background: ${({ theme, $dragState }) => theme.colors[FRAME_COLORS[$dragState].background]};\n  pointer-events: none;\n`;\n\nexport interface EditorFileDropZoneProps {\n  children: ReactNode;\n  disabled?: boolean;\n  allowedTypes?: AllowedMediaType[];\n  /**\n   * Called once per accepted drop, while the drop event is still current. It\n   * returns what receives each of that drop's files once uploaded, including\n   * files a Retry in the progress dialog uploads later.\n   */\n  onDropFiles: (event: DragEvent<HTMLElement>) => (file: File) => void;\n}\n\nconst hasFiles = (event: DragEvent<HTMLElement>) => event.dataTransfer.types.includes('Files');\n\n/**\n * Lets an editor take files dropped onto it: they upload to the root of the\n * Media Library, through the global upload progress dialog, and are handed\n * back to the editor one by one. Drags that carry no file, such as an editor\n * reordering its own blocks, pass through untouched.\n */\nexport const EditorFileDropZone = ({\n  children,\n  disabled = false,\n  allowedTypes,\n  onDropFiles,\n}: EditorFileDropZoneProps) => {\n  const { formatMessage } = useIntl();\n  const { toggleNotification } = useNotification();\n  const { trackUsage } = useTracking();\n  const [uploadFiles] = useUploadFilesMutation();\n  const { canRead, canCreate, isLoading } = useMediaLibraryPermissions();\n  const { data: settings } = useGetUploadSettingsQuery(undefined, { skip: !canRead });\n  const isAiMetadataEnabled = useAIMetadataEnabled();\n  const [dragState, setDragState] = useState<DragState>('idle');\n  // Drag events fire on every descendant crossed, so count enter/leave pairs.\n  const dragDepth = useRef(0);\n\n  const canUpload = !disabled && !isLoading && canCreate;\n\n  const handleDragEnter = (event: DragEvent<HTMLElement>) => {\n    if (!hasFiles(event)) {\n      return;\n    }\n\n    event.preventDefault();\n    dragDepth.current += 1;\n    setDragState(canUpload ? 'accept' : 'reject');\n  };\n\n  const handleDragLeave = (event: DragEvent<HTMLElement>) => {\n    if (!hasFiles(event)) {\n      return;\n    }\n\n    dragDepth.current -= 1;\n\n    if (dragDepth.current <= 0) {\n      dragDepth.current = 0;\n      setDragState('idle');\n    }\n  };\n\n  const handleDragOver = (event: DragEvent<HTMLElement>) => {\n    if (!hasFiles(event)) {\n      return;\n    }\n\n    // Without it the browser opens the file in the tab.\n    event.preventDefault();\n    // `none` shows the no-drop cursor, and the browser then fires no `drop`.\n    event.dataTransfer.dropEffect = canUpload ? 'copy' : 'none';\n  };\n\n  const handleDrop = async (event: DragEvent<HTMLElement>) => {\n    if (!hasFiles(event)) {\n      return;\n    }\n\n    event.preventDefault();\n    dragDepth.current = 0;\n    setDragState('idle');\n\n    if (!canUpload) {\n      return;\n    }\n\n    const files = Array.from(event.dataTransfer.files);\n    const allowedFiles = filterAllowedFiles(allowedTypes, files);\n\n    if (allowedFiles.length < files.length) {\n      toggleNotification({\n        type: 'danger',\n        timeout: 4000,\n        message: formatMessage(\n          {\n            id: getTranslationKey('input.notification.not-supported'),\n            defaultMessage: `You can't upload this type of file, only the following types are accepted – {fileTypes}`,\n          },\n          { fileTypes: (allowedTypes ?? []).join(',') }\n        ),\n      });\n    }\n\n    if (allowedFiles.length === 0) {\n      return;\n    }\n\n    const onFileUploaded = onDropFiles(event);\n\n    const assetsCountByType = allowedFiles.reduce<Record<string, number>>((acc, file) => {\n      const type = typeFromMime(file.type);\n      acc[type] = (acc[type] ?? 0) + 1;\n      return acc;\n    }, {});\n    trackUsage('didSelectFile', { source: 'computer', location: 'content-manager' });\n    trackUsage('willAddMediaLibraryAssets', { location: 'content-manager', ...assetsCountByType });\n\n    const formData = new FormData();\n    allowedFiles.forEach((file) => formData.append('files', file));\n    formData.append(\n      'fileInfo',\n      JSON.stringify(\n        allowedFiles.map((file) => ({\n          name: file.name,\n          caption: null,\n          alternativeText: null,\n          folder: null,\n        }))\n      )\n    );\n\n    try {\n      await uploadFiles({\n        formData,\n        totalFiles: allowedFiles.length,\n        concurrency: settings?.data?.concurrentUploadRequests ?? 1,\n        generateAiMetadata: Boolean(isAiMetadataEnabled),\n        onFileUploaded,\n      }).unwrap();\n    } catch {\n      // Errors reach the user through the progress dialog, which the mutation\n      // populates itself.\n    }\n  };\n\n  return (\n    <Root\n      onDragEnter={handleDragEnter}\n      onDragLeave={handleDragLeave}\n      onDragOver={handleDragOver}\n      onDrop={handleDrop}\n    >\n      {children}\n      {dragState !== 'idle' && (\n        <Frame $dragState={dragState} data-testid=\"editor-file-drop-zone\">\n          <Typography fontWeight=\"semiBold\" textColor={FRAME_COLORS[dragState].text}>\n            {dragState === 'accept'\n              ? formatMessage({\n                  id: getTranslationKey('editor-drop-zone.accept'),\n                  defaultMessage: 'Drop to upload and insert',\n                })\n              : formatMessage({\n                  id: getTranslationKey('editor-drop-zone.reject'),\n                  defaultMessage: \"You don't have permission to upload files\",\n                })}\n          </Typography>\n        </Frame>\n      )}\n    </Root>\n  );\n};\n"],"names":["FRAME_COLORS","accept","border","background","text","reject","Root","styled","div","Frame","theme","spaces","$dragState","colors","borderRadius","hasFiles","event","dataTransfer","types","includes","EditorFileDropZone","children","disabled","allowedTypes","onDropFiles","formatMessage","useIntl","toggleNotification","useNotification","trackUsage","useTracking","uploadFiles","useUploadFilesMutation","canRead","canCreate","isLoading","useMediaLibraryPermissions","data","settings","useGetUploadSettingsQuery","undefined","skip","isAiMetadataEnabled","useAIMetadataEnabled","dragState","setDragState","useState","dragDepth","useRef","canUpload","handleDragEnter","preventDefault","current","handleDragLeave","handleDragOver","dropEffect","handleDrop","files","Array","from","allowedFiles","filterAllowedFiles","length","type","timeout","message","id","getTranslationKey","defaultMessage","fileTypes","join","onFileUploaded","assetsCountByType","reduce","acc","file","typeFromMime","source","location","formData","FormData","forEach","append","JSON","stringify","map","name","caption","alternativeText","folder","totalFiles","concurrency","concurrentUploadRequests","generateAiMetadata","Boolean","unwrap","_jsxs","onDragEnter","onDragLeave","onDragOver","onDrop","_jsx","data-testid","Typography","fontWeight","textColor"],"mappings":"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"}