@kdcloudjs/kdesign 1.8.30 → 1.8.32

package/lib/button/style/index.css

@@ -462,3 +462,35 @@
   -webkit-transition: all calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
   transition: all calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
 }
+.kd-btn-rtl {
+  direction: rtl;
+}
+.kd-btn-rtl .kd-btn-iconWrapper-left {
+  float: right;
+  margin-left: 4px;
+}
+.kd-btn-rtl .kd-btn-iconWrapper-right {
+  float: left;
+  margin-right: 4px;
+}
+.kd-btn-rtl .kd-btn-group-basic-icon {
+  margin-right: 5px;
+  margin-left: 0;
+}
+.kd-btn-rtl .btn-space {
+  margin-left: 0;
+}
+.kd-btn-rtl-similar .kd-btn-group-trigger .kd-btn {
+  border-top-left-radius: var(--kd-c-button-radius-border, var(--kd-g-radius-border, 2px));
+  border-bottom-left-radius: var(--kd-c-button-radius-border, var(--kd-g-radius-border, 2px));
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  margin-right: -1px;
+}
+.kd-btn-rtl-similar > .kd-btn:first-child {
+  border-top-right-radius: var(--kd-c-button-radius-border, var(--kd-g-radius-border, 2px));
+  border-bottom-right-radius: var(--kd-c-button-radius-border, var(--kd-g-radius-border, 2px));
+}
+.kd-btn-group-rtl {
+  direction: rtl;
+}

package/lib/button/style/index.less

@@ -298,7 +298,7 @@
         }
       }
     }
-    &>.@{btn-prefix-cls} {
+    & > .@{btn-prefix-cls} {
       &:first-child {
         border-top-right-radius: 0;
         border-bottom-right-radius: 0;
@@ -353,3 +353,44 @@
     transition: all calc(@transition-duration - 0.1s) @ease;
   }
 }
+.@{btn-prefix-cls}-rtl {
+  direction: rtl;
+  .@{btn-prefix-cls}-iconWrapper-left {
+    float: right;
+    margin-left: 4px;
+  }
+  .@{btn-prefix-cls}-iconWrapper-right {
+    float: left;
+    margin-right: 4px;
+  }
+  .@{btn-prefix-cls}-group-basic {
+    &-icon {
+      margin-right: 5px;
+      margin-left: 0;
+    }
+  }
+  .btn-space {
+    margin-left: 0;
+  }
+  &-similar {
+    .@{btn-prefix-cls}-group-trigger {
+      .@{btn-prefix-cls} {
+        border-top-left-radius: @btn-g-radius-border;
+        border-bottom-left-radius: @btn-g-radius-border;
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+        margin-right: -1px;
+      }
+    }
+    & > .@{btn-prefix-cls} {
+      &:first-child {
+        border-top-right-radius: @btn-g-radius-border;
+        border-bottom-right-radius: @btn-g-radius-border;
+      }
+    }
+  }
+}
+
+.@{btn-prefix-cls}-group-rtl {
+  direction: rtl;
+}

package/lib/checkbox/checkbox.js

@@ -36,7 +36,8 @@ var InternalCheckbox = function InternalCheckbox(props, ref) {
   var _useContext = (0, _react.useContext)(_ConfigContext.default),
     getPrefixCls = _useContext.getPrefixCls,
     prefixCls = _useContext.prefixCls,
-    userDefaultProps = _useContext.compDefaultProps;
+    userDefaultProps = _useContext.compDefaultProps,
+    direction = _useContext.direction;
   var CheckboxProps = (0, _utils.getCompProps)('Checkbox', userDefaultProps, props);
   var checkboxType = CheckboxProps.checkboxType,
     className = CheckboxProps.className,
@@ -75,8 +76,9 @@ var InternalCheckbox = function InternalCheckbox(props, ref) {
   var getIndeterminate = function getIndeterminate() {
     return selected ? false : indeterminate;
   };
-  var getDefaultClassName = (0, _classnames.default)(className, (_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(checkboxPrefixCls), true), (0, _defineProperty2.default)(_classNames, "".concat(checkboxPrefixCls, "-no-child"), !children), (0, _defineProperty2.default)(_classNames, (0, _concat.default)(_context = "".concat(checkboxPrefixCls, "-")).call(_context, mergedSize), !!children), (0, _defineProperty2.default)(_classNames, (0, _concat.default)(_context2 = "".concat(checkboxPrefixCls, "-")).call(_context2, mergedCheckboxType), true), (0, _defineProperty2.default)(_classNames, (0, _concat.default)(_context3 = "".concat(checkboxPrefixCls, "-")).call(_context3, mergedCheckboxType, "-disabled"), mergedDisabled), (0, _defineProperty2.default)(_classNames, "checked", selected), _classNames));
-  var getSquareClassName = (0, _classnames.default)(className, (_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, "".concat(checkboxPrefixCls), true), (0, _defineProperty2.default)(_classNames2, (0, _concat.default)(_context4 = "".concat(checkboxPrefixCls, "-")).call(_context4, mergedCheckboxType), true), (0, _defineProperty2.default)(_classNames2, (0, _concat.default)(_context5 = "".concat(checkboxPrefixCls, "-")).call(_context5, mergedSize), !!children), (0, _defineProperty2.default)(_classNames2, (0, _concat.default)(_context6 = "".concat(checkboxPrefixCls, "-")).call(_context6, mergedCheckboxType, "-disabled"), mergedDisabled), (0, _defineProperty2.default)(_classNames2, (0, _concat.default)(_context7 = "".concat(checkboxPrefixCls, "-")).call(_context7, mergedCheckboxType, "-checked"), selected && !mergedDisabled), (0, _defineProperty2.default)(_classNames2, "checked", selected), _classNames2));
+  var rtlCls = direction === 'rtl' ? "".concat(checkboxPrefixCls, "-rtl") : null;
+  var getDefaultClassName = (0, _classnames.default)(className, rtlCls, (_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(checkboxPrefixCls), true), (0, _defineProperty2.default)(_classNames, "".concat(checkboxPrefixCls, "-no-child"), !children), (0, _defineProperty2.default)(_classNames, (0, _concat.default)(_context = "".concat(checkboxPrefixCls, "-")).call(_context, mergedSize), !!children), (0, _defineProperty2.default)(_classNames, (0, _concat.default)(_context2 = "".concat(checkboxPrefixCls, "-")).call(_context2, mergedCheckboxType), true), (0, _defineProperty2.default)(_classNames, (0, _concat.default)(_context3 = "".concat(checkboxPrefixCls, "-")).call(_context3, mergedCheckboxType, "-disabled"), mergedDisabled), (0, _defineProperty2.default)(_classNames, "checked", selected), _classNames));
+  var getSquareClassName = (0, _classnames.default)(className, rtlCls, (_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, "".concat(checkboxPrefixCls), true), (0, _defineProperty2.default)(_classNames2, (0, _concat.default)(_context4 = "".concat(checkboxPrefixCls, "-")).call(_context4, mergedCheckboxType), true), (0, _defineProperty2.default)(_classNames2, (0, _concat.default)(_context5 = "".concat(checkboxPrefixCls, "-")).call(_context5, mergedSize), !!children), (0, _defineProperty2.default)(_classNames2, (0, _concat.default)(_context6 = "".concat(checkboxPrefixCls, "-")).call(_context6, mergedCheckboxType, "-disabled"), mergedDisabled), (0, _defineProperty2.default)(_classNames2, (0, _concat.default)(_context7 = "".concat(checkboxPrefixCls, "-")).call(_context7, mergedCheckboxType, "-checked"), selected && !mergedDisabled), (0, _defineProperty2.default)(_classNames2, "checked", selected), _classNames2));
   var getRootClassName = isDefaultType() ? getDefaultClassName : getSquareClassName;
   var inputClassName = (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(checkboxPrefixCls, "-input"), true));
   var checkedWrapperClassName = (0, _classnames.default)((_classNames4 = {}, (0, _defineProperty2.default)(_classNames4, (0, _concat.default)(_context8 = "".concat(checkboxPrefixCls, "-")).call(_context8, mergedCheckboxType, "-wrapper"), true), (0, _defineProperty2.default)(_classNames4, (0, _concat.default)(_context9 = "".concat(checkboxPrefixCls, "-")).call(_context9, mergedCheckboxType, "-wrapper-size"), true), (0, _defineProperty2.default)(_classNames4, (0, _concat.default)(_context10 = "".concat(checkboxPrefixCls, "-")).call(_context10, mergedCheckboxType, "-margin"), !!children), (0, _defineProperty2.default)(_classNames4, (0, _concat.default)(_context11 = "".concat(checkboxPrefixCls, "-")).call(_context11, mergedCheckboxType, "-checked"), selected), (0, _defineProperty2.default)(_classNames4, (0, _concat.default)(_context12 = "".concat(checkboxPrefixCls, "-")).call(_context12, mergedCheckboxType, "-indeterminate"), getIndeterminate()), (0, _defineProperty2.default)(_classNames4, (0, _concat.default)(_context13 = "".concat(checkboxPrefixCls, "-")).call(_context13, mergedCheckboxType, "-disabled"), mergedDisabled && !selected), (0, _defineProperty2.default)(_classNames4, (0, _concat.default)(_context14 = "".concat(checkboxPrefixCls, "-")).call(_context14, mergedCheckboxType, "-checked-disabled"), mergedDisabled && selected), _classNames4));

package/lib/checkbox/group.js

@@ -42,7 +42,8 @@ var CheckboxGroup = _react.default.forwardRef(function (props, ref) {
   var _useContext = (0, _react.useContext)(_ConfigContext.default),
     getPrefixCls = _useContext.getPrefixCls,
     prefixCls = _useContext.prefixCls,
-    userDefaultProps = _useContext.compDefaultProps;
+    userDefaultProps = _useContext.compDefaultProps,
+    direction = _useContext.direction;
   var CheckboxProps = (0, _utils.getCompProps)('CheckboxGroup', userDefaultProps, props);
   var checkboxType = CheckboxProps.checkboxType,
     className = CheckboxProps.className,
@@ -69,6 +70,7 @@ var CheckboxGroup = _react.default.forwardRef(function (props, ref) {
   }, [value, defaultValue]);
   var isControlled = typeof value !== 'undefined';
   var checkboxGroupPrefixCls = getPrefixCls(prefixCls, 'checkbox-group', customPrefixcls);
+  var rtlCls = direction === 'rtl' ? "".concat(checkboxGroupPrefixCls, "-rtl") : null;
   (0, _devwarning.default)((0, _arrayUtil.isArrayValueRepeat)(groupValue), 'checkboxGroup', "variable value's value should be unique ");
   var getReduceItem = function getReduceItem(targetValue) {
     var _context;
@@ -119,7 +121,7 @@ var CheckboxGroup = _react.default.forwardRef(function (props, ref) {
     });
   };
   return _react.default.createElement("ul", (0, _extends2.default)({
-    className: (0, _classnames.default)(checkboxGroupPrefixCls, className),
+    className: (0, _classnames.default)(checkboxGroupPrefixCls, rtlCls, className),
     style: style,
     ref: ref
   }, rest), _react.default.createElement(GroupContext.Provider, {

package/lib/checkbox/style/index.css

@@ -388,7 +388,7 @@
   -webkit-transform: translate(-50%, -50%) scale(1);
           transform: translate(-50%, -50%) scale(1);
   opacity: 1;
-  content: " ";
+  content: ' ';
 }
 .kd-checkbox-default.checked .kd-checkbox-children {
   color: var(--kd-c-checkbox-color-text-primary, #212121);
@@ -396,3 +396,40 @@
 .kd-checkbox-default-indeterminate .kd-checkbox-children {
   color: var(--kd-c-checkbox-color-text-primary, #212121);
 }
+.kd-checkbox-rtl {
+  direction: rtl;
+}
+.kd-checkbox-rtl.kd-checkbox-default .kd-checkbox-default-margin {
+  margin-right: 0;
+  margin-left: var(--kd-c-checkbox-default-input-spacing-margin-right, 4px);
+}
+.kd-checkbox-group-rtl {
+  direction: rtl;
+}
+.kd-checkbox-group-rtl.kd-checkbox-group {
+  text-align: right;
+}
+.kd-checkbox-group-rtl.kd-checkbox-group > .kd-checkbox-rtl:not(:last-child) {
+  margin-left: var(--kd-c-checkbox-group-spacing-margin-right, 12px);
+  margin-right: 0;
+}
+.kd-checkbox-group-rtl.kd-checkbox-group .kd-checkbox {
+  margin-left: var(--kd-c-checkbox-group-spacing-margin-right, 12px);
+  margin-right: 0;
+}
+.kd-checkbox-group-rtl .kd-checkbox-square-triangle,
+.kd-checkbox-group-rtl .kd-checkbox-square-triangle-checked {
+  position: absolute;
+  content: '';
+  height: 0;
+  width: 0;
+  right: auto;
+  left: 0;
+  bottom: 0;
+  border-style: solid;
+  border-width: 0 var(--kd-c-checkbox-square-triangle-sizing-width, 18px) var(--kd-c-checkbox-square-triangle-sizing-height, 18px) 0;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-left-color: transparent;
+  border-bottom-color: var(--kd-c-checkbox-color-border-active, var(--kd-g-color-theme, #5582f3));
+}

package/lib/checkbox/style/index.less

@@ -52,7 +52,6 @@
     }
   }
 }
-
 .@{checkbox-prefix-cls}-square {
   border-radius: 2px;
   border: 1px solid @checkbox-border-color;
@@ -89,8 +88,8 @@
     border-bottom-color: @checkbox-checked-border-color;
   }
   &-triangle {
-    animation: kdZoomBounceLeaveEffect calc(@checkbox-transition-duration - 0.1s) cubic-bezier(0,.4,.4,1) forwards;
-    transition: all @checkbox-transition-duration cubic-bezier(0.4,0,0.6,1);
+    animation: kdZoomBounceLeaveEffect calc(@checkbox-transition-duration - 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards;
+    transition: all @checkbox-transition-duration cubic-bezier(0.4, 0, 0.6, 1);
     visibility: hidden;
     opacity: 0;
   }
@@ -108,7 +107,7 @@
   &-inner-icon {
     font-size: inherit;
     line-height: 100%;
-    animation: kdZoomLeaveEffect calc(@checkbox-transition-duration - 0.1s) cubic-bezier(0,.4,.4,1);
+    animation: kdZoomLeaveEffect calc(@checkbox-transition-duration - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
   }
   &-triangle-disabled {
     border-bottom-color: @checkbox-disabled-text-color;
@@ -124,14 +123,14 @@
   &-checked {
     border-color: @checkbox-checked-border-color;
     &:not(&-disabled)::after {
-      animation: fadeEffect calc(@checkbox-transition-duration + 0.1s) cubic-bezier(0,.4,.4,1) forwards,
-        waveEffect calc(@checkbox-transition-duration - 0.1s) cubic-bezier(0,.4,.4,1) forwards;
+      animation: fadeEffect calc(@checkbox-transition-duration + 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards,
+        waveEffect calc(@checkbox-transition-duration - 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards;
     }
     .@{checkbox-prefix-cls}-square-triangle-checked:not(.@{checkbox-prefix-cls}-square-disabled) {
-      animation: kdZoomBounceEffect calc(@checkbox-transition-duration - 0.1s) cubic-bezier(0.4,0,0.6,1);
+      animation: kdZoomBounceEffect calc(@checkbox-transition-duration - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
     }
     .@{checkbox-prefix-cls}-square-inner-icon:not(.@{checkbox-prefix-cls}-square-disabled) {
-      animation: kdZoomEffect calc(@checkbox-transition-duration - 0.1s) cubic-bezier(0,.4,.4,1);
+      animation: kdZoomEffect calc(@checkbox-transition-duration - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
     }
   }
   &-checked-disabled {
@@ -212,14 +211,14 @@
   &-checked {
     background-color: @checkbox-checked-border-color;
     border-color: @checkbox-checked-border-color;
-    transition: background-color calc(@checkbox-transition-duration - 0.1s) cubic-bezier(0,.4,.4,1),
-      border-color calc(@checkbox-transition-duration - 0.1s) cubic-bezier(0,.4,.4,1);
+    transition: background-color calc(@checkbox-transition-duration - 0.1s) cubic-bezier(0, 0.4, 0.4, 1),
+      border-color calc(@checkbox-transition-duration - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
     &:not(&-disabled)::after {
-      animation: fadeEffect calc(@checkbox-transition-duration + 0.1s) cubic-bezier(0,.4,.4,1) forwards,
-        waveEffect calc(@checkbox-transition-duration - 0.1s) cubic-bezier(0,.4,.4,1) forwards;
+      animation: fadeEffect calc(@checkbox-transition-duration + 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards,
+        waveEffect calc(@checkbox-transition-duration - 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards;
     }
     .@{checkbox-prefix-cls}-default-inner:not(&-disabled .@{checkbox-prefix-cls}-default-inner) {
-      animation: kdZoomBounceDefaultEffect calc(@checkbox-transition-duration - 0.1s) cubic-bezier(0.4,0,0.6,1) !important;
+      animation: kdZoomBounceDefaultEffect calc(@checkbox-transition-duration - 0.1s) cubic-bezier(0.4, 0, 0.6, 1) !important;
     }
   }
   &-inner {
@@ -245,9 +244,9 @@
     height: @checkbox-default-indeterminate-square;
     background-color: @checkbox-checked-border-color;
     border: 0;
-    transform: translate(-50%,-50%) scale(1);
+    transform: translate(-50%, -50%) scale(1);
     opacity: 1;
-    content: " ";
+    content: ' ';
   }
   &.checked {
     .@{checkbox-prefix-cls}-children {
@@ -260,3 +259,45 @@
     }
   }
 }
+
+.@{checkbox-prefix-cls}-rtl {
+  direction: rtl;
+  &.@{checkbox-prefix-cls}-default {
+    .@{checkbox-prefix-cls}-default-margin {
+      margin-right: 0;
+      margin-left: @checkbox-default-input-margin-right;
+    }
+  }
+}
+.@{checkbox-prefix-cls}-group-rtl {
+  direction: rtl;
+  &.@{checkbox-prefix-cls}-group {
+    text-align: right;
+    > .@{checkbox-prefix-cls}-rtl:not(:last-child) {
+      margin-left: @checkbox-group-margin-right;
+      margin-right: 0;
+    }
+    .@{checkbox-prefix-cls} {
+      margin-left: @checkbox-group-margin-right;
+      margin-right: 0;
+    }
+  }
+  .@{checkbox-prefix-cls}-square {
+    &-triangle,
+    &-triangle-checked {
+      position: absolute;
+      content: '';
+      height: 0;
+      width: 0;
+      right: auto;
+      left: 0;
+      bottom: 0;
+      border-style: solid;
+      border-width: 0 @checkbox-square-triangle-width @checkbox-square-triangle-height 0;
+      border-top-color: transparent;
+      border-right-color: transparent;
+      border-left-color: transparent;
+      border-bottom-color: @checkbox-checked-border-color;
+    }
+  }
+}

package/lib/city-picker/city-picker.js

@@ -42,7 +42,8 @@ var InternalSelect = function InternalSelect(props, ref) {
     getPrefixCls = _useContext.getPrefixCls,
     prefixCls = _useContext.prefixCls,
     userDefaultProps = _useContext.compDefaultProps,
-    locale = _useContext.locale;
+    locale = _useContext.locale,
+    direction = _useContext.direction;
   var selectProps = (0, _utils.getCompProps)('CityPicker', userDefaultProps, props);
   var cityPickerLangMsg = locale.getCompLangMsg({
     componentName: 'CityPicker'
@@ -133,7 +134,8 @@ var InternalSelect = function InternalSelect(props, ref) {
     return type === 'domestic';
   };
   var selectPrefixCls = getPrefixCls(prefixCls, 'city-picker', customPrefixcls);
-  var cityPickerCls = (0, _classnames.default)(selectPrefixCls, className, (0, _defineProperty2.default)({}, "".concat(selectPrefixCls, "-visible"), optionShow));
+  var rtlCls = direction === 'rtl' ? "".concat(selectPrefixCls, "-rtl") : null;
+  var cityPickerCls = (0, _classnames.default)(selectPrefixCls, rtlCls, className, (0, _defineProperty2.default)({}, "".concat(selectPrefixCls, "-visible"), optionShow));
   var selectionCls = (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(selectPrefixCls, "-selector"), true));
   var commCls = (0, _classnames.default)((_classNames3 = {}, (0, _defineProperty2.default)(_classNames3, "".concat(selectPrefixCls, "-bordered"), borderType === 'bordered'), (0, _defineProperty2.default)(_classNames3, "".concat(selectPrefixCls, "-underline"), borderType === 'underline'), (0, _defineProperty2.default)(_classNames3, "".concat(selectPrefixCls, "-borderless"), borderType === 'none'), (0, _defineProperty2.default)(_classNames3, (0, _concat.default)(_context = "".concat(selectPrefixCls, "-size-")).call(_context, size), size), (0, _defineProperty2.default)(_classNames3, "".concat(selectPrefixCls, "-wrapper"), true), (0, _defineProperty2.default)(_classNames3, "".concat(selectPrefixCls, "-show-search"), focusd), _classNames3));
   (0, _react.useEffect)(function () {
@@ -303,22 +305,38 @@ var InternalSelect = function InternalSelect(props, ref) {
     var symbol = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : ', ';
     if (!data) return null;
     if (isDomestic(type)) {
-      var _context6, _context7;
+      var _context8, _context10;
       if (isCommon) {
-        var _context3;
+        var _context4;
         var _curVal = (data === null || data === void 0 ? void 0 : data.province) ? data === null || data === void 0 ? void 0 : data.province : (data === null || data === void 0 ? void 0 : data.country) || '';
-        return (0, _concat.default)(_context3 = "".concat(flag && _curVal ? symbol : '')).call(_context3, _curVal);
+        if (direction === 'rtl') {
+          var _context3;
+          return (0, _concat.default)(_context3 = "".concat(_curVal)).call(_context3, flag && _curVal ? symbol : '');
+        }
+        return (0, _concat.default)(_context4 = "".concat(flag && _curVal ? symbol : '')).call(_context4, _curVal);
       }
       if (data === null || data === void 0 ? void 0 : data.type) {
-        var _context4, _context5;
-        var _curVal2 = (data.type === 'domestic' ? (data === null || data === void 0 ? void 0 : data.province) || (data === null || data === void 0 ? void 0 : data.country) : (0, _filter.default)(_context4 = [data === null || data === void 0 ? void 0 : data.province, data === null || data === void 0 ? void 0 : data.country]).call(_context4, Boolean).join(symbol)) || '';
-        return (0, _concat.default)(_context5 = "".concat(flag && _curVal2 ? symbol : '')).call(_context5, _curVal2);
+        var _context5, _context7;
+        var _curVal2 = (data.type === 'domestic' ? (data === null || data === void 0 ? void 0 : data.province) || (data === null || data === void 0 ? void 0 : data.country) : (0, _filter.default)(_context5 = [data === null || data === void 0 ? void 0 : data.province, data === null || data === void 0 ? void 0 : data.country]).call(_context5, Boolean).join(symbol)) || '';
+        if (direction === 'rtl') {
+          var _context6;
+          return (0, _concat.default)(_context6 = "".concat(_curVal2)).call(_context6, flag && _curVal2 ? symbol : '');
+        }
+        return (0, _concat.default)(_context7 = "".concat(flag && _curVal2 ? symbol : '')).call(_context7, _curVal2);
       }
-      var curVal = tabsValue === 'domestic' ? (data === null || data === void 0 ? void 0 : data.province) || (data === null || data === void 0 ? void 0 : data.country) || '' : (0, _filter.default)(_context6 = [data === null || data === void 0 ? void 0 : data.province, data === null || data === void 0 ? void 0 : data.country]).call(_context6, Boolean).join(symbol);
-      return (0, _concat.default)(_context7 = "".concat(flag && curVal ? symbol : '')).call(_context7, curVal);
+      var curVal = tabsValue === 'domestic' ? (data === null || data === void 0 ? void 0 : data.province) || (data === null || data === void 0 ? void 0 : data.country) || '' : (0, _filter.default)(_context8 = [data === null || data === void 0 ? void 0 : data.province, data === null || data === void 0 ? void 0 : data.country]).call(_context8, Boolean).join(symbol);
+      if (direction === 'rtl') {
+        var _context9;
+        return (0, _concat.default)(_context9 = "".concat(curVal)).call(_context9, flag && curVal ? symbol : '');
+      }
+      return (0, _concat.default)(_context10 = "".concat(flag && curVal ? symbol : '')).call(_context10, curVal);
     } else {
-      var _context8, _context9;
-      return (0, _concat.default)(_context8 = "".concat(flag && ((data === null || data === void 0 ? void 0 : data.province) || (data === null || data === void 0 ? void 0 : data.country)) ? symbol : '')).call(_context8, (0, _filter.default)(_context9 = [data === null || data === void 0 ? void 0 : data.province, data === null || data === void 0 ? void 0 : data.country]).call(_context9, Boolean).join(symbol));
+      var _context13, _context14;
+      if (direction === 'rtl') {
+        var _context11, _context12;
+        return (0, _concat.default)(_context11 = "".concat((0, _filter.default)(_context12 = [data === null || data === void 0 ? void 0 : data.province, data === null || data === void 0 ? void 0 : data.country]).call(_context12, Boolean).join(symbol))).call(_context11, flag && ((data === null || data === void 0 ? void 0 : data.province) || (data === null || data === void 0 ? void 0 : data.country)) ? symbol : '');
+      }
+      return (0, _concat.default)(_context13 = "".concat(flag && ((data === null || data === void 0 ? void 0 : data.province) || (data === null || data === void 0 ? void 0 : data.country)) ? symbol : '')).call(_context13, (0, _filter.default)(_context14 = [data === null || data === void 0 ? void 0 : data.province, data === null || data === void 0 ? void 0 : data.country]).call(_context14, Boolean).join(symbol));
     }
   }, [type, tabsValue]);
   var renderSingle = function renderSingle() {
@@ -479,8 +497,8 @@ var InternalSelect = function InternalSelect(props, ref) {
     }
   };
   var popperProps = (0, _extends2.default)((0, _extends2.default)({}, selectProps), {
-    prefixCls: "".concat(selectPrefixCls, "-dropdown"),
-    placement: 'bottomLeft',
+    prefixCls: (0, _classnames.default)("".concat(selectPrefixCls, "-dropdown"), rtlCls),
+    placement: direction === 'rtl' ? 'bottomRight' : 'bottomLeft',
     popperStyle: catchStyle(),
     defaultVisible: optionShow,
     visible: optionShow,

package/lib/city-picker/option.js

@@ -33,7 +33,8 @@ var InternalOption = function InternalOption(props, ref) {
     name = city.name;
   var _useContext = (0, _react.useContext)(_ConfigContext.default),
     getPrefixCls = _useContext.getPrefixCls,
-    prefixCls = _useContext.prefixCls;
+    prefixCls = _useContext.prefixCls,
+    direction = _useContext.direction;
   var selectOptionPrefixCls = getPrefixCls(prefixCls, 'city-picker-list-item');
   var isSelected = id !== undefined ? id === value : false;
   var optionCls = (0, _classnames.default)(selectOptionPrefixCls, className, (_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(selectOptionPrefixCls, "-selected"), isSelected), (0, _defineProperty2.default)(_classNames, "".concat(selectOptionPrefixCls, "-disabled"), disabled), (0, _defineProperty2.default)(_classNames, "".concat(selectOptionPrefixCls, "-active"), activeIndex === index), _classNames));
@@ -51,7 +52,11 @@ var InternalOption = function InternalOption(props, ref) {
     title: name,
     onClick: handleClick,
     onMouseEnter: handleOnMouseEnter
-  }, typeof itemRender === 'function' ? itemRender(city) : _react.default.createElement(_react.default.Fragment, null, _react.default.createElement("span", {
+  }, typeof itemRender === 'function' ? itemRender(city) : direction === 'rtl' ? _react.default.createElement(_react.default.Fragment, null, _react.default.createElement("span", {
+    className: "".concat(selectOptionPrefixCls, "-info")
+  }, renderCityInfo === null || renderCityInfo === void 0 ? void 0 : renderCityInfo(city, true)), _react.default.createElement("span", {
+    className: "".concat(selectOptionPrefixCls, "-content")
+  }, children)) : _react.default.createElement(_react.default.Fragment, null, _react.default.createElement("span", {
     className: "".concat(selectOptionPrefixCls, "-content")
   }, children), _react.default.createElement("span", {
     className: "".concat(selectOptionPrefixCls, "-info")

package/lib/city-picker/style/index.css

@@ -493,3 +493,57 @@
   white-space: nowrap;
   text-overflow: ellipsis;
 }
+.kd-city-picker-rtl {
+  direction: rtl;
+}
+.kd-city-picker-rtl.kd-city-picker .kd-city-picker-description {
+  text-align: right;
+}
+.kd-city-picker-rtl.kd-city-picker .kd-city-picker-selector .kd-city-picker-wrapper {
+  padding-right: 0;
+  padding-left: 24px;
+}
+.kd-city-picker-rtl.kd-city-picker .kd-city-picker-placeholder {
+  position: absolute;
+  left: 24px;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
+.kd-city-picker-rtl.kd-city-picker .kd-city-picker-bordered {
+  padding-right: var(--kd-c-city-picker-bordered-spacing-padding-left, 8px) !important;
+  padding-left: auto !important;
+}
+.kd-city-picker-rtl.kd-city-picker .kd-city-picker-bordered .kd-city-picker-suffix {
+  padding-right: 8px;
+  padding-left: auto;
+}
+.kd-city-picker-rtl.kd-city-picker .kd-city-picker-bordered .kd-city-picker-placeholder {
+  padding-right: var(--kd-c-city-picker-bordered-spacing-padding-left, 8px);
+}
+.kd-city-picker-rtl.kd-city-picker .kd-city-picker-suffix {
+  left: 0;
+  right: auto;
+  top: 0;
+  bottom: 0;
+  position: absolute;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  margin-right: 8px;
+}
+.kd-city-picker-rtl.kd-city-picker .kd-city-picker-disabled.kd-city-picker-bordered {
+  padding-right: auto;
+  padding-left: var(--kd-c-city-picker-bordered-spacing-padding-left, 8px);
+}
+.kd-city-picker-rtl.kd-city-picker .kd-city-picker-content-item {
+  position: absolute;
+  right: 0;
+  left: auto;
+}
+.kd-city-picker-rtl.kd-city-picker .kd-city-picker-content-info {
+  text-align: left;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}

package/lib/city-picker/style/index.less

@@ -367,3 +367,70 @@
     }
   }
 }
+
+.@{city-picker-prefix-cls}-rtl {
+  direction: rtl;
+  &.@{city-picker-prefix-cls} {
+    .@{city-picker-prefix-cls}-description {
+      text-align: right;
+    }
+    .@{city-picker-prefix-cls}-selector {
+      .@{city-picker-prefix-cls}-wrapper {
+        padding-right: 0;
+        padding-left: 24px;
+      }
+    }
+    .@{city-picker-prefix-cls}-placeholder {
+      position: absolute;
+      left: 24px;
+      right: 0;
+      top: 0;
+      bottom: 0;
+    }
+
+    .@{city-picker-prefix-cls}-bordered {
+      padding-right: @city-picker-bordered !important;
+      padding-left: auto !important;
+      .@{city-picker-prefix-cls}-suffix {
+        padding-right: 8px;
+        padding-left: auto;
+      }
+
+      .@{city-picker-prefix-cls}-placeholder {
+        padding-right: @city-picker-bordered;
+      }
+    }
+
+    .@{city-picker-prefix-cls}-suffix {
+      left: 0;
+      right: auto;
+      top: 0;
+      bottom: 0;
+      position: absolute;
+      display: flex;
+      margin-right: 8px;
+    }
+
+    
+
+    .@{city-picker-prefix-cls}-disabled {
+      &.@{city-picker-prefix-cls}-bordered {
+        padding-right: auto;
+        padding-left: @city-picker-bordered;
+      }
+    }
+
+    .@{city-picker-prefix-cls}-content {
+      &-item {
+        position: absolute;
+        right: 0;
+        left: auto;
+      }
+
+      &-info {
+        text-align: left;
+        .over();
+      }
+    }
+  }
+}

package/lib/collapse/collapse.js

@@ -30,7 +30,8 @@ var InternalCollapse = _react.default.forwardRef(function (props, ref) {
   var _React$useContext = _react.default.useContext(_ConfigContext.default),
     getPrefixCls = _React$useContext.getPrefixCls,
     prefixCls = _React$useContext.prefixCls,
-    userDefaultProps = _React$useContext.compDefaultProps;
+    userDefaultProps = _React$useContext.compDefaultProps,
+    direction = _React$useContext.direction;
   var _getCompProps = (0, _utils.getCompProps)('Collapse', userDefaultProps, props),
     accordion = _getCompProps.accordion,
     activeKey = _getCompProps.activeKey,
@@ -44,6 +45,7 @@ var InternalCollapse = _react.default.forwardRef(function (props, ref) {
     children = _getCompProps.children,
     customPrefixcls = _getCompProps.prefixCls;
   var CollapsePrefixCls = getPrefixCls(prefixCls, 'collapse', customPrefixcls);
+  var rtlCls = direction === 'rtl' ? "".concat(CollapsePrefixCls, "-rtl") : null;
   var _useState = (0, _react.useState)([]),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     innerKey = _useState2[0],
@@ -110,7 +112,7 @@ var InternalCollapse = _react.default.forwardRef(function (props, ref) {
       }, item.props));
     });
   };
-  var rootClassName = (0, _classnames.default)(className, (0, _defineProperty2.default)({}, "".concat(CollapsePrefixCls), true));
+  var rootClassName = (0, _classnames.default)(className, rtlCls, (0, _defineProperty2.default)({}, "".concat(CollapsePrefixCls), true));
   var collapseRef = ref || _react.default.createRef();
   return _react.default.createElement("div", {
     className: rootClassName,

package/lib/collapse/style/index.css

@@ -262,3 +262,27 @@
   cursor: not-allowed !important;
   color: var(--kd-c-collapse-color-disabled, raba(178, 178, 178, 1));
 }
+.kd-collapse-rtl {
+  direction: rtl;
+}
+.kd-collapse-rtl .kd-collapse-panel-top {
+  padding: 8px 28px 8px 50px;
+}
+.kd-collapse-rtl .kd-collapse-panel-icon {
+  margin-left: var(--kd-c-collapse-spacing-margin-right, 6px);
+  margin-right: 0;
+}
+.kd-collapse-rtl .kd-collapse-panel-animation-expand {
+  -webkit-transform: rotate(180deg);
+          transform: rotate(180deg);
+}
+.kd-collapse-rtl .kd-collapse-panel-children > div {
+  text-align: right;
+}
+.kd-collapse-rtl .kd-collapse-panel-children-hide > div {
+  text-align: right;
+}
+.kd-collapse-rtl .kd-collapse-panel-middle {
+  margin-right: 22px;
+  margin-left: 0;
+}

package/lib/collapse/style/index.less

@@ -117,3 +117,29 @@
     }
   }
 }
+
+.@{collapse-prefix-cls}-rtl {
+  direction: rtl;
+  .@{collapse-prefix-cls}-panel {
+    &-top {
+      padding: 8px 28px 8px 50px;
+    }
+    &-icon {
+      margin-left: @collapse-icon-margin-right;
+      margin-right: 0;
+    }
+    &-animation-expand {
+      transform: rotate(180deg);
+    }
+    &-children > div {
+      text-align: right;
+    }
+    &-children-hide > div {
+      text-align: right;
+    }
+    &-middle {
+      margin-right: 22px;
+      margin-left: 0;
+    }
+  }
+}