@semcore/base-trigger 3.0.8 → 3.0.9
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 +6 -0
- package/lib/cjs/BaseTrigger.js +19 -19
- package/lib/cjs/ButtonTrigger.js +4 -4
- package/lib/cjs/FilterTrigger.js +16 -16
- package/lib/cjs/LinkTrigger.js +14 -14
- package/lib/es6/BaseTrigger.js +19 -19
- package/lib/es6/ButtonTrigger.js +4 -4
- package/lib/es6/FilterTrigger.js +16 -16
- package/lib/es6/LinkTrigger.js +14 -14
- package/package.json +1 -1
- package/src/BaseTrigger.jsx +0 -69
- package/src/ButtonTrigger.jsx +0 -41
- package/src/FilterTrigger.jsx +0 -79
- package/src/LinkTrigger.jsx +0 -69
- package/src/index.d.ts +0 -82
- package/src/index.js +0 -4
- package/src/style/base-trigger.shadow.css +0 -181
- package/src/style/button-trigger.shadow.css +0 -10
- package/src/style/filter-trigger.shadow.css +0 -82
- package/src/style/link-trigger.shadow.css +0 -100
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,12 @@
|
|
|
2
2
|
|
|
3
3
|
CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
|
|
4
4
|
|
|
5
|
+
## [3.0.9] - 2022-07-21
|
|
6
|
+
|
|
7
|
+
### Changed
|
|
8
|
+
|
|
9
|
+
- Version patch update due to children dependencies update (`@semcore/icon` [2.28.0 ~> 2.29.0]).
|
|
10
|
+
|
|
5
11
|
## [3.0.8] - 2022-07-14
|
|
6
12
|
|
|
7
13
|
### Changed
|
package/lib/cjs/BaseTrigger.js
CHANGED
|
@@ -52,28 +52,28 @@ var style = (
|
|
|
52
52
|
/*__reshadow_css_start__*/
|
|
53
53
|
_core.sstyled.insert(
|
|
54
54
|
/*__inner_css_start__*/
|
|
55
|
-
".
|
|
55
|
+
".___SBaseTrigger_8mpya_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;-ms-user-select:none;user-select:none;box-sizing:border-box;padding:0;margin:0;box-shadow:none;outline:none;text-decoration:none;-webkit-tap-highlight-color:transparent;overflow:visible;outline:0;text-align:center;vertical-align:middle;font-family:Inter,sans-serif;cursor:pointer;background:#fff;font-weight:400;border:1px solid #c4c7cf;color:#191b23}.___SBaseTrigger_8mpya_gg_::-moz-focus-inner{border:none;padding:0}.___SBaseTrigger_8mpya_gg_:active,.___SBaseTrigger_8mpya_gg_:focus,.___SBaseTrigger_8mpya_gg_:hover{outline:0;text-decoration:none}.___SBaseTrigger_8mpya_gg_.__keyboardFocused_8mpya_gg_{border:1px solid #008ff8;box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___SBaseTrigger_8mpya_gg_:hover{background-color:rgba(138,142,155,.2)}.___SBaseTrigger_8mpya_gg_:active,.___SBaseTrigger_8mpya_gg_.__active_8mpya_gg_{background-color:rgba(138,142,155,.3)}.___SBaseTrigger_8mpya_gg_.__disabled_8mpya_gg_{opacity:0.3;cursor:default;pointer-events:none}.___SBaseTrigger_8mpya_gg_.__keyboardFocused_8mpya_gg_{z-index:1}.___SInner_8mpya_gg_{display:inline-flex;align-items:center;justify-content:center;height:100%;width:100%}.___SText_8mpya_gg_{display:inline;padding:1px 0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:1.42;flex-grow:1;text-align:left}.___SAddon_8mpya_gg_{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.___SBaseAddon_8mpya_gg_{width:12px;height:12px}.___SBaseTrigger_8mpya_gg_._size_m_8mpya_gg_{min-width:26px;height:28px;border-radius:6px;padding:0 8px;font-size:14px}.___SBaseTrigger_8mpya_gg_._size_m_8mpya_gg_ .___SAddon_8mpya_gg_:not(:only-child):first-child{margin-right:8px}.___SBaseTrigger_8mpya_gg_._size_m_8mpya_gg_ .___SAddon_8mpya_gg_:not(:only-child):last-child{margin-left:8px}.___SBaseTrigger_8mpya_gg_._size_m_8mpya_gg_ .___SAddon_8mpya_gg_:only-child{margin-left:-4px;margin-right:-4px}.___SBaseTrigger_8mpya_gg_._size_l_8mpya_gg_{min-width:32px;height:40px;border-radius:6px;padding:0 12px;font-size:16px}.___SBaseTrigger_8mpya_gg_._size_l_8mpya_gg_ .___SAddon_8mpya_gg_:not(:only-child):first-child{margin-right:8px}.___SBaseTrigger_8mpya_gg_._size_l_8mpya_gg_ .___SAddon_8mpya_gg_:not(:only-child):last-child{margin-left:8px}.___SBaseTrigger_8mpya_gg_._size_l_8mpya_gg_ .___SAddon_8mpya_gg_:only-child{margin-left:-4px;margin-right:-4px}.___SBaseTrigger_8mpya_gg_._neighborLocation_right_8mpya_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SBaseTrigger_8mpya_gg_._neighborLocation_both_8mpya_gg_{border-radius:0;margin-left:-1px}.___SBaseTrigger_8mpya_gg_._neighborLocation_left_8mpya_gg_{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}.___SText_8mpya_gg_.__placeholder_8mpya_gg_{color:#a9abb6}.___SBaseTrigger_8mpya_gg_._state_normal_8mpya_gg_{border-color:#c4c7cf}.___SBaseTrigger_8mpya_gg_._state_valid_8mpya_gg_{border-color:#59ddaa}.___SBaseTrigger_8mpya_gg_._state_invalid_8mpya_gg_{border-color:#ffaeb5}.___SBaseTrigger_8mpya_gg_._state_invalid_8mpya_gg_.__keyboardFocused_8mpya_gg_{border-color:#ff642d;box-shadow:0 0 0 3px rgba(255,100,45,.3)}"
|
|
56
56
|
/*__inner_css_end__*/
|
|
57
|
-
, "
|
|
57
|
+
, "8mpya_gg_")
|
|
58
58
|
/*__reshadow_css_end__*/
|
|
59
59
|
, {
|
|
60
|
-
"__SBaseTrigger": "
|
|
61
|
-
"_keyboardFocused": "
|
|
62
|
-
"_active": "
|
|
63
|
-
"_disabled": "
|
|
64
|
-
"__SInner": "
|
|
65
|
-
"__SText": "
|
|
66
|
-
"__SAddon": "
|
|
67
|
-
"__SBaseAddon": "
|
|
68
|
-
"_size_m": "
|
|
69
|
-
"_size_l": "
|
|
70
|
-
"_neighborLocation_right": "
|
|
71
|
-
"_neighborLocation_both": "
|
|
72
|
-
"_neighborLocation_left": "
|
|
73
|
-
"_placeholder": "
|
|
74
|
-
"_state_normal": "
|
|
75
|
-
"_state_valid": "
|
|
76
|
-
"_state_invalid": "
|
|
60
|
+
"__SBaseTrigger": "___SBaseTrigger_8mpya_gg_",
|
|
61
|
+
"_keyboardFocused": "__keyboardFocused_8mpya_gg_",
|
|
62
|
+
"_active": "__active_8mpya_gg_",
|
|
63
|
+
"_disabled": "__disabled_8mpya_gg_",
|
|
64
|
+
"__SInner": "___SInner_8mpya_gg_",
|
|
65
|
+
"__SText": "___SText_8mpya_gg_",
|
|
66
|
+
"__SAddon": "___SAddon_8mpya_gg_",
|
|
67
|
+
"__SBaseAddon": "___SBaseAddon_8mpya_gg_",
|
|
68
|
+
"_size_m": "_size_m_8mpya_gg_",
|
|
69
|
+
"_size_l": "_size_l_8mpya_gg_",
|
|
70
|
+
"_neighborLocation_right": "_neighborLocation_right_8mpya_gg_",
|
|
71
|
+
"_neighborLocation_both": "_neighborLocation_both_8mpya_gg_",
|
|
72
|
+
"_neighborLocation_left": "_neighborLocation_left_8mpya_gg_",
|
|
73
|
+
"_placeholder": "__placeholder_8mpya_gg_",
|
|
74
|
+
"_state_normal": "_state_normal_8mpya_gg_",
|
|
75
|
+
"_state_valid": "_state_valid_8mpya_gg_",
|
|
76
|
+
"_state_invalid": "_state_invalid_8mpya_gg_"
|
|
77
77
|
});
|
|
78
78
|
|
|
79
79
|
var RootBaseTrigger = /*#__PURE__*/function (_Component) {
|
package/lib/cjs/ButtonTrigger.js
CHANGED
|
@@ -46,13 +46,13 @@ var style = (
|
|
|
46
46
|
/*__reshadow_css_start__*/
|
|
47
47
|
_core.sstyled.insert(
|
|
48
48
|
/*__inner_css_start__*/
|
|
49
|
-
".
|
|
49
|
+
".___SButtonAddon_1n1r7_gg_{width:12px;height:12px}.___SButtonTriggerSpin_1n1r7_gg_{fill:#6c6e79}"
|
|
50
50
|
/*__inner_css_end__*/
|
|
51
|
-
, "
|
|
51
|
+
, "1n1r7_gg_")
|
|
52
52
|
/*__reshadow_css_end__*/
|
|
53
53
|
, {
|
|
54
|
-
"__SButtonAddon": "
|
|
55
|
-
"__SButtonTriggerSpin": "
|
|
54
|
+
"__SButtonAddon": "___SButtonAddon_1n1r7_gg_",
|
|
55
|
+
"__SButtonTriggerSpin": "___SButtonTriggerSpin_1n1r7_gg_"
|
|
56
56
|
});
|
|
57
57
|
|
|
58
58
|
var RootButtonTrigger = /*#__PURE__*/function (_Component) {
|
package/lib/cjs/FilterTrigger.js
CHANGED
|
@@ -60,25 +60,25 @@ var style = (
|
|
|
60
60
|
/*__reshadow_css_start__*/
|
|
61
61
|
_core.sstyled.insert(
|
|
62
62
|
/*__inner_css_start__*/
|
|
63
|
-
".
|
|
63
|
+
".___SButtonTrigger_18fyi_gg_{border:1px solid #c4c7cf;background:#fff;color:#191b23}.___SButtonTrigger_18fyi_gg_::-moz-focus-inner{border:none;padding:0}.___SButtonTrigger_18fyi_gg_:active,.___SButtonTrigger_18fyi_gg_:focus,.___SButtonTrigger_18fyi_gg_:hover{outline:0;text-decoration:none}.___SButtonTrigger_18fyi_gg_:active,.___SButtonTrigger_18fyi_gg_:hover,.___SButtonTrigger_18fyi_gg_.__active_18fyi_gg_{background-color:rgba(138,142,155,.2)}.___SButtonTrigger_18fyi_gg_._size_m_18fyi_gg_{min-width:26px;height:28px;border-radius:6px;font-size:14px}.___SButtonTrigger_18fyi_gg_._size_l_18fyi_gg_{min-width:32px;height:40px;border-radius:6px;font-size:16px}.___SText_18fyi_gg_.__placeholder_18fyi_gg_{color:#a9abb6}.___SButtonTrigger_18fyi_gg_._state_normal_18fyi_gg_{border-color:#c4c7cf}.___SButtonTrigger_18fyi_gg_._state_valid_18fyi_gg_{border-color:#59ddaa}.___SButtonTrigger_18fyi_gg_._state_invalid_18fyi_gg_{border-color:#ffaeb5}.___SFilterTrigger_18fyi_gg_.__selected_18fyi_gg_{border-color:#008ff8;background-color:rgba(0,143,248,.2);color:#191b23}.___SFilterTrigger_18fyi_gg_.__selected_18fyi_gg_:hover,.___SFilterTrigger_18fyi_gg_.__selected_18fyi_gg_.__active_18fyi_gg_{background:rgba(0,143,248,.3)}.___SWrapper_18fyi_gg_{display:inline-flex}.___SWrapper_18fyi_gg_:focus{outline:none}.___SWrapper_18fyi_gg_.__keyboardFocused_18fyi_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___SCounter_18fyi_gg_{background-color:#008ff8}"
|
|
64
64
|
/*__inner_css_end__*/
|
|
65
|
-
, "
|
|
65
|
+
, "18fyi_gg_")
|
|
66
66
|
/*__reshadow_css_end__*/
|
|
67
67
|
, {
|
|
68
|
-
"__SButtonTrigger": "
|
|
69
|
-
"_active": "
|
|
70
|
-
"_size_m": "
|
|
71
|
-
"_size_l": "
|
|
72
|
-
"__SText": "
|
|
73
|
-
"_placeholder": "
|
|
74
|
-
"_state_normal": "
|
|
75
|
-
"_state_valid": "
|
|
76
|
-
"_state_invalid": "
|
|
77
|
-
"__SFilterTrigger": "
|
|
78
|
-
"_selected": "
|
|
79
|
-
"__SWrapper": "
|
|
80
|
-
"_keyboardFocused": "
|
|
81
|
-
"__SCounter": "
|
|
68
|
+
"__SButtonTrigger": "___SButtonTrigger_18fyi_gg_",
|
|
69
|
+
"_active": "__active_18fyi_gg_",
|
|
70
|
+
"_size_m": "_size_m_18fyi_gg_",
|
|
71
|
+
"_size_l": "_size_l_18fyi_gg_",
|
|
72
|
+
"__SText": "___SText_18fyi_gg_",
|
|
73
|
+
"_placeholder": "__placeholder_18fyi_gg_",
|
|
74
|
+
"_state_normal": "_state_normal_18fyi_gg_",
|
|
75
|
+
"_state_valid": "_state_valid_18fyi_gg_",
|
|
76
|
+
"_state_invalid": "_state_invalid_18fyi_gg_",
|
|
77
|
+
"__SFilterTrigger": "___SFilterTrigger_18fyi_gg_",
|
|
78
|
+
"_selected": "__selected_18fyi_gg_",
|
|
79
|
+
"__SWrapper": "___SWrapper_18fyi_gg_",
|
|
80
|
+
"_keyboardFocused": "__keyboardFocused_18fyi_gg_",
|
|
81
|
+
"__SCounter": "___SCounter_18fyi_gg_"
|
|
82
82
|
});
|
|
83
83
|
|
|
84
84
|
var RootFilterTrigger = /*#__PURE__*/function (_Component) {
|
package/lib/cjs/LinkTrigger.js
CHANGED
|
@@ -54,23 +54,23 @@ var style = (
|
|
|
54
54
|
/*__reshadow_css_start__*/
|
|
55
55
|
_core.sstyled.insert(
|
|
56
56
|
/*__inner_css_start__*/
|
|
57
|
-
".
|
|
57
|
+
".___SLinkTrigger_1q28j_gg_{display:inline-flex;align-items:center;line-height:normal;position:relative;touch-action:manipulation;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;box-sizing:border-box;padding:0;margin:0;outline:none;text-decoration:none;-webkit-tap-highlight-color:transparent;overflow:visible;outline:0;vertical-align:middle;font-family:Inter,sans-serif;cursor:pointer;color:#006dca;background:none;transition:color .15s ease-in-out}.___SLinkTrigger_1q28j_gg_:active,.___SLinkTrigger_1q28j_gg_:hover,.___SLinkTrigger_1q28j_gg_.__active_1q28j_gg_{color:#044792}.___SLinkTrigger_1q28j_gg_:active .___SText_1q28j_gg_,.___SLinkTrigger_1q28j_gg_:hover .___SText_1q28j_gg_,.___SLinkTrigger_1q28j_gg_.__active_1q28j_gg_ .___SText_1q28j_gg_{border-color:currentColor}.___SLinkTrigger_1q28j_gg_ .___SText_1q28j_gg_{border-bottom-width:1px;border-bottom-style:solid;border-color:transparent;transition:border-bottom-color .15s ease-in-out;line-height:1.42}.___SLinkTrigger_1q28j_gg_.__color_1q28j_gg_{color:var(--color_1q28j)}.___SLinkTrigger_1q28j_gg_.__color_1q28j_gg_:hover{color:var(--color-hover_1q28j)}.___SLinkTrigger_1q28j_gg_.__disabled_1q28j_gg_{opacity:0.3;cursor:default;pointer-events:none}.___SLinkTrigger_1q28j_gg_.__keyboardFocused_1q28j_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2);z-index:1}.___SAddon_1q28j_gg_,.___SLinkAddon_1q28j_gg_{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.___SAddon_1q28j_gg_:not(:only-child):first-child,.___SLinkAddon_1q28j_gg_:not(:only-child):first-child{margin-right:4px}.___SAddon_1q28j_gg_:not(:only-child):last-child,.___SLinkAddon_1q28j_gg_:not(:only-child):last-child{margin-left:4px}.___SLinkAddon_1q28j_gg_{width:16px;height:16px}.___SLinkTrigger_1q28j_gg_._size_m_1q28j_gg_{font-size:14px}.___SLinkTrigger_1q28j_gg_._size_l_1q28j_gg_{font-size:16px}@media (prefers-reduced-motion){.___SLinkTrigger_1q28j_gg_{transition:none}.___SLinkTrigger_1q28j_gg_ .___SText_1q28j_gg_{transition:none}}"
|
|
58
58
|
/*__inner_css_end__*/
|
|
59
|
-
, "
|
|
59
|
+
, "1q28j_gg_")
|
|
60
60
|
/*__reshadow_css_end__*/
|
|
61
61
|
, {
|
|
62
|
-
"__SLinkTrigger": "
|
|
63
|
-
"_active": "
|
|
64
|
-
"__SText": "
|
|
65
|
-
"_color": "
|
|
66
|
-
"--color": "--
|
|
67
|
-
"--color-hover": "--color-
|
|
68
|
-
"_disabled": "
|
|
69
|
-
"_keyboardFocused": "
|
|
70
|
-
"__SAddon": "
|
|
71
|
-
"__SLinkAddon": "
|
|
72
|
-
"_size_m": "
|
|
73
|
-
"_size_l": "
|
|
62
|
+
"__SLinkTrigger": "___SLinkTrigger_1q28j_gg_",
|
|
63
|
+
"_active": "__active_1q28j_gg_",
|
|
64
|
+
"__SText": "___SText_1q28j_gg_",
|
|
65
|
+
"_color": "__color_1q28j_gg_",
|
|
66
|
+
"--color": "--color_1q28j",
|
|
67
|
+
"--color-hover": "--color-hover_1q28j",
|
|
68
|
+
"_disabled": "__disabled_1q28j_gg_",
|
|
69
|
+
"_keyboardFocused": "__keyboardFocused_1q28j_gg_",
|
|
70
|
+
"__SAddon": "___SAddon_1q28j_gg_",
|
|
71
|
+
"__SLinkAddon": "___SLinkAddon_1q28j_gg_",
|
|
72
|
+
"_size_m": "_size_m_1q28j_gg_",
|
|
73
|
+
"_size_l": "_size_l_1q28j_gg_"
|
|
74
74
|
});
|
|
75
75
|
|
|
76
76
|
var RootLinkTrigger = /*#__PURE__*/function (_Component) {
|
package/lib/es6/BaseTrigger.js
CHANGED
|
@@ -30,28 +30,28 @@ var style = (
|
|
|
30
30
|
/*__reshadow_css_start__*/
|
|
31
31
|
_sstyled.insert(
|
|
32
32
|
/*__inner_css_start__*/
|
|
33
|
-
".
|
|
33
|
+
".___SBaseTrigger_8mpya_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;-ms-user-select:none;user-select:none;box-sizing:border-box;padding:0;margin:0;box-shadow:none;outline:none;text-decoration:none;-webkit-tap-highlight-color:transparent;overflow:visible;outline:0;text-align:center;vertical-align:middle;font-family:Inter,sans-serif;cursor:pointer;background:#fff;font-weight:400;border:1px solid #c4c7cf;color:#191b23}.___SBaseTrigger_8mpya_gg_::-moz-focus-inner{border:none;padding:0}.___SBaseTrigger_8mpya_gg_:active,.___SBaseTrigger_8mpya_gg_:focus,.___SBaseTrigger_8mpya_gg_:hover{outline:0;text-decoration:none}.___SBaseTrigger_8mpya_gg_.__keyboardFocused_8mpya_gg_{border:1px solid #008ff8;box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___SBaseTrigger_8mpya_gg_:hover{background-color:rgba(138,142,155,.2)}.___SBaseTrigger_8mpya_gg_:active,.___SBaseTrigger_8mpya_gg_.__active_8mpya_gg_{background-color:rgba(138,142,155,.3)}.___SBaseTrigger_8mpya_gg_.__disabled_8mpya_gg_{opacity:0.3;cursor:default;pointer-events:none}.___SBaseTrigger_8mpya_gg_.__keyboardFocused_8mpya_gg_{z-index:1}.___SInner_8mpya_gg_{display:inline-flex;align-items:center;justify-content:center;height:100%;width:100%}.___SText_8mpya_gg_{display:inline;padding:1px 0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:1.42;flex-grow:1;text-align:left}.___SAddon_8mpya_gg_{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.___SBaseAddon_8mpya_gg_{width:12px;height:12px}.___SBaseTrigger_8mpya_gg_._size_m_8mpya_gg_{min-width:26px;height:28px;border-radius:6px;padding:0 8px;font-size:14px}.___SBaseTrigger_8mpya_gg_._size_m_8mpya_gg_ .___SAddon_8mpya_gg_:not(:only-child):first-child{margin-right:8px}.___SBaseTrigger_8mpya_gg_._size_m_8mpya_gg_ .___SAddon_8mpya_gg_:not(:only-child):last-child{margin-left:8px}.___SBaseTrigger_8mpya_gg_._size_m_8mpya_gg_ .___SAddon_8mpya_gg_:only-child{margin-left:-4px;margin-right:-4px}.___SBaseTrigger_8mpya_gg_._size_l_8mpya_gg_{min-width:32px;height:40px;border-radius:6px;padding:0 12px;font-size:16px}.___SBaseTrigger_8mpya_gg_._size_l_8mpya_gg_ .___SAddon_8mpya_gg_:not(:only-child):first-child{margin-right:8px}.___SBaseTrigger_8mpya_gg_._size_l_8mpya_gg_ .___SAddon_8mpya_gg_:not(:only-child):last-child{margin-left:8px}.___SBaseTrigger_8mpya_gg_._size_l_8mpya_gg_ .___SAddon_8mpya_gg_:only-child{margin-left:-4px;margin-right:-4px}.___SBaseTrigger_8mpya_gg_._neighborLocation_right_8mpya_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SBaseTrigger_8mpya_gg_._neighborLocation_both_8mpya_gg_{border-radius:0;margin-left:-1px}.___SBaseTrigger_8mpya_gg_._neighborLocation_left_8mpya_gg_{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}.___SText_8mpya_gg_.__placeholder_8mpya_gg_{color:#a9abb6}.___SBaseTrigger_8mpya_gg_._state_normal_8mpya_gg_{border-color:#c4c7cf}.___SBaseTrigger_8mpya_gg_._state_valid_8mpya_gg_{border-color:#59ddaa}.___SBaseTrigger_8mpya_gg_._state_invalid_8mpya_gg_{border-color:#ffaeb5}.___SBaseTrigger_8mpya_gg_._state_invalid_8mpya_gg_.__keyboardFocused_8mpya_gg_{border-color:#ff642d;box-shadow:0 0 0 3px rgba(255,100,45,.3)}"
|
|
34
34
|
/*__inner_css_end__*/
|
|
35
|
-
, "
|
|
35
|
+
, "8mpya_gg_")
|
|
36
36
|
/*__reshadow_css_end__*/
|
|
37
37
|
, {
|
|
38
|
-
"__SBaseTrigger": "
|
|
39
|
-
"_keyboardFocused": "
|
|
40
|
-
"_active": "
|
|
41
|
-
"_disabled": "
|
|
42
|
-
"__SInner": "
|
|
43
|
-
"__SText": "
|
|
44
|
-
"__SAddon": "
|
|
45
|
-
"__SBaseAddon": "
|
|
46
|
-
"_size_m": "
|
|
47
|
-
"_size_l": "
|
|
48
|
-
"_neighborLocation_right": "
|
|
49
|
-
"_neighborLocation_both": "
|
|
50
|
-
"_neighborLocation_left": "
|
|
51
|
-
"_placeholder": "
|
|
52
|
-
"_state_normal": "
|
|
53
|
-
"_state_valid": "
|
|
54
|
-
"_state_invalid": "
|
|
38
|
+
"__SBaseTrigger": "___SBaseTrigger_8mpya_gg_",
|
|
39
|
+
"_keyboardFocused": "__keyboardFocused_8mpya_gg_",
|
|
40
|
+
"_active": "__active_8mpya_gg_",
|
|
41
|
+
"_disabled": "__disabled_8mpya_gg_",
|
|
42
|
+
"__SInner": "___SInner_8mpya_gg_",
|
|
43
|
+
"__SText": "___SText_8mpya_gg_",
|
|
44
|
+
"__SAddon": "___SAddon_8mpya_gg_",
|
|
45
|
+
"__SBaseAddon": "___SBaseAddon_8mpya_gg_",
|
|
46
|
+
"_size_m": "_size_m_8mpya_gg_",
|
|
47
|
+
"_size_l": "_size_l_8mpya_gg_",
|
|
48
|
+
"_neighborLocation_right": "_neighborLocation_right_8mpya_gg_",
|
|
49
|
+
"_neighborLocation_both": "_neighborLocation_both_8mpya_gg_",
|
|
50
|
+
"_neighborLocation_left": "_neighborLocation_left_8mpya_gg_",
|
|
51
|
+
"_placeholder": "__placeholder_8mpya_gg_",
|
|
52
|
+
"_state_normal": "_state_normal_8mpya_gg_",
|
|
53
|
+
"_state_valid": "_state_valid_8mpya_gg_",
|
|
54
|
+
"_state_invalid": "_state_invalid_8mpya_gg_"
|
|
55
55
|
});
|
|
56
56
|
|
|
57
57
|
var RootBaseTrigger = /*#__PURE__*/function (_Component) {
|
package/lib/es6/ButtonTrigger.js
CHANGED
|
@@ -23,13 +23,13 @@ var style = (
|
|
|
23
23
|
/*__reshadow_css_start__*/
|
|
24
24
|
_sstyled.insert(
|
|
25
25
|
/*__inner_css_start__*/
|
|
26
|
-
".
|
|
26
|
+
".___SButtonAddon_1n1r7_gg_{width:12px;height:12px}.___SButtonTriggerSpin_1n1r7_gg_{fill:#6c6e79}"
|
|
27
27
|
/*__inner_css_end__*/
|
|
28
|
-
, "
|
|
28
|
+
, "1n1r7_gg_")
|
|
29
29
|
/*__reshadow_css_end__*/
|
|
30
30
|
, {
|
|
31
|
-
"__SButtonAddon": "
|
|
32
|
-
"__SButtonTriggerSpin": "
|
|
31
|
+
"__SButtonAddon": "___SButtonAddon_1n1r7_gg_",
|
|
32
|
+
"__SButtonTriggerSpin": "___SButtonTriggerSpin_1n1r7_gg_"
|
|
33
33
|
});
|
|
34
34
|
|
|
35
35
|
var RootButtonTrigger = /*#__PURE__*/function (_Component) {
|
package/lib/es6/FilterTrigger.js
CHANGED
|
@@ -33,25 +33,25 @@ var style = (
|
|
|
33
33
|
/*__reshadow_css_start__*/
|
|
34
34
|
_sstyled.insert(
|
|
35
35
|
/*__inner_css_start__*/
|
|
36
|
-
".
|
|
36
|
+
".___SButtonTrigger_18fyi_gg_{border:1px solid #c4c7cf;background:#fff;color:#191b23}.___SButtonTrigger_18fyi_gg_::-moz-focus-inner{border:none;padding:0}.___SButtonTrigger_18fyi_gg_:active,.___SButtonTrigger_18fyi_gg_:focus,.___SButtonTrigger_18fyi_gg_:hover{outline:0;text-decoration:none}.___SButtonTrigger_18fyi_gg_:active,.___SButtonTrigger_18fyi_gg_:hover,.___SButtonTrigger_18fyi_gg_.__active_18fyi_gg_{background-color:rgba(138,142,155,.2)}.___SButtonTrigger_18fyi_gg_._size_m_18fyi_gg_{min-width:26px;height:28px;border-radius:6px;font-size:14px}.___SButtonTrigger_18fyi_gg_._size_l_18fyi_gg_{min-width:32px;height:40px;border-radius:6px;font-size:16px}.___SText_18fyi_gg_.__placeholder_18fyi_gg_{color:#a9abb6}.___SButtonTrigger_18fyi_gg_._state_normal_18fyi_gg_{border-color:#c4c7cf}.___SButtonTrigger_18fyi_gg_._state_valid_18fyi_gg_{border-color:#59ddaa}.___SButtonTrigger_18fyi_gg_._state_invalid_18fyi_gg_{border-color:#ffaeb5}.___SFilterTrigger_18fyi_gg_.__selected_18fyi_gg_{border-color:#008ff8;background-color:rgba(0,143,248,.2);color:#191b23}.___SFilterTrigger_18fyi_gg_.__selected_18fyi_gg_:hover,.___SFilterTrigger_18fyi_gg_.__selected_18fyi_gg_.__active_18fyi_gg_{background:rgba(0,143,248,.3)}.___SWrapper_18fyi_gg_{display:inline-flex}.___SWrapper_18fyi_gg_:focus{outline:none}.___SWrapper_18fyi_gg_.__keyboardFocused_18fyi_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___SCounter_18fyi_gg_{background-color:#008ff8}"
|
|
37
37
|
/*__inner_css_end__*/
|
|
38
|
-
, "
|
|
38
|
+
, "18fyi_gg_")
|
|
39
39
|
/*__reshadow_css_end__*/
|
|
40
40
|
, {
|
|
41
|
-
"__SButtonTrigger": "
|
|
42
|
-
"_active": "
|
|
43
|
-
"_size_m": "
|
|
44
|
-
"_size_l": "
|
|
45
|
-
"__SText": "
|
|
46
|
-
"_placeholder": "
|
|
47
|
-
"_state_normal": "
|
|
48
|
-
"_state_valid": "
|
|
49
|
-
"_state_invalid": "
|
|
50
|
-
"__SFilterTrigger": "
|
|
51
|
-
"_selected": "
|
|
52
|
-
"__SWrapper": "
|
|
53
|
-
"_keyboardFocused": "
|
|
54
|
-
"__SCounter": "
|
|
41
|
+
"__SButtonTrigger": "___SButtonTrigger_18fyi_gg_",
|
|
42
|
+
"_active": "__active_18fyi_gg_",
|
|
43
|
+
"_size_m": "_size_m_18fyi_gg_",
|
|
44
|
+
"_size_l": "_size_l_18fyi_gg_",
|
|
45
|
+
"__SText": "___SText_18fyi_gg_",
|
|
46
|
+
"_placeholder": "__placeholder_18fyi_gg_",
|
|
47
|
+
"_state_normal": "_state_normal_18fyi_gg_",
|
|
48
|
+
"_state_valid": "_state_valid_18fyi_gg_",
|
|
49
|
+
"_state_invalid": "_state_invalid_18fyi_gg_",
|
|
50
|
+
"__SFilterTrigger": "___SFilterTrigger_18fyi_gg_",
|
|
51
|
+
"_selected": "__selected_18fyi_gg_",
|
|
52
|
+
"__SWrapper": "___SWrapper_18fyi_gg_",
|
|
53
|
+
"_keyboardFocused": "__keyboardFocused_18fyi_gg_",
|
|
54
|
+
"__SCounter": "___SCounter_18fyi_gg_"
|
|
55
55
|
});
|
|
56
56
|
|
|
57
57
|
var RootFilterTrigger = /*#__PURE__*/function (_Component) {
|
package/lib/es6/LinkTrigger.js
CHANGED
|
@@ -31,23 +31,23 @@ var style = (
|
|
|
31
31
|
/*__reshadow_css_start__*/
|
|
32
32
|
_sstyled.insert(
|
|
33
33
|
/*__inner_css_start__*/
|
|
34
|
-
".
|
|
34
|
+
".___SLinkTrigger_1q28j_gg_{display:inline-flex;align-items:center;line-height:normal;position:relative;touch-action:manipulation;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;box-sizing:border-box;padding:0;margin:0;outline:none;text-decoration:none;-webkit-tap-highlight-color:transparent;overflow:visible;outline:0;vertical-align:middle;font-family:Inter,sans-serif;cursor:pointer;color:#006dca;background:none;transition:color .15s ease-in-out}.___SLinkTrigger_1q28j_gg_:active,.___SLinkTrigger_1q28j_gg_:hover,.___SLinkTrigger_1q28j_gg_.__active_1q28j_gg_{color:#044792}.___SLinkTrigger_1q28j_gg_:active .___SText_1q28j_gg_,.___SLinkTrigger_1q28j_gg_:hover .___SText_1q28j_gg_,.___SLinkTrigger_1q28j_gg_.__active_1q28j_gg_ .___SText_1q28j_gg_{border-color:currentColor}.___SLinkTrigger_1q28j_gg_ .___SText_1q28j_gg_{border-bottom-width:1px;border-bottom-style:solid;border-color:transparent;transition:border-bottom-color .15s ease-in-out;line-height:1.42}.___SLinkTrigger_1q28j_gg_.__color_1q28j_gg_{color:var(--color_1q28j)}.___SLinkTrigger_1q28j_gg_.__color_1q28j_gg_:hover{color:var(--color-hover_1q28j)}.___SLinkTrigger_1q28j_gg_.__disabled_1q28j_gg_{opacity:0.3;cursor:default;pointer-events:none}.___SLinkTrigger_1q28j_gg_.__keyboardFocused_1q28j_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2);z-index:1}.___SAddon_1q28j_gg_,.___SLinkAddon_1q28j_gg_{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.___SAddon_1q28j_gg_:not(:only-child):first-child,.___SLinkAddon_1q28j_gg_:not(:only-child):first-child{margin-right:4px}.___SAddon_1q28j_gg_:not(:only-child):last-child,.___SLinkAddon_1q28j_gg_:not(:only-child):last-child{margin-left:4px}.___SLinkAddon_1q28j_gg_{width:16px;height:16px}.___SLinkTrigger_1q28j_gg_._size_m_1q28j_gg_{font-size:14px}.___SLinkTrigger_1q28j_gg_._size_l_1q28j_gg_{font-size:16px}@media (prefers-reduced-motion){.___SLinkTrigger_1q28j_gg_{transition:none}.___SLinkTrigger_1q28j_gg_ .___SText_1q28j_gg_{transition:none}}"
|
|
35
35
|
/*__inner_css_end__*/
|
|
36
|
-
, "
|
|
36
|
+
, "1q28j_gg_")
|
|
37
37
|
/*__reshadow_css_end__*/
|
|
38
38
|
, {
|
|
39
|
-
"__SLinkTrigger": "
|
|
40
|
-
"_active": "
|
|
41
|
-
"__SText": "
|
|
42
|
-
"_color": "
|
|
43
|
-
"--color": "--
|
|
44
|
-
"--color-hover": "--color-
|
|
45
|
-
"_disabled": "
|
|
46
|
-
"_keyboardFocused": "
|
|
47
|
-
"__SAddon": "
|
|
48
|
-
"__SLinkAddon": "
|
|
49
|
-
"_size_m": "
|
|
50
|
-
"_size_l": "
|
|
39
|
+
"__SLinkTrigger": "___SLinkTrigger_1q28j_gg_",
|
|
40
|
+
"_active": "__active_1q28j_gg_",
|
|
41
|
+
"__SText": "___SText_1q28j_gg_",
|
|
42
|
+
"_color": "__color_1q28j_gg_",
|
|
43
|
+
"--color": "--color_1q28j",
|
|
44
|
+
"--color-hover": "--color-hover_1q28j",
|
|
45
|
+
"_disabled": "__disabled_1q28j_gg_",
|
|
46
|
+
"_keyboardFocused": "__keyboardFocused_1q28j_gg_",
|
|
47
|
+
"__SAddon": "___SAddon_1q28j_gg_",
|
|
48
|
+
"__SLinkAddon": "___SLinkAddon_1q28j_gg_",
|
|
49
|
+
"_size_m": "_size_m_1q28j_gg_",
|
|
50
|
+
"_size_l": "_size_l_1q28j_gg_"
|
|
51
51
|
});
|
|
52
52
|
|
|
53
53
|
var RootLinkTrigger = /*#__PURE__*/function (_Component) {
|
package/package.json
CHANGED
package/src/BaseTrigger.jsx
DELETED
|
@@ -1,69 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import createComponent, { Component, Root, sstyled } from '@semcore/core';
|
|
3
|
-
import { Box } from '@semcore/flex-box';
|
|
4
|
-
import { neighborLocationEnhance } from '@semcore/neighbor-location';
|
|
5
|
-
import keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
|
|
6
|
-
import addonTextChildren from '@semcore/utils/lib/addonTextChildren';
|
|
7
|
-
import logger from '@semcore/utils/lib/logger';
|
|
8
|
-
|
|
9
|
-
import style from './style/base-trigger.shadow.css';
|
|
10
|
-
|
|
11
|
-
class RootBaseTrigger extends Component {
|
|
12
|
-
static displayName = 'BaseTrigger';
|
|
13
|
-
static style = style;
|
|
14
|
-
static defaultProps = {
|
|
15
|
-
size: 'm',
|
|
16
|
-
};
|
|
17
|
-
static enhance = [keyboardFocusEnhance(), neighborLocationEnhance()];
|
|
18
|
-
|
|
19
|
-
getTextProps() {
|
|
20
|
-
const { placeholder, empty } = this.asProps;
|
|
21
|
-
return {
|
|
22
|
-
placeholder,
|
|
23
|
-
empty,
|
|
24
|
-
};
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
render() {
|
|
28
|
-
const SBaseTrigger = Root;
|
|
29
|
-
const SInner = 'div';
|
|
30
|
-
const { Children, styles, theme } = this.asProps;
|
|
31
|
-
|
|
32
|
-
logger.warn(
|
|
33
|
-
theme !== undefined,
|
|
34
|
-
"The 'theme' property is deprecated, use 'state'",
|
|
35
|
-
this.asProps['data-ui-name'] || BaseTrigger.displayName,
|
|
36
|
-
);
|
|
37
|
-
|
|
38
|
-
// TODO: add aria
|
|
39
|
-
return sstyled(styles)(
|
|
40
|
-
<SBaseTrigger render={Box} state={theme}>
|
|
41
|
-
<SInner>{addonTextChildren(Children, BaseTrigger.Text, BaseTrigger.Addon)}</SInner>
|
|
42
|
-
</SBaseTrigger>,
|
|
43
|
-
);
|
|
44
|
-
}
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
function Text(props) {
|
|
48
|
-
const SText = Root;
|
|
49
|
-
const { children, styles, empty, placeholder } = props;
|
|
50
|
-
|
|
51
|
-
return sstyled(styles)(
|
|
52
|
-
/* "use:" prefix was used for backward compatibility (by lsroman) */
|
|
53
|
-
<SText render={Box} use:placeholder={empty}>
|
|
54
|
-
{empty ? placeholder : children}
|
|
55
|
-
</SText>,
|
|
56
|
-
);
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
function Addon(props) {
|
|
60
|
-
const SAddon = Root;
|
|
61
|
-
return sstyled(props.styles)(<SAddon render={Box} />);
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
const BaseTrigger = createComponent(RootBaseTrigger, {
|
|
65
|
-
Text,
|
|
66
|
-
Addon,
|
|
67
|
-
});
|
|
68
|
-
|
|
69
|
-
export default BaseTrigger;
|
package/src/ButtonTrigger.jsx
DELETED
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import createComponent, { Component, Root, sstyled } from '@semcore/core';
|
|
3
|
-
import addonTextChildren from '@semcore/utils/lib/addonTextChildren';
|
|
4
|
-
import ChevronDown from '@semcore/icon/ChevronDown/m';
|
|
5
|
-
import BaseTrigger from './BaseTrigger';
|
|
6
|
-
import Spin from '@semcore/spin';
|
|
7
|
-
|
|
8
|
-
import style from './style/button-trigger.shadow.css';
|
|
9
|
-
|
|
10
|
-
class RootButtonTrigger extends Component {
|
|
11
|
-
static displayName = 'ButtonTrigger';
|
|
12
|
-
static style = style;
|
|
13
|
-
|
|
14
|
-
render() {
|
|
15
|
-
const SButtonAddon = ButtonTrigger.Addon;
|
|
16
|
-
const SButtonTriggerSpin = Spin;
|
|
17
|
-
const { Children, styles, loading } = this.asProps;
|
|
18
|
-
|
|
19
|
-
return sstyled(styles)(
|
|
20
|
-
<Root render={BaseTrigger}>
|
|
21
|
-
{addonTextChildren(Children, ButtonTrigger.Text, ButtonTrigger.Addon)}
|
|
22
|
-
<SButtonAddon>
|
|
23
|
-
{loading ? <SButtonTriggerSpin size="xs" theme={false} /> : <ChevronDown />}
|
|
24
|
-
</SButtonAddon>
|
|
25
|
-
</Root>,
|
|
26
|
-
);
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
const ButtonTrigger = createComponent(
|
|
31
|
-
RootButtonTrigger,
|
|
32
|
-
{
|
|
33
|
-
Text: BaseTrigger.Text,
|
|
34
|
-
Addon: BaseTrigger.Addon,
|
|
35
|
-
},
|
|
36
|
-
{
|
|
37
|
-
parent: BaseTrigger,
|
|
38
|
-
},
|
|
39
|
-
);
|
|
40
|
-
|
|
41
|
-
export default ButtonTrigger;
|
package/src/FilterTrigger.jsx
DELETED
|
@@ -1,79 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import createComponent, { Component, Root, sstyled } from '@semcore/core';
|
|
3
|
-
import BaseTrigger from './BaseTrigger';
|
|
4
|
-
import { Box } from '@semcore/flex-box';
|
|
5
|
-
import NeighborLocation from '@semcore/neighbor-location';
|
|
6
|
-
import Dot from '@semcore/dot';
|
|
7
|
-
import Close from '@semcore/icon/Close/m';
|
|
8
|
-
import ChevronDown from '@semcore/icon/ChevronDown/m';
|
|
9
|
-
import { callAllEventHandlers } from '@semcore/utils/lib/assignProps';
|
|
10
|
-
import addonTextChildren from '@semcore/utils/lib/addonTextChildren';
|
|
11
|
-
|
|
12
|
-
import style from './style/filter-trigger.shadow.css';
|
|
13
|
-
|
|
14
|
-
class RootFilterTrigger extends Component {
|
|
15
|
-
static displayName = 'FilterTrigger';
|
|
16
|
-
static style = style;
|
|
17
|
-
|
|
18
|
-
handleStopPropagation = (e) => e.stopPropagation();
|
|
19
|
-
|
|
20
|
-
render() {
|
|
21
|
-
const SWrapper = Root;
|
|
22
|
-
const SFilterTrigger = BaseTrigger;
|
|
23
|
-
const { Children, styles, empty, onClear, size, placeholder, active, disabled } = this.asProps;
|
|
24
|
-
|
|
25
|
-
return sstyled(styles)(
|
|
26
|
-
<SWrapper render={Box}>
|
|
27
|
-
<NeighborLocation>
|
|
28
|
-
<SFilterTrigger
|
|
29
|
-
w="100%"
|
|
30
|
-
size={size}
|
|
31
|
-
placeholder={placeholder}
|
|
32
|
-
empty={empty}
|
|
33
|
-
selected={!empty}
|
|
34
|
-
active={active}
|
|
35
|
-
disabled={disabled}
|
|
36
|
-
>
|
|
37
|
-
{addonTextChildren(Children, FilterTrigger.Text, [
|
|
38
|
-
FilterTrigger.Addon,
|
|
39
|
-
FilterTrigger.Counter,
|
|
40
|
-
])}
|
|
41
|
-
{empty && <FilterTrigger.Addon tag={ChevronDown} />}
|
|
42
|
-
</SFilterTrigger>
|
|
43
|
-
{!empty && (
|
|
44
|
-
<SFilterTrigger
|
|
45
|
-
tag="button"
|
|
46
|
-
size={size}
|
|
47
|
-
empty={empty}
|
|
48
|
-
selected
|
|
49
|
-
onClick={callAllEventHandlers(onClear, this.handleStopPropagation)}
|
|
50
|
-
onKeyDown={this.handleStopPropagation}
|
|
51
|
-
disabled={disabled}
|
|
52
|
-
>
|
|
53
|
-
<FilterTrigger.Addon tag={Close} />
|
|
54
|
-
</SFilterTrigger>
|
|
55
|
-
)}
|
|
56
|
-
</NeighborLocation>
|
|
57
|
-
</SWrapper>,
|
|
58
|
-
);
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
function Counter(props) {
|
|
63
|
-
const SCounter = Root;
|
|
64
|
-
return sstyled(props.styles)(<SCounter render={BaseTrigger.Addon} tag={Dot} />);
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
const FilterTrigger = createComponent(
|
|
68
|
-
RootFilterTrigger,
|
|
69
|
-
{
|
|
70
|
-
Text: BaseTrigger.Text,
|
|
71
|
-
Addon: BaseTrigger.Addon,
|
|
72
|
-
Counter,
|
|
73
|
-
},
|
|
74
|
-
{
|
|
75
|
-
parent: BaseTrigger,
|
|
76
|
-
},
|
|
77
|
-
);
|
|
78
|
-
|
|
79
|
-
export default FilterTrigger;
|
package/src/LinkTrigger.jsx
DELETED
|
@@ -1,69 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import createComponent, { Component, Root, sstyled } from '@semcore/core';
|
|
3
|
-
import addonTextChildren from '@semcore/utils/lib/addonTextChildren';
|
|
4
|
-
import ChevronDown from '@semcore/icon/ChevronDown/m';
|
|
5
|
-
import Spin from '@semcore/spin';
|
|
6
|
-
import { Box } from '@semcore/flex-box';
|
|
7
|
-
import resolveColor, { shade } from '@semcore/utils/lib/color';
|
|
8
|
-
import keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
|
|
9
|
-
|
|
10
|
-
import style from './style/link-trigger.shadow.css';
|
|
11
|
-
|
|
12
|
-
class RootLinkTrigger extends Component {
|
|
13
|
-
static displayName = 'LinkTrigger';
|
|
14
|
-
static style = style;
|
|
15
|
-
static defaultProps = {
|
|
16
|
-
size: 'm',
|
|
17
|
-
};
|
|
18
|
-
static enhance = [keyboardFocusEnhance()];
|
|
19
|
-
|
|
20
|
-
getTextProps() {
|
|
21
|
-
const { placeholder, empty } = this.asProps;
|
|
22
|
-
return {
|
|
23
|
-
placeholder,
|
|
24
|
-
empty,
|
|
25
|
-
};
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
render() {
|
|
29
|
-
const SLinkTrigger = Root;
|
|
30
|
-
const SLinkAddon = LinkTrigger.Addon;
|
|
31
|
-
const { Children, loading, styles, color: providedColor } = this.asProps;
|
|
32
|
-
|
|
33
|
-
const color = resolveColor(providedColor);
|
|
34
|
-
const colorHover = shade(color, -0.12);
|
|
35
|
-
|
|
36
|
-
return sstyled(styles)(
|
|
37
|
-
<SLinkTrigger render={Box} use:color={color} use:color-hover={colorHover}>
|
|
38
|
-
{addonTextChildren(Children, LinkTrigger.Text, LinkTrigger.Addon)}
|
|
39
|
-
<SLinkAddon>
|
|
40
|
-
{loading ? <Spin size="xs" theme="currentColor" /> : <ChevronDown />}
|
|
41
|
-
</SLinkAddon>
|
|
42
|
-
</SLinkTrigger>,
|
|
43
|
-
);
|
|
44
|
-
}
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
function Text(props) {
|
|
48
|
-
const SText = Root;
|
|
49
|
-
const { children, styles, empty, placeholder } = props;
|
|
50
|
-
|
|
51
|
-
return sstyled(styles)(
|
|
52
|
-
/* "use:" prefix was used for backward compatibility (by lsroman) */
|
|
53
|
-
<SText render={Box} use:placeholder={empty}>
|
|
54
|
-
{empty ? placeholder : children}
|
|
55
|
-
</SText>,
|
|
56
|
-
);
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
function Addon(props) {
|
|
60
|
-
const SAddon = Root;
|
|
61
|
-
return sstyled(props.styles)(<SAddon render={Box} />);
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
const LinkTrigger = createComponent(RootLinkTrigger, {
|
|
65
|
-
Text,
|
|
66
|
-
Addon,
|
|
67
|
-
});
|
|
68
|
-
|
|
69
|
-
export default LinkTrigger;
|
package/src/index.d.ts
DELETED
|
@@ -1,82 +0,0 @@
|
|
|
1
|
-
import React, { ComponentProps } from 'react';
|
|
2
|
-
import { CProps, ReturnEl } from '@semcore/core';
|
|
3
|
-
import { Box, IBoxProps } from '@semcore/flex-box';
|
|
4
|
-
import Dot from '@semcore/dot';
|
|
5
|
-
import { INeighborItemProps } from '@semcore/neighbor-location';
|
|
6
|
-
import { IKeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
|
|
7
|
-
|
|
8
|
-
export interface IBaseTriggerProps extends IBoxProps, INeighborItemProps, IKeyboardFocusProps {
|
|
9
|
-
/**
|
|
10
|
-
* Trigger size
|
|
11
|
-
* @default m
|
|
12
|
-
*/
|
|
13
|
-
size?: 'm' | 'l';
|
|
14
|
-
/**
|
|
15
|
-
* Trigger state
|
|
16
|
-
*/
|
|
17
|
-
state?: 'normal' | 'valid' | 'invalid';
|
|
18
|
-
/**
|
|
19
|
-
* Sets active state to trigger
|
|
20
|
-
*/
|
|
21
|
-
active?: boolean;
|
|
22
|
-
/**
|
|
23
|
-
* Responsible for placeholder displaying
|
|
24
|
-
*/
|
|
25
|
-
empty?: boolean;
|
|
26
|
-
/**
|
|
27
|
-
* Placeholder text
|
|
28
|
-
*/
|
|
29
|
-
placeholder?: React.ReactNode;
|
|
30
|
-
/**
|
|
31
|
-
* Sets disabled state to trigger
|
|
32
|
-
*/
|
|
33
|
-
disabled?: boolean;
|
|
34
|
-
/** Trigger theme
|
|
35
|
-
* @deprecated
|
|
36
|
-
* @use IBaseTriggerProps.state
|
|
37
|
-
* */
|
|
38
|
-
theme?: 'normal' | 'valid' | 'invalid' | false;
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
export interface IButtonTriggerProps extends Omit<IBaseTriggerProps, 'theme'> {
|
|
42
|
-
/** Sets the loading state */
|
|
43
|
-
loading?: boolean;
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
export interface ILinkTriggerProps extends Omit<IBaseTriggerProps, 'theme'> {
|
|
47
|
-
/** Sets the loading state */
|
|
48
|
-
loading?: boolean;
|
|
49
|
-
/** Text color */
|
|
50
|
-
color?: string;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
export interface IFilterTriggerProps extends IBaseTriggerProps {
|
|
54
|
-
/** Click on the filter cleaning cross */
|
|
55
|
-
onClear?: (event: React.SyntheticEvent) => void;
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
declare const BaseTrigger: (<T>(props: CProps<IBaseTriggerProps & T>) => ReturnEl) & {
|
|
59
|
-
Text: typeof Box;
|
|
60
|
-
Addon: typeof Box;
|
|
61
|
-
};
|
|
62
|
-
|
|
63
|
-
declare const ButtonTrigger: (<T>(props: CProps<IButtonTriggerProps & T>) => ReturnEl) & {
|
|
64
|
-
Text: typeof BaseTrigger.Text;
|
|
65
|
-
Addon: typeof BaseTrigger.Addon;
|
|
66
|
-
};
|
|
67
|
-
|
|
68
|
-
declare const LinkTrigger: (<T>(props: CProps<ILinkTriggerProps & T>) => ReturnEl) & {
|
|
69
|
-
Text: typeof BaseTrigger.Text;
|
|
70
|
-
Addon: typeof BaseTrigger.Addon;
|
|
71
|
-
};
|
|
72
|
-
|
|
73
|
-
declare const FilterTrigger: (<T>(props: CProps<ILinkTriggerProps & T>) => ReturnEl) & {
|
|
74
|
-
Text: typeof BaseTrigger.Text;
|
|
75
|
-
Addon: typeof BaseTrigger.Addon;
|
|
76
|
-
Counter: <T>(
|
|
77
|
-
props: ComponentProps<typeof BaseTrigger.Addon> & ComponentProps<typeof Dot> & T,
|
|
78
|
-
) => ReturnEl;
|
|
79
|
-
};
|
|
80
|
-
|
|
81
|
-
export default BaseTrigger;
|
|
82
|
-
export { ButtonTrigger, LinkTrigger, FilterTrigger };
|
package/src/index.js
DELETED
|
@@ -1,181 +0,0 @@
|
|
|
1
|
-
@import '@semcore/utils/style/var.css';
|
|
2
|
-
|
|
3
|
-
SBaseTrigger {
|
|
4
|
-
display: inline-block;
|
|
5
|
-
align-items: center;
|
|
6
|
-
justify-content: center;
|
|
7
|
-
line-height: normal;
|
|
8
|
-
position: relative;
|
|
9
|
-
touch-action: manipulation;
|
|
10
|
-
white-space: nowrap;
|
|
11
|
-
user-select: none;
|
|
12
|
-
box-sizing: border-box;
|
|
13
|
-
padding: 0;
|
|
14
|
-
margin: 0;
|
|
15
|
-
box-shadow: none;
|
|
16
|
-
outline: none;
|
|
17
|
-
text-decoration: none;
|
|
18
|
-
-webkit-tap-highlight-color: transparent;
|
|
19
|
-
overflow: visible;
|
|
20
|
-
outline: 0;
|
|
21
|
-
text-align: center;
|
|
22
|
-
vertical-align: middle;
|
|
23
|
-
font-family: Inter, sans-serif;
|
|
24
|
-
cursor: pointer;
|
|
25
|
-
|
|
26
|
-
background: #ffffff;
|
|
27
|
-
|
|
28
|
-
font-weight: 400;
|
|
29
|
-
border: 1px solid var(--gray-200);
|
|
30
|
-
color: var(--gray-800);
|
|
31
|
-
|
|
32
|
-
&::-moz-focus-inner {
|
|
33
|
-
border: none;
|
|
34
|
-
padding: 0;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
&:active,
|
|
38
|
-
&:hover,
|
|
39
|
-
&:focus {
|
|
40
|
-
outline: 0;
|
|
41
|
-
text-decoration: none;
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
&[keyboardFocused] {
|
|
45
|
-
border: 1px solid var(--blue-400);
|
|
46
|
-
box-shadow: var(--keyboard-focus);
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
&:hover {
|
|
50
|
-
background-color: color-mod(var(--gray-400) a(20%));
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
&:active,
|
|
54
|
-
&[active] {
|
|
55
|
-
background-color: color-mod(var(--gray-400) a(30%));
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
SBaseTrigger[disabled] {
|
|
60
|
-
opacity: var(--disabled-opacity);
|
|
61
|
-
cursor: default;
|
|
62
|
-
pointer-events: none; /* Disable link interactions */
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
SBaseTrigger[keyboardFocused] {
|
|
66
|
-
z-index: 1;
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
SInner {
|
|
70
|
-
display: inline-flex;
|
|
71
|
-
align-items: center;
|
|
72
|
-
justify-content: center;
|
|
73
|
-
height: 100%;
|
|
74
|
-
width: 100%;
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
SText {
|
|
78
|
-
display: inline;
|
|
79
|
-
padding: 1px 0;
|
|
80
|
-
overflow: hidden;
|
|
81
|
-
white-space: nowrap;
|
|
82
|
-
text-overflow: ellipsis;
|
|
83
|
-
line-height: var(--lh-200);
|
|
84
|
-
flex-grow: 1;
|
|
85
|
-
text-align: left;
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
SAddon {
|
|
89
|
-
display: inline-flex;
|
|
90
|
-
align-items: center;
|
|
91
|
-
justify-content: center;
|
|
92
|
-
flex-shrink: 0;
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
SBaseAddon {
|
|
96
|
-
width: 12px;
|
|
97
|
-
height: 12px;
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
SBaseTrigger[size='m'] {
|
|
101
|
-
min-width: 26px;
|
|
102
|
-
height: 28px;
|
|
103
|
-
border-radius: var(--rounded-m);
|
|
104
|
-
padding: 0 8px;
|
|
105
|
-
font-size: var(--fs-200);
|
|
106
|
-
|
|
107
|
-
& SAddon {
|
|
108
|
-
&:not(:only-child):first-child {
|
|
109
|
-
margin-right: 8px;
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
&:not(:only-child):last-child {
|
|
113
|
-
margin-left: 8px;
|
|
114
|
-
}
|
|
115
|
-
|
|
116
|
-
&:only-child {
|
|
117
|
-
margin-left: -4px;
|
|
118
|
-
margin-right: -4px;
|
|
119
|
-
}
|
|
120
|
-
}
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
SBaseTrigger[size='l'] {
|
|
124
|
-
min-width: 32px;
|
|
125
|
-
height: 40px;
|
|
126
|
-
border-radius: var(--rounded-m);
|
|
127
|
-
padding: 0 12px;
|
|
128
|
-
font-size: var(--fs-300);
|
|
129
|
-
|
|
130
|
-
& SAddon {
|
|
131
|
-
&:not(:only-child):first-child {
|
|
132
|
-
margin-right: 8px;
|
|
133
|
-
}
|
|
134
|
-
|
|
135
|
-
&:not(:only-child):last-child {
|
|
136
|
-
margin-left: 8px;
|
|
137
|
-
}
|
|
138
|
-
|
|
139
|
-
&:only-child {
|
|
140
|
-
margin-left: -4px;
|
|
141
|
-
margin-right: -4px;
|
|
142
|
-
}
|
|
143
|
-
}
|
|
144
|
-
}
|
|
145
|
-
|
|
146
|
-
SBaseTrigger[neighborLocation='right'] {
|
|
147
|
-
border-top-right-radius: 0;
|
|
148
|
-
border-bottom-right-radius: 0;
|
|
149
|
-
}
|
|
150
|
-
|
|
151
|
-
SBaseTrigger[neighborLocation='both'] {
|
|
152
|
-
border-radius: 0;
|
|
153
|
-
margin-left: -1px;
|
|
154
|
-
}
|
|
155
|
-
|
|
156
|
-
SBaseTrigger[neighborLocation='left'] {
|
|
157
|
-
border-top-left-radius: 0;
|
|
158
|
-
border-bottom-left-radius: 0;
|
|
159
|
-
margin-left: -1px;
|
|
160
|
-
}
|
|
161
|
-
|
|
162
|
-
SText[placeholder] {
|
|
163
|
-
color: var(--gray-300);
|
|
164
|
-
}
|
|
165
|
-
|
|
166
|
-
SBaseTrigger[state='normal'] {
|
|
167
|
-
border-color: var(--gray-200);
|
|
168
|
-
}
|
|
169
|
-
|
|
170
|
-
SBaseTrigger[state='valid'] {
|
|
171
|
-
border-color: var(--green-200);
|
|
172
|
-
}
|
|
173
|
-
|
|
174
|
-
SBaseTrigger[state='invalid'] {
|
|
175
|
-
border-color: var(--red-200);
|
|
176
|
-
|
|
177
|
-
&[keyboardFocused] {
|
|
178
|
-
border-color: var(--orange-400);
|
|
179
|
-
box-shadow: 0 0 0 3px color-mod(var(--orange-400) a(30%));
|
|
180
|
-
}
|
|
181
|
-
}
|
|
@@ -1,82 +0,0 @@
|
|
|
1
|
-
@import '@semcore/utils/style/var.css';
|
|
2
|
-
|
|
3
|
-
SButtonTrigger {
|
|
4
|
-
border: 1px solid var(--gray-200);
|
|
5
|
-
background: #ffffff;
|
|
6
|
-
color: var(--gray-800);
|
|
7
|
-
|
|
8
|
-
&::-moz-focus-inner {
|
|
9
|
-
border: none;
|
|
10
|
-
padding: 0;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
&:active,
|
|
14
|
-
&:hover,
|
|
15
|
-
&:focus {
|
|
16
|
-
outline: 0;
|
|
17
|
-
text-decoration: none;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
&:active,
|
|
21
|
-
&:hover,
|
|
22
|
-
&[active] {
|
|
23
|
-
background-color: color-mod(var(--gray-400) a(20%));
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
SButtonTrigger[size='m'] {
|
|
28
|
-
min-width: 26px;
|
|
29
|
-
height: 28px;
|
|
30
|
-
border-radius: var(--rounded-m);
|
|
31
|
-
font-size: var(--fs-200);
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
SButtonTrigger[size='l'] {
|
|
35
|
-
min-width: 32px;
|
|
36
|
-
height: 40px;
|
|
37
|
-
border-radius: var(--rounded-m);
|
|
38
|
-
font-size: var(--fs-300);
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
SText[placeholder] {
|
|
42
|
-
color: var(--gray-300);
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
SButtonTrigger[state='normal'] {
|
|
46
|
-
border-color: var(--gray-200);
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
SButtonTrigger[state='valid'] {
|
|
50
|
-
border-color: var(--green-200);
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
SButtonTrigger[state='invalid'] {
|
|
54
|
-
border-color: var(--red-200);
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
SFilterTrigger[selected] {
|
|
58
|
-
border-color: var(--blue-400);
|
|
59
|
-
background-color: color-mod(var(--blue-400) a(20%));
|
|
60
|
-
color: var(--gray-800);
|
|
61
|
-
|
|
62
|
-
&[active],
|
|
63
|
-
&:hover {
|
|
64
|
-
background: color-mod(var(--blue-400) a(30%));
|
|
65
|
-
}
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
SWrapper {
|
|
69
|
-
display: inline-flex;
|
|
70
|
-
|
|
71
|
-
&:focus {
|
|
72
|
-
outline: none;
|
|
73
|
-
}
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
SWrapper[keyboardFocused] {
|
|
77
|
-
box-shadow: var(--keyboard-focus);
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
SCounter {
|
|
81
|
-
background-color: var(--blue-400);
|
|
82
|
-
}
|
|
@@ -1,100 +0,0 @@
|
|
|
1
|
-
@import '@semcore/utils/style/var.css';
|
|
2
|
-
|
|
3
|
-
SLinkTrigger {
|
|
4
|
-
display: inline-flex;
|
|
5
|
-
align-items: center;
|
|
6
|
-
line-height: normal;
|
|
7
|
-
position: relative;
|
|
8
|
-
touch-action: manipulation;
|
|
9
|
-
white-space: nowrap;
|
|
10
|
-
user-select: none;
|
|
11
|
-
box-sizing: border-box;
|
|
12
|
-
padding: 0;
|
|
13
|
-
margin: 0;
|
|
14
|
-
outline: none;
|
|
15
|
-
text-decoration: none;
|
|
16
|
-
-webkit-tap-highlight-color: transparent;
|
|
17
|
-
overflow: visible;
|
|
18
|
-
outline: 0;
|
|
19
|
-
vertical-align: middle;
|
|
20
|
-
font-family: Inter, sans-serif;
|
|
21
|
-
cursor: pointer;
|
|
22
|
-
color: var(--blue-500);
|
|
23
|
-
background: none;
|
|
24
|
-
transition: color 0.15s ease-in-out;
|
|
25
|
-
|
|
26
|
-
&[active],
|
|
27
|
-
&:hover,
|
|
28
|
-
&:active {
|
|
29
|
-
color: var(--blue-600);
|
|
30
|
-
|
|
31
|
-
& SText {
|
|
32
|
-
border-color: currentColor;
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
& SText {
|
|
37
|
-
border-bottom-width: 1px;
|
|
38
|
-
border-bottom-style: solid;
|
|
39
|
-
border-color: transparent;
|
|
40
|
-
transition: border-bottom-color 0.15s ease-in-out;
|
|
41
|
-
line-height: var(--lh-200);
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
SLinkTrigger[color] {
|
|
46
|
-
color: var(--color);
|
|
47
|
-
|
|
48
|
-
&:hover {
|
|
49
|
-
color: var(--color-hover);
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
SLinkTrigger[disabled] {
|
|
54
|
-
opacity: var(--disabled-opacity);
|
|
55
|
-
cursor: default;
|
|
56
|
-
pointer-events: none;
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
SLinkTrigger[keyboardFocused] {
|
|
60
|
-
box-shadow: var(--keyboard-focus);
|
|
61
|
-
z-index: 1;
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
SAddon,
|
|
65
|
-
SLinkAddon {
|
|
66
|
-
display: inline-flex;
|
|
67
|
-
align-items: center;
|
|
68
|
-
justify-content: center;
|
|
69
|
-
flex-shrink: 0;
|
|
70
|
-
|
|
71
|
-
&:not(:only-child):first-child {
|
|
72
|
-
margin-right: 4px;
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
&:not(:only-child):last-child {
|
|
76
|
-
margin-left: 4px;
|
|
77
|
-
}
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
SLinkAddon {
|
|
81
|
-
width: 16px;
|
|
82
|
-
height: 16px;
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
SLinkTrigger[size='m'] {
|
|
86
|
-
font-size: var(--fs-200);
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
SLinkTrigger[size='l'] {
|
|
90
|
-
font-size: var(--fs-300);
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
@media (prefers-reduced-motion) {
|
|
94
|
-
SLinkTrigger {
|
|
95
|
-
transition: none;
|
|
96
|
-
& SText {
|
|
97
|
-
transition: none;
|
|
98
|
-
}
|
|
99
|
-
}
|
|
100
|
-
}
|