@synerise/ds-confirmation 1.3.9 → 1.3.11
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/CHANGELOG.md +8 -0
- package/CLAUDE.md +175 -0
- package/package.json +12 -11
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,14 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [1.3.11](https://github.com/Synerise/synerise-design/compare/@synerise/ds-confirmation@1.3.10...@synerise/ds-confirmation@1.3.11) (2026-07-24)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @synerise/ds-confirmation
|
|
9
|
+
|
|
10
|
+
## [1.3.10](https://github.com/Synerise/synerise-design/compare/@synerise/ds-confirmation@1.3.9...@synerise/ds-confirmation@1.3.10) (2026-07-23)
|
|
11
|
+
|
|
12
|
+
**Note:** Version bump only for package @synerise/ds-confirmation
|
|
13
|
+
|
|
6
14
|
## [1.3.9](https://github.com/Synerise/synerise-design/compare/@synerise/ds-confirmation@1.3.8...@synerise/ds-confirmation@1.3.9) (2026-07-16)
|
|
7
15
|
|
|
8
16
|
**Note:** Version bump only for package @synerise/ds-confirmation
|
package/CLAUDE.md
ADDED
|
@@ -0,0 +1,175 @@
|
|
|
1
|
+
# Confirmation (`@synerise/ds-confirmation`)
|
|
2
|
+
|
|
3
|
+
> A modal-based confirmation dialog with icon, type-coloured actions, and optional batch/decision/related-objects views.
|
|
4
|
+
|
|
5
|
+
## Package structure
|
|
6
|
+
|
|
7
|
+
```
|
|
8
|
+
src/
|
|
9
|
+
Confirmation.tsx — main component (generic over ListItemProps)
|
|
10
|
+
Confirmation.types.ts — all prop interfaces and shared types
|
|
11
|
+
Confirmation.styles.ts — styled-components (no hardcoded tokens — uses ds-core palette via useTheme)
|
|
12
|
+
Confirmation.const.ts — BUTTON_COLOR_MAPPING, ICON_COLOR_MAPPING, ITEM_SIZE, MAX_ITEMS
|
|
13
|
+
Confirmation.utils.ts — getIconColor(type, theme) helper
|
|
14
|
+
index.ts — public exports
|
|
15
|
+
components/
|
|
16
|
+
Prompt.tsx — simpler modal variant with free-form content
|
|
17
|
+
BatchItemsList.tsx — scrollable list of affected items (batch actions)
|
|
18
|
+
DecisionSection.tsx — radio group for action choice
|
|
19
|
+
hooks/
|
|
20
|
+
useDefaultTexts.tsx — merges caller-supplied texts with react-intl defaults
|
|
21
|
+
__specs__/
|
|
22
|
+
Confirmation.spec.tsx
|
|
23
|
+
Prompt.spec.tsx
|
|
24
|
+
testData.ts
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
## Public exports
|
|
28
|
+
|
|
29
|
+
### `Confirmation` (default export)
|
|
30
|
+
|
|
31
|
+
Generic component: `Confirmation<ItemType extends ListItemProps>`. No `forwardRef`.
|
|
32
|
+
|
|
33
|
+
**Inherited from `SharedProps` (via `ModalProps` pick):**
|
|
34
|
+
|
|
35
|
+
| Prop | Type | Default | Description |
|
|
36
|
+
|------|------|---------|-------------|
|
|
37
|
+
| `open` | `boolean` | — | Controls modal visibility |
|
|
38
|
+
| `title` | `ReactNode` | — | Modal title (overridden internally when `mode === 'related-objects'`) |
|
|
39
|
+
| `zIndex` | `number` | — | CSS z-index of the modal |
|
|
40
|
+
| `onCancel` | `(e) => void` | — | Cancel / close handler |
|
|
41
|
+
| `onOk` | `(e) => void` | — | Confirm handler |
|
|
42
|
+
| `type` | `ConfirmationType` | — | **Required.** Controls button and icon colour |
|
|
43
|
+
| `texts` | `Partial<ConfirmationTexts>` | — | Override any default label strings |
|
|
44
|
+
| `mainButtonProps` | `ConfirmationButtonProps` | — | Extra props for the confirm button |
|
|
45
|
+
| `secondaryButtonProps` | `ConfirmationButtonProps` | — | Extra props for the cancel button |
|
|
46
|
+
|
|
47
|
+
**Own props:**
|
|
48
|
+
|
|
49
|
+
| Prop | Type | Default | Description |
|
|
50
|
+
|------|------|---------|-------------|
|
|
51
|
+
| `icon` | `ReactNode` | — | **Required.** Icon rendered at size 96 above the title |
|
|
52
|
+
| `description` | `ReactNode` | — | Paragraph below the title |
|
|
53
|
+
| `relatedObjects` | `ReactNode` | — | If provided, adds a "Show related objects" footer button that switches the modal to a full-content view |
|
|
54
|
+
| `batchActionItems` | `ItemType[]` | — | Renders `BatchItemsList` — a scrollable panel of affected items |
|
|
55
|
+
| `decisionOptions` | `RadioProps[]` | — | Renders `DecisionSection` — a radio group for choosing an action |
|
|
56
|
+
| `additionalInfo` | `ReactNode` | — | Extra content in a rounded `Panel` frame, shown below description |
|
|
57
|
+
| `customFooterComponent` | `ReactNode` | — | Additional footer content placed in the left slot |
|
|
58
|
+
|
|
59
|
+
### `Prompt`
|
|
60
|
+
|
|
61
|
+
Simpler variant — a small modal with free-form `content` and the same typed buttons. Uses the same `SharedProps` base.
|
|
62
|
+
|
|
63
|
+
| Prop | Type | Default | Description |
|
|
64
|
+
|------|------|---------|-------------|
|
|
65
|
+
| `open` | `boolean` | — | Controls modal visibility |
|
|
66
|
+
| `title` | `ReactNode` | — | Modal title |
|
|
67
|
+
| `zIndex` | `number` | — | CSS z-index |
|
|
68
|
+
| `onCancel` | `(e) => void` | — | Cancel handler |
|
|
69
|
+
| `onOk` | `(e) => void` | — | Confirm handler |
|
|
70
|
+
| `type` | `ConfirmationType` | — | **Required.** Controls button colour |
|
|
71
|
+
| `texts` | `Partial<ConfirmationTexts>` | — | Override default labels |
|
|
72
|
+
| `mainButtonProps` | `ConfirmationButtonProps` | — | Extra props for the confirm button |
|
|
73
|
+
| `secondaryButtonProps` | `ConfirmationButtonProps` | — | Extra props for the cancel button |
|
|
74
|
+
| `content` | `ReactNode` | — | Modal body content |
|
|
75
|
+
|
|
76
|
+
### `ConfirmationTexts` (type)
|
|
77
|
+
|
|
78
|
+
| Key | Default (react-intl) |
|
|
79
|
+
|-----|----------------------|
|
|
80
|
+
| `mainButtonLabel` | `"Ok"` |
|
|
81
|
+
| `secondaryButtonLabel` | `"Cancel"` |
|
|
82
|
+
| `relatedObjectsButtonLabel` | `"Show related objects"` |
|
|
83
|
+
| `relatedObjectsTitle` | `"Related objects"` |
|
|
84
|
+
| `batchActionItemsTitle` | `"Objects to delete"` |
|
|
85
|
+
| `decisionTitle` | `"What do you want to do?"` |
|
|
86
|
+
|
|
87
|
+
### `ConfirmationType` (type)
|
|
88
|
+
|
|
89
|
+
`'success' | 'warning' | 'negative' | 'informative'`
|
|
90
|
+
|
|
91
|
+
### `ConfirmationProps`, `PromptProps` (types)
|
|
92
|
+
|
|
93
|
+
Also exported for consumer typing.
|
|
94
|
+
|
|
95
|
+
## Usage patterns
|
|
96
|
+
|
|
97
|
+
```tsx
|
|
98
|
+
import Confirmation, { Prompt } from '@synerise/ds-confirmation';
|
|
99
|
+
import { TrashM } from '@synerise/ds-icon';
|
|
100
|
+
|
|
101
|
+
// Basic confirmation
|
|
102
|
+
<Confirmation
|
|
103
|
+
open={isOpen}
|
|
104
|
+
type="negative"
|
|
105
|
+
icon={<TrashM />}
|
|
106
|
+
title="Delete item?"
|
|
107
|
+
description="This action cannot be undone."
|
|
108
|
+
onOk={handleDelete}
|
|
109
|
+
onCancel={() => setOpen(false)}
|
|
110
|
+
/>
|
|
111
|
+
|
|
112
|
+
// With batch items and custom labels
|
|
113
|
+
<Confirmation
|
|
114
|
+
open={isOpen}
|
|
115
|
+
type="warning"
|
|
116
|
+
icon={<TrashM />}
|
|
117
|
+
title="Delete 3 items?"
|
|
118
|
+
batchActionItems={selectedItems}
|
|
119
|
+
texts={{ mainButtonLabel: 'Delete all' }}
|
|
120
|
+
onOk={handleDelete}
|
|
121
|
+
onCancel={handleClose}
|
|
122
|
+
/>
|
|
123
|
+
|
|
124
|
+
// Prompt variant
|
|
125
|
+
<Prompt
|
|
126
|
+
open={isOpen}
|
|
127
|
+
type="informative"
|
|
128
|
+
title="Rename segment"
|
|
129
|
+
content={<Input value={name} onChange={setName} />}
|
|
130
|
+
onOk={handleSave}
|
|
131
|
+
onCancel={handleClose}
|
|
132
|
+
/>
|
|
133
|
+
```
|
|
134
|
+
|
|
135
|
+
## Internal display modes
|
|
136
|
+
|
|
137
|
+
`Confirmation` tracks a `DisplayMode` state (`'default' | 'related-objects'`). When `relatedObjects` is provided:
|
|
138
|
+
- The footer renders a "Show related objects" ghost button (left slot).
|
|
139
|
+
- Clicking it switches to `'related-objects'` mode, replacing the modal body with the `relatedObjects` ReactNode and the modal title with a back-arrow + `relatedObjectsTitle`.
|
|
140
|
+
- The footer is hidden in `'related-objects'` mode.
|
|
141
|
+
|
|
142
|
+
The title prop is **ignored** in `'related-objects'` mode — the internal back-navigation title is used instead.
|
|
143
|
+
|
|
144
|
+
## Styling
|
|
145
|
+
|
|
146
|
+
Styles live in `Confirmation.styles.ts`. Colours are resolved at runtime via `useTheme()` from `@synerise/ds-core` — icon colour is looked up from `theme.palette[colorToken]`, not hardcoded. The modal always renders at `size="small"` with `blank={true}` (no default modal padding) in default mode.
|
|
147
|
+
|
|
148
|
+
`BatchItemsList` is capped at `MAX_ITEMS × ITEM_SIZE` (6 × 32 = 192px) height via `@synerise/ds-scrollbar`.
|
|
149
|
+
|
|
150
|
+
`DecisionSection` overrides internal Radio styles directly by targeting `RadioWrapper` and `AdditionalData` from `@synerise/ds-radio/dist/Radio.styles` — this is a private import and may break on radio package updates.
|
|
151
|
+
|
|
152
|
+
## Custom hooks
|
|
153
|
+
|
|
154
|
+
### `useDefaultTexts`
|
|
155
|
+
|
|
156
|
+
Merges `Partial<ConfirmationTexts>` supplied by the caller with `react-intl` `<FormattedMessage>` defaults. All six text keys always resolve to a value. Requires `react-intl`'s `IntlProvider` to be present in the tree for i18n to work; falls back to the `defaultMessage` strings otherwise.
|
|
157
|
+
|
|
158
|
+
## Key dependencies
|
|
159
|
+
|
|
160
|
+
- `@synerise/ds-modal` — wraps `Modal` as the base dialog
|
|
161
|
+
- `@synerise/ds-button` — confirm and cancel actions
|
|
162
|
+
- `@synerise/ds-radio` — `DecisionSection` radio group (also imports private `.styles` path)
|
|
163
|
+
- `@synerise/ds-list-item` — `BatchItemsList` items; generic `ItemType extends ListItemProps`
|
|
164
|
+
- `@synerise/ds-scrollbar` — caps `BatchItemsList` height
|
|
165
|
+
- `@synerise/ds-panel` — `AdditionalInfo` and `DecisionSection` frames
|
|
166
|
+
- `@synerise/ds-core` — `useTheme` for palette-based icon colour resolution
|
|
167
|
+
- `react-intl` — default label strings (peer dependency, `^6.8.7`)
|
|
168
|
+
|
|
169
|
+
## Implementation notes
|
|
170
|
+
|
|
171
|
+
- The component is **generic** (`Confirmation<ItemType extends ListItemProps>`). TypeScript inference works without an explicit type parameter when `batchActionItems` is passed.
|
|
172
|
+
- All modal content and footer are wrapped in `useMemo` — dependencies must be kept in sync to avoid stale renders.
|
|
173
|
+
- `bodyStyle={{ padding: 0 }}` is hardcoded — content components own their own padding via styled-components.
|
|
174
|
+
- `onOk` and `onCancel` are **optional**; the footer renders conditionally only when at least one is provided (or `relatedObjects` is set).
|
|
175
|
+
- `ConfirmationButtonProps` is a limited subset of `ButtonProps` (`mode`, `loading`, `readOnly`, `disabled`, `tagProps`) plus `DataAttributes` — arbitrary button props cannot be passed through.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@synerise/ds-confirmation",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.11",
|
|
4
4
|
"description": "Confirmation UI Component for the Synerise Design System",
|
|
5
5
|
"license": "ISC",
|
|
6
6
|
"repository": "Synerise/synerise-design",
|
|
@@ -17,6 +17,7 @@
|
|
|
17
17
|
"files": [
|
|
18
18
|
"/dist",
|
|
19
19
|
"CHANGELOG.md",
|
|
20
|
+
"CLAUDE.md",
|
|
20
21
|
"README.md",
|
|
21
22
|
"package.json",
|
|
22
23
|
"LICENSE.md"
|
|
@@ -41,15 +42,15 @@
|
|
|
41
42
|
],
|
|
42
43
|
"types": "dist/index.d.ts",
|
|
43
44
|
"dependencies": {
|
|
44
|
-
"@synerise/ds-button": "^1.5.
|
|
45
|
-
"@synerise/ds-icon": "^1.18.
|
|
46
|
-
"@synerise/ds-list-item": "^1.6.
|
|
47
|
-
"@synerise/ds-modal": "^1.6.
|
|
48
|
-
"@synerise/ds-panel": "^1.2.
|
|
49
|
-
"@synerise/ds-radio": "^1.1.
|
|
50
|
-
"@synerise/ds-scrollbar": "^1.5.
|
|
51
|
-
"@synerise/ds-typography": "^1.1.
|
|
52
|
-
"@synerise/ds-utils": "^1.10.
|
|
45
|
+
"@synerise/ds-button": "^1.5.35",
|
|
46
|
+
"@synerise/ds-icon": "^1.18.5",
|
|
47
|
+
"@synerise/ds-list-item": "^1.6.2",
|
|
48
|
+
"@synerise/ds-modal": "^1.6.7",
|
|
49
|
+
"@synerise/ds-panel": "^1.2.17",
|
|
50
|
+
"@synerise/ds-radio": "^1.1.18",
|
|
51
|
+
"@synerise/ds-scrollbar": "^1.5.2",
|
|
52
|
+
"@synerise/ds-typography": "^1.1.27",
|
|
53
|
+
"@synerise/ds-utils": "^1.10.2"
|
|
53
54
|
},
|
|
54
55
|
"peerDependencies": {
|
|
55
56
|
"@synerise/ds-core": "*",
|
|
@@ -58,5 +59,5 @@
|
|
|
58
59
|
"styled-components": "^5.3.3",
|
|
59
60
|
"vitest": "4"
|
|
60
61
|
},
|
|
61
|
-
"gitHead": "
|
|
62
|
+
"gitHead": "018414e0d7ffd102a07f8aa35fa2e2d3d4ed19e2"
|
|
62
63
|
}
|