@strapi/upload 5.52.2 → 5.53.0

package/dist/admin/future/pages/Assets/components/MainAreaContextMenu.mjs

@@ -0,0 +1,179 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState, useCallback, useEffect } from 'react';
+import { Menu } from '@strapi/design-system';
+import { Folder, Files, Link } from '@strapi/icons';
+import { useIntl } from 'react-intl';
+import { getTranslationKey } from '../../../utils/translations.mjs';
+import { ActionsMenuContent } from './ActionsMenuContent.mjs';
+
+/**
+ * The admin layout marks the element that scrolls the main column. Listening on
+ * it rather than a wrapper of our own is what makes the whole column part of the
+ * hit area: it carries a responsive `padding-bottom` (16 / 24 / 40px) that no
+ * descendant can cover, and that strip is exactly where a right-click "below the
+ * list" lands.
+ */ const SCROLL_ROOT_SELECTOR = '[data-strapi-main-content]';
+/**
+ * Subtrees that keep the browser's own context menu instead of opening the
+ * create menu.
+ *
+ * `data-native-context-menu` is the explicit opt-out carried by the list items
+ * themselves (asset cards, folder cards, table rows) and by the bulk actions
+ * bar — right-clicking one of those must behave exactly as it does today. The
+ * rest are the generic cases where the native menu is the useful one: links,
+ * buttons and anything the user can type into or select text in.
+ *
+ * `thead` covers the table's header row, which is chrome rather than empty
+ * background even though it carries no `data-native-context-menu` item.
+ */ const NATIVE_CONTEXT_MENU_SELECTOR = [
+    '[data-native-context-menu]',
+    'thead',
+    'a',
+    'button',
+    'input',
+    'textarea',
+    'select',
+    '[contenteditable="true"]'
+].join(', ');
+/**
+ * The menu is anchored to a zero-sized element parked at the cursor, because
+ * the design system's `Menu` is a dropdown: it positions its content against a
+ * trigger, and there is no real trigger for a right-click on empty space.
+ *
+ * Inline styles rather than a `styled` wrapper — the trigger renders a design
+ * system `Button`, and losing the specificity race with its own class would put
+ * a stray button on the page.
+ */ const CURSOR_ANCHOR_STYLE = {
+    position: 'fixed',
+    width: 0,
+    height: 0,
+    minWidth: 0,
+    minHeight: 0,
+    padding: 0,
+    border: 0,
+    opacity: 0,
+    overflow: 'hidden',
+    pointerEvents: 'none'
+};
+const LOCATOR_STYLE = {
+    height: 0
+};
+/**
+ * Drive/Dropbox-style right-click on the empty parts of the assets area: the
+ * same creation actions the header "New" menu offers, acting on the folder
+ * currently open.
+ *
+ * Renders no wrapper — it finds the scrolling column and listens there, so the
+ * hit area is the whole column including the padding below the list.
+ *
+ * Deliberately background-only. Right-clicking an asset, a folder or a table
+ * row is left alone — those carry `data-native-context-menu` and keep the
+ * browser's menu (which is what you want over a thumbnail or a filename).
+ */ const MainAreaContextMenu = ({ onCreateFolder, onImportFiles, onImportFromUrl, disabled })=>{
+    const { formatMessage } = useIntl();
+    const [position, setPosition] = useState(null);
+    const [locator, setLocator] = useState(null);
+    const anchorRef = useCallback((node)=>setLocator(node), []);
+    useEffect(()=>{
+        const container = locator?.closest(SCROLL_ROOT_SELECTOR);
+        if (!container || disabled) {
+            return;
+        }
+        const handleContextMenu = (event)=>{
+            if (!(event.target instanceof Element)) {
+                return;
+            }
+            if (event.target.closest(NATIVE_CONTEXT_MENU_SELECTOR)) {
+                return;
+            }
+            event.preventDefault();
+            // A right-click while the menu is open reaches Radix's dismiss listener
+            // first, which closes it; re-anchoring here reopens it under the new
+            // cursor rather than leaving the user with a menu that just vanished.
+            setPosition({
+                x: event.clientX,
+                y: event.clientY
+            });
+        };
+        container.addEventListener('contextmenu', handleContextMenu);
+        return ()=>container.removeEventListener('contextmenu', handleContextMenu);
+    }, [
+        locator,
+        disabled
+    ]);
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                ref: anchorRef,
+                style: LOCATOR_STYLE,
+                "aria-hidden": true
+            }),
+            !disabled && /*#__PURE__*/ jsxs(Menu.Root, {
+                modal: false,
+                open: position !== null,
+                onOpenChange: (open)=>{
+                    if (!open) {
+                        setPosition(null);
+                    }
+                },
+                children: [
+                    /*#__PURE__*/ jsx(Menu.Trigger, {
+                        tabIndex: -1,
+                        // No visible content, so the name has to come from `aria-label` —
+                        // the trigger's `label` prop renders as button text, which would
+                        // defeat the point of an invisible anchor. Radix points the menu's
+                        // `aria-labelledby` at this element, so it names the menu too.
+                        endIcon: null,
+                        "aria-label": formatMessage({
+                            id: getTranslationKey('list.context-menu.label'),
+                            defaultMessage: 'Media library actions'
+                        }),
+                        style: {
+                            ...CURSOR_ANCHOR_STYLE,
+                            top: position?.y ?? 0,
+                            left: position?.x ?? 0
+                        }
+                    }),
+                    /*#__PURE__*/ jsxs(ActionsMenuContent, {
+                        popoverPlacement: "bottom-start",
+                        zIndex: 2,
+                        minWidth: "22rem",
+                        // The anchor is invisible and sits wherever the cursor was, so
+                        // handing focus back to it on close would be a focus ring nobody can
+                        // see. Let it fall to the body instead.
+                        onCloseAutoFocus: (event)=>event.preventDefault(),
+                        children: [
+                            /*#__PURE__*/ jsx(Menu.Item, {
+                                onSelect: onCreateFolder,
+                                startIcon: /*#__PURE__*/ jsx(Folder, {}),
+                                children: formatMessage({
+                                    id: getTranslationKey('folder.create.title'),
+                                    defaultMessage: 'New folder'
+                                })
+                            }),
+                            /*#__PURE__*/ jsx(Menu.Item, {
+                                onSelect: onImportFiles,
+                                startIcon: /*#__PURE__*/ jsx(Files, {}),
+                                children: formatMessage({
+                                    id: getTranslationKey('import-files'),
+                                    defaultMessage: 'File upload'
+                                })
+                            }),
+                            /*#__PURE__*/ jsx(Menu.Item, {
+                                onSelect: onImportFromUrl,
+                                startIcon: /*#__PURE__*/ jsx(Link, {}),
+                                children: formatMessage({
+                                    id: getTranslationKey('import-from-url'),
+                                    defaultMessage: 'File upload from URL'
+                                })
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+};
+
+export { MainAreaContextMenu };
+//# sourceMappingURL=MainAreaContextMenu.mjs.map

package/dist/admin/future/pages/Assets/components/MainAreaContextMenu.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MainAreaContextMenu.mjs","sources":["../../../../../../admin/src/future/pages/Assets/components/MainAreaContextMenu.tsx"],"sourcesContent":["import { useCallback, useEffect, useState, type CSSProperties } from 'react';\n\nimport { Menu } from '@strapi/design-system';\nimport { Files, Folder as FolderIcon, Link } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\n\nimport { getTranslationKey } from '../../../utils/translations';\n\nimport { ActionsMenuContent } from './ActionsMenuContent';\n\n/**\n * The admin layout marks the element that scrolls the main column. Listening on\n * it rather than a wrapper of our own is what makes the whole column part of the\n * hit area: it carries a responsive `padding-bottom` (16 / 24 / 40px) that no\n * descendant can cover, and that strip is exactly where a right-click \"below the\n * list\" lands.\n */\nconst SCROLL_ROOT_SELECTOR = '[data-strapi-main-content]';\n\n/**\n * Subtrees that keep the browser's own context menu instead of opening the\n * create menu.\n *\n * `data-native-context-menu` is the explicit opt-out carried by the list items\n * themselves (asset cards, folder cards, table rows) and by the bulk actions\n * bar — right-clicking one of those must behave exactly as it does today. The\n * rest are the generic cases where the native menu is the useful one: links,\n * buttons and anything the user can type into or select text in.\n *\n * `thead` covers the table's header row, which is chrome rather than empty\n * background even though it carries no `data-native-context-menu` item.\n */\nconst NATIVE_CONTEXT_MENU_SELECTOR = [\n  '[data-native-context-menu]',\n  'thead',\n  'a',\n  'button',\n  'input',\n  'textarea',\n  'select',\n  '[contenteditable=\"true\"]',\n].join(', ');\n\n/**\n * The menu is anchored to a zero-sized element parked at the cursor, because\n * the design system's `Menu` is a dropdown: it positions its content against a\n * trigger, and there is no real trigger for a right-click on empty space.\n *\n * Inline styles rather than a `styled` wrapper — the trigger renders a design\n * system `Button`, and losing the specificity race with its own class would put\n * a stray button on the page.\n */\nconst CURSOR_ANCHOR_STYLE: CSSProperties = {\n  position: 'fixed',\n  width: 0,\n  height: 0,\n  minWidth: 0,\n  minHeight: 0,\n  padding: 0,\n  border: 0,\n  opacity: 0,\n  overflow: 'hidden',\n  pointerEvents: 'none',\n};\n\nconst LOCATOR_STYLE: CSSProperties = { height: 0 };\n\ninterface CursorPosition {\n  x: number;\n  y: number;\n}\n\ninterface MainAreaContextMenuProps {\n  /** Opens the \"new folder\" dialog in the folder currently on screen. */\n  onCreateFolder: () => void;\n  /** Opens the native file picker — same entry point as the header \"New\" menu. */\n  onImportFiles: () => void;\n  /** Opens the \"import from URL\" dialog. */\n  onImportFromUrl: () => void;\n  /**\n   * RBAC gate — without `assets.create` there is nothing to offer, so the\n   * right-click falls through to the browser. Required (not defaulted) so a\n   * permission gate can't silently regress to permissive.\n   */\n  disabled: boolean;\n}\n\n/**\n * Drive/Dropbox-style right-click on the empty parts of the assets area: the\n * same creation actions the header \"New\" menu offers, acting on the folder\n * currently open.\n *\n * Renders no wrapper — it finds the scrolling column and listens there, so the\n * hit area is the whole column including the padding below the list.\n *\n * Deliberately background-only. Right-clicking an asset, a folder or a table\n * row is left alone — those carry `data-native-context-menu` and keep the\n * browser's menu (which is what you want over a thumbnail or a filename).\n */\nexport const MainAreaContextMenu = ({\n  onCreateFolder,\n  onImportFiles,\n  onImportFromUrl,\n  disabled,\n}: MainAreaContextMenuProps) => {\n  const { formatMessage } = useIntl();\n  const [position, setPosition] = useState<CursorPosition | null>(null);\n  const [locator, setLocator] = useState<HTMLElement | null>(null);\n\n  const anchorRef = useCallback((node: HTMLElement | null) => setLocator(node), []);\n\n  useEffect(() => {\n    const container = locator?.closest<HTMLElement>(SCROLL_ROOT_SELECTOR);\n\n    if (!container || disabled) {\n      return;\n    }\n\n    const handleContextMenu = (event: MouseEvent) => {\n      if (!(event.target instanceof Element)) {\n        return;\n      }\n\n      if (event.target.closest(NATIVE_CONTEXT_MENU_SELECTOR)) {\n        return;\n      }\n\n      event.preventDefault();\n      // A right-click while the menu is open reaches Radix's dismiss listener\n      // first, which closes it; re-anchoring here reopens it under the new\n      // cursor rather than leaving the user with a menu that just vanished.\n      setPosition({ x: event.clientX, y: event.clientY });\n    };\n\n    container.addEventListener('contextmenu', handleContextMenu);\n\n    return () => container.removeEventListener('contextmenu', handleContextMenu);\n  }, [locator, disabled]);\n\n  return (\n    <>\n      <div ref={anchorRef} style={LOCATOR_STYLE} aria-hidden />\n      {/* Non-modal, like the row-level menus: a right-click elsewhere is both\n          \"close this\" and \"open that\", which a modal layer would swallow.\n          Skipped entirely without the permission — the anchor is a real\n          (if invisible) button, and one that can never open is noise in the\n          accessibility tree. */}\n      {!disabled && (\n        <Menu.Root\n          modal={false}\n          open={position !== null}\n          onOpenChange={(open) => {\n            if (!open) {\n              setPosition(null);\n            }\n          }}\n        >\n          <Menu.Trigger\n            tabIndex={-1}\n            // No visible content, so the name has to come from `aria-label` —\n            // the trigger's `label` prop renders as button text, which would\n            // defeat the point of an invisible anchor. Radix points the menu's\n            // `aria-labelledby` at this element, so it names the menu too.\n            endIcon={null}\n            aria-label={formatMessage({\n              id: getTranslationKey('list.context-menu.label'),\n              defaultMessage: 'Media library actions',\n            })}\n            style={{ ...CURSOR_ANCHOR_STYLE, top: position?.y ?? 0, left: position?.x ?? 0 }}\n          />\n          <ActionsMenuContent\n            popoverPlacement=\"bottom-start\"\n            zIndex={2}\n            minWidth=\"22rem\"\n            // The anchor is invisible and sits wherever the cursor was, so\n            // handing focus back to it on close would be a focus ring nobody can\n            // see. Let it fall to the body instead.\n            onCloseAutoFocus={(event) => event.preventDefault()}\n          >\n            <Menu.Item onSelect={onCreateFolder} startIcon={<FolderIcon />}>\n              {formatMessage({\n                id: getTranslationKey('folder.create.title'),\n                defaultMessage: 'New folder',\n              })}\n            </Menu.Item>\n            <Menu.Item onSelect={onImportFiles} startIcon={<Files />}>\n              {formatMessage({\n                id: getTranslationKey('import-files'),\n                defaultMessage: 'File upload',\n              })}\n            </Menu.Item>\n            <Menu.Item onSelect={onImportFromUrl} startIcon={<Link />}>\n              {formatMessage({\n                id: getTranslationKey('import-from-url'),\n                defaultMessage: 'File upload from URL',\n              })}\n            </Menu.Item>\n          </ActionsMenuContent>\n        </Menu.Root>\n      )}\n    </>\n  );\n};\n"],"names":["SCROLL_ROOT_SELECTOR","NATIVE_CONTEXT_MENU_SELECTOR","join","CURSOR_ANCHOR_STYLE","position","width","height","minWidth","minHeight","padding","border","opacity","overflow","pointerEvents","LOCATOR_STYLE","MainAreaContextMenu","onCreateFolder","onImportFiles","onImportFromUrl","disabled","formatMessage","useIntl","setPosition","useState","locator","setLocator","anchorRef","useCallback","node","useEffect","container","closest","handleContextMenu","event","target","Element","preventDefault","x","clientX","y","clientY","addEventListener","removeEventListener","_jsxs","_Fragment","_jsx","div","ref","style","aria-hidden","Menu","Root","modal","open","onOpenChange","Trigger","tabIndex","endIcon","aria-label","id","getTranslationKey","defaultMessage","top","left","ActionsMenuContent","popoverPlacement","zIndex","onCloseAutoFocus","Item","onSelect","startIcon","FolderIcon","Files","Link"],"mappings":"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"}

package/dist/admin/future/pages/Assets/constants.js

@@ -9,6 +9,24 @@ const viewOptions = {
     GRID: 0,
     TABLE: 1
 };
+const ASSET_DETAILS_TRIGGER_ATTRIBUTE = 'data-asset-details-trigger';
+/**
+ * Spread onto grid cards and table rows, whose click opens or switches the
+ * asset details drawer. The drawer's outside-click dismissal skips presses
+ * landing on one of these, so switching assets doesn't close-then-reopen it.
+ */ const ASSET_DETAILS_TRIGGER_PROPS = {
+    [ASSET_DETAILS_TRIGGER_ATTRIBUTE]: ''
+};
+const ASSET_ITEM_CONTROL_ATTRIBUTE = 'data-asset-item-control';
+/**
+ * Spread onto the controls inside an asset card or row that act on the item
+ * rather than opening it — its selection checkbox and its actions menu. They
+ * stop the card's own click, so no details switch follows them.
+ */ const ASSET_ITEM_CONTROL_PROPS = {
+    [ASSET_ITEM_CONTROL_ATTRIBUTE]: ''
+};
+/** Matches an element carrying {@link ASSET_ITEM_CONTROL_PROPS}. */ const ASSET_ITEM_CONTROL_SELECTOR = `[${ASSET_ITEM_CONTROL_ATTRIBUTE}]`;
+/** Matches an element carrying {@link ASSET_DETAILS_TRIGGER_PROPS}. */ const ASSET_DETAILS_TRIGGER_SELECTOR = `[${ASSET_DETAILS_TRIGGER_ATTRIBUTE}]`;
 const TABLE_HEADERS = [
     {
         name: 'name',
@@ -48,6 +66,10 @@ const TABLE_HEADERS = [
     }
 ];
 
+exports.ASSET_DETAILS_TRIGGER_PROPS = ASSET_DETAILS_TRIGGER_PROPS;
+exports.ASSET_DETAILS_TRIGGER_SELECTOR = ASSET_DETAILS_TRIGGER_SELECTOR;
+exports.ASSET_ITEM_CONTROL_PROPS = ASSET_ITEM_CONTROL_PROPS;
+exports.ASSET_ITEM_CONTROL_SELECTOR = ASSET_ITEM_CONTROL_SELECTOR;
 exports.TABLE_HEADERS = TABLE_HEADERS;
 exports.localStorageKeys = localStorageKeys;
 exports.viewOptions = viewOptions;

package/dist/admin/future/pages/Assets/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sources":["../../../../../admin/src/future/pages/Assets/constants.ts"],"sourcesContent":["import { getTranslationKey } from '../../utils/translations';\n\nexport const localStorageKeys = {\n  view: `STRAPI_UPLOAD_LIBRARY_VIEW`,\n};\n\nexport const viewOptions = {\n  GRID: 0,\n  TABLE: 1,\n};\n\ninterface TableHeader {\n  name: string;\n  label: { id: string; defaultMessage: string };\n  isVisuallyHidden?: boolean;\n}\n\nexport const TABLE_HEADERS: TableHeader[] = [\n  {\n    name: 'name',\n    label: { id: getTranslationKey('list.table.header.name'), defaultMessage: 'name' },\n  },\n  {\n    name: 'createdAt',\n    label: {\n      id: getTranslationKey('list.table.header.creationDate'),\n      defaultMessage: 'creation date',\n    },\n  },\n  {\n    name: 'updatedAt',\n    label: {\n      id: getTranslationKey('list.table.header.lastModified'),\n      defaultMessage: 'last modified',\n    },\n  },\n  {\n    name: 'size',\n    label: { id: getTranslationKey('list.table.header.size'), defaultMessage: 'size' },\n  },\n  {\n    name: 'actions',\n    label: { id: getTranslationKey('list.table.header.actions'), defaultMessage: 'actions' },\n    isVisuallyHidden: true,\n  },\n];\n"],"names":["localStorageKeys","view","viewOptions","GRID","TABLE","TABLE_HEADERS","name","label","id","getTranslationKey","defaultMessage","isVisuallyHidden"],"mappings":";;;;MAEaA,gBAAAA,GAAmB;IAC9BC,IAAAA,EAAM,CAAC,0BAA0B;AACnC;MAEaC,WAAAA,GAAc;IACzBC,IAAAA,EAAM,CAAA;IACNC,KAAAA,EAAO;AACT;MAQaC,aAAAA,GAA+B;AAC1C,IAAA;QACEC,IAAAA,EAAM,MAAA;QACNC,KAAAA,EAAO;AAAEC,YAAAA,EAAAA,EAAIC,8BAAAA,CAAkB,wBAAA,CAAA;YAA2BC,cAAAA,EAAgB;AAAO;AACnF,KAAA;AACA,IAAA;QACEJ,IAAAA,EAAM,WAAA;QACNC,KAAAA,EAAO;AACLC,YAAAA,EAAAA,EAAIC,8BAAAA,CAAkB,gCAAA,CAAA;YACtBC,cAAAA,EAAgB;AAClB;AACF,KAAA;AACA,IAAA;QACEJ,IAAAA,EAAM,WAAA;QACNC,KAAAA,EAAO;AACLC,YAAAA,EAAAA,EAAIC,8BAAAA,CAAkB,gCAAA,CAAA;YACtBC,cAAAA,EAAgB;AAClB;AACF,KAAA;AACA,IAAA;QACEJ,IAAAA,EAAM,MAAA;QACNC,KAAAA,EAAO;AAAEC,YAAAA,EAAAA,EAAIC,8BAAAA,CAAkB,wBAAA,CAAA;YAA2BC,cAAAA,EAAgB;AAAO;AACnF,KAAA;AACA,IAAA;QACEJ,IAAAA,EAAM,SAAA;QACNC,KAAAA,EAAO;AAAEC,YAAAA,EAAAA,EAAIC,8BAAAA,CAAkB,2BAAA,CAAA;YAA8BC,cAAAA,EAAgB;AAAU,SAAA;QACvFC,gBAAAA,EAAkB;AACpB;;;;;;;"}
+{"version":3,"file":"constants.js","sources":["../../../../../admin/src/future/pages/Assets/constants.ts"],"sourcesContent":["import { getTranslationKey } from '../../utils/translations';\n\nexport const localStorageKeys = {\n  view: `STRAPI_UPLOAD_LIBRARY_VIEW`,\n};\n\nexport const viewOptions = {\n  GRID: 0,\n  TABLE: 1,\n};\n\nconst ASSET_DETAILS_TRIGGER_ATTRIBUTE = 'data-asset-details-trigger';\n\n/**\n * Spread onto grid cards and table rows, whose click opens or switches the\n * asset details drawer. The drawer's outside-click dismissal skips presses\n * landing on one of these, so switching assets doesn't close-then-reopen it.\n */\nexport const ASSET_DETAILS_TRIGGER_PROPS = { [ASSET_DETAILS_TRIGGER_ATTRIBUTE]: '' };\n\nconst ASSET_ITEM_CONTROL_ATTRIBUTE = 'data-asset-item-control';\n\n/**\n * Spread onto the controls inside an asset card or row that act on the item\n * rather than opening it — its selection checkbox and its actions menu. They\n * stop the card's own click, so no details switch follows them.\n */\nexport const ASSET_ITEM_CONTROL_PROPS = { [ASSET_ITEM_CONTROL_ATTRIBUTE]: '' };\n\n/** Matches an element carrying {@link ASSET_ITEM_CONTROL_PROPS}. */\nexport const ASSET_ITEM_CONTROL_SELECTOR = `[${ASSET_ITEM_CONTROL_ATTRIBUTE}]`;\n\n/** Matches an element carrying {@link ASSET_DETAILS_TRIGGER_PROPS}. */\nexport const ASSET_DETAILS_TRIGGER_SELECTOR = `[${ASSET_DETAILS_TRIGGER_ATTRIBUTE}]`;\n\ninterface TableHeader {\n  name: string;\n  label: { id: string; defaultMessage: string };\n  isVisuallyHidden?: boolean;\n}\n\nexport const TABLE_HEADERS: TableHeader[] = [\n  {\n    name: 'name',\n    label: { id: getTranslationKey('list.table.header.name'), defaultMessage: 'name' },\n  },\n  {\n    name: 'createdAt',\n    label: {\n      id: getTranslationKey('list.table.header.creationDate'),\n      defaultMessage: 'creation date',\n    },\n  },\n  {\n    name: 'updatedAt',\n    label: {\n      id: getTranslationKey('list.table.header.lastModified'),\n      defaultMessage: 'last modified',\n    },\n  },\n  {\n    name: 'size',\n    label: { id: getTranslationKey('list.table.header.size'), defaultMessage: 'size' },\n  },\n  {\n    name: 'actions',\n    label: { id: getTranslationKey('list.table.header.actions'), defaultMessage: 'actions' },\n    isVisuallyHidden: true,\n  },\n];\n"],"names":["localStorageKeys","view","viewOptions","GRID","TABLE","ASSET_DETAILS_TRIGGER_ATTRIBUTE","ASSET_DETAILS_TRIGGER_PROPS","ASSET_ITEM_CONTROL_ATTRIBUTE","ASSET_ITEM_CONTROL_PROPS","ASSET_ITEM_CONTROL_SELECTOR","ASSET_DETAILS_TRIGGER_SELECTOR","TABLE_HEADERS","name","label","id","getTranslationKey","defaultMessage","isVisuallyHidden"],"mappings":";;;;MAEaA,gBAAAA,GAAmB;IAC9BC,IAAAA,EAAM,CAAC,0BAA0B;AACnC;MAEaC,WAAAA,GAAc;IACzBC,IAAAA,EAAM,CAAA;IACNC,KAAAA,EAAO;AACT;AAEA,MAAMC,+BAAAA,GAAkC,4BAAA;AAExC;;;;UAKaC,2BAAAA,GAA8B;AAAE,IAAA,CAACD,kCAAkC;AAAG;AAEnF,MAAME,4BAAAA,GAA+B,yBAAA;AAErC;;;;UAKaC,wBAAAA,GAA2B;AAAE,IAAA,CAACD,+BAA+B;AAAG;AAE7E,qEACO,MAAME,2BAAAA,GAA8B,CAAC,CAAC,EAAEF,4BAAAA,CAA6B,CAAC;AAE7E,wEACO,MAAMG,8BAAAA,GAAiC,CAAC,CAAC,EAAEL,+BAAAA,CAAgC,CAAC;MAQtEM,aAAAA,GAA+B;AAC1C,IAAA;QACEC,IAAAA,EAAM,MAAA;QACNC,KAAAA,EAAO;AAAEC,YAAAA,EAAAA,EAAIC,8BAAAA,CAAkB,wBAAA,CAAA;YAA2BC,cAAAA,EAAgB;AAAO;AACnF,KAAA;AACA,IAAA;QACEJ,IAAAA,EAAM,WAAA;QACNC,KAAAA,EAAO;AACLC,YAAAA,EAAAA,EAAIC,8BAAAA,CAAkB,gCAAA,CAAA;YACtBC,cAAAA,EAAgB;AAClB;AACF,KAAA;AACA,IAAA;QACEJ,IAAAA,EAAM,WAAA;QACNC,KAAAA,EAAO;AACLC,YAAAA,EAAAA,EAAIC,8BAAAA,CAAkB,gCAAA,CAAA;YACtBC,cAAAA,EAAgB;AAClB;AACF,KAAA;AACA,IAAA;QACEJ,IAAAA,EAAM,MAAA;QACNC,KAAAA,EAAO;AAAEC,YAAAA,EAAAA,EAAIC,8BAAAA,CAAkB,wBAAA,CAAA;YAA2BC,cAAAA,EAAgB;AAAO;AACnF,KAAA;AACA,IAAA;QACEJ,IAAAA,EAAM,SAAA;QACNC,KAAAA,EAAO;AAAEC,YAAAA,EAAAA,EAAIC,8BAAAA,CAAkB,2BAAA,CAAA;YAA8BC,cAAAA,EAAgB;AAAU,SAAA;QACvFC,gBAAAA,EAAkB;AACpB;;;;;;;;;;;"}

package/dist/admin/future/pages/Assets/constants.mjs

@@ -7,6 +7,24 @@ const viewOptions = {
     GRID: 0,
     TABLE: 1
 };
+const ASSET_DETAILS_TRIGGER_ATTRIBUTE = 'data-asset-details-trigger';
+/**
+ * Spread onto grid cards and table rows, whose click opens or switches the
+ * asset details drawer. The drawer's outside-click dismissal skips presses
+ * landing on one of these, so switching assets doesn't close-then-reopen it.
+ */ const ASSET_DETAILS_TRIGGER_PROPS = {
+    [ASSET_DETAILS_TRIGGER_ATTRIBUTE]: ''
+};
+const ASSET_ITEM_CONTROL_ATTRIBUTE = 'data-asset-item-control';
+/**
+ * Spread onto the controls inside an asset card or row that act on the item
+ * rather than opening it — its selection checkbox and its actions menu. They
+ * stop the card's own click, so no details switch follows them.
+ */ const ASSET_ITEM_CONTROL_PROPS = {
+    [ASSET_ITEM_CONTROL_ATTRIBUTE]: ''
+};
+/** Matches an element carrying {@link ASSET_ITEM_CONTROL_PROPS}. */ const ASSET_ITEM_CONTROL_SELECTOR = `[${ASSET_ITEM_CONTROL_ATTRIBUTE}]`;
+/** Matches an element carrying {@link ASSET_DETAILS_TRIGGER_PROPS}. */ const ASSET_DETAILS_TRIGGER_SELECTOR = `[${ASSET_DETAILS_TRIGGER_ATTRIBUTE}]`;
 const TABLE_HEADERS = [
     {
         name: 'name',
@@ -46,5 +64,5 @@ const TABLE_HEADERS = [
     }
 ];
 
-export { TABLE_HEADERS, localStorageKeys, viewOptions };
+export { ASSET_DETAILS_TRIGGER_PROPS, ASSET_DETAILS_TRIGGER_SELECTOR, ASSET_ITEM_CONTROL_PROPS, ASSET_ITEM_CONTROL_SELECTOR, TABLE_HEADERS, localStorageKeys, viewOptions };
 //# sourceMappingURL=constants.mjs.map

package/dist/admin/future/pages/Assets/constants.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"constants.mjs","sources":["../../../../../admin/src/future/pages/Assets/constants.ts"],"sourcesContent":["import { getTranslationKey } from '../../utils/translations';\n\nexport const localStorageKeys = {\n  view: `STRAPI_UPLOAD_LIBRARY_VIEW`,\n};\n\nexport const viewOptions = {\n  GRID: 0,\n  TABLE: 1,\n};\n\ninterface TableHeader {\n  name: string;\n  label: { id: string; defaultMessage: string };\n  isVisuallyHidden?: boolean;\n}\n\nexport const TABLE_HEADERS: TableHeader[] = [\n  {\n    name: 'name',\n    label: { id: getTranslationKey('list.table.header.name'), defaultMessage: 'name' },\n  },\n  {\n    name: 'createdAt',\n    label: {\n      id: getTranslationKey('list.table.header.creationDate'),\n      defaultMessage: 'creation date',\n    },\n  },\n  {\n    name: 'updatedAt',\n    label: {\n      id: getTranslationKey('list.table.header.lastModified'),\n      defaultMessage: 'last modified',\n    },\n  },\n  {\n    name: 'size',\n    label: { id: getTranslationKey('list.table.header.size'), defaultMessage: 'size' },\n  },\n  {\n    name: 'actions',\n    label: { id: getTranslationKey('list.table.header.actions'), defaultMessage: 'actions' },\n    isVisuallyHidden: true,\n  },\n];\n"],"names":["localStorageKeys","view","viewOptions","GRID","TABLE","TABLE_HEADERS","name","label","id","getTranslationKey","defaultMessage","isVisuallyHidden"],"mappings":";;MAEaA,gBAAAA,GAAmB;IAC9BC,IAAAA,EAAM,CAAC,0BAA0B;AACnC;MAEaC,WAAAA,GAAc;IACzBC,IAAAA,EAAM,CAAA;IACNC,KAAAA,EAAO;AACT;MAQaC,aAAAA,GAA+B;AAC1C,IAAA;QACEC,IAAAA,EAAM,MAAA;QACNC,KAAAA,EAAO;AAAEC,YAAAA,EAAAA,EAAIC,iBAAAA,CAAkB,wBAAA,CAAA;YAA2BC,cAAAA,EAAgB;AAAO;AACnF,KAAA;AACA,IAAA;QACEJ,IAAAA,EAAM,WAAA;QACNC,KAAAA,EAAO;AACLC,YAAAA,EAAAA,EAAIC,iBAAAA,CAAkB,gCAAA,CAAA;YACtBC,cAAAA,EAAgB;AAClB;AACF,KAAA;AACA,IAAA;QACEJ,IAAAA,EAAM,WAAA;QACNC,KAAAA,EAAO;AACLC,YAAAA,EAAAA,EAAIC,iBAAAA,CAAkB,gCAAA,CAAA;YACtBC,cAAAA,EAAgB;AAClB;AACF,KAAA;AACA,IAAA;QACEJ,IAAAA,EAAM,MAAA;QACNC,KAAAA,EAAO;AAAEC,YAAAA,EAAAA,EAAIC,iBAAAA,CAAkB,wBAAA,CAAA;YAA2BC,cAAAA,EAAgB;AAAO;AACnF,KAAA;AACA,IAAA;QACEJ,IAAAA,EAAM,SAAA;QACNC,KAAAA,EAAO;AAAEC,YAAAA,EAAAA,EAAIC,iBAAAA,CAAkB,2BAAA,CAAA;YAA8BC,cAAAA,EAAgB;AAAU,SAAA;QACvFC,gBAAAA,EAAkB;AACpB;;;;;"}
+{"version":3,"file":"constants.mjs","sources":["../../../../../admin/src/future/pages/Assets/constants.ts"],"sourcesContent":["import { getTranslationKey } from '../../utils/translations';\n\nexport const localStorageKeys = {\n  view: `STRAPI_UPLOAD_LIBRARY_VIEW`,\n};\n\nexport const viewOptions = {\n  GRID: 0,\n  TABLE: 1,\n};\n\nconst ASSET_DETAILS_TRIGGER_ATTRIBUTE = 'data-asset-details-trigger';\n\n/**\n * Spread onto grid cards and table rows, whose click opens or switches the\n * asset details drawer. The drawer's outside-click dismissal skips presses\n * landing on one of these, so switching assets doesn't close-then-reopen it.\n */\nexport const ASSET_DETAILS_TRIGGER_PROPS = { [ASSET_DETAILS_TRIGGER_ATTRIBUTE]: '' };\n\nconst ASSET_ITEM_CONTROL_ATTRIBUTE = 'data-asset-item-control';\n\n/**\n * Spread onto the controls inside an asset card or row that act on the item\n * rather than opening it — its selection checkbox and its actions menu. They\n * stop the card's own click, so no details switch follows them.\n */\nexport const ASSET_ITEM_CONTROL_PROPS = { [ASSET_ITEM_CONTROL_ATTRIBUTE]: '' };\n\n/** Matches an element carrying {@link ASSET_ITEM_CONTROL_PROPS}. */\nexport const ASSET_ITEM_CONTROL_SELECTOR = `[${ASSET_ITEM_CONTROL_ATTRIBUTE}]`;\n\n/** Matches an element carrying {@link ASSET_DETAILS_TRIGGER_PROPS}. */\nexport const ASSET_DETAILS_TRIGGER_SELECTOR = `[${ASSET_DETAILS_TRIGGER_ATTRIBUTE}]`;\n\ninterface TableHeader {\n  name: string;\n  label: { id: string; defaultMessage: string };\n  isVisuallyHidden?: boolean;\n}\n\nexport const TABLE_HEADERS: TableHeader[] = [\n  {\n    name: 'name',\n    label: { id: getTranslationKey('list.table.header.name'), defaultMessage: 'name' },\n  },\n  {\n    name: 'createdAt',\n    label: {\n      id: getTranslationKey('list.table.header.creationDate'),\n      defaultMessage: 'creation date',\n    },\n  },\n  {\n    name: 'updatedAt',\n    label: {\n      id: getTranslationKey('list.table.header.lastModified'),\n      defaultMessage: 'last modified',\n    },\n  },\n  {\n    name: 'size',\n    label: { id: getTranslationKey('list.table.header.size'), defaultMessage: 'size' },\n  },\n  {\n    name: 'actions',\n    label: { id: getTranslationKey('list.table.header.actions'), defaultMessage: 'actions' },\n    isVisuallyHidden: true,\n  },\n];\n"],"names":["localStorageKeys","view","viewOptions","GRID","TABLE","ASSET_DETAILS_TRIGGER_ATTRIBUTE","ASSET_DETAILS_TRIGGER_PROPS","ASSET_ITEM_CONTROL_ATTRIBUTE","ASSET_ITEM_CONTROL_PROPS","ASSET_ITEM_CONTROL_SELECTOR","ASSET_DETAILS_TRIGGER_SELECTOR","TABLE_HEADERS","name","label","id","getTranslationKey","defaultMessage","isVisuallyHidden"],"mappings":";;MAEaA,gBAAAA,GAAmB;IAC9BC,IAAAA,EAAM,CAAC,0BAA0B;AACnC;MAEaC,WAAAA,GAAc;IACzBC,IAAAA,EAAM,CAAA;IACNC,KAAAA,EAAO;AACT;AAEA,MAAMC,+BAAAA,GAAkC,4BAAA;AAExC;;;;UAKaC,2BAAAA,GAA8B;AAAE,IAAA,CAACD,kCAAkC;AAAG;AAEnF,MAAME,4BAAAA,GAA+B,yBAAA;AAErC;;;;UAKaC,wBAAAA,GAA2B;AAAE,IAAA,CAACD,+BAA+B;AAAG;AAE7E,qEACO,MAAME,2BAAAA,GAA8B,CAAC,CAAC,EAAEF,4BAAAA,CAA6B,CAAC;AAE7E,wEACO,MAAMG,8BAAAA,GAAiC,CAAC,CAAC,EAAEL,+BAAAA,CAAgC,CAAC;MAQtEM,aAAAA,GAA+B;AAC1C,IAAA;QACEC,IAAAA,EAAM,MAAA;QACNC,KAAAA,EAAO;AAAEC,YAAAA,EAAAA,EAAIC,iBAAAA,CAAkB,wBAAA,CAAA;YAA2BC,cAAAA,EAAgB;AAAO;AACnF,KAAA;AACA,IAAA;QACEJ,IAAAA,EAAM,WAAA;QACNC,KAAAA,EAAO;AACLC,YAAAA,EAAAA,EAAIC,iBAAAA,CAAkB,gCAAA,CAAA;YACtBC,cAAAA,EAAgB;AAClB;AACF,KAAA;AACA,IAAA;QACEJ,IAAAA,EAAM,WAAA;QACNC,KAAAA,EAAO;AACLC,YAAAA,EAAAA,EAAIC,iBAAAA,CAAkB,gCAAA,CAAA;YACtBC,cAAAA,EAAgB;AAClB;AACF,KAAA;AACA,IAAA;QACEJ,IAAAA,EAAM,MAAA;QACNC,KAAAA,EAAO;AAAEC,YAAAA,EAAAA,EAAIC,iBAAAA,CAAkB,wBAAA,CAAA;YAA2BC,cAAAA,EAAgB;AAAO;AACnF,KAAA;AACA,IAAA;QACEJ,IAAAA,EAAM,SAAA;QACNC,KAAAA,EAAO;AAAEC,YAAAA,EAAAA,EAAIC,iBAAAA,CAAkB,2BAAA,CAAA;YAA8BC,cAAAA,EAAgB;AAAU,SAAA;QACvFC,gBAAAA,EAAkB;AACpB;;;;;"}

package/dist/admin/future/pages/Assets/hooks/useFolderNavigation.js

@@ -41,10 +41,11 @@ const useFolderNavigation = ()=>{
     /**
    * Strips a `?folder=` value we can't parse.
    */ const stripFolderParam = React.useCallback(()=>{
-        setQuery({
-            folder: ''
-        }, 'remove');
+        setQuery(strapiAdmin.withEncodedUserParams(query, {
+            folder: undefined
+        }));
     }, [
+        query,
         setQuery
     ]);
     // Malformed ?folder= values (e.g. abc) parse as null; strip the param from the URL.

package/dist/admin/future/pages/Assets/hooks/useFolderNavigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFolderNavigation.js","sources":["../../../../../../admin/src/future/pages/Assets/hooks/useFolderNavigation.ts"],"sourcesContent":["import { useCallback, useEffect } from 'react';\n\nimport { useQueryParams } from '@strapi/admin/strapi-admin';\n\nimport type { Folder } from '../../../../../../shared/contracts/folders';\n\nconst parseFolderIdFromQuery = (folder: string | undefined): number | null => {\n  if (!folder) {\n    return null;\n  }\n\n  const id = Number(folder);\n\n  return Number.isFinite(id) ? id : null;\n};\n\ninterface FolderNavigationQuery {\n  folder?: string;\n  _q?: string;\n}\n\nexport const useFolderNavigation = () => {\n  const [{ query }, setQuery] = useQueryParams<FolderNavigationQuery>();\n\n  const currentFolderId = parseFolderIdFromQuery(query?.folder);\n\n  /**\n   * Asset search is global, so keeping `_q` after a folder navigation would show\n   * byte-identical results and make the navigation look broken. Clearing it here\n   * — rather than at each call site — means no caller can forget.\n   */\n  const navigateToFolder = useCallback(\n    (folder: Folder) => {\n      setQuery({ folder: String(folder.id), _q: undefined });\n    },\n    [setQuery]\n  );\n\n  /**\n   * Move to the Media Library root by removing the `folder` query param, and the\n   * search term with it. `setQuery(_, 'remove')` deletes the keys present on the\n   * first argument (values are ignored) in one navigation, so any other query\n   * state (pagination, the details drawer, etc.) is preserved.\n   */\n  const navigateToRoot = useCallback(() => {\n    setQuery({ folder: '', _q: '' }, 'remove');\n  }, [setQuery]);\n\n  /**\n   * Strips a `?folder=` value we can't parse.\n   */\n  const stripFolderParam = useCallback(() => {\n    setQuery({ folder: '' }, 'remove');\n  }, [setQuery]);\n\n  // Malformed ?folder= values (e.g. abc) parse as null; strip the param from the URL.\n  // Deleted/missing folders (404) are handled in AssetsPage — that needs a fetch.\n  useEffect(() => {\n    if (query?.folder && currentFolderId === null) {\n      stripFolderParam();\n    }\n  }, [query?.folder, currentFolderId, stripFolderParam]);\n\n  /**\n   * Convenience for the FolderTree sidebar: a single entry point that handles\n   * both \"go home\" and \"go to folder X\" without forcing the caller to know\n   * whether to call navigateToFolder or navigateToRoot.\n   */\n  const navigateToFolderId = useCallback(\n    (folderId: number | null) => {\n      if (folderId == null) {\n        navigateToRoot();\n      } else {\n        setQuery({ folder: String(folderId), _q: undefined });\n      }\n    },\n    [navigateToRoot, setQuery]\n  );\n\n  return {\n    currentFolderId,\n    navigateToFolder,\n    navigateToRoot,\n    navigateToFolderId,\n  };\n};\n"],"names":["parseFolderIdFromQuery","folder","id","Number","isFinite","useFolderNavigation","query","setQuery","useQueryParams","currentFolderId","navigateToFolder","useCallback","String","_q","undefined","navigateToRoot","stripFolderParam","useEffect","navigateToFolderId","folderId"],"mappings":";;;;;AAMA,MAAMA,yBAAyB,CAACC,MAAAA,GAAAA;AAC9B,IAAA,IAAI,CAACA,MAAAA,EAAQ;QACX,OAAO,IAAA;AACT,IAAA;AAEA,IAAA,MAAMC,KAAKC,MAAAA,CAAOF,MAAAA,CAAAA;AAElB,IAAA,OAAOE,MAAAA,CAAOC,QAAQ,CAACF,EAAAA,CAAAA,GAAMA,EAAAA,GAAK,IAAA;AACpC,CAAA;MAOaG,mBAAAA,GAAsB,IAAA;AACjC,IAAA,MAAM,CAAC,EAAEC,KAAK,EAAE,EAAEC,SAAS,GAAGC,0BAAAA,EAAAA;IAE9B,MAAMC,eAAAA,GAAkBT,uBAAuBM,KAAAA,EAAOL,MAAAA,CAAAA;AAEtD;;;;MAKA,MAAMS,gBAAAA,GAAmBC,iBAAAA,CACvB,CAACV,MAAAA,GAAAA;QACCM,QAAAA,CAAS;YAAEN,MAAAA,EAAQW,MAAAA,CAAOX,OAAOC,EAAE,CAAA;YAAGW,EAAAA,EAAIC;AAAU,SAAA,CAAA;IACtD,CAAA,EACA;AAACP,QAAAA;AAAS,KAAA,CAAA;AAGZ;;;;;MAMA,MAAMQ,iBAAiBJ,iBAAAA,CAAY,IAAA;QACjCJ,QAAAA,CAAS;YAAEN,MAAAA,EAAQ,EAAA;YAAIY,EAAAA,EAAI;SAAG,EAAG,QAAA,CAAA;IACnC,CAAA,EAAG;AAACN,QAAAA;AAAS,KAAA,CAAA;AAEb;;MAGA,MAAMS,mBAAmBL,iBAAAA,CAAY,IAAA;QACnCJ,QAAAA,CAAS;YAAEN,MAAAA,EAAQ;SAAG,EAAG,QAAA,CAAA;IAC3B,CAAA,EAAG;AAACM,QAAAA;AAAS,KAAA,CAAA;;;IAIbU,eAAAA,CAAU,IAAA;QACR,IAAIX,KAAAA,EAAOL,MAAAA,IAAUQ,eAAAA,KAAoB,IAAA,EAAM;AAC7CO,YAAAA,gBAAAA,EAAAA;AACF,QAAA;IACF,CAAA,EAAG;QAACV,KAAAA,EAAOL,MAAAA;AAAQQ,QAAAA,eAAAA;AAAiBO,QAAAA;AAAiB,KAAA,CAAA;AAErD;;;;MAKA,MAAME,kBAAAA,GAAqBP,iBAAAA,CACzB,CAACQ,QAAAA,GAAAA;AACC,QAAA,IAAIA,YAAY,IAAA,EAAM;AACpBJ,YAAAA,cAAAA,EAAAA;QACF,CAAA,MAAO;YACLR,QAAAA,CAAS;AAAEN,gBAAAA,MAAAA,EAAQW,MAAAA,CAAOO,QAAAA,CAAAA;gBAAWN,EAAAA,EAAIC;AAAU,aAAA,CAAA;AACrD,QAAA;IACF,CAAA,EACA;AAACC,QAAAA,cAAAA;AAAgBR,QAAAA;AAAS,KAAA,CAAA;IAG5B,OAAO;AACLE,QAAAA,eAAAA;AACAC,QAAAA,gBAAAA;AACAK,QAAAA,cAAAA;AACAG,QAAAA;AACF,KAAA;AACF;;;;"}
+{"version":3,"file":"useFolderNavigation.js","sources":["../../../../../../admin/src/future/pages/Assets/hooks/useFolderNavigation.ts"],"sourcesContent":["import { useCallback, useEffect } from 'react';\n\nimport { useQueryParams, withEncodedUserParams } from '@strapi/admin/strapi-admin';\n\nimport type { Folder } from '../../../../../../shared/contracts/folders';\n\nconst parseFolderIdFromQuery = (folder: string | undefined): number | null => {\n  if (!folder) {\n    return null;\n  }\n\n  const id = Number(folder);\n\n  return Number.isFinite(id) ? id : null;\n};\n\ninterface FolderNavigationQuery {\n  folder?: string;\n  _q?: string;\n}\n\nexport const useFolderNavigation = () => {\n  const [{ query }, setQuery] = useQueryParams<FolderNavigationQuery>();\n\n  const currentFolderId = parseFolderIdFromQuery(query?.folder);\n\n  /**\n   * Asset search is global, so keeping `_q` after a folder navigation would show\n   * byte-identical results and make the navigation look broken. Clearing it here\n   * — rather than at each call site — means no caller can forget.\n   */\n  const navigateToFolder = useCallback(\n    (folder: Folder) => {\n      setQuery({ folder: String(folder.id), _q: undefined });\n    },\n    [setQuery]\n  );\n\n  /**\n   * Move to the Media Library root by removing the `folder` query param, and the\n   * search term with it. `setQuery(_, 'remove')` deletes the keys present on the\n   * first argument (values are ignored) in one navigation, so any other query\n   * state (pagination, the details drawer, etc.) is preserved.\n   */\n  const navigateToRoot = useCallback(() => {\n    setQuery({ folder: '', _q: '' }, 'remove');\n  }, [setQuery]);\n\n  /**\n   * Strips a `?folder=` value we can't parse.\n   */\n  const stripFolderParam = useCallback(() => {\n    setQuery(withEncodedUserParams(query, { folder: undefined }));\n  }, [query, setQuery]);\n\n  // Malformed ?folder= values (e.g. abc) parse as null; strip the param from the URL.\n  // Deleted/missing folders (404) are handled in AssetsPage — that needs a fetch.\n  useEffect(() => {\n    if (query?.folder && currentFolderId === null) {\n      stripFolderParam();\n    }\n  }, [query?.folder, currentFolderId, stripFolderParam]);\n\n  /**\n   * Convenience for the FolderTree sidebar: a single entry point that handles\n   * both \"go home\" and \"go to folder X\" without forcing the caller to know\n   * whether to call navigateToFolder or navigateToRoot.\n   */\n  const navigateToFolderId = useCallback(\n    (folderId: number | null) => {\n      if (folderId == null) {\n        navigateToRoot();\n      } else {\n        setQuery({ folder: String(folderId), _q: undefined });\n      }\n    },\n    [navigateToRoot, setQuery]\n  );\n\n  return {\n    currentFolderId,\n    navigateToFolder,\n    navigateToRoot,\n    navigateToFolderId,\n  };\n};\n"],"names":["parseFolderIdFromQuery","folder","id","Number","isFinite","useFolderNavigation","query","setQuery","useQueryParams","currentFolderId","navigateToFolder","useCallback","String","_q","undefined","navigateToRoot","stripFolderParam","withEncodedUserParams","useEffect","navigateToFolderId","folderId"],"mappings":";;;;;AAMA,MAAMA,yBAAyB,CAACC,MAAAA,GAAAA;AAC9B,IAAA,IAAI,CAACA,MAAAA,EAAQ;QACX,OAAO,IAAA;AACT,IAAA;AAEA,IAAA,MAAMC,KAAKC,MAAAA,CAAOF,MAAAA,CAAAA;AAElB,IAAA,OAAOE,MAAAA,CAAOC,QAAQ,CAACF,EAAAA,CAAAA,GAAMA,EAAAA,GAAK,IAAA;AACpC,CAAA;MAOaG,mBAAAA,GAAsB,IAAA;AACjC,IAAA,MAAM,CAAC,EAAEC,KAAK,EAAE,EAAEC,SAAS,GAAGC,0BAAAA,EAAAA;IAE9B,MAAMC,eAAAA,GAAkBT,uBAAuBM,KAAAA,EAAOL,MAAAA,CAAAA;AAEtD;;;;MAKA,MAAMS,gBAAAA,GAAmBC,iBAAAA,CACvB,CAACV,MAAAA,GAAAA;QACCM,QAAAA,CAAS;YAAEN,MAAAA,EAAQW,MAAAA,CAAOX,OAAOC,EAAE,CAAA;YAAGW,EAAAA,EAAIC;AAAU,SAAA,CAAA;IACtD,CAAA,EACA;AAACP,QAAAA;AAAS,KAAA,CAAA;AAGZ;;;;;MAMA,MAAMQ,iBAAiBJ,iBAAAA,CAAY,IAAA;QACjCJ,QAAAA,CAAS;YAAEN,MAAAA,EAAQ,EAAA;YAAIY,EAAAA,EAAI;SAAG,EAAG,QAAA,CAAA;IACnC,CAAA,EAAG;AAACN,QAAAA;AAAS,KAAA,CAAA;AAEb;;MAGA,MAAMS,mBAAmBL,iBAAAA,CAAY,IAAA;AACnCJ,QAAAA,QAAAA,CAASU,kCAAsBX,KAAAA,EAAO;YAAEL,MAAAA,EAAQa;AAAU,SAAA,CAAA,CAAA;IAC5D,CAAA,EAAG;AAACR,QAAAA,KAAAA;AAAOC,QAAAA;AAAS,KAAA,CAAA;;;IAIpBW,eAAAA,CAAU,IAAA;QACR,IAAIZ,KAAAA,EAAOL,MAAAA,IAAUQ,eAAAA,KAAoB,IAAA,EAAM;AAC7CO,YAAAA,gBAAAA,EAAAA;AACF,QAAA;IACF,CAAA,EAAG;QAACV,KAAAA,EAAOL,MAAAA;AAAQQ,QAAAA,eAAAA;AAAiBO,QAAAA;AAAiB,KAAA,CAAA;AAErD;;;;MAKA,MAAMG,kBAAAA,GAAqBR,iBAAAA,CACzB,CAACS,QAAAA,GAAAA;AACC,QAAA,IAAIA,YAAY,IAAA,EAAM;AACpBL,YAAAA,cAAAA,EAAAA;QACF,CAAA,MAAO;YACLR,QAAAA,CAAS;AAAEN,gBAAAA,MAAAA,EAAQW,MAAAA,CAAOQ,QAAAA,CAAAA;gBAAWP,EAAAA,EAAIC;AAAU,aAAA,CAAA;AACrD,QAAA;IACF,CAAA,EACA;AAACC,QAAAA,cAAAA;AAAgBR,QAAAA;AAAS,KAAA,CAAA;IAG5B,OAAO;AACLE,QAAAA,eAAAA;AACAC,QAAAA,gBAAAA;AACAK,QAAAA,cAAAA;AACAI,QAAAA;AACF,KAAA;AACF;;;;"}

package/dist/admin/future/pages/Assets/hooks/useFolderNavigation.mjs

@@ -1,5 +1,5 @@
 import { useCallback, useEffect } from 'react';
-import { useQueryParams } from '@strapi/admin/strapi-admin';
+import { useQueryParams, withEncodedUserParams } from '@strapi/admin/strapi-admin';
 
 const parseFolderIdFromQuery = (folder)=>{
     if (!folder) {
@@ -39,10 +39,11 @@ const useFolderNavigation = ()=>{
     /**
    * Strips a `?folder=` value we can't parse.
    */ const stripFolderParam = useCallback(()=>{
-        setQuery({
-            folder: ''
-        }, 'remove');
+        setQuery(withEncodedUserParams(query, {
+            folder: undefined
+        }));
     }, [
+        query,
         setQuery
     ]);
     // Malformed ?folder= values (e.g. abc) parse as null; strip the param from the URL.

package/dist/admin/future/pages/Assets/hooks/useFolderNavigation.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useFolderNavigation.mjs","sources":["../../../../../../admin/src/future/pages/Assets/hooks/useFolderNavigation.ts"],"sourcesContent":["import { useCallback, useEffect } from 'react';\n\nimport { useQueryParams } from '@strapi/admin/strapi-admin';\n\nimport type { Folder } from '../../../../../../shared/contracts/folders';\n\nconst parseFolderIdFromQuery = (folder: string | undefined): number | null => {\n  if (!folder) {\n    return null;\n  }\n\n  const id = Number(folder);\n\n  return Number.isFinite(id) ? id : null;\n};\n\ninterface FolderNavigationQuery {\n  folder?: string;\n  _q?: string;\n}\n\nexport const useFolderNavigation = () => {\n  const [{ query }, setQuery] = useQueryParams<FolderNavigationQuery>();\n\n  const currentFolderId = parseFolderIdFromQuery(query?.folder);\n\n  /**\n   * Asset search is global, so keeping `_q` after a folder navigation would show\n   * byte-identical results and make the navigation look broken. Clearing it here\n   * — rather than at each call site — means no caller can forget.\n   */\n  const navigateToFolder = useCallback(\n    (folder: Folder) => {\n      setQuery({ folder: String(folder.id), _q: undefined });\n    },\n    [setQuery]\n  );\n\n  /**\n   * Move to the Media Library root by removing the `folder` query param, and the\n   * search term with it. `setQuery(_, 'remove')` deletes the keys present on the\n   * first argument (values are ignored) in one navigation, so any other query\n   * state (pagination, the details drawer, etc.) is preserved.\n   */\n  const navigateToRoot = useCallback(() => {\n    setQuery({ folder: '', _q: '' }, 'remove');\n  }, [setQuery]);\n\n  /**\n   * Strips a `?folder=` value we can't parse.\n   */\n  const stripFolderParam = useCallback(() => {\n    setQuery({ folder: '' }, 'remove');\n  }, [setQuery]);\n\n  // Malformed ?folder= values (e.g. abc) parse as null; strip the param from the URL.\n  // Deleted/missing folders (404) are handled in AssetsPage — that needs a fetch.\n  useEffect(() => {\n    if (query?.folder && currentFolderId === null) {\n      stripFolderParam();\n    }\n  }, [query?.folder, currentFolderId, stripFolderParam]);\n\n  /**\n   * Convenience for the FolderTree sidebar: a single entry point that handles\n   * both \"go home\" and \"go to folder X\" without forcing the caller to know\n   * whether to call navigateToFolder or navigateToRoot.\n   */\n  const navigateToFolderId = useCallback(\n    (folderId: number | null) => {\n      if (folderId == null) {\n        navigateToRoot();\n      } else {\n        setQuery({ folder: String(folderId), _q: undefined });\n      }\n    },\n    [navigateToRoot, setQuery]\n  );\n\n  return {\n    currentFolderId,\n    navigateToFolder,\n    navigateToRoot,\n    navigateToFolderId,\n  };\n};\n"],"names":["parseFolderIdFromQuery","folder","id","Number","isFinite","useFolderNavigation","query","setQuery","useQueryParams","currentFolderId","navigateToFolder","useCallback","String","_q","undefined","navigateToRoot","stripFolderParam","useEffect","navigateToFolderId","folderId"],"mappings":";;;AAMA,MAAMA,yBAAyB,CAACC,MAAAA,GAAAA;AAC9B,IAAA,IAAI,CAACA,MAAAA,EAAQ;QACX,OAAO,IAAA;AACT,IAAA;AAEA,IAAA,MAAMC,KAAKC,MAAAA,CAAOF,MAAAA,CAAAA;AAElB,IAAA,OAAOE,MAAAA,CAAOC,QAAQ,CAACF,EAAAA,CAAAA,GAAMA,EAAAA,GAAK,IAAA;AACpC,CAAA;MAOaG,mBAAAA,GAAsB,IAAA;AACjC,IAAA,MAAM,CAAC,EAAEC,KAAK,EAAE,EAAEC,SAAS,GAAGC,cAAAA,EAAAA;IAE9B,MAAMC,eAAAA,GAAkBT,uBAAuBM,KAAAA,EAAOL,MAAAA,CAAAA;AAEtD;;;;MAKA,MAAMS,gBAAAA,GAAmBC,WAAAA,CACvB,CAACV,MAAAA,GAAAA;QACCM,QAAAA,CAAS;YAAEN,MAAAA,EAAQW,MAAAA,CAAOX,OAAOC,EAAE,CAAA;YAAGW,EAAAA,EAAIC;AAAU,SAAA,CAAA;IACtD,CAAA,EACA;AAACP,QAAAA;AAAS,KAAA,CAAA;AAGZ;;;;;MAMA,MAAMQ,iBAAiBJ,WAAAA,CAAY,IAAA;QACjCJ,QAAAA,CAAS;YAAEN,MAAAA,EAAQ,EAAA;YAAIY,EAAAA,EAAI;SAAG,EAAG,QAAA,CAAA;IACnC,CAAA,EAAG;AAACN,QAAAA;AAAS,KAAA,CAAA;AAEb;;MAGA,MAAMS,mBAAmBL,WAAAA,CAAY,IAAA;QACnCJ,QAAAA,CAAS;YAAEN,MAAAA,EAAQ;SAAG,EAAG,QAAA,CAAA;IAC3B,CAAA,EAAG;AAACM,QAAAA;AAAS,KAAA,CAAA;;;IAIbU,SAAAA,CAAU,IAAA;QACR,IAAIX,KAAAA,EAAOL,MAAAA,IAAUQ,eAAAA,KAAoB,IAAA,EAAM;AAC7CO,YAAAA,gBAAAA,EAAAA;AACF,QAAA;IACF,CAAA,EAAG;QAACV,KAAAA,EAAOL,MAAAA;AAAQQ,QAAAA,eAAAA;AAAiBO,QAAAA;AAAiB,KAAA,CAAA;AAErD;;;;MAKA,MAAME,kBAAAA,GAAqBP,WAAAA,CACzB,CAACQ,QAAAA,GAAAA;AACC,QAAA,IAAIA,YAAY,IAAA,EAAM;AACpBJ,YAAAA,cAAAA,EAAAA;QACF,CAAA,MAAO;YACLR,QAAAA,CAAS;AAAEN,gBAAAA,MAAAA,EAAQW,MAAAA,CAAOO,QAAAA,CAAAA;gBAAWN,EAAAA,EAAIC;AAAU,aAAA,CAAA;AACrD,QAAA;IACF,CAAA,EACA;AAACC,QAAAA,cAAAA;AAAgBR,QAAAA;AAAS,KAAA,CAAA;IAG5B,OAAO;AACLE,QAAAA,eAAAA;AACAC,QAAAA,gBAAAA;AACAK,QAAAA,cAAAA;AACAG,QAAAA;AACF,KAAA;AACF;;;;"}
+{"version":3,"file":"useFolderNavigation.mjs","sources":["../../../../../../admin/src/future/pages/Assets/hooks/useFolderNavigation.ts"],"sourcesContent":["import { useCallback, useEffect } from 'react';\n\nimport { useQueryParams, withEncodedUserParams } from '@strapi/admin/strapi-admin';\n\nimport type { Folder } from '../../../../../../shared/contracts/folders';\n\nconst parseFolderIdFromQuery = (folder: string | undefined): number | null => {\n  if (!folder) {\n    return null;\n  }\n\n  const id = Number(folder);\n\n  return Number.isFinite(id) ? id : null;\n};\n\ninterface FolderNavigationQuery {\n  folder?: string;\n  _q?: string;\n}\n\nexport const useFolderNavigation = () => {\n  const [{ query }, setQuery] = useQueryParams<FolderNavigationQuery>();\n\n  const currentFolderId = parseFolderIdFromQuery(query?.folder);\n\n  /**\n   * Asset search is global, so keeping `_q` after a folder navigation would show\n   * byte-identical results and make the navigation look broken. Clearing it here\n   * — rather than at each call site — means no caller can forget.\n   */\n  const navigateToFolder = useCallback(\n    (folder: Folder) => {\n      setQuery({ folder: String(folder.id), _q: undefined });\n    },\n    [setQuery]\n  );\n\n  /**\n   * Move to the Media Library root by removing the `folder` query param, and the\n   * search term with it. `setQuery(_, 'remove')` deletes the keys present on the\n   * first argument (values are ignored) in one navigation, so any other query\n   * state (pagination, the details drawer, etc.) is preserved.\n   */\n  const navigateToRoot = useCallback(() => {\n    setQuery({ folder: '', _q: '' }, 'remove');\n  }, [setQuery]);\n\n  /**\n   * Strips a `?folder=` value we can't parse.\n   */\n  const stripFolderParam = useCallback(() => {\n    setQuery(withEncodedUserParams(query, { folder: undefined }));\n  }, [query, setQuery]);\n\n  // Malformed ?folder= values (e.g. abc) parse as null; strip the param from the URL.\n  // Deleted/missing folders (404) are handled in AssetsPage — that needs a fetch.\n  useEffect(() => {\n    if (query?.folder && currentFolderId === null) {\n      stripFolderParam();\n    }\n  }, [query?.folder, currentFolderId, stripFolderParam]);\n\n  /**\n   * Convenience for the FolderTree sidebar: a single entry point that handles\n   * both \"go home\" and \"go to folder X\" without forcing the caller to know\n   * whether to call navigateToFolder or navigateToRoot.\n   */\n  const navigateToFolderId = useCallback(\n    (folderId: number | null) => {\n      if (folderId == null) {\n        navigateToRoot();\n      } else {\n        setQuery({ folder: String(folderId), _q: undefined });\n      }\n    },\n    [navigateToRoot, setQuery]\n  );\n\n  return {\n    currentFolderId,\n    navigateToFolder,\n    navigateToRoot,\n    navigateToFolderId,\n  };\n};\n"],"names":["parseFolderIdFromQuery","folder","id","Number","isFinite","useFolderNavigation","query","setQuery","useQueryParams","currentFolderId","navigateToFolder","useCallback","String","_q","undefined","navigateToRoot","stripFolderParam","withEncodedUserParams","useEffect","navigateToFolderId","folderId"],"mappings":";;;AAMA,MAAMA,yBAAyB,CAACC,MAAAA,GAAAA;AAC9B,IAAA,IAAI,CAACA,MAAAA,EAAQ;QACX,OAAO,IAAA;AACT,IAAA;AAEA,IAAA,MAAMC,KAAKC,MAAAA,CAAOF,MAAAA,CAAAA;AAElB,IAAA,OAAOE,MAAAA,CAAOC,QAAQ,CAACF,EAAAA,CAAAA,GAAMA,EAAAA,GAAK,IAAA;AACpC,CAAA;MAOaG,mBAAAA,GAAsB,IAAA;AACjC,IAAA,MAAM,CAAC,EAAEC,KAAK,EAAE,EAAEC,SAAS,GAAGC,cAAAA,EAAAA;IAE9B,MAAMC,eAAAA,GAAkBT,uBAAuBM,KAAAA,EAAOL,MAAAA,CAAAA;AAEtD;;;;MAKA,MAAMS,gBAAAA,GAAmBC,WAAAA,CACvB,CAACV,MAAAA,GAAAA;QACCM,QAAAA,CAAS;YAAEN,MAAAA,EAAQW,MAAAA,CAAOX,OAAOC,EAAE,CAAA;YAAGW,EAAAA,EAAIC;AAAU,SAAA,CAAA;IACtD,CAAA,EACA;AAACP,QAAAA;AAAS,KAAA,CAAA;AAGZ;;;;;MAMA,MAAMQ,iBAAiBJ,WAAAA,CAAY,IAAA;QACjCJ,QAAAA,CAAS;YAAEN,MAAAA,EAAQ,EAAA;YAAIY,EAAAA,EAAI;SAAG,EAAG,QAAA,CAAA;IACnC,CAAA,EAAG;AAACN,QAAAA;AAAS,KAAA,CAAA;AAEb;;MAGA,MAAMS,mBAAmBL,WAAAA,CAAY,IAAA;AACnCJ,QAAAA,QAAAA,CAASU,sBAAsBX,KAAAA,EAAO;YAAEL,MAAAA,EAAQa;AAAU,SAAA,CAAA,CAAA;IAC5D,CAAA,EAAG;AAACR,QAAAA,KAAAA;AAAOC,QAAAA;AAAS,KAAA,CAAA;;;IAIpBW,SAAAA,CAAU,IAAA;QACR,IAAIZ,KAAAA,EAAOL,MAAAA,IAAUQ,eAAAA,KAAoB,IAAA,EAAM;AAC7CO,YAAAA,gBAAAA,EAAAA;AACF,QAAA;IACF,CAAA,EAAG;QAACV,KAAAA,EAAOL,MAAAA;AAAQQ,QAAAA,eAAAA;AAAiBO,QAAAA;AAAiB,KAAA,CAAA;AAErD;;;;MAKA,MAAMG,kBAAAA,GAAqBR,WAAAA,CACzB,CAACS,QAAAA,GAAAA;AACC,QAAA,IAAIA,YAAY,IAAA,EAAM;AACpBL,YAAAA,cAAAA,EAAAA;QACF,CAAA,MAAO;YACLR,QAAAA,CAAS;AAAEN,gBAAAA,MAAAA,EAAQW,MAAAA,CAAOQ,QAAAA,CAAAA;gBAAWP,EAAAA,EAAIC;AAAU,aAAA,CAAA;AACrD,QAAA;IACF,CAAA,EACA;AAACC,QAAAA,cAAAA;AAAgBR,QAAAA;AAAS,KAAA,CAAA;IAG5B,OAAO;AACLE,QAAAA,eAAAA;AACAC,QAAAA,gBAAAA;AACAK,QAAAA,cAAAA;AACAI,QAAAA;AACF,KAAA;AACF;;;;"}

package/dist/admin/future/pages/Assets/hooks/useInfiniteAssets.js

@@ -4,8 +4,15 @@ var React = require('react');
 var reactRedux = require('react-redux');
 var api = require('../../../services/api.js');
 var assets = require('../../../services/assets.js');
+var hooks = require('../../../store/hooks.js');
+var uploadProgress = require('../../../store/uploadProgress.js');
+var getRelationId = require('../../../utils/getRelationId.js');
+var mergeUploadedAssets = require('../utils/mergeUploadedAssets.js');
 
 const PAGE_SIZE = 20;
+/**
+ * How many list views keep their loaded pages in memory.
+ */ const MAX_REMEMBERED_LISTS = 10;
 /**
  * Concatenates the pages in ascending order, one entry per asset id.
  *
@@ -23,6 +30,10 @@ const PAGE_SIZE = 20;
         ...byId.values()
     ];
 };
+/**
+ * The highest page an accumulator holds — where the list was last read to, and
+ * so where to resume from on the way back.
+ */ const deepestPage = (pages)=>Object.keys(pages).reduce((deepest, key)=>Math.max(deepest, Number(key)), 1);
 /**
  * Keeps one earlier page's `getAssets` query subscribed and reports its results
  * back up whenever they change.
@@ -60,6 +71,10 @@ const PAGE_SIZE = 20;
  * The caller MUST render the returned `subscribers` node — that is what keeps
  * every loaded page subscribed, so `{Asset, LIST}` invalidations keep the whole
  * list consistent rather than only the current page.
+ *
+ * Loaded pages survive navigating away and back: each list's accumulator is
+ * remembered (LRU, `MAX_REMEMBERED_LISTS`) and restored when its key returns, so
+ * stepping into a subfolder and back out keeps the rows the user scrolled for.
  */ const useInfiniteAssets = ({ folder = null, sort, search, filters, enabled = true } = {})=>{
     // Derived from the request args themselves, so a new filter can't reach the
     // API without also invalidating what was accumulated under the old one.
@@ -90,17 +105,32 @@ const PAGE_SIZE = 20;
         listKey,
         pages: {}
     });
-    // Derived rather than read straight from state: the render that discovers
-    // the key change still reaches the query below, and a list with no page 1
-    // must never be requested at page 2.
-    const page = pageState.queryKey === queryKey ? pageState.page : 1;
-    if (pageState.queryKey !== queryKey) {
+    // Each list's loaded pages, kept across navigation away from it.
+    const memoryRef = React.useRef(new Map());
+    const isNewList = pageState.queryKey !== queryKey;
+    const remembered = isNewList ? memoryRef.current.get(queryKey) : undefined;
+    // Derived rather than read from state: the render that discovers the key
+    // change still reaches the query below, and a list with no page 1 must never
+    // be requested at page 2. A remembered list always holds page 1, so resuming
+    // at its deepest page can't skip one.
+    let page;
+    if (!isNewList) {
+        page = pageState.page;
+    } else if (remembered) {
+        page = deepestPage(remembered.pages);
+    } else {
+        page = 1;
+    }
+    if (isNewList) {
         setPageState({
             queryKey,
-            page: 1
+            page
         });
+        if (remembered) {
+            setAccumulated(remembered);
+        }
     }
-    const { currentData, isLoading, isFetching, error } = assets.useGetAssetsQuery({
+    const { currentData, isLoading, isFetching, error, startedTimeStamp, fulfilledTimeStamp } = assets.useGetAssetsQuery({
         ...queryArgs,
         page,
         pageSize: PAGE_SIZE
@@ -111,7 +141,8 @@ const PAGE_SIZE = 20;
     // `currentData` is only ever the payload for the args just passed, so it
     // belongs to this key at this page — nothing to infer. Its reference is
     // stable per cache entry, so this settles after one extra render.
-    if (currentData && (!isSameQuery || accumulated.pages[page] !== currentData.results)) {
+    if (// A restore already set the accumulator from memory; don't overwrite it.
+    !remembered && currentData && (!isSameQuery || accumulated.pages[page] !== currentData.results)) {
         setAccumulated(isSameQuery ? {
             ...accumulated,
             pages: {
@@ -159,6 +190,29 @@ const PAGE_SIZE = 20;
             page: earlierPage,
             onRefreshed: handlePageRefreshed
         })));
+    // Remember what this list has read, so leaving it isn't forgetting it. Filed
+    // under `accumulated.queryKey`, not the live `queryKey`: the accumulator names
+    // the list it belongs to, so an entry still describing the list being left
+    // can't be misfiled under the one being entered.
+    React.useEffect(()=>{
+        if (Object.keys(accumulated.pages).length === 0) {
+            return;
+        }
+        const memory = memoryRef.current;
+        // Delete before set so the entry moves to the end. Map iterates in
+        // insertion order, so the first key is the least recently used.
+        memory.delete(accumulated.queryKey);
+        memory.set(accumulated.queryKey, accumulated);
+        while(memory.size > MAX_REMEMBERED_LISTS){
+            const oldest = memory.keys().next();
+            if (oldest.done) {
+                break;
+            }
+            memory.delete(oldest.value);
+        }
+    }, [
+        accumulated
+    ]);
     // Drop the left folder's cached `getAssets` pages when the folder changes.
     //
     // RTK Query 1.9.7 leaves a query's store subscription in place when its last
@@ -168,8 +222,9 @@ const PAGE_SIZE = 20;
     // next `{Asset, LIST}` invalidation (an upload in the new folder) refetch the
     // *previous* folder's pages: one bogus `/upload/files` request per loaded
     // page. There is no public per-entry unsubscribe, so evict the left folder's
-    // entries outright — returning reloads from page 1, which the accumulator
-    // already does on a list change.
+    // entries outright. Returning then re-reads every page it had loaded, but the
+    // rows come straight back from the accumulator memory above — so those
+    // requests refresh a list already on screen rather than being waited on.
     const dispatch = reactRedux.useDispatch();
     const store = reactRedux.useStore();
     const prevFolderRef = React.useRef(folder);
@@ -206,14 +261,52 @@ const PAGE_SIZE = 20;
     // previous folder. Reported as loading so the page shows a spinner instead
     // of the outgoing folder's assets under the incoming folder's header.
     const isChangingList = accumulated.listKey !== listKey;
-    const assets$1 = React.useMemo(()=>isChangingList ? [] : flattenPages(accumulated.pages), [
+    const loadedAssets = React.useMemo(()=>isChangingList ? [] : flattenPages(accumulated.pages), [
         isChangingList,
         accumulated.pages
     ]);
     // Deliberately the live value, not the stale-tolerant one below: paging must
     // never be driven by a total that belongs to the previous query.
     const hasNextPage = currentData ? page < currentData.pagination.pageCount : false;
+    const completedUploads = hooks.useTypedSelector(uploadProgress.selectCompletedUploads);
+    // Only an unfiltered, unsearched list can place an upload locally: deciding
+    // whether an asset satisfies a filter means reimplementing the server's
+    // filter semantics client-side. Filtered views still refresh on the
+    // end-of-batch invalidation, as they did before.
+    const canPlaceUploads = !search && (filters?.length ?? 0) === 0;
+    // When the loaded data came back from a request that started after a given
+    // upload — i.e. the server had already stored it when asked. Past that point
+    // the list is the authority on whether the asset is there at all, so bridging
+    // must stop: otherwise a later delete or move, which refetches without it,
+    // would have it re-inserted.
+    const listAnsweredAfter = fulfilledTimeStamp !== undefined && startedTimeStamp !== undefined && // A refetch in flight leaves `fulfilledTimeStamp` on the previous response,
+    // which predates this request — so only settled data counts.
+    fulfilledTimeStamp > startedTimeStamp ? startedTimeStamp : undefined;
+    const assets$1 = React.useMemo(()=>{
+        if (!canPlaceUploads || completedUploads.length === 0) {
+            return loadedAssets;
+        }
+        const bridging = completedUploads.filter(({ asset, completedAt })=>getRelationId.getRelationId(asset.folder) === folder && (listAnsweredAfter === undefined || completedAt > listAnsweredAfter));
+        return mergeUploadedAssets.mergeUploadedAssets({
+            assets: loadedAssets,
+            uploaded: bridging.map(({ asset })=>asset),
+            sort,
+            hasNextPage
+        });
+    }, [
+        canPlaceUploads,
+        completedUploads,
+        loadedAssets,
+        folder,
+        sort,
+        hasNextPage,
+        listAnsweredAfter
+    ]);
     const isFetchingMore = isFetching && page > 1;
+    // A restored list already has rows on screen, so re-reading its current page
+    // is a background refresh — reporting it as loading would swap those rows for
+    // a spinner. Only an empty list has nothing better to show.
+    const isLoadingList = isChangingList || isLoading && assets$1.length === 0;
     const fetchNextPage = React.useCallback(()=>{
         setPageState((prev)=>({
                 queryKey,
@@ -241,7 +334,7 @@ const PAGE_SIZE = 20;
         // Falls back to the accumulated total so a consumer showing the count
         // doesn't flash zero mid-transition, matching the possibly stale `assets`.
         pagination: currentData?.pagination ?? accumulated.pagination,
-        isLoading: isLoading || isChangingList,
+        isLoading: isLoadingList,
         isFetchingMore,
         hasNextPage,
         fetchNextPage,