{"_id":"@blinq-reach/alert-dialog","name":"@blinq-reach/alert-dialog","dist-tags":{"latest":"0.18.0"},"versions":{"0.18.0":{"name":"@blinq-reach/alert-dialog","version":"0.18.0","description":"Accessible React Alert Dialog.","author":{"name":"React Training","email":"hello@reacttraining.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/reach/reach-ui.git","directory":"packages/alert-dialog"},"dependencies":{"tiny-invariant":"^1.2.0","@blinq-reach/auto-id":"0.18.0","@blinq-reach/dialog":"0.18.0","@blinq-reach/polymorphic":"0.18.0","@blinq-reach/utils":"0.18.0"},"devDependencies":{"react":"^18.2.0","react-dom":"^18.2.0","tsup":"^6.1.3","@reach-internal/dev":"0.0.0","@reach-internal/test":"0.0.0","@reach-internal/tsconfig":"0.0.0"},"peerDependencies":{"react":"^18.2.0","react-dom":"^18.2.0"},"main":"./dist/reach-alert-dialog.cjs.js","types":"./dist/reach-alert-dialog.d.ts","publishConfig":{"access":"public"},"module":"./dist/reach-alert-dialog.mjs","scripts":{"build":"tsup"},"bugs":{"url":"https://github.com/reach/reach-ui/issues"},"homepage":"https://github.com/reach/reach-ui#readme","_id":"@blinq-reach/alert-dialog@0.18.0","_integrity":"sha512-l2WT641I5edL1MMLLtcyxm/7K+xqggBYoZoSV8An6qZEwD4XjtEzCnOqQ5r3i/w/ufTNZpjLhUNTiadPX/FuGQ==","_resolved":"/tmp/6b385fdaad6801e522ba3ba904937b89/blinq-reach-alert-dialog-0.18.0.tgz","_from":"file:blinq-reach-alert-dialog-0.18.0.tgz","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-l2WT641I5edL1MMLLtcyxm/7K+xqggBYoZoSV8An6qZEwD4XjtEzCnOqQ5r3i/w/ufTNZpjLhUNTiadPX/FuGQ==","shasum":"e6d61d299eb52fe6c54535011e9f196849af1138","tarball":"https://registry.npmjs.org/@blinq-reach/alert-dialog/-/alert-dialog-0.18.0.tgz","fileCount":4,"unpackedSize":6078,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDoImFUCvHAicm4b4V5jycEk56ESddpR/r3f3yqvmoD/AiEAkYpbQ6Ns7BIF5n4UfMG1HO1Z822P5eC3EHa2DjMxojs="}]},"_npmUser":{"name":"willhackett","email":"will@willhackett.com"},"directories":{},"maintainers":[{"name":"willhackett","email":"will@willhackett.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/alert-dialog_0.18.0_1684374045821_0.7968878951147083"},"_hasShrinkwrap":false}},"time":{"created":"2023-05-18T01:40:45.729Z","0.18.0":"2023-05-18T01:40:45.973Z","modified":"2023-05-18T01:40:46.260Z"},"maintainers":[{"name":"willhackett","email":"will@willhackett.com"}],"description":"Accessible React Alert Dialog.","homepage":"https://github.com/reach/reach-ui#readme","repository":{"type":"git","url":"git+https://github.com/reach/reach-ui.git","directory":"packages/alert-dialog"},"author":{"name":"React Training","email":"hello@reacttraining.com"},"bugs":{"url":"https://github.com/reach/reach-ui/issues"},"license":"MIT","readme":"# @reach/alert-dialog\n\n[![Stable release](https://img.shields.io/npm/v/@reach/alert-dialog.svg)](https://npm.im/@reach/alert-dialog) ![MIT license](https://badgen.now.sh/badge/license/MIT)\n\n[Docs](https://reach.tech/alert-dialog) | [Source](https://github.com/reach/reach-ui/tree/main/packages/alert-dialog) | [WAI-ARIA](https://www.w3.org/TR/wai-aria-practices-1.2/#alertdialog)\n\nA modal dialog that interrupts the user's workflow to get a response, usually some sort of confirmation. This is different than a typical Dialog in that it requires some user response, like \"Save\", or \"Cancel\", etc.\n\nMost of the time you'll use `AlertDialog`, `AlertDialogLabel`, and `AlertDialogDescription` together. If you need more control over the styling of the modal you can drop down a level and use `AlertDialogOverlay` and `AlertDialogContent` instead of `AlertDialog`.\n\nWhen a Dialog opens, the _least destructive_ action should be focused so that if a user accidentally hits enter when the dialog opens no damage is done. This is accomplished with the `leastDestructiveRef` prop.\n\nEvery dialog must render an `AlertDialogLabel` so the screen reader knows what to say about the dialog. If an `AlertDialogDescription` is also rendered, the screen reader will also announce that. If you render more than these two elements and some buttons, the screen reader might not announce it so it's important to keep the content inside of `AlertDialogLabel` and `AlertDialogDescription`.\n\nThis is built on top of [@reach/dialog](https://reach.tech/dialog), so `AlertDialog` spreads its props and renders a `Dialog`, same for `AlertDialogOverlay` to `DialogOverlay`, and `AlertDialogContent` to `DialogContent`.\n\n```jsx\nfunction Example(props) {\n\tconst [showDialog, setShowDialog] = React.useState(false);\n\tconst cancelRef = React.useRef();\n\tconst open = () => setShowDialog(true);\n\tconst close = () => setShowDialog(false);\n\n\treturn (\n\t\t<div>\n\t\t\t<button onClick={open}>Delete something</button>\n\n\t\t\t{showDialog && (\n\t\t\t\t<AlertDialog leastDestructiveRef={cancelRef}>\n\t\t\t\t\t<AlertDialogLabel>Please Confirm!</AlertDialogLabel>\n\n\t\t\t\t\t<AlertDialogDescription>\n\t\t\t\t\t\tAre you sure you want to delete something? This action is permanent,\n\t\t\t\t\t\tand we're totally not just flipping a field called \"deleted\" to\n\t\t\t\t\t\t\"true\" in our database, we're actually deleting something.\n\t\t\t\t\t</AlertDialogDescription>\n\n\t\t\t\t\t<div className=\"alert-buttons\">\n\t\t\t\t\t\t<button onClick={close}>Yes, delete</button>{\" \"}\n\t\t\t\t\t\t<button ref={cancelRef} onClick={close}>\n\t\t\t\t\t\t\tNevermind, don't delete.\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t</AlertDialog>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n```\n","readmeFilename":"README.md"}