Combobox

export type ComboboxStringTypeValue = string | Record<string, unknown>;
 
export type ComboboxStringItems = {
    options: {
        items: string[];
        placeholder?: string;
    };
    private?: () => Promise<string>;
    render?: (v: string) => JSX.Element;
    validation?: Validation<string>;
};
 
export type ComboboxRecordItems = {
    options: {
        items: Record<string, unknown>[];
        placeholder?: string;
        itemValue: string;
        itemLabel: string;
    };
    private?: () => Promise<Record<string, unknown>>;
    render?: (v: Record<string, unknown>) => JSX.Element;
    validation?: Validation<Record<string, unknown>>;
};
 
export type ComboboxAsyncStringItems = {
    options: {
        asyncItems: (value: string) => Promise<string[]>;
        placeholder?: string;
    };
    private?: () => Promise<string>;
    render?: (v: string) => JSX.Element;
    validation?: Validation<string>;
};
 
export type ComboboxAsyncRecordItems = {
    options: {
        asyncItems: (value: string) => Promise<Record<string, unknown>[]>;
        placeholder?: string;
        itemValue: string;
        itemLabel: string;
    };
    private?: () => Promise<Record<string, unknown>>;
    render?: (v: Record<string, unknown>) => JSX.Element;
    validation?: Validation<Record<string, unknown>>;
};
 
export type IComboboxField = (CommonField & {
    type: 'combobox';
} & ComboboxStringItems) | (CommonField & {
    type: 'combobox';
} & ComboboxRecordItems) | (CommonField & {
    type: 'combobox';
} & ComboboxAsyncStringItems) | (CommonField & {
    type: 'combobox';
} & ComboboxAsyncRecordItems);

{
  type: 'combobox',
  name: 'YOUR_PATH',
  options: {
    items: ['React', 'Vue', 'Svelte'],
    placeholder: 'Select a framework'
  },
  validation: z.union([
    z.literal('React'),
    z.literal('Vue'),
    z.literal('Svelte')
  ])
}

{
  type: 'combobox',
  name: 'YOUR_PATH',
  options: {
    items: [
      { id: 'react', label: 'React' },
      { id: 'vue', label: 'Vue' },
      { id: 'svelte', label: 'Svelte' }
    ],
    itemValue: 'id',
    itemLabel: 'label',
    placeholder: 'Select a framework'
  },
  validation: z
    .union([
      z.object({ id: z.literal('react'), label: z.literal('React') }),
      z.object({ id: z.literal('vue'), label: z.literal('Vue') }),
      z.object({ id: z.literal('svelte'), label: z.literal('Svelte') })
    ])
    .nullable()
}

{
  type: 'combobox',
  name: 'YOUR_PATH',
  options: {
     asyncItems: async (value: string) => {
      const res = await fetch(`/api/string-list?q=${value}`)
      const data = await res.json()
      console.log(data.data)
      return data.data
    },
    placeholder: 'Search for a framework'
  },
  validation: z.string()
}

{
  type: 'combobox',
  name: 'YOUR_PATH',
  options: {
   asyncItems: async (value: string) => {
      const res = await fetch(`/api/object-list?q=${value}`)
      const data = await res.json()
      return data.data
    },
    itemValue: 'id',
    itemLabel: 'title',
    placeholder: 'Search for a recipe'
  },
  validation: z.uuid().nullable()
}