@povio/ui 3.3.0 → 3.4.0-rc.1

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 (78) hide show
  1. package/dist/components/inputs/Checkbox/Checkbox.d.ts +1 -2
  2. package/dist/components/inputs/Checkbox/Checkbox.js +93 -100
  3. package/dist/components/inputs/Checkbox/CheckboxGroup.d.ts +1 -2
  4. package/dist/components/inputs/Checkbox/CheckboxGroup.js +109 -113
  5. package/dist/components/inputs/DateTime/DatePicker/DatePicker.d.ts +1 -2
  6. package/dist/components/inputs/DateTime/DatePicker/DatePicker.js +14 -21
  7. package/dist/components/inputs/DateTime/DateRangePicker/DateRangePicker.d.ts +1 -2
  8. package/dist/components/inputs/DateTime/DateRangePicker/DateRangePicker.js +14 -22
  9. package/dist/components/inputs/DateTime/DateTimePicker/DateTimePicker.d.ts +1 -2
  10. package/dist/components/inputs/DateTime/DateTimePicker/DateTimePicker.js +14 -21
  11. package/dist/components/inputs/DateTime/TimePicker/TimePicker.d.ts +1 -2
  12. package/dist/components/inputs/DateTime/TimePicker/TimePicker.js +275 -294
  13. package/dist/components/inputs/DateTime/shared/DatePickerInput.d.ts +1 -2
  14. package/dist/components/inputs/DateTime/shared/DatePickerInput.js +1 -10
  15. package/dist/components/inputs/DateTime/shared/TimePickerInput.d.ts +1 -2
  16. package/dist/components/inputs/DateTime/shared/TimePickerInput.js +43 -46
  17. package/dist/components/inputs/File/FileUpload.d.ts +1 -1
  18. package/dist/components/inputs/File/FileUpload.js +17 -17
  19. package/dist/components/inputs/File/InputUpload.d.ts +1 -1
  20. package/dist/components/inputs/File/InputUpload.js +17 -17
  21. package/dist/components/inputs/File/fileUpload.types.d.ts +1 -1
  22. package/dist/components/inputs/File/inputUpload.types.d.ts +1 -1
  23. package/dist/components/inputs/Input/NumberInput/NumberInput.d.ts +1 -1
  24. package/dist/components/inputs/Input/NumberInput/NumberInput.js +19 -19
  25. package/dist/components/inputs/Input/NumberRangeInput/NumberRangeInput.d.ts +1 -1
  26. package/dist/components/inputs/Input/NumberRangeInput/NumberRangeInput.js +18 -18
  27. package/dist/components/inputs/Input/PasswordInput/PasswordInput.d.ts +1 -1
  28. package/dist/components/inputs/Input/TextArea/TextArea.d.ts +1 -1
  29. package/dist/components/inputs/Input/TextArea/TextArea.js +18 -18
  30. package/dist/components/inputs/Input/TextInput/TextInput.d.ts +2 -2
  31. package/dist/components/inputs/Input/TextInput/TextInput.js +36 -38
  32. package/dist/components/inputs/Inputs/Form.d.ts +4 -4
  33. package/dist/components/inputs/Inputs/InputItem.d.ts +22 -22
  34. package/dist/components/inputs/Inputs/InputItem.js +35 -36
  35. package/dist/components/inputs/Inputs/Inputs.d.ts +2 -2
  36. package/dist/components/inputs/RadioGroup/RadioGroup.d.ts +1 -2
  37. package/dist/components/inputs/RadioGroup/RadioGroup.js +107 -111
  38. package/dist/components/inputs/Selection/Autocomplete/Autocomplete.d.ts +1 -1
  39. package/dist/components/inputs/Selection/Autocomplete/Autocomplete.js +13 -13
  40. package/dist/components/inputs/Selection/Autocomplete/QueryAutocomplete.d.ts +1 -1
  41. package/dist/components/inputs/Selection/Autocomplete/QueryAutocomplete.js +19 -19
  42. package/dist/components/inputs/Selection/Autocomplete/queryAutocomplete.types.d.ts +1 -1
  43. package/dist/components/inputs/Selection/Select/QuerySelect.d.ts +1 -1
  44. package/dist/components/inputs/Selection/Select/QuerySelect.js +19 -19
  45. package/dist/components/inputs/Selection/Select/Select.d.ts +1 -1
  46. package/dist/components/inputs/Selection/Select/Select.js +19 -19
  47. package/dist/components/inputs/Selection/shared/SelectBase.d.ts +0 -1
  48. package/dist/components/inputs/Selection/shared/SelectBase.js +34 -37
  49. package/dist/components/inputs/Selection/shared/select.context.d.ts +2 -2
  50. package/dist/components/inputs/Selection/shared/select.context.js +4 -8
  51. package/dist/components/inputs/Selection/shared/select.types.d.ts +1 -1
  52. package/dist/components/inputs/Slider/Slider.d.ts +1 -1
  53. package/dist/components/inputs/Slider/Slider.js +18 -18
  54. package/dist/components/inputs/TextEditor/TextEditor.d.ts +1 -1
  55. package/dist/components/inputs/TextEditor/TextEditor.js +18 -18
  56. package/dist/components/inputs/Toggle/Toggle.d.ts +1 -2
  57. package/dist/components/inputs/Toggle/Toggle.js +59 -63
  58. package/dist/components/inputs/shared/form.binding.d.ts +27 -0
  59. package/dist/components/inputs/shared/form.binding.js +57 -0
  60. package/dist/components/inputs/shared/form.types.d.ts +9 -8
  61. package/dist/components/inputs/shared/form.types.js +8 -0
  62. package/dist/components/segment/Segment.d.ts +1 -1
  63. package/dist/components/segment/Segment.js +17 -17
  64. package/dist/components/segment/segment.types.d.ts +1 -1
  65. package/dist/config/uiConfig.context.d.ts +5 -5
  66. package/dist/config/uiConfig.context.js +3 -12
  67. package/dist/helpers/dynamicColumns.d.ts +1 -1
  68. package/dist/helpers/dynamicInputs.d.ts +7 -7
  69. package/dist/hooks/useAutosave.d.ts +4 -4
  70. package/dist/hooks/useAutosave.js +64 -49
  71. package/dist/hooks/useForm.d.ts +39 -15
  72. package/dist/hooks/useForm.js +96 -43
  73. package/dist/hooks/useFormAutosave.d.ts +8 -9
  74. package/dist/hooks/useFormAutosave.js +23 -9
  75. package/dist/index.d.ts +2 -2
  76. package/dist/index.js +3 -3
  77. package/package.json +2 -3
  78. package/dist/hooks/useAutosave.spec.d.ts +0 -1
@@ -1,5 +1,6 @@
1
1
  import { UIOverrides } from "../../../../config/uiOverrides.context.js";
2
2
  import { UIConfig } from "../../../../config/uiConfig.context.js";
3
+ import { FieldController } from "../../shared/form.binding.js";
3
4
  import { FormFieldLabel } from "../../FormField/FormFieldLabel.js";
4
5
  import { FormField } from "../../FormField/FormField.js";
5
6
  import { inputSideDefinition, inputSizeDefinition, useInputCva } from "../../shared/input.cva.js";
@@ -13,7 +14,6 @@ import { useRef } from "react";
13
14
  import { TextArea } from "react-aria-components";
14
15
  import { useTextField } from "react-aria";
15
16
  import { mergeRefs } from "@react-aria/utils";
16
- import { Controller } from "react-hook-form";
17
17
  //#region src/components/inputs/Input/TextArea/TextArea.tsx
18
18
  var TextAreaBase = (props) => {
19
19
  const $ = c(83);
@@ -282,34 +282,34 @@ var TextAreaBase = (props) => {
282
282
  };
283
283
  var TextArea$1 = (props) => {
284
284
  const $ = c(15);
285
- if ("formControl" in props && props.formControl) {
286
- let formControl;
285
+ if ("field" in props && props.field) {
286
+ let field;
287
287
  let innerProps;
288
288
  let ref;
289
289
  if ($[0] !== props) {
290
- ({formControl, ref, ...innerProps} = props);
290
+ ({field, ref, ...innerProps} = props);
291
291
  $[0] = props;
292
- $[1] = formControl;
292
+ $[1] = field;
293
293
  $[2] = innerProps;
294
294
  $[3] = ref;
295
295
  } else {
296
- formControl = $[1];
296
+ field = $[1];
297
297
  innerProps = $[2];
298
298
  ref = $[3];
299
299
  }
300
300
  let t0;
301
301
  if ($[4] !== innerProps || $[5] !== props.error || $[6] !== props.isDisabled || $[7] !== ref) {
302
302
  t0 = (t1) => {
303
- const { field, fieldState: t2 } = t1;
303
+ const { field: field_0, fieldState: t2 } = t1;
304
304
  const { error, isDirty } = t2;
305
305
  return /* @__PURE__ */ jsx(TextAreaBase, {
306
306
  ...innerProps,
307
- ref: mergeRefs(ref, field.ref),
308
- value: field.value ?? "",
309
- onChange: field.onChange,
310
- onBlur: field.onBlur,
307
+ ref: mergeRefs(ref, field_0.ref),
308
+ value: field_0.value ?? "",
309
+ onChange: field_0.onChange,
310
+ onBlur: field_0.onBlur,
311
311
  isDirty,
312
- isDisabled: field.disabled || props.isDisabled,
312
+ isDisabled: field_0.disabled || props.isDisabled,
313
313
  error: props.error ?? error?.message
314
314
  });
315
315
  };
@@ -320,14 +320,14 @@ var TextArea$1 = (props) => {
320
320
  $[8] = t0;
321
321
  } else t0 = $[8];
322
322
  let t1;
323
- if ($[9] !== formControl.control || $[10] !== formControl.name || $[11] !== t0) {
324
- t1 = /* @__PURE__ */ jsx(Controller, {
325
- control: formControl.control,
326
- name: formControl.name,
323
+ if ($[9] !== field.form || $[10] !== field.name || $[11] !== t0) {
324
+ t1 = /* @__PURE__ */ jsx(FieldController, {
325
+ control: field.form,
326
+ name: field.name,
327
327
  render: t0
328
328
  });
329
- $[9] = formControl.control;
330
- $[10] = formControl.name;
329
+ $[9] = field.form;
330
+ $[10] = field.name;
331
331
  $[11] = t0;
332
332
  $[12] = t1;
333
333
  } else t1 = $[12];
@@ -1,9 +1,9 @@
1
1
  import { Ref } from 'react';
2
2
  import { AriaTextFieldProps } from 'react-aria';
3
3
  import { InputProps as AriaInputProps } from 'react-aria-components';
4
- import { FieldValues } from 'react-hook-form';
5
4
  import { FormFieldProps } from '../../FormField/FormField';
6
5
  import { InputContentProps } from '../shared/InputContent';
6
+ import { FieldValues } from '../../shared/form.binding';
7
7
  import { ControlProps } from '../../shared/form.types';
8
8
  import { InputVariantProps } from '../../shared/input.cva';
9
9
  type AllowedHTMLInputTypeAttribute = "email" | "hidden" | "tel" | "text" | "url";
@@ -18,6 +18,6 @@ interface TextInputBaseProps extends FormFieldProps, InputVariantProps, Omit<Inp
18
18
  export interface TextInputProps extends TextInputBaseProps {
19
19
  renderStaticInput?: boolean;
20
20
  }
21
- export type ControlledTextInputProps<TFieldValues extends FieldValues> = ControlProps<TextInputProps, TFieldValues>;
21
+ export type ControlledTextInputProps<TFieldValues extends Record<string, unknown>> = ControlProps<TextInputProps, TFieldValues>;
22
22
  export declare const TextInput: <TFieldValues extends FieldValues>({ renderStaticInput, ...props }: ControlledTextInputProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
23
23
  export {};
@@ -1,5 +1,6 @@
1
1
  import { UIOverrides } from "../../../../config/uiOverrides.context.js";
2
2
  import { UIConfig } from "../../../../config/uiConfig.context.js";
3
+ import { FieldController } from "../../shared/form.binding.js";
3
4
  import { FormField } from "../../FormField/FormField.js";
4
5
  import { inputBaseDefinition } from "../../shared/input.cva.js";
5
6
  import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
@@ -13,7 +14,6 @@ import { useEffect, useRef, useState } from "react";
13
14
  import { Input } from "react-aria-components";
14
15
  import { useFocusVisible, useTextField } from "react-aria";
15
16
  import { mergeRefs } from "@react-aria/utils";
16
- import { Controller } from "react-hook-form";
17
17
  //#region src/components/inputs/Input/TextInput/TextInput.tsx
18
18
  var TextInputBase = (props) => {
19
19
  const $ = c(84);
@@ -377,7 +377,7 @@ var TextInputInner = (t0) => {
377
377
  return t3;
378
378
  };
379
379
  var TextInput = (t0) => {
380
- const $ = c(21);
380
+ const $ = c(20);
381
381
  let props;
382
382
  let renderStaticInput;
383
383
  if ($[0] !== t0) {
@@ -389,72 +389,70 @@ var TextInput = (t0) => {
389
389
  props = $[1];
390
390
  renderStaticInput = $[2];
391
391
  }
392
- if ("formControl" in props && props.formControl) {
393
- let formControl;
392
+ if ("field" in props && props.field) {
393
+ let field;
394
394
  let innerProps;
395
395
  let ref;
396
396
  if ($[3] !== props) {
397
- ({formControl, ref, ...innerProps} = props);
397
+ ({field, ref, ...innerProps} = props);
398
398
  $[3] = props;
399
- $[4] = formControl;
399
+ $[4] = field;
400
400
  $[5] = innerProps;
401
401
  $[6] = ref;
402
402
  } else {
403
- formControl = $[4];
403
+ field = $[4];
404
404
  innerProps = $[5];
405
405
  ref = $[6];
406
406
  }
407
- const controlWithOptions = formControl.control;
408
407
  let t1;
409
- if ($[7] !== controlWithOptions._options?.disabled || $[8] !== innerProps || $[9] !== props.error || $[10] !== props.isDisabled || $[11] !== ref || $[12] !== renderStaticInput) {
408
+ if ($[7] !== innerProps || $[8] !== props.error || $[9] !== props.isDisabled || $[10] !== ref || $[11] !== renderStaticInput) {
410
409
  t1 = (t2) => {
411
- const { field, fieldState: t3 } = t2;
410
+ const { field: field_0, fieldState: t3 } = t2;
412
411
  const { error, isDirty } = t3;
413
412
  return /* @__PURE__ */ jsx(TextInputInner, {
414
413
  ...innerProps,
415
- ref: mergeRefs(ref, field.ref),
416
- value: field.value,
417
- onChange: field.onChange,
418
- onBlur: field.onBlur,
414
+ ref: mergeRefs(ref, field_0.ref),
415
+ value: field_0.value,
416
+ onChange: field_0.onChange,
417
+ onBlur: field_0.onBlur,
419
418
  isDirty,
420
- isDisabled: field.disabled || props.isDisabled,
421
- isFormControlDisabled: !!controlWithOptions._options?.disabled,
419
+ isDisabled: field_0.disabled || props.isDisabled,
420
+ isFormControlDisabled: field_0.disabled,
422
421
  error: props.error ?? error?.message,
423
422
  renderStaticInput
424
423
  });
425
424
  };
426
- $[7] = controlWithOptions._options?.disabled;
427
- $[8] = innerProps;
428
- $[9] = props.error;
429
- $[10] = props.isDisabled;
430
- $[11] = ref;
431
- $[12] = renderStaticInput;
432
- $[13] = t1;
433
- } else t1 = $[13];
425
+ $[7] = innerProps;
426
+ $[8] = props.error;
427
+ $[9] = props.isDisabled;
428
+ $[10] = ref;
429
+ $[11] = renderStaticInput;
430
+ $[12] = t1;
431
+ } else t1 = $[12];
434
432
  let t2;
435
- if ($[14] !== formControl.control || $[15] !== formControl.name || $[16] !== t1) {
436
- t2 = /* @__PURE__ */ jsx(Controller, {
437
- control: formControl.control,
438
- name: formControl.name,
433
+ if ($[13] !== field.form || $[14] !== field.name || $[15] !== t1) {
434
+ t2 = /* @__PURE__ */ jsx(FieldController, {
435
+ control: field.form,
436
+ name: field.name,
439
437
  render: t1
440
438
  });
441
- $[14] = formControl.control;
442
- $[15] = formControl.name;
443
- $[16] = t1;
444
- $[17] = t2;
445
- } else t2 = $[17];
439
+ $[13] = field.form;
440
+ $[14] = field.name;
441
+ $[15] = t1;
442
+ $[16] = t2;
443
+ } else t2 = $[16];
446
444
  return t2;
447
445
  }
448
446
  let t1;
449
- if ($[18] !== props || $[19] !== renderStaticInput) {
447
+ if ($[17] !== props || $[18] !== renderStaticInput) {
450
448
  t1 = /* @__PURE__ */ jsx(TextInputInner, {
451
449
  ...props,
452
450
  renderStaticInput
453
451
  });
454
- $[18] = props;
455
- $[19] = renderStaticInput;
456
- $[20] = t1;
457
- } else t1 = $[20];
452
+ $[17] = props;
453
+ $[18] = renderStaticInput;
454
+ $[19] = t1;
455
+ } else t1 = $[19];
458
456
  return t1;
459
457
  };
460
458
  function _temp(input) {
@@ -1,8 +1,8 @@
1
1
  import { ReactNode } from 'react';
2
- import { SubmitErrorHandler, SubmitHandler, UseFormReturn } from 'react-hook-form';
3
2
  import { z } from 'zod';
4
3
  import { InputComponentProps, InputDefBaseProps } from './InputItem';
5
4
  import { AllowedComponentType, DefaultComponentType } from '../../../helpers/dynamicInputs';
5
+ import { FormSubmitErrorHandler, FormSubmitHandler, UIForm } from '../../../hooks/useForm';
6
6
  type Capitalize<T extends string> = T extends `${infer First}${infer Rest}` ? `${Uppercase<First>}${Rest}` : T;
7
7
  type FieldProps<TProps = {}> = {
8
8
  label: string;
@@ -15,10 +15,10 @@ type FieldComponents<TSchema extends z.ZodObject<any>> = {
15
15
  [K in keyof Required<z.infer<TSchema>> as Capitalize<K & string>]: <T extends AllowedComponentType<TSchema["shape"][K]> | undefined = undefined>(props: FieldComponentProps<TSchema, K, T>) => ReactNode;
16
16
  };
17
17
  interface FormProps<TSchema extends z.ZodObject<any>, TSchemaType extends Record<string, any> = z.infer<TSchema>> {
18
- form: UseFormReturn<TSchemaType>;
18
+ form: UIForm<TSchemaType>;
19
19
  schema: TSchema;
20
- onSubmit: SubmitHandler<TSchemaType>;
21
- onError?: SubmitErrorHandler<TSchemaType>;
20
+ onSubmit: FormSubmitHandler<TSchemaType>;
21
+ onError?: FormSubmitErrorHandler<TSchemaType>;
22
22
  className?: string;
23
23
  children: (components: FieldComponents<TSchema>) => ReactNode;
24
24
  }
@@ -1,34 +1,34 @@
1
1
  import { ComponentProps, JSXElementConstructor, ReactElement, ReactNode } from 'react';
2
- import { Control, UseFormReturn } from 'react-hook-form';
3
2
  import { z } from 'zod';
4
3
  import { Autocomplete } from '../Selection/Autocomplete/Autocomplete';
5
4
  import { Select } from '../Selection/Select/Select';
6
5
  import { HasRequiredProperty } from '../../../types/common';
6
+ import { UIForm } from '../../../hooks/useForm';
7
7
  declare const componentRegistry: {
8
- readonly toggle: <TFieldValues extends import('react-hook-form').FieldValues>(props: import('../Toggle/Toggle').ControlledToggleProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
9
- readonly checkbox: <TFieldValues extends import('react-hook-form').FieldValues>(props: import('../Checkbox/Checkbox').ControlledCheckboxProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
10
- readonly checkboxGroup: <TFieldValues extends import('react-hook-form').FieldValues>(props: import('../Checkbox/CheckboxGroup').ControlledCheckboxGroupProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
11
- readonly numberInput: <TFieldValues extends import('react-hook-form').FieldValues>({ renderStaticInput, ...props }: import('../Input/NumberInput/NumberInput').ControlledNumberInputProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
12
- readonly numberRangeInput: <TFieldValues extends import('react-hook-form').FieldValues>({ renderStaticInput, ...props }: import('../Input/NumberRangeInput/NumberRangeInput').ControlledNumberRangeInputProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
13
- readonly slider: <TFieldValues extends import('react-hook-form').FieldValues, IsRange extends boolean = false>(props: import('../Slider/Slider').ControlledSliderProps<TFieldValues, IsRange>) => import("react/jsx-runtime").JSX.Element;
14
- readonly textInput: <TFieldValues extends import('react-hook-form').FieldValues>({ renderStaticInput, ...props }: import('../Input/TextInput/TextInput').ControlledTextInputProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
15
- readonly passwordInput: <TFieldValues extends import('react-hook-form').FieldValues>(props: import('../Input/PasswordInput/PasswordInput').ControlledPasswordInputProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
16
- readonly textArea: <TFieldValues extends import('react-hook-form').FieldValues>(props: import('../Input/TextArea/TextArea').ControlledTextAreaProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
8
+ readonly toggle: <TFieldValues extends import('../shared/form.binding').FieldValues>(props: import('../Toggle/Toggle').ControlledToggleProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
9
+ readonly checkbox: <TFieldValues extends import('../shared/form.binding').FieldValues>(props: import('../Checkbox/Checkbox').ControlledCheckboxProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
10
+ readonly checkboxGroup: <TFieldValues extends import('../shared/form.binding').FieldValues>(props: import('../Checkbox/CheckboxGroup').ControlledCheckboxGroupProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
11
+ readonly numberInput: <TFieldValues extends import('../shared/form.binding').FieldValues>({ renderStaticInput, ...props }: import('../Input/NumberInput/NumberInput').ControlledNumberInputProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
12
+ readonly numberRangeInput: <TFieldValues extends import('../shared/form.binding').FieldValues>({ renderStaticInput, ...props }: import('../Input/NumberRangeInput/NumberRangeInput').ControlledNumberRangeInputProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
13
+ readonly slider: <TFieldValues extends import('../shared/form.binding').FieldValues, IsRange extends boolean = false>(props: import('../Slider/Slider').ControlledSliderProps<TFieldValues, IsRange>) => import("react/jsx-runtime").JSX.Element;
14
+ readonly textInput: <TFieldValues extends import('../shared/form.binding').FieldValues>({ renderStaticInput, ...props }: import('../Input/TextInput/TextInput').ControlledTextInputProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
15
+ readonly passwordInput: <TFieldValues extends import('../shared/form.binding').FieldValues>(props: import('../Input/PasswordInput/PasswordInput').ControlledPasswordInputProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
16
+ readonly textArea: <TFieldValues extends import('../shared/form.binding').FieldValues>(props: import('../Input/TextArea/TextArea').ControlledTextAreaProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
17
17
  readonly select: typeof Select;
18
- readonly querySelect: <TFieldValues extends import('react-hook-form').FieldValues, TQueryFn extends import('../Selection/shared/querySelect.utils').QueryFn, TKey extends import('react-aria').Key = import('react-aria').Key, TInitialSelectItem = import('../../..').DefaultInitialSelectItem<TKey>>(props: import('../Selection/Select/QuerySelect').QuerySelectProps<TFieldValues, TQueryFn, TKey, TInitialSelectItem>) => import("react/jsx-runtime").JSX.Element;
18
+ readonly querySelect: <TFieldValues extends import('../shared/form.binding').FieldValues, TQueryFn extends import('../Selection/shared/querySelect.utils').QueryFn, TKey extends import('react-aria').Key = import('react-aria').Key, TInitialSelectItem = import('../../..').DefaultInitialSelectItem<TKey>>(props: import('../Selection/Select/QuerySelect').QuerySelectProps<TFieldValues, TQueryFn, TKey, TInitialSelectItem>) => import("react/jsx-runtime").JSX.Element;
19
19
  readonly autocomplete: typeof Autocomplete;
20
- readonly queryAutocomplete: <TFieldValues extends import('react-hook-form').FieldValues, TSelectItem extends import('../../..').SelectItem<any>, TQueryFn extends import('../Selection/Autocomplete/queryAutocomplete.types').QueryFn>(props: import('../Selection/Autocomplete/queryAutocomplete.types').QueryAutocompleteProps<TFieldValues, TSelectItem, TQueryFn>) => import("react/jsx-runtime").JSX.Element;
21
- readonly segment: <TFieldValues extends import('react-hook-form').FieldValues, TKey extends import('react-aria').Key = import('react-aria').Key>(props: import('../../..').ControlledSegmentProps<TFieldValues, TKey>) => import("react/jsx-runtime").JSX.Element;
22
- readonly datePicker: <TFieldValues extends import('react-hook-form').FieldValues>({ fullIso, granularity, minValue, maxValue, renderStaticInput, ...props }: import('../DateTime/DatePicker/DatePicker').ControlledDatePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
23
- readonly dateTimePicker: <TFieldValues extends import('react-hook-form').FieldValues>({ fullIso, renderStaticInput, ...props }: import('../DateTime/DateTimePicker/DateTimePicker').ControlledDateTimePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
24
- readonly timePicker: <TFieldValues extends import('react-hook-form').FieldValues>({ renderStaticInput, ...props }: import('../DateTime/TimePicker/TimePicker').ControlledTimePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
25
- readonly dateRangePicker: <TFieldValues extends import('react-hook-form').FieldValues>({ fullIso, minValue, maxValue, renderStaticInput, ...props }: import('../DateTime/DateRangePicker/DateRangePicker').ControlledDateRangePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
20
+ readonly queryAutocomplete: <TFieldValues extends import('../shared/form.binding').FieldValues, TSelectItem extends import('../../..').SelectItem<any>, TQueryFn extends import('../Selection/Autocomplete/queryAutocomplete.types').QueryFn>(props: import('../Selection/Autocomplete/queryAutocomplete.types').QueryAutocompleteProps<TFieldValues, TSelectItem, TQueryFn>) => import("react/jsx-runtime").JSX.Element;
21
+ readonly segment: <TFieldValues extends import('../shared/form.binding').FieldValues, TKey extends import('react-aria').Key = import('react-aria').Key>(props: import('../../..').ControlledSegmentProps<TFieldValues, TKey>) => import("react/jsx-runtime").JSX.Element;
22
+ readonly datePicker: <TFieldValues extends import('../shared/form.binding').FieldValues>({ fullIso, granularity, minValue, maxValue, renderStaticInput, ...props }: import('../DateTime/DatePicker/DatePicker').ControlledDatePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
23
+ readonly dateTimePicker: <TFieldValues extends import('../shared/form.binding').FieldValues>({ fullIso, renderStaticInput, ...props }: import('../DateTime/DateTimePicker/DateTimePicker').ControlledDateTimePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
24
+ readonly timePicker: <TFieldValues extends import('../shared/form.binding').FieldValues>({ renderStaticInput, ...props }: import('../DateTime/TimePicker/TimePicker').ControlledTimePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
25
+ readonly dateRangePicker: <TFieldValues extends import('../shared/form.binding').FieldValues>({ fullIso, minValue, maxValue, renderStaticInput, ...props }: import('../DateTime/DateRangePicker/DateRangePicker').ControlledDateRangePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
26
26
  readonly unknown: null;
27
27
  };
28
28
  export type InputComponentRegistry = typeof componentRegistry;
29
29
  export type InputComponentType = keyof InputComponentRegistry;
30
30
  interface InputItemProps<TSchema extends z.ZodObject<any>, TSchemaType extends Record<string, any> = z.infer<TSchema>> {
31
- form: UseFormReturn<TSchemaType>;
31
+ form: UIForm<TSchemaType>;
32
32
  inputDef: InputDef<TSchemaType>;
33
33
  }
34
34
  export type InputDef<TSchemaType extends Record<string, any>> = {
@@ -55,13 +55,13 @@ interface RenderBasedInputDef<TSchemaType extends Record<string, any>, K extends
55
55
  placeholder?: string;
56
56
  props?: never;
57
57
  inputWrapper?: never;
58
- render: (formControl: {
59
- control: Control<TSchemaType>;
58
+ render: (field: {
59
+ form: UIForm<TSchemaType>;
60
60
  name: K;
61
- }, form: UseFormReturn<TSchemaType>) => ReactElement;
61
+ }, form: UIForm<TSchemaType>) => ReactElement;
62
62
  }
63
63
  export type InputWrapperType = (children: ReactNode, label: string) => ReactElement;
64
64
  export type InputComponentProps<T extends InputComponentType> = InputComponentRegistry[T] extends keyof React.JSX.IntrinsicElements | JSXElementConstructor<any> ? ComponentProps<InputComponentRegistry[T]> : null;
65
- export type InputDefBaseProps<TProps> = Omit<TProps, "formControl" | "label" | "placeholder" | "children">;
65
+ export type InputDefBaseProps<TProps> = Omit<TProps, "field" | "label" | "placeholder" | "children">;
66
66
  export declare function InputItem<TSchema extends z.ZodObject<any>, TSchemaType extends Record<string, any> = z.infer<TSchema>>({ form, inputDef }: InputItemProps<TSchema, TSchemaType>): import("react/jsx-runtime").JSX.Element | null;
67
67
  export {};
@@ -44,70 +44,69 @@ function InputItem(t0) {
44
44
  const $ = c(18);
45
45
  const { form, inputDef } = t0;
46
46
  const { name, label, placeholder, props, inputWrapper, render, type } = inputDef;
47
- const t1 = form.control;
48
- let formControl;
49
- let t2;
47
+ let field;
48
+ let t1;
50
49
  if ($[0] !== form || $[1] !== name || $[2] !== render) {
51
- t2 = Symbol.for("react.early_return_sentinel");
50
+ t1 = Symbol.for("react.early_return_sentinel");
52
51
  bb0: {
53
- formControl = {
54
- control: t1,
52
+ field = {
53
+ form,
55
54
  name
56
55
  };
57
56
  if (render) {
58
- t2 = render(formControl, form);
57
+ t1 = render(field, form);
59
58
  break bb0;
60
59
  }
61
60
  }
62
61
  $[0] = form;
63
62
  $[1] = name;
64
63
  $[2] = render;
65
- $[3] = formControl;
66
- $[4] = t2;
64
+ $[3] = field;
65
+ $[4] = t1;
67
66
  } else {
68
- formControl = $[3];
69
- t2 = $[4];
67
+ field = $[3];
68
+ t1 = $[4];
70
69
  }
71
- if (t2 !== Symbol.for("react.early_return_sentinel")) return t2;
70
+ if (t1 !== Symbol.for("react.early_return_sentinel")) return t1;
72
71
  if (!type) return null;
73
72
  const Component = componentRegistry[type];
74
73
  const usesChildrenAsLabel = ["toggle", "checkbox"].includes(type);
75
- let t3;
74
+ let t2;
76
75
  if ($[5] !== props) {
77
- t3 = props ?? {};
76
+ t2 = props ?? {};
78
77
  $[5] = props;
79
- $[6] = t3;
80
- } else t3 = $[6];
81
- const inputProps = t3;
82
- const t4 = usesChildrenAsLabel ? void 0 : label;
83
- const t5 = usesChildrenAsLabel ? label : void 0;
84
- let t6;
85
- if ($[7] !== Component || $[8] !== formControl || $[9] !== inputProps || $[10] !== placeholder || $[11] !== t4 || $[12] !== t5) {
86
- t6 = /* @__PURE__ */ jsx(Component, {
78
+ $[6] = t2;
79
+ } else t2 = $[6];
80
+ const inputProps = t2;
81
+ const t3 = usesChildrenAsLabel ? void 0 : label;
82
+ const t4 = usesChildrenAsLabel ? label : void 0;
83
+ let t5;
84
+ if ($[7] !== Component || $[8] !== field || $[9] !== inputProps || $[10] !== placeholder || $[11] !== t3 || $[12] !== t4) {
85
+ t5 = /* @__PURE__ */ jsx(Component, {
87
86
  ...inputProps,
88
- label: t4,
87
+ label: t3,
89
88
  placeholder,
90
- formControl,
91
- children: t5
89
+ field,
90
+ children: t4
92
91
  });
93
92
  $[7] = Component;
94
- $[8] = formControl;
93
+ $[8] = field;
95
94
  $[9] = inputProps;
96
95
  $[10] = placeholder;
97
- $[11] = t4;
98
- $[12] = t5;
99
- $[13] = t6;
100
- } else t6 = $[13];
101
- const inputComponent = t6;
102
- let t7;
96
+ $[11] = t3;
97
+ $[12] = t4;
98
+ $[13] = t5;
99
+ } else t5 = $[13];
100
+ const inputComponent = t5;
101
+ let t6;
103
102
  if ($[14] !== inputComponent || $[15] !== inputWrapper || $[16] !== label) {
104
- t7 = inputWrapper ? inputWrapper(inputComponent, label) : inputComponent;
103
+ t6 = inputWrapper ? inputWrapper(inputComponent, label) : inputComponent;
105
104
  $[14] = inputComponent;
106
105
  $[15] = inputWrapper;
107
106
  $[16] = label;
108
- $[17] = t7;
109
- } else t7 = $[17];
110
- return t7;
107
+ $[17] = t6;
108
+ } else t6 = $[17];
109
+ return t6;
111
110
  }
112
111
  //#endregion
113
112
  export { InputItem };
@@ -1,9 +1,9 @@
1
1
  import { ReactNode } from 'react';
2
- import { UseFormReturn } from 'react-hook-form';
3
2
  import { z } from 'zod';
3
+ import { UIForm } from '../../../hooks/useForm';
4
4
  import { InputDef } from './InputItem';
5
5
  export interface InputsProps<TSchema extends z.ZodObject<any>, TSchemaType extends Record<string, any> = z.infer<TSchema>> {
6
- form: UseFormReturn<TSchemaType>;
6
+ form: UIForm<TSchemaType>;
7
7
  inputDefs: Array<InputDef<TSchemaType>>;
8
8
  children?: (inputs: Record<keyof TSchemaType, ReactNode>) => ReactNode;
9
9
  }
@@ -1,6 +1,6 @@
1
1
  import { ReactElement, Ref } from 'react';
2
2
  import { RadioGroupProps as AriaRadioGroupProps } from 'react-aria-components';
3
- import { FieldValues } from 'react-hook-form';
3
+ import { FieldValues } from '../shared/form.binding';
4
4
  import { FormFieldProps } from '../FormField/FormField';
5
5
  import { RadioVariantProps } from './radio.cva';
6
6
  import { ControlProps } from '../shared/form.types';
@@ -14,7 +14,6 @@ interface RadioGroupBaseProps extends Omit<FormFieldProps, "variant">, RadioVari
14
14
  isDirty?: boolean;
15
15
  inputClassName?: string;
16
16
  labelClassName?: string;
17
- fireBlurOnChange?: boolean;
18
17
  }
19
18
  export interface RadioGroupProps extends RadioGroupBaseProps {
20
19
  }