chore: add forwardref to input component (#1417)

TimeChimp · Mar 11, 2024 · d8b1a10 · d8b1a10
1 parent b2d817b
commit d8b1a10
Show file tree

Hide file tree

Showing 5 changed files with 157 additions and 155 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "13.7.1",
+  "version": "13.7.2",
   "license": "MIT",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

diff --git a/src/components/form-row/FormRow.tsx b/src/components/form-row/FormRow.tsx
@@ -44,7 +44,7 @@ export const FormRow = <T extends FieldValues, K extends string>({
     <Block width={'100%'}>
       {label && (
         <Block marginBottom={scale100}>
-          <LabelSmall display="flex" as="label" alignItems="center" gridGap={scale200} for={name as string}>
+          <LabelSmall display="flex" as="label" alignItems="center" gridGap={scale200} htmlFor={name as string}>
             {getLabel()}
             {toolTip && (
               <StatefulTooltip

diff --git a/src/components/input/Input.tsx b/src/components/input/Input.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import { Input as BaseInput, InputOverrides } from 'baseui/input';
 import { useTheme } from '../../providers';
 import {
@@ -15,110 +15,92 @@ import { DATA_TEST_ID } from '../../models';
 import { Align, InputProps } from './types';
 import { Skeleton } from '../skeleton';
 
-export const Input = ({
-  value,
-  testId,
-  type,
-  uppercase,
-  noBorder = false,
-  success = false,
-  disabled,
-  width = '100%',
-  startEnhancer = null,
-  endEnhancer = null,
-  overrides,
-  showSkeleton = false,
-  autoComplete = 'off',
-  name,
-  align = Align.left,
-  ...rest
-}: InputProps) => {
-  const {
-    theme: {
-      current: {
-        sizing: { scale500, scale550, scale600 },
-        customSizing: { scale975 },
-        borders,
-        colors,
-        customColors,
+export const Input = forwardRef(
+  ({
+    value,
+    testId,
+    type,
+    uppercase,
+    noBorder = false,
+    success = false,
+    disabled,
+    width = '100%',
+    startEnhancer = null,
+    endEnhancer = null,
+    overrides,
+    showSkeleton = false,
+    autoComplete = 'off',
+    name,
+    align = Align.left,
+    ...rest
+  }: InputProps) => {
+    const {
+      theme: {
+        current: {
+          sizing: { scale500, scale550, scale600 },
+          customSizing: { scale975 },
+          borders,
+          colors,
+          customColors,
+        },
       },
-    },
-  } = useTheme();
-  const { border300 } = borders;
-  const { primaryB } = colors;
+    } = useTheme();
+    const { border300 } = borders;
+    const { primaryB } = colors;
 
-  // Password input requires the default padding
-  const rootPadding = () => {
-    if (type !== 'password') {
-      return { ...padding() };
-    }
-  };
-  const {
-    Root: RootOverrides,
-    StartEnhancer: StartEnhancerOverrides,
-    EndEnhancer: EndEnhancerOverrides,
-    MaskToggleButton: MaskToggleButtonOverrides,
-    Input: InputOverrides,
-    InputContainer: InputContainerOverrides,
-    ...styleOverrides
-  } = overrides ?? {};
+    // Password input requires the default padding
+    const rootPadding = () => {
+      if (type !== 'password') {
+        return { ...padding() };
+      }
+    };
+    const {
+      Root: RootOverrides,
+      StartEnhancer: StartEnhancerOverrides,
+      EndEnhancer: EndEnhancerOverrides,
+      MaskToggleButton: MaskToggleButtonOverrides,
+      Input: InputOverrides,
+      InputContainer: InputContainerOverrides,
+      ...styleOverrides
+    } = overrides ?? {};
 
-  const baseOverrides: InputOverrides = {
-    Input: {
-      style: (opts) => {
-        const { $disabled, $isFocused, $theme } = opts;
-        const backgroundColor = getInputBackgroundColor({ disabled: $disabled, customColors, colors });
-        const color = getInputTextColor({ isFocused: $isFocused, hasValue: !!value, customColors, colors });
-        return {
-          backgroundColor,
-          ...border(),
-          ...padding('0', endEnhancer ? scale500 : scale600, '0', startEnhancer ? scale500 : scale600),
-          textTransform: uppercase ? 'uppercase' : 'inherit',
-          textAlign: align,
-          color,
-          '::placeholder': {
-            color: customColors.dark4,
-          },
-          fontSize: $theme.typography.LabelSmall.fontSize,
-          ...getStyleOverrides(opts, InputOverrides?.style),
-        };
-      },
-      props: {
-        [DATA_TEST_ID]: testId,
+    const baseOverrides: InputOverrides = {
+      Input: {
+        style: (opts) => {
+          const { $disabled, $isFocused, $theme } = opts;
+          const backgroundColor = getInputBackgroundColor({ disabled: $disabled, customColors, colors });
+          const color = getInputTextColor({ isFocused: $isFocused, hasValue: !!value, customColors, colors });
+          return {
+            backgroundColor,
+            ...border(),
+            ...padding('0', endEnhancer ? scale500 : scale600, '0', startEnhancer ? scale500 : scale600),
+            textTransform: uppercase ? 'uppercase' : 'inherit',
+            textAlign: align,
+            color,
+            '::placeholder': {
+              color: customColors.dark4,
+            },
+            fontSize: $theme.typography.LabelSmall.fontSize,
+            ...getStyleOverrides(opts, InputOverrides?.style),
+          };
+        },
+        props: {
+          [DATA_TEST_ID]: testId,
+        },
       },
-    },
-    InputContainer: {
-      style: (opts) => ({
-        ...border(),
-        backgroundColor: primaryB,
-        ...getStyleOverrides(opts, InputContainerOverrides?.style),
-      }),
-    },
-    Root: {
-      style: (opts) => {
-        const { $error, $isFocused } = opts;
-        return {
-          height: scale975,
-          width,
-          ...border(
-            !noBorder
-              ? {
-                  ...border300,
-                  borderColor: getInputBorderColor({
-                    error: $error,
-                    success,
-                    isFocused: $isFocused,
-                    customColors,
-                    colors,
-                  }),
-                }
-              : undefined,
-          ),
-          ...borderRadius(borders.radius200),
+      InputContainer: {
+        style: (opts) => ({
+          ...border(),
           backgroundColor: primaryB,
-          ...margin('0'),
-          ...rootPadding(),
-          ':hover': {
+          ...getStyleOverrides(opts, InputContainerOverrides?.style),
+        }),
+      },
+      Root: {
+        style: (opts) => {
+          const { $error, $isFocused } = opts;
+          return {
+            height: scale975,
+            width,
             ...border(
               !noBorder
                 ? {
@@ -129,62 +111,82 @@ export const Input = ({
                       isFocused: $isFocused,
                       customColors,
                       colors,
-                      hover: true,
-                      disabled,
                     }),
                   }
                 : undefined,
             ),
-          },
-          ...getStyleOverrides(opts, RootOverrides?.style),
-        };
+            ...borderRadius(borders.radius200),
+            backgroundColor: primaryB,
+            ...margin('0'),
+            ...rootPadding(),
+            ':hover': {
+              ...border(
+                !noBorder
+                  ? {
+                      ...border300,
+                      borderColor: getInputBorderColor({
+                        error: $error,
+                        success,
+                        isFocused: $isFocused,
+                        customColors,
+                        colors,
+                        hover: true,
+                        disabled,
+                      }),
+                    }
+                  : undefined,
+              ),
+            },
+            ...getStyleOverrides(opts, RootOverrides?.style),
+          };
+        },
       },
-    },
-    StartEnhancer: {
-      style: (opts) => {
-        const { $disabled } = opts;
-        return {
-          backgroundColor: getInputBackgroundColor({ disabled: $disabled, customColors, colors }),
-          ...padding('0', '0', '0', scale600),
-          ...getStyleOverrides(opts, StartEnhancerOverrides?.style),
-        };
+      StartEnhancer: {
+        style: (opts) => {
+          const { $disabled } = opts;
+          return {
+            backgroundColor: getInputBackgroundColor({ disabled: $disabled, customColors, colors }),
+            ...padding('0', '0', '0', scale600),
+            ...getStyleOverrides(opts, StartEnhancerOverrides?.style),
+          };
+        },
       },
-    },
-    EndEnhancer: {
-      style: (opts) => {
-        const { $disabled } = opts;
-        return {
-          backgroundColor: getInputBackgroundColor({ disabled: $disabled, customColors, colors }),
-          ...padding('0', scale600, '0', '0'),
-          ...getStyleOverrides(opts, EndEnhancerOverrides?.style),
-        };
+      EndEnhancer: {
+        style: (opts) => {
+          const { $disabled } = opts;
+          return {
+            backgroundColor: getInputBackgroundColor({ disabled: $disabled, customColors, colors }),
+            ...padding('0', scale600, '0', '0'),
+            ...getStyleOverrides(opts, EndEnhancerOverrides?.style),
+          };
+        },
       },
-    },
-    MaskToggleButton: {
-      style: (opts) => {
-        return {
-          ...padding('0', '0', '0', scale550),
-          outline: 'none',
-          ...getStyleOverrides(opts, MaskToggleButtonOverrides?.style),
-        };
+      MaskToggleButton: {
+        style: (opts) => {
+          return {
+            ...padding('0', '0', '0', scale550),
+            outline: 'none',
+            ...getStyleOverrides(opts, MaskToggleButtonOverrides?.style),
+          };
+        },
       },
-    },
-    ...styleOverrides,
-  };
+      ...styleOverrides,
+    };
 
-  return showSkeleton ? (
-    <Skeleton animation height={scale975} width={width} />
-  ) : (
-    <BaseInput
-      value={value}
-      disabled={disabled}
-      startEnhancer={startEnhancer}
-      endEnhancer={endEnhancer}
-      overrides={baseOverrides}
-      type={type}
-      autoComplete={autoComplete}
-      id={name}
-      {...rest}
-    />
-  );
-};
+    return showSkeleton ? (
+      <Skeleton animation height={scale975} width={width} />
+    ) : (
+      <BaseInput
+        value={value}
+        disabled={disabled}
+        startEnhancer={startEnhancer}
+        endEnhancer={endEnhancer}
+        overrides={baseOverrides}
+        type={type}
+        autoComplete={autoComplete}
+        id={name}
+        {...rest}
+      />
+    );
+  },
+);
diff --git a/src/components/typography/label-small/LabelSmall.tsx b/src/components/typography/label-small/LabelSmall.tsx
@@ -2,7 +2,7 @@ import React, { forwardRef } from 'react';
 import { LabelSmall as BaseLabelSmall } from 'baseui/typography';
 import { BlockProps } from 'baseui/block';
 
-export const LabelSmall = forwardRef<HTMLButtonElement, BlockProps & { for?: string }>(
+export const LabelSmall = forwardRef<HTMLButtonElement, BlockProps & { htmlFor?: string }>(
   ({ children, marginTop = '0', marginBottom = '0', ...rest }: BlockProps, ref) => (
     <BaseLabelSmall ref={ref} marginTop={marginTop} marginBottom={marginBottom} {...rest}>
       {children}