@astryxdesign/core 0.7.8-canary.e3d2b45 → 0.7.8-canary.e5ace7e
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/dist/ClickableCard/ClickableCard.d.ts +1 -1
- package/dist/ClickableCard/ClickableCard.d.ts.map +1 -1
- package/dist/ClickableCard/ClickableCard.js +5 -1
- package/dist/DropdownMenu/DropdownMenu.d.ts +9 -1
- package/dist/DropdownMenu/DropdownMenu.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenu.js +9 -4
- package/dist/DropdownMenu/DropdownMenuCheckboxItem.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenuCheckboxItem.js +3 -2
- package/dist/DropdownMenu/DropdownMenuItem.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenuItem.js +3 -2
- package/dist/DropdownMenu/DropdownMenuRadioItem.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenuRadioItem.js +3 -2
- package/dist/DropdownMenu/DropdownMenuSubMenu.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenuSubMenu.js +3 -2
- package/dist/FileInput/FileInput.d.ts.map +1 -1
- package/dist/FileInput/FileInput.js +16 -2
- package/dist/Item/Item.d.ts.map +1 -1
- package/dist/Item/Item.js +6 -1
- package/dist/Layer/preserveAnimations.d.ts +1 -5
- package/dist/Layer/preserveAnimations.d.ts.map +1 -1
- package/dist/Layer/preserveAnimations.js +12 -214
- package/dist/MoreMenu/MoreMenu.d.ts +5 -3
- package/dist/MoreMenu/MoreMenu.d.ts.map +1 -1
- package/dist/SelectableCard/SelectableCard.d.ts +1 -1
- package/dist/SelectableCard/SelectableCard.d.ts.map +1 -1
- package/dist/SelectableCard/SelectableCard.js +5 -1
- package/dist/Tooltip/useTooltip.d.ts.map +1 -1
- package/dist/Tooltip/useTooltip.js +162 -59
- package/dist/TreeList/TreeListItem.d.ts.map +1 -1
- package/dist/TreeList/TreeListItem.js +3 -1
- package/dist/astryx.css +5 -1
- package/dist/hooks/menuPressGesture.d.ts +132 -21
- package/dist/hooks/menuPressGesture.d.ts.map +1 -1
- package/dist/hooks/menuPressGesture.js +155 -30
- package/dist/hooks/menuPressValues.d.ts +16 -0
- package/dist/hooks/menuPressValues.d.ts.map +1 -0
- package/dist/hooks/menuPressValues.js +18 -0
- package/dist/hooks/useClickableContainer.d.ts +19 -5
- package/dist/hooks/useClickableContainer.d.ts.map +1 -1
- package/dist/hooks/useClickableContainer.js +28 -5
- package/dist/hooks/useMenuPress.d.ts +34 -1
- package/dist/hooks/useMenuPress.d.ts.map +1 -1
- package/dist/hooks/useMenuPress.js +93 -5
- package/dist/motion/carryAnimations.d.ts +58 -0
- package/dist/motion/carryAnimations.d.ts.map +1 -0
- package/dist/motion/carryAnimations.js +305 -0
- package/dist/motion/transientCopy.d.ts +4 -2
- package/dist/motion/transientCopy.d.ts.map +1 -1
- package/dist/motion/transientCopy.js +34 -5
- package/dist/motion/uikit/gestures.d.ts +41 -0
- package/dist/motion/uikit/gestures.d.ts.map +1 -1
- package/dist/motion/uikit/gestures.js +25 -0
- package/dist/motion/uikit/index.d.ts +1 -1
- package/dist/motion/uikit/index.d.ts.map +1 -1
- package/dist/motion/uikit/index.js +1 -1
- package/dist/privateAttributes/menuPressLit.stylex.d.ts +52 -0
- package/dist/privateAttributes/menuPressLit.stylex.d.ts.map +1 -0
- package/dist/privateAttributes/menuPressLit.stylex.js +99 -0
- package/dist/utils/pressFeedback.d.ts +7 -0
- package/dist/utils/pressFeedback.d.ts.map +1 -1
- package/dist/utils/pressFeedback.js +16 -1
- package/dist/utils/triggerFocus.d.ts +5 -0
- package/dist/utils/triggerFocus.d.ts.map +1 -1
- package/dist/utils/triggerFocus.js +9 -2
- package/package.json +4 -4
- package/src/ClickableCard/ClickableCard.tsx +8 -1
- package/src/DropdownMenu/DropdownMenu.doc.mjs +1 -2
- package/src/DropdownMenu/DropdownMenu.tsx +29 -5
- package/src/DropdownMenu/DropdownMenuCheckboxItem.tsx +5 -1
- package/src/DropdownMenu/DropdownMenuItem.tsx +8 -4
- package/src/DropdownMenu/DropdownMenuRadioItem.tsx +5 -1
- package/src/DropdownMenu/DropdownMenuSubMenu.tsx +5 -1
- package/src/FileInput/FileInput.tsx +16 -2
- package/src/Item/Item.tsx +15 -5
- package/src/Layer/preserveAnimations.ts +12 -275
- package/src/MoreMenu/MoreMenu.doc.mjs +2 -4
- package/src/MoreMenu/MoreMenu.tsx +5 -3
- package/src/SelectableCard/SelectableCard.tsx +8 -1
- package/src/Tooltip/useTooltip.tsx +175 -79
- package/src/TreeList/TreeListItem.tsx +8 -6
- package/src/hooks/menuPressGesture.ts +243 -38
- package/src/hooks/menuPressValues.ts +18 -0
- package/src/hooks/useClickableContainer.doc.mjs +8 -2
- package/src/hooks/useClickableContainer.ts +52 -6
- package/src/hooks/useMenuPress.ts +118 -11
- package/src/motion/MEASUREMENTS.md +11 -0
- package/src/motion/carryAnimations.ts +389 -0
- package/src/motion/transientCopy.ts +45 -5
- package/src/motion/uikit/gestures.ts +22 -0
- package/src/motion/uikit/index.ts +1 -0
- package/src/privateAttributes/menuPressLit.stylex.ts +104 -0
- package/src/utils/pressFeedback.ts +16 -1
- package/src/utils/triggerFocus.ts +17 -4
|
@@ -120,7 +120,7 @@ export interface ClickableCardProps extends BaseProps {
|
|
|
120
120
|
* </ClickableCard>
|
|
121
121
|
* ```
|
|
122
122
|
*/
|
|
123
|
-
export declare function ClickableCard({ label, onClick: onClickProp, onMouseUp: onMouseUpProp, href, target, isDisabled, children, padding, variant, elevation, width, height, maxWidth, ref, xstyle: xstyleProp, className: classNameProp, style, ...props }: ClickableCardProps): import("react").JSX.Element;
|
|
123
|
+
export declare function ClickableCard({ label, onClick: onClickProp, onMouseUp: onMouseUpProp, onPointerDown: onPointerDownProp, href, target, isDisabled, children, padding, variant, elevation, width, height, maxWidth, ref, xstyle: xstyleProp, className: classNameProp, style, ...props }: ClickableCardProps): import("react").JSX.Element;
|
|
124
124
|
export declare namespace ClickableCard {
|
|
125
125
|
var displayName: string;
|
|
126
126
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ClickableCard.d.ts","sourceRoot":"","sources":["../../src/ClickableCard/ClickableCard.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,OAAO,EACL,KAAK,SAAS,EACd,KAAK,UAAU,EAGf,KAAK,GAAG,EACT,MAAM,OAAO,CAAC;AASf,OAAO,KAAK,EAAC,SAAS,EAAE,WAAW,EAAE,SAAS,EAAC,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"ClickableCard.d.ts","sourceRoot":"","sources":["../../src/ClickableCard/ClickableCard.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,OAAO,EACL,KAAK,SAAS,EACd,KAAK,UAAU,EAGf,KAAK,GAAG,EACT,MAAM,OAAO,CAAC;AASf,OAAO,KAAK,EAAC,SAAS,EAAE,WAAW,EAAE,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAItE,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,cAAc,CAAC;AAE9C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAwJ5C,MAAM,WAAW,kBAAmB,SAAQ,SAAS;IACnD,yCAAyC;IACzC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAE1B;;;;;OAKG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAEnD;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;;OAIG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB,yBAAyB;IACzB,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,0BAA0B;IAC1B,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,aAAa,EACxB,aAAa,EAAE,iBAAiB,EAChC,IAAI,EACJ,MAAM,EACN,UAAkB,EAClB,QAAQ,EACR,OAAO,EACP,OAAmB,EACnB,SAAkB,EAClB,KAAK,EACL,MAAM,EACN,QAAQ,EACR,GAAG,EACH,MAAM,EAAE,UAAU,EAClB,SAAS,EAAE,aAAa,EACxB,KAAK,EACL,GAAG,KAAK,EACT,EAAE,kBAAkB,+BAoIpB;yBAxJe,aAAa"}
|
|
@@ -33,6 +33,7 @@ import * as stylex from '@stylexjs/stylex';
|
|
|
33
33
|
import "../theme/tokens.stylex.js";
|
|
34
34
|
import { borderVars, colorVars, durationVars, easeVars } from "../theme/tokens.stylex.js";
|
|
35
35
|
import { mergeProps } from "../utils/index.js";
|
|
36
|
+
import { chainEventHandlers } from "../utils/chainEventHandlers.js";
|
|
36
37
|
import { Card } from "../Card/Card.js";
|
|
37
38
|
import { useClickableContainer } from "../hooks/useClickableContainer.js";
|
|
38
39
|
import { useLinkComponent } from "../Link/useLinkComponent.js";
|
|
@@ -147,6 +148,7 @@ export function ClickableCard({
|
|
|
147
148
|
label,
|
|
148
149
|
onClick: onClickProp,
|
|
149
150
|
onMouseUp: onMouseUpProp,
|
|
151
|
+
onPointerDown: onPointerDownProp,
|
|
150
152
|
href,
|
|
151
153
|
target,
|
|
152
154
|
isDisabled = false,
|
|
@@ -199,7 +201,8 @@ export function ClickableCard({
|
|
|
199
201
|
const LinkComponent = useLinkComponent();
|
|
200
202
|
const {
|
|
201
203
|
onClick,
|
|
202
|
-
onMouseUp
|
|
204
|
+
onMouseUp,
|
|
205
|
+
onPointerDown
|
|
203
206
|
} = useClickableContainer({
|
|
204
207
|
containerRef,
|
|
205
208
|
interactiveRef,
|
|
@@ -239,6 +242,7 @@ export function ClickableCard({
|
|
|
239
242
|
!isDisabled && interactionOverlayStyles.pressedAlpha, !isDisabled && hasBorder && styles.borderedHoverOnPointer, isDisabled && styles.disabled, xstyleProp],
|
|
240
243
|
onClick: !isDisabled ? onClick : undefined,
|
|
241
244
|
onMouseUp: !isDisabled ? handleMouseUp : undefined,
|
|
245
|
+
onPointerDown: !isDisabled ? chainEventHandlers(onPointerDown, onPointerDownProp) : onPointerDownProp,
|
|
242
246
|
...props,
|
|
243
247
|
children: [isLink ? /*#__PURE__*/_jsx(LinkRoot, {
|
|
244
248
|
ref: setInteractiveRef,
|
|
@@ -178,13 +178,21 @@ interface DropdownMenuDataProps extends DropdownMenuBaseProps {
|
|
|
178
178
|
* Surface used to present the actions. Pass a value selected by product
|
|
179
179
|
* policy (for example, a compact-touch media query) when the presentation
|
|
180
180
|
* should adapt. Bottom-sheet presentation is intended for short action sets.
|
|
181
|
-
*
|
|
181
|
+
* Omitted, the menu is the anchored popover. Under a finger, on every
|
|
182
|
+
* device, the finger that opened it picks as UIMenu's does, once it has
|
|
183
|
+
* moved. `'popover'` pins the anchored popover with the pointer behavior on
|
|
184
|
+
* every device (the opening press follows the settle rule, as before).
|
|
182
185
|
*/
|
|
183
186
|
presentation?: DropdownMenuPresentation;
|
|
184
187
|
items: DropdownMenuOption[];
|
|
185
188
|
children?: undefined;
|
|
186
189
|
}
|
|
187
190
|
interface DropdownMenuCompoundProps extends DropdownMenuBaseProps {
|
|
191
|
+
/**
|
|
192
|
+
* `'popover'` pins the pointer behavior on every device (the opening press
|
|
193
|
+
* follows the settle rule, as before). Omitted, on every device, the finger
|
|
194
|
+
* that opened the menu picks as UIMenu's does, once it has moved.
|
|
195
|
+
*/
|
|
188
196
|
presentation?: 'popover';
|
|
189
197
|
items?: undefined;
|
|
190
198
|
children: ReactNode;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAEH,OAAO,KAAK,EAAE,EAOZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,EAAS,KAAK,WAAW,EAAC,MAAM,WAAW,CAAC;AAKnD,OAAO,KAAK,EAAC,qBAAqB,EAAC,MAAM,oBAAoB,CAAC;AA+B9D,OAAO,EAEL,KAAK,oBAAoB,EAC1B,MAAM,kCAAkC,CAAC;AAS1C,OAAO,KAAK,EAAC,cAAc,EAAE,cAAc,EAAC,MAAM,mBAAmB,CAAC;AAStE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA2L5C;;;;;;;GAOG;AACH,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAChD,qBAAqB,EACnB,MAAM,GACN,SAAS,GACT,YAAY,GACZ,SAAS,GACT,aAAa,GACb,YAAY,GACZ,kBAAkB,GAClB,MAAM,GACN,QAAQ,GACR,KAAK,CACR;IACC;;;;;;OAMG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,6BAA6B;IAC7B,KAAK,EAAE,SAAS,CAAC;IACjB;;;;OAIG;IACH,KAAK,CAAC,EAAE,kBAAkB,EAAE,CAAC;CAC9B;AAED;;;GAGG;AACH,MAAM,WAAW,uBAAuB;IACtC,IAAI,EAAE,SAAS,CAAC;CACjB;AAED,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,SAAS,CAAC;IAChB,0EAA0E;IAC1E,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,oBAAoB,EAAE,CAAC;CAC/B;AAED,MAAM,MAAM,kBAAkB,GAC5B,oBAAoB,GAAG,uBAAuB,GAAG,mBAAmB,CAAC;AAMvE,MAAM,MAAM,uBAAuB,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;AAEnE,MAAM,MAAM,wBAAwB,GAAG,oBAAoB,CAAC;AAE5D;;;;;;GAMG;AACH,MAAM,WAAW,wBAAwB;IACvC,yEAAyE;IACzE,GAAG,EAAE,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IAC3C,yDAAyD;IACzD,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACxD,cAAc,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC/D,aAAa,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAChE,aAAa,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC9D,SAAS,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC7D,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACxD,eAAe,EAAE,MAAM,GAAG,QAAQ,CAAC;IACnC,eAAe,EAAE,OAAO,CAAC;IACzB,eAAe,EAAE,MAAM,CAAC;CACzB;AAED,UAAU,qBAAsB,SAAQ,SAAS;IAC/C;;;OAGG;IACH,MAAM,CAAC,EAAE,uBAAuB,CAAC;IACjC;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,wBAAwB,KAAK,SAAS,CAAC;IAC/D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B;;;;OAIG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,UAAU,qBAAsB,SAAQ,qBAAqB;IAC3D
|
|
1
|
+
{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenu.tsx"],"names":[],"mappings":"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"}
|
|
@@ -47,7 +47,7 @@ import { DropdownMenuContext, DropdownMenuRootOpenContext, DropdownMenuSurfaceCo
|
|
|
47
47
|
import { useIsomorphicLayoutEffect } from "../hooks/useIsomorphicLayoutEffect.js";
|
|
48
48
|
import { useMergedRefs } from "../hooks/useMergedRefs.js";
|
|
49
49
|
import { useListFocus } from "../hooks/useListFocus.js";
|
|
50
|
-
import {
|
|
50
|
+
import { useDropdownMenuPress } from "../hooks/useMenuPress.js";
|
|
51
51
|
import { useTypeahead } from "../hooks/useTypeahead.js";
|
|
52
52
|
import { useFocusReturnVisibility } from "../hooks/useFocusReturnVisibility.js";
|
|
53
53
|
import { focusForLastInput } from "../utils/focusReturn.js";
|
|
@@ -574,6 +574,7 @@ function DropdownMenuPopover({
|
|
|
574
574
|
placement = 'below',
|
|
575
575
|
alignment = 'start',
|
|
576
576
|
presentation: _presentation,
|
|
577
|
+
pressTouchModel = 'uikit',
|
|
577
578
|
header,
|
|
578
579
|
footer,
|
|
579
580
|
className,
|
|
@@ -993,12 +994,15 @@ function DropdownMenuPopover({
|
|
|
993
994
|
// The press model: the row under a release acts, the highlight follows a
|
|
994
995
|
// held pointer. A mouse released outside the menu dismisses it; a finger
|
|
995
996
|
// released outside leaves it open, so the hook never calls onDismiss then.
|
|
996
|
-
const menuPress =
|
|
997
|
+
const menuPress = useDropdownMenuPress({
|
|
997
998
|
menuRef: listRef,
|
|
998
999
|
triggerRef: buttonRef,
|
|
999
1000
|
itemSelector: MENU_ITEM_SELECTOR,
|
|
1000
1001
|
onTriggerPress: handleTriggerPress,
|
|
1001
|
-
onDismiss: closeMenu
|
|
1002
|
+
onDismiss: closeMenu,
|
|
1003
|
+
// Under a finger, on every device, the opening finger picks as UIMenu's
|
|
1004
|
+
// does. `presentation="popover"` pins the pointer model.
|
|
1005
|
+
touchModel: pressTouchModel
|
|
1002
1006
|
});
|
|
1003
1007
|
cancelMenuPressRef.current = menuPress.cancel;
|
|
1004
1008
|
const handleButtonClick = useCallback(e => {
|
|
@@ -1305,7 +1309,8 @@ export function DropdownMenu(props) {
|
|
|
1305
1309
|
}
|
|
1306
1310
|
return /*#__PURE__*/_jsx(DropdownMenuPopover, {
|
|
1307
1311
|
...sharedProps,
|
|
1308
|
-
presentation: "popover"
|
|
1312
|
+
presentation: "popover",
|
|
1313
|
+
pressTouchModel: props.presentation === 'popover' ? 'pointer' : 'uikit'
|
|
1309
1314
|
});
|
|
1310
1315
|
}
|
|
1311
1316
|
DropdownMenu.displayName = 'DropdownMenu';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownMenuCheckboxItem.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuCheckboxItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,OAAO,EAIL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,EAAiB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"DropdownMenuCheckboxItem.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuCheckboxItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,OAAO,EAIL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,EAAiB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAStD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAiD5C,MAAM,WAAW,6BAA8B,SAAQ,IAAI,CACzD,SAAS,EACT,UAAU,GAAG,MAAM,GAAG,cAAc,GAAG,UAAU,CAClD;IACC;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B;;OAEG;IACH,KAAK,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,sFAAsF;IACtF,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,wBAAwB,CAAC,EACvC,KAAK,EACL,WAAW,EACX,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,UAAkB,EAClB,gBAAwB,EACxB,UAAU,EACV,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EACP,aAAa,EACb,GAAG,IAAI,EACR,EAAE,6BAA6B,+BAqE/B;yBApFe,wBAAwB"}
|
|
@@ -32,6 +32,7 @@ import { useIndicator } from "../Indicator/index.js";
|
|
|
32
32
|
import { Item } from "../Item/index.js";
|
|
33
33
|
import { useDropdownMenuContext } from "./DropdownMenuContext.js";
|
|
34
34
|
import { focusOutlineStyles } from "../utils/focusOutline.stylex.js";
|
|
35
|
+
import { menuPressLitRowStyle } from "../privateAttributes/menuPressLit.stylex.js";
|
|
35
36
|
import { focusMenuItemOnHover } from "./menuItemHover.js";
|
|
36
37
|
import "../theme/tokens.stylex.js";
|
|
37
38
|
import { colorVars, focusVars, spacingVars } from "../theme/tokens.stylex.js";
|
|
@@ -42,7 +43,7 @@ const styles = {
|
|
|
42
43
|
kzqmXN: "xh8yej3",
|
|
43
44
|
kaIpWk: "x1ws5lxm",
|
|
44
45
|
kMwMTN: "x1tgivj0",
|
|
45
|
-
kWkggS: "xjbqb8w
|
|
46
|
+
kWkggS: "xjbqb8w x1p2z2pi",
|
|
46
47
|
kkrTdU: "x1ypdohk x16khyan",
|
|
47
48
|
kInvED: "x1c097ug",
|
|
48
49
|
$$css: true
|
|
@@ -144,7 +145,7 @@ export function DropdownMenuCheckboxItem({
|
|
|
144
145
|
endContent: endContent,
|
|
145
146
|
onClick: handleClick,
|
|
146
147
|
isDisabled: isDisabled,
|
|
147
|
-
xstyle: [focusOutlineStyles.focusVisible, styles.root, isDisabled && styles.disabled, xstyle],
|
|
148
|
+
xstyle: [focusOutlineStyles.focusVisible, styles.root, menuPressLitRowStyle, isDisabled && styles.disabled, xstyle],
|
|
148
149
|
...mergeProps(themeProps('dropdown-menu-item', {
|
|
149
150
|
size: menuSize
|
|
150
151
|
}), {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownMenuItem.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,OAAO,EAEL,KAAK,UAAU,EAEf,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,EAAiB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAWtD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"DropdownMenuItem.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,OAAO,EAEL,KAAK,UAAU,EAEf,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,EAAiB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAWtD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAuE5C,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CACjD,SAAS,EACT,MAAM,GAAG,UAAU,CACpB;IACC,wCAAwC;IACxC,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B,0BAA0B;IAC1B,KAAK,EAAE,SAAS,CAAC;IACjB,4DAA4D;IAC5D,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0CAA0C;IAC1C,MAAM,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC5B;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,mDAAmD;IACnD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gEAAgE;IAChE,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;;;OAMG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC;IACpC;;;;;OAKG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;CAC9B;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,IAAI,EACJ,KAAK,EACL,WAAW,EACX,OAAO,EACP,IAAI,EACJ,MAAM,EACN,GAAG,EACH,UAAkB,EAClB,UAAU,EACV,gBAAuB,EACvB,OAAmB,EACnB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,aAAa,EACb,UAAU,EACV,GAAG,IAAI,EACR,EAAE,qBAAqB,+BAqHvB;yBAxIe,gBAAgB"}
|
|
@@ -37,6 +37,7 @@ import { colorVars, spacingVars, typographyVars, typeScaleVars, focusVars } from
|
|
|
37
37
|
import { composeEventHandlers, mergeProps } from "../utils/index.js";
|
|
38
38
|
import { useDropdownMenuContext } from "./DropdownMenuContext.js";
|
|
39
39
|
import { focusOutlineStyles } from "../utils/focusOutline.stylex.js";
|
|
40
|
+
import { menuPressLitRowStyle } from "../privateAttributes/menuPressLit.stylex.js";
|
|
40
41
|
import { focusMenuItemOnHover } from "./menuItemHover.js";
|
|
41
42
|
import { isModifiedClick } from "./menuItemRoles.js";
|
|
42
43
|
import { themeProps } from "../utils/themeProps.js";
|
|
@@ -52,7 +53,7 @@ const menuItemStyles = {
|
|
|
52
53
|
kMv6JI: "x9ynric",
|
|
53
54
|
kGuDYH: "xcr08ib",
|
|
54
55
|
kMwMTN: "x1tgivj0",
|
|
55
|
-
kWkggS: "xjbqb8w
|
|
56
|
+
kWkggS: "xjbqb8w x1p2z2pi x17hk9mh",
|
|
56
57
|
kMzoRj: "xc342km",
|
|
57
58
|
ksu8eU: "xng3xce",
|
|
58
59
|
kkrTdU: "x1ypdohk x16khyan",
|
|
@@ -199,7 +200,7 @@ export function DropdownMenuItem({
|
|
|
199
200
|
,
|
|
200
201
|
draggable: href != null ? false : undefined,
|
|
201
202
|
isDisabled: isDisabled,
|
|
202
|
-
xstyle: [focusOutlineStyles.focusVisible, menuItemStyles.root, itemSizeStyles[menuSize], isDestructive && menuItemStyles.destructive, isDisabled && menuItemStyles.disabled, xstyle],
|
|
203
|
+
xstyle: [focusOutlineStyles.focusVisible, menuItemStyles.root, menuPressLitRowStyle, itemSizeStyles[menuSize], isDestructive && menuItemStyles.destructive, isDisabled && menuItemStyles.disabled, xstyle],
|
|
203
204
|
...mergeProps(themeProps('dropdown-menu-item', {
|
|
204
205
|
size: menuSize,
|
|
205
206
|
variant: isDestructive ? 'destructive' : null
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownMenuRadioItem.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuRadioItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,EAIL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,EAAiB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"DropdownMenuRadioItem.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuRadioItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,EAIL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,EAAiB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAStD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAiD5C,MAAM,WAAW,0BAA2B,SAAQ,IAAI,CACtD,SAAS,EACT,MAAM,GAAG,cAAc,GAAG,UAAU,CACrC;IACC;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,mFAAmF;IACnF,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;CAC9B;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,KAAK,EACL,KAAK,EACL,WAAW,EACX,IAAI,EACJ,UAAkB,EAClB,UAAU,EACV,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EACP,aAAa,EACb,GAAG,IAAI,EACR,EAAE,0BAA0B,+BA6E5B;yBA1Fe,qBAAqB"}
|
|
@@ -28,6 +28,7 @@ import { useIndicator } from "../Indicator/index.js";
|
|
|
28
28
|
import { Item } from "../Item/index.js";
|
|
29
29
|
import { useDropdownMenuContext } from "./DropdownMenuContext.js";
|
|
30
30
|
import { focusOutlineStyles } from "../utils/focusOutline.stylex.js";
|
|
31
|
+
import { menuPressLitRowStyle } from "../privateAttributes/menuPressLit.stylex.js";
|
|
31
32
|
import { focusMenuItemOnHover } from "./menuItemHover.js";
|
|
32
33
|
import "../theme/tokens.stylex.js";
|
|
33
34
|
import { colorVars, focusVars, spacingVars } from "../theme/tokens.stylex.js";
|
|
@@ -39,7 +40,7 @@ const styles = {
|
|
|
39
40
|
kzqmXN: "xh8yej3",
|
|
40
41
|
kaIpWk: "x1ws5lxm",
|
|
41
42
|
kMwMTN: "x1tgivj0",
|
|
42
|
-
kWkggS: "xjbqb8w
|
|
43
|
+
kWkggS: "xjbqb8w x1p2z2pi",
|
|
43
44
|
kkrTdU: "x1ypdohk x16khyan",
|
|
44
45
|
kInvED: "x1c097ug",
|
|
45
46
|
$$css: true
|
|
@@ -139,7 +140,7 @@ export function DropdownMenuRadioItem({
|
|
|
139
140
|
endContent: endContent,
|
|
140
141
|
onClick: handleClick,
|
|
141
142
|
isDisabled: isDisabled,
|
|
142
|
-
xstyle: [focusOutlineStyles.focusVisible, styles.root, isDisabled && styles.disabled, xstyle],
|
|
143
|
+
xstyle: [focusOutlineStyles.focusVisible, styles.root, menuPressLitRowStyle, isDisabled && styles.disabled, xstyle],
|
|
143
144
|
...mergeProps(themeProps('dropdown-menu-item', {
|
|
144
145
|
size: menuSize
|
|
145
146
|
}), {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownMenuSubMenu.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuSubMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AAEH,OAAO,KAAK,EAAE,EASZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"DropdownMenuSubMenu.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuSubMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AAEH,OAAO,KAAK,EAAE,EASZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AA2C5D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAwO5C,MAAM,MAAM,+BAA+B,GACzC,QAAQ,GAAG,UAAU,GAAG,UAAU,CAAC;AAErC,UAAU,4BAA6B,SAAQ,IAAI,CACjD,SAAS,EACT,MAAM,GAAG,UAAU,CACpB;IACC,2DAA2D;IAC3D,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B,8CAA8C;IAC9C,KAAK,EAAE,SAAS,CAAC;IACjB,4DAA4D;IAC5D,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,8CAA8C;IAC9C,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,+BAA+B,CAAC;IAC/C;;;;;;;;;;OAUG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,mCAAmC;IACnC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;CAC9B;AAED,MAAM,WAAW,wBAAyB,SAAQ,4BAA4B;IAC5E;;;;;;;;OAQG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AA6CD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,wBAAwB,GAC9B,SAAS,CAo5BX;yBAt5Be,mBAAmB"}
|
|
@@ -70,6 +70,7 @@ import "../theme/tokens.stylex.js";
|
|
|
70
70
|
import { colorVars, spacingVars, radiusVars, durationVars, easeVars, shadowVars, typographyVars, typeScaleVars, focusVars } from "../theme/tokens.stylex.js";
|
|
71
71
|
import { composeEventHandlers, isImeKeyEvent, isRenderable, mergeProps, rtlStyles } from "../utils/index.js";
|
|
72
72
|
import { focusOutlineStyles } from "../utils/focusOutline.stylex.js";
|
|
73
|
+
import { menuPressLitRowStyle } from "../privateAttributes/menuPressLit.stylex.js";
|
|
73
74
|
import { getInteractionModality } from "../utils/interactionModality.js";
|
|
74
75
|
import { useMergedRefs } from "../hooks/useMergedRefs.js";
|
|
75
76
|
import { useDevWarning } from "../hooks/useDevWarning.js";
|
|
@@ -98,7 +99,7 @@ const triggerStyles = {
|
|
|
98
99
|
kMv6JI: "x9ynric",
|
|
99
100
|
kGuDYH: "xcr08ib",
|
|
100
101
|
kMwMTN: "x1tgivj0",
|
|
101
|
-
kWkggS: "xjbqb8w
|
|
102
|
+
kWkggS: "xjbqb8w x1p2z2pi",
|
|
102
103
|
kMzoRj: "xc342km",
|
|
103
104
|
ksu8eU: "xng3xce",
|
|
104
105
|
kkrTdU: "x1ypdohk x16khyan",
|
|
@@ -915,7 +916,7 @@ export function DropdownMenuSubMenu(props) {
|
|
|
915
916
|
onClick: handleRowClick,
|
|
916
917
|
onKeyDown: composeEventHandlers(handleTriggerKeyDown, onKeyDown),
|
|
917
918
|
isDisabled: isDisabled,
|
|
918
|
-
xstyle: [focusOutlineStyles.focusVisible, triggerStyles.root, triggerSizeStyles[menuSize], isOpen && triggerStyles.open, isDisabled && triggerStyles.disabled, xstyle],
|
|
919
|
+
xstyle: [focusOutlineStyles.focusVisible, triggerStyles.root, menuPressLitRowStyle, triggerSizeStyles[menuSize], isOpen && triggerStyles.open, isDisabled && triggerStyles.disabled, xstyle],
|
|
919
920
|
...mergeProps(themeProps('dropdown-menu-item', {
|
|
920
921
|
size: menuSize
|
|
921
922
|
}), {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileInput.d.ts","sourceRoot":"","sources":["../../src/FileInput/FileInput.tsx"],"names":[],"mappings":"AAuCA,OAAO,EAA0B,KAAK,WAAW,EAAC,MAAM,UAAU,CAAC;AAUnE,YAAY,EACV,WAAW,IAAI,eAAe,EAC9B,eAAe,IAAI,mBAAmB,GACvC,MAAM,UAAU,CAAC;AAGlB,OAAO,EACL,KAAK,mBAAmB,EAEzB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAO9C,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,+BAA+B,CAAC;AA2PxE,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,mBAAmB,EACnB,UAAU,GAAG,cAAc,GAAG,OAAO,CACtC;IACC;;OAEG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,CAAC;IAC5B;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9D;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;;;;;;;;;OAUG;IACH,aAAa,CAAC,EAAE,oBAAoB,CAAC;IACrC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAC5B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;;;;;GAOG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,aAAqB,EACrB,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,MAAM,EACN,UAAkB,EAClB,OAAO,EACP,QAAQ,EACR,UAAkB,EAClB,eAAe,EACf,UAAkB,EAClB,SAAiB,EACjB,MAAM,EAAE,UAAU,EAClB,aAA0B,EAC1B,WAAW,EACX,WAAW,EACX,IAAc,EACd,UAAkB,EAClB,YAAY,EACZ,KAAK,EACL,eAAe,EACf,kBAAkB,EAClB,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,GAAG,EACH,EAAE,EAAE,MAAM,EACV,GAAG,SAAS,EACb,EAAE,cAAc,+
|
|
1
|
+
{"version":3,"file":"FileInput.d.ts","sourceRoot":"","sources":["../../src/FileInput/FileInput.tsx"],"names":[],"mappings":"AAuCA,OAAO,EAA0B,KAAK,WAAW,EAAC,MAAM,UAAU,CAAC;AAUnE,YAAY,EACV,WAAW,IAAI,eAAe,EAC9B,eAAe,IAAI,mBAAmB,GACvC,MAAM,UAAU,CAAC;AAGlB,OAAO,EACL,KAAK,mBAAmB,EAEzB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAO9C,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,+BAA+B,CAAC;AA2PxE,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,mBAAmB,EACnB,UAAU,GAAG,cAAc,GAAG,OAAO,CACtC;IACC;;OAEG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,CAAC;IAC5B;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9D;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;;;;;;;;;OAUG;IACH,aAAa,CAAC,EAAE,oBAAoB,CAAC;IACrC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAC5B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;;;;;GAOG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,aAAqB,EACrB,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,MAAM,EACN,UAAkB,EAClB,OAAO,EACP,QAAQ,EACR,UAAkB,EAClB,eAAe,EACf,UAAkB,EAClB,SAAiB,EACjB,MAAM,EAAE,UAAU,EAClB,aAA0B,EAC1B,WAAW,EACX,WAAW,EACX,IAAc,EACd,UAAkB,EAClB,YAAY,EACZ,KAAK,EACL,eAAe,EACf,kBAAkB,EAClB,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,GAAG,EACH,EAAE,EAAE,MAAM,EACV,GAAG,SAAS,EACb,EAAE,cAAc,+BAkiBhB;yBAjkBe,SAAS"}
|
|
@@ -443,14 +443,28 @@ export function FileInput({
|
|
|
443
443
|
const handleDragEnter = useCallback(e => {
|
|
444
444
|
e.preventDefault();
|
|
445
445
|
e.stopPropagation();
|
|
446
|
-
if (
|
|
446
|
+
if (isSelectionDisabled) {
|
|
447
|
+
// A cancelled dragover with the default effect makes the zone a drop
|
|
448
|
+
// target.
|
|
449
|
+
// The 'none' effect shows the no-drop cursor and stops the drop.
|
|
450
|
+
if (e.dataTransfer) {
|
|
451
|
+
e.dataTransfer.dropEffect = 'none';
|
|
452
|
+
}
|
|
453
|
+
} else if (mode === 'dropzone') {
|
|
447
454
|
setIsDragOver(true);
|
|
448
455
|
}
|
|
449
456
|
}, [isSelectionDisabled, mode]);
|
|
450
457
|
const handleDragOver = useCallback(e => {
|
|
451
458
|
e.preventDefault();
|
|
452
459
|
e.stopPropagation();
|
|
453
|
-
if (
|
|
460
|
+
if (isSelectionDisabled) {
|
|
461
|
+
// A cancelled dragover with the default effect makes the zone a drop
|
|
462
|
+
// target.
|
|
463
|
+
// The 'none' effect shows the no-drop cursor and stops the drop.
|
|
464
|
+
if (e.dataTransfer) {
|
|
465
|
+
e.dataTransfer.dropEffect = 'none';
|
|
466
|
+
}
|
|
467
|
+
} else if (mode === 'dropzone') {
|
|
454
468
|
setIsDragOver(true);
|
|
455
469
|
}
|
|
456
470
|
}, [isSelectionDisabled, mode]);
|
package/dist/Item/Item.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../src/Item/Item.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAUf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../src/Item/Item.tsx"],"names":[],"mappings":"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"}
|
package/dist/Item/Item.js
CHANGED
|
@@ -34,6 +34,7 @@ import "../theme/tokens.stylex.js";
|
|
|
34
34
|
import { colorVars, radiusVars, spacingVars, durationVars, easeVars, typeScaleVars } from "../theme/tokens.stylex.js";
|
|
35
35
|
import { isRenderable } from "../utils/isRenderable.js";
|
|
36
36
|
import { mergeProps } from "../utils/mergeProps.js";
|
|
37
|
+
import { chainEventHandlers } from "../utils/chainEventHandlers.js";
|
|
37
38
|
import { useFocusAcrossSwap } from "../utils/useFocusAcrossSwap.js";
|
|
38
39
|
import { ItemDescriptionContext } from "./ItemDescriptionContext.js";
|
|
39
40
|
import { ItemMarkerColumnsContext } from "./ItemMarkerColumnsContext.js";
|
|
@@ -291,7 +292,8 @@ export function Item({
|
|
|
291
292
|
// Only onClick is needed: onMouseUp handles middle-click href navigation,
|
|
292
293
|
// which delegation mode never has (href is ignored here).
|
|
293
294
|
const {
|
|
294
|
-
onClick: delegatedOnClick
|
|
295
|
+
onClick: delegatedOnClick,
|
|
296
|
+
onPointerDown: delegatedOnPointerDown
|
|
295
297
|
} = useClickableContainer({
|
|
296
298
|
containerRef,
|
|
297
299
|
interactiveRef: interactiveRef ?? undefined,
|
|
@@ -517,6 +519,9 @@ export function Item({
|
|
|
517
519
|
...restProps,
|
|
518
520
|
...swipeHandlers,
|
|
519
521
|
...linkRootProps,
|
|
522
|
+
...(isDelegate ? {
|
|
523
|
+
onPointerDown: chainEventHandlers(restProps.onPointerDown, delegatedOnPointerDown)
|
|
524
|
+
} : null),
|
|
520
525
|
"aria-selected": allowsAriaSelected && isSelected || undefined
|
|
521
526
|
// aria-selected is invalid on roles that don't permit it (listitem, a
|
|
522
527
|
// bare div, etc.). For those, convey selection via aria-current — valid
|
|
@@ -1,11 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Run `reset`, which takes `root` out of rendering and back, and put every
|
|
3
3
|
* CSS animation and transition of `root` and its subtree back in the state it
|
|
4
|
-
* was in before.
|
|
5
|
-
* element, pseudo-element and name, in order, and then by name alone (an
|
|
6
|
-
* effect script moved to another element or pseudo-element); a recreated
|
|
7
|
-
* animation with no predecessor (an entry animation that had already played
|
|
8
|
-
* and been dropped) is finished.
|
|
4
|
+
* was in before.
|
|
9
5
|
*/
|
|
10
6
|
export declare function preserveAnimations(root: Element, reset: () => void): void;
|
|
11
7
|
//# sourceMappingURL=preserveAnimations.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"preserveAnimations.d.ts","sourceRoot":"","sources":["../../src/Layer/preserveAnimations.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"preserveAnimations.d.ts","sourceRoot":"","sources":["../../src/Layer/preserveAnimations.ts"],"names":[],"mappings":"AA0BA;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,IAAI,GAAG,IAAI,CASzE"}
|
|
@@ -11,189 +11,23 @@
|
|
|
11
11
|
*
|
|
12
12
|
* Taking an element out of rendering cancels every CSS animation and
|
|
13
13
|
* transition of it and its subtree. When it returns, the browser creates the
|
|
14
|
-
* animations again from the stylesheet, at their start
|
|
15
|
-
*
|
|
16
|
-
* reads every animation's state first
|
|
17
|
-
* CSS animation that state and resumes
|
|
18
|
-
* script animation at the same point.
|
|
19
|
-
*
|
|
20
|
-
* The
|
|
21
|
-
*
|
|
22
|
-
* chains, every field of the effect's timing, and its keyframes. Only values
|
|
23
|
-
* that differ from the recreated animation's are written, so a value the
|
|
24
|
-
* stylesheet controls stays under its control. A few members are not plain
|
|
25
|
-
* state and are handled in their own step (`ORDERED`); the rest need no
|
|
26
|
-
* handling (`DERIVED`). What cannot be carried over is the Animation and
|
|
27
|
-
* effect objects themselves: the old ones are idle, their `addEventListener`
|
|
28
|
-
* listeners and `finished`/`ready` promises stay with them, and the browser
|
|
29
|
-
* fires `animationcancel`/`transitioncancel` for them and `animationstart`
|
|
14
|
+
* animations again from the stylesheet, at their start. It starts no
|
|
15
|
+
* transition but one from `@starting-style`, and script-created animations
|
|
16
|
+
* are untouched. `preserveAnimations` reads every animation's state first.
|
|
17
|
+
* Afterwards it gives each recreated CSS animation that state, and resumes
|
|
18
|
+
* each cancelled transition with a script animation at the same point. Any
|
|
19
|
+
* other animation the return started is finished, unless it never ends
|
|
20
|
+
* (motion/carryAnimations.ts). The browser fires
|
|
21
|
+
* `animationcancel`/`transitioncancel` for the old ones and `animationstart`
|
|
30
22
|
* for the new ones.
|
|
31
23
|
*/
|
|
32
24
|
|
|
33
|
-
|
|
34
|
-
* Animation members written in a fixed order rather than generically: the
|
|
35
|
-
* timeline before the range that is measured on it, the rate before the
|
|
36
|
-
* time, and the start time (or, for a paused animation, the current time)
|
|
37
|
-
* last, once the play state is set. `effect` is not
|
|
38
|
-
* replaced, because a CSS animation whose effect script replaces leaves the
|
|
39
|
-
* stylesheet's control; its state is copied onto the new effect instead.
|
|
40
|
-
*/
|
|
41
|
-
const ORDERED = new Set(['effect', 'timeline', 'rangeStart', 'rangeEnd', 'playbackRate', 'startTime', 'currentTime']);
|
|
42
|
-
/** Every accessor with a setter on `object`'s prototype chain. */
|
|
43
|
-
function writableAccessors(object) {
|
|
44
|
-
const names = new Set();
|
|
45
|
-
for (let proto = Object.getPrototypeOf(object); proto != null && proto !== Object.prototype; proto = Object.getPrototypeOf(proto)) {
|
|
46
|
-
for (const [name, descriptor] of Object.entries(Object.getOwnPropertyDescriptors(proto))) {
|
|
47
|
-
if (descriptor.set != null) {
|
|
48
|
-
names.add(name);
|
|
49
|
-
}
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
|
-
return [...names];
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
/**
|
|
56
|
-
* A textual form of a value that is compared by content rather than by
|
|
57
|
-
* identity: a CSS numeric value (as in a timeline range offset) through its
|
|
58
|
-
* serialization, a plain object (a range) through its members. Anything else
|
|
59
|
-
* is compared by identity (`null`).
|
|
60
|
-
*/
|
|
61
|
-
function contentOf(value) {
|
|
62
|
-
if (typeof CSSNumericValue !== 'undefined' && value instanceof CSSNumericValue) {
|
|
63
|
-
return value.toString();
|
|
64
|
-
}
|
|
65
|
-
if (value != null && typeof value === 'object' && Object.getPrototypeOf(value) === Object.prototype) {
|
|
66
|
-
return Object.entries(value).map(([key, inner]) => `${key}:${contentOf(inner) ?? String(inner)}`).join(';');
|
|
67
|
-
}
|
|
68
|
-
return null;
|
|
69
|
-
}
|
|
70
|
-
function differs(a, b) {
|
|
71
|
-
if (a === b) {
|
|
72
|
-
return false;
|
|
73
|
-
}
|
|
74
|
-
const textA = contentOf(a);
|
|
75
|
-
return textA == null || textA !== contentOf(b);
|
|
76
|
-
}
|
|
77
|
-
function save(animation) {
|
|
78
|
-
const effect = animation.effect;
|
|
79
|
-
const values = {};
|
|
80
|
-
for (const name of writableAccessors(animation)) {
|
|
81
|
-
values[name] = animation[name];
|
|
82
|
-
}
|
|
83
|
-
const effectValues = {};
|
|
84
|
-
if (effect != null) {
|
|
85
|
-
for (const name of writableAccessors(effect)) {
|
|
86
|
-
effectValues[name] = effect[name];
|
|
87
|
-
}
|
|
88
|
-
}
|
|
89
|
-
return {
|
|
90
|
-
animation,
|
|
91
|
-
name: animation.animationName ?? '',
|
|
92
|
-
target: effect?.target ?? null,
|
|
93
|
-
pseudoElement: effect?.pseudoElement ?? null,
|
|
94
|
-
values,
|
|
95
|
-
effectValues,
|
|
96
|
-
timing: effect?.getTiming() ?? null,
|
|
97
|
-
keyframes: effect?.getKeyframes() ?? null,
|
|
98
|
-
playState: animation.playState,
|
|
99
|
-
replaceState: animation.replaceState
|
|
100
|
-
};
|
|
101
|
-
}
|
|
102
|
-
function write(object, name, value) {
|
|
103
|
-
object[name] = value;
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
/** Give `next` the effect state `saved` had: every writable member. */
|
|
107
|
-
function restoreEffect(next, saved) {
|
|
108
|
-
for (const name of writableAccessors(next)) {
|
|
109
|
-
if (name in saved.effectValues && differs(saved.effectValues[name], next[name])) {
|
|
110
|
-
write(next, name, saved.effectValues[name]);
|
|
111
|
-
}
|
|
112
|
-
}
|
|
113
|
-
if (saved.timing != null) {
|
|
114
|
-
const timing = next.getTiming();
|
|
115
|
-
const changed = {};
|
|
116
|
-
for (const [field, value] of Object.entries(saved.timing)) {
|
|
117
|
-
if (differs(value, timing[field])) {
|
|
118
|
-
changed[field] = value;
|
|
119
|
-
}
|
|
120
|
-
}
|
|
121
|
-
if (Object.keys(changed).length > 0) {
|
|
122
|
-
next.updateTiming(changed);
|
|
123
|
-
}
|
|
124
|
-
}
|
|
125
|
-
if (saved.keyframes != null && JSON.stringify(saved.keyframes) !== JSON.stringify(next.getKeyframes())) {
|
|
126
|
-
next.setKeyframes(saved.keyframes);
|
|
127
|
-
}
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
/** Give `next` the state `saved` had, member by member. */
|
|
131
|
-
function restore(next, saved) {
|
|
132
|
-
const effect = next.effect;
|
|
133
|
-
if (effect != null) {
|
|
134
|
-
restoreEffect(effect, saved);
|
|
135
|
-
}
|
|
136
|
-
const current = next;
|
|
137
|
-
for (const name of ['timeline', 'rangeStart', 'rangeEnd']) {
|
|
138
|
-
if (name in saved.values && differs(saved.values[name], current[name])) {
|
|
139
|
-
write(next, name, saved.values[name]);
|
|
140
|
-
}
|
|
141
|
-
}
|
|
142
|
-
for (const name of writableAccessors(next)) {
|
|
143
|
-
if (!ORDERED.has(name) && name in saved.values && differs(saved.values[name], current[name])) {
|
|
144
|
-
write(next, name, saved.values[name]);
|
|
145
|
-
}
|
|
146
|
-
}
|
|
147
|
-
if (saved.replaceState === 'persisted' && next.replaceState !== 'persisted') {
|
|
148
|
-
next.persist();
|
|
149
|
-
}
|
|
150
|
-
const rate = saved.values.playbackRate;
|
|
151
|
-
if (typeof rate === 'number' && rate !== next.playbackRate) {
|
|
152
|
-
next.playbackRate = rate;
|
|
153
|
-
}
|
|
154
|
-
if (saved.playState === 'paused' && next.playState !== 'paused') {
|
|
155
|
-
next.pause();
|
|
156
|
-
} else if (saved.playState !== 'paused' && next.playState === 'paused') {
|
|
157
|
-
next.play();
|
|
158
|
-
}
|
|
159
|
-
// A running animation is anchored to its timeline by its start time, which
|
|
160
|
-
// carries its current time on exactly. A paused one has none and keeps its
|
|
161
|
-
// current time. A finished one holds its end: finishing it again holds the
|
|
162
|
-
// same time, though its start time is then counted from now, since script
|
|
163
|
-
// cannot set a start time and a held time together.
|
|
164
|
-
const start = saved.values.startTime;
|
|
165
|
-
const time = saved.values.currentTime;
|
|
166
|
-
if (saved.playState === 'finished') {
|
|
167
|
-
next.finish();
|
|
168
|
-
} else if (start != null) {
|
|
169
|
-
next.startTime = start;
|
|
170
|
-
} else if (time != null) {
|
|
171
|
-
next.currentTime = time;
|
|
172
|
-
}
|
|
173
|
-
}
|
|
174
|
-
|
|
175
|
-
/** Resume a cancelled CSS transition with a script animation in its state. */
|
|
176
|
-
function resumeTransition(saved) {
|
|
177
|
-
if (saved.target == null || saved.keyframes == null) {
|
|
178
|
-
return;
|
|
179
|
-
}
|
|
180
|
-
const replacement = saved.target.animate(saved.keyframes, {
|
|
181
|
-
pseudoElement: saved.pseudoElement ?? undefined
|
|
182
|
-
});
|
|
183
|
-
restore(replacement, saved);
|
|
184
|
-
}
|
|
185
|
-
function isTransition(animation) {
|
|
186
|
-
return typeof CSSTransition !== 'undefined' && animation instanceof CSSTransition;
|
|
187
|
-
}
|
|
25
|
+
import { restoreAnimations, saveAnimation } from "../motion/carryAnimations.js";
|
|
188
26
|
|
|
189
27
|
/**
|
|
190
28
|
* Run `reset`, which takes `root` out of rendering and back, and put every
|
|
191
29
|
* CSS animation and transition of `root` and its subtree back in the state it
|
|
192
|
-
* was in before.
|
|
193
|
-
* element, pseudo-element and name, in order, and then by name alone (an
|
|
194
|
-
* effect script moved to another element or pseudo-element); a recreated
|
|
195
|
-
* animation with no predecessor (an entry animation that had already played
|
|
196
|
-
* and been dropped) is finished.
|
|
30
|
+
* was in before.
|
|
197
31
|
*/
|
|
198
32
|
export function preserveAnimations(root, reset) {
|
|
199
33
|
if (typeof root.getAnimations !== 'function') {
|
|
@@ -203,43 +37,7 @@ export function preserveAnimations(root, reset) {
|
|
|
203
37
|
const before = root.getAnimations({
|
|
204
38
|
subtree: true
|
|
205
39
|
});
|
|
206
|
-
const saved = before.map(
|
|
40
|
+
const saved = before.map(saveAnimation);
|
|
207
41
|
reset();
|
|
208
|
-
|
|
209
|
-
subtree: true
|
|
210
|
-
});
|
|
211
|
-
const current = new Set(after);
|
|
212
|
-
const survivors = new Set(before);
|
|
213
|
-
const cancelled = [];
|
|
214
|
-
for (const state of saved) {
|
|
215
|
-
if (current.has(state.animation)) {
|
|
216
|
-
continue;
|
|
217
|
-
}
|
|
218
|
-
if (isTransition(state.animation)) {
|
|
219
|
-
resumeTransition(state);
|
|
220
|
-
} else {
|
|
221
|
-
cancelled.push(state);
|
|
222
|
-
}
|
|
223
|
-
}
|
|
224
|
-
const recreated = after.filter(animation => !survivors.has(animation));
|
|
225
|
-
const unmatched = [];
|
|
226
|
-
for (const animation of recreated) {
|
|
227
|
-
const effect = animation.effect;
|
|
228
|
-
const name = animation.animationName ?? '';
|
|
229
|
-
const index = cancelled.findIndex(state => state.name === name && state.target === (effect?.target ?? null) && state.pseudoElement === (effect?.pseudoElement ?? null));
|
|
230
|
-
if (index === -1) {
|
|
231
|
-
unmatched.push(animation);
|
|
232
|
-
} else {
|
|
233
|
-
restore(animation, cancelled.splice(index, 1)[0]);
|
|
234
|
-
}
|
|
235
|
-
}
|
|
236
|
-
for (const animation of unmatched) {
|
|
237
|
-
const name = animation.animationName ?? '';
|
|
238
|
-
const index = cancelled.findIndex(state => state.name === name);
|
|
239
|
-
if (index === -1) {
|
|
240
|
-
animation.finish();
|
|
241
|
-
} else {
|
|
242
|
-
restore(animation, cancelled.splice(index, 1)[0]);
|
|
243
|
-
}
|
|
244
|
-
}
|
|
42
|
+
restoreAnimations(root, saved, new Set(before));
|
|
245
43
|
}
|