@astryxdesign/core 0.7.7-canary.fc68123 → 0.7.7
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 +104 -0
- package/dist/AlertDialog/AlertDialog.d.ts +1 -4
- package/dist/AlertDialog/AlertDialog.d.ts.map +1 -1
- package/dist/AlertDialog/AlertDialog.js +6 -36
- package/dist/BottomSheet/BottomSheetPanel.d.ts.map +1 -1
- package/dist/BottomSheet/BottomSheetPanel.js +4 -23
- package/dist/BottomSheet/useSheetGestures.d.ts.map +1 -1
- package/dist/BottomSheet/useSheetGestures.js +1 -3
- package/dist/Button/Button.d.ts.map +1 -1
- package/dist/Button/Button.js +1 -17
- package/dist/CheckboxInput/CheckboxInput.d.ts.map +1 -1
- package/dist/CheckboxInput/CheckboxInput.js +2 -13
- package/dist/ComplexSelector/ComplexSelector.d.ts +1 -4
- package/dist/ComplexSelector/ComplexSelector.d.ts.map +1 -1
- package/dist/ComplexSelector/ComplexSelector.js +4 -14
- package/dist/ContextMenu/ContextMenu.js +2 -2
- package/dist/Dialog/Dialog.d.ts.map +1 -1
- package/dist/Dialog/Dialog.js +31 -7
- package/dist/Field/Field.js +2 -2
- package/dist/HoverCard/HoverCard.d.ts +3 -4
- package/dist/HoverCard/HoverCard.d.ts.map +1 -1
- package/dist/HoverCard/HoverCard.js +2 -27
- package/dist/HoverCard/useHoverCard.d.ts +4 -5
- package/dist/HoverCard/useHoverCard.d.ts.map +1 -1
- package/dist/HoverCard/useHoverCard.js +31 -17
- package/dist/Icon/Icon.d.ts +1 -5
- package/dist/Icon/Icon.d.ts.map +1 -1
- package/dist/Icon/Icon.js +2 -5
- package/dist/Layer/usePressPin.d.ts +5 -17
- package/dist/Layer/usePressPin.d.ts.map +1 -1
- package/dist/Layer/usePressPin.js +12 -62
- package/dist/Lightbox/Lightbox.d.ts.map +1 -1
- package/dist/Lightbox/Lightbox.js +0 -18
- package/dist/PowerSearch/PowerSearch.d.ts +3 -36
- package/dist/PowerSearch/PowerSearch.d.ts.map +1 -1
- package/dist/PowerSearch/PowerSearch.js +127 -433
- package/dist/PowerSearch/PowerSearchEditPopover.d.ts +1 -32
- package/dist/PowerSearch/PowerSearchEditPopover.d.ts.map +1 -1
- package/dist/PowerSearch/PowerSearchEditPopover.js +6 -17
- package/dist/PowerSearch/PowerSearchValueEditor.d.ts +3 -38
- package/dist/PowerSearch/PowerSearchValueEditor.d.ts.map +1 -1
- package/dist/PowerSearch/PowerSearchValueEditor.js +61 -170
- package/dist/PowerSearch/formatFilterValue.d.ts +0 -7
- package/dist/PowerSearch/formatFilterValue.d.ts.map +1 -1
- package/dist/PowerSearch/formatFilterValue.js +1 -11
- package/dist/RadioList/RadioList.d.ts.map +1 -1
- package/dist/RadioList/RadioList.js +2 -3
- package/dist/RadioList/RadioListItem.d.ts +1 -1
- package/dist/RadioList/RadioListItem.d.ts.map +1 -1
- package/dist/RadioList/RadioListItem.js +3 -5
- package/dist/Resizable/ResizeHandle.d.ts +1 -2
- package/dist/Resizable/ResizeHandle.d.ts.map +1 -1
- package/dist/Resizable/ResizeHandle.js +77 -99
- package/dist/SegmentedControl/useSegmentedSelectionMotion.d.ts.map +1 -1
- package/dist/SegmentedControl/useSegmentedSelectionMotion.js +3 -3
- package/dist/Slider/sliderTouchController.js +2 -2
- package/dist/Spinner/Spinner.d.ts +1 -1
- package/dist/Spinner/Spinner.d.ts.map +1 -1
- package/dist/Spinner/Spinner.js +58 -60
- package/dist/Switch/useSwitchTouch.js +4 -4
- package/dist/Table/BaseTable.d.ts.map +1 -1
- package/dist/Table/BaseTable.js +8 -29
- package/dist/TextInput/TextInput.d.ts +2 -2
- package/dist/TextInput/TextInput.d.ts.map +1 -1
- package/dist/TextInput/TextInput.js +7 -10
- package/dist/Toast/Toast.d.ts +1 -11
- package/dist/Toast/Toast.d.ts.map +1 -1
- package/dist/Toast/Toast.js +15 -25
- package/dist/Toast/ToastViewport.d.ts.map +1 -1
- package/dist/Toast/ToastViewport.js +34 -94
- package/dist/Toast/types.d.ts +3 -9
- package/dist/Toast/types.d.ts.map +1 -1
- package/dist/Tooltip/useTooltip.d.ts +1 -19
- package/dist/Tooltip/useTooltip.d.ts.map +1 -1
- package/dist/Tooltip/useTooltip.js +53 -34
- package/dist/Typeahead/TypeaheadItem.d.ts +1 -2
- package/dist/Typeahead/TypeaheadItem.d.ts.map +1 -1
- package/dist/astryx.css +6 -35
- package/dist/gestures/PressTracker.d.ts.map +1 -1
- package/dist/gestures/PressTracker.js +3 -4
- package/dist/hooks/actionGroupTracker.d.ts +1 -4
- package/dist/hooks/actionGroupTracker.d.ts.map +1 -1
- package/dist/hooks/actionGroupTracker.js +3 -13
- package/dist/hooks/index.d.ts +0 -1
- package/dist/hooks/index.d.ts.map +1 -1
- package/dist/hooks/index.js +0 -1
- package/dist/hooks/useAttachment.d.ts +1 -1
- package/dist/hooks/useAttachment.js +1 -1
- package/dist/hooks/useInputStatusIcon.d.ts +1 -1
- package/dist/hooks/useInputStatusIcon.d.ts.map +1 -1
- package/dist/hooks/useInputStatusIcon.js +2 -2
- package/dist/hooks/useLongPress.d.ts +2 -6
- package/dist/hooks/useLongPress.d.ts.map +1 -1
- package/dist/hooks/useLongPress.js +15 -95
- package/dist/i18n/generated-english/PowerSearch/PowerSearchValueEditor.generated.d.ts.map +1 -1
- package/dist/i18n/generated-english/PowerSearch/PowerSearchValueEditor.generated.js +0 -6
- package/dist/i18n/generated-locales/en.generated.d.ts.map +1 -1
- package/dist/i18n/generated-locales/en.generated.js +0 -30
- package/dist/i18n/generated-locales/pseudo.generated.d.ts.map +1 -1
- package/dist/i18n/generated-locales/pseudo.generated.js +0 -30
- package/dist/index.d.ts +0 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +0 -4
- package/dist/motion/animatedLayout.d.ts.map +1 -1
- package/dist/motion/animatedLayout.js +6 -5
- package/dist/motion/animator.d.ts +14 -14
- package/dist/motion/animator.d.ts.map +1 -1
- package/dist/motion/animator.js +18 -41
- package/dist/utils/dateParser.d.ts.map +1 -1
- package/dist/utils/dateParser.js +0 -12
- package/dist/utils/focusReturn.d.ts +0 -15
- package/dist/utils/focusReturn.d.ts.map +1 -1
- package/dist/utils/focusReturn.js +0 -28
- package/dist/utils/interactionOverlay.stylex.d.ts +2 -3
- package/dist/utils/interactionOverlay.stylex.d.ts.map +1 -1
- package/dist/utils/interactionOverlay.stylex.js +2 -3
- package/dist/utils/pressFeedback.d.ts.map +1 -1
- package/dist/utils/pressFeedback.js +6 -19
- package/locales/en.json +0 -120
- package/locales/pseudo.json +0 -90
- package/package.json +5 -10
- package/src/AlertDialog/AlertDialog.doc.mjs +2 -2
- package/src/AlertDialog/AlertDialog.tsx +5 -37
- package/src/BottomSheet/BottomSheetPanel.tsx +3 -37
- package/src/BottomSheet/useSheetGestures.ts +1 -3
- package/src/Button/Button.tsx +4 -26
- package/src/CheckboxInput/CheckboxInput.doc.mjs +0 -18
- package/src/CheckboxInput/CheckboxInput.tsx +9 -36
- package/src/ComplexSelector/ComplexSelector.tsx +5 -20
- package/src/ContextMenu/ContextMenu.tsx +2 -2
- package/src/Dialog/Dialog.tsx +31 -10
- package/src/Field/Field.tsx +2 -2
- package/src/HoverCard/HoverCard.doc.mjs +2 -4
- package/src/HoverCard/HoverCard.tsx +4 -35
- package/src/HoverCard/useHoverCard.doc.mjs +36 -178
- package/src/HoverCard/useHoverCard.tsx +52 -46
- package/src/Icon/Icon.doc.mjs +8 -49
- package/src/Icon/Icon.tsx +7 -15
- package/src/Layer/usePressPin.ts +15 -81
- package/src/Lightbox/Lightbox.tsx +0 -18
- package/src/PowerSearch/PowerSearch.doc.mjs +5 -54
- package/src/PowerSearch/PowerSearch.tsx +155 -609
- package/src/PowerSearch/PowerSearchEditPopover.tsx +6 -28
- package/src/PowerSearch/PowerSearchValueEditor.tsx +38 -203
- package/src/PowerSearch/formatFilterValue.ts +1 -18
- package/src/RadioList/RadioList.tsx +2 -3
- package/src/RadioList/RadioListItem.tsx +3 -5
- package/src/Resizable/Resizable.doc.mjs +4 -5
- package/src/Resizable/ResizeHandle.tsx +109 -167
- package/src/SegmentedControl/useSegmentedSelectionMotion.ts +3 -6
- package/src/Slider/sliderTouchController.ts +2 -2
- package/src/Spinner/Spinner.tsx +63 -77
- package/src/Switch/useSwitchTouch.ts +4 -4
- package/src/Table/BaseTable.tsx +12 -46
- package/src/TextInput/TextInput.tsx +10 -11
- package/src/Toast/Toast.doc.mjs +3 -4
- package/src/Toast/Toast.tsx +32 -52
- package/src/Toast/ToastViewport.tsx +35 -121
- package/src/Toast/types.ts +3 -9
- package/src/Tooltip/useTooltip.doc.mjs +0 -24
- package/src/Tooltip/useTooltip.tsx +56 -61
- package/src/Typeahead/TypeaheadItem.doc.mjs +3 -6
- package/src/Typeahead/TypeaheadItem.tsx +1 -2
- package/src/gestures/PressTracker.ts +3 -4
- package/src/gestures/README.md +1 -7
- package/src/hooks/actionGroupTracker.ts +5 -20
- package/src/hooks/index.ts +0 -2
- package/src/hooks/useAttachment.ts +1 -1
- package/src/hooks/useInputStatusIcon.tsx +2 -3
- package/src/hooks/useLongPress.doc.mjs +2 -2
- package/src/hooks/useLongPress.ts +15 -136
- package/src/i18n/generated-english/PowerSearch/PowerSearchValueEditor.generated.ts +0 -6
- package/src/i18n/generated-locales/en.generated.ts +0 -41
- package/src/i18n/generated-locales/pseudo.generated.ts +0 -42
- package/src/index.ts +0 -13
- package/src/motion/README.md +5 -9
- package/src/motion/animatedLayout.ts +4 -5
- package/src/motion/animator.ts +29 -61
- package/src/utils/dateParser.ts +0 -16
- package/src/utils/focusReturn.ts +0 -30
- package/src/utils/interactionOverlay.stylex.ts +2 -3
- package/src/utils/pressFeedback.ts +6 -19
- package/dist/PowerSearch/PowerSearchBottomSheet.d.ts +0 -100
- package/dist/PowerSearch/PowerSearchBottomSheet.d.ts.map +0 -1
- package/dist/PowerSearch/PowerSearchBottomSheet.js +0 -1913
- package/dist/PowerSearch/formatTokenValue.d.ts +0 -28
- package/dist/PowerSearch/formatTokenValue.d.ts.map +0 -1
- package/dist/PowerSearch/formatTokenValue.js +0 -160
- package/dist/PowerSearch/powerSearchSheetUtils.d.ts +0 -65
- package/dist/PowerSearch/powerSearchSheetUtils.d.ts.map +0 -1
- package/dist/PowerSearch/powerSearchSheetUtils.js +0 -168
- package/dist/animator/createAnimator.d.ts +0 -98
- package/dist/animator/createAnimator.d.ts.map +0 -1
- package/dist/animator/createAnimator.js +0 -259
- package/dist/hooks/pressGroupContext.d.ts +0 -6
- package/dist/hooks/pressGroupContext.d.ts.map +0 -1
- package/dist/hooks/pressGroupContext.js +0 -20
- package/dist/hooks/useActionGroupTracking.d.ts +0 -53
- package/dist/hooks/useActionGroupTracking.d.ts.map +0 -1
- package/dist/hooks/useActionGroupTracking.js +0 -174
- package/dist/hooks/useAnimator.d.ts +0 -41
- package/dist/hooks/useAnimator.d.ts.map +0 -1
- package/dist/hooks/useAnimator.js +0 -70
- package/dist/i18n/generated-english/PowerSearch/PowerSearchBottomSheet.generated.d.ts +0 -8
- package/dist/i18n/generated-english/PowerSearch/PowerSearchBottomSheet.generated.d.ts.map +0 -1
- package/dist/i18n/generated-english/PowerSearch/PowerSearchBottomSheet.generated.js +0 -42
- package/dist/i18n/generated-english/PowerSearch/formatTokenValue.generated.d.ts +0 -8
- package/dist/i18n/generated-english/PowerSearch/formatTokenValue.generated.d.ts.map +0 -1
- package/dist/i18n/generated-english/PowerSearch/formatTokenValue.generated.js +0 -14
- package/dist/internal/indicatorPress.stylex.d.ts +0 -20
- package/dist/internal/indicatorPress.stylex.d.ts.map +0 -1
- package/dist/internal/indicatorPress.stylex.js +0 -26
- package/dist/motion/progress.d.ts +0 -88
- package/dist/motion/progress.d.ts.map +0 -1
- package/dist/motion/progress.js +0 -128
- package/dist/motion/uikit/alert.d.ts +0 -41
- package/dist/motion/uikit/alert.d.ts.map +0 -1
- package/dist/motion/uikit/alert.js +0 -43
- package/dist/privateAttributes/pressGroupItem.stylex.d.ts +0 -15
- package/dist/privateAttributes/pressGroupItem.stylex.d.ts.map +0 -1
- package/dist/privateAttributes/pressGroupItem.stylex.js +0 -23
- package/dist/utils/triggerFocus.d.ts +0 -36
- package/dist/utils/triggerFocus.d.ts.map +0 -1
- package/dist/utils/triggerFocus.js +0 -65
- package/src/PowerSearch/PowerSearchBottomSheet.tsx +0 -2515
- package/src/PowerSearch/formatTokenValue.ts +0 -215
- package/src/PowerSearch/powerSearchSheetUtils.ts +0 -224
- package/src/animator/createAnimator.doc.mjs +0 -153
- package/src/animator/createAnimator.ts +0 -324
- package/src/hooks/pressGroupContext.ts +0 -21
- package/src/hooks/useActionGroupTracking.ts +0 -224
- package/src/hooks/useAnimator.doc.mjs +0 -109
- package/src/hooks/useAnimator.ts +0 -67
- package/src/i18n/generated-english/PowerSearch/PowerSearchBottomSheet.generated.ts +0 -43
- package/src/i18n/generated-english/PowerSearch/formatTokenValue.generated.ts +0 -15
- package/src/internal/indicatorPress.stylex.ts +0 -24
- package/src/motion/progress.ts +0 -155
- package/src/motion/uikit/alert.ts +0 -43
- package/src/privateAttributes/pressGroupItem.stylex.ts +0 -23
- package/src/utils/triggerFocus.ts +0 -80
package/dist/Spinner/Spinner.js
CHANGED
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
*
|
|
11
11
|
* SYNC: When modified, update these files to stay in sync:
|
|
12
12
|
* - /packages/core/src/Spinner/Spinner.doc.mjs
|
|
13
|
-
* - /packages/core/src/Spinner/Spinner.test.tsx
|
|
13
|
+
* - /packages/core/src/Spinner/Spinner.test.tsx
|
|
14
14
|
* - /packages/core/src/Spinner/index.ts
|
|
15
15
|
* - /apps/storybook/stories/Spinner.stories.tsx
|
|
16
16
|
* - /packages/cli/assets/templates/blocks/components/Spinner/ (showcase blocks)
|
|
@@ -156,54 +156,59 @@ function registerSpinnerVars() {
|
|
|
156
156
|
registerSpinnerVars();
|
|
157
157
|
|
|
158
158
|
/**
|
|
159
|
-
* Pin every ring's
|
|
160
|
-
* own start time, so spinners mounted seconds apart stay in phase.
|
|
159
|
+
* Pin every ring's dash motion to the document timeline's origin instead of
|
|
160
|
+
* its own start time, so spinners mounted seconds apart stay in phase.
|
|
161
161
|
*
|
|
162
|
-
* Setting `startTime` is exact where arithmetic on a clock read is not
|
|
162
|
+
* Setting `startTime` is exact where arithmetic on a clock read is not: a
|
|
163
163
|
* negative `animation-delay` computed at mount is only as good as the gap
|
|
164
|
-
* between the clock
|
|
165
|
-
*
|
|
164
|
+
* between reading the clock and the frame the animation starts in, which at
|
|
165
|
+
* 10x CPU throttling measured 116deg of drift (from when this animated a
|
|
166
|
+
* literal rotation; the same drift risk applies to the dash offset now).
|
|
166
167
|
*
|
|
167
|
-
*
|
|
168
|
-
* style
|
|
169
|
-
* each mount re-force what the previous one invalidated
|
|
170
|
-
* 38 spinners
|
|
168
|
+
* Rings are collected and pinned in one frame because `getAnimations()`
|
|
169
|
+
* resolves style and `startTime` dirties it again, so pinning them one at a
|
|
170
|
+
* time makes each mount re-force what the previous one invalidated — 53 style
|
|
171
|
+
* recalcs for 38 spinners against 19 batched.
|
|
171
172
|
*/
|
|
172
|
-
const
|
|
173
|
+
const pendingRings = new Set();
|
|
173
174
|
let flushScheduled = false;
|
|
174
|
-
function
|
|
175
|
+
function pinRingsToTimelineOrigin() {
|
|
175
176
|
flushScheduled = false;
|
|
176
177
|
const animations = [];
|
|
177
|
-
for (const
|
|
178
|
-
|
|
178
|
+
for (const svg of pendingRings) {
|
|
179
|
+
// The animation now runs on the arc <circle>, a descendant of the ring
|
|
180
|
+
// this ref sits on (#6253), so it needs subtree:true to be found here.
|
|
181
|
+
animations.push(...svg.getAnimations({
|
|
182
|
+
subtree: true
|
|
183
|
+
}));
|
|
179
184
|
}
|
|
180
|
-
|
|
185
|
+
pendingRings.clear();
|
|
181
186
|
for (const animation of animations) {
|
|
182
187
|
animation.startTime = 0;
|
|
183
188
|
}
|
|
184
189
|
}
|
|
185
190
|
|
|
186
191
|
/**
|
|
187
|
-
* Ref callback for the
|
|
192
|
+
* Ref callback for the ring: the one place a mounted ring touches the DOM.
|
|
188
193
|
*
|
|
189
194
|
* It reads nothing back — the geometry is resolved by the cascade, not in JS.
|
|
190
195
|
*/
|
|
191
|
-
function syncRotationPhase(
|
|
192
|
-
if (
|
|
196
|
+
function syncRotationPhase(svg) {
|
|
197
|
+
if (svg == null) {
|
|
193
198
|
return undefined;
|
|
194
199
|
}
|
|
195
200
|
// jsdom implements no Web Animations, and this runs in every consumer's
|
|
196
201
|
// component tests.
|
|
197
|
-
if (typeof
|
|
202
|
+
if (typeof svg.getAnimations !== 'function') {
|
|
198
203
|
return undefined;
|
|
199
204
|
}
|
|
200
|
-
|
|
205
|
+
pendingRings.add(svg);
|
|
201
206
|
if (!flushScheduled) {
|
|
202
207
|
flushScheduled = true;
|
|
203
|
-
requestAnimationFrame(
|
|
208
|
+
requestAnimationFrame(pinRingsToTimelineOrigin);
|
|
204
209
|
}
|
|
205
210
|
return () => {
|
|
206
|
-
|
|
211
|
+
pendingRings.delete(svg);
|
|
207
212
|
};
|
|
208
213
|
}
|
|
209
214
|
|
|
@@ -212,11 +217,17 @@ function syncRotationPhase(rotor) {
|
|
|
212
217
|
// =============================================================================
|
|
213
218
|
|
|
214
219
|
/**
|
|
215
|
-
*
|
|
216
|
-
*
|
|
217
|
-
*
|
|
220
|
+
* Moves the dash around a stationary circle instead of rotating the whole
|
|
221
|
+
* ring. WebKit re-antialiases a rotating stroked shape's rounded cap
|
|
222
|
+
* (`strokeLinecap: 'round'`, below) slightly differently at each intermediate
|
|
223
|
+
* angle, which reads as a visible wobble on iOS Safari independent of
|
|
224
|
+
* compositing (#6253) — confirmed by a real-device test against this exact
|
|
225
|
+
* fix, since `willChange`/layer promotion alone (the earlier fix for #3617)
|
|
226
|
+
* only smooths the rotation's motion, not the per-frame stroke rasterization.
|
|
227
|
+
* A static circle with an animated `stroke-dashoffset` never rotates, so
|
|
228
|
+
* WebKit never re-rasterizes the cap at an intermediate angle at all.
|
|
218
229
|
*/
|
|
219
|
-
const
|
|
230
|
+
const dashMotion = "x1wbvqyn-B";
|
|
220
231
|
|
|
221
232
|
// =============================================================================
|
|
222
233
|
// Styles
|
|
@@ -401,7 +412,7 @@ export function Spinner({
|
|
|
401
412
|
// localized default. The fallback is AT-facing text, so it goes through the
|
|
402
413
|
// translation runtime like visible text does.
|
|
403
414
|
const resolvedAriaLabel = ariaLabel ?? (typeof label === 'string' ? label : undefined) ?? t('@astryx.spinner.loading');
|
|
404
|
-
const spinner = /*#__PURE__*/
|
|
415
|
+
const spinner = /*#__PURE__*/_jsx("span", {
|
|
405
416
|
ref: hasLabel ? undefined : ref,
|
|
406
417
|
role: "status",
|
|
407
418
|
"aria-label": namedByVisibleLabel ? undefined : resolvedAriaLabel,
|
|
@@ -430,48 +441,35 @@ export function Spinner({
|
|
|
430
441
|
width: `var(${BOX_SIZE}, ${frameSize}px)`,
|
|
431
442
|
height: `var(${BOX_SIZE}, ${frameSize}px)`
|
|
432
443
|
}),
|
|
433
|
-
children:
|
|
434
|
-
|
|
435
|
-
|
|
444
|
+
children: /*#__PURE__*/_jsxs("svg", {
|
|
445
|
+
ref: syncRotationPhase,
|
|
446
|
+
width: frameSize,
|
|
447
|
+
height: frameSize,
|
|
436
448
|
"aria-hidden": "true",
|
|
437
449
|
...{
|
|
438
|
-
className: "xlp1x4z x1lliihq
|
|
450
|
+
className: "xlp1x4z x1lliihq x6v0vjy x7yyq19 x1rea2x4"
|
|
439
451
|
},
|
|
440
|
-
children: /*#__PURE__*/_jsx("circle", {
|
|
452
|
+
children: [/*#__PURE__*/_jsx("circle", {
|
|
441
453
|
cx: "50%",
|
|
442
454
|
cy: "50%",
|
|
443
455
|
r: diameter / 2,
|
|
444
456
|
strokeWidth: border,
|
|
445
457
|
...stylex.props(styles.circle, styles.track, trackOpacityStyles[shade])
|
|
446
|
-
})
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
458
|
+
}), /*#__PURE__*/_jsx("circle", {
|
|
459
|
+
cx: "50%",
|
|
460
|
+
cy: "50%",
|
|
461
|
+
r: diameter / 2,
|
|
462
|
+
strokeWidth: border
|
|
463
|
+
// The size's own dash, for the render with no stylesheet. The rule
|
|
464
|
+
// above composes the same lengths from the resolved diameter, so a
|
|
465
|
+
// themed ring keeps this fraction of arc rather than this length.
|
|
466
|
+
,
|
|
467
|
+
strokeDasharray: `${arcLength} ${circumference - arcLength}`,
|
|
456
468
|
...{
|
|
457
|
-
className: "
|
|
458
|
-
}
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
cy: "50%",
|
|
462
|
-
r: diameter / 2,
|
|
463
|
-
strokeWidth: border
|
|
464
|
-
// The size's own dash, for the render with no stylesheet. The rule
|
|
465
|
-
// above composes the same lengths from the resolved diameter, so a
|
|
466
|
-
// themed ring keeps this fraction of arc rather than this length.
|
|
467
|
-
,
|
|
468
|
-
strokeDasharray: `${arcLength} ${circumference - arcLength}`,
|
|
469
|
-
...{
|
|
470
|
-
className: "xbh8q5q x1764fhq x1g0ag68 x1owpc8m xio8zfp xgw3ha0 xtve3lm x9tu13d xdv9ggb"
|
|
471
|
-
}
|
|
472
|
-
})
|
|
473
|
-
})
|
|
474
|
-
})]
|
|
469
|
+
className: "xbh8q5q x1764fhq x1g0ag68 x1owpc8m xio8zfp xgw3ha0 x1qcljrn xnh0sag xa4qsjk x1nlxm0d x1esw782 xtve3lm x9tu13d xdv9ggb"
|
|
470
|
+
}
|
|
471
|
+
})]
|
|
472
|
+
})
|
|
475
473
|
});
|
|
476
474
|
if (!hasLabel) {
|
|
477
475
|
return spinner;
|
|
@@ -20,7 +20,7 @@ import { getGestureHost } from "../gestures/GestureHost.js";
|
|
|
20
20
|
import { createPressTracker } from "../gestures/PressTracker.js";
|
|
21
21
|
import { isRtlElement } from "../hooks/isRtlElement.js";
|
|
22
22
|
import { useIsomorphicLayoutEffect } from "../hooks/useIsomorphicLayoutEffect.js";
|
|
23
|
-
import {
|
|
23
|
+
import { createAnimator } from "../motion/animator.js";
|
|
24
24
|
import { solveSpring, toSpring } from "../motion/spring.js";
|
|
25
25
|
import { UIKIT_GESTURES } from "../motion/uikit/gestures.js";
|
|
26
26
|
import { registerSwitchTable, switchControl } from "../motion/uikit/switch.js";
|
|
@@ -203,10 +203,10 @@ export class SwitchTouchController {
|
|
|
203
203
|
return;
|
|
204
204
|
}
|
|
205
205
|
registerSwitchTable();
|
|
206
|
-
this.thumb =
|
|
206
|
+
this.thumb = createAnimator(elements.thumb);
|
|
207
207
|
// The layer rests clear (its class's opacity 0) while the visuals show
|
|
208
208
|
// the value; from here its opacity is the animator's.
|
|
209
|
-
this.fade =
|
|
209
|
+
this.fade = createAnimator(elements.track, {
|
|
210
210
|
pseudoElement: '::after',
|
|
211
211
|
initial: {
|
|
212
212
|
opacity: 0
|
|
@@ -215,7 +215,7 @@ export class SwitchTouchController {
|
|
|
215
215
|
this.fade.set({
|
|
216
216
|
opacity: 0
|
|
217
217
|
});
|
|
218
|
-
this.shadow =
|
|
218
|
+
this.shadow = createAnimator(elements.thumb, {
|
|
219
219
|
pseudoElement: '::after',
|
|
220
220
|
initial: {
|
|
221
221
|
opacity: 0
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseTable.d.ts","sourceRoot":"","sources":["../../src/Table/BaseTable.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;GAWG;AAEH,OAAO,
|
|
1
|
+
{"version":3,"file":"BaseTable.d.ts","sourceRoot":"","sources":["../../src/Table/BaseTable.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAe,KAAK,YAAY,EAAkB,KAAK,GAAG,EAAC,MAAM,OAAO,CAAC;AAIhF,OAAO,KAAK,EACV,cAAc,EAYf,MAAM,SAAS,CAAC;AAunBjB;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,SAAS,EAAqB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC3E,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG;IAAC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAA;CAAC,KACrD,YAAY,CAAC"}
|
package/dist/Table/BaseTable.js
CHANGED
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
* - /packages/core/src/Table/index.ts (exports if types change)
|
|
15
15
|
* - /packages/cli/assets/templates/blocks/components/Table/ (showcase blocks)
|
|
16
16
|
*/
|
|
17
|
-
import { memo,
|
|
17
|
+
import { memo, useRef } from 'react';
|
|
18
18
|
import { isRenderable } from "../utils/isRenderable.js";
|
|
19
19
|
import * as stylex from '@stylexjs/stylex';
|
|
20
20
|
import "../theme/tokens.stylex.js";
|
|
@@ -317,7 +317,6 @@ function BaseTableInner({
|
|
|
317
317
|
});
|
|
318
318
|
|
|
319
319
|
// --- Plugin pipeline: header cells ---
|
|
320
|
-
const headerLabelIdBase = useId();
|
|
321
320
|
const headerCells = resolvedColumns.map((col, columnIndex) => {
|
|
322
321
|
const headerContent = col.header ?? col.key;
|
|
323
322
|
|
|
@@ -368,36 +367,16 @@ function BaseTableInner({
|
|
|
368
367
|
below
|
|
369
368
|
} = cellRenderProps;
|
|
370
369
|
const hasSlots = before != null || after != null || overlay != null || below != null;
|
|
371
|
-
const
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
370
|
+
const headerInner = hasSlots ? /*#__PURE__*/_jsxs(_Fragment, {
|
|
371
|
+
children: [before, isRenderable(after) ? /*#__PURE__*/_jsxs("div", {
|
|
372
|
+
...{
|
|
373
|
+
className: "x3nfvp2 x6s0dn4 xzye2dw xeuugli"
|
|
374
|
+
},
|
|
375
|
+
children: [resolvedContent, after]
|
|
376
|
+
}) : resolvedContent, overlay, below]
|
|
376
377
|
}) : resolvedContent;
|
|
377
|
-
|
|
378
|
-
// The overlay is a control of its own. Keep its name and value out of the
|
|
379
|
-
// header's name.
|
|
380
|
-
const namesOwnHeader = isRenderable(overlay) && mergedHtmlProps['aria-label'] == null && mergedHtmlProps['aria-labelledby'] == null;
|
|
381
|
-
const labelId = `${headerLabelIdBase}-label-${columnIndex}`;
|
|
382
|
-
const belowId = `${headerLabelIdBase}-below-${columnIndex}`;
|
|
383
|
-
const hasBelow = isRenderable(below);
|
|
384
|
-
const headerInner = !hasSlots ? resolvedContent : namesOwnHeader ? /*#__PURE__*/_jsxs(_Fragment, {
|
|
385
|
-
children: [/*#__PURE__*/_jsxs("span", {
|
|
386
|
-
id: labelId,
|
|
387
|
-
children: [before, labelRow]
|
|
388
|
-
}), overlay, hasBelow && /*#__PURE__*/_jsx("div", {
|
|
389
|
-
id: belowId,
|
|
390
|
-
children: below
|
|
391
|
-
})]
|
|
392
|
-
}) : /*#__PURE__*/_jsxs(_Fragment, {
|
|
393
|
-
children: [before, labelRow, overlay, below]
|
|
394
|
-
});
|
|
395
|
-
const headerNameProps = namesOwnHeader ? {
|
|
396
|
-
'aria-labelledby': hasBelow ? `${labelId} ${belowId}` : labelId
|
|
397
|
-
} : {};
|
|
398
378
|
return /*#__PURE__*/_jsx(HeaderCellComponent, {
|
|
399
379
|
...mergedHtmlProps,
|
|
400
|
-
...headerNameProps,
|
|
401
380
|
...headerTitleProp,
|
|
402
381
|
contextMenuActions: cellRenderProps.contextMenuActions,
|
|
403
382
|
xstyle: cellRenderProps.xstyle,
|
|
@@ -14,8 +14,8 @@
|
|
|
14
14
|
*/
|
|
15
15
|
import { type ChangeEvent, type KeyboardEvent, type ReactNode } from 'react';
|
|
16
16
|
import * as stylex from '@stylexjs/stylex';
|
|
17
|
-
import type
|
|
18
|
-
import { type IconType } from '../Icon/
|
|
17
|
+
import { type InputStatus } from '../Field/index.js';
|
|
18
|
+
import { type IconType } from '../Icon/index.js';
|
|
19
19
|
import { type TextEntryTraitProps } from '../Field/textEntryTraits.js';
|
|
20
20
|
declare const sizeStyles: Readonly<{
|
|
21
21
|
readonly sm: Readonly<{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../src/TextInput/TextInput.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,EAOL,KAAK,WAAW,EAChB,KAAK,aAAa,EAClB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../src/TextInput/TextInput.tsx"],"names":[],"mappings":"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"}
|
|
@@ -20,16 +20,13 @@ import { use, useId, useOptimistic, useTransition, useCallback, useRef } from 'r
|
|
|
20
20
|
import * as stylex from '@stylexjs/stylex';
|
|
21
21
|
import "../theme/tokens.stylex.js";
|
|
22
22
|
import { colorVars, sizeVars, typographyVars, typeScaleVars } from "../theme/tokens.stylex.js";
|
|
23
|
-
import { Field } from "../Field/
|
|
24
|
-
import {
|
|
25
|
-
import { inputWrapperStyles, inputStatusBorderStyles, inputStatusHoverShadowStyles, inputStatusFocusWithinStyles } from "../Field/inputStyles.stylex.js";
|
|
26
|
-
import { renderIconSlot } from "../Icon/Icon.js";
|
|
23
|
+
import { Field, InputClearButton, inputWrapperStyles, inputStatusBorderStyles, inputStatusHoverShadowStyles, inputStatusFocusWithinStyles } from "../Field/index.js";
|
|
24
|
+
import { renderIconSlot } from "../Icon/index.js";
|
|
27
25
|
import { isRenderable } from "../utils/isRenderable.js";
|
|
28
|
-
import { Spinner } from "../Spinner/
|
|
29
|
-
import { useTooltip } from "../Tooltip/
|
|
30
|
-
import { VisuallyHidden } from "../VisuallyHidden/
|
|
31
|
-
import { getInputARIA } from "../utils/
|
|
32
|
-
import { isImeKeyEvent } from "../utils/ime.js";
|
|
26
|
+
import { Spinner } from "../Spinner/index.js";
|
|
27
|
+
import { useTooltip } from "../Tooltip/index.js";
|
|
28
|
+
import { VisuallyHidden } from "../VisuallyHidden/index.js";
|
|
29
|
+
import { getInputARIA, isImeKeyEvent } from "../utils/index.js";
|
|
33
30
|
import { textEntryTraitAttributes } from "../Field/textEntryTraits.js";
|
|
34
31
|
import { joinAriaIDs } from "../utils/inputAria.js";
|
|
35
32
|
const sizeStyles = {
|
|
@@ -50,7 +47,7 @@ import { groupStyles, inputGroupItemProps } from "../InputGroup/groupStyles.js";
|
|
|
50
47
|
|
|
51
48
|
// Re-export shared types for convenience
|
|
52
49
|
|
|
53
|
-
import { mergeProps } from "../utils/
|
|
50
|
+
import { mergeProps } from "../utils/index.js";
|
|
54
51
|
import { useSize } from "../SizeContext/SizeContext.js";
|
|
55
52
|
import { useInputContainer } from "../hooks/useInputContainer.js";
|
|
56
53
|
import { useInputStatusIcon } from "../hooks/useInputStatusIcon.js";
|
package/dist/Toast/Toast.d.ts
CHANGED
|
@@ -18,16 +18,6 @@ export interface ToastProps {
|
|
|
18
18
|
}
|
|
19
19
|
interface ToastSurfaceProps extends ToastProps {
|
|
20
20
|
gestureDirection: ToastGestureDirection;
|
|
21
|
-
/**
|
|
22
|
-
* Changes when a uniqueID overwrite updates this card in place: the new
|
|
23
|
-
* toast's auto-hide timer starts over.
|
|
24
|
-
*/
|
|
25
|
-
timerKey?: string;
|
|
26
|
-
/**
|
|
27
|
-
* False when the viewport announces the toast: the card then carries no
|
|
28
|
-
* live region of its own, so an update in place is announced once.
|
|
29
|
-
*/
|
|
30
|
-
isLiveRegion?: boolean;
|
|
31
21
|
}
|
|
32
22
|
/**
|
|
33
23
|
* Individual toast notification.
|
|
@@ -53,7 +43,7 @@ export declare function Toast(props: ToastProps): import("react").JSX.Element;
|
|
|
53
43
|
export declare namespace Toast {
|
|
54
44
|
var displayName: string;
|
|
55
45
|
}
|
|
56
|
-
export declare function ToastSurface({ type, body, endContent, isAutoHide, autoHideDuration, isExiting, onDismiss, renderContent, gestureDirection,
|
|
46
|
+
export declare function ToastSurface({ type, body, endContent, isAutoHide, autoHideDuration, isExiting, onDismiss, renderContent, gestureDirection, }: ToastSurfaceProps): import("react").JSX.Element;
|
|
57
47
|
export declare namespace ToastSurface {
|
|
58
48
|
var displayName: string;
|
|
59
49
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../src/Toast/Toast.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAa,SAAS,EAAY,MAAM,OAAO,CAAC;AAkB5D,OAAO,KAAK,EACV,SAAS,EACT,kBAAkB,EAClB,oBAAoB,EACrB,MAAM,SAAS,CAAC;AAEjB,OAAO,EAAkB,KAAK,qBAAqB,EAAC,MAAM,mBAAmB,CAAC;AA8F9E,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,SAAS,CAAC;IAChB,IAAI,EAAE,SAAS,CAAC;IAChB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,UAAU,EAAE,OAAO,CAAC;IACpB,gBAAgB,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,CAAC,MAAM,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAChD;;;;OAIG;IACH,aAAa,CAAC,EAAE,oBAAoB,CAAC;CACtC;AAED,UAAU,iBAAkB,SAAQ,UAAU;IAC5C,gBAAgB,EAAE,qBAAqB,CAAC;
|
|
1
|
+
{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../src/Toast/Toast.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAa,SAAS,EAAY,MAAM,OAAO,CAAC;AAkB5D,OAAO,KAAK,EACV,SAAS,EACT,kBAAkB,EAClB,oBAAoB,EACrB,MAAM,SAAS,CAAC;AAEjB,OAAO,EAAkB,KAAK,qBAAqB,EAAC,MAAM,mBAAmB,CAAC;AA8F9E,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,SAAS,CAAC;IAChB,IAAI,EAAE,SAAS,CAAC;IAChB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,UAAU,EAAE,OAAO,CAAC;IACpB,gBAAgB,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,CAAC,MAAM,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAChD;;;;OAIG;IACH,aAAa,CAAC,EAAE,oBAAoB,CAAC;CACtC;AAED,UAAU,iBAAkB,SAAQ,UAAU;IAC5C,gBAAgB,EAAE,qBAAqB,CAAC;CACzC;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,+BAEtC;yBAFe,KAAK;;;AAOrB,wBAAgB,YAAY,CAAC,EAC3B,IAAI,EACJ,IAAI,EACJ,UAAU,EACV,UAAU,EACV,gBAAgB,EAChB,SAAiB,EACjB,SAAS,EACT,aAAa,EACb,gBAAgB,GACjB,EAAE,iBAAiB,+BA6NnB;yBAvOe,YAAY"}
|
package/dist/Toast/Toast.js
CHANGED
|
@@ -85,9 +85,7 @@ export function ToastSurface({
|
|
|
85
85
|
isExiting = false,
|
|
86
86
|
onDismiss,
|
|
87
87
|
renderContent,
|
|
88
|
-
gestureDirection
|
|
89
|
-
timerKey,
|
|
90
|
-
isLiveRegion = true
|
|
88
|
+
gestureDirection
|
|
91
89
|
}) {
|
|
92
90
|
const t = useComponentTranslator();
|
|
93
91
|
const timerRef = useRef(null);
|
|
@@ -119,11 +117,10 @@ export function ToastSurface({
|
|
|
119
117
|
onDismissRef.current('auto');
|
|
120
118
|
}, remainingRef.current);
|
|
121
119
|
}, [isAutoHide]);
|
|
122
|
-
|
|
123
|
-
// Pointer, focus and gesture holds are tracked whatever isAutoHide is: an
|
|
124
|
-
// overwrite can turn a toast that does not auto-hide into one that does
|
|
125
|
-
// while a hold is in place. The window hold leaves with its listeners.
|
|
126
120
|
const pauseTimer = useCallback(source => {
|
|
121
|
+
if (!isAutoHide) {
|
|
122
|
+
return;
|
|
123
|
+
}
|
|
127
124
|
const sources = pauseSourcesRef.current;
|
|
128
125
|
const wasRunning = sources.size === 0;
|
|
129
126
|
sources.add(source);
|
|
@@ -138,8 +135,11 @@ export function ToastSurface({
|
|
|
138
135
|
const elapsed = Date.now() - startTimeRef.current;
|
|
139
136
|
remainingRef.current = Math.max(remainingRef.current - elapsed, 1000);
|
|
140
137
|
}
|
|
141
|
-
}, []);
|
|
138
|
+
}, [isAutoHide]);
|
|
142
139
|
const resumeTimer = useCallback(source => {
|
|
140
|
+
if (!isAutoHide) {
|
|
141
|
+
return;
|
|
142
|
+
}
|
|
143
143
|
const sources = pauseSourcesRef.current;
|
|
144
144
|
if (!sources.delete(source)) {
|
|
145
145
|
return;
|
|
@@ -152,25 +152,18 @@ export function ToastSurface({
|
|
|
152
152
|
return;
|
|
153
153
|
}
|
|
154
154
|
startTimer();
|
|
155
|
-
}, [startTimer]);
|
|
155
|
+
}, [isAutoHide, startTimer]);
|
|
156
156
|
useEffect(() => {
|
|
157
157
|
remainingRef.current = autoHideDuration;
|
|
158
|
-
// An update in place can remove the focused control, which fires no blur:
|
|
159
|
-
// a focus hold whose focus has left the card is stale.
|
|
160
|
-
const root = cardRootRef.current?.current;
|
|
161
|
-
if (pauseSourcesRef.current.has('focus') && root != null && !root.contains(root.ownerDocument.activeElement)) {
|
|
162
|
-
pauseSourcesRef.current.delete('focus');
|
|
163
|
-
}
|
|
164
158
|
startTimer();
|
|
165
159
|
return () => {
|
|
166
160
|
if (timerRef.current) {
|
|
167
161
|
clearTimeout(timerRef.current);
|
|
168
162
|
}
|
|
169
163
|
};
|
|
170
|
-
// startTimer's identity is stable per isAutoHide, so this runs on mount
|
|
171
|
-
// on a genuine duration change
|
|
172
|
-
|
|
173
|
-
}, [autoHideDuration, startTimer, timerKey]);
|
|
164
|
+
// startTimer's identity is stable per isAutoHide, so this runs on mount
|
|
165
|
+
// and on a genuine duration change — not on unrelated viewport renders.
|
|
166
|
+
}, [autoHideDuration, startTimer]);
|
|
174
167
|
|
|
175
168
|
// Pause the auto-hide timer while the window is not focused, so a toast
|
|
176
169
|
// doesn't silently expire while the user is in another window or tab.
|
|
@@ -178,7 +171,6 @@ export function ToastSurface({
|
|
|
178
171
|
if (!isAutoHide) {
|
|
179
172
|
return;
|
|
180
173
|
}
|
|
181
|
-
const pauseSources = pauseSourcesRef.current;
|
|
182
174
|
const pauseForWindow = () => pauseTimer('window');
|
|
183
175
|
const resumeForWindow = () => resumeTimer('window');
|
|
184
176
|
window.addEventListener('blur', pauseForWindow);
|
|
@@ -191,8 +183,6 @@ export function ToastSurface({
|
|
|
191
183
|
return () => {
|
|
192
184
|
window.removeEventListener('blur', pauseForWindow);
|
|
193
185
|
window.removeEventListener('focus', resumeForWindow);
|
|
194
|
-
// With the listeners gone, no focus event would clear the window hold.
|
|
195
|
-
pauseSources.delete('window');
|
|
196
186
|
};
|
|
197
187
|
}, [isAutoHide, pauseTimer, resumeTimer]);
|
|
198
188
|
const isGesturePausing = useCallback(() => pauseSourcesRef.current.has('gesture'), []);
|
|
@@ -239,9 +229,9 @@ export function ToastSurface({
|
|
|
239
229
|
const fallbackMediaMode = isError || mode === 'light' ? 'dark' : 'light';
|
|
240
230
|
return /*#__PURE__*/_jsx("div", {
|
|
241
231
|
ref: rootRef,
|
|
242
|
-
role:
|
|
243
|
-
"aria-live":
|
|
244
|
-
"aria-atomic":
|
|
232
|
+
role: isError ? 'alert' : 'status',
|
|
233
|
+
"aria-live": isError ? 'assertive' : 'polite',
|
|
234
|
+
"aria-atomic": "true",
|
|
245
235
|
onMouseEnter: pauseForPointer,
|
|
246
236
|
onMouseLeave: resumeForPointer,
|
|
247
237
|
onFocusCapture: pauseForFocus,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToastViewport.d.ts","sourceRoot":"","sources":["../../src/Toast/ToastViewport.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ToastViewport.d.ts","sourceRoot":"","sources":["../../src/Toast/ToastViewport.tsx"],"names":[],"mappings":"AA2CA,OAAO,KAAK,EAAa,aAAa,EAAqB,MAAM,SAAS,CAAC;AAE3E,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,uBAAuB,CAAC;AAwItD,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,mDAAmD;IACnD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE;QAAC,GAAG,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAA;KAAC,CAAC;IACtE;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAyGD;;;;;;;;;;;GAWG;AACH,wBAAgB,aAAa,CAAC,EAC5B,QAAsB,EACtB,UAAc,EACd,KAAK,EACL,UAAU,EACV,UAAiB,EACjB,QAAQ,GACT,EAAE,kBAAkB,+BAqhBpB;yBA5hBe,aAAa"}
|