@strapi/upload 5.59.0 → 5.61.0

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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"}

package/dist/admin/components/EditorFileDropZone/EditorFileDropZone.mjs

@@ -0,0 +1,186 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useRef } from 'react';
+import { useNotification } from '@strapi/admin/strapi-admin';
+import { Typography } from '@strapi/design-system';
+import { useIntl } from 'react-intl';
+import { styled } from 'styled-components';
+import { useAIMetadataEnabled } from '../../hooks/useAIMetadataEnabled.mjs';
+import { useMediaLibraryPermissions } from '../../hooks/useMediaLibraryPermissions.mjs';
+import { useTracking } from '../../hooks/useTracking.mjs';
+import { useUploadFilesMutation } from '../../services/api.mjs';
+import { useGetUploadSettingsQuery } from '../../services/settings.mjs';
+import { filterAllowedFiles } from '../../utils/allowedMediaTypes.mjs';
+import { getTranslationKey } from '../../utils/translations.mjs';
+import { typeFromMime } from '../../utils/typeFromMime.mjs';
+
+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 = styled.div`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  width: 100%;
+  min-height: 0;
+`;
+const Frame = 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 } = useIntl();
+    const { toggleNotification } = useNotification();
+    const { trackUsage } = useTracking();
+    const [uploadFiles] = useUploadFilesMutation();
+    const { canRead, canCreate, isLoading } = useMediaLibraryPermissions();
+    const { data: settings } = useGetUploadSettingsQuery(undefined, {
+        skip: !canRead
+    });
+    const isAiMetadataEnabled = useAIMetadataEnabled();
+    const [dragState, setDragState] = useState('idle');
+    // Drag events fire on every descendant crossed, so count enter/leave pairs.
+    const dragDepth = 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 = filterAllowedFiles(allowedTypes, files);
+        if (allowedFiles.length < files.length) {
+            toggleNotification({
+                type: 'danger',
+                timeout: 4000,
+                message: formatMessage({
+                    id: 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(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?.data?.concurrentUploadRequests ?? 1,
+                generateAiMetadata: Boolean(isAiMetadataEnabled),
+                onFileUploaded
+            }).unwrap();
+        } catch  {
+        // Errors reach the user through the progress dialog, which the mutation
+        // populates itself.
+        }
+    };
+    return /*#__PURE__*/ jsxs(Root, {
+        onDragEnter: handleDragEnter,
+        onDragLeave: handleDragLeave,
+        onDragOver: handleDragOver,
+        onDrop: handleDrop,
+        children: [
+            children,
+            dragState !== 'idle' && /*#__PURE__*/ jsx(Frame, {
+                $dragState: dragState,
+                "data-testid": "editor-file-drop-zone",
+                children: /*#__PURE__*/ jsx(Typography, {
+                    fontWeight: "semiBold",
+                    textColor: FRAME_COLORS[dragState].text,
+                    children: dragState === 'accept' ? formatMessage({
+                        id: getTranslationKey('editor-drop-zone.accept'),
+                        defaultMessage: 'Drop to upload and insert'
+                    }) : formatMessage({
+                        id: getTranslationKey('editor-drop-zone.reject'),
+                        defaultMessage: "You don't have permission to upload files"
+                    })
+                })
+            })
+        ]
+    });
+};
+
+export { EditorFileDropZone };
+//# sourceMappingURL=EditorFileDropZone.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EditorFileDropZone.mjs","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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"}

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

@@ -1,6 +1,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
 var designSystem = require('@strapi/design-system');
 var icons = require('@strapi/icons');
 var reactIntl = require('react-intl');
@@ -8,6 +9,7 @@ var styledComponents = require('styled-components');
 var useMediaLibraryPermissions = require('../../hooks/useMediaLibraryPermissions.js');
 var ActionsMenuContent = require('../../pages/Assets/components/ActionsMenuContent.js');
 var translations = require('../../utils/translations.js');
+var FieldControls = require('./FieldControls.js');
 
 // The trigger reads as a link on the label row, not as a button: no padding, no
 // ghost background, primary text. `Menu.Trigger` takes no `textColor`, so the
@@ -71,9 +73,10 @@ const AddAssetTrigger = styledComponents.styled(designSystem.Menu.Trigger)`
  *
  * The drop zone below keeps working whatever this shows — it is a second way
  * in, not the only one.
- */ const AddAssetMenu = ({ disabled = false, onBrowseLibrary, onUploadFromDevice, onUploadFromUrl })=>{
+ */ const AddAssetMenu = ({ disabled = false, preventOpen = false, onBrowseLibrary, onUploadFromDevice, onUploadFromUrl })=>{
     const { formatMessage } = reactIntl.useIntl();
     const { canRead, canCreate, isLoading } = useMediaLibraryPermissions.useMediaLibraryPermissions();
+    const [isOpen, setIsOpen] = React.useState(false);
     // `useRBAC` starts every instance at `isLoading: true` with the flags false.
     // Until it settles, every entry shows but none can be picked: hiding them
     // would flash a smaller menu, enabling them would lead to a 403.
@@ -83,6 +86,8 @@ const AddAssetTrigger = styledComponents.styled(designSystem.Menu.Trigger)`
         return null;
     }
     return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Menu.Root, {
+        open: isOpen,
+        onOpenChange: (open)=>setIsOpen(open && !preventOpen),
         children: [
             /*#__PURE__*/ jsxRuntime.jsx(AddAssetTrigger, {
                 variant: "ghost",
@@ -100,7 +105,7 @@ const AddAssetTrigger = styledComponents.styled(designSystem.Menu.Trigger)`
                 zIndex: 2,
                 minWidth: "22rem",
                 children: [
-                    canBrowse && /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Item, {
+                    canBrowse && /*#__PURE__*/ jsxRuntime.jsx(FieldControls.FieldMenuItem, {
                         startIcon: /*#__PURE__*/ jsxRuntime.jsx(icons.Images, {}),
                         disabled: isLoading,
                         onSelect: onBrowseLibrary,
@@ -111,7 +116,7 @@ const AddAssetTrigger = styledComponents.styled(designSystem.Menu.Trigger)`
                     }),
                     canUpload && /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
                         children: [
-                            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Item, {
+                            /*#__PURE__*/ jsxRuntime.jsx(FieldControls.FieldMenuItem, {
                                 startIcon: /*#__PURE__*/ jsxRuntime.jsx(icons.Upload, {}),
                                 disabled: isLoading,
                                 onSelect: onUploadFromDevice,
@@ -120,7 +125,7 @@ const AddAssetTrigger = styledComponents.styled(designSystem.Menu.Trigger)`
                                     defaultMessage: 'Upload from device'
                                 })
                             }),
-                            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Item, {
+                            /*#__PURE__*/ jsxRuntime.jsx(FieldControls.FieldMenuItem, {
                                 startIcon: /*#__PURE__*/ jsxRuntime.jsx(icons.Link, {}),
                                 disabled: isLoading,
                                 onSelect: onUploadFromUrl,

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

@@ -1 +1 @@
-{"version":3,"file":"AddAssetMenu.js","sources":["../../../../admin/src/components/MediaLibraryInput/AddAssetMenu.tsx"],"sourcesContent":["import { Menu } from '@strapi/design-system';\nimport { ChevronDown, Images, Link, Upload } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { useMediaLibraryPermissions } from '../../hooks/useMediaLibraryPermissions';\nimport { ActionsMenuContent } from '../../pages/Assets/components/ActionsMenuContent';\nimport { getTranslationKey } from '../../utils/translations';\n\n// The trigger reads as a link on the label row, not as a button: no padding, no\n// ghost background, primary text. `Menu.Trigger` takes no `textColor`, so the\n// colour is set here and forced past the design system's own span rule.\nconst AddAssetTrigger = styled(Menu.Trigger)`\n  padding: 0;\n\n  // No hover treatment at all: this reads as a link on the label row, and the\n  // design system's ghost button paints a primary100 plate behind it (also while\n  // the menu is open, via data-state).\n  &,\n  &:hover,\n  &[data-state='open'] {\n    background: transparent;\n    background-color: transparent;\n  }\n\n  &,\n  & span,\n  &:hover span {\n    color: ${({ theme }) => theme.colors.primary600};\n  }\n\n  & span {\n    font-weight: ${({ theme }) => theme.fontWeights.regular};\n  }\n\n  // The chevron needs the fill, not the colour: the design system paints button\n  // icons with its own \"svg path { fill }\" rule per variant, and repaints them\n  // again on hover — both beat an inherited color and the icon's own\n  // fill=\"currentColor\". Doubled specificity so these land after those rules\n  // whatever order they are injected in.\n  && svg path,\n  &&:hover svg path {\n    fill: ${({ theme }) => theme.colors.primary600};\n  }\n\n  // The design system's disabled button is a bordered grey plate; this stays a\n  // greyed-out link instead.\n  &&[aria-disabled='true'] {\n    border-color: transparent;\n    background: transparent;\n  }\n\n  &[aria-disabled='true'],\n  &[aria-disabled='true'] span {\n    color: ${({ theme }) => theme.colors.neutral500};\n  }\n\n  &&[aria-disabled='true'] svg path {\n    fill: ${({ theme }) => theme.colors.neutral500};\n  }\n`;\n\ninterface AddAssetMenuProps {\n  disabled?: boolean;\n  onBrowseLibrary: () => void;\n  onUploadFromDevice: () => void;\n  onUploadFromUrl: () => void;\n}\n\n/**\n * The field's \"Add asset\" menu, on the label row.\n *\n * Browsing needs the Media Library's read permission, the two upload entries\n * `assets.create`; each entry disappears without its permission, and the\n * trigger itself goes when nothing is left to offer, rather than opening an\n * empty menu.\n *\n * The drop zone below keeps working whatever this shows — it is a second way\n * in, not the only one.\n */\nexport const AddAssetMenu = ({\n  disabled = false,\n  onBrowseLibrary,\n  onUploadFromDevice,\n  onUploadFromUrl,\n}: AddAssetMenuProps) => {\n  const { formatMessage } = useIntl();\n  const { canRead, canCreate, isLoading } = useMediaLibraryPermissions();\n\n  // `useRBAC` starts every instance at `isLoading: true` with the flags false.\n  // Until it settles, every entry shows but none can be picked: hiding them\n  // would flash a smaller menu, enabling them would lead to a 403.\n  const canBrowse = isLoading || canRead;\n  const canUpload = isLoading || canCreate;\n\n  if (!canBrowse && !canUpload) {\n    return null;\n  }\n\n  return (\n    <Menu.Root>\n      <AddAssetTrigger variant=\"ghost\" disabled={disabled} endIcon={<ChevronDown aria-hidden />}>\n        {formatMessage({\n          id: getTranslationKey('content-manager.input.add-asset'),\n          defaultMessage: 'Add asset',\n        })}\n      </AddAssetTrigger>\n\n      <ActionsMenuContent popoverPlacement=\"bottom-end\" zIndex={2} minWidth=\"22rem\">\n        {canBrowse && (\n          <Menu.Item startIcon={<Images />} disabled={isLoading} onSelect={onBrowseLibrary}>\n            {formatMessage({\n              id: getTranslationKey('content-manager.input.add-asset.browse'),\n              defaultMessage: 'Browse library',\n            })}\n          </Menu.Item>\n        )}\n\n        {canUpload && (\n          <>\n            <Menu.Item startIcon={<Upload />} disabled={isLoading} onSelect={onUploadFromDevice}>\n              {formatMessage({\n                id: getTranslationKey('content-manager.input.add-asset.device'),\n                defaultMessage: 'Upload from device',\n              })}\n            </Menu.Item>\n\n            <Menu.Item startIcon={<Link />} disabled={isLoading} onSelect={onUploadFromUrl}>\n              {formatMessage({\n                id: getTranslationKey('content-manager.input.add-asset.url'),\n                defaultMessage: 'Upload from URL',\n              })}\n            </Menu.Item>\n          </>\n        )}\n      </ActionsMenuContent>\n    </Menu.Root>\n  );\n};\n"],"names":["AddAssetTrigger","styled","Menu","Trigger","theme","colors","primary600","fontWeights","regular","neutral500","AddAssetMenu","disabled","onBrowseLibrary","onUploadFromDevice","onUploadFromUrl","formatMessage","useIntl","canRead","canCreate","isLoading","useMediaLibraryPermissions","canBrowse","canUpload","_jsxs","Root","_jsx","variant","endIcon","ChevronDown","aria-hidden","id","getTranslationKey","defaultMessage","ActionsMenuContent","popoverPlacement","zIndex","minWidth","Item","startIcon","Images","onSelect","_Fragment","Upload","Link"],"mappings":"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"}
+{"version":3,"file":"AddAssetMenu.js","sources":["../../../../admin/src/components/MediaLibraryInput/AddAssetMenu.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport { Menu } from '@strapi/design-system';\nimport { ChevronDown, Images, Link, Upload } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { useMediaLibraryPermissions } from '../../hooks/useMediaLibraryPermissions';\nimport { ActionsMenuContent } from '../../pages/Assets/components/ActionsMenuContent';\nimport { getTranslationKey } from '../../utils/translations';\n\nimport { FieldMenuItem } from './FieldControls';\n\n// The trigger reads as a link on the label row, not as a button: no padding, no\n// ghost background, primary text. `Menu.Trigger` takes no `textColor`, so the\n// colour is set here and forced past the design system's own span rule.\nconst AddAssetTrigger = styled(Menu.Trigger)`\n  padding: 0;\n\n  // No hover treatment at all: this reads as a link on the label row, and the\n  // design system's ghost button paints a primary100 plate behind it (also while\n  // the menu is open, via data-state).\n  &,\n  &:hover,\n  &[data-state='open'] {\n    background: transparent;\n    background-color: transparent;\n  }\n\n  &,\n  & span,\n  &:hover span {\n    color: ${({ theme }) => theme.colors.primary600};\n  }\n\n  & span {\n    font-weight: ${({ theme }) => theme.fontWeights.regular};\n  }\n\n  // The chevron needs the fill, not the colour: the design system paints button\n  // icons with its own \"svg path { fill }\" rule per variant, and repaints them\n  // again on hover — both beat an inherited color and the icon's own\n  // fill=\"currentColor\". Doubled specificity so these land after those rules\n  // whatever order they are injected in.\n  && svg path,\n  &&:hover svg path {\n    fill: ${({ theme }) => theme.colors.primary600};\n  }\n\n  // The design system's disabled button is a bordered grey plate; this stays a\n  // greyed-out link instead.\n  &&[aria-disabled='true'] {\n    border-color: transparent;\n    background: transparent;\n  }\n\n  &[aria-disabled='true'],\n  &[aria-disabled='true'] span {\n    color: ${({ theme }) => theme.colors.neutral500};\n  }\n\n  &&[aria-disabled='true'] svg path {\n    fill: ${({ theme }) => theme.colors.neutral500};\n  }\n`;\n\ninterface AddAssetMenuProps {\n  disabled?: boolean;\n  /**\n   * Ignore requests to open, without looking disabled. The press still reaches\n   * whatever listens for presses outside it, so an open drawer closes — or asks\n   * about unsaved edits — instead of having the menu stacked over it.\n   */\n  preventOpen?: boolean;\n  onBrowseLibrary: () => void;\n  onUploadFromDevice: () => void;\n  onUploadFromUrl: () => void;\n}\n\n/**\n * The field's \"Add asset\" menu, on the label row.\n *\n * Browsing needs the Media Library's read permission, the two upload entries\n * `assets.create`; each entry disappears without its permission, and the\n * trigger itself goes when nothing is left to offer, rather than opening an\n * empty menu.\n *\n * The drop zone below keeps working whatever this shows — it is a second way\n * in, not the only one.\n */\nexport const AddAssetMenu = ({\n  disabled = false,\n  preventOpen = false,\n  onBrowseLibrary,\n  onUploadFromDevice,\n  onUploadFromUrl,\n}: AddAssetMenuProps) => {\n  const { formatMessage } = useIntl();\n  const { canRead, canCreate, isLoading } = useMediaLibraryPermissions();\n  const [isOpen, setIsOpen] = useState(false);\n\n  // `useRBAC` starts every instance at `isLoading: true` with the flags false.\n  // Until it settles, every entry shows but none can be picked: hiding them\n  // would flash a smaller menu, enabling them would lead to a 403.\n  const canBrowse = isLoading || canRead;\n  const canUpload = isLoading || canCreate;\n\n  if (!canBrowse && !canUpload) {\n    return null;\n  }\n\n  return (\n    <Menu.Root open={isOpen} onOpenChange={(open) => setIsOpen(open && !preventOpen)}>\n      <AddAssetTrigger variant=\"ghost\" disabled={disabled} endIcon={<ChevronDown aria-hidden />}>\n        {formatMessage({\n          id: getTranslationKey('content-manager.input.add-asset'),\n          defaultMessage: 'Add asset',\n        })}\n      </AddAssetTrigger>\n\n      <ActionsMenuContent popoverPlacement=\"bottom-end\" zIndex={2} minWidth=\"22rem\">\n        {canBrowse && (\n          <FieldMenuItem startIcon={<Images />} disabled={isLoading} onSelect={onBrowseLibrary}>\n            {formatMessage({\n              id: getTranslationKey('content-manager.input.add-asset.browse'),\n              defaultMessage: 'Browse library',\n            })}\n          </FieldMenuItem>\n        )}\n\n        {canUpload && (\n          <>\n            <FieldMenuItem\n              startIcon={<Upload />}\n              disabled={isLoading}\n              onSelect={onUploadFromDevice}\n            >\n              {formatMessage({\n                id: getTranslationKey('content-manager.input.add-asset.device'),\n                defaultMessage: 'Upload from device',\n              })}\n            </FieldMenuItem>\n\n            <FieldMenuItem startIcon={<Link />} disabled={isLoading} onSelect={onUploadFromUrl}>\n              {formatMessage({\n                id: getTranslationKey('content-manager.input.add-asset.url'),\n                defaultMessage: 'Upload from URL',\n              })}\n            </FieldMenuItem>\n          </>\n        )}\n      </ActionsMenuContent>\n    </Menu.Root>\n  );\n};\n"],"names":["AddAssetTrigger","styled","Menu","Trigger","theme","colors","primary600","fontWeights","regular","neutral500","AddAssetMenu","disabled","preventOpen","onBrowseLibrary","onUploadFromDevice","onUploadFromUrl","formatMessage","useIntl","canRead","canCreate","isLoading","useMediaLibraryPermissions","isOpen","setIsOpen","useState","canBrowse","canUpload","_jsxs","Root","open","onOpenChange","_jsx","variant","endIcon","ChevronDown","aria-hidden","id","getTranslationKey","defaultMessage","ActionsMenuContent","popoverPlacement","zIndex","minWidth","FieldMenuItem","startIcon","Images","onSelect","_Fragment","Upload","Link"],"mappings":"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"}