@instructure/ui-motion 8.8.1-snapshot.3 → 8.9.0

package/src/Transition/index.tsx

@@ -27,7 +27,6 @@
 // test is breaking without importing React here
 // eslint-disable-next-line no-unused-vars
 import React, { Component } from 'react'
-import PropTypes from 'prop-types'
 
 import { ms } from '@instructure/ui-utils'
 import { testable } from '@instructure/ui-testable'
@@ -38,7 +37,9 @@ import generateStyle from './styles'
 import generateComponentTheme from './theme'
 
 import { BaseTransition } from './BaseTransition'
-import { TransitionProps } from './types'
+
+import { allowedProps, propTypes } from './props'
+import type { TransitionProps } from './props'
 
 /**
 ---
@@ -51,73 +52,8 @@ category: components/utilities
 class Transition extends Component<TransitionProps> {
   static readonly componentId = 'Transition'
 
-  static propTypes = {
-    // eslint-disable-next-line react/require-default-props
-    makeStyles: PropTypes.func,
-    // eslint-disable-next-line react/require-default-props
-    styles: PropTypes.object,
-    type: PropTypes.oneOf([
-      'fade',
-      'scale',
-      'slide-down',
-      'slide-up',
-      'slide-left',
-      'slide-right'
-    ]),
-    /**
-     * A single element to animate in and out
-     */
-    children: PropTypes.element,
-    /**
-     * Show the component; triggers the enter or exit animation
-     */
-    in: PropTypes.bool,
-    /**
-     * Unmount the component (remove it from the DOM) when it is not shown
-     */
-    unmountOnExit: PropTypes.bool,
-    /**
-     * Run the enter animation when the component mounts, if it is initially
-     * shown
-     */
-    transitionOnMount: PropTypes.bool,
-    /**
-     * Run the enter animation
-     */
-    transitionEnter: PropTypes.bool,
-    /**
-     * Run the exit animation
-     */
-    transitionExit: PropTypes.bool,
-    /**
-     * Callback fired when transitioning to the next state
-     */
-    onTransition: PropTypes.func,
-    /**
-     * Callback fired before the "entering" classes are applied
-     */
-    onEnter: PropTypes.func,
-    /**
-     * Callback fired after the "entering" classes are applied
-     */
-    onEntering: PropTypes.func,
-    /**
-     * Callback fired after the "enter" classes are applied
-     */
-    onEntered: PropTypes.func,
-    /**
-     * Callback fired before the "exiting" classes are applied
-     */
-    onExit: PropTypes.func,
-    /**
-     * Callback fired after the "exiting" classes are applied
-     */
-    onExiting: PropTypes.func,
-    /**
-     * Callback fired after the "exited" classes are applied
-     */
-    onExited: PropTypes.func
-  }
+  static allowedProps = allowedProps
+  static propTypes = propTypes
 
   static defaultProps = {
     type: 'fade',
@@ -141,14 +77,11 @@ class Transition extends Component<TransitionProps> {
   static states = BaseTransition.states
 
   componentDidMount() {
-    // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
-    this.props.makeStyles()
+    this.props.makeStyles?.()
   }
 
-  // @ts-expect-error ts-migrate(6133) FIXME: 'prevProps' is declared but its value is never rea... Remove this comment to see the full error message
-  componentDidUpdate(prevProps, prevState, snapshot) {
-    // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
-    this.props.makeStyles()
+  componentDidUpdate() {
+    this.props.makeStyles?.()
   }
 
   handleExited = () => {
@@ -174,13 +107,13 @@ class Transition extends Component<TransitionProps> {
   renderTransitionHelper = () => {
     const { styles } = this.props
 
-    return <Global styles={styles.globalStyles} />
+    return <Global styles={styles?.globalStyles} />
   }
 
   render() {
     const { type, children, styles, ...props } = this.props
 
-    const duration = ms(styles?.duration)
+    const duration = ms(styles?.duration as number)
 
     return (
       <>
@@ -189,10 +122,15 @@ class Transition extends Component<TransitionProps> {
           {...props}
           enterDelay={duration}
           exitDelay={duration}
+          //@ts-expect-error TODO:
           transitionClassName={styles?.classNames?.transitioning}
+          //@ts-expect-error TODO:
           exitedClassName={styles?.classNames?.exited}
+          //@ts-expect-error TODO:
           exitingClassName={styles?.classNames?.exiting}
+          //@ts-expect-error TODO:
           enteredClassName={styles?.classNames?.entered}
+          //@ts-expect-error TODO:
           enteringClassName={styles?.classNames?.entering}
           onEntered={this.handleEntered}
           onExited={this.handleExited}

package/src/Transition/props.ts

@@ -0,0 +1,144 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import type { PropValidators } from '@instructure/shared-types'
+import type { WithStyleProps } from '@instructure/emotion'
+
+type TransitionType =
+  | 'fade'
+  | 'scale'
+  | 'slide-down'
+  | 'slide-up'
+  | 'slide-left'
+  | 'slide-right'
+
+// TODO: use common props from BaseTransition
+type TransitionOwnProps = {
+  type?: TransitionType
+  in?: boolean
+  unmountOnExit?: boolean
+  transitionOnMount?: boolean
+  transitionEnter?: boolean
+  transitionExit?: boolean
+  onTransition?: (...args: any[]) => any
+  onEnter?: (...args: any[]) => any
+  onEntering?: (...args: any[]) => any
+  onEntered?: (...args: any[]) => any
+  onExit?: (...args: any[]) => any
+  onExiting?: (...args: any[]) => any
+  onExited?: (...args: any[]) => any
+  children?: React.ReactNode
+}
+
+type PropKeys = keyof TransitionOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type TransitionProps = TransitionOwnProps & WithStyleProps
+
+const propTypes: PropValidators<PropKeys> = {
+  type: PropTypes.oneOf([
+    'fade',
+    'scale',
+    'slide-down',
+    'slide-up',
+    'slide-left',
+    'slide-right'
+  ]),
+  /**
+   * A single element to animate in and out
+   */
+  children: PropTypes.element,
+  /**
+   * Show the component; triggers the enter or exit animation
+   */
+  in: PropTypes.bool,
+  /**
+   * Unmount the component (remove it from the DOM) when it is not shown
+   */
+  unmountOnExit: PropTypes.bool,
+  /**
+   * Run the enter animation when the component mounts, if it is initially
+   * shown
+   */
+  transitionOnMount: PropTypes.bool,
+  /**
+   * Run the enter animation
+   */
+  transitionEnter: PropTypes.bool,
+  /**
+   * Run the exit animation
+   */
+  transitionExit: PropTypes.bool,
+  /**
+   * Callback fired when transitioning to the next state
+   */
+  onTransition: PropTypes.func,
+  /**
+   * Callback fired before the "entering" classes are applied
+   */
+  onEnter: PropTypes.func,
+  /**
+   * Callback fired after the "entering" classes are applied
+   */
+  onEntering: PropTypes.func,
+  /**
+   * Callback fired after the "enter" classes are applied
+   */
+  onEntered: PropTypes.func,
+  /**
+   * Callback fired before the "exiting" classes are applied
+   */
+  onExit: PropTypes.func,
+  /**
+   * Callback fired after the "exiting" classes are applied
+   */
+  onExiting: PropTypes.func,
+  /**
+   * Callback fired after the "exited" classes are applied
+   */
+  onExited: PropTypes.func
+}
+
+const allowedProps: AllowedPropKeys = [
+  'type',
+  'children',
+  'in',
+  'unmountOnExit',
+  'transitionOnMount',
+  'transitionEnter',
+  'transitionExit',
+  'onTransition',
+  'onEnter',
+  'onEntering',
+  'onEntered',
+  'onExit',
+  'onExiting',
+  'onExited'
+]
+
+export type { TransitionProps, TransitionType }
+export { propTypes, allowedProps }

package/src/Transition/styles.ts

@@ -23,7 +23,7 @@
  */
 
 import { TransitionTheme } from '@instructure/shared-types'
-import { TransitionProps } from './types'
+import { TransitionProps } from './props'
 
 /**
  * ---

package/src/index.ts

@@ -22,4 +22,4 @@
  * SOFTWARE.
  */
 export { Transition } from './Transition'
-export type { TransitionProps, TransitionType } from './Transition/types'
+export type { TransitionProps, TransitionType } from './Transition/props'

package/types/Transition/BaseTransition/index.d.ts

@@ -0,0 +1,101 @@
+import React from 'react';
+import type { BaseTransitionProps } from './props';
+/**
+---
+private: true
+---
+  Note: this is forked from https://github.com/react-bootstrap/react-overlays/blob/master/src/Transition.js
+  so that it works with css modules. The internals are pretty different now, but it has roughly the same api.
+**/
+declare class BaseTransition extends React.Component<BaseTransitionProps> {
+    static propTypes: import("@instructure/shared-types/types/UtilityTypes").PropValidators<keyof {
+        in?: boolean | undefined;
+        unmountOnExit?: boolean | undefined;
+        transitionOnMount?: boolean | undefined;
+        transitionEnter?: boolean | undefined;
+        transitionExit?: boolean | undefined;
+        enterDelay?: number | undefined;
+        exitDelay?: number | undefined;
+        transitionClassName?: string | undefined;
+        exitedClassName?: string | undefined;
+        exitingClassName?: string | undefined;
+        enteredClassName?: string | undefined;
+        enteringClassName?: string | undefined;
+        onTransition?: ((toState: number, fromState: number) => void) | undefined;
+        onEnter?: (() => void) | undefined;
+        onEntering?: (() => void) | undefined;
+        onEntered?: (() => void) | undefined;
+        onExit?: (() => void) | undefined;
+        onExiting?: (() => void) | undefined;
+        onExited?: (() => void) | undefined;
+        children?: React.ReactNode;
+        className?: string | undefined;
+    }>;
+    static allowedProps: readonly (keyof {
+        in?: boolean | undefined;
+        unmountOnExit?: boolean | undefined;
+        transitionOnMount?: boolean | undefined;
+        transitionEnter?: boolean | undefined;
+        transitionExit?: boolean | undefined;
+        enterDelay?: number | undefined;
+        exitDelay?: number | undefined;
+        transitionClassName?: string | undefined;
+        exitedClassName?: string | undefined;
+        exitingClassName?: string | undefined;
+        enteredClassName?: string | undefined;
+        enteringClassName?: string | undefined;
+        onTransition?: ((toState: number, fromState: number) => void) | undefined;
+        onEnter?: (() => void) | undefined;
+        onEntering?: (() => void) | undefined;
+        onEntered?: (() => void) | undefined;
+        onExit?: (() => void) | undefined;
+        onExiting?: (() => void) | undefined;
+        onExited?: (() => void) | undefined;
+        children?: React.ReactNode;
+        className?: string | undefined;
+    })[];
+    static defaultProps: {
+        in: boolean;
+        component: string;
+        unmountOnExit: boolean;
+        transitionOnMount: boolean;
+        transitionEnter: boolean;
+        transitionExit: boolean;
+        enterDelay: number;
+        exitDelay: number;
+        onEnter: () => void;
+        onEntering: () => void;
+        onEntered: () => void;
+        onExit: () => void;
+        onExiting: () => void;
+        onExited: () => void;
+        onTransition: () => void;
+        children: null;
+    };
+    static states: {
+        EXITED: number;
+        EXITING: number;
+        ENTERING: number;
+        ENTERED: number;
+    };
+    _timeouts: never[];
+    state: {
+        transitioning: boolean;
+    };
+    componentDidMount(): void;
+    getSnapshotBeforeUpdate(prevProps: any, prevState: any): true | null;
+    componentDidUpdate(prevProps: any, prevState: any, cancelPrematurely: any): void;
+    componentWillUnmount(): void;
+    startTransition: (transitionIn: any, transitionOnStart: any) => void;
+    transition: (toState: any, fromState: any, transitionCallback: any, transitionDuration?: number) => void;
+    clearTransition(transitionClassName: any): void;
+    enter: (initialState: any) => void;
+    exit: (initialState: any) => void;
+    transitionEnabled(toState: any): boolean | undefined;
+    getTransitionClassName(transitionState: any): string | null | undefined;
+    renderChildren(): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    render(): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+}
+export default BaseTransition;
+export { BaseTransition };
+//# sourceMappingURL=index.d.ts.map

package/types/Transition/BaseTransition/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Transition/BaseTransition/index.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,MAAM,OAAO,CAAA;AASzB,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AASlD;;;;;;GAMG;AACH,cAAM,cAAe,SAAQ,KAAK,CAAC,SAAS,CAAC,mBAAmB,CAAC;IAC/D,MAAM,CAAC,SAAS;;;;;;;;;;;;;;;;;;;;;;OAAY;IAC5B,MAAM,CAAC,YAAY;;;;;;;;;;;;;;;;;;;;;;SAAe;IAClC,MAAM,CAAC,YAAY;;;;;;;;;;;;;;;;;MAqBlB;IAED,MAAM,CAAC,MAAM;;;;;MAAS;IAEtB,SAAS,UAAK;IAEd,KAAK;;MAEJ;IAED,iBAAiB;IAKjB,uBAAuB,CAAC,SAAS,KAAA,EAAE,SAAS,KAAA;IAS5C,kBAAkB,CAAC,SAAS,KAAA,EAAE,SAAS,KAAA,EAAE,iBAAiB,KAAA;IAc1D,oBAAoB;IASpB,eAAe,sDAOd;IAED,UAAU,+FAgDT;IAGD,eAAe,CAAC,mBAAmB,KAAA;IAoBnC,KAAK,8BAyCJ;IAGD,IAAI,8BAmCH;IAGD,iBAAiB,CAAC,OAAO,KAAA;IAgBzB,sBAAsB,CAAC,eAAe,KAAA;IAgBtC,cAAc;IAMd,MAAM;CAWP;AAED,eAAe,cAAc,CAAA;AAC7B,OAAO,EAAE,cAAc,EAAE,CAAA"}

package/types/Transition/BaseTransition/props.d.ts

@@ -0,0 +1,102 @@
+import React from 'react';
+import type { PropValidators } from '@instructure/shared-types';
+import type { WithStyleProps } from '@instructure/emotion';
+declare type BaseTransitionOwnProps = {
+    /**
+     * Show the component? Triggers the enter or exit animation.
+     */
+    in?: boolean;
+    /**
+     * Unmount the component (remove it from the DOM) when it is not shown.
+     */
+    unmountOnExit?: boolean;
+    /**
+     * Run the enter animation when the component mounts, if it is initially
+     * shown
+     */
+    transitionOnMount?: boolean;
+    /**
+     * Run the enter animation
+     */
+    transitionEnter?: boolean;
+    /**
+     * Run the exit animation
+     */
+    transitionExit?: boolean;
+    /**
+     * A Timeout for the animation, in milliseconds, to ensure that a node doesn't
+     * transition indefinately if the browser transitionEnd events are
+     * canceled or interrupted.
+     *
+     * By default this is set to a high number (5 seconds) as a failsafe. You should consider
+     * setting this to the duration of your animation (or a bit above it).
+     */
+    enterDelay?: number;
+    /**
+     * A Timeout for the animation, in milliseconds, to ensure that a node doesn't
+     * transition indefinately if the browser transitionEnd events are
+     * canceled or interrupted.
+     *
+     * By default this is set to a high number (5 seconds) as a failsafe. You should consider
+     * setting this to the duration of your animation (or a bit above it).
+     */
+    exitDelay?: number;
+    /**
+     * the base CSS class for the transition (transitions go here)
+     */
+    transitionClassName?: string;
+    /**
+     * CSS class or classes applied when the component is exited
+     */
+    exitedClassName?: string;
+    /**
+     * CSS class or classes applied while the component is exiting
+     */
+    exitingClassName?: string;
+    /**
+     * CSS class or classes applied when the component is entered
+     */
+    enteredClassName?: string;
+    /**
+     * CSS class or classes applied while the component is entering
+     */
+    enteringClassName?: string;
+    /**
+     * Callback fired when transitioning to the next state
+     */
+    onTransition?: (toState: number, fromState: number) => void;
+    /**
+     * Callback fired before the "entering" classes are applied
+     */
+    onEnter?: () => void;
+    /**
+     * Callback fired after the "entering" classes are applied
+     */
+    onEntering?: () => void;
+    /**
+     * Callback fired after the "enter" classes are applied
+     */
+    onEntered?: () => void;
+    /**
+     * Callback fired before the "exiting" classes are applied
+     */
+    onExit?: () => void;
+    /**
+     * Callback fired after the "exiting" classes are applied
+     */
+    onExiting?: () => void;
+    /**
+     * Callback fired after the "exited" classes are applied
+     */
+    onExited?: () => void;
+    children?: React.ReactNode;
+    className?: string;
+};
+declare type PropKeys = keyof BaseTransitionOwnProps;
+declare type AllowedPropKeys = Readonly<Array<PropKeys>>;
+declare type BaseTransitionProps = BaseTransitionOwnProps & WithStyleProps;
+declare const propTypes: PropValidators<PropKeys>;
+declare const allowedProps: AllowedPropKeys;
+export type { BaseTransitionProps };
+export { propTypes, allowedProps };
+//# sourceMappingURL=props.d.ts.map