@semcore/base-trigger 2.6.3 → 3.0.0

package/lib/es6/LinkTrigger.js

@@ -31,25 +31,23 @@ var style = (
 /*__reshadow_css_start__*/
 _sstyled.insert(
 /*__inner_css_start__*/
-".___SLinkTrigger_qt3iv_gg_{display:inline-flex;align-items:center;line-height:normal;position:relative;touch-action:manipulation;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;box-sizing:border-box;padding:0;margin:0;outline:none;text-decoration:none;-webkit-tap-highlight-color:transparent;overflow:visible;outline:0;vertical-align:middle;font-family:inherit;cursor:pointer}.___SLinkTrigger_qt3iv_gg_{color:#0071bc;background:none;transition:color .15s ease-in-out}.___SLinkTrigger_qt3iv_gg_:active,.___SLinkTrigger_qt3iv_gg_:hover,.___SLinkTrigger_qt3iv_gg_.__active_qt3iv_gg_{color:#0063a5}.___SLinkTrigger_qt3iv_gg_:active .___SText_qt3iv_gg_,.___SLinkTrigger_qt3iv_gg_:hover .___SText_qt3iv_gg_,.___SLinkTrigger_qt3iv_gg_.__active_qt3iv_gg_ .___SText_qt3iv_gg_{border-color:currentColor}.___SLinkTrigger_qt3iv_gg_ .___SText_qt3iv_gg_{border-bottom-width:1px;border-bottom-style:solid;border-color:transparent;transition:border-bottom-color .15s ease-in-out}.___SLinkTrigger_qt3iv_gg_.__color_qt3iv_gg_{color:var(--color_rbea4n)}.___SLinkTrigger_qt3iv_gg_.__color_qt3iv_gg_:hover{color:var(--color-hover_rbea4n)}.___SLinkTrigger_qt3iv_gg_.__disabled_qt3iv_gg_{opacity:0.3;cursor:default;pointer-events:none}.___SLinkTrigger_qt3iv_gg_.__keyboardFocused_qt3iv_gg_{box-shadow:0 0 0 3px rgba(43, 148, 225, 0.3);z-index:1}.___SAddon_qt3iv_gg_,.___SLinkAddon_qt3iv_gg_{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.___SAddon_qt3iv_gg_:not(:only-child):first-child,.___SLinkAddon_qt3iv_gg_:not(:only-child):first-child{margin-right:4px}.___SAddon_qt3iv_gg_:not(:only-child):last-child,.___SLinkAddon_qt3iv_gg_:not(:only-child):last-child{margin-left:4px}.___SLinkAddon_qt3iv_gg_{width:12px;height:12px}.___SLinkTrigger_qt3iv_gg_._size_s_qt3iv_gg_{font-size:10px}.___SLinkTrigger_qt3iv_gg_._size_m_qt3iv_gg_{font-size:12px}.___SLinkTrigger_qt3iv_gg_._size_l_qt3iv_gg_{font-size:14px}.___SLinkTrigger_qt3iv_gg_._size_xl_qt3iv_gg_{font-size:16px}@media (prefers-reduced-motion){.___SLinkTrigger_qt3iv_gg_{transition:none}.___SLinkTrigger_qt3iv_gg_ .___SText_qt3iv_gg_{transition:none}}"
+".___SLinkTrigger_1lk11_gg_{display:inline-flex;align-items:center;line-height:normal;position:relative;touch-action:manipulation;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;box-sizing:border-box;padding:0;margin:0;outline:none;text-decoration:none;-webkit-tap-highlight-color:transparent;overflow:visible;outline:0;vertical-align:middle;font-family:Inter,sans-serif;cursor:pointer;color:#006dca;background:none;transition:color .15s ease-in-out}.___SLinkTrigger_1lk11_gg_:active,.___SLinkTrigger_1lk11_gg_:hover,.___SLinkTrigger_1lk11_gg_.__active_1lk11_gg_{color:#044792}.___SLinkTrigger_1lk11_gg_:active .___SText_1lk11_gg_,.___SLinkTrigger_1lk11_gg_:hover .___SText_1lk11_gg_,.___SLinkTrigger_1lk11_gg_.__active_1lk11_gg_ .___SText_1lk11_gg_{border-color:currentColor}.___SLinkTrigger_1lk11_gg_ .___SText_1lk11_gg_{border-bottom-width:1px;border-bottom-style:solid;border-color:transparent;transition:border-bottom-color .15s ease-in-out;line-height:1.42}.___SLinkTrigger_1lk11_gg_.__color_1lk11_gg_{color:var(--color_klk89u)}.___SLinkTrigger_1lk11_gg_.__color_1lk11_gg_:hover{color:var(--color-hover_klk89u)}.___SLinkTrigger_1lk11_gg_.__disabled_1lk11_gg_{opacity:0.3;cursor:default;pointer-events:none}.___SLinkTrigger_1lk11_gg_.__keyboardFocused_1lk11_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2);z-index:1}.___SAddon_1lk11_gg_,.___SLinkAddon_1lk11_gg_{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.___SAddon_1lk11_gg_:not(:only-child):first-child,.___SLinkAddon_1lk11_gg_:not(:only-child):first-child{margin-right:4px}.___SAddon_1lk11_gg_:not(:only-child):last-child,.___SLinkAddon_1lk11_gg_:not(:only-child):last-child{margin-left:4px}.___SLinkAddon_1lk11_gg_{width:16px;height:16px}.___SLinkTrigger_1lk11_gg_._size_m_1lk11_gg_{font-size:14px}.___SLinkTrigger_1lk11_gg_._size_l_1lk11_gg_{font-size:16px}@media (prefers-reduced-motion){.___SLinkTrigger_1lk11_gg_{transition:none}.___SLinkTrigger_1lk11_gg_ .___SText_1lk11_gg_{transition:none}}"
 /*__inner_css_end__*/
-, "rbea4n_gg_")
+, "klk89u_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SLinkTrigger": "___SLinkTrigger_qt3iv_gg_",
-  "_active": "__active_qt3iv_gg_",
-  "__SText": "___SText_qt3iv_gg_",
-  "_color": "__color_qt3iv_gg_",
-  "--color": "--color_rbea4n",
-  "--color-hover": "--color-hover_rbea4n",
-  "_disabled": "__disabled_qt3iv_gg_",
-  "_keyboardFocused": "__keyboardFocused_qt3iv_gg_",
-  "__SAddon": "___SAddon_qt3iv_gg_",
-  "__SLinkAddon": "___SLinkAddon_qt3iv_gg_",
-  "_size_s": "_size_s_qt3iv_gg_",
-  "_size_m": "_size_m_qt3iv_gg_",
-  "_size_l": "_size_l_qt3iv_gg_",
-  "_size_xl": "_size_xl_qt3iv_gg_"
+  "__SLinkTrigger": "___SLinkTrigger_1lk11_gg_",
+  "_active": "__active_1lk11_gg_",
+  "__SText": "___SText_1lk11_gg_",
+  "_color": "__color_1lk11_gg_",
+  "--color": "--color_klk89u",
+  "--color-hover": "--color-hover_klk89u",
+  "_disabled": "__disabled_1lk11_gg_",
+  "_keyboardFocused": "__keyboardFocused_1lk11_gg_",
+  "__SAddon": "___SAddon_1lk11_gg_",
+  "__SLinkAddon": "___SLinkAddon_1lk11_gg_",
+  "_size_m": "_size_m_1lk11_gg_",
+  "_size_l": "_size_l_1lk11_gg_"
 });
 
 var RootLinkTrigger = /*#__PURE__*/function (_Component) {
@@ -77,7 +75,7 @@ var RootLinkTrigger = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _ref = this ? this.asProps : arguments[0],
+      var _ref = this.asProps,
           _ref4;
 
       var SLinkTrigger = Box;
@@ -113,7 +111,7 @@ _defineProperty(RootLinkTrigger, "defaultProps", {
 _defineProperty(RootLinkTrigger, "enhance", [keyboardFocusEnhance()]);
 
 function Text(props) {
-  var _ref2 = this ? this.asProps : arguments[0],
+  var _ref2 = arguments[0],
       _ref5;
 
   var SText = Box;
@@ -131,7 +129,7 @@ function Text(props) {
 }
 
 function Addon(props) {
-  var _ref3 = this ? this.asProps : arguments[0],
+  var _ref3 = arguments[0],
       _ref6;
 
   var SAddon = Box;

package/lib/es6/LinkTrigger.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/LinkTrigger.jsx"],"names":["React","createComponent","Component","Root","sstyled","addonTextChildren","ChevronDown","Spin","Box","resolveColor","shade","keyboardFocusEnhance","RootLinkTrigger","asProps","placeholder","empty","SLinkTrigger","SLinkAddon","LinkTrigger","Addon","Children","loading","styles","providedColor","color","colorHover","Text","style","size","props","SText","children","SAddon"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,eAAP,IAA0BC,SAA1B,EAAqCC,IAArC,EAA2CC,OAA3C,QAA0D,eAA1D;AACA,OAAOC,iBAAP,MAA8B,sCAA9B;AACA,OAAOC,WAAP,MAAwB,6BAAxB;AACA,OAAOC,IAAP,MAAiB,eAAjB;AACA,SAASC,GAAT,QAAoB,mBAApB;AACA,OAAOC,YAAP,IAAuBC,KAAvB,QAAoC,0BAApC;AACA,OAAOC,oBAAP,MAAiC,kDAAjC;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAIMC,e;;;;;;;;;;;;;WAQJ,wBAAe;AACb,0BAA+B,KAAKC,OAApC;AAAA,UAAQC,WAAR,iBAAQA,WAAR;AAAA,UAAqBC,KAArB,iBAAqBA,KAArB;AACA,aAAO;AACLD,QAAAA,WAAW,EAAXA,WADK;AAELC,QAAAA,KAAK,EAALA;AAFK,OAAP;AAID;;;WAED,kBAAS;AAAA;AAAA;;AACP,UAAMC,YAAY,GAQMR,GARxB;AACA,UAAMS,UAAU,GAAGC,WAAW,CAACC,KAA/B;AACA,2BAA4D,KAAKN,OAAjE;AAAA,UAAQO,QAAR,kBAAQA,QAAR;AAAA,UAAkBC,OAAlB,kBAAkBA,OAAlB;AAAA,UAA2BC,MAA3B,kBAA2BA,MAA3B;AAAA,UAA0CC,aAA1C,kBAAmCC,KAAnC;AAEA,UAAMA,KAAK,GAAGf,YAAY,CAACc,aAAD,CAA1B;AACA,UAAME,UAAU,GAAGf,KAAK,CAACc,KAAD,EAAQ,CAAC,IAAT,CAAxB;AAEA,qBAAOpB,OAAO,CAACkB,MAAD,CAAd,eACE,oBAAC,YAAD;AAAA,qBAAsCE,KAAtC;AAAA,2BAA8DC;AAA9D,kBACGpB,iBAAiB,CAACe,QAAD,EAAWF,WAAW,CAACQ,IAAvB,EAA6BR,WAAW,CAACC,KAAzC,CADpB,eAEE,oBAAC,UAAD,8BACGE,OAAO,gBAAG,oBAAC,IAAD;AAAA,gBAAW,IAAX;AAAA,iBAAsB;AAAtB,SAAH,gBAA6C,oBAAC,WAAD,8BADvD,CAFF,CADF;AAQD;;;;EAhC2BnB,S;;gBAAxBU,e,iBACiB,a;;gBADjBA,e,WAEWe,K;;gBAFXf,e,kBAGkB;AACpBgB,EAAAA,IAAI,EAAE;AADc,C;;gBAHlBhB,e,aAMa,CAACD,oBAAoB,EAArB,C;;AA6BnB,SAASe,IAAT,CAAcG,KAAd,EAAqB;AAAA;AAAA;;AACnB,MAAMC,KAAK,GAKMtB,GALjB;AACA,MAAQuB,QAAR,GAAiDF,KAAjD,CAAQE,QAAR;AAAA,MAAkBT,MAAlB,GAAiDO,KAAjD,CAAkBP,MAAlB;AAAA,MAA0BP,KAA1B,GAAiDc,KAAjD,CAA0Bd,KAA1B;AAAA,MAAiCD,WAAjC,GAAiDe,KAAjD,CAAiCf,WAAjC;AAEA,iBAAOV,OAAO,CAACkB,MAAD,CAAd;AAAA;;AACE;AACA,sBAAC,KAAD;AAAA,uBAAqCP;AAArC,eACGA,KAAK,GAAGD,WAAH,GAAiBiB,QADzB,CAFF;AAMD;;AAED,SAASZ,KAAT,CAAeU,KAAf,EAAsB;AAAA;AAAA;;AACpB,MAAMG,MAAM,GACiCxB,GAD7C;AACA,iBAAOJ,OAAO,CAACyB,KAAK,CAACP,MAAP,CAAd,eAA6B,oBAAC,MAAD,kEAA7B;AACD;;AAED,IAAMJ,WAAW,GAAGjB,eAAe,CAACW,eAAD,EAAkB;AACnDc,EAAAA,IAAI,EAAJA,IADmD;AAEnDP,EAAAA,KAAK,EAALA;AAFmD,CAAlB,CAAnC;AAKA,eAAeD,WAAf","sourcesContent":["import React from 'react';\nimport createComponent, { Component, Root, sstyled } from '@semcore/core';\nimport addonTextChildren from '@semcore/utils/lib/addonTextChildren';\nimport ChevronDown from '@semcore/icon/ChevronDown/m';\nimport Spin from '@semcore/spin';\nimport { Box } from '@semcore/flex-box';\nimport resolveColor, { shade } from '@semcore/utils/lib/color';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\n\nimport style from './style/link-trigger.shadow.css';\n\nclass RootLinkTrigger extends Component {\n  static displayName = 'LinkTrigger';\n  static style = style;\n  static defaultProps = {\n    size: 'm',\n  };\n  static enhance = [keyboardFocusEnhance()];\n\n  getTextProps() {\n    const { placeholder, empty } = this.asProps;\n    return {\n      placeholder,\n      empty,\n    };\n  }\n\n  render() {\n    const SLinkTrigger = Root;\n    const SLinkAddon = LinkTrigger.Addon;\n    const { Children, loading, styles, color: providedColor } = this.asProps;\n\n    const color = resolveColor(providedColor);\n    const colorHover = shade(color, -0.12);\n\n    return sstyled(styles)(\n      <SLinkTrigger render={Box} use:color={color} use:color-hover={colorHover}>\n        {addonTextChildren(Children, LinkTrigger.Text, LinkTrigger.Addon)}\n        <SLinkAddon>\n          {loading ? <Spin size=\"xs\" theme=\"currentColor\" /> : <ChevronDown />}\n        </SLinkAddon>\n      </SLinkTrigger>,\n    );\n  }\n}\n\nfunction Text(props) {\n  const SText = Root;\n  const { children, styles, empty, placeholder } = props;\n\n  return sstyled(styles)(\n    /* что бы не ломать обратную совместимость пришлось юзать use */\n    <SText render={Box} use:placeholder={empty}>\n      {empty ? placeholder : children}\n    </SText>,\n  );\n}\n\nfunction Addon(props) {\n  const SAddon = Root;\n  return sstyled(props.styles)(<SAddon render={Box} />);\n}\n\nconst LinkTrigger = createComponent(RootLinkTrigger, {\n  Text,\n  Addon,\n});\n\nexport default LinkTrigger;\n"],"file":"LinkTrigger.js"}
+{"version":3,"sources":["../../src/LinkTrigger.jsx"],"names":["React","createComponent","Component","Root","sstyled","addonTextChildren","ChevronDown","Spin","Box","resolveColor","shade","keyboardFocusEnhance","RootLinkTrigger","asProps","placeholder","empty","SLinkTrigger","SLinkAddon","LinkTrigger","Addon","Children","loading","styles","providedColor","color","colorHover","Text","style","size","props","SText","children","SAddon"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,eAAP,IAA0BC,SAA1B,EAAqCC,IAArC,EAA2CC,OAA3C,QAA0D,eAA1D;AACA,OAAOC,iBAAP,MAA8B,sCAA9B;AACA,OAAOC,WAAP,MAAwB,6BAAxB;AACA,OAAOC,IAAP,MAAiB,eAAjB;AACA,SAASC,GAAT,QAAoB,mBAApB;AACA,OAAOC,YAAP,IAAuBC,KAAvB,QAAoC,0BAApC;AACA,OAAOC,oBAAP,MAAiC,kDAAjC;;;;;;;;;;;;;;;;;;;;;;;;;;IAIMC,e;;;;;;;;;;;;;WAQJ,wBAAe;AACb,0BAA+B,KAAKC,OAApC;AAAA,UAAQC,WAAR,iBAAQA,WAAR;AAAA,UAAqBC,KAArB,iBAAqBA,KAArB;AACA,aAAO;AACLD,QAAAA,WAAW,EAAXA,WADK;AAELC,QAAAA,KAAK,EAALA;AAFK,OAAP;AAID;;;WAED,kBAAS;AAAA;AAAA;;AACP,UAAMC,YAAY,GAQMR,GARxB;AACA,UAAMS,UAAU,GAAGC,WAAW,CAACC,KAA/B;AACA,2BAA4D,KAAKN,OAAjE;AAAA,UAAQO,QAAR,kBAAQA,QAAR;AAAA,UAAkBC,OAAlB,kBAAkBA,OAAlB;AAAA,UAA2BC,MAA3B,kBAA2BA,MAA3B;AAAA,UAA0CC,aAA1C,kBAAmCC,KAAnC;AAEA,UAAMA,KAAK,GAAGf,YAAY,CAACc,aAAD,CAA1B;AACA,UAAME,UAAU,GAAGf,KAAK,CAACc,KAAD,EAAQ,CAAC,IAAT,CAAxB;AAEA,qBAAOpB,OAAO,CAACkB,MAAD,CAAd,eACE,oBAAC,YAAD;AAAA,qBAAsCE,KAAtC;AAAA,2BAA8DC;AAA9D,kBACGpB,iBAAiB,CAACe,QAAD,EAAWF,WAAW,CAACQ,IAAvB,EAA6BR,WAAW,CAACC,KAAzC,CADpB,eAEE,oBAAC,UAAD,8BACGE,OAAO,gBAAG,oBAAC,IAAD;AAAA,gBAAW,IAAX;AAAA,iBAAsB;AAAtB,SAAH,gBAA6C,oBAAC,WAAD,8BADvD,CAFF,CADF;AAQD;;;;EAhC2BnB,S;;gBAAxBU,e,iBACiB,a;;gBADjBA,e,WAEWe,K;;gBAFXf,e,kBAGkB;AACpBgB,EAAAA,IAAI,EAAE;AADc,C;;gBAHlBhB,e,aAMa,CAACD,oBAAoB,EAArB,C;;AA6BnB,SAASe,IAAT,CAAcG,KAAd,EAAqB;AAAA;AAAA;;AACnB,MAAMC,KAAK,GAKMtB,GALjB;AACA,MAAQuB,QAAR,GAAiDF,KAAjD,CAAQE,QAAR;AAAA,MAAkBT,MAAlB,GAAiDO,KAAjD,CAAkBP,MAAlB;AAAA,MAA0BP,KAA1B,GAAiDc,KAAjD,CAA0Bd,KAA1B;AAAA,MAAiCD,WAAjC,GAAiDe,KAAjD,CAAiCf,WAAjC;AAEA,iBAAOV,OAAO,CAACkB,MAAD,CAAd;AAAA;;AACE;AACA,sBAAC,KAAD;AAAA,uBAAqCP;AAArC,eACGA,KAAK,GAAGD,WAAH,GAAiBiB,QADzB,CAFF;AAMD;;AAED,SAASZ,KAAT,CAAeU,KAAf,EAAsB;AAAA;AAAA;;AACpB,MAAMG,MAAM,GACiCxB,GAD7C;AACA,iBAAOJ,OAAO,CAACyB,KAAK,CAACP,MAAP,CAAd,eAA6B,oBAAC,MAAD,kEAA7B;AACD;;AAED,IAAMJ,WAAW,GAAGjB,eAAe,CAACW,eAAD,EAAkB;AACnDc,EAAAA,IAAI,EAAJA,IADmD;AAEnDP,EAAAA,KAAK,EAALA;AAFmD,CAAlB,CAAnC;AAKA,eAAeD,WAAf","sourcesContent":["import React from 'react';\nimport createComponent, { Component, Root, sstyled } from '@semcore/core';\nimport addonTextChildren from '@semcore/utils/lib/addonTextChildren';\nimport ChevronDown from '@semcore/icon/ChevronDown/m';\nimport Spin from '@semcore/spin';\nimport { Box } from '@semcore/flex-box';\nimport resolveColor, { shade } from '@semcore/utils/lib/color';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\n\nimport style from './style/link-trigger.shadow.css';\n\nclass RootLinkTrigger extends Component {\n  static displayName = 'LinkTrigger';\n  static style = style;\n  static defaultProps = {\n    size: 'm',\n  };\n  static enhance = [keyboardFocusEnhance()];\n\n  getTextProps() {\n    const { placeholder, empty } = this.asProps;\n    return {\n      placeholder,\n      empty,\n    };\n  }\n\n  render() {\n    const SLinkTrigger = Root;\n    const SLinkAddon = LinkTrigger.Addon;\n    const { Children, loading, styles, color: providedColor } = this.asProps;\n\n    const color = resolveColor(providedColor);\n    const colorHover = shade(color, -0.12);\n\n    return sstyled(styles)(\n      <SLinkTrigger render={Box} use:color={color} use:color-hover={colorHover}>\n        {addonTextChildren(Children, LinkTrigger.Text, LinkTrigger.Addon)}\n        <SLinkAddon>\n          {loading ? <Spin size=\"xs\" theme=\"currentColor\" /> : <ChevronDown />}\n        </SLinkAddon>\n      </SLinkTrigger>,\n    );\n  }\n}\n\nfunction Text(props) {\n  const SText = Root;\n  const { children, styles, empty, placeholder } = props;\n\n  return sstyled(styles)(\n    /* что бы не ломать обратную совместимость пришлось юзать use */\n    <SText render={Box} use:placeholder={empty}>\n      {empty ? placeholder : children}\n    </SText>,\n  );\n}\n\nfunction Addon(props) {\n  const SAddon = Root;\n  return sstyled(props.styles)(<SAddon render={Box} />);\n}\n\nconst LinkTrigger = createComponent(RootLinkTrigger, {\n  Text,\n  Addon,\n});\n\nexport default LinkTrigger;\n"],"file":"LinkTrigger.js"}

package/lib/es6/index.d.ts

@@ -0,0 +1,81 @@
+import React, { ComponentProps } from 'react';
+import { CProps, ReturnEl } from '@semcore/core';
+import { Box, IBoxProps } from '@semcore/flex-box';
+import Dot from '@semcore/dot';
+import { INeighborItemProps } from '@semcore/neighbor-location';
+import { IKeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
+
+export interface IBaseTriggerProps extends IBoxProps, INeighborItemProps, IKeyboardFocusProps {
+  /**
+   * Trigger size
+   * @default m
+   */
+  size?: 'm' | 'l';
+  /**
+   * Trigger state
+   */
+  state?: 'normal' | 'valid' | 'invalid';
+  /**
+   * Sets active state to trigger
+   */
+  active?: boolean;
+  /**
+   * Responsible for placeholder displaying
+   */
+  empty?: boolean;
+  /**
+   * Placeholder text
+   */
+  placeholder?: React.ReactNode;
+  /**
+   * Sets disabled state to trigger
+   */
+  disabled?: boolean;
+  /** Trigger theme
+   * @deprecated {@link IBaseTriggerProps.state}
+   * */
+  theme?: 'normal' | 'valid' | 'invalid' | false;
+}
+
+export interface IButtonTriggerProps extends Omit<IBaseTriggerProps, 'theme'> {
+  /** Sets the loading state */
+  loading?: boolean;
+}
+
+export interface ILinkTriggerProps extends Omit<IBaseTriggerProps, 'theme'> {
+  /** Sets the loading state */
+  loading?: boolean;
+  /** Text color */
+  color?: string;
+}
+
+export interface IFilterTriggerProps extends IBaseTriggerProps {
+  /** Click on the filter cleaning cross */
+  onClear?: (event: React.SyntheticEvent) => void;
+}
+
+declare const BaseTrigger: (<T>(props: CProps<IBaseTriggerProps & T>) => ReturnEl) & {
+  Text: typeof Box;
+  Addon: typeof Box;
+};
+
+declare const ButtonTrigger: (<T>(props: CProps<IButtonTriggerProps & T>) => ReturnEl) & {
+  Text: typeof BaseTrigger.Text;
+  Addon: typeof BaseTrigger.Addon;
+};
+
+declare const LinkTrigger: (<T>(props: CProps<ILinkTriggerProps & T>) => ReturnEl) & {
+  Text: typeof BaseTrigger.Text;
+  Addon: typeof BaseTrigger.Addon;
+};
+
+declare const FilterTrigger: (<T>(props: CProps<ILinkTriggerProps & T>) => ReturnEl) & {
+  Text: typeof BaseTrigger.Text;
+  Addon: typeof BaseTrigger.Addon;
+  Counter: <T>(
+    props: ComponentProps<typeof BaseTrigger.Addon> & ComponentProps<typeof Dot> & T,
+  ) => ReturnEl;
+};
+
+export default BaseTrigger;
+export { ButtonTrigger, LinkTrigger, FilterTrigger };

package/lib/es6/index.js

@@ -2,7 +2,4 @@ export { default } from './BaseTrigger';
 export { default as ButtonTrigger } from './ButtonTrigger';
 export { default as FilterTrigger } from './FilterTrigger';
 export { default as LinkTrigger } from './LinkTrigger';
-export * from './BaseTrigger';
-export * from './FilterTrigger';
-export * from './LinkTrigger';
 //# sourceMappingURL=index.js.map

package/lib/es6/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.js"],"names":["default","ButtonTrigger","FilterTrigger","LinkTrigger"],"mappings":"AAAA,SAASA,OAAT,QAAwB,eAAxB;AACA,SAASA,OAAO,IAAIC,aAApB,QAAyC,iBAAzC;AACA,SAASD,OAAO,IAAIE,aAApB,QAAyC,iBAAzC;AACA,SAASF,OAAO,IAAIG,WAApB,QAAuC,eAAvC;AACA,cAAc,eAAd;AACA,cAAc,iBAAd;AACA,cAAc,eAAd","sourcesContent":["export { default } from './BaseTrigger';\nexport { default as ButtonTrigger } from './ButtonTrigger';\nexport { default as FilterTrigger } from './FilterTrigger';\nexport { default as LinkTrigger } from './LinkTrigger';\nexport * from './BaseTrigger';\nexport * from './FilterTrigger';\nexport * from './LinkTrigger';\n"],"file":"index.js"}
+{"version":3,"sources":["../../src/index.js"],"names":["default","ButtonTrigger","FilterTrigger","LinkTrigger"],"mappings":"AAAA,SAASA,OAAT,QAAwB,eAAxB;AACA,SAASA,OAAO,IAAIC,aAApB,QAAyC,iBAAzC;AACA,SAASD,OAAO,IAAIE,aAApB,QAAyC,iBAAzC;AACA,SAASF,OAAO,IAAIG,WAApB,QAAuC,eAAvC","sourcesContent":["export { default } from './BaseTrigger';\nexport { default as ButtonTrigger } from './ButtonTrigger';\nexport { default as FilterTrigger } from './FilterTrigger';\nexport { default as LinkTrigger } from './LinkTrigger';\n"],"file":"index.js"}

package/lib/es6/style/base-trigger.shadow.css

@@ -20,12 +20,14 @@ SBaseTrigger {
   outline: 0;
   text-align: center;
   vertical-align: middle;
-  font-family: inherit;
+  font-family: Inter, sans-serif;
   cursor: pointer;
 
-  border: 1px solid var(--stone);
   background: #ffffff;
-  color: var(--gray20);
+
+  font-weight: 400;
+  border: 1px solid var(--gray-200);
+  color: var(--gray-800);
 
   &::-moz-focus-inner {
     border: none;
@@ -40,14 +42,17 @@ SBaseTrigger {
   }
 
   &[keyboardFocused] {
-    border: 1px solid var(--light-blue);
-    box-shadow: var(--keyborad-focus);
+    border: 1px solid var(--blue-400);
+    box-shadow: var(--keyboard-focus);
+  }
+
+  &:hover {
+    background-color: color-mod(var(--gray-400) a(20%));
   }
 
   &:active,
-  &:hover,
   &[active] {
-    background-color: color-mod(var(--stone) a(20%));
+    background-color: color-mod(var(--gray-400) a(30%));
   }
 }
 
@@ -75,7 +80,7 @@ SText {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  line-height: 1.1;
+  line-height: var(--lh-200);
   flex-grow: 1;
   text-align: left;
 }
@@ -92,51 +97,20 @@ SBaseAddon {
   height: 12px;
 }
 
-SBaseTrigger[size='s'] {
-  height: 18px;
-  min-width: 18px;
-  border-radius: 2px;
-  font-size: 10px;
-
-  & SText {
-    margin-left: 4px;
-    margin-right: 4px;
-  }
-
-  & SAddon {
-    &:not(:only-child):first-child {
-      margin-left: 4px;
-    }
-
-    &:not(:only-child):last-child {
-      margin-right: 4px;
-    }
-
-    &:only-child {
-      margin-left: -2px;
-      margin-right: -2px;
-    }
-  }
-}
-
 SBaseTrigger[size='m'] {
-  height: 26px;
   min-width: 26px;
-  border-radius: 3px;
-  font-size: 12px;
-
-  & SText {
-    margin-left: 8px;
-    margin-right: 8px;
-  }
+  height: 28px;
+  border-radius: var(--rounded-m);
+  padding: 0 8px;
+  font-size: var(--fs-200);
 
   & SAddon {
     &:not(:only-child):first-child {
-      margin-left: 8px;
+      margin-right: 8px;
     }
 
     &:not(:only-child):last-child {
-      margin-right: 8px;
+      margin-left: 8px;
     }
 
     &:only-child {
@@ -147,23 +121,19 @@ SBaseTrigger[size='m'] {
 }
 
 SBaseTrigger[size='l'] {
-  height: 32px;
   min-width: 32px;
-  border-radius: 4px;
-  font-size: 14px;
-
-  & SText {
-    margin-left: 8px;
-    margin-right: 8px;
-  }
+  height: 40px;
+  border-radius: var(--rounded-m);
+  padding: 0 12px;
+  font-size: var(--fs-300);
 
   & SAddon {
     &:not(:only-child):first-child {
-      margin-left: 8px;
+      margin-right: 8px;
     }
 
     &:not(:only-child):last-child {
-      margin-right: 8px;
+      margin-left: 8px;
     }
 
     &:only-child {
@@ -173,33 +143,6 @@ SBaseTrigger[size='l'] {
   }
 }
 
-SBaseTrigger[size='xl'] {
-  height: 42px;
-  min-width: 42px;
-  border-radius: 5px;
-  font-size: 16px;
-
-  & SText {
-    margin-left: 12px;
-    margin-right: 12px;
-  }
-
-  & SAddon {
-    &:not(:only-child):first-child {
-      margin-left: 12px;
-    }
-
-    &:not(:only-child):last-child {
-      margin-right: 12px;
-    }
-
-    &:only-child {
-      margin-left: -6px;
-      margin-right: -6px;
-    }
-  }
-}
-
 SBaseTrigger[neighborLocation='right'] {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
@@ -217,22 +160,22 @@ SBaseTrigger[neighborLocation='left'] {
 }
 
 SText[placeholder] {
-  color: var(--gray70);
+  color: var(--gray-300);
 }
 
 SBaseTrigger[state='normal'] {
-  border-color: var(--stone);
+  border-color: var(--gray-200);
 }
 
 SBaseTrigger[state='valid'] {
-  border-color: var(--green);
+  border-color: var(--green-200);
 }
 
 SBaseTrigger[state='invalid'] {
-  border-color: var(--orange);
+  border-color: var(--red-200);
 
   &[keyboardFocused] {
-    border-color: var(--orange);
-    box-shadow: 0 0 0 3px color-mod(var(--orange) a(30%));
+    border-color: var(--orange-400);
+    box-shadow: 0 0 0 3px color-mod(var(--orange-400) a(30%));
   }
 }

package/lib/es6/style/button-trigger.shadow.css

@@ -4,3 +4,7 @@ SButtonAddon {
   width: 12px;
   height: 12px;
 }
+
+SButtonTriggerSpin {
+  fill: var(--gray-500);
+}

package/lib/es6/style/filter-trigger.shadow.css

@@ -1,9 +1,9 @@
 @import '@semcore/utils/style/var.css';
 
 SButtonTrigger {
-  border: 1px solid var(--stone);
+  border: 1px solid var(--gray-200);
   background: #ffffff;
-  color: var(--gray20);
+  color: var(--gray-800);
 
   &::-moz-focus-inner {
     border: none;
@@ -20,61 +20,48 @@ SButtonTrigger {
   &:active,
   &:hover,
   &[active] {
-    background-color: color-mod(var(--stone) a(20%));
+    background-color: color-mod(var(--gray-400) a(20%));
   }
 }
 
-SButtonTrigger[size='s'] {
-  height: 18px;
-  min-width: 18px;
-  border-radius: 2px;
-  font-size: 10px;
-}
-
 SButtonTrigger[size='m'] {
-  height: 26px;
   min-width: 26px;
-  border-radius: 3px;
-  font-size: 12px;
+  height: 28px;
+  border-radius: var(--rounded-m);
+  font-size: var(--fs-200);
 }
 
 SButtonTrigger[size='l'] {
-  height: 32px;
   min-width: 32px;
-  border-radius: 4px;
-  font-size: 14px;
-}
-
-SButtonTrigger[size='xl'] {
-  height: 42px;
-  min-width: 42px;
-  border-radius: 5px;
-  font-size: 16px;
+  height: 40px;
+  border-radius: var(--rounded-m);
+  font-size: var(--fs-300);
 }
 
 SText[placeholder] {
-  color: var(--gray70);
+  color: var(--gray-300);
 }
 
 SButtonTrigger[state='normal'] {
-  border-color: var(--stone);
+  border-color: var(--gray-200);
 }
 
 SButtonTrigger[state='valid'] {
-  border-color: var(--green);
+  border-color: var(--green-200);
 }
 
 SButtonTrigger[state='invalid'] {
-  border-color: var(--orange);
+  border-color: var(--red-200);
 }
 
 SFilterTrigger[selected] {
-  border-color: var(--light-blue);
-  background-color: color-mod(var(--light-blue) a(20%));
+  border-color: var(--blue-400);
+  background-color: color-mod(var(--blue-400) a(20%));
+  color: var(--gray-800);
 
   &[active],
   &:hover {
-    background: color-mod(var(--light-blue) a(30%));
+    background: color-mod(var(--blue-400) a(30%));
   }
 }
 
@@ -87,9 +74,9 @@ SWrapper {
 }
 
 SWrapper[keyboardFocused] {
-  box-shadow: var(--keyborad-focus);
+  box-shadow: var(--keyboard-focus);
 }
 
 SCounter {
-  background-color: var(--light-blue);
+  background-color: var(--blue-400);
 }

package/lib/es6/style/link-trigger.shadow.css

@@ -17,19 +17,16 @@ SLinkTrigger {
   overflow: visible;
   outline: 0;
   vertical-align: middle;
-  font-family: inherit;
+  font-family: Inter, sans-serif;
   cursor: pointer;
-}
-
-SLinkTrigger {
-  color: var(--denim-blue);
+  color: var(--blue-500);
   background: none;
   transition: color 0.15s ease-in-out;
 
   &[active],
   &:hover,
   &:active {
-    color: color-mod(var(--denim-blue) shade(12%));
+    color: var(--blue-600);
 
     & SText {
       border-color: currentColor;
@@ -41,6 +38,7 @@ SLinkTrigger {
     border-bottom-style: solid;
     border-color: transparent;
     transition: border-bottom-color 0.15s ease-in-out;
+    line-height: var(--lh-200);
   }
 }
 
@@ -59,7 +57,7 @@ SLinkTrigger[disabled] {
 }
 
 SLinkTrigger[keyboardFocused] {
-  box-shadow: var(--keyborad-focus);
+  box-shadow: var(--keyboard-focus);
   z-index: 1;
 }
 
@@ -80,24 +78,16 @@ SLinkAddon {
 }
 
 SLinkAddon {
-  width: 12px;
-  height: 12px;
-}
-
-SLinkTrigger[size='s'] {
-  font-size: 10px;
+  width: 16px;
+  height: 16px;
 }
 
 SLinkTrigger[size='m'] {
-  font-size: 12px;
+  font-size: var(--fs-200);
 }
 
 SLinkTrigger[size='l'] {
-  font-size: 14px;
-}
-
-SLinkTrigger[size='xl'] {
-  font-size: 16px;
+  font-size: var(--fs-300);
 }
 
 @media (prefers-reduced-motion) {

package/lib/types/index.d.ts

@@ -10,7 +10,7 @@ export interface IBaseTriggerProps extends IBoxProps, INeighborItemProps, IKeybo
    * Trigger size
    * @default m
    */
-  size?: 'm' | 'l' | 'xl';
+  size?: 'm' | 'l';
   /**
    * Trigger state
    */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/base-trigger",
   "description": "SEMRush BaseTrigger Component",
-  "version": "2.6.3",
+  "version": "3.0.0",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -14,7 +14,7 @@
   },
   "dependencies": {
     "@semcore/utils": "^3.15",
-    "@semcore/dot": "^3",
+    "@semcore/dot": "^4.0.0",
     "@semcore/flex-box": "^4",
     "@semcore/icon": "^2.16",
     "@semcore/neighbor-location": "^2",
@@ -31,5 +31,8 @@
     "type": "git",
     "url": "https://github.com/semrush/intergalactic.git",
     "directory": "semcore/base-trigger"
+  },
+  "devDependencies": {
+    "@semcore/jest-preset-ui": "1.0.0"
   }
 }

package/src/ButtonTrigger.jsx

@@ -13,13 +13,14 @@ class RootButtonTrigger extends Component {
 
   render() {
     const SButtonAddon = ButtonTrigger.Addon;
+    const SButtonTriggerSpin = Spin;
     const { Children, styles, loading } = this.asProps;
 
     return sstyled(styles)(
       <Root render={BaseTrigger}>
         {addonTextChildren(Children, ButtonTrigger.Text, ButtonTrigger.Addon)}
         <SButtonAddon>
-          {loading ? <Spin size="xs" theme="#a6b0b3" /> : <ChevronDown />}
+          {loading ? <SButtonTriggerSpin size="xs" theme={false} /> : <ChevronDown />}
         </SButtonAddon>
       </Root>,
     );

package/src/index.d.ts

@@ -10,7 +10,7 @@ export interface IBaseTriggerProps extends IBoxProps, INeighborItemProps, IKeybo
    * Trigger size
    * @default m
    */
-  size?: 'm' | 'l' | 'xl';
+  size?: 'm' | 'l';
   /**
    * Trigger state
    */

package/src/index.js

@@ -2,6 +2,3 @@ export { default } from './BaseTrigger';
 export { default as ButtonTrigger } from './ButtonTrigger';
 export { default as FilterTrigger } from './FilterTrigger';
 export { default as LinkTrigger } from './LinkTrigger';
-export * from './BaseTrigger';
-export * from './FilterTrigger';
-export * from './LinkTrigger';