@morlay/dsh-client-ui-primitives 0.0.6 → 0.0.8

package/src/client/controls/SearchSelect.tsx

@@ -0,0 +1,138 @@
+// 可搜索选择器（searchable）：候选一多，"滚着找"就不够用了——打开后先给一行搜索框，按名字模糊过滤
+// （官方 `rankByName`：前缀命中优先，其次对齐分数，最后保持来源顺序）。
+//
+// 它与标签输入（multi-input）共用同一套"搜索 + 候选"交互：TagInput 的「从候选里选」就是它的单值形态。
+
+import { useEffect, useMemo, useRef, useState, type ReactNode } from "react";
+import {
+  Button,
+  IconCheckOutlineRegular,
+  Menu,
+  MenuItemButton,
+  rankByName,
+} from "@deepseek-ai/dsh-client-ui-primitives";
+import { classes } from "./classes.ts";
+import css from "./SearchSelect.module.css";
+
+// 一项候选：值是写进配置的那份，label 是给人看的（也是搜索的第二个键）。
+export interface SearchSelectOption {
+  readonly value: string;
+  readonly label?: string | undefined;
+}
+
+export interface SearchSelectProps {
+  // 无障碍名（触发按钮的名字）。
+  label: string;
+  // 当前值；空串表示这一项没写（触发按钮显示 `emptyLabel`）。
+  value: string;
+  // 没写时触发按钮显示的那句话（例如"不写"），它也是候选里的第一项（选它 = 清掉）。
+  emptyLabel: string;
+  options: readonly SearchSelectOption[];
+  disabled?: boolean;
+  // 搜索框的占位与无障碍名。
+  searchLabel: string;
+  // 一个候选都没匹配上时的那句话。
+  noMatchLabel: string;
+  // 选中一项；空串 = 清掉这一项。
+  onSelect: (next: string) => void;
+}
+
+export function SearchSelect({
+  label,
+  value,
+  emptyLabel,
+  options,
+  disabled = false,
+  searchLabel,
+  noMatchLabel,
+  onSelect,
+}: SearchSelectProps): ReactNode {
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const searchRef = useRef<HTMLInputElement | null>(null);
+  // 打开就落到搜索框上：候选多的时候，键盘直接开始打字。
+  useEffect(() => {
+    if (open) searchRef.current?.focus();
+  }, [open]);
+  const matches = useMemo(
+    () =>
+      rankByName(
+        // 搜索键是显示名（`name`）与它本身（`label`，缺省时就是值）：`rankByName` 拿 name 与 label 双键匹配。
+        options.map((option) => ({
+          value: option.value,
+          name: option.label ?? option.value,
+          label: option.value,
+        })),
+        query,
+      ),
+    [options, query],
+  );
+  const current = options.find((option) => option.value === value);
+  const close = (): void => {
+    setOpen(false);
+    setQuery("");
+  };
+  const pick = (next: string): void => {
+    close();
+    onSelect(next);
+  };
+  return (
+    <Menu
+      open={open}
+      anchor={
+        <Button
+          variant="outline"
+          size="sm"
+          data-role="search-select"
+          className={classes(css.trigger)}
+          data-action="pick"
+          disabled={disabled}
+          aria-haspopup="menu"
+          aria-label={label}
+          onClick={() => {
+            if (open) close();
+            else setOpen(true);
+          }}
+        >
+          {value === "" ? emptyLabel : (current?.label ?? value)}
+        </Button>
+      }
+      selectedId={value}
+      onSelect={pick}
+      onClose={close}
+    >
+      <div className={css.searchRow}>
+        <input
+          className={css.searchInput}
+          ref={searchRef}
+          value={query}
+          aria-label={searchLabel}
+          placeholder={searchLabel}
+          onChange={(event) => {
+            setQuery(event.currentTarget.value);
+          }}
+        />
+      </div>
+      <MenuItemButton
+        icon={value === "" ? <IconCheckOutlineRegular /> : undefined}
+        onSelect={() => {
+          pick("");
+        }}
+      >
+        {emptyLabel}
+      </MenuItemButton>
+      {matches.map((option) => (
+        <MenuItemButton
+          key={option.value}
+          icon={option.value === value ? <IconCheckOutlineRegular /> : undefined}
+          onSelect={() => {
+            pick(option.value);
+          }}
+        >
+          {option.name}
+        </MenuItemButton>
+      ))}
+      {matches.length === 0 ? <p className={css.empty}>{noMatchLabel}</p> : null}
+    </Menu>
+  );
+}

package/src/client/controls/SeatButton.module.css

@@ -0,0 +1,53 @@
+/* 座位按钮：胶囊形（16px 圆角、28px 高、8px 内距），标签以省略号收窄，图标与箭头贴住剩余文本。 */
+.seat {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+  max-width: min(100%, 240px);
+  min-height: 28px;
+  padding: 0 8px;
+  border: none;
+  border-radius: var(--dsw-radius-sm);
+  background: transparent;
+  color: var(--dsw-alias-label-primary);
+  font-size: 13px;
+  line-height: 20px;
+  font-weight: 500;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.seat:not(:disabled):hover,
+.seat[aria-expanded='true'],
+.expanded {
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+
+.seat:disabled {
+  cursor: default;
+  color: var(--dsw-alias-label-quaternary);
+}
+
+/* 图标直接是 flex item（上游给图标自己挂类，不再套一层）：套一层会让它在 inline-flex 里按基线对齐，视觉上偏。 */
+.icon {
+  display: inline-flex;
+  align-items: center;
+  flex: none;
+  color: var(--dsw-alias-label-primary);
+}
+
+.label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.chevron {
+  /* inline-flex 而不是 inline：inline 的座位会在 svg 下面预留 baseline descent，把箭头顶得不在 28px 的
+     座位里居中（上游 `PermissionSelect.module.css` 的 `.chevron` 记着同一条）。 */
+  display: inline-flex;
+  flex: 0 0 auto;
+  color: var(--dsw-alias-label-caption);
+}

package/src/client/controls/SeatButton.tsx

@@ -0,0 +1,40 @@
+// 座位按钮：工具行里的一个"座位"——图标 + 文本（+ 可展开的箭头），胶囊形，展开时保持底色。
+// composer 里的模式座位、以及任何"点开是一份清单"的行内入口都用它。
+
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+import { classes } from "./classes.ts";
+import css from "./SeatButton.module.css";
+
+export interface SeatButtonProps
+  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+  // 座位上的图标（16px 那一档）。
+  icon: ReactNode;
+  // 座位上的文本；放不下就以省略号收窄。
+  label: string;
+  // 展开态：菜单开着时保持底色（与 `aria-expanded` 同一件事，这里只管观感）。
+  expanded?: boolean;
+  // 尾部箭头（可展开的座位给）。
+  chevron?: ReactNode;
+}
+
+export function SeatButton({
+  icon,
+  label,
+  expanded = false,
+  chevron,
+  type = "button",
+  className,
+  ...rest
+}: SeatButtonProps): ReactNode {
+  return (
+    <button
+      type={type}
+      className={classes(css.seat, expanded ? css.expanded : undefined, className)}
+      {...rest}
+    >
+      <span className={css.icon}>{icon}</span>
+      <span className={css.label}>{label}</span>
+      {chevron === undefined ? null : <span className={css.chevron}>{chevron}</span>}
+    </button>
+  );
+}

package/src/client/controls/Spinner.module.css

@@ -0,0 +1,18 @@
+/* 加载指示：一圈细描边 + 一段主色弧，转起来。 */
+.spinner {
+  width: 28px;
+  height: 28px;
+  border: 2px solid var(--dsw-alias-border-l2);
+  border-top-color: var(--dsw-alias-label-primary);
+  border-radius: 50%;
+  animation: spin 900ms linear infinite;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

package/src/client/controls/Spinner.tsx

@@ -0,0 +1,14 @@
+// 加载指示：官方那套没有这个原子（`StateDot` 是状态点、`TextShimmer` 是文字微光），
+// 列表与设置面的「正在读」都用它。
+
+import type { ReactNode } from "react";
+import css from "./Spinner.module.css";
+
+export interface SpinnerProps {
+  // 无障碍名（转圈本身没有文字）。
+  label: string;
+}
+
+export function Spinner({ label }: SpinnerProps): ReactNode {
+  return <span className={css.spinner} role="status" aria-label={label} />;
+}

package/src/client/controls/Tabs.module.css

@@ -0,0 +1,48 @@
+/* 页内的 tab 条：与官方会话头部同形（`ConversationRoot.module.css` 的 .tabs/.tab/.tabActive），
+   选中态是品牌蓝文字 + 2px 下划线。 */
+.tabs {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  gap: 36px;
+  margin-top: 10px;
+  padding-left: 8px;
+  flex: none;
+}
+
+.tab {
+  position: relative;
+  padding: 0 0 9px;
+  border: none;
+  background: transparent;
+  font-size: 13px;
+  line-height: 16px;
+  font-weight: 500;
+  color: var(--dsw-alias-label-tertiary);
+  cursor: pointer;
+}
+
+/* 下划线始终占位（透明到选中），选中时只换颜色——文字因此不会跳。 */
+.tab::after {
+  content: "";
+  position: absolute;
+  right: 0;
+  bottom: -1px;
+  left: 0;
+  height: 2px;
+  border-radius: 2px;
+  background: transparent;
+}
+
+.tabActive {
+  color: var(--dsw-alias-state-business-primary);
+}
+
+.tabActive::after {
+  background: var(--dsw-alias-state-business-primary);
+}
+
+.tab:disabled {
+  cursor: not-allowed;
+  opacity: 0.4;
+}

package/src/client/controls/Tabs.tsx

@@ -0,0 +1,57 @@
+// 页内的 tab 条（下划线那一档）：与官方会话头部的 tab 条同形——选中是品牌蓝文字 + 2px 下划线。
+// 官方没有这个原子（`SegmentedTabs` 是分段控件那一档），所以住这里。
+
+import type { ReactNode } from "react";
+import { classes } from "./classes.ts";
+import css from "./Tabs.module.css";
+
+export interface TabItem {
+  readonly value: string;
+  readonly label: string;
+}
+
+export interface TabsProps {
+  // 这一组的无障碍名。
+  label: string;
+  items: readonly TabItem[];
+  // 当前选中的那个。
+  value: string;
+  onChange: (value: string) => void;
+  // 无障碍角色：切视图用 `tablist`，切口径（时间范围这类）用 `radiogroup`。
+  role?: "tablist" | "radiogroup";
+  disabled?: boolean;
+}
+
+export function Tabs({
+  label,
+  items,
+  value,
+  onChange,
+  role = "tablist",
+  disabled = false,
+}: TabsProps): ReactNode {
+  return (
+    <div className={css.tabs} role={role} aria-label={label}>
+      {items.map((item) => {
+        const active = item.value === value;
+        return (
+          <button
+            key={item.value}
+            type="button"
+            role={role === "tablist" ? "tab" : "radio"}
+            data-tab={item.value}
+            aria-selected={role === "tablist" ? active : undefined}
+            aria-checked={role === "tablist" ? undefined : active}
+            disabled={disabled}
+            className={classes(css.tab, active ? css.tabActive : undefined)}
+            onClick={() => {
+              onChange(item.value);
+            }}
+          >
+            {item.label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}

package/src/client/controls/TagInput.module.css

@@ -0,0 +1,105 @@
+/* 标签输入与它右边的候选菜单：一行，顶部对齐（框会随标签换行变高）。 */
+.row {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  width: 100%;
+}
+
+/* 候选菜单包锚点的那层 wrapper：官方 `Menu.module.css` 的 `.root` 是 `display: inline-flex`（宽度按内容收缩），
+   框因此只有内容那么宽。这一条把它撑满——框的宽度归外面那行，不归锚点自己的内容。 */
+.anchor {
+  display: flex;
+  flex: 1 1 auto;
+  width: 100%;
+  min-width: 0;
+}
+
+/* 框：与官方输入框同一种边框 / 背景 / 高度，标签与内联输入都在框里，放不下就换行。 */
+.box {
+  box-sizing: border-box;
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+  gap: 4px 6px;
+  width: 100%;
+  min-height: 32px;
+  padding: 4px 8px;
+  background: var(--dsw-alias-bg-layer-3);
+  border: 0.5px solid var(--dsw-alias-border-l4);
+  border-radius: var(--dsw-radius-md);
+}
+
+/* 框内的裸输入：边框、背景与焦点环都交给外面那个框。 */
+.input {
+  flex: 1 1 120px;
+  min-width: 120px;
+  padding: 2px 0;
+  font-family: inherit;
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--dsw-alias-label-primary);
+  background: transparent;
+  border: none;
+  outline: none;
+}
+
+/* 可移除的胶囊：几何与配色照官方 `Tag` 的 neutral（999px 圆角、11px/17px、wt500、`bg-module-platform`
+   + 二级文本色），只是里面多一个「移除」按钮——官方 `Tag` 是只读的，嵌不进按钮。 */
+.chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  padding: 1px 4px 1px 8px;
+  border-radius: 999px;
+  corner-shape: round;
+  font-size: 11px;
+  line-height: 17px;
+  font-weight: 500;
+  white-space: nowrap;
+  color: var(--dsw-alias-label-secondary);
+  background: var(--dsw-alias-bg-module-platform);
+}
+
+/* 胶囊里的移除按钮：图标本身很小，给它一块贴着字号的点击区，不给可见的边框与背景。 */
+.chipRemove {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: 14px;
+  height: 14px;
+  padding: 0;
+  color: var(--dsw-alias-label-tertiary);
+  background: transparent;
+  border: none;
+  border-radius: 999px;
+  cursor: pointer;
+  line-height: 1;
+}
+
+.chipRemove:hover:not(:disabled) {
+  color: var(--dsw-alias-label-primary);
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+
+.chipRemove:disabled {
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+
+.chipRemove:focus-visible {
+  outline: var(--dsw-focus-ring-width) solid
+    var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary));
+  outline-offset: 0;
+}
+
+/* 一个候选都没匹配上：在候选区里说一句，而不是给一张空菜单。 */
+.empty {
+  margin: 0;
+  padding: 8px;
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--dsw-alias-label-tertiary);
+}

package/src/client/controls/TagInput.tsx

@@ -0,0 +1,152 @@
+// 标签输入（multi-input 的 searchable 形态）：一个框包住所有标签与那一个内联输入框，**聚焦即整体下拉候选**，
+// 输入同时过滤候选；回车确认一个（可以是候选里没有的自定义值），点候选也加一个。
+//
+// 已经在名单里的值不再出现在候选里（见 `remaining`）；粘贴一串会拆成多个（见 `./tags.ts` 的分隔符口径）。
+
+import { useMemo, useState, type ReactNode } from "react";
+import {
+  IconCloseOutlineRegular,
+  Menu,
+  MenuItemButton,
+  rankByName,
+} from "@deepseek-ai/dsh-client-ui-primitives";
+import { type SearchSelectOption } from "./SearchSelect.tsx";
+import { mergeTags, parseTagList } from "./tags.ts";
+import css from "./TagInput.module.css";
+
+export interface TagInputProps {
+  // 当前名单。
+  value: readonly string[];
+  // 整段替换（一次粘贴 / 回车 / 点候选 / 移除就是一次编辑动作）。
+  onChange: (next: string[]) => void;
+  // 候选（可空）：不空时聚焦就下拉；已经在名单里的项不再列出。
+  options?: readonly SearchSelectOption[] | undefined;
+  // 空框时的提示。
+  placeholder: string;
+  // 框内输入框的无障碍名。
+  label: string;
+  disabled?: boolean;
+  // 候选都没匹配上时的那句话。
+  noMatchLabel?: string;
+  // 一个标签的移除按钮名（文案归调用方：它要带标签名）。
+  removeLabel: (name: string) => string;
+}
+
+export function TagInput({
+  value,
+  onChange,
+  options,
+  placeholder,
+  label,
+  disabled = false,
+  noMatchLabel = "",
+  removeLabel,
+}: TagInputProps): ReactNode {
+  const [draft, setDraft] = useState("");
+  const [open, setOpen] = useState(false);
+  const commit = (text: string): void => {
+    const names = parseTagList(text);
+    if (names.length === 0) return;
+    onChange(mergeTags(value, names));
+    setDraft("");
+  };
+  // 没加进去的那些才出现在候选里（加过的、以及手输过的自定义值都不再重复出现）。
+  const remaining = useMemo(
+    () =>
+      (options ?? [])
+        .filter((option) => !value.includes(option.value))
+        .map((option) => ({
+          value: option.value,
+          name: option.label ?? option.value,
+          label: option.value,
+        })),
+    [options, value],
+  );
+  const matches = useMemo(() => rankByName(remaining, draft), [remaining, draft]);
+  return (
+    <div className={css.row} data-role="tag-input" data-control="tags">
+      <Menu
+        open={open && remaining.length > 0}
+        // 官方那份 wrapper 是 `inline-flex`：不撑满的话框只有内容那么宽（见 `TagInput.module.css` 的 `.anchor`）。
+        className={css.anchor}
+        anchor={
+          <div className={css.box}>
+            {value.map((name) => (
+              // 标签与里面的移除按钮是同一个整体：× 在框内，点它才移除。
+              <span key={name} className={css.chip} data-tag={name}>
+                {name}
+                <button
+                  type="button"
+                  className={css.chipRemove}
+                  data-action="remove-tag"
+                  disabled={disabled}
+                  aria-label={removeLabel(name)}
+                  onClick={() => {
+                    onChange(value.filter((candidate) => candidate !== name));
+                  }}
+                >
+                  <IconCloseOutlineRegular size={10} />
+                </button>
+              </span>
+            ))}
+            {/* 裸输入：边框与背景归外面那个框，标签与它一起换行。 */}
+            <input
+              className={css.input}
+              value={draft}
+              placeholder={value.length === 0 ? placeholder : ""}
+              aria-label={label}
+              disabled={disabled}
+              onFocus={() => {
+                setOpen(true);
+              }}
+              onBlur={() => {
+                setOpen(false);
+              }}
+              onChange={(event) => {
+                setDraft(event.currentTarget.value);
+              }}
+              onKeyDown={(event) => {
+                if (event.key !== "Enter") return;
+                event.preventDefault();
+                commit(draft);
+              }}
+              onPaste={(event) => {
+                // 只有真的一串才拦：单个名字照旧走普通输入（粘进去还能接着改）。
+                const text = event.clipboardData.getData("text");
+                if (parseTagList(text).length < 2) return;
+                event.preventDefault();
+                commit(text);
+              }}
+            />
+          </div>
+        }
+        onClose={() => {
+          setOpen(false);
+        }}
+      >
+        {matches.map((candidate) => (
+          // 按下就保持输入框焦点（否则 blur 先把下拉收起来，点不到这一行），选中后继续留在框里加下一个。
+          <span
+            key={candidate.value}
+            onMouseDown={(event) => {
+              event.preventDefault();
+            }}
+          >
+            <MenuItemButton
+              onSelect={() => {
+                commit(candidate.value);
+              }}
+            >
+              {candidate.name}
+            </MenuItemButton>
+          </span>
+        ))}
+        {matches.length === 0 ? (
+          <p className={css.empty} data-role="tag-input-empty">
+            {noMatchLabel}
+          </p>
+        ) : null}
+      </Menu>
+    </div>
+  );
+}

package/src/client/controls/TimeLabel.module.css

@@ -0,0 +1,16 @@
+/* 悬停显形：所在行带 `data-time-hover-root` 时，指针悬停或焦点落在行内都露出来。
+   `:global()` 是因为这个选择器要读到行上的属性——它不属于本组件自己。 */
+.label {
+  padding: 0;
+  font-size: 14px;
+  line-height: 24px;
+  color: var(--dsw-alias-label-tertiary);
+  white-space: nowrap;
+  opacity: 0;
+  transition: opacity 80ms ease;
+}
+
+:global([data-time-hover-root]:hover) .label,
+:global([data-time-hover-root]:focus-within) .label {
+  opacity: 1;
+}

package/src/client/controls/TimeLabel.tsx

@@ -0,0 +1,15 @@
+// 对话里的时间标签：平时透明，指针悬停或用键盘进入所在那一行（`[data-time-hover-root]`）才显形。
+
+import type { HTMLAttributes, ReactNode } from "react";
+import { classes } from "./classes.ts";
+import css from "./TimeLabel.module.css";
+
+export type TimeLabelProps = HTMLAttributes<HTMLSpanElement>;
+
+export function TimeLabel({ className, children, ...rest }: TimeLabelProps): ReactNode {
+  return (
+    <span className={classes(css.label, className)} {...rest}>
+      {children}
+    </span>
+  );
+}

package/src/client/controls/VisuallyHidden.module.css

@@ -0,0 +1,9 @@
+/* 视觉隐藏但仍可被辅助技术读到（不是 `display: none`，那会连读屏一起藏掉）。 */
+.hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}

package/src/client/controls/VisuallyHidden.tsx

@@ -0,0 +1,16 @@
+// 无障碍隐藏文本：给屏幕阅读器的一句话，视觉上不占位（图标按钮旁边的状态说明就用它）。
+
+import type { HTMLAttributes, ReactNode } from "react";
+import css from "./VisuallyHidden.module.css";
+
+export interface VisuallyHiddenProps extends HTMLAttributes<HTMLSpanElement> {
+  children: ReactNode;
+}
+
+export function VisuallyHidden({ children, ...rest }: VisuallyHiddenProps): ReactNode {
+  return (
+    <span className={css.hidden} {...rest}>
+      {children}
+    </span>
+  );
+}