@kdcloudjs/kdesign 1.8.29 → 1.8.31

package/es/anchor/anchor.js

@@ -105,7 +105,8 @@ var InternalAnchor = function InternalAnchor(props, ref) {
   var _useContext = useContext(ConfigContext),
     getPrefixCls = _useContext.getPrefixCls,
     prefixCls = _useContext.prefixCls,
-    userDefaultProps = _useContext.compDefaultProps;
+    userDefaultProps = _useContext.compDefaultProps,
+    direction = _useContext.direction;
   var anchorProps = getCompProps('Anchor', userDefaultProps, props);
   var customPrefixcls = anchorProps.prefixCls,
     className = anchorProps.className,
@@ -128,6 +129,7 @@ var InternalAnchor = function InternalAnchor(props, ref) {
     dropdownStyle = anchorProps.dropdownStyle,
     onVisibleChange = anchorProps.onVisibleChange;
   var anchorPrefixCls = getPrefixCls(prefixCls, 'anchor', customPrefixcls);
+  var rtlCls = direction === 'rtl' ? "".concat(anchorPrefixCls, "-rtl") : null;
   devWarning(AnchorTypes.indexOf(type) === -1, 'anchor', "cannot found anchor type '".concat(type, "'"));
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
@@ -179,7 +181,7 @@ var InternalAnchor = function InternalAnchor(props, ref) {
   var anchorRef = ref || normalRef;
   var linksWidthRef = React.useRef([]);
   var animating = React.useRef(false);
-  var wrapperClass = classNames(className, _defineProperty({}, "".concat(anchorPrefixCls, "-wrapper"), true));
+  var wrapperClass = classNames(className, rtlCls, _defineProperty({}, "".concat(anchorPrefixCls, "-wrapper"), true));
   var anchorMenuClass = classNames(_defineProperty({}, "".concat(anchorPrefixCls, "-menu"), true));
   var anchorAdvancedClass = classNames(_defineProperty({}, "".concat(anchorPrefixCls, "-advanced"), true));
   var inkClass = classNames("".concat(anchorPrefixCls, "-line-slider"), {
@@ -418,7 +420,7 @@ var InternalAnchor = function InternalAnchor(props, ref) {
       className: leftClasses,
       onClick: handleLeft
     }, React.createElement(Icon, {
-      type: "arrow-left"
+      type: "".concat(direction === 'rtl' ? 'arrow-right' : 'arrow-left')
     }));
   };
   var findCurrentLinkPosition = function findCurrentLinkPosition(linksWidth, boxWidth, position) {
@@ -448,12 +450,12 @@ var InternalAnchor = function InternalAnchor(props, ref) {
       className: rightClasses,
       onClick: handleRight
     }, React.createElement(Icon, {
-      type: "arrow-right"
+      type: "".concat(direction === 'rtl' ? 'arrow-left' : 'arrow-right')
     }));
   };
   var anchorMenuContent = React.createElement("div", {
     ref: anchorRef,
-    className: "".concat(anchorPrefixCls, "-menu-wrapper"),
+    className: classNames("".concat(anchorPrefixCls, "-menu-wrapper"), rtlCls),
     style: _extends({
       width: '100%'
     }, style)

package/es/anchor/style/index.css

@@ -297,3 +297,17 @@
   -webkit-transition: all calc(var(--kd-c-anchor-duration-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
   transition: all calc(var(--kd-c-anchor-duration-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
 }
+.kd-anchor-rtl {
+  direction: rtl;
+}
+.kd-anchor-rtl .kd-anchor {
+  padding-right: var(--kd-c-anchor-spacing-horizontal, 7px);
+  padding-left: 0;
+}
+.kd-anchor-rtl .kd-anchor-line {
+  right: var(--kd-c-anchor-spacing-horizontal, 7px);
+  left: auto;
+}
+.kd-anchor-rtl .kd-anchor-link {
+  text-align: right;
+}

package/es/anchor/style/index.less

@@ -198,3 +198,18 @@
     transition: all calc(@anchor-transition-duration - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
   }
 }
+
+.@{anchor-prefix-cls}-rtl {
+  direction: rtl;
+  .@{anchor-prefix-cls} {
+    padding-right: @anchor-link-left;
+    padding-left: 0;
+    &-line {
+      right: @anchor-link-left;
+      left: auto;
+    }
+    &-link {
+      text-align: right;
+    }
+  }
+}

package/es/button/button.js

@@ -27,7 +27,8 @@ var InternalButton = function InternalButton(props, ref) {
   var _useContext = useContext(ConfigContext),
     getPrefixCls = _useContext.getPrefixCls,
     prefixCls = _useContext.prefixCls,
-    userDefaultProps = _useContext.compDefaultProps;
+    userDefaultProps = _useContext.compDefaultProps,
+    direction = _useContext.direction;
   var buttonProps = getCompProps('Button', userDefaultProps, props);
   var type = buttonProps.type,
     iconPlace = buttonProps.iconPlace,
@@ -48,6 +49,7 @@ var InternalButton = function InternalButton(props, ref) {
     others = __rest(buttonProps, ["type", "iconPlace", "children", "className", "prefixCls", "size", "loading", "shape", "bordered", "onClick", "icon", "ghost", "block", "disabled", "htmlType"]);
   devWarning(ButtonTypes.indexOf(type) === -1, 'button', "cannot found button type '".concat(type, "'"));
   var btnPrefixCls = getPrefixCls(prefixCls, 'btn', customPrefixcls);
+  var rtlCls = direction === 'rtl' ? "".concat(btnPrefixCls, "-rtl") : null;
   var handleClick = function handleClick(e) {
     if (loading || disabled) {
       return;
@@ -77,7 +79,7 @@ var InternalButton = function InternalButton(props, ref) {
     return child;
   };
   var isTextBtn = type === 'text';
-  var btnClasses = classNames(btnPrefixCls, className, (_classNames = {}, _defineProperty(_classNames, _concatInstanceProperty(_context = "".concat(btnPrefixCls, "-")).call(_context, type), type), _defineProperty(_classNames, _concatInstanceProperty(_context2 = "".concat(btnPrefixCls, "-size-")).call(_context2, size), size), _defineProperty(_classNames, _concatInstanceProperty(_context3 = "".concat(btnPrefixCls, "-shape-")).call(_context3, shape), shape && !isTextBtn), _defineProperty(_classNames, "".concat(btnPrefixCls, "-no-border"), !bordered), _defineProperty(_classNames, "".concat(btnPrefixCls, "-background-ghost"), ghost && !disabled), _defineProperty(_classNames, "".concat(btnPrefixCls, "-loading"), loading && !isTextBtn), _defineProperty(_classNames, "".concat(btnPrefixCls, "-block"), block && !shape), _defineProperty(_classNames, "".concat(btnPrefixCls, "-icon-only"), !children && children !== 0 && icon), _classNames));
+  var btnClasses = classNames(btnPrefixCls, rtlCls, className, (_classNames = {}, _defineProperty(_classNames, _concatInstanceProperty(_context = "".concat(btnPrefixCls, "-")).call(_context, type), type), _defineProperty(_classNames, _concatInstanceProperty(_context2 = "".concat(btnPrefixCls, "-size-")).call(_context2, size), size), _defineProperty(_classNames, _concatInstanceProperty(_context3 = "".concat(btnPrefixCls, "-shape-")).call(_context3, shape), shape && !isTextBtn), _defineProperty(_classNames, "".concat(btnPrefixCls, "-no-border"), !bordered), _defineProperty(_classNames, "".concat(btnPrefixCls, "-background-ghost"), ghost && !disabled), _defineProperty(_classNames, "".concat(btnPrefixCls, "-loading"), loading && !isTextBtn), _defineProperty(_classNames, "".concat(btnPrefixCls, "-block"), block && !shape), _defineProperty(_classNames, "".concat(btnPrefixCls, "-icon-only"), !children && children !== 0 && icon), _classNames));
   var iconWrapperClassName = _concatInstanceProperty(_context4 = "".concat(btnPrefixCls, "-iconWrapper-")).call(_context4, iconPlace === 'left' ? 'left' : 'right');
   var iconNode = icon && !loading ? React.createElement("span", {
     className: iconWrapperClassName

package/es/button/group.js

@@ -17,7 +17,8 @@ var InternalButtonGroup = function InternalButtonGroup(props, ref) {
   var _useContext = useContext(ConfigContext),
     getPrefixCls = _useContext.getPrefixCls,
     prefixCls = _useContext.prefixCls,
-    userDefaultProps = _useContext.compDefaultProps;
+    userDefaultProps = _useContext.compDefaultProps,
+    direction = _useContext.direction;
   var buttonGoupProps = getCompProps('ButtonGroup', userDefaultProps, props);
   var style = buttonGoupProps.style,
     className = buttonGoupProps.className,
@@ -41,6 +42,7 @@ var InternalButtonGroup = function InternalButtonGroup(props, ref) {
   var triggerRef = React.useRef(null);
   var isBsicType = type === 'basic';
   var btnGroupPrefixCls = getPrefixCls(prefixCls, 'btn-group', customPrefixcls);
+  var rtlCls = direction === 'rtl' ? "".concat(btnGroupPrefixCls, "-rtl") : null;
   var btnGroupClasses = classNames("".concat(btnGroupPrefixCls), className, _defineProperty({}, _concatInstanceProperty(_context = "".concat(btnGroupPrefixCls, "-")).call(_context, type), type));
   var renderTriggerButton = useCallback(function () {
     var _toArray = toArray(icon),
@@ -108,11 +110,11 @@ var InternalButtonGroup = function InternalButtonGroup(props, ref) {
     onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(visible);
   };
   var popperProps = _extends(_extends({
-    placement: 'bottomLeft',
+    placement: direction === 'rtl' ? 'bottomRight' : 'bottomLeft',
     trigger: 'click',
     gap: 0
   }, buttonGoupProps), {
-    prefixCls: btnGroupPrefixCls,
+    prefixCls: classNames(btnGroupPrefixCls, rtlCls),
     defaultVisible: optionShow,
     visible: optionShow,
     onVisibleChange: handleVisibleChange,

package/es/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/es/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/es/checkbox/checkbox.js

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

package/es/checkbox/group.js

@@ -27,7 +27,8 @@ var CheckboxGroup = React.forwardRef(function (props, ref) {
   var _useContext = useContext(ConfigContext),
     getPrefixCls = _useContext.getPrefixCls,
     prefixCls = _useContext.prefixCls,
-    userDefaultProps = _useContext.compDefaultProps;
+    userDefaultProps = _useContext.compDefaultProps,
+    direction = _useContext.direction;
   var CheckboxProps = getCompProps('CheckboxGroup', userDefaultProps, props);
   var checkboxType = CheckboxProps.checkboxType,
     className = CheckboxProps.className,
@@ -54,6 +55,7 @@ var CheckboxGroup = React.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;
   devWarning(isArrayValueRepeat(groupValue), 'checkboxGroup', "variable value's value should be unique ");
   var getReduceItem = function getReduceItem(targetValue) {
     var _context;
@@ -104,7 +106,7 @@ var CheckboxGroup = React.forwardRef(function (props, ref) {
     });
   };
   return React.createElement("ul", _extends({
-    className: classnames(checkboxGroupPrefixCls, className),
+    className: classnames(checkboxGroupPrefixCls, rtlCls, className),
     style: style,
     ref: ref
   }, rest), React.createElement(GroupContext.Provider, {

package/es/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/es/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/es/city-picker/city-picker.js

@@ -30,7 +30,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 = getCompProps('CityPicker', userDefaultProps, props);
   var cityPickerLangMsg = locale.getCompLangMsg({
     componentName: 'CityPicker'
@@ -121,7 +122,8 @@ var InternalSelect = function InternalSelect(props, ref) {
     return type === 'domestic';
   };
   var selectPrefixCls = getPrefixCls(prefixCls, 'city-picker', customPrefixcls);
-  var cityPickerCls = classNames(selectPrefixCls, className, _defineProperty({}, "".concat(selectPrefixCls, "-visible"), optionShow));
+  var rtlCls = direction === 'rtl' ? "".concat(selectPrefixCls, "-rtl") : null;
+  var cityPickerCls = classNames(selectPrefixCls, rtlCls, className, _defineProperty({}, "".concat(selectPrefixCls, "-visible"), optionShow));
   var selectionCls = classNames(_defineProperty({}, "".concat(selectPrefixCls, "-selector"), true));
   var commCls = classNames((_classNames3 = {}, _defineProperty(_classNames3, "".concat(selectPrefixCls, "-bordered"), borderType === 'bordered'), _defineProperty(_classNames3, "".concat(selectPrefixCls, "-underline"), borderType === 'underline'), _defineProperty(_classNames3, "".concat(selectPrefixCls, "-borderless"), borderType === 'none'), _defineProperty(_classNames3, _concatInstanceProperty(_context = "".concat(selectPrefixCls, "-size-")).call(_context, size), size), _defineProperty(_classNames3, "".concat(selectPrefixCls, "-wrapper"), true), _defineProperty(_classNames3, "".concat(selectPrefixCls, "-show-search"), focusd), _classNames3));
   useEffect(function () {
@@ -291,22 +293,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 _concatInstanceProperty(_context3 = "".concat(flag && _curVal ? symbol : '')).call(_context3, _curVal);
+        if (direction === 'rtl') {
+          var _context3;
+          return _concatInstanceProperty(_context3 = "".concat(_curVal)).call(_context3, flag && _curVal ? symbol : '');
+        }
+        return _concatInstanceProperty(_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) : _filterInstanceProperty(_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 _concatInstanceProperty(_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) : _filterInstanceProperty(_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 _concatInstanceProperty(_context6 = "".concat(_curVal2)).call(_context6, flag && _curVal2 ? symbol : '');
+        }
+        return _concatInstanceProperty(_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) || '' : _filterInstanceProperty(_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 _concatInstanceProperty(_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) || '' : _filterInstanceProperty(_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 _concatInstanceProperty(_context9 = "".concat(curVal)).call(_context9, flag && curVal ? symbol : '');
+      }
+      return _concatInstanceProperty(_context10 = "".concat(flag && curVal ? symbol : '')).call(_context10, curVal);
     } else {
-      var _context8, _context9;
-      return _concatInstanceProperty(_context8 = "".concat(flag && ((data === null || data === void 0 ? void 0 : data.province) || (data === null || data === void 0 ? void 0 : data.country)) ? symbol : '')).call(_context8, _filterInstanceProperty(_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 _concatInstanceProperty(_context11 = "".concat(_filterInstanceProperty(_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 _concatInstanceProperty(_context13 = "".concat(flag && ((data === null || data === void 0 ? void 0 : data.province) || (data === null || data === void 0 ? void 0 : data.country)) ? symbol : '')).call(_context13, _filterInstanceProperty(_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() {
@@ -467,8 +485,8 @@ var InternalSelect = function InternalSelect(props, ref) {
     }
   };
   var popperProps = _extends(_extends({}, selectProps), {
-    prefixCls: "".concat(selectPrefixCls, "-dropdown"),
-    placement: 'bottomLeft',
+    prefixCls: classNames("".concat(selectPrefixCls, "-dropdown"), rtlCls),
+    placement: direction === 'rtl' ? 'bottomRight' : 'bottomLeft',
     popperStyle: catchStyle(),
     defaultVisible: optionShow,
     visible: optionShow,

package/es/city-picker/option.js

@@ -21,7 +21,8 @@ var InternalOption = function InternalOption(props, ref) {
     name = city.name;
   var _useContext = useContext(ConfigContext),
     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 = classNames(selectOptionPrefixCls, className, (_classNames = {}, _defineProperty(_classNames, "".concat(selectOptionPrefixCls, "-selected"), isSelected), _defineProperty(_classNames, "".concat(selectOptionPrefixCls, "-disabled"), disabled), _defineProperty(_classNames, "".concat(selectOptionPrefixCls, "-active"), activeIndex === index), _classNames));
@@ -39,7 +40,11 @@ var InternalOption = function InternalOption(props, ref) {
     title: name,
     onClick: handleClick,
     onMouseEnter: handleOnMouseEnter
-  }, typeof itemRender === 'function' ? itemRender(city) : React.createElement(React.Fragment, null, React.createElement("span", {
+  }, typeof itemRender === 'function' ? itemRender(city) : direction === 'rtl' ? React.createElement(React.Fragment, null, React.createElement("span", {
+    className: "".concat(selectOptionPrefixCls, "-info")
+  }, renderCityInfo === null || renderCityInfo === void 0 ? void 0 : renderCityInfo(city, true)), React.createElement("span", {
+    className: "".concat(selectOptionPrefixCls, "-content")
+  }, children)) : React.createElement(React.Fragment, null, React.createElement("span", {
     className: "".concat(selectOptionPrefixCls, "-content")
   }, children), React.createElement("span", {
     className: "".concat(selectOptionPrefixCls, "-info")

package/es/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;
+}