@coinbase/cds-mobile 8.44.2 → 8.46.0

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.
Files changed (19) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dts/overlays/drawer/Drawer.d.ts +12 -0
  3. package/dts/overlays/drawer/Drawer.d.ts.map +1 -1
  4. package/dts/overlays/drawer/useDrawerAnimation.d.ts +29 -12
  5. package/dts/overlays/drawer/useDrawerAnimation.d.ts.map +1 -1
  6. package/dts/overlays/drawer/useDrawerPanResponder.d.ts +2 -2
  7. package/dts/overlays/tooltip/Tooltip.d.ts +2 -0
  8. package/dts/overlays/tooltip/Tooltip.d.ts.map +1 -1
  9. package/dts/overlays/tooltip/TooltipProps.d.ts +8 -0
  10. package/dts/overlays/tooltip/TooltipProps.d.ts.map +1 -1
  11. package/esm/overlays/__stories__/DrawerReduceMotion.stories.js +16 -0
  12. package/esm/overlays/__stories__/Drawers.js +3 -1
  13. package/esm/overlays/__stories__/TooltipV2.stories.js +61 -9
  14. package/esm/overlays/__stories__/TrayReduceMotion.stories.js +45 -0
  15. package/esm/overlays/drawer/Drawer.js +5 -3
  16. package/esm/overlays/drawer/useDrawerAnimation.js +40 -7
  17. package/esm/overlays/drawer/useDrawerPanResponder.js +3 -3
  18. package/esm/overlays/tooltip/Tooltip.js +50 -10
  19. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -8,6 +8,18 @@ All notable changes to this project will be documented in this file.
8
8
 
9
9
  <!-- template-start -->
10
10
 
11
+ ## 8.46.0 (2/12/2026 PST)
12
+
13
+ #### 🚀 Updates
14
+
15
+ - Add open/close visibility delays to Tooltip. [[#234](https://github.com/coinbase/cds/pull/234)]
16
+
17
+ ## 8.45.0 (2/12/2026 PST)
18
+
19
+ #### 🚀 Updates
20
+
21
+ - Add reduce motion support for Tray. [[#386](https://github.com/coinbase/cds/pull/386)]
22
+
11
23
  ## 8.44.2 (2/10/2026 PST)
12
24
 
13
25
  #### 🐞 Fixes
package/dts/overlays/drawer/Drawer.d.ts CHANGED
@@ -65,6 +65,12 @@ export type DrawerBaseProps = SharedProps &
65
65
  * @deprecated Use TrayStickyFooter as a Tray child instead.
66
66
  */
67
67
  stickyFooter?: DrawerRenderChildren | React.ReactNode;
68
+ /**
69
+ * When true, the drawer opens and closes with an opacity fade instead of
70
+ * a slide animation. Swipe-to-dismiss gestures remain enabled and use
71
+ * the slide transform so the drawer follows the user's finger naturally.
72
+ */
73
+ reduceMotion?: boolean;
68
74
  };
69
75
  export type DrawerProps = DrawerBaseProps & {
70
76
  styles?: {
@@ -136,6 +142,12 @@ export declare const Drawer: React.MemoExoticComponent<
136
142
  * @deprecated Use TrayStickyFooter as a Tray child instead.
137
143
  */
138
144
  stickyFooter?: DrawerRenderChildren | React.ReactNode;
145
+ /**
146
+ * When true, the drawer opens and closes with an opacity fade instead of
147
+ * a slide animation. Swipe-to-dismiss gestures remain enabled and use
148
+ * the slide transform so the drawer follows the user's finger naturally.
149
+ */
150
+ reduceMotion?: boolean;
139
151
  } & {
140
152
  styles?: {
141
153
  /** Root container element */
package/dts/overlays/drawer/Drawer.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/overlays/drawer/Drawer.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/overlays/drawer/Drawer.tsx"],"names":[],"mappings":"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"}
package/dts/overlays/drawer/useDrawerAnimation.d.ts CHANGED
@@ -3,22 +3,39 @@ import type { PinningDirection } from '@coinbase/cds-common';
3
3
  export declare const useDrawerAnimation: (
4
4
  pin?: PinningDirection | undefined,
5
5
  verticalDrawerPercentageOfView?: number | undefined,
6
+ reduceMotion?: boolean,
6
7
  ) => {
7
8
  drawerAnimation: Animated.Value;
8
9
  animateDrawerOut: Animated.CompositeAnimation;
9
10
  animateDrawerIn: Animated.CompositeAnimation;
10
- drawerAnimationStyles: {
11
- transform: (
12
- | {
13
- translateY: Animated.AnimatedInterpolation<string | number>;
14
- translateX?: undefined;
15
- }
16
- | {
17
- translateX: Animated.AnimatedInterpolation<string | number>;
18
- translateY?: undefined;
19
- }
20
- )[];
21
- };
11
+ animateSnapBack: Animated.CompositeAnimation;
12
+ drawerAnimationStyles:
13
+ | {
14
+ opacity: Animated.Value;
15
+ transform: (
16
+ | {
17
+ translateY: Animated.AnimatedInterpolation<string | number>;
18
+ translateX?: undefined;
19
+ }
20
+ | {
21
+ translateX: Animated.AnimatedInterpolation<string | number>;
22
+ translateY?: undefined;
23
+ }
24
+ )[];
25
+ }
26
+ | {
27
+ transform: (
28
+ | {
29
+ translateY: Animated.AnimatedInterpolation<string | number>;
30
+ translateX?: undefined;
31
+ }
32
+ | {
33
+ translateX: Animated.AnimatedInterpolation<string | number>;
34
+ translateY?: undefined;
35
+ }
36
+ )[];
37
+ opacity?: undefined;
38
+ };
22
39
  animateSwipeToClose: Animated.CompositeAnimation;
23
40
  };
24
41
  //# sourceMappingURL=useDrawerAnimation.d.ts.map
package/dts/overlays/drawer/useDrawerAnimation.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useDrawerAnimation.d.ts","sourceRoot":"","sources":["../../../src/overlays/drawer/useDrawerAnimation.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAA+B,MAAM,cAAc,CAAC;AACrE,OAAO,KAAK,EAAkB,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAqB7E,eAAO,MAAM,kBAAkB,GAC7B,MAAK,gBAAgB,GAAG,SAAoB,EAC5C,iCAAgC,MAAM,GAAG,SAAiD;;;;;;;;;;;;;;CA2E3F,CAAC"}
1
+ {"version":3,"file":"useDrawerAnimation.d.ts","sourceRoot":"","sources":["../../../src/overlays/drawer/useDrawerAnimation.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAA+B,MAAM,cAAc,CAAC;AACrE,OAAO,KAAK,EAAkB,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAqB7E,eAAO,MAAM,kBAAkB,GAC7B,MAAK,gBAAgB,GAAG,SAAoB,EAC5C,iCAAgC,MAAM,GAAG,SAAiD,EAC1F,eAAe,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;CAqHvB,CAAC"}
package/dts/overlays/drawer/useDrawerPanResponder.d.ts CHANGED
@@ -2,7 +2,7 @@ import type { Animated } from 'react-native';
2
2
  import type { PinningDirection } from '@coinbase/cds-common';
3
3
  type UseDrawerPanResponderParams = {
4
4
  drawerAnimation: Animated.Value;
5
- animateDrawerIn: Animated.CompositeAnimation;
5
+ animateSnapBack: Animated.CompositeAnimation;
6
6
  pin: PinningDirection;
7
7
  disableCapturePanGestureToDismiss: boolean;
8
8
  onBlur?: () => void;
@@ -13,7 +13,7 @@ type UseDrawerPanResponderParams = {
13
13
  export declare const useDrawerPanResponder: ({
14
14
  pin,
15
15
  drawerAnimation,
16
- animateDrawerIn,
16
+ animateSnapBack,
17
17
  disableCapturePanGestureToDismiss,
18
18
  onBlur,
19
19
  handleSwipeToClose,
package/dts/overlays/tooltip/Tooltip.d.ts CHANGED
@@ -17,6 +17,8 @@ export declare const Tooltip: React.MemoExoticComponent<
17
17
  visible,
18
18
  invertColorScheme,
19
19
  elevation,
20
+ openDelay,
21
+ closeDelay,
20
22
  }: TooltipProps) => import('react/jsx-runtime').JSX.Element
21
23
  >;
22
24
  //# sourceMappingURL=Tooltip.d.ts.map
package/dts/overlays/tooltip/Tooltip.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/overlays/tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiE,MAAM,OAAO,CAAC;AAMtF,OAAO,KAAK,EAAiB,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAGlE,eAAO,MAAM,OAAO,8QAiBf,YAAY,6CA0GhB,CAAC"}
1
+ {"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/overlays/tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4E,MAAM,OAAO,CAAC;AAMjG,OAAO,KAAK,EAAiB,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAGlE,eAAO,MAAM,OAAO,qSAmBf,YAAY,6CAsJhB,CAAC"}
package/dts/overlays/tooltip/TooltipProps.d.ts CHANGED
@@ -25,6 +25,14 @@ export type TooltipBaseProps = SharedProps &
25
25
  * @default true
26
26
  */
27
27
  visible?: boolean;
28
+ /**
29
+ * Delay (in ms) before showing the tooltip after press.
30
+ */
31
+ openDelay?: number;
32
+ /**
33
+ * Delay (in ms) before hiding the tooltip after dismiss.
34
+ */
35
+ closeDelay?: number;
28
36
  /** Invert the theme's activeColorScheme for this component
29
37
  * @default true
30
38
  */
package/dts/overlays/tooltip/TooltipProps.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TooltipProps.d.ts","sourceRoot":"","sources":["../../../src/overlays/tooltip/TooltipProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,KAAK,EACV,oBAAoB,EACpB,cAAc,EACd,wBAAwB,EACxB,WAAW,EACZ,MAAM,4BAA4B,CAAC;AAEpC,MAAM,MAAM,gBAAgB,GAAG,OAAO,CAAC,oBAAoB,EAAE,QAAQ,GAAG,KAAK,CAAC,CAAC;AAE/E,MAAM,MAAM,gBAAgB,GAAG,WAAW,GACxC,cAAc,GAAG;IACf,sDAAsD;IACtD,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC;IAC7B,gDAAgD;IAChD,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;;OAIG;IACH,GAAG,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IACtB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,iIAAiI;IACjI,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,wDAAwD;IACxD,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B;;;;;OAKG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,wBAAwB,CAAC,oBAAoB,CAAC,CAAC;IACpE;;;;OAIG;IACH,4BAA4B,CAAC,EAAE,wBAAwB,CAAC,oBAAoB,CAAC,CAAC;IAC9E;;;;OAIG;IACH,2BAA2B,CAAC,EAAE,wBAAwB,CAAC,mBAAmB,CAAC,CAAC;IAC5E;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,wBAAwB,CAAC,mBAAmB,CAAC,CAAC;CACnE,CAAC;AAEJ,MAAM,MAAM,YAAY,GAAG,gBAAgB,CAAC;AAE5C,kEAAkE;AAClE,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,wBAAwB,GACzD,IAAI,CACF,YAAY,EACV,SAAS,GACT,WAAW,GACX,KAAK,GACL,QAAQ,GACR,yBAAyB,GACzB,mBAAmB,GACnB,WAAW,CACd,GAAG;IACF,aAAa,EAAE,aAAa,GAAG,SAAS,CAAC;IACzC,OAAO,EAAE,QAAQ,CAAC,KAAK,CAAC;IACxB,SAAS,EAAE,QAAQ,CAAC,kBAAkB,CAAC;IACvC,UAAU,EAAE,QAAQ,CAAC,KAAK,CAAC;IAC3B,qBAAqB,CAAC,EAAE,SAAS,CAAC,uBAAuB,CAAC,CAAC;IAC3D,kBAAkB,CAAC,EAAE,SAAS,CAAC,oBAAoB,CAAC,CAAC;CACtD,CAAC;AAEJ,MAAM,MAAM,wBAAwB,GAAG;IACrC,aAAa,EAAE,aAAa,GAAG,SAAS,CAAC;IACzC,aAAa,EAAE,eAAe,CAAC;CAChC,GAAG,IAAI,CAAC,YAAY,EAAE,WAAW,GAAG,yBAAyB,CAAC,CAAC"}
1
+ {"version":3,"file":"TooltipProps.d.ts","sourceRoot":"","sources":["../../../src/overlays/tooltip/TooltipProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,KAAK,EACV,oBAAoB,EACpB,cAAc,EACd,wBAAwB,EACxB,WAAW,EACZ,MAAM,4BAA4B,CAAC;AAEpC,MAAM,MAAM,gBAAgB,GAAG,OAAO,CAAC,oBAAoB,EAAE,QAAQ,GAAG,KAAK,CAAC,CAAC;AAE/E,MAAM,MAAM,gBAAgB,GAAG,WAAW,GACxC,cAAc,GAAG;IACf,sDAAsD;IACtD,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC;IAC7B,gDAAgD;IAChD,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;;OAIG;IACH,GAAG,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IACtB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,iIAAiI;IACjI,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,wDAAwD;IACxD,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B;;;;;OAKG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,wBAAwB,CAAC,oBAAoB,CAAC,CAAC;IACpE;;;;OAIG;IACH,4BAA4B,CAAC,EAAE,wBAAwB,CAAC,oBAAoB,CAAC,CAAC;IAC9E;;;;OAIG;IACH,2BAA2B,CAAC,EAAE,wBAAwB,CAAC,mBAAmB,CAAC,CAAC;IAC5E;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,wBAAwB,CAAC,mBAAmB,CAAC,CAAC;CACnE,CAAC;AAEJ,MAAM,MAAM,YAAY,GAAG,gBAAgB,CAAC;AAE5C,kEAAkE;AAClE,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,wBAAwB,GACzD,IAAI,CACF,YAAY,EACV,SAAS,GACT,WAAW,GACX,KAAK,GACL,QAAQ,GACR,yBAAyB,GACzB,mBAAmB,GACnB,WAAW,CACd,GAAG;IACF,aAAa,EAAE,aAAa,GAAG,SAAS,CAAC;IACzC,OAAO,EAAE,QAAQ,CAAC,KAAK,CAAC;IACxB,SAAS,EAAE,QAAQ,CAAC,kBAAkB,CAAC;IACvC,UAAU,EAAE,QAAQ,CAAC,KAAK,CAAC;IAC3B,qBAAqB,CAAC,EAAE,SAAS,CAAC,uBAAuB,CAAC,CAAC;IAC3D,kBAAkB,CAAC,EAAE,SAAS,CAAC,oBAAoB,CAAC,CAAC;CACtD,CAAC;AAEJ,MAAM,MAAM,wBAAwB,GAAG;IACrC,aAAa,EAAE,aAAa,GAAG,SAAS,CAAC;IACzC,aAAa,EAAE,eAAe,CAAC;CAChC,GAAG,IAAI,CAAC,YAAY,EAAE,WAAW,GAAG,yBAAyB,CAAC,CAAC"}
package/esm/overlays/__stories__/DrawerReduceMotion.stories.js ADDED
@@ -0,0 +1,16 @@
1
+ import React from 'react';
2
+ import { Example, ExampleScreen } from '../../examples/ExampleScreen';
3
+ import { DefaultDrawer } from './Drawers';
4
+ import { jsx as _jsx } from "react/jsx-runtime";
5
+ const DrawerReduceMotionScreen = () => {
6
+ return /*#__PURE__*/_jsx(ExampleScreen, {
7
+ children: /*#__PURE__*/_jsx(Example, {
8
+ title: "Reduce Motion Drawer",
9
+ children: /*#__PURE__*/_jsx(DefaultDrawer, {
10
+ reduceMotion: true,
11
+ pin: "bottom"
12
+ })
13
+ })
14
+ });
15
+ };
16
+ export default DrawerReduceMotionScreen;
package/esm/overlays/__stories__/Drawers.js CHANGED
@@ -10,7 +10,8 @@ import { Drawer } from '../drawer/Drawer';
10
10
  import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
11
11
  export const DefaultDrawer = _ref => {
12
12
  let {
13
- pin = 'left'
13
+ pin = 'left',
14
+ reduceMotion
14
15
  } = _ref;
15
16
  const [isVisible, setIsVisible] = useState(true);
16
17
  const setIsVisibleOff = useCallback(() => setIsVisible(false), [setIsVisible]);
@@ -22,6 +23,7 @@ export const DefaultDrawer = _ref => {
22
23
  }), isVisible && /*#__PURE__*/_jsx(Drawer, {
23
24
  onCloseComplete: setIsVisibleOff,
24
25
  pin: pin,
26
+ reduceMotion: reduceMotion,
25
27
  children: _ref2 => {
26
28
  let {
27
29
  handleClose
package/esm/overlays/__stories__/TooltipV2.stories.js CHANGED
@@ -14,6 +14,55 @@ const bottomTextSubject = 'BOTTOM';
14
14
  const customTextSubject = 'CUSTOM';
15
15
  const shortText = 'This is the short text.';
16
16
  const longText = 'This is the really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really long text.';
17
+ const DelayVariations = () => {
18
+ return /*#__PURE__*/_jsx(Example, {
19
+ title: "Delay Variations",
20
+ children: /*#__PURE__*/_jsxs(VStack, {
21
+ background: "bgAlternate",
22
+ gap: 4,
23
+ paddingY: 2,
24
+ children: [/*#__PURE__*/_jsxs(HStack, {
25
+ justifyContent: "space-evenly",
26
+ children: [/*#__PURE__*/_jsx(Tooltip, {
27
+ closeDelay: 0,
28
+ content: "Opens after 400ms",
29
+ openDelay: 400,
30
+ children: /*#__PURE__*/_jsx(Text, {
31
+ font: "label2",
32
+ children: "Open delay 400ms"
33
+ })
34
+ }), /*#__PURE__*/_jsx(Tooltip, {
35
+ closeDelay: 200,
36
+ content: "Closes after 200ms",
37
+ openDelay: 0,
38
+ children: /*#__PURE__*/_jsx(Text, {
39
+ font: "label2",
40
+ children: "Close delay 200ms"
41
+ })
42
+ })]
43
+ }), /*#__PURE__*/_jsxs(HStack, {
44
+ justifyContent: "space-evenly",
45
+ children: [/*#__PURE__*/_jsx(Tooltip, {
46
+ closeDelay: 150,
47
+ content: "Open 300 / Close 150",
48
+ openDelay: 300,
49
+ children: /*#__PURE__*/_jsx(Text, {
50
+ font: "label2",
51
+ children: "Open 300 / Close 150"
52
+ })
53
+ }), /*#__PURE__*/_jsx(Tooltip, {
54
+ closeDelay: 300,
55
+ content: "Open 500 / Close 300",
56
+ openDelay: 500,
57
+ children: /*#__PURE__*/_jsx(Text, {
58
+ font: "label2",
59
+ children: "Open 500 / Close 300"
60
+ })
61
+ })]
62
+ })]
63
+ })
64
+ });
65
+ };
17
66
  const ToolTipWithA11y = _ref => {
18
67
  let {
19
68
  tooltipText,
@@ -226,7 +275,7 @@ const RNModalTest = () => {
226
275
  const [yShiftByStatusBarHeight, setYShiftByStatusBarHeight] = useState(true);
227
276
  const toggleOnShiftMeasurementByStatusBar = useCallback(() => setYShiftByStatusBarHeight(true), []);
228
277
  const toggleOffShiftMeasurementByStatusBar = useCallback(() => setYShiftByStatusBarHeight(false), []);
229
- return /*#__PURE__*/_jsxs(_Fragment, {
278
+ return /*#__PURE__*/_jsxs(Example, {
230
279
  children: [/*#__PURE__*/_jsx(Button, {
231
280
  onPress: setVisibleToOn,
232
281
  children: "Open RN Modal Test 2"
@@ -284,14 +333,17 @@ const DisabledTest = () => {
284
333
  });
285
334
  };
286
335
  const TooltipV2Screen = () => {
287
- return /*#__PURE__*/_jsxs(ExampleScreen, {
288
- children: [/*#__PURE__*/_jsx(CDSModalTest, {}), /*#__PURE__*/_jsx(RNModalTest, {}), /*#__PURE__*/_jsx(Content, {
289
- title: "Short Text Tooltip",
290
- tooltipText: shortText
291
- }), /*#__PURE__*/_jsx(Content, {
292
- title: "Long Text Tooltip",
293
- tooltipText: longText
294
- }), /*#__PURE__*/_jsx(DisabledTest, {})]
336
+ return /*#__PURE__*/_jsx(ExampleScreen, {
337
+ children: /*#__PURE__*/_jsxs(VStack, {
338
+ gap: 2,
339
+ children: [/*#__PURE__*/_jsx(CDSModalTest, {}), /*#__PURE__*/_jsx(RNModalTest, {}), /*#__PURE__*/_jsx(DelayVariations, {}), /*#__PURE__*/_jsx(Content, {
340
+ title: "Short Text Tooltip",
341
+ tooltipText: shortText
342
+ }), /*#__PURE__*/_jsx(Content, {
343
+ title: "Long Text Tooltip",
344
+ tooltipText: longText
345
+ }), /*#__PURE__*/_jsx(DisabledTest, {})]
346
+ })
295
347
  });
296
348
  };
297
349
  export default TooltipV2Screen;
package/esm/overlays/__stories__/TrayReduceMotion.stories.js ADDED
@@ -0,0 +1,45 @@
1
+ import React, { useCallback, useRef, useState } from 'react';
2
+ import { Button } from '../../buttons/Button';
3
+ import { Example, ExampleScreen } from '../../examples/ExampleScreen';
4
+ import { VStack } from '../../layout';
5
+ import { Text } from '../../typography/Text';
6
+ import { Tray } from '../tray/Tray';
7
+ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
8
+ export const TrayReduceMotionScreen = () => {
9
+ return /*#__PURE__*/_jsx(ExampleScreen, {
10
+ children: /*#__PURE__*/_jsx(Example, {
11
+ title: "Reduce Motion Tray",
12
+ children: /*#__PURE__*/_jsx(TrayWithReduceMotion, {})
13
+ })
14
+ });
15
+ };
16
+ const TrayWithReduceMotion = () => {
17
+ const [isTrayVisible, setIsTrayVisible] = useState(false);
18
+ const setIsTrayVisibleOff = useCallback(() => setIsTrayVisible(false), [setIsTrayVisible]);
19
+ const setIsTrayVisibleOn = useCallback(() => setIsTrayVisible(true), [setIsTrayVisible]);
20
+ const trayRef = useRef(null);
21
+ const handleTrayVisibilityChange = useCallback(e => {
22
+ console.log('Tray visibility changed:', e);
23
+ }, []);
24
+ return /*#__PURE__*/_jsxs(_Fragment, {
25
+ children: [/*#__PURE__*/_jsx(Button, {
26
+ onPress: setIsTrayVisibleOn,
27
+ children: "Open"
28
+ }), isTrayVisible && /*#__PURE__*/_jsx(Tray, {
29
+ ref: trayRef,
30
+ reduceMotion: true,
31
+ handleBarVariant: "inside",
32
+ onCloseComplete: setIsTrayVisibleOff,
33
+ onVisibilityChange: handleTrayVisibilityChange,
34
+ title: "Header",
35
+ children: /*#__PURE__*/_jsx(VStack, {
36
+ paddingX: 3,
37
+ children: /*#__PURE__*/_jsx(Text, {
38
+ font: "body",
39
+ children: "Curabitur commodo nulla vel dolor vulputate vestibulum. Nulla et nisl molestie, interdum lorem id, viverra."
40
+ })
41
+ })
42
+ })]
43
+ });
44
+ };
45
+ export default TrayReduceMotionScreen;
package/esm/overlays/drawer/Drawer.js CHANGED
@@ -1,4 +1,4 @@
1
- const _excluded = ["children", "pin", "onCloseComplete", "preventDismissGestures", "preventHardwareBackBehaviorAndroid", "handleBarVariant", "hideHandleBar", "disableCapturePanGestureToDismiss", "onBlur", "verticalDrawerPercentageOfView", "handleBarAccessibilityLabel", "accessibilityLabel", "accessibilityLabelledBy", "style", "styles", "accessibilityRole", "animationType"];
1
+ const _excluded = ["children", "pin", "onCloseComplete", "preventDismissGestures", "preventHardwareBackBehaviorAndroid", "handleBarVariant", "hideHandleBar", "disableCapturePanGestureToDismiss", "onBlur", "verticalDrawerPercentageOfView", "handleBarAccessibilityLabel", "accessibilityLabel", "accessibilityLabelledBy", "reduceMotion", "style", "styles", "accessibilityRole", "animationType"];
2
2
  function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
3
3
  function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
4
4
  import React, { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
@@ -38,6 +38,7 @@ export const Drawer = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Drawer(
38
38
  handleBarAccessibilityLabel = 'Dismiss',
39
39
  accessibilityLabel,
40
40
  accessibilityLabelledBy,
41
+ reduceMotion,
41
42
  style,
42
43
  styles,
43
44
  accessibilityRole = 'alert',
@@ -54,9 +55,10 @@ export const Drawer = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Drawer(
54
55
  drawerAnimation,
55
56
  animateDrawerOut,
56
57
  animateDrawerIn,
58
+ animateSnapBack,
57
59
  drawerAnimationStyles,
58
60
  animateSwipeToClose
59
- } = useDrawerAnimation(pin, verticalDrawerPercentageOfView);
61
+ } = useDrawerAnimation(pin, verticalDrawerPercentageOfView, reduceMotion);
60
62
  const [opacityAnimation, animateOverlayIn, animateOverlayOut] = useOverlayAnimation(drawerAnimationDefaultDuration);
61
63
  const paddingStyles = useDrawerSpacing(pin);
62
64
  const isMounted = useRef(false);
@@ -100,7 +102,7 @@ export const Drawer = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Drawer(
100
102
  const panGestureHandlers = useDrawerPanResponder({
101
103
  pin,
102
104
  drawerAnimation,
103
- animateDrawerIn,
105
+ animateSnapBack,
104
106
  disableCapturePanGestureToDismiss,
105
107
  onBlur,
106
108
  handleSwipeToClose,
package/esm/overlays/drawer/useDrawerAnimation.js CHANGED
@@ -1,3 +1,4 @@
1
+ function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
1
2
  import { useMemo, useRef } from 'react';
2
3
  import { Animated, Easing, useWindowDimensions } from 'react-native';
3
4
  import { animateDrawerInConfig, animateDrawerOutConfig, drawerAnimationDefaultDuration, MAX_OVER_DRAG } from '@coinbase/cds-common/animation/drawer';
@@ -8,7 +9,7 @@ const animateDrawer = {
8
9
  animateIn: convertMotionConfig(animateDrawerInConfig),
9
10
  animateOut: convertMotionConfig(animateDrawerOutConfig)
10
11
  };
11
- export const useDrawerAnimation = function (pin, verticalDrawerPercentageOfView) {
12
+ export const useDrawerAnimation = function (pin, verticalDrawerPercentageOfView, reduceMotion) {
12
13
  if (pin === void 0) {
13
14
  pin = 'bottom';
14
15
  }
@@ -19,8 +20,30 @@ export const useDrawerAnimation = function (pin, verticalDrawerPercentageOfView)
19
20
  const isPinVertical = pin === 'top' || pin === 'bottom';
20
21
  const drawerDimension = isPinVertical ? windowDimensions.height * verticalDrawerPercentageOfView : windowDimensions.width * horizontalDrawerPercentageOfView;
21
22
  const drawerAnimation = useRef(new Animated.Value(0));
22
- const animateDrawerIn = useMemo(() => Animated.timing(drawerAnimation.current, animateDrawer.animateIn), []);
23
- const animateDrawerOut = useMemo(() => Animated.timing(drawerAnimation.current, animateDrawer.animateOut), []);
23
+ // Separate opacity value used when reduceMotion is true so that
24
+ // open/close-button fades are independent of the transform that
25
+ // the pan-responder drives during swipe gestures.
26
+ const contentOpacity = useRef(new Animated.Value(reduceMotion ? 0 : 1));
27
+ const animateDrawerIn = useMemo(() => {
28
+ if (reduceMotion) {
29
+ return Animated.parallel([Animated.timing(drawerAnimation.current, _extends({}, animateDrawer.animateIn, {
30
+ duration: 0
31
+ })), Animated.timing(contentOpacity.current, animateDrawer.animateIn)]);
32
+ }
33
+ return Animated.timing(drawerAnimation.current, animateDrawer.animateIn);
34
+ }, [reduceMotion]);
35
+ const animateDrawerOut = useMemo(() => {
36
+ if (reduceMotion) {
37
+ return Animated.timing(contentOpacity.current, animateDrawer.animateOut);
38
+ }
39
+ return Animated.timing(drawerAnimation.current, animateDrawer.animateOut);
40
+ }, [reduceMotion]);
41
+ const animateSnapBack = useMemo(() => {
42
+ if (reduceMotion) {
43
+ return Animated.parallel([Animated.timing(drawerAnimation.current, animateDrawer.animateIn), Animated.timing(contentOpacity.current, animateDrawer.animateIn)]);
44
+ }
45
+ return Animated.timing(drawerAnimation.current, animateDrawer.animateIn);
46
+ }, [reduceMotion]);
24
47
 
25
48
  /** custom animation config for swipe and fling to close that has no friction and is faster */
26
49
  const animateSwipeToClose = useMemo(() => Animated.timing(drawerAnimation.current, {
@@ -62,15 +85,25 @@ export const useDrawerAnimation = function (pin, verticalDrawerPercentageOfView)
62
85
  };
63
86
  }
64
87
  }, [pin, drawerDimension]);
88
+ const drawerAnimationStyles = useMemo(() => {
89
+ if (reduceMotion) {
90
+ return {
91
+ opacity: contentOpacity.current,
92
+ transform: [translation]
93
+ };
94
+ }
95
+ return {
96
+ transform: [translation]
97
+ };
98
+ }, [reduceMotion, translation]);
65
99
  return useMemo(() => {
66
100
  return {
67
101
  drawerAnimation: drawerAnimation.current,
68
102
  animateDrawerOut,
69
103
  animateDrawerIn,
70
- drawerAnimationStyles: {
71
- transform: [translation]
72
- },
104
+ animateSnapBack,
105
+ drawerAnimationStyles,
73
106
  animateSwipeToClose
74
107
  };
75
- }, [animateDrawerOut, animateDrawerIn, translation, animateSwipeToClose]);
108
+ }, [animateDrawerOut, animateDrawerIn, animateSnapBack, drawerAnimationStyles, animateSwipeToClose]);
76
109
  };
package/esm/overlays/drawer/useDrawerPanResponder.js CHANGED
@@ -12,7 +12,7 @@ export const useDrawerPanResponder = _ref => {
12
12
  let {
13
13
  pin,
14
14
  drawerAnimation,
15
- animateDrawerIn,
15
+ animateSnapBack,
16
16
  disableCapturePanGestureToDismiss,
17
17
  onBlur,
18
18
  handleSwipeToClose,
@@ -172,10 +172,10 @@ export const useDrawerPanResponder = _ref => {
172
172
  onBlur == null || onBlur();
173
173
  handleSwipeToClose();
174
174
  } else {
175
- animateDrawerIn.start();
175
+ animateSnapBack.start();
176
176
  }
177
177
  }
178
178
  });
179
- }, [drawerAnimation, animateDrawerIn, parseGestureState, shouldCaptureGestures, shouldDismiss, drawerWidth, drawerHeight, pin, isHorizontalDrawer, onBlur, handleSwipeToClose, opacityAnimation]);
179
+ }, [drawerAnimation, animateSnapBack, parseGestureState, shouldCaptureGestures, shouldDismiss, drawerWidth, drawerHeight, pin, isHorizontalDrawer, onBlur, handleSwipeToClose, opacityAnimation]);
180
180
  return panGestureHandlers;
181
181
  };
package/esm/overlays/tooltip/Tooltip.js CHANGED
@@ -1,5 +1,5 @@
1
1
  function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
2
- import React, { Fragment, memo, useCallback, useMemo, useRef, useState } from 'react';
2
+ import React, { Fragment, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
3
3
  import { Modal as RNModal, TouchableOpacity, View } from 'react-native';
4
4
  import { InvertedThemeProvider } from '../../system/ThemeProvider';
5
5
  import { InternalTooltip } from './InternalTooltip';
@@ -21,12 +21,16 @@ export const Tooltip = /*#__PURE__*/memo(_ref => {
21
21
  accessibilityHintForContent,
22
22
  visible,
23
23
  invertColorScheme = true,
24
- elevation
24
+ elevation,
25
+ openDelay,
26
+ closeDelay
25
27
  } = _ref;
26
28
  const subjectRef = useRef(null);
27
29
  const [isOpen, setIsOpen] = useState(false);
28
30
  const isVisible = visible !== false && isOpen;
29
31
  const [subjectLayout, setSubjectLayout] = useState();
32
+ const openTimeoutRef = useRef(null);
33
+ const closeTimeoutRef = useRef(null);
30
34
  const WrapperComponent = invertColorScheme ? InvertedThemeProvider : Fragment;
31
35
  const {
32
36
  opacity,
@@ -34,14 +38,36 @@ export const Tooltip = /*#__PURE__*/memo(_ref => {
34
38
  animateIn,
35
39
  animateOut
36
40
  } = useTooltipAnimation(placement);
41
+ const clearOpenTimeout = useCallback(() => {
42
+ if (openTimeoutRef.current) {
43
+ clearTimeout(openTimeoutRef.current);
44
+ openTimeoutRef.current = null;
45
+ }
46
+ }, []);
47
+ const clearCloseTimeout = useCallback(() => {
48
+ if (closeTimeoutRef.current) {
49
+ clearTimeout(closeTimeoutRef.current);
50
+ closeTimeoutRef.current = null;
51
+ }
52
+ }, []);
37
53
  const handleRequestClose = useCallback(() => {
38
- animateOut.start(() => {
39
- setIsOpen(false);
40
- onCloseTooltip == null || onCloseTooltip();
41
- });
42
- }, [animateOut, onCloseTooltip]);
54
+ clearOpenTimeout();
55
+ clearCloseTimeout();
56
+ const closeTooltip = () => {
57
+ animateOut.start(() => {
58
+ setIsOpen(false);
59
+ onCloseTooltip == null || onCloseTooltip();
60
+ });
61
+ };
62
+ if (closeDelay && closeDelay > 0) {
63
+ closeTimeoutRef.current = setTimeout(closeTooltip, closeDelay);
64
+ } else {
65
+ closeTooltip();
66
+ }
67
+ }, [animateOut, clearCloseTimeout, clearOpenTimeout, closeDelay, onCloseTooltip]);
43
68
  const handlePressSubject = useCallback(() => {
44
69
  var _subjectRef$current;
70
+ clearCloseTimeout();
45
71
  (_subjectRef$current = subjectRef.current) == null || _subjectRef$current.measure((x, y, width, height, pageOffsetX, pageOffsetY) => {
46
72
  setSubjectLayout({
47
73
  width,
@@ -50,9 +76,17 @@ export const Tooltip = /*#__PURE__*/memo(_ref => {
50
76
  pageOffsetY
51
77
  });
52
78
  });
53
- setIsOpen(true);
54
- onOpenTooltip == null || onOpenTooltip();
55
- }, [onOpenTooltip]);
79
+ const openTooltip = () => {
80
+ setIsOpen(true);
81
+ onOpenTooltip == null || onOpenTooltip();
82
+ };
83
+ clearOpenTimeout();
84
+ if (openDelay && openDelay > 0) {
85
+ openTimeoutRef.current = setTimeout(openTooltip, openDelay);
86
+ } else {
87
+ openTooltip();
88
+ }
89
+ }, [clearCloseTimeout, clearOpenTimeout, onOpenTooltip, openDelay]);
56
90
 
57
91
  // The accessibility props for the trigger component. Trigger component
58
92
  // equals the component where when you click on it, it will show the tooltip
@@ -66,6 +100,12 @@ export const Tooltip = /*#__PURE__*/memo(_ref => {
66
100
  onAccessibilityEscape: handleRequestClose,
67
101
  onAccessibilityTap: handleRequestClose
68
102
  }), [content, accessibilityLabelForContent, accessibilityHintForContent, handleRequestClose]);
103
+ useEffect(() => {
104
+ return () => {
105
+ clearOpenTimeout();
106
+ clearCloseTimeout();
107
+ };
108
+ }, [clearCloseTimeout, clearOpenTimeout]);
69
109
  return /*#__PURE__*/_jsxs(View, {
70
110
  ref: subjectRef,
71
111
  collapsable: false,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@coinbase/cds-mobile",
3
- "version": "8.44.2",
3
+ "version": "8.46.0",
4
4
  "description": "Coinbase Design System - Mobile",
5
5
  "repository": {
6
6
  "type": "git",
@@ -198,7 +198,7 @@
198
198
  "react-native-svg": "^14.1.0"
199
199
  },
200
200
  "dependencies": {
201
- "@coinbase/cds-common": "^8.44.2",
201
+ "@coinbase/cds-common": "^8.46.0",
202
202
  "@coinbase/cds-icons": "^5.11.0",
203
203
  "@coinbase/cds-illustrations": "^4.31.0",
204
204
  "@coinbase/cds-lottie-files": "^3.3.4",