@lets-events/react 12.8.2 → 12.8.4

package/.turbo/turbo-build.log

@@ -1,6 +1,6 @@
 
 
-> @lets-events/react@12.8.2 build
+> @lets-events/react@12.8.4 build
 > tsup src/index.tsx  --format esm,cjs --dts --external react
 
 CLI Building entry: src/index.tsx
@@ -10,12 +10,12 @@
 CLI Target: es6
 ESM Build start
 CJS Build start
-CJS dist/index.js 410.67 KB
-CJS ⚡️ Build success in 289ms
-ESM dist/index.mjs 395.31 KB
-ESM ⚡️ Build success in 291ms
+ESM dist/index.mjs 397.40 KB
+ESM ⚡️ Build success in 76497ms
+CJS dist/index.js 412.83 KB
+CJS ⚡️ Build success in 76497ms
 DTS Build start
-DTS ⚡️ Build success in 6018ms
-DTS dist/index.d.mts 403.89 KB
-DTS dist/index.d.ts  403.89 KB
+DTS ⚡️ Build success in 9188ms
+DTS dist/index.d.mts 404.15 KB
+DTS dist/index.d.ts  404.15 KB
 ⠙

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @lets-events/react
 
+## 12.8.4
+
+### Patch Changes
+
+- MultiSelect ShowMoreButton
+
+## 12.8.3
+
+### Patch Changes
+
+- Select Show More Button
+
 ## 12.8.2
 
 ### Patch Changes

package/dist/index.d.mts

@@ -13548,6 +13548,9 @@ type MultiSelectProps = ComponentProps<typeof StyledTrigger> & {
     selectedAllOptions?: boolean;
     selectedAllText?: string;
     selectedScroll?: boolean;
+    showMoreButton?: boolean;
+    showMoreButtonLabel?: string;
+    showMoreButtonOnClick?: () => void;
 };
 declare const MultiSelect: React__default.ForwardRefExoticComponent<Omit<MultiSelectProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
 
@@ -15249,13 +15252,16 @@ type SelectFormFieldProps = {
     required?: boolean;
     placeholder?: string;
     options: Option[];
+    showMoreButton?: boolean;
+    showMoreButtonLabel?: string;
+    showMoreButtonOnClick?: () => void;
     validation?: {
         validate?: (value: string) => boolean | string;
     };
     validationErrorMessage?: string;
     defaultValue?: string;
 };
-declare const SelectFormField: ({ name, label, required, placeholder, options, validation, validationErrorMessage, defaultValue, }: SelectFormFieldProps) => react_jsx_runtime.JSX.Element;
+declare const SelectFormField: ({ name, label, required, placeholder, options, showMoreButton, showMoreButtonLabel, showMoreButtonOnClick, validation, validationErrorMessage, defaultValue, }: SelectFormFieldProps) => react_jsx_runtime.JSX.Element;
 
 type SwitchFormFieldProps = {
     name: string;

package/dist/index.d.ts

@@ -13548,6 +13548,9 @@ type MultiSelectProps = ComponentProps<typeof StyledTrigger> & {
     selectedAllOptions?: boolean;
     selectedAllText?: string;
     selectedScroll?: boolean;
+    showMoreButton?: boolean;
+    showMoreButtonLabel?: string;
+    showMoreButtonOnClick?: () => void;
 };
 declare const MultiSelect: React__default.ForwardRefExoticComponent<Omit<MultiSelectProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
 
@@ -15249,13 +15252,16 @@ type SelectFormFieldProps = {
     required?: boolean;
     placeholder?: string;
     options: Option[];
+    showMoreButton?: boolean;
+    showMoreButtonLabel?: string;
+    showMoreButtonOnClick?: () => void;
     validation?: {
         validate?: (value: string) => boolean | string;
     };
     validationErrorMessage?: string;
     defaultValue?: string;
 };
-declare const SelectFormField: ({ name, label, required, placeholder, options, validation, validationErrorMessage, defaultValue, }: SelectFormFieldProps) => react_jsx_runtime.JSX.Element;
+declare const SelectFormField: ({ name, label, required, placeholder, options, showMoreButton, showMoreButtonLabel, showMoreButtonOnClick, validation, validationErrorMessage, defaultValue, }: SelectFormFieldProps) => react_jsx_runtime.JSX.Element;
 
 type SwitchFormFieldProps = {
     name: string;

package/dist/index.js

@@ -9928,7 +9928,10 @@ var MultiSelect = import_react18.default.forwardRef(
     maxHeight,
     selectedAllOptions = false,
     selectedAllText,
-    selectedScroll = false
+    selectedScroll = false,
+    showMoreButton = false,
+    showMoreButtonLabel = "Carregar mais",
+    showMoreButtonOnClick
   }, fowardedRef) => {
     const [isOpen, setIsOpen] = (0, import_react18.useState)(false);
     const triggerRef = (0, import_react18.useRef)(null);
@@ -10056,19 +10059,51 @@ var MultiSelect = import_react18.default.forwardRef(
                           ]
                         }
                       ),
-                      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))
+                      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)),
+                      showMoreButton && showMoreButtonOnClick && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                        Button,
+                        {
+                          variant: "menuDropdownItem",
+                          color: "brand",
+                          onClick: showMoreButtonOnClick,
+                          fontWeight: "semibold",
+                          type: "button",
+                          css: {
+                            justifyContent: "flex-start",
+                            color: "var(--colors-brand500)!important"
+                          },
+                          children: showMoreButtonLabel
+                        }
+                      )
                     ]
                   }
                 )
               }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+            ) : /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
               StyledFlexWithMaxHeight,
               {
                 direction: "column",
                 gap: 8,
                 hasMaxHeight: !!maxHeight,
                 style: maxHeight ? { maxHeight } : void 0,
-                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))
+                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)),
+                  showMoreButton && showMoreButtonOnClick && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                    Button,
+                    {
+                      variant: "menuDropdownItem",
+                      color: "brand",
+                      onClick: showMoreButtonOnClick,
+                      fontWeight: "semibold",
+                      type: "button",
+                      css: {
+                        justifyContent: "flex-start",
+                        color: "var(--colors-brand500)!important"
+                      },
+                      children: showMoreButtonLabel
+                    }
+                  )
+                ]
               }
             )
           }
@@ -10898,6 +10933,9 @@ var SelectFormField = ({
   required,
   placeholder = "Selecione",
   options,
+  showMoreButton = false,
+  showMoreButtonLabel = "Carregar mais",
+  showMoreButtonOnClick,
   validation,
   validationErrorMessage = "Este campo \xE9 obrigat\xF3rio.",
   defaultValue
@@ -10931,24 +10969,38 @@ var SelectFormField = ({
         defaultValue: defaultValue || "",
         render: ({ field: { value, onChange } }) => {
           const selectedOption = options.find((opt) => opt.value === value);
-          return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
             DropdownMenu2,
             {
               placeholder: (selectedOption == null ? void 0 : selectedOption.label) || placeholder,
               fontWeight: "regular",
               typography: "labelLarge",
               color: haveError ? "error" : "default",
-              children: options.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-                DropdownMenuItem,
-                {
-                  value: option.value,
-                  onSelect: () => onChange(option.value),
-                  fontWeight: "regular",
-                  typography: "labelLarge",
-                  children: option.label
-                },
-                `${option.value}${index}`
-              ))
+              children: [
+                options.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+                  DropdownMenuItem,
+                  {
+                    value: option.value,
+                    onSelect: () => onChange(option.value),
+                    fontWeight: "regular",
+                    typography: "labelLarge",
+                    children: option.label
+                  },
+                  `${option.value}${index}`
+                )),
+                showMoreButton && showMoreButtonOnClick && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+                  Button,
+                  {
+                    variant: "menuDropdownItem",
+                    color: "brand",
+                    onClick: showMoreButtonOnClick,
+                    fontWeight: "semibold",
+                    type: "button",
+                    css: { justifyContent: "flex-start", color: "var(--colors-brand500)!important" },
+                    children: showMoreButtonLabel
+                  }
+                )
+              ]
             }
           );
         }

package/dist/index.mjs

@@ -9816,7 +9816,10 @@ var MultiSelect = React10.forwardRef(
     maxHeight,
     selectedAllOptions = false,
     selectedAllText,
-    selectedScroll = false
+    selectedScroll = false,
+    showMoreButton = false,
+    showMoreButtonLabel = "Carregar mais",
+    showMoreButtonOnClick
   }, fowardedRef) => {
     const [isOpen, setIsOpen] = useState8(false);
     const triggerRef = useRef8(null);
@@ -9944,19 +9947,51 @@ var MultiSelect = React10.forwardRef(
                           ]
                         }
                       ),
-                      options.map(({ value, label }, i) => /* @__PURE__ */ jsx27(CheckboxItem, { value, css: itemStyle, children: /* @__PURE__ */ jsx27(Text, { typography: "labelSmall", children: label }) }, i))
+                      options.map(({ value, label }, i) => /* @__PURE__ */ jsx27(CheckboxItem, { value, css: itemStyle, children: /* @__PURE__ */ jsx27(Text, { typography: "labelSmall", children: label }) }, i)),
+                      showMoreButton && showMoreButtonOnClick && /* @__PURE__ */ jsx27(
+                        Button,
+                        {
+                          variant: "menuDropdownItem",
+                          color: "brand",
+                          onClick: showMoreButtonOnClick,
+                          fontWeight: "semibold",
+                          type: "button",
+                          css: {
+                            justifyContent: "flex-start",
+                            color: "var(--colors-brand500)!important"
+                          },
+                          children: showMoreButtonLabel
+                        }
+                      )
                     ]
                   }
                 )
               }
-            ) : /* @__PURE__ */ jsx27(
+            ) : /* @__PURE__ */ jsxs16(
               StyledFlexWithMaxHeight,
               {
                 direction: "column",
                 gap: 8,
                 hasMaxHeight: !!maxHeight,
                 style: maxHeight ? { maxHeight } : void 0,
-                children: options.map(({ value, label }, i) => /* @__PURE__ */ jsx27(StyledItem2, { onClick: () => handleItemClick(value), children: /* @__PURE__ */ jsx27(Text, { typography: "labelSmall", children: label }) }, i))
+                children: [
+                  options.map(({ value, label }, i) => /* @__PURE__ */ jsx27(StyledItem2, { onClick: () => handleItemClick(value), children: /* @__PURE__ */ jsx27(Text, { typography: "labelSmall", children: label }) }, i)),
+                  showMoreButton && showMoreButtonOnClick && /* @__PURE__ */ jsx27(
+                    Button,
+                    {
+                      variant: "menuDropdownItem",
+                      color: "brand",
+                      onClick: showMoreButtonOnClick,
+                      fontWeight: "semibold",
+                      type: "button",
+                      css: {
+                        justifyContent: "flex-start",
+                        color: "var(--colors-brand500)!important"
+                      },
+                      children: showMoreButtonLabel
+                    }
+                  )
+                ]
               }
             )
           }
@@ -10791,6 +10826,9 @@ var SelectFormField = ({
   required,
   placeholder = "Selecione",
   options,
+  showMoreButton = false,
+  showMoreButtonLabel = "Carregar mais",
+  showMoreButtonOnClick,
   validation,
   validationErrorMessage = "Este campo \xE9 obrigat\xF3rio.",
   defaultValue
@@ -10824,24 +10862,38 @@ var SelectFormField = ({
         defaultValue: defaultValue || "",
         render: ({ field: { value, onChange } }) => {
           const selectedOption = options.find((opt) => opt.value === value);
-          return /* @__PURE__ */ jsx42(
+          return /* @__PURE__ */ jsxs23(
             DropdownMenu2,
             {
               placeholder: (selectedOption == null ? void 0 : selectedOption.label) || placeholder,
               fontWeight: "regular",
               typography: "labelLarge",
               color: haveError ? "error" : "default",
-              children: options.map((option, index) => /* @__PURE__ */ jsx42(
-                DropdownMenuItem,
-                {
-                  value: option.value,
-                  onSelect: () => onChange(option.value),
-                  fontWeight: "regular",
-                  typography: "labelLarge",
-                  children: option.label
-                },
-                `${option.value}${index}`
-              ))
+              children: [
+                options.map((option, index) => /* @__PURE__ */ jsx42(
+                  DropdownMenuItem,
+                  {
+                    value: option.value,
+                    onSelect: () => onChange(option.value),
+                    fontWeight: "regular",
+                    typography: "labelLarge",
+                    children: option.label
+                  },
+                  `${option.value}${index}`
+                )),
+                showMoreButton && showMoreButtonOnClick && /* @__PURE__ */ jsx42(
+                  Button,
+                  {
+                    variant: "menuDropdownItem",
+                    color: "brand",
+                    onClick: showMoreButtonOnClick,
+                    fontWeight: "semibold",
+                    type: "button",
+                    css: { justifyContent: "flex-start", color: "var(--colors-brand500)!important" },
+                    children: showMoreButtonLabel
+                  }
+                )
+              ]
             }
           );
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lets-events/react",
-  "version": "12.8.2",
+  "version": "12.8.4",
   "description": "",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/components/FormFields/SelectFormField.tsx

@@ -4,6 +4,7 @@ import { Flex } from "../Flex";
 import { FormLabel } from "./subComponents/FormLabel";
 import { ErrorFormMessage } from "./subComponents/ErrorFormMessage";
 import { getNestedValue } from "../../utils/getNestedValue";
+import { Button } from "../Button";
 
 type Option = {
   label: string;
@@ -16,6 +17,9 @@ export type SelectFormFieldProps = {
   required?: boolean;
   placeholder?: string;
   options: Option[];
+  showMoreButton?: boolean;
+  showMoreButtonLabel?: string;
+  showMoreButtonOnClick?: () => void;
   validation?: {
     validate?: (value: string) => boolean | string;
   };
@@ -29,6 +33,9 @@ export const SelectFormField = ({
   required,
   placeholder = "Selecione",
   options,
+  showMoreButton = false,
+  showMoreButtonLabel = "Carregar mais",
+  showMoreButtonOnClick,
   validation,
   validationErrorMessage = "Este campo é obrigatório.",
   defaultValue,
@@ -82,6 +89,19 @@ export const SelectFormField = ({
                   {option.label}
                 </DropdownMenuItem>
               ))}
+
+              {showMoreButton && showMoreButtonOnClick && (
+                <Button
+                  variant="menuDropdownItem"
+                  color="brand"
+                  onClick={showMoreButtonOnClick}
+                  fontWeight="semibold"
+                  type="button"
+                  css={{ justifyContent: "flex-start", color: "var(--colors-brand500)!important" }}
+                >
+                  {showMoreButtonLabel}
+                </Button>
+              )}
             </DropdownMenu>
           );
         }}

package/src/components/MultiSelect/index.tsx

@@ -11,6 +11,7 @@ import {
 import { colors } from "@lets-events/tokens";
 import { ComponentProps, useMemo } from "react";
 import { Flex } from "../Flex";
+import { Button } from "../Button";
 import { CloseBtnStyled, ButtonSelectAllStyled, itemStyle, StyledContent, StyledFlexSelectedItems, StyledFlexWithMaxHeight, StyledItem, StyledText, StyledTrigger } from "./styledComponents";
 
 export type MultiSelectProps = ComponentProps<typeof StyledTrigger> & {
@@ -31,6 +32,9 @@ export type MultiSelectProps = ComponentProps<typeof StyledTrigger> & {
   selectedAllOptions?: boolean;
   selectedAllText?: string;
   selectedScroll?: boolean;
+  showMoreButton?: boolean;
+  showMoreButtonLabel?: string;
+  showMoreButtonOnClick?: () => void;
 };
 
 export const MultiSelect = React.forwardRef<HTMLDivElement, MultiSelectProps>(
@@ -50,7 +54,10 @@ export const MultiSelect = React.forwardRef<HTMLDivElement, MultiSelectProps>(
       maxHeight,
       selectedAllOptions = false,
       selectedAllText,
-      selectedScroll = false
+      selectedScroll = false,
+      showMoreButton = false,
+      showMoreButtonLabel = "Carregar mais",
+      showMoreButtonOnClick
     },
     fowardedRef
   ) => {
@@ -182,6 +189,21 @@ export const MultiSelect = React.forwardRef<HTMLDivElement, MultiSelectProps>(
                       <Text typography={"labelSmall"}>{label}</Text>
                     </CheckboxItem>
                   ))}
+                  {showMoreButton && showMoreButtonOnClick && (
+                    <Button
+                      variant="menuDropdownItem"
+                      color="brand"
+                      onClick={showMoreButtonOnClick}
+                      fontWeight="semibold"
+                      type="button"
+                      css={{
+                        justifyContent: "flex-start",
+                        color: "var(--colors-brand500)!important",
+                      }}
+                    >
+                      {showMoreButtonLabel}
+                    </Button>
+                  )}
                 </StyledFlexWithMaxHeight>
               </CheckboxGroup>
             ) : (
@@ -196,6 +218,21 @@ export const MultiSelect = React.forwardRef<HTMLDivElement, MultiSelectProps>(
                     <Text typography={"labelSmall"}>{label}</Text>
                   </StyledItem>
                 ))}
+                {showMoreButton && showMoreButtonOnClick && (
+                  <Button
+                    variant="menuDropdownItem"
+                    color="brand"
+                    onClick={showMoreButtonOnClick}
+                    fontWeight="semibold"
+                    type="button"
+                    css={{
+                      justifyContent: "flex-start",
+                      color: "var(--colors-brand500)!important",
+                    }}
+                  >
+                    {showMoreButtonLabel}
+                  </Button>
+                )}
               </StyledFlexWithMaxHeight>
             )}
           </StyledContent>