@ttoss/forms 0.15.11 → 0.15.13

package/README.md

@@ -37,4 +37,115 @@ export const FormComponent = () => {
 };
 ```
 
+## FormFieldSelect support for Default Value
+
+FormFieldSelect has support for default values, by assigning the first option defined or the value passed to it in the parameter `defaultValue`.
+
+```tsx
+const RADIO_OPTIONS = [
+  { value: 'Ferrari', label: 'Ferrari' },
+  { value: 'Mercedes', label: 'Mercedes' },
+  { value: 'BMW', label: 'BMW' },
+];
+
+// RenderForm gonna use "Ferrari" as defaultValue
+const RenderForm = () => {
+  const formMethods = useForm();
+
+  return (
+    <Form {...formMethods} onSubmit={onSubmit}>
+      <FormFieldSelect name="car" label="Cars" options={RADIO_OPTIONS} />
+      <Button type="submit">Submit</Button>
+    </Form>
+  );
+};
+
+// RenderForm gonna use "Mercedes" as defaultValue
+const RenderForm = () => {
+  const formMethods = useForm();
+
+  return (
+    <Form {...formMethods} onSubmit={onSubmit}>
+      <FormFieldSelect
+        name="car"
+        label="Cars"
+        options={RADIO_OPTIONS}
+        defaultValue="Mercedes"
+      />
+      <Button type="submit">Submit</Button>
+    </Form>
+  );
+};
+```
+
+When a placeholder is set, if in the options don't have an empty value, automatically an empty value gonna be injected.
+
+```tsx
+const RenderForm = () => {
+  const formMethods = useForm();
+
+  // automatically injects an empty value on the "RADIO_OPTIONS"
+  return (
+    <Form {...formMethods} onSubmit={onSubmit}>
+      <FormFieldSelect
+        name="car"
+        label="Cars"
+        options={RADIO_OPTIONS}
+        placeholder="Select a car"
+      />
+      <Button type="submit">Submit</Button>
+    </Form>
+  );
+};
+```
+
+**Note that a placeholder cannot be set when an defaultValue is set and vice-versa**
+
+```tsx
+// type error!!
+return (
+  <Form {...formMethods} onSubmit={onSubmit}>
+    <FormFieldSelect
+      name="car"
+      label="Cars"
+      options={RADIO_OPTIONS}
+      placeholder="Select a car"
+      defaultValue="Ferrari"
+    />
+    <Button type="submit">Submit</Button>
+  </Form>
+);
+```
+
+When your Select options depends on fetched values, the manual defaultValue setting is required.
+
+```tsx
+const RenderForm = () => {
+  const formMethods = useForm();
+  const { resetField } = formMethods;
+  const [formOptions, setFormOptions] = useState<
+    {
+      value: string;
+      label: string;
+    }[]
+  >([]);
+
+  useEffect(() => {
+    // some fetch operation here
+
+    setFormOptions(RADIO_OPTIONS);
+
+    // fetch are side effects, so, if the options depends on fetch and have a default value, the field should be reseted in the effect
+    resetField('car', { defaultValue: 'Ferrari' });
+  }, []);
+
+  return (
+    <Form {...formMethods} onSubmit={onSubmit}>
+      <FormFieldSelect name="car" label="Cars" options={formOptions} />
+      <Button type="submit">Submit</Button>
+    </Form>
+  );
+};
+```
+
 > NOTE: You can also use yup and all of API from react-hook-form importing `import { yup, useForm } from @ttoss/forms`

package/dist/esm/index.js

@@ -264,6 +264,22 @@ var FormFieldRadio = ({
 import { useController as useController5 } from "react-hook-form";
 import { Flex as Flex5, Label as Label5, Select } from "@ttoss/ui";
 import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+var checkDefaultValue = (options, defaultValue, placeholder) => {
+  const hasEmptyValue = options.some(opt => {
+    return opt.value === "" || opt.value === 0;
+  });
+  if (placeholder && hasEmptyValue) return "";
+  if (placeholder && !hasEmptyValue) {
+    options.unshift({
+      label: placeholder,
+      value: ""
+    });
+    return "";
+  }
+  if (!placeholder && defaultValue) return defaultValue;
+  if (options.length === 0) return "";
+  return options?.[0]?.value;
+};
 var FormFieldSelect = ({
   label,
   name,
@@ -271,6 +287,11 @@ var FormFieldSelect = ({
   sx,
   ...selectProps
 }) => {
+  const {
+    defaultValue,
+    placeholder
+  } = selectProps;
+  const checkedDefaultValue = checkDefaultValue(options, defaultValue, placeholder);
   const {
     field: {
       onChange,
@@ -280,7 +301,7 @@ var FormFieldSelect = ({
     }
   } = useController5({
     name,
-    defaultValue: ""
+    defaultValue: checkedDefaultValue
   });
   const id = `form-field-select-${name}`;
   return /* @__PURE__ */jsxs5(Flex5, {
@@ -299,7 +320,10 @@ var FormFieldSelect = ({
       onBlur,
       value,
       id,
-      ...selectProps,
+      ...{
+        ...selectProps,
+        defaultValue: void 0
+      },
       children: options.map(option => {
         return /* @__PURE__ */jsx7("option", {
           value: option.value,

package/dist/index.d.ts

@@ -48,11 +48,16 @@ type FormRadioOption = {
     value: string | number;
     label: string;
 };
+type SelectSwitchProps = (SelectProps & {
+    placeholder?: never;
+}) | (SelectProps & {
+    defaultValue?: never;
+});
 declare const FormFieldSelect: <TFieldValues extends FieldValues = FieldValues>({ label, name, options, sx, ...selectProps }: {
     label?: string | undefined;
     name: FieldPath<TFieldValues>;
     options: FormRadioOption[];
-} & SelectProps) => JSX.Element;
+} & SelectSwitchProps) => JSX.Element;
 
 declare const FormFieldTextarea: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ label, name, sx, ...textareaProps }: {
     label?: string | undefined;

package/dist/index.js

@@ -315,6 +315,22 @@ var FormFieldRadio = ({
 var import_react_hook_form7 = require("react-hook-form");
 var import_ui7 = require("@ttoss/ui");
 var import_jsx_runtime7 = require("react/jsx-runtime");
+var checkDefaultValue = (options, defaultValue, placeholder) => {
+  const hasEmptyValue = options.some(opt => {
+    return opt.value === "" || opt.value === 0;
+  });
+  if (placeholder && hasEmptyValue) return "";
+  if (placeholder && !hasEmptyValue) {
+    options.unshift({
+      label: placeholder,
+      value: ""
+    });
+    return "";
+  }
+  if (!placeholder && defaultValue) return defaultValue;
+  if (options.length === 0) return "";
+  return options?.[0]?.value;
+};
 var FormFieldSelect = ({
   label,
   name,
@@ -322,6 +338,11 @@ var FormFieldSelect = ({
   sx,
   ...selectProps
 }) => {
+  const {
+    defaultValue,
+    placeholder
+  } = selectProps;
+  const checkedDefaultValue = checkDefaultValue(options, defaultValue, placeholder);
   const {
     field: {
       onChange,
@@ -331,7 +352,7 @@ var FormFieldSelect = ({
     }
   } = (0, import_react_hook_form7.useController)({
     name,
-    defaultValue: ""
+    defaultValue: checkedDefaultValue
   });
   const id = `form-field-select-${name}`;
   return /* @__PURE__ */(0, import_jsx_runtime7.jsxs)(import_ui7.Flex, {
@@ -350,7 +371,10 @@ var FormFieldSelect = ({
       onBlur,
       value,
       id,
-      ...selectProps,
+      ...{
+        ...selectProps,
+        defaultValue: void 0
+      },
       children: options.map(option => {
         return /* @__PURE__ */(0, import_jsx_runtime7.jsx)("option", {
           value: option.value,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/forms",
-  "version": "0.15.11",
+  "version": "0.15.13",
   "license": "UNLICENSED",
   "author": "ttoss",
   "contributors": [
@@ -44,5 +44,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "c759e6382b5adf6e9d19e98509c2e089246e553d"
+  "gitHead": "44c75e5b82172e39a2ae9877871db86418a4b9bc"
 }

package/src/FormFieldSelect.tsx

@@ -7,6 +7,32 @@ type FormRadioOption = {
   label: string;
 };
 
+type SelectSwitchProps =
+  | (SelectProps & { placeholder?: never })
+  | (SelectProps & { defaultValue?: never });
+
+const checkDefaultValue = (
+  options: Array<FormRadioOption>,
+  defaultValue?: string | number | readonly string[],
+  placeholder?: string
+) => {
+  const hasEmptyValue = options.some((opt) => {
+    return opt.value === '' || opt.value === 0;
+  });
+
+  if (placeholder && hasEmptyValue) return '';
+  if (placeholder && !hasEmptyValue) {
+    options.unshift({
+      label: placeholder,
+      value: '',
+    });
+    return '';
+  }
+  if (!placeholder && defaultValue) return defaultValue;
+  if (options.length === 0) return '';
+  return options?.[0]?.value;
+};
+
 export const FormFieldSelect = <
   TFieldValues extends FieldValues = FieldValues
 >({
@@ -19,12 +45,20 @@ export const FormFieldSelect = <
   label?: string;
   name: FieldPath<TFieldValues>;
   options: FormRadioOption[];
-} & SelectProps) => {
+} & SelectSwitchProps) => {
+  const { defaultValue, placeholder } = selectProps;
+
+  const checkedDefaultValue = checkDefaultValue(
+    options,
+    defaultValue,
+    placeholder
+  );
+
   const {
     field: { onChange, onBlur, value, ref },
   } = useController<any>({
     name,
-    defaultValue: '',
+    defaultValue: checkedDefaultValue,
   });
 
   const id = `form-field-select-${name}`;
@@ -39,7 +73,7 @@ export const FormFieldSelect = <
         onBlur={onBlur}
         value={value}
         id={id}
-        {...selectProps}
+        {...{ ...selectProps, defaultValue: undefined }}
       >
         {options.map((option) => {
           return (