@workday/canvas-kit-react 7.0.0-alpha.89-next.16 → 7.0.0-alpha.92-next.19

package/dist/commonjs/popup/lib/PopupHeading.js

@@ -46,12 +46,11 @@ var React = __importStar(require("react"));
 var common_1 = require("@workday/canvas-kit-react/common");
 var card_1 = require("@workday/canvas-kit-react/card");
 var hooks_1 = require("./hooks");
-exports.PopupHeading = common_1.createComponent('h2')({
+exports.PopupHeading = common_1.createSubcomponent('h2')({
     displayName: 'Popup.Heading',
-    Component: function (_a, ref, Element) {
-        var children = _a.children, model = _a.model, elemProps = __rest(_a, ["children", "model"]);
-        var localModel = common_1.useModelContext(hooks_1.PopupModelContext, model);
-        var props = hooks_1.usePopupHeading(localModel, elemProps, ref);
-        return (React.createElement(card_1.Card.Heading, __assign({ as: Element, marginBottom: "s" }, props), children));
-    },
+    modelHook: hooks_1.usePopupModel,
+    elemPropsHook: hooks_1.usePopupHeading,
+})(function (_a, Element) {
+    var children = _a.children, elemProps = __rest(_a, ["children"]);
+    return (React.createElement(card_1.Card.Heading, __assign({ as: Element, marginBottom: "s" }, elemProps), children));
 });

package/dist/commonjs/popup/lib/PopupPopper.d.ts

@@ -1,12 +1,6 @@
 import * as React from 'react';
-import { PopupModel } from './hooks';
 import { Placement, PopperOptions } from './Popper';
 export interface PopupPopperProps {
-    /**
-     * Optionally pass a model directly to this component. Default is to implicitly use the same
-     * model as the container component which uses React context. Only use this for advanced use-cases
-     */
-    model?: PopupModel;
     /**
      * The placement of the `Popper` contents relative to the `anchorElement`. Accepts `auto`, `top`,
      * `right`, `bottom`, or `left`. Each placement can also be modified using any of the following
@@ -20,5 +14,26 @@ export interface PopupPopperProps {
     popperOptions?: Partial<PopperOptions>;
     children?: React.ReactNode;
 }
-export declare const PopupPopper: import("../../common").ElementComponent<"div", PopupPopperProps>;
+export declare const PopupPopper: import("../../common").ElementComponentM<"div", PopupPopperProps, {
+    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;
+    };
+}>;
 //# sourceMappingURL=PopupPopper.d.ts.map

package/dist/commonjs/popup/lib/PopupPopper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PopupPopper.d.ts","sourceRoot":"","sources":["../../../../popup/lib/PopupPopper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAC,UAAU,EAAoC,MAAM,SAAS,CAAC;AACtE,OAAO,EAAC,SAAS,EAAE,aAAa,EAAS,MAAM,UAAU,CAAC;AAE1D,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IACvC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,WAAW,kEAQtB,CAAC"}
+{"version":3,"file":"PopupPopper.d.ts","sourceRoot":"","sources":["../../../../popup/lib/PopupPopper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAC,SAAS,EAAE,aAAa,EAAS,MAAM,UAAU,CAAC;AAE1D,MAAM,WAAW,gBAAgB;IAC/B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IACvC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;EAMtB,CAAC"}

package/dist/commonjs/popup/lib/PopupPopper.js

@@ -46,12 +46,11 @@ var React = __importStar(require("react"));
 var common_1 = require("@workday/canvas-kit-react/common");
 var hooks_1 = require("./hooks");
 var Popper_1 = require("./Popper");
-exports.PopupPopper = common_1.createComponent('div')({
+exports.PopupPopper = common_1.createSubcomponent('div')({
     displayName: 'Popup.Popper',
-    Component: function (_a, ref) {
-        var children = _a.children, model = _a.model, elemProps = __rest(_a, ["children", "model"]);
-        var localModel = common_1.useModelContext(hooks_1.PopupModelContext, model);
-        var props = hooks_1.usePopupPopper(localModel, elemProps, ref);
-        return React.createElement(Popper_1.Popper, __assign({}, props), children);
-    },
+    modelHook: hooks_1.usePopupModel,
+    elemPropsHook: hooks_1.usePopupPopper,
+})(function (_a) {
+    var children = _a.children, elemProps = __rest(_a, ["children"]);
+    return React.createElement(Popper_1.Popper, __assign({}, elemProps), children);
 });

package/dist/commonjs/popup/lib/PopupTarget.d.ts

@@ -1,12 +1,26 @@
 import * as React from 'react';
-import { PopupModel } from '@workday/canvas-kit-react/popup';
 export interface PopupTargetProps {
-    /**
-     * Optionally pass a model directly to this component. Default is to implicitly use the same
-     * model as the container component which uses React context. Only use this for advanced use-cases
-     */
-    model?: PopupModel;
-    children?: React.ReactNode;
 }
-export declare const PopupTarget: import("../../common").ElementComponent<import("../../common").ElementComponent<"button", import("../../button").SecondaryButtonProps>, PopupTargetProps>;
+export declare const PopupTarget: import("../../common").ElementComponentM<import("../../common").ElementComponent<"button", import("../../button").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(data?: {
+            event: Event | React.SyntheticEvent<Element, Event>;
+        } | undefined): void;
+        hide(data?: {
+            event: Event | React.SyntheticEvent<Element, Event>;
+        } | undefined): void;
+    };
+}>;
 //# sourceMappingURL=PopupTarget.d.ts.map

package/dist/commonjs/popup/lib/PopupTarget.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PopupTarget.d.ts","sourceRoot":"","sources":["../../../../popup/lib/PopupTarget.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAC,UAAU,EAAC,MAAM,iCAAiC,CAAC;AAG3D,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,WAAW,2JAStB,CAAC"}
+{"version":3,"file":"PopupTarget.d.ts","sourceRoot":"","sources":["../../../../popup/lib/PopupTarget.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,WAAW,gBAAgB;CAAG;AAEpC,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;EAMtB,CAAC"}

package/dist/commonjs/popup/lib/PopupTarget.js

@@ -29,29 +29,16 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-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;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PopupTarget = void 0;
 var React = __importStar(require("react"));
 var common_1 = require("@workday/canvas-kit-react/common");
 var button_1 = require("@workday/canvas-kit-react/button");
 var hooks_1 = require("./hooks");
-exports.PopupTarget = common_1.createComponent(button_1.SecondaryButton)({
+exports.PopupTarget = common_1.createSubcomponent(button_1.SecondaryButton)({
     displayName: 'Popup.Target',
-    Component: function (_a, ref, Element) {
-        var children = _a.children, model = _a.model, elemProps = __rest(_a, ["children", "model"]);
-        var localModel = common_1.useModelContext(hooks_1.PopupModelContext, model);
-        var props = hooks_1.usePopupTarget(localModel, elemProps, ref);
-        return React.createElement(Element, __assign({}, props), children);
-    },
+    modelHook: hooks_1.usePopupModel,
+    elemPropsHook: hooks_1.usePopupTarget,
+})(function (elemProps, Element) {
+    return React.createElement(Element, __assign({}, elemProps));
 });

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

@@ -15,6 +15,7 @@ export * from './usePopupModel';
 export * from './usePopupPopper';
 export * from './usePopupStack';
 export * from './usePopupTarget';
+export * from './usePopupTargetContext';
 export * from './useReturnFocus';
 export * from './useTransferOnFullscreenEnter';
 export * from './useTransferOnFullscreenExit';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,gCAAgC,CAAC;AAC/C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,+BAA+B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,gCAAgC,CAAC;AAC/C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,yBAAyB,CAAC;AACxC,cAAc,kBAAkB,CAAC;AACjC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,+BAA+B,CAAC"}

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

@@ -27,6 +27,7 @@ __exportStar(require("./usePopupModel"), exports);
 __exportStar(require("./usePopupPopper"), exports);
 __exportStar(require("./usePopupStack"), exports);
 __exportStar(require("./usePopupTarget"), exports);
+__exportStar(require("./usePopupTargetContext"), exports);
 __exportStar(require("./useReturnFocus"), exports);
 __exportStar(require("./useTransferOnFullscreenEnter"), exports);
 __exportStar(require("./useTransferOnFullscreenExit"), exports);

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

@@ -1,4 +1,4 @@
-import { PopupModel } from './usePopupModel';
+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 `stackRef` element and its children regardless of the position in the
@@ -8,5 +8,28 @@ import { PopupModel } from './usePopupModel';
  * This should be used with popup elements that should close no matter their position in the stack
  * (i.e. Tooltips).
  */
-export declare const useAlwaysCloseOnOutsideClick: (model: PopupModel, elemProps?: {}) => {};
+export declare const useAlwaysCloseOnOutsideClick: <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) => {} & P & (R extends HTMLOrSVGElement ? {
+    ref: React.Ref<R>;
+} : {});
 //# sourceMappingURL=useAlwaysCloseOnOutsideClick.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"useAlwaysCloseOnOutsideClick.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/useAlwaysCloseOnOutsideClick.ts"],"names":[],"mappings":"AAGA,OAAO,EAAC,UAAU,EAAC,MAAM,iBAAiB,CAAC;AAE3C;;;;;;;;GAQG;AACH,eAAO,MAAM,4BAA4B,UAAW,UAAU,uBAiC7D,CAAC"}
+{"version":3,"file":"useAlwaysCloseOnOutsideClick.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/useAlwaysCloseOnOutsideClick.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B;;;;;;;;GAQG;AACH,eAAO,MAAM,4BAA4B;;;;;;;;;;;;;;;;;;;;;;;OAiCvC,CAAC"}

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

@@ -6,6 +6,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useAlwaysCloseOnOutsideClick = 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 usePopupModel_1 = require("./usePopupModel");
 /**
  * Registers global listener for all clicks. It will only call the PopupModel's `hide` event if the
  * click happened outside the `stackRef` element and its children regardless of the position in the
@@ -15,8 +17,7 @@ var canvas_kit_popup_stack_1 = require("@workday/canvas-kit-popup-stack");
  * This should be used with popup elements that should close no matter their position in the stack
  * (i.e. Tooltips).
  */
-var useAlwaysCloseOnOutsideClick = function (model, elemProps) {
-    if (elemProps === void 0) { elemProps = {}; }
+exports.useAlwaysCloseOnOutsideClick = common_1.createElemPropsHook(usePopupModel_1.usePopupModel)(function (model) {
     var onClick = react_1.default.useCallback(function (event) {
         if (!model.state.stackRef.current) {
             return;
@@ -41,6 +42,5 @@ var useAlwaysCloseOnOutsideClick = function (model, elemProps) {
             document.removeEventListener('mousedown', onClick);
         };
     }, [model.state.stackRef, visible, onClick]);
-    return elemProps;
-};
-exports.useAlwaysCloseOnOutsideClick = useAlwaysCloseOnOutsideClick;
+    return {};
+});

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

@@ -1,4 +1,4 @@
-import { PopupModel } from './usePopupModel';
+import React from 'react';
 /**
  * This hook will hide all sibling elements from assistive technology. Very useful for modal
  * dialogs. This will set `aria-hidden` for sibling elements of the provided PopupModel's
@@ -10,5 +10,28 @@ import { PopupModel } from './usePopupModel';
  *
  * This should be used on popup elements that need to hide content (i.e. Modals).
  */
-export declare const useAssistiveHideSiblings: (model: PopupModel, elemProps?: {}) => {};
+export declare const useAssistiveHideSiblings: <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) => {} & P & (R extends HTMLOrSVGElement ? {
+    ref: React.Ref<R>;
+} : {});
 //# sourceMappingURL=useAssistiveHideSiblings.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"useAssistiveHideSiblings.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/useAssistiveHideSiblings.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,UAAU,EAAC,MAAM,iBAAiB,CAAC;AAE3C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,wBAAwB,UAAW,UAAU,uBA6BzD,CAAC"}
+{"version":3,"file":"useAssistiveHideSiblings.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/useAssistiveHideSiblings.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B;;;;;;;;;;GAUG;AACH,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;OA6BnC,CAAC"}

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

@@ -12,6 +12,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useAssistiveHideSiblings = void 0;
 var react_1 = __importDefault(require("react"));
+var common_1 = require("@workday/canvas-kit-react/common");
+var usePopupModel_1 = require("./usePopupModel");
 /**
  * This hook will hide all sibling elements from assistive technology. Very useful for modal
  * dialogs. This will set `aria-hidden` for sibling elements of the provided PopupModel's
@@ -23,8 +25,7 @@ var react_1 = __importDefault(require("react"));
  *
  * This should be used on popup elements that need to hide content (i.e. Modals).
  */
-var useAssistiveHideSiblings = function (model, elemProps) {
-    if (elemProps === void 0) { elemProps = {}; }
+exports.useAssistiveHideSiblings = common_1.createElemPropsHook(usePopupModel_1.usePopupModel)(function (model) {
     var visible = model.state.visibility !== 'hidden';
     react_1.default.useEffect(function () {
         var _a, _b;
@@ -48,6 +49,5 @@ var useAssistiveHideSiblings = function (model, elemProps) {
             });
         };
     }, [model.state.stackRef, visible]);
-    return elemProps;
-};
-exports.useAssistiveHideSiblings = useAssistiveHideSiblings;
+    return {};
+});

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

@@ -1,4 +1,4 @@
-import { PopupModel } from './usePopupModel';
+import React from 'react';
 /**
  * This hook will bring an element to the top of the stack when any element inside the provided
  * PopupModel's `state.stackRef` element is clicked. If `Popup.Popper` was used or `PopupStack.add`
@@ -8,5 +8,28 @@ import { PopupModel } from './usePopupModel';
  *
  * This should be used on popup elements that are meant to persist (i.e. Windows).
  */
-export declare const useBringToTopOnClick: (model: PopupModel, elemProps?: {}) => {};
+export declare const useBringToTopOnClick: <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) => {} & P & (R extends HTMLOrSVGElement ? {
+    ref: React.Ref<R>;
+} : {});
 //# sourceMappingURL=useBringToTopOnClick.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"useBringToTopOnClick.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/useBringToTopOnClick.ts"],"names":[],"mappings":"AAGA,OAAO,EAAC,UAAU,EAAC,MAAM,iBAAiB,CAAC;AAE3C;;;;;;;;GAQG;AACH,eAAO,MAAM,oBAAoB,UAAW,UAAU,uBA6BrD,CAAC"}
+{"version":3,"file":"useBringToTopOnClick.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/useBringToTopOnClick.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B;;;;;;;;GAQG;AACH,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;OA6B/B,CAAC"}

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

@@ -6,6 +6,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useBringToTopOnClick = 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 usePopupModel_1 = require("./usePopupModel");
 /**
  * This hook will bring an element to the top of the stack when any element inside the provided
  * PopupModel's `state.stackRef` element is clicked. If `Popup.Popper` was used or `PopupStack.add`
@@ -15,8 +17,7 @@ var canvas_kit_popup_stack_1 = require("@workday/canvas-kit-popup-stack");
  *
  * This should be used on popup elements that are meant to persist (i.e. Windows).
  */
-var useBringToTopOnClick = function (model, elemProps) {
-    if (elemProps === void 0) { elemProps = {}; }
+exports.useBringToTopOnClick = common_1.createElemPropsHook(usePopupModel_1.usePopupModel)(function (model) {
     var timer = react_1.default.useRef(-1);
     var onClick = react_1.default.useCallback(function (event) {
         // requestAnimationFrame is used to control timing of when `bringToTop` is called.
@@ -39,6 +40,5 @@ var useBringToTopOnClick = function (model, elemProps) {
             document.removeEventListener('click', onClick);
         };
     }, [visible, onClick]);
-    return elemProps;
-};
-exports.useBringToTopOnClick = useBringToTopOnClick;
+    return {};
+});

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

@@ -1,4 +1,4 @@
-import { PopupModel } from './usePopupModel';
+import React from 'react';
 /**
  * Registers global detection of the Escape key. It will only call the PopupModel's `hide` event if the
  * provided model's `state.stackRef` element is the topmost in the stack.
@@ -6,5 +6,28 @@ import { PopupModel } from './usePopupModel';
  * This should be used with popup elements that are dismissible like Tooltips, Modals, non-modal
  * dialogs, dropdown menus, etc.
  */
-export declare const useCloseOnEscape: (model: PopupModel, elemProps?: {}) => {};
+export declare const useCloseOnEscape: <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) => {} & P & (R extends HTMLOrSVGElement ? {
+    ref: React.Ref<R>;
+} : {});
 //# sourceMappingURL=useCloseOnEscape.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"useCloseOnEscape.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/useCloseOnEscape.ts"],"names":[],"mappings":"AAIA,OAAO,EAAC,UAAU,EAAC,MAAM,iBAAiB,CAAC;AAE3C;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB,UAAW,UAAU,uBA2BjD,CAAC"}
+{"version":3,"file":"useCloseOnEscape.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/useCloseOnEscape.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;OA2B3B,CAAC"}

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

@@ -6,6 +6,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useCloseOnEscape = 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 usePopupModel_1 = require("./usePopupModel");
 /**
  * Registers global detection of the Escape key. It will only call the PopupModel's `hide` event if the
  * provided model's `state.stackRef` element is the topmost in the stack.
@@ -13,8 +15,7 @@ var canvas_kit_popup_stack_1 = require("@workday/canvas-kit-popup-stack");
  * This should be used with popup elements that are dismissible like Tooltips, Modals, non-modal
  * dialogs, dropdown menus, etc.
  */
-var useCloseOnEscape = function (model, elemProps) {
-    if (elemProps === void 0) { elemProps = {}; }
+exports.useCloseOnEscape = common_1.createElemPropsHook(usePopupModel_1.usePopupModel)(function (model) {
     var onKeyDown = react_1.default.useCallback(function (event) {
         if ((event.key === 'Esc' || event.key === 'Escape') &&
             canvas_kit_popup_stack_1.PopupStack.isTopmost(model.state.stackRef.current)) {
@@ -32,6 +33,5 @@ var useCloseOnEscape = function (model, elemProps) {
             document.removeEventListener('keydown', onKeyDown);
         };
     }, [onKeyDown, visible]);
-    return elemProps;
-};
-exports.useCloseOnEscape = useCloseOnEscape;
+    return {};
+});

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

@@ -1,8 +1,31 @@
-import { PopupModel } from './usePopupModel';
+import React from 'react';
 /**
  * Closes the popup when fullscreen is exited. Entering/exiting fullscreen changes the context of
  * the entire screen. This should be added to popup types that are very context sensitive like
  * Tooltips.
  */
-export declare const useCloseOnFullscreenExit: (model: PopupModel, elemProps?: {}) => {};
+export declare const useCloseOnFullscreenExit: <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) => {} & P & (R extends HTMLOrSVGElement ? {
+    ref: React.Ref<R>;
+} : {});
 //# sourceMappingURL=useCloseOnFullscreenExit.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"useCloseOnFullscreenExit.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/useCloseOnFullscreenExit.ts"],"names":[],"mappings":"AAGA,OAAO,EAAC,UAAU,EAAC,MAAM,iBAAiB,CAAC;AAE3C;;;;GAIG;AACH,eAAO,MAAM,wBAAwB,UAAW,UAAU,uBA0BzD,CAAC"}
+{"version":3,"file":"useCloseOnFullscreenExit.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/useCloseOnFullscreenExit.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B;;;;GAIG;AACH,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;OA0BnC,CAAC"}

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

@@ -6,13 +6,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useCloseOnFullscreenExit = void 0;
 var react_1 = __importDefault(require("react"));
 var screenfull_1 = __importDefault(require("screenfull"));
+var common_1 = require("@workday/canvas-kit-react/common");
+var usePopupModel_1 = require("./usePopupModel");
 /**
  * Closes the popup when fullscreen is exited. Entering/exiting fullscreen changes the context of
  * the entire screen. This should be added to popup types that are very context sensitive like
  * Tooltips.
  */
-var useCloseOnFullscreenExit = function (model, elemProps) {
-    if (elemProps === void 0) { elemProps = {}; }
+exports.useCloseOnFullscreenExit = common_1.createElemPropsHook(usePopupModel_1.usePopupModel)(function (model) {
     var handler = react_1.default.useCallback(function (event) {
         if (!screenfull_1.default.isFullscreen) {
             model.events.hide({ event: event });
@@ -31,6 +32,5 @@ var useCloseOnFullscreenExit = function (model, elemProps) {
         }
         return;
     }, [handler, visible]);
-    return elemProps;
-};
-exports.useCloseOnFullscreenExit = useCloseOnFullscreenExit;
+    return {};
+});

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

@@ -1,4 +1,4 @@
-import { PopupModel } from './usePopupModel';
+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 PopupModel's `state.stackRef` element and its children _and_ the
@@ -9,5 +9,28 @@ import { PopupModel } from './usePopupModel';
  * dropdown menus, etc. Tooltips and hierarchical menus should use `useAlwaysCloseOnClickOutside`
  * instead.
  */
-export declare const useCloseOnOutsideClick: (model: PopupModel, elemProps?: {}) => {};
+export declare const useCloseOnOutsideClick: <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) => {} & P & (R extends HTMLOrSVGElement ? {
+    ref: React.Ref<R>;
+} : {});
 //# sourceMappingURL=useCloseOnOutsideClick.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"useCloseOnOutsideClick.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/useCloseOnOutsideClick.ts"],"names":[],"mappings":"AAGA,OAAO,EAAC,UAAU,EAAC,MAAM,iBAAiB,CAAC;AAE3C;;;;;;;;;GASG;AACH,eAAO,MAAM,sBAAsB,UAAW,UAAU,uBAsCvD,CAAC"}
+{"version":3,"file":"useCloseOnOutsideClick.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/useCloseOnOutsideClick.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B;;;;;;;;;GASG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;OAsCjC,CAAC"}

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

@@ -6,6 +6,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useCloseOnOutsideClick = 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 usePopupModel_1 = require("./usePopupModel");
 /**
  * Registers global listener for all clicks. It will only call the PopupModel's `hide` event if the
  * click happened outside the PopupModel's `state.stackRef` element and its children _and_ the
@@ -16,8 +18,7 @@ var canvas_kit_popup_stack_1 = require("@workday/canvas-kit-popup-stack");
  * dropdown menus, etc. Tooltips and hierarchical menus should use `useAlwaysCloseOnClickOutside`
  * instead.
  */
-var useCloseOnOutsideClick = function (model, elemProps) {
-    if (elemProps === void 0) { elemProps = {}; }
+exports.useCloseOnOutsideClick = common_1.createElemPropsHook(usePopupModel_1.usePopupModel)(function (model) {
     var onClick = react_1.default.useCallback(function (event) {
         if (!model.state.stackRef.current) {
             return;
@@ -46,6 +47,5 @@ var useCloseOnOutsideClick = function (model, elemProps) {
             document.removeEventListener('mousedown', onClick);
         };
     }, [model.state.stackRef, visible, onClick]);
-    return elemProps;
-};
-exports.useCloseOnOutsideClick = useCloseOnOutsideClick;
+    return {};
+});