@synerise/ds-ordered-list 1.1.38 → 1.1.39
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 +94 -0
- package/README.md +24 -9
- package/package.json +4 -4
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.39](https://github.com/Synerise/synerise-design/compare/@synerise/ds-ordered-list@1.1.38...@synerise/ds-ordered-list@1.1.39) (2026-03-20)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @synerise/ds-ordered-list
|
|
9
|
+
|
|
6
10
|
## [1.1.38](https://github.com/Synerise/synerise-design/compare/@synerise/ds-ordered-list@1.1.37...@synerise/ds-ordered-list@1.1.38) (2026-03-09)
|
|
7
11
|
|
|
8
12
|
**Note:** Version bump only for package @synerise/ds-ordered-list
|
package/CLAUDE.md
ADDED
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
# OrderedList (`@synerise/ds-ordered-list`)
|
|
2
|
+
> Recursive ordered list component supporting arbitrary nesting, custom index formatting, and optional prefixel/suffixel slots per item.
|
|
3
|
+
|
|
4
|
+
## Package structure
|
|
5
|
+
```
|
|
6
|
+
src/
|
|
7
|
+
Ordered-list.tsx — root component; renders <ol> with optional header label, maps data to Item
|
|
8
|
+
Ordered-list.types.ts — OrderedListItem, OrderedListProps, ListProps (deprecated alias)
|
|
9
|
+
Ordered-list.styles.ts — styled <ol> (OrderedList) and header wrapper (ContentAbove)
|
|
10
|
+
index.ts — public exports
|
|
11
|
+
Elements/
|
|
12
|
+
Item/
|
|
13
|
+
Item.tsx — memoized list item; renders index, prefixel, label, suffixel, and recursive NestedList
|
|
14
|
+
Item.styles.ts — ItemWrapper (<li>), IndexFormatterWrapper (<span>)
|
|
15
|
+
__specs__/
|
|
16
|
+
Ordered-list.spec.tsx — Jest tests (nested items, indexFormatter, prefix/suffix)
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Public exports
|
|
20
|
+
```ts
|
|
21
|
+
export { default } from './Ordered-list'; // default export: OrderedList component
|
|
22
|
+
export type { OrderedListItem, OrderedListProps }; // named type exports
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
`ListProps` is exported from the types file but **not** re-exported from `index.ts`. It is marked `@deprecated` — use `OrderedListProps` instead.
|
|
26
|
+
|
|
27
|
+
### `OrderedList` (default export)
|
|
28
|
+
| Prop | Type | Default | Description |
|
|
29
|
+
|------|------|---------|-------------|
|
|
30
|
+
| `data` | `OrderedListItem[]` | — (required) | Array of items to render |
|
|
31
|
+
| `indexFormatter` | `(index: number) => ReactNode` | `undefined` | Custom renderer for the item index; falls back to the raw zero-based number |
|
|
32
|
+
| `listStyle` | `string` | `undefined` | CSS `list-style-type` value applied to `<ol>` and all nested `<ol>` elements; defaults to `'none'` when omitted |
|
|
33
|
+
| `text` | `ReactNode` | `undefined` | Optional label rendered above the list via `FormFieldLabel` |
|
|
34
|
+
|
|
35
|
+
### `OrderedListItem`
|
|
36
|
+
| Field | Type | Required | Description |
|
|
37
|
+
|-------|------|----------|-------------|
|
|
38
|
+
| `id` | `string` | yes | Used as React `key` |
|
|
39
|
+
| `label` | `ReactNode` | yes | Item content |
|
|
40
|
+
| `index` | `number` | yes | Passed to `indexFormatter`; **ignored** in the root component — the map index `i` is used instead |
|
|
41
|
+
| `prefixel` | `ReactNode` | no | Rendered before the label |
|
|
42
|
+
| `suffixel` | `ReactNode` | no | Rendered after the label |
|
|
43
|
+
| `subMenu` | `OrderedListItem[]` | no | Child items; triggers a recursive `OrderedList` |
|
|
44
|
+
| `subMenuProps` | `Omit<OrderedListProps, 'data'>` | no | Props forwarded to the nested `OrderedList` (overrides inherited `text`, `indexFormatter`, `listStyle`) |
|
|
45
|
+
| `listStyle` | `string` | no | Per-item list style (forwarded to the nested list) |
|
|
46
|
+
| `text` | `ReactNode` | no | Header label for the nested list |
|
|
47
|
+
|
|
48
|
+
## Usage patterns
|
|
49
|
+
```tsx
|
|
50
|
+
import OrderedList from '@synerise/ds-ordered-list';
|
|
51
|
+
import type { OrderedListItem } from '@synerise/ds-ordered-list';
|
|
52
|
+
|
|
53
|
+
const items: OrderedListItem[] = [
|
|
54
|
+
{ id: '1', index: 0, label: 'First item' },
|
|
55
|
+
{ id: '2', index: 1, label: 'Second item' },
|
|
56
|
+
{
|
|
57
|
+
id: '3',
|
|
58
|
+
index: 2,
|
|
59
|
+
label: 'Parent item',
|
|
60
|
+
subMenu: [
|
|
61
|
+
{ id: '4', index: 0, label: 'Child item' },
|
|
62
|
+
],
|
|
63
|
+
},
|
|
64
|
+
];
|
|
65
|
+
|
|
66
|
+
// Basic usage with a decimal formatter
|
|
67
|
+
<OrderedList
|
|
68
|
+
data={items}
|
|
69
|
+
text="List Header"
|
|
70
|
+
indexFormatter={(i) => `${i + 1}. `}
|
|
71
|
+
/>
|
|
72
|
+
|
|
73
|
+
// Without index display
|
|
74
|
+
<OrderedList data={items} indexFormatter={() => ''} />
|
|
75
|
+
|
|
76
|
+
// Native browser list counters via listStyle
|
|
77
|
+
<OrderedList data={items} listStyle="decimal" />
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
## Styling
|
|
81
|
+
- Styled-components only; no Less/CSS files at runtime.
|
|
82
|
+
- `listStyle` maps directly to the CSS `list-style-type` property. When omitted, `list-style-type: none` is set at every level; custom index rendering via `indexFormatter` is then the only numbering mechanism.
|
|
83
|
+
- Nested `<ol>` elements receive `margin-left: 10px` and `padding: 5px 0 5px 12px`.
|
|
84
|
+
- `ContentAbove` wrapper has `margin-bottom: 8px; min-height: 18px`.
|
|
85
|
+
|
|
86
|
+
## Key dependencies
|
|
87
|
+
- `@synerise/ds-form-field` — `FormFieldLabel` used for the optional `text` header
|
|
88
|
+
- `@synerise/ds-icon` — listed as a dependency in `package.json` but not imported in any source file (likely a transitive or leftover dependency)
|
|
89
|
+
|
|
90
|
+
## Implementation notes
|
|
91
|
+
- **Recursive rendering without circular imports:** `OrderedList` passes itself as a `NestedList` prop to `Item`, avoiding a direct circular import between the two files.
|
|
92
|
+
- **`index` field on `OrderedListItem` is effectively unused at the root level** — the component uses the map iteration index `i` instead of `item.index`. The field is still passed through to nested levels via `subMenu` items.
|
|
93
|
+
- `Item` is wrapped in `React.memo`.
|
|
94
|
+
- Tests use Jest (not Vitest) — `jest.config.js` is present and the `test` script calls `jest` directly.
|
package/README.md
CHANGED
|
@@ -11,6 +11,8 @@ OrderedList UI Component
|
|
|
11
11
|
npm i @synerise/ds-ordered-list
|
|
12
12
|
or
|
|
13
13
|
yarn add @synerise/ds-ordered-list
|
|
14
|
+
or
|
|
15
|
+
pnpm add @synerise/ds-ordered-list
|
|
14
16
|
```
|
|
15
17
|
|
|
16
18
|
## Usage
|
|
@@ -28,12 +30,25 @@ import OrderedList from '@synerise/ds-ordered-list'
|
|
|
28
30
|
|
|
29
31
|
## API
|
|
30
32
|
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
|
34
|
-
|
|
|
35
|
-
|
|
|
36
|
-
|
|
|
37
|
-
|
|
|
38
|
-
|
|
|
39
|
-
|
|
33
|
+
### OrderedList
|
|
34
|
+
|
|
35
|
+
| Property | Description | Type | Default |
|
|
36
|
+
| -------------- | ---------------------------------------------------------------- | ------------------------------- | ------- |
|
|
37
|
+
| data | Array of items to render | OrderedListItem[] | - |
|
|
38
|
+
| indexFormatter | Custom renderer for the item index; falls back to the raw index | (index: number) => ReactNode | - |
|
|
39
|
+
| listStyle | CSS list-style-type value; defaults to `none` when not provided | string | - |
|
|
40
|
+
| text | Optional label rendered above the list | React.ReactNode | - |
|
|
41
|
+
|
|
42
|
+
### OrderedListItem
|
|
43
|
+
|
|
44
|
+
| Property | Description | Type | Default |
|
|
45
|
+
| ------------ | -------------------------------------------------------- | ----------------------------------- | ------- |
|
|
46
|
+
| id | Unique item identifier (used as React key) | string | - |
|
|
47
|
+
| index | Index value passed to indexFormatter | number | - |
|
|
48
|
+
| label | Item content | React.ReactNode | - |
|
|
49
|
+
| prefixel | Content rendered before the label | React.ReactNode | - |
|
|
50
|
+
| suffixel | Content rendered after the label | React.ReactNode | - |
|
|
51
|
+
| subMenu | Nested child items | OrderedListItem[] | - |
|
|
52
|
+
| subMenuProps | Props forwarded to the nested OrderedList (except data) | Omit\<OrderedListProps, 'data'\> | - |
|
|
53
|
+
| listStyle | CSS list-style-type for the nested list | string | - |
|
|
54
|
+
| text | Header label for the nested list | React.ReactNode | - |
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@synerise/ds-ordered-list",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.39",
|
|
4
4
|
"description": "OrderedList UI Component for the Synerise Design System",
|
|
5
5
|
"license": "ISC",
|
|
6
6
|
"repository": "Synerise/synerise-design",
|
|
@@ -28,13 +28,13 @@
|
|
|
28
28
|
],
|
|
29
29
|
"types": "dist/index.d.ts",
|
|
30
30
|
"dependencies": {
|
|
31
|
-
"@synerise/ds-form-field": "^1.3.
|
|
32
|
-
"@synerise/ds-icon": "^1.
|
|
31
|
+
"@synerise/ds-form-field": "^1.3.9",
|
|
32
|
+
"@synerise/ds-icon": "^1.15.0"
|
|
33
33
|
},
|
|
34
34
|
"peerDependencies": {
|
|
35
35
|
"@synerise/ds-core": "*",
|
|
36
36
|
"react": ">=16.9.0 <= 18.3.1",
|
|
37
37
|
"styled-components": "^5.3.3"
|
|
38
38
|
},
|
|
39
|
-
"gitHead": "
|
|
39
|
+
"gitHead": "8efc031fa688c0b87c7b3915bae93546bb63bcac"
|
|
40
40
|
}
|