@strapi/upload 5.59.0 → 5.60.0

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/MediaLibraryInput/AddAssetMenu.js

@@ -8,6 +8,7 @@ var styledComponents = require('styled-components');
 var useMediaLibraryPermissions = require('../../hooks/useMediaLibraryPermissions.js');
 var ActionsMenuContent = require('../../pages/Assets/components/ActionsMenuContent.js');
 var translations = require('../../utils/translations.js');
+var FieldControls = require('./FieldControls.js');
 
 // The trigger reads as a link on the label row, not as a button: no padding, no
 // ghost background, primary text. `Menu.Trigger` takes no `textColor`, so the
@@ -100,7 +101,7 @@ const AddAssetTrigger = styledComponents.styled(designSystem.Menu.Trigger)`
                 zIndex: 2,
                 minWidth: "22rem",
                 children: [
-                    canBrowse && /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Item, {
+                    canBrowse && /*#__PURE__*/ jsxRuntime.jsx(FieldControls.FieldMenuItem, {
                         startIcon: /*#__PURE__*/ jsxRuntime.jsx(icons.Images, {}),
                         disabled: isLoading,
                         onSelect: onBrowseLibrary,
@@ -111,7 +112,7 @@ const AddAssetTrigger = styledComponents.styled(designSystem.Menu.Trigger)`
                     }),
                     canUpload && /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
                         children: [
-                            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Item, {
+                            /*#__PURE__*/ jsxRuntime.jsx(FieldControls.FieldMenuItem, {
                                 startIcon: /*#__PURE__*/ jsxRuntime.jsx(icons.Upload, {}),
                                 disabled: isLoading,
                                 onSelect: onUploadFromDevice,
@@ -120,7 +121,7 @@ const AddAssetTrigger = styledComponents.styled(designSystem.Menu.Trigger)`
                                     defaultMessage: 'Upload from device'
                                 })
                             }),
-                            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Item, {
+                            /*#__PURE__*/ jsxRuntime.jsx(FieldControls.FieldMenuItem, {
                                 startIcon: /*#__PURE__*/ jsxRuntime.jsx(icons.Link, {}),
                                 disabled: isLoading,
                                 onSelect: onUploadFromUrl,

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

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

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

@@ -6,6 +6,7 @@ import { styled } from 'styled-components';
 import { useMediaLibraryPermissions } from '../../hooks/useMediaLibraryPermissions.mjs';
 import { ActionsMenuContent } from '../../pages/Assets/components/ActionsMenuContent.mjs';
 import { getTranslationKey } from '../../utils/translations.mjs';
+import { FieldMenuItem } from './FieldControls.mjs';
 
 // The trigger reads as a link on the label row, not as a button: no padding, no
 // ghost background, primary text. `Menu.Trigger` takes no `textColor`, so the
@@ -98,7 +99,7 @@ const AddAssetTrigger = styled(Menu.Trigger)`
                 zIndex: 2,
                 minWidth: "22rem",
                 children: [
-                    canBrowse && /*#__PURE__*/ jsx(Menu.Item, {
+                    canBrowse && /*#__PURE__*/ jsx(FieldMenuItem, {
                         startIcon: /*#__PURE__*/ jsx(Images, {}),
                         disabled: isLoading,
                         onSelect: onBrowseLibrary,
@@ -109,7 +110,7 @@ const AddAssetTrigger = styled(Menu.Trigger)`
                     }),
                     canUpload && /*#__PURE__*/ jsxs(Fragment, {
                         children: [
-                            /*#__PURE__*/ jsx(Menu.Item, {
+                            /*#__PURE__*/ jsx(FieldMenuItem, {
                                 startIcon: /*#__PURE__*/ jsx(Upload, {}),
                                 disabled: isLoading,
                                 onSelect: onUploadFromDevice,
@@ -118,7 +119,7 @@ const AddAssetTrigger = styled(Menu.Trigger)`
                                     defaultMessage: 'Upload from device'
                                 })
                             }),
-                            /*#__PURE__*/ jsx(Menu.Item, {
+                            /*#__PURE__*/ jsx(FieldMenuItem, {
                                 startIcon: /*#__PURE__*/ jsx(Link, {}),
                                 disabled: isLoading,
                                 onSelect: onUploadFromUrl,

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

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