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

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

@@ -1,5 +1,2 @@
-import { ResizableHandlerFoundation, ResizableFoundation } 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 };
+export { ResizableHandlerAdapter, ResizableHandlerFoundation, ResizableFoundation, ResizableAdapter } from './single';
+export { ResizeGroupAdapter, ResizeItemAdapter, ResizeHandlerAdapter, ResizeGroupFoundation, ResizeItemFoundation, ResizeHandlerFoundation } from './group';

package/lib/cjs/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;
 }

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

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ResizeItemFoundation = exports.ResizeHandlerFoundation = exports.ResizeGroupFoundation = void 0;
+var _debounce2 = _interopRequireDefault(require("lodash/debounce"));
 var _utils = require("../utils");
 var _foundation = _interopRequireDefault(require("../../base/foundation"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -47,16 +48,18 @@ class ResizeGroupFoundation extends _foundation.default {
       // offset caused by padding and border
       const lastStyle = this.window.getComputedStyle(lastItem);
       const nextStyle = this.window.getComputedStyle(nextItem);
-      lastOffset = (0, _utils.getOffset)(lastStyle, this.direction);
-      nextOffset = (0, _utils.getOffset)(nextStyle, this.direction);
+      lastOffset = (0, _utils.getOffset)(lastStyle, this.direction) + this.itemMinusMap.get(handlerIndex);
+      nextOffset = (0, _utils.getOffset)(nextStyle, this.direction) + this.itemMinusMap.get(handlerIndex + 1);
+      let lastItemSize = (this.direction === 'horizontal' ? lastItem.offsetWidth : lastItem.offsetHeight) + this.itemMinusMap.get(handlerIndex),
+        nextItemSize = (this.direction === 'horizontal' ? nextItem.offsetWidth : nextItem.offsetHeight) + this.itemMinusMap.get(handlerIndex + 1);
       const states = this.getStates();
       this.setState({
         isResizing: true,
         originalPosition: {
           x: clientX,
           y: clientY,
-          lastItemSize: this.direction === 'horizontal' ? lastItem.offsetWidth : lastItem.offsetHeight,
-          nextItemSize: this.direction === 'horizontal' ? nextItem.offsetWidth : nextItem.offsetHeight,
+          lastItemSize,
+          nextItemSize,
           lastOffset,
           nextOffset
         },
@@ -103,28 +106,33 @@ class ResizeGroupFoundation extends _foundation.default {
       } = props;
       let lastItem = this._adapter.getItem(curHandler),
         nextItem = this._adapter.getItem(curHandler + 1);
-      let parentSize = this.direction === 'horizontal' ? this.groupRef.offsetWidth : this.groupRef.offsetHeight;
-      let availableSize = parentSize - this.totalMinus;
+      let parentSize = this.groupSize;
       let delta = direction === 'horizontal' ? clientX - initX : clientY - initY;
       let lastNewSize = lastItemSize + delta;
       let nextNewSize = nextItemSize - delta;
       // 判断是否超出限制
-      let lastFlag = (0, _utils.judgeConstraint)(lastNewSize, this._adapter.getItemMin(curHandler), this._adapter.getItemMax(curHandler), availableSize, lastOffset),
-        nextFlag = (0, _utils.judgeConstraint)(nextNewSize, this._adapter.getItemMin(curHandler + 1), this._adapter.getItemMax(curHandler + 1), availableSize, nextOffset);
+      let lastFlag = (0, _utils.judgeConstraint)(lastNewSize, this._adapter.getItemMin(curHandler), this._adapter.getItemMax(curHandler), parentSize, lastOffset),
+        nextFlag = (0, _utils.judgeConstraint)(nextNewSize, this._adapter.getItemMin(curHandler + 1), this._adapter.getItemMax(curHandler + 1), parentSize, nextOffset);
       if (lastFlag) {
-        lastNewSize = (0, _utils.adjustNewSize)(lastNewSize, this._adapter.getItemMin(curHandler), this._adapter.getItemMax(curHandler), availableSize, lastOffset);
+        lastNewSize = (0, _utils.adjustNewSize)(lastNewSize, this._adapter.getItemMin(curHandler), this._adapter.getItemMax(curHandler), parentSize, lastOffset);
         nextNewSize = lastItemSize + nextItemSize - lastNewSize;
       }
       if (nextFlag) {
-        nextNewSize = (0, _utils.adjustNewSize)(nextNewSize, this._adapter.getItemMin(curHandler + 1), this._adapter.getItemMax(curHandler + 1), availableSize, nextOffset);
+        nextNewSize = (0, _utils.adjustNewSize)(nextNewSize, this._adapter.getItemMin(curHandler + 1), this._adapter.getItemMax(curHandler + 1), parentSize, nextOffset);
         lastNewSize = lastItemSize + nextItemSize - nextNewSize;
       }
+      let lastItemPercent = this.itemPercentMap.get(curHandler),
+        nextItemPercent = this.itemPercentMap.get(curHandler + 1);
+      let lastNewPercent = lastNewSize / parentSize * 100;
+      let nextNewPercent = lastItemPercent + nextItemPercent - lastNewPercent; // 消除浮点误差
+      this.itemPercentMap.set(curHandler, lastNewPercent);
+      this.itemPercentMap.set(curHandler + 1, nextNewPercent);
       if (direction === 'horizontal') {
-        lastItem.style.width = lastNewSize / parentSize * 100 + '%';
-        nextItem.style.width = nextNewSize / parentSize * 100 + '%';
+        lastItem.style.width = `calc(${lastNewPercent}% - ${this.itemMinusMap.get(curHandler)}px)`;
+        nextItem.style.width = `calc(${nextNewPercent}% - ${this.itemMinusMap.get(curHandler + 1)}px)`;
       } else if (direction === 'vertical') {
-        lastItem.style.height = lastNewSize / parentSize * 100 + '%';
-        nextItem.style.height = nextNewSize / parentSize * 100 + '%';
+        lastItem.style.height = `calc(${lastNewPercent}% - ${this.itemMinusMap.get(curHandler)}px)`;
+        nextItem.style.height = `calc(${nextNewPercent}% - ${this.itemMinusMap.get(curHandler + 1)}px)`;
       }
       let lastFunc = this._adapter.getItemChange(curHandler),
         nextFunc = this._adapter.getItemChange(curHandler + 1);
@@ -169,14 +177,14 @@ class ResizeGroupFoundation extends _foundation.default {
       });
       this.unregisterEvents();
     };
-    this.calculateSpace = () => {
+    this.initSpace = () => {
       const props = this.getProps();
       const {
         direction
       } = props;
       // calculate accurate space for group item
       let handlerSizes = new Array(this._adapter.getHandlerCount()).fill(0);
-      let groupSize = direction === 'horizontal' ? this.groupRef.offsetWidth : this.groupRef.offsetHeight;
+      let parentSize = this.groupSize;
       this.totalMinus = 0;
       for (let i = 0; i < this._adapter.getHandlerCount(); i++) {
         let handlerSize = direction === 'horizontal' ? this._adapter.getHandler(i).offsetWidth : this._adapter.getHandler(i).offsetHeight;
@@ -198,8 +206,8 @@ class ResizeGroupFoundation extends _foundation.default {
         const child = this._adapter.getItem(i);
         let minSize = this._adapter.getItemMin(i),
           maxSize = this._adapter.getItemMax(i);
-        let minSizePercent = minSize ? (0, _utils.getPixelSize)(minSize, groupSize) / groupSize * 100 : 0,
-          maxSizePercent = maxSize ? (0, _utils.getPixelSize)(maxSize, groupSize) / groupSize * 100 : 100;
+        let minSizePercent = minSize ? (0, _utils.getPixelSize)(minSize, parentSize) / parentSize * 100 : 0,
+          maxSizePercent = maxSize ? (0, _utils.getPixelSize)(maxSize, parentSize) / parentSize * 100 : 100;
         if (minSizePercent > maxSizePercent) {
           console.warn('[Semi ResizableItem]: min size bigger than max size');
         }
@@ -209,15 +217,17 @@ class ResizeGroupFoundation extends _foundation.default {
           if (typeof defaultSize === 'string') {
             if (defaultSize.endsWith('%')) {
               itemSizePercent = parseFloat(defaultSize.slice(0, -1));
+              this.itemPercentMap.set(i, itemSizePercent);
             } else if (defaultSize.endsWith('px')) {
-              itemSizePercent = parseFloat(defaultSize.slice(0, -2)) / groupSize * 100;
+              itemSizePercent = parseFloat(defaultSize.slice(0, -2)) / parentSize * 100;
+              this.itemPercentMap.set(i, itemSizePercent);
             } else if (/^-?\d+(\.\d+)?$/.test(defaultSize)) {
               // 仅由数字组成，表示按比例分配剩下空间
               undefineLoc.set(i, parseFloat(defaultSize));
               undefinedTotal += parseFloat(defaultSize);
               continue;
             }
-          } else {
+          } else if (typeof defaultSize === 'number') {
             undefineLoc.set(i, defaultSize);
             undefinedTotal += defaultSize;
             continue;
@@ -246,21 +256,78 @@ class ResizeGroupFoundation extends _foundation.default {
       }
       undefineLoc.forEach((value, key) => {
         const child = this._adapter.getItem(key);
+        const percent = value / undefinedTotal * undefineSizePercent;
+        this.itemPercentMap.set(key, percent);
         if (direction === 'horizontal') {
-          child.style.width = `calc(${undefineSizePercent / undefinedTotal * value}% - ${this.itemMinusMap.get(key)}px)`;
+          child.style.width = `calc(${percent}% - ${this.itemMinusMap.get(key)}px)`;
         } else {
-          child.style.height = `calc(${undefineSizePercent / undefinedTotal * value}% - ${this.itemMinusMap.get(key)}px)`;
+          child.style.height = `calc(${percent}% - ${this.itemMinusMap.get(key)}px)`;
         }
       });
     };
+    this.ensureConstraint = (0, _debounce2.default)(() => {
+      // 浏览器拖拽时保证px值最大最小仍生效
+      const {
+        direction
+      } = this.getProps();
+      const itemCount = this._adapter.getItemCount();
+      let continueFlag = true;
+      for (let i = 0; i < itemCount; i++) {
+        const child = this._adapter.getItem(i);
+        const childSize = direction === 'horizontal' ? child.offsetWidth : child.offsetHeight;
+        // 判断由非鼠标拖拽导致item的size变化过程中是否有超出限制的情况
+        const childFlag = (0, _utils.judgeConstraint)(childSize, this._adapter.getItemMin(i), this._adapter.getItemMax(i), this.groupSize, this.itemMinusMap.get(i));
+        if (childFlag) {
+          const childNewSize = (0, _utils.adjustNewSize)(childSize, this._adapter.getItemMin(i), this._adapter.getItemMax(i), this.groupSize, this.itemMinusMap.get(i));
+          for (let j = i + 1; j < itemCount; j++) {
+            // 找到下一个没有超出限制的item
+            const item = this._adapter.getItem(j);
+            const itemSize = direction === 'horizontal' ? item.offsetWidth : item.offsetHeight;
+            const itemFlag = (0, _utils.judgeConstraint)(itemSize, this._adapter.getItemMin(j), this._adapter.getItemMax(j), this.groupSize, this.itemMinusMap.get(j));
+            if (!itemFlag) {
+              let childPercent = this.itemPercentMap.get(i),
+                itemPercent = this.itemPercentMap.get(j);
+              let childNewPercent = childNewSize / this.groupSize * 100;
+              let itemNewPercent = childPercent + itemPercent - childNewPercent;
+              this.itemPercentMap.set(i, childNewPercent);
+              this.itemPercentMap.set(j, itemNewPercent);
+              if (direction === 'horizontal') {
+                child.style.width = `calc(${childNewPercent}% - ${this.itemMinusMap.get(i)}px)`;
+                item.style.width = `calc(${itemNewPercent}% - ${this.itemMinusMap.get(j)}px)`;
+              } else {
+                child.style.height = `calc(${childNewPercent}% - ${this.itemMinusMap.get(i)}px)`;
+                item.style.height = `calc(${itemNewPercent}% - ${this.itemMinusMap.get(j)}px)`;
+              }
+              break;
+            } else {
+              if (j === itemCount - 1) {
+                continueFlag = false;
+                console.warn('[Semi ResizableGroup]: no enough space to adjust min/max size');
+              }
+            }
+          }
+        }
+        if (!continueFlag) {
+          break;
+        }
+      }
+    }, 200);
   }
   get groupRef() {
     return this._adapter.getGroupRef();
   }
+  get groupSize() {
+    const {
+      direction
+    } = this.getProps();
+    let groupSize = direction === 'horizontal' ? this.groupRef.offsetWidth : this.groupRef.offsetHeight;
+    return groupSize;
+  }
   init() {
     this.direction = this.getProp('direction');
     this.itemMinusMap = new Map();
-    this.calculateSpace();
+    this.itemPercentMap = new Map();
+    this.initSpace();
   }
   get window() {
     var _a;

package/lib/cjs/resizable/resizable.css

@@ -11,6 +11,72 @@
   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;
@@ -31,4 +97,24 @@
   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/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/es/resizable/foundation.d.ts

@@ -1,5 +1,2 @@
-import { ResizableHandlerFoundation, ResizableFoundation } 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 };
+export { ResizableHandlerAdapter, ResizableHandlerFoundation, ResizableFoundation, ResizableAdapter } from './single';
+export { ResizeGroupAdapter, ResizeItemAdapter, ResizeHandlerAdapter, ResizeGroupFoundation, ResizeItemFoundation, ResizeHandlerFoundation } from './group';

package/lib/es/resizable/foundation.js

@@ -1,3 +1,2 @@
-import { ResizableHandlerFoundation, ResizableFoundation } from './single';
-import { ResizeGroupFoundation, ResizeItemFoundation, ResizeHandlerFoundation } from './group';
-export { ResizableHandlerFoundation, ResizableFoundation, 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;
 }