@douyinfe/semi-foundation 2.70.0-alpha.2 → 2.70.0

package/lib/cjs/resizable/resizable.scss

@@ -1,5 +1,4 @@
-@import './variables.scss';
-
+@import "./variables.scss";
 $module: #{$prefix}-resizable;
 
 .#{$module} {
@@ -13,8 +12,83 @@ $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;
@@ -37,5 +111,28 @@ $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/cjs/resizable/single/index.d.ts

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

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ResizableHandlerFoundation = exports.ResizableFoundation = void 0;
 var _foundation = _interopRequireDefault(require("../../base/foundation"));
-var _singleConstants = require("../singleConstants");
+var _types = require("../types");
 var _utils = require("../utils");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 class ResizableHandlerFoundation extends _foundation.default {
@@ -303,7 +303,7 @@ class ResizableFoundation extends _foundation.default {
   }
   get propSize() {
     const porps = this.getProps();
-    return porps.size || porps.defaultSize || _singleConstants.DEFAULT_SIZE;
+    return porps.size || porps.defaultSize || _types.DEFAULT_SIZE;
   }
   get size() {
     let width = 0;

package/lib/cjs/resizable/types.d.ts

@@ -0,0 +1,41 @@
+export declare const directions: readonly ["top", "right", "bottom", "left", "topRight", "bottomRight", "bottomLeft", "topLeft"];
+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/cjs/resizable/types.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.directions = exports.DEFAULT_SIZE = void 0;
+// single
+const directions = exports.directions = ['top', 'right', 'bottom', 'left', 'topRight', 'bottomRight', 'bottomLeft', 'topLeft'];
+const DEFAULT_SIZE = exports.DEFAULT_SIZE = {
+  width: 'auto',
+  height: 'auto'
+};

package/lib/cjs/resizable/utils.js

@@ -101,10 +101,10 @@ 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 - offset) {
+  if (newSize > maxSize) {
     return true;
   }
   return false;
@@ -115,11 +115,11 @@ 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 - offset) {
-    return maxSize - offset;
+  if (newSize > maxSize) {
+    return maxSize;
   }
   return newSize;
 };

package/lib/cjs/resizable/variables.scss

@@ -1 +1,9 @@
 $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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/tree/treeUtil.d.ts

@@ -83,6 +83,6 @@ export declare function getValueOrKey(data: any, keyMaps?: KeyMapProps): any;
 export declare function normalizeValue(value: any, withObject: boolean, keyMaps?: KeyMapProps): any;
 export declare function updateKeys(keySet: Set<string> | string[], keyEntities: KeyEntities): string[];
 export declare function calcDisabledKeys(keyEntities: KeyEntities, keyMaps?: KeyMapProps): Set<string>;
-export declare function calcDropRelativePosition(event: any, treeNode: any): 0 | 1 | -1;
+export declare function calcDropRelativePosition(event: any, treeNode: any): 1 | -1 | 0;
 export declare function getDragNodesKeys(key: string, keyEntities: KeyEntities): string[];
 export declare function calcDropActualPosition(pos: string, relativeDropPos: any): any;

package/lib/cjs/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/cjs/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/lib/es/chat/foundation.d.ts

@@ -46,6 +46,8 @@ export interface ChatAdapter<P = Record<string, any>, S = Record<string, any>> e
     setUploadAreaVisible: (visible: boolean) => void;
     manualUpload: (e: any) => void;
     getDropAreaElement: () => HTMLDivElement;
+    getDragStatus: () => boolean;
+    setDragStatus: (status: boolean) => void;
 }
 export default class ChatFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<ChatAdapter<P, S>, P, S> {
     animation: any;
@@ -69,6 +71,8 @@ export default class ChatFoundation<P = Record<string, any>, S = Record<string,
     dislikeMessage: (message: Message) => void;
     resetMessage: (message: Message) => void;
     handleDragOver: (e: any) => void;
+    handleDragStart: (e: any) => void;
+    handleDragEnd: (e: any) => void;
     handleContainerDragOver: (e: any) => void;
     handleContainerDrop: (e: any) => void;
     handleContainerDragLeave: (e: any) => void;

package/lib/es/chat/foundation.js

@@ -228,8 +228,18 @@ export default class ChatFoundation extends BaseFoundation {
       onMessageReset === null || onMessageReset === void 0 ? void 0 : onMessageReset(message);
     };
     this.handleDragOver = e => {
+      const dragStatus = this._adapter.getDragStatus();
+      if (dragStatus) {
+        return;
+      }
       this._adapter.setUploadAreaVisible(true);
     };
+    this.handleDragStart = e => {
+      this._adapter.setDragStatus(true);
+    };
+    this.handleDragEnd = e => {
+      this._adapter.setDragStatus(false);
+    };
     this.handleContainerDragOver = e => {
       handlePrevent(e);
     };
@@ -246,7 +256,8 @@ export default class ChatFoundation extends BaseFoundation {
       // 鼠标移动至 container 的子元素，则不做任何操作
       // If the mouse moves to the child element of container, no operation will be performed.
       const dropAreaElement = this._adapter.getDropAreaElement();
-      if (dropAreaElement !== e.target && dropAreaElement.contains(e.target)) {
+      const enterTarget = e.relatedTarget;
+      if (dropAreaElement.contains(enterTarget)) {
         return;
       }
       /**

package/lib/es/datePicker/yearAndMonthFoundation.js

@@ -48,9 +48,9 @@ export default class YearAndMonthFoundation extends BaseFoundation {
     const right = strings.PANEL_TYPE_RIGHT;
     const month = copy(currentMonth);
     month[panelType] = item.month;
-    // make sure the right panel time is always less than the left panel time
+    // Make sure the time on the right panel is always greater than or equal to the time on the left panel
     if (type === 'monthRange' && panelType === left && currentYear[left] === currentYear[right] && item.value > month[right]) {
-      month[right] = item.month + 1;
+      month[right] = item.month;
     }
     this._adapter.setCurrentMonth(month);
     this._adapter.notifySelectMonth(month);
@@ -67,8 +67,17 @@ export default class YearAndMonthFoundation extends BaseFoundation {
       months,
       currentMonth
     } = this._adapter.getStates();
+    const oppositeType = panelType === strings.PANEL_TYPE_LEFT ? 'right' : 'left';
     const currentDate = setYear(Date.now(), item.year);
     const isCurrentMonthDisabled = disabledDate(setMonth(currentDate, currentMonth[panelType] - 1));
+    // whether the date on the opposite is legal
+    const isOppositeMonthDisabled = disabledDate(setMonth(setYear(Date.now(), year[oppositeType]), currentMonth[oppositeType] - 1));
+    if (!isCurrentMonthDisabled && !isOppositeMonthDisabled) {
+      // all panel Date is legal
+      return;
+    }
+    let finalYear = year;
+    let finalMonth = currentMonth;
     if (isCurrentMonthDisabled) {
       const currentIndex = months.findIndex(_ref => {
         let {
@@ -92,14 +101,36 @@ export default class YearAndMonthFoundation extends BaseFoundation {
           return !disabledDate(setMonth(currentDate, month - 1));
         });
       }
-      if (validMonth) {
-        const month = copy(currentMonth);
-        month[panelType] = validMonth.month;
-        // change year and month same time
-        this._adapter.setCurrentYearAndMonth(year, month);
-        this._adapter.notifySelectYearAndMonth(year, month);
+      if (validMonth && !isOppositeMonthDisabled) {
+        // only currentPanel Date is illegal
+        // just need to modify the month of the current panel
+        finalMonth[panelType] = validMonth.month;
+      } else if (validMonth && isOppositeMonthDisabled) {
+        // all panel Date is illegal
+        // change the value to the legal value calculated by the current panel
+        finalYear = {
+          'left': item.year,
+          'right': item.year
+        };
+        finalMonth = {
+          'left': validMonth.month,
+          'right': validMonth.month
+        };
       }
+    } else if (!isCurrentMonthDisabled && isOppositeMonthDisabled) {
+      // only opposite panel Date is illegal
+      // change the value to the legal value in the current panel
+      finalYear = {
+        'left': item.year,
+        'right': item.year
+      };
+      finalMonth = {
+        'left': currentMonth[panelType],
+        'right': currentMonth[panelType]
+      };
     }
+    this._adapter.setCurrentYearAndMonth(finalYear, finalMonth);
+    this._adapter.notifySelectYearAndMonth(finalYear, finalMonth);
   }
   backToMain() {
     this._adapter.notifyBackToMain();

package/lib/es/markdownRender/foundation.d.ts

@@ -10,6 +10,7 @@ export interface MarkdownRenderBaseProps {
     format: "md" | "mdx";
     remarkPlugins?: PluggableList;
     rehypePlugins?: PluggableList;
+    remarkGfm?: boolean;
 }
 export interface MarkdownRenderBaseState {
     MDXContentComponent: any;

package/lib/es/markdownRender/foundation.js

@@ -32,17 +32,22 @@ class MarkdownRenderFoundation extends BaseFoundation {
   constructor() {
     super(...arguments);
     this.getOptions = () => {
-      var _a, _b, _c, _d;
+      var _a, _b, _c;
+      const enableRemarkGfm = this._adapter.getProp("remarkGfm");
+      const remarkPlugins = [...((_a = this.getProp("remarkPlugins")) !== null && _a !== void 0 ? _a : [])];
+      if (enableRemarkGfm) {
+        remarkPlugins.unshift(remarkGfm);
+      }
       return {
         evaluateOptions: {
-          remarkPlugins: [remarkGfm, ...((_a = this.getProp("remarkPlugins")) !== null && _a !== void 0 ? _a : [])],
+          remarkPlugins: remarkPlugins,
           rehypePlugins: (_b = this.getProp("rehypePlugins")) !== null && _b !== void 0 ? _b : [],
           format: this.getProp("format")
         },
         compileOptions: {
           format: this.getProp("format"),
-          remarkPlugins: [remarkGfm, ...((_c = this.getProp("remarkPlugins")) !== null && _c !== void 0 ? _c : [])],
-          rehypePlugins: (_d = this.getProp("rehypePlugins")) !== null && _d !== void 0 ? _d : []
+          remarkPlugins: remarkPlugins,
+          rehypePlugins: (_c = this.getProp("rehypePlugins")) !== null && _c !== void 0 ? _c : []
         },
         runOptions: {}
       };

package/lib/es/overflowList/constants.d.ts

@@ -2,7 +2,7 @@ declare const cssClasses: {
     PREFIX: string;
 };
 declare const strings: {
-    BOUNDARY_SET: ("start" | "end")[];
+    BOUNDARY_SET: ("end" | "start")[];
     POSITION_SET: string[];
     MODE_SET: string[];
     MODE_MAP: {

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

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

package/lib/es/resizable/foundation.js

@@ -1,4 +1,2 @@
-import { ResizableHandlerFoundation, ResizableFoundation } from './single';
-export { ResizableHandlerFoundation, ResizableFoundation };
-import { ResizeGroupFoundation, ResizeItemFoundation, ResizeHandlerFoundation } from './group';
-export { ResizeGroupFoundation, ResizeItemFoundation, ResizeHandlerFoundation };
+export { ResizableHandlerFoundation, ResizableFoundation } from './single';
+export { ResizeGroupFoundation, ResizeItemFoundation, ResizeHandlerFoundation } from './group';

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

@@ -1,5 +1,6 @@
+/// <reference types="lodash" />
 import BaseFoundation, { DefaultAdapter } from '../../base/foundation';
-import { ResizeStartCallback, ResizeCallback } from "../singleConstants";
+import { ResizeStartCallback, ResizeCallback } from "../types";
 export interface ResizeHandlerAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
     registerEvents: () => void;
     unregisterEvents: () => void;
@@ -34,10 +35,11 @@ export interface ResizeGroupAdapter<P = Record<string, any>, S = Record<string,
 export declare class ResizeGroupFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<ResizeGroupAdapter<P, S>, P, S> {
     constructor(adapter: ResizeGroupAdapter<P, S>);
     get groupRef(): HTMLDivElement | null;
+    get groupSize(): number;
     direction: 'horizontal' | 'vertical';
     itemMinusMap: Map<number, number>;
     totalMinus: number;
-    avaliableSize: number;
+    itemPercentMap: Map<number, number>;
     init(): void;
     get window(): Window | null;
     registerEvents: () => void;
@@ -45,6 +47,7 @@ export declare class ResizeGroupFoundation<P = Record<string, any>, S = Record<s
     onResizeStart: (handlerIndex: number, e: MouseEvent) => void;
     onResizing: (e: MouseEvent) => void;
     onResizeEnd: (e: MouseEvent) => void;
-    calculateSpace: () => void;
+    initSpace: () => void;
+    ensureConstraint: import("lodash").DebouncedFunc<() => void>;
     destroy(): void;
 }