@noya-app/noya-designsystem 0.1.77 → 0.1.79

package/src/components/EmojiPicker.tsx

@@ -0,0 +1,645 @@
+"use client";
+
+import {
+  ClockIcon,
+  CookieIcon,
+  FaceIcon,
+  FlagIcon,
+  HomeIcon,
+  LightningBoltIcon,
+  MagnifyingGlassIcon,
+  MapPinIcon,
+  PersonIcon,
+  StarIcon,
+  SunIcon,
+} from "@noya-app/noya-icons";
+import type { Gemoji } from "gemoji";
+import React, {
+  memo,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { cx } from "../utils/classNames";
+import {
+  SKIN_TONES,
+  SKIN_TONE_DISPLAY,
+  SkinTone,
+  applySkinTone,
+} from "../utils/skinTone";
+import { Divider } from "./Divider";
+import { DropdownMenu } from "./DropdownMenu";
+import { InputField } from "./InputField";
+import { IVirtualizedList } from "./IVirtualizedList";
+import { SegmentedControl } from "./SegmentedControl";
+import { Virtualized } from "./Virtualized";
+
+export type { Gemoji };
+
+// Storage interface for persisting skin tone preference
+export interface EmojiPickerStorage {
+  getSkinTone: () => SkinTone | null;
+  setSkinTone: (tone: SkinTone) => void;
+}
+
+const SKIN_TONE_STORAGE_KEY = "emoji-picker-skin-tone";
+
+// Default localStorage implementation with SSR safety
+const defaultStorage: EmojiPickerStorage = {
+  getSkinTone: () => {
+    if (typeof localStorage === "undefined") return null;
+    try {
+      const value = localStorage.getItem(SKIN_TONE_STORAGE_KEY);
+      if (value && Object.keys(SKIN_TONES).includes(value)) {
+        return value as SkinTone;
+      }
+    } catch {
+      // localStorage may throw in some environments
+    }
+    return null;
+  },
+  setSkinTone: (tone: SkinTone) => {
+    if (typeof localStorage === "undefined") return;
+    try {
+      localStorage.setItem(SKIN_TONE_STORAGE_KEY, tone);
+    } catch {
+      // localStorage may throw in some environments
+    }
+  },
+};
+
+const emojiCategories = [
+  "Smileys & Emotion",
+  "People & Body",
+  "Animals & Nature",
+  "Food & Drink",
+  "Travel & Places",
+  "Activities",
+  "Objects",
+  "Symbols",
+  "Flags",
+] as const;
+
+type EmojiCategory = (typeof emojiCategories)[number];
+
+const EMOJI_SIZE = 32;
+const MIN_EMOJI_GAP = 4;
+const SECTION_HEADER_HEIGHT = 24;
+const HEADER_HEIGHT = 80; // Search + category tabs
+const FOOTER_HEIGHT = 40;
+const HORIZONTAL_PADDING = 8; // n-px-2 = 8px each side
+
+// Category icons mapping
+const categoryIcons: Record<
+  EmojiCategory | "search" | "frequent",
+  React.ReactElement
+> = {
+  search: <MagnifyingGlassIcon />,
+  frequent: <ClockIcon />,
+  "Smileys & Emotion": <FaceIcon />,
+  "People & Body": <PersonIcon />,
+  "Animals & Nature": <SunIcon />,
+  "Food & Drink": <CookieIcon />,
+  "Travel & Places": <MapPinIcon />,
+  Activities: <LightningBoltIcon />,
+  Objects: <HomeIcon />,
+  Symbols: <StarIcon />,
+  Flags: <FlagIcon />,
+};
+
+interface EmojiPickerProps {
+  size: { width: number; height: number };
+  emojis: Gemoji[];
+  onSelect: (emoji: string) => void;
+  storage?: EmojiPickerStorage;
+}
+
+// Row types for virtualized list
+type EmojiRow =
+  | { type: "header"; category: string }
+  | { type: "emojis"; emojis: Gemoji[]; startIndex: number };
+
+function buildRows(
+  emojis: Gemoji[],
+  itemsPerRow: number,
+  groupByCategory: boolean,
+  frequentlyUsed: string[]
+): EmojiRow[] {
+  const rows: EmojiRow[] = [];
+
+  if (groupByCategory) {
+    // Add frequently used section if any
+    if (frequentlyUsed.length > 0) {
+      rows.push({ type: "header", category: "Frequently Used" });
+      const frequentEmojis = frequentlyUsed
+        .map((e) => emojis.find((em) => em.emoji === e))
+        .filter((e): e is Gemoji => e !== undefined);
+      for (let i = 0; i < frequentEmojis.length; i += itemsPerRow) {
+        rows.push({
+          type: "emojis",
+          emojis: frequentEmojis.slice(i, i + itemsPerRow),
+          startIndex: i,
+        });
+      }
+    }
+
+    // Group by category
+    for (const category of emojiCategories) {
+      const categoryEmojis = emojis.filter((e) => e.category === category);
+      if (categoryEmojis.length === 0) continue;
+
+      rows.push({ type: "header", category });
+      for (let i = 0; i < categoryEmojis.length; i += itemsPerRow) {
+        rows.push({
+          type: "emojis",
+          emojis: categoryEmojis.slice(i, i + itemsPerRow),
+          startIndex: i,
+        });
+      }
+    }
+  } else {
+    // Flat list for search results
+    for (let i = 0; i < emojis.length; i += itemsPerRow) {
+      rows.push({
+        type: "emojis",
+        emojis: emojis.slice(i, i + itemsPerRow),
+        startIndex: i,
+      });
+    }
+  }
+
+  return rows;
+}
+
+function filterEmojis(emojis: Gemoji[], query: string): Gemoji[] {
+  if (!query) return emojis;
+
+  const lowerQuery = query.toLowerCase();
+  return emojis.filter(
+    (e) =>
+      e.names.some((n) => n.toLowerCase().includes(lowerQuery)) ||
+      e.tags?.some((t) => t.toLowerCase().includes(lowerQuery)) ||
+      e.description?.toLowerCase().includes(lowerQuery)
+  );
+}
+
+const EmojiButton = memo(function EmojiButton({
+  emoji,
+  displayEmoji,
+  onSelect,
+  onHover,
+  isSelected,
+  buttonRef,
+}: {
+  emoji: Gemoji;
+  displayEmoji: string;
+  onSelect: (emoji: string) => void;
+  onHover: (emoji: Gemoji | null) => void;
+  isSelected?: boolean;
+  buttonRef?: React.Ref<HTMLButtonElement>;
+}) {
+  return (
+    <button
+      ref={buttonRef}
+      type="button"
+      className={cx(
+        "n-flex n-items-center n-justify-center n-rounded n-cursor-pointer n-border-0 n-bg-transparent",
+        isSelected
+          ? "n-bg-primary/20 n-ring-2 n-ring-primary"
+          : "hover:n-bg-button-background-hover active:n-bg-button-background-active"
+      )}
+      style={{ width: EMOJI_SIZE, height: EMOJI_SIZE, fontSize: 22 }}
+      onClick={() => onSelect(emoji.emoji)}
+      onMouseEnter={() => onHover(emoji)}
+      onMouseLeave={() => onHover(null)}
+      title={`:${emoji.names[0]}:`}
+      tabIndex={-1}
+    >
+      {displayEmoji}
+    </button>
+  );
+});
+
+export const EmojiPicker = memo(function EmojiPicker({
+  size,
+  emojis,
+  onSelect,
+  storage = defaultStorage,
+}: EmojiPickerProps) {
+  const [search, setSearch] = useState("");
+  const [hoveredEmoji, setHoveredEmoji] = useState<Gemoji | null>(null);
+  const [frequentlyUsed, setFrequentlyUsed] = useState<string[]>([]);
+  const [activeCategory, setActiveCategory] = useState<string | null>(null);
+  const [skinTone, _setSkinTone] = useState<SkinTone>(
+    () => storage.getSkinTone() ?? "default"
+  );
+
+  const setSkinTone = useCallback(
+    (tone: SkinTone) => {
+      _setSkinTone(tone);
+      storage.setSkinTone(tone);
+    },
+    [storage]
+  );
+  // Selected emoji index for keyboard navigation (0 = first emoji by default)
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const virtualizedRef = useRef<IVirtualizedList>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // Content width excluding horizontal padding (8px each side)
+  const contentWidth = size.width - HORIZONTAL_PADDING * 2;
+  // Calculate how many emojis fit with minimum gap
+  const itemsPerRow = Math.floor(
+    (contentWidth + MIN_EMOJI_GAP) / (EMOJI_SIZE + MIN_EMOJI_GAP)
+  );
+  // Calculate actual gap to distribute remaining space evenly
+  const emojiGap =
+    itemsPerRow > 1
+      ? (contentWidth - itemsPerRow * EMOJI_SIZE) / (itemsPerRow - 1)
+      : 0;
+  const gridHeight = size.height - HEADER_HEIGHT - FOOTER_HEIGHT;
+
+  const filteredEmojis = useMemo(
+    () => filterEmojis(emojis, search),
+    [emojis, search]
+  );
+  const isSearching = search.length > 0;
+
+  const rows = useMemo(
+    () => buildRows(filteredEmojis, itemsPerRow, !isSearching, frequentlyUsed),
+    [filteredEmojis, itemsPerRow, isSearching, frequentlyUsed]
+  );
+
+  // Build flat list of emojis for keyboard navigation
+  const flatEmojiList = useMemo(() => {
+    const list: Gemoji[] = [];
+    for (const row of rows) {
+      if (row.type === "emojis") {
+        list.push(...row.emojis);
+      }
+    }
+    return list;
+  }, [rows]);
+
+  // Reset selection to first emoji when search changes
+  useEffect(() => {
+    setSelectedIndex(0);
+  }, [search]);
+
+  // Get selected emoji for footer display
+  const selectedEmoji =
+    selectedIndex >= 0 ? flatEmojiList[selectedIndex] : null;
+
+  // Build category -> row index mapping for scrolling
+  const categoryRowIndices = useMemo(() => {
+    const indices: Record<string, number> = {};
+    rows.forEach((row, index) => {
+      if (row.type === "header" && !(row.category in indices)) {
+        indices[row.category] = index;
+      }
+    });
+    return indices;
+  }, [rows]);
+
+  const handleSelect = useCallback(
+    (emoji: string) => {
+      const emojiWithSkinTone = applySkinTone(emoji, skinTone);
+      onSelect(emojiWithSkinTone);
+      // Add to frequently used (keep max 16, most recent first)
+      // Store the base emoji without skin tone for consistent lookup
+      setFrequentlyUsed((prev) => {
+        const filtered = prev.filter((e) => e !== emoji);
+        return [emoji, ...filtered].slice(0, 16);
+      });
+    },
+    [onSelect, skinTone]
+  );
+
+  // Find which row contains a given flat emoji index
+  const getRowIndexForEmojiIndex = useCallback(
+    (emojiIndex: number) => {
+      let count = 0;
+      for (let rowIndex = 0; rowIndex < rows.length; rowIndex++) {
+        const row = rows[rowIndex];
+        if (row.type === "emojis") {
+          if (count + row.emojis.length > emojiIndex) {
+            return rowIndex;
+          }
+          count += row.emojis.length;
+        }
+      }
+      return 0;
+    },
+    [rows]
+  );
+
+  // Scroll to make selected emoji visible
+  useEffect(() => {
+    if (selectedIndex < 0) return;
+    if (!virtualizedRef.current) return;
+
+    const rowIndex = getRowIndexForEmojiIndex(selectedIndex);
+    virtualizedRef.current.scrollToIndex(rowIndex, {
+      padding: 2,
+    });
+  }, [selectedIndex, getRowIndexForEmojiIndex]);
+
+  const handleKeyDown = useCallback(
+    (event: React.KeyboardEvent) => {
+      const totalEmojis = flatEmojiList.length;
+      if (totalEmojis === 0) return;
+
+      switch (event.key) {
+        case "ArrowDown": {
+          event.preventDefault();
+          // Move down one row
+          const newIndex = Math.min(
+            selectedIndex + itemsPerRow,
+            totalEmojis - 1
+          );
+          setSelectedIndex(newIndex);
+          break;
+        }
+        case "ArrowUp": {
+          event.preventDefault();
+          // Move up one row (stop at first row)
+          if (selectedIndex >= itemsPerRow) {
+            setSelectedIndex(selectedIndex - itemsPerRow);
+          }
+          break;
+        }
+        case "ArrowRight": {
+          // If we can move right in grid, do it; otherwise let input handle it
+          if (selectedIndex < totalEmojis - 1) {
+            event.preventDefault();
+            setSelectedIndex(selectedIndex + 1);
+          }
+          // else: let the input cursor move naturally
+          break;
+        }
+        case "ArrowLeft": {
+          // Prioritize grid navigation; only let cursor move if at index 0
+          if (selectedIndex > 0) {
+            event.preventDefault();
+            setSelectedIndex(selectedIndex - 1);
+          }
+          // else: at index 0, let the input cursor move naturally
+          break;
+        }
+        case "Enter": {
+          if (selectedIndex >= 0 && flatEmojiList[selectedIndex]) {
+            event.preventDefault();
+            handleSelect(flatEmojiList[selectedIndex].emoji);
+          }
+          break;
+        }
+        case "Escape": {
+          // Clear search and reset selection
+          if (search) {
+            event.preventDefault();
+            setSearch("");
+            setSelectedIndex(0);
+          }
+          break;
+        }
+      }
+    },
+    [selectedIndex, itemsPerRow, flatEmojiList, handleSelect, search]
+  );
+
+  const handleCategoryChange = useCallback(
+    (category: string) => {
+      if (category === "search") {
+        inputRef.current?.focus();
+        setActiveCategory(null);
+        return;
+      }
+
+      setActiveCategory(category);
+      setSearch(""); // Clear search when selecting category
+
+      // Find the row index for this category and scroll to it
+      const categoryName =
+        category === "frequent" ? "Frequently Used" : category;
+      const rowIndex = categoryRowIndices[categoryName];
+      if (rowIndex !== undefined && virtualizedRef.current) {
+        virtualizedRef.current.scrollToIndex(rowIndex, {
+          align: "start",
+          padding: 2,
+        });
+      }
+    },
+    [categoryRowIndices]
+  );
+
+  const getRowHeight = useCallback(
+    (index: number) => {
+      const row = rows[index];
+      return row?.type === "header" ? SECTION_HEADER_HEIGHT : EMOJI_SIZE;
+    },
+    [rows]
+  );
+
+  // Build a map from emoji to its flat index for selection highlighting
+  const emojiToFlatIndex = useMemo(() => {
+    const map = new Map<string, number>();
+    flatEmojiList.forEach((emoji, index) => {
+      map.set(emoji.emoji, index);
+    });
+    return map;
+  }, [flatEmojiList]);
+
+  const renderRow = useCallback(
+    (index: number) => {
+      const row = rows[index];
+      if (!row) return null;
+
+      if (row.type === "header") {
+        return (
+          <div
+            className="n-text-xs n-font-medium n-text-text-muted n-px-2 n-pb-1 n-flex n-items-end n-bg-popover-background"
+            style={{ height: SECTION_HEADER_HEIGHT }}
+          >
+            {row.category}
+          </div>
+        );
+      }
+
+      return (
+        <div
+          className="n-grid n-px-2"
+          style={{
+            gridTemplateColumns: `repeat(${itemsPerRow}, ${EMOJI_SIZE}px)`,
+            gap: emojiGap,
+          }}
+        >
+          {row.emojis.map((emoji) => {
+            const flatIndex = emojiToFlatIndex.get(emoji.emoji) ?? -1;
+            return (
+              <EmojiButton
+                key={emoji.emoji}
+                emoji={emoji}
+                displayEmoji={applySkinTone(emoji.emoji, skinTone)}
+                onSelect={handleSelect}
+                onHover={setHoveredEmoji}
+                isSelected={flatIndex === selectedIndex}
+              />
+            );
+          })}
+        </div>
+      );
+    },
+    [
+      rows,
+      handleSelect,
+      itemsPerRow,
+      emojiGap,
+      emojiToFlatIndex,
+      selectedIndex,
+      skinTone,
+    ]
+  );
+
+  // Category tabs items
+  const categoryItems = useMemo(
+    () => [
+      {
+        value: "search",
+        icon: categoryIcons.search,
+        title: "",
+        tooltip: "Search",
+      },
+      ...(frequentlyUsed.length > 0
+        ? [
+            {
+              value: "frequent",
+              icon: categoryIcons.frequent,
+              title: "",
+              tooltip: "Frequently Used",
+            },
+          ]
+        : []),
+      ...emojiCategories.map((cat) => ({
+        value: cat,
+        icon: categoryIcons[cat],
+        title: "",
+        tooltip: cat,
+      })),
+    ],
+    [frequentlyUsed.length]
+  );
+
+  // Show hovered emoji, or selected emoji if nothing hovered
+  const displayEmoji = hoveredEmoji ?? selectedEmoji;
+  const footerText = displayEmoji
+    ? `:${displayEmoji.names[0]}:${displayEmoji.names.length > 1 ? ` :${displayEmoji.names[1]}:` : ""}`
+    : "";
+
+  // Skin tone picker menu items
+  const skinToneMenuItems = useMemo(
+    () =>
+      (Object.keys(SKIN_TONES) as SkinTone[]).map((tone) => ({
+        value: tone,
+        title: (
+          <span className="n-flex n-items-center n-gap-2">
+            <span style={{ fontSize: 18 }}>{SKIN_TONE_DISPLAY[tone]}</span>
+            <span className="n-capitalize">
+              {tone === "default" ? "Default" : tone.replace("-", " ")}
+            </span>
+          </span>
+        ),
+        checked: skinTone === tone,
+      })),
+    [skinTone]
+  );
+
+  return (
+    <div
+      className="n-flex n-flex-col n-bg-popover-background n-outline-none"
+      style={{ width: size.width, height: size.height }}
+    >
+      <SegmentedControl
+        variant="tabs"
+        items={categoryItems}
+        value={activeCategory ?? "search"}
+        onValueChange={handleCategoryChange}
+        allowEmpty
+        className="n-flex-nowrap n-px-2"
+        // className="n-overflow-x-auto n-flex-nowrap n-px-2"
+      />
+      <Divider />
+      {/* Header: Search + Category Tabs */}
+      <div className="n-flex n-flex-col n-gap-2 n-p-2">
+        <InputField.Root>
+          <InputField.Input
+            ref={inputRef}
+            value={search}
+            onChange={setSearch}
+            onKeyDown={handleKeyDown}
+            placeholder="Search all emoji"
+            className="n-text-sm"
+            autoFocus
+          />
+        </InputField.Root>
+      </div>
+      {/* Emoji Grid */}
+      <div className="n-flex-1 n-overflow-hidden">
+        {rows.length > 0 ? (
+          <Virtualized
+            ref={virtualizedRef}
+            height={gridHeight}
+            itemCount={rows.length}
+            getItemHeight={getRowHeight}
+            renderItem={renderRow}
+            overscan={4}
+            padding={{ top: 2, bottom: 2 }}
+            useScrollArea
+            isStickyRow={(index) => rows[index].type === "header"}
+          />
+        ) : (
+          <div className="n-flex n-items-center n-justify-center n-h-full n-text-text-muted n-text-sm">
+            No emoji found
+          </div>
+        )}
+      </div>
+      {/* Footer */}
+      <div
+        className={cx(
+          "n-flex n-items-center n-px-2 n-border-t n-border-b n-border-t-divider n-border-b-transparent n-text-sm n-text-text-muted n-bg-input-background-light"
+        )}
+        style={{ height: FOOTER_HEIGHT, gap: emojiGap }}
+      >
+        {displayEmoji && (
+          <>
+            <span
+              className="n-flex n-items-center n-justify-center n-shrink-0"
+              style={{ width: EMOJI_SIZE, height: EMOJI_SIZE, fontSize: 22 }}
+            >
+              {applySkinTone(displayEmoji.emoji, skinTone)}
+            </span>
+            <span className="n-truncate n-flex-1">{footerText}</span>
+          </>
+        )}
+        {!displayEmoji && <span className="n-flex-1">&nbsp;</span>}
+        <DropdownMenu
+          items={skinToneMenuItems}
+          onSelect={(tone) => setSkinTone(tone as SkinTone)}
+          side="top"
+          align="end"
+          sideOffset={8}
+        >
+          <button
+            type="button"
+            className="n-flex n-items-center n-justify-center n-rounded n-cursor-pointer n-border-0 n-bg-transparent hover:n-bg-button-background-hover active:n-bg-button-background-active n-shrink-0"
+            style={{ width: EMOJI_SIZE, height: EMOJI_SIZE, fontSize: 18 }}
+            title="Choose skin tone"
+          >
+            {SKIN_TONE_DISPLAY[skinTone]}
+          </button>
+        </DropdownMenu>
+      </div>
+    </div>
+  );
+});

package/src/components/GridView.tsx

@@ -410,7 +410,11 @@ const GridViewRoot = forwardRef(function GridViewRoot(
         {...props}
         ref={forwardedRef}
       >
-        {scrollable ? <ScrollArea>{content}</ScrollArea> : content}
+        {scrollable ? (
+          <ScrollArea className="n-flex-1 n-min-h-0">{content}</ScrollArea>
+        ) : (
+          content
+        )}
       </div>
     </GridViewContext.Provider>
   );

package/src/components/IVirtualizedList.tsx

@@ -1,5 +1,25 @@
 "use client";
 
+export type ScrollToIndexAlign = "auto" | "start" | "center" | "end";
+
+export type ScrollToIndexPadding =
+  | number
+  | {
+      top?: number;
+      bottom?: number;
+    };
+
+export interface ScrollToIndexOptions {
+  align?: ScrollToIndexAlign;
+  /**
+   * Extra padding to include when scrolling. When scrolling to "start",
+   * this adds space above the item. When scrolling to "end", this adds
+   * space below. For "auto", it applies the appropriate padding based
+   * on scroll direction. A number applies to both directions.
+   */
+  padding?: ScrollToIndexPadding;
+}
+
 export interface IVirtualizedList {
-  scrollToIndex(index: number): void;
+  scrollToIndex(index: number, options?: ScrollToIndexOptions): void;
 }

package/src/components/InputField.tsx

@@ -61,8 +61,8 @@ export const getFieldSpacing = ({
   startWidth?: number;
   variant?: InputFieldVariant;
 }) => ({
-  paddingLeft: `${variant === "bare" ? startWidth : startWidth ? startWidth + 12 : 6}px`,
-  paddingRight: `${variant === "bare" ? endWidth : endWidth ? endWidth + 12 : 6}px`,
+  paddingLeft: `${variant === "bare" ? startWidth : startWidth ? startWidth + 12 : 8}px`,
+  paddingRight: `${variant === "bare" ? endWidth : endWidth ? endWidth + 12 : 8}px`,
 });
 
 /* ----------------------------------------------------------------------------
@@ -663,14 +663,6 @@ function InputFieldRoot({
           trigger={rootElement}
           sideOffset={sideOffset}
           showArrow={false}
-          onOpenAutoFocus={(event) => {
-            event.preventDefault();
-            event.stopPropagation();
-          }}
-          onCloseAutoFocus={(event) => {
-            event.preventDefault();
-            event.stopPropagation();
-          }}
         >
           {measuredWidthObject && (
             <div