組織の詳細を編集

名前、表示名、ブランドカラー、ロゴなどの組織の詳細を編集します。

OrganizationDetailsEdit コンポーネントは、組織の詳細を一元的に編集できるインターフェースを提供します。

React

​

セットアップ要件

Auth0 の設定が必要です - テナントで My Organization API が設定されていることを確認してください。セットアップガイドを見る →

​

インストール

pnpm

pnpm add @auth0/universal-components-react

どちらのコマンドを実行しても、共有ユーティリティと Auth0 連携用の依存関係である @auth0/universal-components-core もインストールされます。

​

はじめに

import { OrganizationDetailsEdit } from "@auth0/universal-components-react";
import { useNavigate } from "react-router-dom";

export function OrganizationSettingsPage() {
  const navigate = useNavigate();

  return (
    <OrganizationDetailsEdit
      saveAction={{
        onAfter: () => navigate("/organization"),
      }}
      backButton={{
        onClick: () => navigate("/organization"),
      }}
    />
  );
}

完全な統合例

import React from "react";
import { OrganizationDetailsEdit } 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";
import { analytics } from "./lib/analytics";

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

  const handleSaveSuccess = (org) => {
    analytics.track("Organization Updated", {
      name: org.name,
      displayName: org.display_name,
    });
    navigate("/organization");
  };

  return (
    <div className="max-w-2xl mx-auto p-6">
      <OrganizationDetailsEdit
        schema={{
          details: {
            displayName: {
              required: true,
              maxLength: 100,
            },
            color: {
              regex: /^#[0-9A-Fa-f]{6}$/,
              errorMessage: "Enter a valid hex color",
            },
          },
        }}
        saveAction={{
          onBefore: (org) => {
            return confirm(`Save changes to "${org.display_name}"?`);
          },
          onAfter: handleSaveSuccess,
        }}
        cancelAction={{
          onBefore: () => confirm("Discard unsaved changes?"),
          onAfter: () => navigate("/organization"),
        }}
        backButton={{
          onClick: () => navigate("/organization"),
        }}
        customMessages={{
          header: {
            title: "Organization Settings",
          },
          notifications: {
            save_success: "Settings saved successfully!",
          },
        }}
        styling={{
          variables: {
            common: {
              "--color-primary": "#059669",
            },
          },
          classes: {
            "OrganizationDetailsEdit-form": "shadow-xl rounded-lg",
          },
        }}
      />
    </div>
  );
}

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

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

​

Props

​

必須Props

必須プロパティはコンポーネントの動作に不可欠です。OrganizationDetailsEdit には必須プロパティはありません。現在の組織の詳細は My Organization API から自動的に読み込まれます。

---

​

表示プロパティ

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

Prop	型	説明
readOnly	boolean	すべてのフォーム入力を無効化します。デフォルト: false
hideHeader	boolean	ヘッダー部分を非表示にします。デフォルト: false

---

​

アクションのプロパティ

アクションpropsはユーザー操作を処理し、変更の保存またはキャンセル時の動作を定義します。ライフサイクルフック (onBefore、onAfter) を使用して、アプリケーションのルーティングや分析機能と連携できます。

プロパティ	型	説明
saveAction	ComponentAction<OrganizationPrivate>	変更を保存するアクション。
cancelAction	ComponentAction<OrganizationPrivate>	変更をキャンセルまたは破棄するアクション。
backButton	Object	戻るボタンの設定。

saveAction

Type: ComponentAction<OrganizationPrivate>

ユーザーが組織の変更を送信した際の保存フローを制御します。保存成功後に別の画面へ遷移するには onAfter を使用してください。

プロパティ:

• disabled - 保存ボタンを無効にする (例：別の操作の処理中)
• onBefore(data) - 保存処理の前に実行されます。保存を中止するには false を返します (例: 先に確認ダイアログを表示する場合) 。
• onAfter(data) - 組織の保存が正常に完了した後に実行されます。画面遷移やイベントの追跡に使用できます。

例：

// 保存後に前の画面に戻る
saveAction={{
  onAfter: () => navigate("/organization"),
}}

// 保存前に確認ダイアログを表示する
saveAction={{
  onBefore: (org) => {
    return confirm(`Save changes to "${org.display_name}"?`);
  },
  onAfter: () => navigate("/organization"),
}}

// 保存時にアナリティクスをトラッキングする
saveAction={{
  onAfter: (org) => {
    analytics.track("Organization Updated", {
      name: org.name,
      displayName: org.display_name,
    });
    navigate("/organization");
  },
}}

---

cancelAction

Type: ComponentAction<OrganizationPrivate>

キャンセル/破棄フローを制御します。このアクションを使用して、破棄した変更を管理します。

プロパティ:

• disabled - キャンセルボタンを無効化する
• onBefore(data) - キャンセル操作の前に実行されます。キャンセルを中止するには false を返します (例: 未保存の変更を破棄してよいか確認する場合) 。
• onAfter(data) - キャンセルの確認後に実行されます。フォーム画面から移動するにはこれを使用します。

例：

<OrganizationDetailsEdit
  cancelAction={{
    onBefore: (org) => {
      return confirm("Discard unsaved changes?");
    },
    onAfter: () => navigate("/organization"),
  }}
/>

---

backButton

Type: { icon?: LucideIcon; onClick: (e: MouseEvent) => void }

コンポーネントヘッダーの戻るボタンを設定します。組織の概要または前のページに戻るために使用します。

プロパティ:

• icon - カスタムのLucideアイコンコンポーネント (省略可、デフォルトはArrowLeft)
• onClick - ナビゲーション用のクリックハンドラー

例：

import { ChevronLeft } from "lucide-react";

<OrganizationDetailsEdit
  backButton={{
    icon: ChevronLeft,
    onClick: () => navigate("/organization"),
  }}
/>;

---

​

カスタマイズProps

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

プロパティ	型	説明
schema	OrganizationDetailsEditSchemas	フィールドのバリデーションルール。
customMessages	Partial<OrganizationDetailsEditMessages>	i18n テキストの上書き設定。
styling	ComponentStyling<OrganizationEditClasses>	CSS 変数とクラスの上書き設定。

schema

組織詳細フィールドのカスタムバリデーションルールを設定します。

利用可能なスキーマフィールド

すべてのスキーマフィールドで次をサポートしています: regex, errorMessage, minLength, maxLength, required

details.name - 組織の内部名 details.displayName - 組織の表示名 details.color - ブランドカラー (16進数形式) details.logoURL - ロゴの URL

<OrganizationDetailsEdit
  schema={{
    details: {
      name: {
        minLength: 3,
        maxLength: 50,
        regex: /^[a-zA-Z0-9-_]+$/,
        errorMessage: "Name must be alphanumeric with hyphens/underscores",
      },
      displayName: {
        required: true,
        maxLength: 100,
      },
      color: {
        regex: /^#[0-9A-Fa-f]{6}$/,
        errorMessage: "Enter a valid hex color (e.g., #FF5500)",
      },
      logoURL: {
        regex: /^https:\/\/.+/,
        errorMessage: "Logo URL must use HTTPS",
      },
    },
  }}
/>

---

customMessages

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

利用できるメッセージ

header - コンポーネントのヘッダー

• title, description, back_button_text

form - フォーム項目

• fields.name - label, placeholder, helper_text, error
• fields.display_name - label, placeholder, helper_text, error
• fields.color - label, placeholder, helper_text, error
• fields.logo_url - label, placeholder, helper_text, error

actions - ボタンのラベル

• save_button_text, cancel_button_text

notifications - APIのレスポンス

• save_success, save_error, general_error

<OrganizationDetailsEdit
  customMessages={{
    header: {
      title: "Edit Organization",
      description: "Update your organization's settings",
    },
    form: {
      fields: {
        name: {
          label: "Organization ID",
          helper_text: "Internal identifier (cannot be changed after creation)",
        },
        display_name: {
          label: "Organization Name",
          placeholder: "Enter display name",
        },
      },
    },
    notifications: {
      save_success: "Organization updated successfully!",
    },
  }}
/>

---

styling

CSS変数とクラスの上書きで外観をカスタマイズできます。テーマに合わせたスタイリングにも対応しています。

利用可能なスタイルオプション

変数 - CSS カスタムプロパティ

• common - すべてのテーマに適用
• light - ライトテーマのみ
• dark - ダークテーマのみ

クラス - コンポーネントのクラスの上書き

• OrganizationDetailsEdit-header
• OrganizationDetailsEdit-form
• OrganizationDetailsEdit-actions

<OrganizationDetailsEdit
  styling={{
    variables: {
      common: {
        "--font-size-title": "1.5rem",
      },
      light: {
        "--color-primary": "#059669",
      },
    },
    classes: {
      "OrganizationDetailsEdit-form": "shadow-lg rounded-xl p-6",
    },
  }}
/>

---

​

高度なカスタマイズ

OrganizationDetailsEdit コンポーネントは、複数のサブコンポーネントとフックで構成されています。shadcn を使用している場合は、それらを個別にインポートして、カスタムの組織編集ワークフローを構築できます。

​

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

高度なユースケースでは、個別のサブコンポーネントをインポートして、カスタムの組織編集インターフェースを構築できます。

コンポーネント	説明
OrganizationForm	すべてのフィールドを備えたメインのフォームコンポーネント
ColorPickerField	ブランドカラーを選択するフィールド
LogoUploadField	プレビュー付きのロゴURL入力フィールド

​

利用可能なフック

これらのフックはUIを持たず、基盤となるロジックのみを提供します。Auth0 APIとの連携を活用しながら、完全にカスタムなインターフェースを構築するために使用してください。

フック	説明
useOrganizationDetailsEdit	組織の編集ロジックと API 連携

Next.js

​

セットアップ要件

Auth0 の設定が必要です - テナントで My Organization API が設定されていることを確認してください。設定ガイドを表示 →

​

インストール

npm (Recommended)

npm install @auth0/universal-components-react

npm または pnpm コマンドを実行すると、共有ユーティリティと Auth0 連携に必要な依存関係である @auth0/universal-components-core がインストールされます。

​

はじめに

page.tsx

import { OrganizationDetailsEdit } from "@auth0/universal-components-react";
import { useRouter } from "next/navigation";

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

  return (
    <OrganizationDetailsEdit
      saveAction={{
        onAfter: () => router.push("/organization"),
      }}
      backButton={{
        onClick: () => router.push("/organization"),
      }}
    />
  );
}

完全な統合例

import React from "react";
import { OrganizationDetailsEdit } from "@auth0/universal-components-react";
import { useRouter } from "next/navigation";
import { analytics } from "./lib/analytics";

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

  const handleSaveSuccess = (org) => {
    analytics.track("Organization Updated", {
      name: org.name,
      displayName: org.display_name,
    });
    router.push("/organization");
  };

  return (
    <div className="max-w-2xl mx-auto p-6">
      <OrganizationDetailsEdit
        schema={{
          details: {
            displayName: {
              required: true,
              maxLength: 100,
            },
            color: {
              regex: /^#[0-9A-Fa-f]{6}$/,
              errorMessage: "Enter a valid hex color",
            },
          },
        }}
        saveAction={{
          onBefore: (org) => {
            return confirm(`Save changes to "${org.display_name}"?`);
          },
          onAfter: handleSaveSuccess,
        }}
        cancelAction={{
          onBefore: () => confirm("Discard unsaved changes?"),
          onAfter: () => router.push("/organization"),
        }}
        backButton={{
          onClick: () => router.push("/organization"),
        }}
        customMessages={{
          header: {
            title: "Organization Settings",
          },
          notifications: {
            save_success: "Settings saved successfully!",
          },
        }}
        styling={{
          variables: {
            common: {
              "--color-primary": "#059669",
            },
          },
          classes: {
            "OrganizationDetailsEdit-form": "shadow-xl rounded-lg",
          },
        }}
      />
    </div>
  );
}

export default OrganizationSettingsPage;

​

Props

​

コアプロパティ

コアプロパティはコンポーネントの動作に不可欠です。OrganizationDetailsEdit には必須プロパティはなく、My Organization API から現在の組織の詳細を自動的に読み込みます。

---

​

表示プロパティ

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

プロパティ	型	説明
readOnly	boolean	すべてのフォーム入力を無効にします。デフォルト値: false
hideHeader	boolean	ヘッダー部分を非表示にします。デフォルト値: false

---

​

アクションのプロパティ

アクションpropsはユーザー操作を処理し、変更の保存またはキャンセル時の動作を定義します。ライフサイクルフック (onBefore、onAfter) を使用して、アプリケーションのルーティングや分析機能と連携できます。

プロパティ	型	説明
saveAction	ComponentAction<OrganizationPrivate>	変更を保存するアクション。
cancelAction	ComponentAction<OrganizationPrivate>	変更をキャンセルまたは破棄するアクション。
backButton	Object	戻るボタンの設定。

saveAction

Type: ComponentAction<OrganizationPrivate>

ユーザーが組織の変更を送信した際の保存フローを制御します。保存成功後に別の画面へ遷移するには onAfter を使用してください。

プロパティ:

• disabled - 保存ボタンを無効にする (例：別の操作の処理中)
• onBefore(data) - 保存処理の前に実行されます。保存を中止するには false を返します (例: 先に確認ダイアログを表示する場合) 。
• onAfter(data) - 組織の保存が正常に完了した後に実行されます。画面遷移やイベントの追跡に使用できます。

よくあるパターン：

// 保存後に前の画面に戻る
saveAction={{
  onAfter: () => router.push("/organization"),
}}

// 保存前に確認ダイアログを表示する
saveAction={{
  onBefore: (org) => {
    return confirm(`Save changes to "${org.display_name}"?`);
  },
  onAfter: () => router.push("/organization"),
}}

// 保存時にアナリティクスを記録する
saveAction={{
  onAfter: (org) => {
    analytics.track("Organization Updated", {
      name: org.name,
      displayName: org.display_name,
    });
    router.push("/organization");
  },
}}

---

cancelAction

Type: ComponentAction<OrganizationPrivate>

キャンセル/破棄フローを制御します。このアクションを使用して、破棄した変更を管理します。

プロパティ:

• disabled - キャンセルボタンを無効にする
• onBefore(data) - キャンセル操作の前に実行されます。キャンセルを中止するには false を返します (例: 未保存の変更を破棄してよいか確認する場合) 。
• onAfter(data) - キャンセルが確認された後に実行されます。フォームから離れる際の画面遷移に使用します。

例：

<OrganizationDetailsEdit
  cancelAction={{
    onBefore: (org) => {
      return confirm("Discard unsaved changes?");
    },
    onAfter: () => router.push("/organization"),
  }}
/>

---

backButton

Type: { icon?: LucideIcon; onClick: (e: MouseEvent) => void }

コンポーネントヘッダーの戻るボタンを設定します。組織の概要または前のページに戻るために使用します。

プロパティ:

• icon - カスタムのLucideアイコンコンポーネント (省略可、デフォルトはArrowLeft)
• onClick - ナビゲーション用のクリックハンドラー

例：

import { ChevronLeft } from "lucide-react";

<OrganizationDetailsEdit
  backButton={{
    icon: ChevronLeft,
    onClick: () => router.push("/organization"),
  }}
/>;

---

​

カスタマイズProps

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

プロパティ	型	説明
schema	OrganizationDetailsEditSchemas	フィールドのバリデーションルール。
customMessages	Partial<OrganizationDetailsEditMessages>	i18n テキストの上書き設定。
styling	ComponentStyling<OrganizationEditClasses>	CSS 変数とクラスの上書き設定。

schema

組織詳細フィールドのカスタムバリデーションルールを設定します。

利用可能なスキーマフィールド

すべてのスキーマフィールドで次をサポートしています: regex, errorMessage, minLength, maxLength, required

details.name - 組織の内部名 details.displayName - 組織の表示名 details.color - ブランドカラー (16進数形式) details.logoURL - ロゴの URL

<OrganizationDetailsEdit
  schema={{
    details: {
      name: {
        minLength: 3,
        maxLength: 50,
        regex: /^[a-zA-Z0-9-_]+$/,
        errorMessage: "Name must be alphanumeric with hyphens/underscores",
      },
      displayName: {
        required: true,
        maxLength: 100,
      },
      color: {
        regex: /^#[0-9A-Fa-f]{6}$/,
        errorMessage: "Enter a valid hex color (e.g., #FF5500)",
      },
      logoURL: {
        regex: /^https:\/\/.+/,
        errorMessage: "Logo URL must use HTTPS",
      },
    },
  }}
/>

---

customMessages

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

利用可能なメッセージ

header - コンポーネントのヘッダー

• title, description, back_button_text

form - フォーム項目

• fields.name - label, placeholder, helper_text, error
• fields.display_name - label, placeholder, helper_text, error
• fields.color - label, placeholder, helper_text, error
• fields.logo_url - label, placeholder, helper_text, error

actions - ボタンのラベル

• save_button_text, cancel_button_text

notifications - APIのレスポンス

• save_success, save_error, general_error

<OrganizationDetailsEdit
  customMessages={{
    header: {
      title: "Edit Organization",
      description: "Update your organization's settings",
    },
    form: {
      fields: {
        name: {
          label: "Organization ID",
          helper_text: "Internal identifier (cannot be changed after creation)",
        },
        display_name: {
          label: "Organization Name",
          placeholder: "Enter display name",
        },
      },
    },
    notifications: {
      save_success: "Organization updated successfully!",
    },
  }}
/>

---

styling

CSS変数とクラスの上書きで外観をカスタマイズできます。テーマに合わせたスタイリングにも対応しています。

利用可能なスタイルオプション

変数 - CSS のカスタムプロパティ

• common - すべてのテーマに適用
• light - ライトテーマのみ
• dark - ダークテーマのみ

クラス - コンポーネントクラスの上書き

• OrganizationDetailsEdit-header
• OrganizationDetailsEdit-form
• OrganizationDetailsEdit-actions

<OrganizationDetailsEdit
  styling={{
    variables: {
      common: {
        "--font-size-title": "1.5rem",
      },
      light: {
        "--color-primary": "#059669",
      },
    },
    classes: {
      "OrganizationDetailsEdit-form": "shadow-lg rounded-xl p-6",
    },
  }}
/>

---

​

高度なカスタマイズ

OrganizationDetailsEdit コンポーネントは、複数のサブコンポーネントとフックで構成されています。これらを個別にインポートすることで、カスタムの組織編集ワークフローを構築できます。

​

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

高度なユースケースでは、個別のサブコンポーネントをインポートして、カスタムの組織編集インターフェースを構築できます。

コンポーネント	説明
OrganizationForm	すべてのフィールドを備えたメインのフォームコンポーネント
ColorPickerField	ブランドカラーを選択するフィールド
LogoUploadField	プレビュー付きのロゴURL入力フィールド

​

利用可能なフック

これらのフックはUIを持たず、基盤となるロジックのみを提供します。Auth0 APIとの連携を活用しながら、完全にカスタムなインターフェースを構築するために使用してください。

フック	説明
useOrganizationDetailsEdit	組織の編集ロジックと API 連携

shadcn

​

セットアップ要件

Auth0 の設定が必要です - テナントで My Organization API が設定されていることを確認してください。設定ガイドを表示 →

​

インストール

npx shadcn@latest add https://auth0-universal-components.vercel.app/r/my-organization/organization-details-edit.json

shadcn コマンドを実行すると、共有ユーティリティや Auth0 との統合に必要な依存関係である @auth0/universal-components-core もインストールされます。

​

はじめに

import { OrganizationDetailsEdit } from "@/components/auth0/my-organization/organization-details-edit";

export function OrganizationSettingsPage() {
  const navigate = useNavigate();

  return (
    <OrganizationDetailsEdit
      saveAction={{
        onAfter: () => navigate("/organization"),
      }}
      backButton={{
        onClick: () => navigate("/organization"),
      }}
    />
  );
}

完全な統合例

import React from "react";
import { OrganizationDetailsEdit } from "@/components/auth0/my-organization/organization-details-edit";
import { Auth0Provider } from "@auth0/auth0-react";
import { Auth0ComponentProvider } from "@auth0/universal-components-react/spa";
import { useNavigate } from "react-router-dom";
import { analytics } from "./lib/analytics";

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

  const handleSaveSuccess = (org) => {
    analytics.track("Organization Updated", {
      name: org.name,
      displayName: org.display_name,
    });
    navigate("/organization");
  };

  return (
    <div className="max-w-2xl mx-auto p-6">
      <OrganizationDetailsEdit
        schema={{
          details: {
            displayName: {
              required: true,
              maxLength: 100,
            },
            color: {
              regex: /^#[0-9A-Fa-f]{6}$/,
              errorMessage: "Enter a valid hex color",
            },
          },
        }}
        saveAction={{
          onBefore: (org) => {
            return confirm(`Save changes to "${org.display_name}"?`);
          },
          onAfter: handleSaveSuccess,
        }}
        cancelAction={{
          onBefore: () => confirm("Discard unsaved changes?"),
          onAfter: () => navigate("/organization"),
        }}
        backButton={{
          onClick: () => navigate("/organization"),
        }}
        customMessages={{
          header: {
            title: "Organization Settings",
          },
          notifications: {
            save_success: "Settings saved successfully!",
          },
        }}
        styling={{
          variables: {
            common: {
              "--color-primary": "#059669",
            },
          },
          classes: {
            "OrganizationDetailsEdit-form": "shadow-xl rounded-lg",
          },
        }}
      />
    </div>
  );
}

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

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

​

Props

​

コアプロパティ

コアプロパティはコンポーネントの動作に不可欠です。OrganizationDetailsEdit には必須プロパティはなく、My Organization API から現在の組織の詳細を自動的に読み込みます。

---

​

表示プロパティ

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

プロパティ	型	説明
readOnly	boolean	すべてのフォーム入力を無効化します。デフォルト: false
hideHeader	boolean	ヘッダー部分を非表示にします。デフォルト: false

---

​

アクションのプロパティ

アクションpropsはユーザー操作を処理し、変更の保存またはキャンセル時の動作を定義します。ライフサイクルフック (onBefore、onAfter) を使用して、アプリケーションのルーティングや分析機能と連携できます。

プロパティ	型	説明
saveAction	ComponentAction<OrganizationPrivate>	変更を保存するアクション。
cancelAction	ComponentAction<OrganizationPrivate>	変更をキャンセルまたは破棄するアクション。
backButton	Object	戻るボタンの設定。

saveAction

Type: ComponentAction<OrganizationPrivate>

ユーザーが組織の変更を送信した際の保存フローを制御します。保存成功後に別の画面へ遷移するには onAfter を使用してください。

プロパティ:

• disabled - 保存ボタンを無効にする (例：別の操作の処理中)
• onBefore(data) - 保存処理の前に実行されます。保存を中止するには false を返します (例: 先に確認ダイアログを表示する場合) 。
• onAfter(data) - 組織の保存が正常に完了した後に実行されます。画面遷移やイベントの追跡に使用できます。

よくあるパターン：

// 保存後に前の画面に戻る
saveAction={{
  onAfter: () => navigate("/organization"),
}}

// 保存前に確認ダイアログを表示する
saveAction={{
  onBefore: (org) => {
    return confirm(`Save changes to "${org.display_name}"?`);
  },
  onAfter: () => navigate("/organization"),
}}

// 保存時にアナリティクスをトラッキングする
saveAction={{
  onAfter: (org) => {
    analytics.track("Organization Updated", {
      name: org.name,
      displayName: org.display_name,
    });
    navigate("/organization");
  },
}}

---

cancelAction

Type: ComponentAction<OrganizationPrivate>

キャンセル/破棄フローを制御します。このアクションを使用して、破棄した変更を管理します。

プロパティ:

• disabled - キャンセルボタンを無効化する
• onBefore(data) - キャンセル操作の前に実行されます。キャンセルを中止するには false を返します (例: 未保存の変更を破棄してよいか確認する場合) 。
• onAfter(data) - キャンセルの確認後に実行されます。フォーム画面から移動するにはこれを使用します。

例：

<OrganizationDetailsEdit
  cancelAction={{
    onBefore: (org) => {
      return confirm("Discard unsaved changes?");
    },
    onAfter: () => navigate("/organization"),
  }}
/>

---

backButton

Type: { icon?: LucideIcon; onClick: (e: MouseEvent) => void }

コンポーネントヘッダーの戻るボタンを設定します。組織の概要または前のページに戻るために使用します。

プロパティ:

• icon - カスタムのLucideアイコンコンポーネント (省略可、デフォルトはArrowLeft)
• onClick - ナビゲーション用のクリックハンドラー

例：

import { ChevronLeft } from "lucide-react";

<OrganizationDetailsEdit
  backButton={{
    icon: ChevronLeft,
    onClick: () => navigate("/organization"),
  }}
/>;

---

​

カスタマイズProps

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

プロパティ	型	説明
schema	OrganizationDetailsEditSchemas	フィールドのバリデーションルール。
customMessages	Partial<OrganizationDetailsEditMessages>	i18n テキストの上書き設定。
styling	ComponentStyling<OrganizationEditClasses>	CSS 変数とクラスの上書き設定。

schema

組織詳細フィールドのカスタムバリデーションルールを設定します。

利用可能なスキーマフィールド

すべてのスキーマフィールドで次をサポートしています: regex, errorMessage, minLength, maxLength, required

details.name - 組織の内部名 details.displayName - 組織の表示名 details.color - ブランドカラー (16進数形式) details.logoURL - ロゴの URL

<OrganizationDetailsEdit
  schema={{
    details: {
      name: {
        minLength: 3,
        maxLength: 50,
        regex: /^[a-zA-Z0-9-_]+$/,
        errorMessage: "Name must be alphanumeric with hyphens/underscores",
      },
      displayName: {
        required: true,
        maxLength: 100,
      },
      color: {
        regex: /^#[0-9A-Fa-f]{6}$/,
        errorMessage: "Enter a valid hex color (e.g., #FF5500)",
      },
      logoURL: {
        regex: /^https:\/\/.+/,
        errorMessage: "Logo URL must use HTTPS",
      },
    },
  }}
/>

---

customMessages

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

利用可能なメッセージ

header - コンポーネントのヘッダー

• title, description, back_button_text

form - フォーム項目

• fields.name - label, placeholder, helper_text, error
• fields.display_name - label, placeholder, helper_text, error
• fields.color - label, placeholder, helper_text, error
• fields.logo_url - label, placeholder, helper_text, error

actions - ボタンのラベル

• save_button_text, cancel_button_text

notifications - APIのレスポンス

• save_success, save_error, general_error

<OrganizationDetailsEdit
  customMessages={{
    header: {
      title: "Edit Organization",
      description: "Update your organization's settings",
    },
    form: {
      fields: {
        name: {
          label: "Organization ID",
          helper_text: "Internal identifier (cannot be changed after creation)",
        },
        display_name: {
          label: "Organization Name",
          placeholder: "Enter display name",
        },
      },
    },
    notifications: {
      save_success: "Organization updated successfully!",
    },
  }}
/>

---

styling

CSS変数とクラスの上書きで外観をカスタマイズできます。テーマに合わせたスタイリングにも対応しています。

利用可能なスタイルオプション

変数 - CSS のカスタムプロパティ

• common - すべてのテーマに適用
• light - ライトテーマのみ
• dark - ダークテーマのみ

クラス - コンポーネントクラスの上書き

• OrganizationDetailsEdit-header
• OrganizationDetailsEdit-form
• OrganizationDetailsEdit-actions

<OrganizationDetailsEdit
  styling={{
    variables: {
      common: {
        "--font-size-title": "1.5rem",
      },
      light: {
        "--color-primary": "#059669",
      },
    },
    classes: {
      "OrganizationDetailsEdit-form": "shadow-lg rounded-xl p-6",
    },
  }}
/>

---

​

高度なカスタマイズ

OrganizationDetailsEdit コンポーネントは、複数のサブコンポーネントとフックで構成されています。shadcn を使用している場合は、それらを個別にインポートして、カスタムの組織編集ワークフローを構築できます。

​

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

高度なユースケースでは、個別のサブコンポーネントをインポートして、カスタムの組織編集インターフェースを構築できます。

コンポーネント	説明
OrganizationForm	すべてのフィールドを備えたメインのフォームコンポーネント
ColorPickerField	ブランドカラーを選択するためのカラーピッカー
LogoUploadField	ロゴのアップロードと管理を行うフィールド

​

利用可能なフック

これらのフックはUIを持たず、基盤となるロジックのみを提供します。Auth0 APIとの連携を活用しながら、完全にカスタムなインターフェースを構築するために使用してください。

フック	説明
useOrganizationDetailsEdit	組織データの取得・編集ロジック
useOrganizationDetailsEditLogic	フォームの状態管理とアクションハンドラー