@workday/canvas-kit-react 6.8.10 → 6.9.0-next.3

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

@@ -0,0 +1,37 @@
+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/commonjs/modal/lib/ModalOverflowOverlay.d.ts.map

@@ -0,0 +1 @@
+{"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/commonjs/modal/lib/ModalOverflowOverlay.js

@@ -0,0 +1,50 @@
+"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]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModalOverflowOverlay = void 0;
+var React = __importStar(require("react"));
+var common_1 = require("@workday/canvas-kit-react/common");
+var ModalOverlay_1 = require("./ModalOverlay");
+var styled_1 = __importDefault(require("@emotion/styled"));
+var hooks_1 = require("./hooks");
+var StyledOverlay = styled_1.default(ModalOverlay_1.ModalOverlay)({
+    '& > div': { maxHeight: 'inherit' },
+});
+exports.ModalOverflowOverlay = common_1.createSubcomponent('div')({
+    displayName: 'Modal.OverflowOverlay',
+    modelHook: hooks_1.useModalModel,
+})(function (elemProps, Element) {
+    return React.createElement(StyledOverlay, __assign({ as: Element, overflowX: "hidden", overflowY: "auto" }, elemProps));
+});

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

@@ -1,11 +1,44 @@
 import React from 'react';
-import { PopupModel } from '@workday/canvas-kit-react/popup';
-export interface ModalOverlayProps {
-    model?: PopupModel;
+import { BoxProps } from '@workday/canvas-kit-react/layout';
+export interface ModalOverlayProps extends BoxProps {
     children: React.ReactNode;
 }
-export declare const ModalOverlay: import("../../common").ElementComponent<"div", ModalOverlayProps>;
-export declare const useModalOverlay: <P extends {}, R>(model: import("../../common").Model<import("../../popup").PopupState, import("../../popup").PopupEvents>, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | React.RefObject<R> | null | undefined) => {
+export declare const ModalOverlay: import("../../common").ElementComponentM<"div", 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;
+    };
+}>;
+export declare const useModalOverlay: <P extends {}, R>(model: {
+    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;
+    };
+}, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | React.RefObject<R> | null | undefined) => {
     ref: undefined;
 } & P & (R extends HTMLOrSVGElement ? {
     ref: React.Ref<R>;

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

@@ -1 +1 @@
-{"version":3,"file":"ModalOverlay.d.ts","sourceRoot":"","sources":["../../../../modal/lib/ModalOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,OAAO,EAAC,UAAU,EAAmC,MAAM,iCAAiC,CAAC;AAI7F,MAAM,WAAW,iBAAiB;IAChC,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAwCD,eAAO,MAAM,YAAY,mEAWvB,CAAC;AAEH,eAAO,MAAM,eAAe;;;;OAQ1B,CAAC"}
+{"version":3,"file":"ModalOverlay.d.ts","sourceRoot":"","sources":["../../../../modal/lib/ModalOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,OAAO,EAAM,QAAQ,EAAC,MAAM,kCAAkC,CAAC;AAG/D,MAAM,WAAW,iBAAkB,SAAQ,QAAQ;IACjD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AA+CD,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;EAOvB,CAAC;AAEH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;OAQ1B,CAAC"}

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

@@ -14,29 +14,21 @@ 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;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.useModalOverlay = exports.ModalOverlay = void 0;
 var react_1 = __importDefault(require("react"));
 var react_dom_1 = __importDefault(require("react-dom"));
 var common_1 = require("@workday/canvas-kit-react/common");
 var popup_1 = require("@workday/canvas-kit-react/popup");
-var core_1 = require("@emotion/core");
+var react_2 = require("@emotion/react");
 var styled_1 = __importDefault(require("@emotion/styled"));
-var fadeIn = core_1.keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  from {\n    background: none;\n  }\n  to {\n    background: rgba(0,0,0,0.65);\n  }\n"], ["\n  from {\n    background: none;\n  }\n  to {\n    background: rgba(0,0,0,0.65);\n  }\n"])));
-var Container = styled_1.default('div')({
+var layout_1 = require("@workday/canvas-kit-react/layout");
+var hooks_1 = require("./hooks");
+var fadeIn = react_2.keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  from {\n    background: none;\n  }\n  to {\n    background: rgba(0,0,0,0.65);\n  }\n"], ["\n  from {\n    background: none;\n  }\n  to {\n    background: rgba(0,0,0,0.65);\n  }\n"])));
+var Container = styled_1.default(layout_1.Box)({
     position: 'fixed',
     top: 0,
     left: 0,
@@ -55,23 +47,27 @@ var Container = styled_1.default('div')({
 // the Modal. The centering container forces a "center" pixel calculation by making sure the width
 // is always an even number
 var CenteringContainer = styled_1.default('div')({
-    height: '100vh',
+    maxHeight: '100vh',
     display: 'flex',
     position: 'absolute',
     left: 0,
     top: 0,
     alignItems: 'center',
     justifyContent: 'center',
+    // IE11 fix for setting min-height in a flex container
+    ':before': {
+        display: 'block',
+        content: "''",
+        height: '100vh',
+    },
 });
-exports.ModalOverlay = common_1.createComponent('div')({
+exports.ModalOverlay = common_1.createSubcomponent('div')({
     displayName: 'Modal.Overlay',
-    Component: function (_a, ref, Element) {
-        var model = _a.model, children = _a.children, elemProps = __rest(_a, ["model", "children"]);
-        var localModel = common_1.useModelContext(popup_1.PopupModelContext, model);
-        return localModel.state.visibility !== 'hidden' ? (react_1.default.createElement(OpenModalOverlay, __assign({ ref: ref, as: Element, model: localModel }, elemProps), children)) : null;
-    },
+    modelHook: hooks_1.useModalModel,
+})(function (elemProps, Element, model) {
+    return model.state.visibility !== 'hidden' ? (react_1.default.createElement(OpenModalOverlay, __assign({ as: Element, model: model }, elemProps))) : null;
 });
-exports.useModalOverlay = common_1.createHook(function (_a, ref) {
+exports.useModalOverlay = common_1.createElemPropsHook(popup_1.usePopupModel)(function (_a, ref) {
     var state = _a.state;
     var elementRef = common_1.useForkRef(ref, state.stackRef);
     popup_1.usePopupStack(elementRef);
@@ -80,27 +76,26 @@ exports.useModalOverlay = common_1.createHook(function (_a, ref) {
         ref: undefined,
     };
 });
-var OpenModalOverlay = common_1.createComponent('div')({
+var OpenModalOverlay = common_1.createSubcomponent('div')({
     displayName: 'Modal.OpenOverlay',
-    Component: function (_a, ref, Element) {
-        var model = _a.model, children = _a.children, elemProps = __rest(_a, ["model", "children"]);
-        var props = exports.useModalOverlay(model, elemProps, ref);
-        var windowSize = common_1.useWindowSize();
-        var content = (react_1.default.createElement(Container, __assign({ as: Element }, props),
-            react_1.default.createElement(CenteringContainer
+    modelHook: hooks_1.useModalModel,
+    elemPropsHook: exports.useModalOverlay,
+})(function (elemProps, Element, model) {
+    var windowSize = common_1.useWindowSize();
+    var content = (react_1.default.createElement(Container, __assign({ as: Element }, elemProps),
+        react_1.default.createElement(CenteringContainer
+        // make sure the centering container is an even number of pixels to avoid sub-pixel
+        // inaccuracies due to centering
+        , { 
             // make sure the centering container is an even number of pixels to avoid sub-pixel
             // inaccuracies due to centering
-            , { 
-                // make sure the centering container is an even number of pixels to avoid sub-pixel
-                // inaccuracies due to centering
-                style: { width: windowSize.width % 2 === 1 ? 'calc(100vw - 1px)' : '100vw' } }, children)));
-        // only render something on the client
-        if (typeof window !== 'undefined') {
-            return react_dom_1.default.createPortal(content, model.state.stackRef.current);
-        }
-        else {
-            return null;
-        }
-    },
+            style: { width: windowSize.width % 2 === 1 ? 'calc(100vw - 1px)' : '100vw' } }, elemProps.children)));
+    // only render something on the client
+    if (typeof window !== 'undefined') {
+        return react_dom_1.default.createPortal(content, model.state.stackRef.current);
+    }
+    else {
+        return null;
+    }
 });
 var templateObject_1;

package/dist/commonjs/modal/lib/hooks/index.js

@@ -1,9 +1,16 @@
 "use strict";
-function __export(m) {
-    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
-}
+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]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-__export(require("./useCloseOnOverlayClick"));
-__export(require("./useModalCard"));
-__export(require("./useModalHeading"));
-__export(require("./useModalModel"));
+__exportStar(require("./useCloseOnOverlayClick"), exports);
+__exportStar(require("./useModalCard"), exports);
+__exportStar(require("./useModalHeading"), exports);
+__exportStar(require("./useModalModel"), exports);

package/dist/commonjs/modal/lib/hooks/useCloseOnOverlayClick.d.ts

@@ -1,7 +1,27 @@
+import React from 'react';
 /**
  * Registers global listener for all clicks. It will only call the PopupModel's `hide` event if the
  * click happened outside the `[role=dialog]` of an overlay component. The difference between `useCloseOnOutsideClick`
  * and `useCloseOnOverlayClick` is the Overlay is a child of a `stackRef` element and has a different
  */
-export declare const useCloseOnOverlayClick: (model: import("../../..").Model<import("../../../popup").PopupState, import("../../../popup").PopupEvents>, elemProps?: {}) => {};
+export declare const useCloseOnOverlayClick: <P extends {}, R>(model: {
+    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;
+    };
+}, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | React.RefObject<R> | null | undefined) => {} & P & (R extends HTMLOrSVGElement ? {
+    ref: React.Ref<R>;
+} : {});
 //# sourceMappingURL=useCloseOnOverlayClick.d.ts.map

package/dist/commonjs/modal/lib/hooks/useCloseOnOverlayClick.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useCloseOnOverlayClick.d.ts","sourceRoot":"","sources":["../../../../../modal/lib/hooks/useCloseOnOverlayClick.ts"],"names":[],"mappings":"AAKA;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,oIA8ClC,CAAC"}
+{"version":3,"file":"useCloseOnOverlayClick.d.ts","sourceRoot":"","sources":["../../../../../modal/lib/hooks/useCloseOnOverlayClick.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B;;;;GAIG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;OA8CjC,CAAC"}

package/dist/commonjs/modal/lib/hooks/useCloseOnOverlayClick.js

@@ -3,15 +3,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCloseOnOverlayClick = void 0;
 var react_1 = __importDefault(require("react"));
 var canvas_kit_popup_stack_1 = require("@workday/canvas-kit-popup-stack");
+var common_1 = require("@workday/canvas-kit-react/common");
+var popup_1 = require("@workday/canvas-kit-react/popup");
 /**
  * Registers global listener for all clicks. It will only call the PopupModel's `hide` event if the
  * click happened outside the `[role=dialog]` of an overlay component. The difference between `useCloseOnOutsideClick`
  * and `useCloseOnOverlayClick` is the Overlay is a child of a `stackRef` element and has a different
  */
-exports.useCloseOnOverlayClick = function (model, elemProps) {
-    if (elemProps === void 0) { elemProps = {}; }
+exports.useCloseOnOverlayClick = common_1.createElemPropsHook(popup_1.usePopupModel)(function (model) {
     var onClick = react_1.default.useCallback(function (event) {
         if (!model.state.stackRef.current) {
             return;
@@ -31,7 +33,7 @@ exports.useCloseOnOverlayClick = function (model, elemProps) {
             elements.length &&
             elements[elements.length - 1] === model.state.stackRef.current &&
             elementsBetweenDialogAnBody.some(function (element) { return element === event.target; })) {
-            model.events.hide({ event: event });
+            model.events.hide(event);
         }
     }, [model.state.stackRef, model.events]);
     var visible = model.state.visibility !== 'hidden';
@@ -46,5 +48,5 @@ exports.useCloseOnOverlayClick = function (model, elemProps) {
             document.removeEventListener('mousedown', onClick);
         };
     }, [model.state.stackRef, visible, onClick]);
-    return elemProps;
-};
+    return {};
+});

package/dist/commonjs/modal/lib/hooks/useModalCard.d.ts

@@ -1,10 +1,21 @@
-/// <reference types="@emotion/core" />
-export declare const useModalCard: <P extends {}, R>(model: import("../../../common").Model<import("../../../popup").PopupState, import("../../../popup").PopupEvents>, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | import("react").RefObject<R> | null | undefined) => {
-    role: string;
-    'aria-labelledby': string;
-} & {
-    'aria-modal': boolean;
-} & P & (R extends HTMLOrSVGElement ? {
+export declare const useModalCard: <P extends {}, R>(model: {
+    state: {
+        stackRef: import("react").RefObject<HTMLDivElement>;
+        targetRef: import("react").RefObject<HTMLButtonElement>;
+        initialFocusRef: import("react").RefObject<any> | undefined;
+        returnFocusRef: import("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 | import("react").SyntheticEvent<Element, Event> | undefined): void;
+        hide(event?: Event | import("react").SyntheticEvent<Element, Event> | undefined): void;
+    };
+}, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | import("react").RefObject<R> | null | undefined) => {} & P & (R extends HTMLOrSVGElement ? {
     ref: import("react").Ref<R>;
 } : {});
 //# sourceMappingURL=useModalCard.d.ts.map

package/dist/commonjs/modal/lib/hooks/useModalCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useModalCard.d.ts","sourceRoot":"","sources":["../../../../../modal/lib/hooks/useModalCard.ts"],"names":[],"mappings":";AAGA,eAAO,MAAM,YAAY;;;;;;;OAOxB,CAAC"}
+{"version":3,"file":"useModalCard.d.ts","sourceRoot":"","sources":["../../../../../modal/lib/hooks/useModalCard.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;OAOxB,CAAC"}

package/dist/commonjs/modal/lib/hooks/useModalCard.js

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.useModalCard = void 0;
 var common_1 = require("@workday/canvas-kit-react/common");
 var popup_1 = require("@workday/canvas-kit-react/popup");
-exports.useModalCard = common_1.composeHooks(popup_1.usePopupCard, common_1.createHook(function (_a) {
-    var state = _a.state;
+exports.useModalCard = common_1.composeHooks(popup_1.usePopupCard, common_1.createElemPropsHook(popup_1.usePopupModel)(function () {
     return {
         'aria-modal': true,
     };

package/dist/commonjs/modal/lib/hooks/useModalHeading.d.ts

@@ -1,10 +1,22 @@
 import React from 'react';
-export declare const useModalHeading: <P extends {}, R>(model: import("../../../common").Model<import("../../../popup").PopupState, import("../../../popup").PopupEvents>, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | React.RefObject<R> | null | undefined) => {
-    id: string;
-} & {
-    ref: (instance: HTMLElement | null) => void;
-    onBlur: () => void;
-} & P & (R extends HTMLOrSVGElement ? {
+export declare const useModalHeading: <P extends {}, R>(model: {
+    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;
+    };
+}, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | React.RefObject<R> | null | undefined) => {} & P & (R extends HTMLOrSVGElement ? {
     ref: React.Ref<R>;
 } : {});
 //# sourceMappingURL=useModalHeading.d.ts.map

package/dist/commonjs/modal/lib/hooks/useModalHeading.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useModalHeading.d.ts","sourceRoot":"","sources":["../../../../../modal/lib/hooks/useModalHeading.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,eAAO,MAAM,eAAe;;;;;;;OAqB3B,CAAC"}
+{"version":3,"file":"useModalHeading.d.ts","sourceRoot":"","sources":["../../../../../modal/lib/hooks/useModalHeading.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;OAqB3B,CAAC"}

package/dist/commonjs/modal/lib/hooks/useModalHeading.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.useModalHeading = void 0;
 var common_1 = require("@workday/canvas-kit-react/common");
 var popup_1 = require("@workday/canvas-kit-react/popup");
-exports.useModalHeading = common_1.composeHooks(popup_1.usePopupHeading, common_1.createHook(function (_, ref) {
+exports.useModalHeading = common_1.composeHooks(popup_1.usePopupHeading, common_1.createElemPropsHook(popup_1.usePopupModel)(function (_, ref) {
     var _a = common_1.useLocalRef(ref), elementRef = _a.elementRef, localRef = _a.localRef;
     common_1.useMountLayout(function () {
         var _a, _b, _c;

package/dist/commonjs/modal/lib/hooks/useModalModel.d.ts

@@ -1,3 +1,120 @@
-import { PopupModelConfig } from '@workday/canvas-kit-react/popup';
-export declare const useModalModel: (config?: PopupModelConfig) => import("../../..").Model<import("../../../popup").PopupState, import("../../../popup").PopupEvents>;
+export declare const useModalModel: (<TT_Special_Generic>(config?: (Partial<{
+    returnFocusRef: import("react").RefObject<any> | undefined;
+    initialFocusRef: import("react").RefObject<any> | undefined;
+    id: string;
+    initialVisibility: import("../../..").Visibility;
+}> & {
+    onUpdatePlacement?: ((data: {
+        placement: import("@popperjs/core").Placement;
+    }, prevState: {
+        stackRef: import("react").RefObject<HTMLDivElement>;
+        targetRef: import("react").RefObject<HTMLButtonElement>;
+        initialFocusRef: import("react").RefObject<any> | undefined;
+        returnFocusRef: import("react").RefObject<any> | undefined;
+        placement: import("@popperjs/core").Placement;
+        id: string;
+        visibility: import("../../..").Visibility;
+    }) => void) | undefined;
+    onShow?: ((data: Event | import("react").SyntheticEvent<Element, Event> | undefined, prevState: {
+        stackRef: import("react").RefObject<HTMLDivElement>;
+        targetRef: import("react").RefObject<HTMLButtonElement>;
+        initialFocusRef: import("react").RefObject<any> | undefined;
+        returnFocusRef: import("react").RefObject<any> | undefined;
+        placement: import("@popperjs/core").Placement;
+        id: string;
+        visibility: import("../../..").Visibility;
+    }) => void) | undefined;
+    onHide?: ((data: Event | import("react").SyntheticEvent<Element, Event> | undefined, prevState: {
+        stackRef: import("react").RefObject<HTMLDivElement>;
+        targetRef: import("react").RefObject<HTMLButtonElement>;
+        initialFocusRef: import("react").RefObject<any> | undefined;
+        returnFocusRef: import("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: import("react").RefObject<HTMLDivElement>;
+        targetRef: import("react").RefObject<HTMLButtonElement>;
+        initialFocusRef: import("react").RefObject<any> | undefined;
+        returnFocusRef: import("react").RefObject<any> | undefined;
+        placement: import("@popperjs/core").Placement;
+        id: string;
+        visibility: import("../../..").Visibility;
+    }) => boolean) | undefined;
+    shouldShow?: ((data: Event | import("react").SyntheticEvent<Element, Event> | undefined, state: {
+        stackRef: import("react").RefObject<HTMLDivElement>;
+        targetRef: import("react").RefObject<HTMLButtonElement>;
+        initialFocusRef: import("react").RefObject<any> | undefined;
+        returnFocusRef: import("react").RefObject<any> | undefined;
+        placement: import("@popperjs/core").Placement;
+        id: string;
+        visibility: import("../../..").Visibility;
+    }) => boolean) | undefined;
+    shouldHide?: ((data: Event | import("react").SyntheticEvent<Element, Event> | undefined, state: {
+        stackRef: import("react").RefObject<HTMLDivElement>;
+        targetRef: import("react").RefObject<HTMLButtonElement>;
+        initialFocusRef: import("react").RefObject<any> | undefined;
+        returnFocusRef: import("react").RefObject<any> | undefined;
+        placement: import("@popperjs/core").Placement;
+        id: string;
+        visibility: import("../../..").Visibility;
+    }) => boolean) | undefined;
+}) | undefined) => {
+    state: {
+        stackRef: import("react").RefObject<HTMLDivElement>;
+        targetRef: import("react").RefObject<HTMLButtonElement>;
+        initialFocusRef: import("react").RefObject<any> | undefined;
+        returnFocusRef: import("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 | import("react").SyntheticEvent<Element, Event> | undefined): void;
+        hide(event?: Event | import("react").SyntheticEvent<Element, Event> | undefined): void;
+    };
+}) & import("../../../common").ModelExtras<{
+    returnFocusRef: import("react").RefObject<any> | undefined;
+    initialFocusRef: import("react").RefObject<any> | undefined;
+    id: string;
+    initialVisibility: import("../../..").Visibility;
+}, {}, {
+    stackRef: import("react").RefObject<HTMLDivElement>;
+    targetRef: import("react").RefObject<HTMLButtonElement>;
+    initialFocusRef: import("react").RefObject<any> | undefined;
+    returnFocusRef: import("react").RefObject<any> | undefined;
+    placement: import("@popperjs/core").Placement;
+    id: string;
+    visibility: import("../../..").Visibility;
+}, {
+    updatePlacement(data: {
+        placement: import("@popperjs/core").Placement;
+    }): void;
+    show(event?: Event | import("react").SyntheticEvent<Element, Event> | undefined): void;
+    hide(event?: Event | import("react").SyntheticEvent<Element, Event> | undefined): void;
+}, {
+    state: {
+        stackRef: import("react").RefObject<HTMLDivElement>;
+        targetRef: import("react").RefObject<HTMLButtonElement>;
+        initialFocusRef: import("react").RefObject<any> | undefined;
+        returnFocusRef: import("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 | import("react").SyntheticEvent<Element, Event> | undefined): void;
+        hide(event?: Event | import("react").SyntheticEvent<Element, Event> | undefined): void;
+    };
+}>;
 //# sourceMappingURL=useModalModel.d.ts.map

package/dist/commonjs/modal/lib/hooks/useModalModel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useModalModel.d.ts","sourceRoot":"","sources":["../../../../../modal/lib/hooks/useModalModel.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,EAQjB,MAAM,iCAAiC,CAAC;AAIzC,eAAO,MAAM,aAAa,oIAYzB,CAAC"}
+{"version":3,"file":"useModalModel.d.ts","sourceRoot":"","sources":["../../../../../modal/lib/hooks/useModalModel.ts"],"names":[],"mappings":"AAaA,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgBxB,CAAC"}

package/dist/commonjs/modal/lib/hooks/useModalModel.js

@@ -1,9 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.useModalModel = void 0;
 var popup_1 = require("@workday/canvas-kit-react/popup");
+var common_1 = require("../../../common");
 var useCloseOnOverlayClick_1 = require("./useCloseOnOverlayClick");
-exports.useModalModel = function (config) {
-    if (config === void 0) { config = {}; }
+exports.useModalModel = common_1.createModelHook({
+    defaultConfig: popup_1.usePopupModel.defaultConfig,
+    requiredConfig: popup_1.usePopupModel.requiredConfig,
+    contextOverride: popup_1.usePopupModel.Context,
+})(function (config) {
     var model = popup_1.usePopupModel(config);
     popup_1.useInitialFocus(model);
     popup_1.useReturnFocus(model);
@@ -13,4 +18,4 @@ exports.useModalModel = function (config) {
     popup_1.useAssistiveHideSiblings(model);
     popup_1.useDisableBodyScroll(model);
     return model;
-};
+});

package/dist/commonjs/pagination/index.js

@@ -1,6 +1,13 @@
 "use strict";
-function __export(m) {
-    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
-}
+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]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-__export(require("./lib/Pagination"));
+__exportStar(require("./lib/Pagination"), exports);