shineout 1.9.0-rc.6 → 1.9.0

package/css/Alert/styles/index.js

@@ -5,6 +5,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.alertClass = void 0;
 
+require("../../styles/normalize.css");
+
 var _classname = _interopRequireDefault(require("../../utils/classname"));
 
 var _alert = _interopRequireDefault(require("./alert.css"));

package/css/AnimationList/AbsoluteList.js

@@ -52,8 +52,8 @@ function initRoot() {
   document.body.appendChild(root);
 }
 
-var getOverDocStyle = function getOverDocStyle() {
-  return (0, _config.isRTL)() ? {
+var getOverDocStyle = function getOverDocStyle(right) {
+  return right ? {
     left: 0,
     right: 'auto'
   } : {
@@ -162,10 +162,16 @@ function _default(List) {
         top: rootContainer.scrollTop
       };
       this.containerRect = containerRect;
+      this.containerScroll = containerScroll;
 
       if (listPosition.includes(position)) {
         style.left = rect.left - containerRect.left + containerScroll.left;
 
+        if ((0, _config.isRTL)()) {
+          style.right = containerRect.width - rect.width - style.left;
+          style.left = 'auto';
+        }
+
         if (position === 'drop-down') {
           style.top = rect.top - containerRect.top + rect.height + containerScroll.top;
         } else {
@@ -179,23 +185,18 @@ function _default(List) {
         if (h === 'left') {
           style.left = rect.left - containerRect.left + containerScroll.left;
         } else {
-          style.left = rect.right - containerRect.left + containerScroll.left;
-          style.transform = 'translateX(-100%)';
+          style.right = containerRect.width - rect.width - rect.left + containerRect.left - containerScroll.left;
+          style.left = 'auto';
         }
 
         if (v === 'bottom') {
           style.top = rect.bottom - containerRect.top + containerScroll.top + PICKER_V_MARGIN;
         } else {
           style.top = rect.top - containerRect.top + containerScroll.top - PICKER_V_MARGIN;
-          style.transform = style.transform ? 'translate(-100%, -100%)' : 'translateY(-100%)';
+          style.transform = 'translateY(-100%)';
         }
       }
 
-      if (rtl && style.left) {
-        style.right = containerRect.width - rect.width - style.left;
-        style.left = 'auto';
-      }
-
       return style;
     };
 
@@ -239,30 +240,52 @@ function _default(List) {
       }
     };
 
+    _proto.isRight = function isRight() {
+      var position = this.props.position;
+      var isRight = false;
+
+      if (position.indexOf('right') > 1) {
+        isRight = true;
+      }
+
+      if ((0, _config.isRTL)()) {
+        isRight = !isRight;
+      }
+
+      return isRight;
+    };
+
     _proto.resetPosition = function resetPosition(clean) {
       var _this$props2 = this.props,
           focus = _this$props2.focus,
           parentElement = _this$props2.parentElement;
       if (!this.el || !focus || this.ajustdoc && !clean) return;
-      var pos = this.el.getBoundingClientRect();
-      var left = pos.left;
-
-      if (parentElement) {
-        // because the position changes
-        // eslint-disable-next-line prefer-destructuring
-        left = parentElement.getBoundingClientRect().left;
-      }
-
+      var width = this.el.offsetWidth;
+      var pos = parentElement && parentElement.getBoundingClientRect() || {
+        left: 0,
+        right: 0
+      };
       var containerRect = this.containerRect || {
         left: 0,
         width: 0
       };
+      var containerScroll = this.containerScroll || {
+        left: 0
+      };
       var overdoc;
 
-      if ((0, _config.isRTL)()) {
-        overdoc = pos.left < containerRect.left;
+      if (this.isRight()) {
+        if ((0, _config.isRTL)() && containerScroll.left) {
+          // this condition  the style left: 0 will not meet expect so not set overdoc
+          overdoc = false;
+        } else {
+          overdoc = pos.right - width < containerRect.left;
+        }
+      } else if (!(0, _config.isRTL)() && containerScroll.left) {
+        // this condition  the style right: 0 will not meet expect so not set overdoc
+        overdoc = false;
       } else {
-        overdoc = left - containerRect.left + pos.width > (containerRect.width || _document.docSize.width);
+        overdoc = pos.left - containerRect.left + width + containerScroll.left > (containerRect.width || _document.docSize.width);
       }
 
       if (this.state.overdoc === overdoc) return;
@@ -294,7 +317,7 @@ function _default(List) {
           props = (0, _objectWithoutPropertiesLoose2.default)(_this$props3, ["parentElement", "absolute", "focus", "rootClass", "position", "scrollLeft", "scrollTop", "scrollElement", "style", "zIndex", "getResetPosition", "autoAdapt"]);
       var parsed = parseInt(zIndex, 10);
       if (!Number.isNaN(parsed)) style.zIndex = parsed;
-      var mergeStyle = Object.assign({}, style, this.state.overdoc ? getOverDocStyle() : undefined);
+      var mergeStyle = Object.assign({}, style, this.state.overdoc ? getOverDocStyle(this.isRight()) : undefined);
       return _react.default.createElement(List, (0, _extends2.default)({
         getRef: this.handleRef
       }, props, {
@@ -339,7 +362,7 @@ function _default(List) {
           style = _ref.style;
 
       this.element.className = mergeClass;
-      var mergeStyle = Object.assign({}, style, props.style, this.state.overdoc ? getOverDocStyle() : undefined);
+      var mergeStyle = Object.assign({}, style, props.style, this.state.overdoc ? getOverDocStyle(this.isRight()) : undefined);
       if (zIndex || typeof zIndex === 'number') mergeStyle.zIndex = parseInt(zIndex, 10);
       return _reactDom.default.createPortal(_react.default.createElement(List, (0, _extends2.default)({
         getRef: this.handleRef

package/css/AnimationList/styles/index.js

@@ -5,6 +5,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.listClass = void 0;
 
+require("../../styles/normalize.css");
+
 var _classname = _interopRequireDefault(require("../../utils/classname"));
 
 var _list = _interopRequireDefault(require("./list.css"));

package/css/Breadcrumb/styles/index.js

@@ -5,6 +5,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.breadcrumbClass = void 0;
 
+require("../../styles/normalize.css");
+
 var _breadcrumb = _interopRequireDefault(require("./breadcrumb.css"));
 
 var _classname = _interopRequireDefault(require("../../utils/classname"));

package/css/Button/Button.js

@@ -29,6 +29,8 @@ var _element = require("../utils/dom/element");
 
 var _styles = require("./styles");
 
+var _config = require("../config");
+
 var Button =
 /*#__PURE__*/
 function (_PureComponent) {
@@ -80,6 +82,7 @@ function (_PureComponent) {
       large: size === 'large',
       small: size === 'small',
       text: text && 'text',
+      rtl: (0, _config.isRTL)(),
       disabled: disabled
     }), this.props.className);
 

package/css/Button/Group.js

@@ -21,6 +21,8 @@ var _proptypes = require("../utils/proptypes");
 
 var _styles = require("./styles");
 
+var _config = require("../config");
+
 var ButtonGroup =
 /*#__PURE__*/
 function (_PureComponent) {
@@ -39,7 +41,7 @@ function (_PureComponent) {
         size = _this$props.size,
         type = _this$props.type;
     var typeSetted = type !== 'default';
-    var className = (0, _classnames.default)((0, _styles.buttonClass)('group', (outline || !typeSetted) && 'outline'), this.props.className);
+    var className = (0, _classnames.default)((0, _styles.buttonClass)('group', (outline || !typeSetted) && 'outline', (0, _config.isRTL)() && 'group-rtl'), this.props.className);
     return _react.default.createElement("div", {
       className: className
     }, _react.Children.toArray(children).map(function (child) {

package/css/Button/styles/button.css

@@ -889,27 +889,47 @@ fieldset[disabled] .so-button-link:focus {
       -ms-transform: translateY(-50%);
           transform: translateY(-50%);
 }
+.so-button-group-rtl.so-button-group .so-button:before {
+  left: auto;
+  right: 0;
+}
 .so-button-group .so-button:first-child {
   margin-left: 0;
   border-left-width: 1px;
 }
+.so-button-group-rtl.so-button-group .so-button:first-child {
+  border-right-width: 1px;
+  border-left-width: 0;
+}
 .so-button-group .so-button:first-child:before {
   display: none;
 }
 .so-button-group .so-button:last-child {
   border-right-width: 1px;
 }
+.so-button-group-rtl.so-button-group .so-button:last-child {
+  border-left-width: 1px;
+  border-right-width: 0;
+}
 .so-button-group .so-button:not(:first-child):not(:last-child) {
   border-radius: 0;
 }
-.so-button-group .so-button:first-child:not(:last-child) {
+.so-button-group .so-button:first-child:not(:last-child):not(.so-button-rtl) {
   border-bottom-right-radius: 0;
   border-top-right-radius: 0;
 }
-.so-button-group .so-button:last-child:not(:first-child) {
+.so-button-group .so-button:first-child:not(:last-child).so-button-rtl {
   border-bottom-left-radius: 0;
   border-top-left-radius: 0;
 }
+.so-button-group .so-button:last-child:not(:first-child):not(.so-button-rtl) {
+  border-bottom-left-radius: 0;
+  border-top-left-radius: 0;
+}
+.so-button-group .so-button:last-child:not(:first-child).so-button-rtl {
+  border-bottom-right-radius: 0;
+  border-top-right-radius: 0;
+}
 .so-button-group .so-button:before {
   border-left-color: #d9d9d9;
   -webkit-transition: all 0.2s;

package/css/Button/styles/index.js

@@ -5,6 +5,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.buttonClass = void 0;
 
+require("../../styles/normalize.css");
+
 var _button = _interopRequireDefault(require("./button.css"));
 
 var _classname = _interopRequireDefault(require("../../utils/classname"));

package/css/Card/styles/index.js

@@ -5,6 +5,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.cardClass = void 0;
 
+require("../../styles/normalize.css");
+
 var _card = _interopRequireDefault(require("./card.css"));
 
 var _classname = _interopRequireDefault(require("../../utils/classname"));

package/css/CardGroup/styles/index.js

@@ -5,6 +5,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.cardGroupClass = void 0;
 
+require("../../styles/normalize.css");
+
 var _cardGroup = _interopRequireDefault(require("./cardGroup.css"));
 
 var _classname = _interopRequireDefault(require("../../utils/classname"));

package/css/Carousel/styles/index.js

@@ -5,6 +5,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.carouselClass = void 0;
 
+require("../../styles/normalize.css");
+
 var _carousel = _interopRequireDefault(require("./carousel.css"));
 
 var _classname = _interopRequireDefault(require("../../utils/classname"));

package/css/Cascader/Cascader.js

@@ -116,6 +116,12 @@ function (_PureComponent) {
 
   var _proto = Cascader.prototype;
 
+  _proto.componentDidMount = function componentDidMount() {
+    _PureComponent.prototype.componentDidMount.call(this);
+
+    this.updatePathByValue();
+  };
+
   _proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
     this.datum.mode = this.props.mode;
     var _this$props = this.props,
@@ -123,7 +129,11 @@ function (_PureComponent) {
         filterDataChange = _this$props.filterDataChange,
         filterText = _this$props.filterText;
     if (!filterDataChange && prevProps.data !== this.props.data) this.datum.setData(this.props.data, true);
-    if (prevProps.value !== this.props.value) this.datum.setValue(this.props.value || []);
+
+    if (prevProps.value !== this.props.value) {
+      this.datum.setValue(this.props.value || []);
+      this.updatePathByValue();
+    }
 
     if (prevState.focus !== this.state.focus && !this.state.focus && onFilter) {
       setTimeout(function () {
@@ -185,6 +195,30 @@ function (_PureComponent) {
     }));
   };
 
+  _proto.updatePathByValue = function updatePathByValue() {
+    var _this$props3 = this.props,
+        mode = _this$props3.mode,
+        value = _this$props3.value;
+    if (mode !== undefined) return;
+    if (value === this.lastValue) return;
+
+    if (!value || !value.length) {
+      this.setState({
+        path: []
+      });
+    } else {
+      var v = value[value.length - 1];
+      var data = this.datum.getDataById(v);
+      var id = this.datum.getKey(data);
+
+      var _ref2 = this.datum.getPath(id) || {},
+          path = _ref2.path;
+
+      path = path || [];
+      this.handlePathChange(id, null, path);
+    }
+  };
+
   _proto.handleClickAway = function handleClickAway(e) {
     var desc = isDescendent(e.target, this.selectId);
 
@@ -198,12 +232,18 @@ function (_PureComponent) {
   _proto.handlePathChange = function handlePathChange(id, data, path, fromClick) {
     var _this2 = this;
 
-    var _this$props3 = this.props,
-        childrenKey = _this$props3.childrenKey,
-        finalDismiss = _this$props3.finalDismiss;
+    var _this$props4 = this.props,
+        childrenKey = _this$props4.childrenKey,
+        finalDismiss = _this$props4.finalDismiss,
+        loader = _this$props4.loader;
 
     if (fromClick && data) {
       var leaf = !data[childrenKey] || data[childrenKey].length === 0;
+
+      if (loader && typeof loader === 'function' && data[childrenKey] === undefined) {
+        leaf = false;
+      }
+
       if (finalDismiss && leaf) this.handleState(false);
     }
 
@@ -248,9 +288,9 @@ function (_PureComponent) {
     if (focus && e && e.target.classList.contains((0, _styles2.cascaderClass)('close'))) return; // if remove node, return
 
     if (e && (0, _element.getParent)(e.target, "." + (0, _styles2.cascaderClass)('remove-container'))) return;
-    var _this$props4 = this.props,
-        height = _this$props4.height,
-        onCollapse = _this$props4.onCollapse;
+    var _this$props5 = this.props,
+        height = _this$props5.height,
+        onCollapse = _this$props5.onCollapse;
     var position = this.props.position;
 
     if (!position) {
@@ -294,34 +334,40 @@ function (_PureComponent) {
   };
 
   _proto.handleChange = function handleChange() {
-    var _this$props5 = this.props,
-        onChange = _this$props5.onChange,
-        onFilter = _this$props5.onFilter,
-        filterText = _this$props5.filterText;
+    var _this$props6 = this.props,
+        onChange = _this$props6.onChange,
+        onFilter = _this$props6.onFilter,
+        filterText = _this$props6.filterText;
 
     if (this.input) {
       this.input.reset();
       this.input.focus();
     }
 
-    onChange.apply(void 0, arguments);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    var value = args[0];
+    this.lastValue = value;
+    onChange.apply(void 0, args);
     if (onFilter && filterText) onFilter('');
   };
 
   _proto.renderList = function renderList() {
     var _this4 = this;
 
-    var _this$props6 = this.props,
-        data = _this$props6.data,
-        keygen = _this$props6.keygen,
-        renderItem = _this$props6.renderItem,
-        mode = _this$props6.mode,
-        loader = _this$props6.loader,
-        onItemClick = _this$props6.onItemClick,
-        expandTrigger = _this$props6.expandTrigger,
-        childrenKey = _this$props6.childrenKey,
-        absolute = _this$props6.absolute,
-        height = _this$props6.height;
+    var _this$props7 = this.props,
+        data = _this$props7.data,
+        keygen = _this$props7.keygen,
+        renderItem = _this$props7.renderItem,
+        mode = _this$props7.mode,
+        loader = _this$props7.loader,
+        onItemClick = _this$props7.onItemClick,
+        expandTrigger = _this$props7.expandTrigger,
+        childrenKey = _this$props7.childrenKey,
+        absolute = _this$props7.absolute,
+        height = _this$props7.height;
     var path = this.state.path;
     var props = {
       datum: this.datum,
@@ -382,9 +428,9 @@ function (_PureComponent) {
   };
 
   _proto.renderAbsoluteList = function renderAbsoluteList() {
-    var _this$props7 = this.props,
-        absolute = _this$props7.absolute,
-        zIndex = _this$props7.zIndex;
+    var _this$props8 = this.props,
+        absolute = _this$props8.absolute,
+        zIndex = _this$props8.zIndex;
     var _this$state = this.state,
         focus = _this$state.focus,
         position = _this$state.position;
@@ -406,17 +452,17 @@ function (_PureComponent) {
   };
 
   _proto.renderFilterList = function renderFilterList() {
-    var _this$props8 = this.props,
-        absolute = _this$props8.absolute,
-        onFilter = _this$props8.onFilter,
-        filterText = _this$props8.filterText,
-        zIndex = _this$props8.zIndex,
-        data = _this$props8.data,
-        childrenKey = _this$props8.childrenKey,
-        renderItem = _this$props8.renderItem,
-        expandTrigger = _this$props8.expandTrigger,
-        height = _this$props8.height,
-        loading = _this$props8.loading;
+    var _this$props9 = this.props,
+        absolute = _this$props9.absolute,
+        onFilter = _this$props9.onFilter,
+        filterText = _this$props9.filterText,
+        zIndex = _this$props9.zIndex,
+        data = _this$props9.data,
+        childrenKey = _this$props9.childrenKey,
+        renderItem = _this$props9.renderItem,
+        expandTrigger = _this$props9.expandTrigger,
+        height = _this$props9.height,
+        loading = _this$props9.loading;
     var _this$state2 = this.state,
         focus = _this$state2.focus,
         position = _this$state2.position;
@@ -445,11 +491,11 @@ function (_PureComponent) {
   };
 
   _proto.renderPanel = function renderPanel() {
-    var _this$props9 = this.props,
-        filterText = _this$props9.filterText,
-        data = _this$props9.data,
-        mode = _this$props9.mode,
-        loading = _this$props9.loading;
+    var _this$props10 = this.props,
+        filterText = _this$props10.filterText,
+        data = _this$props10.data,
+        mode = _this$props10.mode,
+        loading = _this$props10.loading;
     if (loading) return this.renderFilterList();
     if (!filterText || filterText && mode !== undefined || data.length === 0) return this.renderAbsoluteList();
     return this.renderFilterList();
@@ -458,11 +504,11 @@ function (_PureComponent) {
   _proto.render = function render() {
     var _this5 = this;
 
-    var _this$props10 = this.props,
-        placeholder = _this$props10.placeholder,
-        disabled = _this$props10.disabled,
-        size = _this$props10.size,
-        other = (0, _objectWithoutPropertiesLoose2.default)(_this$props10, ["placeholder", "disabled", "size"]);
+    var _this$props11 = this.props,
+        placeholder = _this$props11.placeholder,
+        disabled = _this$props11.disabled,
+        size = _this$props11.size,
+        other = (0, _objectWithoutPropertiesLoose2.default)(_this$props11, ["placeholder", "disabled", "size"]);
     var focus = this.state.focus;
     var className = (0, _classnames.default)((0, _styles2.cascaderClass)('_', size, focus && 'focus', other.mode !== undefined && 'multiple', disabled === true && 'disabled', (0, _config.isRTL)() && 'rtl'), (0, _styles.selectClass)(this.state.position, focus && 'focus'));
     return _react.default.createElement("div", {

package/css/Cascader/styles/index.js

@@ -5,6 +5,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.cascaderClass = void 0;
 
+require("../../styles/normalize.css");
+
 var _cascader = _interopRequireDefault(require("./cascader.css"));
 
 var _classname = _interopRequireDefault(require("../../utils/classname"));

package/css/Checkbox/styles/index.js

@@ -5,6 +5,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.checkinputClass = void 0;
 
+require("../../styles/normalize.css");
+
 var _checkinput = _interopRequireDefault(require("./checkinput.css"));
 
 var _classname = _interopRequireDefault(require("../../utils/classname"));

package/css/DataList/styles/index.js

@@ -5,6 +5,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.listClass = void 0;
 
+require("../../styles/normalize.css");
+
 var _classname = _interopRequireDefault(require("../../utils/classname"));
 
 var _list = _interopRequireDefault(require("./list.css"));

package/css/DatePicker/index.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react'
 import { StandardProps, FormItemStandardProps, CommonProps } from '../@types/common'
+import { ReactNode } from "react"
 
 export type DateTimeType = Date | number | string | undefined
 
@@ -18,8 +19,10 @@ export interface QuickSelect extends Base {
   value?: Array<DateTimeType> | DateTimeType;
 }
 
+export type FormItemProps<T> = Omit<FormItemStandardProps<T>, 'name'>
+
 export interface DatePickerProps<T =DatePickerValue > extends StandardProps,
-FormItemStandardProps<T>,
+  FormItemProps<T>,
   Pick<CommonProps, 'absolute'> {
 
   /**
@@ -260,6 +263,7 @@ FormItemStandardProps<T>,
    * default: -
    */
   innerTitle?: ReactNode;
+  name: string | string[]
 }
 
 declare class DatePicker extends React.Component<DatePickerProps, {}> {

package/css/DatePicker/styles/datepicker.css

@@ -32,7 +32,7 @@ label.so-datepicker-r-time {
   display: flex;
 }
 .so-datepicker-range .so-datepicker-title-box .so-datepicker-txt:not(.so-datepicker-text-focus) {
-  background: var(--primary-color-fade-10, rgba(51, 153, 255, 0.1));
+  background: var(--primary-color-fade-5, rgba(51, 153, 255, 0.05));
   border-radius: 50px;
 }
 .so-datepicker-inner {

package/css/DatePicker/styles/index.js

@@ -5,6 +5,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.datepickerClass = void 0;
 
+require("../../styles/normalize.css");
+
 var _datepicker = _interopRequireDefault(require("./datepicker.css"));
 
 var _classname = _interopRequireDefault(require("../../utils/classname"));

package/css/Divider/styles/index.js

@@ -5,6 +5,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.dividerClass = void 0;
 
+require("../../styles/normalize.css");
+
 var _divider = _interopRequireDefault(require("./divider.css"));
 
 var _classname = _interopRequireDefault(require("../../utils/classname"));

package/css/Dropdown/index.js

@@ -215,24 +215,33 @@ function (_PureComponent) {
         outline = _this$props2.outline,
         size = _this$props2.size,
         disabled = _this$props2.disabled,
-        isSub = _this$props2.isSub;
+        isSub = _this$props2.isSub,
+        position = _this$props2.position;
     var rtl = (0, _config.isRTL)();
     var buttonClassName = (0, _styles.dropdownClass)('button', !placeholder && 'split-button', rtl && 'rtl');
     var spanClassName = (0, _styles.dropdownClass)('button-content');
 
     var caret = _react.default.createElement("span", {
+      key: "caret",
       className: (0, _styles.dropdownClass)('caret', rtl && 'rtl')
     }, _react.default.createElement(_Caret.default, null));
 
+    var childs = [_react.default.createElement("span", {
+      key: "text",
+      className: spanClassName
+    }, placeholder), caret];
+
+    if (['left-bottom', 'left-top'].includes(position)) {
+      childs.reverse();
+    }
+
     if (isSub) {
       return _react.default.createElement("a", {
         key: "button",
         className: (0, _styles.dropdownClass)('button', 'item', this.state.show && 'active'),
         "data-role": "item",
         onClick: this.handleFocus
-      }, _react.default.createElement("span", {
-        className: spanClassName
-      }, placeholder), caret);
+      }, childs);
     }
 
     return _react.default.createElement(_Button.default, {
@@ -243,9 +252,7 @@ function (_PureComponent) {
       type: type,
       size: size,
       key: "button"
-    }, _react.default.createElement("span", {
-      className: spanClassName
-    }, placeholder), caret);
+    }, childs);
   };
 
   _proto.renderList = function renderList(data, placeholder, position) {
@@ -310,7 +317,8 @@ function (_PureComponent) {
     var show = this.state.show;
     var position = this.getPosition();
     var wrapClassName = (0, _styles.dropdownClass)('_', position, show && 'show', {
-      'split-dropdown': !placeholder
+      'split-dropdown': !placeholder,
+      rtl: (0, _config.isRTL)()
     });
     if (className) wrapClassName += " " + className;
     return _react.default.createElement("div", (0, _extends2.default)({