@lets-events/react 12.5.1 → 12.6.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/.turbo/turbo-build.log +6 -11
- package/CHANGELOG.md +596 -584
- package/dist/index.js +64 -22
- package/dist/index.mjs +162 -120
- package/package.json +49 -49
- package/src/components/Button/index.tsx +19 -7
- package/src/components/FormFields/RadioGroupFormField.tsx +8 -6
- package/src/components/FormFields/subComponents/FormLabel.tsx +16 -9
- package/src/components/MultiSelect/index.tsx +34 -9
package/package.json
CHANGED
|
@@ -1,50 +1,50 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@lets-events/react",
|
|
3
|
-
"version": "12.
|
|
4
|
-
"description": "",
|
|
5
|
-
"main": "./dist/index.js",
|
|
6
|
-
"module": "./dist/index.mjs",
|
|
7
|
-
"types": "./dist/index.d.ts",
|
|
8
|
-
"scripts": {
|
|
9
|
-
"build": "tsup src/index.tsx --format esm,cjs --dts --external react",
|
|
10
|
-
"dev": "tsup src/index.tsx --format esm,cjs --dts --external react --watch",
|
|
11
|
-
"lint": "eslint src/**/*.ts --fix"
|
|
12
|
-
},
|
|
13
|
-
"keywords": [],
|
|
14
|
-
"author": "",
|
|
15
|
-
"license": "MIT",
|
|
16
|
-
"type": "commonjs",
|
|
17
|
-
"devDependencies": {
|
|
18
|
-
"@lets-events/eslint-config": "*",
|
|
19
|
-
"@lets-events/tokens": "*",
|
|
20
|
-
"@lets-events/ts-config": "*",
|
|
21
|
-
"@types/quill": "^2.0.10",
|
|
22
|
-
"@types/react": "^19.0.10",
|
|
23
|
-
"@types/react-dom": "^19.0.4",
|
|
24
|
-
"react": "^19.0.0",
|
|
25
|
-
"tsup": "^8.4.0",
|
|
26
|
-
"typescript": "^5.8.2"
|
|
27
|
-
},
|
|
28
|
-
"dependencies": {
|
|
29
|
-
"@fortawesome/fontawesome-free": "^5.14.0",
|
|
30
|
-
"@fortawesome/fontawesome-svg-core": "^6.7.2",
|
|
31
|
-
"@fortawesome/free-brands-svg-icons": "^6.7.2",
|
|
32
|
-
"@fortawesome/free-regular-svg-icons": "^6.7.2",
|
|
33
|
-
"@fortawesome/free-solid-svg-icons": "^6.7.2",
|
|
34
|
-
"@fortawesome/react-fontawesome": "^0.2.2",
|
|
35
|
-
"@radix-ui/react-toast": "^1.2.14",
|
|
36
|
-
"@radix-ui/react-tooltip": "^1.2.7",
|
|
37
|
-
"@radix-ui/themes": "^3.2.1",
|
|
38
|
-
"@react-input/mask": "^2.0.4",
|
|
39
|
-
"@stitches/react": "^1.2.8",
|
|
40
|
-
"aws-sdk": "^2.1692.0",
|
|
41
|
-
"dotenv": "^17.2.1",
|
|
42
|
-
"i18n-iso-countries": "^7.14.0",
|
|
43
|
-
"npm": "^11.4.2",
|
|
44
|
-
"quill": "^2.0.3",
|
|
45
|
-
"radix-ui": "^1.4.2",
|
|
46
|
-
"react-day-picker": "^9.6.7",
|
|
47
|
-
"react-hook-form": "^7.57.0",
|
|
48
|
-
"react-quilljs": "^2.0.5"
|
|
49
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "@lets-events/react",
|
|
3
|
+
"version": "12.6.1",
|
|
4
|
+
"description": "",
|
|
5
|
+
"main": "./dist/index.js",
|
|
6
|
+
"module": "./dist/index.mjs",
|
|
7
|
+
"types": "./dist/index.d.ts",
|
|
8
|
+
"scripts": {
|
|
9
|
+
"build": "tsup src/index.tsx --format esm,cjs --dts --external react",
|
|
10
|
+
"dev": "tsup src/index.tsx --format esm,cjs --dts --external react --watch",
|
|
11
|
+
"lint": "eslint src/**/*.ts --fix"
|
|
12
|
+
},
|
|
13
|
+
"keywords": [],
|
|
14
|
+
"author": "",
|
|
15
|
+
"license": "MIT",
|
|
16
|
+
"type": "commonjs",
|
|
17
|
+
"devDependencies": {
|
|
18
|
+
"@lets-events/eslint-config": "*",
|
|
19
|
+
"@lets-events/tokens": "*",
|
|
20
|
+
"@lets-events/ts-config": "*",
|
|
21
|
+
"@types/quill": "^2.0.10",
|
|
22
|
+
"@types/react": "^19.0.10",
|
|
23
|
+
"@types/react-dom": "^19.0.4",
|
|
24
|
+
"react": "^19.0.0",
|
|
25
|
+
"tsup": "^8.4.0",
|
|
26
|
+
"typescript": "^5.8.2"
|
|
27
|
+
},
|
|
28
|
+
"dependencies": {
|
|
29
|
+
"@fortawesome/fontawesome-free": "^5.14.0",
|
|
30
|
+
"@fortawesome/fontawesome-svg-core": "^6.7.2",
|
|
31
|
+
"@fortawesome/free-brands-svg-icons": "^6.7.2",
|
|
32
|
+
"@fortawesome/free-regular-svg-icons": "^6.7.2",
|
|
33
|
+
"@fortawesome/free-solid-svg-icons": "^6.7.2",
|
|
34
|
+
"@fortawesome/react-fontawesome": "^0.2.2",
|
|
35
|
+
"@radix-ui/react-toast": "^1.2.14",
|
|
36
|
+
"@radix-ui/react-tooltip": "^1.2.7",
|
|
37
|
+
"@radix-ui/themes": "^3.2.1",
|
|
38
|
+
"@react-input/mask": "^2.0.4",
|
|
39
|
+
"@stitches/react": "^1.2.8",
|
|
40
|
+
"aws-sdk": "^2.1692.0",
|
|
41
|
+
"dotenv": "^17.2.1",
|
|
42
|
+
"i18n-iso-countries": "^7.14.0",
|
|
43
|
+
"npm": "^11.4.2",
|
|
44
|
+
"quill": "^2.0.3",
|
|
45
|
+
"radix-ui": "^1.4.2",
|
|
46
|
+
"react-day-picker": "^9.6.7",
|
|
47
|
+
"react-hook-form": "^7.57.0",
|
|
48
|
+
"react-quilljs": "^2.0.5"
|
|
49
|
+
}
|
|
50
50
|
}
|
|
@@ -33,13 +33,25 @@ export function Button({ asChild, children, loading, ...props }: ButtonProps) {
|
|
|
33
33
|
|
|
34
34
|
return (
|
|
35
35
|
<ButtonStyled as={Component} {...props} disabled={disabled || loading}>
|
|
36
|
-
{
|
|
37
|
-
<
|
|
38
|
-
|
|
39
|
-
</
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
36
|
+
<div style={{ position: "relative" }}>
|
|
37
|
+
<div style={{ visibility: loading ? "hidden" : undefined }}>
|
|
38
|
+
{children}
|
|
39
|
+
</div>
|
|
40
|
+
{loading && (
|
|
41
|
+
<div
|
|
42
|
+
style={{
|
|
43
|
+
position: "absolute",
|
|
44
|
+
top: "50%",
|
|
45
|
+
left: "50%",
|
|
46
|
+
transform: "translate(-50%, -50%)",
|
|
47
|
+
}}
|
|
48
|
+
>
|
|
49
|
+
<SpinningDiv>
|
|
50
|
+
<Icon name="circle-notch" size={spinnerSize} />
|
|
51
|
+
</SpinningDiv>
|
|
52
|
+
</div>
|
|
53
|
+
)}
|
|
54
|
+
</div>
|
|
43
55
|
</ButtonStyled>
|
|
44
56
|
);
|
|
45
57
|
}
|
|
@@ -4,6 +4,7 @@ import { FormLabel } from "./subComponents/FormLabel";
|
|
|
4
4
|
import { ErrorFormMessage } from "./subComponents/ErrorFormMessage";
|
|
5
5
|
import { RadioGroup, RadioItem } from "../RadioGroup";
|
|
6
6
|
import { getNestedValue } from "../../utils/getNestedValue";
|
|
7
|
+
import { Text } from "../Text";
|
|
7
8
|
|
|
8
9
|
type Option = {
|
|
9
10
|
label: string;
|
|
@@ -68,12 +69,13 @@ export const RadioGroupFormField = ({
|
|
|
68
69
|
fontWeight={fontWeight}
|
|
69
70
|
disabled={disabled}
|
|
70
71
|
>
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
<RadioItem value={option.value}
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
72
|
+
<Flex direction="column">
|
|
73
|
+
{options.map((option) => (
|
|
74
|
+
<RadioItem key={option.value} value={option.value}>
|
|
75
|
+
<Text typography={"labelSmall"}>{option.label}</Text>
|
|
76
|
+
</RadioItem>
|
|
77
|
+
))}
|
|
78
|
+
</Flex>
|
|
77
79
|
</RadioGroup>
|
|
78
80
|
)}
|
|
79
81
|
/>
|
|
@@ -1,4 +1,7 @@
|
|
|
1
|
+
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
1
2
|
import { Text } from "../../Text";
|
|
3
|
+
import { faAsterisk } from "@fortawesome/free-solid-svg-icons";
|
|
4
|
+
import { Flex } from "../../Flex";
|
|
2
5
|
|
|
3
6
|
export type FormLabelProps = {
|
|
4
7
|
name: string;
|
|
@@ -16,14 +19,18 @@ export const FormLabel = ({
|
|
|
16
19
|
if (!label) return null;
|
|
17
20
|
|
|
18
21
|
return (
|
|
19
|
-
<
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
22
|
+
<Flex align={"start"} gap={6}>
|
|
23
|
+
<Text
|
|
24
|
+
typography={"labelMedium"}
|
|
25
|
+
fontWeight={"medium"}
|
|
26
|
+
color={haveError ? "error600" : "dark700"}
|
|
27
|
+
id={`${name}-label`}
|
|
28
|
+
>
|
|
29
|
+
{label}
|
|
30
|
+
</Text>
|
|
31
|
+
{required && (
|
|
32
|
+
<FontAwesomeIcon icon={faAsterisk} fontSize={"8px"} color="#AD1F2B" />
|
|
33
|
+
)}
|
|
34
|
+
</Flex>
|
|
28
35
|
);
|
|
29
36
|
};
|
|
@@ -154,10 +154,8 @@ export const MultiSelect = React.forwardRef<HTMLDivElement, MultiSelectProps>(
|
|
|
154
154
|
<CheckboxGroup
|
|
155
155
|
value={selectedValues}
|
|
156
156
|
onValueChange={(v) => {
|
|
157
|
-
onValueChange?.(v)
|
|
158
|
-
|
|
159
|
-
setAllOptionsSelected(false)
|
|
160
|
-
}
|
|
157
|
+
onValueChange?.(v);
|
|
158
|
+
setAllOptionsSelected((v || []).length === options.length);
|
|
161
159
|
}}
|
|
162
160
|
>
|
|
163
161
|
<StyledFlexWithMaxHeight
|
|
@@ -210,9 +208,9 @@ export const MultiSelect = React.forwardRef<HTMLDivElement, MultiSelectProps>(
|
|
|
210
208
|
justify={"start"}
|
|
211
209
|
css={{ ...(selectedScroll && { maxHeight: maxHeight || "400px" }) }}
|
|
212
210
|
>
|
|
213
|
-
{
|
|
211
|
+
{allOptionsSelected ? (
|
|
214
212
|
<Flex
|
|
215
|
-
key=
|
|
213
|
+
key="all-selected"
|
|
216
214
|
gap={4}
|
|
217
215
|
align={"center"}
|
|
218
216
|
css={{ flexWrap: "wrap" }}
|
|
@@ -220,7 +218,8 @@ export const MultiSelect = React.forwardRef<HTMLDivElement, MultiSelectProps>(
|
|
|
220
218
|
<CloseBtnStyled
|
|
221
219
|
onClick={(e) => {
|
|
222
220
|
e.stopPropagation();
|
|
223
|
-
|
|
221
|
+
onValueChange?.([]);
|
|
222
|
+
setAllOptionsSelected(false);
|
|
224
223
|
}}
|
|
225
224
|
type="button"
|
|
226
225
|
>
|
|
@@ -231,10 +230,36 @@ export const MultiSelect = React.forwardRef<HTMLDivElement, MultiSelectProps>(
|
|
|
231
230
|
fontWeight={"regular"}
|
|
232
231
|
color="dark600"
|
|
233
232
|
>
|
|
234
|
-
{
|
|
233
|
+
{"Todos selecionados"}
|
|
235
234
|
</Text>
|
|
236
235
|
</Flex>
|
|
237
|
-
)
|
|
236
|
+
) : (
|
|
237
|
+
selectedValues.map((value) => (
|
|
238
|
+
<Flex
|
|
239
|
+
key={value}
|
|
240
|
+
gap={4}
|
|
241
|
+
align={"center"}
|
|
242
|
+
css={{ flexWrap: "wrap" }}
|
|
243
|
+
>
|
|
244
|
+
<CloseBtnStyled
|
|
245
|
+
onClick={(e) => {
|
|
246
|
+
e.stopPropagation();
|
|
247
|
+
handleRemove(value);
|
|
248
|
+
}}
|
|
249
|
+
type="button"
|
|
250
|
+
>
|
|
251
|
+
<FontAwesomeIcon icon={faSquareXmark} size="sm" />
|
|
252
|
+
</CloseBtnStyled>
|
|
253
|
+
<Text
|
|
254
|
+
typography={"captionMedium"}
|
|
255
|
+
fontWeight={"regular"}
|
|
256
|
+
color="dark600"
|
|
257
|
+
>
|
|
258
|
+
{labelByValue[value]}
|
|
259
|
+
</Text>
|
|
260
|
+
</Flex>
|
|
261
|
+
))
|
|
262
|
+
)}
|
|
238
263
|
</StyledFlexSelectedItems>
|
|
239
264
|
)}
|
|
240
265
|
</Theme>
|