@semcore/base-trigger 4.53.2 → 16.0.0-prerelease.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +10 -0
- package/lib/cjs/BaseTrigger.js +25 -28
- package/lib/cjs/BaseTrigger.js.map +1 -1
- package/lib/cjs/ButtonTrigger.js +11 -11
- package/lib/cjs/ButtonTrigger.js.map +1 -1
- package/lib/cjs/FilterTrigger.js +18 -20
- package/lib/cjs/FilterTrigger.js.map +1 -1
- package/lib/cjs/LinkTrigger.js +17 -20
- package/lib/cjs/LinkTrigger.js.map +1 -1
- package/lib/cjs/index.d.js.map +1 -1
- package/lib/cjs/style/base-trigger.shadow.css +4 -10
- package/lib/cjs/style/filter-trigger.shadow.css +1 -5
- package/lib/cjs/style/link-trigger.shadow.css +0 -9
- package/lib/es6/BaseTrigger.js +25 -26
- package/lib/es6/BaseTrigger.js.map +1 -1
- package/lib/es6/ButtonTrigger.js +11 -9
- package/lib/es6/ButtonTrigger.js.map +1 -1
- package/lib/es6/FilterTrigger.js +18 -19
- package/lib/es6/FilterTrigger.js.map +1 -1
- package/lib/es6/LinkTrigger.js +17 -18
- package/lib/es6/LinkTrigger.js.map +1 -1
- package/lib/es6/index.d.js.map +1 -1
- package/lib/es6/style/base-trigger.shadow.css +4 -10
- package/lib/es6/style/filter-trigger.shadow.css +1 -5
- package/lib/es6/style/link-trigger.shadow.css +0 -9
- package/lib/esm/BaseTrigger.mjs +28 -30
- package/lib/esm/ButtonTrigger.mjs +11 -10
- package/lib/esm/FilterTrigger.mjs +22 -24
- package/lib/esm/LinkTrigger.mjs +20 -22
- package/lib/esm/style/base-trigger.shadow.css +4 -10
- package/lib/esm/style/filter-trigger.shadow.css +1 -5
- package/lib/esm/style/link-trigger.shadow.css +0 -9
- package/lib/types/index.d.ts +2 -4
- package/package.json +8 -11
|
@@ -14,7 +14,6 @@ SBaseTrigger {
|
|
|
14
14
|
text-decoration: none;
|
|
15
15
|
-webkit-tap-highlight-color: transparent;
|
|
16
16
|
overflow: visible;
|
|
17
|
-
outline: 0;
|
|
18
17
|
text-align: center;
|
|
19
18
|
vertical-align: middle;
|
|
20
19
|
font-family: inherit;
|
|
@@ -32,16 +31,12 @@ SBaseTrigger {
|
|
|
32
31
|
}
|
|
33
32
|
|
|
34
33
|
&:active,
|
|
35
|
-
&:hover
|
|
36
|
-
&:focus {
|
|
37
|
-
outline: 0;
|
|
34
|
+
&:hover {
|
|
38
35
|
text-decoration: none;
|
|
39
36
|
}
|
|
40
37
|
|
|
41
|
-
|
|
38
|
+
&:focus-visible {
|
|
42
39
|
border: 1px solid var(--intergalactic-border-info-active, #006dca);
|
|
43
|
-
box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));
|
|
44
|
-
z-index: 1;
|
|
45
40
|
}
|
|
46
41
|
|
|
47
42
|
&:hover {
|
|
@@ -170,9 +165,8 @@ SBaseTrigger[state='valid'] {
|
|
|
170
165
|
SBaseTrigger[state='invalid'] {
|
|
171
166
|
border-color: var(--intergalactic-border-critical-active, #d1002f);
|
|
172
167
|
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
box-shadow: var(--intergalactic-keyboard-focus-invalid, 0px 0px 0px 3px rgba(255, 73, 83, 0.5));
|
|
168
|
+
&:focus-visible {
|
|
169
|
+
outline-color: var(--intergalactic-keyboard-focus-invalid-outline, rgba(255, 73, 83, 0.5));
|
|
176
170
|
}
|
|
177
171
|
}
|
|
178
172
|
|
|
@@ -20,10 +20,6 @@ SLinkTrigger {
|
|
|
20
20
|
transition: color 0.15s ease-in-out;
|
|
21
21
|
border: 0;
|
|
22
22
|
|
|
23
|
-
&:focus {
|
|
24
|
-
outline: none;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
23
|
&[active],
|
|
28
24
|
&:hover,
|
|
29
25
|
&:active {
|
|
@@ -58,11 +54,6 @@ SLinkTrigger[disabled] {
|
|
|
58
54
|
pointer-events: none;
|
|
59
55
|
}
|
|
60
56
|
|
|
61
|
-
SLinkTrigger[keyboardFocused] {
|
|
62
|
-
box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));
|
|
63
|
-
z-index: 1;
|
|
64
|
-
}
|
|
65
|
-
|
|
66
57
|
SAddon,
|
|
67
58
|
SLinkAddon {
|
|
68
59
|
display: inline-flex;
|
package/lib/esm/BaseTrigger.mjs
CHANGED
|
@@ -4,43 +4,40 @@ import _createClass from "@babel/runtime/helpers/esm/createClass";
|
|
|
4
4
|
import _inherits from "@babel/runtime/helpers/esm/inherits";
|
|
5
5
|
import _createSuper from "@babel/runtime/helpers/esm/createSuper";
|
|
6
6
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
7
|
-
import { sstyled } from "@semcore/
|
|
8
|
-
import createComponent, { sstyled as sstyled$1, assignProps, Component } from "@semcore/core";
|
|
7
|
+
import { sstyled, createComponent, assignProps, Component } from "@semcore/core";
|
|
9
8
|
import React from "react";
|
|
10
9
|
import { Box, InvalidStateBox } from "@semcore/flex-box";
|
|
11
10
|
import NeighborLocation from "@semcore/neighbor-location";
|
|
12
|
-
import
|
|
13
|
-
import
|
|
14
|
-
import
|
|
15
|
-
import
|
|
16
|
-
import { cssVariableEnhance } from "@semcore/utils/lib/useCssVariable";
|
|
11
|
+
import addonTextChildren from "@semcore/core/lib/utils/addonTextChildren";
|
|
12
|
+
import logger from "@semcore/core/lib/utils/logger";
|
|
13
|
+
import animatedSizeEnhance from "@semcore/core/lib/utils/enhances/animatedSizeEnhance";
|
|
14
|
+
import { cssVariableEnhance } from "@semcore/core/lib/utils/useCssVariable";
|
|
17
15
|
/*!__reshadow-styles__:"./style/base-trigger.shadow.css"*/
|
|
18
16
|
var style = (
|
|
19
17
|
/*__reshadow_css_start__*/
|
|
20
18
|
(sstyled.insert(
|
|
21
19
|
/*__inner_css_start__*/
|
|
22
|
-
".
|
|
20
|
+
".___SBaseTrigger_n9yl9_gg_{display:inline-block;align-items:center;justify-content:center;line-height:normal;position:relative;touch-action:manipulation;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-sizing:border-box;padding:0;margin:0;box-shadow:none;-webkit-text-decoration:none;text-decoration:none;-webkit-tap-highlight-color:transparent;overflow:visible;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer;background:var(--intergalactic-bg-primary-neutral, #ffffff);font-weight:var(--intergalactic-regular, 400);border:1px solid var(--intergalactic-border-primary, #c4c7cf);color:var(--intergalactic-text-primary, #191b23)}.___SBaseTrigger_n9yl9_gg_::-moz-focus-inner{border:0;padding:0}.___SBaseTrigger_n9yl9_gg_:active{-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___SBaseTrigger_n9yl9_gg_:hover{-webkit-text-decoration:none;text-decoration:none}}.___SBaseTrigger_n9yl9_gg_:focus-visible{border:1px solid var(--intergalactic-border-info-active, #006dca)}@media (hover:hover){.___SBaseTrigger_n9yl9_gg_:hover{background-color:var(--intergalactic-bg-primary-neutral-hover, #f4f5f9)}}.___SBaseTrigger_n9yl9_gg_.__active_n9yl9_gg_,.___SBaseTrigger_n9yl9_gg_:active{border-color:var(--intergalactic-border-info-active, #006dca);background-color:var(--intergalactic-bg-primary-neutral, #ffffff)}.___SBaseTrigger_n9yl9_gg_.__disabled_n9yl9_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___SInner_n9yl9_gg_{display:inline-flex;align-items:center;justify-content:center;height:100%;width:100%}.___SText_n9yl9_gg_{display:inline;padding:1px 0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:var(--intergalactic-lh-200, 142%);flex-grow:1;text-align:left}.___SAddon_n9yl9_gg_{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;pointer-events:none}.___SBaseAddon_n9yl9_gg_{width:12px;height:12px}.___SBaseTrigger_n9yl9_gg_._size_m_n9yl9_gg_{min-width:26px;height:28px;border-radius:var(--intergalactic-control-rounded, 6px);padding:0 var(--intergalactic-spacing-2x, 8px);font-size:var(--intergalactic-fs-200, 14px)}.___SBaseTrigger_n9yl9_gg_._size_m_n9yl9_gg_ .___SAddon_n9yl9_gg_:not(:only-child):first-child{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SBaseTrigger_n9yl9_gg_._size_m_n9yl9_gg_ .___SAddon_n9yl9_gg_:not(:only-child):last-child{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SBaseTrigger_n9yl9_gg_._size_l_n9yl9_gg_ .___SAddon_n9yl9_gg_:only-child,.___SBaseTrigger_n9yl9_gg_._size_m_n9yl9_gg_ .___SAddon_n9yl9_gg_:only-child{margin-left:calc(-1*var(--intergalactic-spacing-1x, 4px));margin-right:calc(-1*var(--intergalactic-spacing-1x, 4px))}.___SBaseTrigger_n9yl9_gg_._size_l_n9yl9_gg_{min-width:32px;height:40px;border-radius:var(--intergalactic-control-rounded, 6px);padding:0 var(--intergalactic-spacing-3x, 12px);font-size:var(--intergalactic-fs-300, 16px)}.___SBaseTrigger_n9yl9_gg_._size_l_n9yl9_gg_ .___SAddon_n9yl9_gg_:not(:only-child):first-child{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SBaseTrigger_n9yl9_gg_._size_l_n9yl9_gg_ .___SAddon_n9yl9_gg_:not(:only-child):last-child{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SBaseTrigger_n9yl9_gg_._neighborLocation_right_n9yl9_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SBaseTrigger_n9yl9_gg_._neighborLocation_both_n9yl9_gg_{border-radius:0;margin-left:-1px}.___SBaseTrigger_n9yl9_gg_._neighborLocation_left_n9yl9_gg_{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}.___SText_n9yl9_gg_.__display-placeholder_n9yl9_gg_{color:var(--intergalactic-text-placeholder, #8a8e9b)}.___SBaseTrigger_n9yl9_gg_._state_valid_n9yl9_gg_{border-color:var(--intergalactic-border-success-active, #007c65)}.___SBaseTrigger_n9yl9_gg_._state_invalid_n9yl9_gg_{border-color:var(--intergalactic-border-critical-active, #d1002f)}.___SBaseTrigger_n9yl9_gg_._state_invalid_n9yl9_gg_:focus-visible{outline-color:var(--intergalactic-keyboard-focus-invalid-outline, rgba(255, 73, 83, 0.5))}.___SInvalidPattern_n9yl9_gg_._size_m_n9yl9_gg_{margin-left:calc(-1*var(--intergalactic-spacing-2x, 8px))}.___SInvalidPattern_n9yl9_gg_._size_l_n9yl9_gg_{margin-left:calc(-1*var(--intergalactic-spacing-3x, 12px))}",
|
|
23
21
|
/*__inner_css_end__*/
|
|
24
|
-
"
|
|
22
|
+
"n9yl9_gg_"
|
|
25
23
|
), /*__reshadow_css_end__*/
|
|
26
24
|
{
|
|
27
|
-
"__SBaseTrigger": "
|
|
28
|
-
"_disabled": "
|
|
29
|
-
"__SInner": "
|
|
30
|
-
"__SText": "
|
|
31
|
-
"__SAddon": "
|
|
32
|
-
"__SBaseAddon": "
|
|
33
|
-
"_neighborLocation_right": "
|
|
34
|
-
"_neighborLocation_both": "
|
|
35
|
-
"_neighborLocation_left": "
|
|
36
|
-
"_display-placeholder": "__display-
|
|
37
|
-
"_state_valid": "
|
|
38
|
-
"__SInvalidPattern": "
|
|
39
|
-
"_size_m": "
|
|
40
|
-
"_size_l": "
|
|
41
|
-
"
|
|
42
|
-
"
|
|
43
|
-
"_state_invalid": "_state_invalid_1hhwr_gg_"
|
|
25
|
+
"__SBaseTrigger": "___SBaseTrigger_n9yl9_gg_",
|
|
26
|
+
"_disabled": "__disabled_n9yl9_gg_",
|
|
27
|
+
"__SInner": "___SInner_n9yl9_gg_",
|
|
28
|
+
"__SText": "___SText_n9yl9_gg_",
|
|
29
|
+
"__SAddon": "___SAddon_n9yl9_gg_",
|
|
30
|
+
"__SBaseAddon": "___SBaseAddon_n9yl9_gg_",
|
|
31
|
+
"_neighborLocation_right": "_neighborLocation_right_n9yl9_gg_",
|
|
32
|
+
"_neighborLocation_both": "_neighborLocation_both_n9yl9_gg_",
|
|
33
|
+
"_neighborLocation_left": "_neighborLocation_left_n9yl9_gg_",
|
|
34
|
+
"_display-placeholder": "__display-placeholder_n9yl9_gg_",
|
|
35
|
+
"_state_valid": "_state_valid_n9yl9_gg_",
|
|
36
|
+
"__SInvalidPattern": "___SInvalidPattern_n9yl9_gg_",
|
|
37
|
+
"_size_m": "_size_m_n9yl9_gg_",
|
|
38
|
+
"_size_l": "_size_l_n9yl9_gg_",
|
|
39
|
+
"_active": "__active_n9yl9_gg_",
|
|
40
|
+
"_state_invalid": "_state_invalid_n9yl9_gg_"
|
|
44
41
|
})
|
|
45
42
|
);
|
|
46
43
|
var RootBaseTrigger = /* @__PURE__ */ function(_Component) {
|
|
@@ -72,9 +69,10 @@ var RootBaseTrigger = /* @__PURE__ */ function(_Component) {
|
|
|
72
69
|
neighborLocation
|
|
73
70
|
}, function(neighborLocation2) {
|
|
74
71
|
var _ref4;
|
|
75
|
-
return _ref4 = sstyled
|
|
72
|
+
return _ref4 = sstyled(styles), /* @__PURE__ */ React.createElement(SBaseTrigger, _ref4.cn("SBaseTrigger", _objectSpread({}, assignProps({
|
|
76
73
|
"tag": "button",
|
|
77
74
|
"type": "button",
|
|
75
|
+
"tabIndex": 0,
|
|
78
76
|
"neighborLocation": neighborLocation2,
|
|
79
77
|
"state": theme
|
|
80
78
|
}, _ref))), state === "invalid" && /* @__PURE__ */ React.createElement(SInvalidPattern, _ref4.cn("SInvalidPattern", {
|
|
@@ -86,7 +84,7 @@ var RootBaseTrigger = /* @__PURE__ */ function(_Component) {
|
|
|
86
84
|
return RootBaseTrigger2;
|
|
87
85
|
}(Component);
|
|
88
86
|
_defineProperty(RootBaseTrigger, "displayName", "BaseTrigger");
|
|
89
|
-
_defineProperty(RootBaseTrigger, "enhance", [
|
|
87
|
+
_defineProperty(RootBaseTrigger, "enhance", [cssVariableEnhance({
|
|
90
88
|
variable: "--intergalactic-duration-control",
|
|
91
89
|
fallback: "200",
|
|
92
90
|
map: Number.parseInt,
|
|
@@ -104,7 +102,7 @@ function Text(props) {
|
|
|
104
102
|
var _ref2 = arguments[0], _ref5;
|
|
105
103
|
var SText = Box;
|
|
106
104
|
var children = props.children, styles = props.styles, empty = props.empty, placeholder = props.placeholder;
|
|
107
|
-
return _ref5 = sstyled
|
|
105
|
+
return _ref5 = sstyled(styles), /* @__PURE__ */ React.createElement(SText, _ref5.cn("SText", _objectSpread({}, assignProps({
|
|
108
106
|
"display-placeholder": empty,
|
|
109
107
|
"aria-hidden": empty
|
|
110
108
|
}, _ref2))), empty ? placeholder : children);
|
|
@@ -113,7 +111,7 @@ function Addon(props) {
|
|
|
113
111
|
var _ref3 = arguments[0], _ref6;
|
|
114
112
|
var SAddon = Box;
|
|
115
113
|
var styles = props.styles;
|
|
116
|
-
return _ref6 = sstyled
|
|
114
|
+
return _ref6 = sstyled(styles), /* @__PURE__ */ React.createElement(SAddon, _ref6.cn("SAddon", _objectSpread({}, assignProps({}, _ref3))));
|
|
117
115
|
}
|
|
118
116
|
var BaseTrigger = createComponent(RootBaseTrigger, {
|
|
119
117
|
Text,
|
|
@@ -3,27 +3,26 @@ import _createClass from "@babel/runtime/helpers/esm/createClass";
|
|
|
3
3
|
import _inherits from "@babel/runtime/helpers/esm/inherits";
|
|
4
4
|
import _createSuper from "@babel/runtime/helpers/esm/createSuper";
|
|
5
5
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
6
|
-
import { sstyled } from "@semcore/
|
|
7
|
-
import createComponent, { sstyled as sstyled$1, assignProps, Component } from "@semcore/core";
|
|
6
|
+
import { sstyled, createComponent, assignProps, Component } from "@semcore/core";
|
|
8
7
|
import React from "react";
|
|
9
|
-
import addonTextChildren from "@semcore/
|
|
8
|
+
import addonTextChildren from "@semcore/core/lib/utils/addonTextChildren";
|
|
10
9
|
import ChevronDown from "@semcore/icon/ChevronDown/m";
|
|
11
10
|
import BaseTrigger from "./BaseTrigger.mjs";
|
|
12
11
|
import Spin from "@semcore/spin";
|
|
13
|
-
import animatedSizeEnhance from "@semcore/
|
|
14
|
-
import { cssVariableEnhance } from "@semcore/
|
|
12
|
+
import animatedSizeEnhance from "@semcore/core/lib/utils/enhances/animatedSizeEnhance";
|
|
13
|
+
import { cssVariableEnhance } from "@semcore/core/lib/utils/useCssVariable";
|
|
15
14
|
/*!__reshadow-styles__:"./style/button-trigger.shadow.css"*/
|
|
16
15
|
var style = (
|
|
17
16
|
/*__reshadow_css_start__*/
|
|
18
17
|
(sstyled.insert(
|
|
19
18
|
/*__inner_css_start__*/
|
|
20
|
-
".
|
|
19
|
+
".___SButtonAddon_1dfiu_gg_{width:12px;height:12px}.___SButtonTriggerSpin_1dfiu_gg_{fill:var(--intergalactic-icon-primary-neutral, #6c6e79)}",
|
|
21
20
|
/*__inner_css_end__*/
|
|
22
|
-
"
|
|
21
|
+
"1dfiu_gg_"
|
|
23
22
|
), /*__reshadow_css_end__*/
|
|
24
23
|
{
|
|
25
|
-
"__SButtonAddon": "
|
|
26
|
-
"__SButtonTriggerSpin": "
|
|
24
|
+
"__SButtonAddon": "___SButtonAddon_1dfiu_gg_",
|
|
25
|
+
"__SButtonTriggerSpin": "___SButtonTriggerSpin_1dfiu_gg_"
|
|
27
26
|
})
|
|
28
27
|
);
|
|
29
28
|
var RootButtonTrigger = /* @__PURE__ */ function(_Component) {
|
|
@@ -54,7 +53,9 @@ var RootButtonTrigger = /* @__PURE__ */ function(_Component) {
|
|
|
54
53
|
var SButtonAddon = ButtonTrigger.Addon;
|
|
55
54
|
var SButtonTriggerSpin = Spin;
|
|
56
55
|
var _this$asProps = this.asProps, Children = _this$asProps.Children, styles = _this$asProps.styles, loading = _this$asProps.loading, chevron = _this$asProps.chevron, empty = _this$asProps.empty;
|
|
57
|
-
return _ref2 = sstyled
|
|
56
|
+
return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(BaseTrigger, assignProps({
|
|
57
|
+
"tabIndex": loading ? -1 : 0
|
|
58
|
+
}, _ref), addonTextChildren(Children, ButtonTrigger.Text, ButtonTrigger.Addon, empty), (chevron || loading) && /* @__PURE__ */ React.createElement(SButtonAddon, _ref2.cn("SButtonAddon", {}), loading ? /* @__PURE__ */ React.createElement(SButtonTriggerSpin, _ref2.cn("SButtonTriggerSpin", {
|
|
58
59
|
"size": "xs",
|
|
59
60
|
"theme": false
|
|
60
61
|
})) : /* @__PURE__ */ React.createElement(ChevronDown, _ref2.cn("ChevronDown", {}))));
|
|
@@ -8,8 +8,7 @@ import _inherits from "@babel/runtime/helpers/esm/inherits";
|
|
|
8
8
|
import _createSuper from "@babel/runtime/helpers/esm/createSuper";
|
|
9
9
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
10
10
|
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
|
|
11
|
-
import { sstyled } from "@semcore/
|
|
12
|
-
import createComponent, { sstyled as sstyled$1, assignProps, Component } from "@semcore/core";
|
|
11
|
+
import { sstyled, createComponent, assignProps, Component } from "@semcore/core";
|
|
13
12
|
import React from "react";
|
|
14
13
|
import BaseTrigger from "./BaseTrigger.mjs";
|
|
15
14
|
import { Box } from "@semcore/flex-box";
|
|
@@ -17,35 +16,34 @@ import NeighborLocation from "@semcore/neighbor-location";
|
|
|
17
16
|
import Dot from "@semcore/dot";
|
|
18
17
|
import Close from "@semcore/icon/Close/m";
|
|
19
18
|
import ChevronDown from "@semcore/icon/ChevronDown/m";
|
|
20
|
-
import { callAllEventHandlers } from "@semcore/
|
|
21
|
-
import addonTextChildren from "@semcore/
|
|
19
|
+
import { callAllEventHandlers } from "@semcore/core/lib/utils/assignProps";
|
|
20
|
+
import addonTextChildren from "@semcore/core/lib/utils/addonTextChildren";
|
|
22
21
|
import { localizedMessages } from "./translations/__intergalactic-dynamic-locales.mjs";
|
|
23
|
-
import i18nEnhance from "@semcore/
|
|
24
|
-
import animatedSizeEnhance from "@semcore/
|
|
25
|
-
import { cssVariableEnhance } from "@semcore/
|
|
26
|
-
import getInputProps, { inputProps } from "@semcore/
|
|
27
|
-
import uniqueIDEnhancement from "@semcore/
|
|
28
|
-
import { setFocus } from "@semcore/
|
|
29
|
-
import { isAdvanceMode } from "@semcore/
|
|
22
|
+
import i18nEnhance from "@semcore/core/lib/utils/enhances/i18nEnhance";
|
|
23
|
+
import animatedSizeEnhance from "@semcore/core/lib/utils/enhances/animatedSizeEnhance";
|
|
24
|
+
import { cssVariableEnhance } from "@semcore/core/lib/utils/useCssVariable";
|
|
25
|
+
import getInputProps, { inputProps } from "@semcore/core/lib/utils/inputProps";
|
|
26
|
+
import uniqueIDEnhancement from "@semcore/core/lib/utils/uniqueID";
|
|
27
|
+
import { setFocus } from "@semcore/core/lib/utils/use/useFocusLock";
|
|
28
|
+
import { isAdvanceMode } from "@semcore/core/lib/utils/findComponent";
|
|
30
29
|
import { Hint } from "@semcore/tooltip";
|
|
31
|
-
import { ScreenReaderOnly } from "@semcore/
|
|
30
|
+
import { ScreenReaderOnly } from "@semcore/core/lib/utils/ScreenReaderOnly";
|
|
32
31
|
var _excluded = ["empty", "size", "placeholder", "active", "disabled", "includeInputProps", "triggerRef", "data-ui-name"];
|
|
33
32
|
/*!__reshadow-styles__:"./style/filter-trigger.shadow.css"*/
|
|
34
33
|
var style = (
|
|
35
34
|
/*__reshadow_css_start__*/
|
|
36
35
|
(sstyled.insert(
|
|
37
36
|
/*__inner_css_start__*/
|
|
38
|
-
".
|
|
37
|
+
".___SFilterTrigger_1m3i1_gg_.__selected_1m3i1_gg_{border-color:var(--intergalactic-border-info-active, #006dca);background-color:var(--intergalactic-control-secondary-info, rgba(0, 143, 248, 0.1));color:var(--intergalactic-text-primary, #191b23)}@media (hover:hover){.___SFilterTrigger_1m3i1_gg_.__selected_1m3i1_gg_:hover{background-color:var(--intergalactic-control-secondary-info-hover, rgba(0, 143, 248, 0.2))}}.___SFilterTrigger_1m3i1_gg_.__selected_1m3i1_gg_.__active_1m3i1_gg_,.___SFilterTrigger_1m3i1_gg_.__selected_1m3i1_gg_:active{background-color:var(--intergalactic-control-secondary-info-active, rgba(0, 143, 248, 0.3))}.___SWrapper_1m3i1_gg_{display:inline-flex}.___SWrapper_1m3i1_gg_:focus{outline:0}.___SCounter_1m3i1_gg_{background-color:var(--intergalactic-bg-primary-info, #008ff8)}",
|
|
39
38
|
/*__inner_css_end__*/
|
|
40
|
-
"
|
|
39
|
+
"1m3i1_gg_"
|
|
41
40
|
), /*__reshadow_css_end__*/
|
|
42
41
|
{
|
|
43
|
-
"
|
|
44
|
-
"
|
|
45
|
-
"
|
|
46
|
-
"
|
|
47
|
-
"
|
|
48
|
-
"_active": "__active_6qdgn_gg_"
|
|
42
|
+
"__SCounter": "___SCounter_1m3i1_gg_",
|
|
43
|
+
"__SFilterTrigger": "___SFilterTrigger_1m3i1_gg_",
|
|
44
|
+
"_selected": "__selected_1m3i1_gg_",
|
|
45
|
+
"_active": "__active_1m3i1_gg_",
|
|
46
|
+
"__SWrapper": "___SWrapper_1m3i1_gg_"
|
|
49
47
|
})
|
|
50
48
|
);
|
|
51
49
|
var filterTriggerInputProps = [].concat(_toConsumableArray(inputProps), ["aria-controls", "aria-haspopup", "aria-expanded", "aria-disabled", "aria-activedescendant", "aria-label", "aria-labelledby", "role"]);
|
|
@@ -114,7 +112,7 @@ var RootFilterTrigger = /* @__PURE__ */ function(_Component) {
|
|
|
114
112
|
var SWrapper = Box;
|
|
115
113
|
var _this$asProps3 = this.asProps, Children = _this$asProps3.Children, styles = _this$asProps3.styles, getI18nText = _this$asProps3.getI18nText, empty = _this$asProps3.empty, forcedAdvancedMode = _this$asProps3.forcedAdvancedMode;
|
|
116
114
|
var advancedMode = forcedAdvancedMode || isAdvanceMode(Children, [FilterTrigger.TriggerButton.displayName, FilterTrigger.ClearButton.displayName], true);
|
|
117
|
-
return _ref5 = sstyled
|
|
115
|
+
return _ref5 = sstyled(styles), /* @__PURE__ */ React.createElement(SWrapper, _ref5.cn("SWrapper", _objectSpread({}, assignProps({
|
|
118
116
|
"aria-label": getI18nText("filter"),
|
|
119
117
|
"__excludeProps": ["id"],
|
|
120
118
|
"use:role": void 0,
|
|
@@ -164,7 +162,7 @@ var TriggerButton = /* @__PURE__ */ function(_Component2) {
|
|
|
164
162
|
var _ref2 = this.asProps, _ref6;
|
|
165
163
|
var SFilterTrigger = BaseTrigger;
|
|
166
164
|
var _this$asProps4 = this.asProps, Children = _this$asProps4.Children, styles = _this$asProps4.styles, empty = _this$asProps4.empty, triggerRef = _this$asProps4.triggerRef;
|
|
167
|
-
return _ref6 = sstyled
|
|
165
|
+
return _ref6 = sstyled(styles), /* @__PURE__ */ React.createElement(SFilterTrigger, _ref6.cn("SFilterTrigger", _objectSpread({}, assignProps({
|
|
168
166
|
"use:role": "combobox",
|
|
169
167
|
"w": "100%",
|
|
170
168
|
"empty": empty,
|
|
@@ -194,7 +192,7 @@ var ClearButton = /* @__PURE__ */ function(_Component3) {
|
|
|
194
192
|
var SFilterTrigger = BaseTrigger;
|
|
195
193
|
var _this$asProps5 = this.asProps, styles = _this$asProps5.styles, empty = _this$asProps5.empty, size = _this$asProps5.size, disabled = _this$asProps5.disabled, getI18nText = _this$asProps5.getI18nText;
|
|
196
194
|
if (empty) return null;
|
|
197
|
-
return _ref7 = sstyled
|
|
195
|
+
return _ref7 = sstyled(styles), /* @__PURE__ */ React.createElement(Hint, _ref7.cn("Hint", {}), /* @__PURE__ */ React.createElement(Hint.Trigger, null, /* @__PURE__ */ React.createElement(SFilterTrigger, _ref7.cn("SFilterTrigger", _objectSpread({}, assignProps({
|
|
198
196
|
"size": size,
|
|
199
197
|
"empty": empty,
|
|
200
198
|
"selected": true,
|
|
@@ -213,7 +211,7 @@ function Counter(_ref9) {
|
|
|
213
211
|
var _ref4 = arguments[0], _ref8;
|
|
214
212
|
var styles = _ref9.styles, Children = _ref9.Children, count = _ref9.count, getI18nText = _ref9.getI18nText;
|
|
215
213
|
var SCounter = BaseTrigger.Addon;
|
|
216
|
-
return _ref8 = sstyled
|
|
214
|
+
return _ref8 = sstyled(styles), /* @__PURE__ */ React.createElement(SCounter, _ref8.cn("SCounter", _objectSpread({}, assignProps({
|
|
217
215
|
"tag": Dot
|
|
218
216
|
}, _ref4))), count !== void 0 ? /* @__PURE__ */ React.createElement(React.Fragment, null, count, /* @__PURE__ */ React.createElement(ScreenReaderOnly, _ref8.cn("ScreenReaderOnly", {}), getI18nText("BaseTrigger.FilterTrigger.Counter.selected:aria-label"))) : /* @__PURE__ */ React.createElement(Children, _ref8.cn("Children", {})));
|
|
219
217
|
}
|
package/lib/esm/LinkTrigger.mjs
CHANGED
|
@@ -4,36 +4,33 @@ import _createClass from "@babel/runtime/helpers/esm/createClass";
|
|
|
4
4
|
import _inherits from "@babel/runtime/helpers/esm/inherits";
|
|
5
5
|
import _createSuper from "@babel/runtime/helpers/esm/createSuper";
|
|
6
6
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
7
|
-
import { sstyled } from "@semcore/
|
|
8
|
-
import createComponent, { sstyled as sstyled$1, assignProps, Component } from "@semcore/core";
|
|
7
|
+
import { sstyled, createComponent, assignProps, Component } from "@semcore/core";
|
|
9
8
|
import React from "react";
|
|
10
|
-
import addonTextChildren from "@semcore/
|
|
9
|
+
import addonTextChildren from "@semcore/core/lib/utils/addonTextChildren";
|
|
11
10
|
import ChevronDown from "@semcore/icon/ChevronDown/m";
|
|
12
11
|
import Spin from "@semcore/spin";
|
|
13
12
|
import { Box } from "@semcore/flex-box";
|
|
14
|
-
import resolveColorEnhance from "@semcore/
|
|
15
|
-
import keyboardFocusEnhance from "@semcore/utils/lib/enhances/keyboardFocusEnhance";
|
|
13
|
+
import resolveColorEnhance from "@semcore/core/lib/utils/enhances/resolveColorEnhance";
|
|
16
14
|
/*!__reshadow-styles__:"./style/link-trigger.shadow.css"*/
|
|
17
15
|
var style = (
|
|
18
16
|
/*__reshadow_css_start__*/
|
|
19
17
|
(sstyled.insert(
|
|
20
18
|
/*__inner_css_start__*/
|
|
21
|
-
".
|
|
19
|
+
".___SLinkTrigger_lwral_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;user-select:none;box-sizing:border-box;padding:0;margin:0;-webkit-text-decoration:none;text-decoration:none;-webkit-tap-highlight-color:transparent;overflow:visible;outline:0;vertical-align:middle;cursor:pointer;color:var(--intergalactic-text-link, #006dca);background:0 0;transition:color .15s ease-in-out;border:0}.___SLinkTrigger_lwral_gg_.__active_lwral_gg_,.___SLinkTrigger_lwral_gg_:active{color:var(--intergalactic-text-link-hover-active, #044792)}@media (hover:hover){.___SLinkTrigger_lwral_gg_:hover{color:var(--intergalactic-text-link-hover-active, #044792)}}.___SLinkTrigger_lwral_gg_.__active_lwral_gg_ .___SText_lwral_gg_,.___SLinkTrigger_lwral_gg_:active .___SText_lwral_gg_{border-color:currentColor}@media (hover:hover){.___SLinkTrigger_lwral_gg_:hover .___SText_lwral_gg_{border-color:currentColor}}.___SLinkTrigger_lwral_gg_ .___SText_lwral_gg_{border-bottom-width:1px;border-bottom-style:solid;border-color:transparent;transition:border-bottom-color .15s ease-in-out;text-overflow:ellipsis;overflow:hidden}.___SLinkTrigger_lwral_gg_.__color_lwral_gg_{color:var(--color_lwral)}@media (hover:hover){.___SLinkTrigger_lwral_gg_.__color_lwral_gg_:hover{filter:brightness(.8)}}.___SLinkTrigger_lwral_gg_.__disabled_lwral_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___SAddon_lwral_gg_,.___SLinkAddon_lwral_gg_{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;margin-bottom:var(--intergalactic-spacing-05x, 2px)}.___SAddon_lwral_gg_:not(:only-child):first-child,.___SLinkAddon_lwral_gg_:not(:only-child):first-child{margin-right:var(--intergalactic-spacing-1x, 4px)}.___SAddon_lwral_gg_:not(:only-child):last-child,.___SLinkAddon_lwral_gg_:not(:only-child):last-child{margin-left:var(--intergalactic-spacing-1x, 4px)}.___SLinkAddon_lwral_gg_{width:16px;height:16px}.___SLinkTrigger_lwral_gg_._size_m_lwral_gg_{font-size:var(--intergalactic-fs-200, 14px)}.___SLinkTrigger_lwral_gg_._size_l_lwral_gg_{font-size:var(--intergalactic-fs-300, 16px)}@media (prefers-reduced-motion){.___SLinkTrigger_lwral_gg_,.___SLinkTrigger_lwral_gg_ .___SText_lwral_gg_{transition:none}}",
|
|
22
20
|
/*__inner_css_end__*/
|
|
23
|
-
"
|
|
21
|
+
"lwral_gg_"
|
|
24
22
|
), /*__reshadow_css_end__*/
|
|
25
23
|
{
|
|
26
|
-
"__SLinkTrigger": "
|
|
27
|
-
"_disabled": "
|
|
28
|
-
"
|
|
29
|
-
"
|
|
30
|
-
"
|
|
31
|
-
"
|
|
32
|
-
"
|
|
33
|
-
"
|
|
34
|
-
"
|
|
35
|
-
"
|
|
36
|
-
"__SAddon": "___SAddon_17gdu_gg_"
|
|
24
|
+
"__SLinkTrigger": "___SLinkTrigger_lwral_gg_",
|
|
25
|
+
"_disabled": "__disabled_lwral_gg_",
|
|
26
|
+
"__SLinkAddon": "___SLinkAddon_lwral_gg_",
|
|
27
|
+
"_size_m": "_size_m_lwral_gg_",
|
|
28
|
+
"_size_l": "_size_l_lwral_gg_",
|
|
29
|
+
"_active": "__active_lwral_gg_",
|
|
30
|
+
"__SText": "___SText_lwral_gg_",
|
|
31
|
+
"_color": "__color_lwral_gg_",
|
|
32
|
+
"--color": "--color_lwral",
|
|
33
|
+
"__SAddon": "___SAddon_lwral_gg_"
|
|
37
34
|
})
|
|
38
35
|
);
|
|
39
36
|
var RootLinkTrigger = /* @__PURE__ */ function(_Component) {
|
|
@@ -60,9 +57,10 @@ var RootLinkTrigger = /* @__PURE__ */ function(_Component) {
|
|
|
60
57
|
var SLinkAddon = LinkTrigger.Addon;
|
|
61
58
|
var _this$asProps2 = this.asProps, Children = _this$asProps2.Children, loading = _this$asProps2.loading, styles = _this$asProps2.styles, empty = _this$asProps2.empty, providedColor = _this$asProps2.color, resolveColor = _this$asProps2.resolveColor;
|
|
62
59
|
var color = resolveColor(providedColor);
|
|
63
|
-
return _ref4 = sstyled
|
|
60
|
+
return _ref4 = sstyled(styles), /* @__PURE__ */ React.createElement(SLinkTrigger, _ref4.cn("SLinkTrigger", _objectSpread({}, assignProps({
|
|
64
61
|
"tag": "button",
|
|
65
62
|
"type": "button",
|
|
63
|
+
"tabIndex": loading ? -1 : 0,
|
|
66
64
|
"use:color": color
|
|
67
65
|
}, _ref))), addonTextChildren(Children, LinkTrigger.Text, LinkTrigger.Addon, empty), /* @__PURE__ */ React.createElement(SLinkAddon, _ref4.cn("SLinkAddon", {}), loading ? /* @__PURE__ */ React.createElement(Spin, _ref4.cn("Spin", {
|
|
68
66
|
"size": "xs",
|
|
@@ -77,12 +75,12 @@ _defineProperty(RootLinkTrigger, "style", style);
|
|
|
77
75
|
_defineProperty(RootLinkTrigger, "defaultProps", {
|
|
78
76
|
size: "m"
|
|
79
77
|
});
|
|
80
|
-
_defineProperty(RootLinkTrigger, "enhance", [
|
|
78
|
+
_defineProperty(RootLinkTrigger, "enhance", [resolveColorEnhance()]);
|
|
81
79
|
function Text(props) {
|
|
82
80
|
var _ref2 = arguments[0], _ref5;
|
|
83
81
|
var SText = Box;
|
|
84
82
|
var children = props.children, styles = props.styles, empty = props.empty, placeholder = props.placeholder;
|
|
85
|
-
return _ref5 = sstyled
|
|
83
|
+
return _ref5 = sstyled(styles), /* "use:" prefix was used for backward compatibility (by lsroman) */
|
|
86
84
|
/* @__PURE__ */ React.createElement(SText, _ref5.cn("SText", _objectSpread({}, assignProps({
|
|
87
85
|
"display-placeholder": empty
|
|
88
86
|
}, _ref2))), empty ? placeholder : children);
|
|
@@ -90,7 +88,7 @@ function Text(props) {
|
|
|
90
88
|
function Addon(props) {
|
|
91
89
|
var _ref3 = arguments[0], _ref6;
|
|
92
90
|
var SAddon = Box;
|
|
93
|
-
return _ref6 = sstyled
|
|
91
|
+
return _ref6 = sstyled(props.styles), /* @__PURE__ */ React.createElement(SAddon, _ref6.cn("SAddon", _objectSpread({}, assignProps({}, _ref3))));
|
|
94
92
|
}
|
|
95
93
|
var LinkTrigger = createComponent(RootLinkTrigger, {
|
|
96
94
|
Text,
|
|
@@ -14,7 +14,6 @@ SBaseTrigger {
|
|
|
14
14
|
text-decoration: none;
|
|
15
15
|
-webkit-tap-highlight-color: transparent;
|
|
16
16
|
overflow: visible;
|
|
17
|
-
outline: 0;
|
|
18
17
|
text-align: center;
|
|
19
18
|
vertical-align: middle;
|
|
20
19
|
font-family: inherit;
|
|
@@ -32,16 +31,12 @@ SBaseTrigger {
|
|
|
32
31
|
}
|
|
33
32
|
|
|
34
33
|
&:active,
|
|
35
|
-
&:hover
|
|
36
|
-
&:focus {
|
|
37
|
-
outline: 0;
|
|
34
|
+
&:hover {
|
|
38
35
|
text-decoration: none;
|
|
39
36
|
}
|
|
40
37
|
|
|
41
|
-
|
|
38
|
+
&:focus-visible {
|
|
42
39
|
border: 1px solid var(--intergalactic-border-info-active, #006dca);
|
|
43
|
-
box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));
|
|
44
|
-
z-index: 1;
|
|
45
40
|
}
|
|
46
41
|
|
|
47
42
|
&:hover {
|
|
@@ -170,9 +165,8 @@ SBaseTrigger[state='valid'] {
|
|
|
170
165
|
SBaseTrigger[state='invalid'] {
|
|
171
166
|
border-color: var(--intergalactic-border-critical-active, #d1002f);
|
|
172
167
|
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
box-shadow: var(--intergalactic-keyboard-focus-invalid, 0px 0px 0px 3px rgba(255, 73, 83, 0.5));
|
|
168
|
+
&:focus-visible {
|
|
169
|
+
outline-color: var(--intergalactic-keyboard-focus-invalid-outline, rgba(255, 73, 83, 0.5));
|
|
176
170
|
}
|
|
177
171
|
}
|
|
178
172
|
|
|
@@ -20,10 +20,6 @@ SLinkTrigger {
|
|
|
20
20
|
transition: color 0.15s ease-in-out;
|
|
21
21
|
border: 0;
|
|
22
22
|
|
|
23
|
-
&:focus {
|
|
24
|
-
outline: none;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
23
|
&[active],
|
|
28
24
|
&:hover,
|
|
29
25
|
&:active {
|
|
@@ -58,11 +54,6 @@ SLinkTrigger[disabled] {
|
|
|
58
54
|
pointer-events: none;
|
|
59
55
|
}
|
|
60
56
|
|
|
61
|
-
SLinkTrigger[keyboardFocused] {
|
|
62
|
-
box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));
|
|
63
|
-
z-index: 1;
|
|
64
|
-
}
|
|
65
|
-
|
|
66
57
|
SAddon,
|
|
67
58
|
SLinkAddon {
|
|
68
59
|
display: inline-flex;
|
package/lib/types/index.d.ts
CHANGED
|
@@ -1,16 +1,14 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { UnknownProperties, Intergalactic
|
|
2
|
+
import { UnknownProperties, Intergalactic } from '@semcore/core';
|
|
3
3
|
import { Box, BoxProps } from '@semcore/flex-box';
|
|
4
4
|
import { DotProps } from '@semcore/dot';
|
|
5
5
|
import { NeighborItemProps } from '@semcore/neighbor-location';
|
|
6
|
-
import {
|
|
7
|
-
import { WithAnimatedSizeEnhanceProps } from '@semcore/utils/lib/enhances/animatedSizeEnhance';
|
|
6
|
+
import { WithAnimatedSizeEnhanceProps } from '@semcore/core/lib/utils/enhances/animatedSizeEnhance';
|
|
8
7
|
|
|
9
8
|
/** @deprecated */
|
|
10
9
|
export interface IBaseTriggerProps extends BaseTriggerProps, UnknownProperties {}
|
|
11
10
|
export type BaseTriggerProps = BoxProps &
|
|
12
11
|
NeighborItemProps &
|
|
13
|
-
KeyboardFocusProps &
|
|
14
12
|
WithAnimatedSizeEnhanceProps & {
|
|
15
13
|
/**
|
|
16
14
|
* Trigger size
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@semcore/base-trigger",
|
|
3
3
|
"description": "Semrush BaseTrigger Component",
|
|
4
|
-
"version": "
|
|
4
|
+
"version": "16.0.0-prerelease.0",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/es6/index.js",
|
|
7
7
|
"typings": "lib/types/index.d.ts",
|
|
@@ -14,18 +14,15 @@
|
|
|
14
14
|
"types": "./lib/types/index.d.ts"
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"@semcore/dot": "
|
|
18
|
-
"@semcore/
|
|
19
|
-
"@semcore/
|
|
20
|
-
"@semcore/
|
|
21
|
-
"@semcore/
|
|
22
|
-
"@semcore/
|
|
23
|
-
"@semcore/tooltip": "6.49.4"
|
|
17
|
+
"@semcore/dot": "16.0.0-prerelease.0",
|
|
18
|
+
"@semcore/icon": "16.0.0-prerelease.0",
|
|
19
|
+
"@semcore/spin": "16.0.0-prerelease.0",
|
|
20
|
+
"@semcore/flex-box": "16.0.0-prerelease.0",
|
|
21
|
+
"@semcore/neighbor-location": "16.0.0-prerelease.0",
|
|
22
|
+
"@semcore/tooltip": "16.0.0-prerelease.0"
|
|
24
23
|
},
|
|
25
24
|
"peerDependencies": {
|
|
26
|
-
"@semcore/
|
|
27
|
-
"react": "16.8 - 18",
|
|
28
|
-
"react-dom": "16.8 - 18"
|
|
25
|
+
"@semcore/base-components": "^16.0.0-prerelease.0"
|
|
29
26
|
},
|
|
30
27
|
"repository": {
|
|
31
28
|
"type": "git",
|