@uniformdev/design-system 19.122.1-alpha.0 → 19.125.2-alpha.3

package/dist/index.js

@@ -1467,6 +1467,7 @@ __export(src_exports, {
   RICHTEXT_OPERATORS: () => RICHTEXT_OPERATORS,
   ResolveIcon: () => ResolveIcon,
   RichTextToolbarIcon: () => RichTextToolbarIcon,
+  SYSTEM_DATE_OPERATORS: () => SYSTEM_DATE_OPERATORS,
   SYSTEM_FIELD_OPERATORS: () => SYSTEM_FIELD_OPERATORS,
   ScrollableList: () => ScrollableList,
   ScrollableListInputItem: () => ScrollableListInputItem,
@@ -4200,7 +4201,7 @@ var import_react22 = require("@emotion/react");
 var PageHeaderSectionContainer = import_react22.css`
   display: flex;
   justify-content: space-between;
-  margin-bottom: var(--spacing-lg);
+  margin-bottom: var(--spacing-sm);
   flex-direction: column;
   gap: var(--spacing-sm);
 
@@ -15579,7 +15580,8 @@ function InputComboBox(props) {
               background: "var(--gray-100)",
               "&:hover": {
                 borderColor: "var(--gray-300)"
-              }
+              },
+              ...state.isFocused ? { borderColor: "var(--gray-300)" } : {}
             },
             ...(_b = (_a2 = props.styles) == null ? void 0 : _a2.control) == null ? void 0 : _b.call(_a2, base, state)
           };
@@ -19390,6 +19392,16 @@ var toggleInput2 = import_react110.css`
     color: var(--white);
   }
 
+  &:indeterminate,
+  &:indeterminate:hover,
+  &:indeterminate:focus {
+    background: var(--accent-dark-active)
+      url('data:image/svg+xml;base64,PHN2ZwogIHdpZHRoPSIxNiIKICBoZWlnaHQ9IjE2IgogIHZpZXdCb3g9IjAgMCAyNCAyNCIKICBmaWxsPSJub25lIgogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKPgogIDxwYXRoCiAgICBkPSJNNCAxMkM0IDExLjQ0NzcgNC40NDc3MiAxMSA1IDExSDE5QzE5LjU1MjMgMTEgMjAgMTEuNDQ3NyAyMCAxMkMyMCAxMi41NTIzIDE5LjU1MjMgMTMgMTkgMTNINUM0LjQ0NzcyIDEzIDQgMTIuNTUyMyA0IDEyWiIKICAgIGZpbGw9IndoaXRlIgogIC8+Cjwvc3ZnPg==')
+      no-repeat center center;
+    border-color: var(--accent-dark-active);
+    color: var(--white);
+  }
+
   &:hover {
     border-color: var(--accent-dark-hover);
   }
@@ -22116,6 +22128,43 @@ var USER_OPERATORS = [
     editorType: "text"
   }
 ];
+var SYSTEM_DATE_OPERATORS = [
+  {
+    label: "is...",
+    value: "eq",
+    editorType: "date"
+  },
+  {
+    label: "is between...",
+    value: "between",
+    editorType: "dateRange"
+  },
+  {
+    label: "is before...",
+    value: "lt",
+    editorType: "date"
+  },
+  {
+    label: "is after...",
+    value: "gt",
+    editorType: "date"
+  },
+  {
+    label: "is on or before...",
+    value: "lte",
+    editorType: "date"
+  },
+  {
+    label: "is on or after...",
+    value: "gte",
+    editorType: "date"
+  },
+  {
+    label: "is not...",
+    value: "neq",
+    editorType: "date"
+  }
+];
 var RICHTEXT_OPERATORS = [
   {
     label: "is empty...",
@@ -22303,7 +22352,6 @@ var AddConditionalBtn = import_react138.css`
   gap: var(--spacing-sm);
   transition: color var(--duration-fast) var(--timing-ease-out);
   padding: 0;
-  font-size: var(--fs-sm);
 
   &:hover,
   &:focus {
@@ -22358,7 +22406,7 @@ var SearchAndFilterOptionsContainer = import_react138.css`
   padding: var(--spacing-md) var(--spacing-md) var(--spacing-base);
   will-change: height;
   position: relative;
-  z-index: 2;
+  z-index: 1;
 `;
 var SearchAndFilterOptionsInnerContainer = import_react138.css`
   display: flex;
@@ -22368,6 +22416,11 @@ var SearchAndFilterOptionsInnerContainer = import_react138.css`
 var SearchAndFilterButtonGroup = import_react138.css`
   margin-top: var(--spacing-base);
 `;
+var SortFilterInputRow = import_react138.css`
+  align-items: center;
+  display: flex;
+  gap: var(--spacing-sm);
+`;
 
 // src/components/SearchAndFilter/FilterButton.tsx
 var import_jsx_runtime117 = require("@emotion/react/jsx-runtime");
@@ -22543,7 +22596,9 @@ var FilterControls = ({
     sortByValue,
     filterOptions
   } = useSearchAndFilter();
+  const [initialSortValue, setInitialSortValue] = (0, import_react140.useState)(sortByValue);
   const [localeSearchTerm, setLocaleSearchTerm] = (0, import_react140.useState)("");
+  const [userHasChangedSortByValue, setUserHasChangedSortByValue] = (0, import_react140.useState)(false);
   (0, import_react_use3.useDebounce)(
     () => {
       setSearchTerm(localeSearchTerm);
@@ -22557,7 +22612,7 @@ var FilterControls = ({
     }
   }, [searchTerm]);
   const handleFilterToggle = (mode) => {
-    if (filterVisibility && ["sort", "filters"].includes(filterVisibility)) {
+    if (filterVisibility === "filters" && mode === "filters" || filterVisibility === "sort" && mode === "sort") {
       return setFilterVisibility(void 0);
     }
     return setFilterVisibility(mode);
@@ -22567,7 +22622,15 @@ var FilterControls = ({
   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 = sortDirection === "ASC" ? "arrow-up" : "arrow-down";
+  const sortByIcon = userHasChangedSortByValue ? sortDirection === "ASC" ? "arrow-up" : "arrow-down" : "sort-az";
+  (0, import_react_use3.useEffectOnce)(() => {
+    setInitialSortValue(sortByValue);
+  });
+  (0, import_react140.useEffect)(() => {
+    if (initialSortValue !== sortByValue) {
+      setUserHasChangedSortByValue(true);
+    }
+  }, [initialSortValue, sortByValue]);
   return /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)(import_jsx_runtime119.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
       FilterButton2,
@@ -22586,7 +22649,7 @@ var FilterControls = ({
         "aria-controls": "search-and-filter-sortBy",
         "aria-label": "sort by options",
         "aria-haspopup": "true",
-        text: sortByValueLabel,
+        text: !userHasChangedSortByValue ? "Sort" : sortByValueLabel,
         icon: sortByIcon,
         "aria-expanded": filterVisibility === "sort",
         hasSelectedValue: sortByValue !== "",
@@ -22745,10 +22808,11 @@ var FilterMultiChoiceEditor = ({
   options,
   isDisabled,
   readOnly,
+  valueTestId,
   ...props
 }) => {
   const readOnlyProps = readOnly ? readOnlyAttributes : {};
-  return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("div", { "data-testid": valueTestId, children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
     InputComboBox,
     {
       ...props,
@@ -22763,19 +22827,28 @@ var FilterMultiChoiceEditor = ({
       },
       value,
       "aria-readonly": readOnly,
+      styles: {
+        menu(base) {
+          return {
+            ...base,
+            minWidth: "max-content"
+          };
+        }
+      },
       ...readOnlyProps
     }
-  );
+  ) });
 };
 var FilterSingleChoiceEditor = ({
   options,
   value,
   isDisabled,
   readOnly,
-  onChange
+  onChange,
+  valueTestId
 }) => {
   const readOnlyProps = readOnly ? readOnlyAttributes : {};
-  return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("div", { "data-testid": valueTestId, children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
     InputComboBox,
     {
       placeholder: "Type to search...",
@@ -22788,9 +22861,17 @@ var FilterSingleChoiceEditor = ({
       isDisabled,
       value,
       "aria-readonly": readOnly,
+      styles: {
+        menu(base) {
+          return {
+            ...base,
+            minWidth: "max-content"
+          };
+        }
+      },
       ...readOnlyProps
     }
-  );
+  ) });
 };
 var CustomOptions = ({ label, value }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(StatusBullet, { status: label, message: value });
@@ -22800,10 +22881,11 @@ var StatusMultiEditor = ({
   value,
   isDisabled,
   readOnly,
-  onChange
+  onChange,
+  valueTestId
 }) => {
   const readOnlyProps = readOnly ? readOnlyAttributes : {};
-  return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("div", { "data-testid": valueTestId, children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
     InputComboBox,
     {
       options,
@@ -22815,19 +22897,28 @@ var StatusMultiEditor = ({
       formatOptionLabel: CustomOptions,
       value,
       isDisabled,
+      styles: {
+        menu(base) {
+          return {
+            ...base,
+            minWidth: "max-content"
+          };
+        }
+      },
       ...readOnlyProps
     }
-  );
+  ) });
 };
 var StatusSingleEditor = ({
   options,
   value,
   isDisabled,
   readOnly,
-  onChange
+  onChange,
+  valueTestId
 }) => {
   const readOnlyProps = readOnly ? readOnlyAttributes : {};
-  return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("div", { "data-testid": valueTestId, children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
     InputComboBox,
     {
       options,
@@ -22838,11 +22929,19 @@ var StatusSingleEditor = ({
       formatOptionLabel: CustomOptions,
       value,
       isDisabled,
+      styles: {
+        menu(base) {
+          return {
+            ...base,
+            minWidth: "max-content"
+          };
+        }
+      },
       ...readOnlyProps
     }
-  );
+  ) });
 };
-var TextEditor = ({ onChange, ariaLabel, value, readOnly }) => {
+var TextEditor = ({ onChange, ariaLabel, value, readOnly, valueTestId }) => {
   (0, import_react_use4.useDebounce)(() => onChange, 500, [value]);
   return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
     Input,
@@ -22852,11 +22951,19 @@ var TextEditor = ({ onChange, ariaLabel, value, readOnly }) => {
       onChange: (e) => onChange(e.currentTarget.value),
       placeholder: "Enter phrase to search\u2026",
       value,
-      readOnly
+      readOnly,
+      "data-testid": valueTestId
     }
   );
 };
-var NumberRangeEditor = ({ onChange, disabled: disabled2, ariaLabel, value, readOnly }) => {
+var NumberRangeEditor = ({
+  onChange,
+  disabled: disabled2,
+  ariaLabel,
+  value,
+  readOnly,
+  valueTestId
+}) => {
   const [minValue, setMinValue] = (0, import_react142.useState)("");
   const [maxValue, setMaxValue] = (0, import_react142.useState)("");
   const [error, setError] = (0, import_react142.useState)("");
@@ -22879,41 +22986,50 @@ var NumberRangeEditor = ({ onChange, disabled: disabled2, ariaLabel, value, read
     setError("");
     onChange([minValue, maxValue]);
   }, [maxValue, minValue, setError]);
-  return /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("div", { css: twoColumnGrid, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
-      Input,
-      {
-        label: `${ariaLabel}-min`,
-        type: "number",
-        showLabel: false,
-        min: 0,
-        placeholder: "Low",
-        onChange: (e) => setMinValue(e.currentTarget.value),
-        "aria-invalid": !error ? false : true,
-        disabled: disabled2,
-        value: value ? value[0] : "",
-        readOnly
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
-      Input,
-      {
-        type: "number",
-        label: `${ariaLabel}-max`,
-        showLabel: false,
-        min: 0,
-        placeholder: "High",
-        onChange: (e) => setMaxValue(e.currentTarget.value),
-        "aria-invalid": !error ? false : true,
-        disabled: disabled2,
-        value: value ? value[1] : "",
-        readOnly
-      }
-    ),
+  return /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)(import_jsx_runtime121.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("div", { css: twoColumnGrid, "data-testid": valueTestId, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+        Input,
+        {
+          label: `${ariaLabel}-min`,
+          type: "number",
+          showLabel: false,
+          min: 0,
+          placeholder: "Low",
+          onChange: (e) => setMinValue(e.currentTarget.value),
+          "aria-invalid": !error ? false : true,
+          disabled: disabled2,
+          value: value ? value[0] : "",
+          readOnly
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+        Input,
+        {
+          type: "number",
+          label: `${ariaLabel}-max`,
+          showLabel: false,
+          min: 0,
+          placeholder: "High",
+          onChange: (e) => setMaxValue(e.currentTarget.value),
+          "aria-invalid": !error ? false : true,
+          disabled: disabled2,
+          value: value ? value[1] : "",
+          readOnly
+        }
+      )
+    ] }),
     /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(ErrorContainer, { errorMessage: error })
   ] });
 };
-var NumberEditor = ({ ariaLabel, onChange, disabled: disabled2, value, readOnly }) => {
+var NumberEditor = ({
+  ariaLabel,
+  onChange,
+  disabled: disabled2,
+  value,
+  readOnly,
+  valueTestId
+}) => {
   return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
     Input,
     {
@@ -22924,11 +23040,19 @@ var NumberEditor = ({ ariaLabel, onChange, disabled: disabled2, value, readOnly
       onChange: (e) => onChange(e.currentTarget.value),
       disabled: disabled2,
       value,
-      readOnly
+      readOnly,
+      "data-testid": valueTestId
     }
   );
 };
-var DateEditor = ({ onChange, ariaLabel, disabled: disabled2, value, readOnly }) => {
+var DateEditor = ({
+  onChange,
+  ariaLabel,
+  disabled: disabled2,
+  value,
+  readOnly,
+  valueTestId
+}) => {
   return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
     Input,
     {
@@ -22938,11 +23062,19 @@ var DateEditor = ({ onChange, ariaLabel, disabled: disabled2, value, readOnly })
       onChange: (e) => onChange(e.currentTarget.value),
       disabled: disabled2,
       value,
-      readOnly
+      readOnly,
+      "data-testid": valueTestId
     }
   );
 };
-var DateRangeEditor = ({ ariaLabel, onChange, disabled: disabled2, value, readOnly }) => {
+var DateRangeEditor = ({
+  ariaLabel,
+  onChange,
+  disabled: disabled2,
+  value,
+  readOnly,
+  valueTestId
+}) => {
   const [minDateValue, setMinDateValue] = (0, import_react142.useState)(value ? value[0] : "");
   const [maxDateValue, setMaxDateValue] = (0, import_react142.useState)(value ? value[1] : "");
   const [error, setError] = (0, import_react142.useState)("");
@@ -22977,33 +23109,35 @@ var DateRangeEditor = ({ ariaLabel, onChange, disabled: disabled2, value, readOn
     setError("");
     onChange([minDateValue, maxDateValue]);
   }, [minDateValue, maxDateValue, setError]);
-  return /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("div", { css: twoColumnGrid, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
-      Input,
-      {
-        label: `${ariaLabel}-min-date`,
-        type: "date",
-        showLabel: false,
-        value: minDateValue,
-        onChange: (e) => setMinDateValue(e.currentTarget.value),
-        "aria-invalid": !error ? false : true,
-        disabled: disabled2,
-        readOnly
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
-      Input,
-      {
-        label: `${ariaLabel}-max-date`,
-        type: "date",
-        showLabel: false,
-        value: maxDateValue,
-        onChange: (e) => setMaxDateValue(e.currentTarget.value),
-        "aria-invalid": !error ? false : true,
-        disabled: disabled2,
-        readOnly
-      }
-    ),
+  return /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)(import_jsx_runtime121.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("div", { css: twoColumnGrid, "data-testid": valueTestId, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+        Input,
+        {
+          label: `${ariaLabel}-min-date`,
+          type: "date",
+          showLabel: false,
+          value: minDateValue,
+          onChange: (e) => setMinDateValue(e.currentTarget.value),
+          "aria-invalid": !error ? false : true,
+          disabled: disabled2,
+          readOnly
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+        Input,
+        {
+          label: `${ariaLabel}-max-date`,
+          type: "date",
+          showLabel: false,
+          value: maxDateValue,
+          onChange: (e) => setMaxDateValue(e.currentTarget.value),
+          "aria-invalid": !error ? false : true,
+          disabled: disabled2,
+          readOnly
+        }
+      )
+    ] }),
     /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(ErrorContainer, { errorMessage: error })
   ] });
 };
@@ -23069,7 +23203,7 @@ var SearchAndFilterOptionsContainer2 = ({
     ) : null
   ] });
 };
-var FilterMenu = ({ id, filterTitle = "Show records", menuControls, children }) => {
+var FilterMenu = ({ id, filterTitle = "Show results", menuControls, children }) => {
   const { filterVisibility, setFilterVisibility } = useSearchAndFilter();
   const innerMenuRef = import_react143.default.useRef(null);
   (0, import_react143.useEffect)(() => {
@@ -23143,8 +23277,8 @@ var FilterItem = ({
     menuIsOpen: false,
     isClearable: false
   } : {};
-  return /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("div", { css: ConditionalFilterRow, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("span", { children: index === 0 ? "where" : "and" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("div", { css: ConditionalFilterRow, "data-testid": "filter-item", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("span", { children: index === 0 ? "Where" : "and" }),
     /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("div", { css: ConditionalInputRow, children: [
       /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
         InputComboBox,
@@ -23155,8 +23289,21 @@ var FilterItem = ({
             var _a2;
             onParamChange((_a2 = e == null ? void 0 : e.value) != null ? _a2 : "");
           },
+          isOptionDisabled: (option) => {
+            var _a2;
+            return (_a2 = option == null ? void 0 : option.disabled) != null ? _a2 : false;
+          },
+          styles: {
+            menu(base) {
+              return {
+                ...base,
+                minWidth: "max-content"
+              };
+            }
+          },
           value: selectedFieldValue,
-          ...readOnlyProps
+          ...readOnlyProps,
+          id: "filter-field"
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
@@ -23170,7 +23317,16 @@ var FilterItem = ({
           },
           isDisabled: !filters[index].field,
           value: selectedOperatorValue,
-          ...readOnlyProps
+          styles: {
+            menu(base) {
+              return {
+                ...base,
+                minWidth: "max-content"
+              };
+            }
+          },
+          ...readOnlyProps,
+          id: "filter-operator"
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
@@ -23182,16 +23338,18 @@ var FilterItem = ({
           onChange: (e) => onValueChange(e != null ? e : ""),
           readOnly,
           isDisabled: !filters[index].operator,
-          value: selectedMetaValue
+          value: selectedMetaValue,
+          valueTestId: "filter-value"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
+      readOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
         "button",
         {
           type: "button",
           onClick: () => handleDeleteFilter(index),
           "aria-label": "delete filter",
           css: IconBtn,
+          "data-testid": "delete-filter",
           children: /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(Icon, { icon: "trash", iconColor: "red", size: "1rem" })
         }
       )
@@ -23204,6 +23362,7 @@ var FilterItems = ({
 }) => {
   const { filterOptions, filters, setFilters, handleAddFilter, handleResetFilters, setFilterVisibility } = useSearchAndFilter();
   const handleUpdateFilter = (index, prop, value) => {
+    var _a, _b, _c, _d, _e;
     const next = [...filters];
     next[index] = { ...next[index], [prop]: value };
     if (prop === "operator") {
@@ -23216,7 +23375,11 @@ var FilterItems = ({
       }
     }
     if (prop === "field") {
-      next[index].operator = "";
+      const firstOperatorInAvailableOperators = (_e = (_d = (_c = (_b = (_a = filterOptions.find((fo) => {
+        var _a2;
+        return (_a2 = fo.options) == null ? void 0 : _a2.find((op) => op.value === value);
+      })) == null ? void 0 : _a.options) == null ? void 0 : _b.find((op) => op.value === next[index].field)) == null ? void 0 : _c.operatorOptions) == null ? void 0 : _d[0].value) != null ? _e : "eq";
+      next[index].operator = firstOperatorInAvailableOperators;
       next[index].value = "";
     }
     setFilters(next);
@@ -23226,10 +23389,19 @@ var FilterItems = ({
     {
       id: "search-and-filter-options",
       menuControls: /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)(import_jsx_runtime123.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("button", { type: "button", css: AddConditionalBtn, onClick: handleAddFilter, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(Icon, { icon: "math-plus", iconColor: "currentColor", size: "1rem" }),
-          addButtonText
-        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)(
+          "button",
+          {
+            type: "button",
+            css: AddConditionalBtn,
+            onClick: handleAddFilter,
+            "data-testid": "add-filter",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(Icon, { icon: "math-plus", iconColor: "currentColor", size: "1rem" }),
+              addButtonText
+            ]
+          }
+        ),
         (filters == null ? void 0 : filters.length) ? /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
           "button",
           {
@@ -23239,6 +23411,7 @@ var FilterItems = ({
               handleResetFilters();
               setFilterVisibility(void 0);
             },
+            "data-testid": "reset-filters",
             children: resetButtonText
           }
         ) : null
@@ -23496,7 +23669,7 @@ var SortItems = () => {
     var _a2;
     return (_a2 = item.options) == null ? void 0 : _a2.find((option) => option.value === sortField);
   })) == null ? void 0 : _a.options) == null ? void 0 : _b.find((nestedOption) => nestedOption.value === sortField);
-  return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(FilterMenu, { id: "search-and-filter-options", filterTitle: "Sort by", children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("div", { css: ConditionalFilterRow, children: /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)("div", { css: ConditionalInputRow, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(FilterMenu, { id: "search-and-filter-options", filterTitle: "Sort by", children: /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)("div", { css: SortFilterInputRow, children: [
     /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
       InputComboBox,
       {
@@ -23505,6 +23678,14 @@ var SortItems = () => {
           const fieldName = e == null ? void 0 : e.value;
           setSortBy(`${fieldName}_${sortDirection}`);
         },
+        styles: {
+          menu(base) {
+            return {
+              ...base,
+              minWidth: "max-content"
+            };
+          }
+        },
         value: currentSelectedOption
       }
     ),
@@ -23521,7 +23702,7 @@ var SortItems = () => {
         value: sortDirection
       }
     )
-  ] }) }) });
+  ] }) });
 };
 
 // src/components/SearchAndFilter/FilterModeView.tsx
@@ -24357,6 +24538,7 @@ var ToastContainer = ({ limit = 4 }) => {
   RICHTEXT_OPERATORS,
   ResolveIcon,
   RichTextToolbarIcon,
+  SYSTEM_DATE_OPERATORS,
   SYSTEM_FIELD_OPERATORS,
   ScrollableList,
   ScrollableListInputItem,