@douyinfe/semi-foundation 2.69.1-alpha.0 → 2.69.2

package/lib/es/resizable/resizable.css

@@ -11,72 +11,6 @@
   user-select: none;
   z-index: 2000;
 }
-.semi-resizable-resizableHandler-top {
-  width: 100%;
-  height: 10px;
-  top: 0;
-  left: 0;
-  cursor: row-resize;
-  top: -5px;
-}
-.semi-resizable-resizableHandler-right {
-  width: 10px;
-  height: 100%;
-  top: 0;
-  left: 0;
-  cursor: col-resize;
-  left: auto;
-  right: -5px;
-}
-.semi-resizable-resizableHandler-bottom {
-  width: 100%;
-  height: 10px;
-  top: 0;
-  left: 0;
-  cursor: row-resize;
-  top: auto;
-  bottom: -5px;
-}
-.semi-resizable-resizableHandler-left {
-  width: 10px;
-  height: 100%;
-  top: 0;
-  left: 0;
-  cursor: col-resize;
-  left: -5px;
-}
-.semi-resizable-resizableHandler-topRight {
-  width: 20px;
-  height: 20px;
-  position: absolute;
-  right: -10px;
-  top: -10px;
-  cursor: ne-resize;
-}
-.semi-resizable-resizableHandler-bottomRight {
-  width: 20px;
-  height: 20px;
-  position: absolute;
-  right: -10px;
-  bottom: -10px;
-  cursor: se-resize;
-}
-.semi-resizable-resizableHandler-bottomLeft {
-  width: 20px;
-  height: 20px;
-  position: absolute;
-  left: -10px;
-  bottom: -10px;
-  cursor: sw-resize;
-}
-.semi-resizable-resizableHandler-topLeft {
-  width: 20px;
-  height: 20px;
-  position: absolute;
-  left: -10px;
-  top: -10px;
-  cursor: nw-resize;
-}
 .semi-resizable-group {
   display: flex;
   position: relative;
@@ -97,24 +31,4 @@
   justify-content: center;
   background-color: var(--semi-color-fill-0);
   opacity: 1;
-}
-.semi-resizable-handler-vertical {
-  width: 100%;
-  height: 10px;
-  flex-shrink: 0;
-  cursor: row-resize;
-}
-.semi-resizable-handler-horizontal {
-  height: 100%;
-  width: 10px;
-  flex-shrink: 0;
-  cursor: col-resize;
-}
-.semi-resizable-background {
-  height: 100%;
-  width: 100%;
-  inset: 0;
-  z-index: 2010;
-  opacity: 0;
-  position: fixed;
 }

package/lib/es/resizable/resizable.scss

@@ -1,4 +1,5 @@
-@import "./variables.scss";
+@import './variables.scss';
+
 $module: #{$prefix}-resizable;
 
 .#{$module} {
@@ -12,83 +13,8 @@ $module: #{$prefix}-resizable;
         position: absolute;
         user-select: none;
         z-index: $z-resizable_handler;
-
-        // 基础样式
-        @mixin row-resize-base {
-            width: 100%;
-            height: $height-row-handler;
-            top: 0;
-            left: 0;
-            cursor: row-resize;
-        }
-
-        @mixin col-resize-base {
-            width: $width-col-handler;
-            height: 100%;
-            top: 0;
-            left: 0;
-            cursor: col-resize;
-        }
-
-        @mixin edge-resize-base {
-            width: $width-edge-handler;
-            height: $height-edge-handler;
-            position: absolute;
-        }
-
-        // 方向样式
-        &-top {
-            @include row-resize-base;
-            top: calc(-1 * $height-row-handler / 2);
-        }
-
-        &-right {
-            @include col-resize-base;
-            left: auto;
-            right: calc(-1 * $width-col-handler / 2);
-        }
-
-        &-bottom {
-            @include row-resize-base;
-            top: auto;
-            bottom: calc(-1 * $height-row-handler / 2);
-        }
-
-        &-left {
-            @include col-resize-base;
-            left: calc(-1 * $width-col-handler / 2);
-        }
-
-        // 边角样式
-        &-topRight {
-            @include edge-resize-base;
-            right: calc(-1 * $width-edge-handler / 2);
-            top: calc(-1 * $height-edge-handler / 2);
-            cursor: ne-resize;
-        }
-
-        &-bottomRight {
-            @include edge-resize-base;
-            right: calc(-1 * $width-edge-handler / 2);
-            bottom: calc(-1 * $height-edge-handler / 2);
-            cursor: se-resize;
-        }
-
-        &-bottomLeft {
-            @include edge-resize-base;
-            left: calc(-1 * $width-edge-handler / 2);
-            bottom: calc(-1 * $height-edge-handler / 2);
-            cursor: sw-resize;
-        }
-
-        &-topLeft {
-            @include edge-resize-base;
-            left: calc(-1 * $width-edge-handler / 2);
-            top: calc(-1 * $height-edge-handler / 2);
-            cursor: nw-resize;
-        }
     }
-
+    
     &-group {
         display: flex;
         position: relative;
@@ -111,28 +37,5 @@ $module: #{$prefix}-resizable;
         justify-content: center;
         background-color: var(--semi-color-fill-0);
         opacity: 1;
-
-        &-vertical {
-            width: 100%;
-            height: $height-vertical-handler;
-            flex-shrink: 0;
-            cursor: row-resize;
-        }
-
-        &-horizontal {
-            height: 100%;
-            width: $width-horizontal-handler;
-            flex-shrink: 0;
-            cursor: col-resize;
-        }
-    }
-
-    &-background {
-        height: 100%;
-        width: 100%;
-        inset: 0;
-        z-index: $z-resizable_background;
-        opacity: 0;
-        position: fixed;
     }
 }

package/lib/es/resizable/single/index.d.ts

@@ -1,5 +1,5 @@
 import BaseFoundation, { DefaultAdapter } from '../../base/foundation';
-import { Size, NumberSize, Direction } from "../types";
+import { Size, NumberSize, Direction } from "../singleConstants";
 export interface ResizableHandlerAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
     registerEvent: () => void;
     unregisterEvent: () => void;

package/lib/es/resizable/single/index.js

@@ -1,5 +1,5 @@
 import BaseFoundation from '../../base/foundation';
-import { DEFAULT_SIZE } from "../types";
+import { DEFAULT_SIZE } from "../singleConstants";
 import { getStringSize, getNumberSize, has, calculateNewMax, findNextSnap, snap, clamp } from "../utils";
 export class ResizableHandlerFoundation extends BaseFoundation {
   constructor(adapter) {

package/lib/es/resizable/singleConstants.d.ts

@@ -0,0 +1,105 @@
+export declare const directions: readonly ["top", "right", "bottom", "left", "topRight", "bottomRight", "bottomLeft", "topLeft"];
+export declare const directionStyles: {
+    readonly top: {
+        readonly top: "-5px";
+        readonly width: "100%";
+        readonly height: "10px";
+        readonly left: "0px";
+        readonly cursor: "row-resize";
+    };
+    readonly right: {
+        readonly left: any;
+        readonly right: "-5px";
+        readonly width: "10px";
+        readonly height: "100%";
+        readonly top: "0px";
+        readonly cursor: "col-resize";
+    };
+    readonly bottom: {
+        readonly top: any;
+        readonly bottom: "-5px";
+        readonly width: "100%";
+        readonly height: "10px";
+        readonly left: "0px";
+        readonly cursor: "row-resize";
+    };
+    readonly left: {
+        readonly left: "-5px";
+        readonly width: "10px";
+        readonly height: "100%";
+        readonly top: "0px";
+        readonly cursor: "col-resize";
+    };
+    readonly topRight: {
+        readonly right: "-10px";
+        readonly top: "-10px";
+        readonly cursor: "ne-resize";
+        readonly width: "20px";
+        readonly height: "20px";
+        readonly position: "absolute";
+    };
+    readonly bottomRight: {
+        readonly right: "-10px";
+        readonly bottom: "-10px";
+        readonly cursor: "se-resize";
+        readonly width: "20px";
+        readonly height: "20px";
+        readonly position: "absolute";
+    };
+    readonly bottomLeft: {
+        readonly left: "-10px";
+        readonly bottom: "-10px";
+        readonly cursor: "sw-resize";
+        readonly width: "20px";
+        readonly height: "20px";
+        readonly position: "absolute";
+    };
+    readonly topLeft: {
+        readonly left: "-10px";
+        readonly top: "-10px";
+        readonly cursor: "nw-resize";
+        readonly width: "20px";
+        readonly height: "20px";
+        readonly position: "absolute";
+    };
+};
+export type Direction = 'top' | 'right' | 'bottom' | 'left' | 'topRight' | 'bottomRight' | 'bottomLeft' | 'topLeft';
+export interface HandleClassName {
+    top?: string;
+    right?: string;
+    bottom?: string;
+    left?: string;
+    topRight?: string;
+    bottomRight?: string;
+    bottomLeft?: string;
+    topLeft?: string;
+}
+export type HandlerCallback = (e: MouseEvent, direction: Direction) => void;
+export interface Enable {
+    top?: boolean;
+    right?: boolean;
+    bottom?: boolean;
+    left?: boolean;
+    topRight?: boolean;
+    bottomRight?: boolean;
+    bottomLeft?: boolean;
+    topLeft?: boolean;
+}
+export interface Size {
+    width?: string | number;
+    height?: string | number;
+}
+export interface NumberSize {
+    width: number;
+    height: number;
+}
+export interface NewSize {
+    newHeight: number | string;
+    newWidth: number | string;
+}
+export declare const DEFAULT_SIZE: {
+    width: string;
+    height: string;
+};
+export type ResizeCallback = (size: Size, event: MouseEvent, direction: Direction) => void;
+export type ResizeStartCallback = (e: MouseEvent, dir: Direction) => void | boolean;

package/lib/es/resizable/singleConstants.js

@@ -0,0 +1,61 @@
+// single
+const rowStyleBase = {
+  width: '100%',
+  height: '10px',
+  top: '0px',
+  left: '0px',
+  cursor: 'row-resize'
+};
+const colStyleBase = {
+  width: '10px',
+  height: '100%',
+  top: '0px',
+  left: '0px',
+  cursor: 'col-resize'
+};
+const edgeStyleBase = {
+  width: '20px',
+  height: '20px',
+  position: 'absolute'
+};
+export const directions = ['top', 'right', 'bottom', 'left', 'topRight', 'bottomRight', 'bottomLeft', 'topLeft'];
+export const directionStyles = {
+  top: Object.assign(Object.assign({}, rowStyleBase), {
+    top: '-5px'
+  }),
+  right: Object.assign(Object.assign({}, colStyleBase), {
+    left: undefined,
+    right: '-5px'
+  }),
+  bottom: Object.assign(Object.assign({}, rowStyleBase), {
+    top: undefined,
+    bottom: '-5px'
+  }),
+  left: Object.assign(Object.assign({}, colStyleBase), {
+    left: '-5px'
+  }),
+  topRight: Object.assign(Object.assign({}, edgeStyleBase), {
+    right: '-10px',
+    top: '-10px',
+    cursor: 'ne-resize'
+  }),
+  bottomRight: Object.assign(Object.assign({}, edgeStyleBase), {
+    right: '-10px',
+    bottom: '-10px',
+    cursor: 'se-resize'
+  }),
+  bottomLeft: Object.assign(Object.assign({}, edgeStyleBase), {
+    left: '-10px',
+    bottom: '-10px',
+    cursor: 'sw-resize'
+  }),
+  topLeft: Object.assign(Object.assign({}, edgeStyleBase), {
+    left: '-10px',
+    top: '-10px',
+    cursor: 'nw-resize'
+  })
+};
+export const DEFAULT_SIZE = {
+  width: 'auto',
+  height: 'auto'
+};

package/lib/es/resizable/utils.js

@@ -86,10 +86,10 @@ export const judgeConstraint = function (newSize, min, max, parentSize) {
   max = max !== null && max !== void 0 ? max : "100%";
   const minSize = getPixelSize(min, parentSize);
   const maxSize = getPixelSize(max, parentSize);
-  if (newSize < minSize + offset) {
+  if (newSize <= minSize + offset) {
     return true;
   }
-  if (newSize > maxSize) {
+  if (newSize >= maxSize - offset) {
     return true;
   }
   return false;
@@ -99,11 +99,11 @@ export const adjustNewSize = (newSize, min, max, parentSize, offset) => {
   max = max !== null && max !== void 0 ? max : "100%";
   const minSize = getPixelSize(min, parentSize);
   const maxSize = getPixelSize(max, parentSize);
-  if (newSize < minSize + offset) {
+  if (newSize <= minSize + offset) {
     return minSize + offset;
   }
-  if (newSize > maxSize) {
-    return maxSize;
+  if (newSize >= maxSize - offset) {
+    return maxSize - offset;
   }
   return newSize;
 };

package/lib/es/resizable/variables.scss

@@ -1,9 +1 @@
 $z-resizable_handler: 2000 !default; // 伸缩框组件中handler的z-index
-$z-resizable_background: 2010; // 伸缩框组件中背景的z-index
-
-$height-row-handler: 10px; // 单个伸缩框中上下handler的高度
-$width-col-handler: 10px;  // 单个伸缩框中左右handler的宽度
-$width-edge-handler: 20px; // 单个伸缩框中边角handler的宽度
-$height-edge-handler: 20px; // 单个伸缩框中边角handler的高度
-$width-horizontal-handler: 10px; // 组合伸缩框中水平方向handler的宽度
-$height-vertical-handler: 10px;  // 组合伸缩框中垂直方向handler的高度

package/lib/es/table/table.css

@@ -140,7 +140,8 @@
   cursor: pointer;
 }
 .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-row-head-clickSort:hover {
-  background: var(--semi-color-fill-0);
+  background-image: linear-gradient(0deg, var(--semi-color-fill-0), var(--semi-color-fill-0));
+  background-color: var(--semi-color-bg-0);
 }
 .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-row-head-clickSort:hover.semi-table-cell-fixed-left::before, .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-row-head-clickSort:hover.semi-table-cell-fixed-right::before {
   background-color: transparent;

package/lib/es/table/table.scss

@@ -145,7 +145,8 @@ $module: #{$prefix}-table;
                 &.#{$module}-row-head-clickSort {
                     cursor: pointer;
                     &:hover {
-                        background: $color-table_th-clickSort-bg-hover;
+                        background-image: linear-gradient(0deg, $color-table_th-clickSort-bg-hover, $color-table_th-clickSort-bg-hover);
+                        background-color: $color-table_cell-bg-hover;
                         
                         &.#{$module}-cell-fixed {
                             &-left,

package/lib/es/transfer/transfer.css

@@ -44,6 +44,7 @@
   margin-bottom: 8px;
   margin-left: 12px;
   color: var(--semi-color-text-2);
+  flex-shrink: 0;
 }
 .semi-transfer-header-all {
   font-weight: 600;

package/lib/es/transfer/transfer.scss

@@ -53,6 +53,7 @@ $module: #{$prefix}-transfer;
         margin-bottom: $spacing-transfer_header-marginBottom;
         margin-left: $spacing-transfer_header-marginLeft;
         color: $color-transfer_header-text;
+        flex-shrink: 0;
 
         &-all {
             font-weight: $font-transfer_header_all-fontWeight;

package/lib/es/treeSelect/treeSelect.css

@@ -136,12 +136,14 @@
 }
 .semi-tree-select-selection-TriggerSearchItem-placeholder {
   opacity: 0.6;
-  z-index: -1;
 }
 .semi-tree-select-selection-TriggerSearchItem-disabled {
   cursor: not-allowed;
   color: var(--semi-color-disabled-text);
 }
+.semi-tree-select-selection .semi-tree-select-triggerSingleSearch-upper {
+  z-index: 1;
+}
 .semi-tree-select-selection .semi-tree-select-triggerSingleSearch-wrapper {
   width: 100%;
 }

package/lib/es/treeSelect/treeSelect.scss

@@ -165,7 +165,6 @@ $module: #{$prefix}-tree-select;
             
             &-placeholder {
                 opacity: .6;
-                z-index: -1;
             }
 
             &-disabled {
@@ -174,6 +173,10 @@ $module: #{$prefix}-tree-select;
             }
         }
 
+        .#{$module}-triggerSingleSearch-upper {
+            z-index: 1;
+        }
+
         .#{$module}-triggerSingleSearch-wrapper{
             width: 100%;
 

package/package.json

@@ -1,13 +1,13 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.69.1-alpha.0",
+    "version": "2.69.2",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",
         "prepublishOnly": "npm run build:lib"
     },
     "dependencies": {
-        "@douyinfe/semi-animation": "2.69.1-alpha.0",
+        "@douyinfe/semi-animation": "2.69.2",
         "@mdx-js/mdx": "^3.0.1",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
@@ -28,7 +28,7 @@
         "*.scss",
         "*.css"
     ],
-    "gitHead": "8650cd10aad7b4e8176b26fc9efb3bde1e592d96",
+    "gitHead": "12a3d0cddd5dbb96b2d9e347ad20862cf5bc5049",
     "devDependencies": {
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",

package/resizable/foundation.ts

@@ -1,15 +1,26 @@
-export { 
-    ResizableHandlerAdapter, 
+import { 
     ResizableHandlerFoundation, 
     ResizableFoundation, 
-    ResizableAdapter 
 } from './single';
 
+import { 
+    ResizeGroupFoundation,
+    ResizeItemFoundation,
+    ResizeHandlerFoundation
+} from './group';
+
+import type { ResizableHandlerAdapter, ResizableAdapter } from './single';
+import type { ResizeGroupAdapter, ResizeItemAdapter, ResizeHandlerAdapter } from './group';
+
 export { 
+    ResizableHandlerAdapter, 
+    ResizableHandlerFoundation, 
+    ResizableFoundation, 
+    ResizableAdapter,
     ResizeGroupAdapter,
     ResizeItemAdapter,
     ResizeHandlerAdapter,
     ResizeGroupFoundation,
     ResizeItemFoundation,
     ResizeHandlerFoundation
-} from './group';
+};