@wordpress/dataviews 4.1.0 → 4.3.0

package/build/dataviews-layouts/list/index.js

@@ -19,9 +19,6 @@ var _jsxRuntime = require("react/jsx-runtime");
  * External dependencies
  */
 
-// Import CompositeStore type, which is not exported from @wordpress/components.
-// eslint-disable-next-line no-restricted-imports
-
 /**
  * WordPress dependencies
  */
@@ -31,27 +28,78 @@ var _jsxRuntime = require("react/jsx-runtime");
  */
 
 const {
-  useCompositeStoreV2: useCompositeStore,
   CompositeV2: Composite,
   CompositeItemV2: CompositeItem,
   CompositeRowV2: CompositeRow,
   DropdownMenuV2: DropdownMenu
 } = (0, _lockUnlock.unlock)(_components.privateApis);
+function generateItemWrapperCompositeId(idPrefix) {
+  return `${idPrefix}-item-wrapper`;
+}
+function generatePrimaryActionCompositeId(idPrefix, primaryActionId) {
+  return `${idPrefix}-primary-action-${primaryActionId}`;
+}
+function generateDropdownTriggerCompositeId(idPrefix) {
+  return `${idPrefix}-dropdown`;
+}
+function PrimaryActionGridCell({
+  idPrefix,
+  primaryAction,
+  item
+}) {
+  const registry = (0, _data.useRegistry)();
+  const [isModalOpen, setIsModalOpen] = (0, _element.useState)(false);
+  const compositeItemId = generatePrimaryActionCompositeId(idPrefix, primaryAction.id);
+  const label = typeof primaryAction.label === 'string' ? primaryAction.label : primaryAction.label([item]);
+  return 'RenderModal' in primaryAction ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    role: "gridcell",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(CompositeItem, {
+      id: compositeItemId,
+      render: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+        label: label,
+        icon: primaryAction.icon,
+        isDestructive: primaryAction.isDestructive,
+        size: "small",
+        onClick: () => setIsModalOpen(true)
+      }),
+      children: isModalOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataviewsItemActions.ActionModal, {
+        action: primaryAction,
+        items: [item],
+        closeModal: () => setIsModalOpen(false)
+      })
+    })
+  }, primaryAction.id) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    role: "gridcell",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(CompositeItem, {
+      id: compositeItemId,
+      render: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+        label: label,
+        icon: primaryAction.icon,
+        isDestructive: primaryAction.isDestructive,
+        size: "small",
+        onClick: () => {
+          primaryAction.callback([item], {
+            registry
+          });
+        }
+      })
+    })
+  }, primaryAction.id);
+}
 function ListItem({
   actions,
-  id,
+  idPrefix,
   isSelected,
   item,
   mediaField,
   onSelect,
   primaryField,
-  store,
-  visibleFields
+  visibleFields,
+  onDropdownTriggerKeyDown
 }) {
-  const registry = (0, _data.useRegistry)();
   const itemRef = (0, _element.useRef)(null);
-  const labelId = `${id}-label`;
-  const descriptionId = `${id}-description`;
+  const labelId = `${idPrefix}-label`;
+  const descriptionId = `${idPrefix}-description`;
   const [isHovered, setIsHovered] = (0, _element.useState)(false);
   const handleMouseEnter = () => {
     setIsHovered(true);
@@ -81,8 +129,6 @@ function ListItem({
       eligibleActions: _eligibleActions
     };
   }, [actions, item]);
-  const [isModalOpen, setIsModalOpen] = (0, _element.useState)(false);
-  const primaryActionLabel = primaryAction && (typeof primaryAction.label === 'string' ? primaryAction.label : primaryAction.label([item]));
   const renderedMediaField = mediaField?.render ? /*#__PURE__*/(0, _jsxRuntime.jsx)(mediaField.render, {
     item: item
   }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -108,10 +154,9 @@ function ListItem({
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         role: "gridcell",
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(CompositeItem, {
-          store: store,
           render: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {}),
           role: "button",
-          id: id,
+          id: generateItemWrapperCompositeId(idPrefix),
           "aria-pressed": isSelected,
           "aria-labelledby": labelId,
           "aria-describedby": descriptionId,
@@ -159,62 +204,22 @@ function ListItem({
           flexShrink: '0',
           width: 'auto'
         },
-        children: [primaryAction && 'RenderModal' in primaryAction && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          role: "gridcell",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(CompositeItem, {
-            store: store,
-            render: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
-              label: primaryActionLabel,
-              icon: primaryAction.icon,
-              isDestructive: primaryAction.isDestructive,
-              size: "small",
-              onClick: () => setIsModalOpen(true)
-            }),
-            children: isModalOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataviewsItemActions.ActionModal, {
-              action: primaryAction,
-              items: [item],
-              closeModal: () => setIsModalOpen(false)
-            })
-          })
-        }), primaryAction && !('RenderModal' in primaryAction) && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          role: "gridcell",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(CompositeItem, {
-            store: store,
-            render: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
-              label: primaryActionLabel,
-              icon: primaryAction.icon,
-              isDestructive: primaryAction.isDestructive,
-              size: "small",
-              onClick: () => {
-                primaryAction.callback([item], {
-                  registry
-                });
-              }
-            })
-          })
-        }, primaryAction.id), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: [primaryAction && /*#__PURE__*/(0, _jsxRuntime.jsx)(PrimaryActionGridCell, {
+          idPrefix: idPrefix,
+          primaryAction: primaryAction,
+          item: item
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           role: "gridcell",
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DropdownMenu, {
             trigger: /*#__PURE__*/(0, _jsxRuntime.jsx)(CompositeItem, {
-              store: store,
+              id: generateDropdownTriggerCompositeId(idPrefix),
               render: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
                 size: "small",
                 icon: _icons.moreVertical,
                 label: (0, _i18n.__)('Actions'),
                 accessibleWhenDisabled: true,
                 disabled: !actions.length,
-                onKeyDown: event => {
-                  if (event.key === 'ArrowDown') {
-                    // Prevent the default behaviour (open dropdown menu) and go down.
-                    event.preventDefault();
-                    store.move(store.down());
-                  }
-                  if (event.key === 'ArrowUp') {
-                    // Prevent the default behavior (open dropdown menu) and go up.
-                    event.preventDefault();
-                    store.move(store.up());
-                  }
-                }
+                onKeyDown: onDropdownTriggerKeyDown
               })
             }),
             placement: "bottom-end",
@@ -246,23 +251,61 @@ function ViewList(props) {
   const viewFields = view.fields || fields.map(field => field.id);
   const visibleFields = fields.filter(field => viewFields.includes(field.id) && ![view.layout?.primaryField, view.layout?.mediaField].includes(field.id));
   const onSelect = item => onChangeSelection([getItemId(item)]);
-  const getItemDomId = (0, _element.useCallback)(item => item ? `${baseId}-${getItemId(item)}` : undefined, [baseId, getItemId]);
-  const store = useCompositeStore({
-    defaultActiveId: getItemDomId(selectedItem)
-  });
+  const generateCompositeItemIdPrefix = (0, _element.useCallback)(item => `${baseId}-${getItemId(item)}`, [baseId, getItemId]);
+  const isActiveCompositeItem = (0, _element.useCallback)((item, idToCheck) => {
+    // All composite items use the same prefix in their IDs.
+    return idToCheck.startsWith(generateCompositeItemIdPrefix(item));
+  }, [generateCompositeItemIdPrefix]);
 
-  // Manage focused item, when the active one is removed from the list.
-  const isActiveIdInList = store.useState(state => state.items.some(item => item.id === state.activeId));
+  // Controlled state for the active composite item.
+  const [activeCompositeId, setActiveCompositeId] = (0, _element.useState)(undefined);
+
+  // Update the active composite item when the selected item changes.
+  (0, _element.useEffect)(() => {
+    if (selectedItem) {
+      setActiveCompositeId(generateItemWrapperCompositeId(generateCompositeItemIdPrefix(selectedItem)));
+    }
+  }, [selectedItem, generateCompositeItemIdPrefix]);
+  const activeItemIndex = data.findIndex(item => isActiveCompositeItem(item, activeCompositeId !== null && activeCompositeId !== void 0 ? activeCompositeId : ''));
+  const previousActiveItemIndex = (0, _compose.usePrevious)(activeItemIndex);
+  const isActiveIdInList = activeItemIndex !== -1;
+  const selectCompositeItem = (0, _element.useCallback)((targetIndex, generateCompositeId) => {
+    // Clamping between 0 and data.length - 1 to avoid out of bounds.
+    const clampedIndex = Math.min(data.length - 1, Math.max(0, targetIndex));
+    const itemIdPrefix = generateCompositeItemIdPrefix(data[clampedIndex]);
+    const targetCompositeItemId = generateCompositeId(itemIdPrefix);
+    setActiveCompositeId(targetCompositeItemId);
+    document.getElementById(targetCompositeItemId)?.focus();
+  }, [data, generateCompositeItemIdPrefix]);
+
+  // Select a new active composite item when the current active item
+  // is removed from the list.
   (0, _element.useEffect)(() => {
-    if (!isActiveIdInList) {
-      // Prefer going down, except if there is no item below (last item), then go up (last item in list).
-      if (store.down()) {
-        store.move(store.down());
-      } else if (store.up()) {
-        store.move(store.up());
-      }
+    const wasActiveIdInList = previousActiveItemIndex !== undefined && previousActiveItemIndex !== -1;
+    if (!isActiveIdInList && wasActiveIdInList) {
+      // By picking `previousActiveItemIndex` as the next item index, we are
+      // basically picking the item that would have been after the deleted one.
+      // If the previously active (and removed) item was the last of the list,
+      // we will select the item before it — which is the new last item.
+      selectCompositeItem(previousActiveItemIndex, generateItemWrapperCompositeId);
+    }
+  }, [isActiveIdInList, selectCompositeItem, previousActiveItemIndex]);
+
+  // Prevent the default behavior (open dropdown menu) and instead select the
+  // dropdown menu trigger on the previous/next row.
+  // https://github.com/ariakit/ariakit/issues/3768
+  const onDropdownTriggerKeyDown = (0, _element.useCallback)(event => {
+    if (event.key === 'ArrowDown') {
+      // Select the dropdown menu trigger item in the next row.
+      event.preventDefault();
+      selectCompositeItem(activeItemIndex + 1, generateDropdownTriggerCompositeId);
+    }
+    if (event.key === 'ArrowUp') {
+      // Select the dropdown menu trigger item in the previous row.
+      event.preventDefault();
+      selectCompositeItem(activeItemIndex - 1, generateDropdownTriggerCompositeId);
     }
-  }, [isActiveIdInList]);
+  }, [selectCompositeItem, activeItemIndex]);
   const hasData = data?.length;
   if (!hasData) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -280,19 +323,20 @@ function ViewList(props) {
     render: /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {}),
     className: "dataviews-view-list",
     role: "grid",
-    store: store,
+    activeId: activeCompositeId,
+    setActiveId: setActiveCompositeId,
     children: data.map(item => {
-      const id = getItemDomId(item);
+      const id = generateCompositeItemIdPrefix(item);
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(ListItem, {
-        id: id,
+        idPrefix: id,
         actions: actions,
         item: item,
         isSelected: item === selectedItem,
         onSelect: onSelect,
         mediaField: mediaField,
         primaryField: primaryField,
-        store: store,
-        visibleFields: visibleFields
+        visibleFields: visibleFields,
+        onDropdownTriggerKeyDown: onDropdownTriggerKeyDown
       }, id);
     })
   });

package/build/dataviews-layouts/list/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_clsx","_interopRequireDefault","require","_compose","_components","_element","_i18n","_icons","_data","_lockUnlock","_dataviewsItemActions","_jsxRuntime","useCompositeStoreV2","useCompositeStore","CompositeV2","Composite","CompositeItemV2","CompositeItem","CompositeRowV2","CompositeRow","DropdownMenuV2","DropdownMenu","unlock","componentsPrivateApis","ListItem","actions","id","isSelected","item","mediaField","onSelect","primaryField","store","visibleFields","registry","useRegistry","itemRef","useRef","labelId","descriptionId","isHovered","setIsHovered","useState","handleMouseEnter","handleMouseLeave","useEffect","current","scrollIntoView","behavior","block","inline","primaryAction","eligibleActions","useMemo","_eligibleActions","filter","action","isEligible","_primaryActions","isPrimary","icon","isModalOpen","setIsModalOpen","primaryActionLabel","label","renderedMediaField","render","jsx","className","renderedPrimaryField","ref","role","clsx","onMouseEnter","onMouseLeave","children","jsxs","__experimentalHStack","alignment","spacing","onClick","justify","__experimentalVStack","map","field","VisuallyHidden","as","length","style","flexShrink","width","Button","isDestructive","size","ActionModal","items","closeModal","callback","trigger","moreVertical","__","accessibleWhenDisabled","disabled","onKeyDown","event","key","preventDefault","move","down","up","placement","ActionsDropdownMenuGroup","ViewList","props","data","fields","getItemId","isLoading","onChangeSelection","selection","view","baseId","useInstanceId","selectedItem","findLast","includes","find","layout","viewFields","getItemDomId","useCallback","undefined","defaultActiveId","isActiveIdInList","state","some","activeId","hasData","Spinner"],"sources":["@wordpress/dataviews/src/dataviews-layouts/list/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n// Import CompositeStore type, which is not exported from @wordpress/components.\n// eslint-disable-next-line no-restricted-imports\nimport type { CompositeStore } from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\tButton,\n\tprivateApis as componentsPrivateApis,\n\tSpinner,\n\tVisuallyHidden,\n} from '@wordpress/components';\nimport {\n\tuseCallback,\n\tuseEffect,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n} from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { moreVertical } from '@wordpress/icons';\nimport { useRegistry } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\nimport {\n\tActionsDropdownMenuGroup,\n\tActionModal,\n} from '../../components/dataviews-item-actions';\nimport type { Action, NormalizedField, ViewListProps } from '../../types';\n\ninterface ListViewItemProps< Item > {\n\tactions: Action< Item >[];\n\tid?: string;\n\tisSelected: boolean;\n\titem: Item;\n\tmediaField?: NormalizedField< Item >;\n\tonSelect: ( item: Item ) => void;\n\tprimaryField?: NormalizedField< Item >;\n\tstore: CompositeStore;\n\tvisibleFields: NormalizedField< Item >[];\n}\n\nconst {\n\tuseCompositeStoreV2: useCompositeStore,\n\tCompositeV2: Composite,\n\tCompositeItemV2: CompositeItem,\n\tCompositeRowV2: CompositeRow,\n\tDropdownMenuV2: DropdownMenu,\n} = unlock( componentsPrivateApis );\n\nfunction ListItem< Item >( {\n\tactions,\n\tid,\n\tisSelected,\n\titem,\n\tmediaField,\n\tonSelect,\n\tprimaryField,\n\tstore,\n\tvisibleFields,\n}: ListViewItemProps< Item > ) {\n\tconst registry = useRegistry();\n\tconst itemRef = useRef< HTMLElement >( null );\n\tconst labelId = `${ id }-label`;\n\tconst descriptionId = `${ id }-description`;\n\n\tconst [ isHovered, setIsHovered ] = useState( false );\n\tconst handleMouseEnter = () => {\n\t\tsetIsHovered( true );\n\t};\n\tconst handleMouseLeave = () => {\n\t\tsetIsHovered( false );\n\t};\n\n\tuseEffect( () => {\n\t\tif ( isSelected ) {\n\t\t\titemRef.current?.scrollIntoView( {\n\t\t\t\tbehavior: 'auto',\n\t\t\t\tblock: 'nearest',\n\t\t\t\tinline: 'nearest',\n\t\t\t} );\n\t\t}\n\t}, [ isSelected ] );\n\n\tconst { primaryAction, eligibleActions } = useMemo( () => {\n\t\t// If an action is eligible for all items, doesn't need\n\t\t// to provide the `isEligible` function.\n\t\tconst _eligibleActions = actions.filter(\n\t\t\t( action ) => ! action.isEligible || action.isEligible( item )\n\t\t);\n\t\tconst _primaryActions = _eligibleActions.filter(\n\t\t\t( action ) => action.isPrimary && !! action.icon\n\t\t);\n\t\treturn {\n\t\t\tprimaryAction: _primaryActions?.[ 0 ],\n\t\t\teligibleActions: _eligibleActions,\n\t\t};\n\t}, [ actions, item ] );\n\n\tconst [ isModalOpen, setIsModalOpen ] = useState( false );\n\tconst primaryActionLabel =\n\t\tprimaryAction &&\n\t\t( typeof primaryAction.label === 'string'\n\t\t\t? primaryAction.label\n\t\t\t: primaryAction.label( [ item ] ) );\n\n\tconst renderedMediaField = mediaField?.render ? (\n\t\t<mediaField.render item={ item } />\n\t) : (\n\t\t<div className=\"dataviews-view-list__media-placeholder\"></div>\n\t);\n\n\tconst renderedPrimaryField = primaryField?.render ? (\n\t\t<primaryField.render item={ item } />\n\t) : null;\n\n\treturn (\n\t\t<CompositeRow\n\t\t\tref={ itemRef }\n\t\t\trender={ <li /> }\n\t\t\trole=\"row\"\n\t\t\tclassName={ clsx( {\n\t\t\t\t'is-selected': isSelected,\n\t\t\t\t'is-hovered': isHovered,\n\t\t\t} ) }\n\t\t\tonMouseEnter={ handleMouseEnter }\n\t\t\tonMouseLeave={ handleMouseLeave }\n\t\t>\n\t\t\t<HStack\n\t\t\t\tclassName=\"dataviews-view-list__item-wrapper\"\n\t\t\t\talignment=\"center\"\n\t\t\t\tspacing={ 0 }\n\t\t\t>\n\t\t\t\t<div role=\"gridcell\">\n\t\t\t\t\t<CompositeItem\n\t\t\t\t\t\tstore={ store }\n\t\t\t\t\t\trender={ <div /> }\n\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\tid={ id }\n\t\t\t\t\t\taria-pressed={ isSelected }\n\t\t\t\t\t\taria-labelledby={ labelId }\n\t\t\t\t\t\taria-describedby={ descriptionId }\n\t\t\t\t\t\tclassName=\"dataviews-view-list__item\"\n\t\t\t\t\t\tonClick={ () => onSelect( item ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t<HStack\n\t\t\t\t\t\t\tspacing={ 3 }\n\t\t\t\t\t\t\tjustify=\"start\"\n\t\t\t\t\t\t\talignment=\"flex-start\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div className=\"dataviews-view-list__media-wrapper\">\n\t\t\t\t\t\t\t\t{ renderedMediaField }\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<VStack\n\t\t\t\t\t\t\t\tspacing={ 1 }\n\t\t\t\t\t\t\t\tclassName=\"dataviews-view-list__field-wrapper\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\tclassName=\"dataviews-view-list__primary-field\"\n\t\t\t\t\t\t\t\t\tid={ labelId }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ renderedPrimaryField }\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tclassName=\"dataviews-view-list__fields\"\n\t\t\t\t\t\t\t\t\tid={ descriptionId }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ visibleFields.map( ( field ) => (\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\tkey={ field.id }\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"dataviews-view-list__field\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<VisuallyHidden\n\t\t\t\t\t\t\t\t\t\t\t\tas=\"span\"\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"dataviews-view-list__field-label\"\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t{ field.label }\n\t\t\t\t\t\t\t\t\t\t\t</VisuallyHidden>\n\t\t\t\t\t\t\t\t\t\t\t<span className=\"dataviews-view-list__field-value\">\n\t\t\t\t\t\t\t\t\t\t\t\t<field.render item={ item } />\n\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t</HStack>\n\t\t\t\t\t</CompositeItem>\n\t\t\t\t</div>\n\t\t\t\t{ eligibleActions?.length > 0 && (\n\t\t\t\t\t<HStack\n\t\t\t\t\t\tspacing={ 3 }\n\t\t\t\t\t\tjustify=\"flex-end\"\n\t\t\t\t\t\tclassName=\"dataviews-view-list__item-actions\"\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\tflexShrink: '0',\n\t\t\t\t\t\t\twidth: 'auto',\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ primaryAction && 'RenderModal' in primaryAction && (\n\t\t\t\t\t\t\t<div role=\"gridcell\">\n\t\t\t\t\t\t\t\t<CompositeItem\n\t\t\t\t\t\t\t\t\tstore={ store }\n\t\t\t\t\t\t\t\t\trender={\n\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\tlabel={ primaryActionLabel }\n\t\t\t\t\t\t\t\t\t\t\ticon={ primaryAction.icon }\n\t\t\t\t\t\t\t\t\t\t\tisDestructive={\n\t\t\t\t\t\t\t\t\t\t\t\tprimaryAction.isDestructive\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\t\t\t\t\tsetIsModalOpen( true )\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ isModalOpen && (\n\t\t\t\t\t\t\t\t\t\t<ActionModal< Item >\n\t\t\t\t\t\t\t\t\t\t\taction={ primaryAction }\n\t\t\t\t\t\t\t\t\t\t\titems={ [ item ] }\n\t\t\t\t\t\t\t\t\t\t\tcloseModal={ () =>\n\t\t\t\t\t\t\t\t\t\t\t\tsetIsModalOpen( false )\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</CompositeItem>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ primaryAction &&\n\t\t\t\t\t\t\t! ( 'RenderModal' in primaryAction ) && (\n\t\t\t\t\t\t\t\t<div role=\"gridcell\" key={ primaryAction.id }>\n\t\t\t\t\t\t\t\t\t<CompositeItem\n\t\t\t\t\t\t\t\t\t\tstore={ store }\n\t\t\t\t\t\t\t\t\t\trender={\n\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\tlabel={ primaryActionLabel }\n\t\t\t\t\t\t\t\t\t\t\t\ticon={ primaryAction.icon }\n\t\t\t\t\t\t\t\t\t\t\t\tisDestructive={\n\t\t\t\t\t\t\t\t\t\t\t\t\tprimaryAction.isDestructive\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tprimaryAction.callback(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t[ item ],\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{ registry }\n\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t<div role=\"gridcell\">\n\t\t\t\t\t\t\t<DropdownMenu\n\t\t\t\t\t\t\t\ttrigger={\n\t\t\t\t\t\t\t\t\t<CompositeItem\n\t\t\t\t\t\t\t\t\t\tstore={ store }\n\t\t\t\t\t\t\t\t\t\trender={\n\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\t\t\t\ticon={ moreVertical }\n\t\t\t\t\t\t\t\t\t\t\t\tlabel={ __( 'Actions' ) }\n\t\t\t\t\t\t\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\t\t\t\t\t\t\tdisabled={ ! actions.length }\n\t\t\t\t\t\t\t\t\t\t\t\tonKeyDown={ ( event: {\n\t\t\t\t\t\t\t\t\t\t\t\t\tkey: string;\n\t\t\t\t\t\t\t\t\t\t\t\t\tpreventDefault: () => void;\n\t\t\t\t\t\t\t\t\t\t\t\t} ) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tevent.key ===\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t'ArrowDown'\n\t\t\t\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t// Prevent the default behaviour (open dropdown menu) and go down.\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tstore.move(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tstore.down()\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tevent.key === 'ArrowUp'\n\t\t\t\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t// Prevent the default behavior (open dropdown menu) and go up.\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tstore.move(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tstore.up()\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tplacement=\"bottom-end\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<ActionsDropdownMenuGroup\n\t\t\t\t\t\t\t\t\tactions={ eligibleActions }\n\t\t\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</DropdownMenu>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</HStack>\n\t\t\t\t) }\n\t\t\t</HStack>\n\t\t</CompositeRow>\n\t);\n}\n\nexport default function ViewList< Item >( props: ViewListProps< Item > ) {\n\tconst {\n\t\tactions,\n\t\tdata,\n\t\tfields,\n\t\tgetItemId,\n\t\tisLoading,\n\t\tonChangeSelection,\n\t\tselection,\n\t\tview,\n\t} = props;\n\tconst baseId = useInstanceId( ViewList, 'view-list' );\n\tconst selectedItem = data?.findLast( ( item ) =>\n\t\tselection.includes( getItemId( item ) )\n\t);\n\n\tconst mediaField = fields.find(\n\t\t( field ) => field.id === view.layout?.mediaField\n\t);\n\tconst primaryField = fields.find(\n\t\t( field ) => field.id === view.layout?.primaryField\n\t);\n\tconst viewFields = view.fields || fields.map( ( field ) => field.id );\n\tconst visibleFields = fields.filter(\n\t\t( field ) =>\n\t\t\tviewFields.includes( field.id ) &&\n\t\t\t! [ view.layout?.primaryField, view.layout?.mediaField ].includes(\n\t\t\t\tfield.id\n\t\t\t)\n\t);\n\n\tconst onSelect = ( item: Item ) =>\n\t\tonChangeSelection( [ getItemId( item ) ] );\n\n\tconst getItemDomId = useCallback(\n\t\t( item?: Item ) =>\n\t\t\titem ? `${ baseId }-${ getItemId( item ) }` : undefined,\n\t\t[ baseId, getItemId ]\n\t);\n\n\tconst store = useCompositeStore( {\n\t\tdefaultActiveId: getItemDomId( selectedItem ),\n\t} );\n\n\t// Manage focused item, when the active one is removed from the list.\n\tconst isActiveIdInList = store.useState(\n\t\t( state: { items: any[]; activeId: any } ) =>\n\t\t\tstate.items.some(\n\t\t\t\t( item: { id: any } ) => item.id === state.activeId\n\t\t\t)\n\t);\n\tuseEffect( () => {\n\t\tif ( ! isActiveIdInList ) {\n\t\t\t// Prefer going down, except if there is no item below (last item), then go up (last item in list).\n\t\t\tif ( store.down() ) {\n\t\t\t\tstore.move( store.down() );\n\t\t\t} else if ( store.up() ) {\n\t\t\t\tstore.move( store.up() );\n\t\t\t}\n\t\t}\n\t}, [ isActiveIdInList ] );\n\n\tconst hasData = data?.length;\n\tif ( ! hasData ) {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclassName={ clsx( {\n\t\t\t\t\t'dataviews-loading': isLoading,\n\t\t\t\t\t'dataviews-no-results': ! hasData && ! isLoading,\n\t\t\t\t} ) }\n\t\t\t>\n\t\t\t\t{ ! hasData && (\n\t\t\t\t\t<p>{ isLoading ? <Spinner /> : __( 'No results' ) }</p>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t);\n\t}\n\n\treturn (\n\t\t<Composite\n\t\t\tid={ baseId }\n\t\t\trender={ <ul /> }\n\t\t\tclassName=\"dataviews-view-list\"\n\t\t\trole=\"grid\"\n\t\t\tstore={ store }\n\t\t>\n\t\t\t{ data.map( ( item ) => {\n\t\t\t\tconst id = getItemDomId( item );\n\t\t\t\treturn (\n\t\t\t\t\t<ListItem\n\t\t\t\t\t\tkey={ id }\n\t\t\t\t\t\tid={ id }\n\t\t\t\t\t\tactions={ actions }\n\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\tisSelected={ item === selectedItem }\n\t\t\t\t\t\tonSelect={ onSelect }\n\t\t\t\t\t\tmediaField={ mediaField }\n\t\t\t\t\t\tprimaryField={ primaryField }\n\t\t\t\t\t\tstore={ store }\n\t\t\t\t\t\tvisibleFields={ visibleFields }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</Composite>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_clsx","_interopRequireDefault","require","_compose","_components","_element","_i18n","_icons","_data","_lockUnlock","_dataviewsItemActions","_jsxRuntime","CompositeV2","Composite","CompositeItemV2","CompositeItem","CompositeRowV2","CompositeRow","DropdownMenuV2","DropdownMenu","unlock","componentsPrivateApis","generateItemWrapperCompositeId","idPrefix","generatePrimaryActionCompositeId","primaryActionId","generateDropdownTriggerCompositeId","PrimaryActionGridCell","primaryAction","item","registry","useRegistry","isModalOpen","setIsModalOpen","useState","compositeItemId","id","label","jsx","role","children","render","Button","icon","isDestructive","size","onClick","ActionModal","action","items","closeModal","callback","ListItem","actions","isSelected","mediaField","onSelect","primaryField","visibleFields","onDropdownTriggerKeyDown","itemRef","useRef","labelId","descriptionId","isHovered","setIsHovered","handleMouseEnter","handleMouseLeave","useEffect","current","scrollIntoView","behavior","block","inline","eligibleActions","useMemo","_eligibleActions","filter","isEligible","_primaryActions","isPrimary","renderedMediaField","className","renderedPrimaryField","ref","clsx","onMouseEnter","onMouseLeave","jsxs","__experimentalHStack","alignment","spacing","justify","__experimentalVStack","map","field","VisuallyHidden","as","length","style","flexShrink","width","trigger","moreVertical","__","accessibleWhenDisabled","disabled","onKeyDown","placement","ActionsDropdownMenuGroup","ViewList","props","data","fields","getItemId","isLoading","onChangeSelection","selection","view","baseId","useInstanceId","selectedItem","findLast","includes","find","layout","viewFields","generateCompositeItemIdPrefix","useCallback","isActiveCompositeItem","idToCheck","startsWith","activeCompositeId","setActiveCompositeId","undefined","activeItemIndex","findIndex","previousActiveItemIndex","usePrevious","isActiveIdInList","selectCompositeItem","targetIndex","generateCompositeId","clampedIndex","Math","min","max","itemIdPrefix","targetCompositeItemId","document","getElementById","focus","wasActiveIdInList","event","key","preventDefault","hasData","Spinner","activeId","setActiveId"],"sources":["@wordpress/dataviews/src/dataviews-layouts/list/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId, usePrevious } from '@wordpress/compose';\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\tButton,\n\tprivateApis as componentsPrivateApis,\n\tSpinner,\n\tVisuallyHidden,\n} from '@wordpress/components';\nimport {\n\tuseCallback,\n\tuseEffect,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n} from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { moreVertical } from '@wordpress/icons';\nimport { useRegistry } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\nimport {\n\tActionsDropdownMenuGroup,\n\tActionModal,\n} from '../../components/dataviews-item-actions';\nimport type { Action, NormalizedField, ViewListProps } from '../../types';\n\ninterface ListViewItemProps< Item > {\n\tactions: Action< Item >[];\n\tidPrefix: string;\n\tisSelected: boolean;\n\titem: Item;\n\tmediaField?: NormalizedField< Item >;\n\tonSelect: ( item: Item ) => void;\n\tprimaryField?: NormalizedField< Item >;\n\tvisibleFields: NormalizedField< Item >[];\n\tonDropdownTriggerKeyDown: React.KeyboardEventHandler< HTMLButtonElement >;\n}\n\nconst {\n\tCompositeV2: Composite,\n\tCompositeItemV2: CompositeItem,\n\tCompositeRowV2: CompositeRow,\n\tDropdownMenuV2: DropdownMenu,\n} = unlock( componentsPrivateApis );\n\nfunction generateItemWrapperCompositeId( idPrefix: string ) {\n\treturn `${ idPrefix }-item-wrapper`;\n}\nfunction generatePrimaryActionCompositeId(\n\tidPrefix: string,\n\tprimaryActionId: string\n) {\n\treturn `${ idPrefix }-primary-action-${ primaryActionId }`;\n}\nfunction generateDropdownTriggerCompositeId( idPrefix: string ) {\n\treturn `${ idPrefix }-dropdown`;\n}\n\nfunction PrimaryActionGridCell< Item >( {\n\tidPrefix,\n\tprimaryAction,\n\titem,\n}: {\n\tidPrefix: string;\n\tprimaryAction: Action< Item >;\n\titem: Item;\n} ) {\n\tconst registry = useRegistry();\n\tconst [ isModalOpen, setIsModalOpen ] = useState( false );\n\n\tconst compositeItemId = generatePrimaryActionCompositeId(\n\t\tidPrefix,\n\t\tprimaryAction.id\n\t);\n\n\tconst label =\n\t\ttypeof primaryAction.label === 'string'\n\t\t\t? primaryAction.label\n\t\t\t: primaryAction.label( [ item ] );\n\n\treturn 'RenderModal' in primaryAction ? (\n\t\t<div role=\"gridcell\" key={ primaryAction.id }>\n\t\t\t<CompositeItem\n\t\t\t\tid={ compositeItemId }\n\t\t\t\trender={\n\t\t\t\t\t<Button\n\t\t\t\t\t\tlabel={ label }\n\t\t\t\t\t\ticon={ primaryAction.icon }\n\t\t\t\t\t\tisDestructive={ primaryAction.isDestructive }\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\tonClick={ () => setIsModalOpen( true ) }\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t{ isModalOpen && (\n\t\t\t\t\t<ActionModal< Item >\n\t\t\t\t\t\taction={ primaryAction }\n\t\t\t\t\t\titems={ [ item ] }\n\t\t\t\t\t\tcloseModal={ () => setIsModalOpen( false ) }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</CompositeItem>\n\t\t</div>\n\t) : (\n\t\t<div role=\"gridcell\" key={ primaryAction.id }>\n\t\t\t<CompositeItem\n\t\t\t\tid={ compositeItemId }\n\t\t\t\trender={\n\t\t\t\t\t<Button\n\t\t\t\t\t\tlabel={ label }\n\t\t\t\t\t\ticon={ primaryAction.icon }\n\t\t\t\t\t\tisDestructive={ primaryAction.isDestructive }\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\tprimaryAction.callback( [ item ], { registry } );\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t/>\n\t\t</div>\n\t);\n}\n\nfunction ListItem< Item >( {\n\tactions,\n\tidPrefix,\n\tisSelected,\n\titem,\n\tmediaField,\n\tonSelect,\n\tprimaryField,\n\tvisibleFields,\n\tonDropdownTriggerKeyDown,\n}: ListViewItemProps< Item > ) {\n\tconst itemRef = useRef< HTMLElement >( null );\n\tconst labelId = `${ idPrefix }-label`;\n\tconst descriptionId = `${ idPrefix }-description`;\n\n\tconst [ isHovered, setIsHovered ] = useState( false );\n\tconst handleMouseEnter = () => {\n\t\tsetIsHovered( true );\n\t};\n\tconst handleMouseLeave = () => {\n\t\tsetIsHovered( false );\n\t};\n\n\tuseEffect( () => {\n\t\tif ( isSelected ) {\n\t\t\titemRef.current?.scrollIntoView( {\n\t\t\t\tbehavior: 'auto',\n\t\t\t\tblock: 'nearest',\n\t\t\t\tinline: 'nearest',\n\t\t\t} );\n\t\t}\n\t}, [ isSelected ] );\n\n\tconst { primaryAction, eligibleActions } = useMemo( () => {\n\t\t// If an action is eligible for all items, doesn't need\n\t\t// to provide the `isEligible` function.\n\t\tconst _eligibleActions = actions.filter(\n\t\t\t( action ) => ! action.isEligible || action.isEligible( item )\n\t\t);\n\t\tconst _primaryActions = _eligibleActions.filter(\n\t\t\t( action ) => action.isPrimary && !! action.icon\n\t\t);\n\t\treturn {\n\t\t\tprimaryAction: _primaryActions?.[ 0 ],\n\t\t\teligibleActions: _eligibleActions,\n\t\t};\n\t}, [ actions, item ] );\n\n\tconst renderedMediaField = mediaField?.render ? (\n\t\t<mediaField.render item={ item } />\n\t) : (\n\t\t<div className=\"dataviews-view-list__media-placeholder\"></div>\n\t);\n\n\tconst renderedPrimaryField = primaryField?.render ? (\n\t\t<primaryField.render item={ item } />\n\t) : null;\n\n\treturn (\n\t\t<CompositeRow\n\t\t\tref={ itemRef }\n\t\t\trender={ <li /> }\n\t\t\trole=\"row\"\n\t\t\tclassName={ clsx( {\n\t\t\t\t'is-selected': isSelected,\n\t\t\t\t'is-hovered': isHovered,\n\t\t\t} ) }\n\t\t\tonMouseEnter={ handleMouseEnter }\n\t\t\tonMouseLeave={ handleMouseLeave }\n\t\t>\n\t\t\t<HStack\n\t\t\t\tclassName=\"dataviews-view-list__item-wrapper\"\n\t\t\t\talignment=\"center\"\n\t\t\t\tspacing={ 0 }\n\t\t\t>\n\t\t\t\t<div role=\"gridcell\">\n\t\t\t\t\t<CompositeItem\n\t\t\t\t\t\trender={ <div /> }\n\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\tid={ generateItemWrapperCompositeId( idPrefix ) }\n\t\t\t\t\t\taria-pressed={ isSelected }\n\t\t\t\t\t\taria-labelledby={ labelId }\n\t\t\t\t\t\taria-describedby={ descriptionId }\n\t\t\t\t\t\tclassName=\"dataviews-view-list__item\"\n\t\t\t\t\t\tonClick={ () => onSelect( item ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t<HStack\n\t\t\t\t\t\t\tspacing={ 3 }\n\t\t\t\t\t\t\tjustify=\"start\"\n\t\t\t\t\t\t\talignment=\"flex-start\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div className=\"dataviews-view-list__media-wrapper\">\n\t\t\t\t\t\t\t\t{ renderedMediaField }\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<VStack\n\t\t\t\t\t\t\t\tspacing={ 1 }\n\t\t\t\t\t\t\t\tclassName=\"dataviews-view-list__field-wrapper\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\tclassName=\"dataviews-view-list__primary-field\"\n\t\t\t\t\t\t\t\t\tid={ labelId }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ renderedPrimaryField }\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tclassName=\"dataviews-view-list__fields\"\n\t\t\t\t\t\t\t\t\tid={ descriptionId }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ visibleFields.map( ( field ) => (\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\tkey={ field.id }\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"dataviews-view-list__field\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<VisuallyHidden\n\t\t\t\t\t\t\t\t\t\t\t\tas=\"span\"\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"dataviews-view-list__field-label\"\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t{ field.label }\n\t\t\t\t\t\t\t\t\t\t\t</VisuallyHidden>\n\t\t\t\t\t\t\t\t\t\t\t<span className=\"dataviews-view-list__field-value\">\n\t\t\t\t\t\t\t\t\t\t\t\t<field.render item={ item } />\n\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t</HStack>\n\t\t\t\t\t</CompositeItem>\n\t\t\t\t</div>\n\t\t\t\t{ eligibleActions?.length > 0 && (\n\t\t\t\t\t<HStack\n\t\t\t\t\t\tspacing={ 3 }\n\t\t\t\t\t\tjustify=\"flex-end\"\n\t\t\t\t\t\tclassName=\"dataviews-view-list__item-actions\"\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\tflexShrink: '0',\n\t\t\t\t\t\t\twidth: 'auto',\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ primaryAction && (\n\t\t\t\t\t\t\t<PrimaryActionGridCell\n\t\t\t\t\t\t\t\tidPrefix={ idPrefix }\n\t\t\t\t\t\t\t\tprimaryAction={ primaryAction }\n\t\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t<div role=\"gridcell\">\n\t\t\t\t\t\t\t<DropdownMenu\n\t\t\t\t\t\t\t\ttrigger={\n\t\t\t\t\t\t\t\t\t<CompositeItem\n\t\t\t\t\t\t\t\t\t\tid={ generateDropdownTriggerCompositeId(\n\t\t\t\t\t\t\t\t\t\t\tidPrefix\n\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\trender={\n\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\t\t\t\ticon={ moreVertical }\n\t\t\t\t\t\t\t\t\t\t\t\tlabel={ __( 'Actions' ) }\n\t\t\t\t\t\t\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\t\t\t\t\t\t\tdisabled={ ! actions.length }\n\t\t\t\t\t\t\t\t\t\t\t\tonKeyDown={\n\t\t\t\t\t\t\t\t\t\t\t\t\tonDropdownTriggerKeyDown\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tplacement=\"bottom-end\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<ActionsDropdownMenuGroup\n\t\t\t\t\t\t\t\t\tactions={ eligibleActions }\n\t\t\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</DropdownMenu>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</HStack>\n\t\t\t\t) }\n\t\t\t</HStack>\n\t\t</CompositeRow>\n\t);\n}\n\nexport default function ViewList< Item >( props: ViewListProps< Item > ) {\n\tconst {\n\t\tactions,\n\t\tdata,\n\t\tfields,\n\t\tgetItemId,\n\t\tisLoading,\n\t\tonChangeSelection,\n\t\tselection,\n\t\tview,\n\t} = props;\n\tconst baseId = useInstanceId( ViewList, 'view-list' );\n\n\tconst selectedItem = data?.findLast( ( item ) =>\n\t\tselection.includes( getItemId( item ) )\n\t);\n\n\tconst mediaField = fields.find(\n\t\t( field ) => field.id === view.layout?.mediaField\n\t);\n\tconst primaryField = fields.find(\n\t\t( field ) => field.id === view.layout?.primaryField\n\t);\n\tconst viewFields = view.fields || fields.map( ( field ) => field.id );\n\tconst visibleFields = fields.filter(\n\t\t( field ) =>\n\t\t\tviewFields.includes( field.id ) &&\n\t\t\t! [ view.layout?.primaryField, view.layout?.mediaField ].includes(\n\t\t\t\tfield.id\n\t\t\t)\n\t);\n\n\tconst onSelect = ( item: Item ) =>\n\t\tonChangeSelection( [ getItemId( item ) ] );\n\n\tconst generateCompositeItemIdPrefix = useCallback(\n\t\t( item: Item ) => `${ baseId }-${ getItemId( item ) }`,\n\t\t[ baseId, getItemId ]\n\t);\n\n\tconst isActiveCompositeItem = useCallback(\n\t\t( item: Item, idToCheck: string ) => {\n\t\t\t// All composite items use the same prefix in their IDs.\n\t\t\treturn idToCheck.startsWith(\n\t\t\t\tgenerateCompositeItemIdPrefix( item )\n\t\t\t);\n\t\t},\n\t\t[ generateCompositeItemIdPrefix ]\n\t);\n\n\t// Controlled state for the active composite item.\n\tconst [ activeCompositeId, setActiveCompositeId ] = useState<\n\t\tstring | null | undefined\n\t>( undefined );\n\n\t// Update the active composite item when the selected item changes.\n\tuseEffect( () => {\n\t\tif ( selectedItem ) {\n\t\t\tsetActiveCompositeId(\n\t\t\t\tgenerateItemWrapperCompositeId(\n\t\t\t\t\tgenerateCompositeItemIdPrefix( selectedItem )\n\t\t\t\t)\n\t\t\t);\n\t\t}\n\t}, [ selectedItem, generateCompositeItemIdPrefix ] );\n\n\tconst activeItemIndex = data.findIndex( ( item ) =>\n\t\tisActiveCompositeItem( item, activeCompositeId ?? '' )\n\t);\n\tconst previousActiveItemIndex = usePrevious( activeItemIndex );\n\tconst isActiveIdInList = activeItemIndex !== -1;\n\n\tconst selectCompositeItem = useCallback(\n\t\t(\n\t\t\ttargetIndex: number,\n\t\t\t// Allows invokers to specify a custom function to generate the\n\t\t\t// target composite item ID\n\t\t\tgenerateCompositeId: ( idPrefix: string ) => string\n\t\t) => {\n\t\t\t// Clamping between 0 and data.length - 1 to avoid out of bounds.\n\t\t\tconst clampedIndex = Math.min(\n\t\t\t\tdata.length - 1,\n\t\t\t\tMath.max( 0, targetIndex )\n\t\t\t);\n\t\t\tconst itemIdPrefix = generateCompositeItemIdPrefix(\n\t\t\t\tdata[ clampedIndex ]\n\t\t\t);\n\t\t\tconst targetCompositeItemId = generateCompositeId( itemIdPrefix );\n\n\t\t\tsetActiveCompositeId( targetCompositeItemId );\n\t\t\tdocument.getElementById( targetCompositeItemId )?.focus();\n\t\t},\n\t\t[ data, generateCompositeItemIdPrefix ]\n\t);\n\n\t// Select a new active composite item when the current active item\n\t// is removed from the list.\n\tuseEffect( () => {\n\t\tconst wasActiveIdInList =\n\t\t\tpreviousActiveItemIndex !== undefined &&\n\t\t\tpreviousActiveItemIndex !== -1;\n\t\tif ( ! isActiveIdInList && wasActiveIdInList ) {\n\t\t\t// By picking `previousActiveItemIndex` as the next item index, we are\n\t\t\t// basically picking the item that would have been after the deleted one.\n\t\t\t// If the previously active (and removed) item was the last of the list,\n\t\t\t// we will select the item before it — which is the new last item.\n\t\t\tselectCompositeItem(\n\t\t\t\tpreviousActiveItemIndex,\n\t\t\t\tgenerateItemWrapperCompositeId\n\t\t\t);\n\t\t}\n\t}, [ isActiveIdInList, selectCompositeItem, previousActiveItemIndex ] );\n\n\t// Prevent the default behavior (open dropdown menu) and instead select the\n\t// dropdown menu trigger on the previous/next row.\n\t// https://github.com/ariakit/ariakit/issues/3768\n\tconst onDropdownTriggerKeyDown = useCallback(\n\t\t( event: React.KeyboardEvent< HTMLButtonElement > ) => {\n\t\t\tif ( event.key === 'ArrowDown' ) {\n\t\t\t\t// Select the dropdown menu trigger item in the next row.\n\t\t\t\tevent.preventDefault();\n\t\t\t\tselectCompositeItem(\n\t\t\t\t\tactiveItemIndex + 1,\n\t\t\t\t\tgenerateDropdownTriggerCompositeId\n\t\t\t\t);\n\t\t\t}\n\t\t\tif ( event.key === 'ArrowUp' ) {\n\t\t\t\t// Select the dropdown menu trigger item in the previous row.\n\t\t\t\tevent.preventDefault();\n\t\t\t\tselectCompositeItem(\n\t\t\t\t\tactiveItemIndex - 1,\n\t\t\t\t\tgenerateDropdownTriggerCompositeId\n\t\t\t\t);\n\t\t\t}\n\t\t},\n\t\t[ selectCompositeItem, activeItemIndex ]\n\t);\n\n\tconst hasData = data?.length;\n\tif ( ! hasData ) {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclassName={ clsx( {\n\t\t\t\t\t'dataviews-loading': isLoading,\n\t\t\t\t\t'dataviews-no-results': ! hasData && ! isLoading,\n\t\t\t\t} ) }\n\t\t\t>\n\t\t\t\t{ ! hasData && (\n\t\t\t\t\t<p>{ isLoading ? <Spinner /> : __( 'No results' ) }</p>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t);\n\t}\n\n\treturn (\n\t\t<Composite\n\t\t\tid={ baseId }\n\t\t\trender={ <ul /> }\n\t\t\tclassName=\"dataviews-view-list\"\n\t\t\trole=\"grid\"\n\t\t\tactiveId={ activeCompositeId }\n\t\t\tsetActiveId={ setActiveCompositeId }\n\t\t>\n\t\t\t{ data.map( ( item ) => {\n\t\t\t\tconst id = generateCompositeItemIdPrefix( item );\n\t\t\t\treturn (\n\t\t\t\t\t<ListItem\n\t\t\t\t\t\tkey={ id }\n\t\t\t\t\t\tidPrefix={ id }\n\t\t\t\t\t\tactions={ actions }\n\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\tisSelected={ item === selectedItem }\n\t\t\t\t\t\tonSelect={ onSelect }\n\t\t\t\t\t\tmediaField={ mediaField }\n\t\t\t\t\t\tprimaryField={ primaryField }\n\t\t\t\t\t\tvisibleFields={ visibleFields }\n\t\t\t\t\t\tonDropdownTriggerKeyDown={ onDropdownTriggerKeyDown }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</Composite>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}

package/build/dataviews-layouts/table/column-header-menu.js

@@ -11,6 +11,7 @@ var _element = require("@wordpress/element");
 var _lockUnlock = require("../../lock-unlock");
 var _utils = require("../../utils");
 var _constants = require("../../constants");
+var _index = require("../index");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * External dependencies
@@ -25,18 +26,13 @@ var _jsxRuntime = require("react/jsx-runtime");
  */
 
 const {
-  DropdownMenuV2: DropdownMenu,
-  DropdownMenuGroupV2: DropdownMenuGroup,
-  DropdownMenuItemV2: DropdownMenuItem,
-  DropdownMenuRadioItemV2: DropdownMenuRadioItem,
-  DropdownMenuItemLabelV2: DropdownMenuItemLabel,
-  DropdownMenuSeparatorV2: DropdownMenuSeparator
+  DropdownMenuV2
 } = (0, _lockUnlock.unlock)(_components.privateApis);
 function WithDropDownMenuSeparators({
   children
 }) {
   return _element.Children.toArray(children).filter(Boolean).map((child, i) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_element.Fragment, {
-    children: [i > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(DropdownMenuSeparator, {}), child]
+    children: [i > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(DropdownMenuV2.Separator, {}), child]
   }, i));
 }
 const _HeaderMenu = (0, _element.forwardRef)(function HeaderMenu({
@@ -47,35 +43,41 @@ const _HeaderMenu = (0, _element.forwardRef)(function HeaderMenu({
   onHide,
   setOpenedFilter
 }, ref) {
+  const visibleFieldIds = (0, _index.getVisibleFieldIds)(view, fields);
+  const index = visibleFieldIds?.indexOf(fieldId);
+  const isSorted = view.sort?.field === fieldId;
+  let isHidable = false;
+  let isSortable = false;
+  let canAddFilter = false;
+  let header;
+  let operators = [];
   const combinedField = view.layout?.combinedFields?.find(f => f.id === fieldId);
-  const index = view.fields?.indexOf(fieldId);
-  if (!!combinedField) {
-    return combinedField.label;
-  }
   const field = fields.find(f => f.id === fieldId);
-  if (!field) {
-    return null;
-  }
-  const isHidable = field.enableHiding !== false;
-  const isSortable = field.enableSorting !== false;
-  const isSorted = view.sort?.field === field.id;
-  const operators = (0, _utils.sanitizeOperators)(field);
-  // Filter can be added:
-  // 1. If the field is not already part of a view's filters.
-  // 2. If the field meets the type and operator requirements.
-  // 3. If it's not primary. If it is, it should be already visible.
-  const canAddFilter = !view.filters?.some(_filter => field.id === _filter.field) && !!field.elements?.length && !!operators.length && !field.filterBy?.isPrimary;
-  if (!isSortable && !isHidable && !canAddFilter) {
-    return field.label;
+  if (!combinedField) {
+    if (!field) {
+      // No combined or regular field found.
+      return null;
+    }
+    isHidable = field.enableHiding !== false;
+    isSortable = field.enableSorting !== false;
+    header = field.header;
+    operators = (0, _utils.sanitizeOperators)(field);
+    // Filter can be added:
+    // 1. If the field is not already part of a view's filters.
+    // 2. If the field meets the type and operator requirements.
+    // 3. If it's not primary. If it is, it should be already visible.
+    canAddFilter = !view.filters?.some(_filter => fieldId === _filter.field) && !!field.elements?.length && !!operators.length && !field.filterBy?.isPrimary;
+  } else {
+    header = combinedField.header || combinedField.label;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(DropdownMenu, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(DropdownMenuV2, {
     align: "start",
     trigger: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.Button, {
       size: "compact",
       className: "dataviews-view-table-header-button",
       ref: ref,
       variant: "tertiary",
-      children: [field.label, view.sort && isSorted && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      children: [header, view.sort && isSorted && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
         "aria-hidden": "true",
         children: _constants.sortArrows[view.sort.direction]
       })]
@@ -84,11 +86,11 @@ const _HeaderMenu = (0, _element.forwardRef)(function HeaderMenu({
       minWidth: '240px'
     },
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(WithDropDownMenuSeparators, {
-      children: [isSortable && /*#__PURE__*/(0, _jsxRuntime.jsx)(DropdownMenuGroup, {
+      children: [isSortable && /*#__PURE__*/(0, _jsxRuntime.jsx)(DropdownMenuV2.Group, {
         children: _constants.SORTING_DIRECTIONS.map(direction => {
           const isChecked = view.sort && isSorted && view.sort.direction === direction;
-          const value = `${field.id}-${direction}`;
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(DropdownMenuRadioItem, {
+          const value = `${fieldId}-${direction}`;
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(DropdownMenuV2.RadioItem, {
             // All sorting radio items share the same name, so that
             // selecting a sorting option automatically deselects the
             // previously selected one, even if it is displayed in
@@ -101,87 +103,80 @@ const _HeaderMenu = (0, _element.forwardRef)(function HeaderMenu({
               onChangeView({
                 ...view,
                 sort: {
-                  field: field.id,
+                  field: fieldId,
                   direction
                 }
               });
             },
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DropdownMenuItemLabel, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DropdownMenuV2.ItemLabel, {
               children: _constants.sortLabels[direction]
             })
           }, value);
         })
-      }), canAddFilter && /*#__PURE__*/(0, _jsxRuntime.jsx)(DropdownMenuGroup, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DropdownMenuItem, {
+      }), canAddFilter && /*#__PURE__*/(0, _jsxRuntime.jsx)(DropdownMenuV2.Group, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DropdownMenuV2.Item, {
           prefix: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Icon, {
             icon: _icons.funnel
           }),
           onClick: () => {
-            setOpenedFilter(field.id);
+            setOpenedFilter(fieldId);
             onChangeView({
               ...view,
               page: 1,
               filters: [...(view.filters || []), {
-                field: field.id,
+                field: fieldId,
                 value: undefined,
                 operator: operators[0]
               }]
             });
           },
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DropdownMenuItemLabel, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DropdownMenuV2.ItemLabel, {
             children: (0, _i18n.__)('Add filter')
           })
         })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(DropdownMenuGroup, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(DropdownMenuItem, {
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(DropdownMenuV2.Group, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(DropdownMenuV2.Item, {
           prefix: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Icon, {
             icon: _icons.arrowLeft
           }),
           disabled: index < 1,
           onClick: () => {
-            var _view$fields$slice;
-            if (!view.fields || index < 1) {
-              return;
-            }
+            var _visibleFieldIds$slic;
             onChangeView({
               ...view,
-              fields: [...((_view$fields$slice = view.fields.slice(0, index - 1)) !== null && _view$fields$slice !== void 0 ? _view$fields$slice : []), field.id, view.fields[index - 1], ...view.fields.slice(index + 1)]
+              fields: [...((_visibleFieldIds$slic = visibleFieldIds.slice(0, index - 1)) !== null && _visibleFieldIds$slic !== void 0 ? _visibleFieldIds$slic : []), fieldId, visibleFieldIds[index - 1], ...visibleFieldIds.slice(index + 1)]
             });
           },
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DropdownMenuItemLabel, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DropdownMenuV2.ItemLabel, {
             children: (0, _i18n.__)('Move left')
           })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(DropdownMenuItem, {
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(DropdownMenuV2.Item, {
           prefix: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Icon, {
             icon: _icons.arrowRight
           }),
-          disabled: !view.fields || index >= view.fields.length - 1,
+          disabled: index >= visibleFieldIds.length - 1,
           onClick: () => {
-            var _view$fields$slice2;
-            if (!view.fields || index >= view.fields.length - 1) {
-              return;
-            }
+            var _visibleFieldIds$slic2;
             onChangeView({
               ...view,
-              fields: [...((_view$fields$slice2 = view.fields.slice(0, index)) !== null && _view$fields$slice2 !== void 0 ? _view$fields$slice2 : []), view.fields[index + 1], field.id, ...view.fields.slice(index + 2)]
+              fields: [...((_visibleFieldIds$slic2 = visibleFieldIds.slice(0, index)) !== null && _visibleFieldIds$slic2 !== void 0 ? _visibleFieldIds$slic2 : []), visibleFieldIds[index + 1], fieldId, ...visibleFieldIds.slice(index + 2)]
             });
           },
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DropdownMenuItemLabel, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DropdownMenuV2.ItemLabel, {
             children: (0, _i18n.__)('Move right')
           })
-        }), isHidable && /*#__PURE__*/(0, _jsxRuntime.jsx)(DropdownMenuItem, {
+        }), isHidable && field && /*#__PURE__*/(0, _jsxRuntime.jsx)(DropdownMenuV2.Item, {
           prefix: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Icon, {
             icon: _icons.unseen
           }),
           onClick: () => {
-            const viewFields = view.fields || fields.map(f => f.id);
             onHide(field);
             onChangeView({
               ...view,
-              fields: viewFields.filter(id => id !== field.id)
+              fields: visibleFieldIds.filter(id => id !== fieldId)
             });
           },
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DropdownMenuItemLabel, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DropdownMenuV2.ItemLabel, {
             children: (0, _i18n.__)('Hide column')
           })
         })]