@godxjp/ui 20.2.1 → 21.0.0

package/dist/components/data-entry/chat-suggestion.js

@@ -0,0 +1,285 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { useTranslation } from "../../i18n/use-translation.js";
+import { cn } from "../../lib/utils.js";
+import { VisuallyHidden } from "../general/visually-hidden.js";
+import { Popover, PopoverAnchor, PopoverContent } from "../data-display/popover.js";
+import { Command, CommandEmpty, CommandItem, CommandList } from "./command.js";
+function matchTrigger(text, caret, trigger) {
+  if (!trigger) return null;
+  const before = text.slice(0, caret);
+  const start = before.lastIndexOf(trigger);
+  if (start === -1) return null;
+  const query = before.slice(start + trigger.length);
+  if (/\s/.test(query)) return null;
+  const preceding = start === 0 ? "" : before[start - 1];
+  if (preceding !== "" && !/\s/.test(preceding)) return null;
+  return { query };
+}
+function levelItems(items, path) {
+  let current = items;
+  for (const step of path) {
+    const next = current.find((item) => item.value === step)?.children;
+    if (!next) return current;
+    current = next;
+  }
+  return current;
+}
+function labelOf(item) {
+  return item.label ?? item.value;
+}
+function matches(item, query) {
+  if (!query) return true;
+  const needle = query.toLocaleLowerCase();
+  return labelOf(item).toLocaleLowerCase().includes(needle) || item.value.toLocaleLowerCase().includes(needle) || (item.description?.toLocaleLowerCase().includes(needle) ?? false);
+}
+function ChatSuggestion({
+  items,
+  onValueChange,
+  triggerCharacter = "/",
+  open,
+  defaultOpen,
+  onOpenChange,
+  children,
+  emptyMessage,
+  listLabel: listLabelProp,
+  id,
+  className
+}) {
+  const { t } = useTranslation();
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen ?? false);
+  const isOpen = open ?? uncontrolledOpen;
+  const [query, setQuery] = React.useState("");
+  const [path, setPath] = React.useState([]);
+  const [activeValue, setActiveValue] = React.useState("");
+  const [activeId, setActiveId] = React.useState(void 0);
+  const anchorRef = React.useRef(null);
+  const contentRef = React.useRef(null);
+  const [listId, setListId] = React.useState(void 0);
+  const field = React.useCallback(() => anchorRef.current?.querySelector("textarea") ?? null, []);
+  const openRef = React.useRef(isOpen);
+  openRef.current = isOpen;
+  const setOpen = React.useCallback(
+    (next) => {
+      if (openRef.current === next) return;
+      openRef.current = next;
+      if (open === void 0) setUncontrolledOpen(next);
+      onOpenChange?.(next);
+      if (!next) {
+        setQuery("");
+        setPath([]);
+      }
+    },
+    [open, onOpenChange]
+  );
+  const visible = React.useMemo(() => {
+    return levelItems(items, path).filter((item) => matches(item, query));
+  }, [items, path, query]);
+  const enabled = React.useMemo(() => visible.filter((item) => !item.disabled), [visible]);
+  React.useEffect(() => {
+    if (enabled.length === 0) {
+      setActiveValue("");
+      return;
+    }
+    setActiveValue(
+      (current) => enabled.some((item) => item.value === current) ? current : enabled[0].value
+    );
+  }, [enabled]);
+  React.useEffect(() => {
+    if (!isOpen) {
+      setListId(void 0);
+      setActiveId(void 0);
+      return;
+    }
+    const content = contentRef.current;
+    setListId(content?.querySelector("[cmdk-list]")?.id || void 0);
+    setActiveId(content?.querySelector('[cmdk-item][aria-selected="true"]')?.id || void 0);
+  });
+  const close = React.useCallback(() => {
+    setOpen(false);
+    field()?.focus();
+  }, [field, setOpen]);
+  const evaluate = React.useCallback(() => {
+    const node = field();
+    if (!node) return;
+    const caret = node.selectionStart ?? node.value.length;
+    const hit = matchTrigger(node.value, caret, triggerCharacter);
+    if (!hit) {
+      setOpen(false);
+      return;
+    }
+    setQuery(hit.query);
+    setOpen(true);
+  }, [field, setOpen, triggerCharacter]);
+  const onTrigger = React.useCallback(
+    (next) => {
+      if (next === false) {
+        setOpen(false);
+        return;
+      }
+      if (next === void 0) {
+        setQuery("");
+        setOpen(true);
+        return;
+      }
+      window.setTimeout(evaluate, 0);
+    },
+    [evaluate, setOpen]
+  );
+  const pick = React.useCallback(
+    (item) => {
+      if (item.disabled) return;
+      if (item.children && item.children.length > 0) {
+        setPath((current) => [...current, item.value]);
+        setQuery("");
+        field()?.focus();
+        return;
+      }
+      onValueChange?.(item.value);
+      setOpen(false);
+      field()?.focus();
+    },
+    [field, onValueChange, setOpen]
+  );
+  const move = React.useCallback(
+    (direction) => {
+      if (enabled.length === 0) return;
+      const index = enabled.findIndex((item) => item.value === activeValue);
+      const from = index === -1 ? direction === 1 ? -1 : 0 : index;
+      const next = (from + direction + enabled.length) % enabled.length;
+      setActiveValue(enabled[next].value);
+    },
+    [activeValue, enabled]
+  );
+  const onKeyDown = React.useCallback(
+    (event) => {
+      if (!openRef.current) {
+        if (event.key.startsWith("Arrow") || event.key === "Home" || event.key === "End") {
+          window.setTimeout(evaluate, 0);
+        }
+        return;
+      }
+      switch (event.key) {
+        case "ArrowDown":
+          event.preventDefault();
+          move(1);
+          return;
+        case "ArrowUp":
+          event.preventDefault();
+          move(-1);
+          return;
+        case "Enter":
+        case "Tab": {
+          const item = enabled.find((candidate) => candidate.value === activeValue);
+          if (!item) return;
+          event.preventDefault();
+          pick(item);
+          return;
+        }
+        case "Escape":
+          event.preventDefault();
+          event.stopPropagation();
+          close();
+          return;
+        default:
+          if (event.key.startsWith("Arrow") || event.key === "Home" || event.key === "End") {
+            window.setTimeout(evaluate, 0);
+          }
+      }
+    },
+    [activeValue, close, enabled, evaluate, move, pick]
+  );
+  const listLabel = listLabelProp ?? t("dataEntry.chatSuggestion.label");
+  return /* @__PURE__ */ jsxs(Popover, { open: isOpen, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsxs(
+      PopoverAnchor,
+      {
+        ref: anchorRef,
+        id,
+        "data-slot": "chat-suggestion",
+        className: cn("block w-full", className),
+        onPointerUp: () => window.setTimeout(evaluate, 0),
+        onBlurCapture: (event) => {
+          const next = event.relatedTarget;
+          if (next && anchorRef.current?.contains(next)) return;
+          if (openRef.current) setOpen(false);
+        },
+        children: [
+          children({
+            onTrigger,
+            onKeyDown
+          }),
+          /* @__PURE__ */ jsx(FieldPopupWiring, { field, open: isOpen, listId, activeId }),
+          /* @__PURE__ */ jsx(VisuallyHidden, { role: "status", "aria-live": "polite", children: isOpen ? t("dataEntry.chatSuggestion.count", { count: visible.length }) : "" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      PopoverContent,
+      {
+        ref: contentRef,
+        flush: true,
+        align: "start",
+        "aria-label": listLabel,
+        className: "ui-chat-suggestion-panel",
+        onOpenAutoFocus: (event) => event.preventDefault(),
+        onCloseAutoFocus: (event) => event.preventDefault(),
+        children: /* @__PURE__ */ jsx(
+          Command,
+          {
+            value: activeValue,
+            onValueChange: setActiveValue,
+            shouldFilter: false,
+            label: listLabel,
+            children: /* @__PURE__ */ jsxs(CommandList, { label: listLabel, children: [
+              /* @__PURE__ */ jsx(CommandEmpty, { children: emptyMessage ?? t("dataEntry.chatSuggestion.empty") }),
+              visible.map((item) => /* @__PURE__ */ jsxs(
+                CommandItem,
+                {
+                  value: item.value,
+                  disabled: item.disabled,
+                  onSelect: () => pick(item),
+                  children: [
+                    item.icon ? /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center", "aria-hidden": "true", children: item.icon }) : null,
+                    /* @__PURE__ */ jsxs("span", { className: "ui-chat-suggestion-item-text", children: [
+                      /* @__PURE__ */ jsx("span", { className: "truncate", children: labelOf(item) }),
+                      item.description ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground truncate text-xs", children: item.description }) : null
+                    ] })
+                  ]
+                },
+                item.value
+              ))
+            ] })
+          }
+        )
+      }
+    )
+  ] });
+}
+ChatSuggestion.displayName = "ChatSuggestion";
+function FieldPopupWiring({
+  field,
+  open,
+  listId,
+  activeId
+}) {
+  React.useEffect(() => {
+    const node = field();
+    if (!node) return;
+    node.setAttribute("aria-haspopup", "listbox");
+    node.setAttribute("aria-autocomplete", "list");
+    if (open && listId) {
+      node.setAttribute("aria-controls", listId);
+      if (activeId) node.setAttribute("aria-activedescendant", activeId);
+      else node.removeAttribute("aria-activedescendant");
+    } else {
+      node.removeAttribute("aria-controls");
+      node.removeAttribute("aria-activedescendant");
+    }
+  }, [activeId, field, listId, open]);
+  return null;
+}
+export {
+  ChatSuggestion
+};

package/dist/components/data-entry/index.d.ts

@@ -7,6 +7,10 @@ export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScro
 export { Checkbox } from "./checkbox.js";
 export { CheckboxGroup } from "./checkbox-group.js";
 export { Radio, RadioGroup, RadioItem, RadioGroupRoot } from "./radio.js";
+export { ChatComposer } from "./chat-composer.js";
+export type { ChatComposerProp, ChatComposerProps, ChatComposerSubmitTypeProp, } from "./chat-composer.js";
+export { ChatSuggestion } from "./chat-suggestion.js";
+export type { ChatSuggestionProp, ChatSuggestionProps, ChatSuggestionItemProp, ChatSuggestionRenderProp, } from "./chat-suggestion.js";
 export { Textarea } from "./textarea.js";
 export type { TextareaProps } from "./textarea.js";
 export { Form, useFormLayout, type FormLayoutContextValue } from "./form.js";

package/dist/components/data-entry/index.js

@@ -16,6 +16,8 @@ import {
 import { Checkbox } from "./checkbox.js";
 import { CheckboxGroup } from "./checkbox-group.js";
 import { Radio, RadioGroup, RadioItem, RadioGroupRoot } from "./radio.js";
+import { ChatComposer } from "./chat-composer.js";
+import { ChatSuggestion } from "./chat-suggestion.js";
 import { Textarea } from "./textarea.js";
 import { Form, useFormLayout } from "./form.js";
 import { FormField } from "./form-field.js";
@@ -64,6 +66,8 @@ export {
   BranchScopePicker,
   Calendar,
   Cascader,
+  ChatComposer,
+  ChatSuggestion,
   Checkbox,
   CheckboxGroup,
   ColorPicker,

package/dist/components/data-entry/textarea.js

@@ -158,11 +158,13 @@ const Textarea = React.forwardRef(
       }
     );
     if (!needsWrapper) return field;
+    const placeholderText = typeof props.placeholder === "string" ? props.placeholder : void 0;
+    const mirrorText = mirror.length > 0 ? mirror : placeholderText ?? "";
     return /* @__PURE__ */ jsxs(
       "span",
       {
         "data-slot": "textarea-affix-wrapper",
-        "data-autogrow-value": growing ? mirror : void 0,
+        "data-autogrow-value": growing ? mirrorText : void 0,
         style: { ...autoGrowVars, ...mirrorInset },
         className: cn(
           "relative w-full",

package/dist/components/data-entry/tree-utils.d.ts

@@ -1,48 +1,10 @@
-import type * as React from "react";
-/** Normalized tree node — the conventional `treeData` / Cascader `options` shape. */
-export type TreeOption = {
-    value: string;
-    label: React.ReactNode;
-    disabled?: boolean;
-    disableCheckbox?: boolean;
-    /** When false with `loadData`, shows expand affordance */
-    isLeaf?: boolean;
-    children?: TreeOption[];
-};
-export type TreeFieldNames = {
-    label?: string;
-    value?: string;
-    children?: string;
-};
-export type NormalizedTreeOption = TreeOption & {
-    children?: NormalizedTreeOption[];
-};
-type RawTreeNode = Record<string, unknown>;
-export declare function reactNodeText(value: React.ReactNode): string;
-export declare function normalizeTreeOptions(nodes: RawTreeNode[] | undefined, fieldNames?: TreeFieldNames): NormalizedTreeOption[];
-export declare function getNodeByPath(options: NormalizedTreeOption[], path: string[]): NormalizedTreeOption[];
-export declare function getOptionsAtPath(options: NormalizedTreeOption[], path: string[]): NormalizedTreeOption[];
-export declare function formatPathLabels(chain: NormalizedTreeOption[], separator?: string): string;
-export type TreePath = {
-    path: string[];
-    labels: string[];
-};
-export declare function collectLeafPaths(options: NormalizedTreeOption[], prefix?: string[], root?: NormalizedTreeOption[]): TreePath[];
-export declare function collectAllPaths(options: NormalizedTreeOption[], prefix?: string[], root?: NormalizedTreeOption[]): TreePath[];
-export declare function pathKey(path: string[]): string;
-export declare function pathsEqual(a: string[], b: string[]): boolean;
-export declare function filterTreeOptions(options: NormalizedTreeOption[], query: string, filter?: (query: string, path: NormalizedTreeOption[]) => boolean): TreePath[];
-export declare function getDescendantValues(node: NormalizedTreeOption): string[];
-export declare function flattenVisibleTree(options: NormalizedTreeOption[], expandedKeys: Set<string>, depth?: number): {
-    node: NormalizedTreeOption;
-    depth: number;
-    hasChildren: boolean;
-}[];
-export declare function filterVisibleTree(options: NormalizedTreeOption[], query: string): {
-    node: NormalizedTreeOption;
-    depth: number;
-    hasChildren: boolean;
-}[];
-export declare function collectAllExpandableKeys(options: NormalizedTreeOption[]): string[];
-export declare function findNodeByValue(options: NormalizedTreeOption[], value: string): NormalizedTreeOption | undefined;
-export {};
+/**
+ * RE-EXPORT SHIM — the tree model moved to `src/lib/tree.ts`.
+ *
+ * `Tree` (data-display) and `TreeSelect` (data-entry) are two SURFACES over ONE model. Forking the
+ * traversal would let a page tree and a dropdown tree disagree about what "expanded", "a leaf" or
+ * "every descendant" means — so the normalizer, the visible-row flattener and the descendant walk
+ * live in `src/lib/`, which both groups may import, and this path stays valid so nothing that
+ * already imports `./tree-utils` has to change.
+ */
+export * from "../../lib/tree.js";

package/dist/components/data-entry/tree-utils.js

@@ -1,154 +1 @@
-function reactNodeText(value) {
-  if (value == null || typeof value === "boolean") return "";
-  if (typeof value === "string" || typeof value === "number" || typeof value === "bigint") {
-    return String(value);
-  }
-  if (Array.isArray(value)) {
-    return value.map((item) => reactNodeText(item)).join("");
-  }
-  return "";
-}
-function unknownText(value) {
-  if (typeof value === "string" || typeof value === "number" || typeof value === "bigint") {
-    return String(value);
-  }
-  return "";
-}
-function normalizeTreeOptions(nodes, fieldNames) {
-  if (!nodes?.length) return [];
-  const labelKey = fieldNames?.label ?? "label";
-  const valueKey = fieldNames?.value ?? "value";
-  const childrenKey = fieldNames?.children ?? "children";
-  return nodes.map((node) => {
-    const children = node[childrenKey];
-    const value = unknownText(node[valueKey]);
-    const label = node[labelKey];
-    return {
-      value,
-      label: label ?? value,
-      disabled: Boolean(node.disabled),
-      disableCheckbox: Boolean(node.disableCheckbox),
-      isLeaf: node.isLeaf,
-      children: Array.isArray(children) ? normalizeTreeOptions(children, fieldNames) : void 0
-    };
-  });
-}
-function getNodeByPath(options, path) {
-  const chain = [];
-  let level = options;
-  for (const segment of path) {
-    const found = level.find((n) => n.value === segment);
-    if (!found) break;
-    chain.push(found);
-    level = found.children ?? [];
-  }
-  return chain;
-}
-function getOptionsAtPath(options, path) {
-  if (!path.length) return options;
-  const chain = getNodeByPath(options, path);
-  return chain.at(-1)?.children ?? [];
-}
-function formatPathLabels(chain, separator = " / ") {
-  return chain.map((n) => reactNodeText(n.label)).join(separator);
-}
-function collectLeafPaths(options, prefix = [], root = options) {
-  const out = [];
-  for (const node of options) {
-    const path = [...prefix, node.value];
-    const hasChildren = (node.children?.length ?? 0) > 0;
-    if (!hasChildren || node.isLeaf === true) {
-      out.push({ path, labels: getNodeByPath(root, path).map((n) => reactNodeText(n.label)) });
-    }
-    if (hasChildren) out.push(...collectLeafPaths(node.children, path, root));
-  }
-  return out;
-}
-function collectAllPaths(options, prefix = [], root = options) {
-  const out = [];
-  for (const node of options) {
-    const path = [...prefix, node.value];
-    out.push({ path, labels: getNodeByPath(root, path).map((n) => reactNodeText(n.label)) });
-    if (node.children?.length) out.push(...collectAllPaths(node.children, path, root));
-  }
-  return out;
-}
-function pathKey(path) {
-  return path.join("\0");
-}
-function pathsEqual(a, b) {
-  return a.length === b.length && a.every((v, i) => v === b[i]);
-}
-function filterTreeOptions(options, query, filter) {
-  const q = query.trim().toLowerCase();
-  if (!q) return [];
-  const paths = collectLeafPaths(options);
-  return paths.filter(({ path }) => {
-    const chain = getNodeByPath(options, path);
-    if (filter) return filter(query, chain);
-    return chain.some((n) => reactNodeText(n.label).toLowerCase().includes(q));
-  });
-}
-function getDescendantValues(node) {
-  const values = [node.value];
-  for (const child of node.children ?? []) values.push(...getDescendantValues(child));
-  return values;
-}
-function flattenVisibleTree(options, expandedKeys, depth = 0) {
-  const out = [];
-  for (const node of options) {
-    const hasChildren = (node.children?.length ?? 0) > 0 && node.isLeaf !== true;
-    out.push({ node, depth, hasChildren });
-    if (hasChildren && expandedKeys.has(node.value)) {
-      out.push(...flattenVisibleTree(node.children, expandedKeys, depth + 1));
-    }
-  }
-  return out;
-}
-function filterVisibleTree(options, query) {
-  const q = query.trim().toLowerCase();
-  if (!q) return flattenVisibleTree(options, new Set(collectAllExpandableKeys(options)));
-  function matches(nodes, depth) {
-    return nodes.flatMap((node) => {
-      const children = node.isLeaf ? [] : matches(node.children ?? [], depth + 1);
-      if (!reactNodeText(node.label).toLowerCase().includes(q) && children.length === 0) return [];
-      return [{ node, depth, hasChildren: children.length > 0 }, ...children];
-    });
-  }
-  return matches(options, 0);
-}
-function collectAllExpandableKeys(options) {
-  const keys = [];
-  for (const node of options) {
-    if ((node.children?.length ?? 0) > 0 && node.isLeaf !== true) {
-      keys.push(node.value);
-      keys.push(...collectAllExpandableKeys(node.children));
-    }
-  }
-  return keys;
-}
-function findNodeByValue(options, value) {
-  for (const node of options) {
-    if (node.value === value) return node;
-    const nested = node.children ? findNodeByValue(node.children, value) : void 0;
-    if (nested) return nested;
-  }
-  return void 0;
-}
-export {
-  collectAllExpandableKeys,
-  collectAllPaths,
-  collectLeafPaths,
-  filterTreeOptions,
-  filterVisibleTree,
-  findNodeByValue,
-  flattenVisibleTree,
-  formatPathLabels,
-  getDescendantValues,
-  getNodeByPath,
-  getOptionsAtPath,
-  normalizeTreeOptions,
-  pathKey,
-  pathsEqual,
-  reactNodeText
-};
+export * from "../../lib/tree.js";

package/dist/i18n/messages/en.json

@@ -162,6 +162,22 @@
       "error": "Invalid",
       "validating": "Validating",
       "submitFailed": "Could not submit the form. Please try again."
+    },
+    "chatComposer": {
+      "label": "Message",
+      "placeholder": "Write a message",
+      "send": "Send message",
+      "cancel": "Stop generating",
+      "hintEnter": "Enter to send · Shift + Enter for a new line",
+      "hintShiftEnter": "Shift + Enter to send · Enter for a new line"
+    },
+    "chatSuggestion": {
+      "label": "Suggestions",
+      "empty": "No suggestions match",
+      "count": {
+        "one": "{count} suggestion",
+        "other": "{count} suggestions"
+      }
     }
   },
   "feedback": {
@@ -289,6 +305,13 @@
     "progress": {
       "ariaLabel": "Progress",
       "breakdownSeparator": ", "
+    },
+    "tree": {
+      "expand": "Expand",
+      "collapse": "Collapse",
+      "loading": "Loading child nodes…",
+      "empty": "Nothing to show",
+      "selected": "Selected"
     }
   },
   "ui": {
@@ -536,5 +559,27 @@
   "textExamples": {
     "preservedText": "Plain text",
     "sampleText": "First line\n  Indented line\n\nLast line"
+  },
+  "chat": {
+    "bubble": {
+      "typing": "Typing…",
+      "loading": "Loading the message",
+      "you": "You",
+      "assistant": "Assistant",
+      "tone": {
+        "info": "Information",
+        "success": "Success",
+        "warning": "Warning",
+        "destructive": "Error"
+      }
+    },
+    "list": {
+      "label": "Conversation",
+      "jumpToLatest": "Jump to latest",
+      "newMessages": {
+        "one": "{count} new message",
+        "other": "{count} new messages"
+      }
+    }
   }
 }

package/dist/i18n/messages/ja.json

@@ -159,6 +159,21 @@
       "error": "入力エラー",
       "validating": "確認中",
       "submitFailed": "フォームを送信できませんでした。再試行してください。"
+    },
+    "chatComposer": {
+      "label": "メッセージ",
+      "placeholder": "メッセージを入力",
+      "send": "メッセージを送信",
+      "cancel": "生成を停止",
+      "hintEnter": "Enter で送信 · Shift + Enter で改行",
+      "hintShiftEnter": "Shift + Enter で送信 · Enter で改行"
+    },
+    "chatSuggestion": {
+      "label": "候補",
+      "empty": "一致する候補がありません",
+      "count": {
+        "other": "候補 {count} 件"
+      }
     }
   },
   "feedback": {
@@ -283,6 +298,13 @@
     "progress": {
       "ariaLabel": "進捗",
       "breakdownSeparator": "、"
+    },
+    "tree": {
+      "expand": "展開",
+      "collapse": "折りたたむ",
+      "loading": "子ノードを読み込み中…",
+      "empty": "表示する項目がありません",
+      "selected": "選択中"
     }
   },
   "ui": {
@@ -524,5 +546,26 @@
   "textExamples": {
     "preservedText": "プレーンテキスト",
     "sampleText": "最初の行\n  字下げした行\n\n最後の行"
+  },
+  "chat": {
+    "bubble": {
+      "typing": "入力中",
+      "loading": "メッセージを読み込み中",
+      "you": "自分",
+      "assistant": "アシスタント",
+      "tone": {
+        "info": "情報",
+        "success": "成功",
+        "warning": "警告",
+        "destructive": "エラー"
+      }
+    },
+    "list": {
+      "label": "会話",
+      "jumpToLatest": "最新へ移動",
+      "newMessages": {
+        "other": "新着 {count} 件"
+      }
+    }
   }
 }