@coinbase/cds-mobile 9.10.2 → 9.11.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.
- package/CHANGELOG.md +18 -0
- package/dts/accordion/AccordionHeader.d.ts +10 -1
- package/dts/accordion/AccordionHeader.d.ts.map +1 -1
- package/dts/accordion/AccordionItem.d.ts +1 -0
- package/dts/accordion/AccordionItem.d.ts.map +1 -1
- package/dts/examples/ExampleScreen.d.ts.map +1 -1
- package/dts/overlays/drawer/Drawer.d.ts.map +1 -1
- package/dts/overlays/drawer/useDrawerPanResponder.d.ts.map +1 -1
- package/dts/visualizations/chart/scrubber/ScrubberProvider.d.ts.map +1 -1
- package/esm/accordion/AccordionHeader.js +11 -4
- package/esm/accordion/AccordionItem.js +2 -0
- package/esm/accordion/__stories__/Accordion.stories.js +42 -0
- package/esm/controls/InputStack.js +0 -6
- package/esm/examples/ExampleScreen.js +2 -2
- package/esm/overlays/drawer/Drawer.js +44 -34
- package/esm/overlays/drawer/useDrawerPanResponder.js +8 -3
- package/esm/visualizations/chart/scrubber/ScrubberProvider.js +37 -26
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -8,6 +8,24 @@ All notable changes to this project will be documented in this file.
|
|
|
8
8
|
|
|
9
9
|
<!-- template-start -->
|
|
10
10
|
|
|
11
|
+
## 9.11.0 (8/7/2026 PST)
|
|
12
|
+
|
|
13
|
+
#### 🚀 Updates
|
|
14
|
+
|
|
15
|
+
- Feat: add a tertiary-level header to AccordionItem. [[#830](https://github.com/coinbase/cds/pull/830)]
|
|
16
|
+
|
|
17
|
+
## 9.10.4 (8/6/2026 PST)
|
|
18
|
+
|
|
19
|
+
#### 🐞 Fixes
|
|
20
|
+
|
|
21
|
+
- Enable chart scrubbing inside Tray/Drawer on Android (GestureHandlerRootView in Modal; chart claims touch responder so outside-handle pan-to-dismiss does not block long-press scrub). [[#827](https://github.com/coinbase/cds/pull/827)]
|
|
22
|
+
|
|
23
|
+
## 9.10.3 (8/5/2026 PST)
|
|
24
|
+
|
|
25
|
+
#### 🐞 Fixes
|
|
26
|
+
|
|
27
|
+
- Fix: remove unnecessary padding on inputstack. [[#823](https://github.com/coinbase/cds/pull/823)]
|
|
28
|
+
|
|
11
29
|
## 9.10.2 (7/31/2026 PST)
|
|
12
30
|
|
|
13
31
|
#### 🐞 Fixes
|
|
@@ -14,6 +14,10 @@ export type AccordionTitleBaseProps = {
|
|
|
14
14
|
* Subtitle of the accordion item
|
|
15
15
|
*/
|
|
16
16
|
subtitle?: string;
|
|
17
|
+
/**
|
|
18
|
+
* Tertiary text of the accordion item. Uses the CDS `legal` font.
|
|
19
|
+
*/
|
|
20
|
+
tertiaryTitle?: string;
|
|
17
21
|
};
|
|
18
22
|
export type AccordionIconBaseProps = Pick<CollapsibleBaseProps, 'collapsed'>;
|
|
19
23
|
export type AccordionHeaderBaseProps = SharedProps &
|
|
@@ -37,7 +41,11 @@ export declare const AccordionMedia: React.MemoExoticComponent<
|
|
|
37
41
|
>;
|
|
38
42
|
export type AccordionTitleProps = AccordionTitleBaseProps;
|
|
39
43
|
export declare const AccordionTitle: React.MemoExoticComponent<
|
|
40
|
-
({
|
|
44
|
+
({
|
|
45
|
+
title,
|
|
46
|
+
subtitle,
|
|
47
|
+
tertiaryTitle,
|
|
48
|
+
}: AccordionTitleProps) => import('react/jsx-runtime').JSX.Element
|
|
41
49
|
>;
|
|
42
50
|
export type AccordionIconProps = AccordionIconBaseProps;
|
|
43
51
|
export declare const AccordionIcon: React.MemoExoticComponent<
|
|
@@ -54,6 +62,7 @@ export declare const AccordionHeader: React.MemoExoticComponent<
|
|
|
54
62
|
itemKey,
|
|
55
63
|
title,
|
|
56
64
|
subtitle,
|
|
65
|
+
tertiaryTitle,
|
|
57
66
|
onPress,
|
|
58
67
|
media,
|
|
59
68
|
collapsed,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionHeader.d.ts","sourceRoot":"","sources":["../../src/accordion/AccordionHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAOzC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAE1E,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AASvE,MAAM,MAAM,uBAAuB,GAAG;IAEpC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG;IACpC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"AccordionHeader.d.ts","sourceRoot":"","sources":["../../src/accordion/AccordionHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAOzC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAE1E,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AASvE,MAAM,MAAM,uBAAuB,GAAG;IAEpC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG;IACpC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG,IAAI,CAAC,oBAAoB,EAAE,WAAW,CAAC,CAAC;AAE7E,MAAM,MAAM,wBAAwB,GAAG,WAAW,GAChD,uBAAuB,GACvB,uBAAuB,GACvB,sBAAsB,GAAG;IACvB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC;;;;OAIG;IACH,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEJ,MAAM,MAAM,mBAAmB,GAAG,uBAAuB,CAAC;AAE1D,eAAO,MAAM,cAAc,wCAAoB,mBAAmB,6CAAwB,CAAC;AAE3F,MAAM,MAAM,mBAAmB,GAAG,uBAAuB,CAAC;AAE1D,eAAO,MAAM,cAAc,iEAA6C,mBAAmB,6CAgBzF,CAAC;AAEH,MAAM,MAAM,kBAAkB,GAAG,sBAAsB,CAAC;AAExD,eAAO,MAAM,aAAa,4CAAwB,kBAAkB,6CAMlE,CAAC;AAEH,MAAM,MAAM,oBAAoB,GAAG,wBAAwB,CAAC;AAE5D;;;GAGG;AACH,eAAO,MAAM,eAAe,iIAWvB,oBAAoB,GAAG;IACxB,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;CACvB,6CA8BF,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionItem.d.ts","sourceRoot":"","sources":["../../src/accordion/AccordionItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAMpD,OAAO,EAAmB,KAAK,wBAAwB,EAAE,MAAM,mBAAmB,CAAC;AACnF,OAAO,EAAkB,KAAK,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AAEhF,MAAM,MAAM,sBAAsB,GAAG,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC,GAC3D,IAAI,CAAC,wBAAwB,EAAE,WAAW,CAAC,GAC3C,IAAI,CAAC,uBAAuB,EAAE,WAAW,CAAC,GAAG;IAC3C,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC;IACzC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC;CACzC,CAAC;AAEJ,MAAM,MAAM,kBAAkB,GAAG,sBAAsB,CAAC;AAExD;;;;GAIG;AACH,eAAO,MAAM,aAAa,
|
|
1
|
+
{"version":3,"file":"AccordionItem.d.ts","sourceRoot":"","sources":["../../src/accordion/AccordionItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAMpD,OAAO,EAAmB,KAAK,wBAAwB,EAAE,MAAM,mBAAmB,CAAC;AACnF,OAAO,EAAkB,KAAK,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AAEhF,MAAM,MAAM,sBAAsB,GAAG,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC,GAC3D,IAAI,CAAC,wBAAwB,EAAE,WAAW,CAAC,GAC3C,IAAI,CAAC,uBAAuB,EAAE,WAAW,CAAC,GAAG;IAC3C,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC;IACzC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC;CACzC,CAAC;AAEJ,MAAM,MAAM,kBAAkB,GAAG,sBAAsB,CAAC;AAExD;;;;GAIG;AACH,eAAO,MAAM,aAAa,yIAarB,kBAAkB,6CA4BtB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExampleScreen.d.ts","sourceRoot":"","sources":["../../src/examples/ExampleScreen.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAiB,KAAK,GAAG,EAA4C,MAAM,OAAO,CAAC;AACjG,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yCAAyC,CAAC;AAG5E,OAAO,KAAK,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAM5D,KAAK,qBAAqB,GAAG,MAAM,WAAW,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;AAC5D,MAAM,MAAM,YAAY,GAAG;IACzB,QAAQ,EAAE,qBAAqB,GAAG,KAAK,CAAC,SAAS,EAAE,GAAG,KAAK,CAAC,SAAS,CAAC;IACtE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B,GAAG,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;AAM/B,eAAO,MAAM,OAAO,GAAI,kEAOrB,YAAY,4CA8Bd,CAAC;AAEF,eAAO,MAAM,aAAa;qCAIvB,KAAK,CAAC,iBAAiB,CAAC,YAAY,CAAC,GAAG;QACzC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;KAC7B;;
|
|
1
|
+
{"version":3,"file":"ExampleScreen.d.ts","sourceRoot":"","sources":["../../src/examples/ExampleScreen.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAiB,KAAK,GAAG,EAA4C,MAAM,OAAO,CAAC;AACjG,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yCAAyC,CAAC;AAG5E,OAAO,KAAK,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAM5D,KAAK,qBAAqB,GAAG,MAAM,WAAW,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;AAC5D,MAAM,MAAM,YAAY,GAAG;IACzB,QAAQ,EAAE,qBAAqB,GAAG,KAAK,CAAC,SAAS,EAAE,GAAG,KAAK,CAAC,SAAS,CAAC;IACtE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B,GAAG,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;AAM/B,eAAO,MAAM,OAAO,GAAI,kEAOrB,YAAY,4CA8Bd,CAAC;AAEF,eAAO,MAAM,aAAa;qCAIvB,KAAK,CAAC,iBAAiB,CAAC,YAAY,CAAC,GAAG;QACzC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;KAC7B;;CAyCA,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/overlays/drawer/Drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAQN,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/overlays/drawer/Drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAQN,MAAM,OAAO,CAAC;AAUf,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAcrF,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yCAAyC,CAAC;AAChF,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,qDAAqD,CAAC;AACpG,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAM1E,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAgBxE,MAAM,MAAM,oBAAoB,GAAG,CAAC,IAAI,EAAE;IAAE,WAAW,EAAE,MAAM,IAAI,CAAA;CAAE,KAAK,KAAK,CAAC,SAAS,CAAC;AAE1F,MAAM,MAAM,kBAAkB,GAAG;IAC/B,gDAAgD;IAChD,WAAW,EAAE,MAAM,IAAI,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,WAAW,GACvC,IAAI,CAAC,wBAAwB,EAAE,oBAAoB,GAAG,yBAAyB,CAAC,GAChF,IAAI,CAAC,UAAU,EAAE,gBAAgB,GAAG,UAAU,CAAC,GAAG;IAChD,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,oBAAoB,GAAG,KAAK,CAAC,SAAS,CAAC;IAClD;;;SAGK;IACL,GAAG,CAAC,EAAE,gBAAgB,CAAC;IACvB;;OAEG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC;;OAEG;IACH,kCAAkC,CAAC,EAAE,OAAO,CAAC;IAC7C;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAC;IAC7C;;SAEK;IACL,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,uDAAuD;IACvD,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B;;;OAGG;IACH,iCAAiC,CAAC,EAAE,OAAO,CAAC;IAC5C,oEAAoE;IACpE,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;;OAGG;IACH,8BAA8B,CAAC,EAAE,MAAM,CAAC;IACxC;;;OAGG;IACH,2BAA2B,CAAC,EAAE,MAAM,CAAC;IACrC;;;;OAIG;IACH,YAAY,CAAC,EAAE,oBAAoB,GAAG,KAAK,CAAC,SAAS,CAAC;IACtD;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,wDAAwD;IACxD,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B;;OAEG;IACH,4BAA4B,CAAC,EAAE,OAAO,CAAC;CACxC,CAAC;AAEJ,MAAM,MAAM,WAAW,GAAG,eAAe,GAAG;IAC1C,MAAM,CAAC,EAAE;QACP,6BAA6B;QAC7B,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B,+BAA+B;QAC/B,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC/B,yCAAyC;QACzC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACjC,mCAAmC;QACnC,SAAS,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;QACpC,mCAAmC;QACnC,eAAe,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACvC,qCAAqC;QACrC,MAAM,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KAC/B,CAAC;CACH,CAAC;AAMF,eAAO,MAAM,MAAM,iDAId,WAAW,GAAG;IACf,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC;CACrC,6CAwOF,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useDrawerPanResponder.d.ts","sourceRoot":"","sources":["../../../src/overlays/drawer/useDrawerPanResponder.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAmD,MAAM,cAAc,CAAC;AAc9F,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yCAAyC,CAAC;
|
|
1
|
+
{"version":3,"file":"useDrawerPanResponder.d.ts","sourceRoot":"","sources":["../../../src/overlays/drawer/useDrawerPanResponder.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAmD,MAAM,cAAc,CAAC;AAc9F,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yCAAyC,CAAC;AAMhF,KAAK,2BAA2B,GAAG;IACjC,eAAe,EAAE,QAAQ,CAAC,KAAK,CAAC;IAChC,eAAe,EAAE,QAAQ,CAAC,kBAAkB,CAAC;IAC7C,GAAG,EAAE,gBAAgB,CAAC;IACtB,iCAAiC,EAAE,OAAO,CAAC;IAC3C,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B,gBAAgB,EAAE,QAAQ,CAAC,KAAK,CAAC;IACjC,8BAA8B,EAAE,MAAM,CAAC;CACxC,CAAC;AASF,eAAO,MAAM,qBAAqB,GAAI,6JASnC,2BAA2B,gDAqO7B,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScrubberProvider.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/chart/scrubber/ScrubberProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAOpD,OAAO,EAAmB,KAAK,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAI9E,MAAM,MAAM,qBAAqB,GAAG,OAAO,CAAC,IAAI,CAAC,oBAAoB,EAAE,iBAAiB,CAAC,CAAC,GAAG;IAC3F,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC;;;OAGG;IACH,wBAAwB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;CAChE,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA+
|
|
1
|
+
{"version":3,"file":"ScrubberProvider.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/chart/scrubber/ScrubberProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAOpD,OAAO,EAAmB,KAAK,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAI9E,MAAM,MAAM,qBAAqB,GAAG,OAAO,CAAC,IAAI,CAAC,oBAAoB,EAAE,iBAAiB,CAAC,CAAC,GAAG;IAC3F,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC;;;OAGG;IACH,wBAAwB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;CAChE,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA+K5D,CAAC"}
|
|
@@ -22,7 +22,8 @@ export const AccordionMedia = /*#__PURE__*/memo(_ref => {
|
|
|
22
22
|
export const AccordionTitle = /*#__PURE__*/memo(_ref2 => {
|
|
23
23
|
let {
|
|
24
24
|
title,
|
|
25
|
-
subtitle
|
|
25
|
+
subtitle,
|
|
26
|
+
tertiaryTitle
|
|
26
27
|
} = _ref2;
|
|
27
28
|
return /*#__PURE__*/_jsx(Box, {
|
|
28
29
|
flexGrow: 1,
|
|
@@ -33,9 +34,13 @@ export const AccordionTitle = /*#__PURE__*/memo(_ref2 => {
|
|
|
33
34
|
font: "headline",
|
|
34
35
|
children: title
|
|
35
36
|
}), !!subtitle && /*#__PURE__*/_jsx(Text, {
|
|
36
|
-
color:
|
|
37
|
-
font: "
|
|
37
|
+
color: tertiaryTitle ? undefined : 'fgMuted',
|
|
38
|
+
font: "label2",
|
|
38
39
|
children: subtitle
|
|
40
|
+
}), !!tertiaryTitle && /*#__PURE__*/_jsx(Text, {
|
|
41
|
+
color: "fgMuted",
|
|
42
|
+
font: "legal",
|
|
43
|
+
children: tertiaryTitle
|
|
39
44
|
})]
|
|
40
45
|
})
|
|
41
46
|
});
|
|
@@ -61,6 +66,7 @@ export const AccordionHeader = /*#__PURE__*/memo(_ref4 => {
|
|
|
61
66
|
itemKey,
|
|
62
67
|
title,
|
|
63
68
|
subtitle,
|
|
69
|
+
tertiaryTitle,
|
|
64
70
|
onPress,
|
|
65
71
|
media,
|
|
66
72
|
collapsed,
|
|
@@ -71,7 +77,7 @@ export const AccordionHeader = /*#__PURE__*/memo(_ref4 => {
|
|
|
71
77
|
activeKey
|
|
72
78
|
} = useAccordionContext();
|
|
73
79
|
const spacing = useCellSpacing();
|
|
74
|
-
const accessibilityLabel =
|
|
80
|
+
const accessibilityLabel = [title, subtitle, tertiaryTitle].filter(Boolean).join(', ');
|
|
75
81
|
const handlePress = useCallback(() => {
|
|
76
82
|
onPress == null || onPress(itemKey);
|
|
77
83
|
setActiveKey(itemKey === activeKey ? null : itemKey);
|
|
@@ -98,6 +104,7 @@ export const AccordionHeader = /*#__PURE__*/memo(_ref4 => {
|
|
|
98
104
|
media: media
|
|
99
105
|
}), /*#__PURE__*/_jsx(AccordionTitle, {
|
|
100
106
|
subtitle: subtitle,
|
|
107
|
+
tertiaryTitle: tertiaryTitle,
|
|
101
108
|
title: title
|
|
102
109
|
}), /*#__PURE__*/_jsx(AccordionIcon, {
|
|
103
110
|
collapsed: collapsed
|
|
@@ -15,6 +15,7 @@ export const AccordionItem = /*#__PURE__*/memo(_ref => {
|
|
|
15
15
|
itemKey,
|
|
16
16
|
title,
|
|
17
17
|
subtitle,
|
|
18
|
+
tertiaryTitle,
|
|
18
19
|
children,
|
|
19
20
|
onPress,
|
|
20
21
|
media,
|
|
@@ -38,6 +39,7 @@ export const AccordionItem = /*#__PURE__*/memo(_ref => {
|
|
|
38
39
|
media: media,
|
|
39
40
|
onPress: onPress,
|
|
40
41
|
subtitle: subtitle,
|
|
42
|
+
tertiaryTitle: tertiaryTitle,
|
|
41
43
|
testID: testID && testID + "-header",
|
|
42
44
|
title: title
|
|
43
45
|
}), /*#__PURE__*/_jsx(AccordionPanel, {
|
|
@@ -25,6 +25,7 @@ const BasicAccordion = () => {
|
|
|
25
25
|
onChange: handlePress,
|
|
26
26
|
children: [/*#__PURE__*/_jsx(AccordionItem, {
|
|
27
27
|
itemKey: "1",
|
|
28
|
+
tertiaryTitle: "tertiaryTitle1",
|
|
28
29
|
media: /*#__PURE__*/_jsx(CellMedia, {
|
|
29
30
|
active: true,
|
|
30
31
|
name: "wallet",
|
|
@@ -40,6 +41,7 @@ const BasicAccordion = () => {
|
|
|
40
41
|
})
|
|
41
42
|
}), /*#__PURE__*/_jsx(AccordionItem, {
|
|
42
43
|
itemKey: "2",
|
|
44
|
+
tertiaryTitle: "tertiaryTitle2",
|
|
43
45
|
media: /*#__PURE__*/_jsx(CellMedia, {
|
|
44
46
|
active: true,
|
|
45
47
|
name: "wallet",
|
|
@@ -114,6 +116,42 @@ const NoSubtitle = () => {
|
|
|
114
116
|
})]
|
|
115
117
|
});
|
|
116
118
|
};
|
|
119
|
+
const SubtitleWithoutTertiaryTitle = () => {
|
|
120
|
+
return /*#__PURE__*/_jsxs(Accordion, {
|
|
121
|
+
defaultActiveKey: "1",
|
|
122
|
+
onChange: handlePress,
|
|
123
|
+
children: [/*#__PURE__*/_jsx(AccordionItem, {
|
|
124
|
+
itemKey: "1",
|
|
125
|
+
media: /*#__PURE__*/_jsx(CellMedia, {
|
|
126
|
+
active: true,
|
|
127
|
+
name: "wallet",
|
|
128
|
+
type: "icon"
|
|
129
|
+
}),
|
|
130
|
+
subtitle: "subtitle1",
|
|
131
|
+
title: "Accordion #1",
|
|
132
|
+
children: /*#__PURE__*/_jsx(TextInput, {
|
|
133
|
+
compact: true,
|
|
134
|
+
label: "Amount",
|
|
135
|
+
placeholder: "8293323.23",
|
|
136
|
+
suffix: "USD"
|
|
137
|
+
})
|
|
138
|
+
}), /*#__PURE__*/_jsx(AccordionItem, {
|
|
139
|
+
itemKey: "2",
|
|
140
|
+
media: /*#__PURE__*/_jsx(CellMedia, {
|
|
141
|
+
active: true,
|
|
142
|
+
name: "wallet",
|
|
143
|
+
type: "icon"
|
|
144
|
+
}),
|
|
145
|
+
onPress: handlePress,
|
|
146
|
+
subtitle: "subtitle2",
|
|
147
|
+
title: "Accordion #2",
|
|
148
|
+
children: /*#__PURE__*/_jsx(Text, {
|
|
149
|
+
font: "body",
|
|
150
|
+
children: "Accordion Content"
|
|
151
|
+
})
|
|
152
|
+
})]
|
|
153
|
+
});
|
|
154
|
+
};
|
|
117
155
|
const TitleOnly = () => {
|
|
118
156
|
return /*#__PURE__*/_jsxs(Accordion, {
|
|
119
157
|
defaultActiveKey: "2",
|
|
@@ -193,6 +231,10 @@ const AccordionScreen = () => {
|
|
|
193
231
|
inline: true,
|
|
194
232
|
title: "No subtitle",
|
|
195
233
|
children: /*#__PURE__*/_jsx(NoSubtitle, {})
|
|
234
|
+
}), /*#__PURE__*/_jsx(AccordionExample, {
|
|
235
|
+
inline: true,
|
|
236
|
+
title: "Subtitle without tertiary title",
|
|
237
|
+
children: /*#__PURE__*/_jsx(SubtitleWithoutTertiaryTitle, {})
|
|
196
238
|
}), /*#__PURE__*/_jsx(AccordionExample, {
|
|
197
239
|
inline: true,
|
|
198
240
|
title: "Title only",
|
|
@@ -143,14 +143,8 @@ export const InputStack = /*#__PURE__*/memo(function InputStack(_props) {
|
|
|
143
143
|
})]
|
|
144
144
|
}));
|
|
145
145
|
});
|
|
146
|
-
|
|
147
|
-
// Fixes a problem found in Accordion children element.
|
|
148
|
-
// When `overflow: auto` is set the thickened border when focused is not accounted for
|
|
149
|
-
// hence you see a cutoff.
|
|
150
|
-
// Padding must accommodate the focus border extension (default 2px for focusedBorderWidth: 200)
|
|
151
146
|
const staticStyles = StyleSheet.create({
|
|
152
147
|
inputAreaContainerStyle: {
|
|
153
|
-
padding: 2,
|
|
154
148
|
flexGrow: 2
|
|
155
149
|
}
|
|
156
150
|
});
|
|
@@ -74,13 +74,13 @@ export const ExampleScreen = _ref2 => {
|
|
|
74
74
|
borderedTop: true,
|
|
75
75
|
background: "bg",
|
|
76
76
|
borderColor: "bgLineHeavy",
|
|
77
|
-
paddingX: gutter,
|
|
78
77
|
testID: "mobile-playground-screen"
|
|
79
78
|
}, boxProps, {
|
|
80
79
|
children: /*#__PURE__*/_jsx(ScrollView, {
|
|
81
80
|
ref: ref,
|
|
82
81
|
contentContainerStyle: {
|
|
83
|
-
flexGrow: 1
|
|
82
|
+
flexGrow: 1,
|
|
83
|
+
paddingHorizontal: theme.space[gutter]
|
|
84
84
|
},
|
|
85
85
|
keyboardShouldPersistTaps: "always",
|
|
86
86
|
persistentScrollbar: false,
|
|
@@ -3,7 +3,8 @@ const _excluded = ["ref"],
|
|
|
3
3
|
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); }
|
|
4
4
|
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; }
|
|
5
5
|
import React, { memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
|
|
6
|
-
import { Animated, Keyboard, Modal, Platform, StatusBar, useWindowDimensions } from 'react-native';
|
|
6
|
+
import { Animated, Keyboard, Modal, Platform, StatusBar, StyleSheet, useWindowDimensions } from 'react-native';
|
|
7
|
+
import { GestureHandlerRootView } from 'react-native-gesture-handler';
|
|
7
8
|
import { drawerAnimationDefaultDuration, MAX_OVER_DRAG } from '@coinbase/cds-common/animation/drawer';
|
|
8
9
|
import { OverlayContentContext } from '@coinbase/cds-common/overlays/OverlayContentContext';
|
|
9
10
|
import { horizontalDrawerPercentageOfView, verticalDrawerPercentageOfView as defaultVerticalDrawerPercentageOfView } from '@coinbase/cds-common/tokens/drawer';
|
|
@@ -18,6 +19,12 @@ import { useDrawerAnimation } from './useDrawerAnimation';
|
|
|
18
19
|
import { useDrawerPanResponder } from './useDrawerPanResponder';
|
|
19
20
|
import { useDrawerSpacing } from './useDrawerSpacing';
|
|
20
21
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
22
|
+
const drawerStyles = StyleSheet.create({
|
|
23
|
+
// Android Modal is outside the app gesture root; RNGH needs one here.
|
|
24
|
+
gestureRoot: {
|
|
25
|
+
flex: 1
|
|
26
|
+
}
|
|
27
|
+
});
|
|
21
28
|
const overlayContentContextValue = {
|
|
22
29
|
isDrawer: true
|
|
23
30
|
};
|
|
@@ -182,39 +189,42 @@ export const Drawer = /*#__PURE__*/memo(_ref => {
|
|
|
182
189
|
onRequestClose: handleRequestClose,
|
|
183
190
|
style: rootStyle
|
|
184
191
|
}, props, {
|
|
185
|
-
children: /*#__PURE__*/
|
|
186
|
-
|
|
187
|
-
children:
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
192
|
+
children: /*#__PURE__*/_jsx(GestureHandlerRootView, {
|
|
193
|
+
style: drawerStyles.gestureRoot,
|
|
194
|
+
children: /*#__PURE__*/_jsxs(OverlayContentContext.Provider, {
|
|
195
|
+
value: overlayContentContextValue,
|
|
196
|
+
children: [Platform.select({
|
|
197
|
+
ios: hideStatusBar ? /*#__PURE__*/_jsx(StatusBar, {
|
|
198
|
+
animated: true,
|
|
199
|
+
hidden: true
|
|
200
|
+
}) : null,
|
|
201
|
+
default: null
|
|
202
|
+
}), /*#__PURE__*/_jsx(Overlay, {
|
|
203
|
+
onTouchStart: handleOverlayPress,
|
|
204
|
+
opacity: opacityAnimation,
|
|
205
|
+
style: styles == null ? void 0 : styles.overlay,
|
|
206
|
+
testID: "drawer-overlay"
|
|
207
|
+
}), /*#__PURE__*/_jsxs(Box, _extends({}, getContainerPanHandlers, {
|
|
208
|
+
animated: true
|
|
209
|
+
// close modal when user performs the "escape" accessibility gesture
|
|
210
|
+
// https://reactnative.dev/docs/accessibility#onaccessibilityescape-ios
|
|
211
|
+
,
|
|
212
|
+
onAccessibilityEscape: handleClose,
|
|
213
|
+
pin: pin,
|
|
214
|
+
style: containerStyle,
|
|
215
|
+
width: isSideDrawer ? horizontalDrawerWidth : '100%',
|
|
216
|
+
children: [showHandleBarOutside && handleBar, /*#__PURE__*/_jsxs(Box, {
|
|
217
|
+
accessibilityLabel: accessibilityLabel,
|
|
218
|
+
accessibilityLabelledBy: accessibilityLabelledBy,
|
|
219
|
+
borderRadius: isSideDrawer ? 0 : 600,
|
|
220
|
+
bordered: theme.activeColorScheme === 'dark',
|
|
221
|
+
elevation: 2,
|
|
222
|
+
maxHeight: !isSideDrawer ? verticalDrawerMaxHeight : '100%',
|
|
223
|
+
style: drawerStyle,
|
|
224
|
+
children: [showHandleBarInside && handleBar, content]
|
|
225
|
+
})]
|
|
226
|
+
}))]
|
|
227
|
+
})
|
|
218
228
|
})
|
|
219
229
|
}));
|
|
220
230
|
});
|
|
@@ -3,6 +3,9 @@ import { PanResponder, useWindowDimensions } from 'react-native';
|
|
|
3
3
|
import { DISMISSAL_DRAG_THRESHOLD, DISMISSAL_VELOCITY_THRESHOLD, MAX_OVER_DRAG, MIN_PAN_DISTANCE } from '@coinbase/cds-common/animation/drawer';
|
|
4
4
|
import { handleBarHeight, handleBarOffset, horizontalDrawerPercentageOfView, normalizeDrawerPanDistanceMultiplier, verticalDrawerPercentageOfView as defaultVerticalDrawerPercentageOfView } from '@coinbase/cds-common/tokens/drawer';
|
|
5
5
|
import { modulate } from '@coinbase/cds-common/utils/modulate';
|
|
6
|
+
|
|
7
|
+
/** Min dominant-axis travel before the drawer steals the gesture from children. */
|
|
8
|
+
const DRAWER_GESTURE_CAPTURE_DISTANCE = 10;
|
|
6
9
|
/** accumulated distance of the gesture - max over drag */
|
|
7
10
|
const calculateDragOffset = x => {
|
|
8
11
|
const newX = x / 100;
|
|
@@ -35,10 +38,12 @@ export const useDrawerPanResponder = _ref => {
|
|
|
35
38
|
dx,
|
|
36
39
|
dy
|
|
37
40
|
} = _ref2;
|
|
38
|
-
|
|
39
|
-
|
|
41
|
+
// Only capture when dismiss-axis movement dominates, so cross-axis child
|
|
42
|
+
// gestures (e.g. horizontal chart scrubbing in a bottom tray) are not stolen.
|
|
43
|
+
if (pin === 'bottom' || pin === 'top') {
|
|
44
|
+
return Math.abs(dy) > DRAWER_GESTURE_CAPTURE_DISTANCE && Math.abs(dy) > Math.abs(dx);
|
|
40
45
|
}
|
|
41
|
-
return dx >
|
|
46
|
+
return Math.abs(dx) > DRAWER_GESTURE_CAPTURE_DISTANCE && Math.abs(dx) > Math.abs(dy);
|
|
42
47
|
}, [pin]);
|
|
43
48
|
const shouldCaptureGestures = useCallback((_, state) => {
|
|
44
49
|
if (disableCapturePanGestureToDismiss) {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React, { useCallback, useMemo } from 'react';
|
|
2
|
-
import { Platform } from 'react-native';
|
|
2
|
+
import { Platform, View } from 'react-native';
|
|
3
3
|
import { Gesture, GestureDetector } from 'react-native-gesture-handler';
|
|
4
4
|
import { runOnJS, useAnimatedReaction, useSharedValue } from 'react-native-reanimated';
|
|
5
5
|
import { Haptics } from '../../../utils/haptics';
|
|
@@ -92,35 +92,43 @@ export const ScrubberProvider = _ref => {
|
|
|
92
92
|
runOnJS(onScrubberPositionChange)(currentValue);
|
|
93
93
|
}
|
|
94
94
|
}, [onScrubberPositionChange]);
|
|
95
|
+
const longPressGesture = useMemo(() => {
|
|
96
|
+
const pan = Gesture.Pan().activateAfterLongPress(110).shouldCancelWhenOutside(!allowOverflowGestures);
|
|
95
97
|
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
98
|
+
// Fail on cross-axis movement so parent pan-to-dismiss can win.
|
|
99
|
+
if (categoryAxisIsX) {
|
|
100
|
+
pan.failOffsetY([-15, 15]);
|
|
101
|
+
} else {
|
|
102
|
+
pan.failOffsetX([-15, 15]);
|
|
103
|
+
}
|
|
104
|
+
return pan.onStart(function onStart(event) {
|
|
105
|
+
runOnJS(handleStartEndHaptics)();
|
|
99
106
|
|
|
100
|
-
|
|
101
|
-
|
|
107
|
+
// Android does not trigger onUpdate when the gesture starts. This achieves consistent behavior across both iOS and Android
|
|
108
|
+
if (Platform.OS === 'android') {
|
|
109
|
+
const pointerPosition = categoryAxisIsX ? event.x : event.y;
|
|
110
|
+
const newScrubberPosition = getDataIndexFromPosition(pointerPosition);
|
|
111
|
+
if (newScrubberPosition !== scrubberPosition.value) {
|
|
112
|
+
scrubberPosition.value = newScrubberPosition;
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
}).onUpdate(function onUpdate(event) {
|
|
102
116
|
const pointerPosition = categoryAxisIsX ? event.x : event.y;
|
|
103
117
|
const newScrubberPosition = getDataIndexFromPosition(pointerPosition);
|
|
104
118
|
if (newScrubberPosition !== scrubberPosition.value) {
|
|
105
119
|
scrubberPosition.value = newScrubberPosition;
|
|
106
120
|
}
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
}
|
|
119
|
-
}).onTouchesCancelled(function onTouchesCancelled() {
|
|
120
|
-
if (enableScrubbing) {
|
|
121
|
-
scrubberPosition.value = undefined;
|
|
122
|
-
}
|
|
123
|
-
}), [allowOverflowGestures, handleStartEndHaptics, getDataIndexFromPosition, categoryAxisIsX, scrubberPosition, enableScrubbing]);
|
|
121
|
+
}).onEnd(function onEnd() {
|
|
122
|
+
if (enableScrubbing) {
|
|
123
|
+
runOnJS(handleStartEndHaptics)();
|
|
124
|
+
scrubberPosition.value = undefined;
|
|
125
|
+
}
|
|
126
|
+
}).onTouchesCancelled(function onTouchesCancelled() {
|
|
127
|
+
if (enableScrubbing) {
|
|
128
|
+
scrubberPosition.value = undefined;
|
|
129
|
+
}
|
|
130
|
+
});
|
|
131
|
+
}, [allowOverflowGestures, handleStartEndHaptics, getDataIndexFromPosition, categoryAxisIsX, scrubberPosition, enableScrubbing]);
|
|
124
132
|
const contextValue = useMemo(() => ({
|
|
125
133
|
enableScrubbing: !!enableScrubbing,
|
|
126
134
|
scrubberPosition
|
|
@@ -129,12 +137,15 @@ export const ScrubberProvider = _ref => {
|
|
|
129
137
|
value: contextValue,
|
|
130
138
|
children: children
|
|
131
139
|
});
|
|
132
|
-
|
|
133
|
-
// Wrap with gesture handler only if scrubbing is enabled
|
|
134
140
|
if (enableScrubbing) {
|
|
135
141
|
return /*#__PURE__*/_jsx(GestureDetector, {
|
|
136
142
|
gesture: longPressGesture,
|
|
137
|
-
children:
|
|
143
|
+
children: /*#__PURE__*/_jsx(View, {
|
|
144
|
+
collapsable: false,
|
|
145
|
+
onMoveShouldSetResponder: () => true,
|
|
146
|
+
onStartShouldSetResponder: () => true,
|
|
147
|
+
children: content
|
|
148
|
+
})
|
|
138
149
|
});
|
|
139
150
|
}
|
|
140
151
|
return content;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@coinbase/cds-mobile",
|
|
3
|
-
"version": "9.
|
|
3
|
+
"version": "9.11.0",
|
|
4
4
|
"description": "Coinbase Design System - Mobile",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -218,9 +218,9 @@
|
|
|
218
218
|
"react-native-worklets": "0.5.2"
|
|
219
219
|
},
|
|
220
220
|
"dependencies": {
|
|
221
|
-
"@coinbase/cds-common": "^9.
|
|
221
|
+
"@coinbase/cds-common": "^9.11.0",
|
|
222
222
|
"@coinbase/cds-icons": "^5.21.0",
|
|
223
|
-
"@coinbase/cds-illustrations": "^4.
|
|
223
|
+
"@coinbase/cds-illustrations": "^4.46.0",
|
|
224
224
|
"@coinbase/cds-lottie-files": "^3.3.4",
|
|
225
225
|
"@coinbase/cds-utils": "^2.3.5",
|
|
226
226
|
"@floating-ui/react-native": "^0.10.5",
|