@onesy/ui-react 1.0.130 → 1.0.132

package/Transition/Transition.js

@@ -1,347 +1,329 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.STATUS = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _utils = require("@onesy/utils");
+var _subscription = _interopRequireDefault(require("@onesy/subscription"));
+var _styleReact = require("@onesy/style-react");
+var _Context = _interopRequireDefault(require("./Context"));
+var _utils2 = require("../utils");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+const STATUS = exports.STATUS = {
+  appended: 'appended',
+  add: 'add',
+  added: 'added',
+  adding: 'adding',
+  enter: 'enter',
+  entering: 'entering',
+  entered: 'entered',
+  exit: 'exit',
+  exiting: 'exiting',
+  exited: 'exited',
+  removed: 'removed'
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.STATUS = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importDefault(require("react"));
-const utils_1 = require("@onesy/utils");
-const subscription_1 = __importDefault(require("@onesy/subscription"));
-const style_react_1 = require("@onesy/style-react");
-const Context_1 = __importDefault(require("./Context"));
-const utils_2 = require("../utils");
-exports.STATUS = {
-    appended: 'appended',
-    add: 'add',
-    added: 'added',
-    adding: 'adding',
-    enter: 'enter',
-    entering: 'entering',
-    entered: 'entered',
-    exit: 'exit',
-    exiting: 'exiting',
-    exited: 'exited',
-    removed: 'removed'
-};
-const Transition = (props_) => {
-    const theme = (0, style_react_1.useOnesyTheme)();
-    const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesyTransition) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
-    const { in: inProp_, name, prefix, run, append, add: add_, enter: enter_ = true, exit: exit_ = true, enterOnAdd = props.add || props.enter, exitOnAdd, noAbruption, removeOnExited, preEnterAppendTimeout = 14, delay: delay_, duration: duration_, 
+const Transition = props_ => {
+  const theme = (0, _styleReact.useOnesyTheme)();
+  const props = _react.default.useMemo(() => {
+    var _theme$ui, _theme$ui2;
+    return _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyTransition) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  }, [props_]);
+  const {
+    in: inProp_,
+    name,
+    prefix,
+    run,
+    append,
+    add: add_,
+    enter: enter_ = true,
+    exit: exit_ = true,
+    enterOnAdd = props.add || props.enter,
+    exitOnAdd,
+    noAbruption,
+    removeOnExited,
+    preEnterAppendTimeout = 14,
+    delay: delay_,
+    duration: duration_,
     // An all in one method
-    onTransition, onInit, onAppended, onAdd, onAdding, onAdded, onEnter, onEntering, onEntered: onEntered_, onExit, onExiting, onExited, onRemoved, className, children, ref } = props;
-    const [init, setInit] = react_1.default.useState(false);
-    const [inProp, setInProp] = react_1.default.useState(inProp_);
-    const [status, setStatus] = react_1.default.useState(() => {
-        let statusNew = '';
-        if (inProp) {
-            statusNew = add_ ? exports.STATUS.add : exports.STATUS.entered;
-            if (enterOnAdd)
-                statusNew = exports.STATUS.enter;
-        }
-        else {
-            statusNew = (enterOnAdd || removeOnExited) ? exports.STATUS.removed : exports.STATUS.exited;
-            if (exitOnAdd)
-                statusNew = exports.STATUS.exit;
-        }
-        if (append)
-            statusNew = 'appended';
-        return statusNew;
-    });
-    const subs = react_1.default.useRef({
-        status: new subscription_1.default()
-    });
-    const refs = {
-        root: react_1.default.useRef(undefined),
-        status: react_1.default.useRef(undefined),
-        inProp: react_1.default.useRef(undefined),
-        prefix: react_1.default.useRef(undefined)
-    };
-    refs.status.current = status;
-    refs.inProp.current = inProp;
-    refs.prefix.current = prefix;
-    react_1.default.useEffect(() => {
-        let statusNew;
-        if (status === 'appended') {
-            if ((0, utils_1.is)('function', onTransition))
-                onTransition(refs.root.current, 'appended');
-            if ((0, utils_1.is)('function', onAppended))
-                onAppended(refs.root.current);
-        }
-        if (inProp) {
-            statusNew = add_ ? exports.STATUS.add : exports.STATUS.entered;
-            if (enterOnAdd)
-                statusNew = exports.STATUS.enter;
-        }
-        else {
-            statusNew = (enterOnAdd || removeOnExited) ? exports.STATUS.removed : exports.STATUS.exited;
-            if (exitOnAdd)
-                statusNew = exports.STATUS.exit;
-        }
-        if ((0, utils_1.is)('function', onInit))
-            onInit(refs.root.current);
-        // Update
-        update(statusNew);
-        setInit(true);
-    }, []);
-    react_1.default.useEffect(() => {
-        var _a, _b, _c;
-        if (init) {
-            let statusNew;
-            if (inProp) {
-                if ([exports.STATUS.enter, exports.STATUS.entered].indexOf(status) === -1)
-                    statusNew = exports.STATUS.enter;
-            }
-            else {
-                if ([exports.STATUS.exit, exports.STATUS.exited].indexOf(status) === -1)
-                    statusNew = exports.STATUS.exit;
-            }
-            // Added
-            const classNameValue = ((_b = (_a = refs.root.current) === null || _a === void 0 ? void 0 : _a.className) === null || _b === void 0 ? void 0 : _b.baseVal) || ((_c = refs.root.current) === null || _c === void 0 ? void 0 : _c.className);
-            if (inProp && (!refs.root.current || ((classNameValue === null || classNameValue === void 0 ? void 0 : classNameValue.indexOf('removed')) > -1))) {
-                // We add the element and get the ref value
-                // for update below to use it for enter
-                update('appended');
-                // Prevent update batches
-                setTimeout(() => update(statusNew), preEnterAppendTimeout);
-            }
-            else
-                update(statusNew);
-        }
-    }, [inProp]);
-    react_1.default.useEffect(() => {
-        if (status === exports.STATUS.exited && removeOnExited) {
-            updateStatus('removed');
-            // Subscriptions
-            subs.current.status.emit('removed');
-        }
-    }, [status]);
-    react_1.default.useEffect(() => {
-        if (!inProp_ && noAbruption && ['enter', 'entering'].indexOf(subs.current.status.value) > -1) {
-            const sub = (item) => {
-                if (item === 'entered') {
-                    setInProp(inProp_);
-                    subs.current.status.unsubscribe(sub);
-                }
-            };
-            subs.current.status.subscribe(sub);
-        }
-        else if (inProp_ && noAbruption && ['exit', 'exiting'].indexOf(subs.current.status.value) > -1) {
-            const sub = (item) => {
-                if (item === 'exited') {
-                    setInProp(inProp_);
-                    subs.current.status.unsubscribe(sub);
-                }
-            };
-            subs.current.status.subscribe(sub);
-        }
-        else if ((!inProp_ && noAbruption && subs.current.status.value === 'entered') ||
-            (inProp_ && noAbruption && subs.current.status.value === 'exited') ||
-            (inProp_ !== inProp))
-            setInProp(inProp_);
-    }, [inProp_]);
-    const update = async (status_, pause) => {
-        if (pause !== undefined)
-            await (0, utils_1.wait)(pause);
-        refs.status.current = status_;
-        switch (status_) {
-            case 'add':
-                return await add(status_);
-            case 'enter':
-                return await enter(status_);
-            case 'exit':
-                return await exit(status_);
-            case 'exited':
-                return updateStatus(status_);
-            default:
-                return updateStatus(status_);
-        }
-    };
-    const delay = react_1.default.useCallback(async (status_) => {
-        let value = delay_;
-        if ((0, utils_1.is)('string', value) &&
-            theme.transitions.duration[value] !== undefined)
-            value = theme.transitions.duration[value];
-        if ((0, utils_1.is)('object', value))
-            value = value[status_] !== undefined ? value[status_] : value.default;
-        if (!((0, utils_1.is)('number', value) && value > 0))
-            return;
-        await (0, utils_1.wait)(value);
-    }, [delay_, theme]);
-    const duration = react_1.default.useCallback(async (status_) => {
-        let value = duration_;
-        if ((0, utils_1.is)('string', value) &&
-            theme.transitions.duration[value] !== undefined)
-            value = theme.transitions.duration[value];
-        if ((0, utils_1.is)('object', value))
-            value = value[status_] !== undefined ? value[status_] : value.default;
-        if (!(0, utils_1.is)('number', value))
-            value = theme.transitions.duration.rg;
-        if (!((0, utils_1.is)('number', value) && value > 0))
-            return;
-        await (0, utils_1.wait)(value);
-    }, [duration_, theme]);
-    const add = async (status_) => {
-        if (!add_ ||
-            (refs.status.current !== status_))
-            return;
-        updateStatus('add');
-        // Reflow
-        (0, utils_2.reflow)(refs.root.current);
-        await delay('add');
-        // Prevent update batches
-        await (0, utils_1.wait)(14);
-        updateStatus('adding');
-        // await duration('add');
-        if (refs.status.current === status_)
-            updateStatus('added');
-    };
-    const enter = async (status_) => {
-        var _a;
-        if (!enter_ ||
-            (status_ !== 'appended' &&
-                (refs.status.current !== status_ || !refs.inProp.current)))
-            return;
-        updateStatus('enter');
-        // Reflow
-        (0, utils_2.reflow)(refs.root.current);
-        await delay('enter');
-        // Prevent update batches
-        await (0, utils_1.wait)(14);
-        updateStatus('entering');
-        await duration('enter');
-        if (((_a = refs.status.current) === null || _a === void 0 ? void 0 : _a.indexOf('exit')) === -1)
-            updateStatus('entered');
-    };
-    const exit = async (status_) => {
-        var _a;
-        if (!exit_ ||
-            (refs.status.current !== status_ || refs.inProp.current))
-            return;
-        updateStatus('exit');
-        // Reflow
-        (0, utils_2.reflow)(refs.root.current);
-        await delay('exit');
+    onTransition,
+    onInit,
+    onAppended,
+    onAdd,
+    onAdding,
+    onAdded,
+    onEnter,
+    onEntering,
+    onEntered: onEntered_,
+    onExit,
+    onExiting,
+    onExited,
+    onRemoved,
+    className,
+    children,
+    ref
+  } = props;
+  const [init, setInit] = _react.default.useState(false);
+  const [inProp, setInProp] = _react.default.useState(inProp_);
+  const [status, setStatus] = _react.default.useState(() => {
+    let statusNew = '';
+    if (inProp) {
+      statusNew = add_ ? STATUS.add : STATUS.entered;
+      if (enterOnAdd) statusNew = STATUS.enter;
+    } else {
+      statusNew = enterOnAdd || removeOnExited ? STATUS.removed : STATUS.exited;
+      if (exitOnAdd) statusNew = STATUS.exit;
+    }
+    if (append) statusNew = 'appended';
+    return statusNew;
+  });
+  const subs = _react.default.useRef({
+    status: new _subscription.default()
+  });
+  const refs = {
+    root: _react.default.useRef(undefined),
+    status: _react.default.useRef(undefined),
+    inProp: _react.default.useRef(undefined),
+    prefix: _react.default.useRef(undefined)
+  };
+  refs.status.current = status;
+  refs.inProp.current = inProp;
+  refs.prefix.current = prefix;
+  _react.default.useEffect(() => {
+    let statusNew;
+    if (status === 'appended') {
+      if ((0, _utils.is)('function', onTransition)) onTransition(refs.root.current, 'appended');
+      if ((0, _utils.is)('function', onAppended)) onAppended(refs.root.current);
+    }
+    if (inProp) {
+      statusNew = add_ ? STATUS.add : STATUS.entered;
+      if (enterOnAdd) statusNew = STATUS.enter;
+    } else {
+      statusNew = enterOnAdd || removeOnExited ? STATUS.removed : STATUS.exited;
+      if (exitOnAdd) statusNew = STATUS.exit;
+    }
+    if ((0, _utils.is)('function', onInit)) onInit(refs.root.current);
+
+    // Update
+    update(statusNew);
+    setInit(true);
+  }, []);
+  _react.default.useEffect(() => {
+    if (init) {
+      var _refs$root$current, _refs$root$current2;
+      let statusNew;
+      if (inProp) {
+        if ([STATUS.enter, STATUS.entered].indexOf(status) === -1) statusNew = STATUS.enter;
+      } else {
+        if ([STATUS.exit, STATUS.exited].indexOf(status) === -1) statusNew = STATUS.exit;
+      }
+
+      // Added
+      const classNameValue = ((_refs$root$current = refs.root.current) === null || _refs$root$current === void 0 || (_refs$root$current = _refs$root$current.className) === null || _refs$root$current === void 0 ? void 0 : _refs$root$current.baseVal) || ((_refs$root$current2 = refs.root.current) === null || _refs$root$current2 === void 0 ? void 0 : _refs$root$current2.className);
+      if (inProp && (!refs.root.current || (classNameValue === null || classNameValue === void 0 ? void 0 : classNameValue.indexOf('removed')) > -1)) {
+        // We add the element and get the ref value
+        // for update below to use it for enter
+        update('appended');
+
         // Prevent update batches
-        await (0, utils_1.wait)(14);
-        updateStatus('exiting');
-        await duration('exit');
-        if (((_a = refs.status.current) === null || _a === void 0 ? void 0 : _a.indexOf('enter')) === -1)
-            updateStatus('exited');
-    };
-    const onEntered = (element) => {
-        if ((0, utils_1.is)('function', onEntered_))
-            onEntered_(element);
-        if (run && inProp)
-            setInProp(false);
-    };
-    const updateStatus = (status_) => {
-        var _a, _b, _c;
-        setStatus(status_);
-        // Subscriptions
-        subs.current.status.emit(status_);
-        switch (status_) {
-            case 'appended':
-                if ((0, utils_1.is)('function', onTransition))
-                    onTransition(refs.root.current, status_);
-                if ((0, utils_1.is)('function', onAppended))
-                    onAppended(refs.root.current);
-                break;
-            case 'add':
-                if ((0, utils_1.is)('function', onTransition))
-                    onTransition(refs.root.current, status_);
-                if ((0, utils_1.is)('function', onAdd))
-                    onAdd(refs.root.current);
-                break;
-            case 'adding':
-                if ((0, utils_1.is)('function', onTransition))
-                    onTransition(refs.root.current, status_);
-                if ((0, utils_1.is)('function', onAdding))
-                    onAdding(refs.root.current);
-                break;
-            case 'added':
-                if ((0, utils_1.is)('function', onTransition))
-                    onTransition(refs.root.current, status_);
-                if ((0, utils_1.is)('function', onAdded))
-                    onAdded(refs.root.current);
-                break;
-            case 'enter':
-                if ((0, utils_1.is)('function', onTransition))
-                    onTransition(refs.root.current, status_);
-                if ((0, utils_1.is)('function', onEnter))
-                    onEnter(refs.root.current);
-                break;
-            case 'entering':
-                if ((0, utils_1.is)('function', onTransition))
-                    onTransition(refs.root.current, status_);
-                if ((0, utils_1.is)('function', onEntering))
-                    onEntering(refs.root.current);
-                break;
-            case 'entered':
-                if ((0, utils_1.is)('function', onTransition))
-                    onTransition(refs.root.current, status_);
-                if ((0, utils_1.is)('function', onEntered))
-                    onEntered(refs.root.current);
-                break;
-            case 'exit':
-                if ((0, utils_1.is)('function', onTransition))
-                    onTransition(refs.root.current, status_);
-                if ((0, utils_1.is)('function', onExit))
-                    onExit(refs.root.current);
-                break;
-            case 'exiting':
-                if ((0, utils_1.is)('function', onTransition))
-                    onTransition(refs.root.current, status_);
-                if ((0, utils_1.is)('function', onExiting))
-                    onExiting(refs.root.current);
-                break;
-            case 'exited':
-                if ((0, utils_1.is)('function', onTransition))
-                    onTransition(refs.root.current, status_);
-                if ((0, utils_1.is)('function', onExited))
-                    onExited(refs.root.current);
-                break;
-            case 'removed':
-                if ((0, utils_1.is)('function', onTransition))
-                    onTransition(refs.root.current, status_);
-                if ((0, utils_1.is)('function', onRemoved))
-                    onRemoved(refs.root.current);
-                break;
-            default:
-                break;
+        setTimeout(() => update(statusNew), preEnterAppendTimeout);
+      } else update(statusNew);
+    }
+  }, [inProp]);
+  _react.default.useEffect(() => {
+    if (status === STATUS.exited && removeOnExited) {
+      updateStatus('removed');
+
+      // Subscriptions
+      subs.current.status.emit('removed');
+    }
+  }, [status]);
+  _react.default.useEffect(() => {
+    if (!inProp_ && noAbruption && ['enter', 'entering'].indexOf(subs.current.status.value) > -1) {
+      const sub = item => {
+        if (item === 'entered') {
+          setInProp(inProp_);
+          subs.current.status.unsubscribe(sub);
         }
-        // Add className
-        if (className && (0, utils_1.is)('element', refs.root.current)) {
-            let className_ = (0, style_react_1.classNames)([(_b = (((_a = refs.root.current.className) === null || _a === void 0 ? void 0 : _a.baseVal) || refs.root.current.className)) === null || _b === void 0 ? void 0 : _b.split(' ')]);
-            // Remove all previous classes
-            className_ = className_.replace(new RegExp(`(^| )${refs.prefix.current || ''}(add|enter|exit)(ed|ing)?($| )`, 'g'), ' ');
-            // Add
-            className_ += ` ${refs.prefix.current || ''}${status_}`;
-            className_ = className_.replace(/ +/g, ' ').trim();
-            if ((_c = refs.root.current.className) === null || _c === void 0 ? void 0 : _c.baseVal)
-                refs.root.current.className.baseVal = className_;
-            else
-                refs.root.current.className = className_;
+      };
+      subs.current.status.subscribe(sub);
+    } else if (inProp_ && noAbruption && ['exit', 'exiting'].indexOf(subs.current.status.value) > -1) {
+      const sub = item => {
+        if (item === 'exited') {
+          setInProp(inProp_);
+          subs.current.status.unsubscribe(sub);
         }
-    };
-    if (status === 'removed')
-        return null;
-    const value_ = {
-        status
-    };
-    return ((0, jsx_runtime_1.jsx)(Context_1.default.Provider, Object.assign({ value: value_ }, { children: (0, utils_1.is)('function', children) ?
-            children(status, refs.root) :
-            react_1.default.cloneElement(children, {
-                ref: (item) => {
-                    if (ref) {
-                        if ((0, utils_1.is)('function', ref))
-                            ref(item);
-                        else
-                            ref.current = item;
-                    }
-                    refs.root.current = item;
-                }
-            }) })));
+      };
+      subs.current.status.subscribe(sub);
+    } else if (!inProp_ && noAbruption && subs.current.status.value === 'entered' || inProp_ && noAbruption && subs.current.status.value === 'exited' || inProp_ !== inProp) setInProp(inProp_);
+  }, [inProp_]);
+  const update = async (status_, pause) => {
+    if (pause !== undefined) await (0, _utils.wait)(pause);
+    refs.status.current = status_;
+    switch (status_) {
+      case 'add':
+        return await add(status_);
+      case 'enter':
+        return await enter(status_);
+      case 'exit':
+        return await exit(status_);
+      case 'exited':
+        return updateStatus(status_);
+      default:
+        return updateStatus(status_);
+    }
+  };
+  const delay = _react.default.useCallback(async status_ => {
+    let value = delay_;
+    if ((0, _utils.is)('string', value) && theme.transitions.duration[value] !== undefined) value = theme.transitions.duration[value];
+    if ((0, _utils.is)('object', value)) value = value[status_] !== undefined ? value[status_] : value.default;
+    if (!((0, _utils.is)('number', value) && value > 0)) return;
+    await (0, _utils.wait)(value);
+  }, [delay_, theme]);
+  const duration = _react.default.useCallback(async status_ => {
+    let value = duration_;
+    if ((0, _utils.is)('string', value) && theme.transitions.duration[value] !== undefined) value = theme.transitions.duration[value];
+    if ((0, _utils.is)('object', value)) value = value[status_] !== undefined ? value[status_] : value.default;
+    if (!(0, _utils.is)('number', value)) value = theme.transitions.duration.rg;
+    if (!((0, _utils.is)('number', value) && value > 0)) return;
+    await (0, _utils.wait)(value);
+  }, [duration_, theme]);
+  const add = async status_ => {
+    if (!add_ || refs.status.current !== status_) return;
+    updateStatus('add');
+
+    // Reflow
+    (0, _utils2.reflow)(refs.root.current);
+    await delay('add');
+
+    // Prevent update batches
+    await (0, _utils.wait)(14);
+    updateStatus('adding');
+
+    // await duration('add');
+
+    if (refs.status.current === status_) updateStatus('added');
+  };
+  const enter = async status_ => {
+    var _refs$status$current;
+    if (!enter_ || status_ !== 'appended' && (refs.status.current !== status_ || !refs.inProp.current)) return;
+    updateStatus('enter');
+
+    // Reflow
+    (0, _utils2.reflow)(refs.root.current);
+    await delay('enter');
+
+    // Prevent update batches
+    await (0, _utils.wait)(14);
+    updateStatus('entering');
+    await duration('enter');
+    if (((_refs$status$current = refs.status.current) === null || _refs$status$current === void 0 ? void 0 : _refs$status$current.indexOf('exit')) === -1) updateStatus('entered');
+  };
+  const exit = async status_ => {
+    var _refs$status$current2;
+    if (!exit_ || refs.status.current !== status_ || refs.inProp.current) return;
+    updateStatus('exit');
+
+    // Reflow
+    (0, _utils2.reflow)(refs.root.current);
+    await delay('exit');
+
+    // Prevent update batches
+    await (0, _utils.wait)(14);
+    updateStatus('exiting');
+    await duration('exit');
+    if (((_refs$status$current2 = refs.status.current) === null || _refs$status$current2 === void 0 ? void 0 : _refs$status$current2.indexOf('enter')) === -1) updateStatus('exited');
+  };
+  const onEntered = element => {
+    if ((0, _utils.is)('function', onEntered_)) onEntered_(element);
+    if (run && inProp) setInProp(false);
+  };
+  const updateStatus = status_ => {
+    setStatus(status_);
+
+    // Subscriptions
+    subs.current.status.emit(status_);
+    switch (status_) {
+      case 'appended':
+        if ((0, _utils.is)('function', onTransition)) onTransition(refs.root.current, status_);
+        if ((0, _utils.is)('function', onAppended)) onAppended(refs.root.current);
+        break;
+      case 'add':
+        if ((0, _utils.is)('function', onTransition)) onTransition(refs.root.current, status_);
+        if ((0, _utils.is)('function', onAdd)) onAdd(refs.root.current);
+        break;
+      case 'adding':
+        if ((0, _utils.is)('function', onTransition)) onTransition(refs.root.current, status_);
+        if ((0, _utils.is)('function', onAdding)) onAdding(refs.root.current);
+        break;
+      case 'added':
+        if ((0, _utils.is)('function', onTransition)) onTransition(refs.root.current, status_);
+        if ((0, _utils.is)('function', onAdded)) onAdded(refs.root.current);
+        break;
+      case 'enter':
+        if ((0, _utils.is)('function', onTransition)) onTransition(refs.root.current, status_);
+        if ((0, _utils.is)('function', onEnter)) onEnter(refs.root.current);
+        break;
+      case 'entering':
+        if ((0, _utils.is)('function', onTransition)) onTransition(refs.root.current, status_);
+        if ((0, _utils.is)('function', onEntering)) onEntering(refs.root.current);
+        break;
+      case 'entered':
+        if ((0, _utils.is)('function', onTransition)) onTransition(refs.root.current, status_);
+        if ((0, _utils.is)('function', onEntered)) onEntered(refs.root.current);
+        break;
+      case 'exit':
+        if ((0, _utils.is)('function', onTransition)) onTransition(refs.root.current, status_);
+        if ((0, _utils.is)('function', onExit)) onExit(refs.root.current);
+        break;
+      case 'exiting':
+        if ((0, _utils.is)('function', onTransition)) onTransition(refs.root.current, status_);
+        if ((0, _utils.is)('function', onExiting)) onExiting(refs.root.current);
+        break;
+      case 'exited':
+        if ((0, _utils.is)('function', onTransition)) onTransition(refs.root.current, status_);
+        if ((0, _utils.is)('function', onExited)) onExited(refs.root.current);
+        break;
+      case 'removed':
+        if ((0, _utils.is)('function', onTransition)) onTransition(refs.root.current, status_);
+        if ((0, _utils.is)('function', onRemoved)) onRemoved(refs.root.current);
+        break;
+      default:
+        break;
+    }
+
+    // Add className
+    if (className && (0, _utils.is)('element', refs.root.current)) {
+      var _ref, _refs$root$current$cl, _refs$root$current$cl2;
+      let className_ = (0, _styleReact.classNames)([(_ref = ((_refs$root$current$cl = refs.root.current.className) === null || _refs$root$current$cl === void 0 ? void 0 : _refs$root$current$cl.baseVal) || refs.root.current.className) === null || _ref === void 0 ? void 0 : _ref.split(' ')]);
+
+      // Remove all previous classes
+      className_ = className_.replace(new RegExp(`(^| )${refs.prefix.current || ''}(add|enter|exit)(ed|ing)?($| )`, 'g'), ' ');
+
+      // Add
+      className_ += ` ${refs.prefix.current || ''}${status_}`;
+      className_ = className_.replace(/ +/g, ' ').trim();
+      if ((_refs$root$current$cl2 = refs.root.current.className) !== null && _refs$root$current$cl2 !== void 0 && _refs$root$current$cl2.baseVal) refs.root.current.className.baseVal = className_;else refs.root.current.className = className_;
+    }
+  };
+  if (status === 'removed') return null;
+  const value_ = {
+    status
+  };
+  return /*#__PURE__*/_react.default.createElement(_Context.default.Provider, {
+    value: value_
+  }, (0, _utils.is)('function', children) ? children(status, refs.root) : /*#__PURE__*/_react.default.cloneElement(children, {
+    ref: item => {
+      if (ref) {
+        if ((0, _utils.is)('function', ref)) ref(item);else ref.current = item;
+      }
+      refs.root.current = item;
+    }
+  }));
 };
 Transition.displayName = 'onesy-Transition';
-exports.default = Transition;
+var _default = exports.default = Transition;