@semcore/pills 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/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 +1 -0
- package/lib/types/Pills.d.ts.map +1 -0
- package/lib/types/Pills.type.d.ts +12 -10
- package/lib/types/Pills.type.d.ts.map +1 -0
- package/lib/types/index.d.ts +1 -0
- package/lib/types/index.d.ts.map +1 -0
- 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/esm/Pills.mjs
CHANGED
|
@@ -1,36 +1,45 @@
|
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
2
|
import { sstyled, Component, assignProps, createComponent } from "@semcore/core";
|
|
3
|
-
import { Box
|
|
3
|
+
import { Box } from "@semcore/base-components";
|
|
4
4
|
import addonTextChildren from "@semcore/core/lib/utils/addonTextChildren";
|
|
5
|
+
import canUseDOM from "@semcore/core/lib/utils/canUseDOM";
|
|
5
6
|
import a11yEnhance from "@semcore/core/lib/utils/enhances/a11yEnhance";
|
|
7
|
+
import trottle from "@semcore/core/lib/utils/rafTrottle";
|
|
8
|
+
import { Text as Text$1 } from "@semcore/typography";
|
|
6
9
|
import React from "react";
|
|
7
10
|
/*!__reshadow-styles__:"./style/pills.shadow.css"*/
|
|
8
11
|
const style = (
|
|
9
12
|
/*__reshadow_css_start__*/
|
|
10
13
|
(sstyled.insert(
|
|
11
14
|
/*__inner_css_start__*/
|
|
12
|
-
|
|
15
|
+
'.___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}}',
|
|
13
16
|
/*__inner_css_end__*/
|
|
14
|
-
"
|
|
17
|
+
"1jzu3_gg_"
|
|
15
18
|
), /*__reshadow_css_end__*/
|
|
16
19
|
{
|
|
17
|
-
"
|
|
18
|
-
"
|
|
19
|
-
"
|
|
20
|
-
"
|
|
21
|
-
"
|
|
22
|
-
"
|
|
23
|
-
"
|
|
24
|
-
"
|
|
25
|
-
"_disabled": "
|
|
26
|
-
"_size_m": "
|
|
27
|
-
"_size_l": "_size_l_1o2wa_gg_"
|
|
20
|
+
"__SSegmentIndicator": "___SSegmentIndicator_1jzu3_gg_",
|
|
21
|
+
"__SText": "___SText_1jzu3_gg_",
|
|
22
|
+
"__SAddon": "___SAddon_1jzu3_gg_",
|
|
23
|
+
"__SPills": "___SPills_1jzu3_gg_",
|
|
24
|
+
"_size_l": "_size_l_1jzu3_gg_",
|
|
25
|
+
"__SPillContainer": "___SPillContainer_1jzu3_gg_",
|
|
26
|
+
"__SPillSeparator": "___SPillSeparator_1jzu3_gg_",
|
|
27
|
+
"__SPill": "___SPill_1jzu3_gg_",
|
|
28
|
+
"_disabled": "__disabled_1jzu3_gg_",
|
|
29
|
+
"_size_m": "_size_m_1jzu3_gg_"
|
|
28
30
|
})
|
|
29
31
|
);
|
|
32
|
+
const TRANSITION_SLOW_THRESHOLD = 1;
|
|
30
33
|
class RootPills extends Component {
|
|
31
|
-
constructor(
|
|
32
|
-
super(
|
|
34
|
+
constructor(props) {
|
|
35
|
+
super(props);
|
|
33
36
|
_defineProperty(this, "itemValues", []);
|
|
37
|
+
_defineProperty(this, "lastSelectedIndex", null);
|
|
38
|
+
_defineProperty(this, "currentSelectedIndex", null);
|
|
39
|
+
_defineProperty(this, "rootRef", /* @__PURE__ */ React.createRef());
|
|
40
|
+
_defineProperty(this, "pills", []);
|
|
41
|
+
_defineProperty(this, "segmentIndicatorRef", /* @__PURE__ */ React.createRef());
|
|
42
|
+
_defineProperty(this, "ro", null);
|
|
34
43
|
_defineProperty(this, "bindHandlerClick", (value) => (e) => {
|
|
35
44
|
this.handlers.value(value, e);
|
|
36
45
|
});
|
|
@@ -40,12 +49,56 @@ class RootPills extends Component {
|
|
|
40
49
|
this.handlers.value(value, e);
|
|
41
50
|
}
|
|
42
51
|
});
|
|
52
|
+
if (canUseDOM()) {
|
|
53
|
+
this.ro = new ResizeObserver(trottle(() => this.updateSegmentIndicator()));
|
|
54
|
+
}
|
|
43
55
|
}
|
|
44
56
|
uncontrolledProps() {
|
|
45
57
|
return {
|
|
46
58
|
value: null
|
|
47
59
|
};
|
|
48
60
|
}
|
|
61
|
+
componentDidUpdate() {
|
|
62
|
+
this.updateSelectedIndexes();
|
|
63
|
+
this.updateSegmentIndicator();
|
|
64
|
+
}
|
|
65
|
+
componentDidMount() {
|
|
66
|
+
this.updateSegmentIndicator();
|
|
67
|
+
}
|
|
68
|
+
componentWillUnmount() {
|
|
69
|
+
this.ro?.disconnect();
|
|
70
|
+
}
|
|
71
|
+
updateSelectedIndexes() {
|
|
72
|
+
if (this.currentSelectedIndex === null) return;
|
|
73
|
+
if (this.currentSelectedIndex <= this.pills.length - 1) return;
|
|
74
|
+
this.currentSelectedIndex = null;
|
|
75
|
+
this.lastSelectedIndex = null;
|
|
76
|
+
}
|
|
77
|
+
updateSegmentIndicator() {
|
|
78
|
+
const indicator = this.segmentIndicatorRef?.current;
|
|
79
|
+
if (!indicator) return;
|
|
80
|
+
if (this.currentSelectedIndex === null) {
|
|
81
|
+
indicator.style.removeProperty("--global-speed");
|
|
82
|
+
indicator.style.removeProperty("--global-left");
|
|
83
|
+
indicator.style.removeProperty("--global-width");
|
|
84
|
+
indicator.style.removeProperty("--global-height");
|
|
85
|
+
return;
|
|
86
|
+
}
|
|
87
|
+
;
|
|
88
|
+
const root = this.rootRef?.current;
|
|
89
|
+
const pill = this.pills[this.currentSelectedIndex];
|
|
90
|
+
if (!pill || !root) return;
|
|
91
|
+
const pillRect = pill.getBoundingClientRect();
|
|
92
|
+
const rootRect = root.getBoundingClientRect();
|
|
93
|
+
const speed = this.lastSelectedIndex === null ? "--transition-slow" : Math.abs(this.currentSelectedIndex - this.lastSelectedIndex) > TRANSITION_SLOW_THRESHOLD ? "--transition-slow" : "--transition-fast";
|
|
94
|
+
const left = pillRect.left - rootRect.left;
|
|
95
|
+
const width = pillRect.width;
|
|
96
|
+
const height = pillRect.height;
|
|
97
|
+
indicator.style.setProperty("--global-speed", `var(${speed})`);
|
|
98
|
+
indicator.style.setProperty("--global-left", `${left}px`);
|
|
99
|
+
indicator.style.setProperty("--global-width", `${width}px`);
|
|
100
|
+
indicator.style.setProperty("--global-height", `${height}px`);
|
|
101
|
+
}
|
|
49
102
|
getItemProps(props, index) {
|
|
50
103
|
const {
|
|
51
104
|
value,
|
|
@@ -55,6 +108,10 @@ class RootPills extends Component {
|
|
|
55
108
|
} = this.asProps;
|
|
56
109
|
const isSelected = value === props.value;
|
|
57
110
|
this.itemValues[index] = props.value;
|
|
111
|
+
if (isSelected) {
|
|
112
|
+
this.lastSelectedIndex = this.currentSelectedIndex;
|
|
113
|
+
this.currentSelectedIndex = index;
|
|
114
|
+
}
|
|
58
115
|
return {
|
|
59
116
|
index,
|
|
60
117
|
size,
|
|
@@ -63,16 +120,37 @@ class RootPills extends Component {
|
|
|
63
120
|
behavior,
|
|
64
121
|
tabIndex: isSelected ? 0 : -1,
|
|
65
122
|
onClick: this.bindHandlerClick(props.value),
|
|
66
|
-
onKeyDown: this.bindHandleKeyDown(props.value)
|
|
123
|
+
onKeyDown: this.bindHandleKeyDown(props.value),
|
|
124
|
+
ref: (node) => {
|
|
125
|
+
const prevPill = this.pills[index];
|
|
126
|
+
if (prevPill) {
|
|
127
|
+
this.ro?.unobserve(prevPill);
|
|
128
|
+
}
|
|
129
|
+
if (node === null) {
|
|
130
|
+
this.pills = this.pills.filter((_, pillIndex) => pillIndex !== index);
|
|
131
|
+
return;
|
|
132
|
+
}
|
|
133
|
+
;
|
|
134
|
+
this.pills[index] = node;
|
|
135
|
+
this.ro?.observe(node);
|
|
136
|
+
}
|
|
137
|
+
};
|
|
138
|
+
}
|
|
139
|
+
getItemTextProps() {
|
|
140
|
+
const {
|
|
141
|
+
size
|
|
142
|
+
} = this.asProps;
|
|
143
|
+
return {
|
|
144
|
+
size: size === "m" ? 200 : 300
|
|
67
145
|
};
|
|
68
146
|
}
|
|
69
147
|
render() {
|
|
70
148
|
var _ref = this.asProps, _ref5;
|
|
71
149
|
const SPills = Box;
|
|
150
|
+
const SSegmentIndicator = Box;
|
|
72
151
|
const {
|
|
73
152
|
Children,
|
|
74
153
|
styles,
|
|
75
|
-
controlsLength,
|
|
76
154
|
disabled,
|
|
77
155
|
behavior,
|
|
78
156
|
value
|
|
@@ -81,11 +159,14 @@ class RootPills extends Component {
|
|
|
81
159
|
...assignProps({
|
|
82
160
|
"role": behavior === "auto" ? "radiogroup" : "tablist",
|
|
83
161
|
"aria-disabled": disabled,
|
|
84
|
-
"use:tabIndex": value !== null ? -1 : 0
|
|
162
|
+
"use:tabIndex": value !== null ? -1 : 0,
|
|
163
|
+
"ref": this.rootRef
|
|
85
164
|
}, _ref)
|
|
86
|
-
}), /* @__PURE__ */ React.createElement(
|
|
87
|
-
"
|
|
88
|
-
|
|
165
|
+
}), /* @__PURE__ */ React.createElement(SSegmentIndicator, _ref5.cn("SSegmentIndicator", {
|
|
166
|
+
"tag": "span",
|
|
167
|
+
"ref": this.segmentIndicatorRef,
|
|
168
|
+
"aria-hidden": true
|
|
169
|
+
})), /* @__PURE__ */ React.createElement(Children, _ref5.cn("Children", {})));
|
|
89
170
|
}
|
|
90
171
|
}
|
|
91
172
|
_defineProperty(RootPills, "displayName", "Pills");
|
|
@@ -114,6 +195,8 @@ _defineProperty(RootPills, "enhance", [a11yEnhance({
|
|
|
114
195
|
function Pill(props) {
|
|
115
196
|
var _ref2 = arguments[0], _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 : void 0,
|
|
131
213
|
"aria-selected": behavior !== "auto" ? selected : void 0
|
|
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
|
...assignProps({
|
|
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,15 +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(
|
|
228
|
+
SPillSeparator,
|
|
229
|
+
_ref6.cn("SPillSeparator", {
|
|
230
|
+
"size": size,
|
|
231
|
+
"aria-hidden": true
|
|
232
|
+
})
|
|
233
|
+
));
|
|
147
234
|
}
|
|
148
235
|
function Text(props) {
|
|
149
236
|
var _ref3 = arguments[0], _ref7;
|
|
150
|
-
const SText =
|
|
237
|
+
const SText = Text$1;
|
|
151
238
|
return _ref7 = sstyled(props.styles), /* @__PURE__ */ React.createElement(SText, _ref7.cn("SText", {
|
|
152
|
-
...assignProps({
|
|
153
|
-
"tag": "span"
|
|
154
|
-
}, _ref3)
|
|
239
|
+
...assignProps({}, _ref3)
|
|
155
240
|
}));
|
|
156
241
|
}
|
|
157
242
|
function Addon(props) {
|