@workday/canvas-kit-react 6.8.9 → 6.9.0-next.2

package/popup/lib/PopupCloseButton.tsx

@@ -1,25 +1,18 @@
 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 {usePopupCloseButton, PopupModel, PopupModelContext} from './hooks';
+import {usePopupCloseButton, usePopupModel} from './hooks';
 
 export interface PopupCloseButtonProps {
-  /**
-   * 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 const PopupCloseButton = createComponent(SecondaryButton)({
+export const PopupCloseButton = createSubcomponent(SecondaryButton)({
   displayName: 'Popup.CloseButton',
-  Component: ({children, model, ...elemProps}: PopupCloseButtonProps, ref, Element) => {
-    const localModel = useModelContext(PopupModelContext, model);
-
-    const props = usePopupCloseButton(localModel, elemProps, ref);
-    return <Element {...props}>{children}</Element>;
-  },
+  modelHook: usePopupModel,
+  elemPropsHook: usePopupCloseButton,
+})<PopupCloseButtonProps>(({children, ...elemProps}: PopupCloseButtonProps, Element) => {
+  return <Element {...elemProps}>{children}</Element>;
 });

package/popup/lib/PopupCloseIcon.tsx

@@ -3,45 +3,28 @@ import React from 'react';
 import {xIcon} from '@workday/canvas-system-icons-web';
 import {
   styled,
-  createComponent,
+  createSubcomponent,
   StyledType,
-  useModelContext,
   ExtractProps,
 } from '@workday/canvas-kit-react/common';
-import {IconButton} from '@workday/canvas-kit-react/button';
+import {TertiaryButton} from '@workday/canvas-kit-react/button';
 
-import {usePopupCloseButton, PopupModel, PopupModelContext} from './hooks';
+import {usePopupCloseButton, usePopupModel} from './hooks';
 
-const closeIconSpacing = 11;
-const closeIconSpacingSmall = 9;
+const closeIconSpacing = 4;
 
-export interface PopupCloseIconProps extends ExtractProps<typeof IconButton, never> {
-  /**
-   * 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;
-}
+export interface PopupCloseIconProps extends ExtractProps<typeof TertiaryButton, never> {}
 
-const StyledCloseIcon = styled(IconButton)<StyledType & PopupCloseIconProps>(
-  {
-    position: 'absolute',
-  },
-  ({size}) => ({
-    right: size === 'small' ? closeIconSpacingSmall : closeIconSpacing,
-    top: size === 'small' ? closeIconSpacingSmall : closeIconSpacing,
-  })
-);
+const StyledCloseIcon = styled(TertiaryButton)<StyledType & PopupCloseIconProps>({
+  position: 'absolute',
+  right: closeIconSpacing,
+  top: closeIconSpacing,
+});
 
-export const PopupCloseIcon = createComponent('button')({
+export const PopupCloseIcon = createSubcomponent('button')({
   displayName: 'Popup.CloseIcon',
-  Component: (
-    {size = 'medium', children, model, ...elemProps}: PopupCloseIconProps,
-    ref,
-    Element
-  ) => {
-    const localModel = useModelContext(PopupModelContext, model);
-    const props = usePopupCloseButton(localModel, elemProps, ref);
-    return <StyledCloseIcon as={Element} variant="plain" size={size} icon={xIcon} {...props} />;
-  },
+  modelHook: usePopupModel,
+  elemPropsHook: usePopupCloseButton,
+})<PopupCloseIconProps>(({children, ...elemProps}, Element) => {
+  return <StyledCloseIcon as={Element} size="medium" icon={xIcon} {...elemProps} />;
 });

package/popup/lib/PopupHeading.tsx

@@ -1,29 +1,22 @@
 import * as React from 'react';
 
-import {createComponent, useModelContext} from '@workday/canvas-kit-react/common';
+import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
 import {Card} from '@workday/canvas-kit-react/card';
 
-import {usePopupHeading, PopupModel, PopupModelContext} from './hooks';
+import {usePopupHeading, usePopupModel} from './hooks';
 
-export interface PopupHeadingProps {
-  /**
-   * 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;
+export interface PopupHeadingProps extends ExtractProps<typeof Card.Heading, never> {
   children?: React.ReactNode;
 }
 
-export const PopupHeading = createComponent('h2')({
+export const PopupHeading = createSubcomponent('h2')({
   displayName: 'Popup.Heading',
-  Component: ({children, model, ...elemProps}: PopupHeadingProps, ref, Element) => {
-    const localModel = useModelContext(PopupModelContext, model);
-
-    const props = usePopupHeading(localModel, elemProps, ref);
-    return (
-      <Card.Heading as={Element} {...props}>
-        {children}
-      </Card.Heading>
-    );
-  },
+  modelHook: usePopupModel,
+  elemPropsHook: usePopupHeading,
+})<PopupHeadingProps>(({children, ...elemProps}, Element) => {
+  return (
+    <Card.Heading as={Element} marginBottom="s" {...elemProps}>
+      {children}
+    </Card.Heading>
+  );
 });

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,7 +11,7 @@ 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(() => {
@@ -32,5 +34,5 @@ export const useDisableBodyScroll = (model: PopupModel, elemProps = {}) => {
     };
   }, [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,
   };