@servicetitan/anvil2 3.0.2 → 3.0.4

package/dist/FilterBar-kVue-bVK.js

@@ -1,1442 +0,0 @@
-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-Ch0SH4oH.js';
-import { B as Button } from './Button-Bnt8XUI7.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-DBn3KRak.js';
-import { t as tabbable } from './usePopoverTransitionStates-B1opfxxn.js';
-import { L as Listbox } from './Listbox-BBrsMfO3.js';
-import { L as ListView } from './ListView-CYkuvkAy.js';
-import { S as SearchField } from './SearchField-BplvDpBG.js';
-import { F as Flex } from './Flex-DOUtHiPi.js';
-import { u as useDateFieldSingleConversion, a as useDateFieldSingleState, M as MaskedDateInput, b as DateFieldSingleCalendar, D as DateFieldSingle } from './DateFieldSingle-JOEy4kSL.js';
-import { u as useDateFieldRangeConversion, a as useDateFieldRangeState, M as MaskedDateRangeInput, b as DateFieldRangeCalendar, D as DateFieldRange } from './DateFieldRange-Ci-OHK6g.js';
-import { c as cx } from './index-De1g9FRV.js';
-import { P as Popover } from './AiMark-DiMotaq3.js';
-import { a as SvgSearch } from './SearchField-BKJOW-vI.js';
-import { C as Checkbox } from './Checkbox-lSwl_u26.js';
-import { R as Radio } from './Radio-DJ6KgfcS.js';
-import { C as Combobox } from './Combobox-BqhvHG9H.js';
-import { B as ButtonToggle } from './ButtonToggle-Ct9_5bhC.js';
-import { D as Drawer } from './Drawer-CouIrQ8u.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-kVue-bVK.js.map