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

package/lib/cjs/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/cjs/anchor/constants.js

@@ -4,11 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.strings = exports.cssClasses = void 0;
-
 var _constants = require("../base/constants");
-
 const cssClasses = {
-  PREFIX: "".concat(_constants.BASE_CLASS_PREFIX, "-anchor")
+  PREFIX: `${_constants.BASE_CLASS_PREFIX}-anchor`
 };
 exports.cssClasses = cssClasses;
 const strings = {

package/lib/cjs/anchor/foundation.js

@@ -4,85 +4,56 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _get2 = _interopRequireDefault(require("lodash/get"));
-
 var _isArray2 = _interopRequireDefault(require("lodash/isArray"));
-
 var _foundation = _interopRequireDefault(require("../base/foundation"));
-
 var _scrollIntoViewIfNeeded = _interopRequireDefault(require("scroll-into-view-if-needed"));
-
 var _constants = require("./constants");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 const prefixCls = _constants.cssClasses.PREFIX;
-
 class AnchorFoundation extends _foundation.default {
   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 ((0, _isArray2.default)(children)) {
         for (const link of children) {
           this._getLinkToMap(link, [], childMap);
@@ -90,21 +61,16 @@ class AnchorFoundation extends _foundation.default {
       } 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,
@@ -112,89 +78,67 @@ class AnchorFoundation extends _foundation.default {
         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
@@ -219,13 +163,16 @@ class AnchorFoundation extends _foundation.default {
            */
           behavior: actions => {
             // We just need to scroll the innermost target container
-            const innermostAction = (0, _get2.default)(actions, '0');
-            const el = (0, _get2.default)(innermostAction, 'el');
-            const top = (0, _get2.default)(innermostAction, 'top');
-
+            const verticalScrollAction = actions.find(action => {
+              const {
+                el
+              } = action;
+              return el.scrollHeight > el.clientHeight;
+            });
+            const el = (0, _get2.default)(verticalScrollAction, 'el');
+            const top = (0, _get2.default)(verticalScrollAction, 'top');
             if (el) {
               const offsetTop = top - targetOffset;
-
               if (el.scroll && canSmoothScroll) {
                 el.scroll({
                   top: offsetTop,
@@ -238,26 +185,19 @@ class AnchorFoundation extends _foundation.default {
           },
           block: 'start'
         };
-
         if (destNode) {
           (0, _scrollIntoViewIfNeeded.default)(destNode, scrollOpts);
         }
       }
     };
-
     this._setActiveSlide = () => {
-      const activeClass = ".".concat(_constants.cssClasses.PREFIX, "-link-title-active");
-
+      const activeClass = `.${_constants.cssClasses.PREFIX}-link-title-active`;
       const linkNode = this._adapter.getAnchorNode(activeClass);
-
       if (linkNode) {
         const height = linkNode.offsetTop;
-
         this._adapter.setSlideBarTop(height);
       }
     };
   }
-
 }
-
 exports.default = AnchorFoundation;

package/lib/cjs/anchor/linkFoundation.js

@@ -4,42 +4,29 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _foundation = _interopRequireDefault(require("../base/foundation"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 class LinkFoundation extends _foundation.default {
   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);
   }
-
 }
-
 exports.default = LinkFoundation;

package/lib/cjs/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/cjs/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/cjs/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/cjs/autoComplete/constants.js

@@ -4,15 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.strings = exports.cssClasses = void 0;
-
 var _constants = require("../tooltip/constants");
-
 var _constants2 = require("../base/constants");
-
 const cssClasses = {
-  PREFIX: "".concat(_constants2.BASE_CLASS_PREFIX, "-autocomplete"),
-  PREFIX_OPTION: "".concat(_constants2.BASE_CLASS_PREFIX, "-autoComplete-option"),
-  PREFIX_GROUP: "".concat(_constants2.BASE_CLASS_PREFIX, "-autoComplete-group")
+  PREFIX: `${_constants2.BASE_CLASS_PREFIX}-autocomplete`,
+  PREFIX_OPTION: `${_constants2.BASE_CLASS_PREFIX}-autoComplete-option`,
+  PREFIX_GROUP: `${_constants2.BASE_CLASS_PREFIX}-autoComplete-group`
 };
 exports.cssClasses = cssClasses;
 const strings = {

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

@@ -14,7 +14,7 @@ export interface StateOptionItem extends DataItem {
     show?: boolean;
     key?: string | number;
 }
-export declare type AutoCompleteData = Array<DataItem | string>;
+export type AutoCompleteData = Array<DataItem | string>;
 export interface AutoCompleteAdapter<P = Record<string, any>, S = Record<string, any>> extends KeyboardAdapter<P, S> {
     getTriggerWidth: () => number | undefined;
     setOptionWrapperWidth: (width: number) => void;
@@ -31,6 +31,8 @@ export interface AutoCompleteAdapter<P = Record<string, any>, S = Record<string,
     notifyBlur: (event?: any) => void;
     rePositionDropdown: () => void;
     persistEvent: (event: any) => void;
+    registerClickOutsideHandler: (cb: (e: any) => void) => void;
+    unregisterClickOutsideHandler: () => void;
 }
 declare class AutoCompleteFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<AutoCompleteAdapter<P, S>, P, S> {
     private _keydownHandler;