@adamosuiteservices/ui 2.20.1 → 2.20.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/dialog.cjs +2 -2
- package/dist/dialog.js +2 -2
- package/dist/full-screen-loader.cjs +3 -3
- package/dist/full-screen-loader.js +9 -9
- package/dist/styles.css +1 -1
- package/docs/components/layout/full-screen-loader.md +8 -1
- package/docs/components/ui/dialog.md +28 -3
- package/package.json +1 -1
|
@@ -13,7 +13,7 @@ A **full-screen loading overlay** that blocks user interaction during asynchrono
|
|
|
13
13
|
- ✅ Observable pattern for global state synchronization
|
|
14
14
|
- ✅ High z-index for optimal layering (`z-100`)
|
|
15
15
|
- ✅ Automatic spinner centering
|
|
16
|
-
- ✅ Blocks user interaction during loading
|
|
16
|
+
- ✅ Blocks user interaction during loading, including inside an already-open `Dialog`/`Sheet`
|
|
17
17
|
|
|
18
18
|
## Import
|
|
19
19
|
|
|
@@ -223,6 +223,7 @@ The loader uses an observable pattern that synchronizes state across the entire
|
|
|
223
223
|
- **z-index**: `z-100` to be above all content
|
|
224
224
|
- **Positioning**: `fixed` with `inset-0` (covers entire viewport)
|
|
225
225
|
- **Centering**: Flexbox with `items-center` and `justify-center`
|
|
226
|
+
- **`pointer-events: auto`**: explicitly set so the overlay stays interactive (and therefore keeps blocking clicks) even when it renders while a Radix modal (`Dialog`, `Sheet`, ...) is open. Radix sets `pointer-events: none` on `<body>` while a modal is open and only re-enables `pointer-events: auto` on its own content — without this override, the loader would silently stop intercepting clicks in that case.
|
|
226
227
|
|
|
227
228
|
### Visual styles
|
|
228
229
|
|
|
@@ -378,6 +379,12 @@ try {
|
|
|
378
379
|
|
|
379
380
|
**Solution**: The loader uses `z-100`. Verify that no element has a higher z-index. If necessary, adjust the loader's z-index.
|
|
380
381
|
|
|
382
|
+
### Elements stay clickable through the loader while a `Dialog`/`Sheet` is open
|
|
383
|
+
|
|
384
|
+
**Cause**: A custom `className` overrode the loader's `pointer-events-auto`, or the loader is nested inside another element that sets `pointer-events: none`. When a Radix modal is open it sets `pointer-events: none` on `<body>`, so anything that doesn't explicitly re-enable `pointer-events: auto` becomes unclickable — including the loader itself, which then stops intercepting clicks.
|
|
385
|
+
|
|
386
|
+
**Solution**: Don't remove `pointer-events-auto` from the loader's className, and don't wrap `<FullScreenLoader />` in an element with `pointer-events: none`.
|
|
387
|
+
|
|
381
388
|
### Multiple loaders appear simultaneously
|
|
382
389
|
|
|
383
390
|
**Cause**: Multiple instances of `<FullScreenLoader />` in the application.
|
|
@@ -96,8 +96,8 @@ import {
|
|
|
96
96
|
| ----------- | -------- | ---------------------- |
|
|
97
97
|
| `className` | `string` | Additional CSS classes |
|
|
98
98
|
|
|
99
|
-
**Styles**: `mt-4
|
|
100
|
-
**Purpose**: Container for main dialog content between header and footer.
|
|
99
|
+
**Styles**: `mt-4`
|
|
100
|
+
**Purpose**: Container for main dialog content between header and footer. Adds spacing after the header; spacing before the footer is provided by `DialogFooter` itself, so it stays consistent whether or not `DialogBody` is used.
|
|
101
101
|
|
|
102
102
|
### DialogHeader
|
|
103
103
|
|
|
@@ -113,7 +113,8 @@ import {
|
|
|
113
113
|
| ----------- | -------- | ---------------------- |
|
|
114
114
|
| `className` | `string` | Additional CSS classes |
|
|
115
115
|
|
|
116
|
-
**Styles**: `flex gap-6`, `sm:flex-row sm:justify-start`
|
|
116
|
+
**Styles**: `mt-10 flex gap-6`, `sm:flex-row sm:justify-start`
|
|
117
|
+
**Purpose**: Always provides top spacing before the actions, regardless of whether the preceding sibling is `DialogHeader` or `DialogBody`. This keeps dialogs without a body visually consistent with those that have one.
|
|
117
118
|
|
|
118
119
|
### DialogClose
|
|
119
120
|
|
|
@@ -140,6 +141,30 @@ import {
|
|
|
140
141
|
</Dialog>
|
|
141
142
|
```
|
|
142
143
|
|
|
144
|
+
### Header and footer only (no DialogBody)
|
|
145
|
+
|
|
146
|
+
```tsx
|
|
147
|
+
<Dialog>
|
|
148
|
+
<DialogTrigger asChild>
|
|
149
|
+
<Button variant="outline">Sign out</Button>
|
|
150
|
+
</DialogTrigger>
|
|
151
|
+
<DialogContent>
|
|
152
|
+
<DialogHeader>
|
|
153
|
+
<DialogTitle>Sign out</DialogTitle>
|
|
154
|
+
<DialogDescription>Are you sure you want to sign out?</DialogDescription>
|
|
155
|
+
</DialogHeader>
|
|
156
|
+
<DialogFooter>
|
|
157
|
+
<DialogClose asChild>
|
|
158
|
+
<Button variant="secondary">Cancel</Button>
|
|
159
|
+
</DialogClose>
|
|
160
|
+
<Button>Sign out</Button>
|
|
161
|
+
</DialogFooter>
|
|
162
|
+
</DialogContent>
|
|
163
|
+
</Dialog>;
|
|
164
|
+
```
|
|
165
|
+
|
|
166
|
+
`DialogBody` is optional — confirmation dialogs with nothing to show between the description and the actions can skip it entirely. `DialogFooter` provides its own top spacing, so the footer stays at the same distance from whatever precedes it, whether that's `DialogHeader` or `DialogBody`.
|
|
167
|
+
|
|
143
168
|
### With custom trigger (asChild)
|
|
144
169
|
|
|
145
170
|
```tsx
|