@hi-ui/layout 4.0.0 → 5.0.0-alpha.0

package/lib/cjs/SearchTrigger.js

@@ -17,14 +17,18 @@ var tslib = require('tslib');
 var React = require('react');
 var classname = require('@hi-ui/classname');
 var env = require('@hi-ui/env');
+var core = require('@hi-ui/core');
 require('./packages/icons/lib/esm/styles/index.scss.js');
 var searchOutlined = require('./packages/icons/lib/esm/components/common/search-outlined.js');
+var Popper = require('@hi-ui/popper');
+var menu = require('@hi-ui/menu');
 function _interopDefaultCompat(e) {
   return e && _typeof(e) === 'object' && 'default' in e ? e : {
     'default': e
   };
 }
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var Popper__default = /*#__PURE__*/_interopDefaultCompat(Popper);
 var SEARCH_TRIGGER_PREFIX = classname.getPrefixCls('search-trigger');
 /**
  * 搜索触发器组件
@@ -37,17 +41,76 @@ var SearchTrigger = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     role = _a$role === void 0 ? 'search-trigger' : _a$role,
     className = _a.className,
     mini = _a.mini,
-    _a$placeholder = _a.placeholder,
-    placeholder = _a$placeholder === void 0 ? '搜索' : _a$placeholder,
-    rest = tslib.__rest(_a, ["prefixCls", "role", "className", "mini", "placeholder"]);
+    placeholder = _a.placeholder,
+    data = _a.data,
+    onClick = _a.onClick,
+    rest = tslib.__rest(_a, ["prefixCls", "role", "className", "mini", "placeholder", "data", "onClick"]);
+  var i18n = core.useLocaleContext();
+  var _React$useState = React__default["default"].useState(false),
+    visible = _React$useState[0],
+    setVisible = _React$useState[1];
+  var _React$useState2 = React__default["default"].useState(''),
+    value = _React$useState2[0],
+    setValue = _React$useState2[1];
+  var innerRef = React__default["default"].useRef(null);
+  var searchRef = React__default["default"].useRef(null);
   var cls = classname.cx(prefixCls, className, (_cx = {}, _cx[prefixCls + "--mini"] = mini, _cx));
-  return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
-    ref: ref,
+  var handleClick = function handleClick(evt) {
+    onClick === null || onClick === void 0 ? void 0 : onClick(evt);
+    if (evt.defaultPrevented) {
+      return;
+    }
+    setVisible(!visible);
+  };
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
+    ref: innerRef,
     role: role,
-    className: cls
-  }, rest), /*#__PURE__*/React__default["default"].createElement(searchOutlined.SearchOutlined, null), !mini && /*#__PURE__*/React__default["default"].createElement("span", {
+    className: cls,
+    onClick: handleClick
+  }, rest), /*#__PURE__*/React__default["default"].createElement(searchOutlined.SearchOutlined, null), !mini && ( /*#__PURE__*/React__default["default"].createElement("span", {
     className: prefixCls + "__placeholder"
-  }, placeholder));
+  }, placeholder || i18n.menuSearch.search))), /*#__PURE__*/React__default["default"].createElement(Popper__default["default"], {
+    classNames: {
+      container: prefixCls + "__popper-container"
+    },
+    visible: visible,
+    attachEl: innerRef.current,
+    gutterGap: -32,
+    unmountOnClose: false,
+    onOutsideClick: function onOutsideClick() {
+      var _a;
+      setVisible(false);
+      (_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.hide();
+    },
+    onEntered: function onEntered() {
+      var _a, _b;
+      if (visible) {
+        (_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        if (value) {
+          (_b = searchRef.current) === null || _b === void 0 ? void 0 : _b.show();
+        }
+      }
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(menu.MenuSearch, {
+    innerRef: searchRef,
+    width: 360,
+    value: value,
+    onChange: setValue,
+    data: data,
+    placeholder: i18n.menuSearch.placeholder,
+    onSelect: function onSelect(id, item) {
+      setVisible(false);
+    },
+    onClear: function onClear() {
+      setValue('');
+    },
+    onClose: function onClose() {
+      setVisible(false);
+    },
+    onEsc: function onEsc() {
+      setVisible(false);
+    }
+  })));
 });
 if (env.__DEV__) {
   SearchTrigger.displayName = 'SearchTrigger';

package/lib/cjs/Sider.js

@@ -26,6 +26,10 @@ function _interopDefaultCompat(e) {
 }
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var SIDER_PREFIX = classname.getPrefixCls('sider');
+var DEFAULT_SIDER_WIDTH = 180;
+var SIDER_WIDTH_MIN = 60;
+var SIDER_WIDTH_MIN_COLLAPSED = 150;
+var SIDER_WIDTH_MAX = 360;
 /**
  * 侧边栏组件
  */
@@ -36,31 +40,40 @@ var Sider = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     _a$role = _a.role,
     role = _a$role === void 0 ? 'sider' : _a$role,
     className = _a.className,
+    widthProp = _a.width,
+    maxWidthProp = _a.maxWidth,
+    _a$resizable = _a.resizable,
+    resizable = _a$resizable === void 0 ? true : _a$resizable,
     collapsedProp = _a.collapsed,
     onCollapse = _a.onCollapse,
     children = _a.children,
-    rest = tslib.__rest(_a, ["prefixCls", "role", "className", "collapsed", "onCollapse", "children"]);
+    rest = tslib.__rest(_a, ["prefixCls", "role", "className", "width", "maxWidth", "resizable", "collapsed", "onCollapse", "children"]);
   var _useUncontrolledState = useUncontrolledState.useUncontrolledState(false, collapsedProp, onCollapse),
     collapsed = _useUncontrolledState[0],
     setCollapsed = _useUncontrolledState[1];
-  var _useState = React.useState(collapsedProp ? 68 : 200),
+  var siderWidth = widthProp || DEFAULT_SIDER_WIDTH;
+  var _useState = React.useState(collapsedProp ? SIDER_WIDTH_MIN : siderWidth),
     width = _useState[0],
     setWidth = _useState[1];
+  var maxWidth = maxWidthProp || SIDER_WIDTH_MAX;
   var handleResize = function handleResize(evt, options) {
     var _a;
     var width = (_a = options === null || options === void 0 ? void 0 : options.size) === null || _a === void 0 ? void 0 : _a.width;
-    if (!collapsed && width < 150) {
-      width = 68;
+    if (!collapsed && width < SIDER_WIDTH_MIN_COLLAPSED) {
+      width = SIDER_WIDTH_MIN;
       setCollapsed(true);
     }
-    if (collapsed && width > 68) {
-      width = 200;
+    if (collapsed && width > SIDER_WIDTH_MIN) {
+      width = siderWidth;
       setTimeout(function () {
         setCollapsed(false);
       }, 300);
     }
-    if (width < 68) {
-      width = 68;
+    if (width <= SIDER_WIDTH_MIN) {
+      width = SIDER_WIDTH_MIN;
+    }
+    if (width > maxWidth) {
+      width = maxWidth;
     }
     setWidth(width);
   };
@@ -71,7 +84,16 @@ var Sider = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     document.body.style.userSelect = 'auto';
   }, []);
   var cls = classname.cx(prefixCls, className, (_cx = {}, _cx[prefixCls + "--collapsed"] = collapsed, _cx));
-  return /*#__PURE__*/React__default["default"].createElement(index.Resizable, {
+  var Content = /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
+    ref: ref,
+    role: role,
+    className: cls
+  }, rest, {
+    style: Object.assign({
+      width: width
+    }, rest.style)
+  }), children);
+  return resizable ? ( /*#__PURE__*/React__default["default"].createElement(index.Resizable, {
     className: prefixCls + "__resizable",
     draggableOpts: {
       enableUserSelectHack: false
@@ -84,15 +106,7 @@ var Sider = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     onResize: handleResize,
     onResizeStart: handleResizeStart,
     onResizeStop: handleResizeStop
-  }, /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
-    ref: ref,
-    role: role,
-    className: cls
-  }, rest, {
-    style: Object.assign({
-      width: width
-    }, rest.style)
-  }), children));
+  }, Content)) : Content;
 });
 if (env.__DEV__) {
   Sider.displayName = 'Sider';

package/lib/cjs/index.js

@@ -13,12 +13,35 @@ Object.defineProperty(exports, '__esModule', {
   value: true
 });
 require('./styles/index.scss.js');
-var Layout = require('./Layout.js');
+var Layout$1 = require('./Layout.js');
+var Header = require('./Header.js');
 var Sider = require('./Sider.js');
 var Content = require('./Content.js');
+var Footer = require('./Footer.js');
 var SearchTrigger = require('./SearchTrigger.js');
-exports.Layout = Layout.Layout;
-exports["default"] = Layout.Layout;
+var FloatMenuContainer = require('./FloatMenuContainer.js');
+var AppList = require('./AppList.js');
+var Profile = require('./Profile.js');
+var Layout = Object.assign(Layout$1.Layout, {
+  Header: Header.Header,
+  Sider: Sider.Sider,
+  Content: Content.Content,
+  Footer: Footer.Footer,
+  SearchTrigger: SearchTrigger.SearchTrigger,
+  FloatMenuContainer: FloatMenuContainer.FloatMenuContainer,
+  AppListPopover: AppList.AppListPopover,
+  ProfilePopover: Profile.ProfilePopover
+});
+exports.Layout = Layout$1.Layout;
+exports.Header = Header.Header;
 exports.Sider = Sider.Sider;
 exports.Content = Content.Content;
+exports.Footer = Footer.Footer;
 exports.SearchTrigger = SearchTrigger.SearchTrigger;
+exports.FloatMenuContainer = FloatMenuContainer.FloatMenuContainer;
+exports.AppList = AppList.AppList;
+exports.AppListPopover = AppList.AppListPopover;
+exports.IconBgColorMap = AppList.IconBgColorMap;
+exports.Profile = Profile.Profile;
+exports.ProfilePopover = Profile.ProfilePopover;
+exports["default"] = Layout;

package/lib/cjs/packages/hooks/use-id/lib/esm/index.js

@@ -0,0 +1,51 @@
+/** @LICENSE
+ * @hi-ui/layout
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/layout#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+var React = require('react');
+var v4 = require('../../node_modules/uuid/dist/esm-browser/v4.js');
+
+/** @LICENSE
+ * @hi-ui/use-id
+ * https://github.com/XiaoMi/hiui/tree/master/packages/hooks/use-id#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * Generate a uuid.
+ */
+var uuid = function uuid() {
+  return v4["default"]();
+};
+var IdGenerator = function IdGenerator() {
+  var _this = this;
+  this.id = 0;
+  this.next = function () {
+    return ++_this.id;
+  };
+};
+var idGenerator = new IdGenerator();
+/**
+ * A hook to generate a uid
+ */
+var useUID = function useUID(prefix) {
+  return React.useMemo(function () {
+    return prefix + '-' + idGenerator.next();
+  }, [prefix]);
+};
+exports.useUID = useUID;
+exports.uuid = uuid;

package/lib/cjs/packages/hooks/use-id/node_modules/uuid/dist/esm-browser/regex.js

@@ -0,0 +1,16 @@
+/** @LICENSE
+ * @hi-ui/layout
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/layout#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+var REGEX = /^(?:[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}|00000000-0000-0000-0000-000000000000)$/i;
+exports["default"] = REGEX;

package/lib/cjs/packages/hooks/use-id/node_modules/uuid/dist/esm-browser/rng.js

@@ -0,0 +1,33 @@
+/** @LICENSE
+ * @hi-ui/layout
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/layout#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+
+// Unique ID creation requires a high quality random # generator. In the browser we therefore
+// require the crypto API and do not support built-in fallback to lower quality random number
+// generators (like Math.random()).
+var getRandomValues;
+var rnds8 = new Uint8Array(16);
+function rng() {
+  // lazy load so that environments that need to polyfill have a chance to do so
+  if (!getRandomValues) {
+    // getRandomValues needs to be invoked in a context where "this" is a Crypto implementation. Also,
+    // find the complete implementation of crypto (msCrypto) on IE11.
+    getRandomValues = typeof crypto !== 'undefined' && crypto.getRandomValues && crypto.getRandomValues.bind(crypto) || typeof msCrypto !== 'undefined' && typeof msCrypto.getRandomValues === 'function' && msCrypto.getRandomValues.bind(msCrypto);
+    if (!getRandomValues) {
+      throw new Error('crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported');
+    }
+  }
+  return getRandomValues(rnds8);
+}
+exports["default"] = rng;

package/lib/cjs/packages/hooks/use-id/node_modules/uuid/dist/esm-browser/stringify.js

@@ -0,0 +1,41 @@
+/** @LICENSE
+ * @hi-ui/layout
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/layout#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+var validate = require('./validate.js');
+
+/**
+ * Convert array of 16 byte values to UUID string format of the form:
+ * XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX
+ */
+
+var byteToHex = [];
+for (var i = 0; i < 256; ++i) {
+  byteToHex.push((i + 0x100).toString(16).substr(1));
+}
+function stringify(arr) {
+  var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  // Note: Be careful editing this code!  It's been tuned for performance
+  // and works in ways you may not expect. See https://github.com/uuidjs/uuid/pull/434
+  var uuid = (byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + '-' + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + '-' + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + '-' + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + '-' + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]]).toLowerCase(); // Consistency check for valid UUID.  If this throws, it's likely due to one
+  // of the following:
+  // - One or more input array values don't map to a hex octet (leading to
+  // "undefined" in the uuid)
+  // - Invalid input values for the RFC `version` or `variant` fields
+
+  if (!validate["default"](uuid)) {
+    throw TypeError('Stringified UUID is invalid');
+  }
+  return uuid;
+}
+exports["default"] = stringify;

package/lib/cjs/packages/hooks/use-id/node_modules/uuid/dist/esm-browser/v4.js

@@ -0,0 +1,33 @@
+/** @LICENSE
+ * @hi-ui/layout
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/layout#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+var rng = require('./rng.js');
+var stringify = require('./stringify.js');
+function v4(options, buf, offset) {
+  options = options || {};
+  var rnds = options.random || (options.rng || rng["default"])(); // Per 4.4, set bits for version and `clock_seq_hi_and_reserved`
+
+  rnds[6] = rnds[6] & 0x0f | 0x40;
+  rnds[8] = rnds[8] & 0x3f | 0x80; // Copy bytes to buffer, if provided
+
+  if (buf) {
+    offset = offset || 0;
+    for (var i = 0; i < 16; ++i) {
+      buf[offset + i] = rnds[i];
+    }
+    return buf;
+  }
+  return stringify["default"](rnds);
+}
+exports["default"] = v4;

package/lib/cjs/packages/hooks/use-id/node_modules/uuid/dist/esm-browser/validate.js

@@ -0,0 +1,19 @@
+/** @LICENSE
+ * @hi-ui/layout
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/layout#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+var regex = require('./regex.js');
+function validate(uuid) {
+  return typeof uuid === 'string' && regex["default"].test(uuid);
+}
+exports["default"] = validate;

package/lib/cjs/packages/hooks/use-latest/lib/esm/index.js

@@ -0,0 +1,56 @@
+/** @LICENSE
+ * @hi-ui/layout
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/layout#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+var React = require('react');
+
+/** @LICENSE
+ * @hi-ui/use-latest
+ * https://github.com/XiaoMi/hiui/tree/master/packages/hooks/use-latest#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * Keep value up-to-date if it changes.
+ *
+ * @param value
+ * @returns
+ */
+var useLatestRef = function useLatestRef(value) {
+  var ref = React.useRef(value);
+  ref.current = value;
+  return ref;
+};
+/**
+ * Keep callback function up-to-date if it changes.
+ *
+ * @param callback
+ * @returns
+ */
+var useLatestCallback = function useLatestCallback(callback) {
+  var ref = useLatestRef(callback);
+  return React.useCallback(function () {
+    var _a2;
+    var _a;
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    return (_a = ref.current) === null || _a === void 0 ? void 0 : (_a2 = _a).call.apply(_a2, [ref].concat(args));
+  }, []);
+};
+exports.useLatestCallback = useLatestCallback;
+exports.useLatestRef = useLatestRef;

package/lib/cjs/packages/hooks/use-timeout/lib/esm/index.js

@@ -0,0 +1,50 @@
+/** @LICENSE
+ * @hi-ui/layout
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/layout#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+var React = require('react');
+var index = require('../../../use-latest/lib/esm/index.js');
+
+/** @LICENSE
+ * @hi-ui/use-timeout
+ * https://github.com/XiaoMi/hiui/tree/master/packages/hooks/use-timeout#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * TODO: What is useTimeout
+ * 1. 负责props变化需要取消定时器以及页面卸载时取消定时器这一套逻辑
+ * 2. 处理 window 支持 SSR
+ */
+var useTimeout = function useTimeout(callback, timeoutDelayMs) {
+  var timerRef = React.useRef(undefined);
+  var callbackLatest = index.useLatestCallback(callback);
+  var clear = React.useCallback(function () {
+    if (timerRef.current === undefined) return;
+    window.clearTimeout(timerRef.current);
+    timerRef.current = undefined;
+  }, []);
+  var start = React.useCallback(function () {
+    if (typeof timeoutDelayMs !== 'number' || timeoutDelayMs < 0) return;
+    timerRef.current = window.setTimeout(callbackLatest, timeoutDelayMs);
+  }, [callbackLatest, timeoutDelayMs]);
+  return {
+    start: start,
+    clear: clear
+  };
+};
+exports.useTimeout = useTimeout;

package/lib/cjs/packages/hooks/use-toggle/lib/esm/index.js

@@ -0,0 +1,71 @@
+/** @LICENSE
+ * @hi-ui/layout
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/layout#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+var React = require('react');
+var useUncontrolledState = require('@hi-ui/use-uncontrolled-state');
+var index = require('../../../use-latest/lib/esm/index.js');
+
+/** @LICENSE
+ * @hi-ui/use-toggle
+ * https://github.com/XiaoMi/hiui/tree/master/packages/hooks/use-toggle#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * Handles uncontrolled boolean switching by `on`, `off`, `not`
+ */
+function useUncontrolledToggle(_ref) {
+  var _ref$defaultVisible = _ref.defaultVisible,
+    defaultVisible = _ref$defaultVisible === void 0 ? false : _ref$defaultVisible,
+    visibleProp = _ref.visible,
+    onClose = _ref.onClose,
+    onOpen = _ref.onOpen,
+    onToggle = _ref.onToggle,
+    isEqual = _ref.isEqual,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
+  var onVisibleChange = index.useLatestCallback(function (nextVisible) {
+    var callback = nextVisible ? onOpen : onClose;
+    callback === null || callback === void 0 ? void 0 : callback();
+    onToggle === null || onToggle === void 0 ? void 0 : onToggle(nextVisible);
+  });
+  var _useUncontrolledState = useUncontrolledState.useUncontrolledState(defaultVisible, visibleProp, onVisibleChange, isEqual),
+    bool = _useUncontrolledState[0],
+    setBool = _useUncontrolledState[1];
+  var proxySetBool = index.useLatestCallback(function (stateOrFunction) {
+    if (disabled) return;
+    setBool(stateOrFunction);
+  });
+  var toggle = React.useMemo(function () {
+    return {
+      set: proxySetBool,
+      on: function on() {
+        proxySetBool(true);
+      },
+      off: function off() {
+        proxySetBool(false);
+      },
+      not: function not() {
+        proxySetBool(function (prev) {
+          return !prev;
+        });
+      }
+    };
+  }, [proxySetBool]);
+  return [bool, toggle];
+}
+exports.useUncontrolledToggle = useUncontrolledToggle;

package/lib/cjs/packages/hooks/use-unmount-effect/lib/esm/index.js

@@ -0,0 +1,44 @@
+/** @LICENSE
+ * @hi-ui/layout
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/layout#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+var React = require('react');
+var index = require('../../../use-latest/lib/esm/index.js');
+
+/** @LICENSE
+ * @hi-ui/use-unmount-effect
+ * https://github.com/XiaoMi/hiui/tree/master/packages/hooks/use-unmount-effect#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * A hook for running when component unmount, will return unmountRef sign
+ */
+var useUnmountEffect = function useUnmountEffect(cleanup) {
+  var cleanupLatest = index.useLatestCallback(cleanup);
+  var unmountRef = React.useRef(false);
+  React.useEffect(function () {
+    return function () {
+      unmountRef.current = true;
+      cleanupLatest();
+    };
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  []);
+  return unmountRef;
+};
+exports.useUnmountEffect = useUnmountEffect;