panelui-native 0.68.0 → 0.73.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/README.md +13 -2
- package/lib/module/components/accordion/index.js +38 -13
- package/lib/module/components/accordion/index.js.map +1 -1
- package/lib/module/components/area-chart/index.js +1 -0
- package/lib/module/components/area-chart/index.js.map +1 -1
- package/lib/module/components/breadcrumb/index.js +2 -1
- package/lib/module/components/breadcrumb/index.js.map +1 -1
- package/lib/module/components/button/index.js +21 -12
- package/lib/module/components/button/index.js.map +1 -1
- package/lib/module/components/carousel/index.js +1 -1
- package/lib/module/components/carousel/index.js.map +1 -1
- package/lib/module/components/chip/index.js +2 -2
- package/lib/module/components/chip/index.js.map +1 -1
- package/lib/module/components/code-block/index.js.map +1 -1
- package/lib/module/components/collapsible/index.js +284 -0
- package/lib/module/components/collapsible/index.js.map +1 -0
- package/lib/module/components/color-picker/index.js.map +1 -1
- package/lib/module/components/fab/index.js +7 -6
- package/lib/module/components/fab/index.js.map +1 -1
- package/lib/module/components/flow/index.js +67 -4
- package/lib/module/components/flow/index.js.map +1 -1
- package/lib/module/components/frame/index.js +2 -2
- package/lib/module/components/frame/index.js.map +1 -1
- package/lib/module/components/grid-item/index.js +2 -2
- package/lib/module/components/grid-item/index.js.map +1 -1
- package/lib/module/components/heatmap-chart/index.js +1 -0
- package/lib/module/components/heatmap-chart/index.js.map +1 -1
- package/lib/module/components/hex-chart/index.js +1 -0
- package/lib/module/components/hex-chart/index.js.map +1 -1
- package/lib/module/components/input-group/index.js +7 -2
- package/lib/module/components/input-group/index.js.map +1 -1
- package/lib/module/components/item/index.js +2 -2
- package/lib/module/components/item/index.js.map +1 -1
- package/lib/module/components/line-chart/index.js +1 -0
- package/lib/module/components/line-chart/index.js.map +1 -1
- package/lib/module/components/live-line-chart/index.js +103 -9
- package/lib/module/components/live-line-chart/index.js.map +1 -1
- package/lib/module/components/live-line-chart/live-line-accessibility.js +47 -0
- package/lib/module/components/live-line-chart/live-line-accessibility.js.map +1 -0
- package/lib/module/components/live-line-chart/live-line-lifecycle.js +33 -0
- package/lib/module/components/live-line-chart/live-line-lifecycle.js.map +1 -0
- package/lib/module/components/marker/index.js +2 -2
- package/lib/module/components/marker/index.js.map +1 -1
- package/lib/module/components/marquee/index.js +191 -0
- package/lib/module/components/marquee/index.js.map +1 -0
- package/lib/module/components/marquee/marquee-math.js +39 -0
- package/lib/module/components/marquee/marquee-math.js.map +1 -0
- package/lib/module/components/menu/index.js +11 -3
- package/lib/module/components/menu/index.js.map +1 -1
- package/lib/module/components/meter/index.js +38 -20
- package/lib/module/components/meter/index.js.map +1 -1
- package/lib/module/components/meter/meter-scale.js +62 -8
- package/lib/module/components/meter/meter-scale.js.map +1 -1
- package/lib/module/components/pagination/index.js +27 -11
- package/lib/module/components/pagination/index.js.map +1 -1
- package/lib/module/components/panelside/index.js +7 -2
- package/lib/module/components/panelside/index.js.map +1 -1
- package/lib/module/components/planner/index.js +159 -64
- package/lib/module/components/planner/index.js.map +1 -1
- package/lib/module/components/planner/planner-announcement.js +30 -0
- package/lib/module/components/planner/planner-announcement.js.map +1 -0
- package/lib/module/components/planner/planner-entries.js +15 -7
- package/lib/module/components/planner/planner-entries.js.map +1 -1
- package/lib/module/components/planner/planner-grid-navigation.js +33 -0
- package/lib/module/components/planner/planner-grid-navigation.js.map +1 -0
- package/lib/module/components/planner/planner-lifecycle.js +45 -0
- package/lib/module/components/planner/planner-lifecycle.js.map +1 -0
- package/lib/module/components/plot/index.js +105 -42
- package/lib/module/components/plot/index.js.map +1 -1
- package/lib/module/components/popover/index.js +2 -2
- package/lib/module/components/popover/index.js.map +1 -1
- package/lib/module/components/post/index.js +4 -4
- package/lib/module/components/post/index.js.map +1 -1
- package/lib/module/components/search-bar/index.js +331 -0
- package/lib/module/components/search-bar/index.js.map +1 -0
- package/lib/module/components/table/index.js +3 -4
- package/lib/module/components/table/index.js.map +1 -1
- package/lib/module/components/timeline/index.js +288 -39
- package/lib/module/components/timeline/index.js.map +1 -1
- package/lib/module/components/toggle-button/index.js +1 -1
- package/lib/module/components/toggle-button/index.js.map +1 -1
- package/lib/module/components/tree/index.js +13 -8
- package/lib/module/components/tree/index.js.map +1 -1
- package/lib/module/hooks/use-keyboard-avoidance.js.map +1 -1
- package/lib/module/index.js +3 -0
- package/lib/module/index.js.map +1 -1
- package/lib/module/primitives/focus-restoration-store.js +52 -0
- package/lib/module/primitives/focus-restoration-store.js.map +1 -0
- package/lib/module/primitives/portal.js +36 -2
- package/lib/module/primitives/portal.js.map +1 -1
- package/lib/module/utils/chart.js +50 -7
- package/lib/module/utils/chart.js.map +1 -1
- package/lib/typescript/src/components/accordion/index.d.ts +6 -2
- package/lib/typescript/src/components/accordion/index.d.ts.map +1 -1
- package/lib/typescript/src/components/area-chart/index.d.ts.map +1 -1
- package/lib/typescript/src/components/breadcrumb/index.d.ts.map +1 -1
- package/lib/typescript/src/components/button/index.d.ts.map +1 -1
- package/lib/typescript/src/components/code-block/index.d.ts +3 -3
- package/lib/typescript/src/components/code-block/index.d.ts.map +1 -1
- package/lib/typescript/src/components/collapsible/index.d.ts +76 -0
- package/lib/typescript/src/components/collapsible/index.d.ts.map +1 -0
- package/lib/typescript/src/components/color-picker/index.d.ts.map +1 -1
- package/lib/typescript/src/components/fab/index.d.ts +4 -2
- package/lib/typescript/src/components/fab/index.d.ts.map +1 -1
- package/lib/typescript/src/components/flow/index.d.ts +7 -1
- package/lib/typescript/src/components/flow/index.d.ts.map +1 -1
- package/lib/typescript/src/components/heatmap-chart/index.d.ts.map +1 -1
- package/lib/typescript/src/components/hex-chart/index.d.ts.map +1 -1
- package/lib/typescript/src/components/input-group/index.d.ts.map +1 -1
- package/lib/typescript/src/components/line-chart/index.d.ts.map +1 -1
- package/lib/typescript/src/components/live-line-chart/index.d.ts +21 -7
- package/lib/typescript/src/components/live-line-chart/index.d.ts.map +1 -1
- package/lib/typescript/src/components/live-line-chart/live-line-accessibility.d.ts +22 -0
- package/lib/typescript/src/components/live-line-chart/live-line-accessibility.d.ts.map +1 -0
- package/lib/typescript/src/components/live-line-chart/live-line-lifecycle.d.ts +23 -0
- package/lib/typescript/src/components/live-line-chart/live-line-lifecycle.d.ts.map +1 -0
- package/lib/typescript/src/components/marquee/index.d.ts +73 -0
- package/lib/typescript/src/components/marquee/index.d.ts.map +1 -0
- package/lib/typescript/src/components/marquee/marquee-math.d.ts +21 -0
- package/lib/typescript/src/components/marquee/marquee-math.d.ts.map +1 -0
- package/lib/typescript/src/components/menu/index.d.ts +1 -1
- package/lib/typescript/src/components/menu/index.d.ts.map +1 -1
- package/lib/typescript/src/components/meter/index.d.ts +7 -4
- package/lib/typescript/src/components/meter/index.d.ts.map +1 -1
- package/lib/typescript/src/components/meter/meter-scale.d.ts +39 -0
- package/lib/typescript/src/components/meter/meter-scale.d.ts.map +1 -1
- package/lib/typescript/src/components/pagination/index.d.ts.map +1 -1
- package/lib/typescript/src/components/panelside/index.d.ts +1 -1
- package/lib/typescript/src/components/panelside/index.d.ts.map +1 -1
- package/lib/typescript/src/components/plan/index.d.ts +2 -2
- package/lib/typescript/src/components/planner/index.d.ts.map +1 -1
- package/lib/typescript/src/components/planner/planner-announcement.d.ts +15 -0
- package/lib/typescript/src/components/planner/planner-announcement.d.ts.map +1 -0
- package/lib/typescript/src/components/planner/planner-entries.d.ts +1 -1
- package/lib/typescript/src/components/planner/planner-entries.d.ts.map +1 -1
- package/lib/typescript/src/components/planner/planner-grid-navigation.d.ts +4 -0
- package/lib/typescript/src/components/planner/planner-grid-navigation.d.ts.map +1 -0
- package/lib/typescript/src/components/planner/planner-lifecycle.d.ts +20 -0
- package/lib/typescript/src/components/planner/planner-lifecycle.d.ts.map +1 -0
- package/lib/typescript/src/components/plot/index.d.ts +59 -5
- package/lib/typescript/src/components/plot/index.d.ts.map +1 -1
- package/lib/typescript/src/components/search-bar/index.d.ts +216 -0
- package/lib/typescript/src/components/search-bar/index.d.ts.map +1 -0
- package/lib/typescript/src/components/timeline/index.d.ts +35 -2
- package/lib/typescript/src/components/timeline/index.d.ts.map +1 -1
- package/lib/typescript/src/components/tree/index.d.ts +3 -4
- package/lib/typescript/src/components/tree/index.d.ts.map +1 -1
- package/lib/typescript/src/hooks/use-keyboard-avoidance.d.ts +2 -2
- package/lib/typescript/src/hooks/use-keyboard-avoidance.d.ts.map +1 -1
- package/lib/typescript/src/index.d.ts +4 -1
- package/lib/typescript/src/index.d.ts.map +1 -1
- package/lib/typescript/src/primitives/focus-restoration-store.d.ts +24 -0
- package/lib/typescript/src/primitives/focus-restoration-store.d.ts.map +1 -0
- package/lib/typescript/src/primitives/portal.d.ts +4 -0
- package/lib/typescript/src/primitives/portal.d.ts.map +1 -1
- package/lib/typescript/src/utils/chart.d.ts +28 -3
- package/lib/typescript/src/utils/chart.d.ts.map +1 -1
- package/package.json +36 -3
- package/src/components/accordion/index.tsx +48 -15
- package/src/components/area-chart/index.tsx +8 -0
- package/src/components/breadcrumb/index.tsx +2 -1
- package/src/components/button/index.tsx +14 -6
- package/src/components/carousel/index.tsx +1 -1
- package/src/components/chip/index.tsx +2 -2
- package/src/components/code-block/index.tsx +3 -3
- package/src/components/collapsible/index.tsx +287 -0
- package/src/components/color-picker/index.tsx +3 -2
- package/src/components/fab/index.tsx +21 -11
- package/src/components/flow/index.tsx +94 -15
- package/src/components/frame/index.tsx +2 -2
- package/src/components/grid-item/index.tsx +2 -2
- package/src/components/heatmap-chart/index.tsx +7 -1
- package/src/components/hex-chart/index.tsx +7 -1
- package/src/components/input-group/index.tsx +7 -2
- package/src/components/item/index.tsx +2 -2
- package/src/components/line-chart/index.tsx +9 -0
- package/src/components/live-line-chart/index.tsx +130 -13
- package/src/components/live-line-chart/live-line-accessibility.ts +61 -0
- package/src/components/live-line-chart/live-line-lifecycle.ts +63 -0
- package/src/components/marker/index.tsx +2 -2
- package/src/components/marquee/index.tsx +234 -0
- package/src/components/marquee/marquee-math.ts +37 -0
- package/src/components/menu/index.tsx +11 -3
- package/src/components/meter/index.tsx +49 -26
- package/src/components/meter/meter-scale.ts +84 -8
- package/src/components/pagination/index.tsx +26 -13
- package/src/components/panelside/index.tsx +7 -2
- package/src/components/plan/index.tsx +2 -2
- package/src/components/planner/index.tsx +202 -76
- package/src/components/planner/planner-announcement.ts +37 -0
- package/src/components/planner/planner-entries.ts +16 -7
- package/src/components/planner/planner-grid-navigation.ts +45 -0
- package/src/components/planner/planner-lifecycle.ts +76 -0
- package/src/components/plot/index.tsx +183 -39
- package/src/components/popover/index.tsx +3 -3
- package/src/components/post/index.tsx +4 -4
- package/src/components/search-bar/index.tsx +436 -0
- package/src/components/table/index.tsx +2 -2
- package/src/components/timeline/index.tsx +335 -39
- package/src/components/toggle-button/index.tsx +1 -1
- package/src/components/tree/index.tsx +17 -12
- package/src/hooks/use-keyboard-avoidance.ts +7 -2
- package/src/index.ts +15 -0
- package/src/primitives/focus-restoration-store.ts +70 -0
- package/src/primitives/portal.tsx +34 -2
- package/src/utils/chart.ts +66 -7
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"chart.d.ts","sourceRoot":"","sources":["../../../../src/utils/chart.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAOH,qDAAqD;AACrD,MAAM,MAAM,gBAAgB,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAEjD;;;;;;GAMG;AACH,wBAAgB,cAAc,CAC5B,QAAQ,EAAE,MAAM,GAAG,SAAS,EAC5B,KAAK,EAAE,gBAAgB,GACtB,MAAM,CAGR;AA0DD,2EAA2E;AAC3E,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AA6CD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,aAAa,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAYtE;AAED,wBAAgB,KAAK,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,EAAE,OAAO,SAAI,GAAG,QAAQ,CAe1E;AAoBD,uEAAuE;AACvE,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CA8BnD;AAED,uEAAuE;AACvE,MAAM,WAAW,IAAI;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;CACb;AAED,qEAAqE;AACrE,wBAAgB,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,GAAG,MAAM,CAIpE;AAED,8EAA8E;AAC9E,wBAAgB,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,CAI/E;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,CAI/E;AAED,kFAAkF;AAClF,wBAAgB,MAAM,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,GAAG,MAAM,CAKvE;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,QAAQ,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,GAAG,MAAM,EAAE,CAqC7D;AAED,iDAAiD;AACjD,MAAM,MAAM,UAAU,GAAG,UAAU,GAAG,QAAQ,CAAC;AAE/C,MAAM,WAAW,UAAU;IACzB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,oFAAoF;AACpF,wBAAgB,MAAM,CACpB,MAAM,EAAE,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,EACzB,IAAI,EAAE,IAAI,EACV,GAAG,EAAE,MAAM,EACX,GAAG,EAAE,MAAM;AACX,mEAAmE;AACnE,SAAS,CAAC,EAAE,MAAM,EAAE,
|
|
1
|
+
{"version":3,"file":"chart.d.ts","sourceRoot":"","sources":["../../../../src/utils/chart.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "panelui-native",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.73.0",
|
|
4
4
|
"description": "High-performance React Native UI components for Expo. Semantic design tokens, powered by Uniwind (Tailwind v4) and Reanimated.",
|
|
5
5
|
"main": "./lib/module/index.js",
|
|
6
6
|
"module": "./lib/module/index.js",
|
|
@@ -22,6 +22,36 @@
|
|
|
22
22
|
"react-native": "./src/hooks/*.ts",
|
|
23
23
|
"default": "./lib/module/hooks/*.js"
|
|
24
24
|
},
|
|
25
|
+
"./provider": {
|
|
26
|
+
"types": "./lib/typescript/src/providers/panel-ui-provider.d.ts",
|
|
27
|
+
"react-native": "./src/providers/panel-ui-provider.tsx",
|
|
28
|
+
"default": "./lib/module/providers/panel-ui-provider.js"
|
|
29
|
+
},
|
|
30
|
+
"./theme": {
|
|
31
|
+
"types": "./lib/typescript/src/theme/use-theme.d.ts",
|
|
32
|
+
"react-native": "./src/theme/use-theme.ts",
|
|
33
|
+
"default": "./lib/module/theme/use-theme.js"
|
|
34
|
+
},
|
|
35
|
+
"./primitives/animated-pressable": {
|
|
36
|
+
"types": "./lib/typescript/src/primitives/animated-pressable.d.ts",
|
|
37
|
+
"react-native": "./src/primitives/animated-pressable.tsx",
|
|
38
|
+
"default": "./lib/module/primitives/animated-pressable.js"
|
|
39
|
+
},
|
|
40
|
+
"./primitives/keyboard-avoider": {
|
|
41
|
+
"types": "./lib/typescript/src/primitives/keyboard-avoider.d.ts",
|
|
42
|
+
"react-native": "./src/primitives/keyboard-avoider.tsx",
|
|
43
|
+
"default": "./lib/module/primitives/keyboard-avoider.js"
|
|
44
|
+
},
|
|
45
|
+
"./primitives/scrim": {
|
|
46
|
+
"types": "./lib/typescript/src/primitives/scrim.d.ts",
|
|
47
|
+
"react-native": "./src/primitives/scrim.tsx",
|
|
48
|
+
"default": "./lib/module/primitives/scrim.js"
|
|
49
|
+
},
|
|
50
|
+
"./primitives/scroll-progress": {
|
|
51
|
+
"types": "./lib/typescript/src/primitives/scroll-progress.d.ts",
|
|
52
|
+
"react-native": "./src/primitives/scroll-progress.tsx",
|
|
53
|
+
"default": "./lib/module/primitives/scroll-progress.js"
|
|
54
|
+
},
|
|
25
55
|
"./utils/cn": {
|
|
26
56
|
"types": "./lib/typescript/src/utils/cn.d.ts",
|
|
27
57
|
"react-native": "./src/utils/cn.ts",
|
|
@@ -52,12 +82,15 @@
|
|
|
52
82
|
"sideEffects": false,
|
|
53
83
|
"scripts": {
|
|
54
84
|
"build": "npm run clean && bob build",
|
|
55
|
-
"prepack": "npm run build && npm run verify:package",
|
|
85
|
+
"prepack": "npm run check:subpaths && npm run build && npm run verify:package",
|
|
56
86
|
"test": "node --experimental-strip-types --test test/*.test.mjs",
|
|
57
87
|
"benchmark:bar-chart": "node scripts/benchmark-bar-chart.mjs",
|
|
88
|
+
"benchmark:planner": "node --experimental-strip-types scripts/benchmark-planner.mjs",
|
|
58
89
|
"typecheck": "tsc --noEmit && tsc --noEmit -p tsconfig.type-tests.json",
|
|
59
90
|
"clean": "rm -rf lib",
|
|
60
|
-
"verify:package": "node scripts/verify-package.mjs"
|
|
91
|
+
"verify:package": "node scripts/verify-package.mjs",
|
|
92
|
+
"generate:subpaths": "node scripts/generate-subpath-exports.mjs --write",
|
|
93
|
+
"check:subpaths": "node scripts/generate-subpath-exports.mjs"
|
|
61
94
|
},
|
|
62
95
|
"keywords": [
|
|
63
96
|
"react-native",
|
|
@@ -10,6 +10,10 @@
|
|
|
10
10
|
* also changes the shape of `value`: a string when single, an array when
|
|
11
11
|
* multiple.
|
|
12
12
|
*
|
|
13
|
+
* With the operating system set to reduce motion the section arrives at its new
|
|
14
|
+
* height and the chevron at its new angle without travelling to either. The
|
|
15
|
+
* disclosure is the point and it still happens; the movement is what goes.
|
|
16
|
+
*
|
|
13
17
|
* A closed section costs nothing, because its body is unmounted. That is the
|
|
14
18
|
* right default and the wrong one for a body with state in it: a half-filled
|
|
15
19
|
* form, a list scrolled to the middle, a video part-way through. Collapsing
|
|
@@ -25,15 +29,23 @@ import {
|
|
|
25
29
|
isValidElement,
|
|
26
30
|
useCallback,
|
|
27
31
|
useContext,
|
|
32
|
+
useEffect,
|
|
28
33
|
useMemo,
|
|
29
34
|
useState,
|
|
30
35
|
type ReactNode,
|
|
31
36
|
} from 'react';
|
|
32
|
-
import {
|
|
37
|
+
import {
|
|
38
|
+
Pressable,
|
|
39
|
+
View,
|
|
40
|
+
type PressableProps,
|
|
41
|
+
type Text as RNText,
|
|
42
|
+
type ViewProps,
|
|
43
|
+
} from 'react-native';
|
|
33
44
|
import Animated, {
|
|
34
45
|
LinearTransition,
|
|
35
46
|
useAnimatedStyle,
|
|
36
|
-
|
|
47
|
+
useReducedMotion,
|
|
48
|
+
useSharedValue,
|
|
37
49
|
withTiming,
|
|
38
50
|
} from 'react-native-reanimated';
|
|
39
51
|
import { tv } from 'tailwind-variants';
|
|
@@ -49,6 +61,12 @@ export type AccordionVariant =
|
|
|
49
61
|
|
|
50
62
|
export type AccordionSelectionMode = 'single' | 'multiple';
|
|
51
63
|
|
|
64
|
+
/**
|
|
65
|
+
* How long the height change and the chevron take. One constant for both, so
|
|
66
|
+
* the panel and the arrow that describes it finish together.
|
|
67
|
+
*/
|
|
68
|
+
const TRANSITION_DURATION = 200;
|
|
69
|
+
|
|
52
70
|
const accordionVariants = tv({
|
|
53
71
|
slots: {
|
|
54
72
|
root: 'w-full flex-col overflow-hidden',
|
|
@@ -162,6 +180,7 @@ const AccordionRoot = forwardRef<View, AccordionProps>(
|
|
|
162
180
|
},
|
|
163
181
|
ref
|
|
164
182
|
) => {
|
|
183
|
+
const reducedMotion = useReducedMotion();
|
|
165
184
|
const [internal, setInternal] = useState<string[]>(() => toArray(defaultValue));
|
|
166
185
|
const isControlled = value !== undefined;
|
|
167
186
|
const expanded = isControlled ? toArray(value) : internal;
|
|
@@ -197,7 +216,10 @@ const AccordionRoot = forwardRef<View, AccordionProps>(
|
|
|
197
216
|
<AccordionContext.Provider value={context}>
|
|
198
217
|
<Animated.View
|
|
199
218
|
ref={ref}
|
|
200
|
-
layout
|
|
219
|
+
// Dropping the layout animation is what honours Reduce Motion here:
|
|
220
|
+
// the section still opens, it just arrives at its new height rather
|
|
221
|
+
// than travelling to it.
|
|
222
|
+
layout={reducedMotion ? undefined : LinearTransition.duration(TRANSITION_DURATION)}
|
|
201
223
|
className={root({ className })}
|
|
202
224
|
{...props}
|
|
203
225
|
>
|
|
@@ -227,6 +249,7 @@ export interface AccordionItemProps extends ViewProps {
|
|
|
227
249
|
const AccordionItem = forwardRef<View, AccordionItemProps>(
|
|
228
250
|
({ className, value, isDisabled = false, children, ...props }, ref) => {
|
|
229
251
|
const { expanded, variant } = useAccordion('Accordion.Item');
|
|
252
|
+
const reducedMotion = useReducedMotion();
|
|
230
253
|
const isExpanded = expanded.includes(value);
|
|
231
254
|
const { item } = accordionVariants({ variant });
|
|
232
255
|
|
|
@@ -239,7 +262,7 @@ const AccordionItem = forwardRef<View, AccordionItemProps>(
|
|
|
239
262
|
<AccordionItemContext.Provider value={context}>
|
|
240
263
|
<Animated.View
|
|
241
264
|
ref={ref}
|
|
242
|
-
layout={LinearTransition.duration(
|
|
265
|
+
layout={reducedMotion ? undefined : LinearTransition.duration(TRANSITION_DURATION)}
|
|
243
266
|
className={item({ className })}
|
|
244
267
|
{...props}
|
|
245
268
|
>
|
|
@@ -251,27 +274,31 @@ const AccordionItem = forwardRef<View, AccordionItemProps>(
|
|
|
251
274
|
);
|
|
252
275
|
AccordionItem.displayName = 'Accordion.Item';
|
|
253
276
|
|
|
254
|
-
export interface AccordionTriggerProps extends
|
|
277
|
+
export interface AccordionTriggerProps extends Omit<PressableProps, 'children'> {
|
|
255
278
|
className?: string;
|
|
256
279
|
children?: ReactNode;
|
|
257
280
|
}
|
|
258
281
|
|
|
259
282
|
/** The pressable header row. Bare strings are wrapped in the title style. */
|
|
260
283
|
const AccordionTrigger = forwardRef<View, AccordionTriggerProps>(
|
|
261
|
-
({ className, children, ...props }, ref) => {
|
|
284
|
+
({ className, children, onPress, disabled = false, ...props }, ref) => {
|
|
262
285
|
const { toggle, variant } = useAccordion('Accordion.Trigger');
|
|
263
286
|
const { value, isExpanded, isDisabled } = useAccordionItem('Accordion.Trigger');
|
|
264
287
|
const { trigger, title } = accordionVariants({ variant });
|
|
288
|
+
const triggerDisabled = Boolean(isDisabled || disabled);
|
|
265
289
|
|
|
266
290
|
return (
|
|
267
291
|
<Pressable
|
|
268
292
|
ref={ref}
|
|
293
|
+
{...props}
|
|
269
294
|
accessibilityRole="button"
|
|
270
|
-
accessibilityState={{ expanded: isExpanded, disabled:
|
|
271
|
-
disabled={
|
|
272
|
-
onPress={() => toggle(value)}
|
|
295
|
+
accessibilityState={{ expanded: isExpanded, disabled: triggerDisabled }}
|
|
296
|
+
disabled={triggerDisabled}
|
|
273
297
|
className={trigger({ className })}
|
|
274
|
-
{
|
|
298
|
+
onPress={(event) => {
|
|
299
|
+
onPress?.(event);
|
|
300
|
+
toggle(value);
|
|
301
|
+
}}
|
|
275
302
|
>
|
|
276
303
|
{textChildren(children, (text) => (
|
|
277
304
|
<Text className={title()}>{text}</Text>
|
|
@@ -294,13 +321,19 @@ const AccordionIndicator = forwardRef<View, AccordionIndicatorProps>(
|
|
|
294
321
|
const { variant } = useAccordion('Accordion.Indicator');
|
|
295
322
|
const { isExpanded } = useAccordionItem('Accordion.Indicator');
|
|
296
323
|
const { indicator } = accordionVariants({ variant });
|
|
324
|
+
const reducedMotion = useReducedMotion();
|
|
325
|
+
const progress = useSharedValue(isExpanded ? 1 : 0);
|
|
326
|
+
|
|
327
|
+
useEffect(() => {
|
|
328
|
+
progress.value = reducedMotion
|
|
329
|
+
? isExpanded
|
|
330
|
+
? 1
|
|
331
|
+
: 0
|
|
332
|
+
: withTiming(isExpanded ? 1 : 0, { duration: TRANSITION_DURATION });
|
|
333
|
+
}, [isExpanded, reducedMotion, progress]);
|
|
297
334
|
|
|
298
|
-
const rotation = useDerivedValue(
|
|
299
|
-
() => withTiming(isExpanded ? 180 : 0, { duration: 200 }),
|
|
300
|
-
[isExpanded]
|
|
301
|
-
);
|
|
302
335
|
const style = useAnimatedStyle(() => ({
|
|
303
|
-
transform: [{ rotate: `${
|
|
336
|
+
transform: [{ rotate: `${progress.value * 180}deg` }],
|
|
304
337
|
}));
|
|
305
338
|
|
|
306
339
|
return (
|
|
@@ -490,11 +490,19 @@ const AreaChartRoot = forwardRef<AreaChartHandle, AreaChartProps>(function AreaC
|
|
|
490
490
|
* One clip for everything in the plot. Sharing it is what
|
|
491
491
|
* makes the reveal read as the chart arriving rather than as
|
|
492
492
|
* several bands animating in at once.
|
|
493
|
+
*
|
|
494
|
+
* `width` is set statically as well as animated, and it has
|
|
495
|
+
* to be. Animated props on an element inside `Defs` do not
|
|
496
|
+
* reach the native clip on every platform, and with the width
|
|
497
|
+
* coming only from the animation there is no width at all
|
|
498
|
+
* when they do not — an empty clip, and marks that never
|
|
499
|
+
* appear while the axes draw normally.
|
|
493
500
|
*/}
|
|
494
501
|
<ClipPath id={clipId}>
|
|
495
502
|
<AnimatedRect
|
|
496
503
|
x={plot.left}
|
|
497
504
|
y={0}
|
|
505
|
+
width={plot.width}
|
|
498
506
|
height={size.height}
|
|
499
507
|
animatedProps={clipProps}
|
|
500
508
|
/>
|
|
@@ -328,6 +328,7 @@ const BreadcrumbEllipsis = forwardRef<View, BreadcrumbEllipsisProps>(
|
|
|
328
328
|
return (
|
|
329
329
|
<View
|
|
330
330
|
ref={ref}
|
|
331
|
+
{...(props as ViewProps)}
|
|
331
332
|
accessibilityLabel="More"
|
|
332
333
|
className={cn('h-5 items-center justify-center px-0.5', className)}
|
|
333
334
|
>
|
|
@@ -339,12 +340,12 @@ const BreadcrumbEllipsis = forwardRef<View, BreadcrumbEllipsisProps>(
|
|
|
339
340
|
return (
|
|
340
341
|
<AnimatedPressable
|
|
341
342
|
ref={ref}
|
|
343
|
+
{...props}
|
|
342
344
|
accessibilityRole="button"
|
|
343
345
|
accessibilityLabel="Show more"
|
|
344
346
|
pressScale={0.92}
|
|
345
347
|
onPress={onPress}
|
|
346
348
|
className={cn('h-5 items-center justify-center px-0.5', className)}
|
|
347
|
-
{...props}
|
|
348
349
|
>
|
|
349
350
|
{glyph}
|
|
350
351
|
</AnimatedPressable>
|
|
@@ -15,7 +15,10 @@ import { Spinner } from '../spinner';
|
|
|
15
15
|
const buttonVariants = tv({
|
|
16
16
|
slots: {
|
|
17
17
|
root: 'flex-row items-center justify-center gap-2 rounded-lg border border-transparent',
|
|
18
|
-
label
|
|
18
|
+
// Let a constrained label wrap, and centre every line of an action name.
|
|
19
|
+
// An explicit Tailwind text step would also impose a fixed line height,
|
|
20
|
+
// which can be shorter than the glyphs after Dynamic Type scales them.
|
|
21
|
+
label: 'min-w-0 shrink text-center font-medium',
|
|
19
22
|
spinner: '',
|
|
20
23
|
},
|
|
21
24
|
variants: {
|
|
@@ -54,9 +57,13 @@ const buttonVariants = tv({
|
|
|
54
57
|
},
|
|
55
58
|
},
|
|
56
59
|
size: {
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
+
// These padding + intrinsic-font pairs equal the old 36/44/48dp boxes
|
|
61
|
+
// at the default scale. `min-h-*`, rather than `h-*`, lets the same box
|
|
62
|
+
// grow when the label's system-scaled glyphs or wrapped lines need it.
|
|
63
|
+
sm: { root: 'min-h-9 min-w-9 gap-1.5 px-2.5 py-2', label: 'text-[14px]' },
|
|
64
|
+
md: { root: 'min-h-11 min-w-11 px-4 py-2.5', label: 'text-[16px]' },
|
|
65
|
+
lg: { root: 'min-h-12 px-6 py-2.5', label: 'text-[18px]' },
|
|
66
|
+
// Icon-only controls have no scalable label, so their square is stable.
|
|
60
67
|
icon: { root: 'h-11 w-11 px-0' },
|
|
61
68
|
},
|
|
62
69
|
fullWidth: {
|
|
@@ -293,6 +300,7 @@ export const Button = forwardRef<View, ButtonProps>(
|
|
|
293
300
|
endContent,
|
|
294
301
|
native,
|
|
295
302
|
glass = false,
|
|
303
|
+
accessibilityState,
|
|
296
304
|
...props
|
|
297
305
|
},
|
|
298
306
|
ref
|
|
@@ -434,8 +442,6 @@ export const Button = forwardRef<View, ButtonProps>(
|
|
|
434
442
|
<IconColorProvider color={contentColor}>
|
|
435
443
|
<AnimatedPressable
|
|
436
444
|
ref={ref}
|
|
437
|
-
accessibilityRole="button"
|
|
438
|
-
accessibilityState={{ disabled: isDisabled, busy: loading }}
|
|
439
445
|
disabled={isDisabled}
|
|
440
446
|
// Joined segments cannot borrow room from each other without making
|
|
441
447
|
// two actions claim the same pixels. ButtonGroup owns that layout.
|
|
@@ -444,6 +450,8 @@ export const Button = forwardRef<View, ButtonProps>(
|
|
|
444
450
|
pressScale={attached ? 1 : undefined}
|
|
445
451
|
className={root({ className: cn(attached && ATTACHED, className) })}
|
|
446
452
|
{...props}
|
|
453
|
+
accessibilityRole="button"
|
|
454
|
+
accessibilityState={{ ...accessibilityState, disabled: isDisabled, busy: loading }}
|
|
447
455
|
>
|
|
448
456
|
{loading ? (
|
|
449
457
|
<Spinner size={SPINNER_SIZE[resolvedSize ?? 'md']} className={spinner()} />
|
|
@@ -799,6 +799,7 @@ function makeArrow(direction: 'previous' | 'next') {
|
|
|
799
799
|
|
|
800
800
|
return (
|
|
801
801
|
<Pressable
|
|
802
|
+
{...props}
|
|
802
803
|
disabled={disabled}
|
|
803
804
|
onPress={direction === 'next' ? next : previous}
|
|
804
805
|
accessibilityRole="button"
|
|
@@ -809,7 +810,6 @@ function makeArrow(direction: 'previous' | 'next') {
|
|
|
809
810
|
disabled ? 'opacity-30' : 'active:bg-foreground/10',
|
|
810
811
|
className
|
|
811
812
|
)}
|
|
812
|
-
{...props}
|
|
813
813
|
>
|
|
814
814
|
{children ??
|
|
815
815
|
(direction === 'next' ? (
|
|
@@ -285,9 +285,9 @@ const ChipRoot = forwardRef<View, ChipProps>(
|
|
|
285
285
|
{pressable ? (
|
|
286
286
|
<AnimatedPressable
|
|
287
287
|
ref={ref}
|
|
288
|
-
onPress={handlePress}
|
|
289
|
-
{...sharedProps}
|
|
290
288
|
{...props}
|
|
289
|
+
{...sharedProps}
|
|
290
|
+
onPress={handlePress}
|
|
291
291
|
>
|
|
292
292
|
{body}
|
|
293
293
|
</AnimatedPressable>
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
* block in a text part, or the fields of a tool call that wrote a file.
|
|
33
33
|
*/
|
|
34
34
|
import { createContext, useContext, useMemo, type ReactNode } from 'react';
|
|
35
|
-
import { ScrollView, View, type ViewProps } from 'react-native';
|
|
35
|
+
import { ScrollView, View, type TextProps, type ViewProps } from 'react-native';
|
|
36
36
|
import { tv } from 'tailwind-variants';
|
|
37
37
|
import { useCSSVariable } from 'uniwind';
|
|
38
38
|
import { useCopyToClipboard } from '../../hooks/use-copy-to-clipboard';
|
|
@@ -240,7 +240,7 @@ function CodeBlockHeader({ className, children, ...props }: CodeBlockHeaderProps
|
|
|
240
240
|
);
|
|
241
241
|
}
|
|
242
242
|
|
|
243
|
-
export interface CodeBlockFilenameProps extends
|
|
243
|
+
export interface CodeBlockFilenameProps extends TextProps {
|
|
244
244
|
className?: string;
|
|
245
245
|
children?: ReactNode;
|
|
246
246
|
}
|
|
@@ -254,7 +254,7 @@ function CodeBlockFilename({ className, children, ...props }: CodeBlockFilenameP
|
|
|
254
254
|
);
|
|
255
255
|
}
|
|
256
256
|
|
|
257
|
-
export interface CodeBlockLanguageProps extends
|
|
257
|
+
export interface CodeBlockLanguageProps extends TextProps {
|
|
258
258
|
className?: string;
|
|
259
259
|
children?: ReactNode;
|
|
260
260
|
}
|
|
@@ -0,0 +1,287 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Collapsible — one section of content that a header shows and hides.
|
|
3
|
+
*
|
|
4
|
+
* ```tsx
|
|
5
|
+
* <Collapsible variant="surface">
|
|
6
|
+
* <Collapsible.Trigger>
|
|
7
|
+
* Delivery options
|
|
8
|
+
* <Collapsible.Indicator />
|
|
9
|
+
* </Collapsible.Trigger>
|
|
10
|
+
* <Collapsible.Content>
|
|
11
|
+
* <Text>Anything, of any height.</Text>
|
|
12
|
+
* </Collapsible.Content>
|
|
13
|
+
* </Collapsible>
|
|
14
|
+
* ```
|
|
15
|
+
*
|
|
16
|
+
* ## Why this and not a one-item Accordion
|
|
17
|
+
*
|
|
18
|
+
* The two look the same and differ in what happens to the body when it closes.
|
|
19
|
+
* An accordion unmounts it, which is right when a closed section should cost
|
|
20
|
+
* nothing and there is nothing inside worth keeping.
|
|
21
|
+
*
|
|
22
|
+
* This one keeps the body mounted and animates its height, so what is inside
|
|
23
|
+
* survives being closed — a part-filled form still has what was typed into it,
|
|
24
|
+
* a list is still scrolled to where it was, a video is still part-way through.
|
|
25
|
+
* That is the case this component exists for; reach for `Accordion` when
|
|
26
|
+
* sections are mutually exclusive or the body is expensive and rarely opened.
|
|
27
|
+
*
|
|
28
|
+
* ## The body is mounted whether or not it is open
|
|
29
|
+
*
|
|
30
|
+
* A height cannot be animated from `auto`, so the content has to be measured
|
|
31
|
+
* before it can be travelled to, and measuring it means rendering it. There is
|
|
32
|
+
* no lazy version of that: a body that has never been opened has still been
|
|
33
|
+
* rendered once. For a body heavy enough that this matters, an `Accordion` with
|
|
34
|
+
* a single item unmounts it instead.
|
|
35
|
+
*
|
|
36
|
+
* ## Reduced motion
|
|
37
|
+
*
|
|
38
|
+
* With the operating system set to reduce motion the panel snaps between its
|
|
39
|
+
* two states and the chevron turns without travelling. The disclosure still
|
|
40
|
+
* happens — it is the movement that is dropped, not the change.
|
|
41
|
+
*/
|
|
42
|
+
import {
|
|
43
|
+
createContext,
|
|
44
|
+
forwardRef,
|
|
45
|
+
useCallback,
|
|
46
|
+
useContext,
|
|
47
|
+
useEffect,
|
|
48
|
+
useMemo,
|
|
49
|
+
useState,
|
|
50
|
+
type ReactNode,
|
|
51
|
+
} from 'react';
|
|
52
|
+
import {
|
|
53
|
+
Pressable,
|
|
54
|
+
View,
|
|
55
|
+
type PressableProps,
|
|
56
|
+
type Text as RNText,
|
|
57
|
+
type ViewProps,
|
|
58
|
+
} from 'react-native';
|
|
59
|
+
import Animated, {
|
|
60
|
+
useAnimatedStyle,
|
|
61
|
+
useReducedMotion,
|
|
62
|
+
useSharedValue,
|
|
63
|
+
withTiming,
|
|
64
|
+
} from 'react-native-reanimated';
|
|
65
|
+
import { tv } from 'tailwind-variants';
|
|
66
|
+
import { ChevronDownIcon } from '../../icons';
|
|
67
|
+
import { Collapse } from '../../primitives/collapse';
|
|
68
|
+
import { Text, type TextProps, textChildren } from '../../primitives/text';
|
|
69
|
+
|
|
70
|
+
export type CollapsibleVariant = 'default' | 'surface' | 'ghost';
|
|
71
|
+
|
|
72
|
+
/** Matches the chevron in `Accordion`, so the two read as the same control. */
|
|
73
|
+
const INDICATOR_DURATION = 200;
|
|
74
|
+
|
|
75
|
+
const collapsibleVariants = tv({
|
|
76
|
+
slots: {
|
|
77
|
+
root: 'w-full flex-col',
|
|
78
|
+
trigger: 'flex-row items-center justify-between gap-4 py-4',
|
|
79
|
+
title: 'flex-1 text-base font-medium text-foreground',
|
|
80
|
+
indicator: 'items-center justify-center',
|
|
81
|
+
content: 'pb-4',
|
|
82
|
+
contentText: 'text-sm text-muted-foreground',
|
|
83
|
+
},
|
|
84
|
+
variants: {
|
|
85
|
+
variant: {
|
|
86
|
+
default: { trigger: 'px-1', content: 'px-1' },
|
|
87
|
+
surface: {
|
|
88
|
+
root: 'overflow-hidden rounded-2xl border border-border bg-surface',
|
|
89
|
+
trigger: 'px-4',
|
|
90
|
+
content: 'px-4',
|
|
91
|
+
},
|
|
92
|
+
ghost: { trigger: 'px-0', content: 'px-0' },
|
|
93
|
+
},
|
|
94
|
+
},
|
|
95
|
+
defaultVariants: {
|
|
96
|
+
variant: 'default',
|
|
97
|
+
},
|
|
98
|
+
});
|
|
99
|
+
|
|
100
|
+
interface CollapsibleContextValue {
|
|
101
|
+
open: boolean;
|
|
102
|
+
toggle: () => void;
|
|
103
|
+
isDisabled: boolean;
|
|
104
|
+
variant: CollapsibleVariant;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
const CollapsibleContext = createContext<CollapsibleContextValue | null>(null);
|
|
108
|
+
|
|
109
|
+
function useCollapsible(component: string): CollapsibleContextValue {
|
|
110
|
+
const context = useContext(CollapsibleContext);
|
|
111
|
+
if (!context) throw new Error(`${component} must be used within a <Collapsible>`);
|
|
112
|
+
return context;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
export interface CollapsibleProps extends ViewProps {
|
|
116
|
+
className?: string;
|
|
117
|
+
variant?: CollapsibleVariant;
|
|
118
|
+
/** Whether the body is showing, controlled. */
|
|
119
|
+
open?: boolean;
|
|
120
|
+
defaultOpen?: boolean;
|
|
121
|
+
onOpenChange?: (open: boolean) => void;
|
|
122
|
+
/** Stops the trigger opening or closing it, and marks it disabled to a screen reader. */
|
|
123
|
+
isDisabled?: boolean;
|
|
124
|
+
children?: ReactNode;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
const CollapsibleRoot = forwardRef<View, CollapsibleProps>(
|
|
128
|
+
(
|
|
129
|
+
{
|
|
130
|
+
className,
|
|
131
|
+
variant = 'default',
|
|
132
|
+
open,
|
|
133
|
+
defaultOpen = false,
|
|
134
|
+
onOpenChange,
|
|
135
|
+
isDisabled = false,
|
|
136
|
+
children,
|
|
137
|
+
...props
|
|
138
|
+
},
|
|
139
|
+
ref
|
|
140
|
+
) => {
|
|
141
|
+
const [internal, setInternal] = useState(defaultOpen);
|
|
142
|
+
const isControlled = open !== undefined;
|
|
143
|
+
const isOpen = isControlled ? open : internal;
|
|
144
|
+
|
|
145
|
+
const toggle = useCallback(() => {
|
|
146
|
+
const next = !isOpen;
|
|
147
|
+
if (!isControlled) setInternal(next);
|
|
148
|
+
onOpenChange?.(next);
|
|
149
|
+
}, [isOpen, isControlled, onOpenChange]);
|
|
150
|
+
|
|
151
|
+
const context = useMemo(
|
|
152
|
+
() => ({ open: isOpen, toggle, isDisabled, variant }),
|
|
153
|
+
[isOpen, toggle, isDisabled, variant]
|
|
154
|
+
);
|
|
155
|
+
|
|
156
|
+
const { root } = collapsibleVariants({ variant });
|
|
157
|
+
|
|
158
|
+
return (
|
|
159
|
+
<CollapsibleContext.Provider value={context}>
|
|
160
|
+
<View ref={ref} className={root({ className })} {...props}>
|
|
161
|
+
{children}
|
|
162
|
+
</View>
|
|
163
|
+
</CollapsibleContext.Provider>
|
|
164
|
+
);
|
|
165
|
+
}
|
|
166
|
+
);
|
|
167
|
+
CollapsibleRoot.displayName = 'Collapsible';
|
|
168
|
+
|
|
169
|
+
export interface CollapsibleTriggerProps extends Omit<PressableProps, 'children'> {
|
|
170
|
+
className?: string;
|
|
171
|
+
children?: ReactNode;
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
/** The pressable header row. Bare strings are wrapped in the title style. */
|
|
175
|
+
const CollapsibleTrigger = forwardRef<View, CollapsibleTriggerProps>(
|
|
176
|
+
({ className, children, onPress, ...props }, ref) => {
|
|
177
|
+
const { open, toggle, isDisabled, variant } = useCollapsible('Collapsible.Trigger');
|
|
178
|
+
const { trigger, title } = collapsibleVariants({ variant });
|
|
179
|
+
|
|
180
|
+
return (
|
|
181
|
+
<Pressable
|
|
182
|
+
ref={ref}
|
|
183
|
+
accessibilityRole="button"
|
|
184
|
+
accessibilityState={{ expanded: open, disabled: isDisabled }}
|
|
185
|
+
disabled={isDisabled}
|
|
186
|
+
className={trigger({ className })}
|
|
187
|
+
{...props}
|
|
188
|
+
onPress={(event) => {
|
|
189
|
+
onPress?.(event);
|
|
190
|
+
toggle();
|
|
191
|
+
}}
|
|
192
|
+
>
|
|
193
|
+
{textChildren(children, (text) => (
|
|
194
|
+
<Text className={title()}>{text}</Text>
|
|
195
|
+
))}
|
|
196
|
+
</Pressable>
|
|
197
|
+
);
|
|
198
|
+
}
|
|
199
|
+
);
|
|
200
|
+
CollapsibleTrigger.displayName = 'Collapsible.Trigger';
|
|
201
|
+
|
|
202
|
+
const CollapsibleTitle = forwardRef<RNText, TextProps>(({ className, ...props }, ref) => {
|
|
203
|
+
const { variant } = useCollapsible('Collapsible.Title');
|
|
204
|
+
const { title } = collapsibleVariants({ variant });
|
|
205
|
+
return <Text ref={ref} className={title({ className })} {...props} />;
|
|
206
|
+
});
|
|
207
|
+
CollapsibleTitle.displayName = 'Collapsible.Title';
|
|
208
|
+
|
|
209
|
+
export interface CollapsibleIndicatorProps extends ViewProps {
|
|
210
|
+
className?: string;
|
|
211
|
+
/** Replaces the default chevron. */
|
|
212
|
+
children?: ReactNode;
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
/** Chevron that rotates 180° while the body is open. */
|
|
216
|
+
const CollapsibleIndicator = forwardRef<View, CollapsibleIndicatorProps>(
|
|
217
|
+
({ className, children, ...props }, ref) => {
|
|
218
|
+
const { open, variant } = useCollapsible('Collapsible.Indicator');
|
|
219
|
+
const { indicator } = collapsibleVariants({ variant });
|
|
220
|
+
const reducedMotion = useReducedMotion();
|
|
221
|
+
const progress = useSharedValue(open ? 1 : 0);
|
|
222
|
+
|
|
223
|
+
useEffect(() => {
|
|
224
|
+
progress.value = reducedMotion
|
|
225
|
+
? open
|
|
226
|
+
? 1
|
|
227
|
+
: 0
|
|
228
|
+
: withTiming(open ? 1 : 0, { duration: INDICATOR_DURATION });
|
|
229
|
+
}, [open, reducedMotion, progress]);
|
|
230
|
+
|
|
231
|
+
const style = useAnimatedStyle(() => ({
|
|
232
|
+
transform: [{ rotate: `${progress.value * 180}deg` }],
|
|
233
|
+
}));
|
|
234
|
+
|
|
235
|
+
return (
|
|
236
|
+
<Animated.View style={style}>
|
|
237
|
+
<View ref={ref} className={indicator({ className })} {...props}>
|
|
238
|
+
{children ?? <ChevronDownIcon size={18} />}
|
|
239
|
+
</View>
|
|
240
|
+
</Animated.View>
|
|
241
|
+
);
|
|
242
|
+
}
|
|
243
|
+
);
|
|
244
|
+
CollapsibleIndicator.displayName = 'Collapsible.Indicator';
|
|
245
|
+
|
|
246
|
+
export interface CollapsibleContentProps extends ViewProps {
|
|
247
|
+
className?: string;
|
|
248
|
+
children?: ReactNode;
|
|
249
|
+
}
|
|
250
|
+
|
|
251
|
+
/**
|
|
252
|
+
* The body, opened and closed by animating its own height.
|
|
253
|
+
*
|
|
254
|
+
* It stays mounted while closed, which is the point of the component — see the
|
|
255
|
+
* note at the top of the file. A closed body is hidden from the accessibility
|
|
256
|
+
* tree as well as from the eye, because a screen reader reading out a section
|
|
257
|
+
* that is not on screen is worse than one that skips it.
|
|
258
|
+
*/
|
|
259
|
+
const CollapsibleContent = forwardRef<View, CollapsibleContentProps>(
|
|
260
|
+
({ className, children, ...props }, ref) => {
|
|
261
|
+
const { open, variant } = useCollapsible('Collapsible.Content');
|
|
262
|
+
const { content, contentText } = collapsibleVariants({ variant });
|
|
263
|
+
|
|
264
|
+
return (
|
|
265
|
+
<Collapse open={open} className={content({ className })}>
|
|
266
|
+
<View
|
|
267
|
+
ref={ref}
|
|
268
|
+
accessibilityElementsHidden={!open}
|
|
269
|
+
importantForAccessibility={open ? 'auto' : 'no-hide-descendants'}
|
|
270
|
+
{...props}
|
|
271
|
+
>
|
|
272
|
+
{textChildren(children, (text) => (
|
|
273
|
+
<Text className={contentText()}>{text}</Text>
|
|
274
|
+
))}
|
|
275
|
+
</View>
|
|
276
|
+
</Collapse>
|
|
277
|
+
);
|
|
278
|
+
}
|
|
279
|
+
);
|
|
280
|
+
CollapsibleContent.displayName = 'Collapsible.Content';
|
|
281
|
+
|
|
282
|
+
export const Collapsible = Object.assign(CollapsibleRoot, {
|
|
283
|
+
Trigger: CollapsibleTrigger,
|
|
284
|
+
Title: CollapsibleTitle,
|
|
285
|
+
Indicator: CollapsibleIndicator,
|
|
286
|
+
Content: CollapsibleContent,
|
|
287
|
+
});
|