@workday/canvas-kit-react/dist/commonjs/popup/lib/Popup.js

The parent module that contains all Workday Canvas Kit React components

"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Popup = void 0;
const React = __importStar(require("react"));
const common_1 = require("@workday/canvas-kit-react/common");
const hooks_1 = require("./hooks");
const PopupCard_1 = require("./PopupCard");
const PopupTarget_1 = require("./PopupTarget");
const PopupPopper_1 = require("./PopupPopper");
const PopupHeading_1 = require("./PopupHeading");
const PopupCloseIcon_1 = require("./PopupCloseIcon");
const PopupCloseButton_1 = require("./PopupCloseButton");
const PopupBody_1 = require("./PopupBody");
/**
 * This component is a container component that has no semantic element. It provides a React Context
 * model for all Popup subcomponents. A `model` can be manually passed to subcomponents to override
 * the model context.
 *
 * ```tsx
 * // using Popup
 * <Popup model={model}>
 *   <Popup.Target /> // no model here
 * </Popup>
 *
 * // using models on subcomponents
 * <>
 *   <Popup.Target model={model} />
 * </>
 * ```
 */
exports.Popup = (0, common_1.createContainer)()({
    displayName: 'Popup',
    modelHook: hooks_1.usePopupModel,
    subComponents: {
        /**
         * A `Popup.Target` is any element that is meant to show the Popup. The default component
         * rendered by this component is a {@link SecondaryButton} element. You can override this by
         * passing the desired component via `as`. Many examples above use `as={DeleteButton}`. If you
         * want to render a {@link TertiaryButton} instead, use `as={TertiaryButton}`. The behavior hook
         * used is called {@link usePopupTarget}.
         *
         * ```tsx
         * const model = usePopupModel();
         *
         * // using this component
         * <Popup.Target>Show Popup</Popup.Target>
         *
         * // using props instead
         * const popupTargetButtonProps = usePopupTarget(model);
         * <SecondaryButton {...popupTargetButtonProps}>Show Popup</SecondaryButton>
         * ```
         *
         * `Popup.Target` doesn't provide any styling by default. All styling comes from the default
         * component used, which is {@link SecondaryButton}. If you don't want any styling, you can do
         * the following:
         *
         * ```tsx
         * <Popup.Target as="button">Open</Popup.Target>
         * ```
         *
         * To add your own styling, you could either add a `css` prop, or make a styled button and pass
         * that styled component via the `as` prop.
         */
        Target: PopupTarget_1.PopupTarget,
        /**
         * A `Popup.Popper` is a {@link Popper} component that is hooked up to the {@link PopupModel}
         * automatically. The behavior hook used is called {@link usePopupPopper}.
         *
         * > **Note:** `Popup.Popper` renders any children to a `div` element created by the
         * > {@link PopupStack}. This element is not controlled by React, so any extra element props
         * > will _not_ be forwarded. The `ref` will point to the `div` element created by the
         * > `PopupStack`, however. If you wish to add extra props to an element, add them to the
         * > {@link PopupCard Popup.Card} instead.
         */
        Popper: PopupPopper_1.PopupPopper,
        /**
         * A `Popup.Card` is a wrapper around the {@link Card} component, but hooked up to a
         * {@link PopupModel}. By default, this element has a `role=dialog` and an `aria-labelledby`.
         * The behavior hook used is called {@link usePopupCard}.
         */
        Card: PopupCard_1.PopupCard,
        /**
         * A `Popup.CloseIcon` is an icon button that is the `X` in the top of a popup. It will hide a
         * popup when clicked. The behavior hook used is called {@link usePopupCloseButton}.
         */
        CloseIcon: PopupCloseIcon_1.PopupCloseIcon,
        /**
         * A `Popup.Heading` is a wrapper around {@link CardHeading Card.Heading} that connect the
         * heading to a {@link PopupModel}. It will add an `id` to the element that match the
         * `aria-labelledby` that is applied to the `Popup.Card` element for accessibility. The behavior
         * hook used is called {@link usePopupHeading}.
         */
        Heading: PopupHeading_1.PopupHeading,
        /**
         * A `Popup.Body` is a thin wrapper around {@link CardBody Card.Body} and doesn't actually take
         * a model. It adds `body` styling and nothing else.
         */
        Body: PopupBody_1.PopupBody,
        /**
         * A `Popup.CloseButton` is a button that will hide a popup. By default, this is a
         * {@link SecondaryButton} component, but `as` can be used to render any button element (i.e
         * {@link DeleteButton} or {@link PrimaryButton}). The behavior hook used is called
         * {@link usePopupCloseButton}.
         */
        CloseButton: PopupCloseButton_1.PopupCloseButton,
    },
})(({ children }) => {
    return React.createElement(React.Fragment, null, children);
});