@uniformdev/design-system 19.133.0 → 19.134.3-alpha.10

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;
@@ -11848,7 +11852,7 @@ function isMenuSeparator(child) {
 
 // src/components/Menu/Menu.styles.ts
 import { css as css26 } from "@emotion/react";
-var menuStyles = css26`
+var menuStyles = (maxMenuHeight) => css26`
   box-shadow: var(--shadow-base);
   border-radius: var(--rounded-base);
   background: var(--gray-50);
@@ -11858,10 +11862,21 @@ var menuStyles = css26`
   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
@@ -11877,6 +11892,7 @@ var Menu = React8.forwardRef(function Menu2({
   disableAutoSeparatorManagement,
   menuItemsContainerCssClasses,
   testId,
+  maxMenuHeight,
   ...props
 }, ref) {
   const placementOverride = legacyPlacements.includes(placement) ? void 0 : placement;
@@ -11891,7 +11907,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 : "",
@@ -12141,6 +12157,8 @@ var ButtonWithMenu = ({
   placement,
   size = "lg",
   menuContainerCssClasses,
+  withoutPortal = false,
+  maxMenuHeight,
   ...buttonProps
 }) => {
   const buttonTheme = {
@@ -12199,6 +12217,7 @@ var ButtonWithMenu = ({
             placement,
             menuTrigger: clickableButton,
             menuItemsContainerCssClasses: menuContainerCssClasses,
+            maxMenuHeight,
             children
           }
         )
@@ -12209,6 +12228,8 @@ var ButtonWithMenu = ({
           placement,
           menuTrigger: dropdownButton,
           menuItemsContainerCssClasses: menuContainerCssClasses,
+          portal: withoutPortal,
+          maxMenuHeight,
           children
         }
       ) })
@@ -20457,6 +20478,18 @@ var ConditionalFilterRow = css92`
 
   ${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 {
@@ -20464,6 +20497,12 @@ var ConditionalFilterRow = css92`
     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);
   }
@@ -20471,23 +20510,29 @@ var ConditionalFilterRow = css92`
 var ConditionalInputRow = css92`
   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 = 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 +20541,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 +20689,7 @@ var FilterButton2 = ({
   icon = "filter-add",
   filterCount,
   hasSelectedValue,
+  dataTestId,
   ...props
 }) => {
   return /* @__PURE__ */ jsxs80(
@@ -20654,7 +20702,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 +20760,7 @@ var SearchAndFilterProvider = ({
   onSearchChange,
   onChange,
   onSortChange,
+  resetFilterValues = [],
   totalResults,
   children
 }) => {
@@ -20741,8 +20790,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 +20908,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 +20923,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 +20933,8 @@ var FilterControls = ({
         onSearchTextChanged: (e) => setLocaleSearchTerm(e),
         value: localeSearchTerm,
         compact: true,
-        rounded: true
+        rounded: true,
+        css: SearchInput
       }
     ),
     children
@@ -21401,7 +21452,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 +21466,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 +21481,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 +21490,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 +21636,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 +21663,7 @@ var FilterItems = ({
     FilterMenu,
     {
       id: "search-and-filter-options",
+      dataTestId: "search-and-filter-options",
       menuControls: /* @__PURE__ */ jsxs84(Fragment21, { children: [
         /* @__PURE__ */ jsxs84(
           "button",
@@ -21870,7 +21934,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 +21951,8 @@ var SortItems = () => {
             };
           }
         },
-        value: currentSelectedOption
+        value: currentSelectedOption,
+        id: "sort-by-field"
       }
     ),
     /* @__PURE__ */ jsx126(
@@ -21900,7 +21965,8 @@ var SortItems = () => {
           { label: "Descending", value: `DESC` }
         ],
         onChange: (e) => setSortBy(`${sortField}_${e}`),
-        value: sortDirection
+        value: sortDirection,
+        "data-testid": "ordering-options"
       }
     )
   ] }) });
@@ -21983,7 +22049,8 @@ var SearchAndFilter = ({
   onChange,
   onSearchChange,
   onSortChange,
-  totalResults
+  totalResults,
+  resetFilterValues = []
 }) => {
   return /* @__PURE__ */ jsx129(
     SearchAndFilterProvider,
@@ -21997,6 +22064,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,15 @@ 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;
+    /** (optional) sets the maximum height of the menu
+     * setting a max menu height value will make the menu scrollable if the content exceeds the height
+     * this is not compatible with nested menus that expand to the left or right of the menu
+     */
+    maxMenuHeight?: string;
 }
 /** ButtonWithMenuProps combines the ActionButtonsProps with React HTMLButtonElement attributes */
 type ButtonWithMenuProps = ActionButtonsProps & React$1.ButtonHTMLAttributes<HTMLButtonElement>;
@@ -21128,7 +21137,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, maxMenuHeight, ...buttonProps }: ButtonWithMenuProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 /**
  * A string in the ISO 8601 date format: YYYY-MM-DD
@@ -22373,6 +22382,11 @@ interface MenuProps extends MenuProps$2 {
     withoutPortal?: boolean;
     /** (optional) sets the test id attribute */
     testId?: string;
+    /** (optional) sets the maximum height of the menu
+     * setting a max menu height value will make the menu scrollable if the content exceeds the height
+     * this is not compatible with nested menus that expand to the left or right of the menu
+     */
+    maxMenuHeight?: string;
 }
 /**
  * Component used for creating clickable menus
@@ -23086,12 +23100,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 +23169,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 +23189,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 +23223,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 +23242,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 +23264,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 +23296,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 +23305,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,15 @@ 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;
+    /** (optional) sets the maximum height of the menu
+     * setting a max menu height value will make the menu scrollable if the content exceeds the height
+     * this is not compatible with nested menus that expand to the left or right of the menu
+     */
+    maxMenuHeight?: string;
 }
 /** ButtonWithMenuProps combines the ActionButtonsProps with React HTMLButtonElement attributes */
 type ButtonWithMenuProps = ActionButtonsProps & React$1.ButtonHTMLAttributes<HTMLButtonElement>;
@@ -21128,7 +21137,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, maxMenuHeight, ...buttonProps }: ButtonWithMenuProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 /**
  * A string in the ISO 8601 date format: YYYY-MM-DD
@@ -22373,6 +22382,11 @@ interface MenuProps extends MenuProps$2 {
     withoutPortal?: boolean;
     /** (optional) sets the test id attribute */
     testId?: string;
+    /** (optional) sets the maximum height of the menu
+     * setting a max menu height value will make the menu scrollable if the content exceeds the height
+     * this is not compatible with nested menus that expand to the left or right of the menu
+     */
+    maxMenuHeight?: string;
 }
 /**
  * Component used for creating clickable menus
@@ -23086,12 +23100,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 +23169,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 +23189,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 +23223,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 +23242,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 +23264,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 +23296,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 +23305,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;
@@ -13525,7 +13529,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);
@@ -13535,10 +13539,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
@@ -13554,6 +13569,7 @@ var Menu = React8.forwardRef(function Menu2({
   disableAutoSeparatorManagement,
   menuItemsContainerCssClasses,
   testId,
+  maxMenuHeight,
   ...props
 }, ref) {
   const placementOverride = legacyPlacements.includes(placement) ? void 0 : placement;
@@ -13568,7 +13584,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 : "",
@@ -13820,6 +13836,8 @@ var ButtonWithMenu = ({
   placement,
   size = "lg",
   menuContainerCssClasses,
+  withoutPortal = false,
+  maxMenuHeight,
   ...buttonProps
 }) => {
   const buttonTheme = {
@@ -13878,6 +13896,7 @@ var ButtonWithMenu = ({
             placement,
             menuTrigger: clickableButton,
             menuItemsContainerCssClasses: menuContainerCssClasses,
+            maxMenuHeight,
             children
           }
         )
@@ -13888,6 +13907,8 @@ var ButtonWithMenu = ({
           placement,
           menuTrigger: dropdownButton,
           menuItemsContainerCssClasses: menuContainerCssClasses,
+          portal: withoutPortal,
+          maxMenuHeight,
           children
         }
       ) })
@@ -22294,6 +22315,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 {
@@ -22301,6 +22334,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);
   }
@@ -22308,23 +22347,29 @@ 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`
-  ${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 +22378,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 +22526,7 @@ var FilterButton2 = ({
   icon = "filter-add",
   filterCount,
   hasSelectedValue,
+  dataTestId,
   ...props
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)(
@@ -22491,7 +22539,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 +22591,7 @@ var SearchAndFilterProvider = ({
   onSearchChange,
   onChange,
   onSortChange,
+  resetFilterValues = [],
   totalResults,
   children
 }) => {
@@ -22572,8 +22621,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 +22739,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 +22754,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 +22764,8 @@ var FilterControls = ({
         onSearchTextChanged: (e) => setLocaleSearchTerm(e),
         value: localeSearchTerm,
         compact: true,
-        rounded: true
+        rounded: true,
+        css: SearchInput
       }
     ),
     children
@@ -23239,7 +23290,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 +23304,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 +23319,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 +23328,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 +23474,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 +23501,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 +23783,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 +23800,8 @@ var SortItems = () => {
             };
           }
         },
-        value: currentSelectedOption
+        value: currentSelectedOption,
+        id: "sort-by-field"
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
@@ -23749,7 +23814,8 @@ var SortItems = () => {
           { label: "Descending", value: `DESC` }
         ],
         onChange: (e) => setSortBy(`${sortField}_${e}`),
-        value: sortDirection
+        value: sortDirection,
+        "data-testid": "ordering-options"
       }
     )
   ] }) });
@@ -23833,7 +23899,8 @@ var SearchAndFilter = ({
   onChange,
   onSearchChange,
   onSortChange,
-  totalResults
+  totalResults,
+  resetFilterValues = []
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
     SearchAndFilterProvider,
@@ -23847,6 +23914,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.3-alpha.10+ae656e8e4c",
   "description": "Uniform design system components",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -23,15 +23,15 @@
     "@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.3-alpha.10+ae656e8e4c",
+    "@uniformdev/richtext": "^19.134.3-alpha.10+ae656e8e4c",
     "autoprefixer": "10.4.16",
     "hygen": "6.2.11",
-    "postcss": "8.4.32",
+    "postcss": "8.4.38",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-select-event": "^5.5.1",
-    "tsup": "8.0.1"
+    "tsup": "8.0.2"
   },
   "dependencies": {
     "@ariakit/react": "^0.3.5",
@@ -71,5 +71,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "405a628b0f592ca13bf65006ef5c92261468c144"
+  "gitHead": "ae656e8e4c730dbf960ef43b6c5e9a0b8ba13193"
 }