@alicloud/console-base-rc-side-panel 1.0.2 → 1.1.0

package/build/cjs/model/hook/_use-model-context.js

@@ -8,5 +8,5 @@ exports.default = useModelContext;
 var _react = require("react");
 var _context = _interopRequireDefault(require("../context"));
 function useModelContext() {
-  return (0, _react.useContext)(_context.default);
+  return (0, _react.useContext)(_context.default); // eslint-disable-line @typescript-eslint/no-non-null-assertion
 }

package/build/cjs/ui/index.js

@@ -18,8 +18,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var ScAside = _styledComponents.default.aside.withConfig({
   componentId: "sc-1ok6knf-0"
-})(["display:flex;flex-direction:column;position:fixed;top:0;right:0;bottom:0;z-index:", ";padding:", "px 0 ", "px 0;width:", "px;transition:transform ease-in-out 250ms;", " ", " .hasTopbar &{top:", "px;}"], _consoleBaseTheme.Z_INDEX.SIDE_PANEL, _const.SPACING_Y * 1.5, _const.SIZE_BUTTON_WRAP_HEIGHT + _const.SPACING_Y, _consoleBaseTheme.SIZE.WIDTH_SIDE_PANEL, _consoleBaseTheme.mixinBgPrimary, function (props) {
-  return props.$collapsed ? (0, _styledComponents.css)(["transform:translateX(100%);"]) : _consoleBaseTheme.mixinShadowLLeft;
+})(["display:flex;flex-direction:column;position:fixed;top:0;right:0;bottom:0;z-index:", ";padding:", "px 0 ", "px 0;width:", "px;transition:transform ease-in-out 250ms;", " ", " .theme-dark &{box-shadow:inset 1px 0 0 0 rgba(255,255,255,0.1),-4px 0 8px 0 rgba(0,0,0,0.3);}", " .hasTopbar &{top:", "px;}"], _consoleBaseTheme.Z_INDEX.SIDE_PANEL, _const.SPACING_Y * 1.5, _const.SIZE_BUTTON_WRAP_HEIGHT + _const.SPACING_Y, _consoleBaseTheme.SIZE.WIDTH_SIDE_PANEL, _consoleBaseTheme.mixinBgPrimary, _consoleBaseTheme.mixinShadowLLeft, function (props) {
+  return props.$collapsed ? (0, _styledComponents.css)(["transform:translateX(100%);box-shadow:none !important;"]) : _consoleBaseTheme.mixinShadowLLeft;
 }, _consoleBaseTheme.SIZE.HEIGHT_TOP_NAV);
 function Ui() {
   var visible = (0, _model.useVisible)();

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

@@ -10,7 +10,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _consoleBaseTheme = require("@alicloud/console-base-theme");
-var _reactHookMouseEnterLeave = _interopRequireDefault(require("@alicloud/react-hook-mouse-enter-leave"));
+var _reactHookMouseHover = _interopRequireDefault(require("@alicloud/react-hook-mouse-hover"));
 var _consoleBaseRcIcon = _interopRequireDefault(require("@alicloud/console-base-rc-icon"));
 var _const = require("../../const");
 var _intl = _interopRequireDefault(require("../../intl"));
@@ -43,14 +43,17 @@ function PanelToggle() {
     return v.unread;
   });
   var handleToggleCollapsed = (0, _model.useHandleCollapsedChange)();
-  var _useMouseEnterLeave = (0, _reactHookMouseEnterLeave.default)((0, _react.useCallback)(function () {
-      setStateHovered(true);
-    }, [setStateHovered]), (0, _react.useCallback)(function () {
-      setStateHovered(false);
-    }, [setStateHovered])),
-    _useMouseEnterLeave2 = (0, _slicedToArray2.default)(_useMouseEnterLeave, 2),
-    handleMouseEnter = _useMouseEnterLeave2[0],
-    handleMouseLeave = _useMouseEnterLeave2[1];
+  var _useMouseHover = (0, _reactHookMouseHover.default)({
+      onEnter: (0, _react.useCallback)(function () {
+        setStateHovered(true);
+      }, [setStateHovered]),
+      onLeave: (0, _react.useCallback)(function () {
+        setStateHovered(false);
+      }, [setStateHovered])
+    }),
+    _useMouseHover2 = (0, _slicedToArray2.default)(_useMouseHover, 2),
+    handleMouseEnter = _useMouseHover2[0],
+    handleMouseLeave = _useMouseHover2[1];
   var title = (0, _intl.default)(collapsed ? 'op:toggle_visible' : 'op:toggle_hidden');
   return /*#__PURE__*/_react.default.createElement(ScCollapseToggle, {
     hovered: stateHovered,

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

@@ -10,7 +10,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
-var _reactHookMouseEnterLeave = _interopRequireDefault(require("@alicloud/react-hook-mouse-enter-leave"));
+var _reactHookMouseHover = _interopRequireDefault(require("@alicloud/react-hook-mouse-hover"));
 var _consoleBaseRcHtmlTrusted = _interopRequireDefault(require("@alicloud/console-base-rc-html-trusted"));
 var _consoleBaseRcEasyIcon = require("@alicloud/console-base-rc-easy-icon");
 var _model = require("../../../model");
@@ -50,16 +50,19 @@ function Item(_ref) {
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     stateTooltipVisible = _useState2[0],
     setStateTooltipVisible = _useState2[1];
-  var _useMouseEnterLeave = (0, _reactHookMouseEnterLeave.default)((0, _react.useCallback)(function () {
-      setStateTooltipVisible(true);
-      onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter();
-    }, [setStateTooltipVisible, onMouseEnter]), (0, _react.useCallback)(function () {
-      setStateTooltipVisible(false);
-      onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave();
-    }, [setStateTooltipVisible, onMouseLeave])),
-    _useMouseEnterLeave2 = (0, _slicedToArray2.default)(_useMouseEnterLeave, 2),
-    handleMouseEnter = _useMouseEnterLeave2[0],
-    handleMouseLeave = _useMouseEnterLeave2[1];
+  var _useMouseHover = (0, _reactHookMouseHover.default)({
+      onEnter: (0, _react.useCallback)(function () {
+        setStateTooltipVisible(true);
+        onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter();
+      }, [setStateTooltipVisible, onMouseEnter]),
+      onLeave: (0, _react.useCallback)(function () {
+        setStateTooltipVisible(false);
+        onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave();
+      }, [setStateTooltipVisible, onMouseLeave])
+    }),
+    _useMouseHover2 = (0, _slicedToArray2.default)(_useMouseHover, 2),
+    handleMouseEnter = _useMouseHover2[0],
+    handleMouseLeave = _useMouseHover2[1];
   var handleClick = (0, _react.useCallback)(function (e) {
     onClick === null || onClick === void 0 ? void 0 : onClick(e);
     onActiveChange === null || onActiveChange === void 0 ? void 0 : onActiveChange(!active);

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

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = QuickTop;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
-var _reactHookMouseEnterLeave = _interopRequireDefault(require("@alicloud/react-hook-mouse-enter-leave"));
+var _reactHookMouseHover = _interopRequireDefault(require("@alicloud/react-hook-mouse-hover"));
 var _consoleBaseRcIcon = _interopRequireDefault(require("@alicloud/console-base-rc-icon"));
 var _model = require("../../../../model");
 var _intl = _interopRequireDefault(require("../../../intl"));
@@ -21,14 +21,17 @@ function QuickTop() {
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     stateHovered = _useState2[0],
     setStateHovered = _useState2[1];
-  var _useMouseEnterLeave = (0, _reactHookMouseEnterLeave.default)((0, _react.useCallback)(function () {
-      setStateHovered(true);
-    }, [setStateHovered]), (0, _react.useCallback)(function () {
-      setStateHovered(false);
-    }, [setStateHovered])),
-    _useMouseEnterLeave2 = (0, _slicedToArray2.default)(_useMouseEnterLeave, 2),
-    handleMouseEnter = _useMouseEnterLeave2[0],
-    handleMouseLeave = _useMouseEnterLeave2[1];
+  var _useMouseHover = (0, _reactHookMouseHover.default)({
+      onEnter: (0, _react.useCallback)(function () {
+        setStateHovered(true);
+      }, [setStateHovered]),
+      onLeave: (0, _react.useCallback)(function () {
+        setStateHovered(false);
+      }, [setStateHovered])
+    }),
+    _useMouseHover2 = (0, _slicedToArray2.default)(_useMouseHover, 2),
+    handleMouseEnter = _useMouseHover2[0],
+    handleMouseLeave = _useMouseHover2[1];
   var title = (0, _intl.default)('op:back_to_top');
   return /*#__PURE__*/_react.default.createElement(_rc.SidePanelItemWrap, {
     hovered: stateHovered,

package/build/{es → esm}/model/hook/_use-model-context.js

@@ -1,5 +1,5 @@
 import { useContext } from 'react';
 import Context from '../context';
 export default function useModelContext() {
-  return useContext(Context);
+  return useContext(Context); // eslint-disable-line @typescript-eslint/no-non-null-assertion
 }

package/build/{es → esm}/ui/index.js

@@ -8,8 +8,8 @@ import { GlobalStyleOnBody } from './rc';
 import { ItemsTop, ItemsBottom, CollapseToggle } from './rc-container';
 var ScAside = styled.aside.withConfig({
   componentId: "sc-1ok6knf-0"
-})(["display:flex;flex-direction:column;position:fixed;top:0;right:0;bottom:0;z-index:", ";padding:", "px 0 ", "px 0;width:", "px;transition:transform 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, function (props) {
-  return props.$collapsed ? css(["transform:translateX(100%);"]) : mixinShadowLLeft;
+})(["display:flex;flex-direction:column;position:fixed;top:0;right:0;bottom:0;z-index:", ";padding:", "px 0 ", "px 0;width:", "px;transition:transform ease-in-out 250ms;", " ", " .theme-dark &{box-shadow:inset 1px 0 0 0 rgba(255,255,255,0.1),-4px 0 8px 0 rgba(0,0,0,0.3);}", " .hasTopbar &{top:", "px;}"], Z_INDEX.SIDE_PANEL, SPACING_Y * 1.5, SIZE_BUTTON_WRAP_HEIGHT + SPACING_Y, SIZE.WIDTH_SIDE_PANEL, mixinBgPrimary, mixinShadowLLeft, function (props) {
+  return props.$collapsed ? css(["transform:translateX(100%);box-shadow:none !important;"]) : mixinShadowLLeft;
 }, SIZE.HEIGHT_TOP_NAV);
 export default function Ui() {
   var visible = useVisible();

package/build/{es → esm}/ui/rc-container/collapse-toggle/index.js

@@ -2,7 +2,7 @@ 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 useMouseHover from '@alicloud/react-hook-mouse-hover';
 import Icon from '@alicloud/console-base-rc-icon';
 import { SPACING_Y } from '../../const';
 import intl from '../../intl';
@@ -33,14 +33,17 @@ export default function PanelToggle() {
     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 _useMouseHover = useMouseHover({
+      onEnter: useCallback(function () {
+        setStateHovered(true);
+      }, [setStateHovered]),
+      onLeave: useCallback(function () {
+        setStateHovered(false);
+      }, [setStateHovered])
+    }),
+    _useMouseHover2 = _slicedToArray(_useMouseHover, 2),
+    handleMouseEnter = _useMouseHover2[0],
+    handleMouseLeave = _useMouseHover2[1];
   var title = intl(collapsed ? 'op:toggle_visible' : 'op:toggle_hidden');
   return /*#__PURE__*/React.createElement(ScCollapseToggle, {
     hovered: stateHovered,

package/build/{es → esm}/ui/rc-container/item/index.js

@@ -5,7 +5,7 @@ var _excluded = ["id", "className", "style", "active", "title", "titleActive", "
 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 useMouseHover from '@alicloud/react-hook-mouse-hover';
 import HtmlTrusted from '@alicloud/console-base-rc-html-trusted';
 import { renderEasyIcon } from '@alicloud/console-base-rc-easy-icon';
 import { useCollapsed } from '../../../model';
@@ -40,16 +40,19 @@ export default function Item(_ref) {
     _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 _useMouseHover = useMouseHover({
+      onEnter: useCallback(function () {
+        setStateTooltipVisible(true);
+        onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter();
+      }, [setStateTooltipVisible, onMouseEnter]),
+      onLeave: useCallback(function () {
+        setStateTooltipVisible(false);
+        onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave();
+      }, [setStateTooltipVisible, onMouseLeave])
+    }),
+    _useMouseHover2 = _slicedToArray(_useMouseHover, 2),
+    handleMouseEnter = _useMouseHover2[0],
+    handleMouseLeave = _useMouseHover2[1];
   var handleClick = useCallback(function (e) {
     onClick === null || onClick === void 0 ? void 0 : onClick(e);
     onActiveChange === null || onActiveChange === void 0 ? void 0 : onActiveChange(!active);

package/build/{es → esm}/ui/rc-container/items-bottom/quick-top/index.js

@@ -1,6 +1,6 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { useState, useCallback } from 'react';
-import useMouseEnterLeave from '@alicloud/react-hook-mouse-enter-leave';
+import useMouseHover from '@alicloud/react-hook-mouse-hover';
 import Icon from '@alicloud/console-base-rc-icon';
 import { useHandleGoTop } from '../../../../model';
 import intl from '../../../intl';
@@ -11,14 +11,17 @@ export default function QuickTop() {
     _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 _useMouseHover = useMouseHover({
+      onEnter: useCallback(function () {
+        setStateHovered(true);
+      }, [setStateHovered]),
+      onLeave: useCallback(function () {
+        setStateHovered(false);
+      }, [setStateHovered])
+    }),
+    _useMouseHover2 = _slicedToArray(_useMouseHover, 2),
+    handleMouseEnter = _useMouseHover2[0],
+    handleMouseLeave = _useMouseHover2[1];
   var title = intl('op:back_to_top');
   return /*#__PURE__*/React.createElement(SidePanelItemWrap, {
     hovered: stateHovered,

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@alicloud/console-base-rc-side-panel",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "ConsoleBase 组件 - 右侧边栏",
   "license": "MIT",
   "sideEffects": false,
   "main": "build/cjs/index.js",
-  "module": "build/es/index.js",
+  "module": "build/esm/index.js",
   "types": "build/types/index.d.ts",
   "homepage": "https://github.com/aliyun/alibabacloud-console-base/tree/master/packages-rc/console-base-rc-side-panel",
   "author": {
@@ -22,10 +22,10 @@
   "keywords": [],
   "devDependencies": {
     "@alicloud/console-base-demo-helper-theme-switcher": "^1.1.9",
-    "@alicloud/console-base-rc-top-nav": "^1.16.7",
+    "@alicloud/console-base-rc-top-nav": "^1.16.8",
     "@alicloud/console-toolkit-cli": "^1.2.30",
     "@alicloud/console-toolkit-preset-component": "^1.2.61",
-    "@alicloud/demo-rc-elements": "^1.11.17",
+    "@alicloud/demo-rc-elements": "^1.12.2",
     "@alicloud/ts-config": "^1.1.3",
     "@types/react": "^17.0.58",
     "@types/styled-components": "^5.1.26",
@@ -43,14 +43,14 @@
     "@alicloud/console-base-rc-easy-icon": "^1.0.1",
     "@alicloud/console-base-rc-flex": "^1.4.11",
     "@alicloud/console-base-rc-html-trusted": "^1.0.5",
-    "@alicloud/console-base-rc-icon": "^1.10.5",
+    "@alicloud/console-base-rc-icon": "^1.10.6",
     "@alicloud/console-base-rc-marks": "^1.8.3",
     "@alicloud/console-base-rc-tooltip": "^1.1.12",
-    "@alicloud/console-base-theme": "^1.9.6",
+    "@alicloud/console-base-theme": "^1.9.7",
     "@alicloud/console-base-theme-sc-base": "^1.6.4",
     "@alicloud/mere-dom": "^1.8.0",
     "@alicloud/react-hook-is-unmounted": "^1.3.4",
-    "@alicloud/react-hook-mouse-enter-leave": "^1.0.3",
+    "@alicloud/react-hook-mouse-hover": "^1.0.1",
     "@alicloud/typescript-missing-helpers": "^1.3.4",
     "immutability-helper": "^3.1.1"
   },
@@ -60,8 +60,8 @@
     "build:esm": "breezr build --engine babel --es-module",
     "build:cjs": "breezr build --engine babel",
     "build:bundle": "breezr build --engine webpack",
-    "build:typings": "tsc --outDir build/types --declaration --emitDeclarationOnly",
-    "build": "yarn build:esm && yarn build:cjs && yarn build:typings",
+    "build:types": "tsc -p tsconfig-declaration.json --rootDir src --outDir build/types --declaration --emitDeclarationOnly",
+    "build": "yarn build:esm && yarn build:cjs && yarn build:types",
     "clean": "rm -rf build",
     "prepublishOnly": "yarn clean && yarn build"
   },