@workday/canvas-kit-react 7.0.0-alpha.0-next.7 → 7.0.0-alpha.100-next.25

package/popup/lib/PopupPopper.tsx

@@ -1,16 +1,11 @@
 import * as React from 'react';
 
-import {createComponent, useModelContext} from '@workday/canvas-kit-react/common';
+import {createSubcomponent} from '@workday/canvas-kit-react/common';
 
-import {PopupModel, PopupModelContext, usePopupPopper} from './hooks';
+import {usePopupModel, usePopupPopper} from './hooks';
 import {Placement, PopperOptions, Popper} 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
@@ -25,12 +20,10 @@ export interface PopupPopperProps {
   children?: React.ReactNode;
 }
 
-export const PopupPopper = createComponent('div')({
+export const PopupPopper = createSubcomponent('div')({
   displayName: 'Popup.Popper',
-  Component: ({children, model, ...elemProps}: PopupPopperProps, ref) => {
-    const localModel = useModelContext(PopupModelContext, model);
-
-    const props = usePopupPopper(localModel, elemProps, ref);
-    return <Popper {...props}>{children}</Popper>;
-  },
+  modelHook: usePopupModel,
+  elemPropsHook: usePopupPopper,
+})<PopupPopperProps>(({children, ...elemProps}) => {
+  return <Popper {...elemProps}>{children}</Popper>;
 });

package/popup/lib/PopupTarget.tsx

@@ -1,27 +1,16 @@
 import * as React from 'react';
 
-import {createComponent, useModelContext} from '@workday/canvas-kit-react/common';
+import {createSubcomponent} from '@workday/canvas-kit-react/common';
 import {SecondaryButton} from '@workday/canvas-kit-react/button';
 
-import {PopupModel} from '@workday/canvas-kit-react/popup';
-import {usePopupTarget, PopupModelContext} from './hooks';
+import {usePopupTarget, usePopupModel} from './hooks';
 
-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 interface PopupTargetProps {}
 
-export const PopupTarget = createComponent(SecondaryButton)({
+export const PopupTarget = createSubcomponent(SecondaryButton)({
   displayName: 'Popup.Target',
-  Component: ({children, model, ...elemProps}: PopupTargetProps, ref, Element) => {
-    const localModel = useModelContext(PopupModelContext, model);
-
-    const props = usePopupTarget(localModel, elemProps, ref);
-
-    return <Element {...props}>{children}</Element>;
-  },
+  modelHook: usePopupModel,
+  elemPropsHook: usePopupTarget,
+})((elemProps, Element) => {
+  return <Element {...elemProps} />;
 });

package/popup/lib/hooks/index.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/popup/lib/hooks/useAlwaysCloseOnOutsideClick.ts

@@ -1,7 +1,9 @@
 import React from 'react';
 
 import {PopupStack} from '@workday/canvas-kit-popup-stack';
-import {PopupModel} from './usePopupModel';
+import {createElemPropsHook} from '@workday/canvas-kit-react/common';
+
+import {usePopupModel} from './usePopupModel';
 
 /**
  * Registers global listener for all clicks. It will only call the PopupModel's `hide` event if the
@@ -12,7 +14,7 @@ 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 const useAlwaysCloseOnOutsideClick = (model: PopupModel, elemProps = {}) => {
+export const useAlwaysCloseOnOutsideClick = createElemPropsHook(usePopupModel)(model => {
   const onClick = React.useCallback(
     (event: MouseEvent) => {
       if (!model.state.stackRef.current) {
@@ -44,5 +46,5 @@ export const useAlwaysCloseOnOutsideClick = (model: PopupModel, elemProps = {})
     };
   }, [model.state.stackRef, visible, onClick]);
 
-  return elemProps;
-};
+  return {};
+});

package/popup/lib/hooks/useAssistiveHideSiblings.ts

@@ -1,5 +1,7 @@
 import React from 'react';
-import {PopupModel} from './usePopupModel';
+import {createElemPropsHook} from '@workday/canvas-kit-react/common';
+
+import {usePopupModel} from './usePopupModel';
 
 /**
  * This hook will hide all sibling elements from assistive technology. Very useful for modal
@@ -12,7 +14,7 @@ import {PopupModel} from './usePopupModel';
  *
  * This should be used on popup elements that need to hide content (i.e. Modals).
  */
-export const useAssistiveHideSiblings = (model: PopupModel, elemProps = {}) => {
+export const useAssistiveHideSiblings = createElemPropsHook(usePopupModel)(model => {
   const visible = model.state.visibility !== 'hidden';
 
   React.useEffect(() => {
@@ -40,5 +42,5 @@ export const useAssistiveHideSiblings = (model: PopupModel, elemProps = {}) => {
     };
   }, [model.state.stackRef, visible]);
 
-  return elemProps;
-};
+  return {};
+});

package/popup/lib/hooks/useBringToTopOnClick.ts

@@ -1,7 +1,8 @@
 import React from 'react';
 import {PopupStack} from '@workday/canvas-kit-popup-stack';
+import {createElemPropsHook} from '@workday/canvas-kit-react/common';
 
-import {PopupModel} from './usePopupModel';
+import {usePopupModel} from './usePopupModel';
 
 /**
  * This hook will bring an element to the top of the stack when any element inside the provided
@@ -12,7 +13,7 @@ import {PopupModel} from './usePopupModel';
  *
  * This should be used on popup elements that are meant to persist (i.e. Windows).
  */
-export const useBringToTopOnClick = (model: PopupModel, elemProps = {}) => {
+export const useBringToTopOnClick = createElemPropsHook(usePopupModel)(model => {
   const timer = React.useRef(-1);
   const onClick = React.useCallback(
     (event: MouseEvent) => {
@@ -40,5 +41,5 @@ export const useBringToTopOnClick = (model: PopupModel, elemProps = {}) => {
     };
   }, [visible, onClick]);
 
-  return elemProps;
-};
+  return {};
+});

package/popup/lib/hooks/useCloseOnEscape.ts

@@ -1,8 +1,9 @@
 import React from 'react';
 
 import {PopupStack} from '@workday/canvas-kit-popup-stack';
+import {createElemPropsHook} from '@workday/canvas-kit-react/common';
 
-import {PopupModel} from './usePopupModel';
+import {usePopupModel} from './usePopupModel';
 
 /**
  * Registers global detection of the Escape key. It will only call the PopupModel's `hide` event if the
@@ -11,14 +12,14 @@ import {PopupModel} from './usePopupModel';
  * This should be used with popup elements that are dismissible like Tooltips, Modals, non-modal
  * dialogs, dropdown menus, etc.
  */
-export const useCloseOnEscape = (model: PopupModel, elemProps = {}) => {
+export const useCloseOnEscape = createElemPropsHook(usePopupModel)(model => {
   const onKeyDown = React.useCallback(
     (event: KeyboardEvent) => {
       if (
         (event.key === 'Esc' || event.key === 'Escape') &&
         PopupStack.isTopmost(model.state.stackRef.current!)
       ) {
-        model.events.hide({event});
+        model.events.hide(event);
       }
     },
     [model.state.stackRef, model.events]
@@ -37,5 +38,5 @@ export const useCloseOnEscape = (model: PopupModel, elemProps = {}) => {
     };
   }, [onKeyDown, visible]);
 
-  return elemProps;
-};
+  return {};
+});

package/popup/lib/hooks/useCloseOnFullscreenExit.ts

@@ -1,18 +1,20 @@
 import React from 'react';
 import screenfull from 'screenfull';
 
-import {PopupModel} from './usePopupModel';
+import {createElemPropsHook} from '@workday/canvas-kit-react/common';
+
+import {usePopupModel} from './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.
  */
-export const useCloseOnFullscreenExit = (model: PopupModel, elemProps = {}) => {
+export const useCloseOnFullscreenExit = createElemPropsHook(usePopupModel)(model => {
   const handler = React.useCallback(
     event => {
       if (!screenfull.isFullscreen) {
-        model.events.hide({event});
+        model.events.hide(event);
       }
     },
     [model.events]
@@ -33,5 +35,5 @@ export const useCloseOnFullscreenExit = (model: PopupModel, elemProps = {}) => {
     return;
   }, [handler, visible]);
 
-  return elemProps;
-};
+  return {};
+});

package/popup/lib/hooks/useCloseOnOutsideClick.ts

@@ -1,7 +1,9 @@
 import React from 'react';
 
 import {PopupStack} from '@workday/canvas-kit-popup-stack';
-import {PopupModel} from './usePopupModel';
+import {createElemPropsHook} from '@workday/canvas-kit-react/common';
+
+import {usePopupModel} from './usePopupModel';
 
 /**
  * Registers global listener for all clicks. It will only call the PopupModel's `hide` event if the
@@ -13,7 +15,7 @@ import {PopupModel} from './usePopupModel';
  * dropdown menus, etc. Tooltips and hierarchical menus should use `useAlwaysCloseOnClickOutside`
  * instead.
  */
-export const useCloseOnOutsideClick = (model: PopupModel, elemProps = {}) => {
+export const useCloseOnOutsideClick = createElemPropsHook(usePopupModel)(model => {
   const onClick = React.useCallback(
     (event: MouseEvent) => {
       if (!model.state.stackRef.current) {
@@ -30,7 +32,7 @@ export const useCloseOnOutsideClick = (model: PopupModel, elemProps = {}) => {
         // because the target is outside `ref.current`
         !PopupStack.contains(model.state.stackRef.current, event.target as HTMLElement)
       ) {
-        model.events.hide({event});
+        model.events.hide(event);
       }
     },
     [model.state.stackRef, model.events]
@@ -50,5 +52,5 @@ export const useCloseOnOutsideClick = (model: PopupModel, elemProps = {}) => {
     };
   }, [model.state.stackRef, visible, onClick]);
 
-  return elemProps;
-};
+  return {};
+});

package/popup/lib/hooks/useDisableBodyScroll.ts

@@ -1,6 +1,8 @@
 import React from 'react';
 
-import {PopupModel} from './usePopupModel';
+import {createElemPropsHook} from '@workday/canvas-kit-react/common';
+
+import {usePopupModel} from './usePopupModel';
 
 /**
  * Disables body scroll by adding `overflow: hidden` to the body element. This effectively prevents
@@ -9,20 +11,26 @@ import {PopupModel} from './usePopupModel';
  * This should be used with popup elements that hide all other content and force the user to accept
  * or dismiss the popup before continuing (i.e. Modals).
  */
-export const useDisableBodyScroll = (model: PopupModel, elemProps = {}) => {
+export const useDisableBodyScroll = createElemPropsHook(usePopupModel)(model => {
   const visible = model.state.visibility !== 'hidden';
 
   React.useLayoutEffect(() => {
     if (!visible) {
       return;
     }
+
+    const overflowY = document.body.style.overflowY;
+    const overflowX = document.body.style.overflowX;
     const overflow = document.body.style.overflow;
+
     document.body.style.overflow = 'hidden';
 
     return () => {
       document.body.style.overflow = overflow;
+      document.body.style.overflowY = overflowY;
+      document.body.style.overflowX = overflowX;
     };
   }, [visible]);
 
-  return elemProps;
-};
+  return {};
+});

package/popup/lib/hooks/useFocusRedirect.ts

@@ -1,7 +1,12 @@
 import React from 'react';
 
-import {PopupModel} from './usePopupModel';
-import {getFirstFocusableElement, getLastFocusableElement} from '@workday/canvas-kit-react/common';
+import {
+  createElemPropsHook,
+  getFirstFocusableElement,
+  getLastFocusableElement,
+} from '@workday/canvas-kit-react/common';
+
+import {usePopupModel} from './usePopupModel';
 
 /**
  * Manages focus around a popup, treating the popup as if it was part of the DOM where it appears.
@@ -15,7 +20,7 @@ import {getFirstFocusableElement, getLastFocusableElement} from '@workday/canvas
  *
  * This should be used with non-modal dialogs.
  */
-export const useFocusRedirect = (model: PopupModel, elemProps = {}) => {
+export const useFocusRedirect = createElemPropsHook(usePopupModel)(model => {
   const onKeyDown = React.useCallback(
     (event: KeyboardEvent): void => {
       if (model.state.stackRef.current && event.key === 'Tab') {
@@ -25,12 +30,12 @@ export const useFocusRedirect = (model: PopupModel, elemProps = {}) => {
         if (event.getModifierState('Shift') && document.activeElement === firstFocusableElement) {
           event.preventDefault();
 
-          model.events.hide({event});
+          model.events.hide(event);
         } else if (
           !event.getModifierState('Shift') &&
           document.activeElement === lastFocusableElement
         ) {
-          model.events.hide({event});
+          model.events.hide(event);
         }
       }
     },
@@ -50,5 +55,5 @@ export const useFocusRedirect = (model: PopupModel, elemProps = {}) => {
     };
   }, [visible, onKeyDown]);
 
-  return elemProps;
-};
+  return {};
+});

package/popup/lib/hooks/useFocusTrap.ts

@@ -1,7 +1,9 @@
 import React from 'react';
 import {tabTrappingKey} from './focus-trap-js';
 
-import {PopupModel} from './usePopupModel';
+import {createElemPropsHook} from '@workday/canvas-kit-react/common';
+
+import {usePopupModel} from './usePopupModel';
 
 /**
  * "Trap" or "loop" focus within a provided `stackRef` element. This is required for accessibility
@@ -12,7 +14,7 @@ import {PopupModel} from './usePopupModel';
  *
  * This should be used on popup elements that need to hide content (i.e. Modals).
  */
-export const useFocusTrap = (model: PopupModel, elemProps = {}) => {
+export const useFocusTrap = createElemPropsHook(usePopupModel)(model => {
   const onKeyDown = React.useCallback(
     (event: KeyboardEvent) => {
       if (model.state.stackRef.current) {
@@ -35,5 +37,5 @@ export const useFocusTrap = (model: PopupModel, elemProps = {}) => {
     };
   }, [visible, onKeyDown]);
 
-  return elemProps;
-};
+  return {};
+});

package/popup/lib/hooks/useInitialFocus.tsx

@@ -1,8 +1,13 @@
 import React from 'react';
 
-import {changeFocus, assert, getFirstFocusableElement} from '@workday/canvas-kit-react/common';
+import {
+  changeFocus,
+  assert,
+  getFirstFocusableElement,
+  createElemPropsHook,
+} from '@workday/canvas-kit-react/common';
 
-import {PopupModel} from './usePopupModel';
+import {usePopupModel} from './usePopupModel';
 
 /**
  * Moves focus within the popup when the popup becomes visible. This is useful for keyboard and
@@ -12,7 +17,7 @@ import {PopupModel} from './usePopupModel';
  * This should be used for popups that have focusable elements inside, like Modals, non-modal
  * dialogs, menus, etc.
  */
-export const useInitialFocus = (model: PopupModel, elemProps = {}) => {
+export const useInitialFocus = createElemPropsHook(usePopupModel)(model => {
   const visible = model.state.visibility !== 'hidden';
 
   // Using `useEffect` instead of `useLayoutEffect` so that focus doesn't change _before_ PopperJS
@@ -35,5 +40,5 @@ export const useInitialFocus = (model: PopupModel, elemProps = {}) => {
     }
   }, [model.state.initialFocusRef, model.state.stackRef, visible]);
 
-  return elemProps;
-};
+  return {};
+});

package/popup/lib/hooks/usePopupCard.ts

@@ -1,10 +1,11 @@
-import {createHook} from '@workday/canvas-kit-react/common';
-import {PopupModel} from './usePopupModel';
+import {createElemPropsHook} from '@workday/canvas-kit-react/common';
+
+import {usePopupModel} from './usePopupModel';
 
 /**
  * Adds the necessary props to a `Card` component. Used by the `Popup.Card` subcomponent.
  */
-export const usePopupCard = createHook(({state}: PopupModel) => {
+export const usePopupCard = createElemPropsHook(usePopupModel)(({state}) => {
   return {
     role: 'dialog',
     'aria-labelledby': state.id,

package/popup/lib/hooks/usePopupCloseButton.ts

@@ -1,14 +1,12 @@
-import {createHook} from '@workday/canvas-kit-react/common';
-import {PopupModel} from './usePopupModel';
+import {createElemPropsHook} from '@workday/canvas-kit-react/common';
+import {usePopupModel} from './usePopupModel';
 
 /**
  * Adds the necessary props to a close button component. Used by the `Popup.CloseButton`
  * subcomponent and `Popup.CloseIcon` subcomponent.
  */
-export const usePopupCloseButton = createHook(({events}: PopupModel) => {
+export const usePopupCloseButton = createElemPropsHook(usePopupModel)(({events}) => {
   return {
-    onClick: (event: React.MouseEvent) => {
-      events.hide({event});
-    },
+    onClick: events.hide,
   };
 });

package/popup/lib/hooks/usePopupHeading.ts

@@ -1,10 +1,10 @@
-import {createHook} from '@workday/canvas-kit-react/common';
-import {PopupModel} from './usePopupModel';
+import {createElemPropsHook} from '@workday/canvas-kit-react/common';
+import {usePopupModel} from './usePopupModel';
 
 /**
  * Adds the necessary props to the `Heading` component. Used by the `Popup.Heading` subcomponent.
  */
-export const usePopupHeading = createHook(({state}: PopupModel) => {
+export const usePopupHeading = createElemPropsHook(usePopupModel)(({state}) => {
   return {
     id: state.id,
   };

package/popup/lib/hooks/usePopupModel.ts

@@ -1,126 +1,81 @@
 import * as React from 'react';
-import {createEventMap, Model, ToModelConfig, useEventMap} from '@workday/canvas-kit-react/common';
+import {createModelHook} from '@workday/canvas-kit-react/common';
 
-import {
-  DisclosureEvents,
-  DisclosureState,
-  useDisclosureModel,
-  disclosureEventMap,
-  BaseDisclosureModelConfig,
-  DisclosureModelConfig,
-} from '@workday/canvas-kit-react/disclosure';
-import type {Placement} from '@workday/canvas-kit-react/popup';
+import {useDisclosureModel} from '@workday/canvas-kit-react/disclosure';
+import {Placement} from '@workday/canvas-kit-react/popup';
 
-export type PopupState = DisclosureState & {
-  /**
-   * 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>;
-  /**
-   * 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>;
-  /**
-   * The placement chosen by the positioning Popper. This should get set prior to showing the popup
-   * content.
-   * @default 'bottom'
-   */
-  placement: Placement;
-};
-
-export type PopupEvents = DisclosureEvents & {
-  /**
-   * 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;
-};
-
-export type PopupModel = Model<PopupState, PopupEvents>;
+// eslint-disable-next-line no-empty-function
+const noop = () => {};
 
-export const popupEventMap = createEventMap<PopupEvents>()({
-  guards: {
-    ...disclosureEventMap.guards,
+export const usePopupModel = createModelHook({
+  // create enough of a model to use `Popup.Card` without a `Popup` container component.
+  defaultContext: {state: {}, events: {show: noop, hide: noop}},
+  defaultConfig: {
+    ...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: {
-    ...disclosureEventMap.callbacks,
+    returnFocusRef: undefined as undefined | React.RefObject<any>,
     /**
-     * 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',
+    initialFocusRef: undefined as undefined | React.RefObject<any>,
   },
-});
-
-export 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 type PopupModelConfig = BasePopupModelConfig &
-  Partial<ToModelConfig<PopupState, PopupEvents, typeof popupEventMap>>;
-
-export const usePopupModel = (config: PopupModelConfig = {}): PopupModel => {
+  requiredConfig: useDisclosureModel.requiredConfig,
+})(config => {
   const stackRef = React.useRef<HTMLDivElement>(null);
   const targetRef = React.useRef<HTMLButtonElement>(null);
   const [placement, setPlacement] = React.useState<Placement>('bottom');
-  const disclosure = useDisclosureModel(config as DisclosureModelConfig);
+  const disclosure = useDisclosureModel(config);
 
   const state = {
     ...disclosure.state,
+    /**
+     * Reference of the stack item used in the PopupStack. This value will be used in all
+     * Popup-related behaviors.
+     */
     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,
+    /**
+     * 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,
   };
 
-  const events = useEventMap(popupEventMap, state, config, {
+  const events = {
     ...disclosure.events,
-    updatePlacement({placement}) {
-      setPlacement(placement);
+    /**
+     * Called whenever a popup placement changes around a target. This is useful for animations that
+     * depend on the placement chosen.
+     */
+    updatePlacement(data: {placement: Placement}) {
+      setPlacement(data.placement);
     },
-  });
+  };
 
   return {
     state,
     events,
   };
-};
-
-// eslint-disable-next-line no-empty-function
-const noop = () => {};
+});
 
 // create enough of a model to use `Popup.Card` without a `Popup` container component.
-export const PopupModelContext = React.createContext<PopupModel>({
-  state: {},
-  events: {show: noop, hide: noop},
-} as any);
+export const PopupModelContext = usePopupModel.Context;

package/popup/lib/hooks/usePopupPopper.ts

@@ -1,12 +1,12 @@
-import {createHook, useForkRef} from '@workday/canvas-kit-react/common';
-import {PopupModel} from './usePopupModel';
+import {createElemPropsHook, useForkRef} from '@workday/canvas-kit-react/common';
+import {usePopupModel} from './usePopupModel';
 import React from 'react';
 import {Placement} from '../Popper';
 
 /**
  * Hooks a Popper up to a PopupModel
  */
-export const usePopupPopper = createHook(({state, events}: PopupModel, ref) => {
+export const usePopupPopper = createElemPropsHook(usePopupModel)(({state, events}, ref) => {
   const elementRef = useForkRef(ref, state.stackRef);
   const onPlacementChange = React.useCallback(
     (placement: Placement) => {