@oxyhq/bloom 1.10.1 → 1.12.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/docs/layout.mdx +40 -3
- package/lib/commonjs/fab/Fab.js +55 -4
- package/lib/commonjs/fab/Fab.js.map +1 -1
- package/lib/commonjs/fab/Fab.web.js +29 -1
- package/lib/commonjs/fab/Fab.web.js.map +1 -1
- package/lib/commonjs/layout/bottom-edge.js +93 -26
- package/lib/commonjs/layout/bottom-edge.js.map +1 -1
- package/lib/commonjs/layout/index.js +6 -0
- package/lib/commonjs/layout/index.js.map +1 -1
- package/lib/commonjs/tab-bar/TabBarBase.js +22 -6
- package/lib/commonjs/tab-bar/TabBarBase.js.map +1 -1
- package/lib/module/fab/Fab.js +57 -6
- package/lib/module/fab/Fab.js.map +1 -1
- package/lib/module/fab/Fab.web.js +30 -2
- package/lib/module/fab/Fab.web.js.map +1 -1
- package/lib/module/layout/bottom-edge.js +92 -26
- package/lib/module/layout/bottom-edge.js.map +1 -1
- package/lib/module/layout/index.js +1 -1
- package/lib/module/layout/index.js.map +1 -1
- package/lib/module/tab-bar/TabBarBase.js +24 -8
- package/lib/module/tab-bar/TabBarBase.js.map +1 -1
- package/lib/typescript/commonjs/fab/Fab.d.ts.map +1 -1
- package/lib/typescript/commonjs/fab/Fab.web.d.ts.map +1 -1
- package/lib/typescript/commonjs/layout/bottom-edge.d.ts +58 -10
- package/lib/typescript/commonjs/layout/bottom-edge.d.ts.map +1 -1
- package/lib/typescript/commonjs/layout/index.d.ts +1 -1
- package/lib/typescript/commonjs/layout/index.d.ts.map +1 -1
- package/lib/typescript/commonjs/tab-bar/TabBarBase.d.ts.map +1 -1
- package/lib/typescript/module/fab/Fab.d.ts.map +1 -1
- package/lib/typescript/module/fab/Fab.web.d.ts.map +1 -1
- package/lib/typescript/module/layout/bottom-edge.d.ts +58 -10
- package/lib/typescript/module/layout/bottom-edge.d.ts.map +1 -1
- package/lib/typescript/module/layout/index.d.ts +1 -1
- package/lib/typescript/module/layout/index.d.ts.map +1 -1
- package/lib/typescript/module/tab-bar/TabBarBase.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/fab/Fab.tsx +57 -4
- package/src/fab/Fab.web.tsx +31 -2
- package/src/layout/bottom-edge.tsx +109 -33
- package/src/layout/index.ts +6 -1
- package/src/tab-bar/TabBarBase.tsx +28 -6
package/docs/layout.mdx
CHANGED
|
@@ -38,7 +38,7 @@ height. The inset is already folded into the gap, so adding it again
|
|
|
38
38
|
double-counts the home indicator and strands a band of dead space.
|
|
39
39
|
</Admonition>
|
|
40
40
|
|
|
41
|
-
##
|
|
41
|
+
## The registry — what is already there
|
|
42
42
|
|
|
43
43
|
Knowing where the edge is does not tell a FAB that a tab bar is already parked
|
|
44
44
|
on it. A surface that parks there **claims** its footprint; a surface that wants
|
|
@@ -56,8 +56,40 @@ const occupied = useBottomEdgeInset();
|
|
|
56
56
|
Neither imports the other, so any combination composes: a tab bar with no FAB, a
|
|
57
57
|
FAB with no tab bar, both, or a surface written later.
|
|
58
58
|
|
|
59
|
-
|
|
60
|
-
|
|
59
|
+
### A size and a state, because they travel differently
|
|
60
|
+
|
|
61
|
+
A surface that **collapses** — the tab bar minimizes 58 → 44 on scroll —
|
|
62
|
+
publishes two things, and only one of them is a measurement.
|
|
63
|
+
|
|
64
|
+
| hook | answers | who reads it |
|
|
65
|
+
| --- | --- | --- |
|
|
66
|
+
| `useBottomEdgeInset()` | what is permanently **reserved** | a list's `paddingBottom`, a toast stack, a FAB's anchor |
|
|
67
|
+
| `useBottomEdgeCollapsed()` | has the surface **retracted** | a FAB, which fades out |
|
|
68
|
+
|
|
69
|
+
```tsx
|
|
70
|
+
// A claimant that collapses keeps `reserved` at its FULL size and reports the
|
|
71
|
+
// collapse separately.
|
|
72
|
+
useClaimBottomEdge(gap + EXPANDED_HEIGHT, isMinimized);
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
Reserved never shrinks while its claimant is mounted, because the bar re-expands
|
|
76
|
+
the instant the user scrolls back up: shrinking it would resize a list's content
|
|
77
|
+
on every scroll and jump a toast 14px mid-display.
|
|
78
|
+
|
|
79
|
+
<Admonition kind="warning">
|
|
80
|
+
**The collapse is a boolean, and that is the hard-won part.** It first shipped as
|
|
81
|
+
a live pixel height so a FAB could ride down with the bar — and it felt broken on
|
|
82
|
+
a device. The bar animates on the UI thread; a React consumer hears about the
|
|
83
|
+
change through `runOnJS` plus two render passes, so its motion **starts one to
|
|
84
|
+
three frames late**, worst exactly while scrolling because that is when the JS
|
|
85
|
+
thread is busiest. No spring config fixes a variable start delay.
|
|
86
|
+
|
|
87
|
+
Two things moving together betray that lag. A state change does not: a reader
|
|
88
|
+
that **fades** has no spatial relationship left to violate, so the same latency
|
|
89
|
+
is imperceptible. Anything that genuinely must track the collapse per-frame has
|
|
90
|
+
to read the tab bar's own shared value on the UI thread — React state is the
|
|
91
|
+
wrong transport for it at any width.
|
|
92
|
+
</Admonition>
|
|
61
93
|
|
|
62
94
|
## Things that are easy to get wrong
|
|
63
95
|
|
|
@@ -77,3 +109,8 @@ hiding would float it off the bottom of the screen for nothing.
|
|
|
77
109
|
so a reader mounted in the same commit as its claimant reads `0` on the first
|
|
78
110
|
commit. These are layout offsets rather than measurements, so nothing here waits
|
|
79
111
|
on a real layout pass.
|
|
112
|
+
|
|
113
|
+
**A faded surface must also stop taking input.** Bloom's `Fab` sets
|
|
114
|
+
`pointerEvents: 'none'`, drops its `onPress` and hides itself from the
|
|
115
|
+
accessibility tree when it fades — an invisible target that still takes a tap is
|
|
116
|
+
worse than a visible one.
|
package/lib/commonjs/fab/Fab.js
CHANGED
|
@@ -55,6 +55,23 @@ function resolveSize(size) {
|
|
|
55
55
|
}
|
|
56
56
|
return SIZE_CONFIG[size];
|
|
57
57
|
}
|
|
58
|
+
|
|
59
|
+
/**
|
|
60
|
+
* How long the FAB takes to leave when the bottom edge collapses.
|
|
61
|
+
*
|
|
62
|
+
* A DURATION, not a spring matched to the tab bar's — because the FAB is not
|
|
63
|
+
* trying to stay level with the bar any more. It tried: an earlier version rode
|
|
64
|
+
* the bar down by the 14px it shrank, and on a device the two visibly did not
|
|
65
|
+
* move together. The bar animates on the UI thread while this component learns
|
|
66
|
+
* about the collapse through `runOnJS` plus two React renders, so it starts one
|
|
67
|
+
* to three frames late — worst exactly while scrolling, which is the only time
|
|
68
|
+
* it happens. No spring config fixes a variable start delay.
|
|
69
|
+
*
|
|
70
|
+
* Fading is what makes that latency invisible: there is no spatial relationship
|
|
71
|
+
* left to violate, so nothing betrays the few frames. Slightly quicker than the
|
|
72
|
+
* bar's 380ms minimize, so the FAB is gone before the eye goes looking for it.
|
|
73
|
+
*/
|
|
74
|
+
const COLLAPSE_FADE_MS = 200;
|
|
58
75
|
const DEFAULT_OFFSET = 16;
|
|
59
76
|
const DEFAULT_Z_INDEX = 50;
|
|
60
77
|
const HIT_SLOP = {
|
|
@@ -76,6 +93,10 @@ const HIT_SLOP = {
|
|
|
76
93
|
* lands above a floating tab bar instead of behind it. A z-index cannot fix that
|
|
77
94
|
* pairing: the bar's host is the last sibling of the app shell and paints over
|
|
78
95
|
* every descendant, so the FAB has to be somewhere else, not merely on top.
|
|
96
|
+
*
|
|
97
|
+
* It is the RESERVED inset, so this stays a static layout value — it does not
|
|
98
|
+
* shrink when the bar collapses. The FAB fades out instead of chasing the bar
|
|
99
|
+
* down; see `COLLAPSE_FADE_MS` for why chasing it does not work.
|
|
79
100
|
*/
|
|
80
101
|
function placementStyle(placement, offset, bottomEdgeInset) {
|
|
81
102
|
if (placement === 'static') return {};
|
|
@@ -142,10 +163,34 @@ const FabComponent = ({
|
|
|
142
163
|
zIndex = DEFAULT_Z_INDEX
|
|
143
164
|
}) => {
|
|
144
165
|
const bottomEdgeInset = (0, _bottomEdge.useBottomEdgeInset)();
|
|
166
|
+
// The FAB belongs to the chrome: when the chrome retracts, so does it.
|
|
167
|
+
const bottomEdgeCollapsed = (0, _bottomEdge.useBottomEdgeCollapsed)();
|
|
145
168
|
const theme = (0, _useTheme.useTheme)();
|
|
146
169
|
const sizeConfig = (0, _react.useMemo)(() => resolveSize(size), [size]);
|
|
147
170
|
const isExtended = label != null && label.length > 0;
|
|
148
171
|
const content = icon ?? children;
|
|
172
|
+
|
|
173
|
+
// Only a FAB anchored to the BOTTOM edge is affected by the bottom edge
|
|
174
|
+
// collapsing; a top-placed or consumer-placed one is not.
|
|
175
|
+
const hidesOnCollapse = placement === 'bottom-right' || placement === 'bottom-left';
|
|
176
|
+
const hidden = hidesOnCollapse && bottomEdgeCollapsed;
|
|
177
|
+
const fade = (0, _react.useRef)(new _reactNative.Animated.Value(1)).current;
|
|
178
|
+
|
|
179
|
+
// An effect because RN's Animated has no declarative form — starting an
|
|
180
|
+
// animation is imperative by construction. `opacity` is native-drivable, so
|
|
181
|
+
// once started this never touches the JS thread again, which matters: it runs
|
|
182
|
+
// while the user is mid-scroll.
|
|
183
|
+
// The disabled dim rides on the SAME value rather than a second static
|
|
184
|
+
// `opacity` in the style array: two opacity entries would mean the later one
|
|
185
|
+
// silently wins, so a disabled FAB would either not dim or not fade.
|
|
186
|
+
const restingOpacity = disabled ? 0.5 : 1;
|
|
187
|
+
(0, _react.useEffect)(() => {
|
|
188
|
+
_reactNative.Animated.timing(fade, {
|
|
189
|
+
toValue: hidden ? 0 : restingOpacity,
|
|
190
|
+
duration: COLLAPSE_FADE_MS,
|
|
191
|
+
useNativeDriver: true
|
|
192
|
+
}).start();
|
|
193
|
+
}, [hidden, restingOpacity, fade]);
|
|
149
194
|
const {
|
|
150
195
|
scaleAnim,
|
|
151
196
|
onPressIn,
|
|
@@ -202,8 +247,8 @@ const FabComponent = ({
|
|
|
202
247
|
className: className,
|
|
203
248
|
style: [placementStyle(placement, offset, bottomEdgeInset), {
|
|
204
249
|
zIndex
|
|
205
|
-
}, containerStyle,
|
|
206
|
-
opacity:
|
|
250
|
+
}, containerStyle, {
|
|
251
|
+
opacity: fade
|
|
207
252
|
}, pressed && !disabled && {
|
|
208
253
|
backgroundColor: pressedBackground
|
|
209
254
|
},
|
|
@@ -216,8 +261,14 @@ const FabComponent = ({
|
|
|
216
261
|
transform: [{
|
|
217
262
|
scale: scaleAnim
|
|
218
263
|
}]
|
|
219
|
-
}, style]
|
|
220
|
-
|
|
264
|
+
}, style]
|
|
265
|
+
// A FAB that has faded out must not be pressable or reachable — an
|
|
266
|
+
// invisible target that still takes a tap is worse than a visible one.
|
|
267
|
+
,
|
|
268
|
+
pointerEvents: hidden ? 'none' : 'auto',
|
|
269
|
+
accessibilityElementsHidden: hidden,
|
|
270
|
+
importantForAccessibility: hidden ? 'no-hide-descendants' : 'auto',
|
|
271
|
+
onPress: disabled || hidden ? undefined : onPress,
|
|
221
272
|
onPressIn: handlePressIn,
|
|
222
273
|
onPressOut: handlePressOut,
|
|
223
274
|
disabled: disabled,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_reactNativeCss","_bottomEdge","_useTheme","_tokens","_shadows","_pressColors","_usePressAnimation","_useInteractionState","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","SIZE_CONFIG","small","diameter","iconBox","fontSize","medium","large","MIN_NUMERIC_ICON_BOX","resolveSize","size","Math","max","round","DEFAULT_OFFSET","DEFAULT_Z_INDEX","HIT_SLOP","top","bottom","left","right","placementStyle","placement","offset","bottomEdgeInset","style","position","FabPressable","Pressable","StyledPressable","styled","className","AnimatedPressable","Animated","createAnimatedComponent","FabComponent","onPress","icon","children","label","variant","disabled","accessibilityLabel","accessibilityHint","labelStyle","testID","zIndex","useBottomEdgeInset","theme","useTheme","sizeConfig","useMemo","isExtended","length","content","scaleAnim","onPressIn","onPressOut","usePressAnimation","undefined","animation","pressScale","state","pressed","onIn","onPressedIn","onOut","onPressedOut","useInteractionState","resolvedColors","resolveVariant","colors","pressedBackground","pressedSurface","background","foreground","containerStyle","base","alignItems","justifyContent","flexDirection","backgroundColor","borderRadius","full","height","bloomShadowStyle","paddingHorizontal","gap","width","shadow","labelTextStyle","fontWeight","color","handlePressIn","handlePressOut","jsxs","opacity","transform","scale","hitSlop","accessibilityRole","accessibilityState","jsx","View","Text","numberOfLines","secondary","secondaryForeground","tertiary","tertiaryForeground","card","text","primary","primaryForeground","Fab","exports","memo","displayName"],"sourceRoot":"../../../src","sources":["fab/Fab.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAUA,IAAAE,eAAA,GAAAF,OAAA;AAEA,IAAAG,WAAA,GAAAH,OAAA;AACA,IAAAI,SAAA,GAAAJ,OAAA;AACA,IAAAK,OAAA,GAAAL,OAAA;AACA,IAAAM,QAAA,GAAAN,OAAA;AACA,IAAAO,YAAA,GAAAP,OAAA;AACA,IAAAQ,kBAAA,GAAAR,OAAA;AACA,IAAAS,oBAAA,GAAAT,OAAA;AAAqE,IAAAU,WAAA,GAAAV,OAAA;AAAA,SAAAD,wBAAAY,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAd,uBAAA,YAAAA,CAAAY,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAWrE;AACA;AACA;AACA,MAAMkB,WAA0C,GAAG;EACjDC,KAAK,EAAE;IAAEC,QAAQ,EAAE,EAAE;IAAEC,OAAO,EAAE,EAAE;IAAEC,QAAQ,EAAE;EAAG,CAAC;EAClDC,MAAM,EAAE;IAAEH,QAAQ,EAAE,EAAE;IAAEC,OAAO,EAAE,EAAE;IAAEC,QAAQ,EAAE;EAAG,CAAC;EACnDE,KAAK,EAAE;IAAEJ,QAAQ,EAAE,EAAE;IAAEC,OAAO,EAAE,EAAE;IAAEC,QAAQ,EAAE;EAAG;AACnD,CAAC;AAED,MAAMG,oBAAoB,GAAG,EAAE;;AAE/B;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,WAAWA,CAACC,IAAsB,EAAgB;EACzD,IAAI,OAAOA,IAAI,KAAK,QAAQ,EAAE;IAC5B,OAAO;MACLP,QAAQ,EAAEO,IAAI;MACdN,OAAO,EAAEO,IAAI,CAACC,GAAG,CAACJ,oBAAoB,EAAEG,IAAI,CAACE,KAAK,CAACH,IAAI,GAAG,GAAG,CAAC,CAAC;MAC/DL,QAAQ,EAAEM,IAAI,CAACC,GAAG,CAAC,EAAE,EAAED,IAAI,CAACE,KAAK,CAACH,IAAI,GAAG,IAAI,CAAC;IAChD,CAAC;EACH;EACA,OAAOT,WAAW,CAACS,IAAI,CAAC;AAC1B;
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_reactNativeCss","_bottomEdge","_useTheme","_tokens","_shadows","_pressColors","_usePressAnimation","_useInteractionState","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","SIZE_CONFIG","small","diameter","iconBox","fontSize","medium","large","MIN_NUMERIC_ICON_BOX","resolveSize","size","Math","max","round","COLLAPSE_FADE_MS","DEFAULT_OFFSET","DEFAULT_Z_INDEX","HIT_SLOP","top","bottom","left","right","placementStyle","placement","offset","bottomEdgeInset","style","position","FabPressable","Pressable","StyledPressable","styled","className","AnimatedPressable","Animated","createAnimatedComponent","FabComponent","onPress","icon","children","label","variant","disabled","accessibilityLabel","accessibilityHint","labelStyle","testID","zIndex","useBottomEdgeInset","bottomEdgeCollapsed","useBottomEdgeCollapsed","theme","useTheme","sizeConfig","useMemo","isExtended","length","content","hidesOnCollapse","hidden","fade","useRef","Value","current","restingOpacity","useEffect","timing","toValue","duration","useNativeDriver","start","scaleAnim","onPressIn","onPressOut","usePressAnimation","undefined","animation","pressScale","state","pressed","onIn","onPressedIn","onOut","onPressedOut","useInteractionState","resolvedColors","resolveVariant","colors","pressedBackground","pressedSurface","background","foreground","containerStyle","base","alignItems","justifyContent","flexDirection","backgroundColor","borderRadius","full","height","bloomShadowStyle","paddingHorizontal","gap","width","shadow","labelTextStyle","fontWeight","color","handlePressIn","handlePressOut","jsxs","opacity","transform","scale","pointerEvents","accessibilityElementsHidden","importantForAccessibility","hitSlop","accessibilityRole","accessibilityState","jsx","View","Text","numberOfLines","secondary","secondaryForeground","tertiary","tertiaryForeground","card","text","primary","primaryForeground","Fab","exports","memo","displayName"],"sourceRoot":"../../../src","sources":["fab/Fab.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -81,7 +81,10 @@ const BLOOM_FAB_CSS = (0, _interactiveWebCss.interactiveWebCss)({
|
|
|
81
81
|
box-shadow: var(--bloom-fab-shadow);
|
|
82
82
|
font-family: inherit;
|
|
83
83
|
`,
|
|
84
|
-
|
|
84
|
+
// `opacity` carries two things: the disabled dim and the collapse fade. 200ms
|
|
85
|
+
// is the collapse's number — the dim is imperceptibly slower for it, and one
|
|
86
|
+
// property cannot hold two durations.
|
|
87
|
+
transition: 'opacity 200ms ease, transform 120ms ease, box-shadow 160ms ease, background-color 120ms ease',
|
|
85
88
|
// A FAB lifts on hover rather than dimming: it floats over the content, so a
|
|
86
89
|
// deeper shadow is the affordance an opacity dip cannot express.
|
|
87
90
|
hover: {
|
|
@@ -128,6 +131,16 @@ const BLOOM_FAB_CSS = (0, _interactiveWebCss.interactiveWebCss)({
|
|
|
128
131
|
* behind it. A z-index cannot fix that pairing: the bar's host is the last
|
|
129
132
|
* sibling of the app shell and paints over every descendant, so the FAB has to be
|
|
130
133
|
* somewhere else, not merely on top.
|
|
134
|
+
*
|
|
135
|
+
* It is the LIVE inset here, and `bottom` is transitioned — where the native fork
|
|
136
|
+
* follows a collapsing bar with an Animated TRANSFORM instead. The forks differ
|
|
137
|
+
* because the constraint does. Native must stay off the JS thread mid-scroll, so
|
|
138
|
+
* the follow has to be a native-driver transform. On web a transform cannot carry
|
|
139
|
+
* it: `:active` already sets `transform: scale(...)` from the shared
|
|
140
|
+
* `interactive-web-css` rule, and an inline transform would beat that stylesheet
|
|
141
|
+
* rule and eat the press scale — and one property cannot hold the press's 120ms
|
|
142
|
+
* and the collapse's 380ms at once. `bottom` is a separate property with its own
|
|
143
|
+
* duration, and it moves twice per scroll gesture rather than per frame.
|
|
131
144
|
*/
|
|
132
145
|
function placementStyle(placement, offset, bottomEdgeInset) {
|
|
133
146
|
if (placement === 'static') return {};
|
|
@@ -206,6 +219,12 @@ const FabWebComponent = ({
|
|
|
206
219
|
}) => {
|
|
207
220
|
(0, _interactiveWebCss.useInteractiveWebCss)(STYLE_ID, BLOOM_FAB_CSS);
|
|
208
221
|
const bottomEdgeInset = (0, _bottomEdge.useBottomEdgeInset)();
|
|
222
|
+
// The FAB belongs to the chrome: when the chrome retracts, so does it. Only a
|
|
223
|
+
// BOTTOM-anchored FAB is affected by the bottom edge collapsing.
|
|
224
|
+
const bottomEdgeCollapsed = (0, _bottomEdge.useBottomEdgeCollapsed)();
|
|
225
|
+
// A faded-out FAB must not be tabbable, clickable or announced — an invisible
|
|
226
|
+
// target that still takes a click is worse than a visible one.
|
|
227
|
+
const hidden = bottomEdgeCollapsed && (placement === 'bottom-right' || placement === 'bottom-left');
|
|
209
228
|
const theme = (0, _useTheme.useTheme)();
|
|
210
229
|
const reactId = (0, _react.useId)();
|
|
211
230
|
const resolvedId = id ?? `bloom-fab-${reactId}`;
|
|
@@ -236,6 +255,13 @@ const FabWebComponent = ({
|
|
|
236
255
|
['--bloom-fab-press-scale']: _tokens.animation.pressScale,
|
|
237
256
|
...placementStyle(placement, offset, bottomEdgeInset)
|
|
238
257
|
};
|
|
258
|
+
// Only while HIDDEN, so the `:disabled { opacity }` rule still owns the
|
|
259
|
+
// dim the rest of the time — an inline opacity would beat that stylesheet
|
|
260
|
+
// rule unconditionally and a disabled FAB would stop dimming.
|
|
261
|
+
if (hidden) {
|
|
262
|
+
base.opacity = 0;
|
|
263
|
+
base.pointerEvents = 'none';
|
|
264
|
+
}
|
|
239
265
|
if (isExtended) {
|
|
240
266
|
const pad = sizeConfig.diameter <= 44 ? 14 : 20;
|
|
241
267
|
base.paddingLeft = pad;
|
|
@@ -274,6 +300,8 @@ const FabWebComponent = ({
|
|
|
274
300
|
onClick: handleClick,
|
|
275
301
|
disabled: disabled,
|
|
276
302
|
"aria-disabled": disabled || undefined,
|
|
303
|
+
"aria-hidden": hidden || undefined,
|
|
304
|
+
tabIndex: hidden ? -1 : undefined,
|
|
277
305
|
"aria-label": ariaLabel,
|
|
278
306
|
title: title ?? accessibilityHint,
|
|
279
307
|
"data-testid": testID,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","_bottomEdge","_useTheme","_tokens","_pressColors","_interactiveWebCss","_flattenWebStyle","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","SIZE_CONFIG","small","diameter","iconBox","fontSize","medium","large","MIN_NUMERIC_ICON_BOX","resolveSize","size","Math","max","round","DEFAULT_OFFSET","DEFAULT_Z_INDEX","STYLE_ID","BLOOM_FAB_CSS","interactiveWebCss","selector","varPrefix","base","transition","hover","declarations","pressDeclarations","outlineOffset","placementStyle","placement","offset","bottomEdgeInset","style","position","isBottom","bottom","marginTop","top","alignSelf","marginRight","marginLeft","resolveVariant","variant","c","background","secondary","foreground","secondaryForeground","ring","tertiary","tertiaryForeground","card","text","primary","primaryForeground","FabWebComponent","onPress","onClick","icon","children","label","disabled","accessibilityLabel","ariaLabelProp","accessibilityHint","labelStyle","className","testID","zIndex","id","title","type","useInteractiveWebCss","useBottomEdgeInset","theme","useTheme","reactId","useId","resolvedId","sizeConfig","useMemo","isExtended","length","content","variantColors","colors","restShadow","shadow","hoverShadow","containerStyle","color","borderRadius","full","height","fontWeight","pressedSurface","animation","pressScale","pad","paddingLeft","paddingRight","width","handleClick","useCallback","event","preventDefault","ariaLabel","composedClassName","concat","join","resolvedStyle","flattenWebStyle","resolvedLabelStyle","jsxs","undefined","jsx","display","alignItems","justifyContent","Fab","exports","memo","displayName"],"sourceRoot":"../../../src","sources":["fab/Fab.web.tsx"],"mappings":"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
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_bottomEdge","_useTheme","_tokens","_pressColors","_interactiveWebCss","_flattenWebStyle","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","SIZE_CONFIG","small","diameter","iconBox","fontSize","medium","large","MIN_NUMERIC_ICON_BOX","resolveSize","size","Math","max","round","DEFAULT_OFFSET","DEFAULT_Z_INDEX","STYLE_ID","BLOOM_FAB_CSS","interactiveWebCss","selector","varPrefix","base","transition","hover","declarations","pressDeclarations","outlineOffset","placementStyle","placement","offset","bottomEdgeInset","style","position","isBottom","bottom","marginTop","top","alignSelf","marginRight","marginLeft","resolveVariant","variant","c","background","secondary","foreground","secondaryForeground","ring","tertiary","tertiaryForeground","card","text","primary","primaryForeground","FabWebComponent","onPress","onClick","icon","children","label","disabled","accessibilityLabel","ariaLabelProp","accessibilityHint","labelStyle","className","testID","zIndex","id","title","type","useInteractiveWebCss","useBottomEdgeInset","bottomEdgeCollapsed","useBottomEdgeCollapsed","hidden","theme","useTheme","reactId","useId","resolvedId","sizeConfig","useMemo","isExtended","length","content","variantColors","colors","restShadow","shadow","hoverShadow","containerStyle","color","borderRadius","full","height","fontWeight","pressedSurface","animation","pressScale","opacity","pointerEvents","pad","paddingLeft","paddingRight","width","handleClick","useCallback","event","preventDefault","ariaLabel","composedClassName","concat","join","resolvedStyle","flattenWebStyle","resolvedLabelStyle","jsxs","undefined","tabIndex","jsx","display","alignItems","justifyContent","Fab","exports","memo","displayName"],"sourceRoot":"../../../src","sources":["fab/Fab.web.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.BottomEdgeProvider = BottomEdgeProvider;
|
|
7
|
+
exports.useBottomEdgeCollapsed = useBottomEdgeCollapsed;
|
|
7
8
|
exports.useBottomEdgeInset = useBottomEdgeInset;
|
|
8
9
|
exports.useClaimBottomEdge = useClaimBottomEdge;
|
|
9
10
|
var _react = require("react");
|
|
@@ -37,6 +38,33 @@ var _jsxRuntime = require("react/jsx-runtime");
|
|
|
37
38
|
* edge, so two surfaces at that edge overlap rather than stack; the tallest is
|
|
38
39
|
* what a new surface has to clear. Summing would strand it at twice the height.
|
|
39
40
|
*
|
|
41
|
+
* ## A size and a state, because they travel differently
|
|
42
|
+
*
|
|
43
|
+
* A surface that collapses — the tab bar minimizes 58 -> 44 on scroll — publishes
|
|
44
|
+
* two things, and only one of them is a measurement:
|
|
45
|
+
*
|
|
46
|
+
* - RESERVED (`useBottomEdgeInset`) never shrinks while the claimant is
|
|
47
|
+
* mounted. It is what must be kept permanently free: a list's bottom
|
|
48
|
+
* padding, a toast stack's offset. Shrinking it on collapse would jitter a
|
|
49
|
+
* list's content size on every scroll and jump a toast 14px mid-display,
|
|
50
|
+
* because the bar re-expands the instant the user scrolls back up.
|
|
51
|
+
* - COLLAPSED (`useBottomEdgeCollapsed`) is a boolean, deliberately, and this
|
|
52
|
+
* is the part that was learned the hard way. It first shipped as a live
|
|
53
|
+
* PIXEL height so a FAB could ride down with the bar — and it felt broken on
|
|
54
|
+
* a device. The bar animates on the UI thread; a React consumer learns about
|
|
55
|
+
* the change through `runOnJS` plus two render passes, so its motion STARTS
|
|
56
|
+
* one to three frames late, worst exactly while scrolling because that is
|
|
57
|
+
* when the JS thread is busiest. No spring config fixes a variable start
|
|
58
|
+
* delay.
|
|
59
|
+
*
|
|
60
|
+
* Two things moving together betray that lag; a state change does not. A reader
|
|
61
|
+
* that FADES on this boolean has no spatial relationship to violate, so the same
|
|
62
|
+
* few frames of latency are imperceptible. That is why the channel is a state and
|
|
63
|
+
* not a geometry: it is the shape of signal that survives the trip to the JS
|
|
64
|
+
* thread. Anything that genuinely must track the collapse per-frame has to read
|
|
65
|
+
* the tab bar's own shared value on the UI thread instead — React state is the
|
|
66
|
+
* wrong transport for it, at any width.
|
|
67
|
+
*
|
|
40
68
|
* ## Why an external store
|
|
41
69
|
*
|
|
42
70
|
* The claim set is mutable state living outside React. Reading it in a memoized
|
|
@@ -49,17 +77,25 @@ var _jsxRuntime = require("react/jsx-runtime");
|
|
|
49
77
|
function createBottomEdgeStore() {
|
|
50
78
|
const claims = new Map();
|
|
51
79
|
const listeners = new Set();
|
|
52
|
-
let
|
|
80
|
+
let reserved = 0;
|
|
81
|
+
let collapsed = false;
|
|
53
82
|
const recompute = () => {
|
|
54
|
-
let
|
|
55
|
-
|
|
56
|
-
|
|
83
|
+
let nextReserved = 0;
|
|
84
|
+
// ANY claimant collapsing collapses the edge. With the one floating bar this
|
|
85
|
+
// is written for the two readings coincide; where they would not, "something
|
|
86
|
+
// at this edge just retracted" is still the signal a reader wants, and it is
|
|
87
|
+
// the safe direction — a FAB that fades when it did not strictly have to
|
|
88
|
+
// beats one that stays put over a bar that left.
|
|
89
|
+
let nextCollapsed = false;
|
|
90
|
+
for (const claim of claims.values()) {
|
|
91
|
+
if (claim.reserved > nextReserved) nextReserved = claim.reserved;
|
|
92
|
+
if (claim.collapsed) nextCollapsed = true;
|
|
57
93
|
}
|
|
58
|
-
// Bail before notifying: a re-registration at an unchanged
|
|
59
|
-
// render of a claimant
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
94
|
+
// Bail before notifying: a re-registration at an unchanged footprint (every
|
|
95
|
+
// render of a claimant that did not move) must not re-render every reader.
|
|
96
|
+
if (nextReserved === reserved && nextCollapsed === collapsed) return;
|
|
97
|
+
reserved = nextReserved;
|
|
98
|
+
collapsed = nextCollapsed;
|
|
63
99
|
for (const listener of listeners) listener();
|
|
64
100
|
};
|
|
65
101
|
return {
|
|
@@ -69,10 +105,15 @@ function createBottomEdgeStore() {
|
|
|
69
105
|
listeners.delete(onChange);
|
|
70
106
|
};
|
|
71
107
|
},
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
claims.
|
|
108
|
+
getReserved: () => reserved,
|
|
109
|
+
getCollapsed: () => collapsed,
|
|
110
|
+
claim(id, nextReserved, nextCollapsed) {
|
|
111
|
+
const existing = claims.get(id);
|
|
112
|
+
if (existing?.reserved === nextReserved && existing.collapsed === nextCollapsed) return;
|
|
113
|
+
claims.set(id, {
|
|
114
|
+
reserved: nextReserved,
|
|
115
|
+
collapsed: nextCollapsed
|
|
116
|
+
});
|
|
76
117
|
recompute();
|
|
77
118
|
},
|
|
78
119
|
release(id) {
|
|
@@ -104,15 +145,18 @@ BottomEdgeProvider.displayName = 'BottomEdgeProvider';
|
|
|
104
145
|
// would resubscribe `useSyncExternalStore` on every render.
|
|
105
146
|
const NO_SUBSCRIPTION = () => () => {};
|
|
106
147
|
const NO_INSET = () => 0;
|
|
148
|
+
const NO_COLLAPSE = () => false;
|
|
107
149
|
|
|
108
150
|
/**
|
|
109
|
-
* How much of the bottom edge is
|
|
151
|
+
* How much of the bottom edge is permanently RESERVED, in px.
|
|
110
152
|
*
|
|
111
|
-
*
|
|
153
|
+
* Never shrinks while its claimant is mounted, so it is the number for anything
|
|
154
|
+
* that must not move as the user scrolls — a list's bottom padding, a toast
|
|
155
|
+
* stack's offset:
|
|
112
156
|
*
|
|
113
157
|
* ```tsx
|
|
114
|
-
* const
|
|
115
|
-
* <
|
|
158
|
+
* const reserved = useBottomEdgeInset();
|
|
159
|
+
* <FlatList contentContainerStyle={{ paddingBottom: reserved + 12 }} />
|
|
116
160
|
* ```
|
|
117
161
|
*
|
|
118
162
|
* `0` outside a provider, and `0` on the first commit even inside one — a claim
|
|
@@ -122,27 +166,50 @@ const NO_INSET = () => 0;
|
|
|
122
166
|
*/
|
|
123
167
|
function useBottomEdgeInset() {
|
|
124
168
|
const store = (0, _react.useContext)(BottomEdgeContext);
|
|
125
|
-
return (0, _react.useSyncExternalStore)(store?.subscribe ?? NO_SUBSCRIPTION, store?.
|
|
169
|
+
return (0, _react.useSyncExternalStore)(store?.subscribe ?? NO_SUBSCRIPTION, store?.getReserved ?? NO_INSET, store?.getReserved ?? NO_INSET);
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
/**
|
|
173
|
+
* Whether the surface owning the bottom edge is currently COLLAPSED — the tab
|
|
174
|
+
* bar minimized on scroll.
|
|
175
|
+
*
|
|
176
|
+
* A boolean rather than a live height, on purpose: see the note at the top of
|
|
177
|
+
* this file. A reader should FADE or otherwise change state on it, never try to
|
|
178
|
+
* stay geometrically locked to the collapsing surface — that lock is what a
|
|
179
|
+
* React-state channel cannot deliver, because the surface animates on the UI
|
|
180
|
+
* thread and this arrives one to three frames later.
|
|
181
|
+
*
|
|
182
|
+
* ```tsx
|
|
183
|
+
* const collapsed = useBottomEdgeCollapsed();
|
|
184
|
+
* // fade out; do not chase the bar's new top edge
|
|
185
|
+
* ```
|
|
186
|
+
*
|
|
187
|
+
* `false` outside a provider.
|
|
188
|
+
*/
|
|
189
|
+
function useBottomEdgeCollapsed() {
|
|
190
|
+
const store = (0, _react.useContext)(BottomEdgeContext);
|
|
191
|
+
return (0, _react.useSyncExternalStore)(store?.subscribe ?? NO_SUBSCRIPTION, store?.getCollapsed ?? NO_COLLAPSE, store?.getCollapsed ?? NO_COLLAPSE);
|
|
126
192
|
}
|
|
127
193
|
|
|
128
194
|
/**
|
|
129
|
-
* Claim
|
|
195
|
+
* Claim the bottom edge for as long as the caller is mounted.
|
|
130
196
|
*
|
|
131
197
|
* The claimant owns its own placement — claiming does not move it. It declares
|
|
132
|
-
* the space it occupies so that everything reading
|
|
133
|
-
*
|
|
134
|
-
*
|
|
135
|
-
*
|
|
198
|
+
* the space it occupies so that everything reading the edge stays off it. Pass
|
|
199
|
+
* the FULL footprint (the surface's height plus the gap it holds off the window
|
|
200
|
+
* edge), which is the same number the surface positions itself with, and keep it
|
|
201
|
+
* at the surface's FULL size even while collapsed: `reserved` is what must stay
|
|
202
|
+
* permanently free, and the collapse is reported separately by `collapsed`.
|
|
136
203
|
*
|
|
137
204
|
* A no-op outside a provider, so a surface stays usable standalone.
|
|
138
205
|
*/
|
|
139
|
-
function useClaimBottomEdge(
|
|
206
|
+
function useClaimBottomEdge(reserved, collapsed = false) {
|
|
140
207
|
const store = (0, _react.useContext)(BottomEdgeContext);
|
|
141
208
|
const id = (0, _react.useId)();
|
|
142
209
|
(0, _react.useEffect)(() => {
|
|
143
210
|
if (!store) return;
|
|
144
|
-
store.claim(id,
|
|
211
|
+
store.claim(id, reserved, collapsed);
|
|
145
212
|
return () => store.release(id);
|
|
146
|
-
}, [store, id,
|
|
213
|
+
}, [store, id, reserved, collapsed]);
|
|
147
214
|
}
|
|
148
215
|
//# sourceMappingURL=bottom-edge.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","require","_jsxRuntime","createBottomEdgeStore","claims","Map","listeners","Set","
|
|
1
|
+
{"version":3,"names":["_react","require","_jsxRuntime","createBottomEdgeStore","claims","Map","listeners","Set","reserved","collapsed","recompute","nextReserved","nextCollapsed","claim","values","listener","subscribe","onChange","add","delete","getReserved","getCollapsed","id","existing","get","set","release","BottomEdgeContext","createContext","BottomEdgeProvider","children","store","useState","jsx","Provider","value","displayName","NO_SUBSCRIPTION","NO_INSET","NO_COLLAPSE","useBottomEdgeInset","useContext","useSyncExternalStore","useBottomEdgeCollapsed","useClaimBottomEdge","useId","useEffect"],"sourceRoot":"../../../src","sources":["layout/bottom-edge.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -15,6 +15,12 @@ Object.defineProperty(exports, "EDGE_GAP", {
|
|
|
15
15
|
return _edge.EDGE_GAP;
|
|
16
16
|
}
|
|
17
17
|
});
|
|
18
|
+
Object.defineProperty(exports, "useBottomEdgeCollapsed", {
|
|
19
|
+
enumerable: true,
|
|
20
|
+
get: function () {
|
|
21
|
+
return _bottomEdge.useBottomEdgeCollapsed;
|
|
22
|
+
}
|
|
23
|
+
});
|
|
18
24
|
Object.defineProperty(exports, "useBottomEdgeInset", {
|
|
19
25
|
enumerable: true,
|
|
20
26
|
get: function () {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_edge","require","_bottomEdge"],"sourceRoot":"../../../src","sources":["layout/index.ts"],"mappings":"
|
|
1
|
+
{"version":3,"names":["_edge","require","_bottomEdge"],"sourceRoot":"../../../src","sources":["layout/index.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA","ignoreList":[]}
|
|
@@ -311,13 +311,29 @@ function TabBarBody({
|
|
|
311
311
|
// its own layout can never drift from where the bar actually sits.
|
|
312
312
|
const bottomOffset = (0, _edge.windowEdgeGap)(insets.bottom);
|
|
313
313
|
|
|
314
|
+
// Whether the bar has settled into its minimized size, as REACT state.
|
|
315
|
+
//
|
|
316
|
+
// Reacting on `target` rather than on `progress` is what keeps this cheap:
|
|
317
|
+
// `target` is the binary 0/1 the minimize spring is heading for, so this fires
|
|
318
|
+
// twice per scroll gesture instead of once per frame. Crossing `progress > 0.5`
|
|
319
|
+
// would work too and would cost the same, but it would report the change
|
|
320
|
+
// halfway through the animation rather than when it was decided.
|
|
321
|
+
const [isMinimized, setIsMinimized] = (0, _react.useState)(false);
|
|
322
|
+
(0, _reactNativeReanimated.useAnimatedReaction)(() => minimized.target.value, (target, previous) => {
|
|
323
|
+
if (target !== previous) (0, _reactNativeReanimated.runOnJS)(setIsMinimized)(target === 1);
|
|
324
|
+
}, [minimized]);
|
|
325
|
+
|
|
314
326
|
// Publish what the bar occupies so anything else at this edge stacks above it
|
|
315
|
-
// rather than behind it. Same
|
|
316
|
-
// the same
|
|
317
|
-
// where the bar actually sits.
|
|
318
|
-
//
|
|
319
|
-
//
|
|
320
|
-
|
|
327
|
+
// rather than behind it. Same numbers `useTabBarFootprint` reports, derived
|
|
328
|
+
// from the same geometry, so a consumer reading either can never disagree with
|
|
329
|
+
// where the bar actually sits.
|
|
330
|
+
//
|
|
331
|
+
// RESERVED stays the EXPANDED height even while minimized: the bar re-expands
|
|
332
|
+
// the moment the user scrolls back up, so anything that permanently reserves
|
|
333
|
+
// space (a list's bottom padding, a toast) must keep room for the full pill or
|
|
334
|
+
// it would jitter on every scroll. The collapse travels as its own STATE — see
|
|
335
|
+
// `layout/bottom-edge` for why it is a boolean and not the live height.
|
|
336
|
+
(0, _bottomEdge.useClaimBottomEdge)(bottomOffset + _shared.EXPANDED_HEIGHT, isMinimized);
|
|
321
337
|
|
|
322
338
|
// How centring and the animated inset compose: centring is STATIC and belongs
|
|
323
339
|
// to the wrap, the inset stays ANIMATED on the pill inside it. The wrap is
|