@lets-events/react 12.8.3 → 12.8.4

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 (8) hide show
  1. package/.turbo/turbo-build.log +8 -8
  2. package/CHANGELOG.md +6 -0
  3. package/dist/index.d.mts +3 -0
  4. package/dist/index.d.ts +3 -0
  5. package/dist/index.js +39 -4
  6. package/dist/index.mjs +39 -4
  7. package/package.json +1 -1
  8. package/src/components/MultiSelect/index.tsx +38 -1
package/.turbo/turbo-build.log CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
 
3
- > @lets-events/react@12.8.3 build
3
+ > @lets-events/react@12.8.4 build
4
4
  > tsup src/index.tsx --format esm,cjs --dts --external react
5
5
 
6
6
  CLI Building entry: src/index.tsx
@@ -10,12 +10,12 @@
10
10
  CLI Target: es6
11
11
  ESM Build start
12
12
  CJS Build start
13
- CJS dist/index.js 411.36 KB
14
- CJS ⚡️ Build success in 459ms
15
- ESM dist/index.mjs 395.98 KB
16
- ESM ⚡️ Build success in 460ms
13
+ ESM dist/index.mjs 397.40 KB
14
+ ESM ⚡️ Build success in 76497ms
15
+ CJS dist/index.js 412.83 KB
16
+ CJS ⚡️ Build success in 76497ms
17
17
  DTS Build start
18
- DTS ⚡️ Build success in 8332ms
19
- DTS dist/index.d.mts 404.05 KB
20
- DTS dist/index.d.ts 404.05 KB
18
+ DTS ⚡️ Build success in 9188ms
19
+ DTS dist/index.d.mts 404.15 KB
20
+ DTS dist/index.d.ts 404.15 KB
21
21
  ⠙
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @lets-events/react
2
2
 
3
+ ## 12.8.4
4
+
5
+ ### Patch Changes
6
+
7
+ - MultiSelect ShowMoreButton
8
+
3
9
  ## 12.8.3
4
10
 
5
11
  ### Patch Changes
package/dist/index.d.mts CHANGED
@@ -13548,6 +13548,9 @@ type MultiSelectProps = ComponentProps<typeof StyledTrigger> & {
13548
13548
  selectedAllOptions?: boolean;
13549
13549
  selectedAllText?: string;
13550
13550
  selectedScroll?: boolean;
13551
+ showMoreButton?: boolean;
13552
+ showMoreButtonLabel?: string;
13553
+ showMoreButtonOnClick?: () => void;
13551
13554
  };
13552
13555
  declare const MultiSelect: React__default.ForwardRefExoticComponent<Omit<MultiSelectProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
13553
13556
 
package/dist/index.d.ts CHANGED
@@ -13548,6 +13548,9 @@ type MultiSelectProps = ComponentProps<typeof StyledTrigger> & {
13548
13548
  selectedAllOptions?: boolean;
13549
13549
  selectedAllText?: string;
13550
13550
  selectedScroll?: boolean;
13551
+ showMoreButton?: boolean;
13552
+ showMoreButtonLabel?: string;
13553
+ showMoreButtonOnClick?: () => void;
13551
13554
  };
13552
13555
  declare const MultiSelect: React__default.ForwardRefExoticComponent<Omit<MultiSelectProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
13553
13556
 
package/dist/index.js CHANGED
@@ -9928,7 +9928,10 @@ var MultiSelect = import_react18.default.forwardRef(
9928
9928
  maxHeight,
9929
9929
  selectedAllOptions = false,
9930
9930
  selectedAllText,
9931
- selectedScroll = false
9931
+ selectedScroll = false,
9932
+ showMoreButton = false,
9933
+ showMoreButtonLabel = "Carregar mais",
9934
+ showMoreButtonOnClick
9932
9935
  }, fowardedRef) => {
9933
9936
  const [isOpen, setIsOpen] = (0, import_react18.useState)(false);
9934
9937
  const triggerRef = (0, import_react18.useRef)(null);
@@ -10056,19 +10059,51 @@ var MultiSelect = import_react18.default.forwardRef(
10056
10059
  ]
10057
10060
  }
10058
10061
  ),
10059
- options.map(({ value, label }, i) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(CheckboxItem, { value, css: itemStyle, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Text, { typography: "labelSmall", children: label }) }, i))
10062
+ options.map(({ value, label }, i) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(CheckboxItem, { value, css: itemStyle, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Text, { typography: "labelSmall", children: label }) }, i)),
10063
+ showMoreButton && showMoreButtonOnClick && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
10064
+ Button,
10065
+ {
10066
+ variant: "menuDropdownItem",
10067
+ color: "brand",
10068
+ onClick: showMoreButtonOnClick,
10069
+ fontWeight: "semibold",
10070
+ type: "button",
10071
+ css: {
10072
+ justifyContent: "flex-start",
10073
+ color: "var(--colors-brand500)!important"
10074
+ },
10075
+ children: showMoreButtonLabel
10076
+ }
10077
+ )
10060
10078
  ]
10061
10079
  }
10062
10080
  )
10063
10081
  }
10064
- ) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
10082
+ ) : /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
10065
10083
  StyledFlexWithMaxHeight,
10066
10084
  {
10067
10085
  direction: "column",
10068
10086
  gap: 8,
10069
10087
  hasMaxHeight: !!maxHeight,
10070
10088
  style: maxHeight ? { maxHeight } : void 0,
10071
- children: options.map(({ value, label }, i) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(StyledItem2, { onClick: () => handleItemClick(value), children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Text, { typography: "labelSmall", children: label }) }, i))
10089
+ children: [
10090
+ options.map(({ value, label }, i) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(StyledItem2, { onClick: () => handleItemClick(value), children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Text, { typography: "labelSmall", children: label }) }, i)),
10091
+ showMoreButton && showMoreButtonOnClick && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
10092
+ Button,
10093
+ {
10094
+ variant: "menuDropdownItem",
10095
+ color: "brand",
10096
+ onClick: showMoreButtonOnClick,
10097
+ fontWeight: "semibold",
10098
+ type: "button",
10099
+ css: {
10100
+ justifyContent: "flex-start",
10101
+ color: "var(--colors-brand500)!important"
10102
+ },
10103
+ children: showMoreButtonLabel
10104
+ }
10105
+ )
10106
+ ]
10072
10107
  }
10073
10108
  )
10074
10109
  }
package/dist/index.mjs CHANGED
@@ -9816,7 +9816,10 @@ var MultiSelect = React10.forwardRef(
9816
9816
  maxHeight,
9817
9817
  selectedAllOptions = false,
9818
9818
  selectedAllText,
9819
- selectedScroll = false
9819
+ selectedScroll = false,
9820
+ showMoreButton = false,
9821
+ showMoreButtonLabel = "Carregar mais",
9822
+ showMoreButtonOnClick
9820
9823
  }, fowardedRef) => {
9821
9824
  const [isOpen, setIsOpen] = useState8(false);
9822
9825
  const triggerRef = useRef8(null);
@@ -9944,19 +9947,51 @@ var MultiSelect = React10.forwardRef(
9944
9947
  ]
9945
9948
  }
9946
9949
  ),
9947
- options.map(({ value, label }, i) => /* @__PURE__ */ jsx27(CheckboxItem, { value, css: itemStyle, children: /* @__PURE__ */ jsx27(Text, { typography: "labelSmall", children: label }) }, i))
9950
+ options.map(({ value, label }, i) => /* @__PURE__ */ jsx27(CheckboxItem, { value, css: itemStyle, children: /* @__PURE__ */ jsx27(Text, { typography: "labelSmall", children: label }) }, i)),
9951
+ showMoreButton && showMoreButtonOnClick && /* @__PURE__ */ jsx27(
9952
+ Button,
9953
+ {
9954
+ variant: "menuDropdownItem",
9955
+ color: "brand",
9956
+ onClick: showMoreButtonOnClick,
9957
+ fontWeight: "semibold",
9958
+ type: "button",
9959
+ css: {
9960
+ justifyContent: "flex-start",
9961
+ color: "var(--colors-brand500)!important"
9962
+ },
9963
+ children: showMoreButtonLabel
9964
+ }
9965
+ )
9948
9966
  ]
9949
9967
  }
9950
9968
  )
9951
9969
  }
9952
- ) : /* @__PURE__ */ jsx27(
9970
+ ) : /* @__PURE__ */ jsxs16(
9953
9971
  StyledFlexWithMaxHeight,
9954
9972
  {
9955
9973
  direction: "column",
9956
9974
  gap: 8,
9957
9975
  hasMaxHeight: !!maxHeight,
9958
9976
  style: maxHeight ? { maxHeight } : void 0,
9959
- children: options.map(({ value, label }, i) => /* @__PURE__ */ jsx27(StyledItem2, { onClick: () => handleItemClick(value), children: /* @__PURE__ */ jsx27(Text, { typography: "labelSmall", children: label }) }, i))
9977
+ children: [
9978
+ options.map(({ value, label }, i) => /* @__PURE__ */ jsx27(StyledItem2, { onClick: () => handleItemClick(value), children: /* @__PURE__ */ jsx27(Text, { typography: "labelSmall", children: label }) }, i)),
9979
+ showMoreButton && showMoreButtonOnClick && /* @__PURE__ */ jsx27(
9980
+ Button,
9981
+ {
9982
+ variant: "menuDropdownItem",
9983
+ color: "brand",
9984
+ onClick: showMoreButtonOnClick,
9985
+ fontWeight: "semibold",
9986
+ type: "button",
9987
+ css: {
9988
+ justifyContent: "flex-start",
9989
+ color: "var(--colors-brand500)!important"
9990
+ },
9991
+ children: showMoreButtonLabel
9992
+ }
9993
+ )
9994
+ ]
9960
9995
  }
9961
9996
  )
9962
9997
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lets-events/react",
3
- "version": "12.8.3",
3
+ "version": "12.8.4",
4
4
  "description": "",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.mjs",
package/src/components/MultiSelect/index.tsx CHANGED
@@ -11,6 +11,7 @@ import {
11
11
  import { colors } from "@lets-events/tokens";
12
12
  import { ComponentProps, useMemo } from "react";
13
13
  import { Flex } from "../Flex";
14
+ import { Button } from "../Button";
14
15
  import { CloseBtnStyled, ButtonSelectAllStyled, itemStyle, StyledContent, StyledFlexSelectedItems, StyledFlexWithMaxHeight, StyledItem, StyledText, StyledTrigger } from "./styledComponents";
15
16
 
16
17
  export type MultiSelectProps = ComponentProps<typeof StyledTrigger> & {
@@ -31,6 +32,9 @@ export type MultiSelectProps = ComponentProps<typeof StyledTrigger> & {
31
32
  selectedAllOptions?: boolean;
32
33
  selectedAllText?: string;
33
34
  selectedScroll?: boolean;
35
+ showMoreButton?: boolean;
36
+ showMoreButtonLabel?: string;
37
+ showMoreButtonOnClick?: () => void;
34
38
  };
35
39
 
36
40
  export const MultiSelect = React.forwardRef<HTMLDivElement, MultiSelectProps>(
@@ -50,7 +54,10 @@ export const MultiSelect = React.forwardRef<HTMLDivElement, MultiSelectProps>(
50
54
  maxHeight,
51
55
  selectedAllOptions = false,
52
56
  selectedAllText,
53
- selectedScroll = false
57
+ selectedScroll = false,
58
+ showMoreButton = false,
59
+ showMoreButtonLabel = "Carregar mais",
60
+ showMoreButtonOnClick
54
61
  },
55
62
  fowardedRef
56
63
  ) => {
@@ -182,6 +189,21 @@ export const MultiSelect = React.forwardRef<HTMLDivElement, MultiSelectProps>(
182
189
  <Text typography={"labelSmall"}>{label}</Text>
183
190
  </CheckboxItem>
184
191
  ))}
192
+ {showMoreButton && showMoreButtonOnClick && (
193
+ <Button
194
+ variant="menuDropdownItem"
195
+ color="brand"
196
+ onClick={showMoreButtonOnClick}
197
+ fontWeight="semibold"
198
+ type="button"
199
+ css={{
200
+ justifyContent: "flex-start",
201
+ color: "var(--colors-brand500)!important",
202
+ }}
203
+ >
204
+ {showMoreButtonLabel}
205
+ </Button>
206
+ )}
185
207
  </StyledFlexWithMaxHeight>
186
208
  </CheckboxGroup>
187
209
  ) : (
@@ -196,6 +218,21 @@ export const MultiSelect = React.forwardRef<HTMLDivElement, MultiSelectProps>(
196
218
  <Text typography={"labelSmall"}>{label}</Text>
197
219
  </StyledItem>
198
220
  ))}
221
+ {showMoreButton && showMoreButtonOnClick && (
222
+ <Button
223
+ variant="menuDropdownItem"
224
+ color="brand"
225
+ onClick={showMoreButtonOnClick}
226
+ fontWeight="semibold"
227
+ type="button"
228
+ css={{
229
+ justifyContent: "flex-start",
230
+ color: "var(--colors-brand500)!important",
231
+ }}
232
+ >
233
+ {showMoreButtonLabel}
234
+ </Button>
235
+ )}
199
236
  </StyledFlexWithMaxHeight>
200
237
  )}
201
238
  </StyledContent>