@workday/canvas-kit-react 7.0.0-alpha.0-next.6 → 7.0.0-alpha.101-next.26

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

@@ -0,0 +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"}

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

@@ -0,0 +1,39 @@
+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);
+};
+import { createModelHook } from '@workday/canvas-kit-react/common';
+import { useAlwaysCloseOnOutsideClick, useCloseOnEscape, useFocusRedirect, usePopupModel, useReturnFocus, } from '@workday/canvas-kit-react/popup';
+import { multiSelectionManager, singleSelectionManager, useListModel, } from '@workday/canvas-kit-react/collection';
+export var useMenuModel = createModelHook({
+    defaultConfig: __assign(__assign(__assign({}, useListModel.defaultConfig), 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({}, useListModel.requiredConfig), usePopupModel.requiredConfig),
+})(function (config) {
+    // don't virtualize menus by default to avoid oddities with card width
+    var list = useListModel(useListModel.mergeConfig(config, {
+        shouldVirtualize: false,
+        selection: config.mode === 'single' ? singleSelectionManager : multiSelectionManager,
+    }));
+    var popup = usePopupModel(usePopupModel.mergeConfig(config, {
+        onHide: function () {
+            // reset the index ref to 0 again so registration doesn't start where it left off
+            list.state.indexRef.current = 0;
+        },
+    }));
+    useAlwaysCloseOnOutsideClick(popup);
+    useCloseOnEscape(popup);
+    useReturnFocus(popup);
+    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 });
+});

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

@@ -1,18 +1,264 @@
 import * as React from 'react';
-import { ExtractProps } from '@workday/canvas-kit-react/common';
-import { Dialog } from '@workday/canvas-kit-react/dialog';
-export interface ModalProps extends ExtractProps<typeof Dialog, never> {
-    /** The contents of the Modal. Can be `Modal` subcomponents or any valid elements. */
-    children: React.ReactNode;
-}
-export declare const Modal: import("../../common").Component<ModalProps> & {
-    Body: import("../../common").ElementComponent<"div", import("@workday/canvas-kit-labs-react/common/lib/utils/border").BorderShorthandStyleProps & import("@workday/canvas-kit-labs-react/common/lib/utils/border").BorderColorStyleProps & import("@workday/canvas-kit-labs-react/common/lib/utils/border").BorderRadiusStyleProps & import("@workday/canvas-kit-labs-react/common/lib/utils/border").BorderLineStyleProps & import("@workday/canvas-kit-labs-react/common/lib/utils/border").BorderWidthStyleProps & import("@workday/canvas-kit-labs-react/common/lib/utils/border").BorderLogicalStyleProps & import("@workday/canvas-kit-labs-react").ColorStyleProps & import("@workday/canvas-kit-labs-react").DepthStyleProps & import("@workday/canvas-kit-labs-react").FlexItemStyleProps & import("@workday/canvas-kit-labs-react").LayoutStyleProps & import("@workday/canvas-kit-labs-react/common/lib/utils/other").OtherStyleProps & import("@workday/canvas-kit-labs-react/common/lib/utils/position").PositionStandardProps & import("@workday/canvas-kit-labs-react/common/lib/utils/position").PositionLogicalProps & import("@workday/canvas-kit-labs-react/common/lib/utils/space").SpaceStandardProps & import("@workday/canvas-kit-labs-react/common/lib/utils/space").SpaceLogicalProps>;
-    Card: import("../../common").ElementComponent<"div", import("./ModalCard").ModalCardProps>;
-    CloseIcon: import("../../common").ElementComponent<"button", import("../../popup/lib/PopupCloseIcon").PopupCloseIconProps>;
-    Target: import("../../common").ElementComponent<import("../../common").ElementComponent<"button", import("../..").SecondaryButtonProps>, import("../../popup/lib/PopupTarget").PopupTargetProps>;
-    Heading: import("../../common").ElementComponent<"h2", import("./ModalHeading").ModalHeadingProps>;
-    Overlay: import("../../common").ElementComponent<"div", import("./ModalOverlay").ModalOverlayProps>;
-    OverflowOverlay: import("../../common").ElementComponent<"div", import("./ModalOverlay").ModalOverlayProps>;
-    CloseButton: import("../../common").ElementComponent<import("../../common").ElementComponent<"button", import("../..").SecondaryButtonProps>, import("../../popup/lib/PopupCloseButton").PopupCloseButtonProps>;
+export declare const Modal: import("../../common").ComponentM<import("../../dialog").DialogProps & Partial<{
+    returnFocusRef: React.RefObject<any> | undefined;
+    initialFocusRef: React.RefObject<any> | undefined;
+    id: string;
+    initialVisibility: import("../..").Visibility;
+}> & {
+    onUpdatePlacement?: ((data: {
+        placement: import("@popperjs/core").Placement;
+    }, prevState: {
+        stackRef: React.RefObject<HTMLDivElement>;
+        targetRef: React.RefObject<HTMLButtonElement>;
+        initialFocusRef: React.RefObject<any> | undefined;
+        returnFocusRef: React.RefObject<any> | undefined;
+        placement: import("@popperjs/core").Placement;
+        id: string;
+        visibility: import("../..").Visibility;
+    }) => void) | undefined;
+    onShow?: ((data: Event | React.SyntheticEvent<Element, Event> | undefined, prevState: {
+        stackRef: React.RefObject<HTMLDivElement>;
+        targetRef: React.RefObject<HTMLButtonElement>;
+        initialFocusRef: React.RefObject<any> | undefined;
+        returnFocusRef: React.RefObject<any> | undefined;
+        placement: import("@popperjs/core").Placement;
+        id: string;
+        visibility: import("../..").Visibility;
+    }) => void) | undefined;
+    onHide?: ((data: Event | React.SyntheticEvent<Element, Event> | undefined, prevState: {
+        stackRef: React.RefObject<HTMLDivElement>;
+        targetRef: React.RefObject<HTMLButtonElement>;
+        initialFocusRef: React.RefObject<any> | undefined;
+        returnFocusRef: React.RefObject<any> | undefined;
+        placement: import("@popperjs/core").Placement;
+        id: string;
+        visibility: import("../..").Visibility;
+    }) => void) | undefined;
+} & {
+    shouldUpdatePlacement?: ((data: {
+        placement: import("@popperjs/core").Placement;
+    }, state: {
+        stackRef: React.RefObject<HTMLDivElement>;
+        targetRef: React.RefObject<HTMLButtonElement>;
+        initialFocusRef: React.RefObject<any> | undefined;
+        returnFocusRef: React.RefObject<any> | undefined;
+        placement: import("@popperjs/core").Placement;
+        id: string;
+        visibility: import("../..").Visibility;
+    }) => boolean) | undefined;
+    shouldShow?: ((data: Event | React.SyntheticEvent<Element, Event> | undefined, state: {
+        stackRef: React.RefObject<HTMLDivElement>;
+        targetRef: React.RefObject<HTMLButtonElement>;
+        initialFocusRef: React.RefObject<any> | undefined;
+        returnFocusRef: React.RefObject<any> | undefined;
+        placement: import("@popperjs/core").Placement;
+        id: string;
+        visibility: import("../..").Visibility;
+    }) => boolean) | undefined;
+    shouldHide?: ((data: Event | React.SyntheticEvent<Element, Event> | undefined, state: {
+        stackRef: React.RefObject<HTMLDivElement>;
+        targetRef: React.RefObject<HTMLButtonElement>;
+        initialFocusRef: React.RefObject<any> | undefined;
+        returnFocusRef: React.RefObject<any> | undefined;
+        placement: import("@popperjs/core").Placement;
+        id: string;
+        visibility: import("../..").Visibility;
+    }) => boolean) | undefined;
+} & import("../../common").PropsWithModel<{
+    state: {
+        stackRef: React.RefObject<HTMLDivElement>;
+        targetRef: React.RefObject<HTMLButtonElement>;
+        initialFocusRef: React.RefObject<any> | undefined;
+        returnFocusRef: React.RefObject<any> | undefined;
+        placement: import("@popperjs/core").Placement;
+        id: string;
+        visibility: import("../..").Visibility;
+    };
+    events: {
+        updatePlacement(data: {
+            placement: import("@popperjs/core").Placement;
+        }): void;
+        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;
+        returnFocusRef: React.RefObject<any> | undefined;
+        placement: import("@popperjs/core").Placement;
+        id: string;
+        visibility: import("../..").Visibility;
+    };
+    events: {
+        updatePlacement(data: {
+            placement: import("@popperjs/core").Placement;
+        }): void;
+        show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+        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>, {
+        state: {
+            stackRef: React.RefObject<HTMLDivElement>;
+            targetRef: React.RefObject<HTMLButtonElement>;
+            initialFocusRef: React.RefObject<any> | undefined;
+            returnFocusRef: React.RefObject<any> | undefined;
+            placement: import("@popperjs/core").Placement;
+            id: string;
+            visibility: import("../..").Visibility;
+        };
+        events: {
+            updatePlacement(data: {
+                placement: import("@popperjs/core").Placement;
+            }): void;
+            show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+            hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+        };
+    }>;
+    Card: import("../../common").ElementComponentM<"div", import("./ModalCard").ModalCardProps, {
+        state: {
+            stackRef: React.RefObject<HTMLDivElement>;
+            targetRef: React.RefObject<HTMLButtonElement>;
+            initialFocusRef: React.RefObject<any> | undefined;
+            returnFocusRef: React.RefObject<any> | undefined;
+            placement: import("@popperjs/core").Placement;
+            id: string;
+            visibility: import("../..").Visibility;
+        };
+        events: {
+            updatePlacement(data: {
+                placement: import("@popperjs/core").Placement;
+            }): void;
+            show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+            hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+        };
+    }>;
+    CloseIcon: import("../../common").ElementComponentM<"button", import("../../popup/lib/PopupCloseIcon").PopupCloseIconProps, {
+        state: {
+            stackRef: React.RefObject<HTMLDivElement>;
+            targetRef: React.RefObject<HTMLButtonElement>;
+            initialFocusRef: React.RefObject<any> | undefined;
+            returnFocusRef: React.RefObject<any> | undefined;
+            placement: import("@popperjs/core").Placement;
+            id: string;
+            visibility: import("../..").Visibility;
+        };
+        events: {
+            updatePlacement(data: {
+                placement: import("@popperjs/core").Placement;
+            }): void;
+            show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+            hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+        };
+    }>;
+    Target: import("../../common").ElementComponentM<import("../../common").ElementComponent<"button", import("../..").SecondaryButtonProps>, {}, {
+        state: {
+            stackRef: React.RefObject<HTMLDivElement>;
+            targetRef: React.RefObject<HTMLButtonElement>;
+            initialFocusRef: React.RefObject<any> | undefined;
+            returnFocusRef: React.RefObject<any> | undefined;
+            placement: import("@popperjs/core").Placement;
+            id: string;
+            visibility: import("../..").Visibility;
+        };
+        events: {
+            updatePlacement(data: {
+                placement: import("@popperjs/core").Placement;
+            }): void;
+            show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+            hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+        };
+    }>;
+    Heading: import("../../common").ElementComponentM<"h2", import("./ModalHeading").ModalHeadingProps, {
+        state: {
+            stackRef: React.RefObject<HTMLDivElement>;
+            targetRef: React.RefObject<HTMLButtonElement>;
+            initialFocusRef: React.RefObject<any> | undefined;
+            returnFocusRef: React.RefObject<any> | undefined;
+            placement: import("@popperjs/core").Placement;
+            id: string;
+            visibility: import("../..").Visibility;
+        };
+        events: {
+            updatePlacement(data: {
+                placement: import("@popperjs/core").Placement;
+            }): void;
+            show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+            hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+        };
+    }>;
+    Overlay: import("../../common").ElementComponentM<"div", import("./ModalOverlay").ModalOverlayProps, {
+        state: {
+            stackRef: React.RefObject<HTMLDivElement>;
+            targetRef: React.RefObject<HTMLButtonElement>;
+            initialFocusRef: React.RefObject<any> | undefined;
+            returnFocusRef: React.RefObject<any> | undefined;
+            placement: import("@popperjs/core").Placement;
+            id: string;
+            visibility: import("../..").Visibility;
+        };
+        events: {
+            updatePlacement(data: {
+                placement: import("@popperjs/core").Placement;
+            }): void;
+            show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+            hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+        };
+    }>;
+    OverflowOverlay: import("../../common").ElementComponentM<"div", import("./ModalOverlay").ModalOverlayProps & import("../../common").PropsWithModel<{
+        state: {
+            stackRef: React.RefObject<HTMLDivElement>;
+            targetRef: React.RefObject<HTMLButtonElement>;
+            initialFocusRef: React.RefObject<any> | undefined;
+            returnFocusRef: React.RefObject<any> | undefined;
+            placement: import("@popperjs/core").Placement;
+            id: string;
+            visibility: import("../..").Visibility;
+        };
+        events: {
+            updatePlacement(data: {
+                placement: import("@popperjs/core").Placement;
+            }): void;
+            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;
+            returnFocusRef: React.RefObject<any> | undefined;
+            placement: import("@popperjs/core").Placement;
+            id: string;
+            visibility: import("../..").Visibility;
+        };
+        events: {
+            updatePlacement(data: {
+                placement: import("@popperjs/core").Placement;
+            }): void;
+            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;
+            returnFocusRef: React.RefObject<any> | undefined;
+            placement: import("@popperjs/core").Placement;
+            id: string;
+            visibility: import("../..").Visibility;
+        };
+        events: {
+            updatePlacement(data: {
+                placement: import("@popperjs/core").Placement;
+            }): void;
+            show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+            hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+        };
+    }>;
 };
 //# sourceMappingURL=Modal.d.ts.map

package/dist/es6/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;AAC/B,OAAO,EAAkB,YAAY,EAAkB,MAAM,kCAAkC,CAAC;AAChG,OAAO,EAAC,MAAM,EAAC,MAAM,kCAAkC,CAAC;AAQxD,MAAM,WAAW,UAAW,SAAQ,YAAY,CAAC,OAAO,MAAM,EAAE,KAAK,CAAC;IACpE,qFAAqF;IACrF,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,KAAK;;;;;;;;;CAkBhB,CAAC"}
+{"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"}

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

@@ -1,29 +1,14 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import * as React from 'react';
-import { createComponent, useDefaultModel } from '@workday/canvas-kit-react/common';
-import { PopupModelContext, Popup } from '@workday/canvas-kit-react/popup';
+import { createContainer } from '@workday/canvas-kit-react/common';
+import { Popup } from '@workday/canvas-kit-react/popup';
 import { ModalOverlay } from './ModalOverlay';
 import { ModalCard } from './ModalCard';
 import { useModalModel } from './hooks';
 import { ModalHeading } from './ModalHeading';
 import { ModalOverflowOverlay } from './ModalOverflowOverlay';
-export var Modal = createComponent()({
+export var Modal = createContainer()({
     displayName: 'Modal',
-    Component: function (_a) {
-        var children = _a.children, model = _a.model, config = __rest(_a, ["children", "model"]);
-        var value = useDefaultModel(model, config, useModalModel);
-        return React.createElement(PopupModelContext.Provider, { value: value }, children);
-    },
+    modelHook: useModalModel,
     subComponents: {
         Body: Popup.Body,
         Card: ModalCard,
@@ -34,4 +19,6 @@ export var Modal = createComponent()({
         OverflowOverlay: ModalOverflowOverlay,
         CloseButton: Popup.CloseButton,
     },
+})(function (elemProps) {
+    return React.createElement(React.Fragment, null, elemProps.children);
 });

package/dist/es6/modal/lib/ModalCard.d.ts

@@ -1,6 +1,24 @@
+import * as React from 'react';
 import { ExtractProps } from '@workday/canvas-kit-react/common';
 import { Popup } from '@workday/canvas-kit-react/popup';
 export interface ModalCardProps extends ExtractProps<typeof Popup.Card, never> {
 }
-export declare const ModalCard: import("../../common").ElementComponent<"div", ModalCardProps>;
+export declare const ModalCard: import("../../common").ElementComponentM<"div", ModalCardProps, {
+    state: {
+        stackRef: React.RefObject<HTMLDivElement>;
+        targetRef: React.RefObject<HTMLButtonElement>;
+        initialFocusRef: React.RefObject<any> | undefined;
+        returnFocusRef: React.RefObject<any> | undefined;
+        placement: import("@popperjs/core").Placement;
+        id: string;
+        visibility: import("../..").Visibility;
+    };
+    events: {
+        updatePlacement(data: {
+            placement: import("@popperjs/core").Placement;
+        }): void;
+        show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+        hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+    };
+}>;
 //# sourceMappingURL=ModalCard.d.ts.map

package/dist/es6/modal/lib/ModalCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModalCard.d.ts","sourceRoot":"","sources":["../../../../modal/lib/ModalCard.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAmC,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAChG,OAAO,EAAC,KAAK,EAAoB,MAAM,iCAAiC,CAAC;AAIzE,MAAM,WAAW,cAAe,SAAQ,YAAY,CAAC,OAAO,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC;CAAG;AAEjF,eAAO,MAAM,SAAS,gEAYpB,CAAC"}
+{"version":3,"file":"ModalCard.d.ts","sourceRoot":"","sources":["../../../../modal/lib/ModalCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAqB,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAClF,OAAO,EAAC,KAAK,EAAC,MAAM,iCAAiC,CAAC;AAItD,MAAM,WAAW,cAAe,SAAQ,YAAY,CAAC,OAAO,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC;CAAG;AAEjF,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;EAQpB,CAAC"}

package/dist/es6/modal/lib/ModalCard.js

@@ -9,27 +9,14 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import * as React from 'react';
-import { createComponent, useModelContext } from '@workday/canvas-kit-react/common';
-import { Popup, PopupModelContext } from '@workday/canvas-kit-react/popup';
-import { useModalCard } from './hooks';
-export var ModalCard = createComponent('div')({
+import { createSubcomponent } from '@workday/canvas-kit-react/common';
+import { Popup } from '@workday/canvas-kit-react/popup';
+import { useModalCard, useModalModel } from './hooks';
+export var ModalCard = createSubcomponent('div')({
     displayName: 'Modal.Card',
-    Component: function (_a, ref, Element) {
-        var children = _a.children, model = _a.model, elemProps = __rest(_a, ["children", "model"]);
-        var localModel = useModelContext(PopupModelContext, model);
-        var props = useModalCard(localModel, elemProps, ref);
-        return (React.createElement(Popup.Card, __assign({ as: Element, width: 440, borderWidth: 0, margin: "xl" }, props), children));
-    },
+    modelHook: useModalModel,
+    elemPropsHook: useModalCard,
+})(function (elemProps, Element) {
+    return (React.createElement(Popup.Card, __assign({ as: Element, width: 440, borderWidth: 0, margin: "xl", depth: 6 }, elemProps)));
 });

package/dist/es6/modal/lib/ModalHeading.d.ts

@@ -1,6 +1,24 @@
+import * as React from 'react';
 import { ExtractProps } from '@workday/canvas-kit-react/common';
 import { Popup } from '@workday/canvas-kit-react/popup';
 export interface ModalHeadingProps extends ExtractProps<typeof Popup.Heading, never> {
 }
-export declare const ModalHeading: import("../../common").ElementComponent<"h2", ModalHeadingProps>;
+export declare const ModalHeading: import("../../common").ElementComponentM<"h2", ModalHeadingProps, {
+    state: {
+        stackRef: React.RefObject<HTMLDivElement>;
+        targetRef: React.RefObject<HTMLButtonElement>;
+        initialFocusRef: React.RefObject<any> | undefined;
+        returnFocusRef: React.RefObject<any> | undefined;
+        placement: import("@popperjs/core").Placement;
+        id: string;
+        visibility: import("../..").Visibility;
+    };
+    events: {
+        updatePlacement(data: {
+            placement: import("@popperjs/core").Placement;
+        }): void;
+        show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+        hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+    };
+}>;
 //# sourceMappingURL=ModalHeading.d.ts.map

package/dist/es6/modal/lib/ModalHeading.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModalHeading.d.ts","sourceRoot":"","sources":["../../../../modal/lib/ModalHeading.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAmC,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAChG,OAAO,EAAC,KAAK,EAAoB,MAAM,iCAAiC,CAAC;AAIzE,MAAM,WAAW,iBAAkB,SAAQ,YAAY,CAAC,OAAO,KAAK,CAAC,OAAO,EAAE,KAAK,CAAC;CAAG;AAEvF,eAAO,MAAM,YAAY,kEAYvB,CAAC"}
+{"version":3,"file":"ModalHeading.d.ts","sourceRoot":"","sources":["../../../../modal/lib/ModalHeading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAqB,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAClF,OAAO,EAAC,KAAK,EAAC,MAAM,iCAAiC,CAAC;AAItD,MAAM,WAAW,iBAAkB,SAAQ,YAAY,CAAC,OAAO,KAAK,CAAC,OAAO,EAAE,KAAK,CAAC;CAAG;AAEvF,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;EAMvB,CAAC"}

package/dist/es6/modal/lib/ModalHeading.js

@@ -9,27 +9,14 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import * as React from 'react';
-import { createComponent, useModelContext } from '@workday/canvas-kit-react/common';
-import { Popup, PopupModelContext } from '@workday/canvas-kit-react/popup';
-import { useModalHeading } from './hooks';
-export var ModalHeading = createComponent('h2')({
+import { createSubcomponent } from '@workday/canvas-kit-react/common';
+import { Popup } from '@workday/canvas-kit-react/popup';
+import { useModalHeading, useModalModel } from './hooks';
+export var ModalHeading = createSubcomponent('h2')({
     displayName: 'Modal.Heading',
-    Component: function (_a, ref, Element) {
-        var children = _a.children, model = _a.model, elemProps = __rest(_a, ["children", "model"]);
-        var localModel = useModelContext(PopupModelContext, model);
-        var props = useModalHeading(localModel, elemProps, ref);
-        return (React.createElement(Popup.Heading, __assign({ as: Element }, props), children));
-    },
+    modelHook: useModalModel,
+    elemPropsHook: useModalHeading,
+})(function (elemProps, Element) {
+    return React.createElement(Popup.Heading, __assign({ as: Element }, elemProps));
 });

package/dist/es6/modal/lib/ModalOverflowOverlay.d.ts

@@ -1,2 +1,37 @@
-export declare const ModalOverflowOverlay: import("../../common").ElementComponent<"div", import("./ModalOverlay").ModalOverlayProps>;
+import * as React from 'react';
+export declare const ModalOverflowOverlay: import("../../common").ElementComponentM<"div", import("./ModalOverlay").ModalOverlayProps & import("../../common").PropsWithModel<{
+    state: {
+        stackRef: React.RefObject<HTMLDivElement>;
+        targetRef: React.RefObject<HTMLButtonElement>;
+        initialFocusRef: React.RefObject<any> | undefined;
+        returnFocusRef: React.RefObject<any> | undefined;
+        placement: import("@popperjs/core").Placement;
+        id: string;
+        visibility: import("../..").Visibility;
+    };
+    events: {
+        updatePlacement(data: {
+            placement: import("@popperjs/core").Placement;
+        }): void;
+        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;
+        returnFocusRef: React.RefObject<any> | undefined;
+        placement: import("@popperjs/core").Placement;
+        id: string;
+        visibility: import("../..").Visibility;
+    };
+    events: {
+        updatePlacement(data: {
+            placement: import("@popperjs/core").Placement;
+        }): void;
+        show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+        hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+    };
+}>;
 //# sourceMappingURL=ModalOverflowOverlay.d.ts.map

package/dist/es6/modal/lib/ModalOverflowOverlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModalOverflowOverlay.d.ts","sourceRoot":"","sources":["../../../../modal/lib/ModalOverflowOverlay.tsx"],"names":[],"mappings":"AAWA,eAAO,MAAM,oBAAoB,4FAa/B,CAAC"}
+{"version":3,"file":"ModalOverflowOverlay.d.ts","sourceRoot":"","sources":["../../../../modal/lib/ModalOverflowOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAK/B,CAAC"}

package/dist/es6/modal/lib/ModalOverflowOverlay.js

@@ -9,28 +9,17 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import * as React from 'react';
-import { createComponent } from '@workday/canvas-kit-react/common';
+import { createSubcomponent } from '@workday/canvas-kit-react/common';
 import { ModalOverlay } from './ModalOverlay';
 import styled from '@emotion/styled';
+import { useModalModel } from './hooks';
 var StyledOverlay = styled(ModalOverlay)({
     '& > div': { maxHeight: 'inherit' },
 });
-export var ModalOverflowOverlay = createComponent('div')({
+export var ModalOverflowOverlay = createSubcomponent('div')({
     displayName: 'Modal.OverflowOverlay',
-    Component: function (_a, ref, Element) {
-        var children = _a.children, model = _a.model, elemProps = __rest(_a, ["children", "model"]);
-        return (React.createElement(StyledOverlay, __assign({ as: Element, ref: ref, overflow: "auto" }, elemProps), children));
-    },
+    modelHook: useModalModel,
+})(function (elemProps, Element) {
+    return React.createElement(StyledOverlay, __assign({ as: Element, overflowX: "hidden", overflowY: "auto" }, elemProps));
 });