Upgrade to container-field v3

Author: jzempel

packages/forms/src/elements/Checkbox.tsx

@@ -41,15 +41,15 @@ export const Checkbox = React.forwardRef<HTMLInputElement, ICheckboxProps>(
       ref: combinedRef,
       ...props,
       ...fieldsetContext
-    };
+    } as any;
 
     if (fieldContext) {
       combinedProps = fieldContext.getInputProps(combinedProps);
     }
 
     return (
       <InputContext.Provider value="checkbox">
-        <StyledCheckInput {...(combinedProps as any)} />
+        <StyledCheckInput {...combinedProps} />
         {children}
       </InputContext.Provider>
     );

packages/forms/src/elements/Input.tsx

@@ -31,7 +31,7 @@ export const Input = React.forwardRef<HTMLInputElement, IInputProps>(
       ref,
       onSelect: onSelectHandler,
       ...props
-    };
+    } as any;
 
     if (inputGroupContext) {
       combinedProps = {
@@ -45,7 +45,7 @@ export const Input = React.forwardRef<HTMLInputElement, IInputProps>(
       combinedProps = fieldContext.getInputProps(combinedProps);
     }
 
-    return <StyledTextInput {...(combinedProps as any)} />;
+    return <StyledTextInput {...combinedProps} />;
   }
 );
 

packages/forms/src/elements/MediaInput.tsx

@@ -75,12 +75,12 @@ export const MediaInput = React.forwardRef<HTMLInputElement, IMediaInputProps>(
       ref: mergeRefs([inputRef, ref]),
       onSelect: onSelectHandler,
       ...props
-    };
+    } as any;
 
     let isLabelHovered;
 
     if (fieldContext) {
-      combinedProps = fieldContext.getInputProps(combinedProps, { isDescribed: true });
+      combinedProps = fieldContext.getInputProps(combinedProps);
       isLabelHovered = fieldContext.isLabelHovered;
     }
 
@@ -113,7 +113,7 @@ export const MediaInput = React.forwardRef<HTMLInputElement, IMediaInputProps>(
             {start}
           </FauxInput.StartIcon>
         )}
-        <StyledTextMediaInput {...(combinedProps as any)} />
+        <StyledTextMediaInput {...combinedProps} />
         {end && (
           <FauxInput.EndIcon
             isDisabled={disabled}

packages/forms/src/elements/Radio.tsx

@@ -25,15 +25,15 @@ export const Radio = React.forwardRef<HTMLInputElement, IRadioProps>(
       ref,
       ...props,
       ...fieldsetContext
-    };
+    } as any;
 
     if (fieldContext) {
       combinedProps = fieldContext.getInputProps(combinedProps);
     }
 
     return (
       <InputContext.Provider value="radio">
-        <StyledRadioInput {...(combinedProps as any)} />
+        <StyledRadioInput {...combinedProps} />
         {children}
       </InputContext.Provider>
     );

packages/forms/src/elements/Range.tsx

@@ -59,13 +59,13 @@ export const Range = React.forwardRef<HTMLInputElement, IRangeProps>(
       backgroundSize,
       ...props,
       onChange
-    };
+    } as any;
 
     if (fieldContext) {
-      combinedProps = fieldContext.getInputProps(combinedProps, { isDescribed: true });
+      combinedProps = fieldContext.getInputProps(combinedProps);
     }
 
-    return <StyledRangeInput {...(combinedProps as any)} />;
+    return <StyledRangeInput {...combinedProps} />;
   }
 );
 

packages/forms/src/elements/Select.tsx

@@ -28,10 +28,10 @@ export const Select = React.forwardRef<HTMLSelectElement, ISelectProps>(
       focusInset,
       ref,
       ...props
-    };
+    } as any;
 
     if (fieldContext) {
-      combinedProps = fieldContext.getInputProps(combinedProps, { isDescribed: true });
+      combinedProps = fieldContext.getInputProps(combinedProps);
     }
 
     return (
@@ -41,7 +41,7 @@ export const Select = React.forwardRef<HTMLSelectElement, ISelectProps>(
         validation={validation}
         focusInset={focusInset}
       >
-        <StyledSelect {...(combinedProps as any)} />
+        <StyledSelect {...combinedProps} />
         {!isBare && (
           <FauxInput.EndIcon isDisabled={disabled}>
             <Chevron />

packages/forms/src/elements/Textarea.tsx

@@ -162,15 +162,15 @@ export const Textarea = React.forwardRef<HTMLTextAreaElement, ITextareaProps>(
         ...style
       },
       ...props
-    };
+    } as any;
 
     if (fieldContext) {
-      combinedProps = fieldContext.getInputProps(combinedProps, { isDescribed: true });
+      combinedProps = fieldContext.getInputProps(combinedProps);
     }
 
     return (
       <>
-        <StyledTextarea {...(combinedProps as any)} />
+        <StyledTextarea {...combinedProps} />
         {isAutoResizable && (
           <StyledTextarea
             aria-hidden

packages/forms/src/elements/Toggle.tsx

@@ -25,15 +25,15 @@ export const Toggle = React.forwardRef<HTMLInputElement, IToggleProps>(
       ref,
       ...props,
       ...fieldsetContext
-    };
+    } as any;
 
     if (fieldContext) {
       combinedProps = fieldContext.getInputProps(combinedProps);
     }
 
     return (
       <InputContext.Provider value="toggle">
-        <StyledToggleInput {...(combinedProps as any)} />
+        <StyledToggleInput {...combinedProps} />
         {children}
       </InputContext.Provider>
     );

packages/forms/src/elements/common/Field.tsx

@@ -28,13 +28,16 @@ export const Field = React.forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElem
     const [isLabelActive, setIsLabelActive] = useState(false);
     const [isLabelHovered, setIsLabelHovered] = useState(false);
     const multiThumbRangeRef = useRef<HTMLDivElement>(null);
-    const { getInputProps, getMessageProps, ...propGetters } = useField(props.id);
+    const { getInputProps, getMessageProps, ...propGetters } = useField({
+      idPrefix: props.id,
+      hasHint,
+      hasMessage
+    });
     const fieldProps = useMemo(
       () => ({
         ...propGetters,
-        getInputProps: (options: any, describeOptions: any = {}) =>
-          getInputProps(options, { ...describeOptions, isDescribed: hasHint, hasMessage }),
-        getMessageProps: (options: any) => getMessageProps({ role: 'alert', ...options }),
+        getInputProps,
+        getMessageProps,
         isLabelActive,
         setIsLabelActive,
         isLabelHovered,

packages/forms/src/utils/useFieldContext.ts

@@ -6,9 +6,9 @@
  */
 
 import { createContext, useContext, MutableRefObject } from 'react';
-import { IUseFieldPropGetters } from '@zendeskgarden/container-field';
+import { IUseFieldReturnValue } from '@zendeskgarden/container-field';
 
-interface IFieldContext extends IUseFieldPropGetters {
+interface IFieldContext extends IUseFieldReturnValue {
   getMessageProps: (messageProps: any) => any;
   isLabelActive: boolean;
   isLabelHovered: boolean;