replace text input by texterarea (#3473)

* #3472 replace text input by texterarea

* background color change in dark mode

* box shadow and hide overflow

* added tooltip in overflow text

* resolved comment on #3473

* resolved comments in #3473

packages/twenty-front/src/modules/object-record/field/meta-types/input/components/TextFieldInput.tsx

@@ -1,7 +1,7 @@
 import { useSaveFieldEditModeValue } from '@/object-record/field/hooks/useSaveFieldEditModeValue';
-import { TextInput } from '@/ui/field/input/components/TextInput';
+import { FieldTextAreaOverlay } from '@/ui/field/input/components/FieldTextAreaOverlay';
+import { TextAreaInput } from '@/ui/field/input/components/TextAreaInput';
 
-import { FieldInputOverlay } from '../../../../../ui/field/input/components/FieldInputOverlay';
 import { usePersistField } from '../../../hooks/usePersistField';
 import { useTextField } from '../../hooks/useTextField';
 
@@ -55,8 +55,8 @@ export const TextFieldInput = ({
   };
 
   return (
-    <FieldInputOverlay>
+    <FieldTextAreaOverlay>
-      <TextInput
+      <TextAreaInput
         placeholder={fieldDefinition.metadata.placeHolder}
         autoFocus
         value={initialValue}
@@ -68,6 +68,6 @@ export const TextFieldInput = ({
         hotkeyScope={hotkeyScope}
         onChange={handleChange}
       />
-    </FieldInputOverlay>
+    </FieldTextAreaOverlay>
   );
 };

packages/twenty-front/src/modules/ui/field/display/components/TextDisplay.tsx

@@ -1,3 +1,5 @@
+import { OverflowingTextWithTooltip } from '../../../display/tooltip/OverflowingTextWithTooltip';
+
 import { EllipsisDisplay } from './EllipsisDisplay';
 
 type TextDisplayProps = {
@@ -6,5 +8,7 @@ type TextDisplayProps = {
 };
 
 export const TextDisplay = ({ text, maxWidth }: TextDisplayProps) => (
-  <EllipsisDisplay maxWidth={maxWidth}>{text}</EllipsisDisplay>
+  <EllipsisDisplay maxWidth={maxWidth}>
+    <OverflowingTextWithTooltip text={text} />
+  </EllipsisDisplay>
 );

packages/twenty-front/src/modules/ui/field/input/components/FieldTextAreaOverlay.tsx

@@ -0,0 +1,13 @@
+import styled from '@emotion/styled';
+
+const StyledFieldTextAreaOverlay = styled.div`
+  border-radius: ${({ theme }) => theme.border.radius.sm};
+  background: ${({ theme }) => theme.background.transparent.secondary};
+  backdrop-filter: blur(8px);
+  display: flex;
+  height: 32px;
+  margin: -1px;
+  width: 100%;
+`;
+
+export const FieldTextAreaOverlay = StyledFieldTextAreaOverlay;

packages/twenty-front/src/modules/ui/field/input/components/PhoneInput.tsx

@@ -13,6 +13,7 @@ const StyledContainer = styled.div`
 
   border: none;
   border-radius: ${({ theme }) => theme.border.radius.sm};
+  box-shadow: ${({ theme }) => theme.boxShadow.strong};
 
   display: flex;
   justify-content: center;

packages/twenty-front/src/modules/ui/field/input/components/TextAreaInput.tsx

@@ -0,0 +1,79 @@
+import { ChangeEvent, useRef, useState } from 'react';
+import TextareaAutosize from 'react-textarea-autosize';
+import styled from '@emotion/styled';
+
+import { useRegisterInputEvents } from '@/object-record/field/meta-types/input/hooks/useRegisterInputEvents';
+import { textInputStyle } from '@/ui/theme/constants/effects';
+
+export type TextAreaInputProps = {
+  disabled?: boolean;
+  className?: string;
+  placeholder?: string;
+  autoFocus?: boolean;
+  value: string;
+  onEnter: (newText: string) => void;
+  onEscape: (newText: string) => void;
+  onTab?: (newText: string) => void;
+  onShiftTab?: (newText: string) => void;
+  onClickOutside: (event: MouseEvent | TouchEvent, inputValue: string) => void;
+  hotkeyScope: string;
+  onChange?: (newText: string) => void;
+};
+
+const StyledTextArea = styled(TextareaAutosize)`
+  ${textInputStyle}
+  width: 100%;
+  resize: none;
+  box-shadow: ${({ theme }) => theme.boxShadow.strong};
+  border: ${({ theme }) => `1px solid ${theme.border.color.light}`};
+  padding: ${({ theme }) => theme.spacing(2)};
+  background-color: ${({ theme }) => theme.background.primary};
+  border-radius: ${({ theme }) => theme.border.radius.sm};
+`;
+
+export const TextAreaInput = ({
+  disabled,
+  className,
+  placeholder,
+  autoFocus,
+  value,
+  hotkeyScope,
+  onEnter,
+  onEscape,
+  onTab,
+  onShiftTab,
+  onClickOutside,
+  onChange,
+}: TextAreaInputProps) => {
+  const [internalText, setInternalText] = useState(value);
+
+  const handleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
+    setInternalText(event.target.value);
+    onChange?.(event.target.value);
+  };
+
+  const wrapperRef = useRef<HTMLTextAreaElement>(null);
+
+  useRegisterInputEvents({
+    inputRef: wrapperRef,
+    inputValue: internalText,
+    onEnter,
+    onEscape,
+    onClickOutside,
+    onTab,
+    onShiftTab,
+    hotkeyScope,
+  });
+
+  return (
+    <StyledTextArea
+      placeholder={placeholder}
+      disabled={disabled}
+      className={className}
+      ref={wrapperRef}
+      onChange={handleChange}
+      autoFocus={autoFocus}
+      value={internalText}
+    />
+  );
+};