@godxjp/ui 31.2.0 → 31.4.0

package/docs/query/data-state.tsx

@@ -1,4 +1,5 @@
-import { QueryClient, QueryClientProvider, useQuery } from "@tanstack/react-query";
+import { useState } from "react";
+import { QueryClient, QueryClientProvider, useQuery, useQueryClient } from "@tanstack/react-query";
 
 import {
   Badge,
@@ -12,8 +13,9 @@ import {
   type ColumnDef,
 } from "@godxjp/ui/data-display";
 import { SkeletonTable } from "@godxjp/ui/feedback";
+import { Button, Text } from "@godxjp/ui/general";
 import { Flex, PageContainer } from "@godxjp/ui/layout";
-import { DataState } from "@godxjp/ui/query";
+import { AuthExpiryProvider, DataState } from "@godxjp/ui/query";
 
 /**
  * DataState · drives skeleton / error / empty / success for ONE useQuery block.
@@ -49,15 +51,36 @@ function SuccessBlock() {
   );
 }
 
+/** Loads for 2s and comes back empty — the whole lifecycle: skeleton → EmptyState. */
+const LOAD_MS = 2000;
+
 function LoadingBlock() {
+  const client = useQueryClient();
   const query = useQuery({
     queryKey: ["ds-loading"],
-    queryFn: () => new Promise<Invoice[]>(() => {}),
+    queryFn: () => new Promise<Invoice[]>((resolve) => setTimeout(() => resolve([]), LOAD_MS)),
   });
   return (
-    <DataState query={query} skeleton={<SkeletonTable />}>
-      {(d) => <DataTable data={d} columns={columns} getRowId={(r) => r.id} />}
-    </DataState>
+    <Flex direction="col" gap="sm">
+      <DataState
+        query={query}
+        skeleton={<SkeletonTable rows={4} columns={3} />}
+        isEmpty={(d) => d.length === 0}
+        empty={
+          <EmptyState title="データがありません" description="条件に合う請求書はありません。" />
+        }
+      >
+        {(d) => <DataTable data={d} columns={columns} getRowId={(r) => r.id} />}
+      </DataState>
+      {/* resetQueries puts the query back to pending, so the skeleton plays again. */}
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={() => void client.resetQueries({ queryKey: ["ds-loading"] })}
+      >
+        もう一度読み込む
+      </Button>
+    </Flex>
   );
 }
 
@@ -99,8 +122,40 @@ function PrerequisiteBlock() {
   );
 }
 
+function ExpiredSessionQuery({ queryKey }: { queryKey: string }) {
+  const query = useQuery<Invoice[]>({
+    queryKey: [queryKey],
+    queryFn: async () => {
+      throw Object.assign(new Error("Access token expired"), { status: 401 });
+    },
+  });
+  return (
+    <DataState query={query} skeleton={<SkeletonTable rows={3} />}>
+      {(d) => <DataTable data={d} columns={columns} getRowId={(r) => r.id} />}
+    </DataState>
+  );
+}
+
+function AuthExpiryBlock() {
+  // The app root owns session expiry (gh#1022). A real app redirects to the IdP here:
+  //   window.location.assign(`/auth/login?return_to=${encodeURIComponent(location.href)}`)
+  // Two queries 401 at once — the handler still runs exactly once, and no alert is painted.
+  const [calls, setCalls] = useState(0);
+  return (
+    <AuthExpiryProvider onAuthExpired={() => setCalls((n) => n + 1)}>
+      <Flex direction="col" gap="md">
+        <Text size="sm" tone="muted">
+          onAuthExpired calls: {calls}
+        </Text>
+        <ExpiredSessionQuery queryKey="ds-auth-expiry-a" />
+        <ExpiredSessionQuery queryKey="ds-auth-expiry-b" />
+      </Flex>
+    </AuthExpiryProvider>
+  );
+}
+
 function AuthErrorBlock() {
-  // A 401 / expired token never resolves by retrying — DataState offers session renewal instead.
+  // Without an AuthExpiryProvider: the proportionate fallback — a neutral sign-in prompt.
   const query = useQuery<Invoice[]>({
     queryKey: ["ds-auth-error"],
     queryFn: async () => {
@@ -140,8 +195,11 @@ export default function Demo() {
 
           <Card>
             <CardHeader>
-              <CardTitle level={2}>Loading (skeleton)</CardTitle>
-              <CardDescription>The skeleton prop renders during the pending phase.</CardDescription>
+              <CardTitle level={2}>Loading → empty</CardTitle>
+              <CardDescription>
+                The skeleton (animated) renders while pending; when the data arrives empty the
+                skeleton goes away and the `empty` slot renders.
+              </CardDescription>
             </CardHeader>
             <CardContent flush>
               <LoadingBlock />
@@ -175,10 +233,24 @@ export default function Demo() {
 
           <Card>
             <CardHeader>
-              <CardTitle level={2}>Error · auth (session renewal)</CardTitle>
+              <CardTitle level={2}>Session expired · AuthExpiryProvider (recommended)</CardTitle>
+              <CardDescription>
+                Mount `AuthExpiryProvider` once at the app root. A 401 calls `onAuthExpired`
+                automatically, once for any number of simultaneous 401s, while each DataState keeps
+                its skeleton and announces the redirect to sign-in through a live region.
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <AuthExpiryBlock />
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle level={2}>Session expired · fallback without a provider</CardTitle>
               <CardDescription>
-                A 401 / expired token routes to session renewal via `onAuthError`, never a blind
-                retry, and never surfaces the raw token message.
+                Without a provider a 401 renders a neutral, width-capped sign-in prompt whose button
+                calls `onAuthError`. It never offers a blind retry or shows the raw token message.
               </CardDescription>
             </CardHeader>
             <CardContent>

package/docs/showcase/table-view-tabs.tsx

@@ -367,19 +367,14 @@ const DOT_CLASS: Record<SavedView["dot"], string> = {
   neutral: "bg-muted-foreground",
 };
 
-// TabsTrigger renders a <button>, whose content model is phrasing content only — so the row and
-// the count chip take `as="span"`. Before Flex/Badge had that seam the only valid shape here was a
-// raw `<span className="flex …">`, i.e. utility layout.
-function ViewTrigger({ view, count }: { view: SavedView; count: number }) {
+// TabsTrigger renders a <button>, whose content model is phrasing content only — so the row takes
+// `as="span"`. The count is the trigger's own `count` slot (gh#1021), drawn exactly as the `items`
+// API draws it, rather than a hand-placed Badge.
+function ViewTrigger({ view }: { view: SavedView }) {
   return (
     <Flex as="span" align="center" gap="sm">
       <span aria-hidden="true" className={`size-2 rounded-full ${DOT_CLASS[view.dot]}`} />
       <span>{view.label}</span>
-      <Badge as="span" tone="neutral" shape="pill">
-        <Text as="span" size="2xs" weight="medium" tabular>
-          {count}
-        </Text>
-      </Badge>
     </Flex>
   );
 }
@@ -432,23 +427,30 @@ export default function Demo() {
       }
     >
       <Flex direction="col" gap="md">
-        {/* Saved-view ribbon — controlled Tabs; switching swaps the preset below. */}
-        <Tabs value={view} onValueChange={(v) => setView(v as ViewId)}>
+        {/* Saved-view ribbon — controlled, strip-only Tabs (gh#1021): `controls` points the
+            selected tab at the grid below, which lives outside the Tabs and is never remounted. */}
+        <Tabs
+          aria-label="保存ビュー"
+          controls="attendance-grid"
+          value={view}
+          onValueChange={(v) => setView(v as ViewId)}
+        >
           <TabsList variant="line" className="h-auto w-full flex-wrap justify-start border-b">
             {VIEWS.map((v) => (
               <TabsTrigger
                 key={v.id}
                 value={v.id}
+                count={counts[v.id]}
                 className="rounded-[var(--tabs-trigger-line-radius)] px-[var(--tabs-trigger-line-padding-x)] py-[var(--tabs-trigger-line-padding-y)]"
               >
-                <ViewTrigger view={v} count={counts[v.id]} />
+                <ViewTrigger view={v} />
               </TabsTrigger>
             ))}
           </TabsList>
         </Tabs>
 
         {/* The grid — columns + data both come from the active saved view. */}
-        <Card>
+        <Card id="attendance-grid" role="region" aria-label={active.label}>
           <CardContent flush>
             <DataTable
               data={rows}

package/docs/themes/flat.css

@@ -235,7 +235,9 @@
   --conversations-item-active-background: hsl(220 20% 90%);
   --conversations-item-active-color: hsl(220 26% 12%);
   --tabs-count-active-background: hsl(220 20% 86%);
+  --segmented-count-selected-background: hsl(220 20% 86%);
   --tabs-count-active-color: hsl(220 26% 12%);
+  --segmented-count-selected-color: hsl(220 26% 12%);
   --toggle-soft-hover-background: hsl(220 16% 90%);
   --toggle-pressed-count-background: hsl(220 20% 84%);
   --toggle-pressed-count-color: hsl(220 26% 12%);
@@ -419,7 +421,9 @@
   --conversations-item-active-background: hsl(220 16% 22%);
   --conversations-item-active-color: hsl(220 20% 94%);
   --tabs-count-active-background: hsl(220 16% 26%);
+  --segmented-count-selected-background: hsl(220 16% 26%);
   --tabs-count-active-color: hsl(220 20% 94%);
+  --segmented-count-selected-color: hsl(220 20% 94%);
   --toggle-soft-hover-background: hsl(220 14% 22%);
   --toggle-pressed-count-background: hsl(220 16% 26%);
   --toggle-pressed-count-color: hsl(220 20% 94%);

package/docs/themes/glassmorphism.css

@@ -613,7 +613,9 @@
   --conversations-item-active-background-alpha: 18%;
   --conversations-item-active-color: hsl(var(--glass-ink));
   --tabs-count-active-background-alpha: 24%;
+  --segmented-count-selected-background-alpha: 24%;
   --tabs-count-active-color: hsl(var(--glass-ink));
+  --segmented-count-selected-color: hsl(var(--glass-ink));
   --toggle-pressed-count-background-alpha: 26%;
   --toggle-pressed-count-color: hsl(var(--glass-ink));
   --toggle-pressed-border-color-alpha: 45%;

package/docs/themes/neubrutalism.css

@@ -279,7 +279,9 @@
   --conversations-item-active-background: hsl(48 90% 78%);
   --conversations-item-active-color: hsl(0 0% 0%);
   --tabs-count-active-background: hsl(48 90% 74%);
+  --segmented-count-selected-background: hsl(48 90% 74%);
   --tabs-count-active-color: hsl(0 0% 0%);
+  --segmented-count-selected-color: hsl(0 0% 0%);
   --toggle-soft-hover-background: hsl(48 90% 84%);
   --toggle-pressed-count-background: hsl(48 90% 74%);
   --toggle-pressed-count-color: hsl(0 0% 0%);
@@ -331,6 +333,7 @@
     --mega-menu-link-hover-background: hsl(from hsl(var(--primary)) h 90% 82%);
     --conversations-item-active-background: hsl(from hsl(var(--primary)) h 90% 78%);
     --tabs-count-active-background: hsl(from hsl(var(--primary)) h 90% 74%);
+    --segmented-count-selected-background: hsl(from hsl(var(--primary)) h 90% 74%);
     --toggle-soft-hover-background: hsl(from hsl(var(--primary)) h 90% 84%);
     --toggle-pressed-count-background: hsl(from hsl(var(--primary)) h 90% 74%);
   }
@@ -423,7 +426,9 @@
   --conversations-item-active-background: hsl(48 90% 26%);
   --conversations-item-active-color: hsl(0 0% 100%);
   --tabs-count-active-background: hsl(48 90% 26%);
+  --segmented-count-selected-background: hsl(48 90% 26%);
   --tabs-count-active-color: hsl(0 0% 100%);
+  --segmented-count-selected-color: hsl(0 0% 100%);
   --toggle-soft-hover-background: hsl(48 90% 24%);
   --toggle-pressed-count-background: hsl(48 90% 26%);
   --toggle-pressed-count-color: hsl(0 0% 100%);
@@ -469,6 +474,7 @@
     --mega-menu-link-hover-background: hsl(from hsl(var(--primary)) h 90% 26%);
     --conversations-item-active-background: hsl(from hsl(var(--primary)) h 90% 26%);
     --tabs-count-active-background: hsl(from hsl(var(--primary)) h 90% 26%);
+    --segmented-count-selected-background: hsl(from hsl(var(--primary)) h 90% 26%);
     --toggle-soft-hover-background: hsl(from hsl(var(--primary)) h 90% 24%);
     --toggle-pressed-count-background: hsl(from hsl(var(--primary)) h 90% 26%);
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@godxjp/ui",
-  "version": "31.2.0",
-  "godxUiMcp": "31.2.0",
+  "version": "31.4.0",
+  "godxUiMcp": "31.4.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",