@emporix/component-library 1.8.1 → 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 +79 -0
- package/dist/components/dropdown/Dropdown.d.ts +5 -1
- package/dist/components/dropdown/Dropdown.d.ts.map +1 -1
- package/dist/index.es.js +1987 -1980
- 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.
|
|
@@ -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"}
|