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

package/pagination/lib/Pagination/PageButton.tsx

@@ -1,30 +1,57 @@
 import * as React from 'react';
-import {styled} from '@workday/canvas-kit-react/common';
-import canvas, {type} from '@workday/canvas-kit-react/tokens';
-import {IconButton, IconButtonProps} from '@workday/canvas-kit-react/button';
+import {EmotionCanvasTheme, styled, useTheme} from '@workday/canvas-kit-react/common';
+import {borderRadius, colors, space} from '@workday/canvas-kit-react/tokens';
+import {BaseButton} from '@workday/canvas-kit-react/button';
 
 import {PaginationModel} from './types';
 
-const toggledStyles = {
-  color: canvas.colors.frenchVanilla100,
-  fontWeight: 700,
-  pointerEvents: 'none',
-};
-
-const StyledPageButton = styled(IconButton)<{toggled?: boolean}>(
+const StyledPageButton = styled(BaseButton)<{toggled?: boolean}>(
   {
-    ...type.levels.subtext.large,
+    minWidth: space.l,
+    width: space.l,
+    borderRadius: borderRadius.circle,
+    height: space.l,
   },
   ({toggled}) => {
-    return toggled ? toggledStyles : {};
+    return {
+      fontWeight: toggled ? 700 : 'normal',
+    };
   }
 );
 
-export type PageButtonProps = IconButtonProps &
-  React.ButtonHTMLAttributes<HTMLButtonElement> & {
-    model: PaginationModel;
-    pageNumber: number;
+const getPaginationButtonColors = (toggled: boolean, theme: EmotionCanvasTheme) => {
+  const {
+    canvas: {
+      palette: {primary: themePrimary},
+    },
+  } = theme;
+  return {
+    default: {
+      background: toggled ? themePrimary.main : 'transparent',
+      label: toggled ? colors.frenchVanilla100 : colors.blackPepper400,
+    },
+    hover: {
+      background: toggled ? themePrimary.main : colors.soap300,
+      label: toggled ? colors.frenchVanilla100 : colors.blackPepper400,
+    },
+    active: {
+      background: toggled ? themePrimary.main : 'transparent',
+      label: toggled ? colors.frenchVanilla100 : colors.blackPepper400,
+    },
+    focus: {
+      background: toggled ? themePrimary.main : 'transparent',
+      label: toggled ? colors.frenchVanilla100 : colors.blackPepper400,
+    },
+    disabled: {
+      background: colors.licorice100,
+    },
   };
+};
+
+export type PageButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+  model: PaginationModel;
+  pageNumber: number;
+};
 
 export const PageButton = ({
   model,
@@ -34,6 +61,7 @@ export const PageButton = ({
   ...elemProps
 }: PageButtonProps) => {
   const isCurrentPage = pageNumber === model.state.currentPage;
+  const theme = useTheme();
 
   const handleClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
     onClick?.(e);
@@ -43,11 +71,10 @@ export const PageButton = ({
   return (
     <StyledPageButton
       aria-current={isCurrentPage ? 'page' : undefined}
+      colors={getPaginationButtonColors(isCurrentPage, theme)}
       aria-pressed={undefined}
       onClick={handleClick}
-      size="small"
       toggled={isCurrentPage}
-      variant="square"
       {...elemProps}
     >
       {children || pageNumber}

package/pagination/lib/Pagination/PageList.tsx

@@ -1,25 +1,27 @@
-/** @jsx jsx */
 import * as React from 'react';
-import {jsx, css} from '@emotion/core';
 
 import {PaginationModel} from './types';
-import {List, ListItem, ListItemProps, ListProps} from './common/List';
-import {useStack} from './common/Stack';
-import {useRTL} from './common/utils/useRTL';
+import {ListItem, ListItemProps} from './common/List';
+import {HStack, HStackProps} from '@workday/canvas-kit-react/layout';
 
-export interface PageListProps extends Omit<ListProps, 'as'> {
+export interface PageListProps extends Omit<HStackProps, 'as' | 'spacing'> {
   model: PaginationModel;
   children?: (model: PaginationModel) => React.ReactNode[] | React.ReactNode;
 }
 
 export const PageList = ({model, children, ...elemProps}: PageListProps) => {
-  const {shouldUseRTL} = useRTL();
-  const stackStyles = useStack({direction: 'row', spacing: 'xxxs', shouldUseRTL});
-
   return (
-    <List as="ol" role="list" css={css(stackStyles)} {...elemProps}>
+    <HStack
+      margin="zero"
+      as="ol"
+      role="list"
+      paddingLeft="zero"
+      paddingRight="zero"
+      spacing="xxxs"
+      {...elemProps}
+    >
       {typeof children === 'function' ? children(model) : children}
-    </List>
+    </HStack>
   );
 };
 

package/pagination/lib/Pagination/Pagination.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {IconButtonProps} from '@workday/canvas-kit-react/button';
+import {TertiaryButtonProps} from '@workday/canvas-kit-react/button';
 
 import {PaginationModel} from './types';
 import {usePaginationModel, UsePaginationModelConfig} from './usePaginationModel';
@@ -78,7 +78,7 @@ Pagination.Controls = (props: ControlsProps) => {
 };
 
 Pagination.JumpToFirstButton = (
-  props: IconButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>
+  props: TertiaryButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>
 ) => {
   // The linter doesn't recognize the dot syntax, so we're disabling the rule
   // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -87,7 +87,7 @@ Pagination.JumpToFirstButton = (
 };
 
 Pagination.StepToPreviousButton = (
-  props: IconButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>
+  props: TertiaryButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>
 ) => {
   // The linter doesn't recognize the dot syntax, so we're disabling the rule
   // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -96,7 +96,7 @@ Pagination.StepToPreviousButton = (
 };
 
 Pagination.StepToNextButton = (
-  props: IconButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>
+  props: TertiaryButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>
 ) => {
   // The linter doesn't recognize the dot syntax, so we're disabling the rule
   // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -105,7 +105,7 @@ Pagination.StepToNextButton = (
 };
 
 Pagination.JumpToLastButton = (
-  props: IconButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>
+  props: TertiaryButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>
 ) => {
   // The linter doesn't recognize the dot syntax, so we're disabling the rule
   // eslint-disable-next-line react-hooks/rules-of-hooks

package/pagination/lib/Pagination/common/List.tsx

@@ -1,39 +1,41 @@
-/** @jsx jsx */
 import * as React from 'react';
-import {jsx, css} from '@emotion/core';
 
-import {Flex, FlexProps} from './Flex';
+import {Flex, FlexProps} from '@workday/canvas-kit-react/layout';
+import {StyledType, styled, createComponent} from '@workday/canvas-kit-react/common';
 
-export interface ListProps extends FlexProps, React.OlHTMLAttributes<HTMLElement> {
-  as: 'ol' | 'ul';
-}
+export interface ListProps extends FlexProps {}
 
-const listStyles = css({
+const StyledList = styled(Flex.as('ul'))<StyledType & FlexProps>({
   listStyle: 'none',
 });
 
-export const List = React.forwardRef<HTMLOListElement | HTMLUListElement, ListProps>(
-  ({as, children, ...elemProps}, ref) => {
+export const List = createComponent('ul')({
+  displayName: 'List',
+  Component: ({children, ...elemProps}: ListProps, ref, Element) => {
     return (
-      <Flex as={as} m="zero" p="zero" css={listStyles} ref={ref} {...elemProps}>
+      <StyledList
+        as={Element}
+        marginY="zero"
+        marginX="zero"
+        padding="zero"
+        ref={ref}
+        {...elemProps}
+      >
         {children}
-      </Flex>
+      </StyledList>
     );
-  }
-);
-
-List.displayName = 'List';
+  },
+});
 
-export type ListItemProps = Omit<FlexProps, 'as'>;
+export interface ListItemProps extends FlexProps {}
 
-export const ListItem = React.forwardRef<HTMLLIElement, ListItemProps>(
-  ({children, ...elemProps}, ref) => {
+export const ListItem = createComponent('li')({
+  displayName: 'ListItem',
+  Component: ({children, ...elemProps}: ListItemProps, ref, Element) => {
     return (
-      <Flex as="li" ref={ref} {...elemProps}>
+      <Flex as={Element} ref={ref} {...elemProps}>
         {children}
       </Flex>
     );
-  }
-);
-
-ListItem.displayName = 'ListItem';
+  },
+});

package/popup/lib/Popper.tsx

@@ -22,14 +22,6 @@ export interface PopperProps {
    * `anchorElement`.
    */
   children: ((props: {placement: Placement}) => React.ReactNode) | React.ReactNode;
-  /**
-   * The element that contains the portal children when `portal` is true. It is best to not define
-   * this unless you know what you're doing. Popper works with a PopupStack and in order for
-   * z-indexes to work correctly, all Popups on your page should live on the same root element
-   * otherwise you risk running into rendering issues:
-   * https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
-   */
-  containerElement?: Element | null;
   /**
    * When provided, this optional callback will be used to determine positioning for the Popper element
    * instead of calling `getBoundingClientRect` on the `anchorElement` prop. Use this when you need
@@ -62,7 +54,7 @@ export interface PopperProps {
    */
   popperOptions?: Partial<PopperOptions>;
   /**
-   * If true, attach the Popper to the `containerElement`. If false, render the Popper within the
+   * If false, render the Popper within the
    * DOM hierarchy of its parent. A non-portal Popper will constrained by the parent container
    * overflows. If you set this to `false`, you may experience issues where you content gets cut off
    * by scrollbars or `overflow: hidden`
@@ -113,7 +105,6 @@ const OpenPopper = React.forwardRef<HTMLDivElement, PopperProps>(
       onPlacementChange,
       children,
       portal,
-      containerElement,
       popperInstanceRef,
     }: PopperProps,
     ref
@@ -185,7 +176,7 @@ const OpenPopper = React.forwardRef<HTMLDivElement, PopperProps>(
       return contents;
     }
 
-    return ReactDOM.createPortal(contents, containerElement || stackRef.current!);
+    return ReactDOM.createPortal(contents, stackRef.current!);
   }
 );
 

package/popup/lib/Popup.tsx

@@ -1,40 +1,35 @@
 import * as React from 'react';
 
-import {Card} from '@workday/canvas-kit-react/card';
-import {createComponent, useDefaultModel} from '@workday/canvas-kit-react/common';
+import {createContainer} from '@workday/canvas-kit-react/common';
 
-import {PopupModel, usePopupModel, PopupModelContext} from './hooks';
+import {usePopupModel} from './hooks';
 import {PopupCard} from './PopupCard';
 import {PopupTarget} from './PopupTarget';
 import {PopupPopper} from './PopupPopper';
 import {PopupHeading} from './PopupHeading';
 import {PopupCloseIcon} from './PopupCloseIcon';
 import {PopupCloseButton} from './PopupCloseButton';
+import {PopupBody} from './PopupBody';
 
 export interface PopupProps {
   /**
    * The contents of the Popup. Can be `Popup` children or any valid elements.
    */
   children: React.ReactNode;
-  /**
-   * A PopupModel with optional behavior hooks applied.
-   */
-  model: PopupModel;
 }
 
-export const Popup = createComponent()({
+export const Popup = createContainer()({
   displayName: 'Popup',
-  Component: ({children, model, ...config}: PopupProps) => {
-    const value = useDefaultModel(model, config, usePopupModel);
-    return <PopupModelContext.Provider value={value}>{children}</PopupModelContext.Provider>;
-  },
+  modelHook: usePopupModel,
   subComponents: {
     Heading: PopupHeading,
-    Body: Card.Body,
+    Body: PopupBody,
     Card: PopupCard,
     CloseIcon: PopupCloseIcon,
     Target: PopupTarget,
     Popper: PopupPopper,
     CloseButton: PopupCloseButton,
   },
+})<PopupProps>(({children}: PopupProps) => {
+  return <>{children}</>;
 });

package/popup/lib/PopupBody.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+
+import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
+import {Card} from '@workday/canvas-kit-react/card';
+import {usePopupModel} from './hooks';
+
+export const PopupBody = createSubcomponent('div')({
+  displayName: 'Popup.Body',
+  modelHook: usePopupModel,
+})<ExtractProps<typeof Card.Body>>(elemProps => {
+  return <Card.Body overflowY="auto" {...elemProps} />;
+});

package/popup/lib/PopupCard.tsx

@@ -1,27 +1,23 @@
 import * as React from 'react';
-import {keyframes} from '@emotion/core';
+import {keyframes} from '@emotion/react';
 
 import {Card} from '@workday/canvas-kit-react/card';
-import {space, type} from '@workday/canvas-kit-react/tokens';
+import {space, type, CanvasSpaceKeys} from '@workday/canvas-kit-react/tokens';
 import {
   styled,
   TransformOrigin,
   getTranslateFromOrigin,
-  createComponent,
   StyledType,
-  useModelContext,
   ExtractProps,
+  useConstant,
+  createSubcomponent,
 } from '@workday/canvas-kit-react/common';
+import {Stack, StackStyleProps} from '@workday/canvas-kit-react/layout';
 
 import {getTransformFromPlacement} from './getTransformFromPlacement';
-import {usePopupCard, PopupModel, PopupModelContext} from './hooks';
+import {usePopupCard, usePopupModel} from './hooks';
 
-export interface PopupCardProps extends ExtractProps<typeof Card, 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 PopupCardProps extends ExtractProps<typeof Card, never>, Partial<StackStyleProps> {
   children?: React.ReactNode;
 }
 
@@ -58,27 +54,36 @@ const StyledPopupCard = styled(Card)<
   };
 });
 
-export const PopupCard = createComponent('div')({
+export const PopupCard = createSubcomponent('div')({
   displayName: 'Popup.Card',
-  Component: ({children, model, ...elemProps}: PopupCardProps, ref, Element) => {
-    const localModel = useModelContext(PopupModelContext, model);
-    const props = usePopupCard(localModel, elemProps, ref);
-    const transformOrigin = React.useMemo(() => {
-      return getTransformFromPlacement(localModel.state.placement || 'bottom');
-    }, [localModel.state.placement]);
+  modelHook: usePopupModel,
+  elemPropsHook: usePopupCard,
+})<PopupCardProps>(({children, ...elemProps}, Element, model) => {
+  const transformOrigin = React.useMemo(() => {
+    return getTransformFromPlacement(model.state.placement || 'bottom');
+  }, [model.state.placement]);
 
-    return (
-      <StyledPopupCard
-        as={Element}
-        transformOrigin={transformOrigin}
-        position="relative"
-        padding="l"
-        depth={2}
-        maxWidth={`calc(100vw - ${space.l})`}
-        {...props}
-      >
-        {children}
-      </StyledPopupCard>
-    );
-  },
+  // As is a Stack that will render an element of `Element`
+  const As = useConstant(() => Stack.as(Element));
+
+  return (
+    <StyledPopupCard
+      as={As}
+      transformOrigin={transformOrigin}
+      position="relative"
+      padding="l"
+      depth={5}
+      maxWidth={`calc(100vw - ${space.l})`}
+      spacing={0}
+      flexDirection="column"
+      minHeight={0}
+      maxHeight={`calc(100vh - ${
+        elemProps.margin ? space[elemProps.margin as CanvasSpaceKeys] || elemProps.margin : space.xl
+      } * 2)`}
+      overflowY="auto" // force IE11 to limit the flex size of the card. Without this, the body isn't allowed to overflow properly: https://github.com/philipwalton/flexbugs/issues/216#issuecomment-453053557
+      {...elemProps}
+    >
+      {children}
+    </StyledPopupCard>
+  );
 });

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';