@king-design/react 3.0.0-beta.0 → 3.0.0-beta.2

package/components/tabs/styles.js

@@ -1,7 +1,4 @@
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
-
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-
 import { css } from '@emotion/css';
 import { theme, setDefault } from '../../styles/theme';
 import { deepDefaults, sizes } from '../../styles/utils';
@@ -12,13 +9,19 @@ var closeFontSizeMap = {
   small: '18px',
   mini: '16px'
 };
+var navigatorWidthMap = {
+  large: theme.large.height,
+  default: theme.default.height,
+  small: theme.small.height,
+  mini: theme.mini.height
+};
 var defaults = deepDefaults({
   get transition() {
     return theme.transition.middle;
   },
 
   get borderColor() {
-    return theme.color.border;
+    return '#f0f2f4';
   },
 
   borderWidth: '1px',
@@ -32,8 +35,6 @@ var defaults = deepDefaults({
   },
 
   closeGap: "8px",
-  // scroll
-  navigatorWidth: "20px",
   //active
   active: {
     get color() {
@@ -49,20 +50,21 @@ var defaults = deepDefaults({
 
     }
   },
-  // border-card
-  borderCard: {
+  card: {
     get bgColor() {
       return theme.color.bg;
-    }
+    },
 
-  },
-  // no-border-card
-  noBorderCard: {
-    get bgColor() {
-      return theme.color.bg;
+    get borderRadius() {
+      return theme.borderRadius;
     }
 
   },
+  flatCard: {
+    // get bgColor() { return theme.color.bg },
+    // get borderRadius() { return theme.borderRadius },
+    padding: '2px'
+  },
   // define size
   size: {
     large: {
@@ -90,6 +92,11 @@ var defaults = deepDefaults({
 
     get closeFontSize() {
       return closeFontSizeMap[size];
+    },
+
+    // scroll
+    get navigatorWidth() {
+      return navigatorWidthMap[size];
     }
 
   };
@@ -102,45 +109,36 @@ setDefault(function () {
   }).tabs;
 });
 export function makeStyles() {
-  return /*#__PURE__*/css(makeCommonStyles(), ";", makeScrollStyles(), ";&.k-type-default{", makeDefaultStyles(), ";}&.k-type-card{", makeDefaultStyles(), " ", makeCardStyles(), ";}&.k-type-border-card{", makeBorderCardStyles(), ";}&.k-type-no-border-card{", makeNoBorderCardStyles(), ";}");
+  return /*#__PURE__*/css(makeCommonStyles(), ";", makeScrollStyles(), ";&.k-type-default{", makeDefaultStyles(), ";}&.k-type-card{", makeCardStyles(), ";}&.k-type-flat-card{", makeFlatCardStyles(), ";}");
 }
 
 function makeCommonStyles() {
   var active = tabs.active;
   var bar = active.bar;
-  return /*#__PURE__*/css("position:relative;.k-tab{cursor:pointer;display:inline-block;text-align:center;color:", tabs.color, ";position:relative;vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;&:hover,&.k-active{color:", active.color, ";}&.k-disabled{color:", theme.color.disabled, ";cursor:not-allowed;}}.k-tab-close{margin-right:-", tabs.closeGap, ";margin-left:", tabs.closeGap, ";position:relative;top:-1px;color:", theme.color.lightBlack, ";}.k-tabs-active-bar{transition:all ", tabs.transition, ";position:absolute;left:0;height:", bar.height, ";background:", bar.bgColor, ";bottom:calc(-", bar.height, " / 2);}&.k-vertical{display:inline-block;.k-tab{display:block;}.k-tabs-active-bar{left:auto;top:0;right:calc(-", bar.height, " / 2);width:", bar.height, ";height:auto;}}", _mapInstanceProperty(sizes).call(sizes, function (size) {
+  return /*#__PURE__*/css("position:relative;.k-tab{display:inline-flex;cursor:pointer;text-align:center;align-items:center;color:", tabs.color, ";white-space:nowrap;text-overflow:ellipsis;&:hover,&.k-active{color:", active.color, ";}&.k-disabled{color:", theme.color.disabled, ";cursor:not-allowed;}}.k-tab-close{margin-right:-", tabs.closeGap, ";margin-left:", tabs.closeGap, ";color:", theme.color.lightBlack, ";}.k-tabs-active-bar{transition:all ", tabs.transition, ";position:absolute;left:0;height:", bar.height, ";background:", bar.bgColor, ";bottom:0;}&.k-vertical{display:inline-block;.k-tab{display:block;}.k-tabs-active-bar{left:auto;top:0;right:0;width:", bar.height, ";height:auto;}}", _mapInstanceProperty(sizes).call(sizes, function (size) {
     var styles = tabs[size];
-    return "\n                &.k-size-" + size + " {\n                    .k-tab {\n                        font-size: " + styles.fontSize + ";\n                        height: " + styles.height + ";\n                        line-height: " + styles.height + ";\n                        padding: " + styles.padding + ";\n                    }\n                    .k-tab-close .k-icon {\n                        font-size: " + styles.closeFontSize + ";\n                    }\n                }\n            ";
+    return "\n                &.k-size-" + size + " {\n                    .k-tab {\n                        font-size: " + styles.fontSize + ";\n                        height: " + styles.height + ";\n                        line-height: " + styles.height + ";\n                        padding: " + styles.padding + ";\n                    }\n                    .k-tab-close .k-icon {\n                        font-size: " + styles.closeFontSize + ";\n                    }\n                    &:not(.k-vertical).k-is-scroll {\n                        padding: 0 " + styles.navigatorWidth + ";\n                    }\n                    &.k-vertical.k-is-scroll {\n                        padding: " + styles.navigatorWidth + " 0;\n                    }\n                }\n            ";
   }), ";");
 }
 
 function makeScrollStyles() {
-  return /*#__PURE__*/css("&:not(.k-vertical){.k-tabs-scroll{overflow:hidden;position:relative;padding-bottom:1px;margin-bottom:-1px;}&.k-tabs-border-card,&.k-tabs-no-border-card{.k-tabs-scroll{padding-bottom:0;margin-bottom:0;}}.k-tabs-wrapper{white-space:nowrap;float:left;transition:transform ", tabs.transition, ";}.k-tabs-prev,.k-tabs-next{position:absolute;top:0;width:", tabs.navigatorWidth, "!important;}.k-tabs-prev{left:0;}.k-tabs-next{right:0;}&.k-is-scroll{padding:0 ", tabs.navigatorWidth, ";}}");
+  return /*#__PURE__*/css("overflow:hidden;.k-tabs-scroll{overflow:hidden;position:relative;padding-bottom:1px;margin-bottom:-1px;}&.k-type-card,&.k-type-flat-card{.k-tabs-scroll{padding-bottom:0;margin-bottom:0;}}.k-tabs-wrapper{white-space:nowrap;transition:transform ", tabs.transition, ";}.k-tabs-prev,.k-tabs-next{position:absolute;&:not(.k-disabled){box-shadow:", theme.boxShadow, ";}}&:not(.k-vertical){.k-tabs-wrapper{float:left;}.k-tabs-prev,.k-tabs-next{top:0;}.k-tabs-prev{left:0;}.k-tabs-next{right:0;}}&.k-vertical{&,.k-tabs-scroll{height:100%;}.k-tabs-prev,.k-tabs-next{width:100%!important;left:0;}.k-tabs-prev{top:0;}.k-tabs-next{bottom:0;}}");
 }
 
 function makeDefaultStyles() {
   return /*#__PURE__*/css("border-bottom:", tabs.border, ";&.k-vertical{border-bottom:none;border-right:", tabs.border, ";}");
 }
 
-function makeCardActiveBarCommonStyles() {
-  return /*#__PURE__*/css(process.env.NODE_ENV === "production" ? {
-    name: "1c3pzdg",
-    styles: "background:#fff;top:0;height:auto;z-index:-1"
-  } : {
-    name: "1c3pzdg",
-    styles: "background:#fff;top:0;height:auto;z-index:-1",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-  });
+function makeCardCommonStyles() {
+  return /*#__PURE__*/css("border-radius:", tabs.card.borderRadius, ";background-color:", tabs.card.bgColor, ";.k-tabs-active-bar{background:#fff;top:0;height:auto;z-index:-1;}");
 }
 
 function makeCardStyles() {
-  return /*#__PURE__*/css(".k-tab{margin:0;}.k-tabs-active-bar{", makeCardActiveBarCommonStyles(), ";border-left:", tabs.border, ";border-right:", tabs.border, ";&:before{content:'';display:block;position:absolute;height:", tabs.active.bar.height, ";background:", theme.color.primary, ";top:0;left:-", tabs.borderWidth, ";right:-", tabs.borderWidth, ";}}&.k-vertical{.k-tabs-active-bar{left:0;width:auto;border-left:none;border-right:none;border-top:", tabs.border, ";border-bottom:", tabs.border, ";&:before{width:", tabs.active.bar.height, ";left:0;right:auto;bottom:0;height:auto;}}}");
-}
-
-function makeBorderCardStyles() {
-  return /*#__PURE__*/css("border:", tabs.border, ";border-bottom:none;background:", tabs.borderCard.bgColor, ";.k-tab{margin:0;}.k-tabs-active-bar{background:#fff;top:0;height:auto;z-index:-1;}&.k-vertical{border-right:none;border-bottom:", tabs.border, ";.k-tabs-active-bar{width:auto;height:0;left:0;bottom:0;right:0;}}");
+  var borderRadius = tabs.card.borderRadius;
+  return /*#__PURE__*/css(makeCardCommonStyles(), ";.k-tabs-active-bar{border-radius:", borderRadius, " ", borderRadius, " 0px 0px;box-shadow:", theme.boxShadow, ";}&.k-vertical{.k-tabs-active-bar{width:100%;left:0;border-radius:", borderRadius, " 0px 0px ", borderRadius, ";}}");
 }
 
-function makeNoBorderCardStyles() {
-  return /*#__PURE__*/css("border-radius:", theme.borderRadius, ";.k-tab{&:before{content:'';display:block;position:absolute;background:", tabs.noBorderCard.bgColor, ";top:0;bottom:0;left:0;right:0;z-index:-1;}}.k-tabs-active-bar{background:#fff;top:0;height:auto;z-index:-1;box-shadow:0px 0px 5px rgba(0, 0, 0, 0.08);border-radius:4px 4px 0px 0px;}&.k-vertical{border-right:none;.k-tabs-active-bar{width:auto;height:0;left:0;bottom:0;right:0;}}");
+function makeFlatCardStyles() {
+  var padding = tabs.flatCard.padding;
+  return /*#__PURE__*/css(makeCardCommonStyles(), ";padding:0 ", padding, ";.k-tabs-active-bar{top:", padding, ";height:calc(100% - ", padding, " * 2);border-radius:", tabs.card.borderRadius, ";}&.k-vertical{padding:", padding, " 0;.k-tabs-active-bar{left:", padding, ";width:calc(100% - ", padding, " * 2);}}");
 }

package/components/tabs/useScroll.d.ts

@@ -1,6 +1,6 @@
 export declare function useScroll(): {
     isScroll: import("../../hooks/useState").State<boolean>;
-    left: import("../../hooks/useState").State<number>;
+    offset: import("../../hooks/useState").State<number>;
     enablePrev: import("../../hooks/useState").State<boolean>;
     enableNext: import("../../hooks/useState").State<boolean>;
     prev: () => void;

package/components/tabs/useScroll.js

@@ -6,7 +6,7 @@ export function useScroll() {
   var scrollRef = createRef();
   var wrapperRef = createRef();
   var isScroll = useState(false);
-  var left = useState(0);
+  var offset = useState(0);
   var enablePrev = useState(false);
   var enableNext = useState(false);
   onMounted(refresh);
@@ -16,94 +16,121 @@ export function useScroll() {
     presented: true
   });
 
-  function refresh() {
+  function getLength() {
     var _instance$get = instance.get(),
         vertical = _instance$get.vertical;
 
-    if (vertical) return;
-    var scrollWidth = scrollRef.value.offsetWidth;
-    var wrapperWidth = wrapperRef.value.offsetWidth;
-    isScroll.set(scrollWidth < wrapperWidth);
-    updateTransition(left.value, scrollWidth, wrapperWidth);
-  }
-
-  function updateTransition(_left, scrollWidth, wrapperWidth) {
-    if (_left === void 0) {
-      _left = left.value;
+    if (vertical) {
+      return {
+        scrollLength: scrollRef.value.offsetHeight,
+        wrapperLength: wrapperRef.value.offsetHeight
+      };
     }
 
-    if (scrollWidth === void 0) {
-      scrollWidth = scrollRef.value.offsetWidth;
-    }
+    return {
+      scrollLength: scrollRef.value.offsetWidth,
+      wrapperLength: wrapperRef.value.offsetWidth
+    };
+  }
 
-    if (wrapperWidth === void 0) {
-      wrapperWidth = wrapperRef.value.offsetWidth;
-    }
+  function refresh() {
+    var _getLength = getLength(),
+        scrollLength = _getLength.scrollLength,
+        wrapperLength = _getLength.wrapperLength;
 
+    isScroll.set(scrollLength < wrapperLength);
+    updateTransition(offset.value, scrollLength, wrapperLength);
+  }
+
+  function updateTransition(_offset, scrollLength, wrapperLength) {
     var prev = true;
     var next = true;
 
-    if (_left >= 0) {
-      _left = 0;
+    if (_offset >= 0) {
+      _offset = 0;
       prev = false;
-    } else if (_left <= scrollWidth - wrapperWidth) {
-      _left = scrollWidth - wrapperWidth;
+    } else if (_offset <= scrollLength - wrapperLength) {
+      _offset = scrollLength - wrapperLength;
       next = false;
     }
 
-    left.set(_left);
+    offset.set(_offset);
     enablePrev.set(prev);
     enableNext.set(next);
   }
 
   function prev() {
-    var scrollWidth = scrollRef.value.offsetWidth;
-    updateTransition(left.value + scrollWidth);
+    var _getLength2 = getLength(),
+        scrollLength = _getLength2.scrollLength,
+        wrapperLength = _getLength2.wrapperLength;
+
+    updateTransition(offset.value + scrollLength, scrollLength, wrapperLength);
   }
 
   function next() {
-    var scrollWidth = scrollRef.value.offsetWidth;
-    updateTransition(left.value - scrollWidth);
+    var _getLength3 = getLength(),
+        scrollLength = _getLength3.scrollLength,
+        wrapperLength = _getLength3.wrapperLength;
+
+    updateTransition(offset.value - scrollLength, scrollLength, wrapperLength);
   }
 
   function scrollActiveToView() {
     var _instance$get2 = instance.get(),
         vertical = _instance$get2.vertical;
 
-    if (vertical) return;
     var activeTab = scrollRef.value.querySelector('.k-tab.k-active');
 
     if (activeTab) {
-      var _left = left.value; // don't use getBoundingClientRect, it has transform and will return digital number
+      var _offset = offset.value; // don't use getBoundingClientRect, it has transform and will return digital number
+
+      var activeRect;
+      var scrollRect;
+      var wrapperRect;
+
+      if (vertical) {
+        activeRect = {
+          offset: activeTab.offsetTop,
+          length: activeTab.offsetHeight
+        };
+        scrollRect = {
+          length: scrollRef.value.offsetHeight
+        };
+        wrapperRect = {
+          offset: wrapperRef.value.offsetTop,
+          length: wrapperRef.value.offsetHeight
+        };
+      } else {
+        activeRect = {
+          offset: activeTab.offsetLeft,
+          length: activeTab.offsetWidth
+        };
+        scrollRect = {
+          length: scrollRef.value.offsetWidth
+        };
+        wrapperRect = {
+          offset: wrapperRef.value.offsetLeft,
+          length: wrapperRef.value.offsetWidth
+        };
+      }
 
-      var activeRect = {
-        left: activeTab.offsetLeft,
-        width: activeTab.offsetWidth
-      };
-      var scrollRect = {
-        width: scrollRef.value.offsetWidth
-      };
-      var wrapperRect = {
-        left: wrapperRef.value.offsetLeft,
-        width: wrapperRef.value.offsetWidth
-      };
-      var x = activeRect.left - wrapperRect.left;
+      var offsetDelta = activeRect.offset - wrapperRect.offset;
 
-      if (_left + x <= 0) {
-        _left = -x;
-      } else if (x + activeRect.width + _left > scrollRect.width) {
-        _left = -x - activeRect.width + scrollRect.width;
+      if (_offset + offsetDelta <= 0) {
+        _offset = -offsetDelta;
+      } else if (offsetDelta + activeRect.length + _offset > scrollRect.length) {
+        _offset = -offsetDelta - activeRect.length + scrollRect.length;
       }
 
-      left.set(_left);
+      offset.set(_offset);
     } else {
-      left.set(0);
+      offset.set(0);
     }
   }
 
   return {
     isScroll: isScroll,
-    left: left,
+    offset: offset,
     enablePrev: enablePrev,
     enableNext: enableNext,
     prev: prev,

package/components/tag/base.d.ts

@@ -14,6 +14,7 @@ export interface TagEvents {
 }
 export interface TagBlocks {
 }
+export declare const typeDefs: Required<TypeDefs<TagProps>>;
 export declare class Tag<T extends TagProps = TagProps, E extends TagEvents = TagEvents, B extends TagBlocks = TagBlocks> extends Component<T, E, B> {
     static template: string | import("intact").Template<any>;
     static typeDefs: Required<TypeDefs<TagProps>>;

package/components/tag/base.js

@@ -4,7 +4,7 @@ import { Component } from 'intact-react';
 import { bind } from '../utils';
 import template from './index.vdt';
 import { sizes } from '../../styles/utils';
-var typeDefs = {
+export var typeDefs = {
   type: ['default', 'primary', 'danger', 'success', 'warning'],
   closable: Boolean,
   closed: Boolean,

package/components/tag/index.d.ts

@@ -1,4 +1,5 @@
 import { TagProps, TagEvents, TagBlocks, Tag as BaseTag } from './base';
+export * from './tags';
 export type { TagProps, TagEvents, TagBlocks };
 export declare class Tag extends BaseTag<TagProps, TagEvents, TagBlocks> {
 }

package/components/tag/index.js

@@ -1,5 +1,6 @@
 import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
-import { Tag as BaseTag } from './base'; // export declare class _Tag extends BaseTag<
+import { Tag as BaseTag } from './base';
+export * from './tags'; // export declare class _Tag extends BaseTag<
 // TagProps,
 // TagEvents,
 // TagBlocks

package/components/tag/index.spec.js

@@ -1,11 +1,11 @@
 import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
 import ClosableDemo from '~/components/tag/demos/closable';
-import { mount, unmount, wait } from '../../test/utils';
+import { mount, wait, dispatchEvent, getElement } from '../../test/utils';
+import TagsDemo from '~/components/tag/demos/tags';
+import DraggableDemo from '~/components/tag/demos/draggable';
 describe('Tag', function () {
-  afterEach(function () {
-    return unmount();
-  });
+  // afterEach(() => unmount());
   it('should not close tag if we has prevented default', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
     var _mount, instance, element, btns, preventDefaultBtn, commonBtn;
 
@@ -37,4 +37,147 @@ describe('Tag', function () {
       }
     }, _callee);
   })));
+  it('should hide tags that overflow', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+    var _mount2, instance, element, lastPanel, more, tooltip, tags;
+
+    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            _mount2 = mount(TagsDemo), instance = _mount2[0], element = _mount2[1];
+            lastPanel = element.querySelector('.k-split-last');
+            _context2.next = 4;
+            return wait(0);
+
+          case 4:
+            expect(lastPanel.innerHTML).to.matchSnapshot(); // show tooltip
+
+            more = lastPanel.querySelector('.k-tags-more');
+            dispatchEvent(more, 'mouseenter');
+            _context2.next = 9;
+            return wait();
+
+          case 9:
+            tooltip = getElement('.k-tags-tooltip');
+            expect(tooltip.querySelectorAll('.k-tag').length).to.eql(3); // remove one tag
+
+            dispatchEvent(lastPanel.querySelector('.k-tag-close'), 'click');
+            _context2.next = 14;
+            return wait(0);
+
+          case 14:
+            expect(lastPanel.innerHTML).to.matchSnapshot(); // resize
+
+            tags = lastPanel.querySelector('.k-tags');
+            tags.style.width = '200px';
+            _context2.next = 19;
+            return wait(200);
+
+          case 19:
+            expect(lastPanel.innerHTML).to.matchSnapshot(); // show tooltip again (the "more" element will be removed and created again)
+
+            more = lastPanel.querySelector('.k-tags-more');
+            dispatchEvent(more, 'mouseenter');
+            _context2.next = 24;
+            return wait();
+
+          case 24:
+            tooltip = getElement('.k-tags-tooltip');
+            expect(tooltip.querySelectorAll('.k-tag').length).to.eql(3);
+
+          case 26:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  })));
+  it('should support drag tags', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
+    var _mount3, instance, element, test, _test, _element$querySelecto, tag1, tag2, tag6, _element$querySelecto2, tag11, tag22, more, dropdown, _dropdown$querySelect, tag55, tag66;
+
+    return _regeneratorRuntime.wrap(function _callee4$(_context4) {
+      while (1) {
+        switch (_context4.prev = _context4.next) {
+          case 0:
+            _test = function _test3() {
+              _test = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(from, to) {
+                return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+                  while (1) {
+                    switch (_context3.prev = _context3.next) {
+                      case 0:
+                        dispatchEvent(from, 'dragstart');
+                        _context3.next = 3;
+                        return wait();
+
+                      case 3:
+                        dispatchEvent(to, 'dragover');
+                        _context3.next = 6;
+                        return wait(500);
+
+                      case 6:
+                        expect(element.innerHTML).to.matchSnapshot();
+                        dispatchEvent(from, 'dragend');
+                        _context3.next = 10;
+                        return wait();
+
+                      case 10:
+                        expect(element.innerHTML).to.matchSnapshot();
+
+                      case 11:
+                      case "end":
+                        return _context3.stop();
+                    }
+                  }
+                }, _callee3);
+              }));
+              return _test.apply(this, arguments);
+            };
+
+            test = function _test2(_x, _x2) {
+              return _test.apply(this, arguments);
+            };
+
+            _mount3 = mount(DraggableDemo), instance = _mount3[0], element = _mount3[1];
+            _element$querySelecto = element.querySelectorAll('.k-tag'), tag1 = _element$querySelecto[0], tag2 = _element$querySelecto[1], tag6 = _element$querySelecto[5];
+            _context4.next = 6;
+            return test(tag1, tag2);
+
+          case 6:
+            _context4.next = 8;
+            return test(tag1, tag6);
+
+          case 8:
+            // with more tooltip
+            _element$querySelecto2 = element.querySelectorAll('.k-tags:last-of-type .k-tag'), tag11 = _element$querySelecto2[0], tag22 = _element$querySelecto2[1], more = _element$querySelecto2[4];
+            _context4.next = 11;
+            return test(tag11, tag22);
+
+          case 11:
+            _context4.next = 13;
+            return wait(0);
+
+          case 13:
+            dispatchEvent(more, 'mouseenter');
+            _context4.next = 16;
+            return wait();
+
+          case 16:
+            dropdown = getElement('.k-tags-tooltip');
+            _dropdown$querySelect = dropdown.querySelectorAll('.k-tag'), tag55 = _dropdown$querySelect[0], tag66 = _dropdown$querySelect[1];
+            _context4.next = 20;
+            return test(tag55, tag11);
+
+          case 20:
+            expect(dropdown.innerText).to.eql('warning\nwith tooltip'); // should not drag to other tags
+
+            _context4.next = 23;
+            return test(tag11, tag2);
+
+          case 23:
+          case "end":
+            return _context4.stop();
+        }
+      }
+    }, _callee4);
+  })));
 });

package/components/tag/styles.d.ts

@@ -1,2 +1,69 @@
 import '../../styles/global';
+declare type TypeStyles = {
+    color: string;
+    bgColor: string;
+};
+declare const defaults: {
+    readonly border: string;
+    readonly borderRadius: string;
+    readonly fontSize: string;
+    padding: string;
+    height: string;
+    readonly bgColor: string;
+    close: {
+        fontSize: string;
+        gap: string;
+        /**
+         * fix the width to calculate the width for nowrap tags,
+         * otherwise the width will be decided by font font-icons loaded
+         */
+        width: string;
+    };
+    disabled: {
+        readonly color: string;
+        readonly borderColor: string;
+        readonly bgColor: string;
+    };
+    large: {
+        padding: string;
+        height: string;
+        readonly fontSize: string;
+        close: {
+            fontSize: string;
+            gap: string;
+        };
+    };
+    small: {
+        padding: string;
+        height: string;
+        readonly fontSize: string;
+        close: {
+            fontSize: string;
+            gap: string;
+        };
+    };
+    mini: {
+        padding: string;
+        height: string;
+        fontSize: string;
+        close: {
+            fontSize: string;
+            gap: string;
+        };
+    };
+    none: {
+        readonly bgColor: string;
+    };
+    tags: {
+        gap: string;
+    };
+} & {
+    primary: TypeStyles;
+    warning: TypeStyles;
+    danger: TypeStyles;
+    success: TypeStyles;
+};
+declare let tag: typeof defaults;
+export { tag };
 export declare function makeStyles(): string;
+export declare function makeTagsStyles(): string;