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

package/CHANGELOG.md

@@ -0,0 +1,51 @@
+# @hi-ui/layout
+
+## 5.0.0-alpha.0
+
+### Major Changes
+
+- b5ea92baa: feat(layout): 添加 AppListPopover 组件并更新布局样式和示例 (5.0)
+
+### Minor Changes
+
+- a1ad318d9: feat(layout): 增加 FloatMenuContainer 组件 (5.0)
+- 8d7936b56: feat(layout): 增加 Profile 组件 (5.0)
+- 229efe439: feat(layout): 新增 Layout 组件 (5.0)
+- e704a964f: feat(layout): 增加 Header 和 Footer 组件 & 完善示例 (5.0)
+- 95a545050: feat(layout): Sider 组件增加 maxWidth 参数 & FloatMenuContainer 组件增加 zIndex 参数 (5.0)
+- 8116f0304: feat(layout): Sider 增加 resizable 参数，控制是否可改变宽度 (5.0)
+
+### Patch Changes
+
+- 307f68517: <br />
+  - perf(layout): 优化导航菜单交互体验 (5.0)
+  - perf(menu): 优化搜索菜单组件的样式和交互逻辑 & 修改分组菜单样式问题 (5.0)
+- 8116f0304: fix: 修改 UI 问题 (5.0)
+- 46dbd140f: style(layout): 修改 Sider 收起时宽度为 60px & 增加 width 参数 (5.0)
+- 300d1573a: perf(layout&menu): 优化 FloatMenuContainer 组件的折叠逻辑 & 修改 SideMenu 组件 hover 样式 (5.0)
+- b2017f59b: style(layout): 在折叠状态下为 FloatMenuContainer 组件添加 z-index 属性 (5.0)
+- 5e04c6937: style(layout): Sider 组件默认宽度改为 180px (5.0)
+- Updated dependencies [5de7a848b]
+- Updated dependencies [307f68517]
+- Updated dependencies [1b05b44a4]
+- Updated dependencies [de7f92b26]
+- Updated dependencies [8116f0304]
+- Updated dependencies [46dbd140f]
+- Updated dependencies [300d1573a]
+- Updated dependencies [77ed66eac]
+- Updated dependencies [7f8760993]
+- Updated dependencies [a1ad318d9]
+- Updated dependencies [61d132802]
+- Updated dependencies [d9b2b928c]
+- Updated dependencies [2fec303ab]
+- Updated dependencies [6eac4b78b]
+- Updated dependencies [bcd3d08dd]
+- Updated dependencies [4fb586f6f]
+- Updated dependencies [b7ad460d8]
+- Updated dependencies [0d2737b09]
+  - @hi-ui/menu@5.0.0-alpha.0
+  - @hi-ui/core@5.0.0-alpha.0
+  - @hi-ui/use-uncontrolled-state@5.0.0-alpha.0
+  - @hi-ui/popper@5.0.0-alpha.0
+  - @hi-ui/classname@5.0.0-alpha.0
+  - @hi-ui/env@5.0.0-alpha.0

package/lib/cjs/AppList.js

@@ -0,0 +1,163 @@
+/** @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';
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+var tslib = require('tslib');
+var React = require('react');
+var classname = require('@hi-ui/classname');
+var env = require('@hi-ui/env');
+var useUncontrolledState = require('@hi-ui/use-uncontrolled-state');
+var index = require('./packages/hooks/use-toggle/lib/esm/index.js');
+var index$1 = require('./packages/ui/popover/lib/esm/index.js');
+require('./packages/icons/lib/esm/styles/index.scss.js');
+var checkOutlined = require('./packages/icons/lib/esm/components/alert/check-outlined.js');
+function _interopDefaultCompat(e) {
+  return e && _typeof(e) === 'object' && 'default' in e ? e : {
+    'default': e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var APP_LIST_PREFIX = classname.getPrefixCls('app-list');
+/**
+ * 应用列表组件
+ */
+var AppList = /*#__PURE__*/React.forwardRef(function (_a, ref) {
+  var _a$prefixCls = _a.prefixCls,
+    prefixCls = _a$prefixCls === void 0 ? APP_LIST_PREFIX : _a$prefixCls,
+    _a$role = _a.role,
+    role = _a$role === void 0 ? 'app-list' : _a$role,
+    className = _a.className,
+    data = _a.data,
+    activeIdProp = _a.activeId,
+    defaultActiveId = _a.defaultActiveId,
+    titleRender = _a.titleRender,
+    onItemClick = _a.onItemClick,
+    rest = tslib.__rest(_a, ["prefixCls", "role", "className", "data", "activeId", "defaultActiveId", "titleRender", "onItemClick"]);
+  var cls = classname.cx(prefixCls, className);
+  var _useUncontrolledState = useUncontrolledState.useUncontrolledState(defaultActiveId, activeIdProp),
+    activeId = _useUncontrolledState[0],
+    tryChangeActiveId = _useUncontrolledState[1];
+  var handleItemClick = React.useCallback(function (item, event) {
+    tryChangeActiveId(item.id);
+    onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item, event);
+    event.stopPropagation();
+  }, [tryChangeActiveId, onItemClick]);
+  var renderIcon = React.useCallback(function (item) {
+    var icon = item.icon,
+      title = item.title;
+    if (!icon) {
+      if (typeof title === 'string') {
+        return title.slice(0, 1);
+      }
+      return null;
+    }
+    return icon;
+  }, []);
+  return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
+    ref: ref,
+    role: role,
+    className: cls
+  }, rest), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: prefixCls + "-wrapper"
+  }, data === null || data === void 0 ? void 0 : data.map(function (item) {
+    var _cx;
+    var id = item.id,
+      title = item.title,
+      iconBgColor = item.iconBgColor;
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      className: classname.cx(prefixCls + "-item", (_cx = {}, _cx[prefixCls + "-item--active"] = activeId === id, _cx)),
+      key: id,
+      onClick: function onClick(event) {
+        return handleItemClick(item, event);
+      }
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: classname.cx(prefixCls + "-item__icon"),
+      style: {
+        backgroundColor: iconBgColor ? IconBgColorMap[iconBgColor] : undefined
+      }
+    }, renderIcon(item)), /*#__PURE__*/React__default["default"].createElement("div", {
+      className: prefixCls + "-item__title"
+    }, (titleRender === null || titleRender === void 0 ? void 0 : titleRender(item)) || title), /*#__PURE__*/React__default["default"].createElement("div", {
+      className: prefixCls + "-item__checked"
+    }, /*#__PURE__*/React__default["default"].createElement(checkOutlined.CheckOutlined, null)));
+  })));
+});
+var IconBgColorMap = {
+  // 深蓝色、浅蓝色、青色、绿色、紫色、黄色、橙色
+  BLUE: '#2660ff',
+  SKYBLUE: '#0aadff',
+  CYAN: '#04c2ac',
+  GREEN: '#24b237',
+  PURPLE: '#7f3df2',
+  YELLOW: '#ffbe0a',
+  ORANGE: '#ff7700'
+};
+if (env.__DEV__) {
+  AppList.displayName = 'AppList';
+}
+var AppListPopover = /*#__PURE__*/React.forwardRef(function (_a, ref) {
+  var onOpen = _a.onOpen,
+    onClose = _a.onClose,
+    visibleProp = _a.visible,
+    children = _a.children,
+    data = _a.data,
+    defaultActiveId = _a.defaultActiveId,
+    activeId = _a.activeId,
+    titleRender = _a.titleRender,
+    onItemClick = _a.onItemClick,
+    restProps = tslib.__rest(_a, ["onOpen", "onClose", "visible", "children", "data", "defaultActiveId", "activeId", "titleRender", "onItemClick"]);
+  var _useUncontrolledToggl = index.useUncontrolledToggle({
+      defaultVisible: false,
+      visible: visibleProp
+    }),
+    visible = _useUncontrolledToggl[0],
+    visibleAction = _useUncontrolledToggl[1];
+  var handleOpen = React.useCallback(function () {
+    visibleAction.on();
+    onOpen === null || onOpen === void 0 ? void 0 : onOpen();
+  }, [onOpen, visibleAction]);
+  var handleClose = React.useCallback(function () {
+    visibleAction.off();
+    onClose === null || onClose === void 0 ? void 0 : onClose();
+  }, [onClose, visibleAction]);
+  return /*#__PURE__*/React__default["default"].createElement(index$1.Popover, Object.assign({
+    style: {
+      boxSizing: 'border-box',
+      paddingLeft: 12,
+      paddingRight: 12,
+      maxHeight: 408,
+      overflow: 'auto'
+    },
+    visible: visible,
+    arrow: false,
+    placement: "right-start",
+    gutterGap: 4,
+    content: /*#__PURE__*/React__default["default"].createElement(AppList, {
+      ref: ref,
+      data: data,
+      defaultActiveId: defaultActiveId,
+      activeId: activeId,
+      titleRender: titleRender,
+      onItemClick: onItemClick
+    }),
+    onOpen: handleOpen,
+    onClose: handleClose
+  }, restProps), children);
+});
+if (env.__DEV__) {
+  AppListPopover.displayName = 'AppListPopover';
+}
+exports.AppList = AppList;
+exports.AppListPopover = AppListPopover;
+exports.IconBgColorMap = IconBgColorMap;

package/lib/cjs/CollapseIcon.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';
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+var React = require('react');
+function _interopDefaultCompat(e) {
+  return e && _typeof(e) === 'object' && 'default' in e ? e : {
+    'default': e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var CollapseIcon = function CollapseIcon() {
+  return /*#__PURE__*/React__default["default"].createElement("svg", {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M10 3L13 3",
+    stroke: "#60636B",
+    strokeWidth: "1.4",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M10 8L13 8",
+    stroke: "#60636B",
+    strokeWidth: "1.4",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M3 13L13 13",
+    stroke: "#60636B",
+    strokeWidth: "1.4",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M6 8L3 5.5L6 3",
+    stroke: "#60636B",
+    strokeWidth: "1.4",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }));
+};
+exports.CollapseIcon = CollapseIcon;

package/lib/cjs/Content.js

@@ -24,9 +24,6 @@ function _interopDefaultCompat(e) {
 }
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var CONTENT_PREFIX = classname.getPrefixCls('content');
-/**
- * 内容区域组件
- */
 var Content = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var _a$prefixCls = _a.prefixCls,
     prefixCls = _a$prefixCls === void 0 ? CONTENT_PREFIX : _a$prefixCls,
@@ -36,7 +33,7 @@ var Content = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     children = _a.children,
     rest = tslib.__rest(_a, ["prefixCls", "role", "className", "children"]);
   var cls = classname.cx(prefixCls, className);
-  return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
+  return /*#__PURE__*/React__default["default"].createElement("main", Object.assign({
     ref: ref,
     role: role,
     className: cls

package/lib/cjs/FloatMenuContainer.js

@@ -0,0 +1,93 @@
+/** @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';
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+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');
+var CollapseIcon = require('./CollapseIcon.js');
+function _interopDefaultCompat(e) {
+  return e && _typeof(e) === 'object' && 'default' in e ? e : {
+    'default': e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var FLOAT_MENU_CONTAINER_PREFIX = classname.getPrefixCls('float-menu-container');
+/**
+ * 浮动菜单容器组件
+ */
+var FloatMenuContainer = /*#__PURE__*/React.forwardRef(function (_a, ref) {
+  var _cx;
+  var _a$prefixCls = _a.prefixCls,
+    prefixCls = _a$prefixCls === void 0 ? FLOAT_MENU_CONTAINER_PREFIX : _a$prefixCls,
+    _a$role = _a.role,
+    role = _a$role === void 0 ? 'float-menu-container' : _a$role,
+    className = _a.className,
+    children = _a.children,
+    visibleProp = _a.visible,
+    width = _a.width,
+    _a$collapsed = _a.collapsed,
+    collapsedProp = _a$collapsed === void 0 ? true : _a$collapsed,
+    onCollapse = _a.onCollapse,
+    zIndex = _a.zIndex,
+    rest = tslib.__rest(_a, ["prefixCls", "role", "className", "children", "visible", "width", "collapsed", "onCollapse", "zIndex"]);
+  var cls = classname.cx(prefixCls, className);
+  var i18n = core.useLocaleContext();
+  var _React$useState = React__default["default"].useState(collapsedProp),
+    collapsed = _React$useState[0],
+    setCollapsed = _React$useState[1];
+  React__default["default"].useEffect(function () {
+    setCollapsed(collapsedProp);
+  }, [collapsedProp]);
+  var visible = React__default["default"].useMemo(function () {
+    return collapsed ? visibleProp : true;
+  }, [collapsed, visibleProp]);
+  var handleCollapse = function handleCollapse() {
+    var newCollapsed = !collapsed;
+    setCollapsed(newCollapsed);
+    onCollapse === null || onCollapse === void 0 ? void 0 : onCollapse(newCollapsed);
+  };
+  return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
+    ref: ref,
+    role: role,
+    className: cls
+  }, rest, {
+    style: visible ? {
+      width: collapsed ? 0 : width
+    } : {}
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classname.cx(prefixCls + "-content", (_cx = {}, _cx[prefixCls + "-content--show"] = visible, _cx[prefixCls + "-content--collapsed"] = collapsed, _cx)),
+    style: {
+      zIndex: zIndex,
+      width: visible ? width : 0
+    }
+  }, visible && ( /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classname.cx(prefixCls + "-collapse-wrapper")
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classname.cx(prefixCls + "-collapse"),
+    onClick: handleCollapse
+  }, /*#__PURE__*/React__default["default"].createElement("span", {
+    className: classname.cx(prefixCls + "-collapse-icon")
+  }, /*#__PURE__*/React__default["default"].createElement(CollapseIcon.CollapseIcon, null)), /*#__PURE__*/React__default["default"].createElement("span", {
+    className: classname.cx(prefixCls + "-collapse-text")
+  }, collapsed ? i18n.timeline.expand : i18n.timeline.collapse)))), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classname.cx(prefixCls + "-content-wrapper")
+  }, children)));
+});
+if (env.__DEV__) {
+  FloatMenuContainer.displayName = 'FloatMenuContainer';
+}
+exports.FloatMenuContainer = FloatMenuContainer;

package/lib/cjs/Footer.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.
+ */
+'use strict';
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+var tslib = require('tslib');
+var React = require('react');
+var classname = require('@hi-ui/classname');
+var env = require('@hi-ui/env');
+function _interopDefaultCompat(e) {
+  return e && _typeof(e) === 'object' && 'default' in e ? e : {
+    'default': e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var HEADER_PREFIX = classname.getPrefixCls('footer');
+var Footer = /*#__PURE__*/React.forwardRef(function (_a, ref) {
+  var _a$prefixCls = _a.prefixCls,
+    prefixCls = _a$prefixCls === void 0 ? HEADER_PREFIX : _a$prefixCls,
+    _a$role = _a.role,
+    role = _a$role === void 0 ? 'footer' : _a$role,
+    className = _a.className,
+    children = _a.children,
+    rest = tslib.__rest(_a, ["prefixCls", "role", "className", "children"]);
+  var cls = classname.cx(prefixCls, className);
+  return /*#__PURE__*/React__default["default"].createElement("footer", Object.assign({
+    ref: ref,
+    role: role,
+    className: cls
+  }, rest), children);
+});
+if (env.__DEV__) {
+  Footer.displayName = 'Footer';
+}
+exports.Footer = Footer;

package/lib/cjs/Header.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.
+ */
+'use strict';
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+var tslib = require('tslib');
+var React = require('react');
+var classname = require('@hi-ui/classname');
+var env = require('@hi-ui/env');
+function _interopDefaultCompat(e) {
+  return e && _typeof(e) === 'object' && 'default' in e ? e : {
+    'default': e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var HEADER_PREFIX = classname.getPrefixCls('header');
+var Header = /*#__PURE__*/React.forwardRef(function (_a, ref) {
+  var _a$prefixCls = _a.prefixCls,
+    prefixCls = _a$prefixCls === void 0 ? HEADER_PREFIX : _a$prefixCls,
+    _a$role = _a.role,
+    role = _a$role === void 0 ? 'header' : _a$role,
+    className = _a.className,
+    children = _a.children,
+    rest = tslib.__rest(_a, ["prefixCls", "role", "className", "children"]);
+  var cls = classname.cx(prefixCls, className);
+  return /*#__PURE__*/React__default["default"].createElement("header", Object.assign({
+    ref: ref,
+    role: role,
+    className: cls
+  }, rest), children);
+});
+if (env.__DEV__) {
+  Header.displayName = 'Header';
+}
+exports.Header = Header;

package/lib/cjs/Layout.js

@@ -34,8 +34,10 @@ var Layout = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     role = _a$role === void 0 ? 'layout' : _a$role,
     className = _a.className,
     children = _a.children,
-    rest = tslib.__rest(_a, ["prefixCls", "role", "className", "children"]);
-  var cls = classname.cx(prefixCls, className);
+    _a$direction = _a.direction,
+    direction = _a$direction === void 0 ? 'row' : _a$direction,
+    rest = tslib.__rest(_a, ["prefixCls", "role", "className", "children", "direction"]);
+  var cls = classname.cx(prefixCls, className, prefixCls + "--direction-" + direction);
   return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
     ref: ref,
     role: role,

package/lib/cjs/Profile.js

@@ -0,0 +1,165 @@
+/** @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';
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+var tslib = require('tslib');
+var React = require('react');
+var classname = require('@hi-ui/classname');
+var env = require('@hi-ui/env');
+var index = require('./packages/ui/popover/lib/esm/index.js');
+require('./packages/icons/lib/esm/styles/index.scss.js');
+var checkOutlined = require('./packages/icons/lib/esm/components/alert/check-outlined.js');
+var rightOutlined = require('./packages/icons/lib/esm/components/direction/right-outlined.js');
+var index$1 = require('./packages/hooks/use-toggle/lib/esm/index.js');
+var useUncontrolledState = require('@hi-ui/use-uncontrolled-state');
+function _interopDefaultCompat(e) {
+  return e && _typeof(e) === 'object' && 'default' in e ? e : {
+    'default': e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var PROFILE_PREFIX = classname.getPrefixCls('profile');
+var Profile = /*#__PURE__*/React.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 = tslib.__rest(_a, ["prefixCls", "role", "className", "children", "header", "footer", "settings"]);
+  var cls = classname.cx(prefixCls, className);
+  var _useUncontrolledState = 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__default["default"].createElement("div", Object.assign({
+    ref: ref,
+    role: role,
+    className: cls
+  }, rest), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: prefixCls + "__header"
+  }, header), /*#__PURE__*/React__default["default"].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__default["default"].createElement(index.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__default["default"].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__default["default"].createElement("div", {
+          key: child.id,
+          className: 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__default["default"].createElement("div", {
+          className: prefixCls + "__settings-item-leaf__title"
+        }, child.title), /*#__PURE__*/React__default["default"].createElement("div", {
+          className: prefixCls + "__settings-item-leaf__checked"
+        }, checked && /*#__PURE__*/React__default["default"].createElement(checkOutlined.CheckOutlined, null)));
+      }))
+    }), /*#__PURE__*/React__default["default"].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__default["default"].createElement("div", {
+      className: prefixCls + "__settings-item__title-wrapper"
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: prefixCls + "__settings-item__title"
+    }, item.title), item.subtitle ? ( /*#__PURE__*/React__default["default"].createElement("div", {
+      className: prefixCls + "__settings-item__subtitle"
+    }, item.subtitle)) : null), ((_d = item.children) === null || _d === void 0 ? void 0 : _d.length) ? ( /*#__PURE__*/React__default["default"].createElement("div", {
+      className: prefixCls + "__settings-item__arrow"
+    }, /*#__PURE__*/React__default["default"].createElement(rightOutlined.RightOutlined, null))) : null));
+  })), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: prefixCls + "__footer"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: prefixCls + "__footer__content"
+  }, footer)));
+});
+if (env.__DEV__) {
+  Profile.displayName = 'Profile';
+}
+var ProfilePopover = /*#__PURE__*/React.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 = tslib.__rest(_a, ["onOpen", "onClose", "visible", "placement", "trigger", "children"]);
+  var _useUncontrolledToggl = index$1.useUncontrolledToggle({
+      defaultVisible: false,
+      visible: visibleProp
+    }),
+    visible = _useUncontrolledToggl[0],
+    visibleAction = _useUncontrolledToggl[1];
+  var handleOpen = React.useCallback(function () {
+    visibleAction.on();
+    onOpen === null || onOpen === void 0 ? void 0 : onOpen();
+  }, [onOpen, visibleAction]);
+  var handleClose = React.useCallback(function () {
+    visibleAction.off();
+    onClose === null || onClose === void 0 ? void 0 : onClose();
+  }, [onClose, visibleAction]);
+  return /*#__PURE__*/React__default["default"].createElement(index.Popover, {
+    style: {
+      boxSizing: 'border-box',
+      padding: 0,
+      overflow: 'auto'
+    },
+    visible: visible,
+    arrow: false,
+    trigger: trigger,
+    placement: placement,
+    gutterGap: 16,
+    content: /*#__PURE__*/React__default["default"].createElement(Profile, Object.assign({
+      ref: ref
+    }, restProps)),
+    onOpen: handleOpen,
+    onClose: handleClose
+  }, children);
+});
+if (env.__DEV__) {
+  ProfilePopover.displayName = 'ProfilePopover';
+}
+exports.Profile = Profile;
+exports.ProfilePopover = ProfilePopover;