@hi-ui/layout 5.0.0-canary.12 → 5.0.0-canary.13

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 +11 -0
  2. package/lib/.DS_Store +0 -0
  3. package/lib/cjs/ActionItem.js +51 -0
  4. package/lib/cjs/index.js +2 -0
  5. package/lib/cjs/styles/index.scss.js +1 -1
  6. package/lib/esm/ActionItem.js +39 -0
  7. package/lib/esm/index.js +1 -0
  8. package/lib/esm/styles/index.scss.js +1 -1
  9. package/lib/types/ActionItem.d.ts +7 -0
  10. package/lib/types/index.d.ts +1 -0
  11. package/package.json +5 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,16 @@
1
1
  # @hi-ui/layout
2
2
 
3
+ ## 5.0.0-canary.13
4
+
5
+ ### Patch Changes
6
+
7
+ - 58db39510: style: fix ui bug (5.0)
8
+ - Updated dependencies [58db39510]
9
+ - @hi-ui/icons@5.0.0-canary.7
10
+ - @hi-ui/menu@5.0.0-canary.15
11
+ - @hi-ui/popover@5.0.0-canary.9
12
+ - @hi-ui/popper@5.0.0-canary.11
13
+
3
14
  ## 5.0.0-canary.12
4
15
 
5
16
  ### Patch Changes
package/lib/.DS_Store ADDED
Binary file
package/lib/cjs/ActionItem.js ADDED
@@ -0,0 +1,51 @@
1
+ /** @LICENSE
2
+ * @hi-ui/layout
3
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/layout#readme
4
+ *
5
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
6
+ *
7
+ * This source code is licensed under the MIT license found in the
8
+ * LICENSE file in the root directory of this source tree.
9
+ */
10
+ 'use strict';
11
+
12
+ var _typeof = require("@babel/runtime/helpers/typeof");
13
+ Object.defineProperty(exports, '__esModule', {
14
+ value: true
15
+ });
16
+ var tslib = require('tslib');
17
+ var React = require('react');
18
+ var classname = require('@hi-ui/classname');
19
+ var env = require('@hi-ui/env');
20
+ function _interopDefaultCompat(e) {
21
+ return e && _typeof(e) === 'object' && 'default' in e ? e : {
22
+ 'default': e
23
+ };
24
+ }
25
+ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
26
+ var ACTION_ITEM_PREFIX = classname.getPrefixCls('action-item');
27
+ var ActionItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
28
+ var _a$prefixCls = _a.prefixCls,
29
+ prefixCls = _a$prefixCls === void 0 ? ACTION_ITEM_PREFIX : _a$prefixCls,
30
+ _a$role = _a.role,
31
+ role = _a$role === void 0 ? 'action-item' : _a$role,
32
+ className = _a.className,
33
+ children = _a.children,
34
+ icon = _a.icon,
35
+ mini = _a.mini,
36
+ rest = tslib.__rest(_a, ["prefixCls", "role", "className", "children", "icon", "mini"]);
37
+ var cls = classname.cx(prefixCls, className, mini && prefixCls + "--mini");
38
+ return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
39
+ ref: ref,
40
+ role: role,
41
+ className: cls
42
+ }, rest), icon && /*#__PURE__*/React__default["default"].createElement("div", {
43
+ className: prefixCls + "__icon"
44
+ }, icon), children && !mini && /*#__PURE__*/React__default["default"].createElement("div", {
45
+ className: prefixCls + "__content"
46
+ }, children));
47
+ });
48
+ if (env.__DEV__) {
49
+ ActionItem.displayName = 'ActionItem';
50
+ }
51
+ exports.ActionItem = ActionItem;
package/lib/cjs/index.js CHANGED
@@ -22,6 +22,7 @@ var SearchTrigger = require('./SearchTrigger.js');
22
22
  var FloatMenuContainer = require('./FloatMenuContainer.js');
23
23
  var AppList = require('./AppList.js');
24
24
  var Profile = require('./Profile.js');
25
+ var ActionItem = require('./ActionItem.js');
25
26
  var Layout = Object.assign(Layout$1.Layout, {
26
27
  Header: Header.Header,
27
28
  Sider: Sider.Sider,
@@ -44,4 +45,5 @@ exports.AppListPopover = AppList.AppListPopover;
44
45
  exports.IconBgColorMap = AppList.IconBgColorMap;
45
46
  exports.Profile = Profile.Profile;
46
47
  exports.ProfilePopover = Profile.ProfilePopover;
48
+ exports.ActionItem = ActionItem.ActionItem;
47
49
  exports["default"] = Layout;
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;-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-300, #e6e8eb);box-shadow: 1px 0 0 0 var(--hi-v5-color-gray-300, #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-600, #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-200, #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-700, #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-300, #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-200, #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-100, #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-100, #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-600, #91959e);}.hi-v5-profile__settings-item__arrow {font-size: var(--hi-v5-text-size-lg, 1rem);color: var(--hi-v5-color-gray-600, #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-100, #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-300, #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-100, #f2f4f7);}";
15
+ 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-300, #e6e8eb);box-shadow: 1px 0 0 0 var(--hi-v5-color-gray-300, #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-600, #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 {width: 32px;margin-left: var(--hi-v5-spacing-7, 14px);-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;}.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-200, #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-700, #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-300, #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-200, #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-100, #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-100, #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-600, #91959e);}.hi-v5-profile__settings-item__arrow {font-size: var(--hi-v5-text-size-lg, 1rem);color: var(--hi-v5-color-gray-600, #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-100, #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-300, #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-100, #f2f4f7);}.hi-v5-action-item {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;gap: var(--hi-v5-spacing-4, 8px);-webkit-box-sizing: border-box;box-sizing: border-box;height: var(--hi-v5-height-8, 32px);padding: 0 var(--hi-v5-spacing-6, 12px);margin: var(--hi-v5-spacing-2, 4px) 0;border-radius: var(--hi-v5-border-radius-lg, 6px);cursor: pointer;-webkit-transition: all 0.3s;transition: all 0.3s;}.hi-v5-action-item:hover {background-color: rgba(124, 135, 166, 0.15);}.hi-v5-action-item__icon {font-size: var(--hi-v5-text-size-xl, 1.125rem);color: #7c87a6;}.hi-v5-action-item__content {font-size: var(--hi-v5-text-size-md, 0.875rem);line-height: var(--hi-v5-text-lineheight-md, 1.375rem);}.hi-v5-action-item--mini {margin-left: var(--hi-v5-spacing-2, 4px);}.hi-v5-action-item--mini .hi-v5-action-item__icon {font-size: var(--hi-v5-text-size-lg, 1rem);}";
16
16
  var __styleInject__ = require('@hi-ui/style-inject')["default"];
17
17
  __styleInject__(css_248z);
18
18
  exports["default"] = css_248z;
package/lib/esm/ActionItem.js ADDED
@@ -0,0 +1,39 @@
1
+ /** @LICENSE
2
+ * @hi-ui/layout
3
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/layout#readme
4
+ *
5
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
6
+ *
7
+ * This source code is licensed under the MIT license found in the
8
+ * LICENSE file in the root directory of this source tree.
9
+ */
10
+ import { __rest } from 'tslib';
11
+ import React, { forwardRef } from 'react';
12
+ import { getPrefixCls, cx } from '@hi-ui/classname';
13
+ import { __DEV__ } from '@hi-ui/env';
14
+ var ACTION_ITEM_PREFIX = getPrefixCls('action-item');
15
+ var ActionItem = /*#__PURE__*/forwardRef(function (_a, ref) {
16
+ var _a$prefixCls = _a.prefixCls,
17
+ prefixCls = _a$prefixCls === void 0 ? ACTION_ITEM_PREFIX : _a$prefixCls,
18
+ _a$role = _a.role,
19
+ role = _a$role === void 0 ? 'action-item' : _a$role,
20
+ className = _a.className,
21
+ children = _a.children,
22
+ icon = _a.icon,
23
+ mini = _a.mini,
24
+ rest = __rest(_a, ["prefixCls", "role", "className", "children", "icon", "mini"]);
25
+ var cls = cx(prefixCls, className, mini && prefixCls + "--mini");
26
+ return /*#__PURE__*/React.createElement("div", Object.assign({
27
+ ref: ref,
28
+ role: role,
29
+ className: cls
30
+ }, rest), icon && /*#__PURE__*/React.createElement("div", {
31
+ className: prefixCls + "__icon"
32
+ }, icon), children && !mini && /*#__PURE__*/React.createElement("div", {
33
+ className: prefixCls + "__content"
34
+ }, children));
35
+ });
36
+ if (__DEV__) {
37
+ ActionItem.displayName = 'ActionItem';
38
+ }
39
+ export { ActionItem };
package/lib/esm/index.js CHANGED
@@ -19,6 +19,7 @@ import { AppListPopover } from './AppList.js';
19
19
  export { AppList, IconBgColorMap } from './AppList.js';
20
20
  import { ProfilePopover } from './Profile.js';
21
21
  export { Profile } from './Profile.js';
22
+ export { ActionItem } from './ActionItem.js';
22
23
  var Layout = Object.assign(Layout$1, {
23
24
  Header: Header,
24
25
  Sider: Sider,
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;-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-300, #e6e8eb);box-shadow: 1px 0 0 0 var(--hi-v5-color-gray-300, #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-600, #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-200, #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-700, #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-300, #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-200, #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-100, #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-100, #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-600, #91959e);}.hi-v5-profile__settings-item__arrow {font-size: var(--hi-v5-text-size-lg, 1rem);color: var(--hi-v5-color-gray-600, #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-100, #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-300, #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-100, #f2f4f7);}";
11
+ 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-300, #e6e8eb);box-shadow: 1px 0 0 0 var(--hi-v5-color-gray-300, #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-600, #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 {width: 32px;margin-left: var(--hi-v5-spacing-7, 14px);-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;}.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-200, #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-700, #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-300, #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-200, #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-100, #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-100, #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-600, #91959e);}.hi-v5-profile__settings-item__arrow {font-size: var(--hi-v5-text-size-lg, 1rem);color: var(--hi-v5-color-gray-600, #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-100, #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-300, #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-100, #f2f4f7);}.hi-v5-action-item {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;gap: var(--hi-v5-spacing-4, 8px);-webkit-box-sizing: border-box;box-sizing: border-box;height: var(--hi-v5-height-8, 32px);padding: 0 var(--hi-v5-spacing-6, 12px);margin: var(--hi-v5-spacing-2, 4px) 0;border-radius: var(--hi-v5-border-radius-lg, 6px);cursor: pointer;-webkit-transition: all 0.3s;transition: all 0.3s;}.hi-v5-action-item:hover {background-color: rgba(124, 135, 166, 0.15);}.hi-v5-action-item__icon {font-size: var(--hi-v5-text-size-xl, 1.125rem);color: #7c87a6;}.hi-v5-action-item__content {font-size: var(--hi-v5-text-size-md, 0.875rem);line-height: var(--hi-v5-text-lineheight-md, 1.375rem);}.hi-v5-action-item--mini {margin-left: var(--hi-v5-spacing-2, 4px);}.hi-v5-action-item--mini .hi-v5-action-item__icon {font-size: var(--hi-v5-text-size-lg, 1rem);}";
12
12
  __styleInject__(css_248z);
13
13
  export { css_248z as default };
package/lib/types/ActionItem.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ import React from 'react';
2
+ import { HiBaseHTMLProps } from '@hi-ui/core';
3
+ export declare const ActionItem: React.ForwardRefExoticComponent<ActionItemProps & React.RefAttributes<HTMLDivElement | null>>;
4
+ export interface ActionItemProps extends HiBaseHTMLProps<'div'> {
5
+ icon?: React.ReactNode;
6
+ mini?: boolean;
7
+ }
package/lib/types/index.d.ts CHANGED
@@ -20,3 +20,4 @@ export * from './SearchTrigger';
20
20
  export * from './FloatMenuContainer';
21
21
  export * from './AppList';
22
22
  export * from './Profile';
23
+ export * from './ActionItem';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hi-ui/layout",
3
- "version": "5.0.0-canary.12",
3
+ "version": "5.0.0-canary.13",
4
4
  "description": "A sub-package for @hi-ui/hiui.",
5
5
  "keywords": [],
6
6
  "author": "HiUI <mi-hiui@xiaomi.com>",
@@ -46,10 +46,10 @@
46
46
  "dependencies": {
47
47
  "@hi-ui/classname": "^5.0.0-canary.2",
48
48
  "@hi-ui/env": "^5.0.0-canary.2",
49
- "@hi-ui/icons": "^5.0.0-canary.5",
50
- "@hi-ui/menu": "^5.0.0-canary.13",
51
- "@hi-ui/popper": "^5.0.0-canary.9",
52
- "@hi-ui/popover": "^5.0.0-canary.8",
49
+ "@hi-ui/icons": "^5.0.0-canary.7",
50
+ "@hi-ui/menu": "^5.0.0-canary.15",
51
+ "@hi-ui/popper": "^5.0.0-canary.11",
52
+ "@hi-ui/popover": "^5.0.0-canary.9",
53
53
  "@hi-ui/use-toggle": "^5.0.0-canary.2",
54
54
  "@hi-ui/use-uncontrolled-state": "^5.0.0-canary.2"
55
55
  },