@wordpress/dataviews 9.1.1-next.233ccab9b.0 → 10.0.0

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

@@ -1,35 +1,38 @@
-/**
- * WordPress dependencies
- */
-import { Button } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import { jsx as _jsx } from "react/jsx-runtime";
-export default function ResetFilter({
+import { jsx } from "react/jsx-runtime";
+import { Button } from "@wordpress/components";
+import { __ } from "@wordpress/i18n";
+function ResetFilter({
   filters,
   view,
   onChangeView
 }) {
-  const isPrimary = field => filters.some(_filter => _filter.field === field && _filter.isPrimary);
-  const isDisabled = !view.search && !view.filters?.some(_filter => !_filter.isLocked && (_filter.value !== undefined || !isPrimary(_filter.field)));
-  return /*#__PURE__*/_jsx(Button, {
-    disabled: isDisabled,
-    accessibleWhenDisabled: true,
-    size: "compact",
-    variant: "tertiary",
-    className: "dataviews-filters__reset-button",
-    onClick: () => {
-      onChangeView({
-        ...view,
-        page: 1,
-        search: '',
-        filters: view.filters?.filter(f => !!f.isLocked) || []
-      });
-    },
-    children: __('Reset')
-  });
+  const isPrimary = (field) => filters.some(
+    (_filter) => _filter.field === field && _filter.isPrimary
+  );
+  const isDisabled = !view.search && !view.filters?.some(
+    (_filter) => !_filter.isLocked && (_filter.value !== void 0 || !isPrimary(_filter.field))
+  );
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      disabled: isDisabled,
+      accessibleWhenDisabled: true,
+      size: "compact",
+      variant: "tertiary",
+      className: "dataviews-filters__reset-button",
+      onClick: () => {
+        onChangeView({
+          ...view,
+          page: 1,
+          search: "",
+          filters: view.filters?.filter((f) => !!f.isLocked) || []
+        });
+      },
+      children: __("Reset")
+    }
+  );
 }
-//# sourceMappingURL=reset-filters.js.map
+export {
+  ResetFilter as default
+};
+//# sourceMappingURL=reset-filters.js.map

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

@@ -1 +1,7 @@
-{"version":3,"names":["Button","__","jsx","_jsx","ResetFilter","filters","view","onChangeView","isPrimary","field","some","_filter","isDisabled","search","isLocked","value","undefined","disabled","accessibleWhenDisabled","size","variant","className","onClick","page","filter","f","children"],"sources":["@wordpress/dataviews/src/components/dataviews-filters/reset-filters.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { Button } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport type { NormalizedFilter, View } from '../../types';\n\ninterface ResetFilterProps {\n\tfilters: NormalizedFilter[];\n\tview: View;\n\tonChangeView: ( view: View ) => void;\n}\n\nexport default function ResetFilter( {\n\tfilters,\n\tview,\n\tonChangeView,\n}: ResetFilterProps ) {\n\tconst isPrimary = ( field: string ) =>\n\t\tfilters.some(\n\t\t\t( _filter ) => _filter.field === field && _filter.isPrimary\n\t\t);\n\tconst isDisabled =\n\t\t! view.search &&\n\t\t! view.filters?.some(\n\t\t\t( _filter ) =>\n\t\t\t\t! _filter.isLocked &&\n\t\t\t\t( _filter.value !== undefined || ! isPrimary( _filter.field ) )\n\t\t);\n\treturn (\n\t\t<Button\n\t\t\tdisabled={ isDisabled }\n\t\t\taccessibleWhenDisabled\n\t\t\tsize=\"compact\"\n\t\t\tvariant=\"tertiary\"\n\t\t\tclassName=\"dataviews-filters__reset-button\"\n\t\t\tonClick={ () => {\n\t\t\t\tonChangeView( {\n\t\t\t\t\t...view,\n\t\t\t\t\tpage: 1,\n\t\t\t\t\tsearch: '',\n\t\t\t\t\tfilters:\n\t\t\t\t\t\tview.filters?.filter( ( f ) => !! f.isLocked ) || [],\n\t\t\t\t} );\n\t\t\t} }\n\t\t>\n\t\t\t{ __( 'Reset' ) }\n\t\t</Button>\n\t);\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,EAAE,QAAQ,iBAAiB;;AAEpC;AACA;AACA;AAFA,SAAAC,GAAA,IAAAC,IAAA;AAWA,eAAe,SAASC,WAAWA,CAAE;EACpCC,OAAO;EACPC,IAAI;EACJC;AACiB,CAAC,EAAG;EACrB,MAAMC,SAAS,GAAKC,KAAa,IAChCJ,OAAO,CAACK,IAAI,CACTC,OAAO,IAAMA,OAAO,CAACF,KAAK,KAAKA,KAAK,IAAIE,OAAO,CAACH,SACnD,CAAC;EACF,MAAMI,UAAU,GACf,CAAEN,IAAI,CAACO,MAAM,IACb,CAAEP,IAAI,CAACD,OAAO,EAAEK,IAAI,CACjBC,OAAO,IACR,CAAEA,OAAO,CAACG,QAAQ,KAChBH,OAAO,CAACI,KAAK,KAAKC,SAAS,IAAI,CAAER,SAAS,CAAEG,OAAO,CAACF,KAAM,CAAC,CAC/D,CAAC;EACF,oBACCN,IAAA,CAACH,MAAM;IACNiB,QAAQ,EAAGL,UAAY;IACvBM,sBAAsB;IACtBC,IAAI,EAAC,SAAS;IACdC,OAAO,EAAC,UAAU;IAClBC,SAAS,EAAC,iCAAiC;IAC3CC,OAAO,EAAGA,CAAA,KAAM;MACff,YAAY,CAAE;QACb,GAAGD,IAAI;QACPiB,IAAI,EAAE,CAAC;QACPV,MAAM,EAAE,EAAE;QACVR,OAAO,EACNC,IAAI,CAACD,OAAO,EAAEmB,MAAM,CAAIC,CAAC,IAAM,CAAC,CAAEA,CAAC,CAACX,QAAS,CAAC,IAAI;MACpD,CAAE,CAAC;IACJ,CAAG;IAAAY,QAAA,EAEDzB,EAAE,CAAE,OAAQ;EAAC,CACR,CAAC;AAEX","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../../src/components/dataviews-filters/reset-filters.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { Button } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport type { NormalizedFilter, View } from '../../types';\n\ninterface ResetFilterProps {\n\tfilters: NormalizedFilter[];\n\tview: View;\n\tonChangeView: ( view: View ) => void;\n}\n\nexport default function ResetFilter( {\n\tfilters,\n\tview,\n\tonChangeView,\n}: ResetFilterProps ) {\n\tconst isPrimary = ( field: string ) =>\n\t\tfilters.some(\n\t\t\t( _filter ) => _filter.field === field && _filter.isPrimary\n\t\t);\n\tconst isDisabled =\n\t\t! view.search &&\n\t\t! view.filters?.some(\n\t\t\t( _filter ) =>\n\t\t\t\t! _filter.isLocked &&\n\t\t\t\t( _filter.value !== undefined || ! isPrimary( _filter.field ) )\n\t\t);\n\treturn (\n\t\t<Button\n\t\t\tdisabled={ isDisabled }\n\t\t\taccessibleWhenDisabled\n\t\t\tsize=\"compact\"\n\t\t\tvariant=\"tertiary\"\n\t\t\tclassName=\"dataviews-filters__reset-button\"\n\t\t\tonClick={ () => {\n\t\t\t\tonChangeView( {\n\t\t\t\t\t...view,\n\t\t\t\t\tpage: 1,\n\t\t\t\t\tsearch: '',\n\t\t\t\t\tfilters:\n\t\t\t\t\t\tview.filters?.filter( ( f ) => !! f.isLocked ) || [],\n\t\t\t\t} );\n\t\t\t} }\n\t\t>\n\t\t\t{ __( 'Reset' ) }\n\t\t</Button>\n\t);\n}\n"],
+  "mappings": "AAkCE;AA/BF,SAAS,cAAc;AACvB,SAAS,UAAU;AAaJ,SAAR,YAA8B;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AACD,GAAsB;AACrB,QAAM,YAAY,CAAE,UACnB,QAAQ;AAAA,IACP,CAAE,YAAa,QAAQ,UAAU,SAAS,QAAQ;AAAA,EACnD;AACD,QAAM,aACL,CAAE,KAAK,UACP,CAAE,KAAK,SAAS;AAAA,IACf,CAAE,YACD,CAAE,QAAQ,aACR,QAAQ,UAAU,UAAa,CAAE,UAAW,QAAQ,KAAM;AAAA,EAC9D;AACD,SACC;AAAA,IAAC;AAAA;AAAA,MACA,UAAW;AAAA,MACX,wBAAsB;AAAA,MACtB,MAAK;AAAA,MACL,SAAQ;AAAA,MACR,WAAU;AAAA,MACV,SAAU,MAAM;AACf,qBAAc;AAAA,UACb,GAAG;AAAA,UACH,MAAM;AAAA,UACN,QAAQ;AAAA,UACR,SACC,KAAK,SAAS,OAAQ,CAAE,MAAO,CAAC,CAAE,EAAE,QAAS,KAAK,CAAC;AAAA,QACrD,CAAE;AAAA,MACH;AAAA,MAEE,aAAI,OAAQ;AAAA;AAAA,EACf;AAEF;",
+  "names": []
+}

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

@@ -1,26 +1,20 @@
-/**
- * External dependencies
- */
-// eslint-disable-next-line no-restricted-imports
-import * as Ariakit from '@ariakit/react';
-import removeAccents from 'remove-accents';
-import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
-import { useInstanceId } from '@wordpress/compose';
-import { __, sprintf } from '@wordpress/i18n';
-import { useState, useMemo, useDeferredValue } from '@wordpress/element';
-import { VisuallyHidden, Icon, Composite } from '@wordpress/components';
-import { search, check } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import { getCurrentValue } from './utils';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function normalizeSearchInput(input = '') {
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as Ariakit from "@ariakit/react";
+import removeAccents from "remove-accents";
+import clsx from "clsx";
+import { useInstanceId } from "@wordpress/compose";
+import { __, sprintf } from "@wordpress/i18n";
+import { useState, useMemo, useDeferredValue } from "@wordpress/element";
+import {
+  VisuallyHidden,
+  Icon,
+  Composite,
+  Spinner
+} from "@wordpress/components";
+import { search, check } from "@wordpress/icons";
+import { getCurrentValue } from "./utils";
+import useElements from "../../hooks/use-elements";
+function normalizeSearchInput(input = "") {
   return removeAccents(input.trim().toLowerCase());
 }
 const getNewValue = (filterDefinition, currentFilter, value) => {
@@ -28,198 +22,285 @@ const getNewValue = (filterDefinition, currentFilter, value) => {
     return value;
   }
   if (Array.isArray(currentFilter?.value)) {
-    return currentFilter.value.includes(value) ? currentFilter.value.filter(v => v !== value) : [...currentFilter.value, value];
+    return currentFilter.value.includes(value) ? currentFilter.value.filter((v) => v !== value) : [...currentFilter.value, value];
   }
   return [value];
 };
 function generateFilterElementCompositeItemId(prefix, filterElementValue) {
   return `${prefix}-${filterElementValue}`;
 }
-const MultiSelectionOption = ({
-  selected
-}) => {
-  return /*#__PURE__*/_jsx("span", {
-    className: clsx('dataviews-filters__search-widget-listitem-multi-selection', {
-      'is-selected': selected
-    }),
-    children: selected && /*#__PURE__*/_jsx(Icon, {
-      icon: check
-    })
-  });
+const MultiSelectionOption = ({ selected }) => {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: clsx(
+        "dataviews-filters__search-widget-listitem-multi-selection",
+        { "is-selected": selected }
+      ),
+      children: selected && /* @__PURE__ */ jsx(Icon, { icon: check })
+    }
+  );
 };
-const SingleSelectionOption = ({
-  selected
-}) => {
-  return /*#__PURE__*/_jsx("span", {
-    className: clsx('dataviews-filters__search-widget-listitem-single-selection', {
-      'is-selected': selected
-    })
-  });
+const SingleSelectionOption = ({ selected }) => {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: clsx(
+        "dataviews-filters__search-widget-listitem-single-selection",
+        { "is-selected": selected }
+      )
+    }
+  );
 };
-function ListBox({
-  view,
-  filter,
-  onChangeView
-}) {
-  const baseId = useInstanceId(ListBox, 'dataviews-filter-list-box');
+function ListBox({ view, filter, onChangeView }) {
+  const baseId = useInstanceId(ListBox, "dataviews-filter-list-box");
   const [activeCompositeId, setActiveCompositeId] = useState(
-  // When there are one or less operators, the first item is set as active
-  // (by setting the initial `activeId` to `undefined`).
-  // With 2 or more operators, the focus is moved on the operators control
-  // (by setting the initial `activeId` to `null`), meaning that there won't
-  // be an active item initially. Focus is then managed via the
-  // `onFocusVisible` callback.
-  filter.operators?.length === 1 ? undefined : null);
-  const currentFilter = view.filters?.find(f => f.field === filter.field);
+    // When there are one or less operators, the first item is set as active
+    // (by setting the initial `activeId` to `undefined`).
+    // With 2 or more operators, the focus is moved on the operators control
+    // (by setting the initial `activeId` to `null`), meaning that there won't
+    // be an active item initially. Focus is then managed via the
+    // `onFocusVisible` callback.
+    filter.operators?.length === 1 ? void 0 : null
+  );
+  const currentFilter = view.filters?.find(
+    (f) => f.field === filter.field
+  );
+  const currentValue = getCurrentValue(filter, currentFilter);
+  return /* @__PURE__ */ jsx(
+    Composite,
+    {
+      virtualFocus: true,
+      focusLoop: true,
+      activeId: activeCompositeId,
+      setActiveId: setActiveCompositeId,
+      role: "listbox",
+      className: "dataviews-filters__search-widget-listbox",
+      "aria-label": sprintf(
+        /* translators: List of items for a filter. 1: Filter name. e.g.: "List of: Author". */
+        __("List of: %1$s"),
+        filter.name
+      ),
+      onFocusVisible: () => {
+        if (!activeCompositeId && filter.elements.length) {
+          setActiveCompositeId(
+            generateFilterElementCompositeItemId(
+              baseId,
+              filter.elements[0].value
+            )
+          );
+        }
+      },
+      render: /* @__PURE__ */ jsx(Composite.Typeahead, {}),
+      children: filter.elements.map((element) => /* @__PURE__ */ jsxs(
+        Composite.Hover,
+        {
+          render: /* @__PURE__ */ jsx(
+            Composite.Item,
+            {
+              id: generateFilterElementCompositeItemId(
+                baseId,
+                element.value
+              ),
+              render: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "aria-label": element.label,
+                  role: "option",
+                  className: "dataviews-filters__search-widget-listitem"
+                }
+              ),
+              onClick: () => {
+                const newFilters = currentFilter ? [
+                  ...(view.filters ?? []).map(
+                    (_filter) => {
+                      if (_filter.field === filter.field) {
+                        return {
+                          ..._filter,
+                          operator: currentFilter.operator || filter.operators[0],
+                          value: getNewValue(
+                            filter,
+                            currentFilter,
+                            element.value
+                          )
+                        };
+                      }
+                      return _filter;
+                    }
+                  )
+                ] : [
+                  ...view.filters ?? [],
+                  {
+                    field: filter.field,
+                    operator: filter.operators[0],
+                    value: getNewValue(
+                      filter,
+                      currentFilter,
+                      element.value
+                    )
+                  }
+                ];
+                onChangeView({
+                  ...view,
+                  page: 1,
+                  filters: newFilters
+                });
+              }
+            }
+          ),
+          children: [
+            filter.singleSelection && /* @__PURE__ */ jsx(
+              SingleSelectionOption,
+              {
+                selected: currentValue === element.value
+              }
+            ),
+            !filter.singleSelection && /* @__PURE__ */ jsx(
+              MultiSelectionOption,
+              {
+                selected: currentValue.includes(element.value)
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { children: element.label })
+          ]
+        },
+        element.value
+      ))
+    }
+  );
+}
+function ComboboxList({ view, filter, onChangeView }) {
+  const [searchValue, setSearchValue] = useState("");
+  const deferredSearchValue = useDeferredValue(searchValue);
+  const currentFilter = view.filters?.find(
+    (_filter) => _filter.field === filter.field
+  );
   const currentValue = getCurrentValue(filter, currentFilter);
-  return /*#__PURE__*/_jsx(Composite, {
-    virtualFocus: true,
-    focusLoop: true,
-    activeId: activeCompositeId,
-    setActiveId: setActiveCompositeId,
-    role: "listbox",
-    className: "dataviews-filters__search-widget-listbox",
-    "aria-label": sprintf(/* translators: List of items for a filter. 1: Filter name. e.g.: "List of: Author". */
-    __('List of: %1$s'), filter.name),
-    onFocusVisible: () => {
-      // `onFocusVisible` needs the `Composite` component to be focusable,
-      // which is implicitly achieved via the `virtualFocus` prop.
-      if (!activeCompositeId && filter.elements.length) {
-        setActiveCompositeId(generateFilterElementCompositeItemId(baseId, filter.elements[0].value));
-      }
-    },
-    render: /*#__PURE__*/_jsx(Composite.Typeahead, {}),
-    children: filter.elements.map(element => /*#__PURE__*/_jsxs(Composite.Hover, {
-      render: /*#__PURE__*/_jsx(Composite.Item, {
-        id: generateFilterElementCompositeItemId(baseId, element.value),
-        render: /*#__PURE__*/_jsx("div", {
-          "aria-label": element.label,
-          role: "option",
-          className: "dataviews-filters__search-widget-listitem"
-        }),
-        onClick: () => {
-          var _view$filters, _view$filters2;
-          const newFilters = currentFilter ? [...((_view$filters = view.filters) !== null && _view$filters !== void 0 ? _view$filters : []).map(_filter => {
+  const matches = useMemo(() => {
+    const normalizedSearch = normalizeSearchInput(deferredSearchValue);
+    return filter.elements.filter(
+      (item) => normalizeSearchInput(item.label).includes(normalizedSearch)
+    );
+  }, [filter.elements, deferredSearchValue]);
+  return /* @__PURE__ */ jsxs(
+    Ariakit.ComboboxProvider,
+    {
+      selectedValue: currentValue,
+      setSelectedValue: (value) => {
+        const newFilters = currentFilter ? [
+          ...(view.filters ?? []).map((_filter) => {
             if (_filter.field === filter.field) {
               return {
                 ..._filter,
                 operator: currentFilter.operator || filter.operators[0],
-                value: getNewValue(filter, currentFilter, element.value)
+                value
               };
             }
             return _filter;
-          })] : [...((_view$filters2 = view.filters) !== null && _view$filters2 !== void 0 ? _view$filters2 : []), {
+          })
+        ] : [
+          ...view.filters ?? [],
+          {
             field: filter.field,
             operator: filter.operators[0],
-            value: getNewValue(filter, currentFilter, element.value)
-          }];
-          onChangeView({
-            ...view,
-            page: 1,
-            filters: newFilters
-          });
-        }
-      }),
-      children: [filter.singleSelection && /*#__PURE__*/_jsx(SingleSelectionOption, {
-        selected: currentValue === element.value
-      }), !filter.singleSelection && /*#__PURE__*/_jsx(MultiSelectionOption, {
-        selected: currentValue.includes(element.value)
-      }), /*#__PURE__*/_jsx("span", {
-        children: element.label
-      })]
-    }, element.value))
-  });
-}
-function ComboboxList({
-  view,
-  filter,
-  onChangeView
-}) {
-  const [searchValue, setSearchValue] = useState('');
-  const deferredSearchValue = useDeferredValue(searchValue);
-  const currentFilter = view.filters?.find(_filter => _filter.field === filter.field);
-  const currentValue = getCurrentValue(filter, currentFilter);
-  const matches = useMemo(() => {
-    const normalizedSearch = normalizeSearchInput(deferredSearchValue);
-    return filter.elements.filter(item => normalizeSearchInput(item.label).includes(normalizedSearch));
-  }, [filter.elements, deferredSearchValue]);
-  return /*#__PURE__*/_jsxs(Ariakit.ComboboxProvider, {
-    selectedValue: currentValue,
-    setSelectedValue: value => {
-      var _view$filters3, _view$filters4;
-      const newFilters = currentFilter ? [...((_view$filters3 = view.filters) !== null && _view$filters3 !== void 0 ? _view$filters3 : []).map(_filter => {
-        if (_filter.field === filter.field) {
-          return {
-            ..._filter,
-            operator: currentFilter.operator || filter.operators[0],
             value
-          };
-        }
-        return _filter;
-      })] : [...((_view$filters4 = view.filters) !== null && _view$filters4 !== void 0 ? _view$filters4 : []), {
-        field: filter.field,
-        operator: filter.operators[0],
-        value
-      }];
-      onChangeView({
-        ...view,
-        page: 1,
-        filters: newFilters
-      });
-    },
-    setValue: setSearchValue,
-    children: [/*#__PURE__*/_jsxs("div", {
-      className: "dataviews-filters__search-widget-filter-combobox__wrapper",
-      children: [/*#__PURE__*/_jsx(Ariakit.ComboboxLabel, {
-        render: /*#__PURE__*/_jsx(VisuallyHidden, {
-          children: __('Search items')
-        }),
-        children: __('Search items')
-      }), /*#__PURE__*/_jsx(Ariakit.Combobox, {
-        autoSelect: "always",
-        placeholder: __('Search'),
-        className: "dataviews-filters__search-widget-filter-combobox__input"
-      }), /*#__PURE__*/_jsx("div", {
-        className: "dataviews-filters__search-widget-filter-combobox__icon",
-        children: /*#__PURE__*/_jsx(Icon, {
-          icon: search
-        })
-      })]
-    }), /*#__PURE__*/_jsxs(Ariakit.ComboboxList, {
-      className: "dataviews-filters__search-widget-filter-combobox-list",
-      alwaysVisible: true,
-      children: [matches.map(element => {
-        return /*#__PURE__*/_jsxs(Ariakit.ComboboxItem, {
-          resetValueOnSelect: false,
-          value: element.value,
-          className: "dataviews-filters__search-widget-listitem",
-          hideOnClick: false,
-          setValueOnClick: false,
-          focusOnHover: true,
-          children: [filter.singleSelection && /*#__PURE__*/_jsx(SingleSelectionOption, {
-            selected: currentValue === element.value
-          }), !filter.singleSelection && /*#__PURE__*/_jsx(MultiSelectionOption, {
-            selected: currentValue.includes(element.value)
-          }), /*#__PURE__*/_jsxs("span", {
-            children: [/*#__PURE__*/_jsx(Ariakit.ComboboxItemValue, {
-              className: "dataviews-filters__search-widget-filter-combobox-item-value",
-              value: element.label
-            }), !!element.description && /*#__PURE__*/_jsx("span", {
-              className: "dataviews-filters__search-widget-listitem-description",
-              children: element.description
-            })]
-          })]
-        }, element.value);
-      }), !matches.length && /*#__PURE__*/_jsx("p", {
-        children: __('No results found')
-      })]
-    })]
-  });
+          }
+        ];
+        onChangeView({
+          ...view,
+          page: 1,
+          filters: newFilters
+        });
+      },
+      setValue: setSearchValue,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "dataviews-filters__search-widget-filter-combobox__wrapper", children: [
+          /* @__PURE__ */ jsx(
+            Ariakit.ComboboxLabel,
+            {
+              render: /* @__PURE__ */ jsx(VisuallyHidden, { children: __("Search items") }),
+              children: __("Search items")
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Ariakit.Combobox,
+            {
+              autoSelect: "always",
+              placeholder: __("Search"),
+              className: "dataviews-filters__search-widget-filter-combobox__input"
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "dataviews-filters__search-widget-filter-combobox__icon", children: /* @__PURE__ */ jsx(Icon, { icon: search }) })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          Ariakit.ComboboxList,
+          {
+            className: "dataviews-filters__search-widget-filter-combobox-list",
+            alwaysVisible: true,
+            children: [
+              matches.map((element) => {
+                return /* @__PURE__ */ jsxs(
+                  Ariakit.ComboboxItem,
+                  {
+                    resetValueOnSelect: false,
+                    value: element.value,
+                    className: "dataviews-filters__search-widget-listitem",
+                    hideOnClick: false,
+                    setValueOnClick: false,
+                    focusOnHover: true,
+                    children: [
+                      filter.singleSelection && /* @__PURE__ */ jsx(
+                        SingleSelectionOption,
+                        {
+                          selected: currentValue === element.value
+                        }
+                      ),
+                      !filter.singleSelection && /* @__PURE__ */ jsx(
+                        MultiSelectionOption,
+                        {
+                          selected: currentValue.includes(
+                            element.value
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs("span", { children: [
+                        /* @__PURE__ */ jsx(
+                          Ariakit.ComboboxItemValue,
+                          {
+                            className: "dataviews-filters__search-widget-filter-combobox-item-value",
+                            value: element.label
+                          }
+                        ),
+                        !!element.description && /* @__PURE__ */ jsx("span", { className: "dataviews-filters__search-widget-listitem-description", children: element.description })
+                      ] })
+                    ]
+                  },
+                  element.value
+                );
+              }),
+              !matches.length && /* @__PURE__ */ jsx("p", { children: __("No results found") })
+            ]
+          }
+        )
+      ]
+    }
+  );
 }
-export default function SearchWidget(props) {
-  const Widget = props.filter.elements.length > 10 ? ComboboxList : ListBox;
-  return /*#__PURE__*/_jsx(Widget, {
-    ...props
+function SearchWidget(props) {
+  const { elements, isLoading } = useElements({
+    elements: props.filter.elements,
+    getElements: props.filter.getElements
   });
+  if (isLoading) {
+    return /* @__PURE__ */ jsx("div", { className: "dataviews-filters__search-widget-no-elements", children: /* @__PURE__ */ jsx(Spinner, {}) });
+  }
+  if (elements.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className: "dataviews-filters__search-widget-no-elements", children: __("No elements found") });
+  }
+  const Widget = elements.length > 10 ? ComboboxList : ListBox;
+  return /* @__PURE__ */ jsx(Widget, { ...props, filter: { ...props.filter, elements } });
 }
-//# sourceMappingURL=search-widget.js.map
+export {
+  SearchWidget as default
+};
+//# sourceMappingURL=search-widget.js.map