@jsenv/navi 0.29.81 → 0.29.83

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/autofocus.md CHANGED
@@ -9,6 +9,7 @@ decision.
9
9
  - [A popup that is read before it is filled](#a-popup-that-is-read-before-it-is-filled)
10
10
  - [The most precise wins](#the-most-precise-wins)
11
11
  - [On a touch device: the surface is what one arrives on](#on-a-touch-device-the-surface-is-what-one-arrives-on)
12
+ - [Opting a field back in](#opting-a-field-back-in)
12
13
  - [What a field says about itself](#what-a-field-says-about-itself)
13
14
  - [When the opening places nothing](#when-the-opening-places-nothing)
14
15
 
@@ -100,14 +101,33 @@ the terms checkbox, the submit button. Landing there scrolls the popup to it and
100
101
  the title is above the top edge again, keyboard or no keyboard. The cause
101
102
  changes, the user sees the same thing.
102
103
 
103
- Nothing to pass, and nothing to remember per call site. Whatever really is what
104
- the user came for still says so with its own `autoFocus`, which is where that
105
- decision belongs.
104
+ Nothing to pass, and nothing to remember per call site.
105
+
106
+ ### Opting a field back in
107
+
108
+ Some popups really are opened to type in: one comment box, one rename field.
109
+ There, the field says so itself, and that beats the device — step 2 of the
110
+ ladder comes before step 3 was ever skipped.
111
+
112
+ ```jsx
113
+ <Dialog>
114
+ <Heading>Leave a comment</Heading>
115
+ <Textarea name="comment" autoFocus />
116
+ </Dialog>
117
+ ```
118
+
119
+ Worth saying out loud before writing it: a popup holding one field is not
120
+ necessarily a popup opened to fill it — it is often opened to READ what the
121
+ field holds, and raising the keyboard over it then costs the reading for nothing.
122
+ The default answers that case; `autoFocus` on the field answers the other, and
123
+ saying which is which is the caller's to make because nothing about the markup
124
+ can tell them apart.
106
125
 
107
126
  ## What a field says about itself
108
127
 
109
- - `autoFocus` — "I am what the user came for". A picker's search box on a
110
- desktop, the one field of a one-field popup.
128
+ - `autoFocus` — "I am what the user came for". A picker's search box, the field
129
+ of a popup opened to type in it. It holds on a touch device too: it is how a
130
+ field opts back into a keyboard the surface would otherwise keep down.
111
131
  - `autoFocus="restore"` — "never on a fresh open, but bring me back". A field
112
132
  the user was typing in when a popup over it closed: reopening returns to it,
113
133
  opening for the first time does not raise a keyboard on it.
@@ -243,6 +243,27 @@ gives it a `view-transition-name` of its own: the browser then moves it on the
243
243
  same clock as any transition playing — including a `RouteTravel` swipe, with no
244
244
  wiring between the two.
245
245
 
246
+ A row of tabs is a lateral move: the neighbour is one finger away, and going
247
+ there is not going one step deeper. `replace` says exactly that — the
248
+ destination takes the place of the current history entry instead of stacking
249
+ onto it, so the whole row weighs one entry and the back button (the arrow at the
250
+ top, the phone's own) leaves by where the reader came in:
251
+
252
+ ```jsx
253
+ <Link route={CANDIDATE_GAMES_ROUTE} variant="tab" replace>
254
+ Candidatures
255
+ </Link>
256
+ ```
257
+
258
+ The link stays a link — an address, a middle click, the keyboard, `aria-current`
259
+ — only the way there changes. It is the same word as `navTo(url, { replace:
260
+ true })` and `route.redirectTo()`.
261
+
262
+ A replaced entry inherits the state of the one it takes the place of (so does
263
+ `route.redirectTo()`): **an entry's state does not say how it arrived**. An app
264
+ keeping its own count of how deep it stands cannot read it back from
265
+ `history.state` — it has to write it down as it navigates.
266
+
246
267
  ## Tabs that travel: `RouteTravel`
247
268
 
248
269
  `<RouteTravel>` wraps the `<Route>` tree of a row of tabs and makes every change
@@ -276,9 +297,10 @@ place, not a step along the row, and it plays no movement. `axis="y"` lays the
276
297
  pages out as a column instead: forward is then the page rising and the next one
277
298
  coming up from below.
278
299
 
279
- A swipe **replaces** the current history entry (a gesture browses; a tab pressed
280
- aims at a place and pushes, which its `<Link>` already does). `onTravel` decides
281
- otherwise.
300
+ A swipe **replaces** the current history entry, and a tab pressed says the same
301
+ thing when its link asks for it (`<Link replace>`, see above) the two gestures
302
+ towards the same neighbour must not write two different histories. `onTravel`
303
+ decides otherwise.
282
304
 
283
305
  Several `RouteTravel` boxes may live on one page — a section of the path and a
284
306
  search param of the root route are two rows of tabs, both live — and only the one
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jsenv/navi",
3
- "version": "0.29.81",
3
+ "version": "0.29.83",
4
4
  "type": "module",
5
5
  "description": "Library of components including navigation to create frontend applications",
6
6
  "repository": {