@semcore/button 5.42.1 → 16.0.0-prerelease.2

package/lib/esm/component/ButtonLink/ButtonLink.mjs

@@ -1,82 +1,78 @@
-import g from "@babel/runtime/helpers/esm/objectSpread2";
-import j from "@babel/runtime/helpers/esm/classCallCheck";
-import u from "@babel/runtime/helpers/esm/createClass";
-import v from "@babel/runtime/helpers/esm/inherits";
-import h from "@babel/runtime/helpers/esm/createSuper";
-import i from "@babel/runtime/helpers/esm/defineProperty";
-import { sstyled as S } from "@semcore/utils/lib/core/index";
-import x, { sstyled as a, assignProps as c } from "@semcore/core";
-import l from "react";
-import p from "@semcore/utils/lib/enhances/keyboardFocusEnhance";
-import { Box as s } from "@semcore/flex-box";
-import { AbstractButton as f } from "../AbstractButton/AbstractButton.mjs";
-import m from "@semcore/utils/lib/enhances/resolveColorEnhance";
-var B = (
+import a from "@babel/runtime/helpers/esm/objectSpread2";
+import y from "@babel/runtime/helpers/esm/classCallCheck";
+import d from "@babel/runtime/helpers/esm/createClass";
+import h from "@babel/runtime/helpers/esm/inherits";
+import S from "@babel/runtime/helpers/esm/createSuper";
+import r from "@babel/runtime/helpers/esm/defineProperty";
+import { sstyled as i, createComponent as x, assignProps as v } from "@semcore/core";
+import u from "react";
+import { Box as c } from "@semcore/flex-box";
+import { AbstractButton as p } from "../AbstractButton/AbstractButton.mjs";
+import f from "@semcore/core/lib/utils/enhances/resolveColorEnhance";
+var m = (
   /*__reshadow_css_start__*/
-  (S.insert(
+  (i.insert(
     /*__inner_css_start__*/
-    ".___SButton_15j2k_gg_{display:inline-flex;font-family:inherit;font-size:var(--intergalactic-fs-200, 14px);color:var(--intergalactic-text-link, #006dca);line-height:normal;position:relative;cursor:pointer;-webkit-text-decoration:none;text-decoration:none;border:0;padding:0;margin:0;box-shadow:none;-webkit-tap-highlight-color:transparent;outline:0;background:0 0;transition:color .15s ease-in-out}.___SButton_15j2k_gg_:active,.___SButton_15j2k_gg_:focus{outline:0;-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___SButton_15j2k_gg_:hover{outline:0;-webkit-text-decoration:none;text-decoration:none}}.___SButton_15j2k_gg_::-moz-focus-inner{border:0;padding:0}.___SButton_15j2k_gg_.__active_15j2k_gg_,.___SButton_15j2k_gg_:active{color:var(--intergalactic-text-link-hover-active, #044792)}@media (hover:hover){.___SButton_15j2k_gg_:hover{color:var(--intergalactic-text-link-hover-active, #044792)}}.___SButton_15j2k_gg_.__active_15j2k_gg_ .___SText_15j2k_gg_,.___SButton_15j2k_gg_:active .___SText_15j2k_gg_{border-color:currentColor}@media (hover:hover){.___SButton_15j2k_gg_:hover .___SText_15j2k_gg_{border-color:currentColor}}.___SButton_15j2k_gg_.__enableVisited_15j2k_gg_:visited{color:var(--intergalactic-text-link-visited, #8649e1)}@media (hover:hover){.___SButton_15j2k_gg_.__enableVisited_15j2k_gg_:visited:hover{color:var(--intergalactic-text-link-visited, #8649e1)}}.___SButton_15j2k_gg_ .___SText_15j2k_gg_{border-bottom-width:1px;border-bottom-style:solid;border-color:transparent;transition:border-bottom-color .15s ease-in-out}.___SButton_15j2k_gg_.__keyboardFocused_15j2k_gg_{outline-color:var(--intergalactic-keyboard-focus-outline, rgba(0, 143, 248, 0.5));outline-style:solid;outline-width:3px}.___SButton_15j2k_gg_.__disabled_15j2k_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___SButton_15j2k_gg_._use_secondary_15j2k_gg_{color:var(--intergalactic-text-hint, #6c6e79)}.___SButton_15j2k_gg_._use_secondary_15j2k_gg_.__active_15j2k_gg_,.___SButton_15j2k_gg_._use_secondary_15j2k_gg_:active{color:var(--intergalactic-text-hint-hover-active, #484a54)}@media (hover:hover){.___SButton_15j2k_gg_._use_secondary_15j2k_gg_:hover{color:var(--intergalactic-text-hint-hover-active, #484a54)}}.___SButton_15j2k_gg_._use_secondary_15j2k_gg_ .___SText_15j2k_gg_{border-bottom-width:1px;border-bottom-style:dashed;border-color:currentColor}.___SAddon_15j2k_gg_,.___SInner_15j2k_gg_{display:inline-flex;justify-content:center;align-items:center}.___SInner_15j2k_gg_{height:100%;width:100%}.___SAddon_15j2k_gg_{vertical-align:middle;pointer-events:none}.___SButton_15j2k_gg_ .___SAddon_15j2k_gg_:not(:only-child):first-child{margin-right:var(--intergalactic-spacing-1x, 4px)}.___SButton_15j2k_gg_ .___SAddon_15j2k_gg_:not(:only-child):last-child{margin-left:var(--intergalactic-spacing-1x, 4px)}.___SButton_15j2k_gg_.__text-color_15j2k_gg_{color:var(--text-color_15j2k)}.___SButton_15j2k_gg_.__text-color_15j2k_gg_.__active_15j2k_gg_,.___SButton_15j2k_gg_.__text-color_15j2k_gg_:active{color:var(--text-color_15j2k);filter:brightness(.8)}@media (hover:hover){.___SButton_15j2k_gg_.__text-color_15j2k_gg_:hover{color:var(--text-color_15j2k);filter:brightness(.8)}}.___SButton_15j2k_gg_._size_100_15j2k_gg_{font-size:var(--intergalactic-fs-100, 12px);line-height:var(--intergalactic-lh-100, 133%)}.___SButton_15j2k_gg_._size_200_15j2k_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___SButton_15j2k_gg_._size_300_15j2k_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}.___SButton_15j2k_gg_._size_400_15j2k_gg_{font-size:var(--intergalactic-fs-400, 20px);line-height:var(--intergalactic-lh-400, 120%)}.___SButton_15j2k_gg_._size_500_15j2k_gg_{font-size:var(--intergalactic-fs-500, 24px);line-height:var(--intergalactic-lh-500, 117%)}.___SButton_15j2k_gg_._size_600_15j2k_gg_{font-size:var(--intergalactic-fs-600, 32px);line-height:var(--intergalactic-lh-600, 125%)}.___SButton_15j2k_gg_._size_700_15j2k_gg_{font-size:var(--intergalactic-fs-700, 36px);line-height:var(--intergalactic-lh-700, 110%)}.___SButton_15j2k_gg_._size_800_15j2k_gg_{font-size:var(--intergalactic-fs-800, 48px);line-height:var(--intergalactic-lh-800, 117%)}@media (prefers-reduced-motion){.___SButton_15j2k_gg_,.___SText_15j2k_gg_{transition:none}}",
-    "15j2k_gg_"
+    ".___SButton_vy4nu_gg_{display:inline-flex;font-family:inherit;font-size:var(--intergalactic-fs-200, 14px);color:var(--intergalactic-text-link, #006dca);line-height:normal;position:relative;cursor:pointer;border:0;padding:0;margin:0;box-shadow:none;-webkit-tap-highlight-color:transparent;background:0 0;transition:color .15s ease-in-out}.___SButton_vy4nu_gg_,.___SButton_vy4nu_gg_:active{-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___SButton_vy4nu_gg_:hover{-webkit-text-decoration:none;text-decoration:none}}.___SButton_vy4nu_gg_::-moz-focus-inner{border:0;padding:0}.___SButton_vy4nu_gg_.__active_vy4nu_gg_,.___SButton_vy4nu_gg_:active{color:var(--intergalactic-text-link-hover-active, #044792)}@media (hover:hover){.___SButton_vy4nu_gg_:hover{color:var(--intergalactic-text-link-hover-active, #044792)}}.___SButton_vy4nu_gg_.__active_vy4nu_gg_ .___SText_vy4nu_gg_,.___SButton_vy4nu_gg_:active .___SText_vy4nu_gg_{border-color:currentColor}@media (hover:hover){.___SButton_vy4nu_gg_:hover .___SText_vy4nu_gg_{border-color:currentColor}}.___SButton_vy4nu_gg_.__enableVisited_vy4nu_gg_:visited{color:var(--intergalactic-text-link-visited, #8649e1)}@media (hover:hover){.___SButton_vy4nu_gg_.__enableVisited_vy4nu_gg_:visited:hover{color:var(--intergalactic-text-link-visited, #8649e1)}}.___SButton_vy4nu_gg_ .___SText_vy4nu_gg_{border-bottom-width:1px;border-bottom-style:solid;border-color:transparent;transition:border-bottom-color .15s ease-in-out}.___SButton_vy4nu_gg_.__disabled_vy4nu_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___SButton_vy4nu_gg_._use_secondary_vy4nu_gg_{color:var(--intergalactic-text-hint, #6c6e79)}.___SButton_vy4nu_gg_._use_secondary_vy4nu_gg_.__active_vy4nu_gg_,.___SButton_vy4nu_gg_._use_secondary_vy4nu_gg_:active{color:var(--intergalactic-text-hint-hover-active, #484a54)}@media (hover:hover){.___SButton_vy4nu_gg_._use_secondary_vy4nu_gg_:hover{color:var(--intergalactic-text-hint-hover-active, #484a54)}}.___SButton_vy4nu_gg_._use_secondary_vy4nu_gg_ .___SText_vy4nu_gg_{border-bottom-width:1px;border-bottom-style:dashed;border-color:currentColor}.___SAddon_vy4nu_gg_,.___SInner_vy4nu_gg_{display:inline-flex;justify-content:center;align-items:center}.___SInner_vy4nu_gg_{height:100%;width:100%}.___SAddon_vy4nu_gg_{vertical-align:middle;pointer-events:none}.___SButton_vy4nu_gg_ .___SAddon_vy4nu_gg_:not(:only-child):first-child{margin-right:var(--intergalactic-spacing-1x, 4px)}.___SButton_vy4nu_gg_ .___SAddon_vy4nu_gg_:not(:only-child):last-child{margin-left:var(--intergalactic-spacing-1x, 4px)}.___SButton_vy4nu_gg_.__text-color_vy4nu_gg_{color:var(--text-color_vy4nu)}.___SButton_vy4nu_gg_.__text-color_vy4nu_gg_.__active_vy4nu_gg_,.___SButton_vy4nu_gg_.__text-color_vy4nu_gg_:active{color:var(--text-color_vy4nu);filter:brightness(.8)}@media (hover:hover){.___SButton_vy4nu_gg_.__text-color_vy4nu_gg_:hover{color:var(--text-color_vy4nu);filter:brightness(.8)}}.___SButton_vy4nu_gg_._size_100_vy4nu_gg_{font-size:var(--intergalactic-fs-100, 12px);line-height:var(--intergalactic-lh-100, 133%)}.___SButton_vy4nu_gg_._size_200_vy4nu_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___SButton_vy4nu_gg_._size_300_vy4nu_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}.___SButton_vy4nu_gg_._size_400_vy4nu_gg_{font-size:var(--intergalactic-fs-400, 20px);line-height:var(--intergalactic-lh-400, 120%)}.___SButton_vy4nu_gg_._size_500_vy4nu_gg_{font-size:var(--intergalactic-fs-500, 24px);line-height:var(--intergalactic-lh-500, 117%)}.___SButton_vy4nu_gg_._size_600_vy4nu_gg_{font-size:var(--intergalactic-fs-600, 32px);line-height:var(--intergalactic-lh-600, 125%)}.___SButton_vy4nu_gg_._size_700_vy4nu_gg_{font-size:var(--intergalactic-fs-700, 36px);line-height:var(--intergalactic-lh-700, 110%)}.___SButton_vy4nu_gg_._size_800_vy4nu_gg_{font-size:var(--intergalactic-fs-800, 48px);line-height:var(--intergalactic-lh-800, 117%)}@media (prefers-reduced-motion){.___SButton_vy4nu_gg_,.___SText_vy4nu_gg_{transition:none}}",
+    "vy4nu_gg_"
   ), {
-    __SButton: "___SButton_15j2k_gg_",
-    _keyboardFocused: "__keyboardFocused_15j2k_gg_",
-    _disabled: "__disabled_15j2k_gg_",
-    __SInner: "___SInner_15j2k_gg_",
-    __SAddon: "___SAddon_15j2k_gg_",
-    _size_100: "_size_100_15j2k_gg_",
-    _size_200: "_size_200_15j2k_gg_",
-    _size_300: "_size_300_15j2k_gg_",
-    _size_400: "_size_400_15j2k_gg_",
-    _size_500: "_size_500_15j2k_gg_",
-    _size_600: "_size_600_15j2k_gg_",
-    _size_700: "_size_700_15j2k_gg_",
-    _size_800: "_size_800_15j2k_gg_",
-    __SText: "___SText_15j2k_gg_",
-    _active: "__active_15j2k_gg_",
-    _enableVisited: "__enableVisited_15j2k_gg_",
-    _use_secondary: "_use_secondary_15j2k_gg_",
-    "_text-color": "__text-color_15j2k_gg_",
-    "--text-color": "--text-color_15j2k"
+    __SButton: "___SButton_vy4nu_gg_",
+    _disabled: "__disabled_vy4nu_gg_",
+    __SInner: "___SInner_vy4nu_gg_",
+    __SAddon: "___SAddon_vy4nu_gg_",
+    _size_100: "_size_100_vy4nu_gg_",
+    _size_200: "_size_200_vy4nu_gg_",
+    _size_300: "_size_300_vy4nu_gg_",
+    _size_400: "_size_400_vy4nu_gg_",
+    _size_500: "_size_500_vy4nu_gg_",
+    _size_600: "_size_600_vy4nu_gg_",
+    _size_700: "_size_700_vy4nu_gg_",
+    _size_800: "_size_800_vy4nu_gg_",
+    __SText: "___SText_vy4nu_gg_",
+    _active: "__active_vy4nu_gg_",
+    _enableVisited: "__enableVisited_vy4nu_gg_",
+    _use_secondary: "_use_secondary_vy4nu_gg_",
+    "_text-color": "__text-color_vy4nu_gg_",
+    "--text-color": "--text-color_vy4nu"
   })
-), b = {
-  keyboardFocused: p(),
-  resolveColor: m()
-}, o = /* @__PURE__ */ function(t) {
-  v(_, t);
-  var e = h(_);
+), B = {
+  resolveColor: f()
+}, n = /* @__PURE__ */ function(t) {
+  h(_, t);
+  var e = S(_);
   function _() {
-    return j(this, _), e.apply(this, arguments);
+    return y(this, _), e.apply(this, arguments);
   }
-  return u(_, [{
+  return d(_, [{
     key: "getTextColor",
     value: function() {
-      var n = this.asProps, k = n.color, d = n.resolveColor;
-      return d(k);
+      var g = this.asProps, l = g.color, s = g.resolveColor;
+      return s(l);
     }
   }]), _;
-}(f);
-i(o, "displayName", "ButtonLink");
-i(o, "enhance", Object.values(b));
-i(o, "style", B);
-i(o, "defaultProps", {
+}(p);
+r(n, "displayName", "ButtonLink");
+r(n, "enhance", Object.values(B));
+r(n, "style", m);
+r(n, "defaultProps", {
   use: "primary"
 });
-function y(t) {
-  var e = arguments[0], _, r = s;
-  return _ = a(t.styles), /* @__PURE__ */ l.createElement(r, _.cn("SText", g({}, c({
+function b(t) {
+  var e = arguments[0], _, o = c;
+  return _ = i(t.styles), /* @__PURE__ */ u.createElement(o, _.cn("SText", a({}, v({
     tag: "span"
   }, e))));
 }
 function z(t) {
-  var e = arguments[0], _, r = s;
-  return _ = a(t.styles), /* @__PURE__ */ l.createElement(r, _.cn("SAddon", g({}, c({
+  var e = arguments[0], _, o = c;
+  return _ = i(t.styles), /* @__PURE__ */ u.createElement(o, _.cn("SAddon", a({}, v({
     tag: "span"
   }, e))));
 }
-var $ = x(o, {
-  Text: y,
+var R = x(n, {
+  Text: b,
   Addon: z
 });
 export {
-  $ as ButtonLink
+  R as ButtonLink
 };

package/lib/types/component/AbstractButton/AbstractButton.type.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { PropGetterFn } from '@semcore/core';
-import { KeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
+import { KeyboardFocusProps } from '@semcore/core/lib/utils/enhances/keyboardFocusEnhance';
 import { BoxProps } from '@semcore/flex-box';
 import { NeighborItemProps } from '@semcore/neighbor-location';
 import { TooltipHintProps } from '@semcore/tooltip';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/button",
   "description": "Semrush Button Component",
-  "version": "5.42.1",
+  "version": "16.0.0-prerelease.2",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -14,16 +14,13 @@
     "types": "./lib/types/index.d.ts"
   },
   "dependencies": {
-    "@semcore/flex-box": "5.41.1",
-    "@semcore/neighbor-location": "4.40.1",
-    "@semcore/spin": "5.41.1",
-    "@semcore/tooltip": "6.49.1",
-    "@semcore/utils": "4.48.1"
+    "@semcore/flex-box": "16.0.0-prerelease.2",
+    "@semcore/neighbor-location": "16.0.0-prerelease.2",
+    "@semcore/spin": "16.0.0-prerelease.2",
+    "@semcore/tooltip": "16.0.0-prerelease.2"
   },
   "peerDependencies": {
-    "@semcore/core": "^2.17.5",
-    "react": "16.8 - 18",
-    "react-dom": "16.8 - 18"
+    "@semcore/base-components": "^16.0.0-prerelease.2"
   },
   "repository": {
     "type": "git",

package/src/component/AbstractButton/AbstractButton.tsx

@@ -2,10 +2,10 @@ import React from 'react';
 import { Box } from '@semcore/flex-box';
 import { Hint } from '@semcore/tooltip';
 import NeighborLocation from '@semcore/neighbor-location';
-import addonTextChildren from '@semcore/utils/lib/addonTextChildren';
-import logger from '@semcore/utils/lib/logger';
+import addonTextChildren from '@semcore/core/lib/utils/addonTextChildren';
+import logger from '@semcore/core/lib/utils/logger';
 import SpinButton from './SpinButton';
-import hasLabels from '@semcore/utils/lib/hasLabels';
+import hasLabels from '@semcore/core/lib/utils/hasLabels';
 import { AbstractButtonProps } from './AbstractButton.type';
 import { Component, CORE_INSTANCE, Root, sstyled } from '@semcore/core';
 

package/src/component/AbstractButton/AbstractButton.type.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { PropGetterFn } from '@semcore/core';
-import { KeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
+import { KeyboardFocusProps } from '@semcore/core/lib/utils/enhances/keyboardFocusEnhance';
 import { BoxProps } from '@semcore/flex-box';
 import { NeighborItemProps } from '@semcore/neighbor-location';
 import { TooltipHintProps } from '@semcore/tooltip';

package/src/component/Button/Button.tsx

@@ -1,21 +1,13 @@
 import React from 'react';
-import createComponent, { sstyled, Root } from '@semcore/core';
+import { createComponent, sstyled, Root } from '@semcore/core';
 import { Box } from '@semcore/flex-box';
-import keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
 
 import style from './button.shadow.css';
 import { AbstractButton } from '../AbstractButton/AbstractButton';
-import {
-  ButtonAddonProps,
-  ButtonChildren,
-  ButtonComponent,
-  ButtonProps,
-  ButtonTextProps,
-} from './Button.type';
+import { ButtonAddonProps, ButtonComponent, ButtonTextProps } from './Button.type';
 
 class RootButton extends AbstractButton {
   static displayName = 'Button';
-  static enhance = [keyboardFocusEnhance()];
   static style = style;
   static defaultProps = {
     use: 'secondary',

package/src/component/Button/button.shadow.css

@@ -12,7 +12,6 @@ SButton {
   text-align: center;
   vertical-align: middle;
   border: 1px solid transparent;
-  outline: 0;
   box-shadow: none;
   cursor: pointer;
   box-sizing: border-box;
@@ -30,18 +29,11 @@ SButton {
   }
 
   &:active,
-  &:hover,
-  &:focus {
-    outline: 0;
+  &:hover {
     text-decoration: none;
   }
 }
 
-SButton[keyboardFocused] {
-  box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));
-  z-index: 1;
-}
-
 SButton[disabled] {
   opacity: var(--intergalactic-disabled-opacity, 0.3);
   cursor: default;

package/src/component/ButtonLink/ButtonLink.tsx

@@ -1,14 +1,12 @@
 import React from 'react';
-import createComponent, { sstyled, Root } from '@semcore/core';
+import { createComponent, sstyled, Root } from '@semcore/core';
 import style from './buttonLink.shadow.css';
-import keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
 import { Box } from '@semcore/flex-box';
 import { AbstractButton } from '../AbstractButton/AbstractButton';
-import resolveColorEnhance from '@semcore/utils/lib/enhances/resolveColorEnhance';
+import resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';
 import { ButtonLinkAddonProps, ButtonLinkComponent, ButtonLinkTextProps } from './ButtonLink.type';
 
 const enhance = {
-  keyboardFocused: keyboardFocusEnhance(),
   resolveColor: resolveColorEnhance(),
 };
 

package/src/component/ButtonLink/ButtonLink.type.ts

@@ -1,4 +1,4 @@
-import { UnknownProperties, Intergalactic } from '@semcore/core';
+import { Intergalactic } from '@semcore/core';
 
 import {
   AbstractButtonAddonProps,

package/src/component/ButtonLink/buttonLink.shadow.css

@@ -12,14 +12,11 @@ SButton {
   margin: 0;
   box-shadow: none;
   -webkit-tap-highlight-color: transparent;
-  outline: 0;
   background: none;
   transition: color 0.15s ease-in-out;
 
   &:active,
-  &:hover,
-  &:focus {
-    outline: 0;
+  &:hover {
     text-decoration: none;
   }
 
@@ -51,12 +48,6 @@ SButton {
   }
 }
 
-SButton[keyboardFocused] {
-  outline-color: var(--intergalactic-keyboard-focus-outline, rgba(0, 143, 248, 0.5));
-  outline-style: solid;
-  outline-width: 3px;
-}
-
 SButton[disabled] {
   opacity: var(--intergalactic-disabled-opacity, 0.3);
   cursor: default;