@douyinfe/semi-foundation 2.51.4 → 2.52.0-beta.0

package/lib/es/avatar/variables.scss

@@ -24,29 +24,85 @@ $font-avatar_extra_large-lineHeight: 77px; // 文本行高 - 超大
 
 $radius-avatar: var(--semi-border-radius-circle); // 头像圆角
 
-$width-avatar_extra_large-border: 3px; // 头像描边尺寸 - 超大
-$spacing-avatar_extra_large-marginLeft: -32px; // 头像左侧外边距 - 超大
+$width-avatar_extra_large-border: 3px; // 头像组头像描边尺寸 - 超大
+$spacing-avatar_extra_large-marginLeft: -32px; // 头像组头像左侧外边距 - 超大
 
-$width-avatar_large-border: 3px; // 头像描边尺寸 - 大
+$width-avatar_large-border: 3px; // 头像组头像描边尺寸 - 大
 $spacing-avatar_large-marginLeft: -18px; // 头像左侧外边距 - 大
 
-$width-avatar_medium-border: 2px; // 头像描边尺寸 - 中
+$width-avatar_medium-border: 2px; // 头像组头像描边尺寸 - 中
 $spacing-avatar_medium-marginLeft: -12px; // 头像左侧外边距 - 中
 
-$width-avatar_default-border: 2px; // 头像描边尺寸 - 默认
+$width-avatar_default-border: 2px; // 头像组头像描边尺寸 - 默认
 $spacing-avatar_default-marginLeft: -12px; // 头像左侧外边距 - 默认
 
-$width-avatar_small-border: 2px; // 头像描边尺寸 - 小
+$width-avatar_small-border: 2px; // 头像组头像描边尺寸 - 小
 $spacing-avatar_small-marginLeft: -12px; // 头像左侧外边距 - 小
 
-$width-avatar_extra_small-border: 1px; // 头像描边尺寸 - 超小
+$width-avatar_extra_small-border: 1px; // 头像组头像描边尺寸 - 超小
 $spacing-avatar_extra_small-marginLeft: -10px; // 头像左侧外边距 - 超小
 
-$width-avatar_extra_extra_small-border: 1px; // 头像描边尺寸 - 极小
+$width-avatar_extra_extra_small-border: 1px; // 头像组头像描边尺寸 - 极小
 $spacing-avatar_extra_extra_small-marginLeft: -4px; // 头像左侧外边距 - 极小
-
 $width-avatar-outline: 2px; //头像聚焦轮廓宽度
 
+$width-avatar_additional-border: 1.5px; // 额外描边尺寸
+$color-avatar_additional-border: var(--semi-color-primary); // 额外描边颜色
+$spacing-avatar_additional-borderGap: 2px; // 额外描边与内侧间距
+
+$width-avatar-bottom_slot_circle_small: 12px; // small 头像底部 slot 圆形半径
+$width-avatar-bottom_slot_circle_default: 16px; // default 头像底部 slot 圆形半径
+$width-avatar-bottom_slot_circle_medium: 18px; // medium 头像底部 slot 圆形半径
+$width-avatar-bottom_slot_circle_large: 28px; // large 头像底部 slot 圆形半径
+$width-avatar-bottom_slot_circle_extra_large: 28px; // extra large 头像底部 slot 圆形半径
+$color-avatar-bottom_slot_bg:var(--semi-color-primary); // 头像底部 slot 背景色
+
+$radius-avatar-bottom_slot_square:4px;  // 底部 slot square 圆角
+$font-avatar_bottom_slot-small-fontSize: 5px; // small 底部 slot 文字大小
+$font-avatar_bottom_slot-default-fontSize: 12px; // default 底部 slot 文字大小
+$font-avatar_bottom_slot-medium-fontSize: 12px; // medium 底部 slot 文字大小
+$font-avatar_bottom_slot-large-fontSize: 12px; // large 底部 slot 文字大小
+$font-avatar_bottom_slot-extra_large-fontSize: 14px; // extra large 底部 slot 文字大小
+$spacing-avatar-bottom_slot_square-paddingX:4px; // 底部 slot square 形状左边距
+$spacing-avatar-bottom_slot_square-paddingY:1px; //底部 slot square 形状右边距
+
+$font-avatar_top_slot-small-fontSize: 5px; // small 顶部 slot 文字大小
+$font-avatar_top_slot-default-fontSize: 6px; // default 顶部 slot 文字大小
+$font-avatar_top_slot-medium-fontSize: 8px; // medium 顶部 slot 文字大小
+$font-avatar_top_slot-large-fontSize: 14px; // large 顶部 slot 文字大小
+$font-avatar_top_slot-extra_large-fontSize: 16px; // extra large 顶部 slot 文字大小
+
+$spacing-avatar-top_slot_small-content-marginTop: 0px; // small 顶部文字 marginTop
+$spacing-avatar-top_slot_default-content-marginTop: -2px; // default 顶部文字 marginTop
+$spacing-avatar-top_slot_medium-content-marginTop: 0px; // medium 顶部文字 marginTop
+$spacing-avatar-top_slot_large-content-marginTop: 0px; // large 顶部文字 marginTop
+$spacing-avatar-top_slot_extra_large-content-marginTop: 0px; // extra large 顶部文字 marginTop 
+
+$color-avatar-bottom_slot_square-border:var(--semi-color-bg-0); // 底部 square 边框颜色
+$width-avatar-bottom_slot_square_small-border:2px; // small 头像底部 square 边框宽度
+$width-avatar-bottom_slot_square_default-border:2px; // default 头像底部 square 边框宽度
+$width-avatar-bottom_slot_square_medium-border:2px; // medium 头像底部 square 边框宽度 
+$width-avatar-bottom_slot_square_large-border:2px; // large 头像底部 square 边框宽度
+$width-avatar-bottom_slot_square_extra_large-border:2px; // extra large 头像底部 square 边框宽度
+
+$color-avatar-top_slot_text:var(--semi-color-bg-0); //顶部 Slot 文字颜色
+$color-avatar-top_slot_gradient_start: var(--semi-color-primary); // 顶部 slot 渐变起始色
+$color-avatar-top_slot_gradient_end: var(--semi-color-primary); //  顶部 slot 渐变结束色
+
+
+$spacing-avatar-top_slot_small-shift: -28px; // small 顶部 slot 偏移量, 和 scale 一起控制 slot 的位置
+$spacing-avatar-top_slot_default-shift: -32px; // default 顶部 slot 偏移量, 和 scale 一起控制 slot 的位置
+$spacing-avatar-top_slot_medium-shift: -30px; // medium 顶部 slot 偏移量, 和 scale 一起控制 slot 的位置
+$spacing-avatar-top_slot_large-shift: -30px; // large 顶部 slot 偏移量, 和 scale 一起控制 slot 的位置
+$spacing-avatar-top_slot_extra_large-shift: -32px; // extra large 顶部 slot 偏移量, 和 scale 一起控制 slot 的位置
+
+$spacing-avatar-top_slot_small-scale: 0.4; // small 顶部 slot 缩放比例
+$spacing-avatar-top_slot_default-scale: 0.7; // default 顶部 slot 缩放比例
+$spacing-avatar-top_slot_medium-scale: 0.8; // medium 顶部 slot 缩放比例
+$spacing-avatar-top_slot_large-scale: 1.1; // large 顶部 slot 缩放比例
+$spacing-avatar-top_slot_extra_large-scale: 1.4; // large 顶部 slot 缩放比例 
+
+
 // radius
 $radius-avatar_extra_extra_small: 3px; // 极小尺寸头像的圆角
 $radius-avatar_extra_small: 3px; // 超小尺寸头像的圆角
@@ -54,4 +110,4 @@ $radius-avatar_small: 3px; // 小尺寸头像的圆角
 $radius-avatar_default: 3px; // 默认尺寸头像的圆角
 $radius-avatar_medium: 3px; // 中尺寸头像的圆角
 $radius-avatar_large: 6px; // 大尺寸头像的圆角
-$radius-avatar_extra_large: 12px; // 超大尺寸头像的圆角
+$radius-avatar_extra_large: 12px; // 超大尺寸头像的圆角

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

@@ -24,7 +24,6 @@ export interface BasicEntity {
     parent?: BasicEntity;
     parentKey?: string;
     path: Array<string>;
-    pos: string;
     valuePath: Array<string>;
 }
 export interface BasicCascaderData {
@@ -240,7 +239,16 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
      * @param {boolean} curCheckedStatus checked status of node
      */
     calcCheckedKeys(key: string, curCheckedStatus: boolean): {
-        checkedKeys: Set<string>;
+        checkedKeys: Set<string>; /**
+         * If selectedKeys does not meet the update conditions,
+         * and state.selectedKeys is the same as selectedKeys
+         * at this time, state.selectedKeys should be cleared.
+         * A typical scenario is:
+         * The originally selected node is the leaf node, but
+         * after props.treeData is dynamically updated, the node
+         * is a non-leaf node. At this point, selectedKeys should
+         * be cleared.
+         */
         halfCheckedKeys: Set<string>;
     };
     handleInputChange(sugInput: string): void;
@@ -252,6 +260,5 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
     getRenderData(): BasicEntity[] | BasicData[];
     getFilteredData(): BasicData[];
     handleListScroll(e: any, ind: number): void;
-    handleTagRemoveByKey: (key: string) => void;
-    handleTagRemoveInTrigger: (pos: string) => void;
+    handleTagRemove(e: any, tagValuePath: string[]): void;
 }

package/lib/es/cascader/foundation.js

@@ -11,7 +11,7 @@ import _get from "lodash/get";
 import _isEqual from "lodash/isEqual";
 import BaseFoundation from '../base/foundation';
 import { filter, findAncestorKeys, calcCheckedKeysForUnchecked, calcCheckedKeysForChecked, calcCheckedKeys, findDescendantKeys, normalizeKeyList } from '../tree/treeUtil';
-import { convertDataToEntities, normalizedArr, isValid, calcMergeType, getKeysByValuePath, getKeyByPos } from './util';
+import { convertDataToEntities, normalizedArr, isValid, calcMergeType, getKeysByValuePath } from './util';
 import { strings } from './constants';
 import isEnterPress from '../utils/isEnterPress';
 export default class CascaderFoundation extends BaseFoundation {
@@ -22,28 +22,6 @@ export default class CascaderFoundation extends BaseFoundation {
         isSearching: false
       });
     };
-    this.handleTagRemoveByKey = key => {
-      var _a, _b;
-      const {
-        keyEntities
-      } = this.getStates();
-      const {
-        disabled
-      } = this.getProps();
-      if (disabled) {
-        /* istanbul ignore next */
-        return;
-      }
-      const removedItem = (_a = keyEntities[key]) !== null && _a !== void 0 ? _a : {};
-      !((_b = removedItem === null || removedItem === void 0 ? void 0 : removedItem.data) === null || _b === void 0 ? void 0 : _b.disable) && this._handleMultipleSelect(removedItem);
-    };
-    this.handleTagRemoveInTrigger = pos => {
-      const {
-        treeData
-      } = this.getStates();
-      const key = getKeyByPos(pos, treeData);
-      this.handleTagRemoveByKey(key);
-    };
   }
   init() {
     const isOpen = this.getProp('open') || this.getProp('defaultOpen');
@@ -877,4 +855,18 @@ export default class CascaderFoundation extends BaseFoundation {
       activeNode: data
     });
   }
+  handleTagRemove(e, tagValuePath) {
+    const {
+      keyEntities
+    } = this.getStates();
+    const {
+      disabled
+    } = this.getProps();
+    if (disabled) {
+      /* istanbul ignore next */
+      return;
+    }
+    const removedItem = Object.values(keyEntities).filter(item => _isEqual(item.valuePath, tagValuePath))[0];
+    !_isEmpty(removedItem) && !removedItem.data.disabled && this._handleMultipleSelect(removedItem);
+  }
 }

package/lib/es/cascader/util.d.ts

@@ -3,6 +3,5 @@ export declare function normalizedArr(val: any): any[];
 export declare function getKeysByValuePath(valuePath: (string | number)[][] | (string | number)[]): string[];
 export declare function getKeyByValuePath(valuePath: (string | number)[]): string;
 export declare function getValuePathByKey(key: string): string[];
-export declare function getKeyByPos(pos: string, treeData: any): string;
 export declare function convertDataToEntities(dataNodes: any): any;
 export declare function calcMergeType(autoMergeValue: boolean, leafOnly: boolean): string;

package/lib/es/cascader/util.js

@@ -24,12 +24,10 @@ function traverseDataNodes(treeNodes, callback) {
     // Process node if is not root
     if (node) {
       const key = parent ? `${parent.key}${VALUE_SPLIT}${node.value}` : node.value;
-      const pos = parent ? getPosition(parent.pos, ind) : `${ind}`;
       item = {
         data: Object.assign({}, node),
         ind,
         key,
-        pos,
         level: parent ? parent.level + 1 : 0,
         parentKey: parent ? parent.key : null,
         path: parent ? [...parent.path, key] : [key],
@@ -62,17 +60,6 @@ export function getKeyByValuePath(valuePath) {
 export function getValuePathByKey(key) {
   return key.split(VALUE_SPLIT);
 }
-export function getKeyByPos(pos, treeData) {
-  const posArr = pos.split('-').map(item => Number(item));
-  let resultData = treeData;
-  let valuePath = [];
-  posArr.forEach((item, index) => {
-    var _a;
-    resultData = index === 0 ? resultData[item] : (_a = resultData === null || resultData === void 0 ? void 0 : resultData.children) === null || _a === void 0 ? void 0 : _a[item];
-    valuePath.push(resultData === null || resultData === void 0 ? void 0 : resultData.value);
-  });
-  return getKeyByValuePath(valuePath);
-}
 export function convertDataToEntities(dataNodes) {
   const keyEntities = {};
   traverseDataNodes(dataNodes, data => {

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

@@ -30,8 +30,8 @@ export type DisabledDateOptions = {
     rangeInputFocus?: 'rangeStart' | 'rangeEnd' | false;
 };
 export type PresetType = {
-    start?: string | Date | number;
-    end?: string | Date | number;
+    start?: BaseValueType | (() => BaseValueType);
+    end?: BaseValueType | (() => BaseValueType);
     text?: string;
 };
 export type TriggerRenderProps = {

package/lib/es/datePicker/foundation.js

@@ -15,7 +15,6 @@ import { strings as inputStrings } from '../input/constants';
 import getInsetInputFormatToken from './_utils/getInsetInputFormatToken';
 import getInsetInputValueFromInsetInputStr from './_utils/getInsetInputValueFromInsetInputStr';
 import isValidTimeZone from './_utils/isValidTimeZone';
-import warning from '../utils/warning';
 /**
  * The datePicker foundation.js is responsible for maintaining the date value and the input box value, as well as the callback of both
  *  task 1. Accept the selected date change, update the date value, and update the input box value according to the date = > Notify the change
@@ -119,8 +118,6 @@ export default class DatePickerFoundation extends BaseFoundation {
             parsedV = zonedTimeToUtc(parsedV, prevTimeZone);
           }
           result.push(isValidTimeZone(timeZone) ? utcToZonedTime(parsedV, timeZone) : parsedV);
-        } else {
-          warning(true, `[Semi DatePicker] value cannot be parsed, value: ${String(v)}`);
         }
       }
     }
@@ -880,17 +877,19 @@ export default class DatePickerFoundation extends BaseFoundation {
       timeZone
     } = this.getProps();
     const prevTimeZone = this.getState('prevTimezone');
+    const start = typeof item.start === 'function' ? item.start() : item.start;
+    const end = typeof item.end === 'function' ? item.end() : item.end;
     let value;
     switch (type) {
       case 'month':
       case 'dateTime':
       case 'date':
-        value = this.parseWithTimezone([item.start], timeZone, prevTimeZone);
+        value = this.parseWithTimezone([start], timeZone, prevTimeZone);
         this.handleSelectedChange(value);
         break;
       case 'dateTimeRange':
       case 'dateRange':
-        value = this.parseWithTimezone([item.start, item.end], timeZone, prevTimeZone);
+        value = this.parseWithTimezone([start, end], timeZone, prevTimeZone);
         this.handleSelectedChange(value, {
           needCheckFocusRecord: false
         });

package/lib/es/input/input.css

@@ -553,6 +553,18 @@
   margin-bottom: 0;
 }
 
+.semi-input-only_border {
+  background: transparent;
+  border-color: var(--semi-color-border);
+}
+.semi-input-only_border:hover {
+  background: transparent;
+  border-color: var(--semi-color-border);
+}
+.semi-input-only_border:focus-within {
+  background: transparent;
+}
+
 .semi-input-borderless:not(:focus-within):not(:hover) {
   background-color: transparent;
   border-color: transparent;

package/lib/es/input/input.scss

@@ -85,7 +85,7 @@ $module: #{$prefix}-input;
         border: $color-input_default-border-focus solid $width-input_wrapper_focus-border;
 
         &:hover {
-            background-color: $color-input_default-bg-focus;
+            background-color: $color-input_default-bg-focus-hover;
             border-color: $color-input_default-border-focus;
         }
 
@@ -690,7 +690,18 @@ $module: #{$prefix}-input;
     }
 }
 
+.#{$module}-only_border{
+    background: transparent;
+    &:hover{
+        background: transparent;
+        border-color: $color_input-default-border-only_border-hover;
+    }
+    &:focus-within{
+        background: transparent;
+    }
+    border-color: $color_input-default-border-only_border-default;
 
+}
 
 .#{$module}-borderless{
 
@@ -713,8 +724,6 @@ $module: #{$prefix}-input;
     }
 
 
-
-
 }
 
 @import "./rtl.scss";

package/lib/es/input/variables.scss

@@ -13,6 +13,8 @@ $color-input_default-bg-focus: var(--semi-color-fill-0); // 输入框背景颜
 $color-input_default-border-focus: var(--semi-color-focus-border); // 输入框描边颜色 - 选中
 $color-input_icon-outline: var(--semi-color-primary-light-active); // 输入框 icon outline 颜色
 
+$color-input_default-bg-focus-hover: $color-input_default-bg-focus; // 输入框背景颜色 - 选中悬浮
+
 // error
 $color-input_danger-bg-default: var(--semi-color-danger-light-default); // 错误输入框背景颜色 - 默认
 $color-input_danger-border-default: var(--semi-color-danger-light-default); // 错误输入框描边颜色 - 默认
@@ -57,6 +59,9 @@ $color-input_counter_danger-text-default: var(--semi-color-danger); // 多行文
 
 $color-input_group-border-default: var(--semi-color-border); // 输入框组合分割线颜色
 
+$color_input-default-border-only_border-default: var(--semi-color-border); // 只有描边的输入框描边颜色 - 默认
+$color_input-default-border-only_border-hover: var(--semi-color-border); // 只有描边的输入框描边颜色 - 默认
+
 $height-input_large: $height-control-large - 2px; // 输入框高度 & 行高 - 大尺寸
 $height-input_small: $height-control-small - 2px; // 输入框高度 & 行高 - 小尺寸
 $height-input_default: $height-control-default - 2px; // 输入框高度 & 行高 - 默认尺寸

package/lib/es/modal/modal.css

@@ -64,6 +64,9 @@
   overflow: hidden;
   box-shadow: var(--semi-shadow-elevated);
 }
+.semi-modal-footerfill {
+  display: flex;
+}
 .semi-modal-content-fullScreen {
   border-radius: 0;
   border: none;

package/lib/es/modal/modal.scss

@@ -70,7 +70,11 @@ $module: #{$prefix}-modal;
         padding: $spacing-modal_content-paddingY $spacing-modal_content-paddingX;
         background-clip: padding-box;
         overflow: hidden;
-        @include shadow-elevated;
+        box-shadow: $shadow-modal_content;
+    }
+
+    &-footerfill{
+        display: flex;
     }
 
     &-content-fullScreen {

package/lib/es/modal/modalFoundation.d.ts

@@ -51,6 +51,7 @@ export interface ModalProps {
     direction?: any;
     fullScreen?: boolean;
     preventScroll?: boolean;
+    footerFill?: boolean;
 }
 export interface ModalState {
     displayNone: boolean;

package/lib/es/modal/variables.scss

@@ -71,3 +71,7 @@ $color-modal_footer-border:transparent; // 模态框 footer 顶部描边颜色
 $width-modal_footer-border:0; // 模态框 footer 顶部描边宽度
 
 
+//shadow
+$shadow-modal_content: var(--semi-shadow-elevated)
+
+

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

@@ -6,6 +6,7 @@ declare const cssClasses: {
     DOTS: string;
     MARKS: string;
     HANDLE: string;
+    HANDLE_DOT: string;
 };
 declare const strings: {
     SIZE: string[];

package/lib/es/slider/constants.js

@@ -6,7 +6,8 @@ const cssClasses = {
   TRACK: `${BASE_CLASS_PREFIX}-slider-track`,
   DOTS: `${BASE_CLASS_PREFIX}-slider-dots`,
   MARKS: `${BASE_CLASS_PREFIX}-slider-marks`,
-  HANDLE: `${BASE_CLASS_PREFIX}-slider-handle`
+  HANDLE: `${BASE_CLASS_PREFIX}-slider-handle`,
+  HANDLE_DOT: `${BASE_CLASS_PREFIX}-slider-handle-dot`
 };
 const strings = {
   SIZE: ['small', 'large', 'default'],

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

@@ -31,6 +31,13 @@ export interface SliderProps {
     'aria-labelledby'?: string;
     'aria-valuetext'?: string;
     getAriaValueText?: (value: number, index?: number) => string;
+    handleDot?: {
+        size?: string;
+        color?: string;
+    } & ({
+        size?: string;
+        color?: string;
+    }[]);
 }
 export interface SliderState {
     currentValue: number | number[];

package/lib/es/slider/slider.css

@@ -46,10 +46,19 @@
   cursor: pointer;
   transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
   transform: var(--semi-transform_scale-small) translateX(-50%) translateY(0px);
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
 }
 .semi-slider-handle:focus-visible {
   outline: 2px solid var(--semi-color-primary-light-active);
 }
+.semi-slider-handle-dot {
+  background: var(--semi-color-primary);
+  width: 4px;
+  height: 4px;
+  border-radius: var(--semi-border-radius-circle);
+}
 .semi-slider-handle:hover {
   background-color: var(--semi-color-white);
 }

package/lib/es/slider/slider.scss

@@ -58,9 +58,19 @@ $module: #{$prefix}-slider;
         cursor: pointer;
         transition: background-color $transition_duration_slider_handle-bg $transition_function-slider-handle-bg $transition_delay-slider_handle-bg;
         transform: $transform_scale-slider_handle translateX(-50%) translateY($spacing-slider_handle-translateY);
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
         &:focus-visible {
             outline: $width-slider_handle-focus solid $color-slider_handle-focus;
         }
+
+        &-dot{
+            background:$color-slider_handle_dot;
+            width:$width-slider_handle_dot;
+            height: $width-slider_handle_dot;
+            border-radius: var(--semi-border-radius-circle);
+        }
     }
 
     &-handle:hover {

package/lib/es/slider/variables.scss

@@ -15,6 +15,7 @@ $color-slider_rail: rgba(0, 0, 0, 0.65);
 $color-slider_track-bg-default: var(--semi-color-primary); // 滑动条轨道颜色 - 已填充
 $color-slider_track_disabled-bg: var(--semi-color-primary-disabled); // 禁用滑动条轨道颜色 - 已填充
 $color-slider_handle-focus: var(--semi-color-primary-light-active); // 圆形按钮轮廓 - 聚焦
+$color-slider_handle_dot: var(--semi-color-primary); // 圆形按钮内部圆点颜色
 
 // Spacing
 $spacing-slider-paddingX: 13px; // 滑动条整体水平内边距
@@ -57,6 +58,7 @@ $height-slider_track: 4px; // 滚动条已填充轨道高度
 $width-slider_dot: 4px; // 滚动条圆形刻度点宽度
 $width-slider_handle_border_disabled: 1px; // 禁用滚动条圆形按钮按下后描边宽度
 $width-slider_handle-focus: 2px; // 圆形按钮轮廓 - 聚焦
+$width-slider_handle_dot: 4px; // 圆形按钮内部圆点宽度
 
 // Font
 $font-slider_rail-fontSize: 14px; // 滚动条轨道文本字号

package/lib/es/tooltip/foundation.js

@@ -420,7 +420,6 @@ export default class Tooltip extends BaseFoundation {
     return null;
   }
   calcPosStyle(props) {
-    var _a;
     const {
       spacing,
       isOverFlow
@@ -471,10 +470,6 @@ export default class Tooltip extends BaseFoundation {
     const isTriggerNearLeft = middleX - containerRect.left < containerRect.right - middleX;
     const isTriggerNearTop = middleY - containerRect.top < containerRect.bottom - middleY;
     const isWrapperWidthOverflow = wrapperRect.width > innerWidth;
-    const scaled = Math.abs((wrapperRect === null || wrapperRect === void 0 ? void 0 : wrapperRect.width) - ((_a = this._adapter.getContainer()) === null || _a === void 0 ? void 0 : _a.clientWidth)) > 1;
-    if (scaled) {
-      SPACING = SPACING * wrapperRect.width / this._adapter.getContainer().clientWidth;
-    }
     switch (position) {
       case 'top':
         // left = middleX;
@@ -591,12 +586,6 @@ export default class Tooltip extends BaseFoundation {
     // Calculate container positioning relative to window
     left = left - containerRect.left;
     top = top - containerRect.top;
-    if (scaled) {
-      left /= wrapperRect.width / this._adapter.getContainer().clientWidth;
-    }
-    if (scaled) {
-      top /= wrapperRect.height / this._adapter.getContainer().clientHeight;
-    }
     /**
      * container为body时，如果position不为relative或absolute，这时trigger计算出的top/left会根据html定位（initial containing block）
      * 此时如果body有margin，则计算出的位置相对于body会有问题 fix issue #1368

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

@@ -96,6 +96,7 @@ export interface TreeSelectAdapter<P = Record<string, any>, S = Record<string, a
     closeMenu: (cb?: () => void) => void;
     getTriggerWidth: () => boolean | number;
     setOptionWrapperWidth: (width: null | number) => void;
+    notifyClear: (e: any) => void;
     notifyChange: BasicOnChangeWithBasic;
     notifyChangeWithObject: BasicOnChangeWithObject;
     notifyExpand: (expandedKeys: Set<string>, expandedOtherProps: BasicExpandedOtherProps) => void;

package/lib/es/treeSelect/foundation.js

@@ -378,6 +378,7 @@ export default class TreeSelectFoundation extends BaseFoundation {
         }
       }
     }
+    this._adapter.notifyClear(e);
   }
   /**
    * A11y: simulate clear button click

package/modal/modal.scss

@@ -70,7 +70,11 @@ $module: #{$prefix}-modal;
         padding: $spacing-modal_content-paddingY $spacing-modal_content-paddingX;
         background-clip: padding-box;
         overflow: hidden;
-        @include shadow-elevated;
+        box-shadow: $shadow-modal_content;
+    }
+
+    &-footerfill{
+        display: flex;
     }
 
     &-content-fullScreen {

package/modal/modalFoundation.ts

@@ -54,7 +54,8 @@ export interface ModalProps {
     keepDOM?: boolean;
     direction?: any;
     fullScreen?: boolean;
-    preventScroll?: boolean
+    preventScroll?: boolean;
+    footerFill?: boolean
 }
 
 export interface ModalState {

package/modal/variables.scss

@@ -71,3 +71,7 @@ $color-modal_footer-border:transparent; // 模态框 footer 顶部描边颜色
 $width-modal_footer-border:0; // 模态框 footer 顶部描边宽度
 
 
+//shadow
+$shadow-modal_content: var(--semi-shadow-elevated)
+
+

package/package.json

@@ -1,13 +1,13 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.51.4",
+    "version": "2.52.0-beta.0",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",
         "prepublishOnly": "npm run build:lib"
     },
     "dependencies": {
-        "@douyinfe/semi-animation": "2.51.4",
+        "@douyinfe/semi-animation": "2.52.0-beta.0",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "date-fns": "^2.29.3",
@@ -23,7 +23,7 @@
         "*.scss",
         "*.css"
     ],
-    "gitHead": "b8cad87796be9b6b10409a95d3a5b4cb8b9592e6",
+    "gitHead": "92b9e3fc80cd5a352f6b9a1ffcb8f5191c688d95",
     "devDependencies": {
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",

package/slider/constants.ts

@@ -8,6 +8,7 @@ const cssClasses = {
     DOTS: `${BASE_CLASS_PREFIX}-slider-dots`,
     MARKS: `${BASE_CLASS_PREFIX}-slider-marks`,
     HANDLE: `${BASE_CLASS_PREFIX}-slider-handle`,
+    HANDLE_DOT: `${BASE_CLASS_PREFIX}-slider-handle-dot`,
 };
 
 const strings = {

package/slider/foundation.ts

@@ -36,7 +36,14 @@ export interface SliderProps{
     'aria-label'?: string;
     'aria-labelledby'?: string;
     'aria-valuetext'?: string;
-    getAriaValueText?: (value: number, index?: number) => string
+    getAriaValueText?: (value: number, index?: number) => string;
+    handleDot?: {
+        size?: string;
+        color?: string
+    } & ({
+        size?: string;
+        color?: string
+    }[])
 }
 
 export interface SliderState {

package/slider/slider.scss

@@ -58,9 +58,19 @@ $module: #{$prefix}-slider;
         cursor: pointer;
         transition: background-color $transition_duration_slider_handle-bg $transition_function-slider-handle-bg $transition_delay-slider_handle-bg;
         transform: $transform_scale-slider_handle translateX(-50%) translateY($spacing-slider_handle-translateY);
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
         &:focus-visible {
             outline: $width-slider_handle-focus solid $color-slider_handle-focus;
         }
+
+        &-dot{
+            background:$color-slider_handle_dot;
+            width:$width-slider_handle_dot;
+            height: $width-slider_handle_dot;
+            border-radius: var(--semi-border-radius-circle);
+        }
     }
 
     &-handle:hover {