@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
461 lines • 19 kB
TypeScript
import React from 'react';
export interface ComboboxMenuProps {
/**
* Children of the {@link ComboboxMenu Combobox.Menu}.
*/
children: React.ReactNode;
}
export declare const ComboboxMenu: import("@workday/canvas-kit-react/common").ElementComponentM<React.FC<{}>, ComboboxMenuProps, {
state: {
stackRef: React.RefObject<HTMLDivElement>;
targetRef: React.RefObject<HTMLButtonElement>;
initialFocusRef: React.RefObject<any> | undefined;
returnFocusRef: React.RefObject<any> | undefined;
placement: import("@popperjs/core").Placement;
id: string;
visibility: "hidden" | "visible";
selectedIds: string[] | "all";
unselectedIds: string[];
cursorId: string;
columnCount: number;
pageSizeRef: React.MutableRefObject<number>;
cursorIndexRef: {
readonly current: number;
};
UNSTABLE_virtual: {
virtualItems: import("../..").VirtualItem[];
totalSize: number;
scrollToOffset: (index: number, options?: import("../..").ScrollToOffsetOptions | undefined) => void;
scrollToIndex: (index: number, options?: import("../../collection/lib/react-virtual").ScrollToIndexOptions | undefined) => void;
measure: () => void;
};
UNSTABLE_defaultItemHeight: number;
containerRef: React.RefObject<HTMLDivElement>;
orientation: "horizontal" | "vertical";
indexRef: React.MutableRefObject<number>;
nonInteractiveIds: string[];
isVirtualized: boolean;
items: import("../..").Item<any>[];
mode: "multiple" | "single";
value: string | undefined;
inputRef: React.RefObject<HTMLInputElement>;
width: number;
};
events: {
setWidth(width: number): void;
updatePlacement(data: {
placement: import("@popperjs/core").Placement;
}): void;
show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
select(data: {
id: string;
}): void;
selectAll(): void;
unselectAll(): void;
setSelectedIds(ids: string[] | "all"): void;
remove(data: {
id: string;
nextId?: string | undefined;
event?: Event | React.SyntheticEvent<Element, Event> | undefined;
}): void;
goTo(data: {
id: string;
}): void;
goToNext(): void;
goToPrevious(): void;
goToPreviousRow(): void;
goToNextRow(): void;
goToFirst(): void;
goToLast(): void;
goToFirstOfRow(): void;
goToLastOfRow(): void;
goToNextPage(): void;
goToPreviousPage(): void;
registerItem(data: {
id: string;
textValue: string;
}): void;
unregisterItem(data: {
id: string;
}): void;
updateItemHeight(data: {
value: number;
}): void;
};
onFilterChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
selection: import("../..").SelectionManager;
navigation: import("../..").NavigationManager;
getId: (item: any) => string;
}> & {
/**
* The "Popper" of a {@link ComboboxMenu Combobox.Menu}. The popper will appear around the
* {@link ComboboxInput Combobox.Input}. It renders a `div` element that is portalled to the
* `document.body` which is controlled by the {@link PopupStack}. The `PopupStack` is not part
* of React. This means no extra props given to this component will be forwarded to the `div`
* element, but the `ref` will be forwarded. Also fallback placements for the popper with be either `top` or `bottom`.
*/
Popper: import("@workday/canvas-kit-react/common").ElementComponentM<"div", import("../..").PopperProps & React.RefAttributes<HTMLDivElement>, {
state: {
stackRef: React.RefObject<HTMLDivElement>;
targetRef: React.RefObject<HTMLButtonElement>;
initialFocusRef: React.RefObject<any> | undefined;
returnFocusRef: React.RefObject<any> | undefined;
placement: import("@popperjs/core").Placement;
id: string;
visibility: "hidden" | "visible";
selectedIds: string[] | "all";
unselectedIds: string[];
cursorId: string;
columnCount: number;
pageSizeRef: React.MutableRefObject<number>;
cursorIndexRef: {
readonly current: number;
};
UNSTABLE_virtual: {
virtualItems: import("../..").VirtualItem[];
totalSize: number;
scrollToOffset: (index: number, options?: import("../..").ScrollToOffsetOptions | undefined) => void;
scrollToIndex: (index: number, options?: import("../../collection/lib/react-virtual").ScrollToIndexOptions | undefined) => void;
measure: () => void;
};
UNSTABLE_defaultItemHeight: number;
containerRef: React.RefObject<HTMLDivElement>;
orientation: "horizontal" | "vertical";
indexRef: React.MutableRefObject<number>;
nonInteractiveIds: string[];
isVirtualized: boolean;
items: import("../..").Item<any>[];
mode: "multiple" | "single";
};
events: {
updatePlacement(data: {
placement: import("@popperjs/core").Placement;
}): void;
show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
select(data: {
id: string;
}): void;
selectAll(): void;
unselectAll(): void;
setSelectedIds(ids: string[] | "all"): void;
remove(data: {
id: string;
nextId?: string | undefined;
event?: Event | React.SyntheticEvent<Element, Event> | undefined;
}): void;
goTo(data: {
id: string;
}): void;
goToNext(): void;
goToPrevious(): void;
goToPreviousRow(): void;
goToNextRow(): void;
goToFirst(): void;
goToLast(): void;
goToFirstOfRow(): void;
goToLastOfRow(): void;
goToNextPage(): void;
goToPreviousPage(): void;
registerItem(data: {
id: string;
textValue: string;
}): void;
unregisterItem(data: {
id: string;
}): void;
updateItemHeight(data: {
value: number;
}): void;
};
selection: import("../..").SelectionManager;
navigation: import("../..").NavigationManager;
getId: (item: any) => string;
}>;
/**
* The combobox menu list follows the Collections API. A list can either contain static items or
* a render prop and `items` to the model.
*
* ```tsx
* const MyComponent = () => {
* const model = useComboboxModel({
* items: ['First Item', 'Second Item']
* })
*
* return (
* <Combobox model={model}>
* // other combobox subcomponents
* <Combobox.Menu.List>
* {(item) => <Combobox.Menu.Item>{item}</Combobox.Menu.Item>}
* </Combobox.Menu.List>
* </Combobox>
* )
* }
* ```
*/
List: import("@workday/canvas-kit-react/common").ElementComponentM<"ul", import("./ComboboxMenuList").ComboboxMenuListProps<any>, {
state: {
stackRef: React.RefObject<HTMLDivElement>;
targetRef: React.RefObject<HTMLButtonElement>;
initialFocusRef: React.RefObject<any> | undefined;
returnFocusRef: React.RefObject<any> | undefined;
placement: import("@popperjs/core").Placement;
id: string;
visibility: "hidden" | "visible";
selectedIds: string[] | "all";
unselectedIds: string[];
cursorId: string;
columnCount: number;
pageSizeRef: React.MutableRefObject<number>;
cursorIndexRef: {
readonly current: number;
};
UNSTABLE_virtual: {
virtualItems: import("../..").VirtualItem[];
totalSize: number;
scrollToOffset: (index: number, options?: import("../..").ScrollToOffsetOptions | undefined) => void;
scrollToIndex: (index: number, options?: import("../../collection/lib/react-virtual").ScrollToIndexOptions | undefined) => void;
measure: () => void;
};
UNSTABLE_defaultItemHeight: number;
containerRef: React.RefObject<HTMLDivElement>;
orientation: "horizontal" | "vertical";
indexRef: React.MutableRefObject<number>;
nonInteractiveIds: string[];
isVirtualized: boolean;
items: import("../..").Item<any>[];
mode: "multiple" | "single";
value: string | undefined;
inputRef: React.RefObject<HTMLInputElement>;
width: number;
};
events: {
setWidth(width: number): void;
updatePlacement(data: {
placement: import("@popperjs/core").Placement;
}): void;
show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
select(data: {
id: string;
}): void;
selectAll(): void;
unselectAll(): void;
setSelectedIds(ids: string[] | "all"): void;
remove(data: {
id: string;
nextId?: string | undefined;
event?: Event | React.SyntheticEvent<Element, Event> | undefined;
}): void;
goTo(data: {
id: string;
}): void;
goToNext(): void;
goToPrevious(): void;
goToPreviousRow(): void;
goToNextRow(): void;
goToFirst(): void;
goToLast(): void;
goToFirstOfRow(): void;
goToLastOfRow(): void;
goToNextPage(): void;
goToPreviousPage(): void;
registerItem(data: {
id: string;
textValue: string;
}): void;
unregisterItem(data: {
id: string;
}): void;
updateItemHeight(data: {
value: number;
}): void;
};
onFilterChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
selection: import("../..").SelectionManager;
navigation: import("../..").NavigationManager;
getId: (item: any) => string;
}>;
/**
* `Combobox.Menu.Item` has an optional `data-id` prop that identifies the item in the
* `Combobox.Menu.List` and will be passed to the optional `onSelect` callback of the
* `ComboboxModel`. `Combobox.Menu.Item` can contain any HTML.
*/
Item: import("@workday/canvas-kit-react/common").ElementComponentM<"li", import("../../menu/lib/MenuOption").MenuOptionProps, {
state: {
stackRef: React.RefObject<HTMLDivElement>;
targetRef: React.RefObject<HTMLButtonElement>;
initialFocusRef: React.RefObject<any> | undefined;
returnFocusRef: React.RefObject<any> | undefined;
placement: import("@popperjs/core").Placement;
id: string;
visibility: "hidden" | "visible";
selectedIds: string[] | "all";
unselectedIds: string[];
cursorId: string;
columnCount: number;
pageSizeRef: React.MutableRefObject<number>;
cursorIndexRef: {
readonly current: number;
};
UNSTABLE_virtual: {
virtualItems: import("../..").VirtualItem[];
totalSize: number;
scrollToOffset: (index: number, options?: import("../..").ScrollToOffsetOptions | undefined) => void;
scrollToIndex: (index: number, options?: import("../../collection/lib/react-virtual").ScrollToIndexOptions | undefined) => void;
measure: () => void;
};
UNSTABLE_defaultItemHeight: number;
containerRef: React.RefObject<HTMLDivElement>;
orientation: "horizontal" | "vertical";
indexRef: React.MutableRefObject<number>;
nonInteractiveIds: string[];
isVirtualized: boolean;
items: import("../..").Item<any>[];
mode: "multiple" | "single";
};
events: {
updatePlacement(data: {
placement: import("@popperjs/core").Placement;
}): void;
show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
select(data: {
id: string;
}): void;
selectAll(): void;
unselectAll(): void;
setSelectedIds(ids: string[] | "all"): void;
remove(data: {
id: string;
nextId?: string | undefined;
event?: Event | React.SyntheticEvent<Element, Event> | undefined;
}): void;
goTo(data: {
id: string;
}): void;
goToNext(): void;
goToPrevious(): void;
goToPreviousRow(): void;
goToNextRow(): void;
goToFirst(): void;
goToLast(): void;
goToFirstOfRow(): void;
goToLastOfRow(): void;
goToNextPage(): void;
goToPreviousPage(): void;
registerItem(data: {
id: string;
textValue: string;
}): void;
unregisterItem(data: {
id: string;
}): void;
updateItemHeight(data: {
value: number;
}): void;
};
selection: import("../..").SelectionManager;
navigation: import("../..").NavigationManager;
getId: (item: any) => string;
}> & {
Icon: (elemProps: import("../..").SystemIconProps) => React.JSX.Element;
Text: ({ children }: {
children?: React.ReactNode;
}) => React.JSX.Element;
};
/**
* `Combobox.Menu.Card` is a non-semantic element used to give the dropdown menu its distinct visual
* cue that the dropdown menu is floating above other content. `Combobox.Menu.Card` usually contains a
* `Combobox.Menu.List`, but it can also contain other elements like a header or footer.
*/
Card: import("@workday/canvas-kit-react/common").ElementComponentM<"div", import("./ComboboxCard").ComboboxCardProps, {
state: {
stackRef: React.RefObject<HTMLDivElement>;
targetRef: React.RefObject<HTMLButtonElement>;
initialFocusRef: React.RefObject<any> | undefined;
returnFocusRef: React.RefObject<any> | undefined;
placement: import("@popperjs/core").Placement;
id: string;
visibility: "hidden" | "visible";
selectedIds: string[] | "all";
unselectedIds: string[];
cursorId: string;
columnCount: number;
pageSizeRef: React.MutableRefObject<number>;
cursorIndexRef: {
readonly current: number;
};
UNSTABLE_virtual: {
virtualItems: import("../..").VirtualItem[];
totalSize: number;
scrollToOffset: (index: number, options?: import("../..").ScrollToOffsetOptions | undefined) => void;
scrollToIndex: (index: number, options?: import("../../collection/lib/react-virtual").ScrollToIndexOptions | undefined) => void;
measure: () => void;
};
UNSTABLE_defaultItemHeight: number;
containerRef: React.RefObject<HTMLDivElement>;
orientation: "horizontal" | "vertical";
indexRef: React.MutableRefObject<number>;
nonInteractiveIds: string[];
isVirtualized: boolean;
items: import("../..").Item<any>[];
mode: "multiple" | "single";
value: string | undefined;
inputRef: React.RefObject<HTMLInputElement>;
width: number;
};
events: {
setWidth(width: number): void;
updatePlacement(data: {
placement: import("@popperjs/core").Placement;
}): void;
show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
select(data: {
id: string;
}): void;
selectAll(): void;
unselectAll(): void;
setSelectedIds(ids: string[] | "all"): void;
remove(data: {
id: string;
nextId?: string | undefined;
event?: Event | React.SyntheticEvent<Element, Event> | undefined;
}): void;
goTo(data: {
id: string;
}): void;
goToNext(): void;
goToPrevious(): void;
goToPreviousRow(): void;
goToNextRow(): void;
goToFirst(): void;
goToLast(): void;
goToFirstOfRow(): void;
goToLastOfRow(): void;
goToNextPage(): void;
goToPreviousPage(): void;
registerItem(data: {
id: string;
textValue: string;
}): void;
unregisterItem(data: {
id: string;
}): void;
updateItemHeight(data: {
value: number;
}): void;
};
onFilterChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
selection: import("../..").SelectionManager;
navigation: import("../..").NavigationManager;
getId: (item: any) => string;
}>;
Divider: import("@workday/canvas-kit-react/common").ElementComponent<"hr", unknown>;
};
//# sourceMappingURL=ComboboxMenu.d.ts.map