@wallarm-org/design-system 1.28.2-rc-fix-table-window-scroll-root.2 → 1.29.0

package/dist/components/FilterDropdown/FilterDropdown.d.ts

@@ -0,0 +1,58 @@
+import { type ReactNode } from 'react';
+import { type CollectionItem, type ListCollection } from '@ark-ui/react/collection';
+import type { TestableProps } from '../../utils/testId';
+import { type SelectProps } from '../Select/Select';
+import { type UseSelectSearchOptions } from '../Select/useSelectSearch';
+export interface FilterDropdownValueChangeDetails<T extends CollectionItem = CollectionItem> {
+    /** Picked values; `[]` means unset («All» in single mode). */
+    value: string[];
+    items: T[];
+}
+export interface FilterDropdownOpenChangeDetails {
+    open: boolean;
+    value: string[];
+}
+/**
+ * Select props FilterDropdown owns itself: the value model (alias and sentinel values must never
+ * reach the consumer), the highlight (reset when the query changes), and form wiring (the hidden
+ * select would submit internal values).
+ */
+type FilterDropdownOmittedSelectProps = 'collection' | 'multiple' | 'value' | 'defaultValue' | 'onValueChange' | 'onOpenChange' | 'highlightedValue' | 'defaultHighlightedValue' | 'onHighlightChange' | 'onSelect' | 'deselectable' | 'name' | 'form' | 'loading' | 'children';
+export type FilterDropdownProps<T extends CollectionItem = CollectionItem> = Omit<SelectProps<T>, FilterDropdownOmittedSelectProps> & TestableProps & {
+    /** Attribute name: trigger text in multi mode, the trigger's aria-label, «Clear {label}». */
+    label: string;
+    /**
+     * Single mode: trigger text while unset and the default text of `FilterDropdownAllOption`.
+     * @default 'All'
+     */
+    allLabel?: string;
+    /** Items to pick from. `groupBy` is supported. */
+    collection: ListCollection<T>;
+    /** Checkbox mode: several values, OR-ed, the menu stays open. */
+    multiple?: boolean;
+    /** Controlled picked values; `[]` = unset. */
+    value?: string[];
+    defaultValue?: string[];
+    onValueChange?: (details: FilterDropdownValueChangeDetails<T>) => void;
+    onOpenChange?: (details: FilterDropdownOpenChangeDetails) => void;
+    /**
+     * Item count from which the search field and (multi) the "Selected" section appear. Counts
+     * the collection's own items only.
+     * @default 8
+     */
+    searchThreshold?: number;
+    /** Overrides the default case-insensitive match on the item label. */
+    filterFn?: UseSelectSearchOptions<T>['filterFn'];
+    /**
+     * Multi mode: pin the picked values under «Selected» on top of the list (from
+     * `searchThreshold` items, hidden while searching). Render `FilterDropdownSelected` for it.
+     * @default true
+     */
+    selectedOnTop?: boolean;
+    children?: ReactNode;
+};
+export declare function FilterDropdown<T extends CollectionItem>({ label, allLabel, collection, multiple, value: valueProp, defaultValue, onValueChange, open: openProp, defaultOpen, onOpenChange, searchThreshold, filterFn, selectedOnTop, disabled, className, children, 'data-testid': testId, ...props }: FilterDropdownProps<T>): import("react").JSX.Element;
+export declare namespace FilterDropdown {
+    var displayName: string;
+}
+export {};

package/dist/components/FilterDropdown/FilterDropdown.js

@@ -0,0 +1,168 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo, useRef, useState } from "react";
+import { createListCollection } from "@ark-ui/react/collection";
+import { cn } from "../../utils/cn.js";
+import { Select } from "../Select/Select.js";
+import { useSelectSearch } from "../Select/useSelectSearch.js";
+import { FilterDropdownContext } from "./FilterDropdownContext.js";
+import { createAliasItem, createAllItem, isSpecialItem, toConsumerValue, toInternalValue } from "./lib/index.js";
+const DEFAULT_SEARCH_THRESHOLD = 8;
+const EMPTY = [];
+const FilterDropdown = ({ label, allLabel = 'All', collection, multiple = false, value: valueProp, defaultValue, onValueChange, open: openProp, defaultOpen, onOpenChange, searchThreshold = DEFAULT_SEARCH_THRESHOLD, filterFn, selectedOnTop = true, disabled = false, className, children, 'data-testid': testId, ...props })=>{
+    const [valueState, setValueState] = useState(defaultValue ?? EMPTY);
+    const value = valueProp ?? valueState;
+    const [openState, setOpenState] = useState(defaultOpen ?? false);
+    const open = openProp ?? openState;
+    const baseCollection = collection;
+    const searchOptions = useMemo(()=>({
+            filterFn: filterFn
+        }), [
+        filterFn
+    ]);
+    const { searchValue: query, onSearchChange, filteredCollection } = useSelectSearch(baseCollection, searchOptions);
+    const [snapshot, setSnapshot] = useState(value);
+    const [lockedWidth, setLockedWidth] = useState();
+    const [highlightState, setHighlightState] = useState(null);
+    const [resetHighlight, setResetHighlight] = useState(false);
+    const [prevOpen, setPrevOpen] = useState(open);
+    if (open !== prevOpen) {
+        setPrevOpen(open);
+        onSearchChange('');
+        setLockedWidth(void 0);
+        setResetHighlight(false);
+        if (open) setSnapshot(value);
+    }
+    const selectedValues = open ? snapshot : value;
+    const triggerRef = useRef(null);
+    const contentRef = useRef(null);
+    const isSearchable = baseCollection.size >= searchThreshold;
+    const isSearchActive = isSearchable && query.length > 0;
+    const showAll = !multiple && !isSearchActive;
+    const showSelected = selectedOnTop && multiple && isSearchable && !isSearchActive && selectedValues.length > 0;
+    const allItem = useMemo(()=>createAllItem(allLabel), [
+        allLabel
+    ]);
+    const groups = useMemo(()=>filteredCollection.group(), [
+        filteredCollection
+    ]);
+    const aliasItems = useMemo(()=>showSelected ? baseCollection.findMany(selectedValues).map((item)=>createAliasItem(item, baseCollection)) : [], [
+        showSelected,
+        baseCollection,
+        selectedValues
+    ]);
+    const arkCollection = useMemo(()=>createListCollection({
+            items: [
+                ...showAll ? [
+                    allItem
+                ] : [],
+                ...aliasItems,
+                ...groups.flatMap(([, items])=>items)
+            ],
+            itemToValue: (item)=>isSpecialItem(item) ? item.value : baseCollection.getItemValue(item) ?? '',
+            itemToString: (item)=>isSpecialItem(item) ? item.label : baseCollection.stringifyItem(item) ?? '',
+            isItemDisabled: (item)=>{
+                if (!isSpecialItem(item)) return baseCollection.getItemDisabled(item);
+                return item.source ? baseCollection.getItemDisabled(item.source) : false;
+            }
+        }), [
+        showAll,
+        allItem,
+        aliasItems,
+        groups,
+        baseCollection
+    ]);
+    const aliased = useMemo(()=>new Set(aliasItems.map((item)=>baseCollection.getItemValue(item.source ?? null) ?? '')), [
+        aliasItems,
+        baseCollection
+    ]);
+    const internalValue = useMemo(()=>toInternalValue(value, {
+            multiple,
+            aliased,
+            hasAll: showAll
+        }), [
+        value,
+        multiple,
+        aliased,
+        showAll
+    ]);
+    const highlightedValue = resetHighlight ? arkCollection.firstValue : highlightState;
+    const commit = (next)=>{
+        if (void 0 === valueProp) setValueState(next);
+        onValueChange?.({
+            value: next,
+            items: collection.findMany(next)
+        });
+    };
+    const clear = ()=>{
+        if (disabled || 0 === value.length) return;
+        commit([]);
+    };
+    const handleValueChange = (details)=>{
+        commit(toConsumerValue(details.value, {
+            multiple,
+            previousInternal: internalValue,
+            previousValue: value
+        }));
+    };
+    const handleOpenChange = ({ open: nextOpen })=>{
+        setOpenState(nextOpen);
+        onOpenChange?.({
+            open: nextOpen,
+            value
+        });
+    };
+    const handleHighlightChange = (details)=>{
+        setHighlightState(details.highlightedValue);
+        setResetHighlight(false);
+    };
+    const setQuery = (next)=>{
+        if (!query && next) setLockedWidth(contentRef.current?.offsetWidth || void 0);
+        if (query && !next) setSnapshot(value);
+        onSearchChange(next);
+        setResetHighlight(true);
+    };
+    const context = {
+        label,
+        allLabel,
+        multiple,
+        disabled,
+        value,
+        collection: baseCollection,
+        filteredCollection,
+        groups,
+        query,
+        setQuery,
+        isSearchable,
+        isSearchActive,
+        showAll,
+        allItem,
+        showSelected,
+        aliasItems,
+        clear,
+        triggerRef,
+        contentRef,
+        lockedWidth
+    };
+    return /*#__PURE__*/ jsx(FilterDropdownContext.Provider, {
+        value: context,
+        children: /*#__PURE__*/ jsx(Select, {
+            ...props,
+            "data-slot": "filter-dropdown",
+            "data-testid": testId,
+            className: cn('inline-flex max-w-full', className),
+            collection: arkCollection,
+            multiple: multiple,
+            disabled: disabled,
+            value: internalValue,
+            onValueChange: handleValueChange,
+            open: openProp,
+            defaultOpen: defaultOpen,
+            onOpenChange: handleOpenChange,
+            highlightedValue: highlightedValue,
+            onHighlightChange: handleHighlightChange,
+            children: children
+        })
+    });
+};
+FilterDropdown.displayName = 'FilterDropdown';
+export { FilterDropdown };

package/dist/components/FilterDropdown/FilterDropdownAllOption.d.ts

@@ -0,0 +1,14 @@
+import type { ComponentProps, FC, ReactNode, Ref } from 'react';
+import { SelectOption } from '../Select/SelectOption';
+export interface FilterDropdownAllOptionProps extends Omit<ComponentProps<typeof SelectOption>, 'item' | 'children'> {
+    ref?: Ref<HTMLDivElement>;
+    /** @default the root's `allLabel` */
+    children?: ReactNode;
+}
+/**
+ * The «All …» row of single mode: first in the list, picked while the filter is unset, and
+ * picking it resets the filter to `[]`. Hidden in multi mode and while a query is active.
+ * Always render it in single mode: the row is part of keyboard navigation whenever the menu is
+ * open in single mode.
+ */
+export declare const FilterDropdownAllOption: FC<FilterDropdownAllOptionProps>;

package/dist/components/FilterDropdown/FilterDropdownAllOption.js

@@ -0,0 +1,25 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTestId } from "../../utils/testId.js";
+import { SelectOption } from "../Select/SelectOption.js";
+import { SelectOptionIndicator } from "../Select/SelectOptionIndicator.js";
+import { SelectOptionText } from "../Select/SelectOptionText.js";
+import { useFilterDropdownContext } from "./FilterDropdownContext.js";
+const FilterDropdownAllOption = ({ children, 'data-testid': testIdProp, ...props })=>{
+    const { showAll, allItem, allLabel } = useFilterDropdownContext();
+    const testId = useTestId('all-option', testIdProp);
+    if (!showAll) return null;
+    return /*#__PURE__*/ jsxs(SelectOption, {
+        ...props,
+        item: allItem,
+        "data-slot": "filter-dropdown-all-option",
+        "data-testid": testId,
+        children: [
+            /*#__PURE__*/ jsx(SelectOptionText, {
+                children: children ?? allLabel
+            }),
+            /*#__PURE__*/ jsx(SelectOptionIndicator, {})
+        ]
+    });
+};
+FilterDropdownAllOption.displayName = 'FilterDropdownAllOption';
+export { FilterDropdownAllOption };

package/dist/components/FilterDropdown/FilterDropdownClear.d.ts

@@ -0,0 +1,12 @@
+import type { ButtonHTMLAttributes, FC, Ref } from 'react';
+import { type TestableProps } from '../../utils/testId';
+export interface FilterDropdownClearProps extends ButtonHTMLAttributes<HTMLButtonElement>, TestableProps {
+    ref?: Ref<HTMLButtonElement>;
+}
+/**
+ * The ✕ that clears a multi filter. `FilterDropdownTrigger` renders one on its own; pass a
+ * `FilterDropdownClear` as the trigger's child to replace it (for example to add attributes).
+ * Renders only in multi mode while something is picked, and hands focus back to the trigger
+ * before it disappears.
+ */
+export declare const FilterDropdownClear: FC<FilterDropdownClearProps>;

package/dist/components/FilterDropdown/FilterDropdownClear.js

@@ -0,0 +1,33 @@
+import { jsx } from "react/jsx-runtime";
+import { X } from "../../icons/index.js";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+import { filterDropdownClearClassName } from "./classes.js";
+import { useFilterDropdownContext } from "./FilterDropdownContext.js";
+const FilterDropdownClear = ({ ref, className, children, disabled, onClick, 'aria-label': ariaLabel, 'data-testid': testIdProp, ...props })=>{
+    const { multiple, value, label, clear, triggerRef, disabled: rootDisabled } = useFilterDropdownContext();
+    const testId = useTestId('clear', testIdProp);
+    if (!multiple || 0 === value.length) return null;
+    const handleClick = (event)=>{
+        onClick?.(event);
+        if (event.defaultPrevented) return;
+        triggerRef.current?.focus();
+        clear();
+    };
+    return /*#__PURE__*/ jsx("button", {
+        type: "button",
+        ...props,
+        ref: ref,
+        "data-slot": "filter-dropdown-clear",
+        "data-testid": testId,
+        "aria-label": ariaLabel ?? `Clear ${label}`,
+        disabled: rootDisabled || disabled,
+        onClick: handleClick,
+        className: cn(filterDropdownClearClassName, className),
+        children: children ?? /*#__PURE__*/ jsx(X, {
+            size: "md"
+        })
+    });
+};
+FilterDropdownClear.displayName = 'FilterDropdownClear';
+export { FilterDropdownClear };

package/dist/components/FilterDropdown/FilterDropdownContent.d.ts

@@ -0,0 +1,13 @@
+import { type FC, type ReactNode, type Ref } from 'react';
+import type { Select as ArkUiSelect } from '@ark-ui/react/select';
+import { type TestableProps } from '../../utils/testId';
+export interface FilterDropdownContentProps extends Omit<ArkUiSelect.ContentProps, 'asChild' | 'children'>, TestableProps {
+    ref?: Ref<HTMLDivElement>;
+    children?: ReactNode;
+}
+/**
+ * The menu panel. `FilterDropdownSearch` children are pinned above the scrolling list and
+ * `FilterDropdownFooter` children below it; everything else scrolls. Hugs its options up to
+ * 360px and at most 340px tall, and keeps its width while a query narrows the list.
+ */
+export declare const FilterDropdownContent: FC<FilterDropdownContentProps>;

package/dist/components/FilterDropdown/FilterDropdownContent.js

@@ -0,0 +1,57 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Children, isValidElement } from "react";
+import { cn } from "../../utils/cn.js";
+import { mergeRefs } from "../../utils/mergeRefs.js";
+import { TestIdProvider, useTestId } from "../../utils/testId.js";
+import { SelectContent } from "../Select/SelectContent.js";
+import { SelectHeader } from "../Select/SelectHeader.js";
+import { SelectPositioner } from "../Select/SelectPositioner.js";
+import { filterDropdownContentClassName } from "./classes.js";
+import { useFilterDropdownContext } from "./FilterDropdownContext.js";
+import { FilterDropdownFooter } from "./FilterDropdownFooter.js";
+import { FilterDropdownSearch } from "./FilterDropdownSearch.js";
+const FilterDropdownContent = ({ ref, className, style, children, 'data-testid': testIdProp, ...props })=>{
+    const { isSearchable, isSearchActive, lockedWidth, contentRef } = useFilterDropdownContext();
+    const testId = useTestId('content', testIdProp);
+    const listTestId = useTestId('list');
+    const baseTestId = useTestId();
+    const header = [];
+    const footer = [];
+    const body = [];
+    Children.forEach(children, (child)=>{
+        if (/*#__PURE__*/ isValidElement(child) && child.type === FilterDropdownSearch) header.push(child);
+        else if (/*#__PURE__*/ isValidElement(child) && child.type === FilterDropdownFooter) footer.push(child);
+        else body.push(child);
+    });
+    const width = isSearchActive && lockedWidth ? lockedWidth : void 0;
+    return /*#__PURE__*/ jsxs(SelectPositioner, {
+        className: cn(filterDropdownContentClassName, className),
+        contentProps: {
+            ...props,
+            ref: mergeRefs(ref, contentRef),
+            style: void 0 === width ? style : {
+                ...style,
+                width
+            },
+            'data-slot': 'filter-dropdown-content',
+            'data-testid': testId
+        },
+        children: [
+            isSearchable && header.length > 0 && /*#__PURE__*/ jsx(SelectHeader, {
+                children: header
+            }),
+            /*#__PURE__*/ jsx(SelectContent, {
+                "data-testid": listTestId,
+                tabIndex: -1,
+                "data-no-autofocus": "",
+                children: /*#__PURE__*/ jsx(TestIdProvider, {
+                    value: baseTestId,
+                    children: body
+                })
+            }),
+            footer
+        ]
+    });
+};
+FilterDropdownContent.displayName = 'FilterDropdownContent';
+export { FilterDropdownContent };

package/dist/components/FilterDropdown/FilterDropdownContext.d.ts

@@ -0,0 +1,60 @@
+import { type RefObject } from 'react';
+import type { CollectionItem, ListCollection } from '@ark-ui/react/collection';
+import type { FilterDropdownSpecialItem } from './lib';
+export interface FilterDropdownContextValue {
+    /** Attribute name: trigger text in multi, aria labels, «Clear {label}». */
+    label: string;
+    /** Single mode: trigger text while unset and the default «All» option text. */
+    allLabel: string;
+    multiple: boolean;
+    disabled: boolean;
+    /** The consumer value (base values only, `[]` = unset). */
+    value: string[];
+    /** The consumer's collection, unfiltered. */
+    collection: ListCollection<CollectionItem>;
+    /** The consumer's collection narrowed by the search query. */
+    filteredCollection: ListCollection<CollectionItem>;
+    /** `filteredCollection.group()` — groups with no matches are absent. */
+    groups: [string, CollectionItem[]][];
+    query: string;
+    setQuery: (query: string) => void;
+    /** The search field is shown: the collection has at least `searchThreshold` items. */
+    isSearchable: boolean;
+    /** A non-empty query is narrowing the list. */
+    isSearchActive: boolean;
+    /** Single mode and no query: «All» is part of the list. */
+    showAll: boolean;
+    allItem: FilterDropdownSpecialItem;
+    /**
+     * Multi mode, `selectedOnTop`, searchable, no query and something was picked when the menu
+     * opened.
+     */
+    showSelected: boolean;
+    /** Alias rows of the "Selected" snapshot, in pick order. */
+    aliasItems: FilterDropdownSpecialItem[];
+    clear: () => void;
+    triggerRef: RefObject<HTMLButtonElement | null>;
+    contentRef: RefObject<HTMLDivElement | null>;
+    /** Width the menu is pinned to while a query is active, so it does not jump as rows drop. */
+    lockedWidth: number | undefined;
+}
+export declare const FilterDropdownContext: import("react").Context<FilterDropdownContextValue | null>;
+export declare const useFilterDropdownContext: () => FilterDropdownContextValue;
+/** Set by `FilterDropdownSelected` around each of its rows: the alias that row stands for. */
+export declare const FilterDropdownAliasContext: import("react").Context<FilterDropdownSpecialItem<any> | null>;
+export interface UseFilterDropdownResult<T extends CollectionItem = CollectionItem> {
+    /** The collection narrowed by the current query (the whole collection when it is empty). */
+    filteredCollection: ListCollection<T>;
+    /** `filteredCollection.group()`; render these so the list follows the search. */
+    groups: [string, T[]][];
+    query: string;
+    isSearchActive: boolean;
+    multiple: boolean;
+    value: string[];
+    clear: () => void;
+}
+/**
+ * Reads the state of the surrounding `FilterDropdown` — chiefly the filtered items and groups
+ * to render inside `FilterDropdownContent`.
+ */
+export declare const useFilterDropdown: <T extends CollectionItem = CollectionItem>() => UseFilterDropdownResult<T>;

package/dist/components/FilterDropdown/FilterDropdownContext.js

@@ -0,0 +1,21 @@
+import { createContext, useContext } from "react";
+const FilterDropdownContext = /*#__PURE__*/ createContext(null);
+const useFilterDropdownContext = ()=>{
+    const context = useContext(FilterDropdownContext);
+    if (!context) throw new Error('FilterDropdown parts must be rendered inside <FilterDropdown>');
+    return context;
+};
+const FilterDropdownAliasContext = /*#__PURE__*/ createContext(null);
+const useFilterDropdown = ()=>{
+    const { filteredCollection, groups, query, isSearchActive, multiple, value, clear } = useFilterDropdownContext();
+    return {
+        filteredCollection: filteredCollection,
+        groups: groups,
+        query,
+        isSearchActive,
+        multiple,
+        value,
+        clear
+    };
+};
+export { FilterDropdownAliasContext, FilterDropdownContext, useFilterDropdown, useFilterDropdownContext };

package/dist/components/FilterDropdown/FilterDropdownEmpty.d.ts

@@ -0,0 +1,9 @@
+import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
+import { type TestableProps } from '../../utils/testId';
+export interface FilterDropdownEmptyProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'>, TestableProps {
+    ref?: Ref<HTMLDivElement>;
+    /** @default 'Nothing matches' */
+    children?: ReactNode;
+}
+/** Shown in place of the options when the query matches none of them. */
+export declare const FilterDropdownEmpty: FC<FilterDropdownEmptyProps>;

package/dist/components/FilterDropdown/FilterDropdownEmpty.js

@@ -0,0 +1,21 @@
+import { jsx } from "react/jsx-runtime";
+import { useTestId } from "../../utils/testId.js";
+import { SelectEmptyState } from "../Select/SelectEmptyState.js";
+import { useFilterDropdownContext } from "./FilterDropdownContext.js";
+const FilterDropdownEmpty = ({ ref, children, 'data-testid': testIdProp, ...props })=>{
+    const { filteredCollection } = useFilterDropdownContext();
+    const testId = useTestId('empty', testIdProp);
+    if (filteredCollection.size > 0) return null;
+    return /*#__PURE__*/ jsx("div", {
+        ...props,
+        ref: ref,
+        "data-slot": "filter-dropdown-empty",
+        "data-testid": testId,
+        children: /*#__PURE__*/ jsx(SelectEmptyState, {
+            className: "w-full max-w-240",
+            description: children ?? 'Nothing matches'
+        })
+    });
+};
+FilterDropdownEmpty.displayName = 'FilterDropdownEmpty';
+export { FilterDropdownEmpty };

package/dist/components/FilterDropdown/FilterDropdownFooter.d.ts

@@ -0,0 +1,9 @@
+import type { FC } from 'react';
+import { type TestableProps } from '../../utils/testId';
+import { type SelectFooterProps } from '../Select/SelectFooter';
+export type FilterDropdownFooterProps = Omit<SelectFooterProps, 'variant' | 'data-testid'> & TestableProps;
+/**
+ * Footer pinned under the list. Multi mode only, and only while something is picked; its default
+ * content is `FilterDropdownFooterClear`.
+ */
+export declare const FilterDropdownFooter: FC<FilterDropdownFooterProps>;

package/dist/components/FilterDropdown/FilterDropdownFooter.js

@@ -0,0 +1,19 @@
+import { jsx } from "react/jsx-runtime";
+import { useTestId } from "../../utils/testId.js";
+import { SelectFooter } from "../Select/SelectFooter.js";
+import { useFilterDropdownContext } from "./FilterDropdownContext.js";
+import { FilterDropdownFooterClear } from "./FilterDropdownFooterClear.js";
+const FilterDropdownFooter = ({ children, 'data-testid': testIdProp, ...props })=>{
+    const { multiple, value } = useFilterDropdownContext();
+    const testId = useTestId('footer', testIdProp);
+    if (!multiple || 0 === value.length) return null;
+    return /*#__PURE__*/ jsx(SelectFooter, {
+        ...props,
+        variant: "actions",
+        "data-slot": "filter-dropdown-footer",
+        "data-testid": testId,
+        children: children ?? /*#__PURE__*/ jsx(FilterDropdownFooterClear, {})
+    });
+};
+FilterDropdownFooter.displayName = 'FilterDropdownFooter';
+export { FilterDropdownFooter };

package/dist/components/FilterDropdown/FilterDropdownFooterClear.d.ts

@@ -0,0 +1,9 @@
+import type { FC } from 'react';
+import { type TestableProps } from '../../utils/testId';
+import { type ButtonProps } from '../Button';
+export type FilterDropdownFooterClearProps = Omit<ButtonProps<'button'>, 'variant' | 'color' | 'size' | 'as' | 'asChild'> & TestableProps;
+/**
+ * The «Clear» button of the multi-mode footer. Keeps the menu open and moves focus back into it
+ * (the search, or the list) before the footer disappears.
+ */
+export declare const FilterDropdownFooterClear: FC<FilterDropdownFooterClearProps>;

package/dist/components/FilterDropdown/FilterDropdownFooterClear.js

@@ -0,0 +1,40 @@
+import { jsx } from "react/jsx-runtime";
+import { useTestId } from "../../utils/testId.js";
+import { Button } from "../Button/index.js";
+import { useFilterDropdownContext } from "./FilterDropdownContext.js";
+const BUTTON_OWNED_KEYS = new Set([
+    'Enter',
+    ' '
+]);
+const FilterDropdownFooterClear = ({ children, onClick, onKeyDown, 'data-testid': testIdProp, ...props })=>{
+    const { clear } = useFilterDropdownContext();
+    const testId = useTestId('footer-clear', testIdProp);
+    const handleKeyDown = (event)=>{
+        onKeyDown?.(event);
+        if (BUTTON_OWNED_KEYS.has(event.key)) event.stopPropagation();
+    };
+    const handleClick = (event)=>{
+        onClick?.(event);
+        if (event.defaultPrevented) return;
+        const content = event.currentTarget.closest('[data-scope="select"][data-part="content"]');
+        const search = content?.querySelector('[data-slot="filter-dropdown-search"] input');
+        (search ?? content)?.focus({
+            preventScroll: true
+        });
+        clear();
+    };
+    return /*#__PURE__*/ jsx(Button, {
+        ...props,
+        "data-slot": "filter-dropdown-footer-clear",
+        "data-testid": testId,
+        "data-no-autofocus": "",
+        variant: "ghost",
+        color: "neutral",
+        size: "small",
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        children: children ?? 'Clear'
+    });
+};
+FilterDropdownFooterClear.displayName = 'FilterDropdownFooterClear';
+export { FilterDropdownFooterClear };

package/dist/components/FilterDropdown/FilterDropdownGroup.d.ts

@@ -0,0 +1,5 @@
+import type { ComponentProps, FC } from 'react';
+import { SelectGroup } from '../Select/SelectGroup';
+export type FilterDropdownGroupProps = ComponentProps<typeof SelectGroup>;
+/** A labelled run of options. Render one per entry of `useFilterDropdown().groups`. */
+export declare const FilterDropdownGroup: FC<FilterDropdownGroupProps>;

package/dist/components/FilterDropdown/FilterDropdownGroup.js

@@ -0,0 +1,8 @@
+import { jsx } from "react/jsx-runtime";
+import { SelectGroup } from "../Select/SelectGroup.js";
+const FilterDropdownGroup = (props)=>/*#__PURE__*/ jsx(SelectGroup, {
+        ...props,
+        "data-slot": "filter-dropdown-group"
+    });
+FilterDropdownGroup.displayName = 'FilterDropdownGroup';
+export { FilterDropdownGroup };

package/dist/components/FilterDropdown/FilterDropdownGroupLabel.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentProps, FC } from 'react';
+import { SelectGroupLabel } from '../Select/SelectGroupLabel';
+export type FilterDropdownGroupLabelProps = ComponentProps<typeof SelectGroupLabel>;
+export declare const FilterDropdownGroupLabel: FC<FilterDropdownGroupLabelProps>;

package/dist/components/FilterDropdown/FilterDropdownGroupLabel.js

@@ -0,0 +1,8 @@
+import { jsx } from "react/jsx-runtime";
+import { SelectGroupLabel } from "../Select/SelectGroupLabel.js";
+const FilterDropdownGroupLabel = (props)=>/*#__PURE__*/ jsx(SelectGroupLabel, {
+        ...props,
+        "data-slot": "filter-dropdown-group-label"
+    });
+FilterDropdownGroupLabel.displayName = 'FilterDropdownGroupLabel';
+export { FilterDropdownGroupLabel };

package/dist/components/FilterDropdown/FilterDropdownOption.d.ts

@@ -0,0 +1,15 @@
+import { type ComponentProps, type ReactNode, type Ref } from 'react';
+import type { CollectionItem } from '@ark-ui/react/collection';
+import { SelectOption } from '../Select/SelectOption';
+export interface FilterDropdownOptionProps<T extends CollectionItem = CollectionItem> extends Omit<ComponentProps<typeof SelectOption>, 'item' | 'children'> {
+    ref?: Ref<HTMLDivElement>;
+    item: T;
+    /** Secondary text at the right end of the row, such as a count. */
+    hint?: ReactNode;
+    /** Row text. Defaults to the item's label from the collection. */
+    children?: ReactNode;
+}
+export declare function FilterDropdownOption<T extends CollectionItem>({ item, hint, children, 'data-testid': testIdProp, ...props }: FilterDropdownOptionProps<T>): import("react").JSX.Element;
+export declare namespace FilterDropdownOption {
+    var displayName: string;
+}