@aviala-design/spiral 2.3.1 → 2.4.0

package/dist/component-changelogs.json

@@ -0,0 +1,144 @@
+{
+  "Button": [
+    {
+      "version": "2.1.0",
+      "sections": {
+        "Added": [
+          "`compact` 变体（`min-w-0`）"
+        ]
+      }
+    }
+  ],
+  "CascaderField": [
+    {
+      "version": "2.0.0",
+      "sections": {
+        "Fixed": [
+          "菜单渲染在 Modal 后方（z-index / pointer-events）",
+          "触摸下列扩展行为"
+        ]
+      }
+    }
+  ],
+  "DatePickerField": [
+    {
+      "version": "2.0.0",
+      "sections": {
+        "Changed": [
+          "键盘与布局细节打磨"
+        ]
+      }
+    }
+  ],
+  "List": [
+    {
+      "version": "Unreleased",
+      "sections": {
+        "Added": [
+          "`ListItem` `showTrailing` — set `false` (or `trailing={null}`) to hide trailing actions and the vertical divider; `action` type still shows the chevron",
+          "`ListItem` `showChevron` — control the trailing chevron on `action` rows",
+          "`ListItem` `showTopDivider` — force show/hide the content-row top hairline (default: hidden on the first child in a `ListGroup`)",
+          "`ListItem` `href` / `target` / `rel` — render the row as a link for navigation"
+        ],
+        "Fixed": [
+          "First `ListItem` in a `ListGroup` no longer shows a top hairline by default"
+        ]
+      }
+    }
+  ],
+  "Modal": [
+    {
+      "version": "2.0.0",
+      "sections": {
+        "Fixed": [
+          "关闭后焦点归还",
+          "退场动画"
+        ]
+      }
+    }
+  ],
+  "Navigation": [
+    {
+      "version": "2.1.0",
+      "sections": {
+        "Changed": [
+          "垂直轨道在悬停/按下时伸展与收缩"
+        ]
+      }
+    }
+  ],
+  "Pagination": [
+    {
+      "version": "2.1.0",
+      "sections": {
+        "Changed": [
+          "省略号打开页码跳转 Popover"
+        ]
+      }
+    }
+  ],
+  "Popover": [
+    {
+      "version": "2.2.0",
+      "sections": {
+        "Added": [
+          "`appearance` 变体：`tooltip`（反色提示皮肤）、`primary`（品牌主色表面、白字）"
+        ]
+      }
+    },
+    {
+      "version": "2.1.0",
+      "sections": {
+        "Added": [
+          "`HoverPopover`：桌面悬停/焦点打开，触摸降级为点按；复用箭头、表面与动画",
+          "内容支持 `flush`（无内边距）"
+        ],
+        "Changed": [
+          "进出场动画改为方向感知（自触发点缩放 + 淡入淡出）；箭头跟随各边",
+          "键盘打开时焦点移入内容，关闭后归还触发器"
+        ],
+        "Fixed": [
+          "修复需按两次 Escape 才能关闭（移除吞掉首次关闭的 window-blur 抑制）"
+        ]
+      }
+    }
+  ],
+  "SegmentatorGroup": [
+    {
+      "version": "2.1.0",
+      "sections": {
+        "Changed": [
+          "拖拽预览改为命令式 DOM 切换，避免逐项 React 重渲染"
+        ]
+      }
+    }
+  ],
+  "Tooltip": [
+    {
+      "version": "2.2.0",
+      "sections": {
+        "Changed": [
+          "`ResponsiveTooltip` 在触摸设备上保持 tooltip 外观，不再显示浅色 popover 面板"
+        ]
+      }
+    },
+    {
+      "version": "2.1.0",
+      "sections": {
+        "Added": [
+          "`ResponsiveTooltip`：桌面为 Tooltip（悬停 + 键盘焦点），触摸自动切为 Popover（点按）"
+        ]
+      }
+    }
+  ],
+  "Typeface": [
+    {
+      "version": "2.0.0",
+      "sections": {
+        "Changed": [
+          "标题间距使用 `--gap-none`"
+        ]
+      }
+    }
+  ]
+}

package/dist/index.cjs

@@ -8226,15 +8226,27 @@ var ListItem = (0, import_react49.forwardRef)(
     select,
     switchProps,
     trailing,
+    showTrailing = true,
+    showChevron,
+    showTopDivider,
     selected = false,
     disabled = false,
     interactive,
+    href,
+    target,
+    rel,
     onClick,
     ...props
   }, ref) => {
-    const isInteractive = interactive ?? onClick != null;
+    const isInteractive = interactive ?? (onClick != null || href != null);
+    const chevronVisible = showChevron ?? itemType === "action";
     const primaryAction = action ?? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Button, { mode: "primary", size: "regular", leftIcon: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_icons18.GeneralSetting, { "aria-hidden": true }), children: actionLabel });
+    const chevron = chevronVisible ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "aviala-list-item__chevron", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_icons18.DirectionArrowRightLight, { width: 18, height: 18 }) }) : null;
     const renderTrailing = () => {
+      const hideActions = !showTrailing || trailing === null;
+      if (hideActions) {
+        return chevron && itemType === "action" ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "aviala-list-item__more", children: chevron }) : null;
+      }
       if (trailing !== void 0) return trailing;
       switch (itemType) {
         case "action":
@@ -8253,7 +8265,7 @@ var ListItem = (0, import_react49.forwardRef)(
               )
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ListDivider, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "aviala-list-item__chevron", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_icons18.DirectionArrowRightLight, { width: 18, height: 18 }) })
+            chevron
           ] });
         case "switch":
           return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "aviala-list-item__trailing", children: [
@@ -8270,26 +8282,50 @@ var ListItem = (0, import_react49.forwardRef)(
           ] });
       }
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+    const sharedClassName = cn("aviala-list-item", className);
+    const sharedData = {
+      "data-leading": leading,
+      "data-type": itemType,
+      "data-selected": selected ? "true" : void 0,
+      "data-disabled": disabled ? "true" : void 0,
+      "data-interactive": isInteractive ? "true" : void 0,
+      "data-top-divider": showTopDivider === void 0 ? void 0 : showTopDivider ? "true" : "false"
+    };
+    const trailingNode = renderTrailing();
+    const body = /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_jsx_runtime49.Fragment, { children: [
+      renderLeadingIcon(icon, leading),
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "aviala-list-item__body", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "aviala-list-item__content", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "aviala-list-item__head", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Typeface, { content: "textCaption", primary: title, secondary: subtitle }) }),
+        trailingNode
+      ] }) })
+    ] });
+    if (href && !disabled) {
+      return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+        "a",
+        {
+          ref,
+          role: "listitem",
+          className: sharedClassName,
+          href,
+          target,
+          rel,
+          onClick,
+          ...sharedData,
+          ...props,
+          children: body
+        }
+      );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       "div",
       {
         ref,
         role: "listitem",
-        className: cn("aviala-list-item", className),
-        "data-leading": leading,
-        "data-type": itemType,
-        "data-selected": selected ? "true" : void 0,
-        "data-disabled": disabled ? "true" : void 0,
-        "data-interactive": isInteractive ? "true" : void 0,
+        className: sharedClassName,
         onClick: disabled ? void 0 : onClick,
+        ...sharedData,
         ...props,
-        children: [
-          renderLeadingIcon(icon, leading),
-          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "aviala-list-item__body", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "aviala-list-item__content", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "aviala-list-item__head", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Typeface, { content: "textCaption", primary: title, secondary: subtitle }) }),
-            renderTrailing()
-          ] }) })
-        ]
+        children: body
       }
     );
   }