@wordpress/dataviews 4.0.0 → 4.2.0

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

@@ -19,28 +19,16 @@ const {
   DropdownMenuItemV2: DropdownMenuItem,
   DropdownMenuItemLabelV2: DropdownMenuItemLabel
 } = unlock(componentsPrivateApis);
-function AddFilter({
+export function AddFilterDropdownMenu({
   filters,
   view,
   onChangeView,
-  setOpenedFilter
-}, ref) {
-  if (!filters.length || filters.every(({
-    isPrimary
-  }) => isPrimary)) {
-    return null;
-  }
+  setOpenedFilter,
+  trigger
+}) {
   const inactiveFilters = filters.filter(filter => !filter.isVisible);
   return /*#__PURE__*/_jsx(DropdownMenu, {
-    trigger: /*#__PURE__*/_jsx(Button, {
-      accessibleWhenDisabled: true,
-      size: "compact",
-      className: "dataviews-filters__button",
-      variant: "tertiary",
-      disabled: !inactiveFilters.length,
-      ref: ref,
-      children: __('Add filter')
-    }),
+    trigger: trigger,
     children: inactiveFilters.map(filter => {
       return /*#__PURE__*/_jsx(DropdownMenuItem, {
         onClick: () => {
@@ -62,5 +50,33 @@ function AddFilter({
     })
   });
 }
+function AddFilter({
+  filters,
+  view,
+  onChangeView,
+  setOpenedFilter
+}, ref) {
+  if (!filters.length || filters.every(({
+    isPrimary
+  }) => isPrimary)) {
+    return null;
+  }
+  const inactiveFilters = filters.filter(filter => !filter.isVisible);
+  return /*#__PURE__*/_jsx(AddFilterDropdownMenu, {
+    trigger: /*#__PURE__*/_jsx(Button, {
+      accessibleWhenDisabled: true,
+      size: "compact",
+      className: "dataviews-filters-button",
+      variant: "tertiary",
+      disabled: !inactiveFilters.length,
+      ref: ref,
+      children: __('Add filter')
+    }),
+    filters,
+    view,
+    onChangeView,
+    setOpenedFilter
+  });
+}
 export default forwardRef(AddFilter);
 //# sourceMappingURL=add-filter.js.map

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

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

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

@@ -1,19 +1,112 @@
 /**
  * WordPress dependencies
  */
-import { memo, useContext, useRef } from '@wordpress/element';
-import { __experimentalHStack as HStack } from '@wordpress/components';
+import { memo, useContext, useRef, useMemo, useCallback } from '@wordpress/element';
+import { __experimentalHStack as HStack, Button } from '@wordpress/components';
+import { funnel } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import FilterSummary from './filter-summary';
-import AddFilter from './add-filter';
+import { default as AddFilter, AddFilterDropdownMenu } from './add-filter';
 import ResetFilters from './reset-filters';
 import DataViewsContext from '../dataviews-context';
 import { sanitizeOperators } from '../../utils';
 import { ALL_OPERATORS, OPERATOR_IS, OPERATOR_IS_NOT } from '../../constants';
 import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export function useFilters(fields, view) {
+  return useMemo(() => {
+    const filters = [];
+    fields.forEach(field => {
+      if (!field.elements?.length) {
+        return;
+      }
+      const operators = sanitizeOperators(field);
+      if (operators.length === 0) {
+        return;
+      }
+      const isPrimary = !!field.filterBy?.isPrimary;
+      filters.push({
+        field: field.id,
+        name: field.label,
+        elements: field.elements,
+        singleSelection: operators.some(op => [OPERATOR_IS, OPERATOR_IS_NOT].includes(op)),
+        operators,
+        isVisible: isPrimary || !!view.filters?.some(f => f.field === field.id && ALL_OPERATORS.includes(f.operator)),
+        isPrimary
+      });
+    });
+    // Sort filters by primary property. We need the primary filters to be first.
+    // Then we sort by name.
+    filters.sort((a, b) => {
+      if (a.isPrimary && !b.isPrimary) {
+        return -1;
+      }
+      if (!a.isPrimary && b.isPrimary) {
+        return 1;
+      }
+      return a.name.localeCompare(b.name);
+    });
+    return filters;
+  }, [fields, view]);
+}
+export function FilterVisibilityToggle({
+  filters,
+  view,
+  onChangeView,
+  setOpenedFilter,
+  isShowingFilter,
+  setIsShowingFilter
+}) {
+  const onChangeViewWithFilterVisibility = useCallback(_view => {
+    onChangeView(_view);
+    setIsShowingFilter(true);
+  }, [onChangeView, setIsShowingFilter]);
+  const visibleFilters = filters.filter(filter => filter.isVisible);
+  const hasVisibleFilters = !!visibleFilters.length;
+  if (filters.length === 0) {
+    return null;
+  }
+  if (!hasVisibleFilters) {
+    return /*#__PURE__*/_jsx(AddFilterDropdownMenu, {
+      filters: filters,
+      view: view,
+      onChangeView: onChangeViewWithFilterVisibility,
+      setOpenedFilter: setOpenedFilter,
+      trigger: /*#__PURE__*/_jsx(Button, {
+        className: "dataviews-filters__visibility-toggle",
+        size: "compact",
+        icon: funnel,
+        label: __('Add filter'),
+        isPressed: false,
+        "aria-expanded": false
+      })
+    });
+  }
+  return /*#__PURE__*/_jsxs("div", {
+    className: "dataviews-filters__container-visibility-toggle",
+    children: [/*#__PURE__*/_jsx(Button, {
+      className: "dataviews-filters__visibility-toggle",
+      size: "compact",
+      icon: funnel,
+      label: __('Toggle filter display'),
+      onClick: () => {
+        if (!isShowingFilter) {
+          setOpenedFilter(null);
+        }
+        setIsShowingFilter(!isShowingFilter);
+      },
+      isPressed: isShowingFilter,
+      "aria-expanded": isShowingFilter
+    }), hasVisibleFilters && !!view.filters?.length && /*#__PURE__*/_jsx("span", {
+      className: "dataviews-filters-toggle__count",
+      children: view.filters?.length
+    })]
+  });
+}
 function Filters() {
   const {
     fields,
@@ -23,37 +116,7 @@ function Filters() {
     setOpenedFilter
   } = useContext(DataViewsContext);
   const addFilterRef = useRef(null);
-  const filters = [];
-  fields.forEach(field => {
-    if (!field.elements?.length) {
-      return;
-    }
-    const operators = sanitizeOperators(field);
-    if (operators.length === 0) {
-      return;
-    }
-    const isPrimary = !!field.filterBy?.isPrimary;
-    filters.push({
-      field: field.id,
-      name: field.label,
-      elements: field.elements,
-      singleSelection: operators.some(op => [OPERATOR_IS, OPERATOR_IS_NOT].includes(op)),
-      operators,
-      isVisible: isPrimary || !!view.filters?.some(f => f.field === field.id && ALL_OPERATORS.includes(f.operator)),
-      isPrimary
-    });
-  });
-  // Sort filters by primary property. We need the primary filters to be first.
-  // Then we sort by name.
-  filters.sort((a, b) => {
-    if (a.isPrimary && !b.isPrimary) {
-      return -1;
-    }
-    if (!a.isPrimary && b.isPrimary) {
-      return 1;
-    }
-    return a.name.localeCompare(b.name);
-  });
+  const filters = useFilters(fields, view);
   const addFilter = /*#__PURE__*/_jsx(AddFilter, {
     filters: filters,
     view: view,
@@ -61,10 +124,11 @@ function Filters() {
     ref: addFilterRef,
     setOpenedFilter: setOpenedFilter
   }, "add-filter");
-  const filterComponents = [...filters.map(filter => {
-    if (!filter.isVisible) {
-      return null;
-    }
+  const visibleFilters = filters.filter(filter => filter.isVisible);
+  if (visibleFilters.length === 0) {
+    return null;
+  }
+  const filterComponents = [...visibleFilters.map(filter => {
     return /*#__PURE__*/_jsx(FilterSummary, {
       filter: filter,
       view: view,
@@ -73,18 +137,17 @@ function Filters() {
       openedFilter: openedFilter
     }, filter.field);
   }), addFilter];
-  if (filterComponents.length > 1) {
-    filterComponents.push( /*#__PURE__*/_jsx(ResetFilters, {
-      filters: filters,
-      view: view,
-      onChangeView: onChangeView
-    }, "reset-filters"));
-  }
+  filterComponents.push( /*#__PURE__*/_jsx(ResetFilters, {
+    filters: filters,
+    view: view,
+    onChangeView: onChangeView
+  }, "reset-filters"));
   return /*#__PURE__*/_jsx(HStack, {
     justify: "flex-start",
     style: {
       width: 'fit-content'
     },
+    className: "dataviews-filters__container",
     wrap: true,
     children: filterComponents
   });

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

@@ -1 +1 @@
-{"version":3,"names":["memo","useContext","useRef","__experimentalHStack","HStack","FilterSummary","AddFilter","ResetFilters","DataViewsContext","sanitizeOperators","ALL_OPERATORS","OPERATOR_IS","OPERATOR_IS_NOT","jsx","_jsx","Filters","fields","view","onChangeView","openedFilter","setOpenedFilter","addFilterRef","filters","forEach","field","elements","length","operators","isPrimary","filterBy","push","id","name","label","singleSelection","some","op","includes","isVisible","f","operator","sort","a","b","localeCompare","addFilter","ref","filterComponents","map","filter","justify","style","width","wrap","children"],"sources":["@wordpress/dataviews/src/components/dataviews-filters/index.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { memo, useContext, useRef } from '@wordpress/element';\nimport { __experimentalHStack as HStack } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport FilterSummary from './filter-summary';\nimport AddFilter from './add-filter';\nimport ResetFilters from './reset-filters';\nimport DataViewsContext from '../dataviews-context';\nimport { sanitizeOperators } from '../../utils';\nimport { ALL_OPERATORS, OPERATOR_IS, OPERATOR_IS_NOT } from '../../constants';\nimport type { NormalizedFilter } from '../../types';\n\nfunction Filters() {\n\tconst { fields, view, onChangeView, openedFilter, setOpenedFilter } =\n\t\tuseContext( DataViewsContext );\n\tconst addFilterRef = useRef< HTMLButtonElement >( null );\n\tconst filters: NormalizedFilter[] = [];\n\tfields.forEach( ( field ) => {\n\t\tif ( ! field.elements?.length ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst operators = sanitizeOperators( field );\n\t\tif ( operators.length === 0 ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst isPrimary = !! field.filterBy?.isPrimary;\n\t\tfilters.push( {\n\t\t\tfield: field.id,\n\t\t\tname: field.label,\n\t\t\telements: field.elements,\n\t\t\tsingleSelection: operators.some( ( op ) =>\n\t\t\t\t[ OPERATOR_IS, OPERATOR_IS_NOT ].includes( op )\n\t\t\t),\n\t\t\toperators,\n\t\t\tisVisible:\n\t\t\t\tisPrimary ||\n\t\t\t\t!! view.filters?.some(\n\t\t\t\t\t( f ) =>\n\t\t\t\t\t\tf.field === field.id &&\n\t\t\t\t\t\tALL_OPERATORS.includes( f.operator )\n\t\t\t\t),\n\t\t\tisPrimary,\n\t\t} );\n\t} );\n\t// Sort filters by primary property. We need the primary filters to be first.\n\t// Then we sort by name.\n\tfilters.sort( ( a, b ) => {\n\t\tif ( a.isPrimary && ! b.isPrimary ) {\n\t\t\treturn -1;\n\t\t}\n\t\tif ( ! a.isPrimary && b.isPrimary ) {\n\t\t\treturn 1;\n\t\t}\n\t\treturn a.name.localeCompare( b.name );\n\t} );\n\tconst addFilter = (\n\t\t<AddFilter\n\t\t\tkey=\"add-filter\"\n\t\t\tfilters={ filters }\n\t\t\tview={ view }\n\t\t\tonChangeView={ onChangeView }\n\t\t\tref={ addFilterRef }\n\t\t\tsetOpenedFilter={ setOpenedFilter }\n\t\t/>\n\t);\n\tconst filterComponents = [\n\t\t...filters.map( ( filter ) => {\n\t\t\tif ( ! filter.isVisible ) {\n\t\t\t\treturn null;\n\t\t\t}\n\n\t\t\treturn (\n\t\t\t\t<FilterSummary\n\t\t\t\t\tkey={ filter.field }\n\t\t\t\t\tfilter={ filter }\n\t\t\t\t\tview={ view }\n\t\t\t\t\tonChangeView={ onChangeView }\n\t\t\t\t\taddFilterRef={ addFilterRef }\n\t\t\t\t\topenedFilter={ openedFilter }\n\t\t\t\t/>\n\t\t\t);\n\t\t} ),\n\t\taddFilter,\n\t];\n\n\tif ( filterComponents.length > 1 ) {\n\t\tfilterComponents.push(\n\t\t\t<ResetFilters\n\t\t\t\tkey=\"reset-filters\"\n\t\t\t\tfilters={ filters }\n\t\t\t\tview={ view }\n\t\t\t\tonChangeView={ onChangeView }\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn (\n\t\t<HStack justify=\"flex-start\" style={ { width: 'fit-content' } } wrap>\n\t\t\t{ filterComponents }\n\t\t</HStack>\n\t);\n}\n\nexport default memo( Filters );\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["memo","useContext","useRef","useMemo","useCallback","__experimentalHStack","HStack","Button","funnel","__","FilterSummary","default","AddFilter","AddFilterDropdownMenu","ResetFilters","DataViewsContext","sanitizeOperators","ALL_OPERATORS","OPERATOR_IS","OPERATOR_IS_NOT","jsx","_jsx","jsxs","_jsxs","useFilters","fields","view","filters","forEach","field","elements","length","operators","isPrimary","filterBy","push","id","name","label","singleSelection","some","op","includes","isVisible","f","operator","sort","a","b","localeCompare","FilterVisibilityToggle","onChangeView","setOpenedFilter","isShowingFilter","setIsShowingFilter","onChangeViewWithFilterVisibility","_view","visibleFilters","filter","hasVisibleFilters","trigger","className","size","icon","isPressed","children","onClick","Filters","openedFilter","addFilterRef","addFilter","ref","filterComponents","map","justify","style","width","wrap"],"sources":["@wordpress/dataviews/src/components/dataviews-filters/index.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tmemo,\n\tuseContext,\n\tuseRef,\n\tuseMemo,\n\tuseCallback,\n} from '@wordpress/element';\nimport { __experimentalHStack as HStack, Button } from '@wordpress/components';\nimport { funnel } from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport FilterSummary from './filter-summary';\nimport { default as AddFilter, AddFilterDropdownMenu } from './add-filter';\nimport ResetFilters from './reset-filters';\nimport DataViewsContext from '../dataviews-context';\nimport { sanitizeOperators } from '../../utils';\nimport { ALL_OPERATORS, OPERATOR_IS, OPERATOR_IS_NOT } from '../../constants';\nimport type { NormalizedFilter, NormalizedField, View } from '../../types';\n\nexport function useFilters( fields: NormalizedField< any >[], view: View ) {\n\treturn useMemo( () => {\n\t\tconst filters: NormalizedFilter[] = [];\n\t\tfields.forEach( ( field ) => {\n\t\t\tif ( ! field.elements?.length ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst operators = sanitizeOperators( field );\n\t\t\tif ( operators.length === 0 ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst isPrimary = !! field.filterBy?.isPrimary;\n\t\t\tfilters.push( {\n\t\t\t\tfield: field.id,\n\t\t\t\tname: field.label,\n\t\t\t\telements: field.elements,\n\t\t\t\tsingleSelection: operators.some( ( op ) =>\n\t\t\t\t\t[ OPERATOR_IS, OPERATOR_IS_NOT ].includes( op )\n\t\t\t\t),\n\t\t\t\toperators,\n\t\t\t\tisVisible:\n\t\t\t\t\tisPrimary ||\n\t\t\t\t\t!! view.filters?.some(\n\t\t\t\t\t\t( f ) =>\n\t\t\t\t\t\t\tf.field === field.id &&\n\t\t\t\t\t\t\tALL_OPERATORS.includes( f.operator )\n\t\t\t\t\t),\n\t\t\t\tisPrimary,\n\t\t\t} );\n\t\t} );\n\t\t// Sort filters by primary property. We need the primary filters to be first.\n\t\t// Then we sort by name.\n\t\tfilters.sort( ( a, b ) => {\n\t\t\tif ( a.isPrimary && ! b.isPrimary ) {\n\t\t\t\treturn -1;\n\t\t\t}\n\t\t\tif ( ! a.isPrimary && b.isPrimary ) {\n\t\t\t\treturn 1;\n\t\t\t}\n\t\t\treturn a.name.localeCompare( b.name );\n\t\t} );\n\t\treturn filters;\n\t}, [ fields, view ] );\n}\n\nexport function FilterVisibilityToggle( {\n\tfilters,\n\tview,\n\tonChangeView,\n\tsetOpenedFilter,\n\tisShowingFilter,\n\tsetIsShowingFilter,\n}: {\n\tfilters: NormalizedFilter[];\n\tview: View;\n\tonChangeView: ( view: View ) => void;\n\tsetOpenedFilter: ( filter: string | null ) => void;\n\tisShowingFilter: boolean;\n\tsetIsShowingFilter: React.Dispatch< React.SetStateAction< boolean > >;\n} ) {\n\tconst onChangeViewWithFilterVisibility = useCallback(\n\t\t( _view: View ) => {\n\t\t\tonChangeView( _view );\n\t\t\tsetIsShowingFilter( true );\n\t\t},\n\t\t[ onChangeView, setIsShowingFilter ]\n\t);\n\tconst visibleFilters = filters.filter( ( filter ) => filter.isVisible );\n\n\tconst hasVisibleFilters = !! visibleFilters.length;\n\tif ( filters.length === 0 ) {\n\t\treturn null;\n\t}\n\tif ( ! hasVisibleFilters ) {\n\t\treturn (\n\t\t\t<AddFilterDropdownMenu\n\t\t\t\tfilters={ filters }\n\t\t\t\tview={ view }\n\t\t\t\tonChangeView={ onChangeViewWithFilterVisibility }\n\t\t\t\tsetOpenedFilter={ setOpenedFilter }\n\t\t\t\ttrigger={\n\t\t\t\t\t<Button\n\t\t\t\t\t\tclassName=\"dataviews-filters__visibility-toggle\"\n\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\ticon={ funnel }\n\t\t\t\t\t\tlabel={ __( 'Add filter' ) }\n\t\t\t\t\t\tisPressed={ false }\n\t\t\t\t\t\taria-expanded={ false }\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t/>\n\t\t);\n\t}\n\treturn (\n\t\t<div className=\"dataviews-filters__container-visibility-toggle\">\n\t\t\t<Button\n\t\t\t\tclassName=\"dataviews-filters__visibility-toggle\"\n\t\t\t\tsize=\"compact\"\n\t\t\t\ticon={ funnel }\n\t\t\t\tlabel={ __( 'Toggle filter display' ) }\n\t\t\t\tonClick={ () => {\n\t\t\t\t\tif ( ! isShowingFilter ) {\n\t\t\t\t\t\tsetOpenedFilter( null );\n\t\t\t\t\t}\n\t\t\t\t\tsetIsShowingFilter( ! isShowingFilter );\n\t\t\t\t} }\n\t\t\t\tisPressed={ isShowingFilter }\n\t\t\t\taria-expanded={ isShowingFilter }\n\t\t\t/>\n\t\t\t{ hasVisibleFilters && !! view.filters?.length && (\n\t\t\t\t<span className=\"dataviews-filters-toggle__count\">\n\t\t\t\t\t{ view.filters?.length }\n\t\t\t\t</span>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nfunction Filters() {\n\tconst { fields, view, onChangeView, openedFilter, setOpenedFilter } =\n\t\tuseContext( DataViewsContext );\n\tconst addFilterRef = useRef< HTMLButtonElement >( null );\n\tconst filters = useFilters( fields, view );\n\tconst addFilter = (\n\t\t<AddFilter\n\t\t\tkey=\"add-filter\"\n\t\t\tfilters={ filters }\n\t\t\tview={ view }\n\t\t\tonChangeView={ onChangeView }\n\t\t\tref={ addFilterRef }\n\t\t\tsetOpenedFilter={ setOpenedFilter }\n\t\t/>\n\t);\n\tconst visibleFilters = filters.filter( ( filter ) => filter.isVisible );\n\tif ( visibleFilters.length === 0 ) {\n\t\treturn null;\n\t}\n\tconst filterComponents = [\n\t\t...visibleFilters.map( ( filter ) => {\n\t\t\treturn (\n\t\t\t\t<FilterSummary\n\t\t\t\t\tkey={ filter.field }\n\t\t\t\t\tfilter={ filter }\n\t\t\t\t\tview={ view }\n\t\t\t\t\tonChangeView={ onChangeView }\n\t\t\t\t\taddFilterRef={ addFilterRef }\n\t\t\t\t\topenedFilter={ openedFilter }\n\t\t\t\t/>\n\t\t\t);\n\t\t} ),\n\t\taddFilter,\n\t];\n\n\tfilterComponents.push(\n\t\t<ResetFilters\n\t\t\tkey=\"reset-filters\"\n\t\t\tfilters={ filters }\n\t\t\tview={ view }\n\t\t\tonChangeView={ onChangeView }\n\t\t/>\n\t);\n\n\treturn (\n\t\t<HStack\n\t\t\tjustify=\"flex-start\"\n\t\t\tstyle={ { width: 'fit-content' } }\n\t\t\tclassName=\"dataviews-filters__container\"\n\t\t\twrap\n\t\t>\n\t\t\t{ filterComponents }\n\t\t</HStack>\n\t);\n}\n\nexport default memo( Filters );\n"],"mappings":"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","ignoreList":[]}

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

@@ -126,11 +126,8 @@ function ListBox({
         }), !filter.singleSelection && currentValue.includes(element.value) && /*#__PURE__*/_jsx(Icon, {
           icon: check
         })]
-      }), /*#__PURE__*/_jsxs("span", {
-        children: [element.label, !!element.description && /*#__PURE__*/_jsx("span", {
-          className: "dataviews-filters__search-widget-listitem-description",
-          children: element.description
-        })]
+      }), /*#__PURE__*/_jsx("span", {
+        children: element.label
       })]
     }, element.value))
   });

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

@@ -1 +1 @@
-{"version":3,"names":["Ariakit","removeAccents","__","sprintf","useState","useMemo","useDeferredValue","VisuallyHidden","Icon","privateApis","componentsPrivateApis","search","check","SVG","Circle","unlock","jsx","_jsx","jsxs","_jsxs","CompositeV2","Composite","CompositeItemV2","CompositeItem","useCompositeStoreV2","useCompositeStore","radioCheck","xmlns","viewBox","children","cx","cy","r","normalizeSearchInput","input","trim","toLowerCase","EMPTY_ARRAY","getCurrentValue","filterDefinition","currentFilter","singleSelection","value","Array","isArray","getNewValue","includes","filter","v","ListBox","view","onChangeView","compositeStore","virtualFocus","focusLoop","defaultActiveId","operators","length","undefined","filters","find","f","field","currentValue","store","role","className","name","onFocusVisible","getState","activeId","move","first","render","CompositeTypeahead","elements","map","element","CompositeHover","label","onClick","_view$filters","_view$filters2","newFilters","_filter","operator","page","icon","description","ComboboxList","searchValue","setSearchValue","deferredSearchValue","matches","normalizedSearch","item","ComboboxProvider","resetValueOnSelect","selectedValue","setSelectedValue","_view$filters3","_view$filters4","setValue","ComboboxLabel","Combobox","autoSelect","placeholder","alwaysVisible","ComboboxItem","hideOnClick","setValueOnClick","focusOnHover","ComboboxItemValue","SearchWidget","props","Widget"],"sources":["@wordpress/dataviews/src/components/dataviews-filters/search-widget.tsx"],"sourcesContent":["/**\n * External dependencies\n */\n// eslint-disable-next-line no-restricted-imports\nimport * as Ariakit from '@ariakit/react';\nimport removeAccents from 'remove-accents';\n\n/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useState, useMemo, useDeferredValue } from '@wordpress/element';\nimport {\n\tVisuallyHidden,\n\tIcon,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { search, check } from '@wordpress/icons';\nimport { SVG, Circle } from '@wordpress/primitives';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\nimport type { Filter, NormalizedFilter, View } from '../../types';\n\nconst {\n\tCompositeV2: Composite,\n\tCompositeItemV2: CompositeItem,\n\tuseCompositeStoreV2: useCompositeStore,\n} = unlock( componentsPrivateApis );\n\ninterface SearchWidgetProps {\n\tview: View;\n\tfilter: NormalizedFilter;\n\tonChangeView: ( view: View ) => void;\n}\n\nconst radioCheck = (\n\t<SVG xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n\t\t<Circle cx={ 12 } cy={ 12 } r={ 3 }></Circle>\n\t</SVG>\n);\n\nfunction normalizeSearchInput( input = '' ) {\n\treturn removeAccents( input.trim().toLowerCase() );\n}\n\nconst EMPTY_ARRAY: [] = [];\nconst getCurrentValue = (\n\tfilterDefinition: NormalizedFilter,\n\tcurrentFilter?: Filter\n) => {\n\tif ( filterDefinition.singleSelection ) {\n\t\treturn currentFilter?.value;\n\t}\n\n\tif ( Array.isArray( currentFilter?.value ) ) {\n\t\treturn currentFilter.value;\n\t}\n\n\tif ( ! Array.isArray( currentFilter?.value ) && !! currentFilter?.value ) {\n\t\treturn [ currentFilter.value ];\n\t}\n\n\treturn EMPTY_ARRAY;\n};\n\nconst getNewValue = (\n\tfilterDefinition: NormalizedFilter,\n\tcurrentFilter: Filter | undefined,\n\tvalue: any\n) => {\n\tif ( filterDefinition.singleSelection ) {\n\t\treturn value;\n\t}\n\n\tif ( Array.isArray( currentFilter?.value ) ) {\n\t\treturn currentFilter.value.includes( value )\n\t\t\t? currentFilter.value.filter( ( v ) => v !== value )\n\t\t\t: [ ...currentFilter.value, value ];\n\t}\n\n\treturn [ value ];\n};\n\nfunction ListBox( { view, filter, onChangeView }: SearchWidgetProps ) {\n\tconst compositeStore = useCompositeStore( {\n\t\tvirtualFocus: true,\n\t\tfocusLoop: true,\n\t\t// When we have no or just one operator, we can set the first item as active.\n\t\t// We do that by passing `undefined` to `defaultActiveId`. Otherwise, we set it to `null`,\n\t\t// so the first item is not selected, since the focus is on the operators control.\n\t\tdefaultActiveId: filter.operators?.length === 1 ? undefined : null,\n\t} );\n\tconst currentFilter = view.filters?.find(\n\t\t( f ) => f.field === filter.field\n\t);\n\tconst currentValue = getCurrentValue( filter, currentFilter );\n\treturn (\n\t\t<Composite\n\t\t\tstore={ compositeStore }\n\t\t\trole=\"listbox\"\n\t\t\tclassName=\"dataviews-filters__search-widget-listbox\"\n\t\t\taria-label={ sprintf(\n\t\t\t\t/* translators: List of items for a filter. 1: Filter name. e.g.: \"List of: Author\". */\n\t\t\t\t__( 'List of: %1$s' ),\n\t\t\t\tfilter.name\n\t\t\t) }\n\t\t\tonFocusVisible={ () => {\n\t\t\t\tif ( ! compositeStore.getState().activeId ) {\n\t\t\t\t\tcompositeStore.move( compositeStore.first() );\n\t\t\t\t}\n\t\t\t} }\n\t\t\trender={ <Ariakit.CompositeTypeahead store={ compositeStore } /> }\n\t\t>\n\t\t\t{ filter.elements.map( ( element ) => (\n\t\t\t\t<Ariakit.CompositeHover\n\t\t\t\t\tstore={ compositeStore }\n\t\t\t\t\tkey={ element.value }\n\t\t\t\t\trender={\n\t\t\t\t\t\t<CompositeItem\n\t\t\t\t\t\t\trender={\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\taria-label={ element.label }\n\t\t\t\t\t\t\t\t\trole=\"option\"\n\t\t\t\t\t\t\t\t\tclassName=\"dataviews-filters__search-widget-listitem\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tconst newFilters = currentFilter\n\t\t\t\t\t\t\t\t\t? [\n\t\t\t\t\t\t\t\t\t\t\t...( view.filters ?? [] ).map(\n\t\t\t\t\t\t\t\t\t\t\t\t( _filter ) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t_filter.field ===\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tfilter.field\n\t\t\t\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t..._filter,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\toperator:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcurrentFilter.operator ||\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tfilter\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t.operators[ 0 ],\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tvalue: getNewValue(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tfilter,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcurrentFilter,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\telement.value\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\treturn _filter;\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t  ]\n\t\t\t\t\t\t\t\t\t: [\n\t\t\t\t\t\t\t\t\t\t\t...( view.filters ?? [] ),\n\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\tfield: filter.field,\n\t\t\t\t\t\t\t\t\t\t\t\toperator: filter.operators[ 0 ],\n\t\t\t\t\t\t\t\t\t\t\t\tvalue: getNewValue(\n\t\t\t\t\t\t\t\t\t\t\t\t\tfilter,\n\t\t\t\t\t\t\t\t\t\t\t\t\tcurrentFilter,\n\t\t\t\t\t\t\t\t\t\t\t\t\telement.value\n\t\t\t\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t  ];\n\t\t\t\t\t\t\t\tonChangeView( {\n\t\t\t\t\t\t\t\t\t...view,\n\t\t\t\t\t\t\t\t\tpage: 1,\n\t\t\t\t\t\t\t\t\tfilters: newFilters,\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>\n\t\t\t\t\t<span className=\"dataviews-filters__search-widget-listitem-check\">\n\t\t\t\t\t\t{ filter.singleSelection &&\n\t\t\t\t\t\t\tcurrentValue === element.value && (\n\t\t\t\t\t\t\t\t<Icon icon={ radioCheck } />\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ ! filter.singleSelection &&\n\t\t\t\t\t\t\tcurrentValue.includes( element.value ) && (\n\t\t\t\t\t\t\t\t<Icon icon={ check } />\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t</span>\n\t\t\t\t\t<span>\n\t\t\t\t\t\t{ element.label }\n\t\t\t\t\t\t{ !! element.description && (\n\t\t\t\t\t\t\t<span className=\"dataviews-filters__search-widget-listitem-description\">\n\t\t\t\t\t\t\t\t{ element.description }\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</span>\n\t\t\t\t</Ariakit.CompositeHover>\n\t\t\t) ) }\n\t\t</Composite>\n\t);\n}\n\nfunction ComboboxList( { view, filter, onChangeView }: SearchWidgetProps ) {\n\tconst [ searchValue, setSearchValue ] = useState( '' );\n\tconst deferredSearchValue = useDeferredValue( searchValue );\n\tconst currentFilter = view.filters?.find(\n\t\t( _filter ) => _filter.field === filter.field\n\t);\n\tconst currentValue = getCurrentValue( filter, currentFilter );\n\tconst matches = useMemo( () => {\n\t\tconst normalizedSearch = normalizeSearchInput( deferredSearchValue );\n\t\treturn filter.elements.filter( ( item ) =>\n\t\t\tnormalizeSearchInput( item.label ).includes( normalizedSearch )\n\t\t);\n\t}, [ filter.elements, deferredSearchValue ] );\n\treturn (\n\t\t<Ariakit.ComboboxProvider\n\t\t\tresetValueOnSelect={ false }\n\t\t\tselectedValue={ currentValue }\n\t\t\tsetSelectedValue={ ( value ) => {\n\t\t\t\tconst newFilters = currentFilter\n\t\t\t\t\t? [\n\t\t\t\t\t\t\t...( view.filters ?? [] ).map( ( _filter ) => {\n\t\t\t\t\t\t\t\tif ( _filter.field === filter.field ) {\n\t\t\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\t\t\t..._filter,\n\t\t\t\t\t\t\t\t\t\toperator:\n\t\t\t\t\t\t\t\t\t\t\tcurrentFilter.operator ||\n\t\t\t\t\t\t\t\t\t\t\tfilter.operators[ 0 ],\n\t\t\t\t\t\t\t\t\t\tvalue,\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\treturn _filter;\n\t\t\t\t\t\t\t} ),\n\t\t\t\t\t  ]\n\t\t\t\t\t: [\n\t\t\t\t\t\t\t...( view.filters ?? [] ),\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tfield: filter.field,\n\t\t\t\t\t\t\t\toperator: filter.operators[ 0 ],\n\t\t\t\t\t\t\t\tvalue,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t  ];\n\t\t\t\tonChangeView( {\n\t\t\t\t\t...view,\n\t\t\t\t\tpage: 1,\n\t\t\t\t\tfilters: newFilters,\n\t\t\t\t} );\n\t\t\t} }\n\t\t\tsetValue={ setSearchValue }\n\t\t>\n\t\t\t<div className=\"dataviews-filters__search-widget-filter-combobox__wrapper\">\n\t\t\t\t<Ariakit.ComboboxLabel\n\t\t\t\t\trender={\n\t\t\t\t\t\t<VisuallyHidden>\n\t\t\t\t\t\t\t{ __( 'Search items' ) }\n\t\t\t\t\t\t</VisuallyHidden>\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Search items' ) }\n\t\t\t\t</Ariakit.ComboboxLabel>\n\t\t\t\t<Ariakit.Combobox\n\t\t\t\t\tautoSelect=\"always\"\n\t\t\t\t\tplaceholder={ __( 'Search' ) }\n\t\t\t\t\tclassName=\"dataviews-filters__search-widget-filter-combobox__input\"\n\t\t\t\t/>\n\t\t\t\t<div className=\"dataviews-filters__search-widget-filter-combobox__icon\">\n\t\t\t\t\t<Icon icon={ search } />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<Ariakit.ComboboxList\n\t\t\t\tclassName=\"dataviews-filters__search-widget-filter-combobox-list\"\n\t\t\t\talwaysVisible\n\t\t\t>\n\t\t\t\t{ matches.map( ( element ) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<Ariakit.ComboboxItem\n\t\t\t\t\t\t\tkey={ element.value }\n\t\t\t\t\t\t\tvalue={ element.value }\n\t\t\t\t\t\t\tclassName=\"dataviews-filters__search-widget-listitem\"\n\t\t\t\t\t\t\thideOnClick={ false }\n\t\t\t\t\t\t\tsetValueOnClick={ false }\n\t\t\t\t\t\t\tfocusOnHover\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<span className=\"dataviews-filters__search-widget-listitem-check\">\n\t\t\t\t\t\t\t\t{ filter.singleSelection &&\n\t\t\t\t\t\t\t\t\tcurrentValue === element.value && (\n\t\t\t\t\t\t\t\t\t\t<Icon icon={ radioCheck } />\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t{ ! filter.singleSelection &&\n\t\t\t\t\t\t\t\t\tcurrentValue.includes( element.value ) && (\n\t\t\t\t\t\t\t\t\t\t<Icon icon={ check } />\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t<Ariakit.ComboboxItemValue\n\t\t\t\t\t\t\t\t\tclassName=\"dataviews-filters__search-widget-filter-combobox-item-value\"\n\t\t\t\t\t\t\t\t\tvalue={ element.label }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t{ !! element.description && (\n\t\t\t\t\t\t\t\t\t<span className=\"dataviews-filters__search-widget-listitem-description\">\n\t\t\t\t\t\t\t\t\t\t{ element.description }\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</Ariakit.ComboboxItem>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t\t{ ! matches.length && <p>{ __( 'No results found' ) }</p> }\n\t\t\t</Ariakit.ComboboxList>\n\t\t</Ariakit.ComboboxProvider>\n\t);\n}\n\nexport default function SearchWidget( props: SearchWidgetProps ) {\n\tconst Widget = props.filter.elements.length > 10 ? ComboboxList : ListBox;\n\treturn <Widget { ...props } />;\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["Ariakit","removeAccents","__","sprintf","useState","useMemo","useDeferredValue","VisuallyHidden","Icon","privateApis","componentsPrivateApis","search","check","SVG","Circle","unlock","jsx","_jsx","jsxs","_jsxs","CompositeV2","Composite","CompositeItemV2","CompositeItem","useCompositeStoreV2","useCompositeStore","radioCheck","xmlns","viewBox","children","cx","cy","r","normalizeSearchInput","input","trim","toLowerCase","EMPTY_ARRAY","getCurrentValue","filterDefinition","currentFilter","singleSelection","value","Array","isArray","getNewValue","includes","filter","v","ListBox","view","onChangeView","compositeStore","virtualFocus","focusLoop","defaultActiveId","operators","length","undefined","filters","find","f","field","currentValue","store","role","className","name","onFocusVisible","getState","activeId","move","first","render","CompositeTypeahead","elements","map","element","CompositeHover","label","onClick","_view$filters","_view$filters2","newFilters","_filter","operator","page","icon","ComboboxList","searchValue","setSearchValue","deferredSearchValue","matches","normalizedSearch","item","ComboboxProvider","resetValueOnSelect","selectedValue","setSelectedValue","_view$filters3","_view$filters4","setValue","ComboboxLabel","Combobox","autoSelect","placeholder","alwaysVisible","ComboboxItem","hideOnClick","setValueOnClick","focusOnHover","ComboboxItemValue","description","SearchWidget","props","Widget"],"sources":["@wordpress/dataviews/src/components/dataviews-filters/search-widget.tsx"],"sourcesContent":["/**\n * External dependencies\n */\n// eslint-disable-next-line no-restricted-imports\nimport * as Ariakit from '@ariakit/react';\nimport removeAccents from 'remove-accents';\n\n/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useState, useMemo, useDeferredValue } from '@wordpress/element';\nimport {\n\tVisuallyHidden,\n\tIcon,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { search, check } from '@wordpress/icons';\nimport { SVG, Circle } from '@wordpress/primitives';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\nimport type { Filter, NormalizedFilter, View } from '../../types';\n\nconst {\n\tCompositeV2: Composite,\n\tCompositeItemV2: CompositeItem,\n\tuseCompositeStoreV2: useCompositeStore,\n} = unlock( componentsPrivateApis );\n\ninterface SearchWidgetProps {\n\tview: View;\n\tfilter: NormalizedFilter;\n\tonChangeView: ( view: View ) => void;\n}\n\nconst radioCheck = (\n\t<SVG xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n\t\t<Circle cx={ 12 } cy={ 12 } r={ 3 }></Circle>\n\t</SVG>\n);\n\nfunction normalizeSearchInput( input = '' ) {\n\treturn removeAccents( input.trim().toLowerCase() );\n}\n\nconst EMPTY_ARRAY: [] = [];\nconst getCurrentValue = (\n\tfilterDefinition: NormalizedFilter,\n\tcurrentFilter?: Filter\n) => {\n\tif ( filterDefinition.singleSelection ) {\n\t\treturn currentFilter?.value;\n\t}\n\n\tif ( Array.isArray( currentFilter?.value ) ) {\n\t\treturn currentFilter.value;\n\t}\n\n\tif ( ! Array.isArray( currentFilter?.value ) && !! currentFilter?.value ) {\n\t\treturn [ currentFilter.value ];\n\t}\n\n\treturn EMPTY_ARRAY;\n};\n\nconst getNewValue = (\n\tfilterDefinition: NormalizedFilter,\n\tcurrentFilter: Filter | undefined,\n\tvalue: any\n) => {\n\tif ( filterDefinition.singleSelection ) {\n\t\treturn value;\n\t}\n\n\tif ( Array.isArray( currentFilter?.value ) ) {\n\t\treturn currentFilter.value.includes( value )\n\t\t\t? currentFilter.value.filter( ( v ) => v !== value )\n\t\t\t: [ ...currentFilter.value, value ];\n\t}\n\n\treturn [ value ];\n};\n\nfunction ListBox( { view, filter, onChangeView }: SearchWidgetProps ) {\n\tconst compositeStore = useCompositeStore( {\n\t\tvirtualFocus: true,\n\t\tfocusLoop: true,\n\t\t// When we have no or just one operator, we can set the first item as active.\n\t\t// We do that by passing `undefined` to `defaultActiveId`. Otherwise, we set it to `null`,\n\t\t// so the first item is not selected, since the focus is on the operators control.\n\t\tdefaultActiveId: filter.operators?.length === 1 ? undefined : null,\n\t} );\n\tconst currentFilter = view.filters?.find(\n\t\t( f ) => f.field === filter.field\n\t);\n\tconst currentValue = getCurrentValue( filter, currentFilter );\n\treturn (\n\t\t<Composite\n\t\t\tstore={ compositeStore }\n\t\t\trole=\"listbox\"\n\t\t\tclassName=\"dataviews-filters__search-widget-listbox\"\n\t\t\taria-label={ sprintf(\n\t\t\t\t/* translators: List of items for a filter. 1: Filter name. e.g.: \"List of: Author\". */\n\t\t\t\t__( 'List of: %1$s' ),\n\t\t\t\tfilter.name\n\t\t\t) }\n\t\t\tonFocusVisible={ () => {\n\t\t\t\tif ( ! compositeStore.getState().activeId ) {\n\t\t\t\t\tcompositeStore.move( compositeStore.first() );\n\t\t\t\t}\n\t\t\t} }\n\t\t\trender={ <Ariakit.CompositeTypeahead store={ compositeStore } /> }\n\t\t>\n\t\t\t{ filter.elements.map( ( element ) => (\n\t\t\t\t<Ariakit.CompositeHover\n\t\t\t\t\tstore={ compositeStore }\n\t\t\t\t\tkey={ element.value }\n\t\t\t\t\trender={\n\t\t\t\t\t\t<CompositeItem\n\t\t\t\t\t\t\trender={\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\taria-label={ element.label }\n\t\t\t\t\t\t\t\t\trole=\"option\"\n\t\t\t\t\t\t\t\t\tclassName=\"dataviews-filters__search-widget-listitem\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tconst newFilters = currentFilter\n\t\t\t\t\t\t\t\t\t? [\n\t\t\t\t\t\t\t\t\t\t\t...( view.filters ?? [] ).map(\n\t\t\t\t\t\t\t\t\t\t\t\t( _filter ) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t_filter.field ===\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tfilter.field\n\t\t\t\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t..._filter,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\toperator:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcurrentFilter.operator ||\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tfilter\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t.operators[ 0 ],\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tvalue: getNewValue(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tfilter,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcurrentFilter,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\telement.value\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\treturn _filter;\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t  ]\n\t\t\t\t\t\t\t\t\t: [\n\t\t\t\t\t\t\t\t\t\t\t...( view.filters ?? [] ),\n\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\tfield: filter.field,\n\t\t\t\t\t\t\t\t\t\t\t\toperator: filter.operators[ 0 ],\n\t\t\t\t\t\t\t\t\t\t\t\tvalue: getNewValue(\n\t\t\t\t\t\t\t\t\t\t\t\t\tfilter,\n\t\t\t\t\t\t\t\t\t\t\t\t\tcurrentFilter,\n\t\t\t\t\t\t\t\t\t\t\t\t\telement.value\n\t\t\t\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t  ];\n\t\t\t\t\t\t\t\tonChangeView( {\n\t\t\t\t\t\t\t\t\t...view,\n\t\t\t\t\t\t\t\t\tpage: 1,\n\t\t\t\t\t\t\t\t\tfilters: newFilters,\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>\n\t\t\t\t\t<span className=\"dataviews-filters__search-widget-listitem-check\">\n\t\t\t\t\t\t{ filter.singleSelection &&\n\t\t\t\t\t\t\tcurrentValue === element.value && (\n\t\t\t\t\t\t\t\t<Icon icon={ radioCheck } />\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ ! filter.singleSelection &&\n\t\t\t\t\t\t\tcurrentValue.includes( element.value ) && (\n\t\t\t\t\t\t\t\t<Icon icon={ check } />\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t</span>\n\t\t\t\t\t<span>{ element.label }</span>\n\t\t\t\t</Ariakit.CompositeHover>\n\t\t\t) ) }\n\t\t</Composite>\n\t);\n}\n\nfunction ComboboxList( { view, filter, onChangeView }: SearchWidgetProps ) {\n\tconst [ searchValue, setSearchValue ] = useState( '' );\n\tconst deferredSearchValue = useDeferredValue( searchValue );\n\tconst currentFilter = view.filters?.find(\n\t\t( _filter ) => _filter.field === filter.field\n\t);\n\tconst currentValue = getCurrentValue( filter, currentFilter );\n\tconst matches = useMemo( () => {\n\t\tconst normalizedSearch = normalizeSearchInput( deferredSearchValue );\n\t\treturn filter.elements.filter( ( item ) =>\n\t\t\tnormalizeSearchInput( item.label ).includes( normalizedSearch )\n\t\t);\n\t}, [ filter.elements, deferredSearchValue ] );\n\treturn (\n\t\t<Ariakit.ComboboxProvider\n\t\t\tresetValueOnSelect={ false }\n\t\t\tselectedValue={ currentValue }\n\t\t\tsetSelectedValue={ ( value ) => {\n\t\t\t\tconst newFilters = currentFilter\n\t\t\t\t\t? [\n\t\t\t\t\t\t\t...( view.filters ?? [] ).map( ( _filter ) => {\n\t\t\t\t\t\t\t\tif ( _filter.field === filter.field ) {\n\t\t\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\t\t\t..._filter,\n\t\t\t\t\t\t\t\t\t\toperator:\n\t\t\t\t\t\t\t\t\t\t\tcurrentFilter.operator ||\n\t\t\t\t\t\t\t\t\t\t\tfilter.operators[ 0 ],\n\t\t\t\t\t\t\t\t\t\tvalue,\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\treturn _filter;\n\t\t\t\t\t\t\t} ),\n\t\t\t\t\t  ]\n\t\t\t\t\t: [\n\t\t\t\t\t\t\t...( view.filters ?? [] ),\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tfield: filter.field,\n\t\t\t\t\t\t\t\toperator: filter.operators[ 0 ],\n\t\t\t\t\t\t\t\tvalue,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t  ];\n\t\t\t\tonChangeView( {\n\t\t\t\t\t...view,\n\t\t\t\t\tpage: 1,\n\t\t\t\t\tfilters: newFilters,\n\t\t\t\t} );\n\t\t\t} }\n\t\t\tsetValue={ setSearchValue }\n\t\t>\n\t\t\t<div className=\"dataviews-filters__search-widget-filter-combobox__wrapper\">\n\t\t\t\t<Ariakit.ComboboxLabel\n\t\t\t\t\trender={\n\t\t\t\t\t\t<VisuallyHidden>\n\t\t\t\t\t\t\t{ __( 'Search items' ) }\n\t\t\t\t\t\t</VisuallyHidden>\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Search items' ) }\n\t\t\t\t</Ariakit.ComboboxLabel>\n\t\t\t\t<Ariakit.Combobox\n\t\t\t\t\tautoSelect=\"always\"\n\t\t\t\t\tplaceholder={ __( 'Search' ) }\n\t\t\t\t\tclassName=\"dataviews-filters__search-widget-filter-combobox__input\"\n\t\t\t\t/>\n\t\t\t\t<div className=\"dataviews-filters__search-widget-filter-combobox__icon\">\n\t\t\t\t\t<Icon icon={ search } />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<Ariakit.ComboboxList\n\t\t\t\tclassName=\"dataviews-filters__search-widget-filter-combobox-list\"\n\t\t\t\talwaysVisible\n\t\t\t>\n\t\t\t\t{ matches.map( ( element ) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<Ariakit.ComboboxItem\n\t\t\t\t\t\t\tkey={ element.value }\n\t\t\t\t\t\t\tvalue={ element.value }\n\t\t\t\t\t\t\tclassName=\"dataviews-filters__search-widget-listitem\"\n\t\t\t\t\t\t\thideOnClick={ false }\n\t\t\t\t\t\t\tsetValueOnClick={ false }\n\t\t\t\t\t\t\tfocusOnHover\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<span className=\"dataviews-filters__search-widget-listitem-check\">\n\t\t\t\t\t\t\t\t{ filter.singleSelection &&\n\t\t\t\t\t\t\t\t\tcurrentValue === element.value && (\n\t\t\t\t\t\t\t\t\t\t<Icon icon={ radioCheck } />\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t{ ! filter.singleSelection &&\n\t\t\t\t\t\t\t\t\tcurrentValue.includes( element.value ) && (\n\t\t\t\t\t\t\t\t\t\t<Icon icon={ check } />\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t<Ariakit.ComboboxItemValue\n\t\t\t\t\t\t\t\t\tclassName=\"dataviews-filters__search-widget-filter-combobox-item-value\"\n\t\t\t\t\t\t\t\t\tvalue={ element.label }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t{ !! element.description && (\n\t\t\t\t\t\t\t\t\t<span className=\"dataviews-filters__search-widget-listitem-description\">\n\t\t\t\t\t\t\t\t\t\t{ element.description }\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</Ariakit.ComboboxItem>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t\t{ ! matches.length && <p>{ __( 'No results found' ) }</p> }\n\t\t\t</Ariakit.ComboboxList>\n\t\t</Ariakit.ComboboxProvider>\n\t);\n}\n\nexport default function SearchWidget( props: SearchWidgetProps ) {\n\tconst Widget = props.filter.elements.length > 10 ? ComboboxList : ListBox;\n\treturn <Widget { ...props } />;\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -11,7 +11,7 @@ import { useContext } from '@wordpress/element';
  * Internal dependencies
  */
 import DataViewsContext from '../dataviews-context';
-import { VIEW_LAYOUTS } from '../../layouts';
+import { VIEW_LAYOUTS } from '../../dataviews-layouts';
 import { jsx as _jsx } from "react/jsx-runtime";
 export default function DataViewsLayout() {
   const {

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

@@ -1 +1 @@
-{"version":3,"names":["useContext","DataViewsContext","VIEW_LAYOUTS","jsx","_jsx","DataViewsLayout","actions","data","fields","getItemId","isLoading","view","onChangeView","selection","onChangeSelection","setOpenedFilter","density","ViewComponent","find","v","type","component"],"sources":["@wordpress/dataviews/src/components/dataviews-layout/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ComponentType } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport DataViewsContext from '../dataviews-context';\nimport { VIEW_LAYOUTS } from '../../layouts';\nimport type { ViewBaseProps } from '../../types';\n\nexport default function DataViewsLayout() {\n\tconst {\n\t\tactions = [],\n\t\tdata,\n\t\tfields,\n\t\tgetItemId,\n\t\tisLoading,\n\t\tview,\n\t\tonChangeView,\n\t\tselection,\n\t\tonChangeSelection,\n\t\tsetOpenedFilter,\n\t\tdensity,\n\t} = useContext( DataViewsContext );\n\n\tconst ViewComponent = VIEW_LAYOUTS.find( ( v ) => v.type === view.type )\n\t\t?.component as ComponentType< ViewBaseProps< any > >;\n\n\treturn (\n\t\t<ViewComponent\n\t\t\tactions={ actions }\n\t\t\tdata={ data }\n\t\t\tfields={ fields }\n\t\t\tgetItemId={ getItemId }\n\t\t\tisLoading={ isLoading }\n\t\t\tonChangeView={ onChangeView }\n\t\t\tonChangeSelection={ onChangeSelection }\n\t\t\tselection={ selection }\n\t\t\tsetOpenedFilter={ setOpenedFilter }\n\t\t\tview={ view }\n\t\t\tdensity={ density }\n\t\t/>\n\t);\n}\n"],"mappings":"AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,UAAU,QAAQ,oBAAoB;;AAE/C;AACA;AACA;AACA,OAAOC,gBAAgB,MAAM,sBAAsB;AACnD,SAASC,YAAY,QAAQ,eAAe;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAG7C,eAAe,SAASC,eAAeA,CAAA,EAAG;EACzC,MAAM;IACLC,OAAO,GAAG,EAAE;IACZC,IAAI;IACJC,MAAM;IACNC,SAAS;IACTC,SAAS;IACTC,IAAI;IACJC,YAAY;IACZC,SAAS;IACTC,iBAAiB;IACjBC,eAAe;IACfC;EACD,CAAC,GAAGhB,UAAU,CAAEC,gBAAiB,CAAC;EAElC,MAAMgB,aAAa,GAAGf,YAAY,CAACgB,IAAI,CAAIC,CAAC,IAAMA,CAAC,CAACC,IAAI,KAAKT,IAAI,CAACS,IAAK,CAAC,EACrEC,SAAkD;EAErD,oBACCjB,IAAA,CAACa,aAAa;IACbX,OAAO,EAAGA,OAAS;IACnBC,IAAI,EAAGA,IAAM;IACbC,MAAM,EAAGA,MAAQ;IACjBC,SAAS,EAAGA,SAAW;IACvBC,SAAS,EAAGA,SAAW;IACvBE,YAAY,EAAGA,YAAc;IAC7BE,iBAAiB,EAAGA,iBAAmB;IACvCD,SAAS,EAAGA,SAAW;IACvBE,eAAe,EAAGA,eAAiB;IACnCJ,IAAI,EAAGA,IAAM;IACbK,OAAO,EAAGA;EAAS,CACnB,CAAC;AAEJ","ignoreList":[]}
+{"version":3,"names":["useContext","DataViewsContext","VIEW_LAYOUTS","jsx","_jsx","DataViewsLayout","actions","data","fields","getItemId","isLoading","view","onChangeView","selection","onChangeSelection","setOpenedFilter","density","ViewComponent","find","v","type","component"],"sources":["@wordpress/dataviews/src/components/dataviews-layout/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ComponentType } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport DataViewsContext from '../dataviews-context';\nimport { VIEW_LAYOUTS } from '../../dataviews-layouts';\nimport type { ViewBaseProps } from '../../types';\n\nexport default function DataViewsLayout() {\n\tconst {\n\t\tactions = [],\n\t\tdata,\n\t\tfields,\n\t\tgetItemId,\n\t\tisLoading,\n\t\tview,\n\t\tonChangeView,\n\t\tselection,\n\t\tonChangeSelection,\n\t\tsetOpenedFilter,\n\t\tdensity,\n\t} = useContext( DataViewsContext );\n\n\tconst ViewComponent = VIEW_LAYOUTS.find( ( v ) => v.type === view.type )\n\t\t?.component as ComponentType< ViewBaseProps< any > >;\n\n\treturn (\n\t\t<ViewComponent\n\t\t\tactions={ actions }\n\t\t\tdata={ data }\n\t\t\tfields={ fields }\n\t\t\tgetItemId={ getItemId }\n\t\t\tisLoading={ isLoading }\n\t\t\tonChangeView={ onChangeView }\n\t\t\tonChangeSelection={ onChangeSelection }\n\t\t\tselection={ selection }\n\t\t\tsetOpenedFilter={ setOpenedFilter }\n\t\t\tview={ view }\n\t\t\tdensity={ density }\n\t\t/>\n\t);\n}\n"],"mappings":"AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,UAAU,QAAQ,oBAAoB;;AAE/C;AACA;AACA;AACA,OAAOC,gBAAgB,MAAM,sBAAsB;AACnD,SAASC,YAAY,QAAQ,yBAAyB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAGvD,eAAe,SAASC,eAAeA,CAAA,EAAG;EACzC,MAAM;IACLC,OAAO,GAAG,EAAE;IACZC,IAAI;IACJC,MAAM;IACNC,SAAS;IACTC,SAAS;IACTC,IAAI;IACJC,YAAY;IACZC,SAAS;IACTC,iBAAiB;IACjBC,eAAe;IACfC;EACD,CAAC,GAAGhB,UAAU,CAAEC,gBAAiB,CAAC;EAElC,MAAMgB,aAAa,GAAGf,YAAY,CAACgB,IAAI,CAAIC,CAAC,IAAMA,CAAC,CAACC,IAAI,KAAKT,IAAI,CAACS,IAAK,CAAC,EACrEC,SAAkD;EAErD,oBACCjB,IAAA,CAACa,aAAa;IACbX,OAAO,EAAGA,OAAS;IACnBC,IAAI,EAAGA,IAAM;IACbC,MAAM,EAAGA,MAAQ;IACjBC,SAAS,EAAGA,SAAW;IACvBC,SAAS,EAAGA,SAAW;IACvBE,YAAY,EAAGA,YAAc;IAC7BE,iBAAiB,EAAGA,iBAAmB;IACvCD,SAAS,EAAGA,SAAW;IACvBE,eAAe,EAAGA,eAAiB;IACnCJ,IAAI,EAAGA,IAAM;IACbK,OAAO,EAAGA;EAAS,CACnB,CAAC;AAEJ","ignoreList":[]}

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

@@ -26,6 +26,16 @@ function DataViewsPagination() {
     return null;
   }
   const currentPage = (_view$page = view.page) !== null && _view$page !== void 0 ? _view$page : 1;
+  const pageSelectOptions = Array.from(Array(totalPages)).map((_, i) => {
+    const page = i + 1;
+    return {
+      value: page.toString(),
+      label: page.toString(),
+      'aria-label': currentPage === page ? sprintf(
+      // translators: Current page number in total number of pages
+      __('Page %1$s of %2$s'), currentPage, totalPages) : page.toString()
+    };
+  });
   return !!totalItems && totalPages !== 1 && /*#__PURE__*/_jsxs(HStack, {
     expanded: false,
     spacing: 6,
@@ -34,29 +44,27 @@ function DataViewsPagination() {
     children: [/*#__PURE__*/_jsx(HStack, {
       justify: "flex-start",
       expanded: false,
-      spacing: 2,
-      className: "dataviews-pagination__page-selection",
+      spacing: 1,
+      className: "dataviews-pagination__page-select",
       children: createInterpolateElement(sprintf(
-      // translators: %s: Total number of pages.
-      _x('Page <CurrentPageControl /> of %s', 'paging'), totalPages), {
-        CurrentPageControl: /*#__PURE__*/_jsx(SelectControl, {
+      // translators: 1: Current page number, 2: Total number of pages.
+      _x('<div>Page</div>%1$s<div>of %2$s</div>', 'paging'), '<CurrentPage />', totalPages), {
+        div: /*#__PURE__*/_jsx("div", {
+          "aria-hidden": true
+        }),
+        CurrentPage: /*#__PURE__*/_jsx(SelectControl, {
           "aria-label": __('Current page'),
-          value: view.page?.toString(),
-          options: Array.from(Array(totalPages)).map((_, i) => {
-            const page = i + 1;
-            return {
-              value: page.toString(),
-              label: page.toString()
-            };
-          }),
+          value: currentPage.toString(),
+          options: pageSelectOptions,
           onChange: newValue => {
             onChangeView({
               ...view,
               page: +newValue
             });
           },
-          size: "compact",
-          __nextHasNoMarginBottom: true
+          size: "small",
+          __nextHasNoMarginBottom: true,
+          variant: "minimal"
         })
       })
     }), /*#__PURE__*/_jsxs(HStack, {

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

@@ -1 +1 @@
-{"version":3,"names":["Button","__experimentalHStack","HStack","SelectControl","createInterpolateElement","memo","useContext","sprintf","__","_x","next","previous","DataViewsContext","jsx","_jsx","jsxs","_jsxs","DataViewsPagination","_view$page","view","onChangeView","paginationInfo","totalItems","totalPages","currentPage","page","expanded","spacing","justify","className","children","CurrentPageControl","value","toString","options","Array","from","map","_","i","label","onChange","newValue","size","__nextHasNoMarginBottom","onClick","disabled","accessibleWhenDisabled","icon","showTooltip","tooltipPosition"],"sources":["@wordpress/dataviews/src/components/dataviews-pagination/index.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\t__experimentalHStack as HStack,\n\tSelectControl,\n} from '@wordpress/components';\nimport { createInterpolateElement, memo, useContext } from '@wordpress/element';\nimport { sprintf, __, _x } from '@wordpress/i18n';\nimport { next, previous } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport DataViewsContext from '../dataviews-context';\n\nfunction DataViewsPagination() {\n\tconst {\n\t\tview,\n\t\tonChangeView,\n\t\tpaginationInfo: { totalItems = 0, totalPages },\n\t} = useContext( DataViewsContext );\n\tif ( ! totalItems || ! totalPages ) {\n\t\treturn null;\n\t}\n\tconst currentPage = view.page ?? 1;\n\treturn (\n\t\t!! totalItems &&\n\t\ttotalPages !== 1 && (\n\t\t\t<HStack\n\t\t\t\texpanded={ false }\n\t\t\t\tspacing={ 6 }\n\t\t\t\tjustify=\"end\"\n\t\t\t\tclassName=\"dataviews-pagination\"\n\t\t\t>\n\t\t\t\t<HStack\n\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\texpanded={ false }\n\t\t\t\t\tspacing={ 2 }\n\t\t\t\t\tclassName=\"dataviews-pagination__page-selection\"\n\t\t\t\t>\n\t\t\t\t\t{ createInterpolateElement(\n\t\t\t\t\t\tsprintf(\n\t\t\t\t\t\t\t// translators: %s: Total number of pages.\n\t\t\t\t\t\t\t_x( 'Page <CurrentPageControl /> of %s', 'paging' ),\n\t\t\t\t\t\t\ttotalPages\n\t\t\t\t\t\t),\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tCurrentPageControl: (\n\t\t\t\t\t\t\t\t<SelectControl\n\t\t\t\t\t\t\t\t\taria-label={ __( 'Current page' ) }\n\t\t\t\t\t\t\t\t\tvalue={ view.page?.toString() }\n\t\t\t\t\t\t\t\t\toptions={ Array.from(\n\t\t\t\t\t\t\t\t\t\tArray( totalPages )\n\t\t\t\t\t\t\t\t\t).map( ( _, i ) => {\n\t\t\t\t\t\t\t\t\t\tconst page = i + 1;\n\t\t\t\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\t\t\t\tvalue: page.toString(),\n\t\t\t\t\t\t\t\t\t\t\tlabel: page.toString(),\n\t\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\t\t\t\t\tonChangeView( {\n\t\t\t\t\t\t\t\t\t\t\t...view,\n\t\t\t\t\t\t\t\t\t\t\tpage: +newValue,\n\t\t\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\t\t\t\t__nextHasNoMarginBottom\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</HStack>\n\t\t\t\t<HStack expanded={ false } spacing={ 1 }>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tonClick={ () =>\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: currentPage - 1,\n\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t}\n\t\t\t\t\t\tdisabled={ currentPage === 1 }\n\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\tlabel={ __( 'Previous page' ) }\n\t\t\t\t\t\ticon={ previous }\n\t\t\t\t\t\tshowTooltip\n\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\ttooltipPosition=\"top\"\n\t\t\t\t\t/>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\tonChangeView( { ...view, page: currentPage + 1 } )\n\t\t\t\t\t\t}\n\t\t\t\t\t\tdisabled={ currentPage >= totalPages }\n\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\tlabel={ __( 'Next page' ) }\n\t\t\t\t\t\ticon={ next }\n\t\t\t\t\t\tshowTooltip\n\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\ttooltipPosition=\"top\"\n\t\t\t\t\t/>\n\t\t\t\t</HStack>\n\t\t\t</HStack>\n\t\t)\n\t);\n}\n\nexport default memo( DataViewsPagination );\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["Button","__experimentalHStack","HStack","SelectControl","createInterpolateElement","memo","useContext","sprintf","__","_x","next","previous","DataViewsContext","jsx","_jsx","jsxs","_jsxs","DataViewsPagination","_view$page","view","onChangeView","paginationInfo","totalItems","totalPages","currentPage","page","pageSelectOptions","Array","from","map","_","i","value","toString","label","expanded","spacing","justify","className","children","div","CurrentPage","options","onChange","newValue","size","__nextHasNoMarginBottom","variant","onClick","disabled","accessibleWhenDisabled","icon","showTooltip","tooltipPosition"],"sources":["@wordpress/dataviews/src/components/dataviews-pagination/index.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\t__experimentalHStack as HStack,\n\tSelectControl,\n} from '@wordpress/components';\nimport { createInterpolateElement, memo, useContext } from '@wordpress/element';\nimport { sprintf, __, _x } from '@wordpress/i18n';\nimport { next, previous } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport DataViewsContext from '../dataviews-context';\n\nfunction DataViewsPagination() {\n\tconst {\n\t\tview,\n\t\tonChangeView,\n\t\tpaginationInfo: { totalItems = 0, totalPages },\n\t} = useContext( DataViewsContext );\n\n\tif ( ! totalItems || ! totalPages ) {\n\t\treturn null;\n\t}\n\n\tconst currentPage = view.page ?? 1;\n\tconst pageSelectOptions = Array.from( Array( totalPages ) ).map(\n\t\t( _, i ) => {\n\t\t\tconst page = i + 1;\n\t\t\treturn {\n\t\t\t\tvalue: page.toString(),\n\t\t\t\tlabel: page.toString(),\n\t\t\t\t'aria-label':\n\t\t\t\t\tcurrentPage === page\n\t\t\t\t\t\t? sprintf(\n\t\t\t\t\t\t\t\t// translators: Current page number in total number of pages\n\t\t\t\t\t\t\t\t__( 'Page %1$s of %2$s' ),\n\t\t\t\t\t\t\t\tcurrentPage,\n\t\t\t\t\t\t\t\ttotalPages\n\t\t\t\t\t\t  )\n\t\t\t\t\t\t: page.toString(),\n\t\t\t};\n\t\t}\n\t);\n\n\treturn (\n\t\t!! totalItems &&\n\t\ttotalPages !== 1 && (\n\t\t\t<HStack\n\t\t\t\texpanded={ false }\n\t\t\t\tspacing={ 6 }\n\t\t\t\tjustify=\"end\"\n\t\t\t\tclassName=\"dataviews-pagination\"\n\t\t\t>\n\t\t\t\t<HStack\n\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\texpanded={ false }\n\t\t\t\t\tspacing={ 1 }\n\t\t\t\t\tclassName=\"dataviews-pagination__page-select\"\n\t\t\t\t>\n\t\t\t\t\t{ createInterpolateElement(\n\t\t\t\t\t\tsprintf(\n\t\t\t\t\t\t\t// translators: 1: Current page number, 2: Total number of pages.\n\t\t\t\t\t\t\t_x(\n\t\t\t\t\t\t\t\t'<div>Page</div>%1$s<div>of %2$s</div>',\n\t\t\t\t\t\t\t\t'paging'\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t'<CurrentPage />',\n\t\t\t\t\t\t\ttotalPages\n\t\t\t\t\t\t),\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tdiv: <div aria-hidden />,\n\t\t\t\t\t\t\tCurrentPage: (\n\t\t\t\t\t\t\t\t<SelectControl\n\t\t\t\t\t\t\t\t\taria-label={ __( 'Current page' ) }\n\t\t\t\t\t\t\t\t\tvalue={ currentPage.toString() }\n\t\t\t\t\t\t\t\t\toptions={ pageSelectOptions }\n\t\t\t\t\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\t\t\t\t\tonChangeView( {\n\t\t\t\t\t\t\t\t\t\t\t...view,\n\t\t\t\t\t\t\t\t\t\t\tpage: +newValue,\n\t\t\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t\t\t\tvariant=\"minimal\"\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</HStack>\n\t\t\t\t<HStack expanded={ false } spacing={ 1 }>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tonClick={ () =>\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: currentPage - 1,\n\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t}\n\t\t\t\t\t\tdisabled={ currentPage === 1 }\n\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\tlabel={ __( 'Previous page' ) }\n\t\t\t\t\t\ticon={ previous }\n\t\t\t\t\t\tshowTooltip\n\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\ttooltipPosition=\"top\"\n\t\t\t\t\t/>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\tonChangeView( { ...view, page: currentPage + 1 } )\n\t\t\t\t\t\t}\n\t\t\t\t\t\tdisabled={ currentPage >= totalPages }\n\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\tlabel={ __( 'Next page' ) }\n\t\t\t\t\t\ticon={ next }\n\t\t\t\t\t\tshowTooltip\n\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\ttooltipPosition=\"top\"\n\t\t\t\t\t/>\n\t\t\t\t</HStack>\n\t\t\t</HStack>\n\t\t)\n\t);\n}\n\nexport default memo( DataViewsPagination );\n"],"mappings":"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","ignoreList":[]}

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

@@ -30,14 +30,17 @@ const DataViewsSearch = memo(function Search({
     viewRef.current = view;
   }, [onChangeView, view]);
   useEffect(() => {
-    onChangeViewRef.current({
-      ...viewRef.current,
-      page: 1,
-      search: debouncedSearch
-    });
+    if (debouncedSearch !== viewRef.current?.search) {
+      onChangeViewRef.current({
+        ...viewRef.current,
+        page: 1,
+        search: debouncedSearch
+      });
+    }
   }, [debouncedSearch]);
   const searchLabel = label || __('Search');
   return /*#__PURE__*/_jsx(SearchControl, {
+    className: "dataviews-search",
     __nextHasNoMarginBottom: true,
     onChange: setSearch,
     value: search,

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

@@ -1 +1 @@
-{"version":3,"names":["__","useEffect","useRef","memo","useContext","SearchControl","useDebouncedInput","DataViewsContext","jsx","_jsx","DataViewsSearch","Search","label","view","onChangeView","search","setSearch","debouncedSearch","_view$search","onChangeViewRef","viewRef","current","page","searchLabel","__nextHasNoMarginBottom","onChange","value","placeholder","size"],"sources":["@wordpress/dataviews/src/components/dataviews-search/index.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useEffect, useRef, memo, useContext } from '@wordpress/element';\nimport { SearchControl } from '@wordpress/components';\nimport { useDebouncedInput } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport DataViewsContext from '../dataviews-context';\n\ninterface SearchProps {\n\tlabel?: string;\n}\n\nconst DataViewsSearch = memo( function Search( { label }: SearchProps ) {\n\tconst { view, onChangeView } = useContext( DataViewsContext );\n\tconst [ search, setSearch, debouncedSearch ] = useDebouncedInput(\n\t\tview.search\n\t);\n\tuseEffect( () => {\n\t\tsetSearch( view.search ?? '' );\n\t}, [ view.search, setSearch ] );\n\tconst onChangeViewRef = useRef( onChangeView );\n\tconst viewRef = useRef( view );\n\tuseEffect( () => {\n\t\tonChangeViewRef.current = onChangeView;\n\t\tviewRef.current = view;\n\t}, [ onChangeView, view ] );\n\tuseEffect( () => {\n\t\tonChangeViewRef.current( {\n\t\t\t...viewRef.current,\n\t\t\tpage: 1,\n\t\t\tsearch: debouncedSearch,\n\t\t} );\n\t}, [ debouncedSearch ] );\n\tconst searchLabel = label || __( 'Search' );\n\treturn (\n\t\t<SearchControl\n\t\t\t__nextHasNoMarginBottom\n\t\t\tonChange={ setSearch }\n\t\t\tvalue={ search }\n\t\t\tlabel={ searchLabel }\n\t\t\tplaceholder={ searchLabel }\n\t\t\tsize=\"compact\"\n\t\t/>\n\t);\n} );\n\nexport default DataViewsSearch;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;AACpC,SAASC,SAAS,EAAEC,MAAM,EAAEC,IAAI,EAAEC,UAAU,QAAQ,oBAAoB;AACxE,SAASC,aAAa,QAAQ,uBAAuB;AACrD,SAASC,iBAAiB,QAAQ,oBAAoB;;AAEtD;AACA;AACA;AACA,OAAOC,gBAAgB,MAAM,sBAAsB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAMpD,MAAMC,eAAe,GAAGP,IAAI,CAAE,SAASQ,MAAMA,CAAE;EAAEC;AAAmB,CAAC,EAAG;EACvE,MAAM;IAAEC,IAAI;IAAEC;EAAa,CAAC,GAAGV,UAAU,CAAEG,gBAAiB,CAAC;EAC7D,MAAM,CAAEQ,MAAM,EAAEC,SAAS,EAAEC,eAAe,CAAE,GAAGX,iBAAiB,CAC/DO,IAAI,CAACE,MACN,CAAC;EACDd,SAAS,CAAE,MAAM;IAAA,IAAAiB,YAAA;IAChBF,SAAS,EAAAE,YAAA,GAAEL,IAAI,CAACE,MAAM,cAAAG,YAAA,cAAAA,YAAA,GAAI,EAAG,CAAC;EAC/B,CAAC,EAAE,CAAEL,IAAI,CAACE,MAAM,EAAEC,SAAS,CAAG,CAAC;EAC/B,MAAMG,eAAe,GAAGjB,MAAM,CAAEY,YAAa,CAAC;EAC9C,MAAMM,OAAO,GAAGlB,MAAM,CAAEW,IAAK,CAAC;EAC9BZ,SAAS,CAAE,MAAM;IAChBkB,eAAe,CAACE,OAAO,GAAGP,YAAY;IACtCM,OAAO,CAACC,OAAO,GAAGR,IAAI;EACvB,CAAC,EAAE,CAAEC,YAAY,EAAED,IAAI,CAAG,CAAC;EAC3BZ,SAAS,CAAE,MAAM;IAChBkB,eAAe,CAACE,OAAO,CAAE;MACxB,GAAGD,OAAO,CAACC,OAAO;MAClBC,IAAI,EAAE,CAAC;MACPP,MAAM,EAAEE;IACT,CAAE,CAAC;EACJ,CAAC,EAAE,CAAEA,eAAe,CAAG,CAAC;EACxB,MAAMM,WAAW,GAAGX,KAAK,IAAIZ,EAAE,CAAE,QAAS,CAAC;EAC3C,oBACCS,IAAA,CAACJ,aAAa;IACbmB,uBAAuB;IACvBC,QAAQ,EAAGT,SAAW;IACtBU,KAAK,EAAGX,MAAQ;IAChBH,KAAK,EAAGW,WAAa;IACrBI,WAAW,EAAGJ,WAAa;IAC3BK,IAAI,EAAC;EAAS,CACd,CAAC;AAEJ,CAAE,CAAC;AAEH,eAAelB,eAAe","ignoreList":[]}
+{"version":3,"names":["__","useEffect","useRef","memo","useContext","SearchControl","useDebouncedInput","DataViewsContext","jsx","_jsx","DataViewsSearch","Search","label","view","onChangeView","search","setSearch","debouncedSearch","_view$search","onChangeViewRef","viewRef","current","page","searchLabel","className","__nextHasNoMarginBottom","onChange","value","placeholder","size"],"sources":["@wordpress/dataviews/src/components/dataviews-search/index.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useEffect, useRef, memo, useContext } from '@wordpress/element';\nimport { SearchControl } from '@wordpress/components';\nimport { useDebouncedInput } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport DataViewsContext from '../dataviews-context';\n\ninterface SearchProps {\n\tlabel?: string;\n}\n\nconst DataViewsSearch = memo( function Search( { label }: SearchProps ) {\n\tconst { view, onChangeView } = useContext( DataViewsContext );\n\tconst [ search, setSearch, debouncedSearch ] = useDebouncedInput(\n\t\tview.search\n\t);\n\tuseEffect( () => {\n\t\tsetSearch( view.search ?? '' );\n\t}, [ view.search, setSearch ] );\n\tconst onChangeViewRef = useRef( onChangeView );\n\tconst viewRef = useRef( view );\n\tuseEffect( () => {\n\t\tonChangeViewRef.current = onChangeView;\n\t\tviewRef.current = view;\n\t}, [ onChangeView, view ] );\n\tuseEffect( () => {\n\t\tif ( debouncedSearch !== viewRef.current?.search ) {\n\t\t\tonChangeViewRef.current( {\n\t\t\t\t...viewRef.current,\n\t\t\t\tpage: 1,\n\t\t\t\tsearch: debouncedSearch,\n\t\t\t} );\n\t\t}\n\t}, [ debouncedSearch ] );\n\tconst searchLabel = label || __( 'Search' );\n\treturn (\n\t\t<SearchControl\n\t\t\tclassName=\"dataviews-search\"\n\t\t\t__nextHasNoMarginBottom\n\t\t\tonChange={ setSearch }\n\t\t\tvalue={ search }\n\t\t\tlabel={ searchLabel }\n\t\t\tplaceholder={ searchLabel }\n\t\t\tsize=\"compact\"\n\t\t/>\n\t);\n} );\n\nexport default DataViewsSearch;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;AACpC,SAASC,SAAS,EAAEC,MAAM,EAAEC,IAAI,EAAEC,UAAU,QAAQ,oBAAoB;AACxE,SAASC,aAAa,QAAQ,uBAAuB;AACrD,SAASC,iBAAiB,QAAQ,oBAAoB;;AAEtD;AACA;AACA;AACA,OAAOC,gBAAgB,MAAM,sBAAsB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAMpD,MAAMC,eAAe,GAAGP,IAAI,CAAE,SAASQ,MAAMA,CAAE;EAAEC;AAAmB,CAAC,EAAG;EACvE,MAAM;IAAEC,IAAI;IAAEC;EAAa,CAAC,GAAGV,UAAU,CAAEG,gBAAiB,CAAC;EAC7D,MAAM,CAAEQ,MAAM,EAAEC,SAAS,EAAEC,eAAe,CAAE,GAAGX,iBAAiB,CAC/DO,IAAI,CAACE,MACN,CAAC;EACDd,SAAS,CAAE,MAAM;IAAA,IAAAiB,YAAA;IAChBF,SAAS,EAAAE,YAAA,GAAEL,IAAI,CAACE,MAAM,cAAAG,YAAA,cAAAA,YAAA,GAAI,EAAG,CAAC;EAC/B,CAAC,EAAE,CAAEL,IAAI,CAACE,MAAM,EAAEC,SAAS,CAAG,CAAC;EAC/B,MAAMG,eAAe,GAAGjB,MAAM,CAAEY,YAAa,CAAC;EAC9C,MAAMM,OAAO,GAAGlB,MAAM,CAAEW,IAAK,CAAC;EAC9BZ,SAAS,CAAE,MAAM;IAChBkB,eAAe,CAACE,OAAO,GAAGP,YAAY;IACtCM,OAAO,CAACC,OAAO,GAAGR,IAAI;EACvB,CAAC,EAAE,CAAEC,YAAY,EAAED,IAAI,CAAG,CAAC;EAC3BZ,SAAS,CAAE,MAAM;IAChB,IAAKgB,eAAe,KAAKG,OAAO,CAACC,OAAO,EAAEN,MAAM,EAAG;MAClDI,eAAe,CAACE,OAAO,CAAE;QACxB,GAAGD,OAAO,CAACC,OAAO;QAClBC,IAAI,EAAE,CAAC;QACPP,MAAM,EAAEE;MACT,CAAE,CAAC;IACJ;EACD,CAAC,EAAE,CAAEA,eAAe,CAAG,CAAC;EACxB,MAAMM,WAAW,GAAGX,KAAK,IAAIZ,EAAE,CAAE,QAAS,CAAC;EAC3C,oBACCS,IAAA,CAACJ,aAAa;IACbmB,SAAS,EAAC,kBAAkB;IAC5BC,uBAAuB;IACvBC,QAAQ,EAAGV,SAAW;IACtBW,KAAK,EAAGZ,MAAQ;IAChBH,KAAK,EAAGW,WAAa;IACrBK,WAAW,EAAGL,WAAa;IAC3BM,IAAI,EAAC;EAAS,CACd,CAAC;AAEJ,CAAE,CAAC;AAEH,eAAenB,eAAe","ignoreList":[]}