@servicetitan/anvil2 3.0.2 → 3.0.4

package/dist/FilterBar-BUfajdQU.js

@@ -0,0 +1,1442 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import * as React from 'react';
+import { useState, useEffect, createContext, useContext, useCallback, useMemo, useRef, forwardRef } from 'react';
+import { S as SvgClose } from './close-DZj38AEh.js';
+import { b as ToolbarItemWrapper, T as ToolbarButtonToggle, a as useToolbarSize, d as updateToolbarItemsTabIndex, e as handleToolbarKeyDown, c as ToolbarContext } from './ToolbarButtonToggle-xvMWRxzC.js';
+import { B as Button } from './Button-C_V2xQAs.js';
+import { S as SvgKeyboardArrowDown } from './keyboard_arrow_down-C8WQ38p1.js';
+import { S as SvgEvent } from './TimezoneMessage-BrKB_psP.js';
+import { D as DateTime } from './luxon-wpz4A-OQ.js';
+import { C as Chip } from './Chip-0-Yx9SGX.js';
+import { t as tabbable } from './usePopoverTransitionStates-CDXCdyKa.js';
+import { L as Listbox } from './Listbox-DRznPBCr.js';
+import { L as ListView } from './ListView-CIa981KJ.js';
+import { S as SearchField } from './SearchField-Dl7sh_M4.js';
+import { F as Flex } from './Flex-_orhvoxS.js';
+import { u as useDateFieldSingleConversion, a as useDateFieldSingleState, M as MaskedDateInput, b as DateFieldSingleCalendar, D as DateFieldSingle } from './DateFieldSingle-DjmHpn1y.js';
+import { u as useDateFieldRangeConversion, a as useDateFieldRangeState, M as MaskedDateRangeInput, b as DateFieldRangeCalendar, D as DateFieldRange } from './DateFieldRange-CO2C776E.js';
+import { c as cx } from './index-De1g9FRV.js';
+import { P as Popover } from './AiMark-DjOf60tj.js';
+import { a as SvgSearch } from './SearchField-CO9BHCYB.js';
+import { C as Checkbox } from './Checkbox-CVidv1sO.js';
+import { R as Radio } from './Radio-CSBetBV6.js';
+import { C as Combobox } from './Combobox-C9-3tlcP.js';
+import { B as ButtonToggle } from './ButtonToggle-jnDMPSyK.js';
+import { D as Drawer } from './Drawer-Dg35inxH.js';
+import { d as BreakpointSm, c as BreakpointMd, b as BreakpointLg, a as BreakpointXl, B as BreakpointXxl } from './primitive-DXlHdTFb.js';
+import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-CB_zHDbW.js';
+import { u as useMergeRefs } from './useMergeRefs-Dfmtq9cI.js';
+
+import './FilterBar.css';function containerBreakpoint(containerWidth, name, min, max) {
+  if ((min == null || containerWidth >= min) && (max == null || containerWidth < max)) {
+    return {
+      name,
+      min,
+      max,
+      containerWidth,
+      containerHeight: 0
+      // Will be updated with actual height
+    };
+  }
+  return void 0;
+}
+const getContainerBreakpoint = (containerWidth, containerHeight) => {
+  if (!BreakpointSm) return;
+  if (!BreakpointMd) return;
+  if (!BreakpointLg) return;
+  if (!BreakpointXl) return;
+  if (!BreakpointXxl) return;
+  const sm = parseInt(BreakpointSm.value);
+  const md = parseInt(BreakpointMd.value);
+  const lg = parseInt(BreakpointLg.value);
+  const xl = parseInt(BreakpointXl.value);
+  const xxl = parseInt(BreakpointXxl.value);
+  const result = containerBreakpoint(containerWidth, "xs", void 0, sm) ?? containerBreakpoint(containerWidth, "sm", sm, md) ?? containerBreakpoint(containerWidth, "md", md, lg) ?? containerBreakpoint(containerWidth, "lg", lg, xl) ?? containerBreakpoint(containerWidth, "xl", xl, xxl) ?? containerBreakpoint(containerWidth, "xxl", xxl, void 0);
+  return result ? { ...result, containerHeight } : void 0;
+};
+const useContainerQuery = (containerRef, props) => {
+  const [size, setSize] = useState(
+    void 0
+  );
+  useEffect(() => {
+    if (!containerRef.current) return;
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const { width, height } = entry.contentRect;
+        const breakpoint = getContainerBreakpoint(width, height);
+        setSize(breakpoint);
+      }
+    });
+    resizeObserver.observe(containerRef.current);
+    const rect = containerRef.current.getBoundingClientRect();
+    setSize(getContainerBreakpoint(rect.width, rect.height));
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [containerRef, props?.disable]);
+  return size;
+};
+
+const FilterGroupContext = createContext({
+  filterGroupRef: { current: null },
+  filters: [],
+  updateFilter: () => {
+  },
+  onFilterChange: () => {
+  },
+  controlledFiltering: false,
+  associatedContent: "",
+  hiddenFilters: [],
+  addHiddenFilter: () => {
+  },
+  removeHiddenFilter: () => {
+  }
+});
+
+const styles = {
+	"filter-button-trigger": "_filter-button-trigger_1ky9m_1",
+	"filter-button-trigger--selected": "_filter-button-trigger--selected_1ky9m_5",
+	"filter-button-content": "_filter-button-content_1ky9m_14",
+	"filter-select-content": "_filter-select-content_1ky9m_19",
+	"filter-button-buttons": "_filter-button-buttons_1ky9m_25",
+	"filter-drawer-trigger": "_filter-drawer-trigger_1ky9m_29",
+	"filter-drawer-trigger--chipped": "_filter-drawer-trigger--chipped_1ky9m_41",
+	"filter-item": "_filter-item_1ky9m_65",
+	"filter-select-search": "_filter-select-search_1ky9m_70"
+};
+
+const FilterItemWrapper = ({
+  filter,
+  children
+}) => {
+  const { addHiddenFilter, removeHiddenFilter, filterGroupRef } = useContext(FilterGroupContext);
+  const handleVisibilityChange = useCallback(
+    (isVisible) => {
+      if (filter) {
+        if (isVisible) {
+          removeHiddenFilter?.(filter);
+        } else {
+          addHiddenFilter?.(filter);
+        }
+      }
+    },
+    [filter, addHiddenFilter, removeHiddenFilter]
+  );
+  const props = useMemo(
+    () => ({
+      item: {
+        itemType: "button",
+        itemProps: {
+          children: null,
+          "aria-hidden": true
+        }
+      },
+      children,
+      className: styles["filter-item"],
+      observerRoot: filterGroupRef.current,
+      onVisibilityChange: handleVisibilityChange,
+      rootMargin: "0px -80px 0px 0px"
+    }),
+    [children, filterGroupRef, handleVisibilityChange]
+  );
+  return /* @__PURE__ */ jsx(ToolbarItemWrapper, { ...props });
+};
+
+const getActiveFilters = (filters) => {
+  return filters.filter((filter) => {
+    switch (filter.type) {
+      case "boolean":
+        return filter.checked;
+      case "custom":
+        return filter.value !== void 0;
+      case "singleSelect":
+        return filter.selectedItem !== void 0;
+      case "multiSelect":
+        return filter.selectedItems && filter.selectedItems.length > 0;
+      case "date":
+        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;
+    }
+  });
+};
+const checkActiveFilters = (filters) => {
+  return getActiveFilters(filters).length > 0;
+};
+const resetFilters = (filters) => {
+  return filters.map((filter) => {
+    switch (filter.type) {
+      case "boolean":
+        return {
+          ...filter,
+          checked: false
+        };
+      case "custom":
+        return {
+          ...filter,
+          value: void 0
+        };
+      case "singleSelect":
+        return {
+          ...filter,
+          selectedItem: void 0
+        };
+      case "multiSelect":
+        return {
+          ...filter,
+          selectedItems: []
+        };
+      case "date":
+      case "dateRange":
+        return {
+          ...filter,
+          value: null
+        };
+      default:
+        return filter;
+    }
+  });
+};
+const updateSingleFilter = (filters, filterId, value) => {
+  return filters.map((filter) => {
+    if (filter.id !== filterId) return filter;
+    switch (filter.type) {
+      case "boolean":
+        return {
+          ...filter,
+          checked: value
+        };
+      case "singleSelect":
+        return {
+          ...filter,
+          selectedItem: value
+        };
+      case "multiSelect":
+        return {
+          ...filter,
+          selectedItems: value
+        };
+      case "date":
+        return {
+          ...filter,
+          value
+        };
+      case "dateRange":
+        return {
+          ...filter,
+          value
+        };
+      case "custom":
+        return {
+          ...filter,
+          value
+        };
+      default:
+        return filter;
+    }
+  });
+};
+const hasChangedFilter = (a, b) => {
+  if (Array.isArray(a) && Array.isArray(b)) {
+    if (a.length !== b.length) return true;
+    if (a.length === 0) return false;
+    const aItems = a;
+    const bItems = b;
+    if (aItems[0] && "id" in aItems[0]) {
+      const aIds = new Set(aItems.map((item) => item.id));
+      return bItems.some(
+        (item) => !aIds.has(item.id)
+      );
+    }
+    return JSON.stringify(a) !== JSON.stringify(b);
+  }
+  if (a && b && typeof a === "object" && typeof b === "object" && "id" in a && "id" in b) {
+    return a.id !== b.id;
+  }
+  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,
+  checked,
+  children,
+  ...props
+}) => {
+  const filter = {
+    id,
+    type: "boolean",
+    checked,
+    label: typeof children === "string" ? children : id
+  };
+  return /* @__PURE__ */ jsx(FilterItemWrapper, { filter, children: /* @__PURE__ */ jsx(
+    ToolbarButtonToggle,
+    {
+      checked,
+      isFilter: true,
+      ...props,
+      className: styles["filter-button-trigger"],
+      "data-anv": "toolbar-boolean-filter",
+      children
+    }
+  ) });
+};
+
+const FilterSelect = ({
+  filter,
+  draftValue,
+  onDraftChange
+}) => {
+  const isMultiSelect = filter.type === "multiSelect";
+  const listRef = useRef(null);
+  const shouldStabilizeItems = isMultiSelect && filter.hasSearch;
+  const [stableItems, setStableItems] = useState(filter.items);
+  const isSearchActiveRef = useRef(false);
+  const expectingSearchUpdate = useRef(false);
+  const displayItems = shouldStabilizeItems ? stableItems : filter.items;
+  useEffect(() => {
+    if (!shouldStabilizeItems) return;
+    if (expectingSearchUpdate.current) {
+      setStableItems(filter.items);
+      expectingSearchUpdate.current = false;
+    } else if (!isSearchActiveRef.current) {
+      setStableItems(filter.items);
+    }
+  }, [filter.items, shouldStabilizeItems]);
+  const handleSearch = useCallback(
+    (e) => {
+      const { value } = e.target;
+      filter.onSearch?.(value);
+      if (shouldStabilizeItems) {
+        if (value.length > 0) {
+          isSearchActiveRef.current = true;
+          expectingSearchUpdate.current = true;
+        } else {
+          isSearchActiveRef.current = false;
+        }
+      }
+    },
+    [filter, shouldStabilizeItems]
+  );
+  const handleSearchClear = useCallback(() => {
+    filter.onSearchClear?.();
+    if (shouldStabilizeItems) {
+      isSearchActiveRef.current = false;
+    }
+  }, [filter, shouldStabilizeItems]);
+  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("div", { ref: listRef, children: /* @__PURE__ */ jsx(
+      Listbox,
+      {
+        items: filter.items,
+        selected: draftValue,
+        onSelectionChange: (selected) => {
+          onDraftChange(selected);
+        },
+        disableAutoSelectOnFocus: true,
+        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("div", { ref: listRef, children: /* @__PURE__ */ jsx(
+      ListView,
+      {
+        items: displayItems,
+        selected: Array.isArray(draftValue) ? draftValue : [],
+        onSelectionChange: (selectedItems) => {
+          const items = selectedItems;
+          onDraftChange(items);
+        },
+        style: { paddingInline: "1rem", paddingBlockStart: "1rem" },
+        children: ({ items }) => items.map((item) => /* @__PURE__ */ jsx(ListView.Option, { item, children: item.label }, item.id))
+      },
+      filter.id
+    ) }),
+    [filter.id, displayItems, draftValue, onDraftChange]
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    filter.hasSearch && /* @__PURE__ */ jsx(
+      SearchField,
+      {
+        size: "small",
+        className: styles["filter-select-search"],
+        onChange: handleSearch,
+        onClear: handleSearchClear,
+        onKeyDown: handleSearchKeyDown,
+        "data-anv": "filter-select-search"
+      }
+    ),
+    isMultiSelect ? multiSelectList : singleSelectList
+  ] });
+};
+
+const FilterDateSingle = ({
+  filter,
+  draftValue,
+  onDraftChange
+}) => {
+  const maskedDateInputRef = useRef(null);
+  const handleChange = (change) => {
+    onDraftChange(change.date);
+  };
+  const { value, onChange } = useDateFieldSingleConversion({
+    value: draftValue,
+    onChange: handleChange
+  });
+  const { handleInputChange, handleCalendarSelection } = useDateFieldSingleState({
+    valueProp: value,
+    onChange: (change) => onChange({ ...change, isDateValid: true })
+  });
+  return /* @__PURE__ */ jsxs(Flex, { gap: 4, direction: "column", children: [
+    /* @__PURE__ */ jsx(
+      MaskedDateInput,
+      {
+        mode: filter.mode,
+        ref: maskedDateInputRef,
+        onChange: handleInputChange,
+        lastValidDate: value ?? null,
+        autoComplete: "off"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      DateFieldSingleCalendar,
+      {
+        value: value ?? null,
+        onSelection: handleCalendarSelection
+      }
+    )
+  ] });
+};
+
+const FilterDateRange = ({
+  filter,
+  draftValue,
+  onDraftChange
+}) => {
+  const maskedDateRangeInputRef = useRef(null);
+  const handleChange = (change) => {
+    const hasCompleteRange = change.startDate && change.endDate;
+    const isClearingRange = !change.startDate && !change.endDate;
+    if (hasCompleteRange || isClearingRange) {
+      onDraftChange({
+        startDate: change.startDate,
+        endDate: change.endDate
+      });
+    }
+  };
+  const { value, onChange } = useDateFieldRangeConversion({
+    value: draftValue,
+    onChange: handleChange
+  });
+  const { handleInputChange, handleCalendarSelection } = useDateFieldRangeState(
+    {
+      valueProp: value,
+      onChange: (change) => {
+        const hasCompleteRange = change.startDate && change.endDate;
+        const isClearingRange = change.isInputEmpty;
+        if (change.isInputValid && hasCompleteRange || isClearingRange) {
+          onChange({ ...change, isDateRangeValid: true });
+        }
+      }
+    }
+  );
+  return /* @__PURE__ */ jsxs(Flex, { gap: 4, direction: "column", children: [
+    /* @__PURE__ */ jsx(
+      MaskedDateRangeInput,
+      {
+        mode: filter.mode,
+        ref: maskedDateRangeInputRef,
+        onChange: handleInputChange,
+        startDate: value?.startDate ?? null,
+        endDate: value?.endDate ?? null,
+        autoComplete: "off"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      DateFieldRangeCalendar,
+      {
+        startDate: value?.startDate ?? null,
+        endDate: value?.endDate ?? null,
+        onSelection: handleCalendarSelection
+      }
+    )
+  ] });
+};
+
+const FilterButton = ({
+  filter,
+  children,
+  className
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const { updateFilter, controlledFiltering } = useContext(FilterGroupContext);
+  const toolbarSize = useToolbarSize();
+  const [draftValue, setDraftValue] = useState(
+    filter.type === "multiSelect" ? [] : void 0
+  );
+  const draftValueRef = useRef(draftValue);
+  useEffect(() => {
+    draftValueRef.current = draftValue;
+  }, [draftValue]);
+  const getCurrentFilterValue = useCallback(() => {
+    switch (filter.type) {
+      case "singleSelect":
+        return filter.selectedItem;
+      case "multiSelect":
+        return filter.selectedItems || [];
+      case "date":
+      case "dateRange":
+        return filter.value;
+      case "custom":
+        return filter.value;
+      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 shouldSync = justOpened || prevFilterRef.current && hasFilterSelectionChanged(prevFilterRef.current, filter);
+      if (shouldSync) {
+        const currentValue = getCurrentFilterValue();
+        setDraftValue(currentValue);
+      }
+      prevFilterRef.current = filter;
+    }
+  }, [isOpen, filter]);
+  const handleChange = useCallback(
+    (value) => {
+      if (hasChangedFilter(value, draftValueRef.current)) {
+        draftValueRef.current = value;
+        setDraftValue(value);
+        if (!controlledFiltering) {
+          updateFilter(filter.id, value, true);
+          if (filter.type !== "multiSelect") {
+            setIsOpen(false);
+          }
+        }
+      }
+    },
+    [filter.id, filter.type, controlledFiltering, updateFilter]
+  );
+  const handleSubmit = useCallback(() => {
+    const stateValue = getCurrentFilterValue();
+    if (hasChangedFilter(draftValue, stateValue)) {
+      updateFilter(filter.id, draftValue, true);
+    }
+    setIsOpen(false);
+  }, [draftValue, getCurrentFilterValue, filter.id, updateFilter]);
+  const handleCancel = useCallback(() => {
+    if (!controlledFiltering) {
+      setIsOpen(false);
+      return;
+    }
+    const originalValue = getCurrentFilterValue();
+    setDraftValue(originalValue);
+    setIsOpen(false);
+  }, [controlledFiltering, getCurrentFilterValue]);
+  const getButtonLabel = useMemo(() => {
+    switch (filter.type) {
+      case "singleSelect": {
+        const singleSelectFilter = filter;
+        if (singleSelectFilter.selectedItem) {
+          return `${filter.label}: ${singleSelectFilter.selectedItem.label}`;
+        }
+        return filter.label;
+      }
+      case "multiSelect": {
+        const multiSelectFilter = filter;
+        if (multiSelectFilter.selectedItems && multiSelectFilter.selectedItems.length > 0) {
+          const selectionCount = multiSelectFilter.selectedItems.length.toString();
+          return /* @__PURE__ */ jsxs(Fragment, { children: [
+            filter.label,
+            /* @__PURE__ */ jsx(
+              Chip,
+              {
+                label: selectionCount,
+                color: "#0265DC",
+                size: "small",
+                "aria-label": `${selectionCount} selected items`
+              }
+            )
+          ] });
+        }
+        return filter.label;
+      }
+      case "date":
+        if (filter.value) {
+          const date = DateTime.fromISO(filter.value, { zone: "local" });
+          return `${filter.label}: ${date.monthShort} ${date.day}, ${date.year}`;
+        }
+        return filter.label;
+      case "dateRange":
+        if (filter.value?.startDate && filter.value?.endDate) {
+          const start = DateTime.fromISO(filter.value.startDate, {
+            zone: "local"
+          });
+          const end = DateTime.fromISO(filter.value.endDate, {
+            zone: "local"
+          });
+          const isSameYear = start.year === end.year;
+          const formattedStart = isSameYear ? `${start.monthShort} ${start.day}` : `${start.monthShort} ${start.day}, ${start.year}`;
+          return `${filter.label}: ${formattedStart} – ${end.monthShort} ${end.day}, ${end.year}`;
+        }
+        return filter.label;
+      case "custom":
+        if (filter.labelChipCount) {
+          return /* @__PURE__ */ jsxs(Fragment, { children: [
+            filter.label,
+            /* @__PURE__ */ jsx(
+              Chip,
+              {
+                label: filter.labelChipCount.toString(),
+                color: "#0265DC",
+                size: "small",
+                "aria-label": `${filter.labelChipCount} selected items`
+              }
+            )
+          ] });
+        }
+        return filter.label;
+      default:
+        return filter.label;
+    }
+  }, [filter]);
+  const getContent = useMemo(() => {
+    switch (filter.type) {
+      case "custom":
+        return filter.buttonRender({
+          value: draftValue,
+          onChange: handleChange
+        });
+      case "singleSelect":
+        return /* @__PURE__ */ jsx(
+          FilterSelect,
+          {
+            filter,
+            draftValue,
+            onDraftChange: handleChange
+          }
+        );
+      case "multiSelect":
+        return /* @__PURE__ */ jsx(
+          FilterSelect,
+          {
+            filter,
+            draftValue,
+            onDraftChange: handleChange
+          }
+        );
+      case "date":
+        return /* @__PURE__ */ jsx(
+          FilterDateSingle,
+          {
+            filter,
+            draftValue,
+            onDraftChange: handleChange
+          }
+        );
+      case "dateRange":
+        return /* @__PURE__ */ jsx(
+          FilterDateRange,
+          {
+            filter,
+            draftValue,
+            onDraftChange: handleChange
+          }
+        );
+      default:
+        return children;
+    }
+  }, [filter, draftValue, handleChange, children]);
+  const handleOutsidePress = () => {
+    if (controlledFiltering) {
+      handleCancel();
+    } else if (filter.type === "multiSelect") {
+      setIsOpen(false);
+    } else {
+      handleSubmit();
+    }
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") {
+      if (!controlledFiltering && filter.type !== "multiSelect") {
+        handleSubmit();
+      }
+    }
+  };
+  const triggerClasses = cx(styles["filter-button-trigger"], {
+    [styles["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["filter-button-content"], className);
+  const iconOptions = filter.type === "date" || filter.type === "dateRange" ? { before: SvgEvent } : { after: SvgKeyboardArrowDown };
+  return /* @__PURE__ */ jsx(FilterItemWrapper, { filter, children: /* @__PURE__ */ jsxs(
+    Popover,
+    {
+      open: isOpen,
+      onClose: handleOutsidePress,
+      placement: "bottom-start",
+      modal: true,
+      noPadding: filter.type === "multiSelect" || filter.type === "singleSelect",
+      children: [
+        /* @__PURE__ */ jsx(
+          Popover.Button,
+          {
+            appearance: "ghost",
+            size: toolbarSize,
+            icon: iconOptions,
+            "data-id": filter.id,
+            "data-anv": "toolbar-button",
+            className: triggerClasses,
+            onClick: () => {
+              setIsOpen(!isOpen);
+            },
+            children: getButtonLabel
+          }
+        ),
+        /* @__PURE__ */ jsxs(Popover.Content, { onKeyDown: handleKeyDown, className: contentClasses, children: [
+          getContent,
+          controlledFiltering && /* @__PURE__ */ jsxs(
+            Flex,
+            {
+              gap: 2,
+              justifyContent: "flex-end",
+              className: styles["filter-button-buttons"],
+              children: [
+                /* @__PURE__ */ jsx(Popover.Close, { size: "small", children: "Cancel" }),
+                /* @__PURE__ */ jsx(Button, { appearance: "primary", size: "small", onClick: handleSubmit, children: "Apply" })
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  ) });
+};
+
+const SvgTune = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M3 18c0 .55.45 1 1 1h5v-2H4c-.55 0-1 .45-1 1zM3 6c0 .55.45 1 1 1h9V5H4c-.55 0-1 .45-1 1zm10 14v-1h7c.55 0 1-.45 1-1s-.45-1-1-1h-7v-1c0-.55-.45-1-1-1s-1 .45-1 1v4c0 .55.45 1 1 1s1-.45 1-1zM7 10v1H4c-.55 0-1 .45-1 1s.45 1 1 1h3v1c0 .55.45 1 1 1s1-.45 1-1v-4c0-.55-.45-1-1-1s-1 .45-1 1zm14 2c0-.55-.45-1-1-1h-9v2h9c.55 0 1-.45 1-1zm-5-3c.55 0 1-.45 1-1V7h3c.55 0 1-.45 1-1s-.45-1-1-1h-3V4c0-.55-.45-1-1-1s-1 .45-1 1v4c0 .55.45 1 1 1z" }));
+
+const FilterDrawer = () => {
+  const [open, setOpen] = useState(false);
+  const {
+    filters,
+    updateFilter,
+    onFilterChange,
+    hiddenFilters,
+    filterGroupRef
+  } = useContext(FilterGroupContext);
+  const toolbarSize = useToolbarSize();
+  const containerQuery = useContainerQuery(filterGroupRef);
+  const showInlineFilters = containerQuery && containerQuery.name !== "xs" && containerQuery.name !== "sm";
+  const [draftFilters, setDraftFilters] = useState(filters);
+  const [searchValues, setSearchValues] = useState({});
+  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) {
+      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, filters]);
+  const handleDraftChange = useCallback(
+    (filterId, value) => {
+      setDraftFilters((draft) => updateSingleFilter(draft, filterId, value));
+      const filter = filters.find((f) => f.id === filterId);
+      if ((filter?.type === "singleSelect" || filter?.type === "multiSelect") && filter.hasSearch && value) {
+        setSearchValues((prev) => ({ ...prev, [filterId]: "" }));
+        requestAnimationFrame(() => {
+          filter.onSearch?.("");
+        });
+      }
+    },
+    [filters]
+  );
+  const clearDraftFilters = () => {
+    setDraftFilters(resetFilters(draftFilters));
+  };
+  const hasActiveDraftFilters = checkActiveFilters(draftFilters);
+  const filterForm = useMemo(
+    () => draftFilters.map((draftFilter) => {
+      const originalFilter = filters.find((f) => f.id === draftFilter.id);
+      if (!originalFilter) return null;
+      switch (draftFilter.type) {
+        case "boolean":
+          return /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              label: draftFilter.label,
+              checked: draftFilter.checked,
+              onChange: (e) => handleDraftChange(draftFilter.id, e?.target.checked ?? false)
+            },
+            draftFilter.id
+          );
+        case "custom": {
+          const customFilter = originalFilter;
+          return /* @__PURE__ */ jsx("div", { children: customFilter.drawerRender?.({
+            value: draftFilter.value,
+            onChange: (value) => handleDraftChange(draftFilter.id, value)
+          }) }, draftFilter.id);
+        }
+        case "singleSelect": {
+          const singleSelectFilter = originalFilter;
+          const draftSingleSelectFilter = draftFilter;
+          if (singleSelectFilter.simpleDrawerVariant) {
+            return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Radio.Group, { legend: singleSelectFilter.label, children: singleSelectFilter.items.map((item) => /* @__PURE__ */ jsx(
+              Radio,
+              {
+                name: `${singleSelectFilter.id}-radio`,
+                value: item.id,
+                label: item.label,
+                checked: draftSingleSelectFilter.selectedItem?.id === item.id,
+                onChange: (e) => {
+                  if (e?.target.checked) {
+                    const selected = singleSelectFilter.items.find(
+                      (opt) => opt.id === e.target.value
+                    );
+                    handleDraftChange(draftFilter.id, selected);
+                  }
+                }
+              },
+              item.id
+            )) }) }, draftFilter.id);
+          } else {
+            const selectedItem = draftSingleSelectFilter.selectedItem ? singleSelectFilter.items?.find(
+              (item) => item.id === draftSingleSelectFilter.selectedItem?.id
+            ) ?? null : null;
+            return /* @__PURE__ */ jsxs(
+              Combobox,
+              {
+                items: singleSelectFilter.items,
+                selectedItem,
+                onChange: (selectedItem2) => {
+                  handleDraftChange(draftFilter.id, selectedItem2);
+                },
+                itemToString: (item) => item?.label ?? "",
+                disableFilter: singleSelectFilter.hasSearch,
+                children: [
+                  singleSelectFilter.hasSearch ? /* @__PURE__ */ jsx(
+                    Combobox.SearchField,
+                    {
+                      label: draftSingleSelectFilter.label,
+                      prefix: { icon: { svg: SvgSearch } },
+                      placeholder: "Search...",
+                      size: "small",
+                      value: draftSingleSelectFilter.selectedItem?.label || searchValues[draftFilter.id] || "",
+                      onChange: (e) => {
+                        const searchValue = e.target.value;
+                        setSearchValues((prev) => ({
+                          ...prev,
+                          [draftFilter.id]: searchValue
+                        }));
+                        singleSelectFilter.onSearch?.(searchValue);
+                      },
+                      onClear: () => {
+                        setSearchValues((prev) => ({
+                          ...prev,
+                          [draftFilter.id]: ""
+                        }));
+                        handleDraftChange(draftFilter.id, void 0);
+                        singleSelectFilter.onSearchClear?.();
+                      },
+                      "data-anv": "filter-drawer-combobox-search"
+                    }
+                  ) : /* @__PURE__ */ jsx(
+                    Combobox.SelectTrigger,
+                    {
+                      label: singleSelectFilter.label,
+                      placeholder: "Select an option...",
+                      size: "small"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(Combobox.Content, { children: ({ items }) => /* @__PURE__ */ jsx(Combobox.List, { style: { padding: 0 }, children: items.map((item, i) => /* @__PURE__ */ jsx(Combobox.Item, { item, index: i, children: item.label }, item.id)) }) })
+                ]
+              },
+              draftFilter.id
+            );
+          }
+        }
+        case "multiSelect": {
+          const multiSelectFilter = originalFilter;
+          const draftMultiSelectFilter = draftFilter;
+          if (multiSelectFilter.simpleDrawerVariant) {
+            return /* @__PURE__ */ jsx(
+              Checkbox.Group,
+              {
+                legend: multiSelectFilter.label,
+                children: multiSelectFilter.items.map((item) => /* @__PURE__ */ jsx(
+                  Checkbox,
+                  {
+                    label: item.label,
+                    checked: draftMultiSelectFilter.selectedItems?.some(
+                      (selected) => selected.id === item.id
+                    ) ?? false,
+                    onChange: (e) => {
+                      const currentSelected = draftMultiSelectFilter.selectedItems || [];
+                      if (e?.target.checked) {
+                        handleDraftChange(draftFilter.id, [
+                          ...currentSelected,
+                          item
+                        ]);
+                      } else {
+                        handleDraftChange(
+                          draftFilter.id,
+                          currentSelected.filter(
+                            (selected) => selected.id !== item.id
+                          )
+                        );
+                      }
+                    }
+                  },
+                  item.id
+                ))
+              },
+              draftFilter.id
+            );
+          } else {
+            const hasActiveSearch = searchValues[draftFilter.id] && searchValues[draftFilter.id].length > 0;
+            return /* @__PURE__ */ jsxs(
+              Combobox,
+              {
+                items: multiSelectFilter.items,
+                selectedItems: draftMultiSelectFilter.selectedItems || [],
+                onChange: (selectedItems) => handleDraftChange(draftFilter.id, selectedItems),
+                itemToString: (item) => item?.label ?? "",
+                itemToKey: (item) => item?.id ?? "",
+                disableFilter: multiSelectFilter.hasSearch,
+                multiple: true,
+                disableCloseOnSelectItem: !hasActiveSearch,
+                children: [
+                  multiSelectFilter.hasSearch ? /* @__PURE__ */ jsx(
+                    Combobox.SearchField,
+                    {
+                      label: multiSelectFilter.label,
+                      prefix: { icon: { svg: SvgSearch } },
+                      placeholder: "Search...",
+                      size: "small",
+                      value: searchValues[draftFilter.id] || "",
+                      onChange: (e) => {
+                        const searchValue = e.target.value;
+                        setSearchValues((prev) => ({
+                          ...prev,
+                          [draftFilter.id]: searchValue
+                        }));
+                        multiSelectFilter.onSearch?.(searchValue);
+                      },
+                      onClear: () => {
+                        setSearchValues((prev) => ({
+                          ...prev,
+                          [draftFilter.id]: ""
+                        }));
+                        handleDraftChange(draftFilter.id, []);
+                        multiSelectFilter.onSearchClear?.();
+                      },
+                      "data-anv": "filter-drawer-combobox-search"
+                    }
+                  ) : /* @__PURE__ */ jsx(
+                    Combobox.SelectTrigger,
+                    {
+                      label: multiSelectFilter.label,
+                      placeholder: "Select options...",
+                      size: "small"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(Combobox.Content, { children: ({ items }) => /* @__PURE__ */ jsx(Combobox.List, { style: { padding: 0 }, children: items.map((item, i) => /* @__PURE__ */ jsx(Combobox.Item, { item, index: i, children: item.label }, item.id)) }) })
+                ]
+              },
+              draftFilter.id
+            );
+          }
+        }
+        case "date": {
+          return /* @__PURE__ */ jsx(
+            DateFieldSingle,
+            {
+              label: draftFilter.label,
+              value: draftFilter.value,
+              onChange: (change) => {
+                handleDraftChange(draftFilter.id, change.date);
+              },
+              mode: draftFilter.mode
+            },
+            draftFilter.id
+          );
+        }
+        case "dateRange": {
+          return /* @__PURE__ */ jsx(
+            DateFieldRange,
+            {
+              label: draftFilter.label,
+              value: draftFilter.value,
+              onChange: (change) => {
+                handleDraftChange(draftFilter.id, {
+                  startDate: change.startDate,
+                  endDate: change.endDate
+                });
+              },
+              mode: draftFilter.mode
+            },
+            draftFilter.id
+          );
+        }
+        default:
+          return null;
+      }
+    }),
+    [draftFilters, filters, searchValues, handleDraftChange]
+  );
+  const applyFiltering = () => {
+    draftFilters.forEach((draftFilter) => {
+      switch (draftFilter.type) {
+        case "boolean":
+          updateFilter(draftFilter.id, draftFilter.checked, false);
+          break;
+        case "singleSelect":
+          updateFilter(
+            draftFilter.id,
+            draftFilter.selectedItem,
+            false
+          );
+          break;
+        case "multiSelect":
+          updateFilter(
+            draftFilter.id,
+            draftFilter.selectedItems,
+            false
+          );
+          break;
+        case "date":
+        case "dateRange":
+        case "custom":
+          updateFilter(draftFilter.id, draftFilter.value, false);
+          break;
+      }
+    });
+    onFilterChange?.(draftFilters);
+    setOpen(false);
+  };
+  const handleCancel = () => {
+    setOpen(false);
+  };
+  const hasHiddenActiveFilters = activeFiltersCount > 0;
+  const triggerClasses = cx(
+    styles["filter-button-trigger"],
+    styles["filter-drawer-trigger"],
+    {
+      [styles["filter-drawer-trigger--chipped"]]: hasHiddenActiveFilters
+    }
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      ButtonToggle,
+      {
+        "data-anv": "filter-group-drawer-trigger",
+        icon: { before: SvgTune },
+        onClick: () => setOpen(true),
+        className: triggerClasses,
+        checked: open,
+        size: toolbarSize,
+        children: [
+          "Filters",
+          hasHiddenActiveFilters && /* @__PURE__ */ jsx(
+            Chip,
+            {
+              size: "small",
+              color: "#0265DC",
+              label: activeFiltersCount.toString()
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      Drawer,
+      {
+        "data-anv": "filter-group-drawer",
+        "data-testid": "filter-group-drawer",
+        open,
+        onClose: () => setOpen(false),
+        children: [
+          /* @__PURE__ */ jsx(Drawer.Content, { children: /* @__PURE__ */ jsx(Flex, { direction: "column", gap: 6, grow: 1, children: filterForm }) }),
+          /* @__PURE__ */ jsx(Drawer.Footer, { children: /* @__PURE__ */ jsxs(
+            Flex,
+            {
+              justifyContent: hasActiveDraftFilters ? "space-between" : "flex-end",
+              grow: 1,
+              children: [
+                hasActiveDraftFilters && /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    appearance: "ghost",
+                    icon: { before: SvgClose },
+                    onClick: clearDraftFilters,
+                    children: "Clear All Filters"
+                  }
+                ),
+                /* @__PURE__ */ jsxs(Flex, { gap: "3", children: [
+                  /* @__PURE__ */ jsx(Button, { onClick: handleCancel, children: "Cancel" }),
+                  /* @__PURE__ */ jsx(Button, { appearance: "primary", onClick: applyFiltering, children: "Apply" })
+                ] })
+              ]
+            }
+          ) })
+        ]
+      }
+    )
+  ] });
+};
+
+const FilterBar = forwardRef(
+  function FilterBarInner(props, ref) {
+    const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
+    const {
+      filters: initialFilters,
+      onFilterChange,
+      controlledFiltering = false,
+      associatedContent,
+      size = "xsmall",
+      overflow = "wrap",
+      className,
+      style,
+      onKeyDown,
+      ...rest
+    } = componentProps;
+    const [filters, setFilters] = useState(initialFilters);
+    const [hiddenFilters, setHiddenFilters] = useState([]);
+    const filterBarRef = useRef(null);
+    const containerQuery = useContainerQuery(filterBarRef);
+    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 = existingFiltersMap.get(newFilter.id);
+          if (!existingFilter) {
+            return newFilter;
+          }
+          if (!hasFilterSelectionChanged(existingFilter, newFilter)) {
+            return preserveFilterState(newFilter, existingFilter);
+          }
+          return newFilter;
+        });
+      });
+    }, [initialFilters]);
+    const updateFilter = useCallback(
+      (filterId, value, submit) => {
+        setFilters((prevFilters) => {
+          const updatedFilters = updateSingleFilter(
+            prevFilters,
+            filterId,
+            value
+          );
+          if (submit) {
+            onFilterChange?.(updatedFilters);
+          }
+          return updatedFilters;
+        });
+      },
+      [onFilterChange]
+    );
+    const addHiddenFilter = useCallback((filter) => {
+      setHiddenFilters((prev) => [...prev, filter]);
+    }, []);
+    const removeHiddenFilter = useCallback((filter) => {
+      setHiddenFilters((prev) => prev.filter((f) => f.id !== filter.id));
+    }, []);
+    const clearAllFilters = () => {
+      const resetAllFilters = resetFilters(filters);
+      setFilters(resetAllFilters);
+      onFilterChange?.(resetAllFilters);
+      requestAnimationFrame(() => {
+        if (filterBarRef.current) {
+          const firstFocusable = filterBarRef.current.querySelector(
+            'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+          );
+          if (firstFocusable) {
+            firstFocusable.focus();
+          }
+        }
+      });
+    };
+    const hasActiveFilters = checkActiveFilters(filters);
+    const filterGroupControls = filters.map((filter) => {
+      switch (filter.type) {
+        case "boolean":
+          return /* @__PURE__ */ jsx(
+            FilterToggleButton,
+            {
+              id: filter.id,
+              checked: filter.checked,
+              onClick: () => {
+                updateFilter(filter.id, !filter.checked, true);
+              },
+              children: filter.label
+            },
+            filter.id
+          );
+        case "singleSelect":
+        case "multiSelect":
+          return /* @__PURE__ */ jsx(
+            FilterButton,
+            {
+              filter,
+              className: styles["filter-select-content"]
+            },
+            filter.id
+          );
+        case "custom":
+        case "date":
+        case "dateRange":
+          return /* @__PURE__ */ jsx(FilterButton, { filter }, filter.id);
+        default:
+          return null;
+      }
+    });
+    const toolbarContextValue = useMemo(
+      () => ({
+        overflowItems: [],
+        addItem: () => {
+        },
+        removeItem: () => {
+        },
+        toolbarRef: filterBarRef,
+        overflow,
+        size
+      }),
+      [overflow, size]
+    );
+    const filterGroupContextValue = useMemo(
+      () => ({
+        filterGroupRef: filterBarRef,
+        filters,
+        updateFilter,
+        onFilterChange,
+        controlledFiltering,
+        associatedContent,
+        hiddenFilters,
+        addHiddenFilter,
+        removeHiddenFilter
+      }),
+      [
+        filterBarRef,
+        filters,
+        updateFilter,
+        onFilterChange,
+        controlledFiltering,
+        associatedContent,
+        hiddenFilters,
+        addHiddenFilter,
+        removeHiddenFilter
+      ]
+    );
+    useEffect(() => {
+      if (filterBarRef.current) {
+        updateToolbarItemsTabIndex(filterBarRef.current);
+      }
+    }, [filters]);
+    const handleKeyDown = useCallback(
+      (event) => {
+        if (filterBarRef.current) {
+          handleToolbarKeyDown(event, filterBarRef.current);
+        }
+        onKeyDown?.(event);
+      },
+      [onKeyDown]
+    );
+    const styleCombined = {
+      ...style,
+      ...layoutStyles
+    };
+    return /* @__PURE__ */ jsx(ToolbarContext.Provider, { value: toolbarContextValue, children: /* @__PURE__ */ jsx(FilterGroupContext.Provider, { value: filterGroupContextValue, children: /* @__PURE__ */ jsx(
+      Flex,
+      {
+        ref: useMergeRefs([filterBarRef, ref]),
+        role: "toolbar",
+        "aria-label": `Filters for ${associatedContent}. Use arrow keys to navigate through filter controls.`,
+        "aria-orientation": "horizontal",
+        onKeyDown: handleKeyDown,
+        alignItems: "center",
+        gap: 1,
+        wrap: overflow === "collapse" ? "nowrap" : "wrap",
+        className,
+        style: styleCombined,
+        "data-anv": "filter-bar",
+        ...rest,
+        children: /* @__PURE__ */ jsxs(
+          Flex,
+          {
+            alignItems: "center",
+            gap: 1,
+            wrap: overflow === "collapse" ? "nowrap" : "wrap",
+            grow: 1,
+            "data-anv": "toolbar-content",
+            children: [
+              showInlineFilters && filterGroupControls,
+              /* @__PURE__ */ jsx(FilterDrawer, {}),
+              showInlineFilters && hasActiveFilters && /* @__PURE__ */ jsx(FilterItemWrapper, { children: /* @__PURE__ */ jsx(
+                Button,
+                {
+                  appearance: "ghost",
+                  size,
+                  className: styles["filter-button-trigger"],
+                  icon: {
+                    before: SvgClose
+                  },
+                  onClick: clearAllFilters,
+                  children: "Clear Filters"
+                }
+              ) })
+            ]
+          }
+        )
+      }
+    ) }) });
+  }
+);
+FilterBar.displayName = "FilterBar";
+
+export { FilterBar as F };
+//# sourceMappingURL=FilterBar-BUfajdQU.js.map