@strapi/upload 5.59.0 → 5.61.0

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

@@ -0,0 +1,143 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var core = require('@dnd-kit/core');
+var sortable = require('@dnd-kit/sortable');
+var utilities = require('@dnd-kit/utilities');
+var reactIntl = require('react-intl');
+var assetSortable = require('../../pages/Assets/components/Dnd/assetSortable.js');
+var translations = require('../../utils/translations.js');
+var PickerSelectionProvider = require('./PickerSelectionProvider.js');
+
+/** Module scope, so every item of the list gets the same hook (see `AssetSortableContext`). */ const usePickerSortableAsset = (assetId)=>{
+    const { attributes, listeners, setNodeRef, setActivatorNodeRef, transform, transition, isDragging } = sortable.useSortable({
+        id: assetId
+    });
+    return {
+        setNodeRef,
+        isDragging,
+        style: {
+            transform: utilities.CSS.Transform.toString(transform),
+            transition
+        },
+        // The item drags with the pointer from anywhere; the keyboard starts from the grip.
+        listeners: listeners?.onPointerDown ? {
+            onPointerDown: listeners.onPointerDown
+        } : undefined,
+        handle: {
+            ...attributes,
+            ref: setActivatorNodeRef,
+            onKeyDown: (event)=>listeners?.onKeyDown?.(event)
+        }
+    };
+};
+/**
+ * A pointer release over the item it was dragging would also count as a click,
+ * which on a selected item un-picks it. Swallow that one click.
+ */ const swallowNextClick = ()=>{
+    const swallow = (event)=>{
+        event.stopPropagation();
+        event.preventDefault();
+    };
+    window.addEventListener('click', swallow, {
+        capture: true,
+        once: true
+    });
+    // No click follows a keyboard drop: don't leave the listener behind.
+    setTimeout(()=>window.removeEventListener('click', swallow, {
+            capture: true
+        }), 0);
+};
+/** Makes the picker's selected assets reorderable (the Selected tab is always a grid). */ const SortableSelection = ({ children, onReorderingChange })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    const { selection, moveFile } = PickerSelectionProvider.usePickerSelection();
+    const sensors = core.useSensors(// A few pixels of travel before it counts as a drag, so clicks still pick.
+    core.useSensor(core.PointerSensor, {
+        activationConstraint: {
+            distance: 8
+        }
+    }), core.useSensor(core.KeyboardSensor, {
+        coordinateGetter: sortable.sortableKeyboardCoordinates
+    }));
+    const ids = React.useMemo(()=>selection.map(({ id })=>id), [
+        selection
+    ]);
+    const announcements = React.useMemo(()=>{
+        const describe = (id)=>{
+            const index = ids.indexOf(Number(id));
+            return {
+                name: selection[index]?.name ?? '',
+                position: index + 1,
+                count: ids.length
+            };
+        };
+        return {
+            onDragStart: ({ active })=>formatMessage({
+                    id: translations.getTranslationKey('list.reorder.picked-up'),
+                    defaultMessage: 'Picked up {name}. Position {position} of {count}.'
+                }, describe(active.id)),
+            onDragOver: ({ active, over })=>over ? formatMessage({
+                    id: translations.getTranslationKey('list.reorder.moved'),
+                    defaultMessage: '{name} moved to position {position} of {count}.'
+                }, {
+                    ...describe(active.id),
+                    position: describe(over.id).position
+                }) : undefined,
+            onDragEnd: ({ active, over })=>formatMessage({
+                    id: translations.getTranslationKey('list.reorder.dropped'),
+                    defaultMessage: '{name} dropped at position {position} of {count}.'
+                }, {
+                    ...describe(active.id),
+                    position: describe((over ?? active).id).position
+                }),
+            onDragCancel: ({ active })=>formatMessage({
+                    id: translations.getTranslationKey('list.reorder.cancelled'),
+                    defaultMessage: 'Reordering cancelled. {name} is back at position {position} of {count}.'
+                }, describe(active.id))
+        };
+    }, [
+        formatMessage,
+        ids,
+        selection
+    ]);
+    const handleDragEnd = ({ active, over })=>{
+        if (active.data.current?.sortable && over) {
+            moveFile(Number(active.id), Number(over.id));
+        }
+        onReorderingChange?.(false);
+        swallowNextClick();
+    };
+    // Escape cancels a pointer drag while the button is still down, so the click
+    // that would un-pick the item comes with the release, possibly much later.
+    const handleDragCancel = ({ activatorEvent })=>{
+        onReorderingChange?.(false);
+        if (activatorEvent.type === 'pointerdown') {
+            window.addEventListener('pointerup', swallowNextClick, {
+                capture: true,
+                once: true
+            });
+        }
+    };
+    return /*#__PURE__*/ jsxRuntime.jsx(core.DndContext, {
+        sensors: sensors,
+        collisionDetection: core.closestCenter,
+        onDragStart: ()=>onReorderingChange?.(true),
+        onDragEnd: handleDragEnd,
+        onDragCancel: handleDragCancel,
+        accessibility: {
+            announcements
+        },
+        children: /*#__PURE__*/ jsxRuntime.jsx(sortable.SortableContext, {
+            items: ids,
+            strategy: sortable.rectSortingStrategy,
+            children: /*#__PURE__*/ jsxRuntime.jsx(assetSortable.AssetSortableContext.Provider, {
+                value: usePickerSortableAsset,
+                children: children
+            })
+        })
+    });
+};
+
+exports.SortableSelection = SortableSelection;
+//# sourceMappingURL=SortableSelection.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SortableSelection.js","sources":["../../../../admin/src/components/AssetPickerDialog/SortableSelection.tsx"],"sourcesContent":["import { useMemo, type ReactNode } from 'react';\n\nimport {\n  closestCenter,\n  DndContext,\n  KeyboardSensor,\n  PointerSensor,\n  useSensor,\n  useSensors,\n  type Announcements,\n  type DragCancelEvent,\n  type DragEndEvent,\n} from '@dnd-kit/core';\nimport {\n  rectSortingStrategy,\n  SortableContext,\n  sortableKeyboardCoordinates,\n  useSortable,\n} from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\nimport { useIntl } from 'react-intl';\n\nimport {\n  AssetSortableContext,\n  type AssetSortable,\n} from '../../pages/Assets/components/Dnd/assetSortable';\nimport { getTranslationKey } from '../../utils/translations';\n\nimport { usePickerSelection } from './PickerSelectionProvider';\n\n/** Module scope, so every item of the list gets the same hook (see `AssetSortableContext`). */\nconst usePickerSortableAsset = (assetId: number): AssetSortable => {\n  const {\n    attributes,\n    listeners,\n    setNodeRef,\n    setActivatorNodeRef,\n    transform,\n    transition,\n    isDragging,\n  } = useSortable({ id: assetId });\n\n  return {\n    setNodeRef,\n    isDragging,\n    style: { transform: CSS.Transform.toString(transform), transition },\n    // The item drags with the pointer from anywhere; the keyboard starts from the grip.\n    listeners: listeners?.onPointerDown ? { onPointerDown: listeners.onPointerDown } : undefined,\n    handle: {\n      ...attributes,\n      ref: setActivatorNodeRef,\n      onKeyDown: (event) => listeners?.onKeyDown?.(event),\n    },\n  };\n};\n\n/**\n * A pointer release over the item it was dragging would also count as a click,\n * which on a selected item un-picks it. Swallow that one click.\n */\nconst swallowNextClick = () => {\n  const swallow = (event: MouseEvent) => {\n    event.stopPropagation();\n    event.preventDefault();\n  };\n\n  window.addEventListener('click', swallow, { capture: true, once: true });\n  // No click follows a keyboard drop: don't leave the listener behind.\n  setTimeout(() => window.removeEventListener('click', swallow, { capture: true }), 0);\n};\n\ninterface SortableSelectionProps {\n  children: ReactNode;\n  /**\n   * Called with `true` when a drag starts and `false` when it ends or is\n   * cancelled, so the dialog can keep Escape for cancelling the drag.\n   */\n  onReorderingChange?: (reordering: boolean) => void;\n}\n\n/** Makes the picker's selected assets reorderable (the Selected tab is always a grid). */\nexport const SortableSelection = ({ children, onReorderingChange }: SortableSelectionProps) => {\n  const { formatMessage } = useIntl();\n  const { selection, moveFile } = usePickerSelection();\n\n  const sensors = useSensors(\n    // A few pixels of travel before it counts as a drag, so clicks still pick.\n    useSensor(PointerSensor, { activationConstraint: { distance: 8 } }),\n    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })\n  );\n\n  const ids = useMemo(() => selection.map(({ id }) => id), [selection]);\n\n  const announcements = useMemo<Announcements>(() => {\n    const describe = (id: string | number) => {\n      const index = ids.indexOf(Number(id));\n\n      return {\n        name: selection[index]?.name ?? '',\n        position: index + 1,\n        count: ids.length,\n      };\n    };\n\n    return {\n      onDragStart: ({ active }) =>\n        formatMessage(\n          {\n            id: getTranslationKey('list.reorder.picked-up'),\n            defaultMessage: 'Picked up {name}. Position {position} of {count}.',\n          },\n          describe(active.id)\n        ),\n      onDragOver: ({ active, over }) =>\n        over\n          ? formatMessage(\n              {\n                id: getTranslationKey('list.reorder.moved'),\n                defaultMessage: '{name} moved to position {position} of {count}.',\n              },\n              { ...describe(active.id), position: describe(over.id).position }\n            )\n          : undefined,\n      onDragEnd: ({ active, over }) =>\n        formatMessage(\n          {\n            id: getTranslationKey('list.reorder.dropped'),\n            defaultMessage: '{name} dropped at position {position} of {count}.',\n          },\n          { ...describe(active.id), position: describe((over ?? active).id).position }\n        ),\n      onDragCancel: ({ active }) =>\n        formatMessage(\n          {\n            id: getTranslationKey('list.reorder.cancelled'),\n            defaultMessage:\n              'Reordering cancelled. {name} is back at position {position} of {count}.',\n          },\n          describe(active.id)\n        ),\n    };\n  }, [formatMessage, ids, selection]);\n\n  const handleDragEnd = ({ active, over }: DragEndEvent) => {\n    if (active.data.current?.sortable && over) {\n      moveFile(Number(active.id), Number(over.id));\n    }\n\n    onReorderingChange?.(false);\n    swallowNextClick();\n  };\n\n  // Escape cancels a pointer drag while the button is still down, so the click\n  // that would un-pick the item comes with the release, possibly much later.\n  const handleDragCancel = ({ activatorEvent }: DragCancelEvent) => {\n    onReorderingChange?.(false);\n\n    if (activatorEvent.type === 'pointerdown') {\n      window.addEventListener('pointerup', swallowNextClick, { capture: true, once: true });\n    }\n  };\n\n  return (\n    <DndContext\n      sensors={sensors}\n      collisionDetection={closestCenter}\n      onDragStart={() => onReorderingChange?.(true)}\n      onDragEnd={handleDragEnd}\n      onDragCancel={handleDragCancel}\n      accessibility={{ announcements }}\n    >\n      <SortableContext items={ids} strategy={rectSortingStrategy}>\n        <AssetSortableContext.Provider value={usePickerSortableAsset}>\n          {children}\n        </AssetSortableContext.Provider>\n      </SortableContext>\n    </DndContext>\n  );\n};\n"],"names":["usePickerSortableAsset","assetId","attributes","listeners","setNodeRef","setActivatorNodeRef","transform","transition","isDragging","useSortable","id","style","CSS","Transform","toString","onPointerDown","undefined","handle","ref","onKeyDown","event","swallowNextClick","swallow","stopPropagation","preventDefault","window","addEventListener","capture","once","setTimeout","removeEventListener","SortableSelection","children","onReorderingChange","formatMessage","useIntl","selection","moveFile","usePickerSelection","sensors","useSensors","useSensor","PointerSensor","activationConstraint","distance","KeyboardSensor","coordinateGetter","sortableKeyboardCoordinates","ids","useMemo","map","announcements","describe","index","indexOf","Number","name","position","count","length","onDragStart","active","getTranslationKey","defaultMessage","onDragOver","over","onDragEnd","onDragCancel","handleDragEnd","data","current","sortable","handleDragCancel","activatorEvent","type","_jsx","DndContext","collisionDetection","closestCenter","accessibility","SortableContext","items","strategy","rectSortingStrategy","AssetSortableContext","Provider","value"],"mappings":"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"}

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

@@ -0,0 +1,141 @@
+import { jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext, closestCenter } from '@dnd-kit/core';
+import { sortableKeyboardCoordinates, SortableContext, rectSortingStrategy, useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { useIntl } from 'react-intl';
+import { AssetSortableContext } from '../../pages/Assets/components/Dnd/assetSortable.mjs';
+import { getTranslationKey } from '../../utils/translations.mjs';
+import { usePickerSelection } from './PickerSelectionProvider.mjs';
+
+/** Module scope, so every item of the list gets the same hook (see `AssetSortableContext`). */ const usePickerSortableAsset = (assetId)=>{
+    const { attributes, listeners, setNodeRef, setActivatorNodeRef, transform, transition, isDragging } = useSortable({
+        id: assetId
+    });
+    return {
+        setNodeRef,
+        isDragging,
+        style: {
+            transform: CSS.Transform.toString(transform),
+            transition
+        },
+        // The item drags with the pointer from anywhere; the keyboard starts from the grip.
+        listeners: listeners?.onPointerDown ? {
+            onPointerDown: listeners.onPointerDown
+        } : undefined,
+        handle: {
+            ...attributes,
+            ref: setActivatorNodeRef,
+            onKeyDown: (event)=>listeners?.onKeyDown?.(event)
+        }
+    };
+};
+/**
+ * A pointer release over the item it was dragging would also count as a click,
+ * which on a selected item un-picks it. Swallow that one click.
+ */ const swallowNextClick = ()=>{
+    const swallow = (event)=>{
+        event.stopPropagation();
+        event.preventDefault();
+    };
+    window.addEventListener('click', swallow, {
+        capture: true,
+        once: true
+    });
+    // No click follows a keyboard drop: don't leave the listener behind.
+    setTimeout(()=>window.removeEventListener('click', swallow, {
+            capture: true
+        }), 0);
+};
+/** Makes the picker's selected assets reorderable (the Selected tab is always a grid). */ const SortableSelection = ({ children, onReorderingChange })=>{
+    const { formatMessage } = useIntl();
+    const { selection, moveFile } = usePickerSelection();
+    const sensors = useSensors(// A few pixels of travel before it counts as a drag, so clicks still pick.
+    useSensor(PointerSensor, {
+        activationConstraint: {
+            distance: 8
+        }
+    }), useSensor(KeyboardSensor, {
+        coordinateGetter: sortableKeyboardCoordinates
+    }));
+    const ids = useMemo(()=>selection.map(({ id })=>id), [
+        selection
+    ]);
+    const announcements = useMemo(()=>{
+        const describe = (id)=>{
+            const index = ids.indexOf(Number(id));
+            return {
+                name: selection[index]?.name ?? '',
+                position: index + 1,
+                count: ids.length
+            };
+        };
+        return {
+            onDragStart: ({ active })=>formatMessage({
+                    id: getTranslationKey('list.reorder.picked-up'),
+                    defaultMessage: 'Picked up {name}. Position {position} of {count}.'
+                }, describe(active.id)),
+            onDragOver: ({ active, over })=>over ? formatMessage({
+                    id: getTranslationKey('list.reorder.moved'),
+                    defaultMessage: '{name} moved to position {position} of {count}.'
+                }, {
+                    ...describe(active.id),
+                    position: describe(over.id).position
+                }) : undefined,
+            onDragEnd: ({ active, over })=>formatMessage({
+                    id: getTranslationKey('list.reorder.dropped'),
+                    defaultMessage: '{name} dropped at position {position} of {count}.'
+                }, {
+                    ...describe(active.id),
+                    position: describe((over ?? active).id).position
+                }),
+            onDragCancel: ({ active })=>formatMessage({
+                    id: getTranslationKey('list.reorder.cancelled'),
+                    defaultMessage: 'Reordering cancelled. {name} is back at position {position} of {count}.'
+                }, describe(active.id))
+        };
+    }, [
+        formatMessage,
+        ids,
+        selection
+    ]);
+    const handleDragEnd = ({ active, over })=>{
+        if (active.data.current?.sortable && over) {
+            moveFile(Number(active.id), Number(over.id));
+        }
+        onReorderingChange?.(false);
+        swallowNextClick();
+    };
+    // Escape cancels a pointer drag while the button is still down, so the click
+    // that would un-pick the item comes with the release, possibly much later.
+    const handleDragCancel = ({ activatorEvent })=>{
+        onReorderingChange?.(false);
+        if (activatorEvent.type === 'pointerdown') {
+            window.addEventListener('pointerup', swallowNextClick, {
+                capture: true,
+                once: true
+            });
+        }
+    };
+    return /*#__PURE__*/ jsx(DndContext, {
+        sensors: sensors,
+        collisionDetection: closestCenter,
+        onDragStart: ()=>onReorderingChange?.(true),
+        onDragEnd: handleDragEnd,
+        onDragCancel: handleDragCancel,
+        accessibility: {
+            announcements
+        },
+        children: /*#__PURE__*/ jsx(SortableContext, {
+            items: ids,
+            strategy: rectSortingStrategy,
+            children: /*#__PURE__*/ jsx(AssetSortableContext.Provider, {
+                value: usePickerSortableAsset,
+                children: children
+            })
+        })
+    });
+};
+
+export { SortableSelection };
+//# sourceMappingURL=SortableSelection.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SortableSelection.mjs","sources":["../../../../admin/src/components/AssetPickerDialog/SortableSelection.tsx"],"sourcesContent":["import { useMemo, type ReactNode } from 'react';\n\nimport {\n  closestCenter,\n  DndContext,\n  KeyboardSensor,\n  PointerSensor,\n  useSensor,\n  useSensors,\n  type Announcements,\n  type DragCancelEvent,\n  type DragEndEvent,\n} from '@dnd-kit/core';\nimport {\n  rectSortingStrategy,\n  SortableContext,\n  sortableKeyboardCoordinates,\n  useSortable,\n} from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\nimport { useIntl } from 'react-intl';\n\nimport {\n  AssetSortableContext,\n  type AssetSortable,\n} from '../../pages/Assets/components/Dnd/assetSortable';\nimport { getTranslationKey } from '../../utils/translations';\n\nimport { usePickerSelection } from './PickerSelectionProvider';\n\n/** Module scope, so every item of the list gets the same hook (see `AssetSortableContext`). */\nconst usePickerSortableAsset = (assetId: number): AssetSortable => {\n  const {\n    attributes,\n    listeners,\n    setNodeRef,\n    setActivatorNodeRef,\n    transform,\n    transition,\n    isDragging,\n  } = useSortable({ id: assetId });\n\n  return {\n    setNodeRef,\n    isDragging,\n    style: { transform: CSS.Transform.toString(transform), transition },\n    // The item drags with the pointer from anywhere; the keyboard starts from the grip.\n    listeners: listeners?.onPointerDown ? { onPointerDown: listeners.onPointerDown } : undefined,\n    handle: {\n      ...attributes,\n      ref: setActivatorNodeRef,\n      onKeyDown: (event) => listeners?.onKeyDown?.(event),\n    },\n  };\n};\n\n/**\n * A pointer release over the item it was dragging would also count as a click,\n * which on a selected item un-picks it. Swallow that one click.\n */\nconst swallowNextClick = () => {\n  const swallow = (event: MouseEvent) => {\n    event.stopPropagation();\n    event.preventDefault();\n  };\n\n  window.addEventListener('click', swallow, { capture: true, once: true });\n  // No click follows a keyboard drop: don't leave the listener behind.\n  setTimeout(() => window.removeEventListener('click', swallow, { capture: true }), 0);\n};\n\ninterface SortableSelectionProps {\n  children: ReactNode;\n  /**\n   * Called with `true` when a drag starts and `false` when it ends or is\n   * cancelled, so the dialog can keep Escape for cancelling the drag.\n   */\n  onReorderingChange?: (reordering: boolean) => void;\n}\n\n/** Makes the picker's selected assets reorderable (the Selected tab is always a grid). */\nexport const SortableSelection = ({ children, onReorderingChange }: SortableSelectionProps) => {\n  const { formatMessage } = useIntl();\n  const { selection, moveFile } = usePickerSelection();\n\n  const sensors = useSensors(\n    // A few pixels of travel before it counts as a drag, so clicks still pick.\n    useSensor(PointerSensor, { activationConstraint: { distance: 8 } }),\n    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })\n  );\n\n  const ids = useMemo(() => selection.map(({ id }) => id), [selection]);\n\n  const announcements = useMemo<Announcements>(() => {\n    const describe = (id: string | number) => {\n      const index = ids.indexOf(Number(id));\n\n      return {\n        name: selection[index]?.name ?? '',\n        position: index + 1,\n        count: ids.length,\n      };\n    };\n\n    return {\n      onDragStart: ({ active }) =>\n        formatMessage(\n          {\n            id: getTranslationKey('list.reorder.picked-up'),\n            defaultMessage: 'Picked up {name}. Position {position} of {count}.',\n          },\n          describe(active.id)\n        ),\n      onDragOver: ({ active, over }) =>\n        over\n          ? formatMessage(\n              {\n                id: getTranslationKey('list.reorder.moved'),\n                defaultMessage: '{name} moved to position {position} of {count}.',\n              },\n              { ...describe(active.id), position: describe(over.id).position }\n            )\n          : undefined,\n      onDragEnd: ({ active, over }) =>\n        formatMessage(\n          {\n            id: getTranslationKey('list.reorder.dropped'),\n            defaultMessage: '{name} dropped at position {position} of {count}.',\n          },\n          { ...describe(active.id), position: describe((over ?? active).id).position }\n        ),\n      onDragCancel: ({ active }) =>\n        formatMessage(\n          {\n            id: getTranslationKey('list.reorder.cancelled'),\n            defaultMessage:\n              'Reordering cancelled. {name} is back at position {position} of {count}.',\n          },\n          describe(active.id)\n        ),\n    };\n  }, [formatMessage, ids, selection]);\n\n  const handleDragEnd = ({ active, over }: DragEndEvent) => {\n    if (active.data.current?.sortable && over) {\n      moveFile(Number(active.id), Number(over.id));\n    }\n\n    onReorderingChange?.(false);\n    swallowNextClick();\n  };\n\n  // Escape cancels a pointer drag while the button is still down, so the click\n  // that would un-pick the item comes with the release, possibly much later.\n  const handleDragCancel = ({ activatorEvent }: DragCancelEvent) => {\n    onReorderingChange?.(false);\n\n    if (activatorEvent.type === 'pointerdown') {\n      window.addEventListener('pointerup', swallowNextClick, { capture: true, once: true });\n    }\n  };\n\n  return (\n    <DndContext\n      sensors={sensors}\n      collisionDetection={closestCenter}\n      onDragStart={() => onReorderingChange?.(true)}\n      onDragEnd={handleDragEnd}\n      onDragCancel={handleDragCancel}\n      accessibility={{ announcements }}\n    >\n      <SortableContext items={ids} strategy={rectSortingStrategy}>\n        <AssetSortableContext.Provider value={usePickerSortableAsset}>\n          {children}\n        </AssetSortableContext.Provider>\n      </SortableContext>\n    </DndContext>\n  );\n};\n"],"names":["usePickerSortableAsset","assetId","attributes","listeners","setNodeRef","setActivatorNodeRef","transform","transition","isDragging","useSortable","id","style","CSS","Transform","toString","onPointerDown","undefined","handle","ref","onKeyDown","event","swallowNextClick","swallow","stopPropagation","preventDefault","window","addEventListener","capture","once","setTimeout","removeEventListener","SortableSelection","children","onReorderingChange","formatMessage","useIntl","selection","moveFile","usePickerSelection","sensors","useSensors","useSensor","PointerSensor","activationConstraint","distance","KeyboardSensor","coordinateGetter","sortableKeyboardCoordinates","ids","useMemo","map","announcements","describe","index","indexOf","Number","name","position","count","length","onDragStart","active","getTranslationKey","defaultMessage","onDragOver","over","onDragEnd","onDragCancel","handleDragEnd","data","current","sortable","handleDragCancel","activatorEvent","type","_jsx","DndContext","collisionDetection","closestCenter","accessibility","SortableContext","items","strategy","rectSortingStrategy","AssetSortableContext","Provider","value"],"mappings":"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"}

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

@@ -0,0 +1,49 @@
+'use strict';
+
+const hasFile = (selection, id)=>selection.some((file)=>file.id === id);
+/**
+ * Adds the file, or removes it if it is already there. On a single-value field
+ * a new pick replaces whatever was selected.
+ */ const toggleFile = (selection, file, { multiple })=>{
+    if (hasFile(selection, file.id)) {
+        return selection.filter(({ id })=>id !== file.id);
+    }
+    return multiple ? [
+        ...selection,
+        file
+    ] : [
+        file
+    ];
+};
+/** Appends every file not already selected, keeping their order (select-all). */ const addFiles = (selection, files)=>[
+        ...selection,
+        ...files.filter((file)=>!hasFile(selection, file.id))
+    ];
+const removeFile = (selection, id)=>selection.filter((file)=>file.id !== id);
+const removeFiles = (selection, ids)=>selection.filter((file)=>!ids.has(file.id));
+/**
+ * Moves one file to where another one is, the others shifting to make room.
+ * Unknown ids leave the selection as it is.
+ */ const moveFile = (selection, activeId, overId)=>{
+    const from = selection.findIndex(({ id })=>id === activeId);
+    const to = selection.findIndex(({ id })=>id === overId);
+    if (from === -1 || to === -1 || from === to) {
+        return selection;
+    }
+    const next = [
+        ...selection
+    ];
+    const [file] = next.splice(from, 1);
+    next.splice(to, 0, file);
+    return next;
+};
+/** Same files in the same order: confirming would change nothing. */ const isSameSelection = (a, b)=>a.length === b.length && a.every((file, index)=>file.id === b[index].id);
+
+exports.addFiles = addFiles;
+exports.hasFile = hasFile;
+exports.isSameSelection = isSameSelection;
+exports.moveFile = moveFile;
+exports.removeFile = removeFile;
+exports.removeFiles = removeFiles;
+exports.toggleFile = toggleFile;
+//# sourceMappingURL=pickerSelection.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pickerSelection.js","sources":["../../../../admin/src/components/AssetPickerDialog/pickerSelection.ts"],"sourcesContent":["import type { File } from '../../../../shared/contracts/files';\n\n/**\n * The picker's selection is the value the field will hold once confirmed:\n * whole `File` objects, in order. Assets already in the field come first, new\n * picks are appended in the order they are clicked.\n */\nexport type PickerSelection = File[];\n\nexport const hasFile = (selection: PickerSelection, id: number) =>\n  selection.some((file) => file.id === id);\n\n/**\n * Adds the file, or removes it if it is already there. On a single-value field\n * a new pick replaces whatever was selected.\n */\nexport const toggleFile = (\n  selection: PickerSelection,\n  file: File,\n  { multiple }: { multiple: boolean }\n): PickerSelection => {\n  if (hasFile(selection, file.id)) {\n    return selection.filter(({ id }) => id !== file.id);\n  }\n\n  return multiple ? [...selection, file] : [file];\n};\n\n/** Appends every file not already selected, keeping their order (select-all). */\nexport const addFiles = (selection: PickerSelection, files: File[]): PickerSelection => [\n  ...selection,\n  ...files.filter((file) => !hasFile(selection, file.id)),\n];\n\nexport const removeFile = (selection: PickerSelection, id: number): PickerSelection =>\n  selection.filter((file) => file.id !== id);\n\nexport const removeFiles = (selection: PickerSelection, ids: Set<number>): PickerSelection =>\n  selection.filter((file) => !ids.has(file.id));\n\n/**\n * Moves one file to where another one is, the others shifting to make room.\n * Unknown ids leave the selection as it is.\n */\nexport const moveFile = (\n  selection: PickerSelection,\n  activeId: number,\n  overId: number\n): PickerSelection => {\n  const from = selection.findIndex(({ id }) => id === activeId);\n  const to = selection.findIndex(({ id }) => id === overId);\n\n  if (from === -1 || to === -1 || from === to) {\n    return selection;\n  }\n\n  const next = [...selection];\n  const [file] = next.splice(from, 1);\n  next.splice(to, 0, file);\n\n  return next;\n};\n\n/** Same files in the same order: confirming would change nothing. */\nexport const isSameSelection = (a: PickerSelection, b: PickerSelection) =>\n  a.length === b.length && a.every((file, index) => file.id === b[index].id);\n"],"names":["hasFile","selection","id","some","file","toggleFile","multiple","filter","addFiles","files","removeFile","removeFiles","ids","has","moveFile","activeId","overId","from","findIndex","to","next","splice","isSameSelection","a","b","length","every","index"],"mappings":";;AASO,MAAMA,OAAAA,GAAU,CAACC,SAAAA,EAA4BC,EAAAA,GAClDD,SAAAA,CAAUE,IAAI,CAAC,CAACC,IAAAA,GAASA,IAAAA,CAAKF,EAAE,KAAKA,EAAAA;AAEvC;;;UAIaG,UAAAA,GAAa,CACxBJ,WACAG,IAAAA,EACA,EAAEE,QAAQ,EAAyB,GAAA;AAEnC,IAAA,IAAIN,OAAAA,CAAQC,SAAAA,EAAWG,IAAAA,CAAKF,EAAE,CAAA,EAAG;QAC/B,OAAOD,SAAAA,CAAUM,MAAM,CAAC,CAAC,EAAEL,EAAE,EAAE,GAAKA,EAAAA,KAAOE,IAAAA,CAAKF,EAAE,CAAA;AACpD,IAAA;AAEA,IAAA,OAAOI,QAAAA,GAAW;AAAIL,QAAAA,GAAAA,SAAAA;AAAWG,QAAAA;KAAK,GAAG;AAACA,QAAAA;AAAK,KAAA;AACjD;AAEA,kFACO,MAAMI,QAAAA,GAAW,CAACP,WAA4BQ,KAAAA,GAAmC;AACnFR,QAAAA,GAAAA,SAAAA;WACAQ,KAAAA,CAAMF,MAAM,CAAC,CAACH,IAAAA,GAAS,CAACJ,OAAAA,CAAQC,SAAAA,EAAWG,KAAKF,EAAE,CAAA;;AAGhD,MAAMQ,UAAAA,GAAa,CAACT,SAAAA,EAA4BC,EAAAA,GACrDD,SAAAA,CAAUM,MAAM,CAAC,CAACH,IAAAA,GAASA,IAAAA,CAAKF,EAAE,KAAKA,EAAAA;MAE5BS,WAAAA,GAAc,CAACV,SAAAA,EAA4BW,GAAAA,GACtDX,UAAUM,MAAM,CAAC,CAACH,IAAAA,GAAS,CAACQ,GAAAA,CAAIC,GAAG,CAACT,IAAAA,CAAKF,EAAE,CAAA;AAE7C;;;AAGC,IACM,MAAMY,QAAAA,GAAW,CACtBb,WACAc,QAAAA,EACAC,MAAAA,GAAAA;IAEA,MAAMC,IAAAA,GAAOhB,UAAUiB,SAAS,CAAC,CAAC,EAAEhB,EAAE,EAAE,GAAKA,EAAAA,KAAOa,QAAAA,CAAAA;IACpD,MAAMI,EAAAA,GAAKlB,UAAUiB,SAAS,CAAC,CAAC,EAAEhB,EAAE,EAAE,GAAKA,EAAAA,KAAOc,MAAAA,CAAAA;AAElD,IAAA,IAAIC,SAAS,EAAC,IAAKE,OAAO,EAAC,IAAKF,SAASE,EAAAA,EAAI;QAC3C,OAAOlB,SAAAA;AACT,IAAA;AAEA,IAAA,MAAMmB,IAAAA,GAAO;AAAInB,QAAAA,GAAAA;AAAU,KAAA;AAC3B,IAAA,MAAM,CAACG,IAAAA,CAAK,GAAGgB,IAAAA,CAAKC,MAAM,CAACJ,IAAAA,EAAM,CAAA,CAAA;IACjCG,IAAAA,CAAKC,MAAM,CAACF,EAAAA,EAAI,CAAA,EAAGf,IAAAA,CAAAA;IAEnB,OAAOgB,IAAAA;AACT;AAEA,sEACO,MAAME,eAAAA,GAAkB,CAACC,CAAAA,EAAoBC,CAAAA,GAClDD,CAAAA,CAAEE,MAAM,KAAKD,CAAAA,CAAEC,MAAM,IAAIF,CAAAA,CAAEG,KAAK,CAAC,CAACtB,IAAAA,EAAMuB,KAAAA,GAAUvB,IAAAA,CAAKF,EAAE,KAAKsB,CAAC,CAACG,KAAAA,CAAM,CAACzB,EAAE;;;;;;;;;;"}

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

@@ -0,0 +1,41 @@
+const hasFile = (selection, id)=>selection.some((file)=>file.id === id);
+/**
+ * Adds the file, or removes it if it is already there. On a single-value field
+ * a new pick replaces whatever was selected.
+ */ const toggleFile = (selection, file, { multiple })=>{
+    if (hasFile(selection, file.id)) {
+        return selection.filter(({ id })=>id !== file.id);
+    }
+    return multiple ? [
+        ...selection,
+        file
+    ] : [
+        file
+    ];
+};
+/** Appends every file not already selected, keeping their order (select-all). */ const addFiles = (selection, files)=>[
+        ...selection,
+        ...files.filter((file)=>!hasFile(selection, file.id))
+    ];
+const removeFile = (selection, id)=>selection.filter((file)=>file.id !== id);
+const removeFiles = (selection, ids)=>selection.filter((file)=>!ids.has(file.id));
+/**
+ * Moves one file to where another one is, the others shifting to make room.
+ * Unknown ids leave the selection as it is.
+ */ const moveFile = (selection, activeId, overId)=>{
+    const from = selection.findIndex(({ id })=>id === activeId);
+    const to = selection.findIndex(({ id })=>id === overId);
+    if (from === -1 || to === -1 || from === to) {
+        return selection;
+    }
+    const next = [
+        ...selection
+    ];
+    const [file] = next.splice(from, 1);
+    next.splice(to, 0, file);
+    return next;
+};
+/** Same files in the same order: confirming would change nothing. */ const isSameSelection = (a, b)=>a.length === b.length && a.every((file, index)=>file.id === b[index].id);
+
+export { addFiles, hasFile, isSameSelection, moveFile, removeFile, removeFiles, toggleFile };
+//# sourceMappingURL=pickerSelection.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pickerSelection.mjs","sources":["../../../../admin/src/components/AssetPickerDialog/pickerSelection.ts"],"sourcesContent":["import type { File } from '../../../../shared/contracts/files';\n\n/**\n * The picker's selection is the value the field will hold once confirmed:\n * whole `File` objects, in order. Assets already in the field come first, new\n * picks are appended in the order they are clicked.\n */\nexport type PickerSelection = File[];\n\nexport const hasFile = (selection: PickerSelection, id: number) =>\n  selection.some((file) => file.id === id);\n\n/**\n * Adds the file, or removes it if it is already there. On a single-value field\n * a new pick replaces whatever was selected.\n */\nexport const toggleFile = (\n  selection: PickerSelection,\n  file: File,\n  { multiple }: { multiple: boolean }\n): PickerSelection => {\n  if (hasFile(selection, file.id)) {\n    return selection.filter(({ id }) => id !== file.id);\n  }\n\n  return multiple ? [...selection, file] : [file];\n};\n\n/** Appends every file not already selected, keeping their order (select-all). */\nexport const addFiles = (selection: PickerSelection, files: File[]): PickerSelection => [\n  ...selection,\n  ...files.filter((file) => !hasFile(selection, file.id)),\n];\n\nexport const removeFile = (selection: PickerSelection, id: number): PickerSelection =>\n  selection.filter((file) => file.id !== id);\n\nexport const removeFiles = (selection: PickerSelection, ids: Set<number>): PickerSelection =>\n  selection.filter((file) => !ids.has(file.id));\n\n/**\n * Moves one file to where another one is, the others shifting to make room.\n * Unknown ids leave the selection as it is.\n */\nexport const moveFile = (\n  selection: PickerSelection,\n  activeId: number,\n  overId: number\n): PickerSelection => {\n  const from = selection.findIndex(({ id }) => id === activeId);\n  const to = selection.findIndex(({ id }) => id === overId);\n\n  if (from === -1 || to === -1 || from === to) {\n    return selection;\n  }\n\n  const next = [...selection];\n  const [file] = next.splice(from, 1);\n  next.splice(to, 0, file);\n\n  return next;\n};\n\n/** Same files in the same order: confirming would change nothing. */\nexport const isSameSelection = (a: PickerSelection, b: PickerSelection) =>\n  a.length === b.length && a.every((file, index) => file.id === b[index].id);\n"],"names":["hasFile","selection","id","some","file","toggleFile","multiple","filter","addFiles","files","removeFile","removeFiles","ids","has","moveFile","activeId","overId","from","findIndex","to","next","splice","isSameSelection","a","b","length","every","index"],"mappings":"AASO,MAAMA,OAAAA,GAAU,CAACC,SAAAA,EAA4BC,EAAAA,GAClDD,SAAAA,CAAUE,IAAI,CAAC,CAACC,IAAAA,GAASA,IAAAA,CAAKF,EAAE,KAAKA,EAAAA;AAEvC;;;UAIaG,UAAAA,GAAa,CACxBJ,WACAG,IAAAA,EACA,EAAEE,QAAQ,EAAyB,GAAA;AAEnC,IAAA,IAAIN,OAAAA,CAAQC,SAAAA,EAAWG,IAAAA,CAAKF,EAAE,CAAA,EAAG;QAC/B,OAAOD,SAAAA,CAAUM,MAAM,CAAC,CAAC,EAAEL,EAAE,EAAE,GAAKA,EAAAA,KAAOE,IAAAA,CAAKF,EAAE,CAAA;AACpD,IAAA;AAEA,IAAA,OAAOI,QAAAA,GAAW;AAAIL,QAAAA,GAAAA,SAAAA;AAAWG,QAAAA;KAAK,GAAG;AAACA,QAAAA;AAAK,KAAA;AACjD;AAEA,kFACO,MAAMI,QAAAA,GAAW,CAACP,WAA4BQ,KAAAA,GAAmC;AACnFR,QAAAA,GAAAA,SAAAA;WACAQ,KAAAA,CAAMF,MAAM,CAAC,CAACH,IAAAA,GAAS,CAACJ,OAAAA,CAAQC,SAAAA,EAAWG,KAAKF,EAAE,CAAA;;AAGhD,MAAMQ,UAAAA,GAAa,CAACT,SAAAA,EAA4BC,EAAAA,GACrDD,SAAAA,CAAUM,MAAM,CAAC,CAACH,IAAAA,GAASA,IAAAA,CAAKF,EAAE,KAAKA,EAAAA;MAE5BS,WAAAA,GAAc,CAACV,SAAAA,EAA4BW,GAAAA,GACtDX,UAAUM,MAAM,CAAC,CAACH,IAAAA,GAAS,CAACQ,GAAAA,CAAIC,GAAG,CAACT,IAAAA,CAAKF,EAAE,CAAA;AAE7C;;;AAGC,IACM,MAAMY,QAAAA,GAAW,CACtBb,WACAc,QAAAA,EACAC,MAAAA,GAAAA;IAEA,MAAMC,IAAAA,GAAOhB,UAAUiB,SAAS,CAAC,CAAC,EAAEhB,EAAE,EAAE,GAAKA,EAAAA,KAAOa,QAAAA,CAAAA;IACpD,MAAMI,EAAAA,GAAKlB,UAAUiB,SAAS,CAAC,CAAC,EAAEhB,EAAE,EAAE,GAAKA,EAAAA,KAAOc,MAAAA,CAAAA;AAElD,IAAA,IAAIC,SAAS,EAAC,IAAKE,OAAO,EAAC,IAAKF,SAASE,EAAAA,EAAI;QAC3C,OAAOlB,SAAAA;AACT,IAAA;AAEA,IAAA,MAAMmB,IAAAA,GAAO;AAAInB,QAAAA,GAAAA;AAAU,KAAA;AAC3B,IAAA,MAAM,CAACG,IAAAA,CAAK,GAAGgB,IAAAA,CAAKC,MAAM,CAACJ,IAAAA,EAAM,CAAA,CAAA;IACjCG,IAAAA,CAAKC,MAAM,CAACF,EAAAA,EAAI,CAAA,EAAGf,IAAAA,CAAAA;IAEnB,OAAOgB,IAAAA;AACT;AAEA,sEACO,MAAME,eAAAA,GAAkB,CAACC,CAAAA,EAAoBC,CAAAA,GAClDD,CAAAA,CAAEE,MAAM,KAAKD,CAAAA,CAAEC,MAAM,IAAIF,CAAAA,CAAEG,KAAK,CAAC,CAACtB,IAAAA,EAAMuB,KAAAA,GAAUvB,IAAAA,CAAKF,EAAE,KAAKsB,CAAC,CAACG,KAAAA,CAAM,CAACzB,EAAE;;;;"}

package/dist/admin/components/Drawer.js

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

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

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

package/dist/admin/components/Drawer.mjs

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