@loadsmart/loadsmart-ui 5.6.3 → 5.8.1
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 +13 -7
- package/dist/components/Dropdown/Dropdown.types.d.ts +6 -0
- package/dist/components/Dropdown/useDropdown.d.ts +1 -1
- package/dist/components/Select/Select.stories.d.ts +1 -0
- package/dist/components/Select/Select.types.d.ts +4 -0
- package/dist/index.js +173 -173
- package/dist/index.js.map +1 -1
- package/dist/{prop-0c635ee9.js → prop-0f94ff83.js} +1 -1
- package/dist/{prop-0c635ee9.js.map → prop-0f94ff83.js.map} +1 -1
- package/dist/testing/index.js +1 -1
- package/dist/testing/index.js.map +1 -1
- package/dist/theming/index.d.ts +2 -1
- package/dist/theming/index.js.map +1 -1
- package/dist/tools/index.js +1 -1
- package/package.json +3 -5
- package/src/components/Dropdown/Dropdown.context.ts +1 -0
- package/src/components/Dropdown/Dropdown.tsx +12 -4
- package/src/components/Dropdown/Dropdown.types.ts +6 -0
- package/src/components/Dropdown/DropdownTrigger.tsx +5 -4
- package/src/components/Dropdown/useDropdown.ts +9 -8
- package/src/components/Select/Select.fixtures.ts +1 -1
- package/src/components/Select/Select.stories.tsx +98 -15
- package/src/components/Select/Select.test.tsx +105 -9
- package/src/components/Select/Select.tsx +14 -8
- package/src/components/Select/Select.types.ts +5 -0
- package/src/components/Select/useSelect.ts +53 -15
- package/src/stories/startPage.stories.mdx +20 -8
- package/src/testing/SelectEvent/SelectEvent.ts +4 -0
- package/src/theming/index.ts +11 -5
package/README.md
CHANGED
|
@@ -19,8 +19,13 @@ Miranda UI is a [React](https://reactjs.org/) components library. It works with
|
|
|
19
19
|
|
|
20
20
|
## Steps to install
|
|
21
21
|
|
|
22
|
-
1.
|
|
23
|
-
|
|
22
|
+
1. You need to have node 16 or the latest LTS version installed;
|
|
23
|
+
|
|
24
|
+
One option is to use [NVM](https://github.com/nvm-sh/nvm). You can run `nvm use` or set it to run automatically in a directory with a .nvmrc file.
|
|
25
|
+
|
|
26
|
+
1. Install dependencies: `yarn`
|
|
27
|
+
|
|
28
|
+
If you don't have yarn, follow yarn [installation docs](https://classic.yarnpkg.com/lang/en/docs/install/#windows-stable)
|
|
24
29
|
|
|
25
30
|
## Usage
|
|
26
31
|
|
|
@@ -57,7 +62,8 @@ Install all dependencies:
|
|
|
57
62
|
```bash
|
|
58
63
|
yarn
|
|
59
64
|
```
|
|
60
|
-
|
|
65
|
+
|
|
66
|
+
or
|
|
61
67
|
|
|
62
68
|
```bash
|
|
63
69
|
npm i
|
|
@@ -68,7 +74,8 @@ Run the application - you'll be able to see all components documentation in Stor
|
|
|
68
74
|
```bash
|
|
69
75
|
yarn dev
|
|
70
76
|
```
|
|
71
|
-
|
|
77
|
+
|
|
78
|
+
or
|
|
72
79
|
|
|
73
80
|
```bash
|
|
74
81
|
npm run dev
|
|
@@ -81,7 +88,8 @@ To run tests:
|
|
|
81
88
|
```bash
|
|
82
89
|
yarn test
|
|
83
90
|
```
|
|
84
|
-
|
|
91
|
+
|
|
92
|
+
or
|
|
85
93
|
|
|
86
94
|
```bash
|
|
87
95
|
npm run test
|
|
@@ -94,6 +102,4 @@ When creating a new one, you must add its new folder following this pattern.
|
|
|
94
102
|
|
|
95
103
|
It's also essential to include the `.stories` and `.test` files to cover both documentation and quality standards.
|
|
96
104
|
|
|
97
|
-
|
|
98
|
-
|
|
99
105
|
We use [`semantic-release`](https://github.com/semantic-release/) to evaluate our commits and trigger automatic release to NPM. For that, please follow [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/), so your changes will properly be evaluated and published if that's the case.
|
|
@@ -12,6 +12,11 @@ export interface useDropdownReturn {
|
|
|
12
12
|
}
|
|
13
13
|
export interface DropdownProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'onBlur'> {
|
|
14
14
|
disabled?: boolean;
|
|
15
|
+
/**
|
|
16
|
+
* Use this prop to not allow the dropdown to be expanded.
|
|
17
|
+
* While the `disabled` prop applies to the whole dropdown trigger element, this one only disables the TriggerHandle.
|
|
18
|
+
*/
|
|
19
|
+
expandDisabled?: boolean;
|
|
15
20
|
onBlur?: (event?: MouseEvent | TouchEvent | KeyboardEvent) => void;
|
|
16
21
|
}
|
|
17
22
|
export interface GenericDropdownProps extends DropdownProps, useDropdownProps {
|
|
@@ -34,6 +39,7 @@ export interface DropdownMenuSectionProps extends HTMLAttributes<HTMLDivElement>
|
|
|
34
39
|
}
|
|
35
40
|
export interface DropdownContextReturn {
|
|
36
41
|
disabled: boolean;
|
|
42
|
+
expandDisabled: boolean;
|
|
37
43
|
expanded: boolean;
|
|
38
44
|
toggle: () => void;
|
|
39
45
|
}
|
|
@@ -5,7 +5,7 @@ export interface useDropdownProps {
|
|
|
5
5
|
}
|
|
6
6
|
export interface GenericDropdownProps extends DropdownProps, useDropdownProps {
|
|
7
7
|
}
|
|
8
|
-
declare function useDropdown({ disabled, }: DropdownProps): {
|
|
8
|
+
declare function useDropdown({ disabled, expandDisabled, }: DropdownProps): {
|
|
9
9
|
expanded: boolean;
|
|
10
10
|
toggle: () => void;
|
|
11
11
|
expand: () => void;
|
|
@@ -15,3 +15,4 @@ export declare const MultiCustomOptionRendering: Story<SelectProps>;
|
|
|
15
15
|
export declare const CreatableSync: Story<SelectProps>;
|
|
16
16
|
export declare const CreatableAsync: Story<SelectProps>;
|
|
17
17
|
export declare const CustomCreatableOption: Story<SelectProps>;
|
|
18
|
+
export declare const SelectWithFixedCreatableOption: Story<SelectProps>;
|
|
@@ -50,6 +50,7 @@ export declare type Components = {
|
|
|
50
50
|
Empty?: ComponentType<SelectComponentsEmptyProps>;
|
|
51
51
|
CreatableOption?: CreatableOptionType;
|
|
52
52
|
};
|
|
53
|
+
export declare type CreateOptionPosition = 'first' | 'last';
|
|
53
54
|
export interface SelectProps extends DropdownProps {
|
|
54
55
|
name: string;
|
|
55
56
|
placeholder?: string;
|
|
@@ -62,6 +63,8 @@ export interface SelectProps extends DropdownProps {
|
|
|
62
63
|
onChange?: (event: EventLike<Option | Option[] | null>) => void;
|
|
63
64
|
onCreate?: (query: string) => Promise<void | Option> | void | Option;
|
|
64
65
|
onQueryChange?: (e: ChangeEvent<HTMLInputElement>) => void;
|
|
66
|
+
isValidNewOption?: ((query: string) => boolean) | boolean;
|
|
67
|
+
createOptionPosition?: CreateOptionPosition;
|
|
65
68
|
}
|
|
66
69
|
export declare type SelectOptionProps = {
|
|
67
70
|
value: SelectableKeyType;
|
|
@@ -102,6 +105,7 @@ export declare type useSelectReturn = {
|
|
|
102
105
|
};
|
|
103
106
|
getCreatebleProps: () => CreatableProps;
|
|
104
107
|
isCreatable: () => boolean;
|
|
108
|
+
createOptionPosition?: CreateOptionPosition;
|
|
105
109
|
};
|
|
106
110
|
export declare type useSelectExternalReturn = {
|
|
107
111
|
getOption: useSelectReturn['getOption'];
|