@radix-ui/react-alert-dialog 1.1.7 → 1.1.8-rc.1744259481941

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 WorkOS
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,13 +1,3 @@
 # `react-alert-dialog`
 
-## Installation
-
-```sh
-$ yarn add @radix-ui/react-alert-dialog
-# or
-$ npm install @radix-ui/react-alert-dialog
-```
-
-## Usage
-
 View docs [here](https://radix-ui.com/primitives/docs/components/alert-dialog).

package/dist/index.js

@@ -28,7 +28,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// packages/react/alert-dialog/src/index.ts
+// src/index.ts
 var index_exports = {};
 __export(index_exports, {
   Action: () => Action,
@@ -53,7 +53,7 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 
-// packages/react/alert-dialog/src/alert-dialog.tsx
+// src/alert-dialog.tsx
 var React = __toESM(require("react"));
 var import_react_context = require("@radix-ui/react-context");
 var import_react_compose_refs = require("@radix-ui/react-compose-refs");

package/dist/index.mjs

@@ -1,6 +1,6 @@
 "use client";
 
-// packages/react/alert-dialog/src/alert-dialog.tsx
+// src/alert-dialog.tsx
 import * as React from "react";
 import { createContextScope } from "@radix-ui/react-context";
 import { useComposedRefs } from "@radix-ui/react-compose-refs";

package/package.json

@@ -1,54 +1,33 @@
 {
   "name": "@radix-ui/react-alert-dialog",
-  "version": "1.1.7",
+  "version": "1.1.8-rc.1744259481941",
   "license": "MIT",
   "source": "./src/index.ts",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
-  "publishConfig": {
-    "main": "./dist/index.js",
-    "module": "./dist/index.mjs",
-    "types": "./dist/index.d.ts",
-    "exports": {
-      ".": {
-        "import": {
-          "types": "./dist/index.d.mts",
-          "default": "./dist/index.mjs"
-        },
-        "require": {
-          "types": "./dist/index.d.ts",
-          "default": "./dist/index.js"
-        }
-      }
-    }
-  },
   "files": [
     "src",
     "dist"
   ],
   "sideEffects": false,
-  "scripts": {
-    "lint": "eslint --max-warnings 0 src",
-    "clean": "rm -rf dist",
-    "version": "yarn version"
-  },
   "dependencies": {
     "@radix-ui/primitive": "1.1.2",
     "@radix-ui/react-compose-refs": "1.1.2",
     "@radix-ui/react-context": "1.1.2",
-    "@radix-ui/react-dialog": "1.1.7",
+    "@radix-ui/react-dialog": "1.1.8-rc.1744259481941",
     "@radix-ui/react-primitive": "2.0.3",
     "@radix-ui/react-slot": "1.2.0"
   },
   "devDependencies": {
-    "@repo/eslint-config": "0.0.0",
-    "@repo/typescript-config": "0.0.0",
     "@types/react": "^19.0.7",
     "@types/react-dom": "^19.0.3",
     "eslint": "^9.18.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "typescript": "^5.7.3"
+    "typescript": "^5.7.3",
+    "@repo/eslint-config": "0.0.0",
+    "@repo/typescript-config": "0.0.0",
+    "@repo/builder": "0.0.0"
   },
   "peerDependencies": {
     "@types/react": "*",
@@ -72,6 +51,13 @@
   "bugs": {
     "url": "https://github.com/radix-ui/primitives/issues"
   },
+  "scripts": {
+    "lint": "eslint --max-warnings 0 src",
+    "clean": "rm -rf dist",
+    "typecheck": "tsc --noEmit",
+    "build": "radix-build"
+  },
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "import": {
@@ -83,6 +69,5 @@
         "default": "./dist/index.js"
       }
     }
-  },
-  "types": "./dist/index.d.ts"
+  }
 }

package/src/alert-dialog.test.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import { axe } from 'vitest-axe';
 import type { RenderResult } from '@testing-library/react';
-import { render, fireEvent } from '@testing-library/react';
-import * as AlertDialog from '@radix-ui/react-alert-dialog';
+import { cleanup, render, fireEvent } from '@testing-library/react';
+import * as AlertDialog from './alert-dialog';
+import { afterEach, describe, it, beforeEach, expect } from 'vitest';
 
 const OPEN_TEXT = 'Open';
 const CANCEL_TEXT = 'Cancel';
@@ -30,6 +31,8 @@ describe('given a default Dialog', () => {
   let trigger: HTMLElement;
   let cancelButton: HTMLElement;
 
+  afterEach(cleanup);
+
   beforeEach(() => {
     rendered = render(<DialogTest />);
     trigger = rendered.getByText(OPEN_TEXT);

package/src/alert-dialog.stories.module.css

@@ -1,78 +0,0 @@
-.trigger {
-}
-
-.overlay,
-.overlayAttr {
-  /* ensures overlay is positionned correctly */
-  position: fixed;
-  inset: 0;
-  /* --------- */
-  background-color: var(--gray-12);
-  opacity: 0.2;
-}
-
-.content,
-.chromaticContent,
-.contentAttr {
-  /* ensures good default position for content */
-  position: fixed;
-  top: 0;
-  left: 0;
-  /* --------- */
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  background: var(--gray-1);
-  min-width: 300px;
-  min-height: 150px;
-  padding: 50px;
-  border-radius: 10px;
-  background-color: var(--gray-1);
-  box-shadow: 0 2px 10px var(--black-a6);
-}
-
-.cancel,
-.action {
-  appearance: none;
-  padding: 10px;
-  border: none;
-}
-
-.cancel {
-  background: var(--gray-3);
-  color: var(--gray-12);
-}
-
-.action {
-  background: var(--red-9);
-  color: var(--gray-1);
-}
-
-.title {
-}
-
-.description {
-}
-
-.chromaticContent {
-  padding: 10px;
-  min-width: auto;
-  min-height: auto;
-}
-
-.triggerAttr .overlayAttr,
-.contentAttr,
-.cancelAttr,
-.actionAttr,
-.titleAttr,
-.descriptionAttr {
-  background-color: var(--blue-a12);
-  border: 2px solid var(--blue-9);
-  padding: 10px;
-  &[data-state='closed'] {
-    border-color: var(--red-9);
-  }
-  &[data-state='open'] {
-    border-color: var(--green-9);
-  }
-}

package/src/alert-dialog.stories.tsx

@@ -1,274 +0,0 @@
-import * as React from 'react';
-import * as AlertDialog from '@radix-ui/react-alert-dialog';
-import styles from './alert-dialog.stories.module.css';
-
-export default { title: 'Components/AlertDialog' };
-
-export const Styled = () => (
-  <AlertDialog.Root>
-    <AlertDialog.Trigger className={styles.trigger}>delete everything</AlertDialog.Trigger>
-    <AlertDialog.Portal>
-      <AlertDialog.Overlay className={styles.overlay} />
-      <AlertDialog.Content className={styles.content}>
-        <AlertDialog.Title className={styles.title}>Are you sure?</AlertDialog.Title>
-        <AlertDialog.Description className={styles.description}>
-          This will do a very dangerous thing. Thar be dragons!
-        </AlertDialog.Description>
-        <AlertDialog.Action className={styles.action}>yolo, do it</AlertDialog.Action>
-        <AlertDialog.Cancel className={styles.cancel}>maybe not</AlertDialog.Cancel>
-      </AlertDialog.Content>
-    </AlertDialog.Portal>
-  </AlertDialog.Root>
-);
-
-export const Controlled = () => {
-  const [open, setOpen] = React.useState(false);
-  const [housePurchased, setHousePurchased] = React.useState(false);
-
-  return (
-    <div>
-      <div>
-        <img src="https://i.ibb.co/K54hsKt/house.jpg" alt="a large white house with a red roof" />
-      </div>
-      <AlertDialog.Root open={open} onOpenChange={setOpen}>
-        <AlertDialog.Trigger
-          onClick={(e) => {
-            if (housePurchased) {
-              e.preventDefault();
-              setHousePurchased(false);
-            }
-          }}
-        >
-          {housePurchased ? 'You bought the house! Sell it!' : 'Buy this house'}
-        </AlertDialog.Trigger>
-        <AlertDialog.Portal>
-          <AlertDialog.Overlay className={styles.overlay} />
-          <AlertDialog.Content className={styles.content}>
-            <AlertDialog.Title>Are you sure?</AlertDialog.Title>
-            <AlertDialog.Description>
-              Houses are very expensive and it looks like you only have €20 in the bank. Maybe
-              consult with a financial advisor?
-            </AlertDialog.Description>
-            <AlertDialog.Action className={styles.action} onClick={() => setHousePurchased(true)}>
-              buy it anyway
-            </AlertDialog.Action>
-            <AlertDialog.Cancel className={styles.cancel}>
-              good point, I'll reconsider
-            </AlertDialog.Cancel>
-          </AlertDialog.Content>
-        </AlertDialog.Portal>
-      </AlertDialog.Root>
-    </div>
-  );
-};
-
-export const Chromatic = () => (
-  <div
-    style={{
-      display: 'grid',
-      gridTemplateColumns: 'repeat(4, 1fr)',
-      gridTemplateRows: 'repeat(2, 1fr)',
-      height: '100vh',
-    }}
-  >
-    <div>
-      <h1>Uncontrolled</h1>
-      <h2>Closed</h2>
-      <AlertDialog.Root>
-        <AlertDialog.Trigger className={styles.trigger}>delete everything</AlertDialog.Trigger>
-        <AlertDialog.Portal>
-          <AlertDialog.Overlay className={styles.overlay} />
-          <AlertDialog.Content className={styles.chromaticContent}>
-            <AlertDialog.Title className={styles.title}>Title</AlertDialog.Title>
-            <AlertDialog.Description className={styles.description}>
-              Description
-            </AlertDialog.Description>
-            <AlertDialog.Action className={styles.action}>Confirm</AlertDialog.Action>
-            <AlertDialog.Cancel className={styles.cancel}>Cancel</AlertDialog.Cancel>
-          </AlertDialog.Content>
-        </AlertDialog.Portal>
-      </AlertDialog.Root>
-
-      <h2>Open</h2>
-      <AlertDialog.Root defaultOpen>
-        <AlertDialog.Trigger className={styles.trigger}>delete everything</AlertDialog.Trigger>
-        <AlertDialog.Portal>
-          <AlertDialog.Overlay
-            className={styles.overlay}
-            style={{ left: 0, bottom: '50%', width: '25%' }}
-          />
-          <AlertDialog.Content
-            className={styles.chromaticContent}
-            style={{ top: '25%', left: '12%' }}
-          >
-            <AlertDialog.Title className={styles.title}>Title</AlertDialog.Title>
-            <AlertDialog.Description className={styles.description}>
-              Description
-            </AlertDialog.Description>
-            <AlertDialog.Action className={styles.action}>Confirm</AlertDialog.Action>
-            <AlertDialog.Cancel className={styles.cancel}>Cancel</AlertDialog.Cancel>
-          </AlertDialog.Content>
-        </AlertDialog.Portal>
-      </AlertDialog.Root>
-    </div>
-
-    <div>
-      <h1>Uncontrolled with reordered parts</h1>
-      <h2>Closed</h2>
-      <AlertDialog.Root>
-        <AlertDialog.Portal>
-          <AlertDialog.Overlay className={styles.overlay} />
-          <AlertDialog.Content className={styles.chromaticContent}>
-            <AlertDialog.Title className={styles.title}>Title</AlertDialog.Title>
-            <AlertDialog.Description className={styles.description}>
-              Description
-            </AlertDialog.Description>
-            <AlertDialog.Action className={styles.action}>Confirm</AlertDialog.Action>
-            <AlertDialog.Cancel className={styles.cancel}>Cancel</AlertDialog.Cancel>
-          </AlertDialog.Content>
-        </AlertDialog.Portal>
-        <AlertDialog.Trigger className={styles.trigger}>delete everything</AlertDialog.Trigger>
-      </AlertDialog.Root>
-
-      <h2>Open</h2>
-      <AlertDialog.Root defaultOpen>
-        <AlertDialog.Portal>
-          <AlertDialog.Overlay
-            className={styles.overlay}
-            style={{ left: '25%', bottom: '50%', width: '25%' }}
-          />
-          <AlertDialog.Content
-            className={styles.chromaticContent}
-            style={{ top: '25%', left: '37%' }}
-          >
-            <AlertDialog.Title className={styles.title}>Title</AlertDialog.Title>
-            <AlertDialog.Description className={styles.description}>
-              Description
-            </AlertDialog.Description>
-            <AlertDialog.Action className={styles.action}>Confirm</AlertDialog.Action>
-            <AlertDialog.Cancel className={styles.cancel}>Cancel</AlertDialog.Cancel>
-          </AlertDialog.Content>
-        </AlertDialog.Portal>
-        <AlertDialog.Trigger className={styles.trigger}>delete everything</AlertDialog.Trigger>
-      </AlertDialog.Root>
-    </div>
-
-    <div>
-      <h1>Controlled</h1>
-      <h2>Closed</h2>
-      <AlertDialog.Root open={false}>
-        <AlertDialog.Trigger className={styles.trigger}>delete everything</AlertDialog.Trigger>
-        <AlertDialog.Portal>
-          <AlertDialog.Overlay className={styles.overlay} />
-          <AlertDialog.Content className={styles.chromaticContent}>
-            <AlertDialog.Title className={styles.title}>Title</AlertDialog.Title>
-            <AlertDialog.Description className={styles.description}>
-              Description
-            </AlertDialog.Description>
-            <AlertDialog.Action className={styles.action}>Confirm</AlertDialog.Action>
-            <AlertDialog.Cancel className={styles.cancel}>Cancel</AlertDialog.Cancel>
-          </AlertDialog.Content>
-        </AlertDialog.Portal>
-      </AlertDialog.Root>
-
-      <h2>Open</h2>
-      <AlertDialog.Root open>
-        <AlertDialog.Trigger className={styles.trigger}>delete everything</AlertDialog.Trigger>
-        <AlertDialog.Portal>
-          <AlertDialog.Overlay
-            className={styles.overlay}
-            style={{ left: '50%', bottom: '50%', width: '25%' }}
-          />
-          <AlertDialog.Content
-            className={styles.chromaticContent}
-            style={{ top: '25%', left: '62%' }}
-          >
-            <AlertDialog.Title className={styles.title}>Title</AlertDialog.Title>
-            <AlertDialog.Description className={styles.description}>
-              Description
-            </AlertDialog.Description>
-            <AlertDialog.Action className={styles.action}>Confirm</AlertDialog.Action>
-            <AlertDialog.Cancel className={styles.cancel}>Cancel</AlertDialog.Cancel>
-          </AlertDialog.Content>
-        </AlertDialog.Portal>
-      </AlertDialog.Root>
-    </div>
-
-    <div>
-      <h1>Controlled with reordered parts</h1>
-      <h2>Closed</h2>
-      <AlertDialog.Root open={false}>
-        <AlertDialog.Portal>
-          <AlertDialog.Overlay className={styles.overlay} />
-          <AlertDialog.Content className={styles.chromaticContent}>
-            <AlertDialog.Title className={styles.title}>Title</AlertDialog.Title>
-            <AlertDialog.Description className={styles.description}>
-              Description
-            </AlertDialog.Description>
-            <AlertDialog.Action className={styles.action}>Confirm</AlertDialog.Action>
-            <AlertDialog.Cancel className={styles.cancel}>Cancel</AlertDialog.Cancel>
-          </AlertDialog.Content>
-        </AlertDialog.Portal>
-        <AlertDialog.Trigger className={styles.trigger}>delete everything</AlertDialog.Trigger>
-      </AlertDialog.Root>
-
-      <h2>Open</h2>
-      <AlertDialog.Root open>
-        <AlertDialog.Portal>
-          <AlertDialog.Overlay
-            className={styles.overlay}
-            style={{ left: '75%', bottom: '50%', width: '25%' }}
-          />
-          <AlertDialog.Content
-            className={styles.chromaticContent}
-            style={{ top: '25%', left: '88%' }}
-          >
-            <AlertDialog.Title className={styles.title}>Title</AlertDialog.Title>
-            <AlertDialog.Description className={styles.description}>
-              Description
-            </AlertDialog.Description>
-            <AlertDialog.Action className={styles.action}>Confirm</AlertDialog.Action>
-            <AlertDialog.Cancel className={styles.cancel}>Cancel</AlertDialog.Cancel>
-          </AlertDialog.Content>
-        </AlertDialog.Portal>
-        <AlertDialog.Trigger className={styles.trigger}>delete everything</AlertDialog.Trigger>
-      </AlertDialog.Root>
-    </div>
-
-    <div>
-      <h1>State attributes</h1>
-      <h2>Closed</h2>
-      <AlertDialog.Root>
-        <AlertDialog.Trigger className={styles.triggerAttr}>delete everything</AlertDialog.Trigger>
-        <AlertDialog.Portal>
-          <AlertDialog.Overlay className={styles.overlayAttr} />
-          <AlertDialog.Content className={styles.contentAttr}>
-            <AlertDialog.Title className={styles.titleAttr}>Title</AlertDialog.Title>
-            <AlertDialog.Description className={styles.descriptionAttr}>
-              Description
-            </AlertDialog.Description>
-            <AlertDialog.Action className={styles.actionAttr}>Confirm</AlertDialog.Action>
-            <AlertDialog.Cancel className={styles.cancelAttr}>Cancel</AlertDialog.Cancel>
-          </AlertDialog.Content>
-        </AlertDialog.Portal>
-      </AlertDialog.Root>
-
-      <h2>Open</h2>
-      <AlertDialog.Root defaultOpen>
-        <AlertDialog.Trigger className={styles.triggerAttr}>delete everything</AlertDialog.Trigger>
-        <AlertDialog.Portal>
-          <AlertDialog.Overlay className={styles.overlayAttr} style={{ top: '50%' }} />
-          <AlertDialog.Content className={styles.contentAttr} style={{ top: '75%' }}>
-            <AlertDialog.Title className={styles.titleAttr}>Title</AlertDialog.Title>
-            <AlertDialog.Description className={styles.descriptionAttr}>
-              Description
-            </AlertDialog.Description>
-            <AlertDialog.Action className={styles.actionAttr}>Confirm</AlertDialog.Action>
-            <AlertDialog.Cancel className={styles.cancelAttr}>Cancel</AlertDialog.Cancel>
-          </AlertDialog.Content>
-        </AlertDialog.Portal>
-      </AlertDialog.Root>
-    </div>
-  </div>
-);
-Chromatic.parameters = { chromatic: { disable: false } };