Skip to content

Commit e3ebb88

Browse files
TaduJRTaduJR
committed
fix: restore V2 integrations lost during merge resolution
1 parent 69d5cac commit e3ebb88

7 files changed

Lines changed: 72 additions & 37 deletions

File tree

‎src/CONST/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6310,6 +6310,8 @@ const CONST = {
63106310
MENUITEM: 'menuitem',
63116311
/** Use for selectable options within a listbox. */
63126312
OPTION: 'option',
6313+
/** Use to group related elements together for assistive technology. */
6314+
GROUP: 'group',
63136315
/** Use when no specific role is needed. */
63146316
NONE: 'none',
63156317
/** Use for elements that don't require a specific role. */

‎src/components/Pressable/PressableWithFeedback.tsx‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ import type {Color} from '@styles/theme/types';
66
import variables from '@styles/variables';
77
import GenericPressable from './GenericPressable';
88
import type PressableProps from './GenericPressable/types';
9+
import usePressResponderProps from './PressResponder/usePressResponderProps';
10+
import useResponderRef from './PressResponder/useResponderRef';
911

1012
type PressableWithFeedbackProps = PressableProps & {
1113
/** Style for the wrapper view */
@@ -61,6 +63,14 @@ function PressableWithFeedback({
6163
}: PressableWithFeedbackProps) {
6264
const [isPressed, setIsPressed] = useState(false);
6365
const [isHovered, setIsHovered] = useState(false);
66+
const mergedRef = useResponderRef(ref);
67+
const slot = usePressResponderProps({
68+
onPress: rest.onPress,
69+
accessibilityState: rest.accessibilityState,
70+
accessibilityHasPopup: rest.accessibilityHasPopup,
71+
nativeID: rest.nativeID,
72+
accessibilityControls: rest.accessibilityControls,
73+
});
6474

6575
return (
6676
<OpacityView
@@ -72,8 +82,13 @@ function PressableWithFeedback({
7282
needsOffscreenAlphaCompositing={needsOffscreenAlphaCompositing}
7383
>
7484
<GenericPressable
75-
ref={ref}
7685
{...rest}
86+
ref={mergedRef}
87+
onPress={slot.onPress}
88+
accessibilityState={slot.accessibilityState}
89+
accessibilityHasPopup={slot.accessibilityHasPopup}
90+
nativeID={slot.nativeID}
91+
accessibilityControls={slot.accessibilityControls}
7792
disabled={rest.disabled}
7893
onHoverIn={(event) => {
7994
setIsHovered(true);

‎src/components/PressableWithSecondaryInteraction/index.native.tsx‎

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,14 @@ import type {ReactNode} from 'react';
22
import React from 'react';
33
import type {GestureResponderEvent, TextProps} from 'react-native';
44
import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
5+
import usePressResponderProps from '@components/Pressable/PressResponder/usePressResponderProps';
56
import Text from '@components/Text';
67
import type PressableWithSecondaryInteractionProps from './types';
78

89
/** This is a special Pressable that calls onSecondaryInteraction when LongPressed. */
910
function PressableWithSecondaryInteraction({
1011
children,
11-
onSecondaryInteraction,
12+
onSecondaryInteraction: rawOnSecondaryInteraction,
1213
inline = false,
1314
needsOffscreenAlphaCompositing = false,
1415
suppressHighlighting = false,
@@ -19,6 +20,15 @@ function PressableWithSecondaryInteraction({
1920
ref,
2021
...rest
2122
}: PressableWithSecondaryInteractionProps) {
23+
// Forward the a11y slot so it reaches the underlying pressable even when the descendant isn't `<PressableWithFeedback>`.
24+
const {onSecondaryInteraction, accessibilityState, accessibilityHasPopup, nativeID, accessibilityControls} = usePressResponderProps({
25+
onSecondaryInteraction: rawOnSecondaryInteraction,
26+
accessibilityState: rest.accessibilityState,
27+
accessibilityHasPopup: rest.accessibilityHasPopup,
28+
nativeID: rest.nativeID,
29+
accessibilityControls: rest.accessibilityControls,
30+
});
31+
2232
const executeSecondaryInteraction = (event: GestureResponderEvent) => {
2333
event.preventDefault();
2434
onSecondaryInteraction?.(event);
@@ -28,8 +38,6 @@ function PressableWithSecondaryInteraction({
2838
if (inline) {
2939
return (
3040
<Text
31-
// ESLint is disabled here to propagate all the props, enhancing PressableWithSecondaryInteraction's versatility across different use cases.
32-
3341
{...(rest as TextProps)}
3442
suppressHighlighting={suppressHighlighting}
3543
onLongPress={onSecondaryInteraction ? executeSecondaryInteraction : undefined}
@@ -41,9 +49,11 @@ function PressableWithSecondaryInteraction({
4149

4250
return (
4351
<PressableWithFeedback
44-
// ESLint is disabled here to propagate all the props, enhancing PressableWithSecondaryInteraction's versatility across different use cases.
45-
4652
{...rest}
53+
accessibilityState={accessibilityState}
54+
accessibilityHasPopup={accessibilityHasPopup}
55+
nativeID={nativeID}
56+
accessibilityControls={accessibilityControls}
4757
ref={ref}
4858
onLongPress={onSecondaryInteraction ? executeSecondaryInteraction : undefined}
4959
needsOffscreenAlphaCompositing={needsOffscreenAlphaCompositing}

‎src/components/PressableWithSecondaryInteraction/index.tsx‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React, {useEffect, useRef} from 'react';
22
import type {GestureResponderEvent} from 'react-native';
33
import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
4+
import usePressResponderProps from '@components/Pressable/PressResponder/usePressResponderProps';
45
import useStyleUtils from '@hooks/useStyleUtils';
56
import useThemeStyles from '@hooks/useThemeStyles';
67
import {canUseTouchScreen, hasHoverSupport} from '@libs/DeviceCapabilities';
@@ -16,7 +17,7 @@ function PressableWithSecondaryInteraction({
1617
withoutFocusOnSecondaryInteraction = false,
1718
needsOffscreenAlphaCompositing = false,
1819
preventDefaultContextMenu = true,
19-
onSecondaryInteraction,
20+
onSecondaryInteraction: rawOnSecondaryInteraction,
2021
activeOpacity = 1,
2122
opacityAnimationDuration,
2223
ref,
@@ -25,6 +26,14 @@ function PressableWithSecondaryInteraction({
2526
const styles = useThemeStyles();
2627
const StyleUtils = useStyleUtils();
2728
const pressableRef = useRef<HTMLDivElement | null>(null);
29+
// Forward the a11y slot so it reaches the underlying pressable even when the descendant isn't `<PressableWithFeedback>`.
30+
const {onSecondaryInteraction, accessibilityState, accessibilityHasPopup, nativeID, accessibilityControls} = usePressResponderProps({
31+
onSecondaryInteraction: rawOnSecondaryInteraction,
32+
accessibilityState: rest.accessibilityState,
33+
accessibilityHasPopup: rest.accessibilityHasPopup,
34+
nativeID: rest.nativeID,
35+
accessibilityControls: rest.accessibilityControls,
36+
});
2837

2938
const executeSecondaryInteraction = (event: GestureResponderEvent) => {
3039
if (hasHoverSupport() && !enableLongPressWithHover) {
@@ -92,9 +101,11 @@ function PressableWithSecondaryInteraction({
92101
// On Web, Text does not support LongPress events thus manage inline mode with styling instead of using Text.
93102
return (
94103
<PressableWithFeedback
95-
// ESLint is disabled here to propagate all the props, enhancing PressableWithSecondaryInteraction's versatility across different use cases.
96-
97104
{...rest}
105+
accessibilityState={accessibilityState}
106+
accessibilityHasPopup={accessibilityHasPopup}
107+
nativeID={nativeID}
108+
accessibilityControls={accessibilityControls}
98109
wrapperStyle={[StyleUtils.combineStyles(canUseTouchScreen() ? [styles.userSelectNone, styles.noSelect] : [], inlineStyle), wrapperStyle]}
99110
onLongPress={onSecondaryInteraction ? executeSecondaryInteraction : undefined}
100111
pressDimmingValue={activeOpacity}

‎src/components/VideoPlayer/index.native.tsx‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React, {useState} from 'react';
2+
import {Root as PopoverMenuRoot} from '@components/PopoverMenu/v2';
23
import uniqueIDForVideoWithoutReport from '@components/VideoPlayerContexts/PlaybackContext/uniqueID';
34
import CONST from '@src/CONST';
45
import BaseVideoPlayer from './BaseVideoPlayer';
@@ -10,13 +11,15 @@ function VideoPlayer({videoControlsStyle, shouldUseControlsBottomMargin = true,
1011
const {reportID} = props;
1112

1213
return (
13-
<BaseVideoPlayer
14-
{...props}
15-
isVideoHovered
16-
shouldUseSharedVideoElement={false}
17-
videoControlsStyle={[shouldUseControlsBottomMargin ? {bottom: CONST.VIDEO_PLAYER.CONTROLS_POSITION.NATIVE} : undefined, videoControlsStyle]}
18-
reportID={reportID ?? fakeReportID}
19-
/>
14+
<PopoverMenuRoot>
15+
<BaseVideoPlayer
16+
{...props}
17+
isVideoHovered
18+
shouldUseSharedVideoElement={false}
19+
videoControlsStyle={[shouldUseControlsBottomMargin ? {bottom: CONST.VIDEO_PLAYER.CONTROLS_POSITION.NATIVE} : undefined, videoControlsStyle]}
20+
reportID={reportID ?? fakeReportID}
21+
/>
22+
</PopoverMenuRoot>
2023
);
2124
}
2225

‎src/components/VideoPlayer/index.tsx‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React, {useState} from 'react';
2+
import {Root as PopoverMenuRoot} from '@components/PopoverMenu/v2';
23
import uniqueIDForVideoWithoutReport from '@components/VideoPlayerContexts/PlaybackContext/uniqueID';
34
import BaseVideoPlayer from './BaseVideoPlayer';
45
import type VideoPlayerProps from './types';
@@ -9,10 +10,12 @@ function VideoPlayer(props: VideoPlayerProps) {
910
const {reportID} = props;
1011

1112
return (
12-
<BaseVideoPlayer
13-
{...props}
14-
reportID={reportID ?? fakeReportID}
15-
/>
13+
<PopoverMenuRoot>
14+
<BaseVideoPlayer
15+
{...props}
16+
reportID={reportID ?? fakeReportID}
17+
/>
18+
</PopoverMenuRoot>
1619
);
1720
}
1821

‎src/selectors/Modal.ts‎

Lines changed: 8 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,13 @@
1-
import type { OnyxEntry } from "react-native-onyx";
2-
import CONST from "@src/CONST";
3-
import type { Modal } from "@src/types/onyx";
1+
import type {OnyxEntry} from 'react-native-onyx';
2+
import CONST from '@src/CONST';
3+
import type {Modal} from '@src/types/onyx';
44

5-
const willAlertModalBecomeVisibleSelector = (modal: OnyxEntry<Modal>) =>
6-
modal?.willAlertModalBecomeVisible;
5+
const willAlertModalBecomeVisibleSelector = (modal: OnyxEntry<Modal>) => modal?.willAlertModalBecomeVisible;
76

8-
const isRHPVisibleSelector = (modal: OnyxEntry<Modal>) =>
9-
modal?.type === CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED;
7+
const isRHPVisibleSelector = (modal: OnyxEntry<Modal>) => modal?.type === CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED;
108

11-
const isModalCoveringSelector = (modal: OnyxEntry<Modal>) =>
12-
!!modal?.willAlertModalBecomeVisible && !modal?.isPopover;
9+
const isModalCoveringSelector = (modal: OnyxEntry<Modal>) => !!modal?.willAlertModalBecomeVisible && !modal?.isPopover;
1310

14-
const isModalActiveSelector = (modal: OnyxEntry<Modal>) =>
15-
!!modal?.isVisible || !!modal?.willAlertModalBecomeVisible;
11+
const isModalActiveSelector = (modal: OnyxEntry<Modal>) => !!modal?.isVisible || !!modal?.willAlertModalBecomeVisible;
1612

17-
export {
18-
willAlertModalBecomeVisibleSelector,
19-
isRHPVisibleSelector,
20-
isModalCoveringSelector,
21-
isModalActiveSelector,
22-
};
13+
export {willAlertModalBecomeVisibleSelector, isRHPVisibleSelector, isModalCoveringSelector, isModalActiveSelector};

0 commit comments

Comments
 (0)