@workday/canvas-kit-react 11.0.0-alpha.664-next.0 → 11.0.0-alpha.667-next.0

package/loading-dots/lib/LoadingDots.tsx

@@ -1,73 +1,74 @@
 import * as React from 'react';
-import {keyframes} from '@emotion/react';
-import {canvas, borderRadius} from '@workday/canvas-kit-react/tokens';
-import {styled} from '@workday/canvas-kit-react/common';
+import {base, system} from '@workday/canvas-tokens-web';
+import {createComponent} from '@workday/canvas-kit-react/common';
+import {createStyles, handleCsProp, keyframes, CSProps} from '@workday/canvas-kit-styling';
+
+/**
+ * Duration of the sparkle dots loading (in ms).
+ */
+const ANIMATION_DURATION_MS = '1400';
 
 /**
  * Keyframe for the dots loading animation.
  */
-const keyframesLoading = keyframes`
-  0%,
-  80%,
-  100% {
-    transform: scale(0);
-}
-  40% {
-    transform: scale(1);
-}`;
+const keyframesLoading = keyframes({
+  '0%, 80%, 100%': {
+    transform: 'scale(0)',
+  },
+  '40%': {
+    transform: 'scale(1)',
+  },
+});
 
-type LoadingDotProps = {
-  /**
-   * The animation delay of the LoadingDots (in ms).
-   */
-  animationDelay: number;
-};
+const loadingDotStyles = createStyles({
+  backgroundColor: base.soap400,
+  width: system.space.x4,
+  height: system.space.x4,
+  fontSize: system.space.zero,
+  borderRadius: system.shape.round,
+  transform: 'scale(0)',
+  display: 'inline-block',
+  animationName: keyframesLoading,
+  animationDuration: `${ANIMATION_DURATION_MS}ms`,
+  animationIterationCount: 'infinite',
+  animationTimingFunction: 'ease-in-out',
+  animationFillMode: 'both',
+  '&:nth-child(1)': {
+    animationDelay: '0ms',
+  },
+  '&:nth-child(2)': {
+    animationDelay: `calc(${ANIMATION_DURATION_MS}ms * (4/35))`, // 160
+  },
+  '&:nth-child(3)': {
+    animationDelay: `calc(${ANIMATION_DURATION_MS}ms * (8/35))`, // 320
+  },
+});
 
 /**
  * The actual loading dot div.
  */
-const LoadingAnimationDot = styled('div')<LoadingDotProps>(
-  {
-    backgroundColor: canvas.colors.soap400,
-    width: canvas.space.s,
-    height: canvas.space.s,
-    fontSize: '0px',
-    borderRadius: borderRadius.circle,
-    transform: 'scale(0)',
-    display: 'inline-block',
-    marginRight: canvas.space.xxs,
-    animationName: keyframesLoading,
-    animationDuration: '1400ms',
-    animationIterationCount: 'infinite',
-    animationTimingFunction: 'ease-in-out',
-    animationFillMode: 'both',
-    '&:last-child': {
-      marginRight: 0,
-    },
-  },
-  ({animationDelay}) => ({
-    animationDelay: animationDelay + 'ms',
-  })
-);
+const LoadingAnimationDot = () => <div className={`${loadingDotStyles}`}></div>;
 
 /**
  * A simple container for the loading dots.
  */
-const Container = styled('div')({
-  display: 'inline-block',
+const containerStyles = createStyles({
+  display: 'inline-flex',
+  gap: system.space.x2,
 });
 
 /**
  * A simple component that displays three horizontal dots, to be used when some data is loading.
  */
-export function LoadingDots(props: React.HTMLAttributes<HTMLDivElement>) {
-  const {...elemProps} = props;
-
-  return (
-    <Container {...elemProps}>
-      <LoadingAnimationDot animationDelay={0} />
-      <LoadingAnimationDot animationDelay={160} />
-      <LoadingAnimationDot animationDelay={320} />
-    </Container>
-  );
-}
+export const LoadingDots = createComponent('div')({
+  displayName: 'LoadingDots',
+  Component: (elemProps: CSProps, ref, Element) => {
+    return (
+      <Element ref={ref} {...handleCsProp(elemProps, containerStyles)}>
+        <LoadingAnimationDot />
+        <LoadingAnimationDot />
+        <LoadingAnimationDot />
+      </Element>
+    );
+  },
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "11.0.0-alpha.664-next.0",
+  "version": "11.0.0-alpha.667-next.0",
   "description": "The parent module that contains all Workday Canvas Kit React components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -50,8 +50,8 @@
     "@emotion/styled": "^11.6.0",
     "@popperjs/core": "^2.5.4",
     "@workday/canvas-colors-web": "^2.0.0",
-    "@workday/canvas-kit-popup-stack": "^11.0.0-alpha.664-next.0",
-    "@workday/canvas-kit-styling": "^10.3.0",
+    "@workday/canvas-kit-popup-stack": "^11.0.0-alpha.667-next.0",
+    "@workday/canvas-kit-styling": "^10.3.1",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^1.0.2",
     "@workday/design-assets-types": "^0.2.8",
@@ -69,5 +69,5 @@
     "@workday/canvas-accent-icons-web": "^3.0.0",
     "@workday/canvas-applet-icons-web": "^2.0.0"
   },
-  "gitHead": "518377818f85c915b6199f66d73fd7e5e38ce7fa"
+  "gitHead": "345331557dba888d9b12c56470a5e015162a6a0e"
 }

package/popup/lib/hooks/useCloseOnOutsideClick.ts

@@ -27,6 +27,8 @@ export const useCloseOnOutsideClick = createElemPropsHook(usePopupModel)(model =
       if (
         elements.length &&
         elements[elements.length - 1] === model.state.stackRef.current &&
+        // Only consider event targets that are currently in the DOM as valid
+        document.contains(event.target as HTMLElement) &&
         // Use `PopupStack.contains` instead of `ref.current.contains` so that the application can
         // decide if clicking the target should toggle the popup rather than it toggling implicitly
         // because the target is outside `ref.current`