# Enum Option Editor
URL: /docs/web/components/enum-option-editor

Enum Option Editor component.

**Demo:**

```tsx
'use client';

import { useState } from 'react';

import {
  EnumOptionEditor,
  type EnumEditorOption,
  type EnumOptionInput
} from '@docyrus/ui/components/enum-option-editor';

const INITIAL_OPTIONS: Array<EnumEditorOption> = [
  {
    id: '1', name: 'Open', color: 'emerald-500', origin: 'custom'
  },
  {
    id: '2', name: 'In Progress', color: 'amber-500', origin: 'custom'
  },
  {
    id: '3', name: 'On Hold', color: 'slate-400', origin: 'custom'
  },
  {
    id: '4', name: 'Closed', color: 'red-500', origin: 'custom'
  }
];

/**
 * Backend-agnostic demo — the editor is live/optimistic, so the callbacks just
 * mutate local state. Wire `DocyrusEnumOptionEditor` for real Docyrus CRUD.
 */
export function EnumOptionEditorDemo() {
  const [options, setOptions] = useState<Array<EnumEditorOption>>(INITIAL_OPTIONS);
  const [nextId, setNextId] = useState(INITIAL_OPTIONS.length + 1);

  return (
    <div className="w-full max-w-md">
      <EnumOptionEditor
        options={options}
        onCreateOption={async (input: EnumOptionInput) => {
          const created: EnumEditorOption = { id: `opt-${nextId}`, origin: 'custom', ...input };

          setNextId(id => id + 1);
          setOptions(prev => [...prev, created]);

          return created;
        }}
        onUpdateOption={async (id, patch) => {
          setOptions(prev => prev.map(option => (option.id === id ? { ...option, ...patch } : option)));
        }}
        onDeleteOption={async (id) => {
          setOptions(prev => prev.filter(option => option.id !== id));
        }}
        onReorder={async (ids) => {
          setOptions((prev) => {
            const byId = new Map(prev.map(option => [option.id, option]));

            return ids
              .map(id => byId.get(id))
              .filter((option): option is EnumEditorOption => Boolean(option));
          });
        }} />
    </div>
  );
}
```

## Installation

```bash
pnpm dlx @docyrus/cli add @docyrus/ui-enum-option-editor
```

**Dependencies:**
- [@tanstack/react-query](https://www.npmjs.com/package/@tanstack/react-query)
- [lucide-react](https://www.npmjs.com/package/lucide-react)

## Usage

```tsx
import {
  EnumOptionEditor,
  EnumOptionEditorDialog
} from "@docyrus/ui/components/enum-option-editor";
import type {
  EnumEditorOption,
  EnumOptionOrigin,
  EnumOptionInput,
  EnumOptionEditorProps,
  EnumOptionEditorDialogProps,
  DocyrusEnumOptionEditorProps,
  UseDocyrusEnumEditorPermissionOptions
} from "@docyrus/ui/components/enum-option-editor";

<EnumOptionEditor
  value={...}
  disabled
  onChange={() => {}}
/>
```

## API Reference

| Prop | Type | Default |
|------|------|---------|
| `value` | `string \| undefined` | — |
| `disabled` | `boolean` | — |
| `onChange` | `(value: string \| undefined) => void` | — |
| `className` | `string` | — |

## Components

| Component | Description |
|-----------|-------------|
| `EnumOptionEditor` | Public export |
| `EnumOptionEditorDialog` | Public export |
| `ADMIN` | Internal — `docyrus-enum-option-editor.tsx` |
| `ARCHITECT` | Internal — `docyrus-enum-option-editor.tsx` |
| `DocyrusEnumOptionEditor` | Internal — `docyrus-enum-option-editor.tsx` |

## Type Exports

| Type | Description |
|------|-------------|
| `EnumEditorOption` | — |
| `EnumOptionOrigin` | — |
| `EnumOptionInput` | — |
| `EnumOptionEditorProps` | — |
| `EnumOptionEditorDialogProps` | — |
| `DocyrusEnumOptionEditorProps` | — |
| `UseDocyrusEnumEditorPermissionOptions` | — |

## Type Reference

### EnumEditorOption

| Field | Type | Description |
|-------|------|-------------|
| `origin` | `EnumOptionOrigin` | — |
| `isCustomized` | `boolean` | — |

### EnumOptionOrigin

`"custom"` | `"inherited"`

### EnumOptionInput

| Field | Type | Description |
|-------|------|-------------|
| `name` | `string` | — |
| `slug` | `string` | — |
| `color` | `string` | — |
| `icon` | `string` | — |
| `description` | `string` | — |
| `active` | `boolean` | — |
| `parent` | `string` | — |

### EnumOptionEditorProps

| Field | Type | Description |
|-------|------|-------------|
| `options` | `EnumEditorOption[]` | — |
| `onCreateOption` | `(input: EnumOptionInput) => Promise<EnumEditorOption> \| EnumEditorOption` | — |
| `onUpdateOption` | `(id: string, patch: Partial<EnumOptionInput>) => Promise<void> \| void` | — |
| `onDeleteOption` | `(id: string) => Promise<void> \| void` | — |
| `onRevertOption` | `(id: string) => Promise<void> \| void` | — |
| `onReorder` | `(orderedIds: string[]) => Promise<void> \| void` | — |
| `readOnly` | `boolean` | — |
| `allowCreate` | `boolean` | — |
| `allowDelete` | `boolean` | — |
| `allowReorder` | `boolean` | — |
| `noticeText` | `string` | — |
| `emptyText` | `string` | — |
| `className` | `string` | — |

### EnumOptionEditorDialogProps

| Field | Type | Description |
|-------|------|-------------|
| `trigger` | `ReactNode` | — |
| `open` | `boolean` | — |
| `onOpenChange` | `(open: boolean) => void` | — |
| `title` | `string` | — |
| `description` | `string` | — |
| `disabled` | `boolean` | — |

### DocyrusEnumOptionEditorProps

| Field | Type | Description |
|-------|------|-------------|
| `client` | `RestApiClient` | — |
| `appId` | `string` | — |
| `dataSourceId` | `string` | — |
| `fieldId` | `string` | — |
| `fieldName` | `string` | — |
| `trigger` | `ReactNode` | — |
| `open` | `boolean` | — |
| `onOpenChange` | `(open: boolean) => void` | — |
| `onChanged` | `() => void` | — |
| `disabled` | `boolean` | — |
| `title` | `string` | — |

### UseDocyrusEnumEditorPermissionOptions

| Field | Type | Description |
|-------|------|-------------|
| `enabled` | `boolean` | — |
| `adminRoleIds` | `Array<string>` | — |
| `meEndpoint` | `string` | — |