@kdcloudjs/kdesign 1.6.5 → 1.6.7

package/es/select/style/index.css

@@ -248,6 +248,9 @@
 .kd-select-visible .kd-select-icon-active {
   color: #3761ca;
 }
+.kd-select-visible .kd-select-selection-item {
+  color: var(--kd-c-select-placeholder-color-text, #b2b2b2);
+}
 .kd-select-icon-arrow {
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
@@ -278,36 +281,20 @@
 }
 .kd-select-icon-clear {
   opacity: 0;
+  z-index: 1;
+  position: absolute;
+  background: #fff;
   -webkit-transition: opacity 0.15s ease;
   transition: opacity 0.15s ease;
 }
 .kd-select-icon-clear:hover {
   color: var(--kd-c-select-color-border-hover, var(--kd-g-color-theme, #5582f3));
 }
-.kd-select-selection-search {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 11px;
-}
-.kd-select-selection-search-input {
-  opacity: 0;
-  margin: 0;
-  padding: 0;
-  background: 0 0;
-  border: none;
-  outline: none;
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-}
-.kd-select-selection-search-input:hover {
-  cursor: pointer;
-}
 .kd-select-focused {
   border-color: var(--kd-c-select-color-border-foucs, var(--kd-g-color-theme, #5582f3)) !important;
 }
 .kd-select-placeholder {
+  position: absolute;
   color: var(--kd-c-select-placeholder-color-text, #b2b2b2);
   overflow: hidden;
   white-space: nowrap;
@@ -331,7 +318,7 @@
   border: 1px solid var(--kd-c-select-color-border-hover, var(--kd-g-color-theme, #5582f3));
 }
 .kd-select-bordered .kd-select-suffix {
-  right: 10px;
+  padding-right: 8px;
 }
 .kd-select-wrapper {
   -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
@@ -352,6 +339,7 @@
           box-sizing: border-box;
   overflow-y: auto;
   overflow-x: hidden;
+  position: relative;
 }
 .kd-select-dropdown {
   display: block;
@@ -433,19 +421,16 @@
 .kd-select-size-small {
   min-height: var(--kd-c-select-sizing-height-small, 24px);
   max-height: calc(var(--kd-c-select-sizing-height-small, 24px) * 3 - 10px);
-  line-height: var(--kd-c-select-line-height-small, 14px);
   font-size: var(--kd-c-select-font-size-small, 12px);
 }
 .kd-select-size-middle {
   min-height: var(--kd-c-select-sizing-height-middle, 30px);
   max-height: calc(var(--kd-c-select-sizing-height-middle, 30px) * 3 - 10px);
-  line-height: var(--kd-c-select-line-height-middle, 22px);
   font-size: var(--kd-c-select-font-size-middle, 14px);
 }
 .kd-select-size-large {
   min-height: var(--kd-c-select-sizing-height-large, 36px);
   max-height: calc(var(--kd-c-select-sizing-height-large, 36px) * 3 - 10px);
-  line-height: var(--kd-c-select-line-height-large, 28px);
   font-size: var(--kd-c-select-font-size-large, 16px);
 }
 .kd-select-suffix {
@@ -467,6 +452,20 @@
           justify-content: center;
   margin-left: 8px;
 }
+.kd-select-single .kd-select-selection-search {
+  position: absolute;
+  right: 28px;
+  left: 0;
+  height: 100%;
+}
+.kd-select-single .kd-select-selection-search-input {
+  outline: 0;
+  border-radius: 0;
+  border: none;
+  background: transparent;
+  height: 100%;
+  width: 100%;
+}
 .kd-select-single-focused {
   border-color: var(--kd-c-select-color-border-foucs, var(--kd-g-color-theme, #5582f3)) !important;
 }
@@ -483,6 +482,12 @@
 .kd-select-single:hover .kd-select-icon-clear {
   opacity: 1;
 }
+.kd-select-single .kd-select-icon-clear {
+  color: var(--kd-c-select-icon-clear-color-text, #d9d9d9);
+}
+.kd-select-single .kd-select-icon-clear:hover {
+  color: var(--kd-c-select-icon-clear-color-text-hover, #999);
+}
 .kd-select-single-text {
   color: var(--kd-c-select-single-color-text, var(--kd-g-color-text-primary, #212121));
   overflow: hidden;
@@ -561,6 +566,25 @@
   width: 100%;
   min-width: 20px;
 }
+.kd-select-multiple .kd-select-selection-search {
+  position: relative;
+  max-width: 100%;
+}
+.kd-select-multiple .kd-select-selection-search-input {
+  outline: 0;
+  border-radius: 0;
+  border: none;
+  background: transparent;
+  width: 100%;
+}
+.kd-select-multiple .kd-select-selection-search-mirror {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 999;
+  white-space: pre;
+  visibility: hidden;
+}
 .kd-select-multiple-disabled {
   cursor: not-allowed;
   background-color: var(--kd-c-select-color-background-disabled, #f5f5f5);
@@ -572,6 +596,12 @@
 .kd-select-multiple:hover .kd-select-icon-clear {
   opacity: 1;
 }
+.kd-select-multiple .kd-select-icon-clear {
+  color: var(--kd-c-select-icon-clear-color-text, #d9d9d9);
+}
+.kd-select-multiple .kd-select-icon-clear:hover {
+  color: var(--kd-c-select-icon-clear-color-text-hover, #999);
+}
 .kd-select-multiple-selector {
   position: relative;
   cursor: text;

package/es/select/style/index.less

@@ -22,6 +22,9 @@
     .@{select-prefix-cls}-icon-active {
       color: #3761ca;
     }
+    .@{select-prefix-cls}-selection-item {
+      color: @select-placeholder-color;
+    }
   }
 
   &-icon {
@@ -46,6 +49,9 @@
 
     &-clear {
       opacity: 0;
+      z-index: 1;
+      position: absolute;
+      background: #fff;
       transition: opacity 0.15s ease;
       &:hover {
         color: @select-g-color-border-hover;
@@ -53,30 +59,11 @@
     }
   }
 
-  &-selection-search {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 11px;
-    &-input {
-      opacity: 0;
-      margin: 0;
-      padding: 0;
-      background: 0 0;
-      border: none;
-      outline: none;
-      appearance: none;
-      &:hover {
-        cursor: pointer;
-      }
-    }
-  }
-
   &-focused {
     .focusColor();
-    // border-bottom: 1px solid #5582F3 ;
   }
   &-placeholder {
+    position: absolute;
     color: @select-placeholder-color;
     overflow: hidden;
     white-space: nowrap;
@@ -103,7 +90,7 @@
     }
 
     .@{select-prefix-cls}-suffix {
-      right: 10px;
+      padding-right: 8px;
     }
   }
 
@@ -119,6 +106,7 @@
     box-sizing: border-box;
     overflow-y: auto;
     overflow-x: hidden;
+    position: relative;
   }
 
   &-dropdown {
@@ -180,7 +168,6 @@
 
       &-selected:not(&-disabled) {
         color: @select-item-selected-color;
-        // font-weight: @select-item-selected-font-weight;
         background-color: @select-item-selected-bg;
       }
 
@@ -216,6 +203,22 @@
     margin-left: 8px;
   }
   &-single {
+    .@{select-prefix-cls}-selection {
+      &-search {
+        position: absolute;
+        right: 28px;
+        left: 0;
+        height: 100%;
+        &-input {
+          outline: 0;
+          border-radius: 0;
+          border: none;
+          background: transparent;
+          height: 100%;
+          width: 100%;
+        }
+      }
+    }
     &-focused {
       .focusColor();
     }
@@ -233,6 +236,13 @@
     &:hover .@{select-prefix-cls}-icon-clear {
       opacity: 1;
     }
+
+    .@{select-prefix-cls}-icon-clear {
+      color: @select-clear-color;
+      &:hover {
+        color: @select-clear-color-hover;
+      }
+    }
     &-text {
       color: @select-single-color-text;
       .over();
@@ -243,7 +253,6 @@
   }
 
   .@{select-prefix-cls}-selection-item {
-    // position: relative;
     display: inline-flex;
     box-sizing: border-box;
     align-items: center;
@@ -252,12 +261,6 @@
     height: 20px;
     line-height: 20px;
     margin: 2px 8px 2px 0;
-    // margin: 2px 4px 2px 0;
-    // margin-right: 4px;
-    // padding-left: 8px;
-    // background: #fafafa;
-    // border: 1px solid #d9d9d9;
-    // border-radius: 2px;
     cursor: default;
     user-select: none;
     &-small {
@@ -289,24 +292,13 @@
       border: 1px solid #ccc;
       color: #212121;
     }
-    // &-remove {
-    //   text-align: center;
-    //   text-transform: none;
-    //   display: inline-flex;
-    //   color: rgba(0, 0, 0, 0.45);
-    //   line-height: inherit;
-    //   cursor: pointer;
-    //   &:hover {
-    //     color: #212121;
-    //   }
-    // }
+
     &-span {
       position: relative;
       margin-left: 0.5px;
       box-sizing: border-box;
     }
     &-input {
-      // opacity: 0;
       cursor: text;
       margin: 0;
       padding: 0;
@@ -321,6 +313,27 @@
 
   // 多选
   &-multiple {
+    .@{select-prefix-cls}-selection {
+      &-search {
+        position: relative;
+        max-width: 100%;
+        &-input {
+          outline: 0;
+          border-radius: 0;
+          border: none;
+          background: transparent;
+          width: 100%;
+        }
+        &-mirror {
+          position: absolute;
+          top: 0;
+          left: 0;
+          z-index: 999;
+          white-space: pre;
+          visibility: hidden;
+        }
+      }
+    }
     &-disabled {
       cursor: not-allowed;
       background-color: @select-color-background-disabled;
@@ -333,6 +346,12 @@
     &:hover .@{select-prefix-cls}-icon-clear {
       opacity: 1;
     }
+    .@{select-prefix-cls}-icon-clear {
+      color: @select-clear-color;
+      &:hover {
+        color: @select-clear-color-hover;
+      }
+    }
     &-selector {
       position: relative;
       cursor: text;
@@ -378,5 +397,3 @@
     transition: all calc(@transition-duration - 0.1s) @ease;
   }
 }
-
-

package/es/select/style/mixin.less

@@ -12,14 +12,12 @@
 }
 
 .focusColor() {
-  // border-bottom: 1px solid #5582F3;
   border-color: @select-g-color-border-foucs !important;
 }
 
 .select-input-size(@height, @maxHeight, @lineHeight, @fontSize) {
   min-height: @height;
   max-height: calc(@maxHeight * 3 - 10px);
-  line-height: @lineHeight;
   font-size: @fontSize;
 }
 

package/es/select/style/token.less

@@ -21,6 +21,8 @@
 @select-color-text-disabled: var(~'@{select-custom-prefix}-color-text-disabled', @color-disabled);
 @select-arrow-icon-color-text-disabled: var(~'@{select-custom-prefix}-arrow-icon-color-text-disabled', #b2b2b2);
 @select-single-color-text: var(~'@{select-custom-prefix}-single-color-text', @color-text-primary);
+@select-clear-color: var(~'@{select-custom-prefix}-icon-clear-color-text', #d9d9d9);
+@select-clear-color-hover: var(~'@{select-custom-prefix}-icon-clear-color-text-hover', #999);
 
 // font
 @select-list-font-size: var(~'@{select-custom-prefix}-dropdown-font-size', 12px); // 下拉列表文字大小

package/es/split-panel/style/index.css

@@ -114,8 +114,6 @@
 .kd-split-panel {
   position: absolute;
   overflow: hidden;
-  -webkit-transition: all calc(0.3s - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
-  transition: all calc(0.3s - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
 }
 .kd-split-panel.left-panel,
 .kd-split-panel.right-panel {
@@ -154,8 +152,6 @@
   -webkit-transform: translate(-50%, -50%);
           transform: translate(-50%, -50%);
   z-index: 10;
-  -webkit-transition: all calc(0.3s - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
-  transition: all calc(0.3s - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
 }
 .kd-split-trigger-con.is-active .kd-split-trigger-arrow {
   border-color: var(--kd-c-split-panel-arrow-color-background, #999);
@@ -192,8 +188,6 @@
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
-  -webkit-transition: all calc(0.3s - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
-  transition: all calc(0.3s - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   border: var(--kd-c-split-panel-arrow-sizing-border, 1px) solid transparent;

package/es/split-panel/style/index.less

@@ -17,7 +17,6 @@
     &-panel {
         position: absolute;
         overflow: hidden;
-        transition: all calc(@transition-duration - 0.1s) @ease-out;
         &.left-panel, &.right-panel {
             top: 0;
             bottom: 0;
@@ -54,7 +53,6 @@
           position: absolute;
           transform: translate(-50%, -50%);
           z-index: 10;
-          transition: all calc(@transition-duration - 0.1s) @ease-out;
           &.is-active {
             .@{split-prefix-cls}-trigger-arrow {
               border-color: @split-panel-trigger-arrow-color;
@@ -95,7 +93,6 @@
           display: inline-flex;
           align-items: center;
           justify-content: center;
-          transition: all calc(@transition-duration - 0.1s) @ease-out;
           box-sizing: border-box;
           border: @split-panel-arrow-border-width solid transparent;
           .@{kd-prefix}icon {

package/es/steps/style/index.css

@@ -164,9 +164,6 @@
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
 }
 .kd-steps-item-iconContainer {
   display: -webkit-box;
@@ -233,21 +230,11 @@
   line-height: 20px;
   font-size: var(--kd-c-steps-font-size, var(--kd-g-font-size-small, 12px));
   color: var(--kd-c-steps-color-wait, #999);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  word-break: break-word;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
 }
 .kd-steps-item-content .kd-steps-item-description {
   line-height: 20px;
   font-size: var(--kd-c-steps-font-size, var(--kd-g-font-size-small, 12px));
   color: var(--kd-c-steps-color-wait, #999);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  word-break: break-word;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
   width: var(--kd-c-steps-vertical-description-sizing-width, 200px);
 }
 .kd-steps-item-process {

package/es/steps/style/index.less

@@ -69,7 +69,6 @@
       width: 100%;
       display: flex;
       flex-direction: column;
-      justify-content: center;
     }
 
     &-iconContainer {
@@ -126,22 +125,12 @@
         line-height: 20px;
         font-size: @steps-font-size;
         color: @steps-color-wait;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        word-break: break-word;
-        display: -webkit-box;
-        -webkit-box-orient: vertical;
       }
 
       .@{steps-prefix-cls}-item-description {
         line-height: 20px;
         font-size: @steps-font-size;
         color: @steps-color-wait;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        word-break: break-word;
-        display: -webkit-box;
-        -webkit-box-orient: vertical;
         width: @steps-vertical-description-sizing-width;
       }
     }

package/es/table/feature/mergeCellHover.d.ts

@@ -0,0 +1,3 @@
+import { TablePipeline } from '../interface';
+declare function mergeCellHover(pipeline: TablePipeline): void;
+export default mergeCellHover;

package/es/table/feature/mergeCellHover.js

@@ -0,0 +1,7 @@
+import { features } from '@kdcloudjs/table';
+
+function mergeCellHover(pipeline) {
+  pipeline.use(features.mergeCellHover());
+}
+
+export default mergeCellHover;

package/es/table/interface.d.ts

@@ -10,6 +10,14 @@ declare type TablePropsOfComponents = Pick<BaseTableProps, 'components'> & {
     };
 };
 declare type TablePropsOfExtend = Omit<BaseTableProps, 'components'>;
+export declare type TableApi = {
+    getColumns: () => any[];
+    getDataSource: () => any[];
+    getFooterDataSource: () => any[];
+};
+export declare type TableInstance = {
+    api: TableApi;
+};
 export interface TableProps extends TablePropsOfExtend, TablePropsOfComponents {
     rowSelection?: TableRowSelection;
     prefixCls?: string;

package/es/table/table.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { TableProps } from './interface';
-declare function Table(props: TableProps): JSX.Element;
+declare const Table: React.ForwardRefExoticComponent<TableProps & React.RefAttributes<unknown>>;
 export default Table;

package/es/table/table.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime-corejs3/helpers/extends";
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
 import _sortInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/sort";
-import React, { useContext } from 'react';
+import React, { forwardRef, useContext, useImperativeHandle, useRef } from 'react';
 import { Table as BaseTable, useTablePipeline } from '@kdcloudjs/table';
 import ConfigContext from '../config-provider/ConfigContext';
 import Checkbox from '../checkbox/index';
@@ -18,9 +18,9 @@ import useColumnResize from './feature/columnResize';
 import useColumnDrag from './feature/columnDrag';
 import useContextMenu from './feature/contextMenu';
 import useRangeSelection from './feature/useRangeSelection';
+import useＭergeCellHover from './feature/mergeCellHover';
 import devWarning from '../_utils/devwarning';
-
-function Table(props) {
+var Table = /*#__PURE__*/forwardRef(function (props, ref) {
   var columns = props.columns,
       dataSource = props.dataSource,
       columnDrag = props.columnDrag,
@@ -68,19 +68,32 @@ function Table(props) {
     columns: columns,
     dataSource: dataSource
   });
+  var pipelineRef = useRef(pipeline);
+  pipelineRef.current = pipeline;
 
   if (footerDataSource) {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
     pipeline.footerDataSource(footerDataSource);
   }
+
+  useImperativeHandle(ref, function () {
+    var _a, _b, _c;
+
+    return {
+      api: {
+        getColumns: (_a = pipelineRef.current.getColumns) === null || _a === void 0 ? void 0 : _a.bind(pipelineRef.current),
+        getDataSource: (_b = pipelineRef.current.getDataSource) === null || _b === void 0 ? void 0 : _b.bind(pipelineRef.current),
+        getFooterDataSource: (_c = pipelineRef.current.getFooterDataSource) === null || _c === void 0 ? void 0 : _c.bind(pipelineRef.current)
+      }
+    };
+  });
   /* -------------------------------------------------------------------------- */
 
   /* features                                                                   */
 
   /* -------------------------------------------------------------------------- */
 
-
   useRowSelection(pipeline, rowSelection);
   useRowDetail(pipeline, rowDetail);
   useFilter(pipeline, filter);
@@ -91,6 +104,7 @@ function Table(props) {
   useColumnDrag(pipeline, columnDrag);
   useContextMenu(pipeline, contextMenu);
   useRangeSelection(pipeline, rangeSelection);
+  useＭergeCellHover(pipeline);
   /* -------------------------------------------------------------------------- */
 
   /* after useTablePipeline, merge pipeline.getProps result                     */
@@ -135,6 +149,6 @@ function Table(props) {
     scrollbarWidth: scrollbarWidth,
     scrollLoad: scrollLoad
   }));
-}
-
+});
+Table.displayName = 'Table';
 export default Table;

package/es/tooltip/style/index.css

@@ -114,7 +114,7 @@
   -webkit-font-feature-settings: 'tnum';
           font-feature-settings: 'tnum';
   max-width: var(--kd-c-tooltip-sizing-max-width, 360px);
-  padding: var(--kd-c-tooltip-spacing-padding-vertical, 8px) var(--kd-c-tooltip-spacing-padding-vertical, 12px);
+  padding: var(--kd-c-tooltip-spacing-padding-vertical, 8px) var(--kd-c-tooltip-spacing-padding-horizontal, 12px);
   color: var(--kd-c-tooltip-color-text, var(--kd-g-color-text-primary, #212121));
   border-radius: var(--kd-c-tooltip-radius-border, var(--kd-g-radius-border, 2px));
   font-size: var(--kd-c-tooltip-color-text, var(--kd-g-font-size-small, 12px));

package/es/tooltip/style/token.less

@@ -11,7 +11,7 @@
 
 // spacing
 @tooltip-vertical-gap: var(~'@{tooltip-custom-prefix}-spacing-padding-vertical', 8px);
-@tooltip-horizontal-gap: var(~'@{tooltip-custom-prefix}-spacing-padding-vertical', 12px);
+@tooltip-horizontal-gap: var(~'@{tooltip-custom-prefix}-spacing-padding-horizontal', 12px);
 
 // sizing
 @tooltip-max-width: var(~'@{tooltip-custom-prefix}-sizing-max-width', 360px);

package/lib/_utils/hooks.js

@@ -252,15 +252,7 @@ function useResizeObserver(element, handler) {
       }, contentRect);
       ['width', 'height', 'x', 'y', 'bottom', 'top', 'left', 'right'].forEach(function (prop) {
         rect[prop] = contentRect[prop];
-      }); // rect.width = contentRect.width
-      // rect.height = contentRect.height
-      // rect.x = contentRect.x
-      // rect.y = contentRect.y
-      // rect.bottom = contentRect.bottom
-      // rect.top = contentRect.top
-      // rect.left = contentRect.left
-      // rect.right = contentRect.right
-
+      });
       handler && handler(rect);
     };
 

package/lib/carousel/style/index.css

@@ -109,6 +109,7 @@
 }
 .kd-carousel-list {
   list-style: none;
+  padding: 0;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -182,6 +183,8 @@
 }
 .kd-carousel-slidebar {
   position: absolute;
+  list-style: none;
+  padding: 0;
 }
 .kd-carousel-slidebar-left {
   display: -webkit-box;

package/lib/carousel/style/index.less

@@ -13,6 +13,7 @@
 
   &-list {
     list-style: none;
+    padding: 0;
     display: flex;
     flex-direction: row;
     position: relative;
@@ -79,6 +80,9 @@
 
   &-slidebar {
     position: absolute;
+    list-style: none;
+    padding: 0;
+
     &-left {
       .vertical;
       left: @carousel-dots-margin-left;