@kdcloudjs/kdesign 1.8.29 → 1.8.31

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

@@ -367,3 +367,70 @@
     }
   }
 }
+
+.@{city-picker-prefix-cls}-rtl {
+  direction: rtl;
+  &.@{city-picker-prefix-cls} {
+    .@{city-picker-prefix-cls}-description {
+      text-align: right;
+    }
+    .@{city-picker-prefix-cls}-selector {
+      .@{city-picker-prefix-cls}-wrapper {
+        padding-right: 0;
+        padding-left: 24px;
+      }
+    }
+    .@{city-picker-prefix-cls}-placeholder {
+      position: absolute;
+      left: 24px;
+      right: 0;
+      top: 0;
+      bottom: 0;
+    }
+
+    .@{city-picker-prefix-cls}-bordered {
+      padding-right: @city-picker-bordered !important;
+      padding-left: auto !important;
+      .@{city-picker-prefix-cls}-suffix {
+        padding-right: 8px;
+        padding-left: auto;
+      }
+
+      .@{city-picker-prefix-cls}-placeholder {
+        padding-right: @city-picker-bordered;
+      }
+    }
+
+    .@{city-picker-prefix-cls}-suffix {
+      left: 0;
+      right: auto;
+      top: 0;
+      bottom: 0;
+      position: absolute;
+      display: flex;
+      margin-right: 8px;
+    }
+
+    
+
+    .@{city-picker-prefix-cls}-disabled {
+      &.@{city-picker-prefix-cls}-bordered {
+        padding-right: auto;
+        padding-left: @city-picker-bordered;
+      }
+    }
+
+    .@{city-picker-prefix-cls}-content {
+      &-item {
+        position: absolute;
+        right: 0;
+        left: auto;
+      }
+
+      &-info {
+        text-align: left;
+        .over();
+      }
+    }
+  }
+}

package/es/collapse/collapse.js

@@ -17,7 +17,8 @@ var InternalCollapse = React.forwardRef(function (props, ref) {
   var _React$useContext = React.useContext(ConfigContext),
     getPrefixCls = _React$useContext.getPrefixCls,
     prefixCls = _React$useContext.prefixCls,
-    userDefaultProps = _React$useContext.compDefaultProps;
+    userDefaultProps = _React$useContext.compDefaultProps,
+    direction = _React$useContext.direction;
   var _getCompProps = getCompProps('Collapse', userDefaultProps, props),
     accordion = _getCompProps.accordion,
     activeKey = _getCompProps.activeKey,
@@ -31,6 +32,7 @@ var InternalCollapse = React.forwardRef(function (props, ref) {
     children = _getCompProps.children,
     customPrefixcls = _getCompProps.prefixCls;
   var CollapsePrefixCls = getPrefixCls(prefixCls, 'collapse', customPrefixcls);
+  var rtlCls = direction === 'rtl' ? "".concat(CollapsePrefixCls, "-rtl") : null;
   var _useState = useState([]),
     _useState2 = _slicedToArray(_useState, 2),
     innerKey = _useState2[0],
@@ -97,7 +99,7 @@ var InternalCollapse = React.forwardRef(function (props, ref) {
       }, item.props));
     });
   };
-  var rootClassName = classNames(className, _defineProperty({}, "".concat(CollapsePrefixCls), true));
+  var rootClassName = classNames(className, rtlCls, _defineProperty({}, "".concat(CollapsePrefixCls), true));
   var collapseRef = ref || React.createRef();
   return React.createElement("div", {
     className: rootClassName,

package/es/collapse/style/index.css

@@ -262,3 +262,27 @@
   cursor: not-allowed !important;
   color: var(--kd-c-collapse-color-disabled, raba(178, 178, 178, 1));
 }
+.kd-collapse-rtl {
+  direction: rtl;
+}
+.kd-collapse-rtl .kd-collapse-panel-top {
+  padding: 8px 28px 8px 50px;
+}
+.kd-collapse-rtl .kd-collapse-panel-icon {
+  margin-left: var(--kd-c-collapse-spacing-margin-right, 6px);
+  margin-right: 0;
+}
+.kd-collapse-rtl .kd-collapse-panel-animation-expand {
+  -webkit-transform: rotate(180deg);
+          transform: rotate(180deg);
+}
+.kd-collapse-rtl .kd-collapse-panel-children > div {
+  text-align: right;
+}
+.kd-collapse-rtl .kd-collapse-panel-children-hide > div {
+  text-align: right;
+}
+.kd-collapse-rtl .kd-collapse-panel-middle {
+  margin-right: 22px;
+  margin-left: 0;
+}

package/es/collapse/style/index.less

@@ -117,3 +117,29 @@
     }
   }
 }
+
+.@{collapse-prefix-cls}-rtl {
+  direction: rtl;
+  .@{collapse-prefix-cls}-panel {
+    &-top {
+      padding: 8px 28px 8px 50px;
+    }
+    &-icon {
+      margin-left: @collapse-icon-margin-right;
+      margin-right: 0;
+    }
+    &-animation-expand {
+      transform: rotate(180deg);
+    }
+    &-children > div {
+      text-align: right;
+    }
+    &-children-hide > div {
+      text-align: right;
+    }
+    &-middle {
+      margin-right: 22px;
+      margin-left: 0;
+    }
+  }
+}

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

@@ -29,7 +29,8 @@ var InternalColorPicker = function InternalColorPicker(props, ref) {
   var _useContext = useContext(ConfigContext),
     getPrefixCls = _useContext.getPrefixCls,
     prefixCls = _useContext.prefixCls,
-    userDefaultProps = _useContext.compDefaultProps;
+    userDefaultProps = _useContext.compDefaultProps,
+    direction = _useContext.direction;
   var colorPickerProps = getCompProps('ColorPicker', userDefaultProps, props);
   var value = colorPickerProps.value,
     className = colorPickerProps.className,
@@ -106,8 +107,9 @@ var InternalColorPicker = function InternalColorPicker(props, ref) {
     clickedHistoricalColorIndex = _useState22[0],
     setClickedHistoricalColorIndex = _useState22[1];
   var colorPickerPrefixCls = getPrefixCls(prefixCls, 'color-picker');
-  var popUpLayer = classNames(getPrefixCls(prefixCls, 'color-picker-pop'), popperClassName);
-  var containerCls = classNames("".concat(colorPickerPrefixCls, "-container"), className, _defineProperty({}, "".concat(colorPickerPrefixCls, "-container-pure"), pure));
+  var rtlCls = direction === 'rtl' ? "".concat(colorPickerPrefixCls, "-rtl") : null;
+  var popUpLayer = classNames(getPrefixCls(prefixCls, 'color-picker-pop'), rtlCls, popperClassName);
+  var containerCls = classNames("".concat(colorPickerPrefixCls, "-container"), rtlCls, className, _defineProperty({}, "".concat(colorPickerPrefixCls, "-container-pure"), pure));
   var inputCls = classNames("".concat(colorPickerPrefixCls, "-input"));
   var inputRef = useRef(null);
   var showColorPickerPanel = showColorTransfer || typeof showPresetColor === 'boolean' && showPresetColor && ((presetColor === null || presetColor === void 0 ? void 0 : presetColor.length) || systemPresetColor.length) || typeof showPresetColor === 'undefined' || showClear || (historicalColor === null || historicalColor === void 0 ? void 0 : historicalColor.length) || (functionalColor === null || functionalColor === void 0 ? void 0 : functionalColor.length) && showSwitch || (showColorPickerBox === null || showColorPickerBox === void 0 ? void 0 : showColorPickerBox.showBox) || (showColorPickerBox === null || showColorPickerBox === void 0 ? void 0 : showColorPickerBox.showHue) || (showColorPickerBox === null || showColorPickerBox === void 0 ? void 0 : showColorPickerBox.showOpacity);
@@ -298,7 +300,7 @@ var InternalColorPicker = function InternalColorPicker(props, ref) {
   });
   var popperProps = _extends(_extends({}, otherProps), {
     popperClassName: popUpLayer,
-    placement: 'bottomLeft',
+    placement: direction === 'rtl' ? 'bottomRight' : 'bottomLeft',
     defaultVisible: showPanel,
     visible: showPanel,
     onVisibleChange: null,

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

@@ -202,7 +202,7 @@
           box-sizing: border-box;
   width: var(--kd-c-color-picker-panel-sizing-width, 304px);
   padding: 4px 12px 16px;
-  background: #FFFFFF;
+  background: #ffffff;
   -webkit-box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15);
           box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15);
   border-radius: 2px;
@@ -406,7 +406,7 @@
   position: absolute;
   width: 64px !important;
   min-width: unset !important;
-  background: #FFFFFF;
+  background: #ffffff;
   right: 0;
   left: unset !important;
   -webkit-box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
@@ -510,7 +510,7 @@
 .kd-color-picker-pop .kd-color-picker-panel-historical-color-box-container-ie11 li:nth-child(12n) {
   margin-right: 0;
 }
-.kd-color-picker-pop .kd-color-picker-panel-historical-color-box-container-ie11 li:nth-child(-n+12) {
+.kd-color-picker-pop .kd-color-picker-panel-historical-color-box-container-ie11 li:nth-child(-n + 12) {
   margin-top: 0;
 }
 .kd-color-picker-pop .kd-color-picker-panel-historical-color-box-container li {
@@ -571,7 +571,7 @@
 .kd-color-picker-pop .kd-color-picker-panel-color-box-container-ie11 li:nth-child(12n) {
   margin-right: 0;
 }
-.kd-color-picker-pop .kd-color-picker-panel-color-box-container-ie11 li:nth-child(-n+12) {
+.kd-color-picker-pop .kd-color-picker-panel-color-box-container-ie11 li:nth-child(-n + 12) {
   margin-top: 0;
 }
 .kd-color-picker-pop .kd-color-picker-panel-color-box-container li {
@@ -605,3 +605,128 @@
 .kd-color-picker-pop .kd-color-picker-panel-color-box-container li:hover .square {
   display: block;
 }
+.kd-color-picker-rtl {
+  direction: rtl;
+}
+.kd-color-picker-rtl .kd-color-picker-input .kd-input-prefix {
+  margin-right: auto;
+  margin-left: 3px;
+}
+.kd-color-picker-rtl.kd-color-picker-pop .kd-color-picker-panel {
+  -webkit-transform-origin: top left;
+          transform-origin: top left;
+}
+.kd-color-picker-rtl.kd-color-picker-pop .kd-color-picker-panel-clear-box {
+  margin-left: 4px;
+}
+.kd-color-picker-rtl.kd-color-picker-pop .kd-color-picker-panel-switch span {
+  vertical-align: middle;
+  margin-right: 9px;
+}
+.kd-color-picker-rtl.kd-color-picker-pop .kd-color-picker-panel-container {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: nowrap;
+      flex-wrap: nowrap;
+}
+.kd-color-picker-rtl.kd-color-picker-pop .kd-color-picker-panel-container-select {
+  margin-left: 8px;
+  margin-right: 0;
+}
+.kd-color-picker-rtl.kd-color-picker-pop .kd-color-picker-panel-container-select .kd-select-bordered {
+  border-radius: 2px;
+  width: var(--kd-c-color-picker-panel-select-sizing-width, 212px);
+  height: var(--kd-c-color-picker-panel-select-sizing-height, 28px);
+  min-height: 28px;
+  padding: 0 28px 0 0;
+}
+.kd-color-picker-rtl.kd-color-picker-pop .kd-color-picker-panel-container-select .active-option {
+  background-color: var(--kd-c-color-picker-panel-option-color-background-selected, var(--kd-g-color-theme-3, #e3eeff));
+}
+.kd-color-picker-rtl.kd-color-picker-pop .kd-color-picker-panel-container-input {
+  height: 28px;
+  -webkit-box-flex: 1;
+      -ms-flex: 1 1 auto;
+          flex: 1 1 auto;
+  padding: 0 8px;
+}
+.kd-color-picker-rtl.kd-color-picker-pop .kd-color-picker-panel-container-input-group {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+.kd-color-picker-rtl.kd-color-picker-pop .kd-color-picker-panel-container-input-group-item {
+  height: 28px;
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+}
+.kd-color-picker-rtl.kd-color-picker-pop .kd-color-picker-panel-container-input-group-item.active {
+  z-index: 2;
+}
+.kd-color-picker-rtl.kd-color-picker-pop .kd-color-picker-panel-container-input-group-item:first-child {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  z-index: 1;
+}
+.kd-color-picker-rtl.kd-color-picker-pop .kd-color-picker-panel-container-input-group-item:nth-child(2) {
+  margin-right: -1px;
+  margin-left: -1px;
+  border-radius: 0;
+}
+.kd-color-picker-rtl.kd-color-picker-pop .kd-color-picker-panel-container-input-group-item:nth-child(2):hover {
+  z-index: 1;
+}
+.kd-color-picker-rtl.kd-color-picker-pop .kd-color-picker-panel-container-input-group-item:last-child {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.kd-color-picker-rtl.kd-color-picker-pop .kd-color-picker-panel-container-transparent {
+  -webkit-box-flex: 0;
+      -ms-flex: 0 0 54px;
+          flex: 0 0 54px;
+  height: 28px;
+  margin-right: 8px;
+  margin-left: 0;
+  padding: 0;
+  text-align: center;
+  font-size: var(--kd-c-color-picker-panel-alpha-font-size, var(--kd-g-font-size-middle, 14px));
+}
+.kd-color-picker-rtl.kd-color-picker-pop .kd-color-picker-panel-historical-color-box-title {
+  font-size: 12px;
+  color: #666666;
+  line-height: 18px;
+  font-weight: 400;
+  margin-bottom: 8px;
+}
+.kd-color-picker-rtl.kd-color-picker-pop .kd-color-picker-panel-historical-color-box-container {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  grid-column-gap: 8px;
+  grid-row-gap: 8px;
+}
+.kd-color-picker-rtl.kd-color-picker-pop .kd-color-picker-panel-historical-color-box-container-ie11 {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+}
+.kd-color-picker-rtl.kd-color-picker-pop .kd-color-picker-panel-historical-color-box-container-ie11 li {
+  margin-right: 8px;
+  margin-top: 8px;
+}
+.kd-color-picker-rtl.kd-color-picker-pop .kd-color-picker-panel-historical-color-box-container-ie11 li:nth-child(12n) {
+  margin-right: 0;
+}
+.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-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

@@ -98,13 +98,13 @@
     box-sizing: border-box;
     width: @color-picker-panel-sizing-width;
     padding: 4px 12px 16px;
-    background: #FFFFFF;
+    background: #ffffff;
     box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15);
     border-radius: 2px;
     transform-origin: top left;
     z-index: @color-picker-panel-z-index;
 
-    &>div {
+    & > div {
       margin-top: 12px;
     }
 
@@ -174,15 +174,15 @@
       width: 278px !important;
       box-shadow: none !important;
 
-      &>div:last-child {
+      & > div:last-child {
         padding: 9px 0 4px !important;
 
         .flexbox-fix:first-child {
           display: flex;
           flex-direction: row-reverse;
 
-          &>div:first-child {
-            &>div {
+          & > div:first-child {
+            & > div {
               width: 28px !important;
               height: 28px !important;
               border-radius: 50% !important;
@@ -191,44 +191,42 @@
             }
           }
 
-          &>div:last-child {
-
+          & > div:last-child {
             .hue-horizontal {
               width: 240px !important;
               height: 12px !important;
               border-radius: 6px !important;
               padding: unset !important;
 
-              &>div>div {
+              & > div > div {
                 margin-top: 1px;
               }
             }
 
-            &>div:last-child {
-              &>div {
+            & > div:last-child {
+              & > div {
                 width: 240px !important;
                 height: 12px !important;
                 margin: unset;
 
-                &>div:first-child {
+                & > div:first-child {
                   border-radius: 6px !important;
                 }
 
-                &>div:nth-child(2) {
+                & > div:nth-child(2) {
                   border-radius: 6px !important;
                 }
 
-                &>div:last-child {
+                & > div:last-child {
                   margin: unset !important;
 
-                  &>div>div {
+                  & > div > div {
                     margin-top: 1px;
                   }
                 }
               }
             }
           }
-
         }
 
         .flexbox-fix:last-child {
@@ -237,20 +235,20 @@
       }
 
       &-no-box {
-        &>div:first-child {
+        & > div:first-child {
           display: none;
         }
       }
 
       &-no-hue {
-        &>div:last-child {
+        & > div:last-child {
           .flexbox-fix:first-child {
-            &>div:last-child {
-              &>div:first-child {
+            & > div:last-child {
+              & > div:first-child {
                 display: none;
               }
 
-              &>div:last-child {
+              & > div:last-child {
                 margin-top: 8px;
               }
             }
@@ -259,14 +257,14 @@
       }
 
       &-no-opacity {
-        &>div:last-child {
+        & > div:last-child {
           .flexbox-fix:first-child {
-            &>div:last-child {
-              &>div:last-child {
+            & > div:last-child {
+              & > div:last-child {
                 display: none;
               }
 
-              &>div:first-child {
+              & > div:first-child {
                 margin-top: 8px;
               }
             }
@@ -280,7 +278,7 @@
     }
 
     .@{color-picker-prefix-cls}-panel-chrome-no-hue.@{color-picker-prefix-cls}-panel-chrome-no-opacity {
-      &>div:last-child {
+      & > div:last-child {
         display: none;
       }
     }
@@ -334,10 +332,10 @@
             position: absolute;
             width: 64px !important;
             min-width: unset !important;
-            background: #FFFFFF;
+            background: #ffffff;
             right: 0;
             left: unset !important;
-            box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.20);
+            box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
             border-radius: 2px;
           }
 
@@ -441,7 +439,7 @@
               margin-right: 0;
             }
 
-            &:nth-child(-n+12) {
+            &:nth-child(-n + 12) {
               margin-top: 0;
             }
           }
@@ -510,7 +508,7 @@
               margin-right: 0;
             }
 
-            &:nth-child(-n+12) {
+            &:nth-child(-n + 12) {
               margin-top: 0;
             }
           }
@@ -553,3 +551,150 @@
     }
   }
 }
+
+.@{color-picker-prefix-cls}-rtl {
+  direction: rtl;
+  .@{color-picker-prefix-cls}-input {
+    .@{kd-prefix}-input-prefix {
+      margin-right: auto;
+      margin-left: 3px;
+    }
+  }
+  &.@{color-picker-prefix-cls}-pop {
+    .@{color-picker-prefix-cls}-panel {
+      transform-origin: top left;
+      &-clear {
+        &-box {
+          margin-left: 4px;
+        }
+      }
+      &-switch {
+        span {
+          vertical-align: middle;
+          margin-right: 9px;
+        }
+      }
+
+      &-container {
+        display: flex;
+        flex-wrap: nowrap;
+
+        &-select {
+          margin-left: 8px;
+          margin-right: 0;
+          .@{kd-prefix}-select-bordered {
+            border-radius: 2px;
+            width: @color-picker-panel-select-sizing-width;
+            height: @color-picker-panel-select-sizing-height;
+            min-height: 28px;
+            padding: 0 28px 0 0;
+          }
+
+          .active-option {
+            background-color: @color-picker-panel-option-color-background;
+          }
+        }
+
+        &-input {
+          height: 28px;
+          flex: 1 1 auto;
+          padding: 0 8px;
+        }
+
+        &-input-group {
+          display: flex;
+          align-items: center;
+
+          &-item {
+            height: 28px;
+            flex: 1;
+
+            &.active {
+              z-index: 2;
+            }
+
+            &:first-child {
+              border-top-right-radius: 0;
+              border-bottom-right-radius: 0;
+              z-index: 1;
+            }
+
+            &:nth-child(2) {
+              margin-right: -1px;
+              margin-left: -1px;
+              border-radius: 0;
+
+              &:hover {
+                z-index: 1;
+              }
+            }
+
+            &:last-child {
+              border-top-left-radius: 0;
+              border-bottom-left-radius: 0;
+            }
+          }
+        }
+
+        &-transparent {
+          flex: 0 0 54px;
+          height: 28px;
+          margin-right: 8px;
+          margin-left: 0;
+          padding: 0;
+          text-align: center;
+          font-size: @color-picker-panel-alpha-font-size;
+        }
+      }
+
+      &-historical-color-box {
+        &-title {
+          font-size: 12px;
+          color: #666666;
+          line-height: 18px;
+          font-weight: 400;
+          margin-bottom: 8px;
+        }
+
+        &-container {
+          display: grid;
+          grid-template-columns: repeat(12, 1fr);
+          grid-column-gap: 8px;
+          grid-row-gap: 8px;
+
+          &-ie11 {
+            display: flex;
+            flex-wrap: wrap;
+
+            li {
+              margin-right: 8px;
+              margin-top: 8px;
+
+              &:nth-child(12n) {
+                margin-right: 0;
+              }
+
+              &:nth-child(-n + 12) {
+                margin-top: 0;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  .@{color-picker-prefix-cls}-panel {
+    &-chrome {
+      & > div:last-child {
+        .flexbox-fix:first-child {
+          & > div:first-child {
+            & > div {
+              margin-right: 4px !important;
+              margin-left: 0 !important;
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/es/config-provider/ConfigContext.d.ts

@@ -1,5 +1,7 @@
 /// <reference types="react" />
 import { LocaleConfigType, CompLangMsgParams, ComponentType } from '../locale';
+export declare const DirectionTypes: ["ltr", "rtl"];
+export declare type DirectionType = typeof DirectionTypes[number];
 interface IntlUniversal {
     getCompLangMsg: (compLangMsgParams: CompLangMsgParams, customGetLangMsg?: (componentName: string, labelName: string, params: any) => any) => any;
     getLangMsg: (componentName: ComponentType | string, labelName: string, params?: any) => string | React.ReactNode[];
@@ -10,6 +12,7 @@ export interface IConfigProps {
     prefixCls?: string;
     localeConfig?: LocaleConfigType;
     locale?: IntlUniversal;
+    direction?: DirectionType;
 }
 export interface IContextConfigProps {
     getPrefixCls?: (configPrefixCls?: string, suffixCls?: string, customizePrefixCls?: string) => string;
@@ -17,6 +20,7 @@ export interface IContextConfigProps {
     prefixCls?: string;
     localeConfig?: LocaleConfigType;
     locale: IntlUniversal;
+    direction?: DirectionType;
 }
 declare const ConfigContext: import("react").Context<IContextConfigProps>;
 export default ConfigContext;