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

package/lib/esm/Profile.js

@@ -0,0 +1,152 @@
+/** @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.
+ */
+import { __rest } from 'tslib';
+import React, { forwardRef, useCallback } from 'react';
+import { getPrefixCls, cx } from '@hi-ui/classname';
+import { __DEV__ } from '@hi-ui/env';
+import { Popover } from './packages/ui/popover/lib/esm/index.js';
+import './packages/icons/lib/esm/styles/index.scss.js';
+import { CheckOutlined } from './packages/icons/lib/esm/components/alert/check-outlined.js';
+import { RightOutlined } from './packages/icons/lib/esm/components/direction/right-outlined.js';
+import { useUncontrolledToggle } from './packages/hooks/use-toggle/lib/esm/index.js';
+import { useUncontrolledState } from '@hi-ui/use-uncontrolled-state';
+var PROFILE_PREFIX = getPrefixCls('profile');
+var Profile = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var _b;
+  var _a$prefixCls = _a.prefixCls,
+    prefixCls = _a$prefixCls === void 0 ? PROFILE_PREFIX : _a$prefixCls,
+    _a$role = _a.role,
+    role = _a$role === void 0 ? 'profile' : _a$role,
+    className = _a.className,
+    header = _a.header,
+    footer = _a.footer,
+    settings = _a.settings,
+    rest = __rest(_a, ["prefixCls", "role", "className", "children", "header", "footer", "settings"]);
+  var cls = cx(prefixCls, className);
+  var _useUncontrolledState = useUncontrolledState((_b = settings === null || settings === void 0 ? void 0 : settings.value) !== null && _b !== void 0 ? _b : {}, settings === null || settings === void 0 ? void 0 : settings.value),
+    value = _useUncontrolledState[0],
+    setValue = _useUncontrolledState[1];
+  return /*#__PURE__*/React.createElement("div", Object.assign({
+    ref: ref,
+    role: role,
+    className: cls
+  }, rest), /*#__PURE__*/React.createElement("div", {
+    className: prefixCls + "__header"
+  }, header), /*#__PURE__*/React.createElement("div", {
+    className: prefixCls + "__settings"
+  }, settings === null || settings === void 0 ? void 0 : settings.data.map(function (item) {
+    var _a, _b, _c, _d;
+    return /*#__PURE__*/React.createElement(Popover, Object.assign({
+      style: {
+        boxSizing: 'border-box',
+        width: 200,
+        padding: 8
+      }
+    }, !((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) ? {
+      visible: false
+    } : {}, {
+      key: item.id,
+      disabledPortal: true,
+      arrow: false,
+      placement: (_b = settings === null || settings === void 0 ? void 0 : settings.placement) !== null && _b !== void 0 ? _b : 'right-start',
+      content: /*#__PURE__*/React.createElement("div", null, (_c = item.children) === null || _c === void 0 ? void 0 : _c.map(function (child) {
+        var _cx;
+        var keys = Object.keys(value);
+        var currentKey = keys.find(function (key) {
+          return key === item.id;
+        }) || item.id;
+        var checked = currentKey && value[currentKey !== null && currentKey !== void 0 ? currentKey : ''] === child.id;
+        return /*#__PURE__*/React.createElement("div", {
+          key: child.id,
+          className: cx(prefixCls + "__settings-item-leaf", (_cx = {}, _cx[prefixCls + "__settings-item-leaf--checked"] = checked, _cx)),
+          onClick: function onClick(evt) {
+            var _Object$assign, _Object$assign2;
+            var _a, _b;
+            var nextValue = checked ? Object.assign(Object.assign({}, value), (_Object$assign = {}, _Object$assign[currentKey || ''] = '', _Object$assign)) : Object.assign(Object.assign({}, value), (_Object$assign2 = {}, _Object$assign2[currentKey || ''] = child.id || '', _Object$assign2));
+            setValue(nextValue);
+            (_a = settings === null || settings === void 0 ? void 0 : settings.onChange) === null || _a === void 0 ? void 0 : _a.call(settings, nextValue, child);
+            (_b = settings === null || settings === void 0 ? void 0 : settings.onItemClick) === null || _b === void 0 ? void 0 : _b.call(settings, evt, child);
+          }
+        }, /*#__PURE__*/React.createElement("div", {
+          className: prefixCls + "__settings-item-leaf__title"
+        }, child.title), /*#__PURE__*/React.createElement("div", {
+          className: prefixCls + "__settings-item-leaf__checked"
+        }, checked && /*#__PURE__*/React.createElement(CheckOutlined, null)));
+      }))
+    }), /*#__PURE__*/React.createElement("div", {
+      className: prefixCls + "__settings-item",
+      onClick: function onClick(evt) {
+        var _a;
+        return (_a = settings === null || settings === void 0 ? void 0 : settings.onItemClick) === null || _a === void 0 ? void 0 : _a.call(settings, evt, item);
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      className: prefixCls + "__settings-item__title-wrapper"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: prefixCls + "__settings-item__title"
+    }, item.title), item.subtitle ? ( /*#__PURE__*/React.createElement("div", {
+      className: prefixCls + "__settings-item__subtitle"
+    }, item.subtitle)) : null), ((_d = item.children) === null || _d === void 0 ? void 0 : _d.length) ? ( /*#__PURE__*/React.createElement("div", {
+      className: prefixCls + "__settings-item__arrow"
+    }, /*#__PURE__*/React.createElement(RightOutlined, null))) : null));
+  })), /*#__PURE__*/React.createElement("div", {
+    className: prefixCls + "__footer"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: prefixCls + "__footer__content"
+  }, footer)));
+});
+if (__DEV__) {
+  Profile.displayName = 'Profile';
+}
+var ProfilePopover = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var onOpen = _a.onOpen,
+    onClose = _a.onClose,
+    visibleProp = _a.visible,
+    _a$placement = _a.placement,
+    placement = _a$placement === void 0 ? 'right-end' : _a$placement,
+    _a$trigger = _a.trigger,
+    trigger = _a$trigger === void 0 ? 'click' : _a$trigger,
+    children = _a.children,
+    restProps = __rest(_a, ["onOpen", "onClose", "visible", "placement", "trigger", "children"]);
+  var _useUncontrolledToggl = useUncontrolledToggle({
+      defaultVisible: false,
+      visible: visibleProp
+    }),
+    visible = _useUncontrolledToggl[0],
+    visibleAction = _useUncontrolledToggl[1];
+  var handleOpen = useCallback(function () {
+    visibleAction.on();
+    onOpen === null || onOpen === void 0 ? void 0 : onOpen();
+  }, [onOpen, visibleAction]);
+  var handleClose = useCallback(function () {
+    visibleAction.off();
+    onClose === null || onClose === void 0 ? void 0 : onClose();
+  }, [onClose, visibleAction]);
+  return /*#__PURE__*/React.createElement(Popover, {
+    style: {
+      boxSizing: 'border-box',
+      padding: 0,
+      overflow: 'auto'
+    },
+    visible: visible,
+    arrow: false,
+    trigger: trigger,
+    placement: placement,
+    gutterGap: 16,
+    content: /*#__PURE__*/React.createElement(Profile, Object.assign({
+      ref: ref
+    }, restProps)),
+    onOpen: handleOpen,
+    onClose: handleClose
+  }, children);
+});
+if (__DEV__) {
+  ProfilePopover.displayName = 'ProfilePopover';
+}
+export { Profile, ProfilePopover };

package/lib/esm/SearchTrigger.js

@@ -11,8 +11,11 @@ import { __rest } from 'tslib';
 import React, { forwardRef } from 'react';
 import { getPrefixCls, cx } from '@hi-ui/classname';
 import { __DEV__ } from '@hi-ui/env';
+import { useLocaleContext } from '@hi-ui/core';
 import './packages/icons/lib/esm/styles/index.scss.js';
 import { SearchOutlined } from './packages/icons/lib/esm/components/common/search-outlined.js';
+import Popper from '@hi-ui/popper';
+import { MenuSearch } from '@hi-ui/menu';
 var SEARCH_TRIGGER_PREFIX = getPrefixCls('search-trigger');
 /**
  * 搜索触发器组件
@@ -25,17 +28,76 @@ var SearchTrigger = /*#__PURE__*/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 = __rest(_a, ["prefixCls", "role", "className", "mini", "placeholder"]);
+    placeholder = _a.placeholder,
+    data = _a.data,
+    onClick = _a.onClick,
+    rest = __rest(_a, ["prefixCls", "role", "className", "mini", "placeholder", "data", "onClick"]);
+  var i18n = useLocaleContext();
+  var _React$useState = React.useState(false),
+    visible = _React$useState[0],
+    setVisible = _React$useState[1];
+  var _React$useState2 = React.useState(''),
+    value = _React$useState2[0],
+    setValue = _React$useState2[1];
+  var innerRef = React.useRef(null);
+  var searchRef = React.useRef(null);
   var cls = cx(prefixCls, className, (_cx = {}, _cx[prefixCls + "--mini"] = mini, _cx));
-  return /*#__PURE__*/React.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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", Object.assign({
+    ref: innerRef,
     role: role,
-    className: cls
-  }, rest), /*#__PURE__*/React.createElement(SearchOutlined, null), !mini && /*#__PURE__*/React.createElement("span", {
+    className: cls,
+    onClick: handleClick
+  }, rest), /*#__PURE__*/React.createElement(SearchOutlined, null), !mini && ( /*#__PURE__*/React.createElement("span", {
     className: prefixCls + "__placeholder"
-  }, placeholder));
+  }, placeholder || i18n.menuSearch.search))), /*#__PURE__*/React.createElement(Popper, {
+    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.createElement(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 (__DEV__) {
   SearchTrigger.displayName = 'SearchTrigger';

package/lib/esm/Sider.js

@@ -14,6 +14,10 @@ import { __DEV__ } from '@hi-ui/env';
 import { useUncontrolledState } from '@hi-ui/use-uncontrolled-state';
 import { Resizable } from './node_modules/react-resizable/index.js';
 var SIDER_PREFIX = getPrefixCls('sider');
+var DEFAULT_SIDER_WIDTH = 180;
+var SIDER_WIDTH_MIN = 60;
+var SIDER_WIDTH_MIN_COLLAPSED = 150;
+var SIDER_WIDTH_MAX = 360;
 /**
  * 侧边栏组件
  */
@@ -24,31 +28,40 @@ var Sider = /*#__PURE__*/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 = __rest(_a, ["prefixCls", "role", "className", "collapsed", "onCollapse", "children"]);
+    rest = __rest(_a, ["prefixCls", "role", "className", "width", "maxWidth", "resizable", "collapsed", "onCollapse", "children"]);
   var _useUncontrolledState = useUncontrolledState(false, collapsedProp, onCollapse),
     collapsed = _useUncontrolledState[0],
     setCollapsed = _useUncontrolledState[1];
-  var _useState = useState(collapsedProp ? 68 : 200),
+  var siderWidth = widthProp || DEFAULT_SIDER_WIDTH;
+  var _useState = 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);
   };
@@ -59,7 +72,16 @@ var Sider = /*#__PURE__*/forwardRef(function (_a, ref) {
     document.body.style.userSelect = 'auto';
   }, []);
   var cls = cx(prefixCls, className, (_cx = {}, _cx[prefixCls + "--collapsed"] = collapsed, _cx));
-  return /*#__PURE__*/React.createElement(Resizable, {
+  var Content = /*#__PURE__*/React.createElement("div", Object.assign({
+    ref: ref,
+    role: role,
+    className: cls
+  }, rest, {
+    style: Object.assign({
+      width: width
+    }, rest.style)
+  }), children);
+  return resizable ? ( /*#__PURE__*/React.createElement(Resizable, {
     className: prefixCls + "__resizable",
     draggableOpts: {
       enableUserSelectHack: false
@@ -72,15 +94,7 @@ var Sider = /*#__PURE__*/forwardRef(function (_a, ref) {
     onResize: handleResize,
     onResizeStart: handleResizeStart,
     onResizeStop: handleResizeStop
-  }, /*#__PURE__*/React.createElement("div", Object.assign({
-    ref: ref,
-    role: role,
-    className: cls
-  }, rest, {
-    style: Object.assign({
-      width: width
-    }, rest.style)
-  }), children));
+  }, Content)) : Content;
 });
 if (__DEV__) {
   Sider.displayName = 'Sider';

package/lib/esm/index.js

@@ -8,7 +8,25 @@
  * LICENSE file in the root directory of this source tree.
  */
 import './styles/index.scss.js';
-export { Layout, Layout as default } from './Layout.js';
-export { Sider } from './Sider.js';
-export { Content } from './Content.js';
-export { SearchTrigger } from './SearchTrigger.js';
+import { Layout as Layout$1 } from './Layout.js';
+import { Header } from './Header.js';
+import { Sider } from './Sider.js';
+import { Content } from './Content.js';
+import { Footer } from './Footer.js';
+import { SearchTrigger } from './SearchTrigger.js';
+import { FloatMenuContainer } from './FloatMenuContainer.js';
+import { AppListPopover } from './AppList.js';
+export { AppList, IconBgColorMap } from './AppList.js';
+import { ProfilePopover } from './Profile.js';
+export { Profile } from './Profile.js';
+var Layout = Object.assign(Layout$1, {
+  Header: Header,
+  Sider: Sider,
+  Content: Content,
+  Footer: Footer,
+  SearchTrigger: SearchTrigger,
+  FloatMenuContainer: FloatMenuContainer,
+  AppListPopover: AppListPopover,
+  ProfilePopover: ProfilePopover
+});
+export { AppListPopover, Content, FloatMenuContainer, Footer, Header, Layout$1 as Layout, ProfilePopover, SearchTrigger, Sider, Layout as default };

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

@@ -0,0 +1,45 @@
+/** @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.
+ */
+import { useMemo } from 'react';
+import v4 from '../../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();
+};
+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 useMemo(function () {
+    return prefix + '-' + idGenerator.next();
+  }, [prefix]);
+};
+export { useUID, uuid };

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

@@ -0,0 +1,11 @@
+/** @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.
+ */
+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;
+export { REGEX as default };

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

@@ -0,0 +1,27 @@
+/** @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.
+ */
+// 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);
+}
+export { rng as default };

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

@@ -0,0 +1,36 @@
+/** @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.
+ */
+import validate from './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(uuid)) {
+    throw TypeError('Stringified UUID is invalid');
+  }
+  return uuid;
+}
+export { stringify as default };

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

@@ -0,0 +1,28 @@
+/** @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.
+ */
+import rng from './rng.js';
+import stringify from './stringify.js';
+function v4(options, buf, offset) {
+  options = options || {};
+  var rnds = options.random || (options.rng || rng)(); // 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(rnds);
+}
+export { v4 as default };

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

@@ -0,0 +1,14 @@
+/** @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.
+ */
+import REGEX from './regex.js';
+function validate(uuid) {
+  return typeof uuid === 'string' && REGEX.test(uuid);
+}
+export { validate as default };

package/lib/esm/packages/hooks/use-latest/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.
+ */
+import { useCallback, useRef } from '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 = 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 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));
+  }, []);
+};
+export { useLatestCallback, useLatestRef };

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

@@ -0,0 +1,45 @@
+/** @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.
+ */
+import { useRef, useCallback } from 'react';
+import { useLatestCallback } from '../../../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 = useRef(undefined);
+  var callbackLatest = useLatestCallback(callback);
+  var clear = useCallback(function () {
+    if (timerRef.current === undefined) return;
+    window.clearTimeout(timerRef.current);
+    timerRef.current = undefined;
+  }, []);
+  var start = useCallback(function () {
+    if (typeof timeoutDelayMs !== 'number' || timeoutDelayMs < 0) return;
+    timerRef.current = window.setTimeout(callbackLatest, timeoutDelayMs);
+  }, [callbackLatest, timeoutDelayMs]);
+  return {
+    start: start,
+    clear: clear
+  };
+};
+export { useTimeout };