@semcore/button - npm Package Compare versions

Comparing version 2.1.13 to 2.2.0

CHANGELOG.md

@@ -5,5 +5,11 @@ # Changelog
 
+## [2.2.0] - 2019-09-30
+
+### Added
+
+- Добавлен `ref` на дом ноду
+
 ## [2.1.13] - 2019-09-30
 
-### Change
+### Changed
 
@@ -20,3 +26,3 @@ - Нужные зависимости перенесены в `utils`, размер должен стать меньше
 
-### Change
+### Changed
 
@@ -23,0 +29,0 @@ - Обновлены `utils`

lib/Button.d.ts

@@ -9,5 +9,6 @@ import React, { PureComponent } from 'react';
 export interface IButtonProps extends IBoxProps {
-    /** Тип использования кнопки
+    /**
+     *  Тип использования кнопки
      * @default secondary
-     * */
+     */
     use?: 'primary' | 'secondary' | 'tertiary' | false;
@@ -18,5 +19,6 @@ /** Тема кнопки */
     active?: boolean;
-    /** Размер кнопки
+    /**
+     *  Размер кнопки
      * @default m
-     * */
+     */
     size?: 'xl' | 'l' | 'm' | 's' | false;
@@ -34,3 +36,3 @@ /** Отключенная кнопки */
 }
-declare class ButtonAddon extends PureComponent<IButtonAddonProps & React.HTMLAttributes<HTMLSpanElement | any>> {
+declare class ButtonAddon extends PureComponent<IBoxProps & React.HTMLAttributes<any>> {
     static displayName: string;
@@ -47,3 +49,3 @@ static defaultProps: Partial<IButtonAddonProps>;
 }
-declare class Button extends PureComponent<IButtonProps & React.HTMLAttributes<HTMLButtonElement | any> & React.LinkHTMLAttributes<any>> {
+declare class Button extends PureComponent<IButtonProps & React.HTMLAttributes<any> & React.LinkHTMLAttributes<any>> {
     static displayName: string;
@@ -50,0 +52,0 @@ static defaultProps: {

lib/index.es.js

@@ -13,2 +13,3 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import { WithNeighborLocation } from '@semcore/neighbor-location';
+import WithRef from '@semcore/utils/lib/enhances/WithRef';
 import compose from '@semcore/utils/lib/compose';
@@ -53,56 +54,2 @@ import addonText from '@semcore/utils/lib/addonText';
 
-var data = {
-  "block": {
-    "block": "_button_1upc8_3",
-    "size": {
-      "s": "_button--size_s_1upc8_73",
-      "m": "_button--size_m_1upc8_100",
-      "l": "_button--size_l_1upc8_127",
-      "xl": "_button--size_xl_1upc8_154"
-    },
-    "theme": {
-      "primary-info": "_button--theme_primary-info_1upc8_181",
-      "primary-success": "_button--theme_primary-success_1upc8_193",
-      "primary-warning": "_button--theme_primary-warning_1upc8_205",
-      "primary-danger": "_button--theme_primary-danger_1upc8_217",
-      "primary-invert": "_button--theme_primary-invert_1upc8_229",
-      "secondary-muted": "_button--theme_secondary-muted_1upc8_241",
-      "secondary-info": "_button--theme_secondary-info_1upc8_254",
-      "secondary-invert": "_button--theme_secondary-invert_1upc8_267",
-      "tertiary-info": "_button--theme_tertiary-info_1upc8_280",
-      "tertiary-muted": "_button--theme_tertiary-muted_1upc8_292",
-      "tertiary-invert": "_button--theme_tertiary-invert_1upc8_303"
-    },
-    "active": {
-      "block": "_button--active_1upc8_188"
-    },
-    "disabled": {
-      "block": "_button--disabled_1upc8_315"
-    },
-    "keyboard-focused": {
-      "block": "_button--keyboard-focused_1upc8_321"
-    },
-    "neighbor-location": {
-      "right": "_button--neighbor-location_right_1upc8_325",
-      "both": "_button--neighbor-location_both_1upc8_330",
-      "left": "_button--neighbor-location_left_1upc8_335"
-    }
-  },
-  "spin": {
-    "block": "_button__spin_1upc8_41"
-  },
-  "inner": {
-    "block": "_button__inner_1upc8_50",
-    "loading": {
-      "block": "_button__inner--loading_1upc8_58"
-    }
-  },
-  "additional": {
-    "block": "_button__additional_1upc8_62"
-  },
-  "text": {
-    "block": "_button__text_1upc8_68"
-  }
-};
-
 (function cssModulesFnInject(_path) {
@@ -112,9 +59,10 @@ if (_path && typeof window !== 'undefined') {
     var prevStyle = head.querySelector('._css-style');
+    var css = "._button_9g4s6_3{position:relative;display:inline-block;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;padding:0;margin:0;white-space:nowrap;font-family:inherit;font-weight:400;line-height:normal;text-decoration:none;text-align:center;vertical-align:middle;border:1px solid transparent;color:#666;outline:0;box-shadow:none;cursor:pointer;box-sizing:border-box;overflow:visible;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}._button_9g4s6_3::-moz-focus-inner{padding:0;border:none}._button_9g4s6_3:active,._button_9g4s6_3:focus,._button_9g4s6_3:hover{outline:0;text-decoration:none}._button__spin_9g4s6_41{position:absolute;top:0;left:0;width:100%;height:100%;display:-webkit-box;display:flex}._button__inner_9g4s6_50{display:-webkit-inline-box;display:inline-flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;height:100%;width:100%}._button__inner--loading_9g4s6_58{visibility:hidden}._button__additional_9g4s6_62{display:-webkit-inline-box;display:inline-flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center}._button__text_9g4s6_68{display:-webkit-inline-box;display:inline-flex;line-height:1}._button--size_s_9g4s6_73{height:18px;min-width:18px;border-radius:2px;font-size:10px}._button--size_s_9g4s6_73 ._button__text_9g4s6_68{margin-left:4px;margin-right:4px}._button--size_s_9g4s6_73 ._button__additional_9g4s6_62:not(:only-child):first-child{margin-left:4px}._button--size_s_9g4s6_73 ._button__additional_9g4s6_62:not(:only-child):last-child{margin-right:4px}._button--size_s_9g4s6_73 ._button__additional_9g4s6_62:only-child{margin-left:-2px;margin-right:-2px}._button--size_m_9g4s6_100{height:26px;min-width:26px;border-radius:3px;font-size:12px}._button--size_m_9g4s6_100 ._button__text_9g4s6_68{margin-left:8px;margin-right:8px}._button--size_m_9g4s6_100 ._button__additional_9g4s6_62:not(:only-child):first-child{margin-left:8px}._button--size_m_9g4s6_100 ._button__additional_9g4s6_62:not(:only-child):last-child{margin-right:8px}._button--size_m_9g4s6_100 ._button__additional_9g4s6_62:only-child{margin-left:-4px;margin-right:-4px}._button--size_l_9g4s6_127{height:32px;min-width:32px;border-radius:4px;font-size:14px}._button--size_l_9g4s6_127 ._button__text_9g4s6_68{margin-left:8px;margin-right:8px}._button--size_l_9g4s6_127 ._button__additional_9g4s6_62:not(:only-child):first-child{margin-left:8px}._button--size_l_9g4s6_127 ._button__additional_9g4s6_62:not(:only-child):last-child{margin-right:8px}._button--size_l_9g4s6_127 ._button__additional_9g4s6_62:only-child{margin-left:-4px;margin-right:-4px}._button--size_xl_9g4s6_154{height:42px;min-width:42px;border-radius:5px;font-size:16px}._button--size_xl_9g4s6_154 ._button__text_9g4s6_68{margin-left:12px;margin-right:12px}._button--size_xl_9g4s6_154 ._button__additional_9g4s6_62:not(:only-child):first-child{margin-left:12px}._button--size_xl_9g4s6_154 ._button__additional_9g4s6_62:not(:only-child):last-child{margin-right:12px}._button--size_xl_9g4s6_154 ._button__additional_9g4s6_62:only-child{margin-left:-6px;margin-right:-6px}._button--theme_primary-info_9g4s6_181{background-color:#2b94e1;color:#fff}._button--theme_primary-info_9g4s6_181:hover{background-color:#0071bc}._button--theme_primary-info_9g4s6_181._button--active_9g4s6_188,._button--theme_primary-info_9g4s6_181:active{background-color:#006bb3}._button--theme_primary-success_9g4s6_193{background-color:#4fae33;color:#fff}._button--theme_primary-success_9g4s6_193:hover{background-color:#1d9c00}._button--theme_primary-success_9g4s6_193._button--active_9g4s6_188,._button--theme_primary-success_9g4s6_193:active{background-color:#1c9400}._button--theme_primary-warning_9g4s6_205{background-color:#ff7f00;color:#fff}._button--theme_primary-warning_9g4s6_205:hover{background-color:#c60}._button--theme_primary-warning_9g4s6_205._button--active_9g4s6_188,._button--theme_primary-warning_9g4s6_205:active{background-color:#c26100}._button--theme_primary-danger_9g4s6_217{background-color:#ed2d2d;color:#fff}._button--theme_primary-danger_9g4s6_217:hover{background-color:#d00000}._button--theme_primary-danger_9g4s6_217._button--active_9g4s6_188,._button--theme_primary-danger_9g4s6_217:active{background-color:#c60000}._button--theme_primary-invert_9g4s6_229{background-color:#fff;color:#333}._button--theme_primary-invert_9g4s6_229:hover{background-color:#eee}._button--theme_primary-invert_9g4s6_229._button--active_9g4s6_188,._button--theme_primary-invert_9g4s6_229:active{background-color:#e4e1e1}._button--theme_secondary-muted_9g4s6_241{background-color:rgba(166,175,179,.1);color:#666;border-color:#a6b0b3}._button--theme_secondary-muted_9g4s6_241:hover{background-color:rgba(166,175,179,.2)}._button--theme_secondary-muted_9g4s6_241._button--active_9g4s6_188,._button--theme_secondary-muted_9g4s6_241:active{background-color:rgba(166,175,179,.3)}._button--theme_secondary-info_9g4s6_254{background-color:rgba(42,148,224,.05);color:#2b94e1;border-color:#2b94e1}._button--theme_secondary-info_9g4s6_254:hover{background-color:rgba(0,113,188,.2)}._button--theme_secondary-info_9g4s6_254._button--active_9g4s6_188,._button--theme_secondary-info_9g4s6_254:active{background-color:rgba(0,113,188,.3)}._button--theme_secondary-invert_9g4s6_267{background-color:hsla(0,0%,100%,.05);color:#fff;border-color:#fff}._button--theme_secondary-invert_9g4s6_267:hover{background-color:hsla(0,0%,100%,.2)}._button--theme_secondary-invert_9g4s6_267._button--active_9g4s6_188,._button--theme_secondary-invert_9g4s6_267:active{background-color:hsla(0,0%,100%,.3)}._button--theme_tertiary-info_9g4s6_280{color:#0071bc;background-color:transparent}._button--theme_tertiary-info_9g4s6_280:hover{background-color:rgba(42,148,224,.2)}._button--theme_tertiary-info_9g4s6_280._button--active_9g4s6_188,._button--theme_tertiary-info_9g4s6_280:active{background-color:rgba(42,148,224,.3)}._button--theme_tertiary-muted_9g4s6_292{color:#666;background-color:transparent}._button--theme_tertiary-muted_9g4s6_292:hover{background-color:rgba(166,175,179,.2)}._button--theme_tertiary-muted_9g4s6_292._button--active_9g4s6_188,._button--theme_tertiary-muted_9g4s6_292:active{background-color:rgba(166,175,179,.3)}._button--theme_tertiary-invert_9g4s6_303{color:#fff;background-color:transparent}._button--theme_tertiary-invert_9g4s6_303:hover{background-color:hsla(0,0%,100%,.2)}._button--theme_tertiary-invert_9g4s6_303._button--active_9g4s6_188,._button--theme_tertiary-invert_9g4s6_303:active{background-color:hsla(0,0%,100%,.3)}._button--disabled_9g4s6_315{opacity:.3;cursor:default;pointer-events:none}._button--keyboard-focused_9g4s6_321{box-shadow:0 0 0 3px rgba(42,148,224,.3)}._button--neighbor-location_right_9g4s6_325._button--neighbor-location_right_9g4s6_325{border-top-right-radius:0;border-bottom-right-radius:0}._button--neighbor-location_both_9g4s6_330._button--neighbor-location_both_9g4s6_330{border-radius:0;margin-left:-1px}._button--neighbor-location_left_9g4s6_335._button--neighbor-location_left_9g4s6_335{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}._button--neighbor-location_both_9g4s6_330[class*=button--theme_primary-]{border-left-color:hsla(0,0%,100%,.5)}._button--neighbor-location_both_9g4s6_330._button--theme_primary-invert_9g4s6_229{border-left-color:rgba(0,0,0,.5)}._button--neighbor-location_left_9g4s6_335[class*=button--theme_primary-]{border-left-color:hsla(0,0%,100%,.5)}._button--neighbor-location_left_9g4s6_335._button--theme_primary-invert_9g4s6_229{border-left-color:rgba(0,0,0,.5)}";
 
     if (prevStyle && prevStyle.insertAdjacentText) {
-      prevStyle.insertAdjacentText("beforeend", "._button_1upc8_3{position:relative;display:inline-block;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;padding:0;margin:0;white-space:nowrap;font-family:inherit;font-weight:400;line-height:normal;text-decoration:none;text-align:center;vertical-align:middle;border:1px solid transparent;color:#666;outline:0;box-shadow:none;cursor:pointer;box-sizing:border-box;overflow:visible;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}._button_1upc8_3::-moz-focus-inner{padding:0;border:none}._button_1upc8_3:active,._button_1upc8_3:focus,._button_1upc8_3:hover{outline:0;text-decoration:none}._button__spin_1upc8_41{position:absolute;top:0;left:0;width:100%;height:100%;display:-webkit-box;display:flex}._button__inner_1upc8_50{display:-webkit-inline-box;display:inline-flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;height:100%;width:100%}._button__inner--loading_1upc8_58{visibility:hidden}._button__additional_1upc8_62{display:-webkit-inline-box;display:inline-flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center}._button__text_1upc8_68{display:-webkit-inline-box;display:inline-flex;line-height:1}._button--size_s_1upc8_73{height:18px;min-width:18px;border-radius:2px;font-size:10px}._button--size_s_1upc8_73 ._button__text_1upc8_68{margin-left:4px;margin-right:4px}._button--size_s_1upc8_73 ._button__additional_1upc8_62:not(:only-child):first-child{margin-left:4px}._button--size_s_1upc8_73 ._button__additional_1upc8_62:not(:only-child):last-child{margin-right:4px}._button--size_s_1upc8_73 ._button__additional_1upc8_62:only-child{margin-left:-2px;margin-right:-2px}._button--size_m_1upc8_100{height:26px;min-width:26px;border-radius:3px;font-size:12px}._button--size_m_1upc8_100 ._button__text_1upc8_68{margin-left:8px;margin-right:8px}._button--size_m_1upc8_100 ._button__additional_1upc8_62:not(:only-child):first-child{margin-left:8px}._button--size_m_1upc8_100 ._button__additional_1upc8_62:not(:only-child):last-child{margin-right:8px}._button--size_m_1upc8_100 ._button__additional_1upc8_62:only-child{margin-left:-4px;margin-right:-4px}._button--size_l_1upc8_127{height:32px;min-width:32px;border-radius:4px;font-size:14px}._button--size_l_1upc8_127 ._button__text_1upc8_68{margin-left:8px;margin-right:8px}._button--size_l_1upc8_127 ._button__additional_1upc8_62:not(:only-child):first-child{margin-left:8px}._button--size_l_1upc8_127 ._button__additional_1upc8_62:not(:only-child):last-child{margin-right:8px}._button--size_l_1upc8_127 ._button__additional_1upc8_62:only-child{margin-left:-4px;margin-right:-4px}._button--size_xl_1upc8_154{height:42px;min-width:42px;border-radius:5px;font-size:16px}._button--size_xl_1upc8_154 ._button__text_1upc8_68{margin-left:12px;margin-right:12px}._button--size_xl_1upc8_154 ._button__additional_1upc8_62:not(:only-child):first-child{margin-left:12px}._button--size_xl_1upc8_154 ._button__additional_1upc8_62:not(:only-child):last-child{margin-right:12px}._button--size_xl_1upc8_154 ._button__additional_1upc8_62:only-child{margin-left:-6px;margin-right:-6px}._button--theme_primary-info_1upc8_181{background-color:#2b94e1;color:#fff}._button--theme_primary-info_1upc8_181:hover{background-color:#0071bc}._button--theme_primary-info_1upc8_181._button--active_1upc8_188,._button--theme_primary-info_1upc8_181:active{background-color:#006bb3}._button--theme_primary-success_1upc8_193{background-color:#4fae33;color:#fff}._button--theme_primary-success_1upc8_193:hover{background-color:#1d9c00}._button--theme_primary-success_1upc8_193._button--active_1upc8_188,._button--theme_primary-success_1upc8_193:active{background-color:#1c9400}._button--theme_primary-warning_1upc8_205{background-color:#ff7f00;color:#fff}._button--theme_primary-warning_1upc8_205:hover{background-color:#c60}._button--theme_primary-warning_1upc8_205._button--active_1upc8_188,._button--theme_primary-warning_1upc8_205:active{background-color:#c26100}._button--theme_primary-danger_1upc8_217{background-color:#ed2d2d;color:#fff}._button--theme_primary-danger_1upc8_217:hover{background-color:#d00000}._button--theme_primary-danger_1upc8_217._button--active_1upc8_188,._button--theme_primary-danger_1upc8_217:active{background-color:#c60000}._button--theme_primary-invert_1upc8_229{background-color:#fff;color:#333}._button--theme_primary-invert_1upc8_229:hover{background-color:#eee}._button--theme_primary-invert_1upc8_229._button--active_1upc8_188,._button--theme_primary-invert_1upc8_229:active{background-color:#e4e1e1}._button--theme_secondary-muted_1upc8_241{background-color:rgba(166,175,179,.1);color:#666;border-color:#a6b0b3}._button--theme_secondary-muted_1upc8_241:hover{background-color:rgba(166,175,179,.2)}._button--theme_secondary-muted_1upc8_241._button--active_1upc8_188,._button--theme_secondary-muted_1upc8_241:active{background-color:rgba(166,175,179,.3)}._button--theme_secondary-info_1upc8_254{background-color:rgba(42,148,224,.05);color:#2b94e1;border-color:#2b94e1}._button--theme_secondary-info_1upc8_254:hover{background-color:rgba(0,113,188,.2)}._button--theme_secondary-info_1upc8_254._button--active_1upc8_188,._button--theme_secondary-info_1upc8_254:active{background-color:rgba(0,113,188,.3)}._button--theme_secondary-invert_1upc8_267{background-color:hsla(0,0%,100%,.05);color:#fff;border-color:#fff}._button--theme_secondary-invert_1upc8_267:hover{background-color:hsla(0,0%,100%,.2)}._button--theme_secondary-invert_1upc8_267._button--active_1upc8_188,._button--theme_secondary-invert_1upc8_267:active{background-color:hsla(0,0%,100%,.3)}._button--theme_tertiary-info_1upc8_280{color:#0071bc;background-color:transparent}._button--theme_tertiary-info_1upc8_280:hover{background-color:rgba(42,148,224,.2)}._button--theme_tertiary-info_1upc8_280._button--active_1upc8_188,._button--theme_tertiary-info_1upc8_280:active{background-color:rgba(42,148,224,.3)}._button--theme_tertiary-muted_1upc8_292{color:#666;background-color:transparent}._button--theme_tertiary-muted_1upc8_292:hover{background-color:rgba(166,175,179,.2)}._button--theme_tertiary-muted_1upc8_292._button--active_1upc8_188,._button--theme_tertiary-muted_1upc8_292:active{background-color:rgba(166,175,179,.3)}._button--theme_tertiary-invert_1upc8_303{color:#fff;background-color:transparent}._button--theme_tertiary-invert_1upc8_303:hover{background-color:hsla(0,0%,100%,.2)}._button--theme_tertiary-invert_1upc8_303._button--active_1upc8_188,._button--theme_tertiary-invert_1upc8_303:active{background-color:hsla(0,0%,100%,.3)}._button--disabled_1upc8_315{opacity:.3;cursor:default;pointer-events:none}._button--keyboard-focused_1upc8_321{box-shadow:0 0 0 3px rgba(42,148,224,.3)}._button--neighbor-location_right_1upc8_325._button--neighbor-location_right_1upc8_325{border-top-right-radius:0;border-bottom-right-radius:0}._button--neighbor-location_both_1upc8_330._button--neighbor-location_both_1upc8_330{border-radius:0;margin-left:-1px}._button--neighbor-location_left_1upc8_335._button--neighbor-location_left_1upc8_335{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}._button--neighbor-location_both_1upc8_330[class*=button--theme_primary-]{border-left-color:hsla(0,0%,100%,.5)}._button--neighbor-location_both_1upc8_330._button--theme_primary-invert_1upc8_229{border-left-color:rgba(0,0,0,.5)}._button--neighbor-location_left_1upc8_335[class*=button--theme_primary-]{border-left-color:hsla(0,0%,100%,.5)}._button--neighbor-location_left_1upc8_335._button--theme_primary-invert_1upc8_229{border-left-color:rgba(0,0,0,.5)}");
+      prevStyle.insertAdjacentText("beforeend", css);
     } else {
       var style = window.document.createElement("style");
       style.classList.add('_css-style');
-      style.innerHTML = "._button_1upc8_3{position:relative;display:inline-block;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;padding:0;margin:0;white-space:nowrap;font-family:inherit;font-weight:400;line-height:normal;text-decoration:none;text-align:center;vertical-align:middle;border:1px solid transparent;color:#666;outline:0;box-shadow:none;cursor:pointer;box-sizing:border-box;overflow:visible;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}._button_1upc8_3::-moz-focus-inner{padding:0;border:none}._button_1upc8_3:active,._button_1upc8_3:focus,._button_1upc8_3:hover{outline:0;text-decoration:none}._button__spin_1upc8_41{position:absolute;top:0;left:0;width:100%;height:100%;display:-webkit-box;display:flex}._button__inner_1upc8_50{display:-webkit-inline-box;display:inline-flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;height:100%;width:100%}._button__inner--loading_1upc8_58{visibility:hidden}._button__additional_1upc8_62{display:-webkit-inline-box;display:inline-flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center}._button__text_1upc8_68{display:-webkit-inline-box;display:inline-flex;line-height:1}._button--size_s_1upc8_73{height:18px;min-width:18px;border-radius:2px;font-size:10px}._button--size_s_1upc8_73 ._button__text_1upc8_68{margin-left:4px;margin-right:4px}._button--size_s_1upc8_73 ._button__additional_1upc8_62:not(:only-child):first-child{margin-left:4px}._button--size_s_1upc8_73 ._button__additional_1upc8_62:not(:only-child):last-child{margin-right:4px}._button--size_s_1upc8_73 ._button__additional_1upc8_62:only-child{margin-left:-2px;margin-right:-2px}._button--size_m_1upc8_100{height:26px;min-width:26px;border-radius:3px;font-size:12px}._button--size_m_1upc8_100 ._button__text_1upc8_68{margin-left:8px;margin-right:8px}._button--size_m_1upc8_100 ._button__additional_1upc8_62:not(:only-child):first-child{margin-left:8px}._button--size_m_1upc8_100 ._button__additional_1upc8_62:not(:only-child):last-child{margin-right:8px}._button--size_m_1upc8_100 ._button__additional_1upc8_62:only-child{margin-left:-4px;margin-right:-4px}._button--size_l_1upc8_127{height:32px;min-width:32px;border-radius:4px;font-size:14px}._button--size_l_1upc8_127 ._button__text_1upc8_68{margin-left:8px;margin-right:8px}._button--size_l_1upc8_127 ._button__additional_1upc8_62:not(:only-child):first-child{margin-left:8px}._button--size_l_1upc8_127 ._button__additional_1upc8_62:not(:only-child):last-child{margin-right:8px}._button--size_l_1upc8_127 ._button__additional_1upc8_62:only-child{margin-left:-4px;margin-right:-4px}._button--size_xl_1upc8_154{height:42px;min-width:42px;border-radius:5px;font-size:16px}._button--size_xl_1upc8_154 ._button__text_1upc8_68{margin-left:12px;margin-right:12px}._button--size_xl_1upc8_154 ._button__additional_1upc8_62:not(:only-child):first-child{margin-left:12px}._button--size_xl_1upc8_154 ._button__additional_1upc8_62:not(:only-child):last-child{margin-right:12px}._button--size_xl_1upc8_154 ._button__additional_1upc8_62:only-child{margin-left:-6px;margin-right:-6px}._button--theme_primary-info_1upc8_181{background-color:#2b94e1;color:#fff}._button--theme_primary-info_1upc8_181:hover{background-color:#0071bc}._button--theme_primary-info_1upc8_181._button--active_1upc8_188,._button--theme_primary-info_1upc8_181:active{background-color:#006bb3}._button--theme_primary-success_1upc8_193{background-color:#4fae33;color:#fff}._button--theme_primary-success_1upc8_193:hover{background-color:#1d9c00}._button--theme_primary-success_1upc8_193._button--active_1upc8_188,._button--theme_primary-success_1upc8_193:active{background-color:#1c9400}._button--theme_primary-warning_1upc8_205{background-color:#ff7f00;color:#fff}._button--theme_primary-warning_1upc8_205:hover{background-color:#c60}._button--theme_primary-warning_1upc8_205._button--active_1upc8_188,._button--theme_primary-warning_1upc8_205:active{background-color:#c26100}._button--theme_primary-danger_1upc8_217{background-color:#ed2d2d;color:#fff}._button--theme_primary-danger_1upc8_217:hover{background-color:#d00000}._button--theme_primary-danger_1upc8_217._button--active_1upc8_188,._button--theme_primary-danger_1upc8_217:active{background-color:#c60000}._button--theme_primary-invert_1upc8_229{background-color:#fff;color:#333}._button--theme_primary-invert_1upc8_229:hover{background-color:#eee}._button--theme_primary-invert_1upc8_229._button--active_1upc8_188,._button--theme_primary-invert_1upc8_229:active{background-color:#e4e1e1}._button--theme_secondary-muted_1upc8_241{background-color:rgba(166,175,179,.1);color:#666;border-color:#a6b0b3}._button--theme_secondary-muted_1upc8_241:hover{background-color:rgba(166,175,179,.2)}._button--theme_secondary-muted_1upc8_241._button--active_1upc8_188,._button--theme_secondary-muted_1upc8_241:active{background-color:rgba(166,175,179,.3)}._button--theme_secondary-info_1upc8_254{background-color:rgba(42,148,224,.05);color:#2b94e1;border-color:#2b94e1}._button--theme_secondary-info_1upc8_254:hover{background-color:rgba(0,113,188,.2)}._button--theme_secondary-info_1upc8_254._button--active_1upc8_188,._button--theme_secondary-info_1upc8_254:active{background-color:rgba(0,113,188,.3)}._button--theme_secondary-invert_1upc8_267{background-color:hsla(0,0%,100%,.05);color:#fff;border-color:#fff}._button--theme_secondary-invert_1upc8_267:hover{background-color:hsla(0,0%,100%,.2)}._button--theme_secondary-invert_1upc8_267._button--active_1upc8_188,._button--theme_secondary-invert_1upc8_267:active{background-color:hsla(0,0%,100%,.3)}._button--theme_tertiary-info_1upc8_280{color:#0071bc;background-color:transparent}._button--theme_tertiary-info_1upc8_280:hover{background-color:rgba(42,148,224,.2)}._button--theme_tertiary-info_1upc8_280._button--active_1upc8_188,._button--theme_tertiary-info_1upc8_280:active{background-color:rgba(42,148,224,.3)}._button--theme_tertiary-muted_1upc8_292{color:#666;background-color:transparent}._button--theme_tertiary-muted_1upc8_292:hover{background-color:rgba(166,175,179,.2)}._button--theme_tertiary-muted_1upc8_292._button--active_1upc8_188,._button--theme_tertiary-muted_1upc8_292:active{background-color:rgba(166,175,179,.3)}._button--theme_tertiary-invert_1upc8_303{color:#fff;background-color:transparent}._button--theme_tertiary-invert_1upc8_303:hover{background-color:hsla(0,0%,100%,.2)}._button--theme_tertiary-invert_1upc8_303._button--active_1upc8_188,._button--theme_tertiary-invert_1upc8_303:active{background-color:hsla(0,0%,100%,.3)}._button--disabled_1upc8_315{opacity:.3;cursor:default;pointer-events:none}._button--keyboard-focused_1upc8_321{box-shadow:0 0 0 3px rgba(42,148,224,.3)}._button--neighbor-location_right_1upc8_325._button--neighbor-location_right_1upc8_325{border-top-right-radius:0;border-bottom-right-radius:0}._button--neighbor-location_both_1upc8_330._button--neighbor-location_both_1upc8_330{border-radius:0;margin-left:-1px}._button--neighbor-location_left_1upc8_335._button--neighbor-location_left_1upc8_335{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}._button--neighbor-location_both_1upc8_330[class*=button--theme_primary-]{border-left-color:hsla(0,0%,100%,.5)}._button--neighbor-location_both_1upc8_330._button--theme_primary-invert_1upc8_229{border-left-color:rgba(0,0,0,.5)}._button--neighbor-location_left_1upc8_335[class*=button--theme_primary-]{border-left-color:hsla(0,0%,100%,.5)}._button--neighbor-location_left_1upc8_335._button--theme_primary-invert_1upc8_229{border-left-color:rgba(0,0,0,.5)}";
+      style.innerHTML = css;
       head.appendChild(style);
@@ -126,57 +74,71 @@ }
 function block() {
-  return data['block']['block'];
+  return '_button_9g4s6_3';
 }
 
-block['size'] = function () {
-  var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'block';
-  return data['block']['size'][value];
+block['size'] = function (value) {
+  return {
+    "s": "_button--size_s_9g4s6_73",
+    "m": "_button--size_m_9g4s6_100",
+    "l": "_button--size_l_9g4s6_127",
+    "xl": "_button--size_xl_9g4s6_154"
+  }[value];
 };
 
-block['theme'] = function () {
-  var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'block';
-  return data['block']['theme'][value];
+block['theme'] = function (value) {
+  return {
+    "primary-info": "_button--theme_primary-info_9g4s6_181",
+    "primary-success": "_button--theme_primary-success_9g4s6_193",
+    "primary-warning": "_button--theme_primary-warning_9g4s6_205",
+    "primary-danger": "_button--theme_primary-danger_9g4s6_217",
+    "primary-invert": "_button--theme_primary-invert_9g4s6_229",
+    "secondary-muted": "_button--theme_secondary-muted_9g4s6_241",
+    "secondary-info": "_button--theme_secondary-info_9g4s6_254",
+    "secondary-invert": "_button--theme_secondary-invert_9g4s6_267",
+    "tertiary-info": "_button--theme_tertiary-info_9g4s6_280",
+    "tertiary-muted": "_button--theme_tertiary-muted_9g4s6_292",
+    "tertiary-invert": "_button--theme_tertiary-invert_9g4s6_303"
+  }[value];
 };
 
-block['active'] = function () {
-  var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'block';
-  return data['block']['active'][value];
+block['active'] = function (value) {
+  return "_button--active_9g4s6_188";
 };
 
-block['disabled'] = function () {
-  var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'block';
-  return data['block']['disabled'][value];
+block['disabled'] = function (value) {
+  return "_button--disabled_9g4s6_315";
 };
 
-block['keyboardFocused'] = function () {
-  var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'block';
-  return data['block']['keyboard-focused'][value];
+block['keyboardFocused'] = function (value) {
+  return "_button--keyboard-focused_9g4s6_321";
 };
 
-block['neighborLocation'] = function () {
-  var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'block';
-  return data['block']['neighbor-location'][value];
+block['neighborLocation'] = function (value) {
+  return {
+    "right": "_button--neighbor-location_right_9g4s6_325",
+    "both": "_button--neighbor-location_both_9g4s6_330",
+    "left": "_button--neighbor-location_left_9g4s6_335"
+  }[value];
 };
 
 function spin() {
-  return data['spin']['block'];
+  return '_button__spin_9g4s6_41';
 }
 
 function inner() {
-  return data['inner']['block'];
+  return '_button__inner_9g4s6_50';
 }
 
-inner['loading'] = function () {
-  var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'block';
-  return data['inner']['loading'][value];
+inner['loading'] = function (value) {
+  return "_button__inner--loading_9g4s6_58";
 };
 
 function additional() {
-  return data['additional']['block'];
+  return '_button__additional_9g4s6_62';
 }
 
 function text() {
-  return data['text']['block'];
+  return '_button__text_9g4s6_68';
 }
 
-var enhance = compose(WithKeyboardFocus(), WithNeighborLocation());
+var enhance = compose(WithRef(), WithKeyboardFocus(), WithNeighborLocation());
 var MAP_USE_DEFAULT_THEME = {
@@ -204,7 +166,9 @@ primary: 'info',
           className = _this$props.className,
-          other = _objectWithoutProperties(_this$props, ["className"]);
+          forwardedRef = _this$props.forwardedRef,
+          other = _objectWithoutProperties(_this$props, ["className", "forwardedRef"]);
 
       var classes = cn(additional(), className);
       return React.createElement(Box, Object.assign({
-        className: classes
+        className: classes,
+        ref: forwardedRef
       }, other));
@@ -238,7 +202,9 @@ }
           className = _this$props2.className,
-          other = _objectWithoutProperties(_this$props2, ["className"]);
+          forwardedRef = _this$props2.forwardedRef,
+          other = _objectWithoutProperties(_this$props2, ["className", "forwardedRef"]);
 
       var classes = cn(text(), className);
       return React.createElement(Box, Object.assign({
-        className: classes
+        className: classes,
+        ref: forwardedRef
       }, other));
@@ -284,3 +250,4 @@ }
           neighborLocation = _this$props3.neighborLocation,
-          other = _objectWithoutProperties(_this$props3, ["disabled", "theme", "loading", "active", "children", "size", "use", "className", "tabIndex", "keyboardFocused", "neighborLocation"]);
+          forwardedRef = _this$props3.forwardedRef,
+          other = _objectWithoutProperties(_this$props3, ["disabled", "theme", "loading", "active", "children", "size", "use", "className", "tabIndex", "keyboardFocused", "neighborLocation", "forwardedRef"]);
 
@@ -297,3 +264,4 @@ var disabled = loading || disabledProp;
         disabled: disabled,
-        className: styles.button
+        className: styles.button,
+        ref: forwardedRef
       }), React.createElement("span", {
@@ -322,4 +290,4 @@ className: styles.inner
 };
-Button.Addon = ButtonAddon;
-Button.Text = ButtonText;
+Button.Addon = WithRef()(ButtonAddon);
+Button.Text = WithRef()(ButtonText);
 var Button$1 = enhance(Button);
@@ -326,0 +294,0 @@

lib/index.js

@@ -20,2 +20,3 @@ 'use strict';
 var neighborLocation = require('@semcore/neighbor-location');
+var WithRef = _interopDefault(require('@semcore/utils/lib/enhances/WithRef'));
 var compose = _interopDefault(require('@semcore/utils/lib/compose'));
@@ -60,56 +61,2 @@ var addonText = _interopDefault(require('@semcore/utils/lib/addonText'));
 
-var data = {
-  "block": {
-    "block": "_button_1upc8_3",
-    "size": {
-      "s": "_button--size_s_1upc8_73",
-      "m": "_button--size_m_1upc8_100",
-      "l": "_button--size_l_1upc8_127",
-      "xl": "_button--size_xl_1upc8_154"
-    },
-    "theme": {
-      "primary-info": "_button--theme_primary-info_1upc8_181",
-      "primary-success": "_button--theme_primary-success_1upc8_193",
-      "primary-warning": "_button--theme_primary-warning_1upc8_205",
-      "primary-danger": "_button--theme_primary-danger_1upc8_217",
-      "primary-invert": "_button--theme_primary-invert_1upc8_229",
-      "secondary-muted": "_button--theme_secondary-muted_1upc8_241",
-      "secondary-info": "_button--theme_secondary-info_1upc8_254",
-      "secondary-invert": "_button--theme_secondary-invert_1upc8_267",
-      "tertiary-info": "_button--theme_tertiary-info_1upc8_280",
-      "tertiary-muted": "_button--theme_tertiary-muted_1upc8_292",
-      "tertiary-invert": "_button--theme_tertiary-invert_1upc8_303"
-    },
-    "active": {
-      "block": "_button--active_1upc8_188"
-    },
-    "disabled": {
-      "block": "_button--disabled_1upc8_315"
-    },
-    "keyboard-focused": {
-      "block": "_button--keyboard-focused_1upc8_321"
-    },
-    "neighbor-location": {
-      "right": "_button--neighbor-location_right_1upc8_325",
-      "both": "_button--neighbor-location_both_1upc8_330",
-      "left": "_button--neighbor-location_left_1upc8_335"
-    }
-  },
-  "spin": {
-    "block": "_button__spin_1upc8_41"
-  },
-  "inner": {
-    "block": "_button__inner_1upc8_50",
-    "loading": {
-      "block": "_button__inner--loading_1upc8_58"
-    }
-  },
-  "additional": {
-    "block": "_button__additional_1upc8_62"
-  },
-  "text": {
-    "block": "_button__text_1upc8_68"
-  }
-};
-
 (function cssModulesFnInject(_path) {
@@ -119,9 +66,10 @@ if (_path && typeof window !== 'undefined') {
     var prevStyle = head.querySelector('._css-style');
+    var css = "._button_9g4s6_3{position:relative;display:inline-block;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;padding:0;margin:0;white-space:nowrap;font-family:inherit;font-weight:400;line-height:normal;text-decoration:none;text-align:center;vertical-align:middle;border:1px solid transparent;color:#666;outline:0;box-shadow:none;cursor:pointer;box-sizing:border-box;overflow:visible;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}._button_9g4s6_3::-moz-focus-inner{padding:0;border:none}._button_9g4s6_3:active,._button_9g4s6_3:focus,._button_9g4s6_3:hover{outline:0;text-decoration:none}._button__spin_9g4s6_41{position:absolute;top:0;left:0;width:100%;height:100%;display:-webkit-box;display:flex}._button__inner_9g4s6_50{display:-webkit-inline-box;display:inline-flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;height:100%;width:100%}._button__inner--loading_9g4s6_58{visibility:hidden}._button__additional_9g4s6_62{display:-webkit-inline-box;display:inline-flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center}._button__text_9g4s6_68{display:-webkit-inline-box;display:inline-flex;line-height:1}._button--size_s_9g4s6_73{height:18px;min-width:18px;border-radius:2px;font-size:10px}._button--size_s_9g4s6_73 ._button__text_9g4s6_68{margin-left:4px;margin-right:4px}._button--size_s_9g4s6_73 ._button__additional_9g4s6_62:not(:only-child):first-child{margin-left:4px}._button--size_s_9g4s6_73 ._button__additional_9g4s6_62:not(:only-child):last-child{margin-right:4px}._button--size_s_9g4s6_73 ._button__additional_9g4s6_62:only-child{margin-left:-2px;margin-right:-2px}._button--size_m_9g4s6_100{height:26px;min-width:26px;border-radius:3px;font-size:12px}._button--size_m_9g4s6_100 ._button__text_9g4s6_68{margin-left:8px;margin-right:8px}._button--size_m_9g4s6_100 ._button__additional_9g4s6_62:not(:only-child):first-child{margin-left:8px}._button--size_m_9g4s6_100 ._button__additional_9g4s6_62:not(:only-child):last-child{margin-right:8px}._button--size_m_9g4s6_100 ._button__additional_9g4s6_62:only-child{margin-left:-4px;margin-right:-4px}._button--size_l_9g4s6_127{height:32px;min-width:32px;border-radius:4px;font-size:14px}._button--size_l_9g4s6_127 ._button__text_9g4s6_68{margin-left:8px;margin-right:8px}._button--size_l_9g4s6_127 ._button__additional_9g4s6_62:not(:only-child):first-child{margin-left:8px}._button--size_l_9g4s6_127 ._button__additional_9g4s6_62:not(:only-child):last-child{margin-right:8px}._button--size_l_9g4s6_127 ._button__additional_9g4s6_62:only-child{margin-left:-4px;margin-right:-4px}._button--size_xl_9g4s6_154{height:42px;min-width:42px;border-radius:5px;font-size:16px}._button--size_xl_9g4s6_154 ._button__text_9g4s6_68{margin-left:12px;margin-right:12px}._button--size_xl_9g4s6_154 ._button__additional_9g4s6_62:not(:only-child):first-child{margin-left:12px}._button--size_xl_9g4s6_154 ._button__additional_9g4s6_62:not(:only-child):last-child{margin-right:12px}._button--size_xl_9g4s6_154 ._button__additional_9g4s6_62:only-child{margin-left:-6px;margin-right:-6px}._button--theme_primary-info_9g4s6_181{background-color:#2b94e1;color:#fff}._button--theme_primary-info_9g4s6_181:hover{background-color:#0071bc}._button--theme_primary-info_9g4s6_181._button--active_9g4s6_188,._button--theme_primary-info_9g4s6_181:active{background-color:#006bb3}._button--theme_primary-success_9g4s6_193{background-color:#4fae33;color:#fff}._button--theme_primary-success_9g4s6_193:hover{background-color:#1d9c00}._button--theme_primary-success_9g4s6_193._button--active_9g4s6_188,._button--theme_primary-success_9g4s6_193:active{background-color:#1c9400}._button--theme_primary-warning_9g4s6_205{background-color:#ff7f00;color:#fff}._button--theme_primary-warning_9g4s6_205:hover{background-color:#c60}._button--theme_primary-warning_9g4s6_205._button--active_9g4s6_188,._button--theme_primary-warning_9g4s6_205:active{background-color:#c26100}._button--theme_primary-danger_9g4s6_217{background-color:#ed2d2d;color:#fff}._button--theme_primary-danger_9g4s6_217:hover{background-color:#d00000}._button--theme_primary-danger_9g4s6_217._button--active_9g4s6_188,._button--theme_primary-danger_9g4s6_217:active{background-color:#c60000}._button--theme_primary-invert_9g4s6_229{background-color:#fff;color:#333}._button--theme_primary-invert_9g4s6_229:hover{background-color:#eee}._button--theme_primary-invert_9g4s6_229._button--active_9g4s6_188,._button--theme_primary-invert_9g4s6_229:active{background-color:#e4e1e1}._button--theme_secondary-muted_9g4s6_241{background-color:rgba(166,175,179,.1);color:#666;border-color:#a6b0b3}._button--theme_secondary-muted_9g4s6_241:hover{background-color:rgba(166,175,179,.2)}._button--theme_secondary-muted_9g4s6_241._button--active_9g4s6_188,._button--theme_secondary-muted_9g4s6_241:active{background-color:rgba(166,175,179,.3)}._button--theme_secondary-info_9g4s6_254{background-color:rgba(42,148,224,.05);color:#2b94e1;border-color:#2b94e1}._button--theme_secondary-info_9g4s6_254:hover{background-color:rgba(0,113,188,.2)}._button--theme_secondary-info_9g4s6_254._button--active_9g4s6_188,._button--theme_secondary-info_9g4s6_254:active{background-color:rgba(0,113,188,.3)}._button--theme_secondary-invert_9g4s6_267{background-color:hsla(0,0%,100%,.05);color:#fff;border-color:#fff}._button--theme_secondary-invert_9g4s6_267:hover{background-color:hsla(0,0%,100%,.2)}._button--theme_secondary-invert_9g4s6_267._button--active_9g4s6_188,._button--theme_secondary-invert_9g4s6_267:active{background-color:hsla(0,0%,100%,.3)}._button--theme_tertiary-info_9g4s6_280{color:#0071bc;background-color:transparent}._button--theme_tertiary-info_9g4s6_280:hover{background-color:rgba(42,148,224,.2)}._button--theme_tertiary-info_9g4s6_280._button--active_9g4s6_188,._button--theme_tertiary-info_9g4s6_280:active{background-color:rgba(42,148,224,.3)}._button--theme_tertiary-muted_9g4s6_292{color:#666;background-color:transparent}._button--theme_tertiary-muted_9g4s6_292:hover{background-color:rgba(166,175,179,.2)}._button--theme_tertiary-muted_9g4s6_292._button--active_9g4s6_188,._button--theme_tertiary-muted_9g4s6_292:active{background-color:rgba(166,175,179,.3)}._button--theme_tertiary-invert_9g4s6_303{color:#fff;background-color:transparent}._button--theme_tertiary-invert_9g4s6_303:hover{background-color:hsla(0,0%,100%,.2)}._button--theme_tertiary-invert_9g4s6_303._button--active_9g4s6_188,._button--theme_tertiary-invert_9g4s6_303:active{background-color:hsla(0,0%,100%,.3)}._button--disabled_9g4s6_315{opacity:.3;cursor:default;pointer-events:none}._button--keyboard-focused_9g4s6_321{box-shadow:0 0 0 3px rgba(42,148,224,.3)}._button--neighbor-location_right_9g4s6_325._button--neighbor-location_right_9g4s6_325{border-top-right-radius:0;border-bottom-right-radius:0}._button--neighbor-location_both_9g4s6_330._button--neighbor-location_both_9g4s6_330{border-radius:0;margin-left:-1px}._button--neighbor-location_left_9g4s6_335._button--neighbor-location_left_9g4s6_335{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}._button--neighbor-location_both_9g4s6_330[class*=button--theme_primary-]{border-left-color:hsla(0,0%,100%,.5)}._button--neighbor-location_both_9g4s6_330._button--theme_primary-invert_9g4s6_229{border-left-color:rgba(0,0,0,.5)}._button--neighbor-location_left_9g4s6_335[class*=button--theme_primary-]{border-left-color:hsla(0,0%,100%,.5)}._button--neighbor-location_left_9g4s6_335._button--theme_primary-invert_9g4s6_229{border-left-color:rgba(0,0,0,.5)}";
 
     if (prevStyle && prevStyle.insertAdjacentText) {
-      prevStyle.insertAdjacentText("beforeend", "._button_1upc8_3{position:relative;display:inline-block;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;padding:0;margin:0;white-space:nowrap;font-family:inherit;font-weight:400;line-height:normal;text-decoration:none;text-align:center;vertical-align:middle;border:1px solid transparent;color:#666;outline:0;box-shadow:none;cursor:pointer;box-sizing:border-box;overflow:visible;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}._button_1upc8_3::-moz-focus-inner{padding:0;border:none}._button_1upc8_3:active,._button_1upc8_3:focus,._button_1upc8_3:hover{outline:0;text-decoration:none}._button__spin_1upc8_41{position:absolute;top:0;left:0;width:100%;height:100%;display:-webkit-box;display:flex}._button__inner_1upc8_50{display:-webkit-inline-box;display:inline-flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;height:100%;width:100%}._button__inner--loading_1upc8_58{visibility:hidden}._button__additional_1upc8_62{display:-webkit-inline-box;display:inline-flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center}._button__text_1upc8_68{display:-webkit-inline-box;display:inline-flex;line-height:1}._button--size_s_1upc8_73{height:18px;min-width:18px;border-radius:2px;font-size:10px}._button--size_s_1upc8_73 ._button__text_1upc8_68{margin-left:4px;margin-right:4px}._button--size_s_1upc8_73 ._button__additional_1upc8_62:not(:only-child):first-child{margin-left:4px}._button--size_s_1upc8_73 ._button__additional_1upc8_62:not(:only-child):last-child{margin-right:4px}._button--size_s_1upc8_73 ._button__additional_1upc8_62:only-child{margin-left:-2px;margin-right:-2px}._button--size_m_1upc8_100{height:26px;min-width:26px;border-radius:3px;font-size:12px}._button--size_m_1upc8_100 ._button__text_1upc8_68{margin-left:8px;margin-right:8px}._button--size_m_1upc8_100 ._button__additional_1upc8_62:not(:only-child):first-child{margin-left:8px}._button--size_m_1upc8_100 ._button__additional_1upc8_62:not(:only-child):last-child{margin-right:8px}._button--size_m_1upc8_100 ._button__additional_1upc8_62:only-child{margin-left:-4px;margin-right:-4px}._button--size_l_1upc8_127{height:32px;min-width:32px;border-radius:4px;font-size:14px}._button--size_l_1upc8_127 ._button__text_1upc8_68{margin-left:8px;margin-right:8px}._button--size_l_1upc8_127 ._button__additional_1upc8_62:not(:only-child):first-child{margin-left:8px}._button--size_l_1upc8_127 ._button__additional_1upc8_62:not(:only-child):last-child{margin-right:8px}._button--size_l_1upc8_127 ._button__additional_1upc8_62:only-child{margin-left:-4px;margin-right:-4px}._button--size_xl_1upc8_154{height:42px;min-width:42px;border-radius:5px;font-size:16px}._button--size_xl_1upc8_154 ._button__text_1upc8_68{margin-left:12px;margin-right:12px}._button--size_xl_1upc8_154 ._button__additional_1upc8_62:not(:only-child):first-child{margin-left:12px}._button--size_xl_1upc8_154 ._button__additional_1upc8_62:not(:only-child):last-child{margin-right:12px}._button--size_xl_1upc8_154 ._button__additional_1upc8_62:only-child{margin-left:-6px;margin-right:-6px}._button--theme_primary-info_1upc8_181{background-color:#2b94e1;color:#fff}._button--theme_primary-info_1upc8_181:hover{background-color:#0071bc}._button--theme_primary-info_1upc8_181._button--active_1upc8_188,._button--theme_primary-info_1upc8_181:active{background-color:#006bb3}._button--theme_primary-success_1upc8_193{background-color:#4fae33;color:#fff}._button--theme_primary-success_1upc8_193:hover{background-color:#1d9c00}._button--theme_primary-success_1upc8_193._button--active_1upc8_188,._button--theme_primary-success_1upc8_193:active{background-color:#1c9400}._button--theme_primary-warning_1upc8_205{background-color:#ff7f00;color:#fff}._button--theme_primary-warning_1upc8_205:hover{background-color:#c60}._button--theme_primary-warning_1upc8_205._button--active_1upc8_188,._button--theme_primary-warning_1upc8_205:active{background-color:#c26100}._button--theme_primary-danger_1upc8_217{background-color:#ed2d2d;color:#fff}._button--theme_primary-danger_1upc8_217:hover{background-color:#d00000}._button--theme_primary-danger_1upc8_217._button--active_1upc8_188,._button--theme_primary-danger_1upc8_217:active{background-color:#c60000}._button--theme_primary-invert_1upc8_229{background-color:#fff;color:#333}._button--theme_primary-invert_1upc8_229:hover{background-color:#eee}._button--theme_primary-invert_1upc8_229._button--active_1upc8_188,._button--theme_primary-invert_1upc8_229:active{background-color:#e4e1e1}._button--theme_secondary-muted_1upc8_241{background-color:rgba(166,175,179,.1);color:#666;border-color:#a6b0b3}._button--theme_secondary-muted_1upc8_241:hover{background-color:rgba(166,175,179,.2)}._button--theme_secondary-muted_1upc8_241._button--active_1upc8_188,._button--theme_secondary-muted_1upc8_241:active{background-color:rgba(166,175,179,.3)}._button--theme_secondary-info_1upc8_254{background-color:rgba(42,148,224,.05);color:#2b94e1;border-color:#2b94e1}._button--theme_secondary-info_1upc8_254:hover{background-color:rgba(0,113,188,.2)}._button--theme_secondary-info_1upc8_254._button--active_1upc8_188,._button--theme_secondary-info_1upc8_254:active{background-color:rgba(0,113,188,.3)}._button--theme_secondary-invert_1upc8_267{background-color:hsla(0,0%,100%,.05);color:#fff;border-color:#fff}._button--theme_secondary-invert_1upc8_267:hover{background-color:hsla(0,0%,100%,.2)}._button--theme_secondary-invert_1upc8_267._button--active_1upc8_188,._button--theme_secondary-invert_1upc8_267:active{background-color:hsla(0,0%,100%,.3)}._button--theme_tertiary-info_1upc8_280{color:#0071bc;background-color:transparent}._button--theme_tertiary-info_1upc8_280:hover{background-color:rgba(42,148,224,.2)}._button--theme_tertiary-info_1upc8_280._button--active_1upc8_188,._button--theme_tertiary-info_1upc8_280:active{background-color:rgba(42,148,224,.3)}._button--theme_tertiary-muted_1upc8_292{color:#666;background-color:transparent}._button--theme_tertiary-muted_1upc8_292:hover{background-color:rgba(166,175,179,.2)}._button--theme_tertiary-muted_1upc8_292._button--active_1upc8_188,._button--theme_tertiary-muted_1upc8_292:active{background-color:rgba(166,175,179,.3)}._button--theme_tertiary-invert_1upc8_303{color:#fff;background-color:transparent}._button--theme_tertiary-invert_1upc8_303:hover{background-color:hsla(0,0%,100%,.2)}._button--theme_tertiary-invert_1upc8_303._button--active_1upc8_188,._button--theme_tertiary-invert_1upc8_303:active{background-color:hsla(0,0%,100%,.3)}._button--disabled_1upc8_315{opacity:.3;cursor:default;pointer-events:none}._button--keyboard-focused_1upc8_321{box-shadow:0 0 0 3px rgba(42,148,224,.3)}._button--neighbor-location_right_1upc8_325._button--neighbor-location_right_1upc8_325{border-top-right-radius:0;border-bottom-right-radius:0}._button--neighbor-location_both_1upc8_330._button--neighbor-location_both_1upc8_330{border-radius:0;margin-left:-1px}._button--neighbor-location_left_1upc8_335._button--neighbor-location_left_1upc8_335{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}._button--neighbor-location_both_1upc8_330[class*=button--theme_primary-]{border-left-color:hsla(0,0%,100%,.5)}._button--neighbor-location_both_1upc8_330._button--theme_primary-invert_1upc8_229{border-left-color:rgba(0,0,0,.5)}._button--neighbor-location_left_1upc8_335[class*=button--theme_primary-]{border-left-color:hsla(0,0%,100%,.5)}._button--neighbor-location_left_1upc8_335._button--theme_primary-invert_1upc8_229{border-left-color:rgba(0,0,0,.5)}");
+      prevStyle.insertAdjacentText("beforeend", css);
     } else {
       var style = window.document.createElement("style");
       style.classList.add('_css-style');
-      style.innerHTML = "._button_1upc8_3{position:relative;display:inline-block;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;padding:0;margin:0;white-space:nowrap;font-family:inherit;font-weight:400;line-height:normal;text-decoration:none;text-align:center;vertical-align:middle;border:1px solid transparent;color:#666;outline:0;box-shadow:none;cursor:pointer;box-sizing:border-box;overflow:visible;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}._button_1upc8_3::-moz-focus-inner{padding:0;border:none}._button_1upc8_3:active,._button_1upc8_3:focus,._button_1upc8_3:hover{outline:0;text-decoration:none}._button__spin_1upc8_41{position:absolute;top:0;left:0;width:100%;height:100%;display:-webkit-box;display:flex}._button__inner_1upc8_50{display:-webkit-inline-box;display:inline-flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;height:100%;width:100%}._button__inner--loading_1upc8_58{visibility:hidden}._button__additional_1upc8_62{display:-webkit-inline-box;display:inline-flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center}._button__text_1upc8_68{display:-webkit-inline-box;display:inline-flex;line-height:1}._button--size_s_1upc8_73{height:18px;min-width:18px;border-radius:2px;font-size:10px}._button--size_s_1upc8_73 ._button__text_1upc8_68{margin-left:4px;margin-right:4px}._button--size_s_1upc8_73 ._button__additional_1upc8_62:not(:only-child):first-child{margin-left:4px}._button--size_s_1upc8_73 ._button__additional_1upc8_62:not(:only-child):last-child{margin-right:4px}._button--size_s_1upc8_73 ._button__additional_1upc8_62:only-child{margin-left:-2px;margin-right:-2px}._button--size_m_1upc8_100{height:26px;min-width:26px;border-radius:3px;font-size:12px}._button--size_m_1upc8_100 ._button__text_1upc8_68{margin-left:8px;margin-right:8px}._button--size_m_1upc8_100 ._button__additional_1upc8_62:not(:only-child):first-child{margin-left:8px}._button--size_m_1upc8_100 ._button__additional_1upc8_62:not(:only-child):last-child{margin-right:8px}._button--size_m_1upc8_100 ._button__additional_1upc8_62:only-child{margin-left:-4px;margin-right:-4px}._button--size_l_1upc8_127{height:32px;min-width:32px;border-radius:4px;font-size:14px}._button--size_l_1upc8_127 ._button__text_1upc8_68{margin-left:8px;margin-right:8px}._button--size_l_1upc8_127 ._button__additional_1upc8_62:not(:only-child):first-child{margin-left:8px}._button--size_l_1upc8_127 ._button__additional_1upc8_62:not(:only-child):last-child{margin-right:8px}._button--size_l_1upc8_127 ._button__additional_1upc8_62:only-child{margin-left:-4px;margin-right:-4px}._button--size_xl_1upc8_154{height:42px;min-width:42px;border-radius:5px;font-size:16px}._button--size_xl_1upc8_154 ._button__text_1upc8_68{margin-left:12px;margin-right:12px}._button--size_xl_1upc8_154 ._button__additional_1upc8_62:not(:only-child):first-child{margin-left:12px}._button--size_xl_1upc8_154 ._button__additional_1upc8_62:not(:only-child):last-child{margin-right:12px}._button--size_xl_1upc8_154 ._button__additional_1upc8_62:only-child{margin-left:-6px;margin-right:-6px}._button--theme_primary-info_1upc8_181{background-color:#2b94e1;color:#fff}._button--theme_primary-info_1upc8_181:hover{background-color:#0071bc}._button--theme_primary-info_1upc8_181._button--active_1upc8_188,._button--theme_primary-info_1upc8_181:active{background-color:#006bb3}._button--theme_primary-success_1upc8_193{background-color:#4fae33;color:#fff}._button--theme_primary-success_1upc8_193:hover{background-color:#1d9c00}._button--theme_primary-success_1upc8_193._button--active_1upc8_188,._button--theme_primary-success_1upc8_193:active{background-color:#1c9400}._button--theme_primary-warning_1upc8_205{background-color:#ff7f00;color:#fff}._button--theme_primary-warning_1upc8_205:hover{background-color:#c60}._button--theme_primary-warning_1upc8_205._button--active_1upc8_188,._button--theme_primary-warning_1upc8_205:active{background-color:#c26100}._button--theme_primary-danger_1upc8_217{background-color:#ed2d2d;color:#fff}._button--theme_primary-danger_1upc8_217:hover{background-color:#d00000}._button--theme_primary-danger_1upc8_217._button--active_1upc8_188,._button--theme_primary-danger_1upc8_217:active{background-color:#c60000}._button--theme_primary-invert_1upc8_229{background-color:#fff;color:#333}._button--theme_primary-invert_1upc8_229:hover{background-color:#eee}._button--theme_primary-invert_1upc8_229._button--active_1upc8_188,._button--theme_primary-invert_1upc8_229:active{background-color:#e4e1e1}._button--theme_secondary-muted_1upc8_241{background-color:rgba(166,175,179,.1);color:#666;border-color:#a6b0b3}._button--theme_secondary-muted_1upc8_241:hover{background-color:rgba(166,175,179,.2)}._button--theme_secondary-muted_1upc8_241._button--active_1upc8_188,._button--theme_secondary-muted_1upc8_241:active{background-color:rgba(166,175,179,.3)}._button--theme_secondary-info_1upc8_254{background-color:rgba(42,148,224,.05);color:#2b94e1;border-color:#2b94e1}._button--theme_secondary-info_1upc8_254:hover{background-color:rgba(0,113,188,.2)}._button--theme_secondary-info_1upc8_254._button--active_1upc8_188,._button--theme_secondary-info_1upc8_254:active{background-color:rgba(0,113,188,.3)}._button--theme_secondary-invert_1upc8_267{background-color:hsla(0,0%,100%,.05);color:#fff;border-color:#fff}._button--theme_secondary-invert_1upc8_267:hover{background-color:hsla(0,0%,100%,.2)}._button--theme_secondary-invert_1upc8_267._button--active_1upc8_188,._button--theme_secondary-invert_1upc8_267:active{background-color:hsla(0,0%,100%,.3)}._button--theme_tertiary-info_1upc8_280{color:#0071bc;background-color:transparent}._button--theme_tertiary-info_1upc8_280:hover{background-color:rgba(42,148,224,.2)}._button--theme_tertiary-info_1upc8_280._button--active_1upc8_188,._button--theme_tertiary-info_1upc8_280:active{background-color:rgba(42,148,224,.3)}._button--theme_tertiary-muted_1upc8_292{color:#666;background-color:transparent}._button--theme_tertiary-muted_1upc8_292:hover{background-color:rgba(166,175,179,.2)}._button--theme_tertiary-muted_1upc8_292._button--active_1upc8_188,._button--theme_tertiary-muted_1upc8_292:active{background-color:rgba(166,175,179,.3)}._button--theme_tertiary-invert_1upc8_303{color:#fff;background-color:transparent}._button--theme_tertiary-invert_1upc8_303:hover{background-color:hsla(0,0%,100%,.2)}._button--theme_tertiary-invert_1upc8_303._button--active_1upc8_188,._button--theme_tertiary-invert_1upc8_303:active{background-color:hsla(0,0%,100%,.3)}._button--disabled_1upc8_315{opacity:.3;cursor:default;pointer-events:none}._button--keyboard-focused_1upc8_321{box-shadow:0 0 0 3px rgba(42,148,224,.3)}._button--neighbor-location_right_1upc8_325._button--neighbor-location_right_1upc8_325{border-top-right-radius:0;border-bottom-right-radius:0}._button--neighbor-location_both_1upc8_330._button--neighbor-location_both_1upc8_330{border-radius:0;margin-left:-1px}._button--neighbor-location_left_1upc8_335._button--neighbor-location_left_1upc8_335{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}._button--neighbor-location_both_1upc8_330[class*=button--theme_primary-]{border-left-color:hsla(0,0%,100%,.5)}._button--neighbor-location_both_1upc8_330._button--theme_primary-invert_1upc8_229{border-left-color:rgba(0,0,0,.5)}._button--neighbor-location_left_1upc8_335[class*=button--theme_primary-]{border-left-color:hsla(0,0%,100%,.5)}._button--neighbor-location_left_1upc8_335._button--theme_primary-invert_1upc8_229{border-left-color:rgba(0,0,0,.5)}";
+      style.innerHTML = css;
       head.appendChild(style);
@@ -133,57 +81,71 @@ }
 function block() {
-  return data['block']['block'];
+  return '_button_9g4s6_3';
 }
 
-block['size'] = function () {
-  var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'block';
-  return data['block']['size'][value];
+block['size'] = function (value) {
+  return {
+    "s": "_button--size_s_9g4s6_73",
+    "m": "_button--size_m_9g4s6_100",
+    "l": "_button--size_l_9g4s6_127",
+    "xl": "_button--size_xl_9g4s6_154"
+  }[value];
 };
 
-block['theme'] = function () {
-  var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'block';
-  return data['block']['theme'][value];
+block['theme'] = function (value) {
+  return {
+    "primary-info": "_button--theme_primary-info_9g4s6_181",
+    "primary-success": "_button--theme_primary-success_9g4s6_193",
+    "primary-warning": "_button--theme_primary-warning_9g4s6_205",
+    "primary-danger": "_button--theme_primary-danger_9g4s6_217",
+    "primary-invert": "_button--theme_primary-invert_9g4s6_229",
+    "secondary-muted": "_button--theme_secondary-muted_9g4s6_241",
+    "secondary-info": "_button--theme_secondary-info_9g4s6_254",
+    "secondary-invert": "_button--theme_secondary-invert_9g4s6_267",
+    "tertiary-info": "_button--theme_tertiary-info_9g4s6_280",
+    "tertiary-muted": "_button--theme_tertiary-muted_9g4s6_292",
+    "tertiary-invert": "_button--theme_tertiary-invert_9g4s6_303"
+  }[value];
 };
 
-block['active'] = function () {
-  var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'block';
-  return data['block']['active'][value];
+block['active'] = function (value) {
+  return "_button--active_9g4s6_188";
 };
 
-block['disabled'] = function () {
-  var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'block';
-  return data['block']['disabled'][value];
+block['disabled'] = function (value) {
+  return "_button--disabled_9g4s6_315";
 };
 
-block['keyboardFocused'] = function () {
-  var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'block';
-  return data['block']['keyboard-focused'][value];
+block['keyboardFocused'] = function (value) {
+  return "_button--keyboard-focused_9g4s6_321";
 };
 
-block['neighborLocation'] = function () {
-  var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'block';
-  return data['block']['neighbor-location'][value];
+block['neighborLocation'] = function (value) {
+  return {
+    "right": "_button--neighbor-location_right_9g4s6_325",
+    "both": "_button--neighbor-location_both_9g4s6_330",
+    "left": "_button--neighbor-location_left_9g4s6_335"
+  }[value];
 };
 
 function spin() {
-  return data['spin']['block'];
+  return '_button__spin_9g4s6_41';
 }
 
 function inner() {
-  return data['inner']['block'];
+  return '_button__inner_9g4s6_50';
 }
 
-inner['loading'] = function () {
-  var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'block';
-  return data['inner']['loading'][value];
+inner['loading'] = function (value) {
+  return "_button__inner--loading_9g4s6_58";
 };
 
 function additional() {
-  return data['additional']['block'];
+  return '_button__additional_9g4s6_62';
 }
 
 function text() {
-  return data['text']['block'];
+  return '_button__text_9g4s6_68';
 }
 
-var enhance = compose(WithKeyboardFocus(), neighborLocation.WithNeighborLocation());
+var enhance = compose(WithRef(), WithKeyboardFocus(), neighborLocation.WithNeighborLocation());
 var MAP_USE_DEFAULT_THEME = {
@@ -211,7 +173,9 @@ primary: 'info',
           className = _this$props.className,
-          other = _objectWithoutProperties(_this$props, ["className"]);
+          forwardedRef = _this$props.forwardedRef,
+          other = _objectWithoutProperties(_this$props, ["className", "forwardedRef"]);
 
       var classes = cn(additional(), className);
       return React__default.createElement(flexBox.Box, Object.assign({
-        className: classes
+        className: classes,
+        ref: forwardedRef
       }, other));
@@ -245,7 +209,9 @@ }
           className = _this$props2.className,
-          other = _objectWithoutProperties(_this$props2, ["className"]);
+          forwardedRef = _this$props2.forwardedRef,
+          other = _objectWithoutProperties(_this$props2, ["className", "forwardedRef"]);
 
       var classes = cn(text(), className);
       return React__default.createElement(flexBox.Box, Object.assign({
-        className: classes
+        className: classes,
+        ref: forwardedRef
       }, other));
@@ -291,3 +257,4 @@ }
           neighborLocation = _this$props3.neighborLocation,
-          other = _objectWithoutProperties(_this$props3, ["disabled", "theme", "loading", "active", "children", "size", "use", "className", "tabIndex", "keyboardFocused", "neighborLocation"]);
+          forwardedRef = _this$props3.forwardedRef,
+          other = _objectWithoutProperties(_this$props3, ["disabled", "theme", "loading", "active", "children", "size", "use", "className", "tabIndex", "keyboardFocused", "neighborLocation", "forwardedRef"]);
 
@@ -304,3 +271,4 @@ var disabled = loading || disabledProp;
         disabled: disabled,
-        className: styles.button
+        className: styles.button,
+        ref: forwardedRef
       }), React__default.createElement("span", {
@@ -329,4 +297,4 @@ className: styles.inner
 };
-Button.Addon = ButtonAddon;
-Button.Text = ButtonText;
+Button.Addon = WithRef()(ButtonAddon);
+Button.Text = WithRef()(ButtonText);
 var Button$1 = enhance(Button);
@@ -333,0 +301,0 @@

package.json

 {
   "name": "@semcore/button",
   "description": "SEMRush Button Component",
-  "version": "2.1.13",
+  "version": "2.2.0",
   "main": "lib/index.js",
@@ -12,6 +12,6 @@ "module": "lib/index.es.js",
     "build": "rollup --config=node:rollup-config-ts",
-    "test": "jest --no-cache"
+    "test": "jest"
   },
   "dependencies": {
-    "@semcore/utils": "^3.1",
+    "@semcore/utils": "^3.2",
     "@semcore/spin": "^2.0",
@@ -18,0 +18,0 @@ "@semcore/neighbor-location": "^1.0",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Number of low supply chain risk alerts

3

decreased by-40%

Worsened metrics

Total package byte prevSize

87381

decreased by-15.87%

Lines of code

1133

decreased by-9.29%

Dependency changes

• Updated@semcore/utils@^3.2