@uniformdev/design-system 19.121.0 → 19.121.1-alpha.3

package/dist/esm/index.js

@@ -1255,7 +1255,7 @@ function IconsProvider({ children }) {
   const [isLoading, setIsLoading] = useState2(true);
   const [iconsMap, setIconsMap] = useState2({});
   const initializeIconsMap = async () => {
-    const { importedIcons } = await import("./importedIcons-GRLD5JXK.js");
+    const { importedIcons } = await import("./importedIcons-XEGXOSVC.js");
     setIconsMap({ ...importedIcons, ...customIcons });
     setIsLoading(false);
   };
@@ -2557,7 +2557,7 @@ import { css as css15 } from "@emotion/react";
 var PageHeaderSectionContainer = css15`
   display: flex;
   justify-content: space-between;
-  margin-bottom: var(--spacing-lg);
+  margin-bottom: var(--spacing-sm);
   flex-direction: column;
   gap: var(--spacing-sm);
 
@@ -13845,7 +13845,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)
           };
@@ -17561,6 +17562,16 @@ var toggleInput2 = css79`
     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);
   }
@@ -20272,6 +20283,60 @@ var TEXTBOX_OPERATORS = [
     editorType: "empty"
   }
 ];
+var USER_OPERATORS = [
+  {
+    label: "is...",
+    value: "eq",
+    editorType: "text"
+  },
+  {
+    label: "contains...",
+    value: "match",
+    editorType: "text"
+  },
+  {
+    label: "is not...",
+    value: "neq",
+    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...",
@@ -20413,6 +20478,12 @@ var FilterButton = css92`
     opacity: var(--opacity-50);
   }
 `;
+var FilterButtonText = css92`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 14ch;
+`;
 var FilterButtonSelected = css92`
   background: var(--gray-100);
   border-color: var(--gray-300);
@@ -20449,7 +20520,6 @@ var AddConditionalBtn = css92`
   gap: var(--spacing-sm);
   transition: color var(--duration-fast) var(--timing-ease-out);
   padding: 0;
-  font-size: var(--fs-sm);
 
   &:hover,
   &:focus {
@@ -20504,7 +20574,7 @@ var SearchAndFilterOptionsContainer = css92`
   padding: var(--spacing-md) var(--spacing-md) var(--spacing-base);
   will-change: height;
   position: relative;
-  z-index: 2;
+  z-index: 1;
 `;
 var SearchAndFilterOptionsInnerContainer = css92`
   display: flex;
@@ -20514,6 +20584,11 @@ var SearchAndFilterOptionsInnerContainer = css92`
 var SearchAndFilterButtonGroup = css92`
   margin-top: var(--spacing-base);
 `;
+var SortFilterInputRow = css92`
+  align-items: center;
+  display: flex;
+  gap: var(--spacing-sm);
+`;
 
 // src/components/SearchAndFilter/FilterButton.tsx
 import { jsx as jsx117, jsxs as jsxs79 } from "@emotion/react/jsx-runtime";
@@ -20537,7 +20612,7 @@ var FilterButton2 = ({
       "data-testid": "filters-button",
       children: [
         /* @__PURE__ */ jsx117(Icon, { icon, iconColor: "currentColor", size: "1rem" }),
-        text,
+        /* @__PURE__ */ jsx117("span", { css: FilterButtonText, children: text }),
         filterCount ? /* @__PURE__ */ jsx117(Counter, { count: filterCount, bgColor: "var(--white)" }) : null
       ]
     }
@@ -20546,7 +20621,7 @@ var FilterButton2 = ({
 
 // src/components/SearchAndFilter/FilterControls.tsx
 import { useEffect as useEffect18, useState as useState17 } from "react";
-import { useDebounce as useDebounce2 } from "react-use";
+import { useDebounce as useDebounce2, useEffectOnce } from "react-use";
 
 // src/components/SearchAndFilter/hooks/useSearchAndFilter.tsx
 import {
@@ -20682,10 +20757,22 @@ var useSearchAndFilter = () => {
 import { Fragment as Fragment19, jsx as jsx119, jsxs as jsxs80 } from "@emotion/react/jsx-runtime";
 var FilterControls = ({
   children,
+  defaultSortByValue,
   hideSearchInput
 }) => {
-  const { setFilterVisibility, filterVisibility, setSearchTerm, validFilterQuery, searchTerm, sortByValue } = useSearchAndFilter();
+  var _a, _b, _c;
+  const {
+    setFilterVisibility,
+    filterVisibility,
+    setSearchTerm,
+    validFilterQuery,
+    searchTerm,
+    sortByValue,
+    filterOptions
+  } = useSearchAndFilter();
+  const [initialSortValue, setInitialSortValue] = useState17(sortByValue);
   const [localeSearchTerm, setLocaleSearchTerm] = useState17("");
+  const [userHasChangedSortByValue, setUserHasChangedSortByValue] = useState17(false);
   useDebounce2(
     () => {
       setSearchTerm(localeSearchTerm);
@@ -20699,14 +20786,25 @@ 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);
   };
-  const sortByValues = sortByValue ? sortByValue == null ? void 0 : sortByValue.split("_") : "Sort";
-  const sortByValueLabel = Array.isArray(sortByValues) ? sortByValue == null ? void 0 : sortByValue.split("_")[0] : "Sort";
-  const sortByIcon = Array.isArray(sortByValues) ? sortByValues[1] === "ASC" ? "arrow-up" : "arrow-down" : "sort-az";
+  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";
+  useEffectOnce(() => {
+    setInitialSortValue(sortByValue);
+  });
+  useEffect18(() => {
+    if (initialSortValue !== sortByValue) {
+      setUserHasChangedSortByValue(true);
+    }
+  }, [initialSortValue, sortByValue]);
   return /* @__PURE__ */ jsxs80(Fragment19, { children: [
     /* @__PURE__ */ jsx119(
       FilterButton2,
@@ -20725,7 +20823,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 !== "",
@@ -20867,7 +20965,7 @@ var StatusBullet = ({
 };
 
 // src/components/SearchAndFilter/FilterEditor.tsx
-import { jsx as jsx121, jsxs as jsxs81 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment20, jsx as jsx121, jsxs as jsxs81 } from "@emotion/react/jsx-runtime";
 var readOnlyAttributes = {
   isSearchable: false,
   menuIsOpen: false,
@@ -20878,10 +20976,11 @@ var FilterMultiChoiceEditor = ({
   options,
   isDisabled,
   readOnly,
+  valueTestId,
   ...props
 }) => {
   const readOnlyProps = readOnly ? readOnlyAttributes : {};
-  return /* @__PURE__ */ jsx121(
+  return /* @__PURE__ */ jsx121("div", { "data-testid": valueTestId, children: /* @__PURE__ */ jsx121(
     InputComboBox,
     {
       ...props,
@@ -20896,19 +20995,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__ */ jsx121(
+  return /* @__PURE__ */ jsx121("div", { "data-testid": valueTestId, children: /* @__PURE__ */ jsx121(
     InputComboBox,
     {
       placeholder: "Type to search...",
@@ -20921,9 +21029,17 @@ var FilterSingleChoiceEditor = ({
       isDisabled,
       value,
       "aria-readonly": readOnly,
+      styles: {
+        menu(base) {
+          return {
+            ...base,
+            minWidth: "max-content"
+          };
+        }
+      },
       ...readOnlyProps
     }
-  );
+  ) });
 };
 var CustomOptions = ({ label, value }) => {
   return /* @__PURE__ */ jsx121(StatusBullet, { status: label, message: value });
@@ -20933,10 +21049,11 @@ var StatusMultiEditor = ({
   value,
   isDisabled,
   readOnly,
-  onChange
+  onChange,
+  valueTestId
 }) => {
   const readOnlyProps = readOnly ? readOnlyAttributes : {};
-  return /* @__PURE__ */ jsx121(
+  return /* @__PURE__ */ jsx121("div", { "data-testid": valueTestId, children: /* @__PURE__ */ jsx121(
     InputComboBox,
     {
       options,
@@ -20948,19 +21065,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__ */ jsx121(
+  return /* @__PURE__ */ jsx121("div", { "data-testid": valueTestId, children: /* @__PURE__ */ jsx121(
     InputComboBox,
     {
       options,
@@ -20971,11 +21097,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 }) => {
   useDebounce3(() => onChange, 500, [value]);
   return /* @__PURE__ */ jsx121(
     Input,
@@ -20985,11 +21119,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] = useState18("");
   const [maxValue, setMaxValue] = useState18("");
   const [error, setError] = useState18("");
@@ -21012,41 +21154,50 @@ var NumberRangeEditor = ({ onChange, disabled: disabled2, ariaLabel, value, read
     setError("");
     onChange([minValue, maxValue]);
   }, [maxValue, minValue, setError]);
-  return /* @__PURE__ */ jsxs81("div", { css: twoColumnGrid, children: [
-    /* @__PURE__ */ jsx121(
-      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__ */ jsx121(
-      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__ */ jsxs81(Fragment20, { children: [
+    /* @__PURE__ */ jsxs81("div", { css: twoColumnGrid, "data-testid": valueTestId, children: [
+      /* @__PURE__ */ jsx121(
+        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__ */ jsx121(
+        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__ */ jsx121(ErrorContainer, { errorMessage: error })
   ] });
 };
-var NumberEditor = ({ ariaLabel, onChange, disabled: disabled2, value, readOnly }) => {
+var NumberEditor = ({
+  ariaLabel,
+  onChange,
+  disabled: disabled2,
+  value,
+  readOnly,
+  valueTestId
+}) => {
   return /* @__PURE__ */ jsx121(
     Input,
     {
@@ -21057,11 +21208,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__ */ jsx121(
     Input,
     {
@@ -21071,11 +21230,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] = useState18(value ? value[0] : "");
   const [maxDateValue, setMaxDateValue] = useState18(value ? value[1] : "");
   const [error, setError] = useState18("");
@@ -21110,33 +21277,35 @@ var DateRangeEditor = ({ ariaLabel, onChange, disabled: disabled2, value, readOn
     setError("");
     onChange([minDateValue, maxDateValue]);
   }, [minDateValue, maxDateValue, setError]);
-  return /* @__PURE__ */ jsxs81("div", { css: twoColumnGrid, children: [
-    /* @__PURE__ */ jsx121(
-      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__ */ jsx121(
-      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__ */ jsxs81(Fragment20, { children: [
+    /* @__PURE__ */ jsxs81("div", { css: twoColumnGrid, "data-testid": valueTestId, children: [
+      /* @__PURE__ */ jsx121(
+        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__ */ jsx121(
+        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__ */ jsx121(ErrorContainer, { errorMessage: error })
   ] });
 };
@@ -21201,7 +21370,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 = React24.useRef(null);
   useEffect20(() => {
@@ -21227,7 +21396,7 @@ var FilterMenu = ({ id, filterTitle = "Show records", menuControls, children })
 };
 
 // src/components/SearchAndFilter/FilterItem.tsx
-import { Fragment as Fragment20, jsx as jsx123, jsxs as jsxs83 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment21, jsx as jsx123, jsxs as jsxs83 } from "@emotion/react/jsx-runtime";
 var FilterItem = ({
   index,
   paramOptions,
@@ -21275,8 +21444,8 @@ var FilterItem = ({
     menuIsOpen: false,
     isClearable: false
   } : {};
-  return /* @__PURE__ */ jsxs83("div", { css: ConditionalFilterRow, children: [
-    /* @__PURE__ */ jsx123("span", { children: index === 0 ? "where" : "and" }),
+  return /* @__PURE__ */ jsxs83("div", { css: ConditionalFilterRow, "data-testid": "filter-item", children: [
+    /* @__PURE__ */ jsx123("span", { children: index === 0 ? "Where" : "and" }),
     /* @__PURE__ */ jsxs83("div", { css: ConditionalInputRow, children: [
       /* @__PURE__ */ jsx123(
         InputComboBox,
@@ -21287,8 +21456,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__ */ jsx123(
@@ -21302,7 +21484,16 @@ var FilterItem = ({
           },
           isDisabled: !filters[index].field,
           value: selectedOperatorValue,
-          ...readOnlyProps
+          styles: {
+            menu(base) {
+              return {
+                ...base,
+                minWidth: "max-content"
+              };
+            }
+          },
+          ...readOnlyProps,
+          id: "filter-operator"
         }
       ),
       /* @__PURE__ */ jsx123(
@@ -21314,16 +21505,18 @@ var FilterItem = ({
           onChange: (e) => onValueChange(e != null ? e : ""),
           readOnly,
           isDisabled: !filters[index].operator,
-          value: selectedMetaValue
+          value: selectedMetaValue,
+          valueTestId: "filter-value"
         }
       ),
-      /* @__PURE__ */ jsx123(
+      readOnly ? null : /* @__PURE__ */ jsx123(
         "button",
         {
           type: "button",
           onClick: () => handleDeleteFilter(index),
           "aria-label": "delete filter",
           css: IconBtn,
+          "data-testid": "delete-filter",
           children: /* @__PURE__ */ jsx123(Icon, { icon: "trash", iconColor: "red", size: "1rem" })
         }
       )
@@ -21336,6 +21529,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") {
@@ -21348,7 +21542,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);
@@ -21357,11 +21555,20 @@ var FilterItems = ({
     FilterMenu,
     {
       id: "search-and-filter-options",
-      menuControls: /* @__PURE__ */ jsxs83(Fragment20, { children: [
-        /* @__PURE__ */ jsxs83("button", { type: "button", css: AddConditionalBtn, onClick: handleAddFilter, children: [
-          /* @__PURE__ */ jsx123(Icon, { icon: "math-plus", iconColor: "currentColor", size: "1rem" }),
-          addButtonText
-        ] }),
+      menuControls: /* @__PURE__ */ jsxs83(Fragment21, { children: [
+        /* @__PURE__ */ jsxs83(
+          "button",
+          {
+            type: "button",
+            css: AddConditionalBtn,
+            onClick: handleAddFilter,
+            "data-testid": "add-filter",
+            children: [
+              /* @__PURE__ */ jsx123(Icon, { icon: "math-plus", iconColor: "currentColor", size: "1rem" }),
+              addButtonText
+            ]
+          }
+        ),
         (filters == null ? void 0 : filters.length) ? /* @__PURE__ */ jsx123(
           "button",
           {
@@ -21371,6 +21578,7 @@ var FilterItems = ({
               handleResetFilters();
               setFilterVisibility(void 0);
             },
+            "data-testid": "reset-filters",
             children: resetButtonText
           }
         ) : null
@@ -21617,7 +21825,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__ */ jsx125(FilterMenu, { id: "search-and-filter-options", filterTitle: "Sort by", children: /* @__PURE__ */ jsx125("div", { css: ConditionalFilterRow, children: /* @__PURE__ */ jsxs85("div", { css: ConditionalInputRow, children: [
+  return /* @__PURE__ */ jsx125(FilterMenu, { id: "search-and-filter-options", filterTitle: "Sort by", children: /* @__PURE__ */ jsxs85("div", { css: SortFilterInputRow, children: [
     /* @__PURE__ */ jsx125(
       InputComboBox,
       {
@@ -21626,6 +21834,14 @@ var SortItems = () => {
           const fieldName = e == null ? void 0 : e.value;
           setSortBy(`${fieldName}_${sortDirection}`);
         },
+        styles: {
+          menu(base) {
+            return {
+              ...base,
+              minWidth: "max-content"
+            };
+          }
+        },
         value: currentSelectedOption
       }
     ),
@@ -21642,7 +21858,7 @@ var SortItems = () => {
         value: sortDirection
       }
     )
-  ] }) }) });
+  ] }) });
 };
 
 // src/components/SearchAndFilter/FilterModeView.tsx
@@ -21657,7 +21873,7 @@ var FilterModeView = () => {
 };
 
 // src/components/SearchAndFilter/SearchAndFilterResultContainer.tsx
-import { Fragment as Fragment21, jsx as jsx127, jsxs as jsxs86 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment22, jsx as jsx127, jsxs as jsxs86 } from "@emotion/react/jsx-runtime";
 var SearchAndFilterResultContainer = ({
   buttonText,
   clearButtonLabel = "clear",
@@ -21691,7 +21907,7 @@ var SearchAndFilterResultContainer = ({
   if (totalResults && totalResults > 0) {
     return null;
   }
-  return /* @__PURE__ */ jsxs86(Fragment21, { children: [
+  return /* @__PURE__ */ jsxs86(Fragment22, { children: [
     /* @__PURE__ */ jsxs86(HorizontalRhythm, { children: [
       /* @__PURE__ */ jsxs86("span", { children: [
         totalResults,
@@ -21744,7 +21960,7 @@ var SearchAndFilter = ({
               css: SearchAndFilterControlsWrapper(
                 viewSwitchControls ? "auto auto 1fr 0.5fr" : "auto auto 1fr"
               ),
-              children: !filterControls ? /* @__PURE__ */ jsx128(FilterControls, { hideSearchInput: !onSearchChange }) : filterControls
+              children: !filterControls ? /* @__PURE__ */ jsx128(FilterControls, { hideSearchInput: !onSearchChange, defaultSortByValue }) : filterControls
             }
           ),
           viewSwitchControls
@@ -21924,14 +22140,14 @@ var SwitchText = css97`
 `;
 
 // src/components/Switch/Switch.tsx
-import { Fragment as Fragment22, jsx as jsx131, jsxs as jsxs88 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment23, jsx as jsx131, jsxs as jsxs88 } from "@emotion/react/jsx-runtime";
 var Switch = React26.forwardRef(
   ({ label, infoText, toggleText, children, ...inputProps }, ref) => {
     let additionalText = infoText;
     if (infoText && toggleText) {
       additionalText = inputProps.checked ? toggleText : infoText;
     }
-    return /* @__PURE__ */ jsxs88(Fragment22, { children: [
+    return /* @__PURE__ */ jsxs88(Fragment23, { children: [
       /* @__PURE__ */ jsxs88("label", { css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0], children: [
         /* @__PURE__ */ jsx131("input", { type: "checkbox", css: SwitchInput, ...inputProps, ref }),
         /* @__PURE__ */ jsx131("span", { css: SwitchInputLabel, children: label })
@@ -22469,6 +22685,7 @@ export {
   RICHTEXT_OPERATORS,
   ResolveIcon,
   RichTextToolbarIcon,
+  SYSTEM_DATE_OPERATORS,
   SYSTEM_FIELD_OPERATORS,
   ScrollableList,
   ScrollableListInputItem,
@@ -22509,6 +22726,7 @@ export {
   ToastContainer,
   Tooltip,
   TwoColumnLayout,
+  USER_OPERATORS,
   UniformBadge,
   UniformLogo,
   UniformLogoLarge,