@bolttech/molecules-dropdown 0.19.0 → 0.20.0
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 +20 -24
- package/index.cjs +4 -1
- package/package.json +3 -3
- package/src/lib/molecules-dropdown-with-header-options.d.ts +1 -0
- package/src/lib/molecules-dropdown.d.ts +1 -0
- package/src/lib/molecules-dropdown.type.d.ts +2 -0
- package/src/lib/molecules-reusable-dropdown-component.d.ts +1 -1
package/README.md
CHANGED
|
@@ -22,7 +22,7 @@ You can utilize the **Dropdown** component by importing it and including it in y
|
|
|
22
22
|
|
|
23
23
|
```jsx
|
|
24
24
|
import React from 'react';
|
|
25
|
-
import {Dropdown} from '@bolttech/molecules-dropdown'; // Adjust the path to your component
|
|
25
|
+
import { Dropdown } from '@bolttech/molecules-dropdown'; // Adjust the path to your component
|
|
26
26
|
|
|
27
27
|
const options = [
|
|
28
28
|
{ id: '1', label: 'Option 1', value: 'option1' },
|
|
@@ -37,12 +37,7 @@ function App() {
|
|
|
37
37
|
|
|
38
38
|
return (
|
|
39
39
|
<div>
|
|
40
|
-
<Dropdown
|
|
41
|
-
label="Select an option"
|
|
42
|
-
optionList={options}
|
|
43
|
-
value="option2"
|
|
44
|
-
onChange={handleOptionChange}
|
|
45
|
-
/>
|
|
40
|
+
<Dropdown label="Select an option" optionList={options} value="option2" onChange={handleOptionChange} />
|
|
46
41
|
</div>
|
|
47
42
|
);
|
|
48
43
|
}
|
|
@@ -54,23 +49,24 @@ export default App;
|
|
|
54
49
|
|
|
55
50
|
The **Dropdown** component accepts the following props:
|
|
56
51
|
|
|
57
|
-
| Prop
|
|
58
|
-
|
|
|
59
|
-
| `label`
|
|
60
|
-
| `variant`
|
|
61
|
-
| `required`
|
|
62
|
-
| `optionList`
|
|
63
|
-
| `disabled`
|
|
64
|
-
| `errorMessage`
|
|
65
|
-
| `urlFilterOptions`
|
|
66
|
-
| `id`
|
|
67
|
-
| `dataTestId`
|
|
68
|
-
| `filterOptionsParam`
|
|
69
|
-
| `value`
|
|
70
|
-
| `onChange`
|
|
71
|
-
| `onBlur`
|
|
72
|
-
| `onFocus`
|
|
73
|
-
| `placeholder`
|
|
52
|
+
| Prop | Type | Description |
|
|
53
|
+
| -------------------- | -------------- | --------------------------------------------------------------------------------------------- |
|
|
54
|
+
| `label` | `string` | Label for the dropdown. |
|
|
55
|
+
| `variant` | `string` | Variant style of the dropdown. Defaults to `'grey'`. |
|
|
56
|
+
| `required` | `boolean` | Whether the dropdown is required or not. |
|
|
57
|
+
| `optionList` | `OptionType[]` | Array of selectable options for the dropdown. |
|
|
58
|
+
| `disabled` | `boolean` | Whether the dropdown is disabled or not. |
|
|
59
|
+
| `errorMessage` | `string` | Error message to display when there's an error with the dropdown. |
|
|
60
|
+
| `urlFilterOptions` | `string` | URL for fetching filtered options based on input. |
|
|
61
|
+
| `id` | `string` | Component identification. |
|
|
62
|
+
| `dataTestId` | `string` | The data-testid attribute for testing purposes. |
|
|
63
|
+
| `filterOptionsParam` | `function` | Function to filter options based on input and URL. |
|
|
64
|
+
| `value` | `string` | Currently selected value. |
|
|
65
|
+
| `onChange` | `function` | Callback function triggered when the selected option changes. |
|
|
66
|
+
| `onBlur` | `function` | Callback function triggered when the dropdown loses focus. |
|
|
67
|
+
| `onFocus` | `function` | Callback function triggered when the dropdown is focused. |
|
|
68
|
+
| `placeholder` | `string` | Placeholder text for the input. |
|
|
69
|
+
| `disableSearch` | `boolean` | Boolean that represent if we should disable user searching on the dropdown. Defaults to false |
|
|
74
70
|
|
|
75
71
|
## Functionality
|
|
76
72
|
|
package/index.cjs
CHANGED
|
@@ -2455,12 +2455,13 @@ const ReusableDropdownComponent = _a => {
|
|
|
2455
2455
|
setShowSelectComponent,
|
|
2456
2456
|
showSelectComponent,
|
|
2457
2457
|
setSelectedOptionOnInputValue,
|
|
2458
|
+
disableSearch = false,
|
|
2458
2459
|
inputRef,
|
|
2459
2460
|
placeholder,
|
|
2460
2461
|
onBlur,
|
|
2461
2462
|
onFocus
|
|
2462
2463
|
} = _a,
|
|
2463
|
-
props = __rest(_a, ["id", "dataTestId", "label", "variant", "required", "inputValue", "inputLabel", "disabled", "errorMessage", "onChangeInputValue", "onChangeInputLabel", "setShowSelectComponent", "showSelectComponent", "setSelectedOptionOnInputValue", "inputRef", "placeholder", "onBlur", "onFocus"]);
|
|
2464
|
+
props = __rest(_a, ["id", "dataTestId", "label", "variant", "required", "inputValue", "inputLabel", "disabled", "errorMessage", "onChangeInputValue", "onChangeInputLabel", "setShowSelectComponent", "showSelectComponent", "setSelectedOptionOnInputValue", "disableSearch", "inputRef", "placeholder", "onBlur", "onFocus"]);
|
|
2464
2465
|
const hasError = !!errorMessage;
|
|
2465
2466
|
// we have to type cast because of jest. when testing it sets the type of useTheme to DefaultTheme
|
|
2466
2467
|
const theme = /*#__PURE__*/styled.useTheme();
|
|
@@ -2497,6 +2498,8 @@ const ReusableDropdownComponent = _a => {
|
|
|
2497
2498
|
"$variant": variant,
|
|
2498
2499
|
placeholder: placeholder,
|
|
2499
2500
|
autoComplete: "off",
|
|
2501
|
+
inputMode: disableSearch ? 'none' : 'text',
|
|
2502
|
+
readOnly: disableSearch,
|
|
2500
2503
|
onChange: e => {
|
|
2501
2504
|
var _a, _b;
|
|
2502
2505
|
onChangeInputValue(((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.value) || '');
|
package/package.json
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bolttech/molecules-dropdown",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.20.0",
|
|
4
4
|
"main": "./index.cjs",
|
|
5
5
|
"type": "commonjs",
|
|
6
6
|
"types": "./src/index.d.ts",
|
|
7
7
|
"dependencies": {
|
|
8
8
|
"@bolttech/atoms-icon": "0.22.0",
|
|
9
9
|
"@bolttech/atoms-input": "0.21.0",
|
|
10
|
-
"@bolttech/atoms-select": "0.19.
|
|
10
|
+
"@bolttech/atoms-select": "0.19.2",
|
|
11
11
|
"@bolttech/default-theme": "0.1.0",
|
|
12
12
|
"@bolttech/form-engine": "0.5.0",
|
|
13
|
-
"@bolttech/frontend-foundations": "0.
|
|
13
|
+
"@bolttech/frontend-foundations": "0.3.0",
|
|
14
14
|
"@bolttech/ui-utils": "0.2.0",
|
|
15
15
|
"react": "18.2.0",
|
|
16
16
|
"react-dom": "18.2.0",
|
|
@@ -9,6 +9,7 @@ export declare const DropdownWithHeaders: import("react").ForwardRefExoticCompon
|
|
|
9
9
|
errorMessage?: string | undefined;
|
|
10
10
|
required?: boolean | undefined;
|
|
11
11
|
variant?: import("./molecules-dropdown.type").StyleVariants | undefined;
|
|
12
|
+
disableSearch?: boolean | undefined;
|
|
12
13
|
onBlur?: ((value?: unknown) => void) | ((evt: import("react").FocusEvent<HTMLElement, Element>) => void) | undefined;
|
|
13
14
|
onFocus?: ((value?: unknown) => void) | ((evt: import("react").FocusEvent<HTMLElement, Element>) => void) | undefined;
|
|
14
15
|
} & {
|
|
@@ -9,6 +9,7 @@ export declare const Dropdown: import("react").ForwardRefExoticComponent<import(
|
|
|
9
9
|
errorMessage?: string | undefined;
|
|
10
10
|
required?: boolean | undefined;
|
|
11
11
|
variant?: import("./molecules-dropdown.type").StyleVariants | undefined;
|
|
12
|
+
disableSearch?: boolean | undefined;
|
|
12
13
|
onBlur?: ((value?: unknown) => void) | ((evt: import("react").FocusEvent<HTMLElement, Element>) => void) | undefined;
|
|
13
14
|
onFocus?: ((value?: unknown) => void) | ((evt: import("react").FocusEvent<HTMLElement, Element>) => void) | undefined;
|
|
14
15
|
} & {
|
|
@@ -16,6 +16,7 @@ Default props for Dropdown component
|
|
|
16
16
|
@property errorMessage - An optional string to display as an error message for the dropdown
|
|
17
17
|
@property required - An optional boolean to indicate if the dropdown is required
|
|
18
18
|
@property variant - An optional string to set the variant of the dropdown
|
|
19
|
+
@property disableSearch - An optional boolean representing if the user can type and mobile phones should show the keyboard
|
|
19
20
|
*/
|
|
20
21
|
type DefaultDropdownProps = {
|
|
21
22
|
label: string;
|
|
@@ -26,6 +27,7 @@ type DefaultDropdownProps = {
|
|
|
26
27
|
errorMessage?: string;
|
|
27
28
|
required?: boolean;
|
|
28
29
|
variant?: StyleVariants;
|
|
30
|
+
disableSearch?: boolean;
|
|
29
31
|
onBlur?: ((value?: unknown) => void) | ((evt: React.FocusEvent<HTMLElement, Element>) => void);
|
|
30
32
|
onFocus?: ((value?: unknown) => void) | ((evt: React.FocusEvent<HTMLElement, Element>) => void);
|
|
31
33
|
};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { ReusableDropdownComponentProps } from './molecules-dropdown.type';
|
|
2
|
-
export declare const ReusableDropdownComponent: ({ id, dataTestId, label, variant, required, inputValue, inputLabel, disabled, errorMessage, onChangeInputValue, onChangeInputLabel, setShowSelectComponent, showSelectComponent, setSelectedOptionOnInputValue, inputRef, placeholder, onBlur, onFocus, ...props }: ReusableDropdownComponentProps) => import("react/jsx-runtime").JSX.Element;
|
|
2
|
+
export declare const ReusableDropdownComponent: ({ id, dataTestId, label, variant, required, inputValue, inputLabel, disabled, errorMessage, onChangeInputValue, onChangeInputLabel, setShowSelectComponent, showSelectComponent, setSelectedOptionOnInputValue, disableSearch, inputRef, placeholder, onBlur, onFocus, ...props }: ReusableDropdownComponentProps) => import("react/jsx-runtime").JSX.Element;
|