@strapi/upload 5.51.1 → 5.52.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"BetaNotice.mjs","sources":["../../../../admin/src/future/components/BetaNotice.tsx"],"sourcesContent":["import { usePersistentState } from '@strapi/admin/strapi-admin';\nimport { Alert, Box, Flex, Typography } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { getTranslationKey } from '../utils/translations';\n\n/**\n * The beta indicator is a notice rather than a badge on the page header: that\n * header's title follows the folder you are in, so a badge attached to it would\n * read as \"this folder is beta\". This notice covers the whole Media Library, and\n * stays dismissed once a tester has read it.\n *\n * It renders inside `Layouts.Content` so it picks up the content column's gutter.\n * Rendered above the layout instead, it would span the full viewport width and\n * sit over the folder sidebar.\n */\nexport const BetaNotice = () => {\n  const { formatMessage } = useIntl();\n  const [isBetaNoticeDismissed, setIsBetaNoticeDismissed] = usePersistentState(\n    'STRAPI_UPLOAD_LIBRARY_BETA_NOTICE_DISMISSED',\n    false\n  );\n\n  if (isBetaNoticeDismissed) {\n    return null;\n  }\n\n  return (\n    <Box paddingBottom={4}>\n      <Alert\n        variant=\"default\"\n        onClose={() => setIsBetaNoticeDismissed(true)}\n        closeLabel={formatMessage({\n          id: getTranslationKey('beta.notice.close'),\n          defaultMessage: 'Close',\n        })}\n        title={formatMessage({\n          id: getTranslationKey('plugin.name'),\n          defaultMessage: 'Media Library',\n        })}\n      >\n        {/* `Alert` renders its children inside a `<p>`, so everything here stays\n            inline to keep the markup valid. That rules out `Badge`, which always\n            renders a `<div>` — the badge below reproduces its look on a `<span>`. */}\n        <Flex tag=\"span\" gap={2} alignItems=\"center\">\n          <Box\n            tag=\"span\"\n            background=\"neutral150\"\n            hasRadius\n            paddingLeft={2}\n            paddingRight={2}\n            shrink={0}\n          >\n            <Typography variant=\"sigma\" textColor=\"neutral600\">\n              {formatMessage({\n                id: getTranslationKey('beta.badge'),\n                defaultMessage: 'Beta',\n              })}\n            </Typography>\n          </Box>\n          <Typography tag=\"span\">\n            {formatMessage({\n              id: getTranslationKey('beta.notice.content'),\n              defaultMessage:\n                'This is a beta version of the Media Library. Some features are still in progress — please report any issue you run into.',\n            })}\n          </Typography>\n        </Flex>\n      </Alert>\n    </Box>\n  );\n};\n"],"names":["BetaNotice","formatMessage","useIntl","isBetaNoticeDismissed","setIsBetaNoticeDismissed","usePersistentState","_jsx","Box","paddingBottom","Alert","variant","onClose","closeLabel","id","getTranslationKey","defaultMessage","title","_jsxs","Flex","tag","gap","alignItems","background","hasRadius","paddingLeft","paddingRight","shrink","Typography","textColor"],"mappings":";;;;;;AAMA;;;;;;;;;UAUaA,UAAAA,GAAa,IAAA;IACxB,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;AAC1B,IAAA,MAAM,CAACC,qBAAAA,EAAuBC,wBAAAA,CAAyB,GAAGC,mBACxD,6CAAA,EACA,KAAA,CAAA;AAGF,IAAA,IAAIF,qBAAAA,EAAuB;QACzB,OAAO,IAAA;AACT,IAAA;AAEA,IAAA,qBACEG,GAAA,CAACC,GAAAA,EAAAA;QAAIC,aAAAA,EAAe,CAAA;AAClB,QAAA,QAAA,gBAAAF,GAAA,CAACG,KAAAA,EAAAA;YACCC,OAAAA,EAAQ,SAAA;AACRC,YAAAA,OAAAA,EAAS,IAAMP,wBAAAA,CAAyB,IAAA,CAAA;AACxCQ,YAAAA,UAAAA,EAAYX,aAAAA,CAAc;AACxBY,gBAAAA,EAAAA,EAAIC,iBAAAA,CAAkB,mBAAA,CAAA;gBACtBC,cAAAA,EAAgB;AAClB,aAAA,CAAA;AACAC,YAAAA,KAAAA,EAAOf,aAAAA,CAAc;AACnBY,gBAAAA,EAAAA,EAAIC,iBAAAA,CAAkB,aAAA,CAAA;gBACtBC,cAAAA,EAAgB;AAClB,aAAA,CAAA;AAKA,YAAA,QAAA,gBAAAE,IAAA,CAACC,IAAAA,EAAAA;gBAAKC,GAAAA,EAAI,MAAA;gBAAOC,GAAAA,EAAK,CAAA;gBAAGC,UAAAA,EAAW,QAAA;;kCAClCf,GAAA,CAACC,GAAAA,EAAAA;wBACCY,GAAAA,EAAI,MAAA;wBACJG,UAAAA,EAAW,YAAA;wBACXC,SAAS,EAAA,IAAA;wBACTC,WAAAA,EAAa,CAAA;wBACbC,YAAAA,EAAc,CAAA;wBACdC,MAAAA,EAAQ,CAAA;AAER,wBAAA,QAAA,gBAAApB,GAAA,CAACqB,UAAAA,EAAAA;4BAAWjB,OAAAA,EAAQ,OAAA;4BAAQkB,SAAAA,EAAU,YAAA;sCACnC3B,aAAAA,CAAc;AACbY,gCAAAA,EAAAA,EAAIC,iBAAAA,CAAkB,YAAA,CAAA;gCACtBC,cAAAA,EAAgB;AAClB,6BAAA;;;kCAGJT,GAAA,CAACqB,UAAAA,EAAAA;wBAAWR,GAAAA,EAAI,MAAA;kCACblB,aAAAA,CAAc;AACbY,4BAAAA,EAAAA,EAAIC,iBAAAA,CAAkB,qBAAA,CAAA;4BACtBC,cAAAA,EACE;AACJ,yBAAA;;;;;;AAMZ;;;;"}

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

@@ -78,7 +78,14 @@ const DrawerContainer = styledComponents.styled(designSystem.Flex)`
   flex-direction: column;
   position: fixed;
   bottom: 0;
+  /* Mobile: full-bleed sheet. Anchoring to the right at a fixed width left a
+     dead gutter on every phone wider than the panel, and the panel only filled
+     the screen once the viewport happened to be narrower than it. Below the
+     medium breakpoint the panel is the screen; medium+ restores the
+     right-anchored rail. */
+  left: 0;
   right: 0;
+  width: 100%;
   padding: ${({ theme })=>theme.spaces[2]};
   max-width: 100%;
   /* Sit just below the overlay token (300) so that:
@@ -88,8 +95,14 @@ const DrawerContainer = styledComponents.styled(designSystem.Flex)`
        drawer (e.g. the asset details "delete" confirm) cover the drawer. */
   z-index: 200;
   overflow: hidden;
-  width: ${({ width })=>width ?? '400px'};
-  max-height: ${({ maxHeight })=>maxHeight ?? '100vh'};
+  /* dvh, not vh: anchored to the bottom, a 100vh cap on mobile (visual
+     viewport < 100vh under the URL bar) would push the drawer top off-screen. */
+  max-height: ${({ $maxHeight })=>$maxHeight ?? '100dvh'};
+
+  ${({ theme })=>theme.breakpoints.medium} {
+    left: auto;
+    width: ${({ $width })=>$width ?? '400px'};
+  }
 
   &:focus {
     outline: none;
@@ -137,7 +150,7 @@ const CloseIconButton = styledComponents.styled(designSystem.IconButton)`
     background: transparent;
   }
 `;
-const DrawerBody = /*#__PURE__*/ React__namespace.forwardRef(({ animationDirection, children, ...props }, ref)=>/*#__PURE__*/ jsxRuntime.jsx(Dialog__namespace.Content, {
+const DrawerBody = /*#__PURE__*/ React__namespace.forwardRef(({ animationDirection, width, maxHeight, children, ...props }, ref)=>/*#__PURE__*/ jsxRuntime.jsx(Dialog__namespace.Content, {
         ref: ref,
         forceMount: true,
         asChild: true,
@@ -146,6 +159,8 @@ const DrawerBody = /*#__PURE__*/ React__namespace.forwardRef(({ animationDirecti
         "data-animation-direction": animationDirection,
         children: /*#__PURE__*/ jsxRuntime.jsx(DrawerContainer, {
             $animationDirection: animationDirection,
+            $width: width,
+            $maxHeight: maxHeight,
             ...props,
             children: /*#__PURE__*/ jsxRuntime.jsx(DrawerContent, {
                 children: children

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

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

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

@@ -55,7 +55,14 @@ const DrawerContainer = styled(Flex)`
   flex-direction: column;
   position: fixed;
   bottom: 0;
+  /* Mobile: full-bleed sheet. Anchoring to the right at a fixed width left a
+     dead gutter on every phone wider than the panel, and the panel only filled
+     the screen once the viewport happened to be narrower than it. Below the
+     medium breakpoint the panel is the screen; medium+ restores the
+     right-anchored rail. */
+  left: 0;
   right: 0;
+  width: 100%;
   padding: ${({ theme })=>theme.spaces[2]};
   max-width: 100%;
   /* Sit just below the overlay token (300) so that:
@@ -65,8 +72,14 @@ const DrawerContainer = styled(Flex)`
        drawer (e.g. the asset details "delete" confirm) cover the drawer. */
   z-index: 200;
   overflow: hidden;
-  width: ${({ width })=>width ?? '400px'};
-  max-height: ${({ maxHeight })=>maxHeight ?? '100vh'};
+  /* dvh, not vh: anchored to the bottom, a 100vh cap on mobile (visual
+     viewport < 100vh under the URL bar) would push the drawer top off-screen. */
+  max-height: ${({ $maxHeight })=>$maxHeight ?? '100dvh'};
+
+  ${({ theme })=>theme.breakpoints.medium} {
+    left: auto;
+    width: ${({ $width })=>$width ?? '400px'};
+  }
 
   &:focus {
     outline: none;
@@ -114,7 +127,7 @@ const CloseIconButton = styled(IconButton)`
     background: transparent;
   }
 `;
-const DrawerBody = /*#__PURE__*/ React.forwardRef(({ animationDirection, children, ...props }, ref)=>/*#__PURE__*/ jsx(Dialog.Content, {
+const DrawerBody = /*#__PURE__*/ React.forwardRef(({ animationDirection, width, maxHeight, children, ...props }, ref)=>/*#__PURE__*/ jsx(Dialog.Content, {
         ref: ref,
         forceMount: true,
         asChild: true,
@@ -123,6 +136,8 @@ const DrawerBody = /*#__PURE__*/ React.forwardRef(({ animationDirection, childre
         "data-animation-direction": animationDirection,
         children: /*#__PURE__*/ jsx(DrawerContainer, {
             $animationDirection: animationDirection,
+            $width: width,
+            $maxHeight: maxHeight,
             ...props,
             children: /*#__PURE__*/ jsx(DrawerContent, {
                 children: children

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

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

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

@@ -14,7 +14,7 @@ var Drawer = require('./Drawer.js');
 
 /* -------------------------------------------------------------------------------------------------
  * DialogHeader
- * -----------------------------------------------------------------------------------------------*/ const HeaderStatusMessage = ({ title, subtitle })=>{
+ * -----------------------------------------------------------------------------------------------*/ const HeaderStatusMessage = ({ title, subtitle, metadataSubtitle })=>{
     return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
         direction: "column",
         alignItems: "flex-start",
@@ -32,6 +32,11 @@ var Drawer = require('./Drawer.js');
                     textColor: "neutral600",
                     children: subtitle
                 })
+            }),
+            metadataSubtitle && /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                variant: "pi",
+                textColor: "neutral600",
+                children: metadataSubtitle
             })
         ]
     });
@@ -48,8 +53,52 @@ const HeaderStatusIcon = styledComponents.styled(designSystem.Flex)`
 const HeaderStatusWrapper = styledComponents.styled(designSystem.Flex)`
   align-items: center;
 `;
-const HeaderStatus = ({ status, progress, totalFiles, successfulCount, errorCount })=>{
+const HeaderStatus = ({ status, progress, totalFiles, successfulCount, errorCount, metadataProgress, isGeneratingMetadata, metadataOutcome })=>{
     const { formatMessage } = reactIntl.useIntl();
+    // Completion is upload-driven, so the terminal header can appear while metadata is
+    // still generating — the subtitle keeps ticking underneath until it settles.
+    //
+    // Gated on work actually being in flight rather than on `progress < 100`: in a
+    // sequential batch the percentage touches 100% between files, which would blink the
+    // subtitle out and back in on every upload.
+    //
+    // Once the phase settles the line is not dropped but replaced with the outcome, so the
+    // header keeps confirming what happened instead of silently losing the message.
+    const metadataSubtitle = (()=>{
+        if (metadataProgress !== null && isGeneratingMetadata) {
+            return formatMessage({
+                id: translations.getTranslationKey('upload.progress.generatingMetadata.withCount'),
+                defaultMessage: 'Generating metadata with AI ({percentage}%)'
+            }, {
+                percentage: metadataProgress
+            });
+        }
+        if (metadataOutcome === null) {
+            return undefined;
+        }
+        // Only `generated` rows had metadata written, so only they can be reported as a
+        // success. With none, there is nothing to confirm — an all-skipped batch of
+        // non-images would otherwise read as "generated on 0 files". Per-row sublines
+        // already spell out skipped and failed outcomes.
+        if (metadataOutcome.generated === 0) {
+            return undefined;
+        }
+        if (metadataOutcome.failed > 0) {
+            return formatMessage({
+                id: translations.getTranslationKey('upload.progress.metadataGenerated.withFailures'),
+                defaultMessage: '{generatedCount} generated, {failedCount} failed'
+            }, {
+                generatedCount: metadataOutcome.generated,
+                failedCount: metadataOutcome.failed
+            });
+        }
+        return formatMessage({
+            id: translations.getTranslationKey('upload.progress.metadataGenerated.withCount'),
+            defaultMessage: '{count, plural, one {Metadata successfully generated on # file} other {Metadata successfully generated on # files}}'
+        }, {
+            count: metadataOutcome.generated
+        });
+    })();
     if (status === 'error') {
         return /*#__PURE__*/ jsxRuntime.jsxs(HeaderStatusWrapper, {
             children: [
@@ -98,7 +147,8 @@ const HeaderStatus = ({ status, progress, totalFiles, successfulCount, errorCoun
                         id: translations.getTranslationKey('upload.progress.success'),
                         defaultMessage: 'Upload successful!'
                     }),
-                    subtitle: subtitle
+                    subtitle: subtitle,
+                    metadataSubtitle: metadataSubtitle
                 })
             ]
         });
@@ -120,7 +170,8 @@ const HeaderStatus = ({ status, progress, totalFiles, successfulCount, errorCoun
                     subtitle: formatMessage({
                         id: translations.getTranslationKey('upload.progress.canceled.subtitle'),
                         defaultMessage: 'Some files were not uploaded'
-                    })
+                    }),
+                    metadataSubtitle: metadataSubtitle
                 })
             ]
         });
@@ -142,7 +193,8 @@ const HeaderStatus = ({ status, progress, totalFiles, successfulCount, errorCoun
                     }, {
                         total: totalFiles,
                         percentage: progressPercentage
-                    })
+                    }),
+                    metadataSubtitle: metadataSubtitle
                 })
             ]
         });
@@ -177,6 +229,9 @@ const DialogHeader = ({ handleClose })=>{
     const { formatMessage } = reactIntl.useIntl();
     const { isMinimized, files, uploadId, totalFiles } = hooks.useTypedSelector((state)=>state.uploadProgress);
     const progress = hooks.useTypedSelector(uploadProgress.selectAggregateProgress);
+    const metadataProgress = hooks.useTypedSelector(uploadProgress.selectMetadataProgress);
+    const isGeneratingMetadata = hooks.useTypedSelector(uploadProgress.selectIsGeneratingMetadata);
+    const metadataOutcome = hooks.useTypedSelector(uploadProgress.selectMetadataOutcome);
     const dispatch = hooks.useTypedDispatch();
     const [retryCancelledFiles] = api.useRetryCancelledFilesMutation();
     // The batch is complete once every file has reached a terminal state. Byte-weighted
@@ -220,7 +275,10 @@ const DialogHeader = ({ handleClose })=>{
                 progress: progress,
                 totalFiles: totalFiles,
                 successfulCount: successfulCount,
-                errorCount: errorCount
+                errorCount: errorCount,
+                metadataProgress: metadataProgress,
+                isGeneratingMetadata: isGeneratingMetadata,
+                metadataOutcome: metadataOutcome
             }),
             /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
                 gap: 1,
@@ -230,7 +288,7 @@ const DialogHeader = ({ handleClose })=>{
                         fontWeight: "bold",
                         children: formatMessage({
                             id: translations.getTranslationKey('upload.progress.cancel'),
-                            defaultMessage: 'Cancel'
+                            defaultMessage: 'Cancel all'
                         })
                     }),
                     hasCancelledFiles && /*#__PURE__*/ jsxRuntime.jsx(designSystem.TextButton, {
@@ -293,6 +351,52 @@ const DeterminateBar = ({ percent })=>{
         })
     });
 };
+const INDETERMINATE_INDICATOR_WIDTH = 40;
+/**
+ * `translateX` percentages resolve against the *indicator's* own width, not the track's.
+ * So -100% is exactly "fully off the left edge" regardless of the width above, and the
+ * end offset converts a full track width into those same own-width units. Both ends sit
+ * flush off-track, which keeps entry and exit symmetric — a smaller start offset would
+ * make the bar pop in already partly visible.
+ */ const indeterminateSlide = styledComponents.keyframes`
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(${100 / INDETERMINATE_INDICATOR_WIDTH * 100}%);
+  }
+`;
+const IndeterminateIndicator = styledComponents.styled.div`
+  height: 100%;
+  width: ${INDETERMINATE_INDICATOR_WIDTH}%;
+  background-color: ${({ theme })=>theme.colors.primary700};
+  border-radius: 4px;
+  /* Linear, not an eased curve: the DS easings decelerate to a stop, which on a loop
+     reads as a stall at the wrap point. Constant speed is what makes it read as a sweep. */
+  animation: ${indeterminateSlide} 1.2s linear infinite;
+
+  /* A perpetually moving bar is a vestibular trigger; fall back to a static track fill. */
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+    width: 100%;
+    opacity: 0.5;
+  }
+`;
+/**
+ * Progress bar for work whose completion fraction is genuinely unknowable, rather
+ * than merely unknown-yet: the AI metadata endpoint answers in one go, and the URL
+ * flow can't report bytes until the server has fetched the file and knows its size.
+ *
+ * Deliberately omits `aria-valuenow` — that absence is precisely how ARIA conveys
+ * an indeterminate progressbar, so assistive tech announces "busy" instead of "0%".
+ */ const IndeterminateBar = ()=>{
+    return /*#__PURE__*/ jsxRuntime.jsx(ProgressTrack, {
+        role: "progressbar",
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        children: /*#__PURE__*/ jsxRuntime.jsx(IndeterminateIndicator, {})
+    });
+};
 const FileRow = ({ icon, fileName, children })=>{
     return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
         direction: "column",
@@ -317,6 +421,62 @@ const FileRow = ({ icon, fileName, children })=>{
         ]
     });
 };
+/**
+ * Icon + subline for a successfully uploaded row, keyed by its metadata phase.
+ * `'none'` covers rows that never entered the phase — AI metadata disabled — and
+ * renders exactly as before this feature existed. Non-images do enter the phase and
+ * land on `skipped`.
+ *
+ * `skipped` uses a neutral `Information` icon, deliberately distinct from
+ * generated/failed/cancelled — skipping is an expected outcome for a non-image, not a
+ * problem to flag.
+ */ const COMPLETED_ROW_PRESENTATION = {
+    none: {
+        icon: /*#__PURE__*/ jsxRuntime.jsx(icons.CheckCircle, {
+            fill: "success500"
+        }),
+        message: {
+            id: translations.getTranslationKey('upload.progress.file.uploaded'),
+            defaultMessage: 'Uploaded'
+        }
+    },
+    generating: {
+        icon: /*#__PURE__*/ jsxRuntime.jsx(icons.Sparkle, {
+            fill: "primary600"
+        }),
+        message: {
+            id: translations.getTranslationKey('upload.progress.file.generatingMetadata'),
+            defaultMessage: 'Uploaded • Generating metadata…'
+        }
+    },
+    generated: {
+        icon: /*#__PURE__*/ jsxRuntime.jsx(icons.CheckCircle, {
+            fill: "success500"
+        }),
+        message: {
+            id: translations.getTranslationKey('upload.progress.file.metadataGenerated'),
+            defaultMessage: 'Uploaded • Metadata generated'
+        }
+    },
+    skipped: {
+        icon: /*#__PURE__*/ jsxRuntime.jsx(icons.Information, {
+            fill: "neutral500"
+        }),
+        message: {
+            id: translations.getTranslationKey('upload.progress.file.metadataSkipped'),
+            defaultMessage: 'Upload complete • Metadata generation skipped'
+        }
+    },
+    failed: {
+        icon: /*#__PURE__*/ jsxRuntime.jsx(icons.WarningCircle, {
+            fill: "warning500"
+        }),
+        message: {
+            id: translations.getTranslationKey('upload.progress.file.metadataFailed'),
+            defaultMessage: 'Upload complete • Metadata generation failed'
+        }
+    }
+};
 const FileRowRenderer = ({ file })=>{
     const { formatMessage } = reactIntl.useIntl();
     const isError = file.status === 'error';
@@ -324,7 +484,16 @@ const FileRowRenderer = ({ file })=>{
     const isCompleted = file.status === 'complete';
     const isCancelled = file.status === 'cancelled';
     if (isCurrentFile) {
-        const percent = file.size > 0 ? file.uploadedBytes / file.size * 100 : 0;
+        // Determinate only once bytes are actually being reported — a known `size` is not
+        // enough. The two upload flows differ here:
+        //  - the direct-file flow streams real byte counts from XHR, so `uploadedBytes`
+        //    climbs and a determinate bar is meaningful;
+        //  - the URL flow learns the size from the `file:uploading` SSE event but receives
+        //    no incremental counts at all (the next event is `file:complete`), so
+        //    `uploadedBytes` stays 0 for the whole transfer.
+        // Keying off `size` alone froze URL rows at a determinate 0% for the entire upload;
+        // keying off reported bytes keeps them animating until there is a fraction to show.
+        const hasReportedProgress = file.size > 0 && file.uploadedBytes > 0;
         return /*#__PURE__*/ jsxRuntime.jsxs(FileRow, {
             icon: /*#__PURE__*/ jsxRuntime.jsx(icons.ArrowsCounterClockwise, {
                 fill: "secondary600"
@@ -339,9 +508,9 @@ const FileRowRenderer = ({ file })=>{
                         defaultMessage: 'Uploading...'
                     })
                 }),
-                /*#__PURE__*/ jsxRuntime.jsx(DeterminateBar, {
-                    percent: percent
-                })
+                hasReportedProgress ? /*#__PURE__*/ jsxRuntime.jsx(DeterminateBar, {
+                    percent: file.uploadedBytes / file.size * 100
+                }) : /*#__PURE__*/ jsxRuntime.jsx(IndeterminateBar, {})
             ]
         });
     }
@@ -375,19 +544,20 @@ const FileRowRenderer = ({ file })=>{
         });
     }
     if (isCompleted) {
-        return /*#__PURE__*/ jsxRuntime.jsx(FileRow, {
-            icon: /*#__PURE__*/ jsxRuntime.jsx(icons.CheckCircle, {
-                fill: "success500"
-            }),
+        // The upload succeeded; the metadata phase (if any) drives both the icon and the
+        // subline from here on — a metadata failure shows a warning, not an upload error.
+        const { icon, message } = COMPLETED_ROW_PRESENTATION[file.metadataStatus ?? 'none'];
+        return /*#__PURE__*/ jsxRuntime.jsxs(FileRow, {
+            icon: icon,
             fileName: file.name,
-            children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
-                variant: "pi",
-                textColor: "neutral600",
-                children: formatMessage({
-                    id: translations.getTranslationKey('upload.progress.file.uploaded'),
-                    defaultMessage: 'Uploaded'
-                })
-            })
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                    variant: "pi",
+                    textColor: "neutral600",
+                    children: formatMessage(message)
+                }),
+                file.metadataStatus === 'generating' && /*#__PURE__*/ jsxRuntime.jsx(IndeterminateBar, {})
+            ]
         });
     }
     return null;
@@ -400,7 +570,10 @@ const CompletedFilesList = styledComponents.styled(designSystem.Flex)`
 const UploadProgressDialog = ()=>{
     const dispatch = hooks.useTypedDispatch();
     const { isVisible, isMinimized, files } = hooks.useTypedSelector((state)=>state.uploadProgress);
-    const currentFile = files.find((f)=>f.status === 'uploading');
+    // With concurrent uploads several files are `uploading` at once — render every
+    // in-flight row, not just the first (a `find` here dated to the strictly
+    // sequential era and hid all but the lowest-index worker's row).
+    const uploadingFiles = files.filter((f)=>f.status === 'uploading');
     const completedFiles = files.filter((f)=>f.status === 'complete' || f.status === 'error' || f.status === 'cancelled').sort((a, b)=>{
         // Sort priority: error > cancelled > complete
         const priority = {
@@ -437,9 +610,9 @@ const UploadProgressDialog = ()=>{
                         paddingLeft: 4,
                         paddingRight: 4,
                         children: [
-                            currentFile && /*#__PURE__*/ jsxRuntime.jsx(FileRowRenderer, {
-                                file: currentFile
-                            }),
+                            uploadingFiles.map((file)=>/*#__PURE__*/ jsxRuntime.jsx(FileRowRenderer, {
+                                    file: file
+                                }, file.index)),
                             completedFiles.length > 0 && /*#__PURE__*/ jsxRuntime.jsx(CompletedFilesList, {
                                 children: completedFiles.map((file)=>/*#__PURE__*/ jsxRuntime.jsx(FileRowRenderer, {
                                         file: file