@workday/canvas-kit-react 8.0.0-alpha.253-next.22 → 8.0.0-alpha.428-next.2

package/dist/commonjs/common/lib/utils/useUniqueId.js

@@ -1,14 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.resetUniqueIdCount = exports.setUniqueSeed = exports.uniqueId = exports.useUniqueId = exports.generateUniqueId = void 0;
-var useConstant_1 = require("./useConstant");
+const useConstant_1 = require("./useConstant");
 // Create a unique seed per import to prevent collisions from other versions of `useUniqueId`
-var seed = Math.random()
+let seed = Math.random()
     .toString(36)
     .slice(2)
     .replace(/[0-9]*/, '')
     .substr(0, 4);
-var c = 0;
+let c = 0;
 /**
  * Generates a unique and HTML5 compliant identifier every time it is called. Internally it uses a 4
  * character random seed starting with a letter. This seed is unique to each instance of this
@@ -18,15 +18,15 @@ var c = 0;
  * [resetUniqueIdCount](#resetuniqueidcount). [setUniqueSeed](#setuniqueseed) can also be used for
  * testing or server side rendering to get the same results during hydration.
  */
-var generateUniqueId = function () { return seed + (c++).toString(36); };
+const generateUniqueId = () => seed + (c++).toString(36);
 exports.generateUniqueId = generateUniqueId;
 /**
  * Generate a unique ID if one is not provided. The generated ID will be stable across renders
  * @param id Optional ID provided that will be used instead of a unique ID
  */
-var useUniqueId = function (id) {
+const useUniqueId = (id) => {
     // https://codesandbox.io/s/react-functional-component-ids-p2ndq
-    var generatedId = useConstant_1.useConstant(exports.generateUniqueId);
+    const generatedId = useConstant_1.useConstant(exports.generateUniqueId);
     return id || generatedId;
 };
 exports.useUniqueId = useUniqueId;
@@ -50,14 +50,14 @@ exports.uniqueId = exports.useUniqueId;
  *   setSeed('a')
  * })
  */
-var setUniqueSeed = function (s) {
+const setUniqueSeed = (s) => {
     seed = s;
 };
 exports.setUniqueSeed = setUniqueSeed;
 /**
  * This should only be called for tests in an `beforeEach`
  */
-var resetUniqueIdCount = function () {
+const resetUniqueIdCount = () => {
     c = 0;
 };
 exports.resetUniqueIdCount = resetUniqueIdCount;

package/dist/commonjs/common/lib/utils/useWindowSize.js

@@ -4,28 +4,28 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useWindowSize = void 0;
-var react_1 = __importDefault(require("react"));
-var useMount_1 = require("./useMount");
-var getFromWindow = function (property, defaultValue) {
+const react_1 = __importDefault(require("react"));
+const useMount_1 = require("./useMount");
+const getFromWindow = (property, defaultValue) => {
     var _a;
     if (typeof window !== undefined) {
         return (_a = window[property]) !== null && _a !== void 0 ? _a : defaultValue;
     }
     return defaultValue;
 };
-var useWindowSize = function () {
-    var _a = react_1.default.useState(getFromWindow('innerWidth', 0)), width = _a[0], setWidth = _a[1];
-    var _b = react_1.default.useState(getFromWindow('innerHeight', 0)), height = _b[0], setHeight = _b[1];
-    var onResize = function () {
+const useWindowSize = () => {
+    const [width, setWidth] = react_1.default.useState(getFromWindow('innerWidth', 0));
+    const [height, setHeight] = react_1.default.useState(getFromWindow('innerHeight', 0));
+    const onResize = () => {
         setWidth(window.innerWidth);
         setHeight(window.innerHeight);
     };
-    useMount_1.useMount(function () {
+    useMount_1.useMount(() => {
         window.addEventListener('resize', onResize);
-        return function () {
+        return () => {
             window.removeEventListener('resize', onResize);
         };
     });
-    return { width: width, height: height };
+    return { width, height };
 };
 exports.useWindowSize = useWindowSize;

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

@@ -5,7 +5,14 @@ export interface DialogProps {
      */
     children: React.ReactNode;
 }
-export declare const Dialog: import("../../common").ComponentM<DialogProps & Partial<{
+/**
+ * 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;
     id: string;
@@ -20,7 +27,7 @@ export declare const Dialog: import("../../common").ComponentM<DialogProps & Par
         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 +36,7 @@ export declare const Dialog: import("../../common").ComponentM<DialogProps & Par
         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 +45,7 @@ export declare const Dialog: import("../../common").ComponentM<DialogProps & Par
         returnFocusRef: React.RefObject<any> | undefined;
         placement: import("@popperjs/core").Placement;
         id: string;
-        visibility: import("../..").Visibility;
+        visibility: "hidden" | "visible";
     }) => void) | undefined;
 } & {
     shouldUpdatePlacement?: ((data: {
@@ -50,7 +57,7 @@ export declare const Dialog: import("../../common").ComponentM<DialogProps & Par
         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 +66,7 @@ export declare const Dialog: import("../../common").ComponentM<DialogProps & Par
         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 +75,7 @@ export declare const Dialog: import("../../common").ComponentM<DialogProps & Par
         returnFocusRef: React.RefObject<any> | undefined;
         placement: import("@popperjs/core").Placement;
         id: string;
-        visibility: import("../..").Visibility;
+        visibility: "hidden" | "visible";
     }) => boolean) | undefined;
 }, {
     state: {
@@ -78,7 +85,7 @@ export declare const Dialog: import("../../common").ComponentM<DialogProps & Par
         returnFocusRef: React.RefObject<any> | undefined;
         placement: import("@popperjs/core").Placement;
         id: string;
-        visibility: import("../..").Visibility;
+        visibility: "hidden" | "visible";
     };
     events: {
         updatePlacement(data: {
@@ -88,7 +95,11 @@ export declare const Dialog: import("../../common").ComponentM<DialogProps & Par
         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 `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>;
             targetRef: React.RefObject<HTMLButtonElement>;
@@ -96,7 +107,7 @@ export declare const Dialog: import("../../common").ComponentM<DialogProps & Par
             returnFocusRef: React.RefObject<any> | undefined;
             placement: import("@popperjs/core").Placement;
             id: string;
-            visibility: import("../..").Visibility;
+            visibility: "hidden" | "visible";
         };
         events: {
             updatePlacement(data: {
@@ -106,7 +117,12 @@ export declare const Dialog: import("../../common").ComponentM<DialogProps & Par
             hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
         };
     }>;
-    Card: import("../../common").ElementComponentM<"div", import("../../popup/lib/PopupCard").PopupCardProps & import("../../common").PropsWithModel<{
+    /**
+     * 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>;
             targetRef: React.RefObject<HTMLButtonElement>;
@@ -114,7 +130,7 @@ export declare const Dialog: import("../../common").ComponentM<DialogProps & Par
             returnFocusRef: React.RefObject<any> | undefined;
             placement: import("@popperjs/core").Placement;
             id: string;
-            visibility: import("../..").Visibility;
+            visibility: "hidden" | "visible";
         };
         events: {
             updatePlacement(data: {
@@ -123,7 +139,7 @@ export declare const Dialog: import("../../common").ComponentM<DialogProps & Par
             show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
             hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
         };
-    }>, {
+    }, {}>, {
         state: {
             stackRef: React.RefObject<HTMLDivElement>;
             targetRef: React.RefObject<HTMLButtonElement>;
@@ -131,7 +147,7 @@ export declare const Dialog: import("../../common").ComponentM<DialogProps & Par
             returnFocusRef: React.RefObject<any> | undefined;
             placement: import("@popperjs/core").Placement;
             id: string;
-            visibility: import("../..").Visibility;
+            visibility: "hidden" | "visible";
         };
         events: {
             updatePlacement(data: {
@@ -141,7 +157,11 @@ export declare const Dialog: import("../../common").ComponentM<DialogProps & Par
             hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
         };
     }>;
-    CloseIcon: import("../../common").ElementComponentM<"button", import("../../popup/lib/PopupCloseIcon").PopupCloseIconProps, {
+    /**
+     * 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>;
             targetRef: React.RefObject<HTMLButtonElement>;
@@ -149,7 +169,7 @@ export declare const Dialog: import("../../common").ComponentM<DialogProps & Par
             returnFocusRef: React.RefObject<any> | undefined;
             placement: import("@popperjs/core").Placement;
             id: string;
-            visibility: import("../..").Visibility;
+            visibility: "hidden" | "visible";
         };
         events: {
             updatePlacement(data: {
@@ -159,7 +179,36 @@ export declare const Dialog: import("../../common").ComponentM<DialogProps & Par
             hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
         };
     }>;
-    Target: import("../../common").ElementComponentM<import("../../common").ElementComponent<"button", import("../..").SecondaryButtonProps>, {}, {
+    /**
+     * 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>;
             targetRef: React.RefObject<HTMLButtonElement>;
@@ -167,7 +216,7 @@ export declare const Dialog: import("../../common").ComponentM<DialogProps & Par
             returnFocusRef: React.RefObject<any> | undefined;
             placement: import("@popperjs/core").Placement;
             id: string;
-            visibility: import("../..").Visibility;
+            visibility: "hidden" | "visible";
         };
         events: {
             updatePlacement(data: {
@@ -177,7 +226,13 @@ export declare const Dialog: import("../../common").ComponentM<DialogProps & Par
             hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
         };
     }>;
-    Heading: import("../../common").ElementComponentM<"h2", import("../../popup/lib/PopupHeading").PopupHeadingProps, {
+    /**
+     * 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>;
             targetRef: React.RefObject<HTMLButtonElement>;
@@ -185,7 +240,7 @@ export declare const Dialog: import("../../common").ComponentM<DialogProps & Par
             returnFocusRef: React.RefObject<any> | undefined;
             placement: import("@popperjs/core").Placement;
             id: string;
-            visibility: import("../..").Visibility;
+            visibility: "hidden" | "visible";
         };
         events: {
             updatePlacement(data: {
@@ -195,7 +250,11 @@ export declare const Dialog: import("../../common").ComponentM<DialogProps & Par
             hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
         };
     }>;
-    Popper: import("../../common").ElementComponentM<"div", import("../../popup/lib/PopupPopper").PopupPopperProps & import("../../common").PropsWithModel<{
+    /**
+     * 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>;
             targetRef: React.RefObject<HTMLButtonElement>;
@@ -203,7 +262,7 @@ export declare const Dialog: import("../../common").ComponentM<DialogProps & Par
             returnFocusRef: React.RefObject<any> | undefined;
             placement: import("@popperjs/core").Placement;
             id: string;
-            visibility: import("../..").Visibility;
+            visibility: "hidden" | "visible";
         };
         events: {
             updatePlacement(data: {
@@ -212,7 +271,7 @@ export declare const Dialog: import("../../common").ComponentM<DialogProps & Par
             show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
             hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
         };
-    }>, {
+    }, {}>, {
         state: {
             stackRef: React.RefObject<HTMLDivElement>;
             targetRef: React.RefObject<HTMLButtonElement>;
@@ -220,7 +279,7 @@ export declare const Dialog: import("../../common").ComponentM<DialogProps & Par
             returnFocusRef: React.RefObject<any> | undefined;
             placement: import("@popperjs/core").Placement;
             id: string;
-            visibility: import("../..").Visibility;
+            visibility: "hidden" | "visible";
         };
         events: {
             updatePlacement(data: {
@@ -230,7 +289,13 @@ export declare const Dialog: import("../../common").ComponentM<DialogProps & Par
             hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
         };
     }>;
-    CloseButton: import("../../common").ElementComponentM<import("../../common").ElementComponent<"button", import("../..").SecondaryButtonProps>, import("../../popup/lib/PopupCloseButton").PopupCloseButtonProps, {
+    /**
+     * 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>;
             targetRef: React.RefObject<HTMLButtonElement>;
@@ -238,7 +303,7 @@ export declare const Dialog: import("../../common").ComponentM<DialogProps & Par
             returnFocusRef: React.RefObject<any> | undefined;
             placement: import("@popperjs/core").Placement;
             id: string;
-            visibility: import("../..").Visibility;
+            visibility: "hidden" | "visible";
         };
         events: {
             updatePlacement(data: {

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

@@ -4,25 +4,89 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Dialog = void 0;
-var react_1 = __importDefault(require("react"));
-var common_1 = require("@workday/canvas-kit-react/common");
-var popup_1 = require("@workday/canvas-kit-react/popup");
-var DialogPopper_1 = require("./DialogPopper");
-var DialogCard_1 = require("./DialogCard");
-var hooks_1 = require("./hooks");
+const react_1 = __importDefault(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+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,
     },
-})(function (_a) {
-    var children = _a.children;
+})(({ children }) => {
     return react_1.default.createElement(react_1.default.Fragment, null, children);
 });

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

@@ -3,7 +3,7 @@ import { ExtractProps } from '@workday/canvas-kit-react/common';
 import { Popup } from '@workday/canvas-kit-react/popup';
 export interface DialogCardProps extends ExtractProps<typeof Popup.Card, never> {
 }
-export declare const DialogCard: import("../../common").ElementComponentM<"div", import("../../popup/lib/PopupCard").PopupCardProps & import("../../common").PropsWithModel<{
+export declare const DialogCard: 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>;
         targetRef: React.RefObject<HTMLButtonElement>;
@@ -11,7 +11,7 @@ export declare const DialogCard: 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: {
@@ -20,7 +20,7 @@ export declare const DialogCard: import("../../common").ElementComponentM<"div",
         show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
         hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
     };
-}>, {
+}, {}>, {
     state: {
         stackRef: React.RefObject<HTMLDivElement>;
         targetRef: React.RefObject<HTMLButtonElement>;
@@ -28,7 +28,7 @@ export declare const DialogCard: 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/dialog/lib/DialogCard.js

@@ -1,15 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -31,14 +20,14 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DialogCard = void 0;
-var React = __importStar(require("react"));
-var common_1 = require("@workday/canvas-kit-react/common");
-var popup_1 = require("@workday/canvas-kit-react/popup");
-var hooks_1 = require("./hooks");
+const React = __importStar(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const popup_1 = require("@workday/canvas-kit-react/popup");
+const hooks_1 = require("./hooks");
 exports.DialogCard = common_1.createSubcomponent('div')({
     displayName: 'Dialog.Card',
     modelHook: hooks_1.useDialogModel,
     elemPropsHook: hooks_1.useDialogCard,
-})(function (elemProps, Element, model) {
-    return (React.createElement(popup_1.Popup.Card, __assign({ as: Element, model: model }, elemProps), elemProps.children));
+})((elemProps, Element, model) => {
+    return (React.createElement(popup_1.Popup.Card, Object.assign({ as: Element, model: model }, elemProps), elemProps.children));
 });

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

@@ -3,7 +3,7 @@ import { ExtractProps } from '@workday/canvas-kit-react/common';
 import { Popup } from '@workday/canvas-kit-react/popup';
 export interface DialogPopperProps extends ExtractProps<typeof Popup.Popper, never> {
 }
-export declare const DialogPopper: import("../../common").ElementComponentM<"div", import("../../popup/lib/PopupPopper").PopupPopperProps & import("../../common").PropsWithModel<{
+export declare const DialogPopper: 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>;
         targetRef: React.RefObject<HTMLButtonElement>;
@@ -11,7 +11,7 @@ export declare const DialogPopper: 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: {
@@ -20,7 +20,7 @@ export declare const DialogPopper: import("../../common").ElementComponentM<"div
         show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
         hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
     };
-}>, {
+}, {}>, {
     state: {
         stackRef: React.RefObject<HTMLDivElement>;
         targetRef: React.RefObject<HTMLButtonElement>;
@@ -28,7 +28,7 @@ export declare const DialogPopper: 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/dialog/lib/DialogPopper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DialogPopper.d.ts","sourceRoot":"","sources":["../../../../dialog/lib/DialogPopper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAqB,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAClF,OAAO,EAAC,KAAK,EAAyB,MAAM,iCAAiC,CAAC;AAI9E,MAAM,WAAW,iBAAkB,SAAQ,YAAY,CAAC,OAAO,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC;CAAG;AAEtF,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAaxB,CAAC"}
+{"version":3,"file":"DialogPopper.d.ts","sourceRoot":"","sources":["../../../../dialog/lib/DialogPopper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAqB,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAClF,OAAO,EAAC,KAAK,EAAyB,MAAM,iCAAiC,CAAC;AAI9E,MAAM,WAAW,iBAAkB,SAAQ,YAAY,CAAC,OAAO,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC;CAAG;AAEtF,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgBxB,CAAC"}