@kdcloudjs/kdesign 1.8.30 → 1.8.32

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

@@ -42,12 +42,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 = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isMouseEnter = _useState2[0],
     setIsMouseEnter = _useState2[1];
+  var rtlCls = direction === 'rtl' ? "".concat(prefixCls, "-rtl") : null;
   var mouseEnterHandle = function mouseEnterHandle() {
     setIsMouseEnter(true);
   };
@@ -101,7 +103,7 @@ var ClearableInput = function ClearableInput(props) {
       className: "".concat(prefixCls, "-prefix"),
       onMouseDown: mouseDownHandle
     }, prefix) : null;
-    var inputWrapperClasses = (0, _classnames.default)((_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-wrapper"), true), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-wrapper-focused"), focused && !disabled), (0, _defineProperty2.default)(_classNames2, (0, _concat.default)(_context = "".concat(prefixCls, "-wrapper-size-")).call(_context, size), size), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-wrapper-borderless"), borderType === 'none'), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-wrapper-underline"), borderType === 'underline'), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-error"), status === 'error'), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-wrapper-disabled"), disabled), _classNames2), (0, _defineProperty2.default)({}, className, className && !addonBefore && !addonAfter));
+    var inputWrapperClasses = (0, _classnames.default)(rtlCls, (_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-wrapper"), true), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-wrapper-focused"), focused && !disabled), (0, _defineProperty2.default)(_classNames2, (0, _concat.default)(_context = "".concat(prefixCls, "-wrapper-size-")).call(_context, size), size), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-wrapper-borderless"), borderType === 'none'), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-wrapper-underline"), borderType === 'underline'), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-error"), status === 'error'), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-wrapper-disabled"), disabled), _classNames2), (0, _defineProperty2.default)({}, className, className && !addonBefore && !addonAfter));
     return _react.default.createElement("span", {
       className: inputWrapperClasses,
       ref: fixRef,
@@ -125,7 +127,7 @@ var ClearableInput = function ClearableInput(props) {
     var addonAfterNode = addonAfter ? _react.default.createElement("span", {
       className: addonClassName
     }, addonAfter) : null;
-    var inputGroupClasses = (0, _classnames.default)(className, (_classNames5 = {}, (0, _defineProperty2.default)(_classNames5, "".concat(prefixCls, "-group"), true), (0, _defineProperty2.default)(_classNames5, (0, _concat.default)(_context2 = "".concat(prefixCls, "-group-size-")).call(_context2, size), size), _classNames5));
+    var inputGroupClasses = (0, _classnames.default)(className, rtlCls, (_classNames5 = {}, (0, _defineProperty2.default)(_classNames5, "".concat(prefixCls, "-group"), true), (0, _defineProperty2.default)(_classNames5, (0, _concat.default)(_context2 = "".concat(prefixCls, "-group-size-")).call(_context2, size), size), _classNames5));
     return _react.default.createElement("span", {
       className: "".concat(prefixCls, "-group-wrapper")
     }, _react.default.createElement("span", {
@@ -159,7 +161,7 @@ var ClearableInput = function ClearableInput(props) {
         delete wrapperStyle[key];
       }
     }
-    var textAreaWrapperClasses = (0, _classnames.default)(className, (0, _defineProperty2.default)({}, "".concat(prefixCls, "-wrapper-textarea"), true));
+    var textAreaWrapperClasses = (0, _classnames.default)(className, rtlCls, (0, _defineProperty2.default)({}, "".concat(prefixCls, "-wrapper-textarea"), true));
     return _react.default.createElement("span", {
       className: textAreaWrapperClasses,
       style: wrapperStyle,

package/lib/input/TextArea.js

@@ -39,7 +39,8 @@ var InternalTextarea = function InternalTextarea(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 textAreaProps = (0, _utils.getCompProps)('TextArea', userDefaultProps, props);
   var _useState = (0, _react.useState)({}),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -70,6 +71,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;
   (0, _devwarning.default)(_input.BorderTypes.indexOf(borderType) === -1, 'textarea', "cannot found textarea borderType '".concat(borderType, "'"));
   var _useMergedState = (0, _hooks.useMergedState)('', {
       value: propsValue,
@@ -191,7 +193,7 @@ var InternalTextarea = function InternalTextarea(props, ref) {
       ref: textareaRef,
       disabled: disabled,
       style: (0, _extends2.default)({}, textareaStyles, hadCount || !!allowClear ? otherStyles : style),
-      className: (0, _classnames.default)("".concat(prefixCls, "-textarea"), (_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, (0, _concat.default)(_context = "".concat(prefixCls, "-size-")).call(_context, size), size), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-borderless"), borderType === 'none'), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-underline"), borderType === 'underline'), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-no-resize"), canResize !== true), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-allowClear-spacing"), !!allowClear), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-error"), status === 'error' || numberMarkError), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-disabled"), disabled), _classNames2), (0, _defineProperty2.default)({}, className, className && !allowClear && !hadCount)),
+      className: (0, _classnames.default)("".concat(prefixCls, "-textarea"), rtlCls, (_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, (0, _concat.default)(_context = "".concat(prefixCls, "-size-")).call(_context, size), size), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-borderless"), borderType === 'none'), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-underline"), borderType === 'underline'), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-no-resize"), canResize !== true), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-allowClear-spacing"), !!allowClear), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-error"), status === 'error' || numberMarkError), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-disabled"), disabled), _classNames2), (0, _defineProperty2.default)({}, className, className && !allowClear && !hadCount)),
       onChange: handleChange,
       onFocus: !disabled ? handleFocus : undefined,
       onBlur: !disabled ? handleBlur : undefined,
@@ -201,7 +203,7 @@ var InternalTextarea = function InternalTextarea(props, ref) {
     }, others));
     return hadCount ? _react.default.createElement("span", {
       style: wrapperStyle,
-      className: (0, _concat.default)(_context2 = "".concat(prefixCls, "-countWrapper ")).call(_context2, className && !allowClear ? className : '')
+      className: (0, _classnames.default)(rtlCls, (0, _concat.default)(_context2 = "".concat(prefixCls, "-countWrapper ")).call(_context2, className && !allowClear ? className : ''))
     }, textarea, renderNumberMark()) : textarea;
   };
   return _react.default.createElement(_ClearableLabeledInput.default, (0, _extends2.default)({}, textAreaProps, {
@@ -215,7 +217,8 @@ var InternalTextarea = function InternalTextarea(props, ref) {
     inputType: "text",
     prefixCls: textAreaPrefixCls,
     element: renderTextArea(textAreaPrefixCls),
-    numberMark: renderNumberMark()
+    numberMark: renderNumberMark(),
+    direction: direction
   }));
 };
 var TextArea = _react.default.forwardRef(InternalTextarea);

package/lib/input/input.js

@@ -47,7 +47,8 @@ var InternalInput = function InternalInput(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 inputProps = (0, _utils.getCompProps)('Input', userDefaultProps, props);
   var type = inputProps.type,
     size = inputProps.size,
@@ -90,7 +91,8 @@ var InternalInput = function InternalInput(props, ref) {
     setShowNumberMark = _useState4[1];
   var inputRef = (0, _react.useRef)();
   var inputPrefixCls = getPrefixCls(prefixCls, 'input', customPrefixcls);
-  var inputClasses = (0, _classnames.default)(inputPrefixCls, (_classNames = {}, (0, _defineProperty2.default)(_classNames, (0, _concat.default)(_context = "".concat(inputPrefixCls, "-size-")).call(_context, size), size), (0, _defineProperty2.default)(_classNames, "".concat(inputPrefixCls, "-borderless"), borderType === 'none'), (0, _defineProperty2.default)(_classNames, "".concat(inputPrefixCls, "-underline"), borderType === 'underline'), (0, _defineProperty2.default)(_classNames, "".concat(inputPrefixCls, "-error"), status === 'error'), (0, _defineProperty2.default)(_classNames, "".concat(inputPrefixCls, "-disabled"), disabled), _classNames), (0, _defineProperty2.default)({}, className, className && !(0, _ClearableLabeledInput.hasPrefixSuffix)(inputProps) && !addonBefore && !addonAfter));
+  var rtlCls = direction === 'rtl' ? "".concat(inputPrefixCls, "-rtl") : null;
+  var inputClasses = (0, _classnames.default)(inputPrefixCls, rtlCls, (_classNames = {}, (0, _defineProperty2.default)(_classNames, (0, _concat.default)(_context = "".concat(inputPrefixCls, "-size-")).call(_context, size), size), (0, _defineProperty2.default)(_classNames, "".concat(inputPrefixCls, "-borderless"), borderType === 'none'), (0, _defineProperty2.default)(_classNames, "".concat(inputPrefixCls, "-underline"), borderType === 'underline'), (0, _defineProperty2.default)(_classNames, "".concat(inputPrefixCls, "-error"), status === 'error'), (0, _defineProperty2.default)(_classNames, "".concat(inputPrefixCls, "-disabled"), disabled), _classNames), (0, _defineProperty2.default)({}, className, className && !(0, _ClearableLabeledInput.hasPrefixSuffix)(inputProps) && !addonBefore && !addonAfter));
   var handleFocus = function handleFocus(event) {
     setFocused(true);
     onFocus && onFocus(event);
@@ -191,7 +193,8 @@ var InternalInput = function InternalInput(props, ref) {
     element: renderInput(),
     focused: focused,
     count: count,
-    inputCount: renderCount()
+    inputCount: renderCount(),
+    direction: direction
   }));
 };
 var Input = _react.default.forwardRef(InternalInput);

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

@@ -34,7 +34,8 @@ var InternalLink = function InternalLink(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 linkProps = (0, _utils.getCompProps)('Link', userDefaultProps, props);
   var size = linkProps.size,
     style = linkProps.style,
@@ -51,7 +52,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.default.createRef();
   var linkPrefixCls = getPrefixCls(prefixCls, 'link', customPrefixcls);
-  var wrapperClasses = (0, _classnames.default)((_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(linkPrefixCls), true), (0, _defineProperty2.default)(_classNames, (0, _concat.default)(_context = "".concat(linkPrefixCls, "-size-")).call(_context, size), size), _classNames));
+  var rtlCls = direction === 'rtl' ? "".concat(linkPrefixCls, "-rtl") : null;
+  var wrapperClasses = (0, _classnames.default)(rtlCls, (_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(linkPrefixCls), true), (0, _defineProperty2.default)(_classNames, (0, _concat.default)(_context = "".concat(linkPrefixCls, "-size-")).call(_context, size), size), _classNames));
   var linkClasses = (0, _classnames.default)(className, (_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, "".concat(linkPrefixCls, "-text"), true), (0, _defineProperty2.default)(_classNames2, "".concat(linkPrefixCls, "-underscore"), underscore), (0, _defineProperty2.default)(_classNames2, "".concat(linkPrefixCls, "-disabled"), disabled), _classNames2));
   var handleClick = function handleClick(e) {
     disabled && e.preventDefault();

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

@@ -44,7 +44,8 @@ var Menu = function Menu(props) {
   var _useContext = (0, _react.useContext)(_configProvider.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 = (0, _utils.getCompProps)('Menu', userDefaultProps, props),
@@ -63,6 +64,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;
   (0, _devwarning.default)(['inline', 'vertical', undefined].indexOf(mode) === -1, 'menu', "cannot found menu mode '".concat(mode, "'"));
   (0, _devwarning.default)(mode !== 'inline' && accordion !== undefined, 'menu', "'accordion' is valid only in mode='inline'");
   var _useState = (0, _react.useState)(''),
@@ -181,7 +183,7 @@ var Menu = function Menu(props) {
     onMouseEnter: handleMouseEnterMenu
   };
   return _react.default.createElement("div", (0, _extends2.default)({
-    className: (0, _classnames.default)(prefixCls, className, (_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-inline"), mode === 'inline'), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-vertical"), mode !== 'inline'), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-collapsed"), collapsed), (0, _defineProperty2.default)(_classNames, (0, _concat.default)(_context2 = "".concat(prefixCls, "-")).call(_context2, theme === 'light' ? 'light' : 'dark'), true), _classNames)),
+    className: (0, _classnames.default)(prefixCls, rtlCls, className, (_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-inline"), mode === 'inline'), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-vertical"), mode !== 'inline'), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-collapsed"), collapsed), (0, _defineProperty2.default)(_classNames, (0, _concat.default)(_context2 = "".concat(prefixCls, "-")).call(_context2, theme === 'light' ? 'light' : 'dark'), true), _classNames)),
     role: "menu",
     style: style
   }, mouseEvent), children && renderMenu(), additionalTools);

package/lib/menu/menuItem.js

@@ -36,7 +36,8 @@ var InternalMenuItem = function InternalMenuItem(props, ref) {
   var _React$useContext = React.useContext(_configProvider.ConfigContext),
     getPrefixCls = _React$useContext.getPrefixCls,
     pkgPrefixCls = _React$useContext.prefixCls,
-    userDefaultProps = _React$useContext.compDefaultProps;
+    userDefaultProps = _React$useContext.compDefaultProps,
+    direction = _React$useContext.direction;
   var _a = (0, _utils.getCompProps)('MenuItem', userDefaultProps, props),
     customPrefixcls = _a.prefixCls,
     icon = _a.icon,
@@ -110,9 +111,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(_util.DEFAUTL_PADDING, "px") : 0
+    paddingLeft: isRtl ? mode !== 'inline' && level > 1 ? "".concat(_util.DEFAUTL_PADDING, "px") : 0 : "".concat(getPaddingLeft(), "px"),
+    paddingRight: isRtl ? "".concat(getPaddingLeft(), "px") : mode !== 'inline' && level > 1 ? "".concat(_util.DEFAUTL_PADDING, "px") : 0
   };
   var renderTitle = function renderTitle() {
     if (!icon && collapsed && level === 1 && typeof children === 'string') {

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

package/lib/menu/style/index.less

@@ -124,13 +124,13 @@
 
 // dark
 .@{menu-dark-prefix-cls} {
-
   .@{submenu-prefix-cls}-sub {
     color: @menu-sub-color;
     background: @menu-sub-inline-color-background;
   }
 
-  .@{submenu-prefix-cls}-sub-second, .@{submenu-prefix-cls}-sub-third {
+  .@{submenu-prefix-cls}-sub-second,
+  .@{submenu-prefix-cls}-sub-third {
     background: @menu-sub-color-background;
   }
 
@@ -140,29 +140,32 @@
     }
 
     &-active {
-      .menu-dark-active()
+      .menu-dark-active();
     }
   }
 
-  .@{menuitem-prefix-cls}-active, .@{submenu-prefix-cls}-active {
-    .menu-dark-active()
+  .@{menuitem-prefix-cls}-active,
+  .@{submenu-prefix-cls}-active {
+    .menu-dark-active();
   }
 
-  .@{menuitem-prefix-cls}-hover, .@{submenu-prefix-cls}-hover {
-    .menu-dark-hover()
+  .@{menuitem-prefix-cls}-hover,
+  .@{submenu-prefix-cls}-hover {
+    .menu-dark-hover();
   }
 }
 
 .@{menu-inline-prefix-cls}.@{menu-dark-prefix-cls} {
-  .@{menuitem-prefix-cls}-active, .@{submenu-prefix-cls}-active {
+  .@{menuitem-prefix-cls}-active,
+  .@{submenu-prefix-cls}-active {
     .@{submenu-prefix-cls}-title {
-      .menu-dark-active-inline-title()
+      .menu-dark-active-inline-title();
     }
   }
 
   .@{submenu-prefix-cls}:not(.@{submenu-prefix-cls}-disabled):not(.@{submenu-prefix-cls}-active) {
     > .@{submenu-prefix-cls}-title:hover {
-      .menu-dark-active-inline-title()
+      .menu-dark-active-inline-title();
     }
   }
 }
@@ -173,9 +176,10 @@
 }
 
 .@{menu-inline-prefix-cls}.@{menu-light-prefix-cls} {
-  .@{menuitem-prefix-cls}-active, .@{submenu-prefix-cls}-active {
+  .@{menuitem-prefix-cls}-active,
+  .@{submenu-prefix-cls}-active {
     .@{submenu-prefix-cls}-title {
-      .menu-light-active-inline-title()
+      .menu-light-active-inline-title();
     }
   }
 }
@@ -187,7 +191,7 @@
   }
 
   &.hidden {
-    .menu-hidden()
+    .menu-hidden();
   }
 
   .@{submenu-prefix-cls} {
@@ -197,18 +201,18 @@
       color: @menu-sub-color;
       background: @menu-sub-inline-color-background;
       box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08),
-      0 9px 28px 8px rgba(0, 0, 0, 0.05);
+        0 9px 28px 8px rgba(0, 0, 0, 0.05);
 
       .@{menuitem-prefix-cls} {
         &:not(.@{menuitem-prefix-cls}-disabled):not(.@{menuitem-prefix-cls}-active):hover,
         &-active {
-          .menu-dark-hover()
+          .menu-dark-hover();
         }
       }
 
       &-second,
       &-third {
-        animation: kdZoomTopLeftIn calc(@menu-motion-duration - 0.1s) cubic-bezier(0, .4, .4, 1) forwards;
+        animation: kdZoomTopLeftIn calc(@menu-motion-duration - 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards;
         opacity: 1;
         visibility: visible;
         transition: opacity, visibility;
@@ -217,7 +221,7 @@
       }
 
       &-hide {
-        .menu-hidden()
+        .menu-hidden();
       }
     }
   }
@@ -227,10 +231,17 @@
   }
 }
 
-
-
-
-
-
+.@{menu-prefix-cls}-rtl {
+  direction: rtl;
+  .@{submenu-prefix-cls} {
+    direction: rtl;
+    .@{submenu-prefix-cls}-title {
+      .@{submenu-prefix-cls}-arrow {
+        margin-left: 0;
+        margin-right: auto;
+      }
+    }
+  }
+}
 
 

package/lib/menu/subMenu.js

@@ -36,7 +36,8 @@ var SubMenu = function SubMenu(props) {
   var _React$useContext = _react.default.useContext(_configProvider.ConfigContext),
     getPrefixCls = _React$useContext.getPrefixCls,
     pkgPrefixCls = _React$useContext.prefixCls,
-    userDefaultProps = _React$useContext.compDefaultProps;
+    userDefaultProps = _React$useContext.compDefaultProps,
+    direction = _React$useContext.direction;
   var _a = (0, _utils.getCompProps)('MenuSubMenu', userDefaultProps, props),
     customPrefixcls = _a.prefixCls,
     theme = _a.theme,
@@ -233,9 +234,10 @@ var SubMenu = function SubMenu(props) {
     onMouseEnter: handleOnMouseEnter,
     onClick: handleOnClickSubMenu
   };
+  var isRtl = direction === 'rtl';
   var titleStyle = {
-    paddingRight: "".concat(curPaddingRight, "px"),
-    paddingLeft: "".concat(curPaddingLeft, "px")
+    paddingRight: isRtl ? "".concat(curPaddingLeft, "px") : "".concat(curPaddingRight, "px"),
+    paddingLeft: isRtl ? "".concat(curPaddingRight, "px") : "".concat(curPaddingLeft, "px")
   };
   var verticalView = (0, _usePopper.default)(_react.default.createElement("li", (0, _extends2.default)({
     className: (0, _classnames.default)(prefixCls, className, (_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, "light", theme === 'light'), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-collapsed"), collapsed), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-disabled"), disabled), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-hover"), !disabled && Array.isArray(openKeys) && (0, _includes.default)(openKeys).call(openKeys, keyValue)), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-active"), Array.isArray(selectedKeyPath) && (0, _includes.default)(selectedKeyPath).call(selectedKeyPath, keyValue)), _classNames2)),
@@ -282,7 +284,7 @@ var SubMenu = function SubMenu(props) {
     });
   }))), {
     arrow: false,
-    placement: 'rightTop',
+    placement: direction === 'rtl' ? 'leftTop' : 'rightTop',
     gap: 0,
     visible: isVertical && !disabled ? visible : false,
     disabled: isVertical ? undefined : true,

package/lib/modal/modal.js

@@ -68,7 +68,8 @@ var InternalModal = function InternalModal(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 modalProps = (0, _utils.getCompProps)('Modal', userDefaultProps, props);
   var body = modalProps.body,
     bodyClassName = modalProps.bodyClassName,
@@ -122,6 +123,7 @@ var InternalModal = function InternalModal(props, ref) {
   var wrapperRef = (0, _react.useRef)(null);
   var containerRef = ref || innerRef;
   var modalPrefixCls = getPrefixCls(prefixCls, 'modal', customPrefixcls);
+  var rtlCls = direction === 'rtl' ? "".concat(modalPrefixCls, "-rtl") : null;
   (0, _devwarning.default)(ModalTypes.indexOf(type) === -1, 'modal', "cannot found modal type '".concat(type, "'"));
   var modalContainer = typeof getContainer === 'function' ? getContainer() : getContainer;
   if (modalContainer !== false && !(modalContainer instanceof HTMLElement)) {
@@ -386,7 +388,7 @@ var InternalModal = function InternalModal(props, ref) {
     }
   };
   var isHidden = !destroyOnClose && !(isForceController ? visible : innerVisible);
-  var modalClasses = (0, _classnames.default)(modalPrefixCls, className, (_classNames3 = {}, (0, _defineProperty2.default)(_classNames3, "".concat(modalPrefixCls, "-container"), true), (0, _defineProperty2.default)(_classNames3, "".concat(modalPrefixCls, "-container-ie"), _ieUtil.isIE), (0, _defineProperty2.default)(_classNames3, "".concat(modalPrefixCls, "-container-hidden"), isHidden), (0, _defineProperty2.default)(_classNames3, "".concat(modalPrefixCls, "-container-show"), !isHidden), _classNames3));
+  var modalClasses = (0, _classnames.default)(modalPrefixCls, rtlCls, className, (_classNames3 = {}, (0, _defineProperty2.default)(_classNames3, "".concat(modalPrefixCls, "-container"), true), (0, _defineProperty2.default)(_classNames3, "".concat(modalPrefixCls, "-container-ie"), _ieUtil.isIE), (0, _defineProperty2.default)(_classNames3, "".concat(modalPrefixCls, "-container-hidden"), isHidden), (0, _defineProperty2.default)(_classNames3, "".concat(modalPrefixCls, "-container-show"), !isHidden), _classNames3));
   var headerClass = (0, _classnames.default)("".concat(modalPrefixCls, "-header"), titleClassName);
   var container = _react.default.createElement("div", {
     className: (0, _classnames.default)((_classNames4 = {}, (0, _defineProperty2.default)(_classNames4, "".concat(modalPrefixCls, "-container-box"), true), (0, _defineProperty2.default)(_classNames4, "".concat(modalPrefixCls, "-has-container-box"), modalContainer && !overroll), (0, _defineProperty2.default)(_classNames4, "".concat(modalPrefixCls, "-showline"), showline), _classNames4)),

package/lib/modal/style/index.css

@@ -347,3 +347,10 @@
 .kd-modal-showline .kd-modal-footer {
   border-top: var(--kd-c-modal-sizing-border, 1px) solid var(--kd-c-modal-color-border, var(--kd-g-color-border-strong-2, #d9d9d9));
 }
+.kd-modal-rtl {
+  direction: rtl;
+}
+.kd-modal-rtl .kd-modal-container-box .kd-modal-footer .kd-modal-cancel-node .kd-modal-margin-btn {
+  margin-left: var(--kd-c-modal-footer-button-spacing, 12px);
+  margin-right: 0;
+}

package/lib/modal/style/index.less

@@ -226,3 +226,17 @@
     border-top: @modal-border-width solid @modal-border-color;
   }
 }
+
+.@{modal-prefix-cls}-rtl {
+  direction: rtl;
+  .@{modal-prefix-cls}-container-box {
+    .@{modal-prefix-cls}-footer {
+      .@{modal-prefix-cls}-cancel-node {
+        .@{modal-prefix-cls}-margin-btn {
+          margin-left: @modal-footer-button-spacing;
+          margin-right: 0;
+        }
+      }
+    }
+  }
+}