UNPKG

@workday/canvas-kit-react

Version:

The parent module that contains all Workday Canvas Kit React components

64 lines (63 loc) 3.01 kB
"use strict"; var __importDefault = (this && this.__importDefault) || function (mod) { return (mod && mod.__esModule) ? mod : { "default": mod }; }; Object.defineProperty(exports, "__esModule", { value: true }); exports.ComboboxMenu = void 0; const react_1 = __importDefault(require("react")); const common_1 = require("@workday/canvas-kit-react/common"); const menu_1 = require("@workday/canvas-kit-react/menu"); const useComboboxModel_1 = require("./hooks/useComboboxModel"); const ComboboxMenuList_1 = require("./ComboboxMenuList"); const ComboboxCard_1 = require("./ComboboxCard"); const ComboboxPopper_1 = require("./ComboboxPopper"); exports.ComboboxMenu = (0, common_1.createSubcomponent)()({ modelHook: useComboboxModel_1.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: ComboboxPopper_1.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_1.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_1.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_1.ComboboxCard, Divider: menu_1.Menu.Divider, }, })(({ children }, _, model) => { return react_1.default.createElement(menu_1.Menu, { model: model }, children); });