@workday/canvas-kit-react 8.0.0 → 8.0.1

package/layout/lib/utils/stack.ts

@@ -1,15 +1,11 @@
-import {
-  ContentDirection,
-  PartialEmotionCanvasTheme,
-  useTheme,
-} from '@workday/canvas-kit-react/common';
-import {space as spaceTokens, CanvasSpaceKeys} from '@workday/canvas-kit-react/tokens';
+import {space as spaceTokens} from '@workday/canvas-kit-react/tokens';
+import {CanvasSystemPropValues, SystemPropValues} from './systemProps';
 
 export type StackDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse';
 
 const selector = '& > *:not(style) ~ *:not(style)';
 
-export type StackSpacing = CanvasSpaceKeys | number | (string & {});
+export type StackSpacing = SystemPropValues['space'];
 
 export type StackStyleProps = {
   /** sets space values between child elements (bidirectional support) */
@@ -26,50 +22,28 @@ export type StackStyleProps = {
   shouldWrapChildren?: boolean;
 };
 
-const column = (value: StackSpacing) => ({
-  marginTop: spaceTokens[value as CanvasSpaceKeys] || value,
-});
-
-const columnReverse = (value: StackSpacing) => ({
-  marginBottom: spaceTokens[value as CanvasSpaceKeys] || value,
-});
-
-const row = (value: StackSpacing, isRTL = false) => {
-  const attr = isRTL ? 'marginRight' : 'marginLeft';
-  return {
-    [attr]: spaceTokens[value as CanvasSpaceKeys] || value,
-  };
+const getSpace = (value: SystemPropValues['space']) => {
+  return spaceTokens[value as CanvasSystemPropValues['space']] || value;
 };
 
-const rowReverse = (value: StackSpacing, isRTL = false) => {
-  const attr = isRTL ? 'marginLeft' : 'marginRight';
-  return {
-    [attr]: spaceTokens[value as CanvasSpaceKeys] || value,
-  };
-};
+export function stack<P extends StackStyleProps>(props: P) {
+  const {flexDirection = 'row', spacing} = props;
+  let styles = {};
 
-const stackDirectionProps = {
-  column,
-  'column-reverse': columnReverse,
-  row,
-  'row-reverse': rowReverse,
-};
+  if (flexDirection === 'column') {
+    styles = {marginTop: getSpace(spacing)};
+  }
 
-export function stack<P extends StackStyleProps & {theme?: PartialEmotionCanvasTheme}>(props: P) {
-  let styles = {};
-  const {flexDirection = 'row', spacing} = props;
-  if (flexDirection === 'column' || flexDirection === 'column-reverse') {
-    const stackFn = stackDirectionProps[flexDirection];
-    styles = stackFn(spacing);
+  if (flexDirection === 'column-reverse') {
+    styles = {marginBottom: getSpace(spacing)};
+  }
+
+  if (flexDirection === 'row') {
+    styles = {marginInlineStart: getSpace(spacing)};
   }
 
-  if (flexDirection === 'row' || flexDirection === 'row-reverse') {
-    // stack will always be used within the context of a component, but eslint doesn't know that
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const {canvas} = useTheme(props.theme);
-    const stackFn = stackDirectionProps[flexDirection];
-    const isRTL = canvas.direction === ContentDirection.RTL;
-    styles = stackFn(spacing, isRTL);
+  if (flexDirection === 'row-reverse') {
+    styles = {marginInlineEnd: getSpace(spacing)};
   }
 
   return {

package/layout/lib/utils/styleProps.ts

@@ -0,0 +1,56 @@
+import {BackgroundStyleProps} from './background';
+import {BorderStyleProps} from './border';
+import {ColorStyleProps} from './color';
+import {DepthStyleProps} from './depth';
+import {FlexStyleProps} from './flex';
+import {FlexItemStyleProps} from './flexItem';
+import {GridStyleProps} from './grid';
+import {GridItemStyleProps} from './gridItem';
+import {LayoutStyleProps} from './layout';
+import {OtherStyleProps} from './other';
+import {PositionStyleProps} from './position';
+import {SpaceStyleProps} from './space';
+import {TextStyleProps} from './text';
+
+/**
+ * Common Style Props
+ * ---
+ *Types for common style props shared across all components
+ *
+ * - background
+ * - border
+ * - color
+ * - depth
+ * - flexItem
+ * - gridItem
+ * - layout
+ * - other
+ * - position
+ * - space
+ * - text
+ */
+export type CommonStyleProps = BackgroundStyleProps &
+  BorderStyleProps &
+  ColorStyleProps &
+  DepthStyleProps &
+  FlexItemStyleProps &
+  GridItemStyleProps &
+  LayoutStyleProps &
+  OtherStyleProps &
+  PositionStyleProps &
+  SpaceStyleProps &
+  TextStyleProps;
+
+/**
+ * All Style Props
+ * ---
+ * Types for every style prop
+ * - common
+ * - flex
+ * - grid
+ */
+export type AllStyleProps = CommonStyleProps &
+  // Omitting 'display' here to default to the standard csstype type Property.Display
+  Omit<FlexStyleProps, 'display'> &
+  // Omitting 'display' here to default to the standard csstype type Property.Display
+  Omit<GridStyleProps, 'display'>;

package/layout/lib/utils/systemProps.ts

@@ -0,0 +1,46 @@
+import {
+  CanvasBorderRadiusKeys,
+  CanvasColor,
+  CanvasDepth,
+  CanvasSpaceKeys,
+  CanvasTypeProperties,
+} from '@workday/canvas-kit-react/tokens';
+
+export type SystemPropNames =
+  | 'color'
+  | 'depth'
+  | 'font'
+  | 'fontSize'
+  | 'fontWeight'
+  | 'shape'
+  | 'space';
+
+/**
+ * Canvas System Prop Values
+ * ---
+ * These system prop values are restricted to Canvas token values.
+ */
+export type CanvasSystemPropValues = {
+  color: CanvasColor;
+  depth: keyof CanvasDepth;
+  font: keyof CanvasTypeProperties['fontFamilies'];
+  fontSize: keyof CanvasTypeProperties['fontSizes'];
+  fontWeight: keyof CanvasTypeProperties['fontWeights'];
+  shape: CanvasBorderRadiusKeys;
+  space: CanvasSpaceKeys;
+};
+
+/**
+ * System Prop Values
+ * ---
+ * These system prop values include Canvas System Prop Values and generic values.
+ */
+export type SystemPropValues = {
+  color: CanvasSystemPropValues['color'] | (string & {});
+  depth: CanvasSystemPropValues['depth'];
+  font: CanvasSystemPropValues['font'] | (string & {});
+  fontSize: CanvasSystemPropValues['fontSize'] | (string & {});
+  fontWeight: CanvasSystemPropValues['fontWeight'] | (string & {});
+  shape: CanvasSystemPropValues['shape'] | number | (string & {});
+  space: CanvasSystemPropValues['space'] | number | (string & {});
+};

package/layout/lib/utils/text.ts

@@ -0,0 +1,122 @@
+import {Property} from 'csstype';
+
+import {buildStyleFns, buildStylePropFn, StyleFnConfig} from './buildStyleFns';
+import {SystemPropValues} from './systemProps';
+
+/** style props to for CSS font and text properties */
+export type TextStyleProps = {
+  /**
+   * - sets [CSS font-family property](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family)
+   * - system tokens: `font` */
+  fontFamily?: Property.FontFamily | SystemPropValues['font'];
+  /**
+   * - sets [CSS font-size property](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size)
+   * - system tokens: `fontSize` */
+  fontSize?: Property.FontSize | SystemPropValues['fontSize'];
+  /** sets [CSS font-style property](https://developer.mozilla.org/en-US/docs/Web/CSS/font-style) */
+  fontStyle?: Property.FontStyle;
+  /**
+   * - sets [CSS font-weight property](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight)
+   * - system tokens: `fontWeight` */
+  fontWeight?: Property.FontWeight | SystemPropValues['fontWeight'];
+  /** sets [CSS line-height property](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height) */
+  lineHeight?: Property.LineHeight;
+  /** sets [CSS letter-spacing property](https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing) */
+  letterSpacing?: Property.LetterSpacing;
+  /** sets [CSS text-align property](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align) */
+  textAlign?: Property.TextAlign;
+  /** sets [CSS text-decoration property](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration) */
+  textDecoration?: Property.TextDecoration;
+  /** sets [CSS text-overflow property](https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow) */
+  textOverflow?: Property.TextOverflow;
+  /** sets [CSS text-transform property](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform) */
+  textTransform?: Property.TextTransform;
+  /** sets [CSS text-shadow property](https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow) */
+  textShadow?: Property.TextShadow;
+  /** sets [CSS white-space property](https://developer.mozilla.org/en-US/docs/Web/CSS/white-space) */
+  whiteSpace?: Property.WhiteSpace;
+  /** sets [CSS word-break property](https://developer.mozilla.org/en-US/docs/Web/CSS/word-break) */
+  wordBreak?: Property.WordBreak;
+};
+
+export const textStyleFnConfigs: StyleFnConfig[] = [
+  {
+    name: 'fontFamily',
+    properties: ['fontFamily'],
+    system: 'font',
+  },
+  {
+    name: 'fontSize',
+    properties: ['fontSize'],
+    system: 'fontSize',
+  },
+  {
+    name: 'fontStyle',
+    properties: ['fontStyle'],
+    system: 'none',
+  },
+  {
+    name: 'fontWeight',
+    properties: ['fontWeight'],
+    system: 'fontWeight',
+  },
+  {
+    name: 'lineHeight',
+    properties: ['lineHeight'],
+    system: 'none',
+  },
+  {
+    name: 'letterSpacing',
+    properties: ['letterSpacing'],
+    system: 'none',
+  },
+  {
+    name: 'textAlign',
+    properties: ['textAlign'],
+    system: 'none',
+  },
+  {
+    name: 'textDecoration',
+    properties: ['textDecoration'],
+    system: 'none',
+  },
+  {
+    name: 'textOverflow',
+    properties: ['textOverflow'],
+    system: 'none',
+  },
+  {
+    name: 'textTransform',
+    properties: ['textTransform'],
+    system: 'none',
+  },
+  {
+    name: 'textShadow',
+    properties: ['textShadow'],
+    system: 'none',
+  },
+  {
+    name: 'whiteSpace',
+    properties: ['whiteSpace'],
+    system: 'none',
+  },
+  {
+    name: 'wordBreak',
+    properties: ['wordBreak'],
+    system: 'none',
+  },
+];
+
+export const textStyleFns = buildStyleFns(textStyleFnConfigs);
+/**
+ * A style prop function that takes component props and returns font and text styles.
+ * If no `TextStyleProps` are found, it returns an empty object.
+ *
+ * @example
+ * ```
+ * const BoxExample = () => (
+ *   <Box textAlign="center" fontWeight="medium">Hello, alignment!</Box>
+ * );
+ * ```
+ */
+export const text = buildStylePropFn<TextStyleProps>(textStyleFns);

package/loading-dots/README.md

@@ -0,0 +1,7 @@
+# Canvas Kit Loading Dots
+
+View the
+[documentation for Loading Dots](https://workday.github.io/canvas-kit/?path=/docs/components-indicators-loading-dots-react--basic)
+on Storybook.
+
+[> Workday Design Reference](https://design.workday.com/components/indicators/loading-dots)

package/loading-dots/index.ts

@@ -0,0 +1 @@
+export * from './lib/LoadingDots';

package/{loading-animation → loading-dots}/lib/LoadingDots.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import {keyframes} from '@emotion/react';
-import canvas, {borderRadius} from '@workday/canvas-kit-react/tokens';
+import {canvas, borderRadius} from '@workday/canvas-kit-react/tokens';
 import {styled} from '@workday/canvas-kit-react/common';
 
 /**
@@ -60,7 +60,7 @@ const Container = styled('div')({
 /**
  * A simple component that displays three horizontal dots, to be used when some data is loading.
  */
-export default function LoadingDots(props: React.HTMLAttributes<HTMLDivElement>) {
+export function LoadingDots(props: React.HTMLAttributes<HTMLDivElement>) {
   const {...elemProps} = props;
 
   return (

package/loading-dots/package.json

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

package/menu/lib/MenuCard.tsx

@@ -61,6 +61,7 @@ export const MenuCard = createSubcomponent('div')({
       maxWidth={`calc(100vw - ${space.l})`}
       transformOrigin={transformOrigin}
       padding="zero"
+      depth={3}
       {...elemProps}
     >
       {elemProps.children}

package/menu/lib/MenuContextTarget.tsx

@@ -22,10 +22,8 @@ const useMenuTargetBase = createElemPropsHook(useMenuModel)(model => {
     onKeyDown(event: React.KeyboardEvent) {
       // eslint-disable-next-line default-case
       switch (event.key) {
-        case 'Down':
-        case 'ArrowDown': // IE11
-        case 'Up':
-        case 'ArrowUp': // IE11
+        case 'ArrowDown':
+        case 'ArrowUp': // this follow the keys for modern browsers https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values#navigation_keys
           model.events.show(event);
       }
     },

package/menu/lib/MenuItem.tsx

@@ -56,9 +56,6 @@ const StyledItem = styled(Box.as('button'))<StyledType>(
       borderWidth: 0,
       textAlign: 'left',
       transition: 'background-color 80ms, color 80ms',
-      '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
-        fill: iconColors.active,
-      },
       '&:hover, &[aria-selected=true]': {
         backgroundColor: theme.canvas.palette.primary.lightest,
         color: colors.blackPepper300,
@@ -66,7 +63,7 @@ const StyledItem = styled(Box.as('button'))<StyledType>(
           fill: iconColors.hover,
         },
         '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
-          fill: iconColors.active,
+          fill: iconColors.hover,
         },
       },
       '&:focus': {
@@ -76,6 +73,9 @@ const StyledItem = styled(Box.as('button'))<StyledType>(
         '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
           fill: iconColors.inverse,
         },
+        '*:hover .wd-icon-fill': {
+          fill: iconColors.inverse,
+        },
         '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
           fill: iconColors.inverse,
         },
@@ -84,9 +84,6 @@ const StyledItem = styled(Box.as('button'))<StyledType>(
       [`[data-whatinput]`]: {
         backgroundColor: 'inherit',
         color: colors.blackPepper300,
-        '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
-          fill: iconColors.active,
-        },
         '&:hover, &[aria-selected=true]': {
           backgroundColor: theme.canvas.palette.primary.lightest,
           '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
@@ -95,7 +92,7 @@ const StyledItem = styled(Box.as('button'))<StyledType>(
         },
         '&:focus': {
           '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
-            fill: iconColors.active,
+            fill: iconColors.hover,
           },
         },
       },
@@ -111,10 +108,13 @@ const StyledItem = styled(Box.as('button'))<StyledType>(
           '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
             fill: iconColors.disabled,
           },
-          '&:hover, &[aria-selected=true]': {
-            '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
-              fill: iconColors.disabled,
-            },
+        },
+        '&:hover, &[aria-selected=true]': {
+          '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
+            fill: iconColors.disabled,
+          },
+          '*:hover .wd-icon-fill': {
+            fill: iconColors.disabled,
           },
         },
       },

package/menu/lib/MenuList.tsx

@@ -11,11 +11,12 @@ import {Stack} from '@workday/canvas-kit-react/layout';
 
 import {useMenuModel} from './useMenuModel';
 
-export interface MenuListProps extends Partial<ExtractProps<typeof Stack, never>> {
+export interface MenuListProps<T = any>
+  extends Omit<Partial<ExtractProps<typeof Stack, never>>, 'children'> {
   /**
    * The label text of the MenuList.
    */
-  children: React.ReactNode;
+  children: React.ReactNode | ((item: T) => React.ReactNode);
 }
 
 export const useMenuList = createElemPropsHook(useMenuModel)(model => {

package/menu/lib/MenuTarget.tsx

@@ -22,10 +22,8 @@ const useMenuTargetBase = createElemPropsHook(useMenuModel)(model => {
     onKeyDown(event: React.KeyboardEvent) {
       // eslint-disable-next-line default-case
       switch (event.key) {
-        case 'Down':
-        case 'ArrowDown': // IE11
-        case 'Up':
-        case 'ArrowUp': // IE11
+        case 'ArrowDown':
+        case 'ArrowUp': // this follow the keys for modern browsers https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values#navigation_keys
           model.events.show(event);
       }
     },

package/modal/lib/ModalCard.tsx

@@ -1,18 +1,31 @@
 import * as React from 'react';
 
-import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
+import {
+  createSubcomponent,
+  ExtractProps,
+  StyledType,
+  styled,
+} from '@workday/canvas-kit-react/common';
+import {space} from '@workday/canvas-kit-react/tokens';
 import {Popup} from '@workday/canvas-kit-react/popup';
 
 import {useModalCard, useModalModel} from './hooks';
 
 export interface ModalCardProps extends ExtractProps<typeof Popup.Card, never> {}
 
+const ResponsiveModalCard = styled(Popup.Card)<ModalCardProps & StyledType>(({theme}) => ({
+  margin: space.xl,
+  [theme.canvas.breakpoints.down('s')]: {
+    margin: space.s, // 16px all around margin on smaller screen sizes
+    padding: space.xxs, // brings total padding between edge and content to 16px
+    borderRadius: space.m, // 24px border radius on smaller devices.
+  },
+}));
+
 export const ModalCard = createSubcomponent('div')({
   displayName: 'Modal.Card',
   modelHook: useModalModel,
   elemPropsHook: useModalCard,
 })<ModalCardProps>((elemProps, Element) => {
-  return (
-    <Popup.Card as={Element} width={440} borderWidth={0} margin="xl" depth={6} {...elemProps} />
-  );
+  return <ResponsiveModalCard as={Element} width={440} borderWidth={0} depth={6} {...elemProps} />;
 });

package/modal/lib/ModalHeading.tsx

@@ -1,16 +1,28 @@
 import * as React from 'react';
 
-import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
+import {
+  createSubcomponent,
+  ExtractProps,
+  styled,
+  StyledType,
+} from '@workday/canvas-kit-react/common';
 import {Popup} from '@workday/canvas-kit-react/popup';
+import {space} from '@workday/canvas-kit-react/tokens';
 
 import {useModalHeading, useModalModel} from './hooks';
 
 export interface ModalHeadingProps extends ExtractProps<typeof Popup.Heading, never> {}
 
+const ResponsiveModalHeading = styled(Popup.Heading)<ModalHeadingProps & StyledType>(({theme}) => ({
+  [theme.canvas.breakpoints.down('s')]: {
+    marginBottom: space.zero,
+  },
+}));
+
 export const ModalHeading = createSubcomponent('h2')({
   displayName: 'Modal.Heading',
   modelHook: useModalModel,
   elemPropsHook: useModalHeading,
 })<ModalHeadingProps>((elemProps, Element) => {
-  return <Popup.Heading as={Element} {...elemProps} />;
+  return <ResponsiveModalHeading as={Element} {...elemProps} />;
 });

package/modal/lib/ModalOverlay.tsx

@@ -14,9 +14,7 @@ import styled from '@emotion/styled';
 import {Box, BoxProps} from '@workday/canvas-kit-react/layout';
 import {useModalModel} from './hooks';
 
-export interface ModalOverlayProps extends BoxProps {
-  children: React.ReactNode;
-}
+export interface ModalOverlayProps extends BoxProps {}
 
 const fadeIn = keyframes`
   from {
@@ -46,22 +44,19 @@ const Container = styled(Box)<StyledType>({
 // positioning, but seems to when using flexbox centering. This messes up Popper calculations inside
 // the Modal. The centering container forces a "center" pixel calculation by making sure the width
 // is always an even number
-const CenteringContainer = styled('div')({
+const ResponsiveContainer = styled('div')(({theme}) => ({
   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',
+  alignItems: 'center',
+  height: '100vh',
+  [theme.canvas.breakpoints.down('s')]: {
+    alignItems: 'end',
   },
-});
+}));
 
 export const ModalOverlay = createSubcomponent('div')({
   displayName: 'Modal.Overlay',
@@ -86,18 +81,19 @@ const OpenModalOverlay = createSubcomponent('div')({
   displayName: 'Modal.OpenOverlay',
   modelHook: useModalModel,
   elemPropsHook: useModalOverlay,
-})<ModalOverlayProps>((elemProps: ModalOverlayProps, Element, model) => {
+})<ModalOverlayProps>((elemProps, Element, model) => {
   const windowSize = useWindowSize();
-
   const content = (
     <Container as={Element} {...elemProps}>
-      <CenteringContainer
+      <ResponsiveContainer
         // make sure the centering container is an even number of pixels to avoid sub-pixel
         // inaccuracies due to centering
-        style={{width: windowSize.width % 2 === 1 ? 'calc(100vw - 1px)' : '100vw'}}
+        style={{
+          width: windowSize.width % 2 === 1 ? 'calc(100vw - 1px)' : '100vw',
+        }}
       >
         {elemProps.children}
-      </CenteringContainer>
+      </ResponsiveContainer>
     </Container>
   );
 

package/modal/lib/hooks/useCloseOnOverlayClick.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {PopupStack} from '@workday/canvas-kit-popup-stack';
-import {createElemPropsHook} from '@workday/canvas-kit-react/common';
+import {createElemPropsHook, useModalityType} from '@workday/canvas-kit-react/common';
 import {usePopupModel} from '@workday/canvas-kit-react/popup';
 
 /**
@@ -10,6 +10,7 @@ import {usePopupModel} from '@workday/canvas-kit-react/popup';
  * and `useCloseOnOverlayClick` is the Overlay is a child of a `stackRef` element and has a different
  */
 export const useCloseOnOverlayClick = createElemPropsHook(usePopupModel)(model => {
+  const modality = useModalityType();
   const onClick = React.useCallback(
     (event: MouseEvent) => {
       if (!model.state.stackRef.current) {
@@ -30,6 +31,7 @@ export const useCloseOnOverlayClick = createElemPropsHook(usePopupModel)(model =
 
       if (
         dialog &&
+        modality !== 'touch' &&
         elements.length &&
         elements[elements.length - 1] === model.state.stackRef.current &&
         elementsBetweenDialogAnBody.some(element => element === event.target)
@@ -37,7 +39,7 @@ export const useCloseOnOverlayClick = createElemPropsHook(usePopupModel)(model =
         model.events.hide(event);
       }
     },
-    [model.state.stackRef, model.events]
+    [model.state.stackRef, model.events, modality]
   );
 
   const visible = model.state.visibility !== 'hidden';

package/modal/lib/hooks/useModalModel.ts

@@ -7,7 +7,7 @@ import {
   useAssistiveHideSiblings,
   useDisableBodyScroll,
 } from '@workday/canvas-kit-react/popup';
-import {createModelHook} from '../../../common';
+import {createModelHook} from '@workday/canvas-kit-react/common';
 
 import {useCloseOnOverlayClick} from './useCloseOnOverlayClick';