@workday/canvas-kit-react 15.0.0-alpha.1326-next.0 → 15.0.1

package/pill/lib/PillAvatar.tsx

@@ -0,0 +1,40 @@
+import {Avatar, AvatarProps, avatarStencil} from '@workday/canvas-kit-react/avatar';
+import {createSubcomponent} from '@workday/canvas-kit-react/common';
+import {mergeStyles} from '@workday/canvas-kit-react/layout';
+import {createStencil, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+import {usePillModel} from './usePillModel';
+
+export interface PillAvatarProps extends AvatarProps {}
+
+export const pillAvatarStencil = createStencil({
+  extends: avatarStencil,
+  base: {
+    flex: '0 0 auto',
+    fontFamily: system.fontFamily.default,
+    fontWeight: system.fontWeight.normal,
+    lineHeight: system.legacy.lineHeight.subtext.sm,
+    fontSize: system.legacy.fontSize.subtext.sm,
+    letterSpacing: system.legacy.letterSpacing.subtext.sm,
+    '&:disabled, &.disabled': {
+      opacity: system.opacity.disabled,
+    },
+  },
+});
+
+export const PillAvatar = createSubcomponent('div')({
+  modelHook: usePillModel,
+})<PillAvatarProps>(({size, ...elemProps}: PillAvatarProps, Element, _model) => {
+  return (
+    <Avatar
+      isDecorative
+      as={Element}
+      size={px2rem(18)}
+      {...mergeStyles(elemProps, [
+        pillAvatarStencil(),
+        _model.state.disabled ? 'disabled' : undefined,
+      ])}
+    />
+  );
+});

package/pill/lib/PillCount.tsx

@@ -0,0 +1,45 @@
+import {createComponent} from '@workday/canvas-kit-react/common';
+import {FlexProps, mergeStyles} from '@workday/canvas-kit-react/layout';
+import {calc, createStencil, cssVar} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+export interface PillCountProps extends FlexProps {}
+
+export const pillCountStencil = createStencil({
+  vars: {
+    backgroundColor: '',
+    borderColor: '',
+  },
+  base: ({backgroundColor, borderColor}) => ({
+    borderStartStartRadius: 0,
+    borderStartEndRadius: system.legacy.shape.sm,
+    borderEndStartRadius: 0,
+    borderEndEndRadius: system.legacy.shape.sm,
+    borderWidth: 0,
+    borderInlineStartWidth: 0,
+    borderStyle: 'solid',
+    borderColor: cssVar(borderColor, system.color.border.transparent),
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: system.legacy.size.xs,
+    width: system.legacy.size.xs,
+    padding: `0 ${system.legacy.padding.xxs}`,
+    // Using the `padding` token here as we don't have a `margin` token
+    marginInlineEnd: calc.negate(system.legacy.gap.sm),
+    marginInlineStart: system.legacy.gap.xs,
+    backgroundColor: cssVar(backgroundColor, system.legacy.color.surface.alt.strong),
+    flex: '0 0 auto',
+  }),
+});
+
+export const PillCount = createComponent('span')({
+  displayName: 'Pill.Count',
+  Component: ({children, ...elemProps}: PillCountProps, ref, Element) => {
+    return (
+      <Element ref={ref} {...mergeStyles(elemProps, pillCountStencil())}>
+        {children}
+      </Element>
+    );
+  },
+});

package/pill/lib/PillIcon.tsx

@@ -0,0 +1,32 @@
+import {createSubcomponent} from '@workday/canvas-kit-react/common';
+import {SystemIcon, SystemIconProps, systemIconStencil} from '@workday/canvas-kit-react/icon';
+import {mergeStyles} from '@workday/canvas-kit-react/layout';
+import {calc, createStencil} from '@workday/canvas-kit-styling';
+import {plusIcon} from '@workday/canvas-system-icons-web';
+import {component, system} from '@workday/canvas-tokens-web';
+
+import {usePillModel} from './usePillModel';
+
+export interface PillIconProps extends Partial<SystemIconProps> {}
+
+export const pillIconStencil = createStencil({
+  extends: systemIconStencil,
+  base: {
+    marginInlineStart: calc.negate(system.legacy.gap.xs),
+    [systemIconStencil.vars.size]: component.legacy.systemIcon.size.sm,
+    flex: '0 0 auto',
+  },
+});
+
+export const PillIcon = createSubcomponent('span')({
+  modelHook: usePillModel,
+})<PillIconProps>(({icon, ...elemProps}, Element) => {
+  return (
+    <SystemIcon
+      as={Element}
+      role="img"
+      icon={icon || plusIcon}
+      {...mergeStyles(elemProps, pillIconStencil())}
+    />
+  );
+});

package/pill/lib/PillIconButton.tsx

@@ -0,0 +1,84 @@
+import {buttonStencil} from '@workday/canvas-kit-react/button';
+import {createSubcomponent, focusRing} from '@workday/canvas-kit-react/common';
+import {SystemIcon, SystemIconProps, systemIconStencil} from '@workday/canvas-kit-react/icon';
+import {mergeStyles} from '@workday/canvas-kit-react/layout';
+import {calc, createStencil, px2rem} from '@workday/canvas-kit-styling';
+import {xSmallIcon} from '@workday/canvas-system-icons-web';
+import {component, system} from '@workday/canvas-tokens-web';
+
+import {usePillModel} from './usePillModel';
+
+export interface PillIconButtonProps extends Partial<SystemIconProps> {
+  /**
+   * The aria label for the removable icon. You must provide a valid string to represent the action.
+   */
+  'aria-label'?: string;
+}
+
+export const pillIconButtonStencil = createStencil({
+  extends: buttonStencil,
+  base: {
+    marginInlineEnd: calc.negate(px2rem(7)), // visually pull in the pill to the right size  by -7px
+    marginInlineStart: calc.negate(px2rem(2)), // visually create space between label and the button by -2px
+    borderRadius: px2rem(2),
+    height: system.legacy.size.xxs,
+    width: system.legacy.size.xxs,
+    padding: 0,
+    overflow: 'visible',
+    flex: '0 0 auto',
+    [buttonStencil.vars.border]: system.color.border.transparent,
+    [buttonStencil.vars.background]: system.legacy.color.surface.transparent,
+
+    [systemIconStencil.vars.color]: system.color.fg.strong,
+    [systemIconStencil.vars.size]: component.legacy.systemIcon.size.sm,
+    '::after': {
+      content: '""',
+      height: system.legacy.size.sm,
+      width: system.legacy.size.sm,
+      position: 'absolute',
+      left: calc.negate(px2rem(7)),
+      bottom: calc.negate(px2rem(7)),
+      margin: 0,
+      pointerEvents: 'all',
+    },
+
+    '&:focus-visible, &.focus': {
+      [buttonStencil.vars.border]: system.color.border.transparent,
+      ...focusRing({
+        innerColor: system.color.border.transparent,
+      }),
+    },
+    '&:hover, &.hover': {
+      [buttonStencil.vars.border]: system.color.border.transparent,
+    },
+    '&:active, &.active': {
+      [buttonStencil.vars.border]: system.color.border.transparent,
+    },
+    '&:disabled, &.disabled': {
+      [buttonStencil.vars.border]: system.color.border.transparent,
+      [systemIconStencil.vars.color]: system.color.fg.disabled,
+    },
+  },
+});
+
+export const PillIconButton = createSubcomponent('button')({
+  modelHook: usePillModel,
+})<PillIconButtonProps>(
+  ({size, icon, children, 'aria-label': ariaLabel = '', ...elemProps}, Element, model) => {
+    return (
+      <Element
+        disabled={model.state.disabled}
+        aria-labelledby={`removable-${model.state.id} label-${model.state.id}`}
+        {...mergeStyles(elemProps, pillIconButtonStencil())}
+      >
+        <SystemIcon
+          aria-label={ariaLabel}
+          id={`removable-${model.state.id}`}
+          icon={icon || xSmallIcon}
+          aria-hidden // This works for Chrome but not needed in Safari
+          role="img"
+        />
+      </Element>
+    );
+  }
+);

package/pill/lib/PillLabel.tsx

@@ -0,0 +1,31 @@
+import {createSubcomponent} from '@workday/canvas-kit-react/common';
+import {BoxProps, mergeStyles} from '@workday/canvas-kit-react/layout';
+import {OverflowTooltip, OverflowTooltipProps} from '@workday/canvas-kit-react/tooltip';
+import {createStencil} from '@workday/canvas-kit-styling';
+
+import {usePillModel} from './usePillModel';
+
+export interface PillLabelProps extends BoxProps {
+  tooltipProps?: Omit<OverflowTooltipProps, 'children'>;
+}
+
+export const pillLabelStencil = createStencil({
+  base: {
+    flexShrink: 1,
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis',
+    overflow: 'hidden',
+  },
+});
+
+export const PillLabel = createSubcomponent('span')({
+  modelHook: usePillModel,
+})<PillLabelProps>(({tooltipProps, children, ...elemProps}, Element, model) => {
+  return (
+    <OverflowTooltip {...tooltipProps}>
+      <Element id={`label-${model.state.id}`} {...mergeStyles(elemProps, pillLabelStencil())}>
+        {children}
+      </Element>
+    </OverflowTooltip>
+  );
+});

package/pill/lib/usePillModel.tsx

@@ -0,0 +1,23 @@
+import {createModelHook, useUniqueId} from '@workday/canvas-kit-react/common';
+
+export const usePillModel = createModelHook({
+  defaultConfig: {
+    /**
+     * Used to disable a pill and apply the correct styles.
+     */
+    disabled: false,
+    /**
+     * ID used to add accessibility labels to pill elements.
+     * @default `useUniqueId()`
+     */
+    id: '',
+  },
+})(config => {
+  const id = useUniqueId(config.id);
+  const state = {
+    ...config,
+    id,
+  };
+
+  return {state, events: {}};
+});

package/pill/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../dist/commonjs/pill",
+  "module": "../dist/es6/pill",
+  "sideEffects": false,
+  "types": "../dist/es6/pill"
+}

package/popup/lib/Popper.tsx

@@ -1,21 +1,22 @@
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import {
-  Placement as PopperJSPlacement,
-  Options,
   Instance,
   Modifier,
+  Options,
+  Placement as PopperJSPlacement,
   createPopper,
 } from '@popperjs/core';
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+import {useLocalRef} from '@workday/canvas-kit-react/common';
+
+import {fallbackPlacementsModifier} from './fallbackPlacements';
+import {usePopupStack} from './hooks';
 
 export type Placement = `${PopperJSPlacement}`; // Use template literals to make documentation list them out
 export type PopperOptions = Options;
 export const defaultFallbackPlacements: Placement[] = ['top', 'right', 'bottom', 'left'];
 
-import {usePopupStack} from './hooks';
-import {useLocalRef} from '@workday/canvas-kit-react/common';
-import {fallbackPlacementsModifier} from './fallbackPlacements';
-
 export interface PopperProps {
   /**
    * The reference element used to position the Popper. Popper content will try to follow the

package/popup/lib/Popup.tsx

@@ -2,14 +2,14 @@ import * as React from 'react';
 
 import {createContainer} from '@workday/canvas-kit-react/common';
 
-import {usePopupModel} from './hooks';
+import {PopupBody} from './PopupBody';
 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';
+import {PopupCloseIcon} from './PopupCloseIcon';
+import {PopupHeading} from './PopupHeading';
+import {PopupPopper} from './PopupPopper';
+import {PopupTarget} from './PopupTarget';
+import {usePopupModel} from './hooks';
 
 export interface PopupProps {
   /**

package/popup/lib/PopupBody.tsx

@@ -1,14 +1,15 @@
-import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
 import {Card} from '@workday/canvas-kit-react/card';
-import {usePopupModel} from './hooks';
+import {ExtractProps, createSubcomponent} from '@workday/canvas-kit-react/common';
 import {createStencil} from '@workday/canvas-kit-styling';
-import {mergeStyles} from '../../layout';
 import {system} from '@workday/canvas-tokens-web';
 
+import {mergeStyles} from '../../layout';
+import {usePopupModel} from './hooks';
+
 export const popupBodyStencil = createStencil({
   base: {
     overflowY: 'auto',
-    padding: system.space.x2,
+    paddingInline: system.legacy.padding.xs,
   },
 });
 

package/popup/lib/PopupCard.tsx

@@ -1,18 +1,24 @@
 import * as React from 'react';
 
 import {Card} from '@workday/canvas-kit-react/card';
-import {space} from '@workday/canvas-kit-react/tokens';
 import {
   ExtractProps,
   createSubcomponent,
   getTransformOrigin,
 } from '@workday/canvas-kit-react/common';
 import {FlexStyleProps, mergeStyles} from '@workday/canvas-kit-react/layout';
+import {
+  calc,
+  createStencil,
+  createVars,
+  cssVar,
+  keyframes,
+  px2rem,
+} from '@workday/canvas-kit-styling';
+import {base, system} from '@workday/canvas-tokens-web';
 
 import {getTransformFromPlacement} from './getTransformFromPlacement';
 import {usePopupCard, usePopupModel} from './hooks';
-import {createStencil, createVars, cssVar, keyframes} from '@workday/canvas-kit-styling';
-import {system} from '@workday/canvas-tokens-web';
 
 export type FlexAndBoxProps = ExtractProps<typeof Card, never> & FlexStyleProps;
 export interface PopupCardProps extends FlexAndBoxProps {
@@ -36,16 +42,30 @@ const fadeIn = keyframes({
 });
 
 function getSpace(value?: string | number) {
-  if (value && value in space) {
-    return space[value as keyof typeof space];
+  // TODO (deprecated tokens): Revisit tokens after removal of style props
+  const spaceMap = {
+    zero: system.legacy.gap.none,
+    xxxs: system.legacy.gap.xs,
+    xxs: system.legacy.gap.sm,
+    xs: px2rem(12),
+    s: system.legacy.gap.md,
+    m: system.legacy.gap.lg,
+    l: system.legacy.gap.xl,
+    xl: px2rem(40),
+    xxl: system.legacy.gap.xxl,
+    xxxl: px2rem(80),
+  };
+
+  if (value && value in spaceMap) {
+    return spaceMap[value as keyof typeof spaceMap];
   } else {
     return value;
   }
 }
 
 function getMaxHeight(margin?: string | number) {
-  // set the default margin offset to space.xl
-  let marginOffset: string | number = cssVar(system.space.x10);
+  // set the default margin offset to 40px
+  let marginOffset: string | number = cssVar(base.legacy.size500);
 
   if (margin) {
     // parse the margin prop
@@ -71,13 +91,18 @@ export const popupCardStencil = createStencil({
     transformOriginVertical: '',
   },
   base: ({maxHeight, transformOriginHorizontal, transformOriginVertical}) => ({
-    ...system.type.subtext.large,
+    fontFamily: system.fontFamily.default,
+    fontWeight: system.fontWeight.normal,
+    fontSize: system.legacy.fontSize.subtext.lg,
+    lineHeight: system.legacy.lineHeight.subtext.lg,
+    color: system.color.fg.default,
     position: 'relative',
-    maxWidth: `calc(100vw - ${system.space.x8})`,
-    gap: system.space.x2,
-    boxShadow: system.depth[5],
-    minHeight: system.space.zero,
-    padding: system.space.x6,
+    maxWidth: calc.subtract('100vw', system.legacy.size.sm),
+    gap: system.legacy.gap.lg,
+    boxShadow: system.depth[3],
+    minHeight: 0,
+    padding: system.legacy.padding.xl,
+    borderRadius: system.legacy.shape.xxxl,
     maxHeight: maxHeight,
     overflowY: 'auto',
     animationName: fadeIn,
@@ -102,7 +127,7 @@ export const PopupCard = createSubcomponent('div')({
   const transformOrigin = React.useMemo(() => {
     return getTransformFromPlacement(model.state.placement || 'bottom');
   }, [model.state.placement]);
-  const translate = getTransformOrigin(transformOrigin, cssVar(system.space.x2));
+  const translate = getTransformOrigin(transformOrigin, system.legacy.gap.sm);
   const cardMaxHeight = getMaxHeight(elemProps.margin);
 
   return (

package/popup/lib/PopupCloseButton.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
-import {createSubcomponent} from '@workday/canvas-kit-react/common';
 import {SecondaryButton} from '@workday/canvas-kit-react/button';
+import {createSubcomponent} from '@workday/canvas-kit-react/common';
 
 import {usePopupCloseButton, usePopupModel} from './hooks';
 

package/popup/lib/PopupCloseIcon.tsx

@@ -1,19 +1,19 @@
-import {xIcon} from '@workday/canvas-system-icons-web';
-import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
 import {TertiaryButton} from '@workday/canvas-kit-react/button';
-
-import {usePopupCloseButton, usePopupModel} from './hooks';
+import {ExtractProps, createSubcomponent} from '@workday/canvas-kit-react/common';
+import {mergeStyles} from '@workday/canvas-kit-react/layout';
 import {createStencil} from '@workday/canvas-kit-styling';
+import {xIcon} from '@workday/canvas-system-icons-web';
 import {system} from '@workday/canvas-tokens-web';
-import {mergeStyles} from '../../layout';
+
+import {usePopupCloseButton, usePopupModel} from './hooks';
 
 export interface PopupCloseIconProps extends ExtractProps<typeof TertiaryButton, never> {}
 
 export const popupCloseIconStencil = createStencil({
   base: {
     position: 'absolute',
-    insetInlineEnd: system.space.x1,
-    top: system.space.x1,
+    insetInlineEnd: system.legacy.padding.xs,
+    top: system.legacy.padding.xs,
   },
 });
 

package/popup/lib/PopupHeading.tsx

@@ -1,12 +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 {usePopupHeading, usePopupModel} from './hooks';
+import {ExtractProps, createSubcomponent} from '@workday/canvas-kit-react/common';
+import {mergeStyles} from '@workday/canvas-kit-react/layout';
 import {createStencil} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
-import {mergeStyles} from '../../layout';
+
+import {usePopupHeading, usePopupModel} from './hooks';
 
 export interface PopupHeadingProps extends ExtractProps<typeof Card.Heading, never> {
   children?: React.ReactNode;
@@ -14,7 +14,7 @@ export interface PopupHeadingProps extends ExtractProps<typeof Card.Heading, nev
 
 export const popupHeadingStencil = createStencil({
   base: {
-    padding: system.space.x2,
+    paddingInline: system.legacy.padding.xs,
   },
 });
 

package/popup/lib/PopupPopper.tsx

@@ -1,7 +1,7 @@
 import {createSubcomponent} from '@workday/canvas-kit-react/common';
 
+import {Placement, Popper, PopperOptions, PopperProps} from './Popper';
 import {usePopupModel, usePopupPopper} from './hooks';
-import {Placement, PopperOptions, Popper, PopperProps} from './Popper';
 
 export interface PopupPopperProps extends PopperProps {
   /**

package/popup/lib/PopupTarget.tsx

@@ -1,7 +1,7 @@
-import {createSubcomponent} from '@workday/canvas-kit-react/common';
 import {SecondaryButton} from '@workday/canvas-kit-react/button';
+import {createSubcomponent} from '@workday/canvas-kit-react/common';
 
-import {usePopupTarget, usePopupModel} from './hooks';
+import {usePopupModel, usePopupTarget} from './hooks';
 
 export interface PopupTargetProps {}
 

package/popup/lib/fallbackPlacements.ts

@@ -1,10 +1,10 @@
 import {
+  Modifier,
+  ModifierArguments,
   Placement as PopperJSPlacement,
+  SideObject,
   State,
   detectOverflow,
-  SideObject,
-  Modifier,
-  ModifierArguments,
 } from '@popperjs/core';
 
 export type Placement = PopperJSPlacement; // Use template literals to make documentation list them out
@@ -26,7 +26,7 @@ const placements: Placement[] = [
   'left-end',
   'auto',
   'auto-start',
-  'auto-end'
+  'auto-end',
 ];
 
 const getOppositePlacement = (popperPlacement: Placement): Placement => {

package/popup/lib/getTransformFromPlacement.ts

@@ -1,6 +1,7 @@
-import {TransformOrigin} from '@workday/canvas-kit-react/common';
 import {Placement} from '@popperjs/core';
 
+import {TransformOrigin} from '@workday/canvas-kit-react/common';
+
 export const getTransformFromPlacement = (placement: Placement): TransformOrigin => {
   const [first, second] = placement.split('-');
 
@@ -8,23 +9,23 @@ export const getTransformFromPlacement = (placement: Placement): TransformOrigin
     first === 'top'
       ? 'bottom'
       : first === 'bottom'
-      ? 'top'
-      : second === 'end'
-      ? 'top'
-      : second === 'start'
-      ? 'bottom'
-      : 'center';
+        ? 'top'
+        : second === 'end'
+          ? 'top'
+          : second === 'start'
+            ? 'bottom'
+            : 'center';
 
   const horizontal =
     first === 'left'
       ? 'right'
       : first === 'right'
-      ? 'left'
-      : second === 'end'
-      ? 'left'
-      : second === 'start'
-      ? 'right'
-      : 'center';
+        ? 'left'
+        : second === 'end'
+          ? 'left'
+          : second === 'start'
+            ? 'right'
+            : 'center';
 
   return {
     vertical,

package/popup/lib/hooks/useAssistiveHideSiblings.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import {createElemPropsHook} from '@workday/canvas-kit-react/common';
 
 import {usePopupModel} from './usePopupModel';

package/popup/lib/hooks/useBringToTopOnClick.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import {PopupStack} from '@workday/canvas-kit-popup-stack';
 import {createElemPropsHook} from '@workday/canvas-kit-react/common';
 

package/popup/lib/hooks/useCloseOnTargetHidden.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import {createElemPropsHook} from '@workday/canvas-kit-react/common';
+
 import {usePopupModel} from './usePopupModel';
 
 function getScrollParent(element: HTMLElement): HTMLElement {
@@ -50,7 +51,6 @@ export const useCloseOnTargetHidden = createElemPropsHook(usePopupModel)(model =
     const target = model.state.targetRef.current;
     const scrollParent = getScrollParent(target);
 
-    // eslint-disable-next-line compat/compat
     const observer = new IntersectionObserver(callback, {
       root: scrollParent,
       threshold: 0.5,

package/popup/lib/hooks/useFocusTrap.ts

@@ -1,8 +1,8 @@
 import React from 'react';
-import {tabTrappingKey} from './focus-trap-js';
 
 import {createElemPropsHook} from '@workday/canvas-kit-react/common';
 
+import {tabTrappingKey} from './focus-trap-js';
 import {usePopupModel} from './usePopupModel';
 
 /**

package/popup/lib/hooks/useInitialFocus.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 
 import {
-  changeFocus,
   assert,
-  getFirstFocusableElement,
+  changeFocus,
   createElemPropsHook,
+  getFirstFocusableElement,
 } from '@workday/canvas-kit-react/common';
 
 import {usePopupModel} from './usePopupModel';

package/popup/lib/hooks/usePopupCloseButton.ts

@@ -1,4 +1,5 @@
 import {createElemPropsHook} from '@workday/canvas-kit-react/common';
+
 import {usePopupModel} from './usePopupModel';
 
 /**

package/popup/lib/hooks/usePopupHeading.ts

@@ -1,4 +1,5 @@
 import {createElemPropsHook} from '@workday/canvas-kit-react/common';
+
 import {usePopupModel} from './usePopupModel';
 
 /**