@workday/canvas-kit-react/dist/commonjs/menu/lib/Menu.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.Menu = void 0;
const react_1 = __importDefault(require("react"));
const common_1 = require("@workday/canvas-kit-react/common");
const useMenuModel_1 = require("./useMenuModel");
const MenuPopper_1 = require("./MenuPopper");
const MenuTarget_1 = require("./MenuTarget");
const MenuItem_1 = require("./MenuItem");
const MenuCard_1 = require("./MenuCard");
const MenuList_1 = require("./MenuList");
const MenuDivider_1 = require("./MenuDivider");
const MenuOption_1 = require("./MenuOption");
const MenuGroup_1 = require("./MenuGroup");
/**
 * `Menu` is a combination of a popup and a list. It usually has some type of target element that
 * expands/collapses the menu and a `menu` role and and several `menuitem` roles. Focus is managed
 * using [roving tabindex](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex) for maximum
 * compatibility. A `Menu` can have two modes: `single` and `multiple`. This mode determines both
 * how many items can be selected as well as the default behavior when a `menuitem` is clicked. For
 * the `single` mode, selecting a `menuitem` will select and close the menu. For the `multiple`
 * mode, clicking a `menuitem` will toggle selection and will not close the menu.
 *
 * ```tsx
 * <Menu>
 *   <Menu.Target>Open</Menu.Target>
 *   <Menu.Popper>
 *     <Menu.Card>
 *       <Menu.List>
 *         <Menu.Item data-id="first">First Item</Menu.Item>
 *         <Menu.Item data-id="second">Second Item</Menu.Item>
 *       </Menu.List>
 *     </Menu.Card>
 *   </Menu.Popper>
 * </Menu>
 * ```
 */
exports.Menu = (0, common_1.createContainer)()({
    displayName: 'Menu',
    modelHook: useMenuModel_1.useMenuModel,
    subComponents: {
        /**
         * `Menu.Target` is similar to all {@link PopupTarget Popup.Target} types. The component only
         * provides behavior and no styling. The `as` prop is used to determine which component is
         * rendered. This component should forward the `ref` and apply any additional props directly to
         * an element. The default `as` is a {@link SecondaryButton}. Any Canvas Kit component should
         * work with an `as`.
         *
         * An example changing to a {@link PrimaryButton}
         *
         * ```tsx
         * <Menu.Target as={PrimaryButton}>Primary Button Text</Menu.Target>
         * ```
         *
         * This element will apply `aria-haspopup` and `aria-expanded` to inform screen readers there's
         * a popup associated with the element.
         */
        Target: MenuTarget_1.MenuTarget,
        /**
         * The 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. A menu card usually contains a
         * menu list, but can also contain other elements like a header or footer.
         */
        Card: MenuCard_1.MenuCard,
        /**
         * The 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 = useMenuModel({
         *     items: [
         *       { id: 'first',  text: 'First Item' },
         *       { id: 'second', text: 'Second Item' },
         *     ]
         *   })
         *
         *   return (
         *     <Menu model={model}>
         *       <Menu.List>
         *         {(item) => <Menu.Item data-id={item.id}>{item.text}</Menu.Item>}
         *       </Menu.List>
         *     </Menu>
         *   )
         * }
         * ```
         */
        List: MenuList_1.MenuList,
        /**
         * A `Menu.Item` has an optional `data-id` prop that identifies the item in the `Menu.List` and
         * will be passed to the optional `onSelect` callback of the `Menu` model. A `Menu.Item` can
         * contain any HTML. If more complex HTML is provided, add `data-text` to the `Menu.Item`
         * component if using the static API. If you're using the dynamic API, pass `getTextValue` to
         * the model.
         */
        Item: MenuItem_1.MenuItem,
        Group: MenuGroup_1.MenuGroup,
        /**
         * A `Menu.Option` is similar to the `Menu.Item`, but has a `role=option` and works with
         * `aria-activedescendant` and is selectable with a selected checkmark. It adds the
         * `aria-selected="true/false"` attribute. `Menu.Option` requires much more accessibility
         * behavior composed into the `Menu.Target` and `Menu.List` component. The `Combobox` and
         * `Select` components make use of the `Menu.Option`. See those components for a better idea of
         * how behavior is composed.
         */
        Option: MenuOption_1.MenuOption,
        Divider: MenuDivider_1.MenuDivider,
        /**
         * A `Menu.TargetContext` is the same as a {@link MenuTarget Menu.Target}, except it adds a
         * `context` event handler instead of a `click` handler to trigger context menus.
         */
        TargetContext: MenuTarget_1.MenuTargetContext,
        /**
         * The "Popper" of a menu. The popper will appear around the {@link MenuTarget Menu.Target}. 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.
         */
        Popper: MenuPopper_1.MenuPopper,
    },
})(({ children }) => {
    return react_1.default.createElement(react_1.default.Fragment, null, children);
});