@strapi/upload 5.58.0 → 5.60.0

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

@@ -0,0 +1,89 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Breadcrumbs, CrumbSimpleMenu, MenuItem, Crumb } from '@strapi/design-system';
+import { useIntl } from 'react-intl';
+import { styled } from 'styled-components';
+import { useGetFolderStructureQuery } from '../../services/folders.mjs';
+import { findFolderPath } from '../../utils/findFolderPath.mjs';
+import { getTranslationKey } from '../../utils/translations.mjs';
+
+// Past this many folders, the ones between the first and the parent collapse
+// into a menu, so a deep tree doesn't wrap the trail over several lines.
+const MAX_VISIBLE_FOLDERS = 3;
+// `CrumbLink`'s look on a real button. `CrumbLink` only renders an anchor, and
+// one without an `href` is neither announced as a button nor reachable by Tab.
+const CrumbButton = styled.button`
+  border: none;
+  background: none;
+  cursor: pointer;
+  border-radius: ${({ theme })=>theme.borderRadius};
+  color: ${({ theme })=>theme.colors.neutral600};
+  font-size: ${({ theme })=>theme.fontSizes[1]};
+  line-height: ${({ theme })=>theme.lineHeights[4]};
+  padding: ${({ theme })=>`${theme.spaces[1]} ${theme.spaces[2]}`};
+
+  &:hover,
+  &:focus-visible {
+    background-color: ${({ theme })=>theme.colors.neutral200};
+    color: ${({ theme })=>theme.colors.neutral700};
+  }
+`;
+/**
+ * Home › … › parent › current. Every crumb but the current folder navigates,
+ * so a user deep in the tree can climb back without a sidebar.
+ */ const FolderBreadcrumbs = ({ currentFolderId, onSelectFolder })=>{
+    const { formatMessage } = useIntl();
+    const { data: folderStructure = [] } = useGetFolderStructureQuery();
+    const path = findFolderPath(folderStructure, currentFolderId);
+    const current = path?.at(-1);
+    // The tree has not loaded yet, or no longer holds the folder (deleted
+    // elsewhere — `useAssetsList` sends the list back to the root on its own).
+    if (!path || !current) {
+        return null;
+    }
+    const ancestors = path.slice(0, -1);
+    const isCollapsed = path.length > MAX_VISIBLE_FOLDERS;
+    const leading = isCollapsed ? ancestors.slice(0, 1) : ancestors;
+    const hidden = isCollapsed ? ancestors.slice(1, -1) : [];
+    const trailing = isCollapsed ? ancestors.slice(-1) : [];
+    const renderLink = (folder)=>/*#__PURE__*/ jsx(CrumbButton, {
+            type: "button",
+            onClick: ()=>onSelectFolder(folder.id ?? null),
+            children: folder.name
+        }, folder.id);
+    return /*#__PURE__*/ jsxs(Breadcrumbs, {
+        label: formatMessage({
+            id: getTranslationKey('asset-picker.breadcrumbs.label'),
+            defaultMessage: 'Folder navigation'
+        }),
+        children: [
+            /*#__PURE__*/ jsx(CrumbButton, {
+                type: "button",
+                onClick: ()=>onSelectFolder(null),
+                children: formatMessage({
+                    id: getTranslationKey('plugin.home'),
+                    defaultMessage: 'Home'
+                })
+            }),
+            leading.map(renderLink),
+            hidden.length > 0 && /*#__PURE__*/ jsx(CrumbSimpleMenu, {
+                "aria-label": formatMessage({
+                    id: getTranslationKey('asset-picker.breadcrumbs.more'),
+                    defaultMessage: 'Show more folders'
+                }),
+                label: "…",
+                children: hidden.map((folder)=>/*#__PURE__*/ jsx(MenuItem, {
+                        onSelect: ()=>onSelectFolder(folder.id ?? null),
+                        children: folder.name
+                    }, folder.id))
+            }),
+            trailing.map(renderLink),
+            /*#__PURE__*/ jsx(Crumb, {
+                isCurrent: true,
+                children: current.name
+            })
+        ]
+    });
+};
+
+export { FolderBreadcrumbs };
+//# sourceMappingURL=FolderBreadcrumbs.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FolderBreadcrumbs.mjs","sources":["../../../../admin/src/components/AssetPickerDialog/FolderBreadcrumbs.tsx"],"sourcesContent":["import { Breadcrumbs, Crumb, CrumbSimpleMenu, MenuItem } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { useGetFolderStructureQuery } from '../../services/folders';\nimport { findFolderPath } from '../../utils/findFolderPath';\nimport { getTranslationKey } from '../../utils/translations';\n\n// Past this many folders, the ones between the first and the parent collapse\n// into a menu, so a deep tree doesn't wrap the trail over several lines.\nconst MAX_VISIBLE_FOLDERS = 3;\n\n// `CrumbLink`'s look on a real button. `CrumbLink` only renders an anchor, and\n// one without an `href` is neither announced as a button nor reachable by Tab.\nconst CrumbButton = styled.button`\n  border: none;\n  background: none;\n  cursor: pointer;\n  border-radius: ${({ theme }) => theme.borderRadius};\n  color: ${({ theme }) => theme.colors.neutral600};\n  font-size: ${({ theme }) => theme.fontSizes[1]};\n  line-height: ${({ theme }) => theme.lineHeights[4]};\n  padding: ${({ theme }) => `${theme.spaces[1]} ${theme.spaces[2]}`};\n\n  &:hover,\n  &:focus-visible {\n    background-color: ${({ theme }) => theme.colors.neutral200};\n    color: ${({ theme }) => theme.colors.neutral700};\n  }\n`;\n\ninterface FolderBreadcrumbsProps {\n  currentFolderId: number;\n  onSelectFolder: (folderId: number | null) => void;\n}\n\n/**\n * Home › … › parent › current. Every crumb but the current folder navigates,\n * so a user deep in the tree can climb back without a sidebar.\n */\nexport const FolderBreadcrumbs = ({ currentFolderId, onSelectFolder }: FolderBreadcrumbsProps) => {\n  const { formatMessage } = useIntl();\n  const { data: folderStructure = [] } = useGetFolderStructureQuery();\n\n  const path = findFolderPath(folderStructure, currentFolderId);\n  const current = path?.at(-1);\n\n  // The tree has not loaded yet, or no longer holds the folder (deleted\n  // elsewhere — `useAssetsList` sends the list back to the root on its own).\n  if (!path || !current) {\n    return null;\n  }\n\n  const ancestors = path.slice(0, -1);\n  const isCollapsed = path.length > MAX_VISIBLE_FOLDERS;\n  const leading = isCollapsed ? ancestors.slice(0, 1) : ancestors;\n  const hidden = isCollapsed ? ancestors.slice(1, -1) : [];\n  const trailing = isCollapsed ? ancestors.slice(-1) : [];\n\n  const renderLink = (folder: (typeof path)[number]) => (\n    <CrumbButton key={folder.id} type=\"button\" onClick={() => onSelectFolder(folder.id ?? null)}>\n      {folder.name}\n    </CrumbButton>\n  );\n\n  return (\n    <Breadcrumbs\n      label={formatMessage({\n        id: getTranslationKey('asset-picker.breadcrumbs.label'),\n        defaultMessage: 'Folder navigation',\n      })}\n    >\n      <CrumbButton type=\"button\" onClick={() => onSelectFolder(null)}>\n        {formatMessage({ id: getTranslationKey('plugin.home'), defaultMessage: 'Home' })}\n      </CrumbButton>\n      {leading.map(renderLink)}\n      {hidden.length > 0 && (\n        <CrumbSimpleMenu\n          aria-label={formatMessage({\n            id: getTranslationKey('asset-picker.breadcrumbs.more'),\n            defaultMessage: 'Show more folders',\n          })}\n          label=\"…\"\n        >\n          {hidden.map((folder) => (\n            <MenuItem key={folder.id} onSelect={() => onSelectFolder(folder.id ?? null)}>\n              {folder.name}\n            </MenuItem>\n          ))}\n        </CrumbSimpleMenu>\n      )}\n      {trailing.map(renderLink)}\n      <Crumb isCurrent>{current.name}</Crumb>\n    </Breadcrumbs>\n  );\n};\n"],"names":["MAX_VISIBLE_FOLDERS","CrumbButton","styled","button","theme","borderRadius","colors","neutral600","fontSizes","lineHeights","spaces","neutral200","neutral700","FolderBreadcrumbs","currentFolderId","onSelectFolder","formatMessage","useIntl","data","folderStructure","useGetFolderStructureQuery","path","findFolderPath","current","at","ancestors","slice","isCollapsed","length","leading","hidden","trailing","renderLink","folder","_jsx","type","onClick","id","name","_jsxs","Breadcrumbs","label","getTranslationKey","defaultMessage","map","CrumbSimpleMenu","aria-label","MenuItem","onSelect","Crumb","isCurrent"],"mappings":";;;;;;;;AAQA;AACA;AACA,MAAMA,mBAAAA,GAAsB,CAAA;AAE5B;AACA;AACA,MAAMC,WAAAA,GAAcC,MAAAA,CAAOC,MAAM;;;;AAIhB,iBAAA,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAAA,CAAMC,YAAY,CAAC;SAC5C,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAAA,CAAME,MAAM,CAACC,UAAU,CAAC;aACrC,EAAE,CAAC,EAAEH,KAAK,EAAE,GAAKA,KAAAA,CAAMI,SAAS,CAAC,CAAA,CAAE,CAAC;eAClC,EAAE,CAAC,EAAEJ,KAAK,EAAE,GAAKA,KAAAA,CAAMK,WAAW,CAAC,CAAA,CAAE,CAAC;AAC1C,WAAA,EAAE,CAAC,EAAEL,KAAK,EAAE,GAAK,CAAA,EAAGA,MAAMM,MAAM,CAAC,CAAA,CAAE,CAAC,CAAC,EAAEN,KAAAA,CAAMM,MAAM,CAAC,CAAA,CAAE,EAAE,CAAC;;;;sBAI9C,EAAE,CAAC,EAAEN,KAAK,EAAE,GAAKA,KAAAA,CAAME,MAAM,CAACK,UAAU,CAAC;WACpD,EAAE,CAAC,EAAEP,KAAK,EAAE,GAAKA,KAAAA,CAAME,MAAM,CAACM,UAAU,CAAC;;AAEpD,CAAC;AAOD;;;UAIaC,iBAAAA,GAAoB,CAAC,EAAEC,eAAe,EAAEC,cAAc,EAA0B,GAAA;IAC3F,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;AAC1B,IAAA,MAAM,EAAEC,IAAAA,EAAMC,eAAAA,GAAkB,EAAE,EAAE,GAAGC,0BAAAA,EAAAA;IAEvC,MAAMC,IAAAA,GAAOC,eAAeH,eAAAA,EAAiBL,eAAAA,CAAAA;IAC7C,MAAMS,OAAAA,GAAUF,IAAAA,EAAMG,EAAAA,CAAG,EAAC,CAAA;;;IAI1B,IAAI,CAACH,IAAAA,IAAQ,CAACE,OAAAA,EAAS;QACrB,OAAO,IAAA;AACT,IAAA;AAEA,IAAA,MAAME,SAAAA,GAAYJ,IAAAA,CAAKK,KAAK,CAAC,GAAG,EAAC,CAAA;IACjC,MAAMC,WAAAA,GAAcN,IAAAA,CAAKO,MAAM,GAAG5B,mBAAAA;AAClC,IAAA,MAAM6B,UAAUF,WAAAA,GAAcF,SAAAA,CAAUC,KAAK,CAAC,GAAG,CAAA,CAAA,GAAKD,SAAAA;IACtD,MAAMK,MAAAA,GAASH,cAAcF,SAAAA,CAAUC,KAAK,CAAC,CAAA,EAAG,MAAM,EAAE;AACxD,IAAA,MAAMK,WAAWJ,WAAAA,GAAcF,SAAAA,CAAUC,KAAK,CAAC,MAAM,EAAE;IAEvD,MAAMM,UAAAA,GAAa,CAACC,MAAAA,iBAClBC,GAAA,CAACjC,WAAAA,EAAAA;YAA4BkC,IAAAA,EAAK,QAAA;AAASC,YAAAA,OAAAA,EAAS,IAAMrB,cAAAA,CAAekB,MAAAA,CAAOI,EAAE,IAAI,IAAA,CAAA;AACnFJ,YAAAA,QAAAA,EAAAA,MAAAA,CAAOK;AADQL,SAAAA,EAAAA,MAAAA,CAAOI,EAAE,CAAA;AAK7B,IAAA,qBACEE,IAAA,CAACC,WAAAA,EAAAA;AACCC,QAAAA,KAAAA,EAAOzB,aAAAA,CAAc;AACnBqB,YAAAA,EAAAA,EAAIK,iBAAAA,CAAkB,gCAAA,CAAA;YACtBC,cAAAA,EAAgB;AAClB,SAAA,CAAA;;0BAEAT,GAAA,CAACjC,WAAAA,EAAAA;gBAAYkC,IAAAA,EAAK,QAAA;AAASC,gBAAAA,OAAAA,EAAS,IAAMrB,cAAAA,CAAe,IAAA,CAAA;0BACtDC,aAAAA,CAAc;AAAEqB,oBAAAA,EAAAA,EAAIK,iBAAAA,CAAkB,aAAA,CAAA;oBAAgBC,cAAAA,EAAgB;AAAO,iBAAA;;AAE/Ed,YAAAA,OAAAA,CAAQe,GAAG,CAACZ,UAAAA,CAAAA;YACZF,MAAAA,CAAOF,MAAM,GAAG,CAAA,kBACfM,GAAA,CAACW,eAAAA,EAAAA;AACCC,gBAAAA,YAAAA,EAAY9B,aAAAA,CAAc;AACxBqB,oBAAAA,EAAAA,EAAIK,iBAAAA,CAAkB,+BAAA,CAAA;oBACtBC,cAAAA,EAAgB;AAClB,iBAAA,CAAA;gBACAF,KAAAA,EAAM,GAAA;AAELX,gBAAAA,QAAAA,EAAAA,MAAAA,CAAOc,GAAG,CAAC,CAACX,MAAAA,iBACXC,GAAA,CAACa,QAAAA,EAAAA;AAAyBC,wBAAAA,QAAAA,EAAU,IAAMjC,cAAAA,CAAekB,MAAAA,CAAOI,EAAE,IAAI,IAAA,CAAA;AACnEJ,wBAAAA,QAAAA,EAAAA,MAAAA,CAAOK;AADKL,qBAAAA,EAAAA,MAAAA,CAAOI,EAAE,CAAA;;AAM7BN,YAAAA,QAAAA,CAASa,GAAG,CAACZ,UAAAA,CAAAA;0BACdE,GAAA,CAACe,KAAAA,EAAAA;gBAAMC,SAAS,EAAA,IAAA;AAAE3B,gBAAAA,QAAAA,EAAAA,OAAAA,CAAQe;;;;AAGhC;;;;"}

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

@@ -0,0 +1,178 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var useAssetSelection = require('../../pages/Assets/hooks/useAssetSelection.js');
+var selection = require('../../pages/Assets/utils/selection.js');
+var isAllowedAssetType = require('../../utils/isAllowedAssetType.js');
+var pickerSelection = require('./pickerSelection.js');
+
+const PickerSelectionContext = /*#__PURE__*/ React.createContext(null);
+const usePickerSelection = ()=>{
+    const context = React.useContext(PickerSelectionContext);
+    if (!context) {
+        throw new Error('usePickerSelection must be used within a PickerSelectionProvider');
+    }
+    return context;
+};
+const parseAssetId = (key)=>{
+    const [kind, id] = key.split(':');
+    return kind === 'asset' ? Number(id) : null;
+};
+const NO_FOLDERS = new Set();
+/**
+ * The Content Manager picker's selection, behind the same `AssetSelection`
+ * interface the Media Library views read: only assets are selectable, assets
+ * outside `allowedTypes` are shown but cannot be picked, and the selection
+ * survives folder changes, search, filters and sort.
+ */ const PickerSelectionProvider = ({ children, initialSelection, multiple, allowedTypes, knownFiles })=>{
+    const [selection$1, setSelection] = React.useState(initialSelection);
+    const filesById = React.useMemo(()=>{
+        const map = new Map();
+        [
+            ...knownFiles,
+            ...selection$1
+        ].forEach((file)=>map.set(file.id, file));
+        return map;
+    }, [
+        knownFiles,
+        selection$1
+    ]);
+    const selectedIds = React.useMemo(()=>new Set(selection$1.map((file)=>file.id)), [
+        selection$1
+    ]);
+    const resolveSelectableFile = React.useCallback((key)=>{
+        const id = parseAssetId(key);
+        const file = id === null ? undefined : filesById.get(id);
+        return file && isAllowedAssetType.isAllowedAssetType(allowedTypes, file.mime) ? file : null;
+    }, [
+        allowedTypes,
+        filesById
+    ]);
+    const getSelectability = React.useCallback((key)=>{
+        const id = parseAssetId(key);
+        if (id === null) {
+            return 'hidden';
+        }
+        // `allowedTypes` only stops adding an asset. One the field already holds,
+        // for example from before the schema was narrowed, must stay removable.
+        if (selectedIds.has(id)) {
+            return 'enabled';
+        }
+        const file = filesById.get(id);
+        return file && !isAllowedAssetType.isAllowedAssetType(allowedTypes, file.mime) ? 'disabled' : 'enabled';
+    }, [
+        allowedTypes,
+        filesById,
+        selectedIds
+    ]);
+    const toggle = React.useCallback((key)=>{
+        const id = parseAssetId(key);
+        if (id !== null && selectedIds.has(id)) {
+            setSelection((prev)=>pickerSelection.removeFile(prev, id));
+            return;
+        }
+        const file = resolveSelectableFile(key);
+        if (file) {
+            setSelection((prev)=>pickerSelection.toggleFile(prev, file, {
+                    multiple
+                }));
+        }
+    }, [
+        multiple,
+        resolveSelectableFile,
+        selectedIds
+    ]);
+    // Select-all over the assets on screen that can be picked, appended in their
+    // on-screen order. Only a multiple-value field offers it.
+    const selectAll = React.useCallback((orderedKeys)=>{
+        if (!multiple) {
+            return;
+        }
+        const files = orderedKeys.map((key)=>resolveSelectableFile(key)).filter((file)=>file !== null);
+        setSelection((prev)=>pickerSelection.addFiles(prev, files));
+    }, [
+        multiple,
+        resolveSelectableFile
+    ]);
+    const selectOnly = React.useCallback((key)=>{
+        const file = resolveSelectableFile(key);
+        if (file) {
+            setSelection([
+                file
+            ]);
+        }
+    }, [
+        resolveSelectableFile
+    ]);
+    const deselect = React.useCallback((key)=>{
+        const id = parseAssetId(key);
+        if (id !== null) {
+            setSelection((prev)=>pickerSelection.removeFile(prev, id));
+        }
+    }, []);
+    const deselectAll = React.useCallback((orderedKeys)=>{
+        const ids = new Set(orderedKeys.map((key)=>parseAssetId(key)).filter((id)=>id !== null));
+        setSelection((prev)=>pickerSelection.removeFiles(prev, ids));
+    }, []);
+    const clear = React.useCallback(()=>setSelection([]), []);
+    const selectedKeys = React.useMemo(()=>new Set(selection$1.map((file)=>selection.assetKey(file.id))), [
+        selection$1
+    ]);
+    const isSelected = React.useCallback((key)=>{
+        const id = parseAssetId(key);
+        return id !== null && pickerSelection.hasFile(selection$1, id);
+    }, [
+        selection$1
+    ]);
+    const assetSelection = React.useMemo(()=>({
+            isEnabled: true,
+            // A single-value field holds one asset: nothing to select all of.
+            canSelectAll: multiple,
+            getSelectability,
+            selectedKeys,
+            selectedIds,
+            selectedFolderIds: NO_FOLDERS,
+            anchorKey: null,
+            isSelected,
+            toggle,
+            // Picking is one asset at a time; a Shift+click range picks the target.
+            selectRange: (_orderedKeys, targetKey)=>toggle(targetKey),
+            selectAll,
+            selectOnly,
+            deselect,
+            deselectAll,
+            clear
+        }), [
+        multiple,
+        getSelectability,
+        selectedKeys,
+        selectedIds,
+        isSelected,
+        toggle,
+        selectAll,
+        selectOnly,
+        deselect,
+        deselectAll,
+        clear
+    ]);
+    const moveSelectedFile = React.useCallback((activeId, overId)=>setSelection((prev)=>pickerSelection.moveFile(prev, activeId, overId)), []);
+    const pickerSelection$1 = React.useMemo(()=>({
+            selection: selection$1,
+            moveFile: moveSelectedFile
+        }), [
+        selection$1,
+        moveSelectedFile
+    ]);
+    return /*#__PURE__*/ jsxRuntime.jsx(PickerSelectionContext.Provider, {
+        value: pickerSelection$1,
+        children: /*#__PURE__*/ jsxRuntime.jsx(useAssetSelection.AssetSelectionContext.Provider, {
+            value: assetSelection,
+            children: children
+        })
+    });
+};
+
+exports.PickerSelectionProvider = PickerSelectionProvider;
+exports.usePickerSelection = usePickerSelection;
+//# sourceMappingURL=PickerSelectionProvider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PickerSelectionProvider.js","sources":["../../../../admin/src/components/AssetPickerDialog/PickerSelectionProvider.tsx"],"sourcesContent":["import { createContext, useCallback, useContext, useMemo, useState, type ReactNode } from 'react';\n\nimport {\n  AssetSelectionContext,\n  type AssetSelection,\n  type Selectability,\n} from '../../pages/Assets/hooks/useAssetSelection';\nimport { assetKey, type ItemKey } from '../../pages/Assets/utils/selection';\nimport { isAllowedAssetType, type MediaAllowedTypes } from '../../utils/isAllowedAssetType';\n\nimport {\n  addFiles,\n  hasFile,\n  moveFile,\n  removeFile,\n  removeFiles,\n  toggleFile,\n  type PickerSelection,\n} from './pickerSelection';\n\nimport type { File } from '../../../../shared/contracts/files';\n\ninterface PickerSelectionContextValue {\n  selection: PickerSelection;\n  moveFile: (activeId: number, overId: number) => void;\n}\n\nconst PickerSelectionContext = createContext<PickerSelectionContextValue | null>(null);\n\nexport const usePickerSelection = () => {\n  const context = useContext(PickerSelectionContext);\n\n  if (!context) {\n    throw new Error('usePickerSelection must be used within a PickerSelectionProvider');\n  }\n\n  return context;\n};\n\nconst parseAssetId = (key: ItemKey): number | null => {\n  const [kind, id] = key.split(':');\n\n  return kind === 'asset' ? Number(id) : null;\n};\n\nconst NO_FOLDERS = new Set<number>();\n\ninterface PickerSelectionProviderProps {\n  children: ReactNode;\n  initialSelection: File[];\n  multiple: boolean;\n  allowedTypes?: MediaAllowedTypes | null;\n  /**\n   * The assets on screen. Views select by key, but the selection keeps whole\n   * files, so a newly picked key is resolved against these.\n   */\n  knownFiles: File[];\n}\n\n/**\n * The Content Manager picker's selection, behind the same `AssetSelection`\n * interface the Media Library views read: only assets are selectable, assets\n * outside `allowedTypes` are shown but cannot be picked, and the selection\n * survives folder changes, search, filters and sort.\n */\nexport const PickerSelectionProvider = ({\n  children,\n  initialSelection,\n  multiple,\n  allowedTypes,\n  knownFiles,\n}: PickerSelectionProviderProps) => {\n  const [selection, setSelection] = useState<PickerSelection>(initialSelection);\n\n  const filesById = useMemo(() => {\n    const map = new Map<number, File>();\n    [...knownFiles, ...selection].forEach((file) => map.set(file.id, file));\n    return map;\n  }, [knownFiles, selection]);\n\n  const selectedIds = useMemo(() => new Set(selection.map((file) => file.id)), [selection]);\n\n  const resolveSelectableFile = useCallback(\n    (key: ItemKey): File | null => {\n      const id = parseAssetId(key);\n      const file = id === null ? undefined : filesById.get(id);\n\n      return file && isAllowedAssetType(allowedTypes, file.mime) ? file : null;\n    },\n    [allowedTypes, filesById]\n  );\n\n  const getSelectability = useCallback(\n    (key: ItemKey): Selectability => {\n      const id = parseAssetId(key);\n\n      if (id === null) {\n        return 'hidden';\n      }\n\n      // `allowedTypes` only stops adding an asset. One the field already holds,\n      // for example from before the schema was narrowed, must stay removable.\n      if (selectedIds.has(id)) {\n        return 'enabled';\n      }\n\n      const file = filesById.get(id);\n\n      return file && !isAllowedAssetType(allowedTypes, file.mime) ? 'disabled' : 'enabled';\n    },\n    [allowedTypes, filesById, selectedIds]\n  );\n\n  const toggle = useCallback(\n    (key: ItemKey) => {\n      const id = parseAssetId(key);\n\n      if (id !== null && selectedIds.has(id)) {\n        setSelection((prev) => removeFile(prev, id));\n        return;\n      }\n\n      const file = resolveSelectableFile(key);\n\n      if (file) {\n        setSelection((prev) => toggleFile(prev, file, { multiple }));\n      }\n    },\n    [multiple, resolveSelectableFile, selectedIds]\n  );\n\n  // Select-all over the assets on screen that can be picked, appended in their\n  // on-screen order. Only a multiple-value field offers it.\n  const selectAll = useCallback(\n    (orderedKeys: ItemKey[]) => {\n      if (!multiple) {\n        return;\n      }\n\n      const files = orderedKeys\n        .map((key) => resolveSelectableFile(key))\n        .filter((file): file is File => file !== null);\n\n      setSelection((prev) => addFiles(prev, files));\n    },\n    [multiple, resolveSelectableFile]\n  );\n\n  const selectOnly = useCallback(\n    (key: ItemKey) => {\n      const file = resolveSelectableFile(key);\n\n      if (file) {\n        setSelection([file]);\n      }\n    },\n    [resolveSelectableFile]\n  );\n\n  const deselect = useCallback((key: ItemKey) => {\n    const id = parseAssetId(key);\n\n    if (id !== null) {\n      setSelection((prev) => removeFile(prev, id));\n    }\n  }, []);\n\n  const deselectAll = useCallback((orderedKeys: ItemKey[]) => {\n    const ids = new Set(\n      orderedKeys.map((key) => parseAssetId(key)).filter((id): id is number => id !== null)\n    );\n\n    setSelection((prev) => removeFiles(prev, ids));\n  }, []);\n\n  const clear = useCallback(() => setSelection([]), []);\n\n  const selectedKeys = useMemo(\n    () => new Set(selection.map((file) => assetKey(file.id))),\n    [selection]\n  );\n\n  const isSelected = useCallback(\n    (key: ItemKey) => {\n      const id = parseAssetId(key);\n\n      return id !== null && hasFile(selection, id);\n    },\n    [selection]\n  );\n\n  const assetSelection = useMemo<AssetSelection>(\n    () => ({\n      isEnabled: true,\n      // A single-value field holds one asset: nothing to select all of.\n      canSelectAll: multiple,\n      getSelectability,\n      selectedKeys,\n      selectedIds,\n      selectedFolderIds: NO_FOLDERS,\n      anchorKey: null,\n      isSelected,\n      toggle,\n      // Picking is one asset at a time; a Shift+click range picks the target.\n      selectRange: (_orderedKeys, targetKey) => toggle(targetKey),\n      selectAll,\n      selectOnly,\n      deselect,\n      deselectAll,\n      clear,\n    }),\n    [\n      multiple,\n      getSelectability,\n      selectedKeys,\n      selectedIds,\n      isSelected,\n      toggle,\n      selectAll,\n      selectOnly,\n      deselect,\n      deselectAll,\n      clear,\n    ]\n  );\n\n  const moveSelectedFile = useCallback(\n    (activeId: number, overId: number) => setSelection((prev) => moveFile(prev, activeId, overId)),\n    []\n  );\n\n  const pickerSelection = useMemo(\n    () => ({ selection, moveFile: moveSelectedFile }),\n    [selection, moveSelectedFile]\n  );\n\n  return (\n    <PickerSelectionContext.Provider value={pickerSelection}>\n      <AssetSelectionContext.Provider value={assetSelection}>\n        {children}\n      </AssetSelectionContext.Provider>\n    </PickerSelectionContext.Provider>\n  );\n};\n"],"names":["PickerSelectionContext","createContext","usePickerSelection","context","useContext","Error","parseAssetId","key","kind","id","split","Number","NO_FOLDERS","Set","PickerSelectionProvider","children","initialSelection","multiple","allowedTypes","knownFiles","selection","setSelection","useState","filesById","useMemo","map","Map","forEach","file","set","selectedIds","resolveSelectableFile","useCallback","undefined","get","isAllowedAssetType","mime","getSelectability","has","toggle","prev","removeFile","toggleFile","selectAll","orderedKeys","files","filter","addFiles","selectOnly","deselect","deselectAll","ids","removeFiles","clear","selectedKeys","assetKey","isSelected","hasFile","assetSelection","isEnabled","canSelectAll","selectedFolderIds","anchorKey","selectRange","_orderedKeys","targetKey","moveSelectedFile","activeId","overId","moveFile","pickerSelection","_jsx","Provider","value","AssetSelectionContext"],"mappings":"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"}

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

@@ -0,0 +1,175 @@
+import { jsx } from 'react/jsx-runtime';
+import { useState, useMemo, useCallback, useContext, createContext } from 'react';
+import { AssetSelectionContext } from '../../pages/Assets/hooks/useAssetSelection.mjs';
+import { assetKey } from '../../pages/Assets/utils/selection.mjs';
+import { isAllowedAssetType } from '../../utils/isAllowedAssetType.mjs';
+import { removeFile, toggleFile, addFiles, removeFiles, hasFile, moveFile } from './pickerSelection.mjs';
+
+const PickerSelectionContext = /*#__PURE__*/ createContext(null);
+const usePickerSelection = ()=>{
+    const context = useContext(PickerSelectionContext);
+    if (!context) {
+        throw new Error('usePickerSelection must be used within a PickerSelectionProvider');
+    }
+    return context;
+};
+const parseAssetId = (key)=>{
+    const [kind, id] = key.split(':');
+    return kind === 'asset' ? Number(id) : null;
+};
+const NO_FOLDERS = new Set();
+/**
+ * The Content Manager picker's selection, behind the same `AssetSelection`
+ * interface the Media Library views read: only assets are selectable, assets
+ * outside `allowedTypes` are shown but cannot be picked, and the selection
+ * survives folder changes, search, filters and sort.
+ */ const PickerSelectionProvider = ({ children, initialSelection, multiple, allowedTypes, knownFiles })=>{
+    const [selection, setSelection] = useState(initialSelection);
+    const filesById = useMemo(()=>{
+        const map = new Map();
+        [
+            ...knownFiles,
+            ...selection
+        ].forEach((file)=>map.set(file.id, file));
+        return map;
+    }, [
+        knownFiles,
+        selection
+    ]);
+    const selectedIds = useMemo(()=>new Set(selection.map((file)=>file.id)), [
+        selection
+    ]);
+    const resolveSelectableFile = useCallback((key)=>{
+        const id = parseAssetId(key);
+        const file = id === null ? undefined : filesById.get(id);
+        return file && isAllowedAssetType(allowedTypes, file.mime) ? file : null;
+    }, [
+        allowedTypes,
+        filesById
+    ]);
+    const getSelectability = useCallback((key)=>{
+        const id = parseAssetId(key);
+        if (id === null) {
+            return 'hidden';
+        }
+        // `allowedTypes` only stops adding an asset. One the field already holds,
+        // for example from before the schema was narrowed, must stay removable.
+        if (selectedIds.has(id)) {
+            return 'enabled';
+        }
+        const file = filesById.get(id);
+        return file && !isAllowedAssetType(allowedTypes, file.mime) ? 'disabled' : 'enabled';
+    }, [
+        allowedTypes,
+        filesById,
+        selectedIds
+    ]);
+    const toggle = useCallback((key)=>{
+        const id = parseAssetId(key);
+        if (id !== null && selectedIds.has(id)) {
+            setSelection((prev)=>removeFile(prev, id));
+            return;
+        }
+        const file = resolveSelectableFile(key);
+        if (file) {
+            setSelection((prev)=>toggleFile(prev, file, {
+                    multiple
+                }));
+        }
+    }, [
+        multiple,
+        resolveSelectableFile,
+        selectedIds
+    ]);
+    // Select-all over the assets on screen that can be picked, appended in their
+    // on-screen order. Only a multiple-value field offers it.
+    const selectAll = useCallback((orderedKeys)=>{
+        if (!multiple) {
+            return;
+        }
+        const files = orderedKeys.map((key)=>resolveSelectableFile(key)).filter((file)=>file !== null);
+        setSelection((prev)=>addFiles(prev, files));
+    }, [
+        multiple,
+        resolveSelectableFile
+    ]);
+    const selectOnly = useCallback((key)=>{
+        const file = resolveSelectableFile(key);
+        if (file) {
+            setSelection([
+                file
+            ]);
+        }
+    }, [
+        resolveSelectableFile
+    ]);
+    const deselect = useCallback((key)=>{
+        const id = parseAssetId(key);
+        if (id !== null) {
+            setSelection((prev)=>removeFile(prev, id));
+        }
+    }, []);
+    const deselectAll = useCallback((orderedKeys)=>{
+        const ids = new Set(orderedKeys.map((key)=>parseAssetId(key)).filter((id)=>id !== null));
+        setSelection((prev)=>removeFiles(prev, ids));
+    }, []);
+    const clear = useCallback(()=>setSelection([]), []);
+    const selectedKeys = useMemo(()=>new Set(selection.map((file)=>assetKey(file.id))), [
+        selection
+    ]);
+    const isSelected = useCallback((key)=>{
+        const id = parseAssetId(key);
+        return id !== null && hasFile(selection, id);
+    }, [
+        selection
+    ]);
+    const assetSelection = useMemo(()=>({
+            isEnabled: true,
+            // A single-value field holds one asset: nothing to select all of.
+            canSelectAll: multiple,
+            getSelectability,
+            selectedKeys,
+            selectedIds,
+            selectedFolderIds: NO_FOLDERS,
+            anchorKey: null,
+            isSelected,
+            toggle,
+            // Picking is one asset at a time; a Shift+click range picks the target.
+            selectRange: (_orderedKeys, targetKey)=>toggle(targetKey),
+            selectAll,
+            selectOnly,
+            deselect,
+            deselectAll,
+            clear
+        }), [
+        multiple,
+        getSelectability,
+        selectedKeys,
+        selectedIds,
+        isSelected,
+        toggle,
+        selectAll,
+        selectOnly,
+        deselect,
+        deselectAll,
+        clear
+    ]);
+    const moveSelectedFile = useCallback((activeId, overId)=>setSelection((prev)=>moveFile(prev, activeId, overId)), []);
+    const pickerSelection = useMemo(()=>({
+            selection,
+            moveFile: moveSelectedFile
+        }), [
+        selection,
+        moveSelectedFile
+    ]);
+    return /*#__PURE__*/ jsx(PickerSelectionContext.Provider, {
+        value: pickerSelection,
+        children: /*#__PURE__*/ jsx(AssetSelectionContext.Provider, {
+            value: assetSelection,
+            children: children
+        })
+    });
+};
+
+export { PickerSelectionProvider, usePickerSelection };
+//# sourceMappingURL=PickerSelectionProvider.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PickerSelectionProvider.mjs","sources":["../../../../admin/src/components/AssetPickerDialog/PickerSelectionProvider.tsx"],"sourcesContent":["import { createContext, useCallback, useContext, useMemo, useState, type ReactNode } from 'react';\n\nimport {\n  AssetSelectionContext,\n  type AssetSelection,\n  type Selectability,\n} from '../../pages/Assets/hooks/useAssetSelection';\nimport { assetKey, type ItemKey } from '../../pages/Assets/utils/selection';\nimport { isAllowedAssetType, type MediaAllowedTypes } from '../../utils/isAllowedAssetType';\n\nimport {\n  addFiles,\n  hasFile,\n  moveFile,\n  removeFile,\n  removeFiles,\n  toggleFile,\n  type PickerSelection,\n} from './pickerSelection';\n\nimport type { File } from '../../../../shared/contracts/files';\n\ninterface PickerSelectionContextValue {\n  selection: PickerSelection;\n  moveFile: (activeId: number, overId: number) => void;\n}\n\nconst PickerSelectionContext = createContext<PickerSelectionContextValue | null>(null);\n\nexport const usePickerSelection = () => {\n  const context = useContext(PickerSelectionContext);\n\n  if (!context) {\n    throw new Error('usePickerSelection must be used within a PickerSelectionProvider');\n  }\n\n  return context;\n};\n\nconst parseAssetId = (key: ItemKey): number | null => {\n  const [kind, id] = key.split(':');\n\n  return kind === 'asset' ? Number(id) : null;\n};\n\nconst NO_FOLDERS = new Set<number>();\n\ninterface PickerSelectionProviderProps {\n  children: ReactNode;\n  initialSelection: File[];\n  multiple: boolean;\n  allowedTypes?: MediaAllowedTypes | null;\n  /**\n   * The assets on screen. Views select by key, but the selection keeps whole\n   * files, so a newly picked key is resolved against these.\n   */\n  knownFiles: File[];\n}\n\n/**\n * The Content Manager picker's selection, behind the same `AssetSelection`\n * interface the Media Library views read: only assets are selectable, assets\n * outside `allowedTypes` are shown but cannot be picked, and the selection\n * survives folder changes, search, filters and sort.\n */\nexport const PickerSelectionProvider = ({\n  children,\n  initialSelection,\n  multiple,\n  allowedTypes,\n  knownFiles,\n}: PickerSelectionProviderProps) => {\n  const [selection, setSelection] = useState<PickerSelection>(initialSelection);\n\n  const filesById = useMemo(() => {\n    const map = new Map<number, File>();\n    [...knownFiles, ...selection].forEach((file) => map.set(file.id, file));\n    return map;\n  }, [knownFiles, selection]);\n\n  const selectedIds = useMemo(() => new Set(selection.map((file) => file.id)), [selection]);\n\n  const resolveSelectableFile = useCallback(\n    (key: ItemKey): File | null => {\n      const id = parseAssetId(key);\n      const file = id === null ? undefined : filesById.get(id);\n\n      return file && isAllowedAssetType(allowedTypes, file.mime) ? file : null;\n    },\n    [allowedTypes, filesById]\n  );\n\n  const getSelectability = useCallback(\n    (key: ItemKey): Selectability => {\n      const id = parseAssetId(key);\n\n      if (id === null) {\n        return 'hidden';\n      }\n\n      // `allowedTypes` only stops adding an asset. One the field already holds,\n      // for example from before the schema was narrowed, must stay removable.\n      if (selectedIds.has(id)) {\n        return 'enabled';\n      }\n\n      const file = filesById.get(id);\n\n      return file && !isAllowedAssetType(allowedTypes, file.mime) ? 'disabled' : 'enabled';\n    },\n    [allowedTypes, filesById, selectedIds]\n  );\n\n  const toggle = useCallback(\n    (key: ItemKey) => {\n      const id = parseAssetId(key);\n\n      if (id !== null && selectedIds.has(id)) {\n        setSelection((prev) => removeFile(prev, id));\n        return;\n      }\n\n      const file = resolveSelectableFile(key);\n\n      if (file) {\n        setSelection((prev) => toggleFile(prev, file, { multiple }));\n      }\n    },\n    [multiple, resolveSelectableFile, selectedIds]\n  );\n\n  // Select-all over the assets on screen that can be picked, appended in their\n  // on-screen order. Only a multiple-value field offers it.\n  const selectAll = useCallback(\n    (orderedKeys: ItemKey[]) => {\n      if (!multiple) {\n        return;\n      }\n\n      const files = orderedKeys\n        .map((key) => resolveSelectableFile(key))\n        .filter((file): file is File => file !== null);\n\n      setSelection((prev) => addFiles(prev, files));\n    },\n    [multiple, resolveSelectableFile]\n  );\n\n  const selectOnly = useCallback(\n    (key: ItemKey) => {\n      const file = resolveSelectableFile(key);\n\n      if (file) {\n        setSelection([file]);\n      }\n    },\n    [resolveSelectableFile]\n  );\n\n  const deselect = useCallback((key: ItemKey) => {\n    const id = parseAssetId(key);\n\n    if (id !== null) {\n      setSelection((prev) => removeFile(prev, id));\n    }\n  }, []);\n\n  const deselectAll = useCallback((orderedKeys: ItemKey[]) => {\n    const ids = new Set(\n      orderedKeys.map((key) => parseAssetId(key)).filter((id): id is number => id !== null)\n    );\n\n    setSelection((prev) => removeFiles(prev, ids));\n  }, []);\n\n  const clear = useCallback(() => setSelection([]), []);\n\n  const selectedKeys = useMemo(\n    () => new Set(selection.map((file) => assetKey(file.id))),\n    [selection]\n  );\n\n  const isSelected = useCallback(\n    (key: ItemKey) => {\n      const id = parseAssetId(key);\n\n      return id !== null && hasFile(selection, id);\n    },\n    [selection]\n  );\n\n  const assetSelection = useMemo<AssetSelection>(\n    () => ({\n      isEnabled: true,\n      // A single-value field holds one asset: nothing to select all of.\n      canSelectAll: multiple,\n      getSelectability,\n      selectedKeys,\n      selectedIds,\n      selectedFolderIds: NO_FOLDERS,\n      anchorKey: null,\n      isSelected,\n      toggle,\n      // Picking is one asset at a time; a Shift+click range picks the target.\n      selectRange: (_orderedKeys, targetKey) => toggle(targetKey),\n      selectAll,\n      selectOnly,\n      deselect,\n      deselectAll,\n      clear,\n    }),\n    [\n      multiple,\n      getSelectability,\n      selectedKeys,\n      selectedIds,\n      isSelected,\n      toggle,\n      selectAll,\n      selectOnly,\n      deselect,\n      deselectAll,\n      clear,\n    ]\n  );\n\n  const moveSelectedFile = useCallback(\n    (activeId: number, overId: number) => setSelection((prev) => moveFile(prev, activeId, overId)),\n    []\n  );\n\n  const pickerSelection = useMemo(\n    () => ({ selection, moveFile: moveSelectedFile }),\n    [selection, moveSelectedFile]\n  );\n\n  return (\n    <PickerSelectionContext.Provider value={pickerSelection}>\n      <AssetSelectionContext.Provider value={assetSelection}>\n        {children}\n      </AssetSelectionContext.Provider>\n    </PickerSelectionContext.Provider>\n  );\n};\n"],"names":["PickerSelectionContext","createContext","usePickerSelection","context","useContext","Error","parseAssetId","key","kind","id","split","Number","NO_FOLDERS","Set","PickerSelectionProvider","children","initialSelection","multiple","allowedTypes","knownFiles","selection","setSelection","useState","filesById","useMemo","map","Map","forEach","file","set","selectedIds","resolveSelectableFile","useCallback","undefined","get","isAllowedAssetType","mime","getSelectability","has","toggle","prev","removeFile","toggleFile","selectAll","orderedKeys","files","filter","addFiles","selectOnly","deselect","deselectAll","ids","removeFiles","clear","selectedKeys","assetKey","isSelected","hasFile","assetSelection","isEnabled","canSelectAll","selectedFolderIds","anchorKey","selectRange","_orderedKeys","targetKey","moveSelectedFile","activeId","overId","moveFile","pickerSelection","_jsx","Provider","value","AssetSelectionContext"],"mappings":"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"}

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

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