@ttoss/forms 0.20.0 → 0.21.0

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 (7) hide show
  1. package/dist/esm/index.js +33 -56
  2. package/dist/index.d.mts +14 -29
  3. package/dist/index.d.ts +14 -29
  4. package/dist/index.js +33 -56
  5. package/package.json +9 -10
  6. package/src/FormField.tsx +25 -25
  7. package/src/FormFieldSelect.tsx +32 -85
package/dist/esm/index.js CHANGED
@@ -141,9 +141,12 @@ var FormField = ({
141
141
  id: idProp,
142
142
  name,
143
143
  defaultValue,
144
+ disabled,
145
+ tooltip,
146
+ onTooltipClick,
144
147
  sx,
145
- render,
146
- ...formFieldProps
148
+ css,
149
+ render
147
150
  }) => {
148
151
  const controllerReturn = useController({
149
152
  name,
@@ -154,10 +157,10 @@ var FormField = ({
154
157
  return React2.Children.map(render(controllerReturn), child => {
155
158
  return /* @__PURE__ */jsxs(Fragment, {
156
159
  children: [label && /* @__PURE__ */jsx3(Label, {
157
- "aria-disabled": formFieldProps.disabled,
160
+ "aria-disabled": disabled,
158
161
  htmlFor: id,
159
- tooltip: formFieldProps.tooltip,
160
- onTooltipClick: formFieldProps.onTooltipClick,
162
+ tooltip,
163
+ onTooltipClick,
161
164
  children: label
162
165
  }), /*#__PURE__*/React2.createElement(child.type, {
163
166
  id,
@@ -165,7 +168,7 @@ var FormField = ({
165
168
  })]
166
169
  });
167
170
  });
168
- }, [controllerReturn, formFieldProps.disabled, formFieldProps.onTooltipClick, formFieldProps.tooltip, id, label, render]);
171
+ }, [controllerReturn, disabled, onTooltipClick, tooltip, id, label, render]);
169
172
  return /* @__PURE__ */jsxs(Flex, {
170
173
  sx: {
171
174
  flexDirection: "column",
@@ -173,6 +176,7 @@ var FormField = ({
173
176
  gap: "md",
174
177
  ...sx
175
178
  },
179
+ css,
176
180
  children: [memoizedRender, /* @__PURE__ */jsx3(ErrorMessage, {
177
181
  name
178
182
  })]
@@ -460,74 +464,47 @@ var FormFieldRadio = ({
460
464
  // src/FormFieldSelect.tsx
461
465
  import { Select } from "@ttoss/ui";
462
466
  import { jsx as jsx12 } from "react/jsx-runtime";
463
- var checkDefaultValue = ({
464
- options,
465
- defaultValue,
466
- placeholder
467
- }) => {
468
- if (defaultValue) {
469
- return defaultValue;
470
- }
471
- const hasEmptyValue = options.some(opt => {
472
- return opt.value === "" || opt.value === 0;
473
- });
474
- const EMPTY_VALUE = "";
475
- if (placeholder && hasEmptyValue) {
476
- return EMPTY_VALUE;
477
- }
478
- if (placeholder && !hasEmptyValue) {
479
- options.unshift({
480
- label: placeholder,
481
- value: ""
482
- });
483
- return EMPTY_VALUE;
484
- }
485
- if (!placeholder && defaultValue) return EMPTY_VALUE;
486
- if (options.length === 0) return EMPTY_VALUE;
487
- return options?.[0]?.value;
488
- };
489
467
  var FormFieldSelect = ({
490
468
  label,
491
469
  name,
492
- options,
470
+ id,
471
+ defaultValue,
493
472
  sx,
473
+ css,
474
+ disabled,
475
+ tooltip,
476
+ onTooltipClick,
494
477
  ...selectProps
495
478
  }) => {
496
- const {
497
- defaultValue,
498
- placeholder
499
- } = selectProps;
500
- const checkedDefaultValue = checkDefaultValue({
501
- options,
502
- defaultValue,
503
- placeholder
504
- });
505
479
  return /* @__PURE__ */jsx12(FormField, {
506
480
  name,
507
481
  label,
508
- disabled: selectProps.disabled,
509
- tooltip: selectProps.tooltip,
510
- onTooltipClick: selectProps.onTooltipClick,
482
+ id,
483
+ defaultValue,
484
+ disabled,
485
+ tooltip,
486
+ onTooltipClick,
511
487
  sx,
512
- defaultValue: checkedDefaultValue,
488
+ css,
513
489
  render: ({
514
490
  field,
515
491
  fieldState
516
492
  }) => {
493
+ const value = selectProps.options?.find(option => {
494
+ if ("value" in option) {
495
+ return option.value === field.value;
496
+ }
497
+ return false;
498
+ });
517
499
  return /* @__PURE__ */jsx12(Select, {
518
500
  ...selectProps,
519
501
  ...field,
520
- ...{
521
- ...selectProps,
522
- defaultValue: void 0
502
+ defaultValue: value,
503
+ value,
504
+ onChange: value2 => {
505
+ field.onChange(value2?.value);
523
506
  },
524
- "aria-invalid": fieldState.error ? "true" : void 0,
525
- children: options.map(option => {
526
- return /* @__PURE__ */jsx12("option", {
527
- value: option.value,
528
- children: option.label
529
- }, option.label);
530
- })
507
+ "aria-invalid": fieldState.error ? "true" : void 0
531
508
  });
532
509
  }
533
510
  });
package/dist/index.d.mts CHANGED
@@ -1,12 +1,12 @@
1
1
  export { yupResolver } from '@hookform/resolvers/yup';
2
2
  import * as react_hook_form from 'react-hook-form';
3
- import { FieldValues, FieldPath, FieldPathValue, UseControllerReturn } from 'react-hook-form';
3
+ import { FieldValues, FieldPath, UseControllerReturn, FieldPathValue } from 'react-hook-form';
4
4
  export * from 'react-hook-form';
5
5
  import * as yup from 'yup';
6
6
  export { yup };
7
7
  import * as react_jsx_runtime from 'react/jsx-runtime';
8
8
  import * as React from 'react';
9
- import { BoxProps, FlexProps, CheckboxProps, InputProps, InputPasswordProps, RadioProps, SelectProps, TextareaProps } from '@ttoss/ui';
9
+ import { BoxProps, SxProp, CheckboxProps, InputProps, InputPasswordProps, RadioProps, SelectProps, TextareaProps } from '@ttoss/ui';
10
10
  import { PatternFormatProps, NumericFormatProps } from 'react-number-format';
11
11
 
12
12
  declare const Form: <TFieldValues extends FieldValues = FieldValues>({ children, onSubmit, sx, ...formMethods }: {
@@ -17,20 +17,19 @@ declare const Form: <TFieldValues extends FieldValues = FieldValues>({ children,
17
17
  children: React.ReactNode | React.ReactNode[];
18
18
  } & react_hook_form.UseFormReturn<TFieldValues, any, undefined>) => react_jsx_runtime.JSX.Element;
19
19
 
20
- type FormFieldProps = {
21
- sx?: FlexProps['sx'];
22
- disabled?: boolean;
23
- tooltip?: boolean;
24
- onTooltipClick?: () => void;
25
- };
26
- type FormFieldCompleteProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {
20
+ type FormFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {
27
21
  label?: string;
28
22
  id?: string;
29
23
  name: TName;
30
24
  defaultValue?: FieldPathValue<TFieldValues, TName>;
25
+ disabled?: boolean;
26
+ tooltip?: boolean;
27
+ onTooltipClick?: () => void;
28
+ } & SxProp;
29
+ type FormFieldCompleteProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {
31
30
  render: (props: UseControllerReturn<TFieldValues, TName>) => React.ReactElement;
32
- } & FormFieldProps;
33
- declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ label, id: idProp, name, defaultValue, sx, render, ...formFieldProps }: FormFieldCompleteProps<TFieldValues, TName>) => react_jsx_runtime.JSX.Element;
31
+ } & FormFieldProps<TFieldValues, TName>;
32
+ declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ label, id: idProp, name, defaultValue, disabled, tooltip, onTooltipClick, sx, css, render, }: FormFieldCompleteProps<TFieldValues, TName>) => react_jsx_runtime.JSX.Element;
34
33
 
35
34
  declare const FormFieldCheckbox: <TFieldValues extends FieldValues = FieldValues>({ label, name, sx, ...checkboxProps }: {
36
35
  label?: string | undefined;
@@ -76,32 +75,18 @@ type FormFieldPasswordProps<TName> = {
76
75
  } & InputPasswordProps & FormFieldProps;
77
76
  declare const FormFieldPassword: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ label, name, tooltip, onTooltipClick, sx, defaultValue, ...inputProps }: FormFieldPasswordProps<TName>) => react_jsx_runtime.JSX.Element;
78
77
 
79
- type FormRadioOption$1 = {
78
+ type FormRadioOption = {
80
79
  value: string | number;
81
80
  label: string;
82
81
  };
83
82
  declare const FormFieldRadio: <TFieldValues extends FieldValues = FieldValues>({ label, name, options, sx, ...radioProps }: {
84
83
  label?: string | undefined;
85
84
  name: FieldPath<TFieldValues>;
86
- options: FormRadioOption$1[];
85
+ options: FormRadioOption[];
87
86
  } & RadioProps) => react_jsx_runtime.JSX.Element;
88
87
 
89
- type FormRadioOption = {
90
- value: string | number;
91
- label: string;
92
- };
93
- type SelectSwitchProps = (SelectProps & {
94
- placeholder?: never;
95
- }) | (SelectProps & {
96
- defaultValue?: never;
97
- });
98
- type FormFieldSelectProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = SelectSwitchProps & FormFieldProps & {
99
- label?: string;
100
- name: FieldPath<TFieldValues>;
101
- options: FormRadioOption[];
102
- defaultValue?: FieldPathValue<TFieldValues, TName>;
103
- };
104
- declare const FormFieldSelect: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ label, name, options, sx, ...selectProps }: FormFieldSelectProps<TFieldValues, TName>) => react_jsx_runtime.JSX.Element;
88
+ type FormFieldSelectProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = Omit<SelectProps, 'defaultValue'> & FormFieldProps<TFieldValues, TName>;
89
+ declare const FormFieldSelect: <TFieldValues extends FieldValues = FieldValues>({ label, name, id, defaultValue, sx, css, disabled, tooltip, onTooltipClick, ...selectProps }: FormFieldSelectProps<TFieldValues, react_hook_form.Path<TFieldValues>>) => react_jsx_runtime.JSX.Element;
105
90
 
106
91
  declare const FormFieldTextarea: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ label, name, sx, ...textareaProps }: {
107
92
  label?: string | undefined;
package/dist/index.d.ts CHANGED
@@ -1,12 +1,12 @@
1
1
  export { yupResolver } from '@hookform/resolvers/yup';
2
2
  import * as react_hook_form from 'react-hook-form';
3
- import { FieldValues, FieldPath, FieldPathValue, UseControllerReturn } from 'react-hook-form';
3
+ import { FieldValues, FieldPath, UseControllerReturn, FieldPathValue } from 'react-hook-form';
4
4
  export * from 'react-hook-form';
5
5
  import * as yup from 'yup';
6
6
  export { yup };
7
7
  import * as react_jsx_runtime from 'react/jsx-runtime';
8
8
  import * as React from 'react';
9
- import { BoxProps, FlexProps, CheckboxProps, InputProps, InputPasswordProps, RadioProps, SelectProps, TextareaProps } from '@ttoss/ui';
9
+ import { BoxProps, SxProp, CheckboxProps, InputProps, InputPasswordProps, RadioProps, SelectProps, TextareaProps } from '@ttoss/ui';
10
10
  import { PatternFormatProps, NumericFormatProps } from 'react-number-format';
11
11
 
12
12
  declare const Form: <TFieldValues extends FieldValues = FieldValues>({ children, onSubmit, sx, ...formMethods }: {
@@ -17,20 +17,19 @@ declare const Form: <TFieldValues extends FieldValues = FieldValues>({ children,
17
17
  children: React.ReactNode | React.ReactNode[];
18
18
  } & react_hook_form.UseFormReturn<TFieldValues, any, undefined>) => react_jsx_runtime.JSX.Element;
19
19
 
20
- type FormFieldProps = {
21
- sx?: FlexProps['sx'];
22
- disabled?: boolean;
23
- tooltip?: boolean;
24
- onTooltipClick?: () => void;
25
- };
26
- type FormFieldCompleteProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {
20
+ type FormFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {
27
21
  label?: string;
28
22
  id?: string;
29
23
  name: TName;
30
24
  defaultValue?: FieldPathValue<TFieldValues, TName>;
25
+ disabled?: boolean;
26
+ tooltip?: boolean;
27
+ onTooltipClick?: () => void;
28
+ } & SxProp;
29
+ type FormFieldCompleteProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {
31
30
  render: (props: UseControllerReturn<TFieldValues, TName>) => React.ReactElement;
32
- } & FormFieldProps;
33
- declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ label, id: idProp, name, defaultValue, sx, render, ...formFieldProps }: FormFieldCompleteProps<TFieldValues, TName>) => react_jsx_runtime.JSX.Element;
31
+ } & FormFieldProps<TFieldValues, TName>;
32
+ declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ label, id: idProp, name, defaultValue, disabled, tooltip, onTooltipClick, sx, css, render, }: FormFieldCompleteProps<TFieldValues, TName>) => react_jsx_runtime.JSX.Element;
34
33
 
35
34
  declare const FormFieldCheckbox: <TFieldValues extends FieldValues = FieldValues>({ label, name, sx, ...checkboxProps }: {
36
35
  label?: string | undefined;
@@ -76,32 +75,18 @@ type FormFieldPasswordProps<TName> = {
76
75
  } & InputPasswordProps & FormFieldProps;
77
76
  declare const FormFieldPassword: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ label, name, tooltip, onTooltipClick, sx, defaultValue, ...inputProps }: FormFieldPasswordProps<TName>) => react_jsx_runtime.JSX.Element;
78
77
 
79
- type FormRadioOption$1 = {
78
+ type FormRadioOption = {
80
79
  value: string | number;
81
80
  label: string;
82
81
  };
83
82
  declare const FormFieldRadio: <TFieldValues extends FieldValues = FieldValues>({ label, name, options, sx, ...radioProps }: {
84
83
  label?: string | undefined;
85
84
  name: FieldPath<TFieldValues>;
86
- options: FormRadioOption$1[];
85
+ options: FormRadioOption[];
87
86
  } & RadioProps) => react_jsx_runtime.JSX.Element;
88
87
 
89
- type FormRadioOption = {
90
- value: string | number;
91
- label: string;
92
- };
93
- type SelectSwitchProps = (SelectProps & {
94
- placeholder?: never;
95
- }) | (SelectProps & {
96
- defaultValue?: never;
97
- });
98
- type FormFieldSelectProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = SelectSwitchProps & FormFieldProps & {
99
- label?: string;
100
- name: FieldPath<TFieldValues>;
101
- options: FormRadioOption[];
102
- defaultValue?: FieldPathValue<TFieldValues, TName>;
103
- };
104
- declare const FormFieldSelect: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ label, name, options, sx, ...selectProps }: FormFieldSelectProps<TFieldValues, TName>) => react_jsx_runtime.JSX.Element;
88
+ type FormFieldSelectProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = Omit<SelectProps, 'defaultValue'> & FormFieldProps<TFieldValues, TName>;
89
+ declare const FormFieldSelect: <TFieldValues extends FieldValues = FieldValues>({ label, name, id, defaultValue, sx, css, disabled, tooltip, onTooltipClick, ...selectProps }: FormFieldSelectProps<TFieldValues, react_hook_form.Path<TFieldValues>>) => react_jsx_runtime.JSX.Element;
105
90
 
106
91
  declare const FormFieldTextarea: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ label, name, sx, ...textareaProps }: {
107
92
  label?: string | undefined;
package/dist/index.js CHANGED
@@ -181,9 +181,12 @@ var FormField = ({
181
181
  id: idProp,
182
182
  name,
183
183
  defaultValue,
184
+ disabled,
185
+ tooltip,
186
+ onTooltipClick,
184
187
  sx,
185
- render,
186
- ...formFieldProps
188
+ css,
189
+ render
187
190
  }) => {
188
191
  const controllerReturn = (0, import_react_hook_form3.useController)({
189
192
  name,
@@ -194,10 +197,10 @@ var FormField = ({
194
197
  return React2.Children.map(render(controllerReturn), child => {
195
198
  return /* @__PURE__ */(0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, {
196
199
  children: [label && /* @__PURE__ */(0, import_jsx_runtime3.jsx)(import_ui3.Label, {
197
- "aria-disabled": formFieldProps.disabled,
200
+ "aria-disabled": disabled,
198
201
  htmlFor: id,
199
- tooltip: formFieldProps.tooltip,
200
- onTooltipClick: formFieldProps.onTooltipClick,
202
+ tooltip,
203
+ onTooltipClick,
201
204
  children: label
202
205
  }), React2.createElement(child.type, {
203
206
  id,
@@ -205,7 +208,7 @@ var FormField = ({
205
208
  })]
206
209
  });
207
210
  });
208
- }, [controllerReturn, formFieldProps.disabled, formFieldProps.onTooltipClick, formFieldProps.tooltip, id, label, render]);
211
+ }, [controllerReturn, disabled, onTooltipClick, tooltip, id, label, render]);
209
212
  return /* @__PURE__ */(0, import_jsx_runtime3.jsxs)(import_ui3.Flex, {
210
213
  sx: {
211
214
  flexDirection: "column",
@@ -213,6 +216,7 @@ var FormField = ({
213
216
  gap: "md",
214
217
  ...sx
215
218
  },
219
+ css,
216
220
  children: [memoizedRender, /* @__PURE__ */(0, import_jsx_runtime3.jsx)(ErrorMessage, {
217
221
  name
218
222
  })]
@@ -500,74 +504,47 @@ var FormFieldRadio = ({
500
504
  // src/FormFieldSelect.tsx
501
505
  var import_ui10 = require("@ttoss/ui");
502
506
  var import_jsx_runtime12 = require("react/jsx-runtime");
503
- var checkDefaultValue = ({
504
- options,
505
- defaultValue,
506
- placeholder
507
- }) => {
508
- if (defaultValue) {
509
- return defaultValue;
510
- }
511
- const hasEmptyValue = options.some(opt => {
512
- return opt.value === "" || opt.value === 0;
513
- });
514
- const EMPTY_VALUE = "";
515
- if (placeholder && hasEmptyValue) {
516
- return EMPTY_VALUE;
517
- }
518
- if (placeholder && !hasEmptyValue) {
519
- options.unshift({
520
- label: placeholder,
521
- value: ""
522
- });
523
- return EMPTY_VALUE;
524
- }
525
- if (!placeholder && defaultValue) return EMPTY_VALUE;
526
- if (options.length === 0) return EMPTY_VALUE;
527
- return options?.[0]?.value;
528
- };
529
507
  var FormFieldSelect = ({
530
508
  label,
531
509
  name,
532
- options,
510
+ id,
511
+ defaultValue,
533
512
  sx,
513
+ css,
514
+ disabled,
515
+ tooltip,
516
+ onTooltipClick,
534
517
  ...selectProps
535
518
  }) => {
536
- const {
537
- defaultValue,
538
- placeholder
539
- } = selectProps;
540
- const checkedDefaultValue = checkDefaultValue({
541
- options,
542
- defaultValue,
543
- placeholder
544
- });
545
519
  return /* @__PURE__ */(0, import_jsx_runtime12.jsx)(FormField, {
546
520
  name,
547
521
  label,
548
- disabled: selectProps.disabled,
549
- tooltip: selectProps.tooltip,
550
- onTooltipClick: selectProps.onTooltipClick,
522
+ id,
523
+ defaultValue,
524
+ disabled,
525
+ tooltip,
526
+ onTooltipClick,
551
527
  sx,
552
- defaultValue: checkedDefaultValue,
528
+ css,
553
529
  render: ({
554
530
  field,
555
531
  fieldState
556
532
  }) => {
533
+ const value = selectProps.options?.find(option => {
534
+ if ("value" in option) {
535
+ return option.value === field.value;
536
+ }
537
+ return false;
538
+ });
557
539
  return /* @__PURE__ */(0, import_jsx_runtime12.jsx)(import_ui10.Select, {
558
540
  ...selectProps,
559
541
  ...field,
560
- ...{
561
- ...selectProps,
562
- defaultValue: void 0
542
+ defaultValue: value,
543
+ value,
544
+ onChange: value2 => {
545
+ field.onChange(value2?.value);
563
546
  },
564
- "aria-invalid": fieldState.error ? "true" : void 0,
565
- children: options.map(option => {
566
- return /* @__PURE__ */(0, import_jsx_runtime12.jsx)("option", {
567
- value: option.value,
568
- children: option.label
569
- }, option.label);
570
- })
547
+ "aria-invalid": fieldState.error ? "true" : void 0
571
548
  });
572
549
  }
573
550
  });
package/package.json CHANGED
@@ -1,7 +1,6 @@
1
1
  {
2
2
  "name": "@ttoss/forms",
3
- "version": "0.20.0",
4
- "license": "UNLICENSED",
3
+ "version": "0.21.0",
5
4
  "author": "ttoss",
6
5
  "contributors": [
7
6
  "Pedro Arantes <pedro@arantespp.com> (https://arantespp.com/contact)"
@@ -21,31 +20,31 @@
21
20
  "typings": "dist/index.d.ts",
22
21
  "dependencies": {
23
22
  "@hookform/error-message": "^2.0.1",
24
- "@hookform/resolvers": "^3.1.0",
25
- "react-hook-form": "^7.44.3",
23
+ "@hookform/resolvers": "^3.3.2",
24
+ "react-hook-form": "^7.48.2",
26
25
  "react-number-format": "^5.3.1",
27
- "yup": "^1.2.0"
26
+ "yup": "^1.3.2"
28
27
  },
29
28
  "peerDependencies": {
30
29
  "react": ">=16.8.0",
31
30
  "@ttoss/react-i18n": "^1.25.1",
32
- "@ttoss/ui": "^3.1.7"
31
+ "@ttoss/ui": "^4.0.0"
33
32
  },
34
33
  "devDependencies": {
35
34
  "@types/jest": "^29.5.5",
36
35
  "@types/react": "^18.2.29",
37
36
  "jest": "^29.7.0",
38
37
  "react": "^18.2.0",
39
- "react-error-boundary": "^4.0.9",
40
- "react-hook-form": "^7.44.3",
38
+ "react-error-boundary": "^4.0.11",
39
+ "react-hook-form": "^7.48.2",
41
40
  "theme-ui": "^0.16.1",
42
41
  "tsup": "^7.2.0",
43
- "yup": "^1.2.0",
42
+ "yup": "^1.3.2",
44
43
  "@ttoss/config": "^1.31.0",
45
44
  "@ttoss/i18n-cli": "^0.7.0",
46
45
  "@ttoss/react-i18n": "^1.25.1",
47
46
  "@ttoss/test-utils": "^1.24.1",
48
- "@ttoss/ui": "^3.1.7"
47
+ "@ttoss/ui": "^4.0.0"
49
48
  },
50
49
  "publishConfig": {
51
50
  "access": "public",
package/src/FormField.tsx CHANGED
@@ -7,39 +7,44 @@ import {
7
7
  UseControllerReturn,
8
8
  useController,
9
9
  } from 'react-hook-form';
10
- import { Flex, type FlexProps, Label } from '@ttoss/ui';
10
+ import { Flex, Label, type SxProp } from '@ttoss/ui';
11
11
 
12
- export type FormFieldProps = {
13
- sx?: FlexProps['sx'];
12
+ export type FormFieldProps<
13
+ TFieldValues extends FieldValues = FieldValues,
14
+ TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
15
+ > = {
16
+ label?: string;
17
+ id?: string;
18
+ name: TName;
19
+ defaultValue?: FieldPathValue<TFieldValues, TName>;
14
20
  disabled?: boolean;
15
21
  tooltip?: boolean;
16
22
  onTooltipClick?: () => void;
17
- };
23
+ } & SxProp;
18
24
 
19
25
  type FormFieldCompleteProps<
20
26
  TFieldValues extends FieldValues = FieldValues,
21
- TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
27
+ TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
22
28
  > = {
23
- label?: string;
24
- id?: string;
25
- name: TName;
26
- defaultValue?: FieldPathValue<TFieldValues, TName>;
27
29
  render: (
28
30
  props: UseControllerReturn<TFieldValues, TName>
29
31
  ) => React.ReactElement;
30
- } & FormFieldProps;
32
+ } & FormFieldProps<TFieldValues, TName>;
31
33
 
32
34
  export const FormField = <
33
35
  TFieldValues extends FieldValues = FieldValues,
34
- TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
36
+ TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
35
37
  >({
36
38
  label,
37
39
  id: idProp,
38
40
  name,
39
41
  defaultValue,
42
+ disabled,
43
+ tooltip,
44
+ onTooltipClick,
40
45
  sx,
46
+ css,
41
47
  render,
42
- ...formFieldProps
43
48
  }: FormFieldCompleteProps<TFieldValues, TName>) => {
44
49
  const controllerReturn = useController<TFieldValues, TName>({
45
50
  name,
@@ -54,10 +59,10 @@ export const FormField = <
54
59
  <>
55
60
  {label && (
56
61
  <Label
57
- aria-disabled={formFieldProps.disabled}
62
+ aria-disabled={disabled}
58
63
  htmlFor={id}
59
- tooltip={formFieldProps.tooltip}
60
- onTooltipClick={formFieldProps.onTooltipClick}
64
+ tooltip={tooltip}
65
+ onTooltipClick={onTooltipClick}
61
66
  >
62
67
  {label}
63
68
  </Label>
@@ -67,18 +72,13 @@ export const FormField = <
67
72
  </>
68
73
  );
69
74
  });
70
- }, [
71
- controllerReturn,
72
- formFieldProps.disabled,
73
- formFieldProps.onTooltipClick,
74
- formFieldProps.tooltip,
75
- id,
76
- label,
77
- render,
78
- ]);
75
+ }, [controllerReturn, disabled, onTooltipClick, tooltip, id, label, render]);
79
76
 
80
77
  return (
81
- <Flex sx={{ flexDirection: 'column', width: '100%', gap: 'md', ...sx }}>
78
+ <Flex
79
+ sx={{ flexDirection: 'column', width: '100%', gap: 'md', ...sx }}
80
+ css={css}
81
+ >
82
82
  {memoizedRender}
83
83
  <ErrorMessage name={name} />
84
84
  </Flex>
package/src/FormFieldSelect.tsx CHANGED
@@ -1,110 +1,57 @@
1
- import { FieldPath, FieldPathValue, FieldValues } from 'react-hook-form';
1
+ import { FieldPath, FieldValues } from 'react-hook-form';
2
2
  import { FormField, FormFieldProps } from './FormField';
3
- import { Select, type SelectProps } from '@ttoss/ui';
4
-
5
- type FormRadioOption = {
6
- value: string | number;
7
- label: string;
8
- };
9
-
10
- type SelectSwitchProps =
11
- | (SelectProps & { placeholder?: never })
12
- | (SelectProps & { defaultValue?: never });
13
-
14
- const checkDefaultValue = <
15
- TFieldValues extends FieldValues = FieldValues,
16
- TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
17
- >({
18
- options,
19
- defaultValue,
20
- placeholder,
21
- }: {
22
- options: Array<FormRadioOption>;
23
- defaultValue?: FieldPathValue<TFieldValues, TName>;
24
- placeholder?: string;
25
- }): FieldPathValue<TFieldValues, TName> => {
26
- if (defaultValue) {
27
- return defaultValue;
28
- }
29
-
30
- const hasEmptyValue = options.some((opt) => {
31
- return opt.value === '' || opt.value === 0;
32
- });
33
-
34
- const EMPTY_VALUE = '' as FieldPathValue<TFieldValues, TName>;
35
-
36
- if (placeholder && hasEmptyValue) {
37
- return EMPTY_VALUE;
38
- }
39
-
40
- if (placeholder && !hasEmptyValue) {
41
- options.unshift({
42
- label: placeholder,
43
- value: '',
44
- });
45
- return EMPTY_VALUE;
46
- }
47
-
48
- if (!placeholder && defaultValue) return EMPTY_VALUE;
49
- if (options.length === 0) return EMPTY_VALUE;
50
-
51
- return options?.[0]?.value as FieldPathValue<TFieldValues, TName>;
52
- };
3
+ import { Select, SelectOption, type SelectProps } from '@ttoss/ui';
53
4
 
54
5
  type FormFieldSelectProps<
55
- TFieldValues extends FieldValues,
56
- TName extends FieldPath<TFieldValues>
57
- > = SelectSwitchProps &
58
- FormFieldProps & {
59
- label?: string;
60
- name: FieldPath<TFieldValues>;
61
- options: FormRadioOption[];
62
- defaultValue?: FieldPathValue<TFieldValues, TName>;
63
- };
6
+ TFieldValues extends FieldValues = FieldValues,
7
+ TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
8
+ > = Omit<SelectProps, 'defaultValue'> & FormFieldProps<TFieldValues, TName>;
64
9
 
65
10
  export const FormFieldSelect = <
66
11
  TFieldValues extends FieldValues = FieldValues,
67
- TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
68
12
  >({
69
13
  label,
70
14
  name,
71
- options,
15
+ id,
16
+ defaultValue,
72
17
  sx,
18
+ css,
19
+ disabled,
20
+ tooltip,
21
+ onTooltipClick,
73
22
  ...selectProps
74
- }: FormFieldSelectProps<TFieldValues, TName>) => {
75
- const { defaultValue, placeholder } = selectProps;
76
-
77
- const checkedDefaultValue = checkDefaultValue<TFieldValues, TName>({
78
- options,
79
- defaultValue,
80
- placeholder,
81
- });
82
-
23
+ }: FormFieldSelectProps<TFieldValues>) => {
83
24
  return (
84
25
  <FormField
85
26
  name={name}
86
27
  label={label}
87
- disabled={selectProps.disabled}
88
- tooltip={selectProps.tooltip}
89
- onTooltipClick={selectProps.onTooltipClick}
28
+ id={id}
29
+ defaultValue={defaultValue}
30
+ disabled={disabled}
31
+ tooltip={tooltip}
32
+ onTooltipClick={onTooltipClick}
90
33
  sx={sx}
91
- defaultValue={checkedDefaultValue}
34
+ css={css}
92
35
  render={({ field, fieldState }) => {
36
+ const value = selectProps.options?.find((option) => {
37
+ if ('value' in option) {
38
+ return option.value === field.value;
39
+ }
40
+
41
+ return false;
42
+ }) as SelectOption | undefined;
43
+
93
44
  return (
94
45
  <Select
95
46
  {...selectProps}
96
47
  {...field}
97
- {...{ ...selectProps, defaultValue: undefined }}
48
+ defaultValue={value}
49
+ value={value}
50
+ onChange={(value) => {
51
+ field.onChange(value?.value);
52
+ }}
98
53
  aria-invalid={fieldState.error ? 'true' : undefined}
99
- >
100
- {options.map((option: FormRadioOption) => {
101
- return (
102
- <option key={option.label} value={option.value}>
103
- {option.label}
104
- </option>
105
- );
106
- })}
107
- </Select>
54
+ />
108
55
  );
109
56
  }}
110
57
  />