ref: growing input is no more (#86553)

All bow to useAutosizeInput and `<Input autosize/>`

I have opted to use <Input autosize as opposed to requiring everyone to
call the hook, as this allows us to ensure that the hook is correctly
called (value is required depending on if the input is controlled or
not), meaning that we can reduce the possible bug surface.


https://github.com/user-attachments/assets/a321da42-e648-42c7-ad94-e885ba99bb12

The PR is missing tests, I had started to write some and realized mid
way that I will have to mock pretty much all of the window styles
methods, defeating the purpose of the tests (I will give that another
go)

The GrowingInput component was also hiding a bug that caused react to
not throw warnings in development when only the value prop was provided
as it was providing its own onchange handler and then calling
`props.onChange?.()` which was always falsy
 
**Below** is what I originally typed into the draft PR and explains the
reasoning for ^ decision more in depth.

The question now is, do we expose this via hook, or do we build it into
the Input via autosize prop like `<Input autosize/>`? I think I am
leaning towards autosize prop as I believe it is more intuitive than
consuming a hook (which could still be exposed).

If we require users to call the hook, then the API would look something
like
```tsx
function Component() {
  const ref = useAutosizeInput({value})
  return <Input ref={ref}/>
}
```

The awkward part is that exposing it like this could that the DOM
structure could depend on the autosize prop (provided would use the CSS
only approach that @natemoo-re shared, which requires a wrapper
component). An alternative could be to add autosize to InputGroup and
require the prop to be set there, but that feels weird, as the autosize
input should be set on the input itself, and making InputGroup a
requirement for autosize to work feels sub-optimal.

```tsx
function Component(){
  return (
   <InputGroup autosize> // <- this feels weird, but also means that standalone inputs dont support autosize?
     <InputGroup.Input/>
  </InputGroup>
}
```

Finally, and the version that I am most leaning towards is to expose
this as an autosize bool prop on Input, and use the current JS handler
to measure resizing. This way, we can also ensure that the hook is
correctly called with the value props if the component is controlled,
and hide that last bit of complexity from the user (provided we dont use
the pure CSS solution for now)

```tsx
function Component() {
  return <Input autosize/>
}
```

@natemoo-re @TkDodo @evanpurkhiser or anyone else reading this, feedback
and opinions would be much appreciated

Author: JonasBa

static/app/components/core/input/index.stories.tsx

@@ -1,7 +1,8 @@
-import {Fragment} from 'react';
+import {Fragment, useState} from 'react';
 import styled from '@emotion/styled';
 
 import {Input} from 'sentry/components/core/input';
+import {useAutosizeInput} from 'sentry/components/core/input/useAutosizeInput';
 import * as Storybook from 'sentry/stories';
 import {space} from 'sentry/styles/space';
 
@@ -17,21 +18,24 @@ export default Storybook.story('Input', (story, APIReference) => {
           The <Storybook.JSXNode name="Input" /> component comes in different sizes:
         </p>
         <Grid>
-          <label>
-            <code>md (default):</code> <Input size="md" />
-          </label>
-          <label>
-            <code>sm:</code> <Input size="sm" value="value" />
-          </label>
-          <label>
-            <code>xs:</code> <Input size="xs" placeholder="placeholder" />
-          </label>
+          <Label>
+            <code>md (default):</code> <Input size="md" defaultValue="" />
+          </Label>
+          <Label>
+            <code>sm:</code> <Input size="sm" defaultValue="value" />
+          </Label>
+          <Label>
+            <code>xs:</code> <Input size="xs" defaultValue="" placeholder="placeholder" />
+          </Label>
         </Grid>
       </Fragment>
     );
   });
 
   story('Locked', () => {
+    const [value, setValue] = useState('this is aria-disabled');
+    const [readonlyValue, setReadonlyValue] = useState('this is readonly');
+    const [disabledValue, setDisabledValue] = useState('this is disabled');
     return (
       <Fragment>
         <p>
@@ -41,24 +45,112 @@ export default Storybook.story('Input', (story, APIReference) => {
           interactive like a <code>readonly</code> field:
         </p>
         <Grid>
-          <label>
-            <code>disabled:</code> <Input disabled value="this is disabled" />
-          </label>
-          <label>
+          <Label>
+            <code>disabled:</code>{' '}
+            <Input
+              disabled
+              value={disabledValue}
+              onChange={e => setDisabledValue(e.target.value)}
+            />
+          </Label>
+          <Label>
             <code>aria-disabled:</code>{' '}
-            <Input aria-disabled value="this is aria-disabled" />
-          </label>
-          <label>
-            <code>readonly:</code> <Input readOnly value="this is readonly" />
-          </label>
+            <Input
+              aria-disabled
+              value={value}
+              onChange={e => {
+                setValue(e.target.value);
+              }}
+            />
+          </Label>
+          <Label>
+            <code>readonly:</code>{' '}
+            <Input
+              readOnly
+              value={readonlyValue}
+              onChange={e => setReadonlyValue(e.target.value)}
+            />
+          </Label>
+        </Grid>
+      </Fragment>
+    );
+  });
+
+  story('Autosize', () => {
+    const [value, setValue] = useState('this is autosized');
+    const [proxyValue, setProxyValue] = useState('this is autosized');
+
+    const controlledAutosizeRef = useAutosizeInput({
+      value,
+    });
+
+    const uncontrolledAutosizeRef = useAutosizeInput({
+      value: proxyValue,
+    });
+
+    const externalControlledAutosizeRef = useAutosizeInput({
+      value: proxyValue,
+    });
+
+    const placeholderAutosizeRef = useAutosizeInput();
+
+    return (
+      <Fragment>
+        <p>
+          The <Storybook.JSXNode name="Input" /> component can automatically resize its
+          width to fit its content when used with the <code>useAutosizeInput</code> hook.
+          This hook provides a ref that should be passed to the input component. The input
+          will expand horizontally while maintaining its height as the user types. See the
+          examples below for how to use the hook with controlled and uncontrolled inputs.
+        </p>
+
+        <p>
+          If a placeholder if provided without a value, the input will autosize according
+          to the placeholder size!
+        </p>
+        <Grid>
+          <Label>
+            <code>controlled input autosize:</code>{' '}
+            <Input
+              ref={controlledAutosizeRef}
+              value={value}
+              onChange={e => setValue(e.target.value)}
+            />
+          </Label>
+          <Label>
+            <code>uncontrolled input autosize:</code>{' '}
+            <Input ref={uncontrolledAutosizeRef} defaultValue="" />
+          </Label>
+
+          <Label>
+            <code>controlled via different input:</code>{' '}
+            <Input value={proxyValue} onChange={e => setProxyValue(e.target.value)} />
+            <Input ref={externalControlledAutosizeRef} readOnly value={proxyValue} />
+          </Label>
+
+          <Label>
+            <code>autosize according to placeholder:</code>{' '}
+            <Input
+              ref={placeholderAutosizeRef}
+              defaultValue=""
+              placeholder="placeholder"
+            />
+          </Label>
         </Grid>
       </Fragment>
     );
   });
 });
 
+const Label = styled('label')`
+  display: flex;
+  flex-direction: column;
+  gap: ${space(1)};
+`;
+
 const Grid = styled('div')`
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(2, 1fr);
   gap: ${space(2)};
 `;

static/app/components/core/input/useAutosizeInput.tsx

@@ -0,0 +1,94 @@
+import type React from 'react';
+import {useCallback, useLayoutEffect, useRef} from 'react';
+
+/**
+ * This hook is used to automatically resize an input element based on its content.
+ * It is useful for creating "growing" inputs that can resize to fit their content.
+ *
+ * @param options - Options for the autosize input functionality.
+ * @param options.disabled - Set to `true` to disable the autosizing.
+ * @param options.value - The value of the input, use when the input is controlled.
+ * @returns A ref callback for the input element.
+ */
+
+interface UseAutosizeInputOptions {
+  enabled?: boolean;
+  value?: React.InputHTMLAttributes<HTMLInputElement>['value'] | undefined;
+}
+
+export function useAutosizeInput(
+  options?: UseAutosizeInputOptions
+): React.RefCallback<HTMLInputElement> {
+  const enabled = options?.enabled ?? true;
+  const sourceRef = useRef<HTMLInputElement | null>(null);
+
+  // A controlled input value change does not trigger a change event,
+  // so we need to manually observe the value...
+  useLayoutEffect(() => {
+    if (!enabled) {
+      return;
+    }
+
+    if (sourceRef.current) {
+      resize(sourceRef.current);
+    }
+  }, [options?.value, enabled]);
+
+  const onInputChange = useCallback((_event: any) => {
+    if (sourceRef.current) {
+      resize(sourceRef.current);
+    }
+  }, []);
+
+  const autosizingCallbackRef: React.RefCallback<HTMLInputElement> = useCallback(
+    (element: HTMLInputElement | null) => {
+      if (!enabled || !element) {
+        sourceRef.current?.removeEventListener('input', onInputChange);
+      } else {
+        resize(element);
+        element.addEventListener('input', onInputChange);
+      }
+
+      sourceRef.current = element;
+    },
+    [onInputChange, enabled]
+  );
+
+  return autosizingCallbackRef;
+}
+
+function createSizingDiv(referenceStyles: CSSStyleDeclaration) {
+  const sizingDiv = document.createElement('div');
+  sizingDiv.style.whiteSpace = 'pre';
+  sizingDiv.style.width = 'auto';
+  sizingDiv.style.height = '0';
+  sizingDiv.style.position = 'fixed';
+  sizingDiv.style.pointerEvents = 'none';
+  sizingDiv.style.opacity = '0';
+  sizingDiv.style.zIndex = '-1';
+
+  sizingDiv.style.fontSize = referenceStyles.fontSize;
+  sizingDiv.style.fontWeight = referenceStyles.fontWeight;
+  sizingDiv.style.fontFamily = referenceStyles.fontFamily;
+
+  return sizingDiv;
+}
+
+function resize(input: HTMLInputElement) {
+  const computedStyles = getComputedStyle(input);
+
+  const sizingDiv = createSizingDiv(computedStyles);
+  sizingDiv.innerText = input.value || input.placeholder;
+  document.body.appendChild(sizingDiv);
+
+  const newTotalInputSize =
+    sizingDiv.offsetWidth +
+    // parseInt is save here as the computed styles are always in px
+    parseInt(computedStyles.paddingLeft ?? 0, 10) +
+    parseInt(computedStyles.paddingRight ?? 0, 10) +
+    parseInt(computedStyles.borderWidth ?? 0, 10) * 2 +
+    1; // Add 1px to account for cursor width in Safari
+
+  document.body.removeChild(sizingDiv);
+  input.style.width = `${newTotalInputSize}px`;
+}