///
import type { Expand, HTMLDivAttributes, Transition, PrefixKeys } from '../internal/index.js';
import type { Dialog as DialogPrimitive } from 'bits-ui';
import type { HTMLInputAttributes } from 'svelte/elements';
import type { Writable } from 'svelte/store';
export type LoadingProps = {
/** Estimated loading progress */
progress?: number;
/**
* Whether to delegate rendering to a custom element.
*
* The contents within the `Loading` component should be marked
* as `aria-hidden` to prevent screen readers from reading the
* contents while loading.
*/
asChild?: boolean;
} & HTMLDivAttributes;
export type EmptyProps = {
/**
* Whether to delegate rendering to a custom element.
*
* Only receives `attrs`, no `action`.
*/
asChild?: boolean;
} & HTMLDivAttributes;
export type SeparatorProps = {
/**
* Whether this separator is always rendered, regardless
* of the filter.
*/
alwaysRender?: boolean;
/**
* Whether to delegate rendering to a custom element.
*/
asChild?: boolean;
} & HTMLDivAttributes;
type BaseCommandProps = {
/**
* Controlled state store for the command menu.
* Initialize state using the `createState` function.
*/
state?: Writable;
/**
* An accessible label for the command menu.
* Not visible & only used for screen readers.
*/
label?: string;
/**
* Optionally set to `false` to turn off the automatic filtering
* and sorting. If `false`, you must conditionally render valid
* items yourself.
*/
shouldFilter?: boolean;
/**
* A custom filter function for whether each command item should
* match the query. It should return a number between `0` and `1`,
* with `1` being a perfect match, and `0` being no match, resulting
* in the item being hidden entirely.
*
* By default, it will use the `command-score` package to score.
*/
filter?: (value: string, search: string) => number;
/**
* Optionally provide or bind to the selected command menu item.
*/
value?: string;
/**
* A function that is called when the selected command menu item
* changes. It receives the new value as an argument.
*/
onValueChange?: (value: string) => void;
/**
* Optionally set to `true` to enable looping through the items
* when the user reaches the end of the list using the keyboard.
*/
loop?: boolean;
};
export type CommandProps = Expand;
}> & HTMLDivAttributes & {
onKeydown?: (e: KeyboardEvent) => void;
asChild?: boolean;
};
export type ListProps = {
/**
* The list element
*/
el?: HTMLElement;
/**
* Whether to delegate rendering to a custom element.
*
* Provides 2 slot props: `container` & `list`.
* Container only has an `attrs` property, while `list` has
* `attrs` & `action` to be applied to the respective elements.
*
* The `list` wraps the `sizer`, and the `sizer` wraps the `items`, and
* is responsible for measuring the height of the items and setting the
* CSS variable to the height of the items.
*/
asChild?: boolean;
} & HTMLDivAttributes;
export type InputProps = {
/**
* The input element
*/
el?: HTMLInputElement;
/**
* Whether to delegate rendering to a custom element.
*/
asChild?: boolean;
} & HTMLInputAttributes;
export type GroupProps = {
/**
* Optional heading to render for the group
*/
heading?: string;
/**
* If heading isn't provided, you must provide a unique
* value for the group.
*/
value?: string;
/**
* Whether or not this group is always rendered,
* regardless of filtering.
*/
alwaysRender?: boolean;
/**
* Whether to delegate rendering to custom elements.
*
* Provides 3 slot props: `container`, `heading`, and `group`.
* Container has `attrs` & `action`, while `heading` & `group`
* only have `attrs` to be applied to the respective elements.
*/
asChild?: boolean;
} & HTMLDivAttributes;
export type ItemProps = {
/**
* Whether this item is disabled.
*/
disabled?: boolean;
/**
* A function called when this item is selected, either
* via click or keyboard selection.
*/
onSelect?: (value: string) => void;
/**
* A unique value for this item.
* If not provided, it will be inferred from the rendered
* `textContent`. If your `textContent` is dynamic, you must
* provide a stable unique `value`.
*/
value?: string;
/**
* Whether or not this item is always rendered,
* regardless of filtering.
*/
alwaysRender?: boolean;
/**
* Whether to delegate rendering to a custom element.
* Will pass the `attrs` & `action` to be applied to the custom element.
*/
asChild?: boolean;
/**
* Optionally override the default `id` generated for this item.
* NOTE: This must be unique across all items and is only necessary
* in very specific cases.
*/
id?: string;
} & HTMLDivAttributes;
type TransitionProps = 'transition' | 'transitionConfig' | 'inTransition' | 'inTransitionConfig' | 'outTransition' | 'outTransitionConfig';
export type OverlayProps = PrefixKeys, TransitionProps>, 'overlay'> & {
overlayClasses?: string;
};
export type ContentProps = PrefixKeys, TransitionProps>, 'content'> & {
contentClasses?: string;
};
export type DialogProps = CommandProps & DialogPrimitive.Props & OverlayProps & ContentProps;
export type InputEvents = {
keydown: KeyboardEvent;
blur: FocusEvent;
input: Event;
focus: FocusEvent;
change: Event;
};
export type CommandOptionStores = {
[K in keyof Omit, 'value'>]: Writable;
};
export type State = {
/** The value of the search query */
search: string;
/** The value of the selected command menu item */
value: string;
/** The filtered items */
filtered: {
/** The count of all visible items. */
count: number;
/** Map from visible item id to its search store. */
items: Map;
/** Set of groups with at least one visible item. */
groups: Set;
};
};
export type CommandIds = Record<'root' | 'label' | 'input' | 'list', string>;
export type Context = {
value: (id: string, value: string) => void;
item: (id: string, groupId: string | undefined) => () => void;
group: (id: string) => () => void;
filter: () => boolean;
label: string;
commandEl: Writable;
ids: CommandIds;
updateState: UpdateState;
};
type UpdateState = (key: K, value: State[K], preventScroll?: boolean) => void;
export type ConextStore = Writable;
export type StateStore = Writable & {
updateState: UpdateState;
};
export type Group = {
id: string;
alwaysRender: boolean;
};
export {};