shineout 3.2.0-rc.4 → 3.2.0

package/dist/shineout.js

@@ -2954,7 +2954,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_RESULT__;var _typeof =
 
 /***/ }),
 
-/***/ 158:
+/***/ 3644:
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
@@ -3026,7 +3026,7 @@ exports.useSyncExternalStore = void 0 !== e.useSyncExternalStore ? e.useSyncExte
 
 /***/ }),
 
-/***/ 4709:
+/***/ 2518:
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
@@ -3042,7 +3042,7 @@ exports.useSyncExternalStore = void 0 !== e.useSyncExternalStore ? e.useSyncExte
 
 
 var h = __webpack_require__(9787),
-  n = __webpack_require__(6097);
+  n = __webpack_require__(9625);
 function p(a, b) {
   return a === b && (0 !== a || 1 / a === 1 / b) || a !== a && b !== b;
 }
@@ -3101,26 +3101,26 @@ exports.useSyncExternalStoreWithSelector = function (a, b, e, l, g) {
 
 /***/ }),
 
-/***/ 6097:
+/***/ 9625:
 /***/ (function(module, __unused_webpack_exports, __webpack_require__) {
 
 "use strict";
 
 
 if (true) {
-  module.exports = __webpack_require__(158);
+  module.exports = __webpack_require__(3644);
 } else {}
 
 /***/ }),
 
-/***/ 314:
+/***/ 6523:
 /***/ (function(module, __unused_webpack_exports, __webpack_require__) {
 
 "use strict";
 
 
 if (true) {
-  module.exports = __webpack_require__(4709);
+  module.exports = __webpack_require__(2518);
 } else {}
 
 /***/ }),
@@ -4116,6 +4116,13 @@ const figma = [
     describe: '',
     locked: true,
   },
+  {
+    name: '填充色',
+    token: 'Neutral-fill-8',
+    value: '#333E59',
+    describe: '',
+    locked: true,
+  },
   {
     name: 'colorFillActive',
     token: 'Neutral-fill-4',
@@ -6883,7 +6890,8 @@ var config = {
   },
   menu: {
     CollapseArrow: icons.ArrowDown,
-    FrontSolidArrowDown: icons.PcArrowFillDown
+    FrontSolidArrowDown: icons.PcArrowFillDown,
+    Search: icons.Search
   },
   modal: {
     Close: icons === null || icons === void 0 ? void 0 : icons.Close
@@ -7096,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) {
@@ -11949,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.4');
+/* harmony default export */ var version = ('3.2.0');
 ;// CONCATENATED MODULE: ../shineout-style/src/jss-style/index.tsx
 
 
@@ -12111,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(),
@@ -12123,6 +12134,11 @@ var cssvar = function cssvar(str, value, key, _size) {
   }
   return "var(--".concat(prefix, "-").concat(camelCaseToDash(key), ",var(--").concat(prefix, "-").concat(replaceNonAlphanumeric(str), ",").concat(value, "))");
 };
+var getTokenName = function getTokenName(key) {
+  var _getConfig2 = getConfig(),
+    prefix = _getConfig2.prefix;
+  return "--".concat(prefix, "-").concat(camelCaseToDash(key));
+};
 ;// CONCATENATED MODULE: ../theme/src/token/token.ts
 
 
@@ -12268,6 +12284,7 @@ var Token = {
   'Neutral-fill-9': '#141737',
   'Neutral-fill-10': '#020B18',
   'Neutral-fill-6': '#999DA8',
+  'Neutral-fill-8': '#333E59',
   'Neutral-fill-4': '#CCCFD7',
   'Neutral-fill-3': '#E8EBF0',
   'Neutral-fill-2': '#F4F5F8',
@@ -12425,7 +12442,6 @@ var Token = {
 
 // @ts-ignore
 var CommonToken = {};
-var CommonTokenMap = (/* unused pure expression or super */ null && (Token));
 Object.keys(Token).forEach(function (key) {
   var _getConfig = getConfig(),
     prefix = _getConfig.prefix;
@@ -13405,6 +13421,7 @@ var formTokens = {
   formItemLabelWidth: '140px',
   formItemLabelPaddingY: 'Spacing-5',
   formItemLabelMarginXEnd: 'Spacing-8',
+  formItemLabelTopPaddingY: 'Spacing-4',
   formItemDangerColor: 'Danger-6',
   formItemTipMinHeight: 'Size-10',
   formItemTipFontSize: 'Font-12',
@@ -13570,14 +13587,12 @@ var listTokens = {
 // This file was generated automatically by a script. Please do not modify it directly.
 
 var menuTokens = {
+  menuCollpaseWidth: 'Spacing-40',
   menuFontSize: 'Font-14',
   menuFontColor: 'Neutral-text-5',
   menuIconColor: 'Neutral-text-4',
-  menuCollapseWidth: 'Size-20',
-  menuCollapseItemDisabledFontColor: 'Neutral-text-2',
-  menuCollapseItemDisabledBackgroundColor: 'Neutral-fill-1',
-  menuCollapseItemActiveFontColor: 'Brand-6',
-  menuCollapseItemActiveBackgroundColor: 'Neutral-fill-1',
+  menuIconMarginX: 'Spacing-8',
+  menuPopoverPaddingY: 'Spacing-4',
   menuItemBackgroundColor: 'Neutral-fill-1',
   menuItemFontColor: 'Neutral-text-5',
   menuItemHoverBackgroundColor: 'Neutral-fill-2',
@@ -13585,14 +13600,20 @@ var menuTokens = {
   menuItemActiveBackgroundColor: 'Brand-1',
   menuItemActiveHoverBackgroundColor: 'Brand-2',
   menuItemActiveFontColor: 'Brand-6',
+  menuItemActiveDisabledFontColor: 'Brand-3',
   menuItemDisabledBackgroundColor: 'Neutral-fill-1',
   menuItemDisabledFontColor: 'Neutral-text-2',
-  menuTitlePaddingX: '13px',
-  menuTitlePaddingY: '9px',
-  menuExpandWidth: '46px',
-  menuExpandSize: '14px',
+  menuItemCollpaseActiveBackgroundColor: 'Brand-6',
+  menuItemCollpaseActiveFontColor: 'Neutral-text-1',
+  menuTitlePaddingX: 'Spacing-16',
+  menuTitlePaddingY: 'Spacing-9',
+  menuExpandWidth: 'Spacing-46',
+  menuExpandSize: 'Spacing-14',
   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',
@@ -13604,14 +13625,33 @@ var menuTokens = {
   menuDarkItemOpenFontColor: 'Neutral-text-1',
   menuDarkItemDisabledBackgroundColor: 'Neutral-fill-10',
   menuDarkItemDisabledFontColor: 'Neutral-text-4',
-  menuDarkCollapseItemFontColor: 'Brand-1',
-  menuDarkCollapseItemBackgroundColor: 'Neutral-fill-9',
-  menuDarkCollapseItemActiveFontColor: 'Neutral-text-1',
-  menuDarkCollapseItemActiveBackgroundColor: 'Brand-6',
-  menuDarkCollapseItemDisabledFontColor: 'Neutral-text-4',
-  menuDarkCollapseItemDisabledBackgroundColor: 'Neutral-fill-9',
-  menuDarkCollapseItemHoverFontColor: 'Neutral-text-1',
-  menuDarkCollapseItemHoverBackgroundColor: 'Brand-9'
+  menuDarkItemCollpaseActiveBackgroundColor: 'Brand-6',
+  menuDarkItemCollpaseActiveFontColor: 'Neutral-text-1',
+  menuDarkHeaderBorderColor: 'Neutral-fill-8',
+  menuSearchBorderRadius: 'Radius-full',
+  menuSearchBorderColor: 'Neutral-border-2',
+  menuSearchCollpaseSize: 'Size-16',
+  menuSearchIconSize: 'Size-7',
+  menuSearchIconColor: 'Neutral-text-4',
+  menuSearchIconMarginX: 'Spacing-8',
+  menuSearchBackgroundColor: 'Neutral-fill-2',
+  menuSearchClearColor: 'Neutral-text-2',
+  menuSearchHoverClearColor: 'Neutral-text-4',
+  menuSearchHoverBorderColor: 'Brand-5',
+  menuSearchHoverBackgroundColor: 'Neutral-fill-1',
+  menuSearchDisabledBackgroundColor: 'Neutral-fill-3',
+  menuSearchDarkFontColor: 'Neutral-text-1',
+  menuSearchDarkBorderColor: 'Neutral-fill-8',
+  menuSearchDarkBackgroundColor: 'Neutral-fill-8',
+  menuSearchDarkIconColor: 'Neutral-text-1',
+  menuSearchDarkClearColor: 'Neutral-text-3',
+  menuSearchDarkPlaceholderFontColor: 'Neutral-text-2',
+  menuSearchDarkHoverBorderColor: 'Brand-5',
+  menuSearchDarkHoverBackgroundColor: 'Neutral-fill-9',
+  menuSearchDarkHoverClearColor: 'Neutral-text-2',
+  menuSearchDarkFocusBorderColor: 'Brand-5',
+  menuSearchDarkFocusBackgroundColor: 'Neutral-fill-9',
+  menuSearchDarkFocusShadow: 'Brand-9'
 };
 /* harmony default export */ var menu = (menuTokens);
 ;// CONCATENATED MODULE: ../theme/src/menu/index.ts
@@ -14807,6 +14847,8 @@ var src_Tokens = objectSpread2_default()(objectSpread2_default()(objectSpread2_d
 var ComponentTokenMap = objectSpread2_default()(objectSpread2_default()(objectSpread2_default()(objectSpread2_default()(objectSpread2_default()(objectSpread2_default()(objectSpread2_default()(objectSpread2_default()(objectSpread2_default()(objectSpread2_default()(objectSpread2_default()(objectSpread2_default()(objectSpread2_default()(objectSpread2_default()(objectSpread2_default()(objectSpread2_default()(objectSpread2_default()(objectSpread2_default()(objectSpread2_default()(objectSpread2_default()(objectSpread2_default()(objectSpread2_default()(objectSpread2_default()(objectSpread2_default()(objectSpread2_default()(objectSpread2_default()(objectSpread2_default()(objectSpread2_default()(objectSpread2_default()(objectSpread2_default()(objectSpread2_default()(objectSpread2_default()(objectSpread2_default()(objectSpread2_default()(objectSpread2_default()(objectSpread2_default()(objectSpread2_default()(objectSpread2_default()(objectSpread2_default()(objectSpread2_default()(objectSpread2_default()(objectSpread2_default()(objectSpread2_default()(objectSpread2_default()({}, src_alert_alert), breadcrumb), button_button), card), card_group), carousel), cascader), checkbox_checkbox), collapse), common_common), date_picker), descriptions), divider), dropdown), editable_area), empty), form_form), icon_icon), image_image), input), list), menu), message), modal), pagination), popover), progress), radio_radio), rate), select_select), slider), spin), steps), sticky), switch_switch), table), tabs), tag), textarea_textarea), tooltip), transfer), tree), tree_select), upload);
 
 
+
+
 /* harmony default export */ var src = (src_Tokens);
 ;// CONCATENATED MODULE: ../shineout-style/src/alert/alert.ts
 
@@ -14895,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',
@@ -14905,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: {
@@ -15243,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',
@@ -15369,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: {
@@ -15522,6 +15589,13 @@ var useButtonStyle = styled(src_button_button, 'button');
 /* harmony default export */ var shineout_style_src_button = ((/* unused pure expression or super */ null && (useButtonStyle)));
 ;// CONCATENATED MODULE: ../shineout-style/src/card/card.ts
 
+
+var headerCommon = {
+  fontSize: src.cardTitleFontSize,
+  lineHeight: src.lineHeightDynamic,
+  fontWeight: 'bold',
+  minWidth: 0
+};
 var cardStyle = {
   wrapper: {
     display: 'flex',
@@ -15574,13 +15648,12 @@ var cardStyle = {
       cursor: 'pointer'
     }
   },
-  headerContent: {
-    fontSize: src.cardTitleFontSize,
-    lineHeight: src.lineHeightDynamic,
-    fontWeight: 'bold',
-    flex: 1,
-    minWidth: 0
-  },
+  headerContent: objectSpread2_default()(objectSpread2_default()({}, headerCommon), {}, {
+    flex: 1
+  }),
+  simpleHeader: objectSpread2_default()(objectSpread2_default()({}, headerCommon), {}, {
+    display: 'block'
+  }),
   center: {
     textAlign: 'center'
   },
@@ -15612,7 +15685,7 @@ var cardStyle = {
     }
   },
   body: {
-    '$wrapperSplit $header+&, $wrapperSplit $header+$bodyCollapse>&': {
+    '$wrapperSplit>$header+&, $wrapperSplit>$header+$bodyCollapse>&': {
       borderTop: "1px solid ".concat(src.cardBorderColor)
     },
     padding: "".concat(src.cardPaddingY, " ").concat(src.cardPaddingX),
@@ -15623,7 +15696,7 @@ var cardStyle = {
   },
   bodyCollapse: {},
   footer: {
-    '$wrapperSplit $body+&, $wrapperSplit $bodyCollapse+&': {
+    '$wrapperSplit>$body+&, $wrapperSplit>$bodyCollapse+&': {
       borderTop: "1px solid ".concat(src.cardBorderColor)
     },
     padding: "".concat(src.cardPaddingY, " ").concat(src.cardPaddingX),
@@ -16055,6 +16128,7 @@ var useCarouselStyle = styled(carousel_carousel, 'carousel');
     color: token.fontColor,
     lineHeight: token.lineHeight,
     fontSize: token.fontSize,
+    // verticalAlign: 'top',
     fontWeight: token.fontWeight,
     verticalAlign: 'top',
     transition: "border-color .15s ease-in-out,box-shadow .15s ease-in-out;",
@@ -16427,7 +16501,7 @@ var cascaderStyle = objectSpread2_default()(objectSpread2_default()({
   },
   compressedWrapper: {
     width: 0,
-    overflow: 'hidden'
+    overflow: 'auto'
   },
   controlMouse: {
     '& $optionInner:hover': {
@@ -16540,6 +16614,7 @@ var cascaderStyle = objectSpread2_default()(objectSpread2_default()({
     overflow: 'auto'
   },
   tag: {
+    flexShrink: 0,
     '&$tag + &$tag': {
       marginLeft: 0
     },
@@ -16552,6 +16627,10 @@ var cascaderStyle = objectSpread2_default()(objectSpread2_default()({
       marginRight: 0
     }
   },
+  tagOnly: {
+    flexShrink: 1,
+    minWidth: 42
+  },
   space: {
     marginTop: src.cascaderPlaceholderMarginY,
     marginBottom: src.cascaderPlaceholderMarginY
@@ -17019,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
@@ -18289,6 +18369,7 @@ var formItemStyle = {
       textAlign: 'start',
       width: 'auto',
       paddingTop: '0',
+      paddingBottom: src.formItemLabelTopPaddingY,
       margin: '0'
     }
   },
@@ -19209,6 +19290,7 @@ var input_input = objectSpread2_default()(objectSpread2_default()(objectSpread2_
       left: '0'
     },
     top: '100%',
+    zIndex: 1000,
     transformOrigin: '100% 0',
     marginTop: '10px',
     animation: 'so-input-fade .16s ease-in',
@@ -19383,47 +19465,133 @@ var useListStyle = styled(list_list, 'list');
 /* harmony default export */ var shineout_style_src_list = ((/* unused pure expression or super */ null && (useListStyle)));
 ;// CONCATENATED MODULE: ../shineout-style/src/menu/menu.ts
 
-
-var menuIndex = 1000;
-var arrow = {
-  content: '""',
-  position: 'absolute',
-  left: 0,
-  transform: 'translateY(-50%)',
-  border: '6px solid transparent',
-  borderRightColor: src.menuItemBackgroundColor,
-  marginLeft: '-10px'
-};
+var animationDuration = '.25s';
+var collpaseWidth = src.menuCollpaseWidth;
+var transitionFunc = 'ease-out';
 var menuStyle = {
   wrapper: {
     height: '100%',
-    transition: 'width 0.3s',
-    backgroundColor: src.menuItemBackgroundColor
+    width: '100%',
+    backgroundColor: src.menuItemBackgroundColor,
+    transition: "width ".concat(animationDuration, " ").concat(transitionFunc),
+    color: src.menuFontColor,
+    display: 'flex',
+    flexDirection: 'column'
   },
   wrapperLight: {},
   wrapperDark: {
     backgroundColor: src.menuDarkItemBackgroundColor
   },
-  collapse: {
-    width: src.menuCollapseWidth,
-    boxSizing: 'content-box',
-    '& $root': {
-      width: src.menuCollapseWidth
+  wrapperCollpase: {
+    width: "".concat(collpaseWidth, "!important"),
+    '& $title': {
+      paddingLeft: '0'
+    },
+    '& $expand': {
+      opacity: 0
+    },
+    '& $titleIcon': {
+      width: "".concat(collpaseWidth, "!important"),
+      flexShrink: 0,
+      justifyContent: 'center'
+    },
+    '& $titleContent': {
+      alignItems: 'center',
+      whiteSpace: 'nowrap',
+      overflow: 'hidden'
+    },
+    '&$wrapperLight': {
+      '$menuRoot > $itemActive > $itemContent': {
+        backgroundColor: src.menuItemBackgroundColor
+      }
+    }
+  },
+  wrapperInTransition: {
+    '& $titleContent, & $header': {
+      whiteSpace: 'nowrap',
+      overflow: 'hidden'
+    },
+    '& $expand': {
+      opacity: 0
+    }
+  },
+  popover: {
+    '&&': {
+      border: 'none',
+      boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
+      borderRadius: '4px',
+      backgroundColor: src.menuItemBackgroundColor
+    },
+    '&[data-soui-theme=dark]': {
+      backgroundColor: src.menuDarkItemBackgroundColor
+    },
+    '& $children': {
+      borderRadius: '4px',
+      padding: "".concat(src.menuPopoverPaddingY, " 0")
+      // '& > :first-child > $itemContent': {
+      //   borderTopRightRadius: '4px',
+      //   borderTopLeftRadius: '4px',
+      // },
+      // '& > :last-child > $itemContent': {
+      //   borderBottomRightRadius: '4px',
+      //   borderBottomLeftRadius: '4px',
+      // },
+    }
+  },
+  popArrow: {
+    '&&&': {
+      boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
+      width: '6px',
+      height: '6px'
+    }
+  },
+  popArrowDark: {
+    '&&&': {
+      backgroundColor: src.menuDarkItemBackgroundColor,
+      boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)'
     }
   },
   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'
     },
-    '$wrapperHasOpen$wrapperVertical &': {
-      width: '100vw'
+    '&::-webkit-scrollbar': {
+      width: '6px',
+      height: '6px'
     },
-    '$wrapperHasOpen$wrapperHorizontal &': {
-      height: '100vh'
+    '&::-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: {
@@ -19438,167 +19606,26 @@ var menuStyle = {
     }
   },
   wrapperInline: {},
-  wrapperVertical: {
-    position: 'relative',
-    zIndex: menuIndex
-  },
+  wrapperVertical: {},
   wrapperHorizontal: {
-    height: '42px',
-    position: 'relative',
-    zIndex: menuIndex
+    flexDirection: 'row'
   },
   wrapperHasOpen: {},
   children: {
     padding: '0',
+    margin: '0',
     display: 'none',
     minWidth: '100%',
     whiteSpace: 'nowrap',
-    '$itemOpen > &': {
+    '$itemOpen > &, $childrenShow&': {
       display: 'block'
-    },
-    '$wrapper:not($wrapperInline) &': {
-      boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)'
-    },
-    '$wrapperHorizontal &': {
-      position: 'absolute',
-      bottom: '-2px',
-      left: 0,
-      transform: 'translateY(100%)'
-    },
-    '$wrapperHorizontal & &': {
-      position: 'absolute',
-      left: 'auto',
-      bottom: 'auto',
-      top: 0,
-      right: '-2px',
-      transform: 'translateX(100%)'
-    },
-    '$wrapperVertical &': {
-      position: 'absolute',
-      top: 0,
-      '&[dir=ltr]': {
-        right: '-6px',
-        transform: 'translateX(100%)'
-      },
-      '&[dir=rtl]': {
-        left: '-6px',
-        transform: 'translateX(-100%)'
-      },
-      minWidth: 'auto',
-      borderRadius: '4px',
-      '& > :first-child > $itemContent': {
-        borderTopRightRadius: '4px',
-        borderTopLeftRadius: '4px'
-      },
-      '& > :last-child > $itemContent': {
-        borderBottomRightRadius: '4px',
-        borderBottomLeftRadius: '4px'
-      },
-      '&$childrenUp': {
-        top: 'auto',
-        bottom: 0
-      },
-      '&$childrenUp::before': objectSpread2_default()(objectSpread2_default()({
-        top: 'auto',
-        bottom: '20%'
-      }, arrow), {}, {
-        '$wrapperDark&': {
-          borderRightColor: src.menuDarkItemBackgroundColor
-        }
-      }),
-      '&::before': objectSpread2_default()(objectSpread2_default()({
-        top: '20%'
-      }, arrow), {}, {
-        '$wrapperDark&': {
-          borderRightColor: src.menuDarkItemBackgroundColor
-        }
-      })
     }
   },
+  childrenShow: {},
   childrenUp: {},
   item: {
     listStyle: 'none',
-    flexShrink: 0,
-    position: 'relative',
-    '$wrapperVertical &, $wrapperHorizontal &': {
-      position: 'relative'
-    }
-  },
-  collapseItem: {
-    // width: 40,
-    cursor: 'pointer',
-    opacity: 1,
-    height: src.menuCollapseWidth,
-    transition: 'all ease .3s',
-    color: 'inherit',
-    position: 'relative',
-    '$wrapperLight &': {
-      background: src.menuItemBackgroundColor,
-      '&:hover': {
-        background: src.menuItemHoverBackgroundColor,
-        color: src.menuItemHoverFontColor
-      }
-    },
-    '$wrapperLight $itemDisabled > &&': {
-      cursor: 'not-allowed',
-      color: src.menuCollapseItemDisabledFontColor,
-      background: src.menuCollapseItemDisabledBackgroundColor
-    },
-    '$wrapperDark $itemDisabled > &&': {
-      cursor: 'not-allowed',
-      color: src.menuDarkCollapseItemDisabledFontColor,
-      background: src.menuDarkCollapseItemDisabledBackgroundColor
-    },
-    '$wrapperDark &': {
-      color: src.menuDarkCollapseItemFontColor,
-      background: src.menuDarkCollapseItemBackgroundColor,
-      '&:hover': {
-        background: src.menuDarkCollapseItemHoverBackgroundColor,
-        color: src.menuDarkCollapseItemHoverFontColor
-      }
-    },
-    '$itemActive > &&': {
-      '$wrapperLight &': {
-        color: src.menuCollapseItemActiveFontColor,
-        background: src.menuCollapseItemActiveBackgroundColor
-      },
-      '$wrapperDark &': {
-        color: src.menuDarkCollapseItemActiveFontColor,
-        background: src.menuDarkCollapseItemActiveBackgroundColor
-      }
-    },
-    '&$collapseItemInPath': {
-      // background: token.menuItemBackgroundColor,
-      '&::after': {
-        content: '""',
-        position: 'absolute',
-        left: 0,
-        top: 0,
-        bottom: 0,
-        width: 3,
-        transition: 'all ease 0.3s',
-        backgroundColor: src.menuCollapseItemActiveFontColor
-      }
-    }
-  },
-  collapseItemInPath: {},
-  collapseItemHide: {
-    opacity: 0,
-    width: 0,
-    // height: 0,
-    // zIndex: -1,
-    position: 'absolute',
-    top: 0,
-    color: 'transparent',
-    background: 'transparent',
-    '&$collapseItemInPath': {
-      // background: token.menuItemBackgroundColor,
-      '&::after': {
-        top: 20,
-        bottom: 20,
-        backgroundColor: 'transparent'
-      }
-    }
+    flexShrink: 0
   },
   itemActive: {},
   itemDisabled: {},
@@ -19612,9 +19639,10 @@ var menuStyle = {
     alignItems: 'center',
     cursor: 'pointer',
     position: 'relative',
-    // opacity: 1,
-    transition: 'all ease 0.3s',
-    '$wrapperLight &': {
+    '&  a': {
+      transition: 'none'
+    },
+    '[data-soui-theme=light] &': {
       color: src.menuItemFontColor,
       backgroundColor: src.menuItemBackgroundColor,
       '&:hover': {
@@ -19622,7 +19650,7 @@ var menuStyle = {
         backgroundColor: src.menuItemHoverBackgroundColor
       }
     },
-    '$wrapperDark &': {
+    '[data-soui-theme=dark] &': {
       color: src.menuDarkFontColor,
       backgroundColor: src.menuDarkItemBackgroundColor,
       '&:hover': {
@@ -19630,7 +19658,7 @@ var menuStyle = {
         backgroundColor: src.menuDarkItemHoverBackgroundColor
       }
     },
-    '$wrapperDark $itemOpen > &': {
+    '[data-soui-theme=dark] $itemOpen > &': {
       color: src.menuDarkItemOpenFontColor,
       backgroundColor: src.menuDarkItemOpenBackgroundColor,
       '& $icon': {
@@ -19638,13 +19666,19 @@ var menuStyle = {
       }
     },
     '$itemInPath > &&': {
-      '$wrapperLight &': {
+      '[data-soui-theme=light] &': {
         color: src.menuItemActiveFontColor,
         '& $icon': {
           color: src.menuItemActiveFontColor
         }
       },
-      '$wrapperDark$wrapperInline &::before, $wrapperDark$wrapperVertical &::before': {
+      '[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',
         left: 0,
@@ -19653,49 +19687,106 @@ var menuStyle = {
         width: '3px',
         backgroundColor: src.menuDarkItemActiveBackgroundColor
       },
-      '$wrapperLight$wrapperVertical &': {
-        '&::before': {
-          display: 'block',
-          content: '""',
-          position: 'absolute',
-          right: 0,
-          top: 0,
-          bottom: 0,
-          width: '4px',
-          borderTopLeftRadius: '4px',
-          borderBottomLeftRadius: '4px',
-          backgroundColor: src.menuItemActiveFontColor
+      '$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',
+      //     content: '""',
+      //     position: 'absolute',
+      //     right: 0,
+      //     top: 0,
+      //     bottom: 0,
+      //     width: '4px',
+      //     borderTopLeftRadius: '4px',
+      //     borderBottomLeftRadius: '4px',
+      //     backgroundColor: token.menuItemActiveFontColor,
+      //   },
+      // },
     },
     '$itemActive > &&': {
-      '$wrapperLight &': {
+      '[data-soui-theme=light] &': {
         color: src.menuItemActiveFontColor,
         backgroundColor: src.menuItemActiveBackgroundColor,
         '& $icon': {
           color: src.menuItemActiveFontColor
         }
       },
-      '$wrapperDark &': {
+      '[data-soui-theme=light] $itemDisabled&': {
+        color: src.menuItemActiveDisabledFontColor,
+        '& $icon': {
+          color: src.menuItemActiveDisabledFontColor
+        }
+      },
+      '$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=dark]:not($wrapperCollpase) &': {
         color: src.menuDarkItemActiveFontColor,
         backgroundColor: src.menuDarkItemActiveBackgroundColor,
         '& $icon': {
           color: src.menuDarkItemActiveFontColor
         }
       },
-      '$wrapperLight$wrapperInline &,  $wrapperLight$wrapperHorizontal &': {
+      '[data-soui-theme=dark]$wrapperCollpase &': {
         '&::before': {
           content: '""',
           position: 'absolute',
-          display: 'block',
+          left: 0,
           top: 0,
-          right: 0,
+          bottom: 0,
           width: '3px',
-          height: '100%',
-          backgroundColor: src.menuItemActiveFontColor
-        }
-      },
-      '$wrapperLight$wrapperHorizontal $root > &::before': {
+          backgroundColor: src.menuDarkItemActiveBackgroundColor
+        }
+      },
+      // '[data-soui-theme=light][data-soui-mode=inline] &,  [data-soui-theme=light][data-soui-mode=horizontal] &':
+      //   {
+      //     '&::before': {
+      //       content: '""',
+      //       position: 'absolute',
+      //       display: 'block!important',
+      //       top: 0,
+      //       right: 0,
+      //       width: '3px',
+      //       height: '100%',
+      //       backgroundColor: token.menuItemActiveFontColor,
+      //     },
+      //   },
+      '[data-soui-theme=light][data-soui-mode=horizontal] $root > &::before': {
+        content: '""',
+        position: 'absolute',
+        display: 'block!important',
+        backgroundColor: src.menuItemActiveFontColor,
         width: '100%',
         height: '2px',
         top: 'auto',
@@ -19704,7 +19795,7 @@ var menuStyle = {
         right: 'auto'
       }
     },
-    '$wrapperLight $itemDisabled > &&': {
+    '[data-soui-theme=light] $itemDisabled > &&': {
       cursor: 'not-allowed',
       color: src.menuItemDisabledFontColor,
       backgroundColor: src.menuItemDisabledBackgroundColor,
@@ -19712,7 +19803,7 @@ var menuStyle = {
         color: src.menuItemDisabledFontColor
       }
     },
-    '$wrapperDark $itemDisabled > &&': {
+    '[data-soui-theme=dark] $itemDisabled > &&': {
       cursor: 'not-allowed',
       color: src.menuDarkItemDisabledFontColor,
       backgroundColor: src.menuDarkItemDisabledBackgroundColor,
@@ -19721,23 +19812,32 @@ var menuStyle = {
       }
     }
   },
-  itemContentHide: {
-    position: 'absolute',
-    overflow: 'hidden',
-    pointerEvents: 'none',
-    // opacity: 0,
-    visibility: 'hidden',
-    '& $title': {
-      pointerEvents: 'none',
-      whiteSpace: 'nowrap'
+  itemContentFront: {},
+  itemContentBack: {},
+  header: {
+    padding: "".concat(src.menuHeaderPaddingX, " ").concat(src.menuHeaderPaddingY),
+    width: '100%',
+    transition: "width ".concat(animationDuration, " ").concat(transitionFunc),
+    color: src.menuFontColor,
+    '$wrapperDark &': {
+      color: src.menuDarkFontColor
     },
-    '& $menuIcon': {
-      opacity: 0
+    '$wrapperCollpase &': {
+      paddingLeft: '0',
+      paddingRight: '0',
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center'
+    },
+    '& + div': {
+      borderTop: "1px solid ".concat(src.menuHeaderBorderColor),
+      '$wrapperDark &': {
+        borderTop: "1px solid ".concat(src.menuDarkHeaderBorderColor)
+      }
     }
   },
-  itemContentFront: {},
-  itemContentBack: {},
   title: {
+    cursor: 'inherit',
     '&:hover': {
       color: 'inherit'
     },
@@ -19749,13 +19849,13 @@ var menuStyle = {
     minWidth: 0,
     padding: "".concat(src.menuTitlePaddingY, " ").concat(src.menuTitlePaddingX),
     '$wrapperInline $childrenHasExpand  $item:not($itemHasChildren)  $itemContentBack > &': {
-      paddingRight: src.menuExpandWidth
+      paddingRight: "calc(".concat(src.menuIconMarginX, " + ").concat(src.menuTitlePaddingX, " + ").concat(src.menuExpandSize, ")")
     },
     '$wrapperInline $itemHasChildren > $itemContentBack > &': {
       paddingRight: 0
     },
     '$childrenHasExpand > $item:not($itemHasChildren) > $itemContentBack > &': {
-      paddingRight: src.menuExpandWidth
+      paddingRight: "calc(".concat(src.menuIconMarginX, " + ").concat(src.menuTitlePaddingX, " + ").concat(src.menuExpandSize, ")")
     },
     '$childrenHasExpand $itemHasChildren > $itemContentBack > &': {
       paddingRight: 0
@@ -19764,35 +19864,46 @@ var menuStyle = {
       paddingLeft: 0
     }
   },
+  titleIcon: {
+    '& + $titleContent': {
+      paddingLeft: src.menuIconMarginX
+    },
+    lineHeight: 1,
+    display: 'inline-flex'
+  },
+  titleContent: {
+    whiteSpace: 'pre-wrap'
+    // '$wrapperCollpase &': {
+    //   transition: `opacity ${animationDuration} ${transitionFunc}`,
+    // },
+    // opacity: 1,
+  },
   expand: {
     alignSelf: 'stretch',
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',
-    '$wrapperLight &': {
+    '[data-soui-theme=light] &': {
       color: src.menuIconColor
     },
     '& > $icon': {
       lineHeight: 1,
-      opacity: 1,
       width: src.menuExpandSize,
       height: src.menuExpandSize,
       '$wrapper:not($wrapperVertical) $itemOpen > $itemContent &': {
         transform: 'rotate(180deg)'
       }
-    },
-    '$wrapperVertical &': {
-      '&[dir=ltr]': {
-        transform: 'rotate(-90deg)'
-      },
-      '&[dir=rtl]': {
-        transform: 'rotate(90deg)'
-      }
     }
   },
-  icon: {
-    transition: 'all ease 0.3s'
+  expandVertical: {
+    '&[dir=ltr] svg': {
+      transform: 'rotate(-90deg)'
+    },
+    '&[dir=rtl] svg': {
+      transform: 'rotate(90deg)'
+    }
   },
+  icon: {},
   expandHover: {
     '&:hover': {
       backgroundColor: src.menuExpandHoverBackgroundColor
@@ -19805,13 +19916,14 @@ var menuStyle = {
     width: 'auto',
     visibility: 'hidden',
     paddingLeft: src.menuTitlePaddingX,
-    paddingRight: '8px',
+    paddingRight: src.menuIconMarginX,
     '$itemHasChildren > $itemContent &': {
       visibility: 'visible'
     }
   },
   expandBack: {
-    width: src.menuExpandWidth
+    paddingRight: src.menuTitlePaddingX,
+    paddingLeft: src.menuIconMarginX
   },
   scrollbar: {
     position: 'absolute',
@@ -19862,16 +19974,66 @@ var menuStyle = {
   scrollbarDragging: {}
 };
 /* harmony default export */ var menu_menu = (menuStyle);
+;// CONCATENATED MODULE: ../shineout-style/src/menu/search.ts
+
+var _wrapperDark;
+
+var menuSearchStyle = {
+  wrapper: defineProperty_default()({}, getTokenName('inputBorderRadius'), src.menuSearchBorderRadius),
+  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: {
+    cursor: 'pointer',
+    width: src.menuSearchCollpaseSize,
+    height: src.menuSearchCollpaseSize,
+    lineHeight: 1,
+    '& input': {
+      opacity: 0
+    }
+  },
+  wrapperDisabled: {
+    cursor: 'not-allowed',
+    '&$wrapperDark': {
+      opacity: 0.3
+    }
+  },
+  input: {
+    width: '100%'
+  },
+  search: {
+    width: src.menuSearchIconSize,
+    height: src.menuSearchIconSize,
+    cursor: 'pointer',
+    display: 'flex',
+    justifyContent: 'center',
+    marginRight: src.menuSearchIconMarginX,
+    color: src.menuSearchIconColor,
+    '$wrapperDisabled &': {
+      color: src.inputDisabledFontColor,
+      cursor: 'not-allowed'
+    },
+    '$wrapperDark &': {
+      color: src.menuSearchDarkIconColor
+    },
+    '$wrapperCollapsed &': {
+      marginRight: 0
+    }
+  }
+};
+/* harmony default export */ var menu_search = (menuSearchStyle);
 ;// CONCATENATED MODULE: ../shineout-style/src/menu/index.ts
 
 
+
 var useMenuStyle = styled(menu_menu, 'menu');
 
 /* harmony default export */ var shineout_style_src_menu = ((/* unused pure expression or super */ null && (useMenuStyle)));
+var useMenuSearchStyle = styled(menu_search, 'menu-search');
+
 ;// CONCATENATED MODULE: ../shineout-style/src/message/message.ts
 
 
-var animationDuration = '0.2s';
+var message_animationDuration = '0.2s';
 var messageMargin = src.messageMarginBottom;
 var message_animations = {
   '@keyframes left-in': {
@@ -19964,21 +20126,21 @@ var messageStyle = objectSpread2_default()(objectSpread2_default()({}, message_a
   },
   itemDismissed: {
     ' [data-soui-position="bottom-left"] &': {
-      animation: "$left-out ".concat(animationDuration, " ease-in-out")
+      animation: "$left-out ".concat(message_animationDuration, " ease-in-out")
     },
     ' [data-soui-position="bottom-right"] &': {
-      animation: "$right-out ".concat(animationDuration, " ease-in-out")
+      animation: "$right-out ".concat(message_animationDuration, " ease-in-out")
     }
   },
   itemShow: {
     '[data-soui-position="top-left"] &, [data-soui-position="bottom-left"] &': {
-      animation: "$left-in ".concat(animationDuration, " ease-in-out")
+      animation: "$left-in ".concat(message_animationDuration, " ease-in-out")
     },
     '[data-soui-position="top-right"] &, [data-soui-position="bottom-right"] &': {
-      animation: "$right-in ".concat(animationDuration, " ease-in-out")
+      animation: "$right-in ".concat(message_animationDuration, " ease-in-out")
     },
     '[data-soui-position="middle"] &, [data-soui-position="top"] &': {
-      animation: "$middle-in ".concat(animationDuration, " ease-in-out")
+      animation: "$middle-in ".concat(message_animationDuration, " ease-in-out")
     }
   },
   message: {
@@ -20148,7 +20310,7 @@ var modalStyle = objectSpread2_default()(objectSpread2_default()({}, animationSt
     zIndex: modalIndex,
     top: 0,
     left: 0,
-    // overflow: 'auto',
+    overflow: 'auto',
     wordWrap: 'break-word',
     width: '100%',
     boxSizing: 'border-box',
@@ -20312,6 +20474,10 @@ var modalStyle = objectSpread2_default()(objectSpread2_default()({}, animationSt
     display: 'flex',
     marginBottom: src.modalPanelGap
   },
+  headerEmptyTitle: {
+    marginBottom: 0,
+    height: 0
+  },
   headerIcon: {
     '$wrapper &': {
       marginRight: src.modalHeaderIconMarginEnd,
@@ -20483,6 +20649,7 @@ var setToken = function setToken(options) {
     customExtraToken = _ref.extraToken;
   var _getConfig = getConfig(),
     prefix = _getConfig.prefix;
+  if (typeof window === 'undefined') return;
   var id = "__shineoutThemeStyleContainer__".concat(createHash(selector));
   var cacheTag = document.querySelector("[data-token-id=\"".concat(id, "\"]"));
   var tag = cacheTag || document.createElement(tagName);
@@ -20642,7 +20809,9 @@ var usePaginationStyle = styled(pagination_pagination, 'pagination');
 /* harmony default export */ var shineout_style_src_pagination = ((/* unused pure expression or super */ null && (usePaginationStyle)));
 ;// CONCATENATED MODULE: ../shineout-style/src/popover/popover.ts
 
-var arrowGap = 10;
+
+var popover_cssvar = '--popover-arrow-gap';
+var hideArrowGap = "var(".concat(popover_cssvar, ", 10px)");
 var arrowMargin = '8px';
 var popoverStyle = {
   wrapper: {
@@ -20664,10 +20833,17 @@ var popoverStyle = {
       height: '8.4px',
       boxSizing: 'content-box',
       background: 'inherit',
-      borderBottom: 'none'
+      borderBottom: 'none',
+      '&[dir=ltr]': {
+        borderLeftColor: 'transparent'
+      },
+      '&[dir=rtl]': {
+        borderRight: 'transparent'
+      }
     },
+    '&$hideArrow': defineProperty_default()({}, popover_cssvar, '4px'),
     '&[data-soui-position^="bottom"]': {
-      marginTop: arrowGap - 2,
+      marginTop: "calc(".concat(hideArrowGap, " - 2px)"),
       '& $arrow': {
         top: '0',
         transform: 'translate(0, -50%) rotate(-45deg)',
@@ -20676,17 +20852,18 @@ var popoverStyle = {
         margin: 'auto'
       },
       '&::after': {
-        top: arrowGap * -1,
+        top: "calc(".concat(hideArrowGap, " * -1)"),
         left: '0',
         right: '0',
         content: '" "',
         display: 'block',
-        height: arrowGap,
+        height: hideArrowGap,
         position: 'absolute'
       }
     },
     '&[data-soui-position^="top"]': {
-      marginTop: (arrowGap - 2) * -1,
+      // marginTop: (arrowGap - 2) * -1,
+      marginTop: "calc((".concat(hideArrowGap, " - 2px) * -1)"),
       '& $arrow': {
         bottom: '0',
         transform: 'translate(0, 50%) rotate(135deg)',
@@ -20695,21 +20872,25 @@ var popoverStyle = {
         margin: 'auto'
       },
       '&::after': {
-        bottom: arrowGap * -1,
+        // bottom: arrowGap * -1,
+        bottom: "calc(".concat(hideArrowGap, " * -1)"),
         left: '0',
         right: '0',
         content: '" "',
         display: 'block',
-        height: arrowGap,
+        // height: arrowGap,
+        height: hideArrowGap,
         position: 'absolute'
       }
     },
     '&[data-soui-position^="left"]': {
+      // '&[dir=ltr]': { marginLeft: (arrowGap - 2) * -1 },
       '&[dir=ltr]': {
-        marginLeft: (arrowGap - 2) * -1
+        marginLeft: "calc((".concat(hideArrowGap, " - 2px) * -1)")
       },
+      // '&[dir=rtl]': { marginRight: (arrowGap - 2) * -1 },
       '&[dir=rtl]': {
-        marginRight: (arrowGap - 2) * -1
+        marginRight: "calc((".concat(hideArrowGap, " - 2px) * -1)")
       },
       '& $arrow': {
         right: src.popoverBorderWidth,
@@ -20719,21 +20900,24 @@ var popoverStyle = {
         margin: 'auto'
       },
       '&::after': {
-        left: arrowGap * -1,
+        // left: arrowGap * -1,
+        left: "calc(".concat(hideArrowGap, " * -1)"),
         top: '0',
         bottom: '0',
         content: '" "',
         display: 'block',
-        width: arrowGap,
+        width: hideArrowGap,
         position: 'absolute'
       }
     },
     '&[data-soui-position^="right"]': {
+      // '&[dir=ltr]': { marginLeft: arrowGap - 2 },
       '&[dir=ltr]': {
-        marginLeft: arrowGap - 2
+        marginLeft: "calc(".concat(hideArrowGap, " - 2px)")
       },
+      // '&[dir=rtl]': { marginRight: arrowGap - 2 },
       '&[dir=rtl]': {
-        marginRight: arrowGap - 2
+        marginRight: "calc(".concat(hideArrowGap, " - 2px)")
       },
       '& $arrow': {
         left: '0',
@@ -20743,12 +20927,14 @@ var popoverStyle = {
         margin: 'auto'
       },
       '&::after': {
-        left: arrowGap * -1,
+        // left: arrowGap * -1,
+        left: "calc(".concat(hideArrowGap, " * -1)"),
         top: '0',
         bottom: '0',
         content: '" "',
         display: 'block',
-        width: arrowGap,
+        // width: arrowGap,
+        width: hideArrowGap,
         position: 'absolute'
       }
     },
@@ -20796,6 +20982,7 @@ var popoverStyle = {
     display: 'block'
   },
   arrow: {},
+  hideArrow: {},
   content: {
     position: 'relative',
     zIndex: 2,
@@ -21501,7 +21688,7 @@ var selectStyle = objectSpread2_default()(objectSpread2_default()({
   },
   compressedWrapper: {
     width: 0,
-    overflow: 'hidden'
+    overflow: 'auto'
   },
   controlMouse: {
     '& $optionInner:not($optionDisabled):not($optionActive):hover': {
@@ -21646,6 +21833,7 @@ var selectStyle = objectSpread2_default()(objectSpread2_default()({
     }
   },
   tag: {
+    flexShrink: 0,
     '&$tag + &$tag': {
       marginLeft: 0
     },
@@ -21658,6 +21846,10 @@ var selectStyle = objectSpread2_default()(objectSpread2_default()({
       marginRight: 0
     }
   },
+  tagOnly: {
+    flexShrink: 1,
+    minWidth: 42
+  },
   space: {
     marginTop: src.selectPlaceholderMarginY,
     marginBottom: src.selectPlaceholderMarginY
@@ -21681,7 +21873,8 @@ var selectStyle = objectSpread2_default()(objectSpread2_default()({
   },
   virtualList: {
     margin: 0,
-    padding: 0
+    padding: 0,
+    width: '100%'
   },
   option: {
     listStyle: 'none',
@@ -21974,7 +22167,7 @@ var sliderStyle = {
       bottom: '100%',
       '&[dir=ltr]': {
         left: 0,
-        transform: 'translate(-50%, 10px)'
+        transform: 'translate(-50%, -10px)'
       },
       '&[dir=rtl]': {
         right: 0,
@@ -23545,8 +23738,12 @@ var switchStyle = objectSpread2_default()(objectSpread2_default()({}, switch_ani
     display: 'inline-block',
     padding: "0 ".concat(src.switchTextPaddingX)
   },
-  wrapperSmall: {},
-  wrapperLarge: {},
+  wrapperSmall: {
+    fontSize: src.switchSmallFontSize
+  },
+  wrapperLarge: {
+    fontSize: src.switchLargeFontSize
+  },
   indicator: {
     width: src.switchCircleSize,
     height: src.switchCircleSize,
@@ -23614,9 +23811,23 @@ var switchStyle = objectSpread2_default()(objectSpread2_default()({}, switch_ani
     lineHeight: 1,
     paddingLeft: src.switchCircleSize,
     transition: "padding ".concat(switch_transition),
+    '$wrapperSmall &': {
+      paddingLeft: src.switchSmallCircleSize
+    },
+    '$wrapperLarge &': {
+      paddingLeft: src.switchLargeCircleSize
+    },
     '$wrapperChecked &': {
       paddingLeft: 0,
-      paddingRight: src.switchCircleSize
+      paddingRight: src.switchCircleSize,
+      '$wrapperSmall&': {
+        paddingLeft: 0,
+        paddingRight: src.switchSmallCircleSize
+      },
+      '$wrapperLarge&': {
+        paddingLeft: 0,
+        paddingRight: src.switchLargeCircleSize
+      }
     }
   },
   wrapperDisabled: {
@@ -23707,10 +23918,10 @@ var tableStyle = objectSpread2_default()(objectSpread2_default()({}, globalStyle
             background: src.tableCellBorderColor,
             borderLeft: "1px solid ".concat(src.tableCellBorderColor)
           },
-          '&[dir=ltr]::after': {
+          '[dir=ltr]&::after': {
             right: 0
           },
-          '&[dir=rtl]::after': {
+          '[dir=rtl]&::after': {
             left: 0
           }
         }
@@ -24082,7 +24293,7 @@ var tableStyle = objectSpread2_default()(objectSpread2_default()({}, globalStyle
   iconWrapper: {
     display: 'inline-block',
     verticalAlign: 'top',
-    lineHeight: '1.85',
+    lineHeight: '1.9',
     height: '14px'
   },
   rowStriped: {
@@ -24604,6 +24815,12 @@ var tabsStyle = {
         width: '100%',
         alignItems: 'center'
       },
+      '& $next': {
+        marginLeft: src.tabsNearlyMargin
+      },
+      '& $prev': {
+        marginRight: src.tabsNearlyMargin
+      },
       '& $next,& $prev': {
         lineHeight: 0,
         padding: "".concat(src.tabsActionHorizontalPaddingY, " ").concat(src.tabsActionHorizontalPaddingX)
@@ -25098,7 +25315,6 @@ var TagStyle = {
   wrapper: {
     lineHeight: src.lineHeightDynamic
   },
-  container: {},
   inline: {
     display: 'inline-block',
     flex: 1,
@@ -25120,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)")
     },
@@ -25275,6 +25488,7 @@ var textarea_input = objectSpread2_default()(objectSpread2_default()(objectSprea
   },
   info: {
     position: 'absolute',
+    zIndex: 1000,
     '&[dir=ltr]': {
       right: '0'
     },
@@ -25343,7 +25557,7 @@ var useTextareaStyle = styled(src_textarea_textarea, 'textarea');
 ;// CONCATENATED MODULE: ../shineout-style/src/tooltip/tooltip.ts
 
 
-var tooltip_arrowGap = 12;
+var arrowGap = 12;
 var tooltip_arrowMargin = '8px';
 var tooltip_animation = {
   '@keyframes fadeIn': {
@@ -25397,10 +25611,12 @@ var tooltipStyle = objectSpread2_default()(objectSpread2_default()({}, tooltip_a
     boxShadow: src.tooltipShadow,
     color: src.tooltipColor,
     wordWrap: 'break-word',
+    pointerEvents: 'none',
     '&[data-soui-type^="light"]': {
       backgroundColor: src.tooltipLightBackgroundColor,
       color: src.tooltipLightColor,
-      border: "1px solid ".concat(src.tooltipLightBorderColor)
+      border: "1px solid ".concat(src.tooltipLightBorderColor),
+      boxSizing: 'border-box'
     },
     '&[data-soui-type^="primary"]': {
       backgroundColor: src.tooltipPrimaryBackgroundColor,
@@ -25424,33 +25640,39 @@ var tooltipStyle = objectSpread2_default()(objectSpread2_default()({}, tooltip_a
       content: '" "',
       display: 'block',
       border: "inherit",
+      borderLeftColor: 'transparent',
       width: '8.4px',
       height: '8.4px',
       boxSizing: 'content-box',
       background: 'inherit',
-      borderBottom: 'none'
+      borderBottomColor: 'transparent'
     },
     '&[data-soui-position^="bottom"]': {
-      marginTop: tooltip_arrowGap - 2,
+      marginTop: arrowGap - 2,
       '&::before': {
         top: '0',
-        transform: 'translate(0, -50%) rotate(-45deg)',
         left: '0',
         right: '0',
         margin: 'auto'
       },
+      '&[dir=ltr]::before': {
+        transform: 'translate(0, -50%) rotate(-45deg)'
+      },
+      '&[dir=rtl]::before': {
+        transform: 'translate(0, -50%) rotate(45deg)'
+      },
       '&::after': {
-        top: tooltip_arrowGap * -1,
+        top: arrowGap * -1,
         left: '0',
         right: '0',
         content: '" "',
         display: 'block',
-        height: tooltip_arrowGap,
+        height: arrowGap,
         position: 'absolute'
       }
     },
     '&[data-soui-position^="top"]': {
-      marginTop: (tooltip_arrowGap - 2) * -1,
+      marginTop: (arrowGap - 2) * -1,
       '&::before': {
         bottom: '0',
         transform: 'translate(0, 50%) rotate(135deg)',
@@ -25458,63 +25680,79 @@ var tooltipStyle = objectSpread2_default()(objectSpread2_default()({}, tooltip_a
         right: '0',
         margin: 'auto'
       },
+      '&[dir=ltr]::before': {
+        transform: 'translate(0, 50%) rotate(135deg)'
+      },
+      '&[dir=rtl]::before': {
+        transform: 'translate(0, 50%) rotate(-135deg)'
+      },
       '&::after': {
-        bottom: tooltip_arrowGap * -1,
+        bottom: arrowGap * -1,
         left: '0',
         right: '0',
         content: '" "',
         display: 'block',
-        height: tooltip_arrowGap,
+        height: arrowGap,
         position: 'absolute'
       }
     },
     '&[data-soui-position^="left"]': {
-      marginLeft: (tooltip_arrowGap - 2) * -1,
+      marginLeft: (arrowGap - 2) * -1,
       '&[dir=ltr]': {
-        marginLeft: (tooltip_arrowGap - 2) * -1
+        marginLeft: (arrowGap - 2) * -1
       },
       '&[dir=rtl]': {
-        marginRight: (tooltip_arrowGap - 2) * -1
+        marginRight: (arrowGap - 2) * -1
       },
       '&::before': {
         right: 0,
-        transform: 'translate(50%, 0) rotate(45deg)',
         top: '0',
         bottom: '0',
         margin: 'auto'
       },
+      '&[dir=ltr]::before': {
+        transform: 'translate(50%, 0) rotate(45deg)'
+      },
+      '&[dir=rtl]::before': {
+        transform: 'translate(50%, 0) rotate(135deg)'
+      },
       '&::after': {
-        left: tooltip_arrowGap * -1,
+        left: arrowGap * -1,
         top: '0',
         bottom: '0',
         content: '" "',
         display: 'block',
-        width: tooltip_arrowGap,
+        width: arrowGap,
         position: 'absolute'
       }
     },
     '&[data-soui-position^="right"]': {
-      marginLeft: tooltip_arrowGap - 2,
+      marginLeft: arrowGap - 2,
       '&[dir=ltr]': {
-        marginLeft: tooltip_arrowGap - 2
+        marginLeft: arrowGap - 2
       },
       '&[dir=rtl]': {
-        marginRight: tooltip_arrowGap - 2
+        marginRight: arrowGap - 2
       },
       '&::before': {
         left: '0',
-        transform: 'translate(-50%, 0) rotate(-135deg)',
         top: '0',
         bottom: '0',
         margin: 'auto'
       },
+      '&[dir=ltr]::before': {
+        transform: 'translate(-50%, 0) rotate(-135deg)'
+      },
+      '&[dir=rtl]::before': {
+        transform: 'translate(-50%, 0) rotate(-45deg)'
+      },
       '&::after': {
-        left: tooltip_arrowGap * -1,
+        left: arrowGap * -1,
         top: '0',
         bottom: '0',
         content: '" "',
         display: 'block',
-        width: tooltip_arrowGap,
+        width: arrowGap,
         position: 'absolute'
       }
     },
@@ -25890,16 +26128,35 @@ var treeStyle = {
     cursor: 'pointer',
     padding: "0 ".concat(src.treePaddingX),
     borderRadius: src.treeContentBorderRadius,
+    position: 'relative',
+    '&[data-expanded="true"]::before': {
+      content: '""',
+      position: 'absolute',
+      top: 24,
+      bottom: 0,
+      left: -12,
+      width: 1,
+      background: '#ebebeb'
+    },
+    '&[dir=ltr][data-expanded="true"]::before': {
+      left: -12
+    },
+    '&[dir=rtl][data-expanded="true"]::before': {
+      right: -12
+    },
     '&[data-active="true"]': {
       background: src.treeContentActiveBackgroundColor,
       '& $text': {
         color: src.treeContentActiveFontColor
       }
     },
-    '&[data-disabled="true"]': {
-      cursor: 'not-allowed'
-    },
-    '&:hover:not([data-active="true"]):not([data-disabled="true"])': {
+    // '&[data-disabled="true"]': {
+    //   cursor: 'not-allowed',
+    // },
+    // '&:hover:not([data-active="true"]):not([data-disabled="true"])': {
+    //   background: Token.treeContentHoverBackgroundColor,
+    // },
+    '&:hover:not([data-active="true"])': {
       background: src.treeContentHoverBackgroundColor
     }
   },
@@ -25917,9 +26174,9 @@ var treeStyle = {
     paddingTop: src.treeTextPaddingY,
     paddingBottom: src.treeTextPaddingY
   },
-  textDisabled: {
-    color: src.treeItemDisabledFontColor
-  },
+  // textDisabled: {
+  //   color: Token.treeItemDisabledFontColor,
+  // },
   list: {},
   node: {
     position: 'relative',
@@ -26231,7 +26488,7 @@ var treeSelectStyle = objectSpread2_default()(objectSpread2_default()({
   },
   compressedWrapper: {
     width: 0,
-    overflow: 'hidden'
+    overflow: 'auto'
   },
   controlMouse: {
     '& $optionInner:hover': {
@@ -26350,6 +26607,7 @@ var treeSelectStyle = objectSpread2_default()(objectSpread2_default()({
     }
   },
   tag: {
+    flexShrink: 0,
     '&$tag + &$tag': {
       marginLeft: 0
     },
@@ -26362,6 +26620,10 @@ var treeSelectStyle = objectSpread2_default()(objectSpread2_default()({
       marginRight: 0
     }
   },
+  tagOnly: {
+    flexShrink: 1,
+    minWidth: 42
+  },
   space: {
     marginTop: src.treeSelectPlaceholderMarginY,
     marginBottom: src.treeSelectPlaceholderMarginY
@@ -27824,7 +28086,7 @@ var usePositionStyle = function usePositionStyle(config) {
 // EXTERNAL MODULE: external {"root":"ReactDOM","commonjs2":"react-dom","commonjs":"react-dom","amd":"react-dom"}
 var external_root_ReactDOM_commonjs2_react_dom_commonjs_react_dom_amd_react_dom_ = __webpack_require__(5156);
 var external_root_ReactDOM_commonjs2_react_dom_commonjs_react_dom_amd_react_dom_default = /*#__PURE__*/__webpack_require__.n(external_root_ReactDOM_commonjs2_react_dom_commonjs_react_dom_amd_react_dom_);
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@shined+reactive@0.1.2_react@18.2.0/node_modules/@shined/reactive/dist/chunk-LM54EYM4.js
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@shined+reactive@0.1.3-alpha.0_react@18.2.0/node_modules/@shined/reactive/dist/chunk-IP2WBRUX.js
 
 // src/vanilla/ref.ts
 function _array_like_to_array(arr, len) {
@@ -27904,16 +28166,16 @@ function hasRef(k) {
 var SNAPSHOT = Symbol("SNAPSHOT");
 var LISTENERS = Symbol("LISTENERS");
 var REACTIVE = Symbol("REACTIVE");
-var chunk_LM54EYM4_isProduction = (/* unused pure expression or super */ null && ("production" === "production"));
+var chunk_IP2WBRUX_isProduction = (/* unused pure expression or super */ null && ("production" === "production"));
 var hasOwn = Object.prototype.hasOwnProperty;
-var chunk_LM54EYM4_isObject = function isObject(x) {
+var chunk_IP2WBRUX_isObject = function isObject(x) {
   return helpers_typeof(x) === "object" && x !== null;
 };
 var createObjectFromPrototype = function createObjectFromPrototype(target) {
   return Array.isArray(target) ? [] : Object.create(Object.getPrototypeOf(target));
 };
 var canProxy = function canProxy(x) {
-  return chunk_LM54EYM4_isObject(x) && !hasRef(x) && (Array.isArray(x) || !(Symbol.iterator in x)) && !_instanceof(x, WeakMap) && !_instanceof(x, WeakSet) && !_instanceof(x, Error) && !_instanceof(x, Number) && !_instanceof(x, Date) && !_instanceof(x, String) && !_instanceof(x, RegExp) && !_instanceof(x, ArrayBuffer);
+  return chunk_IP2WBRUX_isObject(x) && !hasRef(x) && (Array.isArray(x) || !(Symbol.iterator in x)) && !_instanceof(x, WeakMap) && !_instanceof(x, WeakSet) && !_instanceof(x, Error) && !_instanceof(x, Number) && !_instanceof(x, Date) && !_instanceof(x, String) && !_instanceof(x, RegExp) && !_instanceof(x, ArrayBuffer);
 };
 var numberReg = /^\d+$/;
 var propertyKeysToPath = function propertyKeysToPath(keys) {
@@ -27957,7 +28219,7 @@ var get = function get(object, path) {
   }
   return object;
 };
-var chunk_LM54EYM4_shallowEqual = function shallowEqual(objA, objB) {
+var chunk_IP2WBRUX_shallowEqual = function shallowEqual(objA, objB) {
   if (Object.is(objA, objB)) {
     return true;
   }
@@ -28105,7 +28367,7 @@ function proxy(initState) {
       var preValue = Reflect.get(target, prop, receiver);
       var childListeners = preValue === null || preValue === void 0 ? void 0 : preValue[LISTENERS];
       childListeners && childListeners.delete(popPropListener(prop));
-      if (!chunk_LM54EYM4_isObject(value) && Object.is(preValue, value)) {
+      if (!chunk_IP2WBRUX_isObject(value) && Object.is(preValue, value)) {
         return true;
       }
       var nextValue = value;
@@ -28178,7 +28440,7 @@ function subscribe(proxyState, callback, notifyInSync) {
   };
 }
 // src/vanilla/create.ts
-function chunk_LM54EYM4_create(initState, options) {
+function chunk_IP2WBRUX_create(initState, options) {
   options !== null && options !== void 0 ? options : options = {};
   var proxyState = proxy(initState);
   var restore = function restore() {
@@ -28275,14 +28537,14 @@ function produce(obj, draftHandler) {
   return snapshot;
 }
 
-// EXTERNAL MODULE: ../../node_modules/.pnpm/use-sync-external-store@1.2.0_react@18.2.0/node_modules/use-sync-external-store/shim/with-selector.js
-var with_selector = __webpack_require__(314);
-;// CONCATENATED MODULE: ../../node_modules/.pnpm/@shined+reactive@0.1.2_react@18.2.0/node_modules/@shined/reactive/dist/index.js
+// EXTERNAL MODULE: ../../node_modules/.pnpm/use-sync-external-store@1.2.2_react@18.2.0/node_modules/use-sync-external-store/shim/with-selector.js
+var with_selector = __webpack_require__(6523);
+;// CONCATENATED MODULE: ../../node_modules/.pnpm/@shined+reactive@0.1.3-alpha.0_react@18.2.0/node_modules/@shined/reactive/dist/index.js
 
 // src/react/use-snapshot.ts
 
 
-var useSnapshot = function useSnapshot(proxyState, selectorOrOption, maybeOptions) {
+function useSnapshot(proxyState, selectorOrOption, maybeOptions) {
   if (selectorOrOption && typeof selectorOrOption !== "function") {
     maybeOptions = selectorOrOption;
     selectorOrOption = void 0;
@@ -28291,7 +28553,7 @@ var useSnapshot = function useSnapshot(proxyState, selectorOrOption, maybeOption
     tmp = _ref.sync,
     updateInSync = tmp === void 0 ? false : tmp,
     _ref_isEqual = _ref.isEqual,
-    isEqual = _ref_isEqual === void 0 ? chunk_LM54EYM4_shallowEqual : _ref_isEqual;
+    isEqual = _ref_isEqual === void 0 ? chunk_IP2WBRUX_shallowEqual : _ref_isEqual;
   var _subscribe = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useCallback)(function (callback) {
     return subscribe(proxyState, callback, updateInSync);
   }, [proxyState, updateInSync]);
@@ -28303,10 +28565,10 @@ var useSnapshot = function useSnapshot(proxyState, selectorOrOption, maybeOption
   };
   var snapshot = (0,with_selector.useSyncExternalStoreWithSelector)(_subscribe, _getSnapshot, _getSnapshot, selector, isEqual);
   return snapshot;
-};
+}
 // src/react/create-with-hooks.ts
-var createWithHooks = function createWithHooks(initState, options) {
-  var store = chunk_LM54EYM4_create(initState, options);
+function createWithHooks(initState, options) {
+  var store = chunk_IP2WBRUX_create(initState, options);
   var _useSnapshot = function _useSnapshot(selectorOrOption, maybeOptions) {
     if (selectorOrOption && typeof selectorOrOption !== "function") {
       maybeOptions = selectorOrOption;
@@ -28318,7 +28580,7 @@ var createWithHooks = function createWithHooks(initState, options) {
     useSnapshot: _useSnapshot
   });
   return store;
-};
+}
 
 ;// CONCATENATED MODULE: ../base/src/config/index.ts
 /* provided dependency */ var process = __webpack_require__(147);
@@ -28329,9 +28591,9 @@ var _process;
 
 var processEnv = typeof process !== 'undefined' ? (_process = process) === null || process === void 0 ? void 0 : ({"NODE_ENV":"production","PUBLIC_PATH":"/"}) : {};
 var src_config_config = {
-  prefix: 'so',
+  prefix: 'soui',
   locale: processEnv.LOCALE || 'en-US',
-  delay: 0,
+  delay: 400,
   trim: undefined,
   spin: 'ring',
   direction: 'ltr',
@@ -28359,7 +28621,7 @@ var config_setConfig = function setConfig(option) {
     var _Object$entries$_i = slicedToArray_default()(_Object$entries[_i], 2),
       key = _Object$entries$_i[0],
       value = _Object$entries$_i[1];
-    if (value && key in src_config_config) {
+    if (key in src_config_config) {
       var k = key;
       // @ts-ignore
       state.mutate[k] = value;
@@ -28565,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]);
 }
@@ -29272,7 +29537,7 @@ var useButton = function useButton() {
     return mergedEventHandlers;
   };
   return {
-    disabled: disabled,
+    disabled: disabled || loading,
     getAnchorProps: getAnchorProps,
     getButtonProps: getButtonProps,
     getSpaceChildren: getSpaceChildren
@@ -29967,6 +30232,58 @@ var ButtonGroup = function ButtonGroup(props) {
 src_button_button_0.displayName = 'ShineoutButton';
 src_button_button_0.Group = src_button_group;
 /* harmony default export */ var src_button_0 = (src_button_button_0);
+;// CONCATENATED MODULE: ../hooks/src/common/use-unmounted-ref/index.ts
+
+function useUnmountedRef() {
+  var unmountedRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(false);
+  (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
+    unmountedRef.current = false;
+    return function () {
+      unmountedRef.current = true;
+    };
+  }, []);
+  return unmountedRef;
+}
+/* harmony default export */ var use_unmounted_ref = ((/* unused pure expression or super */ null && (useUnmountedRef)));
+;// CONCATENATED MODULE: ../hooks/src/common/use-safe-state/index.ts
+
+
+
+
+function useSafeState(initialState) {
+  var unmountedRef = useUnmountedRef();
+  var _useState = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(initialState),
+    _useState2 = slicedToArray_default()(_useState, 2),
+    state = _useState2[0],
+    setState = _useState2[1];
+  var setCurrentState = usePersistFn(function (currentState) {
+    if (!unmountedRef.current) {
+      setState(currentState);
+    }
+  });
+  return [state, setCurrentState];
+}
+/* harmony default export */ var use_safe_state = ((/* unused pure expression or super */ null && (useSafeState)));
+;// CONCATENATED MODULE: ../hooks/src/common/use-render/index.ts
+
+
+
+
+function useRender(callback) {
+  var _useSafeState = useSafeState(undefined),
+    _useSafeState2 = slicedToArray_default()(_useSafeState, 2),
+    count = _useSafeState2[0],
+    setCount = _useSafeState2[1];
+  (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
+    if (callback && count !== undefined) callback();
+  }, [count]);
+  return usePersistFn(function () {
+    return setCount(function (count) {
+      return ((count || 0) + 1) % 1000000;
+    });
+  });
+}
+/* harmony default export */ var use_render = (useRender);
 ;// CONCATENATED MODULE: ../hooks/src/common/use-drag-mock/use-drag-mock.ts
 
 
@@ -30247,6 +30564,7 @@ var Card = function Card(props) {
     style = _props$style === void 0 ? {} : _props$style;
   var cardClasses = (_props$jssStyle = props.jssStyle) === null || _props$jssStyle === void 0 || (_props$jssStyle$card = _props$jssStyle.card) === null || _props$jssStyle$card === void 0 ? void 0 : _props$jssStyle$card.call(_props$jssStyle);
   var panelRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
+  var forceUpdate = useRender();
   var _useRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)({
       id: undefined
     }),
@@ -30266,9 +30584,12 @@ var Card = function Card(props) {
     activeId = _useContext.activeId,
     getDefaultId = _useContext.getDefaultId,
     onActiveChange = _useContext.onActiveChange;
-  if (context.id === undefined) {
-    context.id = getDefaultId();
-  }
+  (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
+    if (context.id === undefined) {
+      context.id = getDefaultId();
+      forceUpdate();
+    }
+  }, []);
   var id = (_props$id = props.id) !== null && _props$id !== void 0 ? _props$id : context.id;
   var collapsible = props.collapsible || inAccordion;
   var getCollpased = function getCollpased() {
@@ -30358,6 +30679,7 @@ var card_jssStyle = {
 
 
 
+
 var CardHeader = function CardHeader(props) {
   var _props$jssStyle, _props$jssStyle$card;
   var align = props.align;
@@ -30378,12 +30700,24 @@ var CardHeader = function CardHeader(props) {
       })
     });
   };
-  var headerContentClassName = classnames_default()(cardClasses === null || cardClasses === void 0 ? void 0 : cardClasses.headerContent, align === 'center' && (cardClasses === null || cardClasses === void 0 ? void 0 : cardClasses.center), align === 'right' && (cardClasses === null || cardClasses === void 0 ? void 0 : cardClasses.right));
-  return /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
+  var alignClass = classnames_default()(align === 'center' && (cardClasses === null || cardClasses === void 0 ? void 0 : cardClasses.center), align === 'right' && (cardClasses === null || cardClasses === void 0 ? void 0 : cardClasses.right));
+  var headerContentClassName = classnames_default()(cardClasses === null || cardClasses === void 0 ? void 0 : cardClasses.headerContent, alignClass);
+  var commonHeaderProps = {
     onMouseDown: handleDragMouseDown,
     onClick: onCollapse,
-    className: classnames_default()(props.className, cardClasses === null || cardClasses === void 0 ? void 0 : cardClasses.header),
-    style: props.style,
+    style: props.style
+  };
+  if (!props.extra && !collapsible) {
+    var simpleHeaderClassName = classnames_default()(cardClasses === null || cardClasses === void 0 ? void 0 : cardClasses.header, cardClasses === null || cardClasses === void 0 ? void 0 : cardClasses.simpleHeader, alignClass, props.className);
+    return /*#__PURE__*/(0,jsx_runtime.jsx)("div", objectSpread2_default()(objectSpread2_default()({
+      className: simpleHeaderClassName
+    }, commonHeaderProps), {}, {
+      children: props.children
+    }));
+  }
+  return /*#__PURE__*/(0,jsx_runtime.jsxs)("div", objectSpread2_default()(objectSpread2_default()({
+    className: classnames_default()(props.className, cardClasses === null || cardClasses === void 0 ? void 0 : cardClasses.header)
+  }, commonHeaderProps), {}, {
     children: [renderIndicator(), /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
       className: headerContentClassName,
       children: props.children
@@ -30391,7 +30725,7 @@ var CardHeader = function CardHeader(props) {
       className: cardClasses === null || cardClasses === void 0 ? void 0 : cardClasses.headerExtra,
       children: props.extra
     })]
-  });
+  }));
 };
 /* harmony default export */ var card_header = (CardHeader);
 ;// CONCATENATED MODULE: ./src/card/header.tsx
@@ -30579,7 +30913,8 @@ var ModalSubmit = function ModalSubmit(props) {
 
 
 var submit_jssStyle = {
-  button: useButtonStyle
+  button: useButtonStyle,
+  spin: useSpinStyle
 };
 var Submit = function Submit(props) {
   return /*#__PURE__*/(0,jsx_runtime.jsx)(modal_submit, objectSpread2_default()({
@@ -30612,58 +30947,6 @@ CardComp.Footer = FooterComp;
 CardComp.Accordion = AccordionComp;
 CardComp.Submit = SubmitComp;
 /* harmony default export */ var src_card_0 = (CardComp);
-;// CONCATENATED MODULE: ../hooks/src/common/use-unmounted-ref/index.ts
-
-function useUnmountedRef() {
-  var unmountedRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(false);
-  (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
-    unmountedRef.current = false;
-    return function () {
-      unmountedRef.current = true;
-    };
-  }, []);
-  return unmountedRef;
-}
-/* harmony default export */ var use_unmounted_ref = ((/* unused pure expression or super */ null && (useUnmountedRef)));
-;// CONCATENATED MODULE: ../hooks/src/common/use-safe-state/index.ts
-
-
-
-
-function useSafeState(initialState) {
-  var unmountedRef = useUnmountedRef();
-  var _useState = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(initialState),
-    _useState2 = slicedToArray_default()(_useState, 2),
-    state = _useState2[0],
-    setState = _useState2[1];
-  var setCurrentState = usePersistFn(function (currentState) {
-    if (!unmountedRef.current) {
-      setState(currentState);
-    }
-  });
-  return [state, setCurrentState];
-}
-/* harmony default export */ var use_safe_state = ((/* unused pure expression or super */ null && (useSafeState)));
-;// CONCATENATED MODULE: ../hooks/src/common/use-render/index.ts
-
-
-
-
-function useRender(callback) {
-  var _useSafeState = useSafeState(undefined),
-    _useSafeState2 = slicedToArray_default()(_useSafeState, 2),
-    count = _useSafeState2[0],
-    setCount = _useSafeState2[1];
-  (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
-    if (callback && count !== undefined) callback();
-  }, [count]);
-  return usePersistFn(function () {
-    return setCount(function (count) {
-      return ((count || 0) + 1) % 1000000;
-    });
-  });
-}
-/* harmony default export */ var use_render = (useRender);
 ;// CONCATENATED MODULE: ../base/src/card-group/card-group-context.ts
 "use client";
 
@@ -32051,7 +32334,7 @@ var Popover = function Popover(props) {
       }
     };
   });
-  var noRender = !open && !context.rendered;
+  var noRender = props.lazy && !open && !context.rendered;
   if (!targetRef.current || !children || noRender) {
     return /*#__PURE__*/(0,jsx_runtime.jsx)("noscript", {
       ref: function ref(el) {
@@ -32080,18 +32363,22 @@ var Popover = function Popover(props) {
     popupGap: 0,
     destroy: destroy,
     zIndex: zIndex,
-    children: /*#__PURE__*/(0,jsx_runtime.jsxs)("div", objectSpread2_default()(objectSpread2_default()({
-      className: classnames_default()(className, popoverStyle === null || popoverStyle === void 0 ? void 0 : popoverStyle.wrapper, open && (popoverStyle === null || popoverStyle === void 0 ? void 0 : popoverStyle.wrapperOpen)),
+    adjust: props.adjust,
+    lazy: props.lazy,
+    children: /*#__PURE__*/(0,jsx_runtime.jsxs)("div", objectSpread2_default()(objectSpread2_default()(objectSpread2_default()({
+      className: classnames_default()(className, popoverStyle === null || popoverStyle === void 0 ? void 0 : popoverStyle.wrapper, open && (popoverStyle === null || popoverStyle === void 0 ? void 0 : popoverStyle.wrapperOpen), !showArrow && (popoverStyle === null || popoverStyle === void 0 ? void 0 : popoverStyle.hideArrow)),
       style: colorStyle
     }, getDataAttribute({
       position: position,
       type: type
-    })), {}, {
+    })), props.attributes), {}, {
       ref: popupRef,
       onMouseLeave: events.onMouseLeave,
+      onMouseEnter: events.onMouseEnter,
       dir: config.direction,
       children: [showArrow && /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
-        className: popoverStyle === null || popoverStyle === void 0 ? void 0 : popoverStyle.arrow
+        className: classnames_default()(popoverStyle === null || popoverStyle === void 0 ? void 0 : popoverStyle.arrow, props.arrowClass),
+        dir: config.direction
       }), /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
         style: style,
         className: classnames_default()(popoverStyle === null || popoverStyle === void 0 ? void 0 : popoverStyle.content, (typeof childrened === 'string' || props.useTextStyle) && (popoverStyle === null || popoverStyle === void 0 ? void 0 : popoverStyle.text)),
@@ -32505,6 +32792,7 @@ var useInputCommon = function useInputCommon(props0) {
     if (!res) return null;
     var isError = res instanceof Error;
     var text = isError ? res.message : res;
+    if (!isError && !focused) return null;
     return /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
       style: {
         minWidth: 'auto'
@@ -32557,7 +32845,7 @@ var useInputCommon = function useInputCommon(props0) {
 
 
 var input_Input = function Input(props) {
-  var _ref, _commonProps$trim;
+  var _ref, _commonProps$trim, _inputFormatProps$val;
   var commonProps = use_input_common(props);
   var config = useConfig();
   var inputFormatParams = {
@@ -32577,7 +32865,7 @@ var input_Input = function Input(props) {
   }, inputFormatParams));
   var forwardProps = removeProps(commonProps, objectSpread2_default()({}, inputFormatParams));
   return /*#__PURE__*/(0,jsx_runtime.jsx)(simple_input, objectSpread2_default()(objectSpread2_default()(objectSpread2_default()({}, forwardProps), inputFormatProps), {}, {
-    value: inputFormatProps.value || '',
+    value: (_inputFormatProps$val = inputFormatProps.value) !== null && _inputFormatProps$val !== void 0 ? _inputFormatProps$val : '',
     hasSuffix: !!props.suffix
   }));
 };
@@ -34503,6 +34791,11 @@ var useFilter = function useFilter(props) {
 
 
 
+function use_tree_toArray(value) {
+  if (!value) return [];
+  if (!Array.isArray(value)) return [value];
+  return value;
+}
 var MODE = {
   /**
    * 返回全选数据，包含父节点和子节点
@@ -34562,7 +34855,6 @@ var useTree = function useTree(props) {
       valueMap: new Map(),
       updateMap: new Map(),
       unmatchedValueMap: new Map(),
-      disabled: false,
       value: undefined,
       data: [],
       cachedValue: [],
@@ -34652,14 +34944,14 @@ var useTree = function useTree(props) {
   var getPath = function getPath(id) {
     return context.pathMap.get(id);
   };
-  var getDisabled = function getDisabled() {
+  var getDisabled = usePersistFn(function () {
     if (isFunc(disabledProps)) {
       return disabledProps;
     }
     return function () {
-      return !!disabledProps;
+      return false;
     };
-  };
+  });
   var getChecked = function getChecked(id) {
     var value = get(id);
     var checked = value === 1;
@@ -34714,8 +35006,8 @@ var useTree = function useTree(props) {
       // 制作 data mapping
       context.dataMap.set(id, item);
       var _isDisabled = !!disabled;
-      if (_isDisabled === false && isFunc(context.disabled)) {
-        _isDisabled = context.disabled(item);
+      if (_isDisabled === false) {
+        _isDisabled = getDisabled()(item);
       }
       var indexPath = [].concat(toConsumableArray_default()(index), [i]);
       ids.push(id);
@@ -34790,16 +35082,19 @@ var useTree = function useTree(props) {
     return checked;
   };
   var setValue = function setValue(value) {
-    context.value = value;
-    if (value && value !== context.cachedValue) {
+    context.value = use_tree_toArray(value);
+    if (value !== context.cachedValue) {
       initValue();
     }
     setUnmatedValue();
   };
   var isDisabled = function isDisabled(id) {
-    var node = context.pathMap.get(id);
-    if (node) return node.isDisabled;
-    return false;
+    if (isFunc(disabledProps)) {
+      var node = context.pathMap.get(id);
+      if (node) return node.isDisabled;
+      return false;
+    }
+    return !!disabledProps;
   };
   var checkStatusStack = function checkStatusStack(stack, defaultStatus) {
     if (!stack || stack.length <= 0) return defaultStatus;
@@ -34819,10 +35114,9 @@ var useTree = function useTree(props) {
     context.dataMap = new Map();
     context.valueMap = new Map();
     context.unmatchedValueMap = new Map();
-    context.disabled = getDisabled();
-    context.data = data;
+    context.data = use_tree_toArray(data);
     if (!data) return;
-    initData(data, []);
+    initData(context.data, []);
     initValue();
     setValue(prevValue);
   };
@@ -35535,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,
@@ -35705,6 +36000,7 @@ var tag_excluded = ["jssStyle", "className", "type", "color", "size", "disabled"
 
 
 
+
 var tag_Done = 2;
 var tag_Pendding = 1;
 var Tag = function Tag(props) {
@@ -35766,15 +36062,12 @@ 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)("span", {
-          className: tagStyle.container,
-          children: children
-        })
+        children: wrapSpan(children)
       });
     }
-    return /*#__PURE__*/(0,jsx_runtime.jsx)("span", {
+    return /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
       className: classnames_default()(tagStyle.wrapper, inlineStyle && tagStyle.inline),
-      children: children
+      children: wrapSpan(children)
     });
   };
   var renderInput = function renderInput() {
@@ -35833,7 +36126,6 @@ Tag.Input = tag_input;
 
 
 
-
 function getResetMore(onFilter, container, doms) {
   if (!container || !doms || !doms.length) return -1;
   var items = Array.from(doms);
@@ -35923,14 +36215,26 @@ var More = function More(props) {
     });
     itemsLength = after.length;
   }
-  if (after && after.length > 0) {
-    after = external_root_React_commonjs2_react_commonjs_react_amd_react_.Children.map(after, function (item) {
-      return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().cloneElement(item, objectSpread2_default()(objectSpread2_default()({}, item.props), {}, {
+  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: {
-          opcacity: 1
-        }
-      }));
-    }) || after;
+          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", {
@@ -36021,6 +36325,7 @@ var result_Result = function Result(props) {
     _useState4 = slicedToArray_default()(_useState3, 2),
     shouldResetMore = _useState4[0],
     setShouldResetMore = _useState4[1];
+  var render = useRender();
   var resultRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
   var prevMore = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(more);
   var showInput = allowOnFilter;
@@ -36084,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');
   };
@@ -36125,10 +36431,7 @@ var result_Result = function Result(props) {
     return /*#__PURE__*/(0,jsx_runtime.jsx)(base_src_tag_tag, objectSpread2_default()(objectSpread2_default()({
       disabled: isDisabled,
       size: size,
-      style: {
-        opacity: more === index ? 0 : 1
-      },
-      className: classnames_default()(styles.tag, resultClassName),
+      className: classnames_default()(styles.tag, more === 1 && styles.tagOnly, resultClassName),
       closable: closeable && 'only',
       onClose: closeable && handleClose,
       onClick: handleClick,
@@ -36246,11 +36549,15 @@ var result_Result = function Result(props) {
     }
     mounted.current = true;
   }, [focus]);
-  (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
+  (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useLayoutEffect)(function () {
     handleResetMore();
   }, [valueProp, data]);
   (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useLayoutEffect)(function () {
-    if (shouldResetMore && more === -1 && compressed && resultRef.current && (props.value || [].length)) {
+    // datum.getDataByValues(value); 需要等待 useTree useEffect  执行完毕 才能获取到
+    render();
+  }, [data]);
+  (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useLayoutEffect)(function () {
+    if (shouldResetMore && more === -1 && compressed && resultRef.current && (props.value || []).length) {
       var tagClassName = ".".concat(styles.tag.split(' ')[0]);
       if (shouldResetMore && result_isArray(value) && (value || []).length) {
         var newMore = getResetMore(showInput, resultRef.current, resultRef.current.querySelectorAll(tagClassName));
@@ -36260,7 +36567,7 @@ var result_Result = function Result(props) {
       } else {
         setShouldResetMore(false);
       }
-    } else {
+    } else if (shouldResetMore) {
       setShouldResetMore(false);
     }
   }, [shouldResetMore]);
@@ -36936,10 +37243,20 @@ var useFormFunc = function useFormFunc() {
 ;// CONCATENATED MODULE: ../hooks/src/components/use-form/use-form-flow/use-form-datum.tsx
 
 
+
+
+
 var useFormDatum = function useFormDatum() {
   var formFunc = useFormFunc();
+  var set = usePersistFn(function (vals, value) {
+    if (typeof_default()(vals) === 'object') {
+      formFunc === null || formFunc === void 0 || formFunc.setValue(vals);
+    } else {
+      formFunc === null || formFunc === void 0 || formFunc.setValue(defineProperty_default()({}, vals, value));
+    }
+  });
   var func = use_latest_obj({
-    set: formFunc === null || formFunc === void 0 ? void 0 : formFunc.setValue,
+    set: set,
     get: formFunc === null || formFunc === void 0 ? void 0 : formFunc.getValue
   });
   var datum = formFunc ? func : undefined;
@@ -37175,6 +37492,7 @@ function wrapFormError(error) {
 
 
 
+
 function getRule(rule, props) {
   var po = props;
   var rulePo = rule;
@@ -37196,7 +37514,7 @@ function getRule(rule, props) {
     max: max,
     args: args
   });
-  po.message = typeof message === 'function' ? message(po) : message;
+  po.message = typeof message === 'function' ? message(po) : substitute(message, po);
   var cb = function cb() {};
   if (func) {
     cb = function cb(value, formData, callback) {
@@ -40180,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({
@@ -40193,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);
@@ -40205,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;
@@ -40305,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);
       })
@@ -42544,10 +42869,9 @@ var Modal = function Modal(props) {
     return function () {
       var _props$shouldDestroy2;
       (_props$shouldDestroy2 = props.shouldDestroy) === null || _props$shouldDestroy2 === void 0 || _props$shouldDestroy2.call(props, true);
-      if (props.autoShow) {
-        var _props$onClose2;
-        (_props$onClose2 = props.onClose) === null || _props$onClose2 === void 0 || _props$onClose2.call(props);
-      }
+      // if (props.autoShow) {
+      //   props.onClose?.();
+      // }
       if (context.isMask) {
         context.isMask = false;
         hasMask = false;
@@ -42571,8 +42895,9 @@ var Modal = function Modal(props) {
   };
   var renderHeader = function renderHeader() {
     var showCloseIcon = maskCloseAble === null || !!maskCloseAble;
+    var isEmptyTitle = !props.title && props.title !== 0;
     return /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
-      className: modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.header,
+      className: classnames_default()(modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.header, isEmptyTitle && (modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.headerEmptyTitle)),
       onMouseDown: props.moveable ? moveInfo.handleMouseDown : undefined,
       children: [renderIcon(), /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
         className: modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.headerTitle,
@@ -42779,6 +43104,7 @@ var method = function method(type, jssStyle) {
       children: options.content || options.children
     }));
     ReactRender(Content, root);
+    return destroyModal;
   };
 };
 /* harmony default export */ var modal_func = ({
@@ -42797,19 +43123,34 @@ var modal_Modal = function Modal(props) {
   var _useContainer = use_container({
       container: props.container
     }),
-    getRoot = _useContainer.getRoot;
+    getRoot = _useContainer.getRoot,
+    unMount = _useContainer.unMount;
   var _useState = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(true),
     _useState2 = slicedToArray_default()(_useState, 2),
     canDestroy = _useState2[0],
     seCanDestroy = _useState2[1];
-  var root = getRoot();
-  if (props.destroy && !props.visible && canDestroy) {
+  var _useRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)({
+      rendered: false
+    }),
+    context = _useRef.current;
+  var destroyed = props.destroy && !props.visible && canDestroy;
+  (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
+    if (destroyed) {
+      unMount();
+    }
+  }, [destroyed]);
+  if (destroyed) {
+    return null;
+  }
+  if (!context.rendered && !props.visible) {
     return null;
   }
+  context.rendered = true;
   var Content = /*#__PURE__*/(0,jsx_runtime.jsx)(modal_content, objectSpread2_default()(objectSpread2_default()({}, props), {}, {
     shouldDestroy: seCanDestroy,
     autoShow: false
   }));
+  var root = getRoot();
   if (!root) return null;
   return /*#__PURE__*/external_root_ReactDOM_commonjs2_react_dom_commonjs_react_dom_amd_react_dom_default().createPortal(Content, root);
 };
@@ -43566,6 +43907,7 @@ var textarea_Textarea = function Textarea(props0) {
     if (!res) return null;
     var isError = res instanceof Error;
     var text = isError ? res.message : res;
+    if (!isError && !focused) return null;
     return /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
       style: {
         minWidth: 'auto'
@@ -44092,7 +44434,7 @@ var useForm = function useForm(props) {
       removeArr: new Set(),
       names: new Set(),
       submitLock: false,
-      value: props.value || emptyObj,
+      value: deepClone(props.value) || emptyObj,
       errors: {},
       serverErrors: {},
       lastValue: props.value || emptyObj,
@@ -44419,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 {
@@ -44435,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);
@@ -44663,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
@@ -45022,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
   });
@@ -45074,13 +45423,9 @@ function util_createStyle(text, id) {
   if (!is_isBrowser()) {
     return;
   }
-  var style = document.head.querySelector("#".concat(id));
-  if (style) {
-    return;
-  }
-  style = document.createElement('style');
+  var style = document.createElement('style');
   style.type = 'text/css';
-  style.id = id;
+  style.setAttribute('data-id', id);
   style.innerHTML = text;
   document.head.appendChild(style);
 }
@@ -46423,7 +46768,9 @@ var input_input_Input = function Input(props) {
   });
   var _useWithFormConfig = use_with_form_config(props),
     size = _useWithFormConfig.size,
-    disabled = _useWithFormConfig.disabled;
+    disabled = _useWithFormConfig.disabled,
+    status = _useWithFormConfig.status,
+    error = _useWithFormConfig.error;
   var getProps = function getProps(child) {
     ref.current.propsMap.set(child, {
       onFocus: child.props.onFocus,
@@ -46455,7 +46802,7 @@ var input_input_Input = function Input(props) {
     className = props.className,
     width = props.width,
     style = props.style;
-  var rootClass = classnames_default()(className, inputStyle === null || inputStyle === void 0 ? void 0 : inputStyle.group, size === 'small' && (inputStyle === null || inputStyle === void 0 ? void 0 : inputStyle.groupSmall), size === 'large' && (inputStyle === null || inputStyle === void 0 ? void 0 : inputStyle.groupLarge), !!disabled && (inputStyle === null || inputStyle === void 0 ? void 0 : inputStyle.groupDisabled), !!focus && (inputStyle === null || inputStyle === void 0 ? void 0 : inputStyle.groupFocus));
+  var rootClass = classnames_default()(className, inputStyle === null || inputStyle === void 0 ? void 0 : inputStyle.group, size === 'small' && (inputStyle === null || inputStyle === void 0 ? void 0 : inputStyle.groupSmall), size === 'large' && (inputStyle === null || inputStyle === void 0 ? void 0 : inputStyle.groupLarge), !!disabled && (inputStyle === null || inputStyle === void 0 ? void 0 : inputStyle.groupDisabled), !!focus && (inputStyle === null || inputStyle === void 0 ? void 0 : inputStyle.groupFocus), (status === 'error' || error) && (inputStyle === null || inputStyle === void 0 ? void 0 : inputStyle.groupError));
   return /*#__PURE__*/(0,jsx_runtime.jsx)("div", objectSpread2_default()(objectSpread2_default()({}, getDataAttribute({
     role: 'input-group'
   })), {}, {
@@ -46739,7 +47086,7 @@ var useNumberFormat = function useNumberFormat(props) {
 ;// CONCATENATED MODULE: ../base/src/input/input-number.tsx
 
 
-var input_number_excluded = ["jssStyle"],
+var input_number_excluded = ["jssStyle", "hideArrow"],
   input_number_excluded2 = ["onMinus", "onPlus"];
 
 
@@ -46753,6 +47100,7 @@ var InputNumber = function InputNumber(props) {
   var _jssStyle$input;
   var commonProps = use_input_common(props);
   var jssStyle = commonProps.jssStyle,
+    hideArrow = commonProps.hideArrow,
     restProps = objectWithoutProperties_default()(commonProps, input_number_excluded);
   var inputStyle = jssStyle === null || jssStyle === void 0 || (_jssStyle$input = jssStyle.input) === null || _jssStyle$input === void 0 ? void 0 : _jssStyle$input.call(jssStyle);
   var numberFormatParams = {
@@ -46775,7 +47123,7 @@ var InputNumber = function InputNumber(props) {
     onPlus = _useInputNumber.onPlus,
     numberFormatProps = objectWithoutProperties_default()(_useInputNumber, input_number_excluded2);
   var forwardProps = removeProps(commonProps, objectSpread2_default()({}, numberFormatParams));
-  var addEnd = props.hideArrow ? null : /*#__PURE__*/(0,jsx_runtime.jsx)((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, {
+  var addEnd = hideArrow ? null : /*#__PURE__*/(0,jsx_runtime.jsx)((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, {
     children: /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
       className: inputStyle === null || inputStyle === void 0 ? void 0 : inputStyle.numberStep,
       children: [/*#__PURE__*/(0,jsx_runtime.jsx)("span", {
@@ -46825,7 +47173,8 @@ var InputNumber = function InputNumber(props) {
 
 var number_jssStyle = {
   input: useInputStyle,
-  innerTitle: useInnerTitleStyle
+  innerTitle: useInnerTitleStyle,
+  popover: usePopoverStyle
 };
 var number_InputNumber = function InputNumber(props) {
   return /*#__PURE__*/(0,jsx_runtime.jsx)(input_number, objectSpread2_default()(objectSpread2_default()({}, props), {}, {
@@ -46934,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: Math.max(0, Math.floor(scrollHeight - height))
-  }, "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,
@@ -46989,9 +47342,9 @@ var Scroll = function Scroll(props) {
         style: containerStyle,
         ref: containerRef,
         children: /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
-          style: {
+          style: objectSpread2_default()({
             flexGrow: 1
-          },
+          }, props.childrenStyle),
           children: props.children
         })
       })), /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
@@ -47077,6 +47430,9 @@ var VirtualList = function VirtualList(props) {
       scrollWidth: 0,
       scrollHeight: scrollHeight,
       wrapperRef: wrapperRef,
+      childrenStyle: {
+        width: '100%'
+      },
       onScroll: handleScroll,
       onMouseMove: handleMouseMove,
       children: /*#__PURE__*/(0,jsx_runtime.jsx)(Tag, {
@@ -47674,7 +48030,8 @@ var NodeContent = function NodeContent(props) {
   var contentStyle = (jssStyle === null || jssStyle === void 0 ? void 0 : jssStyle.tree()) || {};
   var rootClass = classnames_default()(contentStyle.contentWrapper, defineProperty_default()(defineProperty_default()({}, contentStyle.childnode, data[childrenKey] && data[childrenKey].length > 0), contentStyle.inlineContent, inlineNode));
   var contentClass = classnames_default()(contentStyle.content, isString(contentClassProp) && contentClassProp, isFunc(contentClassProp) && contentClassProp(data));
-  var textClass = classnames_default()(contentStyle.text, disabled ? contentStyle.textDisabled : '');
+  // const textClass = classNames(contentStyle.text, disabled ? contentStyle.textDisabled : '');
+  var textClass = classnames_default()(contentStyle.text);
   var hasExpandIcons = expandIcons !== undefined;
   var children = data[childrenKey];
   var hasChildren = children && children.length > 0;
@@ -47683,9 +48040,9 @@ var NodeContent = function NodeContent(props) {
     if (highlight) {
       dataProps['data-active'] = active;
     }
-    if (disabled) {
-      dataProps['data-disabled'] = disabled;
-    }
+    // if (disabled) {
+    //   dataProps['data-disabled'] = disabled;
+    // }
     return dataProps;
   };
   var handleIndicatorClick = function handleIndicatorClick() {
@@ -47702,7 +48059,7 @@ var NodeContent = function NodeContent(props) {
     }
   };
   var handleNodeClick = function handleNodeClick() {
-    if (disabled) return;
+    // if (disabled) return;
     if (parentClickExpand && hasChildren) {
       handleIndicatorClick();
     } else {
@@ -47789,6 +48146,7 @@ var NodeContent = function NodeContent(props) {
     dir: config.direction,
     children: [renderIndicator(), /*#__PURE__*/(0,jsx_runtime.jsxs)("div", objectSpread2_default()(objectSpread2_default()(objectSpread2_default()({
       dir: config.direction,
+      "data-expanded": expanded,
       ref: bindContent,
       className: contentClass
     }, contentDataProps()), contentEvent), {}, {
@@ -48088,6 +48446,10 @@ var Node = function Node(props) {
       onChange: onChange,
       onToggle: onToggle,
       onNodeClick: onNodeClick,
+      onDragOver: onDragOver,
+      onDragLeave: onDragLeave,
+      onDragStart: onDragStart,
+      onDragEnd: onDragEnd,
       bindNode: bindNode,
       childrenClassName: childrenClass(data),
       childrenKey: childrenKey,
@@ -48342,6 +48704,10 @@ var Tree = function Tree(props) {
     onDragStart = props.onDragStart,
     propsDatum = props.datum,
     rest = objectWithoutProperties_default()(props, tree_excluded);
+  var _useRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)({
+      mounted: false
+    }),
+    context = _useRef.current;
   var _useTree = use_tree({
       mode: mode,
       value: value,
@@ -48457,6 +48823,11 @@ var Tree = function Tree(props) {
     }
   };
   (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
+    // 首次渲染不更新
+    if (!context.mounted) {
+      return;
+    }
+    if (!props.expanded) return;
     handleUpdateExpanded(expanded);
   }, [expanded]);
   (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
@@ -48465,6 +48836,7 @@ var Tree = function Tree(props) {
   }, [active]);
   (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
     if (getDatum) getDatum(datum);
+    context.mounted = true;
   }, []);
   return /*#__PURE__*/(0,jsx_runtime.jsx)("div", objectSpread2_default()(objectSpread2_default()({
     className: rootClass
@@ -49129,16 +49501,6 @@ function Select(props0) {
     }),
     groupData = _useGroup.data,
     groupKey = _useGroup.groupKey;
-
-  // const triggerOpen = usePersistFn(() => {
-  //   if (disabled === true) return;
-  //   if (open) {
-  //     closePop();
-  //   } else {
-  //     openPop();
-  //   }
-  // });
-
   var focusAndOpen = function focusAndOpen() {
     if (!focused) {
       var _inputRef$current2;
@@ -49546,7 +49908,7 @@ function Select(props0) {
     children: [tipNode, renderResult(), /*#__PURE__*/(0,jsx_runtime.jsx)(absolute_list, {
       adjust: adjust,
       focus: open,
-      fixedWidth: autoAdapt ? 'min' : true,
+      fixedWidth: !props.columns && (autoAdapt ? 'min' : true),
       absolute: props.absolute,
       zIndex: props.zIndex,
       position: position,
@@ -50638,7 +51000,8 @@ var useMenu = function useMenu(props) {
   var _useRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)({
       updateMap: new Map(),
       activeId: '',
-      cachedOpenKeys: props.openKeys || []
+      cachedOpenKeys: props.openKeys || [],
+      updateTimer: 0
     }),
     context = _useRef.current;
   var render = use_render();
@@ -50693,14 +51056,23 @@ var useMenu = function useMenu(props) {
       updateItem(getStatus);
     });
   });
+  var updateWithThreshold = use_persist_fn(function () {
+    if (context.updateTimer) clearTimeout(context.updateTimer);
+    context.updateTimer = window.setTimeout(function () {
+      update();
+      // 需要更新两次 否则 inPath 状态错误
+      update();
+    }, 50);
+  });
   var bindUpdate = function bindUpdate(id, updateItem) {
     context.updateMap.set(id, updateItem);
+    updateWithThreshold();
   };
   var unbindUpdate = function unbindUpdate(id) {
     context.updateMap.delete(id);
   };
   (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
-    update();
+    updateWithThreshold();
   });
   return {
     openKeys: value,
@@ -50719,15 +51091,13 @@ var useMenu = function useMenu(props) {
 var useMenuItem = function useMenuItem(props) {
   var _useRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)({
       id: '',
-      timer: null,
-      isUp: false
+      timer: null
     }),
     context = _useRef.current;
   var _props$parentId = props.parentId,
     parentId = _props$parentId === void 0 ? '' : _props$parentId,
-    dataItem = props.dataItem,
-    _props$toggleDuration = props.toggleDuration,
-    toggleDuration = _props$toggleDuration === void 0 ? 200 : _props$toggleDuration;
+    dataItem = props.dataItem;
+  var isLeaf = ((dataItem || {}).children || []).length === 0;
   if (!context.id) {
     context.id = "".concat(parentId, ",").concat(getUidStr());
   }
@@ -50742,6 +51112,10 @@ var useMenuItem = function useMenuItem(props) {
     _useState4 = slicedToArray_default()(_useState3, 2),
     isInPath = _useState4[0],
     setInPath = _useState4[1];
+  var _useState5 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(false),
+    _useState6 = slicedToArray_default()(_useState5, 2),
+    isUp = _useState6[0],
+    setIsUp = _useState6[1];
   var update = use_persist_fn(function (getStatus) {
     var status = getStatus(context.id, props.dataItem);
     if (isChecked !== status.isChecked) {
@@ -50774,8 +51148,11 @@ var useMenuItem = function useMenuItem(props) {
         props.onClick(dataItem);
       }
     }
-    var isLeaf = ((dataItem || {}).children || []).length === 0;
-    if (!isLeaf) e.nativeEvent.stopImmediatePropagation();
+    // 阻止冒泡
+    if (!isLeaf) {
+      e.stopPropagation();
+      e.nativeEvent.stopImmediatePropagation();
+    }
   });
   var handleExpandClick = use_persist_fn(function (e) {
     e.stopPropagation();
@@ -50792,29 +51169,29 @@ var useMenuItem = function useMenuItem(props) {
     }
   });
   var handleMouseLeave = use_persist_fn(function () {
-    if (expandAble && props.mode !== 'inline') {
-      if (context.timer) {
-        clearTimeout(context.timer);
-        context.timer = null;
-      }
-      context.timer = setTimeout(function () {
-        props.onOpenChange(function (before) {
-          var openKeySet = new Set(before);
-          openKeySet.delete(props.keyResult);
-          return Array.from(openKeySet);
-        });
-      }, toggleDuration);
-      document.removeEventListener('click', handleMouseLeave);
-    }
+    // if (expandAble && props.mode !== 'inline') {
+    // if (context.timer) {
+    //   clearTimeout(context.timer);
+    //   context.timer = null;
+    // }
+    // context.timer = setTimeout(() => {
+    //   props.onOpenChange((before) => {
+    //     const openKeySet = new Set(before);
+    //     openKeySet.delete(props.keyResult);
+    //     return Array.from(openKeySet);
+    //   });
+    // }, toggleDuration);
+    // document.removeEventListener('click', handleMouseLeave);
+    // }
   });
   var handleMouseEnter = use_persist_fn(function (e) {
     if (expandAble && props.mode !== 'inline') {
       var _props$scrollRef;
-      if (context.timer) {
-        clearTimeout(context.timer);
-        context.timer = null;
-      }
-      var isUp = false;
+      // if (context.timer) {
+      //   clearTimeout(context.timer);
+      //   context.timer = null;
+      // }
+      var up = false;
       if (props.mode === 'vertical-auto' && (_props$scrollRef = props.scrollRef) !== null && _props$scrollRef !== void 0 && _props$scrollRef.current) {
         var _props$scrollRef$curr;
         var target = e.currentTarget;
@@ -50822,15 +51199,17 @@ var useMenuItem = function useMenuItem(props) {
         var scrollRect = (_props$scrollRef$curr = props.scrollRef.current) === null || _props$scrollRef$curr === void 0 ? void 0 : _props$scrollRef$curr.getBoundingClientRect();
         var topLine = scrollRect === null || scrollRect === void 0 ? void 0 : scrollRect.top;
         var bottomLine = scrollRect === null || scrollRect === void 0 ? void 0 : scrollRect.bottom;
-        isUp = rect.bottom - topLine > (bottomLine - topLine) / 2;
+        up = rect.bottom - topLine > (bottomLine - topLine) / 2;
       }
-      context.isUp = isUp;
-      props.onOpenChange(function (before) {
-        var openKeySet = new Set(before);
-        openKeySet.add(props.keyResult);
-        return Array.from(openKeySet);
-      });
-      document.addEventListener('click', handleMouseLeave);
+      if (isUp !== up) {
+        setIsUp(up);
+      }
+      // props.onOpenChange((before) => {
+      //   const openKeySet = new Set(before);
+      //   openKeySet.add(props.keyResult);
+      //   return Array.from(openKeySet);
+      // });
+      // document.addEventListener('click', handleMouseLeave);
     }
   });
   (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
@@ -50846,11 +51225,12 @@ var useMenuItem = function useMenuItem(props) {
     isOpen: gopenKeySet.has(props.keyResult),
     isDisabled: isDisabled,
     expandAble: expandAble,
-    isUp: context.isUp,
+    isUp: isUp,
     handleItemClick: handleItemClick,
     handleMouseEnter: handleMouseEnter,
     handleMouseLeave: handleMouseLeave,
-    handleExpandClick: handleExpandClick
+    handleExpandClick: handleExpandClick,
+    isLeaf: isLeaf
   };
 };
 /* harmony default export */ var use_menu_item = (useMenuItem);
@@ -50864,21 +51244,37 @@ 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);
   var children = props.dataItem.children || [];
-  var itemContentRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
-  var timer = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
   var _props$inlineIndent = props.inlineIndent,
     inlineIndent = _props$inlineIndent === void 0 ? 24 : _props$inlineIndent,
     _props$frontCaretType = props.frontCaretType,
     frontCaretType = _props$frontCaretType === void 0 ? 'solid' : _props$frontCaretType,
-    collapse = props.collapse;
+    mode = props.mode,
+    _props$toggleDuration = 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,
@@ -50891,7 +51287,6 @@ var MenuItem = function MenuItem(props) {
       parentId: props.parentId,
       looseChildren: props.looseChildren,
       parentSelectable: props.parentSelectable,
-      toggleDuration: props.toggleDuration,
       disabled: props.disabled,
       mode: props.mode,
       scrollRef: props.scrollRef
@@ -50907,41 +51302,109 @@ var MenuItem = function MenuItem(props) {
     handleItemClick = _useMenuItem.handleItemClick,
     handleMouseEnter = _useMenuItem.handleMouseEnter,
     handleMouseLeave = _useMenuItem.handleMouseLeave;
+  var renderChildren = function renderChildren() {
+    var _items;
+    var items = children;
+    var isTitle = false;
+    if (!((_items = items) !== null && _items !== void 0 && _items.length)) {
+      if (props.level === 0 && props.collapse && shoudPop) {
+        items = [props.dataItem];
+        isTitle = true;
+      } else {
+        return null;
+      }
+    }
+    var content = function content(close) {
+      return /*#__PURE__*/(0,jsx_runtime.jsx)("ul", {
+        className: classnames_default()(shoudPop && (classes === null || classes === void 0 ? void 0 : classes.childrenShow), classes === null || classes === void 0 ? void 0 : classes.children, isUp && (classes === null || classes === void 0 ? void 0 : classes.childrenUp), hasExpandAbleChildren && (classes === null || classes === void 0 ? void 0 : classes.childrenHasExpand))
+        // 子菜单点击弹出
+        ,
+        onClick: close,
+        dir: config.direction,
+        children: items.map(function (item, index) {
+          var key = getKey(props.keygen, item, index);
+          return /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.createElement)(MenuItem, objectSpread2_default()(objectSpread2_default()({}, props), {}, {
+            mode: mode,
+            parentId: id,
+            dataItem: item,
+            key: key,
+            index: index,
+            keyResult: key,
+            level: props.level + 1,
+            renderIcon: isTitle ? undefined : props.renderIcon
+          }));
+        })
+      });
+    };
+    if (shoudPop) {
+      var position = isVertical || isSubHorizontal ? isUp ? 'right-bottom' : 'right-top' : 'bottom';
+      return /*#__PURE__*/(0,jsx_runtime.jsx)(src_popover_popover, {
+        mouseLeaveDelay: toggleDuration,
+        className: classnames_default()(classes === null || classes === void 0 ? void 0 : classes.popover),
+        attributes: getDataAttribute({
+          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) {
+          return content(close);
+        }
+      });
+    }
+    return content();
+  };
   var renderItem = function renderItem() {
+    var icon = isFunc(props.renderIcon) ? props.renderIcon(props.dataItem) : null;
+    var iconEl = icon ? /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
+      className: classes === null || classes === void 0 ? void 0 : classes.titleIcon,
+      children: icon
+    }) : null;
+    var indent = props.mode === 'inline' && props.level ? /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
+      style: {
+        width: props.level * inlineIndent,
+        flexShrink: 0
+      }
+    }) : null;
     var item = render_render(props.renderItem, props.dataItem, props.index);
     var link = props.linkKey ? getKey(props.linkKey, props.dataItem, props.index) : undefined;
     var title = null;
     if (isLink(item)) {
       var mergeClass = classnames_default()(classes === null || classes === void 0 ? void 0 : classes.title, item.props && item.props.className);
       title = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.cloneElement)(item, {
-        className: mergeClass
+        className: mergeClass,
+        children: /*#__PURE__*/(0,jsx_runtime.jsxs)(jsx_runtime.Fragment, {
+          children: [indent, iconEl, /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
+            className: classes === null || classes === void 0 ? void 0 : classes.titleContent,
+            children: item.props.children
+          })]
+        })
       });
     } else {
       var linkProps = {
         className: classes === null || classes === void 0 ? void 0 : classes.title,
         href: link
       };
-      title = /*#__PURE__*/(0,jsx_runtime.jsx)("a", objectSpread2_default()(objectSpread2_default()({}, linkProps), {}, {
-        children: wrapSpan(item)
+      title = /*#__PURE__*/(0,jsx_runtime.jsxs)("a", objectSpread2_default()(objectSpread2_default()({}, linkProps), {}, {
+        children: [indent, iconEl, /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
+          className: classes === null || classes === void 0 ? void 0 : classes.titleContent,
+          children: wrapSpan(item)
+        })]
       }));
     }
-    var indent = props.mode === 'inline' && props.level ? /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
-      style: {
-        width: props.level * inlineIndent,
-        flexShrink: 0
-      }
-    }) : null;
-    var isFirstCollapseItem = collapse && props.level === 0;
     if (props.frontCaret) {
       return /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
-        ref: itemContentRef,
-        className: classnames_default()(classes === null || classes === void 0 ? void 0 : classes.itemContent, classes === null || classes === void 0 ? void 0 : classes.itemContentFront, isFirstCollapseItem && (classes === null || classes === void 0 ? void 0 : classes.itemContentHide)),
+        className: classnames_default()(classes === null || classes === void 0 ? void 0 : classes.itemContent, classes === null || classes === void 0 ? void 0 : classes.itemContentFront),
         onClick: handleItemClick,
-        children: [indent, /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
+        children: [/*#__PURE__*/(0,jsx_runtime.jsx)("div", {
           style: {
             color: props.caretColor
           },
-          className: classnames_default()(classes === null || classes === void 0 ? void 0 : classes.expand, classes === null || classes === void 0 ? void 0 : classes.expandFront, props.parentSelectable && (classes === null || classes === void 0 ? void 0 : classes.expandHover)),
+          className: classnames_default()(classes === null || classes === void 0 ? void 0 : classes.expand, classes === null || classes === void 0 ? void 0 : classes.expandFront, (isVertical || isSubHorizontal) && (classes === null || classes === void 0 ? void 0 : classes.expandVertical), props.parentSelectable && (classes === null || classes === void 0 ? void 0 : classes.expandHover)),
           onClick: handleExpandClick,
           dir: config.direction,
           children: /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
@@ -50952,15 +51415,14 @@ var MenuItem = function MenuItem(props) {
       });
     } else {
       return /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
-        ref: itemContentRef,
-        className: classnames_default()(classes === null || classes === void 0 ? void 0 : classes.itemContent, classes === null || classes === void 0 ? void 0 : classes.itemContentBack, isFirstCollapseItem && (classes === null || classes === void 0 ? void 0 : classes.itemContentHide)),
+        className: classnames_default()(classes === null || classes === void 0 ? void 0 : classes.itemContent, classes === null || classes === void 0 ? void 0 : classes.itemContentBack),
         onClick: handleItemClick,
-        children: [indent, title, expandAble && /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
+        children: [title, expandAble && /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
           onClick: handleExpandClick,
           style: {
             color: props.caretColor
           },
-          className: classnames_default()(classes === null || classes === void 0 ? void 0 : classes.expand, classes === null || classes === void 0 ? void 0 : classes.expandBack, props.parentSelectable && (classes === null || classes === void 0 ? void 0 : classes.expandHover)),
+          className: classnames_default()(classes === null || classes === void 0 ? void 0 : classes.expand, classes === null || classes === void 0 ? void 0 : classes.expandBack, (isVertical || isSubHorizontal) && (classes === null || classes === void 0 ? void 0 : classes.expandVertical), props.parentSelectable && (classes === null || classes === void 0 ? void 0 : classes.expandHover)),
           dir: config.direction,
           children: /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
             className: classes === null || classes === void 0 ? void 0 : classes.icon,
@@ -50970,250 +51432,15 @@ var MenuItem = function MenuItem(props) {
       });
     }
   };
-  var renderCollapseItem = function renderCollapseItem() {
-    if (!props.renderCollapse) return null;
-    var isFirstCollapseItem = props.level === 0 && collapse;
-    return /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
-      className: classnames_default()(classes === null || classes === void 0 ? void 0 : classes.collapseItem, isInPath && (classes === null || classes === void 0 ? void 0 : classes.collapseItemInPath), !isFirstCollapseItem && (classes === null || classes === void 0 ? void 0 : classes.collapseItemHide)),
-      onClick: handleItemClick,
-      children: props.renderCollapse(props.dataItem, props.index)
-    });
-  };
-  (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
-    if (!itemContentRef.current) return;
-    if (collapse === undefined) return;
-    if (timer.current) clearTimeout(timer.current);
-    itemContentRef.current.style.overflow = 'hidden';
-    itemContentRef.current.style.whiteSpace = 'nowrap';
-    timer.current = setTimeout(function () {
-      if (!itemContentRef.current) return;
-      itemContentRef.current.style.overflow = '';
-      itemContentRef.current.style.whiteSpace = '';
-    }, 300);
-    return function () {
-      if (timer.current) clearTimeout(timer.current);
-    };
-  }, [collapse]);
   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,
-    children: [renderItem(), renderCollapseItem(), children.length > 0 && /*#__PURE__*/(0,jsx_runtime.jsx)("ul", {
-      className: classnames_default()(classes === null || classes === void 0 ? void 0 : classes.children, isUp && (classes === null || classes === void 0 ? void 0 : classes.childrenUp), hasExpandAbleChildren && (classes === null || classes === void 0 ? void 0 : classes.childrenHasExpand)),
-      dir: config.direction,
-      children: children.map(function (item, index) {
-        var key = getKey(props.keygen, item, index);
-        return /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.createElement)(MenuItem, objectSpread2_default()(objectSpread2_default()({}, props), {}, {
-          parentId: id,
-          dataItem: item,
-          key: key,
-          index: index,
-          keyResult: key,
-          level: props.level + 1
-        }));
-      })
-    })]
+    children: [renderItem(), renderChildren()]
   });
 };
 /* 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
 
 
@@ -51221,12 +51448,12 @@ var scroll_Scroll = function Scroll(props) {
 
 
 
-
+// import Scroll from './scroll';
 
 
 var menu_emptyArray = [];
 var Menu = function Menu(props) {
-  var _props$jssStyle, _props$jssStyle$menu, _props$style;
+  var _props$jssStyle, _props$jssStyle$menu;
   var _props$data = props.data,
     data = _props$data === void 0 ? menu_emptyArray : _props$data,
     _props$mode = props.mode,
@@ -51234,24 +51461,32 @@ var Menu = function Menu(props) {
     _props$theme = props.theme,
     theme = _props$theme === void 0 ? 'light' : _props$theme,
     collapse = props.collapse;
-  var mode = collapse ? 'vertical' : modeProps;
+  var render = useRender();
+
+  // const [inTransition, setInTransition] = useState(false);
+  var mode = collapse ? 'vertical-auto' : modeProps;
+  var _useRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)({
+      inTransition: false,
+      lastCollapse: !!props.collapse
+    }),
+    context = _useRef.current;
+  if (props.mode !== 'horizontal' && !!context.lastCollapse !== !!collapse) {
+    context.inTransition = true;
+    context.lastCollapse = !!props.collapse;
+  }
   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],
     setHasOpen = _useState2[1];
-  var _useState3 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)([]),
-    _useState4 = slicedToArray_default()(_useState3, 2),
-    collapseOpenKeys = _useState4[0],
-    setCollapseOpenKeys = _useState4[1];
   var _useMenu = use_menu({
       data: data,
       active: props.active,
       defaultOpenKeys: props.defaultOpenKeys,
-      openKeys: props.collapse ? collapseOpenKeys : props.openKeys,
-      onOpenChange: props.collapse ? setCollapseOpenKeys : props.onOpenChange
+      openKeys: props.openKeys,
+      onOpenChange: props.onOpenChange
     }),
     openKeys = _useMenu.openKeys,
     onOpenChange = _useMenu.onOpenChange,
@@ -51262,12 +51497,19 @@ var Menu = function Menu(props) {
   var hasExpand = data.some(function (item) {
     return item && item.children && (props.looseChildren || item.children.length);
   });
-  var showScrollBar = isHorizontal || isVertical;
-  var style = objectSpread2_default()({}, props.style);
-  if (collapse) delete style.width;
-  var listStyle = isVertical && !collapse ? {
-    width: (_props$style = props.style) === null || _props$style === void 0 ? void 0 : _props$style.width
-  } : undefined;
+
+  // const showScrollBar = isHorizontal || isVertical;
+
+  var renderHeader = function renderHeader() {
+    if (modeProps === 'horizontal') return;
+    if (props.header) {
+      return /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
+        className: classes === null || classes === void 0 ? void 0 : classes.header,
+        children: props.header
+      });
+    }
+    return null;
+  };
   (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
     var newOpen = (openKeys || []).filter(function (k) {
       return data.find(function (d, i) {
@@ -51278,24 +51520,32 @@ var Menu = function Menu(props) {
       setHasOpen(newOpen);
     }
   }, [data, openKeys]);
-  return /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
-    className: classnames_default()(props.className, classes === null || classes === void 0 ? void 0 : classes.wrapper, mode === 'inline' && (classes === null || classes === void 0 ? void 0 : classes.wrapperInline), (mode === 'vertical' || mode === 'vertical-auto') && (classes === null || classes === void 0 ? void 0 : classes.wrapperVertical), mode === 'horizontal' && (classes === null || classes === void 0 ? void 0 : classes.wrapperHorizontal), hasOpen && (classes === null || classes === void 0 ? void 0 : classes.wrapperHasOpen), theme === 'dark' ? classes === null || classes === void 0 ? void 0 : classes.wrapperDark : classes === null || classes === void 0 ? void 0 : classes.wrapperLight, collapse && (classes === null || classes === void 0 ? void 0 : classes.collapse)),
+  return /*#__PURE__*/(0,jsx_runtime.jsxs)("div", objectSpread2_default()(objectSpread2_default()({
+    className: classnames_default()(props.className, classes === null || classes === void 0 ? void 0 : classes.wrapper, mode === 'inline' && (classes === null || classes === void 0 ? void 0 : classes.wrapperInline), (mode === 'vertical' || mode === 'vertical-auto') && (classes === null || classes === void 0 ? void 0 : classes.wrapperVertical), mode === 'horizontal' && (classes === null || classes === void 0 ? void 0 : classes.wrapperHorizontal), hasOpen && (classes === null || classes === void 0 ? void 0 : classes.wrapperHasOpen), theme === 'dark' ? classes === null || classes === void 0 ? void 0 : classes.wrapperDark : classes === null || classes === void 0 ? void 0 : classes.wrapperLight, collapse && (classes === null || classes === void 0 ? void 0 : classes.wrapperCollpase), context.inTransition && (classes === null || classes === void 0 ? void 0 : classes.wrapperInTransition))
+  }, getDataAttribute({
+    theme: theme,
+    mode: isVertical ? 'vertical' : mode
+  })), {}, {
     style: objectSpread2_default()({
       height: props.height
-    }, style),
-    children: [/*#__PURE__*/(0,jsx_runtime.jsx)("div", {
+    }, props.style),
+    onTransitionEnd: function onTransitionEnd(e) {
+      if (e.target === e.currentTarget) {
+        context.inTransition = false;
+        render();
+      }
+    },
+    children: [renderHeader(), /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
       className: classes === null || classes === void 0 ? void 0 : classes.scrollbox,
       ref: scrollRef,
       children: /*#__PURE__*/(0,jsx_runtime.jsx)("ul", {
         className: classnames_default()(classes === null || classes === void 0 ? void 0 : classes.root, hasExpand && (classes === null || classes === void 0 ? void 0 : classes.childrenHasExpand)),
-        style: listStyle,
         children: data.map(function (item, index) {
           var key = getKey(props.keygen, item, index);
           return /*#__PURE__*/(0,jsx_runtime.jsx)(menu_item, {
             level: 0,
             index: index,
             parentId: "",
-            collapse: collapse,
             dataItem: item,
             keyResult: key,
             openKeys: openKeys,
@@ -51310,7 +51560,6 @@ var Menu = function Menu(props) {
             toggleDuration: props.toggleDuration,
             disabled: props.disabled,
             renderItem: props.renderItem,
-            renderCollapse: props.renderCollapse,
             keygen: props.keygen,
             jssStyle: props.jssStyle,
             linkKey: props.linkKey,
@@ -51318,17 +51567,15 @@ var Menu = function Menu(props) {
             frontCaretType: props.frontCaretType,
             caretColor: props.caretColor,
             inlineIndent: props.inlineIndent,
-            scrollRef: scrollRef
+            scrollRef: scrollRef,
+            theme: theme,
+            renderIcon: props.renderIcon,
+            collapse: collapse
           }, key);
         })
       })
-    }), showScrollBar && /*#__PURE__*/(0,jsx_runtime.jsx)(menu_scroll, {
-      targetRef: scrollRef,
-      direction: mode === 'vertical' || mode === 'vertical-auto' ? 'y' : 'x',
-      data: data,
-      jssStyle: props.jssStyle
     })]
-  });
+  }));
 };
 /* harmony default export */ var src_menu_menu = (Menu);
 ;// CONCATENATED MODULE: ./src/menu/menu.tsx
@@ -51338,17 +51585,79 @@ var Menu = function Menu(props) {
 
 
 var menu_jssStyle = {
-  menu: useMenuStyle
+  menu: useMenuStyle,
+  popover: usePopoverStyle
 };
 /* harmony default export */ var src_menu_menu_0 = (function (props) {
   return /*#__PURE__*/(0,jsx_runtime.jsx)(src_menu_menu, objectSpread2_default()({
     jssStyle: menu_jssStyle
   }, props));
 });
+;// CONCATENATED MODULE: ../base/src/menu/search.tsx
+
+
+var search_excluded = ["tip", "status", "innerTitle", "placeTitle", "onSearchClick", "collpase", "theme", "jssStyle", "className", "style"];
+
+
+
+
+
+var Search = function Search(props) {
+  var _jssStyle$menuSearch;
+  var _tip = props.tip,
+    _status = props.status,
+    _innerTitle = props.innerTitle,
+    _placeTitle = props.placeTitle,
+    onSearchClick = props.onSearchClick,
+    collpase = props.collpase,
+    _props$theme = props.theme,
+    theme = _props$theme === void 0 ? 'light' : _props$theme,
+    jssStyle = props.jssStyle,
+    className = props.className,
+    style = props.style,
+    rest = objectWithoutProperties_default()(props, search_excluded);
+  var classes = jssStyle === null || jssStyle === void 0 || (_jssStyle$menuSearch = jssStyle.menuSearch) === null || _jssStyle$menuSearch === void 0 ? void 0 : _jssStyle$menuSearch.call(jssStyle);
+  var Search = /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
+    className: classes === null || classes === void 0 ? void 0 : classes.search,
+    children: icons_config.menu.Search
+  });
+  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: !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), {}, {
+      jssStyle: jssStyle
+    }))
+  });
+};
+/* harmony default export */ var src_menu_search = (Search);
+;// CONCATENATED MODULE: ./src/menu/search.tsx
+
+
+
+
+
+var search_jssStyle = {
+  menuSearch: useMenuSearchStyle,
+  input: useInputStyle,
+  popover: usePopoverStyle
+};
+/* harmony default export */ var src_menu_search_0 = (function (props) {
+  return /*#__PURE__*/(0,jsx_runtime.jsx)(src_menu_search, objectSpread2_default()({
+    jssStyle: search_jssStyle
+  }, props));
+});
 ;// CONCATENATED MODULE: ./src/menu/index.ts
 
+
+var SearchComp = src_menu_search_0;
+SearchComp.displayName = 'ShineoutMenuSearch';
 var MenuComp = src_menu_menu_0;
 MenuComp.displayName = 'ShineoutMenu';
+MenuComp.Search = SearchComp;
 /* harmony default export */ var src_menu_0 = (MenuComp);
 ;// CONCATENATED MODULE: ../base/src/message/message.tsx
 'use client';
@@ -51481,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));
@@ -51491,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]);
@@ -51513,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;
@@ -51524,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();
     }
@@ -51535,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);
@@ -51786,6 +52102,8 @@ var Confirm = function Confirm(props) {
       callback.then(function () {
         close();
         setOk(false);
+      }).catch(function () {
+        setOk(false);
       });
     } else {
       close();
@@ -51800,6 +52118,8 @@ var Confirm = function Confirm(props) {
       callback.then(function () {
         close();
         setCancel(false);
+      }).catch(function () {
+        setCancel(false);
       });
     } else {
       close();
@@ -53505,9 +53825,11 @@ StepsComp.Step = StepsStep;
 
 
 
+
 var sticky_cssSupport = cssSupport;
 var supportSticky = sticky_cssSupport('position', 'sticky');
 var defaultZIndex = 900;
+var events = ['scroll', 'pageshow', 'load', 'resize'];
 
 // const getFirstScrollParent = (el: HTMLElement) => {
 //   let parent = el.parentNode as HTMLElement;
@@ -53526,17 +53848,19 @@ var defaultZIndex = 900;
 // };
 
 var Sticky = function Sticky(props) {
-  var _props$style;
   var children = props.children,
     top = props.top,
     bottom = props.bottom;
-  var css = props.css || props.target;
+  // 是否使用css sticky
+  var css = (props.css || props.target) && supportSticky;
+  var forceUpdate = useRender();
   var _useRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)({
       target: null,
       div: null,
-      observer: null,
+      position: '',
+      targetObserver: null,
       parentObserver: null,
-      isTop: false
+      fixedObserver: null
     }),
     context = _useRef.current;
   var _useState = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)({}),
@@ -53551,12 +53875,7 @@ var Sticky = function Sticky(props) {
     _useState6 = slicedToArray_default()(_useState5, 2),
     parentVisible = _useState6[0],
     setParentVisible = _useState6[1];
-  var forceRender = useRender();
   var elementRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
-  var elementSize = useResize({
-    targetRef: elementRef,
-    timer: 0
-  });
   var getTarget = function getTarget() {
     var scrollContainer = props.scrollContainer;
     if (typeof scrollContainer === 'string') {
@@ -53566,22 +53885,19 @@ var Sticky = function Sticky(props) {
     if (scrollContainer && scrollContainer.nodeType === 1) {
       return scrollContainer;
     }
-    return document.body;
+    return null;
   };
+
+  // window resize 时需要重新计算底部附着的位置
   var updateStyle = usePersistFn(function () {
-    if (context.div && !context.isTop && show) {
-      var shouldFixed = context.target === document.body;
+    if (context.div && context.position === 'bottom' && show) {
       var scrollRect = context.target.getBoundingClientRect();
       var targetRect = elementRef.current.getBoundingClientRect();
       var targetLeft = targetRect.left;
-      var width = targetRect.width,
-        height = targetRect.height;
       if (typeof bottom === 'number') {
         var outRootRect = context.target.getBoundingClientRect();
         var _style = {
-          position: shouldFixed ? 'fixed' : 'absolute',
-          width: "".concat(width, "px"),
-          height: "".concat(height, "px"),
+          position: 'absolute',
           top: "".concat(scrollRect.bottom - (props.bottom || 0) - outRootRect.top, "px"),
           left: "".concat(targetLeft - outRootRect.left, "px"),
           transform: 'translateY(-100%)'
@@ -53590,30 +53906,22 @@ var Sticky = function Sticky(props) {
       }
     }
   });
-  var handlePosition = usePersistFn(function (entries) {
+
+  // 有滚动容器时的定位
+  var handleTargetPosition = usePersistFn(function (entries) {
     var entry = entries[0];
     var scrollRect = entry.rootBounds;
     var targetRect = entry.boundingClientRect;
-    var shouldFixed = context.target === document.body;
     if (!entry.isIntersecting) {
       var targetLeft = targetRect.left;
-      var outRootRect = shouldFixed ? {
-        top: 0,
-        bottom: 0,
-        left: 0,
-        right: 0
-      } : context.div.getBoundingClientRect();
-      var width = targetRect.width,
-        height = targetRect.height;
+      var outRootRect = context.div.getBoundingClientRect();
       if (scrollRect && targetRect.bottom < scrollRect.bottom) {
         // top in
-        context.isTop = true;
+        context.position = 'top';
         if (typeof top === 'number') {
           setShow(true);
           var _style2 = {
-            position: shouldFixed ? 'fixed' : 'absolute',
-            width: "".concat(width, "px"),
-            height: "".concat(height, "px"),
+            position: 'absolute',
             top: "".concat(scrollRect.top - outRootRect.top, "px"),
             left: "".concat(targetLeft - outRootRect.left, "px")
           };
@@ -53621,16 +53929,13 @@ var Sticky = function Sticky(props) {
         }
       } else if (scrollRect) {
         // bottom in
-        context.isTop = false;
+        context.position = 'bottom';
         if (typeof bottom === 'number') {
           setShow(true);
-          var _outRootRect = context.target.getBoundingClientRect();
           var _style3 = {
-            position: shouldFixed ? 'fixed' : 'absolute',
-            width: "".concat(width, "px"),
-            height: "".concat(height, "px"),
-            top: "".concat(scrollRect.bottom - _outRootRect.top, "px"),
-            left: "".concat(targetLeft - _outRootRect.left, "px"),
+            position: 'absolute',
+            top: "".concat(scrollRect.bottom - outRootRect.top, "px"),
+            left: "".concat(targetLeft - outRootRect.left, "px"),
             transform: 'translateY(-100%)'
           };
           setStyle(_style3);
@@ -53639,8 +53944,11 @@ var Sticky = function Sticky(props) {
     }
     if (entry.isIntersecting) {
       setShow(false);
+      context.position = '';
     }
   });
+
+  // 父元素是否可见
   var handleParentVisible = usePersistFn(function (entries) {
     var entry = entries[0];
     if (entry.isIntersecting) {
@@ -53649,35 +53957,118 @@ var Sticky = function Sticky(props) {
       setParentVisible(false);
     }
   });
-  var cleanEvents = function cleanEvents() {
-    if (context.observer) {
-      context.observer.disconnect();
-      context.observer = null;
+  var setFixedStyle = usePersistFn(function (s, m) {
+    var l = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+    if (s !== show) {
+      setShow(s);
     }
-    if (context.parentObserver) {
-      context.parentObserver.disconnect();
-      context.parentObserver = null;
+    if (s && m) {
+      var newStyle = defineProperty_default()(defineProperty_default()({
+        position: 'fixed'
+      }, m, m === 'top' ? top : bottom), "left", l);
+      if (!shallowEqual(style, newStyle)) {
+        setStyle(newStyle);
+      }
+    }
+  });
+
+  // 无滚动容器的时候，body 滚动 resize 计算
+  var handleFixedPosition = usePersistFn(function () {
+    if (css || context.target) return;
+    var element = elementRef.current;
+    if (!parentVisible) {
+      setFixedStyle(false);
+      return;
+    }
+    if (!element) return;
+    var selfRect = element.getBoundingClientRect();
+    if (selfRect === null) return;
+    // If the element is hidden, the width and height will be 0
+    if (selfRect && selfRect.width === 0 && selfRect.height === 0) return;
+    var scrollRect = document.body.getBoundingClientRect();
+    var top = props.top,
+      bottom = props.bottom;
+    if (top !== undefined && Math.ceil(selfRect.top) <= top) {
+      setFixedStyle(true, 'top', selfRect.left);
+      return;
+    } else if (bottom !== undefined && Math.ceil(selfRect.bottom) + bottom > scrollRect.bottom) {
+      setFixedStyle(true, 'bottom', selfRect.left);
+      return;
+    } else {
+      setFixedStyle(false);
+    }
+  });
+
+  // 无滚动容器时内滚场景触发
+  var handleFixedInter = usePersistFn(function (entries) {
+    if (!parentVisible) {
+      setFixedStyle(false);
+      return;
+    }
+    var entry = entries[0];
+    var scrollRect = entry.rootBounds;
+    var targetRect = entry.boundingClientRect;
+    if (scrollRect && scrollRect.top === 0 && scrollRect.bottom === 0) {
+      return;
+    }
+    if (!entry.isIntersecting) {
+      var targetLeft = targetRect.left;
+      var outRootRect = document.body.getBoundingClientRect();
+      if (scrollRect && targetRect.bottom < scrollRect.bottom) {
+        // top in
+        if (typeof top === 'number') {
+          setFixedStyle(true, 'top', targetLeft - outRootRect.left);
+        }
+      } else if (scrollRect) {
+        // bottom in
+        if (typeof bottom === 'number') {
+          setFixedStyle(true, 'bottom', targetLeft - outRootRect.left);
+        }
+      }
+    }
+    if (entry.isIntersecting) {
+      setFixedStyle(false);
+    }
+  });
+  var elementSize = useResize({
+    targetRef: elementRef,
+    timer: 10,
+    cb: handleFixedPosition
+  });
+  var cancelFixedObserver = function cancelFixedObserver() {
+    if (context.fixedObserver) {
+      context.fixedObserver.disconnect();
+      context.fixedObserver = null;
+    }
+  };
+  var createFixedObserver = function createFixedObserver() {
+    cancelFixedObserver();
+    context.fixedObserver = new IntersectionObserver(handleFixedInter, {
+      root: null,
+      rootMargin: "-".concat(top || 0, "px 0px -").concat(bottom || 0, "px 0px"),
+      threshold: 1.0
+    });
+  };
+  var cancelObserver = function cancelObserver() {
+    if (context.targetObserver) {
+      context.targetObserver.disconnect();
+      context.targetObserver = null;
     }
-    window.removeEventListener('resize', updateStyle);
   };
   var createObserver = function createObserver() {
-    var target = getTarget();
-    if (!context.div && target !== document.body) {
+    if (!context.div) {
       context.div = document.createElement('div');
       context.div.style.position = 'relative';
     }
-    if (target && target !== context.target) {
-      forceRender();
-      context.target = target;
-      cleanEvents();
+    if (context.target) {
       if (context.div) {
         // append div
-        if (target === document.body) {
-          document.body.appendChild(context.div);
+        if (context.target === document.body) {
+          document.body.insertBefore(context.div, document.body.firstChild);
         } else {
-          target.parentNode.insertBefore(context.div, target);
+          context.target.parentNode.insertBefore(context.div, context.target);
         }
-        var _style4 = window.getComputedStyle(target);
+        var _style4 = window.getComputedStyle(context.target);
         if (_style4.position === 'absolute' || _style4.position === 'fixed') {
           context.div.style.position = _style4.position;
           context.div.style.top = _style4.top;
@@ -53686,59 +54077,109 @@ var Sticky = function Sticky(props) {
           context.div.style.bottom = _style4.bottom;
         }
       }
+      cancelFixedObserver();
       if (window.IntersectionObserver) {
-        var observer = new IntersectionObserver(handlePosition, {
-          root: target,
+        var observer = new IntersectionObserver(handleTargetPosition, {
+          root: context.target,
           rootMargin: "-".concat(top || 0, "px 0px -").concat(bottom || 0, "px 0px"),
           threshold: 1.0
         });
-        context.observer = observer;
-        context.parentObserver = new IntersectionObserver(handleParentVisible, {
-          root: target,
-          rootMargin: "-".concat(top || 0, "px 0px -").concat(bottom || 0, "px 0px"),
-          threshold: 0
-        });
+        context.targetObserver = observer;
       }
     }
   };
+  var cancelParentObserver = function cancelParentObserver() {
+    if (context.parentObserver) {
+      context.parentObserver.disconnect();
+      context.parentObserver = null;
+    }
+  };
+  var createParentObserver = function createParentObserver() {
+    if (!props.parent) return;
+    cancelParentObserver();
+    context.parentObserver = new IntersectionObserver(handleParentVisible, {
+      root: context.target,
+      rootMargin: "-".concat(top || 0, "px 0px -").concat(bottom || 0, "px 0px"),
+      threshold: 0
+    });
+    context.parentObserver.observe(props.parent);
+  };
+
+  // 存在滚动容器时的定位
+  var createTargetEvents = function createTargetEvents() {
+    createObserver();
+    window.addEventListener('resize', updateStyle);
+  };
+  var cancelTargetEvents = function cancelTargetEvents() {
+    cancelObserver();
+    window.removeEventListener('resize', updateStyle);
+    if (context.div) {
+      context.div.remove();
+      context.div = null;
+    }
+  };
+  var createFixedEvents = function createFixedEvents() {
+    createFixedObserver();
+    events.forEach(function (event) {
+      window.addEventListener(event, handleFixedPosition);
+    });
+  };
+  var cancelFixedEvents = function cancelFixedEvents() {
+    cancelFixedObserver();
+    events.forEach(function (event) {
+      window.removeEventListener(event, handleFixedPosition);
+    });
+  };
   var handleElementRef = function handleElementRef(el) {
     if (el) {
       elementRef.current = el;
-      if (el && context.observer) {
-        context.observer.observe(el);
+      if (context.targetObserver) {
+        if (!el) {
+          context.targetObserver.disconnect();
+        } else {
+          context.targetObserver.observe(el);
+        }
+      }
+      if (context.fixedObserver) {
+        if (!el) {
+          context.fixedObserver.disconnect();
+        } else {
+          context.fixedObserver.observe(el);
+        }
       }
     }
   };
-  (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
-    if (!css) {
-      createObserver();
-      window.addEventListener('resize', updateStyle);
+  (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useLayoutEffect)(function () {
+    if (css) return;
+    var target = getTarget();
+    if (context.target !== target) {
+      context.target = target;
+      forceUpdate();
     }
-    return function () {
-      cleanEvents();
-      if (context.div) {
-        context.div.remove();
-        context.div = null;
-      }
-    };
-  }, [css]);
-  (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
-    if (props.parent && context.parentObserver) {
+    if (context.target) {
+      createTargetEvents();
+      return cancelTargetEvents;
+    } else {
+      // fixed 布局
+      createFixedEvents();
+      return cancelFixedEvents;
+    }
+  }, [css, top, bottom]);
+  (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useLayoutEffect)(function () {
+    if (props.parent && !css) {
+      // createParentObserver 用到context.target
+      createParentObserver();
       context.parentObserver.observe(props.parent);
     }
-    return function () {
-      if (context.parentObserver) {
-        context.parentObserver.disconnect();
-      }
-    };
-  }, [props.parent]);
+    return cancelParentObserver;
+  }, [props.parent, css, context.target, top, bottom]);
 
   // 纯css方法 直接使用css
   // js方法
   // 1. 不指定滚动容器 基于document.body 使用fixed + js计算
   // 2. 指定滚动容器 在滚动容器上方插入一个dom占位 基于该dom渲染和定位
   // 3. 使用 intersectionObserver 来判断是否需要sticky
-  if (css && supportSticky) {
+  if (css) {
     return /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
       className: props.className,
       style: objectSpread2_default()(objectSpread2_default()({
@@ -53762,12 +54203,14 @@ var Sticky = function Sticky(props) {
     })
   }) : null;
   var isFixed = style.position === 'fixed';
+  var hideStyle = {
+    opacity: 0,
+    pointerEvents: 'none'
+  };
   return /*#__PURE__*/(0,jsx_runtime.jsxs)(jsx_runtime.Fragment, {
     children: [isFixed ? StickyEl : context.target && context.div && /*#__PURE__*/(0,external_root_ReactDOM_commonjs2_react_dom_commonjs_react_dom_amd_react_dom_.createPortal)(StickyEl, context.div), /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
       className: props.className,
-      style: objectSpread2_default()(objectSpread2_default()({}, props.style), {}, {
-        opacity: show && parentVisible ? 0 : (_props$style = props.style) === null || _props$style === void 0 ? void 0 : _props$style.opacity
-      }),
+      style: objectSpread2_default()(objectSpread2_default()({}, props.style), show && parentVisible ? hideStyle : {}),
       ref: handleElementRef,
       children: children
     })]
@@ -55251,10 +55694,7 @@ var useTableGroup = function useTableGroup(props) {
         style: fixedStyle,
         dir: config.direction,
         children: [showSelectAll && /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
-          style: {
-            lineHeight: 1,
-            verticalAlign: 'middle'
-          },
+          className: tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.iconWrapper,
           children: props.radio ? null : /*#__PURE__*/(0,jsx_runtime.jsx)(base_src_checkbox_checkbox, {
             disabled: props.disabled === true,
             checked: props.datum.getCheckedStatus(props.treeCheckAll ? props.treeColumnsName : undefined),
@@ -55527,7 +55967,7 @@ var Tr = function Tr(props) {
           transform: "translate3d(".concat(0 - props.fixRightNum, "px, 0, 0)")
         };
       }
-      var right = props.colgroup.slice(index + 1 + colSpan).reduce(function (a, b) {
+      var right = props.colgroup.slice(index + colSpan).reduce(function (a, b) {
         return (a || 0) + (b || 0);
       }, 0);
       return {
@@ -56602,6 +57042,7 @@ var useTransform = function useTransform(props) {
     if (!containerDimension || !targetDimension) return;
     if (targetDimension <= containerDimension) {
       setShouldScroll(false);
+      setDelta(0);
     } else {
       setShouldScroll(true);
     }
@@ -57906,7 +58347,13 @@ var TransferList = function TransferList(props) {
         value: value,
         onSelected: onSelectChange
       });
-      if (custom) return custom;
+      if (custom) return /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
+        className: listClass,
+        style: objectSpread2_default()(objectSpread2_default()({}, listStyle), {}, {
+          height: listHeight
+        }),
+        children: custom
+      });
     }
     if (data && data.length === 0) {
       return /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
@@ -58151,7 +58598,7 @@ var Transfer = function Transfer(props) {
       simple: simple,
       disabled: disabled,
       value: listValue,
-      selectedKeys: selectedKeys,
+      selectedKeys: listValue,
       itemClass: itemClass,
       customRender: children,
       searchPlaceholder: placeholder,
@@ -59145,10 +59592,9 @@ var useUpload = function useUpload(props) {
       });
     });
   };
-  var getCurrent = use_persist_fn(function () {
-    return {
-      filesState: filesState
-    };
+  var latestState = use_latest_obj({
+    filesState: filesState,
+    value: value
   });
   var uploadFile = function uploadFile(id, file, data) {
     var request = props.request || xhr;
@@ -59169,8 +59615,7 @@ var useUpload = function useUpload(props) {
           throttle = false;
         }, 16);
         var percent = typeof e.percent === 'number' ? e.percent : e.loaded / e.total * 100;
-        var _getCurrent = getCurrent(),
-          filesState = _getCurrent.filesState;
+        var filesState = latestState.filesState;
         var newFiles = objectSpread2_default()({}, filesState);
         if (!newFiles[id]) return;
         newFiles[id].process = percent;
@@ -59207,7 +59652,7 @@ var useUpload = function useUpload(props) {
             });
           });
           // add value
-          var values = utils_immer_produce(value, function (draft) {
+          var values = utils_immer_produce(latestState.value, function (draft) {
             draft.push(result);
           });
           props.onChange(values);
@@ -59260,7 +59705,7 @@ var useUpload = function useUpload(props) {
       reader.readAsDataURL(blob);
     });
   };
-  var addFiles = /*#__PURE__*/function () {
+  var addFiles = use_persist_fn( /*#__PURE__*/function () {
     var _ref2 = asyncToGenerator_default()( /*#__PURE__*/regeneratorRuntime_default()().mark(function _callee2(files) {
       var fileList, newFiles, resetLength, list, _loop, _ret, i;
       return regeneratorRuntime_default()().wrap(function _callee2$(_context3) {
@@ -59399,11 +59844,11 @@ var useUpload = function useUpload(props) {
         }
       }, _callee2);
     }));
-    return function addFiles(_x3) {
+    return function (_x3) {
       return _ref2.apply(this, arguments);
     };
-  }();
-  var removeFile = function removeFile(id) {
+  }());
+  var removeFile = use_persist_fn(function (id) {
     var beforeCancel = props.beforeCancel,
       onErrorRemove = props.onErrorRemove;
     var file = filesState[id];
@@ -59421,8 +59866,8 @@ var useUpload = function useUpload(props) {
         onErrorRemove(file.xhr, file.blob, file);
       }
     }
-  };
-  var removeValue = function removeValue(index) {
+  });
+  var removeValue = use_persist_fn(function (index) {
     if (props.disabled) return;
     var recoverAble = props.recoverAble,
       beforeRemove = props.beforeRemove;
@@ -59434,15 +59879,15 @@ var useUpload = function useUpload(props) {
         newRecycle.push(value[index]);
       }
       setRecycleValues(newRecycle);
-      var newValue = utils_immer_produce(props.value, function (draft) {
+      var newValue = utils_immer_produce(latestState.value, function (draft) {
         draft.splice(index, 1);
       });
       props.onChange(newValue);
     }).catch(function () {});
-  };
-  var recoverValue = function recoverValue(index) {
+  });
+  var recoverValue = use_persist_fn(function (index) {
     if (props.disabled) return;
-    props.onChange(utils_immer_produce(props.value, function (draft) {
+    props.onChange(utils_immer_produce(latestState.value, function (draft) {
       draft.push(recycleValues[index]);
     }));
     setRecycleValues(function (pre) {
@@ -59450,7 +59895,7 @@ var useUpload = function useUpload(props) {
       newRecycle.splice(index, 1);
       return newRecycle;
     });
-  };
+  });
   var func = use_latest_obj({
     addFiles: addFiles,
     removeFile: removeFile,
@@ -62455,7 +62900,7 @@ var upload_interface = __webpack_require__(4412);
 
 
 /* harmony default export */ var src_0 = ({
-  version: '3.2.0-rc.4'
+  version: '3.2.0'
 });
 }();
 /******/ 	return __webpack_exports__;