@qsxy/element-plus-react 1.0.0-next.21 → 1.0.0-next.23

package/dist/Popper/popperOptions.d.ts

@@ -1,23 +1,24 @@
-import { Options, Placement, StrictModifiers } from '@popperjs/core';
-interface IUsePopperProps {
+import { Options, Placement, State, StrictModifiers } from '@popperjs/core';
+import { PopperOptions } from './typings';
+type IUsePopperProps = {
     popperOptions?: Options;
     arrowOffset?: number;
     offset?: number;
     placement?: Placement;
     gpuAcceleration?: boolean;
-}
-interface ModifierProps {
+} & Pick<PopperOptions, 'fallbackPlacements'>;
+type ModifierProps = {
     offset?: number;
     arrow?: HTMLElement;
     arrowOffset?: number;
     gpuAcceleration?: boolean;
     placement?: Placement;
-}
+} & Pick<PopperOptions, 'fallbackPlacements'>;
 export default function usePopperOptions(props: IUsePopperProps, arrowElement: any): {
     modifiers: StrictModifiers[];
     placement: Placement;
     strategy: import("@popperjs/core").PositioningStrategy;
-    onFirstUpdate?: (arg0: Partial<import("@popperjs/core").State>) => void;
+    onFirstUpdate?: (arg0: Partial<State>) => void;
 };
 export declare function buildModifier(props: ModifierProps, externalModifiers?: StrictModifiers[]): StrictModifiers[];
 export {};

package/dist/Popper/popperOptions.js

@@ -10,6 +10,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import fromPairs from 'lodash/fromPairs';
 import { useMemo } from 'react';
 export default function usePopperOptions(props, arrowElement) {
   return useMemo(function () {
@@ -23,18 +24,46 @@ export default function usePopperOptions(props, arrowElement) {
         arrowOffset: props.arrowOffset,
         offset: props.offset,
         gpuAcceleration: props.gpuAcceleration,
-        placement: props.placement
+        placement: props.placement,
+        fallbackPlacements: props.fallbackPlacements
       }, (_props$popperOptions = props.popperOptions) === null || _props$popperOptions === void 0 ? void 0 : _props$popperOptions.modifiers)
     });
-  }, [arrowElement, props.arrowOffset, props.gpuAcceleration, props.offset, props.placement, props.popperOptions]);
+  }, [arrowElement, props.arrowOffset, props.fallbackPlacements, props.gpuAcceleration, props.offset, props.placement, props.popperOptions]);
 }
+function deriveState(state) {
+  var elements = Object.keys(state.elements);
+  var styles = fromPairs(elements.map(function (element) {
+    return [element, state.styles[element] || {}];
+  }));
+  var attributes = fromPairs(elements.map(function (element) {
+    return [element, state.attributes[element]];
+  }));
+  return {
+    styles: styles,
+    attributes: attributes
+  };
+}
+var states = {
+  styles: {
+    popper: {
+      position: 'absolute',
+      left: '0',
+      top: '0'
+    },
+    arrow: {
+      position: 'absolute'
+    }
+  },
+  attributes: {}
+};
 export function buildModifier(props) {
   var externalModifiers = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
   var arrow = props.arrow,
     arrowOffset = props.arrowOffset,
     offset = props.offset,
     gpuAcceleration = props.gpuAcceleration,
-    placement = props.placement;
+    placement = props.placement,
+    fallbackPlacements = props.fallbackPlacements;
   var modifiers = [{
     name: 'offset',
     options: {
@@ -50,15 +79,32 @@ export function buildModifier(props) {
         right: 5
       }
     }
+  }, {
+    name: 'updateState',
+    enabled: true,
+    phase: 'write',
+    fn: function fn(_ref) {
+      var state = _ref.state;
+      var derivedState = deriveState(state);
+      Object.assign(states, derivedState);
+    },
+    requires: ['computeStyles']
   }, {
     name: 'flip',
     options: {
       padding: 5,
       fallbackPlacements: function () {
-        if (placement === 'bottom-start') {
-          return ['bottom', 'top-start', 'right', 'left'];
+        if (fallbackPlacements) {
+          if (typeof fallbackPlacements === 'function') {
+            return fallbackPlacements(placement);
+          }
+          return fallbackPlacements;
+        } else {
+          if (placement === 'bottom-start') {
+            return ['bottom', 'top-start', 'right', 'left'];
+          }
+          return ['bottom', 'top', 'right', 'left'];
         }
-        return ['bottom', 'top', 'right', 'left'];
       }()
     }
   }, {
@@ -67,11 +113,13 @@ export function buildModifier(props) {
       gpuAcceleration: gpuAcceleration,
       adaptive: gpuAcceleration
     }
-  }, {
+  },
+  // { name: 'applyStyles', enabled: false },
+  {
     name: 'eventListeners',
     enabled: true,
     options: {
-      scroll: true,
+      scroll: false,
       resize: true
     }
   }

package/dist/Popper/typings.d.ts

@@ -31,6 +31,7 @@ export type PopperOptions = {
     popperStyle?: React.CSSProperties;
     effect?: 'light' | 'dark' | string;
     popperOptions?: Options;
+    fallbackPlacements?: Placement[] | ((placement?: Placement) => Placement[]);
 };
 export type PopperProps = {
     visible: boolean;

package/dist/Radio/Radio.js

@@ -131,8 +131,9 @@ var InternalRadio = function InternalRadio(props, ref) {
     }, /*#__PURE__*/React.createElement("input", _extends({
       key: name
     }, htmlInputProps, {
-      name: name,
-      value: value,
+      name: name
+      // value={value}
+      ,
       type: "radio",
       ref: inputRef,
       className: e(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["hidden"]))),
@@ -149,7 +150,7 @@ var InternalRadio = function InternalRadio(props, ref) {
     })), /*#__PURE__*/React.createElement("span", {
       className: e(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["label"])))
     }, children));
-  }, [b, checked, children, className, disabled, e, handleChange, htmlInputProps, is, m, name, readOnly, size, tooltipEvents, value]);
+  }, [b, checked, children, className, disabled, e, handleChange, htmlInputProps, is, m, name, readOnly, size, tooltipEvents]);
   if (plaintext) {
     return checked ? /*#__PURE__*/React.createElement("div", _extends({}, tooltipEvents, {
       ref: containerRef,

package/dist/Radio/RadioButton.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { RadioProps, RadioRef } from './typings';
-declare const RadioButton: React.ForwardRefExoticComponent<RadioProps<string | number | readonly string[]> & React.RefAttributes<RadioRef>>;
+declare const RadioButton: React.ForwardRefExoticComponent<RadioProps<import("./typings").ValueType> & React.RefAttributes<RadioRef>>;
 export default RadioButton;

package/dist/Radio/RadioButton.js

@@ -116,8 +116,9 @@ var RadioButton = /*#__PURE__*/forwardRef(function (props, ref) {
   }), /*#__PURE__*/React.createElement("input", _extends({
     key: name
   }, htmlInputProps, {
-    name: name,
-    value: value,
+    name: name
+    // value={value}
+    ,
     type: "radio",
     ref: inputRef,
     className: e(_templateObject || (_templateObject = _taggedTemplateLiteral(["original-radio"]))),

package/dist/Radio/typings.d.ts

@@ -1,6 +1,6 @@
 import React, { RefObject } from 'react';
 import { BaseProps, FormControlBaseProps, NativeProps } from '../types/common';
-export type ValueType = React.AllHTMLAttributes<HTMLInputElement>['value'];
+export type ValueType = string | number | boolean;
 export type RadioRef = {
     ref: RefObject<HTMLSpanElement>;
     input: HTMLInputElement;

package/dist/Table/Table.js

@@ -8,6 +8,8 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import classNames from 'classnames';
 import React, { forwardRef, useImperativeHandle, useMemo, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useConfigProvider } from "../ConfigProvider/ConfigProviderContext";
 import { Loading } from "../Loading";
 import Scrollbar from "../Scrollbar/Scrollbar";
 import { mergeDefaultProps } from "../Util";
@@ -21,13 +23,19 @@ import { useSelection } from "./hooks/useSelection";
 import { useTable } from "./hooks/useTable";
 import { TableIdManager } from "./util";
 function InternalTable(props, ref) {
+  var _useConfigProvider = useConfigProvider(),
+    locale = _useConfigProvider.locale;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
   props = mergeDefaultProps({
     data: [],
     fit: true,
     showHeader: true,
     tableLayout: 'fixed',
     style: {},
-    emptyText: '暂无数据',
+    emptyText: t('el.table.emptyText', {
+      lng: locale
+    }),
     selectOnIndeterminate: true
   }, props);
   var _props = props,

package/dist/Tooltip/Tooltip.js

@@ -55,8 +55,7 @@ var Tooltip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref) {
     _partitionAnimationPr2 = _slicedToArray(_partitionAnimationPr, 1),
     transitionProps = _partitionAnimationPr2[0];
   var _useClassNames = useClassNames(classPrefix),
-    e = _useClassNames.e,
-    is = _useClassNames.is;
+    e = _useClassNames.e;
   var _useControlled = useControlled(props.visible, props.defaultVisible),
     _useControlled2 = _slicedToArray(_useControlled, 2),
     visible = _useControlled2[0],
@@ -108,7 +107,9 @@ var Tooltip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref) {
       },
       onOpen: handleMouseEnter,
       onClose: handleMouseLeave,
-      hide: handleMouseLeave
+      hide: function hide() {
+        setVisible(false);
+      }
     };
   });
   return /*#__PURE__*/React.createElement(React.Fragment, null, Children.map(filterChildren, function (child) {

package/dist/Transition/CssTransiton.d.ts

@@ -0,0 +1,15 @@
+import React, { FC } from 'react';
+import { BaseProps, NativeProps } from '../types/common';
+export interface CssTransitonProps extends BaseProps<React.ReactElement>, NativeProps {
+}
+export declare enum STATUS {
+    UNMOUNTED = 0,
+    BEFORE_ENTER = 1,
+    ENTER = 2,
+    AFTER_ENTER = 3,
+    BEFORE_LEAVE = 4,
+    LEAVE = 5,
+    AFTER_LEAVE = 6
+}
+declare const CssTransiton: FC<CssTransitonProps>;
+export default CssTransiton;

package/dist/Transition/CssTransiton.js

@@ -0,0 +1,29 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { useComposeRef } from 'rc-util';
+import React from 'react';
+export var STATUS = /*#__PURE__*/function (STATUS) {
+  STATUS[STATUS["UNMOUNTED"] = 0] = "UNMOUNTED";
+  STATUS[STATUS["BEFORE_ENTER"] = 1] = "BEFORE_ENTER";
+  STATUS[STATUS["ENTER"] = 2] = "ENTER";
+  STATUS[STATUS["AFTER_ENTER"] = 3] = "AFTER_ENTER";
+  STATUS[STATUS["BEFORE_LEAVE"] = 4] = "BEFORE_LEAVE";
+  STATUS[STATUS["LEAVE"] = 5] = "LEAVE";
+  STATUS[STATUS["AFTER_LEAVE"] = 6] = "AFTER_LEAVE";
+  return STATUS;
+}({});
+var CssTransiton = function CssTransiton(props) {
+  var _props$children$props;
+  var _React$useState = React.useState(STATUS.UNMOUNTED),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    status = _React$useState2[0],
+    setStatus = _React$useState2[1];
+  var nodeRef = React.useRef(null);
+  var mergedRef = useComposeRef(nodeRef, (_props$children$props = props.children.props) === null || _props$children$props === void 0 ? void 0 : _props$children$props.ref);
+  return /*#__PURE__*/React.cloneElement(props.children);
+};
+export default CssTransiton;

package/dist/Transition/Transition.d.ts

@@ -19,6 +19,8 @@ export interface TransitionProps extends AnimationEventProps {
     /** Additional classes */
     className?: string;
     name?: string;
+    disabled?: boolean;
+    cssTransition?: boolean;
     display?: string;
     /** Show the component; triggers the enter or exit animation */
     visible?: boolean;

package/dist/Transition/Transition.js

@@ -1,4 +1,4 @@
-var _excluded = ["children", "className", "name"];
+var _excluded = ["children", "className", "name", "disabled", "cssTransition"];
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 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) { _defineProperty(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; }
@@ -247,7 +247,12 @@ var Transition = /*#__PURE__*/function (_Component) {
         children = _this$props5.children,
         className = _this$props5.className,
         name = _this$props5.name,
+        disabled = _this$props5.disabled,
+        cssTransition = _this$props5.cssTransition,
         rest = _objectWithoutProperties(_this$props5, _excluded);
+      if (disabled) {
+        return children;
+      }
       var childProps = omit(rest, ['animation', 'className', 'visible', 'unmountOnExit', 'transitionAppear', 'duration', 'beforeEnter', 'onEnter', 'afterEnter', 'beforeLeave', 'onLeave', 'afterLeave', 'nodeRef']);
       var transitionClassName;
       if (name) {
@@ -277,7 +282,7 @@ var Transition = /*#__PURE__*/function (_Component) {
           // @ts-ignore
           className: classNames(className, (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.className, transitionClassName),
           style: _objectSpread(_objectSpread({}, ((_child$props2 = child.props) === null || _child$props2 === void 0 ? void 0 : _child$props2.style) || {}), {}, {
-            display: _this5.state.status > 1 ? (_this5$props$display = _this5.props.display) !== null && _this5$props$display !== void 0 ? _this5$props$display : 'block' : 'none'
+            display: _this5.state.status > 1 || cssTransition ? (_this5$props$display = _this5.props.display) !== null && _this5$props$display !== void 0 ? _this5$props$display : 'block' : 'none'
           })
         }));
       });

package/dist/hooks/popperPropsUtils.js

@@ -1,7 +1,7 @@
 import forEach from 'lodash/forEach';
 import includes from 'lodash/includes';
 // @ts-ignore
-export var popperAllProps = ['popperInstRef', 'offset', 'placement', 'arrowOffset', 'showArrow', 'popperClass', 'popperStyle', 'name', 'display', 'unmountOnExit', 'transitionAppear', 'duration', 'gpuAcceleration', 'strategy', 'appendToBody', 'appendTo', 'popperOptions'];
+export var popperAllProps = ['popperInstRef', 'offset', 'placement', 'arrowOffset', 'showArrow', 'popperClass', 'popperStyle', 'name', 'display', 'unmountOnExit', 'transitionAppear', 'duration', 'gpuAcceleration', 'strategy', 'appendToBody', 'appendTo', 'popperOptions', 'fallbackPlacements'];
 
 /**
  * Returns an array of objects consisting of: props of html input element and rest.

package/dist/hooks/useCssTransiton.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+export interface CssTransitonProps {
+    nodeRef: React.RefObject<HTMLElement>;
+    visible: boolean;
+    disabled?: boolean;
+    duration?: number;
+    beforeLeave?: (el: HTMLElement) => void;
+    onLeave?: (el: HTMLElement) => void;
+    afterLeave?: (el: HTMLElement) => void;
+    beforeEnter?: (el: HTMLElement) => void;
+    onEnter?: (el: HTMLElement, done?: () => void) => void;
+    afterEnter?: (el: HTMLElement) => void;
+    done?: () => void;
+}
+export declare enum STATUS {
+    UNMOUNTED = 0,
+    BEFORE_LEAVE = 1,
+    LEAVE = 2,
+    AFTER_LEAVE = 3,
+    BEFORE_ENTER = 4,
+    ENTER = 5,
+    AFTER_ENTER = 6
+}
+declare const useCssTransiton: (props: CssTransitonProps) => {
+    mounted: boolean;
+};
+export default useCssTransiton;

package/dist/hooks/useCssTransiton.js

@@ -0,0 +1,87 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { addStyle } from 'dom-lib';
+import { useCallback, useEffect, useState } from 'react';
+export var STATUS = /*#__PURE__*/function (STATUS) {
+  STATUS[STATUS["UNMOUNTED"] = 0] = "UNMOUNTED";
+  STATUS[STATUS["BEFORE_LEAVE"] = 1] = "BEFORE_LEAVE";
+  STATUS[STATUS["LEAVE"] = 2] = "LEAVE";
+  STATUS[STATUS["AFTER_LEAVE"] = 3] = "AFTER_LEAVE";
+  STATUS[STATUS["BEFORE_ENTER"] = 4] = "BEFORE_ENTER";
+  STATUS[STATUS["ENTER"] = 5] = "ENTER";
+  STATUS[STATUS["AFTER_ENTER"] = 6] = "AFTER_ENTER";
+  return STATUS;
+}({});
+var useCssTransiton = function useCssTransiton(props) {
+  var nodeRef = props.nodeRef,
+    visible = props.visible,
+    disabled = props.disabled,
+    _props$duration = props.duration,
+    duration = _props$duration === void 0 ? 250 : _props$duration,
+    beforeLeave = props.beforeLeave,
+    onLeave = props.onLeave,
+    afterLeave = props.afterLeave,
+    beforeEnter = props.beforeEnter,
+    onEnter = props.onEnter,
+    afterEnter = props.afterEnter,
+    done = props.done;
+  var _useState = useState(STATUS.UNMOUNTED),
+    _useState2 = _slicedToArray(_useState, 2),
+    status = _useState2[0],
+    setStatus = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    mounted = _useState4[0],
+    setMounted = _useState4[1];
+  var startCssTransition = useCallback(function () {
+    setStatus(STATUS.BEFORE_LEAVE);
+  }, []);
+  useEffect(function () {
+    if (!disabled) {
+      if (mounted) {
+        startCssTransition();
+      } else {
+        setMounted(true);
+        done === null || done === void 0 || done();
+      }
+    } else {
+      done === null || done === void 0 || done();
+    }
+  }, [visible]);
+  useEffect(function () {
+    if (status === STATUS.BEFORE_LEAVE) {
+      beforeLeave === null || beforeLeave === void 0 || beforeLeave(nodeRef.current);
+      setStatus(STATUS.LEAVE);
+    } else if (status === STATUS.LEAVE) {
+      onLeave === null || onLeave === void 0 || onLeave(nodeRef.current);
+      setStatus(STATUS.AFTER_LEAVE);
+    } else if (status === STATUS.AFTER_LEAVE) {
+      setTimeout(function () {
+        afterLeave === null || afterLeave === void 0 || afterLeave(nodeRef.current);
+        setStatus(STATUS.BEFORE_ENTER);
+        addStyle(nodeRef.current, {
+          display: 'none'
+        });
+      }, duration);
+    } else if (status === STATUS.BEFORE_ENTER) {
+      beforeEnter === null || beforeEnter === void 0 || beforeEnter(nodeRef.current);
+      setStatus(STATUS.ENTER);
+    } else if (status === STATUS.ENTER) {
+      addStyle(nodeRef.current, {
+        display: ''
+      });
+      onEnter === null || onEnter === void 0 || onEnter(nodeRef.current, done);
+      setStatus(STATUS.AFTER_ENTER);
+    } else if (status === STATUS.AFTER_ENTER) {
+      afterEnter === null || afterEnter === void 0 || afterEnter(nodeRef.current);
+    }
+  }, [status]);
+  return {
+    mounted: mounted
+  };
+};
+export default useCssTransiton;

package/dist/hooks/useResizeObserver.d.ts

@@ -0,0 +1,42 @@
+import { RefObject } from 'react';
+export interface ResizeObserverSize {
+    readonly inlineSize: number;
+    readonly blockSize: number;
+}
+export interface ResizeObserverEntry {
+    readonly target: Element;
+    readonly contentRect: DOMRectReadOnly;
+    readonly borderBoxSize: ReadonlyArray<ResizeObserverSize>;
+    readonly contentBoxSize: ReadonlyArray<ResizeObserverSize>;
+    readonly devicePixelContentBoxSize: ReadonlyArray<ResizeObserverSize>;
+}
+export type ResizeObserverCallback = (entries: ReadonlyArray<ResizeObserverEntry>, observer: ResizeObserver) => void;
+export interface UseResizeObserverOptions {
+    /**
+     * Sets which box model the observer will observe changes to. Possible values
+     * are `content-box` (the default), `border-box` and `device-pixel-content-box`.
+     *
+     * @default 'content-box'
+     */
+    box?: ResizeObserverBoxOptions;
+    window?: Window;
+}
+declare class ResizeObserver {
+    constructor(callback: ResizeObserverCallback);
+    disconnect(): void;
+    observe(target: Element, options?: UseResizeObserverOptions): void;
+    unobserve(target: Element): void;
+}
+/**
+ * Reports changes to the dimensions of an Element's content or the border-box
+ *
+ * @param target
+ * @param callback
+ * @param options
+ */
+export declare function useResizeObserver(target: RefObject<HTMLElement>, callback: ResizeObserverCallback, options?: UseResizeObserverOptions): {
+    isSupported: boolean;
+    stop: () => void;
+};
+export type UseResizeObserverReturn = ReturnType<typeof useResizeObserver>;
+export {};

package/dist/hooks/useResizeObserver.js

@@ -0,0 +1,42 @@
+function _objectDestructuringEmpty(obj) { if (obj == null) throw new TypeError("Cannot destructure " + obj); }
+import { useEffect, useMemo } from 'react';
+/**
+ * Reports changes to the dimensions of an Element's content or the border-box
+ *
+ * @param target
+ * @param callback
+ * @param options
+ */
+export function useResizeObserver(target, callback) {
+  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  var observerOptions = Object.assign({}, (_objectDestructuringEmpty(options), options));
+  var observer;
+  var isSupported = useMemo(function () {
+    return window && 'ResizeObserver' in window;
+  }, []);
+  var cleanup = function cleanup() {
+    if (observer) {
+      observer.disconnect();
+      observer = undefined;
+    }
+  };
+  var stop = function stop() {
+    cleanup();
+  };
+  useEffect(function () {
+    cleanup();
+    if (isSupported && window) {
+      observer = new ResizeObserver(callback);
+      if (target.current) {
+        observer.observe(target.current, observerOptions);
+      }
+    }
+    return function () {
+      cleanup();
+    };
+  }, []);
+  return {
+    isSupported: isSupported,
+    stop: stop
+  };
+}