@workday/canvas-kit-react/dist/commonjs/combobox/lib/ComboboxMenu.js

The parent module that contains all Workday Canvas Kit React components

"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);
});