@rovula/ui 0.0.78 → 0.0.79

package/src/components/Menu/Menu.tsx

@@ -0,0 +1,235 @@
+import React, {
+  CSSProperties,
+  ReactNode,
+  forwardRef,
+  useCallback,
+  useState,
+} from "react";
+import { cn } from "@/utils/cn";
+import Icon from "../Icon/Icon";
+
+// ==================== Types ====================
+
+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; // สำหรับ type="checkbox" หรือ "radio"
+  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;
+};
+
+// ==================== Menu Container ====================
+
+export const Menu = forwardRef<HTMLDivElement, MenuProps>(
+  (
+    { items, selectedValues = [], onSelect, className, style, isAbove = false },
+    ref
+  ) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "z-50 min-w-[154px] overflow-hidden rounded-md bg-base-popup text-base-popup-foreground",
+          "border border-base-popup",
+          className
+        )}
+        style={{
+          boxShadow: "var(--dropdown-menu-shadow)",
+          ...style,
+        }}
+      >
+        {items.map((item, index) => {
+          if (item.type === "separator") {
+            return <MenuSeparator key={`separator-${index}`} />;
+          }
+
+          if (item.type === "label") {
+            return <MenuLabel key={`label-${index}`}>{item.label}</MenuLabel>;
+          }
+
+          if (item.type === "custom") {
+            return (
+              <React.Fragment key={`custom-${index}`}>
+                {item.render()}
+              </React.Fragment>
+            );
+          }
+
+          const itemOption = item.item;
+          const visualType = itemOption.type || "default";
+
+          // Determine checked/selected state
+          let isChecked = false;
+          if (visualType === "checkbox" || visualType === "radio") {
+            isChecked =
+              itemOption.checked ?? selectedValues.includes(itemOption.value);
+          } else {
+            isChecked = selectedValues.includes(itemOption.value);
+          }
+
+          return (
+            <MenuItem
+              key={itemOption.value}
+              option={itemOption}
+              visualType={visualType}
+              isChecked={isChecked}
+              onSelect={() => {
+                onSelect?.(itemOption.value, itemOption);
+                itemOption.onClick?.();
+              }}
+            />
+          );
+        })}
+      </div>
+    );
+  }
+);
+
+Menu.displayName = "Menu";
+
+// ==================== Menu Item ====================
+
+type MenuItemProps = {
+  option: MenuOption;
+  visualType: "default" | "checkbox" | "radio";
+  isChecked: boolean;
+  onSelect: () => void;
+  className?: string;
+};
+
+export const MenuItem = forwardRef<HTMLDivElement, MenuItemProps>(
+  ({ option, visualType, isChecked, onSelect, className }, ref) => {
+    // Render indicator based on visual type
+    const renderIndicator = () => {
+      if (visualType === "checkbox" && isChecked) {
+        return (
+          <span className="absolute left-4 flex items-center justify-center">
+            <Icon type="heroicons" name="check" className="size-4" />
+          </span>
+        );
+      }
+      if (visualType === "radio" && isChecked) {
+        return (
+          <span className="absolute left-4 flex items-center justify-center">
+            <Icon
+              type="heroicons"
+              name="circle"
+              className="h-2 w-2 fill-current"
+            />
+          </span>
+        );
+      }
+      return null;
+    };
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "relative flex gap-3 cursor-pointer select-none box-border items-center py-4 pl-9 pr-4 typography-subtitile4 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-subtitile5":
+              isChecked,
+            "pointer-events-none opacity-50": option.disabled,
+            "text-red-500": option.danger,
+          },
+          className
+        )}
+        onClick={option.disabled ? undefined : onSelect}
+      >
+        {renderIndicator()}
+        {option.icon && <span className="flex-shrink-0">{option.icon}</span>}
+        {option.label}
+      </div>
+    );
+  }
+);
+
+MenuItem.displayName = "MenuItem";
+
+// ==================== Menu Separator ====================
+
+type MenuSeparatorProps = {
+  className?: string;
+};
+
+export const MenuSeparator = forwardRef<HTMLDivElement, MenuSeparatorProps>(
+  ({ className }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "-mx-2 my-2 h-px bg-[var(--dropdown-menu-seperator-bg)]",
+          className
+        )}
+      />
+    );
+  }
+);
+
+MenuSeparator.displayName = "MenuSeparator";
+
+// ==================== Menu Label ====================
+
+type MenuLabelProps = {
+  children: ReactNode;
+  className?: string;
+};
+
+export const MenuLabel = forwardRef<HTMLDivElement, MenuLabelProps>(
+  ({ children, className }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "px-3 py-2 typography-small4 text-text-grey-medium",
+          className
+        )}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+MenuLabel.displayName = "MenuLabel";
+
+// ==================== Exports ====================
+
+export default Menu;

package/src/components/Menu/helpers.ts

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

package/src/components/Menu/index.ts

@@ -0,0 +1,7 @@
+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/src/components/Search/Search.tsx

@@ -1,16 +1,29 @@
 import React, { forwardRef } from "react";
-import Dropdown, { DropdownProps } from "../Dropdown/Dropdown";
+import Dropdown, { Options } from "../Dropdown/Dropdown";
+import { InputProps } from "../TextInput/TextInput";
 
-export type SearchProps = Omit<
-  DropdownProps,
-  | "isFloatingLabel"
-  | "keepCloseIconOnValue"
-  | "hasClearIcon"
-  | "hasSearchIcon"
-  | "endIcon"
-  | "filterMode"
-  | "isFloatingLabel"
->;
+export type SearchProps = {
+  id?: string;
+  label?: string;
+  size?: "sm" | "md" | "lg";
+  rounded?: "none" | "normal" | "full";
+  variant?: "flat" | "outline" | "underline";
+  helperText?: string;
+  errorMessage?: string;
+  fullwidth?: boolean;
+  disabled?: boolean;
+  error?: boolean;
+  required?: boolean;
+  modal?: boolean;
+  className?: string;
+  optionContainerClassName?: string;
+  optionItemClassName?: string;
+  optionNotFoundItemClassName?: string;
+  options: Options[];
+  value?: Options;
+  onChangeText?: InputProps["onChange"];
+  onSelect?: (value: Options) => void;
+} & Omit<InputProps, "value" | "onSelect">;
 
 const Search = forwardRef<HTMLInputElement, SearchProps>((props, ref) => {
   return (

package/src/index.ts

@@ -37,6 +37,7 @@ export * from "./components/InputFilter/InputFilter";
 export * from "./components/Slider/Slider";
 export * from "./components/Switch/Switch";
 export * from "./components/DropdownMenu/DropdownMenu";
+export * from "./components/Menu/Menu";
 export * from "./components/Tooltip/Tooltip";
 export * from "./components/Tooltip/TooltipSimple";
 export * from "./components/Toast/Toast";