@servicetitan/anvil2 1.50.0 → 1.50.2

package/dist/{Toolbar-DEwvVf35.js → Toolbar-K9UFfyvX.js}

@@ -2,7 +2,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import { useState, useEffect, useContext, createContext, useId, useRef, useCallback, forwardRef, useMemo } from 'react';
 import { B as Button } from './Button-92_FKAyV.js';
-import { T as Tooltip } from './Tooltip-CBy7srE2.js';
+import { T as Tooltip } from './Tooltip-CkfkiQPz.js';
 import { g as getKeyboardFocusableElements } from './getKeyboardFocusableElements-QqcABz0D.js';
 import { c as cx } from './index-tZvMCc77.js';
 import { u as useIntersectionObserver } from './useIntersectionObserver-BEmMDO3P.js';
@@ -11,24 +11,25 @@ import { B as ButtonToggle } from './ButtonToggle--sKvhBoA.js';
 import { B as ButtonLink } from './ButtonLink-C0zR7Wnb.js';
 import { S as SvgArrowDropDown } from './arrow_drop_down-ChAdBDux.js';
 import { L as Listbox } from './Listbox-C-n4IVVj.js';
-import { P as Popover } from './Popover-CCXrzBul.js';
+import { P as Popover } from './Popover-D9SmGQTh.js';
 import { F as Flex } from './Flex-CjPHUTeq.js';
 import { S as SvgMoreHoriz } from './more_horiz-DJgdQiy0.js';
 import { S as SvgMoreVert } from './more_vert-C_lJSyxt.js';
 import { I as Icon } from './Icon-BSuTVNaa.js';
 import { S as SvgClose } from './close-DZj38AEh.js';
+import { t as tabbable } from './DrawerContext-rJvgnn3O.js';
 import { S as SvgKeyboardArrowDown } from './keyboard_arrow_down-C8WQ38p1.js';
 import { S as SvgEvent } from './event-BEJFimi3.js';
-import { D as DateTime } from './Calendar-CAYitkfM.js';
+import { D as DateTime } from './Calendar-BeFARXwq.js';
 import { C as Chip } from './Chip-UqdorCE2.js';
-import { L as ListView } from './ListView-D8mfK8Lu.js';
+import { L as ListView } from './ListView-C5OBwbHe.js';
 import { S as SearchField, a as SvgSearch } from './SearchField-CJAo8dE0.js';
-import { u as useDateFieldSingleConversion, a as useDateFieldSingleState, M as MaskedDateInput, b as DateFieldSingleCalendar, D as DateFieldSingle } from './DateFieldSingle-DAtR8ImE.js';
-import { u as useDateFieldRangeConversion, a as useDateFieldRangeState, M as MaskedDateRangeInput, b as DateFieldRangeCalendar, D as DateFieldRange } from './DateFieldRange-ZAic_9mt.js';
-import { C as Checkbox } from './Checkbox-zAKOGEBl.js';
-import { R as Radio } from './Radio-jj0-1dOg.js';
-import { C as Combobox } from './Combobox-hxGMMb8x.js';
-import { D as Drawer } from './Drawer-GXeoK-r9.js';
+import { u as useDateFieldSingleConversion, a as useDateFieldSingleState, M as MaskedDateInput, b as DateFieldSingleCalendar, D as DateFieldSingle } from './DateFieldSingle-CQ6X-bVX.js';
+import { u as useDateFieldRangeConversion, a as useDateFieldRangeState, M as MaskedDateRangeInput, b as DateFieldRangeCalendar, D as DateFieldRange } from './DateFieldRange-DWAgi_T9.js';
+import { C as Checkbox } from './Checkbox-Chck2V5C.js';
+import { R as Radio } from './Radio-Cds2laHA.js';
+import { C as Combobox } from './Combobox-BTTWNSW1.js';
+import { D as Drawer } from './Drawer-CWogbC68.js';
 import { d as BreakpointSm, c as BreakpointMd, b as BreakpointLg, a as BreakpointXl, B as BreakpointXxl } from './primitive-BByug0kD.js';
 import { u as useMergeRefs } from './useMergeRefs-Dfmtq9cI.js';
 import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-BlIWftBb.js';
@@ -212,18 +213,18 @@ const handleMenuKeyboardNavigation = (event) => {
   menuItems[nextIndex]?.focus();
 };
 
-const toolbar = "_toolbar_bslcr_13";
+const toolbar = "_toolbar_1em0g_13";
 const styles$3 = {
 	toolbar: toolbar,
-	"toolbar-outline-spacer": "_toolbar-outline-spacer_bslcr_17",
-	"toolbar-content": "_toolbar-content_bslcr_20",
-	"overflow-wrap": "_overflow-wrap_bslcr_24",
-	"overflow-collapse": "_overflow-collapse_bslcr_27",
-	"toolbar-overflow-content": "_toolbar-overflow-content_bslcr_30",
-	"toolbar-button-item": "_toolbar-button-item_bslcr_38",
-	"toolbar-item": "_toolbar-item_bslcr_44",
-	"toolbar-button-toggle-item": "_toolbar-button-toggle-item_bslcr_63",
-	"toolbar-overflow-trigger": "_toolbar-overflow-trigger_bslcr_69"
+	"toolbar-outline-spacer": "_toolbar-outline-spacer_1em0g_20",
+	"toolbar-content": "_toolbar-content_1em0g_23",
+	"overflow-wrap": "_overflow-wrap_1em0g_28",
+	"overflow-collapse": "_overflow-collapse_1em0g_31",
+	"toolbar-overflow-content": "_toolbar-overflow-content_1em0g_34",
+	"toolbar-button-item": "_toolbar-button-item_1em0g_42",
+	"toolbar-item": "_toolbar-item_1em0g_48",
+	"toolbar-button-toggle-item": "_toolbar-button-toggle-item_1em0g_67",
+	"toolbar-overflow-trigger": "_toolbar-overflow-trigger_1em0g_73"
 };
 
 const ToolbarItemWrapper = ({
@@ -679,14 +680,15 @@ const FilterGroupContext = createContext({
 });
 
 const styles$2 = {
-	"filter-button-trigger": "_filter-button-trigger_320zf_18",
-	"filter-button-content": "_filter-button-content_320zf_22",
-	"filter-drawer-trigger": "_filter-drawer-trigger_320zf_26",
-	"filter-button-buttons": "_filter-button-buttons_320zf_31",
-	"filter-item": "_filter-item_320zf_37",
-	"filter-select-search": "_filter-select-search_320zf_45",
-	"filter-button-trigger--selected": "_filter-button-trigger--selected_320zf_54",
-	"filter-drawer-trigger--chipped": "_filter-drawer-trigger--chipped_320zf_64"
+	"filter-button-trigger": "_filter-button-trigger_1gitm_18",
+	"filter-button-content": "_filter-button-content_1gitm_22",
+	"filter-select-content": "_filter-select-content_1gitm_26",
+	"filter-button-buttons": "_filter-button-buttons_1gitm_32",
+	"filter-drawer-trigger": "_filter-drawer-trigger_1gitm_38",
+	"filter-item": "_filter-item_1gitm_53",
+	"filter-select-search": "_filter-select-search_1gitm_61",
+	"filter-button-trigger--selected": "_filter-button-trigger--selected_1gitm_78",
+	"filter-drawer-trigger--chipped": "_filter-drawer-trigger--chipped_1gitm_88"
 };
 
 const FilterItemWrapper = ({
@@ -694,18 +696,8 @@ const FilterItemWrapper = ({
   children
 }) => {
   const { addHiddenFilter, removeHiddenFilter, filterGroupRef } = useContext(FilterGroupContext);
-  const props = {
-    item: {
-      itemType: "button",
-      itemProps: {
-        children: null,
-        "aria-hidden": true
-      }
-    },
-    children,
-    className: styles$2["filter-item"],
-    observerRoot: filterGroupRef.current,
-    onVisibilityChange: (isVisible) => {
+  const handleVisibilityChange = useCallback(
+    (isVisible) => {
       if (filter) {
         if (isVisible) {
           removeHiddenFilter?.(filter);
@@ -714,8 +706,25 @@ const FilterItemWrapper = ({
         }
       }
     },
-    rootMargin: "0px -80px 0px 0px"
-  };
+    [filter, addHiddenFilter, removeHiddenFilter]
+  );
+  const props = useMemo(
+    () => ({
+      item: {
+        itemType: "button",
+        itemProps: {
+          children: null,
+          "aria-hidden": true
+        }
+      },
+      children,
+      className: styles$2["filter-item"],
+      observerRoot: filterGroupRef.current,
+      onVisibilityChange: handleVisibilityChange,
+      rootMargin: "0px -80px 0px 0px"
+    }),
+    [children, filterGroupRef, handleVisibilityChange]
+  );
   return /* @__PURE__ */ jsx(ToolbarItemWrapper, { ...props });
 };
 
@@ -731,8 +740,9 @@ const getActiveFilters = (filters) => {
       case "multiSelect":
         return filter.selectedItems && filter.selectedItems.length > 0;
       case "date":
-      case "dateRange":
         return filter.value !== null && filter.value !== void 0;
+      case "dateRange":
+        return filter.value !== null && filter.value !== void 0 && filter.value.startDate !== null && filter.value.endDate !== null;
       default:
         return false;
     }
@@ -820,6 +830,108 @@ const hasChangedFilter = (a, b) => {
   }
   return a !== b;
 };
+const getFilterSelectionValue = (filter) => {
+  switch (filter.type) {
+    case "boolean":
+      return filter.checked;
+    case "singleSelect":
+      return filter.selectedItem;
+    case "multiSelect":
+      return filter.selectedItems;
+    case "date":
+    case "dateRange":
+    case "custom":
+      return filter.value;
+    default:
+      return void 0;
+  }
+};
+const hasFilterSelectionChanged = (existingFilter, newFilter) => {
+  const existingValue = getFilterSelectionValue(existingFilter);
+  const newValue = getFilterSelectionValue(newFilter);
+  return existingValue !== newValue;
+};
+const preserveFilterState = (newFilter, existingFilter) => {
+  switch (newFilter.type) {
+    case "boolean":
+      return {
+        ...newFilter,
+        checked: existingFilter.checked
+      };
+    case "singleSelect":
+      return {
+        ...newFilter,
+        selectedItem: existingFilter.selectedItem
+      };
+    case "multiSelect":
+      return {
+        ...newFilter,
+        selectedItems: existingFilter.selectedItems
+      };
+    case "date":
+      return {
+        ...newFilter,
+        value: existingFilter.value
+      };
+    case "dateRange":
+      return {
+        ...newFilter,
+        value: existingFilter.value
+      };
+    case "custom":
+      return {
+        ...newFilter,
+        value: existingFilter.value
+      };
+    default:
+      return newFilter;
+  }
+};
+const cloneFiltersWithItemRefs = (filters) => {
+  return filters.map((filter) => {
+    switch (filter.type) {
+      case "singleSelect":
+        return {
+          ...filter,
+          selectedItem: filter.selectedItem ? filter.items.find(
+            (item) => item.id === filter.selectedItem?.id
+          ) || filter.selectedItem : void 0
+        };
+      case "multiSelect":
+        return {
+          ...filter,
+          selectedItems: filter.selectedItems ? filter.selectedItems.map(
+            (selectedItem) => filter.items.find((item) => item.id === selectedItem.id) || selectedItem
+          ) : []
+        };
+      case "date":
+        return {
+          ...filter,
+          value: filter.value
+        };
+      case "dateRange":
+        return {
+          ...filter,
+          value: filter.value
+        };
+      case "custom": {
+        const { value } = filter;
+        if (value === void 0) {
+          return { ...filter, value: void 0 };
+        }
+        if (Array.isArray(value)) {
+          return { ...filter, value: [...value] };
+        }
+        if (typeof value === "object" && value !== null) {
+          return { ...filter, value: { ...value } };
+        }
+        return { ...filter, value };
+      }
+      default:
+        return { ...filter };
+    }
+  });
+};
 
 const FilterToggleButton = ({
   id,
@@ -852,8 +964,30 @@ const FilterSelect = ({
   onDraftChange
 }) => {
   const isMultiSelect = filter.type === "multiSelect";
+  const listRef = useRef(null);
+  const handleSearch = useCallback(
+    (e) => {
+      filter.onSearch?.(e.target.value);
+    },
+    [filter]
+  );
+  const handleSearchClear = useCallback(() => {
+    filter.onSearchClear?.();
+  }, [filter]);
+  const handleSearchKeyDown = useCallback(
+    (e) => {
+      if (e.key === "ArrowDown" && listRef.current) {
+        e.preventDefault();
+        const focusableElements = tabbable(listRef.current);
+        if (focusableElements.length > 0) {
+          focusableElements[0].focus();
+        }
+      }
+    },
+    []
+  );
   const singleSelectList = useMemo(
-    () => /* @__PURE__ */ jsx(
+    () => /* @__PURE__ */ jsx("div", { ref: listRef, children: /* @__PURE__ */ jsx(
       Listbox,
       {
         items: filter.items,
@@ -862,15 +996,23 @@ const FilterSelect = ({
           onDraftChange(selected);
         },
         disableAutoSelectOnFocus: true,
-        style: { padding: 0 },
-        children: ({ items }) => items.map((item) => /* @__PURE__ */ jsx(Listbox.Option, { item, disabled: item.disabled, children: item.label }, item.id))
+        style: { paddingInline: "1rem", paddingBlockStart: "1rem" },
+        children: ({ items }) => items.map((item) => /* @__PURE__ */ jsx(
+          Listbox.Option,
+          {
+            item,
+            disabled: item.disabled,
+            children: item.label
+          },
+          item.id
+        ))
       },
       filter.id
-    ),
+    ) }),
     [filter.id, filter.items, draftValue, onDraftChange]
   );
   const multiSelectList = useMemo(
-    () => /* @__PURE__ */ jsx(
+    () => /* @__PURE__ */ jsx("div", { ref: listRef, children: /* @__PURE__ */ jsx(
       ListView,
       {
         items: filter.items,
@@ -879,11 +1021,11 @@ const FilterSelect = ({
           const items = selectedItems;
           onDraftChange(items);
         },
-        style: { padding: 0 },
+        style: { paddingInline: "1rem", paddingBlockStart: "1rem" },
         children: ({ items }) => items.map((item) => /* @__PURE__ */ jsx(ListView.Option, { item, children: item.label }, item.id))
       },
       filter.id
-    ),
+    ) }),
     [filter.id, filter.items, draftValue, onDraftChange]
   );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -892,12 +1034,9 @@ const FilterSelect = ({
       {
         size: "small",
         className: styles$2["filter-select-search"],
-        onChange: (e) => {
-          filter.onSearch?.(e.target.value);
-        },
-        onClear: () => {
-          filter.onSearchClear?.();
-        },
+        onChange: handleSearch,
+        onClear: handleSearchClear,
+        onKeyDown: handleSearchKeyDown,
         "data-anv": "filter-select-search"
       }
     ),
@@ -969,7 +1108,7 @@ const FilterDateRange = ({
       onChange: (change) => {
         const hasCompleteRange = change.startDate && change.endDate;
         const isClearingRange = change.isInputEmpty;
-        if (change.isInputValid && (hasCompleteRange || isClearingRange)) {
+        if (change.isInputValid && hasCompleteRange || isClearingRange) {
           onChange({ ...change, isDateRangeValid: true });
         }
       }
@@ -1008,7 +1147,13 @@ const FilterButton = ({
   const [draftValue, setDraftValue] = useState(
     filter.type === "multiSelect" ? [] : void 0
   );
-  const getCurrentFilterValue = () => {
+  const draftValueRef = useRef(draftValue);
+  const triggerRef = useRef(null);
+  const contentRef = useRef(null);
+  useEffect(() => {
+    draftValueRef.current = draftValue;
+  }, [draftValue]);
+  const getCurrentFilterValue = useCallback(() => {
     switch (filter.type) {
       case "singleSelect":
         return filter.selectedItem;
@@ -1022,43 +1167,61 @@ const FilterButton = ({
       default:
         return void 0;
     }
-  };
+  }, [filter]);
+  const prevIsOpenRef = useRef(isOpen);
+  const prevFilterRef = useRef(filter);
   useEffect(() => {
+    const justOpened = isOpen && !prevIsOpenRef.current;
+    prevIsOpenRef.current = isOpen;
     if (isOpen) {
-      const initialValue = getCurrentFilterValue();
-      setDraftValue(initialValue);
+      const shouldSync = justOpened || prevFilterRef.current && hasFilterSelectionChanged(prevFilterRef.current, filter);
+      if (shouldSync) {
+        const currentValue = getCurrentFilterValue();
+        setDraftValue(currentValue);
+      }
+      prevFilterRef.current = filter;
     }
-  }, [isOpen]);
+  }, [isOpen, filter]);
   const handleChange = useCallback(
     (value) => {
-      if (hasChangedFilter(value, draftValue)) {
+      if (hasChangedFilter(value, draftValueRef.current)) {
         setDraftValue(value);
-        if (!controlledFiltering) {
+        if (!controlledFiltering && filter.type !== "multiSelect") {
           updateFilter(filter.id, value, true);
-          if (filter.type !== "multiSelect") {
-            setIsOpen(false);
-          }
+          setIsOpen(false);
+          requestAnimationFrame(() => {
+            triggerRef.current?.focus();
+          });
         }
       }
     },
-    [filter.id, filter.type, controlledFiltering, updateFilter, draftValue]
+    [filter.id, filter.type, controlledFiltering, updateFilter]
   );
-  const handleSubmit = () => {
+  const handleSubmit = useCallback(() => {
     const stateValue = getCurrentFilterValue();
     if (hasChangedFilter(draftValue, stateValue)) {
       updateFilter(filter.id, draftValue, true);
     }
     setIsOpen(false);
-  };
-  const handleCancel = () => {
+    requestAnimationFrame(() => {
+      triggerRef.current?.focus();
+    });
+  }, [draftValue, getCurrentFilterValue, filter.id, updateFilter]);
+  const handleCancel = useCallback(() => {
     if (!controlledFiltering) {
       setIsOpen(false);
+      requestAnimationFrame(() => {
+        triggerRef.current?.focus();
+      });
       return;
     }
     const originalValue = getCurrentFilterValue();
     setDraftValue(originalValue);
     setIsOpen(false);
-  };
+    requestAnimationFrame(() => {
+      triggerRef.current?.focus();
+    });
+  }, [controlledFiltering, getCurrentFilterValue]);
   const getButtonLabel = useMemo(() => {
     switch (filter.type) {
       case "singleSelect": {
@@ -1094,7 +1257,7 @@ const FilterButton = ({
         }
         return filter.label;
       case "dateRange":
-        if (filter.value) {
+        if (filter.value?.startDate && filter.value?.endDate) {
           const start = DateTime.fromISO(filter.value.startDate, {
             zone: "local"
           });
@@ -1177,9 +1340,6 @@ const FilterButton = ({
     if (controlledFiltering) {
       handleCancel();
     } else {
-      if (filter.type === "multiSelect") {
-        updateFilter(filter.id, draftValue, true);
-      }
       handleSubmit();
     }
   };
@@ -1192,9 +1352,37 @@ const FilterButton = ({
     if (e.key === "Escape") {
       handleOutsidePress();
     }
+    if (e.key === "Tab" && contentRef.current) {
+      const focusableElements = tabbable(contentRef.current);
+      if (focusableElements.length === 0) return;
+      const firstElement = focusableElements[0];
+      const lastElement = focusableElements[focusableElements.length - 1];
+      const activeElement = document.activeElement;
+      if (e.shiftKey && activeElement === firstElement) {
+        e.preventDefault();
+        lastElement.focus();
+      } else if (!e.shiftKey && activeElement === lastElement) {
+        e.preventDefault();
+        firstElement.focus();
+      }
+    }
+  };
+  const handleTriggerKeyDown = (e) => {
+    if (e.key === "ArrowDown") {
+      if (isOpen && contentRef.current) {
+        e.preventDefault();
+        requestAnimationFrame(() => {
+          if (!contentRef.current) return;
+          const focusableElements = tabbable(contentRef.current);
+          if (focusableElements.length > 0) {
+            focusableElements[0].focus();
+          }
+        });
+      }
+    }
   };
   const triggerClasses = cx(styles$2["filter-button-trigger"], {
-    [styles$2["filter-button-trigger--selected"]]: filter.type === "custom" && filter.value || filter.type === "singleSelect" && filter.selectedItem || filter.type === "multiSelect" && filter.selectedItems && filter.selectedItems.length > 0 || filter.type === "date" && filter.value || filter.type === "dateRange" && filter.value
+    [styles$2["filter-button-trigger--selected"]]: filter.type === "custom" && filter.value || filter.type === "singleSelect" && filter.selectedItem || filter.type === "multiSelect" && filter.selectedItems && filter.selectedItems.length > 0 || filter.type === "date" && filter.value || filter.type === "dateRange" && filter.value?.startDate && filter.value?.endDate
   });
   const contentClasses = cx(styles$2["filter-button-content"], className);
   const iconOptions = filter.type === "date" || filter.type === "dateRange" ? { before: SvgEvent } : { after: SvgKeyboardArrowDown };
@@ -1204,11 +1392,16 @@ const FilterButton = ({
       open: isOpen,
       onClickOutside: isOpen ? handleOutsidePress : void 0,
       placement: "bottom-start",
+      noPadding: filter.type === "multiSelect" || filter.type === "singleSelect",
       children: [
         /* @__PURE__ */ jsx(
           Popover.Button,
           {
-            onKeyDown: handleKeyDown,
+            ref: triggerRef,
+            onKeyDown: (e) => {
+              handleTriggerKeyDown(e);
+              handleKeyDown(e);
+            },
             appearance: "ghost",
             size: "small",
             icon: iconOptions,
@@ -1221,21 +1414,29 @@ const FilterButton = ({
             children: getButtonLabel
           }
         ),
-        /* @__PURE__ */ jsxs(Popover.Content, { onKeyDown: handleKeyDown, className: contentClasses, children: [
-          getContent,
-          controlledFiltering && /* @__PURE__ */ jsxs(
-            Flex,
-            {
-              gap: 2,
-              justifyContent: "flex-end",
-              className: styles$2["filter-button-buttons"],
-              children: [
-                /* @__PURE__ */ jsx(Popover.Close, { size: "small", onClick: handleCancel, children: "Cancel" }),
-                /* @__PURE__ */ jsx(Button, { appearance: "primary", size: "small", onClick: handleSubmit, children: "Apply" })
-              ]
-            }
-          )
-        ] })
+        /* @__PURE__ */ jsxs(
+          Popover.Content,
+          {
+            ref: contentRef,
+            onKeyDown: handleKeyDown,
+            className: contentClasses,
+            children: [
+              getContent,
+              controlledFiltering && /* @__PURE__ */ jsxs(
+                Flex,
+                {
+                  gap: 2,
+                  justifyContent: "flex-end",
+                  className: styles$2["filter-button-buttons"],
+                  children: [
+                    /* @__PURE__ */ jsx(Popover.Close, { size: "small", onClick: handleCancel, children: "Cancel" }),
+                    /* @__PURE__ */ jsx(Button, { appearance: "primary", size: "small", onClick: handleSubmit, children: "Apply" })
+                  ]
+                }
+              )
+            ]
+          }
+        )
       ]
     }
   ) });
@@ -1285,50 +1486,25 @@ const FilterDrawer = () => {
   const activeFiltersCount = getActiveFilters(
     !showInlineFilters ? filters : hiddenFilters
   ).length;
+  const prevOpenRef = useRef(open);
+  const prevFiltersRef = useRef(filters);
   useEffect(() => {
+    const justOpened = open && !prevOpenRef.current;
+    prevOpenRef.current = open;
     if (open) {
-      setDraftFilters(
-        filters.map((filter) => {
-          switch (filter.type) {
-            case "singleSelect":
-              return {
-                ...filter,
-                selectedItem: filter.selectedItem ? filter.items.find(
-                  (item) => item.id === filter.selectedItem?.id
-                ) || filter.selectedItem : void 0
-              };
-            case "multiSelect":
-              return {
-                ...filter,
-                selectedItems: filter.selectedItems ? filter.selectedItems.map((selectedItem) => {
-                  const matchingItem = filter.items.find(
-                    (item) => item.id === selectedItem.id
-                  );
-                  return matchingItem || selectedItem;
-                }) : []
-              };
-            case "date":
-              return {
-                ...filter,
-                value: filter.value
-              };
-            case "dateRange":
-              return {
-                ...filter,
-                value: filter.value
-              };
-            case "custom":
-              return {
-                ...filter,
-                value: filter.value ? { ...filter.value } : void 0
-              };
-            default:
-              return { ...filter };
-          }
-        })
+      const anySelectionChanged = prevFiltersRef.current.some(
+        (prevFilter, index) => {
+          const newFilter = filters[index];
+          return newFilter && hasFilterSelectionChanged(prevFilter, newFilter);
+        }
       );
+      const shouldSync = justOpened || anySelectionChanged;
+      if (shouldSync) {
+        setDraftFilters(cloneFiltersWithItemRefs(filters));
+      }
+      prevFiltersRef.current = filters;
     }
-  }, [open]);
+  }, [open, filters]);
   const handleDraftChange = useCallback(
     (filterId, value) => {
       setDraftFilters((draft) => updateSingleFilter(draft, filterId, value));
@@ -1690,43 +1866,14 @@ const FilterGroupElement = forwardRef(
     const showInlineFilters = containerQuery && containerQuery.name !== "xs" && containerQuery.name !== "sm";
     useEffect(() => {
       setFilters((prevFilters) => {
+        const existingFiltersMap = new Map(prevFilters.map((f) => [f.id, f]));
         return initialFilters.map((newFilter) => {
-          const existingFilter = prevFilters.find((f) => f.id === newFilter.id);
-          if (existingFilter) {
-            switch (newFilter.type) {
-              case "boolean":
-                return {
-                  ...newFilter,
-                  checked: existingFilter.checked
-                };
-              case "singleSelect":
-                return {
-                  ...newFilter,
-                  selectedItem: existingFilter.selectedItem
-                };
-              case "multiSelect":
-                return {
-                  ...newFilter,
-                  selectedItems: existingFilter.selectedItems
-                };
-              case "date":
-                return {
-                  ...newFilter,
-                  value: existingFilter.value
-                };
-              case "dateRange":
-                return {
-                  ...newFilter,
-                  value: existingFilter.value
-                };
-              case "custom":
-                return {
-                  ...newFilter,
-                  value: existingFilter.value
-                };
-              default:
-                return newFilter;
-            }
+          const existingFilter = existingFiltersMap.get(newFilter.id);
+          if (!existingFilter) {
+            return newFilter;
+          }
+          if (!hasFilterSelectionChanged(existingFilter, newFilter)) {
+            return preserveFilterState(newFilter, existingFilter);
           }
           return newFilter;
         });
@@ -1785,9 +1932,17 @@ const FilterGroupElement = forwardRef(
             },
             filter.id
           );
-        case "custom":
         case "singleSelect":
         case "multiSelect":
+          return /* @__PURE__ */ jsx(
+            FilterButton,
+            {
+              filter,
+              className: styles$2["filter-select-content"]
+            },
+            filter.id
+          );
+        case "custom":
         case "date":
         case "dateRange":
           return /* @__PURE__ */ jsx(FilterButton, { filter }, filter.id);
@@ -2121,4 +2276,4 @@ const Toolbar = Object.assign(ToolbarElement, {
 });
 
 export { Toolbar as T, ToolbarButton as a, ToolbarButtonToggle as b, ToolbarButtonLink as c, ToolbarSelect as d, ToolbarControlGroup as e, ToolbarSearchField as f, ToolbarElement as g };
-//# sourceMappingURL=Toolbar-DEwvVf35.js.map
+//# sourceMappingURL=Toolbar-K9UFfyvX.js.map