@synerise/ds-operators 1.1.45 → 1.1.47
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 +116 -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.1.47](https://github.com/Synerise/synerise-design/compare/@synerise/ds-operators@1.1.46...@synerise/ds-operators@1.1.47) (2026-07-24)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @synerise/ds-operators
|
|
9
|
+
|
|
10
|
+
## [1.1.46](https://github.com/Synerise/synerise-design/compare/@synerise/ds-operators@1.1.45...@synerise/ds-operators@1.1.46) (2026-07-23)
|
|
11
|
+
|
|
12
|
+
**Note:** Version bump only for package @synerise/ds-operators
|
|
13
|
+
|
|
6
14
|
## [1.1.45](https://github.com/Synerise/synerise-design/compare/@synerise/ds-operators@1.1.44...@synerise/ds-operators@1.1.45) (2026-07-16)
|
|
7
15
|
|
|
8
16
|
**Note:** Version bump only for package @synerise/ds-operators
|
package/CLAUDE.md
ADDED
|
@@ -0,0 +1,116 @@
|
|
|
1
|
+
# Operators (`@synerise/ds-operators`)
|
|
2
|
+
|
|
3
|
+
> A dropdown button that lets users choose a logical operator (e.g. Equal, More than) from a grouped, searchable list.
|
|
4
|
+
|
|
5
|
+
## Package structure
|
|
6
|
+
|
|
7
|
+
```
|
|
8
|
+
src/
|
|
9
|
+
Operators.tsx — main component; trigger button + Dropdown
|
|
10
|
+
Operator.types.ts — OperatorsProps, OperatorsItem, OperatorsGroup, OperatorsDropdownProps, OperatorTexts
|
|
11
|
+
Operators.style.ts — styled components
|
|
12
|
+
index.ts — public exports
|
|
13
|
+
OperatorsDropdown/
|
|
14
|
+
OperatorsDropdown.tsx — dropdown overlay: tabs (one per group), search, scrollable item list
|
|
15
|
+
OperatorsDropdownGroupName.tsx — group heading row
|
|
16
|
+
OperatorsDropdownItem.tsx — individual operator row
|
|
17
|
+
utils/
|
|
18
|
+
groupByGroupName.ts — groups items by their groupName field
|
|
19
|
+
constants.ts — DROPDOWN_HEIGHT, SEARCH_HEIGHT, TABS_HEIGHT, etc.
|
|
20
|
+
__specs__/
|
|
21
|
+
Operators.spec.tsx — Vitest tests
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
## Public exports
|
|
25
|
+
|
|
26
|
+
### `Operators` (default export)
|
|
27
|
+
|
|
28
|
+
| Prop | Type | Default | Description |
|
|
29
|
+
|------|------|---------|-------------|
|
|
30
|
+
| `items` | `OperatorsItem[]` | — (required) | All available operators |
|
|
31
|
+
| `groups` | `OperatorsGroup[]` | — (required) | Group definitions shown as tabs in the dropdown |
|
|
32
|
+
| `onChange` | `(item: OperatorsItem \| undefined) => void` | — (required) | Called when user selects an operator (or clears it) |
|
|
33
|
+
| `value` | `OperatorsItem \| undefined` | `undefined` | Currently selected operator |
|
|
34
|
+
| `texts` | `Partial<OperatorTexts>` | see defaults | i18n overrides |
|
|
35
|
+
| `opened` | `boolean` | `false` | Controlled open state; synced via `useEffect` |
|
|
36
|
+
| `onActivate` | `() => void` | — | Called when dropdown opens |
|
|
37
|
+
| `onDeactivate` | `() => void` | — | Called when dropdown closes (via `onDismiss`) |
|
|
38
|
+
| `readOnly` | `boolean` | `false` | Disables the dropdown; shows selected value without open arrow |
|
|
39
|
+
| `errorText` | `ReactNode` | — | Puts the trigger button in error state; the text is not rendered |
|
|
40
|
+
| `getPopupContainerOverride` | `(trigger: HTMLElement \| null) => HTMLElement` | `getPopupContainer` | Overrides popup container for nested dropdowns/tooltips |
|
|
41
|
+
| `dropdownDimensionsConfig` | `{ defaultHeight?, lowerHeight?, threshold? }` | see constants | Override responsive height thresholds |
|
|
42
|
+
|
|
43
|
+
### `OperatorsProps`
|
|
44
|
+
|
|
45
|
+
Full props type re-export.
|
|
46
|
+
|
|
47
|
+
### `OperatorsGroup`
|
|
48
|
+
|
|
49
|
+
| Field | Type | Description |
|
|
50
|
+
|-------|------|-------------|
|
|
51
|
+
| `id` | `ReactText` | Unique identifier |
|
|
52
|
+
| `name` | `string` | Group label (shown as tab) |
|
|
53
|
+
| `icon` | `ReactNode` | Tab icon |
|
|
54
|
+
| `tooltip` | `string` | Hover tooltip on the tab |
|
|
55
|
+
| `defaultGroup` | `boolean` | Whether this is the pre-selected tab |
|
|
56
|
+
| `itemType` | `string` | — |
|
|
57
|
+
| `subGroups` | `OperatorsGroup[]` | Nested group definitions |
|
|
58
|
+
|
|
59
|
+
### `OperatorsItem`
|
|
60
|
+
|
|
61
|
+
| Field | Type | Description |
|
|
62
|
+
|-------|------|-------------|
|
|
63
|
+
| `id` | `ReactText` | Unique identifier |
|
|
64
|
+
| `name` | `string` | Display name |
|
|
65
|
+
| `icon` | `ReactNode` | Operator icon |
|
|
66
|
+
| `groupId` | `ReactText` | Links this item to its `OperatorsGroup.id` |
|
|
67
|
+
| `group` | `string` | Group key string (redundant with `groupId`) |
|
|
68
|
+
| `groupName` | `string` | Displayed group heading in the item list |
|
|
69
|
+
| `logic` | `string` | Logic operator code (e.g. `'EQUAL'`) |
|
|
70
|
+
| `value` | `string` | Arbitrary value string |
|
|
71
|
+
| `subGroups` | `OperatorsGroup[]` | — |
|
|
72
|
+
|
|
73
|
+
### `OperatorTexts` (i18n defaults)
|
|
74
|
+
|
|
75
|
+
| Key | Default |
|
|
76
|
+
|-----|---------|
|
|
77
|
+
| `buttonLabel` | `'Choose'` |
|
|
78
|
+
| `searchPlaceholder` | `'Search'` |
|
|
79
|
+
| `noResults` | `'No results'` |
|
|
80
|
+
|
|
81
|
+
## Usage patterns
|
|
82
|
+
|
|
83
|
+
```tsx
|
|
84
|
+
import Operators from '@synerise/ds-operators';
|
|
85
|
+
import type { OperatorsItem, OperatorsGroup } from '@synerise/ds-operators';
|
|
86
|
+
|
|
87
|
+
<Operators
|
|
88
|
+
groups={groups}
|
|
89
|
+
items={items}
|
|
90
|
+
value={selectedOperator}
|
|
91
|
+
onChange={(item) => setSelectedOperator(item)}
|
|
92
|
+
texts={{ buttonLabel: 'Choose operator' }}
|
|
93
|
+
/>
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
## Styling
|
|
97
|
+
|
|
98
|
+
`Operators.style.ts` — minimal; most styles are in `OperatorsDropdown`. Uses `theme.palette` tokens. The `ItemsList` styled component has a typo: `backgorund` instead of `background` — silently ignored by browsers.
|
|
99
|
+
|
|
100
|
+
## Key dependencies
|
|
101
|
+
|
|
102
|
+
- `@synerise/ds-dropdown` — wraps the operator list as a click-triggered dropdown overlay
|
|
103
|
+
- `@synerise/ds-tabs` — renders one tab per group in the dropdown header
|
|
104
|
+
- `@synerise/ds-scrollbar` — scrollable item list inside the dropdown
|
|
105
|
+
- `@synerise/ds-result` — empty/no-results state inside the dropdown
|
|
106
|
+
- `react-intl` — i18n for default text values; requires `IntlProvider` in the tree
|
|
107
|
+
- `uuid` — generates unique keys for group items
|
|
108
|
+
|
|
109
|
+
## Implementation notes
|
|
110
|
+
|
|
111
|
+
- **`onChange` type vs README** — the README documents `(item: OperatorsItem | OperatorsGroup | undefined) => void` but the actual TS type is `(item: OperatorsItem | undefined) => void`. The internal `handleChange` filters out `OperatorsGroup` values before calling `onChange`.
|
|
112
|
+
- **`onActivate` signature vs README** — README says `(fieldType: string) => void`; actual type is `() => void`.
|
|
113
|
+
- **`error` vs `errorText`** — README documents an `error: boolean` prop that does not exist; the real prop is `errorText: ReactNode` which puts the button in error state.
|
|
114
|
+
- **Undocumented props** — `readOnly`, `errorText`, `dropdownDimensionsConfig` are all missing from the README.
|
|
115
|
+
- **Responsive height** — viewport height is checked on mount and resize; `defaultHeight=420` is used when `window.innerHeight >= 900`, `lowerHeight=350` otherwise.
|
|
116
|
+
- **Uses Vitest**.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@synerise/ds-operators",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.47",
|
|
4
4
|
"description": "Operators 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-dropdown": "^1.3.
|
|
46
|
-
"@synerise/ds-icon": "^1.18.
|
|
47
|
-
"@synerise/ds-list-item": "^1.6.
|
|
48
|
-
"@synerise/ds-result": "^1.0.
|
|
49
|
-
"@synerise/ds-scrollbar": "^1.5.
|
|
50
|
-
"@synerise/ds-tabs": "^1.2.
|
|
51
|
-
"@synerise/ds-tooltip": "^1.5.
|
|
52
|
-
"@synerise/ds-utils": "^1.10.
|
|
45
|
+
"@synerise/ds-button": "^1.5.35",
|
|
46
|
+
"@synerise/ds-dropdown": "^1.3.21",
|
|
47
|
+
"@synerise/ds-icon": "^1.18.5",
|
|
48
|
+
"@synerise/ds-list-item": "^1.6.2",
|
|
49
|
+
"@synerise/ds-result": "^1.0.66",
|
|
50
|
+
"@synerise/ds-scrollbar": "^1.5.2",
|
|
51
|
+
"@synerise/ds-tabs": "^1.2.7",
|
|
52
|
+
"@synerise/ds-tooltip": "^1.5.4",
|
|
53
|
+
"@synerise/ds-utils": "^1.10.2",
|
|
53
54
|
"uuid": "^8.3.2"
|
|
54
55
|
},
|
|
55
56
|
"peerDependencies": {
|
|
@@ -59,5 +60,5 @@
|
|
|
59
60
|
"styled-components": "^5.3.3",
|
|
60
61
|
"vitest": "4"
|
|
61
62
|
},
|
|
62
|
-
"gitHead": "
|
|
63
|
+
"gitHead": "018414e0d7ffd102a07f8aa35fa2e2d3d4ed19e2"
|
|
63
64
|
}
|