refactor(Field): complete migration to wrapWithField wrapper

.changeset/friendly-books-compare.md

@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': minor
+---
+
+Add casting property to Field component to cast Field value to different type that input allows

src/components/forms/FileInput/FileInput.tsx

@@ -22,7 +22,7 @@ import {
   tasty,
 } from '../../../tasty';
 import { FieldBaseProps } from '../../../shared';
-import { FieldWrapper } from '../FieldWrapper';
+import { wrapWithField } from '../wrapper';
 
 import type { AriaTextFieldProps } from '@react-types/textfield';
 
@@ -135,6 +135,8 @@ function extractContents(element, callback) {
 }
 
 function FileInput(props: CubeFileInputProps, ref) {
+  props = useProviderProps(props);
+
   let {
     id,
     name,
@@ -163,11 +165,14 @@ function FileInput(props: CubeFileInputProps, ref) {
     type = 'file',
     inputProps,
     ...otherProps
-  } = useProviderProps(props);
+  } = props;
+
   const [value, setValue] = useState();
   const [dragHover, setDragHover] = useState(false);
+
   let domRef = useRef(null);
   let defaultInputRef = useRef(null);
+
   inputRef = inputRef || defaultInputRef;
 
   let styles = extractStyles(otherProps, CONTAINER_STYLES);
@@ -247,31 +252,10 @@ function FileInput(props: CubeFileInputProps, ref) {
     </FileInputElement>
   );
 
-  return (
-    <FieldWrapper
-      {...{
-        labelPosition,
-        label,
-        extra,
-        styles,
-        isRequired,
-        labelStyles,
-        necessityIndicator,
-        necessityLabel,
-        labelProps,
-        isDisabled,
-        validationState,
-        message,
-        description,
-        requiredMark,
-        tooltip,
-        isHidden,
-        labelSuffix,
-        Component: fileInput,
-        ref: domRef,
-      }}
-    />
-  );
+  return wrapWithField(fileInput, domRef, {
+    ...props,
+    styles,
+  });
 }
 
 /**

src/components/forms/Form/ComplexForm.stories.tsx

@@ -203,6 +203,40 @@ const ComplexErrorTemplate: StoryFn<typeof Form> = (args) => {
   );
 };
 
+const CastingTemplate: StoryFn<typeof Form> = (args) => {
+  const [form] = Form.useForm();
+
+  return (
+    <>
+      <Form
+        form={form}
+        {...args}
+        defaultValues={{
+          select: 3,
+        }}
+        onSubmit={(v) => {
+          console.log('onSubmit:', v);
+        }}
+        onValuesChange={(v) => {
+          console.log('onChange', v);
+        }}
+      >
+        <Select
+          name="select"
+          label="Select field"
+          tooltip="Additional field description"
+          casting="number"
+        >
+          <Item key="1">One</Item>
+          <Item key="2">Two</Item>
+          <Item key="3">Three</Item>
+        </Select>
+        <Submit>Submit</Submit>
+      </Form>
+    </>
+  );
+};
+
 const Template: StoryFn<typeof Form> = (args) => {
   const [form] = Form.useForm();
 
@@ -405,3 +439,5 @@ UnknownErrorMessage.play = async ({ canvasElement }) => {
     expect(alertElement).not.toBeInTheDocument();
   });
 };
+
+export const ValueCasting = CastingTemplate.bind({});

src/components/forms/Form/types.ts

@@ -8,7 +8,7 @@ export type CubeFieldData<Name extends string, Value> = {
   readonly name: Name;
   errors: ReactNode[];
   value?: Value;
-  inputValue?: Value;
+  inputValue?: Value | string | undefined | null;
   touched?: boolean;
   rules?: any[];
   validating?: boolean;

src/components/forms/Form/use-field/types.ts

@@ -9,7 +9,7 @@ import {
 import { CubeFormInstance } from '../use-form';
 import { Props } from '../../../../tasty';
 
-export interface CubeFieldProps<T extends FieldTypes> {
+export interface CubeFieldProps<T extends FieldTypes, K = unknown> {
   /** The initial value of the input. */
   defaultValue?: any;
   /** The unique ID of the field */
@@ -35,6 +35,12 @@ export interface CubeFieldProps<T extends FieldTypes> {
   /** Message for the field. Some additional information or error notice */
   message?: ReactNode;
   labelProps?: Props;
+  casting?:
+    | 'number'
+    | [
+        (inputValue: K) => string | null | undefined,
+        (outputValue: string) => K | null | undefined,
+      ];
 }
 
 export type FieldReturnValue<T extends FieldTypes> = {

src/components/forms/Form/use-field/use-field.ts

@@ -59,8 +59,16 @@ export function useField<T extends FieldTypes, Props extends CubeFieldProps<T>>(
     validationDelay,
     showValid,
     shouldUpdate,
+    casting,
   } = props;
 
+  if (casting === 'number') {
+    casting = [
+      (inputValue: unknown) => String(inputValue) ?? null,
+      (outputValue: string) => Number(outputValue) ?? null,
+    ];
+  }
+
   if (rules && rules.length && validationDelay) {
     rules.unshift(delayValidationRule(validationDelay));
   }
@@ -135,6 +143,14 @@ export function useField<T extends FieldTypes, Props extends CubeFieldProps<T>>(
 
     const field = form.getFieldInstance(fieldName);
 
+    if (
+      casting?.[1] &&
+      typeof val === 'string' &&
+      typeof casting?.[1] === 'function'
+    ) {
+      val = casting[1](val);
+    }
+
     if (shouldUpdate) {
       const fieldsValue = form.getFieldsValue();
 
@@ -172,11 +188,17 @@ export function useField<T extends FieldTypes, Props extends CubeFieldProps<T>>(
     }
   });
 
+  let inputValue = field?.inputValue;
+
+  if (casting?.[0] && inputValue) {
+    inputValue = casting[0](inputValue);
+  }
+
   return useMemo(
     () => ({
       id: fieldId,
       name: fieldName,
-      value: field?.inputValue,
+      value: inputValue,
       validateTrigger,
       form,
       field,

src/components/forms/Slider/SliderBase.tsx

@@ -4,10 +4,11 @@ import { FocusableRef } from '@react-types/shared';
 import { SliderState, useSliderState } from 'react-stately';
 import { useSlider, useNumberFormatter } from 'react-aria';
 
-import { FieldWrapper } from '../FieldWrapper';
 import { extractStyles, OUTER_STYLES, tasty } from '../../../tasty';
 import { useFieldProps, useFormProps } from '../Form';
 import { Text } from '../../content/Text';
+import { mergeProps } from '../../../utils/react';
+import { wrapWithField } from '../wrapper';
 
 import { SliderControlsElement, SliderElement } from './elements';
 import { CubeSliderBaseProps } from './types';
@@ -211,27 +212,17 @@ function SliderBase(
 
   styles = extractStyles(otherProps, OUTER_STYLES, styles);
 
-  return (
-    <FieldWrapper
-      {...{
-        labelPosition,
-        label,
-        extra,
+  return wrapWithField(
+    sliderField,
+    ref,
+    mergeProps(
+      {
+        ...props,
         styles,
-        isRequired,
-        labelStyles,
-        necessityIndicator,
-        labelProps,
-        isDisabled,
-        validationState,
-        message,
-        description,
-        requiredMark,
-        labelSuffix,
-        Component: sliderField,
-        ref: ref,
-      }}
-    />
+        extra,
+      },
+      { labelProps },
+    ),
   );
 }
 

src/components/forms/wrapper.tsx

@@ -1,4 +1,5 @@
 import { ReactElement, RefObject } from 'react';
+import { FocusableRef } from '@react-types/shared';
 
 import { FieldBaseProps, FormBaseProps } from '../../shared';
 import { BaseProps, Styles } from '../../tasty';
@@ -11,7 +12,7 @@ interface WrapWithFieldProps extends FieldBaseProps, BaseProps, FormBaseProps {
 
 export function wrapWithField<T extends WrapWithFieldProps>(
   component: ReactElement,
-  ref: RefObject<unknown>,
+  ref: RefObject<unknown> | FocusableRef<HTMLElement>,
   props: T,
 ) {
   let {
@@ -20,13 +21,15 @@ export function wrapWithField<T extends WrapWithFieldProps>(
     labelPosition = 'top',
     labelStyles,
     isRequired,
+    isDisabled,
+    casting,
     necessityIndicator,
-    necessityLabel,
-    validationState,
     message,
+    messageStyles,
     description,
-    isDisabled,
+    validationState,
     labelProps,
+    fieldProps,
     requiredMark = true,
     tooltip,
     isHidden,
@@ -38,23 +41,25 @@ export function wrapWithField<T extends WrapWithFieldProps>(
   return (
     <FieldWrapper
       {...{
-        labelPosition,
         label,
         extra,
-        styles,
-        isRequired,
+        labelPosition,
         labelStyles,
+        isRequired,
+        isDisabled,
+        casting,
         necessityIndicator,
-        necessityLabel,
         labelProps,
-        isDisabled,
-        validationState,
+        fieldProps,
         message,
+        messageStyles,
         description,
+        validationState,
         requiredMark,
         tooltip,
         isHidden,
         labelSuffix,
+        styles,
         children,
         Component: component,
         ref,

src/components/pickers/ComboBox/ComboBox.tsx

@@ -35,13 +35,13 @@ import {
   useCombinedRefs,
   useLayoutEffect,
 } from '../../../utils/react';
-import { FieldWrapper } from '../../forms/FieldWrapper';
 import { CubeSelectBaseProps, ListBoxPopup } from '../Select/Select';
 import {
   DEFAULT_INPUT_STYLES,
   INPUT_WRAPPER_STYLES,
 } from '../../forms/TextInput/TextInputBase';
 import { OverlayWrapper } from '../../overlays/OverlayWrapper';
+import { wrapWithField } from '../../forms/wrapper';
 
 import type {
   CollectionBase,
@@ -153,7 +153,6 @@ export const ComboBox = forwardRef(function ComboBox<T extends object>(
     qa,
     label,
     extra,
-    labelPosition = 'top',
     labelStyles,
     isRequired,
     necessityIndicator,
@@ -184,7 +183,6 @@ export const ComboBox = forwardRef(function ComboBox<T extends object>(
     autoComplete = 'off',
     direction = 'bottom',
     shouldFlip = true,
-    requiredMark = true,
     menuTrigger = 'input',
     suffixPosition = 'before',
     loadingState,
@@ -420,27 +418,10 @@ export const ComboBox = forwardRef(function ComboBox<T extends object>(
     </ComboBoxWrapperElement>
   );
 
-  return (
-    <FieldWrapper
-      {...{
-        labelPosition,
-        label,
-        extra,
-        styles,
-        isRequired,
-        labelStyles,
-        necessityIndicator,
-        labelProps,
-        isDisabled,
-        validationState,
-        message,
-        description,
-        requiredMark,
-        labelSuffix,
-        Component: comboBoxField,
-        ref: ref,
-      }}
-    />
+  return wrapWithField(
+    comboBoxField,
+    ref,
+    mergeProps({ ...props, styles }, { labelProps }),
   );
 }) as unknown as (<T>(
   props: CubeComboBoxProps<T> & { ref?: ForwardedRef<HTMLDivElement> },