@nutui/nutui-react 2.0.0-alpha.1 → 2.0.0-alpha.10

package/dist/esm/radio2.js

@@ -1,7 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["className", "disabled", "checked", "shape", "textPosition", "value", "icon", "checkedIcon", "iconSize", "onChange"];
+var _excluded = ["children", "className", "style", "checked", "defaultChecked", "shape", "value", "icon", "activeIcon", "onChange"], _excluded2 = ["labelPosition", "disabled"];
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
   if (Object.getOwnPropertySymbols) {
@@ -23,106 +23,104 @@ function _objectSpread(target) {
   }
   return target;
 }
-import React__default, { useState, useContext, useEffect } from "react";
+import React__default, { useContext } from "react";
 import { CheckChecked, CheckNormal } from "@nutui/icons-react";
+import classNames from "classnames";
 import RadioGroup from "./RadioGroup.js";
 import { C as ComponentDefaults } from "./typings.js";
-var radioContext = {
-  onChange: function onChange(val) {
-  }
-};
-var RadioContext = React__default.createContext(radioContext);
+import { u as usePropsValue } from "./use-props-value.js";
+var RadioContext = React__default.createContext(null);
 var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
-  className: "",
-  style: {},
   disabled: false,
-  checked: false,
   shape: "round",
   value: "",
-  textPosition: "right",
-  icon: "check-normal",
-  checkedIcon: "check-checked",
-  iconSize: 18,
-  onChange: function onChange2(e) {
+  labelPosition: "right",
+  icon: null,
+  activeIcon: null,
+  onChange: function onChange(checked) {
   }
 });
 var Radio = function Radio2(props) {
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), children = _defaultProps$props.children;
-  var className = props.className, disabled = props.disabled, checked = props.checked, shape = props.shape, textPosition = props.textPosition, value = props.value, icon = props.icon, checkedIcon = props.checkedIcon, iconSize = props.iconSize, onChange3 = props.onChange, rest = _objectWithoutProperties(props, _excluded);
-  var componentName = "nut-radio";
-  var _useState = useState(checked), _useState2 = _slicedToArray(_useState, 2), checkedStatement = _useState2[0], setCheckedStatement = _useState2[1];
-  var _useState3 = useState(value), _useState4 = _slicedToArray(_useState3, 2), valueStatement = _useState4[0], setValueStatement = _useState4[1];
-  var _useState5 = useState(disabled), _useState6 = _slicedToArray(_useState5, 2), disabledStatement = _useState6[0], setDisabledStatement = _useState6[1];
+  var classPrefix = "nut-radio";
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), children = _defaultProps$props.children, className = _defaultProps$props.className, style = _defaultProps$props.style, checked = _defaultProps$props.checked, defaultChecked = _defaultProps$props.defaultChecked, shape = _defaultProps$props.shape, value = _defaultProps$props.value, icon = _defaultProps$props.icon, activeIcon = _defaultProps$props.activeIcon, onChange2 = _defaultProps$props.onChange, others = _objectWithoutProperties(_defaultProps$props, _excluded);
+  var labelPosition = others.labelPosition, disabled = others.disabled, rest = _objectWithoutProperties(others, _excluded2);
+  var _usePropsValue = usePropsValue({
+    value: checked,
+    defaultValue: defaultChecked,
+    finalValue: false,
+    onChange: onChange2
+  }), _usePropsValue2 = _slicedToArray(_usePropsValue, 2), checkedStatement = _usePropsValue2[0], setCheckedStatement = _usePropsValue2[1];
   var context = useContext(RadioContext);
-  useEffect(function() {
-    setDisabledStatement(disabled);
-    setValueStatement(value);
-    setCheckedStatement(checked);
-  }, [disabled, value, checked]);
+  if (context) {
+    checkedStatement = context.value === value;
+    if (context.labelPosition !== void 0) {
+      labelPosition = context.labelPosition;
+    }
+    if (context.disabled !== void 0) {
+      disabled = context.disabled;
+    }
+    setCheckedStatement = function setCheckedStatement2(value2) {
+      if (value2) {
+        context.check(props.value === void 0 ? "" : props.value);
+      } else {
+        context.uncheck();
+      }
+    };
+  }
   var renderLabel = function renderLabel2() {
     return React__default.createElement("div", {
-      className: "".concat(componentName, "__label ").concat(disabledStatement ? "".concat(componentName, "__label--disabled") : "")
+      className: classNames("".concat(classPrefix, "__label"), _defineProperty({}, "".concat(classPrefix, "__label--disabled"), disabled))
     }, children);
   };
   var renderButton = function renderButton2() {
+    var _classNames2;
     return React__default.createElement("div", {
-      className: "".concat(componentName, "__button ").concat(!disabledStatement && checkedStatement && "".concat(componentName, "__button--active"), " ").concat(disabledStatement ? "".concat(componentName, "__button--disabled") : "")
+      className: classNames("".concat(classPrefix, "__button"), (_classNames2 = {}, _defineProperty(_classNames2, "".concat(classPrefix, "__button--active"), checkedStatement), _defineProperty(_classNames2, "".concat(classPrefix, "__button--disabled"), disabled), _classNames2))
     }, children);
   };
   var color = function color2() {
-    if (disabledStatement) {
-      return "nut-radio__icon--disable";
-    }
-    if (checkedStatement) {
-      return "nut-radio__icon";
-    }
-    return "nut-radio__icon--unchecked";
+    var _ref;
+    return _ref = {}, _defineProperty(_ref, "".concat(classPrefix, "__icon--disable"), disabled), _defineProperty(_ref, "".concat(classPrefix, "__icon"), checkedStatement), _defineProperty(_ref, "".concat(classPrefix, "__icon--unchecked"), !checkedStatement), _ref;
   };
   var renderIcon = function renderIcon2() {
-    var icon2 = props.icon, iconSize2 = props.iconSize, checkedIcon2 = props.checkedIcon;
-    if (!disabledStatement && checkedStatement) {
-      return React__default.isValidElement(checkedIcon2) ? React__default.cloneElement(checkedIcon2, _objectSpread(_objectSpread({}, checkedIcon2.props), {}, {
-        className: color()
+    var icon2 = props.icon, activeIcon2 = props.activeIcon;
+    if (checkedStatement) {
+      return React__default.isValidElement(activeIcon2) ? React__default.cloneElement(activeIcon2, _objectSpread(_objectSpread({}, activeIcon2.props), {}, {
+        className: classNames(color())
       })) : React__default.createElement(CheckChecked, {
-        width: iconSize2,
-        height: iconSize2,
-        className: color()
+        className: classNames(color())
       });
     }
     return React__default.isValidElement(icon2) ? React__default.cloneElement(icon2, _objectSpread(_objectSpread({}, icon2.props), {}, {
-      size: iconSize2,
-      className: color()
+      className: classNames(color())
     })) : React__default.createElement(CheckNormal, {
-      width: iconSize2,
-      height: iconSize2,
-      className: color()
+      className: classNames(color())
     });
   };
-  var reverseState = textPosition === "left";
+  var reverse = labelPosition === "left";
   var renderRadioItem = function renderRadioItem2() {
     if (shape === "button") {
       return renderButton();
     }
-    if (reverseState) {
+    if (reverse) {
       return React__default.createElement(React__default.Fragment, null, renderLabel(), renderIcon());
     }
     return React__default.createElement(React__default.Fragment, null, renderIcon(), renderLabel());
   };
   var handleClick = function handleClick2(e) {
-    if (disabledStatement || checkedStatement)
+    if (disabled || checkedStatement)
       return;
     setCheckedStatement(!checkedStatement);
-    onChange3 && onChange3(e);
-    context && context.onChange(valueStatement);
   };
   return React__default.createElement("div", _objectSpread({
-    className: "nut-radio ".concat(className, " ").concat(reverseState ? "".concat(componentName, "--reverse") : ""),
+    className: "".concat(classPrefix, " ").concat(className, " ").concat(reverse ? "".concat(classPrefix, "--reverse") : ""),
+    style,
     onClick: handleClick
   }, rest), renderRadioItem());
 };
 Radio.defaultProps = defaultProps;
 Radio.displayName = "NutRadio";
-Radio.RadioGroup = RadioGroup;
+Radio.Group = RadioGroup;
 export {
   Radio as R,
   RadioContext as a

package/dist/esm/raf.js

@@ -0,0 +1,16 @@
+var _window = window;
+function requestAniFrame() {
+  if (typeof _window !== "undefined") {
+    return _window.requestAnimationFrame || _window.webkitRequestAnimationFrame || function(callback) {
+      _window.setTimeout(callback, 1e3 / 60);
+    };
+  } else {
+    return function(callback) {
+      setTimeout(callback, 1e3 / 60);
+    };
+  }
+}
+var requestAniFrame$1 = requestAniFrame();
+export {
+  requestAniFrame$1 as r
+};

package/dist/esm/tabbaritem2.js

@@ -0,0 +1,61 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _excluded = ["className", "style", "title", "icon", "active", "activeColor", "inactiveColor", "index", "handleClick"];
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    enumerableOnly && (symbols = symbols.filter(function(sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    })), keys.push.apply(keys, symbols);
+  }
+  return keys;
+}
+function _objectSpread(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = null != arguments[i] ? arguments[i] : {};
+    i % 2 ? ownKeys(Object(source), true).forEach(function(key) {
+      _defineProperty(target, key, source[key]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function(key) {
+      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
+  }
+  return target;
+}
+import React__default from "react";
+import classNames from "classnames";
+import { C as ComponentDefaults } from "./typings.js";
+import { B as Badge } from "./badge2.js";
+var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
+  title: "",
+  icon: null,
+  active: false,
+  index: 0,
+  handleClick: function handleClick(idx) {
+  }
+});
+var TabbarItem = function TabbarItem2(props) {
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), className = _defaultProps$props.className, style = _defaultProps$props.style, title = _defaultProps$props.title, icon = _defaultProps$props.icon, active = _defaultProps$props.active, activeColor = _defaultProps$props.activeColor, inactiveColor = _defaultProps$props.inactiveColor, index = _defaultProps$props.index, handleClick2 = _defaultProps$props.handleClick, rest = _objectWithoutProperties(_defaultProps$props, _excluded);
+  var classPrefix = "nut-tabbar-item";
+  var tabbarItemClass = classNames(className, classPrefix, _defineProperty({}, "".concat(classPrefix, "-active"), active));
+  var boxPrefix = "".concat(classPrefix, "__icon-box");
+  var titleClass = classNames(boxPrefix, "".concat(boxPrefix, "-nav"), _defineProperty({}, "".concat(boxPrefix, "-large"), !icon));
+  return React__default.createElement("div", {
+    className: tabbarItemClass,
+    style: _objectSpread({
+      color: active ? activeColor : inactiveColor
+    }, style),
+    onClick: function onClick() {
+      return handleClick2(index);
+    }
+  }, icon ? React__default.createElement(React__default.Fragment, null, React__default.createElement(Badge, _objectSpread({}, rest), React__default.createElement("div", {
+    className: boxPrefix
+  }, icon)), React__default.createElement("div", {
+    className: titleClass
+  }, title)) : React__default.createElement(Badge, _objectSpread({}, rest), React__default.createElement("div", {
+    className: titleClass
+  }, title)));
+};
+export {
+  TabbarItem as T
+};

package/dist/esm/tabs2.js

@@ -1,9 +1,7 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["value", "color", "tabStyle", "background", "direction", "type", "titleScroll", "ellipsis", "animatedTime", "titleGutter", "size", "leftAlign", "titleNode", "children", "onClick", "onChange", "className", "autoHeight"];
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+var _excluded = ["activeColor", "tabStyle", "direction", "activeType", "duration", "align", "title", "children", "onClick", "onChange", "className", "autoHeight"];
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
   if (Object.getOwnPropertySymbols) {
@@ -28,138 +26,171 @@ function _objectSpread(target) {
 import React__default, { useState, useRef, useEffect } from "react";
 import classNames from "classnames";
 import { JoySmile } from "@nutui/icons-react";
-import { c as cn } from "./bem.js";
 import { C as ComponentDefaults } from "./typings.js";
 import TabPane from "./TabPane.js";
-var Title = /* @__PURE__ */ _createClass(
-  // eslint-disable-next-line no-useless-constructor
-  function Title2() {
-    _classCallCheck(this, Title2);
-    _defineProperty(this, "title", "");
-    _defineProperty(this, "paneKey", "");
-    _defineProperty(this, "disabled", false);
-    _defineProperty(this, "index", 0);
-  }
-);
+import { r as requestAniFrame } from "./raf.js";
+import { u as usePropsValue } from "./use-props-value.js";
+function useForceUpdate() {
+  var _React__default$useSt = React__default.useState(), _React__default$useSt2 = _slicedToArray(_React__default$useSt, 2), updateState = _React__default$useSt2[1];
+  return React__default.useCallback(function() {
+    return updateState({});
+  }, []);
+}
 var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
   tabStyle: {},
-  value: 0,
-  color: "",
-  background: "",
+  activeColor: "",
   direction: "horizontal",
-  type: "line",
-  titleScroll: false,
-  ellipsis: true,
-  animatedTime: 300,
-  titleGutter: 0,
-  size: "normal",
-  leftAlign: false,
+  activeType: "line",
+  duration: 300,
   autoHeight: false
 });
-var pxCheck = function pxCheck2(value) {
-  return Number.isNaN(Number(value)) ? String(value) : "".concat(value, "px");
-};
+var classPrefix = "nut-tabs";
 var Tabs = function Tabs2(props) {
   var _classNames;
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), value = _defaultProps$props.value, color = _defaultProps$props.color, tabStyle = _defaultProps$props.tabStyle, background = _defaultProps$props.background, direction = _defaultProps$props.direction, type = _defaultProps$props.type, titleScroll = _defaultProps$props.titleScroll, ellipsis = _defaultProps$props.ellipsis, animatedTime = _defaultProps$props.animatedTime, titleGutter = _defaultProps$props.titleGutter, size = _defaultProps$props.size, leftAlign = _defaultProps$props.leftAlign, titleNode = _defaultProps$props.titleNode, children = _defaultProps$props.children, onClick = _defaultProps$props.onClick, onChange = _defaultProps$props.onChange, className = _defaultProps$props.className, autoHeight = _defaultProps$props.autoHeight, rest = _objectWithoutProperties(_defaultProps$props, _excluded);
-  var _useState = useState({
-    index: 0
-  }), _useState2 = _slicedToArray(_useState, 2), currentItem = _useState2[0], setCurrentItem = _useState2[1];
-  var titles = useRef([]);
-  useEffect(function() {
-    var currentIndex = 0;
-    titles.current = [];
-    React__default.Children.forEach(children, function(child, idx) {
-      if (!React__default.isValidElement(child)) {
-        return null;
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), activeColor = _defaultProps$props.activeColor, tabStyle = _defaultProps$props.tabStyle, direction = _defaultProps$props.direction, activeType = _defaultProps$props.activeType, duration = _defaultProps$props.duration, align = _defaultProps$props.align, title = _defaultProps$props.title, children = _defaultProps$props.children, onClick = _defaultProps$props.onClick, onChange = _defaultProps$props.onChange, className = _defaultProps$props.className, autoHeight = _defaultProps$props.autoHeight, rest = _objectWithoutProperties(_defaultProps$props, _excluded);
+  var _usePropsValue = usePropsValue({
+    value: props.value,
+    defaultValue: props.defaultValue,
+    finalValue: 0,
+    onChange
+  }), _usePropsValue2 = _slicedToArray(_usePropsValue, 2), value = _usePropsValue2[0], setValue = _usePropsValue2[1];
+  var _useState = useState({}), _useState2 = _slicedToArray(_useState, 2), contentStyle = _useState2[0], setContentStyle = _useState2[1];
+  var titleItemsRef = useRef([]);
+  var navRef = useRef(null);
+  var scrollDirection = function scrollDirection2(nav, to, duration2, direction2) {
+    var count = 0;
+    var from = direction2 === "horizontal" ? nav.scrollLeft : nav.scrollTop;
+    var frames = duration2 === 0 ? 1 : Math.round(duration2 * 1e3 / 16);
+    function animate() {
+      if (direction2 === "horizontal") {
+        nav.scrollLeft += (to - from) / frames;
+      } else {
+        nav.scrollTop += (to - from) / frames;
       }
-      var title = new Title();
-      var childProps = child === null || child === void 0 ? void 0 : child.props;
-      if (childProps !== null && childProps !== void 0 && childProps.title || childProps !== null && childProps !== void 0 && childProps.paneKey) {
-        title.title = childProps === null || childProps === void 0 ? void 0 : childProps.title;
-        title.paneKey = (childProps === null || childProps === void 0 ? void 0 : childProps.paneKey) || idx;
-        title.disabled = childProps === null || childProps === void 0 ? void 0 : childProps.disabled;
-        title.index = idx;
-        if (title.paneKey === value) {
-          currentIndex = idx;
+      if (++count < frames) {
+        requestAniFrame(animate);
+      }
+    }
+    animate();
+  };
+  var scrollIntoView = function scrollIntoView2(index, immediate) {
+    var nav = navRef.current;
+    var titleItem = titleItemsRef.current;
+    if (!nav || !titleItem || !titleItem[index]) {
+      return;
+    }
+    var title2 = titleItem[index];
+    var to = 0;
+    if (props.direction === "vertical") {
+      var runTop = title2.offsetTop - nav.offsetTop + 10;
+      to = runTop - (nav.offsetHeight - title2.offsetHeight) / 2;
+    } else {
+      to = title2.offsetLeft - (nav.offsetWidth - title2.offsetWidth) / 2;
+    }
+    scrollDirection(nav, to, immediate ? 0 : 0.3, props.direction);
+  };
+  var getTitles = function getTitles2() {
+    var titles2 = [];
+    React__default.Children.forEach(children, function(child, idx) {
+      if (React__default.isValidElement(child)) {
+        var props2 = child === null || child === void 0 ? void 0 : child.props;
+        if (props2 !== null && props2 !== void 0 && props2.title || props2 !== null && props2 !== void 0 && props2.value) {
+          titles2.push({
+            title: props2.title,
+            value: props2.value || idx,
+            disabled: props2.disabled
+          });
         }
       }
-      titles.current.push(title);
     });
-    setCurrentItem(titles.current[currentIndex]);
-  }, [children]);
-  var b = cn("tabs");
-  var classes = classNames(direction, b(""), className);
-  var classesTitle = classNames((_classNames = {}, _defineProperty(_classNames, type, type), _defineProperty(_classNames, "scrollable", titleScroll), _defineProperty(_classNames, size, size), _classNames), "".concat(b(""), "__titles"));
-  var titleStyle = {
-    marginLeft: pxCheck(titleGutter),
-    marginRight: pxCheck(titleGutter)
+    return titles2;
   };
+  var titles = useRef(getTitles());
+  var forceUpdate = useForceUpdate();
+  useEffect(function() {
+    titles.current = getTitles();
+    var current = "";
+    titles.current.forEach(function(title2) {
+      if (title2.value == value) {
+        current = value;
+      }
+    });
+    if (current !== "" && current !== value) {
+      setValue(current);
+    } else {
+      forceUpdate();
+    }
+  }, [children]);
+  var classes = classNames(classPrefix, "".concat(classPrefix, "--").concat(direction), className);
+  var classesTitle = classNames("".concat(classPrefix, "__titles"), (_classNames = {}, _defineProperty(_classNames, "".concat(classPrefix, "__titles--").concat(activeType), activeType), _defineProperty(_classNames, "".concat(classPrefix, "__titles--scrollable"), true), _defineProperty(_classNames, "".concat(classPrefix, "__titles--").concat(align), align), _classNames));
   var tabsActiveStyle = {
-    color: type === "smile" ? color : "",
-    background: type === "line" ? color : ""
+    color: activeType === "smile" ? activeColor : "",
+    background: activeType === "line" ? activeColor : ""
   };
-  var index = titles.current.findIndex(function(t) {
-    return t.paneKey === value;
-  });
-  var contentStyle = {
-    transform: direction === "horizontal" ? "translate3d(-".concat(index * 100, "%, 0, 0)") : "translate3d( 0,-".concat(index * 100, "%, 0)"),
-    transitionDuration: "".concat(animatedTime, "ms")
-  };
-  var tabChange = function tabChange2(item, index2) {
-    onClick && onClick(item);
+  useEffect(function() {
+    var index = titles.current.findIndex(function(t) {
+      return t.value == value;
+    });
+    setContentStyle({
+      transform: direction === "horizontal" ? "translate3d(-".concat(index * 100, "%, 0, 0)") : "translate3d( 0,-".concat(index * 100, "%, 0)"),
+      transitionDuration: "".concat(duration, "ms")
+    });
+    setTimeout(function() {
+      scrollIntoView(index);
+    });
+  }, [value]);
+  var tabChange = function tabChange2(item) {
+    onClick && onClick(item.value);
     if (item.disabled) {
       return;
     }
-    setCurrentItem(item);
-    onChange && onChange(item);
+    setValue(item.value);
   };
   return React__default.createElement("div", _objectSpread({
     className: classes
   }, rest), React__default.createElement("div", {
     className: classesTitle,
-    style: _objectSpread(_objectSpread({}, tabStyle), {}, {
-      background
-    })
-  }, !!titleNode && typeof titleNode === "function" ? titleNode() : titles.current.map(function(item, index2) {
+    style: _objectSpread({}, tabStyle),
+    ref: navRef
+  }, !!title && typeof title === "function" ? title() : titles.current.map(function(item) {
+    var _classNames2;
     return React__default.createElement("div", {
-      style: titleStyle,
-      onClick: function onClick2(e) {
-        return tabChange(item);
+      onClick: function onClick2() {
+        tabChange(item);
       },
-      className: classNames({
-        active: !item.disabled && String(item.paneKey) === String(value),
-        disabled: item.disabled,
-        "nut-tabs__titles-item-left-align": leftAlign
-      }, "".concat(b(""), "__titles-item")),
-      key: item.paneKey
-    }, type === "line" && React__default.createElement("div", {
-      className: "".concat(b(""), "__titles-item__line"),
+      className: classNames("".concat(classPrefix, "__titles-item"), (_classNames2 = {}, _defineProperty(_classNames2, "nut-tabs__titles-item--active", !item.disabled && String(item.value) === String(value)), _defineProperty(_classNames2, "nut-tabs__titles-item--disabled", item.disabled), _defineProperty(_classNames2, "nut-tabs__titles-item--".concat(align), align), _classNames2)),
+      ref: function ref(_ref) {
+        return titleItemsRef.current.push(_ref);
+      },
+      key: item.value
+    }, activeType === "line" && React__default.createElement("div", {
+      className: "".concat(classPrefix, "__titles-item__line"),
       style: tabsActiveStyle
-    }), type === "smile" && React__default.createElement("div", {
-      className: "".concat(b(""), "__titles-item__smile"),
+    }), activeType === "smile" && React__default.createElement("div", {
+      className: "".concat(classPrefix, "__titles-item__smile"),
       style: tabsActiveStyle
     }, React__default.createElement(JoySmile, {
-      color
+      color: activeColor,
+      width: 40,
+      height: 20
     })), React__default.createElement("div", {
       className: classNames({
-        ellipsis: ellipsis && !titleScroll && direction === "horizontal"
-      }, "".concat(b(""), "__titles-item__text"))
+        ellipsis: true
+      }, "".concat(classPrefix, "__titles-item__text"))
     }, item.title));
   })), React__default.createElement("div", {
-    className: "".concat(b(""), "__content__wrap")
+    className: "".concat(classPrefix, "__content__wrap")
   }, React__default.createElement("div", {
-    className: "".concat(b(""), "__content"),
+    className: "".concat(classPrefix, "__content"),
     style: contentStyle
   }, React__default.Children.map(children, function(child, idx) {
-    var _child$props;
     if (!React__default.isValidElement(child)) {
       return null;
     }
     var childProps = _objectSpread(_objectSpread({}, child.props), {}, {
-      activeKey: value
+      active: value === child.props.value
     });
-    if (String(value) !== String(((_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.paneKey) || idx) && autoHeight) {
+    if (String(value) !== String(child.props.value || idx) && autoHeight) {
       childProps = _objectSpread(_objectSpread({}, childProps), {}, {
         autoHeightClassName: "inactive"
       });

package/dist/locales/base.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v2.0.0-alpha.1 Fri Apr 21 2023 18:05:14 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.0.0-alpha.10 Fri May 19 2023 19:00:38 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */

package/dist/locales/en-US.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v2.0.0-alpha.1 Fri Apr 21 2023 18:05:14 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.0.0-alpha.10 Fri May 19 2023 19:00:38 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */

package/dist/locales/id-ID.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v2.0.0-alpha.1 Fri Apr 21 2023 18:05:14 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.0.0-alpha.10 Fri May 19 2023 19:00:38 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */

package/dist/locales/zh-CN.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v2.0.0-alpha.1 Fri Apr 21 2023 18:05:14 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.0.0-alpha.10 Fri May 19 2023 19:00:38 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */

package/dist/locales/zh-TW.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v2.0.0-alpha.1 Fri Apr 21 2023 18:05:14 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.0.0-alpha.10 Fri May 19 2023 19:00:38 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */

package/dist/locales/zh-UG.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v2.0.0-alpha.1 Fri Apr 21 2023 18:05:14 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.0.0-alpha.10 Fri May 19 2023 19:00:38 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */