> ## Documentation Index
> Fetch the complete documentation index at: https://translations.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Web での検証済みドメインの設定

> 検証済みおよび保留中の組織ドメインを、統合されたテーブルインターフェースで管理する方法を説明します。

export const ReleaseStageNotice = ({feature, stage, plans, contact, terms}) => {
  const stageTextMap = {
    "beta": "Beta",
    "ea": "早期アクセス"
  };
  const stageText = stageTextMap[stage] || "製品リリース段階";
  const prsLink = "/docs/troubleshoot/product-lifecycle/product-release-stages";
  const linkify = (text, url) => {
    return <a href={url} target="_blank" rel="noreferrer" class="link">{text}</a>;
  };
  const includeDetails = (plans, contact, terms) => {
    const hasDetails = terms || plans || contact;
    if (!hasDetails) return null;
    return <span data-as="p">
            {plans && <>この機能は{linkify(`${plans}プラン`, "https://auth0.com/pricing")}でご利用いただけます。 </>}
            {contact && "参加をご希望の場合は、" + contact + "までお問い合わせください。 "}
            {terms && <>この機能を使用することにより、Oktaの該当する無料トライアル規約および{linkify("Master Subscription Agreement", "https://www.okta.com/legal")}に同意したものとみなされます。</>}
        </span>;
  };
  return <Warning>
            <span data-as="p">
                <strong>{feature}機能は現在、{linkify(stageText, prsLink)}です。</strong>
            </span>

            {includeDetails(plans, contact, terms)}
        </Warning>;
};

export const ComponentLoader = props => {
  const themePref = window?.localStorage?.getItem?.("isDarkMode");
  const theme = themePref === "dark" || themePref === "light" ? themePref : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
  const lang = {
    i18n: {
      currentLanguage: props.lang || "en-US"
    }
  };
  return <div style={{
    minHeight: "400px",
    marginTop: "40px",
    background: theme === "light" ? "rgb(var(--gray-950)/.03)" : "rgb(255 255 255/.1)",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    position: "relative",
    backgroundSize: "16px 16px",
    borderRadius: "10px",
    boxShadow: "0 1px 4px 0 rgba(16,30,54,0.04)",
    display: "flex",
    flexDirection: "column"
  }}>
      <div style={{
    minWidth: "320px",
    width: "96.5%",
    maxWidth: "1200px",
    margin: "12px 12px 0",
    background: theme === "light" ? "#ffffff" : "#101011",
    borderRadius: "10px",
    boxShadow: "0 2px 8px 0 rgba(16,30,54,0.04)",
    padding: "24px",
    minHeight: "400px"
  }} data-uc-component={props.componentSelector} data-uc-props={JSON.stringify(lang)}>
        <Spinner size={40} color="#8A94A6" style={{
    position: "absolute",
    top: "50%",
    left: "50%",
    transform: "translate(-50%, -50%)",
    zIndex: 1
  }} />
      </div>
      <div style={{
    width: "100%",
    textAlign: "center",
    color: theme === "light" ? "#6B7280" : "ffffff",
    fontSize: "12px",
    marginTop: "8px",
    marginBottom: "8px",
    letterSpacing: "0.01em",
    fontWeight: 400
  }}>
        {props.componentPreviewText}
      </div>
    </div>;
};

export const Spinner = ({size = 40, color = "#8A94A6", style = {}}) => <div style={{
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  ...style
}} aria-label="読み込み中" role="status">
    <svg width={size} height={size} viewBox="0 0 50 50" style={{
  display: "block"
}}>
      <circle cx="25" cy="25" r="20" fill="none" stroke={color} strokeWidth="5" strokeDasharray="90 150" strokeLinecap="round">
        <animateTransform attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="1s" repeatCount="indefinite" />
      </circle>
    </svg>
  </div>;

<ReleaseStageNotice feature="Auth0 Universal Components" stage="ea" terms="true" contact="Auth0 Support" />

`DomainTable` コンポーネントは、お客様が Auth0 Organization のメールドメインを一元管理できるインターフェイスを提供します。ドメインの所有権を検証すると、Organization 管理者は[ホームレルムディスカバリー (HRD) ](/docs/ja-jp/authenticate/enterprise-connections/self-service-enterprise-configuration/manage-self-service-enterprise-configuration#email-domain-verification-and-pre-verified-domains)などの重要な B2B 機能を有効にでき、メールアドレスのサフィックス (例: `user@acme.com`) に基づいてユーザーを適切な SSO プロバイダーへ自動的にルーティングできます。

<ComponentLoader componentSelector="domain-table-view" componentPreviewText="Domain Table コンポーネントのプレビュー" />

<Tabs>
  <Tab title="React">
    ## 設定の要件

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      **Auth0 Configuration が必要です**—テナントで My Organization API が設定されていることを確認してください。[設定ガイドを表示
      →](/docs/ja-jp/get-started/universal-components/web/components/build-delegated-admin#enable-the-my-organization-api)
    </Callout>

    ## コンポーネントをインストールする

    <CodeGroup>
      ```bash pnpm  wrap lines theme={null}
      pnpm add @auth0/universal-components-react
      ```

      ```bash npm wrap lines theme={null}
      npm install @auth0/universal-components-react
      ```
    </CodeGroup>

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      いずれのコマンドを実行した場合も、共有ユーティリティとAuth0連携に必要な@auth0/universal-components-core
      依存パッケージがインストールされます。
    </Callout>

    ## はじめに

    ```tsx React SPA wrap lines theme={null}
    import { DomainTable } from "@auth0/universal-components-react";

    export function DomainsPage() {
      return <DomainTable />;
    }
    ```

    <Accordion title="連携の完全な例">
      ```tsx wrap lines theme={null}
      import React from "react";
      import { DomainTable } from "@auth0/universal-components-react";
      import { Auth0Provider } from "@auth0/auth0-react";
      import { Auth0ComponentProvider } from "@auth0/universal-components-react/spa";
      import { useNavigate } from "react-router-dom";

      function DomainsManagementPage() {
        const navigate = useNavigate();

        return (
          <div className="max-w-6xl mx-auto p-6">
            <DomainTable
              schema={{
                create: {
                  domain: {
                    regex: /^(?:[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?\.)+[a-z]{2,}$/i,
                    errorMessage: "Please enter a valid domain (e.g., example.com)",
                  },
                },
              }}
              createAction={{
                onBefore: (domain) => {
                  if (!domain.domain.includes(".")) {
                    alert("Please enter a valid domain with a TLD");
                    return false;
                  }
                  return true;
                },
                onAfter: (domain) => console.log("Domain created:", domain),
              }}
              verifyAction={{
                onAfter: (domain) => {
                  console.log("Domain verified:", domain.domain);
                },
              }}
              deleteAction={{
                onBefore: (domain) => {
                  return confirm(`Delete ${domain.domain}?`);
                },
              }}
              onOpenProvider={(provider) => {
                navigate(`/providers/${provider.id}`);
              }}
              onCreateProvider={() => {
                navigate("/providers/create");
              }}
              customMessages={{
                header: {
                  title: "Domain Management",
                  description: "Add and verify domains for your organization",
                  create_button_text: "Add New Domain",
                },
              }}
              styling={{
                variables: {
                  common: { "--font-size-label": "12px" },
                  light: { "--color-primary": "#0066cc" },
                },
                classes: {
                  "DomainTable-header": "shadow-lg rounded-xl",
                },
              }}
            />
          </div>
        );
      }

      export default function App() {
        const domain = "your-domain.auth0.com";

        return (
          <Auth0Provider
            domain={domain}
            clientId="your-client-id"
            authorizationParams={{
              redirect_uri: window.location.origin,
            }}
            interactiveErrorHandler="popup" // Universal Login のポップアップでステップアップ認証のチャレンジを処理するために必要です
          >
            <Auth0ComponentProvider domain={domain}>
              <DomainsManagementPage />
            </Auth0ComponentProvider>
          </Auth0Provider>
        );
      }

      ```
    </Accordion>

    ## プロップス

    ### 表示関連のプロップス

    表示関連のプロップスは、コンポーネントの動作に影響を与えずに、そのレンダリング方法を制御します。セクションを非表示にしたり、読み取り専用モードを有効にしたりする際に使用します。

    | プロパティ        | 型         | 説明                               |
    | :----------- | :-------- | :------------------------------- |
    | `readOnly`   | `boolean` | すべてのドメイン操作を無効にします。デフォルト: `false` |
    | `hideHeader` | `boolean` | ヘッダーセクションを非表示にします。デフォルト: `false` |

    ***

    ### Action のプロップス

    Actionプロップスは、ユーザー操作を処理し、ユーザーがドメイン操作を実行したときの挙動を定義します。ライフサイクルフック (`onBefore`、`onAfter`) を使用すれば、アプリケーションのルーティングや分析と連携できます。

    | プロパティ                       | 型                                           | 説明                   |
    | :-------------------------- | :------------------------------------------ | :------------------- |
    | `createAction`              | `ComponentAction<Domain>`                   | ドメインを作成するアクション。      |
    | `verifyAction`              | `ComponentAction<Domain>`                   | ドメインを検証するアクション。      |
    | `deleteAction`              | `ComponentAction<Domain>`                   | ドメインを削除するアクション。      |
    | `associateToProviderAction` | `ComponentAction<Domain, IdentityProvider>` | ドメインをプロバイダーに関連付ける。   |
    | `deleteFromProviderAction`  | `ComponentAction<Domain, IdentityProvider>` | プロバイダーからドメインを削除する。   |
    | `onOpenProvider`            | `(provider: IdentityProvider) => void`      | 設定モーダルからプロバイダーに移動する。 |
    | `onCreateProvider`          | `() => void`                                | プロバイダー作成フローに移動します。   |

    **createAction**

    **型:** `ComponentAction<Domain>`

    ドメイン作成フローを制御します。新しいドメインが追加されたタイミングを追跡するには、`onAfter`を使用します。

    **プロパティ:**

    * `disabled`—"Add Domain" ボタンを無効にします
    * `onBefore(domain)`—ドメインが作成される前に実行されます。作成を中止するには `false` を返します (たとえば、ドメインの形式が無効な場合) 。
    * `onAfter(domain)`—ドメインが正常に作成された後に実行されます。通知の表示やイベントの追跡に使用します。

    **例:**

    ```tsx wrap lines theme={null}
    <DomainTable
      createAction={{
        onBefore: (domain) => {
          // ドメインの形式を検証
          if (!domain.domain.includes(".")) {
            alert("Please enter a valid domain");
            return false;
          }
          return true;
        },
        onAfter: (domain) => {
          analytics.track("Domain Created", { domain: domain.domain });
        },
      }}
    />
    ```

    ***

    **verifyAction**

    **型:** `ComponentAction<Domain>`

    ドメイン検証のフローを制御します。ドメイン検証では、DNSのTXTレコードによって所有権を証明します。

    **プロパティ:**

    * `disabled`—Verifyボタンを無効にします
    * `onBefore(domain)`—検証を試みる前に実行されます。検証を中止するには`false`を返します (たとえば、DNSが設定されていることを確認する場合) 。
    * `onAfter(domain)`—ドメインの検証が正常に完了した後に実行されます。成功通知を表示するために使用します。

    **例:**

    ```tsx wrap lines theme={null}
    <DomainTable
      verifyAction={{
        onBefore: (domain) => {
          return confirm(
            `Verify ${domain.domain}? Make sure your DNS record is configured.`,
          );
        },
        onAfter: (domain) => {
          toast.success(`${domain.domain} verified successfully!`);
        },
      }}
    />
    ```

    ***

    **deleteAction**

    **型:** `ComponentAction<Domain>`

    ドメインの削除を制御します。破壊的な操作のため、`onBefore` で確認を行うことを推奨します。

    **プロパティ:**

    * `disabled`—削除ボタンを無効にします
    * `onBefore(domain)`—削除前に実行されます。`false` を返すと削除を中止できます (確認ダイアログでの使用を推奨) 。
    * `onAfter(domain)`—ドメインの削除が完了した後に実行されます。イベントの追跡や通知の表示に使用します。

    **例:**

    ```tsx wrap lines theme={null}
    <DomainTable
      deleteAction={{
        onBefore: (domain) => {
          return confirm(`Delete ${domain.domain}? This cannot be undone.`);
        },
        onAfter: (domain) => {
          analytics.track("Domain Deleted", { domain: domain.domain });
        },
      }}
    />
    ```

    ***

    **associateToProviderAction**

    **型:** `ComponentAction<Domain, IdentityProvider>`

    検証済みドメインとSSOプロバイダーの関連付けを制御します。関連付けできるのは検証済みドメインのみです。

    **プロパティ:**

    * `disabled`—アカウント関連付けアクションを無効にします
    * `onBefore(domain, provider)`—関連付け前に実行されます。関連付けを防止するには `false` を返します。
    * `onAfter(domain, provider)`—ドメインがプロバイダーに正常に関連付けられた後に実行されます。

    **例:**

    ```tsx wrap lines theme={null}
    <DomainTable
      associateToProviderAction={{
        onAfter: (domain, provider) => {
          console.log(`Associated ${domain.domain} with ${provider.name}`);
        },
      }}
    />
    ```

    ***

    **deleteFromProviderAction**

    **型:** `ComponentAction<Domain, IdentityProvider>`

    ドメインとSSOプロバイダーとの関連付けの解除を制御します。

    **プロパティ:**

    * `disabled`—関連付け解除操作を無効にする
    * `onBefore(domain, provider)`—削除前に実行されます。削除を阻止するには `false` を返します。
    * `onAfter(domain, provider)`—プロバイダーからドメインが正常に削除された後に実行されます。

    ***

    **onOpenProvider / onCreateProvider**

    **型:** `(provider: IdentityProvider) => void` / `() => void`

    ドメイン設定モーダル用のナビゲーションハンドラーです。ユーザーがドメインのプロバイダー関連付けを設定するときの流れは次のとおりです:

    * `onOpenProvider`—ユーザーが既存のProviderをクリックして表示または編集すると呼び出されます
    * `onCreateProvider`—ユーザーがクリックして新しいProviderを作成すると呼び出されます

    **例:**

    ```tsx wrap lines theme={null}
    <DomainTable
      onOpenProvider={(provider) => {
        navigate(`/providers/${provider.id}`);
      }}
      onCreateProvider={() => {
        navigate("/providers/create");
      }}
    />
    ```

    ***

    ### カスタマイズ用プロップス

    カスタマイズ用のプロップスを使えば、ソースコードを変更することなく、ブランド、ロケール、バリデーションの要件に合わせてコンポーネントを調整できます。

    | プロパティ            | 型                                  | 説明                    |
    | :--------------- | :--------------------------------- | :-------------------- |
    | `schema`         | `DomainTableSchema`                | ドメイン URL のバリデーションルール。 |
    | `customMessages` | `Partial<DomainTableMainMessages>` | i18n テキストのオーバーライド。    |
    | `styling`        | `ComponentStyling`                 | CSS 変数とクラスのオーバーライド。   |

    **スキーマ**

    ドメインURLの入力にカスタムのバリデーションルールを設定します。

    <Accordion title="利用可能なスキーマフィールド">
      **create.domainUrl**—ドメイン URL のバリデーション—`regex`—カスタム正規表現パターン

      * `errorMessage`—カスタムエラーメッセージ
    </Accordion>

    ```tsx wrap lines theme={null}
    <DomainTable
      schema={{
        create: {
          domain: {
            regex: /^[a-z0-9.-]+\.[a-z]{2,}$/,
            errorMessage: "Enter a valid domain (example.com)",
          },
        },
      }}
    />
    ```

    ***

    **customMessages**

    すべてのテキストと翻訳をカスタマイズできます。すべてのフィールドは任意で、指定しない場合はデフォルト値が使用されます。

    <Accordion title="利用可能なメッセージ">
      **header**—コンポーネントのヘッダー

      * `title`, `description`, `create_button_text`

      **table**—テーブル表示

      * `empty_message`
      * `columns.domain`, `columns.status`
      * `actions.configure_button_text`, `actions.verify_button_text`, `actions.delete_button_text`

      **create.modal**—ドメイン作成モーダル

      * `title`
      * `field.label`, `field.placeholder`, `field.error`
      * `actions.cancel_button_text`, `actions.create_button_text`

      **verify.modal**—ドメイン検証モーダル

      * `title`
      * `txt_record_name.label`, `txt_record_content.label`, `verification_status.label`
      * `actions.verify_button_text`, `actions.done_button_text`

      **delete.modal**—削除確認

      * `title`
      * `description.pending`, `description.verified`
      * `actions.cancel_button_text`, `actions.create_button_text`

      **configure.modal**—プロバイダー設定

      * `title`, `description`
      * `table.empty_message`, `table.columns.name`
      * `actions.close_button_text`

      **notifications**—APIレスポンス

      * `domain_create_success`, `domain_create_error`
      * `domain_verify_success`, `domain_delete_success`
    </Accordion>

    ```tsx wrap lines theme={null}
    <DomainTable
      customMessages={{
        header: {
          title: "Manage Domains",
          description: "Configure and verify organization domains",
          create_button_text: "Add Domain",
        },
        table: {
          empty_message: "No domains yet. Add one to begin.",
        },
        notifications: {
          domain_create_success: "Domain added successfully!",
          domain_verify_success: "Domain verified!",
          domain_delete_success: "Domain removed.",
        },
      }}
    />
    ```

    ***

    **スタイリング**

    CSS変数とクラスのオーバーライドで外観をカスタマイズできます。テーマに応じたスタイリングにも対応しています。

    <Accordion title="利用可能なスタイルオプション">
      **変数**—CSS カスタムプロパティ

      * `common`—すべてのテーマに適用
      * `light`—ライトテーマにのみ適用
      * `dark`—ダークテーマにのみ適用

      **クラス**—コンポーネントクラスのオーバーライド

      * `DomainTable-header`
      * `DomainTable-table`
      * `DomainTable-createModal`
      * `DomainTable-configureModal`
      * `DomainTable-deleteModal`
    </Accordion>

    ```tsx wrap lines theme={null}
    <DomainTable
      styling={{
        variables: {
          common: { "--font-size-title": "1rem" },
          light: { "--color-primary": "#4f46e5" },
        },
        classes: {
          "DomainTable-header": "mb-6",
          "DomainTable-table": "rounded-lg shadow-sm",
        },
      }}
    />
    ```

    ***

    ## 高度なカスタマイズ

    `DomainTable`コンポーネントは、より小さなサブコンポーネントとフックで構成されています。shadcnを使用している場合は、それらを個別にインポートして、カスタムドメインのワークフローを構築できます。

    ### 利用可能なサブコンポーネント

    高度なユースケースでは、個々のサブコンポーネントをインポートして、独自のカスタムドメイン管理インターフェイスを構築できます。特定のモーダルをさまざまなコンテキストに埋め込みたい場合や、プロップスでは対応できない範囲までテーブルのレイアウトをカスタマイズしたい場合に便利です。

    | コンポーネント                         | 説明              |
    | :------------------------------ | :-------------- |
    | `DomainCreateModal`             | ドメイン作成用モーダル     |
    | `DomainVerifyModal`             | 検証フロー用モーダル      |
    | `DomainDeleteModal`             | 削除確認モーダル        |
    | `DomainConfigureProvidersModal` | プロバイダーの関連付けを管理  |
    | `DomainTableActionsColumn`      | 各ドメイン行のアクションボタン |

    ### 利用可能なHooks

    これらのフックは、UIを持たず、基盤となるロジックのみを提供します。Auth0 APIとの連携を活用しつつ、完全に独自のインターフェイスを構築したい場合にご利用ください。

    | Hook                  | 説明                               |
    | :-------------------- | :------------------------------- |
    | `useDomainTable`      | データおよびAPIレイヤー (取得、作成、検証、削除、関連付け) |
    | `useDomainTableLogic` | UIのインタラクション状態およびハンドラー (モーダル、通知)  |
  </Tab>

  <Tab title="Next.js">
    ## 設定の要件

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      **Auth0 Configuration が必要です**—tenant が
      My Organization API で構成されていることを確認してください。[設定ガイドを表示
      →](/docs/ja-jp/get-started/universal-components/web/components/build-delegated-admin#configure-auth0-dashboard)
    </Callout>

    ## コンポーネントのインストール

    <CodeGroup>
      ```bash npm  wrap lines theme={null}
      npm install @auth0/universal-components-react
      ```

      ```bash pnpm wrap lines theme={null}
      pnpm add @auth0/universal-components-react
      ```
    </CodeGroup>

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      pnpm または npm コマンドを実行すると、共有ユーティリティと Auth0 連携に必要な @auth0/universal-components-core
      依存関係がインストールされます。
    </Callout>

    ## はじめに

    ```tsx page.tsx wrap lines theme={null}
    import { DomainTable } from "@auth0/universal-components-react";
    import { useRouter } from "next/navigation";

    export function DomainsPage() {
      const router = useRouter();

      return (
        <DomainTable
          onOpenProvider={(provider) => {
            router.push(`/providers/${provider.id}`);
          }}
          onCreateProvider={() => {
            router.push("/providers/create");
          }}
        />
      );
    }
    ```

    <Accordion title="連携の完全な例">
      ```tsx wrap lines theme={null}
      import React from "react";
      import { DomainTable } from "@auth0/universal-components-react";
      import { useRouter } from "next/navigation";

      function DomainsManagementPage() {
        const router = useRouter();

        return (
          <div className="max-w-6xl mx-auto p-6">
            <DomainTable
              schema={{
                create: {
                  domain: {
                    regex: /^(?:[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?\.)+[a-z]{2,}$/i,
                    errorMessage: "Please enter a valid domain (e.g., example.com)",
                  },
                },
              }}
              createAction={{
                onBefore: (domain) => {
                  if (!domain.domain.includes(".")) {
                    alert("Please enter a valid domain with a TLD");
                    return false;
                  }
                  return true;
                },
                onAfter: (domain) => console.log("Domain created:", domain),
              }}
              verifyAction={{
                onAfter: (domain) => {
                  console.log("Domain verified:", domain.domain);
                },
              }}
              deleteAction={{
                onBefore: (domain) => {
                  return confirm(`Delete ${domain.domain}?`);
                },
              }}
              onOpenProvider={(provider) => {
                router.push(`/providers/${provider.id}`);
              }}
              onCreateProvider={() => {
                router.push("/providers/create");
              }}
              customMessages={{
                header: {
                  title: "Domain Management",
                  description: "Add and verify domains for your organization",
                  create_button_text: "Add New Domain",
                },
              }}
              styling={{
                variables: {
                  common: { "--font-size-label": "12px" },
                  light: { "--color-primary": "#0066cc" },
                },
                classes: {
                  "DomainTable-header": "shadow-lg rounded-xl",
                },
              }}
            />
          </div>
        );
      }

      export default DomainsManagementPage;
      ```
    </Accordion>

    ## プロップス

    ### 表示関連のプロップス

    表示系のプロップスは、コンポーネントの動作に影響を与えることなく、レンダリングのされ方を制御します。セクションを非表示にしたり、読み取り専用モードを有効にしたりする場合に使用します。

    <table class="table">
      <thead>
        <tr>
          <th>プロパティ</th>
          <th>型</th>
          <th>説明</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>readOnly</code>
          </td>

          <td>
            <code>boolean</code>
          </td>

          <td>
            すべてのドメイン操作を無効にします。デフォルト：<code>false</code>
          </td>
        </tr>

        <tr>
          <td>
            <code>hideHeader</code>
          </td>

          <td>
            <code>boolean</code>
          </td>

          <td>
            ヘッダーセクションを非表示にします。デフォルト：<code>false</code>
          </td>
        </tr>
      </tbody>
    </table>

    ***

    ### Action のプロップス

    Actionのプロップスは、ユーザー操作を処理し、ユーザーがドメイン操作を実行したときの動作を定義します。ライフサイクルフック (`onBefore`、`onAfter`) を使用すると、アプリケーションのルーティングや分析と連携できます。

    <table class="table">
      <thead>
        <tr>
          <th>プロパティ</th>
          <th>型</th>
          <th>説明</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>createAction</code>
          </td>

          <td>
            <code>ComponentAction\<Domain></code>
          </td>

          <td>
            ドメインを作成するアクション。
          </td>
        </tr>

        <tr>
          <td>
            <code>verifyAction</code>
          </td>

          <td>
            <code>ComponentAction\<Domain></code>
          </td>

          <td>
            ドメインを検証するアクション。
          </td>
        </tr>

        <tr>
          <td>
            <code>deleteAction</code>
          </td>

          <td>
            <code>ComponentAction\<Domain></code>
          </td>

          <td>
            ドメインを削除するアクション。
          </td>
        </tr>

        <tr>
          <td>
            <code>associateToProviderAction</code>
          </td>

          <td>
            <code>ComponentAction\<Domain, IdentityProvider></code>
          </td>

          <td>
            ドメインをプロバイダーに関連付けるアクション。
          </td>
        </tr>

        <tr>
          <td>
            <code>deleteFromProviderAction</code>
          </td>

          <td>
            <code>ComponentAction\<Domain, IdentityProvider></code>
          </td>

          <td>
            プロバイダーからドメインを削除するアクション。
          </td>
        </tr>

        <tr>
          <td>
            <code>onOpenProvider</code>
          </td>

          <td>
            <code>(provider: IdentityProvider) => void</code>
          </td>

          <td>
            設定モーダルからプロバイダーの画面に移動します。
          </td>
        </tr>

        <tr>
          <td>
            <code>onCreateProvider</code>
          </td>

          <td>
            <code>() => void</code>
          </td>

          <td>
            プロバイダー作成フローに移動します。
          </td>
        </tr>
      </tbody>
    </table>

    **createAction**

    **型:** `ComponentAction<Domain>`

    ドメイン作成フローを制御します。新しいドメインが追加されたタイミングを追跡するには、`onAfter`を使用します。

    **プロパティ:**

    * `disabled`—"Add Domain" ボタンを無効にします
    * `onBefore(domain)`—ドメインの作成前に実行されます。作成を阻止するには `false` を返します (たとえば、ドメインの形式が無効な場合) 。
    * `onAfter(domain)`—ドメインの作成が成功した後に実行されます。通知の表示やイベントの追跡に使用します。

    **例:**

    ```tsx wrap lines theme={null}
    <DomainTable
      createAction={{
        onBefore: (domain) => {
          // ドメインの形式を検証
          if (!domain.domain.includes(".")) {
            alert("Please enter a valid domain");
            return false;
          }
          return true;
        },
        onAfter: (domain) => {
          analytics.track("Domain Created", { domain: domain.domain });
        },
      }}
    />
    ```

    ***

    **verifyAction**

    **型：** `ComponentAction<Domain>`

    ドメイン検証のフローを制御します。ドメイン検証では、DNSのTXTレコードによって所有権を証明します。

    **プロパティ:**

    * `disabled`—Verify ボタンを無効にします
    * `onBefore(domain)`—検証を試みる前に実行されます。検証を中止するには `false` を返します (たとえば、DNS が設定されていることを確認する場合) 。
    * `onAfter(domain)`—ドメインの検証が正常に完了した後に実行されます。成功通知を表示するために使用します。

    **例:**

    ```tsx wrap lines theme={null}
    <DomainTable
      verifyAction={{
        onBefore: (domain) => {
          return confirm(
            `Verify ${domain.domain}? Make sure your DNS record is configured.`,
          );
        },
        onAfter: (domain) => {
          toast.success(`${domain.domain} verified successfully!`);
        },
      }}
    />
    ```

    ***

    **deleteAction**

    **型:** `ComponentAction<Domain>`

    ドメインの削除を制御します。破壊的な操作のため、`onBefore` で確認を行うことを推奨します。

    **プロパティ:**

    * `disabled`—削除ボタンを無効にします
    * `onBefore(domain)`—削除前に実行されます。`false` を返すと削除を中止します (確認ダイアログでの使用を推奨) 。
    * `onAfter(domain)`—ドメインが正常に削除された後に実行されます。イベントの追跡や通知の表示に使用します。

    **例:**

    ```tsx wrap lines theme={null}
    <DomainTable
      deleteAction={{
        onBefore: (domain) => {
          return confirm(`Delete ${domain.domain}? This cannot be undone.`);
        },
        onAfter: (domain) => {
          analytics.track("Domain Deleted", { domain: domain.domain });
        },
      }}
    />
    ```

    ***

    **associateToProviderAction**

    **型:** `ComponentAction<Domain, IdentityProvider>`

    検証済みドメインとSSOプロバイダーの関連付けを制御します。関連付けできるのは検証済みドメインのみです。

    **プロパティ:**

    * `disabled`—関連付けアクションを無効にします
    * `onBefore(domain, provider)`—関連付け前に実行されます。関連付けを阻止するには `false` を返します。
    * `onAfter(domain, provider)`—ドメインがプロバイダーに正常に関連付けられた後に実行されます。

    **例:**

    ```tsx wrap lines theme={null}
    <DomainTable
      associateToProviderAction={{
        onAfter: (domain, provider) => {
          console.log(`Associated ${domain.domain} with ${provider.name}`);
        },
      }}
    />
    ```

    ***

    **deleteFromProviderAction**

    **型:** `ComponentAction<Domain, IdentityProvider>`

    ドメインとSSOプロバイダーとの関連付けの解除を制御します。

    **プロパティ:**

    * `disabled`—関連付け解除操作を無効にします
    * `onBefore(domain, provider)`—削除前に実行されます。削除を中止するには `false` を返します。
    * `onAfter(domain, provider)`—ドメインがプロバイダーから正常に削除された後に実行されます。

    ***

    **onOpenProvider / onCreateProvider**

    **型:** `(provider: IdentityProvider) => void` / `() => void`

    ドメイン設定モーダルのナビゲーションハンドラーです。ユーザーがドメインのプロバイダー関連付けを設定する場合:

    * `onOpenProvider`—ユーザーが既存のProviderをクリックして表示または編集したときに呼び出されます
    * `onCreateProvider`—ユーザーがクリックして新しいProviderを作成したときに呼び出されます

    **例:**

    ```tsx wrap lines theme={null}
    <DomainTable
      onOpenProvider={(provider) => {
        router.push(`/providers/${provider.id}`);
      }}
      onCreateProvider={() => {
        router.push("/providers/create");
      }}
    />
    ```

    ***

    ### カスタマイズ用プロップス

    カスタマイズ用のプロップスを使えば、ソースコードを変更せずに、ブランドやロケール、バリデーションの要件に合わせてコンポーネントを調整できます。

    <table class="table">
      <thead>
        <tr>
          <th>プロパティ</th>
          <th>型</th>
          <th>説明</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>schema</code>
          </td>

          <td>
            <code>DomainTableSchema</code>
          </td>

          <td>
            ドメイン URL のバリデーションルール。
          </td>
        </tr>

        <tr>
          <td>
            <code>customMessages</code>
          </td>

          <td>
            <code>Partial\<DomainTableMainMessages></code>
          </td>

          <td>
            i18n テキストのオーバーライド。
          </td>
        </tr>

        <tr>
          <td>
            <code>styling</code>
          </td>

          <td>
            <code>ComponentStyling</code>
          </td>

          <td>
            CSS 変数とクラスのオーバーライド。
          </td>
        </tr>
      </tbody>
    </table>

    **スキーマ**

    ドメインURLの入力に対するカスタムバリデーションルールを設定します。

    <Accordion title="利用可能なスキーマのフィールド">
      **create.domain**—ドメインURLのバリデーション—`regex`—カスタム正規表現パターン -
      `errorMessage`—カスタムエラーメッセージ
    </Accordion>

    ```tsx wrap lines theme={null}
    <DomainTable
      schema={{
        create: {
          domain: {
            regex: /^[a-z0-9.-]+\.[a-z]{2,}$/,
            errorMessage: "有効なドメインを入力してください (example.com)",
          },
        },
      }}
    />
    ```

    ***

    **customMessages**

    すべてのテキストと翻訳をカスタマイズできます。すべてのフィールドは任意で、指定しない場合はデフォルト値が使用されます。

    <Accordion title="利用可能なメッセージ">
      **header**—コンポーネントのヘッダー

      * `title`, `description`, `create_button_text`

      **table**—テーブル表示

      * `empty_message`
      * `columns.domain`, `columns.status`
      * `actions.configure_button_text`, `actions.verify_button_text`, `actions.delete_button_text`

      **create.modal**—ドメイン作成モーダル

      * `title`
      * `field.label`, `field.placeholder`, `field.error`
      * `actions.cancel_button_text`, `actions.create_button_text`

      **verify.modal**—ドメイン検証モーダル

      * `title`
      * `txt_record_name.label`, `txt_record_content.label`, `verification_status.label`
      * `actions.verify_button_text`, `actions.done_button_text`

      **delete.modal**—削除確認

      * `title`
      * `description.pending`, `description.verified`
      * `actions.cancel_button_text`, `actions.create_button_text`

      **configure.modal**—プロバイダー設定

      * `title`, `description`
      * `table.empty_message`, `table.columns.name`
      * `actions.close_button_text`

      **notifications**—APIレスポンス

      * `domain_create_success`, `domain_create_error`
      * `domain_verify_success`, `domain_delete_success`
    </Accordion>

    ```tsx wrap lines theme={null}
    <DomainTable
      customMessages={{
        header: {
          title: "Manage Domains",
          description: "Configure and verify organization domains",
          create_button_text: "Add Domain",
        },
        table: {
          empty_message: "No domains yet. Add one to begin.",
        },
        notifications: {
          domain_create_success: "Domain added successfully!",
          domain_verify_success: "Domain verified!",
          domain_delete_success: "Domain removed.",
        },
      }}
    />
    ```

    ***

    **スタイリング**

    CSS変数とクラスのオーバーライドで外観をカスタマイズできます。テーマに応じたスタイリングにも対応しています。

    <Accordion title="利用可能なスタイリングオプション">
      **変数**—CSS カスタムプロパティ

      * `common`—すべてのテーマに適用
      * `light`—ライトテーマのみ
      * `dark`—ダークテーマのみ

      **クラス**—コンポーネントクラスのオーバーライド

      * `DomainTable-header`
      * `DomainTable-table`
      * `DomainTable-createModal`
      * `DomainTable-configureModal`
      * `DomainTable-deleteModal`
    </Accordion>

    ```tsx wrap lines theme={null}
    <DomainTable
      styling={{
        variables: {
          common: { "--font-size-title": "1rem" },
          light: { "--color-primary": "#4f46e5" },
        },
        classes: {
          "DomainTable-header": "mb-6",
          "DomainTable-table": "rounded-lg shadow-sm",
        },
      }}
    />
    ```

    ***

    ## 高度なカスタマイズ

    `DomainTable`コンポーネントは、より小さなサブコンポーネントとフックで構成されています。これらを個別にインポートして、カスタムドメインのワークフローを構築できます。

    ### 利用可能なサブコンポーネント

    高度なユースケースでは、個々のサブコンポーネントをインポートして、独自のカスタムドメイン管理インターフェイスを構築できます。特定のモーダルをさまざまなコンテキストに埋め込みたい場合や、プロップスでは対応できない範囲までテーブルのレイアウトをカスタマイズしたい場合に便利です。

    <table class="table">
      <thead>
        <tr>
          <th>コンポーネント</th>
          <th>説明</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>DomainCreateModal</code>
          </td>

          <td>ドメイン作成用のモーダル</td>
        </tr>

        <tr>
          <td>
            <code>DomainVerifyModal</code>
          </td>

          <td>検証フロー用のモーダル</td>
        </tr>

        <tr>
          <td>
            <code>DomainDeleteModal</code>
          </td>

          <td>削除確認用のモーダル</td>
        </tr>

        <tr>
          <td>
            <code>DomainConfigureProvidersModal</code>
          </td>

          <td>プロバイダーの関連付けを管理</td>
        </tr>

        <tr>
          <td>
            <code>DomainTableActionsColumn</code>
          </td>

          <td>各ドメイン行のアクションボタン</td>
        </tr>
      </tbody>
    </table>

    ### 利用可能なHooks

    これらのフックは、UIを持たない基盤のロジックのみを提供します。Auth0 APIとの連携を活用しつつ、完全に独自のインターフェイスを構築したい場合にご利用ください。

    <table class="table">
      <thead>
        <tr>
          <th>フック</th>
          <th>説明</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>useDomainTable</code>
          </td>

          <td>データと API レイヤー (取得、作成、検証、削除、関連付け) </td>
        </tr>

        <tr>
          <td>
            <code>useDomainTableLogic</code>
          </td>

          <td>UI のインタラクション状態とハンドラー (モーダル、通知) </td>
        </tr>
      </tbody>
    </table>
  </Tab>

  <Tab title="shadcn">
    ## 設定要件

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      **Auth0 Configuration が必要です**—テナントが
      My Organization API で設定されていることを確認してください。[設定ガイドを表示
      →](/docs/ja-jp/get-started/universal-components/web/components/build-delegated-admin#configure-auth0-dashboard)
    </Callout>

    ## コンポーネントをインストールする

    ```bash wrap lines theme={null}
    npx shadcn@latest add https://auth0-universal-components.vercel.app/r/my-organization/domain-table.json
    ```

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      shadcn コマンドを実行すると、共有ユーティリティと Auth0 との連携に必要な @auth0/universal-components-core
      依存関係もインストールされます。
    </Callout>

    ## はじめに

    ```tsx wrap lines theme={null}
    import { DomainTable } from "@/components/auth0/my-organization/domain-table";

    export function DomainsPage() {
      return <DomainTable />;
    }
    ```

    <Accordion title="連携の完全な例">
      ```tsx wrap lines theme={null}
      import React from "react";
      import { DomainTable } from "@/components/auth0/my-organization/domain-table";
      import { Auth0Provider } from "@auth0/auth0-react";
      import { Auth0ComponentProvider } from "@auth0/universal-components-react/spa";
      import { useNavigate } from "react-router-dom";

      function DomainsManagementPage() {
        const navigate = useNavigate();

        return (
          <div className="max-w-6xl mx-auto p-6">
            <DomainTable
              schema={{
                create: {
                  domain: {
                    regex: /^(?:[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?\.)+[a-z]{2,}$/i,
                    errorMessage: "Please enter a valid domain (e.g., example.com)",
                  },
                },
              }}
              createAction={{
                onBefore: (domain) => {
                  if (!domain.domain.includes(".")) {
                    alert("Please enter a valid domain with a TLD");
                    return false;
                  }
                  return true;
                },
                onAfter: (domain) => console.log("Domain created:", domain),
              }}
              verifyAction={{
                onAfter: (domain) => {
                  console.log("Domain verified:", domain.domain);
                },
              }}
              deleteAction={{
                onBefore: (domain) => {
                  return confirm(`Delete ${domain.domain}?`);
                },
              }}
              onOpenProvider={(provider) => {
                navigate(`/providers/${provider.id}`);
              }}
              onCreateProvider={() => {
                navigate("/providers/create");
              }}
              customMessages={{
                header: {
                  title: "Domain Management",
                  description: "Add and verify domains for your organization",
                  create_button_text: "Add New Domain",
                },
              }}
              styling={{
                variables: {
                  common: { "--font-size-label": "12px" },
                  light: { "--color-primary": "#0066cc" },
                },
                classes: {
                  "DomainTable-header": "shadow-lg rounded-xl",
                },
              }}
            />
          </div>
        );
      }

      export default function App() {
        const domain = "your-domain.auth0.com";

        return (
          <Auth0Provider
            domain={domain}
            clientId="your-client-id"
            authorizationParams={{
              redirect_uri: window.location.origin,
            }}
            interactiveErrorHandler="popup" // Universal Login のポップアップでステップアップ認証のチャレンジを処理するために必要
          >
            <Auth0ComponentProvider domain={domain}>
              <DomainsManagementPage />
            </Auth0ComponentProvider>
          </Auth0Provider>
        );
      }

      ```
    </Accordion>

    ## プロップス

    ### 表示関連のプロップス

    表示関連のプロップスは、コンポーネントの動作に影響を与えずに、レンダリング方法を制御します。セクションを非表示にしたり、読み取り専用モードを有効にしたりする場合に使用します。

    <table class="table">
      <thead>
        <tr>
          <th>プロパティ</th>
          <th>型</th>
          <th>説明</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>readOnly</code>
          </td>

          <td>
            <code>boolean</code>
          </td>

          <td>
            すべてのドメイン操作を無効にします。デフォルト: <code>false</code>
          </td>
        </tr>

        <tr>
          <td>
            <code>hideHeader</code>
          </td>

          <td>
            <code>boolean</code>
          </td>

          <td>
            ヘッダーセクションを非表示にします。デフォルト: <code>false</code>
          </td>
        </tr>
      </tbody>
    </table>

    ***

    ### Action のプロップス

    Actionのプロップスは、ユーザー操作を処理し、ユーザーがドメイン操作を実行したときの挙動を定義します。ライフサイクルフック (`onBefore`、`onAfter`) を使用すると、アプリケーションのルーティングや分析と連携できます。

    <table class="table">
      <thead>
        <tr>
          <th>プロパティ</th>
          <th>型</th>
          <th>説明</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>createAction</code>
          </td>

          <td>
            <code>ComponentAction\<Domain></code>
          </td>

          <td>
            ドメイン作成 Action。
          </td>
        </tr>

        <tr>
          <td>
            <code>verifyAction</code>
          </td>

          <td>
            <code>ComponentAction\<Domain></code>
          </td>

          <td>
            ドメイン検証 Action。
          </td>
        </tr>

        <tr>
          <td>
            <code>deleteAction</code>
          </td>

          <td>
            <code>ComponentAction\<Domain></code>
          </td>

          <td>
            ドメイン削除 Action。
          </td>
        </tr>

        <tr>
          <td>
            <code>associateToProviderAction</code>
          </td>

          <td>
            <code>ComponentAction\<Domain, IdentityProvider></code>
          </td>

          <td>
            ドメインをProviderに関連付ける Action。
          </td>
        </tr>

        <tr>
          <td>
            <code>deleteFromProviderAction</code>
          </td>

          <td>
            <code>ComponentAction\<Domain, IdentityProvider></code>
          </td>

          <td>
            Providerからドメインを削除する Action。
          </td>
        </tr>

        <tr>
          <td>
            <code>onOpenProvider</code>
          </td>

          <td>
            <code>(provider: IdentityProvider) => void</code>
          </td>

          <td>
            設定モーダルからProviderに移動する。
          </td>
        </tr>

        <tr>
          <td>
            <code>onCreateProvider</code>
          </td>

          <td>
            <code>() => void</code>
          </td>

          <td>
            Provider作成フローに移動する。
          </td>
        </tr>
      </tbody>
    </table>

    **createAction**

    **型:** `ComponentAction<Domain>`

    ドメイン作成フローを制御します。新しいドメインが追加されたタイミングを追跡するには、`onAfter`を使用します。

    **プロパティ:**

    * `disabled`—"Add Domain" ボタンを無効にします
    * `onBefore(domain)`—ドメインの作成前に実行されます。作成を中止するには `false` を返します (たとえば、ドメインの形式が無効な場合) 。
    * `onAfter(domain)`—ドメインが正常に作成された後に実行されます。通知の表示やイベントの追跡に使用します。

    **例:**

    ```tsx wrap lines theme={null}
    <DomainTable
      createAction={{
        onBefore: (domain) => {
          // ドメインの形式を検証
          if (!domain.domain.includes(".")) {
            alert("Please enter a valid domain");
            return false;
          }
          return true;
        },
        onAfter: (domain) => {
          analytics.track("Domain Created", { domain: domain.domain });
        },
      }}
    />
    ```

    ***

    **verifyAction**

    **型：** `ComponentAction<Domain>`

    ドメイン検証のフローを制御します。ドメイン検証では、DNSのTXTレコードによって所有権を証明します。

    **プロパティ:**

    * `disabled`—検証ボタンを無効にします
    * `onBefore(domain)`—検証を試みる前に実行されます。検証を中止するには `false` を返します (例: DNS が設定されていることを確認する場合) 。
    * `onAfter(domain)`—ドメインの検証が成功した後に実行されます。成功通知を表示するために使用します。

    **例:**

    ```tsx wrap lines theme={null}
    <DomainTable
      verifyAction={{
        onBefore: (domain) => {
          return confirm(
            `Verify ${domain.domain}? Make sure your DNS record is configured.`,
          );
        },
        onAfter: (domain) => {
          toast.success(`${domain.domain} verified successfully!`);
        },
      }}
    />
    ```

    ***

    **deleteAction**

    **型:** `ComponentAction<Domain>`

    ドメインの削除を制御します。破壊的な操作のため、`onBefore` で確認を行うことを推奨します。

    **プロパティ:**

    * `disabled`—削除ボタンを無効にします
    * `onBefore(domain)`—削除前に実行されます。`false` を返すと削除を中止します (確認ダイアログでの使用を推奨) 。
    * `onAfter(domain)`—ドメインが正常に削除された後に実行されます。イベントの追跡や通知の表示に使用します。

    **例:**

    ```tsx wrap lines theme={null}
    <DomainTable
      deleteAction={{
        onBefore: (domain) => {
          return confirm(`Delete ${domain.domain}? This cannot be undone.`);
        },
        onAfter: (domain) => {
          analytics.track("Domain Deleted", { domain: domain.domain });
        },
      }}
    />
    ```

    ***

    **associateToProviderAction**

    **型:** `ComponentAction<Domain, IdentityProvider>`

    検証済みドメインとSSOプロバイダーの関連付けを制御します。関連付けられるのは検証済みドメインのみです。

    **プロパティ:**

    * `disabled`—関連付けアクションを無効にします
    * `onBefore(domain, provider)`—関連付けの前に実行されます。関連付けを中止するには、`false`を返します。
    * `onAfter(domain, provider)`—ドメインがProviderに正常に関連付けられた後に実行されます。

    **例:**

    ```tsx wrap lines theme={null}
    <DomainTable
      associateToProviderAction={{
        onAfter: (domain, provider) => {
          console.log(`Associated ${domain.domain} with ${provider.name}`);
        },
      }}
    />
    ```

    ***

    **deleteFromProviderAction**

    **型:** `ComponentAction<Domain, IdentityProvider>`

    ドメインとSSOプロバイダーの関連付けの解除を制御します。

    **プロパティ:**

    * `disabled`—関連付け解除操作を無効にします
    * `onBefore(domain, provider)`—削除前に実行されます。削除を中止するには `false` を返します。
    * `onAfter(domain, provider)`—ドメインがプロバイダーから正常に削除された後に実行されます。

    ***

    **onOpenProvider / onCreateProvider**

    **型:** `(provider: IdentityProvider) => void` / `() => void`

    ドメイン設定モーダルのナビゲーションハンドラーです。ユーザーがドメインのプロバイダー関連付けを設定する場合は、以下のとおりです。

    * `onOpenProvider`—ユーザーが既存のProviderをクリックして表示または編集する際に呼び出されます
    * `onCreateProvider`—ユーザーがクリックして新しいProviderを作成する際に呼び出されます

    **例:**

    ```tsx wrap lines theme={null}
    <DomainTable
      onOpenProvider={(provider) => {
        navigate(`/providers/${provider.id}`);
      }}
      onCreateProvider={() => {
        navigate("/providers/create");
      }}
    />
    ```

    ***

    ### カスタマイズ用プロップス

    カスタマイズ用のプロップスを使えば、ソースコードを変更せずに、ブランド、ロケール、バリデーションの要件に合わせてコンポーネントを調整できます。

    <table class="table">
      <thead>
        <tr>
          <th>プロパティ</th>
          <th>型</th>
          <th>説明</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>schema</code>
          </td>

          <td>
            <code>DomainTableSchema</code>
          </td>

          <td>
            ドメイン URL のバリデーションルール。
          </td>
        </tr>

        <tr>
          <td>
            <code>customMessages</code>
          </td>

          <td>
            <code>Partial\<DomainTableMainMessages></code>
          </td>

          <td>
            i18n テキストの上書き。
          </td>
        </tr>

        <tr>
          <td>
            <code>styling</code>
          </td>

          <td>
            <code>ComponentStyling</code>
          </td>

          <td>
            CSS 変数およびクラスの上書き。
          </td>
        </tr>
      </tbody>
    </table>

    **スキーマ**

    ドメインURLの入力にカスタムのバリデーションルールを設定します。

    <Accordion title="利用可能なスキーマフィールド">
      **create.domainUrl**—Domain URLのバリデーション—`regex`—カスタム正規表現パターン

      * `errorMessage`—カスタムエラーメッセージ
    </Accordion>

    ```tsx wrap lines theme={null}
    <DomainTable
      schema={{
        create: {
          domain: {
            regex: /^[a-z0-9.-]+\.[a-z]{2,}$/,
            errorMessage: "Enter a valid domain (example.com)",
          },
        },
      }}
    />
    ```

    ***

    **customMessages**

    すべてのテキストと翻訳をカスタマイズできます。すべてのフィールドは任意で、指定しない場合はデフォルト値が使用されます。

    <Accordion title="利用可能なメッセージ">
      **header**—コンポーネントのヘッダー

      * `title`, `description`, `create_button_text`

      **table**—テーブル表示

      * `empty_message`
      * `columns.domain`, `columns.status`
      * `actions.configure_button_text`, `actions.verify_button_text`, `actions.delete_button_text`

      **create.modal**—ドメイン作成モーダル

      * `title`
      * `field.label`, `field.placeholder`, `field.error`
      * `actions.cancel_button_text`, `actions.create_button_text`

      **verify.modal**—ドメイン検証モーダル

      * `title`
      * `txt_record_name.label`, `txt_record_content.label`, `verification_status.label`
      * `actions.verify_button_text`, `actions.done_button_text`

      **delete.modal**—削除の確認

      * `title`
      * `description.pending`, `description.verified`
      * `actions.cancel_button_text`, `actions.create_button_text`

      **configure.modal**—Providerの設定

      * `title`, `description`
      * `table.empty_message`, `table.columns.name`
      * `actions.close_button_text`

      **notifications**—APIレスポンス

      * `domain_create_success`, `domain_create_error`
      * `domain_verify_success`, `domain_delete_success`
    </Accordion>

    ```tsx wrap lines theme={null}
    <DomainTable
      customMessages={{
        header: {
          title: "Manage Domains",
          description: "Configure and verify organization domains",
          create_button_text: "Add Domain",
        },
        table: {
          empty_message: "No domains yet. Add one to begin.",
        },
        notifications: {
          domain_create_success: "Domain added successfully!",
          domain_verify_success: "Domain verified!",
          domain_delete_success: "Domain removed.",
        },
      }}
    />
    ```

    ***

    **スタイリング**

    CSS変数とクラスのオーバーライドで外観をカスタマイズできます。テーマに応じたスタイリングにも対応しています。

    <Accordion title="利用可能なスタイル設定オプション">
      **変数**—CSS カスタムプロパティ

      * `common`—すべてのテーマに適用されます
      * `light`—ライトテーマにのみ適用されます
      * `dark`—ダークテーマにのみ適用されます

      **クラス**—コンポーネントのクラスのオーバーライド

      * `DomainTable-header`
      * `DomainTable-table`
      * `DomainTable-createModal`
      * `DomainTable-configureModal`
      * `DomainTable-deleteModal`
    </Accordion>

    ```tsx wrap lines theme={null}
    <DomainTable
      styling={{
        variables: {
          common: { "--font-size-title": "1rem" },
          light: { "--color-primary": "#4f46e5" },
        },
        classes: {
          "DomainTable-header": "mb-6",
          "DomainTable-table": "rounded-lg shadow-sm",
        },
      }}
    />
    ```

    ***

    ## 高度なカスタマイズ

    `DomainTable`コンポーネントは、より小さなサブコンポーネントとフックで構成されています。shadcnを使用している場合は、それらを個別にインポートして、独自のカスタムドメインのワークフローを構築できます。

    ### 利用可能なサブコンポーネント

    高度なユースケースでは、個々のサブコンポーネントをインポートして、独自のカスタムドメイン管理インターフェイスを構築できます。特定のモーダルを異なるコンテキストに埋め込みたい場合や、プロップスで対応できる範囲を超えてテーブルのレイアウトをカスタマイズしたい場合に便利です。

    <table class="table">
      <thead>
        <tr>
          <th>コンポーネント</th>
          <th>説明</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>DomainCreateModal</code>
          </td>

          <td>ドメイン作成用のモーダル</td>
        </tr>

        <tr>
          <td>
            <code>DomainVerifyModal</code>
          </td>

          <td>検証フロー用のモーダル</td>
        </tr>

        <tr>
          <td>
            <code>DomainDeleteModal</code>
          </td>

          <td>削除確認用のモーダル</td>
        </tr>

        <tr>
          <td>
            <code>DomainConfigureProvidersModal</code>
          </td>

          <td>プロバイダーの関連付けを管理</td>
        </tr>

        <tr>
          <td>
            <code>DomainTableActionsColumn</code>
          </td>

          <td>各ドメイン行のアクションボタン</td>
        </tr>
      </tbody>
    </table>

    ### 利用可能なHooks

    これらのフックは、UIを含まない基盤となるロジックのみを提供します。Auth0 API連携を活用しつつ、完全に独自のインターフェイスを構築する際にご利用ください。

    <table class="table">
      <thead>
        <tr>
          <th>Hook</th>
          <th>説明</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>useDomainTable</code>
          </td>

          <td>データおよび API レイヤー (取得、作成、検証、削除、関連付け) </td>
        </tr>

        <tr>
          <td>
            <code>useDomainTableLogic</code>
          </td>

          <td>UI 操作の状態とハンドラー (モーダル、通知) </td>
        </tr>
      </tbody>
    </table>
  </Tab>
</Tabs>