@lets-events/react 12.5.1 → 12.6.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.
Files changed (6) hide show
  1. package/.turbo/turbo-build.log +6 -6
  2. package/CHANGELOG.md +590 -584
  3. package/dist/index.js +33 -4
  4. package/dist/index.mjs +33 -4
  5. package/package.json +49 -49
  6. package/src/components/MultiSelect/index.tsx +34 -9
package/dist/index.js CHANGED
@@ -9942,9 +9942,7 @@ var MultiSelect = import_react18.default.forwardRef(
9942
9942
  value: selectedValues,
9943
9943
  onValueChange: (v) => {
9944
9944
  onValueChange == null ? void 0 : onValueChange(v);
9945
- if (allOptionsSelected) {
9946
- setAllOptionsSelected(false);
9947
- }
9945
+ setAllOptionsSelected((v || []).length === options.length);
9948
9946
  },
9949
9947
  children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
9950
9948
  StyledFlexWithMaxHeight,
@@ -9994,7 +9992,38 @@ var MultiSelect = import_react18.default.forwardRef(
9994
9992
  align: selectedOrientation === "column" ? "start" : "center",
9995
9993
  justify: "start",
9996
9994
  css: __spreadValues({}, selectedScroll && { maxHeight: maxHeight || "400px" }),
9997
- children: selectedValues.map((value) => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
9995
+ children: allOptionsSelected ? /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
9996
+ Flex2,
9997
+ {
9998
+ gap: 4,
9999
+ align: "center",
10000
+ css: { flexWrap: "wrap" },
10001
+ children: [
10002
+ /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
10003
+ CloseBtnStyled,
10004
+ {
10005
+ onClick: (e) => {
10006
+ e.stopPropagation();
10007
+ onValueChange == null ? void 0 : onValueChange([]);
10008
+ setAllOptionsSelected(false);
10009
+ },
10010
+ type: "button",
10011
+ children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react_fontawesome3.FontAwesomeIcon, { icon: import_free_solid_svg_icons3.faSquareXmark, size: "sm" })
10012
+ }
10013
+ ),
10014
+ /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
10015
+ Text,
10016
+ {
10017
+ typography: "captionMedium",
10018
+ fontWeight: "regular",
10019
+ color: "dark600",
10020
+ children: "Todos selecionados"
10021
+ }
10022
+ )
10023
+ ]
10024
+ },
10025
+ "all-selected"
10026
+ ) : selectedValues.map((value) => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
9998
10027
  Flex2,
9999
10028
  {
10000
10029
  gap: 4,
package/dist/index.mjs CHANGED
@@ -9832,9 +9832,7 @@ var MultiSelect = React10.forwardRef(
9832
9832
  value: selectedValues,
9833
9833
  onValueChange: (v) => {
9834
9834
  onValueChange == null ? void 0 : onValueChange(v);
9835
- if (allOptionsSelected) {
9836
- setAllOptionsSelected(false);
9837
- }
9835
+ setAllOptionsSelected((v || []).length === options.length);
9838
9836
  },
9839
9837
  children: /* @__PURE__ */ jsxs15(
9840
9838
  StyledFlexWithMaxHeight,
@@ -9884,7 +9882,38 @@ var MultiSelect = React10.forwardRef(
9884
9882
  align: selectedOrientation === "column" ? "start" : "center",
9885
9883
  justify: "start",
9886
9884
  css: __spreadValues({}, selectedScroll && { maxHeight: maxHeight || "400px" }),
9887
- children: selectedValues.map((value) => /* @__PURE__ */ jsxs15(
9885
+ children: allOptionsSelected ? /* @__PURE__ */ jsxs15(
9886
+ Flex2,
9887
+ {
9888
+ gap: 4,
9889
+ align: "center",
9890
+ css: { flexWrap: "wrap" },
9891
+ children: [
9892
+ /* @__PURE__ */ jsx27(
9893
+ CloseBtnStyled,
9894
+ {
9895
+ onClick: (e) => {
9896
+ e.stopPropagation();
9897
+ onValueChange == null ? void 0 : onValueChange([]);
9898
+ setAllOptionsSelected(false);
9899
+ },
9900
+ type: "button",
9901
+ children: /* @__PURE__ */ jsx27(FontAwesomeIcon3, { icon: faSquareXmark, size: "sm" })
9902
+ }
9903
+ ),
9904
+ /* @__PURE__ */ jsx27(
9905
+ Text,
9906
+ {
9907
+ typography: "captionMedium",
9908
+ fontWeight: "regular",
9909
+ color: "dark600",
9910
+ children: "Todos selecionados"
9911
+ }
9912
+ )
9913
+ ]
9914
+ },
9915
+ "all-selected"
9916
+ ) : selectedValues.map((value) => /* @__PURE__ */ jsxs15(
9888
9917
  Flex2,
9889
9918
  {
9890
9919
  gap: 4,
package/package.json CHANGED
@@ -1,50 +1,50 @@
1
- {
2
- "name": "@lets-events/react",
3
- "version": "12.5.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
- }
1
+ {
2
+ "name": "@lets-events/react",
3
+ "version": "12.6.0",
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
  }
package/src/components/MultiSelect/index.tsx CHANGED
@@ -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
- if (allOptionsSelected) {
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
- {selectedValues.map((value) => (
211
+ {allOptionsSelected ? (
214
212
  <Flex
215
- key={value}
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
- handleRemove(value);
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
- {labelByValue[value]}
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>