@workday/canvas-kit-react 7.0.0-alpha.0-next.1 → 7.0.0-alpha.0-next.6

package/dist/es6/tooltip/lib/useTooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTooltip.d.ts","sourceRoot":"","sources":["../../../../tooltip/lib/useTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAkD/B;;;GAGG;AACH,wBAAgB,UAAU,CAAC,CAAC,SAAS,OAAO,GAAG,OAAO,EAAE,EACtD,IAAc,EACd,SAAc,EACd,SAAe,EACf,SAAe,GAChB,GAAE;IACD;;;;;;;;;;;;;;;OAeG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,OAAO,CAAC;IACtC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACf;IA6CF,2EAA2E;;;;;;;;;;IAY3E,uDAAuD;;;;;;IAMvD,iEAAiE;;;;;;;EAQpE"}
+{"version":3,"file":"useTooltip.d.ts","sourceRoot":"","sources":["../../../../tooltip/lib/useTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAkD/B;;;GAGG;AACH,wBAAgB,UAAU,CAAC,CAAC,SAAS,OAAO,GAAG,OAAO,EAAE,EACtD,IAAc,EACd,SAAc,EACd,SAAe,EACf,SAAe,GAChB,GAAE;IACD;;;;;;;;;;;;;;;OAeG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,OAAO,CAAC;IACtC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACf;IA6CF,2EAA2E;;;;8BA3B5C,MAAM,cAAc;;6BAazB,gBAAgB;yBARpB,gBAAgB;;;IAkCtC,uDAAuD;;;;;;IAMvD,iEAAiE;;;;;;;EAQpE"}

package/icon/lib/AccentIcon.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import {colors} from '@workday/canvas-kit-react/tokens';
 import {CanvasAccentIcon, CanvasIconTypes} from '@workday/design-assets-types';
-import {CSSObject} from '@emotion/core';
+import {CSSObject} from '@emotion/styled';
 import Icon, {IconProps} from './Icon';
 
 export interface AccentIconStyles {

package/icon/lib/AppletIcon.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import {colors, BrandingColor, CanvasColor} from '@workday/canvas-kit-react/tokens';
 import {CanvasAppletIcon, CanvasIconTypes} from '@workday/design-assets-types';
-import {CSSObject} from '@emotion/core';
+import {CSSObject} from '@emotion/styled';
 import Icon, {IconProps} from './Icon';
 
 export interface AppletIconStyles {

package/icon/lib/Graphic.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import {CanvasGraphic, CanvasIconTypes} from '@workday/design-assets-types';
-import {CSSObject} from '@emotion/core';
+import {CSSObject} from '@emotion/styled';
 import Svg, {SvgProps} from './Svg';
 
 export interface GraphicStyles {

package/icon/lib/Icon.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {CSSObject} from '@emotion/core';
+import {CSSObject} from '@emotion/styled';
 import {CanvasIcon, CanvasIconTypes} from '@workday/design-assets-types';
 import Svg, {SvgProps} from './Svg';
 

package/icon/lib/Svg.tsx

@@ -1,8 +1,8 @@
-/** @jsx jsx */
-import {CSSObject, jsx, ClassNames} from '@emotion/core';
+import {CSSObject} from '@emotion/styled';
 import * as React from 'react';
 import {CanvasIcon, CanvasIconTypes} from '@workday/design-assets-types';
 import {validateIconType} from './utils';
+import {styled} from '@workday/canvas-kit-react/common';
 
 export interface SvgProps extends React.HTMLAttributes<HTMLSpanElement> {
   src: CanvasIcon;
@@ -16,9 +16,20 @@ export interface SvgProps extends React.HTMLAttributes<HTMLSpanElement> {
   shouldMirror?: boolean;
 }
 
+const StyledIconSpan = styled('span')<Pick<SvgProps, 'shouldMirror' | 'styles'>>(
+  {
+    display: 'inline-block',
+    '> svg': {display: 'block'},
+  },
+  ({shouldMirror, styles}) => ({
+    transform: shouldMirror ? 'scaleX(-1)' : undefined,
+    ...styles,
+  })
+);
+
 export default class Svg extends React.Component<SvgProps> {
   public render() {
-    const {src, styles, type, iconRef, shouldMirror, ...elemProps} = this.props;
+    const {src, type, iconRef, ...elemProps} = this.props;
 
     // Validation for JS
     try {
@@ -29,25 +40,7 @@ export default class Svg extends React.Component<SvgProps> {
     }
 
     return (
-      <ClassNames>
-        {({css, cx}) => (
-          <span
-            {...elemProps}
-            dangerouslySetInnerHTML={{__html: src.svg}}
-            // Need to combine iconStyle with the className prop, otherwise we'll clobber it
-            // (we'll need to do something like this for each HTML <span> prop we explicitly set in this component)
-            className={cx(
-              css(styles, {
-                display: 'inline-block',
-                '& svg': {display: 'block'},
-                transform: shouldMirror ? 'scaleX(-1)' : undefined,
-              }),
-              elemProps.className
-            )}
-            ref={iconRef}
-          />
-        )}
-      </ClassNames>
+      <StyledIconSpan {...elemProps} dangerouslySetInnerHTML={{__html: src.svg}} ref={iconRef} />
     );
   }
 }

package/icon/lib/SystemIcon.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import {iconColors} from '@workday/canvas-kit-react/tokens';
 import {CanvasSystemIcon, CanvasIconTypes} from '@workday/design-assets-types';
-import {CSSObject} from '@emotion/core';
+import {CSSObject} from '@emotion/styled';
 import Icon, {IconProps} from './Icon';
 
 export interface SystemIconStyles {

package/index.ts

@@ -7,7 +7,6 @@ export * from './card';
 export * from './checkbox';
 export * from './color-picker';
 export * from './common';
-export * from './cookie-banner';
 export * from './dialog';
 export * from './disclosure';
 export * from './form-field';
@@ -15,7 +14,6 @@ export * from './icon';
 export * from './layout';
 export * from './loading-animation';
 export * from './modal';
-export * from './page-header';
 export * from './pagination';
 export * from './popup';
 export * from './radio';

package/loading-animation/lib/LoadingDots.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {keyframes} from '@emotion/core';
+import {keyframes} from '@emotion/react';
 import canvas, {borderRadius} from '@workday/canvas-kit-react/tokens';
 import {styled} from '@workday/canvas-kit-react/common';
 

package/modal/lib/Modal.tsx

@@ -6,6 +6,7 @@ import {ModalOverlay} from './ModalOverlay';
 import {ModalCard} from './ModalCard';
 import {useModalModel} from './hooks';
 import {ModalHeading} from './ModalHeading';
+import {ModalOverflowOverlay} from './ModalOverflowOverlay';
 
 export interface ModalProps extends ExtractProps<typeof Dialog, never> {
   /** The contents of the Modal. Can be `Modal` subcomponents or any valid elements. */
@@ -27,6 +28,7 @@ export const Modal = createComponent()({
     Target: Popup.Target,
     Heading: ModalHeading,
     Overlay: ModalOverlay,
+    OverflowOverlay: ModalOverflowOverlay,
     CloseButton: Popup.CloseButton,
   },
 });

package/modal/lib/ModalCard.tsx

@@ -14,7 +14,7 @@ export const ModalCard = createComponent('div')({
 
     const props = useModalCard(localModel, elemProps, ref);
     return (
-      <Popup.Card as={Element} width={440} borderWidth={0} {...props}>
+      <Popup.Card as={Element} width={440} borderWidth={0} margin="xl" {...props}>
         {children}
       </Popup.Card>
     );

package/modal/lib/ModalOverflowOverlay.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+
+import {createComponent, ExtractProps, StyledType} from '@workday/canvas-kit-react/common';
+
+import {ModalOverlay} from './ModalOverlay';
+import styled from '@emotion/styled';
+
+const StyledOverlay = styled(ModalOverlay)<StyledType>({
+  '& > div': {maxHeight: 'inherit'}, // reset maxHeight of centering div
+});
+
+export const ModalOverflowOverlay = createComponent('div')({
+  displayName: 'Modal.OverflowOverlay',
+  Component: (
+    {children, model, ...elemProps}: ExtractProps<typeof ModalOverlay, never>,
+    ref,
+    Element
+  ) => {
+    return (
+      <StyledOverlay as={Element} ref={ref} overflow="auto" {...elemProps}>
+        {children}
+      </StyledOverlay>
+    );
+  },
+});

package/modal/lib/ModalOverlay.tsx

@@ -10,10 +10,11 @@ import {
   useForkRef,
 } from '@workday/canvas-kit-react/common';
 import {PopupModel, PopupModelContext, usePopupStack} from '@workday/canvas-kit-react/popup';
-import {keyframes} from '@emotion/core';
+import {keyframes} from '@emotion/react';
 import styled from '@emotion/styled';
+import {Box, BoxProps} from '@workday/canvas-kit-labs-react/common';
 
-export interface ModalOverlayProps {
+export interface ModalOverlayProps extends BoxProps {
   model?: PopupModel;
   children: React.ReactNode;
 }
@@ -27,7 +28,7 @@ const fadeIn = keyframes`
   }
 `;
 
-const Container = styled('div')<StyledType>({
+const Container = styled(Box)<StyledType>({
   position: 'fixed',
   top: 0,
   left: 0,
@@ -47,13 +48,20 @@ const Container = styled('div')<StyledType>({
 // the Modal. The centering container forces a "center" pixel calculation by making sure the width
 // is always an even number
 const CenteringContainer = styled('div')({
-  height: '100vh',
+  maxHeight: '100vh',
   display: 'flex',
   position: 'absolute',
   left: 0,
   top: 0,
   alignItems: 'center',
   justifyContent: 'center',
+
+  // IE11 fix for setting min-height in a flex container
+  ':before': {
+    display: 'block',
+    content: "''",
+    height: '100vh',
+  },
 });
 
 export const ModalOverlay = createComponent('div')({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "7.0.0-alpha.0-next.1+57471fa0",
+  "version": "7.0.0-alpha.0-next.6+54a4c8c1",
   "description": "The parent module that contains all Workday Canvas Kit React components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -52,19 +52,18 @@
     "react": "^16.8 || ^17.0"
   },
   "dependencies": {
-    "@emotion/core": "^10.0.28",
-    "@emotion/is-prop-valid": "^0.8.2",
-    "@emotion/styled": "^10.0.27",
+    "@emotion/is-prop-valid": "^1.1.1",
+    "@emotion/react": "^11.7.1",
+    "@emotion/styled": "^11.6.0",
     "@popperjs/core": "^2.5.4",
     "@workday/canvas-colors-web": "^2.0.0",
-    "@workday/canvas-kit-labs-react": "^7.0.0-alpha.0-next.1+57471fa0",
-    "@workday/canvas-kit-popup-stack": "^7.0.0-alpha.0-next.1+57471fa0",
-    "@workday/canvas-kit-preview-react": "^7.0.0-alpha.0-next.1+57471fa0",
+    "@workday/canvas-kit-labs-react": "^7.0.0-alpha.0-next.6+54a4c8c1",
+    "@workday/canvas-kit-popup-stack": "^7.0.0-alpha.0-next.6+54a4c8c1",
+    "@workday/canvas-kit-preview-react": "^7.0.0-alpha.0-next.6+54a4c8c1",
     "@workday/canvas-system-icons-web": "1.0.41",
     "@workday/design-assets-types": "^0.2.4",
     "chroma-js": "^2.1.0",
     "element-closest": "^3.0.2",
-    "emotion-theming": "^10.0.10",
     "lodash": "^4.17.14",
     "polished": "^4.1.3",
     "react-innertext": "^1.1.5",
@@ -77,5 +76,5 @@
     "@workday/canvas-accent-icons-web": "^1.0.0",
     "@workday/canvas-applet-icons-web": "^0.17.50"
   },
-  "gitHead": "57471fa0c73534126f9ef9a18203d49c5834d21e"
+  "gitHead": "54a4c8c15a1863d7560dc5a1397028c0e6d72236"
 }

package/pagination/lib/Pagination/AdditionalDetails.tsx

@@ -1,11 +1,9 @@
-/** @jsx jsx */
 import * as React from 'react';
-import {jsx, css} from '@emotion/core';
-import {type, typeColors} from '@workday/canvas-kit-react/tokens';
-import {accessibleHide} from '@workday/canvas-kit-react/common';
+import {type, typeColors, space} from '@workday/canvas-kit-react/tokens';
+import {accessibleHide, styled, StyledType} from '@workday/canvas-kit-react/common';
 
 import {PaginationModel} from './types';
-import {Flex, FlexProps} from './common/Flex';
+import {Flex, FlexProps} from '@workday/canvas-kit-labs-react/layout';
 import {useLiveRegion} from './common/useLiveRegion';
 
 export interface AdditionalDetailsProps extends FlexProps {
@@ -15,30 +13,38 @@ export interface AdditionalDetailsProps extends FlexProps {
   shouldHideDetails?: boolean;
 }
 
-// Ideally, these styles would be applied directly to a Text component
-const textStyles = css({
-  ...type.levels.subtext.medium,
-  color: typeColors.hint,
+const StyledAdditionalDetails = styled(Flex)<
+  StyledType & Pick<AdditionalDetailsProps, 'shouldHideDetails'>
+>(({shouldHideDetails}) => {
+  const styles = {
+    ...type.levels.subtext.medium,
+    color: typeColors.hint,
+  };
+  if (shouldHideDetails) {
+    return {
+      ...styles,
+      ...accessibleHide,
+      marginTop: space.zero,
+    };
+  } else {
+    return {
+      ...styles,
+      marginTop: space.xs,
+    };
+  }
 });
 
 export const AdditionalDetails = ({
   model,
   children,
   shouldAnnounceToScreenReader,
-  shouldHideDetails = false,
   ...elemProps
 }: AdditionalDetailsProps) => {
   const liveRegionProps = useLiveRegion({shouldAnnounceToScreenReader});
-  const detailStyles = css([textStyles, shouldHideDetails ? accessibleHide : null]);
 
   return (
-    <Flex
-      mt={shouldHideDetails ? 'zero' : 'xs'}
-      css={detailStyles}
-      {...liveRegionProps}
-      {...elemProps}
-    >
+    <StyledAdditionalDetails {...liveRegionProps} {...elemProps}>
       {typeof children === 'function' ? children(model) : children}
-    </Flex>
+    </StyledAdditionalDetails>
   );
 };

package/pagination/lib/Pagination/Controls.tsx

@@ -8,7 +8,7 @@ import {
 } from '@workday/canvas-system-icons-web';
 
 import {PaginationModel} from './types';
-import {HStack} from './common/Stack';
+import {HStack} from '@workday/canvas-kit-labs-react/layout';
 import {useRTL} from './common/utils/useRTL';
 
 export type ControlButtonProps = IconButtonProps &

package/pagination/lib/Pagination/GoTo/Form.tsx

@@ -1,11 +1,10 @@
 import * as React from 'react';
-import {HStack, HStackProps} from '../common/Stack';
-import {Spacing} from '../common/utils/space';
+import {HStack, HStackProps, StackSpacing} from '@workday/canvas-kit-labs-react/layout';
 import {useRTL} from '../common/utils/useRTL';
 
 export type GoToFormProps = React.FormHTMLAttributes<HTMLFormElement> &
   Omit<HStackProps, 'spacing'> & {
-    spacing?: Spacing;
+    spacing?: StackSpacing;
   };
 
 export const GoToForm = ({children, onSubmit, spacing = 'xxs', ...elemProps}: GoToFormProps) => {
@@ -15,8 +14,8 @@ export const GoToForm = ({children, onSubmit, spacing = 'xxs', ...elemProps}: Go
       as="form"
       alignItems="center"
       spacing={spacing}
-      pl={shouldUseRTL ? 'xxs' : undefined}
-      pr={shouldUseRTL ? 'xxs' : undefined}
+      paddingLeft={shouldUseRTL ? 'xxs' : undefined}
+      paddingRight={shouldUseRTL ? 'xxs' : undefined}
       onSubmit={onSubmit}
       {...elemProps}
     >

package/pagination/lib/Pagination/GoTo/Label.tsx

@@ -1,9 +1,8 @@
-/** @jsx jsx */
 import * as React from 'react';
-import {jsx, css, Interpolation} from '@emotion/core';
 import {type, typeColors} from '@workday/canvas-kit-react/tokens';
 
 import {PaginationModel} from '../types';
+import {StyledType, styled} from '@workday/canvas-kit-react/common';
 
 export interface GoToLabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
   model: PaginationModel;
@@ -13,16 +12,16 @@ export interface GoToLabelProps extends React.LabelHTMLAttributes<HTMLLabelEleme
   children?: (model: PaginationModel) => React.ReactNode | React.ReactNode;
 }
 
-const labelStyles = css({
+const StyledLabel = styled('label')<StyledType>({
   ...type.levels.subtext.medium,
   color: typeColors.hint,
   whiteSpace: 'nowrap',
 });
 
-export const GoToLabel = ({css: cssProp, model, children, ...elemProps}: GoToLabelProps) => {
+export const GoToLabel = ({model, children, ...elemProps}: GoToLabelProps) => {
   return (
-    <label css={[labelStyles, cssProp as Interpolation<undefined>]} {...elemProps}>
+    <StyledLabel {...elemProps}>
       {typeof children === 'function' ? children(model) : children}
-    </label>
+    </StyledLabel>
   );
 };

package/pagination/lib/Pagination/Nav.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {Flex, FlexProps} from './common/Flex';
+import {Flex, FlexProps} from '@workday/canvas-kit-labs-react/layout';
 
 export interface PaginationNavProps extends Omit<FlexProps, 'as'> {
   'aria-label': string;
@@ -11,7 +11,7 @@ export const PaginationNav = ({'aria-label': ariaLabel, ...elemProps}: Paginatio
       as="nav"
       aria-label={ariaLabel}
       display="inline-flex"
-      direction="column"
+      flexDirection="column"
       alignItems="center"
       {...elemProps}
     />

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-labs-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/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-labs-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

@@ -6,6 +6,7 @@ export type Placement = PopperJS.Placement;
 export type PopperOptions = PopperJS.Options;
 
 import {usePopupStack} from './hooks';
+import {useLocalRef} from '@workday/canvas-kit-react/common';
 
 export interface PopperProps {
   /**
@@ -68,6 +69,11 @@ export interface PopperProps {
    * @default true
    */
   portal?: boolean;
+  /**
+   * Reference to the PopperJS instance. Useful for making direct method calls on the popper
+   * instance like `update`.
+   */
+  popperInstanceRef?: React.Ref<PopperJS.Instance>;
 }
 
 export const Popper = React.forwardRef<HTMLDivElement, PopperProps>(
@@ -108,11 +114,12 @@ const OpenPopper = React.forwardRef<HTMLDivElement, PopperProps>(
       children,
       portal,
       containerElement,
+      popperInstanceRef,
     }: PopperProps,
     ref
   ) => {
     const firstRender = React.useRef(true);
-    const popperInstance = React.useRef<PopperJS.Instance>();
+    const {localRef, elementRef} = useLocalRef(popperInstanceRef);
     const [placement, setPlacement] = React.useState(popperPlacement);
     const stackRef = usePopupStack(ref, anchorElement as HTMLElement);
 
@@ -141,14 +148,15 @@ const OpenPopper = React.forwardRef<HTMLDivElement, PopperProps>(
       }
 
       if (stackRef.current) {
-        popperInstance.current = PopperJS.createPopper(anchorEl, stackRef.current, {
+        const instance = PopperJS.createPopper(anchorEl, stackRef.current, {
           placement: popperPlacement,
           ...popperOptions,
           modifiers: [...(popperOptions.modifiers || []), placementModifier],
         });
+        elementRef(instance); // update the ref with the instance
 
         return () => {
-          popperInstance.current?.destroy();
+          instance?.destroy();
         };
       }
 
@@ -162,14 +170,14 @@ const OpenPopper = React.forwardRef<HTMLDivElement, PopperProps>(
     React.useLayoutEffect(() => {
       // Only update options if this is _not_ the first render
       if (!firstRender.current) {
-        popperInstance.current?.setOptions({
+        localRef.current?.setOptions({
           placement: popperPlacement,
           ...popperOptions,
           modifiers: [...(popperOptions.modifiers || []), placementModifier],
         });
       }
       firstRender.current = false;
-    }, [popperOptions, popperPlacement, placementModifier]);
+    }, [popperOptions, popperPlacement, placementModifier, localRef]);
 
     const contents = <>{isRenderProp(children) ? children({placement}) : children}</>;
 

package/popup/lib/Popup.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 
-import {Card} from '@workday/canvas-kit-react/card';
 import {createComponent, useDefaultModel} from '@workday/canvas-kit-react/common';
 
 import {PopupModel, usePopupModel, PopupModelContext} from './hooks';
@@ -10,6 +9,7 @@ import {PopupPopper} from './PopupPopper';
 import {PopupHeading} from './PopupHeading';
 import {PopupCloseIcon} from './PopupCloseIcon';
 import {PopupCloseButton} from './PopupCloseButton';
+import {PopupBody} from './PopupBody';
 
 export interface PopupProps {
   /**
@@ -30,7 +30,7 @@ export const Popup = createComponent()({
   },
   subComponents: {
     Heading: PopupHeading,
-    Body: Card.Body,
+    Body: PopupBody,
     Card: PopupCard,
     CloseIcon: PopupCloseIcon,
     Target: PopupTarget,

package/popup/lib/PopupBody.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+import {createComponent, ExtractProps} from '@workday/canvas-kit-react/common';
+import {Card} from '@workday/canvas-kit-react/card';
+
+export const PopupBody = createComponent('div')({
+  displayName: 'Popup.Body',
+  Component: (props: ExtractProps<typeof Card.Body, never>, ref) => {
+    return <Card.Body overflowY="auto" {...props} />;
+  },
+});