Tavari/animation explaration

packages/react/src/components/Animation/Animation.tsx

@@ -8,17 +8,18 @@ import {
   childrenExist,
   StyledComponentProps,
   commonPropTypes,
-  ChildrenComponentProps,
   ShorthandFactory,
 } from '../../utils'
 import { WithAsProp, withSafeTypeForAs } from '../../types'
 
-export interface AnimationProps
-  extends StyledComponentProps,
-    ChildrenComponentProps<React.ReactChild> {
+export type AnimationChildrenProp = (props: { classes: Record<string, string> }) => React.ReactNode
+
+export interface AnimationProps extends StyledComponentProps {
   /** Additional CSS class name(s) to apply.  */
   className?: string
 
+  children: AnimationChildrenProp | React.ReactChild
+
   /** The name for the animation that should be applied, defined in the theme. */
   name?: string
 
@@ -168,9 +169,13 @@ class Animation extends UIComponent<WithAsProp<AnimationProps>, any> {
       onExiting,
     } = this.props
 
-    const child =
-      childrenExist(children) && (React.Children.only(children) as React.ReactElement<any>)
+    // const child =
+    //   childrenExist(children) && (React.Children.only(children) as React.ReactElement<any>)
 
+    const child =
+      typeof children === 'function'
+        ? (children as AnimationChildrenProp)({ classes })
+        : childrenExist(children) && (React.Children.only(children) as React.ReactElement<any>)
     return (
       <Transition
         in={visible}
@@ -185,7 +190,10 @@ class Animation extends UIComponent<WithAsProp<AnimationProps>, any> {
         onExiting={onExiting}
         onExited={onExited}
         {...unhandledProps}
-        className={cx(classes.root, child.props.className)}
+        className={cx(
+          classes.root,
+          typeof child === 'object' && (child as any).props && (child as any).props.className,
+        )}
       >
         {child}
       </Transition>

packages/react/src/components/Popup/Popup.tsx

@@ -8,6 +8,7 @@ import * as React from 'react'
 import * as PropTypes from 'prop-types'
 import * as keyboardKey from 'keyboard-key'
 import * as _ from 'lodash'
+import cx from 'classnames'
 
 import {
   applyAccessibilityKeyHandlers,
@@ -37,6 +38,7 @@ import { createShorthandFactory, ShorthandFactory } from '../../utils/factories'
 import createReferenceFromContextClick from './createReferenceFromContextClick'
 import isRightClick from '../../utils/isRightClick'
 import PortalInner from '../Portal/PortalInner'
+import Animation from '../Animation/Animation'
 
 export type PopupEvents = 'click' | 'hover' | 'focus' | 'context'
 export type RestrictedClickEvents = 'click' | 'focus'
@@ -224,11 +226,13 @@ export default class Popup extends AutoControlledComponent<PopupProps, PopupStat
 
     if (process.env.NODE_ENV !== 'production') {
       if (inline && trapFocus) {
+        // eslint-disable-next-line no-console
         console.warn(
           'Using "trapFocus" in inline popup leads to broken behavior for screen reader users.',
         )
       }
       if (!inline && autoFocus) {
+        // eslint-disable-next-line no-console
         console.warn(
           'Beware, "autoFocus" prop will just grab focus at the moment of mount and will not trap it. As user is able to TAB out from popup, better use "inline" prop to keep correct tab order.',
         )
@@ -250,13 +254,31 @@ export default class Popup extends AutoControlledComponent<PopupProps, PopupStat
   }: RenderResultConfig<PopupProps>): React.ReactNode {
     const { inline, mountNode } = this.props
     const { open } = this.state
-    const popupContent = open && this.renderPopupContent(classes.popup, rtl, accessibility)
 
     return (
       <>
         {this.renderTrigger(accessibility)}
-        {open &&
-          (inline ? popupContent : <PortalInner mountNode={mountNode}>{popupContent}</PortalInner>)}
+        <Animation
+          name={open ? 'fadeEnterSlow' : 'fadeExitSlow'}
+          visible={open}
+          timeout={500}
+          mountOnEnter
+          unmountOnExit
+        >
+          {({ classes: animationClasses }) => {
+            return inline ? (
+              this.renderPopupContent(cx(classes.popup, animationClasses.root), rtl, accessibility)
+            ) : (
+              <PortalInner mountNode={mountNode}>
+                {this.renderPopupContent(
+                  cx(classes.popup, animationClasses.root),
+                  rtl,
+                  accessibility,
+                )}
+              </PortalInner>
+            )
+          }}
+        </Animation>
       </>
     )
   }
@@ -482,7 +504,13 @@ export default class Popup extends AutoControlledComponent<PopupProps, PopupStat
         targetRef={
           this.rightClickReferenceObject || (target ? toRefObject(target) : this.triggerRef)
         }
-        children={this.renderPopperChildren.bind(this, popupPositionClasses, rtl, accessibility)}
+        children={this.renderPopperChildren.bind(
+          this,
+          popupPositionClasses,
+          rtl,
+          accessibility,
+          open,
+        )}
       />
     )
   }
@@ -491,6 +519,7 @@ export default class Popup extends AutoControlledComponent<PopupProps, PopupStat
     popupPositionClasses: string,
     rtl: boolean,
     accessibility: ReactAccessibilityBehavior,
+    open: boolean,
     { placement, scheduleUpdate }: PopperChildrenProps,
   ) => {
     const {
@@ -511,7 +540,10 @@ export default class Popup extends AutoControlledComponent<PopupProps, PopupStat
         ...(rtl && { dir: 'rtl' }),
         ...accessibility.attributes.popup,
         ...accessibility.keyHandlers.popup,
-        className: popupPositionClasses,
+        className: cx(
+          popupPositionClasses,
+          typeof content === 'object' && (content as any).className,
+        ),
         ...this.getContentProps(),
         placement,
         pointing,
@@ -523,6 +555,10 @@ export default class Popup extends AutoControlledComponent<PopupProps, PopupStat
     })
 
     return (
+      // name={open ? 'spinner' : 'fadeExitSlow'}
+      // unmountOnExit
+      // mountOnEnter
+      // name={'spinner'}
       <Unstable_NestingAuto>
         {(getRefs, nestingRef) => (
           <>

packages/react/src/themes/teams/animations/fade.ts

@@ -1,6 +1,18 @@
 import { easeEasy } from './timingFunctions'
 
 const fadeInOutAnimations = {
+  spinner: {
+    keyframe: {
+      from: {
+        transform: 'rotate(0deg)',
+      },
+      to: {
+        transform: 'rotate(360deg)',
+      },
+    },
+    duration: '2s',
+    iterationCount: '1',
+  },
   // Basic Fade In Animation -- Fast
   fadeEnterFast: {
     keyframe: {