Profile editing: Field inline messages (#38442)

app/javascript/mastodon/components/form_fields/emoji_text_field.tsx

@@ -2,11 +2,9 @@ import type {
   ChangeEvent,
   ChangeEventHandler,
   ComponentPropsWithoutRef,
-  Dispatch,
   FC,
   ReactNode,
   RefObject,
-  SetStateAction,
 } from 'react';
 import { useCallback, useId, useRef } from 'react';
 
@@ -25,7 +23,7 @@ import { TextInput } from './text_input_field';
 
 export type EmojiInputProps = {
   value?: string;
-  onChange?: Dispatch<SetStateAction<string>>;
+  onChange?: (newValue: string) => void;
   counterMax?: number;
   recommended?: boolean;
 } & Omit<CommonFieldWrapperProps, 'wrapperClassName'>;
@@ -138,12 +136,15 @@ const EmojiFieldWrapper: FC<
 
   const handlePickEmoji = useCallback(
     (emoji: string) => {
-      onChange?.((prev) => {
-        const position = inputRef.current?.selectionStart ?? prev.length;
-        return insertEmojiAtPosition(prev, emoji, position);
-      });
+      if (!value) {
+        onChange?.('');
+        return;
+      }
+      const position = inputRef.current?.selectionStart ?? value.length;
+      const newValue = insertEmojiAtPosition(value, emoji, position);
+      onChange?.(newValue);
     },
-    [onChange, inputRef],
+    [inputRef, value, onChange],
   );
 
   const handleChange = useCallback(

app/javascript/mastodon/components/form_fields/fieldset.tsx

@@ -4,10 +4,10 @@ import type { ReactNode, FC } from 'react';
 import { createContext, useId } from 'react';
 
 import { A11yLiveRegion } from 'mastodon/components/a11y_live_region';
-import type { FieldStatus } from 'mastodon/components/callout_inline';
 import { CalloutInline } from 'mastodon/components/callout_inline';
 
 import classes from './fieldset.module.scss';
+import type { FieldStatus } from './form_field_wrapper';
 import { getFieldStatus } from './form_field_wrapper';
 import formFieldWrapperClasses from './form_field_wrapper.module.scss';
 

app/javascript/mastodon/components/form_fields/form_field_wrapper.tsx

@@ -8,7 +8,6 @@ import { FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
 
 import { A11yLiveRegion } from 'mastodon/components/a11y_live_region';
-import type { FieldStatus } from 'mastodon/components/callout_inline';
 import { CalloutInline } from 'mastodon/components/callout_inline';
 
 import { FieldsetNameContext } from './fieldset';
@@ -20,11 +19,16 @@ export interface InputProps {
   'aria-describedby'?: string;
 }
 
+export interface FieldStatus {
+  variant: 'error' | 'warning' | 'info' | 'success';
+  message?: string;
+}
+
 interface FieldWrapperProps {
   label: ReactNode;
   hint?: ReactNode;
   required?: boolean;
-  status?: FieldStatus['variant'] | FieldStatus;
+  status?: FieldStatus['variant'] | FieldStatus | null;
   inputId?: string;
   describedById?: string;
   inputPlacement?: 'inline-start' | 'inline-end';

app/javascript/mastodon/components/form_fields/index.ts

@@ -1,3 +1,4 @@
+export type { FieldStatus } from './form_field_wrapper';
 export { FormFieldWrapper } from './form_field_wrapper';
 export { FormStack } from './form_stack';
 export { Fieldset } from './fieldset';