@suphark/ui 0.11.2 → 0.12.0

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 รูปแบบตาม [Keep a Changelog](https://keepachangelog.com/) · semver: patch = หน้าตา/บั๊ก, minor = component/prop ใหม่, major = เปลี่ยน/ลบ props
 
+## [0.12.0] — 2026-09-23
+
+### Added
+
+- **`OrganizationSwitcher` prop `itemAction(org)`** (ขอจาก Pi Auth) — ปุ่มท้ายแถวของแต่ละองค์กรในเมนู เช่น ⚙ "ตั้งค่าองค์กร" แบบ Vercel/Clerk: แอปส่ง element ที่กดได้มาเอง (พร้อม aria-label/title) component ห่อให้และ **หยุด click/keydown ไม่ให้สลับองค์กร**; คืน `null` = แถวนั้นไม่มีปุ่ม; มี `itemAction` แล้วองค์กรเดียวก็ยังมีเมนู (เดิมยุบเป็นป้ายเฉย ๆ เมื่อไม่มี `footer`) — เดิมแอปต้องวาง "ตั้งค่าองค์กร" เป็นรายการแยกใน `footer`
+- **`OrganizationSwitcher` prop `selectableActive`** (ขอจาก Pi Auth) — แถวที่ active กดได้ด้วย เรียก `onSwitch` เหมือนแถวอื่น (ค่าเริ่มต้น false = คงพฤติกรรมเดิม กดแล้วไม่ทำอะไร); สำหรับเมนูที่ "เลือก" = ไปหน้าของสิ่งนั้นไม่ใช่แค่สลับ เช่น crumb บัญชีของ Pi Auth ที่กดชื่อบัญชีแล้วเข้าคอนโซลบัญชีนั้น — ตัดรายการ "คอนโซลบัญชี" ท้ายเมนูที่ซ้ำช่องทางออกได้
+- showcase: หน้า `organization-switcher` ตัวแรกใส่ ⚙ ท้ายแถว; tests 2 กรณี (รวม 130)
+
 ## [0.11.2] — 2026-09-22
 
 ### Fixed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@suphark/ui",
-  "version": "0.11.2",
+  "version": "0.12.0",
   "private": false,
   "type": "module",
   "description": "Design system กลางของ Suphark apps: shadcn/ui (base-nova, Base UI, Tailwind v4) + shared components + token/ฟอนต์ Noto Sans Thai Looped — ส่งเป็น source ให้แอป Next transpile เอง",

package/src/components/app-shell/organization-switcher.tsx

@@ -40,6 +40,16 @@ export interface OrganizationSwitcherProps {
   hint?: (org: OrganizationOption) => ReactNode;
   /** slot ท้ายเมนู เช่น "สร้างองค์กร…", "จัดการองค์กร" */
   footer?: ReactNode;
+  /**
+   * ปุ่มท้ายแถวของแต่ละองค์กร เช่น ⚙ "ตั้งค่าองค์กร" (แบบ Vercel/Clerk) — คืน `null` เพื่อไม่แสดงในแถวนั้น
+   * คลิกแล้ว **ไม่สลับองค์กร** (component หยุด event ให้); ส่ง element ที่กดได้เองและใส่ aria-label/title ด้วย
+   */
+  itemAction?: (org: OrganizationOption) => ReactNode;
+  /**
+   * แถวที่ active กดได้ด้วย (เรียก `onSwitch` เหมือนแถวอื่น) — ค่าเริ่มต้น false = กดแล้วไม่ทำอะไร
+   * ใช้เมื่อ "เลือก" = ไปหน้าของสิ่งนั้น ไม่ใช่แค่สลับ (เช่น crumb บัญชี: กดชื่อบัญชี = เข้าคอนโซลบัญชีนั้น)
+   */
+  selectableActive?: boolean;
   /** `header` = HeaderCrumb ใน header (layout top); `sidebar` = ปุ่มเต็มกว้างใน `sidebarHeader` ของ AppShell */
   placement?: "header" | "sidebar";
   className?: string;
@@ -64,6 +74,8 @@ export function OrganizationSwitcher({
   heading,
   hint = (o) => (o.slug ? `/${o.slug}` : undefined),
   footer,
+  itemAction,
+  selectableActive = false,
   placement = "header",
   className,
 }: OrganizationSwitcherProps) {
@@ -72,7 +84,7 @@ export function OrganizationSwitcher({
   const [pending, start] = useTransition();
   const active = organizations.find((o) => o.id === activeId);
   const label = active ? active.name : (fallbackLabel ?? text.switcher?.choose ?? "เลือกองค์กร");
-  const single = organizations.length <= 1 && !footer;
+  const single = organizations.length <= 1 && !footer && !itemAction;
 
   const trigger =
     placement === "sidebar" ? (
@@ -102,7 +114,7 @@ export function OrganizationSwitcher({
   if (single) return trigger;
 
   function pick(id: string) {
-    if (id === activeId) return;
+    if (id === activeId && !selectableActive) return;
     start(async () => {
       await onSwitch(id);
       if (refresh) router.refresh();
@@ -119,6 +131,7 @@ export function OrganizationSwitcher({
           </DropdownMenuLabel>
           {organizations.map((o) => {
             const isActive = o.id === activeId;
+            const action = itemAction?.(o);
             return (
               <DropdownMenuItem
                 key={o.id}
@@ -134,6 +147,17 @@ export function OrganizationSwitcher({
                   )}
                 </span>
                 {isActive && <Check className="size-4 shrink-0" aria-hidden="true" />}
+                {action && (
+                  // ปุ่มท้ายแถว (⚙) — กดแล้วต้องไม่สลับองค์กร จึงหยุด event ไม่ให้ถึง onClick ของแถว
+                  // biome-ignore lint/a11y/noStaticElementInteractions: ตัวห่อไม่ใช่ปุ่ม — แอปส่ง element ที่กดได้มาเอง
+                  <span
+                    className="-my-1 -mr-1 flex shrink-0 items-center"
+                    onClick={(e) => e.stopPropagation()}
+                    onKeyDown={(e) => e.stopPropagation()}
+                  >
+                    {action}
+                  </span>
+                )}
               </DropdownMenuItem>
             );
           })}