@wordpress/dataviews 4.2.0 → 4.3.0

package/build-module/components/dataviews-bulk-actions/index.js

@@ -1,26 +1,19 @@
 /**
  * WordPress dependencies
  */
-import { privateApis as componentsPrivateApis, Button, Modal } from '@wordpress/components';
+import { Button, CheckboxControl, __experimentalHStack as HStack } from '@wordpress/components';
 import { __, sprintf, _n } from '@wordpress/i18n';
-import { useMemo, useState, useCallback, useContext } from '@wordpress/element';
+import { useMemo, useState, useRef, useContext } from '@wordpress/element';
 import { useRegistry } from '@wordpress/data';
+import { closeSmall } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
 import DataViewsContext from '../dataviews-context';
-import { LAYOUT_TABLE, LAYOUT_GRID } from '../../constants';
-import { unlock } from '../../lock-unlock';
+import { ActionWithModal } from '../dataviews-item-actions';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  DropdownMenuV2: DropdownMenu,
-  DropdownMenuGroupV2: DropdownMenuGroup,
-  DropdownMenuItemV2: DropdownMenuItem,
-  DropdownMenuSeparatorV2: DropdownMenuSeparator
-} = unlock(componentsPrivateApis);
 export function useHasAPossibleBulkAction(actions, item) {
   return useMemo(() => {
     return actions.some(action => {
@@ -37,166 +30,175 @@ export function useSomeItemHasAPossibleBulkAction(actions, data) {
     });
   }, [actions, data]);
 }
-function ActionWithModal({
+export function BulkSelectionCheckbox({
+  selection,
+  onChangeSelection,
+  data,
+  actions,
+  getItemId
+}) {
+  const selectableItems = useMemo(() => {
+    return data.filter(item => {
+      return actions.some(action => action.supportsBulk && (!action.isEligible || action.isEligible(item)));
+    });
+  }, [data, actions]);
+  const selectedItems = data.filter(item => selection.includes(getItemId(item)) && selectableItems.includes(item));
+  const areAllSelected = selectedItems.length === selectableItems.length;
+  return /*#__PURE__*/_jsx(CheckboxControl, {
+    className: "dataviews-view-table-selection-checkbox",
+    __nextHasNoMarginBottom: true,
+    checked: areAllSelected,
+    indeterminate: !areAllSelected && !!selectedItems.length,
+    onChange: () => {
+      if (areAllSelected) {
+        onChangeSelection([]);
+      } else {
+        onChangeSelection(selectableItems.map(item => getItemId(item)));
+      }
+    },
+    "aria-label": areAllSelected ? __('Deselect all') : __('Select all')
+  });
+}
+function ActionTrigger({
   action,
-  selectedItems,
-  setActionWithModal,
-  onMenuOpenChange
+  onClick,
+  isBusy,
+  items
 }) {
-  const eligibleItems = useMemo(() => {
-    return selectedItems.filter(item => !action.isEligible || action.isEligible(item));
-  }, [action, selectedItems]);
-  const {
-    RenderModal,
-    hideModalHeader
-  } = action;
-  const onCloseModal = useCallback(() => {
-    setActionWithModal(undefined);
-  }, [setActionWithModal]);
-  if (!eligibleItems.length) {
-    return null;
-  }
-  const label = typeof action.label === 'string' ? action.label : action.label(selectedItems);
-  return /*#__PURE__*/_jsx(Modal, {
-    title: !hideModalHeader ? label : undefined,
-    __experimentalHideHeader: !!hideModalHeader,
-    onRequestClose: onCloseModal,
-    overlayClassName: "dataviews-bulk-actions__modal",
-    children: /*#__PURE__*/_jsx(RenderModal, {
-      items: eligibleItems,
-      closeModal: onCloseModal,
-      onActionPerformed: () => onMenuOpenChange(false)
-    })
+  const label = typeof action.label === 'string' ? action.label : action.label(items);
+  return /*#__PURE__*/_jsx(Button, {
+    disabled: isBusy,
+    accessibleWhenDisabled: true,
+    label: label,
+    icon: action.icon,
+    isDestructive: action.isDestructive,
+    size: "compact",
+    onClick: onClick,
+    isBusy: isBusy,
+    tooltipPosition: "top"
   });
 }
-function BulkActionItem({
+const EMPTY_ARRAY = [];
+function ActionButton({
   action,
   selectedItems,
-  setActionWithModal
+  actionInProgress,
+  setActionInProgress
 }) {
   const registry = useRegistry();
-  const eligibleItems = useMemo(() => {
-    return selectedItems.filter(item => !action.isEligible || action.isEligible(item));
+  const selectedEligibleItems = useMemo(() => {
+    return selectedItems.filter(item => {
+      return !action.isEligible || action.isEligible(item);
+    });
   }, [action, selectedItems]);
-  const shouldShowModal = ('RenderModal' in action);
-  return /*#__PURE__*/_jsx(DropdownMenuItem, {
-    hideOnClick: !shouldShowModal,
+  if ('RenderModal' in action) {
+    return /*#__PURE__*/_jsx(ActionWithModal, {
+      action: action,
+      items: selectedEligibleItems,
+      ActionTrigger: ActionTrigger
+    }, action.id);
+  }
+  return /*#__PURE__*/_jsx(ActionTrigger, {
+    action: action,
     onClick: async () => {
-      if (shouldShowModal) {
-        setActionWithModal(action);
-      } else {
-        action.callback(eligibleItems, {
-          registry
-        });
-      }
+      setActionInProgress(action.id);
+      await action.callback(selectedItems, {
+        registry
+      });
+      setActionInProgress(null);
     },
-    suffix: eligibleItems.length,
-    children: action.label
+    items: selectedEligibleItems,
+    isBusy: actionInProgress === action.id
   }, action.id);
 }
-function ActionsMenuGroup({
-  actions,
-  selectedItems,
-  setActionWithModal
-}) {
-  const elligibleActions = useMemo(() => {
-    return actions.filter(action => {
-      return selectedItems.some(item => !action.isEligible || action.isEligible(item));
-    });
-  }, [actions, selectedItems]);
-  if (!elligibleActions.length) {
-    return null;
-  }
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(DropdownMenuGroup, {
-      children: elligibleActions.map(action => /*#__PURE__*/_jsx(BulkActionItem, {
-        action: action,
-        selectedItems: selectedItems,
-        setActionWithModal: setActionWithModal
-      }, action.id))
-    }), /*#__PURE__*/_jsx(DropdownMenuSeparator, {})]
+function renderFooterContent(data, actions, getItemId, selection, actionsToShow, selectedItems, actionInProgress, setActionInProgress, onChangeSelection) {
+  const message = selectedItems.length > 0 ? sprintf( /* translators: %d: number of items. */
+  _n('%d Item selected', '%d Items selected', selectedItems.length), selectedItems.length) : sprintf( /* translators: %d: number of items. */
+  _n('%d Item', '%d Items', data.length), data.length);
+  return /*#__PURE__*/_jsxs(HStack, {
+    expanded: false,
+    className: "dataviews-bulk-actions-footer__container",
+    spacing: 3,
+    children: [/*#__PURE__*/_jsx(BulkSelectionCheckbox, {
+      selection: selection,
+      onChangeSelection: onChangeSelection,
+      data: data,
+      actions: actions,
+      getItemId: getItemId
+    }), /*#__PURE__*/_jsx("span", {
+      className: "dataviews-bulk-actions-footer__item-count",
+      children: message
+    }), /*#__PURE__*/_jsxs(HStack, {
+      className: "dataviews-bulk-actions-footer__action-buttons",
+      expanded: false,
+      spacing: 1,
+      children: [actionsToShow.map(action => {
+        return /*#__PURE__*/_jsx(ActionButton, {
+          action: action,
+          selectedItems: selectedItems,
+          actionInProgress: actionInProgress,
+          setActionInProgress: setActionInProgress
+        }, action.id);
+      }), selectedItems.length > 0 && /*#__PURE__*/_jsx(Button, {
+        icon: closeSmall,
+        showTooltip: true,
+        tooltipPosition: "top",
+        size: "compact",
+        label: __('Cancel'),
+        disabled: !!actionInProgress,
+        accessibleWhenDisabled: false,
+        onClick: () => {
+          onChangeSelection(EMPTY_ARRAY);
+        }
+      })]
+    })]
   });
 }
-function _BulkActions() {
-  const {
-    data,
-    actions = [],
-    selection,
-    onChangeSelection,
-    getItemId
-  } = useContext(DataViewsContext);
+function FooterContent({
+  selection,
+  actions,
+  onChangeSelection,
+  data,
+  getItemId
+}) {
+  const [actionInProgress, setActionInProgress] = useState(null);
+  const footerContent = useRef(null);
   const bulkActions = useMemo(() => actions.filter(action => action.supportsBulk), [actions]);
-  const [isMenuOpen, onMenuOpenChange] = useState(false);
-  const [actionWithModal, setActionWithModal] = useState();
   const selectableItems = useMemo(() => {
     return data.filter(item => {
       return bulkActions.some(action => !action.isEligible || action.isEligible(item));
     });
   }, [data, bulkActions]);
-  const numberSelectableItems = selectableItems.length;
   const selectedItems = useMemo(() => {
     return data.filter(item => selection.includes(getItemId(item)) && selectableItems.includes(item));
   }, [selection, data, getItemId, selectableItems]);
-  const areAllSelected = selectedItems.length === numberSelectableItems;
-  if (bulkActions.length === 0) {
-    return null;
+  const actionsToShow = useMemo(() => actions.filter(action => {
+    return action.supportsBulk && action.icon && selectedItems.some(item => !action.isEligible || action.isEligible(item));
+  }), [actions, selectedItems]);
+  if (!actionInProgress) {
+    if (footerContent.current) {
+      footerContent.current = null;
+    }
+    return renderFooterContent(data, actions, getItemId, selection, actionsToShow, selectedItems, actionInProgress, setActionInProgress, onChangeSelection);
+  } else if (!footerContent.current) {
+    footerContent.current = renderFooterContent(data, actions, getItemId, selection, actionsToShow, selectedItems, actionInProgress, setActionInProgress, onChangeSelection);
   }
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsxs(DropdownMenu, {
-      open: isMenuOpen,
-      onOpenChange: onMenuOpenChange,
-      label: __('Bulk actions'),
-      style: {
-        minWidth: '240px'
-      },
-      trigger: /*#__PURE__*/_jsx(Button, {
-        className: "dataviews-bulk-actions__edit-button",
-        __next40pxDefaultSize: true,
-        variant: "tertiary",
-        size: "compact",
-        children: selectedItems.length ? sprintf( /* translators: %d: Number of items. */
-        _n('Edit %d item', 'Edit %d items', selectedItems.length), selectedItems.length) : __('Bulk edit')
-      }),
-      children: [/*#__PURE__*/_jsx(ActionsMenuGroup, {
-        actions: bulkActions,
-        setActionWithModal: setActionWithModal,
-        selectedItems: selectedItems
-      }), /*#__PURE__*/_jsxs(DropdownMenuGroup, {
-        children: [/*#__PURE__*/_jsx(DropdownMenuItem, {
-          disabled: areAllSelected,
-          hideOnClick: false,
-          onClick: () => {
-            onChangeSelection(selectableItems.map(item => getItemId(item)));
-          },
-          suffix: numberSelectableItems,
-          children: __('Select all')
-        }), /*#__PURE__*/_jsx(DropdownMenuItem, {
-          disabled: selection.length === 0,
-          hideOnClick: false,
-          onClick: () => {
-            onChangeSelection([]);
-          },
-          children: __('Deselect')
-        })]
-      })]
-    }), actionWithModal && /*#__PURE__*/_jsx(ActionWithModal, {
-      action: actionWithModal,
-      selectedItems: selectedItems,
-      setActionWithModal: setActionWithModal,
-      onMenuOpenChange: onMenuOpenChange
-    })]
-  });
+  return footerContent.current;
 }
-export default function BulkActions() {
+export function BulkActionsFooter() {
   const {
     data,
-    actions = [],
-    view
+    selection,
+    actions = EMPTY_ARRAY,
+    onChangeSelection,
+    getItemId
   } = useContext(DataViewsContext);
-  const hasPossibleBulkAction = useSomeItemHasAPossibleBulkAction(actions, data);
-  if (![LAYOUT_TABLE, LAYOUT_GRID].includes(view.type) || !hasPossibleBulkAction) {
-    return null;
-  }
-  return /*#__PURE__*/_jsx(_BulkActions, {});
+  return /*#__PURE__*/_jsx(FooterContent, {
+    selection: selection,
+    onChangeSelection: onChangeSelection,
+    data: data,
+    actions: actions,
+    getItemId: getItemId
+  });
 }
 //# sourceMappingURL=index.js.map

package/build-module/components/dataviews-bulk-actions/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["privateApis","componentsPrivateApis","Button","Modal","__","sprintf","_n","useMemo","useState","useCallback","useContext","useRegistry","DataViewsContext","LAYOUT_TABLE","LAYOUT_GRID","unlock","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","DropdownMenuV2","DropdownMenu","DropdownMenuGroupV2","DropdownMenuGroup","DropdownMenuItemV2","DropdownMenuItem","DropdownMenuSeparatorV2","DropdownMenuSeparator","useHasAPossibleBulkAction","actions","item","some","action","supportsBulk","isEligible","useSomeItemHasAPossibleBulkAction","data","ActionWithModal","selectedItems","setActionWithModal","onMenuOpenChange","eligibleItems","filter","RenderModal","hideModalHeader","onCloseModal","undefined","length","label","title","__experimentalHideHeader","onRequestClose","overlayClassName","children","items","closeModal","onActionPerformed","BulkActionItem","registry","shouldShowModal","hideOnClick","onClick","callback","suffix","id","ActionsMenuGroup","elligibleActions","map","_BulkActions","selection","onChangeSelection","getItemId","bulkActions","isMenuOpen","actionWithModal","selectableItems","numberSelectableItems","includes","areAllSelected","open","onOpenChange","style","minWidth","trigger","className","__next40pxDefaultSize","variant","size","disabled","BulkActions","view","hasPossibleBulkAction","type"],"sources":["@wordpress/dataviews/src/components/dataviews-bulk-actions/index.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tprivateApis as componentsPrivateApis,\n\tButton,\n\tModal,\n} from '@wordpress/components';\nimport { __, sprintf, _n } from '@wordpress/i18n';\nimport { useMemo, useState, useCallback, useContext } from '@wordpress/element';\nimport { useRegistry } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport DataViewsContext from '../dataviews-context';\nimport { LAYOUT_TABLE, LAYOUT_GRID } from '../../constants';\nimport { unlock } from '../../lock-unlock';\nimport type { Action, ActionModal } from '../../types';\n\nconst {\n\tDropdownMenuV2: DropdownMenu,\n\tDropdownMenuGroupV2: DropdownMenuGroup,\n\tDropdownMenuItemV2: DropdownMenuItem,\n\tDropdownMenuSeparatorV2: DropdownMenuSeparator,\n} = unlock( componentsPrivateApis );\n\ninterface ActionWithModalProps< Item > {\n\taction: ActionModal< Item >;\n\tselectedItems: Item[];\n\tsetActionWithModal: ( action?: ActionModal< Item > ) => void;\n\tonMenuOpenChange: ( isOpen: boolean ) => void;\n}\n\ninterface BulkActionsItemProps< Item > {\n\taction: Action< Item >;\n\tselectedItems: Item[];\n\tsetActionWithModal: ( action?: ActionModal< Item > ) => void;\n}\n\ninterface ActionsMenuGroupProps< Item > {\n\tactions: Action< Item >[];\n\tselectedItems: Item[];\n\tsetActionWithModal: ( action?: ActionModal< Item > ) => void;\n}\n\nexport function useHasAPossibleBulkAction< Item >(\n\tactions: Action< Item >[],\n\titem: Item\n) {\n\treturn useMemo( () => {\n\t\treturn actions.some( ( action ) => {\n\t\t\treturn (\n\t\t\t\taction.supportsBulk &&\n\t\t\t\t( ! action.isEligible || action.isEligible( item ) )\n\t\t\t);\n\t\t} );\n\t}, [ actions, item ] );\n}\n\nexport function useSomeItemHasAPossibleBulkAction< Item >(\n\tactions: Action< Item >[],\n\tdata: Item[]\n) {\n\treturn useMemo( () => {\n\t\treturn data.some( ( item ) => {\n\t\t\treturn actions.some( ( action ) => {\n\t\t\t\treturn (\n\t\t\t\t\taction.supportsBulk &&\n\t\t\t\t\t( ! action.isEligible || action.isEligible( item ) )\n\t\t\t\t);\n\t\t\t} );\n\t\t} );\n\t}, [ actions, data ] );\n}\n\nfunction ActionWithModal< Item >( {\n\taction,\n\tselectedItems,\n\tsetActionWithModal,\n\tonMenuOpenChange,\n}: ActionWithModalProps< Item > ) {\n\tconst eligibleItems = useMemo( () => {\n\t\treturn selectedItems.filter(\n\t\t\t( item ) => ! action.isEligible || action.isEligible( item )\n\t\t);\n\t}, [ action, selectedItems ] );\n\tconst { RenderModal, hideModalHeader } = action;\n\tconst onCloseModal = useCallback( () => {\n\t\tsetActionWithModal( undefined );\n\t}, [ setActionWithModal ] );\n\n\tif ( ! eligibleItems.length ) {\n\t\treturn null;\n\t}\n\n\tconst label =\n\t\ttypeof action.label === 'string'\n\t\t\t? action.label\n\t\t\t: action.label( selectedItems );\n\treturn (\n\t\t<Modal\n\t\t\ttitle={ ! hideModalHeader ? label : undefined }\n\t\t\t__experimentalHideHeader={ !! hideModalHeader }\n\t\t\tonRequestClose={ onCloseModal }\n\t\t\toverlayClassName=\"dataviews-bulk-actions__modal\"\n\t\t>\n\t\t\t<RenderModal\n\t\t\t\titems={ eligibleItems }\n\t\t\t\tcloseModal={ onCloseModal }\n\t\t\t\tonActionPerformed={ () => onMenuOpenChange( false ) }\n\t\t\t/>\n\t\t</Modal>\n\t);\n}\n\nfunction BulkActionItem< Item >( {\n\taction,\n\tselectedItems,\n\tsetActionWithModal,\n}: BulkActionsItemProps< Item > ) {\n\tconst registry = useRegistry();\n\tconst eligibleItems = useMemo( () => {\n\t\treturn selectedItems.filter(\n\t\t\t( item ) => ! action.isEligible || action.isEligible( item )\n\t\t);\n\t}, [ action, selectedItems ] );\n\n\tconst shouldShowModal = 'RenderModal' in action;\n\n\treturn (\n\t\t<DropdownMenuItem\n\t\t\tkey={ action.id }\n\t\t\thideOnClick={ ! shouldShowModal }\n\t\t\tonClick={ async () => {\n\t\t\t\tif ( shouldShowModal ) {\n\t\t\t\t\tsetActionWithModal( action );\n\t\t\t\t} else {\n\t\t\t\t\taction.callback( eligibleItems, { registry } );\n\t\t\t\t}\n\t\t\t} }\n\t\t\tsuffix={ eligibleItems.length }\n\t\t>\n\t\t\t{ action.label }\n\t\t</DropdownMenuItem>\n\t);\n}\n\nfunction ActionsMenuGroup< Item >( {\n\tactions,\n\tselectedItems,\n\tsetActionWithModal,\n}: ActionsMenuGroupProps< Item > ) {\n\tconst elligibleActions = useMemo( () => {\n\t\treturn actions.filter( ( action ) => {\n\t\t\treturn selectedItems.some(\n\t\t\t\t( item ) => ! action.isEligible || action.isEligible( item )\n\t\t\t);\n\t\t} );\n\t}, [ actions, selectedItems ] );\n\tif ( ! elligibleActions.length ) {\n\t\treturn null;\n\t}\n\treturn (\n\t\t<>\n\t\t\t<DropdownMenuGroup>\n\t\t\t\t{ elligibleActions.map( ( action ) => (\n\t\t\t\t\t<BulkActionItem\n\t\t\t\t\t\tkey={ action.id }\n\t\t\t\t\t\taction={ action }\n\t\t\t\t\t\tselectedItems={ selectedItems }\n\t\t\t\t\t\tsetActionWithModal={ setActionWithModal }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t</DropdownMenuGroup>\n\t\t\t<DropdownMenuSeparator />\n\t\t</>\n\t);\n}\n\nfunction _BulkActions() {\n\tconst {\n\t\tdata,\n\t\tactions = [],\n\t\tselection,\n\t\tonChangeSelection,\n\t\tgetItemId,\n\t} = useContext( DataViewsContext );\n\tconst bulkActions = useMemo(\n\t\t() => actions.filter( ( action ) => action.supportsBulk ),\n\t\t[ actions ]\n\t);\n\tconst [ isMenuOpen, onMenuOpenChange ] = useState( false );\n\tconst [ actionWithModal, setActionWithModal ] = useState<\n\t\tActionModal< any > | undefined\n\t>();\n\tconst selectableItems = useMemo( () => {\n\t\treturn data.filter( ( item ) => {\n\t\t\treturn bulkActions.some(\n\t\t\t\t( action ) => ! action.isEligible || action.isEligible( item )\n\t\t\t);\n\t\t} );\n\t}, [ data, bulkActions ] );\n\n\tconst numberSelectableItems = selectableItems.length;\n\n\tconst selectedItems = useMemo( () => {\n\t\treturn data.filter(\n\t\t\t( item ) =>\n\t\t\t\tselection.includes( getItemId( item ) ) &&\n\t\t\t\tselectableItems.includes( item )\n\t\t);\n\t}, [ selection, data, getItemId, selectableItems ] );\n\n\tconst areAllSelected = selectedItems.length === numberSelectableItems;\n\n\tif ( bulkActions.length === 0 ) {\n\t\treturn null;\n\t}\n\treturn (\n\t\t<>\n\t\t\t<DropdownMenu\n\t\t\t\topen={ isMenuOpen }\n\t\t\t\tonOpenChange={ onMenuOpenChange }\n\t\t\t\tlabel={ __( 'Bulk actions' ) }\n\t\t\t\tstyle={ { minWidth: '240px' } }\n\t\t\t\ttrigger={\n\t\t\t\t\t<Button\n\t\t\t\t\t\tclassName=\"dataviews-bulk-actions__edit-button\"\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ selectedItems.length\n\t\t\t\t\t\t\t? sprintf(\n\t\t\t\t\t\t\t\t\t/* translators: %d: Number of items. */\n\t\t\t\t\t\t\t\t\t_n(\n\t\t\t\t\t\t\t\t\t\t'Edit %d item',\n\t\t\t\t\t\t\t\t\t\t'Edit %d items',\n\t\t\t\t\t\t\t\t\t\tselectedItems.length\n\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\tselectedItems.length\n\t\t\t\t\t\t\t  )\n\t\t\t\t\t\t\t: __( 'Bulk edit' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t<ActionsMenuGroup\n\t\t\t\t\tactions={ bulkActions }\n\t\t\t\t\tsetActionWithModal={ setActionWithModal }\n\t\t\t\t\tselectedItems={ selectedItems }\n\t\t\t\t/>\n\t\t\t\t<DropdownMenuGroup>\n\t\t\t\t\t<DropdownMenuItem\n\t\t\t\t\t\tdisabled={ areAllSelected }\n\t\t\t\t\t\thideOnClick={ false }\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\tonChangeSelection(\n\t\t\t\t\t\t\t\tselectableItems.map( ( item ) =>\n\t\t\t\t\t\t\t\t\tgetItemId( item )\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tsuffix={ numberSelectableItems }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Select all' ) }\n\t\t\t\t\t</DropdownMenuItem>\n\t\t\t\t\t<DropdownMenuItem\n\t\t\t\t\t\tdisabled={ selection.length === 0 }\n\t\t\t\t\t\thideOnClick={ false }\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\tonChangeSelection( [] );\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Deselect' ) }\n\t\t\t\t\t</DropdownMenuItem>\n\t\t\t\t</DropdownMenuGroup>\n\t\t\t</DropdownMenu>\n\t\t\t{ actionWithModal && (\n\t\t\t\t<ActionWithModal\n\t\t\t\t\taction={ actionWithModal }\n\t\t\t\t\tselectedItems={ selectedItems }\n\t\t\t\t\tsetActionWithModal={ setActionWithModal }\n\t\t\t\t\tonMenuOpenChange={ onMenuOpenChange }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default function BulkActions() {\n\tconst { data, actions = [], view } = useContext( DataViewsContext );\n\tconst hasPossibleBulkAction = useSomeItemHasAPossibleBulkAction(\n\t\tactions,\n\t\tdata\n\t);\n\tif (\n\t\t! [ LAYOUT_TABLE, LAYOUT_GRID ].includes( view.type ) ||\n\t\t! hasPossibleBulkAction\n\t) {\n\t\treturn null;\n\t}\n\n\treturn <_BulkActions />;\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["Button","CheckboxControl","__experimentalHStack","HStack","__","sprintf","_n","useMemo","useState","useRef","useContext","useRegistry","closeSmall","DataViewsContext","ActionWithModal","jsx","_jsx","jsxs","_jsxs","useHasAPossibleBulkAction","actions","item","some","action","supportsBulk","isEligible","useSomeItemHasAPossibleBulkAction","data","BulkSelectionCheckbox","selection","onChangeSelection","getItemId","selectableItems","filter","selectedItems","includes","areAllSelected","length","className","__nextHasNoMarginBottom","checked","indeterminate","onChange","map","ActionTrigger","onClick","isBusy","items","label","disabled","accessibleWhenDisabled","icon","isDestructive","size","tooltipPosition","EMPTY_ARRAY","ActionButton","actionInProgress","setActionInProgress","registry","selectedEligibleItems","id","callback","renderFooterContent","actionsToShow","message","expanded","spacing","children","showTooltip","FooterContent","footerContent","bulkActions","current","BulkActionsFooter"],"sources":["@wordpress/dataviews/src/components/dataviews-bulk-actions/index.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\tCheckboxControl,\n\t__experimentalHStack as HStack,\n} from '@wordpress/components';\nimport { __, sprintf, _n } from '@wordpress/i18n';\nimport { useMemo, useState, useRef, useContext } from '@wordpress/element';\nimport { useRegistry } from '@wordpress/data';\nimport { closeSmall } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport DataViewsContext from '../dataviews-context';\nimport { ActionWithModal } from '../dataviews-item-actions';\nimport type { Action } from '../../types';\nimport type { SetSelection } from '../../private-types';\nimport type { ActionTriggerProps } from '../dataviews-item-actions';\n\nexport function useHasAPossibleBulkAction< Item >(\n\tactions: Action< Item >[],\n\titem: Item\n) {\n\treturn useMemo( () => {\n\t\treturn actions.some( ( action ) => {\n\t\t\treturn (\n\t\t\t\taction.supportsBulk &&\n\t\t\t\t( ! action.isEligible || action.isEligible( item ) )\n\t\t\t);\n\t\t} );\n\t}, [ actions, item ] );\n}\n\nexport function useSomeItemHasAPossibleBulkAction< Item >(\n\tactions: Action< Item >[],\n\tdata: Item[]\n) {\n\treturn useMemo( () => {\n\t\treturn data.some( ( item ) => {\n\t\t\treturn actions.some( ( action ) => {\n\t\t\t\treturn (\n\t\t\t\t\taction.supportsBulk &&\n\t\t\t\t\t( ! action.isEligible || action.isEligible( item ) )\n\t\t\t\t);\n\t\t\t} );\n\t\t} );\n\t}, [ actions, data ] );\n}\n\ninterface BulkSelectionCheckboxProps< Item > {\n\tselection: string[];\n\tonChangeSelection: SetSelection;\n\tdata: Item[];\n\tactions: Action< Item >[];\n\tgetItemId: ( item: Item ) => string;\n}\n\nexport function BulkSelectionCheckbox< Item >( {\n\tselection,\n\tonChangeSelection,\n\tdata,\n\tactions,\n\tgetItemId,\n}: BulkSelectionCheckboxProps< Item > ) {\n\tconst selectableItems = useMemo( () => {\n\t\treturn data.filter( ( item ) => {\n\t\t\treturn actions.some(\n\t\t\t\t( action ) =>\n\t\t\t\t\taction.supportsBulk &&\n\t\t\t\t\t( ! action.isEligible || action.isEligible( item ) )\n\t\t\t);\n\t\t} );\n\t}, [ data, actions ] );\n\tconst selectedItems = data.filter(\n\t\t( item ) =>\n\t\t\tselection.includes( getItemId( item ) ) &&\n\t\t\tselectableItems.includes( item )\n\t);\n\tconst areAllSelected = selectedItems.length === selectableItems.length;\n\treturn (\n\t\t<CheckboxControl\n\t\t\tclassName=\"dataviews-view-table-selection-checkbox\"\n\t\t\t__nextHasNoMarginBottom\n\t\t\tchecked={ areAllSelected }\n\t\t\tindeterminate={ ! areAllSelected && !! selectedItems.length }\n\t\t\tonChange={ () => {\n\t\t\t\tif ( areAllSelected ) {\n\t\t\t\t\tonChangeSelection( [] );\n\t\t\t\t} else {\n\t\t\t\t\tonChangeSelection(\n\t\t\t\t\t\tselectableItems.map( ( item ) => getItemId( item ) )\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t} }\n\t\t\taria-label={\n\t\t\t\tareAllSelected ? __( 'Deselect all' ) : __( 'Select all' )\n\t\t\t}\n\t\t/>\n\t);\n}\n\ninterface ActionButtonProps< Item > {\n\taction: Action< Item >;\n\tselectedItems: Item[];\n\tactionInProgress: string | null;\n\tsetActionInProgress: ( actionId: string | null ) => void;\n}\n\ninterface ToolbarContentProps< Item > {\n\tselection: string[];\n\tonChangeSelection: SetSelection;\n\tdata: Item[];\n\tactions: Action< Item >[];\n\tgetItemId: ( item: Item ) => string;\n}\n\nfunction ActionTrigger< Item >( {\n\taction,\n\tonClick,\n\tisBusy,\n\titems,\n}: ActionTriggerProps< Item > ) {\n\tconst label =\n\t\ttypeof action.label === 'string' ? action.label : action.label( items );\n\treturn (\n\t\t<Button\n\t\t\tdisabled={ isBusy }\n\t\t\taccessibleWhenDisabled\n\t\t\tlabel={ label }\n\t\t\ticon={ action.icon }\n\t\t\tisDestructive={ action.isDestructive }\n\t\t\tsize=\"compact\"\n\t\t\tonClick={ onClick }\n\t\t\tisBusy={ isBusy }\n\t\t\ttooltipPosition=\"top\"\n\t\t/>\n\t);\n}\n\nconst EMPTY_ARRAY: [] = [];\n\nfunction ActionButton< Item >( {\n\taction,\n\tselectedItems,\n\tactionInProgress,\n\tsetActionInProgress,\n}: ActionButtonProps< Item > ) {\n\tconst registry = useRegistry();\n\tconst selectedEligibleItems = useMemo( () => {\n\t\treturn selectedItems.filter( ( item ) => {\n\t\t\treturn ! action.isEligible || action.isEligible( item );\n\t\t} );\n\t}, [ action, selectedItems ] );\n\tif ( 'RenderModal' in action ) {\n\t\treturn (\n\t\t\t<ActionWithModal\n\t\t\t\tkey={ action.id }\n\t\t\t\taction={ action }\n\t\t\t\titems={ selectedEligibleItems }\n\t\t\t\tActionTrigger={ ActionTrigger }\n\t\t\t/>\n\t\t);\n\t}\n\treturn (\n\t\t<ActionTrigger\n\t\t\tkey={ action.id }\n\t\t\taction={ action }\n\t\t\tonClick={ async () => {\n\t\t\t\tsetActionInProgress( action.id );\n\t\t\t\tawait action.callback( selectedItems, {\n\t\t\t\t\tregistry,\n\t\t\t\t} );\n\t\t\t\tsetActionInProgress( null );\n\t\t\t} }\n\t\t\titems={ selectedEligibleItems }\n\t\t\tisBusy={ actionInProgress === action.id }\n\t\t/>\n\t);\n}\n\nfunction renderFooterContent< Item >(\n\tdata: Item[],\n\tactions: Action< Item >[],\n\tgetItemId: ( item: Item ) => string,\n\tselection: string[],\n\tactionsToShow: Action< Item >[],\n\tselectedItems: Item[],\n\tactionInProgress: string | null,\n\tsetActionInProgress: ( actionId: string | null ) => void,\n\tonChangeSelection: SetSelection\n) {\n\tconst message =\n\t\tselectedItems.length > 0\n\t\t\t? sprintf(\n\t\t\t\t\t/* translators: %d: number of items. */\n\t\t\t\t\t_n(\n\t\t\t\t\t\t'%d Item selected',\n\t\t\t\t\t\t'%d Items selected',\n\t\t\t\t\t\tselectedItems.length\n\t\t\t\t\t),\n\t\t\t\t\tselectedItems.length\n\t\t\t  )\n\t\t\t: sprintf(\n\t\t\t\t\t/* translators: %d: number of items. */\n\t\t\t\t\t_n( '%d Item', '%d Items', data.length ),\n\t\t\t\t\tdata.length\n\t\t\t  );\n\treturn (\n\t\t<HStack\n\t\t\texpanded={ false }\n\t\t\tclassName=\"dataviews-bulk-actions-footer__container\"\n\t\t\tspacing={ 3 }\n\t\t>\n\t\t\t<BulkSelectionCheckbox\n\t\t\t\tselection={ selection }\n\t\t\t\tonChangeSelection={ onChangeSelection }\n\t\t\t\tdata={ data }\n\t\t\t\tactions={ actions }\n\t\t\t\tgetItemId={ getItemId }\n\t\t\t/>\n\t\t\t<span className=\"dataviews-bulk-actions-footer__item-count\">\n\t\t\t\t{ message }\n\t\t\t</span>\n\t\t\t<HStack\n\t\t\t\tclassName=\"dataviews-bulk-actions-footer__action-buttons\"\n\t\t\t\texpanded={ false }\n\t\t\t\tspacing={ 1 }\n\t\t\t>\n\t\t\t\t{ actionsToShow.map( ( action ) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<ActionButton\n\t\t\t\t\t\t\tkey={ action.id }\n\t\t\t\t\t\t\taction={ action }\n\t\t\t\t\t\t\tselectedItems={ selectedItems }\n\t\t\t\t\t\t\tactionInProgress={ actionInProgress }\n\t\t\t\t\t\t\tsetActionInProgress={ setActionInProgress }\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t\t{ selectedItems.length > 0 && (\n\t\t\t\t\t<Button\n\t\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\t\tshowTooltip\n\t\t\t\t\t\ttooltipPosition=\"top\"\n\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\tlabel={ __( 'Cancel' ) }\n\t\t\t\t\t\tdisabled={ !! actionInProgress }\n\t\t\t\t\t\taccessibleWhenDisabled={ false }\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\tonChangeSelection( EMPTY_ARRAY );\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</HStack>\n\t\t</HStack>\n\t);\n}\n\nfunction FooterContent< Item >( {\n\tselection,\n\tactions,\n\tonChangeSelection,\n\tdata,\n\tgetItemId,\n}: ToolbarContentProps< Item > ) {\n\tconst [ actionInProgress, setActionInProgress ] = useState< string | null >(\n\t\tnull\n\t);\n\tconst footerContent = useRef< JSX.Element | null >( null );\n\n\tconst bulkActions = useMemo(\n\t\t() => actions.filter( ( action ) => action.supportsBulk ),\n\t\t[ actions ]\n\t);\n\tconst selectableItems = useMemo( () => {\n\t\treturn data.filter( ( item ) => {\n\t\t\treturn bulkActions.some(\n\t\t\t\t( action ) => ! action.isEligible || action.isEligible( item )\n\t\t\t);\n\t\t} );\n\t}, [ data, bulkActions ] );\n\n\tconst selectedItems = useMemo( () => {\n\t\treturn data.filter(\n\t\t\t( item ) =>\n\t\t\t\tselection.includes( getItemId( item ) ) &&\n\t\t\t\tselectableItems.includes( item )\n\t\t);\n\t}, [ selection, data, getItemId, selectableItems ] );\n\n\tconst actionsToShow = useMemo(\n\t\t() =>\n\t\t\tactions.filter( ( action ) => {\n\t\t\t\treturn (\n\t\t\t\t\taction.supportsBulk &&\n\t\t\t\t\taction.icon &&\n\t\t\t\t\tselectedItems.some(\n\t\t\t\t\t\t( item ) =>\n\t\t\t\t\t\t\t! action.isEligible || action.isEligible( item )\n\t\t\t\t\t)\n\t\t\t\t);\n\t\t\t} ),\n\t\t[ actions, selectedItems ]\n\t);\n\tif ( ! actionInProgress ) {\n\t\tif ( footerContent.current ) {\n\t\t\tfooterContent.current = null;\n\t\t}\n\t\treturn renderFooterContent(\n\t\t\tdata,\n\t\t\tactions,\n\t\t\tgetItemId,\n\t\t\tselection,\n\t\t\tactionsToShow,\n\t\t\tselectedItems,\n\t\t\tactionInProgress,\n\t\t\tsetActionInProgress,\n\t\t\tonChangeSelection\n\t\t);\n\t} else if ( ! footerContent.current ) {\n\t\tfooterContent.current = renderFooterContent(\n\t\t\tdata,\n\t\t\tactions,\n\t\t\tgetItemId,\n\t\t\tselection,\n\t\t\tactionsToShow,\n\t\t\tselectedItems,\n\t\t\tactionInProgress,\n\t\t\tsetActionInProgress,\n\t\t\tonChangeSelection\n\t\t);\n\t}\n\treturn footerContent.current;\n}\n\nexport function BulkActionsFooter() {\n\tconst {\n\t\tdata,\n\t\tselection,\n\t\tactions = EMPTY_ARRAY,\n\t\tonChangeSelection,\n\t\tgetItemId,\n\t} = useContext( DataViewsContext );\n\treturn (\n\t\t<FooterContent\n\t\t\tselection={ selection }\n\t\t\tonChangeSelection={ onChangeSelection }\n\t\t\tdata={ data }\n\t\t\tactions={ actions }\n\t\t\tgetItemId={ getItemId }\n\t\t/>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}

package/build-module/components/dataviews-filters/add-filter.js

@@ -15,9 +15,7 @@ import { forwardRef } from '@wordpress/element';
 import { unlock } from '../../lock-unlock';
 import { jsx as _jsx } from "react/jsx-runtime";
 const {
-  DropdownMenuV2: DropdownMenu,
-  DropdownMenuItemV2: DropdownMenuItem,
-  DropdownMenuItemLabelV2: DropdownMenuItemLabel
+  DropdownMenuV2
 } = unlock(componentsPrivateApis);
 export function AddFilterDropdownMenu({
   filters,
@@ -27,10 +25,10 @@ export function AddFilterDropdownMenu({
   trigger
 }) {
   const inactiveFilters = filters.filter(filter => !filter.isVisible);
-  return /*#__PURE__*/_jsx(DropdownMenu, {
+  return /*#__PURE__*/_jsx(DropdownMenuV2, {
     trigger: trigger,
     children: inactiveFilters.map(filter => {
-      return /*#__PURE__*/_jsx(DropdownMenuItem, {
+      return /*#__PURE__*/_jsx(DropdownMenuV2.Item, {
         onClick: () => {
           setOpenedFilter(filter.field);
           onChangeView({
@@ -43,7 +41,7 @@ export function AddFilterDropdownMenu({
             }]
           });
         },
-        children: /*#__PURE__*/_jsx(DropdownMenuItemLabel, {
+        children: /*#__PURE__*/_jsx(DropdownMenuV2.ItemLabel, {
           children: filter.name
         })
       }, filter.field);

package/build-module/components/dataviews-filters/add-filter.js.map

@@ -1 +1 @@
-{"version":3,"names":["privateApis","componentsPrivateApis","Button","__","forwardRef","unlock","jsx","_jsx","DropdownMenuV2","DropdownMenu","DropdownMenuItemV2","DropdownMenuItem","DropdownMenuItemLabelV2","DropdownMenuItemLabel","AddFilterDropdownMenu","filters","view","onChangeView","setOpenedFilter","trigger","inactiveFilters","filter","isVisible","children","map","onClick","field","page","value","undefined","operator","operators","name","AddFilter","ref","length","every","isPrimary","accessibleWhenDisabled","size","className","variant","disabled"],"sources":["@wordpress/dataviews/src/components/dataviews-filters/add-filter.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { Ref } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tprivateApis as componentsPrivateApis,\n\tButton,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\nimport type { NormalizedFilter, View } from '../../types';\n\nconst {\n\tDropdownMenuV2: DropdownMenu,\n\tDropdownMenuItemV2: DropdownMenuItem,\n\tDropdownMenuItemLabelV2: DropdownMenuItemLabel,\n} = unlock( componentsPrivateApis );\n\ninterface AddFilterProps {\n\tfilters: NormalizedFilter[];\n\tview: View;\n\tonChangeView: ( view: View ) => void;\n\tsetOpenedFilter: ( filter: string | null ) => void;\n}\n\nexport function AddFilterDropdownMenu( {\n\tfilters,\n\tview,\n\tonChangeView,\n\tsetOpenedFilter,\n\ttrigger,\n}: AddFilterProps & {\n\ttrigger: React.ReactNode;\n} ) {\n\tconst inactiveFilters = filters.filter( ( filter ) => ! filter.isVisible );\n\treturn (\n\t\t<DropdownMenu trigger={ trigger }>\n\t\t\t{ inactiveFilters.map( ( filter ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<DropdownMenuItem\n\t\t\t\t\t\tkey={ filter.field }\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\tsetOpenedFilter( filter.field );\n\t\t\t\t\t\t\tonChangeView( {\n\t\t\t\t\t\t\t\t...view,\n\t\t\t\t\t\t\t\tpage: 1,\n\t\t\t\t\t\t\t\tfilters: [\n\t\t\t\t\t\t\t\t\t...( view.filters || [] ),\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\tfield: filter.field,\n\t\t\t\t\t\t\t\t\t\tvalue: undefined,\n\t\t\t\t\t\t\t\t\t\toperator: filter.operators[ 0 ],\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} );\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t<DropdownMenuItemLabel>\n\t\t\t\t\t\t\t{ filter.name }\n\t\t\t\t\t\t</DropdownMenuItemLabel>\n\t\t\t\t\t</DropdownMenuItem>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</DropdownMenu>\n\t);\n}\n\nfunction AddFilter(\n\t{ filters, view, onChangeView, setOpenedFilter }: AddFilterProps,\n\tref: Ref< HTMLButtonElement >\n) {\n\tif ( ! filters.length || filters.every( ( { isPrimary } ) => isPrimary ) ) {\n\t\treturn null;\n\t}\n\tconst inactiveFilters = filters.filter( ( filter ) => ! filter.isVisible );\n\treturn (\n\t\t<AddFilterDropdownMenu\n\t\t\ttrigger={\n\t\t\t\t<Button\n\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\tclassName=\"dataviews-filters-button\"\n\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\tdisabled={ ! inactiveFilters.length }\n\t\t\t\t\tref={ ref }\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Add filter' ) }\n\t\t\t\t</Button>\n\t\t\t}\n\t\t\t{ ...{ filters, view, onChangeView, setOpenedFilter } }\n\t\t/>\n\t);\n}\n\nexport default forwardRef( AddFilter );\n"],"mappings":"AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SACCA,WAAW,IAAIC,qBAAqB,EACpCC,MAAM,QACA,uBAAuB;AAC9B,SAASC,EAAE,QAAQ,iBAAiB;AACpC,SAASC,UAAU,QAAQ,oBAAoB;;AAE/C;AACA;AACA;AACA,SAASC,MAAM,QAAQ,mBAAmB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAG3C,MAAM;EACLC,cAAc,EAAEC,YAAY;EAC5BC,kBAAkB,EAAEC,gBAAgB;EACpCC,uBAAuB,EAAEC;AAC1B,CAAC,GAAGR,MAAM,CAAEJ,qBAAsB,CAAC;AASnC,OAAO,SAASa,qBAAqBA,CAAE;EACtCC,OAAO;EACPC,IAAI;EACJC,YAAY;EACZC,eAAe;EACfC;AAGD,CAAC,EAAG;EACH,MAAMC,eAAe,GAAGL,OAAO,CAACM,MAAM,CAAIA,MAAM,IAAM,CAAEA,MAAM,CAACC,SAAU,CAAC;EAC1E,oBACCf,IAAA,CAACE,YAAY;IAACU,OAAO,EAAGA,OAAS;IAAAI,QAAA,EAC9BH,eAAe,CAACI,GAAG,CAAIH,MAAM,IAAM;MACpC,oBACCd,IAAA,CAACI,gBAAgB;QAEhBc,OAAO,EAAGA,CAAA,KAAM;UACfP,eAAe,CAAEG,MAAM,CAACK,KAAM,CAAC;UAC/BT,YAAY,CAAE;YACb,GAAGD,IAAI;YACPW,IAAI,EAAE,CAAC;YACPZ,OAAO,EAAE,CACR,IAAKC,IAAI,CAACD,OAAO,IAAI,EAAE,CAAE,EACzB;cACCW,KAAK,EAAEL,MAAM,CAACK,KAAK;cACnBE,KAAK,EAAEC,SAAS;cAChBC,QAAQ,EAAET,MAAM,CAACU,SAAS,CAAE,CAAC;YAC9B,CAAC;UAEH,CAAE,CAAC;QACJ,CAAG;QAAAR,QAAA,eAEHhB,IAAA,CAACM,qBAAqB;UAAAU,QAAA,EACnBF,MAAM,CAACW;QAAI,CACS;MAAC,GAnBlBX,MAAM,CAACK,KAoBI,CAAC;IAErB,CAAE;EAAC,CACU,CAAC;AAEjB;AAEA,SAASO,SAASA,CACjB;EAAElB,OAAO;EAAEC,IAAI;EAAEC,YAAY;EAAEC;AAAgC,CAAC,EAChEgB,GAA6B,EAC5B;EACD,IAAK,CAAEnB,OAAO,CAACoB,MAAM,IAAIpB,OAAO,CAACqB,KAAK,CAAE,CAAE;IAAEC;EAAU,CAAC,KAAMA,SAAU,CAAC,EAAG;IAC1E,OAAO,IAAI;EACZ;EACA,MAAMjB,eAAe,GAAGL,OAAO,CAACM,MAAM,CAAIA,MAAM,IAAM,CAAEA,MAAM,CAACC,SAAU,CAAC;EAC1E,oBACCf,IAAA,CAACO,qBAAqB;IACrBK,OAAO,eACNZ,IAAA,CAACL,MAAM;MACNoC,sBAAsB;MACtBC,IAAI,EAAC,SAAS;MACdC,SAAS,EAAC,0BAA0B;MACpCC,OAAO,EAAC,UAAU;MAClBC,QAAQ,EAAG,CAAEtB,eAAe,CAACe,MAAQ;MACrCD,GAAG,EAAGA,GAAK;MAAAX,QAAA,EAETpB,EAAE,CAAE,YAAa;IAAC,CACb,CACR;IACMY,OAAO;IAAEC,IAAI;IAAEC,YAAY;IAAEC;EAAe,CACnD,CAAC;AAEJ;AAEA,eAAed,UAAU,CAAE6B,SAAU,CAAC","ignoreList":[]}
+{"version":3,"names":["privateApis","componentsPrivateApis","Button","__","forwardRef","unlock","jsx","_jsx","DropdownMenuV2","AddFilterDropdownMenu","filters","view","onChangeView","setOpenedFilter","trigger","inactiveFilters","filter","isVisible","children","map","Item","onClick","field","page","value","undefined","operator","operators","ItemLabel","name","AddFilter","ref","length","every","isPrimary","accessibleWhenDisabled","size","className","variant","disabled"],"sources":["@wordpress/dataviews/src/components/dataviews-filters/add-filter.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { Ref } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tprivateApis as componentsPrivateApis,\n\tButton,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\nimport type { NormalizedFilter, View } from '../../types';\n\nconst { DropdownMenuV2 } = unlock( componentsPrivateApis );\n\ninterface AddFilterProps {\n\tfilters: NormalizedFilter[];\n\tview: View;\n\tonChangeView: ( view: View ) => void;\n\tsetOpenedFilter: ( filter: string | null ) => void;\n}\n\nexport function AddFilterDropdownMenu( {\n\tfilters,\n\tview,\n\tonChangeView,\n\tsetOpenedFilter,\n\ttrigger,\n}: AddFilterProps & {\n\ttrigger: React.ReactNode;\n} ) {\n\tconst inactiveFilters = filters.filter( ( filter ) => ! filter.isVisible );\n\treturn (\n\t\t<DropdownMenuV2 trigger={ trigger }>\n\t\t\t{ inactiveFilters.map( ( filter ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<DropdownMenuV2.Item\n\t\t\t\t\t\tkey={ filter.field }\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\tsetOpenedFilter( filter.field );\n\t\t\t\t\t\t\tonChangeView( {\n\t\t\t\t\t\t\t\t...view,\n\t\t\t\t\t\t\t\tpage: 1,\n\t\t\t\t\t\t\t\tfilters: [\n\t\t\t\t\t\t\t\t\t...( view.filters || [] ),\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\tfield: filter.field,\n\t\t\t\t\t\t\t\t\t\tvalue: undefined,\n\t\t\t\t\t\t\t\t\t\toperator: filter.operators[ 0 ],\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} );\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t<DropdownMenuV2.ItemLabel>\n\t\t\t\t\t\t\t{ filter.name }\n\t\t\t\t\t\t</DropdownMenuV2.ItemLabel>\n\t\t\t\t\t</DropdownMenuV2.Item>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</DropdownMenuV2>\n\t);\n}\n\nfunction AddFilter(\n\t{ filters, view, onChangeView, setOpenedFilter }: AddFilterProps,\n\tref: Ref< HTMLButtonElement >\n) {\n\tif ( ! filters.length || filters.every( ( { isPrimary } ) => isPrimary ) ) {\n\t\treturn null;\n\t}\n\tconst inactiveFilters = filters.filter( ( filter ) => ! filter.isVisible );\n\treturn (\n\t\t<AddFilterDropdownMenu\n\t\t\ttrigger={\n\t\t\t\t<Button\n\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\tclassName=\"dataviews-filters-button\"\n\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\tdisabled={ ! inactiveFilters.length }\n\t\t\t\t\tref={ ref }\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Add filter' ) }\n\t\t\t\t</Button>\n\t\t\t}\n\t\t\t{ ...{ filters, view, onChangeView, setOpenedFilter } }\n\t\t/>\n\t);\n}\n\nexport default forwardRef( AddFilter );\n"],"mappings":"AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SACCA,WAAW,IAAIC,qBAAqB,EACpCC,MAAM,QACA,uBAAuB;AAC9B,SAASC,EAAE,QAAQ,iBAAiB;AACpC,SAASC,UAAU,QAAQ,oBAAoB;;AAE/C;AACA;AACA;AACA,SAASC,MAAM,QAAQ,mBAAmB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAG3C,MAAM;EAAEC;AAAe,CAAC,GAAGH,MAAM,CAAEJ,qBAAsB,CAAC;AAS1D,OAAO,SAASQ,qBAAqBA,CAAE;EACtCC,OAAO;EACPC,IAAI;EACJC,YAAY;EACZC,eAAe;EACfC;AAGD,CAAC,EAAG;EACH,MAAMC,eAAe,GAAGL,OAAO,CAACM,MAAM,CAAIA,MAAM,IAAM,CAAEA,MAAM,CAACC,SAAU,CAAC;EAC1E,oBACCV,IAAA,CAACC,cAAc;IAACM,OAAO,EAAGA,OAAS;IAAAI,QAAA,EAChCH,eAAe,CAACI,GAAG,CAAIH,MAAM,IAAM;MACpC,oBACCT,IAAA,CAACC,cAAc,CAACY,IAAI;QAEnBC,OAAO,EAAGA,CAAA,KAAM;UACfR,eAAe,CAAEG,MAAM,CAACM,KAAM,CAAC;UAC/BV,YAAY,CAAE;YACb,GAAGD,IAAI;YACPY,IAAI,EAAE,CAAC;YACPb,OAAO,EAAE,CACR,IAAKC,IAAI,CAACD,OAAO,IAAI,EAAE,CAAE,EACzB;cACCY,KAAK,EAAEN,MAAM,CAACM,KAAK;cACnBE,KAAK,EAAEC,SAAS;cAChBC,QAAQ,EAAEV,MAAM,CAACW,SAAS,CAAE,CAAC;YAC9B,CAAC;UAEH,CAAE,CAAC;QACJ,CAAG;QAAAT,QAAA,eAEHX,IAAA,CAACC,cAAc,CAACoB,SAAS;UAAAV,QAAA,EACtBF,MAAM,CAACa;QAAI,CACY;MAAC,GAnBrBb,MAAM,CAACM,KAoBO,CAAC;IAExB,CAAE;EAAC,CACY,CAAC;AAEnB;AAEA,SAASQ,SAASA,CACjB;EAAEpB,OAAO;EAAEC,IAAI;EAAEC,YAAY;EAAEC;AAAgC,CAAC,EAChEkB,GAA6B,EAC5B;EACD,IAAK,CAAErB,OAAO,CAACsB,MAAM,IAAItB,OAAO,CAACuB,KAAK,CAAE,CAAE;IAAEC;EAAU,CAAC,KAAMA,SAAU,CAAC,EAAG;IAC1E,OAAO,IAAI;EACZ;EACA,MAAMnB,eAAe,GAAGL,OAAO,CAACM,MAAM,CAAIA,MAAM,IAAM,CAAEA,MAAM,CAACC,SAAU,CAAC;EAC1E,oBACCV,IAAA,CAACE,qBAAqB;IACrBK,OAAO,eACNP,IAAA,CAACL,MAAM;MACNiC,sBAAsB;MACtBC,IAAI,EAAC,SAAS;MACdC,SAAS,EAAC,0BAA0B;MACpCC,OAAO,EAAC,UAAU;MAClBC,QAAQ,EAAG,CAAExB,eAAe,CAACiB,MAAQ;MACrCD,GAAG,EAAGA,GAAK;MAAAb,QAAA,EAETf,EAAE,CAAE,YAAa;IAAC,CACb,CACR;IACMO,OAAO;IAAEC,IAAI;IAAEC,YAAY;IAAEC;EAAe,CACnD,CAAC;AAEJ;AAEA,eAAeT,UAAU,CAAE0B,SAAU,CAAC","ignoreList":[]}

package/build-module/components/dataviews-filters/search-widget.js

@@ -8,6 +8,7 @@ import removeAccents from 'remove-accents';
 /**
  * WordPress dependencies
  */
+import { useInstanceId } from '@wordpress/compose';
 import { __, sprintf } from '@wordpress/i18n';
 import { useState, useMemo, useDeferredValue } from '@wordpress/element';
 import { VisuallyHidden, Icon, privateApis as componentsPrivateApis } from '@wordpress/components';
@@ -23,7 +24,8 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 const {
   CompositeV2: Composite,
   CompositeItemV2: CompositeItem,
-  useCompositeStoreV2: useCompositeStore
+  CompositeHoverV2: CompositeHover,
+  CompositeTypeaheadV2: CompositeTypeahead
 } = unlock(componentsPrivateApis);
 const radioCheck = /*#__PURE__*/_jsx(SVG, {
   xmlns: "http://www.w3.org/2000/svg",
@@ -59,38 +61,46 @@ const getNewValue = (filterDefinition, currentFilter, value) => {
   }
   return [value];
 };
+function generateFilterElementCompositeItemId(prefix, filterElementValue) {
+  return `${prefix}-${filterElementValue}`;
+}
 function ListBox({
   view,
   filter,
   onChangeView
 }) {
-  const compositeStore = useCompositeStore({
-    virtualFocus: true,
-    focusLoop: true,
-    // When we have no or just one operator, we can set the first item as active.
-    // We do that by passing `undefined` to `defaultActiveId`. Otherwise, we set it to `null`,
-    // so the first item is not selected, since the focus is on the operators control.
-    defaultActiveId: filter.operators?.length === 1 ? undefined : null
-  });
+  const baseId = useInstanceId(ListBox, 'dataviews-filter-list-box');
+  const [activeCompositeId, setActiveCompositeId] = useState(
+  // When there are one or less operators, the first item is set as active
+  // (by setting the initial `activeId` to `undefined`).
+  // With 2 or more operators, the focus is moved on the operators control
+  // (by setting the initial `activeId` to `null`), meaning that there won't
+  // be an active item initially. Focus is then managed via the
+  // `onFocusVisible` callback.
+  filter.operators?.length === 1 ? undefined : null);
   const currentFilter = view.filters?.find(f => f.field === filter.field);
   const currentValue = getCurrentValue(filter, currentFilter);
   return /*#__PURE__*/_jsx(Composite, {
-    store: compositeStore,
+    virtualFocus: true,
+    focusLoop: true,
+    activeId: activeCompositeId,
+    setActiveId: setActiveCompositeId,
     role: "listbox",
     className: "dataviews-filters__search-widget-listbox",
     "aria-label": sprintf( /* translators: List of items for a filter. 1: Filter name. e.g.: "List of: Author". */
     __('List of: %1$s'), filter.name),
     onFocusVisible: () => {
-      if (!compositeStore.getState().activeId) {
-        compositeStore.move(compositeStore.first());
+      // `onFocusVisible` needs the `Composite` component to be focusable,
+      // which is implicitly achieved via the `virtualFocus: true` option
+      // in the `useCompositeStore` hook.
+      if (!activeCompositeId && filter.elements.length) {
+        setActiveCompositeId(generateFilterElementCompositeItemId(baseId, filter.elements[0].value));
       }
     },
-    render: /*#__PURE__*/_jsx(Ariakit.CompositeTypeahead, {
-      store: compositeStore
-    }),
-    children: filter.elements.map(element => /*#__PURE__*/_jsxs(Ariakit.CompositeHover, {
-      store: compositeStore,
+    render: /*#__PURE__*/_jsx(CompositeTypeahead, {}),
+    children: filter.elements.map(element => /*#__PURE__*/_jsxs(CompositeHover, {
       render: /*#__PURE__*/_jsx(CompositeItem, {
+        id: generateFilterElementCompositeItemId(baseId, element.value),
         render: /*#__PURE__*/_jsx("div", {
           "aria-label": element.label,
           role: "option",
@@ -146,7 +156,6 @@ function ComboboxList({
     return filter.elements.filter(item => normalizeSearchInput(item.label).includes(normalizedSearch));
   }, [filter.elements, deferredSearchValue]);
   return /*#__PURE__*/_jsxs(Ariakit.ComboboxProvider, {
-    resetValueOnSelect: false,
     selectedValue: currentValue,
     setSelectedValue: value => {
       var _view$filters3, _view$filters4;
@@ -193,6 +202,7 @@ function ComboboxList({
       alwaysVisible: true,
       children: [matches.map(element => {
         return /*#__PURE__*/_jsxs(Ariakit.ComboboxItem, {
+          resetValueOnSelect: false,
           value: element.value,
           className: "dataviews-filters__search-widget-listitem",
           hideOnClick: false,