@jsenv/navi 0.29.228 → 0.29.229
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/dist/dev/jsenv_navi.js +61 -58
- package/dist/dev/jsenv_navi.js.map +2 -2
- package/dist/jsenv_navi.js +61 -58
- package/dist/jsenv_navi.js.map +2 -2
- package/docs/AI_INSTRUCTIONS.md +3 -2
- package/docs/scroll.md +25 -0
- package/package.json +1 -1
package/docs/AI_INSTRUCTIONS.md
CHANGED
|
@@ -198,8 +198,9 @@ to start when unsure which export solves a problem.
|
|
|
198
198
|
(`--navi-app-max-width`), `data-navi-safe-area`, which viewport is which under
|
|
199
199
|
a virtual keyboard. Read before hand-writing an offset to clear a `FixedBar`.
|
|
200
200
|
- `scroll.md` — where scrolling happens: `header`/`body`/`footer`, `List`'s
|
|
201
|
-
`scroller`, a
|
|
202
|
-
CSS to make something
|
|
201
|
+
`scroller`, where a list opens and what a search does to where it is, a popup
|
|
202
|
+
that scrolls, hover while scrolling. Read before writing CSS to make something
|
|
203
|
+
scroll.
|
|
203
204
|
- `mobile_layout_pitfalls.md` — a horizontal overflow inflates the layout
|
|
204
205
|
viewport on Chrome Android and miscenters every dialog; `overflow-x: clip`.
|
|
205
206
|
- `z_index.md` — DOM order first; a `z-index` without `isolation: isolate`
|
package/docs/scroll.md
CHANGED
|
@@ -150,6 +150,31 @@ picked up then. When it is still not the box you mean, say so explicitly with
|
|
|
150
150
|
changes, even after the user scrolled.
|
|
151
151
|
- **`onScrolledChange`** gives `{id, index, offset}` as the user scrolls.
|
|
152
152
|
|
|
153
|
+
### A search moves the list, and gives it back
|
|
154
|
+
|
|
155
|
+
A list that is being searched has to move: the rows the user is after have just
|
|
156
|
+
been promoted to the top, and a view left where it was shows none of them. What
|
|
157
|
+
makes that possible is `searchText` on the `List` — without it the list sees new
|
|
158
|
+
children and nothing else.
|
|
159
|
+
|
|
160
|
+
- **While the search is on**, the list scrolls back to its first row every time
|
|
161
|
+
the best matches change. "Best matches" is the top `renderBudget` rows, taken
|
|
162
|
+
by id and by `matchInfo.matchScore`, so a letter that promotes nobody new
|
|
163
|
+
leaves the list where the user put it.
|
|
164
|
+
- **When the search is emptied**, the list returns to the offset it was at when
|
|
165
|
+
the search started, render window included. It goes back by offset, not by
|
|
166
|
+
row: the collection is the one from before again, in the order it was in.
|
|
167
|
+
|
|
168
|
+
Both rest on each row knowing where it stands, which for rows declared one by
|
|
169
|
+
one is the order they are written in — `useSearchText` hands the collection back
|
|
170
|
+
reordered, the caller renders it in that order, and the places follow. Give every
|
|
171
|
+
row a stable `key`: the places are read off the children as they are declared,
|
|
172
|
+
and the key is what says a row moved rather than a row changed.
|
|
173
|
+
|
|
174
|
+
One case is knowingly left out: a row selected during the search does not hold
|
|
175
|
+
the view. Emptying the search takes the list back to where it was, which may be
|
|
176
|
+
nowhere near the row just chosen.
|
|
177
|
+
|
|
153
178
|
### Sticky rows inside the list
|
|
154
179
|
|
|
155
180
|
`<List.Item header>` / `<List.Item footer>` are sticky rows inside the list.
|