@workday/canvas-kit-react 7.1.4 → 7.2.0-427-next.2

package/dist/commonjs/popup/lib/Popper.js

@@ -1,15 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -29,39 +18,35 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __spreadArrays = (this && this.__spreadArrays) || function () {
-    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
-    for (var r = Array(s), k = 0, i = 0; i < il; i++)
-        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
-            r[k] = a[j];
-    return r;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Popper = void 0;
-var React = __importStar(require("react"));
-var ReactDOM = __importStar(require("react-dom"));
-var PopperJS = __importStar(require("@popperjs/core"));
-var hooks_1 = require("./hooks");
-var common_1 = require("@workday/canvas-kit-react/common");
-exports.Popper = React.forwardRef(function (_a, ref) {
-    var _b = _a.portal, portal = _b === void 0 ? true : _b, _c = _a.open, open = _c === void 0 ? true : _c, elemProps = __rest(_a, ["portal", "open"]);
+const React = __importStar(require("react"));
+const ReactDOM = __importStar(require("react-dom"));
+const PopperJS = __importStar(require("@popperjs/core"));
+const hooks_1 = require("./hooks");
+const common_1 = require("@workday/canvas-kit-react/common");
+/**
+ * A thin wrapper component around the Popper.js positioning engine. For reference:
+ * https://popper.js.org/. `Popper` also automatically works with the {@link PopupStack} system.
+ * `Popper` has no UI and will render any children to the `body` element and position around a
+ * provided `anchorElement`.
+ *
+ * Prefer using {@link PopupPopper Popup.Popper} instead. Use this to make Popups that don't utilize
+ * a PopupModel or any associate popup [hooks](#hooks).
+ *
+ * > **Note:** `Popper` renders any children to a `div` element created by the `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. In v4, an extra
+ * > `div` element was rendered and that's where extra props were spread to. In v5+, you can provide
+ * > your own element if you wish.
+ */
+exports.Popper = React.forwardRef(({ portal = true, open = true, ...elemProps }, ref) => {
     if (!open) {
         return null;
     }
-    return React.createElement(OpenPopper, __assign({ ref: ref, portal: portal }, elemProps));
+    return React.createElement(OpenPopper, Object.assign({ ref: ref, portal: portal }, elemProps));
 });
-var getElementFromRefOrElement = function (input) {
+const getElementFromRefOrElement = (input) => {
     if (input === null) {
         return undefined;
     }
@@ -73,41 +58,43 @@ var getElementFromRefOrElement = function (input) {
     }
 };
 // prevent unnecessary renders if popperOptions are not passed
-var defaultPopperOptions = {};
+const defaultPopperOptions = {};
 // Popper bails early if `open` is false and React hooks cannot be called conditionally,
 // so we're breaking out the open version into another component.
-var OpenPopper = React.forwardRef(function (_a, ref) {
-    var anchorElement = _a.anchorElement, getAnchorClientRect = _a.getAnchorClientRect, _b = _a.popperOptions, popperOptions = _b === void 0 ? defaultPopperOptions : _b, _c = _a.placement, popperPlacement = _c === void 0 ? 'bottom' : _c, onPlacementChange = _a.onPlacementChange, children = _a.children, portal = _a.portal, popperInstanceRef = _a.popperInstanceRef;
-    var firstRender = React.useRef(true);
-    var _d = common_1.useLocalRef(popperInstanceRef), localRef = _d.localRef, elementRef = _d.elementRef;
-    var _e = React.useState(popperPlacement), placement = _e[0], setPlacement = _e[1];
-    var stackRef = hooks_1.usePopupStack(ref, anchorElement);
-    var placementModifier = React.useMemo(function () {
+const OpenPopper = React.forwardRef(({ anchorElement, getAnchorClientRect, popperOptions = defaultPopperOptions, placement: popperPlacement = 'bottom', onPlacementChange, children, portal, popperInstanceRef, }, ref) => {
+    const firstRender = React.useRef(true);
+    const { localRef, elementRef } = common_1.useLocalRef(popperInstanceRef);
+    const [placement, setPlacement] = React.useState(popperPlacement);
+    const stackRef = hooks_1.usePopupStack(ref, anchorElement);
+    const placementModifier = React.useMemo(() => {
         return {
             name: 'setPlacement',
             enabled: true,
             phase: 'main',
-            fn: function (_a) {
-                var state = _a.state;
+            fn({ state }) {
                 setPlacement(state.placement);
                 onPlacementChange === null || onPlacementChange === void 0 ? void 0 : onPlacementChange(state.placement);
             },
         };
     }, [setPlacement, onPlacementChange]);
     // useLayoutEffect prevents flashing of the popup before position is determined
-    React.useLayoutEffect(function () {
-        var anchorEl = getAnchorClientRect
+    React.useLayoutEffect(() => {
+        const anchorEl = getAnchorClientRect
             ? { getBoundingClientRect: getAnchorClientRect }
             : getElementFromRefOrElement(anchorElement !== null && anchorElement !== void 0 ? anchorElement : null);
         if (!anchorEl) {
-            console.warn("Popper: neither anchorElement or getAnchorClientRect was defined. A valid anchorElement or getAnchorClientRect callback must be provided to render a Popper");
+            console.warn(`Popper: neither anchorElement or getAnchorClientRect was defined. A valid anchorElement or getAnchorClientRect callback must be provided to render a Popper`);
             return undefined;
         }
         if (stackRef.current) {
-            var instance_1 = PopperJS.createPopper(anchorEl, stackRef.current, __assign(__assign({ placement: popperPlacement }, popperOptions), { modifiers: __spreadArrays((popperOptions.modifiers || []), [placementModifier]) }));
-            elementRef(instance_1); // update the ref with the instance
-            return function () {
-                instance_1 === null || instance_1 === void 0 ? void 0 : instance_1.destroy();
+            const instance = PopperJS.createPopper(anchorEl, stackRef.current, {
+                placement: popperPlacement,
+                ...popperOptions,
+                modifiers: [...(popperOptions.modifiers || []), placementModifier],
+            });
+            elementRef(instance); // update the ref with the instance
+            return () => {
+                instance === null || instance === void 0 ? void 0 : instance.destroy();
             };
         }
         return undefined;
@@ -116,15 +103,19 @@ var OpenPopper = React.forwardRef(function (_a, ref) {
         // change, only if anchor or target refs change
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [anchorElement, getAnchorClientRect, stackRef]);
-    React.useLayoutEffect(function () {
+    React.useLayoutEffect(() => {
         var _a;
         // Only update options if this is _not_ the first render
         if (!firstRender.current) {
-            (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.setOptions(__assign(__assign({ placement: popperPlacement }, popperOptions), { modifiers: __spreadArrays((popperOptions.modifiers || []), [placementModifier]) }));
+            (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.setOptions({
+                placement: popperPlacement,
+                ...popperOptions,
+                modifiers: [...(popperOptions.modifiers || []), placementModifier],
+            });
         }
         firstRender.current = false;
     }, [popperOptions, popperPlacement, placementModifier, localRef]);
-    var contents = React.createElement(React.Fragment, null, isRenderProp(children) ? children({ placement: placement }) : children);
+    const contents = React.createElement(React.Fragment, null, isRenderProp(children) ? children({ placement }) : children);
     if (!portal) {
         return contents;
     }

package/dist/commonjs/popup/lib/Popup.d.ts

@@ -5,7 +5,24 @@ export interface PopupProps {
      */
     children: React.ReactNode;
 }
-export declare const Popup: import("../../common").ComponentM<PopupProps & Partial<{
+/**
+ * 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} />
+ * </>
+ * ```
+ */
+export declare const Popup: import("@workday/canvas-kit-react/common").ComponentM<PopupProps & Partial<{
     returnFocusRef: React.RefObject<any> | undefined;
     initialFocusRef: React.RefObject<any> | undefined;
     id: string;
@@ -20,7 +37,7 @@ export declare const Popup: import("../../common").ComponentM<PopupProps & Parti
         returnFocusRef: React.RefObject<any> | undefined;
         placement: import("@popperjs/core").Placement;
         id: string;
-        visibility: import("../..").Visibility;
+        visibility: "hidden" | "visible";
     }) => void) | undefined;
     onShow?: ((data: Event | React.SyntheticEvent<Element, Event> | undefined, prevState: {
         stackRef: React.RefObject<HTMLDivElement>;
@@ -29,7 +46,7 @@ export declare const Popup: import("../../common").ComponentM<PopupProps & Parti
         returnFocusRef: React.RefObject<any> | undefined;
         placement: import("@popperjs/core").Placement;
         id: string;
-        visibility: import("../..").Visibility;
+        visibility: "hidden" | "visible";
     }) => void) | undefined;
     onHide?: ((data: Event | React.SyntheticEvent<Element, Event> | undefined, prevState: {
         stackRef: React.RefObject<HTMLDivElement>;
@@ -38,7 +55,7 @@ export declare const Popup: import("../../common").ComponentM<PopupProps & Parti
         returnFocusRef: React.RefObject<any> | undefined;
         placement: import("@popperjs/core").Placement;
         id: string;
-        visibility: import("../..").Visibility;
+        visibility: "hidden" | "visible";
     }) => void) | undefined;
 } & {
     shouldUpdatePlacement?: ((data: {
@@ -50,7 +67,7 @@ export declare const Popup: import("../../common").ComponentM<PopupProps & Parti
         returnFocusRef: React.RefObject<any> | undefined;
         placement: import("@popperjs/core").Placement;
         id: string;
-        visibility: import("../..").Visibility;
+        visibility: "hidden" | "visible";
     }) => boolean) | undefined;
     shouldShow?: ((data: Event | React.SyntheticEvent<Element, Event> | undefined, state: {
         stackRef: React.RefObject<HTMLDivElement>;
@@ -59,7 +76,7 @@ export declare const Popup: import("../../common").ComponentM<PopupProps & Parti
         returnFocusRef: React.RefObject<any> | undefined;
         placement: import("@popperjs/core").Placement;
         id: string;
-        visibility: import("../..").Visibility;
+        visibility: "hidden" | "visible";
     }) => boolean) | undefined;
     shouldHide?: ((data: Event | React.SyntheticEvent<Element, Event> | undefined, state: {
         stackRef: React.RefObject<HTMLDivElement>;
@@ -68,7 +85,7 @@ export declare const Popup: import("../../common").ComponentM<PopupProps & Parti
         returnFocusRef: React.RefObject<any> | undefined;
         placement: import("@popperjs/core").Placement;
         id: string;
-        visibility: import("../..").Visibility;
+        visibility: "hidden" | "visible";
     }) => boolean) | undefined;
 }, {
     state: {
@@ -78,7 +95,7 @@ export declare const Popup: import("../../common").ComponentM<PopupProps & Parti
         returnFocusRef: React.RefObject<any> | undefined;
         placement: import("@popperjs/core").Placement;
         id: string;
-        visibility: import("../..").Visibility;
+        visibility: "hidden" | "visible";
     };
     events: {
         updatePlacement(data: {
@@ -88,7 +105,36 @@ export declare const Popup: import("../../common").ComponentM<PopupProps & Parti
         hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
     };
 }> & {
-    Heading: import("../../common").ElementComponentM<"h2", import("./PopupHeading").PopupHeadingProps, {
+    /**
+     * 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: import("@workday/canvas-kit-react/common").ElementComponentM<import("@workday/canvas-kit-react/common").ElementComponent<"button", import("../..").SecondaryButtonProps>, {}, {
         state: {
             stackRef: React.RefObject<HTMLDivElement>;
             targetRef: React.RefObject<HTMLButtonElement>;
@@ -96,7 +142,7 @@ export declare const Popup: import("../../common").ComponentM<PopupProps & Parti
             returnFocusRef: React.RefObject<any> | undefined;
             placement: import("@popperjs/core").Placement;
             id: string;
-            visibility: import("../..").Visibility;
+            visibility: "hidden" | "visible";
         };
         events: {
             updatePlacement(data: {
@@ -106,7 +152,17 @@ export declare const Popup: import("../../common").ComponentM<PopupProps & Parti
             hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
         };
     }>;
-    Body: import("../../common").ElementComponentM<"div", import("../..").BorderShorthandStyleProps & import("../..").BorderColorStyleProps & import("../..").BorderRadiusStyleProps & import("../..").BorderLineStyleProps & import("../..").BorderWidthStyleProps & import("../..").BorderLogicalStyleProps & import("../..").ColorStyleProps & import("../..").DepthStyleProps & import("../..").FlexItemStyleProps & import("../..").LayoutStyleProps & import("../../layout/lib/utils/other").OtherStyleProps & import("../..").PositionStandardProps & import("../..").PositionLogicalProps & import("../../layout/lib/utils/space").SpaceStandardProps & import("../../layout/lib/utils/space").SpaceLogicalProps & React.HTMLAttributes<HTMLDivElement>, {
+    /**
+     * 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: import("@workday/canvas-kit-react/common").ElementComponentM<"div", import("./PopupPopper").PopupPopperProps, {
         state: {
             stackRef: React.RefObject<HTMLDivElement>;
             targetRef: React.RefObject<HTMLButtonElement>;
@@ -114,7 +170,7 @@ export declare const Popup: import("../../common").ComponentM<PopupProps & Parti
             returnFocusRef: React.RefObject<any> | undefined;
             placement: import("@popperjs/core").Placement;
             id: string;
-            visibility: import("../..").Visibility;
+            visibility: "hidden" | "visible";
         };
         events: {
             updatePlacement(data: {
@@ -124,7 +180,12 @@ export declare const Popup: import("../../common").ComponentM<PopupProps & Parti
             hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
         };
     }>;
-    Card: import("../../common").ElementComponentM<"div", import("./PopupCard").PopupCardProps, {
+    /**
+     * 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: import("@workday/canvas-kit-react/common").ElementComponentM<"div", import("./PopupCard").PopupCardProps, {
         state: {
             stackRef: React.RefObject<HTMLDivElement>;
             targetRef: React.RefObject<HTMLButtonElement>;
@@ -132,7 +193,7 @@ export declare const Popup: import("../../common").ComponentM<PopupProps & Parti
             returnFocusRef: React.RefObject<any> | undefined;
             placement: import("@popperjs/core").Placement;
             id: string;
-            visibility: import("../..").Visibility;
+            visibility: "hidden" | "visible";
         };
         events: {
             updatePlacement(data: {
@@ -142,7 +203,11 @@ export declare const Popup: import("../../common").ComponentM<PopupProps & Parti
             hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
         };
     }>;
-    CloseIcon: import("../../common").ElementComponentM<"button", import("./PopupCloseIcon").PopupCloseIconProps, {
+    /**
+     * 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: import("@workday/canvas-kit-react/common").ElementComponentM<"button", import("./PopupCloseIcon").PopupCloseIconProps, {
         state: {
             stackRef: React.RefObject<HTMLDivElement>;
             targetRef: React.RefObject<HTMLButtonElement>;
@@ -150,7 +215,7 @@ export declare const Popup: import("../../common").ComponentM<PopupProps & Parti
             returnFocusRef: React.RefObject<any> | undefined;
             placement: import("@popperjs/core").Placement;
             id: string;
-            visibility: import("../..").Visibility;
+            visibility: "hidden" | "visible";
         };
         events: {
             updatePlacement(data: {
@@ -160,7 +225,13 @@ export declare const Popup: import("../../common").ComponentM<PopupProps & Parti
             hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
         };
     }>;
-    Target: import("../../common").ElementComponentM<import("../../common").ElementComponent<"button", import("../..").SecondaryButtonProps>, {}, {
+    /**
+     * 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: import("@workday/canvas-kit-react/common").ElementComponentM<"h2", import("./PopupHeading").PopupHeadingProps, {
         state: {
             stackRef: React.RefObject<HTMLDivElement>;
             targetRef: React.RefObject<HTMLButtonElement>;
@@ -168,7 +239,7 @@ export declare const Popup: import("../../common").ComponentM<PopupProps & Parti
             returnFocusRef: React.RefObject<any> | undefined;
             placement: import("@popperjs/core").Placement;
             id: string;
-            visibility: import("../..").Visibility;
+            visibility: "hidden" | "visible";
         };
         events: {
             updatePlacement(data: {
@@ -178,7 +249,11 @@ export declare const Popup: import("../../common").ComponentM<PopupProps & Parti
             hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
         };
     }>;
-    Popper: import("../../common").ElementComponentM<"div", import("./PopupPopper").PopupPopperProps, {
+    /**
+     * 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: import("@workday/canvas-kit-react/common").ElementComponentM<"div", import("../..").BackgroundStyleProps & import("../../layout/lib/utils/border/color").BorderColorStyleProps & import("../../layout/lib/utils/border/lineStyle").BorderLineStyleProps & import("../../layout/lib/utils/border/radius").BorderRadiusStyleProps & import("../../layout/lib/utils/border/shorthand").BorderShorthandStyleProps & import("../../layout/lib/utils/border/width").BorderWidthStyleProps & import("../..").ColorStyleProps & import("../..").DepthStyleProps & import("../..").FlexItemStyleProps & import("../..").GridItemStyleProps & import("../..").LayoutStyleProps & import("../..").OtherStyleProps & import("../..").PositionStyleProps & import("../..").SpaceStyleProps & import("../..").TextStyleProps & React.HTMLAttributes<HTMLDivElement>, {
         state: {
             stackRef: React.RefObject<HTMLDivElement>;
             targetRef: React.RefObject<HTMLButtonElement>;
@@ -186,7 +261,7 @@ export declare const Popup: import("../../common").ComponentM<PopupProps & Parti
             returnFocusRef: React.RefObject<any> | undefined;
             placement: import("@popperjs/core").Placement;
             id: string;
-            visibility: import("../..").Visibility;
+            visibility: "hidden" | "visible";
         };
         events: {
             updatePlacement(data: {
@@ -196,7 +271,13 @@ export declare const Popup: import("../../common").ComponentM<PopupProps & Parti
             hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
         };
     }>;
-    CloseButton: import("../../common").ElementComponentM<import("../../common").ElementComponent<"button", import("../..").SecondaryButtonProps>, import("./PopupCloseButton").PopupCloseButtonProps, {
+    /**
+     * 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: import("@workday/canvas-kit-react/common").ElementComponentM<import("@workday/canvas-kit-react/common").ElementComponent<"button", import("../..").SecondaryButtonProps>, import("./PopupCloseButton").PopupCloseButtonProps, {
         state: {
             stackRef: React.RefObject<HTMLDivElement>;
             targetRef: React.RefObject<HTMLButtonElement>;
@@ -204,7 +285,7 @@ export declare const Popup: import("../../common").ComponentM<PopupProps & Parti
             returnFocusRef: React.RefObject<any> | undefined;
             placement: import("@popperjs/core").Placement;
             id: string;
-            visibility: import("../..").Visibility;
+            visibility: "hidden" | "visible";
         };
         events: {
             updatePlacement(data: {

package/dist/commonjs/popup/lib/Popup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Popup.d.ts","sourceRoot":"","sources":["../../../../popup/lib/Popup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAa/B,MAAM,WAAW,UAAU;IACzB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAchB,CAAC"}
+{"version":3,"file":"Popup.d.ts","sourceRoot":"","sources":["../../../../popup/lib/Popup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAa/B,MAAM,WAAW,UAAU;IACzB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAId;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA4BG;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;OASG;;;;;;;;;;;;;;;;;;;IAEH;;;;OAIG;;;;;;;;;;;;;;;;;;;IAEH;;;OAGG;;;;;;;;;;;;;;;;;;;IAEH;;;;;OAKG;;;;;;;;;;;;;;;;;;;IAEH;;;OAGG;;;;;;;;;;;;;;;;;;;IAEH;;;;;OAKG;;;;;;;;;;;;;;;;;;;CAKL,CAAC"}

package/dist/commonjs/popup/lib/Popup.js

@@ -20,29 +20,109 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Popup = void 0;
-var React = __importStar(require("react"));
-var common_1 = require("@workday/canvas-kit-react/common");
-var hooks_1 = require("./hooks");
-var PopupCard_1 = require("./PopupCard");
-var PopupTarget_1 = require("./PopupTarget");
-var PopupPopper_1 = require("./PopupPopper");
-var PopupHeading_1 = require("./PopupHeading");
-var PopupCloseIcon_1 = require("./PopupCloseIcon");
-var PopupCloseButton_1 = require("./PopupCloseButton");
-var PopupBody_1 = require("./PopupBody");
+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 = common_1.createContainer()({
     displayName: 'Popup',
     modelHook: hooks_1.usePopupModel,
     subComponents: {
-        Heading: PopupHeading_1.PopupHeading,
-        Body: PopupBody_1.PopupBody,
-        Card: PopupCard_1.PopupCard,
-        CloseIcon: PopupCloseIcon_1.PopupCloseIcon,
+        /**
+         * 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,
     },
-})(function (_a) {
-    var children = _a.children;
+})(({ children }) => {
     return React.createElement(React.Fragment, null, children);
 });

package/dist/commonjs/popup/lib/PopupBody.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-export declare const PopupBody: import("../../common").ElementComponentM<"div", import("../..").BorderShorthandStyleProps & import("../..").BorderColorStyleProps & import("../..").BorderRadiusStyleProps & import("../..").BorderLineStyleProps & import("../..").BorderWidthStyleProps & import("../..").BorderLogicalStyleProps & import("../..").ColorStyleProps & import("../..").DepthStyleProps & import("../..").FlexItemStyleProps & import("../..").LayoutStyleProps & import("../../layout/lib/utils/other").OtherStyleProps & import("../..").PositionStandardProps & import("../..").PositionLogicalProps & import("../../layout/lib/utils/space").SpaceStandardProps & import("../../layout/lib/utils/space").SpaceLogicalProps & React.HTMLAttributes<HTMLDivElement>, {
+export declare const PopupBody: import("@workday/canvas-kit-react/common").ElementComponentM<"div", import("../..").BackgroundStyleProps & import("../../layout/lib/utils/border/color").BorderColorStyleProps & import("../../layout/lib/utils/border/lineStyle").BorderLineStyleProps & import("../../layout/lib/utils/border/radius").BorderRadiusStyleProps & import("../../layout/lib/utils/border/shorthand").BorderShorthandStyleProps & import("../../layout/lib/utils/border/width").BorderWidthStyleProps & import("../..").ColorStyleProps & import("../..").DepthStyleProps & import("../..").FlexItemStyleProps & import("../..").GridItemStyleProps & import("../..").LayoutStyleProps & import("../..").OtherStyleProps & import("../..").PositionStyleProps & import("../..").SpaceStyleProps & import("../..").TextStyleProps & React.HTMLAttributes<HTMLDivElement>, {
     state: {
         stackRef: React.RefObject<HTMLDivElement>;
         targetRef: React.RefObject<HTMLButtonElement>;
@@ -7,7 +7,7 @@ export declare const PopupBody: import("../../common").ElementComponentM<"div",
         returnFocusRef: React.RefObject<any> | undefined;
         placement: import("@popperjs/core").Placement;
         id: string;
-        visibility: import("../..").Visibility;
+        visibility: "hidden" | "visible";
     };
     events: {
         updatePlacement(data: {

package/dist/commonjs/popup/lib/PopupBody.js

@@ -1,15 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -31,13 +20,13 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PopupBody = void 0;
-var React = __importStar(require("react"));
-var common_1 = require("@workday/canvas-kit-react/common");
-var card_1 = require("@workday/canvas-kit-react/card");
-var hooks_1 = require("./hooks");
+const React = __importStar(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const card_1 = require("@workday/canvas-kit-react/card");
+const hooks_1 = require("./hooks");
 exports.PopupBody = common_1.createSubcomponent('div')({
     displayName: 'Popup.Body',
     modelHook: hooks_1.usePopupModel,
-})(function (elemProps) {
-    return React.createElement(card_1.Card.Body, __assign({ overflowY: "auto" }, elemProps));
+})(elemProps => {
+    return React.createElement(card_1.Card.Body, Object.assign({ overflowY: "auto", padding: "xxs" }, elemProps));
 });