@douyinfe/semi-foundation 2.19.0-alpha.8 → 2.19.0

package/lib/es/utils/Store.js

@@ -1,11 +1,7 @@
-import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
-import _indexOfInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/index-of";
-import _spliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/splice";
-
 /* istanbul ignore next */
 class Store {
   constructor(initialState) {
-    this._state = _Object$assign({}, initialState);
+    this._state = Object.assign({}, initialState);
     this._listeners = [];
   }
 
@@ -13,14 +9,10 @@ class Store {
     this._listeners.push(listener);
 
     const unsubscribe = () => {
-      var _context;
-
-      const index = _indexOfInstanceProperty(_context = this._listeners).call(_context, listener);
+      const index = this._listeners.indexOf(listener);
 
       if (index > -1) {
-        var _context2;
-
-        _spliceInstanceProperty(_context2 = this._listeners).call(_context2, index, 1);
+        this._listeners.splice(index, 1);
       }
     };
 
@@ -28,7 +20,7 @@ class Store {
   }
 
   setState(state) {
-    _Object$assign(this._state, _Object$assign({}, state));
+    Object.assign(this._state, Object.assign({}, state));
 
     for (const listener of this._listeners) {
       if (typeof listener === 'function') {

package/lib/es/utils/a11y.js

@@ -1,5 +1,4 @@
 import _get from "lodash/get";
-import _indexOfInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/index-of";
 export function handlePrevent(event) {
   event.stopPropagation();
   event.preventDefault();
@@ -34,7 +33,7 @@ export function setFocusToPreviousMenuItem(itemNodes, currentItem) {
     if (currentItem === itemNodes[0]) {
       newMenuItem = itemNodes[itemNodes.length - 1];
     } else {
-      index = _indexOfInstanceProperty(itemNodes).call(itemNodes, currentItem);
+      index = itemNodes.indexOf(currentItem);
       newMenuItem = itemNodes[index - 1];
     }
 
@@ -49,7 +48,7 @@ export function setFocusToNextMenuitem(itemNodes, currentItem) {
     if (currentItem === itemNodes[itemNodes.length - 1]) {
       newMenuItem = itemNodes[0];
     } else {
-      index = _indexOfInstanceProperty(itemNodes).call(itemNodes, currentItem);
+      index = itemNodes.indexOf(currentItem);
       newMenuItem = itemNodes[index + 1];
     }
 
@@ -65,17 +64,17 @@ export function findIndexByCharacter(itemList, curItem, firstCharList, char) {
 
   char = char.toLowerCase(); // Get start index for search based on position of currentItem
 
-  start = _indexOfInstanceProperty(itemList).call(itemList, curItem) + 1;
+  start = itemList.indexOf(curItem) + 1;
 
   if (start >= itemList.length) {
     start = 0;
   } // Check remaining menu items in the menu
 
 
-  index = _indexOfInstanceProperty(firstCharList).call(firstCharList, char, start); // If not found in remaining menu items, check from beginning
+  index = firstCharList.indexOf(char, start); // If not found in remaining menu items, check from beginning
 
   if (index === -1) {
-    index = _indexOfInstanceProperty(firstCharList).call(firstCharList, char, 0);
+    index = firstCharList.indexOf(char, 0);
   }
 
   return index >= 0 ? index : -1;

package/lib/es/utils/array.js

@@ -1,5 +1,3 @@
-import _Set from "@babel/runtime-corejs3/core-js-stable/set";
-import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
 import { pullAll as setPullAll } from './set';
 /**
  * arrayA remove arrayB
@@ -16,10 +14,10 @@ import { pullAll as setPullAll } from './set';
 
 export function pullAll(arrayA, arrayB) {
   if (arrayA !== null && arrayA.length && arrayB !== null && arrayB.length) {
-    const setA = new _Set(arrayA);
-    const setB = new _Set(arrayB);
+    const setA = new Set(arrayA);
+    const setB = new Set(arrayB);
     const resultSet = setPullAll(setA, setB);
-    return _Array$from(resultSet);
+    return Array.from(resultSet);
   }
 
   return arrayA;

package/lib/es/utils/arrayMove.js

@@ -1,9 +1,5 @@
-import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
-import _spliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/splice";
 export default function arrayMove(array, from, to) {
-  const newArray = _sliceInstanceProperty(array).call(array);
-
-  _spliceInstanceProperty(newArray).call(newArray, to < 0 ? newArray.length + to : to, 0, _spliceInstanceProperty(newArray).call(newArray, from, 1)[0]);
-
+  const newArray = array.slice();
+  newArray.splice(to < 0 ? newArray.length + to : to, 0, newArray.splice(from, 1)[0]);
   return newArray;
 }

package/lib/es/utils/classnames.js

@@ -1,9 +1,6 @@
 import _map from "lodash/map";
 import _filter from "lodash/filter";
 import _split from "lodash/split";
-import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
-import _indexOfInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/index-of";
-import _spliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/splice";
 import classnames from 'classnames';
 
 function addClass(rawCls) {
@@ -13,7 +10,7 @@ function addClass(rawCls) {
     srcClss[_key - 1] = arguments[_key];
   }
 
-  const validClss = _filter(srcClss, cls => !_includesInstanceProperty(clss).call(clss, cls));
+  const validClss = _filter(srcClss, cls => !clss.includes(cls));
 
   return classnames(rawCls, ...validClss);
 }
@@ -26,10 +23,10 @@ function removeClass(rawCls) {
   }
 
   _map(srcClss, cls => {
-    const index = _indexOfInstanceProperty(clss).call(clss, cls);
+    const index = clss.indexOf(cls);
 
     if (index > -1) {
-      _spliceInstanceProperty(clss).call(clss, index, 1);
+      clss.splice(index, 1);
     }
   });
 

package/lib/es/utils/date-fns-extra.js

@@ -1,7 +1,3 @@
-import _parseInt from "@babel/runtime-corejs3/core-js-stable/parse-int";
-import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
-import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
-
 /* eslint-disable max-len */
 
 /* eslint-disable eqeqeq */
@@ -29,19 +25,15 @@ export const toIANA = tz => {
       return tz;
     }
 
-    const symbol = _parseInt(matches[1] + 1, 10); // => -1 or 1
-
-
-    const hourOffset = _parseInt(matches[2], 10);
-
-    const minuteOffset = _parseInt(matches[3], 10);
+    const symbol = parseInt(matches[1] + 1, 10); // => -1 or 1
 
+    const hourOffset = parseInt(matches[2], 10);
+    const minuteOffset = parseInt(matches[3], 10);
     tz = symbol * (hourOffset + minuteOffset / 60);
   }
 
   if (typeof tz === 'number') {
-    const found = _findInstanceProperty(IANAOffsetMap).call(IANAOffsetMap, item => item[0] === tz);
-
+    const found = IANAOffsetMap.find(item => item[0] === tz);
     return found && found[1][0];
   }
 };
@@ -63,7 +55,7 @@ const parse = (date, formatToken, options) => {
 
   if (options && options.timeZone != null && options.timeZone !== '') {
     const timeZone = toIANA(options.timeZone);
-    options = _Object$assign(_Object$assign({}, options), {
+    options = Object.assign(Object.assign({}, options), {
       timeZone
     });
   }
@@ -84,7 +76,7 @@ const parse = (date, formatToken, options) => {
 const format = (date, formatToken, options) => {
   if (options && options.timeZone != null && options.timeZone !== '') {
     const timeZone = toIANA(options.timeZone);
-    options = _Object$assign(_Object$assign({}, options), {
+    options = Object.assign(Object.assign({}, options), {
       timeZone
     });
     date = dateFnsUtcToZonedTime(date, timeZone, options);

package/lib/es/utils/dom.js

@@ -1,4 +1,3 @@
-import _reduceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/reduce";
 import isHTMLElement from './isElement';
 /**
  *
@@ -56,7 +55,7 @@ export function convertDOMRectToObject(domRect) {
       return domRect.toJSON();
     } else {
       const keys = ['left', 'top', 'right', 'bottom', 'width', 'height'];
-      return _reduceInstanceProperty(keys).call(keys, (obj, key) => {
+      return keys.reduce((obj, key) => {
         obj[key] = domRect[key];
         return obj;
       }, {});

package/lib/es/utils/getDataAttr.js

@@ -1,9 +1,5 @@
-import _reduceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/reduce";
-import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 export default function getDataAttr(props) {
-  var _context;
-
-  return _reduceInstanceProperty(_context = _Object$keys(props)).call(_context, (prev, key) => {
+  return Object.keys(props).reduce((prev, key) => {
     if (key.substr(0, 5) === 'aria-' || key.substr(0, 5) === 'data-' || key === 'role') {
       prev[key] = props[key];
     }

package/lib/es/utils/getHighlight.js

@@ -1,8 +1,4 @@
 import _isString from "lodash/isString";
-import _reduceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/reduce";
-import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
-import _sortInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/sort";
-import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
 
 const escapeRegExpFn = string => string.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&');
 /**
@@ -13,16 +9,14 @@ const escapeRegExpFn = string => string.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$
 
 
 const findChunks = _ref => {
-  var _context;
-
   let {
     autoEscape,
     caseSensitive,
     searchWords,
     sourceString
   } = _ref;
-  return _reduceInstanceProperty(_context = _filterInstanceProperty(searchWords).call(searchWords, searchWord => searchWord) // Remove empty words
-  ).call(_context, (chunks, searchWord) => {
+  return searchWords.filter(searchWord => searchWord) // Remove empty words
+  .reduce((chunks, searchWord) => {
     if (autoEscape) {
       searchWord = escapeRegExpFn(searchWord);
     }
@@ -59,12 +53,10 @@ const findChunks = _ref => {
 
 
 const combineChunks = _ref2 => {
-  var _context2;
-
   let {
     chunks
   } = _ref2;
-  chunks = _reduceInstanceProperty(_context2 = _sortInstanceProperty(chunks).call(chunks, (first, second) => first.start - second.start)).call(_context2, (processedChunks, nextChunk) => {
+  chunks = chunks.sort((first, second) => first.start - second.start).reduce((processedChunks, nextChunk) => {
     // First chunk just goes straight in the array...
     if (processedChunks.length === 0) {
       return [nextChunk];
@@ -120,13 +112,11 @@ const fillInChunks = _ref3 => {
     append(0, totalLength, false);
   } else {
     let lastIndex = 0;
-
-    _forEachInstanceProperty(chunksToHighlight).call(chunksToHighlight, chunk => {
+    chunksToHighlight.forEach(chunk => {
       append(lastIndex, chunk.start, false);
       append(chunk.start, chunk.end, true);
       lastIndex = chunk.end;
     });
-
     append(lastIndex, totalLength, false);
   }
 

package/lib/es/utils/getMotionObjFromProps.js

@@ -1,6 +1,5 @@
 import _isObject from "lodash/isObject";
 import _cloneDeep from "lodash/cloneDeep";
-import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import warning from './warning';
 /**
  * get motion object from props
@@ -30,7 +29,7 @@ export default function getMotionObjFromProps(props) {
   if (_isObject(motionProp)) {
     motion = _cloneDeep(motionProp);
 
-    for (const key of _Object$keys(motionProp)) {
+    for (const key of Object.keys(motionProp)) {
       const handler = motionProp[key];
 
       if (typeof handler === 'function') {

package/lib/es/utils/object.js

@@ -6,19 +6,13 @@ import _toPath from "lodash/toPath";
 import _has from "lodash/has";
 import _set from "lodash/set";
 import _get from "lodash/get";
-import _Number$isInteger from "@babel/runtime-corejs3/core-js-stable/number/is-integer";
-import _everyInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/every";
-import _Array$isArray from "@babel/runtime-corejs3/core-js-stable/array/is-array";
-import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
-import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
-import _Object$entries from "@babel/runtime-corejs3/core-js-stable/object/entries";
 
 const pathToArrayElem = path => {
   const pathArray = _toPath(path); // internal-issues:673
 
 
   const justNumber = _isNumber(path) && pathArray.length === 1;
-  return justNumber ? false : _Number$isInteger(+pathArray[pathArray.length - 1]);
+  return justNumber ? false : Number.isInteger(+pathArray[pathArray.length - 1]);
 };
 
 function isEmptyObject(target) {
@@ -44,7 +38,7 @@ function isEmptyObject(target) {
     if (!valuesOfTarget.length) {
       return true; // like target: {}
     } else {
-      return _everyInstanceProperty(valuesOfTarget).call(valuesOfTarget, item => typeof item === 'undefined');
+      return valuesOfTarget.every(item => typeof item === 'undefined');
     }
   }
 }
@@ -67,14 +61,14 @@ function cleanup(obj, path) {
   // eslint-disable-next-line
 
 
-  if (_Array$isArray(target) && _everyInstanceProperty(target).call(target, e => e == null)) {
+  if (Array.isArray(target) && target.every(e => e == null)) {
     _unset(obj, path);
   } else if (isEmptyObject(target)) {
     _unset(obj, path);
   } // Recur
 
 
-  cleanup(obj, _sliceInstanceProperty(path).call(path, 0, path.length - 1), pull);
+  cleanup(obj, path.slice(0, path.length - 1), pull);
 }
 
 export function empty(object) {
@@ -90,7 +84,7 @@ export function remove(object, path) {
 
   let pathArray = _toPath(path);
 
-  pathArray = _sliceInstanceProperty(pathArray).call(pathArray, 0, pathArray.length - 1);
+  pathArray = pathArray.slice(0, pathArray.length - 1);
   cleanup(object, pathArray, false);
 }
 export function set(object, path, value, allowEmpty) {
@@ -108,7 +102,7 @@ export function set(object, path, value, allowEmpty) {
 
       let pathArray = _toPath(path);
 
-      pathArray = _sliceInstanceProperty(pathArray).call(pathArray, 0, pathArray.length - 1);
+      pathArray = pathArray.slice(0, pathArray.length - 1);
       cleanup(object, pathArray, false);
     } else if (!pathToArrayElem(path) && get(object, path) !== undefined) {
       // Only delete the field if it needs to be deleted and its not a path to an array ( array leaf )
@@ -134,9 +128,7 @@ export function has(object, path) {
 
 export function forwardStatics(obj, srcObj) {
   if (obj && (typeof obj === 'function' || typeof obj === 'object') && srcObj && (typeof srcObj === 'function' || typeof srcObj === 'object')) {
-    var _context;
-
-    _forEachInstanceProperty(_context = _Object$entries(srcObj)).call(_context, _ref => {
+    Object.entries(srcObj).forEach(_ref => {
       let [key, value] = _ref;
       obj[key] = value;
     });

package/lib/es/utils/set.js

@@ -1,9 +1,8 @@
 import _isSet from "lodash/isSet";
-import _Set from "@babel/runtime-corejs3/core-js-stable/set";
 
 /* istanbul ignore next */
 export function copySet(setA) {
-  return new _Set(setA);
+  return new Set(setA);
 }
 /**
  * Set deduplicate

package/lib/es/utils/shallowEqualObjects.js

@@ -1,4 +1,3 @@
-import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 export default function shallowEqualObjects(objA, objB) {
   if (objA === objB) {
     return true;
@@ -8,10 +7,8 @@ export default function shallowEqualObjects(objA, objB) {
     return false;
   }
 
-  const aKeys = _Object$keys(objA);
-
-  const bKeys = _Object$keys(objB);
-
+  const aKeys = Object.keys(objA);
+  const bKeys = Object.keys(objB);
   const len = aKeys.length;
 
   if (bKeys.length !== len) {

package/lib/es/utils/touchPolyfill.js

@@ -1,18 +1,15 @@
-import _globalThis from "@babel/runtime-corejs3/core-js/global-this";
-import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
 import warning from './warning';
 
 const touchEventPolyfill = (touch, touchEvent) => {
   /* Touch is the first point of multi-touch. In order to minimize the change of slider code to support touch,
   some methods that will be used on touchEvent are mounted on the multi-touch Touch object.*/
   // polyfill for firefox
-  if (!_globalThis.Touch || !(touch instanceof Touch)) {
+  if (!globalThis.Touch || !(touch instanceof Touch)) {
     return touch;
   }
 
   const keysNeedPolyfill = ['stopPropagation', 'preventDefault'];
-
-  _forEachInstanceProperty(keysNeedPolyfill).call(keysNeedPolyfill, key => {
+  keysNeedPolyfill.forEach(key => {
     let value = touchEvent[key];
 
     if (value) {
@@ -30,7 +27,6 @@ const touchEventPolyfill = (touch, touchEvent) => {
       }
     }
   });
-
   return touch;
 };
 

package/lib/es/utils/uuid.js

@@ -1,8 +1,5 @@
-import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 export default function getUuid(prefix) {
-  var _context, _context2;
-
-  return _concatInstanceProperty(_context = _concatInstanceProperty(_context2 = "".concat(prefix, "-")).call(_context2, new Date().getTime(), "-")).call(_context, Math.random());
+  return "".concat(prefix, "-").concat(new Date().getTime(), "-").concat(Math.random());
 } // https://stackoverflow.com/questions/105034/create-guid-uuid-in-javascript
 
 function getUuidv4() {
@@ -25,8 +22,6 @@ function getUuidv4() {
 
 
 function getUuidShort() {
-  var _context3;
-
   let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     prefix = '',
@@ -41,7 +36,7 @@ function getUuidShort() {
     randomId += characters.charAt(random);
   }
 
-  return prefix ? _concatInstanceProperty(_context3 = "".concat(prefix, "-")).call(_context3, randomId) : randomId;
+  return prefix ? "".concat(prefix, "-").concat(randomId) : randomId;
 }
 
 export { getUuid, getUuidv4, getUuidShort };

package/package.json

@@ -1,13 +1,12 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.19.0-alpha.8",
+    "version": "2.19.0",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",
         "prepublishOnly": "npm run build:lib"
     },
     "dependencies": {
-        "@babel/runtime-corejs3": "^7.15.4",
         "@douyinfe/semi-animation": "2.12.0",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
@@ -24,9 +23,8 @@
         "*.scss",
         "*.css"
     ],
-    "gitHead": "fef0097c01c675980e383efb45f182a2a4f2a507",
+    "gitHead": "c0ef56c31a5c13adb050fbdb611e51da881f0cb8",
     "devDependencies": {
-        "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",
         "@types/lodash": "^4.14.176",

package/popconfirm/popconfirm.scss

@@ -51,20 +51,10 @@ $module: #{$prefix}-popconfirm;
             display: inline-flex;
             flex-direction: column;
         }
-
-        &-content {
-            color: $color-popconfirm_body-text;
-
-            & > p {
-                margin: $spacing-popconfirm_header_content_p-margin;
-                padding: $spacing-popconfirm_header_content_p-padding;
-            }
-        }
     }
 
     &-body {
-        // margin-left: $width-popconfirm-icon + $spacing-popconfirm_header_icon-marginRight;
-        // margin-top: 8px;
+        margin-left: $width-popconfirm-icon + $spacing-popconfirm_header_icon-marginRight;
 
         color: $color-popconfirm_body-text;
 

package/select/foundation.ts

@@ -1025,8 +1025,8 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
         const { filter, autoFocus } = this.getProps();
         const { isOpen, isFocus } = this.getStates();
         // Under normal circumstances, blur will be accompanied by clickOutsideHandler, so the notify of blur can be called uniformly in clickOutsideHandler
-        // But when autoFocus, because clickOutsideHandler is not register, you need to listen for the trigger's blur and trigger the notify callback
-        if (autoFocus && isFocus && !isOpen) {
+        // But when autoFocus or the panel is close, because clickOutsideHandler is not register or unregister, you need to listen for the trigger's blur and trigger the notify callback
+        if (isFocus && !isOpen) {
             this._notifyBlur(e);
         }
     }

package/sideSheet/sideSheet.scss

@@ -100,6 +100,7 @@ $module: #{$prefix}-sidesheet;
     &-body {
         padding: $spacing-sideSheet_body-paddingY $spacing-sideSheet_body-paddingX;
         flex: 1;
+        overflow: auto;
     }
 
     &-content {

package/slider/foundation.ts

@@ -386,15 +386,22 @@ export default class SliderFoundation extends BaseFoundation<SliderAdapter> {
      * @memberof SliderFoundation
      */
     outPutValue = (inputValue: SliderProps['value']) => {
+        const checkHowManyDecimals = (num:number)=>{
+            const reg = /^\d+(\.\d+)?$/;
+            if (reg.test(String(num))){
+                return num.toString().split('.')[1]?.length ?? 0;
+            }
+            return 0;
+        };
         const step = this._adapter.getProp('step');
-        let transWay = Math.round;
-        if (step < 1 && step >= 0.1) {
-            transWay = value => Math.round(value * 10) / 10;
-        } else if (step < 0.1 && step >= 0.01) {
-            transWay = value => Math.round(value * 100) / 100;
-        } else if (step < 0.01 && step >= 0.001) {
-            transWay = value => Math.round(value * 1000) / 1000;
-        }
+        const transWay = (()=>{
+            const decimals = checkHowManyDecimals(step);
+            const multipler = Math.pow(10, decimals);
+            return (value: number)=>{
+                return Math.round(value * multipler) / multipler;
+            };
+        })();
+        
         if (Array.isArray(inputValue)) {
             return [transWay(inputValue[0]), transWay(inputValue[1])];
         } else {

package/table/mixin.scss

@@ -1,5 +1,5 @@
 @mixin genResizing() {
-    border-right: $border-table_resizer;
+    border-right: $width-table_resizer_border solid $color-table_resizer-bg-default;
 
     .react-resizable-handle {
 
@@ -7,4 +7,4 @@
             background-color: unset;
         }
     }
-}
+}

package/table/rtl.scss

@@ -19,7 +19,7 @@ $module: #{$prefix}-table;
 
                             &.resizing {
                                 // rtl override mixin
-                                border-left: $border-table_resizer;
+                                border-left: $width-table_resizer_border solid $color-table_resizer-bg-default;
                             }
                         }
 
@@ -28,7 +28,7 @@ $module: #{$prefix}-table;
                             border-right: 1px solid $color-table_shadow-border-default;
 
                             &.resizing {
-                                border-left: $border-table_resizer;
+                                border-left: $width-table_resizer_border solid $color-table_resizer-bg-default;
                             }
 
                             &[x-type="column-scrollbar"] {
@@ -40,7 +40,7 @@ $module: #{$prefix}-table;
                 }
 
                 .resizing {
-                    border-left: $border-table_resizer;
+                    border-left: $width-table_resizer_border solid $color-table_resizer-bg-default;
                 }
 
                 .react-resizable-handle {
@@ -57,7 +57,7 @@ $module: #{$prefix}-table;
 
                     &.resizing {
                         border-right: 0;
-                        border-left: $border-table_resizer;
+                        border-left: $width-table_resizer_border solid $color-table_resizer-bg-default;
                     }
                 }
 
@@ -112,17 +112,17 @@ $module: #{$prefix}-table;
         &-bordered {
             .#{$module}-container {
                 border-left: 0;
-                border-right: $border-table;
+                border-right: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
             }
 
             .#{$module}-thead > .#{$module}-row > .#{$module}-row-head,
             .#{$module}-tbody > .#{$module}-row > .#{$module}-row-cell {
                 border-right: 0;
-                border-left: $border-table;
+                border-left: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
             }
 
             .#{$module}-placeholder {
-                border-left: $border-table;
+                border-left: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
                 border-right: 0;
             }
 
@@ -130,7 +130,7 @@ $module: #{$prefix}-table;
 
                 &::-webkit-scrollbar {
                     border-right: 0;
-                    border-left: $border-table;
+                    border-left: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
                 }
             }
         }