@mittwald/flow-react-components 1.2.0-next.3 → 1.2.0-next.31

package/AGENTS.md

@@ -229,6 +229,17 @@ if ("action" in props) {
   Group repeated variants in local mixins.
 - Structure sections with comments: `/* Elements */`, `/* States */`,
   `/* Size */`, `/* Variants */`.
+- **A `z-index` is scoped by the nearest ancestor stacking context** — mark that
+  element `isolation: isolate` explicitly. `position: relative`, a scroll
+  container (`overflow: auto`) and a flex/grid parent are **not** stacking
+  contexts, so without it the value competes with the whole page instead of the
+  siblings it was written for. A `transform` animation in between is one only
+  _while it runs_, so the scope otherwise changes with the animation state.
+  Isolating does not reorder anything inside the component: among positioned
+  siblings, `z-index: auto` and a `0`-equivalent stacking context paint in the
+  same step, in tree order. The exception is an element portalled into
+  `document.body` (`NotificationContainer`) — that one sits in the root stacking
+  context by construction and cannot be scoped; say so in a comment.
 - **Overriding a dependency that injects its own stylesheet** (CodeMirror,
   react-easy-crop, FontAwesome) needs `@layer flow.unlayered { … }`: their
   `<style>` elements are unlayered, and unlayered CSS beats layered CSS
@@ -342,6 +353,19 @@ Easy-to-miss conventions not spelled out above. Full details and examples in
   must affect layout.
 - **Controllers coexist with declarative props** — overlay-like APIs support
   controlled/uncontrolled props _and_ a controller object, not one or the other.
+- **A component without `value` and without `defaultValue` still has to render
+  as controlled** — react-aria's `useControlledState` reads only `undefined` as
+  uncontrolled. A component that mirrors the value in its own state therefore
+  hands react-aria `undefined` on the first render and a real value after the
+  first change: the value changes owner mid-flight, and React and react-aria
+  warn `A component changed from uncontrolled to controlled`. Pass a sentinel
+  instead of `undefined` — `null` where "nothing selected yet" is representable
+  (`Tabs`' `selectedKey`), otherwise the type's empty value (`""` for text,
+  `NaN` for a number, `null` for a date range — `useControlledHostValueProps`'
+  `emptyValue`). Mind `??` once the sentinel is `null`: a caller-supplied `null`
+  must not fall through to `defaultValue`. Nothing breaks visibly, and a
+  component holding its own document state (`CodeEditor`) does not even warn —
+  it changes owner silently.
 - **Complex behavior is split by vocabulary** — `components/` for render,
   `hooks/` for behavior, `lib/` for pure transforms, `models/` for durable
   state.

package/MIGRATION.md

@@ -21,6 +21,73 @@ performed, and re-running a codemod is a no-op.
 It refuses to run on a dirty working tree (`--allow-dirty` overrides that) and
 rewrites files in place, so review the diff afterwards.
 
+Every command on this page is written with `npx`, because a generated file
+cannot know your package manager. Substitute the equivalent if yours differs:
+`pnpm dlx`, `yarn dlx` (Yarn Classic has no `dlx` — it uses `npx`), or `bun x`.
+The CLI's own output does detect it and prints the right form.
+
+---
+
+<a id="option-value-inferred-from-mixed-children"></a>
+
+## Option: value is inferred from mixed children
+
+**Since `1.1.12`** · migration · no code change needed · also applies to
+`@mittwald/flow-remote-react-components`
+
+An `Option` used to infer its `textValue` — and, through it, its `value` — only
+when its children were exactly one text node. Text next to any element left both
+undefined, so react-aria assigned the option a key off a render-order counter:
+
+```tsx
+<Select>
+  <Option>
+    Millennium Falcon <Badge>Latest</Badge>
+  </Option>
+  <Option>X-Wing</Option>
+</Select>
+```
+
+| Option                        | key before     | key now             |
+| ----------------------------- | -------------- | ------------------- |
+| `Millennium Falcon` + `Badge` | `react-aria-1` | `Millennium Falcon` |
+| `X-Wing`                      | `X-Wing`       | `X-Wing`            |
+
+The key is what the field reports as its selected value and what `defaultValue`
+has to match, so the old key made the field submit a meaningless string, could
+not be preselected, and shifted when unrelated markup around it changed.
+
+Only text that is a child itself contributes — text inside an element child does
+not, so the option above is `"Millennium Falcon"` and not
+`"Millennium Falcon Latest"`.
+
+An `Option` with no text among its children at all still has no key to infer,
+and now says so on the console instead of failing silently:
+
+```tsx
+// logs: An <Option> has no 'value' and none could be inferred from its children…
+<Option>
+  <Text>Millennium Falcon</Text>
+</Option>
+```
+
+Give those options a `value`:
+
+```diff
+- <Option>
++ <Option value="millennium-falcon">
+    <Text>Millennium Falcon</Text>
+  </Option>
+```
+
+**Apply:** No code change required for the option itself. An `Option` whose
+children are text plus an element — text and a `Badge`, text and an icon — now
+carries that text as its key, where it previously fell back to react-aria's
+generated `react-aria-N`. Check anywhere such a key was read back: a stored or
+server-side selection, a `defaultValue`/`value` matched against it, or a test
+asserting on it. Pass an explicit `value` to pin the key to something other than
+the display text.
+
 ---
 
 <a id="use-design-tokens-build-metadata-removed"></a>
@@ -412,6 +479,94 @@ npx @mittwald/flow-codemods@latest password-tools-subpath-renamed src
 
 ---
 
+<a id="tabs-navigation-usage-to-tab-navigation"></a>
+
+## Tabs restyled; navigation usage moves to TabNavigation
+
+**Since `0.2.0-alpha.977`** · migration · manual change · also applies to
+`@mittwald/flow-remote-react-components`
+
+`Tabs` restyled: the tab list now fills the available width with equal-size tabs
+and a shared, animated indicator that slides between them, instead of the
+previous fit-content tabs that each carried their own hover/pressed/selected
+background. Nothing else about `Tabs` changed — same props, same panels, same
+collapsing behavior. If `Tabs` switches content within a page, there is nothing
+to do; the new look applies on upgrade.
+
+**Real navigation has a proper home now.** React Aria's `Tab` (which `TabTitle`
+extends) accepts the same routing props as a plain link — `href`, `target`,
+`routerOptions`, … — so a `Tabs` could always double as a navigation control:
+give a `TabTitle` an `href` and selecting it pushed a real route change while
+the row still looked and behaved like tabs otherwise. That usage only reached
+for `Tabs` because nothing else looked right for it. Now there is
+`TabNavigation`, introduced in the same version specifically for this case — and
+it keeps the visual language the old `Tabs` used to have.
+
+```diff
+- <Tabs selectedKey={pathname}>
+-   <Tab id="/apps">
+-     <TabTitle href="/apps">Apps</TabTitle>
+-   </Tab>
+-   <Tab id="/container">
+-     <TabTitle href="/container">Container</TabTitle>
+-   </Tab>
+- </Tabs>
++ <TabNavigation aria-label="Projekt-Navigation">
++   <Link href="/apps" aria-current={pathname === "/apps" ? "page" : undefined}>
++     Apps
++   </Link>
++   <Link
++     href="/container"
++     aria-current={pathname === "/container" ? "page" : undefined}
++   >
++     Container
++   </Link>
++ </TabNavigation>
+```
+
+#### What moves and what doesn't
+
+**The children.** `Tab` / `TabTitle` / the panel disappear; `TabNavigation`
+takes plain `Link` children directly. There is no panel, because the destination
+page's content lives on that route, not inside the component.
+
+**The active state.** `selectedKey` / `defaultSelectedKey` / `onSelectionChange`
+have no counterpart — `TabNavigation` does not track selection itself. Each
+`Link` marks itself current with `aria-current="page"`, which the app's router
+already knows how to derive (e.g. from the current pathname), the same way it
+would for any other navigation link.
+
+**Status icons.** An `AlertIcon` moves from inside `TabTitle` to inside the
+`Link`.
+
+**Collapsing.** The two do this differently. `Tabs` collapses all at once: as
+soon as any tab stops fitting, the whole tab list turns into a single button
+showing the active tab, which opens every tab in a context menu. `TabNavigation`
+collapses incrementally: links are hidden one by one as space runs out, and only
+those that no longer fit move into the "More" button's menu — the rest stay
+visible as ordinary links.
+
+There is no codemod: only the surrounding code knows whether a given `Tabs`
+usage was real navigation (an `href` on `TabTitle`, or a route push from
+`onSelectionChange`) or a genuine content switcher that merely looked similar
+before this change — the two are indistinguishable from the source alone.
+
+**Apply:** Tabs' rendering changed: the tab list now fills the available width
+with equal-size tabs and a shared, animated indicator that slides between them,
+replacing the previous fit-content tabs that each carried their own
+hover/pressed/selected background. Nothing else about `Tabs` changed, and a
+`Tabs` that switches content within a page needs no code change — the new look
+applies on upgrade. Where `Tabs` was used to fake real navigation instead — a
+`TabTitle` given an `href` (`Aria.Tab`'s routing props: `href`, `target`,
+`routerOptions`, …) so selecting it pushed a real route change — replace it with
+`TabNavigation`: plain `Link` children instead of `Tab`/`TabTitle`/panels,
+`aria-current="page"` on the active `Link` instead of
+`selectedKey`/`defaultSelectedKey`/`onSelectionChange`. `TabNavigation` keeps
+the visual language the old `Tabs` used to have, because it now owns that use
+case.
+
+---
+
 <a id="table-column-width-props"></a>
 
 ## TableColumn: `maxWidth` removed, `width` and `minWidth` retyped