@workday/canvas-kit-react 8.5.0-339-next.0 → 8.5.0-342-next.2

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

@@ -1 +1 @@
-{"version":3,"file":"Popper.d.ts","sourceRoot":"","sources":["../../../../popup/lib/Popper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,QAAQ,MAAM,gBAAgB,CAAC;AAE3C,oBAAY,SAAS,GAAG,QAAQ,CAAC,SAAS,CAAC;AAC3C,oBAAY,aAAa,GAAG,QAAQ,CAAC,OAAO,CAAC;AAK7C,MAAM,WAAW,WAAW;IAC1B;;;;OAIG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,GAAG,OAAO,GAAG,IAAI,CAAC;IAC1D;;;;;OAKG;IACH,QAAQ,EAAE,CAAC,CAAC,KAAK,EAAE;QAAC,SAAS,EAAE,SAAS,CAAA;KAAC,KAAK,KAAK,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;IACjF;;;;;;OAMG;IACH,mBAAmB,CAAC,EAAE,MAAM,OAAO,CAAC;IACpC;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,SAAS,KAAK,IAAI,CAAC;IACnD;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IACvC;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;CAClD;AAED,eAAO,MAAM,MAAM,oFAQlB,CAAC"}
+{"version":3,"file":"Popper.d.ts","sourceRoot":"","sources":["../../../../popup/lib/Popper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,QAAQ,MAAM,gBAAgB,CAAC;AAE3C,oBAAY,SAAS,GAAG,GAAG,QAAQ,CAAC,SAAS,EAAE,CAAC;AAChD,oBAAY,aAAa,GAAG,QAAQ,CAAC,OAAO,CAAC;AAK7C,MAAM,WAAW,WAAW;IAC1B;;;;OAIG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,GAAG,OAAO,GAAG,IAAI,CAAC;IAC1D;;;;;OAKG;IACH,QAAQ,EAAE,CAAC,CAAC,KAAK,EAAE;QAAC,SAAS,EAAE,SAAS,CAAA;KAAC,KAAK,KAAK,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;IACjF;;;;;;OAMG;IACH,mBAAmB,CAAC,EAAE,MAAM,OAAO,CAAC;IACpC;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,SAAS,KAAK,IAAI,CAAC;IACnD;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IACvC;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;CAClD;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,MAAM,oFAQlB,CAAC"}

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

@@ -40,12 +40,10 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     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;
+var __spreadArray = (this && this.__spreadArray) || function (to, from) {
+    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
+        to[j] = from[i];
+    return to;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Popper = void 0;
@@ -54,6 +52,21 @@ 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");
+/**
+ * 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(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"]);
     if (!open) {
@@ -104,7 +117,7 @@ var OpenPopper = React.forwardRef(function (_a, ref) {
             return undefined;
         }
         if (stackRef.current) {
-            var instance_1 = PopperJS.createPopper(anchorEl, stackRef.current, __assign(__assign({ placement: popperPlacement }, popperOptions), { modifiers: __spreadArrays((popperOptions.modifiers || []), [placementModifier]) }));
+            var instance_1 = PopperJS.createPopper(anchorEl, stackRef.current, __assign(__assign({ placement: popperPlacement }, popperOptions), { modifiers: __spreadArray(__spreadArray([], (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();
@@ -120,7 +133,7 @@ var OpenPopper = React.forwardRef(function (_a, ref) {
         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(__assign(__assign({ placement: popperPlacement }, popperOptions), { modifiers: __spreadArray(__spreadArray([], (popperOptions.modifiers || [])), [placementModifier]) }));
         }
         firstRender.current = false;
     }, [popperOptions, popperPlacement, placementModifier, localRef]);

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,9 +95,19 @@ 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: {
+        /**
+         * 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.
+         */
         updatePlacement(data: {
             placement: import("@popperjs/core").Placement;
         }): void;
@@ -88,7 +115,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</PopupTarget>
+     *
+     * // 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,9 +152,19 @@ 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: {
+            /**
+             * 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.
+             */
             updatePlacement(data: {
                 placement: import("@popperjs/core").Placement;
             }): void;
@@ -106,7 +172,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("../..").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>, {
+    /**
+     * 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,9 +190,19 @@ 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: {
+            /**
+             * 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.
+             */
             updatePlacement(data: {
                 placement: import("@popperjs/core").Placement;
             }): void;
@@ -124,7 +210,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,9 +223,19 @@ 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: {
+            /**
+             * 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.
+             */
             updatePlacement(data: {
                 placement: import("@popperjs/core").Placement;
             }): void;
@@ -142,7 +243,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,9 +255,19 @@ 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: {
+            /**
+             * 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.
+             */
             updatePlacement(data: {
                 placement: import("@popperjs/core").Placement;
             }): void;
@@ -160,7 +275,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,9 +289,19 @@ 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: {
+            /**
+             * 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.
+             */
             updatePlacement(data: {
                 placement: import("@popperjs/core").Placement;
             }): void;
@@ -178,7 +309,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,9 +321,19 @@ 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: {
+            /**
+             * 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.
+             */
             updatePlacement(data: {
                 placement: import("@popperjs/core").Placement;
             }): void;
@@ -196,7 +341,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,9 +355,19 @@ 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: {
+            /**
+             * 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.
+             */
             updatePlacement(data: {
                 placement: import("@popperjs/core").Placement;
             }): void;

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAkCd;;;;;;;;;WASG;;;;;;;;IAvCH;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA4BG;;;;;;;;;;;;YAEH;;;;;;;;;eASG;;;;;;;;IATH;;;;;;;;;OASG;;;;;;;;;;;;YATH;;;;;;;;;eASG;;;;;;;;IAEH;;;;OAIG;;;;;;;;;;;;YAfH;;;;;;;;;eASG;;;;;;;;IAQH;;;OAGG;;;;;;;;;;;;YApBH;;;;;;;;;eASG;;;;;;;;IAaH;;;;;OAKG;;;;;;;;;;;;YA3BH;;;;;;;;;eASG;;;;;;;;IAoBH;;;OAGG;;;;;;;;;;;;YAhCH;;;;;;;;;eASG;;;;;;;;IAyBH;;;;;OAKG;;;;;;;;;;;;YAvCH;;;;;;;;;eASG;;;;;;;;CAmCL,CAAC"}

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

@@ -30,16 +30,97 @@ var PopupHeading_1 = require("./PopupHeading");
 var PopupCloseIcon_1 = require("./PopupCloseIcon");
 var PopupCloseButton_1 = require("./PopupCloseButton");
 var 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</PopupTarget>
+         *
+         * // 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) {

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("../..").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>, {
+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/PopupCard.d.ts

@@ -6,7 +6,7 @@ export declare type FlexAndBoxProps = ExtractProps<typeof Card, never> & FlexSty
 export interface PopupCardProps extends FlexAndBoxProps {
     children?: React.ReactNode;
 }
-export declare const PopupCard: import("../../common").ElementComponentM<"div", PopupCardProps, {
+export declare const PopupCard: import("@workday/canvas-kit-react/common").ElementComponentM<"div", PopupCardProps, {
     state: {
         stackRef: React.RefObject<HTMLDivElement>;
         targetRef: React.RefObject<HTMLButtonElement>;
@@ -14,7 +14,7 @@ export declare const PopupCard: 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/PopupCloseButton.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 export interface PopupCloseButtonProps {
     children?: React.ReactNode;
 }
-export declare const PopupCloseButton: import("../../common").ElementComponentM<import("../../common").ElementComponent<"button", import("../../button").SecondaryButtonProps>, PopupCloseButtonProps, {
+export declare const PopupCloseButton: import("@workday/canvas-kit-react/common").ElementComponentM<import("@workday/canvas-kit-react/common").ElementComponent<"button", import("@workday/canvas-kit-react/button").SecondaryButtonProps>, PopupCloseButtonProps, {
     state: {
         stackRef: React.RefObject<HTMLDivElement>;
         targetRef: React.RefObject<HTMLButtonElement>;
@@ -10,7 +10,7 @@ export declare const PopupCloseButton: import("../../common").ElementComponentM<
         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/PopupCloseIcon.d.ts

@@ -3,7 +3,7 @@ import { ExtractProps } from '@workday/canvas-kit-react/common';
 import { TertiaryButton } from '@workday/canvas-kit-react/button';
 export interface PopupCloseIconProps extends ExtractProps<typeof TertiaryButton, never> {
 }
-export declare const PopupCloseIcon: import("../../common").ElementComponentM<"button", PopupCloseIconProps, {
+export declare const PopupCloseIcon: import("@workday/canvas-kit-react/common").ElementComponentM<"button", PopupCloseIconProps, {
     state: {
         stackRef: React.RefObject<HTMLDivElement>;
         targetRef: React.RefObject<HTMLButtonElement>;
@@ -11,7 +11,7 @@ export declare const PopupCloseIcon: import("../../common").ElementComponentM<"b
         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/PopupHeading.d.ts

@@ -4,7 +4,7 @@ import { Card } from '@workday/canvas-kit-react/card';
 export interface PopupHeadingProps extends ExtractProps<typeof Card.Heading, never> {
     children?: React.ReactNode;
 }
-export declare const PopupHeading: import("../../common").ElementComponentM<"h2", PopupHeadingProps, {
+export declare const PopupHeading: import("@workday/canvas-kit-react/common").ElementComponentM<"h2", PopupHeadingProps, {
     state: {
         stackRef: React.RefObject<HTMLDivElement>;
         targetRef: React.RefObject<HTMLButtonElement>;
@@ -12,7 +12,7 @@ export declare const PopupHeading: import("../../common").ElementComponentM<"h2"
         returnFocusRef: React.RefObject<any> | undefined;
         placement: import("@popperjs/core").Placement;
         id: string;
-        visibility: import("../..").Visibility;
+        visibility: "hidden" | "visible";
     };
     events: {
         updatePlacement(data: {