react-transition-group/000755 001751 000177 0000000000 14726321610017157 5ustar00runner000000 000000 1472632161014726321610react-transition-group/CSSTransition.d.ts000644 001751 000177 0000003034 14726321610022454 0ustar00runner000000 000000 1472632161014726321610import { Component } from "react"; import { TransitionProps } from "./Transition"; export interface CSSTransitionClassNames { appear?: string | undefined; appearActive?: string | undefined; appearDone?: string | undefined; enter?: string | undefined; enterActive?: string | undefined; enterDone?: string | undefined; exit?: string | undefined; exitActive?: string | undefined; exitDone?: string | undefined; } export type CSSTransitionProps = TransitionProps & { /** * The animation `classNames` applied to the component as it enters or exits. * A single name can be provided and it will be suffixed for each stage: e.g. * * `classNames="fade"` applies `fade-enter`, `fade-enter-active`, * `fade-exit`, `fade-exit-active`, `fade-appear`, and `fade-appear-active`. * * Each individual classNames can also be specified independently like: * * ```js * classNames={{ * appear: 'my-appear', * appearActive: 'my-appear-active', * appearDone: 'my-appear-done', * enter: 'my-enter', * enterActive: 'my-enter-active', * enterDone: 'my-enter-done', * exit: 'my-exit', * exitActive: 'my-exit-active', * exitDone: 'my-exit-done' * }} * ``` */ classNames?: string | CSSTransitionClassNames | undefined; }; declare class CSSTransition extends Component> {} export default CSSTransition; react-transition-group/LICENSE000644 001751 000177 0000002165 14726321610020170 0ustar00runner000000 000000 1472632161014726321610 MIT License Copyright (c) Microsoft Corporation. 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 react-transition-group/README.md000644 001751 000177 0000001341 14726321610020441 0ustar00runner000000 000000 1472632164114726321610# Installation > `npm install --save @types/react-transition-group` # Summary This package contains type definitions for react-transition-group (https://github.com/reactjs/react-transition-group). # Details Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-transition-group. ### Additional Details * Last updated: Wed, 11 Dec 2024 14:36:56 GMT * Dependencies: none * Peer dependencies: [@types/react](https://npmjs.com/package/@types/react) # Credits These definitions were written by [Karol Janyst](https://github.com/LKay), [Epskampie](https://github.com/Epskampie), [Masafumi Koba](https://github.com/ybiquitous), and [Ben Grynhaus](https://github.com/bengry). react-transition-group/SwitchTransition.d.ts000644 001751 000177 0000003501 14726321610023264 0ustar00runner000000 000000 1472632161014726321610import { Component, ReactElement } from "react"; export enum modes { out = "out-in", in = "in-out", } export interface SwitchTransitionProps { /** * Transition modes. * `out-in`: Current element transitions out first, then when complete, the new element transitions in. * `in-out`: New element transitions in first, then when complete, the current element transitions out. */ mode?: "out-in" | "in-out" | undefined; /** * Any `Transition` or `CSSTransition` component */ children: ReactElement; } /** * A transition component inspired by the [vue transition modes](https://vuejs.org/v2/guide/transitions.html#Transition-Modes). * You can use it when you want to control the render between state transitions. * Based on the selected mode and the child's key which is the `Transition` or `CSSTransition` component, the `SwitchTransition` makes a consistent transition between them. * * If the `out-in` mode is selected, the `SwitchTransition` waits until the old child leaves and then inserts a new child. * If the `in-out` mode is selected, the `SwitchTransition` inserts a new child first, waits for the new child to enter and then removes the old child * * ```jsx * function App() { * const [state, setState] = useState(false); * return ( * * node.addEventListener("transitionend", done, false)} * classNames='fade' > * * * * ) * } * ``` */ declare class SwitchTransition extends Component {} export default SwitchTransition; react-transition-group/Transition.d.ts000644 001751 000177 0000020714 14726321610022107 0ustar00runner000000 000000 1472632161014726321610import { Component, ReactNode } from "react"; type RefHandler< RefElement extends undefined | HTMLElement, ImplicitRefHandler extends (node: HTMLElement, ...args: any[]) => void, ExplicitRefHandler extends (...args: any[]) => void, > = { implicit: ImplicitRefHandler; explicit: ExplicitRefHandler; }[RefElement extends undefined ? "implicit" : "explicit"]; export type EndHandler = RefHandler< RefElement, (node: HTMLElement, done: () => void) => void, (done: () => void) => void >; export type EnterHandler = RefHandler< RefElement, (node: HTMLElement, isAppearing: boolean) => void, (isAppearing: boolean) => void >; export type ExitHandler = RefHandler void, () => void>; export const UNMOUNTED = "unmounted"; export const EXITED = "exited"; export const ENTERING = "entering"; export const ENTERED = "entered"; export const EXITING = "exiting"; export interface TransitionActions { /** * Normally a component is not transitioned if it is shown when the * `` component mounts. If you want to transition on the first * mount set appear to true, and the component will transition in as soon * as the `` mounts. Note: there are no specific "appear" states. * appear only adds an additional enter transition. */ appear?: boolean | undefined; /** * Enable or disable enter transitions. */ enter?: boolean | undefined; /** * Enable or disable exit transitions. */ exit?: boolean | undefined; } interface BaseTransitionProps extends TransitionActions { /** * Show the component; triggers the enter or exit states */ in?: boolean | undefined; /** * By default the child component is mounted immediately along with the * parent Transition component. If you want to "lazy mount" the component on * the first `in={true}` you can set `mountOnEnter`. After the first enter * transition the component will stay mounted, even on "exited", unless you * also specify `unmountOnExit`. */ mountOnEnter?: boolean | undefined; /** * By default the child component stays mounted after it reaches the * 'exited' state. Set `unmountOnExit` if you'd prefer to unmount the * component after it finishes exiting. */ unmountOnExit?: boolean | undefined; /** * Callback fired before the "entering" status is applied. An extra * parameter `isAppearing` is supplied to indicate if the enter stage is * occurring on the initial mount */ onEnter?: EnterHandler | undefined; /** * Callback fired after the "entering" status is applied. An extra parameter * isAppearing is supplied to indicate if the enter stage is occurring on * the initial mount */ onEntering?: EnterHandler | undefined; /** * Callback fired after the "entered" status is applied. An extra parameter * isAppearing is supplied to indicate if the enter stage is occurring on * the initial mount */ onEntered?: EnterHandler | undefined; /** * Callback fired before the "exiting" status is applied. */ onExit?: ExitHandler | undefined; /** * Callback fired after the "exiting" status is applied. */ onExiting?: ExitHandler | undefined; /** * Callback fired after the "exited" status is applied. */ onExited?: ExitHandler | undefined; /** * A function child can be used instead of a React element. This function is * called with the current transition status ('entering', 'entered', * 'exiting', 'exited', 'unmounted'), which can be used to apply context * specific props to a component. * ```jsx * * {state => ( * * )} * * ``` */ children?: TransitionChildren | undefined; /** * A React reference to DOM element that need to transition: https://stackoverflow.com/a/51127130/4671932 * When `nodeRef` prop is used, node is not passed to callback functions (e.g. onEnter) because user already has direct access to the node. * When changing `key` prop of `Transition` in a `TransitionGroup` a new `nodeRef` need to be provided to `Transition` with changed `key` * prop (@see https://github.com/reactjs/react-transition-group/blob/master/test/Transition-test.js). */ nodeRef?: React.Ref | undefined; [prop: string]: any; } export type TransitionStatus = typeof ENTERING | typeof ENTERED | typeof EXITING | typeof EXITED | typeof UNMOUNTED; export type TransitionChildren = | ReactNode | ((status: TransitionStatus, childProps?: Record) => ReactNode); export interface TimeoutProps extends BaseTransitionProps { /** * The duration of the transition, in milliseconds. Required unless addEndListener is provided. * * You may specify a single timeout for all transitions: * ```js * timeout={500} * ``` * or individually: * ```js * timeout={{ * appear: 500, * enter: 300, * exit: 500, * }} * ``` * - appear defaults to the value of `enter` * - enter defaults to `0` * - exit defaults to `0` */ timeout: number | { appear?: number | undefined; enter?: number | undefined; exit?: number | undefined }; /** * Add a custom transition end trigger. Called with the transitioning DOM * node and a done callback. Allows for more fine grained transition end * logic. Note: Timeouts are still used as a fallback if provided. */ addEndListener?: EndHandler | undefined; } export interface EndListenerProps extends BaseTransitionProps { /** * The duration of the transition, in milliseconds. Required unless addEndListener is provided. * * You may specify a single timeout for all transitions: * ```js * timeout={500} * ``` * or individually: * ```js * timeout={{ * appear: 500, * enter: 300, * exit: 500, * }} * ``` * - appear defaults to the value of `enter` * - enter defaults to `0` * - exit defaults to `0` */ timeout?: | number | { appear?: number | undefined; enter?: number | undefined; exit?: number | undefined } | undefined; /** * Add a custom transition end trigger. Called with the transitioning DOM * node and a done callback. Allows for more fine grained transition end * logic. Note: Timeouts are still used as a fallback if provided. */ addEndListener: EndHandler; } export type TransitionProps = | TimeoutProps | EndListenerProps; /** * The Transition component lets you describe a transition from one component * state to another _over time_ with a simple declarative API. Most commonly * It's used to animate the mounting and unmounting of Component, but can also * be used to describe in-place transition states as well. * * By default the `Transition` component does not alter the behavior of the * component it renders, it only tracks "enter" and "exit" states for the components. * It's up to you to give meaning and effect to those states. For example we can * add styles to a component when it enters or exits: * * ```jsx * import Transition from 'react-transition-group/Transition'; * * const duration = 300; * * const defaultStyle = { * transition: `opacity ${duration}ms ease-in-out`, * opacity: 0, * } * * const transitionStyles = { * entering: { opacity: 1 }, * entered: { opacity: 1 }, * }; * * const Fade = ({ in: inProp }) => ( * * {(state) => ( *
* I'm A fade Transition! *
* )} * * ); * ``` */ declare class Transition extends Component> {} export default Transition; react-transition-group/TransitionGroup.d.ts000644 001751 000177 0000005462 14726321610023127 0ustar00runner000000 000000 1472632161014726321610import { Component, ElementType, JSX, ReactElement } from "react"; import { TransitionActions, TransitionProps } from "./Transition"; export interface IntrinsicTransitionGroupProps extends TransitionActions { component?: T | null | undefined; } export interface ComponentTransitionGroupProps extends TransitionActions { component: T; } export type TransitionGroupProps = | (IntrinsicTransitionGroupProps & JSX.IntrinsicElements[T]) | (ComponentTransitionGroupProps) & { children?: ReactElement> | Array>> | undefined; childFactory?(child: ReactElement): ReactElement; [prop: string]: any; }; /** * The `` component manages a set of `` components * in a list. Like with the `` component, ``, is a * state machine for managing the mounting and unmounting of components over * time. * * Consider the example below using the `Fade` CSS transition from before. * As items are removed or added to the TodoList the `in` prop is toggled * automatically by the ``. You can use _any_ `` * component in a ``, not just css. * * ```jsx * import TransitionGroup from 'react-transition-group/TransitionGroup'; * * class TodoList extends React.Component { * constructor(props) { * super(props) * this.state = {items: ['hello', 'world', 'click', 'me']} * } * handleAdd() { * const newItems = this.state.items.concat([ * prompt('Enter some text') * ]); * this.setState({ items: newItems }); * } * handleRemove(i) { * let newItems = this.state.items.slice(); * newItems.splice(i, 1); * this.setState({items: newItems}); * } * render() { * return ( *
* * * {this.state.items.map((item, i) => ( * *
* {item}{' '} * *
* * ))} * *
* ); * } * } * ``` * * Note that `` does not define any animation behavior! * Exactly _how_ a list item animates is up to the individual `` * components. This means you can mix and match animations across different * list items. */ declare class TransitionGroup extends Component {} export default TransitionGroup; react-transition-group/config.d.ts000644 001751 000177 0000000151 14726321610021213 0ustar00runner000000 000000 1472632161014726321610export interface Config { disabled: boolean; } declare const config: Config; export default config; react-transition-group/index.d.ts000644 001751 000177 0000000464 14726321610021064 0ustar00runner000000 000000 1472632161014726321610export { default as config } from "./config"; export { default as CSSTransition } from "./CSSTransition"; export { default as SwitchTransition } from "./SwitchTransition"; export { default as Transition, TransitionStatus } from "./Transition"; export { default as TransitionGroup } from "./TransitionGroup"; react-transition-group/package.json000644 001751 000177 0000002500 14726321610021446 0ustar00runner000000 000000 1472632164114726321610{ "name": "@types/react-transition-group", "version": "4.4.12", "description": "TypeScript definitions for react-transition-group", "homepage": "https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-transition-group", "license": "MIT", "contributors": [ { "name": "Karol Janyst", "githubUsername": "LKay", "url": "https://github.com/LKay" }, { "name": "Epskampie", "githubUsername": "Epskampie", "url": "https://github.com/Epskampie" }, { "name": "Masafumi Koba", "githubUsername": "ybiquitous", "url": "https://github.com/ybiquitous" }, { "name": "Ben Grynhaus", "githubUsername": "bengry", "url": "https://github.com/bengry" } ], "main": "", "types": "index.d.ts", "repository": { "type": "git", "url": "https://github.com/DefinitelyTyped/DefinitelyTyped.git", "directory": "types/react-transition-group" }, "scripts": {}, "dependencies": {}, "peerDependencies": { "@types/react": "*" }, "typesPublisherContentHash": "28d8cc9bfe6b15e0291a07b916505b49e5cf57cfd1f331db1d9ad49fd36bfd41", "typeScriptVersion": "5.0" }