@workday/canvas-kit-react 9.0.0-alpha.412-next.14 → 9.0.0-alpha.413-next.15

package/dialog/lib/Dialog.tsx

@@ -14,16 +14,82 @@ export interface DialogProps {
   children: React.ReactNode;
 }
 
+/**
+ * This component is the container component and does not render any semantic elements. It provides
+ * a React Context model for the `Dialog` subcomponents. If you manually pass a `model` to all
+ * subcomponents, this container component isn't needed. If you do not pass a `model`, the `Dialog`
+ * container component will build a default one using `useDialogModel`. `Dialog` is a composition of a
+ * {@link Popup} component and has a similar structure to `Popup`.
+ */
 export const Dialog = createContainer()({
   displayName: 'Dialog',
   modelHook: useDialogModel,
   subComponents: {
+    /**
+     * A `Dialog.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: Popup.Body,
+    /**
+     * A `Dialog.Card` is a wrapper around the {@link Card} component, but hooked up to a
+     * {@link DialogModel}. By default, this element has a `role=dialog`, `aria-labelledby` and an `id`.
+     * The behavior hook used is called {@link useDialogCard}.
+     */
     Card: DialogCard,
+    /**
+     * A `Dialog.CloseIcon` is an icon button that is the `X` at the top of a dialog. It will hide a
+     * dialog when clicked. The behavior hook used is called {@link usePopupCloseButton}.
+     */
     CloseIcon: Popup.CloseIcon,
+    /**
+     * A `Dialog.Target` is any element that is meant to show the Dialog. 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 = useDialogModel();
+     *
+     * // using this component
+     * <Dialog.Target>Show Dialog</Dialog.Target>
+     *
+     * // using props instead
+     * const dialogTargetButtonProps = useDialogTarget(model);
+     * <SecondaryButton {...dialogTargetButtonProps}>Show Dialog</SecondaryButton>
+     * ```
+     *
+     * `Dialog.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
+     * <Dialog.Target as="button">Open</Dialog.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: Popup.Target,
+    /**
+     * A `Dialog.Heading` is a wrapper around {@link CardHeading Card.Heading} that connect the
+     * heading to a {@link DialogModel}. It will add an `id` to the element that match the
+     * `aria-labelledby` that is applied to the `Dialog.Card` element for accessibility. The behavior
+     * hook used is called {@link usePopupHeading}.
+     */
     Heading: Popup.Heading,
+    /**
+     * A `Dialog.Popper` is a wrapper around {@link PopupPopper Popup.Popper}. The behavior
+     * hook used is called {@link useDialogPopper}.
+     */
+
     Popper: DialogPopper,
+    /**
+     * A `Dialog.CloseButton` is a button that will hide a dialog. 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: Popup.CloseButton,
   },
 })(({children}: DialogProps) => {

package/dist/commonjs/dialog/lib/Dialog.d.ts

@@ -5,6 +5,13 @@ export interface DialogProps {
      */
     children: React.ReactNode;
 }
+/**
+ * This component is the container component and does not render any semantic elements. It provides
+ * a React Context model for the `Dialog` subcomponents. If you manually pass a `model` to all
+ * subcomponents, this container component isn't needed. If you do not pass a `model`, the `Dialog`
+ * container component will build a default one using `useDialogModel`. `Dialog` is a composition of a
+ * {@link Popup} component and has a similar structure to `Popup`.
+ */
 export declare const Dialog: import("@workday/canvas-kit-react/common").ComponentM<DialogProps & Partial<{
     returnFocusRef: React.RefObject<any> | undefined;
     initialFocusRef: React.RefObject<any> | undefined;
@@ -88,6 +95,10 @@ export declare const Dialog: import("@workday/canvas-kit-react/common").Componen
         hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
     };
 }> & {
+    /**
+     * A `Dialog.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>;
@@ -106,6 +117,11 @@ export declare const Dialog: import("@workday/canvas-kit-react/common").Componen
             hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
         };
     }>;
+    /**
+     * A `Dialog.Card` is a wrapper around the {@link Card} component, but hooked up to a
+     * {@link DialogModel}. By default, this element has a `role=dialog`, `aria-labelledby` and an `id`.
+     * The behavior hook used is called {@link useDialogCard}.
+     */
     Card: import("@workday/canvas-kit-react/common").ElementComponentM<"div", import("../../popup/lib/PopupCard").PopupCardProps & import("@workday/canvas-kit-react/common").PropsWithModel<{
         state: {
             stackRef: React.RefObject<HTMLDivElement>;
@@ -141,6 +157,10 @@ export declare const Dialog: import("@workday/canvas-kit-react/common").Componen
             hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
         };
     }>;
+    /**
+     * A `Dialog.CloseIcon` is an icon button that is the `X` at the top of a dialog. It will hide a
+     * dialog when clicked. The behavior hook used is called {@link usePopupCloseButton}.
+     */
     CloseIcon: import("@workday/canvas-kit-react/common").ElementComponentM<"button", import("../../popup/lib/PopupCloseIcon").PopupCloseIconProps, {
         state: {
             stackRef: React.RefObject<HTMLDivElement>;
@@ -159,6 +179,35 @@ export declare const Dialog: import("@workday/canvas-kit-react/common").Componen
             hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
         };
     }>;
+    /**
+     * A `Dialog.Target` is any element that is meant to show the Dialog. 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 = useDialogModel();
+     *
+     * // using this component
+     * <Dialog.Target>Show Dialog</Dialog.Target>
+     *
+     * // using props instead
+     * const dialogTargetButtonProps = useDialogTarget(model);
+     * <SecondaryButton {...dialogTargetButtonProps}>Show Dialog</SecondaryButton>
+     * ```
+     *
+     * `Dialog.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
+     * <Dialog.Target as="button">Open</Dialog.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>;
@@ -177,6 +226,12 @@ export declare const Dialog: import("@workday/canvas-kit-react/common").Componen
             hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
         };
     }>;
+    /**
+     * A `Dialog.Heading` is a wrapper around {@link CardHeading Card.Heading} that connect the
+     * heading to a {@link DialogModel}. It will add an `id` to the element that match the
+     * `aria-labelledby` that is applied to the `Dialog.Card` element for accessibility. The behavior
+     * hook used is called {@link usePopupHeading}.
+     */
     Heading: import("@workday/canvas-kit-react/common").ElementComponentM<"h2", import("../../popup/lib/PopupHeading").PopupHeadingProps, {
         state: {
             stackRef: React.RefObject<HTMLDivElement>;
@@ -195,6 +250,10 @@ export declare const Dialog: import("@workday/canvas-kit-react/common").Componen
             hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
         };
     }>;
+    /**
+     * A `Dialog.Popper` is a wrapper around {@link PopupPopper Popup.Popper}. The behavior
+     * hook used is called {@link useDialogPopper}.
+     */
     Popper: import("@workday/canvas-kit-react/common").ElementComponentM<"div", import("../../popup/lib/PopupPopper").PopupPopperProps & import("@workday/canvas-kit-react/common").PropsWithModel<{
         state: {
             stackRef: React.RefObject<HTMLDivElement>;
@@ -230,6 +289,12 @@ export declare const Dialog: import("@workday/canvas-kit-react/common").Componen
             hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
         };
     }>;
+    /**
+     * A `Dialog.CloseButton` is a button that will hide a dialog. 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("../../popup/lib/PopupCloseButton").PopupCloseButtonProps, {
         state: {
             stackRef: React.RefObject<HTMLDivElement>;

package/dist/commonjs/dialog/lib/Dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../../dialog/lib/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAcjB,CAAC"}
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../../dialog/lib/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;GAMG;AACH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAIf;;;OAGG;;;;;;;;;;;;;;;;;;;IAEH;;;;OAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;OAGG;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA4BG;;;;;;;;;;;;;;;;;;;IAEH;;;;;OAKG;;;;;;;;;;;;;;;;;;;IAEH;;;OAGG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAGH;;;;;OAKG;;;;;;;;;;;;;;;;;;;CAKL,CAAC"}

package/dist/commonjs/dialog/lib/Dialog.js

@@ -10,16 +10,81 @@ const popup_1 = require("@workday/canvas-kit-react/popup");
 const DialogPopper_1 = require("./DialogPopper");
 const DialogCard_1 = require("./DialogCard");
 const hooks_1 = require("./hooks");
+/**
+ * This component is the container component and does not render any semantic elements. It provides
+ * a React Context model for the `Dialog` subcomponents. If you manually pass a `model` to all
+ * subcomponents, this container component isn't needed. If you do not pass a `model`, the `Dialog`
+ * container component will build a default one using `useDialogModel`. `Dialog` is a composition of a
+ * {@link Popup} component and has a similar structure to `Popup`.
+ */
 exports.Dialog = common_1.createContainer()({
     displayName: 'Dialog',
     modelHook: hooks_1.useDialogModel,
     subComponents: {
+        /**
+         * A `Dialog.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: popup_1.Popup.Body,
+        /**
+         * A `Dialog.Card` is a wrapper around the {@link Card} component, but hooked up to a
+         * {@link DialogModel}. By default, this element has a `role=dialog`, `aria-labelledby` and an `id`.
+         * The behavior hook used is called {@link useDialogCard}.
+         */
         Card: DialogCard_1.DialogCard,
+        /**
+         * A `Dialog.CloseIcon` is an icon button that is the `X` at the top of a dialog. It will hide a
+         * dialog when clicked. The behavior hook used is called {@link usePopupCloseButton}.
+         */
         CloseIcon: popup_1.Popup.CloseIcon,
+        /**
+         * A `Dialog.Target` is any element that is meant to show the Dialog. 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 = useDialogModel();
+         *
+         * // using this component
+         * <Dialog.Target>Show Dialog</Dialog.Target>
+         *
+         * // using props instead
+         * const dialogTargetButtonProps = useDialogTarget(model);
+         * <SecondaryButton {...dialogTargetButtonProps}>Show Dialog</SecondaryButton>
+         * ```
+         *
+         * `Dialog.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
+         * <Dialog.Target as="button">Open</Dialog.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: popup_1.Popup.Target,
+        /**
+         * A `Dialog.Heading` is a wrapper around {@link CardHeading Card.Heading} that connect the
+         * heading to a {@link DialogModel}. It will add an `id` to the element that match the
+         * `aria-labelledby` that is applied to the `Dialog.Card` element for accessibility. The behavior
+         * hook used is called {@link usePopupHeading}.
+         */
         Heading: popup_1.Popup.Heading,
+        /**
+         * A `Dialog.Popper` is a wrapper around {@link PopupPopper Popup.Popper}. The behavior
+         * hook used is called {@link useDialogPopper}.
+         */
         Popper: DialogPopper_1.DialogPopper,
+        /**
+         * A `Dialog.CloseButton` is a button that will hide a dialog. 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: popup_1.Popup.CloseButton,
     },
 })(({ children }) => {

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

@@ -98,16 +98,6 @@ export declare const Popup: import("@workday/canvas-kit-react/common").Component
         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;
@@ -126,7 +116,7 @@ export declare const Popup: import("@workday/canvas-kit-react/common").Component
      * const model = usePopupModel();
      *
      * // using this component
-     * <Popup.Target>Show Popup</PopupTarget>
+     * <Popup.Target>Show Popup</Popup.Target>
      *
      * // using props instead
      * const popupTargetButtonProps = usePopupTarget(model);
@@ -155,16 +145,6 @@ export declare const Popup: import("@workday/canvas-kit-react/common").Component
             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;
@@ -193,16 +173,6 @@ export declare const Popup: import("@workday/canvas-kit-react/common").Component
             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;
@@ -226,16 +196,6 @@ export declare const Popup: import("@workday/canvas-kit-react/common").Component
             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;
@@ -258,16 +218,6 @@ export declare const Popup: import("@workday/canvas-kit-react/common").Component
             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;
@@ -292,16 +242,6 @@ export declare const Popup: import("@workday/canvas-kit-react/common").Component
             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;
@@ -324,16 +264,6 @@ export declare const Popup: import("@workday/canvas-kit-react/common").Component
             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;
@@ -358,16 +288,6 @@ export declare const Popup: import("@workday/canvas-kit-react/common").Component
             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;;;;;;;;;;;;;;;;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"}
+{"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

@@ -62,7 +62,7 @@ exports.Popup = common_1.createContainer()({
          * const model = usePopupModel();
          *
          * // using this component
-         * <Popup.Target>Show Popup</PopupTarget>
+         * <Popup.Target>Show Popup</Popup.Target>
          *
          * // using props instead
          * const popupTargetButtonProps = usePopupTarget(model);

package/dist/es6/dialog/lib/Dialog.d.ts

@@ -5,6 +5,13 @@ export interface DialogProps {
      */
     children: React.ReactNode;
 }
+/**
+ * This component is the container component and does not render any semantic elements. It provides
+ * a React Context model for the `Dialog` subcomponents. If you manually pass a `model` to all
+ * subcomponents, this container component isn't needed. If you do not pass a `model`, the `Dialog`
+ * container component will build a default one using `useDialogModel`. `Dialog` is a composition of a
+ * {@link Popup} component and has a similar structure to `Popup`.
+ */
 export declare const Dialog: import("@workday/canvas-kit-react/common").ComponentM<DialogProps & Partial<{
     returnFocusRef: React.RefObject<any> | undefined;
     initialFocusRef: React.RefObject<any> | undefined;
@@ -88,6 +95,10 @@ export declare const Dialog: import("@workday/canvas-kit-react/common").Componen
         hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
     };
 }> & {
+    /**
+     * A `Dialog.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>;
@@ -106,6 +117,11 @@ export declare const Dialog: import("@workday/canvas-kit-react/common").Componen
             hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
         };
     }>;
+    /**
+     * A `Dialog.Card` is a wrapper around the {@link Card} component, but hooked up to a
+     * {@link DialogModel}. By default, this element has a `role=dialog`, `aria-labelledby` and an `id`.
+     * The behavior hook used is called {@link useDialogCard}.
+     */
     Card: import("@workday/canvas-kit-react/common").ElementComponentM<"div", import("../../popup/lib/PopupCard").PopupCardProps & import("@workday/canvas-kit-react/common").PropsWithModel<{
         state: {
             stackRef: React.RefObject<HTMLDivElement>;
@@ -141,6 +157,10 @@ export declare const Dialog: import("@workday/canvas-kit-react/common").Componen
             hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
         };
     }>;
+    /**
+     * A `Dialog.CloseIcon` is an icon button that is the `X` at the top of a dialog. It will hide a
+     * dialog when clicked. The behavior hook used is called {@link usePopupCloseButton}.
+     */
     CloseIcon: import("@workday/canvas-kit-react/common").ElementComponentM<"button", import("../../popup/lib/PopupCloseIcon").PopupCloseIconProps, {
         state: {
             stackRef: React.RefObject<HTMLDivElement>;
@@ -159,6 +179,35 @@ export declare const Dialog: import("@workday/canvas-kit-react/common").Componen
             hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
         };
     }>;
+    /**
+     * A `Dialog.Target` is any element that is meant to show the Dialog. 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 = useDialogModel();
+     *
+     * // using this component
+     * <Dialog.Target>Show Dialog</Dialog.Target>
+     *
+     * // using props instead
+     * const dialogTargetButtonProps = useDialogTarget(model);
+     * <SecondaryButton {...dialogTargetButtonProps}>Show Dialog</SecondaryButton>
+     * ```
+     *
+     * `Dialog.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
+     * <Dialog.Target as="button">Open</Dialog.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>;
@@ -177,6 +226,12 @@ export declare const Dialog: import("@workday/canvas-kit-react/common").Componen
             hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
         };
     }>;
+    /**
+     * A `Dialog.Heading` is a wrapper around {@link CardHeading Card.Heading} that connect the
+     * heading to a {@link DialogModel}. It will add an `id` to the element that match the
+     * `aria-labelledby` that is applied to the `Dialog.Card` element for accessibility. The behavior
+     * hook used is called {@link usePopupHeading}.
+     */
     Heading: import("@workday/canvas-kit-react/common").ElementComponentM<"h2", import("../../popup/lib/PopupHeading").PopupHeadingProps, {
         state: {
             stackRef: React.RefObject<HTMLDivElement>;
@@ -195,6 +250,10 @@ export declare const Dialog: import("@workday/canvas-kit-react/common").Componen
             hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
         };
     }>;
+    /**
+     * A `Dialog.Popper` is a wrapper around {@link PopupPopper Popup.Popper}. The behavior
+     * hook used is called {@link useDialogPopper}.
+     */
     Popper: import("@workday/canvas-kit-react/common").ElementComponentM<"div", import("../../popup/lib/PopupPopper").PopupPopperProps & import("@workday/canvas-kit-react/common").PropsWithModel<{
         state: {
             stackRef: React.RefObject<HTMLDivElement>;
@@ -230,6 +289,12 @@ export declare const Dialog: import("@workday/canvas-kit-react/common").Componen
             hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
         };
     }>;
+    /**
+     * A `Dialog.CloseButton` is a button that will hide a dialog. 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("../../popup/lib/PopupCloseButton").PopupCloseButtonProps, {
         state: {
             stackRef: React.RefObject<HTMLDivElement>;

package/dist/es6/dialog/lib/Dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../../dialog/lib/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAcjB,CAAC"}
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../../dialog/lib/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;GAMG;AACH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAIf;;;OAGG;;;;;;;;;;;;;;;;;;;IAEH;;;;OAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;OAGG;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA4BG;;;;;;;;;;;;;;;;;;;IAEH;;;;;OAKG;;;;;;;;;;;;;;;;;;;IAEH;;;OAGG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAGH;;;;;OAKG;;;;;;;;;;;;;;;;;;;CAKL,CAAC"}

package/dist/es6/dialog/lib/Dialog.js

@@ -4,16 +4,81 @@ import { Popup } from '@workday/canvas-kit-react/popup';
 import { DialogPopper } from './DialogPopper';
 import { DialogCard } from './DialogCard';
 import { useDialogModel } from './hooks';
+/**
+ * This component is the container component and does not render any semantic elements. It provides
+ * a React Context model for the `Dialog` subcomponents. If you manually pass a `model` to all
+ * subcomponents, this container component isn't needed. If you do not pass a `model`, the `Dialog`
+ * container component will build a default one using `useDialogModel`. `Dialog` is a composition of a
+ * {@link Popup} component and has a similar structure to `Popup`.
+ */
 export const Dialog = createContainer()({
     displayName: 'Dialog',
     modelHook: useDialogModel,
     subComponents: {
+        /**
+         * A `Dialog.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: Popup.Body,
+        /**
+         * A `Dialog.Card` is a wrapper around the {@link Card} component, but hooked up to a
+         * {@link DialogModel}. By default, this element has a `role=dialog`, `aria-labelledby` and an `id`.
+         * The behavior hook used is called {@link useDialogCard}.
+         */
         Card: DialogCard,
+        /**
+         * A `Dialog.CloseIcon` is an icon button that is the `X` at the top of a dialog. It will hide a
+         * dialog when clicked. The behavior hook used is called {@link usePopupCloseButton}.
+         */
         CloseIcon: Popup.CloseIcon,
+        /**
+         * A `Dialog.Target` is any element that is meant to show the Dialog. 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 = useDialogModel();
+         *
+         * // using this component
+         * <Dialog.Target>Show Dialog</Dialog.Target>
+         *
+         * // using props instead
+         * const dialogTargetButtonProps = useDialogTarget(model);
+         * <SecondaryButton {...dialogTargetButtonProps}>Show Dialog</SecondaryButton>
+         * ```
+         *
+         * `Dialog.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
+         * <Dialog.Target as="button">Open</Dialog.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: Popup.Target,
+        /**
+         * A `Dialog.Heading` is a wrapper around {@link CardHeading Card.Heading} that connect the
+         * heading to a {@link DialogModel}. It will add an `id` to the element that match the
+         * `aria-labelledby` that is applied to the `Dialog.Card` element for accessibility. The behavior
+         * hook used is called {@link usePopupHeading}.
+         */
         Heading: Popup.Heading,
+        /**
+         * A `Dialog.Popper` is a wrapper around {@link PopupPopper Popup.Popper}. The behavior
+         * hook used is called {@link useDialogPopper}.
+         */
         Popper: DialogPopper,
+        /**
+         * A `Dialog.CloseButton` is a button that will hide a dialog. 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: Popup.CloseButton,
     },
 })(({ children }) => {

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

@@ -98,16 +98,6 @@ export declare const Popup: import("@workday/canvas-kit-react/common").Component
         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;
@@ -126,7 +116,7 @@ export declare const Popup: import("@workday/canvas-kit-react/common").Component
      * const model = usePopupModel();
      *
      * // using this component
-     * <Popup.Target>Show Popup</PopupTarget>
+     * <Popup.Target>Show Popup</Popup.Target>
      *
      * // using props instead
      * const popupTargetButtonProps = usePopupTarget(model);
@@ -155,16 +145,6 @@ export declare const Popup: import("@workday/canvas-kit-react/common").Component
             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;
@@ -193,16 +173,6 @@ export declare const Popup: import("@workday/canvas-kit-react/common").Component
             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;
@@ -226,16 +196,6 @@ export declare const Popup: import("@workday/canvas-kit-react/common").Component
             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;
@@ -258,16 +218,6 @@ export declare const Popup: import("@workday/canvas-kit-react/common").Component
             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;
@@ -292,16 +242,6 @@ export declare const Popup: import("@workday/canvas-kit-react/common").Component
             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;
@@ -324,16 +264,6 @@ export declare const Popup: import("@workday/canvas-kit-react/common").Component
             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;
@@ -358,16 +288,6 @@ export declare const Popup: import("@workday/canvas-kit-react/common").Component
             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/es6/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;;;;;;;;;;;;;;;;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"}
+{"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/es6/popup/lib/Popup.js

@@ -40,7 +40,7 @@ export const Popup = createContainer()({
          * const model = usePopupModel();
          *
          * // using this component
-         * <Popup.Target>Show Popup</PopupTarget>
+         * <Popup.Target>Show Popup</Popup.Target>
          *
          * // using props instead
          * const popupTargetButtonProps = usePopupTarget(model);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "9.0.0-alpha.412-next.14+9f388cdd",
+  "version": "9.0.0-alpha.413-next.15+76b571ed",
   "description": "The parent module that contains all Workday Canvas Kit React components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -49,7 +49,7 @@
     "@emotion/styled": "^11.6.0",
     "@popperjs/core": "^2.5.4",
     "@workday/canvas-colors-web": "^2.0.0",
-    "@workday/canvas-kit-popup-stack": "^9.0.0-alpha.412-next.14+9f388cdd",
+    "@workday/canvas-kit-popup-stack": "^9.0.0-alpha.413-next.15+76b571ed",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/design-assets-types": "^0.2.8",
     "chroma-js": "^2.1.0",
@@ -66,5 +66,5 @@
     "@workday/canvas-accent-icons-web": "^3.0.0",
     "@workday/canvas-applet-icons-web": "^2.0.0"
   },
-  "gitHead": "9f388cdd6b5969971ee3e1464f191a67bb8e0b23"
+  "gitHead": "76b571ed215127f6badf7a3834a761709aac303d"
 }

package/popup/lib/Popup.tsx

@@ -50,7 +50,7 @@ export const Popup = createContainer()({
      * const model = usePopupModel();
      *
      * // using this component
-     * <Popup.Target>Show Popup</PopupTarget>
+     * <Popup.Target>Show Popup</Popup.Target>
      *
      * // using props instead
      * const popupTargetButtonProps = usePopupTarget(model);