@semcore/pills 17.2.1-prerelease.9 → 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/Pills.js +114 -30
- package/lib/cjs/Pills.js.map +1 -1
- package/lib/cjs/Pills.type.js.map +1 -1
- package/lib/cjs/style/pills.shadow.css +124 -116
- package/lib/es6/Pills.js +115 -31
- package/lib/es6/Pills.js.map +1 -1
- package/lib/es6/Pills.type.js.map +1 -1
- package/lib/es6/style/pills.shadow.css +124 -116
- package/lib/esm/Pills.mjs +117 -32
- package/lib/esm/style/pills.shadow.css +124 -116
- package/lib/types/Pills.d.ts.map +1 -1
- package/lib/types/Pills.type.d.ts +3 -2
- package/lib/types/Pills.type.d.ts.map +1 -1
- package/package.json +9 -6
|
@@ -1,156 +1,164 @@
|
|
|
1
1
|
SPills {
|
|
2
|
+
position: relative;
|
|
2
3
|
display: inline-flex;
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
4
|
+
padding: var(--intergalactic-spacing-content-padding-xxsmall, 2px);
|
|
5
|
+
min-height: var(--intergalactic-form-control-m, 32px);
|
|
6
|
+
border-radius: var(--intergalactic-pills-rounded, 6px);
|
|
7
|
+
background: var(--intergalactic-control-pills-bg-normal, oklch(0.166 0.031 175.8 / 0.097));
|
|
8
|
+
box-sizing: border-box;
|
|
7
9
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
border-color: var(--intergalactic-border-info-active, oklch(0.7 0.131 275.2));
|
|
11
|
-
z-index: 3;
|
|
12
|
-
}
|
|
13
|
-
SPill:focus-visible, SPill[selected] {
|
|
14
|
-
z-index: 3;
|
|
10
|
+
&[size='l'] {
|
|
11
|
+
min-height: var(--intergalactic-form-control-l, 44px);
|
|
15
12
|
}
|
|
16
13
|
|
|
17
|
-
|
|
18
|
-
|
|
14
|
+
/*
|
|
15
|
+
TODO: switch to anchor realisation when layout changes will be supported by FF and Safari.
|
|
16
|
+
As of now JS fallback is used.
|
|
17
|
+
*/
|
|
18
|
+
/* &:has(SPill[aria-checked='true'], SPill[aria-selected='true']) {
|
|
19
|
+
SPill[aria-checked='true'], SPill[aria-selected='true'] {
|
|
20
|
+
anchor-name: --active-segment;
|
|
21
|
+
}
|
|
22
|
+
} */
|
|
23
|
+
|
|
24
|
+
SPillContainer {
|
|
25
|
+
&:last-of-type {
|
|
26
|
+
SPillSeparator {
|
|
27
|
+
display: none;
|
|
28
|
+
}
|
|
29
|
+
}
|
|
19
30
|
}
|
|
31
|
+
|
|
32
|
+
--transition-fast:
|
|
33
|
+
left calc(var(--intergalactic-duration-fast, 200) * 1ms) var(--intergalactic-easings-fast, cubic-bezier(0.5, 0, 0, 1.12)),
|
|
34
|
+
width calc(var(--intergalactic-duration-fast, 200) * 1ms) var(--intergalactic-easings-fast, cubic-bezier(0.5, 0, 0, 1.12)),
|
|
35
|
+
top calc(var(--intergalactic-duration-fast, 200) * 1ms) var(--intergalactic-easings-fast, cubic-bezier(0.5, 0, 0, 1.12)),
|
|
36
|
+
height calc(var(--intergalactic-duration-fast, 200) * 1ms) var(--intergalactic-easings-fast, cubic-bezier(0.5, 0, 0, 1.12));
|
|
37
|
+
|
|
38
|
+
--transition-slow:
|
|
39
|
+
left calc(var(--intergalactic-duration-medium, 300) * 1ms) var(--intergalactic-easings-medium, cubic-bezier(0.5, 0, 0, 1.09)),
|
|
40
|
+
width calc(var(--intergalactic-duration-medium, 300) * 1ms) var(--intergalactic-easings-medium, cubic-bezier(0.5, 0, 0, 1.09)),
|
|
41
|
+
top calc(var(--intergalactic-duration-medium, 300) * 1ms) var(--intergalactic-easings-medium, cubic-bezier(0.5, 0, 0, 1.09)),
|
|
42
|
+
height calc(var(--intergalactic-duration-medium, 300) * 1ms) var(--intergalactic-easings-medium, cubic-bezier(0.5, 0, 0, 1.09));
|
|
20
43
|
}
|
|
21
44
|
|
|
22
45
|
SPill {
|
|
23
|
-
display: inline-flex;
|
|
24
|
-
align-items: center;
|
|
25
|
-
justify-content: center;
|
|
26
|
-
line-height: normal;
|
|
27
46
|
position: relative;
|
|
28
|
-
|
|
29
|
-
white-space: nowrap;
|
|
30
|
-
user-select: none;
|
|
31
|
-
box-sizing: border-box;
|
|
32
|
-
padding: 0;
|
|
33
|
-
margin: 0;
|
|
34
|
-
box-shadow: none;
|
|
35
|
-
text-decoration: none;
|
|
36
|
-
-webkit-tap-highlight-color: transparent;
|
|
37
|
-
overflow: visible;
|
|
38
|
-
text-align: center;
|
|
39
|
-
vertical-align: middle;
|
|
40
|
-
font-family: inherit;
|
|
47
|
+
|
|
41
48
|
cursor: pointer;
|
|
42
|
-
background: var(--intergalactic-bg-primary-neutral, oklch(1 0 0));
|
|
43
|
-
border: 1px solid var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
|
|
44
|
-
border-radius: var(--intergalactic-control-rounded, 6px);
|
|
45
49
|
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
+
display: inline-flex;
|
|
51
|
+
justify-content: center;
|
|
52
|
+
align-items: center;
|
|
53
|
+
gap: var(--intergalactic-spacing-content-gap-medium, 6px);
|
|
54
|
+
padding: 0 var(--intergalactic-spacing-content-padding-medium, 12px);
|
|
55
|
+
|
|
56
|
+
border-style: solid;
|
|
57
|
+
border-color: transparent;
|
|
58
|
+
border-radius: var(--intergalactic-rounded-small, 4px);
|
|
50
59
|
|
|
51
|
-
|
|
52
|
-
outline: 0;
|
|
53
|
-
text-decoration: none;
|
|
54
|
-
}
|
|
60
|
+
background-color: transparent;
|
|
55
61
|
|
|
56
62
|
&:hover {
|
|
57
|
-
|
|
63
|
+
&[aria-checked='false'],
|
|
64
|
+
&[aria-selected='false'] {
|
|
65
|
+
&::after {
|
|
66
|
+
content: '';
|
|
67
|
+
display: block;
|
|
68
|
+
position: absolute;
|
|
69
|
+
top: 0;
|
|
70
|
+
left: 0;
|
|
71
|
+
width: 100%;
|
|
72
|
+
height: 100%;
|
|
73
|
+
border-radius: var(--intergalactic-rounded-small, 4px);
|
|
74
|
+
background: var(--intergalactic-control-pills-bg-hover, oklch(0.151 0.028 176.1 / 0.123));
|
|
75
|
+
}
|
|
76
|
+
}
|
|
58
77
|
}
|
|
59
|
-
}
|
|
60
78
|
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
pointer-events: none;
|
|
79
|
+
&[disabled] {
|
|
80
|
+
cursor: default;
|
|
81
|
+
pointer-events: none;
|
|
65
82
|
|
|
66
|
-
|
|
67
|
-
|
|
83
|
+
&>* {
|
|
84
|
+
opacity: var(--intergalactic-disabled-opacity, 0.4);
|
|
85
|
+
}
|
|
68
86
|
}
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
SText {
|
|
72
|
-
color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
|
|
73
|
-
display: inline-flex;
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
SAddon {
|
|
77
|
-
color: var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583));
|
|
78
|
-
display: inline-flex;
|
|
79
|
-
align-items: center;
|
|
80
|
-
justify-content: center;
|
|
81
|
-
}
|
|
82
87
|
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
font-size: var(--intergalactic-fs-200, 14px);
|
|
87
|
-
|
|
88
|
-
& SText {
|
|
89
|
-
margin-left: var(--intergalactic-spacing-2x, 8px);
|
|
90
|
-
margin-right: var(--intergalactic-spacing-2x, 8px);
|
|
88
|
+
&[size='m'] {
|
|
89
|
+
min-width: calc(var(--intergalactic-form-control-m, 32px) - var(--intergalactic-spacing-content-padding-xsmall, 4px));
|
|
90
|
+
border-width: 2px 3px;
|
|
91
91
|
}
|
|
92
92
|
|
|
93
|
-
&
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
&:not(:only-child):last-child {
|
|
99
|
-
margin-right: var(--intergalactic-spacing-2x, 8px);
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
&:only-child {
|
|
103
|
-
margin-left: var(--intergalactic-spacing-2x, 8px);
|
|
104
|
-
margin-right: var(--intergalactic-spacing-2x, 8px);
|
|
105
|
-
}
|
|
93
|
+
&[size='l'] {
|
|
94
|
+
min-width: calc(var(--intergalactic-form-control-l, 44px) - var(--intergalactic-spacing-content-padding-xsmall, 4px));
|
|
95
|
+
border-width: 3px 3px;
|
|
106
96
|
}
|
|
107
97
|
}
|
|
108
98
|
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
min-width: var(--intergalactic-form-control-l, 40px);
|
|
112
|
-
font-size: var(--intergalactic-fs-300, 16px);
|
|
113
|
-
|
|
114
|
-
& SText {
|
|
115
|
-
margin-left: var(--intergalactic-spacing-2x, 8px);
|
|
116
|
-
margin-right: var(--intergalactic-spacing-2x, 8px);
|
|
99
|
+
SPillContainer {
|
|
100
|
+
display: inline-flex;
|
|
117
101
|
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
102
|
+
&:has(SPill[aria-checked='true'], SPill[aria-selected='true']) {
|
|
103
|
+
SPillSeparator {
|
|
104
|
+
background-color: transparent;
|
|
121
105
|
}
|
|
122
106
|
}
|
|
123
107
|
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
108
|
+
&:has(+ SPillContainer SPill[aria-checked='true'], +SPillContainer SPill[aria-selected='true']) {
|
|
109
|
+
SPillSeparator {
|
|
110
|
+
background-color: transparent;
|
|
127
111
|
}
|
|
112
|
+
}
|
|
113
|
+
}
|
|
128
114
|
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
}
|
|
115
|
+
SPillSeparator {
|
|
116
|
+
align-self: center;
|
|
132
117
|
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
118
|
+
width: 1px;
|
|
119
|
+
height: calc(100% - var(--intergalactic-spacing-content-padding-xsmall-extended, 6px) * 2);
|
|
120
|
+
background-color: var(--intergalactic-control-pills-border, oklch(0.137 0.026 175.7 / 0.161));
|
|
121
|
+
|
|
122
|
+
&[size='l'] {
|
|
123
|
+
height: calc(100% - var(--intergalactic-spacing-content-padding-small, 8px) * 2);
|
|
137
124
|
}
|
|
138
125
|
}
|
|
139
126
|
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
127
|
+
SSegmentIndicator {
|
|
128
|
+
position: absolute;
|
|
129
|
+
|
|
130
|
+
/*
|
|
131
|
+
TODO: switch to anchor realisation when layout changes will be supported by FF and Safari.
|
|
132
|
+
As of now JS fallback is used.
|
|
133
|
+
*/
|
|
134
|
+
/* position-anchor:--active-segment; */
|
|
135
|
+
/*left:anchor(left);*/
|
|
136
|
+
/*width:anchor-size(width);*/
|
|
137
|
+
/*height:anchor-size(height);*/
|
|
138
|
+
left: var(--global-left);
|
|
139
|
+
width: var(--global-width);
|
|
140
|
+
height: var(--global-height);
|
|
141
|
+
transition: var(--global-speed);
|
|
142
|
+
|
|
143
|
+
background: var(--intergalactic-control-pills-bg-selected, oklch(1 0 0));
|
|
144
|
+
box-shadow: var(--intergalactic-box-shadow-control-elevated, 0px 0px 1px 0px oklch(0.176 0.033 175.7 / 0.07), 0px 1px 3px 0px oklch(0.176 0.033 175.7 / 0.07));
|
|
145
|
+
border-radius: var(--intergalactic-rounded-small, 4px);
|
|
143
146
|
}
|
|
144
147
|
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
margin-left: -1px;
|
|
148
|
+
SText {
|
|
149
|
+
color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
|
|
150
|
+
min-width: 0.8em;
|
|
149
151
|
}
|
|
150
152
|
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
153
|
+
SAddon {
|
|
154
|
+
color: var(--intergalactic-text-secondary, oklch(0.097 0.023 156.5 / 0.468));
|
|
155
|
+
display: inline-flex;
|
|
156
|
+
align-items: center;
|
|
157
|
+
justify-content: center;
|
|
156
158
|
}
|
|
159
|
+
|
|
160
|
+
@media (prefers-reduced-motion) {
|
|
161
|
+
SSegmentIndicator {
|
|
162
|
+
transition: none;
|
|
163
|
+
}
|
|
164
|
+
}
|
package/lib/es6/Pills.js
CHANGED
|
@@ -4,31 +4,40 @@ 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 } from '@semcore/base-components';
|
|
8
8
|
import { createComponent, Component, sstyled, Root } from '@semcore/core';
|
|
9
9
|
import addonTextChildren from '@semcore/core/lib/utils/addonTextChildren';
|
|
10
|
+
import canUseDOM from '@semcore/core/lib/utils/canUseDOM';
|
|
10
11
|
import a11yEnhance from '@semcore/core/lib/utils/enhances/a11yEnhance';
|
|
12
|
+
import trottle from '@semcore/core/lib/utils/rafTrottle';
|
|
13
|
+
import { Text as SemcoreText } from '@semcore/typography';
|
|
11
14
|
import React from 'react';
|
|
12
15
|
/*!__reshadow-styles__:"./style/pills.shadow.css"*/
|
|
13
|
-
const style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".
|
|
16
|
+
const style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___SPills_1jzu3_gg_{position:relative;display:inline-flex;padding:var(--intergalactic-spacing-content-padding-xxsmall,2px);min-height:var(--intergalactic-form-control-m,32px);border-radius:var(--intergalactic-pills-rounded,6px);background:var(--intergalactic-control-pills-bg-normal,oklch(.166 .031 175.8/.097));box-sizing:border-box;--transition-fast:left calc(var(--intergalactic-duration-fast, 200)*1ms) var(--intergalactic-easings-fast,cubic-bezier(0.5,0,0,1.12)),width calc(var(--intergalactic-duration-fast, 200)*1ms) var(--intergalactic-easings-fast,cubic-bezier(0.5,0,0,1.12)),top calc(var(--intergalactic-duration-fast, 200)*1ms) var(--intergalactic-easings-fast,cubic-bezier(0.5,0,0,1.12)),height calc(var(--intergalactic-duration-fast, 200)*1ms) var(--intergalactic-easings-fast,cubic-bezier(0.5,0,0,1.12));--transition-slow:left calc(var(--intergalactic-duration-medium, 300)*1ms) var(--intergalactic-easings-medium,cubic-bezier(0.5,0,0,1.09)),width calc(var(--intergalactic-duration-medium, 300)*1ms) var(--intergalactic-easings-medium,cubic-bezier(0.5,0,0,1.09)),top calc(var(--intergalactic-duration-medium, 300)*1ms) var(--intergalactic-easings-medium,cubic-bezier(0.5,0,0,1.09)),height calc(var(--intergalactic-duration-medium, 300)*1ms) var(--intergalactic-easings-medium,cubic-bezier(0.5,0,0,1.09))}.___SPills_1jzu3_gg_._size_l_1jzu3_gg_{min-height:var(--intergalactic-form-control-l,44px)}.___SPills_1jzu3_gg_ .___SPillContainer_1jzu3_gg_:last-of-type .___SPillSeparator_1jzu3_gg_{display:none}.___SPill_1jzu3_gg_{position:relative;cursor:pointer;display:inline-flex;justify-content:center;align-items:center;gap:var(--intergalactic-spacing-content-gap-medium,6px);padding:0 var(--intergalactic-spacing-content-padding-medium,12px);border-style:solid;border-color:#0000;border-radius:var(--intergalactic-rounded-small,4px);background-color:initial}@media (hover:hover){.___SPill_1jzu3_gg_[aria-checked=false]:hover:after,.___SPill_1jzu3_gg_[aria-selected=false]:hover:after{content:\"\";display:block;position:absolute;top:0;left:0;width:100%;height:100%;border-radius:var(--intergalactic-rounded-small,4px);background:var(--intergalactic-control-pills-bg-hover,oklch(.151 .028 176.1/.123))}}.___SPill_1jzu3_gg_.__disabled_1jzu3_gg_{cursor:default;pointer-events:none}.___SPill_1jzu3_gg_.__disabled_1jzu3_gg_>*{opacity:var(--intergalactic-disabled-opacity,.4)}.___SPill_1jzu3_gg_._size_m_1jzu3_gg_{min-width:calc(var(--intergalactic-form-control-m, 32px) - var(--intergalactic-spacing-content-padding-xsmall, 4px));border-width:2px 3px}.___SPill_1jzu3_gg_._size_l_1jzu3_gg_{min-width:calc(var(--intergalactic-form-control-l, 44px) - var(--intergalactic-spacing-content-padding-xsmall, 4px));border-width:3px}.___SPillContainer_1jzu3_gg_{display:inline-flex}.___SPillContainer_1jzu3_gg_:has(+.___SPillContainer_1jzu3_gg_ .___SPill_1jzu3_gg_[aria-checked=true],+.___SPillContainer_1jzu3_gg_ .___SPill_1jzu3_gg_[aria-selected=true]) .___SPillSeparator_1jzu3_gg_,.___SPillContainer_1jzu3_gg_:has(.___SPill_1jzu3_gg_[aria-checked=true],.___SPill_1jzu3_gg_[aria-selected=true]) .___SPillSeparator_1jzu3_gg_{background-color:initial}.___SPillSeparator_1jzu3_gg_{align-self:center;width:1px;height:calc(100% - var(--intergalactic-spacing-content-padding-xsmall-extended, 6px)*2);background-color:var(--intergalactic-control-pills-border,#000c0829)}@media (color-gamut:p3){.___SPillSeparator_1jzu3_gg_{background-color:var(--intergalactic-control-pills-border,oklch(.137 .026 175.7/.161))}}.___SPillSeparator_1jzu3_gg_._size_l_1jzu3_gg_{height:calc(100% - var(--intergalactic-spacing-content-padding-small, 8px)*2)}.___SSegmentIndicator_1jzu3_gg_{position:absolute;left:var(--global-left);width:var(--global-width);height:var(--global-height);transition:var(--global-speed);background:var(--intergalactic-control-pills-bg-selected,oklch(1 0 0));box-shadow:var(--intergalactic-box-shadow-control-elevated,0 0 1px 0 #00151012,0 1px 3px 0 #00151012);border-radius:var(--intergalactic-rounded-small,4px)}@media (color-gamut:p3){.___SSegmentIndicator_1jzu3_gg_{box-shadow:var(--intergalactic-box-shadow-control-elevated,0 0 1px 0 oklch(.176 .033 175.7/.07),0 1px 3px 0 oklch(.176 .033 175.7/.07))}}.___SText_1jzu3_gg_{color:var(--intergalactic-text-primary,oklch(.1 .03 137/.899));min-width:.8em}.___SAddon_1jzu3_gg_{color:var(--intergalactic-text-secondary,oklch(.097 .023 156.5/.468));display:inline-flex;align-items:center;justify-content:center}@media (prefers-reduced-motion){.___SSegmentIndicator_1jzu3_gg_{transition:none}}", /*__inner_css_end__*/"1jzu3_gg_"),
|
|
14
17
|
/*__reshadow_css_end__*/
|
|
15
18
|
{
|
|
16
|
-
"
|
|
17
|
-
"
|
|
18
|
-
"
|
|
19
|
-
"
|
|
20
|
-
"
|
|
21
|
-
"
|
|
22
|
-
"
|
|
23
|
-
"
|
|
24
|
-
"_disabled": "
|
|
25
|
-
"_size_m": "
|
|
26
|
-
"_size_l": "_size_l_1o2wa_gg_"
|
|
19
|
+
"__SSegmentIndicator": "___SSegmentIndicator_1jzu3_gg_",
|
|
20
|
+
"__SText": "___SText_1jzu3_gg_",
|
|
21
|
+
"__SAddon": "___SAddon_1jzu3_gg_",
|
|
22
|
+
"__SPills": "___SPills_1jzu3_gg_",
|
|
23
|
+
"_size_l": "_size_l_1jzu3_gg_",
|
|
24
|
+
"__SPillContainer": "___SPillContainer_1jzu3_gg_",
|
|
25
|
+
"__SPillSeparator": "___SPillSeparator_1jzu3_gg_",
|
|
26
|
+
"__SPill": "___SPill_1jzu3_gg_",
|
|
27
|
+
"_disabled": "__disabled_1jzu3_gg_",
|
|
28
|
+
"_size_m": "_size_m_1jzu3_gg_"
|
|
27
29
|
});
|
|
30
|
+
const TRANSITION_SLOW_THRESHOLD = 1;
|
|
28
31
|
class RootPills extends Component {
|
|
29
|
-
constructor(
|
|
30
|
-
super(
|
|
32
|
+
constructor(props) {
|
|
33
|
+
super(props);
|
|
31
34
|
_defineProperty(this, "itemValues", []);
|
|
35
|
+
_defineProperty(this, "lastSelectedIndex", null);
|
|
36
|
+
_defineProperty(this, "currentSelectedIndex", null);
|
|
37
|
+
_defineProperty(this, "rootRef", /*#__PURE__*/React.createRef());
|
|
38
|
+
_defineProperty(this, "pills", []);
|
|
39
|
+
_defineProperty(this, "segmentIndicatorRef", /*#__PURE__*/React.createRef());
|
|
40
|
+
_defineProperty(this, "ro", null);
|
|
32
41
|
_defineProperty(this, "bindHandlerClick", value => e => {
|
|
33
42
|
this.handlers.value(value, e);
|
|
34
43
|
});
|
|
@@ -38,12 +47,56 @@ class RootPills extends Component {
|
|
|
38
47
|
this.handlers.value(value, e);
|
|
39
48
|
}
|
|
40
49
|
});
|
|
50
|
+
if (canUseDOM()) {
|
|
51
|
+
this.ro = new ResizeObserver(trottle(() => this.updateSegmentIndicator()));
|
|
52
|
+
}
|
|
41
53
|
}
|
|
42
54
|
uncontrolledProps() {
|
|
43
55
|
return {
|
|
44
56
|
value: null
|
|
45
57
|
};
|
|
46
58
|
}
|
|
59
|
+
componentDidUpdate() {
|
|
60
|
+
this.updateSelectedIndexes();
|
|
61
|
+
this.updateSegmentIndicator();
|
|
62
|
+
}
|
|
63
|
+
componentDidMount() {
|
|
64
|
+
this.updateSegmentIndicator();
|
|
65
|
+
}
|
|
66
|
+
componentWillUnmount() {
|
|
67
|
+
this.ro?.disconnect();
|
|
68
|
+
}
|
|
69
|
+
updateSelectedIndexes() {
|
|
70
|
+
if (this.currentSelectedIndex === null) return;
|
|
71
|
+
if (this.currentSelectedIndex <= this.pills.length - 1) return;
|
|
72
|
+
this.currentSelectedIndex = null;
|
|
73
|
+
this.lastSelectedIndex = null;
|
|
74
|
+
}
|
|
75
|
+
updateSegmentIndicator() {
|
|
76
|
+
const indicator = this.segmentIndicatorRef?.current;
|
|
77
|
+
if (!indicator) return;
|
|
78
|
+
if (this.currentSelectedIndex === null) {
|
|
79
|
+
indicator.style.removeProperty('--global-speed');
|
|
80
|
+
indicator.style.removeProperty('--global-left');
|
|
81
|
+
indicator.style.removeProperty('--global-width');
|
|
82
|
+
indicator.style.removeProperty('--global-height');
|
|
83
|
+
return;
|
|
84
|
+
}
|
|
85
|
+
;
|
|
86
|
+
const root = this.rootRef?.current;
|
|
87
|
+
const pill = this.pills[this.currentSelectedIndex];
|
|
88
|
+
if (!pill || !root) return;
|
|
89
|
+
const pillRect = pill.getBoundingClientRect();
|
|
90
|
+
const rootRect = root.getBoundingClientRect();
|
|
91
|
+
const speed = this.lastSelectedIndex === null ? '--transition-slow' : Math.abs(this.currentSelectedIndex - this.lastSelectedIndex) > TRANSITION_SLOW_THRESHOLD ? '--transition-slow' : '--transition-fast';
|
|
92
|
+
const left = pillRect.left - rootRect.left;
|
|
93
|
+
const width = pillRect.width;
|
|
94
|
+
const height = pillRect.height;
|
|
95
|
+
indicator.style.setProperty('--global-speed', `var(${speed})`);
|
|
96
|
+
indicator.style.setProperty('--global-left', `${left}px`);
|
|
97
|
+
indicator.style.setProperty('--global-width', `${width}px`);
|
|
98
|
+
indicator.style.setProperty('--global-height', `${height}px`);
|
|
99
|
+
}
|
|
47
100
|
getItemProps(props, index) {
|
|
48
101
|
const {
|
|
49
102
|
value,
|
|
@@ -53,6 +106,10 @@ class RootPills extends Component {
|
|
|
53
106
|
} = this.asProps;
|
|
54
107
|
const isSelected = value === props.value;
|
|
55
108
|
this.itemValues[index] = props.value;
|
|
109
|
+
if (isSelected) {
|
|
110
|
+
this.lastSelectedIndex = this.currentSelectedIndex;
|
|
111
|
+
this.currentSelectedIndex = index;
|
|
112
|
+
}
|
|
56
113
|
return {
|
|
57
114
|
index: index,
|
|
58
115
|
size,
|
|
@@ -61,17 +118,38 @@ class RootPills extends Component {
|
|
|
61
118
|
behavior,
|
|
62
119
|
tabIndex: isSelected ? 0 : -1,
|
|
63
120
|
onClick: this.bindHandlerClick(props.value),
|
|
64
|
-
onKeyDown: this.bindHandleKeyDown(props.value)
|
|
121
|
+
onKeyDown: this.bindHandleKeyDown(props.value),
|
|
122
|
+
ref: node => {
|
|
123
|
+
const prevPill = this.pills[index];
|
|
124
|
+
if (prevPill) {
|
|
125
|
+
this.ro?.unobserve(prevPill);
|
|
126
|
+
}
|
|
127
|
+
if (node === null) {
|
|
128
|
+
this.pills = this.pills.filter((_, pillIndex) => pillIndex !== index);
|
|
129
|
+
return;
|
|
130
|
+
}
|
|
131
|
+
;
|
|
132
|
+
this.pills[index] = node;
|
|
133
|
+
this.ro?.observe(node);
|
|
134
|
+
}
|
|
135
|
+
};
|
|
136
|
+
}
|
|
137
|
+
getItemTextProps() {
|
|
138
|
+
const {
|
|
139
|
+
size
|
|
140
|
+
} = this.asProps;
|
|
141
|
+
return {
|
|
142
|
+
size: size === 'm' ? 200 : 300
|
|
65
143
|
};
|
|
66
144
|
}
|
|
67
145
|
render() {
|
|
68
146
|
var _ref = this.asProps,
|
|
69
147
|
_ref5;
|
|
70
148
|
const SPills = Box;
|
|
149
|
+
const SSegmentIndicator = Box;
|
|
71
150
|
const {
|
|
72
151
|
Children,
|
|
73
152
|
styles,
|
|
74
|
-
controlsLength,
|
|
75
153
|
disabled,
|
|
76
154
|
behavior,
|
|
77
155
|
value
|
|
@@ -80,11 +158,14 @@ class RootPills extends Component {
|
|
|
80
158
|
..._assignProps({
|
|
81
159
|
"role": behavior === 'auto' ? 'radiogroup' : 'tablist',
|
|
82
160
|
"aria-disabled": disabled,
|
|
83
|
-
"use:tabIndex": value !== null ? -1 : 0
|
|
161
|
+
"use:tabIndex": value !== null ? -1 : 0,
|
|
162
|
+
"ref": this.rootRef
|
|
84
163
|
}, _ref)
|
|
85
|
-
}), /*#__PURE__*/React.createElement(
|
|
86
|
-
"
|
|
87
|
-
|
|
164
|
+
}), /*#__PURE__*/React.createElement(SSegmentIndicator, _ref5.cn("SSegmentIndicator", {
|
|
165
|
+
"tag": 'span',
|
|
166
|
+
"ref": this.segmentIndicatorRef,
|
|
167
|
+
"aria-hidden": true
|
|
168
|
+
})), /*#__PURE__*/React.createElement(Children, _ref5.cn("Children", {})));
|
|
88
169
|
}
|
|
89
170
|
}
|
|
90
171
|
_defineProperty(RootPills, "displayName", 'Pills');
|
|
@@ -114,6 +195,8 @@ function Pill(props) {
|
|
|
114
195
|
var _ref2 = arguments[0],
|
|
115
196
|
_ref6;
|
|
116
197
|
const SPill = Box;
|
|
198
|
+
const SPillContainer = Box;
|
|
199
|
+
const SPillSeparator = Box;
|
|
117
200
|
const {
|
|
118
201
|
Children,
|
|
119
202
|
styles,
|
|
@@ -121,21 +204,19 @@ function Pill(props) {
|
|
|
121
204
|
addonRight,
|
|
122
205
|
selected,
|
|
123
206
|
disabled,
|
|
124
|
-
|
|
125
|
-
|
|
207
|
+
behavior,
|
|
208
|
+
size
|
|
126
209
|
} = props;
|
|
127
|
-
const neighborLocation = useNeighborLocationDetect(index);
|
|
128
210
|
const roleAreaProps = {
|
|
129
211
|
'role': behavior === 'auto' ? 'radio' : 'tab',
|
|
130
212
|
'aria-checked': behavior === 'auto' ? selected : undefined,
|
|
131
213
|
'aria-selected': behavior !== 'auto' ? selected : undefined
|
|
132
214
|
};
|
|
133
|
-
return _ref6 = sstyled(styles), /*#__PURE__*/React.createElement(SPill, _ref6.cn("SPill", {
|
|
215
|
+
return _ref6 = sstyled(styles), /*#__PURE__*/React.createElement(SPillContainer, _ref6.cn("SPillContainer", {}), /*#__PURE__*/React.createElement(SPill, _ref6.cn("SPill", {
|
|
134
216
|
..._assignProps2({
|
|
135
217
|
"tag": 'button',
|
|
136
218
|
"type": 'button',
|
|
137
219
|
"tabIndex": 0,
|
|
138
|
-
"neighborLocation": neighborLocation,
|
|
139
220
|
"aria-disabled": disabled,
|
|
140
221
|
...roleAreaProps
|
|
141
222
|
}, _ref2)
|
|
@@ -143,16 +224,19 @@ function Pill(props) {
|
|
|
143
224
|
tag: addonLeft
|
|
144
225
|
}) : null, addonTextChildren(Children, Pills.Item.Text, Pills.Item.Addon), addonRight ? /*#__PURE__*/React.createElement(Pills.Item.Addon, {
|
|
145
226
|
tag: addonRight
|
|
146
|
-
}) : null)
|
|
227
|
+
}) : null), /*#__PURE__*/React.createElement(SPillSeparator
|
|
228
|
+
// @ts-ignore
|
|
229
|
+
, _ref6.cn("SPillSeparator", {
|
|
230
|
+
"size": size,
|
|
231
|
+
"aria-hidden": true
|
|
232
|
+
})));
|
|
147
233
|
}
|
|
148
234
|
function Text(props) {
|
|
149
235
|
var _ref3 = arguments[0],
|
|
150
236
|
_ref7;
|
|
151
|
-
const SText =
|
|
237
|
+
const SText = SemcoreText;
|
|
152
238
|
return _ref7 = sstyled(props.styles), /*#__PURE__*/React.createElement(SText, _ref7.cn("SText", {
|
|
153
|
-
..._assignProps3({
|
|
154
|
-
"tag": 'span'
|
|
155
|
-
}, _ref3)
|
|
239
|
+
..._assignProps3({}, _ref3)
|
|
156
240
|
}));
|
|
157
241
|
}
|
|
158
242
|
function Addon(props) {
|
package/lib/es6/Pills.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Pills.js","names":["NeighborLocation","Box","useNeighborLocationDetect","createComponent","Component","sstyled","Root","addonTextChildren","a11yEnhance","React","style","_sstyled","insert","RootPills","constructor","args","_defineProperty","value","e","handlers","key","preventDefault","uncontrolledProps","getItemProps","props","index","size","disabled","behavior","asProps","isSelected","itemValues","selected","tabIndex","onClick","bindHandlerClick","onKeyDown","bindHandleKeyDown","render","_ref","_ref5","SPills","Children","styles","controlsLength","createElement","cn","_assignProps","defaultValue","onNeighborChange","neighborElement","focus","click","childSelector","selector","Pill","_ref2","arguments[0]","_ref6","SPill","addonLeft","addonRight","neighborLocation","roleAreaProps","undefined","_assignProps2","Pills","Item","Addon","tag","Text","_ref3","_ref7","SText","_assignProps3","_ref4","_ref8","SAddon","_assignProps4","wrapPills","wrapper"],"sources":["../../src/Pills.tsx"],"sourcesContent":["import { NeighborLocation, Box, useNeighborLocationDetect } from '@semcore/base-components';\nimport type { Intergalactic } from '@semcore/core';\nimport { createComponent, Component, sstyled, Root } from '@semcore/core';\nimport addonTextChildren from '@semcore/core/lib/utils/addonTextChildren';\nimport a11yEnhance from '@semcore/core/lib/utils/enhances/a11yEnhance';\nimport React from 'react';\n\nimport type { NSPills } from './Pills.type';\nimport style from './style/pills.shadow.css';\n\nclass RootPills extends Component<\n Intergalactic.InternalTypings.InferComponentProps<NSPills.Component>,\n typeof RootPills.enhance,\n NSPills.Handlers,\n {},\n {},\n NSPills.DefaultProps\n> {\n static displayName = 'Pills';\n static style = style;\n static defaultProps = ({ behavior }: Intergalactic.InternalTypings.InferComponentProps<NSPills.Component>) => ({\n size: 'm',\n defaultValue: null,\n behavior: behavior ?? 'auto',\n } as const);\n\n itemValues: Array<NSPills.Pill.Props['value']> = [];\n\n static enhance = [a11yEnhance({\n onNeighborChange: (neighborElement, props) => {\n if (neighborElement) {\n neighborElement.focus();\n if (props.behavior === 'auto') {\n neighborElement.click();\n }\n }\n },\n childSelector: (props) => {\n const selector = props.behavior === 'auto' ? ['role', 'radio'] : ['role', 'tab'];\n\n return selector as [string, string];\n },\n })] as const;\n\n uncontrolledProps() {\n return {\n value: null,\n };\n }\n\n bindHandlerClick = (value: NSPills.Pill.Props['value']) => (e: React.MouseEvent) => {\n this.handlers.value(value, e);\n };\n\n bindHandleKeyDown = (value: NSPills.Pill.Props['value']) => (e: React.KeyboardEvent) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n this.handlers.value(value, e);\n }\n };\n\n getItemProps(props: NSPills.Pill.Props, index: number) {\n const { value, size, disabled, behavior } = this.asProps;\n const isSelected = value === props.value;\n\n this.itemValues[index] = props.value;\n\n return {\n index: index,\n size,\n disabled,\n selected: isSelected,\n behavior,\n tabIndex: isSelected ? 0 : -1,\n onClick: this.bindHandlerClick(props.value),\n onKeyDown: this.bindHandleKeyDown(props.value),\n };\n }\n\n render() {\n const SPills = Root;\n const { Children, styles, controlsLength, disabled, behavior, value } = this.asProps;\n\n return sstyled(styles)(\n <SPills\n render={Box}\n role={behavior === 'auto' ? 'radiogroup' : 'tablist'}\n aria-disabled={disabled}\n use:tabIndex={value !== null ? -1 : 0}\n >\n <NeighborLocation controlsLength={controlsLength}>\n <Children />\n </NeighborLocation>\n </SPills>,\n );\n }\n}\n\nfunction Pill(props: Intergalactic.InternalTypings.InferChildComponentProps<NSPills.Pill.Component, typeof RootPills, 'Item'>) {\n const SPill = Root;\n const { Children, styles, addonLeft, addonRight, selected, disabled, index, behavior } = props;\n const neighborLocation = useNeighborLocationDetect(index);\n\n const roleAreaProps = {\n 'role': behavior === 'auto' ? 'radio' : 'tab',\n 'aria-checked': behavior === 'auto' ? selected : undefined,\n 'aria-selected': behavior !== 'auto' ? selected : undefined,\n };\n\n return sstyled(styles)(\n <SPill\n render={Box}\n tag='button'\n type='button'\n tabIndex={0}\n neighborLocation={neighborLocation}\n aria-disabled={disabled}\n {...roleAreaProps}\n >\n {addonLeft ? <Pills.Item.Addon tag={addonLeft} /> : null}\n {addonTextChildren(Children, Pills.Item.Text, Pills.Item.Addon)}\n {addonRight ? <Pills.Item.Addon tag={addonRight} /> : null}\n </SPill>,\n );\n}\n\nfunction Text(props: Intergalactic.InternalTypings.InferComponentProps<NSPills.Pill.Text.Component>) {\n const SText = Root;\n return sstyled(props.styles)(<SText render={Box} tag='span' />);\n}\n\nfunction Addon(props: Intergalactic.InternalTypings.InferComponentProps<NSPills.Pill.Addon.Component>) {\n const SAddon = Root;\n return sstyled(props.styles)(<SAddon render={Box} tag='span' />);\n}\n\nexport const wrapPills = <PropsExtending extends {}>(wrapper: (\n props: Intergalactic.InternalTypings.UntypeRefAndTag<\n Intergalactic.InternalTypings.ComponentPropsNesting<NSPills.WrapComponent>\n > &\n PropsExtending,\n) => React.ReactNode) => wrapper as NSPills.WrapComponent<PropsExtending>;\n\n/**\n * Pills\n *\n * {@link https://developer.semrush.com/intergalactic/components/pills/pills-api/|API} | {@link https://developer.semrush.com/intergalactic/components/pills/pills-code/|Examples}\n */\nconst Pills = createComponent<\n NSPills.Component,\n typeof RootPills\n>(RootPills, {\n Item: [Pill, { Text, Addon }],\n});\n\nexport default Pills;\n"],"mappings":";;;;;;AAAA,SAASA,gBAAgB,EAAEC,GAAG,EAAEC,yBAAyB,QAAQ,0BAA0B;AAE3F,SAASC,eAAe,EAAEC,SAAS,EAAEC,OAAO,EAAEC,IAAI,QAAQ,eAAe;AACzE,OAAOC,iBAAiB,MAAM,2CAA2C;AACzE,OAAOC,WAAW,MAAM,8CAA8C;AACtE,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;AAAA;AAK1B,MAAMC,SAAS,SAAST,SAAS,CAO/B;EAAAU,YAAA,GAAAC,IAAA;IAAA,SAAAA,IAAA;IAAAC,eAAA,qBASiD,EAAE;IAAAA,eAAA,2BAwB/BC,KAAkC,IAAMC,CAAmB,IAAK;MAClF,IAAI,CAACC,QAAQ,CAACF,KAAK,CAACA,KAAK,EAAEC,CAAC,CAAC;IAC/B,CAAC;IAAAF,eAAA,4BAEoBC,KAAkC,IAAMC,CAAsB,IAAK;MACtF,IAAIA,CAAC,CAACE,GAAG,KAAK,OAAO,IAAIF,CAAC,CAACE,GAAG,KAAK,GAAG,EAAE;QACtCF,CAAC,CAACG,cAAc,CAAC,CAAC;QAClB,IAAI,CAACF,QAAQ,CAACF,KAAK,CAACA,KAAK,EAAEC,CAAC,CAAC;MAC/B;IACF,CAAC;EAAA;EAfDI,iBAAiBA,CAAA,EAAG;IAClB,OAAO;MACLL,KAAK,EAAE;IACT,CAAC;EACH;EAaAM,YAAYA,CAACC,KAAyB,EAAEC,KAAa,EAAE;IACrD,MAAM;MAAER,KAAK;MAAES,IAAI;MAAEC,QAAQ;MAAEC;IAAS,CAAC,GAAG,IAAI,CAACC,OAAO;IACxD,MAAMC,UAAU,GAAGb,KAAK,KAAKO,KAAK,CAACP,KAAK;IAExC,IAAI,CAACc,UAAU,CAACN,KAAK,CAAC,GAAGD,KAAK,CAACP,KAAK;IAEpC,OAAO;MACLQ,KAAK,EAAEA,KAAK;MACZC,IAAI;MACJC,QAAQ;MACRK,QAAQ,EAAEF,UAAU;MACpBF,QAAQ;MACRK,QAAQ,EAAEH,UAAU,GAAG,CAAC,GAAG,CAAC,CAAC;MAC7BI,OAAO,EAAE,IAAI,CAACC,gBAAgB,CAACX,KAAK,CAACP,KAAK,CAAC;MAC3CmB,SAAS,EAAE,IAAI,CAACC,iBAAiB,CAACb,KAAK,CAACP,KAAK;IAC/C,CAAC;EACH;EAEAqB,MAAMA,CAAA,EAAG;IAAA,IAAAC,IAAA,QAAAV,OAAA;MAAAW,KAAA;IACP,MAAMC,MAAM,GAKAxC,GAAG;IAJf,MAAM;MAAEyC,QAAQ;MAAEC,MAAM;MAAEC,cAAc;MAAEjB,QAAQ;MAAEC,QAAQ;MAAEX;IAAM,CAAC,GAAG,IAAI,CAACY,OAAO;IAEpF,OAAAW,KAAA,GAAOnC,OAAO,CAACsC,MAAM,CAAC,eACpBlC,KAAA,CAAAoC,aAAA,CAACJ,MAAM,EAAAD,KAAA,CAAAM,EAAA;MAAA,GAAAC,YAAA;QAAA,QAECnB,QAAQ,KAAK,MAAM,GAAG,YAAY,GAAG,SAAS;QAAA,iBACrCD,QAAQ;QAAA,gBACTV,KAAK,KAAK,IAAI,GAAG,CAAC,CAAC,GAAG;MAAC,GAAAsB,IAAA;IAAA,iBAErC9B,KAAA,CAAAoC,aAAA,CAAC7C,gBAAgB,EAAAwC,KAAA,CAAAM,EAAA;MAAA,kBAAiBF;IAAc,iBAC9CnC,KAAA,CAAAoC,aAAA,CAACH,QAAQ,EAAAF,KAAA,CAAAM,EAAA,gBAAE,CACK,CACZ,CAAC;EAEb;AACF;AAAC9B,eAAA,CAtFKH,SAAS,iBAQQ,OAAO;AAAAG,eAAA,CARxBH,SAAS,WASEH,KAAK;AAAAM,eAAA,CAThBH,SAAS,kBAUS,CAAC;EAAEe;AAA+E,CAAC,MAAM;EAC7GF,IAAI,EAAE,GAAG;EACTsB,YAAY,EAAE,IAAI;EAClBpB,QAAQ,EAAEA,QAAQ,IAAI;AACxB,CAAC,CAAU;AAAAZ,eAAA,CAdPH,SAAS,aAkBI,CAACL,WAAW,CAAC;EAC5ByC,gBAAgB,EAAEA,CAACC,eAAe,EAAE1B,KAAK,KAAK;IAC5C,IAAI0B,eAAe,EAAE;MACnBA,eAAe,CAACC,KAAK,CAAC,CAAC;MACvB,IAAI3B,KAAK,CAACI,QAAQ,KAAK,MAAM,EAAE;QAC7BsB,eAAe,CAACE,KAAK,CAAC,CAAC;MACzB;IACF;EACF,CAAC;EACDC,aAAa,EAAG7B,KAAK,IAAK;IACxB,MAAM8B,QAAQ,GAAG9B,KAAK,CAACI,QAAQ,KAAK,MAAM,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC;IAEhF,OAAO0B,QAAQ;EACjB;AACF,CAAC,CAAC,CAAC;AAwDL,SAASC,IAAIA,CAAC/B,KAA+G,EAAE;EAAA,IAAAgC,KAAA,GAAAC,YAAA;IAAAC,KAAA;EAC7H,MAAMC,KAAK,GAYC1D,GAAG;EAXf,MAAM;IAAEyC,QAAQ;IAAEC,MAAM;IAAEiB,SAAS;IAAEC,UAAU;IAAE7B,QAAQ;IAAEL,QAAQ;IAAEF,KAAK;IAAEG;EAAS,CAAC,GAAGJ,KAAK;EAC9F,MAAMsC,gBAAgB,GAAG5D,yBAAyB,CAACuB,KAAK,CAAC;EAEzD,MAAMsC,aAAa,GAAG;IACpB,MAAM,EAAEnC,QAAQ,KAAK,MAAM,GAAG,OAAO,GAAG,KAAK;IAC7C,cAAc,EAAEA,QAAQ,KAAK,MAAM,GAAGI,QAAQ,GAAGgC,SAAS;IAC1D,eAAe,EAAEpC,QAAQ,KAAK,MAAM,GAAGI,QAAQ,GAAGgC;EACpD,CAAC;EAED,OAAAN,KAAA,GAAOrD,OAAO,CAACsC,MAAM,CAAC,eACpBlC,KAAA,CAAAoC,aAAA,CAACc,KAAK,EAAAD,KAAA,CAAAZ,EAAA;IAAA,GAAAmB,aAAA;MAAA,OAEA,QAAQ;MAAA,QACP,QAAQ;MAAA,YACH,CAAC;MAAA,oBACOH,gBAAgB;MAAA,iBACnBnC,QAAQ;MAAA,GACnBoC;IAAa,GAAAP,KAAA;EAAA,IAEhBI,SAAS,gBAAGnD,KAAA,CAAAoC,aAAA,CAACqB,KAAK,CAACC,IAAI,CAACC,KAAK;IAACC,GAAG,EAAET;EAAU,CAAE,CAAC,GAAG,IAAI,EACvDrD,iBAAiB,CAACmC,QAAQ,EAAEwB,KAAK,CAACC,IAAI,CAACG,IAAI,EAAEJ,KAAK,CAACC,IAAI,CAACC,KAAK,CAAC,EAC9DP,UAAU,gBAAGpD,KAAA,CAAAoC,aAAA,CAACqB,KAAK,CAACC,IAAI,CAACC,KAAK;IAACC,GAAG,EAAER;EAAW,CAAE,CAAC,GAAG,IACjD,CAAC;AAEZ;AAEA,SAASS,IAAIA,CAAC9C,KAAqF,EAAE;EAAA,IAAA+C,KAAA,GAAAd,YAAA;IAAAe,KAAA;EACnG,MAAMC,KAAK,GACiCxE,GAAG;EAA/C,OAAAuE,KAAA,GAAOnE,OAAO,CAACmB,KAAK,CAACmB,MAAM,CAAC,eAAClC,KAAA,CAAAoC,aAAA,CAAC4B,KAAK,EAAAD,KAAA,CAAA1B,EAAA;IAAA,GAAA4B,aAAA;MAAA,OAAkB;IAAM,GAAAH,KAAA;EAAA,EAAE,CAAC;AAChE;AAEA,SAASH,KAAKA,CAAC5C,KAAsF,EAAE;EAAA,IAAAmD,KAAA,GAAAlB,YAAA;IAAAmB,KAAA;EACrG,MAAMC,MAAM,GACiC5E,GAAG;EAAhD,OAAA2E,KAAA,GAAOvE,OAAO,CAACmB,KAAK,CAACmB,MAAM,CAAC,eAAClC,KAAA,CAAAoC,aAAA,CAACgC,MAAM,EAAAD,KAAA,CAAA9B,EAAA;IAAA,GAAAgC,aAAA;MAAA,OAAkB;IAAM,GAAAH,KAAA;EAAA,EAAE,CAAC;AACjE;AAEA,OAAO,MAAMI,SAAS,GAA+BC,OAKjC,IAAKA,OAAgD;;AAEzE;AACA;AACA;AACA;AACA;AACA,MAAMd,KAAK,GAAG/D,eAAe,CAG3BU,SAAS,EAAE;EACXsD,IAAI,EAAE,CAACZ,IAAI,EAAE;IAAEe,IAAI;IAAEF;EAAM,CAAC;AAC9B,CAAC,CAAC;AAEF,eAAeF,KAAK","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"Pills.js","names":["Box","createComponent","Component","sstyled","Root","addonTextChildren","canUseDOM","a11yEnhance","trottle","Text","SemcoreText","React","style","_sstyled","insert","TRANSITION_SLOW_THRESHOLD","RootPills","constructor","props","_defineProperty","createRef","value","e","handlers","key","preventDefault","ro","ResizeObserver","updateSegmentIndicator","uncontrolledProps","componentDidUpdate","updateSelectedIndexes","componentDidMount","componentWillUnmount","disconnect","currentSelectedIndex","pills","length","lastSelectedIndex","indicator","segmentIndicatorRef","current","removeProperty","root","rootRef","pill","pillRect","getBoundingClientRect","rootRect","speed","Math","abs","left","width","height","setProperty","getItemProps","index","size","disabled","behavior","asProps","isSelected","itemValues","selected","tabIndex","onClick","bindHandlerClick","onKeyDown","bindHandleKeyDown","ref","node","prevPill","unobserve","filter","_","pillIndex","observe","getItemTextProps","render","_ref","_ref5","SPills","SSegmentIndicator","Children","styles","createElement","cn","_assignProps","defaultValue","onNeighborChange","neighborElement","focus","click","childSelector","selector","Pill","_ref2","arguments[0]","_ref6","SPill","SPillContainer","SPillSeparator","addonLeft","addonRight","roleAreaProps","undefined","_assignProps2","Pills","Item","Addon","tag","_ref3","_ref7","SText","_assignProps3","_ref4","_ref8","SAddon","_assignProps4","wrapPills","wrapper"],"sources":["../../src/Pills.tsx"],"sourcesContent":["import { Box } from '@semcore/base-components';\nimport type { Intergalactic } from '@semcore/core';\nimport { createComponent, Component, sstyled, Root } from '@semcore/core';\nimport addonTextChildren from '@semcore/core/lib/utils/addonTextChildren';\nimport canUseDOM from '@semcore/core/lib/utils/canUseDOM';\nimport a11yEnhance from '@semcore/core/lib/utils/enhances/a11yEnhance';\nimport trottle from '@semcore/core/lib/utils/rafTrottle';\nimport { Text as SemcoreText } from '@semcore/typography';\nimport React from 'react';\n\nimport type { NSPills } from './Pills.type';\nimport style from './style/pills.shadow.css';\n\nconst TRANSITION_SLOW_THRESHOLD = 1;\n\ntype RootProps = Intergalactic.InternalTypings.InferComponentProps<NSPills.Component>;\nclass RootPills extends Component<\n RootProps,\n typeof RootPills.enhance,\n NSPills.Handlers,\n {},\n {},\n NSPills.DefaultProps\n> {\n static displayName = 'Pills';\n static style = style;\n static defaultProps = ({ behavior }: RootProps) => ({\n size: 'm',\n defaultValue: null,\n behavior: behavior ?? 'auto',\n } as const);\n\n itemValues: Array<NSPills.Pill.Props['value']> = [];\n\n lastSelectedIndex: number | null = null;\n currentSelectedIndex: number | null = null;\n\n rootRef: React.MutableRefObject<HTMLDivElement | null> = React.createRef();\n pills: Array<HTMLButtonElement> = [];\n segmentIndicatorRef: React.MutableRefObject<HTMLSpanElement | null> = React.createRef();\n\n ro: ResizeObserver | null = null;\n\n static enhance = [a11yEnhance({\n onNeighborChange: (neighborElement, props) => {\n if (neighborElement) {\n neighborElement.focus();\n if (props.behavior === 'auto') {\n neighborElement.click();\n }\n }\n },\n childSelector: (props) => {\n const selector = props.behavior === 'auto' ? ['role', 'radio'] : ['role', 'tab'];\n\n return selector as [string, string];\n },\n })] as const;\n\n constructor(props: RootProps) {\n super(props);\n if (canUseDOM()) {\n this.ro = new ResizeObserver(trottle(() => this.updateSegmentIndicator()));\n }\n }\n\n uncontrolledProps() {\n return {\n value: null,\n };\n }\n\n componentDidUpdate() {\n this.updateSelectedIndexes();\n this.updateSegmentIndicator();\n }\n\n componentDidMount() {\n this.updateSegmentIndicator();\n }\n\n componentWillUnmount() {\n this.ro?.disconnect();\n }\n\n updateSelectedIndexes() {\n if (this.currentSelectedIndex === null) return;\n if (this.currentSelectedIndex <= this.pills.length - 1) return;\n\n this.currentSelectedIndex = null;\n this.lastSelectedIndex = null;\n }\n\n updateSegmentIndicator() {\n const indicator = this.segmentIndicatorRef?.current;\n\n if (!indicator) return;\n\n if (this.currentSelectedIndex === null) {\n indicator.style.removeProperty('--global-speed');\n indicator.style.removeProperty('--global-left');\n indicator.style.removeProperty('--global-width');\n indicator.style.removeProperty('--global-height');\n\n return;\n };\n\n const root = this.rootRef?.current;\n const pill = this.pills[this.currentSelectedIndex];\n\n if (!pill || !root) return;\n\n const pillRect = pill.getBoundingClientRect();\n const rootRect = root.getBoundingClientRect();\n\n const speed = this.lastSelectedIndex === null\n ? '--transition-slow'\n : Math.abs(this.currentSelectedIndex - this.lastSelectedIndex) > TRANSITION_SLOW_THRESHOLD\n ? '--transition-slow'\n : '--transition-fast';\n const left = pillRect.left - rootRect.left;\n const width = pillRect.width;\n const height = pillRect.height;\n\n indicator.style.setProperty('--global-speed', `var(${speed})`);\n indicator.style.setProperty('--global-left', `${left}px`);\n indicator.style.setProperty('--global-width', `${width}px`);\n indicator.style.setProperty('--global-height', `${height}px`);\n }\n\n bindHandlerClick = (value: NSPills.Pill.Props['value']) => (e: React.MouseEvent) => {\n this.handlers.value(value, e);\n };\n\n bindHandleKeyDown = (value: NSPills.Pill.Props['value']) => (e: React.KeyboardEvent) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n this.handlers.value(value, e);\n }\n };\n\n getItemProps(props: NSPills.Pill.Props, index: number) {\n const { value, size, disabled, behavior } = this.asProps;\n const isSelected = value === props.value;\n\n this.itemValues[index] = props.value;\n\n if (isSelected) {\n this.lastSelectedIndex = this.currentSelectedIndex;\n this.currentSelectedIndex = index;\n }\n\n return {\n index: index,\n size,\n disabled,\n selected: isSelected,\n behavior,\n tabIndex: isSelected ? 0 : -1,\n onClick: this.bindHandlerClick(props.value),\n onKeyDown: this.bindHandleKeyDown(props.value),\n ref: (node: HTMLButtonElement | null) => {\n const prevPill = this.pills[index];\n\n if (prevPill) {\n this.ro?.unobserve(prevPill);\n }\n\n if (node === null) {\n this.pills = this.pills.filter((_, pillIndex) => pillIndex !== index);\n return;\n };\n\n this.pills[index] = node;\n\n this.ro?.observe(node);\n },\n };\n }\n\n getItemTextProps() {\n const { size } = this.asProps;\n\n return {\n size: size === 'm' ? 200 : 300,\n };\n }\n\n render() {\n const SPills = Root;\n const SSegmentIndicator = Box;\n const { Children, styles, disabled, behavior, value } = this.asProps;\n\n return sstyled(styles)(\n <SPills\n render={Box}\n role={behavior === 'auto' ? 'radiogroup' : 'tablist'}\n aria-disabled={disabled}\n use:tabIndex={value !== null ? -1 : 0}\n ref={this.rootRef}\n >\n <SSegmentIndicator\n tag='span'\n ref={this.segmentIndicatorRef}\n aria-hidden\n />\n <Children />\n </SPills>,\n );\n }\n}\n\nfunction Pill(props: Intergalactic.InternalTypings.InferChildComponentProps<NSPills.Pill.Component, typeof RootPills, 'Item'>) {\n const SPill = Root;\n const SPillContainer = Box;\n const SPillSeparator = Box;\n const { Children, styles, addonLeft, addonRight, selected, disabled, behavior, size } = props;\n\n const roleAreaProps = {\n 'role': behavior === 'auto' ? 'radio' : 'tab',\n 'aria-checked': behavior === 'auto' ? selected : undefined,\n 'aria-selected': behavior !== 'auto' ? selected : undefined,\n };\n\n return sstyled(styles)(\n <SPillContainer>\n <SPill\n render={Box}\n tag='button'\n type='button'\n tabIndex={0}\n aria-disabled={disabled}\n {...roleAreaProps}\n >\n {addonLeft ? <Pills.Item.Addon tag={addonLeft} /> : null}\n {addonTextChildren(Children, Pills.Item.Text, Pills.Item.Addon)}\n {addonRight ? <Pills.Item.Addon tag={addonRight} /> : null}\n </SPill>\n <SPillSeparator\n // @ts-ignore\n size={size}\n aria-hidden\n />\n </SPillContainer>,\n );\n}\n\nfunction Text(props: Intergalactic.InternalTypings.InferComponentProps<NSPills.Pill.Text.Component>) {\n const SText = Root;\n return sstyled(props.styles)(<SText render={SemcoreText} />);\n}\n\nfunction Addon(props: Intergalactic.InternalTypings.InferComponentProps<NSPills.Pill.Addon.Component>) {\n const SAddon = Root;\n return sstyled(props.styles)(<SAddon render={Box} tag='span' />);\n}\n\nexport const wrapPills = <PropsExtending extends {}>(wrapper: (\n props: Intergalactic.InternalTypings.UntypeRefAndTag<\n Intergalactic.InternalTypings.ComponentPropsNesting<NSPills.WrapComponent>\n > &\n PropsExtending,\n) => React.ReactNode) => wrapper as NSPills.WrapComponent<PropsExtending>;\n\n/**\n * Pills\n *\n * {@link https://developer.semrush.com/intergalactic/components/pills/pills-api/|API} | {@link https://developer.semrush.com/intergalactic/components/pills/pills-code/|Examples}\n */\nconst Pills = createComponent<\n NSPills.Component,\n typeof RootPills\n>(RootPills, {\n Item: [Pill, { Text, Addon }],\n});\n\nexport default Pills;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Pills.type.js","names":[],"sources":["../../src/Pills.type.ts"],"sourcesContent":["import type { NSBox, NSNeighborLocation } from '@semcore/base-components';\nimport type { PropGetterFn, Intergalactic } from '@semcore/core';\nimport type React from 'react';\n\ndeclare namespace NSPills {\n // TODO: It looks like the value isn't accurate. Revise and align it with the component's logic.\n type Value = string | number | boolean | null;\n type Props<T extends NSPills.Value = NSPills.Value> =
|
|
1
|
+
{"version":3,"file":"Pills.type.js","names":[],"sources":["../../src/Pills.type.ts"],"sourcesContent":["import type { NSBox, NSNeighborLocation } from '@semcore/base-components';\nimport type { PropGetterFn, Intergalactic } from '@semcore/core';\nimport type { NSText } from '@semcore/typography';\nimport type React from 'react';\n\ndeclare namespace NSPills {\n // TODO: It looks like the value isn't accurate. Revise and align it with the component's logic.\n type Value = string | number | boolean | null;\n type Props<T extends NSPills.Value = NSPills.Value> = NSBox.Props & {\n /** Pills size */\n size?: 'l' | 'm';\n /** Disabled state */\n disabled?: boolean;\n /** Called when the selection is changed */\n onChange?:\n | ((value: T, e?: React.SyntheticEvent<HTMLSpanElement>) => void)\n | React.Dispatch<React.SetStateAction<T>>;\n /** Value for the selected pill */\n value?: T;\n /** Default value for the selected pill */\n defaultValue?: T;\n /** Sets semantic role for corresponding behavior,\n * when set to `auto` pressing left and right arrows\n * selects corresponding sibling pill.\n *\n * It's recommended to use `auto` behavior in forms\n * while `manual` behavior for navigation and layout.\n * @default tabs\n */\n behavior?:\n | 'auto'\n | 'manual';\n };\n type Ctx = {\n getItemProps: PropGetterFn;\n };\n type Handlers = {\n value: null;\n };\n type DefaultProps = {\n size: 'm';\n defaultValue: null;\n behavior: Props['behavior'];\n };\n namespace Pill {\n type Props = NSBox.Props & NSNeighborLocation.Detect.Props & {\n /** Pill value */\n value?: NSPills.Value;\n /** Disabled state */\n disabled?: boolean;\n /** Selected state */\n selected?: boolean;\n /** Left addon text */\n addonLeft?: React.ElementType;\n /** Right addon tag */\n addonRight?: React.ElementType;\n };\n namespace Text {\n type Component = NSText.Component;\n }\n namespace Addon {\n type Component = NSBox.Component;\n }\n\n type Component = Intergalactic.Component<'button', Props, [handlers: Handlers]>;\n }\n\n type WrapComponent<PropsExtending = {}> = (<\n V extends Value,\n Tag extends Intergalactic.Tag = 'div',\n >(\n props: Intergalactic.InternalTypings.ComponentProps<\n Tag,\n 'div',\n Props<V>,\n Ctx,\n [handlers: Handlers]\n > &\n PropsExtending,\n ) => Intergalactic.InternalTypings.ComponentRenderingResults) &\n Intergalactic.InternalTypings.ComponentAdditive<'div', 'div', Props>;\n\n type Component = WrapComponent & {\n Item: Pill.Component & {\n Text: Pill.Text.Component;\n Addon: Pill.Addon.Component;\n };\n };\n}\n\n/** @deprecated It will be removed in v19. */\nexport type PillsValue = NSPills.Value;\n/** @deprecated It will be removed in v19. */\nexport type PillsProps<T extends PillsValue = PillsValue> = NSPills.Props<T>;\n/** @deprecated It will be removed in v19. */\nexport type PillProps = NSPills.Pill.Props;\n/** @deprecated It will be removed in v19. */\nexport type PillsContext = NSPills.Ctx;\n/** @deprecated It will be removed in v19. */\nexport type PillsHandlers = NSPills.Handlers;\n\nexport type { NSPills };\n"],"mappings":"","ignoreList":[]}
|