@kdcloudjs/kdesign 1.8.33 → 1.8.35

package/es/button/group.js

@@ -33,7 +33,8 @@ var InternalButtonGroup = function InternalButtonGroup(props, ref) {
     buttonType = buttonGoupProps.buttonType,
     disabled = buttonGoupProps.disabled,
     onVisibleChange = buttonGoupProps.onVisibleChange,
-    loading = buttonGoupProps.loading;
+    loading = buttonGoupProps.loading,
+    placement = buttonGoupProps.placement;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     optionShow = _useState2[0],
@@ -110,7 +111,7 @@ var InternalButtonGroup = function InternalButtonGroup(props, ref) {
     onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(visible);
   };
   var popperProps = _extends(_extends({
-    placement: direction === 'rtl' ? 'bottomRight' : 'bottomLeft',
+    placement: placement || (direction === 'rtl' ? 'bottomRight' : 'bottomLeft'),
     trigger: 'click',
     gap: 0
   }, buttonGoupProps), {

package/es/city-picker/city-picker.js

@@ -487,7 +487,7 @@ var InternalSelect = function InternalSelect(props, ref) {
   };
   var popperProps = _extends(_extends({}, selectProps), {
     prefixCls: classNames("".concat(selectPrefixCls, "-dropdown"), rtlCls),
-    placement: direction === 'rtl' ? 'bottomRight' : 'bottomLeft',
+    placement: 'bottomLeft',
     popperStyle: catchStyle(),
     defaultVisible: optionShow,
     visible: optionShow,

package/es/city-picker/option.js

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

package/es/color-picker/color-picker-panel.js

@@ -82,6 +82,9 @@ var ColorPickerPanel = function ColorPickerPanel(props) {
     prefixCls = _useContext.prefixCls,
     locale = _useContext.locale,
     direction = _useContext.direction;
+  var colorPickerLangMsg = locale.getCompLangMsg({
+    componentName: 'ColorPicker'
+  });
   var colorPickerPrefixCls = getPrefixCls(prefixCls, 'color-picker');
   var panelCls = classNames("".concat(colorPickerPrefixCls, "-panel"));
   var panelChromePickerCls = classNames("".concat(colorPickerPrefixCls, "-panel-chrome"), (_classNames = {}, _defineProperty(_classNames, "".concat(colorPickerPrefixCls, "-panel-chrome-no-box"), !(showColorPickerBox === null || showColorPickerBox === void 0 ? void 0 : showColorPickerBox.showBox)), _defineProperty(_classNames, "".concat(colorPickerPrefixCls, "-panel-chrome-no-hue"), !(showColorPickerBox === null || showColorPickerBox === void 0 ? void 0 : showColorPickerBox.showHue)), _defineProperty(_classNames, "".concat(colorPickerPrefixCls, "-panel-chrome-no-opacity"), !(showColorPickerBox === null || showColorPickerBox === void 0 ? void 0 : showColorPickerBox.showOpacity)), _classNames));
@@ -430,7 +433,7 @@ var ColorPickerPanel = function ColorPickerPanel(props) {
     onClick: handleClearClick
   }), React.createElement("span", {
     className: panelClearColorText
-  }, "\u65E0\u989C\u8272\u586B\u5145")), functionalColor && showSwitch && React.createElement("div", {
+  }, colorPickerLangMsg === null || colorPickerLangMsg === void 0 ? void 0 : colorPickerLangMsg.noColor)), functionalColor && showSwitch && React.createElement("div", {
     className: panelFollowThemeCls
   }, React.createElement("span", null, (switchName === null || switchName === void 0 ? void 0 : switchName.internationalName) && locale.getLangMsg('ColorPicker', switchName.internationalName) || switchName.name), React.createElement(Switch, {
     checked: isFollow,
@@ -497,7 +500,7 @@ var ColorPickerPanel = function ColorPickerPanel(props) {
     className: historicalColorBoxCls
   }, React.createElement("div", {
     className: historicalColorBoxTitleCls
-  }, "\u6700\u8FD1\u4F7F\u7528\u989C\u8272"), React.createElement("div", {
+  }, colorPickerLangMsg === null || colorPickerLangMsg === void 0 ? void 0 : colorPickerLangMsg.recentColor), React.createElement("div", {
     className: historicalColorBoxContainerCls
   }, checkUserPresetColor(historicalColor) && _mapInstanceProperty(_context4 = presetColorToHEX(historicalColor)).call(_context4, function (colorValue, i) {
     return React.createElement("li", {
@@ -517,7 +520,7 @@ var ColorPickerPanel = function ColorPickerPanel(props) {
     className: colorBoxCls
   }, historicalColor && (historicalColor === null || historicalColor === void 0 ? void 0 : historicalColor.length) > 0 && React.createElement("div", {
     className: colorBoxTitleCls
-  }, "\u63A8\u8350\u8272"), React.createElement("div", {
+  }, colorPickerLangMsg === null || colorPickerLangMsg === void 0 ? void 0 : colorPickerLangMsg.recommendColor), React.createElement("div", {
     className: colorBoxContainerCls
   }, _mapInstanceProperty(_context5 = checkUserPresetColor(presetColor) && presetColorToHEX(presetColor) || systemPresetColor).call(_context5, function (colorValue, i) {
     return React.createElement("li", {

package/es/color-picker/style/index.css

@@ -714,6 +714,9 @@
 .kd-color-picker-rtl.kd-color-picker-pop .kd-color-picker-panel-historical-color-box-container-ie11 li:nth-child(-n + 12) {
   margin-top: 0;
 }
+.kd-color-picker-rtl.kd-color-picker-container-pure .kd-input-wrapper.kd-color-picker-input .kd-input-prefix {
+  margin: 0;
+}
 .kd-color-picker-rtl .kd-color-picker-panel-chrome > div:last-child .flexbox-fix:first-child > div:first-child > div {
   margin-right: 4px !important;
   margin-left: 0 !important;

package/es/color-picker/style/index.less

@@ -675,6 +675,13 @@
       }
     }
   }
+  &.@{color-picker-prefix-cls}-container-pure {
+    .@{kd-prefix}-input-wrapper.@{color-picker-prefix-cls}-input {
+      .@{kd-prefix}-input-prefix {
+        margin: 0;
+      }
+    }
+  }
   .@{color-picker-prefix-cls}-panel {
     &-chrome {
       & > div:last-child {

package/es/date-picker/style/index.css

@@ -989,3 +989,6 @@
 .kd-date-picker-rtl .kd-date-picker-container .kd-date-picker-ranges {
   text-align: right;
 }
+.kd-date-picker-rtl .kd-date-picker-warpper .kd-date-picker-time .kd-date-picker-content {
+  direction: ltr;
+}

package/es/date-picker/style/index.less

@@ -895,4 +895,11 @@
       text-align: right;
     }
   }
+  .@{datePicker-prefix-cls}-warpper {
+    .@{datePicker-prefix-cls}-time {
+      .@{datePicker-prefix-cls}-content {
+        direction: ltr;
+      }
+    }
+  }
 }

package/es/dropdown/dropdown.js

@@ -135,7 +135,7 @@ var Dropdown = React.forwardRef(function (props, ref) {
       animation: 'none'
     }, popperStyle),
     onVisibleChange: handleVisibleChange,
-    placement: placement || (direction === 'rtl' ? 'bottomRight' : 'bottomLeft')
+    placement: typeof props.placement !== 'undefined' ? placement : direction === 'rtl' ? 'bottomRight' : placement
   });
   return usePopper(child, menuElement, popperProps);
 });

package/es/locale/en-US.d.ts

@@ -65,6 +65,9 @@ declare const locale: {
     'CityPicker.tabsInternation': string;
     'CityPicker.title': string;
     'ColorPicker.followFunctionalColor': string;
+    'ColorPicker.noColor': string;
+    'ColorPicker.recentColor': string;
+    'ColorPicker.recommendColor': string;
     'Search.placeholder': string;
     'Search.desc': string[];
     'Search.nplDesc': string;

package/es/locale/en-US.js

@@ -65,6 +65,9 @@ var locale = {
   'CityPicker.tabsInternation': 'International/China HK-MO-TW',
   'CityPicker.title': 'City',
   'ColorPicker.followFunctionalColor': 'Follow theme color',
+  'ColorPicker.noColor': 'No color fill',
+  'ColorPicker.recentColor': 'Recently used color',
+  'ColorPicker.recommendColor': 'Recommended color',
   'Search.placeholder': 'Please enter search content',
   'Search.desc': ["Space means 'or', Enter means 'and'"],
   'Search.nplDesc': 'Smart search',

package/es/locale/locale.d.ts

@@ -72,6 +72,9 @@ declare class LocaleCache {
         'CityPicker.tabsInternation': string;
         'CityPicker.title': string;
         'ColorPicker.followFunctionalColor': string;
+        'ColorPicker.noColor': string;
+        'ColorPicker.recentColor': string;
+        'ColorPicker.recommendColor': string;
         'Search.placeholder': string;
         'Search.desc': string[];
         'Search.nplDesc': string;

package/es/locale/zh-CN.d.ts

@@ -44,6 +44,9 @@ declare const locale: {
     'CityPicker.tabsInternation': string;
     'CityPicker.title': string;
     'ColorPicker.followFunctionalColor': string;
+    'ColorPicker.noColor': string;
+    'ColorPicker.recentColor': string;
+    'ColorPicker.recommendColor': string;
     'Search.placeholder': string;
     'Search.desc': string[];
     'Search.nplDesc': string;

package/es/locale/zh-CN.js

@@ -48,6 +48,9 @@ var locale = _extends(_extends({
   'CityPicker.tabsInternation': '国际/中国港澳台',
   'CityPicker.title': '城市',
   'ColorPicker.followFunctionalColor': '跟随功能色',
+  'ColorPicker.noColor': '无颜色填充',
+  'ColorPicker.recentColor': '最近使用颜色',
+  'ColorPicker.recommendColor': '推荐色',
   'Search.placeholder': '请输入需要搜索的内容',
   'Search.desc': ['空格代表"或"，回车代表"且"'],
   'Search.nplDesc': '智能搜索',

package/es/modal/modal.js

@@ -121,7 +121,7 @@ var InternalModal = function InternalModal(props, ref) {
     modalContainer = document.body;
   }
   var _useState3 = useState(modalContainer && !overroll ? {
-      x: -(width / 2),
+      x: direction === 'rtl' ? width / 2 : -(width / 2),
       y: -(height / 2)
     } : {
       x: 0,

package/es/modal/style/index.css

@@ -358,3 +358,7 @@
   margin-left: var(--kd-c-modal-footer-button-spacing, 12px);
   margin-right: 0;
 }
+.kd-modal-rtl .kd-modal-has-container-box {
+  right: 50%;
+  left: auto;
+}

package/es/modal/style/index.less

@@ -247,4 +247,8 @@
       }
     }
   }
+  .@{modal-prefix-cls}-has-container-box {
+    right: 50%;
+    left: auto;
+  }
 }

package/es/progress/style/index.css

@@ -278,10 +278,6 @@
   padding-right: 0;
   padding-left: calc(var(--kd-c-progress-line-text-font-size, 16px) * 2 + 8px);
 }
-.kd-progress-rtl .kd-progress-inner {
-  -webkit-transform: rotateY(180deg);
-          transform: rotateY(180deg);
-}
 .kd-progress-rtl .kd-progress-text {
   margin-right: var(--kd-c-progress-line-text-spacing-margin-left, 8px);
   margin-left: 0;

package/es/progress/style/index.less

@@ -215,9 +215,9 @@
       padding-left: calc(@progress-line-text-font-size * 2 + 8px);
     }
   }
-  .@{progress-prefix-cls}-inner {
-    transform: rotateY(180deg);
-  }
+  // .@{progress-prefix-cls}-inner {
+  //   // transform: rotateY(180deg);
+  // }
   .@{progress-prefix-cls}-text {
     margin-right: @progress-line-text-margin-left;
     margin-left: 0;

package/es/select/select.js

@@ -908,7 +908,7 @@ var InternalSelect = function InternalSelect(props, ref) {
   };
   var popperProps = _extends(_extends({}, selectProps), {
     prefixCls: _concatInstanceProperty(_context5 = _concatInstanceProperty(_context6 = "".concat(selectPrefixCls, "-dropdown-panel")).call(_context6, isMultiple ? " ".concat(selectPrefixCls, "-multiple-dropdown-panel") : '', " ")).call(_context5, rtlCls),
-    placement: direction === 'rtl' ? 'bottomRight' : 'bottomLeft',
+    placement: 'bottomLeft',
     popperStyle: catchStyle(),
     defaultVisible: optionShow,
     visible: optionShow,

package/es/transfer/list.js

@@ -37,8 +37,7 @@ var ITransferList = function ITransferList(props, ref) {
     pagination = props.pagination,
     footer = props.footer,
     showRemove = props.showRemove,
-    placeholder = props.placeholder,
-    rtl = props.rtl;
+    placeholder = props.placeholder;
   var _useState = useState(''),
     _useState2 = _slicedToArray(_useState, 2),
     filterValue = _useState2[0],
@@ -135,11 +134,11 @@ var ITransferList = function ITransferList(props, ref) {
     }, search, bodyNode);
   };
   var getSelectAllLabel = function getSelectAllLabel(selectedCount, totalCount) {
-    var _context2, _context3;
+    var _context2;
     if (showRemove) {
       return React.createElement(React.Fragment, null, "".concat(totalCount));
     }
-    return rtl ? React.createElement(React.Fragment, null, _concatInstanceProperty(_context2 = "(".concat(totalCount, "/")).call(_context2, selectedCount, ")")) : React.createElement(React.Fragment, null, _concatInstanceProperty(_context3 = "(".concat(selectedCount, "/")).call(_context3, totalCount, ")"));
+    return React.createElement(React.Fragment, null, _concatInstanceProperty(_context2 = "(".concat(totalCount, "/")).call(_context2, selectedCount, ")"));
   };
   var getCheckStatus = function getCheckStatus(filteredItems) {
     if (checkedKeys.length === 0) {
@@ -162,10 +161,10 @@ var ITransferList = function ITransferList(props, ref) {
       checked: checkedAll,
       indeterminate: checkStatus === 'part',
       onChange: function onChange() {
-        var _context4;
-        onItemSelectAll(_mapInstanceProperty(_context4 = _filterInstanceProperty(filteredItems).call(filteredItems, function (item) {
+        var _context3;
+        onItemSelectAll(_mapInstanceProperty(_context3 = _filterInstanceProperty(filteredItems).call(filteredItems, function (item) {
           return !item.disabled;
-        })).call(_context4, function (_ref) {
+        })).call(_context3, function (_ref) {
           var key = _ref.key;
           return key;
         }), !checkedAll);

package/es/transfer/transfer.js

@@ -270,8 +270,7 @@ var InternalTransfer = function InternalTransfer(props, ref) {
     pagination: mergedPagination,
     noDataContent: handleNoDataContent(noDataContent, 'left'),
     footer: footer,
-    ref: leftListRef,
-    rtl: direction === 'rtl'
+    ref: leftListRef
   }), React.createElement(Operation, {
     className: "".concat(transferPrefixCls, "-operation"),
     rightActive: rightActive,

package/lib/button/group.js

@@ -46,7 +46,8 @@ var InternalButtonGroup = function InternalButtonGroup(props, ref) {
     buttonType = buttonGoupProps.buttonType,
     disabled = buttonGoupProps.disabled,
     onVisibleChange = buttonGoupProps.onVisibleChange,
-    loading = buttonGoupProps.loading;
+    loading = buttonGoupProps.loading,
+    placement = buttonGoupProps.placement;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     optionShow = _useState2[0],
@@ -123,7 +124,7 @@ var InternalButtonGroup = function InternalButtonGroup(props, ref) {
     onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(visible);
   };
   var popperProps = (0, _extends2.default)((0, _extends2.default)({
-    placement: direction === 'rtl' ? 'bottomRight' : 'bottomLeft',
+    placement: placement || (direction === 'rtl' ? 'bottomRight' : 'bottomLeft'),
     trigger: 'click',
     gap: 0
   }, buttonGoupProps), {

package/lib/city-picker/city-picker.js

@@ -499,7 +499,7 @@ var InternalSelect = function InternalSelect(props, ref) {
   };
   var popperProps = (0, _extends2.default)((0, _extends2.default)({}, selectProps), {
     prefixCls: (0, _classnames.default)("".concat(selectPrefixCls, "-dropdown"), rtlCls),
-    placement: direction === 'rtl' ? 'bottomRight' : 'bottomLeft',
+    placement: 'bottomLeft',
     popperStyle: catchStyle(),
     defaultVisible: optionShow,
     visible: optionShow,

package/lib/city-picker/option.js

@@ -33,8 +33,7 @@ var InternalOption = function InternalOption(props, ref) {
     name = city.name;
   var _useContext = (0, _react.useContext)(_ConfigContext.default),
     getPrefixCls = _useContext.getPrefixCls,
-    prefixCls = _useContext.prefixCls,
-    direction = _useContext.direction;
+    prefixCls = _useContext.prefixCls;
   var selectOptionPrefixCls = getPrefixCls(prefixCls, 'city-picker-list-item');
   var isSelected = id !== undefined ? id === value : false;
   var optionCls = (0, _classnames.default)(selectOptionPrefixCls, className, (_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(selectOptionPrefixCls, "-selected"), isSelected), (0, _defineProperty2.default)(_classNames, "".concat(selectOptionPrefixCls, "-disabled"), disabled), (0, _defineProperty2.default)(_classNames, "".concat(selectOptionPrefixCls, "-active"), activeIndex === index), _classNames));
@@ -52,11 +51,7 @@ var InternalOption = function InternalOption(props, ref) {
     title: name,
     onClick: handleClick,
     onMouseEnter: handleOnMouseEnter
-  }, typeof itemRender === 'function' ? itemRender(city) : direction === 'rtl' ? _react.default.createElement(_react.default.Fragment, null, _react.default.createElement("span", {
-    className: "".concat(selectOptionPrefixCls, "-info")
-  }, renderCityInfo === null || renderCityInfo === void 0 ? void 0 : renderCityInfo(city, true)), _react.default.createElement("span", {
-    className: "".concat(selectOptionPrefixCls, "-content")
-  }, children)) : _react.default.createElement(_react.default.Fragment, null, _react.default.createElement("span", {
+  }, typeof itemRender === 'function' ? itemRender(city) : _react.default.createElement(_react.default.Fragment, null, _react.default.createElement("span", {
     className: "".concat(selectOptionPrefixCls, "-content")
   }, children), _react.default.createElement("span", {
     className: "".concat(selectOptionPrefixCls, "-info")

package/lib/color-picker/color-picker-panel.js

@@ -94,6 +94,9 @@ var ColorPickerPanel = function ColorPickerPanel(props) {
     prefixCls = _useContext.prefixCls,
     locale = _useContext.locale,
     direction = _useContext.direction;
+  var colorPickerLangMsg = locale.getCompLangMsg({
+    componentName: 'ColorPicker'
+  });
   var colorPickerPrefixCls = getPrefixCls(prefixCls, 'color-picker');
   var panelCls = (0, _classnames.default)("".concat(colorPickerPrefixCls, "-panel"));
   var panelChromePickerCls = (0, _classnames.default)("".concat(colorPickerPrefixCls, "-panel-chrome"), (_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(colorPickerPrefixCls, "-panel-chrome-no-box"), !(showColorPickerBox === null || showColorPickerBox === void 0 ? void 0 : showColorPickerBox.showBox)), (0, _defineProperty2.default)(_classNames, "".concat(colorPickerPrefixCls, "-panel-chrome-no-hue"), !(showColorPickerBox === null || showColorPickerBox === void 0 ? void 0 : showColorPickerBox.showHue)), (0, _defineProperty2.default)(_classNames, "".concat(colorPickerPrefixCls, "-panel-chrome-no-opacity"), !(showColorPickerBox === null || showColorPickerBox === void 0 ? void 0 : showColorPickerBox.showOpacity)), _classNames));
@@ -442,7 +445,7 @@ var ColorPickerPanel = function ColorPickerPanel(props) {
     onClick: handleClearClick
   }), _react.default.createElement("span", {
     className: panelClearColorText
-  }, "\u65E0\u989C\u8272\u586B\u5145")), functionalColor && showSwitch && _react.default.createElement("div", {
+  }, colorPickerLangMsg === null || colorPickerLangMsg === void 0 ? void 0 : colorPickerLangMsg.noColor)), functionalColor && showSwitch && _react.default.createElement("div", {
     className: panelFollowThemeCls
   }, _react.default.createElement("span", null, (switchName === null || switchName === void 0 ? void 0 : switchName.internationalName) && locale.getLangMsg('ColorPicker', switchName.internationalName) || switchName.name), _react.default.createElement(_index.Switch, {
     checked: isFollow,
@@ -509,7 +512,7 @@ var ColorPickerPanel = function ColorPickerPanel(props) {
     className: historicalColorBoxCls
   }, _react.default.createElement("div", {
     className: historicalColorBoxTitleCls
-  }, "\u6700\u8FD1\u4F7F\u7528\u989C\u8272"), _react.default.createElement("div", {
+  }, colorPickerLangMsg === null || colorPickerLangMsg === void 0 ? void 0 : colorPickerLangMsg.recentColor), _react.default.createElement("div", {
     className: historicalColorBoxContainerCls
   }, checkUserPresetColor(historicalColor) && (0, _map.default)(_context4 = (0, _colorFormat.presetColorToHEX)(historicalColor)).call(_context4, function (colorValue, i) {
     return _react.default.createElement("li", {
@@ -529,7 +532,7 @@ var ColorPickerPanel = function ColorPickerPanel(props) {
     className: colorBoxCls
   }, historicalColor && (historicalColor === null || historicalColor === void 0 ? void 0 : historicalColor.length) > 0 && _react.default.createElement("div", {
     className: colorBoxTitleCls
-  }, "\u63A8\u8350\u8272"), _react.default.createElement("div", {
+  }, colorPickerLangMsg === null || colorPickerLangMsg === void 0 ? void 0 : colorPickerLangMsg.recommendColor), _react.default.createElement("div", {
     className: colorBoxContainerCls
   }, (0, _map.default)(_context5 = checkUserPresetColor(presetColor) && (0, _colorFormat.presetColorToHEX)(presetColor) || _systemPresetColor.systemPresetColor).call(_context5, function (colorValue, i) {
     return _react.default.createElement("li", {

package/lib/color-picker/style/index.css

@@ -714,6 +714,9 @@
 .kd-color-picker-rtl.kd-color-picker-pop .kd-color-picker-panel-historical-color-box-container-ie11 li:nth-child(-n + 12) {
   margin-top: 0;
 }
+.kd-color-picker-rtl.kd-color-picker-container-pure .kd-input-wrapper.kd-color-picker-input .kd-input-prefix {
+  margin: 0;
+}
 .kd-color-picker-rtl .kd-color-picker-panel-chrome > div:last-child .flexbox-fix:first-child > div:first-child > div {
   margin-right: 4px !important;
   margin-left: 0 !important;

package/lib/color-picker/style/index.less

@@ -675,6 +675,13 @@
       }
     }
   }
+  &.@{color-picker-prefix-cls}-container-pure {
+    .@{kd-prefix}-input-wrapper.@{color-picker-prefix-cls}-input {
+      .@{kd-prefix}-input-prefix {
+        margin: 0;
+      }
+    }
+  }
   .@{color-picker-prefix-cls}-panel {
     &-chrome {
       & > div:last-child {

package/lib/date-picker/style/index.css

@@ -989,3 +989,6 @@
 .kd-date-picker-rtl .kd-date-picker-container .kd-date-picker-ranges {
   text-align: right;
 }
+.kd-date-picker-rtl .kd-date-picker-warpper .kd-date-picker-time .kd-date-picker-content {
+  direction: ltr;
+}

package/lib/date-picker/style/index.less

@@ -895,4 +895,11 @@
       text-align: right;
     }
   }
+  .@{datePicker-prefix-cls}-warpper {
+    .@{datePicker-prefix-cls}-time {
+      .@{datePicker-prefix-cls}-content {
+        direction: ltr;
+      }
+    }
+  }
 }

package/lib/dropdown/dropdown.js

@@ -147,7 +147,7 @@ var Dropdown = React.forwardRef(function (props, ref) {
       animation: 'none'
     }, popperStyle),
     onVisibleChange: handleVisibleChange,
-    placement: placement || (direction === 'rtl' ? 'bottomRight' : 'bottomLeft')
+    placement: typeof props.placement !== 'undefined' ? placement : direction === 'rtl' ? 'bottomRight' : placement
   });
   return (0, _usePopper.default)(child, menuElement, popperProps);
 });

package/lib/locale/en-US.d.ts

@@ -65,6 +65,9 @@ declare const locale: {
     'CityPicker.tabsInternation': string;
     'CityPicker.title': string;
     'ColorPicker.followFunctionalColor': string;
+    'ColorPicker.noColor': string;
+    'ColorPicker.recentColor': string;
+    'ColorPicker.recommendColor': string;
     'Search.placeholder': string;
     'Search.desc': string[];
     'Search.nplDesc': string;

package/lib/locale/en-US.js

@@ -71,6 +71,9 @@ var locale = {
   'CityPicker.tabsInternation': 'International/China HK-MO-TW',
   'CityPicker.title': 'City',
   'ColorPicker.followFunctionalColor': 'Follow theme color',
+  'ColorPicker.noColor': 'No color fill',
+  'ColorPicker.recentColor': 'Recently used color',
+  'ColorPicker.recommendColor': 'Recommended color',
   'Search.placeholder': 'Please enter search content',
   'Search.desc': ["Space means 'or', Enter means 'and'"],
   'Search.nplDesc': 'Smart search',

package/lib/locale/locale.d.ts

@@ -72,6 +72,9 @@ declare class LocaleCache {
         'CityPicker.tabsInternation': string;
         'CityPicker.title': string;
         'ColorPicker.followFunctionalColor': string;
+        'ColorPicker.noColor': string;
+        'ColorPicker.recentColor': string;
+        'ColorPicker.recommendColor': string;
         'Search.placeholder': string;
         'Search.desc': string[];
         'Search.nplDesc': string;

package/lib/locale/zh-CN.d.ts

@@ -44,6 +44,9 @@ declare const locale: {
     'CityPicker.tabsInternation': string;
     'CityPicker.title': string;
     'ColorPicker.followFunctionalColor': string;
+    'ColorPicker.noColor': string;
+    'ColorPicker.recentColor': string;
+    'ColorPicker.recommendColor': string;
     'Search.placeholder': string;
     'Search.desc': string[];
     'Search.nplDesc': string;

package/lib/locale/zh-CN.js

@@ -55,6 +55,9 @@ var locale = (0, _extends2.default)((0, _extends2.default)({
   'CityPicker.tabsInternation': '国际/中国港澳台',
   'CityPicker.title': '城市',
   'ColorPicker.followFunctionalColor': '跟随功能色',
+  'ColorPicker.noColor': '无颜色填充',
+  'ColorPicker.recentColor': '最近使用颜色',
+  'ColorPicker.recommendColor': '推荐色',
   'Search.placeholder': '请输入需要搜索的内容',
   'Search.desc': ['空格代表"或"，回车代表"且"'],
   'Search.nplDesc': '智能搜索',

package/lib/modal/modal.js

@@ -135,7 +135,7 @@ var InternalModal = function InternalModal(props, ref) {
     modalContainer = document.body;
   }
   var _useState3 = (0, _react.useState)(modalContainer && !overroll ? {
-      x: -(width / 2),
+      x: direction === 'rtl' ? width / 2 : -(width / 2),
       y: -(height / 2)
     } : {
       x: 0,

package/lib/modal/style/index.css

@@ -358,3 +358,7 @@
   margin-left: var(--kd-c-modal-footer-button-spacing, 12px);
   margin-right: 0;
 }
+.kd-modal-rtl .kd-modal-has-container-box {
+  right: 50%;
+  left: auto;
+}

package/lib/modal/style/index.less

@@ -247,4 +247,8 @@
       }
     }
   }
+  .@{modal-prefix-cls}-has-container-box {
+    right: 50%;
+    left: auto;
+  }
 }

package/lib/progress/style/index.css

@@ -278,10 +278,6 @@
   padding-right: 0;
   padding-left: calc(var(--kd-c-progress-line-text-font-size, 16px) * 2 + 8px);
 }
-.kd-progress-rtl .kd-progress-inner {
-  -webkit-transform: rotateY(180deg);
-          transform: rotateY(180deg);
-}
 .kd-progress-rtl .kd-progress-text {
   margin-right: var(--kd-c-progress-line-text-spacing-margin-left, 8px);
   margin-left: 0;

package/lib/progress/style/index.less

@@ -215,9 +215,9 @@
       padding-left: calc(@progress-line-text-font-size * 2 + 8px);
     }
   }
-  .@{progress-prefix-cls}-inner {
-    transform: rotateY(180deg);
-  }
+  // .@{progress-prefix-cls}-inner {
+  //   // transform: rotateY(180deg);
+  // }
   .@{progress-prefix-cls}-text {
     margin-right: @progress-line-text-margin-left;
     margin-left: 0;

package/lib/select/select.js

@@ -920,7 +920,7 @@ var InternalSelect = function InternalSelect(props, ref) {
   };
   var popperProps = (0, _extends2.default)((0, _extends2.default)({}, selectProps), {
     prefixCls: (0, _concat.default)(_context5 = (0, _concat.default)(_context6 = "".concat(selectPrefixCls, "-dropdown-panel")).call(_context6, isMultiple ? " ".concat(selectPrefixCls, "-multiple-dropdown-panel") : '', " ")).call(_context5, rtlCls),
-    placement: direction === 'rtl' ? 'bottomRight' : 'bottomLeft',
+    placement: 'bottomLeft',
     popperStyle: catchStyle(),
     defaultVisible: optionShow,
     visible: optionShow,

package/lib/transfer/list.js

@@ -49,8 +49,7 @@ var ITransferList = function ITransferList(props, ref) {
     pagination = props.pagination,
     footer = props.footer,
     showRemove = props.showRemove,
-    placeholder = props.placeholder,
-    rtl = props.rtl;
+    placeholder = props.placeholder;
   var _useState = (0, _react.useState)(''),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     filterValue = _useState2[0],
@@ -147,11 +146,11 @@ var ITransferList = function ITransferList(props, ref) {
     }, search, bodyNode);
   };
   var getSelectAllLabel = function getSelectAllLabel(selectedCount, totalCount) {
-    var _context2, _context3;
+    var _context2;
     if (showRemove) {
       return _react.default.createElement(_react.default.Fragment, null, "".concat(totalCount));
     }
-    return rtl ? _react.default.createElement(_react.default.Fragment, null, (0, _concat.default)(_context2 = "(".concat(totalCount, "/")).call(_context2, selectedCount, ")")) : _react.default.createElement(_react.default.Fragment, null, (0, _concat.default)(_context3 = "(".concat(selectedCount, "/")).call(_context3, totalCount, ")"));
+    return _react.default.createElement(_react.default.Fragment, null, (0, _concat.default)(_context2 = "(".concat(totalCount, "/")).call(_context2, selectedCount, ")"));
   };
   var getCheckStatus = function getCheckStatus(filteredItems) {
     if (checkedKeys.length === 0) {
@@ -174,10 +173,10 @@ var ITransferList = function ITransferList(props, ref) {
       checked: checkedAll,
       indeterminate: checkStatus === 'part',
       onChange: function onChange() {
-        var _context4;
-        onItemSelectAll((0, _map.default)(_context4 = (0, _filter.default)(filteredItems).call(filteredItems, function (item) {
+        var _context3;
+        onItemSelectAll((0, _map.default)(_context3 = (0, _filter.default)(filteredItems).call(filteredItems, function (item) {
           return !item.disabled;
-        })).call(_context4, function (_ref) {
+        })).call(_context3, function (_ref) {
           var key = _ref.key;
           return key;
         }), !checkedAll);