Skip to content

v0.4.6

Choose a tag to compare

@cixzhang cixzhang released this 22 Aug 15:43
· 146 commits to main since this release
f1d4034

Astryx 0.4.6 — all @astryxdesign/* packages ship at this version.

npx astryx upgrade --apply

@astryxdesign/core

New Features

  • DateInput fits the pointer: a touch picker on a finger, the text field
    on a mouse (#5243)

    DateInput has always been a control for a mouse — a field you type into with a calendar in a popover beside it. On a phone or a tablet that is the wrong shape: the popover is a desktop calendar operated by thumb, and focusing the field summons a keyboard that covers the thing it is meant to fill in.

    The same component now renders a second surface where the primary pointer is a finger (pointer: coarse): a bottom sheet holding one month per screen, swiped sideways, with month and year wheels behind the header title for the far jumps swiping is bad at, arrows in the header corner for a single step, and every target floored at 44px. A day commits the moment it is tapped and leaves the sheet up, so a mistake can be corrected in place; Save closes the picker, and Reset puts it back to how it opened — no date, current month. The grid spills adjacent-month days, muted and unselectable, and the weekday header is three letters rather than two, both as the desktop calendar has them.

    The month and year wheels are one layer that fades in and out on top of the calendar. The calendar itself never fades — it is covered and uncovered, so the only thing moving is the thing arriving. The layer carries an opaque background of its own, which is what makes the fade uniform: it renders as a finished image and the fade applies to the image, rather than the wheels' translucent selection band compositing against a live grid on its own terms.

    Nothing changes at the call site. It is one component with two surfaces, not two components — same props, same values, no new import, no media query to write. Existing usage is untouched: with a mouse the rendered output is the control that was always there.

    The switch is the pointer alone, deliberately with no width bound. pointer means the PRIMARY device, so a touchscreen laptop reports fine and keeps the typable field (its keyboard is right there), while a narrowed desktop window is still a mouse. Adding a width test would only re-exclude tablets, which are the clearest case for a thumb picker.

    The public surface barely moves: six @astryx.dateInput.* catalog keys for the picker's header and footer, and nothing else. No new props, no new exports — DateInputProps is byte-identical at 25.

    Nothing else is published, on purpose. There is no export that forces a surface: the touch picker is reachable by being on a touch device, which is the only place it is worth looking at. The media query the switch runs on is an internal constant, not an export — six other core components write @media (pointer: coarse) inline rather than sharing one, and nothing has asked to ask the same question. The picker's two sizes (the 44px day cell, the 28px wheel row) are compile-time constants rather than theme variables — the day size is an accessibility floor, and a variable a theme can quietly lower is not a floor. And the sheet's header button is addressed by a data- attribute rather than a theme target, because nothing has asked to restyle it. Each of those is additive later and awkward to withdraw once shipped.

    The wheels also answer a mouse now. A wheel is a scroll container, so a finger pans it for free; a mouse got nothing, because browsers do not drag-scroll an overflow container — pressing and pulling on the one control shaped like a thing you spin did nothing at all. Dragging with a mouse works, and fixes a related bug on the way: BottomSheet begins its own drag from a pointerdown on its body and captures the pointer for it, so a click on a wheel row that wobbled more than a pixel or two used to select nothing.

  • Export useLocale and useCollator for provider-backed formatting and comparison (#5194)

  • RadioListItem: the radio-list-item row theme target now carries size, selected, and disabled state variants (matching multi-selector-option), so themes can style selected or disabled rows (#5143).

  • RadioListItem: the radio-list-item theme target now rides the painting row element (converging with list-item), so a theme can style the row's hover background, padding, and border radius — previously it sat on a layout-only wrapper that painted nothing. The default (unthemed) row appearance is unchanged: it stays a bare surface with no row padding, radius, or hover/selected background (only the radio indicator tints on hover) (#5143).

  • Section, Stack (with HStack / VStack) and Center accept a padding prop for each of the four edges — paddingBlockStart, paddingBlockEnd, paddingInlineStart and paddingInlineEnd — so an edge can take its own spacing step without an xstyle escape hatch. Section also gains the paddingInline axis prop it was missing, so all three components now expose the same seven-prop set (#5224).
    Each prop takes the same spacing scale as padding, and resolution is most-specific-wins, per edge:

    edge prop → axis prop (paddingInline / paddingBlock) → padding

    An edge prop changes its own edge and leaves the other three alone.

    <Section padding={6} paddingBlockStart={2}></Section>   // tight top, 24px elsewhere
    <Stack padding={4} paddingInlineEnd={0}></Stack>         // flush trailing edge

    The inline props are logical, so paddingInlineStart is the left edge in LTR and the right edge in RTL.

    On Section the matching --container-padding-* custom property moves with the prop, so bleed children (Table, Divider, a nested Section) keep compensating against the padding actually applied.

    Existing code is unaffected: padding, paddingInline and paddingBlock behave exactly as before, and their generated class output is unchanged.

  • Selector: add the selector-option-row theme target on the dropdown option row, carrying size plus selected/disabled state — so a theme can restyle row padding and density directly (mirroring multi-selector-option), instead of reaching the bare role="option" element with a structural selector (#5179).

  • MediaTheme: add mode="auto" and mode="off" (#5299)
    A theme is free to define --color-background-inverted as something that is not inverted — and a component that hardcodes mode="dark" then paints white text on pale grey at 1.25:1. The surface color is a runtime value and the mode was a compile-time guess, so no amount of care in the component could catch it.

    mode="auto" measures the surface the browser actually painted and applies whichever of the theme's own --color-on-dark / --color-on-light reads better on it. There is no threshold and no contrast target: it picks between the theme's two answers, so a theme that wants a soft pairing still gets one. Deciding a surface needs no media context stays an authoring choice — that is the new mode="off", which renders the same element without the media attribute so children never remount.

    When the backdrop is not knowable from CSS — during SSR, on the first client frame, and most often behind a background-image, whose pixels need sampling (see useImageMode) rather than a computed style — auto uses the new fallback prop instead of guessing.

    Toast now uses mode="auto", with its previous rule kept only as that fallback. Every stock Astryx surface renders exactly as before.

  • Tooltip and HoverCard: tap to open where there is no hover (#5248)
    Hover is the one trigger a touch screen cannot express, and both components were answering that badly. Tooltip suppressed itself on any device reporting (hover: none), so its content — often the only label an icon button has — was simply unreachable on a phone. HoverCard did nothing at all: the mouseenter a tap synthesizes opened the card on every tap of its trigger, over the control the user was aiming at, with no gesture that closed it again.

    Both now take a touchTrigger prop, and what the trigger DOES decides the default. A trigger that performs an action — a button, a link, a form control — keeps its tap under auto: the layer stays shut, because the tap already has somewhere to go and a hint about a control the user just operated is noise. A trigger that performs no action — an info icon, an abbreviation, a truncated label — has nothing to lose, so the tap opens the layer, with no show delay (a tap is a decision, not the hover intent the delay exists to filter) and a tap outside to dismiss it. tap and none state the choice outright; tap is what an info icon rendered as a button wants, since it looks like an action to the DOM while revealing the layer is the only thing it does.

    Hover-capable devices are unaffected, hybrid ones included: the decision is made per interaction from the pointer type rather than once per device from a media query, so the same trigger opens on hover under a mouse and on tap under a finger. A stylus is a hover device by the same rule — a pen in detection range fires hover events with nothing in contact, so it opens the layer on hover, and only a pen that lands counts as a tap. Neither layer opens from the focus a tap leaves behind any more — the second way a tap could bury the control it activated, and on Tooltip it is the tapped text fields that were affected, since those match :focus-visible by design.

    [fix] InfoTip (lab): opts into touchTrigger="tap". Its trigger is a real button, so the auto rule would hand the tap to the control — but revealing the tooltip is that button's only purpose, and suppressing it left an InfoTip's content unreachable on a phone.

Fixes

  • Avatar: a status element now reports its own accessible label to the avatar through context, so wrapping AvatarStatusDot in a component of your own keeps the status in the avatar's accessible name ("Jane Doe, Online") instead of silently dropping it — the role="img" root prunes descendant semantics, so composing it in is the only route to assistive tech (WCAG 4.1.2). Reading label off a directly-passed element still works and still resolves on the first render. An interactive avatar (href/onClick) with no name/alt warns in development, and a status label no longer counts as the control's identity: "Online" reads as a legitimate name while saying nothing about where the link goes. Derived role/aria-label/aria-hidden now spread before the passthrough props, following Icon, so a consumer's own values win. No API change (#5034)

  • AvatarGroup: four defects out of the component audit, three of them in AvatarGroupOverflow (#5055).
    The indicator was display: flex on a span, which is a block-level flex container, so the exported component rendered as a full-width bar instead of a circle anywhere outside an AvatarGroup: measured 1168px wide in a 1168px parent. It is inline-flex now; inside a group nothing changes, because a flex item is blockified either way.

    Its label font size was a bare size * 0.35, which computes 7px at xsm and 8.4px at sm. That is under the 12px legibility floor, and the effect is worse than the number suggests: the glyph stroke ends up thinner than a pixel, so it never reaches its own text colour. Decoded from a screenshot, the darkest pixel at xsm is #bebebe on a #f0f0f0 field, a contrast of 1.63:1 where 4.5:1 is required. The size now floors at the --text-supporting-size role token and scales proportionally above it, so md and larger are unchanged.

    The indicator also kept its negative overlap margin when it was the first child of a group, hanging 12px outside the group's own box. It now carries the same :not(:first-child) guard Avatar already had. And a negative count rendered the string +-3 and announced "-3 more"; since the documented shape for the prop is total - visibleCount, which goes negative whenever the list is shorter than the slice, it now clamps at zero.

    Docs: the guidance told readers to "set max to limit visible avatars", and there is no max prop. The API is compositional on purpose, so the consumer slices; the guidance now says that. The keyboard behaviour names the APG roving tabindex technique it implements, and size now says that the group's value wins over each child avatar's own size, including when the group leaves it at the default.

  • Blockquote: the cite attribution renders as a bare <cite> instead of being wrapped in a <footer>, which was becoming a contentinfo document landmark. Also guards the slot with isRenderable, so cite={condition && author} no longer emits an empty <cite>, and wraps long unbroken words instead of overflowing (#5144).

  • Bottom Sheet: float the grab handle so content sits closer to the top (#5222)
    The drag area above the sheet's content was a 48px row in the sheet's flex column, pushing everything below it down by its full height and reading as an empty band above the first line of content.

    The bar is now 24px and floats over the content: the scrolling area starts at the sheet's top edge and rides up under the pill, so a heading sits 24px closer to the top. The pill is 4px tall centered in the band, so it occupies only 10-14px from the edge — inside the top padding a content wrapper already provides — and a surface gradient behind it keeps it legible over whatever sits or scrolls beneath.

  • BottomSheet: give the sheet one uniform edge against the scrim. Two things were wrong in dark mode. The sheet drew no edge of its own — surface and scrim sit a few RGB steps apart and the --shadow-high drop shadow is black on near-black, so the left and right edges were invisible (measured 1.16:1 boundary contrast in dark against 2.89:1 in light); it now carries a --border-width / --color-border hairline on its three scrim-facing edges, the same treatment MobileNav gives its scrim-facing edge. And under a theme that packs an inset ring into --shadow-high (every bundled theme adds one in dark mode) that ring was painted over by an opaque content wrapper such as Section, so it showed only in the gap below where the content ended and the side edges appeared to change width partway down; the scrolling body now paints the surface across the sheet's whole inner box, hiding the ring evenly (#5305).

  • Breadcrumbs: button crumbs keep the link's vertical padding, the variant reaches the item theme targets, and interactive crumbs paint the shared focus ring (#5332)

  • DateInput's touch calendar no longer rests between two months (#5319)
    Swiping the month calendar on iOS could leave it parked a couple of columns into a pane: the left of March and the right of April on screen at once, under one square Sun-to-Sat header, with the title still naming March. The grid was never skewed — the scrollport was simply at rest where no month begins.

    scroll-snap-type: mandatory is supposed to make that impossible, and on a static list it does. This list is virtualized: seven panes exist out of twelve hundred, and the panes ARE the snap areas, so every month the finger crosses mounts one and unmounts another while the fling is still running. iOS scrolls off the main thread — it picks a landing place from the snap points it knows about at that moment, and a React re-render that lands after the decision moves them. The scroller stops where a snap point used to be and nothing re-snaps it. Chrome never showed it because it snaps again after the mutation.

    The rest position is now corrected rather than trusted: once the gesture is genuinely over — touch released, the scroller quiet, AND its offset confirmed unchanged across a frame — a scroller that is off a pane boundary is moved to the nearest one. A scroller the browser snapped for itself is left alone, so nothing extra happens on Chrome, and sub-pixel drift on a fractional viewport is ignored.

    That last condition is what keeps the fix from becoming a worse bug than the one it fixes. A quiet period is not proof of rest: iOS runs its own snap animation for a few hundred milliseconds after the finger lifts and fires scroll events irregularly while it does, so a correction that trusts quiet alone can land mid-animation, round an offset still travelling toward next month back to the month it came from, and reverse the swipe.

  • A disabled element answers the pointer with default, never an interactive cursor. Every cursor in core and lab carries ':is(:disabled,[aria-disabled="true"])': 'default', and the reset gives the same cursor to any disabled element that declares none — [aria-disabled] included, which previously got nothing. A lint rule and a Chromium sweep over every story keep it that way. Disabled elements sealed behind pointer-events: none are unchanged: the pointer never reaches them, so their cursor comes from an ancestor — which is why the guarantee is default rather than a distinct disabled cursor the library could only paint on some of them (#5323).

  • Disabled elements no longer paint a hover state: every self-:hover in core and lab, and every :hover a theme authors, now carries the zero-specificity guard :hover:where(:not(:disabled,[aria-disabled="true"])), so existing overrides weigh exactly what they weighed before. A lint rule and a Chromium sweep over every story keep it that way (#5247).

  • InputClearButton: the clear (✕) affordance now meets the WCAG 2.5.8 AA 24×24 minimum on touch. The shared button rendered a 20px glyph with a 20px tap target, so every input that clears through it — Typeahead, Tokenizer, FileInput and the rest of the family — was under the floor on a phone. An ::after overlay now expands the tappable region to 24×24, gated behind @media (pointer: coarse): on a fine pointer the overlay is not generated at all, because a mouse is precise enough, an unconditional overlay could overlap neighboring controls in dense desktop layouts, and an overlay covering the button would take hover away from the astryx-input-clear-icon theme target. The visual glyph is unchanged at every breakpoint, and the overlay stops at 24px so it stays clear of the 8px adornment gap and the input's own caret area (#4956).

  • MobileNav: the drawer now slides in when it opens, instead of only sliding out when it closes. Two things were needed, and each is useless without the other. First, the dialog is display: none while closed, so the drawer's first rendered frame already holds the on-screen transform and a transition has no before-change value to run from — @starting-style supplies it, for the drawer's transform and for the ::backdrop's opacity. Second, the dialog clipped the off-screen drawer with overflow: hidden, which makes it a scroll container; a scroll container in the top layer whose subtree holds another scroller (the drawer's content area) does not paint a @starting-style entry transition for its descendants in Chromium — the transition ticks in the CSSOM while every painted frame shows the end value. overflow: clip clips identically without creating a scroll container. The drawer now slides in from its own edge (mirrored under RTL) and the scrim fades up, both on --duration-medium and both collapsing under prefers-reduced-motion, exactly as the close already did (#5218).

  • NumberInput: the number-stepper column now tracks a themed padding and radius instead of assuming the defaults. Theming number-input padding left the steppers short of the field edges (a gap top and bottom), and a themed borderRadius rounded the field while the stepper corners kept the default radius. The wrapper's padding now goes through the shared container expansion, so it is picked up from any spelling a theme writes it in — padding: 14px 20px, paddingBlock, or a single paddingBlockStart — and both the wrapper and the column read the resulting per-side --astryx-number-input-padding-* tokens; an asymmetric paddingBlock: 4px 12px is cancelled correctly at each edge. A themed number-input borderRadius now also reaches --_field-radius, which the column's outer corners follow. Byte-identical by default, and inert for the no-stepper case and every other input (#5181).

  • Stop the container padding system at every overlay boundary. Follow-up to #5209, which zeroed --container-padding-* on four overlay roots and closed the visible overflow in #5208 (#5231).
    Two gaps remained. The variables descendants ADD (--layout-padding-*, and a Section's propagated padding) still crossed the boundary, so an unpadded Section inside an overlay took the page's padding instead of the theme default — 40px where 16px was meant. And Lightbox, ContextMenu and HoverCard were never covered.

    The reset now lives in one place (overlayPaddingReset, exported from @astryxdesign/core/Layout) instead of being hand-copied per overlay, and moved onto the useLayer root, which covers every layer surface at once. Values descendants subtract are zeroed; values they add are cleared to initial so readers fall through to their own default rather than losing their padding.

    Section's padding propagation moved from the public --astryx-section-padding token to a private --_section-padding-propagated. The two carried different authority under one name — a theme's value versus one ancestor's — and an overlay could not drop the inherited one without blanking the theme's. Propagated values still win over the theme for nested sections, so behavior is unchanged. Themes are unaffected: --astryx-section-padding remains the public token and still reaches inside overlays.

  • Theming: a physical paddingTop/paddingBottom now reaches the container padding expansion, so card, dialog, section and number-input track it the way they already track the logical spellings. A physical block longhand matched none of the padding property names the expansion recognizes, so it landed raw on the element while the component's internals kept reading the default — the NumberInput stepper column came up ~10px short of the field edges, and container bleed compensated by the wrong amount. Mixing spellings was worse than either alone: padding: '10px' plus paddingTop: '14px' published 10px in the tokens while the element painted 14px on top. padding-top and padding-bottom ARE the block edges in every horizontal writing mode, so this normalization assumes no direction. paddingLeft/paddingRight are deliberately unchanged: they are direction-relative — left is inline-start in LTR and inline-end in RTL — and the tokens are consumed by logical properties, so routing them would silently move the padding to the opposite edge under RTL. They keep their physical meaning, exactly as before (#5244).

  • DateInput, DateTimeInput, DateRangeInput, and Calendar now format and parse dates using the ambient InternationalizationProvider locale instead of the host/browser locale. plainDateFormat (backing formatSharedDate) previously called Intl.DateTimeFormat(undefined, ...), and dateParser's day/month disambiguation heuristic for ambiguous numeric input (e.g. 3/4/2026) called Intl.DateTimeFormat() with no locale at all, so a tree wrapped in a non-English locale still formatted and parsed dates using the host locale (#5120).

  • Use the InternationalizationProvider locale for sorting, formatting, and speech defaults (#5195)

  • RadioListItem: the whole row is now a click target. Clicking the description — or the empty space in a row's hover area — selects the radio, matching CheckboxListItem. Previously only the radio and its label text responded, so the description and surrounding row were dead space. The row delegates surface clicks to the radio input (one tab stop per option preserved), and the radio keeps its accessible name via aria-label (#5143).

  • Reset container padding custom properties on overlay elements (BottomSheet, Dialog, MobileNav, Popover) to prevent nested Section components from inheriting ancestor section padding (#5209).

  • ResizeHandle: dragging the lower half of a tall handle works again. The invisible grab zone is stretched along the handle, but the offset that biases it onto the pill also carried the pill's own -50% centering shift — so the zone slid half the handle's length off the divider. On a full-height panel at 1440x900 the 16x900 hit box sat at y=-434, leaving everything below the pill's centre dead: a pointerdown on the visible grip's centre, or anywhere lower, started no drag at all. The dead region grew with the panel, and the same shift stranded the grab zone sideways on vertical handles. The bias now moves the zone along the pill's axis only (#5198).

  • Opening a Dialog, BottomSheet, Lightbox, or MobileNav no longer shifts the page sideways when the browser has a classic scrollbar (#5219)
    Locking background scroll hides the document's scrollbar. Where that scrollbar takes layout space — Windows/Linux desktop, and macOS set to always show scroll bars — hiding it widened the layout viewport by its width (~15px), so the whole page reflowed sideways behind the overlay and back again on close.

    Both scroll locks now hold that gutter open with scrollbar-gutter: stable for the duration of the lock, which keeps position: fixed chrome (sticky headers, toast viewports) still as well as in-flow content. Pages with no space-taking scrollbar, and pages that already set scrollbar-gutter themselves, are left alone. Engines without scrollbar-gutter support fall back to padding the measured difference.

  • SegmentedControl: keep item labels on a single line, truncating overflow with an ellipsis instead of wrapping to multiple lines (#5035)

  • Selector: SelectorOptionData gains description, and the closed trigger now shows the selected option instead of just its label. The two-line option row SelectorOption draws was unreachable from the options prop — the data type carried only value/label/disabled/icon — so consumers kept a side map of descriptions keyed by value and re-rendered the row through renderOption. description now sits on the option data and DefaultOption forwards it. On the trigger, the selected option's own icon renders in the closed state (startIcon still wins when set, so a pinned field icon never doubles up), which retires the app-side startIcon={value === 'x' ? … : …} mirroring of state the component already knows. renderValue is the seam for drawing the selection yourself — the description included (#5202).
    [feat] Item: new layout prop — 'stacked' (default, unchanged) or 'inline', which keeps the description on the label's line with the description ellipsizing first. The inline row centers its two lines rather than sharing a baseline: two font sizes on one baseline make a line box taller than either line, which would push a fixed-height host off its size token. Every row built on Item gets the axis, SelectorOption included.

    [fix] Selector: the trigger is sized by padding rather than a fixed height, so it is the --size-element-* token for a one-line value (28/32/36) and exactly one text line taller for a two-line one (48/52/56). The token and a text line are both multiples of 4, so every trigger lands on the 4px rhythm and lines up with the Buttons and inputs beside it — and no prop chooses the height, the content does. It previously swapped the fixed height for a minimum whenever renderValue was passed, keyed on the prop being present rather than on the content needing the room: a one-line value measured 39px and a two-line one 58px at every size, so the size prop stopped affecting the trigger at all. Inside an InputGroup, where the group pins the row, the relaxed height did nothing and the content bled 4px through its own border. The group owns the row now and the trigger clamps its own value box to it, so nothing a caller draws can paint over the rows above and below: a SelectorOption folds onto one line and ellipsizes, and any other node is cut off at the row's edge. The trigger also stops asserting a height floor of its own there, so a control sized above its group — <InputGroup size="md"> around a size="lg" control — sits in the group's row instead of growing it. The trigger's line box is pinned to that same token rather than a ratio, so the coarse-pointer font bump — and any theme that changes --font-size-base — grows the glyphs without moving the control off its size token.

  • Slider with orientation="vertical" now gets the same 24px touch hit area the horizontal one got: its track was still only 20px wide on coarse pointers, under the WCAG 2.5.8 AA minimum. The whole track is the tap target for both orientations — the fix that floored the horizontal track's block size did nothing for vertical, whose short axis is the inline one — so the inline size is now floored to 24px on touch, with the same @media (pointer: coarse) gate. The rail, fill, marks and thumb all center on the inline 50%, so nothing visible moves and desktop is untouched (#5173).

  • @astryxdesign/core/theme/syntax is importable from a server component again: the presets are data, not client references (#5076).
    The subpath's barrel carried 'use client', and it is the only entry point for the syntax module. React therefore replaced every export with a client reference for a server importer — including dracula, oneLight, allSyntaxPresets, syntaxTokenDefaults and defineSyntaxTheme, none of which need a boundary. Reading a preset in a Next.js server module (deriving a code-block ground, emitting theme CSS at build time) got a proxy instead of data, so preset.tokens was undefined and the failure surfaced far from its cause — the same import under plain Node worked perfectly.

    The directive now sits only on SyntaxTheme.tsx, the provider that actually needs it, so SyntaxTheme and useSyntaxTheme keep their client boundary while the data exports resolve as data. No API change.

@astryxdesign/cli

New Features

  • An integration can contribute reference-doc topics: point docs at a root in astryx.integration.* and every {topic}.doc.{ts,mjs,js} under it is served by astryx docs, indexed by astryx search, and named in the agent-docs block, beside the built-in topics. A topic may also declare replaces: '<topic>' to take over an existing one (renaming it leaves the old name resolving as an alias) or extends: '<topic>' to merge onto one section by section. A name that collides without declaring either is an invalid_doc issue rather than a silent override, and validate-integration reports it. (#5311)
    Also fixes the agent-docs block's topic list, which scanned for \w+ and so silently dropped every hyphenated topic — getting-started, cli-integrations, browser-support, styling-libraries and working-with-ai were missing from every block ever written, and an agent cannot ask for a topic it was never told about.
  • Five dashboard page templates: dashboard-cohort-funnel, dashboard-data, dashboard-executive-summary, dashboard-project-status and dashboard-service-monitoring. Each is a complete page — layout, realistic sample data, and the component choices that go with the shape of the data — so astryx template <name> gives you something to edit rather than a blank frame (#5245).

Fixes

  • component built the import specifier for an integration component by joining the package name and the component name, which assumes every component is exported from a subpath named after itself. Components are commonly grouped behind a single entry point named after the concept, so the suggested import pointed at a subpath the package does not export and did not resolve (#4810).
    The specifier is now resolved against the owning package's exports map, keyed on the directory the component's doc file sits in, and falls back to the package root when that directory is not an exported subpath. A specifier a doc file states for itself is also no longer overwritten.
  • The upgrade codemod no longer collapses significant JSX whitespace when it renames an element tag. Renaming <OldName> next to text and a {expression} (e.g. hello {name} world) previously dropped the adjacent space (hello {name}world); element-tag renames are now spliced into the output so the surrounding JSX is left untouched (#5149).
  • The XDS-prefix codemod no longer produces a file that will not compile. Dropping the prefix renames XDSButton to Button, but if the file already had a local binding called Button the rewrite collided with it and shadowed one of the two. The import is now aliased instead, so both survive and the file still typechecks (#5225).

Contributors

Thanks to everyone who contributed to this release:

@cixzhang @ejhammond @ernestt @freddymeta @Geervan @HelloOjasMutreja @imdreamrunner @josephfarina @kentonquatman @nynexman4464 @rubyycheung

Full Changelog: v0.4.5...v0.4.6