@kdcloudjs/kdesign 1.8.30 → 1.8.32

package/es/dropdown/dropdown.js

@@ -21,7 +21,8 @@ var Dropdown = React.forwardRef(function (props, ref) {
   var _React$useContext = React.useContext(ConfigContext),
     getPrefixCls = _React$useContext.getPrefixCls,
     pkgPrefixCls = _React$useContext.prefixCls,
-    userDefaultProps = _React$useContext.compDefaultProps;
+    userDefaultProps = _React$useContext.compDefaultProps,
+    direction = _React$useContext.direction;
   var allProps = getCompProps('Dropdown', userDefaultProps, props);
   var menu = allProps.menu,
     disabled = allProps.disabled,
@@ -31,6 +32,7 @@ var Dropdown = React.forwardRef(function (props, ref) {
     defaultVisible = allProps.defaultVisible,
     onVisibleChange = allProps.onVisibleChange,
     trigger = allProps.trigger,
+    placement = allProps.placement,
     customPrefixcls = allProps.prefixCls,
     menuAnimation = allProps.menuAnimation,
     popperStyle = allProps.popperStyle;
@@ -132,7 +134,8 @@ var Dropdown = React.forwardRef(function (props, ref) {
     popperStyle: innerAnimation ? popperStyle : _extends({
       animation: 'none'
     }, popperStyle),
-    onVisibleChange: handleVisibleChange
+    onVisibleChange: handleVisibleChange,
+    placement: placement || (direction === 'rtl' ? 'bottomRight' : 'bottomLeft')
   });
   return usePopper(child, menuElement, popperProps);
 });

package/es/dropdown/menu.js

@@ -18,7 +18,8 @@ var Menu = React.forwardRef(function (props, ref) {
   var _React$useContext = React.useContext(ConfigContext),
     getPrefixCls = _React$useContext.getPrefixCls,
     pkgPrefixCls = _React$useContext.prefixCls,
-    userDefaultProps = _React$useContext.compDefaultProps;
+    userDefaultProps = _React$useContext.compDefaultProps,
+    direction = _React$useContext.direction;
   var _a = getCompProps('DropdownMenu', userDefaultProps, props),
     customPrefixcls = _a.prefixCls,
     children = _a.children,
@@ -27,6 +28,7 @@ var Menu = React.forwardRef(function (props, ref) {
     className = _a.className,
     restProps = __rest(_a, ["prefixCls", "children", "selectable", "selectedKey", "className"]);
   var prefixCls = getPrefixCls(pkgPrefixCls, 'dropdown-menu', customPrefixcls);
+  var rtlCls = direction === 'rtl' ? "".concat(prefixCls, "-rtl") : null;
   var cloneItem = function cloneItem(item, index) {
     if (!React.isValidElement(item)) {
       return item;
@@ -40,7 +42,7 @@ var Menu = React.forwardRef(function (props, ref) {
     });
   };
   return React.createElement("ul", _extends({
-    className: classNames(prefixCls, className),
+    className: classNames(prefixCls, rtlCls, className),
     role: "menu"
   }, restProps, {
     ref: ref

package/es/dropdown/style/index.css

@@ -267,3 +267,6 @@
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
 }
+.kd-dropdown .kd-dropdown-menu-rtl {
+  direction: rtl;
+}

package/es/dropdown/style/index.less

@@ -110,4 +110,8 @@
       }
     }
   }
+
+  .@{dropdown-prefix-cls}-menu-rtl {
+    direction: rtl;
+  }
 }

package/es/image/preview.js

@@ -17,7 +17,8 @@ var Preview = function Preview(props) {
     getPrefixCls = _React$useContext.getPrefixCls,
     pkgPrefixCls = _React$useContext.prefixCls,
     userDefaultProps = _React$useContext.compDefaultProps,
-    locale = _React$useContext.locale;
+    locale = _React$useContext.locale,
+    direction = _React$useContext.direction;
   var allProps = getCompProps('Image', userDefaultProps, props);
   var imageLangMsg = locale.getCompLangMsg({
     componentName: 'Image'
@@ -34,6 +35,7 @@ var Preview = function Preview(props) {
     operations = allProps.operations,
     customPrefixcls = allProps.prefixCls;
   var prefixCls = getPrefixCls(pkgPrefixCls, 'image', customPrefixcls);
+  var rtlCls = direction === 'rtl' ? "".concat(prefixCls, "-rtl") : null;
   var _React$useState = React.useState(visible),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     show = _React$useState2[0],
@@ -106,7 +108,7 @@ var Preview = function Preview(props) {
     }
   };
   var peviewContainer = React.createElement("div", {
-    className: classNames("".concat(prefixCls, "-preview"), props.className, {
+    className: classNames("".concat(prefixCls, "-preview"), rtlCls, props.className, {
       show: show
     }),
     style: _extends({}, props.style)
@@ -124,7 +126,7 @@ var Preview = function Preview(props) {
   }, React.createElement("img", _extends({}, previewImgProps)))), React.createElement("div", {
     className: "".concat(prefixCls, "-preview-action")
   }, props.type !== 'upload' && length && React.createElement(Icon, {
-    type: "arrow-left",
+    type: direction === 'rtl' ? 'arrow-right' : 'arrow-left',
     className: classNames({
       disabled: current <= 0
     }),
@@ -142,7 +144,7 @@ var Preview = function Preview(props) {
     }),
     onClick: handleZoomIn
   }), props.type !== 'upload' && operations, props.type !== 'upload' && length && React.createElement(Icon, {
-    type: "arrow-right",
+    type: direction === 'rtl' ? 'arrow-left' : 'arrow-right',
     className: classNames({
       disabled: current >= length - 1
     }),

package/es/image/style/index.css

@@ -331,3 +331,14 @@
   margin-right: 2px;
   font-size: 18px;
 }
+.kd-image-rtl {
+  direction: rtl;
+}
+.kd-image-rtl .kd-image-preview-close {
+  left: 18px;
+  right: auto;
+}
+.kd-image-rtl .kd-image-preview-action i:not(:first-child) {
+  margin-right: 20px;
+  margin-left: 0;
+}

package/es/image/style/index.less

@@ -44,7 +44,7 @@
     transition: all 0.2s ease-out;
     background-color: @image-action-background-color;
 
-    >* {
+    > * {
       color: @image-icon-color;
       cursor: pointer;
       display: inline-block;
@@ -67,14 +67,14 @@
   opacity: 0;
   transform: scale(0.15);
   visibility: hidden;
-  transition: all 0.2s cubic-bezier(0.4,0,1,0.6);
+  transition: all 0.2s cubic-bezier(0.4, 0, 1, 0.6);
   -webkit-overflow-scrolling: touch;
 
   &.show {
     opacity: 1;
     transform: scale(1);
     visibility: visible;
-    transition: all 0.2s cubic-bezier(0,.4,.4,1);
+    transition: all 0.2s cubic-bezier(0, 0.4, 0.4, 1);
   }
 
   &-mask {
@@ -208,7 +208,7 @@
       position: absolute;
       right: 40px;
 
-      >* {
+      > * {
         display: inline-block;
         margin-left: 20px;
         cursor: pointer;
@@ -221,3 +221,19 @@
     }
   }
 }
+
+.@{image-prefix-cls}-rtl {
+  direction: rtl;
+  .@{image-preview-prefix-cls}-close {
+    left: 18px;
+    right: auto;
+  }
+  .@{image-preview-prefix-cls}-action {
+    i {
+      &:not(:first-child) {
+        margin-right: 20px;
+        margin-left: 0;
+      }
+    }
+  }
+}

package/es/input/ClearableLabeledInput.d.ts

@@ -23,6 +23,7 @@ interface ClearableInputProps {
     numberMark?: React.ReactNode;
     inputCount?: React.ReactNode;
     status?: 'error';
+    direction?: 'ltr' | 'rtl';
 }
 declare const ClearableInput: React.FC<ClearableInputProps>;
 export default ClearableInput;

package/es/input/ClearableLabeledInput.js

@@ -29,12 +29,14 @@ var ClearableInput = function ClearableInput(props) {
     numberMark = props.numberMark,
     inputCount = props.inputCount,
     count = props.count,
-    status = props.status;
+    status = props.status,
+    direction = props.direction;
   var fixRef = useRef(null);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isMouseEnter = _useState2[0],
     setIsMouseEnter = _useState2[1];
+  var rtlCls = direction === 'rtl' ? "".concat(prefixCls, "-rtl") : null;
   var mouseEnterHandle = function mouseEnterHandle() {
     setIsMouseEnter(true);
   };
@@ -88,7 +90,7 @@ var ClearableInput = function ClearableInput(props) {
       className: "".concat(prefixCls, "-prefix"),
       onMouseDown: mouseDownHandle
     }, prefix) : null;
-    var inputWrapperClasses = classNames((_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefixCls, "-wrapper"), true), _defineProperty(_classNames2, "".concat(prefixCls, "-wrapper-focused"), focused && !disabled), _defineProperty(_classNames2, _concatInstanceProperty(_context = "".concat(prefixCls, "-wrapper-size-")).call(_context, size), size), _defineProperty(_classNames2, "".concat(prefixCls, "-wrapper-borderless"), borderType === 'none'), _defineProperty(_classNames2, "".concat(prefixCls, "-wrapper-underline"), borderType === 'underline'), _defineProperty(_classNames2, "".concat(prefixCls, "-error"), status === 'error'), _defineProperty(_classNames2, "".concat(prefixCls, "-wrapper-disabled"), disabled), _classNames2), _defineProperty({}, className, className && !addonBefore && !addonAfter));
+    var inputWrapperClasses = classNames(rtlCls, (_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefixCls, "-wrapper"), true), _defineProperty(_classNames2, "".concat(prefixCls, "-wrapper-focused"), focused && !disabled), _defineProperty(_classNames2, _concatInstanceProperty(_context = "".concat(prefixCls, "-wrapper-size-")).call(_context, size), size), _defineProperty(_classNames2, "".concat(prefixCls, "-wrapper-borderless"), borderType === 'none'), _defineProperty(_classNames2, "".concat(prefixCls, "-wrapper-underline"), borderType === 'underline'), _defineProperty(_classNames2, "".concat(prefixCls, "-error"), status === 'error'), _defineProperty(_classNames2, "".concat(prefixCls, "-wrapper-disabled"), disabled), _classNames2), _defineProperty({}, className, className && !addonBefore && !addonAfter));
     return React.createElement("span", {
       className: inputWrapperClasses,
       ref: fixRef,
@@ -112,7 +114,7 @@ var ClearableInput = function ClearableInput(props) {
     var addonAfterNode = addonAfter ? React.createElement("span", {
       className: addonClassName
     }, addonAfter) : null;
-    var inputGroupClasses = classNames(className, (_classNames5 = {}, _defineProperty(_classNames5, "".concat(prefixCls, "-group"), true), _defineProperty(_classNames5, _concatInstanceProperty(_context2 = "".concat(prefixCls, "-group-size-")).call(_context2, size), size), _classNames5));
+    var inputGroupClasses = classNames(className, rtlCls, (_classNames5 = {}, _defineProperty(_classNames5, "".concat(prefixCls, "-group"), true), _defineProperty(_classNames5, _concatInstanceProperty(_context2 = "".concat(prefixCls, "-group-size-")).call(_context2, size), size), _classNames5));
     return React.createElement("span", {
       className: "".concat(prefixCls, "-group-wrapper")
     }, React.createElement("span", {
@@ -146,7 +148,7 @@ var ClearableInput = function ClearableInput(props) {
         delete wrapperStyle[key];
       }
     }
-    var textAreaWrapperClasses = classNames(className, _defineProperty({}, "".concat(prefixCls, "-wrapper-textarea"), true));
+    var textAreaWrapperClasses = classNames(className, rtlCls, _defineProperty({}, "".concat(prefixCls, "-wrapper-textarea"), true));
     return React.createElement("span", {
       className: textAreaWrapperClasses,
       style: wrapperStyle,

package/es/input/TextArea.js

@@ -27,7 +27,8 @@ var InternalTextarea = function InternalTextarea(props, ref) {
   var _useContext = useContext(ConfigContext),
     getPrefixCls = _useContext.getPrefixCls,
     prefixCls = _useContext.prefixCls,
-    userDefaultProps = _useContext.compDefaultProps;
+    userDefaultProps = _useContext.compDefaultProps,
+    direction = _useContext.direction;
   var textAreaProps = getCompProps('TextArea', userDefaultProps, props);
   var _useState = useState({}),
     _useState2 = _slicedToArray(_useState, 2),
@@ -58,6 +59,7 @@ var InternalTextarea = function InternalTextarea(props, ref) {
     addonBefore = textAreaProps.addonBefore,
     others = __rest(textAreaProps, ["value", "allowClear", "borderType", "defaultValue", "count", "countPosition", "autoSize", "className", "prefixCls", "canResize", "maxLength", "disabled", "onBlur", "onFocus", "onChange", "placeholder", "style", "size", "status", "prefix", "suffix", "addonAfter", "addonBefore"]);
   var textAreaPrefixCls = getPrefixCls(prefixCls, 'input', customPrefixcls);
+  var rtlCls = direction === 'rtl' ? "".concat(textAreaPrefixCls, "-rtl") : null;
   devWarning(BorderTypes.indexOf(borderType) === -1, 'textarea', "cannot found textarea borderType '".concat(borderType, "'"));
   var _useMergedState = useMergedState('', {
       value: propsValue,
@@ -179,7 +181,7 @@ var InternalTextarea = function InternalTextarea(props, ref) {
       ref: textareaRef,
       disabled: disabled,
       style: _extends({}, textareaStyles, hadCount || !!allowClear ? otherStyles : style),
-      className: classNames("".concat(prefixCls, "-textarea"), (_classNames2 = {}, _defineProperty(_classNames2, _concatInstanceProperty(_context = "".concat(prefixCls, "-size-")).call(_context, size), size), _defineProperty(_classNames2, "".concat(prefixCls, "-borderless"), borderType === 'none'), _defineProperty(_classNames2, "".concat(prefixCls, "-underline"), borderType === 'underline'), _defineProperty(_classNames2, "".concat(prefixCls, "-no-resize"), canResize !== true), _defineProperty(_classNames2, "".concat(prefixCls, "-allowClear-spacing"), !!allowClear), _defineProperty(_classNames2, "".concat(prefixCls, "-error"), status === 'error' || numberMarkError), _defineProperty(_classNames2, "".concat(prefixCls, "-disabled"), disabled), _classNames2), _defineProperty({}, className, className && !allowClear && !hadCount)),
+      className: classNames("".concat(prefixCls, "-textarea"), rtlCls, (_classNames2 = {}, _defineProperty(_classNames2, _concatInstanceProperty(_context = "".concat(prefixCls, "-size-")).call(_context, size), size), _defineProperty(_classNames2, "".concat(prefixCls, "-borderless"), borderType === 'none'), _defineProperty(_classNames2, "".concat(prefixCls, "-underline"), borderType === 'underline'), _defineProperty(_classNames2, "".concat(prefixCls, "-no-resize"), canResize !== true), _defineProperty(_classNames2, "".concat(prefixCls, "-allowClear-spacing"), !!allowClear), _defineProperty(_classNames2, "".concat(prefixCls, "-error"), status === 'error' || numberMarkError), _defineProperty(_classNames2, "".concat(prefixCls, "-disabled"), disabled), _classNames2), _defineProperty({}, className, className && !allowClear && !hadCount)),
       onChange: handleChange,
       onFocus: !disabled ? handleFocus : undefined,
       onBlur: !disabled ? handleBlur : undefined,
@@ -189,7 +191,7 @@ var InternalTextarea = function InternalTextarea(props, ref) {
     }, others));
     return hadCount ? React.createElement("span", {
       style: wrapperStyle,
-      className: _concatInstanceProperty(_context2 = "".concat(prefixCls, "-countWrapper ")).call(_context2, className && !allowClear ? className : '')
+      className: classNames(rtlCls, _concatInstanceProperty(_context2 = "".concat(prefixCls, "-countWrapper ")).call(_context2, className && !allowClear ? className : ''))
     }, textarea, renderNumberMark()) : textarea;
   };
   return React.createElement(ClearableInput, _extends({}, textAreaProps, {
@@ -203,7 +205,8 @@ var InternalTextarea = function InternalTextarea(props, ref) {
     inputType: "text",
     prefixCls: textAreaPrefixCls,
     element: renderTextArea(textAreaPrefixCls),
-    numberMark: renderNumberMark()
+    numberMark: renderNumberMark(),
+    direction: direction
   }));
 };
 var TextArea = React.forwardRef(InternalTextarea);

package/es/input/input.js

@@ -32,7 +32,8 @@ var InternalInput = function InternalInput(props, ref) {
   var _useContext = useContext(ConfigContext),
     getPrefixCls = _useContext.getPrefixCls,
     prefixCls = _useContext.prefixCls,
-    userDefaultProps = _useContext.compDefaultProps;
+    userDefaultProps = _useContext.compDefaultProps,
+    direction = _useContext.direction;
   var inputProps = getCompProps('Input', userDefaultProps, props);
   var type = inputProps.type,
     size = inputProps.size,
@@ -75,7 +76,8 @@ var InternalInput = function InternalInput(props, ref) {
     setShowNumberMark = _useState4[1];
   var inputRef = useRef();
   var inputPrefixCls = getPrefixCls(prefixCls, 'input', customPrefixcls);
-  var inputClasses = classNames(inputPrefixCls, (_classNames = {}, _defineProperty(_classNames, _concatInstanceProperty(_context = "".concat(inputPrefixCls, "-size-")).call(_context, size), size), _defineProperty(_classNames, "".concat(inputPrefixCls, "-borderless"), borderType === 'none'), _defineProperty(_classNames, "".concat(inputPrefixCls, "-underline"), borderType === 'underline'), _defineProperty(_classNames, "".concat(inputPrefixCls, "-error"), status === 'error'), _defineProperty(_classNames, "".concat(inputPrefixCls, "-disabled"), disabled), _classNames), _defineProperty({}, className, className && !hasPrefixSuffix(inputProps) && !addonBefore && !addonAfter));
+  var rtlCls = direction === 'rtl' ? "".concat(inputPrefixCls, "-rtl") : null;
+  var inputClasses = classNames(inputPrefixCls, rtlCls, (_classNames = {}, _defineProperty(_classNames, _concatInstanceProperty(_context = "".concat(inputPrefixCls, "-size-")).call(_context, size), size), _defineProperty(_classNames, "".concat(inputPrefixCls, "-borderless"), borderType === 'none'), _defineProperty(_classNames, "".concat(inputPrefixCls, "-underline"), borderType === 'underline'), _defineProperty(_classNames, "".concat(inputPrefixCls, "-error"), status === 'error'), _defineProperty(_classNames, "".concat(inputPrefixCls, "-disabled"), disabled), _classNames), _defineProperty({}, className, className && !hasPrefixSuffix(inputProps) && !addonBefore && !addonAfter));
   var handleFocus = function handleFocus(event) {
     setFocused(true);
     onFocus && onFocus(event);
@@ -176,7 +178,8 @@ var InternalInput = function InternalInput(props, ref) {
     element: renderInput(),
     focused: focused,
     count: count,
-    inputCount: renderCount()
+    inputCount: renderCount(),
+    direction: direction
   }));
 };
 var Input = React.forwardRef(InternalInput);

package/es/input/style/index.css

@@ -632,3 +632,51 @@ textarea {
 .kd-input-error:not(.kd-input-disabled):not(.kd-input-wrapper-disabled):not( .kd-input-group-addon-disabled) {
   border-color: var(--kd-c-input-color-error, var(--kd-g-color-error, #fb2323));
 }
+.kd-input-rtl {
+  direction: rtl;
+}
+.kd-input-rtl.kd-input-group .kd-input-group-addon:first-child {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  border-top-right-radius: var(--kd-c-input-radius-border, var(--kd-g-radius-border, 2px));
+  border-bottom-right-radius: var(--kd-c-input-radius-border, var(--kd-g-radius-border, 2px));
+  border-left: none;
+  border-right: 1px solid var(--kd-c-input-color-border-disabled, var(--kd-g-color-border-strong, #d9d9d9));
+}
+.kd-input-rtl.kd-input-group .kd-input-group-addon:last-child {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  border-top-left-radius: var(--kd-c-input-radius-border, var(--kd-g-radius-border, 2px));
+  border-bottom-left-radius: var(--kd-c-input-radius-border, var(--kd-g-radius-border, 2px));
+  border-right: none;
+  border-left: 1px solid var(--kd-c-input-color-border-disabled, var(--kd-g-color-border-strong, #d9d9d9));
+}
+.kd-input-rtl.kd-input-wrapper .kd-input-prefix {
+  margin-right: 0;
+  margin-left: calc(var(--kd-c-input-spacing-padding-vertical-small, 3px) * 2);
+}
+.kd-input-rtl.kd-input-wrapper .kd-input-suffix {
+  margin-left: 0;
+  margin-right: calc(var(--kd-c-input-spacing-padding-vertical-small, 3px) * 2);
+}
+.kd-input-rtl.kd-input-wrapper .kd-input-clear-icon-rightSpace {
+  margin-left: 4px;
+  margin-right: 0;
+}
+.kd-input-rtl .kd-input-textarea-mark {
+  right: auto;
+  left: 2px;
+}
+.kd-input-rtl .kd-input-textarea-mark-inner {
+  top: auto;
+  left: 8px;
+  right: auto;
+}
+.kd-input-rtl .kd-input-textarea-clear-icon {
+  left: 8px;
+  right: auto;
+}
+.kd-input-rtl.kd-input-allowClear-spacing {
+  padding-right: var(--kd-c-input-spacing-padding-horizontal-small, 9px);
+  padding-left: 20px;
+}

package/es/input/style/index.less

@@ -313,3 +313,58 @@ textarea {
     border-color: @input-error-color;
   }
 }
+
+.@{input-prefix-cls}-rtl {
+  direction: rtl;
+  &.@{input-prefix-cls}-group {
+    .@{input-prefix-cls}-group-addon {
+      &:first-child {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+        border-top-right-radius: @input-border-radius-inner;
+        border-bottom-right-radius: @input-border-radius-inner;
+        border-left: none;
+        border-right: 1px solid @input-border-color-disabled-inner;
+      }
+      &:last-child {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+        border-top-left-radius: @input-border-radius-inner;
+        border-bottom-left-radius: @input-border-radius-inner;
+        border-right: none;
+        border-left: 1px solid @input-border-color-disabled-inner;
+      }
+    }
+  }
+  &.@{input-prefix-cls}-wrapper {
+    .@{input-prefix-cls}-prefix {
+      margin-right: 0;
+      margin-left: calc(@input-small-padding-vertical-inner * 2);
+    }
+    .@{input-prefix-cls}-suffix {
+      margin-left: 0;
+      margin-right: calc(@input-small-padding-vertical-inner * 2);
+    }
+    .@{input-prefix-cls}-clear-icon-rightSpace {
+      margin-left: 4px;
+      margin-right: 0;
+    }
+  }
+  .@{input-prefix-cls}-textarea-mark {
+    right: auto;
+    left: 2px;
+    &-inner {
+      top: auto;
+      left: 8px;
+      right: auto;
+    }
+  }
+  .@{input-prefix-cls}-textarea-clear-icon {
+    left: 8px;
+    right: auto;
+  }
+  &.@{input-prefix-cls}-allowClear-spacing {
+    padding-right: @input-small-padding-horizontal-inner;
+    padding-left: 20px;
+  }
+}

package/es/link/link.js

@@ -21,7 +21,8 @@ var InternalLink = function InternalLink(props, ref) {
   var _useContext = useContext(ConfigContext),
     getPrefixCls = _useContext.getPrefixCls,
     prefixCls = _useContext.prefixCls,
-    userDefaultProps = _useContext.compDefaultProps;
+    userDefaultProps = _useContext.compDefaultProps,
+    direction = _useContext.direction;
   var linkProps = getCompProps('Link', userDefaultProps, props);
   var size = linkProps.size,
     style = linkProps.style,
@@ -38,7 +39,8 @@ var InternalLink = function InternalLink(props, ref) {
     others = __rest(linkProps, ["size", "style", "className", "target", "href", "underscore", "children", "prefix", "suffix", "disabled", "onClick", "prefixCls"]);
   var linkRef = ref || React.createRef();
   var linkPrefixCls = getPrefixCls(prefixCls, 'link', customPrefixcls);
-  var wrapperClasses = classNames((_classNames = {}, _defineProperty(_classNames, "".concat(linkPrefixCls), true), _defineProperty(_classNames, _concatInstanceProperty(_context = "".concat(linkPrefixCls, "-size-")).call(_context, size), size), _classNames));
+  var rtlCls = direction === 'rtl' ? "".concat(linkPrefixCls, "-rtl") : null;
+  var wrapperClasses = classNames(rtlCls, (_classNames = {}, _defineProperty(_classNames, "".concat(linkPrefixCls), true), _defineProperty(_classNames, _concatInstanceProperty(_context = "".concat(linkPrefixCls, "-size-")).call(_context, size), size), _classNames));
   var linkClasses = classNames(className, (_classNames2 = {}, _defineProperty(_classNames2, "".concat(linkPrefixCls, "-text"), true), _defineProperty(_classNames2, "".concat(linkPrefixCls, "-underscore"), underscore), _defineProperty(_classNames2, "".concat(linkPrefixCls, "-disabled"), disabled), _classNames2));
   var handleClick = function handleClick(e) {
     disabled && e.preventDefault();

package/es/link/style/index.css

@@ -155,3 +155,14 @@
   display: inline-block;
   margin-left: var(--kd-c-link-suffix-horizontal, 4px);
 }
+.kd-link-rtl {
+  direction: rtl;
+}
+.kd-link-rtl .kd-link-prefix {
+  margin-right: 0;
+  margin-left: var(--kd-c-link-prefix-horizontal, 4px);
+}
+.kd-link-rtl .kd-link-suffix {
+  margin-left: 0;
+  margin-right: var(--kd-c-link-suffix-horizontal, 4px);
+}

package/es/link/style/index.less

@@ -59,3 +59,17 @@
     margin-left: @link-suffix-horizontal;
   }
 }
+
+.@{link-prefix-cls}-rtl {
+  direction: rtl;
+  .@{link-prefix-cls} {
+    &-prefix {
+      margin-right: 0;
+      margin-left: @link-prefix-horizontal;
+    }
+    &-suffix {
+      margin-left: 0;
+      margin-right: @link-suffix-horizontal;
+    }
+  }
+} 

package/es/menu/menu.js

@@ -32,7 +32,8 @@ var Menu = function Menu(props) {
   var _useContext = useContext(ConfigContext),
     getPrefixCls = _useContext.getPrefixCls,
     pkgPrefixCls = _useContext.prefixCls,
-    userDefaultProps = _useContext.compDefaultProps;
+    userDefaultProps = _useContext.compDefaultProps,
+    direction = _useContext.direction;
   var userSelectedKey = props.selectedKey,
     userOpenKeys = props.openKeys;
   var _b = getCompProps('Menu', userDefaultProps, props),
@@ -51,6 +52,7 @@ var Menu = function Menu(props) {
     defaultOpenKeys = _b.defaultOpenKeys,
     restProps = __rest(_b, ["prefixCls", "mode", "inlineIndent", "forceSubMenuRender", "additionalTools", "onClick", "onOpenChange", "children", "className", "theme", "collapsed", "accordion", "defaultOpenKeys"]);
   var prefixCls = getPrefixCls(pkgPrefixCls, 'menu', customPrefixcls);
+  var rtlCls = direction === 'rtl' ? "".concat(prefixCls, "-rtl") : null;
   devWarning(['inline', 'vertical', undefined].indexOf(mode) === -1, 'menu', "cannot found menu mode '".concat(mode, "'"));
   devWarning(mode !== 'inline' && accordion !== undefined, 'menu', "'accordion' is valid only in mode='inline'");
   var _useState = useState(''),
@@ -169,7 +171,7 @@ var Menu = function Menu(props) {
     onMouseEnter: handleMouseEnterMenu
   };
   return React.createElement("div", _extends({
-    className: classNames(prefixCls, className, (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-inline"), mode === 'inline'), _defineProperty(_classNames, "".concat(prefixCls, "-vertical"), mode !== 'inline'), _defineProperty(_classNames, "".concat(prefixCls, "-collapsed"), collapsed), _defineProperty(_classNames, _concatInstanceProperty(_context2 = "".concat(prefixCls, "-")).call(_context2, theme === 'light' ? 'light' : 'dark'), true), _classNames)),
+    className: classNames(prefixCls, rtlCls, className, (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-inline"), mode === 'inline'), _defineProperty(_classNames, "".concat(prefixCls, "-vertical"), mode !== 'inline'), _defineProperty(_classNames, "".concat(prefixCls, "-collapsed"), collapsed), _defineProperty(_classNames, _concatInstanceProperty(_context2 = "".concat(prefixCls, "-")).call(_context2, theme === 'light' ? 'light' : 'dark'), true), _classNames)),
     role: "menu",
     style: style
   }, mouseEvent), children && renderMenu(), additionalTools);

package/es/menu/menuItem.js

@@ -23,7 +23,8 @@ var InternalMenuItem = function InternalMenuItem(props, ref) {
   var _React$useContext = React.useContext(ConfigContext),
     getPrefixCls = _React$useContext.getPrefixCls,
     pkgPrefixCls = _React$useContext.prefixCls,
-    userDefaultProps = _React$useContext.compDefaultProps;
+    userDefaultProps = _React$useContext.compDefaultProps,
+    direction = _React$useContext.direction;
   var _a = getCompProps('MenuItem', userDefaultProps, props),
     customPrefixcls = _a.prefixCls,
     icon = _a.icon,
@@ -97,9 +98,10 @@ var InternalMenuItem = function InternalMenuItem(props, ref) {
     onMouseLeave: handleOnMouseLeave,
     onMouseEnter: handleOnMouseEnter
   };
+  var isRtl = direction === 'rtl';
   var titleStyle = {
-    paddingLeft: "".concat(getPaddingLeft(), "px"),
-    paddingRight: mode !== 'inline' && level > 1 ? "".concat(DEFAUTL_PADDING, "px") : 0
+    paddingLeft: isRtl ? mode !== 'inline' && level > 1 ? "".concat(DEFAUTL_PADDING, "px") : 0 : "".concat(getPaddingLeft(), "px"),
+    paddingRight: isRtl ? "".concat(getPaddingLeft(), "px") : mode !== 'inline' && level > 1 ? "".concat(DEFAUTL_PADDING, "px") : 0
   };
   var renderTitle = function renderTitle() {
     if (!icon && collapsed && level === 1 && typeof children === 'string') {

package/es/menu/style/index.css

@@ -627,3 +627,13 @@
   color: var(--kd-c-menu-light-color-text-active, var(--kd-g-color-theme, #5582f3));
   border: none;
 }
+.kd-menu-rtl {
+  direction: rtl;
+}
+.kd-menu-rtl .kd-menu-submenu {
+  direction: rtl;
+}
+.kd-menu-rtl .kd-menu-submenu .kd-menu-submenu-title .kd-menu-submenu-arrow {
+  margin-left: 0;
+  margin-right: auto;
+}