@pisell/materials 1.0.1059 → 1.0.1060

package/es/components/pisellHierarchicalSummaryList/index.js

@@ -0,0 +1,5 @@
+/**
+ * PisellHierarchicalSummaryList 组件导出
+ */
+
+export { PisellHierarchicalSummaryList, PREFIX_CLS as HIERARCHICAL_SUMMARY_LIST_PREFIX_CLS } from "./PisellHierarchicalSummaryList";

package/es/components/pisellHierarchicalSummaryList/types.d.ts

@@ -0,0 +1,248 @@
+import type React from 'react';
+import type { CSSProperties } from 'react';
+export declare type PisellHierarchicalSummaryListKey = React.Key;
+export interface PisellHierarchicalSummaryListItem {
+    /**
+     * 行标题。最小字段（必填）
+     */
+    label: React.ReactNode;
+    /**
+     * 行数值。允许 ReactNode（string/number/组合展示）。
+     * 若不传且开启聚合，可能由 children 聚合得到。
+     */
+    value?: React.ReactNode;
+    /**
+     * 子级数据（无限层级递归）
+     */
+    children?: PisellHierarchicalSummaryListItem[];
+    /**
+     * 可选：稳定 key（推荐传入以保证展开态稳定）。
+     * 不传时组件会基于层级路径生成 key。
+     */
+    key?: PisellHierarchicalSummaryListKey;
+    /**
+     * 可选：是否隐藏该项
+     */
+    hidden?: boolean;
+    /**
+     * 可选：排序权重，值越小越靠前
+     */
+    order?: number;
+    /**
+     * 可选：条目数提示（如 "N items" / "N 条"），允许 ReactNode
+     */
+    itemsCount?: React.ReactNode;
+    /**
+     * 可选：信息提示 tooltip 内容（hover 触达）
+     */
+    infoTooltip?: React.ReactNode;
+    /**
+     * 可选：右侧 value 后附加轻量操作（tag/pill/button 等）
+     */
+    extra?: React.ReactNode;
+    /**
+     * 可选：覆盖当前行样式
+     */
+    rowStyle?: CSSProperties;
+    /**
+     * 可选：覆盖当前行类名
+     */
+    rowClassName?: string;
+    /**
+     * 可选：自定义展开内容。若设置，行可展开且展开后渲染此内容（不再渲染 children 列表）。
+     * 用于在列表中嵌入 Collapse 等自定义区块。
+     */
+    expandedContent?: React.ReactNode;
+}
+export interface PisellHierarchicalSummaryListLevelTextStyle {
+    fontSize?: number | string;
+    fontWeight?: number | string;
+    color?: string;
+    /** 行高，如 24 或 '24px' */
+    lineHeight?: number | string;
+}
+export interface PisellHierarchicalSummaryListIconStyle {
+    /** 图标尺寸（px），用于 fontSize 或宽高一致时的边长） */
+    size?: number;
+    color?: string;
+    /** 图标容器宽（px），不传则用 size */
+    width?: number;
+    /** 图标容器高（px），不传则用 size */
+    height?: number;
+}
+export interface PisellHierarchicalSummaryListDividerStyle {
+    show?: boolean;
+    color?: string;
+    style?: 'solid' | 'dashed' | 'dotted';
+}
+export interface PisellHierarchicalSummaryListLevelConfig {
+    /**
+     * 层级缩进（px）。不传则继承全局 indent 规则。
+     */
+    indent?: number;
+    /**
+     * 是否显示 "·" 分隔符（标题区元信息前的点）
+     */
+    showDotSeparator?: boolean;
+    /**
+     * 层级内分割线
+     */
+    divider?: PisellHierarchicalSummaryListDividerStyle;
+    /**
+     * 行容器样式（背景/边框/padding/圆角/阴影等）
+     */
+    rowStyle?: CSSProperties;
+    /**
+     * 行容器类名
+     */
+    rowClassName?: string;
+    /**
+     * 标题文本样式
+     */
+    labelTextStyle?: PisellHierarchicalSummaryListLevelTextStyle;
+    /**
+     * 数值文本样式
+     */
+    valueTextStyle?: PisellHierarchicalSummaryListLevelTextStyle;
+    /**
+     * info icon 样式（size/color）
+     */
+    infoIconStyle?: PisellHierarchicalSummaryListIconStyle;
+    /**
+     * 展开/收起箭头 icon 样式（size/color）
+     */
+    expandIconStyle?: PisellHierarchicalSummaryListIconStyle;
+    /**
+     * 行内元信息样式（如 "·"、N items、info icon 的文案颜色/字号等）
+     */
+    metaTextStyle?: PisellHierarchicalSummaryListLevelTextStyle;
+}
+export declare type PisellHierarchicalSummaryListAggregateMode = 'none' | 'sum';
+export interface PisellHierarchicalSummaryListAggregateConfig {
+    /**
+     * 聚合模式
+     * - none: 不聚合
+     * - sum: 对子级 number 值求和（或使用 getNumberValue 提取）
+     * @default 'none'
+     */
+    mode?: PisellHierarchicalSummaryListAggregateMode;
+    /**
+     * 从条目提取 number 值，用于 sum 聚合。
+     * 默认：若 item.value 是 number，则使用该值；否则忽略。
+     */
+    getNumberValue?: (item: PisellHierarchicalSummaryListItem) => number | null | undefined;
+    /**
+     * 聚合结果格式化（sum 输出到 value 区）
+     */
+    format?: (sum: number, ctx: {
+        item: PisellHierarchicalSummaryListItem;
+        level: number;
+    }) => React.ReactNode;
+}
+export interface PisellHierarchicalSummaryListRenderContext {
+    level: number;
+    pathKeys: PisellHierarchicalSummaryListKey[];
+    expanded: boolean;
+    hasChildren: boolean;
+    aggregatedValue?: React.ReactNode;
+}
+export interface PisellHierarchicalSummaryListProps {
+    /**
+     * 数据源
+     */
+    items: PisellHierarchicalSummaryListItem[];
+    /**
+     * 展开项 keys（受控）
+     */
+    expandedKeys?: PisellHierarchicalSummaryListKey[];
+    /**
+     * 默认展开项 keys（非受控）
+     */
+    defaultExpandedKeys?: PisellHierarchicalSummaryListKey[];
+    /**
+     * 默认展开层级（非受控初始化）。0 表示只展示 L1（不默认展开子级）。
+     * @default 0
+     */
+    defaultExpandedLevel?: number;
+    /**
+     * 展开项变化回调
+     */
+    onExpandedKeysChange?: (keys: PisellHierarchicalSummaryListKey[]) => void;
+    /**
+     * 手风琴模式：同一层级下仅允许一个子项展开
+     * @default false
+     */
+    accordion?: boolean;
+    /**
+     * 最大渲染层级（从 1 开始）。超过层级仍保留行，但不再渲染 children。
+     */
+    maxRenderLevel?: number;
+    /**
+     * 最大可展开层级（从 1 开始）。超过层级不显示展开箭头。
+     */
+    maxExpandLevel?: number;
+    /**
+     * 全局缩进（px），作用于 L2+；也可通过 levelConfig 覆盖。
+     * @default 16
+     */
+    indent?: number;
+    /**
+     * 行间距（px）
+     * @default 8
+     */
+    rowGap?: number;
+    /**
+     * 容器内边距（px 或 CSS 值），不传则使用 less 默认 20px
+     */
+    padding?: number | string;
+    /**
+     * 行内间距（px），用于 1:1 复刻设计稿
+     * - row: 行内左右两栏间距
+     * - rowLeft: 左侧 label 与 meta（· / N items）间距
+     * - meta: meta 内 dot / items-count / info 间距
+     * - rowRight: 右侧 value 与 extra / 展开图标间距
+     */
+    gaps?: {
+        row?: number;
+        rowLeft?: number;
+        meta?: number;
+        rowRight?: number;
+    };
+    /**
+     * 按层级配置样式与功能开关（key 为 level，从 1 开始）
+     */
+    levelConfig?: Record<number, PisellHierarchicalSummaryListLevelConfig>;
+    /**
+     * 自定义渲染 label
+     */
+    renderLabel?: (item: PisellHierarchicalSummaryListItem, ctx: PisellHierarchicalSummaryListRenderContext) => React.ReactNode;
+    /**
+     * 自定义渲染 value
+     */
+    renderValue?: (item: PisellHierarchicalSummaryListItem, ctx: PisellHierarchicalSummaryListRenderContext) => React.ReactNode;
+    /**
+     * 自定义 key 生成（当 item.key 不存在时使用）
+     */
+    getKey?: (item: PisellHierarchicalSummaryListItem, ctx: {
+        level: number;
+        index: number;
+        parentPathKeys: PisellHierarchicalSummaryListKey[];
+    }) => PisellHierarchicalSummaryListKey;
+    /**
+     * 聚合配置：支持内置或外部传入
+     */
+    aggregate?: PisellHierarchicalSummaryListAggregateConfig;
+    /**
+     * 根节点类名
+     */
+    className?: string;
+    /**
+     * 根节点样式
+     */
+    style?: CSSProperties;
+    /**
+     * 是否渲染根节点 div。为 false 时只渲染内部内容（用于外层用同一 DOM 包裹列表与其它区块）。
+     * @default true
+     */
+    renderRoot?: boolean;
+}

package/es/components/pisellHierarchicalSummaryList/types.js

@@ -0,0 +1 @@
+export {};

package/es/components/pisellLookup/PisellLookup.js

@@ -17,19 +17,19 @@ import { LookupTrigger, LookupAuxiliary, LookupResultHost } from "./components";
 import { getText } from "../../locales";
 import "./PisellLookup.less";
 
-/**
- * PisellLookup 组件
- * 搜索交互协议组件，提供统一的搜索入口、状态管理和结果承载能力
- *
- * @example
- * ```tsx
- * // 基础用法
- * <PisellLookup
- *   placeholder="搜索商品"
- *   onSearch={(keyword) => console.log('搜索:', keyword)}
- *   resultRender={(keyword) => <div>搜索结果: {keyword}</div>}
- * />
- * ```
+/**
+ * PisellLookup 组件
+ * 搜索交互协议组件，提供统一的搜索入口、状态管理和结果承载能力
+ *
+ * @example
+ * ```tsx
+ * // 基础用法
+ * <PisellLookup
+ *   placeholder="搜索商品"
+ *   onSearch={(keyword) => console.log('搜索:', keyword)}
+ *   resultRender={(keyword) => <div>搜索结果: {keyword}</div>}
+ * />
+ * ```
  */
 var PisellLookupComponent = /*#__PURE__*/forwardRef(function (props, ref) {
   var _props$triggerType = props.triggerType,
@@ -109,16 +109,16 @@ var PisellLookupComponent = /*#__PURE__*/forwardRef(function (props, ref) {
     style = props.style,
     zIndex = props.zIndex;
 
-  /**
-   * 智能判断展示类型
+  /**
+   * 智能判断展示类型
    */
   var displayType = useMemo(function () {
     return displayTypeProp || getDefaultDisplayType(triggerType, !!trigger);
   }, [displayTypeProp, triggerType, trigger]);
 
-  /**
-   * 智能判断搜索模式
-   * 如果不显示 Lookup 按钮，自动使用实时搜索模式
+  /**
+   * 智能判断搜索模式
+   * 如果不显示 Lookup 按钮，自动使用实时搜索模式
    */
   var effectiveSearchMode = useMemo(function () {
     if (!showConfirmButton) {
@@ -127,8 +127,8 @@ var PisellLookupComponent = /*#__PURE__*/forwardRef(function (props, ref) {
     return searchMode;
   }, [showConfirmButton, searchMode]);
 
-  /**
-   * 搜索状态管理
+  /**
+   * 搜索状态管理
    */
   var _useSearchState = useSearchState({
       value: value,
@@ -147,8 +147,8 @@ var PisellLookupComponent = /*#__PURE__*/forwardRef(function (props, ref) {
     open = _useSearchState.open,
     close = _useSearchState.close;
 
-  /**
-   * 搜索历史管理
+  /**
+   * 搜索历史管理
    */
   var _useSearchHistory = useSearchHistory({
       historyKey: historyKey,
@@ -161,39 +161,39 @@ var PisellLookupComponent = /*#__PURE__*/forwardRef(function (props, ref) {
     removeHistory = _useSearchHistory.removeHistory,
     clearAllHistory = _useSearchHistory.clearAllHistory;
 
-  /**
-   * 联想词状态
+  /**
+   * 联想词状态
    */
   var _useState = useState([]),
     _useState2 = _slicedToArray(_useState, 2),
     suggestions = _useState2[0],
     setSuggestions = _useState2[1];
 
-  /**
-   * 热门搜索状态
+  /**
+   * 热门搜索状态
    */
   var _useState3 = useState([]),
     _useState4 = _slicedToArray(_useState3, 2),
     hotWords = _useState4[0],
     setHotWords = _useState4[1];
 
-  /**
-   * 记录上一次触发搜索的关键词（避免重复触发）
+  /**
+   * 记录上一次触发搜索的关键词（避免重复触发）
    */
   var lastSearchKeywordRef = useRef('');
 
-  /**
-   * 记录是否是手动选择触发（避免触发实时搜索）
+  /**
+   * 记录是否是手动选择触发（避免触发实时搜索）
    */
   var isManualSelectRef = useRef(false);
 
-  /**
-   * Modal/Drawer 中输入框的 ref
+  /**
+   * Modal/Drawer 中输入框的 ref
    */
   var modalInputRef = useRef(null);
 
-  /**
-   * 暴露给外部的方法
+  /**
+   * 暴露给外部的方法
    */
   useImperativeHandle(ref, function () {
     return {
@@ -206,8 +206,8 @@ var PisellLookupComponent = /*#__PURE__*/forwardRef(function (props, ref) {
     };
   }, [open, close, keyword, setKeyword]);
 
-  /**
-   * 处理关闭时的逻辑
+  /**
+   * 处理关闭时的逻辑
    */
   useEffect(function () {
     if (!visible && clearOnClose) {
@@ -216,8 +216,8 @@ var PisellLookupComponent = /*#__PURE__*/forwardRef(function (props, ref) {
     }
   }, [visible, clearOnClose, setKeyword]);
 
-  /**
-   * 处理 Modal/Drawer 打开后的聚焦和选中逻辑
+  /**
+   * 处理 Modal/Drawer 打开后的聚焦和选中逻辑
    */
   var handleAfterOpen = useCallback(function () {
     setTimeout(function () {
@@ -238,8 +238,8 @@ var PisellLookupComponent = /*#__PURE__*/forwardRef(function (props, ref) {
     }, 100);
   }, [clearOnClose, keyword, onSearch]);
 
-  /**
-   * 加载联想词
+  /**
+   * 加载联想词
    */
   useEffect(function () {
     if (!showSuggestions || !onLoadSuggestions || !keyword || !visible) {
@@ -278,8 +278,8 @@ var PisellLookupComponent = /*#__PURE__*/forwardRef(function (props, ref) {
     loadSuggestions();
   }, [showSuggestions, onLoadSuggestions, keyword, visible]);
 
-  /**
-   * 加载热门搜索
+  /**
+   * 加载热门搜索
    */
   useEffect(function () {
     if (!showHotWords || !onLoadHotWords || !visible) {
@@ -318,8 +318,8 @@ var PisellLookupComponent = /*#__PURE__*/forwardRef(function (props, ref) {
     loadHotWords();
   }, [showHotWords, onLoadHotWords, visible]);
 
-  /**
-   * 处理搜索触发（实时搜索，不保存历史）
+  /**
+   * 处理搜索触发（实时搜索，不保存历史）
    */
   var handleRealtimeSearch = useCallback(function (searchKeyword) {
     // 避免重复触发相同关键词的搜索
@@ -332,8 +332,8 @@ var PisellLookupComponent = /*#__PURE__*/forwardRef(function (props, ref) {
     onSearch === null || onSearch === void 0 || onSearch(searchKeyword);
   }, [onSearch]);
 
-  /**
-   * 处理确认搜索（保存历史）
+  /**
+   * 处理确认搜索（保存历史）
    */
   var handleConfirmSearch = useCallback(function (searchKeyword) {
     // 避免重复触发相同关键词的搜索
@@ -351,9 +351,9 @@ var PisellLookupComponent = /*#__PURE__*/forwardRef(function (props, ref) {
     onSearch === null || onSearch === void 0 || onSearch(searchKeyword);
   }, [showHistory, addHistory, onSearch]);
 
-  /**
-   * 防抖搜索（实时搜索模式）
-   * 包括空关键词（用于恢复显示所有数据）
+  /**
+   * 防抖搜索（实时搜索模式）
+   * 包括空关键词（用于恢复显示所有数据）
    */
   useDebounceSearch({
     keyword: keyword,
@@ -363,22 +363,22 @@ var PisellLookupComponent = /*#__PURE__*/forwardRef(function (props, ref) {
     lastSearchKeyword: lastSearchKeywordRef.current
   });
 
-  /**
-   * 处理输入变化
+  /**
+   * 处理输入变化
    */
   var handleInputChange = useCallback(function (newValue) {
     setKeyword(newValue);
   }, [setKeyword]);
 
-  /**
-   * 处理触发器点击（非输入框触发器）
+  /**
+   * 处理触发器点击（非输入框触发器）
    */
   var handleTriggerClick = useCallback(function () {
     open();
   }, [open]);
 
-  /**
-   * 处理输入框聚焦
+  /**
+   * 处理输入框聚焦
    */
   var handleInputFocus = useCallback(function () {
     if (displayType === 'inline' || displayType === 'popup') {
@@ -386,8 +386,8 @@ var PisellLookupComponent = /*#__PURE__*/forwardRef(function (props, ref) {
     }
   }, [displayType, open]);
 
-  /**
-   * 处理输入框失焦
+  /**
+   * 处理输入框失焦
    */
   var handleInputBlur = useCallback(function () {
     // inline 或 popup 模式下，失焦时延迟关闭（给时间让用户点击结果区内容）
@@ -398,16 +398,16 @@ var PisellLookupComponent = /*#__PURE__*/forwardRef(function (props, ref) {
     }
   }, [displayType, close]);
 
-  /**
-   * 处理确认触发（点击 Lookup 按钮或按 Enter 键）。支持传入当前输入值，回车时由 Trigger 传入以避免受控下 keyword 未更新导致历史未保存。
+  /**
+   * 处理确认触发（点击 Lookup 按钮或按 Enter 键）。支持传入当前输入值，回车时由 Trigger 传入以避免受控下 keyword 未更新导致历史未保存。
    */
   var handleConfirm = useCallback(function (valueFromTrigger) {
     var keywordToSearch = valueFromTrigger !== null && valueFromTrigger !== void 0 ? valueFromTrigger : keyword;
     handleConfirmSearch(keywordToSearch);
   }, [keyword, handleConfirmSearch]);
 
-  /**
-   * 处理清除
+  /**
+   * 处理清除
    */
   var handleClear = useCallback(function () {
     // 标记为手动操作，阻止实时搜索触发
@@ -426,9 +426,9 @@ var PisellLookupComponent = /*#__PURE__*/forwardRef(function (props, ref) {
     }, debounceTime + 100);
   }, [setKeyword, onSearch, debounceTime]);
 
-  /**
-   * 处理扫码
-   * 标记为手动操作，避免 setKeyword 触发的重渲染时防抖 effect 仍用旧的 debouncedKeyword('') 再触发一次 onSearch('')
+  /**
+   * 处理扫码
+   * 标记为手动操作，避免 setKeyword 触发的重渲染时防抖 effect 仍用旧的 debouncedKeyword('') 再触发一次 onSearch('')
    */
   var handleScan = useCallback(function (code) {
     // 标记为手动操作，阻止实时搜索防抖在本次更新后误触 onSearch('')
@@ -445,8 +445,8 @@ var PisellLookupComponent = /*#__PURE__*/forwardRef(function (props, ref) {
     }, debounceTime + 100);
   }, [setKeyword, handleConfirmSearch, onScan, debounceTime]);
 
-  /**
-   * 处理选择辅助项（历史/联想词/热门搜索）
+  /**
+   * 处理选择辅助项（历史/联想词/热门搜索）
    */
   var handleSelectAuxiliary = useCallback(function (selectedKeyword) {
     // 标记为手动选择，阻止实时搜索触发
@@ -470,8 +470,8 @@ var PisellLookupComponent = /*#__PURE__*/forwardRef(function (props, ref) {
     }, debounceTime + 100);
   }, [setKeyword, showHistory, addHistory, onSearch, debounceTime]);
 
-  /**
-   * 渲染触发器
+  /**
+   * 渲染触发器
    */
   var renderTrigger = function renderTrigger() {
     // 如果是输入框触发器，需要特殊处理
@@ -502,8 +502,8 @@ var PisellLookupComponent = /*#__PURE__*/forwardRef(function (props, ref) {
     });
   };
 
-  /**
-   * 渲染辅助区（历史、联想词、热门搜索）
+  /**
+   * 渲染辅助区（历史、联想词、热门搜索）
    */
   var renderAuxiliary = function renderAuxiliary() {
     return /*#__PURE__*/React.createElement(LookupAuxiliary, {
@@ -523,8 +523,8 @@ var PisellLookupComponent = /*#__PURE__*/forwardRef(function (props, ref) {
     });
   };
 
-  /**
-   * 渲染结果区域
+  /**
+   * 渲染结果区域
    */
   var renderResults = function renderResults() {
     // 如果没有提供 resultRender，不展示结果区域
@@ -555,18 +555,18 @@ var PisellLookupComponent = /*#__PURE__*/forwardRef(function (props, ref) {
     }, resultRender(keyword, close));
   };
 
-  /**
-   * 是否有辅助区内容（与 LookupAuxiliary 内判断一致，用于空时不展示 dropdown）
+  /**
+   * 是否有辅助区内容（与 LookupAuxiliary 内判断一致，用于空时不展示 dropdown）
    */
   var hasAuxiliaryContent = showHistory && history.length > 0 || showSuggestions && suggestions.length > 0 && !!keyword || showHotWords && hotWords.length > 0 && !keyword;
 
-  /**
-   * 是否有结果区内容（loading 或有关键词且提供了 resultRender）
+  /**
+   * 是否有结果区内容（loading 或有关键词且提供了 resultRender）
    */
   var hasResultsContent = Boolean(loading || keyword && resultRender);
 
-  /**
-   * 渲染内容区（辅助区 + 结果区）
+  /**
+   * 渲染内容区（辅助区 + 结果区）
    */
   var renderContent = function renderContent() {
     // 当无任何可展示内容时返回 null，避免 popup 展示空下拉框
@@ -580,8 +580,8 @@ var PisellLookupComponent = /*#__PURE__*/forwardRef(function (props, ref) {
     }, auxiliary, results);
   };
 
-  /**
-   * 如果是 inline 或 popup 模式，触发器和内容在同一个容器中
+  /**
+   * 如果是 inline 或 popup 模式，触发器和内容在同一个容器中
    */
   if (displayType === 'inline' || displayType === 'popup') {
     return /*#__PURE__*/React.createElement("div", {
@@ -598,8 +598,8 @@ var PisellLookupComponent = /*#__PURE__*/forwardRef(function (props, ref) {
     }, renderContent()));
   }
 
-  /**
-   * 如果是 modal、drawer、detached 模式，触发器和内容分离
+  /**
+   * 如果是 modal、drawer、detached 模式，触发器和内容分离
    */
   return /*#__PURE__*/React.createElement("div", {
     className: "pisell-lookup ".concat(className || ''),