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,8 +1,14 @@
-import { FC, forwardRef, Ref, InputHTMLAttributes } from 'react';
-import AutosizeInput from 'react-18-input-autosize';
+import {
+  FC,
+  forwardRef,
+  RefObject,
+  InputHTMLAttributes,
+  useState
+} from 'react';
 import { twMerge } from 'tailwind-merge';
 import { InputTheme } from '../InputTheme';
 import { useComponentTheme } from '../../../utils';
+import { InputRef } from '../Input';
 
 export interface InlineInputProps
   extends InputHTMLAttributes<HTMLInputElement> {
@@ -21,6 +27,11 @@ export interface InlineInputProps
    */
   inputClassName?: string;
 
+  /**
+   * Placeholder content
+   */
+  placeholder?: string;
+
   /**
    * Don't collapse size to less than the placeholder
    */
@@ -40,22 +51,54 @@ export interface InlineInputProps
 export const InlineInput: FC<InlineInputProps> = forwardRef(
   (
     {
+      className,
       inputClassName,
-      placeholderIsMinWidth = true,
+      placeholder,
+      placeholderIsMinWidth,
       theme: customTheme,
+      extraWidth,
+      onChange,
       ...rest
     },
-    ref: Ref<HTMLInputElement>
+    ref: RefObject<InputRef>
   ) => {
     const theme: InputTheme = useComponentTheme('input', customTheme);
+    const spanStyles = 'relative opacity-0 whitespace-pre select-none';
+    const [inputValue, setInputValue] = useState('');
+    const [placeholderValue, setPlaceholderValue] = useState(placeholder);
+
+    const onInputValueChange = event => {
+      setInputValue(event.target.value);
+      onChange(event);
+    };
+
+    const setRef = (node: HTMLInputElement) => {
+      ref?.current?.inputRef;
+
+      const placeholder = node?.placeholder;
+      const value = node?.value;
+
+      placeholder && setPlaceholderValue(placeholder);
+      value && setInputValue(value);
+    };
 
     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 === true && !inputValue && (
+          <span className={spanStyles}>{placeholder}</span>
+        )}
+        <input
+          value={inputValue}
+          placeholder={placeholderValue}
+          className={twMerge(theme.inline.input, inputClassName)}
+          ref={setRef}
+          onChange={onInputValueChange}
+          {...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',

src/form/Select/SelectInput/SelectInput.tsx

@@ -4,6 +4,7 @@ import React, {
   Ref,
   RefObject,
   useCallback,
+  useEffect,
   useImperativeHandle,
   useMemo,
   useRef
@@ -499,7 +500,7 @@ export const SelectInput: FC<Partial<SelectInputProps>> = ({
       >
         {renderPrefix()}
         <InlineInput
-          inputRef={el => (inputRef.current = el)}
+          ref={el => (inputRef.current = el)}
           id={id}
           style={{ fontSize }}
           name={name}