@synerise/ds-item-filter 1.0.95 → 1.0.96

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.
Files changed (3) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/CLAUDE.md +146 -0
  3. package/package.json +12 -11
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.0.96](https://github.com/Synerise/synerise-design/compare/@synerise/ds-item-filter@1.0.95...@synerise/ds-item-filter@1.0.96) (2026-07-23)
7
+
8
+ **Note:** Version bump only for package @synerise/ds-item-filter
9
+
6
10
  ## [1.0.95](https://github.com/Synerise/synerise-design/compare/@synerise/ds-item-filter@1.0.94...@synerise/ds-item-filter@1.0.95) (2026-07-16)
7
11
 
8
12
  **Note:** Version bump only for package @synerise/ds-item-filter
package/CLAUDE.md ADDED
@@ -0,0 +1,146 @@
1
+ # ItemFilter (`@synerise/ds-item-filter`)
2
+
3
+ > **Deprecated.** A right-side drawer that presents a virtualized, tab-categorised list of saved filter items with search, selection, rename, duplicate, and delete actions.
4
+
5
+ ## Deprecation notice
6
+
7
+ Both the component and its types carry `@deprecated` JSDoc tags. No new features will be added. Prefer an alternative pattern if starting a new feature.
8
+
9
+ ## Package structure
10
+
11
+ ```
12
+ src/
13
+ ItemFilter.tsx — main component (default export); wraps Drawer + Tabs + react-window List
14
+ ItemFilter.types.ts — ItemFilterProps, Category, Item (exported)
15
+ ItemFIlter.styles.ts — styled-components: FiltersList, ItemFilterHeader (note typo in filename)
16
+ index.ts — re-exports default + all named types
17
+ modules.d.ts — @testing-library/jest-dom augmentation (test setup only)
18
+ __specs__/
19
+ ItemFilter.spec.tsx — Vitest tests (uses renderWithProvider from @synerise/ds-core)
20
+ ```
21
+
22
+ ## Public exports
23
+
24
+ ### Default export — `ItemFilter`
25
+
26
+ The component is wrapped with `injectIntl` (react-intl) and `withTheme` (styled-components) before export. Consumers must have an `IntlProvider` and a styled-components `ThemeProvider` (or `DSProvider`) in the tree.
27
+
28
+ | Prop | Type | Required | Default | Description |
29
+ |------|------|----------|---------|-------------|
30
+ | `visible` | `boolean` | yes | — | Controls Drawer open/close state |
31
+ | `hide` | `() => void` | yes | — | Called when close button or Drawer mask is clicked |
32
+ | `fetchData` | `(category: Category) => void` | yes | — | Called by infinite-scroll Scrollbar when more items are needed |
33
+ | `selectItem` | `(params: { id: ReactText }) => void` | yes | — | Called when a list item is selected |
34
+ | `categories` | `Category[]` | yes | — | Tab definitions; each tab owns its items |
35
+ | `selectedItemId` | `string \| undefined` | yes | — | ID of the currently-selected item; floated to top of list |
36
+ | `loading` | `boolean` | no | — | Passed to Scrollbar to show loading state |
37
+ | `removeItem` | `(params: { id: ReactText }) => void` | no | — | Called on item delete |
38
+ | `editItem` | `(params: { id: ReactText; name: string }) => void` | no | — | Called on item rename |
39
+ | `duplicateItem` | `(params: { id: ReactText }) => void` | no | — | Called on item duplicate |
40
+ | `texts` | `{ [k: string]: string \| ReactNode }` | no | intl defaults | Override any UI string (see Texts section) |
41
+ | `search` | `{ onChange, onClear, value }` | no | — | Renders SearchBar below header when provided |
42
+ | `theme` | `{ [k: string]: string }` | no | — | **@deprecated** — theme is read from DSProvider |
43
+ | `maxToShowItems` | `number` | no | — | Accepted in type but **not used** in component implementation |
44
+
45
+ ### Named type exports
46
+
47
+ | Symbol | Description |
48
+ |--------|-------------|
49
+ | `ItemFilterProps` | Full props type for the component |
50
+ | `Category` | `{ label: string; items: Item[]; hasMore: boolean }` |
51
+
52
+ `Item` (internal) extends `ItemProps` from `@synerise/ds-manageable-list` with an added `categories: string[]` field. It is **not** re-exported from the package index.
53
+
54
+ ## `texts` keys
55
+
56
+ All keys fall back to react-intl message IDs when `texts` is not supplied.
57
+
58
+ | Key | intl ID |
59
+ |-----|---------|
60
+ | `title` | `DS.ITEM-FILTER.TITLE` |
61
+ | `activateItemTitle` | `DS.ITEM-FILTER.ACTIVATE-ITEM-TITLE` |
62
+ | `activate` | `DS.ITEM-FILTER.ACTIVATE` |
63
+ | `cancel` | `DS.ITEM-FILTER.CANCEL` |
64
+ | `deleteConfirmationTitle` | `DS.ITEM-FILTER.DELETE-CONFIRMATION-TITLE` |
65
+ | `deleteConfirmationDescription` | `DS.ITEM-FILTER.DELETE-CONFIRMATION-DESCRIPTION` |
66
+ | `deleteConfirmationNo` | `DS.ITEM-FILTER.DELETE-CONFIRMATION-NO` |
67
+ | `deleteConfirmationYes` | `DS.ITEM-FILTER.DELETE-CONFIRMATION-YES` |
68
+ | `noResults` | `DS.ITEM-FILTER.NO-RESULTS` |
69
+ | `searchPlaceholder` | `DS.ITEM-FILTER.SEARCH-PLACEHOLDER` |
70
+ | `searchClearTooltip` | `DS.ITEM-FILTER.SEARCH-CLEAR` |
71
+ | `more` | `DS.MANAGABLE-LIST.MORE` |
72
+ | `less` | `DS.MANAGABLE-LIST.LESS` |
73
+ | `itemActionRename` | `DS.MANAGABLE-LIST.ITEM-RENAME` |
74
+ | `itemActionDuplicate` | `DS.MANAGABLE-LIST.ITEM-DUPLICATE` |
75
+ | `itemActionDelete` | `DS.MANAGABLE-LIST.ITEM-DELETE` |
76
+
77
+ ## Usage patterns
78
+
79
+ ```tsx
80
+ import ItemFilter from '@synerise/ds-item-filter';
81
+ import type { Category } from '@synerise/ds-item-filter';
82
+
83
+ const categories: Category[] = [
84
+ {
85
+ label: 'All filters',
86
+ hasMore: true,
87
+ items: [
88
+ {
89
+ id: '001',
90
+ name: 'My Filter',
91
+ canUpdate: true,
92
+ canDelete: true,
93
+ canDuplicate: true,
94
+ categories: ['All filters'],
95
+ user: { firstname: 'Jan', lastname: 'Nowak' },
96
+ created: '2024-01-01',
97
+ },
98
+ ],
99
+ },
100
+ ];
101
+
102
+ <ItemFilter
103
+ visible={isOpen}
104
+ hide={() => setIsOpen(false)}
105
+ categories={categories}
106
+ selectedItemId={selectedId}
107
+ fetchData={(category) => loadMore(category)}
108
+ selectItem={({ id }) => setSelectedId(String(id))}
109
+ removeItem={({ id }) => deleteFilter(id)}
110
+ editItem={({ id, name }) => renameFilter(id, name)}
111
+ duplicateItem={({ id }) => duplicateFilter(id)}
112
+ search={{ value: query, onChange: setQuery, onClear: () => setQuery('') }}
113
+ />
114
+ ```
115
+
116
+ ## Styling
117
+
118
+ - `FiltersList` — full-height container; overrides `ItemContainer` from `@synerise/ds-manageable-list` to enforce `max-height: 48px`, remove `box-shadow`, and apply `grey-050` background.
119
+ - `ItemFilterHeader` — flex row with space-between for title + close button; `padding-bottom: 24px`.
120
+ - Drawer fixed width: **676px**.
121
+ - List item height: **48px** with **16px** margin-bottom (total row size 64px for `react-window`).
122
+ - List padding: **24px** on each side.
123
+ - Imports internal styled component via `@synerise/ds-manageable-list/dist/Item/ContentItem/ContentItem.styles` — a **fragile dist import** that bypasses the public API.
124
+
125
+ ## Key dependencies
126
+
127
+ | Package | Role |
128
+ |---------|------|
129
+ | `@synerise/ds-drawer` | Drawer shell |
130
+ | `@synerise/ds-tabs` | Category tabs |
131
+ | `@synerise/ds-manageable-list` | `FilterItem` row component + `ItemProps` type |
132
+ | `@synerise/ds-scrollbar` | Infinite-scroll wrapper |
133
+ | `@synerise/ds-search-bar` | Optional search input |
134
+ | `@synerise/ds-result` | Empty-state display |
135
+ | `react-window` (`FixedSizeList`) | Virtualised list |
136
+ | `react-intl` (`injectIntl`) | i18n for default text strings |
137
+ | `styled-components` (`withTheme`) | Theme injection (deprecated pattern) |
138
+
139
+ ## Implementation notes
140
+
141
+ - **Selected item sorting:** when `selectedItemId` is set, the active category's items are sorted so the selected item appears first (stable sort, `useMemo`).
142
+ - **Scroll sync:** `Scrollbar` handles the actual scroll event; a `UIEvent` handler forwards `scrollTop` to the `react-window` list ref via `listRef.current.scrollTo()`.
143
+ - **`fetchData` suppressed during search:** `hasMore` is passed to `Scrollbar` only when `!search?.value`, preventing pagination calls while filtering.
144
+ - **`maxToShowItems` is a dead prop** — declared in `ItemFilterProps` but never read inside `ItemFilter.tsx`.
145
+ - **Filename typo:** styles file is `ItemFIlter.styles.ts` (capital I in "FIlter") — matched throughout the codebase consistently but is a persistent typo.
146
+ - **Test runner:** uses Jest (not Vitest) — see `jest.config.js`. Tests live in `src/__specs__/`.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-item-filter",
3
- "version": "1.0.95",
3
+ "version": "1.0.96",
4
4
  "description": "ItemFilter 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.34",
45
- "@synerise/ds-drawer": "^1.1.5",
46
- "@synerise/ds-icon": "^1.18.4",
47
- "@synerise/ds-manageable-list": "^1.8.10",
48
- "@synerise/ds-result": "^1.0.65",
49
- "@synerise/ds-scrollbar": "^1.5.1",
50
- "@synerise/ds-search-bar": "^1.4.34",
51
- "@synerise/ds-tabs": "^1.2.5",
52
- "@synerise/ds-typography": "^1.1.26",
45
+ "@synerise/ds-button": "^1.5.35",
46
+ "@synerise/ds-drawer": "^1.1.6",
47
+ "@synerise/ds-icon": "^1.18.5",
48
+ "@synerise/ds-manageable-list": "^1.8.11",
49
+ "@synerise/ds-result": "^1.0.66",
50
+ "@synerise/ds-scrollbar": "^1.5.2",
51
+ "@synerise/ds-search-bar": "^1.4.35",
52
+ "@synerise/ds-tabs": "^1.2.6",
53
+ "@synerise/ds-typography": "^1.1.27",
53
54
  "react-window": "^1.8.11"
54
55
  },
55
56
  "peerDependencies": {
@@ -59,5 +60,5 @@
59
60
  "styled-components": "^5.3.3",
60
61
  "vitest": "4"
61
62
  },
62
- "gitHead": "a81ab6519d49a3dea9c0cfebcdc9104cbb4f4226"
63
+ "gitHead": "d0a43cc43d8528a36f105aceea52ab470edb71d9"
63
64
  }