@servicetitan/anvil2 1.42.2 → 1.43.1
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 +24 -0
- package/dist/{Combobox-D2aSaDkz.js → Combobox-Ct30JT3y.js} +8 -8
- package/dist/{Combobox-D2aSaDkz.js.map → Combobox-Ct30JT3y.js.map} +1 -1
- package/dist/Combobox.js +1 -1
- package/dist/{DateField-D28_sa7P.js → DateField-_TqCdcYv.js} +4 -3
- package/dist/{DateField-D28_sa7P.js.map → DateField-_TqCdcYv.js.map} +1 -1
- package/dist/DateField.js +1 -1
- package/dist/{DateFieldRange--oSGfjYa.js → DateFieldRange-Dk8WA52F.js} +2 -2
- package/dist/{DateFieldRange--oSGfjYa.js.map → DateFieldRange-Dk8WA52F.js.map} +1 -1
- package/dist/DateFieldRange.js +1 -1
- package/dist/{DateFieldSingle-0a8Bk7Yj.js → DateFieldSingle-D3xD8YZk.js} +2 -2
- package/dist/{DateFieldSingle-0a8Bk7Yj.js.map → DateFieldSingle-D3xD8YZk.js.map} +1 -1
- package/dist/DateFieldSingle.js +1 -1
- package/dist/{DateFieldYearless-DCv9WJdu.js → DateFieldYearless-BxkCSNk5.js} +2 -2
- package/dist/{DateFieldYearless-DCv9WJdu.js.map → DateFieldYearless-BxkCSNk5.js.map} +1 -1
- package/dist/DateFieldYearless-CAUHW6Ow-EUWxJ0OY.js +1431 -0
- package/dist/DateFieldYearless-CAUHW6Ow-EUWxJ0OY.js.map +1 -0
- package/dist/DateFieldYearless.js +1 -1
- package/dist/{Page-KN0DLtcf.js → Page-CxB5N9dR.js} +36 -36
- package/dist/{Page-KN0DLtcf.js.map → Page-CxB5N9dR.js.map} +1 -1
- package/dist/Page.css +72 -72
- package/dist/Page.js +1 -1
- package/dist/{Popover-B1HaUjGI.js → Popover-BPiqdyu1.js} +2 -2
- package/dist/{Popover-B1HaUjGI.js.map → Popover-BPiqdyu1.js.map} +1 -1
- package/dist/{Popover-CU2cGVD8-FWJOuFRj.js → Popover-CU2cGVD8-Casl3vM1.js} +2 -2
- package/dist/{Popover-CU2cGVD8-FWJOuFRj.js.map → Popover-CU2cGVD8-Casl3vM1.js.map} +1 -1
- package/dist/Popover.js +1 -1
- package/dist/TimeField-DRHLRqN3.js +913 -0
- package/dist/TimeField-DRHLRqN3.js.map +1 -0
- package/dist/TimeField.css +10 -0
- package/dist/TimeField.d.ts +2 -0
- package/dist/TimeField.js +2 -0
- package/dist/TimeField.js.map +1 -0
- package/dist/{Toolbar-BznMJKGJ.js → Toolbar-CSWhVSUM.js} +2 -2
- package/dist/{Toolbar-BznMJKGJ.js.map → Toolbar-CSWhVSUM.js.map} +1 -1
- package/dist/Toolbar.js +1 -1
- package/dist/assets/icons/st/gnav_field_pro_active.svg +1 -1
- package/dist/assets/icons/st/gnav_field_pro_inactive.svg +1 -1
- package/dist/assets/icons/st/gnav_home_filled.svg +1 -0
- package/dist/assets/icons/st/gnav_home_outline.svg +1 -0
- package/dist/assets/icons/st.ts +2 -0
- package/dist/components/TimeField/TimeField.d.ts +53 -0
- package/dist/components/TimeField/index.d.ts +1 -0
- package/dist/components/index.d.ts +1 -0
- package/dist/event-BEJFimi3.js +6 -0
- package/dist/event-BEJFimi3.js.map +1 -0
- package/dist/index.js +9 -8
- package/dist/index.js.map +1 -1
- package/dist/usePopoverCloseDelayWorkaround-BZcjPkvT-BZcjPkvT.js +18 -0
- package/dist/usePopoverCloseDelayWorkaround-BZcjPkvT-BZcjPkvT.js.map +1 -0
- package/dist/{DateFieldYearless-C3_oGDr3-5meexzZO.js → usePopoverSupport-B9Lsqryr-DhZHMoNb.js} +470 -1429
- package/dist/usePopoverSupport-B9Lsqryr-DhZHMoNb.js.map +1 -0
- package/package.json +5 -5
- package/dist/DateFieldYearless-C3_oGDr3-5meexzZO.js.map +0 -1
- package/dist/usePopoverCloseDelayWorkaround-BhhG-xEB-hfJZaXHC.js +0 -21
- package/dist/usePopoverCloseDelayWorkaround-BhhG-xEB-hfJZaXHC.js.map +0 -1
package/dist/Page.css
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
@layer starter, reset, base, state, application;
|
|
2
2
|
|
|
3
|
-
html:has(.
|
|
3
|
+
html:has(._page_1tte7_1)::-webkit-scrollbar {
|
|
4
4
|
display: none;
|
|
5
5
|
}
|
|
6
6
|
|
|
7
|
-
._content-
|
|
7
|
+
._content-footer_1tte7_5 {
|
|
8
8
|
all: revert-layer;
|
|
9
9
|
}
|
|
10
10
|
|
|
11
11
|
@layer base {
|
|
12
|
-
.
|
|
12
|
+
._page_1tte7_1 {
|
|
13
13
|
margin: 0;
|
|
14
14
|
padding: 0;
|
|
15
15
|
border-style: none;
|
|
@@ -22,7 +22,7 @@ html:has(._page_e0zkf_1)::-webkit-scrollbar {
|
|
|
22
22
|
display: flex;
|
|
23
23
|
flex-direction: column;
|
|
24
24
|
}
|
|
25
|
-
.
|
|
25
|
+
._page_1tte7_1 ._container_1tte7_23 {
|
|
26
26
|
display: grid;
|
|
27
27
|
flex-grow: 1;
|
|
28
28
|
grid-template-areas: "sidebar" "header" "content" "panel" "footer";
|
|
@@ -40,21 +40,21 @@ html:has(._page_e0zkf_1)::-webkit-scrollbar {
|
|
|
40
40
|
overflow-x: clip;
|
|
41
41
|
transition: 300ms cubic-bezier(0.4, 0, 0.6, 1);
|
|
42
42
|
}
|
|
43
|
-
.
|
|
43
|
+
._content_1tte7_5 {
|
|
44
44
|
grid-area: content;
|
|
45
45
|
container: content/inline-size;
|
|
46
46
|
display: flex;
|
|
47
47
|
}
|
|
48
|
-
.
|
|
48
|
+
._content_1tte7_5 ._content-inner_1tte7_46 {
|
|
49
49
|
padding-block: 1.5rem;
|
|
50
50
|
padding-inline: 1rem;
|
|
51
51
|
flex-basis: 100%;
|
|
52
52
|
}
|
|
53
|
-
.
|
|
53
|
+
._content_1tte7_5 ._content-header-inner_1tte7_51 {
|
|
54
54
|
padding-block-start: 2rem;
|
|
55
55
|
padding-block-end: 0.5rem;
|
|
56
56
|
}
|
|
57
|
-
._content-
|
|
57
|
+
._content-footer_1tte7_5 {
|
|
58
58
|
grid-area: footer;
|
|
59
59
|
position: sticky;
|
|
60
60
|
display: flex;
|
|
@@ -67,7 +67,7 @@ html:has(._page_e0zkf_1)::-webkit-scrollbar {
|
|
|
67
67
|
padding-inline: 1rem;
|
|
68
68
|
box-shadow: var(--shadow-color, rgba(20, 20, 20, 0.0784313725)) 0rem 0.125rem 0.5rem;
|
|
69
69
|
}
|
|
70
|
-
.
|
|
70
|
+
._sidebar_1tte7_68 {
|
|
71
71
|
grid-area: sidebar;
|
|
72
72
|
display: flex;
|
|
73
73
|
flex-direction: row;
|
|
@@ -78,7 +78,7 @@ html:has(._page_e0zkf_1)::-webkit-scrollbar {
|
|
|
78
78
|
position: relative;
|
|
79
79
|
background-color: var(--background-color, #ffffff);
|
|
80
80
|
}
|
|
81
|
-
.
|
|
81
|
+
._sidebar_1tte7_68 ._sidebar-inner_1tte7_79 {
|
|
82
82
|
position: sticky;
|
|
83
83
|
top: var(--offset, 0px);
|
|
84
84
|
width: 100%;
|
|
@@ -91,7 +91,7 @@ html:has(._page_e0zkf_1)::-webkit-scrollbar {
|
|
|
91
91
|
transition-behavior: allow-discrete;
|
|
92
92
|
overflow-x: clip;
|
|
93
93
|
}
|
|
94
|
-
.
|
|
94
|
+
._sidebar_1tte7_68 ._sidebar-inner_1tte7_79 > div {
|
|
95
95
|
background-color: inherit;
|
|
96
96
|
flex-direction: column;
|
|
97
97
|
display: flex;
|
|
@@ -105,7 +105,7 @@ html:has(._page_e0zkf_1)::-webkit-scrollbar {
|
|
|
105
105
|
bottom: 0;
|
|
106
106
|
right: 0;
|
|
107
107
|
}
|
|
108
|
-
.
|
|
108
|
+
._sidebar_1tte7_68 ._toggle-button-wrapper_1tte7_106 {
|
|
109
109
|
position: absolute;
|
|
110
110
|
width: 0px;
|
|
111
111
|
overflow: visible;
|
|
@@ -113,7 +113,7 @@ html:has(._page_e0zkf_1)::-webkit-scrollbar {
|
|
|
113
113
|
right: 0;
|
|
114
114
|
height: 100%;
|
|
115
115
|
}
|
|
116
|
-
.
|
|
116
|
+
._sidebar_1tte7_68 ._toggle-button-wrapper_1tte7_106 ._toggle-button-tooltip_1tte7_114 {
|
|
117
117
|
position: sticky;
|
|
118
118
|
top: calc(1.5rem + var(--offset, 0px));
|
|
119
119
|
margin-left: -1rem;
|
|
@@ -121,7 +121,7 @@ html:has(._page_e0zkf_1)::-webkit-scrollbar {
|
|
|
121
121
|
width: -moz-fit-content;
|
|
122
122
|
width: fit-content;
|
|
123
123
|
}
|
|
124
|
-
.
|
|
124
|
+
._sidebar_1tte7_68 ._toggle-button-wrapper_1tte7_106 ._toggle-button_1tte7_106 {
|
|
125
125
|
padding: 0.5rem;
|
|
126
126
|
min-width: 2rem;
|
|
127
127
|
width: 2rem;
|
|
@@ -129,16 +129,16 @@ html:has(._page_e0zkf_1)::-webkit-scrollbar {
|
|
|
129
129
|
border-radius: 100%;
|
|
130
130
|
border-color: var(--border-color-subdued, #dfe0e1);
|
|
131
131
|
}
|
|
132
|
-
.
|
|
132
|
+
._sidebar_1tte7_68 ._toggle-button-wrapper_1tte7_106 ._toggle-button_1tte7_106::before {
|
|
133
133
|
border-radius: inherit;
|
|
134
134
|
}
|
|
135
|
-
._sidebar-
|
|
135
|
+
._sidebar-header_1tte7_132 {
|
|
136
136
|
display: flex;
|
|
137
137
|
align-items: center;
|
|
138
138
|
justify-content: space-between;
|
|
139
139
|
padding: 1rem;
|
|
140
140
|
}
|
|
141
|
-
._sidebar-adaptive-trigger-
|
|
141
|
+
._sidebar-adaptive-trigger-container_1tte7_138 {
|
|
142
142
|
padding: 0.5rem;
|
|
143
143
|
background-color: var(--background-color, #ffffff);
|
|
144
144
|
width: auto;
|
|
@@ -147,13 +147,13 @@ html:has(._page_e0zkf_1)::-webkit-scrollbar {
|
|
|
147
147
|
z-index: 1;
|
|
148
148
|
box-shadow: var(--shadow-color, rgba(20, 20, 20, 0.0784313725)) 0rem 0.125rem 0.5rem;
|
|
149
149
|
}
|
|
150
|
-
._sidebar-adaptive-
|
|
150
|
+
._sidebar-adaptive-container_1tte7_147 {
|
|
151
151
|
overflow: auto;
|
|
152
152
|
}
|
|
153
|
-
._sidebar-adaptive-
|
|
153
|
+
._sidebar-adaptive-container_1tte7_147 ._sidebar-adaptive_1tte7_138 {
|
|
154
154
|
padding: 0.5rem;
|
|
155
155
|
}
|
|
156
|
-
.
|
|
156
|
+
._panel_1tte7_153 {
|
|
157
157
|
grid-area: panel;
|
|
158
158
|
display: flex;
|
|
159
159
|
flex-direction: column;
|
|
@@ -163,7 +163,7 @@ html:has(._page_e0zkf_1)::-webkit-scrollbar {
|
|
|
163
163
|
width: -moz-available;
|
|
164
164
|
width: stretch;
|
|
165
165
|
}
|
|
166
|
-
.
|
|
166
|
+
._panel_1tte7_153 ._panel-inner_1tte7_161 {
|
|
167
167
|
padding: 1rem;
|
|
168
168
|
outline: none;
|
|
169
169
|
width: 100%;
|
|
@@ -174,7 +174,7 @@ html:has(._page_e0zkf_1)::-webkit-scrollbar {
|
|
|
174
174
|
transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
|
|
175
175
|
transition-behavior: allow-discrete;
|
|
176
176
|
}
|
|
177
|
-
._virtual-scroll-
|
|
177
|
+
._virtual-scroll-container_1tte7_172 {
|
|
178
178
|
display: none;
|
|
179
179
|
position: fixed;
|
|
180
180
|
top: var(--offset, 0px);
|
|
@@ -183,44 +183,44 @@ html:has(._page_e0zkf_1)::-webkit-scrollbar {
|
|
|
183
183
|
height: calc(100dvh - var(--offset, 0px));
|
|
184
184
|
z-index: 1;
|
|
185
185
|
}
|
|
186
|
-
.
|
|
186
|
+
._header_1tte7_181 {
|
|
187
187
|
grid-area: header;
|
|
188
188
|
flex: 0 0 auto;
|
|
189
189
|
}
|
|
190
|
-
.
|
|
191
|
-
.
|
|
190
|
+
._header_1tte7_181 ._title-wrapper_1tte7_185,
|
|
191
|
+
._header_1tte7_181 ._title_1tte7_185 {
|
|
192
192
|
display: inline;
|
|
193
193
|
}
|
|
194
|
-
.
|
|
194
|
+
._header_1tte7_181 ._title_1tte7_185 {
|
|
195
195
|
margin-block-end: 0;
|
|
196
196
|
}
|
|
197
|
-
.
|
|
197
|
+
._header_1tte7_181 ._preference-action_1tte7_192 {
|
|
198
198
|
margin-inline-start: 0.5rem;
|
|
199
199
|
}
|
|
200
|
-
.
|
|
200
|
+
._header_1tte7_181 ._chips_1tte7_195 {
|
|
201
201
|
gap: 0.5rem;
|
|
202
202
|
margin-block-start: 0.75rem;
|
|
203
203
|
}
|
|
204
|
-
.
|
|
204
|
+
._header_1tte7_181 ._actions_1tte7_199 {
|
|
205
205
|
flex-wrap: wrap;
|
|
206
206
|
gap: 0.75rem;
|
|
207
207
|
}
|
|
208
208
|
@container content (max-width: 768px) {
|
|
209
|
-
.
|
|
209
|
+
._header_1tte7_181 ._actions_1tte7_199 > * {
|
|
210
210
|
flex: 1 1 calc(50% - 0.75rem);
|
|
211
211
|
min-width: min(100%, 200px);
|
|
212
212
|
}
|
|
213
|
-
.
|
|
213
|
+
._header_1tte7_181 ._actions_1tte7_199:has(button[class*=primary]) button[class*=primary] {
|
|
214
214
|
order: -1;
|
|
215
215
|
}
|
|
216
216
|
}
|
|
217
|
-
.
|
|
217
|
+
._header_1tte7_181 ._description_1tte7_212 {
|
|
218
218
|
max-width: 80ch;
|
|
219
219
|
}
|
|
220
220
|
}
|
|
221
221
|
@layer state {
|
|
222
222
|
@container page (min-width: 1024px) {
|
|
223
|
-
.
|
|
223
|
+
._page_1tte7_1 ._container_1tte7_23 {
|
|
224
224
|
grid-template-areas: "sidebar header panel" "sidebar content panel" "sidebar footer panel";
|
|
225
225
|
grid-template-rows: auto 1fr auto;
|
|
226
226
|
grid-template-columns: var(--first-col) var(--second-col) var(--third-col);
|
|
@@ -228,41 +228,41 @@ html:has(._page_e0zkf_1)::-webkit-scrollbar {
|
|
|
228
228
|
--second-col: 1fr;
|
|
229
229
|
--third-col: 0px;
|
|
230
230
|
}
|
|
231
|
-
.
|
|
231
|
+
._page_1tte7_1 ._container_1tte7_23:has(._panel_1tte7_153._open_1tte7_226._small_1tte7_226) {
|
|
232
232
|
--third-col: 16rem;
|
|
233
233
|
}
|
|
234
|
-
.
|
|
234
|
+
._page_1tte7_1 ._container_1tte7_23:has(._panel_1tte7_153._open_1tte7_226._medium_1tte7_229) {
|
|
235
235
|
--third-col: 24rem;
|
|
236
236
|
}
|
|
237
|
-
.
|
|
237
|
+
._page_1tte7_1 ._container_1tte7_23:has(._panel_1tte7_153._open_1tte7_226._large_1tte7_232) {
|
|
238
238
|
--third-col: 30rem;
|
|
239
239
|
}
|
|
240
|
-
.
|
|
240
|
+
._page_1tte7_1 ._container_1tte7_23:has(._sidebar_1tte7_68._collapsed_1tte7_235) {
|
|
241
241
|
--first-col: 1.5rem;
|
|
242
242
|
}
|
|
243
|
-
.
|
|
243
|
+
._page_1tte7_1 ._container_1tte7_23:not(:has(._sidebar_1tte7_68)) {
|
|
244
244
|
grid-template-areas: "header panel" "content panel" "footer panel";
|
|
245
245
|
grid-template-columns: 1fr var(--third-col);
|
|
246
246
|
--first-col: 0px;
|
|
247
247
|
}
|
|
248
|
-
.
|
|
248
|
+
._page_1tte7_1 ._container_1tte7_23:not(:has(._sidebar_1tte7_68)) > ._content_1tte7_5, ._page_1tte7_1 ._container_1tte7_23:not(:has(._sidebar_1tte7_68)) > div:not(._panel_1tte7_153, ._content-footer_1tte7_5) {
|
|
249
249
|
grid-column: 1;
|
|
250
250
|
width: 100%;
|
|
251
251
|
}
|
|
252
|
-
.
|
|
252
|
+
._page_1tte7_1 ._container_1tte7_23:not(:has(._sidebar_1tte7_68)) > ._panel_1tte7_153 {
|
|
253
253
|
grid-column: 2;
|
|
254
254
|
}
|
|
255
|
-
.
|
|
255
|
+
._page_1tte7_1 ._content_1tte7_5 ._virtual-scroll-container_1tte7_172 {
|
|
256
256
|
display: block;
|
|
257
257
|
}
|
|
258
|
-
.
|
|
258
|
+
._page_1tte7_1 ._sidebar_1tte7_68 {
|
|
259
259
|
grid-area: sidebar;
|
|
260
260
|
padding: 0;
|
|
261
261
|
background-color: var(--background-color, #ffffff);
|
|
262
262
|
border-inline-end: 0.0625rem solid var(--border-color-subdued, #dfe0e1);
|
|
263
263
|
box-shadow: var(--shadow-color, rgba(20, 20, 20, 0.0784313725)) 0rem 0.125rem 0.5rem;
|
|
264
264
|
}
|
|
265
|
-
.
|
|
265
|
+
._page_1tte7_1 ._sidebar_1tte7_68 ._sidebar-header_1tte7_132 {
|
|
266
266
|
background-color: var(--background-color, #ffffff);
|
|
267
267
|
position: sticky;
|
|
268
268
|
padding-block-start: 1.5rem;
|
|
@@ -274,115 +274,115 @@ html:has(._page_e0zkf_1)::-webkit-scrollbar {
|
|
|
274
274
|
margin-block-end: 0.25rem;
|
|
275
275
|
z-index: 1;
|
|
276
276
|
}
|
|
277
|
-
.
|
|
277
|
+
._page_1tte7_1 ._sidebar_1tte7_68 ._sidebar-inner_1tte7_79 > div {
|
|
278
278
|
scrollbar-gutter: stable;
|
|
279
279
|
left: 0;
|
|
280
280
|
}
|
|
281
|
-
.
|
|
281
|
+
._page_1tte7_1 ._content-footer_1tte7_5 {
|
|
282
282
|
padding-inline: 2rem;
|
|
283
283
|
}
|
|
284
284
|
}
|
|
285
285
|
@container page (min-width: 1024px) {
|
|
286
|
-
.
|
|
286
|
+
._page_1tte7_1 ._content-footer_1tte7_5 {
|
|
287
287
|
padding-inline: 2.5rem;
|
|
288
288
|
}
|
|
289
289
|
}
|
|
290
290
|
@container page (min-width: 1280px) {
|
|
291
|
-
.
|
|
291
|
+
._page_1tte7_1 ._content-footer_1tte7_5 {
|
|
292
292
|
padding-inline: 3rem;
|
|
293
293
|
}
|
|
294
294
|
}
|
|
295
|
-
.
|
|
295
|
+
._sidebar_1tte7_68._collapsed_1tte7_235 ._sidebar-inner_1tte7_79 {
|
|
296
296
|
opacity: 0;
|
|
297
297
|
display: none;
|
|
298
298
|
}
|
|
299
299
|
@container content (min-width: 768px) {
|
|
300
|
-
.
|
|
300
|
+
._content_1tte7_5 ._content-inner_1tte7_46 {
|
|
301
301
|
padding-inline: 2rem;
|
|
302
302
|
}
|
|
303
303
|
}
|
|
304
304
|
@container content (min-width: 1024px) {
|
|
305
|
-
.
|
|
305
|
+
._content_1tte7_5 ._content-inner_1tte7_46 {
|
|
306
306
|
padding-inline: 2.5rem;
|
|
307
307
|
}
|
|
308
308
|
}
|
|
309
309
|
@container content (min-width: 1280px) {
|
|
310
|
-
.
|
|
310
|
+
._content_1tte7_5 ._content-inner_1tte7_46 {
|
|
311
311
|
padding-inline: 3rem;
|
|
312
312
|
}
|
|
313
313
|
}
|
|
314
314
|
@container content (min-width: 768px) {
|
|
315
|
-
.
|
|
315
|
+
._content_1tte7_5 ~ ._panel_1tte7_153 ._panel-inner_1tte7_161 {
|
|
316
316
|
padding-inline: 2rem;
|
|
317
317
|
}
|
|
318
318
|
}
|
|
319
319
|
@container page (min-width: 768px) {
|
|
320
|
-
.
|
|
320
|
+
._panel_1tte7_153 {
|
|
321
321
|
grid-area: panel;
|
|
322
322
|
}
|
|
323
|
-
.
|
|
323
|
+
._panel_1tte7_153 ._panel-inner_1tte7_161 {
|
|
324
324
|
padding-inline: 2rem;
|
|
325
325
|
}
|
|
326
326
|
}
|
|
327
327
|
@container page (min-width: 1024px) {
|
|
328
|
-
.
|
|
328
|
+
._panel_1tte7_153 {
|
|
329
329
|
flex-direction: row;
|
|
330
330
|
border-inline-start: 0.0625rem solid var(--border-color-subdued, #dfe0e1);
|
|
331
331
|
}
|
|
332
|
-
.
|
|
332
|
+
._panel_1tte7_153 ._panel-inner_1tte7_161 {
|
|
333
333
|
position: sticky;
|
|
334
|
-
top:
|
|
334
|
+
top: var(--offset, 0px);
|
|
335
335
|
height: calc(100dvh - var(--offset, 0px));
|
|
336
336
|
overflow-y: auto;
|
|
337
337
|
padding: 1.5rem 1rem;
|
|
338
338
|
scrollbar-gutter: stable;
|
|
339
339
|
padding-right: 1.5rem;
|
|
340
340
|
}
|
|
341
|
-
.
|
|
341
|
+
._panel_1tte7_153._small_1tte7_226 ._panel-inner_1tte7_161 {
|
|
342
342
|
min-width: 16rem;
|
|
343
343
|
}
|
|
344
|
-
.
|
|
344
|
+
._panel_1tte7_153._medium_1tte7_229 ._panel-inner_1tte7_161 {
|
|
345
345
|
min-width: 24rem;
|
|
346
346
|
}
|
|
347
|
-
.
|
|
347
|
+
._panel_1tte7_153._large_1tte7_232 ._panel-inner_1tte7_161 {
|
|
348
348
|
min-width: 30rem;
|
|
349
349
|
}
|
|
350
350
|
}
|
|
351
|
-
.
|
|
351
|
+
._panel_1tte7_153._noPadding_1tte7_346 ._panel-inner_1tte7_161 {
|
|
352
352
|
padding: 0;
|
|
353
353
|
}
|
|
354
|
-
.
|
|
354
|
+
._panel_1tte7_153:not(._open_1tte7_226) ._panel-inner_1tte7_161 {
|
|
355
355
|
overflow: clip;
|
|
356
356
|
display: none;
|
|
357
357
|
opacity: 0;
|
|
358
358
|
}
|
|
359
359
|
@starting-style {
|
|
360
|
-
.
|
|
360
|
+
._sidebar_1tte7_68._collapsed_1tte7_235 ._sidebar-inner_1tte7_79 {
|
|
361
361
|
opacity: 0;
|
|
362
362
|
display: none;
|
|
363
363
|
}
|
|
364
|
-
.
|
|
364
|
+
._panel_1tte7_153:not(._open_1tte7_226) ._panel-inner_1tte7_161 {
|
|
365
365
|
opacity: 0;
|
|
366
366
|
display: none;
|
|
367
367
|
}
|
|
368
368
|
}
|
|
369
369
|
}
|
|
370
370
|
@layer application {
|
|
371
|
-
._sidebar-adaptive-
|
|
371
|
+
._sidebar-adaptive-trigger_1tte7_138 {
|
|
372
372
|
color: var(--foreground-color, #141414);
|
|
373
373
|
background-color: var(--background-color-stronger, #eeeeee);
|
|
374
374
|
justify-content: start;
|
|
375
375
|
width: 100%;
|
|
376
376
|
}
|
|
377
|
-
._sidebar-adaptive-
|
|
377
|
+
._sidebar-adaptive-trigger_1tte7_138 ._sidebar-adaptive-trigger-icon_1tte7_372 {
|
|
378
378
|
flex-grow: 1;
|
|
379
379
|
}
|
|
380
|
-
._sidebar-adaptive-
|
|
380
|
+
._sidebar-adaptive-container_1tte7_147 > div {
|
|
381
381
|
height: -webkit-fill-available;
|
|
382
382
|
height: -moz-available;
|
|
383
383
|
height: stretch;
|
|
384
384
|
}
|
|
385
|
-
._toggle-button-
|
|
385
|
+
._toggle-button-wrapper_1tte7_106 ._toggle-button_1tte7_106 {
|
|
386
386
|
padding: 0.5rem;
|
|
387
387
|
min-width: 2rem;
|
|
388
388
|
width: 2rem;
|
|
@@ -391,19 +391,19 @@ html:has(._page_e0zkf_1)::-webkit-scrollbar {
|
|
|
391
391
|
border-color: var(--border-color-subdued, #dfe0e1);
|
|
392
392
|
--button-background-color: var(--background-color, #ffffff);
|
|
393
393
|
}
|
|
394
|
-
._toggle-button-
|
|
394
|
+
._toggle-button-wrapper_1tte7_106 ._toggle-button_1tte7_106::before {
|
|
395
395
|
content: "";
|
|
396
396
|
position: absolute;
|
|
397
397
|
inset: 0;
|
|
398
398
|
border-radius: inherit;
|
|
399
399
|
}
|
|
400
|
-
._toggle-button-
|
|
400
|
+
._toggle-button-wrapper_1tte7_106 ._toggle-button_1tte7_106:hover::before {
|
|
401
401
|
background-color: var(--overlay-color-hover, rgba(20, 20, 20, 0.0784313725));
|
|
402
402
|
}
|
|
403
|
-
._toggle-button-
|
|
403
|
+
._toggle-button-wrapper_1tte7_106 ._toggle-button_1tte7_106:active::before {
|
|
404
404
|
background-color: var(--overlay-color-active, rgba(20, 20, 20, 0.1607843137));
|
|
405
405
|
}
|
|
406
|
-
.
|
|
406
|
+
._header_1tte7_181 ._layout_1tte7_399 {
|
|
407
407
|
gap: 1rem;
|
|
408
408
|
}
|
|
409
409
|
}
|
package/dist/Page.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { P as Page, P as default } from './Page-
|
|
1
|
+
export { P as Page, P as default } from './Page-CxB5N9dR.js';
|
|
2
2
|
//# sourceMappingURL=Page.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { forwardRef } from 'react';
|
|
3
3
|
import { useTrackingId } from './useTrackingId.js';
|
|
4
|
-
import {
|
|
4
|
+
import { a as PopoverTrigger$1, b as PopoverContent$1, c as PopoverClose$1, d as PopoverButton$1, P as Popover$1 } from './Popover-CU2cGVD8-Casl3vM1.js';
|
|
5
5
|
import { c as childrenToString } from './childrenToString-Bz9MqbHb-Bz9MqbHb.js';
|
|
6
6
|
|
|
7
7
|
const PopoverElement = (props) => {
|
|
@@ -132,4 +132,4 @@ const Popover = Object.assign(PopoverElement, {
|
|
|
132
132
|
});
|
|
133
133
|
|
|
134
134
|
export { Popover as P, PopoverTrigger as a, PopoverContent as b, PopoverClose as c, PopoverButton as d };
|
|
135
|
-
//# sourceMappingURL=Popover-
|
|
135
|
+
//# sourceMappingURL=Popover-BPiqdyu1.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popover-B1HaUjGI.js","sources":["../src/components/Popover/Popover.tsx"],"sourcesContent":["import {\n PopoverProps as CorePopoverProps,\n Popover as CorePopover,\n PopoverTrigger as CorePopoverTrigger,\n PopoverTriggerProps as CorePopoverTriggerProps,\n PopoverContent as CorePopoverContent,\n PopoverContentProps as CorePopoverContentProps,\n PopoverClose as CorePopoverClose,\n PopoverCloseProps as CorePopoverCloseProps,\n PopoverButton as CorePopoverButton,\n PopoverButtonProps as CorePopoverButtonProps,\n childrenToString,\n} from \"@servicetitan/hammer-react\";\nimport { Ref, forwardRef } from \"react\";\nimport { useTrackingId } from \"../../hooks/useTrackingId\";\nimport { DataTrackingId } from \"../../types/DataTrackingId\";\n\n/**\n * Props for the Popover component\n * @property {ReactNode} [children] - The content to be rendered inside the popover\n * @property {string} [id] - Unique identifier for the popover\n * @property {boolean} [modal] - Whether the popover should be modal (traps focus)\n * @property {boolean} [openOnHover] - Changes interaction to use hover instead of click\n * @property {boolean} [fillAvailableHeight] - Changes height and positioning for select/combobox\n * @property {number | string} [maxHeight] - Maximum height of the popover content\n * @property {boolean} [fitScreen] - Whether the popover should fit within the screen bounds\n * @property {number | string} [minHeight] - Minimum height of the popover content\n * @property {boolean} [matchReferenceWidth] - Whether the popover width should match the trigger element\n * @property {boolean} [fixedWidth] - Whether the popover should have a fixed width\n * @property {string} [placement] - Placement of the popover relative to the trigger\n * @property {boolean} [open] - Controlled open state\n * @property {boolean} [defaultOpen] - Default open state for uncontrolled mode\n * @property {Function} [onOpenChange] - Callback when open state changes\n * @property {Function} [onOutsidePress] - Callback when clicking outside the popover\n * @property {Function} [onClose] - Fires when the floating element is requested to be closed\n * @property {boolean} [disableCaret] - Whether to disable the caret/arrow indicator\n * @property {boolean} [noPadding] - Whether to remove default padding from content\n * @property {boolean} [disableAutoUpdate] - Whether to disable automatic position updates\n * @property {boolean} [disableTriggerFocus] - Whether to disable focus on the trigger element\n * @property {number} [delay] - Delay before opening the popover (for hover mode)\n * @property {boolean} [disableCloseOnClickOutside] - Whether to disable closing on outside click\n * @property {boolean} [disableCloseOnEscape] - Whether to disable closing on escape key\n */\nexport type PopoverProps = CorePopoverProps;\n\n/**\n * Props for the PopoverTrigger component\n * @property {Function} children - Render function that receives trigger props and returns a React element\n */\nexport type PopoverTriggerProps = CorePopoverTriggerProps & DataTrackingId;\n\n/**\n * Props for the PopoverContent component\n * @property {ReactNode} [children] - The content to be displayed in the popover\n * @property {RefObject<HTMLDivElement>} [scrollerRef] - Reference to the scrollable content area\n */\nexport type PopoverContentProps = CorePopoverContentProps;\n\n/**\n * Props for the PopoverClose component\n * @property {ReactNode} [children] - The close button content\n * @property {string} [appearance] - The button appearance\n * @property {string} [size] - The button size\n * @property {string} [type] - The button type\n * @property {Function} [onClick] - Click handler for the close button\n */\nexport type PopoverCloseProps = CorePopoverCloseProps & DataTrackingId;\n\n/**\n * Props for the PopoverButton component\n * @property {ReactNode} [children] - The button content\n * @property {string} [appearance] - The button appearance\n * @property {string} [icon] - The button icon\n * @property {string} [size] - The button size\n * @property {string} [type] - The button type\n * @property {Function} [onClick] - Click handler for the button\n */\nexport type PopoverButtonProps = CorePopoverButtonProps & DataTrackingId;\n\nconst PopoverElement = (props: PopoverProps) => {\n return <CorePopover {...props} />;\n};\n\n/**\n * PopoverTrigger component for creating custom trigger elements.\n *\n * Features:\n * - Supports custom trigger elements via render prop pattern\n * - Automatic focus management and keyboard interaction\n * - Hover and click event handling\n * - Accessibility attributes (aria-haspopup, aria-expanded, aria-details)\n * - Legacy popover support with fallback\n * - Context integration with parent popover\n * - Automatic tracking ID generation for analytics\n *\n * @example\n * <Popover>\n * <Popover.Trigger>\n * {(props) => (\n * <button {...props}>\n * Click to open popover\n * </button>\n * )}\n * </Popover.Trigger>\n * <Popover.Content>\n * <p>Content here</p>\n * </Popover.Content>\n * </Popover>\n */\nexport function PopoverTrigger(props: PopoverTriggerProps) {\n return <CorePopoverTrigger {...props} />;\n}\n\n/**\n * PopoverContent component for the main popover content area.\n *\n * Features:\n * - Automatic positioning and sizing based on trigger\n * - Screen boundary detection and fitting\n * - Scroll handling with custom scroller reference\n * - Focus management and keyboard navigation\n * - Hover interaction support for tooltip mode\n * - Escape key handling for closing\n * - Tab key trapping for modal popovers\n * - Arrow/caret indicator with automatic positioning\n * - Legacy popover support with fallback\n * - Context integration with parent popover\n * - Accessibility support with proper ARIA roles\n *\n * @example\n * <Popover>\n * <Popover.Button>Click to open</Popover.Button>\n * <Popover.Content>\n * <p>This is the popover content</p>\n * <Popover.Close>Close</Popover.Close>\n * </Popover.Content>\n * </Popover>\n */\nexport const PopoverContent = forwardRef(\n (props: PopoverContentProps, ref: Ref<HTMLDivElement>) => {\n return <CorePopoverContent ref={ref} {...props} />;\n },\n);\nPopoverContent.displayName = CorePopoverContent.displayName;\n\n/**\n * PopoverClose component for closing the popover.\n *\n * Features:\n * - Automatic popover closing on click\n * - Supports all Button component props and styling\n * - Controlled and uncontrolled mode support\n * - Legacy popover support with fallback\n * - Context integration with parent popover\n * - Accessibility support with proper button semantics\n * - Delayed closing for controlled mode\n * - Automatic tracking ID generation for analytics\n *\n * @example\n * <Popover>\n * <Popover.Button>Click to open</Popover.Button>\n * <Popover.Content>\n * <p>Content here</p>\n * <Popover.Close>Close</Popover.Close>\n * </Popover.Content>\n * </Popover>\n */\nexport const PopoverClose = forwardRef(\n (props: PopoverCloseProps, ref: Ref<HTMLButtonElement>) => {\n const data = {\n children: childrenToString(props.children),\n };\n\n const trackingId = useTrackingId({\n name: \"PopoverClose\",\n data,\n hasOverride: !!props[\"data-tracking-id\"],\n });\n return (\n <CorePopoverClose ref={ref} data-tracking-id={trackingId} {...props} />\n );\n },\n);\nPopoverClose.displayName = CorePopoverClose.displayName;\n\n/**\n * PopoverButton component for creating button-style triggers.\n *\n * Features:\n * - Button styling and behavior with all Button props\n * - Automatic popover opening on click\n * - Hover interaction support for tooltip mode\n * - Focus management and keyboard navigation\n * - Accessibility attributes (aria-haspopup, aria-expanded, aria-details)\n * - Legacy popover support with fallback\n * - Context integration with parent popover\n * - Event handling for mouse, keyboard, and focus events\n * - Automatic tracking ID generation for analytics\n *\n * @example\n * <Popover>\n * <Popover.Button>Click to open</Popover.Button>\n * <Popover.Content>\n * <p>Content here</p>\n * </Popover.Content>\n * </Popover>\n */\nexport const PopoverButton = forwardRef(\n (props: PopoverButtonProps, ref: Ref<HTMLButtonElement>) => {\n const data = {\n children: childrenToString(props.children),\n appearance: props.appearance,\n icon: props.icon,\n size: props.size,\n type: props.type,\n };\n\n const trackingId = useTrackingId({\n name: \"PopoverButton\",\n data,\n hasOverride: !!props[\"data-tracking-id\"],\n });\n return (\n <CorePopoverButton ref={ref} data-tracking-id={trackingId} {...props} />\n );\n },\n);\nPopoverButton.displayName = CorePopoverButton.displayName;\n\n// export const usePopoverContext = useCorePopoverContext;\n\n/**\n * Popover component for displaying floating content relative to a trigger element.\n *\n * Features:\n * - Supports both controlled and uncontrolled modes\n * - Automatic positioning with fallback strategies\n * - Hover and click interaction modes\n * - Modal and non-modal variants\n * - Custom trigger elements\n * - Automatic height and width management\n * - Screen boundary detection and fitting\n * - Keyboard navigation and accessibility\n * - Popover API support with legacy fallback\n * - Outside click detection and handling\n * - Focus management and trapping\n * - Arrow/caret indicators\n * - Delay support for hover interactions\n * - Automatic tracking ID generation for analytics\n *\n * @example\n * <Popover>\n * <Popover.Button>Click to open</Popover.Button>\n * <Popover.Content>\n * <p>This is the popover content</p>\n * <Popover.Close>Close</Popover.Close>\n * </Popover.Content>\n * </Popover>\n *\n * @example\n * <Popover openOnHover delay={1000}>\n * <Popover.Button>Hover to open</Popover.Button>\n * <Popover.Content>Tooltip content</Popover.Content>\n * </Popover>\n *\n * @example\n * <Popover modal>\n * <Popover.Trigger>\n * {(props) => <button {...props}>Custom trigger</button>}\n * </Popover.Trigger>\n * <Popover.Content>\n * <TextField label=\"Form field\" />\n * <Popover.Close>Done</Popover.Close>\n * </Popover.Content>\n * </Popover>\n */\nexport const Popover = Object.assign(PopoverElement, {\n /**\n * PopoverTrigger component for creating custom trigger elements.\n *\n * Features:\n * - Supports custom trigger elements via render prop pattern\n * - Automatic focus management and keyboard interaction\n * - Hover and click event handling\n * - Accessibility attributes (aria-haspopup, aria-expanded, aria-details)\n * - Legacy popover support with fallback\n * - Context integration with parent popover\n * - Automatic tracking ID generation for analytics\n *\n * @example\n * <Popover.Trigger>\n * {(props) => (\n * <button {...props}>\n * Click to open popover\n * </button>\n * )}\n * </Popover.Trigger>\n */\n Trigger: PopoverTrigger,\n /**\n * PopoverContent component for the main popover content area.\n *\n * Features:\n * - Automatic positioning and sizing based on trigger\n * - Screen boundary detection and fitting\n * - Scroll handling with custom scroller reference\n * - Focus management and keyboard navigation\n * - Hover interaction support for tooltip mode\n * - Escape key handling for closing\n * - Tab key trapping for modal popovers\n * - Arrow/caret indicator with automatic positioning\n * - Legacy popover support with fallback\n * - Context integration with parent popover\n * - Accessibility support with proper ARIA roles\n *\n * @example\n * <Popover.Content>\n * <p>This is the popover content</p>\n * <Popover.Close>Close</Popover.Close>\n * </Popover.Content>\n */\n Content: PopoverContent,\n /**\n * PopoverClose component for closing the popover.\n *\n * Features:\n * - Automatic popover closing on click\n * - Supports all Button component props and styling\n * - Controlled and uncontrolled mode support\n * - Legacy popover support with fallback\n * - Context integration with parent popover\n * - Accessibility support with proper button semantics\n * - Delayed closing for controlled mode\n * - Automatic tracking ID generation for analytics\n *\n * @example\n * <Popover.Close>Close</Popover.Close>\n */\n Close: PopoverClose,\n /**\n * PopoverButton component for creating button-style triggers.\n *\n * Features:\n * - Button styling and behavior with all Button props\n * - Automatic popover opening on click\n * - Hover interaction support for tooltip mode\n * - Focus management and keyboard navigation\n * - Accessibility attributes (aria-haspopup, aria-expanded, aria-details)\n * - Legacy popover support with fallback\n * - Context integration with parent popover\n * - Event handling for mouse, keyboard, and focus events\n * - Automatic tracking ID generation for analytics\n *\n * @example\n * <Popover.Button>Click to open</Popover.Button>\n */\n Button: PopoverButton,\n});\n"],"names":["CorePopover","CorePopoverTrigger","CorePopoverContent","CorePopoverClose","CorePopoverButton"],"mappings":";;;;;;AA+EA,MAAM,cAAA,GAAiB,CAAC,KAAwB,KAAA;AAC9C,EAAO,uBAAA,GAAA,CAACA,SAAa,EAAA,EAAA,GAAG,KAAO,EAAA,CAAA;AACjC,CAAA;AA4BO,SAAS,eAAe,KAA4B,EAAA;AACzD,EAAO,uBAAA,GAAA,CAACC,gBAAoB,EAAA,EAAA,GAAG,KAAO,EAAA,CAAA;AACxC;AA2BO,MAAM,cAAiB,GAAA,UAAA;AAAA,EAC5B,CAAC,OAA4B,GAA6B,KAAA;AACxD,IAAA,uBAAQ,GAAA,CAAAC,gBAAA,EAAA,EAAmB,GAAW,EAAA,GAAG,KAAO,EAAA,CAAA;AAAA;AAEpD;AACA,cAAA,CAAe,cAAcA,gBAAmB,CAAA,WAAA;AAwBzC,MAAM,YAAe,GAAA,UAAA;AAAA,EAC1B,CAAC,OAA0B,GAAgC,KAAA;AACzD,IAAA,MAAM,IAAO,GAAA;AAAA,MACX,QAAA,EAAU,gBAAiB,CAAA,KAAA,CAAM,QAAQ;AAAA,KAC3C;AAEA,IAAA,MAAM,aAAa,aAAc,CAAA;AAAA,MAC/B,IAAM,EAAA,cAAA;AAAA,MACN,IAAA;AAAA,MACA,WAAa,EAAA,CAAC,CAAC,KAAA,CAAM,kBAAkB;AAAA,KACxC,CAAA;AACD,IAAA,2BACGC,cAAiB,EAAA,EAAA,GAAA,EAAU,kBAAkB,EAAA,UAAA,EAAa,GAAG,KAAO,EAAA,CAAA;AAAA;AAG3E;AACA,YAAA,CAAa,cAAcA,cAAiB,CAAA,WAAA;AAwBrC,MAAM,aAAgB,GAAA,UAAA;AAAA,EAC3B,CAAC,OAA2B,GAAgC,KAAA;AAC1D,IAAA,MAAM,IAAO,GAAA;AAAA,MACX,QAAA,EAAU,gBAAiB,CAAA,KAAA,CAAM,QAAQ,CAAA;AAAA,MACzC,YAAY,KAAM,CAAA,UAAA;AAAA,MAClB,MAAM,KAAM,CAAA,IAAA;AAAA,MACZ,MAAM,KAAM,CAAA,IAAA;AAAA,MACZ,MAAM,KAAM,CAAA;AAAA,KACd;AAEA,IAAA,MAAM,aAAa,aAAc,CAAA;AAAA,MAC/B,IAAM,EAAA,eAAA;AAAA,MACN,IAAA;AAAA,MACA,WAAa,EAAA,CAAC,CAAC,KAAA,CAAM,kBAAkB;AAAA,KACxC,CAAA;AACD,IAAA,2BACGC,eAAkB,EAAA,EAAA,GAAA,EAAU,kBAAkB,EAAA,UAAA,EAAa,GAAG,KAAO,EAAA,CAAA;AAAA;AAG5E;AACA,aAAA,CAAc,cAAcA,eAAkB,CAAA,WAAA;AAiDjC,MAAA,OAAA,GAAU,MAAO,CAAA,MAAA,CAAO,cAAgB,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAsBnD,OAAS,EAAA,cAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAuBT,OAAS,EAAA,cAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAiBT,KAAO,EAAA,YAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAkBP,MAAQ,EAAA;AACV,CAAC;;;;"}
|
|
1
|
+
{"version":3,"file":"Popover-BPiqdyu1.js","sources":["../src/components/Popover/Popover.tsx"],"sourcesContent":["import {\n PopoverProps as CorePopoverProps,\n Popover as CorePopover,\n PopoverTrigger as CorePopoverTrigger,\n PopoverTriggerProps as CorePopoverTriggerProps,\n PopoverContent as CorePopoverContent,\n PopoverContentProps as CorePopoverContentProps,\n PopoverClose as CorePopoverClose,\n PopoverCloseProps as CorePopoverCloseProps,\n PopoverButton as CorePopoverButton,\n PopoverButtonProps as CorePopoverButtonProps,\n childrenToString,\n} from \"@servicetitan/hammer-react\";\nimport { Ref, forwardRef } from \"react\";\nimport { useTrackingId } from \"../../hooks/useTrackingId\";\nimport { DataTrackingId } from \"../../types/DataTrackingId\";\n\n/**\n * Props for the Popover component\n * @property {ReactNode} [children] - The content to be rendered inside the popover\n * @property {string} [id] - Unique identifier for the popover\n * @property {boolean} [modal] - Whether the popover should be modal (traps focus)\n * @property {boolean} [openOnHover] - Changes interaction to use hover instead of click\n * @property {boolean} [fillAvailableHeight] - Changes height and positioning for select/combobox\n * @property {number | string} [maxHeight] - Maximum height of the popover content\n * @property {boolean} [fitScreen] - Whether the popover should fit within the screen bounds\n * @property {number | string} [minHeight] - Minimum height of the popover content\n * @property {boolean} [matchReferenceWidth] - Whether the popover width should match the trigger element\n * @property {boolean} [fixedWidth] - Whether the popover should have a fixed width\n * @property {string} [placement] - Placement of the popover relative to the trigger\n * @property {boolean} [open] - Controlled open state\n * @property {boolean} [defaultOpen] - Default open state for uncontrolled mode\n * @property {Function} [onOpenChange] - Callback when open state changes\n * @property {Function} [onOutsidePress] - Callback when clicking outside the popover\n * @property {Function} [onClose] - Fires when the floating element is requested to be closed\n * @property {boolean} [disableCaret] - Whether to disable the caret/arrow indicator\n * @property {boolean} [noPadding] - Whether to remove default padding from content\n * @property {boolean} [disableAutoUpdate] - Whether to disable automatic position updates\n * @property {boolean} [disableTriggerFocus] - Whether to disable focus on the trigger element\n * @property {number} [delay] - Delay before opening the popover (for hover mode)\n * @property {boolean} [disableCloseOnClickOutside] - Whether to disable closing on outside click\n * @property {boolean} [disableCloseOnEscape] - Whether to disable closing on escape key\n */\nexport type PopoverProps = CorePopoverProps;\n\n/**\n * Props for the PopoverTrigger component\n * @property {Function} children - Render function that receives trigger props and returns a React element\n */\nexport type PopoverTriggerProps = CorePopoverTriggerProps & DataTrackingId;\n\n/**\n * Props for the PopoverContent component\n * @property {ReactNode} [children] - The content to be displayed in the popover\n * @property {RefObject<HTMLDivElement>} [scrollerRef] - Reference to the scrollable content area\n */\nexport type PopoverContentProps = CorePopoverContentProps;\n\n/**\n * Props for the PopoverClose component\n * @property {ReactNode} [children] - The close button content\n * @property {string} [appearance] - The button appearance\n * @property {string} [size] - The button size\n * @property {string} [type] - The button type\n * @property {Function} [onClick] - Click handler for the close button\n */\nexport type PopoverCloseProps = CorePopoverCloseProps & DataTrackingId;\n\n/**\n * Props for the PopoverButton component\n * @property {ReactNode} [children] - The button content\n * @property {string} [appearance] - The button appearance\n * @property {string} [icon] - The button icon\n * @property {string} [size] - The button size\n * @property {string} [type] - The button type\n * @property {Function} [onClick] - Click handler for the button\n */\nexport type PopoverButtonProps = CorePopoverButtonProps & DataTrackingId;\n\nconst PopoverElement = (props: PopoverProps) => {\n return <CorePopover {...props} />;\n};\n\n/**\n * PopoverTrigger component for creating custom trigger elements.\n *\n * Features:\n * - Supports custom trigger elements via render prop pattern\n * - Automatic focus management and keyboard interaction\n * - Hover and click event handling\n * - Accessibility attributes (aria-haspopup, aria-expanded, aria-details)\n * - Legacy popover support with fallback\n * - Context integration with parent popover\n * - Automatic tracking ID generation for analytics\n *\n * @example\n * <Popover>\n * <Popover.Trigger>\n * {(props) => (\n * <button {...props}>\n * Click to open popover\n * </button>\n * )}\n * </Popover.Trigger>\n * <Popover.Content>\n * <p>Content here</p>\n * </Popover.Content>\n * </Popover>\n */\nexport function PopoverTrigger(props: PopoverTriggerProps) {\n return <CorePopoverTrigger {...props} />;\n}\n\n/**\n * PopoverContent component for the main popover content area.\n *\n * Features:\n * - Automatic positioning and sizing based on trigger\n * - Screen boundary detection and fitting\n * - Scroll handling with custom scroller reference\n * - Focus management and keyboard navigation\n * - Hover interaction support for tooltip mode\n * - Escape key handling for closing\n * - Tab key trapping for modal popovers\n * - Arrow/caret indicator with automatic positioning\n * - Legacy popover support with fallback\n * - Context integration with parent popover\n * - Accessibility support with proper ARIA roles\n *\n * @example\n * <Popover>\n * <Popover.Button>Click to open</Popover.Button>\n * <Popover.Content>\n * <p>This is the popover content</p>\n * <Popover.Close>Close</Popover.Close>\n * </Popover.Content>\n * </Popover>\n */\nexport const PopoverContent = forwardRef(\n (props: PopoverContentProps, ref: Ref<HTMLDivElement>) => {\n return <CorePopoverContent ref={ref} {...props} />;\n },\n);\nPopoverContent.displayName = CorePopoverContent.displayName;\n\n/**\n * PopoverClose component for closing the popover.\n *\n * Features:\n * - Automatic popover closing on click\n * - Supports all Button component props and styling\n * - Controlled and uncontrolled mode support\n * - Legacy popover support with fallback\n * - Context integration with parent popover\n * - Accessibility support with proper button semantics\n * - Delayed closing for controlled mode\n * - Automatic tracking ID generation for analytics\n *\n * @example\n * <Popover>\n * <Popover.Button>Click to open</Popover.Button>\n * <Popover.Content>\n * <p>Content here</p>\n * <Popover.Close>Close</Popover.Close>\n * </Popover.Content>\n * </Popover>\n */\nexport const PopoverClose = forwardRef(\n (props: PopoverCloseProps, ref: Ref<HTMLButtonElement>) => {\n const data = {\n children: childrenToString(props.children),\n };\n\n const trackingId = useTrackingId({\n name: \"PopoverClose\",\n data,\n hasOverride: !!props[\"data-tracking-id\"],\n });\n return (\n <CorePopoverClose ref={ref} data-tracking-id={trackingId} {...props} />\n );\n },\n);\nPopoverClose.displayName = CorePopoverClose.displayName;\n\n/**\n * PopoverButton component for creating button-style triggers.\n *\n * Features:\n * - Button styling and behavior with all Button props\n * - Automatic popover opening on click\n * - Hover interaction support for tooltip mode\n * - Focus management and keyboard navigation\n * - Accessibility attributes (aria-haspopup, aria-expanded, aria-details)\n * - Legacy popover support with fallback\n * - Context integration with parent popover\n * - Event handling for mouse, keyboard, and focus events\n * - Automatic tracking ID generation for analytics\n *\n * @example\n * <Popover>\n * <Popover.Button>Click to open</Popover.Button>\n * <Popover.Content>\n * <p>Content here</p>\n * </Popover.Content>\n * </Popover>\n */\nexport const PopoverButton = forwardRef(\n (props: PopoverButtonProps, ref: Ref<HTMLButtonElement>) => {\n const data = {\n children: childrenToString(props.children),\n appearance: props.appearance,\n icon: props.icon,\n size: props.size,\n type: props.type,\n };\n\n const trackingId = useTrackingId({\n name: \"PopoverButton\",\n data,\n hasOverride: !!props[\"data-tracking-id\"],\n });\n return (\n <CorePopoverButton ref={ref} data-tracking-id={trackingId} {...props} />\n );\n },\n);\nPopoverButton.displayName = CorePopoverButton.displayName;\n\n// export const usePopoverContext = useCorePopoverContext;\n\n/**\n * Popover component for displaying floating content relative to a trigger element.\n *\n * Features:\n * - Supports both controlled and uncontrolled modes\n * - Automatic positioning with fallback strategies\n * - Hover and click interaction modes\n * - Modal and non-modal variants\n * - Custom trigger elements\n * - Automatic height and width management\n * - Screen boundary detection and fitting\n * - Keyboard navigation and accessibility\n * - Popover API support with legacy fallback\n * - Outside click detection and handling\n * - Focus management and trapping\n * - Arrow/caret indicators\n * - Delay support for hover interactions\n * - Automatic tracking ID generation for analytics\n *\n * @example\n * <Popover>\n * <Popover.Button>Click to open</Popover.Button>\n * <Popover.Content>\n * <p>This is the popover content</p>\n * <Popover.Close>Close</Popover.Close>\n * </Popover.Content>\n * </Popover>\n *\n * @example\n * <Popover openOnHover delay={1000}>\n * <Popover.Button>Hover to open</Popover.Button>\n * <Popover.Content>Tooltip content</Popover.Content>\n * </Popover>\n *\n * @example\n * <Popover modal>\n * <Popover.Trigger>\n * {(props) => <button {...props}>Custom trigger</button>}\n * </Popover.Trigger>\n * <Popover.Content>\n * <TextField label=\"Form field\" />\n * <Popover.Close>Done</Popover.Close>\n * </Popover.Content>\n * </Popover>\n */\nexport const Popover = Object.assign(PopoverElement, {\n /**\n * PopoverTrigger component for creating custom trigger elements.\n *\n * Features:\n * - Supports custom trigger elements via render prop pattern\n * - Automatic focus management and keyboard interaction\n * - Hover and click event handling\n * - Accessibility attributes (aria-haspopup, aria-expanded, aria-details)\n * - Legacy popover support with fallback\n * - Context integration with parent popover\n * - Automatic tracking ID generation for analytics\n *\n * @example\n * <Popover.Trigger>\n * {(props) => (\n * <button {...props}>\n * Click to open popover\n * </button>\n * )}\n * </Popover.Trigger>\n */\n Trigger: PopoverTrigger,\n /**\n * PopoverContent component for the main popover content area.\n *\n * Features:\n * - Automatic positioning and sizing based on trigger\n * - Screen boundary detection and fitting\n * - Scroll handling with custom scroller reference\n * - Focus management and keyboard navigation\n * - Hover interaction support for tooltip mode\n * - Escape key handling for closing\n * - Tab key trapping for modal popovers\n * - Arrow/caret indicator with automatic positioning\n * - Legacy popover support with fallback\n * - Context integration with parent popover\n * - Accessibility support with proper ARIA roles\n *\n * @example\n * <Popover.Content>\n * <p>This is the popover content</p>\n * <Popover.Close>Close</Popover.Close>\n * </Popover.Content>\n */\n Content: PopoverContent,\n /**\n * PopoverClose component for closing the popover.\n *\n * Features:\n * - Automatic popover closing on click\n * - Supports all Button component props and styling\n * - Controlled and uncontrolled mode support\n * - Legacy popover support with fallback\n * - Context integration with parent popover\n * - Accessibility support with proper button semantics\n * - Delayed closing for controlled mode\n * - Automatic tracking ID generation for analytics\n *\n * @example\n * <Popover.Close>Close</Popover.Close>\n */\n Close: PopoverClose,\n /**\n * PopoverButton component for creating button-style triggers.\n *\n * Features:\n * - Button styling and behavior with all Button props\n * - Automatic popover opening on click\n * - Hover interaction support for tooltip mode\n * - Focus management and keyboard navigation\n * - Accessibility attributes (aria-haspopup, aria-expanded, aria-details)\n * - Legacy popover support with fallback\n * - Context integration with parent popover\n * - Event handling for mouse, keyboard, and focus events\n * - Automatic tracking ID generation for analytics\n *\n * @example\n * <Popover.Button>Click to open</Popover.Button>\n */\n Button: PopoverButton,\n});\n"],"names":["CorePopover","CorePopoverTrigger","CorePopoverContent","CorePopoverClose","CorePopoverButton"],"mappings":";;;;;;AA+EA,MAAM,cAAA,GAAiB,CAAC,KAAwB,KAAA;AAC9C,EAAO,uBAAA,GAAA,CAACA,SAAa,EAAA,EAAA,GAAG,KAAO,EAAA,CAAA;AACjC,CAAA;AA4BO,SAAS,eAAe,KAA4B,EAAA;AACzD,EAAO,uBAAA,GAAA,CAACC,gBAAoB,EAAA,EAAA,GAAG,KAAO,EAAA,CAAA;AACxC;AA2BO,MAAM,cAAiB,GAAA,UAAA;AAAA,EAC5B,CAAC,OAA4B,GAA6B,KAAA;AACxD,IAAA,uBAAQ,GAAA,CAAAC,gBAAA,EAAA,EAAmB,GAAW,EAAA,GAAG,KAAO,EAAA,CAAA;AAAA;AAEpD;AACA,cAAA,CAAe,cAAcA,gBAAmB,CAAA,WAAA;AAwBzC,MAAM,YAAe,GAAA,UAAA;AAAA,EAC1B,CAAC,OAA0B,GAAgC,KAAA;AACzD,IAAA,MAAM,IAAO,GAAA;AAAA,MACX,QAAA,EAAU,gBAAiB,CAAA,KAAA,CAAM,QAAQ;AAAA,KAC3C;AAEA,IAAA,MAAM,aAAa,aAAc,CAAA;AAAA,MAC/B,IAAM,EAAA,cAAA;AAAA,MACN,IAAA;AAAA,MACA,WAAa,EAAA,CAAC,CAAC,KAAA,CAAM,kBAAkB;AAAA,KACxC,CAAA;AACD,IAAA,2BACGC,cAAiB,EAAA,EAAA,GAAA,EAAU,kBAAkB,EAAA,UAAA,EAAa,GAAG,KAAO,EAAA,CAAA;AAAA;AAG3E;AACA,YAAA,CAAa,cAAcA,cAAiB,CAAA,WAAA;AAwBrC,MAAM,aAAgB,GAAA,UAAA;AAAA,EAC3B,CAAC,OAA2B,GAAgC,KAAA;AAC1D,IAAA,MAAM,IAAO,GAAA;AAAA,MACX,QAAA,EAAU,gBAAiB,CAAA,KAAA,CAAM,QAAQ,CAAA;AAAA,MACzC,YAAY,KAAM,CAAA,UAAA;AAAA,MAClB,MAAM,KAAM,CAAA,IAAA;AAAA,MACZ,MAAM,KAAM,CAAA,IAAA;AAAA,MACZ,MAAM,KAAM,CAAA;AAAA,KACd;AAEA,IAAA,MAAM,aAAa,aAAc,CAAA;AAAA,MAC/B,IAAM,EAAA,eAAA;AAAA,MACN,IAAA;AAAA,MACA,WAAa,EAAA,CAAC,CAAC,KAAA,CAAM,kBAAkB;AAAA,KACxC,CAAA;AACD,IAAA,2BACGC,eAAkB,EAAA,EAAA,GAAA,EAAU,kBAAkB,EAAA,UAAA,EAAa,GAAG,KAAO,EAAA,CAAA;AAAA;AAG5E;AACA,aAAA,CAAc,cAAcA,eAAkB,CAAA,WAAA;AAiDjC,MAAA,OAAA,GAAU,MAAO,CAAA,MAAA,CAAO,cAAgB,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAsBnD,OAAS,EAAA,cAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAuBT,OAAS,EAAA,cAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAiBT,KAAO,EAAA,YAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAkBP,MAAQ,EAAA;AACV,CAAC;;;;"}
|
|
@@ -1147,5 +1147,5 @@ const Popover = Object.assign(PopoverElement, {
|
|
|
1147
1147
|
Context: PopoverContext
|
|
1148
1148
|
});
|
|
1149
1149
|
|
|
1150
|
-
export {
|
|
1151
|
-
//# sourceMappingURL=Popover-CU2cGVD8-
|
|
1150
|
+
export { Popover as P, PopoverTrigger as a, PopoverContent as b, PopoverClose as c, PopoverButton as d, PopoverLegacy as e, usePopoverContext as f, usePopoverLegacyContext as u };
|
|
1151
|
+
//# sourceMappingURL=Popover-CU2cGVD8-Casl3vM1.js.map
|