@servicetitan/anvil2 1.49.7 → 1.50.1

package/dist/{Toolbar-BxYOXLmv.js → Toolbar-Vw9V1RHr.js}

@@ -22,13 +22,13 @@ import { S as SvgEvent } from './event-BEJFimi3.js';
 import { D as DateTime } from './Calendar-CAYitkfM.js';
 import { C as Chip } from './Chip-UqdorCE2.js';
 import { L as ListView } from './ListView-D8mfK8Lu.js';
-import { S as SearchField, a as SvgSearch } from './SearchField-D6bICv4b.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-BHK18NYm.js';
+import { C as Combobox } from './Combobox-DGAa9vgU.js';
+import { D as Drawer } from './Drawer-GXeoK-r9.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 +212,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 +679,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 +695,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 +705,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 });
 };
 
@@ -820,6 +828,100 @@ 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":
+        return {
+          ...filter,
+          value: filter.value ? { ...filter.value } : void 0
+        };
+      default:
+        return { ...filter };
+    }
+  });
+};
 
 const FilterToggleButton = ({
   id,
@@ -852,6 +954,15 @@ const FilterSelect = ({
   onDraftChange
 }) => {
   const isMultiSelect = filter.type === "multiSelect";
+  const handleSearch = useCallback(
+    (e) => {
+      filter.onSearch?.(e.target.value);
+    },
+    [filter]
+  );
+  const handleSearchClear = useCallback(() => {
+    filter.onSearchClear?.();
+  }, [filter]);
   const singleSelectList = useMemo(
     () => /* @__PURE__ */ jsx(
       Listbox,
@@ -862,7 +973,7 @@ const FilterSelect = ({
           onDraftChange(selected);
         },
         disableAutoSelectOnFocus: true,
-        style: { padding: 0 },
+        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
@@ -879,7 +990,7 @@ 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
@@ -892,12 +1003,8 @@ const FilterSelect = ({
       {
         size: "small",
         className: styles$2["filter-select-search"],
-        onChange: (e) => {
-          filter.onSearch?.(e.target.value);
-        },
-        onClear: () => {
-          filter.onSearchClear?.();
-        },
+        onChange: handleSearch,
+        onClear: handleSearchClear,
         "data-anv": "filter-select-search"
       }
     ),
@@ -1008,7 +1115,11 @@ const FilterButton = ({
   const [draftValue, setDraftValue] = useState(
     filter.type === "multiSelect" ? [] : void 0
   );
-  const getCurrentFilterValue = () => {
+  const draftValueRef = useRef(draftValue);
+  useEffect(() => {
+    draftValueRef.current = draftValue;
+  }, [draftValue]);
+  const getCurrentFilterValue = useCallback(() => {
     switch (filter.type) {
       case "singleSelect":
         return filter.selectedItem;
@@ -1022,35 +1133,41 @@ 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);
         }
       }
     },
-    [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 = () => {
+  }, [draftValue, getCurrentFilterValue, filter.id, updateFilter]);
+  const handleCancel = useCallback(() => {
     if (!controlledFiltering) {
       setIsOpen(false);
       return;
@@ -1058,7 +1175,7 @@ const FilterButton = ({
     const originalValue = getCurrentFilterValue();
     setDraftValue(originalValue);
     setIsOpen(false);
-  };
+  }, [controlledFiltering, getCurrentFilterValue]);
   const getButtonLabel = useMemo(() => {
     switch (filter.type) {
       case "singleSelect": {
@@ -1177,9 +1294,6 @@ const FilterButton = ({
     if (controlledFiltering) {
       handleCancel();
     } else {
-      if (filter.type === "multiSelect") {
-        updateFilter(filter.id, draftValue, true);
-      }
       handleSubmit();
     }
   };
@@ -1204,6 +1318,7 @@ const FilterButton = ({
       open: isOpen,
       onClickOutside: isOpen ? handleOutsidePress : void 0,
       placement: "bottom-start",
+      noPadding: filter.type === "multiSelect" || filter.type === "singleSelect",
       children: [
         /* @__PURE__ */ jsx(
           Popover.Button,
@@ -1285,50 +1400,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 +1780,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 +1846,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 +2190,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-BxYOXLmv.js.map
+//# sourceMappingURL=Toolbar-Vw9V1RHr.js.map