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

package/dist/components/Avatar/Avatar.d.ts

@@ -0,0 +1,32 @@
+import type { ButtonHTMLAttributes, FC, HTMLAttributes, Ref } from 'react';
+import { Avatar as ArkAvatar } from '@ark-ui/react/avatar';
+import type { VariantProps } from 'class-variance-authority';
+import { type TestableProps } from '../../utils/testId';
+import { avatarVariants } from './classes';
+export type AvatarStatusChangeDetails = ArkAvatar.StatusChangeDetails;
+type AvatarButtonAttributes = Pick<ButtonHTMLAttributes<HTMLButtonElement>, 'disabled' | 'type' | 'name' | 'value' | 'form'>;
+interface AvatarBaseProps extends HTMLAttributes<HTMLElement>, VariantProps<typeof avatarVariants>, TestableProps {
+    ref?: Ref<HTMLElement>;
+    onStatusChange?: (details: AvatarStatusChangeDetails) => void;
+}
+type AvatarRootProps = ({
+    /** Root tag. 'button' makes the avatar itself interactive (e.g. inside FileUploadTrigger asChild). */
+    as?: 'span';
+    /** Render the single child element as the root instead of `as`; takes precedence over it. */
+    asChild?: false;
+} & {
+    [K in keyof AvatarButtonAttributes]?: never;
+}) | ({
+    as: 'button';
+    asChild?: false;
+} & AvatarButtonAttributes) | ({
+    as?: 'span' | 'button';
+    asChild: true;
+} & AvatarButtonAttributes);
+export type AvatarProps = AvatarBaseProps & AvatarRootProps;
+/**
+ * A user's photo on a rounded plate, falling back to initials or an icon while the photo loads,
+ * when it fails, or when there is none.
+ */
+export declare const Avatar: FC<AvatarProps>;
+export {};

package/dist/components/Avatar/Avatar.figma.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Avatar/Avatar.figma.js

@@ -0,0 +1,27 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import code_connect from "@figma/code-connect";
+import { Avatar, AvatarFallback, AvatarImage } from "./index.js";
+const AVATAR_URL = 'https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/WADS-Components?node-id=12336-5504';
+code_connect.connect(Avatar, AVATAR_URL, {
+    variant: {
+        Photo: 'On'
+    },
+    example: ()=>/*#__PURE__*/ jsxs(Avatar, {
+            children: [
+                /*#__PURE__*/ jsx(AvatarImage, {
+                    src: "/me.png"
+                }),
+                /*#__PURE__*/ jsx(AvatarFallback, {
+                    name: "Ada Lovelace"
+                })
+            ]
+        })
+});
+code_connect.connect(Avatar, AVATAR_URL, {
+    variant: {
+        Photo: 'Off'
+    },
+    example: ()=>/*#__PURE__*/ jsx(Avatar, {
+            children: /*#__PURE__*/ jsx(AvatarFallback, {})
+        })
+});

package/dist/components/Avatar/Avatar.js

@@ -0,0 +1,42 @@
+import { jsx } from "react/jsx-runtime";
+import { Avatar } from "@ark-ui/react/avatar";
+import { cn } from "../../utils/cn.js";
+import { TestIdProvider } from "../../utils/testId.js";
+import { avatarVariants } from "./classes.js";
+const Avatar_Avatar = ({ ref, id, size, as: Tag = 'span', asChild = false, disabled, type, name, value, form, onStatusChange, className, children, 'data-testid': testId, ...props })=>{
+    const role = props.role ?? (props['aria-label'] && !asChild && 'button' !== Tag ? 'img' : void 0);
+    const buttonAttributes = asChild || 'button' === Tag ? Object.fromEntries(Object.entries({
+        disabled,
+        name,
+        value,
+        form
+    }).filter(([, v])=>void 0 !== v)) : {};
+    return /*#__PURE__*/ jsx(TestIdProvider, {
+        value: testId,
+        children: /*#__PURE__*/ jsx(Avatar.Root, {
+            "data-slot": "avatar",
+            ...props,
+            ids: id ? {
+                root: id
+            } : void 0,
+            ...buttonAttributes,
+            ref: ref,
+            role: role,
+            ...asChild && type ? {
+                type
+            } : {},
+            "data-testid": testId,
+            onStatusChange: onStatusChange,
+            className: cn(avatarVariants({
+                size
+            }), className),
+            asChild: true,
+            children: asChild ? children : /*#__PURE__*/ jsx(Tag, {
+                type: 'button' === Tag ? type ?? 'button' : void 0,
+                children: children
+            })
+        })
+    });
+};
+Avatar_Avatar.displayName = 'Avatar';
+export { Avatar_Avatar as Avatar };

package/dist/components/Avatar/AvatarFallback.d.ts

@@ -0,0 +1,11 @@
+import type { ComponentType, FC, HTMLAttributes, Ref } from 'react';
+import { type SvgIconProps } from '../../icons';
+export interface AvatarFallbackProps extends HTMLAttributes<HTMLSpanElement> {
+    ref?: Ref<HTMLSpanElement>;
+    /** Initials are taken from this: first letter of the first and of the last word. */
+    name?: string;
+    /** Shown when there are no children and `name` gives no initials. */
+    icon?: ComponentType<SvgIconProps>;
+}
+/** Shown while the photo loads, when it fails, and when there is none. */
+export declare const AvatarFallback: FC<AvatarFallbackProps>;

package/dist/components/Avatar/AvatarFallback.js

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+import { Avatar } from "@ark-ui/react/avatar";
+import { UserRound } from "../../icons/index.js";
+import { cn } from "../../utils/cn.js";
+import { getInitials } from "../../utils/getInitials.js";
+import { useTestId } from "../../utils/testId.js";
+import { avatarFallbackClassNames } from "./classes.js";
+const AvatarFallback = ({ ref, name, icon: Icon = UserRound, className, children, ...props })=>{
+    const testId = useTestId('fallback');
+    const initials = name ? getInitials(name) : '';
+    const showsInitials = null == children && '' !== initials;
+    return /*#__PURE__*/ jsx(Avatar.Fallback, {
+        "aria-hidden": true,
+        ...props,
+        ref: ref,
+        "data-slot": "avatar-fallback",
+        "data-testid": testId,
+        className: cn(avatarFallbackClassNames, showsInitials && 'text-text-primary', className),
+        children: children ?? (initials || /*#__PURE__*/ jsx(Icon, {
+            size: "md"
+        }))
+    });
+};
+AvatarFallback.displayName = 'AvatarFallback';
+export { AvatarFallback };

package/dist/components/Avatar/AvatarImage.d.ts

@@ -0,0 +1,9 @@
+import type { FC, ImgHTMLAttributes, Ref } from 'react';
+export interface AvatarImageProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'id'> {
+    ref?: Ref<HTMLImageElement>;
+}
+/**
+ * The photo. Always render it — Ark tracks `src` changes on the mounted element — and pass
+ * `src={undefined}` for "no photo". Decorative by default (`alt=''`).
+ */
+export declare const AvatarImage: FC<AvatarImageProps>;

package/dist/components/Avatar/AvatarImage.js

@@ -0,0 +1,18 @@
+import { jsx } from "react/jsx-runtime";
+import { Avatar } from "@ark-ui/react/avatar";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+import { avatarImageClassNames } from "./classes.js";
+const AvatarImage = ({ ref, alt = '', className, ...props })=>{
+    const testId = useTestId('image');
+    return /*#__PURE__*/ jsx(Avatar.Image, {
+        ...props,
+        ref: ref,
+        alt: alt,
+        "data-slot": "avatar-image",
+        "data-testid": testId,
+        className: cn(avatarImageClassNames, className)
+    });
+};
+AvatarImage.displayName = 'AvatarImage';
+export { AvatarImage };

package/dist/components/Avatar/AvatarOverlay.d.ts

@@ -0,0 +1,11 @@
+import type { FC, HTMLAttributes, Ref } from 'react';
+export interface AvatarOverlayProps extends HTMLAttributes<HTMLSpanElement> {
+    ref?: Ref<HTMLSpanElement>;
+    /** Keep it shown regardless of hover — e.g. a `Loader` while the new photo uploads. */
+    visible?: boolean;
+}
+/**
+ * The "change photo" affordance, shown on hover and keyboard focus of an interactive
+ * (`as='button'`) avatar. Over a photo it adds a wash; over the fallback it swaps the icon.
+ */
+export declare const AvatarOverlay: FC<AvatarOverlayProps>;

package/dist/components/Avatar/AvatarOverlay.js

@@ -0,0 +1,22 @@
+import { jsx } from "react/jsx-runtime";
+import { RefreshCcw } from "../../icons/index.js";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+import { avatarOverlayClassNames } from "./classes.js";
+const AvatarOverlay = ({ ref, visible = false, className, children, ...props })=>{
+    const testId = useTestId('overlay');
+    return /*#__PURE__*/ jsx("span", {
+        ...props,
+        ref: ref,
+        "aria-hidden": true,
+        "data-slot": "avatar-overlay",
+        "data-visible": visible ? '' : void 0,
+        "data-testid": testId,
+        className: cn(avatarOverlayClassNames, className),
+        children: children ?? /*#__PURE__*/ jsx(RefreshCcw, {
+            size: "md"
+        })
+    });
+};
+AvatarOverlay.displayName = 'AvatarOverlay';
+export { AvatarOverlay };

package/dist/components/Avatar/classes.d.ts

@@ -0,0 +1,6 @@
+export declare const avatarVariants: (props?: ({
+    size?: "sm" | "xs" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const avatarImageClassNames: string;
+export declare const avatarFallbackClassNames: string;
+export declare const avatarOverlayClassNames: string;

package/dist/components/Avatar/classes.js

@@ -0,0 +1,17 @@
+import { cva } from "class-variance-authority";
+import { cn } from "../../utils/cn.js";
+const avatarVariants = cva(cn('group/avatar inline-grid shrink-0 place-items-center overflow-hidden align-middle *:col-start-1 *:row-start-1', 'border border-border-primary bg-states-primary-hover text-icon-primary font-sans font-medium', 'branded:border-border-brand branded:bg-states-brand-hover branded:text-icon-brand', 'has-[>img[data-state=visible]]:border-0', 'hover:not-disabled:[&:has(>[data-slot=avatar-overlay])>[data-slot=avatar-fallback]]:invisible', 'focus-visible:[&:has(>[data-slot=avatar-overlay])>[data-slot=avatar-fallback]]:invisible', '[&:has(>[data-slot=avatar-overlay][data-visible])>[data-slot=avatar-fallback]]:invisible', 'enabled:cursor-pointer disabled:cursor-not-allowed', 'focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-focus-primary'), {
+    variants: {
+        size: {
+            xs: 'size-24 rounded-8 text-2xs',
+            sm: 'size-32 rounded-12 text-xs'
+        }
+    },
+    defaultVariants: {
+        size: 'sm'
+    }
+});
+const avatarImageClassNames = cn('size-full object-cover data-[state=hidden]:hidden');
+const avatarFallbackClassNames = cn('inline-flex items-center justify-center select-none data-[state=hidden]:hidden');
+const avatarOverlayClassNames = cn('hidden size-full place-items-center text-icon-primary', 'group-hover/avatar:grid group-focus-visible/avatar:grid group-disabled/avatar:not-data-[visible]:hidden', 'data-[visible]:grid', 'group-has-[>img[data-state=visible]]/avatar:bg-component-avatar-overlay');
+export { avatarFallbackClassNames, avatarImageClassNames, avatarOverlayClassNames, avatarVariants };

package/dist/components/Avatar/index.d.ts

@@ -0,0 +1,4 @@
+export { Avatar, type AvatarProps, type AvatarStatusChangeDetails } from './Avatar';
+export { AvatarFallback, type AvatarFallbackProps } from './AvatarFallback';
+export { AvatarImage, type AvatarImageProps } from './AvatarImage';
+export { AvatarOverlay, type AvatarOverlayProps } from './AvatarOverlay';

package/dist/components/Avatar/index.js

@@ -0,0 +1,4 @@
+export { Avatar } from "./Avatar.js";
+export { AvatarFallback } from "./AvatarFallback.js";
+export { AvatarImage } from "./AvatarImage.js";
+export { AvatarOverlay } from "./AvatarOverlay.js";

package/dist/components/FileUpload/FileUploadTrigger.d.ts

@@ -4,5 +4,10 @@ export type FileUploadTriggerProps = ButtonProps;
 /**
  * "Select file" button — the compact picker for when space is tight. Takes every
  * `Button` prop (defaults: primary / brand / large). Hidden (read-only) and blocked like the Area.
+ *
+ * `asChild`: no Button is rendered. The single child element (e.g. `<Avatar as='button'>`)
+ * becomes the trigger and receives `data-slot`, `data-testid`, `aria-describedby`, `disabled` and the
+ * Ark trigger props. Button-only props (`variant`, `color`, `size`, `loading`, `fullWidth`, `as`) are
+ * ignored. Pass `disabled` / `aria-describedby` here, not on the child — a child value wins the merge.
  */
 export declare const FileUploadTrigger: FC<FileUploadTriggerProps>;

package/dist/components/FileUpload/FileUploadTrigger.js

@@ -4,7 +4,7 @@ import { Share } from "../../icons/index.js";
 import { useTestId } from "../../utils/testId.js";
 import { Button } from "../Button/index.js";
 import { useRequiredFileUploadRootContext } from "./FileUploadContext.js";
-const FileUploadTrigger = ({ children, disabled, 'data-testid': testIdProp, 'aria-describedby': describedByProp, ...props })=>{
+const FileUploadTrigger = ({ children, disabled, asChild = false, 'data-testid': testIdProp, 'aria-describedby': describedByProp, ...props })=>{
     const ctx = useRequiredFileUploadRootContext('FileUploadTrigger');
     const testId = useTestId('trigger', testIdProp);
     if (ctx.pickerHidden) return null;
@@ -12,6 +12,22 @@ const FileUploadTrigger = ({ children, disabled, 'data-testid': testIdProp, 'ari
         describedByProp,
         ctx.rejections.length ? ctx.errorId : void 0
     ].filter(Boolean).join(' ') || void 0;
+    const shared = {
+        'aria-describedby': describedBy,
+        'data-slot': 'file-upload-trigger',
+        'data-testid': testId,
+        disabled: disabled || ctx.pickerBlocked
+    };
+    if (asChild) {
+        const { variant, color, size, loading, fullWidth, as, ref, ...rest } = props;
+        return /*#__PURE__*/ jsx(FileUpload.Trigger, {
+            ...rest,
+            ...shared,
+            ref: ref,
+            asChild: true,
+            children: children
+        });
+    }
     return /*#__PURE__*/ jsx(FileUpload.Trigger, {
         asChild: true,
         children: /*#__PURE__*/ jsx(Button, {
@@ -19,10 +35,7 @@ const FileUploadTrigger = ({ children, disabled, 'data-testid': testIdProp, 'ari
             color: "brand",
             size: "large",
             ...props,
-            "aria-describedby": describedBy,
-            "data-slot": "file-upload-trigger",
-            "data-testid": testId,
-            disabled: disabled || ctx.pickerBlocked,
+            ...shared,
             children: children ?? /*#__PURE__*/ jsxs(Fragment, {
                 children: [
                     /*#__PURE__*/ jsx(Share, {}),

package/dist/components/FileUpload/index.d.ts

@@ -9,3 +9,4 @@ export { FileUploadItemGroup, type FileUploadItemGroupProps } from './FileUpload
 export { FileUploadItemReplaceTrigger, type FileUploadItemReplaceTriggerProps, } from './FileUploadItemReplaceTrigger';
 export { FileUploadTrigger, type FileUploadTriggerProps } from './FileUploadTrigger';
 export type { FileUploadErrorCode, FileUploadItemFile, FileUploadRejection } from './types';
+export { useFilePreviewUrl } from './useFilePreviewUrl';

package/dist/components/FileUpload/index.js

@@ -8,3 +8,4 @@ export { FileUploadItemDeleteTrigger } from "./FileUploadItemDeleteTrigger.js";
 export { FileUploadItemGroup } from "./FileUploadItemGroup.js";
 export { FileUploadItemReplaceTrigger } from "./FileUploadItemReplaceTrigger.js";
 export { FileUploadTrigger } from "./FileUploadTrigger.js";
+export { useFilePreviewUrl } from "./useFilePreviewUrl.js";

package/dist/components/FileUpload/useFilePreviewUrl.d.ts

@@ -0,0 +1,6 @@
+/**
+ * An object URL for previewing a picked file (e.g. in `AvatarImage`), revoked when the file
+ * changes or the component unmounts. The effect manages the blob URL's lifetime — an external
+ * resource, not derived state.
+ */
+export declare const useFilePreviewUrl: (file?: File | null) => string | undefined;

package/dist/components/FileUpload/useFilePreviewUrl.js

@@ -0,0 +1,14 @@
+import { useEffect, useState } from "react";
+const useFilePreviewUrl = (file)=>{
+    const [url, setUrl] = useState();
+    useEffect(()=>{
+        if (!file) return void setUrl(void 0);
+        const next = URL.createObjectURL(file);
+        setUrl(next);
+        return ()=>URL.revokeObjectURL(next);
+    }, [
+        file
+    ]);
+    return url;
+};
+export { useFilePreviewUrl };

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>;