@godxjp/ui 19.1.0 → 19.2.0

package/docs/data-entry/search-input.tsx

@@ -0,0 +1,120 @@
+import { useState } from "react";
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
+import { SearchInput } from "@godxjp/ui/data-entry";
+import { Text } from "@godxjp/ui/general";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+
+/**
+ * SearchInput — debounced search box with a built-in clear button.
+ * Always listen to onSearch (NOT onChange). Uncontrolled for local filters,
+ * controlled when search state lives in a URL param. Never a raw <input>.
+ * Composed only from real @godxjp/ui components.
+ */
+export default function Demo() {
+  const [journalQuery, setJournalQuery] = useState("");
+  const [partnerQuery, setPartnerQuery] = useState("");
+
+  const journals = [
+    { id: "JE-0001", desc: "売上計上 · 株式会社山田商事" },
+    { id: "JE-0002", desc: "仕入計上 · 有限会社田中工業" },
+    { id: "JE-0003", desc: "経費精算 · 交通費" },
+    { id: "JE-0004", desc: "売上計上 · ABC株式会社" },
+    { id: "JE-0005", desc: "給与支払 · 2024年3月分" },
+  ];
+
+  const filtered = journals.filter(
+    (j) =>
+      j.id.toLowerCase().includes(journalQuery.toLowerCase()) ||
+      j.desc.toLowerCase().includes(journalQuery.toLowerCase()),
+  );
+
+  return (
+    <PageContainer
+      title="SearchInput"
+      subtitle="デバウンス付き検索ボックス · onSearch でフィルタリングを駆動する"
+    >
+      <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>仕訳一覧フィルター（制御モード）</CardTitle>
+            <CardDescription>
+              value + onValueChange で即時制御（入力に追従）。onSearch は 250 ms
+              デバウンス後に発火。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <SearchInput
+                placeholder="仕訳ID・摘要で検索"
+                value={journalQuery}
+                onValueChange={setJournalQuery}
+                onSearch={() => {}}
+              />
+              <Flex direction="col" gap="sm">
+                {filtered.length === 0 ? (
+                  <Text as="p" tone="muted">
+                    該当なし
+                  </Text>
+                ) : (
+                  filtered.map((j) => (
+                    <Text as="p" key={j.id}>
+                      <Text tone="muted" mono>
+                        {j.id}
+                      </Text>{" "}
+                      {j.desc}
+                    </Text>
+                  ))
+                )}
+              </Flex>
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>取引先検索（非制御モード）</CardTitle>
+            <CardDescription>
+              defaultValue のみ渡して非制御。ローカルフィルターに適す。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <SearchInput
+                placeholder="取引先名で検索"
+                defaultValue=""
+                onSearch={setPartnerQuery}
+                debounce={300}
+              />
+              {partnerQuery && (
+                <Text as="p" tone="muted">
+                  検索中:{" "}
+                  <Text as="strong" weight="medium">
+                    {partnerQuery}
+                  </Text>
+                </Text>
+              )}
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>カスタム ariaLabel</CardTitle>
+            <CardDescription>隣接するラベルがない場合は ariaLabel で補完する。</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <SearchInput
+              id="account-code-search"
+              ariaLabel="勘定科目コード検索"
+              className="contract-search-wrapper"
+              inputClassName="contract-search-field"
+              placeholder="勘定科目コードで検索"
+              onSearch={() => {}}
+            />
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}

package/docs/data-entry/select-async-contracts.tsx

@@ -0,0 +1,108 @@
+import { useState } from "react";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
+import { FormField, Select } from "@godxjp/ui/data-entry";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+
+const countries = [
+  { value: "jp", label: "日本", sublabel: "Japan" },
+  { value: "vn", label: "Việt Nam", sublabel: "Vietnam" },
+];
+
+export default function Demo() {
+  const [attempt, setAttempt] = useState(0);
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState("");
+
+  return (
+    <PageContainer
+      title="Select async contracts"
+      subtitle="Retry · load more · controlled state · read-only"
+    >
+      <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Explicit retry action</CardTitle>
+            <CardDescription>
+              A rejected loader exposes a keyboard-focusable retry action.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="retry-country" label="Country">
+              <Select
+                id="retry-country"
+                errorMessage="国を読み込めませんでした"
+                loadOptions={async () => {
+                  if (attempt === 0) {
+                    setAttempt(1);
+                    throw new Error("offline");
+                  }
+                  return { options: countries };
+                }}
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Keyboard load more</CardTitle>
+            <CardDescription>
+              Infinite scroll also exposes a normal button for keyboard and switch users.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Select
+              aria-label="Paged country"
+              loadOptions={async ({ page }) => ({
+                options: [countries[(page - 1) % countries.length]],
+                hasMore: page === 1,
+              })}
+            />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Controlled popup + search</CardTitle>
+            <CardDescription>
+              Parent state can synchronize deep links, dialogs, and external filter controls.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Select
+              aria-label="Controlled country"
+              showSearch
+              options={countries}
+              open={open}
+              onOpenChange={setOpen}
+              search={search}
+              onSearchChange={setSearch}
+              filterOption={(option, query) =>
+                option.sublabel?.toLowerCase().includes(query.toLowerCase()) ?? false
+              }
+              size="sm"
+            />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Read-only value</CardTitle>
+            <CardDescription>
+              Users may inspect options but cannot change or clear the committed value.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Select
+              aria-label="Locked country"
+              showSearch
+              options={countries}
+              defaultValue="jp"
+              readOnly
+            />
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}

package/docs/data-entry/select-matrix.tsx

@@ -0,0 +1,204 @@
+import { useState } from "react";
+
+import { 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 { Flex, PageContainer } from "@godxjp/ui/layout";
+
+const REGIONS = [
+  { value: "tokyo", label: "東京都千代田区丸の内第一営業本部" },
+  { value: "hcm", label: "Thành phố Hồ Chí Minh – Văn phòng điều hành khu vực phía Nam" },
+  { value: "danang", label: "Đà Nẵng", disabled: true },
+];
+
+/** Exhaustive supported Select states. Async loading/empty/error live in the main Select frame. */
+export default function Demo() {
+  const [controlled, setControlled] = useState("tokyo");
+  const [searchable, setSearchable] = useState("hcm");
+
+  return (
+    <PageContainer title="Select matrix" subtitle="Primitive · data API · state · locale · layout">
+      <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Compound primitive · complete anatomy</CardTitle>
+            <CardDescription>
+              Group, label, separator, disabled item, controlled value, sm/md trigger and portalled
+              content. Radix owns keyboard focus and collision handling.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <FormField
+                id="compound-controlled"
+                label="Controlled priority"
+                helper="Arrow keys move between enabled options"
+              >
+                <Select value={controlled} onValueChange={setControlled}>
+                  <SelectTrigger id="compound-controlled" size="sm">
+                    <SelectValue placeholder="選択" />
+                  </SelectTrigger>
+                  <SelectContent collisionPadding={16}>
+                    <SelectGroup>
+                      <SelectLabel>日本</SelectLabel>
+                      <SelectItem value="tokyo">東京</SelectItem>
+                      <SelectItem value="osaka">大阪</SelectItem>
+                    </SelectGroup>
+                    <SelectSeparator />
+                    <SelectGroup>
+                      <SelectLabel>Việt Nam</SelectLabel>
+                      <SelectItem value="hcm">Thành phố Hồ Chí Minh</SelectItem>
+                      <SelectItem value="danang" disabled>
+                        Đà Nẵng（利用不可）
+                      </SelectItem>
+                    </SelectGroup>
+                  </SelectContent>
+                </Select>
+              </FormField>
+              <FormField id="compound-uncontrolled" label="Uncontrolled default">
+                <Select defaultValue="osaka">
+                  <SelectTrigger id="compound-uncontrolled" size="md">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent position="popper" sideOffset={8} collisionPadding={24}>
+                    <SelectItem value="tokyo">東京</SelectItem>
+                    <SelectItem value="osaka">大阪</SelectItem>
+                  </SelectContent>
+                </Select>
+              </FormField>
+              <FormField id="compound-disabled" label="Disabled control">
+                <Select defaultValue="tokyo" disabled>
+                  <SelectTrigger id="compound-disabled">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="tokyo">東京</SelectItem>
+                  </SelectContent>
+                </Select>
+              </FormField>
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Non-search / search API boundary</CardTitle>
+            <CardDescription>
+              Without showSearch/loadOptions the data API delegates to Radix Select: grouping,
+              disabled options, renderOption, name and controlled/uncontrolled values are supported.
+              clearable, search/loading/empty/error messages and selected-value renderers belong to
+              the searchable engine; this frame does not imply parity where the implementation has
+              none. SearchSelect itself is internal and is not a package-barrel component export.
+            </CardDescription>
+          </CardHeader>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Data-driven · long JA/VI and disabled option</CardTitle>
+            <CardDescription>
+              Long labels truncate without widening the page. The disabled option remains visible
+              but cannot be selected; name creates a native hidden form value.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Form columns={2} density="compact">
+              <FormField id="long-controlled" label="Controlled" helper="日本語・Tiếng Việt の長文">
+                <Select
+                  id="long-controlled"
+                  name="region"
+                  value={controlled}
+                  onValueChange={setControlled}
+                  options={REGIONS}
+                />
+              </FormField>
+              <FormField id="long-uncontrolled" label="Uncontrolled" required>
+                <Select
+                  id="long-uncontrolled"
+                  name="region_default"
+                  defaultValue="hcm"
+                  options={REGIONS}
+                />
+              </FormField>
+            </Form>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Searchable · FormField validation contract</CardTitle>
+            <CardDescription>
+              The searchable trigger receives FormField label, helper, required, invalid and error
+              references. The internal search textbox has its own visible-purpose accessible name.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField
+              id="searchable-invalid"
+              label="担当拠点"
+              required
+              helper="名称で検索できます"
+              error="担当拠点を確認してください"
+            >
+              <Select
+                id="searchable-invalid"
+                name="searchable_region"
+                value={searchable}
+                onValueChange={setSearchable}
+                showSearch
+                searchPlaceholder="拠点を検索 / Tìm văn phòng"
+                clearLabel="選択をクリア"
+                options={REGIONS}
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>RTL and collision boundary</CardTitle>
+            <CardDescription>
+              Logical spacing mirrors under dir=rtl. The portalled panel uses Radix collision
+              padding near the inline edge instead of overflowing the viewport.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div dir="rtl" className="ms-auto w-full max-w-sm">
+              <FormField id="rtl-select" label="المنطقة" helper="اختر منطقة التشغيل">
+                <Select
+                  id="rtl-select"
+                  defaultValue="riyadh"
+                  options={[
+                    { value: "riyadh", label: "الرياض" },
+                    { value: "jeddah", label: "جدة" },
+                  ]}
+                />
+              </FormField>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Supported async boundary</CardTitle>
+            <CardDescription>
+              The main Select frame demonstrates loading, resolved-empty and rejected loaders.
+              Re-querying or reopening retries the loader; there is currently no explicit
+              retry-button prop, so this matrix does not invent one.
+            </CardDescription>
+          </CardHeader>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}