@kdcloudjs/kdesign 1.8.30 → 1.8.32

package/lib/qr-code/qr-code.js

@@ -33,7 +33,8 @@ var QRCode = function QRCode(props) {
     getPrefixCls = _useContext.getPrefixCls,
     prefixCls = _useContext.prefixCls,
     userDefaultProps = _useContext.compDefaultProps,
-    getCompLangMsg = _useContext.locale.getCompLangMsg;
+    getCompLangMsg = _useContext.locale.getCompLangMsg,
+    direction = _useContext.direction;
   var qrCodeProps = (0, _utils.getCompProps)('QRCode', userDefaultProps, props);
   var value = qrCodeProps.value,
     size = qrCodeProps.size,
@@ -52,7 +53,8 @@ var QRCode = function QRCode(props) {
   var className = qrCodeProps.className,
     customPrefixcls = qrCodeProps.prefixCls;
   var qrCodePrefixCls = getPrefixCls(prefixCls, 'qrcode', customPrefixcls);
-  var qrCodeClass = (0, _classnames.default)(qrCodePrefixCls, className, (0, _defineProperty2.default)({}, "".concat(qrCodePrefixCls, "-borderless"), !bordered));
+  var rtlCls = direction === 'rtl' ? "".concat(qrCodePrefixCls, "-rtl") : null;
+  var qrCodeClass = (0, _classnames.default)(qrCodePrefixCls, rtlCls, className, (0, _defineProperty2.default)({}, "".concat(qrCodePrefixCls, "-borderless"), !bordered));
   var qrCodeLangMsg = getCompLangMsg({
     componentName: 'QRCode'
   });

package/lib/qr-code/style/index.css

@@ -152,3 +152,6 @@
 .kd-qrcode-borderless {
   border: none;
 }
+.kd-qrcode-rtl {
+  direction: rtl;
+}

package/lib/qr-code/style/index.less

@@ -19,11 +19,11 @@
   list-style: none;
   overflow: hidden;
 
-  &-expired{
+  &-expired {
     margin-bottom: @qrcode-spacing-margin-vertical;
   }
 
-  &-mask{
+  &-mask {
     position: absolute;
     z-index: 10;
     display: flex;
@@ -36,7 +36,11 @@
     background: @qrcode-color-background;
     text-align: center;
   }
-  &-borderless{
+  &-borderless {
     border: none;
   }
 }
+
+.@{qrcode-prefix-cls}-rtl {
+  direction: rtl;
+}

package/lib/radio/group.js

@@ -23,7 +23,8 @@ var RadioGroup = React.forwardRef(function (props, ref) {
   var _React$useContext = React.useContext(_ConfigContext.default),
     getPrefixCls = _React$useContext.getPrefixCls,
     prefixCls = _React$useContext.prefixCls,
-    userDefaultProps = _React$useContext.compDefaultProps;
+    userDefaultProps = _React$useContext.compDefaultProps,
+    direction = _React$useContext.direction;
   var initValue = typeof props.value === 'undefined' ? props.defaultValue : props.value;
   var _React$useState = React.useState(initValue),
     _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
@@ -55,6 +56,7 @@ var RadioGroup = React.forwardRef(function (props, ref) {
       optionType = _getCompProps.optionType,
       customPrefixcls = _getCompProps.prefixCls;
     var groupPrefixCls = getPrefixCls === null || getPrefixCls === void 0 ? void 0 : getPrefixCls(prefixCls, "radio-group", customPrefixcls);
+    var rtlCls = direction === 'rtl' ? "".concat(groupPrefixCls, "-rtl") : null;
     var radioPrefixCls = getPrefixCls === null || getPrefixCls === void 0 ? void 0 : getPrefixCls(prefixCls, "radio", customPrefixcls);
     var childrenToRender = children;
     if (options && options.length > 0) {
@@ -81,7 +83,7 @@ var RadioGroup = React.forwardRef(function (props, ref) {
       });
     }
     return React.createElement("div", {
-      className: (0, _classnames.default)(groupPrefixCls, className),
+      className: (0, _classnames.default)(groupPrefixCls, rtlCls, className),
       style: style,
       id: id,
       ref: ref

package/lib/radio/radio.js

@@ -37,7 +37,8 @@ var InternalRadio = function InternalRadio(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 innerRef = _react.default.useRef();
   var mergedRef = ref || innerRef;
   var _a = (0, _utils.getCompProps)('Radio', userDefaultProps, props),
@@ -59,6 +60,7 @@ var InternalRadio = function InternalRadio(props, ref) {
     return "radio".concat(radioType === 'square' ? "-".concat(radioType) : '');
   };
   var radioPrefixCls = getPrefixCls === null || getPrefixCls === void 0 ? void 0 : getPrefixCls(prefixCls, getPrefix(radioType), customPrefixcls);
+  var rtlCls = direction === 'rtl' ? "".concat(radioPrefixCls, "-rtl") : null;
   var _React$useState = _react.default.useState(initValue),
     _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
     isChecked = _React$useState2[0],
@@ -79,7 +81,7 @@ var InternalRadio = function InternalRadio(props, ref) {
       context.onChange(e, value);
     }
   };
-  var classString = (0, _classnames.default)((_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(radioPrefixCls), true), (0, _defineProperty2.default)(_classNames, "".concat(radioPrefixCls, "-disabled"), disabled), (0, _defineProperty2.default)(_classNames, "".concat(radioPrefixCls, "-checked"), isChecked), _classNames), className);
+  var classString = (0, _classnames.default)(rtlCls, (_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(radioPrefixCls), true), (0, _defineProperty2.default)(_classNames, "".concat(radioPrefixCls, "-disabled"), disabled), (0, _defineProperty2.default)(_classNames, "".concat(radioPrefixCls, "-checked"), isChecked), _classNames), className);
   (0, _react.useEffect)(function () {
     var _a;
     var handleRepeatClick = function handleRepeatClick(e) {

package/lib/radio/style/index.css

@@ -454,3 +454,41 @@
   display: block;
   line-height: 1.5;
 }
+.kd-radio-rtl {
+  direction: rtl;
+}
+.kd-radio-button-rtl {
+  direction: rtl;
+}
+.kd-radio-button-rtl.kd-radio-button {
+  border: var(--kd-c-radio-radius-border-width, 1px) solid var(--kd-c-radio-color-border, var(--kd-g-color-border-strong, #d9d9d9));
+  border-right: none;
+}
+.kd-radio-button-rtl.kd-radio-button.kd-radio-button:first-child {
+  border-radius: 0 2px 2px 0;
+  border-right: var(--kd-c-radio-radius-border-width, 1px) solid var(--kd-c-radio-color-border, var(--kd-g-color-border-strong, #d9d9d9));
+}
+.kd-radio-button-rtl.kd-radio-button.kd-radio-button:first-child::before {
+  content: none;
+}
+.kd-radio-button-rtl.kd-radio-button.kd-radio-button:last-child {
+  border-radius: 2px 0 0 2px;
+}
+.kd-radio-square-rtl {
+  direction: rtl;
+}
+.kd-radio-square-rtl.kd-radio-square {
+  margin-left: var(--kd-c-radio-spacing-margin-right, 8px);
+  margin-right: 0;
+}
+.kd-radio-square-rtl.kd-radio-square.kd-radio-square::after {
+  left: calc(-1 * (var(--kd-c-radio-square-sizing-height, 32px) - 10px) / 2);
+  right: auto;
+}
+.kd-radio-square-rtl.kd-radio-square.kd-radio-square-checked::after {
+  left: calc(-1 * (var(--kd-c-radio-square-sizing-height, 32px) - 10px) / 2);
+  right: auto;
+}
+.kd-radio-group-rtl {
+  direction: rtl;
+}

package/lib/radio/style/index.less

@@ -365,3 +365,49 @@
     line-height: 1.5;
   }
 }
+
+.@{radio-prefix-cls}-rtl {
+  direction: rtl;
+}
+
+.@{radio-button-prefix-cls}-rtl {
+  direction: rtl;
+  &.@{radio-button-prefix-cls} {
+    border: @radio-border-width solid @radio-color-border;
+    border-right: none;
+    &.@{radio-button-prefix-cls}:first-child {
+      border-radius: 0 @radius-size @radius-size 0;
+      border-right: @radio-border-width solid @radio-color-border;
+      &::before {
+        content: none;
+      }
+    }
+
+    &.@{radio-button-prefix-cls}:last-child {
+    border-radius: @radius-size 0 0 @radius-size;
+  }
+  }
+  
+} 
+
+.@{radio-square-prefix-cls}-rtl {
+  direction: rtl;
+  &.@{radio-square-prefix-cls} {
+    margin-left: @radio-margin-right;
+    margin-right: 0;
+    &.@{radio-square-prefix-cls}::after {
+      left: calc(-1 * (@radio-square-height - 10px) / 2);
+      right: auto;
+  }
+    &.@{radio-square-prefix-cls}-checked {
+      &::after {
+        left: calc(-1 * (@radio-square-height - 10px) / 2);
+        right: auto;
+      }
+    }
+  }
+
+ }
+.@{radio-group-prefix-cls}-rtl {
+  direction: rtl;
+}

package/lib/select/option.js

@@ -41,8 +41,10 @@ var InternalOption = function InternalOption(props, ref) {
   var optionProps = (0, _extends2.default)({}, props);
   var _useContext = (0, _react.useContext)(_ConfigContext.default),
     getPrefixCls = _useContext.getPrefixCls,
-    prefixCls = _useContext.prefixCls;
+    prefixCls = _useContext.prefixCls,
+    direction = _useContext.direction;
   var selectOptionPrefixCls = getPrefixCls(prefixCls, 'select-item');
+  var rtlCls = direction === 'rtl' ? "".concat(selectOptionPrefixCls, "-rtl") : null;
   (0, _react.useEffect)(function () {
     if (isMultiple) {
       setSelected((values === null || values === void 0 ? void 0 : values.indexOf(value)) > -1);
@@ -50,7 +52,7 @@ var InternalOption = function InternalOption(props, ref) {
       setSelected(value !== undefined ? value === values : false);
     }
   });
-  var optionCls = (0, _classnames.default)(selectOptionPrefixCls, className, (_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(selectOptionPrefixCls, "-option"), true), (0, _defineProperty2.default)(_classNames, "".concat(selectOptionPrefixCls, "-option-active"), activeIndex === index), (0, _defineProperty2.default)(_classNames, "".concat(selectOptionPrefixCls, "-option-selected"), isSelected), (0, _defineProperty2.default)(_classNames, "".concat(selectOptionPrefixCls, "-option-disabled"), disabled), _classNames));
+  var optionCls = (0, _classnames.default)(selectOptionPrefixCls, rtlCls, className, (_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(selectOptionPrefixCls, "-option"), true), (0, _defineProperty2.default)(_classNames, "".concat(selectOptionPrefixCls, "-option-active"), activeIndex === index), (0, _defineProperty2.default)(_classNames, "".concat(selectOptionPrefixCls, "-option-selected"), isSelected), (0, _defineProperty2.default)(_classNames, "".concat(selectOptionPrefixCls, "-option-disabled"), disabled), _classNames));
   var contentCls = (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(selectOptionPrefixCls, "-option-content"), true));
   var handleClick = function handleClick(e) {
     e.preventDefault();

package/lib/select/select.js

@@ -38,16 +38,17 @@ var _KeyCode = _interopRequireDefault(require("../_utils/KeyCode"));
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof _Symbol !== "undefined" && _getIteratorMethod(o) || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
-function _unsupportedIterableToArray(o, minLen) { var _context6; if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = _sliceInstanceProperty(_context6 = Object.prototype.toString.call(o)).call(_context6, 8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return _Array$from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _unsupportedIterableToArray(o, minLen) { var _context7; if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = _sliceInstanceProperty(_context7 = Object.prototype.toString.call(o)).call(_context7, 8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return _Array$from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 var INPUT_MIN_WIDTH = 4;
 var InternalSelect = function InternalSelect(props, ref) {
-  var _context, _classNames5, _classNames6, _classNames12, _context5;
+  var _context, _classNames5, _classNames6, _classNames12, _context5, _context6;
   var _useContext = (0, _react.useContext)(_ConfigContext.default),
     getPrefixCls = _useContext.getPrefixCls,
     prefixCls = _useContext.prefixCls,
     userDefaultProps = _useContext.compDefaultProps,
-    locale = _useContext.locale;
+    locale = _useContext.locale,
+    direction = _useContext.direction;
   var selectProps = (0, _utils.getCompProps)('Select', userDefaultProps, props);
   var selectLangMsg = locale.getCompLangMsg({
     componentName: 'Select'
@@ -137,7 +138,8 @@ var InternalSelect = function InternalSelect(props, ref) {
     return (0, _isBoolean.default)(showSearch) ? showSearch : isMultiple;
   }, [isMultiple, showSearch]);
   var selectPrefixCls = getPrefixCls(prefixCls, 'select', customPrefixcls);
-  var selectCls = (0, _classnames.default)(selectPrefixCls, className, (0, _defineProperty2.default)({}, "".concat(selectPrefixCls, "-visible"), optionShow));
+  var rtlCls = direction === 'rtl' ? "".concat(selectPrefixCls, "-rtl") : null;
+  var selectCls = (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 dropContentCls = (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(selectPrefixCls, "-dropdown-scroll"), (isMultiple ? (realChildren === null || realChildren === void 0 ? void 0 : realChildren.length) > 8 : (realChildren === null || realChildren === void 0 ? void 0 : realChildren.length) > 10) || selectProps.dropdownRender));
   var multipleFooterCls = (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(selectPrefixCls, "-multiple-footer"), true));
@@ -701,7 +703,7 @@ var InternalSelect = function InternalSelect(props, ref) {
     var multipleCls = (0, _classnames.default)(commCls, (_classNames10 = {}, (0, _defineProperty2.default)(_classNames10, "".concat(selectPrefixCls, "-multiple-disabled"), disabled), (0, _defineProperty2.default)(_classNames10, (0, _concat.default)(_context3 = "".concat(selectPrefixCls, "-")).call(_context3, mode), mode), (0, _defineProperty2.default)(_classNames10, "".concat(selectPrefixCls, "-focused"), focusd || optionShow), _classNames10));
     var itemCls = (0, _classnames.default)((_classNames11 = {}, (0, _defineProperty2.default)(_classNames11, "".concat(selectPrefixCls, "-selection-item"), true), (0, _defineProperty2.default)(_classNames11, (0, _concat.default)(_context4 = "".concat(selectPrefixCls, "-selection-item-")).call(_context4, size), size), _classNames11));
     var TagStyle = {
-      margin: '2px 8px 2px 0',
+      margin: direction === 'rtl' ? '2px 0 2px 8px' : '2px 8px 2px 0',
       maxWidth: '100%'
     };
     var totalText = locale.getLangMsg('Select', 'total', {
@@ -917,7 +919,7 @@ var InternalSelect = function InternalSelect(props, ref) {
     }
   };
   var popperProps = (0, _extends2.default)((0, _extends2.default)({}, selectProps), {
-    prefixCls: (0, _concat.default)(_context5 = "".concat(selectPrefixCls, "-dropdown-panel")).call(_context5, isMultiple ? " ".concat(selectPrefixCls, "-multiple-dropdown-panel") : ''),
+    prefixCls: (0, _concat.default)(_context5 = (0, _concat.default)(_context6 = "".concat(selectPrefixCls, "-dropdown-panel")).call(_context6, isMultiple ? " ".concat(selectPrefixCls, "-multiple-dropdown-panel") : '', " ")).call(_context5, rtlCls),
     placement: 'bottomLeft',
     popperStyle: catchStyle(),
     defaultVisible: optionShow,

package/lib/select/style/index.css

@@ -717,3 +717,64 @@
   -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-select-rtl {
+  direction: rtl;
+}
+.kd-select-rtl .kd-select-selector .kd-select-wrapper {
+  padding: 1px 0 1px 28px;
+}
+.kd-select-rtl .kd-select-selector .kd-select-wrapper .kd-select-suffix {
+  position: absolute;
+  right: auto;
+  left: 0;
+  margin-left: 0;
+  margin-right: 8px;
+}
+.kd-select-rtl .kd-select-selector .kd-select-wrapper .kd-select-placeholder {
+  right: 0;
+  left: 28px;
+}
+.kd-select-rtl .kd-select-selector .kd-select-wrapper.kd-select-single .kd-select-selection-search {
+  padding-left: auto;
+  position: absolute;
+  left: 28px;
+  right: 0;
+  height: 100%;
+  top: 0;
+  bottom: 0;
+}
+.kd-select-rtl .kd-select-selector .kd-select-multiple .kd-select-selection-tag .kd-tag {
+  margin: 2px 0 2px 8px;
+}
+.kd-select-rtl .kd-select-selector .kd-select-multiple .kd-select-selection-tag .kd-tag-closeWrapper {
+  margin-right: 4px;
+  margin-left: 0;
+}
+.kd-select-rtl .kd-select-selector .kd-select-bordered {
+  padding-left: auto !important;
+  padding-right: var(--kd-c-select-bordered-spacing-padding-left, 8px) !important;
+}
+.kd-select-rtl .kd-select-selector .kd-select-bordered .kd-select-suffix {
+  padding-left: 8px;
+}
+.kd-select-rtl .kd-select-selector .kd-select-bordered.kd-select-single .kd-select-selection-search {
+  padding-right: var(--kd-c-select-bordered-spacing-padding-left, 8px);
+}
+.kd-select-rtl .kd-select-selector .kd-select-bordered .kd-select-placeholder {
+  padding-right: var(--kd-c-select-bordered-spacing-padding-left, 8px);
+}
+.kd-select-rtl .kd-select-dropdown .kd-select-multiple-footer-hadSelected {
+  padding-right: 12px;
+  padding-left: 0;
+}
+.kd-select-rtl .kd-select-dropdown .kd-select-multiple-footer .kd-checkbox-default-margin {
+  margin-right: 0;
+  margin-left: 4px;
+}
+.kd-select-item-rtl {
+  direction: rtl;
+}
+.kd-select-item-rtl.kd-select-item .kd-select-item-option-content .kd-checkbox-default-margin {
+  margin-right: 0;
+  margin-left: 4px;
+}

package/lib/select/style/index.less

@@ -459,3 +459,90 @@
     }
   }
 }
+
+.@{select-prefix-cls}-rtl {
+  direction: rtl;
+  .@{select-prefix-cls}-selector {
+    .@{select-prefix-cls}-wrapper {
+      padding: 1px 0 1px 28px;
+      .@{select-prefix-cls}-suffix {
+        position: absolute;
+        right: auto;
+        left: 0;
+        margin-left: 0;
+        margin-right: 8px;
+      }
+      .@{select-prefix-cls}-placeholder {
+        right: 0;
+        left: 28px;
+      }
+      &.@{select-prefix-cls}-single {
+        .@{select-prefix-cls}-selection-search {
+          padding-left: auto;
+          position: absolute;
+          left: 28px;
+          right: 0;
+          height: 100%;
+          top: 0;
+          bottom: 0;
+        }
+      }
+    }
+    .@{select-prefix-cls}-multiple {
+      .@{select-prefix-cls}-selection-tag {
+        .@{kd-prefix}-tag {
+          margin: 2px 0 2px 8px;
+          &-closeWrapper {
+            margin-right: 4px;
+            margin-left: 0;
+          }
+        }
+      }
+    }
+    .@{select-prefix-cls}-bordered {
+      padding-left: auto !important;
+      padding-right: @select-bordered !important;
+      .@{select-prefix-cls}-suffix {
+        padding-left: 8px;
+      }
+
+      &.@{select-prefix-cls}-single {
+        .@{select-prefix-cls}-selection-search {
+          padding-right: @select-bordered;
+        }
+      }
+
+      .@{select-prefix-cls}-placeholder {
+        padding-right: @select-bordered;
+      }
+    }
+  }
+  .@{select-prefix-cls}-dropdown {
+    .@{select-prefix-cls}-multiple-footer {
+      &-hadSelected {
+        padding-right: 12px;
+        padding-left: 0;
+      }
+      .@{kd-prefix}-checkbox {
+        &-default-margin {
+          margin-right: 0;
+          margin-left: 4px;
+        }
+      }
+    }
+  }
+}
+
+.@{select-prefix-cls}-item-rtl {
+  direction: rtl;
+  &.@{select-prefix-cls}-item {
+    .@{select-prefix-cls}-item-option-content {
+      .@{kd-prefix}-checkbox {
+        &-default-margin {
+          margin-right: 0;
+          margin-left: 4px;
+        }
+      }
+    }
+  }
+}

package/lib/steps/Steps.js

@@ -36,7 +36,8 @@ var Steps = function Steps(props) {
   var _useContext = (0, _react.useContext)(_ConfigContext.default),
     getPrefixCls = _useContext.getPrefixCls,
     prefixCls = _useContext.prefixCls,
-    userDefaultProps = _useContext.compDefaultProps;
+    userDefaultProps = _useContext.compDefaultProps,
+    rtlDirection = _useContext.direction;
   var stepsProps = (0, _utils.getCompProps)('Steps', userDefaultProps, props);
   var direction = stepsProps.direction,
     initial = stepsProps.initial,
@@ -58,7 +59,8 @@ var Steps = function Steps(props) {
   (0, _devwarning.default)(_interface.Statuses.indexOf(status) === -1, 'steps', "cannot found steps status '".concat(status, "'"));
   (0, _devwarning.default)(_interface.LabelPlacements.indexOf(labelPlacement) === -1, 'steps', "cannot found steps labelPlacement '".concat(labelPlacement, "'"));
   var stepsPrefixCls = getPrefixCls(prefixCls, 'steps', customPrefixcls);
-  var stepsClassName = (0, _classnames.default)(stepsPrefixCls, (0, _concat.default)(_context = "".concat(stepsPrefixCls, "-")).call(_context, direction), className, (_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(stepsPrefixCls, "-leftLable"), labelPlacement === 'left'), (0, _defineProperty2.default)(_classNames, "".concat(stepsPrefixCls, "-rightLable"), labelPlacement === 'right'), (0, _defineProperty2.default)(_classNames, "".concat(stepsPrefixCls, "-bottomLable"), labelPlacement === 'bottom'), (0, _defineProperty2.default)(_classNames, "".concat(stepsPrefixCls, "-topLable"), labelPlacement === 'top'), _classNames));
+  var rtlCls = rtlDirection === 'rtl' ? "".concat(stepsPrefixCls, "-rtl") : null;
+  var stepsClassName = (0, _classnames.default)(stepsPrefixCls, rtlCls, (0, _concat.default)(_context = "".concat(stepsPrefixCls, "-")).call(_context, direction), className, (_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(stepsPrefixCls, "-leftLable"), labelPlacement === 'left'), (0, _defineProperty2.default)(_classNames, "".concat(stepsPrefixCls, "-rightLable"), labelPlacement === 'right'), (0, _defineProperty2.default)(_classNames, "".concat(stepsPrefixCls, "-bottomLable"), labelPlacement === 'bottom'), (0, _defineProperty2.default)(_classNames, "".concat(stepsPrefixCls, "-topLable"), labelPlacement === 'top'), _classNames));
   var onStepClick = function onStepClick(next) {
     if (canClickCurrentStep || onChange && current !== next) {
       onChange(next);

package/lib/steps/style/index.css

@@ -337,3 +337,38 @@
   text-align: left;
   margin-top: 1px;
 }
+.kd-steps-rtl {
+  direction: rtl;
+}
+.kd-steps-rtl .kd-steps-item:first-child .kd-steps-item-iconContainer::before {
+  display: none;
+}
+.kd-steps-rtl.kd-steps-horizontal:first-child {
+  padding-right: 0;
+}
+.kd-steps-rtl.kd-steps-horizontal:last-child {
+  padding-right: 0;
+  padding-left: 0;
+}
+.kd-steps-rtl.kd-steps-horizontal .kd-steps-item .kd-steps-item-container .kd-steps-item-iconContainer::after {
+  display: none;
+}
+.kd-steps-rtl.kd-steps-horizontal .kd-steps-item .kd-steps-item-container .kd-steps-item-iconContainer::before {
+  content: '';
+  width: calc(100% + 35px);
+  height: var(--kd-c-steps-line-sizing-height, 1px);
+  border-bottom: 1px dashed var(--kd-c-steps-color-wait, #999);
+  border-left: 1px dashed var(--kd-c-steps-color-wait, #999);
+  position: absolute;
+  left: 50%;
+  top: calc(50% - var(--kd-c-steps-line-sizing-height, 1px) / 2);
+  -webkit-transition: width var(--kd-c-steps-motion-duration, var(--kd-g-duration, 0.3s)) cubic-bezier(0.48, 0.04, 0.52, 0.96), background-color var(--kd-c-steps-motion-duration, var(--kd-g-duration, 0.3s)) cubic-bezier(0.48, 0.04, 0.52, 0.96);
+  transition: width var(--kd-c-steps-motion-duration, var(--kd-g-duration, 0.3s)) cubic-bezier(0.48, 0.04, 0.52, 0.96), background-color var(--kd-c-steps-motion-duration, var(--kd-g-duration, 0.3s)) cubic-bezier(0.48, 0.04, 0.52, 0.96);
+}
+.kd-steps-rtl.kd-steps-vertical .kd-steps-item-iconContainer {
+  margin-left: 4px;
+  margin-right: 0;
+}
+.kd-steps-rtl.kd-steps-vertical .kd-steps-item-content {
+  text-align: right;
+}

package/lib/steps/style/index.less

@@ -30,7 +30,6 @@
           background-color: @steps-color-white;
         }
       }
-
     }
 
     &-clickable&-wait {
@@ -60,7 +59,7 @@
 
       &:hover {
         .@{steps-prefix-cls}-item-title {
-          color: @steps-color-completed
+          color: @steps-color-completed;
         }
       }
     }
@@ -85,7 +84,8 @@
         position: absolute;
         left: 50%;
         top: calc(50% - @steps-line-sizing-height / 2);
-        transition: width @steps-duration-promptly cubic-bezier(0.48, 0.04, 0.52, 0.96), background-color @steps-duration-promptly cubic-bezier(0.48, 0.04, 0.52, 0.96)
+        transition: width @steps-duration-promptly cubic-bezier(0.48, 0.04, 0.52, 0.96),
+          background-color @steps-duration-promptly cubic-bezier(0.48, 0.04, 0.52, 0.96);
       }
 
       &:last-child {
@@ -144,7 +144,8 @@
         border-color: @steps-color-hover;
       }
 
-      .@{steps-prefix-cls}-item-title, .@{steps-prefix-cls}-item-description {
+      .@{steps-prefix-cls}-item-title,
+      .@{steps-prefix-cls}-item-description {
         color: @steps-color-hover;
       }
     }
@@ -173,7 +174,6 @@
       }
     }
 
-
     &-error {
       .@{steps-prefix-cls}-icon {
         color: @steps-color-error;
@@ -261,3 +261,57 @@
     }
   }
 }
+
+.@{steps-prefix-cls}-rtl {
+  direction: rtl;
+  .@{steps-prefix-cls}-item:first-child {
+    .@{steps-prefix-cls}-item-iconContainer {
+      &::before {
+        display: none;
+      }
+    }
+  }
+  &.@{steps-prefix-cls}-horizontal {
+    &:first-child {
+      padding-right: 0;
+    }
+
+    &:last-child {
+      padding-right: 0;
+      padding-left: 0;
+    }
+    .@{steps-prefix-cls}-item {
+      .@{steps-prefix-cls}-item-container {
+        .@{steps-prefix-cls}-item-iconContainer {
+          &::after {
+            display: none;
+          }
+          &::before {
+            content: '';
+            width: ~'calc(100% + 35px)';
+            height: @steps-line-sizing-height;
+            border-bottom: 1px dashed @steps-color-wait;
+            border-left: 1px dashed @steps-color-wait;
+            position: absolute;
+            left: 50%;
+            top: calc(50% - @steps-line-sizing-height / 2);
+            transition: width @steps-duration-promptly cubic-bezier(0.48, 0.04, 0.52, 0.96),
+              background-color @steps-duration-promptly cubic-bezier(0.48, 0.04, 0.52, 0.96);
+            
+          }
+        }
+      }
+    }
+  }
+  &.@{steps-prefix-cls}-vertical {
+    .@{steps-prefix-cls}-item {
+      &-iconContainer {
+        margin-left: 4px;
+        margin-right: 0;
+      }
+      &-content {
+        text-align: right;
+      }
+    }
+  }
+}

package/lib/switch/style/index.css

@@ -217,3 +217,12 @@
 .kd-switch-size-large .kd-switch-inner {
   margin: var(--kd-c-switch-inner-spacing-margin-large, 0 5px 0 21px);
 }
+.kd-switch-rtl {
+  direction: rtl;
+  -webkit-transform: rotateY(180deg);
+          transform: rotateY(180deg);
+}
+.kd-switch-rtl .kd-switch-inner {
+  -webkit-transform: rotateY(180deg);
+          transform: rotateY(180deg);
+}

package/lib/switch/style/index.less

@@ -4,7 +4,6 @@
 @switch-prefix-cls: ~'@{kd-prefix}-switch';
 @icon-prefix-cls: ~'@{kd-prefix}icon';
 
-
 .@{switch-prefix-cls} {
   .switch;
 
@@ -25,7 +24,7 @@
 
     .@{icon-prefix-cls}-loadding-circle {
       animation: loadingcircle 1s infinite;
-      animation-timing-function: cubic-bezier(0.42, 0.00, 0.58, 1.00);
+      animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
       font-size: @switch-small-font-size;
       line-height: 1;
       vertical-align: baseline;
@@ -80,3 +79,11 @@
     }
   }
 }
+
+.@{switch-prefix-cls}-rtl {
+  direction: rtl;
+  transform: rotateY(180deg);
+  .@{switch-prefix-cls}-inner {
+    transform: rotateY(180deg);
+  }
+}

package/lib/switch/switch.js

@@ -37,7 +37,8 @@ var Switch = function Switch(props) {
   var _useContext = (0, _react.useContext)(_ConfigContext.default),
     getPrefixCls = _useContext.getPrefixCls,
     prefixCls = _useContext.prefixCls,
-    userDefaultProps = _useContext.compDefaultProps;
+    userDefaultProps = _useContext.compDefaultProps,
+    direction = _useContext.direction;
   var switchProps = (0, _utils.getCompProps)('Switch', userDefaultProps, props);
   var size = switchProps.size,
     className = switchProps.className,
@@ -59,6 +60,7 @@ var Switch = function Switch(props) {
     newChecked = _useMergedState2[0],
     setChecked = _useMergedState2[1];
   var switchPrefixCls = getPrefixCls(prefixCls, 'switch', customPrefixcls);
+  var rtlCls = direction === 'rtl' ? "".concat(switchPrefixCls, "-rtl") : null;
   var handleClick = function handleClick(e) {
     var newV = triggerChange(!newChecked, e);
     onClick && onClick(newV, e);
@@ -73,7 +75,7 @@ var Switch = function Switch(props) {
     }
     return afterChangedChecked;
   }
-  var switchClasses = (0, _classnames.default)(switchPrefixCls, className, (_classNames = {}, (0, _defineProperty2.default)(_classNames, (0, _concat.default)(_context = "".concat(switchPrefixCls, "-size-")).call(_context, size), size), (0, _defineProperty2.default)(_classNames, "".concat(switchPrefixCls, "-disabled"), disabled || loading), (0, _defineProperty2.default)(_classNames, "".concat(switchPrefixCls, "-loading"), loading), (0, _defineProperty2.default)(_classNames, "".concat(switchPrefixCls, "-checked"), newChecked), _classNames));
+  var switchClasses = (0, _classnames.default)(switchPrefixCls, rtlCls, className, (_classNames = {}, (0, _defineProperty2.default)(_classNames, (0, _concat.default)(_context = "".concat(switchPrefixCls, "-size-")).call(_context, size), size), (0, _defineProperty2.default)(_classNames, "".concat(switchPrefixCls, "-disabled"), disabled || loading), (0, _defineProperty2.default)(_classNames, "".concat(switchPrefixCls, "-loading"), loading), (0, _defineProperty2.default)(_classNames, "".concat(switchPrefixCls, "-checked"), newChecked), _classNames));
   var loadingIcon = loading ? _react.default.createElement("span", {
     className: "".concat(switchPrefixCls, "-loading-icon")
   }, _react.default.createElement(_icon.default, {