shineout 3.2.0-beta.2 → 3.2.0-beta.4

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-beta.2');
+/* harmony default export */ var version = ('3.2.0-beta.4');
 ;// 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(),
@@ -12521,6 +12524,8 @@ var breadcrumbTokens = {
   breadcrumbFontWieght: 'Weight-regular',
   breadcrumbLinkColor: 'Neutral-text-3',
   breadcrumbLinkHoverColor: 'Brand-5',
+  breadcrumbDefaultLinkColor: 'Brand-6',
+  breadcrumbDefaultLinkHoverColor: 'Brand-5',
   breadcrumbListPaddingY: 'Spacing-4',
   breadcrumbListItemBorderRadius: 'Radius-default',
   breadcrumbListItemWrapperPaddingX: 'Spacing-4',
@@ -12528,6 +12533,7 @@ var breadcrumbTokens = {
   breadcrumbListItemPaddingY: 'Spacing-5',
   breadcrumbListItemHoverBackgroundColor: 'Neutral-fill-2',
   breadcrumbListItemHoverFontColor: 'Neutral-text-3',
+  breadcrumbPrevFontWeight: 'Weight-regular',
   breadcrumbSeparatorMarginX: 'Spacing-8',
   breadcrumbIconBackgroundColor: 'Neutral-text-4'
 };
@@ -13209,12 +13215,15 @@ var datePickerTokens = {
   datePickerPanelTitlePaddingTop: 'Spacing-10',
   datePickerPanelTitleFontSize: 'Font-14',
   datePickerPanelColor: 'Neutral-text-5',
+  datePickerPanelFontWeight: 'Weight-regular',
   datePickerPanelBackgroundColor: 'Neutral-fill-1',
   datePickerPanelShadow: 'Shadow-2',
   datePickerPanelRadius: 'Radius-default',
   datePickerPanelMargin: 'Spacing-24',
   datePickerPanelBorder: 'Neutral-border-1',
   datePickerPanelHeaderFontSize: 'Font-14',
+  datePickerPanelHeaderFontColor: 'Neutral-text-5',
+  datePickerPanelHeaderFontWeight: 'Weight-regular',
   datePickerPanelHeaderPaddingX: 'Spacing-12',
   datePickerPanelHeaderPaddingY: 'Spacing-8',
   datePickerPanelHeaderBorderColor: 'Neutral-border-1',
@@ -13322,7 +13331,7 @@ var dividerTokens = {
   dividerHorizontalMarginY: 'Spacing-24',
   dividerHorizontalTextMarginY: 'Spacing-16',
   dividerVerticalMarginX: 'Spacing-12',
-  dividerTextPaddingX: '1em'
+  dividerTextPaddingX: 'Spacing-12'
 };
 /* harmony default export */ var divider = (dividerTokens);
 ;// CONCATENATED MODULE: ../theme/src/divider/index.ts
@@ -13642,7 +13651,7 @@ var menuTokens = {
   menuDarkItemDisabledBackgroundColor: 'Neutral-fill-10',
   menuDarkItemDisabledFontColor: 'Neutral-text-4',
   menuDarkHeaderBorderColor: 'Neutral-fill-8',
-  menuSearchBorderRadius: 'Radius-Full',
+  menuSearchBorderRadius: 'Radius-full',
   menuSearchBorderColor: 'Neutral-border-2',
   menuSearchPaddingX: 'Spacing-8',
   menuSearchIconSize: 'Size-7',
@@ -14207,9 +14216,6 @@ var tableTokens = {
 // This file was generated automatically by a script. Please do not modify it directly.
 
 var tabsTokens = {
-  tabsExtraFillHoverBackgroundColor: 'Neutral-fill-3',
-  tabsCardDisabledBackgroundColor: 'Neutral-fill-2',
-  tabsArrowFontColor: 'Neutral-text-4',
   tabsFontColor: 'Neutral-text-5',
   tabsBackgroundColor: 'Neutral-fill-2',
   tabsBorderColor: 'Neutral-border-1',
@@ -14226,17 +14232,67 @@ var tabsTokens = {
   tabsNearlyMargin: 'Spacing-4',
   tabsLinePaddingX: 'Spacing-8',
   tabsLinePaddingY: 'Spacing-6',
+  tabsLineHrBackgroundColor: 'Neutral-border-1',
+  tabsLineAfterBackgroundColor: 'Brand-6',
   tabsLineInnerPaddingX: 'Spacing-8',
   tabsLineInnerPaddingY: 'Spacing-4',
+  tabsLineFontColor: 'Neutral-text-5',
+  tabsLineFontWeight: 'Weight-regular',
+  tabsLineFontSize: 'Font-14',
+  tabsLineBackgroundColor: 'Neutral-fill-1',
+  tabsLineActiveBackgroundColor: 'Neutral-fill-3',
+  tabsLineCheckedFontColor: 'Brand-6',
+  tabsLineCheckedFontSize: 'Font-14',
+  tabsLineCheckedFontWeight: 'Weight-medium',
+  tabsLineCheckedBackgroundColor: 'Neutral-fill-1',
+  tabsLineHoverFontSize: 'Font-14',
+  tabsLineHoverBackgroundColor: 'Neutral-fill-2',
+  tabsLineDisabledFontColor: 'Neutral-text-2',
   tabsFillPaddingX: 'Spacing-4',
   tabsFillPaddingY: 'Spacing-4',
   tabsFillInnerPaddingX: 'Spacing-16',
   tabsFillInnerPaddingY: 'Spacing-5',
+  tabsFillFontColor: 'Neutral-text-5',
+  tabsFillFontWeight: 'Weight-regular',
+  tabsFillFontSize: 'Font-14',
+  tabsFillBackgroundColor: 'Neutral-fill-2',
+  tabsFillActiveFontWeight: 'Weight-medium',
+  tabsFillActiveFontSize: 'Font-14',
+  tabsFillActiveBackgroundColor: 'Neutral-fill-4',
+  tabsFillCheckedFontColor: 'Brand-6',
+  tabsFillCheckedFontSize: 'Font-14',
+  tabsFillCheckedFontWeight: 'Weight-medium',
+  tabsFillCheckedBackgroundColor: 'Neutral-fill-1',
+  tabsFillHoverBackgroundColor: 'Neutral-fill-3',
+  tabsFillDisabledFontColor: 'Neutral-text-2',
+  tabsDashFontWeight: 'Weight-regular',
+  tabsDashFontSize: 'Font-14',
+  tabsDashActiveFontWeight: 'Weight-medium',
+  tabsDashActiveFontSize: 'Font-14',
+  tabsCardPaddingX: 'Spacing-15',
+  tabsCardPaddingY: 'Spacing-9',
+  tabsCardFontColor: 'Neutral-text-5',
+  tabsCardFontWeight: 'Weight-regular',
+  tabsCardFontSize: 'Font-14',
+  tabsCardBackgroundColor: 'Neutral-fill-2',
+  tabsCardActiveFontWeight: 'Weight-medium',
+  tabsCardActiveFontSize: 'Font-14',
+  tabsCardActiveBackgroundColor: 'Neutral-fill-4',
+  tabsCardBorderColor: 'Neutral-border-1',
+  tabsCardCheckedFontColor: 'Brand-6',
+  tabsCardCheckedFontSize: 'Font-14',
+  tabsCardCheckedFontWeight: 'Weight-medium',
+  tabsCardCheckedBackgroundColor: 'Neutral-fill-1',
+  tabsCardHoverBackgroundColor: 'Neutral-fill-3',
+  tabsCardDisabledFontColor: 'Neutral-text-2',
+  tabsCardDisabledBackgroundColor: 'Neutral-fill-2',
   tabsSplitBorderColor: 'Neutral-border-2',
   tabsActionVerticalPaddingX: 'Spacing-7',
   tabsActionVerticalPaddingY: 'Spacing-4',
   tabsActionHorizontalPaddingX: 'Spacing-7',
-  tabsActionHorizontalPaddingY: 'Spacing-8'
+  tabsActionHorizontalPaddingY: 'Spacing-8',
+  tabsExtraFillHoverBackgroundColor: 'Neutral-fill-3',
+  tabsArrowFontColor: 'Neutral-text-4'
 };
 /* harmony default export */ var tabs = (tabsTokens);
 ;// CONCATENATED MODULE: ../theme/src/tabs/index.ts
@@ -14976,7 +15032,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',
@@ -14986,8 +15042,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: {
@@ -15060,6 +15123,7 @@ var breadcrumbStyle = {
   wrapper: {
     lineHeight: src.lineHeightDynamic,
     fontSize: src.breadcrumbFontSize,
+    fontWeight: src.breadcrumbFontWieght,
     display: 'flex',
     alignItems: 'center',
     color: src.breadcrumbFontColor,
@@ -15088,7 +15152,13 @@ var breadcrumbStyle = {
   },
   item: {
     display: 'flex',
-    alignItems: 'center'
+    alignItems: 'center',
+    '& a:not(a[class])': {
+      color: src.breadcrumbDefaultLinkColor,
+      '&:hover': {
+        color: src.breadcrumbDefaultLinkHoverColor
+      }
+    }
     // '&:not(a) svg': {
     //   color: token.breadcrumbIconBackgroundColor,
     // },
@@ -15324,12 +15394,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',
@@ -15450,13 +15525,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: {
@@ -17116,6 +17204,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
@@ -17346,6 +17435,7 @@ var datePickerStyle = objectSpread2_default()(objectSpread2_default()({
     cursor: 'pointer',
     width: src.datePickerPanelHeaderIconHotWidth,
     height: src.datePickerPanelHeaderIconHotWidth,
+    color: src.datePickerPanelHeaderIconColor,
     borderRadius: '50%',
     '&[dir=rtl]': {
       transform: 'rotate(180deg)'
@@ -17369,6 +17459,8 @@ var datePickerStyle = objectSpread2_default()(objectSpread2_default()({
   pickerHeaderInfo: {
     cursor: 'pointer',
     borderRadius: '2px',
+    color: src.datePickerPanelHeaderFontColor,
+    fontWeight: src.datePickerPanelHeaderFontWeight,
     '&:hover': {
       backgroundColor: src.datePickerPanelHeaderIconHoverBackgroundColor
     }
@@ -17386,7 +17478,7 @@ var datePickerStyle = objectSpread2_default()(objectSpread2_default()({
     '& th, & td': {
       boxSizing: 'border-box',
       padding: '0',
-      fontWeight: 'normal'
+      fontWeight: src.datePickerPanelFontWeight
     },
     '& th': {
       color: src.datePickerCellHeaderColor,
@@ -19498,7 +19590,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: {
@@ -19575,12 +19669,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: {
@@ -19595,11 +19723,9 @@ var menuStyle = {
     }
   },
   wrapperInline: {},
-  wrapperVertical: {
-    position: 'relative'
-  },
+  wrapperVertical: {},
   wrapperHorizontal: {
-    position: 'relative'
+    flexDirection: 'row'
   },
   wrapperHasOpen: {},
   children: {
@@ -24518,12 +24644,12 @@ var getLineStyle = function getLineStyle() {
         bottom: 0,
         left: 0,
         width: 2
-      })),
-      '& :not([data-soui-state="active"])$tab': {
-        '&:after': {
-          display: 'none'
-        }
-      }
+      }))
+      // '& :not([data-soui-state="active"])$tab': {
+      //   '&:after': {
+      //     display: 'none',
+      //   },
+      // },
     },
     '&[data-soui-position^="right-"][data-soui-shape="line"]': {
       '&[dir=ltr]': objectSpread2_default()({
@@ -24549,12 +24675,7 @@ var getLineStyle = function getLineStyle() {
         bottom: 0,
         right: 0,
         width: 2
-      })),
-      '& :not([data-soui-state="active"])$tab': {
-        '&:after': {
-          display: 'none'
-        }
-      }
+      }))
     },
     '&[data-soui-position^="top-"][data-soui-shape="line"]': objectSpread2_default()({
       '& $hr': {
@@ -24582,7 +24703,13 @@ var getLineStyle = function getLineStyle() {
     })), {}, {
       '& :not([data-soui-state="active"])$tab': {
         '&:after': {
-          display: 'none'
+          position: 'absolute',
+          content: '""',
+          top: 0,
+          left: 0,
+          width: '100%',
+          height: 1,
+          background: src.tabsBorderColor
         }
       }
     })
@@ -24642,12 +24769,6 @@ var getFillStyle = function getFillStyle() {
             color: src.tabsActiveFontColor
           }
         },
-        '&:not([data-soui-state="active"]):not([data-soui-state="disabled"]):hover $fillInner': {
-          background: src.tabsExtraFillHoverBackgroundColor
-        },
-        '&:not([data-soui-state="active"]):not([data-soui-state="disabled"]):active $fillInner': {
-          background: src.tabsClickBackgroundColor
-        },
         '&:before': {
           content: '""',
           position: 'absolute',
@@ -24790,7 +24911,10 @@ var tabsStyle = {
   },
   hr: {
     position: 'absolute',
-    background: src.tabsBorderColor
+    background: src.tabsBorderColor,
+    '$headerWrapper[data-soui-shape="line"] &': {
+      background: src.tabsLineHrBackgroundColor
+    }
   },
   cardHr: {
     // aflter
@@ -24999,23 +25123,27 @@ var tabsStyle = {
     '$headerWrapper[data-soui-shape="card"] &': {
       '& $tab': {
         position: 'relative',
-        border: "1px solid ".concat(src.tabsBorderColor),
-        padding: "".concat(src.tabsTabPaddingY, " ").concat(src.tabsTabPaddingX),
-        background: src.tabsBackgroundColor,
+        border: "1px solid ".concat(src.tabsCardBorderColor),
+        padding: "".concat(src.tabsCardPaddingY, " ").concat(src.tabsCardPaddingX),
+        color: src.tabsCardFontColor,
+        fontSize: src.tabsCardFontSize,
+        fontWeight: src.tabsCardFontWeight,
+        background: src.tabsCardBackgroundColor,
         '&[data-soui-state="active"]': {
-          color: src.tabsActiveFontColor,
-          background: src.tabsActiveBackgroundColor,
-          fontWeight: 'bold'
+          color: src.tabsCardCheckedFontColor,
+          fontSize: src.tabsCardCheckedFontSize,
+          fontWeight: src.tabsCardCheckedFontWeight,
+          background: src.tabsCardCheckedBackgroundColor
         },
         '&[data-soui-state="disabled"]': {
-          color: src.tabsDisabledFontColor,
+          color: src.tabsCardDisabledFontColor,
           cursor: 'not-allowed'
         },
         '&:not([data-soui-state="active"]):not([data-soui-state="disabled"]):hover': {
-          background: src.tabsHoverBackgroundColor
+          background: src.tabsCardHoverBackgroundColor
         },
         '&:not([data-soui-state="active"]):not([data-soui-state="disabled"]):active': {
-          background: src.tabsClickBackgroundColor
+          background: src.tabsCardActiveBackgroundColor
         }
       }
     },
@@ -25023,17 +25151,39 @@ var tabsStyle = {
       '& $tab': {
         position: 'relative',
         padding: "".concat(src.tabsLinePaddingY, " ").concat(src.tabsLinePaddingX),
-        // background: '#FFF',
-
+        color: src.tabsLineFontColor,
+        fontSize: src.tabsLineFontSize,
+        fontWeight: src.tabsLineFontWeight,
+        background: src.tabsLineBackgroundColor,
         '&[data-soui-state="active"]': {
-          color: src.tabsActiveFontColor,
-          background: src.tabsActiveBackgroundColor,
-          fontWeight: 'bold'
+          color: src.tabsLineCheckedFontColor,
+          fontSize: src.tabsLineCheckedFontSize,
+          background: src.tabsLineCheckedBackgroundColor,
+          fontWeight: src.tabsLineCheckedFontWeight,
+          '&:after': {
+            background: src.tabsLineAfterBackgroundColor
+          }
         },
         '&[data-soui-state="disabled"]': {
-          color: src.tabsDisabledFontColor,
+          color: src.tabsLineDisabledFontColor,
           cursor: 'not-allowed'
         },
+        '[data-soui-position^="left-"] &': {
+          '&:after': {
+            width: 1,
+            right: 0,
+            left: 'auto',
+            height: '100%',
+            background: src.tabsBorderColor
+          }
+        },
+        '[data-soui-position^="right-"] &': {
+          '&:after': {
+            width: 1,
+            height: '100%',
+            background: src.tabsBorderColor
+          }
+        },
         '&:not([data-soui-state="active"])': {
           '&:after': {
             position: 'absolute',
@@ -25046,41 +25196,64 @@ var tabsStyle = {
           }
         },
         '&:not([data-soui-state="active"]):not([data-soui-state="disabled"]):hover $lineInner': {
-          background: src.tabsHoverBackgroundColor
+          background: src.tabsLineHoverBackgroundColor
         },
         '&:not([data-soui-state="active"]):not([data-soui-state="disabled"]):active $lineInner': {
-          background: src.tabsClickBackgroundColor
+          background: src.tabsLineActiveBackgroundColor
         }
       }
     },
     '$headerWrapper[data-soui-shape="dash"] &': {
       '& $tab': {
         padding: "".concat(src.tabsLinePaddingY, " ").concat(src.tabsLinePaddingX),
+        color: src.tabsLineFontColor,
+        fontSize: src.tabsLineFontSize,
+        fontWeight: src.tabsLineFontWeight,
+        background: src.tabsLineBackgroundColor,
         '&[data-soui-state="active"]': {
-          color: src.tabsActiveFontColor,
-          background: src.tabsActiveBackgroundColor,
-          fontWeight: 'bold'
+          color: src.tabsLineCheckedFontColor,
+          fontSize: src.tabsLineCheckedFontSize,
+          background: src.tabsLineCheckedBackgroundColor,
+          fontWeight: src.tabsLineCheckedFontWeight,
+          '&:after': {
+            background: src.tabsLineAfterBackgroundColor
+          }
         },
         '&:not([data-soui-state="active"]):not([data-soui-state="disabled"]):hover $lineInner': {
-          background: src.tabsHoverBackgroundColor
+          background: src.tabsLineHoverBackgroundColor
         },
         '&:not([data-soui-state="active"]):not([data-soui-state="disabled"]):active  $lineInner': {
-          background: src.tabsClickBackgroundColor
+          background: src.tabsLineActiveBackgroundColor
         },
         '&[data-soui-state="disabled"]': {
-          color: src.tabsDisabledFontColor,
+          color: src.tabsLineDisabledFontColor,
           cursor: 'not-allowed'
         }
       }
     },
     '$headerWrapper[data-soui-shape="fill"] &': {
       '& $tab': {
+        color: src.tabsFillFontColor,
+        fontSize: src.tabsFillFontSize,
+        fontWeight: src.tabsFillFontWeight,
+        background: src.tabsFillBackgroundColor,
         '&[data-soui-state="active"]': {
-          fontWeight: 'bold'
+          color: src.tabsFillCheckedFontColor,
+          // fontSize: Token.tabsFillCheckedFontSize,
+          fontWeight: src.tabsFillCheckedFontWeight,
+          '& $fillInner': {
+            background: src.tabsFillCheckedBackgroundColor
+          }
         },
         '&[data-soui-state="disabled"]': {
-          color: src.tabsDisabledFontColor,
+          color: src.tabsFillDisabledFontColor,
           cursor: 'not-allowed'
+        },
+        '&:not([data-soui-state="active"]):not([data-soui-state="disabled"]):hover $fillInner': {
+          background: src.tabsFillHoverBackgroundColor
+        },
+        '&:not([data-soui-state="active"]):not([data-soui-state="disabled"]):active $fillInner': {
+          background: src.tabsFillActiveBackgroundColor
         }
       }
     },
@@ -25324,7 +25497,6 @@ var TagStyle = {
   wrapper: {
     lineHeight: src.lineHeightDynamic
   },
-  container: {},
   inline: {
     display: 'inline-block',
     flex: 1,
@@ -28847,7 +29019,10 @@ function useClickAway(params) {
     }
     return function () {
       // @ts-ignore
-      document.removeEventListener(event, handleClickAway);
+      document.removeEventListener(event, handleClickAway, {
+        // 解决 点击后立刻删除dom导致获取不到元素; contains(target) 为 false 的问题
+        capture: true
+      });
     };
   }, [effect]);
 }
@@ -29554,7 +29729,7 @@ var useButton = function useButton() {
     return mergedEventHandlers;
   };
   return {
-    disabled: disabled,
+    disabled: disabled || loading,
     getAnchorProps: getAnchorProps,
     getButtonProps: getButtonProps,
     getSpaceChildren: getSpaceChildren
@@ -36079,10 +36254,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", {
@@ -45032,9 +45204,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
@@ -45391,7 +45563,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
   });
@@ -47303,11 +47475,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,
@@ -51262,6 +51438,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);
@@ -51272,14 +51449,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,
@@ -51350,8 +51537,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: !isRootHorizontal,
         position: position,
         lazy: false,
         children: function children(close) {
@@ -51436,7 +51625,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,
@@ -51444,203 +51633,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
 
 
@@ -51648,7 +51640,7 @@ var scroll_Scroll = function Scroll(props) {
 
 
 
-
+// import Scroll from './scroll';
 
 
 var menu_emptyArray = [];
@@ -51676,7 +51668,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],
@@ -51697,7 +51689,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) {
@@ -51772,11 +51766,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
     })]
   }));
 };
@@ -51993,9 +51982,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));
@@ -52003,16 +51994,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]);
@@ -52025,7 +52024,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;
@@ -52036,9 +52035,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();
     }
@@ -52047,16 +52044,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);
@@ -63096,7 +63092,7 @@ var upload_interface = __webpack_require__(4412);
 
 
 /* harmony default export */ var src_0 = ({
-  version: '3.2.0-beta.2'
+  version: '3.2.0-beta.4'
 });
 }();
 /******/ 	return __webpack_exports__;