@wordpress/dataviews 4.21.0 → 5.0.0

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

@@ -6,8 +6,8 @@
  * WordPress dependencies
  */
 import { __experimentalHStack as HStack } from '@wordpress/components';
-import { useMemo, useState } from '@wordpress/element';
-import { useResizeObserver } from '@wordpress/compose';
+import { useContext, useMemo, useRef, useState } from '@wordpress/element';
+import { useMergeRefs, useResizeObserver } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -17,13 +17,49 @@ import { default as DataViewsFilters, useFilters, FiltersToggle } from '../datav
 import DataViewsLayout from '../dataviews-layout';
 import DataViewsFooter from '../dataviews-footer';
 import DataViewsSearch from '../dataviews-search';
-import DataViewsViewConfig from '../dataviews-view-config';
+import { BulkActionsFooter } from '../dataviews-bulk-actions';
+import { DataViewsPagination } from '../dataviews-pagination';
+import DataViewsViewConfig, { DataviewsViewConfigDropdown, ViewTypeMenu } from '../dataviews-view-config';
 import { normalizeFields } from '../../normalize-fields';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const defaultGetItemId = item => item.id;
 const defaultIsItemClickable = () => true;
 const EMPTY_ARRAY = [];
-export default function DataViews({
+function DefaultUI({
+  header,
+  search = true,
+  searchLabel = undefined
+}) {
+  const {
+    isShowingFilter
+  } = useContext(DataViewsContext);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(HStack, {
+      alignment: "top",
+      justify: "space-between",
+      className: "dataviews__view-actions",
+      spacing: 1,
+      children: [/*#__PURE__*/_jsxs(HStack, {
+        justify: "start",
+        expanded: false,
+        className: "dataviews__search",
+        children: [search && /*#__PURE__*/_jsx(DataViewsSearch, {
+          label: searchLabel
+        }), /*#__PURE__*/_jsx(FiltersToggle, {})]
+      }), /*#__PURE__*/_jsxs(HStack, {
+        spacing: 1,
+        expanded: false,
+        style: {
+          flexShrink: 0
+        },
+        children: [/*#__PURE__*/_jsx(DataViewsViewConfig, {}), header]
+      })]
+    }), isShowingFilter && /*#__PURE__*/_jsx(DataViewsFilters, {
+      className: "dataviews-filters__container"
+    }), /*#__PURE__*/_jsx(DataViewsLayout, {}), /*#__PURE__*/_jsx(DataViewsFooter, {})]
+  });
+}
+function DataViews({
   view,
   onChangeView,
   fields,
@@ -39,11 +75,15 @@ export default function DataViews({
   selection: selectionProperty,
   onChangeSelection,
   onClickItem,
+  renderItemLink,
   isItemClickable = defaultIsItemClickable,
-  header
+  header,
+  children,
+  perPageSizes
 }) {
+  const containerRef = useRef(null);
   const [containerWidth, setContainerWidth] = useState(0);
-  const containerRef = useResizeObserver(resizeObserverEntries => {
+  const resizeObserverRef = useResizeObserver(resizeObserverEntries => {
     setContainerWidth(resizeObserverEntries[0].borderBoxSize[0].inlineSize);
   }, {
     box: 'border-box'
@@ -84,42 +124,36 @@ export default function DataViews({
       getItemLevel,
       isItemClickable,
       onClickItem,
-      containerWidth
+      renderItemLink,
+      containerWidth,
+      containerRef,
+      defaultLayouts,
+      filters,
+      isShowingFilter,
+      setIsShowingFilter,
+      perPageSizes
     },
-    children: /*#__PURE__*/_jsxs("div", {
+    children: /*#__PURE__*/_jsx("div", {
       className: "dataviews-wrapper",
-      ref: containerRef,
-      children: [/*#__PURE__*/_jsxs(HStack, {
-        alignment: "top",
-        justify: "space-between",
-        className: "dataviews__view-actions",
-        spacing: 1,
-        children: [/*#__PURE__*/_jsxs(HStack, {
-          justify: "start",
-          expanded: false,
-          className: "dataviews__search",
-          children: [search && /*#__PURE__*/_jsx(DataViewsSearch, {
-            label: searchLabel
-          }), /*#__PURE__*/_jsx(FiltersToggle, {
-            filters: filters,
-            view: view,
-            onChangeView: onChangeView,
-            setOpenedFilter: setOpenedFilter,
-            setIsShowingFilter: setIsShowingFilter,
-            isShowingFilter: isShowingFilter
-          })]
-        }), /*#__PURE__*/_jsxs(HStack, {
-          spacing: 1,
-          expanded: false,
-          style: {
-            flexShrink: 0
-          },
-          children: [/*#__PURE__*/_jsx(DataViewsViewConfig, {
-            defaultLayouts: defaultLayouts
-          }), header]
-        })]
-      }), isShowingFilter && /*#__PURE__*/_jsx(DataViewsFilters, {}), /*#__PURE__*/_jsx(DataViewsLayout, {}), /*#__PURE__*/_jsx(DataViewsFooter, {})]
+      ref: useMergeRefs([containerRef, resizeObserverRef]),
+      children: children !== null && children !== void 0 ? children : /*#__PURE__*/_jsx(DefaultUI, {
+        header: header,
+        search: search,
+        searchLabel: searchLabel
+      })
     })
   });
 }
+
+// Populate the DataViews sub components
+const DataViewsSubComponents = DataViews;
+DataViewsSubComponents.BulkActionToolbar = BulkActionsFooter;
+DataViewsSubComponents.Filters = DataViewsFilters;
+DataViewsSubComponents.FiltersToggle = FiltersToggle;
+DataViewsSubComponents.Layout = DataViewsLayout;
+DataViewsSubComponents.LayoutSwitcher = ViewTypeMenu;
+DataViewsSubComponents.Pagination = DataViewsPagination;
+DataViewsSubComponents.Search = DataViewsSearch;
+DataViewsSubComponents.ViewConfig = DataviewsViewConfigDropdown;
+export default DataViewsSubComponents;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["__experimentalHStack","HStack","useMemo","useState","useResizeObserver","DataViewsContext","default","DataViewsFilters","useFilters","FiltersToggle","DataViewsLayout","DataViewsFooter","DataViewsSearch","DataViewsViewConfig","normalizeFields","jsx","_jsx","jsxs","_jsxs","defaultGetItemId","item","id","defaultIsItemClickable","EMPTY_ARRAY","DataViews","view","onChangeView","fields","search","searchLabel","undefined","actions","data","getItemId","getItemLevel","isLoading","paginationInfo","defaultLayouts","selection","selectionProperty","onChangeSelection","onClickItem","isItemClickable","header","containerWidth","setContainerWidth","containerRef","resizeObserverEntries","borderBoxSize","inlineSize","box","selectionState","setSelectionState","isUncontrolled","openedFilter","setOpenedFilter","setSelectionWithChange","value","newValue","_fields","_selection","filter","some","filters","isShowingFilter","setIsShowingFilter","isPrimary","Provider","children","className","ref","alignment","justify","spacing","expanded","label","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';\nimport { useResizeObserver } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport DataViewsContext from '../dataviews-context';\nimport {\n\tdefault as DataViewsFilters,\n\tuseFilters,\n\tFiltersToggle,\n} from '../dataviews-filters';\nimport DataViewsLayout from '../dataviews-layout';\nimport DataViewsFooter from '../dataviews-footer';\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';\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\tonClickItem?: ( item: Item ) => void;\n\tisItemClickable?: ( item: Item ) => boolean;\n\theader?: ReactNode;\n\tgetItemLevel?: ( item: Item ) => number;\n} & ( Item extends ItemWithId\n\t? { getItemId?: ( item: Item ) => string }\n\t: { getItemId: ( item: Item ) => string } );\n\nconst defaultGetItemId = ( item: ItemWithId ) => item.id;\nconst defaultIsItemClickable = () => true;\nconst EMPTY_ARRAY: any[] = [];\n\nexport default function DataViews< Item >( {\n\tview,\n\tonChangeView,\n\tfields,\n\tsearch = true,\n\tsearchLabel = undefined,\n\tactions = EMPTY_ARRAY,\n\tdata,\n\tgetItemId = defaultGetItemId,\n\tgetItemLevel,\n\tisLoading = false,\n\tpaginationInfo,\n\tdefaultLayouts,\n\tselection: selectionProperty,\n\tonChangeSelection,\n\tonClickItem,\n\tisItemClickable = defaultIsItemClickable,\n\theader,\n}: DataViewsProps< Item > ) {\n\tconst [ containerWidth, setContainerWidth ] = useState( 0 );\n\tconst containerRef = useResizeObserver(\n\t\t( resizeObserverEntries: any ) => {\n\t\t\tsetContainerWidth(\n\t\t\t\tresizeObserverEntries[ 0 ].borderBoxSize[ 0 ].inlineSize\n\t\t\t);\n\t\t},\n\t\t{ box: 'border-box' }\n\t);\n\tconst [ selectionState, setSelectionState ] = useState< string[] >( [] );\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\tconst filters = useFilters( _fields, view );\n\tconst [ isShowingFilter, setIsShowingFilter ] = useState< boolean >( () =>\n\t\t( filters || [] ).some( ( filter ) => filter.isPrimary )\n\t);\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\tgetItemLevel,\n\t\t\t\tisItemClickable,\n\t\t\t\tonClickItem,\n\t\t\t\tcontainerWidth,\n\t\t\t} }\n\t\t>\n\t\t\t<div className=\"dataviews-wrapper\" ref={ containerRef }>\n\t\t\t\t<HStack\n\t\t\t\t\talignment=\"top\"\n\t\t\t\t\tjustify=\"space-between\"\n\t\t\t\t\tclassName=\"dataviews__view-actions\"\n\t\t\t\t\tspacing={ 1 }\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\texpanded={ false }\n\t\t\t\t\t\tclassName=\"dataviews__search\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ search && <DataViewsSearch label={ searchLabel } /> }\n\t\t\t\t\t\t<FiltersToggle\n\t\t\t\t\t\t\tfilters={ filters }\n\t\t\t\t\t\t\tview={ view }\n\t\t\t\t\t\t\tonChangeView={ onChangeView }\n\t\t\t\t\t\t\tsetOpenedFilter={ setOpenedFilter }\n\t\t\t\t\t\t\tsetIsShowingFilter={ setIsShowingFilter }\n\t\t\t\t\t\t\tisShowingFilter={ isShowingFilter }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</HStack>\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{ isShowingFilter && <DataViewsFilters /> }\n\t\t\t\t<DataViewsLayout />\n\t\t\t\t<DataViewsFooter />\n\t\t\t</div>\n\t\t</DataViewsContext.Provider>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["__experimentalHStack","HStack","useContext","useMemo","useRef","useState","useMergeRefs","useResizeObserver","DataViewsContext","default","DataViewsFilters","useFilters","FiltersToggle","DataViewsLayout","DataViewsFooter","DataViewsSearch","BulkActionsFooter","DataViewsPagination","DataViewsViewConfig","DataviewsViewConfigDropdown","ViewTypeMenu","normalizeFields","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","defaultGetItemId","item","id","defaultIsItemClickable","EMPTY_ARRAY","DefaultUI","header","search","searchLabel","undefined","isShowingFilter","children","alignment","justify","className","spacing","expanded","label","style","flexShrink","DataViews","view","onChangeView","fields","actions","data","getItemId","getItemLevel","isLoading","paginationInfo","defaultLayouts","selection","selectionProperty","onChangeSelection","onClickItem","renderItemLink","isItemClickable","perPageSizes","containerRef","containerWidth","setContainerWidth","resizeObserverRef","resizeObserverEntries","borderBoxSize","inlineSize","box","selectionState","setSelectionState","isUncontrolled","openedFilter","setOpenedFilter","setSelectionWithChange","value","newValue","_fields","_selection","filter","some","filters","setIsShowingFilter","isPrimary","Provider","ref","DataViewsSubComponents","BulkActionToolbar","Filters","Layout","LayoutSwitcher","Pagination","Search","ViewConfig"],"sources":["@wordpress/dataviews/src/components/dataviews/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ReactNode, ComponentProps, ReactElement } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { __experimentalHStack as HStack } from '@wordpress/components';\nimport { useContext, useMemo, useRef, useState } from '@wordpress/element';\nimport { useMergeRefs, useResizeObserver } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport DataViewsContext from '../dataviews-context';\nimport {\n\tdefault as DataViewsFilters,\n\tuseFilters,\n\tFiltersToggle,\n} from '../dataviews-filters';\nimport DataViewsLayout from '../dataviews-layout';\nimport DataViewsFooter from '../dataviews-footer';\nimport DataViewsSearch from '../dataviews-search';\nimport { BulkActionsFooter } from '../dataviews-bulk-actions';\nimport { DataViewsPagination } from '../dataviews-pagination';\nimport DataViewsViewConfig, {\n\tDataviewsViewConfigDropdown,\n\tViewTypeMenu,\n} from '../dataviews-view-config';\nimport { normalizeFields } from '../../normalize-fields';\nimport type { Action, Field, View, SupportedLayouts } from '../../types';\nimport type { SelectionOrUpdater } from '../../private-types';\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\tonClickItem?: ( item: Item ) => void;\n\trenderItemLink?: (\n\t\tprops: {\n\t\t\titem: Item;\n\t\t} & ComponentProps< 'a' >\n\t) => ReactElement;\n\tisItemClickable?: ( item: Item ) => boolean;\n\theader?: ReactNode;\n\tgetItemLevel?: ( item: Item ) => number;\n\tchildren?: ReactNode;\n\tperPageSizes?: [ number, number, number, number ];\n} & ( Item extends ItemWithId\n\t? { getItemId?: ( item: Item ) => string }\n\t: { getItemId: ( item: Item ) => string } );\n\nconst defaultGetItemId = ( item: ItemWithId ) => item.id;\nconst defaultIsItemClickable = () => true;\nconst EMPTY_ARRAY: any[] = [];\n\ntype DefaultUIProps = Pick<\n\tDataViewsProps< any >,\n\t'header' | 'search' | 'searchLabel'\n>;\n\nfunction DefaultUI( {\n\theader,\n\tsearch = true,\n\tsearchLabel = undefined,\n}: DefaultUIProps ) {\n\tconst { isShowingFilter } = useContext( DataViewsContext );\n\treturn (\n\t\t<>\n\t\t\t<HStack\n\t\t\t\talignment=\"top\"\n\t\t\t\tjustify=\"space-between\"\n\t\t\t\tclassName=\"dataviews__view-actions\"\n\t\t\t\tspacing={ 1 }\n\t\t\t>\n\t\t\t\t<HStack\n\t\t\t\t\tjustify=\"start\"\n\t\t\t\t\texpanded={ false }\n\t\t\t\t\tclassName=\"dataviews__search\"\n\t\t\t\t>\n\t\t\t\t\t{ search && <DataViewsSearch label={ searchLabel } /> }\n\t\t\t\t\t<FiltersToggle />\n\t\t\t\t</HStack>\n\t\t\t\t<HStack\n\t\t\t\t\tspacing={ 1 }\n\t\t\t\t\texpanded={ false }\n\t\t\t\t\tstyle={ { flexShrink: 0 } }\n\t\t\t\t>\n\t\t\t\t\t<DataViewsViewConfig />\n\t\t\t\t\t{ header }\n\t\t\t\t</HStack>\n\t\t\t</HStack>\n\t\t\t{ isShowingFilter && (\n\t\t\t\t<DataViewsFilters className=\"dataviews-filters__container\" />\n\t\t\t) }\n\t\t\t<DataViewsLayout />\n\t\t\t<DataViewsFooter />\n\t\t</>\n\t);\n}\n\nfunction DataViews< Item >( {\n\tview,\n\tonChangeView,\n\tfields,\n\tsearch = true,\n\tsearchLabel = undefined,\n\tactions = EMPTY_ARRAY,\n\tdata,\n\tgetItemId = defaultGetItemId,\n\tgetItemLevel,\n\tisLoading = false,\n\tpaginationInfo,\n\tdefaultLayouts,\n\tselection: selectionProperty,\n\tonChangeSelection,\n\tonClickItem,\n\trenderItemLink,\n\tisItemClickable = defaultIsItemClickable,\n\theader,\n\tchildren,\n\tperPageSizes,\n}: DataViewsProps< Item > ) {\n\tconst containerRef = useRef< HTMLDivElement | null >( null );\n\tconst [ containerWidth, setContainerWidth ] = useState( 0 );\n\tconst resizeObserverRef = useResizeObserver(\n\t\t( resizeObserverEntries: any ) => {\n\t\t\tsetContainerWidth(\n\t\t\t\tresizeObserverEntries[ 0 ].borderBoxSize[ 0 ].inlineSize\n\t\t\t);\n\t\t},\n\t\t{ box: 'border-box' }\n\t);\n\tconst [ selectionState, setSelectionState ] = useState< string[] >( [] );\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\tconst filters = useFilters( _fields, view );\n\tconst [ isShowingFilter, setIsShowingFilter ] = useState< boolean >( () =>\n\t\t( filters || [] ).some( ( filter ) => filter.isPrimary )\n\t);\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\tgetItemLevel,\n\t\t\t\tisItemClickable,\n\t\t\t\tonClickItem,\n\t\t\t\trenderItemLink,\n\t\t\t\tcontainerWidth,\n\t\t\t\tcontainerRef,\n\t\t\t\tdefaultLayouts,\n\t\t\t\tfilters,\n\t\t\t\tisShowingFilter,\n\t\t\t\tsetIsShowingFilter,\n\t\t\t\tperPageSizes,\n\t\t\t} }\n\t\t>\n\t\t\t<div\n\t\t\t\tclassName=\"dataviews-wrapper\"\n\t\t\t\tref={ useMergeRefs( [ containerRef, resizeObserverRef ] ) }\n\t\t\t>\n\t\t\t\t{ children ?? (\n\t\t\t\t\t<DefaultUI\n\t\t\t\t\t\theader={ header }\n\t\t\t\t\t\tsearch={ search }\n\t\t\t\t\t\tsearchLabel={ searchLabel }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t</DataViewsContext.Provider>\n\t);\n}\n\n// Populate the DataViews sub components\nconst DataViewsSubComponents = DataViews as typeof DataViews & {\n\tBulkActionToolbar: typeof BulkActionsFooter;\n\tFilters: typeof DataViewsFilters;\n\tFiltersToggle: typeof FiltersToggle;\n\tLayout: typeof DataViewsLayout;\n\tLayoutSwitcher: typeof ViewTypeMenu;\n\tPagination: typeof DataViewsPagination;\n\tSearch: typeof DataViewsSearch;\n\tViewConfig: typeof DataviewsViewConfigDropdown;\n};\n\nDataViewsSubComponents.BulkActionToolbar = BulkActionsFooter;\nDataViewsSubComponents.Filters = DataViewsFilters;\nDataViewsSubComponents.FiltersToggle = FiltersToggle;\nDataViewsSubComponents.Layout = DataViewsLayout;\nDataViewsSubComponents.LayoutSwitcher = ViewTypeMenu;\nDataViewsSubComponents.Pagination = DataViewsPagination;\nDataViewsSubComponents.Search = DataViewsSearch;\nDataViewsSubComponents.ViewConfig = DataviewsViewConfigDropdown;\n\nexport default DataViewsSubComponents;\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,7 +1,11 @@
+/**
+ * External dependencies
+ */
+
 /**
  * WordPress dependencies
  */
-import { createContext } from '@wordpress/element';
+import { createContext, createRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -25,7 +29,17 @@ const DataViewsContext = createContext({
   openedFilter: null,
   getItemId: item => item.id,
   isItemClickable: () => true,
-  containerWidth: 0
+  renderItemLink: undefined,
+  containerWidth: 0,
+  containerRef: createRef(),
+  defaultLayouts: {
+    list: {},
+    grid: {},
+    table: {}
+  },
+  filters: [],
+  isShowingFilter: false,
+  setIsShowingFilter: () => {}
 });
 export default DataViewsContext;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["createContext","LAYOUT_TABLE","DataViewsContext","view","type","onChangeView","fields","data","paginationInfo","totalItems","totalPages","selection","onChangeSelection","setOpenedFilter","openedFilter","getItemId","item","id","isItemClickable","containerWidth"],"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\tgetItemLevel?: ( item: Item ) => number;\n\tonClickItem?: ( item: Item ) => void;\n\tisItemClickable: ( item: Item ) => boolean;\n\tcontainerWidth: 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\tisItemClickable: () => true,\n\tcontainerWidth: 0,\n} );\n\nexport default DataViewsContext;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,aAAa,QAAQ,oBAAoB;;AAElD;AACA;AACA;;AAGA,SAASC,YAAY,QAAQ,iBAAiB;AAwB9C,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,eAAe,EAAEA,CAAA,KAAM,IAAI;EAC3BC,cAAc,EAAE;AACjB,CAAE,CAAC;AAEH,eAAejB,gBAAgB","ignoreList":[]}
+{"version":3,"names":["createContext","createRef","LAYOUT_TABLE","DataViewsContext","view","type","onChangeView","fields","data","paginationInfo","totalItems","totalPages","selection","onChangeSelection","setOpenedFilter","openedFilter","getItemId","item","id","isItemClickable","renderItemLink","undefined","containerWidth","containerRef","defaultLayouts","list","grid","table","filters","isShowingFilter","setIsShowingFilter"],"sources":["@wordpress/dataviews/src/components/dataviews-context/index.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ComponentProps, ReactElement } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { createContext, createRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tView,\n\tAction,\n\tNormalizedField,\n\tSupportedLayouts,\n\tNormalizedFilter,\n} 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\tgetItemLevel?: ( item: Item ) => number;\n\tonClickItem?: ( item: Item ) => void;\n\trenderItemLink?: (\n\t\tprops: {\n\t\t\titem: Item;\n\t\t} & ComponentProps< 'a' >\n\t) => ReactElement;\n\tisItemClickable: ( item: Item ) => boolean;\n\tcontainerWidth: number;\n\tcontainerRef: React.MutableRefObject< HTMLDivElement | null >;\n\tdefaultLayouts: SupportedLayouts;\n\tfilters: NormalizedFilter[];\n\tisShowingFilter: boolean;\n\tsetIsShowingFilter: ( value: boolean ) => void;\n\tperPageSizes?: [ number, number, number, 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\tisItemClickable: () => true,\n\trenderItemLink: undefined,\n\tcontainerWidth: 0,\n\tcontainerRef: createRef(),\n\tdefaultLayouts: { list: {}, grid: {}, table: {} },\n\tfilters: [],\n\tisShowingFilter: false,\n\tsetIsShowingFilter: () => {},\n} );\n\nexport default DataViewsContext;\n"],"mappings":"AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,aAAa,EAAEC,SAAS,QAAQ,oBAAoB;;AAE7D;AACA;AACA;;AASA,SAASC,YAAY,QAAQ,iBAAiB;AAmC9C,MAAMC,gBAAgB,GAAGH,aAAa,CAAiC;EACtEI,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,eAAe,EAAEA,CAAA,KAAM,IAAI;EAC3BC,cAAc,EAAEC,SAAS;EACzBC,cAAc,EAAE,CAAC;EACjBC,YAAY,EAAEtB,SAAS,CAAC,CAAC;EACzBuB,cAAc,EAAE;IAAEC,IAAI,EAAE,CAAC,CAAC;IAAEC,IAAI,EAAE,CAAC,CAAC;IAAEC,KAAK,EAAE,CAAC;EAAE,CAAC;EACjDC,OAAO,EAAE,EAAE;EACXC,eAAe,EAAE,KAAK;EACtBC,kBAAkB,EAAEA,CAAA,KAAM,CAAC;AAC5B,CAAE,CAAC;AAEH,eAAe3B,gBAAgB","ignoreList":[]}

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

@@ -0,0 +1,309 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+/**
+ * WordPress dependencies
+ */
+import { Dropdown, __experimentalVStack as VStack, __experimentalHStack as HStack, FlexItem, SelectControl, Tooltip, Icon } from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import { useRef, createInterpolateElement } from '@wordpress/element';
+import { closeSmall } from '@wordpress/icons';
+const ENTER = 'Enter';
+const SPACE = ' ';
+
+/**
+ * Internal dependencies
+ */
+import SearchWidget from './search-widget';
+import InputWidget from './input-widget';
+import { OPERATORS, OPERATOR_IS, OPERATOR_IS_NOT, OPERATOR_IS_ANY, OPERATOR_IS_NONE, OPERATOR_IS_ALL, OPERATOR_IS_NOT_ALL, OPERATOR_LESS_THAN, OPERATOR_GREATER_THAN, OPERATOR_LESS_THAN_OR_EQUAL, OPERATOR_GREATER_THAN_OR_EQUAL, OPERATOR_CONTAINS, OPERATOR_NOT_CONTAINS, OPERATOR_STARTS_WITH, OPERATOR_BEFORE, OPERATOR_AFTER, OPERATOR_BEFORE_INC, OPERATOR_AFTER_INC, OPERATOR_BETWEEN, OPERATOR_ON, OPERATOR_NOT_ON, OPERATOR_IN_THE_PAST, OPERATOR_OVER } from '../../constants';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const FilterText = ({
+  activeElements,
+  filterInView,
+  filter
+}) => {
+  if (activeElements === undefined || activeElements.length === 0) {
+    return filter.name;
+  }
+  const filterTextWrappers = {
+    Name: /*#__PURE__*/_jsx("span", {
+      className: "dataviews-filters__summary-filter-text-name"
+    }),
+    Value: /*#__PURE__*/_jsx("span", {
+      className: "dataviews-filters__summary-filter-text-value"
+    })
+  };
+  if (filterInView?.operator === OPERATOR_IS_ANY) {
+    return createInterpolateElement(sprintf(/* translators: 1: Filter name. 2: Filter value. e.g.: "Author is any: Admin, Editor". */
+    __('<Name>%1$s is any: </Name><Value>%2$s</Value>'), filter.name, activeElements.map(element => element.label).join(', ')), filterTextWrappers);
+  }
+  if (filterInView?.operator === OPERATOR_IS_NONE) {
+    return createInterpolateElement(sprintf(/* translators: 1: Filter name. 2: Filter value. e.g.: "Author is none: Admin, Editor". */
+    __('<Name>%1$s is none: </Name><Value>%2$s</Value>'), filter.name, activeElements.map(element => element.label).join(', ')), filterTextWrappers);
+  }
+  if (filterInView?.operator === OPERATOR_IS_ALL) {
+    return createInterpolateElement(sprintf(/* translators: 1: Filter name. 2: Filter value. e.g.: "Author is all: Admin, Editor". */
+    __('<Name>%1$s is all: </Name><Value>%2$s</Value>'), filter.name, activeElements.map(element => element.label).join(', ')), filterTextWrappers);
+  }
+  if (filterInView?.operator === OPERATOR_IS_NOT_ALL) {
+    return createInterpolateElement(sprintf(/* translators: 1: Filter name. 2: Filter value. e.g.: "Author is not all: Admin, Editor". */
+    __('<Name>%1$s is not all: </Name><Value>%2$s</Value>'), filter.name, activeElements.map(element => element.label).join(', ')), filterTextWrappers);
+  }
+  if (filterInView?.operator === OPERATOR_IS) {
+    return createInterpolateElement(sprintf(/* translators: 1: Filter name. 2: Filter value. e.g.: "Author is: Admin". */
+    __('<Name>%1$s is: </Name><Value>%2$s</Value>'), filter.name, activeElements[0].label), filterTextWrappers);
+  }
+  if (filterInView?.operator === OPERATOR_IS_NOT) {
+    return createInterpolateElement(sprintf(/* translators: 1: Filter name. 2: Filter value. e.g.: "Author is not: Admin". */
+    __('<Name>%1$s is not: </Name><Value>%2$s</Value>'), filter.name, activeElements[0].label), filterTextWrappers);
+  }
+  if (filterInView?.operator === OPERATOR_LESS_THAN) {
+    return createInterpolateElement(sprintf(/* translators: 1: Filter name. 2: Filter value. e.g.: "Price is less than: 10". */
+    __('<Name>%1$s is less than: </Name><Value>%2$s</Value>'), filter.name, activeElements[0].label), filterTextWrappers);
+  }
+  if (filterInView?.operator === OPERATOR_GREATER_THAN) {
+    return createInterpolateElement(sprintf(/* translators: 1: Filter name. 2: Filter value. e.g.: "Price is greater than: 10". */
+    __('<Name>%1$s is greater than: </Name><Value>%2$s</Value>'), filter.name, activeElements[0].label), filterTextWrappers);
+  }
+  if (filterInView?.operator === OPERATOR_LESS_THAN_OR_EQUAL) {
+    return createInterpolateElement(sprintf(/* translators: 1: Filter name. 2: Filter value. e.g.: "Price is less than or equal to: 10". */
+    __('<Name>%1$s is less than or equal to: </Name><Value>%2$s</Value>'), filter.name, activeElements[0].label), filterTextWrappers);
+  }
+  if (filterInView?.operator === OPERATOR_GREATER_THAN_OR_EQUAL) {
+    return createInterpolateElement(sprintf(/* translators: 1: Filter name. 2: Filter value. e.g.: "Price is greater than or equal to: 10". */
+    __('<Name>%1$s is greater than or equal to: </Name><Value>%2$s</Value>'), filter.name, activeElements[0].label), filterTextWrappers);
+  }
+  if (filterInView?.operator === OPERATOR_CONTAINS) {
+    return createInterpolateElement(sprintf(/* translators: 1: Filter name. 2: Filter value. e.g.: "Title contains: Mars". */
+    __('<Name>%1$s contains: </Name><Value>%2$s</Value>'), filter.name, activeElements[0].label), filterTextWrappers);
+  }
+  if (filterInView?.operator === OPERATOR_NOT_CONTAINS) {
+    return createInterpolateElement(sprintf(/* translators: 1: Filter name. 2: Filter value. e.g.: "Description doesn't contain: photo". */
+    __("<Name>%1$s doesn't contain: </Name><Value>%2$s</Value>"), filter.name, activeElements[0].label), filterTextWrappers);
+  }
+  if (filterInView?.operator === OPERATOR_STARTS_WITH) {
+    return createInterpolateElement(sprintf(/* translators: 1: Filter name. 2: Filter value. e.g.: "Title starts with: Mar". */
+    __('<Name>%1$s starts with: </Name><Value>%2$s</Value>'), filter.name, activeElements[0].label), filterTextWrappers);
+  }
+  if (filterInView?.operator === OPERATOR_BEFORE) {
+    return createInterpolateElement(sprintf(/* translators: 1: Filter name. 2: Filter value. e.g.: "Date is before: 2024-01-01". */
+    __('<Name>%1$s is before: </Name><Value>%2$s</Value>'), filter.name, activeElements[0].label), filterTextWrappers);
+  }
+  if (filterInView?.operator === OPERATOR_AFTER) {
+    return createInterpolateElement(sprintf(/* translators: 1: Filter name. 2: Filter value. e.g.: "Date is after: 2024-01-01". */
+    __('<Name>%1$s is after: </Name><Value>%2$s</Value>'), filter.name, activeElements[0].label), filterTextWrappers);
+  }
+  if (filterInView?.operator === OPERATOR_BEFORE_INC) {
+    return createInterpolateElement(sprintf(/* translators: 1: Filter name. 2: Filter value. e.g.: "Date is on or before: 2024-01-01". */
+    __('<Name>%1$s is on or before: </Name><Value>%2$s</Value>'), filter.name, activeElements[0].label), filterTextWrappers);
+  }
+  if (filterInView?.operator === OPERATOR_AFTER_INC) {
+    return createInterpolateElement(sprintf(/* translators: 1: Filter name. 2: Filter value. e.g.: "Date is on or after: 2024-01-01". */
+    __('<Name>%1$s is on or after: </Name><Value>%2$s</Value>'), filter.name, activeElements[0].label), filterTextWrappers);
+  }
+  if (filterInView?.operator === OPERATOR_BETWEEN) {
+    const {
+      label
+    } = activeElements[0];
+    return createInterpolateElement(sprintf(/* translators: 1: Filter name. 2: Min value. 3: Max value. e.g.: "Item count between (inc): 10-180". */
+    __('<Name>%1$s between (inc): </Name><Value>%2$s-%3$s</Value>'), filter.name, label[0], label[1]), filterTextWrappers);
+  }
+  if (filterInView?.operator === OPERATOR_ON) {
+    return createInterpolateElement(sprintf(/* translators: 1: Filter name. 2: Filter value. e.g.: "Date is: 2024-01-01". */
+    __('<Name>%1$s is: </Name><Value>%2$s</Value>'), filter.name, activeElements[0].label), filterTextWrappers);
+  }
+  if (filterInView?.operator === OPERATOR_NOT_ON) {
+    return createInterpolateElement(sprintf(/* translators: 1: Filter name. 2: Filter value. e.g.: "Date is not: 2024-01-01". */
+    __('<Name>%1$s is not: </Name><Value>%2$s</Value>'), filter.name, activeElements[0].label), filterTextWrappers);
+  }
+  if (filterInView?.operator === OPERATOR_IN_THE_PAST) {
+    return createInterpolateElement(sprintf(/* translators: 1: Filter name. 2: Filter value. e.g.: "Date is in the past: 1 days". */
+    __('<Name>%1$s is in the past: </Name><Value>%2$s</Value>'), filter.name, `${activeElements[0].value.value} ${activeElements[0].value.unit}`), filterTextWrappers);
+  }
+  if (filterInView?.operator === OPERATOR_OVER) {
+    return createInterpolateElement(sprintf(/* translators: 1: Filter name. 2: Filter value. e.g.: "Date is over: 1 days ago". */
+    __('<Name>%1$s is over: </Name><Value>%2$s</Value> ago'), filter.name, `${activeElements[0].value.value} ${activeElements[0].value.unit}`), filterTextWrappers);
+  }
+  return sprintf(/* translators: 1: Filter name e.g.: "Unknown status for Author". */
+  __('Unknown status for %1$s'), filter.name);
+};
+function OperatorSelector({
+  filter,
+  view,
+  onChangeView
+}) {
+  const operatorOptions = filter.operators?.map(operator => ({
+    value: operator,
+    label: OPERATORS[operator]?.label
+  }));
+  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-filters__summary-operators-container",
+    children: [/*#__PURE__*/_jsx(FlexItem, {
+      className: "dataviews-filters__summary-operators-filter-name",
+      children: filter.name
+    }), /*#__PURE__*/_jsx(SelectControl, {
+      className: "dataviews-filters__summary-operators-filter-select",
+      label: __('Conditions'),
+      value: value,
+      options: operatorOptions,
+      onChange: newValue => {
+        var _view$filters, _view$filters2;
+        const operator = newValue;
+        const currentOperator = currentFilter?.operator;
+        const newFilters = currentFilter ? [...((_view$filters = view.filters) !== null && _view$filters !== void 0 ? _view$filters : []).map(_filter => {
+          if (_filter.field === filter.field) {
+            // Reset the value only when switching between operators that have different value types.
+            const OPERATORS_SHOULD_RESET_VALUE = [OPERATOR_BETWEEN, OPERATOR_IN_THE_PAST, OPERATOR_OVER];
+            const shouldResetValue = currentOperator && (OPERATORS_SHOULD_RESET_VALUE.includes(currentOperator) || OPERATORS_SHOULD_RESET_VALUE.includes(operator));
+            return {
+              ..._filter,
+              value: shouldResetValue ? undefined : _filter.value,
+              operator
+            };
+          }
+          return _filter;
+        })] : [...((_view$filters2 = view.filters) !== null && _view$filters2 !== void 0 ? _view$filters2 : []), {
+          field: filter.field,
+          operator,
+          value: undefined
+        }];
+        onChangeView({
+          ...view,
+          page: 1,
+          filters: newFilters
+        });
+      },
+      size: "small",
+      variant: "minimal",
+      __nextHasNoMarginBottom: true,
+      hideLabelFromVision: true
+    })]
+  });
+}
+export default function Filter({
+  addFilterRef,
+  openedFilter,
+  fields,
+  ...commonProps
+}) {
+  const toggleRef = useRef(null);
+  const {
+    filter,
+    view,
+    onChangeView
+  } = commonProps;
+  const filterInView = view.filters?.find(f => f.field === filter.field);
+  let activeElements = [];
+  if (filter.elements.length > 0) {
+    activeElements = filter.elements.filter(element => {
+      if (filter.singleSelection) {
+        return element.value === filterInView?.value;
+      }
+      return filterInView?.value?.includes(element.value);
+    });
+  } else if (filterInView?.value !== undefined) {
+    activeElements = [{
+      value: filterInView.value,
+      label: filterInView.value
+    }];
+  }
+  const isPrimary = filter.isPrimary;
+  const hasValues = filterInView?.value !== undefined;
+  const canResetOrRemove = !isPrimary || hasValues;
+  return /*#__PURE__*/_jsx(Dropdown, {
+    defaultOpen: openedFilter === filter.field,
+    contentClassName: "dataviews-filters__summary-popover",
+    popoverProps: {
+      placement: 'bottom-start',
+      role: 'dialog'
+    },
+    onClose: () => {
+      toggleRef.current?.focus();
+    },
+    renderToggle: ({
+      isOpen,
+      onToggle
+    }) => /*#__PURE__*/_jsxs("div", {
+      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-filters__summary-chip', {
+            'has-reset': canResetOrRemove,
+            'has-values': hasValues
+          }),
+          role: "button",
+          tabIndex: 0,
+          onClick: onToggle,
+          onKeyDown: event => {
+            if ([ENTER, SPACE].includes(event.key)) {
+              onToggle();
+              event.preventDefault();
+            }
+          },
+          "aria-pressed": isOpen,
+          "aria-expanded": isOpen,
+          ref: toggleRef,
+          children: /*#__PURE__*/_jsx(FilterText, {
+            activeElements: activeElements,
+            filterInView: filterInView,
+            filter: filter
+          })
+        })
+      }), canResetOrRemove && /*#__PURE__*/_jsx(Tooltip, {
+        text: isPrimary ? __('Reset') : __('Remove'),
+        placement: "top",
+        children: /*#__PURE__*/_jsx("button", {
+          className: clsx('dataviews-filters__summary-chip-remove', {
+            'has-values': hasValues
+          }),
+          onClick: () => {
+            onChangeView({
+              ...view,
+              page: 1,
+              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.
+            if (!isPrimary) {
+              addFilterRef.current?.focus();
+            } else {
+              // If is primary, focus the toggle button.
+              toggleRef.current?.focus();
+            }
+          },
+          children: /*#__PURE__*/_jsx(Icon, {
+            icon: closeSmall
+          })
+        })
+      })]
+    }),
+    renderContent: () => {
+      return /*#__PURE__*/_jsxs(VStack, {
+        spacing: 0,
+        justify: "flex-start",
+        children: [/*#__PURE__*/_jsx(OperatorSelector, {
+          ...commonProps
+        }), commonProps.filter.elements.length > 0 ? /*#__PURE__*/_jsx(SearchWidget, {
+          ...commonProps,
+          filter: {
+            ...commonProps.filter,
+            elements: commonProps.filter.elements
+          }
+        }) : /*#__PURE__*/_jsx(InputWidget, {
+          ...commonProps,
+          fields: fields
+        })]
+      });
+    }
+  });
+}
+//# sourceMappingURL=filter.js.map