shineout 3.6.0-beta.5 → 3.6.0-beta.6

package/cjs/index.js

@@ -507,5 +507,5 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 // 此文件由脚本自动生成，请勿直接修改。
 // This file was generated automatically by a script. Please do not modify it directly.
 var _default = exports.default = {
-  version: '3.6.0-beta.5'
+  version: '3.6.0-beta.6'
 };

package/dist/shineout.js

@@ -4116,11 +4116,18 @@ const figma = [
     describe: '分割线',
     locked: false,
   },
+  {
+    name: '填充色',
+    token: 'Neutral-fill-7',
+    value: '#666C7C',
+    describe: '',
+    locked: true,
+  },
   {
     name: '填充色',
     token: 'Neutral-fill-5',
     value: '#B3B7C1',
-    describe: '点击',
+    describe: '',
     locked: true,
   },
   {
@@ -12115,7 +12122,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.6.0-beta.5');
+/* harmony default export */ var version = ('3.6.0-beta.6');
 ;// CONCATENATED MODULE: ../shineout-style/src/jss-style/index.tsx
 
 
@@ -12441,6 +12448,7 @@ var Token = {
   'Neutral-text-1': '#FFFFFF',
   'Neutral-border-2': '#CCCFD7',
   'Neutral-border-1': '#E8EBF0',
+  'Neutral-fill-7': '#666C7C',
   'Neutral-fill-5': '#B3B7C1',
   'Neutral-fill-9': '#141737',
   'Neutral-fill-10': '#020B18',
@@ -13359,7 +13367,8 @@ var checkboxTokens = {
 
 var collapseTokens = {
   collapseIconColor: 'Neutral-text-4',
-  collapseIconHoverBackgroundColor: 'Neutral-fill-3',
+  collapseIconHoverBackgroundColor: 'Neutral-fill-2',
+  collapseIconActiveBackgroundColor: 'Neutral-fill-3',
   collapseExtraMargin: 'Spacing-24',
   collapseWrapperBorderSize: 'Border-1',
   collapseWrapperBorderRadius: 'Radius-default',
@@ -13520,7 +13529,7 @@ var datePickerTokens = {
 var descriptionsTokens = {
   descriptionsTitlePaddingBottom: 'Spacing-12',
   descriptionsLabelPaddingBottom: 'Spacing-12',
-  descriptionsLabelPaddingRight: 'Spacing-24',
+  descriptionsLabelPaddingRight: 'Spacing-8',
   descriptionsValuePaddingBottom: 'Spacing-12',
   descriptionsTitleSmallSize: 'Font-14',
   descriptionsTitleDefaultSize: 'Font-16',
@@ -15160,14 +15169,15 @@ var treeSelectTokens = {
 // This file was generated automatically by a script. Please do not modify it directly.
 
 var uploadTokens = {
-  uploadResultPaddingX: 'Spacing-16',
+  uploadResultPaddingX: 'Spacing-12',
   uploadResultPaddingY: 'Spacing-5',
   uploadResultBackgroundColor: 'Neutral-fill-2',
   uploadResultGap: 'Spacing-4',
   uploadResultMarginY: 'Spacing-8',
   uploadResultIconSize: 'Size-7',
-  uploadResultIconColor: 'Neutral-text-4',
-  uploadResultIconHoverBackgroundColor: 'Neutral-fill-2',
+  uploadResultIconColor: 'Neutral-text-5',
+  uploadResultIconHoverBackgroundColor: 'Neutral-fill-3',
+  uploadResultIconHoverColor: 'Brand-6',
   uploadResultFontSize: 'Font-14',
   uploadResultFontColor: 'Neutral-text-5',
   uploadResultBorderRadius: 'Radius-default',
@@ -15177,16 +15187,19 @@ var uploadTokens = {
   uploadResultDeletedFontColor: 'Neutral-text-3',
   uploadResultUploadingIconColor: 'Brand-6',
   uploadImageBorderRadius: 'Radius-default',
-  uploadImageHandlerBorderColor: 'Neutral-border-1',
+  uploadImageHandlerBorderColor: 'Neutral-border-2',
   uploadImageHandlerBackgroundColor: 'Neutral-fill-1',
   uploadImageHandlerFontColor: 'Neutral-text-4',
   uploadImageHandlerHoverBorderColor: 'Brand-6',
   uploadImageHandlerHoverFontColor: 'Brand-6',
+  uploadImageHandlerActiveBorderColor: 'Brand-7',
+  uploadImageHandlerActiveFontColor: 'Brand-7',
   uploadImageHandlerErrorBorderColor: 'Danger-6',
   uploadImageHandlerErrorFontColor: 'Danger-6',
   uploadImageHandlerDisabledBorderColor: 'Neutral-border-2',
   uploadImageHandlerDisabledBackgroundColor: 'Neutral-fill-2',
   uploadImageHandlerDisabledFontColor: 'Neutral-text-2',
+  uploadImageHandlerIconColor: 'Neutral-text-3',
   uploadImageResultBorderColor: 'Neutral-border-1',
   uploadImageResultBtnSize: 'Size-7',
   uploadImageResultBtnCloseColor: 'Danger-6',
@@ -17662,7 +17675,6 @@ var collapseItemStyle = {
     justifyContent: 'space-between',
     boxSizing: 'border-box',
     overflow: 'hidden',
-    gap: src.collapseHeaderGap,
     fontSize: src.collapseHeaderFontSize,
     fontWeight: src.collapseHeaderFontWeight,
     color: src.collapseHeaderColor,
@@ -17702,6 +17714,7 @@ var collapseItemStyle = {
     color: src.collapseIconColor,
     lineHeight: src.lineHeightDynamic,
     zIndex: 0,
+    marginRight: src.collapseHeaderGap,
     '& svg': {
       zIndex: 1,
       width: src.collapseHeaderIconWidth
@@ -17719,6 +17732,11 @@ var collapseItemStyle = {
         borderRadius: '50%',
         background: src.collapseIconHoverBackgroundColor
       }
+    },
+    '&:active:hover': {
+      '&:after': {
+        background: src.collapseIconActiveBackgroundColor
+      }
     }
   },
   title: {
@@ -18882,6 +18900,10 @@ var dropdown_dropdown = {
     minWidth: '0',
     '& + $caret': {
       marginLeft: src.dropdownCaretMarginLeft
+    },
+    '& > svg': {
+      display: 'block',
+      margin: '0 auto'
     }
   },
   button: {
@@ -24566,7 +24588,7 @@ var stepsStyle = {
       overflow: 'hidden'
     },
     '& $icon': {
-      marginRight: 12
+      marginRight: 16
     },
     '& $title, $description': {
       textAlign: 'left'
@@ -24696,11 +24718,13 @@ var stepsStyle = {
       },
       '& $icon': {
         lineHeight: 0,
+        marginRight: 6,
         padding: '8px 10px'
       },
       '& $process': {
         '& $icon': {
           marginTop: 0,
+          marginRight: 8,
           padding: '7px 8px'
         },
         '& $tail': {
@@ -26715,6 +26739,8 @@ var TagStyle = {
   rootClass: {},
   tag: {
     display: 'inline-flex',
+    // 消除 inline-flex 看不见的空白高度
+    verticalAlign: 'top',
     padding: "".concat(src.tagPaddingY, " ").concat(src.tagPaddingX),
     fontSize: src.tagFontSize,
     fontWeight: src.tagFontWeight,
@@ -26726,11 +26752,25 @@ var TagStyle = {
     }
   },
   input: {
-    '&[data-soui-input-border]': {
-      width: 100,
-      '& input': {
-        padding: "0 ".concat(src.tagInputPaddingX)
-      }
+    paddingLeft: '0 !important',
+    paddingRight: '0 !important',
+    width: 100,
+    '& > div': {
+      padding: '0 !important'
+    },
+    '& > div > input': {
+      fontSize: src.tagFontSize,
+      padding: "0 ".concat(src.tagPaddingX),
+      lineHeight: "calc(".concat(src.tagFontSize, " + 8px)")
+    },
+    '$small& > div > input': {
+      padding: "0 ".concat(src.tagSmallPaddingX),
+      lineHeight: "calc(".concat(src.tagSmallFontSize, " + 6px)")
+    },
+    '$large& > div > input': {
+      fontSize: src.tagLargeFontSize,
+      padding: "0 ".concat(src.tagLargePaddingX),
+      lineHeight: "calc(".concat(src.tagLargeFontSize, " + 8px)")
     }
   },
   wrapper: {
@@ -28105,11 +28145,11 @@ var treeSelectStyle = objectSpread2_default()(objectSpread2_default()({
     // },
   },
   optionActive: {
-    color: src.treeSelectOptionActiveColor,
-    backgroundColor: src.treeSelectOptionActiveBackgroundColor,
-    '&>div': {
-      color: src.treeSelectOptionActiveColor
-    }
+    // color: token.treeSelectOptionActiveColor,
+    // backgroundColor: token.treeSelectOptionActiveBackgroundColor,
+    // '&>div': {
+    //   color: token.treeSelectOptionActiveColor,
+    // },
   },
   optionDisabled: {
     cursor: 'not-allowed',
@@ -28222,7 +28262,7 @@ var uploadStyle = {
       border: "1px dashed ".concat(src.uploadImageHandlerBorderColor),
       backgroundColor: src.uploadImageHandlerBackgroundColor,
       color: src.uploadImageHandlerFontColor,
-      '&:hover': {
+      '&:hover, &:hover *': {
         borderColor: src.uploadImageHandlerHoverBorderColor,
         color: src.uploadImageHandlerHoverFontColor
       },
@@ -28233,14 +28273,28 @@ var uploadStyle = {
       },
       '& svg': {
         color: src.uploadImageResultBtnRecoverColor
+      },
+      '&:active': {
+        color: src.uploadImageHandlerActiveFontColor,
+        borderColor: src.uploadImageHandlerActiveBorderColor
+      },
+      '&:active *': {
+        color: src.uploadImageHandlerActiveFontColor
       }
     }
   },
   result: {
     display: 'flex',
     alignItems: 'center',
-    marginTop: src.uploadResultMarginY,
-    gap: src.uploadResultGap
+    gap: '8px',
+    borderRadius: src.uploadResultBorderRadius,
+    padding: "".concat(src.uploadResultPaddingY, " ").concat(src.uploadResultPaddingX),
+    '&:hover': {
+      backgroundColor: src.uploadResultBackgroundColor
+    },
+    '$handler+&, $dropItem+&': {
+      marginTop: src.uploadResultMarginY
+    }
   },
   icon: {
     width: src.uploadResultIconSize,
@@ -28256,25 +28310,10 @@ var uploadStyle = {
     }
   },
   iconHover: {
-    position: 'relative',
-    '&::before': {
-      content: '""',
-      position: 'absolute',
-      top: '-5px',
-      left: '-5px',
-      right: '-5px',
-      bottom: '-5px',
+    '&:hover': {
+      color: src.uploadResultIconHoverColor,
       borderRadius: '50%',
-      display: 'none',
       backgroundColor: src.uploadResultIconHoverBackgroundColor
-    },
-    '& svg': {
-      position: 'relative'
-    },
-    '&:hover': {
-      '&::before': {
-        display: 'block'
-      }
     }
   },
   resultError: {},
@@ -28302,17 +28341,12 @@ var uploadStyle = {
     fontSize: src.uploadResultFontSize,
     color: src.uploadResultFontColor,
     lineHeight: src.lineHeightDynamic,
-    padding: "".concat(src.uploadResultPaddingY, " ").concat(src.uploadResultPaddingX),
-    borderRadius: src.uploadResultBorderRadius,
     '$resultError &': {
       color: src.uploadResultErrorFontColor
     },
     '$resultDeleted &': {
       textDecoration: 'line-through',
       color: src.uploadResultDeletedFontColor
-    },
-    '&:hover': {
-      backgroundColor: src.uploadResultBackgroundColor
     }
   },
   resultTextBody: {
@@ -28321,7 +28355,11 @@ var uploadStyle = {
   },
   resultClose: {
     cursor: 'pointer',
-    margin: '0 6px'
+    '&$icon': {
+      boxSizing: 'content-box',
+      padding: '0 4px',
+      height: src.lineHeightDynamic
+    }
   },
   imageHandler: {
     boxSizing: 'border-box',
@@ -28338,6 +28376,13 @@ var uploadStyle = {
       borderColor: src.uploadImageHandlerHoverBorderColor,
       color: src.uploadImageHandlerHoverFontColor
     },
+    '$wrapper:not($wrapperDisabled) &:hover *': {
+      color: "".concat(src.uploadImageHandlerHoverFontColor, " !important")
+    },
+    '$wrapper:not($wrapperDisabled) &:active, $wrapper:not($wrapperDisabled) &:active *': {
+      color: "".concat(src.uploadImageHandlerActiveFontColor, " !important"),
+      borderColor: src.uploadImageHandlerActiveBorderColor
+    },
     '$wrapperDisabled &': {
       borderColor: src.uploadImageHandlerDisabledBorderColor,
       backgroundColor: src.uploadImageHandlerDisabledBackgroundColor,
@@ -28347,9 +28392,13 @@ var uploadStyle = {
   imageHandlerIcon: {
     display: 'flex',
     alignItems: 'center',
+    color: src.uploadImageHandlerIconColor,
     '& > svg': {
       width: 20,
       height: 20
+    },
+    '$wrapperDisabled &': {
+      color: src.uploadImageHandlerDisabledFontColor
     }
   },
   imageResult: {
@@ -28487,10 +28536,20 @@ var uploadStyle = {
   dropItem: {
     ':not(wrapperDisabled) &[data-soui-dragover="true"]': {
       '& $handler, & $imageHandler, & $imageResult': {
-        borderColor: src.uploadImageHandlerHoverBorderColor,
-        borderStyle: 'dashed',
-        borderWidth: '2px',
+        borderColor: 'transparent !important',
+        color: src.uploadImageHandlerHoverFontColor,
+        position: 'relative'
+      },
+      '& $handler *, & $imageHandler *, & $imageResult *': {
         color: src.uploadImageHandlerHoverFontColor
+      },
+      '& $handler:after, & $imageHandler:after, & $imageResult:after': {
+        content: '" "',
+        position: 'absolute',
+        inset: 0,
+        pointerEvents: 'none',
+        border: "2px dashed ".concat(src.uploadImageHandlerHoverBorderColor),
+        borderRadius: src.uploadImageBorderRadius
       }
     }
   },
@@ -29991,9 +30050,6 @@ var usePositionStyle = function usePositionStyle(config) {
     };
     context.containerRect = containerRect;
     context.containerScroll = containerScroll;
-    console.log('======================');
-    console.log('targetPosition: >>', targetPosition);
-    console.log('======================');
     if (verticalPosition.includes(targetPosition)) {
       var _targetPosition$split = targetPosition.split('-'),
         _targetPosition$split2 = slicedToArray_default()(_targetPosition$split, 2),
@@ -33959,9 +34015,10 @@ var useCheckboxInputable = function useCheckboxInputable(props) {
   (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
     setCheckedState(!!props.value);
   }, [props.value]);
-  var onInputableCheckboxChange = function onInputableCheckboxChange(c) {
+  var onInputableCheckboxChange = function onInputableCheckboxChange(c, ignoreOnChange) {
     var _props$onChange;
     setCheckedState(c);
+    if (ignoreOnChange) return;
     props === null || props === void 0 || (_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, undefined, c, undefined);
   };
   var onInputChange = function onInputChange(_value) {
@@ -35340,7 +35397,7 @@ var checkbox_Checkbox = function Checkbox(props) {
 
     // 兼容Checkbox在createPortal中使用时，无法改变勾选状态的问题
     if ('value' in props && props.checked === undefined) {
-      onInputableCheckboxChange(checked);
+      onInputableCheckboxChange(checked, true);
     }
     if (props.onRawChange) {
       props.onRawChange(checked ? htmlValue : undefined, checked, htmlValue);
@@ -37440,6 +37497,7 @@ function use_tree_toArray(value) {
   if (!Array.isArray(value)) return [value];
   return value;
 }
+var global_tree_map = new Map();
 var MODE = {
   /**
    * 返回全选数据，包含父节点和子节点
@@ -39359,6 +39417,7 @@ var useTag = function useTag(props) {
 
 
 
+
 var TagInput = function TagInput(props) {
   var _jssStyle$tag;
   var value = props.value,
@@ -39399,7 +39458,7 @@ var TagInput = function TagInput(props) {
     size: size,
     style: style,
     inputRef: inputRef,
-    className: classnames_default()(tagStyle.input),
+    className: classnames_default()(tagStyle.input, defineProperty_default()(defineProperty_default()({}, tagStyle.small, size === 'small'), tagStyle.large, size === 'large')),
     jssStyle: jssStyle,
     onKeyUp: handleKeyUp,
     onChange: handleChange,
@@ -39494,6 +39553,7 @@ var Tag = function Tag(props) {
   };
   var renderInput = function renderInput() {
     return /*#__PURE__*/(0,jsx_runtime.jsx)(tag_input, {
+      size: size,
       value: value,
       className: classnames_default()(tagStyle.input),
       jssStyle: jssStyle,
@@ -40451,7 +40511,7 @@ var Cascader = function Cascader(props0) {
   });
   var renderClearable = function renderClearable() {
     if (!mode !== undefined && !showArrow) return null;
-    var defaultIcon = compressed ? icons_config.cascader.More : icons_config.cascader.DropdownArrow;
+    var defaultIcon = compressed || multiple ? icons_config.cascader.More : icons_config.cascader.DropdownArrow;
     var arrow = /*#__PURE__*/(0,jsx_runtime.jsx)("span", {
       className: classnames_default()(compressed && styles.compressedIcon, styles.arrowIcon, open && !compressed && styles.arrowIconOpen),
       onClick: handleResultClick,
@@ -42234,6 +42294,7 @@ var CollapseItem = function CollapseItem(props) {
     }, getHeaderIconProps({
       className: collapseItemIconClassName
     })), {}, {
+      role: "button",
       children: headerIcon
     }));
   };
@@ -42245,7 +42306,7 @@ var CollapseItem = function CollapseItem(props) {
     }));
   };
   var collapseItemClassName = classnames_default()(className, jssStyle === null || jssStyle === void 0 ? void 0 : jssStyle.collapseItem.wrapper, judgeExpanded && (jssStyle === null || jssStyle === void 0 ? void 0 : jssStyle.collapseItem.active), (disabled || triggerRegion === 'disabled') && (jssStyle === null || jssStyle === void 0 ? void 0 : jssStyle.collapseItem.disabled), !border && (jssStyle === null || jssStyle === void 0 ? void 0 : jssStyle.collapseItem.borderLess));
-  var collapseItemHeaderClassName = classnames_default()(jssStyle === null || jssStyle === void 0 ? void 0 : jssStyle.collapseItem.header, !showExpandIcon && (jssStyle === null || jssStyle === void 0 ? void 0 : jssStyle.collapseItem.noIcon), !triggerRegion && (jssStyle === null || jssStyle === void 0 ? void 0 : jssStyle.collapseItem.region));
+  var collapseItemHeaderClassName = classnames_default()(jssStyle === null || jssStyle === void 0 ? void 0 : jssStyle.collapseItem.header, !showExpandIcon && (jssStyle === null || jssStyle === void 0 ? void 0 : jssStyle.collapseItem.noIcon), triggerRegion !== 'icon' && (jssStyle === null || jssStyle === void 0 ? void 0 : jssStyle.collapseItem.region));
   var collapseItemContentClassName = classnames_default()(jssStyle === null || jssStyle === void 0 ? void 0 : jssStyle.collapseItem.content, judgeExpanded && (jssStyle === null || jssStyle === void 0 ? void 0 : jssStyle.collapseItem.expanded));
   var renderContent = function renderContent() {
     return /*#__PURE__*/(0,jsx_runtime.jsx)(animation_list, {
@@ -47392,7 +47453,8 @@ var Dropdown = function Dropdown(props) {
   var type = props.type,
     text = props.text,
     outline = props.outline,
-    mode = props.mode;
+    mode = props.mode,
+    shape = props.shape;
 
   // 默认使用 secondary text 样式
   if (type === undefined && text === undefined && outline === undefined && mode === undefined) {
@@ -47436,6 +47498,7 @@ var Dropdown = function Dropdown(props) {
       className: classnames_default()(dropdownClasses === null || dropdownClasses === void 0 ? void 0 : dropdownClasses.button, !placeholder && (dropdownClasses === null || dropdownClasses === void 0 ? void 0 : dropdownClasses.splitButton)),
       mode: mode,
       type: type,
+      shape: shape,
       size: size,
       text: text,
       children: child
@@ -56428,6 +56491,7 @@ var MenuItem = function MenuItem(props) {
     _useState2 = slicedToArray_default()(_useState, 2),
     popOpen = _useState2[0],
     setOpen = _useState2[1];
+  var liRef = external_root_React_commonjs2_react_commonjs_react_amd_react_default().useRef(null);
   var hasExpandAbleChildren = children.some(function (item) {
     return item && item.children && (props.looseChildren || item.children.length);
   });
@@ -56502,6 +56566,10 @@ var MenuItem = function MenuItem(props) {
     };
     if (shoudPop) {
       var position = isVertical || isSubHorizontal ? isUp ? 'right-bottom' : 'right-top' : 'bottom';
+      var offset = isVertical && props.isEdgeItem ? [0, 4] : undefined;
+      var popoverContentStyle = props.level === 0 && liRef.current ? {
+        minWidth: liRef.current.clientWidth
+      } : undefined;
       return /*#__PURE__*/(0,jsx_runtime.jsx)(src_popover_popover, {
         mouseLeaveDelay: toggleDuration,
         className: classnames_default()(classes === null || classes === void 0 ? void 0 : classes.popover),
@@ -56515,7 +56583,8 @@ var MenuItem = function MenuItem(props) {
         showArrow: mode !== 'horizontal',
         position: position,
         lazy: false,
-        offset: isVertical && props.isEdgeItem ? [0, 4] : undefined,
+        offset: offset,
+        style: popoverContentStyle,
         children: function children(close) {
           return content(close);
         }
@@ -56602,6 +56671,7 @@ var MenuItem = function MenuItem(props) {
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave,
     dir: config.direction,
+    ref: liRef,
     children: [renderItem(), renderChildren()]
   });
 };
@@ -65773,7 +65843,7 @@ var upload_result_Result = function Result(props) {
         className: uploadClasses === null || uploadClasses === void 0 ? void 0 : uploadClasses.imageBg,
         src: src,
         jssStyle: props.jssStyle,
-        fit: "center",
+        fit: "fill",
         width: "auto",
         height: 0
       }), /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
@@ -65967,6 +66037,7 @@ var Upload = function Upload(props0) {
         className: classnames_default()(listType === 'image' ? uploadClasses === null || uploadClasses === void 0 ? void 0 : uploadClasses.imageHandler : uploadClasses === null || uploadClasses === void 0 ? void 0 : uploadClasses.handler),
         style: listType === 'image' ? imageStyle : undefined
       }, wrapperProps), {}, {
+        role: "button",
         children: [listType === 'image' && (props.children || /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
           className: uploadClasses === null || uploadClasses === void 0 ? void 0 : uploadClasses.imageHandlerIcon,
           children: icons_config.upload.AddImage
@@ -68643,7 +68714,7 @@ var upload_interface = __webpack_require__(8821);
 
 
 /* harmony default export */ var src_0 = ({
-  version: '3.6.0-beta.5'
+  version: '3.6.0-beta.6'
 });
 }();
 /******/ 	return __webpack_exports__;