@rovula/ui 0.1.21 → 0.1.22

package/src/patterns/menu/Menu.tsx

@@ -0,0 +1,282 @@
+"use client";
+
+import React, { ReactNode } from "react";
+import { cn } from "@/utils/cn";
+import {
+  DropdownMenu as DropdownMenuRoot,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuSeparator,
+  DropdownMenuLabel,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+} from "../../components/DropdownMenu/DropdownMenu";
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export type MenuOption = {
+  value: string;
+  label: ReactNode;
+  /**
+   * Visual type of the item
+   * - "default": selected indicator (check icon on left)
+   * - "checkbox": visual checkbox
+   * - "radio": radio selection (single-select in group)
+   */
+  type?: "default" | "checkbox" | "radio";
+  icon?: ReactNode;
+  disabled?: boolean;
+  danger?: boolean;
+  checked?: boolean;
+  onClick?: () => void;
+};
+
+export type MenuItemType =
+  | { type: "item"; item: MenuOption }
+  | { type: "separator" }
+  | { type: "label"; label: string }
+  | { type: "custom"; render: () => ReactNode }
+  | {
+      type: "submenu";
+      label: string;
+      icon?: ReactNode;
+      disabled?: boolean;
+      /** Nested items — rendered via DropdownMenuSub */
+      items: MenuItemType[];
+    };
+
+export type MenuProps = {
+  /** Trigger element — optional, ถ้าไม่ส่งให้ใช้ open/onOpenChange ควบคุมเอง */
+  trigger?: ReactNode;
+  items: MenuItemType[];
+  selectedValues?: string[];
+  /**
+   * Callback on item select
+   * - "checkbox" → caller toggles in selectedValues
+   * - "radio"    → caller sets single value in selectedValues
+   * - "default"  → same
+   */
+  onSelect?: (value: string, item: MenuOption) => void;
+  /**
+   * Optional header rendered above the item list — stays fixed while list scrolls.
+   * ใช้สำหรับ pattern เช่น "Change Status" (title + close button)
+   * หรือ "Manage Column" (title + Hide all / Show all / Done)
+   */
+  header?: ReactNode;
+  /** Controlled open state */
+  open?: boolean;
+  /** Called when open state changes (controlled or uncontrolled) */
+  onOpenChange?: (open: boolean) => void;
+  /** Alignment of the menu content relative to the trigger */
+  align?: "start" | "center" | "end";
+  side?: "top" | "right" | "bottom" | "left";
+  sideOffset?: number;
+  contentClassName?: string;
+};
+
+// ---------------------------------------------------------------------------
+// renderMenuItems — recursive, used for both root and submenu levels
+// ---------------------------------------------------------------------------
+
+function renderMenuItems(
+  items: MenuItemType[],
+  selectedValues: string[],
+  onSelect?: MenuProps["onSelect"],
+): ReactNode[] {
+  const result: ReactNode[] = [];
+  let radioBuffer: MenuOption[] = [];
+
+  const flushRadioBuffer = (key: string) => {
+    if (radioBuffer.length === 0) return;
+    const buffer = radioBuffer;
+    radioBuffer = [];
+
+    const radioValue =
+      buffer.find((o) => selectedValues.includes(o.value))?.value ?? "";
+
+    result.push(
+      <DropdownMenuRadioGroup
+        key={key}
+        value={radioValue}
+        onValueChange={(val: string) => {
+          const opt = buffer.find((o) => o.value === val);
+          if (opt) {
+            onSelect?.(val, opt);
+            opt.onClick?.();
+          }
+        }}
+      >
+        {buffer.map((opt) => (
+          <DropdownMenuRadioItem
+            key={opt.value}
+            value={opt.value}
+            disabled={opt.disabled}
+            icon={opt.icon as React.ReactNode}
+          >
+            {opt.label}
+          </DropdownMenuRadioItem>
+        ))}
+      </DropdownMenuRadioGroup>,
+    );
+  };
+
+  items.forEach((item, index) => {
+    // Accumulate consecutive radio items
+    if (item.type === "item" && item.item.type === "radio") {
+      radioBuffer.push(item.item);
+      return;
+    }
+
+    // Flush radio buffer before non-radio item
+    flushRadioBuffer(`radio-${index}`);
+
+    if (item.type === "separator") {
+      result.push(<DropdownMenuSeparator key={`sep-${index}`} />);
+      return;
+    }
+
+    if (item.type === "label") {
+      result.push(
+        <DropdownMenuLabel key={`lbl-${index}`}>{item.label}</DropdownMenuLabel>,
+      );
+      return;
+    }
+
+    if (item.type === "custom") {
+      result.push(
+        <React.Fragment key={`custom-${index}`}>{item.render()}</React.Fragment>,
+      );
+      return;
+    }
+
+    if (item.type === "submenu") {
+      result.push(
+        <DropdownMenuSub key={`sub-${index}`}>
+          <DropdownMenuSubTrigger disabled={item.disabled}>
+            {/* mirror DropdownMenuItem icon layout */}
+            <div className="flex shrink-0 flex-row gap-1">
+              <span className="size-4" />
+              {item.icon}
+            </div>
+            {item.label}
+          </DropdownMenuSubTrigger>
+          <DropdownMenuSubContent>
+            {renderMenuItems(item.items, selectedValues, onSelect)}
+          </DropdownMenuSubContent>
+        </DropdownMenuSub>,
+      );
+      return;
+    }
+
+    if (item.type === "item") {
+      const opt = item.item;
+      const isSelected = opt.checked ?? selectedValues.includes(opt.value);
+
+      if (opt.type === "checkbox") {
+        result.push(
+          <DropdownMenuCheckboxItem
+            key={opt.value}
+            checked={isSelected}
+            disabled={opt.disabled}
+            onCheckedChange={() => {
+              onSelect?.(opt.value, opt);
+              opt.onClick?.();
+            }}
+          >
+            {opt.label}
+          </DropdownMenuCheckboxItem>,
+        );
+        return;
+      }
+
+      // default item
+      result.push(
+        <DropdownMenuItem
+          key={opt.value}
+          selected={isSelected}
+          icon={opt.icon as React.ReactNode}
+          disabled={opt.disabled}
+          className={cn(opt.danger && "text-red-500")}
+          onSelect={() => {
+            onSelect?.(opt.value, opt);
+            opt.onClick?.();
+          }}
+        >
+          {opt.label}
+        </DropdownMenuItem>,
+      );
+    }
+  });
+
+  flushRadioBuffer("radio-end");
+  return result;
+}
+
+// ---------------------------------------------------------------------------
+// Menu — top-level pattern component built on DropdownMenu
+//
+// ใช้งาน:
+//   <Menu trigger={<Button>Open</Button>} items={[...]} onSelect={...} />
+//
+// ได้ของฟรีจาก DropdownMenu:
+//   - Radix positioning (flip, scroll, sideOffset)
+//   - Portal (z-index, escape stacking context)
+//   - Escape to close, click-outside to close
+//   - Keyboard navigation (Arrow, Enter, Escape)
+//   - Full a11y / WAI-ARIA
+//   - Sub-menu support via DropdownMenuSub
+// ---------------------------------------------------------------------------
+
+export const Menu = ({
+  trigger,
+  items,
+  selectedValues = [],
+  onSelect,
+  header,
+  open,
+  onOpenChange,
+  align = "start",
+  side = "bottom",
+  sideOffset = 4,
+  contentClassName,
+}: MenuProps) => (
+  <DropdownMenuRoot open={open} onOpenChange={onOpenChange}>
+    {trigger && (
+      <DropdownMenuTrigger asChild>{trigger}</DropdownMenuTrigger>
+    )}
+    <DropdownMenuContent
+      align={align}
+      side={side}
+      sideOffset={sideOffset}
+      className={contentClassName}
+    >
+      {header && (
+        <div className="sticky top-0 z-10 bg-modal-surface border-b border-[var(--dropdown-menu-seperator-bg)]">
+          {header}
+        </div>
+      )}
+      {renderMenuItems(items, selectedValues, onSelect)}
+    </DropdownMenuContent>
+  </DropdownMenuRoot>
+);
+
+Menu.displayName = "Menu";
+
+// ---------------------------------------------------------------------------
+// Re-exports — backward compat for consumers using Menu's sub-components
+// ---------------------------------------------------------------------------
+
+export {
+  DropdownMenuItem as MenuItem,
+  DropdownMenuSeparator as MenuSeparator,
+  DropdownMenuLabel as MenuLabel,
+} from "../../components/DropdownMenu/DropdownMenu";
+
+export default Menu;

package/src/theme/themes/xspector/baseline.css

@@ -1,5 +1,4 @@
 @import url(typography.css);
 @import url(components/action-button.css);
 @import url(components/loading.css);
-@import url(components/dropdown-menu.css);
 @import url(components/scrollbar.css);

package/src/theme/tokens/baseline.css

@@ -8,4 +8,5 @@
 @import url(components/footer.css);
 @import url(components/dropdown-menu.css);
 @import url(components/switch.css);
-@import url(components/scrollbar.css);
+@import url(components/scrollbar.css);
+@import url(components/badge.css);

package/src/theme/tokens/components/badge.css

@@ -0,0 +1,54 @@
+:root {
+  /* --------------------------------------------------------------------------------- */
+  /* Badge Component Tokens                                                            */
+  /* --------------------------------------------------------------------------------- */
+  /* Naming Convention: --badge-[color]-[property]                                    */
+  /* Colors: [default, success, warning, info, error]                                 */
+  /* Severity: [highest, high, medium, low, lowest]                                   */
+  /* --------------------------------------------------------------------------------- */
+
+  /* ------------------------------------------------------------------ */
+  /* Status Badge — Default (grey/white)                                 */
+  /* ------------------------------------------------------------------ */
+  --badge-default-bg: rgba(145, 158, 171, 0.12);
+  --badge-default-border: rgba(158, 158, 158, 0.48);
+  --badge-default-text: var(--text-contrast-max, white);
+
+  /* ------------------------------------------------------------------ */
+  /* Status Badge — Success (green)                                      */
+  /* ------------------------------------------------------------------ */
+  --badge-success-bg: rgba(84, 214, 44, 0.12);
+  --badge-success-border: rgba(84, 214, 44, 0.48);
+  --badge-success-text: var(--state-success-default);
+
+  /* ------------------------------------------------------------------ */
+  /* Status Badge — Warning (yellow)                                     */
+  /* ------------------------------------------------------------------ */
+  --badge-warning-bg: rgba(255, 193, 7, 0.12);
+  --badge-warning-border: rgba(255, 193, 7, 0.48);
+  --badge-warning-text: var(--state-warning-default);
+
+  /* ------------------------------------------------------------------ */
+  /* Status Badge — Info (blue)                                          */
+  /* ------------------------------------------------------------------ */
+  --badge-info-bg: rgba(41, 152, 255, 0.12);
+  --badge-info-border: rgba(41, 152, 255, 0.48);
+  --badge-info-text: var(--state-info-default);
+
+  /* ------------------------------------------------------------------ */
+  /* Status Badge — Error (red)                                          */
+  /* ------------------------------------------------------------------ */
+  --badge-error-bg: rgba(255, 72, 66, 0.12);
+  --badge-error-border: rgba(255, 72, 66, 0.48);
+  --badge-error-text: var(--state-error-default);
+
+  /* ------------------------------------------------------------------ */
+  /* Severity Badge — solid pill                                         */
+  /* ------------------------------------------------------------------ */
+  --badge-severity-text: var(--text-white, white);
+  --badge-severity-highest-bg: var(--state-error-default);
+  --badge-severity-high-bg: var(--ramps-warning-800);
+  --badge-severity-medium-bg: var(--state-warning-default);
+  --badge-severity-low-bg: var(--state-success-default);
+  --badge-severity-lowest-bg: var(--state-info-default);
+}

package/src/theme/tokens/components/dropdown-menu.css

@@ -6,22 +6,33 @@
   /* Element: [default, hover, selected, disabled]                      */
   /* ------------------------------------------------------------------ */
   
-  --dropdown-menu-seperator-bg: var(--base-color-workspace-stroke);
-  --dropdown-menu-shadow: 0px 2px 24px 0px rgba(145, 158, 171, 0.24);
+  --dropdown-menu-seperator-bg: var(--modal-line);
+  --dropdown-menu-shadow: 0px 12px 24px -4px rgba(0, 0, 0, 0.12);
 
   /* Default State */
   --dropdown-menu-default-bg: transparent;
   --dropdown-menu-default-text: var(--text-g-contrast-high);
 
   /* Hover State */
-  --dropdown-menu-hover-bg: var(--state-primary-hover-bg);
+  --dropdown-menu-hover-bg: var(--modal-highlight); 
   --dropdown-menu-hover-text: var(--text-g-contrast-high);
 
   /* Selected State */
-  --dropdown-menu-selected-bg: transparent;
+  --dropdown-menu-selected-bg: var(--modal-highlight);
   --dropdown-menu-selected-text: var(--text-g-contrast-high);
 
   /* Disabled State */
   --dropdown-menu-disabled-bg: transparent;
   --dropdown-menu-disabled-text: var(--state-disable-solid);
+
+  /* Checkbox Item */
+  --dropdown-menu-checkbox-border: var(--function-default-solid);
+  --dropdown-menu-checkbox-checked-bg: var(--function-active-solid);
+  --dropdown-menu-checkbox-checked-icon: var(--function-active-icon);
+  --dropdown-menu-checkbox-disabled-border: var(--state-disable-outline);
+  --dropdown-menu-checkbox-disabled-checked-bg: var(--state-disable-solid);
+
+  /* Radio Item */
+  --dropdown-menu-radio-disabled-text: var(--state-disable-solid);
+  --dropdown-menu-radio-selected-disabled-text: var(--state-disable-outline);
 }

package/src/utils/mergeRefs.ts

@@ -0,0 +1,46 @@
+import React, { useCallback, useRef } from "react";
+
+/**
+ * Merges multiple refs into a single callback ref.
+ * NOTE: This creates a new function on every call — do NOT use inline in render.
+ * Use `useStableMergedRef` instead when you need a stable ref identity.
+ */
+export function mergeRefs<T>(
+  ...refs: (React.Ref<T> | undefined | null)[]
+): React.RefCallback<T> {
+  return (node) => {
+    refs.forEach((ref) => {
+      if (!ref) return;
+      if (typeof ref === "function") {
+        ref(node);
+      } else {
+        (ref as React.MutableRefObject<T | null>).current = node;
+      }
+    });
+  };
+}
+
+/**
+ * Returns a **stable** callback ref (never changes identity) that forwards the
+ * node to all given refs. Safe to use inline in JSX — will not cause
+ * detach/re-attach loops in libraries like Headless UI that watch refs.
+ *
+ * @example
+ * const MyInput = forwardRef((props, ref) => {
+ *   const internalRef = useRef(null);
+ *   const stableRef = useStableMergedRef(ref, internalRef);
+ *   return <input ref={stableRef} />;
+ * });
+ */
+export function useStableMergedRef<T>(
+  ...refs: (React.Ref<T> | undefined | null)[]
+): React.RefCallback<T> {
+  // Store the latest merge logic in a ref so the callback never goes stale,
+  // while the callback itself keeps a stable identity (empty useCallback deps).
+  const latestImpl = useRef<React.RefCallback<T>>();
+  latestImpl.current = mergeRefs(...refs);
+
+  return useCallback((node: T | null) => {
+    latestImpl.current?.(node);
+  }, []); // ← empty deps = identity never changes = no detach/re-attach loop
+}

package/dist/cjs/types/components/Menu/Menu.d.ts

@@ -1,65 +0,0 @@
-import React, { CSSProperties, ReactNode } from "react";
-export type MenuOption = {
-    value: string;
-    label: ReactNode;
-    /**
-     * Visual type - กำหนดว่าจะแสดง icon อะไร
-     * - "default": ไม่มี icon (แค่ highlight background)
-     * - "checkbox": แสดง ✓ icon
-     * - "radio": แสดง ● icon
-     */
-    type?: "default" | "checkbox" | "radio";
-    icon?: ReactNode;
-    disabled?: boolean;
-    danger?: boolean;
-    checked?: boolean;
-    onClick?: () => void;
-};
-export type MenuItemType = {
-    type: "item";
-    item: MenuOption;
-} | {
-    type: "separator";
-} | {
-    type: "label";
-    label: string;
-} | {
-    type: "custom";
-    render: () => ReactNode;
-};
-export type MenuProps = {
-    items: MenuItemType[];
-    /**
-     * Selected values - ใช้กับ type="item"
-     */
-    selectedValues?: string[];
-    /**
-     * Callback เมื่อเลือก item
-     * - ถ้า item.type="checkbox" → toggle checked state
-     * - ถ้า item.type="radio" → single select (clear others)
-     * - ถ้า item.type="default" หรือไม่ระบุ → ตาม selectedValues
-     */
-    onSelect?: (value: string, item: MenuOption) => void;
-    className?: string;
-    style?: CSSProperties;
-    isAbove?: boolean;
-};
-export declare const Menu: React.ForwardRefExoticComponent<MenuProps & React.RefAttributes<HTMLDivElement>>;
-type MenuItemProps = {
-    option: MenuOption;
-    visualType: "default" | "checkbox" | "radio";
-    isChecked: boolean;
-    onSelect: () => void;
-    className?: string;
-};
-export declare const MenuItem: React.ForwardRefExoticComponent<MenuItemProps & React.RefAttributes<HTMLDivElement>>;
-type MenuSeparatorProps = {
-    className?: string;
-};
-export declare const MenuSeparator: React.ForwardRefExoticComponent<MenuSeparatorProps & React.RefAttributes<HTMLDivElement>>;
-type MenuLabelProps = {
-    children: ReactNode;
-    className?: string;
-};
-export declare const MenuLabel: React.ForwardRefExoticComponent<MenuLabelProps & React.RefAttributes<HTMLDivElement>>;
-export default Menu;

package/dist/cjs/types/components/Menu/helpers.d.ts

@@ -1,19 +0,0 @@
-import { MenuItemType } from "./Menu";
-/**
- * Helper function to convert simple options to MenuItemType
- * Useful for integrating with Dropdown component
- */
-export declare function optionsToMenuItems(options: Array<{
-    value: string;
-    label: string | React.ReactNode;
-    disabled?: boolean;
-    renderLabel?: any;
-}>): MenuItemType[];
-/**
- * Helper to add separator between menu items
- */
-export declare function withSeparator(items: MenuItemType[], atIndex: number): MenuItemType[];
-/**
- * Helper to add label/header to menu items
- */
-export declare function withLabel(label: string, items: MenuItemType[]): MenuItemType[];

package/dist/cjs/types/components/Menu/index.d.ts

@@ -1,4 +0,0 @@
-export { Menu, MenuItem, MenuSeparator, MenuLabel } from "./Menu";
-export type { MenuOption, MenuItemType, MenuProps } from "./Menu";
-export { optionsToMenuItems, withSeparator, withLabel } from "./helpers";
-export { default } from "./Menu";

package/dist/components/Menu/Menu.js

@@ -1,64 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { forwardRef, } from "react";
-import { cn } from "@/utils/cn";
-import Icon from "../Icon/Icon";
-// ==================== Menu Container ====================
-export const Menu = forwardRef(({ items, selectedValues = [], onSelect, className, style, isAbove = false }, ref) => {
-    return (_jsx("div", { ref: ref, className: cn("z-50 min-w-[154px] overflow-hidden rounded-md bg-modal-surface text-text-g-contrast-high", "border border-modal-surface", className), style: Object.assign({ boxShadow: "var(--dropdown-menu-shadow)" }, style), children: items.map((item, index) => {
-            var _a;
-            if (item.type === "separator") {
-                return _jsx(MenuSeparator, {}, `separator-${index}`);
-            }
-            if (item.type === "label") {
-                return _jsx(MenuLabel, { children: item.label }, `label-${index}`);
-            }
-            if (item.type === "custom") {
-                return (_jsx(React.Fragment, { children: item.render() }, `custom-${index}`));
-            }
-            const itemOption = item.item;
-            const visualType = itemOption.type || "default";
-            // Determine checked/selected state
-            let isChecked = false;
-            if (visualType === "checkbox" || visualType === "radio") {
-                isChecked =
-                    (_a = itemOption.checked) !== null && _a !== void 0 ? _a : selectedValues.includes(itemOption.value);
-            }
-            else {
-                isChecked = selectedValues.includes(itemOption.value);
-            }
-            return (_jsx(MenuItem, { option: itemOption, visualType: visualType, isChecked: isChecked, onSelect: () => {
-                    var _a;
-                    onSelect === null || onSelect === void 0 ? void 0 : onSelect(itemOption.value, itemOption);
-                    (_a = itemOption.onClick) === null || _a === void 0 ? void 0 : _a.call(itemOption);
-                } }, itemOption.value));
-        }) }));
-});
-Menu.displayName = "Menu";
-export const MenuItem = forwardRef(({ option, visualType, isChecked, onSelect, className }, ref) => {
-    // Render indicator based on visual type
-    const renderIndicator = () => {
-        if (visualType === "checkbox" && isChecked) {
-            return (_jsx("span", { className: "absolute left-4 flex items-center justify-center", children: _jsx(Icon, { type: "heroicons", name: "check", className: "size-4" }) }));
-        }
-        if (visualType === "radio" && isChecked) {
-            return (_jsx("span", { className: "absolute left-4 flex items-center justify-center", children: _jsx(Icon, { type: "heroicons", name: "circle", className: "h-2 w-2 fill-current" }) }));
-        }
-        return null;
-    };
-    return (_jsxs("div", { ref: ref, className: cn("relative flex gap-3 cursor-pointer select-none box-border items-center py-4 pl-9 pr-4 typography-subtitle4 outline-none transition-colors", "bg-[var(--dropdown-menu-default-bg)] text-[var(--dropdown-menu-default-text)]", "active:opacity-75", "hover:bg-[var(--dropdown-menu-hover-bg)] hover:text-[var(--dropdown-menu-hover-text)]", {
-            "bg-[var(--dropdown-menu-selected-bg)] text-[var(--dropdown-menu-selected-text)] typography-subtitle5": isChecked,
-            "pointer-events-none opacity-50": option.disabled,
-            "text-red-500": option.danger,
-        }, className), onMouseDown: option.disabled ? undefined : onSelect, children: [renderIndicator(), option.icon && _jsx("span", { className: "flex-shrink-0", children: option.icon }), option.label] }));
-});
-MenuItem.displayName = "MenuItem";
-export const MenuSeparator = forwardRef(({ className }, ref) => {
-    return (_jsx("div", { ref: ref, className: cn("-mx-2 my-2 h-px bg-[var(--dropdown-menu-seperator-bg)]", className) }));
-});
-MenuSeparator.displayName = "MenuSeparator";
-export const MenuLabel = forwardRef(({ children, className }, ref) => {
-    return (_jsx("div", { ref: ref, className: cn("px-3 py-2 typography-small4 text-text-g-contrast-medium", className), children: children }));
-});
-MenuLabel.displayName = "MenuLabel";
-// ==================== Exports ====================
-export default Menu;