shineout 1.10.6 → 1.10.8-beta.2

package/css/Button/Button.js

@@ -31,6 +31,8 @@ var _styles = require("./styles");
 
 var _config = require("../config");
 
+var _classname = _interopRequireDefault(require("../utils/classname"));
+
 var Button =
 /*#__PURE__*/
 function (_PureComponent) {
@@ -102,7 +104,7 @@ function (_PureComponent) {
         type: htmlType,
         className: className
       }), loading && _react.default.createElement("span", {
-        className: (0, _styles.buttonClass)('spin')
+        className: (0, _styles.buttonClass)((0, _classname.default)('spin'))
       }, _react.default.createElement(_Spin.default, {
         size: 12,
         name: "ring",

package/css/Button/styles/button.css

@@ -27,10 +27,10 @@
 .so-button-spin {
   display: inline-block;
 }
-.so-button-spin:not(.so-button-rtl *) {
+.so-button-spin-ltr {
   margin-right: var(--button-spin-margin, 8px);
 }
-.so-button-rtl .so-button-spin {
+.so-button-spin-rtl {
   margin-left: var(--button-spin-margin, 8px);
 }
 .so-button:hover,

package/css/Cascader/List.js

@@ -25,6 +25,8 @@ var _Node = _interopRequireDefault(require("./Node"));
 
 var _locale = require("../locale");
 
+var _classname = require("../utils/classname");
+
 var List =
 /*#__PURE__*/
 function (_Component) {
@@ -64,7 +66,7 @@ function (_Component) {
       className: (0, _styles.cascaderClass)('no-data')
     }, this.getText('noData'));
     return _react.default.createElement("div", {
-      className: (0, _styles.cascaderClass)('list')
+      className: (0, _styles.cascaderClass)((0, _classname.getDirectionClass)('list'))
     }, data.map(function (d, i) {
       var id = _this2.getKey(d, i);
 

package/css/Cascader/Node.js

@@ -15,6 +15,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _classname = require("../utils/classname");
+
 var _component = require("../component");
 
 var _Checkbox = _interopRequireDefault(require("../Checkbox"));
@@ -161,7 +163,7 @@ function (_PureComponent) {
     }
 
     var caret = _react.default.createElement("span", {
-      className: (0, _styles.cascaderClass)('caret')
+      className: (0, _styles.cascaderClass)((0, _classname.getDirectionClass)('caret'))
     }, _react.default.createElement(_Caret.default, null));
 
     if ((0, _config.isRTL)() && checkBoxStyle.marginRight !== 0) {

package/css/Cascader/Result.js

@@ -41,6 +41,8 @@ var _types = require("../Datum/types");
 
 var _Caret = _interopRequireDefault(require("../icons/Caret"));
 
+var _classname = require("../utils/classname");
+
 // eslint-disable-next-line react/prop-types
 function Item(_ref) {
   var children = _ref.children,
@@ -59,10 +61,10 @@ function Item(_ref) {
   } : undefined;
   return _react.default.createElement("a", {
     tabIndex: -1,
-    className: (0, _classnames.default)((0, _styles3.cascaderClass)('item', only && 'item-only'), className),
+    className: (0, _classnames.default)((0, _styles3.cascaderClass)((0, _classname.getDirectionClass)('item'), only && 'item-only'), className),
     onClick: onClick
   }, children, singleRemove && _react.default.createElement("span", {
-    className: (0, _styles3.cascaderClass)('single-remove'),
+    className: (0, _styles3.cascaderClass)((0, _classname.getDirectionClass)('single-remove')),
     onClick: onClose
   }, _icons.default.Close));
 }
@@ -170,7 +172,7 @@ function (_PureComponent) {
     var _this2 = this;
 
     var singleRemove = this.props.singleRemove;
-    var removeContainerClassName = (0, _styles3.cascaderClass)(singleRemove && 'remove-container');
+    var removeContainerClassName = (0, _styles3.cascaderClass)(singleRemove && (0, _classname.getDirectionClass)('remove-container'));
     return nodes.map(function (n, i) {
       return _this2.renderItem({
         className: removeContainerClassName,
@@ -207,7 +209,7 @@ function (_PureComponent) {
         value = _this$props2.value,
         disabled = _this$props2.disabled,
         onClear = _this$props2.onClear;
-    var className = (0, _classnames.default)((0, _styles2.selectClass)('indicator', 'close'), (0, _styles3.cascaderClass)('close'));
+    var className = (0, _classnames.default)((0, _styles2.selectClass)('indicator', 'close'), (0, _styles3.cascaderClass)((0, _classname.getDirectionClass)('close')));
 
     if (clearable && value.length > 0 && !disabled) {
       /* eslint-disable */
@@ -230,7 +232,6 @@ function (_PureComponent) {
         className = _ref3.className,
         options = (0, _objectWithoutPropertiesLoose2.default)(_ref3, ["index", "render", "data", "raw", "className"]);
     var singleRemove = this.props.singleRemove;
-    var itemClassName = (0, _classnames.default)(className, (0, _styles3.cascaderClass)(singleRemove && 'remove-container'));
     var res = data && render(data, raw);
     if (!res) return null;
     var more = this.state.more;
@@ -239,7 +240,7 @@ function (_PureComponent) {
       only: more === 1
     }, options, {
       data: data,
-      className: itemClassName,
+      className: className,
       singleRemove: singleRemove,
       close: this.removeTargetNode,
       isPopover: true,
@@ -256,7 +257,7 @@ function (_PureComponent) {
     return [_react.default.createElement(_More.default, {
       key: "more",
       data: list,
-      className: (0, _styles3.cascaderClass)('item', 'item-compressed'),
+      className: (0, _styles3.cascaderClass)((0, _classname.getDirectionClass)('item'), 'item-compressed'),
       popoverClassName: (0, _styles3.cascaderClass)('popover'),
       contentClassName: (0, _styles3.cascaderClass)('result', size),
       dataId: selectId,

package/css/Cascader/styles/cascader.css

@@ -40,12 +40,12 @@
   text-overflow: ellipsis;
   position: relative;
 }
-.so-cascader-result > span:not(.so-input-rtl *),
-.so-cascader-result .so-cascader-item:not(.so-input-rtl *) {
+.so-cascader-result > span-ltr,
+.so-cascader-result .so-cascader-item-ltr {
   margin-right: var(--select-result-padding-horizontal, 4px);
 }
-.so-input-rtl .so-cascader-result > span,
-.so-input-rtl .so-cascader-result .so-cascader-item {
+.so-cascader-result > span-rtl,
+.so-cascader-result .so-cascader-item-rtl {
   margin-left: var(--select-result-padding-horizontal, 4px);
 }
 .so-cascader-result > span-compressed,
@@ -66,12 +66,12 @@
 .so-cascader-result .so-cascader-item:after {
   content: '\feff ';
 }
-.so-cascader-result > span.so-cascader-remove-container:not(.so-input-rtl *),
-.so-cascader-result .so-cascader-item.so-cascader-remove-container:not(.so-input-rtl *) {
+.so-cascader-result > span.so-cascader-remove-container-ltr,
+.so-cascader-result .so-cascader-item.so-cascader-remove-container-ltr {
   padding-right: 16px;
 }
-.so-input-rtl .so-cascader-result > span.so-cascader-remove-container,
-.so-input-rtl .so-cascader-result .so-cascader-item.so-cascader-remove-container {
+.so-cascader-result > span.so-cascader-remove-container-rtl,
+.so-cascader-result .so-cascader-item.so-cascader-remove-container-rtl {
   padding-left: 16px;
 }
 .so-cascader-result > span.so-cascader-remove-container:after,
@@ -87,15 +87,15 @@
   margin: 0;
   padding: 0;
 }
-.so-cascader-result > span .so-cascader-single-remove:not(.so-input-rtl *),
-.so-cascader-result .so-cascader-item .so-cascader-single-remove:not(.so-input-rtl *) {
+.so-cascader-result > span .so-cascader-single-remove-ltr,
+.so-cascader-result .so-cascader-item .so-cascader-single-remove-ltr {
   right: 8px;
   -webkit-transform: translate(50%, -50%);
       -ms-transform: translate(50%, -50%);
           transform: translate(50%, -50%);
 }
-.so-input-rtl .so-cascader-result > span .so-cascader-single-remove,
-.so-input-rtl .so-cascader-result .so-cascader-item .so-cascader-single-remove {
+.so-cascader-result > span .so-cascader-single-remove-rtl,
+.so-cascader-result .so-cascader-item .so-cascader-single-remove-rtl {
   left: 8px;
   -webkit-transform: translate(-50%, -50%);
       -ms-transform: translate(-50%, -50%);
@@ -163,10 +163,10 @@
 .so-cascader:not(.so-cascader-disabled) .so-cascader-result-clearable:hover .so-select-multi {
   visibility: hidden;
 }
-.so-cascader-multiple .so-cascader-close:not(.so-input-rtl *) {
+.so-cascader-multiple .so-cascader-close-ltr {
   right: 19px;
 }
-.so-input-rtl .so-cascader-multiple .so-cascader-close {
+.so-cascader-multiple .so-cascader-close-rtl {
   left: 19px;
 }
 div.so-cascader-options {
@@ -218,10 +218,10 @@ div.so-cascader-options {
 .so-cascader-result.so-cascader-compressed .so-cascader-input {
   white-space: nowrap;
 }
-.so-cascader-result.so-cascader-compressed .so-cascader-close:not(.so-input-rtl *) {
+.so-cascader-result.so-cascader-compressed .so-cascader-close-ltr {
   right: 9px;
 }
-.so-input-rtl .so-cascader-result.so-cascader-compressed .so-cascader-close {
+.so-cascader-result.so-cascader-compressed .so-cascader-close-rtl {
   left: 9px;
 }
 .so-cascader-no-data {
@@ -255,11 +255,10 @@ div.so-cascader-options {
   overflow-y: auto;
   vertical-align: top;
 }
-.so-cascader-list:not(.so-input-rtl *):not(.so-list-rtl *) {
+.so-cascader-list-ltr {
   border-right: solid 1px var(--gray-200, #e9ecef);
 }
-.so-input-rtl .so-cascader-list,
-.so-list-rtl .so-cascader-list {
+.so-cascader-list-rtl {
   border-left: solid 1px var(--gray-200, #e9ecef);
 }
 .so-cascader-node {
@@ -300,17 +299,15 @@ div.so-cascader-options {
   position: absolute;
   top: 50%;
 }
-.so-cascader-has-children .so-cascader-caret:not(.so-cascader-rtl *):not(.so-list-rtl *),
-.so-cascader-may-be-children .so-cascader-caret:not(.so-cascader-rtl *):not(.so-list-rtl *) {
+.so-cascader-has-children .so-cascader-caret-ltr,
+.so-cascader-may-be-children .so-cascader-caret-ltr {
   right: 12px;
   -webkit-transform: translateY(-50%) rotate(-90deg);
       -ms-transform: translateY(-50%) rotate(-90deg);
           transform: translateY(-50%) rotate(-90deg);
 }
-.so-input-rtl .so-cascader-has-children .so-cascader-caret,
-.so-input-rtl .so-cascader-may-be-children .so-cascader-caret,
-.so-list-rtl .so-cascader-has-children .so-cascader-caret,
-.so-list-rtl .so-cascader-may-be-children .so-cascader-caret {
+.so-cascader-has-children .so-cascader-caret-rtl,
+.so-cascader-may-be-children .so-cascader-caret-rtl {
   left: 12px;
   -webkit-transform: translateY(-50%) rotate(90deg);
       -ms-transform: translateY(-50%) rotate(90deg);

package/css/Checkbox/CheckItem.js

@@ -25,6 +25,8 @@ var _proptypes = require("../utils/proptypes");
 
 var _uid = require("../utils/uid");
 
+var _classname = require("../utils/classname");
+
 var _is = require("../utils/is");
 
 var _Input = _interopRequireDefault(require("../Input"));
@@ -187,7 +189,7 @@ function _default(type) {
         onChange: this.handleInputChange,
         value: value
       }), isSwitch && _react.default.createElement("span", {
-        className: (0, _styles.checkinputClass)('switch-indicator')
+        className: (0, _styles.checkinputClass)((0, _classname.getDirectionClass)('switch-indicator'))
       }));
     };
 

package/css/Checkbox/styles/checkinput.css

@@ -140,10 +140,11 @@ fieldset[disabled] .so-checkinput-button .so-checkinput:active {
 .so-checkinput-button .so-checkinput > input {
   display: none;
 }
-.so-checkinput-button .so-checkinput:not(:first-child):not(.so-checkinput-rtl *) {
+.so-checkinput-button .so-checkinput:not(:first-child) {
   border-left-width: 0;
 }
 .so-checkinput-rtl.so-checkinput-button .so-checkinput:not(:first-child) {
+  border-left-width: 1px;
   border-right-width: 0;
 }
 .so-checkinput-button .so-checkinput:not(:first-child):before {
@@ -416,14 +417,14 @@ fieldset[disabled] .so-checkinput-button .so-checkinput.so-checkinput-checked:ac
           box-shadow: var(--switch-checked-box-shadow, 0 1px 4px var(--primary-color-fade-50, rgba(51, 153, 255, 0.5)));
   background: var(--switch-indicator-checked-bg, var(--primary-color, #3399ff));
 }
-.so-checkinput-checked.so-checkinput-switch .so-checkinput-switch-indicator:not(.so-checkinput-rtl *) {
+.so-checkinput-checked.so-checkinput-switch .so-checkinput-switch-indicator-ltr {
   left: 100%;
   margin-left: var(--switch-indicator-padding-horizontal-negative, 0px);
   -webkit-transform: translateX(-100%);
       -ms-transform: translateX(-100%);
           transform: translateX(-100%);
 }
-.so-checkinput-rtl.so-checkinput-checked.so-checkinput-switch .so-checkinput-switch-indicator {
+.so-checkinput-checked.so-checkinput-switch .so-checkinput-switch-indicator-rtl {
   right: 100%;
   margin-right: var(--switch-indicator-padding-horizontal-negative, 0px);
   -webkit-transform: translateX(100%);

package/css/DatePicker/Container.js

@@ -59,6 +59,8 @@ var _InputTitle = _interopRequireDefault(require("../InputTitle"));
 
 var _styles3 = require("../InputTitle/styles");
 
+var _classname = require("../utils/classname");
+
 var FadeList = (0, _AnimationList.default)(['fade'], 'fast');
 var OptionList = (0, _AbsoluteList.default)(function (_ref) {
   var focus = _ref.focus,
@@ -489,7 +491,7 @@ function (_PureComponent) {
     var props = {
       absolute: absolute,
       focus: focus,
-      className: (0, _styles.datepickerClass)('picker', 'location', "absolute-" + getCurrentPosition(position), quickSelect && 'quick'),
+      className: (0, _styles.datepickerClass)('picker', 'location', "absolute-" + getCurrentPosition(position), quickSelect && (0, _classname.getDirectionClass)('quick')),
       zIndex: zIndex,
       getRef: this.bindWrappedPicker // computed absolute position needed
 

package/css/DatePicker/styles/datepicker.css

@@ -151,10 +151,10 @@ label.so-datepicker-r-time {
           box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.02), 0 6px 12px rgba(0, 0, 0, 0.175);
   font-size: var(--font-size-base, 14px);
 }
-.so-datepicker-picker.so-datepicker-quick:not(.so-datepicker-rtl *) {
+.so-datepicker-picker.so-datepicker-quick-ltr {
   padding-left: 0;
 }
-.so-datepicker-rtl .so-datepicker-picker.so-datepicker-quick {
+.so-datepicker-picker.so-datepicker-quick-rtl {
   padding-right: 0;
 }
 .so-datepicker-picker span {

package/css/Datum/Tree.js

@@ -125,7 +125,7 @@ function () {
                   path = _this2$pathMap$get.path;
 
               var pid = path[path.length - 1];
-              if (!pid) return false;
+              if (!pid && pid !== 0) return false;
               return _this2.valueMap.get(pid) === 1;
             }();
 

package/css/Dropdown/index.js

@@ -45,6 +45,8 @@ var _Caret = _interopRequireDefault(require("../icons/Caret"));
 
 var _config = require("../config");
 
+var _classname = require("../utils/classname");
+
 var _getDataset = _interopRequireDefault(require("../utils/dom/getDataset"));
 
 var positionMap = {
@@ -270,7 +272,7 @@ function (_PureComponent) {
       absolute: absolute,
       parentElement: this.element,
       position: position,
-      className: (0, _styles.dropdownClass)('menu', columns > 1 && 'box-list', (0, _config.isRTL)() && 'rtl'),
+      className: (0, _styles.dropdownClass)((0, _classname.getDirectionClass)('menu'), columns > 1 && 'box-list', (0, _config.isRTL)() && 'rtl'),
       style: {
         width: width
       },

package/css/Dropdown/styles/dropdown.css

@@ -125,13 +125,13 @@
 .so-dropdown-right-top > .so-dropdown-menu {
   top: 0;
 }
-.so-dropdown-right-bottom > .so-dropdown-menu:not(.so-dropdown-rtl *),
-.so-dropdown-right-top > .so-dropdown-menu:not(.so-dropdown-rtl *) {
+.so-dropdown-right-bottom > .so-dropdown-menu-ltr,
+.so-dropdown-right-top > .so-dropdown-menu-ltr {
   left: 100%;
   margin-left: 2px;
 }
-.so-dropdown-rtl.so-dropdown-right-bottom > .so-dropdown-menu,
-.so-dropdown-rtl.so-dropdown-right-top > .so-dropdown-menu {
+.so-dropdown-right-bottom > .so-dropdown-menu-rtl,
+.so-dropdown-right-top > .so-dropdown-menu-rtl {
   right: 100%;
   margin-right: 2px;
 }

package/css/Form/styles/form.css

@@ -291,21 +291,23 @@
   margin: auto 0;
   background: transparent;
 }
-.so-input-group > span:first-child:not(.so-input-rtl *),
-.so-input-group > i:first-child:not(.so-input-rtl *) {
+.so-input-group > span:first-child,
+.so-input-group > i:first-child {
   padding-left: 12px;
 }
 .so-input-rtl.so-input-group > span:first-child,
 .so-input-rtl.so-input-group > i:first-child {
   padding-right: 12px;
+  padding-left: 0;
 }
-.so-input-group > span:last-child:not(.so-input-rtl *),
-.so-input-group > i:last-child:not(.so-input-rtl *) {
+.so-input-group > span:last-child,
+.so-input-group > i:last-child {
   padding-right: 8px;
 }
 .so-input-rtl.so-input-group > span:last-child,
 .so-input-rtl.so-input-group > i:last-child {
   padding-left: 8px;
+  padding-right: 0;
 }
 .so-input-group > b {
   display: -webkit-box;
@@ -656,16 +658,16 @@
   line-height: var(--common-line-height, 1.42857143);
   resize: none;
 }
-.so-input input.so-input-number:not(.so-input-rtl *) {
+.so-input input.so-input-number-ltr {
   padding-right: 22px;
 }
-.so-input input.so-input-number + .so-input-clear-wrapper .so-input-clear:not(.so-input-rtl *) {
+.so-input input.so-input-number-ltr + .so-input-clear-wrapper .so-input-clear {
   right: 22px;
 }
-.so-input-rtl input.so-input-number {
+.so-input input.so-input-number-rtl {
   padding-left: 22px;
 }
-.so-input-rtl input.so-input-number + .so-input-clear-wrapper .so-input-clear {
+.so-input input.so-input-number-rtl + .so-input-clear-wrapper .so-input-clear {
   left: 22px;
   right: auto;
 }

package/css/Input/Number.js

@@ -29,6 +29,8 @@ var _config = require("../config");
 
 var _numbers = require("../utils/numbers");
 
+var _classname = require("../utils/classname");
+
 var Number =
 /*#__PURE__*/
 function (_PureComponent) {
@@ -224,9 +226,7 @@ function (_PureComponent) {
     return [].concat(this.renderArrowGroup(), [_react.default.createElement(_Input.default, (0, _extends2.default)({
       key: "input"
     }, other, {
-      className: (0, _styles.inputClass)({
-        number: !hideArrow
-      }, 'rtl'),
+      className: (0, _styles.inputClass)(!hideArrow && (0, _classname.getDirectionClass)('number'), 'rtl'),
       onChange: this.handleChange,
       onKeyDown: this.handleKeyDown,
       onKeyUp: this.handleKeyUp,
@@ -250,9 +250,7 @@ function (_PureComponent) {
     return [_react.default.createElement(_Input.default, (0, _extends2.default)({
       key: "input"
     }, other, {
-      className: (0, _styles.inputClass)({
-        number: !hideArrow
-      }),
+      className: (0, _styles.inputClass)(!hideArrow && (0, _classname.getDirectionClass)('number')),
       onChange: this.handleChange,
       onKeyDown: this.handleKeyDown,
       onKeyUp: this.handleKeyUp,

package/css/Pagination/Item.js

@@ -15,6 +15,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _classname = require("../utils/classname");
+
 var _styles = require("./styles");
 
 var Item =
@@ -44,7 +46,7 @@ function (_PureComponent) {
         children = _this$props2.children,
         isCurrent = _this$props2.isCurrent,
         disabled = _this$props2.disabled;
-    var className = (0, _styles.paginationClass)('item', this.props.className, isCurrent && 'current');
+    var className = (0, _styles.paginationClass)((0, _classname.getDirectionClass)('item'), this.props.className, isCurrent && 'current');
     return _react.default.createElement("a", {
       className: className,
       disabled: disabled || isCurrent,

package/css/Pagination/Jumper.js

@@ -21,6 +21,8 @@ var _styles = require("./styles");
 
 var _Input = _interopRequireDefault(require("../Input"));
 
+var _classname = require("../utils/classname");
+
 var inputStyle = {
   width: 60,
   display: 'inline-block'
@@ -89,7 +91,7 @@ function (_PureComponent) {
     }
 
     return _react.default.createElement("div", {
-      className: (0, _styles.paginationClass)('section')
+      className: (0, _styles.paginationClass)((0, _classname.getDirectionClass)('section'))
     }, txt[0], _react.default.createElement(_Input.default, {
       key: this.renderRequire,
       value: current,

package/css/Pagination/Links.js

@@ -25,6 +25,8 @@ var _Next = _interopRequireDefault(require("./Next"));
 
 var _config = require("../config");
 
+var _classname = require("../utils/classname");
+
 var renderIcon = function renderIcon(isPrev) {
   var rtl = (0, _config.isRTL)();
 
@@ -120,7 +122,7 @@ function (_PureComponent) {
         max = _this$getLinks.max;
 
     return _react.default.createElement("div", {
-      className: (0, _styles.paginationClass)('links', 'section')
+      className: (0, _styles.paginationClass)('links', (0, _classname.getDirectionClass)('section'))
     }, _react.default.createElement(_Prev.default, this.props), links.map(function (p) {
       if (typeof p === 'number') {
         return _react.default.createElement(_Item.default, {

package/css/Pagination/PageSizeList.js

@@ -21,6 +21,8 @@ var _Select = _interopRequireDefault(require("../Select"));
 
 var _styles = require("./styles");
 
+var _classname = require("../utils/classname");
+
 var PageSizeList =
 /*#__PURE__*/
 function (_PureComponent) {
@@ -61,7 +63,7 @@ function (_PureComponent) {
       keygen: true,
       value: pageSize,
       size: size,
-      className: (0, _styles.paginationClass)('section', 'pagesize'),
+      className: (0, _styles.paginationClass)((0, _classname.getDirectionClass)('section'), 'pagesize'),
       data: pageSizeList,
       renderItem: function renderItem(d) {
         return d + " " + (text.page || '');

package/css/Pagination/Pagination.js

@@ -35,6 +35,8 @@ var _config = require("../config");
 
 var _getDataset = _interopRequireDefault(require("../utils/dom/getDataset"));
 
+var _classname = require("../utils/classname");
+
 var Pagination =
 /*#__PURE__*/
 function (_PureComponent) {
@@ -56,7 +58,7 @@ function (_PureComponent) {
         style = _this$props.style;
     var rtl = (0, _config.isRTL)();
     var className = (0, _classnames.default)((0, _styles.paginationClass)('_', size, align, rtl && 'rtl'), this.props.className);
-    var sectionClassName = (0, _styles.paginationClass)('section');
+    var sectionClassName = (0, _styles.paginationClass)((0, _classname.getDirectionClass)('section'));
     return _react.default.createElement("div", (0, _extends2.default)({
       className: className,
       style: style

package/css/Pagination/Simple.js

@@ -13,6 +13,8 @@ var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inh
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _classname = require("../utils/classname");
+
 var _Jumper = _interopRequireDefault(require("./Jumper"));
 
 var _Prev = _interopRequireDefault(require("./Prev"));
@@ -34,7 +36,7 @@ function (_PureComponent) {
 
   _proto.render = function render() {
     return _react.default.createElement("div", {
-      className: (0, _styles.paginationClass)('links', 'section')
+      className: (0, _styles.paginationClass)('links', (0, _classname.getDirectionClass)('section'))
     }, _react.default.createElement(_Prev.default, (0, _extends2.default)({}, this.props, {
       isSimple: true
     })), _react.default.createElement(_Jumper.default, (0, _extends2.default)({}, this.props, {

package/css/Pagination/styles/pagination.css

@@ -3,23 +3,24 @@
 }
 .so-pagination-section {
   display: inline-block;
-  margin-right: 8px;
   vertical-align: middle;
 }
-.so-pagination-rtl .so-pagination-section {
+.so-pagination-section-ltr {
+  margin-right: 8px;
+}
+.so-pagination-section-ltr:last-child {
   margin-right: 0;
+}
+.so-pagination-section-rtl {
   margin-left: 8px;
 }
+.so-pagination-section-rtl:last-child {
+  margin-left: 0;
+}
 .so-pagination-section > span {
   color: var(--gray-600, #6c757d);
   line-height: var(--pagination-size, 34px);
 }
-.so-pagination-section:last-child:not(.so-pagination-rtl *) {
-  margin-right: 0;
-}
-.so-pagination-rtl .so-pagination-section:last-child {
-  margin-left: 0;
-}
 .so-pagination-center {
   text-align: center;
 }
@@ -48,7 +49,6 @@
   min-width: var(--pagination-size, 34px);
   height: var(--pagination-size, 34px);
   padding: 0 2px;
-  margin-right: 8px;
   border: var(--pagination-border-width, 1px) solid #ddd;
   background-color: #fff;
   border-radius: var(--pagination-border-radius, 4px);
@@ -62,14 +62,16 @@
           user-select: none;
   vertical-align: top;
 }
-.so-pagination-rtl .so-pagination-item {
-  margin-right: 0;
-  margin-left: 8px;
+.so-pagination-item-ltr {
+  margin-right: 8px;
 }
-.so-pagination-item:last-child:not(.so-pagination-rtl *) {
+.so-pagination-item-ltr:last-child {
   margin-right: 0;
 }
-.so-pagination-rtl .so-pagination-item:last-child {
+.so-pagination-item-rtl {
+  margin-left: 8px;
+}
+.so-pagination-item-rtl:last-child {
   margin-left: 0;
 }
 .so-pagination-item svg {

package/css/Radio/styles/index.js

@@ -1,7 +1,3 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-require("../../styles/normalize.css");
-
-var _classname = _interopRequireDefault(require("../../utils/classname"));
+require("../../styles/normalize.css");