Stepper Wizard Progression Features Block for React

Edit the top of the file. SOURCES lists the columns the file has, each with its first four values; TARGETS lists the fields they can be matched to; GUESS is the match the wizard starts with; ROWS is how many rows the file holds. The skipped row, the preview table, the imported count and the labels on Next are all worked out from those, so they can't disagree. Real parsing and the upload itself go where each step's Next button runs.

On the Map step, Next is disabled while two columns are matched to the same field or no column is matched to Email, and a line under the list says which. Back is always available except on the first step. The steps in the list at the top can be clicked only up to the furthest step reached, and not after the import.

When you move to another step, focus goes to its heading (never on page load), and a polite status says "Step 3 of 4: Preview", or the result after the import. The step list is one tab stop with the arrow keys moving along it; each select is named for its column ("Field for email_addr"), and the preview table is a real table in a focusable, named region that scrolls sideways on a phone.

It's the catalog's Select on every version, so the arrow keys, type-ahead and Escape behave as they do wherever else you use it.

The step list is replaced by "Step 2 of 4" with its title and a progress bar, each column's select goes under its name, and the preview table scrolls sideways inside its own region. Every step has the same minimum height, so the buttons stay where they are. Nothing scrolls the page sideways at 320 pixels.

The header and the card fade up once on load, and each step slides in a few pixels from the reading direction (mirrored in right-to-left layouts). With reduced motion all of it is off and a step simply appears.