@strapi/upload 5.52.0 → 5.52.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/admin/future/components/TruncatedText.js +76 -0
- package/dist/admin/future/components/TruncatedText.js.map +1 -0
- package/dist/admin/future/components/TruncatedText.mjs +74 -0
- package/dist/admin/future/components/TruncatedText.mjs.map +1 -0
- package/dist/admin/future/hooks/useTracking.js +57 -0
- package/dist/admin/future/hooks/useTracking.js.map +1 -0
- package/dist/admin/future/hooks/useTracking.mjs +53 -0
- package/dist/admin/future/hooks/useTracking.mjs.map +1 -0
- package/dist/admin/future/pages/Assets/AssetsPage.js +31 -0
- package/dist/admin/future/pages/Assets/AssetsPage.js.map +1 -1
- package/dist/admin/future/pages/Assets/AssetsPage.mjs +31 -0
- package/dist/admin/future/pages/Assets/AssetsPage.mjs.map +1 -1
- package/dist/admin/future/pages/Assets/components/AssetActionsMenu.js +9 -6
- package/dist/admin/future/pages/Assets/components/AssetActionsMenu.js.map +1 -1
- package/dist/admin/future/pages/Assets/components/AssetActionsMenu.mjs +9 -6
- package/dist/admin/future/pages/Assets/components/AssetActionsMenu.mjs.map +1 -1
- package/dist/admin/future/pages/Assets/components/AssetDetails/AssetDetailsDrawer.js +21 -1
- package/dist/admin/future/pages/Assets/components/AssetDetails/AssetDetailsDrawer.js.map +1 -1
- package/dist/admin/future/pages/Assets/components/AssetDetails/AssetDetailsDrawer.mjs +21 -1
- package/dist/admin/future/pages/Assets/components/AssetDetails/AssetDetailsDrawer.mjs.map +1 -1
- package/dist/admin/future/pages/Assets/components/AssetsGrid.js +3 -4
- package/dist/admin/future/pages/Assets/components/AssetsGrid.js.map +1 -1
- package/dist/admin/future/pages/Assets/components/AssetsGrid.mjs +4 -5
- package/dist/admin/future/pages/Assets/components/AssetsGrid.mjs.map +1 -1
- package/dist/admin/future/pages/Assets/components/AssetsSearchInput.js +11 -1
- package/dist/admin/future/pages/Assets/components/AssetsSearchInput.js.map +1 -1
- package/dist/admin/future/pages/Assets/components/AssetsSearchInput.mjs +11 -1
- package/dist/admin/future/pages/Assets/components/AssetsSearchInput.mjs.map +1 -1
- package/dist/admin/future/pages/Assets/components/AssetsTable.js +6 -4
- package/dist/admin/future/pages/Assets/components/AssetsTable.js.map +1 -1
- package/dist/admin/future/pages/Assets/components/AssetsTable.mjs +6 -4
- package/dist/admin/future/pages/Assets/components/AssetsTable.mjs.map +1 -1
- package/dist/admin/future/pages/Assets/components/FilterMenu.js +18 -2
- package/dist/admin/future/pages/Assets/components/FilterMenu.js.map +1 -1
- package/dist/admin/future/pages/Assets/components/FilterMenu.mjs +18 -2
- package/dist/admin/future/pages/Assets/components/FilterMenu.mjs.map +1 -1
- package/dist/admin/future/pages/Assets/components/FolderActionsMenu.js +9 -7
- package/dist/admin/future/pages/Assets/components/FolderActionsMenu.js.map +1 -1
- package/dist/admin/future/pages/Assets/components/FolderActionsMenu.mjs +9 -7
- package/dist/admin/future/pages/Assets/components/FolderActionsMenu.mjs.map +1 -1
- package/dist/admin/future/pages/Assets/components/FolderFormDialog.js +12 -0
- package/dist/admin/future/pages/Assets/components/FolderFormDialog.js.map +1 -1
- package/dist/admin/future/pages/Assets/components/FolderFormDialog.mjs +12 -0
- package/dist/admin/future/pages/Assets/components/FolderFormDialog.mjs.map +1 -1
- package/dist/admin/future/pages/Assets/components/FolderTree/FolderTree.js +21 -38
- package/dist/admin/future/pages/Assets/components/FolderTree/FolderTree.js.map +1 -1
- package/dist/admin/future/pages/Assets/components/FolderTree/FolderTree.mjs +23 -40
- package/dist/admin/future/pages/Assets/components/FolderTree/FolderTree.mjs.map +1 -1
- package/dist/admin/future/pages/Assets/components/SortMenu.js +14 -0
- package/dist/admin/future/pages/Assets/components/SortMenu.js.map +1 -1
- package/dist/admin/future/pages/Assets/components/SortMenu.mjs +14 -0
- package/dist/admin/future/pages/Assets/components/SortMenu.mjs.map +1 -1
- package/dist/admin/future/pages/Assets/hooks/useAssetSelection.js +5 -0
- package/dist/admin/future/pages/Assets/hooks/useAssetSelection.js.map +1 -1
- package/dist/admin/future/pages/Assets/hooks/useAssetSelection.mjs +6 -1
- package/dist/admin/future/pages/Assets/hooks/useAssetSelection.mjs.map +1 -1
- package/dist/admin/future/pages/Assets/utils/selection.js +17 -0
- package/dist/admin/future/pages/Assets/utils/selection.js.map +1 -1
- package/dist/admin/future/pages/Assets/utils/selection.mjs +17 -1
- package/dist/admin/future/pages/Assets/utils/selection.mjs.map +1 -1
- package/dist/admin/future/services/api.js +7 -8
- package/dist/admin/future/services/api.js.map +1 -1
- package/dist/admin/future/services/api.mjs +7 -8
- package/dist/admin/future/services/api.mjs.map +1 -1
- package/dist/admin/future/services/assets.js +11 -23
- package/dist/admin/future/services/assets.js.map +1 -1
- package/dist/admin/future/services/assets.mjs +11 -23
- package/dist/admin/future/services/assets.mjs.map +1 -1
- package/dist/admin/hooks/useAIMetadataJob.js +1 -1
- package/dist/admin/hooks/useAIMetadataJob.js.map +1 -1
- package/dist/admin/hooks/useAIMetadataJob.mjs +1 -1
- package/dist/admin/hooks/useAIMetadataJob.mjs.map +1 -1
- package/dist/admin/pages/SettingsPage/SettingsPage.js +2 -2
- package/dist/admin/pages/SettingsPage/SettingsPage.js.map +1 -1
- package/dist/admin/pages/SettingsPage/SettingsPage.mjs +2 -2
- package/dist/admin/pages/SettingsPage/SettingsPage.mjs.map +1 -1
- package/dist/admin/src/future/components/TruncatedText.d.ts +32 -0
- package/dist/admin/src/future/hooks/useTracking.d.ts +29 -0
- package/dist/admin/src/future/pages/Assets/components/AssetActionsMenu.d.ts +5 -3
- package/dist/admin/src/future/pages/Assets/components/FolderActionsMenu.d.ts +5 -4
- package/dist/admin/src/future/pages/Assets/hooks/useAssetSelection.d.ts +2 -0
- package/dist/admin/src/future/pages/Assets/utils/selection.d.ts +10 -0
- package/dist/admin/src/future/services/api.d.ts +6 -7
- package/dist/server/controllers/admin-file.js +27 -9
- package/dist/server/controllers/admin-file.js.map +1 -1
- package/dist/server/controllers/admin-file.mjs +27 -9
- package/dist/server/controllers/admin-file.mjs.map +1 -1
- package/dist/server/controllers/admin-upload.js +24 -8
- package/dist/server/controllers/admin-upload.js.map +1 -1
- package/dist/server/controllers/admin-upload.mjs +24 -8
- package/dist/server/controllers/admin-upload.mjs.map +1 -1
- package/dist/server/routes/admin.js +41 -21
- package/dist/server/routes/admin.js.map +1 -1
- package/dist/server/routes/admin.mjs +41 -21
- package/dist/server/routes/admin.mjs.map +1 -1
- package/dist/server/services/ai-metadata.js.map +1 -1
- package/dist/server/services/ai-metadata.mjs.map +1 -1
- package/dist/server/src/controllers/admin-file.d.ts +29 -8
- package/dist/server/src/controllers/admin-file.d.ts.map +1 -1
- package/dist/server/src/controllers/admin-upload.d.ts +20 -4
- package/dist/server/src/controllers/admin-upload.d.ts.map +1 -1
- package/dist/server/src/controllers/index.d.ts +4 -4
- package/dist/server/src/index.d.ts +4 -4
- package/dist/server/src/routes/admin.d.ts.map +1 -1
- package/dist/server/src/services/ai-metadata.d.ts +2 -2
- package/dist/server/src/services/ai-metadata.d.ts.map +1 -1
- package/dist/shared/contracts/ai-metadata-jobs.d.ts +10 -32
- package/dist/shared/contracts/ai-metadata-jobs.d.ts.map +1 -1
- package/dist/shared/contracts/files.d.ts +10 -10
- package/dist/shared/contracts/files.d.ts.map +1 -1
- package/package.json +6 -6
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FolderTree.mjs","sources":["../../../../../../../admin/src/future/pages/Assets/components/FolderTree/FolderTree.tsx"],"sourcesContent":["import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';\n\nimport { SubNav } from '@strapi/admin/strapi-admin';\nimport { Box, Flex, IconButton, Loader, Tooltip, Typography } from '@strapi/design-system';\nimport { ChevronDown, Folder as FolderIcon, House } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { css, styled } from 'styled-components';\n\nimport { useGetFolderStructureQuery } from '../../../../services/folders';\nimport { getTranslationKey } from '../../../../utils/translations';\nimport { useAssetsDndOptional } from '../Dnd/AssetsDndProvider';\nimport { useFolderTreeDroppable } from '../Dnd/useFolderTreeDroppable';\n\nimport { useSpringLoadedExpand } from './useSpringLoadedExpand';\n\nimport type { FolderNode } from '../../../../../../../shared/contracts/folders';\n\n/* -------------------------------------------------------------------------------------------------\n * RowButton — shared row styling aligned with admin SubNav.Link\n * -----------------------------------------------------------------------------------------------*/\n\nconst RowButton = styled.button<{\n $isActive: boolean;\n $isValidDropTarget?: boolean;\n $isInvalidDropCursor?: boolean;\n $isMovePending?: boolean;\n}>`\n display: flex;\n align-items: center;\n gap: ${({ theme }) => theme.spaces[2]};\n width: 100%;\n min-height: 3.2rem;\n padding: ${({ theme }) => `${theme.spaces[1]} ${theme.spaces[2]}`};\n border: 0;\n background: ${({ $isActive, $isValidDropTarget, theme }) => {\n if ($isValidDropTarget) {\n return theme.colors.primary100;\n }\n\n return $isActive ? theme.colors.primary100 : 'transparent';\n }};\n color: ${({ $isActive, theme }) =>\n $isActive ? theme.colors.primary700 : theme.colors.neutral800};\n border-radius: ${({ theme }) => theme.borderRadius};\n cursor: ${({ $isMovePending, $isInvalidDropCursor }) => {\n if ($isMovePending) {\n return 'wait';\n }\n\n return $isInvalidDropCursor ? 'not-allowed' : 'pointer';\n }};\n text-align: left;\n font: inherit;\n pointer-events: ${({ $isMovePending }) => ($isMovePending ? 'none' : 'auto')};\n\n ${({ $isValidDropTarget, theme }) =>\n $isValidDropTarget &&\n css`\n outline: 1px dashed ${theme.colors.primary600};\n outline-offset: -1px;\n `}\n\n &:hover {\n background: ${({ $isActive, $isValidDropTarget, theme }) => {\n if ($isValidDropTarget) {\n return theme.colors.primary100;\n }\n\n return $isActive ? theme.colors.primary100 : theme.colors.neutral100;\n }};\n }\n\n &:focus-visible {\n outline: 2px solid ${({ theme }) => theme.colors.primary600};\n outline-offset: -2px;\n }\n`;\n\nconst TreeRow = styled(Flex)<{\n $isValidDropTarget?: boolean;\n $isInvalidDropCursor?: boolean;\n $isMovePending?: boolean;\n}>`\n cursor: ${({ $isMovePending, $isInvalidDropCursor }) => {\n if ($isMovePending) {\n return 'wait';\n }\n\n return $isInvalidDropCursor ? 'not-allowed' : 'default';\n }};\n pointer-events: ${({ $isMovePending }) => ($isMovePending ? 'none' : 'auto')};\n border-radius: ${({ theme }) => theme.borderRadius};\n\n ${({ $isValidDropTarget, theme }) =>\n $isValidDropTarget &&\n css`\n background: ${theme.colors.primary100};\n outline: 1px dashed ${theme.colors.primary600};\n outline-offset: -1px;\n `}\n`;\n\n/* -------------------------------------------------------------------------------------------------\n * useExpandedFolders — local expand/collapse state\n * -----------------------------------------------------------------------------------------------*/\n\nconst findAncestorIds = (\n nodes: FolderNode[],\n targetId: number,\n trail: number[] = []\n): number[] | null => {\n for (const node of nodes) {\n if (node.id === targetId) {\n return trail;\n }\n\n if (node.children?.length) {\n const nextTrail = node.id != null ? [...trail, node.id] : trail;\n const found = findAncestorIds(node.children, targetId, nextTrail);\n if (found !== null) {\n return found;\n }\n }\n }\n\n return null;\n};\n\nconst useExpandedFolders = (folderStructure: FolderNode[], currentFolderId: number | null) => {\n const [expandedIds, setExpandedIds] = useState<Set<number>>(() => new Set());\n\n useEffect(() => {\n if (currentFolderId == null) {\n return;\n }\n\n const ancestors = findAncestorIds(folderStructure, currentFolderId);\n if (!ancestors || ancestors.length === 0) {\n return;\n }\n\n setExpandedIds((prev) => {\n const next = new Set(prev);\n let changed = false;\n for (const id of ancestors) {\n if (!next.has(id)) {\n next.add(id);\n changed = true;\n }\n }\n return changed ? next : prev;\n });\n }, [folderStructure, currentFolderId]);\n\n const toggleExpanded = useCallback((id: number) => {\n setExpandedIds((prev) => {\n const next = new Set(prev);\n if (next.has(id)) {\n next.delete(id);\n } else {\n next.add(id);\n }\n return next;\n });\n }, []);\n\n const expandFolder = useCallback((id: number) => {\n setExpandedIds((prev) => {\n if (prev.has(id)) {\n return prev;\n }\n\n const next = new Set(prev);\n next.add(id);\n return next;\n });\n }, []);\n\n const isExpanded = useCallback((id: number) => expandedIds.has(id), [expandedIds]);\n\n return { isExpanded, toggleExpanded, expandFolder };\n};\n\n/* -------------------------------------------------------------------------------------------------\n * TruncatedFolderName — tooltip when the label is ellipsized\n * -----------------------------------------------------------------------------------------------*/\n\nconst TruncatedFolderName = ({ name, isActive }: { name: string; isActive: boolean }) => {\n const textRef = useRef<HTMLSpanElement>(null);\n const [isTruncated, setIsTruncated] = useState(false);\n\n useLayoutEffect(() => {\n const el = textRef.current;\n if (!el) {\n return;\n }\n\n const checkTruncation = () => {\n setIsTruncated(el.scrollWidth > el.clientWidth);\n };\n\n checkTruncation();\n\n const observer = new ResizeObserver(checkTruncation);\n observer.observe(el);\n\n return () => observer.disconnect();\n }, [name]);\n\n const label = (\n <Typography\n ref={textRef}\n variant=\"omega\"\n fontWeight={isActive ? 'semiBold' : 'regular'}\n ellipsis\n >\n {name}\n </Typography>\n );\n\n if (isTruncated) {\n return <Tooltip label={name}>{label}</Tooltip>;\n }\n\n return label;\n};\n\n/* -------------------------------------------------------------------------------------------------\n * NavList — unstyled list for tree rows\n * -----------------------------------------------------------------------------------------------*/\n\nconst NavList = styled.ul`\n list-style: none;\n margin: 0;\n padding: 0;\n`;\n\n/* -------------------------------------------------------------------------------------------------\n * FolderTreeItem — single tree row (internal)\n * -----------------------------------------------------------------------------------------------*/\n\nconst INDENT_PER_LEVEL_REM = 1.6;\n\nconst RotatingChevron = styled(ChevronDown)<{ $expanded: boolean }>`\n transform: rotate(${({ $expanded }) => ($expanded ? '0deg' : '-90deg')});\n transition: transform 0.2s ease;\n`;\n\ninterface FolderTreeItemProps {\n node: FolderNode;\n level: number;\n currentFolderId: number | null;\n showActiveFolder: boolean;\n isExpanded: (id: number) => boolean;\n onToggle: (id: number) => void;\n onExpand: (id: number) => void;\n onSelect: (folderId: number) => void;\n isMovePending: boolean;\n}\n\ninterface FolderTreeItemInnerProps extends Omit<FolderTreeItemProps, 'node'> {\n id: number;\n name: string;\n folderChildren: FolderNode[];\n}\n\nconst FolderTreeItemInner = ({\n id,\n name,\n folderChildren,\n level,\n currentFolderId,\n showActiveFolder,\n isExpanded,\n onToggle,\n onExpand,\n onSelect,\n isMovePending,\n}: FolderTreeItemInnerProps) => {\n const { formatMessage } = useIntl();\n const hasChildren = folderChildren.length > 0;\n const isFolderExpanded = isExpanded(id);\n const isActive = showActiveFolder && currentFolderId === id;\n\n const {\n droppable: { setNodeRef },\n isOver,\n showValidDropHighlight,\n showInvalidDropCursor,\n } = useFolderTreeDroppable({ id, name });\n\n const handleExpand = useCallback(() => onExpand(id), [id, onExpand]);\n\n useSpringLoadedExpand({\n isOver,\n canExpand: hasChildren && !isFolderExpanded,\n onExpand: handleExpand,\n });\n\n // TODO: full `role=\"tree\"` + arrow-key treeview navigation before revamp GA\n // if an accessibility audit requires it (v1 is button rows only).\n return (\n <li>\n <TreeRow\n ref={setNodeRef}\n alignItems=\"center\"\n paddingLeft={`${level * INDENT_PER_LEVEL_REM}rem`}\n gap={1}\n $isValidDropTarget={showValidDropHighlight}\n $isInvalidDropCursor={showInvalidDropCursor}\n $isMovePending={isMovePending}\n >\n <IconButton\n label={formatMessage(\n {\n id: getTranslationKey(\n isFolderExpanded ? 'sidebar.tree.collapse' : 'sidebar.tree.expand'\n ),\n defaultMessage: isFolderExpanded ? 'Collapse {name}' : 'Expand {name}',\n },\n { name }\n )}\n onClick={(event: React.MouseEvent) => {\n event.stopPropagation();\n onToggle(id);\n }}\n variant=\"ghost\"\n withTooltip={false}\n aria-expanded={isFolderExpanded}\n >\n <RotatingChevron $expanded={isFolderExpanded} fill=\"neutral500\" />\n </IconButton>\n\n <Box flex=\"1\" minWidth={0}>\n <RowButton\n type=\"button\"\n $isActive={isActive}\n $isValidDropTarget={showValidDropHighlight}\n $isInvalidDropCursor={showInvalidDropCursor}\n $isMovePending={isMovePending}\n aria-current={isActive ? 'page' : undefined}\n onClick={() => onSelect(id)}\n data-testid={`folder-tree-node-${id}`}\n data-folder-id={id}\n >\n <TruncatedFolderName name={name} isActive={isActive} />\n </RowButton>\n </Box>\n </TreeRow>\n\n {hasChildren && isFolderExpanded && (\n <NavList>\n {folderChildren.map((child) => (\n <FolderTreeItem\n key={child.id ?? child.name}\n node={child}\n level={level + 1}\n currentFolderId={currentFolderId}\n showActiveFolder={showActiveFolder}\n isExpanded={isExpanded}\n onToggle={onToggle}\n onExpand={onExpand}\n onSelect={onSelect}\n isMovePending={isMovePending}\n />\n ))}\n </NavList>\n )}\n </li>\n );\n};\n\nconst FolderTreeItem = ({ node, ...props }: FolderTreeItemProps) => {\n if (node.id == null) {\n return null;\n }\n\n return (\n <FolderTreeItemInner\n {...props}\n id={node.id}\n name={node.name ?? ''}\n folderChildren={node.children ?? []}\n />\n );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * FolderTree — public sidebar component\n * -----------------------------------------------------------------------------------------------*/\n\ninterface FolderTreeProps {\n currentFolderId: number | null;\n /**\n * Set to `false` while a global asset search is active: the results span the\n * whole library, so highlighting one folder would misrepresent them.\n * */\n showActiveFolder?: boolean;\n onSelectFolder: (folderId: number | null) => void;\n}\n\n/**\n * Left-rail navigation for the Media Library. Fetches folder structure internally\n * and renders:\n *\n * 1. A \"Media library\" title\n * 2. A filter input that prunes the tree to matching destinations\n * 3. A \"Home\" entry that clears the folder query param\n * 4. A \"FOLDERS\" section header\n * 5. The folder tree itself\n *\n * The filter is purely local: it never touches the URL and never affects the\n * asset list, which has its own independent search in the content toolbar.\n *\n * Presentational with respect to routing — navigation is delegated to the parent\n * via `onSelectFolder` so the URL stays the single source of truth (see\n * `useFolderNavigation`).\n */\nexport const FolderTree = ({\n currentFolderId,\n showActiveFolder = true,\n onSelectFolder,\n}: FolderTreeProps) => {\n const { formatMessage } = useIntl();\n const { data: folderStructure = [], isLoading, isError } = useGetFolderStructureQuery();\n const { isExpanded, toggleExpanded, expandFolder } = useExpandedFolders(\n folderStructure,\n currentFolderId\n );\n const { isMovePending } = useAssetsDndOptional() ?? { isMovePending: false };\n\n const isHomeActive = showActiveFolder && currentFolderId == null;\n const homeLabel = formatMessage({\n id: getTranslationKey('sidebar.home'),\n defaultMessage: 'Home',\n });\n\n const {\n droppable: { setNodeRef: setHomeDropRef },\n showValidDropHighlight: showHomeValidDropHighlight,\n showInvalidDropCursor: showHomeInvalidDropCursor,\n } = useFolderTreeDroppable({ id: null, name: homeLabel });\n\n return (\n <SubNav.Main\n aria-label={formatMessage({\n id: getTranslationKey('sidebar.tree.aria-label'),\n defaultMessage: 'Media library folders',\n })}\n >\n <SubNav.Header\n label={formatMessage({\n id: getTranslationKey('sidebar.title'),\n defaultMessage: 'Media library',\n })}\n />\n\n <SubNav.Content>\n <Flex direction=\"column\" alignItems=\"stretch\" gap={1} padding={3}>\n <RowButton\n ref={setHomeDropRef}\n type=\"button\"\n $isActive={isHomeActive}\n $isValidDropTarget={showHomeValidDropHighlight}\n $isInvalidDropCursor={showHomeInvalidDropCursor}\n $isMovePending={isMovePending}\n aria-current={isHomeActive ? 'page' : undefined}\n onClick={() => onSelectFolder(null)}\n data-testid=\"folder-tree-home\"\n >\n <House aria-hidden width=\"1.6rem\" height=\"1.6rem\" />\n <Typography variant=\"omega\" fontWeight={isHomeActive ? 'semiBold' : 'regular'}>\n {homeLabel}\n </Typography>\n </RowButton>\n\n <Box marginTop={4}>\n <Flex\n alignItems=\"center\"\n gap={1}\n paddingTop={1}\n paddingBottom={1}\n paddingLeft={2}\n paddingRight={2}\n marginBottom={2}\n >\n <FolderIcon aria-hidden width=\"1.6rem\" height=\"1.6rem\" fill=\"neutral500\" />\n <Typography\n variant=\"sigma\"\n textColor=\"neutral600\"\n style={{ textTransform: 'uppercase' }}\n >\n {formatMessage({\n id: getTranslationKey('sidebar.folders'),\n defaultMessage: 'Folders',\n })}\n </Typography>\n </Flex>\n\n {isLoading ? (\n // TODO: revisit loading state before revamp GA\n <Flex justifyContent=\"center\" padding={1} paddingTop={2}>\n <Loader>\n {formatMessage({\n id: getTranslationKey('sidebar.tree.loading'),\n defaultMessage: 'Loading folders...',\n })}\n </Loader>\n </Flex>\n ) : isError ? (\n // TODO: revisit error state before revamp GA\n <Box padding={1} paddingTop={2}>\n <Typography variant=\"pi\" textColor=\"danger600\">\n {formatMessage({\n id: getTranslationKey('sidebar.tree.error'),\n defaultMessage: 'Could not load folders.',\n })}\n </Typography>\n </Box>\n ) : folderStructure.length === 0 ? (\n // TODO: revisit empty state before revamp GA\n <Box padding={1} paddingTop={2}>\n <Typography variant=\"pi\" textColor=\"neutral500\">\n {formatMessage({\n id: getTranslationKey('sidebar.tree.empty'),\n defaultMessage: 'No folders yet',\n })}\n </Typography>\n </Box>\n ) : (\n <NavList>\n {folderStructure.map((node) => (\n <FolderTreeItem\n key={node.id ?? node.name}\n node={node}\n level={0}\n currentFolderId={currentFolderId}\n showActiveFolder={showActiveFolder}\n isExpanded={isExpanded}\n onToggle={toggleExpanded}\n onExpand={expandFolder}\n onSelect={onSelectFolder}\n isMovePending={isMovePending}\n />\n ))}\n </NavList>\n )}\n </Box>\n </Flex>\n </SubNav.Content>\n </SubNav.Main>\n );\n};\n"],"names":["RowButton","styled","button","theme","spaces","$isActive","$isValidDropTarget","colors","primary100","primary700","neutral800","borderRadius","$isMovePending","$isInvalidDropCursor","css","primary600","neutral100","TreeRow","Flex","findAncestorIds","nodes","targetId","trail","node","id","children","length","nextTrail","found","useExpandedFolders","folderStructure","currentFolderId","expandedIds","setExpandedIds","useState","Set","useEffect","ancestors","prev","next","changed","has","add","toggleExpanded","useCallback","delete","expandFolder","isExpanded","TruncatedFolderName","name","isActive","textRef","useRef","isTruncated","setIsTruncated","useLayoutEffect","el","current","checkTruncation","scrollWidth","clientWidth","observer","ResizeObserver","observe","disconnect","label","_jsx","Typography","ref","variant","fontWeight","ellipsis","Tooltip","NavList","ul","INDENT_PER_LEVEL_REM","RotatingChevron","ChevronDown","$expanded","FolderTreeItemInner","folderChildren","level","showActiveFolder","onToggle","onExpand","onSelect","isMovePending","formatMessage","useIntl","hasChildren","isFolderExpanded","droppable","setNodeRef","isOver","showValidDropHighlight","showInvalidDropCursor","useFolderTreeDroppable","handleExpand","useSpringLoadedExpand","canExpand","_jsxs","li","alignItems","paddingLeft","gap","IconButton","getTranslationKey","defaultMessage","onClick","event","stopPropagation","withTooltip","aria-expanded","fill","Box","flex","minWidth","type","aria-current","undefined","data-testid","data-folder-id","map","child","FolderTreeItem","props","FolderTree","onSelectFolder","data","isLoading","isError","useGetFolderStructureQuery","useAssetsDndOptional","isHomeActive","homeLabel","setHomeDropRef","showHomeValidDropHighlight","showHomeInvalidDropCursor","SubNav","Main","aria-label","Header","Content","direction","padding","House","aria-hidden","width","height","marginTop","paddingTop","paddingBottom","paddingRight","marginBottom","FolderIcon","textColor","style","textTransform","justifyContent","Loader"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"FolderTree.mjs","sources":["../../../../../../../admin/src/future/pages/Assets/components/FolderTree/FolderTree.tsx"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react';\n\nimport { SubNav } from '@strapi/admin/strapi-admin';\nimport { Box, Flex, IconButton, Loader, Typography } from '@strapi/design-system';\nimport { ChevronDown, Folder as FolderIcon, House } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { css, styled } from 'styled-components';\n\nimport { TruncatedText } from '../../../../components/TruncatedText';\nimport { useGetFolderStructureQuery } from '../../../../services/folders';\nimport { getTranslationKey } from '../../../../utils/translations';\nimport { useAssetsDndOptional } from '../Dnd/AssetsDndProvider';\nimport { useFolderTreeDroppable } from '../Dnd/useFolderTreeDroppable';\n\nimport { useSpringLoadedExpand } from './useSpringLoadedExpand';\n\nimport type { FolderNode } from '../../../../../../../shared/contracts/folders';\n\n/* -------------------------------------------------------------------------------------------------\n * RowButton — shared row styling aligned with admin SubNav.Link\n * -----------------------------------------------------------------------------------------------*/\n\nconst RowButton = styled.button<{\n $isActive: boolean;\n $isValidDropTarget?: boolean;\n $isInvalidDropCursor?: boolean;\n $isMovePending?: boolean;\n}>`\n display: flex;\n align-items: center;\n gap: ${({ theme }) => theme.spaces[2]};\n width: 100%;\n min-height: 3.2rem;\n padding: ${({ theme }) => `${theme.spaces[1]} ${theme.spaces[2]}`};\n border: 0;\n background: ${({ $isActive, $isValidDropTarget, theme }) => {\n if ($isValidDropTarget) {\n return theme.colors.primary100;\n }\n\n return $isActive ? theme.colors.primary100 : 'transparent';\n }};\n color: ${({ $isActive, theme }) =>\n $isActive ? theme.colors.primary700 : theme.colors.neutral800};\n border-radius: ${({ theme }) => theme.borderRadius};\n cursor: ${({ $isMovePending, $isInvalidDropCursor }) => {\n if ($isMovePending) {\n return 'wait';\n }\n\n return $isInvalidDropCursor ? 'not-allowed' : 'pointer';\n }};\n text-align: left;\n font: inherit;\n pointer-events: ${({ $isMovePending }) => ($isMovePending ? 'none' : 'auto')};\n\n ${({ $isValidDropTarget, theme }) =>\n $isValidDropTarget &&\n css`\n outline: 1px dashed ${theme.colors.primary600};\n outline-offset: -1px;\n `}\n\n &:hover {\n background: ${({ $isActive, $isValidDropTarget, theme }) => {\n if ($isValidDropTarget) {\n return theme.colors.primary100;\n }\n\n return $isActive ? theme.colors.primary100 : theme.colors.neutral100;\n }};\n }\n\n &:focus-visible {\n outline: 2px solid ${({ theme }) => theme.colors.primary600};\n outline-offset: -2px;\n }\n`;\n\nconst TreeRow = styled(Flex)<{\n $isValidDropTarget?: boolean;\n $isInvalidDropCursor?: boolean;\n $isMovePending?: boolean;\n}>`\n cursor: ${({ $isMovePending, $isInvalidDropCursor }) => {\n if ($isMovePending) {\n return 'wait';\n }\n\n return $isInvalidDropCursor ? 'not-allowed' : 'default';\n }};\n pointer-events: ${({ $isMovePending }) => ($isMovePending ? 'none' : 'auto')};\n border-radius: ${({ theme }) => theme.borderRadius};\n\n ${({ $isValidDropTarget, theme }) =>\n $isValidDropTarget &&\n css`\n background: ${theme.colors.primary100};\n outline: 1px dashed ${theme.colors.primary600};\n outline-offset: -1px;\n `}\n`;\n\n/* -------------------------------------------------------------------------------------------------\n * useExpandedFolders — local expand/collapse state\n * -----------------------------------------------------------------------------------------------*/\n\nconst findAncestorIds = (\n nodes: FolderNode[],\n targetId: number,\n trail: number[] = []\n): number[] | null => {\n for (const node of nodes) {\n if (node.id === targetId) {\n return trail;\n }\n\n if (node.children?.length) {\n const nextTrail = node.id != null ? [...trail, node.id] : trail;\n const found = findAncestorIds(node.children, targetId, nextTrail);\n if (found !== null) {\n return found;\n }\n }\n }\n\n return null;\n};\n\nconst useExpandedFolders = (folderStructure: FolderNode[], currentFolderId: number | null) => {\n const [expandedIds, setExpandedIds] = useState<Set<number>>(() => new Set());\n\n useEffect(() => {\n if (currentFolderId == null) {\n return;\n }\n\n const ancestors = findAncestorIds(folderStructure, currentFolderId);\n if (!ancestors || ancestors.length === 0) {\n return;\n }\n\n setExpandedIds((prev) => {\n const next = new Set(prev);\n let changed = false;\n for (const id of ancestors) {\n if (!next.has(id)) {\n next.add(id);\n changed = true;\n }\n }\n return changed ? next : prev;\n });\n }, [folderStructure, currentFolderId]);\n\n const toggleExpanded = useCallback((id: number) => {\n setExpandedIds((prev) => {\n const next = new Set(prev);\n if (next.has(id)) {\n next.delete(id);\n } else {\n next.add(id);\n }\n return next;\n });\n }, []);\n\n const expandFolder = useCallback((id: number) => {\n setExpandedIds((prev) => {\n if (prev.has(id)) {\n return prev;\n }\n\n const next = new Set(prev);\n next.add(id);\n return next;\n });\n }, []);\n\n const isExpanded = useCallback((id: number) => expandedIds.has(id), [expandedIds]);\n\n return { isExpanded, toggleExpanded, expandFolder };\n};\n\n/* -------------------------------------------------------------------------------------------------\n * NavList — unstyled list for tree rows\n * -----------------------------------------------------------------------------------------------*/\n\nconst NavList = styled.ul`\n list-style: none;\n margin: 0;\n padding: 0;\n\n /* Grid rather than block, and load-bearing despite rendering a single column:\n a minmax(0, 1fr) track contributes a minimum of 0, which is what stops each\n row propagating the min-content width of its own label.\n\n Folder names ellipsize, and text-overflow needs white-space: nowrap — so a\n label's min-content width is the entire name, and no box lays out narrower\n than its min-content. In block flow that floor travels up to the SubNav\n ScrollArea, which widens the rail and shows a horizontal scrollbar instead of\n truncating the name. Nesting makes it worse: the indent is spent before the\n label is measured, so shorter names trigger it the deeper you go.\n\n Measured in Chromium — dropping either declaration brings the scrollbar\n back, and neither min-width nor overflow on the row is a substitute. */\n display: grid;\n grid-template-columns: minmax(0, 1fr);\n`;\n\n/* -------------------------------------------------------------------------------------------------\n * FolderTreeItem — single tree row (internal)\n * -----------------------------------------------------------------------------------------------*/\n\nconst INDENT_PER_LEVEL_REM = 1.6;\n\nconst RotatingChevron = styled(ChevronDown)<{ $expanded: boolean }>`\n transform: rotate(${({ $expanded }) => ($expanded ? '0deg' : '-90deg')});\n transition: transform 0.2s ease;\n`;\n\ninterface FolderTreeItemProps {\n node: FolderNode;\n level: number;\n currentFolderId: number | null;\n showActiveFolder: boolean;\n isExpanded: (id: number) => boolean;\n onToggle: (id: number) => void;\n onExpand: (id: number) => void;\n onSelect: (folderId: number) => void;\n isMovePending: boolean;\n}\n\ninterface FolderTreeItemInnerProps extends Omit<FolderTreeItemProps, 'node'> {\n id: number;\n name: string;\n folderChildren: FolderNode[];\n}\n\nconst FolderTreeItemInner = ({\n id,\n name,\n folderChildren,\n level,\n currentFolderId,\n showActiveFolder,\n isExpanded,\n onToggle,\n onExpand,\n onSelect,\n isMovePending,\n}: FolderTreeItemInnerProps) => {\n const { formatMessage } = useIntl();\n const hasChildren = folderChildren.length > 0;\n const isFolderExpanded = isExpanded(id);\n const isActive = showActiveFolder && currentFolderId === id;\n\n const {\n droppable: { setNodeRef },\n isOver,\n showValidDropHighlight,\n showInvalidDropCursor,\n } = useFolderTreeDroppable({ id, name });\n\n const handleExpand = useCallback(() => onExpand(id), [id, onExpand]);\n\n useSpringLoadedExpand({\n isOver,\n canExpand: hasChildren && !isFolderExpanded,\n onExpand: handleExpand,\n });\n\n // TODO: full `role=\"tree\"` + arrow-key treeview navigation before revamp GA\n // if an accessibility audit requires it (v1 is button rows only).\n return (\n <li>\n <TreeRow\n ref={setNodeRef}\n alignItems=\"center\"\n paddingLeft={`${level * INDENT_PER_LEVEL_REM}rem`}\n gap={1}\n $isValidDropTarget={showValidDropHighlight}\n $isInvalidDropCursor={showInvalidDropCursor}\n $isMovePending={isMovePending}\n >\n <IconButton\n label={formatMessage(\n {\n id: getTranslationKey(\n isFolderExpanded ? 'sidebar.tree.collapse' : 'sidebar.tree.expand'\n ),\n defaultMessage: isFolderExpanded ? 'Collapse {name}' : 'Expand {name}',\n },\n { name }\n )}\n onClick={(event: React.MouseEvent) => {\n event.stopPropagation();\n onToggle(id);\n }}\n variant=\"ghost\"\n withTooltip={false}\n aria-expanded={isFolderExpanded}\n >\n <RotatingChevron $expanded={isFolderExpanded} fill=\"neutral500\" />\n </IconButton>\n\n <Box flex=\"1\" minWidth={0}>\n <RowButton\n type=\"button\"\n $isActive={isActive}\n $isValidDropTarget={showValidDropHighlight}\n $isInvalidDropCursor={showInvalidDropCursor}\n $isMovePending={isMovePending}\n aria-current={isActive ? 'page' : undefined}\n onClick={() => onSelect(id)}\n data-testid={`folder-tree-node-${id}`}\n data-folder-id={id}\n >\n <TruncatedText variant=\"omega\" fontWeight={isActive ? 'semiBold' : 'regular'}>\n {name}\n </TruncatedText>\n </RowButton>\n </Box>\n </TreeRow>\n\n {hasChildren && isFolderExpanded && (\n <NavList>\n {folderChildren.map((child) => (\n <FolderTreeItem\n key={child.id ?? child.name}\n node={child}\n level={level + 1}\n currentFolderId={currentFolderId}\n showActiveFolder={showActiveFolder}\n isExpanded={isExpanded}\n onToggle={onToggle}\n onExpand={onExpand}\n onSelect={onSelect}\n isMovePending={isMovePending}\n />\n ))}\n </NavList>\n )}\n </li>\n );\n};\n\nconst FolderTreeItem = ({ node, ...props }: FolderTreeItemProps) => {\n if (node.id == null) {\n return null;\n }\n\n return (\n <FolderTreeItemInner\n {...props}\n id={node.id}\n name={node.name ?? ''}\n folderChildren={node.children ?? []}\n />\n );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * FolderTree — public sidebar component\n * -----------------------------------------------------------------------------------------------*/\n\ninterface FolderTreeProps {\n currentFolderId: number | null;\n /**\n * Set to `false` while a global asset search is active: the results span the\n * whole library, so highlighting one folder would misrepresent them.\n * */\n showActiveFolder?: boolean;\n onSelectFolder: (folderId: number | null) => void;\n}\n\n/**\n * Left-rail navigation for the Media Library. Fetches folder structure internally\n * and renders:\n *\n * 1. A \"Media library\" title\n * 2. A filter input that prunes the tree to matching destinations\n * 3. A \"Home\" entry that clears the folder query param\n * 4. A \"FOLDERS\" section header\n * 5. The folder tree itself\n *\n * The filter is purely local: it never touches the URL and never affects the\n * asset list, which has its own independent search in the content toolbar.\n *\n * Presentational with respect to routing — navigation is delegated to the parent\n * via `onSelectFolder` so the URL stays the single source of truth (see\n * `useFolderNavigation`).\n */\nexport const FolderTree = ({\n currentFolderId,\n showActiveFolder = true,\n onSelectFolder,\n}: FolderTreeProps) => {\n const { formatMessage } = useIntl();\n const { data: folderStructure = [], isLoading, isError } = useGetFolderStructureQuery();\n const { isExpanded, toggleExpanded, expandFolder } = useExpandedFolders(\n folderStructure,\n currentFolderId\n );\n const { isMovePending } = useAssetsDndOptional() ?? { isMovePending: false };\n\n const isHomeActive = showActiveFolder && currentFolderId == null;\n const homeLabel = formatMessage({\n id: getTranslationKey('sidebar.home'),\n defaultMessage: 'Home',\n });\n\n const {\n droppable: { setNodeRef: setHomeDropRef },\n showValidDropHighlight: showHomeValidDropHighlight,\n showInvalidDropCursor: showHomeInvalidDropCursor,\n } = useFolderTreeDroppable({ id: null, name: homeLabel });\n\n return (\n <SubNav.Main\n aria-label={formatMessage({\n id: getTranslationKey('sidebar.tree.aria-label'),\n defaultMessage: 'Media library folders',\n })}\n >\n <SubNav.Header\n label={formatMessage({\n id: getTranslationKey('sidebar.title'),\n defaultMessage: 'Media library',\n })}\n />\n\n <SubNav.Content>\n <Flex direction=\"column\" alignItems=\"stretch\" gap={1} padding={3}>\n <RowButton\n ref={setHomeDropRef}\n type=\"button\"\n $isActive={isHomeActive}\n $isValidDropTarget={showHomeValidDropHighlight}\n $isInvalidDropCursor={showHomeInvalidDropCursor}\n $isMovePending={isMovePending}\n aria-current={isHomeActive ? 'page' : undefined}\n onClick={() => onSelectFolder(null)}\n data-testid=\"folder-tree-home\"\n >\n <House aria-hidden width=\"1.6rem\" height=\"1.6rem\" />\n <Typography variant=\"omega\" fontWeight={isHomeActive ? 'semiBold' : 'regular'}>\n {homeLabel}\n </Typography>\n </RowButton>\n\n <Box marginTop={4}>\n <Flex\n alignItems=\"center\"\n gap={1}\n paddingTop={1}\n paddingBottom={1}\n paddingLeft={2}\n paddingRight={2}\n marginBottom={2}\n >\n <FolderIcon aria-hidden width=\"1.6rem\" height=\"1.6rem\" fill=\"neutral500\" />\n <Typography\n variant=\"sigma\"\n textColor=\"neutral600\"\n style={{ textTransform: 'uppercase' }}\n >\n {formatMessage({\n id: getTranslationKey('sidebar.folders'),\n defaultMessage: 'Folders',\n })}\n </Typography>\n </Flex>\n\n {isLoading ? (\n // TODO: revisit loading state before revamp GA\n <Flex justifyContent=\"center\" padding={1} paddingTop={2}>\n <Loader>\n {formatMessage({\n id: getTranslationKey('sidebar.tree.loading'),\n defaultMessage: 'Loading folders...',\n })}\n </Loader>\n </Flex>\n ) : isError ? (\n // TODO: revisit error state before revamp GA\n <Box padding={1} paddingTop={2}>\n <Typography variant=\"pi\" textColor=\"danger600\">\n {formatMessage({\n id: getTranslationKey('sidebar.tree.error'),\n defaultMessage: 'Could not load folders.',\n })}\n </Typography>\n </Box>\n ) : folderStructure.length === 0 ? (\n // TODO: revisit empty state before revamp GA\n <Box padding={1} paddingTop={2}>\n <Typography variant=\"pi\" textColor=\"neutral500\">\n {formatMessage({\n id: getTranslationKey('sidebar.tree.empty'),\n defaultMessage: 'No folders yet',\n })}\n </Typography>\n </Box>\n ) : (\n <NavList>\n {folderStructure.map((node) => (\n <FolderTreeItem\n key={node.id ?? node.name}\n node={node}\n level={0}\n currentFolderId={currentFolderId}\n showActiveFolder={showActiveFolder}\n isExpanded={isExpanded}\n onToggle={toggleExpanded}\n onExpand={expandFolder}\n onSelect={onSelectFolder}\n isMovePending={isMovePending}\n />\n ))}\n </NavList>\n )}\n </Box>\n </Flex>\n </SubNav.Content>\n </SubNav.Main>\n );\n};\n"],"names":["RowButton","styled","button","theme","spaces","$isActive","$isValidDropTarget","colors","primary100","primary700","neutral800","borderRadius","$isMovePending","$isInvalidDropCursor","css","primary600","neutral100","TreeRow","Flex","findAncestorIds","nodes","targetId","trail","node","id","children","length","nextTrail","found","useExpandedFolders","folderStructure","currentFolderId","expandedIds","setExpandedIds","useState","Set","useEffect","ancestors","prev","next","changed","has","add","toggleExpanded","useCallback","delete","expandFolder","isExpanded","NavList","ul","INDENT_PER_LEVEL_REM","RotatingChevron","ChevronDown","$expanded","FolderTreeItemInner","name","folderChildren","level","showActiveFolder","onToggle","onExpand","onSelect","isMovePending","formatMessage","useIntl","hasChildren","isFolderExpanded","isActive","droppable","setNodeRef","isOver","showValidDropHighlight","showInvalidDropCursor","useFolderTreeDroppable","handleExpand","useSpringLoadedExpand","canExpand","_jsxs","li","ref","alignItems","paddingLeft","gap","_jsx","IconButton","label","getTranslationKey","defaultMessage","onClick","event","stopPropagation","variant","withTooltip","aria-expanded","fill","Box","flex","minWidth","type","aria-current","undefined","data-testid","data-folder-id","TruncatedText","fontWeight","map","child","FolderTreeItem","props","FolderTree","onSelectFolder","data","isLoading","isError","useGetFolderStructureQuery","useAssetsDndOptional","isHomeActive","homeLabel","setHomeDropRef","showHomeValidDropHighlight","showHomeInvalidDropCursor","SubNav","Main","aria-label","Header","Content","direction","padding","House","aria-hidden","width","height","Typography","marginTop","paddingTop","paddingBottom","paddingRight","marginBottom","FolderIcon","textColor","style","textTransform","justifyContent","Loader"],"mappings":"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"}
|
|
@@ -5,6 +5,7 @@ var designSystem = require('@strapi/design-system');
|
|
|
5
5
|
var icons = require('@strapi/icons');
|
|
6
6
|
var reactIntl = require('react-intl');
|
|
7
7
|
var styledComponents = require('styled-components');
|
|
8
|
+
var useTracking = require('../../../hooks/useTracking.js');
|
|
8
9
|
var translations = require('../../../utils/translations.js');
|
|
9
10
|
|
|
10
11
|
const SORT_BY_LABELS = {
|
|
@@ -70,6 +71,7 @@ const GroupLabel = styledComponents.styled(designSystem.Menu.Label)`
|
|
|
70
71
|
* own `role="menuitem"`.
|
|
71
72
|
*/ const SortMenu = ({ sort, showFoldersGroup = true })=>{
|
|
72
73
|
const { formatMessage } = reactIntl.useIntl();
|
|
74
|
+
const { trackUsage } = useTracking.useTracking();
|
|
73
75
|
const triggerLabel = formatMessage({
|
|
74
76
|
id: translations.getTranslationKey('list.sort.trigger'),
|
|
75
77
|
defaultMessage: 'Sort: {active}'
|
|
@@ -108,6 +110,12 @@ const GroupLabel = styledComponents.styled(designSystem.Menu.Label)`
|
|
|
108
110
|
"aria-checked": sort.sortBy === key,
|
|
109
111
|
onSelect: (e)=>{
|
|
110
112
|
e.preventDefault();
|
|
113
|
+
if (sort.sortBy !== key) {
|
|
114
|
+
trackUsage('didSortMediaLibraryElements', {
|
|
115
|
+
location: useTracking.MEDIA_LIBRARY_LOCATION,
|
|
116
|
+
sort: key
|
|
117
|
+
});
|
|
118
|
+
}
|
|
111
119
|
sort.setSortBy(sort.sortBy === key ? null : key);
|
|
112
120
|
},
|
|
113
121
|
endIcon: sort.sortBy === key ? checkmark : null,
|
|
@@ -118,6 +126,12 @@ const GroupLabel = styledComponents.styled(designSystem.Menu.Label)`
|
|
|
118
126
|
"aria-checked": sort.direction === key,
|
|
119
127
|
onSelect: (e)=>{
|
|
120
128
|
e.preventDefault();
|
|
129
|
+
if (sort.direction !== key) {
|
|
130
|
+
trackUsage('didSortMediaLibraryElements', {
|
|
131
|
+
location: useTracking.MEDIA_LIBRARY_LOCATION,
|
|
132
|
+
sort: key
|
|
133
|
+
});
|
|
134
|
+
}
|
|
121
135
|
sort.setDirection(sort.direction === key ? null : key);
|
|
122
136
|
},
|
|
123
137
|
endIcon: sort.direction === key ? checkmark : null,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SortMenu.js","sources":["../../../../../../admin/src/future/pages/Assets/components/SortMenu.tsx"],"sourcesContent":["import { Menu } from '@strapi/design-system';\nimport { Check, ChevronDown } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { getTranslationKey } from '../../../utils/translations';\nimport {\n type FoldersPosition,\n type ListSort,\n type SortByKey,\n type SortDirectionKey,\n} from '../hooks/useListSort';\n\nimport type { MessageDescriptor } from 'react-intl';\n\nconst SORT_BY_LABELS: Record<SortByKey, MessageDescriptor> = {\n oldestUploads: {\n id: getTranslationKey('list.sort.oldest-uploads'),\n defaultMessage: 'Oldest uploads',\n },\n mostRecentUpdates: {\n id: getTranslationKey('list.sort.most-recent-updates'),\n defaultMessage: 'Most recent updates',\n },\n};\n\nconst SORT_DIRECTION_LABELS: Record<SortDirectionKey, MessageDescriptor> = {\n nameAsc: { id: getTranslationKey('list.sort.name-asc'), defaultMessage: 'A to Z' },\n nameDesc: { id: getTranslationKey('list.sort.name-desc'), defaultMessage: 'Z to A' },\n sizeAsc: {\n id: getTranslationKey('list.sort.size-asc'),\n defaultMessage: 'File size ascending',\n },\n sizeDesc: {\n id: getTranslationKey('list.sort.size-desc'),\n defaultMessage: 'File size descending',\n },\n};\n\nconst FOLDERS_LABELS: Record<FoldersPosition, MessageDescriptor> = {\n top: { id: getTranslationKey('list.sort.folders-on-top'), defaultMessage: 'On top' },\n mixed: {\n id: getTranslationKey('list.sort.folders-mixed'),\n defaultMessage: 'Mixed with files',\n },\n};\n\n// Stretch to the toolbar row height so the trigger matches the view toggle\n// (the parent Flex uses alignItems=\"stretch\").\nconst SortTrigger = styled(Menu.Trigger)``;\n\n// Full-width section band, like the design mock (sits inside the Menu.Content\n// padding, so the band stops short of the panel edges).\nconst GroupLabel = styled(Menu.Label)`\n width: 100%;\n display: block;\n background: ${({ theme }) =>\n theme.colorScheme === 'dark' ? theme.colors.neutral150 : theme.colors.neutral100};\n padding-inline: ${({ theme }) => theme.spaces[3]};\n border-radius: ${({ theme }) => theme.borderRadius};\n`;\n\ninterface SortMenuProps {\n sort: ListSort;\n /**\n * The grid view forces folders on top (mixing folder cards with asset cards\n * is not supported there), so it hides the Folders group entirely.\n */\n showFoldersGroup?: boolean;\n}\n\n/**\n * Toolbar \"Sort\" dropdown: single-select sections (Sort / Folders). Picking an\n * option keeps the menu open (`onSelect` preventDefault) so several facets can\n * be tuned in one visit; clicking a checked facet clears it (the hook\n * guarantees at least one sort rule stays active).\n *\n * Each section is single-select, so its items are radios: the checkmark icon is\n * decorative, and `aria-checked` is what assistive tech reads. The DS `Menu`\n * exposes no `RadioItem`, but `Menu.Item` forwards extra props onto the element\n * it renders through Radix's `asChild`, where they take precedence over Radix's\n * own `role=\"menuitem\"`.\n */\nexport const SortMenu = ({ sort, showFoldersGroup = true }: SortMenuProps) => {\n const { formatMessage } = useIntl();\n\n const triggerLabel = formatMessage(\n { id: getTranslationKey('list.sort.trigger'), defaultMessage: 'Sort: {active}' },\n {\n active: sort.sortBy\n ? formatMessage(SORT_BY_LABELS[sort.sortBy])\n : formatMessage(SORT_DIRECTION_LABELS[sort.direction!]),\n }\n );\n\n const checkmark = <Check aria-hidden width=\"1.6rem\" height=\"1.6rem\" fill=\"primary600\" />;\n\n return (\n <Menu.Root>\n <SortTrigger variant=\"ghost\" endIcon={<ChevronDown aria-hidden />}>\n {triggerLabel}\n </SortTrigger>\n {/* The DS default maxHeight (15rem) folds everything after the first\n group behind an invisible scroll — all groups must be visible at\n once. 70vh keeps a scroll on very short viewports. */}\n <Menu.Content popoverPlacement=\"bottom-end\" zIndex={2} maxHeight=\"70vh\" minWidth=\"25rem\">\n {/* One single-select \"Sort\" section: the two rule families were always\n mutually exclusive (one checkmark total), so they share a group. */}\n <GroupLabel>\n {formatMessage({ id: getTranslationKey('list.sort.section'), defaultMessage: 'Sort' })}\n </GroupLabel>\n {(Object.keys(SORT_BY_LABELS) as SortByKey[]).map((key) => (\n <Menu.Item\n key={key}\n role=\"menuitemradio\"\n aria-checked={sort.sortBy === key}\n onSelect={(e: Event) => {\n e.preventDefault();\n sort.setSortBy(sort.sortBy === key ? null : key);\n }}\n endIcon={sort.sortBy === key ? checkmark : null}\n >\n {formatMessage(SORT_BY_LABELS[key])}\n </Menu.Item>\n ))}\n {(Object.keys(SORT_DIRECTION_LABELS) as SortDirectionKey[]).map((key) => (\n <Menu.Item\n key={key}\n role=\"menuitemradio\"\n aria-checked={sort.direction === key}\n onSelect={(e: Event) => {\n e.preventDefault();\n sort.setDirection(sort.direction === key ? null : key);\n }}\n endIcon={sort.direction === key ? checkmark : null}\n >\n {formatMessage(SORT_DIRECTION_LABELS[key])}\n </Menu.Item>\n ))}\n\n {showFoldersGroup && (\n <>\n <Menu.Separator />\n <GroupLabel>\n {formatMessage({\n id: getTranslationKey('list.sort.folders'),\n defaultMessage: 'Folders',\n })}\n </GroupLabel>\n {(Object.keys(FOLDERS_LABELS) as FoldersPosition[]).map((position) => (\n <Menu.Item\n key={position}\n role=\"menuitemradio\"\n aria-checked={sort.foldersPosition === position}\n onSelect={(e: Event) => {\n e.preventDefault();\n sort.setFoldersPosition(position);\n }}\n endIcon={sort.foldersPosition === position ? checkmark : null}\n >\n {formatMessage(FOLDERS_LABELS[position])}\n </Menu.Item>\n ))}\n </>\n )}\n </Menu.Content>\n </Menu.Root>\n );\n};\n"],"names":["SORT_BY_LABELS","oldestUploads","id","getTranslationKey","defaultMessage","mostRecentUpdates","SORT_DIRECTION_LABELS","nameAsc","nameDesc","sizeAsc","sizeDesc","FOLDERS_LABELS","top","mixed","SortTrigger","styled","Menu","Trigger","GroupLabel","Label","theme","colorScheme","colors","neutral150","neutral100","spaces","borderRadius","SortMenu","sort","showFoldersGroup","formatMessage","useIntl","triggerLabel","active","sortBy","direction","checkmark","_jsx","Check","aria-hidden","width","height","fill","_jsxs","Root","variant","endIcon","ChevronDown","Content","popoverPlacement","zIndex","maxHeight","minWidth","Object","keys","map","key","Item","role","aria-checked","onSelect","e","preventDefault","setSortBy","setDirection","_Fragment","Separator","position","foldersPosition","setFoldersPosition"],"mappings":";;;;;;;;;AAeA,MAAMA,cAAAA,GAAuD;IAC3DC,aAAAA,EAAe;AACbC,QAAAA,EAAAA,EAAIC,8BAAAA,CAAkB,0BAAA,CAAA;QACtBC,cAAAA,EAAgB;AAClB,KAAA;IACAC,iBAAAA,EAAmB;AACjBH,QAAAA,EAAAA,EAAIC,8BAAAA,CAAkB,+BAAA,CAAA;QACtBC,cAAAA,EAAgB;AAClB;AACF,CAAA;AAEA,MAAME,qBAAAA,GAAqE;IACzEC,OAAAA,EAAS;AAAEL,QAAAA,EAAAA,EAAIC,8BAAAA,CAAkB,oBAAA,CAAA;QAAuBC,cAAAA,EAAgB;AAAS,KAAA;IACjFI,QAAAA,EAAU;AAAEN,QAAAA,EAAAA,EAAIC,8BAAAA,CAAkB,qBAAA,CAAA;QAAwBC,cAAAA,EAAgB;AAAS,KAAA;IACnFK,OAAAA,EAAS;AACPP,QAAAA,EAAAA,EAAIC,8BAAAA,CAAkB,oBAAA,CAAA;QACtBC,cAAAA,EAAgB;AAClB,KAAA;IACAM,QAAAA,EAAU;AACRR,QAAAA,EAAAA,EAAIC,8BAAAA,CAAkB,qBAAA,CAAA;QACtBC,cAAAA,EAAgB;AAClB;AACF,CAAA;AAEA,MAAMO,cAAAA,GAA6D;IACjEC,GAAAA,EAAK;AAAEV,QAAAA,EAAAA,EAAIC,8BAAAA,CAAkB,0BAAA,CAAA;QAA6BC,cAAAA,EAAgB;AAAS,KAAA;IACnFS,KAAAA,EAAO;AACLX,QAAAA,EAAAA,EAAIC,8BAAAA,CAAkB,yBAAA,CAAA;QACtBC,cAAAA,EAAgB;AAClB;AACF,CAAA;AAEA;AACA;AACA,MAAMU,cAAcC,uBAAAA,CAAOC,iBAAAA,CAAKC,OAAO,CAAC,CAAC,CAAC;AAE1C;AACA;AACA,MAAMC,UAAAA,GAAaH,uBAAAA,CAAOC,iBAAAA,CAAKG,KAAK,CAAC;;;AAGvB,cAAA,EAAE,CAAC,EAAEC,KAAK,EAAE,GACtBA,KAAAA,CAAMC,WAAW,KAAK,MAAA,GAASD,KAAAA,CAAME,MAAM,CAACC,UAAU,GAAGH,MAAME,MAAM,CAACE,UAAU,CAAC;kBACnE,EAAE,CAAC,EAAEJ,KAAK,EAAE,GAAKA,KAAAA,CAAMK,MAAM,CAAC,CAAA,CAAE,CAAC;AAClC,iBAAA,EAAE,CAAC,EAAEL,KAAK,EAAE,GAAKA,KAAAA,CAAMM,YAAY,CAAC;AACrD,CAAC;AAWD;;;;;;;;;;;UAYaC,QAAAA,GAAW,CAAC,EAAEC,IAAI,EAAEC,gBAAAA,GAAmB,IAAI,EAAiB,GAAA;IACvE,MAAM,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;AAE1B,IAAA,MAAMC,eAAeF,aAAAA,CACnB;AAAE5B,QAAAA,EAAAA,EAAIC,8BAAAA,CAAkB,mBAAA,CAAA;QAAsBC,cAAAA,EAAgB;KAAiB,EAC/E;AACE6B,QAAAA,MAAAA,EAAQL,IAAAA,CAAKM,MAAM,GACfJ,aAAAA,CAAc9B,cAAc,CAAC4B,IAAAA,CAAKM,MAAM,CAAC,IACzCJ,aAAAA,CAAcxB,qBAAqB,CAACsB,IAAAA,CAAKO,SAAS,CAAE;AAC1D,KAAA,CAAA;AAGF,IAAA,MAAMC,0BAAYC,cAAA,CAACC,WAAAA,EAAAA;QAAMC,aAAW,EAAA,IAAA;QAACC,KAAAA,EAAM,QAAA;QAASC,MAAAA,EAAO,QAAA;QAASC,IAAAA,EAAK;;IAEzE,qBACEC,eAAA,CAAC3B,kBAAK4B,IAAI,EAAA;;0BACRP,cAAA,CAACvB,WAAAA,EAAAA;gBAAY+B,OAAAA,EAAQ,OAAA;AAAQC,gBAAAA,OAAAA,gBAAST,cAAA,CAACU,iBAAAA,EAAAA;oBAAYR,aAAW,EAAA;;AAC3DP,gBAAAA,QAAAA,EAAAA;;AAKH,0BAAAW,eAAA,CAAC3B,kBAAKgC,OAAO,EAAA;gBAACC,gBAAAA,EAAiB,YAAA;gBAAaC,MAAAA,EAAQ,CAAA;gBAAGC,SAAAA,EAAU,MAAA;gBAAOC,QAAAA,EAAS,OAAA;;kCAG/Ef,cAAA,CAACnB,UAAAA,EAAAA;kCACEY,aAAAA,CAAc;AAAE5B,4BAAAA,EAAAA,EAAIC,8BAAAA,CAAkB,mBAAA,CAAA;4BAAsBC,cAAAA,EAAgB;AAAO,yBAAA;;oBAEpFiD,MAAAA,CAAOC,IAAI,CAACtD,cAAAA,CAAAA,CAAgCuD,GAAG,CAAC,CAACC,GAAAA,iBACjDnB,cAAA,CAACrB,iBAAAA,CAAKyC,IAAI,EAAA;4BAERC,IAAAA,EAAK,eAAA;4BACLC,cAAAA,EAAc/B,IAAAA,CAAKM,MAAM,KAAKsB,GAAAA;AAC9BI,4BAAAA,QAAAA,EAAU,CAACC,CAAAA,GAAAA;AACTA,gCAAAA,CAAAA,CAAEC,cAAc,EAAA;AAChBlC,gCAAAA,IAAAA,CAAKmC,SAAS,CAACnC,IAAAA,CAAKM,MAAM,KAAKsB,MAAM,IAAA,GAAOA,GAAAA,CAAAA;AAC9C,4BAAA,CAAA;AACAV,4BAAAA,OAAAA,EAASlB,IAAAA,CAAKM,MAAM,KAAKsB,GAAAA,GAAMpB,SAAAA,GAAY,IAAA;sCAE1CN,aAAAA,CAAc9B,cAAc,CAACwD,GAAAA,CAAI;AAT7BA,yBAAAA,EAAAA,GAAAA,CAAAA,CAAAA;oBAYPH,MAAAA,CAAOC,IAAI,CAAChD,qBAAAA,CAAAA,CAA8CiD,GAAG,CAAC,CAACC,GAAAA,iBAC/DnB,cAAA,CAACrB,iBAAAA,CAAKyC,IAAI,EAAA;4BAERC,IAAAA,EAAK,eAAA;4BACLC,cAAAA,EAAc/B,IAAAA,CAAKO,SAAS,KAAKqB,GAAAA;AACjCI,4BAAAA,QAAAA,EAAU,CAACC,CAAAA,GAAAA;AACTA,gCAAAA,CAAAA,CAAEC,cAAc,EAAA;AAChBlC,gCAAAA,IAAAA,CAAKoC,YAAY,CAACpC,IAAAA,CAAKO,SAAS,KAAKqB,MAAM,IAAA,GAAOA,GAAAA,CAAAA;AACpD,4BAAA,CAAA;AACAV,4BAAAA,OAAAA,EAASlB,IAAAA,CAAKO,SAAS,KAAKqB,GAAAA,GAAMpB,SAAAA,GAAY,IAAA;sCAE7CN,aAAAA,CAAcxB,qBAAqB,CAACkD,GAAAA,CAAI;AATpCA,yBAAAA,EAAAA,GAAAA,CAAAA,CAAAA;oBAaR3B,gBAAAA,kBACCc,eAAA,CAAAsB,mBAAA,EAAA;;AACE,0CAAA5B,cAAA,CAACrB,kBAAKkD,SAAS,EAAA,EAAA,CAAA;0CACf7B,cAAA,CAACnB,UAAAA,EAAAA;0CACEY,aAAAA,CAAc;AACb5B,oCAAAA,EAAAA,EAAIC,8BAAAA,CAAkB,mBAAA,CAAA;oCACtBC,cAAAA,EAAgB;AAClB,iCAAA;;4BAEAiD,MAAAA,CAAOC,IAAI,CAAC3C,cAAAA,CAAAA,CAAsC4C,GAAG,CAAC,CAACY,QAAAA,iBACvD9B,cAAA,CAACrB,iBAAAA,CAAKyC,IAAI,EAAA;oCAERC,IAAAA,EAAK,eAAA;oCACLC,cAAAA,EAAc/B,IAAAA,CAAKwC,eAAe,KAAKD,QAAAA;AACvCP,oCAAAA,QAAAA,EAAU,CAACC,CAAAA,GAAAA;AACTA,wCAAAA,CAAAA,CAAEC,cAAc,EAAA;AAChBlC,wCAAAA,IAAAA,CAAKyC,kBAAkB,CAACF,QAAAA,CAAAA;AAC1B,oCAAA,CAAA;AACArB,oCAAAA,OAAAA,EAASlB,IAAAA,CAAKwC,eAAe,KAAKD,QAAAA,GAAW/B,SAAAA,GAAY,IAAA;8CAExDN,aAAAA,CAAcnB,cAAc,CAACwD,QAAAA,CAAS;AATlCA,iCAAAA,EAAAA,QAAAA,CAAAA;;;;;;;AAiBrB;;;;"}
|
|
1
|
+
{"version":3,"file":"SortMenu.js","sources":["../../../../../../admin/src/future/pages/Assets/components/SortMenu.tsx"],"sourcesContent":["import { Menu } from '@strapi/design-system';\nimport { Check, ChevronDown } 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 {\n type FoldersPosition,\n type ListSort,\n type SortByKey,\n type SortDirectionKey,\n} from '../hooks/useListSort';\n\nimport type { MessageDescriptor } from 'react-intl';\n\nconst SORT_BY_LABELS: Record<SortByKey, MessageDescriptor> = {\n oldestUploads: {\n id: getTranslationKey('list.sort.oldest-uploads'),\n defaultMessage: 'Oldest uploads',\n },\n mostRecentUpdates: {\n id: getTranslationKey('list.sort.most-recent-updates'),\n defaultMessage: 'Most recent updates',\n },\n};\n\nconst SORT_DIRECTION_LABELS: Record<SortDirectionKey, MessageDescriptor> = {\n nameAsc: { id: getTranslationKey('list.sort.name-asc'), defaultMessage: 'A to Z' },\n nameDesc: { id: getTranslationKey('list.sort.name-desc'), defaultMessage: 'Z to A' },\n sizeAsc: {\n id: getTranslationKey('list.sort.size-asc'),\n defaultMessage: 'File size ascending',\n },\n sizeDesc: {\n id: getTranslationKey('list.sort.size-desc'),\n defaultMessage: 'File size descending',\n },\n};\n\nconst FOLDERS_LABELS: Record<FoldersPosition, MessageDescriptor> = {\n top: { id: getTranslationKey('list.sort.folders-on-top'), defaultMessage: 'On top' },\n mixed: {\n id: getTranslationKey('list.sort.folders-mixed'),\n defaultMessage: 'Mixed with files',\n },\n};\n\n// Stretch to the toolbar row height so the trigger matches the view toggle\n// (the parent Flex uses alignItems=\"stretch\").\nconst SortTrigger = styled(Menu.Trigger)``;\n\n// Full-width section band, like the design mock (sits inside the Menu.Content\n// padding, so the band stops short of the panel edges).\nconst GroupLabel = styled(Menu.Label)`\n width: 100%;\n display: block;\n background: ${({ theme }) =>\n theme.colorScheme === 'dark' ? theme.colors.neutral150 : theme.colors.neutral100};\n padding-inline: ${({ theme }) => theme.spaces[3]};\n border-radius: ${({ theme }) => theme.borderRadius};\n`;\n\ninterface SortMenuProps {\n sort: ListSort;\n /**\n * The grid view forces folders on top (mixing folder cards with asset cards\n * is not supported there), so it hides the Folders group entirely.\n */\n showFoldersGroup?: boolean;\n}\n\n/**\n * Toolbar \"Sort\" dropdown: single-select sections (Sort / Folders). Picking an\n * option keeps the menu open (`onSelect` preventDefault) so several facets can\n * be tuned in one visit; clicking a checked facet clears it (the hook\n * guarantees at least one sort rule stays active).\n *\n * Each section is single-select, so its items are radios: the checkmark icon is\n * decorative, and `aria-checked` is what assistive tech reads. The DS `Menu`\n * exposes no `RadioItem`, but `Menu.Item` forwards extra props onto the element\n * it renders through Radix's `asChild`, where they take precedence over Radix's\n * own `role=\"menuitem\"`.\n */\nexport const SortMenu = ({ sort, showFoldersGroup = true }: SortMenuProps) => {\n const { formatMessage } = useIntl();\n const { trackUsage } = useTracking();\n\n const triggerLabel = formatMessage(\n { id: getTranslationKey('list.sort.trigger'), defaultMessage: 'Sort: {active}' },\n {\n active: sort.sortBy\n ? formatMessage(SORT_BY_LABELS[sort.sortBy])\n : formatMessage(SORT_DIRECTION_LABELS[sort.direction!]),\n }\n );\n\n const checkmark = <Check aria-hidden width=\"1.6rem\" height=\"1.6rem\" fill=\"primary600\" />;\n\n return (\n <Menu.Root>\n <SortTrigger variant=\"ghost\" endIcon={<ChevronDown aria-hidden />}>\n {triggerLabel}\n </SortTrigger>\n {/* The DS default maxHeight (15rem) folds everything after the first\n group behind an invisible scroll — all groups must be visible at\n once. 70vh keeps a scroll on very short viewports. */}\n <Menu.Content popoverPlacement=\"bottom-end\" zIndex={2} maxHeight=\"70vh\" minWidth=\"25rem\">\n {/* One single-select \"Sort\" section: the two rule families were always\n mutually exclusive (one checkmark total), so they share a group. */}\n <GroupLabel>\n {formatMessage({ id: getTranslationKey('list.sort.section'), defaultMessage: 'Sort' })}\n </GroupLabel>\n {(Object.keys(SORT_BY_LABELS) as SortByKey[]).map((key) => (\n <Menu.Item\n key={key}\n role=\"menuitemradio\"\n aria-checked={sort.sortBy === key}\n onSelect={(e: Event) => {\n e.preventDefault();\n if (sort.sortBy !== key) {\n trackUsage('didSortMediaLibraryElements', {\n location: MEDIA_LIBRARY_LOCATION,\n sort: key,\n });\n }\n sort.setSortBy(sort.sortBy === key ? null : key);\n }}\n endIcon={sort.sortBy === key ? checkmark : null}\n >\n {formatMessage(SORT_BY_LABELS[key])}\n </Menu.Item>\n ))}\n {(Object.keys(SORT_DIRECTION_LABELS) as SortDirectionKey[]).map((key) => (\n <Menu.Item\n key={key}\n role=\"menuitemradio\"\n aria-checked={sort.direction === key}\n onSelect={(e: Event) => {\n e.preventDefault();\n if (sort.direction !== key) {\n trackUsage('didSortMediaLibraryElements', {\n location: MEDIA_LIBRARY_LOCATION,\n sort: key,\n });\n }\n sort.setDirection(sort.direction === key ? null : key);\n }}\n endIcon={sort.direction === key ? checkmark : null}\n >\n {formatMessage(SORT_DIRECTION_LABELS[key])}\n </Menu.Item>\n ))}\n\n {showFoldersGroup && (\n <>\n <Menu.Separator />\n <GroupLabel>\n {formatMessage({\n id: getTranslationKey('list.sort.folders'),\n defaultMessage: 'Folders',\n })}\n </GroupLabel>\n {(Object.keys(FOLDERS_LABELS) as FoldersPosition[]).map((position) => (\n <Menu.Item\n key={position}\n role=\"menuitemradio\"\n aria-checked={sort.foldersPosition === position}\n onSelect={(e: Event) => {\n e.preventDefault();\n sort.setFoldersPosition(position);\n }}\n endIcon={sort.foldersPosition === position ? checkmark : null}\n >\n {formatMessage(FOLDERS_LABELS[position])}\n </Menu.Item>\n ))}\n </>\n )}\n </Menu.Content>\n </Menu.Root>\n );\n};\n"],"names":["SORT_BY_LABELS","oldestUploads","id","getTranslationKey","defaultMessage","mostRecentUpdates","SORT_DIRECTION_LABELS","nameAsc","nameDesc","sizeAsc","sizeDesc","FOLDERS_LABELS","top","mixed","SortTrigger","styled","Menu","Trigger","GroupLabel","Label","theme","colorScheme","colors","neutral150","neutral100","spaces","borderRadius","SortMenu","sort","showFoldersGroup","formatMessage","useIntl","trackUsage","useTracking","triggerLabel","active","sortBy","direction","checkmark","_jsx","Check","aria-hidden","width","height","fill","_jsxs","Root","variant","endIcon","ChevronDown","Content","popoverPlacement","zIndex","maxHeight","minWidth","Object","keys","map","key","Item","role","aria-checked","onSelect","e","preventDefault","location","MEDIA_LIBRARY_LOCATION","setSortBy","setDirection","_Fragment","Separator","position","foldersPosition","setFoldersPosition"],"mappings":"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"}
|
|
@@ -3,6 +3,7 @@ import { Menu } from '@strapi/design-system';
|
|
|
3
3
|
import { ChevronDown, Check } from '@strapi/icons';
|
|
4
4
|
import { useIntl } from 'react-intl';
|
|
5
5
|
import { styled } from 'styled-components';
|
|
6
|
+
import { useTracking, MEDIA_LIBRARY_LOCATION } from '../../../hooks/useTracking.mjs';
|
|
6
7
|
import { getTranslationKey } from '../../../utils/translations.mjs';
|
|
7
8
|
|
|
8
9
|
const SORT_BY_LABELS = {
|
|
@@ -68,6 +69,7 @@ const GroupLabel = styled(Menu.Label)`
|
|
|
68
69
|
* own `role="menuitem"`.
|
|
69
70
|
*/ const SortMenu = ({ sort, showFoldersGroup = true })=>{
|
|
70
71
|
const { formatMessage } = useIntl();
|
|
72
|
+
const { trackUsage } = useTracking();
|
|
71
73
|
const triggerLabel = formatMessage({
|
|
72
74
|
id: getTranslationKey('list.sort.trigger'),
|
|
73
75
|
defaultMessage: 'Sort: {active}'
|
|
@@ -106,6 +108,12 @@ const GroupLabel = styled(Menu.Label)`
|
|
|
106
108
|
"aria-checked": sort.sortBy === key,
|
|
107
109
|
onSelect: (e)=>{
|
|
108
110
|
e.preventDefault();
|
|
111
|
+
if (sort.sortBy !== key) {
|
|
112
|
+
trackUsage('didSortMediaLibraryElements', {
|
|
113
|
+
location: MEDIA_LIBRARY_LOCATION,
|
|
114
|
+
sort: key
|
|
115
|
+
});
|
|
116
|
+
}
|
|
109
117
|
sort.setSortBy(sort.sortBy === key ? null : key);
|
|
110
118
|
},
|
|
111
119
|
endIcon: sort.sortBy === key ? checkmark : null,
|
|
@@ -116,6 +124,12 @@ const GroupLabel = styled(Menu.Label)`
|
|
|
116
124
|
"aria-checked": sort.direction === key,
|
|
117
125
|
onSelect: (e)=>{
|
|
118
126
|
e.preventDefault();
|
|
127
|
+
if (sort.direction !== key) {
|
|
128
|
+
trackUsage('didSortMediaLibraryElements', {
|
|
129
|
+
location: MEDIA_LIBRARY_LOCATION,
|
|
130
|
+
sort: key
|
|
131
|
+
});
|
|
132
|
+
}
|
|
119
133
|
sort.setDirection(sort.direction === key ? null : key);
|
|
120
134
|
},
|
|
121
135
|
endIcon: sort.direction === key ? checkmark : null,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SortMenu.mjs","sources":["../../../../../../admin/src/future/pages/Assets/components/SortMenu.tsx"],"sourcesContent":["import { Menu } from '@strapi/design-system';\nimport { Check, ChevronDown } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { getTranslationKey } from '../../../utils/translations';\nimport {\n type FoldersPosition,\n type ListSort,\n type SortByKey,\n type SortDirectionKey,\n} from '../hooks/useListSort';\n\nimport type { MessageDescriptor } from 'react-intl';\n\nconst SORT_BY_LABELS: Record<SortByKey, MessageDescriptor> = {\n oldestUploads: {\n id: getTranslationKey('list.sort.oldest-uploads'),\n defaultMessage: 'Oldest uploads',\n },\n mostRecentUpdates: {\n id: getTranslationKey('list.sort.most-recent-updates'),\n defaultMessage: 'Most recent updates',\n },\n};\n\nconst SORT_DIRECTION_LABELS: Record<SortDirectionKey, MessageDescriptor> = {\n nameAsc: { id: getTranslationKey('list.sort.name-asc'), defaultMessage: 'A to Z' },\n nameDesc: { id: getTranslationKey('list.sort.name-desc'), defaultMessage: 'Z to A' },\n sizeAsc: {\n id: getTranslationKey('list.sort.size-asc'),\n defaultMessage: 'File size ascending',\n },\n sizeDesc: {\n id: getTranslationKey('list.sort.size-desc'),\n defaultMessage: 'File size descending',\n },\n};\n\nconst FOLDERS_LABELS: Record<FoldersPosition, MessageDescriptor> = {\n top: { id: getTranslationKey('list.sort.folders-on-top'), defaultMessage: 'On top' },\n mixed: {\n id: getTranslationKey('list.sort.folders-mixed'),\n defaultMessage: 'Mixed with files',\n },\n};\n\n// Stretch to the toolbar row height so the trigger matches the view toggle\n// (the parent Flex uses alignItems=\"stretch\").\nconst SortTrigger = styled(Menu.Trigger)``;\n\n// Full-width section band, like the design mock (sits inside the Menu.Content\n// padding, so the band stops short of the panel edges).\nconst GroupLabel = styled(Menu.Label)`\n width: 100%;\n display: block;\n background: ${({ theme }) =>\n theme.colorScheme === 'dark' ? theme.colors.neutral150 : theme.colors.neutral100};\n padding-inline: ${({ theme }) => theme.spaces[3]};\n border-radius: ${({ theme }) => theme.borderRadius};\n`;\n\ninterface SortMenuProps {\n sort: ListSort;\n /**\n * The grid view forces folders on top (mixing folder cards with asset cards\n * is not supported there), so it hides the Folders group entirely.\n */\n showFoldersGroup?: boolean;\n}\n\n/**\n * Toolbar \"Sort\" dropdown: single-select sections (Sort / Folders). Picking an\n * option keeps the menu open (`onSelect` preventDefault) so several facets can\n * be tuned in one visit; clicking a checked facet clears it (the hook\n * guarantees at least one sort rule stays active).\n *\n * Each section is single-select, so its items are radios: the checkmark icon is\n * decorative, and `aria-checked` is what assistive tech reads. The DS `Menu`\n * exposes no `RadioItem`, but `Menu.Item` forwards extra props onto the element\n * it renders through Radix's `asChild`, where they take precedence over Radix's\n * own `role=\"menuitem\"`.\n */\nexport const SortMenu = ({ sort, showFoldersGroup = true }: SortMenuProps) => {\n const { formatMessage } = useIntl();\n\n const triggerLabel = formatMessage(\n { id: getTranslationKey('list.sort.trigger'), defaultMessage: 'Sort: {active}' },\n {\n active: sort.sortBy\n ? formatMessage(SORT_BY_LABELS[sort.sortBy])\n : formatMessage(SORT_DIRECTION_LABELS[sort.direction!]),\n }\n );\n\n const checkmark = <Check aria-hidden width=\"1.6rem\" height=\"1.6rem\" fill=\"primary600\" />;\n\n return (\n <Menu.Root>\n <SortTrigger variant=\"ghost\" endIcon={<ChevronDown aria-hidden />}>\n {triggerLabel}\n </SortTrigger>\n {/* The DS default maxHeight (15rem) folds everything after the first\n group behind an invisible scroll — all groups must be visible at\n once. 70vh keeps a scroll on very short viewports. */}\n <Menu.Content popoverPlacement=\"bottom-end\" zIndex={2} maxHeight=\"70vh\" minWidth=\"25rem\">\n {/* One single-select \"Sort\" section: the two rule families were always\n mutually exclusive (one checkmark total), so they share a group. */}\n <GroupLabel>\n {formatMessage({ id: getTranslationKey('list.sort.section'), defaultMessage: 'Sort' })}\n </GroupLabel>\n {(Object.keys(SORT_BY_LABELS) as SortByKey[]).map((key) => (\n <Menu.Item\n key={key}\n role=\"menuitemradio\"\n aria-checked={sort.sortBy === key}\n onSelect={(e: Event) => {\n e.preventDefault();\n sort.setSortBy(sort.sortBy === key ? null : key);\n }}\n endIcon={sort.sortBy === key ? checkmark : null}\n >\n {formatMessage(SORT_BY_LABELS[key])}\n </Menu.Item>\n ))}\n {(Object.keys(SORT_DIRECTION_LABELS) as SortDirectionKey[]).map((key) => (\n <Menu.Item\n key={key}\n role=\"menuitemradio\"\n aria-checked={sort.direction === key}\n onSelect={(e: Event) => {\n e.preventDefault();\n sort.setDirection(sort.direction === key ? null : key);\n }}\n endIcon={sort.direction === key ? checkmark : null}\n >\n {formatMessage(SORT_DIRECTION_LABELS[key])}\n </Menu.Item>\n ))}\n\n {showFoldersGroup && (\n <>\n <Menu.Separator />\n <GroupLabel>\n {formatMessage({\n id: getTranslationKey('list.sort.folders'),\n defaultMessage: 'Folders',\n })}\n </GroupLabel>\n {(Object.keys(FOLDERS_LABELS) as FoldersPosition[]).map((position) => (\n <Menu.Item\n key={position}\n role=\"menuitemradio\"\n aria-checked={sort.foldersPosition === position}\n onSelect={(e: Event) => {\n e.preventDefault();\n sort.setFoldersPosition(position);\n }}\n endIcon={sort.foldersPosition === position ? checkmark : null}\n >\n {formatMessage(FOLDERS_LABELS[position])}\n </Menu.Item>\n ))}\n </>\n )}\n </Menu.Content>\n </Menu.Root>\n );\n};\n"],"names":["SORT_BY_LABELS","oldestUploads","id","getTranslationKey","defaultMessage","mostRecentUpdates","SORT_DIRECTION_LABELS","nameAsc","nameDesc","sizeAsc","sizeDesc","FOLDERS_LABELS","top","mixed","SortTrigger","styled","Menu","Trigger","GroupLabel","Label","theme","colorScheme","colors","neutral150","neutral100","spaces","borderRadius","SortMenu","sort","showFoldersGroup","formatMessage","useIntl","triggerLabel","active","sortBy","direction","checkmark","_jsx","Check","aria-hidden","width","height","fill","_jsxs","Root","variant","endIcon","ChevronDown","Content","popoverPlacement","zIndex","maxHeight","minWidth","Object","keys","map","key","Item","role","aria-checked","onSelect","e","preventDefault","setSortBy","setDirection","_Fragment","Separator","position","foldersPosition","setFoldersPosition"],"mappings":";;;;;;;AAeA,MAAMA,cAAAA,GAAuD;IAC3DC,aAAAA,EAAe;AACbC,QAAAA,EAAAA,EAAIC,iBAAAA,CAAkB,0BAAA,CAAA;QACtBC,cAAAA,EAAgB;AAClB,KAAA;IACAC,iBAAAA,EAAmB;AACjBH,QAAAA,EAAAA,EAAIC,iBAAAA,CAAkB,+BAAA,CAAA;QACtBC,cAAAA,EAAgB;AAClB;AACF,CAAA;AAEA,MAAME,qBAAAA,GAAqE;IACzEC,OAAAA,EAAS;AAAEL,QAAAA,EAAAA,EAAIC,iBAAAA,CAAkB,oBAAA,CAAA;QAAuBC,cAAAA,EAAgB;AAAS,KAAA;IACjFI,QAAAA,EAAU;AAAEN,QAAAA,EAAAA,EAAIC,iBAAAA,CAAkB,qBAAA,CAAA;QAAwBC,cAAAA,EAAgB;AAAS,KAAA;IACnFK,OAAAA,EAAS;AACPP,QAAAA,EAAAA,EAAIC,iBAAAA,CAAkB,oBAAA,CAAA;QACtBC,cAAAA,EAAgB;AAClB,KAAA;IACAM,QAAAA,EAAU;AACRR,QAAAA,EAAAA,EAAIC,iBAAAA,CAAkB,qBAAA,CAAA;QACtBC,cAAAA,EAAgB;AAClB;AACF,CAAA;AAEA,MAAMO,cAAAA,GAA6D;IACjEC,GAAAA,EAAK;AAAEV,QAAAA,EAAAA,EAAIC,iBAAAA,CAAkB,0BAAA,CAAA;QAA6BC,cAAAA,EAAgB;AAAS,KAAA;IACnFS,KAAAA,EAAO;AACLX,QAAAA,EAAAA,EAAIC,iBAAAA,CAAkB,yBAAA,CAAA;QACtBC,cAAAA,EAAgB;AAClB;AACF,CAAA;AAEA;AACA;AACA,MAAMU,cAAcC,MAAAA,CAAOC,IAAAA,CAAKC,OAAO,CAAC,CAAC,CAAC;AAE1C;AACA;AACA,MAAMC,UAAAA,GAAaH,MAAAA,CAAOC,IAAAA,CAAKG,KAAK,CAAC;;;AAGvB,cAAA,EAAE,CAAC,EAAEC,KAAK,EAAE,GACtBA,KAAAA,CAAMC,WAAW,KAAK,MAAA,GAASD,KAAAA,CAAME,MAAM,CAACC,UAAU,GAAGH,MAAME,MAAM,CAACE,UAAU,CAAC;kBACnE,EAAE,CAAC,EAAEJ,KAAK,EAAE,GAAKA,KAAAA,CAAMK,MAAM,CAAC,CAAA,CAAE,CAAC;AAClC,iBAAA,EAAE,CAAC,EAAEL,KAAK,EAAE,GAAKA,KAAAA,CAAMM,YAAY,CAAC;AACrD,CAAC;AAWD;;;;;;;;;;;UAYaC,QAAAA,GAAW,CAAC,EAAEC,IAAI,EAAEC,gBAAAA,GAAmB,IAAI,EAAiB,GAAA;IACvE,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;AAE1B,IAAA,MAAMC,eAAeF,aAAAA,CACnB;AAAE5B,QAAAA,EAAAA,EAAIC,iBAAAA,CAAkB,mBAAA,CAAA;QAAsBC,cAAAA,EAAgB;KAAiB,EAC/E;AACE6B,QAAAA,MAAAA,EAAQL,IAAAA,CAAKM,MAAM,GACfJ,aAAAA,CAAc9B,cAAc,CAAC4B,IAAAA,CAAKM,MAAM,CAAC,IACzCJ,aAAAA,CAAcxB,qBAAqB,CAACsB,IAAAA,CAAKO,SAAS,CAAE;AAC1D,KAAA,CAAA;AAGF,IAAA,MAAMC,0BAAYC,GAAA,CAACC,KAAAA,EAAAA;QAAMC,aAAW,EAAA,IAAA;QAACC,KAAAA,EAAM,QAAA;QAASC,MAAAA,EAAO,QAAA;QAASC,IAAAA,EAAK;;IAEzE,qBACEC,IAAA,CAAC3B,KAAK4B,IAAI,EAAA;;0BACRP,GAAA,CAACvB,WAAAA,EAAAA;gBAAY+B,OAAAA,EAAQ,OAAA;AAAQC,gBAAAA,OAAAA,gBAAST,GAAA,CAACU,WAAAA,EAAAA;oBAAYR,aAAW,EAAA;;AAC3DP,gBAAAA,QAAAA,EAAAA;;AAKH,0BAAAW,IAAA,CAAC3B,KAAKgC,OAAO,EAAA;gBAACC,gBAAAA,EAAiB,YAAA;gBAAaC,MAAAA,EAAQ,CAAA;gBAAGC,SAAAA,EAAU,MAAA;gBAAOC,QAAAA,EAAS,OAAA;;kCAG/Ef,GAAA,CAACnB,UAAAA,EAAAA;kCACEY,aAAAA,CAAc;AAAE5B,4BAAAA,EAAAA,EAAIC,iBAAAA,CAAkB,mBAAA,CAAA;4BAAsBC,cAAAA,EAAgB;AAAO,yBAAA;;oBAEpFiD,MAAAA,CAAOC,IAAI,CAACtD,cAAAA,CAAAA,CAAgCuD,GAAG,CAAC,CAACC,GAAAA,iBACjDnB,GAAA,CAACrB,IAAAA,CAAKyC,IAAI,EAAA;4BAERC,IAAAA,EAAK,eAAA;4BACLC,cAAAA,EAAc/B,IAAAA,CAAKM,MAAM,KAAKsB,GAAAA;AAC9BI,4BAAAA,QAAAA,EAAU,CAACC,CAAAA,GAAAA;AACTA,gCAAAA,CAAAA,CAAEC,cAAc,EAAA;AAChBlC,gCAAAA,IAAAA,CAAKmC,SAAS,CAACnC,IAAAA,CAAKM,MAAM,KAAKsB,MAAM,IAAA,GAAOA,GAAAA,CAAAA;AAC9C,4BAAA,CAAA;AACAV,4BAAAA,OAAAA,EAASlB,IAAAA,CAAKM,MAAM,KAAKsB,GAAAA,GAAMpB,SAAAA,GAAY,IAAA;sCAE1CN,aAAAA,CAAc9B,cAAc,CAACwD,GAAAA,CAAI;AAT7BA,yBAAAA,EAAAA,GAAAA,CAAAA,CAAAA;oBAYPH,MAAAA,CAAOC,IAAI,CAAChD,qBAAAA,CAAAA,CAA8CiD,GAAG,CAAC,CAACC,GAAAA,iBAC/DnB,GAAA,CAACrB,IAAAA,CAAKyC,IAAI,EAAA;4BAERC,IAAAA,EAAK,eAAA;4BACLC,cAAAA,EAAc/B,IAAAA,CAAKO,SAAS,KAAKqB,GAAAA;AACjCI,4BAAAA,QAAAA,EAAU,CAACC,CAAAA,GAAAA;AACTA,gCAAAA,CAAAA,CAAEC,cAAc,EAAA;AAChBlC,gCAAAA,IAAAA,CAAKoC,YAAY,CAACpC,IAAAA,CAAKO,SAAS,KAAKqB,MAAM,IAAA,GAAOA,GAAAA,CAAAA;AACpD,4BAAA,CAAA;AACAV,4BAAAA,OAAAA,EAASlB,IAAAA,CAAKO,SAAS,KAAKqB,GAAAA,GAAMpB,SAAAA,GAAY,IAAA;sCAE7CN,aAAAA,CAAcxB,qBAAqB,CAACkD,GAAAA,CAAI;AATpCA,yBAAAA,EAAAA,GAAAA,CAAAA,CAAAA;oBAaR3B,gBAAAA,kBACCc,IAAA,CAAAsB,QAAA,EAAA;;AACE,0CAAA5B,GAAA,CAACrB,KAAKkD,SAAS,EAAA,EAAA,CAAA;0CACf7B,GAAA,CAACnB,UAAAA,EAAAA;0CACEY,aAAAA,CAAc;AACb5B,oCAAAA,EAAAA,EAAIC,iBAAAA,CAAkB,mBAAA,CAAA;oCACtBC,cAAAA,EAAgB;AAClB,iCAAA;;4BAEAiD,MAAAA,CAAOC,IAAI,CAAC3C,cAAAA,CAAAA,CAAsC4C,GAAG,CAAC,CAACY,QAAAA,iBACvD9B,GAAA,CAACrB,IAAAA,CAAKyC,IAAI,EAAA;oCAERC,IAAAA,EAAK,eAAA;oCACLC,cAAAA,EAAc/B,IAAAA,CAAKwC,eAAe,KAAKD,QAAAA;AACvCP,oCAAAA,QAAAA,EAAU,CAACC,CAAAA,GAAAA;AACTA,wCAAAA,CAAAA,CAAEC,cAAc,EAAA;AAChBlC,wCAAAA,IAAAA,CAAKyC,kBAAkB,CAACF,QAAAA,CAAAA;AAC1B,oCAAA,CAAA;AACArB,oCAAAA,OAAAA,EAASlB,IAAAA,CAAKwC,eAAe,KAAKD,QAAAA,GAAW/B,SAAAA,GAAY,IAAA;8CAExDN,aAAAA,CAAcnB,cAAc,CAACwD,QAAAA,CAAS;AATlCA,iCAAAA,EAAAA,QAAAA,CAAAA;;;;;;;AAiBrB;;;;"}
|
|
1
|
+
{"version":3,"file":"SortMenu.mjs","sources":["../../../../../../admin/src/future/pages/Assets/components/SortMenu.tsx"],"sourcesContent":["import { Menu } from '@strapi/design-system';\nimport { Check, ChevronDown } 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 {\n type FoldersPosition,\n type ListSort,\n type SortByKey,\n type SortDirectionKey,\n} from '../hooks/useListSort';\n\nimport type { MessageDescriptor } from 'react-intl';\n\nconst SORT_BY_LABELS: Record<SortByKey, MessageDescriptor> = {\n oldestUploads: {\n id: getTranslationKey('list.sort.oldest-uploads'),\n defaultMessage: 'Oldest uploads',\n },\n mostRecentUpdates: {\n id: getTranslationKey('list.sort.most-recent-updates'),\n defaultMessage: 'Most recent updates',\n },\n};\n\nconst SORT_DIRECTION_LABELS: Record<SortDirectionKey, MessageDescriptor> = {\n nameAsc: { id: getTranslationKey('list.sort.name-asc'), defaultMessage: 'A to Z' },\n nameDesc: { id: getTranslationKey('list.sort.name-desc'), defaultMessage: 'Z to A' },\n sizeAsc: {\n id: getTranslationKey('list.sort.size-asc'),\n defaultMessage: 'File size ascending',\n },\n sizeDesc: {\n id: getTranslationKey('list.sort.size-desc'),\n defaultMessage: 'File size descending',\n },\n};\n\nconst FOLDERS_LABELS: Record<FoldersPosition, MessageDescriptor> = {\n top: { id: getTranslationKey('list.sort.folders-on-top'), defaultMessage: 'On top' },\n mixed: {\n id: getTranslationKey('list.sort.folders-mixed'),\n defaultMessage: 'Mixed with files',\n },\n};\n\n// Stretch to the toolbar row height so the trigger matches the view toggle\n// (the parent Flex uses alignItems=\"stretch\").\nconst SortTrigger = styled(Menu.Trigger)``;\n\n// Full-width section band, like the design mock (sits inside the Menu.Content\n// padding, so the band stops short of the panel edges).\nconst GroupLabel = styled(Menu.Label)`\n width: 100%;\n display: block;\n background: ${({ theme }) =>\n theme.colorScheme === 'dark' ? theme.colors.neutral150 : theme.colors.neutral100};\n padding-inline: ${({ theme }) => theme.spaces[3]};\n border-radius: ${({ theme }) => theme.borderRadius};\n`;\n\ninterface SortMenuProps {\n sort: ListSort;\n /**\n * The grid view forces folders on top (mixing folder cards with asset cards\n * is not supported there), so it hides the Folders group entirely.\n */\n showFoldersGroup?: boolean;\n}\n\n/**\n * Toolbar \"Sort\" dropdown: single-select sections (Sort / Folders). Picking an\n * option keeps the menu open (`onSelect` preventDefault) so several facets can\n * be tuned in one visit; clicking a checked facet clears it (the hook\n * guarantees at least one sort rule stays active).\n *\n * Each section is single-select, so its items are radios: the checkmark icon is\n * decorative, and `aria-checked` is what assistive tech reads. The DS `Menu`\n * exposes no `RadioItem`, but `Menu.Item` forwards extra props onto the element\n * it renders through Radix's `asChild`, where they take precedence over Radix's\n * own `role=\"menuitem\"`.\n */\nexport const SortMenu = ({ sort, showFoldersGroup = true }: SortMenuProps) => {\n const { formatMessage } = useIntl();\n const { trackUsage } = useTracking();\n\n const triggerLabel = formatMessage(\n { id: getTranslationKey('list.sort.trigger'), defaultMessage: 'Sort: {active}' },\n {\n active: sort.sortBy\n ? formatMessage(SORT_BY_LABELS[sort.sortBy])\n : formatMessage(SORT_DIRECTION_LABELS[sort.direction!]),\n }\n );\n\n const checkmark = <Check aria-hidden width=\"1.6rem\" height=\"1.6rem\" fill=\"primary600\" />;\n\n return (\n <Menu.Root>\n <SortTrigger variant=\"ghost\" endIcon={<ChevronDown aria-hidden />}>\n {triggerLabel}\n </SortTrigger>\n {/* The DS default maxHeight (15rem) folds everything after the first\n group behind an invisible scroll — all groups must be visible at\n once. 70vh keeps a scroll on very short viewports. */}\n <Menu.Content popoverPlacement=\"bottom-end\" zIndex={2} maxHeight=\"70vh\" minWidth=\"25rem\">\n {/* One single-select \"Sort\" section: the two rule families were always\n mutually exclusive (one checkmark total), so they share a group. */}\n <GroupLabel>\n {formatMessage({ id: getTranslationKey('list.sort.section'), defaultMessage: 'Sort' })}\n </GroupLabel>\n {(Object.keys(SORT_BY_LABELS) as SortByKey[]).map((key) => (\n <Menu.Item\n key={key}\n role=\"menuitemradio\"\n aria-checked={sort.sortBy === key}\n onSelect={(e: Event) => {\n e.preventDefault();\n if (sort.sortBy !== key) {\n trackUsage('didSortMediaLibraryElements', {\n location: MEDIA_LIBRARY_LOCATION,\n sort: key,\n });\n }\n sort.setSortBy(sort.sortBy === key ? null : key);\n }}\n endIcon={sort.sortBy === key ? checkmark : null}\n >\n {formatMessage(SORT_BY_LABELS[key])}\n </Menu.Item>\n ))}\n {(Object.keys(SORT_DIRECTION_LABELS) as SortDirectionKey[]).map((key) => (\n <Menu.Item\n key={key}\n role=\"menuitemradio\"\n aria-checked={sort.direction === key}\n onSelect={(e: Event) => {\n e.preventDefault();\n if (sort.direction !== key) {\n trackUsage('didSortMediaLibraryElements', {\n location: MEDIA_LIBRARY_LOCATION,\n sort: key,\n });\n }\n sort.setDirection(sort.direction === key ? null : key);\n }}\n endIcon={sort.direction === key ? checkmark : null}\n >\n {formatMessage(SORT_DIRECTION_LABELS[key])}\n </Menu.Item>\n ))}\n\n {showFoldersGroup && (\n <>\n <Menu.Separator />\n <GroupLabel>\n {formatMessage({\n id: getTranslationKey('list.sort.folders'),\n defaultMessage: 'Folders',\n })}\n </GroupLabel>\n {(Object.keys(FOLDERS_LABELS) as FoldersPosition[]).map((position) => (\n <Menu.Item\n key={position}\n role=\"menuitemradio\"\n aria-checked={sort.foldersPosition === position}\n onSelect={(e: Event) => {\n e.preventDefault();\n sort.setFoldersPosition(position);\n }}\n endIcon={sort.foldersPosition === position ? checkmark : null}\n >\n {formatMessage(FOLDERS_LABELS[position])}\n </Menu.Item>\n ))}\n </>\n )}\n </Menu.Content>\n </Menu.Root>\n );\n};\n"],"names":["SORT_BY_LABELS","oldestUploads","id","getTranslationKey","defaultMessage","mostRecentUpdates","SORT_DIRECTION_LABELS","nameAsc","nameDesc","sizeAsc","sizeDesc","FOLDERS_LABELS","top","mixed","SortTrigger","styled","Menu","Trigger","GroupLabel","Label","theme","colorScheme","colors","neutral150","neutral100","spaces","borderRadius","SortMenu","sort","showFoldersGroup","formatMessage","useIntl","trackUsage","useTracking","triggerLabel","active","sortBy","direction","checkmark","_jsx","Check","aria-hidden","width","height","fill","_jsxs","Root","variant","endIcon","ChevronDown","Content","popoverPlacement","zIndex","maxHeight","minWidth","Object","keys","map","key","Item","role","aria-checked","onSelect","e","preventDefault","location","MEDIA_LIBRARY_LOCATION","setSortBy","setDirection","_Fragment","Separator","position","foldersPosition","setFoldersPosition"],"mappings":";;;;;;;;AAgBA,MAAMA,cAAAA,GAAuD;IAC3DC,aAAAA,EAAe;AACbC,QAAAA,EAAAA,EAAIC,iBAAAA,CAAkB,0BAAA,CAAA;QACtBC,cAAAA,EAAgB;AAClB,KAAA;IACAC,iBAAAA,EAAmB;AACjBH,QAAAA,EAAAA,EAAIC,iBAAAA,CAAkB,+BAAA,CAAA;QACtBC,cAAAA,EAAgB;AAClB;AACF,CAAA;AAEA,MAAME,qBAAAA,GAAqE;IACzEC,OAAAA,EAAS;AAAEL,QAAAA,EAAAA,EAAIC,iBAAAA,CAAkB,oBAAA,CAAA;QAAuBC,cAAAA,EAAgB;AAAS,KAAA;IACjFI,QAAAA,EAAU;AAAEN,QAAAA,EAAAA,EAAIC,iBAAAA,CAAkB,qBAAA,CAAA;QAAwBC,cAAAA,EAAgB;AAAS,KAAA;IACnFK,OAAAA,EAAS;AACPP,QAAAA,EAAAA,EAAIC,iBAAAA,CAAkB,oBAAA,CAAA;QACtBC,cAAAA,EAAgB;AAClB,KAAA;IACAM,QAAAA,EAAU;AACRR,QAAAA,EAAAA,EAAIC,iBAAAA,CAAkB,qBAAA,CAAA;QACtBC,cAAAA,EAAgB;AAClB;AACF,CAAA;AAEA,MAAMO,cAAAA,GAA6D;IACjEC,GAAAA,EAAK;AAAEV,QAAAA,EAAAA,EAAIC,iBAAAA,CAAkB,0BAAA,CAAA;QAA6BC,cAAAA,EAAgB;AAAS,KAAA;IACnFS,KAAAA,EAAO;AACLX,QAAAA,EAAAA,EAAIC,iBAAAA,CAAkB,yBAAA,CAAA;QACtBC,cAAAA,EAAgB;AAClB;AACF,CAAA;AAEA;AACA;AACA,MAAMU,cAAcC,MAAAA,CAAOC,IAAAA,CAAKC,OAAO,CAAC,CAAC,CAAC;AAE1C;AACA;AACA,MAAMC,UAAAA,GAAaH,MAAAA,CAAOC,IAAAA,CAAKG,KAAK,CAAC;;;AAGvB,cAAA,EAAE,CAAC,EAAEC,KAAK,EAAE,GACtBA,KAAAA,CAAMC,WAAW,KAAK,MAAA,GAASD,KAAAA,CAAME,MAAM,CAACC,UAAU,GAAGH,MAAME,MAAM,CAACE,UAAU,CAAC;kBACnE,EAAE,CAAC,EAAEJ,KAAK,EAAE,GAAKA,KAAAA,CAAMK,MAAM,CAAC,CAAA,CAAE,CAAC;AAClC,iBAAA,EAAE,CAAC,EAAEL,KAAK,EAAE,GAAKA,KAAAA,CAAMM,YAAY,CAAC;AACrD,CAAC;AAWD;;;;;;;;;;;UAYaC,QAAAA,GAAW,CAAC,EAAEC,IAAI,EAAEC,gBAAAA,GAAmB,IAAI,EAAiB,GAAA;IACvE,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;IAC1B,MAAM,EAAEC,UAAU,EAAE,GAAGC,WAAAA,EAAAA;AAEvB,IAAA,MAAMC,eAAeJ,aAAAA,CACnB;AAAE5B,QAAAA,EAAAA,EAAIC,iBAAAA,CAAkB,mBAAA,CAAA;QAAsBC,cAAAA,EAAgB;KAAiB,EAC/E;AACE+B,QAAAA,MAAAA,EAAQP,IAAAA,CAAKQ,MAAM,GACfN,aAAAA,CAAc9B,cAAc,CAAC4B,IAAAA,CAAKQ,MAAM,CAAC,IACzCN,aAAAA,CAAcxB,qBAAqB,CAACsB,IAAAA,CAAKS,SAAS,CAAE;AAC1D,KAAA,CAAA;AAGF,IAAA,MAAMC,0BAAYC,GAAA,CAACC,KAAAA,EAAAA;QAAMC,aAAW,EAAA,IAAA;QAACC,KAAAA,EAAM,QAAA;QAASC,MAAAA,EAAO,QAAA;QAASC,IAAAA,EAAK;;IAEzE,qBACEC,IAAA,CAAC7B,KAAK8B,IAAI,EAAA;;0BACRP,GAAA,CAACzB,WAAAA,EAAAA;gBAAYiC,OAAAA,EAAQ,OAAA;AAAQC,gBAAAA,OAAAA,gBAAST,GAAA,CAACU,WAAAA,EAAAA;oBAAYR,aAAW,EAAA;;AAC3DP,gBAAAA,QAAAA,EAAAA;;AAKH,0BAAAW,IAAA,CAAC7B,KAAKkC,OAAO,EAAA;gBAACC,gBAAAA,EAAiB,YAAA;gBAAaC,MAAAA,EAAQ,CAAA;gBAAGC,SAAAA,EAAU,MAAA;gBAAOC,QAAAA,EAAS,OAAA;;kCAG/Ef,GAAA,CAACrB,UAAAA,EAAAA;kCACEY,aAAAA,CAAc;AAAE5B,4BAAAA,EAAAA,EAAIC,iBAAAA,CAAkB,mBAAA,CAAA;4BAAsBC,cAAAA,EAAgB;AAAO,yBAAA;;oBAEpFmD,MAAAA,CAAOC,IAAI,CAACxD,cAAAA,CAAAA,CAAgCyD,GAAG,CAAC,CAACC,GAAAA,iBACjDnB,GAAA,CAACvB,IAAAA,CAAK2C,IAAI,EAAA;4BAERC,IAAAA,EAAK,eAAA;4BACLC,cAAAA,EAAcjC,IAAAA,CAAKQ,MAAM,KAAKsB,GAAAA;AAC9BI,4BAAAA,QAAAA,EAAU,CAACC,CAAAA,GAAAA;AACTA,gCAAAA,CAAAA,CAAEC,cAAc,EAAA;gCAChB,IAAIpC,IAAAA,CAAKQ,MAAM,KAAKsB,GAAAA,EAAK;AACvB1B,oCAAAA,UAAAA,CAAW,6BAAA,EAA+B;wCACxCiC,QAAAA,EAAUC,sBAAAA;wCACVtC,IAAAA,EAAM8B;AACR,qCAAA,CAAA;AACF,gCAAA;AACA9B,gCAAAA,IAAAA,CAAKuC,SAAS,CAACvC,IAAAA,CAAKQ,MAAM,KAAKsB,MAAM,IAAA,GAAOA,GAAAA,CAAAA;AAC9C,4BAAA,CAAA;AACAV,4BAAAA,OAAAA,EAASpB,IAAAA,CAAKQ,MAAM,KAAKsB,GAAAA,GAAMpB,SAAAA,GAAY,IAAA;sCAE1CR,aAAAA,CAAc9B,cAAc,CAAC0D,GAAAA,CAAI;AAf7BA,yBAAAA,EAAAA,GAAAA,CAAAA,CAAAA;oBAkBPH,MAAAA,CAAOC,IAAI,CAAClD,qBAAAA,CAAAA,CAA8CmD,GAAG,CAAC,CAACC,GAAAA,iBAC/DnB,GAAA,CAACvB,IAAAA,CAAK2C,IAAI,EAAA;4BAERC,IAAAA,EAAK,eAAA;4BACLC,cAAAA,EAAcjC,IAAAA,CAAKS,SAAS,KAAKqB,GAAAA;AACjCI,4BAAAA,QAAAA,EAAU,CAACC,CAAAA,GAAAA;AACTA,gCAAAA,CAAAA,CAAEC,cAAc,EAAA;gCAChB,IAAIpC,IAAAA,CAAKS,SAAS,KAAKqB,GAAAA,EAAK;AAC1B1B,oCAAAA,UAAAA,CAAW,6BAAA,EAA+B;wCACxCiC,QAAAA,EAAUC,sBAAAA;wCACVtC,IAAAA,EAAM8B;AACR,qCAAA,CAAA;AACF,gCAAA;AACA9B,gCAAAA,IAAAA,CAAKwC,YAAY,CAACxC,IAAAA,CAAKS,SAAS,KAAKqB,MAAM,IAAA,GAAOA,GAAAA,CAAAA;AACpD,4BAAA,CAAA;AACAV,4BAAAA,OAAAA,EAASpB,IAAAA,CAAKS,SAAS,KAAKqB,GAAAA,GAAMpB,SAAAA,GAAY,IAAA;sCAE7CR,aAAAA,CAAcxB,qBAAqB,CAACoD,GAAAA,CAAI;AAfpCA,yBAAAA,EAAAA,GAAAA,CAAAA,CAAAA;oBAmBR7B,gBAAAA,kBACCgB,IAAA,CAAAwB,QAAA,EAAA;;AACE,0CAAA9B,GAAA,CAACvB,KAAKsD,SAAS,EAAA,EAAA,CAAA;0CACf/B,GAAA,CAACrB,UAAAA,EAAAA;0CACEY,aAAAA,CAAc;AACb5B,oCAAAA,EAAAA,EAAIC,iBAAAA,CAAkB,mBAAA,CAAA;oCACtBC,cAAAA,EAAgB;AAClB,iCAAA;;4BAEAmD,MAAAA,CAAOC,IAAI,CAAC7C,cAAAA,CAAAA,CAAsC8C,GAAG,CAAC,CAACc,QAAAA,iBACvDhC,GAAA,CAACvB,IAAAA,CAAK2C,IAAI,EAAA;oCAERC,IAAAA,EAAK,eAAA;oCACLC,cAAAA,EAAcjC,IAAAA,CAAK4C,eAAe,KAAKD,QAAAA;AACvCT,oCAAAA,QAAAA,EAAU,CAACC,CAAAA,GAAAA;AACTA,wCAAAA,CAAAA,CAAEC,cAAc,EAAA;AAChBpC,wCAAAA,IAAAA,CAAK6C,kBAAkB,CAACF,QAAAA,CAAAA;AAC1B,oCAAA,CAAA;AACAvB,oCAAAA,OAAAA,EAASpB,IAAAA,CAAK4C,eAAe,KAAKD,QAAAA,GAAWjC,SAAAA,GAAY,IAAA;8CAExDR,aAAAA,CAAcnB,cAAc,CAAC4D,QAAAA,CAAS;AATlCA,iCAAAA,EAAAA,QAAAA,CAAAA;;;;;;;AAiBrB;;;;"}
|
|
@@ -28,6 +28,9 @@ const AssetSelectionProvider = ({ children, disabled = false })=>{
|
|
|
28
28
|
}, [
|
|
29
29
|
disabled
|
|
30
30
|
]);
|
|
31
|
+
// No `disabled` guard, like `clear`: this only ever shrinks the selection, and a
|
|
32
|
+
// disabled provider has nothing in it (every additive path is guarded).
|
|
33
|
+
const deselect = React.useCallback((key)=>setState((prev)=>selection.deselect(prev, key)), []);
|
|
31
34
|
const clear = React.useCallback(()=>setState(selection.clearSelection()), []);
|
|
32
35
|
const selectedIds = React.useMemo(()=>selection.getIdsOfKind(state.selectedKeys, 'asset'), [
|
|
33
36
|
state.selectedKeys
|
|
@@ -44,6 +47,7 @@ const AssetSelectionProvider = ({ children, disabled = false })=>{
|
|
|
44
47
|
toggle,
|
|
45
48
|
selectRange,
|
|
46
49
|
selectAll,
|
|
50
|
+
deselect,
|
|
47
51
|
clear
|
|
48
52
|
}), [
|
|
49
53
|
state.selectedKeys,
|
|
@@ -54,6 +58,7 @@ const AssetSelectionProvider = ({ children, disabled = false })=>{
|
|
|
54
58
|
toggle,
|
|
55
59
|
selectRange,
|
|
56
60
|
selectAll,
|
|
61
|
+
deselect,
|
|
57
62
|
clear
|
|
58
63
|
]);
|
|
59
64
|
return React.createElement(AssetSelectionContext.Provider, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useAssetSelection.js","sources":["../../../../../../admin/src/future/pages/Assets/hooks/useAssetSelection.ts"],"sourcesContent":["import {\n createContext,\n createElement,\n useCallback,\n useContext,\n useMemo,\n useState,\n type ReactNode,\n} from 'react';\n\nimport {\n clearSelection,\n createEmptySelection,\n getIdsOfKind,\n selectAll as selectAllState,\n selectRange as selectRangeState,\n toggleSelection,\n type ItemKey,\n type SelectionState,\n} from '../utils/selection';\n\n/**\n * Ephemeral, view-state-only multi-select for the future Media Library. Selection\n * is page-scoped and reset on folder navigation or sort/filter changes (the\n * table/grid toggle keeps it — same list, different presentation).\n *\n * The actual computation lives in `../utils/selection.ts` (pure + unit-tested);\n * this hook is a thin React wrapper. Assets and folders share one mechanism —\n * items are tracked as namespaced keys (`asset:1` / `folder:1`) so toggle, range\n * and select-all behave the same for both. Range / select-all receive the\n * ordered key array from the caller (the view owns the rendered order), keeping\n * the context data-source-agnostic.\n */\nexport interface AssetSelection {\n /** Every selected item key (assets and folders), render-order agnostic. */\n selectedKeys: Set<ItemKey>;\n /** Selected asset ids, derived from {@link selectedKeys}. */\n selectedIds: Set<number>;\n /** Selected folder ids, derived from {@link selectedKeys}. */\n selectedFolderIds: Set<number>;\n anchorKey: ItemKey | null;\n isSelected: (key: ItemKey) => boolean;\n /** Additive toggle (Cmd/Ctrl+click, item checkbox). */\n toggle: (key: ItemKey) => void;\n /** Shift+click — selects the contiguous range from the anchor to the target. */\n selectRange: (orderedKeys: ItemKey[], targetKey: ItemKey) => void;\n /** Header checkbox — selects every rendered item (folders and assets). */\n selectAll: (orderedKeys: ItemKey[]) => void;\n /** Close button / folder navigation / list-identity changes. */\n clear: () => void;\n}\n\nconst AssetSelectionContext = createContext<AssetSelection | null>(null);\n\ninterface AssetSelectionProviderProps {\n children: ReactNode;\n /**\n * When true, selection is inert: every mutator is a no-op and nothing ever\n * reads as selected. Every bulk action is gated on `assets.update`, so a user\n * without it has nothing to select for — the views also hide the checkboxes,\n * and this makes the remaining paths (click-to-select, Space key) do nothing.\n */\n disabled?: boolean;\n}\n\nexport const AssetSelectionProvider = ({\n children,\n disabled = false,\n}: AssetSelectionProviderProps) => {\n const [state, setState] = useState<SelectionState>(createEmptySelection);\n\n const isSelected = useCallback(\n (key: ItemKey) => !disabled && state.selectedKeys.has(key),\n [disabled, state.selectedKeys]\n );\n\n const toggle = useCallback(\n (key: ItemKey) => {\n if (disabled) return;\n setState((prev) => toggleSelection(prev, key));\n },\n [disabled]\n );\n\n const selectRange = useCallback(\n (orderedKeys: ItemKey[], targetKey: ItemKey) => {\n if (disabled) return;\n setState((prev) => selectRangeState(prev, orderedKeys, targetKey));\n },\n [disabled]\n );\n\n const selectAll = useCallback(\n (orderedKeys: ItemKey[]) => {\n if (disabled) return;\n setState(selectAllState(orderedKeys));\n },\n [disabled]\n );\n\n const clear = useCallback(() => setState(clearSelection()), []);\n\n const selectedIds = useMemo(\n () => getIdsOfKind(state.selectedKeys, 'asset'),\n [state.selectedKeys]\n );\n const selectedFolderIds = useMemo(\n () => getIdsOfKind(state.selectedKeys, 'folder'),\n [state.selectedKeys]\n );\n\n const value = useMemo<AssetSelection>(\n () => ({\n selectedKeys: state.selectedKeys,\n selectedIds,\n selectedFolderIds,\n anchorKey: state.anchorKey,\n isSelected,\n toggle,\n selectRange,\n selectAll,\n clear,\n }),\n [\n state.selectedKeys,\n selectedIds,\n selectedFolderIds,\n state.anchorKey,\n isSelected,\n toggle,\n selectRange,\n selectAll,\n clear,\n ]\n );\n\n return createElement(AssetSelectionContext.Provider, { value }, children);\n};\n\nexport const useAssetSelection = () => {\n const context = useContext(AssetSelectionContext);\n\n if (!context) {\n throw new Error('useAssetSelection must be used within an AssetSelectionProvider');\n }\n\n return context;\n};\n\nexport const useAssetSelectionOptional = () => useContext(AssetSelectionContext);\n"],"names":["AssetSelectionContext","createContext","AssetSelectionProvider","children","disabled","state","setState","useState","createEmptySelection","isSelected","useCallback","key","selectedKeys","has","toggle","prev","toggleSelection","selectRange","orderedKeys","targetKey","selectRangeState","selectAll","selectAllState","clear","clearSelection","selectedIds","useMemo","getIdsOfKind","selectedFolderIds","value","anchorKey","createElement","Provider","useAssetSelection","context","useContext","Error","useAssetSelectionOptional"],"mappings":";;;;;
|
|
1
|
+
{"version":3,"file":"useAssetSelection.js","sources":["../../../../../../admin/src/future/pages/Assets/hooks/useAssetSelection.ts"],"sourcesContent":["import {\n createContext,\n createElement,\n useCallback,\n useContext,\n useMemo,\n useState,\n type ReactNode,\n} from 'react';\n\nimport {\n clearSelection,\n createEmptySelection,\n deselect as deselectState,\n getIdsOfKind,\n selectAll as selectAllState,\n selectRange as selectRangeState,\n toggleSelection,\n type ItemKey,\n type SelectionState,\n} from '../utils/selection';\n\n/**\n * Ephemeral, view-state-only multi-select for the future Media Library. Selection\n * is page-scoped and reset on folder navigation or sort/filter changes (the\n * table/grid toggle keeps it — same list, different presentation).\n *\n * The actual computation lives in `../utils/selection.ts` (pure + unit-tested);\n * this hook is a thin React wrapper. Assets and folders share one mechanism —\n * items are tracked as namespaced keys (`asset:1` / `folder:1`) so toggle, range\n * and select-all behave the same for both. Range / select-all receive the\n * ordered key array from the caller (the view owns the rendered order), keeping\n * the context data-source-agnostic.\n */\nexport interface AssetSelection {\n /** Every selected item key (assets and folders), render-order agnostic. */\n selectedKeys: Set<ItemKey>;\n /** Selected asset ids, derived from {@link selectedKeys}. */\n selectedIds: Set<number>;\n /** Selected folder ids, derived from {@link selectedKeys}. */\n selectedFolderIds: Set<number>;\n anchorKey: ItemKey | null;\n isSelected: (key: ItemKey) => boolean;\n /** Additive toggle (Cmd/Ctrl+click, item checkbox). */\n toggle: (key: ItemKey) => void;\n /** Shift+click — selects the contiguous range from the anchor to the target. */\n selectRange: (orderedKeys: ItemKey[], targetKey: ItemKey) => void;\n /** Header checkbox — selects every rendered item (folders and assets). */\n selectAll: (orderedKeys: ItemKey[]) => void;\n /** Row-level \"...\" menu — drops one key when its item leaves the list (move, delete). */\n deselect: (key: ItemKey) => void;\n /** Close button / folder navigation / list-identity changes. */\n clear: () => void;\n}\n\nconst AssetSelectionContext = createContext<AssetSelection | null>(null);\n\ninterface AssetSelectionProviderProps {\n children: ReactNode;\n /**\n * When true, selection is inert: every mutator is a no-op and nothing ever\n * reads as selected. Every bulk action is gated on `assets.update`, so a user\n * without it has nothing to select for — the views also hide the checkboxes,\n * and this makes the remaining paths (click-to-select, Space key) do nothing.\n */\n disabled?: boolean;\n}\n\nexport const AssetSelectionProvider = ({\n children,\n disabled = false,\n}: AssetSelectionProviderProps) => {\n const [state, setState] = useState<SelectionState>(createEmptySelection);\n\n const isSelected = useCallback(\n (key: ItemKey) => !disabled && state.selectedKeys.has(key),\n [disabled, state.selectedKeys]\n );\n\n const toggle = useCallback(\n (key: ItemKey) => {\n if (disabled) return;\n setState((prev) => toggleSelection(prev, key));\n },\n [disabled]\n );\n\n const selectRange = useCallback(\n (orderedKeys: ItemKey[], targetKey: ItemKey) => {\n if (disabled) return;\n setState((prev) => selectRangeState(prev, orderedKeys, targetKey));\n },\n [disabled]\n );\n\n const selectAll = useCallback(\n (orderedKeys: ItemKey[]) => {\n if (disabled) return;\n setState(selectAllState(orderedKeys));\n },\n [disabled]\n );\n\n // No `disabled` guard, like `clear`: this only ever shrinks the selection, and a\n // disabled provider has nothing in it (every additive path is guarded).\n const deselect = useCallback((key: ItemKey) => setState((prev) => deselectState(prev, key)), []);\n\n const clear = useCallback(() => setState(clearSelection()), []);\n\n const selectedIds = useMemo(\n () => getIdsOfKind(state.selectedKeys, 'asset'),\n [state.selectedKeys]\n );\n const selectedFolderIds = useMemo(\n () => getIdsOfKind(state.selectedKeys, 'folder'),\n [state.selectedKeys]\n );\n\n const value = useMemo<AssetSelection>(\n () => ({\n selectedKeys: state.selectedKeys,\n selectedIds,\n selectedFolderIds,\n anchorKey: state.anchorKey,\n isSelected,\n toggle,\n selectRange,\n selectAll,\n deselect,\n clear,\n }),\n [\n state.selectedKeys,\n selectedIds,\n selectedFolderIds,\n state.anchorKey,\n isSelected,\n toggle,\n selectRange,\n selectAll,\n deselect,\n clear,\n ]\n );\n\n return createElement(AssetSelectionContext.Provider, { value }, children);\n};\n\nexport const useAssetSelection = () => {\n const context = useContext(AssetSelectionContext);\n\n if (!context) {\n throw new Error('useAssetSelection must be used within an AssetSelectionProvider');\n }\n\n return context;\n};\n\nexport const useAssetSelectionOptional = () => useContext(AssetSelectionContext);\n"],"names":["AssetSelectionContext","createContext","AssetSelectionProvider","children","disabled","state","setState","useState","createEmptySelection","isSelected","useCallback","key","selectedKeys","has","toggle","prev","toggleSelection","selectRange","orderedKeys","targetKey","selectRangeState","selectAll","selectAllState","deselect","deselectState","clear","clearSelection","selectedIds","useMemo","getIdsOfKind","selectedFolderIds","value","anchorKey","createElement","Provider","useAssetSelection","context","useContext","Error","useAssetSelectionOptional"],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { useState, useCallback, useMemo, createElement, createContext, useContext } from 'react';
|
|
2
|
-
import { createEmptySelection, toggleSelection, selectRange, selectAll, clearSelection, getIdsOfKind } from '../utils/selection.mjs';
|
|
2
|
+
import { createEmptySelection, toggleSelection, selectRange, selectAll, deselect, clearSelection, getIdsOfKind } from '../utils/selection.mjs';
|
|
3
3
|
|
|
4
4
|
const AssetSelectionContext = createContext(null);
|
|
5
5
|
const AssetSelectionProvider = ({ children, disabled = false })=>{
|
|
@@ -26,6 +26,9 @@ const AssetSelectionProvider = ({ children, disabled = false })=>{
|
|
|
26
26
|
}, [
|
|
27
27
|
disabled
|
|
28
28
|
]);
|
|
29
|
+
// No `disabled` guard, like `clear`: this only ever shrinks the selection, and a
|
|
30
|
+
// disabled provider has nothing in it (every additive path is guarded).
|
|
31
|
+
const deselect$1 = useCallback((key)=>setState((prev)=>deselect(prev, key)), []);
|
|
29
32
|
const clear = useCallback(()=>setState(clearSelection()), []);
|
|
30
33
|
const selectedIds = useMemo(()=>getIdsOfKind(state.selectedKeys, 'asset'), [
|
|
31
34
|
state.selectedKeys
|
|
@@ -42,6 +45,7 @@ const AssetSelectionProvider = ({ children, disabled = false })=>{
|
|
|
42
45
|
toggle,
|
|
43
46
|
selectRange: selectRange$1,
|
|
44
47
|
selectAll: selectAll$1,
|
|
48
|
+
deselect: deselect$1,
|
|
45
49
|
clear
|
|
46
50
|
}), [
|
|
47
51
|
state.selectedKeys,
|
|
@@ -52,6 +56,7 @@ const AssetSelectionProvider = ({ children, disabled = false })=>{
|
|
|
52
56
|
toggle,
|
|
53
57
|
selectRange$1,
|
|
54
58
|
selectAll$1,
|
|
59
|
+
deselect$1,
|
|
55
60
|
clear
|
|
56
61
|
]);
|
|
57
62
|
return createElement(AssetSelectionContext.Provider, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useAssetSelection.mjs","sources":["../../../../../../admin/src/future/pages/Assets/hooks/useAssetSelection.ts"],"sourcesContent":["import {\n createContext,\n createElement,\n useCallback,\n useContext,\n useMemo,\n useState,\n type ReactNode,\n} from 'react';\n\nimport {\n clearSelection,\n createEmptySelection,\n getIdsOfKind,\n selectAll as selectAllState,\n selectRange as selectRangeState,\n toggleSelection,\n type ItemKey,\n type SelectionState,\n} from '../utils/selection';\n\n/**\n * Ephemeral, view-state-only multi-select for the future Media Library. Selection\n * is page-scoped and reset on folder navigation or sort/filter changes (the\n * table/grid toggle keeps it — same list, different presentation).\n *\n * The actual computation lives in `../utils/selection.ts` (pure + unit-tested);\n * this hook is a thin React wrapper. Assets and folders share one mechanism —\n * items are tracked as namespaced keys (`asset:1` / `folder:1`) so toggle, range\n * and select-all behave the same for both. Range / select-all receive the\n * ordered key array from the caller (the view owns the rendered order), keeping\n * the context data-source-agnostic.\n */\nexport interface AssetSelection {\n /** Every selected item key (assets and folders), render-order agnostic. */\n selectedKeys: Set<ItemKey>;\n /** Selected asset ids, derived from {@link selectedKeys}. */\n selectedIds: Set<number>;\n /** Selected folder ids, derived from {@link selectedKeys}. */\n selectedFolderIds: Set<number>;\n anchorKey: ItemKey | null;\n isSelected: (key: ItemKey) => boolean;\n /** Additive toggle (Cmd/Ctrl+click, item checkbox). */\n toggle: (key: ItemKey) => void;\n /** Shift+click — selects the contiguous range from the anchor to the target. */\n selectRange: (orderedKeys: ItemKey[], targetKey: ItemKey) => void;\n /** Header checkbox — selects every rendered item (folders and assets). */\n selectAll: (orderedKeys: ItemKey[]) => void;\n /** Close button / folder navigation / list-identity changes. */\n clear: () => void;\n}\n\nconst AssetSelectionContext = createContext<AssetSelection | null>(null);\n\ninterface AssetSelectionProviderProps {\n children: ReactNode;\n /**\n * When true, selection is inert: every mutator is a no-op and nothing ever\n * reads as selected. Every bulk action is gated on `assets.update`, so a user\n * without it has nothing to select for — the views also hide the checkboxes,\n * and this makes the remaining paths (click-to-select, Space key) do nothing.\n */\n disabled?: boolean;\n}\n\nexport const AssetSelectionProvider = ({\n children,\n disabled = false,\n}: AssetSelectionProviderProps) => {\n const [state, setState] = useState<SelectionState>(createEmptySelection);\n\n const isSelected = useCallback(\n (key: ItemKey) => !disabled && state.selectedKeys.has(key),\n [disabled, state.selectedKeys]\n );\n\n const toggle = useCallback(\n (key: ItemKey) => {\n if (disabled) return;\n setState((prev) => toggleSelection(prev, key));\n },\n [disabled]\n );\n\n const selectRange = useCallback(\n (orderedKeys: ItemKey[], targetKey: ItemKey) => {\n if (disabled) return;\n setState((prev) => selectRangeState(prev, orderedKeys, targetKey));\n },\n [disabled]\n );\n\n const selectAll = useCallback(\n (orderedKeys: ItemKey[]) => {\n if (disabled) return;\n setState(selectAllState(orderedKeys));\n },\n [disabled]\n );\n\n const clear = useCallback(() => setState(clearSelection()), []);\n\n const selectedIds = useMemo(\n () => getIdsOfKind(state.selectedKeys, 'asset'),\n [state.selectedKeys]\n );\n const selectedFolderIds = useMemo(\n () => getIdsOfKind(state.selectedKeys, 'folder'),\n [state.selectedKeys]\n );\n\n const value = useMemo<AssetSelection>(\n () => ({\n selectedKeys: state.selectedKeys,\n selectedIds,\n selectedFolderIds,\n anchorKey: state.anchorKey,\n isSelected,\n toggle,\n selectRange,\n selectAll,\n clear,\n }),\n [\n state.selectedKeys,\n selectedIds,\n selectedFolderIds,\n state.anchorKey,\n isSelected,\n toggle,\n selectRange,\n selectAll,\n clear,\n ]\n );\n\n return createElement(AssetSelectionContext.Provider, { value }, children);\n};\n\nexport const useAssetSelection = () => {\n const context = useContext(AssetSelectionContext);\n\n if (!context) {\n throw new Error('useAssetSelection must be used within an AssetSelectionProvider');\n }\n\n return context;\n};\n\nexport const useAssetSelectionOptional = () => useContext(AssetSelectionContext);\n"],"names":["AssetSelectionContext","createContext","AssetSelectionProvider","children","disabled","state","setState","useState","createEmptySelection","isSelected","useCallback","key","selectedKeys","has","toggle","prev","toggleSelection","selectRange","orderedKeys","targetKey","selectRangeState","selectAll","selectAllState","clear","clearSelection","selectedIds","useMemo","getIdsOfKind","selectedFolderIds","value","anchorKey","createElement","Provider","useAssetSelection","context","useContext","Error","useAssetSelectionOptional"],"mappings":";;;
|
|
1
|
+
{"version":3,"file":"useAssetSelection.mjs","sources":["../../../../../../admin/src/future/pages/Assets/hooks/useAssetSelection.ts"],"sourcesContent":["import {\n createContext,\n createElement,\n useCallback,\n useContext,\n useMemo,\n useState,\n type ReactNode,\n} from 'react';\n\nimport {\n clearSelection,\n createEmptySelection,\n deselect as deselectState,\n getIdsOfKind,\n selectAll as selectAllState,\n selectRange as selectRangeState,\n toggleSelection,\n type ItemKey,\n type SelectionState,\n} from '../utils/selection';\n\n/**\n * Ephemeral, view-state-only multi-select for the future Media Library. Selection\n * is page-scoped and reset on folder navigation or sort/filter changes (the\n * table/grid toggle keeps it — same list, different presentation).\n *\n * The actual computation lives in `../utils/selection.ts` (pure + unit-tested);\n * this hook is a thin React wrapper. Assets and folders share one mechanism —\n * items are tracked as namespaced keys (`asset:1` / `folder:1`) so toggle, range\n * and select-all behave the same for both. Range / select-all receive the\n * ordered key array from the caller (the view owns the rendered order), keeping\n * the context data-source-agnostic.\n */\nexport interface AssetSelection {\n /** Every selected item key (assets and folders), render-order agnostic. */\n selectedKeys: Set<ItemKey>;\n /** Selected asset ids, derived from {@link selectedKeys}. */\n selectedIds: Set<number>;\n /** Selected folder ids, derived from {@link selectedKeys}. */\n selectedFolderIds: Set<number>;\n anchorKey: ItemKey | null;\n isSelected: (key: ItemKey) => boolean;\n /** Additive toggle (Cmd/Ctrl+click, item checkbox). */\n toggle: (key: ItemKey) => void;\n /** Shift+click — selects the contiguous range from the anchor to the target. */\n selectRange: (orderedKeys: ItemKey[], targetKey: ItemKey) => void;\n /** Header checkbox — selects every rendered item (folders and assets). */\n selectAll: (orderedKeys: ItemKey[]) => void;\n /** Row-level \"...\" menu — drops one key when its item leaves the list (move, delete). */\n deselect: (key: ItemKey) => void;\n /** Close button / folder navigation / list-identity changes. */\n clear: () => void;\n}\n\nconst AssetSelectionContext = createContext<AssetSelection | null>(null);\n\ninterface AssetSelectionProviderProps {\n children: ReactNode;\n /**\n * When true, selection is inert: every mutator is a no-op and nothing ever\n * reads as selected. Every bulk action is gated on `assets.update`, so a user\n * without it has nothing to select for — the views also hide the checkboxes,\n * and this makes the remaining paths (click-to-select, Space key) do nothing.\n */\n disabled?: boolean;\n}\n\nexport const AssetSelectionProvider = ({\n children,\n disabled = false,\n}: AssetSelectionProviderProps) => {\n const [state, setState] = useState<SelectionState>(createEmptySelection);\n\n const isSelected = useCallback(\n (key: ItemKey) => !disabled && state.selectedKeys.has(key),\n [disabled, state.selectedKeys]\n );\n\n const toggle = useCallback(\n (key: ItemKey) => {\n if (disabled) return;\n setState((prev) => toggleSelection(prev, key));\n },\n [disabled]\n );\n\n const selectRange = useCallback(\n (orderedKeys: ItemKey[], targetKey: ItemKey) => {\n if (disabled) return;\n setState((prev) => selectRangeState(prev, orderedKeys, targetKey));\n },\n [disabled]\n );\n\n const selectAll = useCallback(\n (orderedKeys: ItemKey[]) => {\n if (disabled) return;\n setState(selectAllState(orderedKeys));\n },\n [disabled]\n );\n\n // No `disabled` guard, like `clear`: this only ever shrinks the selection, and a\n // disabled provider has nothing in it (every additive path is guarded).\n const deselect = useCallback((key: ItemKey) => setState((prev) => deselectState(prev, key)), []);\n\n const clear = useCallback(() => setState(clearSelection()), []);\n\n const selectedIds = useMemo(\n () => getIdsOfKind(state.selectedKeys, 'asset'),\n [state.selectedKeys]\n );\n const selectedFolderIds = useMemo(\n () => getIdsOfKind(state.selectedKeys, 'folder'),\n [state.selectedKeys]\n );\n\n const value = useMemo<AssetSelection>(\n () => ({\n selectedKeys: state.selectedKeys,\n selectedIds,\n selectedFolderIds,\n anchorKey: state.anchorKey,\n isSelected,\n toggle,\n selectRange,\n selectAll,\n deselect,\n clear,\n }),\n [\n state.selectedKeys,\n selectedIds,\n selectedFolderIds,\n state.anchorKey,\n isSelected,\n toggle,\n selectRange,\n selectAll,\n deselect,\n clear,\n ]\n );\n\n return createElement(AssetSelectionContext.Provider, { value }, children);\n};\n\nexport const useAssetSelection = () => {\n const context = useContext(AssetSelectionContext);\n\n if (!context) {\n throw new Error('useAssetSelection must be used within an AssetSelectionProvider');\n }\n\n return context;\n};\n\nexport const useAssetSelectionOptional = () => useContext(AssetSelectionContext);\n"],"names":["AssetSelectionContext","createContext","AssetSelectionProvider","children","disabled","state","setState","useState","createEmptySelection","isSelected","useCallback","key","selectedKeys","has","toggle","prev","toggleSelection","selectRange","orderedKeys","targetKey","selectRangeState","selectAll","selectAllState","deselect","deselectState","clear","clearSelection","selectedIds","useMemo","getIdsOfKind","selectedFolderIds","value","anchorKey","createElement","Provider","useAssetSelection","context","useContext","Error","useAssetSelectionOptional"],"mappings":"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"}
|
|
@@ -39,6 +39,22 @@ const createEmptySelection = ()=>({
|
|
|
39
39
|
anchorKey: key
|
|
40
40
|
};
|
|
41
41
|
};
|
|
42
|
+
/**
|
|
43
|
+
* Subtractive counterpart to {@link toggleSelection} — removes a key without the
|
|
44
|
+
* add-if-absent ambiguity, leaving the rest of the selection alone. Used when a
|
|
45
|
+
* single-item affordance (a row's "..." menu) makes exactly one key stale.
|
|
46
|
+
*
|
|
47
|
+
* Idempotent: removing a key that was never selected is a no-op. The anchor is
|
|
48
|
+
* dropped only when it is the removed key, so a Shift+click range built around
|
|
49
|
+
* other rows survives.
|
|
50
|
+
*/ const deselect = (state, key)=>{
|
|
51
|
+
const selectedKeys = new Set(state.selectedKeys);
|
|
52
|
+
selectedKeys.delete(key);
|
|
53
|
+
return {
|
|
54
|
+
selectedKeys,
|
|
55
|
+
anchorKey: state.anchorKey === key ? null : state.anchorKey
|
|
56
|
+
};
|
|
57
|
+
};
|
|
42
58
|
/**
|
|
43
59
|
* Shift+click — selects the contiguous range between the current anchor and the
|
|
44
60
|
* target in render order, replacing the current selection. The anchor stays put.
|
|
@@ -95,6 +111,7 @@ const clearSelection = ()=>createEmptySelection();
|
|
|
95
111
|
exports.assetKey = assetKey;
|
|
96
112
|
exports.clearSelection = clearSelection;
|
|
97
113
|
exports.createEmptySelection = createEmptySelection;
|
|
114
|
+
exports.deselect = deselect;
|
|
98
115
|
exports.folderKey = folderKey;
|
|
99
116
|
exports.getIdsOfKind = getIdsOfKind;
|
|
100
117
|
exports.getSelectAllState = getSelectAllState;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"selection.js","sources":["../../../../../../admin/src/future/pages/Assets/utils/selection.ts"],"sourcesContent":["/**\n * Pure, view-agnostic selection logic for the future Media Library multi-select.\n *\n * Selection covers both assets and folders. Since their numeric ids live in\n * different tables (and can collide), items are tracked as namespaced keys\n * (`asset:1` / `folder:1`). Views build their rendered order as a key array so\n * range / select-all work across the folder and asset sections seamlessly.\n */\n\nexport type SelectableKind = 'asset' | 'folder';\n\nexport type ItemKey = `${SelectableKind}:${number}`;\n\nexport const assetKey = (id: number): ItemKey => `asset:${id}`;\n\nexport const folderKey = (id: number): ItemKey => `folder:${id}`;\n\n/** Extracts the numeric ids of one kind from a set of item keys. */\nexport const getIdsOfKind = (keys: Set<ItemKey>, kind: SelectableKind): Set<number> => {\n const ids = new Set<number>();\n\n keys.forEach((key) => {\n const [keyKind, id] = key.split(':');\n if (keyKind === kind) {\n ids.add(Number(id));\n }\n });\n\n return ids;\n};\n\nexport interface SelectionState {\n /** Currently selected item keys (assets and folders). */\n selectedKeys: Set<ItemKey>;\n /** Anchor used as the start of a Shift+click range. */\n anchorKey: ItemKey | null;\n}\n\nexport const createEmptySelection = (): SelectionState => ({\n selectedKeys: new Set<ItemKey>(),\n anchorKey: null,\n});\n\n/**\n * Additive toggle — adds the key if absent, removes it otherwise, without\n * touching the rest of the selection. Used by the item checkbox and Cmd/Ctrl+click.\n * The toggled key becomes the new anchor.\n */\nexport const toggleSelection = (state: SelectionState, key: ItemKey): SelectionState => {\n const selectedKeys = new Set(state.selectedKeys);\n\n if (selectedKeys.has(key)) {\n selectedKeys.delete(key);\n } else {\n selectedKeys.add(key);\n }\n\n return { selectedKeys, anchorKey: key };\n};\n\n/**\n * Shift+click — selects the contiguous range between the current anchor and the\n * target in render order, replacing the current selection. The anchor stays put.\n *\n * Falls back to a single selection when there is no usable anchor (e.g. first\n * click was a Shift+click, or the anchor is no longer in the list).\n */\nexport const selectRange = (\n state: SelectionState,\n orderedKeys: ItemKey[],\n targetKey: ItemKey\n): SelectionState => {\n const targetIndex = orderedKeys.indexOf(targetKey);\n\n if (targetIndex === -1) {\n return state;\n }\n\n const anchorIndex = state.anchorKey === null ? -1 : orderedKeys.indexOf(state.anchorKey);\n\n if (anchorIndex === -1) {\n return { selectedKeys: new Set<ItemKey>([targetKey]), anchorKey: targetKey };\n }\n\n const start = Math.min(anchorIndex, targetIndex);\n const end = Math.max(anchorIndex, targetIndex);\n\n return {\n selectedKeys: new Set(orderedKeys.slice(start, end + 1)),\n anchorKey: state.anchorKey,\n };\n};\n\n/**\n * Select-all — selects every key in the provided ordered array. Used by the header\n * checkbox when not everything is already selected.\n */\nexport const selectAll = (orderedKeys: ItemKey[]): SelectionState => ({\n selectedKeys: new Set(orderedKeys),\n anchorKey: orderedKeys.length > 0 ? orderedKeys[orderedKeys.length - 1] : null,\n});\n\nexport const clearSelection = (): SelectionState => createEmptySelection();\n\nexport interface SelectAllState {\n allSelected: boolean;\n isIndeterminate: boolean;\n}\n\n/**\n * Derives the header checkbox state: everything selected, some (indeterminate),\n * or none. Only considers the currently-rendered items (orderedKeys).\n */\nexport const getSelectAllState = (\n selectedKeys: Set<ItemKey>,\n orderedKeys: ItemKey[]\n): SelectAllState => {\n if (orderedKeys.length === 0) {\n return { allSelected: false, isIndeterminate: false };\n }\n\n const selectedCount = orderedKeys.reduce(\n (count, key) => (selectedKeys.has(key) ? count + 1 : count),\n 0\n );\n const allSelected = selectedCount === orderedKeys.length;\n\n return {\n allSelected,\n isIndeterminate: selectedCount > 0 && !allSelected,\n };\n};\n"],"names":["assetKey","id","folderKey","getIdsOfKind","keys","kind","ids","Set","forEach","key","keyKind","split","add","Number","createEmptySelection","selectedKeys","anchorKey","toggleSelection","state","has","delete","selectRange","orderedKeys","targetKey","targetIndex","indexOf","anchorIndex","start","Math","min","end","max","slice","selectAll","length","clearSelection","getSelectAllState","allSelected","isIndeterminate","selectedCount","reduce","count"],"mappings":";;AAAA;;;;;;;UAaaA,QAAAA,GAAW,CAACC,KAAwB,CAAC,MAAM,EAAEA,EAAAA,CAAAA;AAEnD,MAAMC,YAAY,CAACD,EAAAA,GAAwB,CAAC,OAAO,EAAEA;AAE5D,qEACO,MAAME,YAAAA,GAAe,CAACC,IAAAA,EAAoBC,IAAAA,GAAAA;AAC/C,IAAA,MAAMC,MAAM,IAAIC,GAAAA,EAAAA;IAEhBH,IAAAA,CAAKI,OAAO,CAAC,CAACC,GAAAA,GAAAA;AACZ,QAAA,MAAM,CAACC,OAAAA,EAAST,EAAAA,CAAG,GAAGQ,GAAAA,CAAIE,KAAK,CAAC,GAAA,CAAA;AAChC,QAAA,IAAID,YAAYL,IAAAA,EAAM;YACpBC,GAAAA,CAAIM,GAAG,CAACC,MAAAA,CAAOZ,EAAAA,CAAAA,CAAAA;AACjB,QAAA;AACF,IAAA,CAAA,CAAA;IAEA,OAAOK,GAAAA;AACT;AASO,MAAMQ,oBAAAA,GAAuB,KAAuB;AACzDC,QAAAA,YAAAA,EAAc,IAAIR,GAAAA,EAAAA;QAClBS,SAAAA,EAAW;AACb,KAAA;AAEA;;;;AAIC,IACM,MAAMC,eAAAA,GAAkB,CAACC,KAAAA,EAAuBT,GAAAA,GAAAA;AACrD,IAAA,MAAMM,YAAAA,GAAe,IAAIR,GAAAA,CAAIW,KAAAA,CAAMH,YAAY,CAAA;IAE/C,IAAIA,YAAAA,CAAaI,GAAG,CAACV,GAAAA,CAAAA,EAAM;AACzBM,QAAAA,YAAAA,CAAaK,MAAM,CAACX,GAAAA,CAAAA;IACtB,CAAA,MAAO;AACLM,QAAAA,YAAAA,CAAaH,GAAG,CAACH,GAAAA,CAAAA;AACnB,IAAA;IAEA,OAAO;AAAEM,QAAAA,YAAAA;QAAcC,SAAAA,EAAWP;AAAI,KAAA;AACxC;AAEA;;;;;;AAMC,IACM,
|
|
1
|
+
{"version":3,"file":"selection.js","sources":["../../../../../../admin/src/future/pages/Assets/utils/selection.ts"],"sourcesContent":["/**\n * Pure, view-agnostic selection logic for the future Media Library multi-select.\n *\n * Selection covers both assets and folders. Since their numeric ids live in\n * different tables (and can collide), items are tracked as namespaced keys\n * (`asset:1` / `folder:1`). Views build their rendered order as a key array so\n * range / select-all work across the folder and asset sections seamlessly.\n */\n\nexport type SelectableKind = 'asset' | 'folder';\n\nexport type ItemKey = `${SelectableKind}:${number}`;\n\nexport const assetKey = (id: number): ItemKey => `asset:${id}`;\n\nexport const folderKey = (id: number): ItemKey => `folder:${id}`;\n\n/** Extracts the numeric ids of one kind from a set of item keys. */\nexport const getIdsOfKind = (keys: Set<ItemKey>, kind: SelectableKind): Set<number> => {\n const ids = new Set<number>();\n\n keys.forEach((key) => {\n const [keyKind, id] = key.split(':');\n if (keyKind === kind) {\n ids.add(Number(id));\n }\n });\n\n return ids;\n};\n\nexport interface SelectionState {\n /** Currently selected item keys (assets and folders). */\n selectedKeys: Set<ItemKey>;\n /** Anchor used as the start of a Shift+click range. */\n anchorKey: ItemKey | null;\n}\n\nexport const createEmptySelection = (): SelectionState => ({\n selectedKeys: new Set<ItemKey>(),\n anchorKey: null,\n});\n\n/**\n * Additive toggle — adds the key if absent, removes it otherwise, without\n * touching the rest of the selection. Used by the item checkbox and Cmd/Ctrl+click.\n * The toggled key becomes the new anchor.\n */\nexport const toggleSelection = (state: SelectionState, key: ItemKey): SelectionState => {\n const selectedKeys = new Set(state.selectedKeys);\n\n if (selectedKeys.has(key)) {\n selectedKeys.delete(key);\n } else {\n selectedKeys.add(key);\n }\n\n return { selectedKeys, anchorKey: key };\n};\n\n/**\n * Subtractive counterpart to {@link toggleSelection} — removes a key without the\n * add-if-absent ambiguity, leaving the rest of the selection alone. Used when a\n * single-item affordance (a row's \"...\" menu) makes exactly one key stale.\n *\n * Idempotent: removing a key that was never selected is a no-op. The anchor is\n * dropped only when it is the removed key, so a Shift+click range built around\n * other rows survives.\n */\nexport const deselect = (state: SelectionState, key: ItemKey): SelectionState => {\n const selectedKeys = new Set(state.selectedKeys);\n selectedKeys.delete(key);\n\n return {\n selectedKeys,\n anchorKey: state.anchorKey === key ? null : state.anchorKey,\n };\n};\n\n/**\n * Shift+click — selects the contiguous range between the current anchor and the\n * target in render order, replacing the current selection. The anchor stays put.\n *\n * Falls back to a single selection when there is no usable anchor (e.g. first\n * click was a Shift+click, or the anchor is no longer in the list).\n */\nexport const selectRange = (\n state: SelectionState,\n orderedKeys: ItemKey[],\n targetKey: ItemKey\n): SelectionState => {\n const targetIndex = orderedKeys.indexOf(targetKey);\n\n if (targetIndex === -1) {\n return state;\n }\n\n const anchorIndex = state.anchorKey === null ? -1 : orderedKeys.indexOf(state.anchorKey);\n\n if (anchorIndex === -1) {\n return { selectedKeys: new Set<ItemKey>([targetKey]), anchorKey: targetKey };\n }\n\n const start = Math.min(anchorIndex, targetIndex);\n const end = Math.max(anchorIndex, targetIndex);\n\n return {\n selectedKeys: new Set(orderedKeys.slice(start, end + 1)),\n anchorKey: state.anchorKey,\n };\n};\n\n/**\n * Select-all — selects every key in the provided ordered array. Used by the header\n * checkbox when not everything is already selected.\n */\nexport const selectAll = (orderedKeys: ItemKey[]): SelectionState => ({\n selectedKeys: new Set(orderedKeys),\n anchorKey: orderedKeys.length > 0 ? orderedKeys[orderedKeys.length - 1] : null,\n});\n\nexport const clearSelection = (): SelectionState => createEmptySelection();\n\nexport interface SelectAllState {\n allSelected: boolean;\n isIndeterminate: boolean;\n}\n\n/**\n * Derives the header checkbox state: everything selected, some (indeterminate),\n * or none. Only considers the currently-rendered items (orderedKeys).\n */\nexport const getSelectAllState = (\n selectedKeys: Set<ItemKey>,\n orderedKeys: ItemKey[]\n): SelectAllState => {\n if (orderedKeys.length === 0) {\n return { allSelected: false, isIndeterminate: false };\n }\n\n const selectedCount = orderedKeys.reduce(\n (count, key) => (selectedKeys.has(key) ? count + 1 : count),\n 0\n );\n const allSelected = selectedCount === orderedKeys.length;\n\n return {\n allSelected,\n isIndeterminate: selectedCount > 0 && !allSelected,\n };\n};\n"],"names":["assetKey","id","folderKey","getIdsOfKind","keys","kind","ids","Set","forEach","key","keyKind","split","add","Number","createEmptySelection","selectedKeys","anchorKey","toggleSelection","state","has","delete","deselect","selectRange","orderedKeys","targetKey","targetIndex","indexOf","anchorIndex","start","Math","min","end","max","slice","selectAll","length","clearSelection","getSelectAllState","allSelected","isIndeterminate","selectedCount","reduce","count"],"mappings":"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"}
|