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

package/dist/commonjs/menu/lib/useMenuModel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useMenuModel.d.ts","sourceRoot":"","sources":["../../../../menu/lib/useMenuModel.tsx"],"names":[],"mappings":"AAcA,eAAO,MAAM,YAAY;IAIrB,2GAA2G;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAA3G,2GAA2G;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsC7G,CAAC"}
+{"version":3,"file":"useMenuModel.d.ts","sourceRoot":"","sources":["../../../../menu/lib/useMenuModel.tsx"],"names":[],"mappings":"AAYA,eAAO,MAAM,YAAY;IAIrB,2GAA2G;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAA3G,2GAA2G;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqC7G,CAAC"}

package/dist/commonjs/menu/lib/useMenuModel.js

@@ -1,42 +1,38 @@
 "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);
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useMenuModel = void 0;
-var common_1 = require("@workday/canvas-kit-react/common");
-var popup_1 = require("@workday/canvas-kit-react/popup");
-var collection_1 = require("@workday/canvas-kit-react/collection");
+const common_1 = require("@workday/canvas-kit-react/common");
+const popup_1 = require("@workday/canvas-kit-react/popup");
+const collection_1 = require("@workday/canvas-kit-react/collection");
 exports.useMenuModel = common_1.createModelHook({
-    defaultConfig: __assign(__assign(__assign({}, collection_1.useListModel.defaultConfig), popup_1.usePopupModel.defaultConfig), { 
+    defaultConfig: {
+        ...collection_1.useListModel.defaultConfig,
+        ...popup_1.usePopupModel.defaultConfig,
         /** Determines the default selection manager used as well as if the menu closes when an item is selected */
-        mode: 'single' }),
-    requiredConfig: __assign(__assign({}, collection_1.useListModel.requiredConfig), popup_1.usePopupModel.requiredConfig),
-})(function (config) {
-    // don't virtualize menus by default to avoid oddities with card width
-    var list = collection_1.useListModel(collection_1.useListModel.mergeConfig(config, {
+        mode: 'single',
+        // don't virtualize menus by default to avoid oddities with card width
         shouldVirtualize: false,
+    },
+    requiredConfig: {
+        ...collection_1.useListModel.requiredConfig,
+        ...popup_1.usePopupModel.requiredConfig,
+    },
+})(config => {
+    const list = collection_1.useListModel(collection_1.useListModel.mergeConfig(config, {
         selection: config.mode === 'single' ? collection_1.singleSelectionManager : collection_1.multiSelectionManager,
     }));
-    var popup = popup_1.usePopupModel(popup_1.usePopupModel.mergeConfig(config, {
-        onHide: function () {
+    const popup = popup_1.usePopupModel(popup_1.usePopupModel.mergeConfig(config, {
+        onHide() {
             // reset the index ref to 0 again so registration doesn't start where it left off
             list.state.indexRef.current = 0;
         },
     }));
     popup_1.useAlwaysCloseOnOutsideClick(popup);
     popup_1.useCloseOnEscape(popup);
-    popup_1.useReturnFocus(popup);
-    popup_1.useFocusRedirect(popup);
-    var state = __assign(__assign({ mode: config.mode }, list.state), popup.state);
-    var events = __assign(__assign({}, list.events), popup.events);
-    return __assign(__assign({}, list), { state: state, events: events });
+    const state = { mode: config.mode, ...list.state, ...popup.state };
+    const events = {
+        ...list.events,
+        ...popup.events,
+    };
+    return { ...list, ...popup, state, events };
 });

package/dist/commonjs/modal/lib/Modal.d.ts

@@ -1,5 +1,12 @@
 import * as React from 'react';
-export declare const Modal: import("../../common").ComponentM<import("../../dialog").DialogProps & Partial<{
+/**
+ * This component is the container component and does not render any semantic elements. It provides
+ * a React Context model for the `Modal` subcomponents. If you manually pass a `model` to all
+ * subcomponents, this container component isn't needed. If you do not pass a `model`, the `Modal`
+ * container component will build a default one using `useModalModel`. `Modal` is a composition of a
+ * {@link Popup} component and has a similar structure to `Popup`.
+ */
+export declare const Modal: import("@workday/canvas-kit-react/common").ComponentM<import("@workday/canvas-kit-react/dialog").DialogProps & Partial<{
     returnFocusRef: React.RefObject<any> | undefined;
     initialFocusRef: React.RefObject<any> | undefined;
     id: string;
@@ -10,29 +17,44 @@ export declare const Modal: import("../../common").ComponentM<import("../../dial
     }, prevState: {
         stackRef: React.RefObject<HTMLDivElement>;
         targetRef: React.RefObject<HTMLButtonElement>;
-        initialFocusRef: React.RefObject<any> | undefined;
+        initialFocusRef: React.RefObject<any> | undefined; /**
+         * The `Modal.Overlay` is the component that hooks a Modal up to the {@link PopupStack} as well
+         * as the semi-transparent overlay commonly used with modals. Internally, the `Modal.Overlay`
+         * component uses two `div` elements to ensure proper rendering of the `Modal` content. The
+         * default element is a `div` element and can be changed via the `as` prop.
+         */
         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>;
         targetRef: React.RefObject<HTMLButtonElement>;
-        initialFocusRef: React.RefObject<any> | undefined;
+        initialFocusRef: React.RefObject<any> | undefined; /**
+         * The `Modal.Overlay` is the component that hooks a Modal up to the {@link PopupStack} as well
+         * as the semi-transparent overlay commonly used with modals. Internally, the `Modal.Overlay`
+         * component uses two `div` elements to ensure proper rendering of the `Modal` content. The
+         * default element is a `div` element and can be changed via the `as` prop.
+         */
         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>;
         targetRef: React.RefObject<HTMLButtonElement>;
-        initialFocusRef: React.RefObject<any> | undefined;
+        initialFocusRef: React.RefObject<any> | undefined; /**
+         * The `Modal.Overlay` is the component that hooks a Modal up to the {@link PopupStack} as well
+         * as the semi-transparent overlay commonly used with modals. Internally, the `Modal.Overlay`
+         * component uses two `div` elements to ensure proper rendering of the `Modal` content. The
+         * default element is a `div` element and can be changed via the `as` prop.
+         */
         returnFocusRef: React.RefObject<any> | undefined;
         placement: import("@popperjs/core").Placement;
         id: string;
-        visibility: import("../..").Visibility;
+        visibility: "hidden" | "visible";
     }) => void) | undefined;
 } & {
     shouldUpdatePlacement?: ((data: {
@@ -40,39 +62,59 @@ export declare const Modal: import("../../common").ComponentM<import("../../dial
     }, state: {
         stackRef: React.RefObject<HTMLDivElement>;
         targetRef: React.RefObject<HTMLButtonElement>;
-        initialFocusRef: React.RefObject<any> | undefined;
+        initialFocusRef: React.RefObject<any> | undefined; /**
+         * The `Modal.Overlay` is the component that hooks a Modal up to the {@link PopupStack} as well
+         * as the semi-transparent overlay commonly used with modals. Internally, the `Modal.Overlay`
+         * component uses two `div` elements to ensure proper rendering of the `Modal` content. The
+         * default element is a `div` element and can be changed via the `as` prop.
+         */
         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>;
         targetRef: React.RefObject<HTMLButtonElement>;
-        initialFocusRef: React.RefObject<any> | undefined;
+        initialFocusRef: React.RefObject<any> | undefined; /**
+         * The `Modal.Overlay` is the component that hooks a Modal up to the {@link PopupStack} as well
+         * as the semi-transparent overlay commonly used with modals. Internally, the `Modal.Overlay`
+         * component uses two `div` elements to ensure proper rendering of the `Modal` content. The
+         * default element is a `div` element and can be changed via the `as` prop.
+         */
         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>;
         targetRef: React.RefObject<HTMLButtonElement>;
-        initialFocusRef: React.RefObject<any> | undefined;
+        initialFocusRef: React.RefObject<any> | undefined; /**
+         * The `Modal.Overlay` is the component that hooks a Modal up to the {@link PopupStack} as well
+         * as the semi-transparent overlay commonly used with modals. Internally, the `Modal.Overlay`
+         * component uses two `div` elements to ensure proper rendering of the `Modal` content. The
+         * default element is a `div` element and can be changed via the `as` prop.
+         */
         returnFocusRef: React.RefObject<any> | undefined;
         placement: import("@popperjs/core").Placement;
         id: string;
-        visibility: import("../..").Visibility;
+        visibility: "hidden" | "visible";
     }) => boolean) | undefined;
-} & import("../../common").PropsWithModel<{
+} & import("@workday/canvas-kit-react/common").PropsWithModel<{
     state: {
         stackRef: React.RefObject<HTMLDivElement>;
         targetRef: React.RefObject<HTMLButtonElement>;
-        initialFocusRef: React.RefObject<any> | undefined;
+        initialFocusRef: React.RefObject<any> | undefined; /**
+         * The `Modal.Overlay` is the component that hooks a Modal up to the {@link PopupStack} as well
+         * as the semi-transparent overlay commonly used with modals. Internally, the `Modal.Overlay`
+         * component uses two `div` elements to ensure proper rendering of the `Modal` content. The
+         * default element is a `div` element and can be changed via the `as` prop.
+         */
         returnFocusRef: React.RefObject<any> | undefined;
         placement: import("@popperjs/core").Placement;
         id: string;
-        visibility: import("../..").Visibility;
+        visibility: "hidden" | "visible";
     };
     events: {
         updatePlacement(data: {
@@ -81,15 +123,20 @@ export declare const Modal: import("../../common").ComponentM<import("../../dial
         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>;
-        initialFocusRef: React.RefObject<any> | undefined;
+        initialFocusRef: React.RefObject<any> | undefined; /**
+         * The `Modal.Overlay` is the component that hooks a Modal up to the {@link PopupStack} as well
+         * as the semi-transparent overlay commonly used with modals. Internally, the `Modal.Overlay`
+         * component uses two `div` elements to ensure proper rendering of the `Modal` content. The
+         * default element is a `div` element and can be changed via the `as` prop.
+         */
         returnFocusRef: React.RefObject<any> | undefined;
         placement: import("@popperjs/core").Placement;
         id: string;
-        visibility: import("../..").Visibility;
+        visibility: "hidden" | "visible";
     };
     events: {
         updatePlacement(data: {
@@ -99,15 +146,31 @@ export declare const Modal: import("../../common").ComponentM<import("../../dial
         hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
     };
 }> & {
-    Body: import("../../common").ElementComponentM<"div", import("../..").BorderShorthandStyleProps & import("../..").BorderColorStyleProps & import("../..").BorderRadiusStyleProps & import("../..").BorderLineStyleProps & import("../..").BorderWidthStyleProps & import("../..").BorderLogicalStyleProps & import("../..").ColorStyleProps & import("../..").DepthStyleProps & import("../..").FlexItemStyleProps & import("../..").LayoutStyleProps & import("../../layout/lib/utils/other").OtherStyleProps & import("../..").PositionStandardProps & import("../..").PositionLogicalProps & import("../../layout/lib/utils/space").SpaceStandardProps & import("../../layout/lib/utils/space").SpaceLogicalProps & React.HTMLAttributes<HTMLDivElement>, {
+    /**
+     * The `Modal.Target` is any element that is meant to show the Modal. 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 an icon button instead, pass an icon to the the `icon` prop and pass no
+     * children to the button. The `Modal.Target` is an alias for {@link PopupTarget Popup.Target}
+     * and uses the `usePopupTarget` hook, which provides a `ref` and an `onClick`. The provided
+     * `ref` will be used to return focus to this element when the Modal is closed. If the provided
+     * component does not forward the `ref` to an element, the fallback is to capture an element in
+     * the `onClick`. This can be overridden by providing a `returnFocusRef` to the model.
+     */
+    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>;
-            initialFocusRef: React.RefObject<any> | undefined;
+            initialFocusRef: React.RefObject<any> | undefined; /**
+             * The `Modal.Overlay` is the component that hooks a Modal up to the {@link PopupStack} as well
+             * as the semi-transparent overlay commonly used with modals. Internally, the `Modal.Overlay`
+             * component uses two `div` elements to ensure proper rendering of the `Modal` content. The
+             * default element is a `div` element and can be changed via the `as` prop.
+             */
             returnFocusRef: React.RefObject<any> | undefined;
             placement: import("@popperjs/core").Placement;
             id: string;
-            visibility: import("../..").Visibility;
+            visibility: "hidden" | "visible";
         };
         events: {
             updatePlacement(data: {
@@ -117,15 +180,26 @@ export declare const Modal: import("../../common").ComponentM<import("../../dial
             hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
         };
     }>;
-    Card: import("../../common").ElementComponentM<"div", import("./ModalCard").ModalCardProps, {
+    /**
+     * The `Modal.Overlay` is the component that hooks a Modal up to the {@link PopupStack} as well
+     * as the semi-transparent overlay commonly used with modals. Internally, the `Modal.Overlay`
+     * component uses two `div` elements to ensure proper rendering of the `Modal` content. The
+     * default element is a `div` element and can be changed via the `as` prop.
+     */
+    Overlay: import("@workday/canvas-kit-react/common").ElementComponentM<"div", import("./ModalOverlay").ModalOverlayProps, {
         state: {
             stackRef: React.RefObject<HTMLDivElement>;
             targetRef: React.RefObject<HTMLButtonElement>;
-            initialFocusRef: React.RefObject<any> | undefined;
+            initialFocusRef: React.RefObject<any> | undefined; /**
+             * The `Modal.Overlay` is the component that hooks a Modal up to the {@link PopupStack} as well
+             * as the semi-transparent overlay commonly used with modals. Internally, the `Modal.Overlay`
+             * component uses two `div` elements to ensure proper rendering of the `Modal` content. The
+             * default element is a `div` element and can be changed via the `as` prop.
+             */
             returnFocusRef: React.RefObject<any> | undefined;
             placement: import("@popperjs/core").Placement;
             id: string;
-            visibility: import("../..").Visibility;
+            visibility: "hidden" | "visible";
         };
         events: {
             updatePlacement(data: {
@@ -135,15 +209,27 @@ export declare const Modal: import("../../common").ComponentM<import("../../dial
             hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
         };
     }>;
-    CloseIcon: import("../../common").ElementComponentM<"button", import("../../popup/lib/PopupCloseIcon").PopupCloseIconProps, {
+    /**
+     * The `Modal.Card` is wraps a {@link PopupCard Popup.Card} which wraps a {@link Card}. It is
+     * the `role="dialog"` element and is uses `useModalCard` behavior hook which sets
+     * `aria-modal="true"` and sets the `aria-labelledby` that points to the `id` of the
+     * {@link ModalHeading Modal.Heading}. If you don't use a `Modal.Heading`, add an `aria-label`
+     * instead. The default element is a `div` and can be changed via the `as` prop.
+     */
+    Card: import("@workday/canvas-kit-react/common").ElementComponentM<"div", import("./ModalCard").ModalCardProps, {
         state: {
             stackRef: React.RefObject<HTMLDivElement>;
             targetRef: React.RefObject<HTMLButtonElement>;
-            initialFocusRef: React.RefObject<any> | undefined;
+            initialFocusRef: React.RefObject<any> | undefined; /**
+             * The `Modal.Overlay` is the component that hooks a Modal up to the {@link PopupStack} as well
+             * as the semi-transparent overlay commonly used with modals. Internally, the `Modal.Overlay`
+             * component uses two `div` elements to ensure proper rendering of the `Modal` content. The
+             * default element is a `div` element and can be changed via the `as` prop.
+             */
             returnFocusRef: React.RefObject<any> | undefined;
             placement: import("@popperjs/core").Placement;
             id: string;
-            visibility: import("../..").Visibility;
+            visibility: "hidden" | "visible";
         };
         events: {
             updatePlacement(data: {
@@ -153,15 +239,31 @@ export declare const Modal: import("../../common").ComponentM<import("../../dial
             hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
         };
     }>;
-    Target: import("../../common").ElementComponentM<import("../../common").ElementComponent<"button", import("../..").SecondaryButtonProps>, {}, {
+    /**
+     * The `Modal.Heading` semantically labels the Modal via adding an `id` that the
+     * {@link ModalCard Modal.Card} points to via `aria-labelledby`. If this component is not used,
+     * you must add an `aria-label` to the `Modal.Card` to label the Modal for screen reader users.
+     * This component uses the `useModalHeading` behavior hook which sets an `id` and also does some
+     * focus management logic for situations where there is no
+     * {@link ModalCloseIcon Modal.CloseIcon} component used. Please use `Modal.Heading` and don't
+     * use your own unless you also use the `useModalHeading` hook in your component. Consult
+     * accessibility if you cannot use this component. The default element is an `h2` and can be
+     * changed via the `as` prop.
+     */
+    Heading: import("@workday/canvas-kit-react/common").ElementComponentM<"h2", import("./ModalHeading").ModalHeadingProps, {
         state: {
             stackRef: React.RefObject<HTMLDivElement>;
             targetRef: React.RefObject<HTMLButtonElement>;
-            initialFocusRef: React.RefObject<any> | undefined;
+            initialFocusRef: React.RefObject<any> | undefined; /**
+             * The `Modal.Overlay` is the component that hooks a Modal up to the {@link PopupStack} as well
+             * as the semi-transparent overlay commonly used with modals. Internally, the `Modal.Overlay`
+             * component uses two `div` elements to ensure proper rendering of the `Modal` content. The
+             * default element is a `div` element and can be changed via the `as` prop.
+             */
             returnFocusRef: React.RefObject<any> | undefined;
             placement: import("@popperjs/core").Placement;
             id: string;
-            visibility: import("../..").Visibility;
+            visibility: "hidden" | "visible";
         };
         events: {
             updatePlacement(data: {
@@ -171,15 +273,27 @@ export declare const Modal: import("../../common").ComponentM<import("../../dial
             hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
         };
     }>;
-    Heading: import("../../common").ElementComponentM<"h2", import("./ModalHeading").ModalHeadingProps, {
+    /**
+     * The `Modal.CloseIcon` is the 'X' icon in the top corner of a Modal. It always requires an
+     * `aria-label` which must be translated. It uses the `usePopupCloseIcon` which adds an
+     * `onClick` that will close the Modal. The default component rendered is an
+     * {@link TertiaryButton} with just an icon that can be changed via the `as`. All props that
+     * `TertiaryButton` takes are also available by default.
+     */
+    CloseIcon: import("@workday/canvas-kit-react/common").ElementComponentM<"button", import("../../popup/lib/PopupCloseIcon").PopupCloseIconProps, {
         state: {
             stackRef: React.RefObject<HTMLDivElement>;
             targetRef: React.RefObject<HTMLButtonElement>;
-            initialFocusRef: React.RefObject<any> | undefined;
+            initialFocusRef: React.RefObject<any> | undefined; /**
+             * The `Modal.Overlay` is the component that hooks a Modal up to the {@link PopupStack} as well
+             * as the semi-transparent overlay commonly used with modals. Internally, the `Modal.Overlay`
+             * component uses two `div` elements to ensure proper rendering of the `Modal` content. The
+             * default element is a `div` element and can be changed via the `as` prop.
+             */
             returnFocusRef: React.RefObject<any> | undefined;
             placement: import("@popperjs/core").Placement;
             id: string;
-            visibility: import("../..").Visibility;
+            visibility: "hidden" | "visible";
         };
         events: {
             updatePlacement(data: {
@@ -189,15 +303,33 @@ export declare const Modal: import("../../common").ComponentM<import("../../dial
             hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
         };
     }>;
-    Overlay: import("../../common").ElementComponentM<"div", import("./ModalOverlay").ModalOverlayProps, {
+    /**
+     * The `Modal.CloseButton` is a convenience component that attaches an `onClick` listener to
+     * close the Modal. It uses the `usePopupCloseButton` behavior hook which adds an `onClick` that
+     * calls `model.events.hide()`. If you don't use this component, you'll have to add your own
+     * `onClick` and you'll have to hoist the model. The default component rendered is a
+     * {@link SecondaryButton} and can be changed via the `as` prop. This component doesn't contain
+     * any styles and will take on the styles of the component given to it. For example,
+     * `as={DeleteButton}` will render a delete button. `as={TertiaryButton}` with no children and
+     * an `icon` will render a {@link TertiaryButton} styled icon button. If you give it a base
+     * element like `as="button"`, you are responsible for styling the element. You can add your own
+     * `onClick` to perform side effects. Your callback will be merged with the `onClick` that
+     * closes the Modal.
+     */
+    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>;
-            initialFocusRef: React.RefObject<any> | undefined;
+            initialFocusRef: React.RefObject<any> | undefined; /**
+             * The `Modal.Overlay` is the component that hooks a Modal up to the {@link PopupStack} as well
+             * as the semi-transparent overlay commonly used with modals. Internally, the `Modal.Overlay`
+             * component uses two `div` elements to ensure proper rendering of the `Modal` content. The
+             * default element is a `div` element and can be changed via the `as` prop.
+             */
             returnFocusRef: React.RefObject<any> | undefined;
             placement: import("@popperjs/core").Placement;
             id: string;
-            visibility: import("../..").Visibility;
+            visibility: "hidden" | "visible";
         };
         events: {
             updatePlacement(data: {
@@ -207,15 +339,20 @@ export declare const Modal: import("../../common").ComponentM<import("../../dial
             hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
         };
     }>;
-    OverflowOverlay: import("../../common").ElementComponentM<"div", import("./ModalOverlay").ModalOverlayProps & import("../../common").PropsWithModel<{
+    Body: import("@workday/canvas-kit-react/common").ElementComponentM<"div", import("./ModalBody").ModalBodyProps, {
         state: {
             stackRef: React.RefObject<HTMLDivElement>;
             targetRef: React.RefObject<HTMLButtonElement>;
-            initialFocusRef: React.RefObject<any> | undefined;
+            initialFocusRef: React.RefObject<any> | undefined; /**
+             * The `Modal.Overlay` is the component that hooks a Modal up to the {@link PopupStack} as well
+             * as the semi-transparent overlay commonly used with modals. Internally, the `Modal.Overlay`
+             * component uses two `div` elements to ensure proper rendering of the `Modal` content. The
+             * default element is a `div` element and can be changed via the `as` prop.
+             */
             returnFocusRef: React.RefObject<any> | undefined;
             placement: import("@popperjs/core").Placement;
             id: string;
-            visibility: import("../..").Visibility;
+            visibility: "hidden" | "visible";
         };
         events: {
             updatePlacement(data: {
@@ -224,15 +361,30 @@ export declare const Modal: import("../../common").ComponentM<import("../../dial
             show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
             hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
         };
-    }>, {
+    }>;
+    /**
+     * If content is large, scrolling the entire overlay container is an option. Use the
+     * `Modal.OverflowOverlay` component instead of the {@link ModalOverlay Modal.Overlay}
+     * component. The {@link ModalCard Modal.Card}'s `maxHeight` and `height` will need to be reset
+     * to `inherit` to prevent any internal overflow.
+     *
+     * This component should be used in place of the {@link ModalOverlay Modal.Overlay} component if
+     * full body overflow is desired.
+     */
+    OverflowOverlay: import("@workday/canvas-kit-react/common").ElementComponentM<"div", import("./ModalOverlay").ModalOverlayProps & import("@workday/canvas-kit-react/common").PropsWithModel<{
         state: {
             stackRef: React.RefObject<HTMLDivElement>;
             targetRef: React.RefObject<HTMLButtonElement>;
-            initialFocusRef: React.RefObject<any> | undefined;
+            initialFocusRef: React.RefObject<any> | undefined; /**
+             * The `Modal.Overlay` is the component that hooks a Modal up to the {@link PopupStack} as well
+             * as the semi-transparent overlay commonly used with modals. Internally, the `Modal.Overlay`
+             * component uses two `div` elements to ensure proper rendering of the `Modal` content. The
+             * default element is a `div` element and can be changed via the `as` prop.
+             */
             returnFocusRef: React.RefObject<any> | undefined;
             placement: import("@popperjs/core").Placement;
             id: string;
-            visibility: import("../..").Visibility;
+            visibility: "hidden" | "visible";
         };
         events: {
             updatePlacement(data: {
@@ -241,16 +393,20 @@ export declare const Modal: import("../../common").ComponentM<import("../../dial
             show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
             hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
         };
-    }>;
-    CloseButton: import("../../common").ElementComponentM<import("../../common").ElementComponent<"button", import("../..").SecondaryButtonProps>, import("../../popup/lib/PopupCloseButton").PopupCloseButtonProps, {
+    }, {}>, {
         state: {
             stackRef: React.RefObject<HTMLDivElement>;
             targetRef: React.RefObject<HTMLButtonElement>;
-            initialFocusRef: React.RefObject<any> | undefined;
+            initialFocusRef: React.RefObject<any> | undefined; /**
+             * The `Modal.Overlay` is the component that hooks a Modal up to the {@link PopupStack} as well
+             * as the semi-transparent overlay commonly used with modals. Internally, the `Modal.Overlay`
+             * component uses two `div` elements to ensure proper rendering of the `Modal` content. The
+             * default element is a `div` element and can be changed via the `as` prop.
+             */
             returnFocusRef: React.RefObject<any> | undefined;
             placement: import("@popperjs/core").Placement;
             id: string;
-            visibility: import("../..").Visibility;
+            visibility: "hidden" | "visible";
         };
         events: {
             updatePlacement(data: {

package/dist/commonjs/modal/lib/Modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../../modal/lib/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAehB,CAAC"}
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../../modal/lib/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B;;;;;;GAMG;AACH,eAAO,MAAM,KAAK;;;;;;;;;;;2DAgBd;;;;;WAKG;;;;;;;;;2DALH;;;;;WAKG;;;;;;;;;2DALH;;;;;WAKG;;;;;;;;;;;;2DALH;;;;;WAKG;;;;;;;;;2DALH;;;;;WAKG;;;;;;;;;2DALH;;;;;WAKG;;;;;;;;;;2DALH;;;;;WAKG;;;;;;;;;;;;;;;;;2DALH;;;;;WAKG;;;;;;;;;;;;;;IAjBH;;;;;;;;;;OAUG;;;;;+DAEH;;;;;eAKG;;;;;;;;;;;;;;IALH;;;;;OAKG;;;;;+DALH;;;;;eAKG;;;;;;;;;;;;;;IAEH;;;;;;OAMG;;;;;+DAbH;;;;;eAKG;;;;;;;;;;;;;;IAUH;;;;;;;;;;OAUG;;;;;+DAzBH;;;;;eAKG;;;;;;;;;;;;;;IAsBH;;;;;;OAMG;;;;;+DAjCH;;;;;eAKG;;;;;;;;;;;;;;IA8BH;;;;;;;;;;;;OAYG;;;;;+DA/CH;;;;;eAKG;;;;;;;;;;;;;;;;;;+DALH;;;;;eAKG;;;;;;;;;;;;;;IA6CH;;;;;;;;OAQG;;;;;+DA1DH;;;;;eAKG;;;;;;;;;;;;;;;;;+DALH;;;;;eAKG;;;;;;;;;;;;;;CA0DL,CAAC"}

package/dist/commonjs/modal/lib/Modal.js

@@ -20,27 +20,99 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Modal = 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 ModalOverlay_1 = require("./ModalOverlay");
-var ModalCard_1 = require("./ModalCard");
-var hooks_1 = require("./hooks");
-var ModalHeading_1 = require("./ModalHeading");
-var ModalOverflowOverlay_1 = require("./ModalOverflowOverlay");
+const React = __importStar(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const popup_1 = require("@workday/canvas-kit-react/popup");
+const ModalOverlay_1 = require("./ModalOverlay");
+const ModalCard_1 = require("./ModalCard");
+const hooks_1 = require("./hooks");
+const ModalHeading_1 = require("./ModalHeading");
+const ModalOverflowOverlay_1 = require("./ModalOverflowOverlay");
+const ModalBody_1 = require("./ModalBody");
+/**
+ * This component is the container component and does not render any semantic elements. It provides
+ * a React Context model for the `Modal` subcomponents. If you manually pass a `model` to all
+ * subcomponents, this container component isn't needed. If you do not pass a `model`, the `Modal`
+ * container component will build a default one using `useModalModel`. `Modal` is a composition of a
+ * {@link Popup} component and has a similar structure to `Popup`.
+ */
 exports.Modal = common_1.createContainer()({
     displayName: 'Modal',
     modelHook: hooks_1.useModalModel,
     subComponents: {
-        Body: popup_1.Popup.Body,
-        Card: ModalCard_1.ModalCard,
-        CloseIcon: popup_1.Popup.CloseIcon,
+        /**
+         * The `Modal.Target` is any element that is meant to show the Modal. 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 an icon button instead, pass an icon to the the `icon` prop and pass no
+         * children to the button. The `Modal.Target` is an alias for {@link PopupTarget Popup.Target}
+         * and uses the `usePopupTarget` hook, which provides a `ref` and an `onClick`. The provided
+         * `ref` will be used to return focus to this element when the Modal is closed. If the provided
+         * component does not forward the `ref` to an element, the fallback is to capture an element in
+         * the `onClick`. This can be overridden by providing a `returnFocusRef` to the model.
+         */
         Target: popup_1.Popup.Target,
-        Heading: ModalHeading_1.ModalHeading,
+        /**
+         * The `Modal.Overlay` is the component that hooks a Modal up to the {@link PopupStack} as well
+         * as the semi-transparent overlay commonly used with modals. Internally, the `Modal.Overlay`
+         * component uses two `div` elements to ensure proper rendering of the `Modal` content. The
+         * default element is a `div` element and can be changed via the `as` prop.
+         */
         Overlay: ModalOverlay_1.ModalOverlay,
-        OverflowOverlay: ModalOverflowOverlay_1.ModalOverflowOverlay,
+        /**
+         * The `Modal.Card` is wraps a {@link PopupCard Popup.Card} which wraps a {@link Card}. It is
+         * the `role="dialog"` element and is uses `useModalCard` behavior hook which sets
+         * `aria-modal="true"` and sets the `aria-labelledby` that points to the `id` of the
+         * {@link ModalHeading Modal.Heading}. If you don't use a `Modal.Heading`, add an `aria-label`
+         * instead. The default element is a `div` and can be changed via the `as` prop.
+         */
+        Card: ModalCard_1.ModalCard,
+        /**
+         * The `Modal.Heading` semantically labels the Modal via adding an `id` that the
+         * {@link ModalCard Modal.Card} points to via `aria-labelledby`. If this component is not used,
+         * you must add an `aria-label` to the `Modal.Card` to label the Modal for screen reader users.
+         * This component uses the `useModalHeading` behavior hook which sets an `id` and also does some
+         * focus management logic for situations where there is no
+         * {@link ModalCloseIcon Modal.CloseIcon} component used. Please use `Modal.Heading` and don't
+         * use your own unless you also use the `useModalHeading` hook in your component. Consult
+         * accessibility if you cannot use this component. The default element is an `h2` and can be
+         * changed via the `as` prop.
+         */
+        Heading: ModalHeading_1.ModalHeading,
+        /**
+         * The `Modal.CloseIcon` is the 'X' icon in the top corner of a Modal. It always requires an
+         * `aria-label` which must be translated. It uses the `usePopupCloseIcon` which adds an
+         * `onClick` that will close the Modal. The default component rendered is an
+         * {@link TertiaryButton} with just an icon that can be changed via the `as`. All props that
+         * `TertiaryButton` takes are also available by default.
+         */
+        CloseIcon: popup_1.Popup.CloseIcon,
+        /**
+         * The `Modal.CloseButton` is a convenience component that attaches an `onClick` listener to
+         * close the Modal. It uses the `usePopupCloseButton` behavior hook which adds an `onClick` that
+         * calls `model.events.hide()`. If you don't use this component, you'll have to add your own
+         * `onClick` and you'll have to hoist the model. The default component rendered is a
+         * {@link SecondaryButton} and can be changed via the `as` prop. This component doesn't contain
+         * any styles and will take on the styles of the component given to it. For example,
+         * `as={DeleteButton}` will render a delete button. `as={TertiaryButton}` with no children and
+         * an `icon` will render a {@link TertiaryButton} styled icon button. If you give it a base
+         * element like `as="button"`, you are responsible for styling the element. You can add your own
+         * `onClick` to perform side effects. Your callback will be merged with the `onClick` that
+         * closes the Modal.
+         */
         CloseButton: popup_1.Popup.CloseButton,
+        Body: ModalBody_1.ModalBody,
+        /**
+         * If content is large, scrolling the entire overlay container is an option. Use the
+         * `Modal.OverflowOverlay` component instead of the {@link ModalOverlay Modal.Overlay}
+         * component. The {@link ModalCard Modal.Card}'s `maxHeight` and `height` will need to be reset
+         * to `inherit` to prevent any internal overflow.
+         *
+         * This component should be used in place of the {@link ModalOverlay Modal.Overlay} component if
+         * full body overflow is desired.
+         */
+        OverflowOverlay: ModalOverflowOverlay_1.ModalOverflowOverlay,
     },
-})(function (elemProps) {
+})(elemProps => {
     return React.createElement(React.Fragment, null, elemProps.children);
 });