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

package/lib/esm/packages/ui/popover/lib/esm/with-api.js

@@ -0,0 +1,79 @@
+/** @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 { createElement, createRef } from 'react';
+import { unmountComponentAtNode, render } from 'react-dom';
+import { getContainer, removeContainer } from './utils/container/lib/esm/index.js';
+import { uuid } from '../../../../hooks/use-id/lib/esm/index.js';
+import { Popover, prefix } from './Popover.js';
+
+/** @LICENSE
+ * @hi-ui/popover
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/popover#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 prefixCls = prefix;
+var selector = "." + prefixCls + "-wrapper";
+var popoverInstanceCache = {};
+var open = function open(target, _a) {
+  var key = _a.key,
+    disabledPortal = _a.disabledPortal,
+    rest = __rest(_a, ["key", "disabledPortal"]);
+  if (!key) {
+    key = uuid();
+  }
+  var selectId = selector + "__" + key;
+  var container = getContainer(selectId, undefined, disabledPortal ? target.parentNode : undefined);
+  var popoverRef = /*#__PURE__*/createRef();
+  var ClonedPopover = /*#__PURE__*/createElement(Popover, Object.assign({
+    innerRef: popoverRef,
+    container: container,
+    attachEl: target,
+    closeOnOutsideClick: false,
+    shouldWrapChildren: true,
+    onExited: function onExited() {
+      // 卸载
+      if (container) {
+        unmountComponentAtNode(container);
+        removeContainer(selectId);
+      }
+      container = undefined;
+    }
+  }, rest));
+  requestAnimationFrame(function () {
+    render(ClonedPopover, container);
+    popoverRef.current.open();
+  });
+  var close = function close() {
+    var _a;
+    (_a = popoverRef.current) === null || _a === void 0 ? void 0 : _a.close();
+  };
+  if (key) {
+    popoverInstanceCache[key] = close;
+  }
+  return key;
+};
+var close = function close(key) {
+  if (typeof popoverInstanceCache[key] === 'function') {
+    popoverInstanceCache[key]();
+  }
+  delete popoverInstanceCache[key];
+};
+function withPopover(instance) {
+  return Object.assign(instance, {
+    open: open,
+    close: close
+  });
+}
+export { withPopover };

package/lib/esm/packages/utils/array-utils/lib/esm/index.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 { isNullish, isArray } from '../../../type-assertion/lib/esm/index.js';
+
+/** @LICENSE
+ * @hi-ui/array-utils
+ * https://github.com/XiaoMi/hiui/tree/master/packages/utils/array-utils#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 normalizeArray = function normalizeArray(arg) {
+  if (isNullish(arg)) return [];
+  return isArray(arg) ? arg : [arg];
+};
+export { normalizeArray };

package/lib/esm/packages/utils/dom-utils/lib/esm/index.js

@@ -0,0 +1,42 @@
+/** @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 '@hi-ui/env';
+
+/** @LICENSE
+ * @hi-ui/dom-utils
+ * https://github.com/XiaoMi/hiui/tree/master/packages/utils/dom-utils#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.
+ */
+/**
+ * 模拟事件默认事件处理机制，以此执行传入的事件处理器
+ *
+ * @param handlers
+ * @returns
+ * @ref https://developer.mozilla.org/zh-CN/docs/Web/API/Event/preventDefault
+ */
+function mockDefaultHandlers() {
+  for (var _len = arguments.length, handlers = new Array(_len), _key = 0; _key < _len; _key++) {
+    handlers[_key] = arguments[_key];
+  }
+  return function mockedDefaultHandler(event) {
+    handlers.some(function (handler) {
+      if (handler) {
+        // handler 执行中，可以阻止默认行为，即将 `defaultPrevented` 置为 `true`
+        handler(event);
+      }
+      return event.defaultPrevented;
+    });
+  };
+}
+export { mockDefaultHandlers };

package/lib/esm/packages/utils/react-utils/lib/esm/index.js

@@ -0,0 +1,65 @@
+/** @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 'react';
+import '@babel/runtime/helpers/esm/typeof';
+import '@hi-ui/env';
+
+/** @LICENSE
+ * @hi-ui/react-utils
+ * https://github.com/XiaoMi/hiui/tree/master/packages/utils/react-utils#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.
+ */
+/**
+ * Merge defaultProps into props
+ */
+var withDefaultProps = function withDefaultProps(props, defaultProps) {
+  if (!defaultProps) return props || {};
+  var mergedProps = Object.assign({}, props);
+  var propName;
+  for (propName in defaultProps) {
+    if (mergedProps[propName] === undefined) {
+      // @ts-ignore
+      mergedProps[propName] = defaultProps[propName];
+    }
+  }
+  return mergedProps;
+};
+/**
+ * Set ref into a React element.
+ */
+function setRef(ref, value) {
+  if (typeof ref === 'function') {
+    ref(value);
+  } else if (ref) {
+    ref.current = value;
+  }
+}
+/**
+ * Merges multiple refs into a single function ref.
+ */
+var mergeRefs = function mergeRefs() {
+  for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
+    refs[_key] = arguments[_key];
+  }
+  // Empty check
+  if (refs.some(function (ref) {
+    return ref;
+  }) === false) return null;
+  return function (value) {
+    refs.forEach(function (ref) {
+      setRef(ref, value);
+    });
+  };
+};
+export { mergeRefs, setRef, withDefaultProps };

package/lib/esm/packages/utils/type-assertion/lib/esm/index.js

@@ -0,0 +1,29 @@
+/** @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 '@babel/runtime/helpers/esm/typeof';
+
+/**
+ * Assert is Nullish
+ */
+var isNullish = function isNullish(arg) {
+  return arg === null || arg === undefined;
+};
+/**
+ * Assert is an array
+ */
+var isArray = Array.isArray;
+var toString = Object.prototype.toString;
+/**
+ * Assert is string
+ */
+var isString = function isString(arg) {
+  return toString.call(arg) === '[object String]';
+};
+export { isArray, isNullish, isString };

package/lib/esm/styles/index.scss.js

@@ -8,6 +8,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 import __styleInject__ from '@hi-ui/style-inject';
-var css_248z = ".hi-v5-layout {-webkit-box-sizing: border-box;box-sizing: border-box;display: -webkit-box;display: -ms-flexbox;display: flex;position: relative;min-width: 0;min-height: 0;}.hi-v5-sider {-webkit-box-sizing: border-box;box-sizing: border-box;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;position: relative;width: auto;height: 100%;overflow: auto;}.hi-v5-sider--collapsed {-webkit-transition: width 0.4s;transition: width 0.4s;}.hi-v5-sider__resizable-handler {position: absolute;z-index: 9;top: 0;right: 0;width: 2px;height: 100%;border-left: 2px solid transparent;border-right: 2px solid transparent;cursor: col-resize;background-color: #2b64ff;background-clip: content-box;opacity: 0;-webkit-transition: opacity 0.2s;transition: opacity 0.2s;}.hi-v5-sider__resizable-handler:hover {opacity: 1;}.hi-v5-sider .hi-v5-scrollbar__wrapper {width: auto;}.hi-v5-sider .hi-v5-menu {width: auto;height: auto;}.hi-v5-sider .hi-v5-menu--vertical .hi-v5-menu-item__inner {margin-bottom: var(--hi-v5-spacing-4, 8px) !important;}.hi-v5-sider .hi-v5-menu--vertical .hi-v5-menu-item__inner:not(.hi-v5-sider .hi-v5-menu--vertical .hi-v5-menu-item__inner--active):hover {background-color: rgba(124, 135, 166, 0.15);}.hi-v5-sider .hi-v5-menu--vertical .hi-v5-menu-item__inner--active {background-color: #fff;}.hi-v5-sider .hi-v5-menu--vertical .hi-v5-menu-item__inner--active .hi-v5-menu-item__icon {color: #2b64ff;}.hi-v5-sider .hi-v5-menu--vertical .hi-v5-menu-item__inner--active-p .hi-v5-menu-item__icon {color: #2b64ff;}.hi-v5-sider .hi-v5-menu--vertical .hi-v5-menu-item__icon {color: #7c87a6;}.hi-v5-sider .hi-v5-menu--vertical .hi-v5-menu-item__arrow {color: #60636b;}.hi-v5-sider .hi-v5-menu--vertical .hi-v5-menu-submenu .hi-v5-menu-item__inner {margin-bottom: 0 !important;}.hi-v5-menu-popmenu {width: 160px !important;}.hi-v5-content {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;padding: 0 16px;overflow: auto;}.hi-v5-search-trigger {-webkit-box-sizing: border-box;box-sizing: border-box;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-ms-flex-negative: 0;flex-shrink: 0;gap: 8px;height: 32px;margin: 0 8px 12px;font-size: 16px;color: var(--hi-v5-color-gray-500, #91959e);background-color: rgba(113, 126, 163, 0.1);cursor: pointer;border-radius: 9999px;}.hi-v5-search-trigger:not(.hi-v5-search-trigger--mini) {padding: 0 12px;}.hi-v5-search-trigger--mini {-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;width: 32px;margin-left: auto;margin-right: auto;}.hi-v5-search-trigger__placeholder {font-size: var(--hi-v5-text-size-md, 0.875rem);line-height: var(--hi-v5-text-lineheight-md, 1.375rem);}";
+var css_248z = ".hi-v5-layout {-webkit-box-sizing: border-box;box-sizing: border-box;-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;display: -webkit-box;display: -ms-flexbox;display: flex;position: relative;min-width: 0;min-height: 0;}.hi-v5-layout--direction-row {-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-direction: row;flex-direction: row;}.hi-v5-layout--direction-column {-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;}.hi-v5-header {-webkit-box-sizing: border-box;box-sizing: border-box;-webkit-box-flex: 0;-ms-flex: 0 0 auto;flex: 0 0 auto;display: -webkit-box;display: -ms-flexbox;display: flex;}.hi-v5-sider {-webkit-box-sizing: border-box;box-sizing: border-box;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;position: relative;width: auto;height: 100%;overflow: hidden;-webkit-box-shadow: 1px 0 0 0 var(--hi-v5-color-gray-200, #e6e8eb);box-shadow: 1px 0 0 0 var(--hi-v5-color-gray-200, #e6e8eb);}.hi-v5-sider--collapsed {-webkit-transition: width 0.4s;transition: width 0.4s;}.hi-v5-sider__resizable-handler {-webkit-box-sizing: content-box;box-sizing: content-box;position: absolute;z-index: 9;top: 0;right: -2px;width: 2px;height: 100%;border-left: 2px solid transparent;border-right: 2px solid transparent;cursor: col-resize;background-color: #2b64ff;background-clip: content-box;opacity: 0;-webkit-transition: opacity 0.2s;transition: opacity 0.2s;}.hi-v5-sider__resizable-handler:hover {opacity: 1;}.hi-v5-sider .hi-v5-scrollbar__wrapper {width: auto;}.hi-v5-sider .hi-v5-menu {width: auto;height: auto;}.hi-v5-sider .hi-v5-menu--vertical .hi-v5-menu-item__inner {margin-bottom: var(--hi-v5-spacing-4, 8px) !important;}.hi-v5-sider .hi-v5-menu--vertical .hi-v5-menu-item__inner:not(.hi-v5-sider .hi-v5-menu--vertical .hi-v5-menu-item__inner--active):hover {background-color: rgba(124, 135, 166, 0.15);}.hi-v5-sider .hi-v5-menu--vertical .hi-v5-menu-item__inner--active {background-color: #fff;}.hi-v5-sider .hi-v5-menu--vertical .hi-v5-menu-item__inner--active .hi-v5-menu-item__icon {color: #2b64ff;}.hi-v5-sider .hi-v5-menu--vertical .hi-v5-menu-item__inner--active-p .hi-v5-menu-item__icon {color: #2b64ff;}.hi-v5-sider .hi-v5-menu--vertical .hi-v5-menu-item__inner--mini .hi-v5-menu-item__inner--active-p {background-color: var(--hi-v5-color-static-white, #fff);}.hi-v5-sider .hi-v5-menu--vertical .hi-v5-menu-item__inner--mini .hi-v5-menu-item__inner--active-p .hi-v5-menu-item__icon {color: #2b64ff;}.hi-v5-sider .hi-v5-menu--vertical .hi-v5-menu-item__inner--mini .hi-v5-menu-item__inner--active-p-p .hi-v5-menu-item__icon {color: #2b64ff;}.hi-v5-sider .hi-v5-menu--vertical .hi-v5-menu-item__inner--mini .hi-v5-menu-item__inner--active-p:hover {background-color: var(--hi-v5-color-static-white, #fff) !important;}.hi-v5-sider .hi-v5-menu--vertical .hi-v5-menu-item__icon {color: #7c87a6;}.hi-v5-sider .hi-v5-menu--vertical .hi-v5-menu-item__arrow {color: #60636b;}.hi-v5-sider .hi-v5-menu--vertical .hi-v5-menu-submenu .hi-v5-menu-item__inner {margin-bottom: 0 !important;}.hi-v5-menu-popmenu {width: 160px !important;}.hi-v5-content {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;padding: 0 16px;overflow: auto;}.hi-v5-footer {-webkit-box-sizing: border-box;box-sizing: border-box;-webkit-box-flex: 0;-ms-flex: 0 0 auto;flex: 0 0 auto;display: -webkit-box;display: -ms-flexbox;display: flex;}.hi-v5-search-trigger {-webkit-box-sizing: border-box;box-sizing: border-box;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-ms-flex-negative: 0;flex-shrink: 0;gap: 8px;height: 32px;margin: 0 8px 12px;font-size: 16px;color: var(--hi-v5-color-gray-500, #91959e);background-color: rgba(113, 126, 163, 0.1);cursor: pointer;border-radius: 9999px;}.hi-v5-search-trigger:not(.hi-v5-search-trigger--mini) {padding: 0 12px;}.hi-v5-search-trigger--mini {-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;width: 32px;margin-left: auto;margin-right: auto;}.hi-v5-search-trigger__placeholder {font-size: var(--hi-v5-text-size-md, 0.875rem);line-height: var(--hi-v5-text-lineheight-md, 1.375rem);}.hi-v5-search-trigger__popper-container {border-radius: var(--hi-v5-border-radius-xl, 8px) !important;border: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-100, #edeff2);}.hi-v5-float-menu-container {-webkit-box-sizing: border-box;box-sizing: border-box;position: relative;width: 0;height: 100%;background: transparent;}.hi-v5-float-menu-container-content {-webkit-box-sizing: border-box;box-sizing: border-box;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;position: absolute;top: 0;left: 0;height: 100%;padding: var(--hi-v5-spacing-6, 12px) 0;background-color: #f5f8fc;opacity: 0;-webkit-transition: opacity 0.3s;transition: opacity 0.3s;}.hi-v5-float-menu-container-content-wrapper {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;overflow: auto;}.hi-v5-float-menu-container-content--show {opacity: 1;}.hi-v5-float-menu-container-content--collapsed {z-index: 2000;border-top-right-radius: 12px;border-bottom-right-radius: 12px;-webkit-box-shadow: 6px 0 18px 6px rgba(26, 29, 38, 0.03), 4px 0 4px 0 rgba(26, 29, 38, 0.03);box-shadow: 6px 0 18px 6px rgba(26, 29, 38, 0.03), 4px 0 4px 0 rgba(26, 29, 38, 0.03);}.hi-v5-float-menu-container-content--collapsed .hi-v5-float-menu-container-collapse-icon {-webkit-transform: scaleX(-1);transform: scaleX(-1);}.hi-v5-float-menu-container-collapse {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;height: var(--hi-v5-height-6, 24px);padding: 0 var(--hi-v5-spacing-4, 8px);color: var(--hi-v5-color-gray-600, #60636b);cursor: pointer;white-space: nowrap;}.hi-v5-float-menu-container-collapse:hover {border-radius: var(--hi-v5-border-radius-lg, 6px);color: #565a66;background-color: var(--hi-v5-color-gray-200, #e6e8eb);}.hi-v5-float-menu-container-collapse-wrapper {display: -webkit-box;display: -ms-flexbox;display: flex;padding: var(--hi-v5-spacing-4, 8px) var(--hi-v5-spacing-8, 16px);}.hi-v5-float-menu-container-collapse-icon {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;font-size: var(--hi-v5-text-size-lg, 1rem);}.hi-v5-float-menu-container-collapse-text {font-size: var(--hi-v5-text-size-md, 0.875rem);line-height: var(--hi-v5-text-lineheight-md, 1.375rem);margin-left: var(--hi-v5-spacing-2, 4px);}.hi-v5-app-list-wrapper {-webkit-box-sizing: border-box;box-sizing: border-box;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;gap: 8px;}.hi-v5-app-list-item {-webkit-box-sizing: border-box;box-sizing: border-box;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-ms-flex-negative: 0;flex-shrink: 0;gap: 8px;width: 256px;height: var(--hi-v5-height-12, 48px);padding: 0 var(--hi-v5-spacing-6, 12px);border: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-100, #edeff2);border-radius: var(--hi-v5-border-radius-lg, 6px);overflow: hidden;cursor: pointer;}.hi-v5-app-list-item:hover {background-color: var(--hi-v5-color-gray-50, #f2f4f7);}.hi-v5-app-list-item__icon {-webkit-box-sizing: border-box;box-sizing: border-box;display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;overflow: hidden;width: var(--hi-v5-height-6, 24px);height: var(--hi-v5-height-6, 24px);line-height: var(--hi-v5-text-lineheight-md, 1.375rem);border-radius: var(--hi-v5-border-radius-lg, 6px);font-size: var(--hi-v5-text-size-md, 0.875rem);font-weight: var(--hi-v5-text-weight-medium, 500);color: var(--hi-v5-color-static-white, #fff);background-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-app-list-item__title {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;font-size: var(--hi-v5-text-size-md, 0.875rem);line-height: var(--hi-v5-text-lineheight-md, 1.375rem);overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}.hi-v5-app-list-item__checked {display: none;font-size: var(--hi-v5-text-size-md, 0.875rem);color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-app-list-item--active .hi-v5-app-list-item__title {font-weight: var(--hi-v5-text-weight-medium, 500);}.hi-v5-app-list-item--active .hi-v5-app-list-item__checked {display: block;}.hi-v5-profile {width: 240px;}.hi-v5-profile__header {padding: var(--hi-v5-spacing-8, 16px) var(--hi-v5-spacing-8, 16px) var(--hi-v5-spacing-4, 8px);font-size: var(--hi-v5-text-size-lg, 1rem);line-height: var(--hi-v5-text-lineheight-lg, 1.5rem);font-weight: var(--hi-v5-text-weight-medium, 500);}.hi-v5-profile__settings {padding: var(--hi-v5-spacing-4, 8px);}.hi-v5-profile__settings-item {-webkit-box-sizing: border-box;box-sizing: border-box;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: start;-ms-flex-align: start;align-items: flex-start;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;padding: var(--hi-v5-spacing-4, 8px);border-radius: var(--hi-v5-border-radius-lg, 6px);cursor: pointer;}.hi-v5-profile__settings-item:hover {background-color: var(--hi-v5-color-gray-50, #f2f4f7);}.hi-v5-profile__settings-item__title {font-size: var(--hi-v5-text-size-md, 0.875rem);line-height: var(--hi-v5-text-lineheight-md, 1.375rem);}.hi-v5-profile__settings-item__subtitle {font-size: var(--hi-v5-text-size-sm, 0.75rem);line-height: var(--hi-v5-text-lineheight-sm, 1.25rem);font-weight: var(--hi-v5-text-weight-medium, 500);color: var(--hi-v5-color-gray-500, #91959e);}.hi-v5-profile__settings-item__arrow {font-size: var(--hi-v5-text-size-lg, 1rem);color: var(--hi-v5-color-gray-500, #91959e);}.hi-v5-profile__settings-item-leaf {-webkit-box-sizing: border-box;box-sizing: border-box;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;height: 40px;padding: var(--hi-v5-spacing-4, 8px);border-radius: var(--hi-v5-border-radius-md, 4px);cursor: pointer;font-size: var(--hi-v5-text-size-md, 0.875rem);line-height: var(--hi-v5-text-lineheight-md, 1.375rem);}.hi-v5-profile__settings-item-leaf:hover {background-color: var(--hi-v5-color-gray-50, #f2f4f7);}.hi-v5-profile__settings-item-leaf--checked {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-profile__footer {padding: var(--hi-v5-spacing-4, 8px);border-top: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-200, #e6e8eb);}.hi-v5-profile__footer__content {-webkit-box-sizing: border-box;box-sizing: border-box;height: 40px;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: var(--hi-v5-spacing-4, 8px);border-radius: var(--hi-v5-border-radius-lg, 6px);cursor: pointer;font-size: var(--hi-v5-text-size-md, 0.875rem);line-height: var(--hi-v5-text-lineheight-md, 1.375rem);}.hi-v5-profile__footer__content:hover {background-color: var(--hi-v5-color-gray-50, #f2f4f7);}";
 __styleInject__(css_248z);
 export { css_248z as default };

package/lib/types/AppList.d.ts

@@ -0,0 +1,71 @@
+import React from 'react';
+import { HiBaseHTMLProps } from '@hi-ui/core';
+import { PopoverProps } from '@hi-ui/popover';
+/**
+ * 应用列表组件
+ */
+export declare const AppList: React.ForwardRefExoticComponent<AppListProps & React.RefAttributes<HTMLDivElement | null>>;
+export declare const IconBgColorMap: {
+    readonly BLUE: "#2660ff";
+    readonly SKYBLUE: "#0aadff";
+    readonly CYAN: "#04c2ac";
+    readonly GREEN: "#24b237";
+    readonly PURPLE: "#7f3df2";
+    readonly YELLOW: "#ffbe0a";
+    readonly ORANGE: "#ff7700";
+};
+export interface AppListItem {
+    /**
+     * 应用图标
+     */
+    icon?: React.ReactNode;
+    /**
+     * 应用图标背景颜色
+     */
+    iconBgColor?: keyof typeof IconBgColorMap;
+    /**
+     * 应用 id
+     */
+    id: React.ReactText;
+    /**
+     * 应用标题
+     */
+    title?: React.ReactNode;
+}
+export interface AppListProps extends HiBaseHTMLProps<'div'> {
+    /**
+     * 应用列表数据
+     */
+    data?: AppListItem[];
+    /**
+     * 默认激活的应用 id
+     */
+    defaultActiveId?: React.ReactText;
+    /**
+     * 激活的应用 id
+     */
+    activeId?: React.ReactText;
+    /**
+     * 应用标题渲染
+     */
+    titleRender?: (item: AppListItem) => React.ReactNode;
+    /**
+     * 应用列表点击回调
+     */
+    onItemClick?: (item: AppListItem, event: React.MouseEvent<HTMLDivElement>) => void;
+}
+export declare const AppListPopover: React.ForwardRefExoticComponent<AppListPopoverProps & React.RefAttributes<HTMLDivElement | null>>;
+export interface AppListPopoverProps extends AppListProps, Omit<PopoverProps, 'content'> {
+    /**
+     * 应用列表是否可见
+     */
+    visible?: boolean;
+    /**
+     * 应用列表打开回调
+     */
+    onOpen?: () => void;
+    /**
+     * 应用列表关闭回调
+     */
+    onClose?: () => void;
+}

package/lib/types/CollapseIcon.d.ts

@@ -0,0 +1 @@
+export declare const CollapseIcon: () => JSX.Element;

package/lib/types/Content.d.ts

@@ -1,8 +1,5 @@
 import React from 'react';
 import { HiBaseHTMLProps } from '@hi-ui/core';
-/**
- * 内容区域组件
- */
 export declare const Content: React.ForwardRefExoticComponent<ContentProps & React.RefAttributes<HTMLDivElement | null>>;
 export interface ContentProps extends HiBaseHTMLProps<'div'> {
 }

package/lib/types/FloatMenuContainer.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { HiBaseHTMLProps } from '@hi-ui/core';
+/**
+ * 浮动菜单容器组件
+ */
+export declare const FloatMenuContainer: React.ForwardRefExoticComponent<FloatMenuContainerProps & React.RefAttributes<HTMLDivElement | null>>;
+export interface FloatMenuContainerProps extends HiBaseHTMLProps<'div'> {
+    /**
+     * 浮动宽度
+     */
+    width?: number;
+    /**
+     * 层级
+     */
+    zIndex?: number;
+    /**
+     * 是否显示
+     */
+    visible?: boolean;
+    /**
+     * 是否折叠
+     */
+    collapsed?: boolean;
+    /**
+     * 折叠回调
+     */
+    onCollapse?: (collapsed: boolean) => void;
+}

package/lib/types/Footer.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { HiBaseHTMLProps } from '@hi-ui/core';
+export declare const Footer: React.ForwardRefExoticComponent<FooterProps & React.RefAttributes<HTMLDivElement | null>>;
+export interface FooterProps extends HiBaseHTMLProps<'div'> {
+}

package/lib/types/Header.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { HiBaseHTMLProps } from '@hi-ui/core';
+export declare const Header: React.ForwardRefExoticComponent<HeaderProps & React.RefAttributes<HTMLDivElement | null>>;
+export interface HeaderProps extends HiBaseHTMLProps<'div'> {
+}

package/lib/types/Layout.d.ts

@@ -5,4 +5,8 @@ import { HiBaseHTMLProps } from '@hi-ui/core';
  */
 export declare const Layout: React.ForwardRefExoticComponent<LayoutProps & React.RefAttributes<HTMLDivElement | null>>;
 export interface LayoutProps extends HiBaseHTMLProps<'div'> {
+    /**
+     * 布局方向
+     */
+    direction?: 'row' | 'column';
 }

package/lib/types/Profile.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { HiBaseHTMLProps } from '@hi-ui/core';
+import { PopoverProps } from '@hi-ui/popover';
+export declare const Profile: React.ForwardRefExoticComponent<ProfileProps & React.RefAttributes<HTMLDivElement | null>>;
+export interface ProfileSettingsItem {
+    id?: React.ReactText;
+    title?: string;
+    subtitle?: string;
+    children?: ProfileSettingsItem[];
+}
+export interface ProfileProps extends HiBaseHTMLProps<'div'> {
+    header?: React.ReactNode;
+    footer?: React.ReactNode;
+    settings?: {
+        value?: Record<string, React.ReactText>;
+        data: ProfileSettingsItem[];
+        placement?: PopoverProps['placement'];
+        onItemClick?: (evt: React.MouseEvent, item: ProfileSettingsItem) => void;
+        onChange?: (value: Record<string, React.ReactText>, targetItem: ProfileSettingsItem) => void;
+    };
+}
+export declare const ProfilePopover: React.ForwardRefExoticComponent<ProfilePopoverProps & React.RefAttributes<HTMLDivElement | null>>;
+export interface ProfilePopoverProps extends ProfileProps, Omit<PopoverProps, 'content'> {
+}

package/lib/types/SearchTrigger.d.ts

@@ -1,10 +1,21 @@
 import React from 'react';
 import { HiBaseHTMLProps } from '@hi-ui/core';
+import { MenuDataItem } from '@hi-ui/menu';
 /**
  * 搜索触发器组件
  */
 export declare const SearchTrigger: React.ForwardRefExoticComponent<SearchTriggerProps & React.RefAttributes<HTMLDivElement | null>>;
 export interface SearchTriggerProps extends HiBaseHTMLProps<'div'> {
+    /**
+     * 迷你模式
+     */
     mini?: boolean;
+    /**
+     * 占位符
+     */
     placeholder?: string;
+    /**
+     * 菜单数据
+     */
+    data?: MenuDataItem[];
 }

package/lib/types/Sider.d.ts

@@ -5,6 +5,27 @@ import { HiBaseHTMLProps } from '@hi-ui/core';
  */
 export declare const Sider: React.ForwardRefExoticComponent<SiderProps & React.RefAttributes<HTMLDivElement | null>>;
 export interface SiderProps extends HiBaseHTMLProps<'div'> {
+    /**
+     * 宽度
+     */
+    width?: number;
+    /**
+     * 最大宽度
+     */
+    maxWidth?: number;
+    /**
+     * 最小宽度
+     */
+    /**
+     * 是否可调整宽度
+     */
+    resizable?: boolean;
+    /**
+     * 是否折叠
+     */
     collapsed?: boolean;
+    /**
+     * 折叠回调
+     */
     onCollapse?: (collapsed: boolean) => void;
 }

package/lib/types/index.d.ts

@@ -1,6 +1,22 @@
+/// <reference types="react" />
 import './styles/index.scss';
+declare const Layout: import("react").ForwardRefExoticComponent<import("./Layout").LayoutProps & import("react").RefAttributes<HTMLDivElement | null>> & {
+    Header: import("react").ForwardRefExoticComponent<import("./Header").HeaderProps & import("react").RefAttributes<HTMLDivElement | null>>;
+    Sider: import("react").ForwardRefExoticComponent<import("./Sider").SiderProps & import("react").RefAttributes<HTMLDivElement | null>>;
+    Content: import("react").ForwardRefExoticComponent<import("./Content").ContentProps & import("react").RefAttributes<HTMLDivElement | null>>;
+    Footer: import("react").ForwardRefExoticComponent<import("./Footer").FooterProps & import("react").RefAttributes<HTMLDivElement | null>>;
+    SearchTrigger: import("react").ForwardRefExoticComponent<import("./SearchTrigger").SearchTriggerProps & import("react").RefAttributes<HTMLDivElement | null>>;
+    FloatMenuContainer: import("react").ForwardRefExoticComponent<import("./FloatMenuContainer").FloatMenuContainerProps & import("react").RefAttributes<HTMLDivElement | null>>;
+    AppListPopover: import("react").ForwardRefExoticComponent<import("./AppList").AppListPopoverProps & import("react").RefAttributes<HTMLDivElement | null>>;
+    ProfilePopover: import("react").ForwardRefExoticComponent<import("./Profile").ProfilePopoverProps & import("react").RefAttributes<HTMLDivElement | null>>;
+};
+export default Layout;
 export * from './Layout';
-export { Layout as default } from './Layout';
+export * from './Header';
 export * from './Sider';
 export * from './Content';
+export * from './Footer';
 export * from './SearchTrigger';
+export * from './FloatMenuContainer';
+export * from './AppList';
+export * from './Profile';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hi-ui/layout",
-  "version": "4.0.0",
+  "version": "5.0.0-alpha.0",
   "description": "A sub-package for @hi-ui/hiui.",
   "keywords": [],
   "author": "HiUI <mi-hiui@xiaomi.com>",
@@ -43,18 +43,20 @@
     "url": "https://github.com/XiaoMi/hiui/issues"
   },
   "dependencies": {
-    "@hi-ui/classname": "^4.0.0",
-    "@hi-ui/env": "^4.0.0",
-    "@hi-ui/use-uncontrolled-state": "^4.0.4"
+    "@hi-ui/classname": "^5.0.0-alpha.0",
+    "@hi-ui/env": "^5.0.0-alpha.0",
+    "@hi-ui/menu": "^5.0.0-alpha.0",
+    "@hi-ui/popper": "^5.0.0-alpha.0",
+    "@hi-ui/use-uncontrolled-state": "^5.0.0-alpha.0"
   },
   "peerDependencies": {
-    "@hi-ui/core": ">=4.0.0",
+    "@hi-ui/core": ">=5.0.0-alpha.0",
     "react": ">=16.8.6",
     "react-dom": ">=16.8.6"
   },
   "devDependencies": {
-    "@hi-ui/core": "^4.0.0",
-    "@hi-ui/core-css": "^4.0.0",
+    "@hi-ui/core": "^5.0.0-alpha.0",
+    "@hi-ui/core-css": "^5.0.0-alpha.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1"
   }