@astryxdesign/core 0.7.7-canary.871bc3d → 0.7.7-canary.8925571
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/AlertDialog/AlertDialog.d.ts +4 -1
- package/dist/AlertDialog/AlertDialog.d.ts.map +1 -1
- package/dist/AlertDialog/AlertDialog.js +36 -6
- package/dist/BottomSheet/BottomSheetPanel.d.ts.map +1 -1
- package/dist/BottomSheet/BottomSheetPanel.js +1 -1
- package/dist/BottomSheet/useSheetGestures.d.ts.map +1 -1
- package/dist/BottomSheet/useSheetGestures.js +3 -1
- package/dist/Button/Button.d.ts.map +1 -1
- package/dist/Button/Button.js +17 -1
- package/dist/CheckboxInput/CheckboxInput.d.ts.map +1 -1
- package/dist/CheckboxInput/CheckboxInput.js +13 -2
- package/dist/ContextMenu/ContextMenu.js +2 -2
- package/dist/Dialog/Dialog.d.ts.map +1 -1
- package/dist/Dialog/Dialog.js +7 -31
- package/dist/HoverCard/HoverCard.d.ts +6 -4
- package/dist/HoverCard/HoverCard.d.ts.map +1 -1
- package/dist/HoverCard/HoverCard.js +21 -1
- package/dist/HoverCard/useHoverCard.d.ts +5 -4
- package/dist/HoverCard/useHoverCard.d.ts.map +1 -1
- package/dist/HoverCard/useHoverCard.js +17 -31
- package/dist/Icon/Icon.d.ts +5 -1
- package/dist/Icon/Icon.d.ts.map +1 -1
- package/dist/Icon/Icon.js +5 -2
- package/dist/Lightbox/Lightbox.d.ts.map +1 -1
- package/dist/Lightbox/Lightbox.js +18 -0
- package/dist/Resizable/ResizeHandle.d.ts +2 -1
- package/dist/Resizable/ResizeHandle.d.ts.map +1 -1
- package/dist/Resizable/ResizeHandle.js +99 -77
- package/dist/Spinner/Spinner.d.ts +1 -1
- package/dist/Spinner/Spinner.d.ts.map +1 -1
- package/dist/Spinner/Spinner.js +60 -58
- package/dist/Toast/Toast.d.ts +11 -1
- package/dist/Toast/Toast.d.ts.map +1 -1
- package/dist/Toast/Toast.js +25 -15
- package/dist/Toast/ToastViewport.d.ts.map +1 -1
- package/dist/Toast/ToastViewport.js +94 -34
- package/dist/Toast/types.d.ts +9 -3
- package/dist/Toast/types.d.ts.map +1 -1
- package/dist/Tooltip/useTooltip.d.ts.map +1 -1
- package/dist/Tooltip/useTooltip.js +10 -46
- package/dist/Typeahead/BaseTypeahead.d.ts.map +1 -1
- package/dist/Typeahead/BaseTypeahead.js +27 -18
- package/dist/Typeahead/TypeaheadItem.d.ts +2 -1
- package/dist/Typeahead/TypeaheadItem.d.ts.map +1 -1
- package/dist/astryx.css +24 -6
- package/dist/gestures/PressTracker.d.ts.map +1 -1
- package/dist/gestures/PressTracker.js +4 -3
- package/dist/hooks/actionGroupTracker.d.ts +4 -1
- package/dist/hooks/actionGroupTracker.d.ts.map +1 -1
- package/dist/hooks/actionGroupTracker.js +13 -3
- package/dist/hooks/pressGroupContext.d.ts +6 -0
- package/dist/hooks/pressGroupContext.d.ts.map +1 -0
- package/dist/hooks/pressGroupContext.js +20 -0
- package/dist/hooks/useActionGroupTracking.d.ts +53 -0
- package/dist/hooks/useActionGroupTracking.d.ts.map +1 -0
- package/dist/hooks/useActionGroupTracking.js +174 -0
- package/dist/hooks/useLongPress.d.ts +6 -2
- package/dist/hooks/useLongPress.d.ts.map +1 -1
- package/dist/hooks/useLongPress.js +95 -15
- package/dist/internal/indicatorPress.stylex.d.ts +20 -0
- package/dist/internal/indicatorPress.stylex.d.ts.map +1 -0
- package/dist/internal/indicatorPress.stylex.js +26 -0
- package/dist/motion/animatedLayout.d.ts.map +1 -1
- package/dist/motion/animatedLayout.js +5 -6
- package/dist/motion/progress.d.ts +88 -0
- package/dist/motion/progress.d.ts.map +1 -0
- package/dist/motion/progress.js +128 -0
- package/dist/motion/uikit/alert.d.ts +41 -0
- package/dist/motion/uikit/alert.d.ts.map +1 -0
- package/dist/motion/uikit/alert.js +43 -0
- package/dist/privateAttributes/pressGroupItem.stylex.d.ts +15 -0
- package/dist/privateAttributes/pressGroupItem.stylex.d.ts.map +1 -0
- package/dist/privateAttributes/pressGroupItem.stylex.js +23 -0
- package/dist/utils/focusReturn.d.ts +15 -0
- package/dist/utils/focusReturn.d.ts.map +1 -1
- package/dist/utils/focusReturn.js +28 -0
- package/dist/utils/interactionOverlay.stylex.d.ts +3 -2
- package/dist/utils/interactionOverlay.stylex.d.ts.map +1 -1
- package/dist/utils/interactionOverlay.stylex.js +3 -2
- package/dist/utils/pressFeedback.d.ts.map +1 -1
- package/dist/utils/pressFeedback.js +19 -6
- package/dist/utils/triggerFocus.d.ts +36 -0
- package/dist/utils/triggerFocus.d.ts.map +1 -0
- package/dist/utils/triggerFocus.js +65 -0
- package/package.json +9 -4
- package/src/AlertDialog/AlertDialog.doc.mjs +2 -2
- package/src/AlertDialog/AlertDialog.tsx +37 -5
- package/src/BottomSheet/BottomSheetPanel.tsx +4 -0
- package/src/BottomSheet/useSheetGestures.ts +3 -1
- package/src/Button/Button.tsx +26 -4
- package/src/CheckboxInput/CheckboxInput.doc.mjs +18 -0
- package/src/CheckboxInput/CheckboxInput.tsx +36 -9
- package/src/ContextMenu/ContextMenu.tsx +2 -2
- package/src/Dialog/Dialog.tsx +10 -31
- package/src/HoverCard/HoverCard.doc.mjs +10 -8
- package/src/HoverCard/HoverCard.tsx +27 -5
- package/src/HoverCard/useHoverCard.doc.mjs +178 -36
- package/src/HoverCard/useHoverCard.tsx +46 -52
- package/src/Icon/Icon.doc.mjs +49 -8
- package/src/Icon/Icon.tsx +15 -7
- package/src/IconButton/IconButton.doc.mjs +141 -21
- package/src/Lightbox/Lightbox.tsx +18 -0
- package/src/Resizable/Resizable.doc.mjs +5 -4
- package/src/Resizable/ResizeHandle.tsx +167 -109
- package/src/Spinner/Spinner.tsx +77 -63
- package/src/Toast/Toast.doc.mjs +4 -3
- package/src/Toast/Toast.tsx +52 -32
- package/src/Toast/ToastViewport.tsx +121 -35
- package/src/Toast/types.ts +9 -3
- package/src/Tooltip/useTooltip.tsx +11 -51
- package/src/Typeahead/BaseTypeahead.tsx +27 -17
- package/src/Typeahead/TypeaheadItem.doc.mjs +6 -3
- package/src/Typeahead/TypeaheadItem.tsx +2 -1
- package/src/gestures/PressTracker.ts +4 -3
- package/src/gestures/README.md +7 -1
- package/src/hooks/actionGroupTracker.ts +20 -5
- package/src/hooks/pressGroupContext.ts +21 -0
- package/src/hooks/useActionGroupTracking.ts +224 -0
- package/src/hooks/useLongPress.doc.mjs +2 -2
- package/src/hooks/useLongPress.ts +136 -15
- package/src/internal/indicatorPress.stylex.ts +24 -0
- package/src/motion/README.md +2 -0
- package/src/motion/animatedLayout.ts +5 -4
- package/src/motion/progress.ts +155 -0
- package/src/motion/uikit/alert.ts +43 -0
- package/src/privateAttributes/pressGroupItem.stylex.ts +23 -0
- package/src/utils/focusReturn.ts +30 -0
- package/src/utils/interactionOverlay.stylex.ts +3 -2
- package/src/utils/pressFeedback.ts +19 -6
- package/src/utils/triggerFocus.ts +80 -0
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @file AlertDialog.tsx
|
|
3
|
-
* @input Uses React, StyleX, Dialog, Layout, Heading, Text, Button
|
|
3
|
+
* @input Uses React, StyleX, Dialog, Layout, Heading, Text, Button, the
|
|
4
|
+
* action-group tracking (hooks/useActionGroupTracking) and the press-group
|
|
5
|
+
* marker (privateAttributes/pressGroupItem.stylex)
|
|
4
6
|
* @output Exports AlertDialog component, AlertDialogProps type
|
|
5
7
|
* @position Core implementation; consumed by index.ts, tested by AlertDialog.test.tsx
|
|
6
8
|
*
|
|
@@ -8,6 +10,7 @@
|
|
|
8
10
|
* - /packages/core/src/AlertDialog/AlertDialog.doc.mjs (props table, features, examples)
|
|
9
11
|
* - /packages/core/src/AlertDialog/AlertDialog.test.tsx (tests for new/changed behavior)
|
|
10
12
|
* - /packages/core/src/AlertDialog/index.ts (exports if types change)
|
|
13
|
+
* - /packages/core/src/AlertDialog/__tests__/AlertDialog.interaction.browser.spec.ts (touch tracking)
|
|
11
14
|
* - /apps/storybook/stories/AlertDialog.stories.tsx (storybook stories)
|
|
12
15
|
* - /packages/cli/assets/templates/blocks/components/AlertDialog/ (showcase blocks)
|
|
13
16
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AlertDialog.d.ts","sourceRoot":"","sources":["../../src/AlertDialog/AlertDialog.tsx"],"names":[],"mappings":"AAIA
|
|
1
|
+
{"version":3,"file":"AlertDialog.d.ts","sourceRoot":"","sources":["../../src/AlertDialog/AlertDialog.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAmC,MAAM,OAAO,CAAC;AAUxD,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,WAAW,CAAC;AAC7C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAkC5C,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACpE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,OAAO,CAAC;IAE3C;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAE9B;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;OAGG;IACH,QAAQ,EAAE,MAAM,OAAO,CAAC;IAExB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,GAAG,EACH,MAAM,EACN,QAAQ,EACR,YAAY,EACZ,KAAK,EACL,WAAW,EACX,WAAW,EAAE,oBAAoB,EACjC,WAAW,EACX,aAA6B,EAC7B,eAAe,EACf,QAAQ,EACR,KAAW,EACX,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,IAAI,EACR,EAAE,gBAAgB,qBAiHlB;yBAnIe,WAAW"}
|
|
@@ -4,7 +4,9 @@
|
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
6
|
* @file AlertDialog.tsx
|
|
7
|
-
* @input Uses React, StyleX, Dialog, Layout, Heading, Text, Button
|
|
7
|
+
* @input Uses React, StyleX, Dialog, Layout, Heading, Text, Button, the
|
|
8
|
+
* action-group tracking (hooks/useActionGroupTracking) and the press-group
|
|
9
|
+
* marker (privateAttributes/pressGroupItem.stylex)
|
|
8
10
|
* @output Exports AlertDialog component, AlertDialogProps type
|
|
9
11
|
* @position Core implementation; consumed by index.ts, tested by AlertDialog.test.tsx
|
|
10
12
|
*
|
|
@@ -12,10 +14,11 @@
|
|
|
12
14
|
* - /packages/core/src/AlertDialog/AlertDialog.doc.mjs (props table, features, examples)
|
|
13
15
|
* - /packages/core/src/AlertDialog/AlertDialog.test.tsx (tests for new/changed behavior)
|
|
14
16
|
* - /packages/core/src/AlertDialog/index.ts (exports if types change)
|
|
17
|
+
* - /packages/core/src/AlertDialog/__tests__/AlertDialog.interaction.browser.spec.ts (touch tracking)
|
|
15
18
|
* - /apps/storybook/stories/AlertDialog.stories.tsx (storybook stories)
|
|
16
19
|
* - /packages/cli/assets/templates/blocks/components/AlertDialog/ (showcase blocks)
|
|
17
20
|
*/
|
|
18
|
-
import React, { useId, useCallback } from 'react';
|
|
21
|
+
import React, { useId, useCallback, useRef } from 'react';
|
|
19
22
|
import * as stylex from '@stylexjs/stylex';
|
|
20
23
|
import { Dialog } from "../Dialog/Dialog.js";
|
|
21
24
|
import { Layout } from "../Layout/Layout.js";
|
|
@@ -30,10 +33,18 @@ import { themeProps } from "../utils/themeProps.js";
|
|
|
30
33
|
import { useMediaQuery } from "../hooks/useMediaQuery.js";
|
|
31
34
|
import { registerEnglishFallback, useComponentTranslator } from "../i18n/useComponentTranslator.js";
|
|
32
35
|
import english from "../i18n/generated-english/AlertDialog/AlertDialog.generated.js";
|
|
36
|
+
import { useActionGroupTracking } from "../hooks/useActionGroupTracking.js";
|
|
37
|
+
import { PressGroupContext } from "../hooks/pressGroupContext.js";
|
|
38
|
+
import { alertController } from "../motion/uikit/alert.js";
|
|
39
|
+
import { pressGroupItemProps } from "../privateAttributes/pressGroupItem.stylex.js";
|
|
33
40
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
34
41
|
registerEnglishFallback(english);
|
|
35
42
|
const SMALL_SCREEN_QUERY = '(max-width: 640px)';
|
|
36
43
|
const styles = {
|
|
44
|
+
trackingRow: {
|
|
45
|
+
kFalU9: "x1j4r261",
|
|
46
|
+
$$css: true
|
|
47
|
+
},
|
|
37
48
|
action: {
|
|
38
49
|
ks0D6T: "x193iq5w",
|
|
39
50
|
k7Eaqz: "xeuugli",
|
|
@@ -100,17 +111,30 @@ export function AlertDialog({
|
|
|
100
111
|
const handleCancel = useCallback(() => {
|
|
101
112
|
onOpenChange(false);
|
|
102
113
|
}, [onOpenChange]);
|
|
114
|
+
|
|
115
|
+
// Each action carries the press-group marker from its first render, so the
|
|
116
|
+
// tracker is its only painter.
|
|
117
|
+
const actionsRef = useRef(null);
|
|
118
|
+
const isTracking = isOpen && isInline !== true;
|
|
119
|
+
useActionGroupTracking(actionsRef, {
|
|
120
|
+
// The actions row holds only the two buttons.
|
|
121
|
+
itemSelector: 'button',
|
|
122
|
+
highlightOnsetMs: alertController.actions.highlightOnsetMs,
|
|
123
|
+
highlightExpansion: alertController.actions.highlightExpansion,
|
|
124
|
+
isEnabled: isTracking
|
|
125
|
+
});
|
|
126
|
+
const actionTrackingProps = isTracking ? pressGroupItemProps : undefined;
|
|
103
127
|
const buttonActionStyle = [styles.action, isSmallScreen && styles.stackedAction];
|
|
104
128
|
const cancelButton = /*#__PURE__*/_jsx(Button, {
|
|
105
129
|
variant: "ghost",
|
|
106
130
|
label: cancelLabel,
|
|
107
131
|
onClick: handleCancel,
|
|
108
|
-
xstyle: buttonActionStyle
|
|
132
|
+
xstyle: buttonActionStyle,
|
|
133
|
+
...actionTrackingProps,
|
|
109
134
|
// Dialog focuses [data-autofocus] itself after showModal(), because
|
|
110
135
|
// React's autoFocus runs during commit while the dialog is invisible.
|
|
111
136
|
// Cancel is least destructive, so it remains the autofocus target even
|
|
112
137
|
// when small-screen visual order places the destructive action above it.
|
|
113
|
-
,
|
|
114
138
|
"data-autofocus": true
|
|
115
139
|
}, "cancel");
|
|
116
140
|
const actionButton = /*#__PURE__*/_jsx(Button, {
|
|
@@ -118,7 +142,8 @@ export function AlertDialog({
|
|
|
118
142
|
label: actionLabel,
|
|
119
143
|
onClick: onAction,
|
|
120
144
|
isLoading: isActionLoading,
|
|
121
|
-
xstyle: buttonActionStyle
|
|
145
|
+
xstyle: buttonActionStyle,
|
|
146
|
+
...actionTrackingProps
|
|
122
147
|
}, "action");
|
|
123
148
|
return /*#__PURE__*/_jsx(Dialog, {
|
|
124
149
|
...rest,
|
|
@@ -158,11 +183,16 @@ export function AlertDialog({
|
|
|
158
183
|
}),
|
|
159
184
|
footer: /*#__PURE__*/_jsx(LayoutFooter, {
|
|
160
185
|
children: /*#__PURE__*/_jsx(Stack, {
|
|
186
|
+
ref: actionsRef,
|
|
187
|
+
xstyle: isTracking && styles.trackingRow,
|
|
161
188
|
direction: isSmallScreen ? 'vertical' : 'horizontal',
|
|
162
189
|
gap: 2,
|
|
163
190
|
hAlign: isSmallScreen ? 'stretch' : 'end',
|
|
164
191
|
wrap: isSmallScreen ? 'nowrap' : 'wrap',
|
|
165
|
-
children:
|
|
192
|
+
children: /*#__PURE__*/_jsx(PressGroupContext, {
|
|
193
|
+
value: isTracking,
|
|
194
|
+
children: isSmallScreen ? [actionButton, cancelButton] : [cancelButton, actionButton]
|
|
195
|
+
})
|
|
166
196
|
})
|
|
167
197
|
})
|
|
168
198
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BottomSheetPanel.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/BottomSheetPanel.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA+B5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAGL,KAAK,oBAAoB,EAC1B,MAAM,eAAe,CAAC;AAQvB,QAAA,MAAM,cAAc;;;;CAIV,CAAC;AAEX,MAAM,MAAM,iBAAiB,GAAG,MAAM,OAAO,cAAc,CAAC;AAC5D,YAAY,EAAC,oBAAoB,EAAC,CAAC;AA4CnC,eAAO,MAAM,2BAA2B,2DACkB,CAAC;
|
|
1
|
+
{"version":3,"file":"BottomSheetPanel.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/BottomSheetPanel.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA+B5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAGL,KAAK,oBAAoB,EAC1B,MAAM,eAAe,CAAC;AAQvB,QAAA,MAAM,cAAc;;;;CAIV,CAAC;AAEX,MAAM,MAAM,iBAAiB,GAAG,MAAM,OAAO,cAAc,CAAC;AAC5D,YAAY,EAAC,oBAAoB,EAAC,CAAC;AA4CnC,eAAO,MAAM,2BAA2B,2DACkB,CAAC;AA+M3D,MAAM,MAAM,sBAAsB,GAChC,UAAU,GAAG,UAAU,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEjD,MAAM,MAAM,qBAAqB,GAC7B;IAAC,IAAI,EAAE,QAAQ,CAAA;CAAC,GAChB;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,OAAO,CAAA;CAAC,GACjC;IACE,IAAI,EAAE,UAAU,CAAC;IACjB,MAAM,EAAE,SAAS,GAAG,UAAU,GAAG,QAAQ,CAAC;IAC1C,eAAe,EAAE,MAAM,CAAC;CACzB,GACD;IAAC,IAAI,EAAE,SAAS,CAAA;CAAC,CAAC;AAEtB,UAAU,qBAAsB,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC/D,+CAA+C;IAC/C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,KAAK,EAAE,qBAAqB,CAAC;IAC7B;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B;;;;;OAKG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,MAAM,EAAE,iBAAiB,GAAG,MAAM,GAAG,MAAM,CAAC;IAC5C,mEAAmE;IACnE,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,UAAU,CAAC,EAAE,aAAa,CAAC,oBAAoB,CAAC,CAAC;IACjD,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,gFAAgF;IAChF,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,cAAc,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,KAAK,IAAI,CAAC;IAC3D,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,sBAAsB,KAAK,IAAI,CAAC;IACzD,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,sBAAsB,KAAK,IAAI,CAAC;CAC7D;AAyJD,4EAA4E;AAC5E,wBAAgB,gBAAgB,CAAC,EAC/B,GAAG,EACH,KAAK,EACL,eAAe,EACf,MAAM,EACN,KAAK,EACL,QAAQ,EACR,OAAO,EACP,UAAU,EACV,SAAS,EACT,KAAK,EACL,QAAQ,EACR,MAAM,EACN,cAAsB,EACtB,cAAc,EACd,eAAe,EACf,qBAA4B,EAC5B,kBAA0B,EAC1B,SAAS,EACT,cAAc,EACd,eAAe,EACf,aAAa,EACb,gBAAgB,EAChB,GAAG,KAAK,EACT,EAAE,qBAAqB,+BAyZvB;yBAjbe,gBAAgB"}
|
|
@@ -613,7 +613,7 @@ export function BottomSheetPanel({
|
|
|
613
613
|
}),
|
|
614
614
|
children: [/*#__PURE__*/_jsx("div", {
|
|
615
615
|
...{
|
|
616
|
-
className: "x10l6tqk x13vifvy x1o0tod xtijo5x x1vjfegm x78zum5 x6s0dn4 xl56j7k xvpftlf xafqdz2 x1j4r261 x1jm3nie x16khyan x1cpjm7i x1oke5ut x34npju xmwhqxd x1hw15nc"
|
|
616
|
+
className: "x10l6tqk x13vifvy x1o0tod xtijo5x x1vjfegm x78zum5 x6s0dn4 xl56j7k xvpftlf xafqdz2 x1so62im x1j4r261 x1jm3nie x16khyan x1cpjm7i x1oke5ut x34npju xmwhqxd x1hw15nc"
|
|
617
617
|
},
|
|
618
618
|
...handleProps,
|
|
619
619
|
"aria-hidden": "true"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useSheetGestures.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/useSheetGestures.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"useSheetGestures.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/useSheetGestures.ts"],"names":[],"mappings":"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"}
|
|
@@ -462,7 +462,9 @@ export function useSheetGestures({
|
|
|
462
462
|
}
|
|
463
463
|
return;
|
|
464
464
|
}
|
|
465
|
-
|
|
465
|
+
// No measure here: reading the height while the sheet mounts forces a
|
|
466
|
+
// layout in the middle of the open. The observer's first report comes
|
|
467
|
+
// after the browser's own layout, before the first paint.
|
|
466
468
|
const ro = new ResizeObserver(entries => {
|
|
467
469
|
const entry = entries[0];
|
|
468
470
|
if (entry) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAE,SAAS,EAAC,MAAM,gBAAgB,CAAC;AACzD,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"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"}
|
package/dist/Button/Button.js
CHANGED
|
@@ -30,6 +30,7 @@ import { iconBoxSizeStyles } from "../Icon/IconSize.stylex.js";
|
|
|
30
30
|
import { EDGE_COMP_ATTR } from "../Layout/edgeCompensation.stylex.js";
|
|
31
31
|
import { useSize } from "../SizeContext/SizeContext.js";
|
|
32
32
|
import { useButtonGroup } from "../ButtonGroup/ButtonGroupContext.js";
|
|
33
|
+
import { PressGroupContext } from "../hooks/pressGroupContext.js";
|
|
33
34
|
import { useInputGroup } from "../InputGroup/InputGroupContext.js";
|
|
34
35
|
import { InputGroupInternalContext } from "../InputGroup/InputGroupInternalContext.js";
|
|
35
36
|
import { groupStyles as inputGroupStyles, inputGroupItemProps } from "../InputGroup/groupStyles.js";
|
|
@@ -46,6 +47,12 @@ import { isRenderable } from "../utils/isRenderable.js";
|
|
|
46
47
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
47
48
|
registerEnglishFallback(english);
|
|
48
49
|
|
|
50
|
+
/**
|
|
51
|
+
* Written by the press controller or a group's tracker while a press is
|
|
52
|
+
* believed. Typed `string`, so StyleX reads it as a computed key.
|
|
53
|
+
*/
|
|
54
|
+
const PRESSED_ON = '[data-astryx-press="on"]';
|
|
55
|
+
|
|
49
56
|
/**
|
|
50
57
|
* Base button styles
|
|
51
58
|
* Pseudo-classes are nested within properties per StyleX recommendation:
|
|
@@ -82,6 +89,14 @@ const styles = {
|
|
|
82
89
|
k3aq6I: "x3oybdh x8ppqj xom6oz5 x3y5scg",
|
|
83
90
|
$$css: true
|
|
84
91
|
},
|
|
92
|
+
trackedOverlay: {
|
|
93
|
+
kgSjnq: "x1vl4g35",
|
|
94
|
+
$$css: true
|
|
95
|
+
},
|
|
96
|
+
pressableTracked: {
|
|
97
|
+
k3aq6I: "x3oybdh x3y5scg",
|
|
98
|
+
$$css: true
|
|
99
|
+
},
|
|
85
100
|
inactive: {
|
|
86
101
|
kkrTdU: "xt0e3qv",
|
|
87
102
|
kKwaWg: "x18o3ruo",
|
|
@@ -381,6 +396,7 @@ export function Button({
|
|
|
381
396
|
const t = useComponentTranslator();
|
|
382
397
|
const size = useSize(sizeProp, 'md');
|
|
383
398
|
const buttonGroup = useButtonGroup();
|
|
399
|
+
const isGroupTracked = use(PressGroupContext);
|
|
384
400
|
const inputGroup = useInputGroup();
|
|
385
401
|
const [isPending, startTransition] = useTransition();
|
|
386
402
|
// clickAction is normally fire-once (submit/save/pay), so a same-tick
|
|
@@ -497,7 +513,7 @@ export function Button({
|
|
|
497
513
|
} : null;
|
|
498
514
|
|
|
499
515
|
// Shared StyleX props for both button and link rendering
|
|
500
|
-
const sharedStylexProps = focusOutlineProps.focusVisible(styles.base, sizeStyles[size], isIconOnly && styles.iconOnly, interactionOverlayStyles.backgroundImage, buttonDisabled && styles.inactive, isTrueDisabled && styles.disabled, useAriaDisabled && styles.ariaDisabled, renderAsLink && styles.link, !buttonGroup && styles.pressable, buttonGroup && (buttonGroup.orientation === 'horizontal' ? groupStyles.horizontal : groupStyles.vertical), inputGroup != null && buttonGroup == null && inputGroupStyles.buttonAddon, buttonGroup && (variant === 'primary' || variant === 'destructive') && (buttonGroup.orientation === 'horizontal' ? groupStyles.onSolidHorizontal : groupStyles.onSolidVertical),
|
|
516
|
+
const sharedStylexProps = focusOutlineProps.focusVisible(styles.base, sizeStyles[size], isIconOnly && styles.iconOnly, interactionOverlayStyles.backgroundImage, isGroupTracked && styles.trackedOverlay, buttonDisabled && styles.inactive, isTrueDisabled && styles.disabled, useAriaDisabled && styles.ariaDisabled, renderAsLink && styles.link, !buttonGroup && (isGroupTracked ? styles.pressableTracked : styles.pressable), buttonGroup && (buttonGroup.orientation === 'horizontal' ? groupStyles.horizontal : groupStyles.vertical), inputGroup != null && buttonGroup == null && inputGroupStyles.buttonAddon, buttonGroup && (variant === 'primary' || variant === 'destructive') && (buttonGroup.orientation === 'horizontal' ? groupStyles.onSolidHorizontal : groupStyles.onSolidVertical),
|
|
501
517
|
// Standalone floating buttons only — a grouped button's elevation is owned
|
|
502
518
|
// by the ButtonGroup so the shared surface lifts as one unit.
|
|
503
519
|
!buttonGroup && elevationStyles[elevation], width != null && dynamicStyles.width(width),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxInput.d.ts","sourceRoot":"","sources":["../../src/CheckboxInput/CheckboxInput.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAML,KAAK,WAAW,EAChB,KAAK,UAAU,EACf,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAS3C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAG9C,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AACtC,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"CheckboxInput.d.ts","sourceRoot":"","sources":["../../src/CheckboxInput/CheckboxInput.tsx"],"names":[],"mappings":"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"}
|
|
@@ -27,6 +27,8 @@ import { mergeProps } from "../utils/mergeProps.js";
|
|
|
27
27
|
import { rtlStyles } from "../utils/rtlStyles.js";
|
|
28
28
|
import "../Indicator/indicator.markers.stylex.js";
|
|
29
29
|
import { indicatorScope } from "../Indicator/indicator.markers.stylex.js";
|
|
30
|
+
import "../internal/indicatorPress.stylex.js";
|
|
31
|
+
import { indicatorPressScope } from "../internal/indicatorPress.stylex.js";
|
|
30
32
|
import { interactionOverlayStyles } from "../utils/interactionOverlay.stylex.js";
|
|
31
33
|
import { useIndicatorFocusRing } from "../hooks/useIndicatorFocusRing.js";
|
|
32
34
|
import { useBusyAnnouncement } from "../hooks/useBusyAnnouncement.js";
|
|
@@ -40,6 +42,11 @@ import english from "../i18n/generated-english/CheckboxInput/CheckboxInput.gener
|
|
|
40
42
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
41
43
|
registerEnglishFallback(english);
|
|
42
44
|
|
|
45
|
+
/** Written by the touch press controller while the row is pressed. */
|
|
46
|
+
const PRESSED_ON = '[data-astryx-press="on"]';
|
|
47
|
+
/** Written by the touch press controller for the press's release. */
|
|
48
|
+
const PRESSED_FADING = '[data-astryx-press="fading"]';
|
|
49
|
+
|
|
43
50
|
// The touch press's paint, declared by the shared overlay styles on the
|
|
44
51
|
// element the controller writes to (`pressedAlpha`) at the press's strength,
|
|
45
52
|
// 1 while on and 1 → 0 over the release, and inherited resolved by the layer
|
|
@@ -56,6 +63,10 @@ const styles = {
|
|
|
56
63
|
kOIVth: "xxhr3t",
|
|
57
64
|
$$css: true
|
|
58
65
|
},
|
|
66
|
+
indicatorPressImage: {
|
|
67
|
+
"--_indicator-press-image": "x1dueop1 x189o2zt",
|
|
68
|
+
$$css: true
|
|
69
|
+
},
|
|
59
70
|
checkboxWrapper: {
|
|
60
71
|
kVAEAm: "x1n2onr6",
|
|
61
72
|
k1xSpc: "x78zum5",
|
|
@@ -66,7 +77,7 @@ const styles = {
|
|
|
66
77
|
$$css: true
|
|
67
78
|
},
|
|
68
79
|
indicatorPressOverlay: {
|
|
69
|
-
k5JduY: "x1s928wv",
|
|
80
|
+
k5JduY: "x1s928wv xf7ekc6",
|
|
70
81
|
kwXMNM: "x1j6awrg",
|
|
71
82
|
kv0HGH: "xarstr8",
|
|
72
83
|
kUfP38: "xtb6wbx",
|
|
@@ -259,7 +270,7 @@ export function CheckboxInput({
|
|
|
259
270
|
...stylex.props(styles.container, isLabelHidden && styles.containerLabelHidden,
|
|
260
271
|
// Hover and focus reach the checkbox visual through this ancestor
|
|
261
272
|
// marker rather than props, so the whole row drives it.
|
|
262
|
-
!isDisabled && indicatorScope,
|
|
273
|
+
!isDisabled && indicatorScope, !isDisabled && styles.indicatorPressImage,
|
|
263
274
|
// The touch press's strength and release live on the row the
|
|
264
275
|
// controller writes to; the layer over the checkbox box inherits
|
|
265
276
|
// and paints it.
|
|
@@ -528,11 +528,11 @@ export function ContextMenu({
|
|
|
528
528
|
onTouchMoveProp?.(event);
|
|
529
529
|
}, [handleLongPressTouchMove, onTouchMoveProp]);
|
|
530
530
|
const handleTriggerTouchEnd = useCallback(event => {
|
|
531
|
-
handleLongPressTouchEnd();
|
|
531
|
+
handleLongPressTouchEnd(event);
|
|
532
532
|
onTouchEndProp?.(event);
|
|
533
533
|
}, [handleLongPressTouchEnd, onTouchEndProp]);
|
|
534
534
|
const handleTriggerTouchCancel = useCallback(event => {
|
|
535
|
-
handleLongPressTouchCancel();
|
|
535
|
+
handleLongPressTouchCancel(event);
|
|
536
536
|
onTouchCancelProp?.(event);
|
|
537
537
|
}, [handleLongPressTouchCancel, onTouchCancelProp]);
|
|
538
538
|
const popoverXstyle = menuWidth ? styles.popoverCustomWidth(menuWidth) : styles.popover;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAEH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA6B5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAMhD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAEH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA6B5C,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,sCAwZb;yBAxae,MAAM"}
|
package/dist/Dialog/Dialog.js
CHANGED
|
@@ -55,7 +55,7 @@ import { DialogContext } from "./DialogContext.js";
|
|
|
55
55
|
import { themeProps } from "../utils/themeProps.js";
|
|
56
56
|
import { focusOutlineProps } from "../utils/focusOutline.stylex.js";
|
|
57
57
|
import { useInteractionModalityTracking } from "../utils/interactionModality.js";
|
|
58
|
-
import { focusForLastInput,
|
|
58
|
+
import { focusForLastInput, prepareFocusReturnOnRemoval } from "../utils/focusReturn.js";
|
|
59
59
|
import { ModalAnnounceProvider } from "../hooks/ModalAnnounceProvider.js";
|
|
60
60
|
import { useMergedRefs } from "../hooks/useMergedRefs.js";
|
|
61
61
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
@@ -461,39 +461,15 @@ export function Dialog({
|
|
|
461
461
|
}, [isOpen, isInline]);
|
|
462
462
|
|
|
463
463
|
// A dialog that unmounts while open (rendered only while open, or removed
|
|
464
|
-
// with the rest of a view) never runs the close branch above
|
|
465
|
-
//
|
|
466
|
-
// it, or dropped to the body by the removal, goes back to the opener.
|
|
464
|
+
// with the rest of a view) never runs the close branch above. Focus the
|
|
465
|
+
// removal lost goes back to the opener.
|
|
467
466
|
useEffect(() => {
|
|
468
|
-
|
|
467
|
+
const dialog = dialogRef.current;
|
|
468
|
+
if (isInline || dialog == null) {
|
|
469
469
|
return;
|
|
470
470
|
}
|
|
471
|
-
const
|
|
472
|
-
|
|
473
|
-
// element can no longer be found once the dialog is gone.
|
|
474
|
-
const host = dialog?.ownerDocument.defaultView?.frameElement ?? null;
|
|
475
|
-
return () => {
|
|
476
|
-
const trigger = triggerElementRef.current;
|
|
477
|
-
if (dialog == null || trigger == null) {
|
|
478
|
-
return;
|
|
479
|
-
}
|
|
480
|
-
// Checked once the commit has finished: StrictMode's simulated unmount
|
|
481
|
-
// leaves the dialog in the document, and only a real removal returns
|
|
482
|
-
// focus.
|
|
483
|
-
queueMicrotask(() => {
|
|
484
|
-
if (dialog.isConnected || !trigger.isConnected) {
|
|
485
|
-
return;
|
|
486
|
-
}
|
|
487
|
-
// isFocusLost reads the dialog's own document. For a dialog in an
|
|
488
|
-
// iframe, the document that hosts the frame must also have lost focus
|
|
489
|
-
// or keep it on that frame, wherever the opener is: a control the
|
|
490
|
-
// user pressed outside the frame to remove the dialog, or the frame
|
|
491
|
-
// itself, keeps its focus.
|
|
492
|
-
if (isFocusLost(dialog) && (host == null || isFocusLost(host))) {
|
|
493
|
-
focusForLastInput(trigger);
|
|
494
|
-
}
|
|
495
|
-
});
|
|
496
|
-
};
|
|
471
|
+
const returnFocusOnRemoval = prepareFocusReturnOnRemoval(dialog);
|
|
472
|
+
return () => returnFocusOnRemoval(triggerElementRef.current);
|
|
497
473
|
}, [isInline]);
|
|
498
474
|
|
|
499
475
|
// Host app-global surfaces (toasts) inside this modal while it is open, so
|
|
@@ -47,9 +47,10 @@ export interface HoverCardProps extends Pick<BaseProps, 'xstyle' | 'className' |
|
|
|
47
47
|
hideDelay?: number;
|
|
48
48
|
/**
|
|
49
49
|
* When to trigger on focus:
|
|
50
|
-
* - `auto`:
|
|
51
|
-
*
|
|
52
|
-
* - `
|
|
50
|
+
* - `auto`: focus on the trigger itself, or within a trigger that is
|
|
51
|
+
* focusable when focus arrives
|
|
52
|
+
* - `always`: focus on the trigger or anything inside it
|
|
53
|
+
* - `never`: never on focus (for composite widgets)
|
|
53
54
|
*
|
|
54
55
|
* @default 'auto'
|
|
55
56
|
*/
|
|
@@ -87,7 +88,8 @@ export interface HoverCardProps extends Pick<BaseProps, 'xstyle' | 'className' |
|
|
|
87
88
|
/**
|
|
88
89
|
* Whether to show hover indication (dashed underline) on a text trigger.
|
|
89
90
|
* An element trigger keeps its own styling, so this has no effect on it.
|
|
90
|
-
* - `'auto'`: Show when children is
|
|
91
|
+
* - `'auto'`: Show when children is text: strings and numbers, such as
|
|
92
|
+
* `Edited {when}`, with holes such as `false` and `null` ignored
|
|
91
93
|
* - `true`: Show on a text trigger
|
|
92
94
|
* - `false`: Never show
|
|
93
95
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HoverCard.d.ts","sourceRoot":"","sources":["../../src/HoverCard/HoverCard.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAIL,KAAK,YAAY,EACjB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"HoverCard.d.ts","sourceRoot":"","sources":["../../src/HoverCard/HoverCard.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAIL,KAAK,YAAY,EACjB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAKf,OAAO,EAEL,KAAK,qBAAqB,EAC1B,KAAK,qBAAqB,EAC3B,MAAM,gBAAgB,CAAC;AACxB,OAAO,KAAK,EAAC,cAAc,EAAE,cAAc,EAAC,MAAM,mBAAmB,CAAC;AACtE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,YAAY,EACV,qBAAqB,EACrB,qBAAqB,GACtB,MAAM,gBAAgB,CAAC;AA6ExB,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,SAAS,EACT,QAAQ,GAAG,WAAW,GAAG,OAAO,CACjC;IACC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,OAAO,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,qBAAqB,CAAC;IAErC;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,qBAAqB,CAAC;IAErC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;;;;;;;;OASG;IACH,kBAAkB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAEtC;;;;;;;;;;;;OAYG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAoCD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,OAAO,EACP,SAAmB,EACnB,SAAoB,EACpB,KAAW,EACX,SAAe,EACf,YAAqB,EACrB,YAAqB,EACrB,SAAgB,EAChB,KAAK,EACL,YAAY,EACZ,kBAA2B,EAC3B,MAAM,EACN,aAAa,EACb,MAAM,EACN,SAAS,EACT,KAAK,GACN,EAAE,cAAc,GAAG,YAAY,CA2M/B;yBA7Ne,SAAS"}
|
|
@@ -16,6 +16,7 @@
|
|
|
16
16
|
* - /packages/cli/assets/templates/blocks/components/HoverCard/ (showcase blocks)
|
|
17
17
|
*/
|
|
18
18
|
import { useCallback, useRef, useState } from 'react';
|
|
19
|
+
import { isRenderable } from "../utils/isRenderable.js";
|
|
19
20
|
import { observeMutations } from "../utils/sharedMutationObserver.js";
|
|
20
21
|
import { useIsomorphicLayoutEffect } from "../hooks/useIsomorphicLayoutEffect.js";
|
|
21
22
|
import * as stylex from '@stylexjs/stylex';
|
|
@@ -66,7 +67,26 @@ function supportsAriaExpanded(el) {
|
|
|
66
67
|
* Check if children are text-only (no React elements)
|
|
67
68
|
*/
|
|
68
69
|
function isTextOnly(children) {
|
|
69
|
-
|
|
70
|
+
if (typeof children === 'string' || typeof children === 'number') {
|
|
71
|
+
return true;
|
|
72
|
+
}
|
|
73
|
+
// Text written around an expression, such as `Edited {when}`, reaches React
|
|
74
|
+
// as several strings. Holes that render nothing do not change that; one
|
|
75
|
+
// element does.
|
|
76
|
+
if (!Array.isArray(children)) {
|
|
77
|
+
return false;
|
|
78
|
+
}
|
|
79
|
+
let hasText = false;
|
|
80
|
+
for (const child of children.flat(Infinity)) {
|
|
81
|
+
if (!isRenderable(child)) {
|
|
82
|
+
continue;
|
|
83
|
+
}
|
|
84
|
+
if (typeof child !== 'string' && typeof child !== 'number') {
|
|
85
|
+
return false;
|
|
86
|
+
}
|
|
87
|
+
hasText = true;
|
|
88
|
+
}
|
|
89
|
+
return hasText;
|
|
70
90
|
}
|
|
71
91
|
|
|
72
92
|
/**
|
|
@@ -11,7 +11,7 @@ import { type ReactNode, type RefCallback } from 'react';
|
|
|
11
11
|
import { type ContextRenderProps, type LayerAlignment, type LayerPlacement } from '../Layer/useLayer.js';
|
|
12
12
|
import { type LayerTouchTrigger } from '../Layer/useTouchTrigger.js';
|
|
13
13
|
/**
|
|
14
|
-
*
|
|
14
|
+
* When focus on the trigger opens the hover card
|
|
15
15
|
*/
|
|
16
16
|
export type HoverCardFocusTrigger = 'auto' | 'always' | 'never';
|
|
17
17
|
/**
|
|
@@ -41,9 +41,10 @@ export interface HoverCardOptions {
|
|
|
41
41
|
hideDelay?: number;
|
|
42
42
|
/**
|
|
43
43
|
* When to trigger on focus:
|
|
44
|
-
* - `auto`:
|
|
45
|
-
*
|
|
46
|
-
* - `
|
|
44
|
+
* - `auto`: focus on the trigger itself, or within a trigger that is
|
|
45
|
+
* focusable when focus arrives
|
|
46
|
+
* - `always`: focus on the trigger or anything inside it
|
|
47
|
+
* - `never`: never on focus (for composite widgets)
|
|
47
48
|
*
|
|
48
49
|
* @default 'auto'
|
|
49
50
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useHoverCard.d.ts","sourceRoot":"","sources":["../../src/HoverCard/useHoverCard.tsx"],"names":[],"mappings":"AAIA;;;;;;;;GAQG;AAEH,OAAO,
|
|
1
|
+
{"version":3,"file":"useHoverCard.d.ts","sourceRoot":"","sources":["../../src/HoverCard/useHoverCard.tsx"],"names":[],"mappings":"AAIA;;;;;;;;GAQG;AAEH,OAAO,EAKL,KAAK,SAAS,EACd,KAAK,WAAW,EACjB,MAAM,OAAO,CAAC;AAGf,OAAO,EAEL,KAAK,kBAAkB,EACvB,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAEL,KAAK,iBAAiB,EACvB,MAAM,0BAA0B,CAAC;AA8BlC;;GAEG;AACH,MAAM,MAAM,qBAAqB,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEhE;;GAEG;AACH,MAAM,MAAM,qBAAqB,GAAG,iBAAiB,CAAC;AAEtD,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,qBAAqB,CAAC;IAErC;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,qBAAqB,CAAC;IAErC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;;;;;;;;OAWG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,eAAe;IAC9B;;;OAGG;IACH,GAAG,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAE9B;;;OAGG;IACH,WAAW,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAEtC;;;;OAIG;IACH,cAAc,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAEzC;;;OAGG;IACH,QAAQ,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;;;;;OAMG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;;;;OAOG;IACH,eAAe,EAAE,CACf,QAAQ,EAAE,SAAS,EACnB,KAAK,CAAC,EAAE,IAAI,CAAC,kBAAkB,EAAE,aAAa,CAAC,KAC5C,SAAS,CAAC;IAEf;;OAEG;IACH,IAAI,EAAE,MAAM,IAAI,CAAC;IAEjB;;OAEG;IACH,IAAI,EAAE,MAAM,IAAI,CAAC;CAClB;AAED;;;;;;;;;;;;;;;;GAgBG;AAEH,wBAAgB,YAAY,CAAC,OAAO,GAAE,gBAAqB,GAAG,eAAe,CA4d5E"}
|
|
@@ -11,7 +11,8 @@
|
|
|
11
11
|
* SYNC: When modified, update:
|
|
12
12
|
* - /packages/core/src/HoverCard/index.ts
|
|
13
13
|
*/
|
|
14
|
-
import { useCallback, useEffect, useRef } from 'react';
|
|
14
|
+
import { useCallback, useEffect, useRef, useState } from 'react';
|
|
15
|
+
import { createTriggerFocusGate } from "../utils/triggerFocus.js";
|
|
15
16
|
import * as stylex from '@stylexjs/stylex';
|
|
16
17
|
import { useLayer } from "../Layer/useLayer.js";
|
|
17
18
|
import { useTouchTrigger } from "../Layer/useTouchTrigger.js";
|
|
@@ -33,35 +34,13 @@ const styles = {
|
|
|
33
34
|
};
|
|
34
35
|
|
|
35
36
|
/**
|
|
36
|
-
*
|
|
37
|
+
* When focus on the trigger opens the hover card
|
|
37
38
|
*/
|
|
38
39
|
|
|
39
40
|
/**
|
|
40
41
|
* Touch trigger behavior for hover cards
|
|
41
42
|
*/
|
|
42
43
|
|
|
43
|
-
/**
|
|
44
|
-
* Check if an element is naturally focusable
|
|
45
|
-
*/
|
|
46
|
-
function isFocusable(element) {
|
|
47
|
-
// Elements with explicit tabindex
|
|
48
|
-
if (element.hasAttribute('tabindex')) {
|
|
49
|
-
return element.tabIndex >= 0;
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
// Naturally focusable elements
|
|
53
|
-
const focusableTags = ['A', 'BUTTON', 'INPUT', 'SELECT', 'TEXTAREA'];
|
|
54
|
-
if (focusableTags.includes(element.tagName)) {
|
|
55
|
-
return !element.disabled;
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
// Elements with contenteditable
|
|
59
|
-
if (element.isContentEditable) {
|
|
60
|
-
return true;
|
|
61
|
-
}
|
|
62
|
-
return false;
|
|
63
|
-
}
|
|
64
|
-
|
|
65
44
|
/**
|
|
66
45
|
* Hook for hover card behavior with hover/focus triggers.
|
|
67
46
|
*
|
|
@@ -220,8 +199,12 @@ export function useHoverCard(options = {}) {
|
|
|
220
199
|
const handlePointerDown = useCallback(event => {
|
|
221
200
|
handleTouchPointerDown(event);
|
|
222
201
|
}, [handleTouchPointerDown]);
|
|
223
|
-
|
|
224
|
-
|
|
202
|
+
|
|
203
|
+
// Under `auto`, whether focus counts is decided when it arrives, and a
|
|
204
|
+
// focus that counted still hides on blur (utils/triggerFocus.ts).
|
|
205
|
+
const [focusGate] = useState(createTriggerFocusGate);
|
|
206
|
+
const handleFocusIn = useCallback(e => {
|
|
207
|
+
if (!focusGate.focusIn(e, focusTrigger) || !isEnabled) {
|
|
225
208
|
return;
|
|
226
209
|
}
|
|
227
210
|
// A tap focuses the trigger it activates. Opening on that focus would
|
|
@@ -237,8 +220,11 @@ export function useHoverCard(options = {}) {
|
|
|
237
220
|
}
|
|
238
221
|
clearTimeouts();
|
|
239
222
|
showLayer();
|
|
240
|
-
}, [isEnabled, isTouchInteraction, clearTimeouts, showLayer]);
|
|
223
|
+
}, [focusGate, focusTrigger, isEnabled, isTouchInteraction, clearTimeouts, showLayer]);
|
|
241
224
|
const handleFocusOut = useCallback(e => {
|
|
225
|
+
if (!focusGate.focusOut(e, focusTrigger)) {
|
|
226
|
+
return;
|
|
227
|
+
}
|
|
242
228
|
// Check if focus is moving to the hover card content
|
|
243
229
|
const relatedTarget = e.relatedTarget;
|
|
244
230
|
const popoverElement = document.getElementById(layerId);
|
|
@@ -247,7 +233,7 @@ export function useHoverCard(options = {}) {
|
|
|
247
233
|
return;
|
|
248
234
|
}
|
|
249
235
|
scheduleHide();
|
|
250
|
-
}, [layerId, scheduleHide]);
|
|
236
|
+
}, [focusGate, focusTrigger, layerId, scheduleHide]);
|
|
251
237
|
|
|
252
238
|
// Escape dismissal (WCAG 1.4.13) goes through the shared layer stack: a
|
|
253
239
|
// visible card is the top-most layer, so it takes the press and consumes it.
|
|
@@ -329,9 +315,9 @@ export function useHoverCard(options = {}) {
|
|
|
329
315
|
el.addEventListener('mouseleave', handleMouseLeave);
|
|
330
316
|
el.addEventListener('pointerdown', handlePointerDown);
|
|
331
317
|
|
|
332
|
-
//
|
|
333
|
-
|
|
334
|
-
if (
|
|
318
|
+
// Focus listeners unless focus never opens the card; `auto` decides
|
|
319
|
+
// per event (utils/triggerFocus.ts).
|
|
320
|
+
if (focusTrigger !== 'never') {
|
|
335
321
|
el.addEventListener('focusin', handleFocusIn);
|
|
336
322
|
el.addEventListener('focusout', handleFocusOut);
|
|
337
323
|
}
|
package/dist/Icon/Icon.d.ts
CHANGED
|
@@ -105,7 +105,11 @@ export type IconType = ComponentType<SVGProps<SVGSVGElement>>;
|
|
|
105
105
|
* Extends SVGProps to allow passing additional SVG attributes (used when icon is a component).
|
|
106
106
|
*/
|
|
107
107
|
export interface IconProps extends Omit<SVGProps<SVGSVGElement>, 'ref' | 'color'> {
|
|
108
|
-
/**
|
|
108
|
+
/**
|
|
109
|
+
* Ref to the rendered SVG element when `icon` is an icon component. A
|
|
110
|
+
* semantic or namespaced name renders inside an internal wrapper, and the
|
|
111
|
+
* ref is not attached.
|
|
112
|
+
*/
|
|
109
113
|
ref?: React.Ref<SVGSVGElement>;
|
|
110
114
|
/**
|
|
111
115
|
* Icon to render. Can be:
|
package/dist/Icon/Icon.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../src/Icon/Icon.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,aAAa,EAAE,KAAK,QAAQ,EAAC,MAAM,OAAO,CAAC;AAC/D,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAC3C,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AAInD,OAAO,KAAK,EAAC,QAAQ,EAAE,kBAAkB,EAAC,MAAM,sBAAsB,CAAC;AACvE,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,SAAS,CAAC;AAIzC,OAAO,EAAiB,KAAK,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAEhE,YAAY,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAiDhD,QAAA,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8Df,CAAC;AAMH,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,WAAW,CAAC;AAEjD;;;GAGG;AACH,MAAM,MAAM,QAAQ,GAAG,aAAa,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC;AAE9D;;;GAGG;AACH,MAAM,WAAW,SAAU,SAAQ,IAAI,CACrC,QAAQ,CAAC,aAAa,CAAC,EACvB,KAAK,GAAG,OAAO,CAChB;IACC
|
|
1
|
+
{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../src/Icon/Icon.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,aAAa,EAAE,KAAK,QAAQ,EAAC,MAAM,OAAO,CAAC;AAC/D,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAC3C,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AAInD,OAAO,KAAK,EAAC,QAAQ,EAAE,kBAAkB,EAAC,MAAM,sBAAsB,CAAC;AACvE,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,SAAS,CAAC;AAIzC,OAAO,EAAiB,KAAK,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAEhE,YAAY,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAiDhD,QAAA,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8Df,CAAC;AAMH,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,WAAW,CAAC;AAEjD;;;GAGG;AACH,MAAM,MAAM,QAAQ,GAAG,aAAa,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC;AAE9D;;;GAGG;AACH,MAAM,WAAW,SAAU,SAAQ,IAAI,CACrC,QAAQ,CAAC,aAAa,CAAC,EACvB,KAAK,GAAG,OAAO,CAChB;IACC;;;;OAIG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IAC/B;;;;;;OAMG;IACH,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,kBAAkB,CAAC;IAC/C;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;;;;;;;;OAYG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;;;;;;;;;;;;;;OAeG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA4BG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;;;;OAWG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;CACvB;AA6BD;;;;;;;GAOG;AACH,wBAAgB,IAAI,CAAC,EACnB,IAAI,EACJ,KAAiB,EACjB,IAAI,EAAE,QAAQ,EACd,OAAO,EACP,KAAK,EACL,GAAG,EACH,SAAS,EACT,KAAK,EACL,MAAM,EACN,GAAG,KAAK,EACT,EAAE,SAAS,qBAoDX;yBA/De,IAAI;;;AA2IpB;;;;;;GAMG;AACH,wBAAgB,cAAc,CAC5B,IAAI,EAAE,KAAK,CAAC,SAAS,GAAG,QAAQ,EAChC,KAAK,CAAC,EAAE;IAAC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAA;CAAC,GAC3C,KAAK,CAAC,SAAS,CAYjB"}
|