@strapi/upload 0.0.0-experimental.6340da17068c3bed7fb006e7bcc554c71129e282 → 0.0.0-experimental.64145e1b4fc1bac8bc4f84d51c88d0e9f139e826

package/dist/admin/App.js

@@ -0,0 +1,33 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var strapiAdmin = require('@strapi/admin/strapi-admin');
+var reactIntl = require('react-intl');
+var reactRouterDom = require('react-router-dom');
+var AssetsPage = require('./pages/Assets/AssetsPage.js');
+var translations = require('./utils/translations.js');
+
+const MediaLibrary = ()=>{
+    const { formatMessage } = reactIntl.useIntl();
+    const title = formatMessage({
+        id: translations.getTranslationKey('plugin.name'),
+        defaultMessage: 'Media Library'
+    });
+    return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.Page.Title, {
+                children: title
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(reactRouterDom.Routes, {
+                children: /*#__PURE__*/ jsxRuntime.jsx(reactRouterDom.Route, {
+                    index: true,
+                    element: /*#__PURE__*/ jsxRuntime.jsx(AssetsPage.AssetsPage, {})
+                })
+            })
+        ]
+    });
+};
+
+exports.MediaLibrary = MediaLibrary;
+//# sourceMappingURL=App.js.map

package/dist/admin/App.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"App.js","sources":["../../admin/src/App.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Page } from '@strapi/admin/strapi-admin';\nimport { useIntl } from 'react-intl';\nimport { Route, Routes } from 'react-router-dom';\n\nimport { AssetsPage } from './pages/Assets/AssetsPage';\nimport { getTranslationKey } from './utils/translations';\n\nexport const MediaLibrary = () => {\n  const { formatMessage } = useIntl();\n\n  const title = formatMessage({\n    id: getTranslationKey('plugin.name'),\n    defaultMessage: 'Media Library',\n  });\n\n  return (\n    <>\n      <Page.Title>{title}</Page.Title>\n\n      <Routes>\n        <Route index element={<AssetsPage />} />\n      </Routes>\n    </>\n  );\n};\n"],"names":["MediaLibrary","formatMessage","useIntl","title","id","getTranslationKey","defaultMessage","_jsxs","_Fragment","_jsx","Page","Title","Routes","Route","index","element","AssetsPage"],"mappings":";;;;;;;;;;MASaA,YAAAA,GAAe,IAAA;IAC1B,MAAM,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;AAE1B,IAAA,MAAMC,QAAQF,aAAAA,CAAc;AAC1BG,QAAAA,EAAAA,EAAIC,8BAAAA,CAAkB,aAAA,CAAA;QACtBC,cAAAA,EAAgB;AAClB,KAAA,CAAA;IAEA,qBACEC,eAAA,CAAAC,mBAAA,EAAA;;AACE,0BAAAC,cAAA,CAACC,iBAAKC,KAAK,EAAA;AAAER,gBAAAA,QAAAA,EAAAA;;0BAEbM,cAAA,CAACG,qBAAAA,EAAAA;AACC,gBAAA,QAAA,gBAAAH,cAAA,CAACI,oBAAAA,EAAAA;oBAAMC,KAAK,EAAA,IAAA;AAACC,oBAAAA,OAAAA,gBAASN,cAAA,CAACO,qBAAAA,EAAAA,EAAAA;;;;;AAI/B;;;;"}

package/dist/admin/App.mjs

@@ -0,0 +1,31 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import 'react';
+import { Page } from '@strapi/admin/strapi-admin';
+import { useIntl } from 'react-intl';
+import { Routes, Route } from 'react-router-dom';
+import { AssetsPage } from './pages/Assets/AssetsPage.mjs';
+import { getTranslationKey } from './utils/translations.mjs';
+
+const MediaLibrary = ()=>{
+    const { formatMessage } = useIntl();
+    const title = formatMessage({
+        id: getTranslationKey('plugin.name'),
+        defaultMessage: 'Media Library'
+    });
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(Page.Title, {
+                children: title
+            }),
+            /*#__PURE__*/ jsx(Routes, {
+                children: /*#__PURE__*/ jsx(Route, {
+                    index: true,
+                    element: /*#__PURE__*/ jsx(AssetsPage, {})
+                })
+            })
+        ]
+    });
+};
+
+export { MediaLibrary };
+//# sourceMappingURL=App.mjs.map

package/dist/admin/App.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"App.mjs","sources":["../../admin/src/App.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Page } from '@strapi/admin/strapi-admin';\nimport { useIntl } from 'react-intl';\nimport { Route, Routes } from 'react-router-dom';\n\nimport { AssetsPage } from './pages/Assets/AssetsPage';\nimport { getTranslationKey } from './utils/translations';\n\nexport const MediaLibrary = () => {\n  const { formatMessage } = useIntl();\n\n  const title = formatMessage({\n    id: getTranslationKey('plugin.name'),\n    defaultMessage: 'Media Library',\n  });\n\n  return (\n    <>\n      <Page.Title>{title}</Page.Title>\n\n      <Routes>\n        <Route index element={<AssetsPage />} />\n      </Routes>\n    </>\n  );\n};\n"],"names":["MediaLibrary","formatMessage","useIntl","title","id","getTranslationKey","defaultMessage","_jsxs","_Fragment","_jsx","Page","Title","Routes","Route","index","element","AssetsPage"],"mappings":";;;;;;;;MASaA,YAAAA,GAAe,IAAA;IAC1B,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;AAE1B,IAAA,MAAMC,QAAQF,aAAAA,CAAc;AAC1BG,QAAAA,EAAAA,EAAIC,iBAAAA,CAAkB,aAAA,CAAA;QACtBC,cAAAA,EAAgB;AAClB,KAAA,CAAA;IAEA,qBACEC,IAAA,CAAAC,QAAA,EAAA;;AACE,0BAAAC,GAAA,CAACC,KAAKC,KAAK,EAAA;AAAER,gBAAAA,QAAAA,EAAAA;;0BAEbM,GAAA,CAACG,MAAAA,EAAAA;AACC,gBAAA,QAAA,gBAAAH,GAAA,CAACI,KAAAA,EAAAA;oBAAMC,KAAK,EAAA,IAAA;AAACC,oBAAAA,OAAAA,gBAASN,GAAA,CAACO,UAAAA,EAAAA,EAAAA;;;;;AAI/B;;;;"}

package/dist/admin/components/Drawer.js

@@ -0,0 +1,224 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var Dialog = require('@radix-ui/react-dialog');
+var designSystem = require('@strapi/design-system');
+var icons = require('@strapi/icons');
+var reactIntl = require('react-intl');
+var styledComponents = require('styled-components');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var Dialog__namespace = /*#__PURE__*/_interopNamespace(Dialog);
+
+/** Duration of the close animation in ms. Use for timing cleanup (e.g. removing URL params). */ const DRAWER_CLOSE_ANIMATION_MS = 300;
+/* -------------------------------------------------------------------------------------------------
+ * Animations
+ * -----------------------------------------------------------------------------------------------*/ // Direction: up
+const slideUpFromBottomIn = styledComponents.keyframes`
+  from {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+`;
+const slideUpFromBottomOut = styledComponents.keyframes`
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+`;
+// Direction: left
+const slideLeftFromRightIn = styledComponents.keyframes`
+  from {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+`;
+const slideLeftFromRightOut = styledComponents.keyframes`
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+`;
+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:
+     - popovers (500) and tooltips (1000) rendered from descendant components
+       surface above the drawer panel,
+     - AlertDialog overlays (300) and contents (310) opened from inside the
+       drawer (e.g. the asset details "delete" confirm) cover the drawer. */
+  z-index: 200;
+  overflow: hidden;
+  /* dvh, not vh: anchored to the bottom, a 100vh cap on mobile (visual
+     viewport < 100vh under the URL bar) would push the drawer top off-screen. */
+  max-height: ${({ $maxHeight })=>$maxHeight ?? '100dvh'};
+
+  ${({ theme })=>theme.breakpoints.medium} {
+    left: auto;
+    width: ${({ $width })=>$width ?? '400px'};
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    &[data-state='open'] {
+      animation: ${({ $animationDirection })=>$animationDirection === 'up' ? slideUpFromBottomIn : slideLeftFromRightIn}
+        ${DRAWER_CLOSE_ANIMATION_MS}ms cubic-bezier(0.32, 0.72, 0, 1) forwards;
+    }
+
+    &[data-state='closed'] {
+      animation: ${({ $animationDirection })=>$animationDirection === 'up' ? slideUpFromBottomOut : slideLeftFromRightOut}
+        ${DRAWER_CLOSE_ANIMATION_MS}ms cubic-bezier(0.32, 0.72, 0, 1) forwards;
+      pointer-events: none;
+    }
+  }
+`;
+const DrawerContent = styledComponents.styled(designSystem.Box)`
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  width: 100%;
+  background-color: ${({ theme })=>theme.colors.neutral0};
+  border-radius: ${({ theme })=>theme.borderRadius};
+  box-shadow: ${({ theme })=>theme.shadows.popupShadow};
+  overflow: hidden;
+  border: 1px solid ${({ theme })=>theme.colors.neutral150};
+`;
+const CollapsibleContent = styledComponents.styled(designSystem.Box)`
+  display: grid;
+  flex: 1;
+  min-height: 0;
+  grid-template-rows: ${({ $isVisible })=>$isVisible ? '1fr' : '0fr'};
+  transition: grid-template-rows 0.3s ease-in-out;
+
+  > div {
+    overflow: hidden;
+    min-height: 0;
+  }
+
+  /* The scroll area wraps its children in a div styled inline as
+     display: table, min-width: 100%. A table box grows to its content, so a
+     single unbreakable string (a long file name) widens it past the scrollport
+     and the panel gains a horizontal scrollbar — with nothing left to clamp the
+     row, the name never truncates. Overriding to a block box makes the
+     scrollport the width again, which is what the vertical-only list wants.
+     Inline styles, hence the important. */
+  [data-radix-scroll-area-viewport] > div {
+    display: block !important;
+  }
+`;
+const CloseIconButton = styledComponents.styled(designSystem.IconButton)`
+  &:hover {
+    background: transparent;
+  }
+`;
+/** Vetoes an outside interaction that would otherwise dismiss the drawer. */ const keepOpen = (event)=>event.preventDefault();
+const DrawerBody = /*#__PURE__*/ React__namespace.forwardRef(({ animationDirection, width, maxHeight, onPointerDownOutside = keepOpen, children, ...props }, ref)=>/*#__PURE__*/ jsxRuntime.jsx(Dialog__namespace.Content, {
+        ref: ref,
+        forceMount: true,
+        asChild: true,
+        onPointerDownOutside: onPointerDownOutside,
+        // Non-modal, so focus legitimately moves outside (tabbing past the last
+        // field); only a pointer press should ever dismiss.
+        onFocusOutside: keepOpen,
+        "data-animation-direction": animationDirection,
+        children: /*#__PURE__*/ jsxRuntime.jsx(DrawerContainer, {
+            $animationDirection: animationDirection,
+            $width: width,
+            $maxHeight: maxHeight,
+            ...props,
+            children: /*#__PURE__*/ jsxRuntime.jsx(DrawerContent, {
+                children: children
+            })
+        })
+    }));
+DrawerBody.displayName = 'DrawerBody';
+const DrawerRoot = ({ isVisible, onClose, children })=>/*#__PURE__*/ jsxRuntime.jsx(Dialog__namespace.Root, {
+        open: isVisible,
+        onOpenChange: (nextVisible)=>!nextVisible && onClose?.(),
+        modal: false,
+        children: /*#__PURE__*/ jsxRuntime.jsx(Dialog__namespace.Portal, {
+            children: children
+        })
+    });
+const DrawerScrollableContent = ({ children, isContentExpanded = true })=>/*#__PURE__*/ jsxRuntime.jsx(CollapsibleContent, {
+        $isVisible: isContentExpanded,
+        "data-collapsed": !isContentExpanded,
+        children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.ScrollArea, {
+            children: children
+        })
+    });
+const DrawerCloseButton = ({ onClose, label, children })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    const labelMessage = label ?? formatMessage({
+        id: 'global.close',
+        defaultMessage: 'Close'
+    });
+    return /*#__PURE__*/ jsxRuntime.jsx(CloseIconButton, {
+        onClick: onClose,
+        label: labelMessage,
+        variant: "ghost",
+        children: children ?? /*#__PURE__*/ jsxRuntime.jsx(icons.Cross, {})
+    });
+};
+const Drawer = {
+    Root: DrawerRoot,
+    Body: DrawerBody,
+    ScrollableContent: DrawerScrollableContent,
+    CloseButton: DrawerCloseButton,
+    Title: Dialog__namespace.Title,
+    Description: Dialog__namespace.Description
+};
+
+exports.DRAWER_CLOSE_ANIMATION_MS = DRAWER_CLOSE_ANIMATION_MS;
+exports.Drawer = Drawer;
+//# sourceMappingURL=Drawer.js.map

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

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

package/dist/admin/components/Drawer.mjs

@@ -0,0 +1,200 @@
+import { jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import * as Dialog from '@radix-ui/react-dialog';
+import { Flex, Box, IconButton, ScrollArea } from '@strapi/design-system';
+import { Cross } from '@strapi/icons';
+import { useIntl } from 'react-intl';
+import { keyframes, styled } from 'styled-components';
+
+/** Duration of the close animation in ms. Use for timing cleanup (e.g. removing URL params). */ const DRAWER_CLOSE_ANIMATION_MS = 300;
+/* -------------------------------------------------------------------------------------------------
+ * Animations
+ * -----------------------------------------------------------------------------------------------*/ // Direction: up
+const slideUpFromBottomIn = keyframes`
+  from {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+`;
+const slideUpFromBottomOut = keyframes`
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+`;
+// Direction: left
+const slideLeftFromRightIn = keyframes`
+  from {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+`;
+const slideLeftFromRightOut = keyframes`
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+`;
+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:
+     - popovers (500) and tooltips (1000) rendered from descendant components
+       surface above the drawer panel,
+     - AlertDialog overlays (300) and contents (310) opened from inside the
+       drawer (e.g. the asset details "delete" confirm) cover the drawer. */
+  z-index: 200;
+  overflow: hidden;
+  /* dvh, not vh: anchored to the bottom, a 100vh cap on mobile (visual
+     viewport < 100vh under the URL bar) would push the drawer top off-screen. */
+  max-height: ${({ $maxHeight })=>$maxHeight ?? '100dvh'};
+
+  ${({ theme })=>theme.breakpoints.medium} {
+    left: auto;
+    width: ${({ $width })=>$width ?? '400px'};
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    &[data-state='open'] {
+      animation: ${({ $animationDirection })=>$animationDirection === 'up' ? slideUpFromBottomIn : slideLeftFromRightIn}
+        ${DRAWER_CLOSE_ANIMATION_MS}ms cubic-bezier(0.32, 0.72, 0, 1) forwards;
+    }
+
+    &[data-state='closed'] {
+      animation: ${({ $animationDirection })=>$animationDirection === 'up' ? slideUpFromBottomOut : slideLeftFromRightOut}
+        ${DRAWER_CLOSE_ANIMATION_MS}ms cubic-bezier(0.32, 0.72, 0, 1) forwards;
+      pointer-events: none;
+    }
+  }
+`;
+const DrawerContent = styled(Box)`
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  width: 100%;
+  background-color: ${({ theme })=>theme.colors.neutral0};
+  border-radius: ${({ theme })=>theme.borderRadius};
+  box-shadow: ${({ theme })=>theme.shadows.popupShadow};
+  overflow: hidden;
+  border: 1px solid ${({ theme })=>theme.colors.neutral150};
+`;
+const CollapsibleContent = styled(Box)`
+  display: grid;
+  flex: 1;
+  min-height: 0;
+  grid-template-rows: ${({ $isVisible })=>$isVisible ? '1fr' : '0fr'};
+  transition: grid-template-rows 0.3s ease-in-out;
+
+  > div {
+    overflow: hidden;
+    min-height: 0;
+  }
+
+  /* The scroll area wraps its children in a div styled inline as
+     display: table, min-width: 100%. A table box grows to its content, so a
+     single unbreakable string (a long file name) widens it past the scrollport
+     and the panel gains a horizontal scrollbar — with nothing left to clamp the
+     row, the name never truncates. Overriding to a block box makes the
+     scrollport the width again, which is what the vertical-only list wants.
+     Inline styles, hence the important. */
+  [data-radix-scroll-area-viewport] > div {
+    display: block !important;
+  }
+`;
+const CloseIconButton = styled(IconButton)`
+  &:hover {
+    background: transparent;
+  }
+`;
+/** Vetoes an outside interaction that would otherwise dismiss the drawer. */ const keepOpen = (event)=>event.preventDefault();
+const DrawerBody = /*#__PURE__*/ React.forwardRef(({ animationDirection, width, maxHeight, onPointerDownOutside = keepOpen, children, ...props }, ref)=>/*#__PURE__*/ jsx(Dialog.Content, {
+        ref: ref,
+        forceMount: true,
+        asChild: true,
+        onPointerDownOutside: onPointerDownOutside,
+        // Non-modal, so focus legitimately moves outside (tabbing past the last
+        // field); only a pointer press should ever dismiss.
+        onFocusOutside: keepOpen,
+        "data-animation-direction": animationDirection,
+        children: /*#__PURE__*/ jsx(DrawerContainer, {
+            $animationDirection: animationDirection,
+            $width: width,
+            $maxHeight: maxHeight,
+            ...props,
+            children: /*#__PURE__*/ jsx(DrawerContent, {
+                children: children
+            })
+        })
+    }));
+DrawerBody.displayName = 'DrawerBody';
+const DrawerRoot = ({ isVisible, onClose, children })=>/*#__PURE__*/ jsx(Dialog.Root, {
+        open: isVisible,
+        onOpenChange: (nextVisible)=>!nextVisible && onClose?.(),
+        modal: false,
+        children: /*#__PURE__*/ jsx(Dialog.Portal, {
+            children: children
+        })
+    });
+const DrawerScrollableContent = ({ children, isContentExpanded = true })=>/*#__PURE__*/ jsx(CollapsibleContent, {
+        $isVisible: isContentExpanded,
+        "data-collapsed": !isContentExpanded,
+        children: /*#__PURE__*/ jsx(ScrollArea, {
+            children: children
+        })
+    });
+const DrawerCloseButton = ({ onClose, label, children })=>{
+    const { formatMessage } = useIntl();
+    const labelMessage = label ?? formatMessage({
+        id: 'global.close',
+        defaultMessage: 'Close'
+    });
+    return /*#__PURE__*/ jsx(CloseIconButton, {
+        onClick: onClose,
+        label: labelMessage,
+        variant: "ghost",
+        children: children ?? /*#__PURE__*/ jsx(Cross, {})
+    });
+};
+const Drawer = {
+    Root: DrawerRoot,
+    Body: DrawerBody,
+    ScrollableContent: DrawerScrollableContent,
+    CloseButton: DrawerCloseButton,
+    Title: Dialog.Title,
+    Description: Dialog.Description
+};
+
+export { DRAWER_CLOSE_ANIMATION_MS, Drawer };
+//# sourceMappingURL=Drawer.mjs.map

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

@@ -0,0 +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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"}

package/dist/admin/components/TruncatedText.js

@@ -0,0 +1,76 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var designSystem = require('@strapi/design-system');
+
+/**
+ * Text that ellipsizes, with a tooltip carrying the full value once it actually
+ * does. Used for folder and asset names, which are user-supplied and routinely
+ * longer than the column, card or rail holding them.
+ *
+ * The tooltip is conditional rather than always-on: a permanent tooltip would
+ * make every short name hoverable for no reason, and would announce a
+ * description that merely repeats the visible text.
+ *
+ * Whether the text is truncated can't be derived from the string — it depends on
+ * the rendered width — so it has to be measured. That measurement happens when
+ * the pointer or focus arrives, not at mount.
+ *
+ * Measuring at mount is the obvious approach and it does not work here. The
+ * reading is only correct once the row's width constraint has reached this span,
+ * and the tree remounts its rows during first render: the instance that survives
+ * can take its one measurement while still unconstrained, conclude it fits, and
+ * be stuck there. Nothing corrects it afterwards, because a ResizeObserver on
+ * this span never fires again — an ancestor clamps the row, so the text
+ * overflows inside a box whose own size stops changing.
+ *
+ * Reading on hover sidesteps all of that. It is the only moment the answer is
+ * needed, the layout is settled by then, and nothing is cached across remounts
+ * or resizes that could go stale.
+ */ const TruncatedText = ({ children, ...props })=>{
+    const textRef = React.useRef(null);
+    const [isTruncated, setIsTruncated] = React.useState(false);
+    const checkTruncation = ()=>{
+        const el = textRef.current;
+        if (el) {
+            setIsTruncated(el.scrollWidth > el.clientWidth);
+        }
+    };
+    // A ref callback rather than useRef alone, so the first measurement happens
+    // when the node attaches and again whenever it is replaced. The tree remounts
+    // its rows during first render, and a value measured against the discarded
+    // node would never be revisited — this re-runs against the node that survives.
+    const attachRef = (el)=>{
+        textRef.current = el;
+        if (el) {
+            checkTruncation();
+        }
+    };
+    // The Tooltip stays mounted and the *label* is what's conditional, rather than
+    // swapping between a wrapped and unwrapped span. Swapping loses the first
+    // hover: the measurement that decides to show a tooltip is itself triggered by
+    // the pointer arriving, so the trigger would mount underneath a pointer that
+    // has already entered, and Radix — which starts watching at mount — sees no
+    // enter event and stays closed until the pointer leaves and returns.
+    //
+    // With `label` empty the DS Tooltip renders its child as-is and attaches
+    // nothing, so untruncated text still costs no DOM node and announces no
+    // description duplicating what is already on screen.
+    return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Tooltip, {
+        label: isTruncated ? children : undefined,
+        children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+            ref: attachRef,
+            ellipsis: true,
+            // Focus is covered as well as hover: the tooltip has to be reachable by
+            // keyboard, and these rows are buttons.
+            onPointerEnter: checkTruncation,
+            onFocus: checkTruncation,
+            ...props,
+            children: children
+        })
+    });
+};
+
+exports.TruncatedText = TruncatedText;
+//# sourceMappingURL=TruncatedText.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TruncatedText.js","sources":["../../../admin/src/components/TruncatedText.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\n\nimport { Tooltip, Typography, type TypographyProps } from '@strapi/design-system';\n\ninterface TruncatedTextProps extends Omit<TypographyProps, 'children' | 'ellipsis'> {\n  /** The full text. Doubles as the tooltip content once it no longer fits. */\n  children: string;\n}\n\n/**\n * Text that ellipsizes, with a tooltip carrying the full value once it actually\n * does. Used for folder and asset names, which are user-supplied and routinely\n * longer than the column, card or rail holding them.\n *\n * The tooltip is conditional rather than always-on: a permanent tooltip would\n * make every short name hoverable for no reason, and would announce a\n * description that merely repeats the visible text.\n *\n * Whether the text is truncated can't be derived from the string — it depends on\n * the rendered width — so it has to be measured. That measurement happens when\n * the pointer or focus arrives, not at mount.\n *\n * Measuring at mount is the obvious approach and it does not work here. The\n * reading is only correct once the row's width constraint has reached this span,\n * and the tree remounts its rows during first render: the instance that survives\n * can take its one measurement while still unconstrained, conclude it fits, and\n * be stuck there. Nothing corrects it afterwards, because a ResizeObserver on\n * this span never fires again — an ancestor clamps the row, so the text\n * overflows inside a box whose own size stops changing.\n *\n * Reading on hover sidesteps all of that. It is the only moment the answer is\n * needed, the layout is settled by then, and nothing is cached across remounts\n * or resizes that could go stale.\n */\nexport const TruncatedText = ({ children, ...props }: TruncatedTextProps) => {\n  const textRef = useRef<HTMLSpanElement | null>(null);\n  const [isTruncated, setIsTruncated] = useState(false);\n\n  const checkTruncation = () => {\n    const el = textRef.current;\n\n    if (el) {\n      setIsTruncated(el.scrollWidth > el.clientWidth);\n    }\n  };\n\n  // A ref callback rather than useRef alone, so the first measurement happens\n  // when the node attaches and again whenever it is replaced. The tree remounts\n  // its rows during first render, and a value measured against the discarded\n  // node would never be revisited — this re-runs against the node that survives.\n  const attachRef = (el: HTMLSpanElement | null) => {\n    textRef.current = el;\n\n    if (el) {\n      checkTruncation();\n    }\n  };\n\n  // The Tooltip stays mounted and the *label* is what's conditional, rather than\n  // swapping between a wrapped and unwrapped span. Swapping loses the first\n  // hover: the measurement that decides to show a tooltip is itself triggered by\n  // the pointer arriving, so the trigger would mount underneath a pointer that\n  // has already entered, and Radix — which starts watching at mount — sees no\n  // enter event and stays closed until the pointer leaves and returns.\n  //\n  // With `label` empty the DS Tooltip renders its child as-is and attaches\n  // nothing, so untruncated text still costs no DOM node and announces no\n  // description duplicating what is already on screen.\n  return (\n    <Tooltip label={isTruncated ? children : undefined}>\n      <Typography\n        ref={attachRef}\n        ellipsis\n        // Focus is covered as well as hover: the tooltip has to be reachable by\n        // keyboard, and these rows are buttons.\n        onPointerEnter={checkTruncation}\n        onFocus={checkTruncation}\n        {...props}\n      >\n        {children}\n      </Typography>\n    </Tooltip>\n  );\n};\n"],"names":["TruncatedText","children","props","textRef","useRef","isTruncated","setIsTruncated","useState","checkTruncation","el","current","scrollWidth","clientWidth","attachRef","_jsx","Tooltip","label","undefined","Typography","ref","ellipsis","onPointerEnter","onFocus"],"mappings":";;;;;;AASA;;;;;;;;;;;;;;;;;;;;;;;;UAyBaA,aAAAA,GAAgB,CAAC,EAAEC,QAAQ,EAAE,GAAGC,KAAAA,EAA2B,GAAA;AACtE,IAAA,MAAMC,UAAUC,YAAAA,CAA+B,IAAA,CAAA;AAC/C,IAAA,MAAM,CAACC,WAAAA,EAAaC,cAAAA,CAAe,GAAGC,cAAAA,CAAS,KAAA,CAAA;AAE/C,IAAA,MAAMC,eAAAA,GAAkB,IAAA;QACtB,MAAMC,EAAAA,GAAKN,QAAQO,OAAO;AAE1B,QAAA,IAAID,EAAAA,EAAI;AACNH,YAAAA,cAAAA,CAAeG,EAAAA,CAAGE,WAAW,GAAGF,EAAAA,CAAGG,WAAW,CAAA;AAChD,QAAA;AACF,IAAA,CAAA;;;;;AAMA,IAAA,MAAMC,YAAY,CAACJ,EAAAA,GAAAA;AACjBN,QAAAA,OAAAA,CAAQO,OAAO,GAAGD,EAAAA;AAElB,QAAA,IAAIA,EAAAA,EAAI;AACND,YAAAA,eAAAA,EAAAA;AACF,QAAA;AACF,IAAA,CAAA;;;;;;;;;;;AAYA,IAAA,qBACEM,cAAA,CAACC,oBAAAA,EAAAA;AAAQC,QAAAA,KAAAA,EAAOX,cAAcJ,QAAAA,GAAWgB,SAAAA;AACvC,QAAA,QAAA,gBAAAH,cAAA,CAACI,uBAAAA,EAAAA;YACCC,GAAAA,EAAKN,SAAAA;YACLO,QAAQ,EAAA,IAAA;;;YAGRC,cAAAA,EAAgBb,eAAAA;YAChBc,OAAAA,EAASd,eAAAA;AACR,YAAA,GAAGN,KAAK;AAERD,YAAAA,QAAAA,EAAAA;;;AAIT;;;;"}