Data Import Dialog Block for React

So you can see it without a click. On load the dialog is a copy drawn in place over the page: a native dialog element that isn't modal, so nothing is trapped, hidden or focused, and the page around the preview keeps working. The Import contacts button opens the real full-screen Dialog, modal, with its focus trap, Escape and focus return, and the copy stays closed until a reload. Both show the same ImportBody component and share the block's state, so a file chosen in the copy is there in the real one. In your app keep the Dialog and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.

No. A file you drop or choose shows its real name and size, and nothing more: the demo never opens it, so the rows, columns and counts come from a typed sample of 238 contacts, and the dialog says so beside the file. Nothing is uploaded, and the contacts count on the page is local state. In your app parse the file on the client or the server, send the headers and the first rows to build the Map step, and run the real checks for the Review counts.

matchOf reads each header: anything with "mail" goes to Email, "phone" or "mobile" to Phone, "name" to Name, "organi" or "company" to Company, "label" or "tag" to Tags, and the rest to Don't import. You can change any of them. Next is refused, in words, with no Name, no Email (it is how duplicates are found), or two columns on the same field. The Review counts follow the mapping: leave Phone out and the row with a bad phone number is no longer an error.

Rows in the file is 238. Duplicates skipped are the rows whose email is already in Contactloom; the demo starts with 4, and importing a second time finds the first import's rows as duplicates too. Errors are the rows listed by number with the reason. With Skip rows with errors on, they stay out; with it off they are imported with their problem fields empty, so the button's count grows by the number of errors. If nothing new remains, the button turns quiet and says why when pressed.

The dialog is the whole screen. The step names collapse to the marker numbers with a line saying "Step 2 of 3", the mapping rows stack so each column's name, sample and Select read top to bottom, and the footer's two buttons stay on screen while the body scrolls between the steps and the footer.

Yes. The real dialog is named by its title and described by its sentence, focus stays inside until it closes, and Escape and the close button return focus to Import contacts; both are ignored while the bar runs. The trigger is passed to DialogTrigger through render, and the dialog is controlled with open and onOpenChange. Every Select is named for its column, the drop zone is reachable through Browse files, and the copy shown on load moves no focus.