@astryxdesign/core 0.7.8-canary.626845f → 0.7.8-canary.63a41bb
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/Dialog/Dialog.d.ts +2 -1
- package/dist/Dialog/Dialog.d.ts.map +1 -1
- package/dist/Dialog/Dialog.js +8 -1
- package/dist/Drawer/useDrawerDialogPresence.d.ts +2 -1
- package/dist/Drawer/useDrawerDialogPresence.d.ts.map +1 -1
- package/dist/Drawer/useDrawerDialogPresence.js +11 -2
- package/dist/InfoTip/InfoTip.d.ts +1 -0
- package/dist/InfoTip/InfoTip.d.ts.map +1 -1
- package/dist/InfoTip/InfoTip.js +1 -0
- package/dist/Item/Item.d.ts +2 -1
- package/dist/Item/Item.d.ts.map +1 -1
- package/dist/Item/Item.js +8 -3
- package/dist/Layer/holdEntranceInput.d.ts +24 -0
- package/dist/Layer/holdEntranceInput.d.ts.map +1 -0
- package/dist/Layer/holdEntranceInput.js +65 -0
- package/dist/Layer/inputHold.d.ts +49 -0
- package/dist/Layer/inputHold.d.ts.map +1 -0
- package/dist/Layer/inputHold.js +636 -0
- package/dist/MobileNav/MobileNav.d.ts +11 -1
- package/dist/MobileNav/MobileNav.d.ts.map +1 -1
- package/dist/MobileNav/MobileNav.js +34 -1
- package/dist/RadioList/RadioListItem.d.ts.map +1 -1
- package/dist/RadioList/RadioListItem.js +4 -1
- package/dist/Spinner/Spinner.d.ts.map +1 -1
- package/dist/Spinner/Spinner.js +12 -2
- package/dist/TreeList/TreeListItem.d.ts +2 -1
- package/dist/TreeList/TreeListItem.d.ts.map +1 -1
- package/dist/TreeList/TreeListItem.js +7 -2
- package/dist/astryx.css +23 -4
- package/dist/gestures/GestureHost.d.ts +2 -2
- package/dist/gestures/GestureHost.d.ts.map +1 -1
- package/dist/gestures/GestureHost.js +21 -6
- package/dist/gestures/wheelSegmenter.d.ts +68 -1
- package/dist/gestures/wheelSegmenter.d.ts.map +1 -1
- package/dist/gestures/wheelSegmenter.js +199 -10
- package/dist/privateAttributes/press.stylex.d.ts +139 -0
- package/dist/privateAttributes/press.stylex.d.ts.map +1 -0
- package/dist/privateAttributes/press.stylex.js +98 -0
- package/dist/utils/flatTree.d.ts +6 -3
- package/dist/utils/flatTree.d.ts.map +1 -1
- package/dist/utils/flatTree.js +13 -3
- package/dist/utils/inputStream.d.ts +14 -1
- package/dist/utils/inputStream.d.ts.map +1 -1
- package/dist/utils/inputStream.js +40 -9
- package/dist/utils/interactionOverlay.stylex.d.ts +2 -1
- package/dist/utils/interactionOverlay.stylex.d.ts.map +1 -1
- package/dist/utils/interactionOverlay.stylex.js +7 -2
- package/dist/utils/rowPressLayer.stylex.d.ts +14 -0
- package/dist/utils/rowPressLayer.stylex.d.ts.map +1 -0
- package/dist/utils/rowPressLayer.stylex.js +25 -0
- package/dist/utils/selectionLock.d.ts.map +1 -1
- package/dist/utils/selectionLock.js +1 -10
- package/package.json +4 -4
- package/src/Dialog/Dialog.doc.mjs +1 -1
- package/src/Dialog/Dialog.tsx +8 -1
- package/src/Drawer/Drawer.doc.mjs +1 -1
- package/src/Drawer/useDrawerDialogPresence.ts +9 -2
- package/src/InfoTip/InfoTip.doc.mjs +26 -2
- package/src/InfoTip/InfoTip.tsx +1 -0
- package/src/Item/Item.tsx +7 -2
- package/src/Layer/holdEntranceInput.ts +84 -0
- package/src/Layer/inputHold.ts +734 -0
- package/src/MobileNav/MobileNav.doc.mjs +3 -3
- package/src/MobileNav/MobileNav.tsx +34 -1
- package/src/RadioList/RadioListItem.tsx +4 -5
- package/src/Spinner/Spinner.tsx +13 -3
- package/src/TreeList/TreeListItem.tsx +7 -1
- package/src/gestures/GestureHost.ts +21 -5
- package/src/gestures/README.md +12 -4
- package/src/gestures/wheelSegmenter.ts +243 -10
- package/src/privateAttributes/press.stylex.ts +244 -0
- package/src/utils/flatTree.ts +15 -3
- package/src/utils/inputStream.ts +47 -10
- package/src/utils/interactionOverlay.stylex.ts +7 -2
- package/src/utils/rowPressLayer.stylex.ts +27 -0
- package/src/utils/selectionLock.ts +5 -10
package/dist/Dialog/Dialog.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @file Dialog.tsx
|
|
3
3
|
* @input Uses React, DialogHTMLAttributes, ReactNode, container (Layout), DialogContext, layerTextReset,
|
|
4
|
-
* layerStructureReset, modalOutlet, interactionModality, chainEventHandlers
|
|
4
|
+
* layerStructureReset, modalOutlet, interactionModality, chainEventHandlers, holdEntranceInput
|
|
5
5
|
* @output Exports Dialog component, DialogProps, DialogVariant, DialogPurpose types
|
|
6
6
|
* @position Core implementation; consumed by index.ts, tested by Dialog.test.tsx
|
|
7
7
|
*
|
|
@@ -23,6 +23,7 @@
|
|
|
23
23
|
* SYNC: When modified, update these files to stay in sync:
|
|
24
24
|
* - /packages/core/src/Dialog/Dialog.doc.mjs (props table, features, implementation notes)
|
|
25
25
|
* - /packages/core/src/Dialog/Dialog.test.tsx (tests for new/changed behavior)
|
|
26
|
+
* - /packages/core/src/Dialog/__tests__/DialogTouchEntrance.interaction.browser.spec.ts (the touch entrance hold)
|
|
26
27
|
* - /packages/core/src/Dialog/index.ts (exports if types change)
|
|
27
28
|
* - /apps/storybook/stories/Dialog.stories.tsx (storybook stories)
|
|
28
29
|
* - /packages/cli/assets/templates/blocks/components/Dialog/ (showcase blocks)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"AAIA
|
|
1
|
+
{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAEH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA8B5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAMhD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,SAAS,CAAC;AAkC9C;;;;;;GAMG;AACH,MAAM,MAAM,aAAa,GAAG,MAAM,gBAAgB,CAAC;AAEnD;;;;;GAKG;AACH,MAAM,MAAM,aAAa,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;AAEzD,4EAA4E;AAC5E,UAAU,mBAAmB;IAC3B,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B;AAED;;;;;GAKG;AACH,MAAM,WAAW,cAAe,SAAQ,mBAAmB;IACzD,6EAA6E;IAC7E,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,yEAAyE;IACzE,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB;AAuBD,2FAA2F;AAC3F,eAAO,MAAM,uCAAuC;;;;;;;;;;;CAW1C,CAAC;AAwLX;;;;;;;;;GASG;AACH,wBAAgB,4BAA4B,CAAC,QAAQ,EAAE,cAAc;;;;;EAUpE;AAED,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC/D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;;;OAOG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,OAAO,CAAC;IAE3C;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE5B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,CAAC;IAEpC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,MAAM,CAAC,EACrB,MAAM,EAAE,UAAU,EAClB,QAAgB,EAChB,YAAY,EACZ,KAAW,EACX,SAAmB,EACnB,QAAQ,EACR,OAAoB,EACpB,OAAgB,EAChB,OAAO,EACP,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,sCA8Zb;yBA9ae,MAAM"}
|
package/dist/Dialog/Dialog.js
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
/**
|
|
6
6
|
* @file Dialog.tsx
|
|
7
7
|
* @input Uses React, DialogHTMLAttributes, ReactNode, container (Layout), DialogContext, layerTextReset,
|
|
8
|
-
* layerStructureReset, modalOutlet, interactionModality, chainEventHandlers
|
|
8
|
+
* layerStructureReset, modalOutlet, interactionModality, chainEventHandlers, holdEntranceInput
|
|
9
9
|
* @output Exports Dialog component, DialogProps, DialogVariant, DialogPurpose types
|
|
10
10
|
* @position Core implementation; consumed by index.ts, tested by Dialog.test.tsx
|
|
11
11
|
*
|
|
@@ -27,6 +27,7 @@
|
|
|
27
27
|
* SYNC: When modified, update these files to stay in sync:
|
|
28
28
|
* - /packages/core/src/Dialog/Dialog.doc.mjs (props table, features, implementation notes)
|
|
29
29
|
* - /packages/core/src/Dialog/Dialog.test.tsx (tests for new/changed behavior)
|
|
30
|
+
* - /packages/core/src/Dialog/__tests__/DialogTouchEntrance.interaction.browser.spec.ts (the touch entrance hold)
|
|
30
31
|
* - /packages/core/src/Dialog/index.ts (exports if types change)
|
|
31
32
|
* - /apps/storybook/stories/Dialog.stories.tsx (storybook stories)
|
|
32
33
|
* - /packages/cli/assets/templates/blocks/components/Dialog/ (showcase blocks)
|
|
@@ -41,6 +42,7 @@ import { layerStructureReset } from "../Layer/layerStructureReset.stylex.js";
|
|
|
41
42
|
import { LayerContentBoundary } from "../Layer/layerScopedContext.js";
|
|
42
43
|
import { layerClickBoundary } from "../Layer/layerClickBoundary.js";
|
|
43
44
|
import { LayerDepthProvider } from "../Layer/LayerDepthContext.js";
|
|
45
|
+
import { holdEntranceInput } from "../Layer/holdEntranceInput.js";
|
|
44
46
|
import { useLayerDismissal } from "../Layer/useLayerDismissal.js";
|
|
45
47
|
import { useBackdropPress } from "../Layer/useBackdropPress.js";
|
|
46
48
|
import { useModalOutlet } from "../Layer/modalOutlet.js";
|
|
@@ -447,6 +449,11 @@ export function Dialog({
|
|
|
447
449
|
focusForLastInput(autofocusTarget);
|
|
448
450
|
}
|
|
449
451
|
}
|
|
452
|
+
// Under a coarse primary pointer, a tap or a drag during the entrance
|
|
453
|
+
// reaches nothing. Keys and assistive technology stay live. The hold
|
|
454
|
+
// ends with the entrance, or with this effect's cleanup on a close or
|
|
455
|
+
// unmount.
|
|
456
|
+
return holdEntranceInput(dialog) ?? undefined;
|
|
450
457
|
} else {
|
|
451
458
|
if (dialog.open) {
|
|
452
459
|
dialog.close();
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @file useDrawerDialogPresence.ts
|
|
3
3
|
* @input Controlled open state, modal mode, dialog ref, and rendered-state setter
|
|
4
|
-
* @output Coordinates native top-layer presence, exit timing, focus restoration, and unmount cleanup
|
|
4
|
+
* @output Coordinates native top-layer presence, the touch entrance's input hold, exit timing, focus restoration, and unmount cleanup
|
|
5
5
|
* @position Drawer-internal hook; consumed only by Drawer.tsx
|
|
6
6
|
*
|
|
7
7
|
* The drawer has two independent notions of presence:
|
|
@@ -17,6 +17,7 @@
|
|
|
17
17
|
*
|
|
18
18
|
* SYNC: When modified, update:
|
|
19
19
|
* - /packages/core/src/Drawer/Drawer.test.tsx
|
|
20
|
+
* - /packages/core/src/Drawer/__tests__/DrawerTouchEntrance.interaction.browser.spec.ts
|
|
20
21
|
* - /.github/scripts/modal-close-visibility.js
|
|
21
22
|
*/
|
|
22
23
|
import { type Dispatch, type RefObject, type SetStateAction } from 'react';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useDrawerDialogPresence.d.ts","sourceRoot":"","sources":["../../src/Drawer/useDrawerDialogPresence.ts"],"names":[],"mappings":"AAIA
|
|
1
|
+
{"version":3,"file":"useDrawerDialogPresence.d.ts","sourceRoot":"","sources":["../../src/Drawer/useDrawerDialogPresence.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,OAAO,EAGL,KAAK,QAAQ,EACb,KAAK,SAAS,EACd,KAAK,cAAc,EACpB,MAAM,OAAO,CAAC;AAgBf,KAAK,8BAA8B,GAAG;IACpC,SAAS,EAAE,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IAC/C,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;IACjB,aAAa,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;CAClD,CAAC;AA6DF;;;;;;;;;;GAUG;AACH,wBAAgB,uBAAuB,CAAC,EACtC,SAAS,EACT,MAAM,EACN,OAAO,EACP,aAAa,GACd,EAAE,8BAA8B,GAAG,IAAI,CA2EvC"}
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
/**
|
|
6
6
|
* @file useDrawerDialogPresence.ts
|
|
7
7
|
* @input Controlled open state, modal mode, dialog ref, and rendered-state setter
|
|
8
|
-
* @output Coordinates native top-layer presence, exit timing, focus restoration, and unmount cleanup
|
|
8
|
+
* @output Coordinates native top-layer presence, the touch entrance's input hold, exit timing, focus restoration, and unmount cleanup
|
|
9
9
|
* @position Drawer-internal hook; consumed only by Drawer.tsx
|
|
10
10
|
*
|
|
11
11
|
* The drawer has two independent notions of presence:
|
|
@@ -21,10 +21,12 @@
|
|
|
21
21
|
*
|
|
22
22
|
* SYNC: When modified, update:
|
|
23
23
|
* - /packages/core/src/Drawer/Drawer.test.tsx
|
|
24
|
+
* - /packages/core/src/Drawer/__tests__/DrawerTouchEntrance.interaction.browser.spec.ts
|
|
24
25
|
* - /.github/scripts/modal-close-visibility.js
|
|
25
26
|
*/
|
|
26
27
|
import { useEffect, useRef } from 'react';
|
|
27
28
|
import { flushSync } from 'react-dom';
|
|
29
|
+
import { holdEntranceInput } from "../Layer/holdEntranceInput.js";
|
|
28
30
|
import { notifyTopLayerEntry } from "../Layer/modalOutlet.js";
|
|
29
31
|
import { runPopoverOperation } from "../Layer/popoverOperations.js";
|
|
30
32
|
|
|
@@ -126,7 +128,14 @@ export function useDrawerDialogPresence({
|
|
|
126
128
|
// contract as Dialog).
|
|
127
129
|
dialog.querySelector('[data-autofocus]')?.focus();
|
|
128
130
|
}
|
|
129
|
-
|
|
131
|
+
// Under a coarse primary pointer, a tap or a drag during the slide-in
|
|
132
|
+
// reaches nothing. A non-modal drawer holds only its panel, so its page
|
|
133
|
+
// stays live. Keys and assistive technology stay live. The hold ends
|
|
134
|
+
// with the slide-in, or with this effect's cleanup on a close or
|
|
135
|
+
// unmount.
|
|
136
|
+
return holdEntranceInput(dialog, {
|
|
137
|
+
isModal
|
|
138
|
+
}) ?? undefined;
|
|
130
139
|
}
|
|
131
140
|
if (!isDrawerHostOpen(dialog, isModal)) {
|
|
132
141
|
return;
|
|
@@ -11,6 +11,7 @@
|
|
|
11
11
|
* - /docs/specs/components/InfoTip/InfoTip.spec.md (contract)
|
|
12
12
|
* - /packages/core/src/InfoTip/InfoTip.test.tsx (tests for new/changed behavior)
|
|
13
13
|
* - /packages/core/src/InfoTip/index.ts (exports if types change)
|
|
14
|
+
* - /packages/cli/assets/templates/blocks/components/InfoTip/ (showcase and example blocks)
|
|
14
15
|
*/
|
|
15
16
|
import { type ReactNode, type Ref } from 'react';
|
|
16
17
|
import type { BaseProps } from '../BaseProps.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InfoTip.d.ts","sourceRoot":"","sources":["../../src/InfoTip/InfoTip.tsx"],"names":[],"mappings":"AAIA
|
|
1
|
+
{"version":3,"file":"InfoTip.d.ts","sourceRoot":"","sources":["../../src/InfoTip/InfoTip.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAKL,KAAK,SAAS,EACd,KAAK,GAAG,EACT,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,EAAO,KAAK,QAAQ,EAAC,MAAM,cAAc,CAAC;AAqBjD;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG,QAAQ,CAAC;AAEnC,MAAM,WAAW,YAAa,SAAQ,IAAI,CACxC,SAAS,EACT,QAAQ,GAAG,WAAW,GAAG,OAAO,CACjC;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAC7B;;;OAGG;IACH,OAAO,EAAE,SAAS,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB;AA8CD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,OAAO,CAAC,EACtB,OAAO,EACP,KAAK,EACL,IAAW,EACX,GAAG,EACH,MAAM,EACN,SAAS,EACT,KAAK,GACN,EAAE,YAAY,GAAG,SAAS,CAyF1B;yBAjGe,OAAO"}
|
package/dist/InfoTip/InfoTip.js
CHANGED
|
@@ -15,6 +15,7 @@
|
|
|
15
15
|
* - /docs/specs/components/InfoTip/InfoTip.spec.md (contract)
|
|
16
16
|
* - /packages/core/src/InfoTip/InfoTip.test.tsx (tests for new/changed behavior)
|
|
17
17
|
* - /packages/core/src/InfoTip/index.ts (exports if types change)
|
|
18
|
+
* - /packages/cli/assets/templates/blocks/components/InfoTip/ (showcase and example blocks)
|
|
18
19
|
*/
|
|
19
20
|
import { useCallback, useState } from 'react';
|
|
20
21
|
import * as stylex from '@stylexjs/stylex';
|
package/dist/Item/Item.d.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @file Item.tsx
|
|
3
|
-
* @input Uses React, ReactNode, StyleXStyles, theme tokens, useClickableContainer
|
|
3
|
+
* @input Uses React, ReactNode, StyleXStyles, theme tokens, useClickableContainer,
|
|
4
|
+
* the shared press overlays and the compositor press layer
|
|
4
5
|
* @output Exports Item component, ItemProps type; publishes the shared inline inset.
|
|
5
6
|
* Only numbered composing rows keep their start/label/end slots in one flex
|
|
6
7
|
* group, through Item's private exact-marker scope; other marked rows keep
|
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
|
|
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
|
@@ -4,7 +4,8 @@
|
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
6
|
* @file Item.tsx
|
|
7
|
-
* @input Uses React, ReactNode, StyleXStyles, theme tokens, useClickableContainer
|
|
7
|
+
* @input Uses React, ReactNode, StyleXStyles, theme tokens, useClickableContainer,
|
|
8
|
+
* the shared press overlays and the compositor press layer
|
|
8
9
|
* @output Exports Item component, ItemProps type; publishes the shared inline inset.
|
|
9
10
|
* Only numbered composing rows keep their start/label/end slots in one flex
|
|
10
11
|
* group, through Item's private exact-marker scope; other marked rows keep
|
|
@@ -46,6 +47,7 @@ import { useDevWarning } from "../hooks/useDevWarning.js";
|
|
|
46
47
|
import { themeProps } from "../utils/themeProps.js";
|
|
47
48
|
import { focusOutlineProps } from "../utils/focusOutline.stylex.js";
|
|
48
49
|
import { interactionOverlayStyles } from "../utils/interactionOverlay.stylex.js";
|
|
50
|
+
import { rowPressLayerStyles } from "../privateAttributes/press.stylex.js";
|
|
49
51
|
import { usePressFeedback } from "../hooks/usePressFeedback.js";
|
|
50
52
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
51
53
|
// The gesture and the panels, loaded only by a row that has swipe actions: a
|
|
@@ -191,7 +193,6 @@ const styles = {
|
|
|
191
193
|
$$css: true
|
|
192
194
|
},
|
|
193
195
|
swipeRoot: {
|
|
194
|
-
kHBbk8: "xc8icb0",
|
|
195
196
|
kFalU9: "xge0x1e",
|
|
196
197
|
k3aq6I: "x1kncwj0",
|
|
197
198
|
k1ekBW: "xuo13n2",
|
|
@@ -534,7 +535,11 @@ export function Item({
|
|
|
534
535
|
...mergeProps(themeProps('item', {
|
|
535
536
|
density,
|
|
536
537
|
align
|
|
537
|
-
}), focusOutlineProps.focusWithin(styles.root, densityStyles[density], align === 'start' && styles.alignStart, align === 'first-line' && styles.alignFirstLine, isInteractive && styles.interactive, isInteractive && interactionOverlayStyles.backgroundColor,
|
|
538
|
+
}), focusOutlineProps.focusWithin(styles.root, densityStyles[density], align === 'start' && styles.alignStart, align === 'first-line' && styles.alignFirstLine, isInteractive && styles.interactive, isInteractive && interactionOverlayStyles.backgroundColor,
|
|
539
|
+
// The touch press on a compositor layer (after the overlay, whose
|
|
540
|
+
// own touch paint it turns off): the release keeps fading while
|
|
541
|
+
// script runs.
|
|
542
|
+
isInteractive && rowPressLayerStyles.cell, isLinkRoot && styles.linkRoot, isHighlighted && styles.highlighted, isSelected && styles.selected, isDisabled && !hasParentRole && styles.disabled, hasSwipe && styles.swipeRoot, xstyle), className, style),
|
|
538
543
|
role: role,
|
|
539
544
|
onClick: rootOnClick,
|
|
540
545
|
children: [/*#__PURE__*/_jsxs(ItemDescriptionContext, {
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
/** Options for {@link holdEntranceInput}. */
|
|
2
|
+
export interface EntranceHoldOptions {
|
|
3
|
+
/**
|
|
4
|
+
* Holds input anywhere while true. While false, only what lands on the layer
|
|
5
|
+
* is held, and the page stays live.
|
|
6
|
+
* @default true
|
|
7
|
+
*/
|
|
8
|
+
isModal?: boolean;
|
|
9
|
+
/**
|
|
10
|
+
* The element whose animations are the entrance, when it is not the layer
|
|
11
|
+
* itself (a drawer inside its dialog).
|
|
12
|
+
* @default the layer
|
|
13
|
+
*/
|
|
14
|
+
entrance?: Element | null;
|
|
15
|
+
/** The longest the hold lasts, ms. An entrance that runs longer ends it. */
|
|
16
|
+
capMs?: number;
|
|
17
|
+
}
|
|
18
|
+
/**
|
|
19
|
+
* Holds a finger's and a pen's input away from `layer` until its entrance
|
|
20
|
+
* ends, or at most `capMs`. Returns the release, or `null` when nothing is
|
|
21
|
+
* held: no entrance runs, or the primary pointer is fine.
|
|
22
|
+
*/
|
|
23
|
+
export declare function holdEntranceInput(layer: Element, { isModal, entrance: animated, capMs }?: EntranceHoldOptions): (() => void) | null;
|
|
24
|
+
//# sourceMappingURL=holdEntranceInput.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"holdEntranceInput.d.ts","sourceRoot":"","sources":["../../src/Layer/holdEntranceInput.ts"],"names":[],"mappings":"AAmBA,6CAA6C;AAC7C,MAAM,WAAW,mBAAmB;IAClC;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAC1B,4EAA4E;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAC/B,KAAK,EAAE,OAAO,EACd,EAAC,OAAc,EAAE,QAAQ,EAAE,QAAgB,EAAE,KAAK,EAAC,GAAE,mBAAwB,GAC5E,CAAC,MAAM,IAAI,CAAC,GAAG,IAAI,CAuBrB"}
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
// Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
2
|
+
|
|
3
|
+
'use client';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* @file holdEntranceInput.ts
|
|
7
|
+
* @input A layer root whose CSS entrance has just started
|
|
8
|
+
* @output holdEntranceInput: under a coarse primary pointer, a finger's or a
|
|
9
|
+
* pen's input held away from the layer until its entrance ends
|
|
10
|
+
* @position The entrance hold for layers that enter through CSS (Dialog,
|
|
11
|
+
* Drawer, MobileNav), on the Layer module's input hold (inputHold.ts)
|
|
12
|
+
*
|
|
13
|
+
* SYNC: When modified, update holdEntranceInput.test.ts and its callers
|
|
14
|
+
* (Dialog.tsx, Drawer/useDrawerDialogPresence.ts, MobileNav/MobileNav.tsx).
|
|
15
|
+
*/
|
|
16
|
+
import { isCoarsePointer } from "../utils/coarsePointer.js";
|
|
17
|
+
import { holdInput } from "./inputHold.js";
|
|
18
|
+
|
|
19
|
+
/** Options for {@link holdEntranceInput}. */
|
|
20
|
+
|
|
21
|
+
/**
|
|
22
|
+
* Holds a finger's and a pen's input away from `layer` until its entrance
|
|
23
|
+
* ends, or at most `capMs`. Returns the release, or `null` when nothing is
|
|
24
|
+
* held: no entrance runs, or the primary pointer is fine.
|
|
25
|
+
*/
|
|
26
|
+
export function holdEntranceInput(layer, {
|
|
27
|
+
isModal = true,
|
|
28
|
+
entrance: animated = layer,
|
|
29
|
+
capMs
|
|
30
|
+
} = {}) {
|
|
31
|
+
if (animated == null || typeof animated.getAnimations !== 'function') {
|
|
32
|
+
return null;
|
|
33
|
+
}
|
|
34
|
+
// getAnimations() flushes styles, so it lists an entrance the open has just
|
|
35
|
+
// started. A theme's duration, a shorter reduced-motion entrance and a
|
|
36
|
+
// canceled entrance all end the hold when they end.
|
|
37
|
+
const entrance = animated.getAnimations().filter(isEntrance);
|
|
38
|
+
if (entrance.length === 0) {
|
|
39
|
+
return null;
|
|
40
|
+
}
|
|
41
|
+
// A touch presentation only, read as the layer opens. A finger on a device
|
|
42
|
+
// whose primary pointer is fine, such as a touchscreen laptop, is not held.
|
|
43
|
+
if (!isCoarsePointer(layer.ownerDocument.defaultView)) {
|
|
44
|
+
return null;
|
|
45
|
+
}
|
|
46
|
+
const ended = Promise.all(entrance.map(async animation => animation.finished));
|
|
47
|
+
return holdInput(layer, {
|
|
48
|
+
until: capMs == null ? ended : Promise.race([ended, after(capMs)]),
|
|
49
|
+
scope: isModal ? 'viewport' : 'surface'
|
|
50
|
+
});
|
|
51
|
+
}
|
|
52
|
+
async function after(ms) {
|
|
53
|
+
await new Promise(resolve => {
|
|
54
|
+
setTimeout(resolve, ms);
|
|
55
|
+
});
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
/** A running animation that ends on its own: an entrance, not a spin. */
|
|
59
|
+
function isEntrance(animation) {
|
|
60
|
+
if (animation.playState !== 'running') {
|
|
61
|
+
return false;
|
|
62
|
+
}
|
|
63
|
+
const end = animation.effect?.getComputedTiming().endTime;
|
|
64
|
+
return typeof end === 'number' && Number.isFinite(end);
|
|
65
|
+
}
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* What a hold does. `'viewport'` and `'layer'` add one shield over the whole
|
|
3
|
+
* viewport. `'layer'` also makes the layer's content inert and moves focus
|
|
4
|
+
* out of it. `'surface'` shields only the layer's own box, and the page
|
|
5
|
+
* around it stays live.
|
|
6
|
+
*/
|
|
7
|
+
export type InputHoldScope = 'viewport' | 'layer' | 'surface';
|
|
8
|
+
/** What ends a hold: a promise, or an animator handle (its `finished`). */
|
|
9
|
+
export type InputHoldEnd = PromiseLike<unknown> | {
|
|
10
|
+
readonly finished: PromiseLike<unknown>;
|
|
11
|
+
};
|
|
12
|
+
export interface InputHoldOptions {
|
|
13
|
+
/** The hold ends when this settles. */
|
|
14
|
+
until: InputHoldEnd;
|
|
15
|
+
/**
|
|
16
|
+
* `'viewport'` while presenting, `'layer'` while dismissing, `'surface'`
|
|
17
|
+
* while a non-modal layer presents.
|
|
18
|
+
*/
|
|
19
|
+
scope: InputHoldScope;
|
|
20
|
+
}
|
|
21
|
+
/**
|
|
22
|
+
* Whether `node` is the shield of a live hold. A hit test that must see past
|
|
23
|
+
* held input takes the first element of `elementsFromPoint` that is not one.
|
|
24
|
+
*/
|
|
25
|
+
export declare function isInputShield(node: Node | null): boolean;
|
|
26
|
+
/**
|
|
27
|
+
* Whether `target` is inside a held layer. It walks the flat tree as the
|
|
28
|
+
* gesture host does: a slotted node goes to its slot, and a shadow root to
|
|
29
|
+
* its host.
|
|
30
|
+
*/
|
|
31
|
+
export declare function isInHeldLayer(target: Node | null): boolean;
|
|
32
|
+
/**
|
|
33
|
+
* Whether the gesture host holds `target` away for the current pointer. A
|
|
34
|
+
* dismissing layer holds every pointer. A presenting layer holds every
|
|
35
|
+
* pointer but a mouse, which keeps today's behavior. The host asks this for
|
|
36
|
+
* every touch. So this module imports nothing from gestures/, and a
|
|
37
|
+
* root-entry component can hold its layer without gesture code. With nothing
|
|
38
|
+
* held, this answers false.
|
|
39
|
+
*/
|
|
40
|
+
export declare function holdsTouch(target: Node): boolean;
|
|
41
|
+
/**
|
|
42
|
+
* Holds input away from `layer` until `until` settles. Returns the release
|
|
43
|
+
* (idempotent), for a hold that ends early. Holds on one layer stack, and
|
|
44
|
+
* the layer comes back when the last one ends. Each event is judged by its
|
|
45
|
+
* own pointer, never by the primary pointer. So a mouse on a touch screen
|
|
46
|
+
* keeps its clicks during a presentation.
|
|
47
|
+
*/
|
|
48
|
+
export declare function holdInput(layer: Element, { until, scope }: InputHoldOptions): () => void;
|
|
49
|
+
//# sourceMappingURL=inputHold.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"inputHold.d.ts","sourceRoot":"","sources":["../../src/Layer/inputHold.ts"],"names":[],"mappings":"AAwBA;;;;;GAKG;AACH,MAAM,MAAM,cAAc,GAAG,UAAU,GAAG,OAAO,GAAG,SAAS,CAAC;AAE9D,2EAA2E;AAC3E,MAAM,MAAM,YAAY,GACtB,WAAW,CAAC,OAAO,CAAC,GAAG;IAAC,QAAQ,CAAC,QAAQ,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;CAAC,CAAC;AAEnE,MAAM,WAAW,gBAAgB;IAC/B,uCAAuC;IACvC,KAAK,EAAE,YAAY,CAAC;IACpB;;;OAGG;IACH,KAAK,EAAE,cAAc,CAAC;CACvB;AAsCD;;;GAGG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,OAAO,CAExD;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,MAAM,EAAE,IAAI,GAAG,IAAI,GAAG,OAAO,CAW1D;AAED;;;;;;;GAOG;AACH,wBAAgB,UAAU,CAAC,MAAM,EAAE,IAAI,GAAG,OAAO,CAyBhD;AAwHD;;;;;;GAMG;AACH,wBAAgB,SAAS,CACvB,KAAK,EAAE,OAAO,EACd,EAAC,KAAK,EAAE,KAAK,EAAC,EAAE,gBAAgB,GAC/B,MAAM,IAAI,CA+EZ"}
|