@bifrostui/react 2.0.0-alpha.0 → 2.0.0-alpha.10

package/dist/Tooltip/__tests__/fixtures/A11yDemos.js

@@ -0,0 +1,100 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var A11yDemos_exports = {};
+__export(A11yDemos_exports, {
+  accessibilityTooltipDemo: () => accessibilityTooltipDemo,
+  basicTooltipDemo: () => basicTooltipDemo,
+  complexContentTooltipDemo: () => complexContentTooltipDemo,
+  complexInteractionTooltipDemo: () => complexInteractionTooltipDemo,
+  default: () => A11yDemos_default,
+  edgeCaseTooltipDemo: () => edgeCaseTooltipDemo,
+  offsetTooltipDemo: () => offsetTooltipDemo,
+  placementTooltipDemo: () => placementTooltipDemo,
+  triggerTooltipDemo: () => triggerTooltipDemo
+});
+module.exports = __toCommonJS(A11yDemos_exports);
+var import_react = __toESM(require("react"));
+var import_Tooltip = __toESM(require("../../Tooltip"));
+const basicTooltipDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(import_Tooltip.default, { title: "\u8FD9\u662F\u4E00\u4E2A\u57FA\u7840\u7684\u63D0\u793A\u6587\u672C" }, /* @__PURE__ */ import_react.default.createElement("button", { type: "button" }, "\u57FA\u7840Tooltip")));
+};
+const placementTooltipDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", gap: "10px", flexWrap: "wrap" } }, /* @__PURE__ */ import_react.default.createElement(import_Tooltip.default, { title: "\u9876\u90E8\u63D0\u793A", placement: "top" }, /* @__PURE__ */ import_react.default.createElement("button", { type: "button" }, "\u9876\u90E8")), /* @__PURE__ */ import_react.default.createElement(import_Tooltip.default, { title: "\u53F3\u4FA7\u63D0\u793A", placement: "right" }, /* @__PURE__ */ import_react.default.createElement("button", { type: "button" }, "\u53F3\u4FA7")), /* @__PURE__ */ import_react.default.createElement(import_Tooltip.default, { title: "\u5E95\u90E8\u63D0\u793A", placement: "bottom" }, /* @__PURE__ */ import_react.default.createElement("button", { type: "button" }, "\u5E95\u90E8")), /* @__PURE__ */ import_react.default.createElement(import_Tooltip.default, { title: "\u5DE6\u4FA7\u63D0\u793A", placement: "left" }, /* @__PURE__ */ import_react.default.createElement("button", { type: "button" }, "\u5DE6\u4FA7")));
+};
+const triggerTooltipDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", gap: "10px" } }, /* @__PURE__ */ import_react.default.createElement(import_Tooltip.default, { title: "\u70B9\u51FB\u89E6\u53D1\u7684\u63D0\u793A", trigger: "click" }, /* @__PURE__ */ import_react.default.createElement("button", { type: "button" }, "\u70B9\u51FB\u89E6\u53D1")), /* @__PURE__ */ import_react.default.createElement(import_Tooltip.default, { title: "\u60AC\u505C\u89E6\u53D1\u7684\u63D0\u793A", trigger: "hover" }, /* @__PURE__ */ import_react.default.createElement("button", { type: "button" }, "\u60AC\u505C\u89E6\u53D1")));
+};
+const accessibilityTooltipDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", gap: "10px", flexDirection: "column" } }, /* @__PURE__ */ import_react.default.createElement(import_Tooltip.default, { title: "\u81EA\u5B9A\u4E49\u89D2\u8272\u7684\u63D0\u793A", role: "status", "aria-label": "\u72B6\u6001\u63D0\u793A" }, /* @__PURE__ */ import_react.default.createElement("button", { type: "button" }, "\u72B6\u6001\u63D0\u793A")), /* @__PURE__ */ import_react.default.createElement(import_Tooltip.default, { title: "\u652F\u6301Escape\u952E\u5173\u95ED", closeOnEscape: true, trigger: "click" }, /* @__PURE__ */ import_react.default.createElement("button", { type: "button" }, "Escape\u952E\u5173\u95ED")));
+};
+const complexInteractionTooltipDemo = () => {
+  const ComplexInteractionTooltipDemo = () => {
+    const [open, setOpen] = import_react.default.useState(false);
+    return /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", gap: "10px", alignItems: "center" } }, /* @__PURE__ */ import_react.default.createElement(
+      import_Tooltip.default,
+      {
+        title: "\u53D7\u63A7\u6A21\u5F0F\u7684\u63D0\u793A",
+        open,
+        onOpenChange: (_, data) => setOpen(data.open)
+      },
+      /* @__PURE__ */ import_react.default.createElement("button", { type: "button" }, "\u53D7\u63A7Tooltip")
+    ), /* @__PURE__ */ import_react.default.createElement("button", { type: "button", onClick: () => setOpen(!open) }, "\u5916\u90E8\u63A7\u5236: ", open ? "\u5173\u95ED" : "\u6253\u5F00"));
+  };
+  return /* @__PURE__ */ import_react.default.createElement(ComplexInteractionTooltipDemo, null);
+};
+const complexContentTooltipDemo = () => {
+  const ComplexContent = () => /* @__PURE__ */ import_react.default.createElement("div", { style: { maxWidth: "200px" } }, /* @__PURE__ */ import_react.default.createElement("h4", { style: { margin: "0 0 8px 0", fontSize: "14px" } }, "\u590D\u6742\u5185\u5BB9"), /* @__PURE__ */ import_react.default.createElement("p", { style: { margin: "0 0 8px 0", fontSize: "12px" } }, "\u8FD9\u662F\u4E00\u4E2A\u5305\u542B\u591A\u79CD\u5143\u7D20\u7684\u590D\u6742\u63D0\u793A\u5185\u5BB9\u3002"), /* @__PURE__ */ import_react.default.createElement("ul", { style: { margin: 0, fontSize: "12px", paddingLeft: "16px" } }, /* @__PURE__ */ import_react.default.createElement("li", null, "\u9879\u76EE\u4E00"), /* @__PURE__ */ import_react.default.createElement("li", null, "\u9879\u76EE\u4E8C")));
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(import_Tooltip.default, { title: /* @__PURE__ */ import_react.default.createElement(ComplexContent, null) }, /* @__PURE__ */ import_react.default.createElement("button", { type: "button" }, "\u590D\u6742\u5185\u5BB9Tooltip")));
+};
+const offsetTooltipDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", gap: "10px" } }, /* @__PURE__ */ import_react.default.createElement(import_Tooltip.default, { title: "\u65E0\u504F\u79FB", offset: 0 }, /* @__PURE__ */ import_react.default.createElement("button", { type: "button" }, "\u65E0\u504F\u79FB")), /* @__PURE__ */ import_react.default.createElement(import_Tooltip.default, { title: "\u504F\u79FB10px", offset: 10 }, /* @__PURE__ */ import_react.default.createElement("button", { type: "button" }, "\u504F\u79FB10px")), /* @__PURE__ */ import_react.default.createElement(import_Tooltip.default, { title: "\u504F\u79FB20px", offset: 20 }, /* @__PURE__ */ import_react.default.createElement("button", { type: "button" }, "\u504F\u79FB20px")));
+};
+const edgeCaseTooltipDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", gap: "10px", flexDirection: "column" } }, /* @__PURE__ */ import_react.default.createElement(import_Tooltip.default, { title: "" }, /* @__PURE__ */ import_react.default.createElement("button", { type: "button" }, "\u7A7A\u5185\u5BB9")), /* @__PURE__ */ import_react.default.createElement(import_Tooltip.default, { title: "\u5F88\u957F\u5F88\u957F\u5F88\u957F\u5F88\u957F\u5F88\u957F\u5F88\u957F\u5F88\u957F\u5F88\u957F\u5F88\u957F\u5F88\u957F\u5F88\u957F\u5F88\u957F\u7684\u63D0\u793A\u6587\u672C\u5185\u5BB9" }, /* @__PURE__ */ import_react.default.createElement("button", { type: "button" }, "\u957F\u6587\u672C")), /* @__PURE__ */ import_react.default.createElement(import_Tooltip.default, { title: `\u7279\u6B8A\u5B57\u7B26 !@#$%^&*()_+-=[]{}|;':",./` }, /* @__PURE__ */ import_react.default.createElement("button", { type: "button" }, "\u7279\u6B8A\u5B57\u7B26")));
+};
+var A11yDemos_default = {
+  basicTooltipDemo,
+  placementTooltipDemo,
+  triggerTooltipDemo,
+  accessibilityTooltipDemo,
+  complexInteractionTooltipDemo,
+  complexContentTooltipDemo,
+  offsetTooltipDemo,
+  edgeCaseTooltipDemo
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  accessibilityTooltipDemo,
+  basicTooltipDemo,
+  complexContentTooltipDemo,
+  complexInteractionTooltipDemo,
+  edgeCaseTooltipDemo,
+  offsetTooltipDemo,
+  placementTooltipDemo,
+  triggerTooltipDemo
+});

package/dist/Tooltip/useTooltip.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import { TooltipProps } from './Tooltip.types';
+export interface UseTooltipParameters {
+    title?: React.ReactNode;
+    defaultOpen?: boolean;
+    open?: boolean;
+    offset?: number;
+    placement?: TooltipProps['placement'];
+    trigger?: TooltipProps['trigger'];
+    onOpenChange?: TooltipProps['onOpenChange'];
+    autoFocus?: boolean;
+    closeOnEscape?: boolean;
+    children: React.ReactElement;
+    rootRef?: React.Ref<HTMLElement>;
+}
+export interface UseTooltipReturnValue {
+    getTooltipProps: (otherProps?: Record<string, unknown>) => Record<string, unknown>;
+    getChildProps: () => Record<string, unknown>;
+    getPortalProps: () => {
+        onMounted: () => void;
+    };
+    tooltipRef: React.RefCallback<HTMLElement>;
+    isOpen: boolean;
+    toolStyles: React.CSSProperties;
+    arrowDirection: string;
+    arrowLocation: string;
+    tooltipId: string;
+}
+export declare function useTooltip(parameters: UseTooltipParameters): UseTooltipReturnValue;

package/dist/Tooltip/useTooltip.js

@@ -0,0 +1,313 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+var useTooltip_exports = {};
+__export(useTooltip_exports, {
+  useTooltip: () => useTooltip
+});
+module.exports = __toCommonJS(useTooltip_exports);
+var import_react = __toESM(require("react"));
+var import_utils = require("@bifrostui/utils");
+function useTooltip(parameters) {
+  const {
+    defaultOpen = false,
+    open,
+    offset,
+    placement = "top",
+    trigger = "click",
+    onOpenChange,
+    autoFocus = false,
+    closeOnEscape = false,
+    children,
+    rootRef
+  } = parameters;
+  const controlByUser = typeof open !== "undefined";
+  const { direction, location = "center" } = (0, import_utils.parsePlacement)(placement);
+  const childrenRef = (0, import_react.useRef)();
+  const [openStatus, setOpenStatus] = (0, import_react.useState)(defaultOpen);
+  const [arrowDirection, setArrowDirection] = (0, import_react.useState)(direction);
+  const [arrowLocation, setArrowLocation] = (0, import_react.useState)(location);
+  const [toolStyles, setToolStyles] = (0, import_react.useState)({});
+  const tipRef = (0, import_react.useRef)(null);
+  const tooltipId = (0, import_utils.useUniqueId)();
+  (0, import_react.useEffect)(() => {
+    setArrowDirection(direction);
+    setArrowLocation(location);
+  }, [direction, location]);
+  const isOpen = open || openStatus;
+  const clearRef = (status) => {
+    if (status === false) {
+      tipRef.current = null;
+    }
+  };
+  const changeOpenStatus = (event, status) => {
+    if (controlByUser)
+      return;
+    clearRef(status);
+    setOpenStatus(status);
+    onOpenChange == null ? void 0 : onOpenChange(event, { open: status });
+  };
+  const triggerClick = (event) => {
+    event.stopPropagation();
+    const targetStatus = !openStatus;
+    changeOpenStatus(event, targetStatus);
+  };
+  const hideTooltip = (event) => {
+    changeOpenStatus(event, false);
+  };
+  const showTooltip = (event) => {
+    changeOpenStatus(event, true);
+  };
+  const handleKeyDown = (0, import_react.useCallback)(
+    (event) => {
+      if (closeOnEscape && event.key === "Escape" && isOpen) {
+        event.preventDefault();
+        event.stopPropagation();
+        hideTooltip(event);
+        if (childrenRef.current && "focus" in childrenRef.current) {
+          childrenRef.current.focus();
+        }
+      }
+    },
+    [closeOnEscape, isOpen, hideTooltip]
+  );
+  (0, import_react.useEffect)(() => {
+    if (isOpen && autoFocus && tipRef.current) {
+      const timer = setTimeout(() => {
+        if (tipRef.current && "focus" in tipRef.current) {
+          tipRef.current.focus();
+        }
+      }, 0);
+      return () => clearTimeout(timer);
+    }
+    return void 0;
+  }, [isOpen, autoFocus]);
+  (0, import_react.useEffect)(() => {
+    if (!controlByUser)
+      return;
+    setOpenStatus(open != null ? open : false);
+    clearRef(open != null ? open : false);
+  }, [open, controlByUser]);
+  (0, import_react.useEffect)(() => {
+    if (!openStatus) {
+      setToolStyles({
+        visibility: "hidden"
+      });
+    }
+  }, [openStatus]);
+  const shouldListenGlobalClick = (0, import_react.useCallback)(() => {
+    if (typeof trigger === "string") {
+      return trigger === "click";
+    }
+    if (Array.isArray(trigger)) {
+      return trigger.includes("click");
+    }
+    return true;
+  }, [trigger]);
+  const clickEventHandler = (0, import_react.useCallback)(
+    (event) => {
+      if (!shouldListenGlobalClick()) {
+        return;
+      }
+      hideTooltip(event);
+    },
+    [shouldListenGlobalClick, hideTooltip]
+  );
+  const onMounted = (0, import_utils.throttle)(() => __async(this, null, function* () {
+    if (!tipRef.current)
+      return;
+    const {
+      direction: newParsedDirection,
+      location: newParsedLocation = "center"
+    } = (0, import_utils.parsePlacement)(placement);
+    const result = yield (0, import_utils.getStylesAndLocation)({
+      childrenRef,
+      arrowDirection: newParsedDirection,
+      arrowLocation: newParsedLocation,
+      offsetSpacing: offset || 0,
+      tipRef
+    });
+    if (!result)
+      return;
+    const { styles, newArrowDirection, newArrowLocation } = result;
+    if (newArrowDirection !== arrowDirection) {
+      setArrowDirection(newArrowDirection);
+    }
+    if (newArrowLocation !== arrowLocation) {
+      setArrowLocation(newArrowLocation);
+    }
+    setToolStyles(styles);
+  }), 100);
+  (0, import_react.useEffect)(() => {
+    const bindEvent = () => {
+      if (!openStatus)
+        return;
+      if (!controlByUser && shouldListenGlobalClick() && !import_utils.isMini) {
+        document.addEventListener("click", clickEventHandler);
+      }
+      if (!import_utils.isMini) {
+        window.addEventListener("resize", onMounted);
+      }
+      if (isOpen && !import_utils.isMini) {
+        document.addEventListener("keydown", handleKeyDown);
+      }
+    };
+    const unbindEvent = () => {
+      if (!controlByUser && shouldListenGlobalClick() && !import_utils.isMini) {
+        document.removeEventListener("click", clickEventHandler);
+      }
+      if (!import_utils.isMini) {
+        window.removeEventListener("resize", onMounted);
+      }
+      if (!import_utils.isMini) {
+        document.removeEventListener("keydown", handleKeyDown);
+      }
+    };
+    bindEvent();
+    return () => {
+      unbindEvent();
+    };
+  }, [
+    openStatus,
+    controlByUser,
+    shouldListenGlobalClick,
+    clickEventHandler,
+    onMounted,
+    isOpen,
+    handleKeyDown
+  ]);
+  const tooltipRef = (0, import_utils.useForkRef)(tipRef, rootRef);
+  const getTooltipProps = (0, import_react.useCallback)(
+    (otherProps = {}) => {
+      return __spreadValues({
+        id: tooltipId,
+        ref: tooltipRef,
+        tabIndex: autoFocus ? -1 : void 0
+      }, otherProps);
+    },
+    [tooltipId, tooltipRef, autoFocus]
+  );
+  const getChildProps = (0, import_react.useCallback)(() => {
+    var _a;
+    let triggerEventOption = {};
+    if (!controlByUser) {
+      triggerEventOption = (0, import_utils.triggerEventTransform)({
+        trigger,
+        click: triggerClick,
+        show: showTooltip,
+        hide: hideTooltip
+      });
+    }
+    const childProps = __spreadProps(__spreadValues({
+      ref: childrenRef
+    }, triggerEventOption), {
+      "aria-describedby": isOpen ? tooltipId : void 0
+    });
+    if (import_react.default.isValidElement(children)) {
+      const elementType = typeof children.type === "string" ? children.type : ((_a = children.type) == null ? void 0 : _a.displayName) || "";
+      const interactiveElements = [
+        "button",
+        "a",
+        "input",
+        "select",
+        "textarea"
+      ];
+      const childElementProps = children.props;
+      const isInteractive = interactiveElements.includes(elementType.toLowerCase()) || (childElementProps == null ? void 0 : childElementProps.role) === "button" || (childElementProps == null ? void 0 : childElementProps.role) === "menuitem" || (childElementProps == null ? void 0 : childElementProps.role) === "tab" || (childElementProps == null ? void 0 : childElementProps.tabIndex) !== void 0;
+      if (isInteractive) {
+        childProps["aria-expanded"] = isOpen;
+      }
+    }
+    return childProps;
+  }, [
+    controlByUser,
+    trigger,
+    triggerClick,
+    showTooltip,
+    hideTooltip,
+    isOpen,
+    tooltipId,
+    children
+  ]);
+  const getPortalProps = (0, import_react.useCallback)(() => {
+    return {
+      onMounted
+    };
+  }, [onMounted]);
+  return {
+    getTooltipProps,
+    getChildProps,
+    getPortalProps,
+    tooltipRef,
+    isOpen,
+    toolStyles,
+    arrowDirection,
+    arrowLocation,
+    tooltipId
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useTooltip
+});

package/dist/Transition/TransitionCore.js

@@ -92,7 +92,7 @@ const TransitionCore = (0, import_react.forwardRef)(
       enter = true,
       exit = true,
       timeout: _timeout,
-      delay: _delay,
+      delay: _delay = 0,
       onEnter,
       onEntering,
       onEntered,
@@ -130,13 +130,16 @@ const TransitionCore = (0, import_react.forwardRef)(
     });
     const innerNodeRef = (0, import_react.useRef)();
     const nodeRef = (0, import_utils.useForkRef)(innerNodeRef, ref);
-    const timeout = typeof _timeout === "object" ? __spreadValues({}, _timeout) : { enter: _timeout, exit: _timeout };
-    const delay = typeof _delay === "object" ? _delay : { enter: _delay, exit: _delay };
-    timeout.enter += delay.enter;
-    timeout.exit += delay.exit;
+    const timeout = typeof _timeout === "object" ? __spreadValues({}, _timeout) : { enter: _timeout, exit: _timeout, appear: _timeout };
+    const delay = typeof _delay === "object" ? _delay : { enter: _delay, exit: _delay, appear: _delay };
+    if (timeout.enter !== void 0)
+      timeout.enter += delay.enter || 0;
+    if (timeout.exit !== void 0)
+      timeout.exit += delay.exit || 0;
+    if (timeout.appear !== void 0)
+      timeout.appear += delay.appear || 0;
     const nextCallback = (0, import_react.useRef)(null);
     const appearStatus = (0, import_react.useRef)(inProp && appear ? ENTERING : null);
-    const isFirstRender = (0, import_react.useRef)(false);
     const cancelNextCallback = () => {
       var _a2;
       if (nextCallback.current !== null) {
@@ -173,8 +176,8 @@ const TransitionCore = (0, import_react.forwardRef)(
         (_a2 = nextCallback == null ? void 0 : nextCallback.current) == null ? void 0 : _a2.call(nextCallback);
       });
     };
-    const performEnter = () => __async(void 0, null, function* () {
-      if (!enter) {
+    const performEnter = (mounting) => __async(void 0, null, function* () {
+      if (!enter && !mounting) {
         safeSetState(ENTERED, () => __async(void 0, null, function* () {
           yield onEntered == null ? void 0 : onEntered(innerNodeRef == null ? void 0 : innerNodeRef.current);
         }));
@@ -193,7 +196,9 @@ const TransitionCore = (0, import_react.forwardRef)(
     });
     const performExit = () => __async(void 0, null, function* () {
       if (!exit) {
-        safeSetState(unmountOnExit ? UNMOUNTED : EXITED, () => __async(void 0, null, function* () {
+        safeSetState(EXITED, () => __async(void 0, null, function* () {
+          if (unmountOnExit)
+            setStatus(UNMOUNTED);
           yield onExited == null ? void 0 : onExited(innerNodeRef == null ? void 0 : innerNodeRef.current);
         }));
         return;
@@ -202,34 +207,34 @@ const TransitionCore = (0, import_react.forwardRef)(
       safeSetState(EXITING, () => __async(void 0, null, function* () {
         yield onExiting == null ? void 0 : onExiting(innerNodeRef == null ? void 0 : innerNodeRef.current);
         onTransitionEnd(timeout.exit, () => {
-          safeSetState(unmountOnExit ? UNMOUNTED : EXITED, () => __async(void 0, null, function* () {
+          safeSetState(EXITED, () => __async(void 0, null, function* () {
+            if (unmountOnExit)
+              setStatus(UNMOUNTED);
             yield onExited == null ? void 0 : onExited(innerNodeRef == null ? void 0 : innerNodeRef.current);
           }));
         });
       }));
     });
-    const updateStatus = (nextStatus) => {
+    const updateStatus = (nextStatus, mounting) => {
       if (nextStatus !== null) {
         cancelNextCallback();
         if (nextStatus === ENTERING) {
-          performEnter();
+          if (unmountOnExit || mountOnEnter) {
+            forceReflow(innerNodeRef == null ? void 0 : innerNodeRef.current);
+          }
+          performEnter(mounting);
         } else if (nextStatus === EXITING) {
           performExit();
         }
       }
     };
     (0, import_react.useEffect)(() => {
-      nextTick(() => updateStatus(appearStatus.current));
+      nextTick(() => updateStatus(appearStatus.current, true));
       return () => {
         cancelNextCallback();
       };
     }, []);
-    (0, import_react.useEffect)(() => {
-      const isMounted = status !== UNMOUNTED;
-      if (!isFirstRender.current) {
-        isFirstRender.current = true;
-        return;
-      }
+    (0, import_utils.useDidMountEffect)(() => {
       let nextStatus = null;
       if (inProp) {
         if (status !== ENTERING && status !== ENTERED) {
@@ -238,13 +243,13 @@ const TransitionCore = (0, import_react.forwardRef)(
       } else if (status === ENTERING || status === ENTERED) {
         nextStatus = EXITING;
       }
-      if (isMounted)
-        updateStatus(nextStatus);
-      else
-        safeSetState(inProp ? "EXITED" : "ENTERED", () => {
-          forceReflow(innerNodeRef == null ? void 0 : innerNodeRef.current);
-          updateStatus(nextStatus);
+      if (inProp && status === UNMOUNTED) {
+        safeSetState(EXITED, () => {
+          updateStatus(nextStatus, false);
         });
+      } else {
+        updateStatus(nextStatus, false);
+      }
     }, [inProp]);
     if (status === UNMOUNTED)
       return null;

package/dist/TransitionGroup/TransitionGroup.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { TransitionGroupProps } from './TransitionGroup.types';
+declare const TransitionGroup: {
+    (props: TransitionGroupProps): React.JSX.Element;
+    displayName: string;
+};
+export default TransitionGroup;