@uniformdev/design-system 19.136.0 → 19.137.1-alpha.4

package/dist/esm/index.js

@@ -20261,7 +20261,7 @@ var NUMBER_OPERATORS = [
     editorType: "number"
   },
   {
-    label: "is empty...",
+    label: "is empty",
     value: "ndef",
     editorType: "empty"
   },
@@ -20271,7 +20271,7 @@ var NUMBER_OPERATORS = [
     editorType: "numberRange"
   },
   {
-    label: "is not empty...",
+    label: "is not empty",
     value: "def",
     editorType: "empty"
   }
@@ -20308,7 +20308,7 @@ var DATE_OPERATORS = [
     editorType: "date"
   },
   {
-    label: "is empty...",
+    label: "is empty",
     value: "ndef",
     editorType: "empty"
   },
@@ -20318,7 +20318,7 @@ var DATE_OPERATORS = [
     editorType: "date"
   },
   {
-    label: "is not empty...",
+    label: "is not empty",
     value: "def",
     editorType: "empty"
   }
@@ -20330,7 +20330,7 @@ var TEXTBOX_OPERATORS = [
     editorType: "text"
   },
   {
-    label: "is empty...",
+    label: "is empty",
     value: "ndef",
     editorType: "empty"
   },
@@ -20345,7 +20345,7 @@ var TEXTBOX_OPERATORS = [
     editorType: "text"
   },
   {
-    label: "is not empty...",
+    label: "is not empty",
     value: "def",
     editorType: "empty"
   }
@@ -20406,7 +20406,7 @@ var SYSTEM_DATE_OPERATORS = [
 ];
 var RICHTEXT_OPERATORS = [
   {
-    label: "is empty...",
+    label: "is empty",
     value: "ndef",
     editorType: "empty"
   },
@@ -20416,7 +20416,7 @@ var RICHTEXT_OPERATORS = [
     editorType: "text"
   },
   {
-    label: "is not empty...",
+    label: "is not empty",
     value: "def",
     editorType: "empty"
   }
@@ -20544,7 +20544,7 @@ var ConditionalInputRow = css92`
       width: calc(100% - 48px);
     }
   }
-  ${cq("580px")} {
+  ${cq("764px")} {
     display: grid;
     grid-template-columns: 200px 160px 1fr 32px;
 
@@ -20740,8 +20740,8 @@ var FilterButton2 = ({
 };
 
 // src/components/SearchAndFilter/FilterControls.tsx
-import { useEffect as useEffect18, useState as useState17 } from "react";
-import { useDebounce as useDebounce2 } from "react-use";
+import { useEffect as useEffect19, useState as useState18 } from "react";
+import { useDebounce as useDebounce3 } from "react-use";
 
 // src/components/SearchAndFilter/hooks/useSearchAndFilter.tsx
 import {
@@ -20749,204 +20749,14 @@ import {
   useCallback as useCallback10,
   useContext as useContext7,
   useDeferredValue as useDeferredValue2,
-  useEffect as useEffect17,
+  useEffect as useEffect18,
   useMemo as useMemo6,
-  useState as useState16
+  useState as useState17
 } from "react";
-import { jsx as jsx119 } from "@emotion/react/jsx-runtime";
-var SearchAndFilterContext = createContext6({
-  searchTerm: "",
-  setSearchTerm: () => {
-  },
-  filterVisibility: void 0,
-  setFilterVisibility: () => {
-  },
-  filters: [],
-  setFilters: () => {
-  },
-  handleAddFilter: () => {
-  },
-  handleResetFilters: () => {
-  },
-  handleDeleteFilter: () => {
-  },
-  handleLocaleChange: () => {
-  },
-  setSortBy: () => {
-  },
-  sortByValue: "",
-  filterOptions: [],
-  sortOptions: [],
-  validFilterQuery: [],
-  totalResults: 0,
-  localeOptions: [],
-  localeValue: ""
-});
-var SearchAndFilterProvider = ({
-  filters,
-  filterOptions,
-  sortOptions,
-  defaultSortByValue,
-  defaultLocale = "",
-  localeOptions,
-  onLocaleChange,
-  filterVisible = false,
-  onSearchChange,
-  onChange,
-  onSortChange,
-  resetFilterValues = [{ field: "", operator: "", value: "" }],
-  totalResults,
-  children
-}) => {
-  const [searchTerm, setSearchTerm] = useState16("");
-  const deferredSearchTerm = useDeferredValue2(searchTerm);
-  const [filterVisibility, setFilterVisibility] = useState16(filterVisible);
-  const [sortByValue, setSortByValue] = useState16(defaultSortByValue);
-  const [localeValue, setLocale] = useState16(defaultLocale);
-  const handleSearchTerm = useCallback10(
-    (term) => {
-      setSearchTerm(term);
-      onSearchChange == null ? void 0 : onSearchChange(term);
-    },
-    [setSearchTerm, onSearchChange]
-  );
-  const handleLocaleChange = useCallback10(
-    (locale) => {
-      setLocale(locale);
-      onLocaleChange == null ? void 0 : onLocaleChange(locale);
-    },
-    [onLocaleChange]
-  );
-  const handleOnSortChange = useCallback10(
-    (sort) => {
-      setSortByValue(sort);
-      onSortChange(sort);
-    },
-    [onSortChange]
-  );
-  const handleToggleFilterVisibilty = useCallback10(
-    (visible) => setFilterVisibility(visible),
-    [setFilterVisibility]
-  );
-  const handleAddFilter = useCallback10(() => {
-    onChange([...filters, { field: "", operator: "", value: "" }]);
-  }, [filters, onChange]);
-  const handleResetFilters = useCallback10(() => {
-    onChange(resetFilterValues);
-  }, [onChange, resetFilterValues]);
-  const handleDeleteFilter = useCallback10(
-    (index) => {
-      const remainingFilters = filters.filter((_, i) => i !== index);
-      onChange(remainingFilters);
-    },
-    [filters, onChange]
-  );
-  const validFilterQuery = useMemo6(() => {
-    const hasValidFilters = filters.every((f) => f.field && f.operator && f.value);
-    if (hasValidFilters) {
-      return filters;
-    }
-  }, [filters]);
-  useEffect17(() => {
-    if (filterVisibility) {
-      const handleEscKeyFilterClose = (e) => {
-        if (e.key === "Escape") {
-          setFilterVisibility(false);
-        }
-      };
-      document.addEventListener("keydown", (e) => handleEscKeyFilterClose(e));
-      return () => {
-        document.removeEventListener("keydown", (e) => handleEscKeyFilterClose(e));
-      };
-    }
-  }, [filterVisibility]);
-  return /* @__PURE__ */ jsx119(
-    SearchAndFilterContext.Provider,
-    {
-      value: {
-        searchTerm: deferredSearchTerm,
-        setSearchTerm: (e) => handleSearchTerm(e),
-        setSortBy: (e) => handleOnSortChange(e),
-        sortByValue,
-        filterVisibility,
-        setFilterVisibility: (e) => handleToggleFilterVisibilty(e),
-        filters,
-        setFilters: (e) => onChange(e),
-        handleAddFilter,
-        handleResetFilters,
-        handleDeleteFilter,
-        filterOptions,
-        sortOptions,
-        validFilterQuery,
-        totalResults,
-        localeOptions,
-        localeValue,
-        handleLocaleChange
-      },
-      children: /* @__PURE__ */ jsx119(VerticalRhythm, { children })
-    }
-  );
-};
-var useSearchAndFilter = () => {
-  const value = useContext7(SearchAndFilterContext);
-  return { ...value };
-};
-
-// src/components/SearchAndFilter/FilterControls.tsx
-import { Fragment as Fragment19, jsx as jsx120, jsxs as jsxs81 } from "@emotion/react/jsx-runtime";
-var FilterControls = ({
-  children,
-  hideSearchInput
-}) => {
-  const { setFilterVisibility, filterVisibility, setSearchTerm, validFilterQuery, searchTerm } = useSearchAndFilter();
-  const [localeSearchTerm, setLocaleSearchTerm] = useState17("");
-  useDebounce2(
-    () => {
-      setSearchTerm(localeSearchTerm);
-    },
-    300,
-    [localeSearchTerm, searchTerm]
-  );
-  useEffect18(() => {
-    if (searchTerm === "") {
-      setLocaleSearchTerm("");
-    }
-  }, [searchTerm]);
-  return /* @__PURE__ */ jsxs81(Fragment19, { children: [
-    /* @__PURE__ */ jsx120(
-      FilterButton2,
-      {
-        "aria-controls": "search-and-filter-options",
-        "aria-label": "filter options",
-        "aria-haspopup": "true",
-        text: "Filter/Sort",
-        "aria-expanded": filterVisibility === true,
-        filterCount: validFilterQuery == null ? void 0 : validFilterQuery.length,
-        onClick: () => setFilterVisibility(!filterVisibility),
-        dataTestId: "filters-button"
-      }
-    ),
-    hideSearchInput ? null : /* @__PURE__ */ jsx120(
-      InputKeywordSearch,
-      {
-        placeholder: "Search...",
-        onSearchTextChanged: (e) => setLocaleSearchTerm(e),
-        value: localeSearchTerm,
-        compact: true,
-        rounded: true,
-        css: SearchInput
-      }
-    ),
-    children
-  ] });
-};
-
-// src/components/SearchAndFilter/FilterItem.tsx
-import { useMemo as useMemo8 } from "react";
 
 // src/components/SearchAndFilter/FilterEditor.tsx
-import { useEffect as useEffect19, useState as useState18 } from "react";
-import { useDebounce as useDebounce3 } from "react-use";
+import { useEffect as useEffect17, useState as useState16 } from "react";
+import { useDebounce as useDebounce2 } from "react-use";
 
 // src/components/Validation/StatusBullet.styles.ts
 import { css as css93 } from "@emotion/react";
@@ -21028,7 +20838,7 @@ var StatusDeleted = css93`
 `;
 
 // src/components/Validation/StatusBullet.tsx
-import { jsx as jsx121 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx119 } from "@emotion/react/jsx-runtime";
 var StatusBullet = ({
   status,
   hideText = false,
@@ -21048,7 +20858,7 @@ var StatusBullet = ({
     Deleted: StatusDeleted
   };
   const statusSize = size === "base" ? StatusBulletBase : StatusBulletSmall;
-  return /* @__PURE__ */ jsx121(
+  return /* @__PURE__ */ jsx119(
     "span",
     {
       role: "status",
@@ -21061,7 +20871,7 @@ var StatusBullet = ({
 };
 
 // src/components/SearchAndFilter/FilterEditor.tsx
-import { Fragment as Fragment20, jsx as jsx122, jsxs as jsxs82 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment19, jsx as jsx120, jsxs as jsxs81 } from "@emotion/react/jsx-runtime";
 var readOnlyAttributes = {
   isSearchable: false,
   menuIsOpen: false,
@@ -21070,13 +20880,13 @@ var readOnlyAttributes = {
 var FilterMultiChoiceEditor = ({
   value,
   options,
-  isDisabled,
+  disabled: disabled2,
   readOnly,
   valueTestId,
   ...props
 }) => {
   const readOnlyProps = readOnly ? readOnlyAttributes : {};
-  return /* @__PURE__ */ jsx122("div", { "data-testid": valueTestId, children: /* @__PURE__ */ jsx122(
+  return /* @__PURE__ */ jsx120("div", { "data-testid": valueTestId, children: /* @__PURE__ */ jsx120(
     InputComboBox,
     {
       ...props,
@@ -21084,12 +20894,12 @@ var FilterMultiChoiceEditor = ({
       options,
       isMulti: true,
       isClearable: true,
-      isDisabled,
+      isDisabled: disabled2,
       onChange: (e) => {
         var _a;
-        return props.onChange((_a = e.map((item) => item.value)) != null ? _a : []);
+        return props.onChange((_a = e == null ? void 0 : e.map((option) => option.value)) != null ? _a : []);
       },
-      value,
+      value: options == null ? void 0 : options.filter((option) => value == null ? void 0 : value.includes(option.value)),
       "aria-readonly": readOnly,
       styles: {
         menu(base) {
@@ -21106,13 +20916,13 @@ var FilterMultiChoiceEditor = ({
 var FilterSingleChoiceEditor = ({
   options,
   value,
-  isDisabled,
+  disabled: disabled2,
   readOnly,
   onChange,
   valueTestId
 }) => {
   const readOnlyProps = readOnly ? readOnlyAttributes : {};
-  return /* @__PURE__ */ jsx122("div", { "data-testid": valueTestId, children: /* @__PURE__ */ jsx122(
+  return /* @__PURE__ */ jsx120("div", { "data-testid": valueTestId, children: /* @__PURE__ */ jsx120(
     InputComboBox,
     {
       placeholder: "Type to search...",
@@ -21122,8 +20932,8 @@ var FilterSingleChoiceEditor = ({
         var _a;
         return onChange((_a = e == null ? void 0 : e.value) != null ? _a : "");
       },
-      isDisabled,
-      value,
+      isDisabled: disabled2,
+      value: options == null ? void 0 : options.find((option) => option.value === value),
       "aria-readonly": readOnly,
       styles: {
         menu(base) {
@@ -21138,18 +20948,18 @@ var FilterSingleChoiceEditor = ({
   ) });
 };
 var CustomOptions = ({ label, value }) => {
-  return /* @__PURE__ */ jsx122(StatusBullet, { status: label, message: value });
+  return /* @__PURE__ */ jsx120(StatusBullet, { status: label, message: value });
 };
 var StatusMultiEditor = ({
   options,
   value,
-  isDisabled,
+  disabled: disabled2,
   readOnly,
   onChange,
   valueTestId
 }) => {
   const readOnlyProps = readOnly ? readOnlyAttributes : {};
-  return /* @__PURE__ */ jsx122("div", { "data-testid": valueTestId, children: /* @__PURE__ */ jsx122(
+  return /* @__PURE__ */ jsx120("div", { "data-testid": valueTestId, children: /* @__PURE__ */ jsx120(
     InputComboBox,
     {
       options,
@@ -21159,9 +20969,9 @@ var StatusMultiEditor = ({
         return onChange((_a = e.map((item) => item.value)) != null ? _a : []);
       },
       formatOptionLabel: CustomOptions,
-      value,
-      isDisabled,
       "aria-readonly": readOnly,
+      value: options == null ? void 0 : options.filter((option) => value == null ? void 0 : value.includes(option.value)),
+      isDisabled: disabled2,
       styles: {
         menu(base) {
           return {
@@ -21177,13 +20987,13 @@ var StatusMultiEditor = ({
 var StatusSingleEditor = ({
   options,
   value,
-  isDisabled,
+  disabled: disabled2,
   readOnly,
   onChange,
   valueTestId
 }) => {
   const readOnlyProps = readOnly ? readOnlyAttributes : {};
-  return /* @__PURE__ */ jsx122("div", { "data-testid": valueTestId, children: /* @__PURE__ */ jsx122(
+  return /* @__PURE__ */ jsx120("div", { "data-testid": valueTestId, children: /* @__PURE__ */ jsx120(
     InputComboBox,
     {
       options,
@@ -21192,9 +21002,9 @@ var StatusSingleEditor = ({
         return onChange((_a = e == null ? void 0 : e.value) != null ? _a : "");
       },
       formatOptionLabel: CustomOptions,
-      value,
-      isDisabled,
       "aria-readonly": readOnly,
+      value: options == null ? void 0 : options.find((option) => option.value === value),
+      isDisabled: disabled2,
       styles: {
         menu(base) {
           return {
@@ -21207,9 +21017,15 @@ var StatusSingleEditor = ({
     }
   ) });
 };
-var TextEditor = ({ onChange, ariaLabel, value, readOnly, valueTestId }) => {
-  useDebounce3(() => onChange, 500, [value]);
-  return /* @__PURE__ */ jsx122(
+var TextEditor = ({
+  onChange,
+  ariaLabel,
+  value,
+  readOnly,
+  valueTestId
+}) => {
+  useDebounce2(() => onChange, 500, [value]);
+  return /* @__PURE__ */ jsx120(
     Input,
     {
       showLabel: false,
@@ -21230,10 +21046,10 @@ var NumberRangeEditor = ({
   readOnly,
   valueTestId
 }) => {
-  const [minValue, setMinValue] = useState18("");
-  const [maxValue, setMaxValue] = useState18("");
-  const [error, setError] = useState18("");
-  useEffect19(() => {
+  const [minValue, setMinValue] = useState16("");
+  const [maxValue, setMaxValue] = useState16("");
+  const [error, setError] = useState16("");
+  useEffect17(() => {
     if (!maxValue && !minValue) {
       return;
     }
@@ -21252,9 +21068,9 @@ var NumberRangeEditor = ({
     setError("");
     onChange([minValue, maxValue]);
   }, [maxValue, minValue, setError]);
-  return /* @__PURE__ */ jsxs82(Fragment20, { children: [
-    /* @__PURE__ */ jsxs82("div", { css: twoColumnGrid, "data-testid": valueTestId, children: [
-      /* @__PURE__ */ jsx122(
+  return /* @__PURE__ */ jsxs81(Fragment19, { children: [
+    /* @__PURE__ */ jsxs81("div", { css: twoColumnGrid, "data-testid": valueTestId, children: [
+      /* @__PURE__ */ jsx120(
         Input,
         {
           label: `${ariaLabel}-min`,
@@ -21269,7 +21085,7 @@ var NumberRangeEditor = ({
           readOnly
         }
       ),
-      /* @__PURE__ */ jsx122(
+      /* @__PURE__ */ jsx120(
         Input,
         {
           type: "number",
@@ -21285,7 +21101,7 @@ var NumberRangeEditor = ({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx122(ErrorContainer, { errorMessage: error })
+    /* @__PURE__ */ jsx120(ErrorContainer, { errorMessage: error })
   ] });
 };
 var NumberEditor = ({
@@ -21296,7 +21112,7 @@ var NumberEditor = ({
   readOnly,
   valueTestId
 }) => {
-  return /* @__PURE__ */ jsx122(
+  return /* @__PURE__ */ jsx120(
     Input,
     {
       label: ariaLabel,
@@ -21319,7 +21135,7 @@ var DateEditor = ({
   readOnly,
   valueTestId
 }) => {
-  return /* @__PURE__ */ jsx122(
+  return /* @__PURE__ */ jsx120(
     Input,
     {
       type: "date",
@@ -21341,10 +21157,10 @@ var DateRangeEditor = ({
   readOnly,
   valueTestId
 }) => {
-  const [minDateValue, setMinDateValue] = useState18(value ? value[0] : "");
-  const [maxDateValue, setMaxDateValue] = useState18(value ? value[1] : "");
-  const [error, setError] = useState18("");
-  useEffect19(() => {
+  const [minDateValue, setMinDateValue] = useState16(value ? value[0] : "");
+  const [maxDateValue, setMaxDateValue] = useState16(value ? value[1] : "");
+  const [error, setError] = useState16("");
+  useEffect17(() => {
     if (!minDateValue || !maxDateValue) {
       return;
     }
@@ -21375,9 +21191,9 @@ var DateRangeEditor = ({
     setError("");
     onChange([minDateValue, maxDateValue]);
   }, [minDateValue, maxDateValue, setError]);
-  return /* @__PURE__ */ jsxs82(Fragment20, { children: [
-    /* @__PURE__ */ jsxs82("div", { css: twoColumnGrid, "data-testid": valueTestId, children: [
-      /* @__PURE__ */ jsx122(
+  return /* @__PURE__ */ jsxs81(Fragment19, { children: [
+    /* @__PURE__ */ jsxs81("div", { css: twoColumnGrid, "data-testid": valueTestId, children: [
+      /* @__PURE__ */ jsx120(
         Input,
         {
           label: `${ariaLabel}-min-date`,
@@ -21390,7 +21206,7 @@ var DateRangeEditor = ({
           readOnly
         }
       ),
-      /* @__PURE__ */ jsx122(
+      /* @__PURE__ */ jsx120(
         Input,
         {
           label: `${ariaLabel}-max-date`,
@@ -21404,18 +21220,19 @@ var DateRangeEditor = ({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx122(ErrorContainer, { errorMessage: error })
+    /* @__PURE__ */ jsx120(ErrorContainer, { errorMessage: error })
   ] });
 };
 var FilterEditorRenderer = ({ editorType, ...props }) => {
-  const Editor = filterMapper[editorType];
+  const { filterMapper: contextFilterMapper } = useSearchAndFilter();
+  const Editor = contextFilterMapper == null ? void 0 : contextFilterMapper[editorType];
   if (!Editor) {
     return null;
   }
   if (editorType === "empty") {
     return null;
   }
-  return /* @__PURE__ */ jsx122(Editor, { ...props, disabled: props.isDisabled });
+  return /* @__PURE__ */ jsx120(Editor, { ...props });
 };
 var filterMapper = {
   multiChoice: FilterMultiChoiceEditor,
@@ -21430,14 +21247,14 @@ var filterMapper = {
   empty: null
 };
 var ErrorContainer = ({ errorMessage }) => {
-  return /* @__PURE__ */ jsx122(
+  return /* @__PURE__ */ jsx120(
     "div",
     {
       css: {
         gridColumn: "span 6",
         order: 6
       },
-      children: /* @__PURE__ */ jsx122(FieldMessage, { errorMessage })
+      children: /* @__PURE__ */ jsx120(FieldMessage, { errorMessage })
     }
   );
 };
@@ -21447,6 +21264,201 @@ var twoColumnGrid = {
   gap: "var(--spacing-sm);"
 };
 
+// src/components/SearchAndFilter/hooks/useSearchAndFilter.tsx
+import { jsx as jsx121 } from "@emotion/react/jsx-runtime";
+var SearchAndFilterContext = createContext6({
+  searchTerm: "",
+  setSearchTerm: () => {
+  },
+  filterVisibility: void 0,
+  setFilterVisibility: () => {
+  },
+  filters: [],
+  setFilters: () => {
+  },
+  handleAddFilter: () => {
+  },
+  handleResetFilters: () => {
+  },
+  handleDeleteFilter: () => {
+  },
+  handleLocaleChange: () => {
+  },
+  setSortBy: () => {
+  },
+  sortByValue: "",
+  filterOptions: [],
+  sortOptions: [],
+  validFilterQuery: [],
+  filterMapper: {},
+  totalResults: 0,
+  localeOptions: [],
+  localeValue: ""
+});
+var SearchAndFilterProvider = ({
+  filters,
+  filterOptions,
+  sortOptions,
+  defaultSortByValue,
+  defaultLocale = "",
+  localeOptions,
+  onLocaleChange,
+  filterVisible = false,
+  onSearchChange,
+  onChange,
+  onSortChange,
+  resetFilterValues = [{ field: "", operator: "", value: "" }],
+  totalResults,
+  filterMapper: filterMapper2 = filterMapper,
+  children
+}) => {
+  const [searchTerm, setSearchTerm] = useState17("");
+  const deferredSearchTerm = useDeferredValue2(searchTerm);
+  const [filterVisibility, setFilterVisibility] = useState17(filterVisible);
+  const [sortByValue, setSortByValue] = useState17(defaultSortByValue);
+  const [localeValue, setLocale] = useState17(defaultLocale);
+  const handleSearchTerm = useCallback10(
+    (term) => {
+      setSearchTerm(term);
+      onSearchChange == null ? void 0 : onSearchChange(term);
+    },
+    [setSearchTerm, onSearchChange]
+  );
+  const handleLocaleChange = useCallback10(
+    (locale) => {
+      setLocale(locale);
+      onLocaleChange == null ? void 0 : onLocaleChange(locale);
+    },
+    [onLocaleChange]
+  );
+  const handleOnSortChange = useCallback10(
+    (sort) => {
+      setSortByValue(sort);
+      onSortChange(sort);
+    },
+    [onSortChange]
+  );
+  const handleToggleFilterVisibilty = useCallback10(
+    (visible) => setFilterVisibility(visible),
+    [setFilterVisibility]
+  );
+  const handleAddFilter = useCallback10(() => {
+    onChange([...filters, { field: "", operator: "", value: "" }]);
+  }, [filters, onChange]);
+  const handleResetFilters = useCallback10(() => {
+    onChange(resetFilterValues);
+  }, [onChange, resetFilterValues]);
+  const handleDeleteFilter = useCallback10(
+    (index) => {
+      const remainingFilters = filters.filter((_, i) => i !== index);
+      onChange(remainingFilters);
+    },
+    [filters, onChange]
+  );
+  const validFilterQuery = useMemo6(() => {
+    const hasValidFilters = filters.every((f) => f.field && f.operator && f.value);
+    if (hasValidFilters) {
+      return filters;
+    }
+  }, [filters]);
+  useEffect18(() => {
+    if (filterVisibility) {
+      const handleEscKeyFilterClose = (e) => {
+        if (e.key === "Escape") {
+          setFilterVisibility(false);
+        }
+      };
+      document.addEventListener("keydown", (e) => handleEscKeyFilterClose(e));
+      return () => {
+        document.removeEventListener("keydown", (e) => handleEscKeyFilterClose(e));
+      };
+    }
+  }, [filterVisibility]);
+  return /* @__PURE__ */ jsx121(
+    SearchAndFilterContext.Provider,
+    {
+      value: {
+        searchTerm: deferredSearchTerm,
+        setSearchTerm: (e) => handleSearchTerm(e),
+        setSortBy: (e) => handleOnSortChange(e),
+        sortByValue,
+        filterVisibility,
+        setFilterVisibility: (e) => handleToggleFilterVisibilty(e),
+        filters,
+        setFilters: (e) => onChange(e),
+        handleAddFilter,
+        handleResetFilters,
+        handleDeleteFilter,
+        filterOptions,
+        sortOptions,
+        validFilterQuery,
+        totalResults,
+        localeOptions,
+        localeValue,
+        handleLocaleChange,
+        filterMapper: filterMapper2
+      },
+      children: /* @__PURE__ */ jsx121(VerticalRhythm, { children })
+    }
+  );
+};
+var useSearchAndFilter = () => {
+  const value = useContext7(SearchAndFilterContext);
+  return { ...value };
+};
+
+// src/components/SearchAndFilter/FilterControls.tsx
+import { Fragment as Fragment20, jsx as jsx122, jsxs as jsxs82 } from "@emotion/react/jsx-runtime";
+var FilterControls = ({
+  children,
+  hideSearchInput
+}) => {
+  const { setFilterVisibility, filterVisibility, setSearchTerm, validFilterQuery, searchTerm } = useSearchAndFilter();
+  const [localeSearchTerm, setLocaleSearchTerm] = useState18("");
+  useDebounce3(
+    () => {
+      setSearchTerm(localeSearchTerm);
+    },
+    300,
+    [localeSearchTerm, searchTerm]
+  );
+  useEffect19(() => {
+    if (searchTerm === "") {
+      setLocaleSearchTerm("");
+    }
+  }, [searchTerm]);
+  return /* @__PURE__ */ jsxs82(Fragment20, { children: [
+    /* @__PURE__ */ jsx122(
+      FilterButton2,
+      {
+        "aria-controls": "search-and-filter-options",
+        "aria-label": "filter options",
+        "aria-haspopup": "true",
+        text: "Filter/Sort",
+        "aria-expanded": filterVisibility === true,
+        filterCount: validFilterQuery == null ? void 0 : validFilterQuery.length,
+        onClick: () => setFilterVisibility(!filterVisibility),
+        dataTestId: "filters-button"
+      }
+    ),
+    hideSearchInput ? null : /* @__PURE__ */ jsx122(
+      InputKeywordSearch,
+      {
+        placeholder: "Search...",
+        onSearchTextChanged: (e) => setLocaleSearchTerm(e),
+        value: localeSearchTerm,
+        compact: true,
+        rounded: true,
+        css: SearchInput
+      }
+    ),
+    children
+  ] });
+};
+
+// src/components/SearchAndFilter/FilterItem.tsx
+import { useMemo as useMemo8 } from "react";
+
 // src/components/SearchAndFilter/FilterMenu.tsx
 import React24, { useEffect as useEffect20 } from "react";
 import { jsx as jsx123, jsxs as jsxs83 } from "@emotion/react/jsx-runtime";
@@ -21830,7 +21842,7 @@ var FilterItem = ({
   const operatorLabel = filters[index].operator !== "" ? `operator ${filters[index].operator}` : "unknown operator";
   const metaDataLabel = filters[index].value !== "" ? `value ${filters[index].value}` : "unknown value";
   const metaDataPossibleOptions = (_b = (_a = operatorOptions.find((op) => filters[index].operator === op.value)) == null ? void 0 : _a.editorType) != null ? _b : "singleChoice";
-  const { selectedFieldValue, selectedOperatorValue, selectedMetaValue, readOnly } = useMemo8(() => {
+  const { selectedFieldValue, selectedOperatorValue, selectedMetaValue, readOnly, bindable } = useMemo8(() => {
     var _a2;
     const currentSelectedFilter = filterOptions.find((item) => {
       var _a3;
@@ -21843,19 +21855,14 @@ var FilterItem = ({
     const selectedOperatorValue2 = operatorOptions == null ? void 0 : operatorOptions.find((item) => {
       return filters[index].operator === item.value;
     });
-    const selectedMetaValue2 = valueOptions.filter((item) => {
-      if (Array.isArray(filters[index].value) && item.value) {
-        return filters[index].value.includes(item.value);
-      }
-      return filters[index].value === item.value;
-    });
     return {
       selectedFieldValue: selectedFieldValue2,
       selectedOperatorValue: selectedOperatorValue2 != null ? selectedOperatorValue2 : void 0,
-      selectedMetaValue: selectedMetaValue2.length > 0 ? selectedMetaValue2 : filters[index].value,
-      readOnly: isCurrentFieldReadOnly
+      selectedMetaValue: filters[index].value,
+      readOnly: isCurrentFieldReadOnly,
+      bindable: selectedFieldValue2 == null ? void 0 : selectedFieldValue2.bindable
     };
-  }, [filters, filterOptions, index, operatorOptions, valueOptions]);
+  }, [filters, filterOptions, index, operatorOptions]);
   const readOnlyProps = readOnly ? {
     "aria-readonly": true,
     isSearchable: false,
@@ -21924,7 +21931,8 @@ var FilterItem = ({
           options: valueOptions,
           onChange: (e) => onValueChange(e != null ? e : ""),
           readOnly,
-          isDisabled: !filters[index].operator,
+          bindable,
+          disabled: !filters[index].operator,
           value: selectedMetaValue,
           valueTestId: "filter-value"
         }
@@ -22081,6 +22089,7 @@ var SearchAndFilter = ({
   viewSwitchControls,
   resultsContainerView = /* @__PURE__ */ jsx128(SearchAndFilterResultContainer, {}),
   children = /* @__PURE__ */ jsx128(FilterItems, {}),
+  filterMapper: filterMapper2 = filterMapper,
   onChange,
   onSearchChange,
   onSortChange,
@@ -22106,6 +22115,7 @@ var SearchAndFilter = ({
       defaultLocale,
       localeOptions,
       onLocaleChange,
+      filterMapper: filterMapper2,
       children: /* @__PURE__ */ jsxs88(VerticalRhythm, { css: SearchAndFilterContainer, "data-testid": "search-and-filter", children: [
         /* @__PURE__ */ jsxs88("div", { css: SearchAndFilterOutterControlWrapper(viewSwitchControls ? "1fr auto" : "1fr"), children: [
           /* @__PURE__ */ jsx128(
@@ -22741,6 +22751,8 @@ export {
   CurrentDrawerContext,
   DATE_OPERATORS,
   DashedBox,
+  DateEditor,
+  DateRangeEditor,
   DateTimePicker,
   DateTimePickerVariant,
   DebouncedInputKeywordSearch,
@@ -22756,9 +22768,12 @@ export {
   Fieldset,
   FilterButton2 as FilterButton,
   FilterControls,
+  FilterEditorRenderer,
   FilterItem,
   FilterItems,
   FilterMenu,
+  FilterMultiChoiceEditor,
+  FilterSingleChoiceEditor,
   Heading,
   HexModalBackground,
   HorizontalRhythm,
@@ -22805,6 +22820,8 @@ export {
   ModalDialog,
   MultilineChip,
   NUMBER_OPERATORS,
+  NumberEditor,
+  NumberRangeEditor,
   PUBLISH_STATUS_FIELD_OPERATORS,
   PageHeaderSection,
   Pagination,
@@ -22858,6 +22875,8 @@ export {
   ShortcutRevealer,
   Skeleton,
   StatusBullet,
+  StatusMultiEditor,
+  StatusSingleEditor,
   SuccessMessage,
   Switch,
   TAKEOVER_STACK_ID,
@@ -22874,6 +22893,7 @@ export {
   TableRow,
   Tabs,
   TakeoverDrawerRenderer,
+  TextEditor,
   Textarea,
   Theme,
   Tile2 as Tile,
@@ -22918,6 +22938,7 @@ export {
   fadeInRtl,
   fadeInTop,
   fadeOutBottom,
+  filterMapper,
   fullWidthScreenIcon,
   getDrawerAttributes,
   getParentPath,