@lets-events/react 12.11.5 → 12.11.7

package/.turbo/turbo-build.log

@@ -1,6 +1,6 @@
 
 
-> @lets-events/react@12.11.5 build
+> @lets-events/react@12.11.7 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
-ESM dist/index.mjs 423.54 KB
-ESM ⚡️ Build success in -258293ms
-CJS dist/index.js 439.68 KB
-CJS ⚡️ Build success in -258292ms
+ESM dist/index.mjs 423.79 KB
+ESM ⚡️ Build success in 288ms
+CJS dist/index.js 439.94 KB
+CJS ⚡️ Build success in 289ms
 DTS Build start
-DTS ⚡️ Build success in 7027ms
-DTS dist/index.d.mts 411.19 KB
-DTS dist/index.d.ts  411.19 KB
+DTS ⚡️ Build success in 6480ms
+DTS dist/index.d.mts 411.35 KB
+DTS dist/index.d.ts  411.35 KB
 ⠙

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @lets-events/react
 
+## 12.11.7
+
+### Patch Changes
+
+- Placeholder SelectFormField
+
+## 12.11.6
+
+### Patch Changes
+
+- SelectFormField placeholder
+
 ## 12.11.5
 
 ### Patch Changes

package/dist/index.d.mts

@@ -15468,8 +15468,9 @@ type CountryFormFieldProps = {
 declare function CountryFormField({ name, label, required, language, }: CountryFormFieldProps): react_jsx_runtime.JSX.Element;
 
 type Option = {
-    label: string;
+    label: string | React.ReactNode;
     value: string;
+    selectedLabel?: string;
 };
 type SelectFormFieldProps = {
     name: string;
@@ -15485,8 +15486,9 @@ type SelectFormFieldProps = {
     };
     validationErrorMessage?: string;
     defaultValue?: string;
+    placeholderTypography?: "labelExtraSmall" | "labelSmall" | "labelMedium" | "labelLarge";
 };
-declare const SelectFormField: ({ name, label, required, placeholder, options, showMoreButton, showMoreButtonLabel, showMoreButtonOnClick, validation, validationErrorMessage, defaultValue, }: SelectFormFieldProps) => react_jsx_runtime.JSX.Element;
+declare const SelectFormField: ({ name, label, required, placeholder, options, showMoreButton, showMoreButtonLabel, showMoreButtonOnClick, validation, validationErrorMessage, defaultValue, placeholderTypography, }: SelectFormFieldProps) => react_jsx_runtime.JSX.Element;
 
 type SwitchFormFieldProps = {
     name: string;

package/dist/index.d.ts

@@ -15468,8 +15468,9 @@ type CountryFormFieldProps = {
 declare function CountryFormField({ name, label, required, language, }: CountryFormFieldProps): react_jsx_runtime.JSX.Element;
 
 type Option = {
-    label: string;
+    label: string | React.ReactNode;
     value: string;
+    selectedLabel?: string;
 };
 type SelectFormFieldProps = {
     name: string;
@@ -15485,8 +15486,9 @@ type SelectFormFieldProps = {
     };
     validationErrorMessage?: string;
     defaultValue?: string;
+    placeholderTypography?: "labelExtraSmall" | "labelSmall" | "labelMedium" | "labelLarge";
 };
-declare const SelectFormField: ({ name, label, required, placeholder, options, showMoreButton, showMoreButtonLabel, showMoreButtonOnClick, validation, validationErrorMessage, defaultValue, }: SelectFormFieldProps) => react_jsx_runtime.JSX.Element;
+declare const SelectFormField: ({ name, label, required, placeholder, options, showMoreButton, showMoreButtonLabel, showMoreButtonOnClick, validation, validationErrorMessage, defaultValue, placeholderTypography, }: SelectFormFieldProps) => react_jsx_runtime.JSX.Element;
 
 type SwitchFormFieldProps = {
     name: string;

package/dist/index.js

@@ -11508,7 +11508,8 @@ var SelectFormField = ({
   showMoreButtonOnClick,
   validation,
   validationErrorMessage = "Este campo \xE9 obrigat\xF3rio.",
-  defaultValue
+  defaultValue,
+  placeholderTypography = "labelLarge"
 }) => {
   const {
     control,
@@ -11539,12 +11540,13 @@ var SelectFormField = ({
         defaultValue: defaultValue || "",
         render: ({ field: { value, onChange } }) => {
           const selectedOption = options.find((opt) => opt.value === value);
+          const hasSelectedLabel = !!(selectedOption == null ? void 0 : selectedOption.selectedLabel);
           return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
             DropdownMenu2,
             {
-              placeholder: (selectedOption == null ? void 0 : selectedOption.label) || placeholder,
+              placeholder: selectedOption ? hasSelectedLabel ? selectedOption == null ? void 0 : selectedOption.selectedLabel : selectedOption == null ? void 0 : selectedOption.label : placeholder,
+              typography: placeholderTypography,
               fontWeight: "regular",
-              typography: "labelLarge",
               color: haveError ? "error" : "default",
               children: [
                 options.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
@@ -11553,7 +11555,7 @@ var SelectFormField = ({
                     value: option.value,
                     onSelect: () => onChange(option.value),
                     fontWeight: "regular",
-                    typography: "labelLarge",
+                    typography: placeholderTypography,
                     children: option.label
                   },
                   `${option.value}${index}`

package/dist/index.mjs

@@ -11400,7 +11400,8 @@ var SelectFormField = ({
   showMoreButtonOnClick,
   validation,
   validationErrorMessage = "Este campo \xE9 obrigat\xF3rio.",
-  defaultValue
+  defaultValue,
+  placeholderTypography = "labelLarge"
 }) => {
   const {
     control,
@@ -11431,12 +11432,13 @@ var SelectFormField = ({
         defaultValue: defaultValue || "",
         render: ({ field: { value, onChange } }) => {
           const selectedOption = options.find((opt) => opt.value === value);
+          const hasSelectedLabel = !!(selectedOption == null ? void 0 : selectedOption.selectedLabel);
           return /* @__PURE__ */ jsxs24(
             DropdownMenu2,
             {
-              placeholder: (selectedOption == null ? void 0 : selectedOption.label) || placeholder,
+              placeholder: selectedOption ? hasSelectedLabel ? selectedOption == null ? void 0 : selectedOption.selectedLabel : selectedOption == null ? void 0 : selectedOption.label : placeholder,
+              typography: placeholderTypography,
               fontWeight: "regular",
-              typography: "labelLarge",
               color: haveError ? "error" : "default",
               children: [
                 options.map((option, index) => /* @__PURE__ */ jsx43(
@@ -11445,7 +11447,7 @@ var SelectFormField = ({
                     value: option.value,
                     onSelect: () => onChange(option.value),
                     fontWeight: "regular",
-                    typography: "labelLarge",
+                    typography: placeholderTypography,
                     children: option.label
                   },
                   `${option.value}${index}`

package/package.json

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

package/src/components/FormFields/SelectFormField.tsx

@@ -7,8 +7,9 @@ import { getNestedValue } from "../../utils/getNestedValue";
 import { Button } from "../Button";
 
 type Option = {
-  label: string;
+  label: string | React.ReactNode;
   value: string;
+  selectedLabel?: string;
 };
 
 export type SelectFormFieldProps = {
@@ -25,6 +26,7 @@ export type SelectFormFieldProps = {
   };
   validationErrorMessage?: string;
   defaultValue?: string;
+  placeholderTypography?: "labelExtraSmall" | "labelSmall" | "labelMedium" | "labelLarge";
 };
 
 export const SelectFormField = ({
@@ -39,6 +41,7 @@ export const SelectFormField = ({
   validation,
   validationErrorMessage = "Este campo é obrigatório.",
   defaultValue,
+  placeholderTypography = "labelLarge",
 }: SelectFormFieldProps) => {
   const {
     control,
@@ -70,12 +73,12 @@ export const SelectFormField = ({
         defaultValue={defaultValue || ""}
         render={({ field: { value, onChange } }) => {
           const selectedOption = options.find((opt) => opt.value === value);
-
+          const hasSelectedLabel = !!selectedOption?.selectedLabel;
           return (
             <DropdownMenu
-              placeholder={selectedOption?.label || placeholder}
+              placeholder={selectedOption ? (hasSelectedLabel ? selectedOption?.selectedLabel : selectedOption?.label as string) : placeholder}
+              typography={placeholderTypography}
               fontWeight="regular"
-              typography="labelLarge"
               color={haveError ? "error" : "default"}
             >
               {options.map((option, index) => (
@@ -84,7 +87,7 @@ export const SelectFormField = ({
                   value={option.value}
                   onSelect={() => onChange(option.value)}
                   fontWeight="regular"
-                  typography="labelLarge"
+                  typography={placeholderTypography}
                 >
                   {option.label}
                 </DropdownMenuItem>