@emporix/component-library 1.8.0 → 1.8.2
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/README.md +96 -17
- package/dist/components/dropdown/Dropdown.d.ts +5 -1
- package/dist/components/dropdown/Dropdown.d.ts.map +1 -1
- package/dist/index.es.js +1992 -1985
- package/dist/index.umd.js +26 -26
- package/dist/style.css +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -110,6 +110,9 @@ import { InputText } from '@emporix/component-library'
|
|
|
110
110
|
// Required field
|
|
111
111
|
<InputText label="Name" required placeholder="Enter name" />
|
|
112
112
|
|
|
113
|
+
// With validation error
|
|
114
|
+
<InputText label="Email" required error="Please enter a valid email address" />
|
|
115
|
+
|
|
113
116
|
// Disabled
|
|
114
117
|
<InputText label="Id" placeholder="Enter id" disabled />
|
|
115
118
|
```
|
|
@@ -122,12 +125,88 @@ import { InputText } from '@emporix/component-library'
|
|
|
122
125
|
| tooltip | string | - | If set, shows info icon with this tooltip |
|
|
123
126
|
| required | boolean | false | Shows asterisk on label |
|
|
124
127
|
| inputId | string | - | id for the input (for label association) |
|
|
128
|
+
| error | ReactNode | - | Error text displayed below the input |
|
|
125
129
|
| disabled | boolean | false | Whether the input is disabled |
|
|
126
130
|
| className | string | - | Additional CSS class for the root |
|
|
127
131
|
| data-testid | string | - | Test ID for root and input (suffix `-input`) |
|
|
128
132
|
|
|
129
133
|
All standard HTML input attributes (placeholder, value, onChange, etc.) are supported.
|
|
130
134
|
|
|
135
|
+
### Dropdown
|
|
136
|
+
|
|
137
|
+
A select-style dropdown for choosing one or more items from a list. Supports optional filter/search, editable input, label, required indicator, and validation errors. Hover and focus styles match the InputText component. API inspired by [PrimeReact Dropdown](https://primereact.org/dropdown/).
|
|
138
|
+
|
|
139
|
+
```tsx
|
|
140
|
+
import { Dropdown } from '@emporix/component-library'
|
|
141
|
+
|
|
142
|
+
const options = [
|
|
143
|
+
{ label: 'GBP - British Pound Sterling', value: 'GBP' },
|
|
144
|
+
{ label: 'EUR - Euro', value: 'EUR' },
|
|
145
|
+
{ label: 'USD - US Dollar', value: 'USD' },
|
|
146
|
+
]
|
|
147
|
+
|
|
148
|
+
// With label, filter, and required
|
|
149
|
+
<Dropdown
|
|
150
|
+
value={currency}
|
|
151
|
+
onChange={e => setCurrency(e.value)}
|
|
152
|
+
options={options}
|
|
153
|
+
optionLabel="label"
|
|
154
|
+
optionValue="value"
|
|
155
|
+
placeholder="Select a currency"
|
|
156
|
+
label="Preferred Currency"
|
|
157
|
+
required
|
|
158
|
+
filter
|
|
159
|
+
/>
|
|
160
|
+
|
|
161
|
+
// With validation error (same styling as InputText)
|
|
162
|
+
<Dropdown
|
|
163
|
+
value={currency}
|
|
164
|
+
onChange={e => setCurrency(e.value)}
|
|
165
|
+
options={options}
|
|
166
|
+
placeholder="Select a currency"
|
|
167
|
+
label="Preferred Currency"
|
|
168
|
+
required
|
|
169
|
+
error="Currency is required"
|
|
170
|
+
/>
|
|
171
|
+
|
|
172
|
+
// Multiple selection
|
|
173
|
+
<Dropdown
|
|
174
|
+
value={currencies}
|
|
175
|
+
onChange={e => setCurrencies(Array.isArray(e.value) ? e.value : [])}
|
|
176
|
+
options={options}
|
|
177
|
+
placeholder="Select currencies"
|
|
178
|
+
label="Currencies"
|
|
179
|
+
multiple
|
|
180
|
+
filter
|
|
181
|
+
/>
|
|
182
|
+
```
|
|
183
|
+
|
|
184
|
+
#### Props
|
|
185
|
+
|
|
186
|
+
| Prop | Type | Default | Description |
|
|
187
|
+
| -------------- | ------------------------- | ---------- | --------------------------------------------- |
|
|
188
|
+
| value | unknown | - | Selected value (array when `multiple`) |
|
|
189
|
+
| onChange | (e: ChangeEvent) => void | - | Callback when selection changes |
|
|
190
|
+
| options | T[] | - | Array of options |
|
|
191
|
+
| optionLabel | string | `"label"` | Property name for option label |
|
|
192
|
+
| optionValue | string | `"value"` | Property name for option value |
|
|
193
|
+
| optionDisabled | string | - | Property name for disabled flag on options |
|
|
194
|
+
| placeholder | string | `"Select"` | Placeholder when no value selected |
|
|
195
|
+
| filter | boolean | false | Enable search filter in the overlay |
|
|
196
|
+
| editable | boolean | false | Allow typing in the trigger to filter/select |
|
|
197
|
+
| onEditEnd | (e: EditEndEvent) => void | - | Fired when Enter is pressed in editable mode |
|
|
198
|
+
| multiple | boolean | false | Allow multiple selection |
|
|
199
|
+
| label | ReactNode | - | Label text above the trigger |
|
|
200
|
+
| error | ReactNode | - | Error text displayed below the trigger |
|
|
201
|
+
| required | boolean | false | Shows asterisk on label |
|
|
202
|
+
| inputId | string | - | id for the trigger (for label association) |
|
|
203
|
+
| disabled | boolean | false | Whether the dropdown is disabled |
|
|
204
|
+
| valueTemplate | (option) => ReactNode | - | Custom render for selected value in trigger |
|
|
205
|
+
| itemTemplate | (option) => ReactNode | - | Custom render for each option in the list |
|
|
206
|
+
| className | string | - | Additional CSS class for the root |
|
|
207
|
+
| panelClassName | string | - | Additional CSS class for the overlay panel |
|
|
208
|
+
| data-testid | string | - | Test ID for root, trigger, panel, and options |
|
|
209
|
+
|
|
131
210
|
### SelectButton
|
|
132
211
|
|
|
133
212
|
Choose single or multiple options using buttons. API inspired by [PrimeReact SelectButton](https://primereact.org/selectbutton/). Selected state uses project primary colors.
|
|
@@ -256,24 +335,24 @@ import { Tooltip } from '@emporix/component-library'
|
|
|
256
335
|
|
|
257
336
|
#### Props
|
|
258
337
|
|
|
259
|
-
| Prop | Type
|
|
260
|
-
| -------------- |
|
|
261
|
-
| target | string
|
|
262
|
-
| content | ReactNode
|
|
338
|
+
| Prop | Type | Default | Description |
|
|
339
|
+
| -------------- | ------------------------------------------------- | ------- | --------------------------------------------------------------------------- |
|
|
340
|
+
| target | string | - | CSS selector for anchor elements; when set, `children` is ignored |
|
|
341
|
+
| content | ReactNode | - | Tooltip body; required for children mode; fallback for selector mode |
|
|
263
342
|
| position | `top` \| `bottom` \| `left` \| `right` \| `mouse` | `top` | Placement; `mouse` follows the pointer |
|
|
264
|
-
| event | `hover` \| `focus` \| `both` | `hover` | How the tooltip is triggered
|
|
265
|
-
| showDelay | number
|
|
266
|
-
| hideDelay | number
|
|
267
|
-
| autoHide | boolean
|
|
268
|
-
| mouseTrack | boolean
|
|
269
|
-
| mouseTrackTop | number
|
|
270
|
-
| mouseTrackLeft | number
|
|
271
|
-
| disabled | boolean
|
|
272
|
-
| className | string
|
|
273
|
-
| panelClassName | string
|
|
274
|
-
| id | string
|
|
275
|
-
| children | ReactNode
|
|
276
|
-
| data-testid | string
|
|
343
|
+
| event | `hover` \| `focus` \| `both` | `hover` | How the tooltip is triggered |
|
|
344
|
+
| showDelay | number | `0` | Delay before show (ms) |
|
|
345
|
+
| hideDelay | number | `0` | Delay before hide (ms) |
|
|
346
|
+
| autoHide | boolean | `true` | When `false`, pointer can move to the tooltip without hiding it |
|
|
347
|
+
| mouseTrack | boolean | `false` | While visible, position tracks the pointer |
|
|
348
|
+
| mouseTrackTop | number | `0` | Vertical offset when using mouse track |
|
|
349
|
+
| mouseTrackLeft | number | `0` | Horizontal offset when using mouse track |
|
|
350
|
+
| disabled | boolean | `false` | Disable the tooltip |
|
|
351
|
+
| className | string | - | Extra class on the anchor wrapper (children mode) or merged on single child |
|
|
352
|
+
| panelClassName | string | - | Extra class on the floating panel |
|
|
353
|
+
| id | string | - | Optional id for the tooltip (`aria-describedby` on the anchor) |
|
|
354
|
+
| children | ReactNode | - | Single element recommended; multiple nodes are wrapped in an inline span |
|
|
355
|
+
| data-testid | string | - | Adds `data-testid` on the panel as `{id}-panel` |
|
|
277
356
|
|
|
278
357
|
Selector targets can override position per element with `data-pr-position`. Escape closes the tooltip.
|
|
279
358
|
|
|
@@ -79,6 +79,10 @@ export interface DropdownProps<T = DropdownOption> {
|
|
|
79
79
|
* Label text displayed above the input
|
|
80
80
|
*/
|
|
81
81
|
label?: React.ReactNode;
|
|
82
|
+
/**
|
|
83
|
+
* Error text displayed below the trigger
|
|
84
|
+
*/
|
|
85
|
+
error?: React.ReactNode;
|
|
82
86
|
/**
|
|
83
87
|
* Input element id for label association
|
|
84
88
|
*/
|
|
@@ -108,5 +112,5 @@ export interface DropdownProps<T = DropdownOption> {
|
|
|
108
112
|
*/
|
|
109
113
|
'data-testid'?: string;
|
|
110
114
|
}
|
|
111
|
-
export declare const Dropdown: <T extends Record<string, unknown>>({ value, onChange, multiple, onEditEnd, options, optionLabel, optionValue, optionDisabled, placeholder, filter, editable, disabled, required, label, inputId, className, panelClassName, valueTemplate, itemTemplate, "data-testid": testId, }: DropdownProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
115
|
+
export declare const Dropdown: <T extends Record<string, unknown>>({ value, onChange, multiple, onEditEnd, options, optionLabel, optionValue, optionDisabled, placeholder, filter, editable, disabled, required, label, error, inputId, className, panelClassName, valueTemplate, itemTemplate, "data-testid": testId, }: DropdownProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
112
116
|
//# sourceMappingURL=Dropdown.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown/Dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsD,MAAM,OAAO,CAAA;AAI1E,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;CACvB;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,cAAc,CAAC,OAAO,CAAC,GAAG,cAAc,CAAC,OAAO,CAAC,EAAE,GAAG,IAAI,CAAA;IACjE,aAAa,EAAE,KAAK,CAAC,cAAc,CAAA;CACpC;AAED,MAAM,WAAW,oBAAoB;IACnC,iEAAiE;IACjE,KAAK,EAAE,MAAM,CAAA;IACb,wFAAwF;IACxF,aAAa,EAAE,cAAc,CAAC,OAAO,CAAC,GAAG,IAAI,CAAA;IAC7C,aAAa,EAAE,KAAK,CAAC,aAAa,CAAA;CACnC;AAED,MAAM,WAAW,aAAa,CAAC,CAAC,GAAG,cAAc;IAC/C;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,mBAAmB,KAAK,IAAI,CAAA;IAC3C;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,OAAO,EAAE,CAAC,EAAE,CAAA;IACZ;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC,GAAG,MAAM,CAAA;IAC9B;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC,GAAG,MAAM,CAAA;IAC9B;;;;;OAKG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC,GAAG,MAAM,CAAA;IACjC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,oBAAoB,KAAK,IAAI,CAAA;IAC7C;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB;;;;OAIG;IACH,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,GAAG,IAAI,KAAK,KAAK,CAAC,SAAS,CAAA;IACrD;;;;OAIG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAA;IAC7C;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AA4BD,eAAO,MAAM,QAAQ,GAAI,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,
|
|
1
|
+
{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown/Dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsD,MAAM,OAAO,CAAA;AAI1E,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;CACvB;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,cAAc,CAAC,OAAO,CAAC,GAAG,cAAc,CAAC,OAAO,CAAC,EAAE,GAAG,IAAI,CAAA;IACjE,aAAa,EAAE,KAAK,CAAC,cAAc,CAAA;CACpC;AAED,MAAM,WAAW,oBAAoB;IACnC,iEAAiE;IACjE,KAAK,EAAE,MAAM,CAAA;IACb,wFAAwF;IACxF,aAAa,EAAE,cAAc,CAAC,OAAO,CAAC,GAAG,IAAI,CAAA;IAC7C,aAAa,EAAE,KAAK,CAAC,aAAa,CAAA;CACnC;AAED,MAAM,WAAW,aAAa,CAAC,CAAC,GAAG,cAAc;IAC/C;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,mBAAmB,KAAK,IAAI,CAAA;IAC3C;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,OAAO,EAAE,CAAC,EAAE,CAAA;IACZ;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC,GAAG,MAAM,CAAA;IAC9B;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC,GAAG,MAAM,CAAA;IAC9B;;;;;OAKG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC,GAAG,MAAM,CAAA;IACjC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,oBAAoB,KAAK,IAAI,CAAA;IAC7C;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB;;;;OAIG;IACH,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,GAAG,IAAI,KAAK,KAAK,CAAC,SAAS,CAAA;IACrD;;;;OAIG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAA;IAC7C;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AA4BD,eAAO,MAAM,QAAQ,GAAI,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,uPAsBzD,aAAa,CAAC,CAAC,CAAC,4CAyYlB,CAAA"}
|