@kdcloudjs/kdesign 1.8.15 → 1.8.16

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

@@ -8,44 +8,57 @@
   position: relative;
   width: @color-picker-input-sizing-width;
 
+  &-pure {
+    width: 28px;
+
+    .@{kd-prefix}-input-wrapper.@{color-picker-prefix-cls}-input {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+
+      .@{kd-prefix}-input-prefix {
+        margin-right: 0;
+      }
+
+      .@{kd-prefix}-input-suffix {
+        margin-left: 0;
+      }
+
+      .@{kd-prefix}-input {
+        display: none;
+      }
+    }
+  }
+
   .@{color-picker-prefix-cls}-input {
     width: @color-picker-input-sizing-width;
     height: @color-picker-input-sizing-height;
+    padding: 0 8px;
     border-bottom: 1px solid rgba(217, 217, 217, 1);
     font-size: @color-picker-input-font-size;
   }
 
   .@{color-picker-prefix-cls}-icon-container {
-    position: absolute;
-    top: 3px;
-    right: 6px;
     cursor: pointer;
 
     .@{color-picker-prefix-cls}-icon {
-      width: @color-picker-input-suffix-sizing-width;
-      height: @color-picker-input-suffix-sizing-height;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: @color-picker-input-prefix-sizing-width;
+      height: @color-picker-input-prefix-sizing-height;
       border: 1px solid rgba(0, 0, 0, 0.05);
       border-radius: 2px;
       line-height: 18px;
       text-align: center;
       color: @bg;
 
-      &-underline {
-        margin-right: -6px;
-      }
-
-      &-up {
-        .kdicon-arrow-down {
-          transform: rotate(180deg);
-          transition: transform @transition-duration-quickly ease-in-out;
-        }
-      }
-
-      &-down {
-        .kdicon-arrow-down {
-          transform: rotate(0deg);
-          transition: transform @transition-duration-quickly ease-in-out;
-        }
+      &-no-color-line {
+        width: @color-picker-input-prefix-line-sizing-width;
+        height: @color-picker-input-prefix-line-sizing-height;
+        background-color: #ff2e3d;
+        rotate: 45deg;
       }
     }
   }
@@ -74,9 +87,74 @@
     transform-origin: top left;
     z-index: @color-picker-panel-z-index;
 
+    &>div {
+      margin-top: 12px;
+    }
+
+    &-clear {
+      display: flex;
+      align-items: center;
+      font-size: 12px;
+      color: #666666;
+      line-height: 16px;
+      font-weight: 400;
+
+      &-box {
+        position: relative;
+        width: 16px;
+        height: 16px;
+        margin-right: 4px;
+        border: 1px solid rgba(217, 217, 217, 1);
+        border-radius: 2px;
+        cursor: pointer;
+        background-color: #fff;
+
+        &::after {
+          position: absolute;
+          left: 7.5px;
+          top: -3.5px;
+          content: '';
+          width: 1px;
+          height: 22.6px;
+          background-color: #ff2e3d;
+          rotate: 45deg;
+        }
+
+        .active {
+          content: '';
+          position: absolute;
+          top: -3px;
+          left: -3px;
+          width: 20px;
+          height: 20px;
+          border: 1px solid rgba(217, 217, 217, 1);
+          border-radius: 4px;
+        }
+
+        &:hover {
+          &::before {
+            .active;
+          }
+        }
+
+        &:active {
+          &::before {
+            .active;
+            border: 1px solid rgba(148, 148, 148, 1);
+          }
+        }
+      }
+
+      &-text {
+        font-size: 12px;
+        color: #666666;
+        line-height: 16px;
+        font-weight: 400;
+      }
+    }
+
     &-chrome {
       width: 278px !important;
-      margin-top: 12px;
       box-shadow: none !important;
 
       &>div:last-child {
@@ -191,7 +269,6 @@
     }
 
     &-switch {
-      margin: 12px 0 0;
       font-size: 12px;
       color: #666666;
       letter-spacing: 0;
@@ -207,21 +284,36 @@
     &-container {
       display: flex;
       flex-wrap: nowrap;
-      margin-top: 10px;
 
-      &-input {
-        flex: 1 1 auto;
+      &-select {
+        flex: 0 0 64px;
         display: inline-block;
         position: relative;
+        margin-right: 8px;
         font-size: @color-picker-panel-select-font-size;
 
+        .@{kd-prefix}-select {
+          width: 64px;
+
+          .@{kd-prefix}-select,
+          .@{kd-prefix}-select-selection-item {
+            overflow: visible;
+            text-overflow: unset;
+          }
+
+          &-suffix {
+            padding-right: 4px;
+            margin-left: 0;
+          }
+        }
+
         .@{kd-prefix}-select-dropdown-panel {
           margin: 0 !important;
 
           &.bottomLeft,
           &.topLeft {
             position: absolute;
-            width: 60px !important;
+            width: 64px !important;
             min-width: unset !important;
             background: #FFFFFF;
             right: 0;
@@ -245,10 +337,6 @@
           height: @color-picker-panel-select-sizing-height;
           min-height: 28px;
           padding: 0 28px 0 0;
-
-          .@{kd-prefix}-select-placeholder {
-            left: 8px;
-          }
         }
 
         .active-option {
@@ -256,74 +344,190 @@
         }
       }
 
+      &-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 1 60px;
+        flex: 0 0 54px;
         height: 28px;
         margin-left: 8px;
+        padding: 0;
         text-align: center;
         font-size: @color-picker-panel-alpha-font-size;
       }
     }
 
-    &-colorDivContainer {
-      display: grid;
-      grid-template-columns: repeat(12, 1fr);
-      grid-column-gap: 8px;
-      grid-row-gap: 8px;
-      margin-top: 12px;
+    &-historical-color-box {
+      &-title {
+        font-size: 12px;
+        color: #666666;
+        line-height: 18px;
+        font-weight: 400;
+        margin-bottom: 8px;
+      }
 
-      &-ie11 {
-        display: flex;
-        flex-wrap: wrap;
+      &-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;
+            }
+          }
+        }
 
         li {
-          margin-right: 8px;
-          margin-top: 8px;
+          position: relative;
+          box-sizing: border-box;
+          width: @color-picker-panel-historical-sizing-width;
+          height: @color-picker-panel-historical-sizing-height;
+          border: 1px solid rgba(0, 0, 0, 0.05);
+          border-radius: 2px;
+          list-style: none;
+          cursor: pointer;
 
-          &:nth-child(12n) {
-            margin-right: 0;
+          .square {
+            display: none;
+            position: absolute;
+            box-sizing: inherit;
+            top: -3px;
+            left: -3px;
+            width: calc(@color-picker-panel-historical-sizing-width + 4px);
+            height: calc(@color-picker-panel-historical-sizing-height + 4px);
+            border: 1px solid rgba(178, 178, 176, 1);
+            border-radius: 4px;
+
+            &-click {
+              display: block;
+              box-shadow: 0 0 0 1px #e5e5e5 !important;
+            }
           }
 
-          &:nth-child(-n+12) {
-            margin-top: 0;
+          &:hover {
+            .square {
+              display: block;
+            }
           }
         }
       }
+    }
 
-      &-unset-color {
-        margin-top: 0;
+    &-color-box {
+      &-title {
+        font-size: 12px;
+        color: #666666;
+        line-height: 18px;
+        font-weight: 400;
+        margin-bottom: 8px;
       }
 
-      li {
-        position: relative;
-        box-sizing: border-box;
-        width: @color-picker-panel-preset-sizing-width;
-        height: @color-picker-panel-preset-sizing-height;
-        border: 1px solid rgba(0, 0, 0, 0.05);
-        border-radius: 2px;
-        list-style: none;
-        cursor: pointer;
+      &-container {
+        display: grid;
+        grid-template-columns: repeat(12, 1fr);
+        grid-column-gap: 8px;
+        grid-row-gap: 8px;
 
-        .square {
-          display: none;
-          position: absolute;
-          box-sizing: inherit;
-          top: -3px;
-          left: -3px;
-          width: calc(@color-picker-panel-preset-sizing-width + 4px);
-          height: calc(@color-picker-panel-preset-sizing-height + 4px);
-          border: 1px solid rgba(178, 178, 176, 1);
-          border-radius: 4px;
+        &-ie11 {
+          display: flex;
+          flex-wrap: wrap;
+
+          li {
+            margin-right: 8px;
+            margin-top: 8px;
+
+            &:nth-child(12n) {
+              margin-right: 0;
+            }
 
-          &-click {
-            display: block;
-            box-shadow: 0 0 0 1px #e5e5e5 !important;
+            &:nth-child(-n+12) {
+              margin-top: 0;
+            }
           }
         }
 
-        &:hover {
+        li {
+          position: relative;
+          box-sizing: border-box;
+          width: @color-picker-panel-preset-sizing-width;
+          height: @color-picker-panel-preset-sizing-height;
+          border: 1px solid rgba(0, 0, 0, 0.05);
+          border-radius: 2px;
+          list-style: none;
+          cursor: pointer;
+
           .square {
-            display: block;
+            display: none;
+            position: absolute;
+            box-sizing: inherit;
+            top: -3px;
+            left: -3px;
+            width: calc(@color-picker-panel-preset-sizing-width + 4px);
+            height: calc(@color-picker-panel-preset-sizing-height + 4px);
+            border: 1px solid rgba(178, 178, 176, 1);
+            border-radius: 4px;
+
+            &-click {
+              display: block;
+              box-shadow: 0 0 0 1px #e5e5e5 !important;
+            }
+          }
+
+          &:hover {
+            .square {
+              display: block;
+            }
           }
         }
       }

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

@@ -13,13 +13,17 @@
 // sizing
 @color-picker-input-sizing-width: var(~'@{color-picker-custom-prefix}-input-sizing-width', 230px);
 @color-picker-input-sizing-height: var(~'@{color-picker-custom-prefix}-input-sizing-height', 28px);
-@color-picker-input-suffix-sizing-width: var(~'@{color-picker-custom-prefix}-input-suffix-sizing-width', 20px);
-@color-picker-input-suffix-sizing-height: var(~'@{color-picker-custom-prefix}-input-suffix-sizing-height', 20px);
+@color-picker-input-prefix-sizing-width: var(~'@{color-picker-custom-prefix}-input-prefix-sizing-width', 16px);
+@color-picker-input-prefix-line-sizing-width: var(~'@{color-picker-custom-prefix}-input-prefix-line-sizing-width', 1px);
+@color-picker-input-prefix-line-sizing-height: var(~'@{color-picker-custom-prefix}-input-prefix-line-sizing-height', 22.6px);
+@color-picker-input-prefix-sizing-height: var(~'@{color-picker-custom-prefix}-input-prefix-sizing-height', 16px);
 @color-picker-panel-sizing-width: var(~'@{color-picker-custom-prefix}-panel-sizing-width', 304px);
 @color-picker-panel-select-sizing-width: var(~'@{color-picker-custom-prefix}-panel-select-sizing-width', 212px);
 @color-picker-panel-select-sizing-height: var(~'@{color-picker-custom-prefix}-panel-select-sizing-height', 28px);
 @color-picker-panel-preset-sizing-width: var(~'@{color-picker-custom-prefix}-panel-preset-sizing-width', 16px);
 @color-picker-panel-preset-sizing-height: var(~'@{color-picker-custom-prefix}-panel-preset-sizing-height', 16px);
+@color-picker-panel-historical-sizing-width: var(~'@{color-picker-custom-prefix}-panel-historical-sizing-width', 16px);
+@color-picker-panel-historical-sizing-height: var(~'@{color-picker-custom-prefix}-panel-historical-sizing-height', 16px);
 
 // z-index
 @color-picker-panel-z-index: var(~'@{color-picker-custom-prefix}-panel-z-index', @z-index-popper);

package/es/color-picker/utils/colorFormat.d.ts

@@ -1,5 +1,8 @@
 declare type IOutType = 'HEX' | 'HSB' | 'HSL' | 'RGB' | 'all';
-export declare const colorFormat: (colorStr: string, alpha?: number, outType?: IOutType, formatHex?: boolean) => any;
+export declare const colorFormat: (colorStr: string, alpha?: number, outType?: IOutType, formatHex?: boolean) => string | {
+    type: string;
+    value: string;
+}[] | undefined;
 export declare const getColorObj: (colorStr: string) => string | {
     h: string;
     s: number;
@@ -11,6 +14,7 @@ export declare const getColorObj: (colorStr: string) => string | {
     v: number;
     alpha: number;
 };
+export declare const colorToStr: (obj: any) => string;
 export declare const strFixed: (numStr: string | number, num?: number) => number;
 export declare const valOfCorrespondingType: (currentColorType: string) => number | undefined;
 export declare const highlightPresetColorIndex: (color: string, colorArr: string[]) => number;

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

@@ -3,7 +3,7 @@ import _findIndexInstanceProperty from "@babel/runtime-corejs3/core-js-stable/in
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import Color from 'color';
 import { validateColor } from './validateColor';
-import { toLowerCase } from './convertLetters';
+import { toLowerCase, toUpCase } from './convertLetters';
 export var colorFormat = function colorFormat(colorStr) {
   var alpha = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
   var outType = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'all';
@@ -12,18 +12,18 @@ export var colorFormat = function colorFormat(colorStr) {
   var toHex = function toHex() {
     if (/^#([0-9a-fA-F]{8})$/.test(colorStr)) {
       if (formatHex) {
-        return toLowerCase(alpha === 1 ? ColorTools.hex() : ColorTools.hexa());
+        return toUpCase(alpha === 1 ? ColorTools.hex() : ColorTools.hexa());
       } else {
         return colorStr;
       }
     } else {
-      return toLowerCase(alpha === 1 ? ColorTools.hex() : ColorTools.hexa());
+      return toUpCase(alpha === 1 ? ColorTools.hex() : ColorTools.hexa());
     }
   };
-  var HEX = toHex();
-  var HSB = colorToStr(ColorTools.hsv());
-  var RGB = ColorTools.rgb().string();
-  var HSL = colorToStr(ColorTools.hsl());
+  var HEX = toUpCase(toHex());
+  var HSB = toUpCase(colorToStr(ColorTools.hsv()));
+  var RGB = toUpCase(ColorTools.rgb().string());
+  var HSL = toUpCase(colorToStr(ColorTools.hsl()));
   if (outType === 'HEX') return HEX;
   if (outType === 'HSB') return HSB;
   if (outType === 'HSL') return HSL;
@@ -45,7 +45,7 @@ export var colorFormat = function colorFormat(colorStr) {
   }
 };
 export var getColorObj = function getColorObj(colorStr) {
-  var colorArray = colorStr.split(',');
+  var colorArray = toLowerCase(colorStr).split(',');
   var type = validateColor(colorStr);
   if (type === 'HSB' || type === 'HSBA') {
     var s = removePercentage(colorArray[1]);
@@ -106,7 +106,7 @@ var addPercentage = function addPercentage(parameter) {
 var removePercentage = function removePercentage(parameter) {
   return (parameter === null || parameter === void 0 ? void 0 : parameter.indexOf('%')) !== -1 ? +parameter.replace('%', '') : +parameter > 0 && +parameter <= 1 ? +parameter * 100 : +parameter;
 };
-var colorToStr = function colorToStr(obj) {
+export var colorToStr = function colorToStr(obj) {
   var arr = obj.color;
   if (obj.valpha === 1) {
     var _context11, _context12, _context13;
@@ -147,7 +147,7 @@ export var highlightPresetColorIndex = function highlightPresetColorIndex(color,
 export var presetColorToHEX = function presetColorToHEX(colorArr) {
   if (!colorArr) return [];
   var hexColorArr = _mapInstanceProperty(colorArr).call(colorArr, function (color) {
-    return colorFormat(color, 1, 'HEX');
+    return colorFormat(color, Color(getColorObj(color)).alpha(), 'HEX');
   });
   return hexColorArr;
 };

package/es/color-picker/utils/convertLetters.d.ts

@@ -1 +1,2 @@
+export declare function toUpCase(str: string): string;
 export declare function toLowerCase(str: string): string;

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

@@ -1,3 +1,15 @@
+export function toUpCase(str) {
+  var result = '';
+  for (var i = 0; i < str.length; i++) {
+    var charCode = str.charCodeAt(i);
+    if (charCode >= 97 && charCode <= 122) {
+      result += String.fromCharCode(charCode - 32);
+    } else {
+      result += str[i];
+    }
+  }
+  return result;
+}
 export function toLowerCase(str) {
   var result = '';
   for (var i = 0; i < str.length; i++) {

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

@@ -1,4 +1,7 @@
+import { toLowerCase } from './convertLetters';
 export function validateColor(color) {
+  if (!color) return '';
+  var lowerColor = toLowerCase(color);
   var hexReg = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
   var hexaReg = /^#([0-9a-fA-F]{8})$/;
   var hsbReg = /^hsb\(\s*(-?\d+|-?\d*\.\d+)(?:,\s*(-?\d+|-?\d*\.\d+|-?\d+%|-?\d*\.\d+%)){2}\s*\)$/;
@@ -8,14 +11,14 @@ export function validateColor(color) {
   var hslReg = /^hsl\(\s*(-?\d+|-?\d*\.\d+)(?:,\s*(-?\d+|-?\d*\.\d+|-?\d+%|-?\d*\.\d+%)){2}\s*\)$/;
   var hslaReg = /^hsla\(\s*(-?\d+|-?\d*\.\d+)(?:,\s*(-?\d+|-?\d*\.\d+|-?\d+%|-?\d*\.\d+%)){2}\s*,\s*(-?\d+|-?\d*\.\d+)\)$/;
   var colorNameReg = /^(?:aliceblue|antiquewhite|aqua|aquamarine|azure|beige|bisque|black|blanchedalmond|blue|blueviolet|brown|burlywood|cadetblue|chartreuse|chocolate|coral|cornflowerblue|cornsilk|crimson|cyan|darkblue|darkcyan|darkgoldenrod|darkgray|darkgreen|darkgrey|darkkhaki|darkmagenta|darkolivegreen|darkorange|darkorchid|darkred|darksalmon|darkseagreen|darkslateblue|darkslategray|darkslategrey|darkturquoise|darkviolet|deeppink|deepskyblue|dimgray|dimgrey|dodgerblue|firebrick|floralwhite|forestgreen|fuchsia|gainsboro|ghostwhite|gold|goldenrod|gray|green|greenyellow|grey|honeydew|hotpink|indianred|indigo|ivory|khaki|lavender|lavenderblush|lawngreen|lemonchiffon|lightblue|lightcoral|lightcyan|lightgoldenrodyellow|lightgray|lightgreen|lightgrey|lightpink|lightsalmon|lightseagreen|lightskyblue|lightslategray|lightslategrey|lightsteelblue|lightyellow|lime|limegreen|linen|magenta|maroon|mediumaquamarine|mediumblue|mediumorchid|mediumpurple|mediumseagreen|mediumslateblue|mediumspringgreen|mediumturquoise|mediumvioletred|midnightblue|mintcream|mistyrose|moccasin|navajowhite|navy|oldlace|olive|olivedrab|orange|orangered|orchid|palegoldenrod|palegreen|paleturquoise|palevioletred|papayawhip|peachpuff|peru|pink|plum|powderblue|purple|rebeccapurple|red|rosybrown|royalblue|saddlebrown|salmon|sandybrown|seagreen|seashell|sienna|silver|skyblue|slateblue|slategray|slategrey|snow|springgreen|steelblue|tan|teal|thistle|tomato|turquoise|violet|wheat|white|whitesmoke|yellow|yellowgreen)$/;
-  if (hexReg.test(color)) return 'HEX';
-  if (hexaReg.test(color)) return 'HEXA';
-  if (hsbReg.test(color)) return 'HSB';
-  if (hsbaReg.test(color)) return 'HSBA';
-  if (rgbaReg.test(color)) return 'RGBA';
-  if (rgbReg.test(color)) return 'RGB';
-  if (hslReg.test(color)) return 'HSL';
-  if (hslaReg.test(color)) return 'HSLA';
-  if (colorNameReg.test(color)) return 'colorName';
+  if (hexReg.test(lowerColor)) return 'HEX';
+  if (hexaReg.test(lowerColor)) return 'HEXA';
+  if (hsbReg.test(lowerColor)) return 'HSB';
+  if (hsbaReg.test(lowerColor)) return 'HSBA';
+  if (rgbaReg.test(lowerColor)) return 'RGBA';
+  if (rgbReg.test(lowerColor)) return 'RGB';
+  if (hslReg.test(lowerColor)) return 'HSL';
+  if (hslaReg.test(lowerColor)) return 'HSLA';
+  if (colorNameReg.test(lowerColor)) return 'colorName';
   return '';
 }

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

@@ -73,6 +73,9 @@ declare const compDefaultProps: {
             internationalName: string;
         };
         placeholder: string;
+        pure: boolean;
+        showAlphaInput: boolean;
+        showClear: boolean;
         showColorTransfer: boolean;
         showPresetColor: boolean;
         showColorPickerBox: {
@@ -80,6 +83,11 @@ declare const compDefaultProps: {
             showHue: boolean;
             showOpacity: boolean;
         };
+        format: string;
+        panelFormatConfig: {
+            show: string[];
+            default: string;
+        };
     };
     Checkbox: {
         defaultChecked: boolean;

package/es/config-provider/compDefaultProps.js

@@ -72,12 +72,20 @@ var compDefaultProps = {
       internationalName: 'followFunctionalColor'
     },
     placeholder: '#',
+    pure: false,
+    showAlphaInput: true,
+    showClear: true,
     showColorTransfer: true,
     showPresetColor: true,
     showColorPickerBox: {
       showBox: false,
       showHue: false,
       showOpacity: false
+    },
+    format: 'HEX',
+    panelFormatConfig: {
+      show: ['HEX', 'HSB', 'RGB', 'HSL'],
+      default: 'HEX'
     }
   },
   Checkbox: {

package/es/popper/index.d.ts

@@ -4,7 +4,7 @@ export declare const Placements: ["top", "left", "right", "bottom", "topLeft", "
 export declare type PlacementType = typeof Placements[number];
 export declare const Triggers: ["hover", "focus", "click", "contextMenu"];
 export declare type TriggerType = typeof Triggers[number];
-export declare type Reason = TriggerType | 'scroll' | 'clickOutside' | 'parentHidden' | 'unknown';
+export declare type Reason = TriggerType | 'scroll' | 'clickOutside' | 'clickToClose' | 'parentHidden' | 'unknown';
 export declare type RenderFunction = () => React.ReactNode;
 export declare type PopperProps = {
     gap?: number;

package/es/popper/index.js

@@ -352,9 +352,12 @@ export var Popper = forwardRef(function (props, ref) {
         var domReference = getRealDom(referenceRef, referenceElement);
         var isReference = domReference ? domReference === e.target || ((_c = domReference === null || domReference === void 0 ? void 0 : domReference.contains) === null || _c === void 0 ? void 0 : _c.call(domReference, e.target)) : false;
         var isTarget = trigger === 'contextMenu' ? isPopper : isPopper || isReference;
-        if (clickToClose && !isTarget && !isSubPopper(e)) {
+        if (!isTarget && !isSubPopper(e)) {
           triggerOpen(false, 'clickOutside', 0);
         }
+        if (clickToClose && isPopper) {
+          triggerOpen(false, 'clickToClose', 0);
+        }
       }
     }, 10, {
       leading: true