@jsenv/navi 0.29.44 → 0.29.46
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/jsenv_navi.js +1070 -783
- package/dist/jsenv_navi.js.map +49 -33
- package/dist/jsenv_navi_side_effects.js +111 -3
- package/dist/jsenv_navi_side_effects.js.map +3 -3
- package/docs/AI_INSTRUCTIONS.md +12 -2
- package/docs/actions.md +22 -0
- package/docs/control_value.md +6 -0
- package/docs/create_and_edit.md +468 -0
- package/docs/css_architecture.md +66 -0
- package/docs/form_changed.md +52 -0
- package/docs/navigation.md +15 -0
- package/docs/scroll.md +14 -5
- package/docs/z_index.md +21 -8
- package/package.json +1 -1
package/docs/scroll.md
CHANGED
|
@@ -46,9 +46,17 @@ Two consequences worth knowing before fighting them:
|
|
|
46
46
|
- the body is `flex: 0 1 auto` — **it shrinks, it never grows**. A short body
|
|
47
47
|
leaves the footer right under it rather than pushed to the bottom of a box it
|
|
48
48
|
does not fill. Adding `expandY` to "fix" that is undoing a deliberate default.
|
|
49
|
-
- the separating line is a `
|
|
50
|
-
|
|
51
|
-
|
|
49
|
+
- the separating line is a `border-bottom` on the header (`border-top` on the
|
|
50
|
+
footer). Don't add a border of your own — you get two lines. It used to be a
|
|
51
|
+
`box-shadow`, which is drawn outside the box and so lost to whatever was
|
|
52
|
+
painted after it: the body covered the very line meant to separate them.
|
|
53
|
+
- header and footer sit in the sticky band
|
|
54
|
+
(`var(--navi-z-index-sticky)`), so everything the box contains passes under
|
|
55
|
+
them — positioned or not. Write `style={{ "--box-header-z-index": "auto" }}`
|
|
56
|
+
(`--box-footer-z-index` likewise) at the call site that needs the opposite: a
|
|
57
|
+
badge or a stamp overflowing a row is otherwise sliced by a header it never
|
|
58
|
+
scrolls under. `isolation: isolate` on the box keeps either value local to it.
|
|
59
|
+
See `docs/z_index.md` and `src/box/demos/9_scrollable_z_index_demo.html`.
|
|
52
60
|
|
|
53
61
|
Padding belongs on the parts, not on the scrolling box: padding on a scroller
|
|
54
62
|
sits inside the scrollbars, and a control flush against the edge of a scrolling
|
|
@@ -56,7 +64,8 @@ area raises a scrollbar of its own (a focus outline is drawn outside the control
|
|
|
56
64
|
it belongs to).
|
|
57
65
|
|
|
58
66
|
Reference: `src/box/box.jsx` (the `[data-scrollable]` CSS),
|
|
59
|
-
`src/box/demos/8_scrollable_demo.html
|
|
67
|
+
`src/box/demos/8_scrollable_demo.html`,
|
|
68
|
+
`src/box/demos/9_scrollable_z_index_demo.html` (sticky parts and stacking).
|
|
60
69
|
|
|
61
70
|
## 1. The document scrolls
|
|
62
71
|
|
|
@@ -183,7 +192,7 @@ everyone else does, by asking for the overflow — and it already asks, on itsel
|
|
|
183
192
|
So the parts are direct children of the `Dialog`:
|
|
184
193
|
|
|
185
194
|
```jsx
|
|
186
|
-
<Dialog id="…"
|
|
195
|
+
<Dialog id="…" dockedOnSmallTouchScreen scrollCapture>
|
|
187
196
|
<Box header>title + close</Box>
|
|
188
197
|
<Box body>
|
|
189
198
|
<List scroller="parent" /> {/* NOT "self" */}
|
package/docs/z_index.md
CHANGED
|
@@ -74,14 +74,14 @@ file is the overview, this table is its summary. Bands are a decade apart so
|
|
|
74
74
|
one can grow without reaching the next, and so a value seen in devtools says
|
|
75
75
|
which band it came from.
|
|
76
76
|
|
|
77
|
-
| Band
|
|
78
|
-
|
|
|
79
|
-
| Top layer (`Dialog`/`Popover` with `layer="top"`)
|
|
80
|
-
| `Dialog`/`Popover` with `layer="local"`, their backdrop, callouts
|
|
81
|
-
| `FixedBar`
|
|
82
|
-
| Sticky while something scrolls under: `List` header/footer/group labels, `SidePanel` head/foot | `--navi-z-index-sticky` | 10 |
|
|
83
|
-
| A `Group` member under the pointer, then the one holding focus
|
|
84
|
-
| `Table` sticky cells, drag, resize
|
|
77
|
+
| Band | Token | Value |
|
|
78
|
+
| ------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------ | ---------------------------- |
|
|
79
|
+
| Top layer (`Dialog`/`Popover` with `layer="top"`) | — | above everything |
|
|
80
|
+
| `Dialog`/`Popover` with `layer="local"`, their backdrop, callouts | `--navi-z-index-popup`, `--navi-z-index-callout` | 1000 `+ stack order` |
|
|
81
|
+
| `FixedBar` | `--navi-z-index-bar` | 100 |
|
|
82
|
+
| Sticky while something scrolls under: `List` header/footer/group labels, `SidePanel` head/foot, `Box` header/footer | `--navi-z-index-sticky` | 10 |
|
|
83
|
+
| A `Group` member under the pointer, then the one holding focus | `--navi-z-index-control-hovered`, `--navi-z-index-control-focused` | 1, 2 |
|
|
84
|
+
| `Table` sticky cells, drag, resize | `src/control/table/z_indexes.js` | 1–7, derived from each other |
|
|
85
85
|
|
|
86
86
|
What to read from it:
|
|
87
87
|
|
|
@@ -138,6 +138,19 @@ the label behind the rows, it puts it behind that background and out of sight.
|
|
|
138
138
|
See the "Sticky parts" chapter of
|
|
139
139
|
[12_list_demo.html](../src/control/demos/12_list_demo.html).
|
|
140
140
|
|
|
141
|
+
`Box`'s own `header`/`footer` take the opposite default, and for a reason worth
|
|
142
|
+
knowing: they are in the band **always**, not only while stuck. `List` can tell
|
|
143
|
+
— it measures its parts against its own scroller. A `Box` cannot: it is the
|
|
144
|
+
generic scrolling area, its content is whatever the app puts in it, and a
|
|
145
|
+
sticky part that drops to `auto` loses to anything that content positioned, a
|
|
146
|
+
`transform` or an `opacity` below 1 included. So the band is the default,
|
|
147
|
+
`isolation: isolate` on the scrolling box keeps it local, and
|
|
148
|
+
`--box-header-z-index` / `--box-footer-z-index` write it back to `auto` at the
|
|
149
|
+
one call site that knows nothing inside is positioned.
|
|
150
|
+
[9_scrollable_z_index_demo.html](../src/box/demos/9_scrollable_z_index_demo.html)
|
|
151
|
+
shows the band, what `auto` would look like, and what the band costs, side by
|
|
152
|
+
side.
|
|
153
|
+
|
|
141
154
|
### Why a `Group` member is not isolated
|
|
142
155
|
|
|
143
156
|
`Group` overlaps its members by one border width, so the one the user is on has
|