API reference

export interface FieldExtensionProps {
  // name of the field in the form (may differ from the field apiId, ie. for localized fields)
  name: string;

  // current locale on localized field
  locale?: string;

  isTableCell: boolean;

  value: any;

  onBlur: <T extends HTMLElement = HTMLElement>(
    event?: FocusEvent<T>,
  ) => Promise<void>;

  onChange: <T extends HTMLElement = HTMLElement>(
    event: ChangeEvent<T> | any,
  ) => Promise<void>;

  onFocus: <T extends HTMLElement = HTMLElement>(
    event?: FocusEvent<T>,
  ) => Promise<void>;

  // @see https://final-form.org/docs/react-final-form/types/FieldRenderProps
  meta: {
    active: boolean;
    error: any;
    touched: boolean;
  };

  // open the asset picker (see the Asset type in your Content Api)
  openAssetPicker: () => Promise<null | (Asset & Record<string, unknown>)>;

  // access to the form state and other form fields
  form: {
    change: <Value = any>(name: string, value: Value) => Promise<void>;
    // @see https://graphcms.com/docs/ui-extensions/react-sdk/state-getters#get-state
    getState: <Values = Record<string, any>>() => Promise<FormState<Values>>;
    // @see https://graphcms.com/docs/ui-extensions/react-sdk/state-getters#get-field-state
    getFieldState: <Value = any>(
      fieldName: string,
    ) => Promise<FieldState<Value>>;
    // @see https://graphcms.com/docs/ui-extensions/react-sdk/state-subscriptions#subscribe-to-field-state
    subscribeToFieldState: <Value = any>(
      name: string,
      callback: (state: FieldState<Value>) => any,
      subscription: FieldSubscription,
    ) => Promise<() => any>;
    // @see https://graphcms.com/docs/ui-extensions/react-sdk/state-subscriptions#subscribe-to-form-state
    subscribeToFormState: <Values = Record<string, any>>(
      callback: Subscriber<FormState<Values>>,
      subscription: FormSubscription,
    ) => Promise<() => any>;
  };

  // details about the current field
  field: {
    id: string;
    apiId: string;
    description: string | null;
    displayName: string;
    isList: boolean;
    isLocalized?: boolean;
    isRequired?: boolean;
    isUnique?: boolean;
    // true when in version or stage comparison view
    isPreview: boolean;
    type: FieldExtensionType;
  };

  // details about the current model
  model: {
    apiId: string;
    apiIdPlural: string;
    id: string;
    description: string | null;
    displayName: string;
    isLocalized: boolean;
  };

  // status and configuration of the extension.
  extension: {
    config: Record<string, any>;
    status: 'connected' | 'connecting' | 'error' | 'disconnected';
  };

  // whether the field is currently in fullscreen mode
  isExpanded: boolean;
  // set fullscreen mode
  expand: (expand: boolean | ((isExpanded: boolean) => boolean)) => void;

  // information needed to be able to use the project api's
  context: {
    project: {
      id: string;
      name: string;
      // management api access
      mgmtApi: string;
      mgmtToken: string;
    };
    environment: {
      id: string;
      name: string;
      // content api access
      endpoint: string;
      authToken: string;
    };
  };

  openDialog: <DialogReturn = any, DialogProps = Record<string, any>>(
    src: string,
    props?: {
      disableOverlayClick?: boolean;
      maxWidth?: string;
      ariaLabel?: string;
    } & DialogProps,
  ) => Promise<DialogReturn | null>;
}