@synerise/ds-search 1.5.8 → 1.5.9

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/README.md +47 -42
  3. package/package.json +9 -9
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.5.9](https://github.com/Synerise/synerise-design/compare/@synerise/ds-search@1.5.8...@synerise/ds-search@1.5.9) (2026-03-20)
7
+
8
+ **Note:** Version bump only for package @synerise/ds-search
9
+
6
10
  ## [1.5.8](https://github.com/Synerise/synerise-design/compare/@synerise/ds-search@1.5.7...@synerise/ds-search@1.5.8) (2026-03-09)
7
11
 
8
12
  **Note:** Version bump only for package @synerise/ds-search
package/README.md CHANGED
@@ -8,14 +8,12 @@ Search UI Component
8
8
  ## Installation
9
9
 
10
10
  ```
11
- npm i @synerise/ds-search
12
- or
13
- yarn add @synerise/ds-search
11
+ pnpm add @synerise/ds-search
14
12
  ```
15
13
 
16
14
  ## Usage
17
15
 
18
- ```
16
+ ```tsx
19
17
  import Search from '@synerise/ds-search';
20
18
 
21
19
  const parameters = [
@@ -116,6 +114,7 @@ return (
116
114
  | searchWidth | Width of the search input when expanded | number | - |
117
115
  | dropdownWidth | Width of the suggestions dropdown. Will match search input if undefined | number | - |
118
116
  | alwaysExpanded | Enable expanded input on Search component with dropdown | boolean / undefined | - |
117
+ | searchTooltipProps | Props forwarded to the Tooltip wrapping the search input | TooltipProps | - |
119
118
 
120
119
  ### DataSetProps
121
120
 
@@ -126,27 +125,29 @@ return (
126
125
  | rowHeight | Height of item in the list | number | - |
127
126
  | title | Title of the item list | string | - |
128
127
  | tooltip | Tooltip of the item list, displayed when hovering on the icon next to the title | string | - |
129
- | visibleRows | Number of rows visible in the list | string | - |
128
+ | visibleRows | Number of rows visible in the list | number | - |
130
129
 
131
130
  ## Search usage
132
131
 
133
- ```
134
- import { SearchInput } from '@synerise/ds-search/dist/Elements';
132
+ ```tsx
133
+ import { SearchInput } from '@synerise/ds-search';
135
134
 
136
- const [value, setValue] = React.useState<string>('');
137
- <SearchInput
138
- clearTooltip="Clear"
139
- placeholder="Search"
140
- onValueChange={value => {
141
- console.log(value);
142
- setValue(value);
143
- }}
144
- value={value}
145
- onClear={() => {
146
- console.log('Cleared!');
147
- }}
148
- closeOnClickOutside={true}
149
- />
135
+ const [value, setValue] = React.useState<string>('');
136
+ return (
137
+ <SearchInput
138
+ clearTooltip="Clear"
139
+ placeholder="Search"
140
+ onChange={value => {
141
+ console.log(value);
142
+ setValue(value);
143
+ }}
144
+ value={value}
145
+ onClear={() => {
146
+ console.log('Cleared!');
147
+ }}
148
+ closeOnClickOutside={true}
149
+ />
150
+ );
150
151
  ```
151
152
 
152
153
  ### SearchInput
@@ -155,40 +156,44 @@ import { SearchInput } from '@synerise/ds-search/dist/Elements';
155
156
  | ------------------- | ------------------------------------------------------------------------- | ------------------------------------------------------------------------ | ------- |
156
157
  | alwaysHighlight | When set, the input always has blue border when expanded | boolean | `false` |
157
158
  | alwaysExpanded | Boolean value to force expanded state of the input | boolean | `false` |
158
- | clearTooltip | Clear button tooltip text | string | - |
159
+ | clearTooltip | Clear button tooltip text | ReactNode | - |
159
160
  | closeOnClickOutside | Boolean value to prevent / force toggling the input when clicking outside | boolean | `false` |
160
- | filterLabel | Label displayed on the left-hand side of the input caret | object | - |
161
- | focusTrigger | Boolean value for triggering focus on the input | boolean | - |
161
+ | disabled | Disables the entire component including the search button | boolean | - |
162
+ | disableInput | Disables only the text input; search button remains active | boolean | - |
163
+ | filterLabel | Label displayed on the left-hand side of the input caret | `{ icon?: ReactNode; [key: string]: any }` or null | - |
164
+ | focusTrigger | Toggle this boolean to imperatively focus the input | boolean | - |
162
165
  | inputProps | Props object passed to the input element of the component | [InputProps](https://design.synerise.com/docs/components/input/#input-1) | - |
163
- | onValueChange | Callback when input changes | function | - |
166
+ | moveCursorToEnd | Moves caret to end of value when toggled | boolean | - |
167
+ | onChange | Callback when input changes | `(value: string) => void` | - |
164
168
  | onButtonClick | Callback executed when clicking search button | function | - |
165
169
  | onClear | Callback after clicking clear button | function | - |
166
170
  | onClick | Callback executed when clicking inside an input | function | - |
167
171
  | onKeyDown | Callback executed when pressing a keyboard key. | function | - |
168
172
  | onToggle | Callback executed when expanding / narrowing the input wrapper | function | - |
169
173
  | placeholder | Input placeholder | string | - |
170
- | toggleTrigger | Boolean value for triggering expanding / narrowing the input | boolean | - |
174
+ | searchTooltipProps | Props forwarded to the Tooltip wrapping the input | Partial<TooltipProps> | `{}` |
175
+ | toggleTrigger | Toggle this boolean to imperatively expand / collapse the input | boolean | - |
171
176
  | value | The input content value | string | - |
172
177
 
173
178
  ### SearchInput usage
174
179
 
175
- ```
176
- import { SearchInput } from '@synerise/ds-search/dist/Elements';
180
+ ```tsx
181
+ import { SearchInput } from '@synerise/ds-search';
177
182
 
178
183
  const [value, setValue] = React.useState<string>('');
179
184
  return (
180
- <SearchInput
181
- clearTooltip="Clear"
182
- placeholder="Search"
183
- onValueChange={value => {
184
- console.log(value);
185
- setValue(value);
186
- }}
187
- value={value}
188
- onClear={() => {
189
- console.log('Cleared!');
190
- }}
191
- closeOnClickOutside={true}
192
- />
193
- )
185
+ <SearchInput
186
+ clearTooltip="Clear"
187
+ placeholder="Search"
188
+ onChange={value => {
189
+ console.log(value);
190
+ setValue(value);
191
+ }}
192
+ value={value}
193
+ onClear={() => {
194
+ console.log('Cleared!');
195
+ }}
196
+ closeOnClickOutside={true}
197
+ />
198
+ );
194
199
  ```
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-search",
3
- "version": "1.5.8",
3
+ "version": "1.5.9",
4
4
  "description": "Search UI Component for the Synerise Design System",
5
5
  "license": "ISC",
6
6
  "repository": "Synerise/synerise-design",
@@ -35,13 +35,13 @@
35
35
  ],
36
36
  "types": "dist/index.d.ts",
37
37
  "dependencies": {
38
- "@synerise/ds-button": "^1.5.16",
39
- "@synerise/ds-icon": "^1.14.1",
40
- "@synerise/ds-list-item": "^1.4.8",
41
- "@synerise/ds-menu": "^1.4.11",
42
- "@synerise/ds-scrollbar": "^1.2.15",
43
- "@synerise/ds-tooltip": "^1.4.8",
44
- "@synerise/ds-utils": "^1.6.0",
38
+ "@synerise/ds-button": "^1.5.17",
39
+ "@synerise/ds-icon": "^1.15.0",
40
+ "@synerise/ds-list-item": "^1.4.9",
41
+ "@synerise/ds-menu": "^1.4.12",
42
+ "@synerise/ds-scrollbar": "^1.2.16",
43
+ "@synerise/ds-tooltip": "^1.4.9",
44
+ "@synerise/ds-utils": "^1.7.0",
45
45
  "react-onclickoutside": "^6.9.0",
46
46
  "react-window": "^1.8.11"
47
47
  },
@@ -51,5 +51,5 @@
51
51
  "react": ">=16.9.0 <= 18.3.1",
52
52
  "styled-components": "^5.3.3"
53
53
  },
54
- "gitHead": "8dfafc5d7278f09d430f1e7499782d05c76b47c0"
54
+ "gitHead": "8efc031fa688c0b87c7b3915bae93546bb63bcac"
55
55
  }