refactor(forms): use transient props where appropriate

zendeskgarden · Oct 15, 2024 · 41c5712 · 41c5712
1 parent c305f17
commit 41c5712
Show file tree

Hide file tree

Showing 49 changed files with 369 additions and 334 deletions.
diff --git a/packages/forms/src/elements/Checkbox.tsx b/packages/forms/src/elements/Checkbox.tsx
@@ -17,7 +17,7 @@ import useFieldsetContext from '../utils/useFieldsetContext';
  * @extends InputHTMLAttributes<HTMLInputElement>
  */
 export const Checkbox = React.forwardRef<HTMLInputElement, ICheckboxProps>(
-  ({ indeterminate, children, ...props }, ref) => {
+  ({ indeterminate, children, isCompact, ...other }, ref) => {
     const fieldsetContext = useFieldsetContext();
     const fieldContext = useFieldContext();
 
@@ -38,9 +38,9 @@ export const Checkbox = React.forwardRef<HTMLInputElement, ICheckboxProps>(
     };
 
     let combinedProps = {
+      $isCompact: fieldsetContext ? fieldsetContext.isCompact : isCompact,
       ref: combinedRef,
-      ...props,
-      ...fieldsetContext
+      ...other
     } as any;
 
     if (fieldContext) {

diff --git a/packages/forms/src/elements/FileUpload.tsx b/packages/forms/src/elements/FileUpload.tsx
@@ -18,11 +18,18 @@ import { StyledFileUpload } from '../styled';
  * @extends HTMLAttributes<HTMLDivElement>
  */
 export const FileUpload = React.forwardRef<HTMLDivElement, IFileUploadProps>(
-  ({ disabled, ...props }, ref) => {
+  ({ disabled, isCompact, isDragging, ...other }, ref) => {
     return (
       /* [1] */
       // eslint-disable-next-line jsx-a11y/prefer-tag-over-role
-      <StyledFileUpload ref={ref} aria-disabled={disabled} {...props} role="button" />
+      <StyledFileUpload
+        ref={ref}
+        aria-disabled={disabled}
+        $isCompact={isCompact}
+        $isDragging={isDragging}
+        {...other}
+        role="button"
+      />
     );
   }
 );

diff --git a/packages/forms/src/elements/Input.tsx b/packages/forms/src/elements/Input.tsx
@@ -17,35 +17,32 @@ import { StyledTextInput } from '../styled';
  * @extends InputHTMLAttributes<HTMLInputElement>
  */
 export const Input = React.forwardRef<HTMLInputElement, IInputProps>(
-  ({ onSelect, ...props }, ref) => {
+  ({ onSelect, isBare, isCompact, focusInset, validation, ...other }, ref) => {
     const fieldContext = useFieldContext();
     const inputGroupContext = useInputGroupContext();
+    let combinedProps = other;
 
-    const onSelectHandler = props.readOnly
+    if (fieldContext) {
+      combinedProps = fieldContext.getInputProps<HTMLInputElement>(combinedProps);
+    }
+
+    const onSelectHandler = other.readOnly
       ? composeEventHandlers(onSelect, (event: React.SyntheticEvent<HTMLInputElement>) => {
           event.currentTarget.select();
         })
       : onSelect;
 
-    let combinedProps = {
-      ref,
-      onSelect: onSelectHandler,
-      ...props
-    } as any;
-
-    if (inputGroupContext) {
-      combinedProps = {
-        ...combinedProps,
-        isCompact: inputGroupContext.isCompact || combinedProps.isCompact,
-        focusInset: props.focusInset === undefined ? true : props.focusInset
-      };
-    }
-
-    if (fieldContext) {
-      combinedProps = fieldContext.getInputProps(combinedProps);
-    }
-
-    return <StyledTextInput {...combinedProps} />;
+    return (
+      <StyledTextInput
+        ref={ref}
+        onSelect={onSelectHandler}
+        {...combinedProps}
+        $isBare={isBare}
+        $isCompact={inputGroupContext ? inputGroupContext.isCompact : isCompact}
+        $focusInset={inputGroupContext && focusInset === undefined ? true : focusInset}
+        $validation={validation}
+      />
+    );
   }
 );
 

diff --git a/packages/forms/src/elements/MediaInput.tsx b/packages/forms/src/elements/MediaInput.tsx
@@ -100,7 +100,7 @@ export const MediaInput = React.forwardRef<HTMLInputElement, IMediaInputProps>(
         focusInset={focusInset}
         readOnly={readOnly}
         validation={validation}
-        mediaLayout
+        $mediaLayout // pass-through prop to StyledTextFauxInput for media layout
         {...otherWrapperProps}
         ref={wrapperRef}
       >

diff --git a/packages/forms/src/elements/Radio.tsx b/packages/forms/src/elements/Radio.tsx
@@ -17,14 +17,14 @@ import useFieldsetContext from '../utils/useFieldsetContext';
  * @extends InputHTMLAttributes<HTMLInputElement>
  */
 export const Radio = React.forwardRef<HTMLInputElement, IRadioProps>(
-  ({ children, ...props }, ref) => {
+  ({ children, isCompact, ...other }, ref) => {
     const fieldsetContext = useFieldsetContext();
     const fieldContext = useFieldContext();
 
     let combinedProps = {
+      $isCompact: fieldsetContext ? fieldsetContext.isCompact : isCompact,
       ref,
-      ...props,
-      ...fieldsetContext
+      ...other
     } as any;
 
     if (fieldContext) {

diff --git a/packages/forms/src/elements/Range.tsx b/packages/forms/src/elements/Range.tsx
@@ -16,7 +16,7 @@ import { StyledRangeInput } from '../styled';
  * @extends InputHTMLAttributes<HTMLInputElement>
  */
 export const Range = React.forwardRef<HTMLInputElement, IRangeProps>(
-  ({ hasLowerTrack, min, max, step, ...props }, ref) => {
+  ({ hasLowerTrack, min, max, step, ...other }, ref) => {
     const [backgroundSize, setBackgroundSize] = useState('0');
     const rangeRef = useRef<HTMLInputElement>();
     const fieldContext = useFieldContext();
@@ -42,22 +42,22 @@ export const Range = React.forwardRef<HTMLInputElement, IRangeProps>(
 
     useEffect(() => {
       updateBackgroundWidthFromInput(rangeRef.current!);
-    }, [rangeRef, updateBackgroundWidthFromInput, props.value]);
+    }, [rangeRef, updateBackgroundWidthFromInput, other.value]);
 
     const onChange = hasLowerTrack
-      ? composeEventHandlers(props.onChange, (event: ChangeEvent<HTMLInputElement>) => {
+      ? composeEventHandlers(other.onChange, (event: ChangeEvent<HTMLInputElement>) => {
           updateBackgroundWidthFromInput(event.target);
         })
-      : props.onChange;
+      : other.onChange;
 
     let combinedProps = {
-      ref: mergeRefs([rangeRef, ref]),
-      hasLowerTrack,
-      min,
+      $backgroundSize: backgroundSize,
+      $hasLowerTrack: hasLowerTrack,
       max,
+      min,
+      ref: mergeRefs([rangeRef, ref]),
       step,
-      backgroundSize,
-      ...props,
+      ...other,
       onChange
     } as any;
 

diff --git a/packages/forms/src/elements/Select.tsx b/packages/forms/src/elements/Select.tsx
@@ -21,11 +21,11 @@ export const Select = React.forwardRef<HTMLSelectElement, ISelectProps>(
     const fieldContext = useFieldContext();
 
     let combinedProps = {
+      $focusInset: focusInset,
+      $isBare: isBare,
+      $isCompact: isCompact,
+      $validation: validation,
       disabled,
-      isBare,
-      isCompact,
-      validation,
-      focusInset,
       ref,
       ...props
     } as any;
@@ -36,11 +36,11 @@ export const Select = React.forwardRef<HTMLSelectElement, ISelectProps>(
 
     return (
       <StyledSelectWrapper
-        isCompact={isCompact}
-        isBare={isBare}
-        isDisabled={disabled}
-        validation={validation}
-        focusInset={focusInset}
+        $isCompact={isCompact}
+        $isBare={isBare}
+        $isDisabled={disabled}
+        $validation={validation}
+        $focusInset={focusInset}
       >
         <StyledSelect {...combinedProps} />
         {!isBare && (

diff --git a/packages/forms/src/elements/Textarea.tsx b/packages/forms/src/elements/Textarea.tsx
@@ -21,7 +21,22 @@ const parseStyleValue = (value: string) => {
  * @extends TextareaHTMLAttributes<HTMLTextAreaElement>
  */
 export const Textarea = React.forwardRef<HTMLTextAreaElement, ITextareaProps>(
-  ({ minRows, maxRows, style, onChange, onSelect, ...props }, ref) => {
+  (
+    {
+      isCompact,
+      isBare,
+      focusInset,
+      isResizable,
+      minRows,
+      maxRows,
+      style,
+      validation,
+      onChange,
+      onSelect,
+      ...other
+    },
+    ref
+  ) => {
     const fieldContext = useFieldContext();
     const textAreaRef = useRef<HTMLTextAreaElement>();
     const shadowTextAreaRef = useRef<HTMLInputElement | null>(null);
@@ -30,8 +45,8 @@ export const Textarea = React.forwardRef<HTMLTextAreaElement, ITextareaProps>(
       height: 0
     });
 
-    const isControlled = props.value !== null && props.value !== undefined;
-    const isAutoResizable = (minRows !== undefined || maxRows !== undefined) && !props.isResizable;
+    const isControlled = other.value !== null && other.value !== undefined;
+    const isAutoResizable = (minRows !== undefined || maxRows !== undefined) && !isResizable;
 
     const calculateHeight = useCallback(() => {
       if (!isAutoResizable) {
@@ -111,22 +126,27 @@ export const Textarea = React.forwardRef<HTMLTextAreaElement, ITextareaProps>(
       computedStyle.overflow = state.overflow ? 'hidden' : undefined;
     }
 
-    const onSelectHandler = props.readOnly
+    const onSelectHandler = other.readOnly
       ? composeEventHandlers(onSelect, (event: React.SyntheticEvent<HTMLInputElement>) => {
           event.currentTarget.select();
         })
       : onSelect;
 
     let combinedProps = {
-      ref: mergeRefs([textAreaRef, ref]),
-      rows: minRows,
+      $focusInset: focusInset,
+      $isBare: isBare,
+      $isCompact: isCompact,
+      $isResizable: isResizable,
+      $validation: validation,
       onChange: onChangeHandler,
       onSelect: onSelectHandler,
+      ref: mergeRefs([textAreaRef, ref]),
+      rows: minRows,
       style: {
         ...computedStyle,
         ...style
       },
-      ...props
+      ...other
     } as any;
 
     if (fieldContext) {
@@ -138,15 +158,15 @@ export const Textarea = React.forwardRef<HTMLTextAreaElement, ITextareaProps>(
         <StyledTextarea {...combinedProps} />
         {!!isAutoResizable && (
           <StyledTextarea
+            $isBare={isBare}
+            $isCompact={isCompact}
+            $isHidden
             aria-hidden
+            className={other.className}
             readOnly
-            isHidden
-            className={props.className}
             ref={shadowTextAreaRef}
-            tabIndex={-1}
-            isBare={props.isBare}
-            isCompact={props.isCompact}
             style={style}
+            tabIndex={-1}
           />
         )}
       </>

diff --git a/packages/forms/src/elements/Toggle.tsx b/packages/forms/src/elements/Toggle.tsx
@@ -17,14 +17,14 @@ import useFieldsetContext from '../utils/useFieldsetContext';
  * @extends InputHTMLAttributes<HTMLInputElement>
  */
 export const Toggle = React.forwardRef<HTMLInputElement, IToggleProps>(
-  ({ children, ...props }, ref) => {
+  ({ children, isCompact, ...other }, ref) => {
     const fieldsetContext = useFieldsetContext();
     const fieldContext = useFieldContext();
 
     let combinedProps = {
+      $isCompact: fieldsetContext ? fieldsetContext.isCompact : isCompact,
       ref,
-      ...props,
-      ...fieldsetContext
+      ...other
     } as any;
 
     if (fieldContext) {

diff --git a/packages/forms/src/elements/common/Fieldset.tsx b/packages/forms/src/elements/common/Fieldset.tsx
@@ -12,20 +12,17 @@ import { IFieldsetProps } from '../../types';
 import { StyledFieldset } from '../../styled';
 import { FieldsetContext } from '../../utils/useFieldsetContext';
 
-const FieldsetComponent = forwardRef<HTMLFieldSetElement, IFieldsetProps>((props, ref) => {
-  const fieldsetContext = useMemo(
-    () => ({
-      isCompact: props.isCompact
-    }),
-    [props.isCompact]
-  );
+const FieldsetComponent = forwardRef<HTMLFieldSetElement, IFieldsetProps>(
+  ({ isCompact, ...other }, ref) => {
+    const fieldsetContext = useMemo(() => ({ isCompact }), [isCompact]);
 
-  return (
-    <FieldsetContext.Provider value={fieldsetContext}>
-      <StyledFieldset {...props} ref={ref} />
-    </FieldsetContext.Provider>
-  );
-});
+    return (
+      <FieldsetContext.Provider value={fieldsetContext}>
+        <StyledFieldset {...other} ref={ref} $isCompact={isCompact} />
+      </FieldsetContext.Provider>
+    );
+  }
+);
 
 FieldsetComponent.displayName = 'Fieldset';