@semcore/base-trigger 17.2.1 → 18.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 +6 -0
- package/lib/cjs/BaseTrigger.js +16 -17
- package/lib/cjs/BaseTrigger.js.map +1 -1
- package/lib/cjs/ButtonTrigger.js +4 -5
- package/lib/cjs/ButtonTrigger.js.map +1 -1
- package/lib/cjs/FilterTrigger.js +15 -10
- package/lib/cjs/FilterTrigger.js.map +1 -1
- package/lib/cjs/index.d.js.map +1 -1
- package/lib/cjs/style/base-trigger.shadow.css +24 -54
- package/lib/cjs/style/button-trigger.shadow.css +6 -3
- package/lib/cjs/style/filter-trigger.shadow.css +87 -9
- package/lib/es6/BaseTrigger.js +16 -17
- package/lib/es6/BaseTrigger.js.map +1 -1
- package/lib/es6/ButtonTrigger.js +4 -5
- package/lib/es6/ButtonTrigger.js.map +1 -1
- package/lib/es6/FilterTrigger.js +16 -11
- package/lib/es6/FilterTrigger.js.map +1 -1
- package/lib/es6/index.d.js.map +1 -1
- package/lib/es6/style/base-trigger.shadow.css +24 -54
- package/lib/es6/style/button-trigger.shadow.css +6 -3
- package/lib/es6/style/filter-trigger.shadow.css +87 -9
- package/lib/esm/BaseTrigger.mjs +17 -18
- package/lib/esm/ButtonTrigger.mjs +5 -6
- package/lib/esm/FilterTrigger.mjs +17 -12
- package/lib/esm/style/base-trigger.shadow.css +24 -54
- package/lib/esm/style/button-trigger.shadow.css +6 -3
- package/lib/esm/style/filter-trigger.shadow.css +87 -9
- package/lib/types/index.d.ts +8 -8
- package/package.json +12 -12
|
@@ -1,22 +1,100 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
background-color: var(--intergalactic-control-secondary-info, oklch(0.527 0.264 262.9 / 0.039));
|
|
4
|
-
color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
|
|
1
|
+
STrigger {
|
|
2
|
+
position: relative;
|
|
5
3
|
|
|
6
|
-
|
|
7
|
-
|
|
4
|
+
&[role="combobox"]:not([empty]) {
|
|
5
|
+
border-right: none;
|
|
6
|
+
border-top-right-radius: 0;
|
|
7
|
+
border-bottom-right-radius: 0;
|
|
8
|
+
|
|
9
|
+
&::before {
|
|
10
|
+
content: '';
|
|
11
|
+
position: absolute;
|
|
12
|
+
right: 0;
|
|
13
|
+
top: 50%;
|
|
14
|
+
transform: translateY(-50%);
|
|
15
|
+
width: 1px;
|
|
16
|
+
background-color: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
|
|
17
|
+
transition: height calc(var(--intergalactic-duration-extra-fast, 100) * 1ms) ease-out;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
&[size='m']::before {
|
|
21
|
+
height: 16px;
|
|
22
|
+
}
|
|
23
|
+
&[size='l']::before {
|
|
24
|
+
height: 24px;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
&[active], &:active {
|
|
28
|
+
&::before {
|
|
29
|
+
height: calc(100% - 2px);
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
&[disabled] {
|
|
34
|
+
opacity: 1;
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
SClear {
|
|
40
|
+
border-top-left-radius: 0;
|
|
41
|
+
border-bottom-left-radius: 0;
|
|
42
|
+
|
|
43
|
+
&[disabled] {
|
|
44
|
+
opacity: 1;
|
|
8
45
|
}
|
|
46
|
+
}
|
|
9
47
|
|
|
10
|
-
|
|
11
|
-
&[
|
|
12
|
-
|
|
48
|
+
SWrapper:hover:not(:has([disabled])) STrigger[role="combobox"]:not([empty]) {
|
|
49
|
+
&[size='m']::before,
|
|
50
|
+
&[size='l']::before {
|
|
51
|
+
height: calc(100% - 2px);
|
|
13
52
|
}
|
|
14
53
|
}
|
|
15
54
|
|
|
16
55
|
SWrapper {
|
|
17
56
|
display: inline-flex;
|
|
57
|
+
position: relative;
|
|
58
|
+
border-radius: var(--intergalactic-control-rounded, 6px);
|
|
59
|
+
|
|
60
|
+
&::after {
|
|
61
|
+
content: '';
|
|
62
|
+
position: absolute;
|
|
63
|
+
border: 1px solid var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
|
|
64
|
+
border-radius: var(--intergalactic-control-rounded, 6px);
|
|
65
|
+
inset: 0;
|
|
66
|
+
z-index: 1;
|
|
67
|
+
pointer-events: none;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
&[empty]:active,
|
|
71
|
+
&[empty][active],
|
|
72
|
+
&[empty]:has(STrigger:focus-visible) {
|
|
73
|
+
background-color: var(--intergalactic-control-select-trigger-active, oklch(0.96 0.001 180));
|
|
74
|
+
|
|
75
|
+
STrigger {
|
|
76
|
+
background: var(--intergalactic-control-select-trigger-normal, oklch(1 0 0));
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
&::after {
|
|
80
|
+
border-color: var(--intergalactic-border-info-active, oklch(0.7 0.131 275.2));
|
|
81
|
+
}
|
|
82
|
+
}
|
|
18
83
|
|
|
19
84
|
&:focus {
|
|
20
85
|
outline: none;
|
|
21
86
|
}
|
|
87
|
+
|
|
88
|
+
&[disabled] {
|
|
89
|
+
opacity: var(--intergalactic-disabled-opacity, 0.4);
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
STrigger,
|
|
93
|
+
SClear {
|
|
94
|
+
border: none;
|
|
95
|
+
|
|
96
|
+
&[active], &:active {
|
|
97
|
+
background-color: var(--intergalactic-control-select-trigger-active, oklch(0.96 0.001 180));
|
|
98
|
+
}
|
|
99
|
+
}
|
|
22
100
|
}
|
package/lib/es6/BaseTrigger.js
CHANGED
|
@@ -11,25 +11,24 @@ import { cssVariableEnhance } from '@semcore/core/lib/utils/useCssVariable';
|
|
|
11
11
|
import { Text as TextKit } from '@semcore/typography';
|
|
12
12
|
import React from 'react';
|
|
13
13
|
/*!__reshadow-styles__:"./style/base-trigger.shadow.css"*/
|
|
14
|
-
const style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".
|
|
14
|
+
const style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___SBaseTrigger_1hynq_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;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-control-select-trigger-normal,oklch(1 0 0));font-weight:var(--intergalactic-regular,400);border:1px solid var(--intergalactic-border-primary,#000c0829);color:var(--intergalactic-text-primary,oklch(.1 .03 137/.899));border-radius:var(--intergalactic-control-rounded,6px);padding:0 var(--intergalactic-spacing-content-padding-medium,12px)}@media (color-gamut:p3){.___SBaseTrigger_1hynq_gg_{border:1px solid var(--intergalactic-border-primary,oklch(.137 .026 175.7/.161))}}.___SBaseTrigger_1hynq_gg_::-moz-focus-inner{border:none;padding:0}.___SBaseTrigger_1hynq_gg_:active{-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___SBaseTrigger_1hynq_gg_:hover{-webkit-text-decoration:none;text-decoration:none}}.___SBaseTrigger_1hynq_gg_:focus-visible{border:1px solid var(--intergalactic-border-info-active,oklch(.7 .131 275.2))}@media (hover:hover){.___SBaseTrigger_1hynq_gg_:hover{background-color:var(--intergalactic-control-select-trigger-hover,oklch(.97 .001 180))}}.___SBaseTrigger_1hynq_gg_.__active_1hynq_gg_,.___SBaseTrigger_1hynq_gg_:active{border-color:var(--intergalactic-border-info-active,oklch(.7 .131 275.2))}@media (hover:hover){.___SBaseTrigger_1hynq_gg_.__active_1hynq_gg_:hover,.___SBaseTrigger_1hynq_gg_:active:hover{background:var(--intergalactic-control-select-trigger-normal,oklch(1 0 0))}}.___SBaseTrigger_1hynq_gg_.__disabled_1hynq_gg_{opacity:var(--intergalactic-disabled-opacity,.4);cursor:default;pointer-events:none}.___SInner_1hynq_gg_{display:inline-flex;align-items:center;justify-content:center;gap:var(--intergalactic-spacing-content-gap-medium,6px);height:100%;width:100%}.___SText_1hynq_gg_{display:inline;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex-grow:1;text-align:left}.___SAddon_1hynq_gg_{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;pointer-events:none}.___SAddon_1hynq_gg_:only-child{margin-left:calc(var(--intergalactic-spacing-content-gap-small, 4px)*-1);margin-right:calc(var(--intergalactic-spacing-content-gap-small, 4px)*-1)}.___SBaseTrigger_1hynq_gg_._size_m_1hynq_gg_{min-width:var(--intergalactic-form-control-m,32px);height:var(--intergalactic-form-control-m,32px);font-size:var(--intergalactic-fs-200,14px);line-height:var(--intergalactic-lh-200,1.4286)}.___SBaseTrigger_1hynq_gg_._size_l_1hynq_gg_{min-width:var(--intergalactic-form-control-l,44px);height:var(--intergalactic-form-control-l,44px);font-size:var(--intergalactic-fs-300,16px);line-height:var(--intergalactic-lh-300,1.5)}.___SBaseTrigger_1hynq_gg_._neighborLocation_right_1hynq_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SBaseTrigger_1hynq_gg_._neighborLocation_both_1hynq_gg_{border-radius:0;margin-left:-1px}.___SBaseTrigger_1hynq_gg_._neighborLocation_left_1hynq_gg_{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}.___SBaseTrigger_1hynq_gg_._neighborLocation_left_1hynq_gg_.__disabled_1hynq_gg_{border-left:none;margin-left:0}.___SText_1hynq_gg_.__display-placeholder_1hynq_gg_{color:var(--intergalactic-text-placeholder,#00060356)}@media (color-gamut:p3){.___SText_1hynq_gg_.__display-placeholder_1hynq_gg_{color:var(--intergalactic-text-placeholder,oklch(.109 .023 165.5/.337))}}.___SBaseTrigger_1hynq_gg_._state_valid_1hynq_gg_{border-color:var(--intergalactic-border-success-active,#00b991)}@media (color-gamut:p3){.___SBaseTrigger_1hynq_gg_._state_valid_1hynq_gg_{border-color:var(--intergalactic-border-success-active,oklch(.7 .166 170))}}.___SBaseTrigger_1hynq_gg_._state_invalid_1hynq_gg_{border-color:var(--intergalactic-border-critical-active,#ff6364)}@media (color-gamut:p3){.___SBaseTrigger_1hynq_gg_._state_invalid_1hynq_gg_{border-color:var(--intergalactic-border-critical-active,oklch(.7 .21 23))}}.___SBaseTrigger_1hynq_gg_._state_invalid_1hynq_gg_:focus-visible{outline-color:var(--intergalactic-keyboard-focus-invalid-outline,oklch(.628 .257 28.9/.652))}.___SInvalidPattern_1hynq_gg_._size_l_1hynq_gg_,.___SInvalidPattern_1hynq_gg_._size_m_1hynq_gg_{margin-left:calc(var(--intergalactic-spacing-content-padding-medium, 12px)*-1)}", /*__inner_css_end__*/"1hynq_gg_"),
|
|
15
15
|
/*__reshadow_css_end__*/
|
|
16
16
|
{
|
|
17
|
-
"__SBaseTrigger": "
|
|
18
|
-
"_disabled": "
|
|
19
|
-
"__SInner": "
|
|
20
|
-
"__SText": "
|
|
21
|
-
"
|
|
22
|
-
"
|
|
23
|
-
"_neighborLocation_right": "
|
|
24
|
-
"_neighborLocation_both": "
|
|
25
|
-
"_display-placeholder": "__display-
|
|
26
|
-
"_state_valid": "
|
|
27
|
-
"__SInvalidPattern": "
|
|
28
|
-
"
|
|
29
|
-
"
|
|
30
|
-
"
|
|
31
|
-
"
|
|
32
|
-
"_state_invalid": "_state_invalid_9qkze_gg_"
|
|
17
|
+
"__SBaseTrigger": "___SBaseTrigger_1hynq_gg_",
|
|
18
|
+
"_disabled": "__disabled_1hynq_gg_",
|
|
19
|
+
"__SInner": "___SInner_1hynq_gg_",
|
|
20
|
+
"__SText": "___SText_1hynq_gg_",
|
|
21
|
+
"_size_m": "_size_m_1hynq_gg_",
|
|
22
|
+
"_size_l": "_size_l_1hynq_gg_",
|
|
23
|
+
"_neighborLocation_right": "_neighborLocation_right_1hynq_gg_",
|
|
24
|
+
"_neighborLocation_both": "_neighborLocation_both_1hynq_gg_",
|
|
25
|
+
"_display-placeholder": "__display-placeholder_1hynq_gg_",
|
|
26
|
+
"_state_valid": "_state_valid_1hynq_gg_",
|
|
27
|
+
"__SInvalidPattern": "___SInvalidPattern_1hynq_gg_",
|
|
28
|
+
"_active": "__active_1hynq_gg_",
|
|
29
|
+
"__SAddon": "___SAddon_1hynq_gg_",
|
|
30
|
+
"_neighborLocation_left": "_neighborLocation_left_1hynq_gg_",
|
|
31
|
+
"_state_invalid": "_state_invalid_1hynq_gg_"
|
|
33
32
|
});
|
|
34
33
|
class RootBaseTrigger extends Component {
|
|
35
34
|
constructor(...args) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseTrigger.js","names":["NeighborLocation","Box","InvalidStateBox","createComponent","Component","Root","sstyled","addonTextChildren","animatedSizeEnhance","cssVariableEnhance","Text","TextKit","React","style","_sstyled","insert","RootBaseTrigger","constructor","args","_defineProperty","createRef","getTextProps","placeholder","empty","asProps","triggerRef","render","_ref","SBaseTrigger","SInner","SInvalidPattern","Children","styles","theme","neighborLocation","state","size","createElement","Detect","_ref4","cn","_assignProps","BaseTrigger","Addon","variable","fallback","map","Number","parseInt","prop","animateProps","onChangeOf","props","_ref2","arguments[0]","_ref5","SText","textRef","useRef","children","ellipsis","content","Fragment","_assignProps2","_ref3","_ref6","SAddon","_assignProps3"],"sources":["../../src/BaseTrigger.jsx"],"sourcesContent":["import { NeighborLocation, Box, InvalidStateBox } from '@semcore/base-components';\nimport { createComponent, Component, Root, sstyled } from '@semcore/core';\nimport addonTextChildren from '@semcore/core/lib/utils/addonTextChildren';\nimport animatedSizeEnhance from '@semcore/core/lib/utils/enhances/animatedSizeEnhance';\nimport { cssVariableEnhance } from '@semcore/core/lib/utils/useCssVariable';\nimport { Text as TextKit } from '@semcore/typography';\nimport React from 'react';\n\nimport style from './style/base-trigger.shadow.css';\n\nclass RootBaseTrigger extends Component {\n static displayName = 'BaseTrigger';\n static enhance = [\n cssVariableEnhance({\n variable: '--intergalactic-duration-control',\n fallback: '200',\n map: Number.parseInt,\n prop: 'duration',\n }),\n animatedSizeEnhance({\n animateProps: ['width'],\n onChangeOf: ['value'],\n }),\n ];\n\n static style = style;\n static defaultProps = {\n size: 'm',\n empty: false,\n };\n\n triggerRef = React.createRef();\n\n getTextProps() {\n const { placeholder, empty } = this.asProps;\n return {\n placeholder,\n empty,\n triggerRef: this.triggerRef,\n };\n }\n\n render() {\n const SBaseTrigger = Root;\n const SInner = 'span';\n const SInvalidPattern = InvalidStateBox;\n const { Children, styles, theme, neighborLocation, empty, state, size } = this.asProps;\n\n // TODO: add aria\n return (\n <NeighborLocation.Detect neighborLocation={neighborLocation}>\n {(neighborLocation) =>\n sstyled(styles)(\n <SBaseTrigger\n render={Box}\n tag='button'\n type='button'\n tabIndex={0}\n neighborLocation={neighborLocation}\n state={theme}\n ref={this.triggerRef}\n >\n {state === 'invalid' && <SInvalidPattern size={size} />}\n <SInner data-ui-name={`${this.asProps['data-ui-name']}.InnerTriggerWrapper`}>\n {addonTextChildren(Children, BaseTrigger.Text, BaseTrigger.Addon, empty)}\n </SInner>\n </SBaseTrigger>,\n )}\n </NeighborLocation.Detect>\n );\n }\n}\n\nfunction Text(props) {\n const SText = Root;\n const textRef = React.useRef();\n const { children, styles, empty, placeholder, triggerRef, ellipsis = false } = props;\n const content = empty ? placeholder : children;\n\n return sstyled(styles)(\n <>\n <SText\n render={TextKit}\n display-placeholder={empty}\n aria-hidden={empty}\n ref={textRef}\n ellipsis={ellipsis}\n hint:triggerRef={triggerRef}\n >\n {content}\n </SText>\n </>,\n );\n}\n\nfunction Addon(props) {\n const SAddon = Root;\n const { styles } = props;\n return sstyled(styles)(<SAddon render={Box} />);\n}\n\n/**\n * BaseTrigger\n *\n * {@link https://developer.semrush.com/intergalactic/components/base-trigger/base-trigger-api/|API} | {@link https://developer.semrush.com/intergalactic/components/base-trigger/base-trigger-code/|Examples}\n */\nconst BaseTrigger = createComponent(RootBaseTrigger, {\n Text,\n Addon,\n});\n\nexport default BaseTrigger;\n"],"mappings":";;;;;AAAA,SAASA,gBAAgB,EAAEC,GAAG,EAAEC,eAAe,QAAQ,0BAA0B;AACjF,SAASC,eAAe,EAAEC,SAAS,EAAEC,IAAI,EAAEC,OAAO,QAAQ,eAAe;AACzE,OAAOC,iBAAiB,MAAM,2CAA2C;AACzE,OAAOC,mBAAmB,MAAM,sDAAsD;AACtF,SAASC,kBAAkB,QAAQ,wCAAwC;AAC3E,SAASC,IAAI,IAAIC,OAAO,QAAQ,qBAAqB;AACrD,OAAOC,KAAK,MAAM,OAAO;AAAC;AAAA,MAAAC,KAAA,8BAAAC,QAAA,CAAAC,MAAA;AAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;
|
|
1
|
+
{"version":3,"file":"BaseTrigger.js","names":["NeighborLocation","Box","InvalidStateBox","createComponent","Component","Root","sstyled","addonTextChildren","animatedSizeEnhance","cssVariableEnhance","Text","TextKit","React","style","_sstyled","insert","RootBaseTrigger","constructor","args","_defineProperty","createRef","getTextProps","placeholder","empty","asProps","triggerRef","render","_ref","SBaseTrigger","SInner","SInvalidPattern","Children","styles","theme","neighborLocation","state","size","createElement","Detect","_ref4","cn","_assignProps","BaseTrigger","Addon","variable","fallback","map","Number","parseInt","prop","animateProps","onChangeOf","props","_ref2","arguments[0]","_ref5","SText","textRef","useRef","children","ellipsis","content","Fragment","_assignProps2","_ref3","_ref6","SAddon","_assignProps3"],"sources":["../../src/BaseTrigger.jsx"],"sourcesContent":["import { NeighborLocation, Box, InvalidStateBox } from '@semcore/base-components';\nimport { createComponent, Component, Root, sstyled } from '@semcore/core';\nimport addonTextChildren from '@semcore/core/lib/utils/addonTextChildren';\nimport animatedSizeEnhance from '@semcore/core/lib/utils/enhances/animatedSizeEnhance';\nimport { cssVariableEnhance } from '@semcore/core/lib/utils/useCssVariable';\nimport { Text as TextKit } from '@semcore/typography';\nimport React from 'react';\n\nimport style from './style/base-trigger.shadow.css';\n\nclass RootBaseTrigger extends Component {\n static displayName = 'BaseTrigger';\n static enhance = [\n cssVariableEnhance({\n variable: '--intergalactic-duration-control',\n fallback: '200',\n map: Number.parseInt,\n prop: 'duration',\n }),\n animatedSizeEnhance({\n animateProps: ['width'],\n onChangeOf: ['value'],\n }),\n ];\n\n static style = style;\n static defaultProps = {\n size: 'm',\n empty: false,\n };\n\n triggerRef = React.createRef();\n\n getTextProps() {\n const { placeholder, empty } = this.asProps;\n return {\n placeholder,\n empty,\n triggerRef: this.triggerRef,\n };\n }\n\n render() {\n const SBaseTrigger = Root;\n const SInner = 'span';\n const SInvalidPattern = InvalidStateBox;\n const { Children, styles, theme, neighborLocation, empty, state, size } = this.asProps;\n\n // TODO: add aria\n return (\n <NeighborLocation.Detect neighborLocation={neighborLocation}>\n {(neighborLocation) =>\n sstyled(styles)(\n <SBaseTrigger\n render={Box}\n tag='button'\n type='button'\n tabIndex={0}\n neighborLocation={neighborLocation}\n state={theme}\n ref={this.triggerRef}\n >\n {state === 'invalid' && <SInvalidPattern size={size} />}\n <SInner data-ui-name={`${this.asProps['data-ui-name']}.InnerTriggerWrapper`}>\n {addonTextChildren(Children, BaseTrigger.Text, BaseTrigger.Addon, empty)}\n </SInner>\n </SBaseTrigger>,\n )}\n </NeighborLocation.Detect>\n );\n }\n}\n\nfunction Text(props) {\n const SText = Root;\n const textRef = React.useRef();\n const { children, styles, empty, placeholder, triggerRef, ellipsis = false } = props;\n const content = empty ? placeholder : children;\n\n return sstyled(styles)(\n <>\n <SText\n render={TextKit}\n display-placeholder={empty}\n aria-hidden={empty}\n ref={textRef}\n ellipsis={ellipsis}\n hint:triggerRef={triggerRef}\n >\n {content}\n </SText>\n </>,\n );\n}\n\nfunction Addon(props) {\n const SAddon = Root;\n const { styles } = props;\n return sstyled(styles)(<SAddon render={Box} />);\n}\n\n/**\n * BaseTrigger\n *\n * {@link https://developer.semrush.com/intergalactic/components/base-trigger/base-trigger-api/|API} | {@link https://developer.semrush.com/intergalactic/components/base-trigger/base-trigger-code/|Examples}\n */\nconst BaseTrigger = createComponent(RootBaseTrigger, {\n Text,\n Addon,\n});\n\nexport default BaseTrigger;\n"],"mappings":"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","ignoreList":[]}
|
package/lib/es6/ButtonTrigger.js
CHANGED
|
@@ -10,11 +10,11 @@ import Spin from '@semcore/spin';
|
|
|
10
10
|
import React from 'react';
|
|
11
11
|
import BaseTrigger from './BaseTrigger';
|
|
12
12
|
/*!__reshadow-styles__:"./style/button-trigger.shadow.css"*/
|
|
13
|
-
const style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".
|
|
13
|
+
const style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___SButtonAddon_1qcck_gg_{width:var(--intergalactic-spacing-3x,12px);height:var(--intergalactic-spacing-3x,12px);color:var(--intergalactic-icon-non-interactive,#00040180);position:relative;left:var(--intergalactic-spacing-05x,2px)}@media (color-gamut:p3){.___SButtonAddon_1qcck_gg_{color:var(--intergalactic-icon-non-interactive,oklch(.094 .024 153.9/.503))}}.___SButtonTriggerSpin_1qcck_gg_{fill:var(--intergalactic-icon-non-interactive,#00040180)}@media (color-gamut:p3){.___SButtonTriggerSpin_1qcck_gg_{fill:var(--intergalactic-icon-non-interactive,oklch(.094 .024 153.9/.503))}}", /*__inner_css_end__*/"1qcck_gg_"),
|
|
14
14
|
/*__reshadow_css_end__*/
|
|
15
15
|
{
|
|
16
|
-
"__SButtonAddon": "
|
|
17
|
-
"__SButtonTriggerSpin": "
|
|
16
|
+
"__SButtonAddon": "___SButtonAddon_1qcck_gg_",
|
|
17
|
+
"__SButtonTriggerSpin": "___SButtonTriggerSpin_1qcck_gg_"
|
|
18
18
|
});
|
|
19
19
|
class RootButtonTrigger extends Component {
|
|
20
20
|
getTextProps() {
|
|
@@ -43,8 +43,7 @@ class RootButtonTrigger extends Component {
|
|
|
43
43
|
return _ref2 = sstyled(styles), /*#__PURE__*/React.createElement(BaseTrigger, _assignProps({
|
|
44
44
|
"use:disabled": disabled || loading
|
|
45
45
|
}, _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", {
|
|
46
|
-
"size": 'xs'
|
|
47
|
-
"theme": false
|
|
46
|
+
"size": 'xs'
|
|
48
47
|
})) : /*#__PURE__*/React.createElement(ChevronDown, _ref2.cn("ChevronDown", {}))));
|
|
49
48
|
}
|
|
50
49
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonTrigger.js","names":["createComponent","Component","Root","sstyled","addonTextChildren","animatedSizeEnhance","cssVariableEnhance","ChevronDown","Spin","React","BaseTrigger","style","_sstyled","insert","RootButtonTrigger","getTextProps","tag","getAddonProps","render","_ref","asProps","_ref2","SButtonAddon","ButtonTrigger","Addon","SButtonTriggerSpin","Children","styles","loading","disabled","chevron","empty","createElement","_assignProps","Text","cn","_defineProperty","variable","fallback","map","Number","parseInt","prop","animateProps","onChangeOf","parent"],"sources":["../../src/ButtonTrigger.jsx"],"sourcesContent":["import { createComponent, Component, Root, sstyled } from '@semcore/core';\nimport addonTextChildren from '@semcore/core/lib/utils/addonTextChildren';\nimport animatedSizeEnhance from '@semcore/core/lib/utils/enhances/animatedSizeEnhance';\nimport { cssVariableEnhance } from '@semcore/core/lib/utils/useCssVariable';\nimport ChevronDown from '@semcore/icon/ChevronDown/m';\nimport Spin from '@semcore/spin';\nimport React from 'react';\n\nimport BaseTrigger from './BaseTrigger';\nimport style from './style/button-trigger.shadow.css';\n\nclass RootButtonTrigger extends Component {\n static displayName = 'ButtonTrigger';\n static style = style;\n static enhance = [\n cssVariableEnhance({\n variable: '--intergalactic-duration-control',\n fallback: '200',\n map: Number.parseInt,\n prop: 'duration',\n }),\n animatedSizeEnhance({\n animateProps: ['width'],\n onChangeOf: ['value'],\n }),\n ];\n\n static defaultProps = {\n chevron: true,\n };\n\n getTextProps() {\n return {\n tag: 'span',\n };\n }\n\n getAddonProps() {\n return {\n tag: 'span',\n };\n }\n\n render() {\n const SButtonAddon = ButtonTrigger.Addon;\n const SButtonTriggerSpin = Spin;\n const { Children, styles, loading, disabled, chevron, empty } = this.asProps;\n\n return sstyled(styles)(\n <Root render={BaseTrigger} use:disabled={disabled || loading}>\n {addonTextChildren(Children, ButtonTrigger.Text, ButtonTrigger.Addon, empty)}\n {(chevron || loading) && (\n <SButtonAddon>\n {loading ? <SButtonTriggerSpin size='xs'
|
|
1
|
+
{"version":3,"file":"ButtonTrigger.js","names":["createComponent","Component","Root","sstyled","addonTextChildren","animatedSizeEnhance","cssVariableEnhance","ChevronDown","Spin","React","BaseTrigger","style","_sstyled","insert","RootButtonTrigger","getTextProps","tag","getAddonProps","render","_ref","asProps","_ref2","SButtonAddon","ButtonTrigger","Addon","SButtonTriggerSpin","Children","styles","loading","disabled","chevron","empty","createElement","_assignProps","Text","cn","_defineProperty","variable","fallback","map","Number","parseInt","prop","animateProps","onChangeOf","parent"],"sources":["../../src/ButtonTrigger.jsx"],"sourcesContent":["import { createComponent, Component, Root, sstyled } from '@semcore/core';\nimport addonTextChildren from '@semcore/core/lib/utils/addonTextChildren';\nimport animatedSizeEnhance from '@semcore/core/lib/utils/enhances/animatedSizeEnhance';\nimport { cssVariableEnhance } from '@semcore/core/lib/utils/useCssVariable';\nimport ChevronDown from '@semcore/icon/ChevronDown/m';\nimport Spin from '@semcore/spin';\nimport React from 'react';\n\nimport BaseTrigger from './BaseTrigger';\nimport style from './style/button-trigger.shadow.css';\n\nclass RootButtonTrigger extends Component {\n static displayName = 'ButtonTrigger';\n static style = style;\n static enhance = [\n cssVariableEnhance({\n variable: '--intergalactic-duration-control',\n fallback: '200',\n map: Number.parseInt,\n prop: 'duration',\n }),\n animatedSizeEnhance({\n animateProps: ['width'],\n onChangeOf: ['value'],\n }),\n ];\n\n static defaultProps = {\n chevron: true,\n };\n\n getTextProps() {\n return {\n tag: 'span',\n };\n }\n\n getAddonProps() {\n return {\n tag: 'span',\n };\n }\n\n render() {\n const SButtonAddon = ButtonTrigger.Addon;\n const SButtonTriggerSpin = Spin;\n const { Children, styles, loading, disabled, chevron, empty } = this.asProps;\n\n return sstyled(styles)(\n <Root render={BaseTrigger} use:disabled={disabled || loading}>\n {addonTextChildren(Children, ButtonTrigger.Text, ButtonTrigger.Addon, empty)}\n {(chevron || loading) && (\n <SButtonAddon>\n {loading ? <SButtonTriggerSpin size='xs' /> : <ChevronDown />}\n </SButtonAddon>\n )}\n </Root>,\n );\n }\n}\n\n/**\n * ButtonTrigger\n *\n * {@link https://developer.semrush.com/intergalactic/components/base-trigger/base-trigger-api#buttontrigger|API} | {@link https://developer.semrush.com/intergalactic/components/base-trigger/base-trigger-code#buttontrigger|Examples}\n */\nconst ButtonTrigger = createComponent(\n RootButtonTrigger,\n {\n Text: BaseTrigger.Text,\n Addon: BaseTrigger.Addon,\n },\n {\n parent: BaseTrigger,\n },\n);\n\nexport default ButtonTrigger;\n"],"mappings":";;;AAAA,SAASA,eAAe,EAAEC,SAAS,EAAEC,IAAI,EAAEC,OAAO,QAAQ,eAAe;AACzE,OAAOC,iBAAiB,MAAM,2CAA2C;AACzE,OAAOC,mBAAmB,MAAM,sDAAsD;AACtF,SAASC,kBAAkB,QAAQ,wCAAwC;AAC3E,OAAOC,WAAW,MAAM,6BAA6B;AACrD,OAAOC,IAAI,MAAM,eAAe;AAChC,OAAOC,KAAK,MAAM,OAAO;AAEzB,OAAOC,WAAW,MAAM,eAAe;AAAC;AAAA,MAAAC,KAAA,8BAAAC,QAAA,CAAAC,MAAA;AAAA;AAAA;EAAA;EAAA;AAAA;AAGxC,MAAMC,iBAAiB,SAASb,SAAS,CAAC;EAoBxCc,YAAYA,CAAA,EAAG;IACb,OAAO;MACLC,GAAG,EAAE;IACP,CAAC;EACH;EAEAC,aAAaA,CAAA,EAAG;IACd,OAAO;MACLD,GAAG,EAAE;IACP,CAAC;EACH;EAEAE,MAAMA,CAAA,EAAG;IAAA,IAAAC,IAAA,QAAAC,OAAA;MAAAC,KAAA;IACP,MAAMC,YAAY,GAAGC,aAAa,CAACC,KAAK;IACxC,MAAMC,kBAAkB,GAAGjB,IAAI;IAC/B,MAAM;MAAEkB,QAAQ;MAAEC,MAAM;MAAEC,OAAO;MAAEC,QAAQ;MAAEC,OAAO;MAAEC;IAAM,CAAC,GAAG,IAAI,CAACX,OAAO;IAE5E,OAAAC,KAAA,GAAOlB,OAAO,CAACwB,MAAM,CAAC,eACpBlB,KAAA,CAAAuB,aAAA,CAActB,WAAW,EAAAuB,YAAA;MAAA,gBAAgBJ,QAAQ,IAAID;IAAO,GAAAT,IAAA,GACzDf,iBAAiB,CAACsB,QAAQ,EAAEH,aAAa,CAACW,IAAI,EAAEX,aAAa,CAACC,KAAK,EAAEO,KAAK,CAAC,EAC3E,CAACD,OAAO,IAAIF,OAAO,kBAClBnB,KAAA,CAAAuB,aAAA,CAACV,YAAY,EAAAD,KAAA,CAAAc,EAAA,sBACVP,OAAO,gBAAGnB,KAAA,CAAAuB,aAAA,CAACP,kBAAkB,EAAAJ,KAAA,CAAAc,EAAA;MAAA,QAAM;IAAI,EAAE,CAAC,gBAAG1B,KAAA,CAAAuB,aAAA,CAACzB,WAAW,EAAAc,KAAA,CAAAc,EAAA,mBAAE,CAChD,CAEZ,CAAC;EAEX;AACF;;AAEA;AACA;AACA;AACA;AACA;AAJAC,eAAA,CAlDMtB,iBAAiB,iBACA,eAAe;AAAAsB,eAAA,CADhCtB,iBAAiB,WAENH,KAAK;AAAAyB,eAAA,CAFhBtB,iBAAiB,aAGJ,CACfR,kBAAkB,CAAC;EACjB+B,QAAQ,EAAE,kCAAkC;EAC5CC,QAAQ,EAAE,KAAK;EACfC,GAAG,EAAEC,MAAM,CAACC,QAAQ;EACpBC,IAAI,EAAE;AACR,CAAC,CAAC,EACFrC,mBAAmB,CAAC;EAClBsC,YAAY,EAAE,CAAC,OAAO,CAAC;EACvBC,UAAU,EAAE,CAAC,OAAO;AACtB,CAAC,CAAC,CACH;AAAAR,eAAA,CAdGtB,iBAAiB,kBAgBC;EACpBgB,OAAO,EAAE;AACX,CAAC;AAqCH,MAAMP,aAAa,GAAGvB,eAAe,CACnCc,iBAAiB,EACjB;EACEoB,IAAI,EAAExB,WAAW,CAACwB,IAAI;EACtBV,KAAK,EAAEd,WAAW,CAACc;AACrB,CAAC,EACD;EACEqB,MAAM,EAAEnC;AACV,CACF,CAAC;AAED,eAAea,aAAa","ignoreList":[]}
|
package/lib/es6/FilterTrigger.js
CHANGED
|
@@ -4,7 +4,7 @@ import { assignProps as _assignProps4 } from "@semcore/core";
|
|
|
4
4
|
import { assignProps as _assignProps3 } from "@semcore/core";
|
|
5
5
|
import { assignProps as _assignProps2 } from "@semcore/core";
|
|
6
6
|
import { assignProps as _assignProps } from "@semcore/core";
|
|
7
|
-
import {
|
|
7
|
+
import { Box, ScreenReaderOnly, Hint } from '@semcore/base-components';
|
|
8
8
|
import { createComponent, Component, Root, sstyled } from '@semcore/core';
|
|
9
9
|
import addonTextChildren from '@semcore/core/lib/utils/addonTextChildren';
|
|
10
10
|
import { callAllEventHandlers } from '@semcore/core/lib/utils/assignProps';
|
|
@@ -21,13 +21,18 @@ import Close from '@semcore/icon/Close/m';
|
|
|
21
21
|
import React from 'react';
|
|
22
22
|
import BaseTrigger from './BaseTrigger';
|
|
23
23
|
/*!__reshadow-styles__:"./style/filter-trigger.shadow.css"*/
|
|
24
|
-
const style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".
|
|
24
|
+
const style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___STrigger_3xqvi_gg_{position:relative}.___STrigger_3xqvi_gg_._role_combobox_3xqvi_gg_:not(.__empty_3xqvi_gg_){border-right:none;border-top-right-radius:0;border-bottom-right-radius:0}.___STrigger_3xqvi_gg_._role_combobox_3xqvi_gg_:not(.__empty_3xqvi_gg_):before{content:\"\";position:absolute;right:0;top:50%;transform:translateY(-50%);width:1px;background-color:var(--intergalactic-border-primary,#000c0829);transition:height calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-out}@media (color-gamut:p3){.___STrigger_3xqvi_gg_._role_combobox_3xqvi_gg_:not(.__empty_3xqvi_gg_):before{background-color:var(--intergalactic-border-primary,oklch(.137 .026 175.7/.161))}}.___STrigger_3xqvi_gg_._role_combobox_3xqvi_gg_._size_m_3xqvi_gg_:not(.__empty_3xqvi_gg_):before{height:16px}.___STrigger_3xqvi_gg_._role_combobox_3xqvi_gg_._size_l_3xqvi_gg_:not(.__empty_3xqvi_gg_):before{height:24px}.___STrigger_3xqvi_gg_._role_combobox_3xqvi_gg_.__active_3xqvi_gg_:not(.__empty_3xqvi_gg_):before,.___STrigger_3xqvi_gg_._role_combobox_3xqvi_gg_:not(.__empty_3xqvi_gg_):active:before{height:calc(100% - 2px)}.___STrigger_3xqvi_gg_._role_combobox_3xqvi_gg_.__disabled_3xqvi_gg_:not(.__empty_3xqvi_gg_){opacity:1}.___SClear_3xqvi_gg_{border-top-left-radius:0;border-bottom-left-radius:0}.___SClear_3xqvi_gg_.__disabled_3xqvi_gg_{opacity:1}@media (hover:hover){.___SWrapper_3xqvi_gg_:hover:not(:has(.__disabled_3xqvi_gg_)) .___STrigger_3xqvi_gg_._role_combobox_3xqvi_gg_._size_l_3xqvi_gg_:not(.__empty_3xqvi_gg_):before,.___SWrapper_3xqvi_gg_:hover:not(:has(.__disabled_3xqvi_gg_)) .___STrigger_3xqvi_gg_._role_combobox_3xqvi_gg_._size_m_3xqvi_gg_:not(.__empty_3xqvi_gg_):before{height:calc(100% - 2px)}}.___SWrapper_3xqvi_gg_{display:inline-flex;position:relative;border-radius:var(--intergalactic-control-rounded,6px)}.___SWrapper_3xqvi_gg_:after{content:\"\";position:absolute;border:1px solid var(--intergalactic-border-primary,#000c0829);border-radius:var(--intergalactic-control-rounded,6px);top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none}@media (color-gamut:p3){.___SWrapper_3xqvi_gg_:after{border:1px solid var(--intergalactic-border-primary,oklch(.137 .026 175.7/.161))}}.___SWrapper_3xqvi_gg_.__empty_3xqvi_gg_.__active_3xqvi_gg_,.___SWrapper_3xqvi_gg_.__empty_3xqvi_gg_:active,.___SWrapper_3xqvi_gg_.__empty_3xqvi_gg_:has(.___STrigger_3xqvi_gg_:focus-visible){background-color:var(--intergalactic-control-select-trigger-active,oklch(.96 .001 180))}.___SWrapper_3xqvi_gg_.__empty_3xqvi_gg_.__active_3xqvi_gg_ .___STrigger_3xqvi_gg_,.___SWrapper_3xqvi_gg_.__empty_3xqvi_gg_:active .___STrigger_3xqvi_gg_,.___SWrapper_3xqvi_gg_.__empty_3xqvi_gg_:has(.___STrigger_3xqvi_gg_:focus-visible) .___STrigger_3xqvi_gg_{background:var(--intergalactic-control-select-trigger-normal,oklch(1 0 0))}.___SWrapper_3xqvi_gg_.__empty_3xqvi_gg_.__active_3xqvi_gg_:after,.___SWrapper_3xqvi_gg_.__empty_3xqvi_gg_:active:after,.___SWrapper_3xqvi_gg_.__empty_3xqvi_gg_:has(.___STrigger_3xqvi_gg_:focus-visible):after{border-color:var(--intergalactic-border-info-active,oklch(.7 .131 275.2))}.___SWrapper_3xqvi_gg_:focus{outline:none}.___SWrapper_3xqvi_gg_.__disabled_3xqvi_gg_{opacity:var(--intergalactic-disabled-opacity,.4)}.___SWrapper_3xqvi_gg_ :is(.___SClear_3xqvi_gg_,.___STrigger_3xqvi_gg_){border:none}.___SWrapper_3xqvi_gg_ :is(.___SClear_3xqvi_gg_.__active_3xqvi_gg_,.___SClear_3xqvi_gg_:active,.___STrigger_3xqvi_gg_.__active_3xqvi_gg_,.___STrigger_3xqvi_gg_:active){background-color:var(--intergalactic-control-select-trigger-active,oklch(.96 .001 180))}", /*__inner_css_end__*/"3xqvi_gg_"),
|
|
25
25
|
/*__reshadow_css_end__*/
|
|
26
26
|
{
|
|
27
|
-
"
|
|
28
|
-
"
|
|
29
|
-
"
|
|
30
|
-
"
|
|
27
|
+
"__STrigger": "___STrigger_3xqvi_gg_",
|
|
28
|
+
"_role_combobox": "_role_combobox_3xqvi_gg_",
|
|
29
|
+
"_empty": "__empty_3xqvi_gg_",
|
|
30
|
+
"_size_m": "_size_m_3xqvi_gg_",
|
|
31
|
+
"_size_l": "_size_l_3xqvi_gg_",
|
|
32
|
+
"_active": "__active_3xqvi_gg_",
|
|
33
|
+
"_disabled": "__disabled_3xqvi_gg_",
|
|
34
|
+
"__SClear": "___SClear_3xqvi_gg_",
|
|
35
|
+
"__SWrapper": "___SWrapper_3xqvi_gg_"
|
|
31
36
|
});
|
|
32
37
|
import { localizedMessages } from './translations/__intergalactic-dynamic-locales';
|
|
33
38
|
const filterTriggerInputProps = [...inputProps, 'aria-controls', 'aria-haspopup', 'aria-expanded', 'aria-disabled', 'aria-activedescendant', 'aria-label', 'aria-labelledby', 'role'];
|
|
@@ -121,7 +126,7 @@ class RootFilterTrigger extends Component {
|
|
|
121
126
|
"use:aria-label": undefined,
|
|
122
127
|
"use:aria-labelledby": undefined
|
|
123
128
|
}, _ref)
|
|
124
|
-
}),
|
|
129
|
+
}), advancedMode ? /*#__PURE__*/React.createElement(Children, _ref5.cn("Children", {})) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FilterTrigger.TriggerButton, null, /*#__PURE__*/React.createElement(Children, _ref5.cn("Children", {}))), !empty && /*#__PURE__*/React.createElement(FilterTrigger.ClearButton, null)));
|
|
125
130
|
}
|
|
126
131
|
}
|
|
127
132
|
_defineProperty(RootFilterTrigger, "displayName", 'FilterTrigger');
|
|
@@ -146,14 +151,14 @@ class TriggerButton extends Component {
|
|
|
146
151
|
render() {
|
|
147
152
|
var _ref2 = this.asProps,
|
|
148
153
|
_ref6;
|
|
149
|
-
const
|
|
154
|
+
const STrigger = BaseTrigger;
|
|
150
155
|
const {
|
|
151
156
|
Children,
|
|
152
157
|
styles,
|
|
153
158
|
empty,
|
|
154
159
|
triggerRef
|
|
155
160
|
} = this.asProps;
|
|
156
|
-
return _ref6 = sstyled(styles), /*#__PURE__*/React.createElement(
|
|
161
|
+
return _ref6 = sstyled(styles), /*#__PURE__*/React.createElement(STrigger, _ref6.cn("STrigger", {
|
|
157
162
|
..._assignProps2({
|
|
158
163
|
"use:role": 'combobox',
|
|
159
164
|
"w": '100%',
|
|
@@ -177,7 +182,7 @@ class ClearButton extends Component {
|
|
|
177
182
|
render() {
|
|
178
183
|
var _ref3 = this.asProps,
|
|
179
184
|
_ref7;
|
|
180
|
-
const
|
|
185
|
+
const SClear = BaseTrigger;
|
|
181
186
|
const {
|
|
182
187
|
styles,
|
|
183
188
|
empty,
|
|
@@ -188,7 +193,7 @@ class ClearButton extends Component {
|
|
|
188
193
|
title
|
|
189
194
|
} = this.asProps;
|
|
190
195
|
if (empty) return null;
|
|
191
|
-
return _ref7 = sstyled(styles), /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(
|
|
196
|
+
return _ref7 = sstyled(styles), /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SClear, _ref7.cn("SClear", {
|
|
192
197
|
..._assignProps3({
|
|
193
198
|
"ref": this.triggerRef,
|
|
194
199
|
"size": size,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FilterTrigger.js","names":["NeighborLocation","Box","ScreenReaderOnly","Hint","createComponent","Component","Root","sstyled","addonTextChildren","callAllEventHandlers","animatedSizeEnhance","i18nEnhance","isAdvanceMode","getInputProps","inputProps","uniqueIDEnhancement","setFocus","cssVariableEnhance","default","SemcoreCounter","ChevronDown","Close","React","BaseTrigger","style","_sstyled","insert","localizedMessages","filterTriggerInputProps","RootFilterTrigger","constructor","args","_defineProperty","e","key","stopPropagation","requestAnimationFrame","asProps","triggerRef","current","getTriggerButtonProps","empty","size","placeholder","active","disabled","includeInputProps","_dataUiName","other","controlProps","selected","getClearButtonProps","onClear","getI18nText","onClick","handleClear","handleStopPropagation","onKeyDown","getCounterProps","render","_ref","_ref5","SWrapper","Children","styles","forcedAdvancedMode","advancedMode","FilterTrigger","TriggerButton","displayName","ClearButton","createElement","cn","_assignProps","undefined","Fragment","variable","fallback","map","Number","parseInt","prop","animateProps","onChangeOf","i18n","locale","createRef","role","_ref2","_ref6","SFilterTrigger","_assignProps2","Text","Addon","Counter","tag","_ref3","_ref7","ariaLabel","title","_assignProps3","count","_ref4","arguments[0]","_ref8","SCounter","_assignProps4","parent"],"sources":["../../src/FilterTrigger.jsx"],"sourcesContent":["import { NeighborLocation, Box, ScreenReaderOnly, Hint } from '@semcore/base-components';\nimport { createComponent, Component, Root, sstyled } from '@semcore/core';\nimport addonTextChildren from '@semcore/core/lib/utils/addonTextChildren';\nimport { callAllEventHandlers } from '@semcore/core/lib/utils/assignProps';\nimport animatedSizeEnhance from '@semcore/core/lib/utils/enhances/animatedSizeEnhance';\nimport i18nEnhance from '@semcore/core/lib/utils/enhances/i18nEnhance';\nimport { isAdvanceMode } from '@semcore/core/lib/utils/findComponent';\nimport getInputProps, { inputProps } from '@semcore/core/lib/utils/inputProps';\nimport uniqueIDEnhancement from '@semcore/core/lib/utils/uniqueID';\nimport { setFocus } from '@semcore/core/lib/utils/use/useFocusLock';\nimport { cssVariableEnhance } from '@semcore/core/lib/utils/useCssVariable';\nimport { default as SemcoreCounter } from '@semcore/counter';\nimport ChevronDown from '@semcore/icon/ChevronDown/m';\nimport Close from '@semcore/icon/Close/m';\nimport React from 'react';\n\nimport BaseTrigger from './BaseTrigger';\nimport style from './style/filter-trigger.shadow.css';\nimport { localizedMessages } from './translations/__intergalactic-dynamic-locales';\n\nconst filterTriggerInputProps = [\n ...inputProps,\n 'aria-controls',\n 'aria-haspopup',\n 'aria-expanded',\n 'aria-disabled',\n 'aria-activedescendant',\n 'aria-label',\n 'aria-labelledby',\n 'role',\n];\n\nclass RootFilterTrigger extends Component {\n static displayName = 'FilterTrigger';\n static style = style;\n static enhance = [\n i18nEnhance(localizedMessages),\n cssVariableEnhance({\n variable: '--intergalactic-duration-control',\n fallback: '200',\n map: Number.parseInt,\n prop: 'duration',\n }),\n animatedSizeEnhance({\n animateProps: ['width'],\n onChangeOf: ['value'],\n }),\n uniqueIDEnhancement(),\n ];\n\n static defaultProps = () => ({\n includeInputProps: filterTriggerInputProps,\n i18n: localizedMessages,\n locale: 'en',\n triggerRef: React.createRef(),\n role: 'group',\n });\n\n handleStopPropagation = (e) => {\n if (e.key === 'Escape') return;\n\n e.stopPropagation();\n };\n\n handleClear = () => {\n requestAnimationFrame(() => {\n setFocus(this.asProps.triggerRef.current);\n });\n };\n\n getTriggerButtonProps() {\n const {\n empty,\n size,\n placeholder,\n active,\n disabled,\n includeInputProps,\n triggerRef,\n 'data-ui-name': _dataUiName,\n ...other\n } = this.asProps;\n\n const [controlProps] = getInputProps(other, includeInputProps);\n\n return {\n size,\n placeholder,\n empty,\n selected: !empty,\n active,\n disabled,\n triggerRef,\n ...controlProps,\n };\n }\n\n getClearButtonProps() {\n const { empty, onClear, size, disabled, getI18nText } = this.asProps;\n\n return {\n size,\n empty,\n onClick: callAllEventHandlers(onClear, this.handleClear, this.handleStopPropagation),\n onKeyDown: this.handleStopPropagation,\n disabled,\n getI18nText,\n };\n }\n\n getCounterProps() {\n const { getI18nText, size } = this.asProps;\n\n return {\n getI18nText,\n size,\n };\n }\n\n render() {\n const SWrapper = Root;\n const { Children, styles, getI18nText, empty, forcedAdvancedMode } = this.asProps;\n\n const advancedMode =\n forcedAdvancedMode ||\n isAdvanceMode(\n Children,\n [FilterTrigger.TriggerButton.displayName, FilterTrigger.ClearButton.displayName],\n true,\n );\n\n return sstyled(styles)(\n <SWrapper\n render={Box}\n aria-label={getI18nText('filter')}\n __excludeProps={['id']}\n use:role={undefined}\n use:aria-controls={undefined}\n use:aria-owns={undefined}\n use:aria-haspopup={undefined}\n use:aria-expanded={undefined}\n use:aria-disabled={undefined}\n use:aria-activedescendant={undefined}\n use:aria-label={undefined}\n use:aria-labelledby={undefined}\n >\n <NeighborLocation>\n {advancedMode\n ? (\n <Children />\n )\n : (\n <>\n <FilterTrigger.TriggerButton>\n <Children />\n </FilterTrigger.TriggerButton>\n {!empty && <FilterTrigger.ClearButton />}\n </>\n )}\n </NeighborLocation>\n </SWrapper>,\n );\n }\n}\n\nclass TriggerButton extends Component {\n static displayName = 'TriggerButton';\n static style = style;\n\n render() {\n const SFilterTrigger = Root;\n const { Children, styles, empty, triggerRef } = this.asProps;\n\n return sstyled(styles)(\n <SFilterTrigger\n render={BaseTrigger}\n use:role='combobox'\n w='100%'\n empty={empty}\n selected={!empty}\n ref={triggerRef}\n animationsDisabled\n >\n {addonTextChildren(\n Children,\n FilterTrigger.Text,\n [FilterTrigger.Addon, FilterTrigger.Counter],\n empty,\n )}\n {empty && <FilterTrigger.Addon tag={ChevronDown} />}\n </SFilterTrigger>,\n );\n }\n}\n\nclass ClearButton extends Component {\n static displayName = 'ClearButton';\n static style = style;\n\n triggerRef = React.createRef();\n\n render() {\n const SFilterTrigger = Root;\n const {\n styles,\n empty,\n size,\n disabled,\n getI18nText,\n 'aria-label': ariaLabel,\n title,\n } = this.asProps;\n\n if (empty) return null;\n\n return sstyled(styles)(\n <>\n <SFilterTrigger\n ref={this.triggerRef}\n render={BaseTrigger}\n size={size}\n empty={empty}\n selected\n disabled={disabled}\n aria-label={title ?? ariaLabel ?? getI18nText('clear')}\n __excludeProps={['title']}\n >\n <FilterTrigger.Addon tag={Close} />\n </SFilterTrigger>\n\n <Hint triggerRef={this.triggerRef}>{title ?? ariaLabel ?? getI18nText('clear')}</Hint>\n </>,\n );\n }\n}\n\nfunction Counter({ styles, Children, count, getI18nText }) {\n const SCounter = Root;\n return sstyled(styles)(\n <SCounter render={BaseTrigger.Addon} tag={SemcoreCounter} theme='info'>\n {count !== undefined\n ? (\n <>\n {count}\n <ScreenReaderOnly>\n {getI18nText('BaseTrigger.FilterTrigger.Counter.selected:aria-label')}\n </ScreenReaderOnly>\n </>\n )\n : (\n <Children />\n )}\n </SCounter>,\n );\n}\n\n/**\n * FilterTrigger\n *\n * {@link https://developer.semrush.com/intergalactic/components/base-trigger/base-trigger-api#filtertrigger|API} | {@link https://developer.semrush.com/intergalactic/components/base-trigger/base-trigger-code#filtertrigger|Examples}\n */\nconst FilterTrigger = createComponent(\n RootFilterTrigger,\n {\n Text: BaseTrigger.Text,\n Addon: BaseTrigger.Addon,\n Counter,\n TriggerButton,\n ClearButton,\n },\n {\n parent: BaseTrigger,\n },\n);\n\nexport default FilterTrigger;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"FilterTrigger.js","names":["Box","ScreenReaderOnly","Hint","createComponent","Component","Root","sstyled","addonTextChildren","callAllEventHandlers","animatedSizeEnhance","i18nEnhance","isAdvanceMode","getInputProps","inputProps","uniqueIDEnhancement","setFocus","cssVariableEnhance","default","SemcoreCounter","ChevronDown","Close","React","BaseTrigger","style","_sstyled","insert","localizedMessages","filterTriggerInputProps","RootFilterTrigger","constructor","args","_defineProperty","e","key","stopPropagation","requestAnimationFrame","asProps","triggerRef","current","getTriggerButtonProps","empty","size","placeholder","active","disabled","includeInputProps","_dataUiName","other","controlProps","selected","getClearButtonProps","onClear","getI18nText","onClick","handleClear","handleStopPropagation","onKeyDown","getCounterProps","render","_ref","_ref5","SWrapper","Children","styles","forcedAdvancedMode","advancedMode","FilterTrigger","TriggerButton","displayName","ClearButton","createElement","cn","_assignProps","undefined","Fragment","variable","fallback","map","Number","parseInt","prop","animateProps","onChangeOf","i18n","locale","createRef","role","_ref2","_ref6","STrigger","_assignProps2","Text","Addon","Counter","tag","_ref3","_ref7","SClear","ariaLabel","title","_assignProps3","count","_ref4","arguments[0]","_ref8","SCounter","_assignProps4","parent"],"sources":["../../src/FilterTrigger.jsx"],"sourcesContent":["import { Box, ScreenReaderOnly, Hint } from '@semcore/base-components';\nimport { createComponent, Component, Root, sstyled } from '@semcore/core';\nimport addonTextChildren from '@semcore/core/lib/utils/addonTextChildren';\nimport { callAllEventHandlers } from '@semcore/core/lib/utils/assignProps';\nimport animatedSizeEnhance from '@semcore/core/lib/utils/enhances/animatedSizeEnhance';\nimport i18nEnhance from '@semcore/core/lib/utils/enhances/i18nEnhance';\nimport { isAdvanceMode } from '@semcore/core/lib/utils/findComponent';\nimport getInputProps, { inputProps } from '@semcore/core/lib/utils/inputProps';\nimport uniqueIDEnhancement from '@semcore/core/lib/utils/uniqueID';\nimport { setFocus } from '@semcore/core/lib/utils/use/useFocusLock';\nimport { cssVariableEnhance } from '@semcore/core/lib/utils/useCssVariable';\nimport { default as SemcoreCounter } from '@semcore/counter';\nimport ChevronDown from '@semcore/icon/ChevronDown/m';\nimport Close from '@semcore/icon/Close/m';\nimport React from 'react';\n\nimport BaseTrigger from './BaseTrigger';\nimport style from './style/filter-trigger.shadow.css';\nimport { localizedMessages } from './translations/__intergalactic-dynamic-locales';\n\nconst filterTriggerInputProps = [\n ...inputProps,\n 'aria-controls',\n 'aria-haspopup',\n 'aria-expanded',\n 'aria-disabled',\n 'aria-activedescendant',\n 'aria-label',\n 'aria-labelledby',\n 'role',\n];\n\nclass RootFilterTrigger extends Component {\n static displayName = 'FilterTrigger';\n static style = style;\n static enhance = [\n i18nEnhance(localizedMessages),\n cssVariableEnhance({\n variable: '--intergalactic-duration-control',\n fallback: '200',\n map: Number.parseInt,\n prop: 'duration',\n }),\n animatedSizeEnhance({\n animateProps: ['width'],\n onChangeOf: ['value'],\n }),\n uniqueIDEnhancement(),\n ];\n\n static defaultProps = () => ({\n includeInputProps: filterTriggerInputProps,\n i18n: localizedMessages,\n locale: 'en',\n triggerRef: React.createRef(),\n role: 'group',\n });\n\n handleStopPropagation = (e) => {\n if (e.key === 'Escape') return;\n\n e.stopPropagation();\n };\n\n handleClear = () => {\n requestAnimationFrame(() => {\n setFocus(this.asProps.triggerRef.current);\n });\n };\n\n getTriggerButtonProps() {\n const {\n empty,\n size,\n placeholder,\n active,\n disabled,\n includeInputProps,\n triggerRef,\n 'data-ui-name': _dataUiName,\n ...other\n } = this.asProps;\n\n const [controlProps] = getInputProps(other, includeInputProps);\n\n return {\n size,\n placeholder,\n empty,\n selected: !empty,\n active,\n disabled,\n triggerRef,\n ...controlProps,\n };\n }\n\n getClearButtonProps() {\n const { empty, onClear, size, disabled, getI18nText } = this.asProps;\n\n return {\n size,\n empty,\n onClick: callAllEventHandlers(onClear, this.handleClear, this.handleStopPropagation),\n onKeyDown: this.handleStopPropagation,\n disabled,\n getI18nText,\n };\n }\n\n getCounterProps() {\n const { getI18nText, size } = this.asProps;\n\n return {\n getI18nText,\n size,\n };\n }\n\n render() {\n const SWrapper = Root;\n const { Children, styles, getI18nText, empty, forcedAdvancedMode } = this.asProps;\n\n const advancedMode =\n forcedAdvancedMode ||\n isAdvanceMode(\n Children,\n [FilterTrigger.TriggerButton.displayName, FilterTrigger.ClearButton.displayName],\n true,\n );\n\n return sstyled(styles)(\n <SWrapper\n render={Box}\n aria-label={getI18nText('filter')}\n __excludeProps={['id']}\n use:role={undefined}\n use:aria-controls={undefined}\n use:aria-owns={undefined}\n use:aria-haspopup={undefined}\n use:aria-expanded={undefined}\n use:aria-disabled={undefined}\n use:aria-activedescendant={undefined}\n use:aria-label={undefined}\n use:aria-labelledby={undefined}\n >\n {advancedMode\n ? (\n <Children />\n )\n : (\n <>\n <FilterTrigger.TriggerButton>\n <Children />\n </FilterTrigger.TriggerButton>\n {!empty && <FilterTrigger.ClearButton />}\n </>\n )}\n </SWrapper>,\n );\n }\n}\n\nclass TriggerButton extends Component {\n static displayName = 'TriggerButton';\n static style = style;\n\n render() {\n const STrigger = Root;\n const { Children, styles, empty, triggerRef } = this.asProps;\n\n return sstyled(styles)(\n <STrigger\n render={BaseTrigger}\n use:role='combobox'\n w='100%'\n empty={empty}\n selected={!empty}\n ref={triggerRef}\n animationsDisabled\n >\n {addonTextChildren(\n Children,\n FilterTrigger.Text,\n [FilterTrigger.Addon, FilterTrigger.Counter],\n empty,\n )}\n {empty && <FilterTrigger.Addon tag={ChevronDown} />}\n </STrigger>,\n );\n }\n}\n\nclass ClearButton extends Component {\n static displayName = 'ClearButton';\n static style = style;\n\n triggerRef = React.createRef();\n\n render() {\n const SClear = Root;\n const {\n styles,\n empty,\n size,\n disabled,\n getI18nText,\n 'aria-label': ariaLabel,\n title,\n } = this.asProps;\n\n if (empty) return null;\n\n return sstyled(styles)(\n <>\n <SClear\n ref={this.triggerRef}\n render={BaseTrigger}\n size={size}\n empty={empty}\n selected\n disabled={disabled}\n aria-label={title ?? ariaLabel ?? getI18nText('clear')}\n __excludeProps={['title']}\n >\n <FilterTrigger.Addon tag={Close} />\n </SClear>\n\n <Hint triggerRef={this.triggerRef}>{title ?? ariaLabel ?? getI18nText('clear')}</Hint>\n </>,\n );\n }\n}\n\nfunction Counter({ styles, Children, count, getI18nText }) {\n const SCounter = Root;\n return sstyled(styles)(\n <SCounter render={BaseTrigger.Addon} tag={SemcoreCounter} theme='info'>\n {count !== undefined\n ? (\n <>\n {count}\n <ScreenReaderOnly>\n {getI18nText('BaseTrigger.FilterTrigger.Counter.selected:aria-label')}\n </ScreenReaderOnly>\n </>\n )\n : (\n <Children />\n )}\n </SCounter>,\n );\n}\n\n/**\n * FilterTrigger\n *\n * {@link https://developer.semrush.com/intergalactic/components/base-trigger/base-trigger-api#filtertrigger|API} | {@link https://developer.semrush.com/intergalactic/components/base-trigger/base-trigger-code#filtertrigger|Examples}\n */\nconst FilterTrigger = createComponent(\n RootFilterTrigger,\n {\n Text: BaseTrigger.Text,\n Addon: BaseTrigger.Addon,\n Counter,\n TriggerButton,\n ClearButton,\n },\n {\n parent: BaseTrigger,\n },\n);\n\nexport default FilterTrigger;\n"],"mappings":"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","ignoreList":[]}
|
package/lib/es6/index.d.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import type {
|
|
1
|
+
{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import type { NSBox, NSNeighborLocation } from '@semcore/base-components';\nimport type { NSButtonLink } from '@semcore/button';\nimport type { Intergalactic } from '@semcore/core';\nimport type { WithAnimatedSizeEnhanceProps } from '@semcore/core/lib/utils/enhances/animatedSizeEnhance';\nimport type { NSCounter } from '@semcore/counter';\nimport type { Text } from '@semcore/typography';\nimport type React from 'react';\n\nexport type BaseTriggerProps = NSBox.Props &\n NSNeighborLocation.Detect.Props &\n WithAnimatedSizeEnhanceProps & {\n /**\n * Trigger size\n * @default m\n */\n size?: 'm' | 'l';\n /**\n * Trigger state\n */\n state?: 'normal' | 'valid' | 'invalid';\n /**\n * Sets active state to trigger\n */\n active?: boolean;\n /**\n * Responsible for placeholder displaying\n */\n empty?: boolean;\n /**\n * Placeholder text\n */\n placeholder?: React.ReactNode;\n /**\n * Sets disabled state to trigger\n */\n disabled?: boolean;\n };\n\nexport type ButtonTriggerProps = Omit<BaseTriggerProps, 'theme'> & {\n /** Sets the loading state */\n loading?: boolean;\n /**\n * Display the dropdowns chevron icon\n * @default true\n */\n chevron?: boolean;\n};\n\nexport type LinkTriggerProps = NSButtonLink.Props & {\n /** Sets the loading state */\n loading?: boolean;\n /** Placeholder text */\n placeholder?: React.ReactNode;\n /** Responsible for placeholder displaying */\n empty?: boolean;\n};\n\nexport type FilterTriggerProps = BaseTriggerProps & {\n /** Click on the filter cleaning cross */\n onClear?: (event: React.SyntheticEvent) => void;\n /** Specifies the locale for i18n support */\n locale?: string;\n /** List of props that will be added to the select inside of filter */\n includeInputProps?: string[];\n /** Normal `ref` prop refers to FilterTrigger wrapper while `triggerRef` refers explicitly to trigger button */\n triggerRef?: React.Ref<HTMLButtonElement>;\n};\n\nexport type FilterTriggerCounterProps = {\n /** Count for render */\n count?: number;\n};\n\ndeclare const BaseTrigger: Intergalactic.Component<'div', BaseTriggerProps> & {\n Text: typeof Text;\n Addon: NSBox.Component;\n};\n\ndeclare const ButtonTrigger: Intergalactic.Component<'div', ButtonTriggerProps> & {\n Text: typeof BaseTrigger.Text;\n Addon: typeof BaseTrigger.Addon;\n};\n\ndeclare const LinkTrigger: Intergalactic.Component<'div', LinkTriggerProps> & {\n Text: NSButtonLink.Text.Component;\n Addon: NSButtonLink.Addon.Component;\n};\n\ndeclare const FilterTrigger: Intergalactic.Component<'div', FilterTriggerProps> & {\n Text: typeof BaseTrigger.Text;\n Addon: typeof BaseTrigger.Addon;\n Counter: Intergalactic.Component<'div', NSCounter.Props & FilterTriggerCounterProps>;\n TriggerButton: typeof BaseTrigger;\n ClearButton: typeof BaseTrigger;\n};\n\n/**\n * @deprecated. Use one this: ButtonTrigger, FilterTrigger, LinkTrigger.\n */\nexport default BaseTrigger;\nexport { ButtonTrigger, LinkTrigger, FilterTrigger };\n"],"mappings":"","ignoreList":[]}
|
|
@@ -8,7 +8,6 @@ SBaseTrigger {
|
|
|
8
8
|
white-space: nowrap;
|
|
9
9
|
user-select: none;
|
|
10
10
|
box-sizing: border-box;
|
|
11
|
-
padding: 0;
|
|
12
11
|
margin: 0;
|
|
13
12
|
box-shadow: none;
|
|
14
13
|
text-decoration: none;
|
|
@@ -19,12 +18,15 @@ SBaseTrigger {
|
|
|
19
18
|
font-family: inherit;
|
|
20
19
|
cursor: pointer;
|
|
21
20
|
|
|
22
|
-
background: var(--intergalactic-
|
|
21
|
+
background: var(--intergalactic-control-select-trigger-normal, oklch(1 0 0));
|
|
23
22
|
|
|
24
23
|
font-weight: var(--intergalactic-regular, 400);
|
|
25
24
|
border: 1px solid var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
|
|
26
25
|
color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
|
|
27
26
|
|
|
27
|
+
border-radius: var(--intergalactic-control-rounded, 6px);
|
|
28
|
+
padding: 0 var(--intergalactic-spacing-content-padding-medium, 12px);
|
|
29
|
+
|
|
28
30
|
&::-moz-focus-inner {
|
|
29
31
|
border: none;
|
|
30
32
|
padding: 0;
|
|
@@ -40,13 +42,17 @@ SBaseTrigger {
|
|
|
40
42
|
}
|
|
41
43
|
|
|
42
44
|
&:hover {
|
|
43
|
-
background-color: var(--intergalactic-
|
|
45
|
+
background-color: var(--intergalactic-control-select-trigger-hover, oklch(0.97 0.001 180));
|
|
44
46
|
}
|
|
45
47
|
|
|
46
48
|
&:active,
|
|
47
49
|
&[active] {
|
|
48
50
|
border-color: var(--intergalactic-border-info-active, oklch(0.7 0.131 275.2));
|
|
49
|
-
|
|
51
|
+
|
|
52
|
+
&:hover {
|
|
53
|
+
background: var(--intergalactic-control-select-trigger-normal, oklch(1 0 0));
|
|
54
|
+
}
|
|
55
|
+
/*background-color: var(--intergalactic-control-select-trigger-active, oklch(0.96 0.001 180));*/
|
|
50
56
|
}
|
|
51
57
|
}
|
|
52
58
|
|
|
@@ -61,6 +67,7 @@ SInner {
|
|
|
61
67
|
display: inline-flex;
|
|
62
68
|
align-items: center;
|
|
63
69
|
justify-content: center;
|
|
70
|
+
gap: var(--intergalactic-spacing-content-gap-medium, 6px);
|
|
64
71
|
height: 100%;
|
|
65
72
|
width: 100%;
|
|
66
73
|
}
|
|
@@ -68,11 +75,9 @@ SInner {
|
|
|
68
75
|
SText {
|
|
69
76
|
display: inline;
|
|
70
77
|
/* disable-tokens-validator */
|
|
71
|
-
padding: 1px 0;
|
|
72
78
|
overflow: hidden;
|
|
73
79
|
white-space: nowrap;
|
|
74
80
|
text-overflow: ellipsis;
|
|
75
|
-
line-height: var(--intergalactic-lh-200, 142%);
|
|
76
81
|
flex-grow: 1;
|
|
77
82
|
text-align: left;
|
|
78
83
|
}
|
|
@@ -83,57 +88,25 @@ SAddon {
|
|
|
83
88
|
justify-content: center;
|
|
84
89
|
flex-shrink: 0;
|
|
85
90
|
pointer-events: none;
|
|
86
|
-
}
|
|
87
91
|
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
92
|
+
&:only-child {
|
|
93
|
+
margin-left: calc(-1 * var(--intergalactic-spacing-content-gap-small, 4px));
|
|
94
|
+
margin-right: calc(-1 * var(--intergalactic-spacing-content-gap-small, 4px));
|
|
95
|
+
}
|
|
91
96
|
}
|
|
92
97
|
|
|
93
98
|
SBaseTrigger[size='m'] {
|
|
94
|
-
min-width:
|
|
95
|
-
height:
|
|
96
|
-
border-radius: var(--intergalactic-control-rounded, 6px);
|
|
97
|
-
padding: 0 var(--intergalactic-spacing-2x, 8px);
|
|
99
|
+
min-width: var(--intergalactic-form-control-m, 32px);
|
|
100
|
+
height: var(--intergalactic-form-control-m, 32px);
|
|
98
101
|
font-size: var(--intergalactic-fs-200, 14px);
|
|
99
|
-
|
|
100
|
-
& SAddon {
|
|
101
|
-
&:not(:only-child):first-child {
|
|
102
|
-
margin-right: var(--intergalactic-spacing-2x, 8px);
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
&:not(:only-child):last-child {
|
|
106
|
-
margin-left: var(--intergalactic-spacing-2x, 8px);
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
&:only-child {
|
|
110
|
-
margin-left: calc(-1 * var(--intergalactic-spacing-1x, 4px));
|
|
111
|
-
margin-right: calc(-1 * var(--intergalactic-spacing-1x, 4px));
|
|
112
|
-
}
|
|
113
|
-
}
|
|
102
|
+
line-height: var(--intergalactic-lh-200, 1.4286);
|
|
114
103
|
}
|
|
115
104
|
|
|
116
105
|
SBaseTrigger[size='l'] {
|
|
117
|
-
min-width:
|
|
118
|
-
height:
|
|
119
|
-
border-radius: var(--intergalactic-control-rounded, 6px);
|
|
120
|
-
padding: 0 var(--intergalactic-spacing-3x, 12px);
|
|
106
|
+
min-width: var(--intergalactic-form-control-l, 44px);
|
|
107
|
+
height: var(--intergalactic-form-control-l, 44px);
|
|
121
108
|
font-size: var(--intergalactic-fs-300, 16px);
|
|
122
|
-
|
|
123
|
-
& SAddon {
|
|
124
|
-
&:not(:only-child):first-child {
|
|
125
|
-
margin-right: var(--intergalactic-spacing-2x, 8px);
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
&:not(:only-child):last-child {
|
|
129
|
-
margin-left: var(--intergalactic-spacing-2x, 8px);
|
|
130
|
-
}
|
|
131
|
-
|
|
132
|
-
&:only-child {
|
|
133
|
-
margin-left: calc(-1 * var(--intergalactic-spacing-1x, 4px));
|
|
134
|
-
margin-right: calc(-1 * var(--intergalactic-spacing-1x, 4px));
|
|
135
|
-
}
|
|
136
|
-
}
|
|
109
|
+
line-height: var(--intergalactic-lh-300, 1.5);
|
|
137
110
|
}
|
|
138
111
|
|
|
139
112
|
SBaseTrigger[neighborLocation='right'] {
|
|
@@ -160,7 +133,7 @@ SBaseTrigger[neighborLocation='left'] {
|
|
|
160
133
|
}
|
|
161
134
|
|
|
162
135
|
SText[display-placeholder] {
|
|
163
|
-
color: var(--intergalactic-text-placeholder, oklch(0.
|
|
136
|
+
color: var(--intergalactic-text-placeholder, oklch(0.109 0.023 165.5 / 0.337));
|
|
164
137
|
}
|
|
165
138
|
|
|
166
139
|
SBaseTrigger[state='valid'] {
|
|
@@ -175,10 +148,7 @@ SBaseTrigger[state='invalid'] {
|
|
|
175
148
|
}
|
|
176
149
|
}
|
|
177
150
|
|
|
178
|
-
SInvalidPattern[size='m']
|
|
179
|
-
margin-left: calc(-1 * var(--intergalactic-spacing-2x, 8px));
|
|
180
|
-
}
|
|
181
|
-
|
|
151
|
+
SInvalidPattern[size='m'],
|
|
182
152
|
SInvalidPattern[size='l'] {
|
|
183
|
-
margin-left: calc(-1 * var(--intergalactic-spacing-
|
|
153
|
+
margin-left: calc(-1 * var(--intergalactic-spacing-content-padding-medium, 12px));
|
|
184
154
|
}
|