@kdcloudjs/kdesign 1.8.29 → 1.8.31

package/es/tree/treeNode.js

@@ -23,7 +23,8 @@ var TreeNode = React.forwardRef(function (props) {
   var _useContext = useContext(ConfigContext),
     getPrefixCls = _useContext.getPrefixCls,
     prefixCls = _useContext.prefixCls,
-    userDefaultProps = _useContext.compDefaultProps;
+    userDefaultProps = _useContext.compDefaultProps,
+    direction = _useContext.direction;
   var TreeNodeProps = getCompProps('TreeNode', userDefaultProps, props);
   var nodeKey = TreeNodeProps.nodeKey,
     customPrefixcls = TreeNodeProps.prefixCls,
@@ -176,7 +177,7 @@ var TreeNode = React.forwardRef(function (props) {
         className: classNames("".concat(treeNodePrefixCls, "-icon"), (_classNames3 = {}, _defineProperty(_classNames3, "".concat(treeNodePrefixCls, "-animation-expand"), expandState), _defineProperty(_classNames3, "".concat(treeNodePrefixCls, "-animation-collapse"), !expandState), _defineProperty(_classNames3, "".concat(treeNodePrefixCls, "-icon-hover"), !expandOnClickNode), _classNames3)),
         onClick: expandOnClickNode ? onlyExpandOnClickIcon ? handleExpandIconClick : undefined : handleExpandIconClick
       }, renderIcon(switcherIcon || React.createElement(Icon, {
-        type: "arrow-right-solid"
+        type: "arrow-".concat(direction === 'rtl' ? 'left' : 'right', "-solid")
       })));
     } else {
       return React.createElement("span", {

package/es/upload/style/index.css

@@ -164,7 +164,7 @@
   opacity: 0;
   overflow: hidden;
 }
-.kd-upload-input input[type="file"] {
+.kd-upload-input input[type='file'] {
   position: absolute;
   top: -20%;
   left: 0;
@@ -386,3 +386,26 @@
   color: var(--kd-c-upload-panel-button-color, #0E5FD8);
   font-size: var(--kd-c-upload-picture-action-font-size, var(--kd-g-font-size-small, 12px));
 }
+.kd-upload-rtl {
+  direction: rtl;
+}
+.kd-upload-rtl.kd-upload .kd-upload-text-list-item-name {
+  margin: 0 var(--kd-c-upload-text-list-item-name-padding-left, 4px) 0 var(--kd-c-upload-text-list-item-name-padding-right, 8px);
+}
+.kd-upload-rtl.kd-upload .kd-upload-text-list-item-action {
+  left: 0;
+  right: auto;
+  -webkit-transform: translateX(-5px);
+          transform: translateX(-5px);
+}
+.kd-upload-rtl.kd-upload .kd-upload-text-list-item-action a:not(:first-child) {
+  margin-right: 20px;
+  margin-left: 0;
+}
+.kd-upload-rtl.kd-upload .kd-upload-picture-list-item {
+  margin: 0 0 28px 28px;
+}
+.kd-upload-rtl.kd-upload .kd-upload-picture-list-item-error a:not(:first-child) {
+  margin-right: 10px;
+  margin-left: auto;
+}

package/es/upload/style/index.less

@@ -46,7 +46,7 @@
     opacity: 0;
     overflow: hidden;
 
-    input[type="file"] {
+    input[type='file'] {
       position: absolute;
       top: -20%;
       left: 0;
@@ -94,7 +94,8 @@
         font-size: @upload-font-size;
       }
 
-      &-name,&-icon {
+      &-name,
+      &-icon {
         cursor: pointer;
       }
 
@@ -239,3 +240,40 @@
     }
   }
 }
+
+.@{upload-prefix-cls}-rtl {
+  direction: rtl;
+  &.@{upload-prefix-cls} {
+    .@{upload-prefix-text-list-cls} {
+      &-item {
+        &-name {
+          margin: 0 @upload-text-list-item-name-padding-left 0 @upload-text-list-item-name-padding-right;
+        }
+        &-action {
+          left: 0;
+          right: auto;
+          transform: translateX(-5px);
+          a {
+            &:not(:first-child) {
+              margin-right: 20px;
+              margin-left: 0;
+            }
+          }
+        }
+      }
+    }
+    .@{upload-prefix-picture-list-cls} {
+      &-item {
+        margin: 0 0 28px 28px;
+        &-error {
+          a {
+            &:not(:first-child) {
+              margin-right: 10px;
+              margin-left: auto;
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/es/upload/upload.js

@@ -77,7 +77,8 @@ var InternalUpload = function InternalUpload(props, ref) {
   var _useContext = useContext(ConfigContext),
     getPrefixCls = _useContext.getPrefixCls,
     pkgPrefixCls = _useContext.prefixCls,
-    userDefaultProps = _useContext.compDefaultProps;
+    userDefaultProps = _useContext.compDefaultProps,
+    direction = _useContext.direction;
   var inputRef = useRef(null);
   var allProps = getCompProps('Upload', userDefaultProps, props);
   var type = allProps.type,
@@ -313,6 +314,7 @@ var InternalUpload = function InternalUpload(props, ref) {
     }
   };
   var prefixCls = getPrefixCls(pkgPrefixCls, 'upload', customPrefixcls);
+  var rtlCls = direction === 'rtl' ? "".concat(prefixCls, "-rtl") : null;
   var inputFileProps = {
     accept: accept,
     onClick: onClick,
@@ -386,7 +388,7 @@ var InternalUpload = function InternalUpload(props, ref) {
     };
   });
   return React.createElement("div", {
-    className: classNames(prefixCls, {
+    className: classNames(prefixCls, rtlCls, {
       disabled: disabled
     }, className),
     style: style

package/lib/anchor/anchor.js

@@ -118,7 +118,8 @@ var InternalAnchor = function InternalAnchor(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 anchorProps = (0, _utils.getCompProps)('Anchor', userDefaultProps, props);
   var customPrefixcls = anchorProps.prefixCls,
     className = anchorProps.className,
@@ -141,6 +142,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;
   (0, _devwarning.default)(AnchorTypes.indexOf(type) === -1, 'anchor', "cannot found anchor type '".concat(type, "'"));
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -192,7 +194,7 @@ var InternalAnchor = function InternalAnchor(props, ref) {
   var anchorRef = ref || normalRef;
   var linksWidthRef = _react.default.useRef([]);
   var animating = _react.default.useRef(false);
-  var wrapperClass = (0, _classnames.default)(className, (0, _defineProperty2.default)({}, "".concat(anchorPrefixCls, "-wrapper"), true));
+  var wrapperClass = (0, _classnames.default)(className, rtlCls, (0, _defineProperty2.default)({}, "".concat(anchorPrefixCls, "-wrapper"), true));
   var anchorMenuClass = (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(anchorPrefixCls, "-menu"), true));
   var anchorAdvancedClass = (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(anchorPrefixCls, "-advanced"), true));
   var inkClass = (0, _classnames.default)("".concat(anchorPrefixCls, "-line-slider"), {
@@ -431,7 +433,7 @@ var InternalAnchor = function InternalAnchor(props, ref) {
       className: leftClasses,
       onClick: handleLeft
     }, _react.default.createElement(_index.Icon, {
-      type: "arrow-left"
+      type: "".concat(direction === 'rtl' ? 'arrow-right' : 'arrow-left')
     }));
   };
   var findCurrentLinkPosition = function findCurrentLinkPosition(linksWidth, boxWidth, position) {
@@ -461,12 +463,12 @@ var InternalAnchor = function InternalAnchor(props, ref) {
       className: rightClasses,
       onClick: handleRight
     }, _react.default.createElement(_index.Icon, {
-      type: "arrow-right"
+      type: "".concat(direction === 'rtl' ? 'arrow-left' : 'arrow-right')
     }));
   };
   var anchorMenuContent = _react.default.createElement("div", {
     ref: anchorRef,
-    className: "".concat(anchorPrefixCls, "-menu-wrapper"),
+    className: (0, _classnames.default)("".concat(anchorPrefixCls, "-menu-wrapper"), rtlCls),
     style: (0, _extends2.default)({
       width: '100%'
     }, style)

package/lib/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/lib/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/lib/button/button.js

@@ -44,7 +44,8 @@ var InternalButton = function InternalButton(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 buttonProps = (0, _utils.getCompProps)('Button', userDefaultProps, props);
   var type = buttonProps.type,
     iconPlace = buttonProps.iconPlace,
@@ -65,6 +66,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"]);
   (0, _devwarning.default)(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;
@@ -94,7 +96,7 @@ var InternalButton = function InternalButton(props, ref) {
     return child;
   };
   var isTextBtn = type === 'text';
-  var btnClasses = (0, _classnames.default)(btnPrefixCls, className, (_classNames = {}, (0, _defineProperty2.default)(_classNames, (0, _concat.default)(_context = "".concat(btnPrefixCls, "-")).call(_context, type), type), (0, _defineProperty2.default)(_classNames, (0, _concat.default)(_context2 = "".concat(btnPrefixCls, "-size-")).call(_context2, size), size), (0, _defineProperty2.default)(_classNames, (0, _concat.default)(_context3 = "".concat(btnPrefixCls, "-shape-")).call(_context3, shape), shape && !isTextBtn), (0, _defineProperty2.default)(_classNames, "".concat(btnPrefixCls, "-no-border"), !bordered), (0, _defineProperty2.default)(_classNames, "".concat(btnPrefixCls, "-background-ghost"), ghost && !disabled), (0, _defineProperty2.default)(_classNames, "".concat(btnPrefixCls, "-loading"), loading && !isTextBtn), (0, _defineProperty2.default)(_classNames, "".concat(btnPrefixCls, "-block"), block && !shape), (0, _defineProperty2.default)(_classNames, "".concat(btnPrefixCls, "-icon-only"), !children && children !== 0 && icon), _classNames));
+  var btnClasses = (0, _classnames.default)(btnPrefixCls, rtlCls, className, (_classNames = {}, (0, _defineProperty2.default)(_classNames, (0, _concat.default)(_context = "".concat(btnPrefixCls, "-")).call(_context, type), type), (0, _defineProperty2.default)(_classNames, (0, _concat.default)(_context2 = "".concat(btnPrefixCls, "-size-")).call(_context2, size), size), (0, _defineProperty2.default)(_classNames, (0, _concat.default)(_context3 = "".concat(btnPrefixCls, "-shape-")).call(_context3, shape), shape && !isTextBtn), (0, _defineProperty2.default)(_classNames, "".concat(btnPrefixCls, "-no-border"), !bordered), (0, _defineProperty2.default)(_classNames, "".concat(btnPrefixCls, "-background-ghost"), ghost && !disabled), (0, _defineProperty2.default)(_classNames, "".concat(btnPrefixCls, "-loading"), loading && !isTextBtn), (0, _defineProperty2.default)(_classNames, "".concat(btnPrefixCls, "-block"), block && !shape), (0, _defineProperty2.default)(_classNames, "".concat(btnPrefixCls, "-icon-only"), !children && children !== 0 && icon), _classNames));
   var iconWrapperClassName = (0, _concat.default)(_context4 = "".concat(btnPrefixCls, "-iconWrapper-")).call(_context4, iconPlace === 'left' ? 'left' : 'right');
   var iconNode = icon && !loading ? _react.default.createElement("span", {
     className: iconWrapperClassName

package/lib/button/group.js

@@ -30,7 +30,8 @@ var InternalButtonGroup = function InternalButtonGroup(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 buttonGoupProps = (0, _utils.getCompProps)('ButtonGroup', userDefaultProps, props);
   var style = buttonGoupProps.style,
     className = buttonGoupProps.className,
@@ -54,6 +55,7 @@ var InternalButtonGroup = function InternalButtonGroup(props, ref) {
   var triggerRef = _react.default.useRef(null);
   var isBsicType = type === 'basic';
   var btnGroupPrefixCls = getPrefixCls(prefixCls, 'btn-group', customPrefixcls);
+  var rtlCls = direction === 'rtl' ? "".concat(btnGroupPrefixCls, "-rtl") : null;
   var btnGroupClasses = (0, _classnames.default)("".concat(btnGroupPrefixCls), className, (0, _defineProperty2.default)({}, (0, _concat.default)(_context = "".concat(btnGroupPrefixCls, "-")).call(_context, type), type));
   var renderTriggerButton = (0, _react.useCallback)(function () {
     var _toArray = (0, _reactChildren.toArray)(icon),
@@ -121,11 +123,11 @@ var InternalButtonGroup = function InternalButtonGroup(props, ref) {
     onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(visible);
   };
   var popperProps = (0, _extends2.default)((0, _extends2.default)({
-    placement: 'bottomLeft',
+    placement: direction === 'rtl' ? 'bottomRight' : 'bottomLeft',
     trigger: 'click',
     gap: 0
   }, buttonGoupProps), {
-    prefixCls: btnGroupPrefixCls,
+    prefixCls: (0, _classnames.default)(btnGroupPrefixCls, rtlCls),
     defaultVisible: optionShow,
     visible: optionShow,
     onVisibleChange: handleVisibleChange,

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;
+    }
+  }
+}