@synerise/ds-select 1.3.32 → 1.3.34
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 +140 -0
- package/package.json +7 -6
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.3.34](https://github.com/synerise/synerise-design/compare/@synerise/ds-select@1.3.33...@synerise/ds-select@1.3.34) (2026-07-23)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @synerise/ds-select
|
|
9
|
+
|
|
10
|
+
## [1.3.33](https://github.com/synerise/synerise-design/compare/@synerise/ds-select@1.3.32...@synerise/ds-select@1.3.33) (2026-06-17)
|
|
11
|
+
|
|
12
|
+
**Note:** Version bump only for package @synerise/ds-select
|
|
13
|
+
|
|
6
14
|
## [1.3.32](https://github.com/synerise/synerise-design/compare/@synerise/ds-select@1.3.31...@synerise/ds-select@1.3.32) (2026-06-11)
|
|
7
15
|
|
|
8
16
|
**Note:** Version bump only for package @synerise/ds-select
|
package/CLAUDE.md
ADDED
|
@@ -0,0 +1,140 @@
|
|
|
1
|
+
# Select (`@synerise/ds-select`)
|
|
2
|
+
|
|
3
|
+
> A DS-styled select dropdown wrapping Ant Design's Select with FormField integration, prefix/suffix addon support, `readOnly` mode, and a `raw` render variant.
|
|
4
|
+
|
|
5
|
+
## Package structure
|
|
6
|
+
|
|
7
|
+
```
|
|
8
|
+
src/
|
|
9
|
+
Select.tsx — main component (forwardRef, compound with .Option and .OptGroup)
|
|
10
|
+
Select.types.ts — Props type (extends Antd SelectProps + FormFieldCommonProps)
|
|
11
|
+
Select.styles.ts — styled-components: SelectContainer, AntdSelect, SelectWrapper, PrefixWrapper, SuffixWrapper
|
|
12
|
+
index.ts — default export, SelectProps type, SelectStyles namespace
|
|
13
|
+
modules.d.ts — imports @testing-library/jest-dom
|
|
14
|
+
style/
|
|
15
|
+
index.less — imports antd select LESS + ds-core variables + select.mixin.less
|
|
16
|
+
select.mixin.less — DS overrides for all antd select class variants (dropdown, items, states)
|
|
17
|
+
__specs__/
|
|
18
|
+
Select.spec.tsx — Vitest + React Testing Library tests
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
## Public exports
|
|
22
|
+
|
|
23
|
+
```ts
|
|
24
|
+
export default SelectWithComponents; // compound: Select + .Option + .OptGroup
|
|
25
|
+
export type { Props as SelectProps } from './Select.types';
|
|
26
|
+
export * as SelectStyles from './Select.styles';
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
### `Select` (default)
|
|
30
|
+
|
|
31
|
+
The default export is a compound component. Sub-components come from Antd directly:
|
|
32
|
+
- `Select.Option` — `AntdSelect.Option`
|
|
33
|
+
- `Select.OptGroup` — `AntdSelect.OptGroup`
|
|
34
|
+
|
|
35
|
+
The component is wrapped in `forwardRef<HTMLDivElement, Props>`.
|
|
36
|
+
|
|
37
|
+
#### DS-specific props
|
|
38
|
+
|
|
39
|
+
| Prop | Type | Default | Description |
|
|
40
|
+
|------|------|---------|-------------|
|
|
41
|
+
| `label` | `ReactNode` | `undefined` | Label above the field (via `FormField`). |
|
|
42
|
+
| `tooltip` | `ReactNode` | `undefined` | Info tooltip next to the label (renders InfoFillS icon trigger). |
|
|
43
|
+
| `tooltipConfig` | `TooltipProps` | `undefined` | Extra config merged into the label Tooltip. |
|
|
44
|
+
| `description` | `ReactNode` | `undefined` | Helper text below the field. |
|
|
45
|
+
| `errorText` | `ReactNode` | `undefined` | Error message below the field; also activates error visual state. |
|
|
46
|
+
| `error` | `boolean` | `undefined` | Activates error visual state without showing a message. |
|
|
47
|
+
| `clearTooltip` | `string` | `undefined` | Tooltip text shown on hover of the clear (×) button. |
|
|
48
|
+
| `prefixel` | `ReactNode` | `undefined` | Addon element attached to the left of the selector (shares border). |
|
|
49
|
+
| `suffixel` | `ReactNode` | `undefined` | Addon element attached to the right of the selector (shares border). |
|
|
50
|
+
| `grey` | `boolean` | `undefined` | Gives the selector a `grey-050` background when not in error state. |
|
|
51
|
+
| `asFormElement` | `boolean` | `undefined` | Forces a 16 px bottom margin even when `errorText` and `description` are absent. |
|
|
52
|
+
| `raw` | `boolean` | `undefined` | Skips the `FormField` wrapper entirely — renders only the selector. `forwardedRef` attaches to `SelectWrapper` instead of `SelectContainer`. |
|
|
53
|
+
| `readOnly` | `boolean` | `undefined` | Disables the antd select while styling it as readable (white bg, `default` cursor, `grey-600` text) instead of the standard disabled look. |
|
|
54
|
+
| `disabled` | `boolean` | `undefined` | Standard disabled state; merged with `readOnly` — either flag disables the underlying Antd select. |
|
|
55
|
+
| `listHeight` | `ReactText` | `256` (Antd default) | Max height of the dropdown list in px. Type is widened to `ReactText` (string or number), overriding Antd's `number`-only constraint. |
|
|
56
|
+
| `selectorStyle` | `CSSObject` | `undefined` | Inline styled-components `css` applied to `.ant-select-selector`. Useful for custom widths or padding. |
|
|
57
|
+
| `style` | `React.CSSProperties` | `undefined` | Applied to `SelectWrapper` (the flex row containing selector + addons). |
|
|
58
|
+
| `className` | `string` | `undefined` | Added to `SelectWrapper`. |
|
|
59
|
+
| `getPopupContainer` | `(triggerNode) => HTMLElement` | `defaultGetPopupContainer` from `@synerise/ds-utils` | Where the dropdown is rendered. |
|
|
60
|
+
|
|
61
|
+
All Antd `SelectProps<T>` are also accepted and forwarded (mode, value, defaultValue, onChange, onSearch, filterOption, showSearch, allowClear, open, etc.).
|
|
62
|
+
|
|
63
|
+
## Usage patterns
|
|
64
|
+
|
|
65
|
+
```tsx
|
|
66
|
+
import Select from '@synerise/ds-select';
|
|
67
|
+
|
|
68
|
+
const { Option, OptGroup } = Select;
|
|
69
|
+
|
|
70
|
+
// Basic with FormField label / description
|
|
71
|
+
<Select label="Platform" description="Choose your platform" defaultValue="insta">
|
|
72
|
+
<OptGroup label="Social">
|
|
73
|
+
<Option value="insta">Instagram</Option>
|
|
74
|
+
<Option value="fb">Facebook</Option>
|
|
75
|
+
</OptGroup>
|
|
76
|
+
</Select>
|
|
77
|
+
|
|
78
|
+
// Multiple mode
|
|
79
|
+
<Select mode="multiple" placeholder="Select tags" allowClear>
|
|
80
|
+
<Option value="a">Alpha</Option>
|
|
81
|
+
<Option value="b">Beta</Option>
|
|
82
|
+
</Select>
|
|
83
|
+
|
|
84
|
+
// Error state with message
|
|
85
|
+
<Select errorText="This field is required" value={undefined} />
|
|
86
|
+
|
|
87
|
+
// Error state without message (e.g. inline in a form row)
|
|
88
|
+
<Select error />
|
|
89
|
+
|
|
90
|
+
// readOnly (looks like a regular input, not grayed out)
|
|
91
|
+
<Select readOnly value="locked-value" />
|
|
92
|
+
|
|
93
|
+
// Grey background variant
|
|
94
|
+
<Select grey placeholder="Search.." showSearch />
|
|
95
|
+
|
|
96
|
+
// Raw (no FormField wrapper, ref goes to SelectWrapper)
|
|
97
|
+
<Select raw ref={myRef} placeholder="Compact" />
|
|
98
|
+
|
|
99
|
+
// Prefix / suffix addons
|
|
100
|
+
<Select prefixel={<span>$</span>} suffixel={<span>USD</span>} />
|
|
101
|
+
|
|
102
|
+
// Clear button tooltip
|
|
103
|
+
<Select allowClear clearTooltip="Clear selection" />
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
## Styling
|
|
107
|
+
|
|
108
|
+
Two-layer styling approach:
|
|
109
|
+
|
|
110
|
+
1. **LESS** (`style/index.less` + `style/select.mixin.less`) — overrides all Antd `.ant-select-*` class rules: dropdown shadows, item hover colors, selected-item checkmark (base64 SVG), arrow icon (base64 SVG), tag/multiple chip styles, focus ring (`blue-600` inset shadow, `blue-050` bg), disabled state.
|
|
111
|
+
|
|
112
|
+
2. **styled-components** (`Select.styles.ts`) — handles DS-specific structural and state variants:
|
|
113
|
+
- `SelectContainer` — `flex-direction: column`; adds `16px` bottom margin when `hasBottomMargin` is true.
|
|
114
|
+
- `SelectWrapper` — `display: flex` row; applies `grey-050` background via `grey` prop (only when not in error state).
|
|
115
|
+
- `AntdSelect` — extends Antd Select; handles `large` size height/line-height overrides, `withPrefixel`/`withSuffixel` border-radius removal, error border/shadow/background (`red-600`/`red-050`), and `readOnly` vs `disabled` visual differentiation.
|
|
116
|
+
- `PrefixWrapper` / `SuffixWrapper` — `grey-050` background, `grey-300` inset box-shadow, rounded outer corners only; negative margin/padding creates flush border join with selector.
|
|
117
|
+
|
|
118
|
+
The dropdown offset is hard-coded to `[0, 8]` px via `dropdownAlign` (STOR-588).
|
|
119
|
+
|
|
120
|
+
The search icon in the selector is replaced with an inline SVG data-URL using the theme's `grey-400` color.
|
|
121
|
+
|
|
122
|
+
## Key dependencies
|
|
123
|
+
|
|
124
|
+
- `antd/lib/select` — base Select, Option, OptGroup
|
|
125
|
+
- `@synerise/ds-form-field` — wraps label / description / error layout (skipped when `raw` is true)
|
|
126
|
+
- `@synerise/ds-icon` — `Close3M` for clear button, `CloseS` for tag remove icon
|
|
127
|
+
- `@synerise/ds-tooltip` — wraps the clear button icon to show `clearTooltip`
|
|
128
|
+
- `@synerise/ds-utils` — `getPopupContainer` default (renders dropdown in nearest scroll parent)
|
|
129
|
+
- `@synerise/ds-core` — theme tokens used in styled-components; LESS variables imported in Less styles
|
|
130
|
+
|
|
131
|
+
## Implementation notes
|
|
132
|
+
|
|
133
|
+
- **`readOnly` is implemented via `disabled`** — both `readOnly` and `disabled` flags are ORed before passing to Antd's `disabled` prop. The visual distinction is achieved only through styled-components CSS on the `readOnly` transient prop.
|
|
134
|
+
- **`it.only` in tests** — the `'should be empty'` test case uses `it.only`, which means the other tests in the file are skipped when running in isolation. This is likely unintentional.
|
|
135
|
+
- **`listHeight` type widening** — Antd types `listHeight` as `number`, but DS overrides it to `ReactText` (`string | number`) to allow string values like `"auto"`.
|
|
136
|
+
- **`selectorStyle` is not in README** — the prop exists in `Select.types.ts` and is wired in `AntdSelect` styled component but is not documented in the README.
|
|
137
|
+
- **`clearIcon` is always overridden** — even if `clearIcon` is passed via `antdProps`, it is re-set internally. Any consumer-provided `clearIcon` will be ignored.
|
|
138
|
+
- **`removeIcon` is always overridden** — same as `clearIcon`; custom `removeIcon` from consumer props is ignored.
|
|
139
|
+
- **Compound component typing** — `SelectWithComponents` is typed as `SelectCompoundComponent = typeof Select & { Option, OptGroup }` using `Object.assign`, so `.Option` and `.OptGroup` are fully typed.
|
|
140
|
+
- **Uses Vitest** — `package.json` has `"test": "jest"`.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@synerise/ds-select",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.34",
|
|
4
4
|
"description": "Select 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,10 +42,10 @@
|
|
|
41
42
|
],
|
|
42
43
|
"types": "dist/index.d.ts",
|
|
43
44
|
"dependencies": {
|
|
44
|
-
"@synerise/ds-form-field": "^1.3.
|
|
45
|
-
"@synerise/ds-icon": "^1.18.
|
|
46
|
-
"@synerise/ds-tooltip": "^1.5.
|
|
47
|
-
"@synerise/ds-utils": "^1.10.
|
|
45
|
+
"@synerise/ds-form-field": "^1.3.24",
|
|
46
|
+
"@synerise/ds-icon": "^1.18.5",
|
|
47
|
+
"@synerise/ds-tooltip": "^1.5.4",
|
|
48
|
+
"@synerise/ds-utils": "^1.10.2",
|
|
48
49
|
"classnames": "^2.5.1"
|
|
49
50
|
},
|
|
50
51
|
"peerDependencies": {
|
|
@@ -54,5 +55,5 @@
|
|
|
54
55
|
"styled-components": "^5.3.3",
|
|
55
56
|
"vitest": "4"
|
|
56
57
|
},
|
|
57
|
-
"gitHead": "
|
|
58
|
+
"gitHead": "d0a43cc43d8528a36f105aceea52ab470edb71d9"
|
|
58
59
|
}
|