@king-design/react 3.6.2-beta.1 → 3.7.0

package/components/anchor/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const ANCHOR = "Anchor";
+export declare const ANCHOR_LINK_LEVEL = "AnchorLinkLevel";

package/components/anchor/constants.js

@@ -0,0 +1,2 @@
+export var ANCHOR = 'Anchor';
+export var ANCHOR_LINK_LEVEL = 'AnchorLinkLevel';

package/components/anchor/index.d.ts

@@ -0,0 +1,41 @@
+import { Component, TypeDefs } from 'intact-react';
+import { Sizes } from '../../styles/utils';
+import type { Events } from '../types';
+import type { AnchorLinkProps } from './link';
+export * from './link';
+export interface AnchorProps {
+    value?: string;
+    offset?: number;
+    container?: string | HTMLElement;
+    threshold?: number;
+    vertical?: boolean;
+    size?: Sizes;
+    duration?: number;
+}
+export interface AnchorEvents {
+    change: [string];
+    click: [MouseEvent, AnchorLinkProps];
+}
+export declare class Anchor extends Component<AnchorProps, AnchorEvents> {
+    static template: string | import('intact-react').Template<any>;
+    static typeDefs: Required<TypeDefs<AnchorProps>>;
+    static defaults: () => Partial<AnchorProps>;
+    static events: Events<AnchorEvents>;
+    private scroll;
+    config: {
+        cls: (name: string) => string;
+        readonly k: string;
+        readonly disableWave: boolean;
+    };
+    private links;
+    private cleanup?;
+    private isSettingFromScroll;
+    private elementCache;
+    init(): void;
+    mounted(): void;
+    beforeUnmount(): void;
+    updated(): void;
+    private updateLinks;
+    getLinks(): string[];
+    getTargetElement(href: string): HTMLElement | null;
+}

package/components/anchor/index.js

@@ -0,0 +1,141 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import _Map from "@babel/runtime-corejs3/core-js/map";
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js/instance/includes";
+import _startsWithInstanceProperty from "@babel/runtime-corejs3/core-js/instance/starts-with";
+import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/slice";
+import { Component, provide } from 'intact-react';
+import template from './index.vdt';
+import { ANCHOR } from './constants';
+import { sizes } from '../../styles/utils';
+import { useScroll } from './useScroll';
+import { useConfigContext } from '../config';
+import { AnchorLink } from './link';
+import { eachChildren, isComponentVNode } from '../utils';
+export * from './link';
+var typeDefs = {
+  value: String,
+  offset: Number,
+  container: [String, Object],
+  threshold: Number,
+  vertical: Boolean,
+  size: sizes,
+  duration: Number
+};
+var defaults = function defaults() {
+  return {
+    offset: 0,
+    threshold: 50,
+    vertical: true,
+    size: 'default',
+    duration: 700
+  };
+};
+var events = {
+  change: true,
+  click: true
+};
+export var Anchor = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(Anchor, _Component);
+  function Anchor() {
+    var _context;
+    var _this;
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
+    _this.scroll = useScroll();
+    _this.config = useConfigContext();
+    _this.links = [];
+    _this.cleanup = void 0;
+    // 标记是否是滚动触发的 value 变化
+    _this.isSettingFromScroll = false;
+    // 元素引用缓存，避免重复的 getElementById 调用
+    _this.elementCache = new _Map();
+    return _this;
+  }
+  var _proto = Anchor.prototype;
+  _proto.init = function init() {
+    var _this2 = this;
+    provide(ANCHOR, this);
+    this.scroll.setIsSettingFromScroll = function (value) {
+      _this2.isSettingFromScroll = value;
+    };
+    this.watch('value', function (newValue, oldValue) {
+      if (newValue !== oldValue && newValue !== undefined && newValue !== null) {
+        _this2.trigger('change', newValue);
+        // 只有非滚动触发的 value 变化才 scrollTo
+        // 即：用户点击 tab 或外部 set 时才会 scrollTo
+        if (!_this2.isSettingFromScroll) {
+          var element = _this2.getTargetElement(newValue);
+          // 元素存在且可见
+          if (element && element.getClientRects().length > 0) {
+            _this2.scroll.scrollTo(element);
+          }
+        }
+      }
+    }, {
+      inited: true
+    });
+  };
+  _proto.mounted = function mounted() {
+    this.updateLinks();
+    this.cleanup = this.scroll.init();
+  };
+  _proto.beforeUnmount = function beforeUnmount() {
+    if (this.cleanup) {
+      this.cleanup();
+    }
+    // 清理元素缓存
+    this.elementCache.clear();
+  };
+  _proto.updated = function updated() {
+    this.updateLinks();
+  };
+  _proto.updateLinks = function updateLinks() {
+    var _this3 = this;
+    var links = [];
+    var children = this.get('children');
+    // 递归收集所有层级的 AnchorLink 的 href
+    var collectLinks = function collectLinks(children) {
+      if (!children) return;
+      eachChildren(children, function (vNode) {
+        if (isComponentVNode(vNode, AnchorLink)) {
+          var props = vNode.props || {};
+          if (props.href) {
+            links.push(props.href);
+          }
+          if (vNode.props && vNode.props.children) {
+            collectLinks(vNode.props.children);
+          }
+        }
+      });
+    };
+    collectLinks(children);
+    this.links = links;
+    // 清理不在当前链接列表中的缓存
+    this.elementCache.forEach(function (_, href) {
+      if (!_includesInstanceProperty(links).call(links, href)) {
+        _this3.elementCache.delete(href);
+      }
+    });
+  };
+  _proto.getLinks = function getLinks() {
+    return this.links;
+  };
+  _proto.getTargetElement = function getTargetElement(href) {
+    if (!href) return null;
+    if (this.elementCache.has(href)) {
+      return this.elementCache.get(href);
+    }
+    var id = _startsWithInstanceProperty(href).call(href, '#') ? _sliceInstanceProperty(href).call(href, 1) : href;
+    var element = document.getElementById(id);
+    this.elementCache.set(href, element);
+    return element;
+  };
+  return Anchor;
+}(Component);
+Anchor.template = template;
+Anchor.typeDefs = typeDefs;
+Anchor.defaults = defaults;
+Anchor.events = events;

package/components/anchor/index.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/components/anchor/index.spec.js

@@ -0,0 +1,230 @@
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import _Promise from "@babel/runtime-corejs3/core-js/promise";
+import BasicDemo from '~/components/anchor/demos/basic';
+import NestedDemo from '~/components/anchor/demos/nested';
+import { mount, unmount, wait, dispatchEvent } from '../../test/utils';
+import { Anchor, AnchorLink } from './';
+import { Component } from 'intact-react';
+// 基础 Demo
+var BaseAnchorDemo = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(BaseAnchorDemo, _Component);
+  function BaseAnchorDemo() {
+    var _context;
+    var _this;
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
+    _this.Anchor = Anchor;
+    _this.AnchorLink = AnchorLink;
+    return _this;
+  }
+  var _proto = BaseAnchorDemo.prototype;
+  _proto.getAnchorProps = function getAnchorProps() {
+    return {};
+  };
+  BaseAnchorDemo.defaults = function defaults() {
+    return {
+      value: 'section1'
+    };
+  };
+  return BaseAnchorDemo;
+}(Component);
+BaseAnchorDemo.template = "\n        const {Anchor, AnchorLink} = this;\n        <div style=\"display: flex; gap: 20px; align-items: flex-start;\">\n            <div id=\"scroll-container-test\" style=\"flex: 1; height: 300px; overflow-y: auto;\">\n                <div id=\"section1\" style=\"height: 300px; padding: 20px;\">Section 1</div>\n                <div id=\"section2\" style=\"height: 300px; padding: 20px;\">Section 2</div>\n                <div id=\"section3\" style=\"height: 300px; padding: 20px;\">Section 3</div>\n            </div>\n            <Anchor v-model=\"value\" container=\"#scroll-container-test\" {...this.getAnchorProps()}>\n                <AnchorLink href=\"section1\" title=\"Section 1\" />\n                <AnchorLink href=\"section2\" title=\"Section 2\" />\n                <AnchorLink href=\"section3\" title=\"Section 3\" />\n            </Anchor>\n        </div>\n    ";
+describe('Anchor', function () {
+  afterEach(function () {
+    unmount();
+  });
+  it('should render basic anchor correctly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var _mount, instance, element, anchor;
+    return _regeneratorRuntime.wrap(function _callee$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          _mount = mount(BasicDemo), instance = _mount[0], element = _mount[1];
+          _context2.next = 3;
+          return wait(200);
+        case 3:
+          anchor = element.querySelector('.k-anchor');
+          expect(anchor).to.exist;
+          expect(anchor.outerHTML).to.matchSnapshot();
+        case 6:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee);
+  })));
+  it('should scroll to target position when clicking anchor link', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+    var Demo, _mount2, instance, element, container, anchor, secondLink, section2, initialScrollTop, finalScrollTop, rect, containerRect;
+    return _regeneratorRuntime.wrap(function _callee2$(_context3) {
+      while (1) switch (_context3.prev = _context3.next) {
+        case 0:
+          this.timeout(0);
+          Demo = /*#__PURE__*/function (_BaseAnchorDemo) {
+            _inheritsLoose(Demo, _BaseAnchorDemo);
+            function Demo() {
+              return _BaseAnchorDemo.apply(this, arguments) || this;
+            }
+            return Demo;
+          }(BaseAnchorDemo);
+          _mount2 = mount(Demo), instance = _mount2[0], element = _mount2[1];
+          _context3.next = 5;
+          return wait(300);
+        case 5:
+          container = document.querySelector('#scroll-container-test');
+          anchor = element.querySelector('.k-anchor');
+          secondLink = anchor.querySelectorAll('.k-tab')[1];
+          section2 = document.getElementById('section2'); // 先滚动到顶部
+          container.scrollTop = 0;
+          _context3.next = 12;
+          return wait(100);
+        case 12:
+          initialScrollTop = container.scrollTop; // 点击第二个锚点链接
+          secondLink.click();
+          // 等待滚动动画完成
+          _context3.next = 16;
+          return wait(800);
+        case 16:
+          // 检查容器是否滚动
+          finalScrollTop = container.scrollTop;
+          expect(finalScrollTop).to.be.greaterThan(initialScrollTop);
+          // 检查 section2 是否在视口内或接近视口顶部
+          rect = section2.getBoundingClientRect();
+          containerRect = container.getBoundingClientRect();
+          expect(rect.top).to.be.lessThan(containerRect.bottom);
+        case 21:
+        case "end":
+          return _context3.stop();
+      }
+    }, _callee2, this);
+  })));
+  it('should update value when scrolling', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+    var Demo, _mount3, instance, element, container, targetScrollTop;
+    return _regeneratorRuntime.wrap(function _callee3$(_context4) {
+      while (1) switch (_context4.prev = _context4.next) {
+        case 0:
+          this.timeout(0);
+          Demo = /*#__PURE__*/function (_BaseAnchorDemo2) {
+            _inheritsLoose(Demo, _BaseAnchorDemo2);
+            function Demo() {
+              return _BaseAnchorDemo2.apply(this, arguments) || this;
+            }
+            return Demo;
+          }(BaseAnchorDemo);
+          _mount3 = mount(Demo), instance = _mount3[0], element = _mount3[1];
+          _context4.next = 5;
+          return wait(300);
+        case 5:
+          container = document.querySelector('#scroll-container-test');
+          targetScrollTop = 300;
+          container.scrollTop = targetScrollTop;
+          dispatchEvent(container, 'scroll');
+          _context4.next = 11;
+          return new _Promise(function (resolve) {
+            return requestAnimationFrame(resolve);
+          });
+        case 11:
+          _context4.next = 13;
+          return wait(100);
+        case 13:
+          expect(instance.get('value')).to.eql('section2');
+        case 14:
+        case "end":
+          return _context4.stop();
+      }
+    }, _callee3, this);
+  })));
+  it('should trigger change event', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
+    var Demo, _mount4, instance, element, anchor, secondLink;
+    return _regeneratorRuntime.wrap(function _callee4$(_context6) {
+      while (1) switch (_context6.prev = _context6.next) {
+        case 0:
+          this.timeout(0);
+          Demo = /*#__PURE__*/function (_BaseAnchorDemo3) {
+            _inheritsLoose(Demo, _BaseAnchorDemo3);
+            function Demo() {
+              var _context5;
+              var _this2;
+              for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+                args[_key2] = arguments[_key2];
+              }
+              _this2 = _BaseAnchorDemo3.call.apply(_BaseAnchorDemo3, _concatInstanceProperty(_context5 = [this]).call(_context5, args)) || this;
+              _this2.onChange = sinon.spy();
+              return _this2;
+            }
+            var _proto2 = Demo.prototype;
+            _proto2.getAnchorProps = function getAnchorProps() {
+              return {
+                'ev-change': this.onChange
+              };
+            };
+            return Demo;
+          }(BaseAnchorDemo);
+          _mount4 = mount(Demo), instance = _mount4[0], element = _mount4[1];
+          _context6.next = 5;
+          return wait(300);
+        case 5:
+          anchor = element.querySelector('.k-anchor');
+          secondLink = anchor.querySelectorAll('.k-tab')[1];
+          secondLink.click();
+          _context6.next = 10;
+          return wait(300);
+        case 10:
+          expect(instance.onChange.calledOnce).to.be.true;
+          expect(instance.onChange.calledWith('section2')).to.be.true;
+        case 12:
+        case "end":
+          return _context6.stop();
+      }
+    }, _callee4, this);
+  })));
+  it('should render nested anchor links correctly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
+    var _mount5, instance, element, anchor, nestedLinks;
+    return _regeneratorRuntime.wrap(function _callee5$(_context7) {
+      while (1) switch (_context7.prev = _context7.next) {
+        case 0:
+          _mount5 = mount(NestedDemo), instance = _mount5[0], element = _mount5[1];
+          _context7.next = 3;
+          return wait(200);
+        case 3:
+          anchor = element.querySelector('.k-anchor');
+          expect(anchor).to.exist;
+          nestedLinks = anchor.querySelectorAll('.k-anchor-link-nested');
+          expect(nestedLinks.length).to.be.greaterThan(0);
+          expect(anchor.outerHTML).to.matchSnapshot();
+        case 8:
+        case "end":
+          return _context7.stop();
+      }
+    }, _callee5);
+  })));
+  it('should support disabled anchor link', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6() {
+    var Demo, _mount6, instance, element, anchor, disabledLink;
+    return _regeneratorRuntime.wrap(function _callee6$(_context8) {
+      while (1) switch (_context8.prev = _context8.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_BaseAnchorDemo4) {
+            _inheritsLoose(Demo, _BaseAnchorDemo4);
+            function Demo() {
+              return _BaseAnchorDemo4.apply(this, arguments) || this;
+            }
+            return Demo;
+          }(BaseAnchorDemo);
+          Demo.template = "\n                const {Anchor, AnchorLink} = this;\n                <div style=\"display: flex; gap: 20px; align-items: flex-start;\">\n                    <div id=\"scroll-container-test\" style=\"flex: 1; height: 300px; overflow-y: auto;\">\n                        <div id=\"section1\" style=\"height: 300px; padding: 20px;\">Section 1</div>\n                        <div id=\"section2\" style=\"height: 300px; padding: 20px;\">Section 2</div>\n                    </div>\n                    <Anchor v-model=\"value\" container=\"#scroll-container-test\">\n                        <AnchorLink href=\"section1\" title=\"Section 1\" />\n                        <AnchorLink href=\"section2\" title=\"Section 2\" disabled={true} />\n                    </Anchor>\n                </div>\n            ";
+          _mount6 = mount(Demo), instance = _mount6[0], element = _mount6[1];
+          _context8.next = 5;
+          return wait(200);
+        case 5:
+          anchor = element.querySelector('.k-anchor');
+          disabledLink = anchor.querySelectorAll('.k-tab')[1];
+          expect(disabledLink.className).to.include('k-disabled');
+          expect(anchor.outerHTML).to.matchSnapshot();
+        case 9:
+        case "end":
+          return _context8.stop();
+      }
+    }, _callee6);
+  })));
+});

package/components/anchor/index.vdt.js

@@ -0,0 +1,31 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { createVNode as _$cv, className as _$cn, createUnknownComponentVNode as _$cc } from 'intact-react';
+import { Tabs } from '../tabs';
+import { getRestProps } from '../utils';
+import { makeStyles } from './styles';
+export default function ($props, $blocks, $__proto__) {
+  var _classNameObj;
+  $blocks || ($blocks = {});
+  $props || ($props = {});
+  var $this = this;
+  var _this$get = this.get(),
+    className = _this$get.className,
+    children = _this$get.children,
+    vertical = _this$get.vertical,
+    size = _this$get.size,
+    value = _this$get.value;
+  var k = this.config.k;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-anchor"] = true, _classNameObj[className] = className, _classNameObj[k + "-anchor-vertical"] = vertical, _classNameObj[makeStyles(k, vertical)] = true, _classNameObj);
+  return _$cv('div', _extends({
+    'className': _$cn(classNameObj)
+  }, getRestProps(this)), _$cc(Tabs, {
+    'vertical': vertical,
+    'size': size,
+    'children': children,
+    'ev-$model:value': function ev$modelValue($v) {
+      $this.set('value', $v);
+    },
+    'value': $this.get('value')
+  }));
+}
+;

package/components/anchor/link.d.ts

@@ -0,0 +1,16 @@
+import { Component, TypeDefs, VNode } from 'intact-react';
+export interface AnchorLinkProps {
+    href?: string;
+    title?: string | VNode;
+    disabled?: boolean;
+}
+export declare class AnchorLink extends Component<AnchorLinkProps> {
+    static template: string | import('intact-react').Template<any>;
+    static typeDefs: Required<TypeDefs<AnchorLinkProps>>;
+    private anchor;
+    private config;
+    private level;
+    init(): void;
+    private onClick;
+    getLevel(): number;
+}

package/components/anchor/link.js

@@ -0,0 +1,52 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import { __decorate } from "tslib";
+import { Component, inject, provide, VNode } from 'intact-react';
+import template from './link.vdt';
+import { ANCHOR, ANCHOR_LINK_LEVEL } from './constants';
+import { bind } from '../utils';
+import { useConfigContext } from '../config';
+var typeDefs = {
+  href: String,
+  title: [String, VNode],
+  disabled: Boolean
+};
+export var AnchorLink = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(AnchorLink, _Component);
+  function AnchorLink() {
+    var _context;
+    var _this;
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
+    _this.anchor = inject(ANCHOR);
+    _this.config = useConfigContext();
+    _this.level = inject(ANCHOR_LINK_LEVEL, 0);
+    return _this;
+  }
+  var _proto = AnchorLink.prototype;
+  _proto.init = function init() {
+    provide(ANCHOR_LINK_LEVEL, this.level + 1);
+  };
+  _proto.onClick = function onClick(e) {
+    var _this$get = this.get(),
+      title = _this$get.title,
+      href = _this$get.href,
+      disabled = _this$get.disabled;
+    if (href) {
+      this.anchor.trigger('click', e, {
+        title: title,
+        href: href,
+        disabled: disabled
+      });
+    }
+  };
+  _proto.getLevel = function getLevel() {
+    return this.level;
+  };
+  return AnchorLink;
+}(Component);
+AnchorLink.template = template;
+AnchorLink.typeDefs = typeDefs;
+__decorate([bind], AnchorLink.prototype, "onClick", null);

package/components/anchor/link.vdt.js

@@ -0,0 +1,49 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { createUnknownComponentVNode as _$cc, className as _$cn } from 'intact-react';
+import { Tab } from '../tabs';
+import { getRestProps, eachChildren, isComponentVNode } from '../utils';
+import { isNullOrUndefined } from 'intact-shared';
+import { AnchorLink } from './link';
+export default function ($props, $blocks, $__proto__) {
+  var _classNameObj;
+  $blocks || ($blocks = {});
+  $props || ($props = {});
+  var $this = this;
+  var _this$get = this.get(),
+    href = _this$get.href,
+    title = _this$get.title,
+    children = _this$get.children,
+    className = _this$get.className,
+    disabled = _this$get.disabled;
+  var _this$anchor$get = this.anchor.get(),
+    currentValue = _this$anchor$get.value,
+    vertical = _this$anchor$get.vertical;
+  var k = this.config.k;
+  var level = this.level;
+  var verticalMode = vertical !== false; // 默认为 true
+
+  // 检查是否有嵌套的 AnchorLink 仅在 vertical 模式下支持嵌套
+  var nestedLinks = [];
+  var otherChildren = [];
+  if (children) {
+    eachChildren(children, function (vNode) {
+      if (isComponentVNode(vNode, AnchorLink)) {
+        nestedLinks.push(vNode);
+      } else {
+        otherChildren.push(vNode);
+      }
+    });
+  }
+  var hasNestedLinks = nestedLinks.length > 0 && verticalMode;
+  // 如果有嵌套的 AnchorLink，显示 title；否则显示 title 或 children
+  var displayTitle = title || (hasNestedLinks ? null : otherChildren.length > 0 ? otherChildren : null);
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-anchor-link"] = true, _classNameObj[k + "-anchor-link-nested"] = hasNestedLinks, _classNameObj[k + "-anchor-link-level-" + level] = level > 0 && verticalMode, _classNameObj[className] = className, _classNameObj);
+  return [_$cc(Tab, _extends({}, getRestProps(this), {
+    'className': _$cn(classNameObj),
+    'value': href,
+    'disabled': disabled,
+    'ev-click': this.onClick,
+    'children': displayTitle
+  })), hasNestedLinks ? nestedLinks : null];
+}
+;

package/components/anchor/styles.d.ts

@@ -0,0 +1,5 @@
+import '../../styles/global';
+export declare const makeStyles: {
+    (k: string, vertical?: boolean | undefined): string;
+    clearCache(): {};
+};

package/components/anchor/styles.js

@@ -0,0 +1,30 @@
+import _Array$from from "@babel/runtime-corejs3/core-js/array/from";
+import { css } from '@emotion/css';
+import { theme, setDefault } from '../../styles/theme';
+import { deepDefaults } from '../../styles/utils';
+import '../../styles/global';
+import { cache } from '../utils';
+var defaults = {
+  get transition() {
+    return theme.transition.middle;
+  },
+  link: {
+    padding: 16
+  }
+};
+var anchor;
+setDefault(function () {
+  anchor = deepDefaults(theme, {
+    anchor: defaults
+  }).anchor;
+  makeStyles == null || makeStyles.clearCache();
+});
+export var makeStyles = cache(function makeStyles(k, vertical) {
+  return /*#__PURE__*/css("&.", k, "-anchor-vertical{.", k, "-tabs.", k, "-vertical{border-right:none;border-left:1px solid ", theme.color.border, ";.", k, "-tabs-active-bar{left:0;right:auto;}}}.", k, "-anchor-link{", _Array$from({
+    length: 10
+  }, function (_, i) {
+    var level = i + 1;
+    var paddingLeft = anchor.link.padding + anchor.link.padding * level;
+    return /*#__PURE__*/css("&.", k, "-anchor-link-level-", level, ".", k, "-tab{padding-left:", paddingLeft, "px;}");
+  }), ";&.", k, "-tab{transition:color ", anchor.transition, ";text-align:", vertical ? 'left' : 'center', ";}}");
+});

package/components/anchor/useScroll.d.ts

@@ -0,0 +1,7 @@
+export declare function useScroll(): {
+    scrollTo: (target: HTMLElement) => void;
+    updateActive: () => void;
+    init: () => () => void;
+    isScrolling: import("../../hooks/useState").State<boolean>;
+    setIsSettingFromScroll: (value: boolean) => void;
+};