@astryxdesign/core 0.7.6-canary.6224efd → 0.7.6-canary.66c0d38
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/BottomSheet/BottomSheet.d.ts.map +1 -1
- package/dist/BottomSheet/BottomSheet.js +6 -2
- package/dist/Breadcrumbs/BreadcrumbItem.js +4 -2
- package/dist/Chat/ChatComposer.d.ts.map +1 -1
- package/dist/Chat/ChatComposer.js +10 -5
- package/dist/Chat/ChatPastedTextToken.d.ts.map +1 -1
- package/dist/Chat/ChatPastedTextToken.js +15 -4
- package/dist/CheckboxList/CheckboxList.d.ts.map +1 -1
- package/dist/CheckboxList/CheckboxList.js +5 -2
- package/dist/CheckboxList/CheckboxListContext.d.ts +8 -0
- package/dist/CheckboxList/CheckboxListContext.d.ts.map +1 -1
- package/dist/CheckboxList/CheckboxListItem.d.ts.map +1 -1
- package/dist/CheckboxList/CheckboxListItem.js +5 -2
- package/dist/CommandPalette/CommandPaletteInput.d.ts.map +1 -1
- package/dist/CommandPalette/CommandPaletteInput.js +8 -5
- package/dist/Dialog/Dialog.d.ts.map +1 -1
- package/dist/Dialog/Dialog.js +10 -15
- package/dist/DropdownMenu/DropdownMenu.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenu.js +19 -8
- package/dist/DropdownMenu/DropdownMenuSubMenu.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenuSubMenu.js +1 -1
- package/dist/DropdownMenu/MenuBottomSheetActionList.d.ts.map +1 -1
- package/dist/DropdownMenu/MenuBottomSheetActionList.js +9 -3
- package/dist/Field/FieldLabel.d.ts.map +1 -1
- package/dist/Field/FieldLabel.js +5 -13
- package/dist/Field/PanelSearchInput.d.ts.map +1 -1
- package/dist/Field/PanelSearchInput.js +10 -5
- package/dist/Item/ItemSwipeLayer.d.ts.map +1 -1
- package/dist/Item/ItemSwipeLayer.js +8 -2
- package/dist/Layer/useTouchTrigger.d.ts +11 -2
- package/dist/Layer/useTouchTrigger.d.ts.map +1 -1
- package/dist/Layer/useTouchTrigger.js +24 -4
- package/dist/MultiSelector/MultiSelector.d.ts.map +1 -1
- package/dist/MultiSelector/MultiSelector.js +15 -14
- package/dist/RadioList/RadioList.d.ts.map +1 -1
- package/dist/RadioList/RadioList.js +7 -2
- package/dist/RadioList/RadioListItem.d.ts.map +1 -1
- package/dist/RadioList/RadioListItem.js +8 -2
- package/dist/RadioList/RadioListReasonContext.d.ts +2 -0
- package/dist/RadioList/RadioListReasonContext.d.ts.map +1 -0
- package/dist/RadioList/RadioListReasonContext.js +22 -0
- package/dist/SegmentedControl/SegmentedControl.d.ts.map +1 -1
- package/dist/SegmentedControl/SegmentedControl.js +22 -5
- package/dist/SegmentedControl/SegmentedControlContext.d.ts +6 -0
- package/dist/SegmentedControl/SegmentedControlContext.d.ts.map +1 -1
- package/dist/SegmentedControl/SegmentedControlItem.d.ts +1 -1
- package/dist/SegmentedControl/SegmentedControlItem.d.ts.map +1 -1
- package/dist/SegmentedControl/SegmentedControlItem.js +16 -3
- package/dist/Selector/Selector.d.ts.map +1 -1
- package/dist/Selector/Selector.js +4 -1
- package/dist/Selector/useSelectorPresentation.d.ts +7 -1
- package/dist/Selector/useSelectorPresentation.d.ts.map +1 -1
- package/dist/Selector/useSelectorPresentation.js +2 -1
- package/dist/Slider/Slider.d.ts.map +1 -1
- package/dist/Slider/Slider.js +10 -7
- package/dist/Tokenizer/Tokenizer.d.ts.map +1 -1
- package/dist/Tokenizer/Tokenizer.js +6 -2
- package/dist/Typeahead/BaseTypeahead.d.ts +4 -1
- package/dist/Typeahead/BaseTypeahead.d.ts.map +1 -1
- package/dist/Typeahead/BaseTypeahead.js +253 -41
- package/dist/Typeahead/index.d.ts +1 -1
- package/dist/Typeahead/index.d.ts.map +1 -1
- package/dist/Typeahead/types.d.ts +26 -3
- package/dist/Typeahead/types.d.ts.map +1 -1
- package/dist/hooks/useFocusReturnVisibility.d.ts +8 -1
- package/dist/hooks/useFocusReturnVisibility.d.ts.map +1 -1
- package/dist/hooks/useFocusReturnVisibility.js +14 -8
- package/dist/hooks/useListFocus.d.ts +19 -0
- package/dist/hooks/useListFocus.d.ts.map +1 -1
- package/dist/hooks/useListFocus.js +26 -1
- package/dist/hooks/useMenuPress.js +3 -3
- package/dist/privateAttributes/segmentDisabled.stylex.d.ts +5 -0
- package/dist/privateAttributes/segmentDisabled.stylex.d.ts.map +1 -0
- package/dist/privateAttributes/segmentDisabled.stylex.js +28 -0
- package/dist/utils/focusReturn.d.ts +5 -3
- package/dist/utils/focusReturn.d.ts.map +1 -1
- package/dist/utils/focusReturn.js +6 -4
- package/dist/utils/interactionModality.d.ts +78 -7
- package/dist/utils/interactionModality.d.ts.map +1 -1
- package/dist/utils/interactionModality.js +125 -42
- package/package.json +5 -4
- package/src/BottomSheet/BottomSheet.tsx +4 -2
- package/src/Breadcrumbs/BreadcrumbItem.tsx +2 -1
- package/src/Chat/ChatComposer.tsx +7 -10
- package/src/Chat/ChatPastedTextToken.tsx +14 -4
- package/src/CheckboxList/CheckboxList.tsx +7 -1
- package/src/CheckboxList/CheckboxListContext.tsx +8 -0
- package/src/CheckboxList/CheckboxListItem.tsx +8 -2
- package/src/CommandPalette/CommandPaletteInput.tsx +5 -8
- package/src/Dialog/Dialog.tsx +9 -25
- package/src/DropdownMenu/DropdownMenu.tsx +24 -9
- package/src/DropdownMenu/DropdownMenuSubMenu.tsx +3 -1
- package/src/DropdownMenu/MenuBottomSheetActionList.tsx +6 -3
- package/src/Field/FieldLabel.tsx +4 -22
- package/src/Field/PanelSearchInput.tsx +7 -8
- package/src/Item/ItemSwipeLayer.tsx +8 -1
- package/src/Layer/useTouchTrigger.ts +38 -9
- package/src/MultiSelector/MultiSelector.tsx +36 -29
- package/src/RadioList/RadioList.tsx +13 -2
- package/src/RadioList/RadioListItem.tsx +9 -1
- package/src/RadioList/RadioListReasonContext.ts +25 -0
- package/src/SegmentedControl/SegmentedControl.spec.md +36 -39
- package/src/SegmentedControl/SegmentedControl.tsx +43 -8
- package/src/SegmentedControl/SegmentedControlContext.ts +6 -0
- package/src/SegmentedControl/SegmentedControlItem.spec.md +1 -1
- package/src/SegmentedControl/SegmentedControlItem.tsx +12 -1
- package/src/Selector/Selector.tsx +4 -0
- package/src/Selector/useSelectorPresentation.ts +8 -1
- package/src/Slider/Slider.tsx +7 -10
- package/src/Tokenizer/Tokenizer.doc.mjs +12 -8
- package/src/Tokenizer/Tokenizer.tsx +15 -3
- package/src/Typeahead/BaseTypeahead.doc.mjs +7 -4
- package/src/Typeahead/BaseTypeahead.tsx +296 -38
- package/src/Typeahead/Typeahead.doc.mjs +21 -4
- package/src/Typeahead/TypeaheadItem.doc.mjs +6 -3
- package/src/Typeahead/index.ts +1 -1
- package/src/Typeahead/types.ts +27 -3
- package/src/hooks/useFocusReturnVisibility.ts +15 -12
- package/src/hooks/useListFocus.ts +38 -1
- package/src/hooks/useMenuPress.ts +3 -3
- package/src/privateAttributes/segmentDisabled.stylex.ts +28 -0
- package/src/utils/focusReturn.ts +6 -4
- package/src/utils/interactionModality.ts +165 -44
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/BottomSheet.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyEG;AAEH,OAAO,EAOL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,WAAW,CAAC;AAC7C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/BottomSheet.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyEG;AAEH,OAAO,EAOL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,WAAW,CAAC;AAC7C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAuDhD,YAAY,EAAC,iBAAiB,EAAE,oBAAoB,EAAC,MAAM,oBAAoB,CAAC;AAChF,OAAO,KAAK,EAAC,iBAAiB,EAAE,oBAAoB,EAAC,MAAM,oBAAoB,CAAC;AAsJhF,UAAU,sBAAuB,SAAQ,SAAS,CAAC,cAAc,CAAC;IAChE,qDAAqD;IACrD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAC;IAEd,0EAA0E;IAC1E,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB,wGAAwG;IACxG,MAAM,CAAC,EAAE,iBAAiB,GAAG,MAAM,GAAG,MAAM,CAAC;IAE7C;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,aAAa,CAAC,oBAAoB,CAAC,CAAC;IAEjD;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB;AAED,UAAU,0BAA2B,SAAQ,sBAAsB;IACjE,MAAM,EAAE,OAAO,CAAC;IAChB,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC9C,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB;AAED,UAAU,wBAAyB,SAAQ,sBAAsB;IAC/D;;;;OAIG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC;CAClB;AAED,MAAM,MAAM,gBAAgB,GAC1B,0BAA0B,GAAG,wBAAwB,CAAC;AAo0BxD;;;GAGG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,+BA6BlD;yBA7Be,WAAW"}
|
|
@@ -82,6 +82,7 @@ import "../theme/tokens.stylex.js";
|
|
|
82
82
|
import { colorVars, durationVars, easeVars, spacingVars } from "../theme/tokens.stylex.js";
|
|
83
83
|
import { useDevWarning } from "../hooks/useDevWarning.js";
|
|
84
84
|
import { useScrollLock } from "../hooks/useScrollLock.js";
|
|
85
|
+
import { useMergedRefs } from "../hooks/useMergedRefs.js";
|
|
85
86
|
import { mergeProps } from "../utils/mergeProps.js";
|
|
86
87
|
import { LayerDepthProvider } from "../Layer/LayerDepthContext.js";
|
|
87
88
|
import { ModalAnnounceProvider } from "../hooks/ModalAnnounceProvider.js";
|
|
@@ -523,7 +524,10 @@ function StandaloneBottomSheet({
|
|
|
523
524
|
}
|
|
524
525
|
triggerRef.current = null;
|
|
525
526
|
}, [finalFocusRef, hasScrim, isOpen]);
|
|
526
|
-
|
|
527
|
+
const {
|
|
528
|
+
ref: modalityRef
|
|
529
|
+
} = useInteractionModalityTracking();
|
|
530
|
+
const dialogComposedRef = useMergedRefs(dialogRef, modalityRef);
|
|
527
531
|
useScrollLock(shouldPresent && hasScrim);
|
|
528
532
|
useDevWarning('BottomSheet', 'requires a non-empty `label` for an accessible name; the open sheet ' + 'has no built-in heading to derive one from.', isOpen && !label);
|
|
529
533
|
|
|
@@ -586,7 +590,7 @@ function StandaloneBottomSheet({
|
|
|
586
590
|
// transforms the dialog: panel, grabber and all shrink and lift as
|
|
587
591
|
// one. The backdrop is not a descendant and stays put.
|
|
588
592
|
...stackPositionerStyles(stackView), hasScrim && styles.scrim, hasScrim && isExiting && styles.scrimClosing, !hasScrim && styles.dialogNonModal),
|
|
589
|
-
ref:
|
|
593
|
+
ref: dialogComposedRef
|
|
590
594
|
// A non-modal sheet is hosted in the top layer as a manual popover
|
|
591
595
|
// (no light dismiss, no backdrop), so sheets order by presentation
|
|
592
596
|
// without a page-level z-index. Below the Popover API floor the
|
|
@@ -356,7 +356,9 @@ function BreadcrumbMenuTrigger({
|
|
|
356
356
|
// The menu's rows move focus with the last input
|
|
357
357
|
// (`architecture:interaction-modality` INV1); this menu has no press model
|
|
358
358
|
// to activate the tracking they read, so it activates it itself.
|
|
359
|
-
|
|
359
|
+
const {
|
|
360
|
+
ref: modalityRef
|
|
361
|
+
} = useInteractionModalityTracking();
|
|
360
362
|
const popover = usePopover({
|
|
361
363
|
hasLightDismiss: true,
|
|
362
364
|
hasCloseButton: false,
|
|
@@ -447,7 +449,7 @@ function BreadcrumbMenuTrigger({
|
|
|
447
449
|
const hasOverflow = useMenuOverflow(listRef, menuContent, popover.isOpen);
|
|
448
450
|
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
449
451
|
children: [/*#__PURE__*/_jsxs("button", {
|
|
450
|
-
ref: useMergedRefs(ref, buttonRef, popover.triggerRef),
|
|
452
|
+
ref: useMergedRefs(ref, buttonRef, modalityRef, popover.triggerRef),
|
|
451
453
|
type: "button",
|
|
452
454
|
onClick: handleClick,
|
|
453
455
|
onKeyDown: handleKeyDown,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChatComposer.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatComposer.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,KAAK,EAAE,EAKZ,KAAK,SAAS,EAGf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"ChatComposer.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatComposer.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,KAAK,EAAE,EAKZ,KAAK,SAAS,EAGf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA8B5C,MAAM,MAAM,kBAAkB,GAAG;IAC/B,IAAI,EAAE,OAAO,GAAG,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAEtE,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAC7C,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,GAAG,UAAU,CACxB;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,+CAA+C;IAC/C,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,kDAAkD;IAClD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,kFAAkF;IAClF,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,qCAAqC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uCAAuC;IACvC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,sBAAsB;IACtB,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAI3B,6GAA6G;IAC7G,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,yHAAyH;IACzH,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,yGAAyG;IACzG,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,2DAA2D;IAC3D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,gHAAgH;IAChH,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,gHAAgH;IAChH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,gDAAgD;IAChD,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,iEAAiE;IACjE,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,oDAAoD;IACpD,cAAc,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;CACnC;AAoOD;;;;;;;;;;;GAWG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,qBAoOpD;yBApOe,YAAY"}
|
|
@@ -34,8 +34,9 @@ import { ChatSendButton } from "./ChatSendButton.js";
|
|
|
34
34
|
import { themeProps } from "../utils/themeProps.js";
|
|
35
35
|
import { useTranslator } from "../i18n/index.js";
|
|
36
36
|
import { useAnnounceRenderedText } from "../hooks/useAnnounceRenderedText.js";
|
|
37
|
+
import { useMergedRefs } from "../hooks/useMergedRefs.js";
|
|
37
38
|
import { focusOutlineStyles } from "../utils/focusOutline.stylex.js";
|
|
38
|
-
import {
|
|
39
|
+
import { useInteractionModalityTracking } from "../utils/interactionModality.js";
|
|
39
40
|
|
|
40
41
|
// =============================================================================
|
|
41
42
|
// Types
|
|
@@ -142,7 +143,6 @@ export function ChatComposer(props) {
|
|
|
142
143
|
const placeholder = placeholderFromProps ?? t('@astryx.chat.composer.placeholder');
|
|
143
144
|
const [internalValue, setInternalValue] = useState('');
|
|
144
145
|
const [hasKeyboardEditorFocus, setHasKeyboardEditorFocus] = useState(false);
|
|
145
|
-
useInteractionModalityTracking();
|
|
146
146
|
const isControlled = controlledValue !== undefined;
|
|
147
147
|
const currentValue = isControlled ? controlledValue : internalValue;
|
|
148
148
|
const updateValue = useCallback(newValue => {
|
|
@@ -161,6 +161,11 @@ export function ChatComposer(props) {
|
|
|
161
161
|
}, [isDisabled, onSubmit, updateValue]);
|
|
162
162
|
const canSend = currentValue.trim().length > 0 && !isDisabled;
|
|
163
163
|
const bodyRef = useRef(null);
|
|
164
|
+
const {
|
|
165
|
+
ref: modalityRef,
|
|
166
|
+
readModality
|
|
167
|
+
} = useInteractionModalityTracking();
|
|
168
|
+
const bodyComposedRef = useMergedRefs(bodyRef, modalityRef);
|
|
164
169
|
|
|
165
170
|
// Input slot registers its focus (and future) control here so the shell can
|
|
166
171
|
// drive it without knowing its DOM shape. Stable ref — safe in the memoized
|
|
@@ -185,8 +190,8 @@ export function ChatComposer(props) {
|
|
|
185
190
|
editable?.focus();
|
|
186
191
|
}, []);
|
|
187
192
|
const handleBodyFocusCapture = useCallback(event => {
|
|
188
|
-
setHasKeyboardEditorFocus(isComposerEditor(event.target) &&
|
|
189
|
-
}, []);
|
|
193
|
+
setHasKeyboardEditorFocus(isComposerEditor(event.target) && readModality() === 'keyboard');
|
|
194
|
+
}, [readModality]);
|
|
190
195
|
const handleBodyBlurCapture = useCallback(event => {
|
|
191
196
|
if (!event.currentTarget.contains(event.relatedTarget)) {
|
|
192
197
|
setHasKeyboardEditorFocus(false);
|
|
@@ -268,7 +273,7 @@ export function ChatComposer(props) {
|
|
|
268
273
|
}[!!isDisabled << 0], className, style),
|
|
269
274
|
...rest,
|
|
270
275
|
children: [statusPosition === 'top' && statusEl, drawer, /*#__PURE__*/_jsxs("div", {
|
|
271
|
-
ref:
|
|
276
|
+
ref: bodyComposedRef,
|
|
272
277
|
onClick: handleBodyClick,
|
|
273
278
|
onPointerDownCapture: () => setHasKeyboardEditorFocus(false),
|
|
274
279
|
onFocusCapture: handleBodyFocusCapture,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChatPastedTextToken.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatPastedTextToken.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ChatPastedTextToken.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatPastedTextToken.tsx"],"names":[],"mappings":"AAoCA,MAAM,WAAW,wBAAwB;IACvC,4BAA4B;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,mFAAmF;IACnF,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAkDD,wBAAgB,mBAAmB,CAAC,EAClC,IAAI,EACJ,QAAQ,GACT,EAAE,wBAAwB,+BAqC1B;yBAxCe,mBAAmB"}
|
|
@@ -4,12 +4,14 @@
|
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
6
|
* @file ChatPastedTextToken.tsx
|
|
7
|
-
* @input Uses React, StyleX, Badge, HoverCard, Button, provider-bound translator
|
|
7
|
+
* @input Uses React, StyleX, Badge, HoverCard, Button, provider-bound translator,
|
|
8
|
+
* the shared tap stop (`useTapStop`)
|
|
8
9
|
* @output Exports ChatPastedTextToken component
|
|
9
10
|
* @position Inline token for pasted text with hover card preview + expand
|
|
10
11
|
*
|
|
11
|
-
* Hover: card with truncated text preview and
|
|
12
|
-
* Expand replaces the token with the full text in the
|
|
12
|
+
* Hover, or a tap by finger or pen: card with truncated text preview and
|
|
13
|
+
* "Expand" button. Expand replaces the token with the full text in the
|
|
14
|
+
* contentEditable.
|
|
13
15
|
*
|
|
14
16
|
* SYNC: When modified, update:
|
|
15
17
|
* - /packages/core/src/Chat/index.ts (exports)
|
|
@@ -21,6 +23,7 @@ import { Badge } from "../Badge/index.js";
|
|
|
21
23
|
import { Button } from "../Button/index.js";
|
|
22
24
|
import { HoverCard } from "../HoverCard/index.js";
|
|
23
25
|
import { useTranslator } from "../i18n/index.js";
|
|
26
|
+
import { useTapStop } from "../Layer/useTouchTrigger.js";
|
|
24
27
|
|
|
25
28
|
// =============================================================================
|
|
26
29
|
// Types
|
|
@@ -49,6 +52,13 @@ export function ChatPastedTextToken({
|
|
|
49
52
|
}) {
|
|
50
53
|
const t = useTranslator();
|
|
51
54
|
const label = formatLabel(text, t);
|
|
55
|
+
// A tap on the token, by finger or pen, asks for its preview, so it stops
|
|
56
|
+
// there: cancelling the mouse press the browser makes of it keeps the
|
|
57
|
+
// composer around the token from taking focus and the caret, which on a
|
|
58
|
+
// touch device raises the keyboard over the preview. The tap's click still
|
|
59
|
+
// reaches the card's trigger. A mouse press still places the caret, and
|
|
60
|
+
// hover opens the preview.
|
|
61
|
+
const tapStop = useTapStop('mousedown');
|
|
52
62
|
const cardContent = /*#__PURE__*/_jsxs("div", {
|
|
53
63
|
...{
|
|
54
64
|
className: "x78zum5 xdt5ytf x1txdalj x17fpy1y"
|
|
@@ -82,7 +92,8 @@ export function ChatPastedTextToken({
|
|
|
82
92
|
hasHoverIndication: false,
|
|
83
93
|
children: /*#__PURE__*/_jsx(Badge, {
|
|
84
94
|
label: label,
|
|
85
|
-
variant: "neutral"
|
|
95
|
+
variant: "neutral",
|
|
96
|
+
...tapStop
|
|
86
97
|
})
|
|
87
98
|
});
|
|
88
99
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxList.d.ts","sourceRoot":"","sources":["../../src/CheckboxList/CheckboxList.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EACL,KAAK,mBAAmB,EAEzB,MAAM,qBAAqB,CAAC;AAE7B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAE9C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAEhD,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,qBAAqB,CAAC;AAarD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAC7C,mBAAmB,CAAC,cAAc,CAAC,EACnC,UAAU,CACX;IACC,mDAAmD;IACnD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACtC;;;;;OAKG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1D;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;;OAUG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,MAAM,EACN,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,OAAoB,EACpB,WAAmB,EACnB,UAAkB,EAClB,eAAe,EACf,UAAkB,EAClB,QAAQ,EACR,GAAG,EACH,KAAK,EACL,eAAe,EACf,kBAAkB,EAClB,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,iBAAiB,EAAE,kBAAkB,EACrC,kBAAkB,EAAE,mBAAmB,EACvC,GAAG,SAAS,EACb,EAAE,iBAAiB,+
|
|
1
|
+
{"version":3,"file":"CheckboxList.d.ts","sourceRoot":"","sources":["../../src/CheckboxList/CheckboxList.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EACL,KAAK,mBAAmB,EAEzB,MAAM,qBAAqB,CAAC;AAE7B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAE9C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAEhD,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,qBAAqB,CAAC;AAarD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAC7C,mBAAmB,CAAC,cAAc,CAAC,EACnC,UAAU,CACX;IACC,mDAAmD;IACnD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACtC;;;;;OAKG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1D;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;;OAUG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,MAAM,EACN,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,OAAoB,EACpB,WAAmB,EACnB,UAAkB,EAClB,eAAe,EACf,UAAkB,EAClB,QAAQ,EACR,GAAG,EACH,KAAK,EACL,eAAe,EACf,kBAAkB,EAClB,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,iBAAiB,EAAE,kBAAkB,EACrC,kBAAkB,EAAE,mBAAmB,EACvC,GAAG,SAAS,EACb,EAAE,iBAAiB,+BAiJnB;yBA1Ke,YAAY"}
|
|
@@ -96,7 +96,9 @@ export function CheckboxList({
|
|
|
96
96
|
// Disabled-reason tooltip. Applies to the whole-group disabled state. Disabled
|
|
97
97
|
// controls swallow pointer events, so the tooltip listeners attach to the
|
|
98
98
|
// group container and the checkboxes stay perceivable via aria-disabled
|
|
99
|
-
// instead of the disabled attribute. Toggling is blocked in the item.
|
|
99
|
+
// instead of the disabled attribute. Toggling is blocked in the item. The
|
|
100
|
+
// reason describes the group and each checkbox (see
|
|
101
|
+
// CheckboxListContextValue.disabledMessageID).
|
|
100
102
|
const showsDisabledMessage = isDisabled && !!disabledMessage;
|
|
101
103
|
const disabledMessageTooltip = useTooltip({
|
|
102
104
|
placement: 'above',
|
|
@@ -122,9 +124,10 @@ export function CheckboxList({
|
|
|
122
124
|
onChange: isCollectionMode ? handleChange : undefined,
|
|
123
125
|
isDisabled,
|
|
124
126
|
hasDisabledMessage: showsDisabledMessage,
|
|
127
|
+
disabledMessageID: showsDisabledMessage ? disabledMessageTooltip.describedBy : undefined,
|
|
125
128
|
isReadOnly,
|
|
126
129
|
loadingValues
|
|
127
|
-
}), [isCollectionMode, optimisticValue, handleChange, isDisabled, showsDisabledMessage, isReadOnly, loadingValues]);
|
|
130
|
+
}), [isCollectionMode, optimisticValue, handleChange, isDisabled, showsDisabledMessage, disabledMessageTooltip.describedBy, isReadOnly, loadingValues]);
|
|
128
131
|
return /*#__PURE__*/_jsxs(Field, {
|
|
129
132
|
label: label,
|
|
130
133
|
isLabelHidden: isLabelHidden,
|
|
@@ -15,6 +15,14 @@ export interface CheckboxListContextValue {
|
|
|
15
15
|
* and AT-discoverable; toggling is still blocked.
|
|
16
16
|
*/
|
|
17
17
|
hasDisabledMessage?: boolean;
|
|
18
|
+
/**
|
|
19
|
+
* The id of the group's reason tooltip while `hasDisabledMessage` is true.
|
|
20
|
+
* The reason describes the group (CheckboxList FR1) and every checkbox adds
|
|
21
|
+
* it to its own `aria-describedby` (FR9): a screen reader announces a
|
|
22
|
+
* checkbox's description when the checkbox takes focus, which it does not
|
|
23
|
+
* reliably do for a description on the group.
|
|
24
|
+
*/
|
|
25
|
+
disabledMessageID?: string;
|
|
18
26
|
isReadOnly: boolean;
|
|
19
27
|
/**
|
|
20
28
|
* Values of the items whose `changeAction` is pending. Each matching item
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxListContext.d.ts","sourceRoot":"","sources":["../../src/CheckboxList/CheckboxListContext.tsx"],"names":[],"mappings":"AAaA,MAAM,WAAW,wBAAwB;IACvC,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE,YAAY,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7D,UAAU,EAAE,OAAO,CAAC;IACpB;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,UAAU,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;CACvC;AAED,eAAO,MAAM,mBAAmB,0DACiC,CAAC"}
|
|
1
|
+
{"version":3,"file":"CheckboxListContext.d.ts","sourceRoot":"","sources":["../../src/CheckboxList/CheckboxListContext.tsx"],"names":[],"mappings":"AAaA,MAAM,WAAW,wBAAwB;IACvC,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE,YAAY,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7D,UAAU,EAAE,OAAO,CAAC;IACpB;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;;;;;OAMG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,UAAU,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;CACvC;AAED,eAAO,MAAM,mBAAmB,0DACiC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxListItem.d.ts","sourceRoot":"","sources":["../../src/CheckboxList/CheckboxListItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,EAAqB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAIzD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"CheckboxListItem.d.ts","sourceRoot":"","sources":["../../src/CheckboxList/CheckboxListItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,EAAqB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAIzD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAS5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,SAAS,CAAC;AAgBvC,MAAM,WAAW,qBAAsB,SAAQ,SAAS,CAAC,aAAa,CAAC;IACrE;;;;;OAKG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;;;;;;;;;OAaG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,eAAe,CAAC;IACtC;;;;OAIG;IACH,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;CAChC;AAiCD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,YAAY,EAAE,SAAS,EACvB,KAAK,EACL,WAAW,EACX,UAAU,EACV,UAAU,EAAE,cAAsB,EAClC,SAAS,EAAE,aAAqB,EAChC,SAAS,EACT,OAAO,EACP,GAAG,EACH,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EAAE,WAAW,EACpB,KAAK,EACL,GAAG,SAAS,EACb,EAAE,qBAAqB,+BA6IvB;yBA9Je,gBAAgB"}
|
|
@@ -26,6 +26,7 @@ import { ListContext } from "../List/ListContext.js";
|
|
|
26
26
|
import { CheckboxListContext } from "./CheckboxListContext.js";
|
|
27
27
|
import { useTranslator } from "../i18n/index.js";
|
|
28
28
|
import { ItemDescriptionContext } from "../Item/ItemDescriptionContext.js";
|
|
29
|
+
import { joinAriaIDs } from "../utils/inputAria.js";
|
|
29
30
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
30
31
|
// =============================================================================
|
|
31
32
|
// Styles
|
|
@@ -57,13 +58,15 @@ const styles = {
|
|
|
57
58
|
*
|
|
58
59
|
* This component owns `aria-describedby`, so the prop is omitted rather than
|
|
59
60
|
* accepted and overwritten: a caller passing one would otherwise lose the id
|
|
60
|
-
* silently.
|
|
61
|
+
* silently. After the row's description comes the group's disabled reason
|
|
62
|
+
* (CheckboxList's disabledMessage), which describes each checkbox (FR9).
|
|
61
63
|
*/
|
|
62
64
|
function DescribedCheckboxInput(props) {
|
|
63
65
|
const describedBy = use(ItemDescriptionContext);
|
|
66
|
+
const reasonID = use(CheckboxListContext)?.disabledMessageID;
|
|
64
67
|
return /*#__PURE__*/_jsx(CheckboxInput, {
|
|
65
68
|
...props,
|
|
66
|
-
"aria-describedby": describedBy ?? undefined
|
|
69
|
+
"aria-describedby": joinAriaIDs(describedBy ?? undefined, reasonID)
|
|
67
70
|
});
|
|
68
71
|
}
|
|
69
72
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CommandPaletteInput.d.ts","sourceRoot":"","sources":["../../src/CommandPalette/CommandPaletteInput.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;GAUG;AAEH,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAcf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"CommandPaletteInput.d.ts","sourceRoot":"","sources":["../../src/CommandPalette/CommandPaletteInput.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;GAUG;AAEH,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAcf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAoE5C,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CACpD,SAAS,CAAC,gBAAgB,CAAC,EAC3B,UAAU,CACX;IACC,iEAAiE;IACjE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAElC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAExC;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;OAIG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IAEvB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;CACvD;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,KAAK,EAAE,eAAe,EACtB,aAAa,EACb,WAAW,EAAE,oBAAoB,EACjC,KAAK,EACL,YAAmB,EACnB,UAAU,EACV,QAAQ,EACR,SAAS,EACT,OAAO,EACP,MAAM,EACN,GAAG,EACH,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,wBAAwB,+BAsL1B;yBAtMe,mBAAmB"}
|
|
@@ -25,7 +25,7 @@ import { BusyStartSettleContext } from "./busyStartSettle.js";
|
|
|
25
25
|
import { useDialogContext } from "../Dialog/DialogContext.js";
|
|
26
26
|
import { themeProps } from "../utils/themeProps.js";
|
|
27
27
|
import { focusOutlineProps } from "../utils/focusOutline.stylex.js";
|
|
28
|
-
import {
|
|
28
|
+
import { useInteractionModalityTracking } from "../utils/interactionModality.js";
|
|
29
29
|
import { useTranslator } from "../i18n/index.js";
|
|
30
30
|
import { useMergedRefs } from "../hooks/useMergedRefs.js";
|
|
31
31
|
import { useBusyAnnouncement } from "../hooks/useBusyAnnouncement.js";
|
|
@@ -119,11 +119,14 @@ export function CommandPaletteInput({
|
|
|
119
119
|
// Text-entry controls match :focus-visible after pointer focus in Chromium.
|
|
120
120
|
// Keep the shared selector, but narrow its ring to focus acquired through
|
|
121
121
|
// keyboard navigation so a click or pointer-opened palette stays unringed.
|
|
122
|
-
|
|
122
|
+
const {
|
|
123
|
+
ref: modalityRef,
|
|
124
|
+
readModality
|
|
125
|
+
} = useInteractionModalityTracking();
|
|
123
126
|
const handleFocus = useCallback(event => {
|
|
124
|
-
setIsKeyboardFocus(
|
|
127
|
+
setIsKeyboardFocus(readModality() === 'keyboard');
|
|
125
128
|
onFocus?.(event);
|
|
126
|
-
}, [onFocus]);
|
|
129
|
+
}, [onFocus, readModality]);
|
|
127
130
|
const handleBlur = useCallback(event => {
|
|
128
131
|
setIsKeyboardFocus(false);
|
|
129
132
|
onBlur?.(event);
|
|
@@ -182,7 +185,7 @@ export function CommandPaletteInput({
|
|
|
182
185
|
})
|
|
183
186
|
}), /*#__PURE__*/_jsx("input", {
|
|
184
187
|
...props,
|
|
185
|
-
ref: useMergedRefs(ref, inputRef),
|
|
188
|
+
ref: useMergedRefs(ref, inputRef, modalityRef),
|
|
186
189
|
...(isKeyboardFocus ? focusOutlineProps.focusVisible(styles.input) : focusOutlineProps.suppressed(styles.input)),
|
|
187
190
|
type: "text",
|
|
188
191
|
role: ctx ? 'combobox' : standaloneRole,
|
|
@@ -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;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA2B5C,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;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA2B5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAMhD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,SAAS,CAAC;AA6B9C;;;;;;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;AAqKX;;;;;;;;;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,EACN,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,sCA+Wb;yBA/Xe,MAAM"}
|
package/dist/Dialog/Dialog.js
CHANGED
|
@@ -50,7 +50,7 @@ import { devWarn } from "../utils/devWarning.js";
|
|
|
50
50
|
import { DialogContext } from "./DialogContext.js";
|
|
51
51
|
import { themeProps } from "../utils/themeProps.js";
|
|
52
52
|
import { focusOutlineProps } from "../utils/focusOutline.stylex.js";
|
|
53
|
-
import {
|
|
53
|
+
import { useInteractionModalityTracking } from "../utils/interactionModality.js";
|
|
54
54
|
import { focusForLastInput } from "../utils/focusReturn.js";
|
|
55
55
|
import { ModalAnnounceProvider } from "../hooks/ModalAnnounceProvider.js";
|
|
56
56
|
import { useMergedRefs } from "../hooks/useMergedRefs.js";
|
|
@@ -354,24 +354,19 @@ export function Dialog({
|
|
|
354
354
|
node.removeAttribute('aria-labelledby');
|
|
355
355
|
}
|
|
356
356
|
}, [titleId, hasConsumerName]);
|
|
357
|
-
const mergedDialogRef = useMergedRefs(ref, attachDialog);
|
|
358
|
-
|
|
359
|
-
// Capture the element that was focused when the dialog opened, for
|
|
360
|
-
// directional animation origin and focus restoration on close.
|
|
361
|
-
const triggerElementRef = useRef(null);
|
|
362
|
-
useInteractionModalityTracking();
|
|
363
357
|
|
|
364
358
|
// Input in a second document (a same-origin iframe, a Document
|
|
365
359
|
// Picture-in-Picture window) never reaches the page's listeners, so the
|
|
366
360
|
// dialog's own document keeps its own last input for the focus return while
|
|
367
361
|
// this Dialog is mounted, from before it opens until it unmounts.
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
362
|
+
const {
|
|
363
|
+
ref: modalityRef
|
|
364
|
+
} = useInteractionModalityTracking();
|
|
365
|
+
const mergedDialogRef = useMergedRefs(ref, attachDialog, modalityRef);
|
|
366
|
+
|
|
367
|
+
// Capture the element that was focused when the dialog opened, for
|
|
368
|
+
// directional animation origin and focus restoration on close.
|
|
369
|
+
const triggerElementRef = useRef(null);
|
|
375
370
|
|
|
376
371
|
// This runs in a layout effect so the capture lands before any descendant's
|
|
377
372
|
// passive mount effect: all layout effects run before any passive effect,
|
|
@@ -439,7 +434,7 @@ export function Dialog({
|
|
|
439
434
|
// the last input in that element's own document calls for.
|
|
440
435
|
const trigger = triggerElementRef.current;
|
|
441
436
|
if (trigger) {
|
|
442
|
-
focusForLastInput(trigger
|
|
437
|
+
focusForLastInput(trigger);
|
|
443
438
|
}
|
|
444
439
|
triggerElementRef.current = null;
|
|
445
440
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenu.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenu.tsx"],"names":[],"mappings":"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"}
|
|
@@ -361,8 +361,11 @@ function DropdownMenuBottomSheet({
|
|
|
361
361
|
};
|
|
362
362
|
const backLabel = t('@astryx.dropdownMenu.back');
|
|
363
363
|
const buttonRef = useRef(null);
|
|
364
|
+
// The trigger, where focus returns after the sheet closes, carries the
|
|
365
|
+
// modality tracking for its document.
|
|
366
|
+
const modality = useInteractionModalityTracking();
|
|
364
367
|
// The caller's `button.ref` rides along with the sheet's own trigger ref.
|
|
365
|
-
const triggerRef = useMergedRefs(buttonRef, button.ref);
|
|
368
|
+
const triggerRef = useMergedRefs(buttonRef, modality.ref, button.ref);
|
|
366
369
|
const triggerId = useId();
|
|
367
370
|
const sheetId = useId();
|
|
368
371
|
const actionListRef = useRef(null);
|
|
@@ -372,7 +375,7 @@ function DropdownMenuBottomSheet({
|
|
|
372
375
|
onFocusReturnTargetFocus,
|
|
373
376
|
prepareFocusReturn,
|
|
374
377
|
resetFocusReturn
|
|
375
|
-
} = useFocusReturnVisibility();
|
|
378
|
+
} = useFocusReturnVisibility(modality);
|
|
376
379
|
const viewHeadingRef = useRef(null);
|
|
377
380
|
const previousSubmenuDepthRef = useRef(0);
|
|
378
381
|
const [internalIsOpen, setInternalIsOpen] = useState(false);
|
|
@@ -510,9 +513,11 @@ function DropdownMenuBottomSheet({
|
|
|
510
513
|
children: currentTitle
|
|
511
514
|
});
|
|
512
515
|
// A stable ref: an inline one re-runs on every render (null, then the element).
|
|
516
|
+
const sheetModalityRef = modality.ref;
|
|
513
517
|
const sheetTriggerRef = useCallback(el => {
|
|
514
518
|
buttonRef.current = el;
|
|
515
|
-
|
|
519
|
+
sheetModalityRef(el);
|
|
520
|
+
}, [sheetModalityRef]);
|
|
516
521
|
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
517
522
|
children: [renderTrigger != null ? renderTrigger({
|
|
518
523
|
ref: sheetTriggerRef,
|
|
@@ -645,14 +650,14 @@ function DropdownMenuPopover({
|
|
|
645
650
|
const notifyClickOnShowRef = useRef(false);
|
|
646
651
|
const pendingControlledOpenRef = useRef(false);
|
|
647
652
|
const suppressControlledRollbackHideRef = useRef(false);
|
|
648
|
-
|
|
653
|
+
const contentRef = useRef(null);
|
|
654
|
+
const modality = useInteractionModalityTracking();
|
|
649
655
|
const {
|
|
650
656
|
isFocusRingSuppressed,
|
|
651
657
|
onFocusReturnTargetFocus,
|
|
652
658
|
prepareFocusReturn,
|
|
653
659
|
resetFocusReturn
|
|
654
|
-
} = useFocusReturnVisibility();
|
|
655
|
-
const contentRef = useRef(null);
|
|
660
|
+
} = useFocusReturnVisibility(modality);
|
|
656
661
|
const headerRef = useRef(null);
|
|
657
662
|
const footerRef = useRef(null);
|
|
658
663
|
const hasRegions = useMemo(() => isRenderable(header) || isRenderable(footer), [header, footer]);
|
|
@@ -1186,10 +1191,16 @@ function DropdownMenuPopover({
|
|
|
1186
1191
|
// popover's anchor off the trigger and back: two inline-style writes on the
|
|
1187
1192
|
// trigger per render of the menu.
|
|
1188
1193
|
const popoverTriggerRef = popover.triggerRef;
|
|
1194
|
+
// The trigger, where focus returns, also carries the modality tracking for
|
|
1195
|
+
// its document.
|
|
1196
|
+
const modalityRef = modality.ref;
|
|
1189
1197
|
const triggerRef = useCallback(el => {
|
|
1190
1198
|
buttonRef.current = el;
|
|
1191
1199
|
popoverTriggerRef(el);
|
|
1192
|
-
|
|
1200
|
+
// Called with each node and with `null`, so its cleanup isn't returned
|
|
1201
|
+
// (a returned cleanup would stop React's `null` call to the others).
|
|
1202
|
+
modalityRef(el);
|
|
1203
|
+
}, [popoverTriggerRef, modalityRef]);
|
|
1193
1204
|
const consumerButtonRef = button.ref;
|
|
1194
1205
|
const buttonTriggerRef = useCallback(el => {
|
|
1195
1206
|
triggerRef(el);
|
|
@@ -1271,7 +1282,7 @@ function DropdownMenuPopover({
|
|
|
1271
1282
|
onFocus: event => {
|
|
1272
1283
|
rest.onFocus?.(event);
|
|
1273
1284
|
if (event.target === event.currentTarget) {
|
|
1274
|
-
setIsMenuKeyboardFocused(getInteractionModality() === 'keyboard');
|
|
1285
|
+
setIsMenuKeyboardFocused(getInteractionModality(event.currentTarget) === 'keyboard');
|
|
1275
1286
|
}
|
|
1276
1287
|
},
|
|
1277
1288
|
...menuPress.menuProps,
|
|
@@ -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;AAyC5D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA6N5C,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,
|
|
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;AAyC5D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA6N5C,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,CAk5BX;yBAp5Be,mBAAmB"}
|
|
@@ -874,7 +874,7 @@ export function DropdownMenuSubMenu(props) {
|
|
|
874
874
|
// on the menu element shows the ring the base style otherwise removes.
|
|
875
875
|
const handleMenuFocus = event => {
|
|
876
876
|
if (hasRegions && event.target === event.currentTarget) {
|
|
877
|
-
setIsMenuKeyboardFocused(getInteractionModality() === 'keyboard');
|
|
877
|
+
setIsMenuKeyboardFocused(getInteractionModality(event.currentTarget) === 'keyboard');
|
|
878
878
|
}
|
|
879
879
|
};
|
|
880
880
|
const handleMenuBlur = event => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuBottomSheetActionList.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/MenuBottomSheetActionList.tsx"],"names":[],"mappings":"AAIA;;;;;GAKG;AAEH,OAAO,KAAkC,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"MenuBottomSheetActionList.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/MenuBottomSheetActionList.tsx"],"names":[],"mappings":"AAIA;;;;;GAKG;AAEH,OAAO,KAAkC,MAAM,OAAO,CAAC;AAYvD,OAAO,KAAK,EAAC,oBAAoB,EAAE,kBAAkB,EAAC,MAAM,gBAAgB,CAAC;AAsC7E,wBAAgB,yBAAyB,CAAC,EACxC,KAAK,EACL,QAAQ,EACR,aAAa,GACd,EAAE;IACD,KAAK,EAAE,kBAAkB,EAAE,CAAC;IAC5B,QAAQ,EAAE,CAAC,IAAI,EAAE,oBAAoB,EAAE,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxE,aAAa,EAAE,CAAC,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;CACrD,qBA2HA;yBAnIe,yBAAyB"}
|
|
@@ -16,10 +16,11 @@ import { Icon, renderIconSlot } from "../Icon/Icon.js";
|
|
|
16
16
|
import { List } from "../List/List.js";
|
|
17
17
|
import { ListItem } from "../List/ListItem.js";
|
|
18
18
|
import { useMenuPress } from "../hooks/useMenuPress.js";
|
|
19
|
+
import { useMergedRefs } from "../hooks/useMergedRefs.js";
|
|
19
20
|
import "../theme/tokens.stylex.js";
|
|
20
21
|
import { colorVars, spacingVars } from "../theme/tokens.stylex.js";
|
|
21
22
|
import { rtlStyles } from "../utils/rtlStyles.js";
|
|
22
|
-
import {
|
|
23
|
+
import { useInteractionModalityTracking } from "../utils/interactionModality.js";
|
|
23
24
|
import { isModifiedClick } from "./menuItemRoles.js";
|
|
24
25
|
|
|
25
26
|
/** The action rows: ListItem renders its action as a button (or a link). */
|
|
@@ -55,6 +56,11 @@ export function MenuBottomSheetActionList({
|
|
|
55
56
|
onOpenSubmenu
|
|
56
57
|
}) {
|
|
57
58
|
const listRef = useRef(null);
|
|
59
|
+
const {
|
|
60
|
+
ref: modalityRef,
|
|
61
|
+
readModality
|
|
62
|
+
} = useInteractionModalityTracking();
|
|
63
|
+
const listComposedRef = useMergedRefs(listRef, modalityRef);
|
|
58
64
|
// The press model: the row under a finger's RELEASE acts, and the
|
|
59
65
|
// highlight (focus) follows the finger across the rows. The sheet is modal,
|
|
60
66
|
// so a release outside it is the scrim's, not a dismissal of ours.
|
|
@@ -72,7 +78,7 @@ export function MenuBottomSheetActionList({
|
|
|
72
78
|
event.preventDefault();
|
|
73
79
|
return;
|
|
74
80
|
}
|
|
75
|
-
if (
|
|
81
|
+
if (readModality() === 'pointer') {
|
|
76
82
|
event.currentTarget.blur();
|
|
77
83
|
}
|
|
78
84
|
if (isSubmenu) {
|
|
@@ -116,7 +122,7 @@ export function MenuBottomSheetActionList({
|
|
|
116
122
|
}, getItemKey(item, index));
|
|
117
123
|
};
|
|
118
124
|
return /*#__PURE__*/_jsx(List, {
|
|
119
|
-
ref:
|
|
125
|
+
ref: listComposedRef,
|
|
120
126
|
density: "spacious",
|
|
121
127
|
xstyle: styles.list,
|
|
122
128
|
...menuPress.menuProps,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FieldLabel.d.ts","sourceRoot":"","sources":["../../src/Field/FieldLabel.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,
|
|
1
|
+
{"version":3,"file":"FieldLabel.d.ts","sourceRoot":"","sources":["../../src/Field/FieldLabel.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAuB,KAAK,SAAS,EAAiB,MAAM,OAAO,CAAC;AAE3E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAW5C,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAiFtC,MAAM,WAAW,eAAgB,SAAQ,SAAS,CAAC,gBAAgB,CAAC;IAClE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACjC;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,OAAO,EACP,OAAO,EACP,YAAoB,EACpB,aAAqB,EACrB,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,SAAS,EACT,YAAY,EACZ,WAAW,EACX,aAAa,EACb,SAAS,EACT,KAAK,EACL,MAAM,EACN,GAAG,EACH,GAAG,IAAI,EACR,EAAE,eAAe,+BAwJjB;yBA1Ke,UAAU"}
|
package/dist/Field/FieldLabel.js
CHANGED
|
@@ -22,7 +22,7 @@ import "../theme/tokens.stylex.js";
|
|
|
22
22
|
import { colorVars, fontWeightVars, spacingVars, typographyVars, typeScaleVars } from "../theme/tokens.stylex.js";
|
|
23
23
|
import { Icon, renderIconSlot } from "../Icon/Icon.js";
|
|
24
24
|
import { Tooltip } from "../Tooltip/Tooltip.js";
|
|
25
|
-
import {
|
|
25
|
+
import { useTapStop } from "../Layer/useTouchTrigger.js";
|
|
26
26
|
import { useTranslator } from "../i18n/useTranslator.js";
|
|
27
27
|
import { themeProps } from "../utils/themeProps.js";
|
|
28
28
|
import { useInputContainer } from "../hooks/useInputContainer.js";
|
|
@@ -141,18 +141,10 @@ export function FieldLabel({
|
|
|
141
141
|
// go on to activate the label's control, as a press anywhere else on the
|
|
142
142
|
// label would (focus the field, toggle a switch). A mouse click on the icon
|
|
143
143
|
// keeps that native activation, and hover shows the help.
|
|
144
|
-
const
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
iconPressIsTapRef.current = TOUCH_POINTER_TYPES.has(event.pointerType);
|
|
149
|
-
};
|
|
150
|
-
const handleIconClick = event => {
|
|
151
|
-
if (iconPressIsTapRef.current) {
|
|
152
|
-
event.preventDefault();
|
|
153
|
-
}
|
|
154
|
-
iconPressIsTapRef.current = false;
|
|
155
|
-
};
|
|
144
|
+
const {
|
|
145
|
+
onPointerDown: handleIconPointerDown,
|
|
146
|
+
onClick: handleIconClick
|
|
147
|
+
} = useTapStop('click');
|
|
156
148
|
const controlRef = useMemo(() => ({
|
|
157
149
|
get current() {
|
|
158
150
|
return inputID == null ? null : descriptionRef.current?.ownerDocument.getElementById(inputID) ?? null;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PanelSearchInput.d.ts","sourceRoot":"","sources":["../../src/Field/PanelSearchInput.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AAEH,OAAO,EAAwB,KAAK,GAAG,EAAC,MAAM,OAAO,CAAC;AAEtD,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"PanelSearchInput.d.ts","sourceRoot":"","sources":["../../src/Field/PanelSearchInput.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AAEH,OAAO,EAAwB,KAAK,GAAG,EAAC,MAAM,OAAO,CAAC;AAEtD,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AAenD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAgF5C,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CACjD,SAAS,CAAC,gBAAgB,CAAC,EAC3B,UAAU,CACX;IACC,iEAAiE;IACjE,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAE5B;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd,6EAA6E;IAC7E,UAAU,EAAE,MAAM,CAAC;IAEnB,uDAAuD;IACvD,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,yBAAyB;IACzB,KAAK,EAAE,MAAM,CAAC;IAEd,kEAAkE;IAClE,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEvC,wCAAwC;IACxC,SAAS,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,gBAAgB,CAAC,CAAC;IAEzD,0EAA0E;IAC1E,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IAEpD,yEAAyE;IACzE,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IAEnD;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,cAAc,CAAC,CAAC;IAEhE;;;;;OAKG;IACH,WAAW,CAAC,EAAE,YAAY,CAAC;CAC5B;AAED;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,GAAG,EACH,KAAK,EACL,UAAU,EACV,WAAW,EACX,KAAK,EACL,aAAa,EACb,SAAS,EACT,OAAO,EACP,MAAM,EACN,kBAAkB,EAClB,WAAW,EACX,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,qBAAqB,+BA8EvB;yBA9Fe,gBAAgB"}
|