shineout 3.4.0-beta.7 → 3.4.0-beta.8

package/cjs/index.js

@@ -492,5 +492,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.4.0-beta.7'
+  version: '3.4.0-beta.8'
 };

package/dist/shineout.js

@@ -11991,7 +11991,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.4.0-beta.7');
+/* harmony default export */ var version = ('3.4.0-beta.8');
 ;// CONCATENATED MODULE: ../shineout-style/src/jss-style/index.tsx
 
 
@@ -12468,7 +12468,10 @@ var Token = {
   'Size-25': '50px',
   'Size-26': '52px',
   'Size-27': '54px',
-  'Size-28': '56px'
+  'Size-28': '56px',
+  'Animation-duration-1': '0.1s',
+  'Animation-duration-2': '0.2s',
+  'Animation-duration-3': '0.3s'
 };
 
 // @ts-ignore
@@ -13741,6 +13744,7 @@ var menuTokens = {
   menuItemDisabledFontColor: 'Neutral-text-2',
   menuItemCollapseActiveBackgroundColor: 'Brand-6',
   menuItemCollapseActiveFontColor: 'Neutral-text-1',
+  menuItemInpathActiveFontColor: 'Brand-6',
   menuTitlePaddingX: 'Spacing-16',
   menuTitlePaddingY: 'Spacing-9',
   menuExpandWidth: 'Spacing-46',
@@ -20233,9 +20237,9 @@ var menuStyle = {
     },
     '$itemInPath > &&': {
       '[data-soui-theme=light] &': {
-        color: src.menuItemActiveFontColor,
+        color: src.menuItemInpathActiveFontColor,
         '& $icon': {
-          color: src.menuItemActiveFontColor
+          color: src.menuItemInpathActiveFontColor
         }
       },
       '[data-soui-theme=light] $itemDisabled&': {
@@ -25210,90 +25214,57 @@ var getCardStyle = function getCardStyle() {
 };
 var getLineStyle = function getLineStyle() {
   return {
+    '$tab': {
+      '&:after': {
+        display: 'none'
+      }
+    },
     '&[data-soui-position^="left-"][data-soui-shape="line"]': {
-      '&[dir=ltr]': objectSpread2_default()({
+      '&[dir=ltr]': {
         '& $hr': {
           right: 0,
           width: 1,
           height: '100%'
         }
-      }, active({
-        top: 0,
-        bottom: 0,
-        right: 0,
-        width: 2
-      })),
-      '&[dir=rtl]': objectSpread2_default()({
+      },
+      '&[dir=rtl]': {
         '& $hr': {
           left: 0,
           width: 1,
           height: '100%'
         }
-      }, active({
-        top: 0,
-        bottom: 0,
-        left: 0,
-        width: 2
-      }))
-      // '& :not([data-soui-state="active"])$tab': {
-      //   '&:after': {
-      //     display: 'none',
-      //   },
-      // },
+      }
     },
     '&[data-soui-position^="right-"][data-soui-shape="line"]': {
-      '&[dir=ltr]': objectSpread2_default()({
+      '&[dir=ltr]': {
         '& $hr': {
           left: 0,
           width: 1,
           height: '100%'
         }
-      }, active({
-        top: 0,
-        bottom: 0,
-        left: 0,
-        width: 2
-      })),
-      '&[dir=rtl]': objectSpread2_default()({
+      },
+      '&[dir=rtl]': {
         '& $hr': {
           right: 0,
           width: 1,
           height: '100%'
         }
-      }, active({
-        top: 0,
-        bottom: 0,
-        right: 0,
-        width: 2
-      }))
+      }
     },
-    '&[data-soui-position^="top-"][data-soui-shape="line"]': objectSpread2_default()({
+    '&[data-soui-position^="top-"][data-soui-shape="line"]': {
       '& $hr': {
         bottom: 0,
-        left: 0,
         height: 1,
         width: '100%'
       }
-    }, active({
-      bottom: 0,
-      left: 0,
-      right: 0,
-      height: 2
-    })),
-    '&[data-soui-position^="bottom-"][data-soui-shape="line"]': objectSpread2_default()(objectSpread2_default()({
+    },
+    '&[data-soui-position^="bottom-"][data-soui-shape="line"]': {
       '& $hr': {
         top: 0,
-        left: 0,
         height: 1,
         width: '100%'
-      }
-    }, active({
-      top: 0,
-      left: 0,
-      right: 0,
-      height: 2
-    })), {}, {
-      '& :not([data-soui-state="active"])$tab': {
+      },
+      '& $tab': {
         '&:after': {
           position: 'absolute',
           content: '""',
@@ -25304,51 +25275,16 @@ var getLineStyle = function getLineStyle() {
           background: src.tabsBorderColor
         }
       }
-    })
+    }
   };
 };
 var getDashStyle = function getDashStyle() {
   return {
-    '&[data-soui-position^="left-"][data-soui-shape="dash"]': {
-      '&[dir=ltr]': objectSpread2_default()({}, active({
-        top: "calc(50% - 12px)",
-        width: 2,
-        height: 24,
-        right: 0
-      })),
-      '&[dir=rtl]': objectSpread2_default()({}, active({
-        top: "calc(50% - 12px)",
-        width: 2,
-        height: 24,
-        left: 0
-      }))
-    },
-    '&[data-soui-position^="right-"][data-soui-shape="dash"]': {
-      '&[dir=ltr]': objectSpread2_default()({}, active({
-        top: "calc(50% - 12px)",
-        width: 2,
-        height: 24,
-        left: 0
-      })),
-      '&[dir=rtl]': objectSpread2_default()({}, active({
-        top: "calc(50% - 12px)",
-        width: 2,
-        height: 24,
-        right: 0
-      }))
-    },
-    '&[data-soui-position^="top-"][data-soui-shape="dash"]': objectSpread2_default()({}, active({
-      bottom: 0,
-      left: "calc(50% - 12px)",
-      width: 24,
-      height: 2
-    })),
-    '&[data-soui-position^="bottom-"][data-soui-shape="dash"]': objectSpread2_default()({}, active({
-      top: 0,
-      left: "calc(50% - 12px)",
-      width: 24,
-      height: 2
-    }))
+    '$tab': {
+      '&:after': {
+        display: 'none'
+      }
+    }
   };
 };
 var getFillStyle = function getFillStyle() {
@@ -25705,6 +25641,11 @@ var tabsStyle = {
   headerScroll: {
     transition: 'all .2s cubic-bezier(.34,.69,.1,1)'
   },
+  headerScrollBar: {
+    position: 'absolute',
+    background: src.tabsActiveFontColor,
+    transition: "left ".concat(CommonToken['Animation-duration-2'], " ease-in-out, top ").concat(CommonToken['Animation-duration-2'], " ease-in-out, width ").concat(CommonToken['Animation-duration-2'], " ease-in-out, height ").concat(CommonToken['Animation-duration-2'], " ease-in-out")
+  },
   header: {
     flex: 1,
     display: 'flex',
@@ -25751,15 +25692,21 @@ var tabsStyle = {
           color: src.tabsLineCheckedFontColor,
           fontSize: src.tabsLineCheckedFontSize,
           background: src.tabsLineCheckedBackgroundColor,
-          fontWeight: src.tabsLineCheckedFontWeight,
-          '&:after': {
-            background: src.tabsLineAfterBackgroundColor
-          }
+          fontWeight: src.tabsLineCheckedFontWeight
         },
         '&[data-soui-state="disabled"]': {
           color: src.tabsLineDisabledFontColor,
           cursor: 'not-allowed'
         },
+        '&:after': {
+          position: 'absolute',
+          content: '""',
+          bottom: 0,
+          left: 0,
+          width: '100%',
+          height: 1,
+          background: src.tabsLineHrBackgroundColor
+        },
         '[data-soui-position^="left-"] &': {
           '&:after': {
             width: 1,
@@ -25776,17 +25723,6 @@ var tabsStyle = {
             background: src.tabsLineHrBackgroundColor
           }
         },
-        '&:not([data-soui-state="active"])': {
-          '&:after': {
-            position: 'absolute',
-            content: '""',
-            bottom: 0,
-            left: 0,
-            width: '100%',
-            height: 1,
-            background: src.tabsLineHrBackgroundColor
-          }
-        },
         '&:not([data-soui-state="active"]):not([data-soui-state="disabled"]):hover $lineInner': {
           background: src.tabsLineHoverBackgroundColor
         },
@@ -32465,10 +32401,10 @@ function useInputAble(props) {
       clearTimeout(context.timer);
       context.timer = null;
     }
-    if (delay && props.value !== stateValue) {
+    if (delay && control && props.value !== stateValue) {
       changeStateValue(props.value);
     }
-  }, [props.value, delay]);
+  }, [props.value, delay, control]);
   var forceDelayChange = use_persist_fn(function () {
     if (context.timer && context.delayChange) {
       clearTimeout(context.timer);
@@ -33286,6 +33222,9 @@ var useInnerTitle = function useInnerTitle(props) {
 
 
 
+var emptyEvent = function emptyEvent(e) {
+  return e.stopPropagation();
+};
 var Popover = function Popover(props) {
   var _jssStyle$popover;
   var children = props.children,
@@ -33427,6 +33366,7 @@ var Popover = function Popover(props) {
         dir: config.direction
       }), /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
         style: style,
+        onClick: emptyEvent,
         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)),
         children: /*#__PURE__*/(0,jsx_runtime.jsx)(Provider, {
           value: providerValue,
@@ -48453,6 +48393,8 @@ var InputPassword = function InputPassword(props) {
 
 
 
+
+
 var useNumberFormat = function useNumberFormat(props) {
   var onChange = props.onChange,
     value = props.value,
@@ -48475,6 +48417,15 @@ var useNumberFormat = function useNumberFormat(props) {
     }
     return value || '';
   };
+  var _React$useState = external_root_React_commonjs2_react_commonjs_react_amd_react_default().useState(getStringValue(props.value)),
+    _React$useState2 = slicedToArray_default()(_React$useState, 2),
+    inernalInputValue = _React$useState2[0],
+    setInternalInputValue = _React$useState2[1];
+  (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
+    if (props.value !== inernalInputValue) {
+      setInternalInputValue(getStringValue(props.value));
+    }
+  }, [props.value]);
   var getNumberValue = function getNumberValue(value) {
     if (isNaN(value)) return 0;
     if (typeof value === 'number') {
@@ -48492,6 +48443,17 @@ var useNumberFormat = function useNumberFormat(props) {
     }
     return num;
   };
+  var onInnerChange = use_persist_fn(function (val) {
+    setInternalInputValue(getStringValue(val));
+    if (typeof val === 'string') {
+      var num = parseFloat(val);
+      if (isNaN(num)) return;
+      onChange === null || onChange === void 0 || onChange(num);
+    } else {
+      onChange === null || onChange === void 0 || onChange(val);
+    }
+    ;
+  });
   var onNumberBlur = use_persist_fn(function (e) {
     var target = e.target;
     var newValue = target.value;
@@ -48502,7 +48464,7 @@ var useNumberFormat = function useNumberFormat(props) {
       return;
     }
     if (newValue === '' && allowNull) {
-      onChange === null || onChange === void 0 || onChange(null);
+      onInnerChange(null);
       onBlur === null || onBlur === void 0 || onBlur(e);
       return;
     }
@@ -48517,15 +48479,18 @@ var useNumberFormat = function useNumberFormat(props) {
       num = parseFloat(num.toFixed(digits));
     }
     num = commonFormat(num);
+
+    // 失焦时，将非法值转换为合法值
+    setInternalInputValue(getStringValue(num));
     if (num !== value) {
       target.value = typeof num === 'number' ? String(num) : '';
-      if (!cancelBlurChange) onChange === null || onChange === void 0 || onChange(num);
+      if (!cancelBlurChange) onInnerChange(num);
     }
     onBlur === null || onBlur === void 0 || onBlur(e);
   });
   var onNumberChange = use_persist_fn(function (value) {
     var result = value;
-    onChange === null || onChange === void 0 || onChange(result);
+    onInnerChange(result);
   });
   var changeValue = function changeValue(mod) {
     var num = getNumberValue(props.value);
@@ -48551,7 +48516,7 @@ var useNumberFormat = function useNumberFormat(props) {
     changeValue(-step);
   });
   return objectSpread2_default()(objectSpread2_default()({}, use_input_format({
-    value: getStringValue(props.value),
+    value: inernalInputValue,
     type: 'number',
     numType: numType,
     integerLimit: integerLimit,
@@ -57005,7 +56970,7 @@ var useTableVirtual = function useTableVirtual(props) {
       updateIndexAndTopFromTop(scrollTop);
     }
   };
-  var scrollToIndex = usePersistFn(function (index) {
+  var scrollToIndex = usePersistFn(function (index, callback) {
     if (props.disabled) return;
     if (props.scrollRef.current) {
       context.shouldUpdateHeight = true;
@@ -57016,6 +56981,9 @@ var useTableVirtual = function useTableVirtual(props) {
         if (beforeHeight2 !== beforeHeight) {
           scrollToIndex(index);
         }
+        if (callback && typeof callback === 'function') {
+          callback();
+        }
       };
       props.scrollRef.current.scrollTop = beforeHeight;
     }
@@ -59234,6 +59202,31 @@ var TabsHeader = function TabsHeader(props) {
     var single = isRtl && !isVertical ? -1 : 1;
     setTransform(delta + headerRef.current.clientWidth * single);
   };
+  var renderHeaderScrollBar = function renderHeaderScrollBar() {
+    if (shape !== 'line' && shape !== 'dash') return;
+    var currentTab = tabRef.current[active];
+    if (!currentTab) return;
+    var currentTabRect = currentTab.getBoundingClientRect();
+    var scrollBarStyle = isVertical ? {
+      right: getPosition !== null && getPosition !== void 0 && getPosition.startsWith('left') ? 0 : 'auto',
+      left: getPosition !== null && getPosition !== void 0 && getPosition.startsWith('right') ? 0 : 'auto',
+      top: currentTab.offsetTop + currentTabRect.height / 2,
+      height: shape === 'line' ? currentTabRect.height : 24,
+      width: 2,
+      transform: 'translateY(-50%)'
+    } : {
+      bottom: getPosition !== null && getPosition !== void 0 && getPosition.startsWith('top') ? 0 : 'auto',
+      top: getPosition !== null && getPosition !== void 0 && getPosition.startsWith('bottom') ? 0 : 'auto',
+      left: currentTab.offsetLeft + currentTabRect.width / 2,
+      width: shape === 'line' ? currentTabRect.width : 24,
+      height: 2,
+      transform: 'translateX(-50%)'
+    };
+    return /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
+      className: headerStyle.headerScrollBar,
+      style: scrollBarStyle
+    });
+  };
   var renderTab = function renderTab() {
     return /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
       ref: headerRef,
@@ -59248,11 +59241,7 @@ var TabsHeader = function TabsHeader(props) {
             button: buttonStyle
           },
           children: tabs.map(function (tab, index) {
-            return /*#__PURE__*/(0,jsx_runtime.jsx)(tabs_tab, objectSpread2_default()(objectSpread2_default()({}, tab), {}, {
-              ref: function ref(node) {
-                tabRef.current[tab.id] = node;
-              }
-            }), index);
+            return /*#__PURE__*/(0,jsx_runtime.jsx)(tabs_tab, objectSpread2_default()({}, tab), index);
           })
         }), shape !== 'button' && tabs.map(function (tab, index) {
           return /*#__PURE__*/(0,jsx_runtime.jsx)(tabs_tab, objectSpread2_default()(objectSpread2_default()({}, tab), {}, {
@@ -59260,7 +59249,7 @@ var TabsHeader = function TabsHeader(props) {
               tabRef.current[tab.id] = node;
             }
           }), index);
-        })]
+        }), renderHeaderScrollBar()]
       })
     });
   };
@@ -59835,12 +59824,15 @@ var useTransfer = function useTransfer(props) {
     _useState4 = slicedToArray_default()(_useState3, 2),
     filterTargetText = _useState4[0],
     setFilterTargetText = _useState4[1];
+  var handleSelectedChange = function handleSelectedChange(_value, source, target) {
+    onSelectChangeProp === null || onSelectChangeProp === void 0 || onSelectChangeProp(source, target);
+  };
   var _useInputAble = useInputAble({
       value: selectValue,
       defaultValue: defaultSelectValue,
       control: selectControl,
       beforeChange: undefined,
-      onChange: onSelectChangeProp
+      onChange: handleSelectedChange
     }),
     selectedKeys = _useInputAble.value,
     onSelectChange = _useInputAble.onChange;
@@ -59897,24 +59889,12 @@ var useTransfer = function useTransfer(props) {
     return keygen;
   };
   var handleSourceSelectedChange = function handleSourceSelectedChange(value) {
-    if (selectControl) {
-      // 受控情况下整合工作交给用户处理
-      onSelectChange === null || onSelectChange === void 0 || onSelectChange(value, targetSelectedKeys);
-    } else {
-      // 非受控内部直接整合 source target
-      var next = [].concat(toConsumableArray_default()(value), toConsumableArray_default()(targetSelectedKeys));
-      onSelectChange === null || onSelectChange === void 0 || onSelectChange(next);
-    }
+    var next = [].concat(toConsumableArray_default()(value), toConsumableArray_default()(targetSelectedKeys));
+    onSelectChange === null || onSelectChange === void 0 || onSelectChange(next, value, targetSelectedKeys);
   };
   var handleTargetSelectedChange = function handleTargetSelectedChange(value) {
-    if (selectControl) {
-      // 受控情况下整合工作交给用户处理
-      onSelectChange === null || onSelectChange === void 0 || onSelectChange(sourceSelectedKeys, value);
-    } else {
-      // 非受控内部直接整合 source target
-      var next = [].concat(toConsumableArray_default()(sourceSelectedKeys), toConsumableArray_default()(value));
-      onSelectChange === null || onSelectChange === void 0 || onSelectChange(next);
-    }
+    var next = [].concat(toConsumableArray_default()(sourceSelectedKeys), toConsumableArray_default()(value));
+    onSelectChange === null || onSelectChange === void 0 || onSelectChange(next, sourceSelectedKeys, value);
   };
   var sourceDatum = use_list_select_multiple({
     value: sourceSelectedKeys,
@@ -64882,7 +64862,7 @@ var upload_interface = __webpack_require__(8821);
 
 
 /* harmony default export */ var src_0 = ({
-  version: '3.4.0-beta.7'
+  version: '3.4.0-beta.8'
 });
 }();
 /******/ 	return __webpack_exports__;