@alicloud/console-base-rc-side-panel 1.0.0

package/build/es/model/types/context.js

@@ -0,0 +1 @@
+export {};

package/build/es/model/types/index.js

@@ -0,0 +1,5 @@
+export * from './common';
+export * from './props';
+export * from './state';
+export * from './action';
+export * from './context';

package/build/es/model/types/props.js

@@ -0,0 +1 @@
+export {};

package/build/es/model/types/state.js

@@ -0,0 +1 @@
+export {};

package/build/es/model/util/index.js

@@ -0,0 +1 @@
+export { default as toggleBodyClass } from './toggle-body-class';

package/build/es/model/util/toggle-body-class.js

@@ -0,0 +1,10 @@
+import { addClass, removeClass } from '@alicloud/mere-dom';
+import { BODY_CLASS_WITH_SIDE_PANEL } from '../const';
+export default function toggleBodyClass() {
+  var yes = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+  if (yes) {
+    addClass(document.body, BODY_CLASS_WITH_SIDE_PANEL);
+  } else {
+    removeClass(document.body, BODY_CLASS_WITH_SIDE_PANEL);
+  }
+}

package/build/es/ui/const/index.js

@@ -0,0 +1,12 @@
+import { SIZE } from '@alicloud/console-base-theme';
+export var SPACING_X = 10; // 圆形按钮与条状 Panel 的水平间隙
+export var SPACING_Y = 6;
+export var SIZE_BUTTON = SIZE.WIDTH_SIDE_PANEL - SPACING_X * 2;
+export var SIZE_BUTTON_ICON = SIZE_BUTTON * 0.5;
+export var SIZE_BUTTON_WRAP_WIDTH = SIZE.WIDTH_SIDE_PANEL;
+export var SIZE_BUTTON_WRAP_HEIGHT = SIZE_BUTTON + 2 * SPACING_Y;
+export var DATA_KEY_SIDE_PANEL_ITEM = 'data-console-base-side-panel-item';
+
+// 给应用一些属性钩子，不需要值（所有 ConsoleBase 下的组件，钩子属性的规范是 `data-j-[组件名]-xx`）
+// 不要随意改
+export var DATA_KEY_J = 'data-j-side-panel';

package/build/es/ui/index.js

@@ -0,0 +1,19 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import React from 'react';
+import styled, { css } from 'styled-components';
+import { useVisible, useCollapsed } from '../model';
+import { DATA_KEY_J } from './const';
+import { Aside, GlobalStyleOnBody } from './rc';
+import { ItemsTop, ItemsBottom, CollapseToggle } from './rc-container';
+var ScUi = styled(Aside).withConfig({
+  componentId: "sc-1ok6knf-0"
+})(["", ""], function (props) {
+  return props.collapsed ? css(["transform:translateX(100%);"]) : null;
+});
+export default function Ui() {
+  var visible = useVisible();
+  var collapsed = useCollapsed();
+  return visible ? /*#__PURE__*/React.createElement(ScUi, _defineProperty({
+    collapsed: collapsed
+  }, DATA_KEY_J, ''), /*#__PURE__*/React.createElement(GlobalStyleOnBody, null), /*#__PURE__*/React.createElement(ItemsTop, null), /*#__PURE__*/React.createElement(ItemsBottom, null), /*#__PURE__*/React.createElement(CollapseToggle, null)) : null;
+}

package/build/es/ui/intl/index.js

@@ -0,0 +1,11 @@
+import intlFactory from '@alicloud/console-base-intl-factory-basic';
+import localesEnUS from './locales/en-us';
+import localesZhCN from './locales/zh-cn';
+import localesZhTW from './locales/zh-tw';
+import localesJaJP from './locales/ja-jp';
+export default intlFactory({
+  'en-US': localesEnUS,
+  'zh-CN': localesZhCN,
+  'zh-TW': localesZhTW,
+  'ja-JP': localesJaJP
+});

package/build/es/ui/intl/locales/en-us.js

@@ -0,0 +1,5 @@
+export default {
+  'op:toggle_visible': 'Show Side Panel',
+  'op:toggle_hidden': 'Hide Side Panel',
+  'op:back_to_top': 'Back to Top'
+};

package/build/es/ui/intl/locales/ja-jp.js

@@ -0,0 +1,5 @@
+export default {
+  'op:toggle_visible': 'サイドバーを表示',
+  'op:toggle_hidden': 'サイドバーを隠す',
+  'op:back_to_top': 'トップに戻る'
+};

package/build/es/ui/intl/locales/zh-cn.js

@@ -0,0 +1,5 @@
+export default {
+  'op:toggle_visible': '显示侧边栏',
+  'op:toggle_hidden': '隐藏侧边栏',
+  'op:back_to_top': '返回顶部'
+};

package/build/es/ui/intl/locales/zh-tw.js

@@ -0,0 +1,5 @@
+export default {
+  'op:toggle_visible': '展示側邊欄',
+  'op:toggle_hidden': '隱藏側邊欄',
+  'op:back_to_top': '返回頂部'
+};

package/build/es/ui/rc/aside/index.js

@@ -0,0 +1,6 @@
+import styled from 'styled-components';
+import { SIZE, Z_INDEX, mixinBgPrimary, mixinShadowSLeft } from '@alicloud/console-base-theme';
+import { SIZE_BUTTON_WRAP_HEIGHT, SPACING_Y } from '../../const';
+export default styled.aside.withConfig({
+  componentId: "sc-1e5hmz-0"
+})(["display:flex;flex-direction:column;position:fixed;top:0;right:0;bottom:0;z-index:", ";padding:", "px 0 ", "px 0;width:", "px;transition:all ease-in-out 250ms;", " ", " .hasTopbar &{top:", "px;}"], Z_INDEX.SIDE_PANEL, SPACING_Y * 1.5, SIZE_BUTTON_WRAP_HEIGHT + SPACING_Y, SIZE.WIDTH_SIDE_PANEL, mixinBgPrimary, mixinShadowSLeft, SIZE.HEIGHT_TOP_NAV);

package/build/es/ui/rc/global-style-on-body/index.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { createGlobalStyle } from 'styled-components';
+import { SIZE, Z_INDEX } from '@alicloud/console-base-theme';
+import { BODY_CLASS_WITH_SIDE_PANEL } from '../../../model';
+var GlobalStyle = createGlobalStyle(["body.", "{padding-right:", "px;transition:padding-right ease-in-out 250ms;.viewFramework-body{right:", "px;left:0;z-index:", ";width:auto !important;}}"], BODY_CLASS_WITH_SIDE_PANEL, SIZE.WIDTH_SIDE_PANEL, SIZE.WIDTH_SIDE_PANEL, Z_INDEX.SIDE_PANEL - 1);
+export default function GlobalStyleOnBody() {
+  return /*#__PURE__*/React.createElement(GlobalStyle, null);
+}

package/build/es/ui/rc/index.js

@@ -0,0 +1,6 @@
+export { default as Aside } from './aside';
+export { default as GlobalStyleOnBody } from './global-style-on-body';
+export { default as SidePanelItemWrap } from './side-panel-item-wrap';
+export { default as SidePanelItemButton } from './side-panel-item-button';
+export { default as SidePanelItemBadge } from './side-panel-item-badge';
+export { default as SidePanelItemTooltip } from './side-panel-item-tooltip';

package/build/es/ui/rc/side-panel-item-badge/index.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+import { BadgeBaseDot, BadgeBaseNumber } from '@alicloud/console-base-theme-sc-base';
+import Mark from '@alicloud/console-base-rc-marks';
+var ScUnreadDot = styled(BadgeBaseDot).withConfig({
+  componentId: "sc-1isvxe9-0"
+})(["top:8px;", ""], function (props) {
+  return props.$alignLeft ? css(["left:8px;"]) : css(["right:8px;"]);
+});
+var ScUnreadNumber = styled(BadgeBaseNumber).withConfig({
+  componentId: "sc-1isvxe9-1"
+})(["top:4px;", ""], function (props) {
+  return props.$alignLeft ? css(["left:2px;right:auto;"]) : css(["right:2px;"]);
+});
+var ScMark = styled(Mark).withConfig({
+  componentId: "sc-1isvxe9-2"
+})(["position:absolute;top:4px;", " transform:scale(0.75);"], function (props) {
+  return props.$alignLeft ? css(["left:0;"]) : css(["right:0;"]);
+});
+
+/**
+ * 右上角的徽标，unread 优先于 mark
+ */
+export default function SidePanelItemBadge(_ref) {
+  var unread = _ref.unread,
+    mark = _ref.mark,
+    alignLeft = _ref.alignLeft;
+  if (unread) {
+    if (unread === true) {
+      return /*#__PURE__*/React.createElement(ScUnreadDot, {
+        $alignLeft: alignLeft
+      });
+    }
+    return /*#__PURE__*/React.createElement(ScUnreadNumber, {
+      $alignLeft: alignLeft
+    }, unread < 100 ? unread : '99+');
+  }
+  if (mark === 'NEW' || mark === 'HOT') {
+    return /*#__PURE__*/React.createElement(ScMark, {
+      $alignLeft: alignLeft,
+      type: mark,
+      borderRadius: true
+    });
+  }
+  return null;
+}

package/build/es/ui/rc/side-panel-item-button/index.js

@@ -0,0 +1,29 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["title"];
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import React from 'react';
+import styled, { css } from 'styled-components';
+import { mixinTextSecondary, mixinBgSecondaryFade, mixinBgTertiaryFade, mixinShadowSDown } from '@alicloud/console-base-theme';
+import Button, { ButtonSize, ButtonTheme } from '@alicloud/console-base-rc-button';
+import { SIZE_BUTTON, SIZE_BUTTON_ICON } from '../../const';
+var ScButton = styled(Button).withConfig({
+  componentId: "sc-titsgb-0"
+})(["border-radius:", "px;width:", "px;height:", "px;line-height:", "px;", " ", " ", " i{font-size:", "px;}svg,img{display:inline-block;width:", "px;height:", "px;vertical-align:middle;}&:hover{", "}a:link&,a:visited&{", "}"], SIZE_BUTTON, SIZE_BUTTON, SIZE_BUTTON, SIZE_BUTTON, mixinBgSecondaryFade, mixinTextSecondary, function (props) {
+  return props.active ? css(["", " ", ""], mixinBgTertiaryFade, mixinShadowSDown) : null;
+}, SIZE_BUTTON_ICON, SIZE_BUTTON_ICON, SIZE_BUTTON_ICON, mixinBgTertiaryFade, mixinTextSecondary);
+
+/**
+ * 工具的按钮
+ */
+export default function SidePanelItemButton(_ref) {
+  var title = _ref.title,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(ScButton, _objectSpread(_objectSpread({
+    'aria-label': title
+  }, props), {}, {
+    size: ButtonSize.NONE,
+    theme: ButtonTheme.NONE
+  }));
+}

package/build/es/ui/rc/side-panel-item-tooltip/index.js

@@ -0,0 +1,48 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["visible", "align", "content"];
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import React from 'react';
+import styled, { css } from 'styled-components';
+import { SIZE } from '@alicloud/console-base-theme';
+import Tooltip, { TooltipPlacement } from '@alicloud/console-base-rc-tooltip';
+import { SIZE_BUTTON_WRAP_HEIGHT } from '../../const';
+var ScTooltip = styled(Tooltip).withConfig({
+  componentId: "sc-11m2ouk-0"
+})(["right:", "px;", " img{max-width:100%;}"], SIZE.WIDTH_SIDE_PANEL - 4, function (props) {
+  switch (props.placement) {
+    case TooltipPlacement.LEFT_TOP:
+      return css(["top:0;"]);
+    case TooltipPlacement.LEFT_BOTTOM:
+      return css(["bottom:0;"]);
+    default:
+      return css(["bottom:", "px;transform:translateY(50%);"], SIZE_BUTTON_WRAP_HEIGHT * 0.5);
+  }
+});
+function getPlacement(align) {
+  switch (align) {
+    case 'top':
+      return TooltipPlacement.LEFT_TOP;
+    case 'bottom':
+      return TooltipPlacement.LEFT_BOTTOM;
+    default:
+      return TooltipPlacement.LEFT;
+  }
+}
+
+/**
+ * 工具按钮之外的部分（如果不是 tooltip 则期望它是 createPortal 出去的）
+ */
+export default function SidePanelItemTooltip(_ref) {
+  var visible = _ref.visible,
+    align = _ref.align,
+    content = _ref.content,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(ScTooltip, _objectSpread({
+    visible: visible,
+    placement: getPlacement(align),
+    arrowOffset: SIZE_BUTTON_WRAP_HEIGHT * 0.5,
+    content: content
+  }, props));
+}

package/build/es/ui/rc/side-panel-item-wrap/index.js

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+import { SIZE_BUTTON_WRAP_WIDTH, SIZE_BUTTON_WRAP_HEIGHT } from '../../const';
+
+/**
+ * 工具的外层包裹
+ */
+export default styled.div.withConfig({
+  componentId: "sc-3r2cly-0"
+})(["display:flex;align-items:center;justify-content:center;position:relative;width:", "px;height:", "px;transition:all ease-in-out 250ms;"], SIZE_BUTTON_WRAP_WIDTH, SIZE_BUTTON_WRAP_HEIGHT);

package/build/es/ui/rc-container/collapse-toggle/index.js

@@ -0,0 +1,67 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useState, useCallback } from 'react';
+import styled, { css } from 'styled-components';
+import { mixinBgAccent, mixinTextWhite } from '@alicloud/console-base-theme';
+import useMouseEnterLeave from '@alicloud/react-hook-mouse-enter-leave';
+import Icon from '@alicloud/console-base-rc-icon';
+import { SPACING_Y } from '../../const';
+import intl from '../../intl';
+import { useCollapsed, useItemsTop, useHandleCollapsedChange } from '../../../model';
+import { SidePanelItemWrap, SidePanelItemButton, SidePanelItemBadge, SidePanelItemTooltip } from '../../rc';
+var ScCollapseToggle = styled(SidePanelItemWrap).withConfig({
+  componentId: "sc-15z8r94-0"
+})(["position:absolute;right:0;bottom:", "px;", ""], SPACING_Y, function (props) {
+  if (!props.collapsed) {
+    return null;
+  }
+  return props.hovered ? css(["transform:translateX(-100%);"]) : css(["transform:translateX(-50%);"]);
+});
+var ScCollapseToggleButton = styled(SidePanelItemButton).withConfig({
+  componentId: "sc-15z8r94-1"
+})(["", " ", ""], function (props) {
+  return props.active ? css(["", " ", " &:hover{", " ", "}"], mixinBgAccent, mixinTextWhite, mixinBgAccent, mixinTextWhite) : null;
+}, function (props) {
+  return props.collapsed && !props.hovered ? css(["padding-left:4px;;text-align:left;"]) : null;
+});
+export default function PanelToggle() {
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    stateHovered = _useState2[0],
+    setStateHovered = _useState2[1];
+  var collapsed = useCollapsed();
+  var unread = useItemsTop().some(function (v) {
+    return v.unread;
+  });
+  var handleToggleCollapsed = useHandleCollapsedChange();
+  var _useMouseEnterLeave = useMouseEnterLeave(useCallback(function () {
+      setStateHovered(true);
+    }, [setStateHovered]), useCallback(function () {
+      setStateHovered(false);
+    }, [setStateHovered])),
+    _useMouseEnterLeave2 = _slicedToArray(_useMouseEnterLeave, 2),
+    handleMouseEnter = _useMouseEnterLeave2[0],
+    handleMouseLeave = _useMouseEnterLeave2[1];
+  var title = intl(collapsed ? 'op:toggle_visible' : 'op:toggle_hidden');
+  return /*#__PURE__*/React.createElement(ScCollapseToggle, {
+    hovered: stateHovered,
+    collapsed: collapsed,
+    onMouseLeave: handleMouseLeave
+  }, /*#__PURE__*/React.createElement(ScCollapseToggleButton, {
+    hovered: stateHovered,
+    collapsed: collapsed,
+    active: collapsed,
+    title: title,
+    label: /*#__PURE__*/React.createElement(Icon, {
+      type: "angle-right",
+      rotate: collapsed ? 180 : undefined
+    }),
+    onMouseEnter: handleMouseEnter,
+    onClick: handleToggleCollapsed
+  }), collapsed && unread ? /*#__PURE__*/React.createElement(SidePanelItemBadge, {
+    unread: true,
+    alignLeft: !stateHovered
+  }) : null, /*#__PURE__*/React.createElement(SidePanelItemTooltip, {
+    visible: stateHovered,
+    content: title
+  }));
+}

package/build/es/ui/rc-container/index.js

@@ -0,0 +1,3 @@
+export { default as ItemsTop } from './items-top';
+export { default as ItemsBottom } from './items-bottom';
+export { default as CollapseToggle } from './collapse-toggle';

package/build/es/ui/rc-container/item/index.js

@@ -0,0 +1,93 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["id", "className", "style", "active", "title", "titleActive", "icon", "iconHovered", "iconActive", "iconActiveHovered", "unread", "mark", "tooltip", "tooltipActive", "tooltipAsHtml", "tooltipAlign", "tooltipDefaultVisible", "onClick", "onActiveChange", "onMouseEnter", "onMouseLeave"];
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import React, { useState, useCallback } from 'react';
+import useMouseEnterLeave from '@alicloud/react-hook-mouse-enter-leave';
+import HtmlTrusted from '@alicloud/console-base-rc-html-trusted';
+import { renderEasyIcon } from '@alicloud/console-base-rc-easy-icon';
+import { useCollapsed } from '../../../model';
+import { getValueByStatus } from '../../util';
+import { SidePanelItemWrap, SidePanelItemButton, SidePanelItemBadge, SidePanelItemTooltip } from '../../rc';
+export default function Item(_ref) {
+  var id = _ref.id,
+    className = _ref.className,
+    style = _ref.style,
+    active = _ref.active,
+    title = _ref.title,
+    titleActive = _ref.titleActive,
+    icon = _ref.icon,
+    iconHovered = _ref.iconHovered,
+    iconActive = _ref.iconActive,
+    iconActiveHovered = _ref.iconActiveHovered,
+    unread = _ref.unread,
+    mark = _ref.mark,
+    tooltip = _ref.tooltip,
+    tooltipActive = _ref.tooltipActive,
+    tooltipAsHtml = _ref.tooltipAsHtml,
+    tooltipAlign = _ref.tooltipAlign,
+    _ref$tooltipDefaultVi = _ref.tooltipDefaultVisible,
+    tooltipDefaultVisible = _ref$tooltipDefaultVi === void 0 ? false : _ref$tooltipDefaultVi,
+    onClick = _ref.onClick,
+    onActiveChange = _ref.onActiveChange,
+    onMouseEnter = _ref.onMouseEnter,
+    onMouseLeave = _ref.onMouseLeave,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var collapsed = useCollapsed();
+  var _useState = useState(tooltipDefaultVisible),
+    _useState2 = _slicedToArray(_useState, 2),
+    stateTooltipVisible = _useState2[0],
+    setStateTooltipVisible = _useState2[1];
+  var _useMouseEnterLeave = useMouseEnterLeave(useCallback(function () {
+      setStateTooltipVisible(true);
+      onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter();
+    }, [setStateTooltipVisible, onMouseEnter]), useCallback(function () {
+      setStateTooltipVisible(false);
+      onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave();
+    }, [setStateTooltipVisible, onMouseLeave])),
+    _useMouseEnterLeave2 = _slicedToArray(_useMouseEnterLeave, 2),
+    handleMouseEnter = _useMouseEnterLeave2[0],
+    handleMouseLeave = _useMouseEnterLeave2[1];
+  var handleClick = useCallback(function (e) {
+    onClick === null || onClick === void 0 ? void 0 : onClick(e);
+    onActiveChange === null || onActiveChange === void 0 ? void 0 : onActiveChange(!active);
+  }, [active, onClick, onActiveChange]);
+  var finalTitle = getValueByStatus({
+    valueNormal: title,
+    valueActive: titleActive
+  }, stateTooltipVisible, active);
+  var finalIcon = getValueByStatus({
+    valueNormal: icon,
+    valueHovered: iconHovered,
+    valueActive: iconActive,
+    valueActiveHovered: iconActiveHovered
+  }, stateTooltipVisible, active);
+  var finalTooltip = getValueByStatus({
+    valueNormal: tooltip,
+    valueActive: tooltipActive
+  }, stateTooltipVisible, active);
+  return /*#__PURE__*/React.createElement(SidePanelItemWrap, {
+    id: id,
+    className: className,
+    style: style,
+    onMouseLeave: handleMouseLeave
+  }, /*#__PURE__*/React.createElement(SidePanelItemButton, _objectSpread(_objectSpread({}, props), {}, {
+    active: active,
+    title: title,
+    label: renderEasyIcon(finalIcon) || title,
+    onMouseEnter: handleMouseEnter,
+    onClick: handleClick
+  })), /*#__PURE__*/React.createElement(SidePanelItemBadge, {
+    unread: unread,
+    mark: mark
+  }), finalTooltip || finalTitle ? /*#__PURE__*/React.createElement(SidePanelItemTooltip, {
+    visible: stateTooltipVisible && !collapsed,
+    align: tooltipAlign,
+    content: tooltipAsHtml && finalTooltip && typeof finalTooltip === 'string' ? /*#__PURE__*/React.createElement(HtmlTrusted, {
+      text: finalTooltip
+    }) : finalTooltip || finalTitle,
+    onMouseEnter: handleMouseEnter
+  }) : null);
+}

package/build/es/ui/rc-container/items/index.js

@@ -0,0 +1,13 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import React from 'react';
+import { DATA_KEY_SIDE_PANEL_ITEM } from '../../const';
+import PanelItem from '../item';
+export default function Items(_ref) {
+  var items = _ref.items;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, items.map(function (v) {
+    var _objectSpread2;
+    return /*#__PURE__*/React.createElement(PanelItem, _objectSpread((_objectSpread2 = {}, _defineProperty(_objectSpread2, DATA_KEY_SIDE_PANEL_ITEM, v.key), _defineProperty(_objectSpread2, "spm", v.key), _objectSpread2), v));
+  }));
+}

package/build/es/ui/rc-container/items-bottom/index.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import styled from 'styled-components';
+import { HrBase } from '@alicloud/console-base-theme-sc-base';
+import Flex from '@alicloud/console-base-rc-flex';
+import { SPACING_Y } from '../../const';
+import { useChildren, useItemsBottom, useQuickTop } from '../../../model';
+import Items from '../items';
+import QuickTop from './quick-top';
+var ScHr = styled(HrBase).withConfig({
+  componentId: "sc-1rxhuz5-0"
+})(["margin:", "px 4px;"], SPACING_Y);
+export default function ItemsBottom() {
+  var quickTop = useQuickTop();
+  var children = useChildren();
+  var items = useItemsBottom();
+  return /*#__PURE__*/React.createElement(Flex, {
+    vertical: true
+  }, quickTop.container && quickTop.visible ? /*#__PURE__*/React.createElement(QuickTop, null) : null, children || items.length ? /*#__PURE__*/React.createElement(ScHr, null) : null, children || /*#__PURE__*/React.createElement(Items, {
+    items: items
+  }));
+}

package/build/es/ui/rc-container/items-bottom/quick-top/index.js

@@ -0,0 +1,37 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useState, useCallback } from 'react';
+import useMouseEnterLeave from '@alicloud/react-hook-mouse-enter-leave';
+import Icon from '@alicloud/console-base-rc-icon';
+import { useHandleGoTop } from '../../../../model';
+import intl from '../../../intl';
+import { SidePanelItemWrap, SidePanelItemButton, SidePanelItemTooltip } from '../../../rc';
+export default function QuickTop() {
+  var handleGoTop = useHandleGoTop();
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    stateHovered = _useState2[0],
+    setStateHovered = _useState2[1];
+  var _useMouseEnterLeave = useMouseEnterLeave(useCallback(function () {
+      setStateHovered(true);
+    }, [setStateHovered]), useCallback(function () {
+      setStateHovered(false);
+    }, [setStateHovered])),
+    _useMouseEnterLeave2 = _slicedToArray(_useMouseEnterLeave, 2),
+    handleMouseEnter = _useMouseEnterLeave2[0],
+    handleMouseLeave = _useMouseEnterLeave2[1];
+  var title = intl('op:back_to_top');
+  return /*#__PURE__*/React.createElement(SidePanelItemWrap, {
+    hovered: stateHovered,
+    onMouseLeave: handleMouseLeave
+  }, /*#__PURE__*/React.createElement(SidePanelItemButton, {
+    title: title,
+    label: /*#__PURE__*/React.createElement(Icon, {
+      type: "go-top"
+    }),
+    onMouseEnter: handleMouseEnter,
+    onClick: handleGoTop
+  }), /*#__PURE__*/React.createElement(SidePanelItemTooltip, {
+    visible: stateHovered,
+    content: title
+  }));
+}

package/build/es/ui/rc-container/items-top/index.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import Flex from '@alicloud/console-base-rc-flex';
+import { useItemsTop } from '../../../model';
+import Items from '../items';
+export default function ItemsTop() {
+  var items = useItemsTop();
+  return /*#__PURE__*/React.createElement(Flex, {
+    vertical: true,
+    flex: true
+  }, /*#__PURE__*/React.createElement(Items, {
+    items: items
+  }));
+}

package/build/es/ui/types/index.js

@@ -0,0 +1 @@
+export {};

package/build/es/ui/util/get-value-by-status.js

@@ -0,0 +1,17 @@
+export default function getValueByStatus(values, hovered, active) {
+  var valueNormal = values.valueNormal,
+    valueHovered = values.valueHovered,
+    valueActive = values.valueActive,
+    valueActiveHovered = values.valueActiveHovered;
+  if (hovered && active) {
+    var _ref;
+    return (_ref = valueActiveHovered !== null && valueActiveHovered !== void 0 ? valueActiveHovered : valueActive) !== null && _ref !== void 0 ? _ref : valueNormal;
+  }
+  if (active) {
+    return valueActive !== null && valueActive !== void 0 ? valueActive : valueNormal;
+  }
+  if (hovered) {
+    return valueHovered !== null && valueHovered !== void 0 ? valueHovered : valueNormal;
+  }
+  return valueNormal;
+}

package/build/es/ui/util/index.js

@@ -0,0 +1 @@
+export { default as getValueByStatus } from './get-value-by-status';

package/build/es/with-model/index.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import Model from '../model';
+import Ui from '../ui';
+export default function WithModel(props) {
+  return /*#__PURE__*/React.createElement(Model, {
+    props: props
+  }, /*#__PURE__*/React.createElement(Ui, null));
+}

package/build/types/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './with-model';
+export { default as SidePanelItem } from './ui/rc-container/item';
+export type { ModelProps as SidePanelProps, SidePanelItemProps } from './model';

package/build/types/model/const/index.d.ts

@@ -0,0 +1,4 @@
+import { IModelState } from '../types';
+export declare const BODY_CLASS_WITH_SIDE_PANEL = "with-side-panel";
+export declare const QUICK_TOP_VISIBLE_OFFSET = 200;
+export declare const DEFAULT_CONTEXT_STATE: IModelState;

package/build/types/model/context/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { IModelValue } from '../types';
+declare const _default: import("react").Context<IModelValue | null>;
+export default _default;

package/build/types/model/enum/index.d.ts

@@ -0,0 +1,4 @@
+export declare enum EAction {
+    SET_COLLAPSED = 0,
+    SET_QUICK_TOP_VISIBLE = 1
+}

package/build/types/model/hook/_use-model-context.d.ts

@@ -0,0 +1,2 @@
+import { IModelValue } from '../types';
+export default function useModelContext(): IModelValue;

package/build/types/model/hook/_use-model-dispatch.d.ts

@@ -0,0 +1,2 @@
+import { TModelDispatch } from '../types';
+export default function useModelDispatch(): TModelDispatch;

package/build/types/model/hook/_use-model-props.d.ts

@@ -0,0 +1,5 @@
+import { RequiredSelected } from '@alicloud/typescript-missing-helpers';
+import { IModelProps } from '../types';
+type TModelProps = RequiredSelected<IModelProps, 'itemsTop' | 'itemsBottom'>;
+export default function useModelProps(): TModelProps;
+export {};

package/build/types/model/hook/_use-model-state.d.ts

@@ -0,0 +1,2 @@
+import { IModelState } from '../types';
+export default function useModelState(): IModelState;

package/build/types/model/hook/index.d.ts

@@ -0,0 +1,8 @@
+export { default as useChildren } from './use-children';
+export { default as useVisible } from './use-visible';
+export { default as useCollapsed } from './use-collapsed';
+export { default as useItemsTop } from './use-items-top';
+export { default as useItemsBottom } from './use-items-bottom';
+export { default as useQuickTop } from './use-quick-top';
+export { default as useHandleCollapsedChange } from './use-handle-collapsed-change';
+export { default as useHandleGoTop } from './use-handle-go-top';

package/build/types/model/hook/use-children.d.ts

@@ -0,0 +1,2 @@
+import { ReactNode } from 'react';
+export default function useChildren(): ReactNode | undefined;

package/build/types/model/hook/use-collapsed.d.ts

@@ -0,0 +1 @@
+export default function useCollapsed(): boolean;

package/build/types/model/hook/use-dispatch-set-collapsed.d.ts

@@ -0,0 +1 @@
+export default function useDispatchSetCollapsed(): (payload: boolean) => void;

package/build/types/model/hook/use-dispatch-set-quick-top-visible.d.ts

@@ -0,0 +1 @@
+export default function useDispatchSetQuickTopVisible(): (payload: boolean) => void;

package/build/types/model/hook/use-effect-quick-top.d.ts

@@ -0,0 +1 @@
+export default function useEffectQuickTop(): void;