@douyinfe/semi-foundation 2.24.2 → 2.25.0-alpha.0

package/lib/cjs/utils/object.js

@@ -9,32 +9,21 @@ exports.get = get;
 exports.has = has;
 exports.remove = remove;
 exports.set = set;
-
 var _isObject2 = _interopRequireDefault(require("lodash/isObject"));
-
 var _isNumber2 = _interopRequireDefault(require("lodash/isNumber"));
-
 var _values2 = _interopRequireDefault(require("lodash/values"));
-
 var _unset2 = _interopRequireDefault(require("lodash/unset"));
-
 var _toPath2 = _interopRequireDefault(require("lodash/toPath"));
-
 var _has2 = _interopRequireDefault(require("lodash/has"));
-
 var _set2 = _interopRequireDefault(require("lodash/set"));
-
 var _get2 = _interopRequireDefault(require("lodash/get"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 const pathToArrayElem = path => {
-  const pathArray = (0, _toPath2.default)(path); // internal-issues:673
-
+  const pathArray = (0, _toPath2.default)(path);
+  // internal-issues:673
   const justNumber = (0, _isNumber2.default)(path) && pathArray.length === 1;
   return justNumber ? false : Number.isInteger(+pathArray[pathArray.length - 1]);
 };
-
 function isEmptyObject(target) {
   /**
    *  var a = {};
@@ -51,9 +40,9 @@ function isEmptyObject(target) {
   if (!(0, _isObject2.default)(target)) {
     return false;
   } else {
-    const valuesOfTarget = (0, _values2.default)(target); // values(a)  ->   []
+    const valuesOfTarget = (0, _values2.default)(target);
+    // values(a)  ->   []
     // values(b)  ->   [undefined]
-
     if (!valuesOfTarget.length) {
       return true; // like target: {}
     } else {
@@ -61,15 +50,13 @@ function isEmptyObject(target) {
     }
   }
 }
-
 function cleanup(obj, path) {
   let pull = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
-
   if (path.length === 0) {
     return;
   }
-
-  const target = (0, _get2.default)(obj, path); // remove undefined from array
+  const target = (0, _get2.default)(obj, path);
+  // remove undefined from array
   // if (Array.isArray(target) && pull) {
   //     // only remove undefined form array from right to left
   //     // Remove undefined from right to left
@@ -77,40 +64,32 @@ function cleanup(obj, path) {
   //     lodashRemove(target, (value, index, array) => index > lastIndex);
   // }
   // Delete object if its empty
-  // eslint-disable-next-line
-
   if (Array.isArray(target) && target.every(e => e == null)) {
     (0, _unset2.default)(obj, path);
   } else if (isEmptyObject(target)) {
     (0, _unset2.default)(obj, path);
-  } // Recur
-
-
+  }
+  // Recur
   cleanup(obj, path.slice(0, path.length - 1), pull);
 }
-
 function empty(object) {
   return (0, _values2.default)(object).length === 0;
 }
-
 function get(object, path) {
   return (0, _get2.default)(object, path);
 }
-
 function remove(object, path) {
-  (0, _unset2.default)(object, path); // a.b => [a, b]
+  (0, _unset2.default)(object, path);
+  // a.b => [a, b]
   // arr[11].a => [arr, 11, a]
-
   let pathArray = (0, _toPath2.default)(path);
   pathArray = pathArray.slice(0, pathArray.length - 1);
   cleanup(object, pathArray, false);
 }
-
 function set(object, path, value, allowEmpty) {
   if (allowEmpty) {
     return (0, _set2.default)(object, path, value);
   }
-
   if (value !== undefined) {
     return (0, _set2.default)(object, path, value);
   } else {
@@ -124,7 +103,6 @@ function set(object, path, value, allowEmpty) {
     } 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 )
       // eg:
-
       /*
           When the non-array leaf node is set to undefined
           for example: a.b.c
@@ -133,7 +111,6 @@ function set(object, path, value, allowEmpty) {
     }
   }
 }
-
 function has(object, path) {
   return (0, _has2.default)(object, path);
 }
@@ -143,8 +120,6 @@ function has(object, path) {
  * @param {object|Function} srcObj
  * @returns {object|Function}
  */
-
-
 function forwardStatics(obj, srcObj) {
   if (obj && (typeof obj === 'function' || typeof obj === 'object') && srcObj && (typeof srcObj === 'function' || typeof srcObj === 'object')) {
     Object.entries(srcObj).forEach(_ref => {
@@ -152,6 +127,5 @@ function forwardStatics(obj, srcObj) {
       obj[key] = value;
     });
   }
-
   return obj;
 }

package/lib/cjs/utils/set.js

@@ -5,11 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.copySet = copySet;
 exports.pullAll = pullAll;
-
 var _isSet2 = _interopRequireDefault(require("lodash/isSet"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 /* istanbul ignore next */
 function copySet(setA) {
   return new Set(setA);
@@ -19,22 +16,17 @@ function copySet(setA) {
  * @param {*} setA
  * @param {*} setB
  */
-
-
 function pullAll(setA, setB) {
   if (setA === setB) {
     setB = copySet(setB);
   }
-
   if ((0, _isSet2.default)(setA) && setA.size && (0, _isSet2.default)(setB) && setB.size) {
     for (const item of setB) {
       if (setA.has(item)) {
         setA.delete(item);
       }
     }
-
     return setA;
   }
-
   return setA;
 }

package/lib/cjs/utils/shallowEqualObjects.js

@@ -4,31 +4,24 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = shallowEqualObjects;
-
 function shallowEqualObjects(objA, objB) {
   if (objA === objB) {
     return true;
   }
-
   if (!objA || !objB) {
     return false;
   }
-
   const aKeys = Object.keys(objA);
   const bKeys = Object.keys(objB);
   const len = aKeys.length;
-
   if (bKeys.length !== len) {
     return false;
   }
-
   for (let i = 0; i < len; i++) {
     const key = aKeys[i];
-
     if (objA[key] !== objB[key] || !Object.prototype.hasOwnProperty.call(objB, key)) {
       return false;
     }
   }
-
   return true;
 }

package/lib/cjs/utils/touchPolyfill.js

@@ -4,11 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _warning = _interopRequireDefault(require("./warning"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 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.*/
@@ -16,11 +13,9 @@ const touchEventPolyfill = (touch, touchEvent) => {
   if (!globalThis.Touch || !(touch instanceof Touch)) {
     return touch;
   }
-
   const keysNeedPolyfill = ['stopPropagation', 'preventDefault'];
   keysNeedPolyfill.forEach(key => {
     let value = touchEvent[key];
-
     if (value) {
       if (typeof value === 'function') {
         // bind 'this' for function of touchEvent running in Touch Point Object
@@ -28,9 +23,8 @@ const touchEventPolyfill = (touch, touchEvent) => {
           return touchEvent[key](...arguments);
         };
       }
-
       if (touch[key]) {
-        (0, _warning.default)(true, "\"The key ".concat(key, "\" exist in Touch."));
+        (0, _warning.default)(true, `"The key ${key}" exist in Touch.`);
       } else {
         touch[key] = value;
       }
@@ -38,6 +32,5 @@ const touchEventPolyfill = (touch, touchEvent) => {
   });
   return touch;
 };
-
 var _default = touchEventPolyfill;
 exports.default = _default;

package/lib/cjs/utils/type.d.ts

@@ -1,6 +1,6 @@
-export declare type ArrayElement<ArrayType extends readonly unknown[]> = ArrayType extends readonly (infer ElementType)[] ? ElementType : never;
-export declare type Motion<P extends Record<string, any> = any> = boolean | MotionObject | MotionFunction<P>;
-export declare type MotionFunction<P> = (props: P) => MotionObject;
+export type ArrayElement<ArrayType extends readonly unknown[]> = ArrayType extends readonly (infer ElementType)[] ? ElementType : never;
+export type Motion<P extends Record<string, any> = any> = boolean | MotionObject | MotionFunction<P>;
+export type MotionFunction<P> = (props: P) => MotionObject;
 export interface MotionObject {
     [x: string]: any;
     children?: any | ((props: MotionChildrenProps) => any);

package/lib/cjs/utils/uuid.js

@@ -6,15 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.getUuid = exports.default = getUuid;
 exports.getUuidShort = getUuidShort;
 exports.getUuidv4 = getUuidv4;
-
 function getUuid(prefix) {
-  return "".concat(prefix, "-").concat(new Date().getTime(), "-").concat(Math.random());
-} // https://stackoverflow.com/questions/105034/create-guid-uuid-in-javascript
-
-
+  return `${prefix}-${new Date().getTime()}-${Math.random()}`;
+}
+// https://stackoverflow.com/questions/105034/create-guid-uuid-in-javascript
 function getUuidv4() {
   var _a, _b;
-
   try {
     // @ts-ignore
     return (_b = (_a = crypto === null || crypto === void 0 ? void 0 : crypto.randomUUID) === null || _a === void 0 ? void 0 : _a.call(crypto)) !== null && _b !== void 0 ? _b : String(1e7 + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c => (Number(c) ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> Number(c) / 4).toString(16));
@@ -32,8 +29,6 @@ function getUuidv4() {
  * getUuidShort({ prefix: '' }) => '0eer2i0'
  * getUuidShort({ prefix: 'semi', length: 4 }) => 'semi-8jts'
  */
-
-
 function getUuidShort() {
   let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
@@ -43,11 +38,9 @@ function getUuidShort() {
   const characters = '0123456789abcdefghijklmnopqrstuvwxyz';
   const total = characters.length;
   let randomId = '';
-
   for (let i = 0; i < length; i++) {
     const random = Math.floor(Math.random() * total);
     randomId += characters.charAt(random);
   }
-
-  return prefix ? "".concat(prefix, "-").concat(randomId) : randomId;
+  return prefix ? `${prefix}-${randomId}` : randomId;
 }

package/lib/cjs/utils/warning.js

@@ -4,9 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = warning;
-
 function warning(flag, info) {
   if (flag) {
-    console.warn("Warning: ".concat(info));
+    console.warn(`Warning: ${info}`);
   }
 }

package/lib/es/anchor/anchor.css

@@ -65,12 +65,17 @@
   border-radius: 3px;
   transition: color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
   transform: scale(var(--semi-transform_scale-none));
+  background: transparent;
 }
 .semi-anchor-link-title:hover {
   color: var(--semi-color-tertiary-hover);
 }
 .semi-anchor-link-title-active {
   color: var(--semi-color-text-0);
+  background: transparent;
+}
+.semi-anchor-link-title-active:hover {
+  color: var(--semi-color-tertiary-hover);
 }
 .semi-anchor-link-title:focus-visible {
   outline: 2px solid var(--semi-color-primary-light-active);

package/lib/es/anchor/anchor.scss

@@ -75,12 +75,18 @@ $module: #{$prefix}-anchor;
             border-radius: $width-anchor-outline_border_radius;
             transition: color $transition_duration-anchor_title-text $transition_function-anchor_title-text $transition_delay-anchor_title-text;//锚点选项文字的动效
             transform: scale($transform_scale-anchor_title-text);
+            background: $color-anchor_title-bg-default;
             &:hover {
                 color: $color-anchor_title-text-hover;
             }
 
             &-active {
                 color: $color-anchor_title-text-active;
+                background: $color-anchor_title-bg-active;
+                &:hover{
+                    color: $color-anchor_title_active-text-hover;
+                }
+
             }
 
             &:focus-visible {

package/lib/es/anchor/constants.js

@@ -1,6 +1,6 @@
 import { BASE_CLASS_PREFIX } from '../base/constants';
 const cssClasses = {
-  PREFIX: "".concat(BASE_CLASS_PREFIX, "-anchor")
+  PREFIX: `${BASE_CLASS_PREFIX}-anchor`
 };
 const strings = {
   SIZE: ['small', 'default'],

package/lib/es/anchor/foundation.js

@@ -7,67 +7,46 @@ const prefixCls = cssClasses.PREFIX;
 export default class AnchorFoundation extends BaseFoundation {
   constructor(adapter) {
     var _this;
-
     super(Object.assign(Object.assign({}, AnchorFoundation.defaultAdapter), adapter));
     _this = this;
-
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    this.init = () => {}; // eslint-disable-next-line @typescript-eslint/no-empty-function
-
-
+    this.init = () => {};
     this.destroy = () => {};
-
     this.addLink = link => {
       this._adapter.addLink(link);
     };
-
     this.removeLink = link => {
       this._adapter.removeLink(link);
     };
-
     this.setActiveLink = function (link, prevLink) {
       let shouldNotify = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
-
       const activeLink = _this._adapter.getState('activeLink');
-
       const onChange = _this._adapter.getProp('onChange');
-
       if (activeLink !== link) {
         _this._adapter.setActiveLink(link, _this._setActiveSlide);
-
         if (onChange && shouldNotify) {
           _this._adapter.notifyChange(link, prevLink);
         }
       }
-    }; // Adjust rail height according to text link content height
-
-
+    };
+    // Adjust rail height according to text link content height
     this.setScrollHeight = () => {
-      const anchorWrapper = ".".concat(prefixCls, "-link-wrapper");
-
+      const anchorWrapper = `.${prefixCls}-link-wrapper`;
       const anchorNode = this._adapter.getAnchorNode(anchorWrapper);
-
       if (anchorNode) {
-        const scrollHeight = "".concat(anchorNode.scrollHeight, "px");
-
+        const scrollHeight = `${anchorNode.scrollHeight}px`;
         this._adapter.setScrollHeight(scrollHeight);
       }
     };
-
     this.updateScrollHeight = (prevState, state) => {
       const prevLinks = prevState.links.join('');
       const links = state.links.join('');
-
       if (prevLinks !== links) {
         this.setScrollHeight();
       }
     };
-
     this.setChildMap = () => {
       const children = this._adapter.getProp('children');
-
       const childMap = {};
-
       if (_isArray(children)) {
         for (const link of children) {
           this._getLinkToMap(link, [], childMap);
@@ -75,21 +54,16 @@ export default class AnchorFoundation extends BaseFoundation {
       } else {
         this._getLinkToMap(children, [], childMap);
       }
-
       this._adapter.setChildMap(childMap);
     };
-
     this.updateChildMap = (prevState, state) => {
       const prevLinks = prevState.links.join('');
       const links = state.links.join('');
-
       if (prevLinks !== links) {
         this.setChildMap();
       }
     };
-
     this.getLinksTop = () => this._adapter.getLinksBoundingTop();
-
     this.handleScroll = () => {
       const {
         clickLink,
@@ -97,89 +71,67 @@ export default class AnchorFoundation extends BaseFoundation {
         activeLink: prevActiveLink
       } = this.getStates(); // TODO check this._adapter -> this.
       // ActiveLink Determined by the clicked link
-
       if (clickLink) {
         return;
       }
-
       const elTop = this.getLinksTop();
       let lastNegative = -Infinity;
       let lastNegativeIndex = -1;
-
       for (let i = 0; i < elTop.length; i++) {
         if (elTop[i] < 0 && elTop[i] > lastNegative) {
           lastNegative = elTop[i];
           lastNegativeIndex = i;
         }
       }
-
       const activeLink = links[lastNegativeIndex];
       this.setActiveLink(activeLink, prevActiveLink);
     };
-
     this.handleClick = function (e, link) {
       let shouldNotify = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
-
       const destNode = _this._adapter.getContentNode(link);
-
       const prevLink = _this._adapter.getState('activeLink');
-
       _this.setActiveLink(link, prevLink, shouldNotify);
-
       if (destNode) {
         try {
           _this._adapter.setClickLinkWithCallBack(true, link, _this._scrollIntoView);
         } catch (error) {}
       }
-
       shouldNotify && _this._adapter.notifyClick(e, link);
     };
-
     this.handleClickLink = () => {
       this._adapter.setClickLink(false);
-    }; // Get the child nodes of each link
-
-
+    };
+    // Get the child nodes of each link
     this._getLinkToMap = (link, parents, linkMap) => {
       const node = link && link.props;
-
       if (!node || !node.href) {
         return;
       }
-
       if (!(node.href in linkMap)) {
         linkMap[node.href] = new Set();
-      } // Every ancestor kept a map
-
-
+      }
+      // Every ancestor kept a map
       for (const parent of parents) {
         linkMap[parent].add(node.href);
       }
-
       if (node.children && node.children.length) {
-        parents.push(node.href); // Maintain child node map
-
+        parents.push(node.href);
+        // Maintain child node map
         for (const child of node.children) {
           this._getLinkToMap(child, parents, linkMap);
         }
-
         parents.pop();
       }
     };
-
     this._scrollIntoView = link => {
       const {
         scrollMotion,
         targetOffset
       } = this.getProps(); // TODO check this._adapter -> this.
-
       const behavior = scrollMotion ? 'smooth' : 'auto';
-
       const canSmoothScroll = this._adapter.canSmoothScroll();
-
       if (link) {
         const destNode = this._adapter.getContentNode(link);
-
         const scrollOpts = {
           /**
            * Behavior defines scrolling behavior
@@ -204,15 +156,16 @@ export default class AnchorFoundation extends BaseFoundation {
            */
           behavior: actions => {
             // We just need to scroll the innermost target container
-            const innermostAction = _get(actions, '0');
-
-            const el = _get(innermostAction, 'el');
-
-            const top = _get(innermostAction, 'top');
-
+            const verticalScrollAction = actions.find(action => {
+              const {
+                el
+              } = action;
+              return el.scrollHeight > el.clientHeight;
+            });
+            const el = _get(verticalScrollAction, 'el');
+            const top = _get(verticalScrollAction, 'top');
             if (el) {
               const offsetTop = top - targetOffset;
-
               if (el.scroll && canSmoothScroll) {
                 el.scroll({
                   top: offsetTop,
@@ -225,24 +178,18 @@ export default class AnchorFoundation extends BaseFoundation {
           },
           block: 'start'
         };
-
         if (destNode) {
           scrollIntoView(destNode, scrollOpts);
         }
       }
     };
-
     this._setActiveSlide = () => {
-      const activeClass = ".".concat(cssClasses.PREFIX, "-link-title-active");
-
+      const activeClass = `.${cssClasses.PREFIX}-link-title-active`;
       const linkNode = this._adapter.getAnchorNode(activeClass);
-
       if (linkNode) {
         const height = linkNode.offsetTop;
-
         this._adapter.setSlideBarTop(height);
       }
     };
   }
-
 }

package/lib/es/anchor/linkFoundation.js

@@ -3,31 +3,22 @@ export default class LinkFoundation extends BaseFoundation {
   constructor(adapter) {
     super(Object.assign({}, adapter));
   }
-
-  init() {// this.setInitValue();
-  } // eslint-disable-next-line @typescript-eslint/no-empty-function
-
-
+  init() {
+    // this.setInitValue();
+  }
   destroy() {}
-
   handleAddLink() {
     const href = this._adapter.getProp('href');
-
     this._adapter.addLink(href);
   }
-
   handleUpdateLink(href, prevHref) {
     if (href !== prevHref) {
       this._adapter.removeLink(prevHref);
-
       this._adapter.addLink(href);
     }
   }
-
   handleRemoveLink() {
     const href = this._adapter.getProp('href');
-
     this._adapter.removeLink(href);
   }
-
 }

package/lib/es/anchor/variables.scss

@@ -6,9 +6,13 @@ $color-anchor_slide_muted-bg-active: var(--semi-color-white); // 选中颜色 -
 
 $color-anchor_title-text-default: var(--semi-color-text-2); // 文字颜色 - 未选中
 $color-anchor_title-text-hover: var(--semi-color-tertiary-hover); // 文字颜色 - 未选中悬浮态
+$color-anchor_title_active-text-hover: $color-anchor_title-text-hover;  // 文字颜色 - 选中悬浮态
 $color-anchor_title-text-active: var(--semi-color-text-0); // 文字颜色 - 选中
 $color-anchor_title-text-disabled: var(--semi-color-disabled-text); // 文字颜色 - 禁用
 
+$color-anchor_title-bg-default: transparent; // 背景色
+$color-anchor_title-bg-active: transparent; // 背景色 - 选中
+
 $color-anchor_title-outline-focus: var(--semi-color-primary-light-active); // 轮廓 - 聚焦
 
 // Spacing

package/lib/es/autoComplete/autoComplete.css

@@ -94,6 +94,7 @@
   padding-top: 8px;
   padding-bottom: 8px;
   cursor: not-allowed;
+  height: 20px;
 }
 .semi-autocomplete-loading-wrapper .semi-spin {
   width: 100%;

package/lib/es/autoComplete/autoComplete.scss

@@ -27,6 +27,8 @@ $module: #{$prefix}-autocomplete;
         padding-top: $spacing-autoComplete_loading_wrapper-paddingTop;
         padding-bottom: $spacing-autoComplete_loading_wrapper-paddingBottom;
         cursor: not-allowed;
+        // make sure that spin align vertical, no need to make 20px as a spacing token here
+        height: 20px;
         // height: $spacing-extra-loose;
         // @include all-center;
         .#{$prefix}-spin {

package/lib/es/autoComplete/constants.js

@@ -1,9 +1,9 @@
 import { strings as tooltipStrings } from '../tooltip/constants';
 import { BASE_CLASS_PREFIX, VALIDATE_STATUS } from '../base/constants';
 const cssClasses = {
-  PREFIX: "".concat(BASE_CLASS_PREFIX, "-autocomplete"),
-  PREFIX_OPTION: "".concat(BASE_CLASS_PREFIX, "-autoComplete-option"),
-  PREFIX_GROUP: "".concat(BASE_CLASS_PREFIX, "-autoComplete-group")
+  PREFIX: `${BASE_CLASS_PREFIX}-autocomplete`,
+  PREFIX_OPTION: `${BASE_CLASS_PREFIX}-autoComplete-option`,
+  PREFIX_GROUP: `${BASE_CLASS_PREFIX}-autoComplete-group`
 };
 const strings = {
   SIZE: ['small', 'large', 'default'],