@workday/canvas-kit-react 7.0.0-alpha.89-next.16 → 7.0.0-alpha.90-next.17

package/dist/commonjs/popup/lib/hooks/usePopupModel.d.ts

@@ -1,8 +1,272 @@
 import * as React from 'react';
-import { Model, ToModelConfig } from '@workday/canvas-kit-react/common';
-import { DisclosureEvents, DisclosureState, BaseDisclosureModelConfig } from '@workday/canvas-kit-react/disclosure';
-import type { Placement } from '@workday/canvas-kit-react/popup';
-export declare type PopupState = DisclosureState & {
+import { Placement } from '@workday/canvas-kit-react/popup';
+export declare const usePopupModel: (<TT_Special_Generic>(config?: (Partial<{
+    /**
+     * Optional reference to an element that should receive focus when a popup is hidden. If left
+     * blank, focus will return to the `targetRef`
+     */
+    returnFocusRef: React.RefObject<any> | undefined;
+    /**
+     * Optional reference to an element that should receive focus when a popup is shown. If left blank,
+     * focus will be moved to the first focusable element inside the popup.
+     */
+    initialFocusRef: React.RefObject<any> | undefined;
+    id: string;
+    initialVisibility: import("../../../disclosure").Visibility;
+}> & {
+    onUpdatePlacement?: ((data: {
+        placement: Placement;
+    }, prevState: {
+        /**
+         * Reference of the stack item used in the PopupStack. This value will be used in all
+         * Popup-related behaviors.
+         */
+        stackRef: React.RefObject<HTMLDivElement>;
+        /**
+         * Reference of the target element. This will point to the element that triggered the showing of a
+         * Popup and is used in Popup-related behaviors.
+         */
+        targetRef: React.RefObject<HTMLButtonElement>;
+        /**
+         * Optional reference to an element that should receive focus when a popup is shown. If left blank,
+         * focus will be moved to the first focusable element inside the popup.
+         */
+        initialFocusRef: React.RefObject<any> | undefined;
+        /**
+         * Optional reference to an element that should receive focus when a popup is hidden. If left
+         * blank, focus will return to the `targetRef`
+         */
+        returnFocusRef: React.RefObject<any> | undefined;
+        /**
+         * The placement chosen by the positioning Popper. This should get set prior to showing the popup
+         * content.
+         * @default 'bottom'
+         */
+        placement: import("@popperjs/core").Placement;
+        id: string;
+        visibility: import("../../../disclosure").Visibility;
+    }) => void) | undefined;
+    onShow?: ((data: {
+        event: Event | React.SyntheticEvent<Element, Event>;
+    } | undefined, prevState: {
+        /**
+         * Reference of the stack item used in the PopupStack. This value will be used in all
+         * Popup-related behaviors.
+         */
+        stackRef: React.RefObject<HTMLDivElement>;
+        /**
+         * Reference of the target element. This will point to the element that triggered the showing of a
+         * Popup and is used in Popup-related behaviors.
+         */
+        targetRef: React.RefObject<HTMLButtonElement>;
+        /**
+         * Optional reference to an element that should receive focus when a popup is shown. If left blank,
+         * focus will be moved to the first focusable element inside the popup.
+         */
+        initialFocusRef: React.RefObject<any> | undefined;
+        /**
+         * Optional reference to an element that should receive focus when a popup is hidden. If left
+         * blank, focus will return to the `targetRef`
+         */
+        returnFocusRef: React.RefObject<any> | undefined;
+        /**
+         * The placement chosen by the positioning Popper. This should get set prior to showing the popup
+         * content.
+         * @default 'bottom'
+         */
+        placement: import("@popperjs/core").Placement;
+        id: string;
+        visibility: import("../../../disclosure").Visibility;
+    }) => void) | undefined;
+    onHide?: ((data: {
+        event: Event | React.SyntheticEvent<Element, Event>;
+    } | undefined, prevState: {
+        /**
+         * Reference of the stack item used in the PopupStack. This value will be used in all
+         * Popup-related behaviors.
+         */
+        stackRef: React.RefObject<HTMLDivElement>;
+        /**
+         * Reference of the target element. This will point to the element that triggered the showing of a
+         * Popup and is used in Popup-related behaviors.
+         */
+        targetRef: React.RefObject<HTMLButtonElement>;
+        /**
+         * Optional reference to an element that should receive focus when a popup is shown. If left blank,
+         * focus will be moved to the first focusable element inside the popup.
+         */
+        initialFocusRef: React.RefObject<any> | undefined;
+        /**
+         * Optional reference to an element that should receive focus when a popup is hidden. If left
+         * blank, focus will return to the `targetRef`
+         */
+        returnFocusRef: React.RefObject<any> | undefined;
+        /**
+         * The placement chosen by the positioning Popper. This should get set prior to showing the popup
+         * content.
+         * @default 'bottom'
+         */
+        placement: import("@popperjs/core").Placement;
+        id: string;
+        visibility: import("../../../disclosure").Visibility;
+    }) => void) | undefined;
+} & {
+    shouldUpdatePlacement?: ((data: {
+        placement: Placement;
+    }, state: {
+        /**
+         * Reference of the stack item used in the PopupStack. This value will be used in all
+         * Popup-related behaviors.
+         */
+        stackRef: React.RefObject<HTMLDivElement>;
+        /**
+         * Reference of the target element. This will point to the element that triggered the showing of a
+         * Popup and is used in Popup-related behaviors.
+         */
+        targetRef: React.RefObject<HTMLButtonElement>;
+        /**
+         * Optional reference to an element that should receive focus when a popup is shown. If left blank,
+         * focus will be moved to the first focusable element inside the popup.
+         */
+        initialFocusRef: React.RefObject<any> | undefined;
+        /**
+         * Optional reference to an element that should receive focus when a popup is hidden. If left
+         * blank, focus will return to the `targetRef`
+         */
+        returnFocusRef: React.RefObject<any> | undefined;
+        /**
+         * The placement chosen by the positioning Popper. This should get set prior to showing the popup
+         * content.
+         * @default 'bottom'
+         */
+        placement: import("@popperjs/core").Placement;
+        id: string;
+        visibility: import("../../../disclosure").Visibility;
+    }) => boolean) | undefined;
+    shouldShow?: ((data: {
+        event: Event | React.SyntheticEvent<Element, Event>;
+    } | undefined, state: {
+        /**
+         * Reference of the stack item used in the PopupStack. This value will be used in all
+         * Popup-related behaviors.
+         */
+        stackRef: React.RefObject<HTMLDivElement>;
+        /**
+         * Reference of the target element. This will point to the element that triggered the showing of a
+         * Popup and is used in Popup-related behaviors.
+         */
+        targetRef: React.RefObject<HTMLButtonElement>;
+        /**
+         * Optional reference to an element that should receive focus when a popup is shown. If left blank,
+         * focus will be moved to the first focusable element inside the popup.
+         */
+        initialFocusRef: React.RefObject<any> | undefined;
+        /**
+         * Optional reference to an element that should receive focus when a popup is hidden. If left
+         * blank, focus will return to the `targetRef`
+         */
+        returnFocusRef: React.RefObject<any> | undefined;
+        /**
+         * The placement chosen by the positioning Popper. This should get set prior to showing the popup
+         * content.
+         * @default 'bottom'
+         */
+        placement: import("@popperjs/core").Placement;
+        id: string;
+        visibility: import("../../../disclosure").Visibility;
+    }) => boolean) | undefined;
+    shouldHide?: ((data: {
+        event: Event | React.SyntheticEvent<Element, Event>;
+    } | undefined, state: {
+        /**
+         * Reference of the stack item used in the PopupStack. This value will be used in all
+         * Popup-related behaviors.
+         */
+        stackRef: React.RefObject<HTMLDivElement>;
+        /**
+         * Reference of the target element. This will point to the element that triggered the showing of a
+         * Popup and is used in Popup-related behaviors.
+         */
+        targetRef: React.RefObject<HTMLButtonElement>;
+        /**
+         * Optional reference to an element that should receive focus when a popup is shown. If left blank,
+         * focus will be moved to the first focusable element inside the popup.
+         */
+        initialFocusRef: React.RefObject<any> | undefined;
+        /**
+         * Optional reference to an element that should receive focus when a popup is hidden. If left
+         * blank, focus will return to the `targetRef`
+         */
+        returnFocusRef: React.RefObject<any> | undefined;
+        /**
+         * The placement chosen by the positioning Popper. This should get set prior to showing the popup
+         * content.
+         * @default 'bottom'
+         */
+        placement: import("@popperjs/core").Placement;
+        id: string;
+        visibility: import("../../../disclosure").Visibility;
+    }) => boolean) | undefined;
+}) | undefined) => {
+    state: {
+        /**
+         * Reference of the stack item used in the PopupStack. This value will be used in all
+         * Popup-related behaviors.
+         */
+        stackRef: React.RefObject<HTMLDivElement>;
+        /**
+         * Reference of the target element. This will point to the element that triggered the showing of a
+         * Popup and is used in Popup-related behaviors.
+         */
+        targetRef: React.RefObject<HTMLButtonElement>;
+        /**
+         * Optional reference to an element that should receive focus when a popup is shown. If left blank,
+         * focus will be moved to the first focusable element inside the popup.
+         */
+        initialFocusRef: React.RefObject<any> | undefined;
+        /**
+         * Optional reference to an element that should receive focus when a popup is hidden. If left
+         * blank, focus will return to the `targetRef`
+         */
+        returnFocusRef: React.RefObject<any> | undefined;
+        /**
+         * The placement chosen by the positioning Popper. This should get set prior to showing the popup
+         * content.
+         * @default 'bottom'
+         */
+        placement: import("@popperjs/core").Placement;
+        id: string;
+        visibility: import("../../../disclosure").Visibility;
+    };
+    events: {
+        /**
+         * Called whenever a popup placement changes around a target. This is useful for animations that
+         * depend on the placement chosen.
+         */
+        updatePlacement(data: {
+            placement: Placement;
+        }): void;
+        show(data?: {
+            event: Event | React.SyntheticEvent<Element, Event>;
+        } | undefined): void;
+        hide(data?: {
+            event: Event | React.SyntheticEvent<Element, Event>;
+        } | undefined): void;
+    };
+}) & import("../../../common").ModelExtras<{
+    /**
+     * Optional reference to an element that should receive focus when a popup is hidden. If left
+     * blank, focus will return to the `targetRef`
+     */
+    returnFocusRef: React.RefObject<any> | undefined;
+    /**
+     * Optional reference to an element that should receive focus when a popup is shown. If left blank,
+     * focus will be moved to the first focusable element inside the popup.
+     */
+    initialFocusRef: React.RefObject<any> | undefined;
+    id: string;
+    initialVisibility: import("../../../disclosure").Visibility;
+}, {}, {
     /**
      * Reference of the stack item used in the PopupStack. This value will be used in all
      * Popup-related behaviors.
@@ -17,20 +281,21 @@ export declare type PopupState = DisclosureState & {
      * Optional reference to an element that should receive focus when a popup is shown. If left blank,
      * focus will be moved to the first focusable element inside the popup.
      */
-    initialFocusRef?: React.RefObject<any>;
+    initialFocusRef: React.RefObject<any> | undefined;
     /**
      * Optional reference to an element that should receive focus when a popup is hidden. If left
      * blank, focus will return to the `targetRef`
      */
-    returnFocusRef?: React.RefObject<any>;
+    returnFocusRef: React.RefObject<any> | undefined;
     /**
      * The placement chosen by the positioning Popper. This should get set prior to showing the popup
      * content.
      * @default 'bottom'
      */
-    placement: Placement;
-};
-export declare type PopupEvents = DisclosureEvents & {
+    placement: import("@popperjs/core").Placement;
+    id: string;
+    visibility: import("../../../disclosure").Visibility;
+}, {
     /**
      * Called whenever a popup placement changes around a target. This is useful for animations that
      * depend on the placement chosen.
@@ -38,44 +303,104 @@ export declare type PopupEvents = DisclosureEvents & {
     updatePlacement(data: {
         placement: Placement;
     }): void;
-};
-export declare type PopupModel = Model<PopupState, PopupEvents>;
-export declare const popupEventMap: {
-    guards: {
+    show(data?: {
+        event: Event | React.SyntheticEvent<Element, Event>;
+    } | undefined): void;
+    hide(data?: {
+        event: Event | React.SyntheticEvent<Element, Event>;
+    } | undefined): void;
+}, {
+    state: {
         /**
-         * Determines if the `placement` state should be updated. This might be useful to keep the
-         * animation going a certain direction regardless of placement chosen by PopperJS.
+         * Reference of the stack item used in the PopupStack. This value will be used in all
+         * Popup-related behaviors.
          */
-        shouldUpdatePlacement: "updatePlacement";
-        shouldShow: "show";
-        shouldHide: "hide";
+        stackRef: React.RefObject<HTMLDivElement>;
+        /**
+         * Reference of the target element. This will point to the element that triggered the showing of a
+         * Popup and is used in Popup-related behaviors.
+         */
+        targetRef: React.RefObject<HTMLButtonElement>;
+        /**
+         * Optional reference to an element that should receive focus when a popup is shown. If left blank,
+         * focus will be moved to the first focusable element inside the popup.
+         */
+        initialFocusRef: React.RefObject<any> | undefined;
+        /**
+         * Optional reference to an element that should receive focus when a popup is hidden. If left
+         * blank, focus will return to the `targetRef`
+         */
+        returnFocusRef: React.RefObject<any> | undefined;
+        /**
+         * The placement chosen by the positioning Popper. This should get set prior to showing the popup
+         * content.
+         * @default 'bottom'
+         */
+        placement: import("@popperjs/core").Placement;
+        id: string;
+        visibility: import("../../../disclosure").Visibility;
     };
-    callbacks: {
+    events: {
         /**
-         * Called whenever the placement changes. This callback only fires when placement changes. For
-         * example, if the preferred placement of a Popper is 'bottom' and there's enough room to place
-         * a Popup on the bottom, the Popup will render below a target element without firing this
-         * callback. If there is not enough room and PopperJS chooses to update, this callback will be
-         * called to inform of the change in placement.
+         * Called whenever a popup placement changes around a target. This is useful for animations that
+         * depend on the placement chosen.
          */
-        onUpdatePlacement: "updatePlacement";
-        onShow: "show";
-        onHide: "hide";
+        updatePlacement(data: {
+            placement: Placement;
+        }): void;
+        show(data?: {
+            event: Event | React.SyntheticEvent<Element, Event>;
+        } | undefined): void;
+        hide(data?: {
+            event: Event | React.SyntheticEvent<Element, Event>;
+        } | undefined): void;
     };
-};
-export declare type BasePopupModelConfig = BaseDisclosureModelConfig & {
-    /**
-     * Optional reference to an element that should receive focus when a popup is hidden. If left
-     * blank, focus will return to the `targetRef`
-     */
-    returnFocusRef?: React.RefObject<any>;
-    /**
-     * Optional reference to an element that should receive focus when a popup is shown. If left blank,
-     * focus will be moved to the first focusable element inside the popup.
-     */
-    initialFocusRef?: React.RefObject<any>;
-};
-export declare type PopupModelConfig = BasePopupModelConfig & Partial<ToModelConfig<PopupState, PopupEvents, typeof popupEventMap>>;
-export declare const usePopupModel: (config?: PopupModelConfig) => PopupModel;
-export declare const PopupModelContext: React.Context<Model<PopupState, PopupEvents>>;
+}>;
+export declare const PopupModelContext: React.Context<{
+    state: {
+        /**
+         * Reference of the stack item used in the PopupStack. This value will be used in all
+         * Popup-related behaviors.
+         */
+        stackRef: React.RefObject<HTMLDivElement>;
+        /**
+         * Reference of the target element. This will point to the element that triggered the showing of a
+         * Popup and is used in Popup-related behaviors.
+         */
+        targetRef: React.RefObject<HTMLButtonElement>;
+        /**
+         * Optional reference to an element that should receive focus when a popup is shown. If left blank,
+         * focus will be moved to the first focusable element inside the popup.
+         */
+        initialFocusRef: React.RefObject<any> | undefined;
+        /**
+         * Optional reference to an element that should receive focus when a popup is hidden. If left
+         * blank, focus will return to the `targetRef`
+         */
+        returnFocusRef: React.RefObject<any> | undefined;
+        /**
+         * The placement chosen by the positioning Popper. This should get set prior to showing the popup
+         * content.
+         * @default 'bottom'
+         */
+        placement: import("@popperjs/core").Placement;
+        id: string;
+        visibility: import("../../../disclosure").Visibility;
+    };
+    events: {
+        /**
+         * Called whenever a popup placement changes around a target. This is useful for animations that
+         * depend on the placement chosen.
+         */
+        updatePlacement(data: {
+            placement: Placement;
+        }): void;
+        show(data?: {
+            event: Event | React.SyntheticEvent<Element, Event>;
+        } | undefined): void;
+        hide(data?: {
+            event: Event | React.SyntheticEvent<Element, Event>;
+        } | undefined): void;
+    };
+}>;
 //# sourceMappingURL=usePopupModel.d.ts.map

package/dist/commonjs/popup/lib/hooks/usePopupModel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePopupModel.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/usePopupModel.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAiB,KAAK,EAAE,aAAa,EAAc,MAAM,kCAAkC,CAAC;AAEnG,OAAO,EACL,gBAAgB,EAChB,eAAe,EAGf,yBAAyB,EAE1B,MAAM,sCAAsC,CAAC;AAC9C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,iCAAiC,CAAC;AAE/D,oBAAY,UAAU,GAAG,eAAe,GAAG;IACzC;;;OAGG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC1C;;;OAGG;IACH,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;IAC9C;;;OAGG;IACH,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC;IACvC;;;OAGG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC;IACtC;;;;OAIG;IACH,SAAS,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,oBAAY,WAAW,GAAG,gBAAgB,GAAG;IAC3C;;;OAGG;IACH,eAAe,CAAC,IAAI,EAAE;QAAC,SAAS,EAAE,SAAS,CAAA;KAAC,GAAG,IAAI,CAAC;CACrD,CAAC;AAEF,oBAAY,UAAU,GAAG,KAAK,CAAC,UAAU,EAAE,WAAW,CAAC,CAAC;AAExD,eAAO,MAAM,aAAa;;QAGtB;;;WAGG;;;;;;QAKH;;;;;;WAMG;;;;;CAGL,CAAC;AAEH,oBAAY,oBAAoB,GAAG,yBAAyB,GAAG;IAC7D;;;OAGG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC;IACtC;;;OAGG;IACF,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC;CACzC,CAAC;AAEF,oBAAY,gBAAgB,GAAG,oBAAoB,GACjD,OAAO,CAAC,aAAa,CAAC,UAAU,EAAE,WAAW,EAAE,OAAO,aAAa,CAAC,CAAC,CAAC;AAExE,eAAO,MAAM,aAAa,YAAY,gBAAgB,KAAQ,UA0B7D,CAAC;AAMF,eAAO,MAAM,iBAAiB,+CAGrB,CAAC"}
+{"version":3,"file":"usePopupModel.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/usePopupModel.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAC,SAAS,EAAC,MAAM,iCAAiC,CAAC;AAK1D,eAAO,MAAM,aAAa;IAKtB;;;OAGG;;IAEH;;;OAGG;;;;;;mBA8C+B,SAAS;;QAlC3C;;;WAGG;;QAEH;;;WAGG;;QAEH;;;WAGG;;QAEH;;;WAGG;;QAEH;;;;WAIG;;;;;;;;QAxBH;;;WAGG;;QAEH;;;WAGG;;QAEH;;;WAGG;;QAEH;;;WAGG;;QAEH;;;;WAIG;;;;;;;;QAxBH;;;WAGG;;QAEH;;;WAGG;;QAEH;;;WAGG;;QAEH;;;WAGG;;QAEH;;;;WAIG;;;;;;;mBAU+B,SAAS;;QAlC3C;;;WAGG;;QAEH;;;WAGG;;QAEH;;;WAGG;;QAEH;;;WAGG;;QAEH;;;;WAIG;;;;;;;;QAxBH;;;WAGG;;QAEH;;;WAGG;;QAEH;;;WAGG;;QAEH;;;WAGG;;QAEH;;;;WAIG;;;;;;;;QAxBH;;;WAGG;;QAEH;;;WAGG;;QAEH;;;WAGG;;QAEH;;;WAGG;;QAEH;;;;WAIG;;;;;;;QAxBH;;;WAGG;;QAEH;;;WAGG;;QAEH;;;WAGG;;QAEH;;;WAGG;;QAEH;;;;WAIG;;;;;;QAMH;;;WAGG;;uBAC+B,SAAS;;;;;;;;;;IAtD3C;;;OAGG;;IAEH;;;OAGG;;;;;IAYH;;;OAGG;;IAEH;;;OAGG;;IAEH;;;OAGG;;IAEH;;;OAGG;;IAEH;;;;OAIG;;;;;IAMH;;;OAGG;;mBAC+B,SAAS;;;;;;;;;;QAlC3C;;;WAGG;;QAEH;;;WAGG;;QAEH;;;WAGG;;QAEH;;;WAGG;;QAEH;;;;WAIG;;;;;;QAMH;;;WAGG;;uBAC+B,SAAS;;;;;;;;;EAS7C,CAAC;AAGH,eAAO,MAAM,iBAAiB;;QA9C1B;;;WAGG;;QAEH;;;WAGG;;QAEH;;;WAGG;;QAEH;;;WAGG;;QAEH;;;;WAIG;;;;;;QAMH;;;WAGG;;uBAC+B,SAAS;;;;;;;;;EAYO,CAAC"}

package/dist/commonjs/popup/lib/hooks/usePopupModel.js

@@ -30,49 +30,71 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PopupModelContext = exports.usePopupModel = exports.popupEventMap = void 0;
+exports.PopupModelContext = exports.usePopupModel = void 0;
 var React = __importStar(require("react"));
 var common_1 = require("@workday/canvas-kit-react/common");
 var disclosure_1 = require("@workday/canvas-kit-react/disclosure");
-exports.popupEventMap = common_1.createEventMap()({
-    guards: __assign(__assign({}, disclosure_1.disclosureEventMap.guards), { 
+// eslint-disable-next-line no-empty-function
+var noop = function () { };
+exports.usePopupModel = common_1.createModelHook({
+    // create enough of a model to use `Popup.Card` without a `Popup` container component.
+    defaultContext: { state: {}, events: { show: noop, hide: noop } },
+    defaultConfig: __assign(__assign({}, disclosure_1.useDisclosureModel.defaultConfig), { 
         /**
-         * Determines if the `placement` state should be updated. This might be useful to keep the
-         * animation going a certain direction regardless of placement chosen by PopperJS.
+         * Optional reference to an element that should receive focus when a popup is hidden. If left
+         * blank, focus will return to the `targetRef`
          */
-        shouldUpdatePlacement: 'updatePlacement' }),
-    callbacks: __assign(__assign({}, disclosure_1.disclosureEventMap.callbacks), { 
+        returnFocusRef: undefined, 
         /**
-         * Called whenever the placement changes. This callback only fires when placement changes. For
-         * example, if the preferred placement of a Popper is 'bottom' and there's enough room to place
-         * a Popup on the bottom, the Popup will render below a target element without firing this
-         * callback. If there is not enough room and PopperJS chooses to update, this callback will be
-         * called to inform of the change in placement.
+         * Optional reference to an element that should receive focus when a popup is shown. If left blank,
+         * focus will be moved to the first focusable element inside the popup.
          */
-        onUpdatePlacement: 'updatePlacement' }),
-});
-var usePopupModel = function (config) {
-    if (config === void 0) { config = {}; }
+        initialFocusRef: undefined }),
+    requiredConfig: disclosure_1.useDisclosureModel.requiredConfig,
+})(function (config) {
     var stackRef = React.useRef(null);
     var targetRef = React.useRef(null);
     var _a = React.useState('bottom'), placement = _a[0], setPlacement = _a[1];
     var disclosure = disclosure_1.useDisclosureModel(config);
-    var state = __assign(__assign({}, disclosure.state), { stackRef: stackRef,
-        targetRef: targetRef, initialFocusRef: config.initialFocusRef, returnFocusRef: config.returnFocusRef, placement: placement });
-    var events = common_1.useEventMap(exports.popupEventMap, state, config, __assign(__assign({}, disclosure.events), { updatePlacement: function (_a) {
-            var placement = _a.placement;
-            setPlacement(placement);
-        } }));
+    var state = __assign(__assign({}, disclosure.state), { 
+        /**
+         * Reference of the stack item used in the PopupStack. This value will be used in all
+         * Popup-related behaviors.
+         */
+        stackRef: stackRef,
+        /**
+         * Reference of the target element. This will point to the element that triggered the showing of a
+         * Popup and is used in Popup-related behaviors.
+         */
+        targetRef: targetRef, 
+        /**
+         * Optional reference to an element that should receive focus when a popup is shown. If left blank,
+         * focus will be moved to the first focusable element inside the popup.
+         */
+        initialFocusRef: config.initialFocusRef, 
+        /**
+         * Optional reference to an element that should receive focus when a popup is hidden. If left
+         * blank, focus will return to the `targetRef`
+         */
+        returnFocusRef: config.returnFocusRef, 
+        /**
+         * The placement chosen by the positioning Popper. This should get set prior to showing the popup
+         * content.
+         * @default 'bottom'
+         */
+        placement: placement });
+    var events = __assign(__assign({}, disclosure.events), { 
+        /**
+         * Called whenever a popup placement changes around a target. This is useful for animations that
+         * depend on the placement chosen.
+         */
+        updatePlacement: function (data) {
+            setPlacement(data.placement);
+        } });
     return {
         state: state,
         events: events,
     };
-};
-exports.usePopupModel = usePopupModel;
-// eslint-disable-next-line no-empty-function
-var noop = function () { };
-// create enough of a model to use `Popup.Card` without a `Popup` container component.
-exports.PopupModelContext = React.createContext({
-    state: {},
-    events: { show: noop, hide: noop },
 });
+// create enough of a model to use `Popup.Card` without a `Popup` container component.
+exports.PopupModelContext = exports.usePopupModel.Context;

package/dist/commonjs/popup/lib/hooks/usePopupPopper.d.ts

@@ -3,7 +3,28 @@ import { Placement } from '../Popper';
 /**
  * Hooks a Popper up to a PopupModel
  */
-export declare const usePopupPopper: <P extends {}, R>(model: import("../../../common").Model<import("./usePopupModel").PopupState, import("./usePopupModel").PopupEvents>, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | React.RefObject<R> | null | undefined) => {
+export declare const usePopupPopper: <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(data?: {
+            event: Event | React.SyntheticEvent<Element, Event>;
+        } | undefined): void;
+        hide(data?: {
+            event: Event | React.SyntheticEvent<Element, Event>;
+        } | undefined): void;
+    };
+}, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | React.RefObject<R> | null | undefined) => {
     open: boolean;
     anchorElement: React.RefObject<HTMLButtonElement>;
     ref: (instance: any) => void;

package/dist/commonjs/popup/lib/hooks/usePopupPopper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePopupPopper.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/usePopupPopper.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,SAAS,EAAC,MAAM,WAAW,CAAC;AAEpC;;GAEG;AACH,eAAO,MAAM,cAAc;;;;mCAGX,SAAS;;;OAevB,CAAC"}
+{"version":3,"file":"usePopupPopper.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/usePopupPopper.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,SAAS,EAAC,MAAM,WAAW,CAAC;AAEpC;;GAEG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;mCAGX,SAAS;;;OAevB,CAAC"}

package/dist/commonjs/popup/lib/hooks/usePopupPopper.js

@@ -5,11 +5,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.usePopupPopper = void 0;
 var common_1 = require("@workday/canvas-kit-react/common");
+var usePopupModel_1 = require("./usePopupModel");
 var react_1 = __importDefault(require("react"));
 /**
  * Hooks a Popper up to a PopupModel
  */
-exports.usePopupPopper = common_1.createHook(function (_a, ref) {
+exports.usePopupPopper = common_1.createElemPropsHook(usePopupModel_1.usePopupModel)(function (_a, ref) {
     var state = _a.state, events = _a.events;
     var elementRef = common_1.useForkRef(ref, state.stackRef);
     var onPlacementChange = react_1.default.useCallback(function (placement) {

package/dist/commonjs/popup/lib/hooks/usePopupTarget.d.ts

@@ -1,7 +1,28 @@
 /**
  * Adds the necessary props to a `Target` component. Used by the Popup.Target subcomponent.
  */
-export declare const usePopupTarget: <P extends {}, R>(model: import("../../../common").Model<import("./usePopupModel").PopupState, import("./usePopupModel").PopupEvents>, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | import("react").RefObject<R> | null | undefined) => {
+export declare const usePopupTarget: <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(data?: {
+            event: Event | import("react").SyntheticEvent<Element, Event>;
+        } | undefined): void;
+        hide(data?: {
+            event: Event | import("react").SyntheticEvent<Element, Event>;
+        } | undefined): void;
+    };
+}, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | import("react").RefObject<R> | null | undefined) => {
     ref: (instance: any) => void;
     onClick: (event: React.MouseEvent) => void;
 } & P & (R extends HTMLOrSVGElement ? {

package/dist/commonjs/popup/lib/hooks/usePopupTarget.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePopupTarget.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/usePopupTarget.ts"],"names":[],"mappings":"AAGA;;GAEG;AACH,eAAO,MAAM,cAAc;;qBAIN,gBAAgB;;;OAgBnC,CAAC"}
+{"version":3,"file":"usePopupTarget.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/usePopupTarget.ts"],"names":[],"mappings":"AAGA;;GAEG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;qBAIN,gBAAgB;;;OAgBnC,CAAC"}

package/dist/commonjs/popup/lib/hooks/usePopupTarget.js

@@ -2,10 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.usePopupTarget = void 0;
 var common_1 = require("@workday/canvas-kit-react/common");
+var usePopupModel_1 = require("./usePopupModel");
 /**
  * Adds the necessary props to a `Target` component. Used by the Popup.Target subcomponent.
  */
-exports.usePopupTarget = common_1.createHook(function (_a, ref) {
+exports.usePopupTarget = common_1.createElemPropsHook(usePopupModel_1.usePopupModel)(function (_a, ref) {
     var events = _a.events, state = _a.state;
     var elementRef = common_1.useForkRef(ref, state.targetRef);
     return {