@lets-events/react 12.8.2 → 12.8.3

package/.turbo/turbo-build.log

@@ -1,6 +1,6 @@
 
 
-> @lets-events/react@12.8.2 build
+> @lets-events/react@12.8.3 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
+CJS dist/index.js 411.36 KB
+CJS ⚡️ Build success in 459ms
+ESM dist/index.mjs 395.98 KB
+ESM ⚡️ Build success in 460ms
 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 8332ms
+DTS dist/index.d.mts 404.05 KB
+DTS dist/index.d.ts  404.05 KB
 ⠙

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @lets-events/react
 
+## 12.8.3
+
+### Patch Changes
+
+- Select Show More Button
+
 ## 12.8.2
 
 ### Patch Changes

package/dist/index.d.mts

@@ -15249,13 +15249,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

@@ -15249,13 +15249,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

@@ -10898,6 +10898,9 @@ var SelectFormField = ({
   required,
   placeholder = "Selecione",
   options,
+  showMoreButton = false,
+  showMoreButtonLabel = "Carregar mais",
+  showMoreButtonOnClick,
   validation,
   validationErrorMessage = "Este campo \xE9 obrigat\xF3rio.",
   defaultValue
@@ -10931,24 +10934,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

@@ -10791,6 +10791,9 @@ var SelectFormField = ({
   required,
   placeholder = "Selecione",
   options,
+  showMoreButton = false,
+  showMoreButtonLabel = "Carregar mais",
+  showMoreButtonOnClick,
   validation,
   validationErrorMessage = "Este campo \xE9 obrigat\xF3rio.",
   defaultValue
@@ -10824,24 +10827,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.3",
   "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>
           );
         }}