shineout 3.9.8 → 3.9.9-beta.2

package/cjs/index.js

@@ -522,5 +522,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.9.8'
+  version: '3.9.9-beta.2'
 };

package/dist/shineout.js

@@ -7299,7 +7299,7 @@ var config = {
     InfoLine: icons.InfoCircleFill,
     WarningLine: icons.WarningCircleFill,
     SuccessLine: icons.CheckCircleFill,
-    DangerLine: icons.Close
+    DangerLine: icons.CloseFill
   },
   rate: {
     Star: icons.StarFill
@@ -12402,7 +12402,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.9.8');
+/* harmony default export */ var version = ('3.9.9-beta.2');
 ;// CONCATENATED MODULE: ../shineout-style/src/jss-style/index.tsx
 
 
@@ -13828,7 +13828,7 @@ var datePickerTokens = {
   datePickerCellHeaderColor: 'Neutral-text-4',
   datePickerCellMarginY: 'Spacing-4',
   datePickerTimePanelPaddingX: 'Spacing-12',
-  datePickerTimePanelPaddingY: 'Spacing-7',
+  datePickerTimePanelPaddingY: 'Spacing-6',
   datePickerTimeListGap: 'Spacing-8',
   datePickerTimeItemHeight: 'Size-15',
   datePickerTimeItemBorderRadius: 'Radius-default',
@@ -14121,7 +14121,7 @@ var inputTokens = {
   inputBackgroundColor: 'Neutral-fill-1',
   inputClearColor: 'Neutral-text-3',
   inputToggleColor: 'Neutral-text-4',
-  inputHoverBorderColor: 'Brand-6',
+  inputHoverBorderColor: 'Brand-5',
   inputHoverBackgroundColor: 'Neutral-fill-1',
   inputHoverClearColor: 'Neutral-text-4',
   inputHoverToggleColor: 'Neutral-text-5',
@@ -14576,6 +14576,8 @@ var selectTokens = {
   selectLargeOptionInnerPaddingY: 'Spacing-8',
   selectLargeClearIconSize: 'Font-16',
   selectLargePlaceholderMarginY: 'Spacing-4',
+  selectLargeColumnPadding: 'Spacing-12',
+  selectLargeHeaderPaddingX: 'Spacing-12',
   selectInnerPaddingX: 'Spacing-8',
   selectInnerPaddingY: 'Spacing-5',
   selectInnerTitleMarginY: 'Spacing-2',
@@ -14690,6 +14692,7 @@ var sliderTokens = {
   sliderIndicatorBackgroundColor: 'Neutral-fill-1',
   sliderIndicatorBorderColor: 'Brand-6',
   sliderIndicatorBorderSize: 'Border-2',
+  sliderIndicatorHoverBoderColor: 'Brand-5',
   sliderIndicatorActiveBackgroundColor: 'Brand-6',
   sliderIndicatorActiveShadow: 'Shadow-1',
   sliderIndicatorDisabledBorderColor: 'Brand-3',
@@ -14736,6 +14739,7 @@ var spinTokens = {
 
 var stepsTokens = {
   stepsDescriptionFontColor: 'Neutral-text-3',
+  stepsDescriptionFontSize: 'Font-14',
   stepsDescriptionTitleMarginX: 'Spacing-4',
   stepsIconWidth: 'Size-14',
   stepsIconHeight: 'Size-14',
@@ -14750,7 +14754,7 @@ var stepsTokens = {
   stepsSmallTitleFontSize: 'Font-14',
   stepsSmallDescriptionFontSize: 'Font-12',
   stepsLargeTitleFontSize: 'Font-18',
-  stepsLargeDescriptionFontSize: 'Font-12',
+  stepsLargeDescriptionFontSize: 'Font-14',
   stepsWaitFontColor: 'Neutral-text-4',
   stepsWaitBackgroundColor: 'Neutral-fill-2',
   stepsWaitHoverFontColor: 'Brand-6',
@@ -15371,12 +15375,14 @@ var textareaTokens = {
   textareaSmallFontSize: 'Font-12',
   textareaSmallPaddingX: 'Spacing-8',
   textareaSmallPaddingY: 'Spacing-1',
+  textareaSmallClearSize: 'Font-12',
   textareaLargeFontSize: 'Font-16',
   textareaLargePaddingX: 'Spacing-12',
   textareaLargePaddingY: 'Spacing-7',
+  textareaLargeClearSize: 'Font-16',
   textareaPlaceholderColor: 'Neutral-text-2',
   textareaBackgroundColor: 'Neutral-fill-1',
-  textareaHoverBorderColor: 'Brand-6',
+  textareaHoverBorderColor: 'Brand-5',
   textareaFocusBorderColor: 'Brand-7',
   textareaFocusShadow: 'Brand-2',
   textareaDisabledFontColor: 'Neutral-text-2',
@@ -17379,6 +17385,7 @@ var useCarouselStyle = styled(carousel_carousel, 'carousel');
 ;// CONCATENATED MODULE: ../shineout-style/src/input/input-border.ts
 
 
+
 var supportsHas = function supportsHas() {
   if (typeof CSS === 'undefined' || typeof CSS.supports === 'undefined') {
     return false;
@@ -17512,13 +17519,13 @@ var supportsHas = function supportsHas() {
     // '[data-soui-role="input-group-separate"]&': {
     //   boxShadow: 'none',
     // }
-  })), "".concat(name, "Disabled"), defineProperty_default()(defineProperty_default()({
+  })), "".concat(name, "Disabled"), defineProperty_default()(defineProperty_default()(defineProperty_default()(defineProperty_default()({
     color: token.disabledFontColor,
     backgroundColor: token.disabledBackgroundColor,
     borderColor: token.disabledBorderColor,
     boxShadow: 'none',
     cursor: 'not-allowed'
-  }, "&:not($".concat(name, "Error):hover"), {
+  }, getTokenName('inputInnerPlaceFontColor'), token.disabledFontColor), getTokenName('inputInnerFontColor'), token.disabledFontColor), "&:not($".concat(name, "Error):hover"), {
     borderColor: token.disabledBorderColor
   }), '& *', {
     cursor: 'not-allowed'
@@ -18373,6 +18380,10 @@ var collapseItemStyle = {
       }
     }
   },
+  iconRight: {
+    marginRight: 0,
+    marginLeft: src.collapseHeaderGap
+  },
   title: {
     flex: 1,
     lineHeight: src.lineHeightDynamic
@@ -20994,6 +21005,9 @@ var input_input = objectSpread2_default()(objectSpread2_default()(objectSpread2_
     height: src.inputIconSize,
     color: src.inputToggleColor,
     cursor: 'pointer',
+    '$wrapperDisabled &': {
+      color: src.inputDisabledFontColor
+    },
     '$wrapperSmall &': {
       width: src.inputSmallIconSize,
       height: src.inputSmallIconSize
@@ -22389,9 +22403,17 @@ var modalStyle = objectSpread2_default()(objectSpread2_default()({
     top: 12,
     right: 12,
     marginTop: 0,
+    '[dir="rtl"] &': {
+      right: 'auto',
+      left: 12
+    },
     '$wrapperDrawer &': {
       top: 4,
-      right: 4
+      right: 4,
+      '[dir="rtl"] &': {
+        right: 'auto',
+        left: 4
+      }
     }
   },
   body: {
@@ -23344,6 +23366,11 @@ var popoverStyle = objectSpread2_default()(objectSpread2_default()({}, tooltipAn
       animation: '$fadeIn 200ms ease, $moveRightBottom 200ms cubic-bezier(0.22, 0.61, 0.36, 1);'
     }
   },
+  wrapperNoAnimation: {
+    '&[data-soui-position]': {
+      animation: 'none'
+    }
+  },
   arrow: {},
   hideArrow: {},
   content: {
@@ -24478,6 +24505,10 @@ var selectStyle = objectSpread2_default()(objectSpread2_default()({
       marginRight: 0,
       marginLeft: 4,
       width: 'auto'
+    },
+    '$pickerLarge &': {
+      paddingLeft: src.selectLargeHeaderPaddingX,
+      paddingRight: src.selectLargeHeaderPaddingX
     }
   },
   footer: {},
@@ -24501,6 +24532,10 @@ var selectStyle = objectSpread2_default()(objectSpread2_default()({
     height: '100%',
     display: 'flex',
     alignItems: 'center',
+    '$pickerLarge &': {
+      paddingLeft: src.selectLargeColumnPadding,
+      paddingRight: src.selectLargeColumnPadding
+    },
     '& $columnsCheckbox': {
       marginRight: 0
     },
@@ -24716,6 +24751,12 @@ var sliderStyle = {
   indicator: {
     position: 'absolute',
     zIndex: 100,
+    '&:hover::after': {
+      borderColor: src.sliderIndicatorHoverBoderColor
+    },
+    '&:active::after': {
+      borderColor: src.sliderIndicatorBorderColor
+    },
     '&::after': {
       content: '""',
       display: 'block',
@@ -25557,7 +25598,8 @@ var spinStyle = objectSpread2_default()(objectSpread2_default()({
   chasingRing: chasing_ring,
   fade: {},
   spin: {
-    margin: 'auto'
+    margin: 'auto',
+    flexShrink: 0
   },
   content: {
     margin: 'auto',
@@ -25739,6 +25781,9 @@ var stepsStyle = {
     '& $title': {
       fontSize: src.stepsSmallTitleFontSize
     },
+    '& $content  $description': {
+      fontSize: src.stepsSmallDescriptionFontSize
+    },
     '&$default $iconWrapper': {
       fontSize: src.stepsSmallTitleFontSize,
       lineHeight: src.stepsSmallIconHeight,
@@ -25882,6 +25927,9 @@ var stepsStyle = {
     '& $title': {
       fontSize: src.stepsLargeTitleFontSize
     },
+    '& $content $description': {
+      fontSize: src.stepsLargeDescriptionFontSize
+    },
     '&$default $iconWrapper': {
       fontSize: src.stepsLargeTitleFontSize,
       width: "calc(".concat(src.stepsLargeIconFontSize, " + 14px)"),
@@ -26482,7 +26530,7 @@ var stepsStyle = {
       lineHeight: src.stepsIconHeight
     },
     '& $description': {
-      fontSize: src.stepsSmallDescriptionFontSize
+      fontSize: src.stepsDescriptionFontSize
     },
     '& $icon svg': {
       padding: 6,
@@ -28517,7 +28565,7 @@ var textarea_wrapper = textarea_inputBorder.wrapper,
 var textarea_input = objectSpread2_default()(objectSpread2_default()(objectSpread2_default()({
   rootClass: {}
 }, textarea_inputBorder), {}, {
-  wrapper: objectSpread2_default()({
+  wrapper: objectSpread2_default()(objectSpread2_default()({
     display: 'inline-flex',
     flexDirection: 'column',
     width: '100%',
@@ -28525,7 +28573,14 @@ var textarea_input = objectSpread2_default()(objectSpread2_default()(objectSprea
     position: 'relative',
     flexWrap: 'wrap',
     minHeight: "calc(".concat(src.lineHeightDynamic, " + ").concat(src.inputPaddingY, " * 2)")
-  }, textarea_wrapper)
+  }, textarea_wrapper), {}, {
+    '$wrapperSmall&': {
+      minHeight: "calc(".concat(src.lineHeightDynamic, " + ").concat(src.inputSmallPaddingY, " * 2)")
+    },
+    '$wrapperLarge&': {
+      minHeight: "calc(".concat(src.lineHeightDynamic, " + ").concat(src.inputLargePaddingY, " * 2)")
+    }
+  })
 }, textarea_resetWrapper), {}, {
   textarea: {
     padding: 0,
@@ -28597,13 +28652,27 @@ var textarea_input = objectSpread2_default()(objectSpread2_default()(objectSprea
     cursor: 'pointer',
     padding: 4,
     color: src.textareaClearColor,
+    '$wrapperSmall &': {
+      top: src.textareaSmallPaddingY
+    },
+    '$wrapperLarge &': {
+      top: src.textareaLargePaddingY
+    },
     '&:hover': {
       color: src.textareaClearHoverColor
     },
     '& > svg': {
       display: 'block',
       width: src.textareaClearSize,
-      height: src.textareaClearSize
+      height: src.textareaClearSize,
+      '$wrapperSmall &': {
+        width: src.textareaSmallClearSize,
+        height: src.textareaSmallClearSize
+      },
+      '$wrapperLarge &': {
+        width: src.textareaLargeClearSize,
+        height: src.textareaLargeClearSize
+      }
     },
     '[dir="rtl"] &': {
       right: 'auto',
@@ -28612,7 +28681,13 @@ var textarea_input = objectSpread2_default()(objectSpread2_default()(objectSprea
   },
   wrapperWithClear: {
     '&& $textarea': {
-      paddingRight: "calc(".concat(src.textareaPaddingX, " * 4)")
+      paddingRight: "calc(".concat(src.textareaPaddingX, " + ").concat(src.textareaClearSize, " + 12px)")
+    },
+    '&&$wrapperSmall > $textarea': {
+      paddingRight: "calc(".concat(src.textareaSmallPaddingX, " + ").concat(src.textareaSmallClearSize, " + 12px)")
+    },
+    '&&$wrapperLarge > $textarea': {
+      paddingRight: "calc(".concat(src.textareaLargePaddingX, " + ").concat(src.textareaLargeClearSize, " + 12px)")
     }
   }
 });
@@ -28693,7 +28768,7 @@ var TransferStyle = {
     '& $target': {
       borderRadius: "0 ".concat(src.transferBorderRadius, " ").concat(src.transferBorderRadius, " 0"),
       '& $header': {
-        paddingRight: 6,
+        paddingRight: 8,
         borderRadius: "0 ".concat(src.transferBorderRadius, " 0 0")
       }
     }
@@ -28710,7 +28785,7 @@ var TransferStyle = {
   target: {},
   simpleTarget: {
     display: 'flex',
-    padding: '5px 3px',
+    padding: '5px 4px',
     paddingLeft: 8,
     fontSize: src.transferFontSize,
     justifyContent: 'space-between',
@@ -28727,7 +28802,7 @@ var TransferStyle = {
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    marginLeft: 3,
+    marginLeft: 4,
     '& svg': {
       width: src.transferFontSize,
       color: src.transferRemoveIconColor
@@ -33186,6 +33261,12 @@ var _process;
 
 
 
+/**
+ * @en Global configuration for Popover component
+ * @cn Popover组件的全局配置
+ * @version 3.9.9
+ */
+
 /**
  * @en Global configuration for Empty component
  * @cn Empty组件的全局配置
@@ -33200,6 +33281,7 @@ var defaultConfig = {
   trim: undefined,
   spin: 'ring',
   tooltip: undefined,
+  popover: {},
   empty: {},
   direction: 'ltr',
   popupContainer: null
@@ -33429,7 +33511,7 @@ var emptyEvent = function emptyEvent(e) {
   return e.stopPropagation();
 };
 var Popover = function Popover(props) {
-  var _jssStyle$popover;
+  var _ref, _props$animation, _config$popover, _jssStyle$popover;
   var children = props.children,
     jssStyle = props.jssStyle,
     className = props.className,
@@ -33452,6 +33534,9 @@ var Popover = function Popover(props) {
     }),
     context = _React$useRef.current;
   var config = useConfig();
+
+  // Use global config animation if props.animation is not explicitly set
+  var animation = (_ref = (_props$animation = props.animation) !== null && _props$animation !== void 0 ? _props$animation : (_config$popover = config.popover) === null || _config$popover === void 0 ? void 0 : _config$popover.animation) !== null && _ref !== void 0 ? _ref : true;
   var popoverStyle = jssStyle === null || jssStyle === void 0 || (_jssStyle$popover = jssStyle.popover) === null || _jssStyle$popover === void 0 ? void 0 : _jssStyle$popover.call(jssStyle);
   var render = useRender();
   var onVisibleChange = usePersistFn(function (v) {
@@ -33607,7 +33692,7 @@ var Popover = function Popover(props) {
     updateKey: updateKey,
     setSizingStyle: props.boundary ? setContentStyle : undefined,
     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.rootClass, 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)),
+      className: classnames_default()(className, popoverStyle === null || popoverStyle === void 0 ? void 0 : popoverStyle.rootClass, 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), animation === false && (popoverStyle === null || popoverStyle === void 0 ? void 0 : popoverStyle.wrapperNoAnimation)),
       style: containerStyle
     }, getDataAttribute({
       position: props.adjust ? positionState : position,
@@ -45871,8 +45956,9 @@ var CollapseItem = function CollapseItem(props) {
     getHeaderIconProps = _useCollapseItem.getHeaderIconProps,
     getTitleProps = _useCollapseItem.getTitleProps,
     getExtraProps = _useCollapseItem.getExtraProps;
-  var headerIconItem = function headerIconItem() {
-    var collapseItemIconClassName = classnames_default()(jssStyle === null || jssStyle === void 0 ? void 0 : jssStyle.collapseItem.icon, jssStyle === null || jssStyle === void 0 ? void 0 : jssStyle.collapseItem.activeTransform // expandIconPosition === 'right'
+  var headerIconItem = function headerIconItem(direction) {
+    var collapseItemIconClassName = classnames_default()(jssStyle === null || jssStyle === void 0 ? void 0 : jssStyle.collapseItem.icon, jssStyle === null || jssStyle === void 0 ? void 0 : jssStyle.collapseItem.activeTransform, direction === 'right' && (jssStyle === null || jssStyle === void 0 ? void 0 : jssStyle.collapseItem.iconRight)
+    // expandIconPosition === 'right'
     //   ? jssStyle?.collapseItem.activeTransformRight
     //   : jssStyle?.collapseItem.activeTransform,
     );
@@ -45921,11 +46007,11 @@ var CollapseItem = function CollapseItem(props) {
     children: [/*#__PURE__*/(0,jsx_runtime.jsxs)("div", objectSpread2_default()(objectSpread2_default()({}, getItemContentProps({
       className: collapseItemHeaderClassName
     })), {}, {
-      children: [expandIconPosition === 'left' && headerIconItem(), extraPosition === 'left' && extraItem(), /*#__PURE__*/(0,jsx_runtime.jsx)("div", objectSpread2_default()(objectSpread2_default()({}, getTitleProps({
+      children: [expandIconPosition === 'left' && headerIconItem('left'), extraPosition === 'left' && extraItem(), /*#__PURE__*/(0,jsx_runtime.jsx)("div", objectSpread2_default()(objectSpread2_default()({}, getTitleProps({
         className: classnames_default()(jssStyle === null || jssStyle === void 0 ? void 0 : jssStyle.collapseItem.title, triggerRegion === 'header' && (jssStyle === null || jssStyle === void 0 ? void 0 : jssStyle.collapseItem.region))
       })), {}, {
         children: title
-      })), extraPosition === 'right' && extraItem(), expandIconPosition === 'right' && headerIconItem()]
+      })), extraPosition === 'right' && extraItem(), expandIconPosition === 'right' && headerIconItem('right')]
     })), renderContent()]
   });
 };
@@ -50513,6 +50599,7 @@ function _ReactUnmount() {
 
 
 
+
 var hasMask = false;
 var modal_content_config = {
   instanceIds: [],
@@ -50586,6 +50673,7 @@ var Modal = function Modal(props) {
     top = _props$top === void 0 ? '10vh' : _props$top,
     _props$style = props.style,
     style = _props$style === void 0 ? {} : _props$style;
+  var globalConfig = useConfig();
   var width = style.width || props.width || defaultWidth;
   var height = style.height || props.height;
   var _useState = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(''),
@@ -50941,6 +51029,7 @@ var Modal = function Modal(props) {
         zIndex: props.zIndex,
         display: !visible && !animation ? 'none' : undefined
       },
+      dir: globalConfig.direction,
       children: /*#__PURE__*/(0,jsx_runtime.jsx)("div", objectSpread2_default()(objectSpread2_default()({
         className: modalClasses === null || modalClasses === void 0 ? void 0 : modalClasses.mask
       }, events), {}, {
@@ -56877,6 +56966,9 @@ var list_List = function List(props) {
     return /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
       className: styles.optionGroupTitle,
       title: typeof title === 'string' ? title : undefined,
+      style: {
+        height: 'var(--group-title-height)'
+      },
       children: title
     });
   };
@@ -56911,6 +57003,9 @@ var list_List = function List(props) {
   }, []);
   return /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
     className: rootClass,
+    style: {
+      '--group-title-height': "".concat(lineHeight - 2, "px")
+    },
     children: renderList()
   });
 };
@@ -58712,6 +58807,9 @@ var ColumnsList = function ColumnsList(props) {
       return /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
         className: styles.optionGroupTitle,
         title: typeof title === 'string' ? title : undefined,
+        style: {
+          height: 'var(--group-title-height)'
+        },
         children: title
       }, key);
     }
@@ -75231,7 +75329,7 @@ var upload_interface = __webpack_require__(8821);
 
 
 /* harmony default export */ var src_0 = ({
-  version: '3.9.8'
+  version: '3.9.9-beta.2'
 });
 }();
 /******/ 	return __webpack_exports__;