@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
58 lines (57 loc) • 2.63 kB
JavaScript
import React from 'react';
import { createSubcomponent } from '@workday/canvas-kit-react/common';
import { Menu } from '@workday/canvas-kit-react/menu';
import { useComboboxModel } from './hooks/useComboboxModel';
import { ComboboxMenuList } from './ComboboxMenuList';
import { ComboboxCard } from './ComboboxCard';
import { ComboboxMenuPopper } from './ComboboxPopper';
export const ComboboxMenu = createSubcomponent()({
modelHook: useComboboxModel,
subComponents: {
/**
* 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: ComboboxMenuPopper,
/**
* 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: ComboboxMenuList,
/**
* `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: Menu.Option,
/**
* `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: ComboboxCard,
Divider: Menu.Divider,
},
})(({ children }, _, model) => {
return React.createElement(Menu, { model: model }, children);
});