@oxyhq/bloom 1.10.1 → 1.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/docs/layout.mdx +33 -1
- package/lib/commonjs/fab/Fab.js +42 -0
- package/lib/commonjs/fab/Fab.js.map +1 -1
- package/lib/commonjs/fab/Fab.web.js +18 -3
- package/lib/commonjs/fab/Fab.web.js.map +1 -1
- package/lib/commonjs/layout/bottom-edge.js +72 -24
- 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 +44 -2
- package/lib/module/fab/Fab.js.map +1 -1
- package/lib/module/fab/Fab.web.js +19 -4
- package/lib/module/fab/Fab.web.js.map +1 -1
- package/lib/module/layout/bottom-edge.js +71 -24
- 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 +44 -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 +44 -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 +41 -3
- package/src/fab/Fab.web.tsx +19 -4
- package/src/layout/bottom-edge.tsx +88 -31
- package/src/layout/index.ts +6 -1
- package/src/tab-bar/TabBarBase.tsx +31 -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,6 +56,31 @@ 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
|
+
### Two channels, because there are two questions
|
|
60
|
+
|
|
61
|
+
A surface that **collapses** — the tab bar minimizes 58 → 44 on scroll —
|
|
62
|
+
occupies less than it reserves, and readers want different halves of that.
|
|
63
|
+
|
|
64
|
+
| hook | answers | who reads it |
|
|
65
|
+
| --- | --- | --- |
|
|
66
|
+
| `useBottomEdgeInset()` | what is permanently **reserved** | a list's `paddingBottom`, a toast stack |
|
|
67
|
+
| `useBottomEdgeLiveInset()` | what is occupied **right now** | a FAB, anything sitting *on* the edge |
|
|
68
|
+
|
|
69
|
+
```tsx
|
|
70
|
+
// A claimant that collapses reports both. `current` defaults to `reserved`.
|
|
71
|
+
useClaimBottomEdge(gap + EXPANDED_HEIGHT, gap + (minimized ? MINIMIZED_HEIGHT : EXPANDED_HEIGHT));
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
Reserved never shrinks while its claimant is mounted, because the bar re-expands
|
|
75
|
+
the instant the user scrolls back up: tracking the collapse there would jitter a
|
|
76
|
+
list's content size on every scroll and jump a toast 14px mid-display. Live
|
|
77
|
+
follows it, so a FAB rides down with the bar instead of leaving a hole.
|
|
78
|
+
|
|
79
|
+
Live changes when the collapse **state** changes, not per frame. The claimant
|
|
80
|
+
reports its settled footprint and the reader animates the difference itself —
|
|
81
|
+
which keeps the motion on whatever animation system that reader already uses,
|
|
82
|
+
rather than forcing a shared one through React state.
|
|
83
|
+
|
|
59
84
|
`BloomProvider` mounts the registry. Outside one, `useBottomEdgeInset()` returns
|
|
60
85
|
`0` and `useClaimBottomEdge` is a no-op, so a surface stays usable standalone.
|
|
61
86
|
|
|
@@ -77,3 +102,10 @@ hiding would float it off the bottom of the screen for nothing.
|
|
|
77
102
|
so a reader mounted in the same commit as its claimant reads `0` on the first
|
|
78
103
|
commit. These are layout offsets rather than measurements, so nothing here waits
|
|
79
104
|
on a real layout pass.
|
|
105
|
+
|
|
106
|
+
**Animate the difference, not the live inset.** `reserved - live` is `0` both
|
|
107
|
+
before the registry settles and once it has, so a reader that animates the
|
|
108
|
+
DIFFERENCE stays still through mount and moves only on a real collapse. Animating
|
|
109
|
+
the live inset directly would slide the surface in from the window edge on its
|
|
110
|
+
first frame. Bloom's `Fab` does the former — a native-driver `translateY` on
|
|
111
|
+
native, a `bottom` transition on web.
|
package/lib/commonjs/fab/Fab.js
CHANGED
|
@@ -55,6 +55,20 @@ function resolveSize(size) {
|
|
|
55
55
|
}
|
|
56
56
|
return SIZE_CONFIG[size];
|
|
57
57
|
}
|
|
58
|
+
|
|
59
|
+
/**
|
|
60
|
+
* Matches the tab bar's own `MINIMIZE_SPRING` (380ms, critically damped) closely
|
|
61
|
+
* enough that the two read as one movement. It cannot be that exact config: the
|
|
62
|
+
* bar animates with reanimated, which takes duration/dampingRatio, while this is
|
|
63
|
+
* RN's Animated, which takes stiffness/damping/mass. `usePressAnimation` — and
|
|
64
|
+
* therefore Button, Chip, Tabs, Checkbox, Radio and FrostedIconButton — is built
|
|
65
|
+
* on RN's Animated too, so the FAB cannot switch systems on its own.
|
|
66
|
+
*/
|
|
67
|
+
const COLLAPSE_SPRING = {
|
|
68
|
+
stiffness: 120,
|
|
69
|
+
damping: 22,
|
|
70
|
+
mass: 1
|
|
71
|
+
};
|
|
58
72
|
const DEFAULT_OFFSET = 16;
|
|
59
73
|
const DEFAULT_Z_INDEX = 50;
|
|
60
74
|
const HIT_SLOP = {
|
|
@@ -76,6 +90,10 @@ const HIT_SLOP = {
|
|
|
76
90
|
* lands above a floating tab bar instead of behind it. A z-index cannot fix that
|
|
77
91
|
* pairing: the bar's host is the last sibling of the app shell and paints over
|
|
78
92
|
* every descendant, so the FAB has to be somewhere else, not merely on top.
|
|
93
|
+
*
|
|
94
|
+
* It is the RESERVED inset, so this stays a static layout value. Following a
|
|
95
|
+
* collapsing bar is a TRANSFORM (see `collapseAnim`), which costs no layout pass
|
|
96
|
+
* and can run on the native driver while the user is mid-scroll.
|
|
79
97
|
*/
|
|
80
98
|
function placementStyle(placement, offset, bottomEdgeInset) {
|
|
81
99
|
if (placement === 'static') return {};
|
|
@@ -142,10 +160,32 @@ const FabComponent = ({
|
|
|
142
160
|
zIndex = DEFAULT_Z_INDEX
|
|
143
161
|
}) => {
|
|
144
162
|
const bottomEdgeInset = (0, _bottomEdge.useBottomEdgeInset)();
|
|
163
|
+
const bottomEdgeLive = (0, _bottomEdge.useBottomEdgeLiveInset)();
|
|
145
164
|
const theme = (0, _useTheme.useTheme)();
|
|
146
165
|
const sizeConfig = (0, _react.useMemo)(() => resolveSize(size), [size]);
|
|
147
166
|
const isExtended = label != null && label.length > 0;
|
|
148
167
|
const content = icon ?? children;
|
|
168
|
+
|
|
169
|
+
// How far the edge's surface has collapsed below what it reserves: 0 while the
|
|
170
|
+
// tab bar is expanded, 14 while it is minimized. Deliberately the DIFFERENCE
|
|
171
|
+
// rather than the live inset itself — both are 0 before the registry settles
|
|
172
|
+
// and both are equal once it has, so this stays 0 across mount and the FAB
|
|
173
|
+
// never slides in from the window edge on its first frame. Only a real
|
|
174
|
+
// collapse moves it.
|
|
175
|
+
const collapse = placement === 'bottom-right' || placement === 'bottom-left' ? bottomEdgeInset - bottomEdgeLive : 0;
|
|
176
|
+
const collapseAnim = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
|
|
177
|
+
|
|
178
|
+
// An effect because RN's Animated has no declarative form — starting an
|
|
179
|
+
// animation is imperative by construction. `useNativeDriver` is what makes this
|
|
180
|
+
// safe to run during a scroll: the whole point of moving the follow onto a
|
|
181
|
+
// transform is that it never touches the JS thread once started.
|
|
182
|
+
(0, _react.useEffect)(() => {
|
|
183
|
+
_reactNative.Animated.spring(collapseAnim, {
|
|
184
|
+
toValue: collapse,
|
|
185
|
+
useNativeDriver: true,
|
|
186
|
+
...COLLAPSE_SPRING
|
|
187
|
+
}).start();
|
|
188
|
+
}, [collapse, collapseAnim]);
|
|
149
189
|
const {
|
|
150
190
|
scaleAnim,
|
|
151
191
|
onPressIn,
|
|
@@ -214,6 +254,8 @@ const FabComponent = ({
|
|
|
214
254
|
// wrapper node the two multiplied.
|
|
215
255
|
{
|
|
216
256
|
transform: [{
|
|
257
|
+
translateY: collapseAnim
|
|
258
|
+
}, {
|
|
217
259
|
scale: scaleAnim
|
|
218
260
|
}]
|
|
219
261
|
}, style],
|
|
@@ -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_SPRING","stiffness","damping","mass","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","bottomEdgeLive","useBottomEdgeLiveInset","theme","useTheme","sizeConfig","useMemo","isExtended","length","content","collapse","collapseAnim","useRef","Value","current","useEffect","spring","toValue","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","translateY","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":"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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
|
+
// `bottom` is the collapse follow (see `placementStyle`) and is deliberately
|
|
85
|
+
// the slow one: it tracks the tab bar's 380ms minimize spring, while every
|
|
86
|
+
// other property here is interaction feedback and wants to feel instant.
|
|
87
|
+
transition: 'opacity 120ms ease, transform 120ms ease, box-shadow 160ms ease, background-color 120ms ease, bottom 380ms 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 {};
|
|
@@ -205,7 +218,9 @@ const FabWebComponent = ({
|
|
|
205
218
|
type = 'button'
|
|
206
219
|
}) => {
|
|
207
220
|
(0, _interactiveWebCss.useInteractiveWebCss)(STYLE_ID, BLOOM_FAB_CSS);
|
|
208
|
-
|
|
221
|
+
// LIVE, not reserved: the FAB sits ON the edge, so it rides down with a
|
|
222
|
+
// minimizing tab bar rather than leaving a 14px hole above it.
|
|
223
|
+
const bottomEdgeLive = (0, _bottomEdge.useBottomEdgeLiveInset)();
|
|
209
224
|
const theme = (0, _useTheme.useTheme)();
|
|
210
225
|
const reactId = (0, _react.useId)();
|
|
211
226
|
const resolvedId = id ?? `bloom-fab-${reactId}`;
|
|
@@ -234,7 +249,7 @@ const FabWebComponent = ({
|
|
|
234
249
|
// fill, so the two forks land on the identical colour.
|
|
235
250
|
['--bloom-fab-press-bg']: (0, _pressColors.pressedSurface)(theme.colors, variantColors.background, variantColors.foreground),
|
|
236
251
|
['--bloom-fab-press-scale']: _tokens.animation.pressScale,
|
|
237
|
-
...placementStyle(placement, offset,
|
|
252
|
+
...placementStyle(placement, offset, bottomEdgeLive)
|
|
238
253
|
};
|
|
239
254
|
if (isExtended) {
|
|
240
255
|
const pad = sizeConfig.diameter <= 44 ? 14 : 20;
|
|
@@ -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","
|
|
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","bottomEdgeLive","useBottomEdgeLiveInset","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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","ignoreList":[]}
|
|
@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.BottomEdgeProvider = BottomEdgeProvider;
|
|
7
7
|
exports.useBottomEdgeInset = useBottomEdgeInset;
|
|
8
|
+
exports.useBottomEdgeLiveInset = useBottomEdgeLiveInset;
|
|
8
9
|
exports.useClaimBottomEdge = useClaimBottomEdge;
|
|
9
10
|
var _react = require("react");
|
|
10
11
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
@@ -37,6 +38,21 @@ 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
|
+
* ## Two numbers, because there are two questions
|
|
42
|
+
*
|
|
43
|
+
* A surface that collapses — the tab bar minimizes 58 -> 44 on scroll — occupies
|
|
44
|
+
* less than it reserves. Readers want different halves of that:
|
|
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. Tracking the collapse here would jitter a
|
|
49
|
+
* list's content size on every scroll and jump a toast 14px mid-display.
|
|
50
|
+
* - LIVE (`useBottomEdgeLiveInset`) follows the collapse. It is what a surface
|
|
51
|
+
* SITTING ON the edge wants, so it rides down with the bar instead of
|
|
52
|
+
* leaving a hole.
|
|
53
|
+
*
|
|
54
|
+
* A claimant that never collapses passes one number and both answers agree.
|
|
55
|
+
*
|
|
40
56
|
* ## Why an external store
|
|
41
57
|
*
|
|
42
58
|
* The claim set is mutable state living outside React. Reading it in a memoized
|
|
@@ -49,17 +65,21 @@ var _jsxRuntime = require("react/jsx-runtime");
|
|
|
49
65
|
function createBottomEdgeStore() {
|
|
50
66
|
const claims = new Map();
|
|
51
67
|
const listeners = new Set();
|
|
52
|
-
let
|
|
68
|
+
let reserved = 0;
|
|
69
|
+
let live = 0;
|
|
53
70
|
const recompute = () => {
|
|
54
|
-
let
|
|
55
|
-
|
|
56
|
-
|
|
71
|
+
let nextReserved = 0;
|
|
72
|
+
let nextLive = 0;
|
|
73
|
+
for (const claim of claims.values()) {
|
|
74
|
+
if (claim.reserved > nextReserved) nextReserved = claim.reserved;
|
|
75
|
+
if (claim.current > nextLive) nextLive = claim.current;
|
|
57
76
|
}
|
|
58
|
-
// Bail before notifying: a re-registration at
|
|
77
|
+
// Bail before notifying: a re-registration at unchanged heights (every
|
|
59
78
|
// render of a claimant whose footprint did not move) must not re-render
|
|
60
79
|
// every reader.
|
|
61
|
-
if (
|
|
62
|
-
|
|
80
|
+
if (nextReserved === reserved && nextLive === live) return;
|
|
81
|
+
reserved = nextReserved;
|
|
82
|
+
live = nextLive;
|
|
63
83
|
for (const listener of listeners) listener();
|
|
64
84
|
};
|
|
65
85
|
return {
|
|
@@ -69,10 +89,15 @@ function createBottomEdgeStore() {
|
|
|
69
89
|
listeners.delete(onChange);
|
|
70
90
|
};
|
|
71
91
|
},
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
claims.
|
|
92
|
+
getReserved: () => reserved,
|
|
93
|
+
getLive: () => live,
|
|
94
|
+
claim(id, nextReserved, nextCurrent) {
|
|
95
|
+
const existing = claims.get(id);
|
|
96
|
+
if (existing?.reserved === nextReserved && existing.current === nextCurrent) return;
|
|
97
|
+
claims.set(id, {
|
|
98
|
+
reserved: nextReserved,
|
|
99
|
+
current: nextCurrent
|
|
100
|
+
});
|
|
76
101
|
recompute();
|
|
77
102
|
},
|
|
78
103
|
release(id) {
|
|
@@ -106,13 +131,15 @@ const NO_SUBSCRIPTION = () => () => {};
|
|
|
106
131
|
const NO_INSET = () => 0;
|
|
107
132
|
|
|
108
133
|
/**
|
|
109
|
-
* How much of the bottom edge is
|
|
134
|
+
* How much of the bottom edge is permanently RESERVED, in px.
|
|
110
135
|
*
|
|
111
|
-
*
|
|
136
|
+
* Never shrinks while its claimant is mounted, so it is the number for anything
|
|
137
|
+
* that must not move as the user scrolls — a list's bottom padding, a toast
|
|
138
|
+
* stack's offset:
|
|
112
139
|
*
|
|
113
140
|
* ```tsx
|
|
114
|
-
* const
|
|
115
|
-
* <
|
|
141
|
+
* const reserved = useBottomEdgeInset();
|
|
142
|
+
* <FlatList contentContainerStyle={{ paddingBottom: reserved + 12 }} />
|
|
116
143
|
* ```
|
|
117
144
|
*
|
|
118
145
|
* `0` outside a provider, and `0` on the first commit even inside one — a claim
|
|
@@ -122,27 +149,48 @@ const NO_INSET = () => 0;
|
|
|
122
149
|
*/
|
|
123
150
|
function useBottomEdgeInset() {
|
|
124
151
|
const store = (0, _react.useContext)(BottomEdgeContext);
|
|
125
|
-
return (0, _react.useSyncExternalStore)(store?.subscribe ?? NO_SUBSCRIPTION, store?.
|
|
152
|
+
return (0, _react.useSyncExternalStore)(store?.subscribe ?? NO_SUBSCRIPTION, store?.getReserved ?? NO_INSET, store?.getReserved ?? NO_INSET);
|
|
126
153
|
}
|
|
127
154
|
|
|
128
155
|
/**
|
|
129
|
-
*
|
|
156
|
+
* How much of the bottom edge is occupied RIGHT NOW, in px — the same number as
|
|
157
|
+
* {@link useBottomEdgeInset} for a surface that does not collapse, and smaller
|
|
158
|
+
* while one does.
|
|
159
|
+
*
|
|
160
|
+
* This is what a surface sitting ON the edge wants, so it rides down with a
|
|
161
|
+
* minimizing tab bar rather than leaving a hole above it. It changes when the
|
|
162
|
+
* collapse STATE changes, not per frame: a claimant reports its settled
|
|
163
|
+
* footprint and the reader animates the difference itself, which keeps the
|
|
164
|
+
* motion on whatever animation system that reader already uses instead of
|
|
165
|
+
* forcing a shared one through React state.
|
|
166
|
+
*/
|
|
167
|
+
function useBottomEdgeLiveInset() {
|
|
168
|
+
const store = (0, _react.useContext)(BottomEdgeContext);
|
|
169
|
+
return (0, _react.useSyncExternalStore)(store?.subscribe ?? NO_SUBSCRIPTION, store?.getLive ?? NO_INSET, store?.getLive ?? NO_INSET);
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
/**
|
|
173
|
+
* Claim the bottom edge for as long as the caller is mounted.
|
|
130
174
|
*
|
|
131
175
|
* 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
|
-
*
|
|
176
|
+
* the space it occupies so that everything reading the edge stays off it. Pass
|
|
177
|
+
* the FULL footprint (the surface's height plus the gap it holds off the window
|
|
178
|
+
* edge), which is the same number the surface positions itself with.
|
|
179
|
+
*
|
|
180
|
+
* `current` is what the surface occupies right now; it defaults to `reserved`,
|
|
181
|
+
* which is correct for anything that does not collapse. A surface that shrinks
|
|
182
|
+
* on scroll passes its live footprint as `current` and keeps `reserved` at its
|
|
183
|
+
* full size — see the two channels above for why both are needed.
|
|
136
184
|
*
|
|
137
185
|
* A no-op outside a provider, so a surface stays usable standalone.
|
|
138
186
|
*/
|
|
139
|
-
function useClaimBottomEdge(
|
|
187
|
+
function useClaimBottomEdge(reserved, current = reserved) {
|
|
140
188
|
const store = (0, _react.useContext)(BottomEdgeContext);
|
|
141
189
|
const id = (0, _react.useId)();
|
|
142
190
|
(0, _react.useEffect)(() => {
|
|
143
191
|
if (!store) return;
|
|
144
|
-
store.claim(id,
|
|
192
|
+
store.claim(id, reserved, current);
|
|
145
193
|
return () => store.release(id);
|
|
146
|
-
}, [store, id,
|
|
194
|
+
}, [store, id, reserved, current]);
|
|
147
195
|
}
|
|
148
196
|
//# 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","live","recompute","nextReserved","nextLive","claim","values","current","listener","subscribe","onChange","add","delete","getReserved","getLive","id","nextCurrent","existing","get","set","release","BottomEdgeContext","createContext","BottomEdgeProvider","children","store","useState","jsx","Provider","value","displayName","NO_SUBSCRIPTION","NO_INSET","useBottomEdgeInset","useContext","useSyncExternalStore","useBottomEdgeLiveInset","useClaimBottomEdge","useId","useEffect"],"sourceRoot":"../../../src","sources":["layout/bottom-edge.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -21,6 +21,12 @@ Object.defineProperty(exports, "useBottomEdgeInset", {
|
|
|
21
21
|
return _bottomEdge.useBottomEdgeInset;
|
|
22
22
|
}
|
|
23
23
|
});
|
|
24
|
+
Object.defineProperty(exports, "useBottomEdgeLiveInset", {
|
|
25
|
+
enumerable: true,
|
|
26
|
+
get: function () {
|
|
27
|
+
return _bottomEdge.useBottomEdgeLiveInset;
|
|
28
|
+
}
|
|
29
|
+
});
|
|
24
30
|
Object.defineProperty(exports, "useClaimBottomEdge", {
|
|
25
31
|
enumerable: true,
|
|
26
32
|
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: the bar re-expands the moment the user
|
|
332
|
+
// scrolls back up, so anything that permanently reserves space (a list's
|
|
333
|
+
// bottom padding, a toast) must keep room for the full pill or it would jitter
|
|
334
|
+
// on every scroll. LIVE follows the minimize, so a surface sitting ON the edge
|
|
335
|
+
// rides down with the bar instead of leaving a 14px hole above it.
|
|
336
|
+
(0, _bottomEdge.useClaimBottomEdge)(bottomOffset + _shared.EXPANDED_HEIGHT, bottomOffset + (isMinimized ? _shared.MINIMIZED_HEIGHT : _shared.EXPANDED_HEIGHT));
|
|
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
|