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

package/es/Tooltip/useTooltip.js

@@ -0,0 +1,290 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+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 __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());
+  });
+};
+import React, { useState, useRef, useEffect, useCallback } from "react";
+import {
+  getStylesAndLocation,
+  triggerEventTransform,
+  parsePlacement,
+  throttle,
+  useForkRef,
+  useUniqueId,
+  isMini
+} from "@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" } = parsePlacement(placement);
+  const childrenRef = useRef();
+  const [openStatus, setOpenStatus] = useState(defaultOpen);
+  const [arrowDirection, setArrowDirection] = useState(direction);
+  const [arrowLocation, setArrowLocation] = useState(location);
+  const [toolStyles, setToolStyles] = useState({});
+  const tipRef = useRef(null);
+  const tooltipId = useUniqueId();
+  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 = 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]
+  );
+  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]);
+  useEffect(() => {
+    if (!controlByUser)
+      return;
+    setOpenStatus(open != null ? open : false);
+    clearRef(open != null ? open : false);
+  }, [open, controlByUser]);
+  useEffect(() => {
+    if (!openStatus) {
+      setToolStyles({
+        visibility: "hidden"
+      });
+    }
+  }, [openStatus]);
+  const shouldListenGlobalClick = useCallback(() => {
+    if (typeof trigger === "string") {
+      return trigger === "click";
+    }
+    if (Array.isArray(trigger)) {
+      return trigger.includes("click");
+    }
+    return true;
+  }, [trigger]);
+  const clickEventHandler = useCallback(
+    (event) => {
+      if (!shouldListenGlobalClick()) {
+        return;
+      }
+      hideTooltip(event);
+    },
+    [shouldListenGlobalClick, hideTooltip]
+  );
+  const onMounted = throttle(() => __async(this, null, function* () {
+    if (!tipRef.current)
+      return;
+    const {
+      direction: newParsedDirection,
+      location: newParsedLocation = "center"
+    } = parsePlacement(placement);
+    const result = yield 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);
+  useEffect(() => {
+    const bindEvent = () => {
+      if (!openStatus)
+        return;
+      if (!controlByUser && shouldListenGlobalClick() && !isMini) {
+        document.addEventListener("click", clickEventHandler);
+      }
+      if (!isMini) {
+        window.addEventListener("resize", onMounted);
+      }
+      if (isOpen && !isMini) {
+        document.addEventListener("keydown", handleKeyDown);
+      }
+    };
+    const unbindEvent = () => {
+      if (!controlByUser && shouldListenGlobalClick() && !isMini) {
+        document.removeEventListener("click", clickEventHandler);
+      }
+      if (!isMini) {
+        window.removeEventListener("resize", onMounted);
+      }
+      if (!isMini) {
+        document.removeEventListener("keydown", handleKeyDown);
+      }
+    };
+    bindEvent();
+    return () => {
+      unbindEvent();
+    };
+  }, [
+    openStatus,
+    controlByUser,
+    shouldListenGlobalClick,
+    clickEventHandler,
+    onMounted,
+    isOpen,
+    handleKeyDown
+  ]);
+  const tooltipRef = useForkRef(tipRef, rootRef);
+  const getTooltipProps = useCallback(
+    (otherProps = {}) => {
+      return __spreadValues({
+        id: tooltipId,
+        ref: tooltipRef,
+        tabIndex: autoFocus ? -1 : void 0
+      }, otherProps);
+    },
+    [tooltipId, tooltipRef, autoFocus]
+  );
+  const getChildProps = useCallback(() => {
+    var _a;
+    let triggerEventOption = {};
+    if (!controlByUser) {
+      triggerEventOption = triggerEventTransform({
+        trigger,
+        click: triggerClick,
+        show: showTooltip,
+        hide: hideTooltip
+      });
+    }
+    const childProps = __spreadProps(__spreadValues({
+      ref: childrenRef
+    }, triggerEventOption), {
+      "aria-describedby": isOpen ? tooltipId : void 0
+    });
+    if (React.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 = useCallback(() => {
+    return {
+      onMounted
+    };
+  }, [onMounted]);
+  return {
+    getTooltipProps,
+    getChildProps,
+    getPortalProps,
+    tooltipRef,
+    isOpen,
+    toolStyles,
+    arrowDirection,
+    arrowLocation,
+    tooltipId
+  };
+}
+export {
+  useTooltip
+};

package/es/Transition/TransitionCore.js

@@ -49,7 +49,7 @@ var __async = (__this, __arguments, generator) => {
     step((generator = generator.apply(__this, __arguments)).next());
   });
 };
-import { useForkRef } from "@bifrostui/utils";
+import { useForkRef, useDidMountEffect } from "@bifrostui/utils";
 import React, { forwardRef, useEffect, useRef, useState } from "react";
 const TransitionCore = forwardRef(
   (props, ref) => {
@@ -62,7 +62,7 @@ const TransitionCore = forwardRef(
       enter = true,
       exit = true,
       timeout: _timeout,
-      delay: _delay,
+      delay: _delay = 0,
       onEnter,
       onEntering,
       onEntered,
@@ -100,13 +100,16 @@ const TransitionCore = forwardRef(
     });
     const innerNodeRef = useRef();
     const nodeRef = 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 = useRef(null);
     const appearStatus = useRef(inProp && appear ? ENTERING : null);
-    const isFirstRender = useRef(false);
     const cancelNextCallback = () => {
       var _a2;
       if (nextCallback.current !== null) {
@@ -143,8 +146,8 @@ const TransitionCore = 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);
         }));
@@ -163,7 +166,9 @@ const TransitionCore = 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;
@@ -172,34 +177,34 @@ const TransitionCore = 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();
         }
       }
     };
     useEffect(() => {
-      nextTick(() => updateStatus(appearStatus.current));
+      nextTick(() => updateStatus(appearStatus.current, true));
       return () => {
         cancelNextCallback();
       };
     }, []);
-    useEffect(() => {
-      const isMounted = status !== UNMOUNTED;
-      if (!isFirstRender.current) {
-        isFirstRender.current = true;
-        return;
-      }
+    useDidMountEffect(() => {
       let nextStatus = null;
       if (inProp) {
         if (status !== ENTERING && status !== ENTERED) {
@@ -208,13 +213,13 @@ const TransitionCore = 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/es/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;

package/es/TransitionGroup/TransitionGroup.js

@@ -0,0 +1,109 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+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 __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import React, { useState, useEffect, useRef } from "react";
+import {
+  getChildMapping,
+  getInitialChildMapping,
+  getNextChildMapping
+} from "./utils/childMapping";
+const TransitionGroupContext = React.createContext(null);
+const values = Object.values || ((obj) => Object.keys(obj).map((k) => obj[k]));
+const TransitionGroup = (props) => {
+  const _a = props, {
+    component: Component = "div",
+    children,
+    appear,
+    enter,
+    exit,
+    childFactory = (child) => child
+  } = _a, restProps = __objRest(_a, [
+    "component",
+    "children",
+    "appear",
+    "enter",
+    "exit",
+    "childFactory"
+  ]);
+  const [state, setState] = useState({
+    contextValue: { isMounting: true },
+    firstRender: true,
+    children: {}
+  });
+  const mountedRef = useRef(false);
+  const handleExitedRef = useRef((child, node) => {
+    const currentChildMapping = getChildMapping(children);
+    if (child.key in currentChildMapping)
+      return;
+    if (child.props.onExited) {
+      child.props.onExited(node);
+    }
+    if (mountedRef.current) {
+      setState((prevState) => {
+        const tempChildren = __spreadValues({}, prevState.children);
+        delete tempChildren[child.key];
+        return __spreadProps(__spreadValues({}, prevState), { children: tempChildren });
+      });
+    }
+  });
+  useEffect(() => {
+    mountedRef.current = true;
+    setState((prevState) => __spreadProps(__spreadValues({}, prevState), {
+      contextValue: { isMounting: false }
+    }));
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
+  useEffect(() => {
+    setState((prevState) => {
+      const { firstRender, children: prevChildMapping } = prevState;
+      const handleExited = handleExitedRef.current;
+      return __spreadProps(__spreadValues({}, prevState), {
+        children: firstRender ? getInitialChildMapping(props, handleExited) : getNextChildMapping(props, prevChildMapping, handleExited),
+        firstRender: false
+      });
+    });
+  }, [children, appear, enter, exit]);
+  const { contextValue, children: mappedChildren } = state;
+  const valuedChildren = values(mappedChildren).map(
+    childFactory
+  );
+  if (Component === null) {
+    return /* @__PURE__ */ React.createElement(TransitionGroupContext.Provider, { value: contextValue }, valuedChildren);
+  }
+  return /* @__PURE__ */ React.createElement(TransitionGroupContext.Provider, { value: contextValue }, /* @__PURE__ */ React.createElement(Component, __spreadValues({}, restProps), valuedChildren));
+};
+TransitionGroup.displayName = "BuiTransitionGroup";
+var TransitionGroup_default = TransitionGroup;
+export {
+  TransitionGroup_default as default
+};

package/es/TransitionGroup/TransitionGroup.types.d.ts

@@ -0,0 +1,47 @@
+import { OverrideProps } from '@bifrostui/types';
+import React, { ReactElement, ReactNode } from 'react';
+export interface TransitionGroupBaseProps {
+    /**
+     * 一组 `<Transition>` 组件，它们在离开时会切换为 `in` 和 `out`。`<TransitionGroup>` 会注入特定的过渡属性，因此，
+     * 如果您像我们的 `<Fade>` 示例一样包装 `<Transition>`，请记住将它们分散开来。
+     * 虽然此组件适用于多个 `Transition` 或 `CSSTransition`子组件，但有时您可能希望只有一个过渡子组件，
+     * 其中包含您希望在更改其内容时过渡出和入的内容（例如，路由、图像等）。在这种情况下，您可以在更改过渡子组件的内容时更改其 `key` 属性，
+     * 这将导致`TransitionGroup` 将该子组件过渡出和入。
+     */
+    children?: ReactNode;
+    /**
+     * 启用或禁用所有子元素的出现动画
+     * 请注意，指定此项将覆盖单个子组件 Transitions 上设置的任何默认设置
+     */
+    appear?: boolean;
+    /**
+     * 用于启用或禁用所有子级的进入动画
+     * 请注意，指定此项将覆盖单个子组件 Transitions 上设置的任何默认设置
+     */
+    enter?: boolean;
+    /**
+     * 用于启用或禁用所有子组件的退出动画。
+     * 请注意，指定此项将覆盖单个子组件 Transitions 上设置的任何默认设置
+     */
+    exit?: boolean;
+    /**
+     * 您可能需要在子组件退出时对其进行响应式更新。
+     * 这通常通过使用 `cloneElement` 来实现，但是，如果子组件退出，该元素已被移除，消费者无法访问。
+     * 如果您确实需要在子组件退出时对其进行更新，则可以提供一个 `childFactory`
+     * 来包装每个子组件，即使是即将退出的子组件。
+     * @default (child) => child
+     */
+    childFactory?: (child: ReactElement) => ReactElement;
+}
+export type TransitionGroupProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
+    props: P & TransitionGroupBaseProps & {
+        /**
+         * `<TransitionGroup>` 默认渲染一个 `<div>`。您可以通过提供 `component` 属性来更改此行为。
+         * 如果您使用的是 React v16+，并且希望避免使用包裹的 `<div>` 元素，
+         * 您可以传入 `component={null}`。如果包裹的 div 破坏了您的 CSS 样式，这将非常有用。
+         * @default div
+         */
+        component?: D | null;
+    };
+    defaultComponent: D;
+}, D>;

package/es/TransitionGroup/TransitionGroup.types.js

@@ -0,0 +1 @@
+export {};

package/es/TransitionGroup/demo/TransitionGroupDemo.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import './index.less';
+declare const TransitionGroupDemo: () => React.JSX.Element;
+export default TransitionGroupDemo;

package/es/TransitionGroup/demo/TransitionGroupDemo.js

@@ -0,0 +1,39 @@
+import { Button, TransitionGroup, CSSTransition } from "@bifrostui/react";
+import React, { useState } from "react";
+import "./index.css";
+const TransitionGroupDemo = () => {
+  const [items, setItems] = useState([
+    { id: 1, text: "Item 1" },
+    { id: 2, text: "Item 2" },
+    { id: 3, text: "Item 3" }
+  ]);
+  const handleAddItem = () => {
+    const id = items.length > 0 ? Math.max(...items.map((item) => item.id)) + 1 : 1;
+    setItems((prev) => [...prev, { id, text: `Item ${id}` }]);
+  };
+  const handleRemoveItem = (id) => {
+    setItems((prev) => prev.filter((item) => item.id !== id));
+  };
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Button, { onClick: handleAddItem }, "\u6DFB\u52A0\u9879\u76EE"), /* @__PURE__ */ React.createElement(TransitionGroup, { className: "transition-group-container" }, items.map((item) => /* @__PURE__ */ React.createElement(
+    CSSTransition,
+    {
+      key: item.id,
+      unmountOnExit: true,
+      timeout: 300,
+      classNames: "item"
+    },
+    /* @__PURE__ */ React.createElement("div", { className: "item-container" }, /* @__PURE__ */ React.createElement("span", null, item.text), /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        size: "small",
+        color: "danger",
+        onClick: () => handleRemoveItem(item.id)
+      },
+      "\u5220\u9664"
+    ))
+  ))));
+};
+var TransitionGroupDemo_default = TransitionGroupDemo;
+export {
+  TransitionGroupDemo_default as default
+};

package/es/TransitionGroup/demo/index.css

@@ -0,0 +1,33 @@
+.transition-group-container {
+  margin-top: 10px;
+}
+.transition-group-container .item-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px;
+  margin-bottom: 10px;
+  background-color: #f5f5f5;
+  border-radius: 4px;
+}
+.transition-group-container .item-enter {
+  opacity: 0;
+  transform: translateX(-100%);
+}
+.transition-group-container .item-enter-active {
+  opacity: 1;
+  transform: translateX(0);
+  transition: all 300ms ease-in;
+}
+.transition-group-container .item-exit {
+  opacity: 1;
+  transform: translateX(0);
+}
+.transition-group-container .item-exit-active {
+  opacity: 0;
+  transform: translateX(-100%);
+  transition: all 300ms ease-in;
+}
+.transition-group-container .bui-btn {
+  margin-bottom: 0;
+}

package/es/TransitionGroup/index.d.ts

@@ -0,0 +1,2 @@
+export { default, default as TransitionGroup } from './TransitionGroup';
+export * from './TransitionGroup.types';

package/es/TransitionGroup/index.js

@@ -0,0 +1,6 @@
+import { default as default2, default as default3 } from "./TransitionGroup";
+export * from "./TransitionGroup.types";
+export {
+  default3 as TransitionGroup,
+  default2 as default
+};