@douyinfe/semi-foundation 2.101.0 → 2.102.0

package/button/button.scss

@@ -19,6 +19,7 @@ $module: #{$prefix}-button;
     padding-right: $spacing-button_default-paddingRight;
     padding-top: $spacing-button_default-paddingTop;
     padding-bottom: $spacing-button_default-paddingTop;
+    font-family: inherit;
     font-size: $font-button-fontSize;
     line-height: $font-button-lineHeight;
     font-weight: $font-button-fontWeight;

package/dragMove/foundation.ts

@@ -25,6 +25,10 @@ export default class DragMoveFoundation<P = Record<string, any>, S = Record<stri
     yMin: number;
     startOffsetX: number;
     startOffsetY: number;
+    startClientX: number;
+    startClientY: number;
+    startLeft: number;
+    startTop: number;
 
     get constrainer() {
         return this._adapter.getConstrainer();
@@ -44,11 +48,15 @@ export default class DragMoveFoundation<P = Record<string, any>, S = Record<stri
             throw new Error('drag element must be a valid element');
         }
         this.element = element;
-        this.element.style.position = 'absolute';
+        this.updatePositionStrategy();
         this.handler.style.cursor = 'move';
         this._registerStartEvent();
     }
 
+    updatePositionStrategy = () => {
+        this.element.style.position = this.getProp('positionStrategy') === 'relative' ? 'relative' : 'absolute';
+    }
+
     _registerStartEvent = () => {
         this.handler.addEventListener('mousedown', this.onMouseDown);
         this.handler.addEventListener('touchstart', this.onTouchStart);
@@ -95,6 +103,18 @@ export default class DragMoveFoundation<P = Record<string, any>, S = Record<stri
     _calcMoveRange() {
         // Calculate the range within which an element can move
         if (this.constrainer) {
+            if (this.getProp('positionStrategy') === 'relative') {
+                const elementRect = this.element.getBoundingClientRect();
+                const constrainerRect = this.constrainer.getBoundingClientRect();
+                const style = window.getComputedStyle(this.element);
+                const currentLeft = parseFloat(style.left) || 0;
+                const currentTop = parseFloat(style.top) || 0;
+                this.xMin = currentLeft + constrainerRect.left - elementRect.left;
+                this.xMax = currentLeft + constrainerRect.right - elementRect.right;
+                this.yMin = currentTop + constrainerRect.top - elementRect.top;
+                this.yMax = currentTop + constrainerRect.bottom - elementRect.bottom;
+                return;
+            }
             let node = this.element.offsetParent as HTMLElement;
             let startX = 0;
             let startY = 0;
@@ -126,6 +146,14 @@ export default class DragMoveFoundation<P = Record<string, any>, S = Record<stri
     }
 
     _calcOffset = (e: Touch | MouseEvent) => {
+        if (this.getProp('positionStrategy') === 'relative') {
+            const style = window.getComputedStyle(this.element);
+            this.startClientX = e.clientX;
+            this.startClientY = e.clientY;
+            this.startLeft = parseFloat(style.left) || 0;
+            this.startTop = parseFloat(style.top) || 0;
+            return;
+        }
         this.startOffsetX = e.clientX - this.element.offsetLeft;
         this.startOffsetY = e.clientY - this.element.offsetTop;
     }
@@ -161,8 +189,13 @@ export default class DragMoveFoundation<P = Record<string, any>, S = Record<stri
 
     _changePos = (e: Touch | MouseEvent) => {
         const { customMove } = this.getProps();
-        let newLeft = e.clientX - this.startOffsetX;
-        let newTop = e.clientY - this.startOffsetY;
+        const useRelativePosition = this.getProp('positionStrategy') === 'relative';
+        let newLeft = useRelativePosition ?
+            this.startLeft + e.clientX - this.startClientX :
+            e.clientX - this.startOffsetX;
+        let newTop = useRelativePosition ?
+            this.startTop + e.clientY - this.startClientY :
+            e.clientY - this.startOffsetY;
         if (this.constrainer) {
             newLeft = clampValueInRange(newLeft, this.xMin, this.xMax);
             newTop = clampValueInRange(newTop, this.yMin, this.yMax); 

package/lib/cjs/button/button.css

@@ -45,6 +45,7 @@
   padding-right: 12px;
   padding-top: 6px;
   padding-bottom: 6px;
+  font-family: inherit;
   font-size: 14px;
   line-height: 20px;
   font-weight: 600;

package/lib/cjs/button/button.scss

@@ -19,6 +19,7 @@ $module: #{$prefix}-button;
     padding-right: $spacing-button_default-paddingRight;
     padding-top: $spacing-button_default-paddingTop;
     padding-bottom: $spacing-button_default-paddingTop;
+    font-family: inherit;
     font-size: $font-button-fontSize;
     line-height: $font-button-lineHeight;
     font-weight: $font-button-fontWeight;

package/lib/cjs/dragMove/foundation.d.ts

@@ -20,10 +20,15 @@ export default class DragMoveFoundation<P = Record<string, any>, S = Record<stri
     yMin: number;
     startOffsetX: number;
     startOffsetY: number;
+    startClientX: number;
+    startClientY: number;
+    startLeft: number;
+    startTop: number;
     get constrainer(): HTMLElement;
     get handler(): HTMLElement;
     constructor(adapter: DragMoveAdapter<P, S>);
     init(): void;
+    updatePositionStrategy: () => void;
     _registerStartEvent: () => void;
     _unRegisterStartEvent: () => void;
     destroy(): void;

package/lib/cjs/dragMove/foundation.js

@@ -19,6 +19,9 @@ class DragMoveFoundation extends _foundation.default {
   }
   constructor(adapter) {
     super(Object.assign({}, adapter));
+    this.updatePositionStrategy = () => {
+      this.element.style.position = this.getProp('positionStrategy') === 'relative' ? 'relative' : 'absolute';
+    };
     this._registerStartEvent = () => {
       this.handler.addEventListener('mousedown', this.onMouseDown);
       this.handler.addEventListener('touchstart', this.onTouchStart);
@@ -46,6 +49,14 @@ class DragMoveFoundation extends _foundation.default {
       document.removeEventListener('touchcancel', this._onTouchCancel);
     };
     this._calcOffset = e => {
+      if (this.getProp('positionStrategy') === 'relative') {
+        const style = window.getComputedStyle(this.element);
+        this.startClientX = e.clientX;
+        this.startClientY = e.clientY;
+        this.startLeft = parseFloat(style.left) || 0;
+        this.startTop = parseFloat(style.top) || 0;
+        return;
+      }
       this.startOffsetX = e.clientX - this.element.offsetLeft;
       this.startOffsetY = e.clientY - this.element.offsetTop;
     };
@@ -79,8 +90,9 @@ class DragMoveFoundation extends _foundation.default {
       const {
         customMove
       } = this.getProps();
-      let newLeft = e.clientX - this.startOffsetX;
-      let newTop = e.clientY - this.startOffsetY;
+      const useRelativePosition = this.getProp('positionStrategy') === 'relative';
+      let newLeft = useRelativePosition ? this.startLeft + e.clientX - this.startClientX : e.clientX - this.startOffsetX;
+      let newTop = useRelativePosition ? this.startTop + e.clientY - this.startClientY : e.clientY - this.startOffsetY;
       if (this.constrainer) {
         newLeft = clampValueInRange(newLeft, this.xMin, this.xMax);
         newTop = clampValueInRange(newTop, this.yMin, this.yMax);
@@ -122,7 +134,7 @@ class DragMoveFoundation extends _foundation.default {
       throw new Error('drag element must be a valid element');
     }
     this.element = element;
-    this.element.style.position = 'absolute';
+    this.updatePositionStrategy();
     this.handler.style.cursor = 'move';
     this._registerStartEvent();
   }
@@ -137,6 +149,18 @@ class DragMoveFoundation extends _foundation.default {
   _calcMoveRange() {
     // Calculate the range within which an element can move
     if (this.constrainer) {
+      if (this.getProp('positionStrategy') === 'relative') {
+        const elementRect = this.element.getBoundingClientRect();
+        const constrainerRect = this.constrainer.getBoundingClientRect();
+        const style = window.getComputedStyle(this.element);
+        const currentLeft = parseFloat(style.left) || 0;
+        const currentTop = parseFloat(style.top) || 0;
+        this.xMin = currentLeft + constrainerRect.left - elementRect.left;
+        this.xMax = currentLeft + constrainerRect.right - elementRect.right;
+        this.yMin = currentTop + constrainerRect.top - elementRect.top;
+        this.yMax = currentTop + constrainerRect.bottom - elementRect.bottom;
+        return;
+      }
       let node = this.element.offsetParent;
       let startX = 0;
       let startY = 0;

package/lib/cjs/tree/foundation.js

@@ -440,7 +440,10 @@ class TreeFoundation extends _foundation.default {
     this._adapter.cacheFlattenNodes(motionType === 'hide' && this._isAnimated());
     if (!this._isExpandControlled()) {
       const flattenNodes = (0, _treeUtil.flattenTreeData)(treeData, expandedKeys, keyMaps, isSearching && showFilteredOnly && filteredShownKeys);
-      const motionKeys = this._isAnimated() ? (0, _treeUtil.getMotionKeys)(eventKey, expandedKeys, keyEntities) : [];
+      let motionKeys = this._isAnimated() ? (0, _treeUtil.getMotionKeys)(eventKey, expandedKeys, keyEntities) : [];
+      if (isSearching && showFilteredOnly) {
+        motionKeys = motionKeys.filter(key => filteredShownKeys.has(key));
+      }
       const newState = {
         [expandedStateKey]: expandedKeys,
         flattenNodes,

package/lib/es/button/button.css

@@ -45,6 +45,7 @@
   padding-right: 12px;
   padding-top: 6px;
   padding-bottom: 6px;
+  font-family: inherit;
   font-size: 14px;
   line-height: 20px;
   font-weight: 600;

package/lib/es/button/button.scss

@@ -19,6 +19,7 @@ $module: #{$prefix}-button;
     padding-right: $spacing-button_default-paddingRight;
     padding-top: $spacing-button_default-paddingTop;
     padding-bottom: $spacing-button_default-paddingTop;
+    font-family: inherit;
     font-size: $font-button-fontSize;
     line-height: $font-button-lineHeight;
     font-weight: $font-button-fontWeight;

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

@@ -20,10 +20,15 @@ export default class DragMoveFoundation<P = Record<string, any>, S = Record<stri
     yMin: number;
     startOffsetX: number;
     startOffsetY: number;
+    startClientX: number;
+    startClientY: number;
+    startLeft: number;
+    startTop: number;
     get constrainer(): HTMLElement;
     get handler(): HTMLElement;
     constructor(adapter: DragMoveAdapter<P, S>);
     init(): void;
+    updatePositionStrategy: () => void;
     _registerStartEvent: () => void;
     _unRegisterStartEvent: () => void;
     destroy(): void;

package/lib/es/dragMove/foundation.js

@@ -11,6 +11,9 @@ export default class DragMoveFoundation extends BaseFoundation {
   }
   constructor(adapter) {
     super(Object.assign({}, adapter));
+    this.updatePositionStrategy = () => {
+      this.element.style.position = this.getProp('positionStrategy') === 'relative' ? 'relative' : 'absolute';
+    };
     this._registerStartEvent = () => {
       this.handler.addEventListener('mousedown', this.onMouseDown);
       this.handler.addEventListener('touchstart', this.onTouchStart);
@@ -38,6 +41,14 @@ export default class DragMoveFoundation extends BaseFoundation {
       document.removeEventListener('touchcancel', this._onTouchCancel);
     };
     this._calcOffset = e => {
+      if (this.getProp('positionStrategy') === 'relative') {
+        const style = window.getComputedStyle(this.element);
+        this.startClientX = e.clientX;
+        this.startClientY = e.clientY;
+        this.startLeft = parseFloat(style.left) || 0;
+        this.startTop = parseFloat(style.top) || 0;
+        return;
+      }
       this.startOffsetX = e.clientX - this.element.offsetLeft;
       this.startOffsetY = e.clientY - this.element.offsetTop;
     };
@@ -71,8 +82,9 @@ export default class DragMoveFoundation extends BaseFoundation {
       const {
         customMove
       } = this.getProps();
-      let newLeft = e.clientX - this.startOffsetX;
-      let newTop = e.clientY - this.startOffsetY;
+      const useRelativePosition = this.getProp('positionStrategy') === 'relative';
+      let newLeft = useRelativePosition ? this.startLeft + e.clientX - this.startClientX : e.clientX - this.startOffsetX;
+      let newTop = useRelativePosition ? this.startTop + e.clientY - this.startClientY : e.clientY - this.startOffsetY;
       if (this.constrainer) {
         newLeft = clampValueInRange(newLeft, this.xMin, this.xMax);
         newTop = clampValueInRange(newTop, this.yMin, this.yMax);
@@ -114,7 +126,7 @@ export default class DragMoveFoundation extends BaseFoundation {
       throw new Error('drag element must be a valid element');
     }
     this.element = element;
-    this.element.style.position = 'absolute';
+    this.updatePositionStrategy();
     this.handler.style.cursor = 'move';
     this._registerStartEvent();
   }
@@ -129,6 +141,18 @@ export default class DragMoveFoundation extends BaseFoundation {
   _calcMoveRange() {
     // Calculate the range within which an element can move
     if (this.constrainer) {
+      if (this.getProp('positionStrategy') === 'relative') {
+        const elementRect = this.element.getBoundingClientRect();
+        const constrainerRect = this.constrainer.getBoundingClientRect();
+        const style = window.getComputedStyle(this.element);
+        const currentLeft = parseFloat(style.left) || 0;
+        const currentTop = parseFloat(style.top) || 0;
+        this.xMin = currentLeft + constrainerRect.left - elementRect.left;
+        this.xMax = currentLeft + constrainerRect.right - elementRect.right;
+        this.yMin = currentTop + constrainerRect.top - elementRect.top;
+        this.yMax = currentTop + constrainerRect.bottom - elementRect.bottom;
+        return;
+      }
       let node = this.element.offsetParent;
       let startX = 0;
       let startY = 0;

package/lib/es/tree/foundation.js

@@ -432,7 +432,10 @@ export default class TreeFoundation extends BaseFoundation {
     this._adapter.cacheFlattenNodes(motionType === 'hide' && this._isAnimated());
     if (!this._isExpandControlled()) {
       const flattenNodes = flattenTreeData(treeData, expandedKeys, keyMaps, isSearching && showFilteredOnly && filteredShownKeys);
-      const motionKeys = this._isAnimated() ? getMotionKeys(eventKey, expandedKeys, keyEntities) : [];
+      let motionKeys = this._isAnimated() ? getMotionKeys(eventKey, expandedKeys, keyEntities) : [];
+      if (isSearching && showFilteredOnly) {
+        motionKeys = motionKeys.filter(key => filteredShownKeys.has(key));
+      }
       const newState = {
         [expandedStateKey]: expandedKeys,
         flattenNodes,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.101.0",
+    "version": "2.102.0",
     "description": "",
     "scripts": {
         "clean": "rimraf lib",
@@ -14225,8 +14225,8 @@
         }
     },
     "dependencies": {
-        "@douyinfe/semi-animation": "2.101.0",
-        "@douyinfe/semi-json-viewer-core": "2.101.0",
+        "@douyinfe/semi-animation": "2.102.0",
+        "@douyinfe/semi-json-viewer-core": "2.102.0",
         "@mdx-js/mdx": "^3.0.1",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
@@ -14247,7 +14247,7 @@
         "*.scss",
         "*.css"
     ],
-    "gitHead": "2a1a14e7c4f7c6f91d30e33e5f5e5ebe02a34f96",
+    "gitHead": "88d7738ddb55821f38d3ab3c5b7c877ebda08edf",
     "devDependencies": {
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",

package/tree/foundation.ts

@@ -711,7 +711,10 @@ export default class TreeFoundation extends BaseFoundation<TreeAdapter, BasicTre
                 keyMaps,
                 isSearching && showFilteredOnly && filteredShownKeys
             );
-            const motionKeys = this._isAnimated() ? getMotionKeys(eventKey, expandedKeys, keyEntities) : [];
+            let motionKeys = this._isAnimated() ? getMotionKeys(eventKey, expandedKeys, keyEntities) : [];
+            if (isSearching && showFilteredOnly) {
+                motionKeys = motionKeys.filter(key => filteredShownKeys.has(key));
+            }
             const newState = {
                 [expandedStateKey]: expandedKeys,
                 flattenNodes,