shineout 3.2.0-rc.5 → 3.2.0

package/dist/shineout.js

@@ -7104,9 +7104,12 @@ var Alert = function Alert(props) {
       onClick: handleClose
     });
     return /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
-      className: alertStyle.close,
-      onClick: handleClose,
-      children: closeItem || icons_config.alert.Close
+      className: alertStyle.closeWrapper,
+      children: /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
+        className: alertStyle.close,
+        onClick: handleClose,
+        children: closeItem || icons_config.alert.Close
+      })
     });
   };
   if (dismiss === HIDE) {
@@ -11957,7 +11960,7 @@ var handleStyle = function handleStyle(style) {
 };
 /* harmony default export */ var jss_style_handleStyle = (handleStyle);
 ;// CONCATENATED MODULE: ../shineout-style/src/version.ts
-/* harmony default export */ var version = ('3.2.0-rc.5');
+/* harmony default export */ var version = ('3.2.0');
 ;// CONCATENATED MODULE: ../shineout-style/src/jss-style/index.tsx
 
 
@@ -12119,7 +12122,7 @@ function replaceNonAlphanumeric(str) {
   return result;
 }
 function camelCaseToDash(str) {
-  return str.replace(/(?<=.)([A-Z])/g, '-$1').toLowerCase();
+  return str.replace(/([A-Z])/g, '-$1').toLowerCase().replace(/^-/, '');
 }
 var cssvar = function cssvar(str, value, key, _size) {
   var _getConfig = getConfig(),
@@ -13597,8 +13600,11 @@ var menuTokens = {
   menuItemActiveBackgroundColor: 'Brand-1',
   menuItemActiveHoverBackgroundColor: 'Brand-2',
   menuItemActiveFontColor: 'Brand-6',
+  menuItemActiveDisabledFontColor: 'Brand-3',
   menuItemDisabledBackgroundColor: 'Neutral-fill-1',
   menuItemDisabledFontColor: 'Neutral-text-2',
+  menuItemCollpaseActiveBackgroundColor: 'Brand-6',
+  menuItemCollpaseActiveFontColor: 'Neutral-text-1',
   menuTitlePaddingX: 'Spacing-16',
   menuTitlePaddingY: 'Spacing-9',
   menuExpandWidth: 'Spacing-46',
@@ -13606,6 +13612,8 @@ var menuTokens = {
   menuExpandHoverBackgroundColor: 'Neutral-fill-3',
   menuChildrenBoxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
   menuHeaderBorderColor: 'Neutral-border-1',
+  menuHeaderPaddingX: 'Spacing-12',
+  menuHeaderPaddingY: 'Spacing-12',
   menuDarkFontColor: 'Neutral-text-1',
   menuDarkItemBackgroundColor: 'Neutral-fill-10',
   menuDarkItemFontColor: 'Neutral-text-1',
@@ -13617,10 +13625,12 @@ var menuTokens = {
   menuDarkItemOpenFontColor: 'Neutral-text-1',
   menuDarkItemDisabledBackgroundColor: 'Neutral-fill-10',
   menuDarkItemDisabledFontColor: 'Neutral-text-4',
+  menuDarkItemCollpaseActiveBackgroundColor: 'Brand-6',
+  menuDarkItemCollpaseActiveFontColor: 'Neutral-text-1',
   menuDarkHeaderBorderColor: 'Neutral-fill-8',
-  menuSearchBorderRadius: 'Radius-Full',
+  menuSearchBorderRadius: 'Radius-full',
   menuSearchBorderColor: 'Neutral-border-2',
-  menuSearchPaddingX: 'Spacing-8',
+  menuSearchCollpaseSize: 'Size-16',
   menuSearchIconSize: 'Size-7',
   menuSearchIconColor: 'Neutral-text-4',
   menuSearchIconMarginX: 'Spacing-8',
@@ -14927,7 +14937,7 @@ var alertStyle = {
     width: src.alertFontSize,
     color: src.alertCloseFontColor,
     fontSize: src.alertFontSize,
-    height: src.lineHeightDynamic,
+    height: src.alertFontSize,
     flex: '0 0 auto',
     display: 'flex',
     alignItems: 'center',
@@ -14937,8 +14947,15 @@ var alertStyle = {
       color: src.alertCloseHoverColor
     }
   },
+  closeWrapper: {
+    width: src.alertFontSize,
+    height: src.lineHeightDynamic,
+    display: 'flex',
+    alignItems: 'center'
+  },
   content: {
     flex: '1 1 0',
+    minWidth: 0,
     wordBreak: 'break-all'
   },
   pending: {
@@ -15275,12 +15292,17 @@ var textBeforeLine = function textBeforeLine() {
     }
   };
 };
-var loading = function loading(type, styles) {
-  var buttonStyle = button_button_button(type, styles);
-  return {
-    '&$loading': objectSpread2_default()({}, buttonStyle['&$disabled'])
-  };
-};
+
+// const loading = (type: ButtonTypeWithoutLink, styles: ButtonStyleType) => {
+//   const buttonStyle = button(type, styles);
+
+//   return {
+//     '&$loading': {
+//       ...buttonStyle['&$disabled'],
+//     },
+//   };
+// };
+
 var ButtonStyle = {
   button: {
     outline: 'none',
@@ -15401,13 +15423,26 @@ var ButtonStyle = {
     cursor: 'not-allowed'
   },
   loading: {
-    cursor: 'not-allowed',
-    '&$default': objectSpread2_default()({}, loading('Secondary', '')),
-    '&$primary': objectSpread2_default()({}, loading('Primary', '')),
-    '&$success': objectSpread2_default()({}, loading('Success', '')),
-    '&$danger': objectSpread2_default()({}, loading('Danger', '')),
-    '&$warning': objectSpread2_default()({}, loading('Warning', '')),
-    '&$secondary': objectSpread2_default()({}, loading('Secondary', ''))
+    cursor: 'not-allowed'
+
+    // '&$default': {
+    //   ...loading('Secondary', ''),
+    // },
+    // '&$primary': {
+    //   ...loading('Primary', ''),
+    // },
+    // '&$success': {
+    //   ...loading('Success', ''),
+    // },
+    // '&$danger': {
+    //   ...loading('Danger', ''),
+    // },
+    // '&$warning': {
+    //   ...loading('Warning', ''),
+    // },
+    // '&$secondary': {
+    //   ...loading('Secondary', ''),
+    // },
   },
   groupItem: {},
   group: {
@@ -17063,6 +17098,7 @@ var datePickerStyle = objectSpread2_default()(objectSpread2_default()({
     position: 'relative',
     // width: token.datePickerDateWidth,
     width: 240,
+    cursor: 'pointer',
     '&[data-soui-type="datetime"]': {
       // width: token.datePickerDatetimeWidth,
       width: 240
@@ -19438,7 +19474,9 @@ var menuStyle = {
     width: '100%',
     backgroundColor: src.menuItemBackgroundColor,
     transition: "width ".concat(animationDuration, " ").concat(transitionFunc),
-    color: src.menuFontColor
+    color: src.menuFontColor,
+    display: 'flex',
+    flexDirection: 'column'
   },
   wrapperLight: {},
   wrapperDark: {
@@ -19458,7 +19496,6 @@ var menuStyle = {
       justifyContent: 'center'
     },
     '& $titleContent': {
-      opacity: 0,
       alignItems: 'center',
       whiteSpace: 'nowrap',
       overflow: 'hidden'
@@ -19515,12 +19552,46 @@ var menuStyle = {
     }
   },
   scrollbox: {
+    flex: 1,
+    minWidth: 0,
+    minHeight: 0,
+    overflow: 'auto',
+    // scrollbarWidth: 'thin',
+    // '$wrapperLight &': {
+    //   scrollbarColor: 'rgba(0, 0, 0, 0.1) transparent',
+    //   '&::-moz-scrollbar-thumb:hover': {
+    //     backgroundColor: 'rgba(0, 0, 0, 0.2)',
+    //   },
+    // },
+    // '$wrapperDark &': {
+    //   scrollbarColor: 'rgba(255, 255, 255, 0.4) transparent',
+    // },
     '$wrapperVertical &': {
-      overflow: 'hidden',
-      height: '100%'
+      overflowX: 'hidden'
     },
     '$wrapperHorizontal &': {
-      overflow: 'hidden'
+      overflowY: 'hidden'
+    },
+    '&::-webkit-scrollbar': {
+      width: '6px',
+      height: '6px'
+    },
+    '&::-webkit-scrollbar-thumb': {
+      border: '0px solid transparent',
+      backgroundClip: 'content-box',
+      borderRadius: '11px',
+      '$wrapperLight &': {
+        backgroundColor: 'rgba(0, 0, 0, 0.05)',
+        '&:hover': {
+          backgroundColor: 'rgba(0, 0, 0, 0.1)'
+        }
+      },
+      '$wrapperDark &': {
+        backgroundColor: 'rgba(255, 255, 255, 0.4)',
+        '&:hover': {
+          backgroundColor: 'rgba(255, 255, 255, 0.5)'
+        }
+      }
     }
   },
   root: {
@@ -19535,11 +19606,9 @@ var menuStyle = {
     }
   },
   wrapperInline: {},
-  wrapperVertical: {
-    position: 'relative'
-  },
+  wrapperVertical: {},
   wrapperHorizontal: {
-    position: 'relative'
+    flexDirection: 'row'
   },
   wrapperHasOpen: {},
   children: {
@@ -19570,6 +19639,9 @@ var menuStyle = {
     alignItems: 'center',
     cursor: 'pointer',
     position: 'relative',
+    '&  a': {
+      transition: 'none'
+    },
     '[data-soui-theme=light] &': {
       color: src.menuItemFontColor,
       backgroundColor: src.menuItemBackgroundColor,
@@ -19600,6 +19672,12 @@ var menuStyle = {
           color: src.menuItemActiveFontColor
         }
       },
+      '[data-soui-theme=light] $itemDisabled&': {
+        color: src.menuItemActiveDisabledFontColor,
+        '& $icon': {
+          color: src.menuItemActiveDisabledFontColor
+        }
+      },
       '[data-soui-theme=dark][data-soui-mode=inline] &::before, [data-soui-theme=dark][data-soui-mode=vertical] &::before': {
         content: '""',
         position: 'absolute',
@@ -19608,7 +19686,25 @@ var menuStyle = {
         bottom: 0,
         width: '3px',
         backgroundColor: src.menuDarkItemActiveBackgroundColor
+      },
+      '$wrapperCollpase[data-soui-theme=light] $root > &': {
+        color: src.menuItemCollpaseActiveFontColor,
+        backgroundColor: src.menuItemCollpaseActiveBackgroundColor,
+        '& $icon': {
+          color: src.menuItemCollpaseActiveFontColor
+        }
+      },
+      '$wrapperCollpase[data-soui-theme=dark] $root > &': {
+        color: src.menuDarkItemCollpaseActiveFontColor,
+        backgroundColor: src.menuDarkItemCollpaseActiveBackgroundColor,
+        '& $icon': {
+          color: src.menuDarkItemCollpaseActiveFontColor
+        }
+      },
+      '$wrapperCollpase $root > &::before': {
+        display: 'none'
       }
+
       // '[data-soui-theme=light][data-soui-mode=vertical]:not($wrapperCollpase) &': {
       //   '&::before': {
       //     display: 'block',
@@ -19632,13 +19728,29 @@ var menuStyle = {
           color: src.menuItemActiveFontColor
         }
       },
+      '[data-soui-theme=light] $itemDisabled&': {
+        color: src.menuItemActiveDisabledFontColor,
+        '& $icon': {
+          color: src.menuItemActiveDisabledFontColor
+        }
+      },
       '$wrapperCollpase[data-soui-theme=light] $root > &': {
-        color: src.menuItemActiveFontColor,
-        backgroundColor: src.menuItemBackgroundColor,
+        color: src.menuItemCollpaseActiveFontColor,
+        backgroundColor: src.menuItemCollpaseActiveBackgroundColor,
         '& $icon': {
-          color: src.menuItemActiveFontColor
+          color: src.menuItemCollpaseActiveFontColor
+        }
+      },
+      '$wrapperCollpase[data-soui-theme=dark] $root > &': {
+        color: src.menuDarkItemCollpaseActiveFontColor,
+        backgroundColor: src.menuDarkItemCollpaseActiveBackgroundColor,
+        '& $icon': {
+          color: src.menuDarkItemCollpaseActiveFontColor
         }
       },
+      '$wrapperCollpase $root > &::before': {
+        display: 'none'
+      },
       '[data-soui-theme=dark]:not($wrapperCollpase) &': {
         color: src.menuDarkItemActiveFontColor,
         backgroundColor: src.menuDarkItemActiveBackgroundColor,
@@ -19703,7 +19815,7 @@ var menuStyle = {
   itemContentFront: {},
   itemContentBack: {},
   header: {
-    padding: "".concat(src.menuTitlePaddingY, " ").concat(src.menuTitlePaddingX),
+    padding: "".concat(src.menuHeaderPaddingX, " ").concat(src.menuHeaderPaddingY),
     width: '100%',
     transition: "width ".concat(animationDuration, " ").concat(transitionFunc),
     color: src.menuFontColor,
@@ -19760,9 +19872,11 @@ var menuStyle = {
     display: 'inline-flex'
   },
   titleContent: {
-    whiteSpace: 'pre-wrap',
-    transition: "opacity ".concat(animationDuration, " ").concat(transitionFunc),
-    opacity: 1
+    whiteSpace: 'pre-wrap'
+    // '$wrapperCollpase &': {
+    //   transition: `opacity ${animationDuration} ${transitionFunc}`,
+    // },
+    // opacity: 1,
   },
   expand: {
     alignSelf: 'stretch',
@@ -19869,36 +19983,12 @@ var menuSearchStyle = {
   wrapperDark: (_wrapperDark = {}, defineProperty_default()(defineProperty_default()(defineProperty_default()(defineProperty_default()(defineProperty_default()(defineProperty_default()(defineProperty_default()(defineProperty_default()(defineProperty_default()(defineProperty_default()(_wrapperDark, getTokenName('inputClearColor'), src.menuSearchDarkClearColor), getTokenName('inputHoverClearColor'), src.menuSearchDarkHoverClearColor), getTokenName('inputBorderColor'), src.menuSearchDarkBackgroundColor), getTokenName('inputBackgroundColor'), src.menuSearchDarkBackgroundColor), getTokenName('inputFontColor'), src.menuSearchDarkFontColor), getTokenName('inputPlaceholderFontColor'), src.menuSearchDarkPlaceholderFontColor), getTokenName('inputHoverBorderColor'), src.menuSearchDarkHoverBorderColor), getTokenName('inputHoverBackgroundColor'), src.menuSearchDarkHoverBackgroundColor), getTokenName('inputFocusBorderColor'), src.menuSearchDarkFocusBorderColor), getTokenName('inputFocusBackgroundColor'), src.menuSearchDarkFocusBackgroundColor), defineProperty_default()(defineProperty_default()(defineProperty_default()(defineProperty_default()(defineProperty_default()(_wrapperDark, getTokenName('inputFocusShadow'), src.menuSearchDarkFocusShadow), getTokenName('inputDisabledBorderColor'), src.menuSearchDarkBackgroundColor), getTokenName('inputDisabledBackgroundColor'), src.menuSearchDarkBackgroundColor), getTokenName('inputDisabledFontColor'), src.menuSearchDarkFontColor), getTokenName('inputDisabledPlaceholderFontColor'), src.menuSearchDarkPlaceholderFontColor)),
   wrapperLight: defineProperty_default()(defineProperty_default()(defineProperty_default()(defineProperty_default()(defineProperty_default()(defineProperty_default()(defineProperty_default()(defineProperty_default()({}, getTokenName('inputBorderColor'), src.menuSearchBackgroundColor), getTokenName('inputBackgroundColor'), src.menuSearchBackgroundColor), getTokenName('inputHoverBorderColor'), src.menuSearchHoverBorderColor), getTokenName('inputHoverBackgroundColor'), src.menuSearchHoverBackgroundColor), getTokenName('inputDisabledBorderColor'), src.menuSearchDisabledBackgroundColor), getTokenName('inputDisabledBackgroundColor'), src.menuSearchDisabledBackgroundColor), getTokenName('inputClearColor'), src.menuSearchClearColor), getTokenName('inputHoverClearColor'), src.menuSearchHoverClearColor),
   wrapperCollapsed: {
-    borderRadius: '50%',
-    padding: src.menuSearchPaddingX,
     cursor: 'pointer',
+    width: src.menuSearchCollpaseSize,
+    height: src.menuSearchCollpaseSize,
     lineHeight: 1,
-    '$wrapperLight&': {
-      background: src.menuSearchBackgroundColor,
-      border: "1px solid ".concat(src.menuSearchBackgroundColor),
-      '&:hover': {
-        background: src.menuSearchHoverBackgroundColor,
-        borderColor: src.menuSearchHoverBorderColor
-      },
-      '$wrapperDisabled&': {
-        background: src.menuSearchDisabledBackgroundColor,
-        borderColor: src.menuSearchDisabledBackgroundColor
-      }
-    },
-    '$wrapperDark&': {
-      background: src.menuSearchDarkBackgroundColor,
-      border: "1px solid ".concat(src.menuSearchDarkBackgroundColor),
-      '&:hover': {
-        background: src.menuSearchDarkHoverBackgroundColor,
-        borderColor: src.menuSearchDarkHoverBorderColor
-      },
-      '$wrapperDisabled&': {
-        background: src.menuSearchDarkBackgroundColor,
-        borderColor: src.menuSearchDarkBackgroundColor,
-        '&$search': {
-          color: src.menuSearchDarkIconColor
-        }
-      }
+    '& input': {
+      opacity: 0
     }
   },
   wrapperDisabled: {
@@ -22077,7 +22167,7 @@ var sliderStyle = {
       bottom: '100%',
       '&[dir=ltr]': {
         left: 0,
-        transform: 'translate(-50%, 10px)'
+        transform: 'translate(-50%, -10px)'
       },
       '&[dir=rtl]': {
         right: 0,
@@ -25225,7 +25315,6 @@ var TagStyle = {
   wrapper: {
     lineHeight: src.lineHeightDynamic
   },
-  container: {},
   inline: {
     display: 'inline-block',
     flex: 1,
@@ -25247,9 +25336,6 @@ var TagStyle = {
   small: {
     lineHeight: "calc(".concat(src.tagSmallFontSize, " + 6px)"),
     padding: "0 ".concat(src.tagSmallPaddingX),
-    '& $container': {
-      lineHeight: "calc(".concat(src.tagSmallFontSize, " + 6px)")
-    },
     '& $wrapper': {
       lineHeight: "calc(".concat(src.tagSmallFontSize, " + 6px)")
     },
@@ -28741,7 +28827,10 @@ function useClickAway(params) {
     }
     return function () {
       // @ts-ignore
-      document.removeEventListener(event, handleClickAway);
+      document.removeEventListener(event, handleClickAway, {
+        // 解决 点击后立刻删除dom导致获取不到元素; contains(target) 为 false 的问题
+        capture: true
+      });
     };
   }, [effect]);
 }
@@ -29448,7 +29537,7 @@ var useButton = function useButton() {
     return mergedEventHandlers;
   };
   return {
-    disabled: disabled,
+    disabled: disabled || loading,
     getAnchorProps: getAnchorProps,
     getButtonProps: getButtonProps,
     getSpaceChildren: getSpaceChildren
@@ -35740,6 +35829,7 @@ var ResultInput = function ResultInput(props) {
       onChange: onChange,
       onBlur: handleBlur,
       open: focus,
+      disabled: props.disabled,
       onPaste: handlePaste
     }), /*#__PURE__*/(0,jsx_runtime.jsx)("span", {
       className: styles.inputMirror,
@@ -35972,10 +36062,7 @@ var Tag = function Tag(props) {
     if (onClose) {
       return /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
         className: classnames_default()(tagStyle.wrapper, inlineStyle && tagStyle.inline),
-        children: /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
-          className: tagStyle.container,
-          children: wrapSpan(children)
-        })
+        children: wrapSpan(children)
       });
     }
     return /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
@@ -36128,6 +36215,27 @@ var More = function More(props) {
     });
     itemsLength = after.length;
   }
+  if (showNum < 0 || showNum >= data.length) {
+    return /*#__PURE__*/(0,jsx_runtime.jsxs)((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, {
+      children: [data, /*#__PURE__*/(0,jsx_runtime.jsx)(base_src_tag_tag, {
+        className: styles.tag,
+        jssStyle: jssStyle,
+        size: size,
+        style: {
+          position: 'absolute',
+          zIndex: -100,
+          userSelect: 'none',
+          msUserSelect: 'none',
+          contain: 'layout'
+        },
+        mode: visible ? 'fill' : 'bright',
+        color: visible ? 'info' : 'default',
+        children: /*#__PURE__*/(0,jsx_runtime.jsx)("span", {
+          children: "+"
+        })
+      }, 'hidden')]
+    });
+  }
   return /*#__PURE__*/(0,jsx_runtime.jsxs)((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, {
     children: [shouldShowMore ? data : before, /*#__PURE__*/(0,jsx_runtime.jsxs)("span", {
       style: {
@@ -36281,7 +36389,8 @@ var result_Result = function Result(props) {
         convertBr: convertBr,
         onInputBlur: onInputBlur,
         onClearCreatedData: onClearCreatedData,
-        placeholder: placeholder2
+        placeholder: placeholder2,
+        disabled: isFunc(disabled) ? false : !!disabled
       })
     }, 'input');
   };
@@ -40389,7 +40498,8 @@ var TimeScroll = function TimeScroll(props) {
   var elRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
   var _useRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)({
       timer: null,
-      changeTimer: null
+      changeTimer: null,
+      controlScroll: false
     }),
     context = _useRef.current;
   var _useResize = useResize({
@@ -40402,11 +40512,12 @@ var TimeScroll = function TimeScroll(props) {
       var el = elRef.current;
       if (!el) return;
       var lineHeight = el.childNodes[0].clientHeight;
+      context.controlScroll = true;
       el.scrollTop = lineHeight * index;
     }, immudiate ? 0 : 30);
   };
   var changeToIndex = function changeToIndex(index) {
-    if (!times[index] || times[index].disabled || index === currentIndex) {
+    if (!times[index] || times[index].disabled || index === currentIndex && !props.isEmpty) {
       return;
     }
     onChange(times[index].date);
@@ -40414,6 +40525,10 @@ var TimeScroll = function TimeScroll(props) {
   var handleScroll = function handleScroll(e) {
     if (context.changeTimer) clearTimeout(context.changeTimer);
     var el = e.currentTarget;
+    if (context.controlScroll) {
+      context.controlScroll = false;
+      return;
+    }
     context.changeTimer = setTimeout(function () {
       if (!el) return;
       var lineHeight = el.childNodes[0].clientHeight;
@@ -40514,6 +40629,7 @@ var Time = function Time(props) {
           jssStyle: props.jssStyle,
           times: item.times,
           currentIndex: item.currentIndex,
+          isEmpty: props.value === null || props.value === undefined,
           onChange: func.handleChange
         }, item.mode);
       })
@@ -44645,6 +44761,13 @@ var useForm = function useForm(props) {
       size: size
     };
   }, [labelWidth, labelAlign, labelVerticalAlign, keepErrorHeight, inline, disabled, size]);
+  var updateValue = function updateValue() {
+    if (props.value !== context.lastValue && props.value !== context.value) {
+      context.value = deepClone(props.value) || emptyObj;
+      context.lastValue = props.value;
+    }
+  };
+  updateValue();
   external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect(function () {
     // 服务端错误更新
     if (!props.error) context.serverErrors = {};else {
@@ -44661,8 +44784,8 @@ var useForm = function useForm(props) {
   // 默认值更新
   external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect(function () {
     context.removeLock = false;
-    if (props.value === context.lastValue) return;
-    context.value = deepClone(props.value) || emptyObj;
+    // 内部 onChange 改的 value, 不需要更新
+    if (props.value === context.value) return;
     if (initValidate && !context.resetTime) {
       var keys = Object.keys(context.validateMap).filter(function (key) {
         var oldValue = deepGet(context.lastValue || emptyObj, key);
@@ -44889,9 +45012,9 @@ var form_item_excluded = ["children", "jssStyle", "className", "style", "label",
     style: style,
     children: [label !== undefined ? /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
       className: classnames_default()(formItemClasses === null || formItemClasses === void 0 ? void 0 : formItemClasses.label, labelAlign === 'left' && (formItemClasses === null || formItemClasses === void 0 ? void 0 : formItemClasses.labelLeft)),
-      style: {
+      style: labelAlign !== 'top' || inline ? {
         width: labelWidth
-      },
+      } : undefined,
       children: label
     }) : null, /*#__PURE__*/(0,jsx_runtime.jsxs)("div", objectSpread2_default()(objectSpread2_default()({
       className: formItemClasses === null || formItemClasses === void 0 ? void 0 : formItemClasses.control
@@ -45248,7 +45371,7 @@ var Gap = function Gap(props) {
     marginBottom: -Number(row),
     marginRight: -Number(column)
   };
-  var itemStyle = supportFlexGap ? undefined : objectSpread2_default()(objectSpread2_default()({}, itemStyleProps), {}, {
+  var itemStyle = supportFlexGap ? itemStyleProps : objectSpread2_default()(objectSpread2_default()({}, itemStyleProps), {}, {
     marginBottom: row,
     marginRight: column
   });
@@ -47160,11 +47283,15 @@ var Scroll = function Scroll(props) {
     height: '100%',
     width: '100%',
     display: 'inline-flex',
+    overflow: 'hidden',
     position: 'sticky'
   }, isRtl ? 'right' : 'left', 0), "top", 0);
-  var placeStyle = defineProperty_default()(defineProperty_default()(defineProperty_default()(defineProperty_default()({
-    marginTop: height > 0 && scrollHeight > 0 ? Math.max(0, Math.floor(scrollHeight - height)) : 0
-  }, "margin".concat(isRtl ? 'Left' : 'Right'), scrollWidth), "height", 0), "width", 0), "overflow", 'hidden');
+  var placeStyle = {
+    paddingTop: height > 0 && scrollHeight > 0 ? Math.max(0, Math.floor(scrollHeight - height)) : 0,
+    width: scrollWidth,
+    overflow: 'hidden',
+    lineHeight: 0
+  };
   var handleScroll = usePersistFn(function (e) {
     var target = e.currentTarget;
     var scrollLeft = target.scrollLeft,
@@ -51119,6 +51246,7 @@ var useMenuItem = function useMenuItem(props) {
 
 
 
+
 var MenuItem = function MenuItem(props) {
   var _props$jssStyle, _props$jssStyle$menu;
   var classes = (_props$jssStyle = props.jssStyle) === null || _props$jssStyle === void 0 || (_props$jssStyle$menu = _props$jssStyle.menu) === null || _props$jssStyle$menu === void 0 ? void 0 : _props$jssStyle$menu.call(_props$jssStyle);
@@ -51129,14 +51257,24 @@ var MenuItem = function MenuItem(props) {
     frontCaretType = _props$frontCaretType === void 0 ? 'solid' : _props$frontCaretType,
     mode = props.mode,
     _props$toggleDuration = props.toggleDuration,
-    toggleDuration = _props$toggleDuration === void 0 ? 200 : _props$toggleDuration;
+    toggleDuration = _props$toggleDuration === void 0 ? 50 : _props$toggleDuration;
   var config = useConfig();
   var shoudPop = mode === 'vertical' || mode === 'vertical-auto' || mode === 'horizontal';
   var isVertical = mode === 'vertical' || mode === 'vertical-auto';
   var isSubHorizontal = mode === 'horizontal' && props.level > 0;
+  var isRootHorizontal = mode === 'horizontal' && props.level === 0;
+  var _useState = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(false),
+    _useState2 = slicedToArray_default()(_useState, 2),
+    popOpen = _useState2[0],
+    setOpen = _useState2[1];
   var hasExpandAbleChildren = children.some(function (item) {
     return item && item.children && (props.looseChildren || item.children.length);
   });
+  var handleVisibleChange = usePersistFn(function (visible) {
+    if (isRootHorizontal) {
+      setOpen(visible);
+    }
+  });
   var _useMenuItem = use_menu_item({
       dataItem: props.dataItem,
       keyResult: props.keyResult,
@@ -51207,8 +51345,10 @@ var MenuItem = function MenuItem(props) {
           theme: props.theme || 'light',
           mode: isVertical ? 'vertical' : mode
         }),
+        onVisibleChange: handleVisibleChange,
         jssStyle: props.jssStyle,
         arrowClass: classnames_default()(classes === null || classes === void 0 ? void 0 : classes.popArrow, props.theme === 'dark' && (classes === null || classes === void 0 ? void 0 : classes.popArrowDark)),
+        showArrow: mode !== 'horizontal',
         position: position,
         lazy: false,
         children: function children(close) {
@@ -51293,7 +51433,7 @@ var MenuItem = function MenuItem(props) {
     }
   };
   return /*#__PURE__*/(0,jsx_runtime.jsxs)("li", {
-    className: classnames_default()(classes === null || classes === void 0 ? void 0 : classes.item, isDisabled && (classes === null || classes === void 0 ? void 0 : classes.itemDisabled), isInPath && (classes === null || classes === void 0 ? void 0 : classes.itemInPath), isOpen && (classes === null || classes === void 0 ? void 0 : classes.itemOpen), isChecked && (classes === null || classes === void 0 ? void 0 : classes.itemActive), expandAble && (classes === null || classes === void 0 ? void 0 : classes.itemHasChildren)),
+    className: classnames_default()(classes === null || classes === void 0 ? void 0 : classes.item, isDisabled && (classes === null || classes === void 0 ? void 0 : classes.itemDisabled), isInPath && (classes === null || classes === void 0 ? void 0 : classes.itemInPath), (isOpen || popOpen) && (classes === null || classes === void 0 ? void 0 : classes.itemOpen), isChecked && (classes === null || classes === void 0 ? void 0 : classes.itemActive), expandAble && (classes === null || classes === void 0 ? void 0 : classes.itemHasChildren)),
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave,
     dir: config.direction,
@@ -51301,203 +51441,6 @@ var MenuItem = function MenuItem(props) {
   });
 };
 /* harmony default export */ var menu_item = (MenuItem);
-;// CONCATENATED MODULE: ../base/src/menu/scrollbar.tsx
-
-
-
-
-
-var Scrollbar = function Scrollbar(props) {
-  var _props$jssStyle, _props$jssStyle$menu;
-  var classes = (_props$jssStyle = props.jssStyle) === null || _props$jssStyle === void 0 || (_props$jssStyle$menu = _props$jssStyle.menu) === null || _props$jssStyle$menu === void 0 ? void 0 : _props$jssStyle$menu.call(_props$jssStyle);
-  var show = props.scrollLength > props.length;
-  var config = useConfig();
-  var isRtl = config.direction === 'rtl';
-  var _useRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)({
-      cachedOffset: props.offset
-    }),
-    context = _useRef.current;
-  var barLength = props.length * props.length / props.scrollLength;
-  if (barLength < 20) barLength = 20;
-  var onDragStart = usePersistFn(function () {
-    context.cachedOffset = props.offset;
-  });
-  var onDragMove = usePersistFn(function (deltaX, deltaY) {
-    var value = props.direction === 'x' ? deltaX : deltaY;
-    var newOffset;
-    if (props.direction === 'x' && isRtl) {
-      newOffset = context.cachedOffset - value / (props.length - barLength);
-    } else {
-      newOffset = context.cachedOffset + value / (props.length - barLength);
-    }
-    if (newOffset < 0) newOffset = 0;
-    if (newOffset > 1) newOffset = 1;
-    if (newOffset === context.cachedOffset) return;
-    context.cachedOffset = newOffset;
-    props.onScroll(newOffset);
-  });
-  var handleBgClick = usePersistFn(function (e) {
-    if (e.target !== e.currentTarget) return;
-    var inner = e.target.firstChild;
-    if (!inner) return;
-    var rect = inner.getBoundingClientRect();
-    var newOffset = props.offset;
-    var page = props.length / (props.scrollLength - props.length);
-    var plus = isRtl ? e.clientX < rect.left : e.clientX > rect.left;
-    var add = isRtl ? e.clientX > rect.left : e.clientX < rect.left;
-    if (props.direction === 'x' && add || props.direction === 'y' && e.clientY < rect.top) {
-      newOffset = props.offset - page;
-      if (newOffset < 0) newOffset = 0;
-    } else if (props.direction === 'x' && plus || props.direction === 'y' && e.clientY > rect.top) {
-      newOffset = props.offset + page;
-      if (newOffset > 1) newOffset = 1;
-    }
-    props.onScroll(newOffset);
-  });
-  var _useDragMock = use_drag_mock({
-      onDragStart: onDragStart,
-      onDragMove: onDragMove
-    }),
-    handleMouseDown = _useDragMock.handleMouseDown,
-    isDragging = _useDragMock.isDragging;
-  if (!show) return null;
-  var style = {};
-  var value = (props.length - barLength) * props.offset;
-  var x = isRtl ? 'right' : 'left';
-  if (props.scrollLength > 0) {
-    if (props.direction === 'x') {
-      style.width = "".concat(props.length / props.scrollLength * 100, "%");
-      style[x] = value;
-    } else {
-      style.height = "".concat(props.length / props.scrollLength * 100, "%");
-      style.top = value;
-    }
-  }
-  return /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
-    className: classnames_default()(classes === null || classes === void 0 ? void 0 : classes.scrollbar, props.direction === 'x' && (classes === null || classes === void 0 ? void 0 : classes.scrollbarX), props.direction === 'y' && (classes === null || classes === void 0 ? void 0 : classes.scrollbarY), isDragging && (classes === null || classes === void 0 ? void 0 : classes.scrollbarDragging)),
-    dir: config.direction,
-    onClick: handleBgClick,
-    children: /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
-      className: classes === null || classes === void 0 ? void 0 : classes.scrolbarHandler,
-      onMouseDown: handleMouseDown,
-      style: style
-    })
-  });
-};
-/* harmony default export */ var scrollbar = (Scrollbar);
-;// CONCATENATED MODULE: ../base/src/menu/scroll.tsx
-
-
-
-
-
-var scroll_Scroll = function Scroll(props) {
-  var _useRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)({
-      timer: 0
-    }),
-    context = _useRef.current;
-  var _useState = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(0),
-    _useState2 = slicedToArray_default()(_useState, 2),
-    offset = _useState2[0],
-    setScroll = _useState2[1];
-  var _useState3 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)({
-      width: 0,
-      scrollWidth: 0,
-      height: 0,
-      scrollHeight: 0
-    }),
-    _useState4 = slicedToArray_default()(_useState3, 2),
-    info = _useState4[0],
-    setInfo = _useState4[1];
-  var scrollLength = props.direction === 'x' ? info.scrollWidth : info.scrollHeight;
-  var length = props.direction === 'x' ? info.width : info.height;
-  var show = scrollLength > length;
-  var handleResize = usePersistFn(function () {
-    var target = props.targetRef.current;
-    if (!target) return;
-    if (context.timer) {
-      clearTimeout(context.timer);
-      context.timer = null;
-    }
-    context.timer = setTimeout(function () {
-      var scrollWidth = target.scrollWidth,
-        scrollHeight = target.scrollHeight,
-        clientHeight = target.clientHeight,
-        clientWidth = target.clientWidth;
-      setInfo({
-        width: clientWidth,
-        scrollWidth: scrollWidth,
-        height: clientHeight,
-        scrollHeight: scrollHeight
-      });
-    }, 200);
-  });
-  useResize({
-    targetRef: props.targetRef,
-    cb: handleResize,
-    timer: 0
-  });
-  var handleWheel = usePersistFn(function (e) {
-    e.preventDefault();
-    var target = e.currentTarget;
-    var wheel = normalize_wheel(e);
-    var delta = props.direction === 'x' ? wheel.pixelX : wheel.pixelY;
-    if (props.direction === 'x') {
-      target.scrollLeft += delta;
-    } else {
-      target.scrollTop += delta;
-    }
-    var newOffset = offset + delta / (scrollLength - length);
-    if (newOffset < 0) newOffset = 0;
-    if (newOffset > 1) newOffset = 1;
-    setScroll(newOffset);
-  });
-  var handleScroll = usePersistFn(function (percent) {
-    var target = props.targetRef.current;
-    if (!target) return;
-    if (props.direction === 'x') {
-      target.scrollLeft = percent * (info.scrollWidth - info.width);
-    } else {
-      target.scrollTop = percent * (info.scrollHeight - info.height);
-    }
-    setScroll(percent);
-  });
-  (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
-    var target = props.targetRef.current;
-    if (target) {
-      if (show) {
-        target.addEventListener('wheel', handleWheel, {
-          passive: false
-        });
-      } else {
-        target.removeEventListener('wheel', handleWheel);
-      }
-    }
-    return function () {
-      if (target) {
-        target.removeEventListener('wheel', handleWheel);
-      }
-    };
-  }, [show, props.targetRef.current]);
-  (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
-    handleResize();
-    return function () {
-      if (context.timer) {
-        clearTimeout(context.timer);
-        context.timer = null;
-      }
-    };
-  }, [props.data]);
-  return /*#__PURE__*/(0,jsx_runtime.jsx)(scrollbar, {
-    direction: props.direction,
-    length: props.direction === 'x' ? info.width : info.height,
-    scrollLength: props.direction === 'x' ? info.scrollWidth : info.scrollHeight,
-    offset: offset,
-    onScroll: handleScroll,
-    jssStyle: props.jssStyle
-  });
-};
-/* harmony default export */ var menu_scroll = (scroll_Scroll);
 ;// CONCATENATED MODULE: ../base/src/menu/menu.tsx
 
 
@@ -51505,7 +51448,7 @@ var scroll_Scroll = function Scroll(props) {
 
 
 
-
+// import Scroll from './scroll';
 
 
 var menu_emptyArray = [];
@@ -51533,7 +51476,7 @@ var Menu = function Menu(props) {
   }
   var classes = (_props$jssStyle = props.jssStyle) === null || _props$jssStyle === void 0 || (_props$jssStyle$menu = _props$jssStyle.menu) === null || _props$jssStyle$menu === void 0 ? void 0 : _props$jssStyle$menu.call(_props$jssStyle);
   var isVertical = mode === 'vertical' || mode === 'vertical-auto';
-  var isHorizontal = mode === 'horizontal';
+  // const isHorizontal = mode === 'horizontal';
   var _useState = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(false),
     _useState2 = slicedToArray_default()(_useState, 2),
     hasOpen = _useState2[0],
@@ -51554,7 +51497,9 @@ var Menu = function Menu(props) {
   var hasExpand = data.some(function (item) {
     return item && item.children && (props.looseChildren || item.children.length);
   });
-  var showScrollBar = isHorizontal || isVertical;
+
+  // const showScrollBar = isHorizontal || isVertical;
+
   var renderHeader = function renderHeader() {
     if (modeProps === 'horizontal') return;
     if (props.header) {
@@ -51629,11 +51574,6 @@ var Menu = function Menu(props) {
           }, key);
         })
       })
-    }), showScrollBar && /*#__PURE__*/(0,jsx_runtime.jsx)(menu_scroll, {
-      targetRef: scrollRef,
-      direction: mode === 'vertical' || mode === 'vertical-auto' ? 'y' : 'x',
-      data: data,
-      jssStyle: props.jssStyle
     })]
   }));
 };
@@ -51684,8 +51624,8 @@ var Search = function Search(props) {
   return /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
     className: classnames_default()(classes === null || classes === void 0 ? void 0 : classes.wrapper, theme === 'light' && (classes === null || classes === void 0 ? void 0 : classes.wrapperLight), theme === 'dark' && (classes === null || classes === void 0 ? void 0 : classes.wrapperDark), !!rest.disabled && (classes === null || classes === void 0 ? void 0 : classes.wrapperDisabled), collpase && (classes === null || classes === void 0 ? void 0 : classes.wrapperCollapsed), className),
     style: style,
-    onClick: onSearchClick,
-    children: collpase ? Search : /*#__PURE__*/(0,jsx_runtime.jsx)(base_src_input_input, objectSpread2_default()(objectSpread2_default()({
+    onClick: !props.disabled ? onSearchClick : undefined,
+    children: /*#__PURE__*/(0,jsx_runtime.jsx)(base_src_input_input, objectSpread2_default()(objectSpread2_default()({
       prefix: Search,
       className: classes === null || classes === void 0 ? void 0 : classes.input
     }, rest), {}, {
@@ -51850,9 +51790,11 @@ var message_Message = /*#__PURE__*/function (_React$PureComponent) {
     _this = _super.call(this, props);
     defineProperty_default()(assertThisInitialized_default()(_this), "cachedHeight", void 0);
     defineProperty_default()(assertThisInitialized_default()(_this), "timeoutMap", void 0);
+    defineProperty_default()(assertThisInitialized_default()(_this), "messages", void 0);
     _this.state = {
       messages: []
     };
+    _this.messages = [];
     _this.cachedHeight = {};
     _this.timeoutMap = {};
     _this.removeMessage = _this.removeMessage.bind(assertThisInitialized_default()(_this));
@@ -51860,16 +51802,24 @@ var message_Message = /*#__PURE__*/function (_React$PureComponent) {
     return _this;
   }
   createClass_default()(Message, [{
+    key: "setMessages",
+    value: function setMessages(messages) {
+      this.messages = messages;
+      this.setState({
+        messages: messages
+      });
+    }
+  }, {
     key: "addMessage",
     value: function addMessage(msg) {
       var _this2 = this;
       var id = message_getUidStr();
-      var newState = message_produce(this.state, function (state) {
-        state.messages.push(Object.assign({
+      var newMessages = message_produce(this.messages, function (messages) {
+        messages.push(Object.assign({
           id: id
         }, msg));
       });
-      this.setState(newState);
+      this.setMessages(newMessages);
       if (msg.duration > 0) {
         var closeTimeDelay = setTimeout(function () {
           _this2.closeMessageForAnimation(id, dismissDuration, _this2.cachedHeight[id]);
@@ -51882,7 +51832,7 @@ var message_Message = /*#__PURE__*/function (_React$PureComponent) {
     key: "removeMessage",
     value: function removeMessage(id) {
       var callback;
-      var messages = this.state.messages.filter(function (m) {
+      var messages = this.messages.filter(function (m) {
         if (m.id !== id) return true;
         if (m.onClose) {
           callback = m.onClose;
@@ -51893,9 +51843,7 @@ var message_Message = /*#__PURE__*/function (_React$PureComponent) {
         var _this$props$onDestroy, _this$props;
         (_this$props$onDestroy = (_this$props = this.props).onDestroy) === null || _this$props$onDestroy === void 0 || _this$props$onDestroy.call(_this$props);
       } else {
-        this.setState({
-          messages: messages
-        });
+        this.setMessages(messages);
       }
       if (callback) callback();
     }
@@ -51904,16 +51852,15 @@ var message_Message = /*#__PURE__*/function (_React$PureComponent) {
     value: function closeMessageForAnimation(id, duration, msgHeight) {
       var _this3 = this;
       // duration animation duration time
-      this.setState(function (preState) {
-        return message_produce(preState, function (state) {
-          state.messages.forEach(function (m) {
-            if (m.id === id) {
-              m.dismiss = true;
-              m.h = msgHeight || 0;
-            }
-          });
+      var newMessages = message_produce(this.messages, function (messages) {
+        messages.forEach(function (m) {
+          if (m.id === id) {
+            m.dismiss = true;
+            m.h = msgHeight || 0;
+          }
         });
       });
+      this.setMessages(newMessages);
       setTimeout(function () {
         _this3.removeMessage(id);
       }, duration);
@@ -62953,7 +62900,7 @@ var upload_interface = __webpack_require__(4412);
 
 
 /* harmony default export */ var src_0 = ({
-  version: '3.2.0-rc.5'
+  version: '3.2.0'
 });
 }();
 /******/ 	return __webpack_exports__;