@uniformdev/design-system 19.133.0 → 19.134.0

package/dist/esm/index.js

@@ -11754,7 +11754,6 @@ var activeMenuItem = css25`
 `;
 var menuItem = (textTheme, forceActive) => css25`
   align-items: center;
-  border: none;
   border-radius: var(--rounded-base);
   background: none;
   color: ${textTheme === "base" ? "var(--typography-base)" : "var(--brand-secondary-5)"};
@@ -11777,6 +11776,11 @@ var menuItem = (textTheme, forceActive) => css25`
   &[data-active-item] {
     ${typeof forceActive === "undefined" ? activeMenuItem : ""}
   }
+
+  // Remove border from input elements, this fixes UNI-4634
+  &:not(input[type='radio'], input[type='checkbox']) {
+    border: none;
+  }
 `;
 var menuItemWithIcon = css25`
   align-items: center;
@@ -12141,6 +12145,7 @@ var ButtonWithMenu = ({
   placement,
   size = "lg",
   menuContainerCssClasses,
+  withoutPortal = false,
   ...buttonProps
 }) => {
   const buttonTheme = {
@@ -12209,6 +12214,7 @@ var ButtonWithMenu = ({
           placement,
           menuTrigger: dropdownButton,
           menuItemsContainerCssClasses: menuContainerCssClasses,
+          portal: withoutPortal,
           children
         }
       ) })
@@ -20483,11 +20489,8 @@ var ConditionalInputRow = css92`
   }
 `;
 var SearchInput = css92`
-  ${input("nowrap")}
-  border-radius: var(--rounded-full);
-  padding: var(--spacing-sm) var(--spacing-base);
-  font-size: var(--fs-sm);
-  padding-right: var(--spacing-2xl);
+  max-height: 40px;
+  min-height: unset;
 `;
 var FilterButton = css92`
   align-items: center;
@@ -20496,8 +20499,10 @@ var FilterButton = css92`
   border-radius: var(--rounded-full);
   color: var(--typography-base);
   display: flex;
+  font-size: var(--fs-sm);
   gap: var(--spacing-sm);
   padding: var(--spacing-sm) var(--spacing-base);
+  max-height: 40px;
   transition: color var(--duration-fast) var(--timing-ease-out),
     background-color var(--duration-fast) var(--timing-ease-out),
     border-color var(--duration-fast) var(--timing-ease-out),
@@ -20642,6 +20647,7 @@ var FilterButton2 = ({
   icon = "filter-add",
   filterCount,
   hasSelectedValue,
+  dataTestId,
   ...props
 }) => {
   return /* @__PURE__ */ jsxs80(
@@ -20654,7 +20660,7 @@ var FilterButton2 = ({
         filterCount ? [FilterButtonWithOptions, FilterButtonSelected] : void 0
       ],
       ...props,
-      "data-testid": "filters-button",
+      "data-testid": dataTestId,
       children: [
         /* @__PURE__ */ jsx118(Icon, { icon, iconColor: "currentColor", size: "1rem" }),
         /* @__PURE__ */ jsx118("span", { css: FilterButtonText, children: text }),
@@ -20712,6 +20718,7 @@ var SearchAndFilterProvider = ({
   onSearchChange,
   onChange,
   onSortChange,
+  resetFilterValues = [],
   totalResults,
   children
 }) => {
@@ -20741,8 +20748,8 @@ var SearchAndFilterProvider = ({
     onChange([...filters, { field: "", operator: "", value: "" }]);
   }, [filters, onChange]);
   const handleResetFilters = useCallback10(() => {
-    onChange([]);
-  }, [onChange]);
+    onChange(resetFilterValues);
+  }, [onChange, resetFilterValues]);
   const handleDeleteFilter = useCallback10(
     (index) => {
       const remainingFilters = filters.filter((_, i) => i !== index);
@@ -20859,7 +20866,8 @@ var FilterControls = ({
         "aria-haspopup": "true",
         "aria-expanded": filterVisibility === "filters",
         filterCount: validFilterQuery == null ? void 0 : validFilterQuery.length,
-        onClick: () => handleFilterToggle("filters")
+        onClick: () => handleFilterToggle("filters"),
+        dataTestId: "filters-button"
       }
     ),
     /* @__PURE__ */ jsx120(
@@ -20873,7 +20881,7 @@ var FilterControls = ({
         "aria-expanded": filterVisibility === "sort",
         hasSelectedValue: sortByValue !== "",
         onClick: () => handleFilterToggle("sort"),
-        "data-testid": "sort-by-dropdown"
+        dataTestId: "sort-by-button"
       }
     ),
     hideSearchInput ? null : /* @__PURE__ */ jsx120(
@@ -20883,7 +20891,8 @@ var FilterControls = ({
         onSearchTextChanged: (e) => setLocaleSearchTerm(e),
         value: localeSearchTerm,
         compact: true,
-        rounded: true
+        rounded: true,
+        css: SearchInput
       }
     ),
     children
@@ -21401,7 +21410,7 @@ var SearchAndFilterOptionsContainer2 = ({
   buttonRow,
   children
 }) => {
-  return /* @__PURE__ */ jsxs83("div", { css: SearchAndFilterOptionsContainer, "data-testid": "search-and-filter-options", children: [
+  return /* @__PURE__ */ jsxs83("div", { css: SearchAndFilterOptionsContainer, children: [
     /* @__PURE__ */ jsx123("div", { css: SearchAndFilterOptionsInnerContainer, children }),
     buttonRow ? /* @__PURE__ */ jsx123(
       HorizontalRhythm,
@@ -21415,7 +21424,13 @@ var SearchAndFilterOptionsContainer2 = ({
     ) : null
   ] });
 };
-var FilterMenu = ({ id, filterTitle = "Show results", menuControls, children }) => {
+var FilterMenu = ({
+  id,
+  filterTitle = "Show results",
+  menuControls,
+  children,
+  dataTestId
+}) => {
   const { filterVisibility, setFilterVisibility } = useSearchAndFilter();
   const innerMenuRef = React24.useRef(null);
   useEffect20(() => {
@@ -21424,7 +21439,7 @@ var FilterMenu = ({ id, filterTitle = "Show results", menuControls, children })
       (_a = innerMenuRef.current) == null ? void 0 : _a.focus();
     }
   }, [filterVisibility]);
-  return /* @__PURE__ */ jsx123(VerticalRhythm, { gap: "sm", "aria-haspopup": "true", id, children: filterVisibility ? /* @__PURE__ */ jsxs83(SearchAndFilterOptionsContainer2, { buttonRow: menuControls, children: [
+  return /* @__PURE__ */ jsx123(VerticalRhythm, { gap: "sm", "aria-haspopup": "true", id, "data-testid": dataTestId, children: filterVisibility ? /* @__PURE__ */ jsxs83(SearchAndFilterOptionsContainer2, { buttonRow: menuControls, children: [
     /* @__PURE__ */ jsx123("span", { css: Title, ref: innerMenuRef, tabIndex: 0, children: filterTitle }),
     /* @__PURE__ */ jsx123(
       "button",
@@ -21433,6 +21448,7 @@ var FilterMenu = ({ id, filterTitle = "Show results", menuControls, children })
         "aria-label": "close filters",
         css: [CloseBtn],
         onClick: () => setFilterVisibility(void 0),
+        "data-testid": "close-filters",
         children: /* @__PURE__ */ jsx123(Icon, { icon: "close", iconColor: "currentColor", size: "1.1rem" })
       }
     ),
@@ -21578,7 +21594,12 @@ var FilterItems = ({
     const next = [...filters];
     next[index] = { ...next[index], [prop]: value };
     if (prop === "operator") {
-      next[index].value = "";
+      if (["eq", "neq", "lt", "gt"].includes(value) && Array.isArray(next[index].value)) {
+        next[index].value = next[index].value[0];
+      }
+      if (["between"].includes(value) && Array.isArray(next[index].value) === false) {
+        next[index].value = [next[index].value, ""];
+      }
       if (value === "def" || value === "true") {
         next[index].value = "true";
       }
@@ -21600,6 +21621,7 @@ var FilterItems = ({
     FilterMenu,
     {
       id: "search-and-filter-options",
+      dataTestId: "search-and-filter-options",
       menuControls: /* @__PURE__ */ jsxs84(Fragment21, { children: [
         /* @__PURE__ */ jsxs84(
           "button",
@@ -21870,7 +21892,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__ */ jsx126(FilterMenu, { id: "search-and-filter-options", filterTitle: "Sort by", children: /* @__PURE__ */ jsxs86("div", { css: SortFilterInputRow, children: [
+  return /* @__PURE__ */ jsx126(FilterMenu, { id: "search-and-filter-options", filterTitle: "Sort by", dataTestId: "sorting-options", children: /* @__PURE__ */ jsxs86("div", { css: SortFilterInputRow, children: [
     /* @__PURE__ */ jsx126(
       InputComboBox,
       {
@@ -21887,7 +21909,8 @@ var SortItems = () => {
             };
           }
         },
-        value: currentSelectedOption
+        value: currentSelectedOption,
+        id: "sort-by-field"
       }
     ),
     /* @__PURE__ */ jsx126(
@@ -21900,7 +21923,8 @@ var SortItems = () => {
           { label: "Descending", value: `DESC` }
         ],
         onChange: (e) => setSortBy(`${sortField}_${e}`),
-        value: sortDirection
+        value: sortDirection,
+        "data-testid": "ordering-options"
       }
     )
   ] }) });
@@ -21983,7 +22007,8 @@ var SearchAndFilter = ({
   onChange,
   onSearchChange,
   onSortChange,
-  totalResults
+  totalResults,
+  resetFilterValues = []
 }) => {
   return /* @__PURE__ */ jsx129(
     SearchAndFilterProvider,
@@ -21997,6 +22022,7 @@ var SearchAndFilter = ({
       onSearchChange,
       onSortChange,
       totalResults,
+      resetFilterValues,
       children: /* @__PURE__ */ jsxs88(VerticalRhythm, { css: SearchAndFilterContainer, "data-testid": "search-and-filter", children: [
         /* @__PURE__ */ jsxs88("div", { css: SearchAndFilterOutterControlWrapper(viewSwitchControls ? "1fr auto" : "1fr"), children: [
           /* @__PURE__ */ jsx129(

package/dist/index.d.mts

@@ -21103,6 +21103,10 @@ interface ActionButtonsProps {
     size?: ButtonSizeProps;
     /** sets additional Menu component styles */
     menuContainerCssClasses?: SerializedStyles;
+    /** sets whether to use a React portal rendering or not.
+     * @default false
+     */
+    withoutPortal?: boolean;
 }
 /** ButtonWithMenuProps combines the ActionButtonsProps with React HTMLButtonElement attributes */
 type ButtonWithMenuProps = ActionButtonsProps & React$1.ButtonHTMLAttributes<HTMLButtonElement>;
@@ -21128,7 +21132,7 @@ type ButtonWithMenuProps = ActionButtonsProps & React$1.ButtonHTMLAttributes<HTM
     </MenuItem>
 </ButtonWithMenu>
  */
-declare const ButtonWithMenu: ({ onButtonClick, buttonType, buttonText, icon, disabled, children, placement, size, menuContainerCssClasses, ...buttonProps }: ButtonWithMenuProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const ButtonWithMenu: ({ onButtonClick, buttonType, buttonText, icon, disabled, children, placement, size, menuContainerCssClasses, withoutPortal, ...buttonProps }: ButtonWithMenuProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 /**
  * A string in the ISO 8601 date format: YYYY-MM-DD
@@ -23086,12 +23090,14 @@ type FilterButtonProps = {
     filterCount?: number;
     /** sets the selected styles on the button */
     hasSelectedValue?: boolean;
+    /** sets the data-testid attribute on the button */
+    dataTestId?: string;
 } & HTMLAttributes<HTMLButtonElement>;
 /**
  * @deprecated beta - A filter button component used to display filter menu options
  * @example <FilterButton text="Filters" filterCount={3} />
  */
-declare const FilterButton: ({ text, icon, filterCount, hasSelectedValue, ...props }: FilterButtonProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const FilterButton: ({ text, icon, filterCount, hasSelectedValue, dataTestId, ...props }: FilterButtonProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 /**
  * @deprecated beta - Default filter controls for search and filter
@@ -23153,12 +23159,14 @@ type FiltersProps = {
     menuControls?: React__default.ReactNode;
     /** The children of the filter menu */
     children: React__default.ReactNode;
+    /** Sets the data-test-id attribute for the filter menu */
+    dataTestId?: string;
 };
 /**
  * @deprecated beta - A filter menu component used to display filter options
  * @example <FilterMenu id="search-and-filter-options">Children</FilterMenu>
  * */
-declare const FilterMenu: ({ id, filterTitle, menuControls, children }: FiltersProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const FilterMenu: ({ id, filterTitle, menuControls, children, dataTestId, }: FiltersProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 type SearchAndFilterProviderProps = {
     /** sets the filter values */
@@ -23171,6 +23179,10 @@ type SearchAndFilterProviderProps = {
     onChange: (filters: Filter[]) => void;
     /** function to trigger sort change events */
     onSortChange: (sort: string) => void;
+    /** sets the reset filter values
+     * @default []
+     */
+    resetFilterValues?: Filter[];
     /** sets the list of filter options for each filter row */
     filterOptions: FilterOption[];
     /** sets the list of sort options */
@@ -23201,7 +23213,7 @@ type SearchAndFilterContextProps = {
     /** function that adds a blank set of filter options */
     handleAddFilter: () => void;
     /** function to reset all filter values */
-    handleResetFilters: () => void;
+    handleResetFilters: (filters?: Filter[]) => void;
     /** function that deletes a row and it's values visually and from state */
     handleDeleteFilter: (index: number) => void;
     /** sets the initial list of filter options */
@@ -23220,7 +23232,7 @@ declare const SearchAndFilterContext: React$1.Context<SearchAndFilterContextProp
  * @deprecated beta - Search and filter provider
  * @example <SearchAndFilterProvider filters={filters} filterOptions={filterOptions} onSearchChange={onSearchChange} onChange={onChange}>Children</SearchAndFilterProvider>
  * */
-declare const SearchAndFilterProvider: ({ filters, filterOptions, sortOptions, defaultSortByValue, filterMode, onSearchChange, onChange, onSortChange, totalResults, children, }: SearchAndFilterProviderProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const SearchAndFilterProvider: ({ filters, filterOptions, sortOptions, defaultSortByValue, filterMode, onSearchChange, onChange, onSortChange, resetFilterValues, totalResults, children, }: SearchAndFilterProviderProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 /** @deprecated beta - Search and filter hook
  * @example const { searchTerm, setSearchTerm, filterVisibility, setFilterVisibility, filters, setFilters, handleAddFilter, handleResetFilters, handleDeleteFilter, filterOptions, validFilterQuery } = useSearchAndFilter();
  */
@@ -23242,7 +23254,7 @@ declare const useSearchAndFilter: () => {
     /** function that adds a blank set of filter options */
     handleAddFilter: () => void;
     /** function to reset all filter values */
-    handleResetFilters: () => void;
+    handleResetFilters: (filters?: Filter[]) => void;
     /** function that deletes a row and it's values visually and from state */
     handleDeleteFilter: (index: number) => void;
     /** sets the initial list of filter options */
@@ -23274,6 +23286,8 @@ type SearchAndFilterProps = Omit<SearchAndFilterProviderProps, 'children'> & {
      * @default '<SearchAndFilterResultContainer />'
      */
     resultsContainerView?: React$1.ReactNode;
+    /** sets the reset filter values */
+    resetFilterValues?: Filter[];
     /** The children of the search and filter component */
     children?: React$1.ReactNode;
 };
@@ -23281,7 +23295,7 @@ type SearchAndFilterProps = Omit<SearchAndFilterProviderProps, 'children'> & {
  * @deprecated beta - Search and filter component
  * @example <SearchAndFilter filters={filters} filterOptions={filterOptions} onChange={onChange} onSearchChange={onSearchChange} onSearchReset={onSearchReset} totalResults={totalResults} />
  * */
-declare const SearchAndFilter: ({ filters, filterOptions, filterMode, sortOptions, defaultSortByValue, filterControls, viewSwitchControls, resultsContainerView, children, onChange, onSearchChange, onSortChange, totalResults, }: SearchAndFilterProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const SearchAndFilter: ({ filters, filterOptions, filterMode, sortOptions, defaultSortByValue, filterControls, viewSwitchControls, resultsContainerView, children, onChange, onSearchChange, onSortChange, totalResults, resetFilterValues, }: SearchAndFilterProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 type SearchAndFilterResultContainerProps = {
     /** The label for the clear button

package/dist/index.d.ts

@@ -21103,6 +21103,10 @@ interface ActionButtonsProps {
     size?: ButtonSizeProps;
     /** sets additional Menu component styles */
     menuContainerCssClasses?: SerializedStyles;
+    /** sets whether to use a React portal rendering or not.
+     * @default false
+     */
+    withoutPortal?: boolean;
 }
 /** ButtonWithMenuProps combines the ActionButtonsProps with React HTMLButtonElement attributes */
 type ButtonWithMenuProps = ActionButtonsProps & React$1.ButtonHTMLAttributes<HTMLButtonElement>;
@@ -21128,7 +21132,7 @@ type ButtonWithMenuProps = ActionButtonsProps & React$1.ButtonHTMLAttributes<HTM
     </MenuItem>
 </ButtonWithMenu>
  */
-declare const ButtonWithMenu: ({ onButtonClick, buttonType, buttonText, icon, disabled, children, placement, size, menuContainerCssClasses, ...buttonProps }: ButtonWithMenuProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const ButtonWithMenu: ({ onButtonClick, buttonType, buttonText, icon, disabled, children, placement, size, menuContainerCssClasses, withoutPortal, ...buttonProps }: ButtonWithMenuProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 /**
  * A string in the ISO 8601 date format: YYYY-MM-DD
@@ -23086,12 +23090,14 @@ type FilterButtonProps = {
     filterCount?: number;
     /** sets the selected styles on the button */
     hasSelectedValue?: boolean;
+    /** sets the data-testid attribute on the button */
+    dataTestId?: string;
 } & HTMLAttributes<HTMLButtonElement>;
 /**
  * @deprecated beta - A filter button component used to display filter menu options
  * @example <FilterButton text="Filters" filterCount={3} />
  */
-declare const FilterButton: ({ text, icon, filterCount, hasSelectedValue, ...props }: FilterButtonProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const FilterButton: ({ text, icon, filterCount, hasSelectedValue, dataTestId, ...props }: FilterButtonProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 /**
  * @deprecated beta - Default filter controls for search and filter
@@ -23153,12 +23159,14 @@ type FiltersProps = {
     menuControls?: React__default.ReactNode;
     /** The children of the filter menu */
     children: React__default.ReactNode;
+    /** Sets the data-test-id attribute for the filter menu */
+    dataTestId?: string;
 };
 /**
  * @deprecated beta - A filter menu component used to display filter options
  * @example <FilterMenu id="search-and-filter-options">Children</FilterMenu>
  * */
-declare const FilterMenu: ({ id, filterTitle, menuControls, children }: FiltersProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const FilterMenu: ({ id, filterTitle, menuControls, children, dataTestId, }: FiltersProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 type SearchAndFilterProviderProps = {
     /** sets the filter values */
@@ -23171,6 +23179,10 @@ type SearchAndFilterProviderProps = {
     onChange: (filters: Filter[]) => void;
     /** function to trigger sort change events */
     onSortChange: (sort: string) => void;
+    /** sets the reset filter values
+     * @default []
+     */
+    resetFilterValues?: Filter[];
     /** sets the list of filter options for each filter row */
     filterOptions: FilterOption[];
     /** sets the list of sort options */
@@ -23201,7 +23213,7 @@ type SearchAndFilterContextProps = {
     /** function that adds a blank set of filter options */
     handleAddFilter: () => void;
     /** function to reset all filter values */
-    handleResetFilters: () => void;
+    handleResetFilters: (filters?: Filter[]) => void;
     /** function that deletes a row and it's values visually and from state */
     handleDeleteFilter: (index: number) => void;
     /** sets the initial list of filter options */
@@ -23220,7 +23232,7 @@ declare const SearchAndFilterContext: React$1.Context<SearchAndFilterContextProp
  * @deprecated beta - Search and filter provider
  * @example <SearchAndFilterProvider filters={filters} filterOptions={filterOptions} onSearchChange={onSearchChange} onChange={onChange}>Children</SearchAndFilterProvider>
  * */
-declare const SearchAndFilterProvider: ({ filters, filterOptions, sortOptions, defaultSortByValue, filterMode, onSearchChange, onChange, onSortChange, totalResults, children, }: SearchAndFilterProviderProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const SearchAndFilterProvider: ({ filters, filterOptions, sortOptions, defaultSortByValue, filterMode, onSearchChange, onChange, onSortChange, resetFilterValues, totalResults, children, }: SearchAndFilterProviderProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 /** @deprecated beta - Search and filter hook
  * @example const { searchTerm, setSearchTerm, filterVisibility, setFilterVisibility, filters, setFilters, handleAddFilter, handleResetFilters, handleDeleteFilter, filterOptions, validFilterQuery } = useSearchAndFilter();
  */
@@ -23242,7 +23254,7 @@ declare const useSearchAndFilter: () => {
     /** function that adds a blank set of filter options */
     handleAddFilter: () => void;
     /** function to reset all filter values */
-    handleResetFilters: () => void;
+    handleResetFilters: (filters?: Filter[]) => void;
     /** function that deletes a row and it's values visually and from state */
     handleDeleteFilter: (index: number) => void;
     /** sets the initial list of filter options */
@@ -23274,6 +23286,8 @@ type SearchAndFilterProps = Omit<SearchAndFilterProviderProps, 'children'> & {
      * @default '<SearchAndFilterResultContainer />'
      */
     resultsContainerView?: React$1.ReactNode;
+    /** sets the reset filter values */
+    resetFilterValues?: Filter[];
     /** The children of the search and filter component */
     children?: React$1.ReactNode;
 };
@@ -23281,7 +23295,7 @@ type SearchAndFilterProps = Omit<SearchAndFilterProviderProps, 'children'> & {
  * @deprecated beta - Search and filter component
  * @example <SearchAndFilter filters={filters} filterOptions={filterOptions} onChange={onChange} onSearchChange={onSearchChange} onSearchReset={onSearchReset} totalResults={totalResults} />
  * */
-declare const SearchAndFilter: ({ filters, filterOptions, filterMode, sortOptions, defaultSortByValue, filterControls, viewSwitchControls, resultsContainerView, children, onChange, onSearchChange, onSortChange, totalResults, }: SearchAndFilterProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const SearchAndFilter: ({ filters, filterOptions, filterMode, sortOptions, defaultSortByValue, filterControls, viewSwitchControls, resultsContainerView, children, onChange, onSearchChange, onSortChange, totalResults, resetFilterValues, }: SearchAndFilterProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 type SearchAndFilterResultContainerProps = {
     /** The label for the clear button

package/dist/index.js

@@ -13430,7 +13430,6 @@ var activeMenuItem = import_react33.css`
 `;
 var menuItem = (textTheme, forceActive) => import_react33.css`
   align-items: center;
-  border: none;
   border-radius: var(--rounded-base);
   background: none;
   color: ${textTheme === "base" ? "var(--typography-base)" : "var(--brand-secondary-5)"};
@@ -13453,6 +13452,11 @@ var menuItem = (textTheme, forceActive) => import_react33.css`
   &[data-active-item] {
     ${typeof forceActive === "undefined" ? activeMenuItem : ""}
   }
+
+  // Remove border from input elements, this fixes UNI-4634
+  &:not(input[type='radio'], input[type='checkbox']) {
+    border: none;
+  }
 `;
 var menuItemWithIcon = import_react33.css`
   align-items: center;
@@ -13820,6 +13824,7 @@ var ButtonWithMenu = ({
   placement,
   size = "lg",
   menuContainerCssClasses,
+  withoutPortal = false,
   ...buttonProps
 }) => {
   const buttonTheme = {
@@ -13888,6 +13893,7 @@ var ButtonWithMenu = ({
           placement,
           menuTrigger: dropdownButton,
           menuItemsContainerCssClasses: menuContainerCssClasses,
+          portal: withoutPortal,
           children
         }
       ) })
@@ -22320,11 +22326,8 @@ var ConditionalInputRow = import_react139.css`
   }
 `;
 var SearchInput = import_react139.css`
-  ${input("nowrap")}
-  border-radius: var(--rounded-full);
-  padding: var(--spacing-sm) var(--spacing-base);
-  font-size: var(--fs-sm);
-  padding-right: var(--spacing-2xl);
+  max-height: 40px;
+  min-height: unset;
 `;
 var FilterButton = import_react139.css`
   align-items: center;
@@ -22333,8 +22336,10 @@ var FilterButton = import_react139.css`
   border-radius: var(--rounded-full);
   color: var(--typography-base);
   display: flex;
+  font-size: var(--fs-sm);
   gap: var(--spacing-sm);
   padding: var(--spacing-sm) var(--spacing-base);
+  max-height: 40px;
   transition: color var(--duration-fast) var(--timing-ease-out),
     background-color var(--duration-fast) var(--timing-ease-out),
     border-color var(--duration-fast) var(--timing-ease-out),
@@ -22479,6 +22484,7 @@ var FilterButton2 = ({
   icon = "filter-add",
   filterCount,
   hasSelectedValue,
+  dataTestId,
   ...props
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)(
@@ -22491,7 +22497,7 @@ var FilterButton2 = ({
         filterCount ? [FilterButtonWithOptions, FilterButtonSelected] : void 0
       ],
       ...props,
-      "data-testid": "filters-button",
+      "data-testid": dataTestId,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(Icon, { icon, iconColor: "currentColor", size: "1rem" }),
         /* @__PURE__ */ (0, import_jsx_runtime118.jsx)("span", { css: FilterButtonText, children: text }),
@@ -22543,6 +22549,7 @@ var SearchAndFilterProvider = ({
   onSearchChange,
   onChange,
   onSortChange,
+  resetFilterValues = [],
   totalResults,
   children
 }) => {
@@ -22572,8 +22579,8 @@ var SearchAndFilterProvider = ({
     onChange([...filters, { field: "", operator: "", value: "" }]);
   }, [filters, onChange]);
   const handleResetFilters = (0, import_react140.useCallback)(() => {
-    onChange([]);
-  }, [onChange]);
+    onChange(resetFilterValues);
+  }, [onChange, resetFilterValues]);
   const handleDeleteFilter = (0, import_react140.useCallback)(
     (index) => {
       const remainingFilters = filters.filter((_, i) => i !== index);
@@ -22690,7 +22697,8 @@ var FilterControls = ({
         "aria-haspopup": "true",
         "aria-expanded": filterVisibility === "filters",
         filterCount: validFilterQuery == null ? void 0 : validFilterQuery.length,
-        onClick: () => handleFilterToggle("filters")
+        onClick: () => handleFilterToggle("filters"),
+        dataTestId: "filters-button"
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
@@ -22704,7 +22712,7 @@ var FilterControls = ({
         "aria-expanded": filterVisibility === "sort",
         hasSelectedValue: sortByValue !== "",
         onClick: () => handleFilterToggle("sort"),
-        "data-testid": "sort-by-dropdown"
+        dataTestId: "sort-by-button"
       }
     ),
     hideSearchInput ? null : /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
@@ -22714,7 +22722,8 @@ var FilterControls = ({
         onSearchTextChanged: (e) => setLocaleSearchTerm(e),
         value: localeSearchTerm,
         compact: true,
-        rounded: true
+        rounded: true,
+        css: SearchInput
       }
     ),
     children
@@ -23239,7 +23248,7 @@ var SearchAndFilterOptionsContainer2 = ({
   buttonRow,
   children
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("div", { css: SearchAndFilterOptionsContainer, "data-testid": "search-and-filter-options", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("div", { css: SearchAndFilterOptionsContainer, children: [
     /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("div", { css: SearchAndFilterOptionsInnerContainer, children }),
     buttonRow ? /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
       HorizontalRhythm,
@@ -23253,7 +23262,13 @@ var SearchAndFilterOptionsContainer2 = ({
     ) : null
   ] });
 };
-var FilterMenu = ({ id, filterTitle = "Show results", menuControls, children }) => {
+var FilterMenu = ({
+  id,
+  filterTitle = "Show results",
+  menuControls,
+  children,
+  dataTestId
+}) => {
   const { filterVisibility, setFilterVisibility } = useSearchAndFilter();
   const innerMenuRef = import_react144.default.useRef(null);
   (0, import_react144.useEffect)(() => {
@@ -23262,7 +23277,7 @@ var FilterMenu = ({ id, filterTitle = "Show results", menuControls, children })
       (_a = innerMenuRef.current) == null ? void 0 : _a.focus();
     }
   }, [filterVisibility]);
-  return /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(VerticalRhythm, { gap: "sm", "aria-haspopup": "true", id, children: filterVisibility ? /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)(SearchAndFilterOptionsContainer2, { buttonRow: menuControls, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(VerticalRhythm, { gap: "sm", "aria-haspopup": "true", id, "data-testid": dataTestId, children: filterVisibility ? /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)(SearchAndFilterOptionsContainer2, { buttonRow: menuControls, children: [
     /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("span", { css: Title, ref: innerMenuRef, tabIndex: 0, children: filterTitle }),
     /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
       "button",
@@ -23271,6 +23286,7 @@ var FilterMenu = ({ id, filterTitle = "Show results", menuControls, children })
         "aria-label": "close filters",
         css: [CloseBtn],
         onClick: () => setFilterVisibility(void 0),
+        "data-testid": "close-filters",
         children: /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(Icon, { icon: "close", iconColor: "currentColor", size: "1.1rem" })
       }
     ),
@@ -23416,7 +23432,12 @@ var FilterItems = ({
     const next = [...filters];
     next[index] = { ...next[index], [prop]: value };
     if (prop === "operator") {
-      next[index].value = "";
+      if (["eq", "neq", "lt", "gt"].includes(value) && Array.isArray(next[index].value)) {
+        next[index].value = next[index].value[0];
+      }
+      if (["between"].includes(value) && Array.isArray(next[index].value) === false) {
+        next[index].value = [next[index].value, ""];
+      }
       if (value === "def" || value === "true") {
         next[index].value = "true";
       }
@@ -23438,6 +23459,7 @@ var FilterItems = ({
     FilterMenu,
     {
       id: "search-and-filter-options",
+      dataTestId: "search-and-filter-options",
       menuControls: /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(import_jsx_runtime124.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(
           "button",
@@ -23719,7 +23741,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_runtime126.jsx)(FilterMenu, { id: "search-and-filter-options", filterTitle: "Sort by", children: /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)("div", { css: SortFilterInputRow, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(FilterMenu, { id: "search-and-filter-options", filterTitle: "Sort by", dataTestId: "sorting-options", children: /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)("div", { css: SortFilterInputRow, children: [
     /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
       InputComboBox,
       {
@@ -23736,7 +23758,8 @@ var SortItems = () => {
             };
           }
         },
-        value: currentSelectedOption
+        value: currentSelectedOption,
+        id: "sort-by-field"
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
@@ -23749,7 +23772,8 @@ var SortItems = () => {
           { label: "Descending", value: `DESC` }
         ],
         onChange: (e) => setSortBy(`${sortField}_${e}`),
-        value: sortDirection
+        value: sortDirection,
+        "data-testid": "ordering-options"
       }
     )
   ] }) });
@@ -23833,7 +23857,8 @@ var SearchAndFilter = ({
   onChange,
   onSearchChange,
   onSortChange,
-  totalResults
+  totalResults,
+  resetFilterValues = []
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
     SearchAndFilterProvider,
@@ -23847,6 +23872,7 @@ var SearchAndFilter = ({
       onSearchChange,
       onSortChange,
       totalResults,
+      resetFilterValues,
       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)(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/design-system",
-  "version": "19.133.0",
+  "version": "19.134.0",
   "description": "Uniform design system components",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -23,8 +23,8 @@
     "@storybook/react": "6.5.16",
     "@types/react": "18.2.40",
     "@types/react-dom": "18.2.17",
-    "@uniformdev/canvas": "^19.133.0",
-    "@uniformdev/richtext": "^19.133.0",
+    "@uniformdev/canvas": "^19.134.0",
+    "@uniformdev/richtext": "^19.134.0",
     "autoprefixer": "10.4.16",
     "hygen": "6.2.11",
     "postcss": "8.4.32",
@@ -71,5 +71,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "405a628b0f592ca13bf65006ef5c92261468c144"
+  "gitHead": "4d3856ce53d66b4e69fd693dadc98292cfbc37d1"
 }