@strapi/upload 5.59.0 → 5.61.0

package/dist/admin/pages/Assets/components/AssetsSearchInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"AssetsSearchInput.js","sources":["../../../../../admin/src/pages/Assets/components/AssetsSearchInput.tsx"],"sourcesContent":["import { useEffect, useRef, useState, type ChangeEvent, type FormEvent } from 'react';\n\nimport { useDebounce, useIsMobile, useQueryParams } from '@strapi/admin/strapi-admin';\nimport { Box, Searchbar, SearchForm } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { useTracking, MEDIA_LIBRARY_LOCATION } from '../../../hooks/useTracking';\nimport { getTranslationKey } from '../../../utils/translations';\nimport { useAssetSearch } from '../hooks/useAssetSearch';\n\nconst DEBOUNCE_MS = 300;\n\n// The DS Searchbar nests two bordered boxes: its own shell (neutral150) wrapping\n// the field (neutral200). Side by side they read as a single 2px, two-tone\n// border, which sits oddly next to the 1px neutral200 on the Filter button in the\n// same toolbar. Dropping the shell's border leaves the field's own — same width\n// and colour as the button — and costs nothing, since the focus ring lives on the\n// field too.\nconst StyledSearchForm = styled(SearchForm)`\n  > div {\n    border: none;\n  }\n`;\n\n/**\n * Keyword search over the whole Media Library. Owns the typing state and the\n * debounce; `useAssetSearch` owns the `?_q=` URL param.\n */\nexport const AssetsSearchInput = () => {\n  const { formatMessage } = useIntl();\n  const { searchQuery, setSearchQuery } = useAssetSearch();\n  const { trackUsage } = useTracking();\n  const isMobile = useIsMobile();\n\n  const [value, setValue] = useState(searchQuery);\n  const debouncedValue = useDebounce(value, DEBOUNCE_MS);\n\n  // Tracks the last value the URL and the input agreed on. Without it the two\n  // effects below would ping-pong: each would see the other's write as a change\n  // worth reacting to.\n  const lastCommittedRef = useRef(searchQuery);\n\n  // Read directly rather than through `useFolderNavigation`, which strips\n  // malformed `?folder=` values as a side effect.\n  const [{ query }] = useQueryParams<{ folder?: string }>();\n  const folderParam = query?.folder ?? '';\n  const lastFolderRef = useRef(folderParam);\n\n  // Commit settled input to the URL.\n  useEffect(() => {\n    if (debouncedValue === lastCommittedRef.current) {\n      return;\n    }\n\n    lastCommittedRef.current = debouncedValue;\n    // Only a real query counts as a search — clearing the box (empty value) is\n    // a reset, not a `didSearch`.\n    if (debouncedValue) {\n      trackUsage('didSearchMediaLibraryElements', { location: MEDIA_LIBRARY_LOCATION });\n    }\n    setSearchQuery(debouncedValue);\n  }, [debouncedValue, setSearchQuery, trackUsage]);\n\n  // Re-sync on external changes — back/forward, or \"Clear search\" in the empty\n  // state.\n  useEffect(() => {\n    if (searchQuery === lastCommittedRef.current) {\n      return;\n    }\n\n    lastCommittedRef.current = searchQuery;\n    setValue(searchQuery);\n  }, [searchQuery]);\n\n  // A folder navigation clears `_q`, but a term typed and never committed lives\n  // only in the debounce — without this it lands afterwards and reactivates the\n  // global search. `_q` alone can't see it: it was never non-empty.\n  useEffect(() => {\n    if (folderParam === lastFolderRef.current) {\n      return;\n    }\n\n    lastFolderRef.current = folderParam;\n    lastCommittedRef.current = searchQuery;\n    setValue(searchQuery);\n  }, [folderParam, searchQuery]);\n\n  const searchForm = (\n    <StyledSearchForm onSubmit={(event: FormEvent<HTMLFormElement>) => event.preventDefault()}>\n      <Searchbar\n        name=\"search-assets\"\n        value={value}\n        onChange={(event: ChangeEvent<HTMLInputElement>) => setValue(event.target.value)}\n        onClear={() => setValue('')}\n        clearLabel={formatMessage({ id: 'clearLabel', defaultMessage: 'Clear' })}\n        placeholder={formatMessage({\n          id: getTranslationKey('header.search.placeholder'),\n          defaultMessage: 'Search',\n        })}\n        size=\"S\"\n      >\n        {formatMessage({\n          id: getTranslationKey('search.label'),\n          defaultMessage: 'Search for an asset',\n        })}\n      </Searchbar>\n    </StyledSearchForm>\n  );\n\n  // Mobile: fills the toolbar row (own line). Desktop: keeps its intrinsic size,\n  // with empty space between it and the right-aligned Sort/Toggle group.\n  if (isMobile) {\n    return <Box width=\"100%\">{searchForm}</Box>;\n  }\n\n  return searchForm;\n};\n"],"names":["DEBOUNCE_MS","StyledSearchForm","styled","SearchForm","AssetsSearchInput","formatMessage","useIntl","searchQuery","setSearchQuery","useAssetSearch","trackUsage","useTracking","isMobile","useIsMobile","value","setValue","useState","debouncedValue","useDebounce","lastCommittedRef","useRef","query","useQueryParams","folderParam","folder","lastFolderRef","useEffect","current","location","MEDIA_LIBRARY_LOCATION","searchForm","_jsx","onSubmit","event","preventDefault","Searchbar","name","onChange","target","onClear","clearLabel","id","defaultMessage","placeholder","getTranslationKey","size","Box","width"],"mappings":"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"}
+{"version":3,"file":"AssetsSearchInput.js","sources":["../../../../../admin/src/pages/Assets/components/AssetsSearchInput.tsx"],"sourcesContent":["import {\n  useEffect,\n  useRef,\n  useState,\n  type ChangeEvent,\n  type FocusEvent,\n  type FormEvent,\n} from 'react';\n\nimport { useDebounce, useIsMobile } from '@strapi/admin/strapi-admin';\nimport { Box, IconButton, Searchbar, SearchForm } from '@strapi/design-system';\nimport { Search as SearchIcon } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { useTracking, MEDIA_LIBRARY_LOCATION } from '../../../hooks/useTracking';\nimport { getTranslationKey } from '../../../utils/translations';\nimport { useAssetSearch } from '../hooks/useAssetSearch';\nimport { useListQueryParams } from '../hooks/useListQueryParams';\n\nconst DEBOUNCE_MS = 300;\n\n// The DS Searchbar nests two bordered boxes: its own shell (neutral150) wrapping\n// the field (neutral200). Side by side they read as a single 2px, two-tone\n// border, which sits oddly next to the 1px neutral200 on the Filter button in the\n// same toolbar. Dropping the shell's border leaves the field's own — same width\n// and colour as the button — and costs nothing, since the focus ring lives on the\n// field too.\nconst StyledSearchForm = styled(SearchForm)`\n  > div {\n    border: none;\n  }\n`;\n\ninterface AssetsSearchInputProps {\n  /**\n   * Starts as an icon button that opens the field, which folds back once it\n   * loses focus empty, like the admin's own `SearchInput` in list views. Used\n   * where the toolbar is narrow (the Content Manager asset picker). Mobile\n   * always shows the field.\n   */\n  collapsible?: boolean;\n}\n\n/**\n * Keyword search over the whole Media Library. Owns the typing state and the\n * debounce; `useAssetSearch` owns the `?_q=` URL param.\n */\nexport const AssetsSearchInput = ({ collapsible = false }: AssetsSearchInputProps) => {\n  const { formatMessage } = useIntl();\n  const { searchQuery, setSearchQuery } = useAssetSearch();\n  const { trackUsage } = useTracking();\n  const isMobile = useIsMobile();\n\n  const [value, setValue] = useState(searchQuery);\n  const debouncedValue = useDebounce(value, DEBOUNCE_MS);\n\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [isExpanded, setIsExpanded] = useState(false);\n  // A term keeps the field open: folding it would hide an active search.\n  const isCollapsed = collapsible && !isMobile && !isExpanded && value === '';\n\n  // Only after the button opened it: a field shown on mount must not take focus.\n  useEffect(() => {\n    if (isExpanded) {\n      inputRef.current?.focus();\n    }\n  }, [isExpanded]);\n\n  // Emptied from elsewhere (a folder opened, the empty state's \"Clear search\")\n  // after the field was left with a term in it: the blur already happened, so\n  // fold it here. Not while it has focus: that is the user clearing it to type.\n  useEffect(() => {\n    if (value === '' && document.activeElement !== inputRef.current) {\n      setIsExpanded(false);\n    }\n  }, [value]);\n\n  const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n    if (event.currentTarget.value === '') {\n      setIsExpanded(false);\n    }\n  };\n\n  // Tracks the last value the URL and the input agreed on. Without it the two\n  // effects below would ping-pong: each would see the other's write as a change\n  // worth reacting to.\n  const lastCommittedRef = useRef(searchQuery);\n\n  // Read directly rather than through `useFolderNavigation`, which strips\n  // malformed `?folder=` values as a side effect.\n  const [{ query }] = useListQueryParams<{ folder?: string }>();\n  const folderParam = query?.folder ?? '';\n  const lastFolderRef = useRef(folderParam);\n\n  // Commit settled input to the URL.\n  useEffect(() => {\n    if (debouncedValue === lastCommittedRef.current) {\n      return;\n    }\n\n    lastCommittedRef.current = debouncedValue;\n    // Only a real query counts as a search — clearing the box (empty value) is\n    // a reset, not a `didSearch`.\n    if (debouncedValue) {\n      trackUsage('didSearchMediaLibraryElements', { location: MEDIA_LIBRARY_LOCATION });\n    }\n    setSearchQuery(debouncedValue);\n  }, [debouncedValue, setSearchQuery, trackUsage]);\n\n  // Re-sync on external changes — back/forward, or \"Clear search\" in the empty\n  // state.\n  useEffect(() => {\n    if (searchQuery === lastCommittedRef.current) {\n      return;\n    }\n\n    lastCommittedRef.current = searchQuery;\n    setValue(searchQuery);\n  }, [searchQuery]);\n\n  // A folder navigation clears `_q`, but a term typed and never committed lives\n  // only in the debounce — without this it lands afterwards and reactivates the\n  // global search. `_q` alone can't see it: it was never non-empty.\n  useEffect(() => {\n    if (folderParam === lastFolderRef.current) {\n      return;\n    }\n\n    lastFolderRef.current = folderParam;\n    lastCommittedRef.current = searchQuery;\n    setValue(searchQuery);\n  }, [folderParam, searchQuery]);\n\n  const searchForm = (\n    <StyledSearchForm onSubmit={(event: FormEvent<HTMLFormElement>) => event.preventDefault()}>\n      <Searchbar\n        ref={inputRef}\n        name=\"search-assets\"\n        value={value}\n        onChange={(event: ChangeEvent<HTMLInputElement>) => setValue(event.target.value)}\n        onClear={() => setValue('')}\n        clearLabel={formatMessage({ id: 'clearLabel', defaultMessage: 'Clear' })}\n        placeholder={formatMessage({\n          id: getTranslationKey('header.search.placeholder'),\n          defaultMessage: 'Search',\n        })}\n        size=\"S\"\n        onBlur={collapsible ? handleBlur : undefined}\n      >\n        {formatMessage({\n          id: getTranslationKey('search.label'),\n          defaultMessage: 'Search for an asset',\n        })}\n      </Searchbar>\n    </StyledSearchForm>\n  );\n\n  if (isCollapsed) {\n    return (\n      <IconButton\n        label={formatMessage({ id: 'global.search', defaultMessage: 'Search' })}\n        onClick={() => setIsExpanded(true)}\n      >\n        <SearchIcon />\n      </IconButton>\n    );\n  }\n\n  // Mobile: fills the toolbar row (own line). Desktop: keeps its intrinsic size,\n  // with empty space between it and the right-aligned Sort/Toggle group.\n  if (isMobile) {\n    return <Box width=\"100%\">{searchForm}</Box>;\n  }\n\n  return searchForm;\n};\n"],"names":["DEBOUNCE_MS","StyledSearchForm","styled","SearchForm","AssetsSearchInput","collapsible","formatMessage","useIntl","searchQuery","setSearchQuery","useAssetSearch","trackUsage","useTracking","isMobile","useIsMobile","value","setValue","useState","debouncedValue","useDebounce","inputRef","useRef","isExpanded","setIsExpanded","isCollapsed","useEffect","current","focus","document","activeElement","handleBlur","event","currentTarget","lastCommittedRef","query","useListQueryParams","folderParam","folder","lastFolderRef","location","MEDIA_LIBRARY_LOCATION","searchForm","_jsx","onSubmit","preventDefault","Searchbar","ref","name","onChange","target","onClear","clearLabel","id","defaultMessage","placeholder","getTranslationKey","size","onBlur","undefined","IconButton","label","onClick","SearchIcon","Box","width"],"mappings":"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"}

package/dist/admin/pages/Assets/components/AssetsSearchInput.mjs

@@ -1,12 +1,14 @@
 import { jsx } from 'react/jsx-runtime';
 import { useState, useRef, useEffect } from 'react';
-import { useIsMobile, useDebounce, useQueryParams } from '@strapi/admin/strapi-admin';
-import { Searchbar, Box, SearchForm } from '@strapi/design-system';
+import { useIsMobile, useDebounce } from '@strapi/admin/strapi-admin';
+import { SearchForm, Searchbar, IconButton, Box } from '@strapi/design-system';
+import { Search } from '@strapi/icons';
 import { useIntl } from 'react-intl';
 import { styled } from 'styled-components';
 import { useTracking, MEDIA_LIBRARY_LOCATION } from '../../../hooks/useTracking.mjs';
 import { getTranslationKey } from '../../../utils/translations.mjs';
 import { useAssetSearch } from '../hooks/useAssetSearch.mjs';
+import { useListQueryParams } from '../hooks/useListQueryParams.mjs';
 
 const DEBOUNCE_MS = 300;
 // The DS Searchbar nests two bordered boxes: its own shell (neutral150) wrapping
@@ -23,20 +25,47 @@ const StyledSearchForm = styled(SearchForm)`
 /**
  * Keyword search over the whole Media Library. Owns the typing state and the
  * debounce; `useAssetSearch` owns the `?_q=` URL param.
- */ const AssetsSearchInput = ()=>{
+ */ const AssetsSearchInput = ({ collapsible = false })=>{
     const { formatMessage } = useIntl();
     const { searchQuery, setSearchQuery } = useAssetSearch();
     const { trackUsage } = useTracking();
     const isMobile = useIsMobile();
     const [value, setValue] = useState(searchQuery);
     const debouncedValue = useDebounce(value, DEBOUNCE_MS);
+    const inputRef = useRef(null);
+    const [isExpanded, setIsExpanded] = useState(false);
+    // A term keeps the field open: folding it would hide an active search.
+    const isCollapsed = collapsible && !isMobile && !isExpanded && value === '';
+    // Only after the button opened it: a field shown on mount must not take focus.
+    useEffect(()=>{
+        if (isExpanded) {
+            inputRef.current?.focus();
+        }
+    }, [
+        isExpanded
+    ]);
+    // Emptied from elsewhere (a folder opened, the empty state's "Clear search")
+    // after the field was left with a term in it: the blur already happened, so
+    // fold it here. Not while it has focus: that is the user clearing it to type.
+    useEffect(()=>{
+        if (value === '' && document.activeElement !== inputRef.current) {
+            setIsExpanded(false);
+        }
+    }, [
+        value
+    ]);
+    const handleBlur = (event)=>{
+        if (event.currentTarget.value === '') {
+            setIsExpanded(false);
+        }
+    };
     // Tracks the last value the URL and the input agreed on. Without it the two
     // effects below would ping-pong: each would see the other's write as a change
     // worth reacting to.
     const lastCommittedRef = useRef(searchQuery);
     // Read directly rather than through `useFolderNavigation`, which strips
     // malformed `?folder=` values as a side effect.
-    const [{ query }] = useQueryParams();
+    const [{ query }] = useListQueryParams();
     const folderParam = query?.folder ?? '';
     const lastFolderRef = useRef(folderParam);
     // Commit settled input to the URL.
@@ -86,6 +115,7 @@ const StyledSearchForm = styled(SearchForm)`
     const searchForm = /*#__PURE__*/ jsx(StyledSearchForm, {
         onSubmit: (event)=>event.preventDefault(),
         children: /*#__PURE__*/ jsx(Searchbar, {
+            ref: inputRef,
             name: "search-assets",
             value: value,
             onChange: (event)=>setValue(event.target.value),
@@ -99,12 +129,23 @@ const StyledSearchForm = styled(SearchForm)`
                 defaultMessage: 'Search'
             }),
             size: "S",
+            onBlur: collapsible ? handleBlur : undefined,
             children: formatMessage({
                 id: getTranslationKey('search.label'),
                 defaultMessage: 'Search for an asset'
             })
         })
     });
+    if (isCollapsed) {
+        return /*#__PURE__*/ jsx(IconButton, {
+            label: formatMessage({
+                id: 'global.search',
+                defaultMessage: 'Search'
+            }),
+            onClick: ()=>setIsExpanded(true),
+            children: /*#__PURE__*/ jsx(Search, {})
+        });
+    }
     // Mobile: fills the toolbar row (own line). Desktop: keeps its intrinsic size,
     // with empty space between it and the right-aligned Sort/Toggle group.
     if (isMobile) {

package/dist/admin/pages/Assets/components/AssetsSearchInput.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AssetsSearchInput.mjs","sources":["../../../../../admin/src/pages/Assets/components/AssetsSearchInput.tsx"],"sourcesContent":["import { useEffect, useRef, useState, type ChangeEvent, type FormEvent } from 'react';\n\nimport { useDebounce, useIsMobile, useQueryParams } from '@strapi/admin/strapi-admin';\nimport { Box, Searchbar, SearchForm } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { useTracking, MEDIA_LIBRARY_LOCATION } from '../../../hooks/useTracking';\nimport { getTranslationKey } from '../../../utils/translations';\nimport { useAssetSearch } from '../hooks/useAssetSearch';\n\nconst DEBOUNCE_MS = 300;\n\n// The DS Searchbar nests two bordered boxes: its own shell (neutral150) wrapping\n// the field (neutral200). Side by side they read as a single 2px, two-tone\n// border, which sits oddly next to the 1px neutral200 on the Filter button in the\n// same toolbar. Dropping the shell's border leaves the field's own — same width\n// and colour as the button — and costs nothing, since the focus ring lives on the\n// field too.\nconst StyledSearchForm = styled(SearchForm)`\n  > div {\n    border: none;\n  }\n`;\n\n/**\n * Keyword search over the whole Media Library. Owns the typing state and the\n * debounce; `useAssetSearch` owns the `?_q=` URL param.\n */\nexport const AssetsSearchInput = () => {\n  const { formatMessage } = useIntl();\n  const { searchQuery, setSearchQuery } = useAssetSearch();\n  const { trackUsage } = useTracking();\n  const isMobile = useIsMobile();\n\n  const [value, setValue] = useState(searchQuery);\n  const debouncedValue = useDebounce(value, DEBOUNCE_MS);\n\n  // Tracks the last value the URL and the input agreed on. Without it the two\n  // effects below would ping-pong: each would see the other's write as a change\n  // worth reacting to.\n  const lastCommittedRef = useRef(searchQuery);\n\n  // Read directly rather than through `useFolderNavigation`, which strips\n  // malformed `?folder=` values as a side effect.\n  const [{ query }] = useQueryParams<{ folder?: string }>();\n  const folderParam = query?.folder ?? '';\n  const lastFolderRef = useRef(folderParam);\n\n  // Commit settled input to the URL.\n  useEffect(() => {\n    if (debouncedValue === lastCommittedRef.current) {\n      return;\n    }\n\n    lastCommittedRef.current = debouncedValue;\n    // Only a real query counts as a search — clearing the box (empty value) is\n    // a reset, not a `didSearch`.\n    if (debouncedValue) {\n      trackUsage('didSearchMediaLibraryElements', { location: MEDIA_LIBRARY_LOCATION });\n    }\n    setSearchQuery(debouncedValue);\n  }, [debouncedValue, setSearchQuery, trackUsage]);\n\n  // Re-sync on external changes — back/forward, or \"Clear search\" in the empty\n  // state.\n  useEffect(() => {\n    if (searchQuery === lastCommittedRef.current) {\n      return;\n    }\n\n    lastCommittedRef.current = searchQuery;\n    setValue(searchQuery);\n  }, [searchQuery]);\n\n  // A folder navigation clears `_q`, but a term typed and never committed lives\n  // only in the debounce — without this it lands afterwards and reactivates the\n  // global search. `_q` alone can't see it: it was never non-empty.\n  useEffect(() => {\n    if (folderParam === lastFolderRef.current) {\n      return;\n    }\n\n    lastFolderRef.current = folderParam;\n    lastCommittedRef.current = searchQuery;\n    setValue(searchQuery);\n  }, [folderParam, searchQuery]);\n\n  const searchForm = (\n    <StyledSearchForm onSubmit={(event: FormEvent<HTMLFormElement>) => event.preventDefault()}>\n      <Searchbar\n        name=\"search-assets\"\n        value={value}\n        onChange={(event: ChangeEvent<HTMLInputElement>) => setValue(event.target.value)}\n        onClear={() => setValue('')}\n        clearLabel={formatMessage({ id: 'clearLabel', defaultMessage: 'Clear' })}\n        placeholder={formatMessage({\n          id: getTranslationKey('header.search.placeholder'),\n          defaultMessage: 'Search',\n        })}\n        size=\"S\"\n      >\n        {formatMessage({\n          id: getTranslationKey('search.label'),\n          defaultMessage: 'Search for an asset',\n        })}\n      </Searchbar>\n    </StyledSearchForm>\n  );\n\n  // Mobile: fills the toolbar row (own line). Desktop: keeps its intrinsic size,\n  // with empty space between it and the right-aligned Sort/Toggle group.\n  if (isMobile) {\n    return <Box width=\"100%\">{searchForm}</Box>;\n  }\n\n  return searchForm;\n};\n"],"names":["DEBOUNCE_MS","StyledSearchForm","styled","SearchForm","AssetsSearchInput","formatMessage","useIntl","searchQuery","setSearchQuery","useAssetSearch","trackUsage","useTracking","isMobile","useIsMobile","value","setValue","useState","debouncedValue","useDebounce","lastCommittedRef","useRef","query","useQueryParams","folderParam","folder","lastFolderRef","useEffect","current","location","MEDIA_LIBRARY_LOCATION","searchForm","_jsx","onSubmit","event","preventDefault","Searchbar","name","onChange","target","onClear","clearLabel","id","defaultMessage","placeholder","getTranslationKey","size","Box","width"],"mappings":"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"}
+{"version":3,"file":"AssetsSearchInput.mjs","sources":["../../../../../admin/src/pages/Assets/components/AssetsSearchInput.tsx"],"sourcesContent":["import {\n  useEffect,\n  useRef,\n  useState,\n  type ChangeEvent,\n  type FocusEvent,\n  type FormEvent,\n} from 'react';\n\nimport { useDebounce, useIsMobile } from '@strapi/admin/strapi-admin';\nimport { Box, IconButton, Searchbar, SearchForm } from '@strapi/design-system';\nimport { Search as SearchIcon } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { useTracking, MEDIA_LIBRARY_LOCATION } from '../../../hooks/useTracking';\nimport { getTranslationKey } from '../../../utils/translations';\nimport { useAssetSearch } from '../hooks/useAssetSearch';\nimport { useListQueryParams } from '../hooks/useListQueryParams';\n\nconst DEBOUNCE_MS = 300;\n\n// The DS Searchbar nests two bordered boxes: its own shell (neutral150) wrapping\n// the field (neutral200). Side by side they read as a single 2px, two-tone\n// border, which sits oddly next to the 1px neutral200 on the Filter button in the\n// same toolbar. Dropping the shell's border leaves the field's own — same width\n// and colour as the button — and costs nothing, since the focus ring lives on the\n// field too.\nconst StyledSearchForm = styled(SearchForm)`\n  > div {\n    border: none;\n  }\n`;\n\ninterface AssetsSearchInputProps {\n  /**\n   * Starts as an icon button that opens the field, which folds back once it\n   * loses focus empty, like the admin's own `SearchInput` in list views. Used\n   * where the toolbar is narrow (the Content Manager asset picker). Mobile\n   * always shows the field.\n   */\n  collapsible?: boolean;\n}\n\n/**\n * Keyword search over the whole Media Library. Owns the typing state and the\n * debounce; `useAssetSearch` owns the `?_q=` URL param.\n */\nexport const AssetsSearchInput = ({ collapsible = false }: AssetsSearchInputProps) => {\n  const { formatMessage } = useIntl();\n  const { searchQuery, setSearchQuery } = useAssetSearch();\n  const { trackUsage } = useTracking();\n  const isMobile = useIsMobile();\n\n  const [value, setValue] = useState(searchQuery);\n  const debouncedValue = useDebounce(value, DEBOUNCE_MS);\n\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [isExpanded, setIsExpanded] = useState(false);\n  // A term keeps the field open: folding it would hide an active search.\n  const isCollapsed = collapsible && !isMobile && !isExpanded && value === '';\n\n  // Only after the button opened it: a field shown on mount must not take focus.\n  useEffect(() => {\n    if (isExpanded) {\n      inputRef.current?.focus();\n    }\n  }, [isExpanded]);\n\n  // Emptied from elsewhere (a folder opened, the empty state's \"Clear search\")\n  // after the field was left with a term in it: the blur already happened, so\n  // fold it here. Not while it has focus: that is the user clearing it to type.\n  useEffect(() => {\n    if (value === '' && document.activeElement !== inputRef.current) {\n      setIsExpanded(false);\n    }\n  }, [value]);\n\n  const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n    if (event.currentTarget.value === '') {\n      setIsExpanded(false);\n    }\n  };\n\n  // Tracks the last value the URL and the input agreed on. Without it the two\n  // effects below would ping-pong: each would see the other's write as a change\n  // worth reacting to.\n  const lastCommittedRef = useRef(searchQuery);\n\n  // Read directly rather than through `useFolderNavigation`, which strips\n  // malformed `?folder=` values as a side effect.\n  const [{ query }] = useListQueryParams<{ folder?: string }>();\n  const folderParam = query?.folder ?? '';\n  const lastFolderRef = useRef(folderParam);\n\n  // Commit settled input to the URL.\n  useEffect(() => {\n    if (debouncedValue === lastCommittedRef.current) {\n      return;\n    }\n\n    lastCommittedRef.current = debouncedValue;\n    // Only a real query counts as a search — clearing the box (empty value) is\n    // a reset, not a `didSearch`.\n    if (debouncedValue) {\n      trackUsage('didSearchMediaLibraryElements', { location: MEDIA_LIBRARY_LOCATION });\n    }\n    setSearchQuery(debouncedValue);\n  }, [debouncedValue, setSearchQuery, trackUsage]);\n\n  // Re-sync on external changes — back/forward, or \"Clear search\" in the empty\n  // state.\n  useEffect(() => {\n    if (searchQuery === lastCommittedRef.current) {\n      return;\n    }\n\n    lastCommittedRef.current = searchQuery;\n    setValue(searchQuery);\n  }, [searchQuery]);\n\n  // A folder navigation clears `_q`, but a term typed and never committed lives\n  // only in the debounce — without this it lands afterwards and reactivates the\n  // global search. `_q` alone can't see it: it was never non-empty.\n  useEffect(() => {\n    if (folderParam === lastFolderRef.current) {\n      return;\n    }\n\n    lastFolderRef.current = folderParam;\n    lastCommittedRef.current = searchQuery;\n    setValue(searchQuery);\n  }, [folderParam, searchQuery]);\n\n  const searchForm = (\n    <StyledSearchForm onSubmit={(event: FormEvent<HTMLFormElement>) => event.preventDefault()}>\n      <Searchbar\n        ref={inputRef}\n        name=\"search-assets\"\n        value={value}\n        onChange={(event: ChangeEvent<HTMLInputElement>) => setValue(event.target.value)}\n        onClear={() => setValue('')}\n        clearLabel={formatMessage({ id: 'clearLabel', defaultMessage: 'Clear' })}\n        placeholder={formatMessage({\n          id: getTranslationKey('header.search.placeholder'),\n          defaultMessage: 'Search',\n        })}\n        size=\"S\"\n        onBlur={collapsible ? handleBlur : undefined}\n      >\n        {formatMessage({\n          id: getTranslationKey('search.label'),\n          defaultMessage: 'Search for an asset',\n        })}\n      </Searchbar>\n    </StyledSearchForm>\n  );\n\n  if (isCollapsed) {\n    return (\n      <IconButton\n        label={formatMessage({ id: 'global.search', defaultMessage: 'Search' })}\n        onClick={() => setIsExpanded(true)}\n      >\n        <SearchIcon />\n      </IconButton>\n    );\n  }\n\n  // Mobile: fills the toolbar row (own line). Desktop: keeps its intrinsic size,\n  // with empty space between it and the right-aligned Sort/Toggle group.\n  if (isMobile) {\n    return <Box width=\"100%\">{searchForm}</Box>;\n  }\n\n  return searchForm;\n};\n"],"names":["DEBOUNCE_MS","StyledSearchForm","styled","SearchForm","AssetsSearchInput","collapsible","formatMessage","useIntl","searchQuery","setSearchQuery","useAssetSearch","trackUsage","useTracking","isMobile","useIsMobile","value","setValue","useState","debouncedValue","useDebounce","inputRef","useRef","isExpanded","setIsExpanded","isCollapsed","useEffect","current","focus","document","activeElement","handleBlur","event","currentTarget","lastCommittedRef","query","useListQueryParams","folderParam","folder","lastFolderRef","location","MEDIA_LIBRARY_LOCATION","searchForm","_jsx","onSubmit","preventDefault","Searchbar","ref","name","onChange","target","onClear","clearLabel","id","defaultMessage","placeholder","getTranslationKey","size","onBlur","undefined","IconButton","label","onClick","SearchIcon","Box","width"],"mappings":"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"}

package/dist/admin/pages/Assets/components/AssetsTable.js

@@ -7,7 +7,6 @@ var icons = require('@strapi/icons');
 var reactIntl = require('react-intl');
 var styledComponents = require('styled-components');
 var TruncatedText = require('../../../components/TruncatedText.js');
-var useMediaLibraryPermissions = require('../../../hooks/useMediaLibraryPermissions.js');
 var useTracking = require('../../../hooks/useTracking.js');
 var files = require('../../../utils/files.js');
 var getAssetIcon = require('../../../utils/getAssetIcon.js');
@@ -17,6 +16,7 @@ var constants = require('../constants.js');
 var useAssetSelection = require('../hooks/useAssetSelection.js');
 var useBusyAssets = require('../hooks/useBusyAssets.js');
 var useFolderNavigation = require('../hooks/useFolderNavigation.js');
+var useListSettings = require('../hooks/useListSettings.js');
 var renderedKeys = require('../utils/renderedKeys.js');
 var selection = require('../utils/selection.js');
 var AssetActionsMenu = require('./AssetActionsMenu.js');
@@ -38,12 +38,6 @@ const StyledTable = styledComponents.styled(designSystem.RawTable)`
      so the dates never wrap. The name cell is what absorbs the leftover and
      ellipsizes — see NameTd. */
   table-layout: auto;
-
-  & td:last-child,
-  & th:last-child {
-    width: 5.6rem;
-    white-space: nowrap;
-  }
 `;
 const StyledThead = styledComponents.styled(designSystem.RawThead)`
   background: ${({ theme })=>theme.colors.neutral100};
@@ -70,10 +64,13 @@ const flexColumn = styledComponents.css`
   max-width: 0;
   overflow: hidden;
 `;
-const StyledTh = styledComponents.styled(designSystem.RawTh)`
+const headerCellStyles = styledComponents.css`
   height: 40px;
   padding: 0 ${({ theme })=>theme.spaces[4]};
   text-align: left;
+`;
+const StyledTh = styledComponents.styled(designSystem.RawTh)`
+  ${headerCellStyles}
 
   ${({ $flex })=>$flex ? flexColumn : hugColumn}
 `;
@@ -91,13 +88,13 @@ const StyledTr = styledComponents.styled.tr`
   height: 48px;
   user-select: none;
   background: ${({ theme, $isSelected })=>$isSelected ? theme.colors.primary100 : theme.colors.neutral0};
-  cursor: ${({ $isMovePending, $isBusy, $isInvalidDropTarget })=>{
+  cursor: ${({ $isMovePending, $isBusy, $isInvalidDropTarget, $isUnselectable })=>{
     if ($isMovePending || $isBusy) {
         return 'wait';
     }
-    return $isInvalidDropTarget ? 'not-allowed' : 'pointer';
+    return $isInvalidDropTarget || $isUnselectable ? 'not-allowed' : 'pointer';
 }};
-  opacity: ${({ $isDragging, $isBusy })=>$isDragging || $isBusy ? 0.4 : 1};
+  opacity: ${({ $isDragging, $isBusy, $isUnselectable })=>$isDragging || $isBusy || $isUnselectable ? 0.4 : 1};
   pointer-events: ${({ $isMovePending, $isBusy })=>$isMovePending || $isBusy ? 'none' : 'auto'};
 
   ${({ $isValidDropTarget, theme })=>$isValidDropTarget && styledComponents.css`
@@ -121,6 +118,17 @@ const StyledTr = styledComponents.styled.tr`
     }
   }
 `;
+// The trailing actions column ("..." menu), sized by name rather than as the
+// last column: where the column is hidden (the Content Manager asset picker),
+// the last column is the name or the size, which must not shrink to this.
+const ActionsTd = styledComponents.styled(StyledTd)`
+  width: 5.6rem;
+  white-space: nowrap;
+`;
+const ActionsTh = styledComponents.styled(StyledTh)`
+  width: 5.6rem;
+  white-space: nowrap;
+`;
 // Leading checkbox column. Fixed narrow width so it holds its own column under
 // the mobile fixed table-layout (a 1% width would collapse and let the name
 // cell's preview overlap the control).
@@ -132,6 +140,16 @@ const CheckboxTh = styledComponents.styled(StyledTh)`
   width: 5.6rem;
   white-space: nowrap;
 `;
+// The checkbox column's header when there is no select-all (a single-value
+// picker): a plain cell, since as an empty `RawTh` the design system's grid
+// would make the cell itself a Tab stop.
+const EmptyCheckboxTh = styledComponents.styled.th.attrs({
+    role: 'gridcell'
+})`
+  ${headerCellStyles}
+  width: 5.6rem;
+  white-space: nowrap;
+`;
 // Flags an asset whose caption or alternative text is empty — mirrors the
 // per-field warning shown in the details drawer. Pushed to the far end of the
 // name cell (shrink 0 so a long name never crowds it out).
@@ -197,12 +215,13 @@ const AssetRow = ({ asset, orderedItemKeys, onAssetItemClick })=>{
         isMovePending: false
     };
     const { attributes, listeners, setNodeRef, isDragging, dragData } = useAssetDnd.useFileDraggable(asset);
-    const { isSelected, toggle, selectRange } = useAssetSelection.useAssetSelection();
-    const { canUpdate } = useMediaLibraryPermissions.useMediaLibraryPermissions();
+    const { isEnabled, isSelected, toggle, selectRange, getSelectability } = useAssetSelection.useAssetSelection();
+    const { showItemActions } = useListSettings.useListSettings();
     const busyMessage = useBusyAssets.useBusyAssetsOptional()?.getBusyMessage(asset.id) ?? null;
     const openContextMenu = ItemContextMenu.useItemContextMenuTrigger();
     const key = selection.assetKey(asset.id);
     const selected = isSelected(key);
+    const selectability = getSelectability(key);
     // Caption and alternative text apply to every file type — same "empty =
     // falsy" rule as the drawer's per-field warning.
     const isMetadataMissing = !asset.caption || !asset.alternativeText;
@@ -263,6 +282,7 @@ const AssetRow = ({ asset, orderedItemKeys, onAssetItemClick })=>{
         $isMovePending: isMovePending,
         $isBusy: busyMessage !== null,
         $isSelected: selected,
+        $isUnselectable: selectability === 'disabled',
         tabIndex: 0,
         role: "row",
         // Right-click opens this asset's own actions, or the selection's when it
@@ -287,13 +307,14 @@ const AssetRow = ({ asset, orderedItemKeys, onAssetItemClick })=>{
             }
         },
         children: [
-            canUpdate && /*#__PURE__*/ jsxRuntime.jsx(CheckboxTd, {
+            isEnabled && /*#__PURE__*/ jsxRuntime.jsx(CheckboxTd, {
                 ...constants.ASSET_ITEM_CONTROL_PROPS,
                 onClick: stopRowEvent,
                 onKeyDown: stopRowEvent,
-                children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+                children: selectability !== 'hidden' && /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
                     children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Checkbox, {
                         checked: selected,
+                        disabled: selectability === 'disabled',
                         onClick: handleCheckboxClick,
                         "aria-label": formatMessage({
                             id: translations.getTranslationKey('list.table.row.select'),
@@ -386,7 +407,7 @@ const AssetRow = ({ asset, orderedItemKeys, onAssetItemClick })=>{
                     })
                 ]
             }),
-            /*#__PURE__*/ jsxRuntime.jsx(StyledTd, {
+            showItemActions && /*#__PURE__*/ jsxRuntime.jsx(ActionsTd, {
                 ...constants.ASSET_ITEM_CONTROL_PROPS,
                 onClick: stopRowEvent,
                 onKeyDown: stopRowEvent,
@@ -411,8 +432,8 @@ const FolderRow = ({ folder, orderedItemKeys })=>{
     const isDesktop = strapiAdmin.useIsDesktop();
     const { formatDate, formatMessage } = reactIntl.useIntl();
     const { navigateToFolder } = useFolderNavigation.useFolderNavigation();
-    const { isSelected, toggle, selectRange } = useAssetSelection.useAssetSelection();
-    const { canUpdate } = useMediaLibraryPermissions.useMediaLibraryPermissions();
+    const { isEnabled, isSelected, toggle, selectRange, getSelectability } = useAssetSelection.useAssetSelection();
+    const { showItemActions } = useListSettings.useListSettings();
     const openContextMenu = ItemContextMenu.useItemContextMenuTrigger();
     const { isMovePending } = AssetsDndProvider.useAssetsDndOptional() ?? {
         isMovePending: false
@@ -498,12 +519,13 @@ const FolderRow = ({ folder, orderedItemKeys })=>{
             }
         },
         children: [
-            canUpdate && /*#__PURE__*/ jsxRuntime.jsx(CheckboxTd, {
+            isEnabled && /*#__PURE__*/ jsxRuntime.jsx(CheckboxTd, {
                 onClick: stopRowEvent,
                 onKeyDown: stopRowEvent,
-                children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+                children: getSelectability(key) !== 'hidden' && /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
                     children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Checkbox, {
                         checked: isSelected(key),
+                        disabled: getSelectability(key) === 'disabled',
                         onClick: handleCheckboxClick,
                         "aria-label": formatMessage({
                             id: translations.getTranslationKey('list.table.row.select'),
@@ -567,7 +589,7 @@ const FolderRow = ({ folder, orderedItemKeys })=>{
                     })
                 ]
             }),
-            /*#__PURE__*/ jsxRuntime.jsx(StyledTd, {
+            showItemActions && /*#__PURE__*/ jsxRuntime.jsx(ActionsTd, {
                 onClick: stopRowEvent,
                 onKeyDown: stopRowEvent,
                 onPointerDown: stopRowEvent,
@@ -585,16 +607,15 @@ const FolderRow = ({ folder, orderedItemKeys })=>{
 const AssetsTable = ({ assets, folders = EMPTY_FOLDERS, mixedItems = null, renderedKeys: renderedKeys$1, onAssetItemClick })=>{
     const isDesktop = strapiAdmin.useIsDesktop();
     const { formatMessage } = reactIntl.useIntl();
-    const { selectedKeys, selectAll, clear } = useAssetSelection.useAssetSelection();
-    const { canUpdate } = useMediaLibraryPermissions.useMediaLibraryPermissions();
+    const { isEnabled, canSelectAll, selectedKeys, selectAll, deselectAll, getSelectability } = useAssetSelection.useAssetSelection();
+    const { showItemActions } = useListSettings.useListSettings();
     const { trackUsage } = useTracking.useTracking();
     // Below the desktop breakpoint only the name (and actions) column is kept —
     // the date/size columns don't fit; size moves under the name as a subtitle.
-    const visibleHeaders = isDesktop ? constants.TABLE_HEADERS : constants.TABLE_HEADERS.filter((h)=>h.name === 'name' || h.name === 'actions');
+    const visibleHeaders = (isDesktop ? constants.TABLE_HEADERS : constants.TABLE_HEADERS.filter((h)=>h.name === 'name' || h.name === 'actions')).filter((h)=>showItemActions || h.name !== 'actions');
     // The checkbox column is a dedicated structural column (not part of
-    // TABLE_HEADERS). Hidden only without the update permission — every bulk
-    // action needs `assets.update`, so a read-only user has nothing to select for.
-    const showCheckboxColumn = canUpdate;
+    // TABLE_HEADERS), shown whenever selection is on.
+    const showCheckboxColumn = isEnabled;
     const colCount = visibleHeaders.length + (showCheckboxColumn ? 1 : 0);
     const totalRows = folders.length + assets.length;
     // Render order — folders first by default, or the interleaved mixed order.
@@ -604,13 +625,16 @@ const AssetsTable = ({ assets, folders = EMPTY_FOLDERS, mixedItems = null, rende
         assets,
         mixedItems
     });
-    const { allSelected, isIndeterminate } = selection.getSelectAllState(selectedKeys, orderedItemKeys);
+    // Select-all only reaches what can be selected: folders in the picker, or
+    // assets outside its `allowedTypes`, are left out.
+    const selectableKeys = orderedItemKeys.filter((key)=>getSelectability(key) === 'enabled');
+    const { allSelected, isIndeterminate } = selection.getSelectAllState(selectedKeys, selectableKeys);
     const handleSelectAll = ()=>{
         if (allSelected) {
-            clear();
+            deselectAll(selectableKeys);
         } else {
             trackUsage('didSelectAllMediaLibraryElements');
-            selectAll(orderedItemKeys);
+            selectAll(selectableKeys);
         }
     };
     // The empty state is owned by the page (`AssetsView` renders `EmptyState`) — an
@@ -625,11 +649,11 @@ const AssetsTable = ({ assets, folders = EMPTY_FOLDERS, mixedItems = null, rende
             /*#__PURE__*/ jsxRuntime.jsx(StyledThead, {
                 children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.RawTr, {
                     children: [
-                        showCheckboxColumn && /*#__PURE__*/ jsxRuntime.jsx(CheckboxTh, {
+                        showCheckboxColumn && canSelectAll && /*#__PURE__*/ jsxRuntime.jsx(CheckboxTh, {
                             children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
                                 children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Checkbox, {
                                     checked: isIndeterminate ? 'indeterminate' : allSelected,
-                                    disabled: orderedItemKeys.length === 0,
+                                    disabled: selectableKeys.length === 0,
                                     onCheckedChange: handleSelectAll,
                                     "aria-label": formatMessage({
                                         id: translations.getTranslationKey('list.table.header.select-all'),
@@ -638,12 +662,12 @@ const AssetsTable = ({ assets, folders = EMPTY_FOLDERS, mixedItems = null, rende
                                 })
                             })
                         }),
+                        showCheckboxColumn && !canSelectAll && /*#__PURE__*/ jsxRuntime.jsx(EmptyCheckboxTh, {}),
                         visibleHeaders.map((header)=>{
                             const tableHeaderLabel = formatMessage(header.label);
                             const isVisuallyHidden = 'isVisuallyHidden' in header && header.isVisuallyHidden;
                             if (isVisuallyHidden) {
-                                return /*#__PURE__*/ jsxRuntime.jsx(StyledTh, {
-                                    $flex: header.name === 'name',
+                                return /*#__PURE__*/ jsxRuntime.jsx(ActionsTh, {
                                     children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.VisuallyHidden, {
                                         children: formatMessage({
                                             id: translations.getTranslationKey('table.header.actions'),