@synerise/ds-items-roll 1.5.36 → 1.5.38
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 +121 -0
- package/package.json +15 -14
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.5.38](https://github.com/Synerise/synerise-design/compare/@synerise/ds-items-roll@1.5.37...@synerise/ds-items-roll@1.5.38) (2026-07-23)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @synerise/ds-items-roll
|
|
9
|
+
|
|
10
|
+
## [1.5.37](https://github.com/Synerise/synerise-design/compare/@synerise/ds-items-roll@1.5.36...@synerise/ds-items-roll@1.5.37) (2026-07-16)
|
|
11
|
+
|
|
12
|
+
**Note:** Version bump only for package @synerise/ds-items-roll
|
|
13
|
+
|
|
6
14
|
## [1.5.36](https://github.com/Synerise/synerise-design/compare/@synerise/ds-items-roll@1.5.35...@synerise/ds-items-roll@1.5.36) (2026-07-09)
|
|
7
15
|
|
|
8
16
|
**Note:** Version bump only for package @synerise/ds-items-roll
|
package/CLAUDE.md
ADDED
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
# ItemsRoll (`@synerise/ds-items-roll`)
|
|
2
|
+
|
|
3
|
+
> Panel component that displays a paginated, searchable list of items with optional grouping, hover-reveal remove icons, a header toolbar (count, search, change-selection, custom actions), and a footer (show more/less + clear-all confirmation).
|
|
4
|
+
|
|
5
|
+
## Package structure
|
|
6
|
+
|
|
7
|
+
```
|
|
8
|
+
src/
|
|
9
|
+
ItemsRoll.tsx — main component (named + default export)
|
|
10
|
+
ItemsRoll.types.ts — ItemsRollProps, ItemRollElement, ItemsRollGroup, Texts
|
|
11
|
+
ItemsRoll.styles.ts — all card/list styled-components
|
|
12
|
+
index.ts — public exports
|
|
13
|
+
Extras/ — three-dot actions dropdown (internal)
|
|
14
|
+
ItemsRollComponents/
|
|
15
|
+
Header.tsx / Header.types.ts — toolbar: count, search, change-selection button, extras
|
|
16
|
+
Footer.tsx / Footer.types.ts — show-more/show-less/clear-all controls
|
|
17
|
+
List.tsx / List.types.ts — flat or grouped item list
|
|
18
|
+
ListItem.tsx / ListItem.types.ts / ListItem.styles.ts — single item row
|
|
19
|
+
ItemRemoveIcon.tsx / *.types.ts / *.styles.ts — hover-reveal remove icon
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
## Public exports
|
|
23
|
+
|
|
24
|
+
### `ItemsRoll` (default export)
|
|
25
|
+
|
|
26
|
+
Rendered inside `@synerise/ds-panel` with `radius={3} p={12}`.
|
|
27
|
+
|
|
28
|
+
| Prop | Type | Default | Description |
|
|
29
|
+
|------|------|---------|-------------|
|
|
30
|
+
| `items` | `ItemRollElement[]` | — | **Required.** List items to render |
|
|
31
|
+
| `maxToShowItems` | `number` | `10` | Number of items shown initially; resets visible count when changed |
|
|
32
|
+
| `showMoreStep` | `number` | `10` | How many items to load per "show more" click |
|
|
33
|
+
| `useFooter` | `boolean` | `undefined` | Show footer with show-more/less and clear-all controls |
|
|
34
|
+
| `isDisabled` | `boolean` | `undefined` | Hides remove icon per item and clear-all button (passes `undefined` to callbacks) |
|
|
35
|
+
| `groups` | `ItemsRollGroup[]` | `undefined` | Enables grouped view; each string corresponds to `item.group`; items without a matching group are hidden |
|
|
36
|
+
| `actions` | `ItemRollElement<ActionItemType>[]` | `undefined` | Items for a three-dot dropdown in the header right area |
|
|
37
|
+
| `changeSelectionIcon` | `(props: SVGProps<SVGSVGElement>) => JSX.Element` | `EditM` | Icon for the "change selection" button |
|
|
38
|
+
| `changeSelectionDropdownProps` | `Omit<DropdownProps, 'children'>` | `undefined` | Wraps the change-selection button in a `@synerise/ds-dropdown` |
|
|
39
|
+
| `customSidebarActions` | `ReactNode` | `undefined` | Extra controls rendered in header right, between search and extras |
|
|
40
|
+
| `hideSearch` | `boolean` | `undefined` | Hide the search input |
|
|
41
|
+
| `onSearch` | `(value: string) => void` | `undefined` | Search input change handler |
|
|
42
|
+
| `onSearchClear` | `() => void` | `undefined` | Search clear handler |
|
|
43
|
+
| `searchValue` | `string` | `undefined` | Controlled search value |
|
|
44
|
+
| `searchPlaceholder` | `string` | `undefined` | Placeholder for search input |
|
|
45
|
+
| `onClearAll` | `() => void` | `undefined` | Called after user confirms the clear-all popconfirm (hidden when `isDisabled`) |
|
|
46
|
+
| `onChangeSelection` | `() => void` | `undefined` | Click handler for the change-selection button; omitting hides the button |
|
|
47
|
+
| `onItemClick` | `(id: string, group?: string) => void` | `undefined` | Called when a list item is clicked |
|
|
48
|
+
| `onItemRemove` | `(id: string, group?: string) => void` | `undefined` | Called when the hover-reveal remove icon is clicked (hidden when `isDisabled`) |
|
|
49
|
+
| `renderCount` | `(count: number) => ReactNode` | `undefined` | Custom renderer for the items count displayed in the header |
|
|
50
|
+
| `texts` | `{ [k in Texts]?: ReactNode }` | `undefined` | Partial override for any i18n string; merges with defaults from `react-intl` |
|
|
51
|
+
| `className` | `string` | `undefined` | CSS class on the panel wrapper |
|
|
52
|
+
| `style` | `CSSProperties` | `undefined` | Inline style on the panel wrapper |
|
|
53
|
+
| `intl` | `IntlShape` | — | **@deprecated** — component now uses `useIntl()` internally |
|
|
54
|
+
| `useVirtualizedList` | `boolean` | — | **@deprecated** — virtualized list was removed; prop is accepted but ignored |
|
|
55
|
+
| `virtualizedRowHeight` | `number` | — | **@deprecated** — ignored |
|
|
56
|
+
| `virtualizedRowWidth` | `number` | — | **@deprecated** — ignored |
|
|
57
|
+
|
|
58
|
+
### Type exports
|
|
59
|
+
|
|
60
|
+
`ItemRollElement`, `ItemsRollGroup`, `ItemsRollProps`
|
|
61
|
+
|
|
62
|
+
#### `ItemRollElement<BaseType>`
|
|
63
|
+
|
|
64
|
+
```ts
|
|
65
|
+
type ItemRollElement<BaseType extends ListItemProps | MenuItemProps = ListItemProps> =
|
|
66
|
+
BaseType & { id: string; group?: string };
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
`id` is required and used as the React `key` and callback argument. `group` ties the item to a group defined in the `groups` prop.
|
|
70
|
+
|
|
71
|
+
#### `Texts` keys
|
|
72
|
+
|
|
73
|
+
`changeSelectionLabel` · `clearAllLabel` · `itemsLabel` · `moreLabel` · `noResultsLabel` · `popconfirmNoLabel` · `popconfirmTitleLabel` · `popconfirmYesLabel` · `removeTooltipLabel` · `searchClearTooltipLabel` · `showLabel` · `showLessLabel`
|
|
74
|
+
|
|
75
|
+
All default to translated strings via `react-intl` message IDs under the `DS.ITEMS-ROLL.*` namespace.
|
|
76
|
+
|
|
77
|
+
## Usage patterns
|
|
78
|
+
|
|
79
|
+
```tsx
|
|
80
|
+
import ItemsRoll from '@synerise/ds-items-roll';
|
|
81
|
+
|
|
82
|
+
// Minimal — flat list with search
|
|
83
|
+
<ItemsRoll
|
|
84
|
+
items={[{ id: '1', name: 'Segment A' }, { id: '2', name: 'Segment B' }]}
|
|
85
|
+
onSearch={setSearch}
|
|
86
|
+
onSearchClear={() => setSearch('')}
|
|
87
|
+
searchValue={search}
|
|
88
|
+
useFooter
|
|
89
|
+
/>
|
|
90
|
+
|
|
91
|
+
// Grouped list with remove support
|
|
92
|
+
<ItemsRoll
|
|
93
|
+
items={items}
|
|
94
|
+
groups={['Group A', 'Group B']}
|
|
95
|
+
onItemRemove={(id, group) => removeItem(id, group)}
|
|
96
|
+
onChangeSelection={openPicker}
|
|
97
|
+
useFooter
|
|
98
|
+
maxToShowItems={5}
|
|
99
|
+
showMoreStep={5}
|
|
100
|
+
/>
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
## Key dependencies
|
|
104
|
+
|
|
105
|
+
- `@synerise/ds-panel` — outer card wrapper (radius + padding)
|
|
106
|
+
- `@synerise/ds-list-item` — `GroupItem`, `ListContextProvider`, `DSListItem` for rows
|
|
107
|
+
- `@synerise/ds-dropdown` — change-selection dropdown wrapper and actions menu
|
|
108
|
+
- `@synerise/ds-popconfirm` — clear-all confirmation dialog
|
|
109
|
+
- `@synerise/ds-search/dist/Elements` — `SearchInput` (**deep path — fragile**)
|
|
110
|
+
- `react-intl` — `useIntl()` for default label translations
|
|
111
|
+
|
|
112
|
+
## Implementation notes
|
|
113
|
+
|
|
114
|
+
- **Groups and ungrouped items:** When `groups` is provided, only items whose `item.group` matches a value in the array are rendered. Items without a matching group are silently hidden.
|
|
115
|
+
- **Pagination state:** `visibleItemsAmount` state is reset to `maxToShowItems` via `useEffect` whenever the `maxToShowItems` prop changes.
|
|
116
|
+
- **`isDisabled` behaviour:** Passes `undefined` for `onItemRemove` and `onClearAll` to child components — it does not render disabled UI; it fully hides the controls.
|
|
117
|
+
- **Footer visibility:** Footer only renders when `useFooter={true}` AND `visibleItems.length > 0`. The footer divider is hidden when in search mode and `itemsCount <= maxToShowItems`.
|
|
118
|
+
- **Antd class selectors:** `ListWrapper` styled-component targets `.ant-menu-*` and `.-item-group*` class selectors directly for group title and divider styling — these will break if the antd Menu is replaced.
|
|
119
|
+
- **Deep import:** `Header.tsx` imports `SearchInput` from `@synerise/ds-search/dist/Elements` — a fragile internal path that breaks if `ds-search` restructures its dist output.
|
|
120
|
+
- **Deprecated props:** `useVirtualizedList`, `virtualizedRowHeight`, `virtualizedRowWidth` exist in `ListProps` but are never read in `List.tsx`. `intl` prop is accepted at the top level but never forwarded anywhere (component uses `useIntl()` hook directly).
|
|
121
|
+
- Uses **Jest** (not Vitest) — `jest.config.js` present.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@synerise/ds-items-roll",
|
|
3
|
-
"version": "1.5.
|
|
3
|
+
"version": "1.5.38",
|
|
4
4
|
"description": "ItemsRoll 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,18 +42,18 @@
|
|
|
41
42
|
],
|
|
42
43
|
"types": "dist/index.d.ts",
|
|
43
44
|
"dependencies": {
|
|
44
|
-
"@synerise/ds-button": "^1.5.
|
|
45
|
-
"@synerise/ds-divider": "^1.3.
|
|
46
|
-
"@synerise/ds-dropdown": "^1.3.
|
|
47
|
-
"@synerise/ds-icon": "^1.18.
|
|
48
|
-
"@synerise/ds-list-item": "^1.6.
|
|
49
|
-
"@synerise/ds-menu": "^1.4.
|
|
50
|
-
"@synerise/ds-panel": "^1.2.
|
|
51
|
-
"@synerise/ds-popconfirm": "^1.4.
|
|
52
|
-
"@synerise/ds-popover": "^1.6.
|
|
53
|
-
"@synerise/ds-search": "^1.5.
|
|
54
|
-
"@synerise/ds-tooltip": "^1.5.
|
|
55
|
-
"@synerise/ds-utils": "^1.10.
|
|
45
|
+
"@synerise/ds-button": "^1.5.35",
|
|
46
|
+
"@synerise/ds-divider": "^1.3.16",
|
|
47
|
+
"@synerise/ds-dropdown": "^1.3.20",
|
|
48
|
+
"@synerise/ds-icon": "^1.18.5",
|
|
49
|
+
"@synerise/ds-list-item": "^1.6.2",
|
|
50
|
+
"@synerise/ds-menu": "^1.4.32",
|
|
51
|
+
"@synerise/ds-panel": "^1.2.17",
|
|
52
|
+
"@synerise/ds-popconfirm": "^1.4.2",
|
|
53
|
+
"@synerise/ds-popover": "^1.6.2",
|
|
54
|
+
"@synerise/ds-search": "^1.5.34",
|
|
55
|
+
"@synerise/ds-tooltip": "^1.5.4",
|
|
56
|
+
"@synerise/ds-utils": "^1.10.2",
|
|
56
57
|
"react-intl": "^6.8.7"
|
|
57
58
|
},
|
|
58
59
|
"devDependencies": {
|
|
@@ -65,5 +66,5 @@
|
|
|
65
66
|
"styled-components": "^5.3.3",
|
|
66
67
|
"vitest": "4"
|
|
67
68
|
},
|
|
68
|
-
"gitHead": "
|
|
69
|
+
"gitHead": "d0a43cc43d8528a36f105aceea52ab470edb71d9"
|
|
69
70
|
}
|