react-transition-state 1.1.3 → 1.2.0-alpha.1

package/README.md

@@ -5,14 +5,14 @@
 [![NPM](https://img.shields.io/bundlephobia/minzip/react-transition-state)](https://bundlephobia.com/package/react-transition-state)
 [![Known Vulnerabilities](https://snyk.io/test/github/szhsin/react-transition-state/badge.svg)](https://snyk.io/test/github/szhsin/react-transition-state)
 
-## Why?
+## Features
 
 Inspired by the [React Transition Group](https://github.com/reactjs/react-transition-group), this tiny library helps you easily perform animations/transitions of your React component in a [fully controlled](https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#common-bugs-when-using-derived-state) manner, using a Hook API.
 
 - 🍭 Working with both CSS animation and transition.
 - 🔄 Moving React components in and out of DOM seamlessly.
 - 🚫 Using no [derived state](https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html).
-- 🚀 Efficient: each state transition results in at most one extract render for your component.
+- 🚀 Efficient: each state transition results in at most one extract render for consuming component.
 - 🤏 Tiny: [~0.7KB](https://bundlephobia.com/package/react-transition-state) and no dependencies, ideal for both component libraries and applications.
 
 🤔 Not convinced? [See a comparison with _React Transition Group_](#comparisons-with-react-transition-group)
@@ -75,14 +75,13 @@ export default Example;
 }
 ```
 
-**[Edit on CodeSandbox](https://codesandbox.io/s/react-transition-basic-100io)**
+**[Edit on CodeSandbox](https://codesandbox.io/s/react-transition-state-100io)**
 
 <br/>
 
 ### styled-components example
 
 ```jsx
-import React from 'react';
 import styled from 'styled-components';
 import { useTransition } from 'react-transition-state';
 
@@ -132,18 +131,33 @@ export default StyledExample;
 
 <br/>
 
-## Comparisons with _React Transition Group_
+### Perform appearing transition when page loads or a component mounts
+
+You can toggle on transition with the `useEffect` hook.
+
+```js
+useEffect(() => {
+  toggle(true);
+}, [toggle]);
+```
 
-|                                  | React Transition Group                                                                                                                                                                              | This library                                                                                                                                                                                                                                          |
-| -------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Use derived state                | _Yes_ – use an `in` prop to trigger changes in a derived transition state                                                                                                                           | _No_ – there is only a single state which is triggered by a toggle function                                                                                                                                                                           |
-| Controlled                       | _No_ – <br/>Transition state is managed internally.<br/>Resort to callback events to read the internal state.                                                                                       | _Yes_ – <br/>Transition state is _lifted_ up into the consuming component.<br/>You have direct access to the transition state.                                                                                                                        |
-| DOM updates                      | _Imperative_ – [commit changes into DOM imperatively](https://github.com/reactjs/react-transition-group/blob/5aa3fd2d7e3354a7e42505d55af605ff44f74e2e/src/CSSTransition.js#L10) to update `classes` | _Declarative_ – you declare [what the `classes` look like](https://github.com/szhsin/react-transition-state/blob/2ab44c12ac5d5283ec3bb997bfc1d5ef6dffb0ce/example/src/components/BasicExample.js#L31) and DOM updates are taken care of by `ReactDOM` |
-| Working with _styled-components_ | Your code looks like – <br/>`&.box-exit-active { opacity: 0; }`<br/>`&.box-enter-active { opacity: 1; }`                                                                                            | Your code looks like – <br/>`opacity: ${({ state }) => (state === 'exiting' ? '0' : '1')};` <br/> It's the way how you normally use the _styled-components_                                                                                           |
-| Bundle size                      | [![NPM](https://img.shields.io/bundlephobia/minzip/react-transition-group)](https://bundlephobia.com/package/react-transition-group)                                                                | ✅ [![NPM](https://img.shields.io/bundlephobia/minzip/react-transition-state)](https://bundlephobia.com/package/react-transition-state)                                                                                                               |
-| Dependency count                 | [![NPM](https://badgen.net/bundlephobia/dependency-count/react-transition-group)](https://www.npmjs.com/package/react-transition-group?activeTab=dependencies)                                      | ✅ [![NPM](https://badgen.net/bundlephobia/dependency-count/react-transition-state)](https://www.npmjs.com/package/react-transition-state?activeTab=dependencies)                                                                                     |
+**[Edit on CodeSandbox](https://codesandbox.io/s/react-transition-appear-9kkss3)**
+
+<br/>
+
+## Comparisons with _React Transition Group_
 
-This [CodeSandbox example](https://codesandbox.io/s/react-transition-state-vs-group-p45iy) demonstrates how the same transition can be implemented in a more simplified, declarative, and controllable manner than _React Transition Group_.
+|                                               | React Transition Group                                                                                                                                                                              | This library                                                                                                                                                                                                                                          |
+| --------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Use derived state                             | _Yes_ – use an `in` prop to trigger changes in a derived transition state                                                                                                                           | _No_ – there is only a single state which is triggered by a toggle function                                                                                                                                                                           |
+| Controlled                                    | _No_ – <br/>Transition state is managed internally.<br/>Resort to callback events to read the internal state.                                                                                       | _Yes_ – <br/>Transition state is _lifted_ up into the consuming component.<br/>You have direct access to the transition state.                                                                                                                        |
+| DOM updates                                   | _Imperative_ – [commit changes into DOM imperatively](https://github.com/reactjs/react-transition-group/blob/5aa3fd2d7e3354a7e42505d55af605ff44f74e2e/src/CSSTransition.js#L10) to update `classes` | _Declarative_ – you declare [what the `classes` look like](https://github.com/szhsin/react-transition-state/blob/2ab44c12ac5d5283ec3bb997bfc1d5ef6dffb0ce/example/src/components/BasicExample.js#L31) and DOM updates are taken care of by `ReactDOM` |
+| Render something in response to state updates | _Resort to side effects_ – rendering based on [state update events](https://codesandbox.io/s/react-transition-state-vs-group-p45iy?file=/src/App.js:1007-1188)                                      | _Pure_ – rendering based on [transition state](https://codesandbox.io/s/react-transition-state-vs-group-p45iy?file=/src/App.js:2140-2325)                                                                                                             |
+| Working with _styled-components_              | Your code looks like – <br/>`&.box-exit-active { opacity: 0; }`<br/>`&.box-enter-active { opacity: 1; }`                                                                                            | Your code looks like – <br/>`opacity: ${({ state }) => (state === 'exiting' ? '0' : '1')};` <br/> It's the way how you normally use the _styled-components_                                                                                           |
+| Bundle size                                   | [![NPM](https://img.shields.io/bundlephobia/minzip/react-transition-group)](https://bundlephobia.com/package/react-transition-group)                                                                | ✅ [![NPM](https://img.shields.io/bundlephobia/minzip/react-transition-state)](https://bundlephobia.com/package/react-transition-state)                                                                                                               |
+| Dependency count                              | [![NPM](https://badgen.net/bundlephobia/dependency-count/react-transition-group)](https://www.npmjs.com/package/react-transition-group?activeTab=dependencies)                                      | ✅ [![NPM](https://badgen.net/bundlephobia/dependency-count/react-transition-state)](https://www.npmjs.com/package/react-transition-state?activeTab=dependencies)                                                                                     |
+
+This [CodeSandbox example](https://codesandbox.io/s/react-transition-state-vs-group-p45iy) demonstrates how the same transition can be implemented in a simpler, more declarative, and controllable manner than _React Transition Group_.
 
 <br/>
 

package/dist/cjs/index.js

@@ -0,0 +1,267 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('react');
+
+var PRE_ENTER = 0;
+var ENTERING = 1;
+var ENTERED = 2;
+var PRE_EXIT = 3;
+var EXITING = 4;
+var EXITED = 5;
+var UNMOUNTED = 6;
+var STATES = ['preEnter', 'entering', 'entered', 'preExit', 'exiting', 'exited', 'unmounted'];
+var startOrEnd = function startOrEnd(unmounted) {
+  return unmounted ? UNMOUNTED : EXITED;
+};
+var getEndState = function getEndState(state, unmountOnExit) {
+  switch (state) {
+    case ENTERING:
+    case PRE_ENTER:
+      return ENTERED;
+
+    case EXITING:
+    case PRE_EXIT:
+      return startOrEnd(unmountOnExit);
+  }
+};
+var getTimeout = function getTimeout(timeout) {
+  return typeof timeout === 'object' ? [timeout.enter, timeout.exit] : [timeout, timeout];
+};
+
+var updateState$1 = function updateState(state, setState, latestState, timeoutId, onChange) {
+  clearTimeout(timeoutId.current);
+  setState(state);
+  latestState.current = state;
+  onChange && onChange({
+    state: STATES[state]
+  });
+};
+
+var useTransition = function useTransition(_temp) {
+  var _ref = _temp === void 0 ? {} : _temp,
+      _ref$enter = _ref.enter,
+      enter = _ref$enter === void 0 ? true : _ref$enter,
+      _ref$exit = _ref.exit,
+      exit = _ref$exit === void 0 ? true : _ref$exit,
+      preEnter = _ref.preEnter,
+      preExit = _ref.preExit,
+      timeout = _ref.timeout,
+      initialEntered = _ref.initialEntered,
+      mountOnEnter = _ref.mountOnEnter,
+      unmountOnExit = _ref.unmountOnExit,
+      onChange = _ref.onChange;
+
+  var _useState = react.useState(initialEntered ? ENTERED : startOrEnd(mountOnEnter)),
+      state = _useState[0],
+      setState = _useState[1];
+
+  var latestState = react.useRef(state);
+  var timeoutId = react.useRef();
+
+  var _getTimeout = getTimeout(timeout),
+      enterTimeout = _getTimeout[0],
+      exitTimeout = _getTimeout[1];
+
+  var endTransition = react.useCallback(function () {
+    var newState = getEndState(latestState.current, unmountOnExit);
+    newState && updateState$1(newState, setState, latestState, timeoutId, onChange);
+  }, [onChange, unmountOnExit]);
+  var toggle = react.useCallback(function (toEnter) {
+    var transitState = function transitState(newState) {
+      updateState$1(newState, setState, latestState, timeoutId, onChange);
+
+      switch (newState) {
+        case ENTERING:
+          if (enterTimeout >= 0) timeoutId.current = setTimeout(endTransition, enterTimeout);
+          break;
+
+        case EXITING:
+          if (exitTimeout >= 0) timeoutId.current = setTimeout(endTransition, exitTimeout);
+          break;
+
+        case PRE_ENTER:
+        case PRE_EXIT:
+          timeoutId.current = setTimeout(function () {
+            return transitState(newState + 1);
+          }, 0);
+          break;
+      }
+    };
+
+    var enterStage = latestState.current <= ENTERED;
+    if (typeof toEnter !== 'boolean') toEnter = !enterStage;
+
+    if (toEnter) {
+      if (!enterStage) {
+        transitState(enter ? preEnter ? PRE_ENTER : ENTERING : ENTERED);
+      }
+    } else {
+      if (enterStage) {
+        transitState(exit ? preExit ? PRE_EXIT : EXITING : startOrEnd(unmountOnExit));
+      }
+    }
+  }, [endTransition, onChange, enter, exit, preEnter, preExit, enterTimeout, exitTimeout, unmountOnExit]);
+  react.useEffect(function () {
+    return function () {
+      return clearTimeout(timeoutId.current);
+    };
+  }, []);
+  return [STATES[state], toggle, endTransition];
+};
+
+var initialStateMap = new Map();
+var initialConfigMap = new Map();
+
+var updateState = function updateState(_ref) {
+  var item = _ref.item,
+      _state = _ref.newState,
+      setStateMap = _ref.setStateMap,
+      latestStateMap = _ref.latestStateMap,
+      timeoutId = _ref.timeoutId,
+      onChange = _ref.onChange;
+  clearTimeout(timeoutId);
+  var state = {
+    state: STATES[_state],
+    _state: _state
+  };
+  var stateMap = new Map(latestStateMap.current);
+  stateMap.set(item, state);
+  setStateMap(stateMap);
+  latestStateMap.current = stateMap;
+  onChange && onChange(item, state);
+};
+
+var useTransitionMap = function useTransitionMap() {
+  var _useState = react.useState(initialStateMap),
+      stateMap = _useState[0],
+      setStateMap = _useState[1];
+
+  var latestStateMap = react.useRef(stateMap);
+  var configMap = react.useRef(initialConfigMap);
+  var addItem = react.useCallback(function (item, config) {
+    var initialEntered = config.initialEntered,
+        mountOnEnter = config.mountOnEnter;
+    var newState = initialEntered ? ENTERED : startOrEnd(mountOnEnter);
+    updateState({
+      item: item,
+      newState: newState,
+      setStateMap: setStateMap,
+      latestStateMap: latestStateMap
+    });
+    configMap.current.set(item, config);
+  }, []);
+  var removeItem = react.useCallback(function (item) {
+    var newStateMap = new Map(latestStateMap.current);
+
+    if (newStateMap.delete(item)) {
+      setStateMap(newStateMap);
+      latestStateMap.current = newStateMap;
+      configMap.current.delete(item);
+    }
+  }, []);
+  var endTransition = react.useCallback(function (item) {
+    var stateObj = latestStateMap.current.get(item);
+
+    if (!stateObj) {
+      process.env.NODE_ENV !== 'production' && console.error("[React-Transition-State] invalid item key for " + item);
+      return;
+    }
+
+    var _configMap$current$ge = configMap.current.get(item),
+        timeoutId = _configMap$current$ge.timeoutId,
+        onChange = _configMap$current$ge.onChange,
+        unmountOnExit = _configMap$current$ge.unmountOnExit;
+
+    var newState = getEndState(stateObj._state, unmountOnExit);
+    newState && updateState({
+      item: item,
+      newState: newState,
+      setStateMap: setStateMap,
+      latestStateMap: latestStateMap,
+      timeoutId: timeoutId,
+      onChange: onChange
+    });
+  }, []);
+  var toggle = react.useCallback(function (item, toEnter) {
+    var stateObj = latestStateMap.current.get(item);
+
+    if (!stateObj) {
+      process.env.NODE_ENV !== 'production' && console.error("[React-Transition-State] invalid item key for " + item);
+      return;
+    }
+
+    var config = configMap.current.get(item);
+    var _config$enter = config.enter,
+        enter = _config$enter === void 0 ? true : _config$enter,
+        _config$exit = config.exit,
+        exit = _config$exit === void 0 ? true : _config$exit,
+        preEnter = config.preEnter,
+        preExit = config.preExit,
+        timeout = config.timeout,
+        unmountOnExit = config.unmountOnExit,
+        onChange = config.onChange,
+        timeoutId = config.timeoutId;
+
+    var transitState = function transitState(newState) {
+      updateState({
+        item: item,
+        newState: newState,
+        setStateMap: setStateMap,
+        latestStateMap: latestStateMap,
+        timeoutId: timeoutId,
+        onChange: onChange
+      });
+
+      var _getTimeout = getTimeout(timeout),
+          enterTimeout = _getTimeout[0],
+          exitTimeout = _getTimeout[1];
+
+      switch (newState) {
+        case ENTERING:
+          if (enterTimeout >= 0) config.timeoutId = setTimeout(function () {
+            return endTransition(item);
+          }, enterTimeout);
+          break;
+
+        case EXITING:
+          if (exitTimeout >= 0) config.timeoutId = setTimeout(function () {
+            return endTransition(item);
+          }, exitTimeout);
+          break;
+
+        case PRE_ENTER:
+        case PRE_EXIT:
+          config.timeoutId = setTimeout(function () {
+            return transitState(newState + 1);
+          }, 0);
+          break;
+      }
+    };
+
+    var enterStage = stateObj._state <= ENTERED;
+    if (typeof toEnter !== 'boolean') toEnter = !enterStage;
+
+    if (toEnter) {
+      if (!enterStage) {
+        transitState(enter ? preEnter ? PRE_ENTER : ENTERING : ENTERED);
+      }
+    } else {
+      if (enterStage) {
+        transitState(exit ? preExit ? PRE_EXIT : EXITING : startOrEnd(unmountOnExit));
+      }
+    }
+  }, [endTransition]);
+  return {
+    stateMap: stateMap,
+    toggle: toggle,
+    endTransition: endTransition,
+    addItem: addItem,
+    removeItem: removeItem
+  };
+};
+
+exports["default"] = useTransition;
+exports.useTransition = useTransition;
+exports.useTransitionMap = useTransitionMap;

package/dist/{index.es.js → es/hooks/useTransition.js}

@@ -1,17 +1,5 @@
 import { useState, useRef, useCallback, useEffect } from 'react';
-
-var PRE_ENTER = 0;
-var ENTERING = 1;
-var ENTERED = 2;
-var PRE_EXIT = 3;
-var EXITING = 4;
-var EXITED = 5;
-var UNMOUNTED = 6;
-var STATES = ['preEnter', 'entering', 'entered', 'preExit', 'exiting', 'exited', 'unmounted'];
-
-var startOrEnd = function startOrEnd(unmounted) {
-  return unmounted ? UNMOUNTED : EXITED;
-};
+import { ENTERED, startOrEnd, getTimeout, getEndState, PRE_EXIT, EXITING, STATES, PRE_ENTER, ENTERING } from './utils.js';
 
 var updateState = function updateState(state, setState, latestState, timeoutId, onChange) {
   clearTimeout(timeoutId.current);
@@ -42,33 +30,14 @@ var useTransition = function useTransition(_temp) {
 
   var latestState = useRef(state);
   var timeoutId = useRef();
-  var enterTimeout, exitTimeout;
 
-  if (typeof timeout === 'object') {
-    enterTimeout = timeout.enter;
-    exitTimeout = timeout.exit;
-  } else {
-    enterTimeout = exitTimeout = timeout;
-  }
+  var _getTimeout = getTimeout(timeout),
+      enterTimeout = _getTimeout[0],
+      exitTimeout = _getTimeout[1];
 
   var endTransition = useCallback(function () {
-    var newState;
-
-    switch (latestState.current) {
-      case ENTERING:
-      case PRE_ENTER:
-        newState = ENTERED;
-        break;
-
-      case EXITING:
-      case PRE_EXIT:
-        newState = startOrEnd(unmountOnExit);
-        break;
-    }
-
-    if (newState !== undefined) {
-      updateState(newState, setState, latestState, timeoutId, onChange);
-    }
+    var newState = getEndState(latestState.current, unmountOnExit);
+    newState && updateState(newState, setState, latestState, timeoutId, onChange);
   }, [onChange, unmountOnExit]);
   var toggle = useCallback(function (toEnter) {
     var transitState = function transitState(newState) {
@@ -113,4 +82,4 @@ var useTransition = function useTransition(_temp) {
   return [STATES[state], toggle, endTransition];
 };
 
-export { useTransition as default, useTransition };
+export { useTransition };

package/dist/es/hooks/useTransitionMap.js

@@ -0,0 +1,155 @@
+import { useState, useRef, useCallback } from 'react';
+import { ENTERED, startOrEnd, getEndState, PRE_EXIT, EXITING, PRE_ENTER, ENTERING, STATES, getTimeout } from './utils.js';
+
+var initialStateMap = new Map();
+var initialConfigMap = new Map();
+
+var updateState = function updateState(_ref) {
+  var item = _ref.item,
+      _state = _ref.newState,
+      setStateMap = _ref.setStateMap,
+      latestStateMap = _ref.latestStateMap,
+      timeoutId = _ref.timeoutId,
+      onChange = _ref.onChange;
+  clearTimeout(timeoutId);
+  var state = {
+    state: STATES[_state],
+    _state: _state
+  };
+  var stateMap = new Map(latestStateMap.current);
+  stateMap.set(item, state);
+  setStateMap(stateMap);
+  latestStateMap.current = stateMap;
+  onChange && onChange(item, state);
+};
+
+var useTransitionMap = function useTransitionMap() {
+  var _useState = useState(initialStateMap),
+      stateMap = _useState[0],
+      setStateMap = _useState[1];
+
+  var latestStateMap = useRef(stateMap);
+  var configMap = useRef(initialConfigMap);
+  var addItem = useCallback(function (item, config) {
+    var initialEntered = config.initialEntered,
+        mountOnEnter = config.mountOnEnter;
+    var newState = initialEntered ? ENTERED : startOrEnd(mountOnEnter);
+    updateState({
+      item: item,
+      newState: newState,
+      setStateMap: setStateMap,
+      latestStateMap: latestStateMap
+    });
+    configMap.current.set(item, config);
+  }, []);
+  var removeItem = useCallback(function (item) {
+    var newStateMap = new Map(latestStateMap.current);
+
+    if (newStateMap.delete(item)) {
+      setStateMap(newStateMap);
+      latestStateMap.current = newStateMap;
+      configMap.current.delete(item);
+    }
+  }, []);
+  var endTransition = useCallback(function (item) {
+    var stateObj = latestStateMap.current.get(item);
+
+    if (!stateObj) {
+      process.env.NODE_ENV !== 'production' && console.error("[React-Transition-State] invalid item key for " + item);
+      return;
+    }
+
+    var _configMap$current$ge = configMap.current.get(item),
+        timeoutId = _configMap$current$ge.timeoutId,
+        onChange = _configMap$current$ge.onChange,
+        unmountOnExit = _configMap$current$ge.unmountOnExit;
+
+    var newState = getEndState(stateObj._state, unmountOnExit);
+    newState && updateState({
+      item: item,
+      newState: newState,
+      setStateMap: setStateMap,
+      latestStateMap: latestStateMap,
+      timeoutId: timeoutId,
+      onChange: onChange
+    });
+  }, []);
+  var toggle = useCallback(function (item, toEnter) {
+    var stateObj = latestStateMap.current.get(item);
+
+    if (!stateObj) {
+      process.env.NODE_ENV !== 'production' && console.error("[React-Transition-State] invalid item key for " + item);
+      return;
+    }
+
+    var config = configMap.current.get(item);
+    var _config$enter = config.enter,
+        enter = _config$enter === void 0 ? true : _config$enter,
+        _config$exit = config.exit,
+        exit = _config$exit === void 0 ? true : _config$exit,
+        preEnter = config.preEnter,
+        preExit = config.preExit,
+        timeout = config.timeout,
+        unmountOnExit = config.unmountOnExit,
+        onChange = config.onChange,
+        timeoutId = config.timeoutId;
+
+    var transitState = function transitState(newState) {
+      updateState({
+        item: item,
+        newState: newState,
+        setStateMap: setStateMap,
+        latestStateMap: latestStateMap,
+        timeoutId: timeoutId,
+        onChange: onChange
+      });
+
+      var _getTimeout = getTimeout(timeout),
+          enterTimeout = _getTimeout[0],
+          exitTimeout = _getTimeout[1];
+
+      switch (newState) {
+        case ENTERING:
+          if (enterTimeout >= 0) config.timeoutId = setTimeout(function () {
+            return endTransition(item);
+          }, enterTimeout);
+          break;
+
+        case EXITING:
+          if (exitTimeout >= 0) config.timeoutId = setTimeout(function () {
+            return endTransition(item);
+          }, exitTimeout);
+          break;
+
+        case PRE_ENTER:
+        case PRE_EXIT:
+          config.timeoutId = setTimeout(function () {
+            return transitState(newState + 1);
+          }, 0);
+          break;
+      }
+    };
+
+    var enterStage = stateObj._state <= ENTERED;
+    if (typeof toEnter !== 'boolean') toEnter = !enterStage;
+
+    if (toEnter) {
+      if (!enterStage) {
+        transitState(enter ? preEnter ? PRE_ENTER : ENTERING : ENTERED);
+      }
+    } else {
+      if (enterStage) {
+        transitState(exit ? preExit ? PRE_EXIT : EXITING : startOrEnd(unmountOnExit));
+      }
+    }
+  }, [endTransition]);
+  return {
+    stateMap: stateMap,
+    toggle: toggle,
+    endTransition: endTransition,
+    addItem: addItem,
+    removeItem: removeItem
+  };
+};
+
+export { useTransitionMap };

package/dist/es/hooks/utils.js

@@ -0,0 +1,27 @@
+var PRE_ENTER = 0;
+var ENTERING = 1;
+var ENTERED = 2;
+var PRE_EXIT = 3;
+var EXITING = 4;
+var EXITED = 5;
+var UNMOUNTED = 6;
+var STATES = ['preEnter', 'entering', 'entered', 'preExit', 'exiting', 'exited', 'unmounted'];
+var startOrEnd = function startOrEnd(unmounted) {
+  return unmounted ? UNMOUNTED : EXITED;
+};
+var getEndState = function getEndState(state, unmountOnExit) {
+  switch (state) {
+    case ENTERING:
+    case PRE_ENTER:
+      return ENTERED;
+
+    case EXITING:
+    case PRE_EXIT:
+      return startOrEnd(unmountOnExit);
+  }
+};
+var getTimeout = function getTimeout(timeout) {
+  return typeof timeout === 'object' ? [timeout.enter, timeout.exit] : [timeout, timeout];
+};
+
+export { ENTERED, ENTERING, EXITED, EXITING, PRE_ENTER, PRE_EXIT, STATES, UNMOUNTED, getEndState, getTimeout, startOrEnd };

package/dist/es/index.js

@@ -0,0 +1,2 @@
+export { useTransition as default, useTransition } from './hooks/useTransition.js';
+export { useTransitionMap } from './hooks/useTransitionMap.js';

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "react-transition-state",
-  "version": "1.1.3",
+  "version": "1.2.0-alpha.1",
   "description": "Zero dependency, 0.7KB react-transition-group alternative.",
   "author": "Zheng Song",
   "license": "MIT",
   "repository": "szhsin/react-transition-state",
   "homepage": "https://szhsin.github.io/react-transition-state/",
-  "main": "dist/index.js",
-  "module": "dist/index.es.js",
+  "main": "dist/cjs/index.js",
+  "module": "dist/es/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": false,
   "files": [
@@ -39,24 +39,24 @@
     "react-dom": ">=16.8.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.16.0",
-    "@babel/preset-env": "^7.16.4",
-    "@rollup/plugin-babel": "^5.3.0",
+    "@babel/core": "^7.17.9",
+    "@babel/preset-env": "^7.16.11",
+    "@rollup/plugin-babel": "^5.3.1",
     "@testing-library/react-hooks": "^7.0.2",
-    "@types/jest": "^27.0.3",
+    "@types/jest": "^27.4.1",
     "babel-plugin-pure-annotations": "^0.1.2",
     "dtslint": "^4.1.6",
-    "eslint": "^7.32.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-jest": "^25.2.4",
-    "eslint-plugin-react-hooks": "^4.3.0",
-    "jest": "^27.3.1",
+    "eslint": "^8.12.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-jest": "^26.1.3",
+    "eslint-plugin-react-hooks": "^4.4.0",
+    "jest": "^27.5.1",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.4.0",
+    "prettier": "^2.6.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "regenerator-runtime": "^0.13.9",
-    "rollup": "^2.60.0",
-    "typescript": "^4.5.2"
+    "rollup": "^2.70.1",
+    "typescript": "^4.6.3"
   }
 }

package/dist/index.js

@@ -1,121 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var react = require('react');
-
-var PRE_ENTER = 0;
-var ENTERING = 1;
-var ENTERED = 2;
-var PRE_EXIT = 3;
-var EXITING = 4;
-var EXITED = 5;
-var UNMOUNTED = 6;
-var STATES = ['preEnter', 'entering', 'entered', 'preExit', 'exiting', 'exited', 'unmounted'];
-
-var startOrEnd = function startOrEnd(unmounted) {
-  return unmounted ? UNMOUNTED : EXITED;
-};
-
-var updateState = function updateState(state, setState, latestState, timeoutId, onChange) {
-  clearTimeout(timeoutId.current);
-  setState(state);
-  latestState.current = state;
-  onChange && onChange({
-    state: STATES[state]
-  });
-};
-
-var useTransition = function useTransition(_temp) {
-  var _ref = _temp === void 0 ? {} : _temp,
-      _ref$enter = _ref.enter,
-      enter = _ref$enter === void 0 ? true : _ref$enter,
-      _ref$exit = _ref.exit,
-      exit = _ref$exit === void 0 ? true : _ref$exit,
-      preEnter = _ref.preEnter,
-      preExit = _ref.preExit,
-      timeout = _ref.timeout,
-      initialEntered = _ref.initialEntered,
-      mountOnEnter = _ref.mountOnEnter,
-      unmountOnExit = _ref.unmountOnExit,
-      onChange = _ref.onChange;
-
-  var _useState = react.useState(initialEntered ? ENTERED : startOrEnd(mountOnEnter)),
-      state = _useState[0],
-      setState = _useState[1];
-
-  var latestState = react.useRef(state);
-  var timeoutId = react.useRef();
-  var enterTimeout, exitTimeout;
-
-  if (typeof timeout === 'object') {
-    enterTimeout = timeout.enter;
-    exitTimeout = timeout.exit;
-  } else {
-    enterTimeout = exitTimeout = timeout;
-  }
-
-  var endTransition = react.useCallback(function () {
-    var newState;
-
-    switch (latestState.current) {
-      case ENTERING:
-      case PRE_ENTER:
-        newState = ENTERED;
-        break;
-
-      case EXITING:
-      case PRE_EXIT:
-        newState = startOrEnd(unmountOnExit);
-        break;
-    }
-
-    if (newState !== undefined) {
-      updateState(newState, setState, latestState, timeoutId, onChange);
-    }
-  }, [onChange, unmountOnExit]);
-  var toggle = react.useCallback(function (toEnter) {
-    var transitState = function transitState(newState) {
-      updateState(newState, setState, latestState, timeoutId, onChange);
-
-      switch (newState) {
-        case ENTERING:
-          if (enterTimeout >= 0) timeoutId.current = setTimeout(endTransition, enterTimeout);
-          break;
-
-        case EXITING:
-          if (exitTimeout >= 0) timeoutId.current = setTimeout(endTransition, exitTimeout);
-          break;
-
-        case PRE_ENTER:
-        case PRE_EXIT:
-          timeoutId.current = setTimeout(function () {
-            return transitState(newState + 1);
-          }, 0);
-          break;
-      }
-    };
-
-    var enterStage = latestState.current <= ENTERED;
-    if (typeof toEnter !== 'boolean') toEnter = !enterStage;
-
-    if (toEnter) {
-      if (!enterStage) {
-        transitState(enter ? preEnter ? PRE_ENTER : ENTERING : ENTERED);
-      }
-    } else {
-      if (enterStage) {
-        transitState(exit ? preExit ? PRE_EXIT : EXITING : startOrEnd(unmountOnExit));
-      }
-    }
-  }, [endTransition, onChange, enter, exit, preEnter, preExit, enterTimeout, exitTimeout, unmountOnExit]);
-  react.useEffect(function () {
-    return function () {
-      return clearTimeout(timeoutId.current);
-    };
-  }, []);
-  return [STATES[state], toggle, endTransition];
-};
-
-exports['default'] = useTransition;
-exports.useTransition = useTransition;