shineout 3.0.0-alpha.19 → 3.0.0-alpha.20

package/cjs/index.js

@@ -456,6 +456,6 @@ exports.TYPE = _TYPE;
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var _default = {
-  version: '3.0.0-alpha.19'
+  version: '3.0.0-alpha.20'
 };
 exports.default = _default;

package/dist/shineout.js

@@ -4299,13 +4299,16 @@ exports["default"] = void 0;
 var dropdownTokens = {
   dropdownCaretMarginLeft: 'Margin-4',
   dropdownListBorderRadius: 'Radius-4',
-  dropdownListPadding: 'Padding-4',
+  dropdownListPaddingX: 'Padding-4',
+  dropdownListPaddingY: 'Padding-4',
   dropdownListFontSize: '14/regular',
   dropdownListSmallBorderRadius: 'Radius-4',
-  dropdownListSmallPadding: '[object Object]',
+  dropdownListSmallPaddingX: 'Padding-4',
+  dropdownListSmallPaddingY: 'Padding-4',
   dropdownListSmallFontSize: '12/regular',
   dropdownListLargeBorderRadius: 'Radius-4',
-  dropdownListLargePadding: '[object Object]',
+  dropdownListLargePaddingX: 'Padding-4',
+  dropdownListLargePaddingY: 'Padding-4',
   dropdownListLargeFontSize: '16/regular',
   dropdownListBackgroundColor: 'Neutral-fill-1',
   dropdownListBorderColor: 'Neutral-border-1',
@@ -19101,7 +19104,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.0.0-alpha.19');
+/* harmony default export */ var version = ('3.0.0-alpha.20');
 ;// CONCATENATED MODULE: ../shineout-style/src/jss-style/index.tsx
 
 
@@ -22074,7 +22077,7 @@ var dropdown = {
     fontSize: esm/* default.dropdownListFontSize */.ZP.dropdownListFontSize,
     border: "".concat(esm/* default.dropdownListBorderWidth */.ZP.dropdownListBorderWidth, " solid ").concat(esm/* default.dropdownListBorderColor */.ZP.dropdownListBorderColor),
     borderRadius: esm/* default.dropdownListBorderRadius */.ZP.dropdownListBorderRadius,
-    padding: "".concat(esm/* default.dropdownListPadding */.ZP.dropdownListPadding),
+    padding: "".concat(esm/* default.dropdownListPaddingY */.ZP.dropdownListPaddingY, " ").concat(esm/* default.dropdownListPaddingX */.ZP.dropdownListPaddingX),
     background: esm/* default.dropdownListBackgroundColor */.ZP.dropdownListBackgroundColor,
     boxShadow: esm/* default.dropdownListBoxShadow */.ZP.dropdownListBoxShadow,
     width: 'max-content',
@@ -22087,12 +22090,24 @@ var dropdown = {
   listSmall: {
     fontSize: esm/* default.dropdownListSmallFontSize */.ZP.dropdownListSmallFontSize,
     borderRadius: esm/* default.dropdownListSmallBorderRadius */.ZP.dropdownListSmallBorderRadius,
-    padding: "".concat(esm/* default.dropdownListSmallPaddingY */.ZP.dropdownListSmallPaddingY)
+    padding: "".concat(esm/* default.dropdownListSmallPaddingY */.ZP.dropdownListSmallPaddingY, " ").concat(esm/* default.dropdownListSmallPaddingX */.ZP.dropdownListSmallPaddingX)
   },
   listLarge: {
     fontSize: esm/* default.dropdownListLargeFontSize */.ZP.dropdownListLargeFontSize,
     borderRadius: esm/* default.dropdownListLargeBorderRadius */.ZP.dropdownListLargeBorderRadius,
-    padding: "".concat(esm/* default.dropdownListLargePaddingY */.ZP.dropdownListLargePaddingY)
+    padding: "".concat(esm/* default.dropdownListLargePaddingY */.ZP.dropdownListLargePaddingY, " ").concat(esm/* default.dropdownListLargePaddingX */.ZP.dropdownListLargePaddingX)
+  },
+  listHasChildren: {
+    '$wrapper[data-position^="left"] > &': {
+      '& > $itemWrapper > $item': {
+        '&::before': {
+          content: '""',
+          width: '1em',
+          marginLeft: esm/* default.dropdownCaretMarginLeft */.ZP.dropdownCaretMarginLeft,
+          display: 'inline-block'
+        }
+      }
+    }
   },
   boxList: {
     padding: "".concat(esm/* default.dropdownColumnPaddingY */.ZP.dropdownColumnPaddingY, " ").concat(esm/* default.dropdownColumnPaddingX */.ZP.dropdownColumnPaddingX),
@@ -22109,9 +22124,15 @@ var dropdown = {
     '$wrapper[data-position^="right"] > $button & > svg': {
       transform: 'rotate(-90deg)'
     },
-    '$wrapper[data-position^="left"] > $button & > svg': {
-      transform: 'rotate(90deg)'
+    '$wrapper[data-position^="left"] > $button &': {
+      marginLeft: '0',
+      marginRight: esm/* default.dropdownCaretMarginLeft */.ZP.dropdownCaretMarginLeft,
+      textAlign: 'right',
+      '& > svg': {
+        transform: 'rotate(90deg)'
+      }
     },
+    '$wrapper[data-position^="left"] > $button & > svg': {},
     '$wrapper[data-position^="top"] > $button & > svg': {
       transform: 'rotate(180deg)'
     }
@@ -22865,7 +22886,11 @@ var ImageStyle = {
     outline: 'none',
     width: 32,
     height: 32,
-    color: '#666C7C'
+    color: '#666C7C',
+    // hover
+    '&:hover': {
+      color: '#666C7C'
+    }
   },
   // gallery
   gallery: {
@@ -25414,7 +25439,10 @@ var selectStyle = objectSpread2_default()(objectSpread2_default()({
     '& $compressedWrapper': {
       flexWrap: 'nowrap'
     },
-    '& $placeholder': {}
+    '& $placeholder': {},
+    '& $arrowIconOpen': {
+      transform: 'none'
+    }
   },
   multipleCompressedWrapper: {
     flexWrap: 'nowrap'
@@ -27790,7 +27818,7 @@ var getCardStyle = function getCardStyle() {
 };
 var getLineStyle = function getLineStyle() {
   return {
-    '&[data-soui-position^="left-"][data-soui-shape="line"]': objectSpread2_default()({
+    '&[data-soui-position^="left-"][data-soui-shape="line"]': objectSpread2_default()(objectSpread2_default()({
       '& $hr': {
         right: 0,
         width: 1,
@@ -27801,8 +27829,14 @@ var getLineStyle = function getLineStyle() {
       bottom: 0,
       right: 0,
       width: 2
-    })),
-    '&[data-soui-position^="right-"][data-soui-shape="line"]': objectSpread2_default()({
+    })), {}, {
+      '& :not([data-soui-state="active"])$tab': {
+        '&:after': {
+          display: 'none'
+        }
+      }
+    }),
+    '&[data-soui-position^="right-"][data-soui-shape="line"]': objectSpread2_default()(objectSpread2_default()({
       '& $hr': {
         left: 0,
         width: 1,
@@ -27813,7 +27847,13 @@ var getLineStyle = function getLineStyle() {
       bottom: 0,
       left: 0,
       width: 2
-    })),
+    })), {}, {
+      '& :not([data-soui-state="active"])$tab': {
+        '&:after': {
+          display: 'none'
+        }
+      }
+    }),
     '&[data-soui-position^="top-"][data-soui-shape="line"]': objectSpread2_default()({
       '& $hr': {
         bottom: 0,
@@ -27826,7 +27866,7 @@ var getLineStyle = function getLineStyle() {
       right: 0,
       height: 2
     })),
-    '&[data-soui-position^="bottom-"][data-soui-shape="line"]': objectSpread2_default()({
+    '&[data-soui-position^="bottom-"][data-soui-shape="line"]': objectSpread2_default()(objectSpread2_default()({
       '& $hr': {
         top: 0,
         height: 1,
@@ -27837,7 +27877,13 @@ var getLineStyle = function getLineStyle() {
       left: 0,
       right: 0,
       height: 2
-    }))
+    })), {}, {
+      '& :not([data-soui-state="active"])$tab': {
+        '&:after': {
+          display: 'none'
+        }
+      }
+    })
   };
 };
 var getDashStyle = function getDashStyle() {
@@ -28252,6 +28298,17 @@ var tabsStyle = {
           color: esm/* default.tabsDisabledFontColor */.ZP.tabsDisabledFontColor,
           cursor: 'not-allowed'
         },
+        '&:not([data-soui-state="active"])': {
+          '&:after': {
+            position: 'absolute',
+            content: '""',
+            bottom: 0,
+            left: 0,
+            width: '100%',
+            height: 1,
+            background: esm/* default.tabsBorderColor */.ZP.tabsBorderColor
+          }
+        },
         '&:not([data-soui-state="active"]):not([data-soui-state="disabled"]):hover $lineInner': {
           background: esm/* default.tabsHoverBackgroundColor */.ZP.tabsHoverBackgroundColor
         },
@@ -29634,7 +29691,9 @@ var treeSelectStyle = objectSpread2_default()(objectSpread2_default()({
     backgroundColor: esm/* default.treeSelectPanelBackgroundColor */.ZP.treeSelectPanelBackgroundColor,
     boxShadow: esm/* default.treeSelectPanelShadow */.ZP.treeSelectPanelShadow,
     borderRadius: esm/* default.treeSelectPanelRadius */.ZP.treeSelectPanelRadius,
-    transformOrigin: '0 0'
+    transformOrigin: '0 0',
+    width: 'max-content',
+    maxWidth: '640px'
   },
   clearable: {},
   clearIcon: {
@@ -30682,11 +30741,15 @@ var getPositionStyle = function getPositionStyle(position, config) {
   var _ref = config || {},
     _ref$popupGap = _ref.popupGap,
     popupGap = _ref$popupGap === void 0 ? 0 : _ref$popupGap;
-  var mainMargin = "calc(100% + ".concat(popupGap, "px");
-  var halfMargin = "calc(50% + ".concat(popupGap, "px");
+  var mainMargin = "calc(100% + ".concat(popupGap, "px)");
+  var halfMargin = "calc(50% + ".concat(popupGap, "px)");
   var newStyle = {
     zIndex: config === null || config === void 0 ? void 0 : config.zIndex
   };
+  if (config !== null && config !== void 0 && config.fixedWidth) {
+    var key = config.fixedWidth === 'min' ? 'minWidth' : 'width';
+    newStyle[key] = '100%';
+  }
   if (position === 'drop-down') {
     newStyle.top = mainMargin;
     newStyle.left = 0;
@@ -30957,6 +31020,12 @@ function isInDocument(element) {
 
 var horizontalPosition = ['left-bottom', 'left-top', 'right-bottom', 'right-top', 'left', 'right'];
 var verticalPosition = ['bottom-left', 'bottom-right', 'top-left', 'top-right', 'bottom', 'top'];
+var hideStyle = {
+  pointerEvents: 'none',
+  position: 'absolute',
+  zIndex: -1000,
+  opacity: 0
+};
 var usePositionStyle = function usePositionStyle(config) {
   var _ref = config || {},
     absolute = _ref.absolute,
@@ -30968,17 +31037,13 @@ var usePositionStyle = function usePositionStyle(config) {
     _ref$popupGap = _ref.popupGap,
     popupGap = _ref$popupGap === void 0 ? 2 : _ref$popupGap,
     getContainer = _ref.getContainer,
-    parentEl = _ref.parentEl,
-    popupEl = _ref.popupEl,
-    visibleEl = _ref.visibleEl,
+    parentElRef = _ref.parentElRef,
+    popupElRef = _ref.popupElRef,
+    scrollElRef = _ref.scrollElRef,
     updateKey = _ref.updateKey,
     adjust = _ref.adjust;
   // 初次渲染无样式的时候， 隐藏展示
-  var _useState = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)({
-      pointerEvents: 'none',
-      position: 'absolute',
-      zIndex: -1000
-    }),
+  var _useState = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(hideStyle),
     _useState2 = slicedToArray_default()(_useState, 2),
     style = _useState2[0],
     setStyle = _useState2[1];
@@ -31018,12 +31083,12 @@ var usePositionStyle = function usePositionStyle(config) {
     return newPosition;
   };
   var getPopUpInfo = function getPopUpInfo(parentRect) {
-    var _popupEl$parentElemen;
-    if (!popupEl) return {
+    var _popupElRef$current$p;
+    if (!popupElRef.current) return {
       width: 0,
       height: 0
     };
-    var el = popupEl.cloneNode(true);
+    var el = popupElRef.current.cloneNode(true);
     el.style.visibility = 'true';
     el.style.opacity = '0';
     el.style.pointerEvents = 'none';
@@ -31032,7 +31097,7 @@ var usePositionStyle = function usePositionStyle(config) {
       var widthKey = fixedWidth === 'min' ? 'minWidth' : 'width';
       el.style[widthKey] = parentRect.width + 'px';
     }
-    (_popupEl$parentElemen = popupEl.parentElement) === null || _popupEl$parentElemen === void 0 ? void 0 : _popupEl$parentElemen.appendChild(el);
+    (_popupElRef$current$p = popupElRef.current.parentElement) === null || _popupElRef$current$p === void 0 ? void 0 : _popupElRef$current$p.appendChild(el);
     var height = el.offsetHeight;
     var width = el.offsetWidth;
     el.remove();
@@ -31053,6 +31118,7 @@ var usePositionStyle = function usePositionStyle(config) {
     var targetPosition = position;
     var rootContainer = getContainer() || document.body;
     var containerRect = rootContainer.getBoundingClientRect();
+    var bodyRect = (document.documentElement || document.body).getBoundingClientRect();
     var containerScrollBarWidth = rootContainer.offsetWidth - rootContainer.clientWidth;
     var containerScroll = {
       left: rootContainer.scrollLeft,
@@ -31071,20 +31137,20 @@ var usePositionStyle = function usePositionStyle(config) {
         style.left = rect.left - containerRect.left + containerScroll.left;
         style.transform = '';
         if (adjust) {
-          overRight = rect.left + context.popUpWidth - containerRect.right + containerScrollBarWidth;
+          overRight = rect.left + context.popUpWidth - bodyRect.right + containerScrollBarWidth;
         }
       } else if (h === 'right') {
         style.right = containerRect.right - rect.right + containerScrollBarWidth - containerScroll.left;
         style.left = 'auto';
         style.transform = '';
-        if (adjust) overLeft = containerRect.left - (rect.right - context.popUpWidth);
+        if (adjust) overLeft = bodyRect.left - (rect.right - context.popUpWidth);
       } else {
         // 居中对齐
         style.left = rect.left + rect.width / 2 - containerRect.left + containerScroll.left;
         style.transform = 'translateX(-50%)';
         if (adjust) {
-          overRight = rect.left + rect.width / 2 + context.popUpWidth / 2 - containerRect.width + containerScrollBarWidth;
-          overLeft = containerRect.left - (rect.left + rect.width / 2 - context.popUpWidth / 2);
+          overRight = rect.left + rect.width / 2 + context.popUpWidth / 2 - bodyRect.width + containerScrollBarWidth;
+          overLeft = bodyRect.left - (rect.left + rect.width / 2 - context.popUpWidth / 2);
         }
       }
       if (adjust) {
@@ -31131,12 +31197,13 @@ var usePositionStyle = function usePositionStyle(config) {
     return style;
   };
   var getAbsoluteStyle = function getAbsoluteStyle(position) {
-    if (!parentEl) return;
+    if (!parentElRef.current) return hideStyle;
     var rect = context.parentRect;
-    if (visibleEl) {
-      var visibleRect = (visibleEl === null || visibleEl === void 0 ? void 0 : visibleEl.getBoundingClientRect()) || {};
+    if (scrollElRef !== null && scrollElRef !== void 0 && scrollElRef.current) {
+      var _scrollElRef$current;
+      var visibleRect = ((_scrollElRef$current = scrollElRef.current) === null || _scrollElRef$current === void 0 ? void 0 : _scrollElRef$current.getBoundingClientRect()) || {};
       if (rect.bottom < visibleRect.top || rect.top > visibleRect.bottom || rect.right < visibleRect.left || rect.left > visibleRect.right) {
-        return;
+        return hideStyle;
       }
     }
     var style = getAbsolutePositionStyle(rect, position);
@@ -31147,8 +31214,8 @@ var usePositionStyle = function usePositionStyle(config) {
     var _ref2 = config || {},
       position = _ref2.position,
       absolute = _ref2.absolute;
-    if (!position || !show || !parentEl) return style;
-    context.parentRect = parentEl.getBoundingClientRect();
+    if (!position || !show || !parentElRef.current) return style;
+    context.parentRect = parentElRef.current.getBoundingClientRect();
     if (adjust) {
       var popupInfo = getPopUpInfo(context.parentRect);
       context.popUpHeight = popupInfo.height;
@@ -31158,7 +31225,8 @@ var usePositionStyle = function usePositionStyle(config) {
     if (!absolute) {
       newStyle = getPositionStyle(realPosition, {
         popupGap: popupGap,
-        zIndex: zIndex
+        zIndex: zIndex,
+        fixedWidth: fixedWidth
       });
     } else {
       newStyle = getAbsoluteStyle(realPosition);
@@ -31175,7 +31243,7 @@ var usePositionStyle = function usePositionStyle(config) {
       setStyle(newStyle);
     }
   });
-  (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(updateStyle, [show, position, absolute, parentEl, visibleEl, updateKey]);
+  (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(updateStyle, [show, position, absolute, updateKey]);
   return style;
 };
 /* harmony default export */ var use_position_style = ((/* unused pure expression or super */ null && (usePositionStyle)));
@@ -31791,8 +31859,13 @@ var getRootContainer = function getRootContainer(props) {
   if (!root || isInDocument(root) === false) {
     root = document.createElement('div');
     root.setAttribute('style', 'contain: size');
+    if (defaultContainer) {
+      defaultContainer.appendChild(root);
+    }
   }
-  if (defaultContainer && root.parentElement !== defaultContainer) {
+  if (is_isBrowser() && defaultContainer &&
+  // body在微前端会被劫持导致死循环
+  defaultContainer !== document.body && root.parentElement !== defaultContainer) {
     defaultContainer.appendChild(root);
   }
   return root;
@@ -31851,13 +31924,13 @@ var AbsoluteList = function AbsoluteList(props) {
   var absolute = props.absolute,
     position = props.position,
     children = props.children,
-    parentElement = props.parentElement,
-    scrollElement = props.scrollElement,
+    parentElRef = props.parentElRef,
+    scrollElRef = props.scrollElRef,
     fixedWidth = props.fixedWidth,
     _props$zIndex = props.zIndex,
     zIndex = _props$zIndex === void 0 ? 1051 : _props$zIndex,
     focus = props.focus,
-    popupEl = props.popupEl,
+    popupElRef = props.popupElRef,
     updateKey = props.updateKey,
     popupGap = props.popupGap,
     adjust = props.adjust,
@@ -31875,12 +31948,12 @@ var AbsoluteList = function AbsoluteList(props) {
     getContainer: getRoot,
     position: position,
     absolute: !!absolute,
-    parentEl: parentElement,
+    parentElRef: parentElRef,
     show: focus,
     fixedWidth: fixedWidth,
     zIndex: zIndex,
-    visibleEl: scrollElement,
-    popupEl: popupEl,
+    scrollElRef: scrollElRef,
+    popupElRef: popupElRef,
     updateKey: updateKey,
     popupGap: popupGap,
     adjust: adjust
@@ -32301,10 +32374,10 @@ var List = function List(props) {
     }), /*#__PURE__*/(0,jsx_runtime.jsx)(absolute_list, {
       position: position,
       focus: open,
-      parentElement: targetRef.current,
+      parentElRef: targetRef,
       absolute: true,
       fixedWidth: 'min',
-      popupEl: popupRef.current,
+      popupElRef: popupRef,
       adjust: true,
       children: /*#__PURE__*/(0,jsx_runtime.jsx)(animation_list, {
         className: classnames_default()(classes === null || classes === void 0 ? void 0 : classes.dropdown),
@@ -35442,8 +35515,8 @@ var Popover = function Popover(props) {
   };
   return /*#__PURE__*/(0,jsx_runtime.jsx)(absolute_list, {
     focus: open,
-    parentElement: targetRef.current,
-    popupEl: popupRef.current,
+    parentElRef: targetRef,
+    popupElRef: popupRef,
     absolute: typeof props.getPopupContainer === 'function' ? props.getPopupContainer : true,
     position: position,
     fixedWidth: false,
@@ -40160,8 +40233,8 @@ var Cascader = function Cascader(props0) {
       zIndex: zIndex,
       position: position,
       popupGap: 4,
-      popupEl: popupRef.current,
-      parentElement: targetRef.current,
+      popupElRef: popupRef,
+      parentElRef: targetRef,
       children: /*#__PURE__*/(0,jsx_runtime.jsx)(animation_list, {
         onRef: popupRef,
         show: open,
@@ -44989,8 +45062,8 @@ var DatePicker = function DatePicker(props0) {
       width: props.width
     }, props.style),
     children: [tipNode, renderResult(), /*#__PURE__*/(0,jsx_runtime.jsx)(absolute_list, {
-      parentElement: targetRef.current,
-      popupEl: popupRef.current,
+      parentElRef: targetRef,
+      popupElRef: popupRef,
       absolute: props.absolute,
       zIndex: props.zIndex,
       position: position,
@@ -46050,8 +46123,8 @@ var positionMap = {
   'bottom-left': 'right-top',
   left: 'left',
   right: 'right',
-  top: 'right',
-  bottom: 'right',
+  top: 'right-bottom',
+  bottom: 'right-top',
   auto: ''
 };
 var Dropdown = function Dropdown(props) {
@@ -46174,6 +46247,9 @@ var Dropdown = function Dropdown(props) {
       }, index);
     });
   };
+  var hasChildren = data.some(function (d) {
+    return d.children;
+  });
   var targetProps = getTargetProps();
   return /*#__PURE__*/(0,jsx_runtime.jsxs)("div", objectSpread2_default()(objectSpread2_default()({
     className: classnames_default()(className, dropdownClasses === null || dropdownClasses === void 0 ? void 0 : dropdownClasses.wrapper, !isSub && open && (dropdownClasses === null || dropdownClasses === void 0 ? void 0 : dropdownClasses.open)),
@@ -46185,15 +46261,15 @@ var Dropdown = function Dropdown(props) {
     children: [renderButton(), /*#__PURE__*/(0,jsx_runtime.jsx)(absolute_list, {
       position: position,
       focus: open,
-      parentElement: targetRef.current,
+      parentElRef: targetRef,
       absolute: absolute,
       fixedWidth: 'min',
       popupGap: 4,
-      popupEl: popupRef.current,
+      popupElRef: popupRef,
       adjust: !isSub,
       children: /*#__PURE__*/(0,jsx_runtime.jsx)(animation_list, {
         display: columns ? 'grid' : 'block',
-        className: classnames_default()(dropdownClasses === null || dropdownClasses === void 0 ? void 0 : dropdownClasses.list, columns !== undefined && columns > 1 && (dropdownClasses === null || dropdownClasses === void 0 ? void 0 : dropdownClasses.boxList), size === 'small' && (dropdownClasses === null || dropdownClasses === void 0 ? void 0 : dropdownClasses.listSmall), size === 'large' && (dropdownClasses === null || dropdownClasses === void 0 ? void 0 : dropdownClasses.listLarge)),
+        className: classnames_default()(dropdownClasses === null || dropdownClasses === void 0 ? void 0 : dropdownClasses.list, hasChildren && (dropdownClasses === null || dropdownClasses === void 0 ? void 0 : dropdownClasses.listHasChildren), columns !== undefined && columns > 1 && (dropdownClasses === null || dropdownClasses === void 0 ? void 0 : dropdownClasses.boxList), size === 'small' && (dropdownClasses === null || dropdownClasses === void 0 ? void 0 : dropdownClasses.listSmall), size === 'large' && (dropdownClasses === null || dropdownClasses === void 0 ? void 0 : dropdownClasses.listLarge)),
         style: {
           width: width,
           gridTemplateColumns: columns ? "repeat(".concat(columns, ", 1fr)") : undefined
@@ -46694,11 +46770,8 @@ var EditableArea = function EditableArea(props) {
     bordered = _props$bordered === void 0 ? false : _props$bordered;
   var editableAreaStyle = jssStyle === null || jssStyle === void 0 ? void 0 : (_jssStyle$editableAre = jssStyle.editableArea) === null || _jssStyle$editableAre === void 0 ? void 0 : _jssStyle$editableAre.call(jssStyle);
   var status = error ? 'error' : props.status;
-  var _React$useRef = external_root_React_commonjs2_react_commonjs_react_amd_react_default().useRef({
-      wrapper: null,
-      textarea: null
-    }),
-    context = _React$useRef.current;
+  var textareaRef = external_root_React_commonjs2_react_commonjs_react_amd_react_default().useRef(null);
+  var wrapperRef = external_root_React_commonjs2_react_commonjs_react_amd_react_default().useRef(null);
   var _useInputAble = useInputAble({
       control: 'value' in props,
       value: props.value,
@@ -46714,9 +46787,9 @@ var EditableArea = function EditableArea(props) {
     show = _useState2[0],
     setShow = _useState2[1];
   (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
-    if (show && context.textarea) {
+    if (show && textareaRef.current) {
       setTimeout(function () {
-        if (show && context.textarea) context.textarea.focus();
+        if (show && textareaRef.current) textareaRef.current.focus();
       });
     }
   }, [show]);
@@ -46763,14 +46836,13 @@ var EditableArea = function EditableArea(props) {
     return /*#__PURE__*/(0,jsx_runtime.jsx)(absolute_list, {
       absolute: getPopupContainer || true,
       focus: show,
-      parentElement: context.wrapper,
+      parentElRef: wrapperRef,
+      popupElRef: textareaRef,
       fixedWidth: true,
       position: 'cover',
       children: /*#__PURE__*/(0,jsx_runtime.jsx)(src_textarea_textarea, {
         jssStyle: jssStyle,
-        textareaRef: function textareaRef(el) {
-          context.textarea = el;
-        },
+        textareaRef: textareaRef,
         status: status,
         placeholder: placeholder,
         className: classnames_default()(editableAreaStyle === null || editableAreaStyle === void 0 ? void 0 : editableAreaStyle.popup, show && (editableAreaStyle === null || editableAreaStyle === void 0 ? void 0 : editableAreaStyle.popupShow)),
@@ -46805,9 +46877,7 @@ var EditableArea = function EditableArea(props) {
     style: objectSpread2_default()(objectSpread2_default()({}, style), {}, {
       width: width
     }),
-    ref: function ref(el) {
-      context.wrapper = el;
-    },
+    ref: wrapperRef,
     children: [renderPlaceholder(), renderClear(), renderPopup()]
   });
 };
@@ -51844,8 +51914,7 @@ function Select(props0) {
     keygen = props.keygen,
     _props$focusSelected = props.focusSelected,
     focusSelected = _props$focusSelected === void 0 ? true : _props$focusSelected,
-    _props$optionWidth = props.optionWidth,
-    optionWidth = _props$optionWidth === void 0 ? '100%' : _props$optionWidth,
+    optionWidth = props.optionWidth,
     _props$height = props.height,
     height = _props$height === void 0 ? 250 : _props$height,
     openProp = props.open,
@@ -52213,7 +52282,7 @@ function Select(props0) {
       return renderClearable();
     }
     if (!multiple && !showArrow) return null;
-    var defaultIcon = compressed ? icons.More : icons.ArrowDown;
+    var defaultIcon = multiple ? icons.More : icons.ArrowDown;
     return /*#__PURE__*/(0,jsx_runtime.jsx)("span", {
       className: classnames_default()(styles.arrowIcon, open && !compressed && styles.arrowIconOpen),
       onClick: handleResultClick,
@@ -52366,18 +52435,11 @@ function Select(props0) {
   };
   var getListStyle = function getListStyle() {
     var style = {};
-    if (autoAdapt) {
-      if (width) {
-        style.minWidth = width || 'auto';
-      } else {
-        style.width = width || 'auto';
-      }
-      return style;
-    } else {
+    {
       if (columns > 1) {
         style.width = columns * columnWidth;
-      } else {
-        style.width = ('optionWidth' in props ? optionWidth : undefined) || width || '100%';
+      } else if (optionWidth) {
+        style.width = optionWidth;
       }
     }
     return style;
@@ -52402,8 +52464,8 @@ function Select(props0) {
       zIndex: props.zIndex,
       position: position,
       popupGap: 4,
-      popupEl: popupRef.current,
-      parentElement: targetRef.current,
+      popupElRef: popupRef,
+      parentElRef: targetRef,
       children: /*#__PURE__*/(0,jsx_runtime.jsxs)(animation_list, {
         onRef: popupRef,
         show: open,
@@ -59607,7 +59669,8 @@ var Tabs = function Tabs(props) {
     background = props.background,
     activeBackground = props.activeBackground,
     inactiveBackground = props.inactiveBackground,
-    defaultActive = props.defaultActive,
+    _props$defaultActive = props.defaultActive,
+    defaultActive = _props$defaultActive === void 0 ? 0 : _props$defaultActive,
     tabBarStyle = props.tabBarStyle,
     color = props.color,
     sticky = props.sticky,
@@ -59978,7 +60041,8 @@ var Tooltip = function Tooltip(props) {
       }
     }, 'ns'), /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.cloneElement)(inner, events), /*#__PURE__*/(0,jsx_runtime.jsx)(absolute_list, {
       focus: open,
-      parentElement: targetRef.current,
+      parentElRef: targetRef,
+      popupElRef: popupRef,
       absolute: true,
       position: position,
       fixedWidth: false,
@@ -60971,7 +61035,7 @@ var useTiled = function useTiled(props) {
 
 
 var TreeSelect = function TreeSelect(props0) {
-  var _jssStyle$select;
+  var _jssStyle$treeSelect;
   var props = use_with_form_config(props0);
   var _useConfig = useConfig(),
     locale = _useConfig.locale;
@@ -61037,7 +61101,7 @@ var TreeSelect = function TreeSelect(props0) {
     onChangeAddition = props.onChangeAddition,
     onEnterExpand = props.onEnterExpand,
     onExpand = props.onExpand;
-  var styles = jssStyle === null || jssStyle === void 0 ? void 0 : (_jssStyle$select = jssStyle.select) === null || _jssStyle$select === void 0 ? void 0 : _jssStyle$select.call(jssStyle);
+  var styles = jssStyle === null || jssStyle === void 0 ? void 0 : (_jssStyle$treeSelect = jssStyle.treeSelect) === null || _jssStyle$treeSelect === void 0 ? void 0 : _jssStyle$treeSelect.call(jssStyle);
   var rootStyle = Object.assign({
     width: width
   }, style);
@@ -61456,13 +61520,13 @@ var TreeSelect = function TreeSelect(props0) {
     children: [tipNode, renderResult(), renderIcon(), /*#__PURE__*/(0,jsx_runtime.jsx)(absolute_list, {
       adjust: true,
       focus: open,
-      fixedWidth: true,
+      fixedWidth: "min",
       absolute: props.absolute,
       zIndex: props.zIndex,
       position: position,
       popupGap: 4,
-      popupEl: popupRef.current,
-      parentElement: targetRef.current,
+      popupElRef: popupRef,
+      parentElRef: targetRef,
       children: /*#__PURE__*/(0,jsx_runtime.jsx)(animation_list, {
         onRef: popupRef,
         show: open,
@@ -61470,9 +61534,6 @@ var TreeSelect = function TreeSelect(props0) {
         display: 'block',
         type: "scale-y",
         duration: 'fast',
-        style: {
-          width: width || '100%'
-        },
         children: renderList()
       })
     })]
@@ -64991,7 +65052,7 @@ var upload_interface = __webpack_require__(7818);
 
 
 /* harmony default export */ var src_0 = ({
-  version: '3.0.0-alpha.19'
+  version: '3.0.0-alpha.20'
 });
 }();
 /******/ 	return __webpack_exports__;