@wordpress/dataviews 2.2.0 → 4.0.0

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

@@ -0,0 +1,108 @@
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+import { __experimentalHStack as HStack } from '@wordpress/components';
+import { useMemo, useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { default as DataViewsBulkActions } from '../dataviews-bulk-actions';
+import DataViewsBulkActionsToolbar from '../dataviews-bulk-actions-toolbar';
+import DataViewsContext from '../dataviews-context';
+import DataViewsFilters from '../dataviews-filters';
+import DataViewsLayout from '../dataviews-layout';
+import DataviewsPagination from '../dataviews-pagination';
+import DataViewsSearch from '../dataviews-search';
+import DataViewsViewConfig from '../dataviews-view-config';
+import { normalizeFields } from '../../normalize-fields';
+import DensityPicker from '../../layouts/grid/density-picker';
+import { LAYOUT_GRID } from '../../constants';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const defaultGetItemId = item => item.id;
+export default function DataViews({
+  view,
+  onChangeView,
+  fields,
+  search = true,
+  searchLabel = undefined,
+  actions = [],
+  data,
+  getItemId = defaultGetItemId,
+  isLoading = false,
+  paginationInfo,
+  defaultLayouts,
+  selection: selectionProperty,
+  onChangeSelection,
+  header
+}) {
+  const [selectionState, setSelectionState] = useState([]);
+  const [density, setDensity] = useState(0);
+  const isUncontrolled = selectionProperty === undefined || onChangeSelection === undefined;
+  const selection = isUncontrolled ? selectionState : selectionProperty;
+  const [openedFilter, setOpenedFilter] = useState(null);
+  function setSelectionWithChange(value) {
+    const newValue = typeof value === 'function' ? value(selection) : value;
+    if (isUncontrolled) {
+      setSelectionState(newValue);
+    }
+    if (onChangeSelection) {
+      onChangeSelection(newValue);
+    }
+  }
+  const _fields = useMemo(() => normalizeFields(fields), [fields]);
+  const _selection = useMemo(() => {
+    return selection.filter(id => data.some(item => getItemId(item) === id));
+  }, [selection, data, getItemId]);
+  return /*#__PURE__*/_jsx(DataViewsContext.Provider, {
+    value: {
+      view,
+      onChangeView,
+      fields: _fields,
+      actions,
+      data,
+      isLoading,
+      paginationInfo,
+      selection: _selection,
+      onChangeSelection: setSelectionWithChange,
+      openedFilter,
+      setOpenedFilter,
+      getItemId,
+      density
+    },
+    children: /*#__PURE__*/_jsxs("div", {
+      className: "dataviews-wrapper",
+      children: [/*#__PURE__*/_jsxs(HStack, {
+        alignment: "top",
+        justify: "start",
+        className: "dataviews__view-actions",
+        children: [/*#__PURE__*/_jsxs(HStack, {
+          justify: "start",
+          className: "dataviews-filters__container",
+          wrap: true,
+          children: [search && /*#__PURE__*/_jsx(DataViewsSearch, {
+            label: searchLabel
+          }), /*#__PURE__*/_jsx(DataViewsFilters, {})]
+        }), view.type === LAYOUT_GRID && /*#__PURE__*/_jsx(DensityPicker, {
+          density: density,
+          setDensity: setDensity
+        }), /*#__PURE__*/_jsx(DataViewsBulkActions, {}), /*#__PURE__*/_jsxs(HStack, {
+          spacing: 1,
+          expanded: false,
+          style: {
+            flexShrink: 0
+          },
+          children: [/*#__PURE__*/_jsx(DataViewsViewConfig, {
+            defaultLayouts: defaultLayouts
+          }), header]
+        })]
+      }), /*#__PURE__*/_jsx(DataViewsLayout, {}), /*#__PURE__*/_jsx(DataviewsPagination, {}), /*#__PURE__*/_jsx(DataViewsBulkActionsToolbar, {})]
+    })
+  });
+}
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__experimentalHStack","HStack","useMemo","useState","default","DataViewsBulkActions","DataViewsBulkActionsToolbar","DataViewsContext","DataViewsFilters","DataViewsLayout","DataviewsPagination","DataViewsSearch","DataViewsViewConfig","normalizeFields","DensityPicker","LAYOUT_GRID","jsx","_jsx","jsxs","_jsxs","defaultGetItemId","item","id","DataViews","view","onChangeView","fields","search","searchLabel","undefined","actions","data","getItemId","isLoading","paginationInfo","defaultLayouts","selection","selectionProperty","onChangeSelection","header","selectionState","setSelectionState","density","setDensity","isUncontrolled","openedFilter","setOpenedFilter","setSelectionWithChange","value","newValue","_fields","_selection","filter","some","Provider","children","className","alignment","justify","wrap","label","type","spacing","expanded","style","flexShrink"],"sources":["@wordpress/dataviews/src/components/dataviews/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ReactNode } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { __experimentalHStack as HStack } from '@wordpress/components';\nimport { useMemo, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { default as DataViewsBulkActions } from '../dataviews-bulk-actions';\nimport DataViewsBulkActionsToolbar from '../dataviews-bulk-actions-toolbar';\nimport DataViewsContext from '../dataviews-context';\nimport DataViewsFilters from '../dataviews-filters';\nimport DataViewsLayout from '../dataviews-layout';\nimport DataviewsPagination from '../dataviews-pagination';\nimport DataViewsSearch from '../dataviews-search';\nimport DataViewsViewConfig from '../dataviews-view-config';\nimport { normalizeFields } from '../../normalize-fields';\nimport type { Action, Field, View, SupportedLayouts } from '../../types';\nimport type { SelectionOrUpdater } from '../../private-types';\nimport DensityPicker from '../../layouts/grid/density-picker';\nimport { LAYOUT_GRID } from '../../constants';\n\ntype ItemWithId = { id: string };\n\ntype DataViewsProps< Item > = {\n\tview: View;\n\tonChangeView: ( view: View ) => void;\n\tfields: Field< Item >[];\n\tsearch?: boolean;\n\tsearchLabel?: string;\n\tactions?: Action< Item >[];\n\tdata: Item[];\n\tisLoading?: boolean;\n\tpaginationInfo: {\n\t\ttotalItems: number;\n\t\ttotalPages: number;\n\t};\n\tdefaultLayouts: SupportedLayouts;\n\tselection?: string[];\n\tonChangeSelection?: ( items: string[] ) => void;\n\theader?: ReactNode;\n} & ( Item extends ItemWithId\n\t? { getItemId?: ( item: Item ) => string }\n\t: { getItemId: ( item: Item ) => string } );\n\nconst defaultGetItemId = ( item: ItemWithId ) => item.id;\n\nexport default function DataViews< Item >( {\n\tview,\n\tonChangeView,\n\tfields,\n\tsearch = true,\n\tsearchLabel = undefined,\n\tactions = [],\n\tdata,\n\tgetItemId = defaultGetItemId,\n\tisLoading = false,\n\tpaginationInfo,\n\tdefaultLayouts,\n\tselection: selectionProperty,\n\tonChangeSelection,\n\theader,\n}: DataViewsProps< Item > ) {\n\tconst [ selectionState, setSelectionState ] = useState< string[] >( [] );\n\tconst [ density, setDensity ] = useState< number >( 0 );\n\tconst isUncontrolled =\n\t\tselectionProperty === undefined || onChangeSelection === undefined;\n\tconst selection = isUncontrolled ? selectionState : selectionProperty;\n\tconst [ openedFilter, setOpenedFilter ] = useState< string | null >( null );\n\tfunction setSelectionWithChange( value: SelectionOrUpdater ) {\n\t\tconst newValue =\n\t\t\ttypeof value === 'function' ? value( selection ) : value;\n\t\tif ( isUncontrolled ) {\n\t\t\tsetSelectionState( newValue );\n\t\t}\n\t\tif ( onChangeSelection ) {\n\t\t\tonChangeSelection( newValue );\n\t\t}\n\t}\n\tconst _fields = useMemo( () => normalizeFields( fields ), [ fields ] );\n\tconst _selection = useMemo( () => {\n\t\treturn selection.filter( ( id ) =>\n\t\t\tdata.some( ( item ) => getItemId( item ) === id )\n\t\t);\n\t}, [ selection, data, getItemId ] );\n\n\treturn (\n\t\t<DataViewsContext.Provider\n\t\t\tvalue={ {\n\t\t\t\tview,\n\t\t\t\tonChangeView,\n\t\t\t\tfields: _fields,\n\t\t\t\tactions,\n\t\t\t\tdata,\n\t\t\t\tisLoading,\n\t\t\t\tpaginationInfo,\n\t\t\t\tselection: _selection,\n\t\t\t\tonChangeSelection: setSelectionWithChange,\n\t\t\t\topenedFilter,\n\t\t\t\tsetOpenedFilter,\n\t\t\t\tgetItemId,\n\t\t\t\tdensity,\n\t\t\t} }\n\t\t>\n\t\t\t<div className=\"dataviews-wrapper\">\n\t\t\t\t<HStack\n\t\t\t\t\talignment=\"top\"\n\t\t\t\t\tjustify=\"start\"\n\t\t\t\t\tclassName=\"dataviews__view-actions\"\n\t\t\t\t>\n\t\t\t\t\t<HStack\n\t\t\t\t\t\tjustify=\"start\"\n\t\t\t\t\t\tclassName=\"dataviews-filters__container\"\n\t\t\t\t\t\twrap\n\t\t\t\t\t>\n\t\t\t\t\t\t{ search && <DataViewsSearch label={ searchLabel } /> }\n\t\t\t\t\t\t<DataViewsFilters />\n\t\t\t\t\t</HStack>\n\t\t\t\t\t{ view.type === LAYOUT_GRID && (\n\t\t\t\t\t\t<DensityPicker\n\t\t\t\t\t\t\tdensity={ density }\n\t\t\t\t\t\t\tsetDensity={ setDensity }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t<DataViewsBulkActions />\n\t\t\t\t\t<HStack\n\t\t\t\t\t\tspacing={ 1 }\n\t\t\t\t\t\texpanded={ false }\n\t\t\t\t\t\tstyle={ { flexShrink: 0 } }\n\t\t\t\t\t>\n\t\t\t\t\t\t<DataViewsViewConfig\n\t\t\t\t\t\t\tdefaultLayouts={ defaultLayouts }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{ header }\n\t\t\t\t\t</HStack>\n\t\t\t\t</HStack>\n\t\t\t\t<DataViewsLayout />\n\t\t\t\t<DataviewsPagination />\n\t\t\t\t<DataViewsBulkActionsToolbar />\n\t\t\t</div>\n\t\t</DataViewsContext.Provider>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -3,13 +3,15 @@
  */
 import { privateApis as componentsPrivateApis, Button, Modal } from '@wordpress/components';
 import { __, sprintf, _n } from '@wordpress/i18n';
-import { useMemo, useState, useCallback } from '@wordpress/element';
+import { useMemo, useState, useCallback, useContext } from '@wordpress/element';
 import { useRegistry } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
-import { unlock } from './lock-unlock';
+import DataViewsContext from '../dataviews-context';
+import { LAYOUT_TABLE, LAYOUT_GRID } from '../../constants';
+import { unlock } from '../../lock-unlock';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -56,7 +58,7 @@ function ActionWithModal({
     title: !hideModalHeader ? label : undefined,
     __experimentalHideHeader: !!hideModalHeader,
     onRequestClose: onCloseModal,
-    overlayClassName: "dataviews-action-modal",
+    overlayClassName: "dataviews-bulk-actions__modal",
     children: /*#__PURE__*/_jsx(RenderModal, {
       items: eligibleItems,
       closeModal: onCloseModal,
@@ -75,7 +77,6 @@ function BulkActionItem({
   }, [action, selectedItems]);
   const shouldShowModal = ('RenderModal' in action);
   return /*#__PURE__*/_jsx(DropdownMenuItem, {
-    disabled: eligibleItems.length === 0,
     hideOnClick: !shouldShowModal,
     onClick: async () => {
       if (shouldShowModal) {
@@ -86,7 +87,7 @@ function BulkActionItem({
         });
       }
     },
-    suffix: eligibleItems.length > 0 ? eligibleItems.length : undefined,
+    suffix: eligibleItems.length,
     children: action.label
   }, action.id);
 }
@@ -95,9 +96,17 @@ function ActionsMenuGroup({
   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: actions.map(action => /*#__PURE__*/_jsx(BulkActionItem, {
+      children: elligibleActions.map(action => /*#__PURE__*/_jsx(BulkActionItem, {
         action: action,
         selectedItems: selectedItems,
         setActionWithModal: setActionWithModal
@@ -105,13 +114,14 @@ function ActionsMenuGroup({
     }), /*#__PURE__*/_jsx(DropdownMenuSeparator, {})]
   });
 }
-export default function BulkActions({
-  data,
-  actions,
-  selection,
-  onSelectionChange,
-  getItemId
-}) {
+function _BulkActions() {
+  const {
+    data,
+    actions = [],
+    selection,
+    onChangeSelection,
+    getItemId
+  } = useContext(DataViewsContext);
   const bulkActions = useMemo(() => actions.filter(action => action.supportsBulk), [actions]);
   const [isMenuOpen, onMenuOpenChange] = useState(false);
   const [actionWithModal, setActionWithModal] = useState();
@@ -137,7 +147,7 @@ export default function BulkActions({
         minWidth: '240px'
       },
       trigger: /*#__PURE__*/_jsx(Button, {
-        className: "dataviews-bulk-edit-button",
+        className: "dataviews-bulk-actions__edit-button",
         __next40pxDefaultSize: true,
         variant: "tertiary",
         size: "compact",
@@ -153,7 +163,7 @@ export default function BulkActions({
           disabled: areAllSelected,
           hideOnClick: false,
           onClick: () => {
-            onSelectionChange(selectableItems);
+            onChangeSelection(selectableItems.map(item => getItemId(item)));
           },
           suffix: numberSelectableItems,
           children: __('Select all')
@@ -161,7 +171,7 @@ export default function BulkActions({
           disabled: selection.length === 0,
           hideOnClick: false,
           onClick: () => {
-            onSelectionChange([]);
+            onChangeSelection([]);
           },
           children: __('Deselect')
         })]
@@ -174,4 +184,16 @@ export default function BulkActions({
     })]
   });
 }
-//# sourceMappingURL=bulk-actions.js.map
+export default function BulkActions() {
+  const {
+    data,
+    actions = [],
+    view
+  } = useContext(DataViewsContext);
+  const hasPossibleBulkAction = useSomeItemHasAPossibleBulkAction(actions, data);
+  if (![LAYOUT_TABLE, LAYOUT_GRID].includes(view.type) || !hasPossibleBulkAction) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(_BulkActions, {});
+}
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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","label","title","__experimentalHideHeader","onRequestClose","overlayClassName","children","items","closeModal","onActionPerformed","BulkActionItem","registry","shouldShowModal","hideOnClick","onClick","callback","suffix","length","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\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":[]}

package/build-module/{bulk-actions-toolbar.js → components/dataviews-bulk-actions-toolbar/index.js}

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { ToolbarButton, Toolbar, ToolbarGroup, __unstableMotion as motion, __unstableAnimatePresence as AnimatePresence } from '@wordpress/components';
-import { useMemo, useState, useRef } from '@wordpress/element';
+import { useMemo, useState, useRef, useContext } from '@wordpress/element';
 import { _n, sprintf, __ } from '@wordpress/i18n';
 import { closeSmall } from '@wordpress/icons';
 import { useReducedMotion } from '@wordpress/compose';
@@ -11,7 +11,10 @@ import { useRegistry } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import { ActionWithModal } from './item-actions';
+import { useSomeItemHasAPossibleBulkAction } from '../dataviews-bulk-actions';
+import DataViewsContext from '../dataviews-context';
+import { ActionWithModal } from '../dataviews-item-actions';
+import { LAYOUT_GRID, LAYOUT_TABLE } from '../../constants';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -56,7 +59,6 @@ function ActionTrigger({
     size: "compact",
     onClick: onClick,
     isBusy: isBusy,
-    __experimentalIsFocusable: true,
     tooltipPosition: "top"
   });
 }
@@ -92,11 +94,11 @@ function ActionButton({
     isBusy: actionInProgress === action.id
   }, action.id);
 }
-function renderToolbarContent(selection, actionsToShow, selectedItems, actionInProgress, setActionInProgress, onSelectionChange) {
+function renderToolbarContent(selection, actionsToShow, selectedItems, actionInProgress, setActionInProgress, onChangeSelection) {
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(ToolbarGroup, {
       children: /*#__PURE__*/_jsx("div", {
-        className: "dataviews-bulk-actions__selection-count",
+        className: "dataviews-bulk-actions-toolbar__selection-count",
         children: selection.length === 1 ? __('1 item selected') : sprintf(
         // translators: %s: Total number of selected items.
         _n('%s item selected', '%s items selected', selection.length), selection.length)
@@ -118,7 +120,7 @@ function renderToolbarContent(selection, actionsToShow, selectedItems, actionInP
         label: __('Cancel'),
         disabled: !!actionInProgress,
         onClick: () => {
-          onSelectionChange(EMPTY_ARRAY);
+          onChangeSelection(EMPTY_ARRAY);
         }
       })
     })]
@@ -128,7 +130,7 @@ function ToolbarContent({
   selection,
   actionsToShow,
   selectedItems,
-  onSelectionChange
+  onChangeSelection
 }) {
   const [actionInProgress, setActionInProgress] = useState(null);
   const buttons = useRef(null);
@@ -136,19 +138,20 @@ function ToolbarContent({
     if (buttons.current) {
       buttons.current = null;
     }
-    return renderToolbarContent(selection, actionsToShow, selectedItems, actionInProgress, setActionInProgress, onSelectionChange);
+    return renderToolbarContent(selection, actionsToShow, selectedItems, actionInProgress, setActionInProgress, onChangeSelection);
   } else if (!buttons.current) {
-    buttons.current = renderToolbarContent(selection, actionsToShow, selectedItems, actionInProgress, setActionInProgress, onSelectionChange);
+    buttons.current = renderToolbarContent(selection, actionsToShow, selectedItems, actionInProgress, setActionInProgress, onChangeSelection);
   }
   return buttons.current;
 }
-export default function BulkActionsToolbar({
-  data,
-  selection,
-  actions = EMPTY_ARRAY,
-  onSelectionChange,
-  getItemId
-}) {
+function _BulkActionsToolbar() {
+  const {
+    data,
+    selection,
+    actions = EMPTY_ARRAY,
+    onChangeSelection,
+    getItemId
+  } = useContext(DataViewsContext);
   const isReducedMotion = useReducedMotion();
   const selectedItems = useMemo(() => {
     return data.filter(item => selection.includes(getItemId(item)));
@@ -167,20 +170,32 @@ export default function BulkActionsToolbar({
       animate: "open",
       exit: "exit",
       variants: isReducedMotion ? undefined : SNACKBAR_VARIANTS,
-      className: "dataviews-bulk-actions",
+      className: "dataviews-bulk-actions-toolbar",
       children: /*#__PURE__*/_jsx(Toolbar, {
         label: __('Bulk actions'),
         children: /*#__PURE__*/_jsx("div", {
-          className: "dataviews-bulk-actions-toolbar-wrapper",
+          className: "dataviews-bulk-actions-toolbar__wrapper",
           children: /*#__PURE__*/_jsx(ToolbarContent, {
             selection: selection,
             actionsToShow: actionsToShow,
             selectedItems: selectedItems,
-            onSelectionChange: onSelectionChange
+            onChangeSelection: onChangeSelection
           })
         })
       })
     })
   });
 }
-//# sourceMappingURL=bulk-actions-toolbar.js.map
+export default function BulkActionsToolbar() {
+  const {
+    data,
+    actions = [],
+    view
+  } = useContext(DataViewsContext);
+  const hasPossibleBulkAction = useSomeItemHasAPossibleBulkAction(actions, data);
+  if (![LAYOUT_TABLE, LAYOUT_GRID].includes(view.type) || !hasPossibleBulkAction) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(_BulkActionsToolbar, {});
+}
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["ToolbarButton","Toolbar","ToolbarGroup","__unstableMotion","motion","__unstableAnimatePresence","AnimatePresence","useMemo","useState","useRef","useContext","_n","sprintf","__","closeSmall","useReducedMotion","useRegistry","useSomeItemHasAPossibleBulkAction","DataViewsContext","ActionWithModal","LAYOUT_GRID","LAYOUT_TABLE","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","SNACKBAR_VARIANTS","init","bottom","open","transition","type","duration","ease","exit","opacity","ActionTrigger","action","onClick","isBusy","items","label","disabled","icon","isDestructive","size","tooltipPosition","EMPTY_ARRAY","ActionButton","selectedItems","actionInProgress","setActionInProgress","registry","selectedEligibleItems","filter","item","isEligible","id","callback","renderToolbarContent","selection","actionsToShow","onChangeSelection","children","className","length","map","showTooltip","ToolbarContent","buttons","current","_BulkActionsToolbar","data","actions","getItemId","isReducedMotion","includes","supportsBulk","some","div","layout","initial","animate","variants","undefined","BulkActionsToolbar","view","hasPossibleBulkAction"],"sources":["@wordpress/dataviews/src/components/dataviews-bulk-actions-toolbar/index.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tToolbarButton,\n\tToolbar,\n\tToolbarGroup,\n\t__unstableMotion as motion,\n\t__unstableAnimatePresence as AnimatePresence,\n} from '@wordpress/components';\nimport { useMemo, useState, useRef, useContext } from '@wordpress/element';\nimport { _n, sprintf, __ } from '@wordpress/i18n';\nimport { closeSmall } from '@wordpress/icons';\nimport { useReducedMotion } from '@wordpress/compose';\nimport { useRegistry } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { useSomeItemHasAPossibleBulkAction } from '../dataviews-bulk-actions';\nimport DataViewsContext from '../dataviews-context';\nimport { ActionWithModal } from '../dataviews-item-actions';\nimport { LAYOUT_GRID, LAYOUT_TABLE } from '../../constants';\nimport type { Action } from '../../types';\nimport type { ActionTriggerProps } from '../dataviews-item-actions';\nimport type { SetSelection } from '../../private-types';\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\tactionsToShow: Action< Item >[];\n\tselectedItems: Item[];\n\tonChangeSelection: SetSelection;\n}\n\nconst SNACKBAR_VARIANTS = {\n\tinit: {\n\t\tbottom: -48,\n\t},\n\topen: {\n\t\tbottom: 24,\n\t\ttransition: {\n\t\t\tbottom: { type: 'tween', duration: 0.2, ease: [ 0, 0, 0.2, 1 ] },\n\t\t},\n\t},\n\texit: {\n\t\topacity: 0,\n\t\tbottom: 24,\n\t\ttransition: {\n\t\t\topacity: { type: 'tween', duration: 0.2, ease: [ 0, 0, 0.2, 1 ] },\n\t\t},\n\t},\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<ToolbarButton\n\t\t\tdisabled={ isBusy }\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={ () => {\n\t\t\t\tsetActionInProgress( action.id );\n\t\t\t\taction.callback( selectedItems, {\n\t\t\t\t\tregistry,\n\t\t\t\t} );\n\t\t\t} }\n\t\t\titems={ selectedEligibleItems }\n\t\t\tisBusy={ actionInProgress === action.id }\n\t\t/>\n\t);\n}\n\nfunction renderToolbarContent< Item >(\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\treturn (\n\t\t<>\n\t\t\t<ToolbarGroup>\n\t\t\t\t<div className=\"dataviews-bulk-actions-toolbar__selection-count\">\n\t\t\t\t\t{ selection.length === 1\n\t\t\t\t\t\t? __( '1 item selected' )\n\t\t\t\t\t\t: sprintf(\n\t\t\t\t\t\t\t\t// translators: %s: Total number of selected items.\n\t\t\t\t\t\t\t\t_n(\n\t\t\t\t\t\t\t\t\t'%s item selected',\n\t\t\t\t\t\t\t\t\t'%s items selected',\n\t\t\t\t\t\t\t\t\tselection.length\n\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\tselection.length\n\t\t\t\t\t\t  ) }\n\t\t\t\t</div>\n\t\t\t</ToolbarGroup>\n\t\t\t<ToolbarGroup>\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</ToolbarGroup>\n\t\t\t<ToolbarGroup>\n\t\t\t\t<ToolbarButton\n\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\tshowTooltip\n\t\t\t\t\ttooltipPosition=\"top\"\n\t\t\t\t\tlabel={ __( 'Cancel' ) }\n\t\t\t\t\tdisabled={ !! actionInProgress }\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tonChangeSelection( EMPTY_ARRAY );\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t</ToolbarGroup>\n\t\t</>\n\t);\n}\n\nfunction ToolbarContent< Item >( {\n\tselection,\n\tactionsToShow,\n\tselectedItems,\n\tonChangeSelection,\n}: ToolbarContentProps< Item > ) {\n\tconst [ actionInProgress, setActionInProgress ] = useState< string | null >(\n\t\tnull\n\t);\n\tconst buttons = useRef< JSX.Element | null >( null );\n\tif ( ! actionInProgress ) {\n\t\tif ( buttons.current ) {\n\t\t\tbuttons.current = null;\n\t\t}\n\t\treturn renderToolbarContent(\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 ( ! buttons.current ) {\n\t\tbuttons.current = renderToolbarContent(\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 buttons.current;\n}\n\nfunction _BulkActionsToolbar() {\n\tconst {\n\t\tdata,\n\t\tselection,\n\t\tactions = EMPTY_ARRAY,\n\t\tonChangeSelection,\n\t\tgetItemId,\n\t} = useContext( DataViewsContext );\n\tconst isReducedMotion = useReducedMotion();\n\tconst selectedItems = useMemo( () => {\n\t\treturn data.filter( ( item ) =>\n\t\t\tselection.includes( getItemId( item ) )\n\t\t);\n\t}, [ selection, data, getItemId ] );\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\n\tif (\n\t\t( selection && selection.length === 0 ) ||\n\t\tactionsToShow.length === 0\n\t) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<AnimatePresence>\n\t\t\t<motion.div\n\t\t\t\tlayout={ ! isReducedMotion } // See https://www.framer.com/docs/animation/#layout-animations\n\t\t\t\tinitial=\"init\"\n\t\t\t\tanimate=\"open\"\n\t\t\t\texit=\"exit\"\n\t\t\t\tvariants={ isReducedMotion ? undefined : SNACKBAR_VARIANTS }\n\t\t\t\tclassName=\"dataviews-bulk-actions-toolbar\"\n\t\t\t>\n\t\t\t\t<Toolbar label={ __( 'Bulk actions' ) }>\n\t\t\t\t\t<div className=\"dataviews-bulk-actions-toolbar__wrapper\">\n\t\t\t\t\t\t<ToolbarContent\n\t\t\t\t\t\t\tselection={ selection }\n\t\t\t\t\t\t\tactionsToShow={ actionsToShow }\n\t\t\t\t\t\t\tselectedItems={ selectedItems }\n\t\t\t\t\t\t\tonChangeSelection={ onChangeSelection }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</Toolbar>\n\t\t\t</motion.div>\n\t\t</AnimatePresence>\n\t);\n}\n\nexport default function BulkActionsToolbar() {\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 <_BulkActionsToolbar />;\n}\n"],"mappings":"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","ignoreList":[]}

package/build-module/components/dataviews-context/index.js

@@ -0,0 +1,30 @@
+/**
+ * WordPress dependencies
+ */
+import { createContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+
+import { LAYOUT_TABLE } from '../../constants';
+const DataViewsContext = createContext({
+  view: {
+    type: LAYOUT_TABLE
+  },
+  onChangeView: () => {},
+  fields: [],
+  data: [],
+  paginationInfo: {
+    totalItems: 0,
+    totalPages: 0
+  },
+  selection: [],
+  onChangeSelection: () => {},
+  setOpenedFilter: () => {},
+  openedFilter: null,
+  getItemId: item => item.id,
+  density: 0
+});
+export default DataViewsContext;
+//# sourceMappingURL=index.js.map

package/build-module/components/dataviews-context/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createContext","LAYOUT_TABLE","DataViewsContext","view","type","onChangeView","fields","data","paginationInfo","totalItems","totalPages","selection","onChangeSelection","setOpenedFilter","openedFilter","getItemId","item","id","density"],"sources":["@wordpress/dataviews/src/components/dataviews-context/index.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { View, Action, NormalizedField } from '../../types';\nimport type { SetSelection } from '../../private-types';\nimport { LAYOUT_TABLE } from '../../constants';\n\ntype DataViewsContextType< Item > = {\n\tview: View;\n\tonChangeView: ( view: View ) => void;\n\tfields: NormalizedField< Item >[];\n\tactions?: Action< Item >[];\n\tdata: Item[];\n\tisLoading?: boolean;\n\tpaginationInfo: {\n\t\ttotalItems: number;\n\t\ttotalPages: number;\n\t};\n\tselection: string[];\n\tonChangeSelection: SetSelection;\n\topenedFilter: string | null;\n\tsetOpenedFilter: ( openedFilter: string | null ) => void;\n\tgetItemId: ( item: Item ) => string;\n\tdensity: number;\n};\n\nconst DataViewsContext = createContext< DataViewsContextType< any > >( {\n\tview: { type: LAYOUT_TABLE },\n\tonChangeView: () => {},\n\tfields: [],\n\tdata: [],\n\tpaginationInfo: {\n\t\ttotalItems: 0,\n\t\ttotalPages: 0,\n\t},\n\tselection: [],\n\tonChangeSelection: () => {},\n\tsetOpenedFilter: () => {},\n\topenedFilter: null,\n\tgetItemId: ( item ) => item.id,\n\tdensity: 0,\n} );\n\nexport default DataViewsContext;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,aAAa,QAAQ,oBAAoB;;AAElD;AACA;AACA;;AAGA,SAASC,YAAY,QAAQ,iBAAiB;AAqB9C,MAAMC,gBAAgB,GAAGF,aAAa,CAAiC;EACtEG,IAAI,EAAE;IAAEC,IAAI,EAAEH;EAAa,CAAC;EAC5BI,YAAY,EAAEA,CAAA,KAAM,CAAC,CAAC;EACtBC,MAAM,EAAE,EAAE;EACVC,IAAI,EAAE,EAAE;EACRC,cAAc,EAAE;IACfC,UAAU,EAAE,CAAC;IACbC,UAAU,EAAE;EACb,CAAC;EACDC,SAAS,EAAE,EAAE;EACbC,iBAAiB,EAAEA,CAAA,KAAM,CAAC,CAAC;EAC3BC,eAAe,EAAEA,CAAA,KAAM,CAAC,CAAC;EACzBC,YAAY,EAAE,IAAI;EAClBC,SAAS,EAAIC,IAAI,IAAMA,IAAI,CAACC,EAAE;EAC9BC,OAAO,EAAE;AACV,CAAE,CAAC;AAEH,eAAehB,gBAAgB","ignoreList":[]}

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

@@ -12,7 +12,7 @@ import { forwardRef } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { unlock } from './lock-unlock';
+import { unlock } from '../../lock-unlock';
 import { jsx as _jsx } from "react/jsx-runtime";
 const {
   DropdownMenuV2: DropdownMenu,
@@ -33,9 +33,9 @@ function AddFilter({
   const inactiveFilters = filters.filter(filter => !filter.isVisible);
   return /*#__PURE__*/_jsx(DropdownMenu, {
     trigger: /*#__PURE__*/_jsx(Button, {
-      __experimentalIsFocusable: true,
+      accessibleWhenDisabled: true,
       size: "compact",
-      className: "dataviews-filters-button",
+      className: "dataviews-filters__button",
       variant: "tertiary",
       disabled: !inactiveFilters.length,
       ref: ref,

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

@@ -0,0 +1 @@
+{"version":3,"names":["privateApis","componentsPrivateApis","Button","__","forwardRef","unlock","jsx","_jsx","DropdownMenuV2","DropdownMenu","DropdownMenuItemV2","DropdownMenuItem","DropdownMenuItemLabelV2","DropdownMenuItemLabel","AddFilter","filters","view","onChangeView","setOpenedFilter","ref","length","every","isPrimary","inactiveFilters","filter","isVisible","trigger","accessibleWhenDisabled","size","className","variant","disabled","children","map","onClick","field","page","value","undefined","operator","operators","name"],"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\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<DropdownMenu\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>\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\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,SAASa,SAASA,CACjB;EAAEC,OAAO;EAAEC,IAAI;EAAEC,YAAY;EAAEC;AAAgC,CAAC,EAChEC,GAA6B,EAC5B;EACD,IAAK,CAAEJ,OAAO,CAACK,MAAM,IAAIL,OAAO,CAACM,KAAK,CAAE,CAAE;IAAEC;EAAU,CAAC,KAAMA,SAAU,CAAC,EAAG;IAC1E,OAAO,IAAI;EACZ;EACA,MAAMC,eAAe,GAAGR,OAAO,CAACS,MAAM,CAAIA,MAAM,IAAM,CAAEA,MAAM,CAACC,SAAU,CAAC;EAC1E,oBACClB,IAAA,CAACE,YAAY;IACZiB,OAAO,eACNnB,IAAA,CAACL,MAAM;MACNyB,sBAAsB;MACtBC,IAAI,EAAC,SAAS;MACdC,SAAS,EAAC,2BAA2B;MACrCC,OAAO,EAAC,UAAU;MAClBC,QAAQ,EAAG,CAAER,eAAe,CAACH,MAAQ;MACrCD,GAAG,EAAGA,GAAK;MAAAa,QAAA,EAET7B,EAAE,CAAE,YAAa;IAAC,CACb,CACR;IAAA6B,QAAA,EAECT,eAAe,CAACU,GAAG,CAAIT,MAAM,IAAM;MACpC,oBACCjB,IAAA,CAACI,gBAAgB;QAEhBuB,OAAO,EAAGA,CAAA,KAAM;UACfhB,eAAe,CAAEM,MAAM,CAACW,KAAM,CAAC;UAC/BlB,YAAY,CAAE;YACb,GAAGD,IAAI;YACPoB,IAAI,EAAE,CAAC;YACPrB,OAAO,EAAE,CACR,IAAKC,IAAI,CAACD,OAAO,IAAI,EAAE,CAAE,EACzB;cACCoB,KAAK,EAAEX,MAAM,CAACW,KAAK;cACnBE,KAAK,EAAEC,SAAS;cAChBC,QAAQ,EAAEf,MAAM,CAACgB,SAAS,CAAE,CAAC;YAC9B,CAAC;UAEH,CAAE,CAAC;QACJ,CAAG;QAAAR,QAAA,eAEHzB,IAAA,CAACM,qBAAqB;UAAAmB,QAAA,EACnBR,MAAM,CAACiB;QAAI,CACS;MAAC,GAnBlBjB,MAAM,CAACW,KAoBI,CAAC;IAErB,CAAE;EAAC,CACU,CAAC;AAEjB;AAEA,eAAe/B,UAAU,CAAEU,SAAU,CAAC","ignoreList":[]}

package/build-module/{filter-summary.js → components/dataviews-filters/filter-summary.js}

@@ -16,7 +16,7 @@ const SPACE = ' ';
  * Internal dependencies
  */
 import SearchWidget from './search-widget';
-import { OPERATORS, OPERATOR_IS, OPERATOR_IS_NOT, OPERATOR_IS_ANY, OPERATOR_IS_NONE, OPERATOR_IS_ALL, OPERATOR_IS_NOT_ALL } from './constants';
+import { OPERATORS, OPERATOR_IS, OPERATOR_IS_NOT, OPERATOR_IS_ANY, OPERATOR_IS_NONE, OPERATOR_IS_ALL, OPERATOR_IS_NOT_ALL } from '../../constants';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const FilterText = ({
@@ -29,10 +29,10 @@ const FilterText = ({
   }
   const filterTextWrappers = {
     Name: /*#__PURE__*/_jsx("span", {
-      className: "dataviews-filter-summary__filter-text-name"
+      className: "dataviews-filters__summary-filter-text-name"
     }),
     Value: /*#__PURE__*/_jsx("span", {
-      className: "dataviews-filter-summary__filter-text-value"
+      className: "dataviews-filters__summary-filter-text-value"
     })
   };
   if (filterInView?.operator === OPERATOR_IS_ANY) {
@@ -71,22 +71,23 @@ function OperatorSelector({
     value: operator,
     label: OPERATORS[operator]?.label
   }));
-  const currentFilter = view.filters.find(_filter => _filter.field === filter.field);
+  const currentFilter = view.filters?.find(_filter => _filter.field === filter.field);
   const value = currentFilter?.operator || filter.operators[0];
   return operatorOptions.length > 1 && /*#__PURE__*/_jsxs(HStack, {
     spacing: 2,
     justify: "flex-start",
-    className: "dataviews-filter-summary__operators-container",
+    className: "dataviews-filters__summary-operators-container",
     children: [/*#__PURE__*/_jsx(FlexItem, {
-      className: "dataviews-filter-summary__operators-filter-name",
+      className: "dataviews-filters__summary-operators-filter-name",
       children: filter.name
     }), /*#__PURE__*/_jsx(SelectControl, {
       label: __('Conditions'),
       value: value,
       options: operatorOptions,
       onChange: newValue => {
+        var _view$filters, _view$filters2;
         const operator = newValue;
-        const newFilters = currentFilter ? [...view.filters.map(_filter => {
+        const newFilters = currentFilter ? [...((_view$filters = view.filters) !== null && _view$filters !== void 0 ? _view$filters : []).map(_filter => {
           if (_filter.field === filter.field) {
             return {
               ..._filter,
@@ -94,7 +95,7 @@ function OperatorSelector({
             };
           }
           return _filter;
-        })] : [...view.filters, {
+        })] : [...((_view$filters2 = view.filters) !== null && _view$filters2 !== void 0 ? _view$filters2 : []), {
           field: filter.field,
           operator,
           value: undefined
@@ -122,7 +123,7 @@ export default function FilterSummary({
     view,
     onChangeView
   } = commonProps;
-  const filterInView = view.filters.find(f => f.field === filter.field);
+  const filterInView = view.filters?.find(f => f.field === filter.field);
   const activeElements = filter.elements.filter(element => {
     if (filter.singleSelection) {
       return element.value === filterInView?.value;
@@ -134,7 +135,7 @@ export default function FilterSummary({
   const canResetOrRemove = !isPrimary || hasValues;
   return /*#__PURE__*/_jsx(Dropdown, {
     defaultOpen: openedFilter === filter.field,
-    contentClassName: "dataviews-filter-summary__popover",
+    contentClassName: "dataviews-filters__summary-popover",
     popoverProps: {
       placement: 'bottom-start',
       role: 'dialog'
@@ -146,13 +147,13 @@ export default function FilterSummary({
       isOpen,
       onToggle
     }) => /*#__PURE__*/_jsxs("div", {
-      className: "dataviews-filter-summary__chip-container",
+      className: "dataviews-filters__summary-chip-container",
       children: [/*#__PURE__*/_jsx(Tooltip, {
         text: sprintf( /* translators: 1: Filter name. */
         __('Filter by: %1$s'), filter.name.toLowerCase()),
         placement: "top",
         children: /*#__PURE__*/_jsx("div", {
-          className: clsx('dataviews-filter-summary__chip', {
+          className: clsx('dataviews-filters__summary-chip', {
             'has-reset': canResetOrRemove,
             'has-values': hasValues
           }),
@@ -178,14 +179,14 @@ export default function FilterSummary({
         text: isPrimary ? __('Reset') : __('Remove'),
         placement: "top",
         children: /*#__PURE__*/_jsx("button", {
-          className: clsx('dataviews-filter-summary__chip-remove', {
+          className: clsx('dataviews-filters__summary-chip-remove', {
             'has-values': hasValues
           }),
           onClick: () => {
             onChangeView({
               ...view,
               page: 1,
-              filters: view.filters.filter(_filter => _filter.field !== filter.field)
+              filters: view.filters?.filter(_filter => _filter.field !== filter.field)
             });
             // If the filter is not primary and can be removed, it will be added
             // back to the available filters from `Add filter` component.