@servicetitan/anvil2 1.45.2 → 1.46.1

package/dist/Toolbar.css

@@ -11,17 +11,24 @@ button[data-anv=toolbar-select] {
 /* REVERT LAYER BUGFIX END */
 /* -- Toolbar Base */
 @layer base {
-  ._toolbar_7lbdr_13 {
-    gap: 0.75rem;
-  }
-  ._toolbar_7lbdr_13[aria-orientation=vertical] {
+  ._toolbar_bslcr_13[aria-orientation=vertical] {
     height: 100%;
     max-height: inherit;
   }
-  ._toolbar-content_7lbdr_20 {
-    gap: 0.25rem;
+  ._toolbar-outline-spacer_bslcr_17:not(:has([data-anv=toolbar-filter-group], [data-anv=toolbar-control-group])) {
+    padding: 0.25rem;
+  }
+  ._toolbar-content_bslcr_20 {
+    align-items: flex-start;
+    width: 100%;
   }
-  ._toolbar-overflow-content_7lbdr_23 {
+  ._overflow-wrap_bslcr_24 {
+    flex-wrap: wrap;
+  }
+  ._overflow-collapse_bslcr_27 {
+    flex-wrap: nowrap;
+  }
+  ._toolbar-overflow-content_bslcr_30 {
     display: flex;
     flex-direction: column;
     gap: 0.75rem;
@@ -29,54 +36,158 @@ button[data-anv=toolbar-select] {
     padding: 0.5rem !important;
     margin: 0 !important;
   }
-  ._toolbar-overflow-content_7lbdr_23 ._toolbar-button-item_7lbdr_31 {
+  ._toolbar-overflow-content_bslcr_30 ._toolbar-button-item_bslcr_38 {
     width: 100%;
   }
 }
 /* -- Toolbar Overflow and Orientation States */
 @layer state {
-  [aria-orientation=vertical] ._toolbar-item_7lbdr_37,
-  [aria-orientation=vertical] ._toolbar-button-item_7lbdr_31 {
+  [aria-orientation=vertical] ._toolbar-item_bslcr_44,
+  [aria-orientation=vertical] ._toolbar-button-item_bslcr_38 {
     width: 100%;
   }
-  ._overflow-collapse_7lbdr_41 {
+  ._overflow-collapse_bslcr_27 {
     overflow: hidden;
   }
-  [aria-orientation=horizontal] ._overflow-collapse_7lbdr_41 ._toolbar-item_7lbdr_37 {
-    padding-block: 0.25rem;
-  }
-  [aria-orientation=horizontal] ._overflow-collapse_7lbdr_41 ._toolbar-item_7lbdr_37:first-of-type {
-    padding-inline-start: 0.25rem;
-  }
-  [aria-orientation=vertical] ._overflow-collapse_7lbdr_41 {
+  [aria-orientation=vertical] ._overflow-collapse_bslcr_27 {
     height: 100%;
   }
-  [aria-orientation=vertical] ._overflow-collapse_7lbdr_41 ._toolbar-item_7lbdr_37:first-of-type {
-    padding-block-start: 0.25rem;
-  }
 }
 /* -- Toolbar Items Component Overrides */
 @layer application {
-  ._toolbar-button-item_7lbdr_31 {
+  ._toolbar-button-item_bslcr_38 {
     white-space: nowrap;
     font-size: 0.75rem;
     min-width: -moz-min-content;
     min-width: min-content;
     padding: 0.375rem;
   }
-  ._toolbar-button-toggle-item_7lbdr_65[aria-pressed=false] {
+  ._toolbar-button-toggle-item_bslcr_63[aria-pressed=false] {
     border-color: var(--button-primary-foreground-color, #ffffff);
   }
-  ._toolbar-button-toggle-item_7lbdr_65[aria-pressed=true] {
+  ._toolbar-button-toggle-item_bslcr_63[aria-pressed=true] {
     border-color: var(--background-color-primary-subdued, #E0F2FF);
   }
-  ._toolbar-overflow-trigger_7lbdr_71 {
+  ._toolbar-overflow-trigger_bslcr_69 {
     padding: 0.5rem;
   }
-  ._toolbar-overflow-trigger_7lbdr_71[aria-expanded=true] {
+  ._toolbar-overflow-trigger_bslcr_69[aria-expanded=true] {
     --button-background-color: var(--button-ghost-background-color-hover, rgba(20, 20, 20, 0.0784313725));
   }
-  [aria-orientation=vertical] ._toolbar-overflow-trigger_7lbdr_71 {
-    width: 100%;
+}@layer starter, reset, base, state, application;
+
+button[data-anv=toolbar-button],
+a[data-anv=toolbar-button-link],
+button[data-anv=toolbar-button-toggle],
+button[data-anv=filter-group-drawer-trigger],
+button[data-anv=toolbar-boolean-filter],
+button[data-anv=toolbar-select] {
+  all: revert-layer;
+  line-height: 1rem;
+}
+
+[data-anv=filter-group-drawer] > section,
+[data-anv=filter-button-apply],
+[data-anv=filter-button-content] {
+  all: revert-layer;
+}
+
+@layer base {
+  ._filter-button-trigger_320zf_18 {
+    font-size: 0.75rem;
+    white-space: nowrap;
+  }
+  ._filter-button-content_320zf_22 {
+    min-width: 12.5rem;
+    max-width: 22.5rem;
+  }
+  ._filter-drawer-trigger_320zf_26 {
+    position: sticky;
+    right: 0;
+    border: none;
+  }
+  ._filter-button-buttons_320zf_31 {
+    padding-block-start: 1rem;
+  }
+  [data-anv=toolbar-filter-group] {
+    container-type: inline-size;
+  }
+  ._filter-item_320zf_37 {
+    max-height: 1.75rem;
+  }
+  @container (max-width: primitive.$breakpoint-md) {
+    ._filter-item_320zf_37 {
+      display: none;
+    }
+  }
+  ._filter-select-search_320zf_45 {
+    padding-block-end: 1rem;
+  }
+}
+@layer application {
+  ._filter-button-trigger_320zf_18 {
+    max-height: 1.75rem;
+    padding: 0.3125rem 0.375rem;
+  }
+  ._filter-button-trigger_320zf_18[aria-expanded=true]:not(._filter-button-trigger--selected_320zf_54) {
+    --button-background-color: var(--button-ghost-background-color-hover, rgba(20, 20, 20, 0.0784313725));
+  }
+  ._filter-button-trigger--selected_320zf_54 {
+    --button-background-color: var(--background-color-primary-subdued, #E0F2FF);
+    color: var(--foreground-color-primary, #0265DC);
+  }
+  ._filter-drawer-trigger_320zf_26 {
+    padding-inline: 0.5rem;
+  }
+  ._filter-drawer-trigger--chipped_320zf_64 {
+    background-color: var(--background-color-primary-subdued, #E0F2FF);
+    color: var(--foreground-color-primary, #0265DC);
+    min-width: -moz-max-content;
+    min-width: max-content;
+  }
+}@layer starter, reset, base, state, application;
+@layer base {
+  ._toolbar-control-group_13h8p_2 {
+    overflow: hidden;
+    flex: var(--toolbar-group-flex);
+    flex-wrap: var(--toolbar-group-wrap, wrap);
+    padding-block: 0.5rem;
+    padding-inline: 0.25rem;
+  }
+  ._toolbar-control-group_13h8p_2[data-anv=toolbar-filter-group] {
+    min-width: 5.625rem;
+  }
+  ._toolbar-control-group_13h8p_2[data-anv=toolbar-control-group] {
+    justify-content: flex-end;
+  }
+  [data-anv=toolbar-content]:has(._toolbar-control-group_13h8p_2) {
+    flex-wrap: nowrap;
+  }
+  [data-anv=toolbar-content]:has(._toolbar-control-group_13h8p_2)[data-overflow=collapse] > [data-anv=toolbar-filter-group] {
+    --toolbar-group-flex: 1 0 0;
+    --toolbar-group-wrap: nowrap;
+  }
+  [data-anv=toolbar-content]:has(._toolbar-control-group_13h8p_2)[data-overflow=collapse] > [data-anv=toolbar-control-group] {
+    --toolbar-group-flex: 0 1 auto;
+    --toolbar-group-wrap: nowrap;
+  }
+  [data-anv=toolbar-content]:has(._toolbar-control-group_13h8p_2)[data-overflow=wrap] > [data-anv=toolbar-filter-group] {
+    --toolbar-group-flex: 1 0 0;
+  }
+  [data-anv=toolbar-content]:has(._toolbar-control-group_13h8p_2)[data-overflow=wrap] > [data-anv=toolbar-control-group] {
+    --toolbar-group-flex: 0 1 auto;
+  }
+}@layer starter, reset, base, state, application;
+@layer application {
+  ._toolbar-search-field-container_9jh3s_2 {
+    padding-block: 0.5rem;
+  }
+  ._toolbar-search-field_9jh3s_2 {
+    height: 1.75rem;
+    max-width: 12.5rem;
+    padding-inline-start: 0.25rem;
+  }
+  ._toolbar-search-field_9jh3s_2 input {
+    padding-block: 0;
   }
 }

package/dist/Toolbar.d.ts

@@ -1,6 +1,6 @@
-export * from './components/Toolbar/index'
+export * from './beta/components/Toolbar/index'
 export {}
-import _default from './components/Toolbar/index'
+import _default from './beta/components/Toolbar/index'
 export default _default
-export * from './components/Toolbar/index'
+export * from './beta/components/Toolbar/index'
 export {}

package/dist/Toolbar.js

@@ -1,2 +1,2 @@
-export { T as Toolbar, a as ToolbarButton, c as ToolbarButtonLink, b as ToolbarButtonToggle, e as ToolbarElement, d as ToolbarSelect, T as default } from './Toolbar-DK7tXy_W.js';
+export { T as Toolbar, a as ToolbarButton, c as ToolbarButtonLink, b as ToolbarButtonToggle, e as ToolbarControlGroup, g as ToolbarElement, f as ToolbarSearchField, d as ToolbarSelect, T as default } from './Toolbar-D4zuUFhb.js';
 //# sourceMappingURL=Toolbar.js.map

package/dist/assets/icons/st/gnav_legacy_search_filled.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M22.395 20.801c.29-.185.486-.488.567-.86.08-.371.034-.72-.15-1.01l-3.26-5.16a6.2 6.2 0 0 0 1.225-1.557c.324-.604.578-1.22.717-1.859.404-1.847.104-3.579-.913-5.17-1.006-1.592-2.427-2.592-4.265-3.01q-2.774-.61-5.132.906c-1.595 1.011-2.6 2.452-3.005 4.3-.416 1.836-.104 3.567.902 5.17 1.005 1.58 2.427 2.592 4.276 2.998a6.6 6.6 0 0 0 1.965.151 6.2 6.2 0 0 0 1.953-.464l3.26 5.147c.184.29.462.5.843.581.37.082.705.023 1.017-.163M14.43 4.503a1 1 0 0 0 .142 1.995 2.12 2.12 0 0 1 2.267 1.968 1 1 0 0 0 1.995-.131 4.12 4.12 0 0 0-4.404-3.832" clip-rule="evenodd"/><path d="M5.5 4h-3a1.5 1.5 0 1 0 0 3h3a1.5 1.5 0 1 0 0-3m0 7h-3a1.5 1.5 0 0 0 0 3h3a1.5 1.5 0 0 0 0-3m6 7h-9a1.5 1.5 0 0 0 0 3h9a1.5 1.5 0 0 0 0-3"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M4.9 7.701H1.225a1.231 1.231 0 0 1 0-2.46H4.9a1.231 1.231 0 0 1 0 2.46m0 3.691H1.225a1.231 1.231 0 0 0 0 2.46H4.9a1.231 1.231 0 0 0 0-2.46m17.002 7.739-3.822-3.839a6.08 6.08 0 0 1-3.674 1.01c-2.904-.136-5.39-2.412-5.782-5.304a6.2 6.2 0 0 1 1.827-5.27 6.14 6.14 0 0 1 5.314-1.632c2.389.406 4.373 2.276 4.9 4.65a6.17 6.17 0 0 1-.857 4.8l3.834 3.85a1.229 1.229 0 0 1-1.74 1.735m-3.528-8.97c0-2.03-1.653-3.69-3.674-3.69s-3.675 1.66-3.675 3.69 1.653 3.692 3.675 3.692c2.02 0 3.674-1.661 3.674-3.691M1.225 20.005h9.8a1.231 1.231 0 0 0 0-2.46h-9.8a1.231 1.231 0 0 0 0 2.46"/><path fill-rule="evenodd" d="M23.652 19.14c.218-.22.33-.523.33-.865-.003-.34-.111-.638-.329-.856L19.79 13.53c.341-.49.601-1.03.77-1.603.167-.593.27-1.182.267-1.77-.006-1.697-.606-3.157-1.808-4.354-1.192-1.2-2.632-1.799-4.325-1.807Q12.144 4 10.372 5.79C9.17 6.987 8.57 8.446 8.575 10.145c-.007 1.69.604 3.147 1.798 4.356 1.19 1.19 2.633 1.8 4.333 1.795a6 6 0 0 0 1.752-.25 5.6 5.6 0 0 0 1.622-.788l3.86 3.877c.218.219.502.348.852.345.34 0 .623-.117.86-.34M13.494 6.403a.898.898 0 0 0 .514 1.721 1.903 1.903 0 0 1 2.37 1.284.898.898 0 0 0 1.724-.504 3.7 3.7 0 0 0-4.608-2.501" clip-rule="evenodd"/></svg>

package/dist/assets/icons/st/gnav_legacy_search_outline.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="m22.812 18.95-3.276-5.157a6.2 6.2 0 0 0 1.258-1.573c.334-.59.565-1.202.715-1.85.403-1.861.103-3.584-.888-5.168-1.015-1.596-2.445-2.614-4.28-3.018-1.845-.417-3.563-.128-5.155.89-1.591 1.018-2.595 2.44-3.01 4.29-.404 1.85-.115 3.573.888 5.168 1.015 1.596 2.434 2.602 4.279 3.018a7.1 7.1 0 0 0 1.984.14 5.9 5.9 0 0 0 1.937-.452l3.264 5.146c.185.3.473.497.842.578.38.08.727.034 1.015-.15.3-.197.496-.486.577-.856.08-.382.034-.729-.15-1.018zm-3.98-9.181c-.241 1.121-.841 1.977-1.798 2.59-.958.601-1.996.786-3.103.52-1.118-.242-1.972-.844-2.583-1.803-.612-.96-.785-1.99-.53-3.11.253-1.11.853-1.967 1.81-2.58.957-.612 1.984-.786 3.102-.531 1.108.242 1.961.844 2.572 1.803.612.96.785 2 .53 3.11M5.5 4h-3a1.5 1.5 0 1 0 0 3h3a1.5 1.5 0 1 0 0-3m0 7h-3a1.5 1.5 0 0 0 0 3h3a1.5 1.5 0 0 0 0-3m6 7h-9a1.5 1.5 0 0 0 0 3h9a1.5 1.5 0 0 0 0-3"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M4.9 7.697H1.225a1.231 1.231 0 0 1 0-2.46H4.9a1.231 1.231 0 0 1 0 2.46m0 3.69H1.225a1.231 1.231 0 0 0 0 2.461H4.9a1.231 1.231 0 0 0 0-2.46m17.002 7.74-3.822-3.84a6.08 6.08 0 0 1-3.674 1.01c-2.904-.136-5.39-2.412-5.782-5.303a6.2 6.2 0 0 1 1.827-5.27 6.13 6.13 0 0 1 5.314-1.632c2.389.406 4.373 2.276 4.9 4.65a6.17 6.17 0 0 1-.857 4.799l3.834 3.85a1.23 1.23 0 0 1-1.74 1.736m-3.528-8.97c0-2.03-1.653-3.69-3.674-3.69s-3.675 1.66-3.675 3.69 1.653 3.691 3.675 3.691c2.02 0 3.674-1.66 3.674-3.69M1.225 20h9.8a1.231 1.231 0 0 0 0-2.46h-9.8a1.231 1.231 0 0 0 0 2.46"/></svg>

package/dist/beta/components/Toolbar/Filters/FilterButton.d.ts

@@ -0,0 +1,30 @@
+import { ReactNode } from 'react';
+import { Filter } from './internal/types';
+/**
+ * Props for the FilterButton component
+ */
+interface FilterButtonProps {
+    /** Filter configuration object */
+    filter: Filter;
+    /** Optional child content for non-custom filter types */
+    children?: ReactNode;
+    /** Optional class name for the popover content */
+    className?: string;
+}
+/**
+ * FilterButton component provides a popover interface for filter selection.
+ * Handles both controlled and uncontrolled filter updates.
+ * Built into FilterGroup for single-select, multi-select, date, and date range filter rendering.
+ *
+ * Features:
+ * - Maintains draft state for controlled filters
+ * - Updates immediately for uncontrolled filters
+ * - Provides Apply and Cancel actions in controlled mode
+ * - Supports keyboard navigation and accessibility
+ * - Renders custom, single-select, multi-select, date, and date range filter types
+ * - Integrates with FilterGroup context for state management
+ * - Displays appropriate icons for date-based filters
+ * - Shows formatted date values in button labels
+ */
+export declare const FilterButton: ({ filter, children, className, }: FilterButtonProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/beta/components/Toolbar/Filters/FilterDateRange.d.ts

@@ -0,0 +1,37 @@
+import { DateRangeFilter } from './internal/types';
+/**
+ * Props for the FilterDateRange component
+ */
+interface FilterDateRangeProps {
+    /**
+     * The date range filter configuration object containing mode and other settings
+     */
+    filter: DateRangeFilter;
+    /**
+     * The current draft value for the date range filter with start and end dates in ISO 8601 format
+     */
+    draftValue: {
+        startDate: string | null;
+        endDate: string | null;
+    } | null;
+    /**
+     * Callback function to update the draft value when the date range changes
+     */
+    onDraftChange: (value: {
+        startDate: string | null;
+        endDate: string | null;
+    } | null) => void;
+}
+/**
+ * FilterDateRange component for selecting a date range in toolbar filters.
+ *
+ * Features:
+ * - Renders a masked date range input field with format validation
+ * - Provides calendar popup for date range selection
+ * - Integrates with toolbar filter state management
+ * - Supports controlled and uncontrolled date range selection
+ * - Maintains draft state for filter changes
+ * - Handles start and end date selection independently
+ */
+export declare const FilterDateRange: ({ filter, draftValue, onDraftChange, }: FilterDateRangeProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/beta/components/Toolbar/Filters/FilterDateSingle.d.ts

@@ -0,0 +1,30 @@
+import { DateFilter } from './internal/types';
+/**
+ * Props for the FilterDateSingle component
+ */
+interface FilterDateSingleProps {
+    /**
+     * The date filter configuration object containing mode and other settings
+     */
+    filter: DateFilter;
+    /**
+     * The current draft value for the date filter in ISO 8601 format
+     */
+    draftValue: string | null;
+    /**
+     * Callback function to update the draft value when the date changes
+     */
+    onDraftChange: (value: string | null) => void;
+}
+/**
+ * FilterDateSingle component for selecting a single date in toolbar filters.
+ *
+ * Features:
+ * - Renders a masked date input field with format validation
+ * - Provides calendar popup for date selection
+ * - Integrates with toolbar filter state management
+ * - Supports controlled and uncontrolled date selection
+ * - Maintains draft state for filter changes
+ */
+export declare const FilterDateSingle: ({ filter, draftValue, onDraftChange, }: FilterDateSingleProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/beta/components/Toolbar/Filters/FilterDrawer.d.ts

@@ -0,0 +1,15 @@
+/**
+ * FilterDrawer component provides a drawer interface for filter selection.
+ * Always operates in controlled mode with batch updates.
+ * Built into FilterGroup for mobile and overflow filter editing.
+ *
+ * Features:
+ * - Shows all available filters in a side panel
+ * - Maintains separate draft state for all filters
+ * - Updates filters only when Apply is clicked
+ * - Provides Clear All functionality
+ * - Supports boolean, custom, single-select, multi-select, date, and date range filter types
+ * - Integrates with FilterGroup context for state management
+ * - Handles date and date range filters with appropriate input components
+ */
+export declare const FilterDrawer: () => import("react/jsx-runtime").JSX.Element;

package/dist/beta/components/Toolbar/Filters/FilterGroup.d.ts

@@ -0,0 +1,25 @@
+import { ComponentPropsWithoutRef } from 'react';
+import { Filter } from './internal/types';
+import { LayoutUtilProps } from '../../../../types';
+/**
+ * Props for the FilterGroup component
+ *
+ * @extends ComponentPropsWithoutRef<"div">
+ * @extends LayoutUtilProps
+ */
+export type FilterGroupProps = ComponentPropsWithoutRef<"div"> & LayoutUtilProps & {
+    /** Array of filter objects */
+    filters: Filter[];
+    /** Callback function when filters change */
+    onFilterChange?: (filters: Filter[]) => void;
+    /** Whether the filters are submission is controlled via an apply button */
+    controlledFiltering?: boolean;
+};
+export declare const FilterGroup: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & LayoutUtilProps & {
+    /** Array of filter objects */
+    filters: Filter[];
+    /** Callback function when filters change */
+    onFilterChange?: (filters: Filter[]) => void;
+    /** Whether the filters are submission is controlled via an apply button */
+    controlledFiltering?: boolean;
+} & import('react').RefAttributes<HTMLDivElement>>;

package/dist/beta/components/Toolbar/Filters/FilterItemWrapper.d.ts

@@ -0,0 +1,24 @@
+import { Filter } from './internal/types';
+/**
+ * Props for the FilterItemWrapper component
+ */
+type FilterItemWrapperProps = {
+    /**
+     * Optional filter object. If provided, visibility changes will be tracked in FilterGroupContext.
+     * If not provided, only basic visibility tracking will be used.
+     */
+    filter?: Filter;
+    /** The content to render inside the wrapper */
+    children: React.ReactNode;
+};
+/**
+ * FilterItemWrapper extends ToolbarItemWrapper to handle filter-specific visibility.
+ * Uses FilterGroupContext to track hidden filters instead of overflow menu.
+ * Built into FilterButton and other filter components for consistent overflow handling.
+ *
+ * Features:
+ * - Wraps filter controls for consistent overflow and visibility handling
+ * - Integrates with FilterGroupContext to track hidden filters
+ */
+export declare const FilterItemWrapper: ({ filter, children, }: FilterItemWrapperProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/beta/components/Toolbar/Filters/FilterSelect.d.ts

@@ -0,0 +1,29 @@
+import { MultiSelectFilter, SingleSelectFilter } from './internal/types';
+/**
+ * Props for the FilterSelect component
+ */
+interface FilterSelectProps<Item extends {
+    id: string;
+    label: string;
+}> {
+    /** The filter configuration object */
+    filter: SingleSelectFilter<Item> | MultiSelectFilter<Item>;
+    /** The current draft value for the filter */
+    draftValue: Item | Item[] | undefined;
+    /** Callback to update the draft value */
+    onDraftChange: (value: Item | Item[] | undefined) => void;
+}
+/**
+ * FilterSelect component renders a Listbox or ListView for single or multi-select filters.
+ * Built into FilterButton and FilterDrawer for filter selection UI.
+ *
+ * Features:
+ * - Renders a Listbox for single select filters
+ * - Renders a ListView for multi select filters
+ * - Supports search field for filtering options
+ */
+export declare const FilterSelect: <Item extends {
+    id: string;
+    label: string;
+}>({ filter, draftValue, onDraftChange, }: FilterSelectProps<Item>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/beta/components/Toolbar/Filters/FilterToggleButton.d.ts

@@ -0,0 +1,24 @@
+import { ToolbarButtonToggleProps } from '../ToolbarButtonToggle';
+/**
+ * Props for the FilterToggleButton component
+ *
+ * @extends Omit<ToolbarButtonToggleProps, "checked">
+ */
+export type FilterToggleButtonProps = Omit<ToolbarButtonToggleProps, "checked"> & {
+    /** Unique identifier for the filter */
+    id: string;
+    /** Whether the toggle is checked */
+    checked: boolean;
+    /** The content to display inside the toggle button */
+    children: React.ReactNode;
+};
+/**
+ * FilterToggleButton wraps ToolbarButtonToggle in a FilterItemWrapper for consistent overflow behavior with other filter types.
+ * Built into FilterGroup for boolean filter rendering.
+ *
+ * Features:
+ * - Renders a toggle button for boolean filters
+ * - Integrates with FilterGroup and FilterItemWrapper for overflow handling
+ * - Supports accessibility and keyboard navigation
+ */
+export declare const FilterToggleButton: ({ id, checked, children, ...props }: FilterToggleButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/beta/components/Toolbar/Filters/internal/FilterGroupContext.d.ts

@@ -0,0 +1,40 @@
+import { RefObject } from 'react';
+import { FilterGroupProps } from '../FilterGroup';
+import { Filter, FilterValue } from './types';
+/**
+ * Context for sharing filter state and operations between FilterGroup and its children
+ *
+ * @extends FilterGroupProps
+ */
+type FilterGroupContextProps = FilterGroupProps & {
+    /** Reference to the filter group DOM element
+     *  @default { current: null }
+     */
+    filterGroupRef: RefObject<HTMLDivElement>;
+    /** Current filters array
+     *  @default []
+     */
+    filters: Filter[];
+    /** Function to update a single filter and submit if needed
+     *  @default () => {}
+     */
+    updateFilter: (filterId: string, value: FilterValue, submit: boolean) => void;
+    /** Array of filters that are currently hidden due to overflow
+     *  @default []
+     */
+    hiddenFilters: Filter[];
+    /** Function to mark a filter as hidden
+     *  @default () => {}
+     */
+    addHiddenFilter: (filter: Filter) => void;
+    /** Function to mark a filter as visible
+     *  @default () => {}
+     */
+    removeHiddenFilter: (filter: Filter) => void;
+};
+/**
+ * Context provider for filter-related operations
+ * Used to share filter state between FilterGroup and FilterDrawer
+ */
+export declare const FilterGroupContext: import('react').Context<FilterGroupContextProps>;
+export {};

package/dist/beta/components/Toolbar/Filters/internal/types.d.ts

@@ -0,0 +1,130 @@
+import { ReactNode } from 'react';
+import { DateFieldSingleProps } from '../../../../../components/DateFieldSingle';
+import { DateFieldRangeProps } from '../../../../../components/DateFieldRange';
+/**
+ * Base properties shared by all filter types
+ */
+export type BaseFilter = {
+    /** Unique identifier for the filter */
+    id: string;
+    /** Display label for the filter */
+    label: string;
+};
+/**
+ * Built-in boolean filter type
+ * Used for simple true/false filtering
+ */
+export type BooleanFilter = BaseFilter & {
+    /** Identifies this as a boolean filter */
+    type: "boolean";
+    /** Current state of the boolean filter */
+    checked: boolean;
+};
+/**
+ * Props passed to custom filter render functions
+ */
+export type FilterRenderProps<T = unknown> = {
+    /** Current value of the filter */
+    value?: T;
+    /** Callback to update the filter value */
+    onChange: (value?: T) => void;
+};
+/**
+ * Custom filter type allowing for complex filter implementations
+ */
+export type CustomFilter<T = unknown> = BaseFilter & {
+    /** Identifies this as a custom filter */
+    type: "custom";
+    /** Function to render the filter content in the button/popover */
+    buttonRender: (props: FilterRenderProps<T>) => ReactNode;
+    /** Function to render the filter content in the drawer */
+    drawerRender: (props: FilterRenderProps<T>) => ReactNode;
+    /** Current value of the custom filter */
+    value?: T;
+    /** Optional number to display in a label chip */
+    labelChipCount?: number;
+};
+/**
+ * Single select filter type using Listbox component with optional search
+ */
+export type SingleSelectFilter<Item = {
+    id: string;
+    label: string;
+}> = BaseFilter & {
+    /** Identifies this as a single select filter */
+    type: "singleSelect";
+    /** Array of items to select from */
+    items: Item[];
+    /** Currently selected item */
+    selectedItem?: Item;
+} & ({
+    /** Whether to show the search field */
+    hasSearch: true;
+    /** Required callback for search functionality when hasSearch is true */
+    onSearch: (searchTerm: string) => void;
+    /** Optional callback when search is cleared (only used when hasSearch is true) */
+    onSearchClear: () => void;
+    simpleDrawerVariant?: never;
+} | {
+    /** Whether to show the search field */
+    hasSearch?: false;
+    onSearch?: never;
+    onSearchClear?: never;
+    /** Whether to use simplified drawer rendering */
+    simpleDrawerVariant?: boolean;
+});
+/**
+ * Multi select filter type using ListView component with optional search
+ */
+export type MultiSelectFilter<Item = {
+    id: string;
+    label: string;
+}> = BaseFilter & {
+    /** Identifies this as a multi select filter */
+    type: "multiSelect";
+    /** Array of items to select from */
+    items: Item[];
+    /** Currently selected items array */
+    selectedItems: Item[] | [];
+    /** Whether to use simplified drawer rendering */
+    simpleDrawerVariant?: boolean;
+} & ({
+    /** Whether to show the search field */
+    hasSearch: true;
+    /** Current search value */
+    searchValue?: string;
+    /** Required callback for search functionality when hasSearch is true */
+    onSearch: (searchTerm: string) => void;
+    /** Optional callback when search is cleared (only used when hasSearch is true) */
+    onSearchClear: () => void;
+    simpleDrawerVariant?: never;
+} | {
+    /** Whether to show the search field */
+    hasSearch?: false;
+    searchValue?: never;
+    onSearch?: never;
+    onSearchClear?: never;
+    /** Whether to use simplified drawer rendering */
+    simpleDrawerVariant?: boolean;
+});
+/**
+ * Single date filter type using DateFieldSingle component
+ * Used for selecting a single date with calendar support
+ */
+export type DateFilter = BaseFilter & Pick<DateFieldSingleProps, "value" | "mode"> & {
+    type: "date";
+};
+/**
+ * Date range filter type using DateFieldRange component
+ * Used for selecting a date range with calendar support
+ */
+export type DateRangeFilter = BaseFilter & Pick<DateFieldRangeProps, "value" | "mode"> & {
+    type: "dateRange";
+};
+/**
+ * Union type of all available filter types
+ * Uses unknown instead of any for better type safety
+ */
+export type Filter = BooleanFilter | CustomFilter<any> | SingleSelectFilter<any> | MultiSelectFilter<any> | DateFilter | DateRangeFilter;
+/** Type representing all possible filter values */
+export type FilterValue = boolean | CustomFilter["value"] | SingleSelectFilter["selectedItem"] | MultiSelectFilter["selectedItems"] | DateFilter["value"] | DateRangeFilter["value"];