react-transition-state 2.3.0 → 2.3.2

package/dist/cjs/index.cjs

@@ -1,13 +1,12 @@
+
 'use strict';
+'use client';
 
 Object.defineProperty(exports, '__esModule', { value: true });
+const require_useTransitionState = require('./useTransitionState.cjs');
+const require_useTransitionMap = require('./useTransitionMap.cjs');
 
-var useTransitionState = require('./hooks/useTransitionState.cjs');
-var useTransitionMap = require('./hooks/useTransitionMap.cjs');
-
-
-
-exports.default = useTransitionState.useTransitionState;
-exports.useTransition = useTransitionState.useTransitionState;
-exports.useTransitionState = useTransitionState.useTransitionState;
-exports.useTransitionMap = useTransitionMap.useTransitionMap;
+exports.default = require_useTransitionState.useTransitionState;
+exports.useTransition = require_useTransitionState.useTransitionState;
+exports.useTransitionMap = require_useTransitionMap.useTransitionMap;
+exports.useTransitionState = require_useTransitionState.useTransitionState;

package/dist/cjs/useTransitionMap.cjs

@@ -0,0 +1,105 @@
+
+'use strict';
+const require_utils = require('./utils.cjs');
+let react = require("react");
+
+//#region src/useTransitionMap.ts
+const updateState = (key, status, setStateMap, latestStateMap, timeoutId, onChange) => {
+	clearTimeout(timeoutId);
+	const state = require_utils.getState(status);
+	const stateMap = new Map(latestStateMap.current);
+	stateMap.set(key, state);
+	setStateMap(stateMap);
+	latestStateMap.current = stateMap;
+	onChange && onChange({
+		key,
+		current: state
+	});
+};
+const useTransitionMap = ({ allowMultiple, enter = true, exit = true, preEnter, preExit, timeout, initialEntered, mountOnEnter, unmountOnExit, onStateChange: onChange } = {}) => {
+	const [stateMap, setStateMap] = (0, react.useState)(/* @__PURE__ */ new Map());
+	const latestStateMap = (0, react.useRef)(stateMap);
+	const configMap = (0, react.useRef)(/* @__PURE__ */ new Map());
+	const [enterTimeout, exitTimeout] = require_utils.getTimeout(timeout);
+	const setItem = (0, react.useCallback)((key, options) => {
+		const { initialEntered: _initialEntered = initialEntered } = options || {};
+		updateState(key, _initialEntered ? require_utils.ENTERED : require_utils.startOrEnd(mountOnEnter), setStateMap, latestStateMap);
+		configMap.current.set(key, {});
+	}, [initialEntered, mountOnEnter]);
+	const deleteItem = (0, 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;
+	}, []);
+	const endTransition = (0, react.useCallback)((key) => {
+		const stateObj = latestStateMap.current.get(key);
+		if (!stateObj) {
+			if (process.env.NODE_ENV !== "production") console.error(`[React-Transition-State] cannot call endTransition: invalid key — ${key}`);
+			return;
+		}
+		const { timeoutId } = configMap.current.get(key);
+		const status = require_utils.getEndStatus(stateObj._s, unmountOnExit);
+		status && updateState(key, status, setStateMap, latestStateMap, timeoutId, onChange);
+	}, [onChange, unmountOnExit]);
+	const toggle = (0, react.useCallback)((key, toEnter) => {
+		const stateObj = latestStateMap.current.get(key);
+		if (!stateObj) {
+			if (process.env.NODE_ENV !== "production") console.error(`[React-Transition-State] cannot call toggle: invalid key — ${key}`);
+			return;
+		}
+		const config = configMap.current.get(key);
+		const transitState = (status) => {
+			updateState(key, status, setStateMap, latestStateMap, config.timeoutId, onChange);
+			switch (status) {
+				case require_utils.ENTERING:
+					if (enterTimeout >= 0) config.timeoutId = require_utils._setTimeout(() => endTransition(key), enterTimeout);
+					break;
+				case require_utils.EXITING:
+					if (exitTimeout >= 0) config.timeoutId = require_utils._setTimeout(() => endTransition(key), exitTimeout);
+					break;
+				case require_utils.PRE_ENTER:
+				case require_utils.PRE_EXIT:
+					config.timeoutId = require_utils.nextTick(transitState, status);
+					break;
+			}
+		};
+		const enterStage = stateObj.isEnter;
+		if (typeof toEnter !== "boolean") toEnter = !enterStage;
+		if (toEnter) {
+			if (!enterStage) {
+				transitState(enter ? preEnter ? require_utils.PRE_ENTER : require_utils.ENTERING : require_utils.ENTERED);
+				!allowMultiple && latestStateMap.current.forEach((_, _key) => _key !== key && toggle(_key, false));
+			}
+		} else if (enterStage) transitState(exit ? preExit ? require_utils.PRE_EXIT : require_utils.EXITING : require_utils.startOrEnd(unmountOnExit));
+	}, [
+		onChange,
+		endTransition,
+		allowMultiple,
+		enter,
+		exit,
+		preEnter,
+		preExit,
+		enterTimeout,
+		exitTimeout,
+		unmountOnExit
+	]);
+	return {
+		stateMap,
+		toggle,
+		toggleAll: (0, react.useCallback)((toEnter) => {
+			if (!allowMultiple && toEnter !== false) return;
+			for (const key of latestStateMap.current.keys()) toggle(key, toEnter);
+		}, [allowMultiple, toggle]),
+		endTransition,
+		setItem,
+		deleteItem
+	};
+};
+
+//#endregion
+exports.useTransitionMap = useTransitionMap;

package/dist/cjs/useTransitionState.cjs

@@ -0,0 +1,61 @@
+
+'use strict';
+const require_utils = require('./utils.cjs');
+let react = require("react");
+
+//#region src/useTransitionState.ts
+const updateState = (status, setState, latestState, timeoutId, onChange) => {
+	clearTimeout(timeoutId.current);
+	const state = require_utils.getState(status);
+	setState(state);
+	latestState.current = state;
+	onChange && onChange({ current: state });
+};
+const useTransitionState = ({ enter = true, exit = true, preEnter, preExit, timeout, initialEntered, mountOnEnter, unmountOnExit, onStateChange: onChange } = {}) => {
+	const [state, setState] = (0, react.useState)(() => require_utils.getState(initialEntered ? require_utils.ENTERED : require_utils.startOrEnd(mountOnEnter)));
+	const latestState = (0, react.useRef)(state);
+	const timeoutId = (0, react.useRef)(0);
+	const [enterTimeout, exitTimeout] = require_utils.getTimeout(timeout);
+	const endTransition = (0, react.useCallback)(() => {
+		const status = require_utils.getEndStatus(latestState.current._s, unmountOnExit);
+		status && updateState(status, setState, latestState, timeoutId, onChange);
+	}, [onChange, unmountOnExit]);
+	return [
+		state,
+		(0, react.useCallback)((toEnter) => {
+			const transitState = (status) => {
+				updateState(status, setState, latestState, timeoutId, onChange);
+				switch (status) {
+					case require_utils.ENTERING:
+						if (enterTimeout >= 0) timeoutId.current = require_utils._setTimeout(endTransition, enterTimeout);
+						break;
+					case require_utils.EXITING:
+						if (exitTimeout >= 0) timeoutId.current = require_utils._setTimeout(endTransition, exitTimeout);
+						break;
+					case require_utils.PRE_ENTER:
+					case require_utils.PRE_EXIT:
+						timeoutId.current = require_utils.nextTick(transitState, status);
+						break;
+				}
+			};
+			const enterStage = latestState.current.isEnter;
+			if (typeof toEnter !== "boolean") toEnter = !enterStage;
+			if (toEnter) !enterStage && transitState(enter ? preEnter ? require_utils.PRE_ENTER : require_utils.ENTERING : require_utils.ENTERED);
+			else enterStage && transitState(exit ? preExit ? require_utils.PRE_EXIT : require_utils.EXITING : require_utils.startOrEnd(unmountOnExit));
+		}, [
+			endTransition,
+			onChange,
+			enter,
+			exit,
+			preEnter,
+			preExit,
+			enterTimeout,
+			exitTimeout,
+			unmountOnExit
+		]),
+		endTransition
+	];
+};
+
+//#endregion
+exports.useTransitionState = useTransitionState;

package/dist/cjs/utils.cjs

@@ -0,0 +1,54 @@
+
+'use strict';
+
+//#region src/utils.ts
+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) => ({
+	_s: 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);
+	}
+};
+const getTimeout = (timeout) => typeof timeout === "object" ? [timeout.enter, timeout.exit] : [timeout, timeout];
+const _setTimeout = setTimeout;
+const nextTick = (transitState, status) => _setTimeout(() => {
+	isNaN(document.body.offsetTop) || transitState(status + 1);
+}, 0);
+
+//#endregion
+exports.ENTERED = ENTERED;
+exports.ENTERING = ENTERING;
+exports.EXITING = EXITING;
+exports.PRE_ENTER = PRE_ENTER;
+exports.PRE_EXIT = PRE_EXIT;
+exports._setTimeout = _setTimeout;
+exports.getEndStatus = getEndStatus;
+exports.getState = getState;
+exports.getTimeout = getTimeout;
+exports.nextTick = nextTick;
+exports.startOrEnd = startOrEnd;

package/dist/esm/index.mjs

@@ -1,2 +1,6 @@
-export { useTransitionState as default, useTransitionState as useTransition, useTransitionState } from './hooks/useTransitionState.mjs';
-export { useTransitionMap } from './hooks/useTransitionMap.mjs';
+'use client';
+
+import { useTransitionState } from "./useTransitionState.mjs";
+import { useTransitionMap } from "./useTransitionMap.mjs";
+
+export { useTransitionState as default, useTransitionState as useTransition, useTransitionMap, useTransitionState };

package/dist/esm/useTransitionMap.mjs

@@ -0,0 +1,103 @@
+import { ENTERED, ENTERING, EXITING, PRE_ENTER, PRE_EXIT, _setTimeout, getEndStatus, getState, getTimeout, nextTick, startOrEnd } from "./utils.mjs";
+import { useCallback, useRef, useState } from "react";
+
+//#region src/useTransitionMap.ts
+const updateState = (key, status, setStateMap, latestStateMap, timeoutId, onChange) => {
+	clearTimeout(timeoutId);
+	const state = getState(status);
+	const stateMap = new Map(latestStateMap.current);
+	stateMap.set(key, state);
+	setStateMap(stateMap);
+	latestStateMap.current = stateMap;
+	onChange && onChange({
+		key,
+		current: state
+	});
+};
+const useTransitionMap = ({ allowMultiple, enter = true, exit = true, preEnter, preExit, timeout, initialEntered, mountOnEnter, unmountOnExit, onStateChange: onChange } = {}) => {
+	const [stateMap, setStateMap] = useState(/* @__PURE__ */ new Map());
+	const latestStateMap = useRef(stateMap);
+	const configMap = useRef(/* @__PURE__ */ new Map());
+	const [enterTimeout, exitTimeout] = getTimeout(timeout);
+	const setItem = useCallback((key, options) => {
+		const { initialEntered: _initialEntered = initialEntered } = options || {};
+		updateState(key, _initialEntered ? ENTERED : startOrEnd(mountOnEnter), setStateMap, latestStateMap);
+		configMap.current.set(key, {});
+	}, [initialEntered, mountOnEnter]);
+	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;
+	}, []);
+	const endTransition = useCallback((key) => {
+		const stateObj = latestStateMap.current.get(key);
+		if (!stateObj) {
+			if (process.env.NODE_ENV !== "production") console.error(`[React-Transition-State] cannot call endTransition: invalid key — ${key}`);
+			return;
+		}
+		const { timeoutId } = configMap.current.get(key);
+		const status = getEndStatus(stateObj._s, unmountOnExit);
+		status && updateState(key, status, setStateMap, latestStateMap, timeoutId, onChange);
+	}, [onChange, unmountOnExit]);
+	const toggle = useCallback((key, toEnter) => {
+		const stateObj = latestStateMap.current.get(key);
+		if (!stateObj) {
+			if (process.env.NODE_ENV !== "production") console.error(`[React-Transition-State] cannot call toggle: invalid key — ${key}`);
+			return;
+		}
+		const config = configMap.current.get(key);
+		const transitState = (status) => {
+			updateState(key, status, setStateMap, latestStateMap, config.timeoutId, onChange);
+			switch (status) {
+				case ENTERING:
+					if (enterTimeout >= 0) config.timeoutId = _setTimeout(() => endTransition(key), enterTimeout);
+					break;
+				case EXITING:
+					if (exitTimeout >= 0) config.timeoutId = _setTimeout(() => endTransition(key), exitTimeout);
+					break;
+				case PRE_ENTER:
+				case PRE_EXIT:
+					config.timeoutId = nextTick(transitState, status);
+					break;
+			}
+		};
+		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((_, _key) => _key !== key && toggle(_key, false));
+			}
+		} else if (enterStage) transitState(exit ? preExit ? PRE_EXIT : EXITING : startOrEnd(unmountOnExit));
+	}, [
+		onChange,
+		endTransition,
+		allowMultiple,
+		enter,
+		exit,
+		preEnter,
+		preExit,
+		enterTimeout,
+		exitTimeout,
+		unmountOnExit
+	]);
+	return {
+		stateMap,
+		toggle,
+		toggleAll: useCallback((toEnter) => {
+			if (!allowMultiple && toEnter !== false) return;
+			for (const key of latestStateMap.current.keys()) toggle(key, toEnter);
+		}, [allowMultiple, toggle]),
+		endTransition,
+		setItem,
+		deleteItem
+	};
+};
+
+//#endregion
+export { useTransitionMap };

package/dist/esm/useTransitionState.mjs

@@ -0,0 +1,59 @@
+import { ENTERED, ENTERING, EXITING, PRE_ENTER, PRE_EXIT, _setTimeout, getEndStatus, getState, getTimeout, nextTick, startOrEnd } from "./utils.mjs";
+import { useCallback, useRef, useState } from "react";
+
+//#region src/useTransitionState.ts
+const updateState = (status, setState, latestState, timeoutId, onChange) => {
+	clearTimeout(timeoutId.current);
+	const state = getState(status);
+	setState(state);
+	latestState.current = state;
+	onChange && onChange({ current: state });
+};
+const useTransitionState = ({ 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(0);
+	const [enterTimeout, exitTimeout] = getTimeout(timeout);
+	const endTransition = useCallback(() => {
+		const status = getEndStatus(latestState.current._s, unmountOnExit);
+		status && updateState(status, setState, latestState, timeoutId, onChange);
+	}, [onChange, unmountOnExit]);
+	return [
+		state,
+		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 = nextTick(transitState, status);
+						break;
+				}
+			};
+			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
+		]),
+		endTransition
+	];
+};
+
+//#endregion
+export { useTransitionState };

package/dist/esm/utils.mjs

@@ -0,0 +1,41 @@
+//#region src/utils.ts
+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) => ({
+	_s: 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);
+	}
+};
+const getTimeout = (timeout) => typeof timeout === "object" ? [timeout.enter, timeout.exit] : [timeout, timeout];
+const _setTimeout = setTimeout;
+const nextTick = (transitState, status) => _setTimeout(() => {
+	isNaN(document.body.offsetTop) || transitState(status + 1);
+}, 0);
+
+//#endregion
+export { ENTERED, ENTERING, EXITING, PRE_ENTER, PRE_EXIT, _setTimeout, getEndStatus, getState, getTimeout, nextTick, startOrEnd };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-transition-state",
-  "version": "2.3.0",
+  "version": "2.3.2",
   "description": "Zero dependency React transition state machine.",
   "author": "Zheng Song",
   "license": "MIT",
@@ -15,7 +15,7 @@
   "sideEffects": false,
   "files": [
     "dist/",
-    "types/*.d.ts"
+    "types/"
   ],
   "keywords": [
     "react",
@@ -26,17 +26,16 @@
     "state machine"
   ],
   "scripts": {
-    "start": "rollup -c -w",
-    "clean": "rm -Rf dist",
-    "bundle": "rollup -c",
-    "test": "jest",
-    "eg": "npm start --prefix example",
-    "types": "cd types && tsc",
+    "clean": "rm -Rf dist/ types/",
+    "start": "rolldown -w -c",
+    "bundle": "rolldown -c",
+    "test": "vitest run",
+    "tc": "tsc",
     "lint": "eslint .",
-    "lint:fix": "eslint --fix .",
     "pret": "prettier -c .",
     "pret:fix": "prettier -w .",
-    "build": "run-s pret clean lint types bundle"
+    "prepare": "rm -Rf types/__tests__",
+    "build": "run-s pret clean tc lint bundle"
   },
   "exports": {
     ".": {
@@ -51,31 +50,26 @@
     "react-dom": ">=16.8.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.26.7",
-    "@babel/preset-env": "^7.26.7",
-    "@rollup/plugin-babel": "^6.0.4",
-    "@testing-library/react": "^16.2.0",
-    "@types/jest": "^29.5.14",
-    "babel-plugin-pure-annotations": "^0.1.2",
-    "eslint": "^9.19.0",
-    "eslint-config-prettier": "^10.0.1",
-    "eslint-plugin-jest": "^28.11.0",
-    "eslint-plugin-react": "^7.37.4",
-    "eslint-plugin-react-hooks": "^5.1.0",
-    "eslint-plugin-react-hooks-addons": "^0.4.1",
-    "globals": "^15.14.0",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
+    "@testing-library/react": "^16.3.1",
+    "@types/node": "^25.0.3",
+    "@types/react": "^19.2.7",
+    "@vitest/coverage-istanbul": "^4.0.16",
+    "@vitest/eslint-plugin": "^1.6.4",
+    "eslint": "^9.39.2",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-hooks-addons": "^0.5.0",
+    "globals": "^16.5.0",
+    "jsdom": "^27.4.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^3.4.2",
-    "react": "^19",
-    "react-dom": "^19",
-    "rollup": "^4.32.1",
-    "typescript": "^5.7.3"
-  },
-  "overrides": {
-    "whatwg-url@11.0.0": {
-      "tr46": "^4"
-    }
+    "prettier": "^3.7.4",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "rolldown": "^1.0.0-beta.57",
+    "rollup-plugin-add-directive": "^1.0.0",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.51.0",
+    "vitest": "^4.0.16"
   }
 }

package/types/index.d.ts

@@ -1,63 +1,11 @@
-export type TransitionStatus =
-  | 'preEnter'
-  | 'entering'
-  | 'entered'
-  | 'preExit'
-  | 'exiting'
-  | 'exited'
-  | 'unmounted';
-
-export type TransitionState = Readonly<{
-  status: TransitionStatus;
-  isMounted: boolean;
-  isEnter: boolean;
-  isResolved: boolean;
-}>;
-
-export interface TransitionOptions {
-  initialEntered?: boolean;
-  mountOnEnter?: boolean;
-  unmountOnExit?: boolean;
-  preEnter?: boolean;
-  preExit?: boolean;
-  enter?: boolean;
-  exit?: boolean;
-  timeout?: number | { enter?: number; exit?: number };
-  onStateChange?: (event: { current: TransitionState }) => void;
-}
-
-export interface TransitionItemOptions {
-  initialEntered?: boolean;
-}
-
-export interface TransitionMapOptions<K> extends Omit<TransitionOptions, 'onStateChange'> {
-  allowMultiple?: boolean;
-  onStateChange?: (event: { key: K; current: TransitionState }) => void;
-}
-
-export type TransitionResult = [TransitionState, (toEnter?: boolean) => void, () => void];
-
-export interface TransitionMapResult<K> {
-  stateMap: ReadonlyMap<K, TransitionState>;
-  toggle: (key: K, toEnter?: boolean) => void;
-  toggleAll: (toEnter?: boolean) => void;
-  endTransition: (key: K) => void;
-  setItem: (key: K, options?: TransitionItemOptions) => void;
-  deleteItem: (key: K) => boolean;
-}
-
-export const useTransitionState: (options?: TransitionOptions) => TransitionResult;
-
-export const useTransitionMap: <K>(options?: TransitionMapOptions<K>) => TransitionMapResult<K>;
-
-export {
-  /**
-   * @deprecated The `useTransition` alias will be removed in v3.0.0. Use `useTransitionState` instead.
-   */
-  useTransitionState as useTransition
-};
-
+export * from './types';
+export { useTransitionState, 
+/**
+ * @deprecated The `useTransition` alias will be removed in v3.0.0. Use `useTransitionState` instead.
+ */
+useTransitionState as useTransition, 
 /**
  * @deprecated The default export will be removed in v3.0.0. Use the named export `useTransitionState` instead.
  */
-export default useTransitionState;
+useTransitionState as default } from './useTransitionState';
+export { useTransitionMap } from './useTransitionMap';

package/types/types.d.ts

@@ -0,0 +1,42 @@
+export type TransitionStatus = 'preEnter' | 'entering' | 'entered' | 'preExit' | 'exiting' | 'exited' | 'unmounted';
+export type TransitionState = Readonly<{
+    status: TransitionStatus;
+    isMounted: boolean;
+    isEnter: boolean;
+    isResolved: boolean;
+}>;
+export interface TransitionOptions {
+    initialEntered?: boolean;
+    mountOnEnter?: boolean;
+    unmountOnExit?: boolean;
+    preEnter?: boolean;
+    preExit?: boolean;
+    enter?: boolean;
+    exit?: boolean;
+    timeout?: number | {
+        enter?: number;
+        exit?: number;
+    };
+    onStateChange?: (event: {
+        current: TransitionState;
+    }) => void;
+}
+export interface TransitionItemOptions {
+    initialEntered?: boolean;
+}
+export interface TransitionMapOptions<TKey> extends Omit<TransitionOptions, 'onStateChange'> {
+    allowMultiple?: boolean;
+    onStateChange?: (event: {
+        key: TKey;
+        current: TransitionState;
+    }) => void;
+}
+export type TransitionResult = [TransitionState, (toEnter?: boolean) => void, () => void];
+export interface TransitionMapResult<TKey> {
+    stateMap: ReadonlyMap<TKey, TransitionState>;
+    toggle: (key: TKey, toEnter?: boolean) => void;
+    toggleAll: (toEnter?: boolean) => void;
+    endTransition: (key: TKey) => void;
+    setItem: (key: TKey, options?: TransitionItemOptions) => void;
+    deleteItem: (key: TKey) => boolean;
+}

package/types/useTransitionMap.d.ts

@@ -0,0 +1,3 @@
+import type { TransitionMapOptions, TransitionMapResult } from './types';
+declare const useTransitionMap: <TKey>({ allowMultiple, enter, exit, preEnter, preExit, timeout, initialEntered, mountOnEnter, unmountOnExit, onStateChange: onChange }?: TransitionMapOptions<TKey>) => TransitionMapResult<TKey>;
+export { useTransitionMap };

package/types/useTransitionState.d.ts

@@ -0,0 +1,2 @@
+import type { TransitionOptions, TransitionResult } from './types';
+export declare const useTransitionState: ({ enter, exit, preEnter, preExit, timeout, initialEntered, mountOnEnter, unmountOnExit, onStateChange: onChange }?: TransitionOptions) => TransitionResult;

package/types/utils.d.ts

@@ -0,0 +1,22 @@
+import type { TransitionOptions, TransitionState } from './types';
+export declare const PRE_ENTER = 0;
+export declare const ENTERING = 1;
+export declare const ENTERED = 2;
+export declare const PRE_EXIT = 3;
+export declare const EXITING = 4;
+export declare const EXITED = 5;
+export declare const UNMOUNTED = 6;
+/** @internal [INTERNAL ONLY – DO NOT USE] */
+export type Status = typeof PRE_ENTER | typeof ENTERING | typeof ENTERED | typeof PRE_EXIT | typeof EXITING | typeof EXITED | typeof UNMOUNTED;
+/** @internal [INTERNAL ONLY – DO NOT USE] */
+export type State = {
+    _s: Status;
+} & TransitionState;
+export declare const STATUS: readonly ["preEnter", "entering", "entered", "preExit", "exiting", "exited", "unmounted"];
+export declare const getState: (status: Status) => State;
+export declare const startOrEnd: (unmounted: boolean | undefined) => 5 | 6;
+export declare const getEndStatus: (status: Status, unmountOnExit: boolean | undefined) => 2 | 5 | 6 | undefined;
+export declare const getTimeout: (timeout: TransitionOptions["timeout"]) => (number | undefined)[];
+declare const _setTimeout: typeof window.setTimeout;
+export { _setTimeout as setTimeout };
+export declare const nextTick: (transitState: (status: Status) => void, status: Status) => number;

package/dist/cjs/hooks/useTransitionMap.cjs

@@ -1,113 +0,0 @@
-'use strict';
-
-var react = require('react');
-var utils = require('./utils.cjs');
-
-const updateState = (key, status, setStateMap, latestStateMap, timeoutId, onChange) => {
-  clearTimeout(timeoutId);
-  const state = utils.getState(status);
-  const stateMap = new Map(latestStateMap.current);
-  stateMap.set(key, state);
-  setStateMap(stateMap);
-  latestStateMap.current = stateMap;
-  onChange && onChange({
-    key,
-    current: state
-  });
-};
-const useTransitionMap = ({
-  allowMultiple,
-  enter = true,
-  exit = true,
-  preEnter,
-  preExit,
-  timeout,
-  initialEntered,
-  mountOnEnter,
-  unmountOnExit,
-  onStateChange: onChange
-} = {}) => {
-  const [stateMap, setStateMap] = react.useState(new Map());
-  const latestStateMap = react.useRef(stateMap);
-  const configMap = react.useRef(new Map());
-  const [enterTimeout, exitTimeout] = utils.getTimeout(timeout);
-  const setItem = react.useCallback((key, config) => {
-    const {
-      initialEntered: _initialEntered = initialEntered
-    } = config || {};
-    const status = _initialEntered ? utils.ENTERED : utils.startOrEnd(mountOnEnter);
-    updateState(key, status, setStateMap, latestStateMap);
-    configMap.current.set(key, {});
-  }, [initialEntered, mountOnEnter]);
-  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;
-  }, []);
-  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}`);
-      return;
-    }
-    const {
-      timeoutId
-    } = configMap.current.get(key);
-    const status = utils.getEndStatus(stateObj._s, unmountOnExit);
-    status && updateState(key, status, setStateMap, latestStateMap, timeoutId, onChange);
-  }, [onChange, unmountOnExit]);
-  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}`);
-      return;
-    }
-    const config = configMap.current.get(key);
-    const transitState = status => {
-      updateState(key, status, setStateMap, latestStateMap, config.timeoutId, onChange);
-      switch (status) {
-        case utils.ENTERING:
-          if (enterTimeout >= 0) config.timeoutId = setTimeout(() => endTransition(key), enterTimeout);
-          break;
-        case utils.EXITING:
-          if (exitTimeout >= 0) config.timeoutId = setTimeout(() => endTransition(key), exitTimeout);
-          break;
-        case utils.PRE_ENTER:
-        case utils.PRE_EXIT:
-          config.timeoutId = utils.nextTick(transitState, status);
-          break;
-      }
-    };
-    const enterStage = stateObj.isEnter;
-    if (typeof toEnter !== 'boolean') toEnter = !enterStage;
-    if (toEnter) {
-      if (!enterStage) {
-        transitState(enter ? preEnter ? utils.PRE_ENTER : utils.ENTERING : utils.ENTERED);
-        !allowMultiple && latestStateMap.current.forEach((_, _key) => _key !== key && toggle(_key, false));
-      }
-    } else {
-      if (enterStage) {
-        transitState(exit ? preExit ? utils.PRE_EXIT : utils.EXITING : utils.startOrEnd(unmountOnExit));
-      }
-    }
-  }, [onChange, endTransition, allowMultiple, enter, exit, preEnter, preExit, enterTimeout, exitTimeout, unmountOnExit]);
-  const toggleAll = react.useCallback(toEnter => {
-    if (!allowMultiple && toEnter !== false) return;
-    for (const key of latestStateMap.current.keys()) toggle(key, toEnter);
-  }, [allowMultiple, toggle]);
-  return {
-    stateMap,
-    toggle,
-    toggleAll,
-    endTransition,
-    setItem,
-    deleteItem
-  };
-};
-
-exports.useTransitionMap = useTransitionMap;

package/dist/cjs/hooks/useTransitionState.cjs

@@ -1,62 +0,0 @@
-'use strict';
-
-var react = require('react');
-var utils = require('./utils.cjs');
-
-const updateState = (status, setState, latestState, timeoutId, onChange) => {
-  clearTimeout(timeoutId.current);
-  const state = utils.getState(status);
-  setState(state);
-  latestState.current = state;
-  onChange && onChange({
-    current: state
-  });
-};
-const useTransitionState = ({
-  enter = true,
-  exit = true,
-  preEnter,
-  preExit,
-  timeout,
-  initialEntered,
-  mountOnEnter,
-  unmountOnExit,
-  onStateChange: onChange
-} = {}) => {
-  const [state, setState] = react.useState(() => utils.getState(initialEntered ? utils.ENTERED : utils.startOrEnd(mountOnEnter)));
-  const latestState = react.useRef(state);
-  const timeoutId = react.useRef();
-  const [enterTimeout, exitTimeout] = utils.getTimeout(timeout);
-  const endTransition = react.useCallback(() => {
-    const status = utils.getEndStatus(latestState.current._s, unmountOnExit);
-    status && updateState(status, setState, latestState, timeoutId, onChange);
-  }, [onChange, unmountOnExit]);
-  const toggle = react.useCallback(toEnter => {
-    const transitState = status => {
-      updateState(status, setState, latestState, timeoutId, onChange);
-      switch (status) {
-        case utils.ENTERING:
-          if (enterTimeout >= 0) timeoutId.current = setTimeout(endTransition, enterTimeout);
-          break;
-        case utils.EXITING:
-          if (exitTimeout >= 0) timeoutId.current = setTimeout(endTransition, exitTimeout);
-          break;
-        case utils.PRE_ENTER:
-        case utils.PRE_EXIT:
-          timeoutId.current = utils.nextTick(transitState, status);
-          break;
-      }
-    };
-    const enterStage = latestState.current.isEnter;
-    if (typeof toEnter !== 'boolean') toEnter = !enterStage;
-    if (toEnter) {
-      !enterStage && transitState(enter ? preEnter ? utils.PRE_ENTER : utils.ENTERING : utils.ENTERED);
-    } else {
-      enterStage && transitState(exit ? preExit ? utils.PRE_EXIT : utils.EXITING : utils.startOrEnd(unmountOnExit));
-    }
-  }, [endTransition, onChange, enter, exit, preEnter, preExit, enterTimeout, exitTimeout, unmountOnExit]);
-  react.useEffect(() => () => clearTimeout(timeoutId.current), []);
-  return [state, toggle, endTransition];
-};
-
-exports.useTransitionState = useTransitionState;

package/dist/cjs/hooks/utils.cjs

@@ -1,47 +0,0 @@
-'use strict';
-
-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 => ({
-  _s: 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);
-  }
-};
-const getTimeout = timeout => typeof timeout === 'object' ? [timeout.enter, timeout.exit] : [timeout, timeout];
-const nextTick = (transitState, status) => setTimeout(() => {
-  // Reading document.body.offsetTop can force browser to repaint before transition to the next state
-  isNaN(document.body.offsetTop) || transitState(status + 1);
-}, 0);
-
-exports.ENTERED = ENTERED;
-exports.ENTERING = ENTERING;
-exports.EXITED = EXITED;
-exports.EXITING = EXITING;
-exports.PRE_ENTER = PRE_ENTER;
-exports.PRE_EXIT = PRE_EXIT;
-exports.STATUS = STATUS;
-exports.UNMOUNTED = UNMOUNTED;
-exports.getEndStatus = getEndStatus;
-exports.getState = getState;
-exports.getTimeout = getTimeout;
-exports.nextTick = nextTick;
-exports.startOrEnd = startOrEnd;

package/dist/esm/hooks/useTransitionMap.mjs

@@ -1,111 +0,0 @@
-import { useState, useRef, useCallback } from 'react';
-import { getTimeout, getEndStatus, PRE_EXIT, nextTick, PRE_ENTER, EXITING, ENTERING, ENTERED, startOrEnd, getState } from './utils.mjs';
-
-const updateState = (key, status, setStateMap, latestStateMap, timeoutId, onChange) => {
-  clearTimeout(timeoutId);
-  const state = getState(status);
-  const stateMap = new Map(latestStateMap.current);
-  stateMap.set(key, state);
-  setStateMap(stateMap);
-  latestStateMap.current = stateMap;
-  onChange && onChange({
-    key,
-    current: state
-  });
-};
-const useTransitionMap = ({
-  allowMultiple,
-  enter = true,
-  exit = true,
-  preEnter,
-  preExit,
-  timeout,
-  initialEntered,
-  mountOnEnter,
-  unmountOnExit,
-  onStateChange: onChange
-} = {}) => {
-  const [stateMap, setStateMap] = useState(new Map());
-  const latestStateMap = useRef(stateMap);
-  const configMap = useRef(new Map());
-  const [enterTimeout, exitTimeout] = getTimeout(timeout);
-  const setItem = useCallback((key, config) => {
-    const {
-      initialEntered: _initialEntered = initialEntered
-    } = config || {};
-    const status = _initialEntered ? ENTERED : startOrEnd(mountOnEnter);
-    updateState(key, status, setStateMap, latestStateMap);
-    configMap.current.set(key, {});
-  }, [initialEntered, mountOnEnter]);
-  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;
-  }, []);
-  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}`);
-      return;
-    }
-    const {
-      timeoutId
-    } = configMap.current.get(key);
-    const status = getEndStatus(stateObj._s, unmountOnExit);
-    status && updateState(key, status, setStateMap, latestStateMap, timeoutId, onChange);
-  }, [onChange, unmountOnExit]);
-  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}`);
-      return;
-    }
-    const config = configMap.current.get(key);
-    const transitState = status => {
-      updateState(key, status, setStateMap, latestStateMap, config.timeoutId, onChange);
-      switch (status) {
-        case ENTERING:
-          if (enterTimeout >= 0) config.timeoutId = setTimeout(() => endTransition(key), enterTimeout);
-          break;
-        case EXITING:
-          if (exitTimeout >= 0) config.timeoutId = setTimeout(() => endTransition(key), exitTimeout);
-          break;
-        case PRE_ENTER:
-        case PRE_EXIT:
-          config.timeoutId = nextTick(transitState, status);
-          break;
-      }
-    };
-    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((_, _key) => _key !== key && toggle(_key, false));
-      }
-    } else {
-      if (enterStage) {
-        transitState(exit ? preExit ? PRE_EXIT : EXITING : startOrEnd(unmountOnExit));
-      }
-    }
-  }, [onChange, endTransition, allowMultiple, enter, exit, preEnter, preExit, enterTimeout, exitTimeout, unmountOnExit]);
-  const toggleAll = useCallback(toEnter => {
-    if (!allowMultiple && toEnter !== false) return;
-    for (const key of latestStateMap.current.keys()) toggle(key, toEnter);
-  }, [allowMultiple, toggle]);
-  return {
-    stateMap,
-    toggle,
-    toggleAll,
-    endTransition,
-    setItem,
-    deleteItem
-  };
-};
-
-export { useTransitionMap };

package/dist/esm/hooks/useTransitionState.mjs

@@ -1,60 +0,0 @@
-import { useState, useRef, useCallback, useEffect } from 'react';
-import { getState, ENTERED, startOrEnd, getTimeout, getEndStatus, PRE_EXIT, nextTick, PRE_ENTER, EXITING, ENTERING } from './utils.mjs';
-
-const updateState = (status, setState, latestState, timeoutId, onChange) => {
-  clearTimeout(timeoutId.current);
-  const state = getState(status);
-  setState(state);
-  latestState.current = state;
-  onChange && onChange({
-    current: state
-  });
-};
-const useTransitionState = ({
-  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._s, unmountOnExit);
-    status && updateState(status, setState, latestState, timeoutId, onChange);
-  }, [onChange, unmountOnExit]);
-  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 = nextTick(transitState, status);
-          break;
-      }
-    };
-    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(() => () => clearTimeout(timeoutId.current), []);
-  return [state, toggle, endTransition];
-};
-
-export { useTransitionState };

package/dist/esm/hooks/utils.mjs

@@ -1,33 +0,0 @@
-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 => ({
-  _s: 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);
-  }
-};
-const getTimeout = timeout => typeof timeout === 'object' ? [timeout.enter, timeout.exit] : [timeout, timeout];
-const nextTick = (transitState, status) => setTimeout(() => {
-  // Reading document.body.offsetTop can force browser to repaint before transition to the next state
-  isNaN(document.body.offsetTop) || transitState(status + 1);
-}, 0);
-
-export { ENTERED, ENTERING, EXITED, EXITING, PRE_ENTER, PRE_EXIT, STATUS, UNMOUNTED, getEndStatus, getState, getTimeout, nextTick, startOrEnd };