react-transition-state 2.0.1 → 2.1.0-alpha.0

package/README.md

@@ -147,7 +147,7 @@ useEffect(() => {
 | 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) |
+| 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:1010-1191) | _Pure_ – rendering based on [transition state](https://codesandbox.io/s/react-transition-state-vs-group-p45iy?file=/src/App.js:2168-2342) |
 | 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) |
@@ -178,7 +178,7 @@ function useTransition(
 | `mountOnEnter` | boolean |  | State will be 'unmounted' until hit enter phase for the first time. It allows you to create lazily mounted component. |
 | `unmountOnExit` | boolean |  | State will become 'unmounted' after 'exiting' finishes. It allows you to transition component out of DOM. |
 | `timeout` | number \| <br />{ enter?: number; exit?: number; } |  | Set timeout in **ms** for transitions; you can set a single value or different values for enter and exit transitions. |
-| `onChange` | (event: { state: string }) => void |  | Event fired when state has changed. <br/><br/>Prefer to read state from the hook function return value directly unless you want to perform some side effects in response to state changes. <br/><br/>_Note: create an event handler with `useCallback` if you need to keep `toggle` or `endTransition` function's identity stable across re-renders._ |
+| `onStateChange` | (event: { current: TransitionState }) => void |  | Event fired when state has changed. <br/><br/>Prefer to read state from the hook function return value directly unless you want to perform some side effects in response to state changes. <br/><br/>_Note: create an event handler with `useCallback` if you need to keep `toggle` or `endTransition` function's identity stable across re-renders._ |
 
 #### Return value
 

package/dist/cjs/index.js

@@ -4,267 +4,204 @@ 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 STATUS = ['preEnter', 'entering', 'entered', 'preExit', 'exiting', 'exited', 'unmounted'];
-var getState = function getState(_status) {
-  return {
-    _status: _status,
-    status: STATUS[_status],
-    isEnter: _status < PRE_EXIT,
-    isMounted: _status !== UNMOUNTED,
-    isResolved: _status === ENTERED || _status > EXITING
-  };
-};
-var startOrEnd = function startOrEnd(unmounted) {
-  return unmounted ? UNMOUNTED : EXITED;
-};
-var getEndStatus = function getEndStatus(status, unmountOnExit) {
+const PRE_ENTER = 0;
+const ENTERING = 1;
+const ENTERED = 2;
+const PRE_EXIT = 3;
+const EXITING = 4;
+const EXITED = 5;
+const UNMOUNTED = 6;
+const STATUS = ['preEnter', 'entering', 'entered', 'preExit', 'exiting', 'exited', 'unmounted'];
+const getState = status => ({
+  _status: status,
+  status: STATUS[status],
+  isEnter: status < PRE_EXIT,
+  isMounted: status !== UNMOUNTED,
+  isResolved: status === ENTERED || status > EXITING
+});
+const startOrEnd = unmounted => unmounted ? UNMOUNTED : EXITED;
+const getEndStatus = (status, unmountOnExit) => {
   switch (status) {
     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];
-};
+const getTimeout = timeout => typeof timeout === 'object' ? [timeout.enter, timeout.exit] : [timeout, timeout];
 
-var updateState$1 = function updateState(status, setState, latestState, timeoutId, onChange) {
+const updateState$1 = (status, setState, latestState, timeoutId, onChange) => {
   clearTimeout(timeoutId.current);
-  var state = getState(status);
+  const state = getState(status);
   setState(state);
   latestState.current = state;
   onChange && onChange({
     current: 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.onStateChange;
-
-  var _useState = react.useState(function () {
-    return getState(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 status = getEndStatus(latestState.current._status, unmountOnExit);
+const useTransition = ({
+  enter = true,
+  exit = true,
+  preEnter,
+  preExit,
+  timeout,
+  initialEntered,
+  mountOnEnter,
+  unmountOnExit,
+  onStateChange: onChange
+} = {}) => {
+  const [state, setState] = react.useState(() => getState(initialEntered ? ENTERED : startOrEnd(mountOnEnter)));
+  const latestState = react.useRef(state);
+  const timeoutId = react.useRef();
+  const [enterTimeout, exitTimeout] = getTimeout(timeout);
+  const endTransition = react.useCallback(() => {
+    const status = getEndStatus(latestState.current._status, unmountOnExit);
     status && updateState$1(status, setState, latestState, timeoutId, onChange);
   }, [onChange, unmountOnExit]);
-  var toggle = react.useCallback(function (toEnter) {
-    var transitState = function transitState(status) {
+  const toggle = react.useCallback(toEnter => {
+    const transitState = status => {
       updateState$1(status, setState, latestState, timeoutId, onChange);
-
       switch (status) {
         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(status + 1);
-          }, 0);
+          timeoutId.current = setTimeout(() => transitState(status + 1), 0);
           break;
       }
     };
-
-    var enterStage = latestState.current._status <= ENTERED;
+    const enterStage = latestState.current.isEnter;
     if (typeof toEnter !== 'boolean') toEnter = !enterStage;
-
     if (toEnter) {
       !enterStage && transitState(enter ? preEnter ? PRE_ENTER : ENTERING : ENTERED);
     } else {
       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);
-    };
-  }, []);
+  react.useEffect(() => () => clearTimeout(timeoutId.current), []);
   return [state, toggle, endTransition];
 };
 
-var initialStateMap = new Map();
-var initialConfigMap = new Map();
-
-var updateState = function updateState(_ref) {
-  var key = _ref.key,
-      status = _ref.status,
-      setStateMap = _ref.setStateMap,
-      latestStateMap = _ref.latestStateMap,
-      timeoutId = _ref.timeoutId,
-      onChange = _ref.onChange;
+const initialStateMap = new Map();
+const initialConfigMap = new Map();
+const updateState = ({
+  key,
+  status,
+  setStateMap,
+  latestStateMap,
+  timeoutId,
+  onChange
+}) => {
   clearTimeout(timeoutId);
-  var state = getState(status);
-  var stateMap = new Map(latestStateMap.current);
+  const state = getState(status);
+  const stateMap = new Map(latestStateMap.current);
   stateMap.set(key, state);
   setStateMap(stateMap);
   latestStateMap.current = stateMap;
   onChange && onChange({
-    key: key,
+    key,
     current: state
   });
 };
-
-var useTransitionMap = function useTransitionMap(_temp) {
-  var _ref2 = _temp === void 0 ? {} : _temp,
-      allowMultiple = _ref2.allowMultiple,
-      _ref2$enter = _ref2.enter,
-      enter = _ref2$enter === void 0 ? true : _ref2$enter,
-      _ref2$exit = _ref2.exit,
-      exit = _ref2$exit === void 0 ? true : _ref2$exit,
-      preEnter = _ref2.preEnter,
-      preExit = _ref2.preExit,
-      timeout = _ref2.timeout,
-      initialEntered = _ref2.initialEntered,
-      mountOnEnter = _ref2.mountOnEnter,
-      unmountOnExit = _ref2.unmountOnExit,
-      onChange = _ref2.onStateChange;
-
-  var _useState = react.useState(initialStateMap),
-      stateMap = _useState[0],
-      setStateMap = _useState[1];
-
-  var latestStateMap = react.useRef(stateMap);
-  var configMap = react.useRef(initialConfigMap);
-
-  var _getTimeout = getTimeout(timeout),
-      enterTimeout = _getTimeout[0],
-      exitTimeout = _getTimeout[1];
-
-  var setItem = react.useCallback(function (key, config) {
-    var _ref3 = config || {},
-        _ref3$initialEntered = _ref3.initialEntered,
-        _initialEntered = _ref3$initialEntered === void 0 ? initialEntered : _ref3$initialEntered;
-
-    var status = _initialEntered ? ENTERED : startOrEnd(mountOnEnter);
+const useTransitionMap = ({
+  allowMultiple,
+  enter = true,
+  exit = true,
+  preEnter,
+  preExit,
+  timeout,
+  initialEntered,
+  mountOnEnter,
+  unmountOnExit,
+  onStateChange: onChange
+} = {}) => {
+  const [stateMap, setStateMap] = react.useState(initialStateMap);
+  const latestStateMap = react.useRef(stateMap);
+  const configMap = react.useRef(initialConfigMap);
+  const [enterTimeout, exitTimeout] = getTimeout(timeout);
+  const setItem = react.useCallback((key, config) => {
+    const {
+      initialEntered: _initialEntered = initialEntered
+    } = config || {};
+    const status = _initialEntered ? ENTERED : startOrEnd(mountOnEnter);
     updateState({
-      key: key,
-      status: status,
-      setStateMap: setStateMap,
-      latestStateMap: latestStateMap
+      key,
+      status,
+      setStateMap,
+      latestStateMap
     });
     configMap.current.set(key, {});
   }, [initialEntered, mountOnEnter]);
-  var deleteItem = react.useCallback(function (key) {
-    var newStateMap = new Map(latestStateMap.current);
-
+  const deleteItem = react.useCallback(key => {
+    const newStateMap = new Map(latestStateMap.current);
     if (newStateMap.delete(key)) {
       setStateMap(newStateMap);
       latestStateMap.current = newStateMap;
       configMap.current.delete(key);
       return true;
     }
-
     return false;
   }, []);
-  var endTransition = react.useCallback(function (key) {
-    var stateObj = latestStateMap.current.get(key);
-
+  const endTransition = react.useCallback(key => {
+    const stateObj = latestStateMap.current.get(key);
     if (!stateObj) {
-      process.env.NODE_ENV !== 'production' && console.error("[React-Transition-State] invalid key: " + key);
+      process.env.NODE_ENV !== 'production' && console.error(`[React-Transition-State] invalid key: ${key}`);
       return;
     }
-
-    var _configMap$current$ge = configMap.current.get(key),
-        timeoutId = _configMap$current$ge.timeoutId;
-
-    var status = getEndStatus(stateObj._status, unmountOnExit);
+    const {
+      timeoutId
+    } = configMap.current.get(key);
+    const status = getEndStatus(stateObj._status, unmountOnExit);
     status && updateState({
-      key: key,
-      status: status,
-      setStateMap: setStateMap,
-      latestStateMap: latestStateMap,
-      timeoutId: timeoutId,
-      onChange: onChange
+      key,
+      status,
+      setStateMap,
+      latestStateMap,
+      timeoutId,
+      onChange
     });
   }, [onChange, unmountOnExit]);
-  var toggle = react.useCallback(function (key, toEnter) {
-    var stateObj = latestStateMap.current.get(key);
-
+  const toggle = react.useCallback((key, toEnter) => {
+    const stateObj = latestStateMap.current.get(key);
     if (!stateObj) {
-      process.env.NODE_ENV !== 'production' && console.error("[React-Transition-State] invalid key: " + key);
+      process.env.NODE_ENV !== 'production' && console.error(`[React-Transition-State] invalid key: ${key}`);
       return;
     }
-
-    var config = configMap.current.get(key);
-
-    var transitState = function transitState(status) {
+    const config = configMap.current.get(key);
+    const transitState = status => {
       updateState({
-        key: key,
-        status: status,
-        setStateMap: setStateMap,
-        latestStateMap: latestStateMap,
+        key,
+        status,
+        setStateMap,
+        latestStateMap,
         timeoutId: config.timeoutId,
-        onChange: onChange
+        onChange
       });
-
       switch (status) {
         case ENTERING:
-          if (enterTimeout >= 0) config.timeoutId = setTimeout(function () {
-            return endTransition(key);
-          }, enterTimeout);
+          if (enterTimeout >= 0) config.timeoutId = setTimeout(() => endTransition(key), enterTimeout);
           break;
-
         case EXITING:
-          if (exitTimeout >= 0) config.timeoutId = setTimeout(function () {
-            return endTransition(key);
-          }, exitTimeout);
+          if (exitTimeout >= 0) config.timeoutId = setTimeout(() => endTransition(key), exitTimeout);
           break;
-
         case PRE_ENTER:
         case PRE_EXIT:
-          config.timeoutId = setTimeout(function () {
-            return transitState(status + 1);
-          }, 0);
+          config.timeoutId = setTimeout(() => transitState(status + 1), 0);
           break;
       }
     };
-
-    var enterStage = stateObj._status <= ENTERED;
+    const enterStage = stateObj.isEnter;
     if (typeof toEnter !== 'boolean') toEnter = !enterStage;
-
     if (toEnter) {
       if (!enterStage) {
         transitState(enter ? preEnter ? PRE_ENTER : ENTERING : ENTERED);
-        !allowMultiple && latestStateMap.current.forEach(function (_, _key) {
-          return _key !== key && toggle(_key, false);
-        });
+        !allowMultiple && latestStateMap.current.forEach((_, _key) => _key !== key && toggle(_key, false));
       }
     } else {
       if (enterStage) {
@@ -273,14 +210,14 @@ var useTransitionMap = function useTransitionMap(_temp) {
     }
   }, [onChange, endTransition, allowMultiple, enter, exit, preEnter, preExit, enterTimeout, exitTimeout, unmountOnExit]);
   return {
-    stateMap: stateMap,
-    toggle: toggle,
-    endTransition: endTransition,
-    setItem: setItem,
-    deleteItem: deleteItem
+    stateMap,
+    toggle,
+    endTransition,
+    setItem,
+    deleteItem
   };
 };
 
-exports["default"] = useTransition;
+exports.default = useTransition;
 exports.useTransition = useTransition;
 exports.useTransitionMap = useTransitionMap;

package/dist/es/hooks/useTransition.js

@@ -1,83 +1,59 @@
 import { useState, useRef, useCallback, useEffect } from 'react';
-import { getState, ENTERED, startOrEnd, getTimeout, getEndStatus, PRE_EXIT, EXITING, PRE_ENTER, ENTERING } from './utils.js';
+import { getState, ENTERED, startOrEnd, getTimeout, getEndStatus, PRE_ENTER, ENTERING, PRE_EXIT, EXITING } from './utils.js';
 
-var updateState = function updateState(status, setState, latestState, timeoutId, onChange) {
+const updateState = (status, setState, latestState, timeoutId, onChange) => {
   clearTimeout(timeoutId.current);
-  var state = getState(status);
+  const state = getState(status);
   setState(state);
   latestState.current = state;
   onChange && onChange({
     current: 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.onStateChange;
-
-  var _useState = useState(function () {
-    return getState(initialEntered ? ENTERED : startOrEnd(mountOnEnter));
-  }),
-      state = _useState[0],
-      setState = _useState[1];
-
-  var latestState = useRef(state);
-  var timeoutId = useRef();
-
-  var _getTimeout = getTimeout(timeout),
-      enterTimeout = _getTimeout[0],
-      exitTimeout = _getTimeout[1];
-
-  var endTransition = useCallback(function () {
-    var status = getEndStatus(latestState.current._status, unmountOnExit);
+const useTransition = ({
+  enter = true,
+  exit = true,
+  preEnter,
+  preExit,
+  timeout,
+  initialEntered,
+  mountOnEnter,
+  unmountOnExit,
+  onStateChange: onChange
+} = {}) => {
+  const [state, setState] = useState(() => getState(initialEntered ? ENTERED : startOrEnd(mountOnEnter)));
+  const latestState = useRef(state);
+  const timeoutId = useRef();
+  const [enterTimeout, exitTimeout] = getTimeout(timeout);
+  const endTransition = useCallback(() => {
+    const status = getEndStatus(latestState.current._status, unmountOnExit);
     status && updateState(status, setState, latestState, timeoutId, onChange);
   }, [onChange, unmountOnExit]);
-  var toggle = useCallback(function (toEnter) {
-    var transitState = function transitState(status) {
+  const toggle = useCallback(toEnter => {
+    const transitState = status => {
       updateState(status, setState, latestState, timeoutId, onChange);
-
       switch (status) {
         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(status + 1);
-          }, 0);
+          timeoutId.current = setTimeout(() => transitState(status + 1), 0);
           break;
       }
     };
-
-    var enterStage = latestState.current._status <= ENTERED;
+    const enterStage = latestState.current.isEnter;
     if (typeof toEnter !== 'boolean') toEnter = !enterStage;
-
     if (toEnter) {
       !enterStage && transitState(enter ? preEnter ? PRE_ENTER : ENTERING : ENTERED);
     } else {
       enterStage && transitState(exit ? preExit ? PRE_EXIT : EXITING : startOrEnd(unmountOnExit));
     }
   }, [endTransition, onChange, enter, exit, preEnter, preExit, enterTimeout, exitTimeout, unmountOnExit]);
-  useEffect(function () {
-    return function () {
-      return clearTimeout(timeoutId.current);
-    };
-  }, []);
+  useEffect(() => () => clearTimeout(timeoutId.current), []);
   return [state, toggle, endTransition];
 };
 

package/dist/es/hooks/useTransitionMap.js

@@ -1,152 +1,120 @@
 import { useState, useRef, useCallback } from 'react';
-import { getTimeout, ENTERED, startOrEnd, getEndStatus, PRE_EXIT, EXITING, PRE_ENTER, ENTERING, getState } from './utils.js';
-
-var initialStateMap = new Map();
-var initialConfigMap = new Map();
-
-var updateState = function updateState(_ref) {
-  var key = _ref.key,
-      status = _ref.status,
-      setStateMap = _ref.setStateMap,
-      latestStateMap = _ref.latestStateMap,
-      timeoutId = _ref.timeoutId,
-      onChange = _ref.onChange;
+import { getTimeout, ENTERED, startOrEnd, getEndStatus, PRE_ENTER, ENTERING, PRE_EXIT, EXITING, getState } from './utils.js';
+
+const initialStateMap = new Map();
+const initialConfigMap = new Map();
+const updateState = ({
+  key,
+  status,
+  setStateMap,
+  latestStateMap,
+  timeoutId,
+  onChange
+}) => {
   clearTimeout(timeoutId);
-  var state = getState(status);
-  var stateMap = new Map(latestStateMap.current);
+  const state = getState(status);
+  const stateMap = new Map(latestStateMap.current);
   stateMap.set(key, state);
   setStateMap(stateMap);
   latestStateMap.current = stateMap;
   onChange && onChange({
-    key: key,
+    key,
     current: state
   });
 };
-
-var useTransitionMap = function useTransitionMap(_temp) {
-  var _ref2 = _temp === void 0 ? {} : _temp,
-      allowMultiple = _ref2.allowMultiple,
-      _ref2$enter = _ref2.enter,
-      enter = _ref2$enter === void 0 ? true : _ref2$enter,
-      _ref2$exit = _ref2.exit,
-      exit = _ref2$exit === void 0 ? true : _ref2$exit,
-      preEnter = _ref2.preEnter,
-      preExit = _ref2.preExit,
-      timeout = _ref2.timeout,
-      initialEntered = _ref2.initialEntered,
-      mountOnEnter = _ref2.mountOnEnter,
-      unmountOnExit = _ref2.unmountOnExit,
-      onChange = _ref2.onStateChange;
-
-  var _useState = useState(initialStateMap),
-      stateMap = _useState[0],
-      setStateMap = _useState[1];
-
-  var latestStateMap = useRef(stateMap);
-  var configMap = useRef(initialConfigMap);
-
-  var _getTimeout = getTimeout(timeout),
-      enterTimeout = _getTimeout[0],
-      exitTimeout = _getTimeout[1];
-
-  var setItem = useCallback(function (key, config) {
-    var _ref3 = config || {},
-        _ref3$initialEntered = _ref3.initialEntered,
-        _initialEntered = _ref3$initialEntered === void 0 ? initialEntered : _ref3$initialEntered;
-
-    var status = _initialEntered ? ENTERED : startOrEnd(mountOnEnter);
+const useTransitionMap = ({
+  allowMultiple,
+  enter = true,
+  exit = true,
+  preEnter,
+  preExit,
+  timeout,
+  initialEntered,
+  mountOnEnter,
+  unmountOnExit,
+  onStateChange: onChange
+} = {}) => {
+  const [stateMap, setStateMap] = useState(initialStateMap);
+  const latestStateMap = useRef(stateMap);
+  const configMap = useRef(initialConfigMap);
+  const [enterTimeout, exitTimeout] = getTimeout(timeout);
+  const setItem = useCallback((key, config) => {
+    const {
+      initialEntered: _initialEntered = initialEntered
+    } = config || {};
+    const status = _initialEntered ? ENTERED : startOrEnd(mountOnEnter);
     updateState({
-      key: key,
-      status: status,
-      setStateMap: setStateMap,
-      latestStateMap: latestStateMap
+      key,
+      status,
+      setStateMap,
+      latestStateMap
     });
     configMap.current.set(key, {});
   }, [initialEntered, mountOnEnter]);
-  var deleteItem = useCallback(function (key) {
-    var newStateMap = new Map(latestStateMap.current);
-
+  const deleteItem = useCallback(key => {
+    const newStateMap = new Map(latestStateMap.current);
     if (newStateMap.delete(key)) {
       setStateMap(newStateMap);
       latestStateMap.current = newStateMap;
       configMap.current.delete(key);
       return true;
     }
-
     return false;
   }, []);
-  var endTransition = useCallback(function (key) {
-    var stateObj = latestStateMap.current.get(key);
-
+  const endTransition = useCallback(key => {
+    const stateObj = latestStateMap.current.get(key);
     if (!stateObj) {
-      process.env.NODE_ENV !== 'production' && console.error("[React-Transition-State] invalid key: " + key);
+      process.env.NODE_ENV !== 'production' && console.error(`[React-Transition-State] invalid key: ${key}`);
       return;
     }
-
-    var _configMap$current$ge = configMap.current.get(key),
-        timeoutId = _configMap$current$ge.timeoutId;
-
-    var status = getEndStatus(stateObj._status, unmountOnExit);
+    const {
+      timeoutId
+    } = configMap.current.get(key);
+    const status = getEndStatus(stateObj._status, unmountOnExit);
     status && updateState({
-      key: key,
-      status: status,
-      setStateMap: setStateMap,
-      latestStateMap: latestStateMap,
-      timeoutId: timeoutId,
-      onChange: onChange
+      key,
+      status,
+      setStateMap,
+      latestStateMap,
+      timeoutId,
+      onChange
     });
   }, [onChange, unmountOnExit]);
-  var toggle = useCallback(function (key, toEnter) {
-    var stateObj = latestStateMap.current.get(key);
-
+  const toggle = useCallback((key, toEnter) => {
+    const stateObj = latestStateMap.current.get(key);
     if (!stateObj) {
-      process.env.NODE_ENV !== 'production' && console.error("[React-Transition-State] invalid key: " + key);
+      process.env.NODE_ENV !== 'production' && console.error(`[React-Transition-State] invalid key: ${key}`);
       return;
     }
-
-    var config = configMap.current.get(key);
-
-    var transitState = function transitState(status) {
+    const config = configMap.current.get(key);
+    const transitState = status => {
       updateState({
-        key: key,
-        status: status,
-        setStateMap: setStateMap,
-        latestStateMap: latestStateMap,
+        key,
+        status,
+        setStateMap,
+        latestStateMap,
         timeoutId: config.timeoutId,
-        onChange: onChange
+        onChange
       });
-
       switch (status) {
         case ENTERING:
-          if (enterTimeout >= 0) config.timeoutId = setTimeout(function () {
-            return endTransition(key);
-          }, enterTimeout);
+          if (enterTimeout >= 0) config.timeoutId = setTimeout(() => endTransition(key), enterTimeout);
           break;
-
         case EXITING:
-          if (exitTimeout >= 0) config.timeoutId = setTimeout(function () {
-            return endTransition(key);
-          }, exitTimeout);
+          if (exitTimeout >= 0) config.timeoutId = setTimeout(() => endTransition(key), exitTimeout);
           break;
-
         case PRE_ENTER:
         case PRE_EXIT:
-          config.timeoutId = setTimeout(function () {
-            return transitState(status + 1);
-          }, 0);
+          config.timeoutId = setTimeout(() => transitState(status + 1), 0);
           break;
       }
     };
-
-    var enterStage = stateObj._status <= ENTERED;
+    const enterStage = stateObj.isEnter;
     if (typeof toEnter !== 'boolean') toEnter = !enterStage;
-
     if (toEnter) {
       if (!enterStage) {
         transitState(enter ? preEnter ? PRE_ENTER : ENTERING : ENTERED);
-        !allowMultiple && latestStateMap.current.forEach(function (_, _key) {
-          return _key !== key && toggle(_key, false);
-        });
+        !allowMultiple && latestStateMap.current.forEach((_, _key) => _key !== key && toggle(_key, false));
       }
     } else {
       if (enterStage) {
@@ -155,11 +123,11 @@ var useTransitionMap = function useTransitionMap(_temp) {
     }
   }, [onChange, endTransition, allowMultiple, enter, exit, preEnter, preExit, enterTimeout, exitTimeout, unmountOnExit]);
   return {
-    stateMap: stateMap,
-    toggle: toggle,
-    endTransition: endTransition,
-    setItem: setItem,
-    deleteItem: deleteItem
+    stateMap,
+    toggle,
+    endTransition,
+    setItem,
+    deleteItem
   };
 };
 

package/dist/es/hooks/utils.js

@@ -1,36 +1,29 @@
-var PRE_ENTER = 0;
-var ENTERING = 1;
-var ENTERED = 2;
-var PRE_EXIT = 3;
-var EXITING = 4;
-var EXITED = 5;
-var UNMOUNTED = 6;
-var STATUS = ['preEnter', 'entering', 'entered', 'preExit', 'exiting', 'exited', 'unmounted'];
-var getState = function getState(_status) {
-  return {
-    _status: _status,
-    status: STATUS[_status],
-    isEnter: _status < PRE_EXIT,
-    isMounted: _status !== UNMOUNTED,
-    isResolved: _status === ENTERED || _status > EXITING
-  };
-};
-var startOrEnd = function startOrEnd(unmounted) {
-  return unmounted ? UNMOUNTED : EXITED;
-};
-var getEndStatus = function getEndStatus(status, unmountOnExit) {
+const PRE_ENTER = 0;
+const ENTERING = 1;
+const ENTERED = 2;
+const PRE_EXIT = 3;
+const EXITING = 4;
+const EXITED = 5;
+const UNMOUNTED = 6;
+const STATUS = ['preEnter', 'entering', 'entered', 'preExit', 'exiting', 'exited', 'unmounted'];
+const getState = status => ({
+  _status: status,
+  status: STATUS[status],
+  isEnter: status < PRE_EXIT,
+  isMounted: status !== UNMOUNTED,
+  isResolved: status === ENTERED || status > EXITING
+});
+const startOrEnd = unmounted => unmounted ? UNMOUNTED : EXITED;
+const getEndStatus = (status, unmountOnExit) => {
   switch (status) {
     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];
-};
+const getTimeout = timeout => typeof timeout === 'object' ? [timeout.enter, timeout.exit] : [timeout, timeout];
 
 export { ENTERED, ENTERING, EXITED, EXITING, PRE_ENTER, PRE_EXIT, STATUS, UNMOUNTED, getEndStatus, getState, getTimeout, startOrEnd };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-transition-state",
-  "version": "2.0.1",
+  "version": "2.1.0-alpha.0",
   "description": "Zero dependency React transition state machine.",
   "author": "Zheng Song",
   "license": "MIT",
@@ -41,25 +41,25 @@
     "react-dom": ">=16.8.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.18.10",
-    "@babel/preset-env": "^7.18.10",
-    "@rollup/plugin-babel": "^5.3.1",
-    "@testing-library/react": "^13.3.0",
-    "@types/jest": "^28.1.7",
+    "@babel/core": "^7.20.12",
+    "@babel/preset-env": "^7.20.2",
+    "@rollup/plugin-babel": "^6.0.3",
+    "@testing-library/react": "^13.4.0",
+    "@types/jest": "^29.4.0",
     "babel-plugin-pure-annotations": "^0.1.2",
     "dtslint": "^4.1.6",
-    "eslint": "^8.22.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-jest": "^26.8.3",
+    "eslint": "^8.33.0",
+    "eslint-config-prettier": "^8.6.0",
+    "eslint-plugin-jest": "^27.2.1",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "jest": "^28.1.3",
-    "jest-environment-jsdom": "^28.1.3",
+    "jest": "^29.4.1",
+    "jest-environment-jsdom": "^29.4.1",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.7.1",
+    "prettier": "^2.8.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "regenerator-runtime": "^0.13.9",
-    "rollup": "^2.77.2",
-    "typescript": "^4.7.4"
+    "regenerator-runtime": "^0.13.11",
+    "rollup": "^3.14.0",
+    "typescript": "^4.9.5"
   }
 }