@workday/canvas-kit-react/dist/commonjs/action-bar/lib/ActionBar.js

The parent module that contains all Workday Canvas Kit React components

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ActionBar = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const common_1 = require("@workday/canvas-kit-react/common");
const menu_1 = require("@workday/canvas-kit-react/menu");
const useActionBarModel_1 = require("./useActionBarModel");
const ActionBarList_1 = require("./ActionBarList");
const ActionBarOverflowButton_1 = require("./ActionBarOverflowButton");
const ActionBarItem_1 = require("./ActionBarItem");
/**
 * `ActionBar` is a container component that is responsible for creating an {@link ActionBarModel}
 * and sharing it with its subcomponents using React context. It does not represent a real element.
 *
 * ```tsx
 * <ActionBar items={[]}>{Child components}</ActionBar>
 * ```
 *
 * Alternatively, you may pass in a model using the hoisted model pattern.
 *
 * ```tsx
 * const model = useActionBarModel({
 *   items: [],
 * });
 *
 * <ActionBar model={model}>{Child components}</ActionBar>;
 * ```
 */
exports.ActionBar = (0, common_1.createContainer)()({
    displayName: 'ActionBar',
    modelHook: useActionBarModel_1.useActionBarModel,
    subComponents: {
        /**
         * `ActionBar.List` is a {@link Flex} element. It is a container for
         * {@link ActionBarItem ActionBar.Item} subcomponents. To render an overflow button for
         * ActionBar with overflow behavior `overflowButton` prop with overflow button component as a
         * value should be passed.
         *
         * ```tsx
         * // without overflow
         * <ActionBar.List>{ActionBar.Items}</ActionBar.List>
         *
         * // with overflow
         * <ActionBar.List overflowButton={<ActionBar.OverflowButton aria-label="More actions"/>}>
         *   {ActionBar.Items}
         * </ActionBar.List>
         * ```
         */
        List: ActionBarList_1.ActionBarList,
        /**
         * `ActionBar.Item` is a `button` element, by default it's a `SecondaryButton` unless an `as`
         * prop is passed.
         *
         * ```tsx
         * <ActionBar.Item as={PrimaryButton} onClick={() => console.log('first action')}>
         *   First Action
         * </ActionBar.Item>
         * ```
         */
        Item: ActionBarItem_1.ActionBarItem,
        OverflowButton: ActionBarOverflowButton_1.ActionBarOverflowButton,
        /**
         * The overflow menu of the ActionBar component. If there isn't enough room to render all the action
         * items, the extra actions that don't fit will be overflowed into this menu.
         * @example
         * <ActionBar.Menu.Popper>
         *   <ActionBar.Menu.Card>
         *     <ActionBar.Menu.List>
         *       {(item: MyActionItem) => <ActionBar.Menu.Item>{item.text}</ActionBar.Menu.Item>}
         *     </ActionBar.Menu.List>
         *   </ActionBar.Menu.Card>
         * </ActionBar.Menu.Popper>
         */
        Menu: menu_1.Menu,
    },
})(({ children }, _, model) => {
    return (0, jsx_runtime_1.jsx)(menu_1.Menu, { model: model.menu, children: children });
});