@godxjp/ui 31.31.8 → 32.0.0

package/docs/data-entry/select.tsx

@@ -1,547 +0,0 @@
-import { useState } from "react";
-
-import {
-  Avatar,
-  AvatarFallback,
-  Badge,
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@godxjp/ui/data-display";
-import {
-  Form,
-  FormField,
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectSeparator,
-  SelectTrigger,
-  SelectValue,
-} from "@godxjp/ui/data-entry";
-import { Button } from "@godxjp/ui/general";
-import { useTranslation } from "@godxjp/ui/i18n";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
-import { X } from "lucide-react";
-
-/**
- * Select — the single-select control. Prefer the data-driven `options` API
- * (handles search, grouping, async); compose sub-parts only for a custom
- * trigger. Never a raw <select>. Composed only from real @godxjp/ui components.
- */
-export default function Demo() {
-  const { t, locale } = useTranslation();
-  const [status, setStatus] = useState("paid");
-  const [currency, setCurrency] = useState("JPY");
-  const [priority, setPriority] = useState("medium");
-  const [priorityMd, setPriorityMd] = useState("medium");
-  const [assignee, setAssignee] = useState("tanaka");
-  const [reviewer, setReviewer] = useState("tanaka");
-  const [reviewerAsync, setReviewerAsync] = useState("tanaka");
-  const [reviewerCustom, setReviewerCustom] = useState("tanaka");
-  const [reviewerLabel, setReviewerLabel] = useState("tanaka");
-  const [prefixed, setPrefixed] = useState("JPY");
-  const [tags, setTags] = useState<string[]>(["至急", "社内便"]);
-  const [labels, setLabels] = useState<string[]>([]);
-  const [created, setCreated] = useState<string[]>([]);
-  // antd `labelInValue`: the record arrives carrying its own label, before any option list loads.
-  const [assignedTo, setAssignedTo] = useState<
-    { value: string; label: React.ReactNode } | undefined
-  >({ value: "52", label: "東京本社" });
-
-  const people = [
-    { value: "tanaka", label: "田中 太郎", sublabel: "tanaka@example.com" },
-    { value: "suzuki", label: "鈴木 花子", sublabel: "suzuki@example.com" },
-    { value: "sato", label: "佐藤 次郎", sublabel: "sato@example.com" },
-  ];
-  const avatarFor = (label: string) => (
-    <Avatar className="size-5">
-      <AvatarFallback>{label.slice(0, 1)}</AvatarFallback>
-    </Avatar>
-  );
-  const peopleWithIcon = people.map((person) => ({ ...person, icon: avatarFor(person.label) }));
-
-  // A real picker fetches + paginates server-side; we simulate latency so the loading state and the
-  // selectedLabel / selectedIcon at-rest behaviour (option not loaded yet) are real.
-  const loadPeople = async ({ query }: { query: string; page: number }) => {
-    await new Promise((resolve) => setTimeout(resolve, 600));
-    const needle = query.trim().toLowerCase();
-    const list = needle
-      ? peopleWithIcon.filter((person) => person.label.toLowerCase().includes(needle))
-      : peopleWithIcon;
-    return { options: list, hasMore: false };
-  };
-
-  // Async loaders can reject (network / 500). A rejected loader is a DISTINCT state from
-  // "no results": the panel shows an error affordance, never a blank surface.
-  const loadFailing = async () => {
-    await new Promise((resolve) => setTimeout(resolve, 500));
-    throw new Error("network error");
-  };
-
-  return (
-    <PageContainer
-      title="Select"
-      subtitle="Single-select · data-driven options, searchable, or compound"
-    >
-      <Flex direction="col" gap="lg">
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Data-driven (options)</CardTitle>
-            <CardDescription>
-              Pass an options array; name= submits the value with the form.
-            </CardDescription>
-          </CardHeader>
-          {/* data-axe-open on the REGION, not the trigger: the data-driven Select renders its own
-              trigger and forwards no `data-*` to it, so the gate resolves the `[role="combobox"]`
-              inside this element and presses that. See docs/FRAME-A11Y-CI.md. */}
-          <CardContent data-axe-open>
-            <FormField id="status" label="状態">
-              <Select
-                id="status"
-                name="status"
-                value={status}
-                onValueChange={setStatus}
-                placeholder="状態を選択"
-                options={[
-                  { value: "draft", label: "下書き" },
-                  { value: "sent", label: "送付済" },
-                  { value: "paid", label: "入金済" },
-                  { value: "overdue", label: "期限超過" },
-                ]}
-              />
-            </FormField>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Searchable + grouped</CardTitle>
-            <CardDescription>
-              showSearch enables client-side filtering; group buckets options.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <FormField id="currency" label="通貨">
-              <Select
-                id="currency"
-                name="currency"
-                value={currency}
-                onValueChange={setCurrency}
-                showSearch
-                searchPlaceholder="通貨を検索..."
-                options={[
-                  { value: "JPY", label: "日本円", group: "アジア" },
-                  { value: "VND", label: "ベトナムドン", group: "アジア" },
-                  { value: "EUR", label: "ユーロ", group: "ヨーロッパ" },
-                  { value: "GBP", label: "英ポンド", group: "ヨーロッパ" },
-                ]}
-              />
-            </FormField>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Searchable + clearable</CardTitle>
-            <CardDescription>
-              With a value set and allowClear (off by default, as in antd), an inline ✕ on the
-              trigger resets the selection without opening the list.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <FormField id="assignee" label="担当者">
-              <Select
-                id="assignee"
-                name="assignee"
-                value={assignee}
-                onValueChange={setAssignee}
-                showSearch
-                allowClear
-                searchPlaceholder="担当者を検索..."
-                placeholder="担当者を選択"
-                options={people}
-              />
-            </FormField>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Option icon · shown on the trigger too</CardTitle>
-            <CardDescription>
-              Give each option an `icon` (avatar / flag / lucide icon). It renders before the label
-              in the list AND on the trigger once selected, with no `renderOption` needed.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <FormField id="reviewer" label="レビュー担当">
-              <Select
-                id="reviewer"
-                name="reviewer"
-                value={reviewer}
-                onValueChange={setReviewer}
-                showSearch
-                searchPlaceholder="担当者を検索..."
-                placeholder="担当者を選択"
-                options={peopleWithIcon}
-              />
-            </FormField>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Async (loadOptions) + selectedIcon</CardTitle>
-            <CardDescription>
-              With `loadOptions` and a preset value, `selectedLabel` + `selectedIcon` show the
-              picked person's name AND avatar on the trigger at rest, before the async list has
-              loaded.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <FormField id="reviewer-async" label="レビュー担当 (async)">
-              <Select
-                id="reviewer-async"
-                name="reviewer_async"
-                value={reviewerAsync}
-                onValueChange={setReviewerAsync}
-                loadOptions={loadPeople}
-                selectedLabel="田中 太郎"
-                selectedIcon={avatarFor("田中 太郎")}
-                searchPlaceholder="担当者を検索..."
-                placeholder="担当者を選択"
-              />
-            </FormField>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Empty options · trigger disabled</CardTitle>
-            <CardDescription>
-              A static `options={[]}` list has nothing to pick, so the trigger disables itself and
-              never opens a blank popover. Provide options (or an async loadOptions) to enable it.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <FormField id="empty-static" label="部門">
-              <Select id="empty-static" name="empty_static" options={[]} placeholder="部門を選択" />
-            </FormField>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Async error state (errorMessage)</CardTitle>
-            <CardDescription>
-              When `loadOptions` rejects, the panel shows a distinct error affordance instead of a
-              blank surface or a misleading “no results”. Override the localized default with
-              `errorMessage`. Open it to see the loading row resolve into the error row.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <FormField id="reviewer-error" label="レビュー担当 (error)">
-              <Select
-                id="reviewer-error"
-                name="reviewer_error"
-                loadOptions={loadFailing}
-                errorMessage="担当者を読み込めませんでした"
-                searchPlaceholder="担当者を検索..."
-                placeholder="担当者を選択"
-              />
-            </FormField>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Custom rows (renderOption)</CardTitle>
-            <CardDescription>
-              `renderOption` (like Ant&apos;s optionRender) draws a fully custom row: avatar + name
-              + email + a status badge. Use a flex ROW (`div className=&quot;flex
-              items-center&quot;`), not a bare `Flex` which defaults to a column.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <FormField id="reviewer-custom" label="レビュー担当 (custom)">
-              <Select
-                id="reviewer-custom"
-                name="reviewer_custom"
-                value={reviewerCustom}
-                onValueChange={setReviewerCustom}
-                showSearch
-                searchPlaceholder="担当者を検索..."
-                placeholder="担当者を選択"
-                options={people}
-                renderOption={(option) => (
-                  <Flex align="center" gap="sm" className="w-full">
-                    {avatarFor(option.label)}
-                    <Flex direction="col" gap="xs" className="min-w-0">
-                      <span className="truncate text-sm font-medium">{option.label}</span>
-                      <span className="text-muted-foreground truncate text-xs">
-                        {option.sublabel}
-                      </span>
-                    </Flex>
-                    <Badge tone="success" className="ms-auto">
-                      VIP
-                    </Badge>
-                  </Flex>
-                )}
-              />
-            </FormField>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>labelRender · custom selected display</CardTitle>
-            <CardDescription>
-              `labelRender` customizes the SELECTED value shown on the trigger: here an avatar +
-              name + a role badge. The placeholder still shows when nothing is selected.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <FormField id="reviewer-label" label="レビュー担当 (labelRender)">
-              <Select
-                id="reviewer-label"
-                name="reviewer_label"
-                value={reviewerLabel}
-                onValueChange={setReviewerLabel}
-                showSearch
-                searchPlaceholder="担当者を検索..."
-                placeholder="担当者を選択"
-                options={people}
-                labelRender={({ label }) => (
-                  <Flex align="center" gap="sm">
-                    {avatarFor(String(label))}
-                    <span className="truncate">{label}</span>
-                    <Badge tone="info" icon={null}>
-                      担当
-                    </Badge>
-                  </Flex>
-                )}
-              />
-            </FormField>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>Compound API (custom trigger)</CardTitle>
-            <CardDescription>
-              Compose sub-parts when the trigger needs custom content. SelectTrigger accepts size
-              &quot;sm&quot; and &quot;md&quot;; &quot;md&quot; is the default and matches Input
-              height in a form, &quot;sm&quot; fits a dense toolbar or table header.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Form>
-              <Flex direction="col" gap="md">
-                <FormField id="priority-md" label="優先度 (size=md)">
-                  <Select value={priorityMd} onValueChange={setPriorityMd}>
-                    <SelectTrigger size="md" id="priority-md" aria-labelledby="priority-md-label">
-                      <SelectValue placeholder="優先度" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="high">高</SelectItem>
-                      <SelectItem value="medium">中</SelectItem>
-                      <SelectItem value="low">低</SelectItem>
-                    </SelectContent>
-                  </Select>
-                </FormField>
-                <FormField id="priority" label="優先度 (size=sm)">
-                  <Select value={priority} onValueChange={setPriority}>
-                    <SelectTrigger size="sm" id="priority" aria-labelledby="priority-label">
-                      <SelectValue placeholder="優先度" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectGroup>
-                        <SelectLabel>標準</SelectLabel>
-                        <SelectItem value="high">高</SelectItem>
-                        <SelectItem value="medium">中</SelectItem>
-                        <SelectItem value="low">低</SelectItem>
-                      </SelectGroup>
-                      <SelectSeparator />
-                      <SelectGroup>
-                        <SelectLabel>追加レベル</SelectLabel>
-                        {Array.from({ length: 24 }, (_, index) => (
-                          <SelectItem key={index} value={`level-${index + 1}`}>
-                            レベル {index + 1}
-                          </SelectItem>
-                        ))}
-                      </SelectGroup>
-                    </SelectContent>
-                  </Select>
-                </FormField>
-              </Flex>
-            </Form>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>複数選択・上限・検索</CardTitle>
-            <CardDescription>
-              最大 3 件を選択。選択行の再クリック・クリア・キーボード操作に対応。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <FormField id="reviewers" label="レビュアー">
-              <Select
-                mode="multiple"
-                name="reviewers[]"
-                defaultValue={["tanaka"]}
-                showSearch
-                maxCount={3}
-                maxTagCount={2}
-                allowClear
-                options={[
-                  { value: "tanaka", label: "田中" },
-                  { value: "sato", label: "佐藤" },
-                  { value: "suzuki", label: "鈴木" },
-                  { value: "ito", label: "伊藤" },
-                ]}
-              />
-            </FormField>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>
-              Ant Design 6 · prefix・suffixIcon・placement・listHeight
-            </CardTitle>
-            <CardDescription>
-              グループは options のネスト（{`{ label, options }`}）でも、行の group
-              でも同じ一覧になります。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <FormField id="prefixed" label="通貨">
-              <Select
-                id="prefixed"
-                name="currency_prefixed"
-                value={prefixed}
-                onValueChange={setPrefixed}
-                prefix={<Badge tone="muted">¥</Badge>}
-                placement="bottomEnd"
-                listHeight={220}
-                options={[
-                  {
-                    label: "アジア",
-                    options: [
-                      { value: "JPY", label: "日本円" },
-                      { value: "VND", label: "ベトナムドン" },
-                    ],
-                  },
-                  {
-                    label: "ヨーロッパ",
-                    options: [{ value: "EUR", label: "ユーロ" }],
-                  },
-                ]}
-              />
-            </FormField>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>mode=&quot;tags&quot; · tokenSeparators・tagRender</CardTitle>
-            <CardDescription>
-              一覧にない値も入力できます。カンマ区切りの貼り付けは一度にまとめて確定します。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <FormField id="tags" label="ラベル">
-              <Select
-                id="tags"
-                name="labels[]"
-                mode="tags"
-                value={tags}
-                onValueChange={setTags}
-                tokenSeparators={[",", "\n"]}
-                maxTagTextLength={6}
-                options={[
-                  { value: "至急", label: "至急" },
-                  { value: "要確認", label: "要確認" },
-                ]}
-                tagRender={({ label, onClose }) => (
-                  <Badge tone="info">
-                    {label}
-                    <Button
-                      variant="ghost"
-                      size="icon-xs"
-                      aria-label={`${String(label)} を外す`}
-                      onClick={onClose}
-                    >
-                      <X aria-hidden="true" />
-                    </Button>
-                  </Badge>
-                )}
-              />
-            </FormField>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>{t("showcase.select.createTitle")}</CardTitle>
-            <CardDescription>{t("showcase.select.createDescription")}</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <FormField
-              id="issue-labels"
-              label={t("showcase.select.createField")}
-              helper={
-                created.length
-                  ? t("showcase.select.createdHelper", {
-                      list: new Intl.ListFormat(locale).format(created),
-                    })
-                  : t("showcase.select.createdNone")
-              }
-            >
-              <Select
-                id="issue-labels"
-                mode="tags"
-                value={labels}
-                onValueChange={setLabels}
-                onCreate={(text) => setCreated((previous) => [...previous, text])}
-                allowCreate={(text) => text.length <= 12}
-                options={[
-                  { value: "bug", label: "Bug" },
-                  { value: "feature", label: "Feature" },
-                  { value: "docs", label: "Docs" },
-                ]}
-              />
-            </FormField>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>labelInValue · 読み込み前でも名前が出る</CardTitle>
-            <CardDescription>
-              値が {`{ value, label }`} を持つので、選択肢がまだ届いていなくても ID
-              ではなく名前を表示できます。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <FormField id="assigned" label="担当拠点">
-              <Select
-                id="assigned"
-                name="office_id"
-                labelInValue
-                value={assignedTo}
-                onValueChange={setAssignedTo}
-                notFoundContent="拠点を読み込み中"
-                options={[]}
-              />
-            </FormField>
-          </CardContent>
-        </Card>
-      </Flex>
-    </PageContainer>
-  );
-}