Updated InlineInput

package.json

@@ -73,7 +73,6 @@
     "name-initials": "^0.1.3",
     "pluralize": "^8.0.0",
     "popper.js": "^1.16.1",
-    "react-18-input-autosize": "^3.0.0",
     "react-fast-compare": "^3.2.2",
     "react-highlight-words": "^0.20.0",
     "react-syntax-highlighter": "^15.5.0",

src/form/Input/InlineInput/InlineInput.tsx

@@ -1,5 +1,4 @@
-import { FC, forwardRef, Ref, InputHTMLAttributes } from 'react';
-import AutosizeInput from 'react-18-input-autosize';
+import { FC, forwardRef, Ref, InputHTMLAttributes, useState } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { InputTheme } from '../InputTheme';
 import { useComponentTheme } from '../../../utils';
@@ -21,6 +20,11 @@ export interface InlineInputProps
    */
   inputClassName?: string;
 
+  /**
+   * Placeholder content
+   */
+  placeholder?: string;
+
   /**
    * Don't collapse size to less than the placeholder
    */
@@ -40,22 +44,41 @@ export interface InlineInputProps
 export const InlineInput: FC<InlineInputProps> = forwardRef(
   (
     {
+      className,
       inputClassName,
+      placeholder,
       placeholderIsMinWidth = true,
       theme: customTheme,
+      extraWidth,
+      onChange,
       ...rest
     },
     ref: Ref<HTMLInputElement>
   ) => {
     const theme: InputTheme = useComponentTheme('input', customTheme);
+    const [inputValue, setInputValue] = useState('');
+    const spanStyles = 'relative opacity-0 whitespace-pre select-none';
 
     return (
-      <AutosizeInput
-        inputRef={ref}
-        inputClassName={twMerge(theme.inline, inputClassName)}
-        placeholderIsMinWidth={placeholderIsMinWidth}
-        {...rest}
-      />
+      <div className={twMerge(className, theme.inline.base)}>
+        <span className={spanStyles} style={{ paddingRight: extraWidth ?? 0 }}>
+          {inputValue}
+        </span>
+        {placeholderIsMinWidth && !inputValue && (
+          <span className={spanStyles}>{placeholder}</span>
+        )}
+        <input
+          value={inputValue}
+          placeholder={placeholder}
+          className={twMerge(theme.inline.input, inputClassName)}
+          ref={ref}
+          onChange={e => {
+            setInputValue(e.target.value);
+            onChange(e);
+          }}
+          {...rest}
+        />
+      </div>
     );
   }
 );

src/form/Input/InputTheme.ts

@@ -1,7 +1,10 @@
 export interface InputTheme {
   base: string;
   input: string;
-  inline: string;
+  inline: {
+    base: string;
+    input: string;
+  };
   disabled: string;
   focused: string;
   fullWidth: string;
@@ -23,7 +26,11 @@ const baseTheme: InputTheme = {
   focused: '',
   input:
     'flex-1 font-normal font-sans bg-transparent border-0 p-0 m-0 disabled:pointer-events-none outline-none px-0.5 disabled:cursor-not-allowed disabled:text-disabled',
-  inline: 'bg-transparent border-0 outline-none',
+  inline: {
+    base: 'min-w-[76px] relative',
+    input:
+      'w-full h-full absolute top-0 left-0 bg-transparent border-0 outline-none'
+  },
   disabled: '',
   fullWidth: 'w-full',
   error: 'border-error',