@blocklet/payment-react/docs/components-ui-form-elements-country-select.ja.md

Reusable react components for payment kit v2

# CountrySelect

`CountrySelect`コンポーネントは、国を選択するための使いやすいドロップダウンを提供します。検索可能なリスト、国旗の表示、デスクトップとモバイルの両方のビューポートに適応するレスポンシブデザインが特徴です。`react-hook-form`で管理されるフォーム内での使用を想定して設計されています。

## Props

| Prop         | Type                             | 説明                                                                                | 必須 | デフォルト |
|--------------|----------------------------------|---------------------------------------------------------------------------------------------|----------|---------|
| `value`      | `CountryIso2`                    | 選択された国のISO2コード（例：「us」）。                                         | はい      |         |
| `onChange`   | `(value: CountryIso2) => void`   | 国が選択されたときに呼び出されるコールバック関数。                             | はい      |         |
| `name`       | `string`                         | 入力のname属性で、`react-hook-form`との統合に使用されます。              | はい      |         |
| `sx`         | `SxProps`                        | ルート要素に適用されるカスタムスタイル。                                            | いいえ      | `{}`    |
| `showDialCode` | `boolean`                        | `true`の場合、国のダイヤルコードがリストの名前の横に表示されます。        | いいえ      | `false` |

## 基本的な使用法

`CountrySelect`コンポーネントを使用するには、`react-hook-form`の`FormProvider`でラップする必要があります。コンポーネントの状態はフォームコンテキストを介して管理されます。

```tsx Basic CountrySelect Example icon=logos:react
import { FormProvider, useForm } from 'react-hook-form';
import { Box, Button, Typography } from '@mui/material';
import CountrySelect from '@blocklet/payment-react/src/components/country-select'; // 必要に応じてパスを調整
import type { CountryIso2 } from 'react-international-phone';

export default function BasicCountrySelect() {
  const methods = useForm<{ country: CountryIso2 }>({
    defaultValues: {
      country: 'us',
    },
  });

  const { handleSubmit, watch, setValue } = methods;
  const countryValue = watch('country'); // 変更を監視して制御されたコンポーネントを更新

  const onSubmit = (data: { country: CountryIso2 }) => {
    alert(`国: ${data.country} でフォームが送信されました`);
  };

  return (
    <FormProvider {...methods}>
      <form onSubmit={handleSubmit(onSubmit)}>
        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, maxWidth: 400 }}>
          <Typography variant="h6">国を選択してください</Typography>
          <CountrySelect
            name="country"
            value={countryValue}
            onChange={(newCountry) => {
              setValue('country', newCountry, { shouldValidate: true });
            }}
          />
          <Button type="submit" variant="contained">
            送信
          </Button>
          <Typography>
            現在のフォーム値: {countryValue}
          </Typography>
        </Box>
      </form>
    </FormProvider>
  );
}
```

## 機能

### 検索とフィルタリング
コンポーネントにはドロップダウンリストの上部に検索バーがあり、ユーザーは国名、ISO2コード、またはダイヤルコードで国をすばやく見つけることができます。例えば、「+1」を検索すると、アメリカ合衆国とカナダが表示されます。

### レスポンシブUI
デスクトップデバイスでは、`CountrySelect`は標準のドロップダウンメニューとして表示されます。モバイルデバイスでは、画面下部からスライドアップする全幅のダイアログに変わり、小さなデバイスでも最適化されたユーザーエクスペリエンスを提供します。

### キーボードアクセシビリティ
`CountrySelect`は完全なキーボードナビゲーションをサポートしています。ユーザーは`ArrowUp`キーと`ArrowDown`キーでリストを移動し、`Enter`キーで国を選択し、`Escape`キーでドロップダウンを閉じることができます。`Tab`キーと`Shift+Tab`キーでもリスト項目を順に移動できます。

### フォーム統合
`react-hook-form`とシームレスに連携するように設計されています。選択が行われるとフォームの状態が自動的に更新されるため、`FormProvider`でラップする必要があります。

## 高度な使用法

### ダイヤルコードの表示

`showDialCode`プロパティを`true`に設定すると、リスト内の各国の電話ダイヤルコードを表示できます。

```tsx CountrySelect with Dial Code icon=logos:react
import { FormProvider, useForm } from 'react-hook-form';
import { Box, Button } from '@mui/material';
import CountrySelect from '@blocklet/payment-react/src/components/country-select'; // 必要に応じてパスを調整
import type { CountryIso2 } from 'react-international-phone';

export default function CountrySelectWithDialCode() {
  const methods = useForm<{ country: CountryIso2 }>({
    defaultValues: {
      country: 'gb',
    },
  });

  const { handleSubmit, watch, setValue } = methods;
  const countryValue = watch('country');

  const onSubmit = (data: { country: CountryIso2 }) => {
    alert(`国: ${data.country} でフォームが送信されました`);
  };

  return (
    <FormProvider {...methods}>
      <form onSubmit={handleSubmit(onSubmit)}>
        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, maxWidth: 400 }}>
          <CountrySelect
            name="country"
            value={countryValue}
            onChange={(newCountry) => setValue('country', newCountry)}
            showDialCode={true}
          />
          <Button type="submit" variant="contained">
            送信
          </Button>
        </Box>
      </form>
    </FormProvider>
  );
}
```

## 次のステップ

このコンポーネントは、より複雑なフォーム要素の構成要素です。完全な国際電話番号フィールドを作成するために、[PhoneInput](./components-ui-form-elements-phone-input.md)コンポーネントにどのように統合されているかを参照してください。