@synerise/ds-list 1.1.41 → 1.1.42
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 +4 -0
- package/CLAUDE.md +151 -0
- package/package.json +6 -5
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,10 @@
|
|
|
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.1.42](https://github.com/Synerise/synerise-design/compare/@synerise/ds-list@1.1.41...@synerise/ds-list@1.1.42) (2026-07-23)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @synerise/ds-list
|
|
9
|
+
|
|
6
10
|
## [1.1.41](https://github.com/Synerise/synerise-design/compare/@synerise/ds-list@1.1.40...@synerise/ds-list@1.1.41) (2026-06-27)
|
|
7
11
|
|
|
8
12
|
**Note:** Version bump only for package @synerise/ds-list
|
package/CLAUDE.md
ADDED
|
@@ -0,0 +1,151 @@
|
|
|
1
|
+
# List (`@synerise/ds-list`)
|
|
2
|
+
> A generic list component built on Ant Design's List, supporting nested/sectioned data sources, optional radio group wrapping, and styled sub-components for text items, item wrappers, and dividers.
|
|
3
|
+
|
|
4
|
+
## Package structure
|
|
5
|
+
```
|
|
6
|
+
src/
|
|
7
|
+
List.tsx — class component (PureComponent), renders flat or nested (sectioned) AntdList
|
|
8
|
+
List.types.ts — ListPropsType<T> type definition
|
|
9
|
+
index.ts — public entry point
|
|
10
|
+
modules.d.ts — CSS/Less module declarations
|
|
11
|
+
Elements/
|
|
12
|
+
index.ts — re-exports TextItem, ItemWrapper, ListDivider
|
|
13
|
+
Text/
|
|
14
|
+
Text.tsx — List.Item styled <li> with icon, actions, size, disabled, danger support
|
|
15
|
+
Text.styles.ts — styled-components for Text; defines ListItemType union
|
|
16
|
+
ItemWrapper/
|
|
17
|
+
ItemWrapper.tsx — generic padded wrapper div for arbitrary list row content
|
|
18
|
+
ItemWrapper.styles.ts — styled-components for ItemWrapper
|
|
19
|
+
Divider/
|
|
20
|
+
Divider.tsx — thin wrapper around @synerise/ds-divider with horizontal padding
|
|
21
|
+
Divider.styles.ts — styled-components for Divider
|
|
22
|
+
style/
|
|
23
|
+
index.less — Less entry point (imported via side-effect in List.tsx)
|
|
24
|
+
list.mixin.less — Less mixins for list styles
|
|
25
|
+
__spec__/
|
|
26
|
+
List.spec.tsx — Vitest tests
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
## Public exports
|
|
30
|
+
|
|
31
|
+
```ts
|
|
32
|
+
export { default } from './List'; // List class component (default)
|
|
33
|
+
export type { ListPropsType } from './List.types';
|
|
34
|
+
export type { TextProps } from './Elements/Text/Text';
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
### Static sub-components on `List`
|
|
38
|
+
| Name | Component | Description |
|
|
39
|
+
|------|-----------|-------------|
|
|
40
|
+
| `List.Item` | `TextItem` | Styled `<li>` for text-based rows |
|
|
41
|
+
| `List.ItemWrapper` | `ItemWrapper` | Padded `<div>` wrapper for arbitrary row content (e.g. checkboxes, switches) |
|
|
42
|
+
| `List.Divider` | `ListDivider` | Horizontal rule between sections |
|
|
43
|
+
|
|
44
|
+
---
|
|
45
|
+
|
|
46
|
+
### `List<T>` (default export)
|
|
47
|
+
|
|
48
|
+
Extends Ant Design `ListProps<T>` — omits `dataSource` and `footer`, adds:
|
|
49
|
+
|
|
50
|
+
| Prop | Type | Default | Description |
|
|
51
|
+
|------|------|---------|-------------|
|
|
52
|
+
| `dataSource` | `T[] \| T[][]` | — | Flat array OR nested array of arrays. A nested array renders multiple `AntdList` sections separated by `ListDivider`. Only the first section renders the `header`. |
|
|
53
|
+
| `radio` | `boolean` | `undefined` | Wraps the entire rendered list in `Radio.Group` |
|
|
54
|
+
| `options` | `RadioGroupProps` | `undefined` | Props forwarded to the `Radio.Group` wrapper; only used when `radio` is `true` |
|
|
55
|
+
| `dashed` | `boolean` | `undefined` | Controls the dashed style of the auto-rendered `ListDivider` between sections. Note: `ListDivider` defaults `dashed` to `true` when not supplied |
|
|
56
|
+
|
|
57
|
+
All other `ListProps<T>` from antd (e.g. `bordered`, `header`, `renderItem`, `split`, `grid`, `pagination`, `loading`, `loadMore`, `locale`, `rowKey`, `itemLayout`) are forwarded directly to `AntdList`.
|
|
58
|
+
|
|
59
|
+
---
|
|
60
|
+
|
|
61
|
+
### `List.Item` / `TextItem`
|
|
62
|
+
|
|
63
|
+
Exported type: `TextProps`
|
|
64
|
+
|
|
65
|
+
| Prop | Type | Default | Description |
|
|
66
|
+
|------|------|---------|-------------|
|
|
67
|
+
| `disabled` | `boolean` | `undefined` | Reduces opacity to 0.4, sets `cursor: not-allowed`, removes tabIndex |
|
|
68
|
+
| `icon` | `JSX.Element` | `undefined` | Rendered in `IconWrapper` before content; adjusts `ContentWrapper` left padding |
|
|
69
|
+
| `danger` | `boolean` | `undefined` | Colors text and icon `red-600`; hover background becomes `red-050` |
|
|
70
|
+
| `actions` | `ReactNode` | `undefined` | Rendered at the end of the row in a flex-1 container |
|
|
71
|
+
| `onSelect` | `(e?: MouseEvent \| KeyboardEvent) => void` | `undefined` | Called on click and on `Space` keyup |
|
|
72
|
+
| `size` | `'small' \| 'medium'` | `'small'` | `small`: padding `5px 12px 4px 7px`; `medium`: padding `12px` (left `12px` with icon, `16px` without) |
|
|
73
|
+
| `..htmlAttributes` | `HTMLLIElement attrs` | — | Spread onto the `<li>` element via `WithHTMLAttributes` |
|
|
74
|
+
|
|
75
|
+
---
|
|
76
|
+
|
|
77
|
+
### `List.Divider` / `ListDivider`
|
|
78
|
+
|
|
79
|
+
| Prop | Type | Default | Description |
|
|
80
|
+
|------|------|---------|-------------|
|
|
81
|
+
| `dashed` | `boolean` | `true` | Passed to `@synerise/ds-divider`. The divider is always rendered with `marginTop={8}` and `marginBottom={8}`. |
|
|
82
|
+
|
|
83
|
+
---
|
|
84
|
+
|
|
85
|
+
### `List.ItemWrapper` / `ItemWrapper`
|
|
86
|
+
|
|
87
|
+
| Prop | Type | Default | Description |
|
|
88
|
+
|------|------|---------|-------------|
|
|
89
|
+
| `children` | `ReactNode` | `undefined` | Wrapped in a `div` with `padding: 8px 12px` |
|
|
90
|
+
|
|
91
|
+
---
|
|
92
|
+
|
|
93
|
+
## Usage patterns
|
|
94
|
+
|
|
95
|
+
```tsx
|
|
96
|
+
import List from '@synerise/ds-list';
|
|
97
|
+
|
|
98
|
+
// Flat single-section list
|
|
99
|
+
<List
|
|
100
|
+
header="Folders"
|
|
101
|
+
dataSource={[{ text: 'Item 1' }]}
|
|
102
|
+
renderItem={(item) => (
|
|
103
|
+
<List.Item size="medium" icon={<Icon component={<FileM />} />} onSelect={() => {}}>
|
|
104
|
+
{item.text}
|
|
105
|
+
</List.Item>
|
|
106
|
+
)}
|
|
107
|
+
/>
|
|
108
|
+
|
|
109
|
+
// Nested (multi-section) list — sections are separated by a ListDivider
|
|
110
|
+
<List
|
|
111
|
+
header="Sections"
|
|
112
|
+
dataSource={[[{ text: 'A' }], [{ text: 'B' }]]}
|
|
113
|
+
dashed={false}
|
|
114
|
+
renderItem={(item) => <List.Item>{item.text}</List.Item>}
|
|
115
|
+
/>
|
|
116
|
+
|
|
117
|
+
// With radio group
|
|
118
|
+
<List
|
|
119
|
+
dataSource={[[{ value: 'a', label: 'Option A' }]]}
|
|
120
|
+
radio
|
|
121
|
+
options={{ defaultValue: 'a' }}
|
|
122
|
+
renderItem={(item) => (
|
|
123
|
+
<List.ItemWrapper>
|
|
124
|
+
<Radio value={item.value}>{item.label}</Radio>
|
|
125
|
+
</List.ItemWrapper>
|
|
126
|
+
)}
|
|
127
|
+
/>
|
|
128
|
+
|
|
129
|
+
// Standalone divider (e.g. between two separate List instances)
|
|
130
|
+
<List.Divider />
|
|
131
|
+
<List.Divider dashed={false} />
|
|
132
|
+
```
|
|
133
|
+
|
|
134
|
+
## Implementation notes
|
|
135
|
+
|
|
136
|
+
- `List` is a **class component** (`React.PureComponent`) — not a functional component. A stable `uuid` key is generated in the constructor for the single-section render path.
|
|
137
|
+
- **Nested detection:** `isNestedArray` (also a named export from `./List`) checks `array[0] instanceof Array`. An array of arrays is rendered as multiple `AntdList` instances; subsequent sections have `header` forced to `null`.
|
|
138
|
+
- **`footer` is omitted** from `ListPropsType` — it cannot be passed to `List`.
|
|
139
|
+
- `List.Item` spreads all extra props onto the underlying `<li>` via `WithHTMLAttributes<HTMLLIElement, ..>`.
|
|
140
|
+
- The `ListDivider` wrapping `div` has `padding: 0 20px` to inset the rule; the `ItemWrapper` `div` has `padding: 8px 12px`.
|
|
141
|
+
- Tests use **Jest** (not Vitest) — see `jest.config.js`.
|
|
142
|
+
|
|
143
|
+
## Key dependencies
|
|
144
|
+
|
|
145
|
+
| Package | Role |
|
|
146
|
+
|---------|------|
|
|
147
|
+
| `antd` (peer) | `AntdList`, `RadioGroupProps` base types |
|
|
148
|
+
| `@synerise/ds-radio` | `Radio.Group` wrapping when `radio` is `true` |
|
|
149
|
+
| `@synerise/ds-divider` | Underlying divider in `ListDivider` |
|
|
150
|
+
| `@synerise/ds-utils` | `WithHTMLAttributes` utility type |
|
|
151
|
+
| `uuid` | Stable + per-render keys for `React.Fragment` nodes |
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@synerise/ds-list",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.42",
|
|
4
4
|
"description": "List 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,9 +42,9 @@
|
|
|
41
42
|
],
|
|
42
43
|
"types": "dist/index.d.ts",
|
|
43
44
|
"dependencies": {
|
|
44
|
-
"@synerise/ds-divider": "^1.3.
|
|
45
|
-
"@synerise/ds-radio": "^1.1.
|
|
46
|
-
"@synerise/ds-utils": "^1.10.
|
|
45
|
+
"@synerise/ds-divider": "^1.3.16",
|
|
46
|
+
"@synerise/ds-radio": "^1.1.18",
|
|
47
|
+
"@synerise/ds-utils": "^1.10.2",
|
|
47
48
|
"uuid": "^8.3.2"
|
|
48
49
|
},
|
|
49
50
|
"peerDependencies": {
|
|
@@ -53,5 +54,5 @@
|
|
|
53
54
|
"styled-components": "^5.3.3",
|
|
54
55
|
"vitest": "4"
|
|
55
56
|
},
|
|
56
|
-
"gitHead": "
|
|
57
|
+
"gitHead": "d0a43cc43d8528a36f105aceea52ab470edb71d9"
|
|
57
58
|
}
|