@uniformdev/design-system 19.134.0 → 19.134.3-alpha.28

package/dist/index.js

@@ -1371,6 +1371,8 @@ __export(src_exports, {
   CurrentDrawerContext: () => CurrentDrawerContext,
   DATE_OPERATORS: () => DATE_OPERATORS,
   DashedBox: () => DashedBox,
+  DateEditor: () => DateEditor,
+  DateRangeEditor: () => DateRangeEditor,
   DateTimePicker: () => DateTimePicker,
   DateTimePickerVariant: () => DateTimePickerVariant,
   DebouncedInputKeywordSearch: () => DebouncedInputKeywordSearch,
@@ -1386,9 +1388,12 @@ __export(src_exports, {
   Fieldset: () => Fieldset,
   FilterButton: () => FilterButton2,
   FilterControls: () => FilterControls,
+  FilterEditorRenderer: () => FilterEditorRenderer,
   FilterItem: () => FilterItem,
   FilterItems: () => FilterItems,
   FilterMenu: () => FilterMenu,
+  FilterMultiChoiceEditor: () => FilterMultiChoiceEditor,
+  FilterSingleChoiceEditor: () => FilterSingleChoiceEditor,
   Heading: () => Heading,
   HexModalBackground: () => HexModalBackground,
   HorizontalRhythm: () => HorizontalRhythm,
@@ -1435,6 +1440,8 @@ __export(src_exports, {
   ModalDialog: () => ModalDialog,
   MultilineChip: () => MultilineChip,
   NUMBER_OPERATORS: () => NUMBER_OPERATORS,
+  NumberEditor: () => NumberEditor,
+  NumberRangeEditor: () => NumberRangeEditor,
   PageHeaderSection: () => PageHeaderSection,
   Pagination: () => Pagination,
   Paragraph: () => Paragraph,
@@ -1487,6 +1494,8 @@ __export(src_exports, {
   ShortcutRevealer: () => ShortcutRevealer,
   Skeleton: () => Skeleton,
   StatusBullet: () => StatusBullet,
+  StatusMultiEditor: () => StatusMultiEditor,
+  StatusSingleEditor: () => StatusSingleEditor,
   SuccessMessage: () => SuccessMessage,
   Switch: () => Switch,
   TAKEOVER_STACK_ID: () => TAKEOVER_STACK_ID,
@@ -1503,6 +1512,7 @@ __export(src_exports, {
   TableRow: () => TableRow,
   Tabs: () => Tabs,
   TakeoverDrawerRenderer: () => TakeoverDrawerRenderer,
+  TextEditor: () => TextEditor,
   Textarea: () => Textarea,
   Theme: () => Theme,
   Tile: () => Tile2,
@@ -1547,6 +1557,7 @@ __export(src_exports, {
   fadeInRtl: () => fadeInRtl,
   fadeInTop: () => fadeInTop,
   fadeOutBottom: () => fadeOutBottom,
+  filterMapper: () => filterMapper,
   fullWidthScreenIcon: () => fullWidthScreenIcon,
   getDrawerAttributes: () => getDrawerAttributes,
   getParentPath: () => getParentPath,
@@ -13529,7 +13540,7 @@ function isMenuSeparator(child) {
 // src/components/Menu/Menu.styles.ts
 init_emotion_jsx_shim();
 var import_react35 = require("@emotion/react");
-var menuStyles = import_react35.css`
+var menuStyles = (maxMenuHeight) => import_react35.css`
   box-shadow: var(--shadow-base);
   border-radius: var(--rounded-base);
   background: var(--gray-50);
@@ -13539,10 +13550,21 @@ var menuStyles = import_react35.css`
   outline: none;
   position: relative;
   z-index: var(--z-50);
-
   &:focus {
     outline: none;
   }
+
+  // resolves uni-2997 for smaller screens not being able to access large menus
+  // the code was removed in https://github.com/uniformdev/platform/commit/0067e6c87aaf29147c656949bbf49d632d3e89dc#diff-84f70b10af4d4ec4f57c535e3c44b04c30ce95ac337ce21db9f1ffd8393a846d
+  // but we need to keep it for the Menu component if the menu is larger than the screen
+  ${maxMenuHeight ? `
+  overflow-x: hidden;
+  overflow-y: auto;
+  height: min(${maxMenuHeight}, var(--popover-available-height));
+  scroll-snap-align: start;
+  scroll-snap-stop: always;
+  ${scrollbarStyles}
+  ` : ""}
 `;
 
 // src/components/Menu/Menu.tsx
@@ -13558,6 +13580,7 @@ var Menu = React8.forwardRef(function Menu2({
   disableAutoSeparatorManagement,
   menuItemsContainerCssClasses,
   testId,
+  maxMenuHeight,
   ...props
 }, ref) {
   const placementOverride = legacyPlacements.includes(placement) ? void 0 : placement;
@@ -13572,7 +13595,7 @@ var Menu = React8.forwardRef(function Menu2({
         shift: menu.parent ? -4 : 0,
         ...props,
         css: [
-          menuStyles,
+          menuStyles(maxMenuHeight),
           typeof menuItemsContainerCssClasses === "object" ? menuItemsContainerCssClasses : void 0
         ],
         className: typeof menuItemsContainerCssClasses === "string" ? menuItemsContainerCssClasses : "",
@@ -13825,6 +13848,7 @@ var ButtonWithMenu = ({
   size = "lg",
   menuContainerCssClasses,
   withoutPortal = false,
+  maxMenuHeight,
   ...buttonProps
 }) => {
   const buttonTheme = {
@@ -13883,6 +13907,7 @@ var ButtonWithMenu = ({
             placement,
             menuTrigger: clickableButton,
             menuItemsContainerCssClasses: menuContainerCssClasses,
+            maxMenuHeight,
             children
           }
         )
@@ -13894,6 +13919,7 @@ var ButtonWithMenu = ({
           menuTrigger: dropdownButton,
           menuItemsContainerCssClasses: menuContainerCssClasses,
           portal: withoutPortal,
+          maxMenuHeight,
           children
         }
       ) })
@@ -18867,6 +18893,7 @@ var MediaCard = ({
   menuItems,
   sideSection: sideSection2,
   onClick,
+  buttonType,
   ...cardProps
 }) => {
   const onStopPropogation = (0, import_react105.useCallback)((e) => {
@@ -18874,7 +18901,7 @@ var MediaCard = ({
   }, []);
   const hasMenuItems = Array.isArray(menuItems) ? menuItems.length > 0 : Boolean(menuItems);
   return /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)(Card, { css: cardBase, ...cardProps, onClick, "data-testid": "card-item", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("button", { tabIndex: -1, css: coverWrapper, children: cover }),
+    /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("button", { tabIndex: -1, css: coverWrapper, type: buttonType, children: cover }),
     /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { css: contentWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)(HorizontalRhythm, { gap: "sm", justify: "space-between", align: "center", css: { width: "100%" }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)(VerticalRhythm, { gap: "0", align: "flex-start", css: { flex: 1, minWidth: 0 }, children: [
         /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)(HorizontalRhythm, { gap: "xs", align: "center", css: { maxWidth: "100%" }, children: [
@@ -22300,6 +22327,18 @@ var ConditionalFilterRow = import_react139.css`
 
   ${cq("380px")} {
     align-items: center;
+
+    &:after {
+      content: '';
+      display: block;
+      height: 1px;
+      background: var(--gray-300);
+      width: calc(100% - var(--spacing-base));
+      margin-left: var(--spacing-base);
+    }
+    &:last-of-type:after {
+      display: none;
+    }
   }
 
   &:first-of-type {
@@ -22307,6 +22346,12 @@ var ConditionalFilterRow = import_react139.css`
     grid-template-columns: 50px 1fr;
   }
 
+  ${cq("580px")} {
+    &:after {
+      display: none;
+    }
+  }
+
   @media (prefers-reduced-motion: no-preference) {
     animation: ${fadeInLtr} var(--duration-fast) var(--timing-ease-out);
   }
@@ -22314,15 +22359,24 @@ var ConditionalFilterRow = import_react139.css`
 var ConditionalInputRow = import_react139.css`
   display: flex;
   gap: var(--spacing-sm);
-  flex-direction: column;
+  flex-wrap: wrap;
 
   ${cq("380px")} {
-    align-items: center;
-    flex-direction: row;
+    & > div:nth-child(-n + 2) {
+      width: calc(50% - var(--spacing-sm));
+    }
+
+    & > div:nth-child(n + 3) {
+      width: calc(100% - 48px);
+    }
   }
   ${cq("580px")} {
     display: grid;
     grid-template-columns: 200px 160px 1fr 32px;
+
+    & > div:nth-child(n) {
+      width: auto;
+    }
   }
 `;
 var SearchInput = import_react139.css`
@@ -22509,243 +22563,25 @@ var FilterButton2 = ({
 
 // src/components/SearchAndFilter/FilterControls.tsx
 init_emotion_jsx_shim();
-var import_react141 = require("react");
-var import_react_use3 = require("react-use");
+var import_react143 = require("react");
+var import_react_use4 = require("react-use");
 
 // src/components/SearchAndFilter/hooks/useSearchAndFilter.tsx
 init_emotion_jsx_shim();
-var import_react140 = require("react");
-var import_jsx_runtime119 = require("@emotion/react/jsx-runtime");
-var SearchAndFilterContext = (0, import_react140.createContext)({
-  searchTerm: "",
-  setSearchTerm: () => {
-  },
-  filterVisibility: void 0,
-  setFilterVisibility: () => {
-  },
-  filters: [],
-  setFilters: () => {
-  },
-  handleAddFilter: () => {
-  },
-  handleResetFilters: () => {
-  },
-  handleDeleteFilter: () => {
-  },
-  setSortBy: () => {
-  },
-  sortByValue: "",
-  filterOptions: [],
-  sortOptions: [],
-  validFilterQuery: [],
-  totalResults: 0
-});
-var SearchAndFilterProvider = ({
-  filters,
-  filterOptions,
-  sortOptions,
-  defaultSortByValue,
-  filterMode: filterMode3 = void 0,
-  onSearchChange,
-  onChange,
-  onSortChange,
-  resetFilterValues = [],
-  totalResults,
-  children
-}) => {
-  const [searchTerm, setSearchTerm] = (0, import_react140.useState)("");
-  const deferredSearchTerm = (0, import_react140.useDeferredValue)(searchTerm);
-  const [filterVisibility, setFilterVisibility] = (0, import_react140.useState)(filterMode3);
-  const [sortByValue, setSortByValue] = (0, import_react140.useState)(defaultSortByValue);
-  const handleSearchTerm = (0, import_react140.useCallback)(
-    (term) => {
-      setSearchTerm(term);
-      onSearchChange == null ? void 0 : onSearchChange(term);
-    },
-    [setSearchTerm, onSearchChange]
-  );
-  const handleOnSortChange = (0, import_react140.useCallback)(
-    (sort) => {
-      setSortByValue(sort);
-      onSortChange(sort);
-    },
-    [onSortChange]
-  );
-  const handleToggleFilterVisibilty = (0, import_react140.useCallback)(
-    (mode) => setFilterVisibility(mode),
-    [setFilterVisibility]
-  );
-  const handleAddFilter = (0, import_react140.useCallback)(() => {
-    onChange([...filters, { field: "", operator: "", value: "" }]);
-  }, [filters, onChange]);
-  const handleResetFilters = (0, import_react140.useCallback)(() => {
-    onChange(resetFilterValues);
-  }, [onChange, resetFilterValues]);
-  const handleDeleteFilter = (0, import_react140.useCallback)(
-    (index) => {
-      const remainingFilters = filters.filter((_, i) => i !== index);
-      onChange(remainingFilters);
-    },
-    [filters, onChange]
-  );
-  const validFilterQuery = (0, import_react140.useMemo)(() => {
-    const hasValidFilters = filters.every((f) => f.field && f.operator && f.value);
-    if (hasValidFilters) {
-      return filters;
-    }
-  }, [filters]);
-  (0, import_react140.useEffect)(() => {
-    if (filterVisibility) {
-      const handleEscKeyFilterClose = (e) => {
-        if (e.key === "Escape") {
-          setFilterVisibility(void 0);
-        }
-      };
-      document.addEventListener("keydown", (e) => handleEscKeyFilterClose(e));
-      return () => {
-        document.removeEventListener("keydown", (e) => handleEscKeyFilterClose(e));
-      };
-    }
-  }, [filterVisibility]);
-  return /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
-    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
-      },
-      children: /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(VerticalRhythm, { children })
-    }
-  );
-};
-var useSearchAndFilter = () => {
-  const value = (0, import_react140.useContext)(SearchAndFilterContext);
-  return { ...value };
-};
-
-// src/components/SearchAndFilter/FilterControls.tsx
-var import_jsx_runtime120 = require("@emotion/react/jsx-runtime");
-var FilterControls = ({
-  children,
-  defaultSortByValue,
-  hideSearchInput
-}) => {
-  var _a, _b, _c;
-  const {
-    setFilterVisibility,
-    filterVisibility,
-    setSearchTerm,
-    validFilterQuery,
-    searchTerm,
-    sortByValue,
-    filterOptions
-  } = useSearchAndFilter();
-  const [initialSortValue, setInitialSortValue] = (0, import_react141.useState)(sortByValue);
-  const [localeSearchTerm, setLocaleSearchTerm] = (0, import_react141.useState)("");
-  const [userHasChangedSortByValue, setUserHasChangedSortByValue] = (0, import_react141.useState)(false);
-  (0, import_react_use3.useDebounce)(
-    () => {
-      setSearchTerm(localeSearchTerm);
-    },
-    300,
-    [localeSearchTerm, searchTerm]
-  );
-  (0, import_react141.useEffect)(() => {
-    if (searchTerm === "") {
-      setLocaleSearchTerm("");
-    }
-  }, [searchTerm]);
-  const handleFilterToggle = (mode) => {
-    if (filterVisibility === "filters" && mode === "filters" || filterVisibility === "sort" && mode === "sort") {
-      return setFilterVisibility(void 0);
-    }
-    return setFilterVisibility(mode);
-  };
-  const sortValue = (sortByValue != null ? sortByValue : defaultSortByValue).split("_");
-  const sortDirection = sortValue == null ? void 0 : sortValue.pop();
-  const sortField = sortValue == null ? void 0 : sortValue.join("_");
-  const sortOn = sortField.startsWith("fields.") ? "contentTypeFields" : "metadata";
-  const sortByValueLabel = (_c = (_b = (_a = filterOptions == null ? void 0 : filterOptions.find((op) => op.value === sortOn)) == null ? void 0 : _a.options) == null ? void 0 : _b.find((f) => f.value === sortField)) == null ? void 0 : _c.label;
-  const sortByIcon = userHasChangedSortByValue ? sortDirection === "ASC" ? "arrow-up" : "arrow-down" : "sort-az";
-  (0, import_react_use3.useEffectOnce)(() => {
-    setInitialSortValue(sortByValue);
-  });
-  (0, import_react141.useEffect)(() => {
-    if (initialSortValue !== sortByValue) {
-      setUserHasChangedSortByValue(true);
-    }
-  }, [initialSortValue, sortByValue]);
-  return /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)(import_jsx_runtime120.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
-      FilterButton2,
-      {
-        "aria-controls": "search-and-filter-options",
-        "aria-label": "filter options",
-        "aria-haspopup": "true",
-        "aria-expanded": filterVisibility === "filters",
-        filterCount: validFilterQuery == null ? void 0 : validFilterQuery.length,
-        onClick: () => handleFilterToggle("filters"),
-        dataTestId: "filters-button"
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
-      FilterButton2,
-      {
-        "aria-controls": "search-and-filter-sortBy",
-        "aria-label": "sort by options",
-        "aria-haspopup": "true",
-        text: !userHasChangedSortByValue ? "Sort" : sortByValueLabel,
-        icon: sortByIcon,
-        "aria-expanded": filterVisibility === "sort",
-        hasSelectedValue: sortByValue !== "",
-        onClick: () => handleFilterToggle("sort"),
-        dataTestId: "sort-by-button"
-      }
-    ),
-    hideSearchInput ? null : /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
-      InputKeywordSearch,
-      {
-        placeholder: "Search...",
-        onSearchTextChanged: (e) => setLocaleSearchTerm(e),
-        value: localeSearchTerm,
-        compact: true,
-        rounded: true,
-        css: SearchInput
-      }
-    ),
-    children
-  ] });
-};
-
-// src/components/SearchAndFilter/FilterItem.tsx
-init_emotion_jsx_shim();
-var import_react145 = require("react");
+var import_react142 = require("react");
 
 // src/components/SearchAndFilter/FilterEditor.tsx
 init_emotion_jsx_shim();
-var import_react143 = require("react");
-var import_react_use4 = require("react-use");
+var import_react141 = require("react");
+var import_react_use3 = require("react-use");
 
 // src/components/Validation/StatusBullet.tsx
 init_emotion_jsx_shim();
 
 // src/components/Validation/StatusBullet.styles.ts
 init_emotion_jsx_shim();
-var import_react142 = require("@emotion/react");
-var StatusBulletContainer = import_react142.css`
+var import_react140 = require("@emotion/react");
+var StatusBulletContainer = import_react140.css`
   align-items: center;
   align-self: center;
   color: var(--gray-500);
@@ -22762,33 +22598,33 @@ var StatusBulletContainer = import_react142.css`
     display: block;
   }
 `;
-var StatusBulletBase = import_react142.css`
+var StatusBulletBase = import_react140.css`
   font-size: var(--fs-sm);
   &:before {
     width: var(--fs-xs);
     height: var(--fs-xs);
   }
 `;
-var StatusBulletSmall = import_react142.css`
+var StatusBulletSmall = import_react140.css`
   font-size: var(--fs-xs);
   &:before {
     width: var(--fs-xxs);
     height: var(--fs-xxs);
   }
 `;
-var StatusDraft = import_react142.css`
+var StatusDraft = import_react140.css`
   &:before {
     background: var(--white);
     box-shadow: inset 0 0 0 0.125rem var(--primary-action-default);
   }
 `;
-var StatusModified = import_react142.css`
+var StatusModified = import_react140.css`
   &:before {
     background: linear-gradient(to right, var(--white) 50%, var(--primary-action-default) 50% 100%);
     box-shadow: inset 0 0 0 0.125rem var(--primary-action-default);
   }
 `;
-var StatusError = import_react142.css`
+var StatusError = import_react140.css`
   color: var(--error);
   &:before {
     /* TODO: replace this with an svg icon */
@@ -22801,29 +22637,29 @@ var StatusError = import_react142.css`
     );
   }
 `;
-var StatusPublished = import_react142.css`
+var StatusPublished = import_react140.css`
   &:before {
     background: var(--primary-action-default);
   }
 `;
-var StatusOrphan = import_react142.css`
+var StatusOrphan = import_react140.css`
   &:before {
     background: var(--brand-secondary-5);
   }
 `;
-var StatusUnknown = import_react142.css`
+var StatusUnknown = import_react140.css`
   &:before {
     background: var(--gray-800);
   }
 `;
-var StatusDeleted = import_react142.css`
+var StatusDeleted = import_react140.css`
   &:before {
     background: var(--error);
   }
 `;
 
 // src/components/Validation/StatusBullet.tsx
-var import_jsx_runtime121 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime119 = require("@emotion/react/jsx-runtime");
 var StatusBullet = ({
   status,
   hideText = false,
@@ -22843,7 +22679,7 @@ var StatusBullet = ({
     Deleted: StatusDeleted
   };
   const statusSize = size === "base" ? StatusBulletBase : StatusBulletSmall;
-  return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
     "span",
     {
       role: "status",
@@ -22856,7 +22692,7 @@ var StatusBullet = ({
 };
 
 // src/components/SearchAndFilter/FilterEditor.tsx
-var import_jsx_runtime122 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime120 = require("@emotion/react/jsx-runtime");
 var readOnlyAttributes = {
   isSearchable: false,
   menuIsOpen: false,
@@ -22865,13 +22701,13 @@ var readOnlyAttributes = {
 var FilterMultiChoiceEditor = ({
   value,
   options,
-  isDisabled,
+  disabled: disabled2,
   readOnly,
   valueTestId,
   ...props
 }) => {
   const readOnlyProps = readOnly ? readOnlyAttributes : {};
-  return /* @__PURE__ */ (0, import_jsx_runtime122.jsx)("div", { "data-testid": valueTestId, children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("div", { "data-testid": valueTestId, children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
     InputComboBox,
     {
       ...props,
@@ -22879,12 +22715,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) {
@@ -22901,13 +22737,13 @@ var FilterMultiChoiceEditor = ({
 var FilterSingleChoiceEditor = ({
   options,
   value,
-  isDisabled,
+  disabled: disabled2,
   readOnly,
   onChange,
   valueTestId
 }) => {
   const readOnlyProps = readOnly ? readOnlyAttributes : {};
-  return /* @__PURE__ */ (0, import_jsx_runtime122.jsx)("div", { "data-testid": valueTestId, children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("div", { "data-testid": valueTestId, children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
     InputComboBox,
     {
       placeholder: "Type to search...",
@@ -22917,8 +22753,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) {
@@ -22933,18 +22769,18 @@ var FilterSingleChoiceEditor = ({
   ) });
 };
 var CustomOptions = ({ label, value }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(StatusBullet, { status: label, message: value });
+  return /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(StatusBullet, { status: label, message: value });
 };
 var StatusMultiEditor = ({
   options,
   value,
-  isDisabled,
+  disabled: disabled2,
   readOnly,
   onChange,
   valueTestId
 }) => {
   const readOnlyProps = readOnly ? readOnlyAttributes : {};
-  return /* @__PURE__ */ (0, import_jsx_runtime122.jsx)("div", { "data-testid": valueTestId, children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("div", { "data-testid": valueTestId, children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
     InputComboBox,
     {
       options,
@@ -22954,8 +22790,8 @@ var StatusMultiEditor = ({
         return onChange((_a = e.map((item) => item.value)) != null ? _a : []);
       },
       formatOptionLabel: CustomOptions,
-      value,
-      isDisabled,
+      value: options == null ? void 0 : options.filter((option) => value == null ? void 0 : value.includes(option.value)),
+      isDisabled: disabled2,
       styles: {
         menu(base) {
           return {
@@ -22971,13 +22807,13 @@ var StatusMultiEditor = ({
 var StatusSingleEditor = ({
   options,
   value,
-  isDisabled,
+  disabled: disabled2,
   readOnly,
   onChange,
   valueTestId
 }) => {
   const readOnlyProps = readOnly ? readOnlyAttributes : {};
-  return /* @__PURE__ */ (0, import_jsx_runtime122.jsx)("div", { "data-testid": valueTestId, children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("div", { "data-testid": valueTestId, children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
     InputComboBox,
     {
       options,
@@ -22986,8 +22822,8 @@ var StatusSingleEditor = ({
         return onChange((_a = e == null ? void 0 : e.value) != null ? _a : "");
       },
       formatOptionLabel: CustomOptions,
-      value,
-      isDisabled,
+      value: options == null ? void 0 : options.find((option) => option.value === value),
+      isDisabled: disabled2,
       styles: {
         menu(base) {
           return {
@@ -23000,9 +22836,15 @@ var StatusSingleEditor = ({
     }
   ) });
 };
-var TextEditor = ({ onChange, ariaLabel, value, readOnly, valueTestId }) => {
-  (0, import_react_use4.useDebounce)(() => onChange, 500, [value]);
-  return /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
+var TextEditor = ({
+  onChange,
+  ariaLabel,
+  value,
+  readOnly,
+  valueTestId
+}) => {
+  (0, import_react_use3.useDebounce)(() => onChange, 500, [value]);
+  return /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
     Input,
     {
       showLabel: false,
@@ -23023,10 +22865,10 @@ var NumberRangeEditor = ({
   readOnly,
   valueTestId
 }) => {
-  const [minValue, setMinValue] = (0, import_react143.useState)("");
-  const [maxValue, setMaxValue] = (0, import_react143.useState)("");
-  const [error, setError] = (0, import_react143.useState)("");
-  (0, import_react143.useEffect)(() => {
+  const [minValue, setMinValue] = (0, import_react141.useState)("");
+  const [maxValue, setMaxValue] = (0, import_react141.useState)("");
+  const [error, setError] = (0, import_react141.useState)("");
+  (0, import_react141.useEffect)(() => {
     if (!maxValue && !minValue) {
       return;
     }
@@ -23045,9 +22887,9 @@ var NumberRangeEditor = ({
     setError("");
     onChange([minValue, maxValue]);
   }, [maxValue, minValue, setError]);
-  return /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)(import_jsx_runtime122.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)("div", { css: twoColumnGrid, "data-testid": valueTestId, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)(import_jsx_runtime120.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)("div", { css: twoColumnGrid, "data-testid": valueTestId, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
         Input,
         {
           label: `${ariaLabel}-min`,
@@ -23062,7 +22904,7 @@ var NumberRangeEditor = ({
           readOnly
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
         Input,
         {
           type: "number",
@@ -23078,7 +22920,7 @@ var NumberRangeEditor = ({
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(ErrorContainer, { errorMessage: error })
+    /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(ErrorContainer, { errorMessage: error })
   ] });
 };
 var NumberEditor = ({
@@ -23089,7 +22931,7 @@ var NumberEditor = ({
   readOnly,
   valueTestId
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
     Input,
     {
       label: ariaLabel,
@@ -23112,7 +22954,7 @@ var DateEditor = ({
   readOnly,
   valueTestId
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
     Input,
     {
       type: "date",
@@ -23134,10 +22976,10 @@ var DateRangeEditor = ({
   readOnly,
   valueTestId
 }) => {
-  const [minDateValue, setMinDateValue] = (0, import_react143.useState)(value ? value[0] : "");
-  const [maxDateValue, setMaxDateValue] = (0, import_react143.useState)(value ? value[1] : "");
-  const [error, setError] = (0, import_react143.useState)("");
-  (0, import_react143.useEffect)(() => {
+  const [minDateValue, setMinDateValue] = (0, import_react141.useState)(value ? value[0] : "");
+  const [maxDateValue, setMaxDateValue] = (0, import_react141.useState)(value ? value[1] : "");
+  const [error, setError] = (0, import_react141.useState)("");
+  (0, import_react141.useEffect)(() => {
     if (!minDateValue || !maxDateValue) {
       return;
     }
@@ -23168,9 +23010,9 @@ var DateRangeEditor = ({
     setError("");
     onChange([minDateValue, maxDateValue]);
   }, [minDateValue, maxDateValue, setError]);
-  return /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)(import_jsx_runtime122.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)("div", { css: twoColumnGrid, "data-testid": valueTestId, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)(import_jsx_runtime120.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)("div", { css: twoColumnGrid, "data-testid": valueTestId, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
         Input,
         {
           label: `${ariaLabel}-min-date`,
@@ -23183,7 +23025,7 @@ var DateRangeEditor = ({
           readOnly
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
         Input,
         {
           label: `${ariaLabel}-max-date`,
@@ -23197,18 +23039,19 @@ var DateRangeEditor = ({
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(ErrorContainer, { errorMessage: error })
+    /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(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__ */ (0, import_jsx_runtime122.jsx)(Editor, { ...props, disabled: props.isDisabled });
+  return /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(Editor, { ...props });
 };
 var filterMapper = {
   multiChoice: FilterMultiChoiceEditor,
@@ -23223,14 +23066,14 @@ var filterMapper = {
   empty: null
 };
 var ErrorContainer = ({ errorMessage }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
     "div",
     {
       css: {
         gridColumn: "span 6",
         order: 6
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(FieldMessage, { errorMessage })
+      children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(FieldMessage, { errorMessage })
     }
   );
 };
@@ -23240,6 +23083,229 @@ var twoColumnGrid = {
   gap: "var(--spacing-sm);"
 };
 
+// src/components/SearchAndFilter/hooks/useSearchAndFilter.tsx
+var import_jsx_runtime121 = require("@emotion/react/jsx-runtime");
+var SearchAndFilterContext = (0, import_react142.createContext)({
+  searchTerm: "",
+  setSearchTerm: () => {
+  },
+  filterVisibility: void 0,
+  setFilterVisibility: () => {
+  },
+  filters: [],
+  setFilters: () => {
+  },
+  handleAddFilter: () => {
+  },
+  handleResetFilters: () => {
+  },
+  handleDeleteFilter: () => {
+  },
+  setSortBy: () => {
+  },
+  sortByValue: "",
+  filterOptions: [],
+  sortOptions: [],
+  validFilterQuery: [],
+  filterMapper: {},
+  totalResults: 0
+});
+var SearchAndFilterProvider = ({
+  filters,
+  filterOptions,
+  sortOptions,
+  defaultSortByValue,
+  filterMode: filterMode3 = void 0,
+  onSearchChange,
+  onChange,
+  onSortChange,
+  resetFilterValues = [],
+  totalResults,
+  filterMapper: filterMapper2 = filterMapper,
+  children
+}) => {
+  const [searchTerm, setSearchTerm] = (0, import_react142.useState)("");
+  const deferredSearchTerm = (0, import_react142.useDeferredValue)(searchTerm);
+  const [filterVisibility, setFilterVisibility] = (0, import_react142.useState)(filterMode3);
+  const [sortByValue, setSortByValue] = (0, import_react142.useState)(defaultSortByValue);
+  const handleSearchTerm = (0, import_react142.useCallback)(
+    (term) => {
+      setSearchTerm(term);
+      onSearchChange == null ? void 0 : onSearchChange(term);
+    },
+    [setSearchTerm, onSearchChange]
+  );
+  const handleOnSortChange = (0, import_react142.useCallback)(
+    (sort) => {
+      setSortByValue(sort);
+      onSortChange(sort);
+    },
+    [onSortChange]
+  );
+  const handleToggleFilterVisibilty = (0, import_react142.useCallback)(
+    (mode) => setFilterVisibility(mode),
+    [setFilterVisibility]
+  );
+  const handleAddFilter = (0, import_react142.useCallback)(() => {
+    onChange([...filters, { field: "", operator: "", value: "" }]);
+  }, [filters, onChange]);
+  const handleResetFilters = (0, import_react142.useCallback)(() => {
+    onChange(resetFilterValues);
+  }, [onChange, resetFilterValues]);
+  const handleDeleteFilter = (0, import_react142.useCallback)(
+    (index) => {
+      const remainingFilters = filters.filter((_, i) => i !== index);
+      onChange(remainingFilters);
+    },
+    [filters, onChange]
+  );
+  const validFilterQuery = (0, import_react142.useMemo)(() => {
+    const hasValidFilters = filters.every((f) => f.field && f.operator && f.value);
+    if (hasValidFilters) {
+      return filters;
+    }
+  }, [filters]);
+  (0, import_react142.useEffect)(() => {
+    if (filterVisibility) {
+      const handleEscKeyFilterClose = (e) => {
+        if (e.key === "Escape") {
+          setFilterVisibility(void 0);
+        }
+      };
+      document.addEventListener("keydown", (e) => handleEscKeyFilterClose(e));
+      return () => {
+        document.removeEventListener("keydown", (e) => handleEscKeyFilterClose(e));
+      };
+    }
+  }, [filterVisibility]);
+  return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+    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,
+        filterMapper: filterMapper2
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(VerticalRhythm, { children })
+    }
+  );
+};
+var useSearchAndFilter = () => {
+  const value = (0, import_react142.useContext)(SearchAndFilterContext);
+  return { ...value };
+};
+
+// src/components/SearchAndFilter/FilterControls.tsx
+var import_jsx_runtime122 = require("@emotion/react/jsx-runtime");
+var FilterControls = ({
+  children,
+  defaultSortByValue,
+  hideSearchInput
+}) => {
+  var _a, _b, _c;
+  const {
+    setFilterVisibility,
+    filterVisibility,
+    setSearchTerm,
+    validFilterQuery,
+    searchTerm,
+    sortByValue,
+    filterOptions
+  } = useSearchAndFilter();
+  const [initialSortValue, setInitialSortValue] = (0, import_react143.useState)(sortByValue);
+  const [localeSearchTerm, setLocaleSearchTerm] = (0, import_react143.useState)("");
+  const [userHasChangedSortByValue, setUserHasChangedSortByValue] = (0, import_react143.useState)(false);
+  (0, import_react_use4.useDebounce)(
+    () => {
+      setSearchTerm(localeSearchTerm);
+    },
+    300,
+    [localeSearchTerm, searchTerm]
+  );
+  (0, import_react143.useEffect)(() => {
+    if (searchTerm === "") {
+      setLocaleSearchTerm("");
+    }
+  }, [searchTerm]);
+  const handleFilterToggle = (mode) => {
+    if (filterVisibility === "filters" && mode === "filters" || filterVisibility === "sort" && mode === "sort") {
+      return setFilterVisibility(void 0);
+    }
+    return setFilterVisibility(mode);
+  };
+  const sortValue = (sortByValue != null ? sortByValue : defaultSortByValue).split("_");
+  const sortDirection = sortValue == null ? void 0 : sortValue.pop();
+  const sortField = sortValue == null ? void 0 : sortValue.join("_");
+  const sortOn = sortField.startsWith("fields.") ? "contentTypeFields" : "metadata";
+  const sortByValueLabel = (_c = (_b = (_a = filterOptions == null ? void 0 : filterOptions.find((op) => op.value === sortOn)) == null ? void 0 : _a.options) == null ? void 0 : _b.find((f) => f.value === sortField)) == null ? void 0 : _c.label;
+  const sortByIcon = userHasChangedSortByValue ? sortDirection === "ASC" ? "arrow-up" : "arrow-down" : "sort-az";
+  (0, import_react_use4.useEffectOnce)(() => {
+    setInitialSortValue(sortByValue);
+  });
+  (0, import_react143.useEffect)(() => {
+    if (initialSortValue !== sortByValue) {
+      setUserHasChangedSortByValue(true);
+    }
+  }, [initialSortValue, sortByValue]);
+  return /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)(import_jsx_runtime122.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
+      FilterButton2,
+      {
+        "aria-controls": "search-and-filter-options",
+        "aria-label": "filter options",
+        "aria-haspopup": "true",
+        "aria-expanded": filterVisibility === "filters",
+        filterCount: validFilterQuery == null ? void 0 : validFilterQuery.length,
+        onClick: () => handleFilterToggle("filters"),
+        dataTestId: "filters-button"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
+      FilterButton2,
+      {
+        "aria-controls": "search-and-filter-sortBy",
+        "aria-label": "sort by options",
+        "aria-haspopup": "true",
+        text: !userHasChangedSortByValue ? "Sort" : sortByValueLabel,
+        icon: sortByIcon,
+        "aria-expanded": filterVisibility === "sort",
+        hasSelectedValue: sortByValue !== "",
+        onClick: () => handleFilterToggle("sort"),
+        dataTestId: "sort-by-button"
+      }
+    ),
+    hideSearchInput ? null : /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
+      InputKeywordSearch,
+      {
+        placeholder: "Search...",
+        onSearchTextChanged: (e) => setLocaleSearchTerm(e),
+        value: localeSearchTerm,
+        compact: true,
+        rounded: true,
+        css: SearchInput
+      }
+    ),
+    children
+  ] });
+};
+
+// src/components/SearchAndFilter/FilterItem.tsx
+init_emotion_jsx_shim();
+var import_react145 = require("react");
+
 // src/components/SearchAndFilter/FilterMenu.tsx
 init_emotion_jsx_shim();
 var import_react144 = __toESM(require("react"));
@@ -23311,7 +23377,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 } = (0, import_react145.useMemo)(() => {
+  const { selectedFieldValue, selectedOperatorValue, selectedMetaValue, readOnly, bindable } = (0, import_react145.useMemo)(() => {
     var _a2;
     const currentSelectedFilter = filterOptions.find((item) => {
       var _a3;
@@ -23324,19 +23390,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,
@@ -23403,7 +23464,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"
         }
@@ -23688,6 +23750,7 @@ var SegmentedControl = ({
     {
       css: [segmentedControlStyles, orientation === "vertical" ? segmentedControlVerticalStyles : void 0],
       ...props,
+      "data-testid": "segmented-control",
       children: options.map((option, index) => {
         var _a;
         if (!option) {
@@ -23854,6 +23917,7 @@ var SearchAndFilter = ({
   viewSwitchControls,
   resultsContainerView = /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(SearchAndFilterResultContainer, {}),
   children = /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(FilterModeView, {}),
+  filterMapper: filterMapper2 = filterMapper,
   onChange,
   onSearchChange,
   onSortChange,
@@ -23873,6 +23937,7 @@ var SearchAndFilter = ({
       onSortChange,
       totalResults,
       resetFilterValues,
+      filterMapper: filterMapper2,
       children: /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)(VerticalRhythm, { css: SearchAndFilterContainer, "data-testid": "search-and-filter", children: [
         /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("div", { css: SearchAndFilterOutterControlWrapper(viewSwitchControls ? "1fr auto" : "1fr"), children: [
           /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
@@ -24516,6 +24581,8 @@ var ToastContainer = ({ limit = 4 }) => {
   CurrentDrawerContext,
   DATE_OPERATORS,
   DashedBox,
+  DateEditor,
+  DateRangeEditor,
   DateTimePicker,
   DateTimePickerVariant,
   DebouncedInputKeywordSearch,
@@ -24531,9 +24598,12 @@ var ToastContainer = ({ limit = 4 }) => {
   Fieldset,
   FilterButton,
   FilterControls,
+  FilterEditorRenderer,
   FilterItem,
   FilterItems,
   FilterMenu,
+  FilterMultiChoiceEditor,
+  FilterSingleChoiceEditor,
   Heading,
   HexModalBackground,
   HorizontalRhythm,
@@ -24580,6 +24650,8 @@ var ToastContainer = ({ limit = 4 }) => {
   ModalDialog,
   MultilineChip,
   NUMBER_OPERATORS,
+  NumberEditor,
+  NumberRangeEditor,
   PageHeaderSection,
   Pagination,
   Paragraph,
@@ -24632,6 +24704,8 @@ var ToastContainer = ({ limit = 4 }) => {
   ShortcutRevealer,
   Skeleton,
   StatusBullet,
+  StatusMultiEditor,
+  StatusSingleEditor,
   SuccessMessage,
   Switch,
   TAKEOVER_STACK_ID,
@@ -24648,6 +24722,7 @@ var ToastContainer = ({ limit = 4 }) => {
   TableRow,
   Tabs,
   TakeoverDrawerRenderer,
+  TextEditor,
   Textarea,
   Theme,
   Tile,
@@ -24692,6 +24767,7 @@ var ToastContainer = ({ limit = 4 }) => {
   fadeInRtl,
   fadeInTop,
   fadeOutBottom,
+  filterMapper,
   fullWidthScreenIcon,
   getDrawerAttributes,
   getParentPath,