@kdcloudjs/kdesign 1.8.30 → 1.8.32

package/es/steps/Steps.js

@@ -24,7 +24,8 @@ var Steps = function Steps(props) {
   var _useContext = useContext(ConfigContext),
     getPrefixCls = _useContext.getPrefixCls,
     prefixCls = _useContext.prefixCls,
-    userDefaultProps = _useContext.compDefaultProps;
+    userDefaultProps = _useContext.compDefaultProps,
+    rtlDirection = _useContext.direction;
   var stepsProps = getCompProps('Steps', userDefaultProps, props);
   var direction = stepsProps.direction,
     initial = stepsProps.initial,
@@ -46,7 +47,8 @@ var Steps = function Steps(props) {
   devWarning(Statuses.indexOf(status) === -1, 'steps', "cannot found steps status '".concat(status, "'"));
   devWarning(LabelPlacements.indexOf(labelPlacement) === -1, 'steps', "cannot found steps labelPlacement '".concat(labelPlacement, "'"));
   var stepsPrefixCls = getPrefixCls(prefixCls, 'steps', customPrefixcls);
-  var stepsClassName = classNames(stepsPrefixCls, _concatInstanceProperty(_context = "".concat(stepsPrefixCls, "-")).call(_context, direction), className, (_classNames = {}, _defineProperty(_classNames, "".concat(stepsPrefixCls, "-leftLable"), labelPlacement === 'left'), _defineProperty(_classNames, "".concat(stepsPrefixCls, "-rightLable"), labelPlacement === 'right'), _defineProperty(_classNames, "".concat(stepsPrefixCls, "-bottomLable"), labelPlacement === 'bottom'), _defineProperty(_classNames, "".concat(stepsPrefixCls, "-topLable"), labelPlacement === 'top'), _classNames));
+  var rtlCls = rtlDirection === 'rtl' ? "".concat(stepsPrefixCls, "-rtl") : null;
+  var stepsClassName = classNames(stepsPrefixCls, rtlCls, _concatInstanceProperty(_context = "".concat(stepsPrefixCls, "-")).call(_context, direction), className, (_classNames = {}, _defineProperty(_classNames, "".concat(stepsPrefixCls, "-leftLable"), labelPlacement === 'left'), _defineProperty(_classNames, "".concat(stepsPrefixCls, "-rightLable"), labelPlacement === 'right'), _defineProperty(_classNames, "".concat(stepsPrefixCls, "-bottomLable"), labelPlacement === 'bottom'), _defineProperty(_classNames, "".concat(stepsPrefixCls, "-topLable"), labelPlacement === 'top'), _classNames));
   var onStepClick = function onStepClick(next) {
     if (canClickCurrentStep || onChange && current !== next) {
       onChange(next);

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

@@ -24,7 +24,8 @@ var Switch = function Switch(props) {
   var _useContext = useContext(ConfigContext),
     getPrefixCls = _useContext.getPrefixCls,
     prefixCls = _useContext.prefixCls,
-    userDefaultProps = _useContext.compDefaultProps;
+    userDefaultProps = _useContext.compDefaultProps,
+    direction = _useContext.direction;
   var switchProps = getCompProps('Switch', userDefaultProps, props);
   var size = switchProps.size,
     className = switchProps.className,
@@ -46,6 +47,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);
@@ -60,7 +62,7 @@ var Switch = function Switch(props) {
     }
     return afterChangedChecked;
   }
-  var switchClasses = classNames(switchPrefixCls, className, (_classNames = {}, _defineProperty(_classNames, _concatInstanceProperty(_context = "".concat(switchPrefixCls, "-size-")).call(_context, size), size), _defineProperty(_classNames, "".concat(switchPrefixCls, "-disabled"), disabled || loading), _defineProperty(_classNames, "".concat(switchPrefixCls, "-loading"), loading), _defineProperty(_classNames, "".concat(switchPrefixCls, "-checked"), newChecked), _classNames));
+  var switchClasses = classNames(switchPrefixCls, rtlCls, className, (_classNames = {}, _defineProperty(_classNames, _concatInstanceProperty(_context = "".concat(switchPrefixCls, "-size-")).call(_context, size), size), _defineProperty(_classNames, "".concat(switchPrefixCls, "-disabled"), disabled || loading), _defineProperty(_classNames, "".concat(switchPrefixCls, "-loading"), loading), _defineProperty(_classNames, "".concat(switchPrefixCls, "-checked"), newChecked), _classNames));
   var loadingIcon = loading ? React.createElement("span", {
     className: "".concat(switchPrefixCls, "-loading-icon")
   }, React.createElement(Icon, {

package/es/tag/style/index.css

@@ -519,3 +519,10 @@
   cursor: pointer;
   font-size: 12px;
 }
+.kd-tag-rtl {
+  direction: rtl;
+}
+.kd-tag-rtl .kd-tag-closeWrapper {
+  margin-right: 4px;
+  margin-left: 0;
+}

package/es/tag/style/index.less

@@ -131,3 +131,11 @@
     font-size: 12px;
   }
 }
+
+.@{tag-prefix-cls}-rtl {
+  direction: rtl;
+  .@{tag-prefix-cls}-closeWrapper {
+    margin-right: 4px;
+    margin-left: 0;
+  }
+}

package/es/tag/tag.js

@@ -25,7 +25,8 @@ var InteranalTag = function InteranalTag(props, ref) {
   var _useContext = useContext(ConfigContext),
     getPrefixCls = _useContext.getPrefixCls,
     prefixCls = _useContext.prefixCls,
-    userDefaultProps = _useContext.compDefaultProps;
+    userDefaultProps = _useContext.compDefaultProps,
+    direction = _useContext.direction;
   var tagProps = getCompProps('Tag', userDefaultProps, props);
   var className = tagProps.className,
     clickable = tagProps.clickable,
@@ -45,6 +46,7 @@ var InteranalTag = function InteranalTag(props, ref) {
   devWarning(TagTypes.indexOf(type) === -1, 'tag', "cannot found tag type '".concat(type, "'"));
   devWarning(TagSizes.indexOf(size) === -1, 'tag', "cannot found tag size '".concat(size, "'"));
   var tagPrefixCls = getPrefixCls(prefixCls, 'tag', customPrefixcls);
+  var rtlCls = direction === 'rtl' ? "".concat(tagPrefixCls, "-rtl") : null;
   var handleClick = function handleClick(e) {
     if (!clickable) return;
     onClick && onClick(e);
@@ -72,7 +74,7 @@ var InteranalTag = function InteranalTag(props, ref) {
     }, child);
   };
   var isPresetColor = ['process', 'success', 'warning', 'error', 'end', 'expired'].indexOf(color) > -1;
-  var tagClasses = classNames(tagPrefixCls, className, (_classNames = {}, _defineProperty(_classNames, _concatInstanceProperty(_context = "".concat(tagPrefixCls, "-shape-")).call(_context, type), type), _defineProperty(_classNames, _concatInstanceProperty(_context2 = "".concat(tagPrefixCls, "-")).call(_context2, color), isPresetColor), _defineProperty(_classNames, "".concat(tagPrefixCls, "-has-color"), !isPresetColor && color && type === 'attribute'), _defineProperty(_classNames, "".concat(tagPrefixCls, "-clickable"), clickable), _defineProperty(_classNames, "".concat(tagPrefixCls, "-closable"), closable), _defineProperty(_classNames, _concatInstanceProperty(_context3 = "".concat(tagPrefixCls, "-size-")).call(_context3, size), size), _defineProperty(_classNames, "".concat(tagPrefixCls, "-closable-disabled"), type === 'edit' && disabled), _classNames));
+  var tagClasses = classNames(tagPrefixCls, rtlCls, className, (_classNames = {}, _defineProperty(_classNames, _concatInstanceProperty(_context = "".concat(tagPrefixCls, "-shape-")).call(_context, type), type), _defineProperty(_classNames, _concatInstanceProperty(_context2 = "".concat(tagPrefixCls, "-")).call(_context2, color), isPresetColor), _defineProperty(_classNames, "".concat(tagPrefixCls, "-has-color"), !isPresetColor && color && type === 'attribute'), _defineProperty(_classNames, "".concat(tagPrefixCls, "-clickable"), clickable), _defineProperty(_classNames, "".concat(tagPrefixCls, "-closable"), closable), _defineProperty(_classNames, _concatInstanceProperty(_context3 = "".concat(tagPrefixCls, "-size-")).call(_context3, size), size), _defineProperty(_classNames, "".concat(tagPrefixCls, "-closable-disabled"), type === 'edit' && disabled), _classNames));
   var tagColorStyle = !isPresetColor && color && type === 'attribute' ? {
     backgroundColor: color
   } : {};

package/es/tree/style/index.css

@@ -373,3 +373,22 @@
       -ms-flex-align: center;
           align-items: center;
 }
+.kd-tree-rtl {
+  direction: rtl;
+}
+.kd-tree-rtl .kd-tree-root .kd-tree-node-item .kd-tree-node-root .kd-tree-node-indent {
+  margin-right: 0;
+  margin-left: 6px;
+}
+.kd-tree-rtl .kd-tree-root .kd-tree-node-item .kd-tree-node-root .kd-tree-node-title-wrap {
+  padding-right: 4px;
+  padding-left: 0;
+}
+.kd-tree-rtl .kd-tree-root .kd-tree-node-item .kd-tree-node-root .kd-tree-node-title-wrap .kd-checkbox-default-margin {
+  margin-right: 0;
+  margin-left: 4px;
+}
+.kd-tree-rtl .kd-tree-root .kd-tree-node-item .kd-tree-node-root .kd-tree-node-animation-expand {
+  -webkit-transform: rotate(-90deg);
+          transform: rotate(-90deg);
+}

package/es/tree/style/index.less

@@ -200,3 +200,30 @@
     align-items: center;
   }
 }
+.@{tree-prefix-cls}-rtl {
+  direction: rtl;
+  .@{tree-prefix-cls}-root {
+    .@{tree-node-prefix-cls}-item {
+      .@{tree-node-prefix-cls}-root {
+        .@{tree-node-prefix-cls}-indent {
+          margin-right: 0;
+          margin-left: 6px;
+        }
+        .@{tree-node-prefix-cls}-title-wrap {
+          padding-right: 4px;
+          padding-left: 0;
+          .@{kd-prefix}-checkbox {
+            &-default-margin {
+              margin-right: 0;
+              margin-left: 4px;
+            }
+          }
+        }
+        .@{tree-node-prefix-cls}-animation-expand {
+          transform: rotate(-90deg);
+        }
+      }
+    }
+  }
+}
+

package/es/tree/tree.js

@@ -31,7 +31,8 @@ var InternalTree = 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 TreeProps = getCompProps('Tree', userDefaultProps, props);
   var customPrefixcls = TreeProps.prefixCls,
     treeData = TreeProps.treeData,
@@ -80,7 +81,8 @@ var InternalTree = React.forwardRef(function (props, ref) {
     renderExtra = TreeProps.renderExtra,
     others = __rest(TreeProps, ["prefixCls", "treeData", "virtual", "showIcon", "switcherIcon", "icon", "checkable", "checkStrictly", "disabled", "draggable", "scrollToKey", "expandedKeys", "checkedKeys", "defaultExpandRoot", "defaultExpandAll", "defaultExpandParent", "defaultExpandedKeys", "defaultCheckedKeys", "defaultSelectedKeys", "height", "onCheck", "onExpand", "onDragStart", "onDragOver", "onDragLeave", "onDragEnter", "onDragEnd", "onDrop", "onSelect", "selectedKeys", "setTreeNodeStyle", "setTreeNodeClassName", "estimatedItemSize", "style", "className", "filterTreeNode", "filterValue", "expandOnClickNode", "onlyExpandOnClickIcon", "loadData", "notFoundContent", "showLine", "expandOnFilterNode", "renderExtra"]);
   var treePrefixCls = getPrefixCls(prefixCls, 'tree', customPrefixcls);
-  var treeNodeClassName = classNames(className, (_classNames = {}, _defineProperty(_classNames, "".concat(treePrefixCls), true), _defineProperty(_classNames, "".concat(treePrefixCls, "-show-line"), showLine), _classNames));
+  var rtlCls = direction === 'rtl' ? "".concat(treePrefixCls, "-rtl") : null;
+  var treeNodeClassName = classNames(className, rtlCls, (_classNames = {}, _defineProperty(_classNames, "".concat(treePrefixCls), true), _defineProperty(_classNames, "".concat(treePrefixCls, "-show-line"), showLine), _classNames));
   var treeRootClassName = "".concat(treePrefixCls, "-root");
   var estimatedItemSize = innerEstimatedItemSize;
   var _React$useMemo = React.useMemo(function () {

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,