@hi-ui/layout 5.0.0-canary.4 → 5.0.0-canary.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/lib/cjs/FloatMenuContainer.js +4 -1
  3. package/lib/cjs/Sider.js +5 -3
  4. package/lib/cjs/styles/index.scss.js +1 -1
  5. package/lib/esm/FloatMenuContainer.js +4 -1
  6. package/lib/esm/Sider.js +5 -3
  7. package/lib/esm/styles/index.scss.js +1 -1
  8. package/lib/types/FloatMenuContainer.d.ts +4 -0
  9. package/lib/types/SearchTrigger.d.ts +9 -0
  10. package/lib/types/Sider.d.ts +19 -0
  11. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,24 @@
1
1
  # @hi-ui/layout
2
2
 
3
+ ## 5.0.0-canary.6
4
+
5
+ ### Patch Changes
6
+
7
+ - 301e49608: style(layout): 在折叠状态下为 FloatMenuContainer 组件添加 z-index 属性 (5.0)
8
+
9
+ ## 5.0.0-canary.5
10
+
11
+ ### Minor Changes
12
+
13
+ - 4798a025c: feat(layout): Sider 组件增加 maxWidth 参数 & FloatMenuContainer 组件增加 zIndex 参数 (5.0)
14
+
15
+ ### Patch Changes
16
+
17
+ - 282e6c499: perf(layout&menu): 优化 FloatMenuContainer 组件的折叠逻辑 & 修改 SideMenu 组件 hover 样式 (5.0)
18
+ - Updated dependencies [282e6c499]
19
+ - Updated dependencies [4782eb807]
20
+ - @hi-ui/menu@5.0.0-canary.9
21
+
3
22
  ## 5.0.0-canary.4
4
23
 
5
24
  ### Minor Changes
package/lib/cjs/FloatMenuContainer.js CHANGED
@@ -42,12 +42,14 @@ var FloatMenuContainer = /*#__PURE__*/React.forwardRef(function (_a, ref) {
42
42
  _a$collapsed = _a.collapsed,
43
43
  collapsedProp = _a$collapsed === void 0 ? true : _a$collapsed,
44
44
  onCollapse = _a.onCollapse,
45
- rest = tslib.__rest(_a, ["prefixCls", "role", "className", "children", "visible", "width", "collapsed", "onCollapse"]);
45
+ zIndex = _a.zIndex,
46
+ rest = tslib.__rest(_a, ["prefixCls", "role", "className", "children", "visible", "width", "collapsed", "onCollapse", "zIndex"]);
46
47
  var cls = classname.cx(prefixCls, className);
47
48
  var i18n = core.useLocaleContext();
48
49
  var _React$useState = React__default["default"].useState(collapsedProp),
49
50
  collapsed = _React$useState[0],
50
51
  setCollapsed = _React$useState[1];
52
+ console.log('collapsed', collapsed);
51
53
  React__default["default"].useEffect(function () {
52
54
  setCollapsed(collapsedProp);
53
55
  }, [collapsedProp]);
@@ -70,6 +72,7 @@ var FloatMenuContainer = /*#__PURE__*/React.forwardRef(function (_a, ref) {
70
72
  }), /*#__PURE__*/React__default["default"].createElement("div", {
71
73
  className: classname.cx(prefixCls + "-content", (_cx = {}, _cx[prefixCls + "-content--show"] = visible, _cx[prefixCls + "-content--collapsed"] = collapsed, _cx)),
72
74
  style: {
75
+ zIndex: zIndex,
73
76
  width: visible ? width : 0
74
77
  }
75
78
  }, visible && ( /*#__PURE__*/React__default["default"].createElement("div", {
package/lib/cjs/Sider.js CHANGED
@@ -41,12 +41,13 @@ var Sider = /*#__PURE__*/React.forwardRef(function (_a, ref) {
41
41
  role = _a$role === void 0 ? 'sider' : _a$role,
42
42
  className = _a.className,
43
43
  widthProp = _a.width,
44
+ maxWidthProp = _a.maxWidth,
44
45
  _a$resizable = _a.resizable,
45
46
  resizable = _a$resizable === void 0 ? true : _a$resizable,
46
47
  collapsedProp = _a.collapsed,
47
48
  onCollapse = _a.onCollapse,
48
49
  children = _a.children,
49
- rest = tslib.__rest(_a, ["prefixCls", "role", "className", "width", "resizable", "collapsed", "onCollapse", "children"]);
50
+ rest = tslib.__rest(_a, ["prefixCls", "role", "className", "width", "maxWidth", "resizable", "collapsed", "onCollapse", "children"]);
50
51
  var _useUncontrolledState = useUncontrolledState.useUncontrolledState(false, collapsedProp, onCollapse),
51
52
  collapsed = _useUncontrolledState[0],
52
53
  setCollapsed = _useUncontrolledState[1];
@@ -54,6 +55,7 @@ var Sider = /*#__PURE__*/React.forwardRef(function (_a, ref) {
54
55
  var _useState = React.useState(collapsedProp ? SIDER_WIDTH_MIN : siderWidth),
55
56
  width = _useState[0],
56
57
  setWidth = _useState[1];
58
+ var maxWidth = maxWidthProp || SIDER_WIDTH_MAX;
57
59
  var handleResize = function handleResize(evt, options) {
58
60
  var _a;
59
61
  var width = (_a = options === null || options === void 0 ? void 0 : options.size) === null || _a === void 0 ? void 0 : _a.width;
@@ -70,8 +72,8 @@ var Sider = /*#__PURE__*/React.forwardRef(function (_a, ref) {
70
72
  if (width < SIDER_WIDTH_MIN) {
71
73
  width = SIDER_WIDTH_MIN;
72
74
  }
73
- if (width > SIDER_WIDTH_MAX) {
74
- width = SIDER_WIDTH_MAX;
75
+ if (width > maxWidth) {
76
+ width = maxWidth;
75
77
  }
76
78
  setWidth(width);
77
79
  };
package/lib/cjs/styles/index.scss.js CHANGED
@@ -12,7 +12,7 @@
12
12
  Object.defineProperty(exports, '__esModule', {
13
13
  value: true
14
14
  });
15
- 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%;-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-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;}.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 {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: rotate(180deg);transform: rotate(180deg);}.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);}";
15
+ 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%;-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-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;}.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);}";
16
16
  var __styleInject__ = require('@hi-ui/style-inject')["default"];
17
17
  __styleInject__(css_248z);
18
18
  exports["default"] = css_248z;
package/lib/esm/FloatMenuContainer.js CHANGED
@@ -30,12 +30,14 @@ var FloatMenuContainer = /*#__PURE__*/forwardRef(function (_a, ref) {
30
30
  _a$collapsed = _a.collapsed,
31
31
  collapsedProp = _a$collapsed === void 0 ? true : _a$collapsed,
32
32
  onCollapse = _a.onCollapse,
33
- rest = __rest(_a, ["prefixCls", "role", "className", "children", "visible", "width", "collapsed", "onCollapse"]);
33
+ zIndex = _a.zIndex,
34
+ rest = __rest(_a, ["prefixCls", "role", "className", "children", "visible", "width", "collapsed", "onCollapse", "zIndex"]);
34
35
  var cls = cx(prefixCls, className);
35
36
  var i18n = useLocaleContext();
36
37
  var _React$useState = React.useState(collapsedProp),
37
38
  collapsed = _React$useState[0],
38
39
  setCollapsed = _React$useState[1];
40
+ console.log('collapsed', collapsed);
39
41
  React.useEffect(function () {
40
42
  setCollapsed(collapsedProp);
41
43
  }, [collapsedProp]);
@@ -58,6 +60,7 @@ var FloatMenuContainer = /*#__PURE__*/forwardRef(function (_a, ref) {
58
60
  }), /*#__PURE__*/React.createElement("div", {
59
61
  className: cx(prefixCls + "-content", (_cx = {}, _cx[prefixCls + "-content--show"] = visible, _cx[prefixCls + "-content--collapsed"] = collapsed, _cx)),
60
62
  style: {
63
+ zIndex: zIndex,
61
64
  width: visible ? width : 0
62
65
  }
63
66
  }, visible && ( /*#__PURE__*/React.createElement("div", {
package/lib/esm/Sider.js CHANGED
@@ -29,12 +29,13 @@ var Sider = /*#__PURE__*/forwardRef(function (_a, ref) {
29
29
  role = _a$role === void 0 ? 'sider' : _a$role,
30
30
  className = _a.className,
31
31
  widthProp = _a.width,
32
+ maxWidthProp = _a.maxWidth,
32
33
  _a$resizable = _a.resizable,
33
34
  resizable = _a$resizable === void 0 ? true : _a$resizable,
34
35
  collapsedProp = _a.collapsed,
35
36
  onCollapse = _a.onCollapse,
36
37
  children = _a.children,
37
- rest = __rest(_a, ["prefixCls", "role", "className", "width", "resizable", "collapsed", "onCollapse", "children"]);
38
+ rest = __rest(_a, ["prefixCls", "role", "className", "width", "maxWidth", "resizable", "collapsed", "onCollapse", "children"]);
38
39
  var _useUncontrolledState = useUncontrolledState(false, collapsedProp, onCollapse),
39
40
  collapsed = _useUncontrolledState[0],
40
41
  setCollapsed = _useUncontrolledState[1];
@@ -42,6 +43,7 @@ var Sider = /*#__PURE__*/forwardRef(function (_a, ref) {
42
43
  var _useState = useState(collapsedProp ? SIDER_WIDTH_MIN : siderWidth),
43
44
  width = _useState[0],
44
45
  setWidth = _useState[1];
46
+ var maxWidth = maxWidthProp || SIDER_WIDTH_MAX;
45
47
  var handleResize = function handleResize(evt, options) {
46
48
  var _a;
47
49
  var width = (_a = options === null || options === void 0 ? void 0 : options.size) === null || _a === void 0 ? void 0 : _a.width;
@@ -58,8 +60,8 @@ var Sider = /*#__PURE__*/forwardRef(function (_a, ref) {
58
60
  if (width < SIDER_WIDTH_MIN) {
59
61
  width = SIDER_WIDTH_MIN;
60
62
  }
61
- if (width > SIDER_WIDTH_MAX) {
62
- width = SIDER_WIDTH_MAX;
63
+ if (width > maxWidth) {
64
+ width = maxWidth;
63
65
  }
64
66
  setWidth(width);
65
67
  };
package/lib/esm/styles/index.scss.js CHANGED
@@ -8,6 +8,6 @@
8
8
  * LICENSE file in the root directory of this source tree.
9
9
  */
10
10
  import __styleInject__ from '@hi-ui/style-inject';
11
- 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%;-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-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;}.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 {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: rotate(180deg);transform: rotate(180deg);}.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);}";
11
+ 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%;-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-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;}.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);}";
12
12
  __styleInject__(css_248z);
13
13
  export { css_248z as default };
package/lib/types/FloatMenuContainer.d.ts CHANGED
@@ -9,6 +9,10 @@ export interface FloatMenuContainerProps extends HiBaseHTMLProps<'div'> {
9
9
  * 浮动宽度
10
10
  */
11
11
  width?: number;
12
+ /**
13
+ * 层级
14
+ */
15
+ zIndex?: number;
12
16
  /**
13
17
  * 是否显示
14
18
  */
package/lib/types/SearchTrigger.d.ts CHANGED
@@ -6,7 +6,16 @@ import { MenuDataItem } from '@hi-ui/menu';
6
6
  */
7
7
  export declare const SearchTrigger: React.ForwardRefExoticComponent<SearchTriggerProps & React.RefAttributes<HTMLDivElement | null>>;
8
8
  export interface SearchTriggerProps extends HiBaseHTMLProps<'div'> {
9
+ /**
10
+ * 迷你模式
11
+ */
9
12
  mini?: boolean;
13
+ /**
14
+ * 占位符
15
+ */
10
16
  placeholder?: string;
17
+ /**
18
+ * 菜单数据
19
+ */
11
20
  data?: MenuDataItem[];
12
21
  }
package/lib/types/Sider.d.ts CHANGED
@@ -5,8 +5,27 @@ import { HiBaseHTMLProps } from '@hi-ui/core';
5
5
  */
6
6
  export declare const Sider: React.ForwardRefExoticComponent<SiderProps & React.RefAttributes<HTMLDivElement | null>>;
7
7
  export interface SiderProps extends HiBaseHTMLProps<'div'> {
8
+ /**
9
+ * 宽度
10
+ */
8
11
  width?: number;
12
+ /**
13
+ * 最大宽度
14
+ */
15
+ maxWidth?: number;
16
+ /**
17
+ * 最小宽度
18
+ */
19
+ /**
20
+ * 是否可调整宽度
21
+ */
9
22
  resizable?: boolean;
23
+ /**
24
+ * 是否折叠
25
+ */
10
26
  collapsed?: boolean;
27
+ /**
28
+ * 折叠回调
29
+ */
11
30
  onCollapse?: (collapsed: boolean) => void;
12
31
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hi-ui/layout",
3
- "version": "5.0.0-canary.4",
3
+ "version": "5.0.0-canary.6",
4
4
  "description": "A sub-package for @hi-ui/hiui.",
5
5
  "keywords": [],
6
6
  "author": "HiUI <mi-hiui@xiaomi.com>",
@@ -45,7 +45,7 @@
45
45
  "dependencies": {
46
46
  "@hi-ui/classname": "^5.0.0-canary.2",
47
47
  "@hi-ui/env": "^5.0.0-canary.2",
48
- "@hi-ui/menu": "^5.0.0-canary.8",
48
+ "@hi-ui/menu": "^5.0.0-canary.9",
49
49
  "@hi-ui/popper": "^5.0.0-canary.6",
50
50
  "@hi-ui/use-uncontrolled-state": "^5.0.0-canary.2"
51
51
  },