@lobehub/ui 5.61.1 → 5.62.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/base-ui/ProTable/ColumnSetting.mjs +156 -0
- package/es/base-ui/ProTable/ColumnSetting.mjs.map +1 -0
- package/es/base-ui/ProTable/FieldControl.mjs +108 -0
- package/es/base-ui/ProTable/FieldControl.mjs.map +1 -0
- package/es/base-ui/ProTable/LightFilter.mjs +71 -0
- package/es/base-ui/ProTable/LightFilter.mjs.map +1 -0
- package/es/base-ui/ProTable/OptionPopover.mjs +21 -0
- package/es/base-ui/ProTable/OptionPopover.mjs.map +1 -0
- package/es/base-ui/ProTable/ProTable.d.mts +13 -0
- package/es/base-ui/ProTable/ProTable.mjs +651 -0
- package/es/base-ui/ProTable/ProTable.mjs.map +1 -0
- package/es/base-ui/ProTable/SearchForm.mjs +138 -0
- package/es/base-ui/ProTable/SearchForm.mjs.map +1 -0
- package/es/base-ui/ProTable/index.d.mts +3 -0
- package/es/base-ui/ProTable/index.mjs +1 -0
- package/es/base-ui/ProTable/renderValue.mjs +118 -0
- package/es/base-ui/ProTable/renderValue.mjs.map +1 -0
- package/es/base-ui/ProTable/style.mjs +373 -0
- package/es/base-ui/ProTable/style.mjs.map +1 -0
- package/es/base-ui/ProTable/type.d.mts +343 -0
- package/es/base-ui/ProTable/useFetchData.mjs +98 -0
- package/es/base-ui/ProTable/useFetchData.mjs.map +1 -0
- package/es/base-ui/ProTable/useSearchForm.mjs +151 -0
- package/es/base-ui/ProTable/useSearchForm.mjs.map +1 -0
- package/es/base-ui/ProTable/utils.mjs +102 -0
- package/es/base-ui/ProTable/utils.mjs.map +1 -0
- package/es/base-ui/Table/Table.mjs +6 -2
- package/es/base-ui/Table/Table.mjs.map +1 -1
- package/es/base-ui/Text/style.d.mts +1 -1
- package/es/dashboard/ConsoleShell/style.mjs +3 -1
- package/es/dashboard/ConsoleShell/style.mjs.map +1 -1
- package/es/dashboard/MetricStrip/MetricCell.mjs +25 -14
- package/es/dashboard/MetricStrip/MetricCell.mjs.map +1 -1
- package/es/dashboard/MetricStrip/style.mjs +14 -0
- package/es/dashboard/MetricStrip/style.mjs.map +1 -1
- package/es/dashboard/MetricStrip/type.d.mts +2 -0
- package/es/dashboard/StatCard/StatCard.d.mts +1 -1
- package/es/dashboard/StatCard/StatCard.mjs +2 -1
- package/es/dashboard/StatCard/StatCard.mjs.map +1 -1
- package/es/dashboard/StatCard/type.d.mts +2 -0
- package/es/dashboard/Surface/style.d.mts +3 -2
- package/es/dashboard/Surface/style.mjs +7 -3
- package/es/dashboard/Surface/style.mjs.map +1 -1
- package/package.json +5 -1
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
//#region src/base-ui/ProTable/utils.ts
|
|
2
|
+
const isNil = (value) => value === null || value === void 0;
|
|
3
|
+
const isEmptyValue = (value) => isNil(value) || value === "" || Array.isArray(value) && value.length === 0;
|
|
4
|
+
/** Field / state key of a column: `key`, then the dot-joined `dataIndex`, then its position. */
|
|
5
|
+
const getProColumnKey = (column, index) => {
|
|
6
|
+
if (!isNil(column.key)) return String(column.key);
|
|
7
|
+
const { dataIndex } = column;
|
|
8
|
+
if (Array.isArray(dataIndex)) return dataIndex.join(".");
|
|
9
|
+
if (!isNil(dataIndex)) return String(dataIndex);
|
|
10
|
+
return `col-${index}`;
|
|
11
|
+
};
|
|
12
|
+
/** The name a column takes in the search form (and in `params`). */
|
|
13
|
+
const getFieldName = (column, index) => {
|
|
14
|
+
const { dataIndex } = column;
|
|
15
|
+
if (Array.isArray(dataIndex)) return dataIndex.join(".");
|
|
16
|
+
if (!isNil(dataIndex)) return String(dataIndex);
|
|
17
|
+
return getProColumnKey(column, index);
|
|
18
|
+
};
|
|
19
|
+
const getByPath = (record, dataIndex) => {
|
|
20
|
+
if (isNil(dataIndex) || isNil(record)) return void 0;
|
|
21
|
+
return (Array.isArray(dataIndex) ? dataIndex : [dataIndex]).reduce((acc, key) => isNil(acc) ? void 0 : acc[key], record);
|
|
22
|
+
};
|
|
23
|
+
/** Set `a.b.c` style names into a nested object. */
|
|
24
|
+
const setByPath = (target, name, value) => {
|
|
25
|
+
const path = name.split(".");
|
|
26
|
+
let cursor = target;
|
|
27
|
+
path.forEach((key, index) => {
|
|
28
|
+
if (index === path.length - 1) {
|
|
29
|
+
cursor[key] = value;
|
|
30
|
+
return;
|
|
31
|
+
}
|
|
32
|
+
if (typeof cursor[key] !== "object" || cursor[key] === null) cursor[key] = {};
|
|
33
|
+
cursor = cursor[key];
|
|
34
|
+
});
|
|
35
|
+
return target;
|
|
36
|
+
};
|
|
37
|
+
const resolveValueType = (column, record) => typeof column.valueType === "function" ? column.valueType(record) : column.valueType;
|
|
38
|
+
const resolveValueEnum = (column, record) => typeof column.valueEnum === "function" ? column.valueEnum(record) : column.valueEnum;
|
|
39
|
+
const isEnumItem = (value) => typeof value === "object" && value !== null && !Array.isArray(value) && "text" in value;
|
|
40
|
+
/** `valueEnum` as an ordered list of `{ value, text, status }`. */
|
|
41
|
+
const valueEnumToList = (valueEnum) => {
|
|
42
|
+
if (!valueEnum) return [];
|
|
43
|
+
return (valueEnum instanceof Map ? [...valueEnum.entries()] : Object.entries(valueEnum)).map(([value, item]) => isEnumItem(item) ? {
|
|
44
|
+
...item,
|
|
45
|
+
value: String(value)
|
|
46
|
+
} : {
|
|
47
|
+
text: item,
|
|
48
|
+
value: String(value)
|
|
49
|
+
});
|
|
50
|
+
};
|
|
51
|
+
const findValueEnum = (valueEnum, value) => valueEnumToList(valueEnum).find((item) => item.value === String(value));
|
|
52
|
+
const pad = (value) => String(value).padStart(2, "0");
|
|
53
|
+
const formatDate = (date, withTime = false, timeOnly = false) => {
|
|
54
|
+
const day = `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
|
|
55
|
+
const time = `${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`;
|
|
56
|
+
if (timeOnly) return time;
|
|
57
|
+
return withTime ? `${day} ${time}` : day;
|
|
58
|
+
};
|
|
59
|
+
const toDate = (value) => {
|
|
60
|
+
if (value instanceof Date) return Number.isNaN(value.getTime()) ? null : value;
|
|
61
|
+
if (typeof value === "number" || typeof value === "string") {
|
|
62
|
+
const date = new Date(value);
|
|
63
|
+
return Number.isNaN(date.getTime()) ? null : date;
|
|
64
|
+
}
|
|
65
|
+
return null;
|
|
66
|
+
};
|
|
67
|
+
const DATE_TYPES = /* @__PURE__ */ new Set([
|
|
68
|
+
"date",
|
|
69
|
+
"dateTime",
|
|
70
|
+
"time"
|
|
71
|
+
]);
|
|
72
|
+
const RANGE_TYPES = /* @__PURE__ */ new Set(["dateRange", "dateTimeRange"]);
|
|
73
|
+
const isDateType = (valueType) => !!valueType && (DATE_TYPES.has(valueType) || RANGE_TYPES.has(valueType));
|
|
74
|
+
const formatDateValue = (value, valueType, formatter) => {
|
|
75
|
+
if (Array.isArray(value)) return value.map((item) => formatDateValue(item, valueType, formatter));
|
|
76
|
+
const date = value instanceof Date ? value : null;
|
|
77
|
+
if (!date) return value;
|
|
78
|
+
if (formatter === false) return date;
|
|
79
|
+
if (formatter === "number") return date.getTime();
|
|
80
|
+
if (typeof formatter === "function") return formatter(date, valueType);
|
|
81
|
+
return formatDate(date, valueType === "dateTime" || valueType === "dateTimeRange", valueType === "time");
|
|
82
|
+
};
|
|
83
|
+
const readPersistedState = (key, type = "localStorage") => {
|
|
84
|
+
if (!key || typeof window === "undefined") return void 0;
|
|
85
|
+
try {
|
|
86
|
+
const raw = window[type]?.getItem(key);
|
|
87
|
+
return raw ? JSON.parse(raw) : void 0;
|
|
88
|
+
} catch {
|
|
89
|
+
return;
|
|
90
|
+
}
|
|
91
|
+
};
|
|
92
|
+
const writePersistedState = (key, type = "localStorage", value) => {
|
|
93
|
+
if (!key || typeof window === "undefined") return;
|
|
94
|
+
try {
|
|
95
|
+
if (value) window[type]?.setItem(key, JSON.stringify(value));
|
|
96
|
+
else window[type]?.removeItem(key);
|
|
97
|
+
} catch {}
|
|
98
|
+
};
|
|
99
|
+
//#endregion
|
|
100
|
+
export { findValueEnum, formatDate, formatDateValue, getByPath, getFieldName, getProColumnKey, isDateType, isEmptyValue, isNil, readPersistedState, resolveValueEnum, resolveValueType, setByPath, toDate, valueEnumToList, writePersistedState };
|
|
101
|
+
|
|
102
|
+
//# sourceMappingURL=utils.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"utils.mjs","names":[],"sources":["../../../src/base-ui/ProTable/utils.ts"],"sourcesContent":["import type { Key, ReactNode } from 'react';\n\nimport type {\n ProColumnType,\n ProTableColumnsStateMap,\n ProTableValueEnum,\n ProTableValueEnumItem,\n ProTableValueType,\n} from './type';\n\nexport const isNil = (value: unknown): value is null | undefined =>\n value === null || value === undefined;\n\nexport const isEmptyValue = (value: unknown) =>\n isNil(value) || value === '' || (Array.isArray(value) && value.length === 0);\n\n/** Field / state key of a column: `key`, then the dot-joined `dataIndex`, then its position. */\nexport const getProColumnKey = (column: ProColumnType<any>, index: number | string): string => {\n if (!isNil(column.key)) return String(column.key);\n const { dataIndex } = column;\n if (Array.isArray(dataIndex)) return dataIndex.join('.');\n if (!isNil(dataIndex)) return String(dataIndex);\n return `col-${index}`;\n};\n\n/** The name a column takes in the search form (and in `params`). */\nexport const getFieldName = (column: ProColumnType<any>, index: number) => {\n const { dataIndex } = column;\n if (Array.isArray(dataIndex)) return dataIndex.join('.');\n if (!isNil(dataIndex)) return String(dataIndex);\n return getProColumnKey(column, index);\n};\n\nexport const getByPath = (record: any, dataIndex: ProColumnType<any>['dataIndex']) => {\n if (isNil(dataIndex) || isNil(record)) return undefined;\n const path = Array.isArray(dataIndex) ? dataIndex : [dataIndex];\n return path.reduce<any>((acc, key) => (isNil(acc) ? undefined : acc[key as any]), record);\n};\n\n/** Set `a.b.c` style names into a nested object. */\nexport const setByPath = (target: Record<string, any>, name: string, value: any) => {\n const path = name.split('.');\n let cursor = target;\n path.forEach((key, index) => {\n if (index === path.length - 1) {\n cursor[key] = value;\n return;\n }\n if (typeof cursor[key] !== 'object' || cursor[key] === null) cursor[key] = {};\n cursor = cursor[key];\n });\n return target;\n};\n\nexport const resolveValueType = (\n column: ProColumnType<any>,\n record?: any,\n): ProTableValueType | undefined =>\n typeof column.valueType === 'function' ? column.valueType(record) : column.valueType;\n\nexport const resolveValueEnum = (\n column: ProColumnType<any>,\n record?: any,\n): ProTableValueEnum | undefined =>\n typeof column.valueEnum === 'function' ? column.valueEnum(record) : column.valueEnum;\n\nconst isEnumItem = (value: unknown): value is ProTableValueEnumItem =>\n typeof value === 'object' &&\n value !== null &&\n !Array.isArray(value) &&\n 'text' in (value as Record<string, unknown>);\n\nexport interface ValueEnumEntry {\n color?: string;\n disabled?: boolean;\n status?: ProTableValueEnumItem['status'];\n text: ReactNode;\n value: string;\n}\n\n/** `valueEnum` as an ordered list of `{ value, text, status }`. */\nexport const valueEnumToList = (valueEnum?: ProTableValueEnum): ValueEnumEntry[] => {\n if (!valueEnum) return [];\n const entries: [unknown, unknown][] =\n valueEnum instanceof Map ? [...valueEnum.entries()] : Object.entries(valueEnum);\n return entries.map(([value, item]) =>\n isEnumItem(item)\n ? { ...item, value: String(value) }\n : { text: item as ReactNode, value: String(value) },\n );\n};\n\nexport const findValueEnum = (valueEnum: ProTableValueEnum | undefined, value: unknown) =>\n valueEnumToList(valueEnum).find((item) => item.value === String(value));\n\n// ================================ Dates ================================\n\nconst pad = (value: number) => String(value).padStart(2, '0');\n\nexport const formatDate = (date: Date, withTime = false, timeOnly = false) => {\n const day = `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;\n const time = `${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`;\n if (timeOnly) return time;\n return withTime ? `${day} ${time}` : day;\n};\n\nexport const toDate = (value: unknown): Date | null => {\n if (value instanceof Date) return Number.isNaN(value.getTime()) ? null : value;\n if (typeof value === 'number' || typeof value === 'string') {\n const date = new Date(value);\n return Number.isNaN(date.getTime()) ? null : date;\n }\n return null;\n};\n\nconst DATE_TYPES = new Set<ProTableValueType>(['date', 'dateTime', 'time']);\nconst RANGE_TYPES = new Set<ProTableValueType>(['dateRange', 'dateTimeRange']);\n\nexport const isDateType = (valueType?: ProTableValueType) =>\n !!valueType && (DATE_TYPES.has(valueType) || RANGE_TYPES.has(valueType));\nexport const isRangeType = (valueType?: ProTableValueType) =>\n !!valueType && RANGE_TYPES.has(valueType);\n\nexport type DateFormatter = 'string' | 'number' | false | ((value: Date, valueType: string) => any);\n\nexport const formatDateValue = (\n value: unknown,\n valueType: ProTableValueType,\n formatter: DateFormatter,\n): any => {\n if (Array.isArray(value)) return value.map((item) => formatDateValue(item, valueType, formatter));\n const date = value instanceof Date ? value : null;\n if (!date) return value;\n if (formatter === false) return date;\n if (formatter === 'number') return date.getTime();\n if (typeof formatter === 'function') return formatter(date, valueType);\n return formatDate(\n date,\n valueType === 'dateTime' || valueType === 'dateTimeRange',\n valueType === 'time',\n );\n};\n\n// ============================ Columns state ============================\n\nexport const readPersistedState = (\n key?: string,\n type: 'localStorage' | 'sessionStorage' = 'localStorage',\n): ProTableColumnsStateMap | undefined => {\n if (!key || typeof window === 'undefined') return undefined;\n try {\n const raw = window[type]?.getItem(key);\n return raw ? (JSON.parse(raw) as ProTableColumnsStateMap) : undefined;\n } catch {\n return undefined;\n }\n};\n\nexport const writePersistedState = (\n key: string | undefined,\n type: 'localStorage' | 'sessionStorage' = 'localStorage',\n value?: ProTableColumnsStateMap,\n) => {\n if (!key || typeof window === 'undefined') return;\n try {\n if (value) window[type]?.setItem(key, JSON.stringify(value));\n else window[type]?.removeItem(key);\n } catch {\n // Storage may be unavailable (private mode, quota); the in-memory state still works.\n }\n};\n\nexport const toKeyList = (keys: readonly Key[] | undefined) => (keys ? [...keys] : []);\n"],"mappings":"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"}
|
|
@@ -23,7 +23,7 @@ import { useTableState } from "./useTableState.mjs";
|
|
|
23
23
|
import { memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef } from "react";
|
|
24
24
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
25
25
|
import { cx } from "antd-style";
|
|
26
|
-
import { ArrowDownFromLine, ArrowUpDown, ArrowUpToLine } from "lucide-react";
|
|
26
|
+
import { ArrowDownFromLine, ArrowUpDown, ArrowUpToLine, Inbox } from "lucide-react";
|
|
27
27
|
import RcTable, { EXPAND_COLUMN, INTERNAL_HOOKS, Summary, VirtualTable, convertChildrenToColumns } from "@rc-component/table";
|
|
28
28
|
//#region src/base-ui/Table/Table.tsx
|
|
29
29
|
const EMPTY_DATA = [];
|
|
@@ -399,7 +399,11 @@ const TableInner = (props) => {
|
|
|
399
399
|
screens,
|
|
400
400
|
selectionColumn: hasRowSelection,
|
|
401
401
|
size
|
|
402
|
-
}) : customEmpty === void 0 ? /* @__PURE__ */ jsx(Empty, {
|
|
402
|
+
}) : customEmpty === void 0 ? /* @__PURE__ */ jsx(Empty, {
|
|
403
|
+
description: t("table.emptyText"),
|
|
404
|
+
icon: Inbox,
|
|
405
|
+
imageSize: 40
|
|
406
|
+
}) : typeof customEmpty === "function" ? customEmpty() : customEmpty;
|
|
403
407
|
const TableComponent = virtual ? VirtualTable : RcTable;
|
|
404
408
|
return /* @__PURE__ */ jsxs("div", {
|
|
405
409
|
ref: rootRef,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.mjs","names":["tableMessages","RcVirtualTable"],"sources":["../../../src/base-ui/Table/Table.tsx"],"sourcesContent":["'use client';\n\nimport RcTable, {\n type ColumnsType as RcColumnsType,\n convertChildrenToColumns,\n EXPAND_COLUMN,\n type ExpandableConfig as RcExpandableConfig,\n INTERNAL_HOOKS,\n type Reference as RcReference,\n Summary,\n VirtualTable as RcVirtualTable,\n} from '@rc-component/table';\nimport { cx } from 'antd-style';\nimport { ArrowDownFromLine, ArrowUpDown, ArrowUpToLine } from 'lucide-react';\nimport {\n type HTMLAttributes,\n type Key,\n memo,\n type ReactNode,\n type Ref,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n} from 'react';\n\nimport ActionIcon from '@/base-ui/ActionIcon';\nimport Pagination, { type PaginationAlign } from '@/base-ui/Pagination';\nimport Spin from '@/base-ui/Spin';\nimport Tooltip from '@/base-ui/Tooltip';\nimport Empty from '@/Empty';\nimport { useEventCallback } from '@/hooks/useEventCallback';\nimport tableMessages from '@/i18n/resources/en/table';\nimport { useTranslation } from '@/i18n/useTranslation';\n\nimport Column from './Column';\nimport ColumnGroup from './ColumnGroup';\nimport {\n assertColumnKeys,\n fillColumns,\n flattenColumns,\n getColumnId,\n getColumnPos,\n isColumnGroup,\n isColumnVisibleAt,\n renderColumnTitle,\n} from './columnUtils';\nimport renderExpandIcon from './ExpandIcon';\nimport FilterDropdown, { TableMeasureRowContext } from './FilterDropdown';\nimport TableLoadingSkeleton from './LoadingSkeleton';\nimport {\n isPlainObject,\n SELECTION_ALL,\n SELECTION_COLUMN,\n SELECTION_INVERT,\n SELECTION_NONE,\n} from './selectionUtils';\nimport { normalizeClassNames, normalizeStyles, resolveSemantic } from './semantic';\nimport {\n EXPAND_COLUMN_WIDTH,\n PREFIX_CLS,\n SELECTION_COLUMN_WIDTH,\n SELECTION_DROPDOWN_WIDTH,\n styles,\n} from './style';\nimport type {\n SortOrder,\n TableColumn,\n TableColumnType,\n TableLocale,\n TableProps,\n TableRef,\n TableScrollToConfig,\n TableSize,\n TableSorterTooltipProps,\n} from './type';\nimport { useBreakpoint } from './useBreakpoint';\nimport { useSelection } from './useSelection';\nimport { DEFAULT_SORT_DIRECTIONS, getMultiplePriority, getNextSortOrder } from './useSorter';\nimport { useTableState } from './useTableState';\n\nconst EMPTY_DATA: any[] = [];\nconst DEFAULT_INDENT_SIZE = 15;\nconst DEFAULT_SORTER_TOOLTIP: TableSorterTooltipProps = { target: 'full-header' };\n\n/**\n * Estimated `virtual` row height per size, like antd: padding × 2 + 14px × 22/14 line + 1px border.\n * rc-virtual-list still measures the real rows; this only seeds the scroll range.\n */\nconst VIRTUAL_ROW_HEIGHT: Record<TableSize, number> = {\n large: 16 * 2 + 22 + 1,\n medium: 12 * 2 + 22 + 1,\n middle: 12 * 2 + 22 + 1,\n small: 8 * 2 + 22 + 1,\n};\n\nconst sizeClassName: Record<TableSize, string> = {\n large: styles.sizeLarge,\n medium: styles.sizeMedium,\n middle: styles.sizeMedium,\n small: styles.sizeSmall,\n};\n\nconst sortTipOf = (next: SortOrder | undefined, locale: TableLocale) =>\n next === 'descend'\n ? locale.triggerDesc\n : next === 'ascend'\n ? locale.triggerAsc\n : locale.cancelSort;\n\nconst ariaSortOf = (order: SortOrder | undefined) =>\n order === 'ascend' ? 'ascending' : order === 'descend' ? 'descending' : 'none';\n\nconst paginationAlignClassName: Record<PaginationAlign, string> = {\n center: styles.paginationCenter,\n end: styles.paginationEnd,\n start: styles.paginationStart,\n};\n\n/** antd `normalizePlacement`: `topLeft` / `bottomStart` → `start`, `*Center` → `center`, else `end`. */\nconst normalizePlacement = (placement: string): PaginationAlign => {\n const lower = placement.toLowerCase();\n if (lower.includes('center')) return 'center';\n return lower.includes('left') || lower.includes('start') ? 'start' : 'end';\n};\n\n// Only a static filter trigger renders in rc-table's hidden measure row, like antd.\nconst wrapMeasureRow = (measureRow: ReactNode) => (\n <TableMeasureRowContext value={true}>{measureRow}</TableMeasureRowContext>\n);\n\n/** antd's ref shape: the root element itself, extended with `nativeElement` and `scrollTo`. */\nconst toTableRef = (\n element: HTMLDivElement,\n scrollTo: (config: TableScrollToConfig) => void,\n): TableRef => {\n const extra = { nativeElement: element, scrollTo };\n return new Proxy(element, {\n get(target, prop) {\n if (prop in extra) return extra[prop as keyof typeof extra];\n const value = Reflect.get(target, prop, target);\n return typeof value === 'function' ? value.bind(target) : value;\n },\n }) as TableRef;\n};\n\nconst TableInner = <T,>(props: TableProps<T>) => {\n const {\n variant = 'borderless',\n children,\n childrenColumnName: legacyChildrenColumnName,\n className,\n classNames,\n column: columnDefaults,\n columns: columnsProp,\n components,\n dataSource = EMPTY_DATA as T[],\n emptyText,\n expandable,\n expandedRowRender: legacyExpandedRowRender,\n expandIcon: legacyExpandIcon,\n expandIconColumnIndex: legacyExpandIconColumnIndex,\n footer,\n getPopupContainer,\n indentSize: legacyIndentSize,\n loading = false,\n locale,\n measureRowRender,\n onChange,\n onHeaderRow,\n onRow,\n onScroll,\n pagination,\n ref,\n rootClassName,\n rowClassName,\n rowHoverable = true,\n rowKey = 'key',\n rowSelection,\n scroll,\n showHeader,\n showSorterTooltip: tableShowSorterTooltip = DEFAULT_SORTER_TOOLTIP,\n size: sizeProp,\n sortDirections: tableSortDirections = DEFAULT_SORT_DIRECTIONS,\n sticky,\n style,\n styles: customStyles,\n summary,\n tableLayout,\n title,\n virtual,\n } = props;\n const size: TableSize = sizeProp ?? 'middle';\n\n // =============================== Locale ===============================\n const { t } = useTranslation(tableMessages);\n const tableLocale = useMemo(\n (): TableLocale => ({\n cancelSort: t('table.cancelSort'),\n collapse: t('table.collapse'),\n expand: t('table.expand'),\n filterCheckAll: t('table.filterCheckAll'),\n filterConfirm: t('table.filterConfirm'),\n filterEmptyText: t('table.filterEmptyText'),\n filterReset: t('table.filterReset'),\n filterSearchPlaceholder: t('table.filterSearchPlaceholder'),\n filterTitle: t('table.filterTitle'),\n selectAll: t('table.selectAll'),\n selectInvert: t('table.selectInvert'),\n selectNone: t('table.selectNone'),\n selectionAll: t('table.selectionAll'),\n sortTitle: t('table.sortTitle'),\n triggerAsc: t('table.triggerAsc'),\n triggerDesc: t('table.triggerDesc'),\n ...(locale?.filterCheckall !== undefined && { filterCheckAll: locale.filterCheckall }),\n ...locale,\n }),\n [t, locale],\n );\n\n // ============================ Semantic DOM ============================\n const semanticInfo = { props };\n const mergedClassNames = normalizeClassNames(resolveSemantic(classNames, semanticInfo));\n const mergedStyles = normalizeStyles(resolveSemantic(customStyles, semanticInfo));\n\n const rawColumns = useMemo(\n () => columnsProp ?? (convertChildrenToColumns(children) as TableColumn<T>[]),\n [columnsProp, children],\n );\n const columns = useMemo(\n () => fillColumns(rawColumns, columnDefaults),\n [rawColumns, columnDefaults],\n );\n\n assertColumnKeys(columns);\n\n const needResponsive = useMemo(\n () => flattenColumns(columns).some(({ column }) => column.responsive),\n [columns],\n );\n const screens = useBreakpoint(needResponsive);\n\n // ============================= Expandable =============================\n const hasRowSelection = Boolean(rowSelection);\n const childrenColumnName =\n expandable?.childrenColumnName ?? legacyChildrenColumnName ?? 'children';\n const expandType = useMemo(() => {\n if (dataSource.some((record) => isPlainObject(record) && record[childrenColumnName])) {\n return 'nest';\n }\n if (legacyExpandedRowRender || expandable?.expandedRowRender) return 'row';\n return null;\n }, [childrenColumnName, dataSource, legacyExpandedRowRender, expandable?.expandedRowRender]);\n\n // Like antd: legacy top-level props sit under `expandable`, which always wins.\n const mergedExpandable = useMemo((): RcExpandableConfig<any> => {\n const config: RcExpandableConfig<any> = {\n childrenColumnName: legacyChildrenColumnName,\n expandedRowRender: legacyExpandedRowRender,\n expandIconColumnIndex: legacyExpandIconColumnIndex,\n ...(expandable as RcExpandableConfig<any>),\n expandIcon: (expandable?.expandIcon ??\n legacyExpandIcon ??\n ((iconProps: any) => renderExpandIcon(iconProps, tableLocale))) as any,\n };\n // Like antd: tree toggles sit after the selection column; legacy indexes skip it.\n if (expandType === 'nest' && config.expandIconColumnIndex === undefined) {\n config.expandIconColumnIndex = hasRowSelection ? 1 : 0;\n } else if ((config.expandIconColumnIndex ?? 0) > 0 && hasRowSelection) {\n config.expandIconColumnIndex = config.expandIconColumnIndex! - 1;\n }\n // Virtual rows are flex boxes sized from numeric widths; the CSS `col` width never reaches them.\n if (virtual && config.columnWidth === undefined) config.columnWidth = EXPAND_COLUMN_WIDTH;\n if (typeof config.indentSize !== 'number') {\n config.indentSize =\n typeof legacyIndentSize === 'number' ? legacyIndentSize : DEFAULT_INDENT_SIZE;\n }\n return config;\n }, [\n expandable,\n legacyChildrenColumnName,\n legacyExpandedRowRender,\n legacyExpandIcon,\n legacyExpandIconColumnIndex,\n legacyIndentSize,\n expandType,\n hasRowSelection,\n virtual,\n tableLocale,\n ]);\n\n // ================================ Refs ================================\n const rootRef = useRef<HTMLDivElement>(null);\n const rcRef = useRef<RcReference>(null);\n useImperativeHandle(\n ref as Ref<TableRef>,\n () => toTableRef(rootRef.current!, (config) => rcRef.current?.scrollTo(config)),\n [],\n );\n\n // ======================== Sort / Filter / Page ========================\n const state = useTableState({\n childrenColumnName,\n columns,\n dataSource,\n onChange,\n // Like antd: on by default once `scroll` is set.\n onTableChange: () => {\n if (scroll && scroll.scrollToFirstRowOnChange !== false) rcRef.current?.scrollTo({ top: 0 });\n },\n pagination,\n });\n const {\n config: paginationConfig,\n data: allRows,\n filterStates,\n page,\n sortStates,\n titleProps,\n } = state;\n const { pageIndex, pageSize } = page;\n const { total } = state;\n\n // Like antd: async data (fewer rows than `total`, at most one page) is shown as given.\n const rows = useMemo(() => {\n if (pagination === false) return allRows;\n if (allRows.length < total && allRows.length <= pageSize) return allRows;\n return allRows.slice(pageIndex * pageSize, (pageIndex + 1) * pageSize);\n }, [allRows, pagination, pageIndex, pageSize, total]);\n\n // ============================== Selection ==============================\n const getRowKey = useMemo(\n () =>\n typeof rowKey === 'function'\n ? rowKey\n : (record: T) => (record as Record<PropertyKey, unknown>)?.[rowKey as PropertyKey] as Key,\n [rowKey],\n );\n const recordMap = useMemo(() => {\n const map = new Map<Key, T>();\n const dig = (records: readonly T[]) => {\n records.forEach((record, index) => {\n map.set(getRowKey(record, index), record);\n const children = isPlainObject(record) ? record[childrenColumnName] : undefined;\n if (Array.isArray(children)) dig(children as T[]);\n });\n };\n dig(dataSource);\n return map;\n }, [dataSource, childrenColumnName, getRowKey]);\n const getRecordByKey = useCallback((key: Key) => recordMap.get(key), [recordMap]);\n // Same as the expand column: give virtual rows the selection column's CSS width as a number.\n const mergedRowSelection = useMemo(() => {\n if (!virtual || !rowSelection || rowSelection.columnWidth !== undefined) return rowSelection;\n const withDropdown = Boolean(rowSelection.selections) && rowSelection.type !== 'radio';\n return {\n ...rowSelection,\n columnWidth:\n SELECTION_COLUMN_WIDTH +\n (withDropdown ? SELECTION_DROPDOWN_WIDTH : 0) +\n (variant === 'outlined' ? 16 : 0),\n };\n }, [virtual, rowSelection, variant]);\n const [transformSelectionColumns, selectedKeySet] = useSelection<T>(\n {\n childrenColumnName,\n data: allRows,\n expandType,\n getRecordByKey,\n getRowKey,\n locale: tableLocale,\n pageData: rows,\n },\n mergedRowSelection,\n );\n const mergedRowClassName = useCallback(\n (record: T, index: number, indent: number) =>\n cx(\n selectedKeySet.has(getRowKey(record, index)) && `${PREFIX_CLS}-row-selected`,\n typeof rowClassName === 'function' ? rowClassName(record, index, indent) : rowClassName,\n ),\n [selectedKeySet, getRowKey, rowClassName],\n );\n\n const clientPaginated = pagination !== false && paginationConfig?.total === undefined;\n const syncClampedPage = useEventCallback(() => state.clampPage(pageIndex));\n\n useEffect(() => {\n if (clientPaginated && pageIndex !== state.rawPageIndex) syncClampedPage();\n }, [clientPaginated, pageIndex, state.rawPageIndex, syncClampedPage]);\n\n // ============================== Loading ===============================\n const {\n spinning: isLoading = true,\n tip,\n variant: spinVariant = 'network',\n ...spinRest\n } = typeof loading === 'object' ? loading : { spinning: loading };\n const spinProps = { variant: spinVariant, ...spinRest };\n\n // =============================== Columns ==============================\n const triggerSort = useEventCallback(state.triggerSort);\n const triggerFilter = useEventCallback(state.triggerFilter);\n\n const rcColumns = useMemo(() => {\n const transform = (list: readonly TableColumn<T>[], parentPos?: string): RcColumnsType<any> =>\n list.flatMap((column, index) => {\n // The placeholders must reach rc-table by identity.\n if (column === EXPAND_COLUMN || column === SELECTION_COLUMN) return [column];\n // Positions (and so fallback ids) come from the full tree, before responsive filtering.\n const pos = getColumnPos(index, parentPos);\n if (!isColumnVisibleAt(column, screens)) return [];\n\n const id = getColumnId(column, pos);\n const {\n defaultFilteredValue: _defaultFilteredValue,\n defaultSortOrder: _defaultSortOrder,\n filterDropdown,\n filterDropdownOpen: _filterDropdownOpen,\n filterDropdownProps: _filterDropdownProps,\n filtered: _filtered,\n filteredValue: _filteredValue,\n filterIcon: _filterIcon,\n filterMode: _filterMode,\n filterMultiple: _filterMultiple,\n filterOnClose: _filterOnClose,\n filterResetToDefaultFilteredValue: _filterResetToDefaultFilteredValue,\n filters: columnFilters,\n filterSearch: _filterSearch,\n onFilter: _onFilter,\n onFilterDropdownOpenChange: _onFilterDropdownOpenChange,\n onHeaderCell,\n responsive: _responsive,\n showSorterTooltip: columnShowSorterTooltip,\n sortDirections: columnSortDirections,\n sortIcon,\n sortOrder: _sortOrder,\n sorter,\n title: columnTitle,\n ...rest\n } = column as TableColumnType<T>;\n const order = sorter ? sortStates.find(({ key }) => key === id)?.sortOrder : undefined;\n\n const titleNode = renderColumnTitle(columnTitle, titleProps);\n const titleText =\n typeof titleNode === 'string' || typeof titleNode === 'number'\n ? String(titleNode)\n : undefined;\n // A single-text wrapper lets rc-table derive the header `title` and truncate it.\n const titleContent = column.ellipsis ? (\n <span className={cx(styles.columnTitle, `${PREFIX_CLS}-column-title`)}>{titleNode}</span>\n ) : (\n titleNode\n );\n\n const filterNode =\n columnFilters || filterDropdown ? (\n <FilterDropdown<T>\n column={column as TableColumnType<T>}\n columnKey={id}\n filterState={filterStates.find(({ key }) => key === id)}\n getPopupContainer={getPopupContainer}\n label={titleText ?? id}\n locale={tableLocale}\n triggerFilter={triggerFilter}\n />\n ) : null;\n const hasControls = Boolean(sorter) || Boolean(filterNode);\n\n let sorterNode: ReactNode = null;\n if (sorter) {\n const sortDirections = columnSortDirections ?? tableSortDirections;\n const nextOrder = getNextSortOrder(sortDirections, order);\n const showTooltip = columnShowSorterTooltip ?? tableShowSorterTooltip;\n const { target, ...tooltipOptions } =\n typeof showTooltip === 'object' ? showTooltip : ({} as TableSorterTooltipProps);\n const tooltipProps = { title: sortTipOf(nextOrder, tableLocale), ...tooltipOptions };\n const withTooltip = (node: ReactNode) => <Tooltip {...tooltipProps}>{node}</Tooltip>;\n\n const iconOnlyTooltip = Boolean(showTooltip) && target === 'sorter-icon';\n const onSort = () =>\n triggerSort({\n column,\n key: id,\n multiplePriority: getMultiplePriority(column),\n sortOrder: nextOrder,\n });\n // ActionIcon owns the click (same as the filter trigger). The title stays a plain\n // span so we never nest a button inside a button; clicking the title still sorts.\n const sortAction = (\n <ActionIcon\n active={Boolean(order)}\n className={cx(styles.sortCaret, `${PREFIX_CLS}-column-sorter`)}\n data-order={order ?? undefined}\n size=\"small\"\n icon={\n sortIcon\n ? sortIcon({ sortOrder: order ?? null })\n : order === 'ascend'\n ? ArrowUpToLine\n : order === 'descend'\n ? ArrowDownFromLine\n : ArrowUpDown\n }\n {...(iconOnlyTooltip && showTooltip\n ? { title: tooltipProps.title, tooltipProps: tooltipOptions }\n : {})}\n onClick={(event) => {\n event.stopPropagation();\n onSort();\n }}\n />\n );\n const group = (\n <span\n className={cx(styles.sortButton, `${PREFIX_CLS}-column-sorters`)}\n // Without a tooltip, the native title still says the header sorts.\n title={showTooltip ? undefined : tableLocale.sortTitle}\n >\n <span className={styles.sortTitle} onClick={onSort}>\n {titleContent}\n </span>\n {sortAction}\n </span>\n );\n sorterNode = showTooltip && !iconOnlyTooltip ? withTooltip(group) : group;\n }\n\n return {\n ...rest,\n className: cx(\n rest.className,\n order ? [`${PREFIX_CLS}-column-sort`, styles.sortedColumn] : undefined,\n ),\n children: isColumnGroup(column) ? transform(column.children, pos) : undefined,\n key: id,\n onHeaderCell: () => {\n const cell = onHeaderCell?.(column);\n return {\n ...(sorter && { 'aria-sort': ariaSortOf(order) }),\n ...(column.ellipsis && hasControls && titleText && { title: titleText }),\n ...cell,\n className: cx(sorter && `${PREFIX_CLS}-column-has-sorters`, cell?.className),\n };\n },\n title: hasControls ? (\n <span className={styles.headerInner}>\n {sorterNode ?? titleContent}\n {filterNode}\n </span>\n ) : (\n titleContent\n ),\n };\n }) as RcColumnsType<any>;\n\n return transform(columns);\n }, [\n columns,\n screens,\n sortStates,\n filterStates,\n titleProps,\n getPopupContainer,\n triggerFilter,\n triggerSort,\n tableSortDirections,\n tableShowSorterTooltip,\n tableLocale,\n ]);\n\n // ============================== Rows ==============================\n const mergedOnRow = useMemo(\n () =>\n (record: T, index?: number): HTMLAttributes<HTMLElement> => {\n const rowProps = onRow?.(record, index ?? 0) ?? {};\n return {\n ...rowProps,\n className: cx(rowProps.onClick && styles.clickable, rowProps.className),\n };\n },\n [onRow],\n );\n\n // antd defaults to `fixed` layout once a column is pinned; `max-content` keeps sizing to content.\n const hasFixedColumn = useMemo(\n () =>\n Boolean(rowSelection?.fixed) ||\n flattenColumns(columns).some(({ column }) => column.fixed && !column.hidden),\n [columns, rowSelection?.fixed],\n );\n const mergedTableLayout =\n tableLayout ?? (hasFixedColumn && scroll?.x !== 'max-content' ? 'fixed' : undefined);\n\n // ============================= Pagination =============================\n let topPagination: ReactNode = null;\n let bottomPagination: ReactNode = null;\n if (paginationConfig && total > 0) {\n const {\n current: _current,\n defaultCurrent: _defaultCurrent,\n defaultPageSize: _defaultPageSize,\n onChange: _onChange,\n onShowSizeChange: _onShowSizeChange,\n pageSize: _pageSize,\n placement,\n position,\n total: _total,\n className: paginationClassName,\n classNames: paginationClassNames,\n size: paginationSize,\n styles: paginationStyles,\n ...paginationRest\n } = paginationConfig;\n const pageCount = Math.ceil(total / pageSize);\n const renderPagination = (align: PaginationAlign, side: 'top' | 'bottom') => (\n <div\n className={cx(\n styles.pagination,\n side === 'top' && styles.paginationTop,\n paginationAlignClassName[align],\n `${PREFIX_CLS}-pagination-wrapper`,\n )}\n >\n <Pagination\n {...paginationRest}\n current={pageIndex + 1}\n pageSize={pageSize}\n // Like antd: `small` / `medium` tables get a small pager unless one is set.\n size={paginationSize ?? (sizeProp && sizeProp !== 'large' ? 'small' : undefined)}\n total={total}\n className={cx(\n `${PREFIX_CLS}-pagination`,\n `${PREFIX_CLS}-pagination-${align}`,\n paginationClassName,\n )}\n classNames={{\n item: cx(mergedClassNames.pagination.item, paginationClassNames?.item),\n root: cx(mergedClassNames.pagination.root, paginationClassNames?.root),\n }}\n styles={{\n item: { ...paginationStyles?.item, ...mergedStyles.pagination.item },\n root: { ...paginationStyles?.root, ...mergedStyles.pagination.root },\n }}\n onChange={(next, nextPageSize) =>\n state.onPaginationChange({ pageIndex: next - 1, pageSize: nextPageSize })\n }\n />\n </div>\n );\n\n if (!(paginationRest.hideOnSinglePage && pageCount <= 1)) {\n const mergedPlacement = placement ?? position;\n if (Array.isArray(mergedPlacement)) {\n const find = (side: string) =>\n (mergedPlacement as string[]).find((item) => item.includes(side));\n const top = find('top');\n const bottom = find('bottom');\n const none = mergedPlacement.every((item) => item === 'none');\n if (top) topPagination = renderPagination(normalizePlacement(top), 'top');\n if (bottom) bottomPagination = renderPagination(normalizePlacement(bottom), 'bottom');\n if (!top && !bottom && !none) bottomPagination = renderPagination('end', 'bottom');\n } else {\n bottomPagination = renderPagination('end', 'bottom');\n }\n }\n }\n\n // Like antd: `locale.emptyText` (here also the `emptyText` alias) replaces the default empty state.\n const customEmpty = locale?.emptyText ?? emptyText;\n const emptyNode = isLoading ? (\n <TableLoadingSkeleton\n columns={columns}\n expandColumn={Boolean(expandType)}\n rows={pagination === false ? 5 : Math.min(5, pageSize)}\n screens={screens}\n selectionColumn={hasRowSelection}\n size={size}\n />\n ) : customEmpty === undefined ? (\n <Empty description={t('table.emptyText')} />\n ) : typeof customEmpty === 'function' ? (\n customEmpty()\n ) : (\n customEmpty\n );\n\n // Like antd: `virtual` swaps in rc-table's VirtualTable (rc-virtual-list body).\n const TableComponent = (virtual ? RcVirtualTable : RcTable) as typeof RcTable;\n\n return (\n <div\n ref={rootRef}\n style={{ ...mergedStyles.root, ...style }}\n className={cx(\n styles.root,\n `${PREFIX_CLS}-wrapper`,\n rootClassName,\n className,\n mergedClassNames.root,\n )}\n >\n {topPagination}\n <div className={styles.spinContainer} data-table-wrapper=\"\">\n <TableComponent<any>\n {...(virtual && { listItemHeight: VIRTUAL_ROW_HEIGHT[size] })}\n columns={rcColumns}\n components={components as any}\n data={rows as any[]}\n emptyText={emptyNode}\n expandable={mergedExpandable}\n footer={footer as any}\n internalHooks={INTERNAL_HOOKS}\n prefixCls={PREFIX_CLS}\n ref={rcRef}\n rowClassName={mergedRowClassName as any}\n rowHoverable={rowHoverable}\n rowKey={rowKey as string | ((record: T) => Key)}\n scroll={scroll}\n showHeader={showHeader}\n sticky={sticky}\n summary={summary as any}\n tableLayout={mergedTableLayout}\n title={title as any}\n transformColumns={transformSelectionColumns}\n className={cx(\n styles.table,\n sizeClassName[size],\n `${PREFIX_CLS}-${size === 'middle' ? 'medium' : size}`,\n variant === 'outlined' && styles.outlined,\n variant === 'filled' && styles.filled,\n `${PREFIX_CLS}-${variant}`,\n rowHoverable && styles.hoverable,\n )}\n classNames={{\n body: mergedClassNames.body,\n content: mergedClassNames.content,\n footer: mergedClassNames.footer,\n header: mergedClassNames.header,\n section: mergedClassNames.section,\n title: mergedClassNames.title,\n }}\n measureRowRender={(measureRow) =>\n wrapMeasureRow(measureRowRender ? measureRowRender(measureRow) : measureRow)\n }\n styles={{\n body: mergedStyles.body,\n content: mergedStyles.content,\n footer: mergedStyles.footer,\n header: mergedStyles.header,\n section: mergedStyles.section,\n title: mergedStyles.title,\n }}\n onHeaderRow={onHeaderRow as any}\n onRow={mergedOnRow as any}\n onScroll={onScroll}\n />\n {isLoading && (\n <div className={styles.loading} data-table-loading=\"\">\n <Spin {...spinProps} />\n {tip}\n </div>\n )}\n </div>\n {bottomPagination}\n </div>\n );\n};\n\ntype TableComponent = (<T>(props: TableProps<T>) => ReactNode) & {\n Column: typeof Column;\n ColumnGroup: typeof ColumnGroup;\n displayName?: string;\n /** Placeholder in `columns` marking where the expand column goes. */\n EXPAND_COLUMN: TableColumn<any>;\n /** `rowSelection.selections` preset: select every row of every page. */\n SELECTION_ALL: typeof SELECTION_ALL;\n /** Placeholder in `columns` marking where the selection column goes. */\n SELECTION_COLUMN: TableColumn<any>;\n /** Rows rendered by `summary`: `Table.Summary` (`fixed`), `.Row` and `.Cell` (`index`, `colSpan`). */\n Summary: typeof Summary;\n /** `rowSelection.selections` preset: invert the current page. */\n SELECTION_INVERT: typeof SELECTION_INVERT;\n /** `rowSelection.selections` preset: clear the selection. */\n SELECTION_NONE: typeof SELECTION_NONE;\n};\n\nconst Table = memo(TableInner) as unknown as TableComponent;\n\nTable.displayName = 'Table';\nTable.Column = Column;\nTable.ColumnGroup = ColumnGroup;\nTable.EXPAND_COLUMN = EXPAND_COLUMN as TableColumn<any>;\nTable.SELECTION_COLUMN = SELECTION_COLUMN;\nTable.SELECTION_ALL = SELECTION_ALL;\nTable.SELECTION_INVERT = SELECTION_INVERT;\nTable.SELECTION_NONE = SELECTION_NONE;\nTable.Summary = Summary;\n\nexport { TableInner };\n\nexport default Table;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Table.mjs","names":["tableMessages","RcVirtualTable"],"sources":["../../../src/base-ui/Table/Table.tsx"],"sourcesContent":["'use client';\n\nimport RcTable, {\n type ColumnsType as RcColumnsType,\n convertChildrenToColumns,\n EXPAND_COLUMN,\n type ExpandableConfig as RcExpandableConfig,\n INTERNAL_HOOKS,\n type Reference as RcReference,\n Summary,\n VirtualTable as RcVirtualTable,\n} from '@rc-component/table';\nimport { cx } from 'antd-style';\nimport { ArrowDownFromLine, ArrowUpDown, ArrowUpToLine, Inbox } from 'lucide-react';\nimport {\n type HTMLAttributes,\n type Key,\n memo,\n type ReactNode,\n type Ref,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n} from 'react';\n\nimport ActionIcon from '@/base-ui/ActionIcon';\nimport Pagination, { type PaginationAlign } from '@/base-ui/Pagination';\nimport Spin from '@/base-ui/Spin';\nimport Tooltip from '@/base-ui/Tooltip';\nimport Empty from '@/Empty';\nimport { useEventCallback } from '@/hooks/useEventCallback';\nimport tableMessages from '@/i18n/resources/en/table';\nimport { useTranslation } from '@/i18n/useTranslation';\n\nimport Column from './Column';\nimport ColumnGroup from './ColumnGroup';\nimport {\n assertColumnKeys,\n fillColumns,\n flattenColumns,\n getColumnId,\n getColumnPos,\n isColumnGroup,\n isColumnVisibleAt,\n renderColumnTitle,\n} from './columnUtils';\nimport renderExpandIcon from './ExpandIcon';\nimport FilterDropdown, { TableMeasureRowContext } from './FilterDropdown';\nimport TableLoadingSkeleton from './LoadingSkeleton';\nimport {\n isPlainObject,\n SELECTION_ALL,\n SELECTION_COLUMN,\n SELECTION_INVERT,\n SELECTION_NONE,\n} from './selectionUtils';\nimport { normalizeClassNames, normalizeStyles, resolveSemantic } from './semantic';\nimport {\n EXPAND_COLUMN_WIDTH,\n PREFIX_CLS,\n SELECTION_COLUMN_WIDTH,\n SELECTION_DROPDOWN_WIDTH,\n styles,\n} from './style';\nimport type {\n SortOrder,\n TableColumn,\n TableColumnType,\n TableLocale,\n TableProps,\n TableRef,\n TableScrollToConfig,\n TableSize,\n TableSorterTooltipProps,\n} from './type';\nimport { useBreakpoint } from './useBreakpoint';\nimport { useSelection } from './useSelection';\nimport { DEFAULT_SORT_DIRECTIONS, getMultiplePriority, getNextSortOrder } from './useSorter';\nimport { useTableState } from './useTableState';\n\nconst EMPTY_DATA: any[] = [];\nconst DEFAULT_INDENT_SIZE = 15;\nconst DEFAULT_SORTER_TOOLTIP: TableSorterTooltipProps = { target: 'full-header' };\n\n/**\n * Estimated `virtual` row height per size, like antd: padding × 2 + 14px × 22/14 line + 1px border.\n * rc-virtual-list still measures the real rows; this only seeds the scroll range.\n */\nconst VIRTUAL_ROW_HEIGHT: Record<TableSize, number> = {\n large: 16 * 2 + 22 + 1,\n medium: 12 * 2 + 22 + 1,\n middle: 12 * 2 + 22 + 1,\n small: 8 * 2 + 22 + 1,\n};\n\nconst sizeClassName: Record<TableSize, string> = {\n large: styles.sizeLarge,\n medium: styles.sizeMedium,\n middle: styles.sizeMedium,\n small: styles.sizeSmall,\n};\n\nconst sortTipOf = (next: SortOrder | undefined, locale: TableLocale) =>\n next === 'descend'\n ? locale.triggerDesc\n : next === 'ascend'\n ? locale.triggerAsc\n : locale.cancelSort;\n\nconst ariaSortOf = (order: SortOrder | undefined) =>\n order === 'ascend' ? 'ascending' : order === 'descend' ? 'descending' : 'none';\n\nconst paginationAlignClassName: Record<PaginationAlign, string> = {\n center: styles.paginationCenter,\n end: styles.paginationEnd,\n start: styles.paginationStart,\n};\n\n/** antd `normalizePlacement`: `topLeft` / `bottomStart` → `start`, `*Center` → `center`, else `end`. */\nconst normalizePlacement = (placement: string): PaginationAlign => {\n const lower = placement.toLowerCase();\n if (lower.includes('center')) return 'center';\n return lower.includes('left') || lower.includes('start') ? 'start' : 'end';\n};\n\n// Only a static filter trigger renders in rc-table's hidden measure row, like antd.\nconst wrapMeasureRow = (measureRow: ReactNode) => (\n <TableMeasureRowContext value={true}>{measureRow}</TableMeasureRowContext>\n);\n\n/** antd's ref shape: the root element itself, extended with `nativeElement` and `scrollTo`. */\nconst toTableRef = (\n element: HTMLDivElement,\n scrollTo: (config: TableScrollToConfig) => void,\n): TableRef => {\n const extra = { nativeElement: element, scrollTo };\n return new Proxy(element, {\n get(target, prop) {\n if (prop in extra) return extra[prop as keyof typeof extra];\n const value = Reflect.get(target, prop, target);\n return typeof value === 'function' ? value.bind(target) : value;\n },\n }) as TableRef;\n};\n\nconst TableInner = <T,>(props: TableProps<T>) => {\n const {\n variant = 'borderless',\n children,\n childrenColumnName: legacyChildrenColumnName,\n className,\n classNames,\n column: columnDefaults,\n columns: columnsProp,\n components,\n dataSource = EMPTY_DATA as T[],\n emptyText,\n expandable,\n expandedRowRender: legacyExpandedRowRender,\n expandIcon: legacyExpandIcon,\n expandIconColumnIndex: legacyExpandIconColumnIndex,\n footer,\n getPopupContainer,\n indentSize: legacyIndentSize,\n loading = false,\n locale,\n measureRowRender,\n onChange,\n onHeaderRow,\n onRow,\n onScroll,\n pagination,\n ref,\n rootClassName,\n rowClassName,\n rowHoverable = true,\n rowKey = 'key',\n rowSelection,\n scroll,\n showHeader,\n showSorterTooltip: tableShowSorterTooltip = DEFAULT_SORTER_TOOLTIP,\n size: sizeProp,\n sortDirections: tableSortDirections = DEFAULT_SORT_DIRECTIONS,\n sticky,\n style,\n styles: customStyles,\n summary,\n tableLayout,\n title,\n virtual,\n } = props;\n const size: TableSize = sizeProp ?? 'middle';\n\n // =============================== Locale ===============================\n const { t } = useTranslation(tableMessages);\n const tableLocale = useMemo(\n (): TableLocale => ({\n cancelSort: t('table.cancelSort'),\n collapse: t('table.collapse'),\n expand: t('table.expand'),\n filterCheckAll: t('table.filterCheckAll'),\n filterConfirm: t('table.filterConfirm'),\n filterEmptyText: t('table.filterEmptyText'),\n filterReset: t('table.filterReset'),\n filterSearchPlaceholder: t('table.filterSearchPlaceholder'),\n filterTitle: t('table.filterTitle'),\n selectAll: t('table.selectAll'),\n selectInvert: t('table.selectInvert'),\n selectNone: t('table.selectNone'),\n selectionAll: t('table.selectionAll'),\n sortTitle: t('table.sortTitle'),\n triggerAsc: t('table.triggerAsc'),\n triggerDesc: t('table.triggerDesc'),\n ...(locale?.filterCheckall !== undefined && { filterCheckAll: locale.filterCheckall }),\n ...locale,\n }),\n [t, locale],\n );\n\n // ============================ Semantic DOM ============================\n const semanticInfo = { props };\n const mergedClassNames = normalizeClassNames(resolveSemantic(classNames, semanticInfo));\n const mergedStyles = normalizeStyles(resolveSemantic(customStyles, semanticInfo));\n\n const rawColumns = useMemo(\n () => columnsProp ?? (convertChildrenToColumns(children) as TableColumn<T>[]),\n [columnsProp, children],\n );\n const columns = useMemo(\n () => fillColumns(rawColumns, columnDefaults),\n [rawColumns, columnDefaults],\n );\n\n assertColumnKeys(columns);\n\n const needResponsive = useMemo(\n () => flattenColumns(columns).some(({ column }) => column.responsive),\n [columns],\n );\n const screens = useBreakpoint(needResponsive);\n\n // ============================= Expandable =============================\n const hasRowSelection = Boolean(rowSelection);\n const childrenColumnName =\n expandable?.childrenColumnName ?? legacyChildrenColumnName ?? 'children';\n const expandType = useMemo(() => {\n if (dataSource.some((record) => isPlainObject(record) && record[childrenColumnName])) {\n return 'nest';\n }\n if (legacyExpandedRowRender || expandable?.expandedRowRender) return 'row';\n return null;\n }, [childrenColumnName, dataSource, legacyExpandedRowRender, expandable?.expandedRowRender]);\n\n // Like antd: legacy top-level props sit under `expandable`, which always wins.\n const mergedExpandable = useMemo((): RcExpandableConfig<any> => {\n const config: RcExpandableConfig<any> = {\n childrenColumnName: legacyChildrenColumnName,\n expandedRowRender: legacyExpandedRowRender,\n expandIconColumnIndex: legacyExpandIconColumnIndex,\n ...(expandable as RcExpandableConfig<any>),\n expandIcon: (expandable?.expandIcon ??\n legacyExpandIcon ??\n ((iconProps: any) => renderExpandIcon(iconProps, tableLocale))) as any,\n };\n // Like antd: tree toggles sit after the selection column; legacy indexes skip it.\n if (expandType === 'nest' && config.expandIconColumnIndex === undefined) {\n config.expandIconColumnIndex = hasRowSelection ? 1 : 0;\n } else if ((config.expandIconColumnIndex ?? 0) > 0 && hasRowSelection) {\n config.expandIconColumnIndex = config.expandIconColumnIndex! - 1;\n }\n // Virtual rows are flex boxes sized from numeric widths; the CSS `col` width never reaches them.\n if (virtual && config.columnWidth === undefined) config.columnWidth = EXPAND_COLUMN_WIDTH;\n if (typeof config.indentSize !== 'number') {\n config.indentSize =\n typeof legacyIndentSize === 'number' ? legacyIndentSize : DEFAULT_INDENT_SIZE;\n }\n return config;\n }, [\n expandable,\n legacyChildrenColumnName,\n legacyExpandedRowRender,\n legacyExpandIcon,\n legacyExpandIconColumnIndex,\n legacyIndentSize,\n expandType,\n hasRowSelection,\n virtual,\n tableLocale,\n ]);\n\n // ================================ Refs ================================\n const rootRef = useRef<HTMLDivElement>(null);\n const rcRef = useRef<RcReference>(null);\n useImperativeHandle(\n ref as Ref<TableRef>,\n () => toTableRef(rootRef.current!, (config) => rcRef.current?.scrollTo(config)),\n [],\n );\n\n // ======================== Sort / Filter / Page ========================\n const state = useTableState({\n childrenColumnName,\n columns,\n dataSource,\n onChange,\n // Like antd: on by default once `scroll` is set.\n onTableChange: () => {\n if (scroll && scroll.scrollToFirstRowOnChange !== false) rcRef.current?.scrollTo({ top: 0 });\n },\n pagination,\n });\n const {\n config: paginationConfig,\n data: allRows,\n filterStates,\n page,\n sortStates,\n titleProps,\n } = state;\n const { pageIndex, pageSize } = page;\n const { total } = state;\n\n // Like antd: async data (fewer rows than `total`, at most one page) is shown as given.\n const rows = useMemo(() => {\n if (pagination === false) return allRows;\n if (allRows.length < total && allRows.length <= pageSize) return allRows;\n return allRows.slice(pageIndex * pageSize, (pageIndex + 1) * pageSize);\n }, [allRows, pagination, pageIndex, pageSize, total]);\n\n // ============================== Selection ==============================\n const getRowKey = useMemo(\n () =>\n typeof rowKey === 'function'\n ? rowKey\n : (record: T) => (record as Record<PropertyKey, unknown>)?.[rowKey as PropertyKey] as Key,\n [rowKey],\n );\n const recordMap = useMemo(() => {\n const map = new Map<Key, T>();\n const dig = (records: readonly T[]) => {\n records.forEach((record, index) => {\n map.set(getRowKey(record, index), record);\n const children = isPlainObject(record) ? record[childrenColumnName] : undefined;\n if (Array.isArray(children)) dig(children as T[]);\n });\n };\n dig(dataSource);\n return map;\n }, [dataSource, childrenColumnName, getRowKey]);\n const getRecordByKey = useCallback((key: Key) => recordMap.get(key), [recordMap]);\n // Same as the expand column: give virtual rows the selection column's CSS width as a number.\n const mergedRowSelection = useMemo(() => {\n if (!virtual || !rowSelection || rowSelection.columnWidth !== undefined) return rowSelection;\n const withDropdown = Boolean(rowSelection.selections) && rowSelection.type !== 'radio';\n return {\n ...rowSelection,\n columnWidth:\n SELECTION_COLUMN_WIDTH +\n (withDropdown ? SELECTION_DROPDOWN_WIDTH : 0) +\n (variant === 'outlined' ? 16 : 0),\n };\n }, [virtual, rowSelection, variant]);\n const [transformSelectionColumns, selectedKeySet] = useSelection<T>(\n {\n childrenColumnName,\n data: allRows,\n expandType,\n getRecordByKey,\n getRowKey,\n locale: tableLocale,\n pageData: rows,\n },\n mergedRowSelection,\n );\n const mergedRowClassName = useCallback(\n (record: T, index: number, indent: number) =>\n cx(\n selectedKeySet.has(getRowKey(record, index)) && `${PREFIX_CLS}-row-selected`,\n typeof rowClassName === 'function' ? rowClassName(record, index, indent) : rowClassName,\n ),\n [selectedKeySet, getRowKey, rowClassName],\n );\n\n const clientPaginated = pagination !== false && paginationConfig?.total === undefined;\n const syncClampedPage = useEventCallback(() => state.clampPage(pageIndex));\n\n useEffect(() => {\n if (clientPaginated && pageIndex !== state.rawPageIndex) syncClampedPage();\n }, [clientPaginated, pageIndex, state.rawPageIndex, syncClampedPage]);\n\n // ============================== Loading ===============================\n const {\n spinning: isLoading = true,\n tip,\n variant: spinVariant = 'network',\n ...spinRest\n } = typeof loading === 'object' ? loading : { spinning: loading };\n const spinProps = { variant: spinVariant, ...spinRest };\n\n // =============================== Columns ==============================\n const triggerSort = useEventCallback(state.triggerSort);\n const triggerFilter = useEventCallback(state.triggerFilter);\n\n const rcColumns = useMemo(() => {\n const transform = (list: readonly TableColumn<T>[], parentPos?: string): RcColumnsType<any> =>\n list.flatMap((column, index) => {\n // The placeholders must reach rc-table by identity.\n if (column === EXPAND_COLUMN || column === SELECTION_COLUMN) return [column];\n // Positions (and so fallback ids) come from the full tree, before responsive filtering.\n const pos = getColumnPos(index, parentPos);\n if (!isColumnVisibleAt(column, screens)) return [];\n\n const id = getColumnId(column, pos);\n const {\n defaultFilteredValue: _defaultFilteredValue,\n defaultSortOrder: _defaultSortOrder,\n filterDropdown,\n filterDropdownOpen: _filterDropdownOpen,\n filterDropdownProps: _filterDropdownProps,\n filtered: _filtered,\n filteredValue: _filteredValue,\n filterIcon: _filterIcon,\n filterMode: _filterMode,\n filterMultiple: _filterMultiple,\n filterOnClose: _filterOnClose,\n filterResetToDefaultFilteredValue: _filterResetToDefaultFilteredValue,\n filters: columnFilters,\n filterSearch: _filterSearch,\n onFilter: _onFilter,\n onFilterDropdownOpenChange: _onFilterDropdownOpenChange,\n onHeaderCell,\n responsive: _responsive,\n showSorterTooltip: columnShowSorterTooltip,\n sortDirections: columnSortDirections,\n sortIcon,\n sortOrder: _sortOrder,\n sorter,\n title: columnTitle,\n ...rest\n } = column as TableColumnType<T>;\n const order = sorter ? sortStates.find(({ key }) => key === id)?.sortOrder : undefined;\n\n const titleNode = renderColumnTitle(columnTitle, titleProps);\n const titleText =\n typeof titleNode === 'string' || typeof titleNode === 'number'\n ? String(titleNode)\n : undefined;\n // A single-text wrapper lets rc-table derive the header `title` and truncate it.\n const titleContent = column.ellipsis ? (\n <span className={cx(styles.columnTitle, `${PREFIX_CLS}-column-title`)}>{titleNode}</span>\n ) : (\n titleNode\n );\n\n const filterNode =\n columnFilters || filterDropdown ? (\n <FilterDropdown<T>\n column={column as TableColumnType<T>}\n columnKey={id}\n filterState={filterStates.find(({ key }) => key === id)}\n getPopupContainer={getPopupContainer}\n label={titleText ?? id}\n locale={tableLocale}\n triggerFilter={triggerFilter}\n />\n ) : null;\n const hasControls = Boolean(sorter) || Boolean(filterNode);\n\n let sorterNode: ReactNode = null;\n if (sorter) {\n const sortDirections = columnSortDirections ?? tableSortDirections;\n const nextOrder = getNextSortOrder(sortDirections, order);\n const showTooltip = columnShowSorterTooltip ?? tableShowSorterTooltip;\n const { target, ...tooltipOptions } =\n typeof showTooltip === 'object' ? showTooltip : ({} as TableSorterTooltipProps);\n const tooltipProps = { title: sortTipOf(nextOrder, tableLocale), ...tooltipOptions };\n const withTooltip = (node: ReactNode) => <Tooltip {...tooltipProps}>{node}</Tooltip>;\n\n const iconOnlyTooltip = Boolean(showTooltip) && target === 'sorter-icon';\n const onSort = () =>\n triggerSort({\n column,\n key: id,\n multiplePriority: getMultiplePriority(column),\n sortOrder: nextOrder,\n });\n // ActionIcon owns the click (same as the filter trigger). The title stays a plain\n // span so we never nest a button inside a button; clicking the title still sorts.\n const sortAction = (\n <ActionIcon\n active={Boolean(order)}\n className={cx(styles.sortCaret, `${PREFIX_CLS}-column-sorter`)}\n data-order={order ?? undefined}\n size=\"small\"\n icon={\n sortIcon\n ? sortIcon({ sortOrder: order ?? null })\n : order === 'ascend'\n ? ArrowUpToLine\n : order === 'descend'\n ? ArrowDownFromLine\n : ArrowUpDown\n }\n {...(iconOnlyTooltip && showTooltip\n ? { title: tooltipProps.title, tooltipProps: tooltipOptions }\n : {})}\n onClick={(event) => {\n event.stopPropagation();\n onSort();\n }}\n />\n );\n const group = (\n <span\n className={cx(styles.sortButton, `${PREFIX_CLS}-column-sorters`)}\n // Without a tooltip, the native title still says the header sorts.\n title={showTooltip ? undefined : tableLocale.sortTitle}\n >\n <span className={styles.sortTitle} onClick={onSort}>\n {titleContent}\n </span>\n {sortAction}\n </span>\n );\n sorterNode = showTooltip && !iconOnlyTooltip ? withTooltip(group) : group;\n }\n\n return {\n ...rest,\n className: cx(\n rest.className,\n order ? [`${PREFIX_CLS}-column-sort`, styles.sortedColumn] : undefined,\n ),\n children: isColumnGroup(column) ? transform(column.children, pos) : undefined,\n key: id,\n onHeaderCell: () => {\n const cell = onHeaderCell?.(column);\n return {\n ...(sorter && { 'aria-sort': ariaSortOf(order) }),\n ...(column.ellipsis && hasControls && titleText && { title: titleText }),\n ...cell,\n className: cx(sorter && `${PREFIX_CLS}-column-has-sorters`, cell?.className),\n };\n },\n title: hasControls ? (\n <span className={styles.headerInner}>\n {sorterNode ?? titleContent}\n {filterNode}\n </span>\n ) : (\n titleContent\n ),\n };\n }) as RcColumnsType<any>;\n\n return transform(columns);\n }, [\n columns,\n screens,\n sortStates,\n filterStates,\n titleProps,\n getPopupContainer,\n triggerFilter,\n triggerSort,\n tableSortDirections,\n tableShowSorterTooltip,\n tableLocale,\n ]);\n\n // ============================== Rows ==============================\n const mergedOnRow = useMemo(\n () =>\n (record: T, index?: number): HTMLAttributes<HTMLElement> => {\n const rowProps = onRow?.(record, index ?? 0) ?? {};\n return {\n ...rowProps,\n className: cx(rowProps.onClick && styles.clickable, rowProps.className),\n };\n },\n [onRow],\n );\n\n // antd defaults to `fixed` layout once a column is pinned; `max-content` keeps sizing to content.\n const hasFixedColumn = useMemo(\n () =>\n Boolean(rowSelection?.fixed) ||\n flattenColumns(columns).some(({ column }) => column.fixed && !column.hidden),\n [columns, rowSelection?.fixed],\n );\n const mergedTableLayout =\n tableLayout ?? (hasFixedColumn && scroll?.x !== 'max-content' ? 'fixed' : undefined);\n\n // ============================= Pagination =============================\n let topPagination: ReactNode = null;\n let bottomPagination: ReactNode = null;\n if (paginationConfig && total > 0) {\n const {\n current: _current,\n defaultCurrent: _defaultCurrent,\n defaultPageSize: _defaultPageSize,\n onChange: _onChange,\n onShowSizeChange: _onShowSizeChange,\n pageSize: _pageSize,\n placement,\n position,\n total: _total,\n className: paginationClassName,\n classNames: paginationClassNames,\n size: paginationSize,\n styles: paginationStyles,\n ...paginationRest\n } = paginationConfig;\n const pageCount = Math.ceil(total / pageSize);\n const renderPagination = (align: PaginationAlign, side: 'top' | 'bottom') => (\n <div\n className={cx(\n styles.pagination,\n side === 'top' && styles.paginationTop,\n paginationAlignClassName[align],\n `${PREFIX_CLS}-pagination-wrapper`,\n )}\n >\n <Pagination\n {...paginationRest}\n current={pageIndex + 1}\n pageSize={pageSize}\n // Like antd: `small` / `medium` tables get a small pager unless one is set.\n size={paginationSize ?? (sizeProp && sizeProp !== 'large' ? 'small' : undefined)}\n total={total}\n className={cx(\n `${PREFIX_CLS}-pagination`,\n `${PREFIX_CLS}-pagination-${align}`,\n paginationClassName,\n )}\n classNames={{\n item: cx(mergedClassNames.pagination.item, paginationClassNames?.item),\n root: cx(mergedClassNames.pagination.root, paginationClassNames?.root),\n }}\n styles={{\n item: { ...paginationStyles?.item, ...mergedStyles.pagination.item },\n root: { ...paginationStyles?.root, ...mergedStyles.pagination.root },\n }}\n onChange={(next, nextPageSize) =>\n state.onPaginationChange({ pageIndex: next - 1, pageSize: nextPageSize })\n }\n />\n </div>\n );\n\n if (!(paginationRest.hideOnSinglePage && pageCount <= 1)) {\n const mergedPlacement = placement ?? position;\n if (Array.isArray(mergedPlacement)) {\n const find = (side: string) =>\n (mergedPlacement as string[]).find((item) => item.includes(side));\n const top = find('top');\n const bottom = find('bottom');\n const none = mergedPlacement.every((item) => item === 'none');\n if (top) topPagination = renderPagination(normalizePlacement(top), 'top');\n if (bottom) bottomPagination = renderPagination(normalizePlacement(bottom), 'bottom');\n if (!top && !bottom && !none) bottomPagination = renderPagination('end', 'bottom');\n } else {\n bottomPagination = renderPagination('end', 'bottom');\n }\n }\n }\n\n // Like antd: `locale.emptyText` (here also the `emptyText` alias) replaces the default empty state.\n const customEmpty = locale?.emptyText ?? emptyText;\n const emptyNode = isLoading ? (\n <TableLoadingSkeleton\n columns={columns}\n expandColumn={Boolean(expandType)}\n rows={pagination === false ? 5 : Math.min(5, pageSize)}\n screens={screens}\n selectionColumn={hasRowSelection}\n size={size}\n />\n ) : customEmpty === undefined ? (\n <Empty description={t('table.emptyText')} icon={Inbox} imageSize={40} />\n ) : typeof customEmpty === 'function' ? (\n customEmpty()\n ) : (\n customEmpty\n );\n\n // Like antd: `virtual` swaps in rc-table's VirtualTable (rc-virtual-list body).\n const TableComponent = (virtual ? RcVirtualTable : RcTable) as typeof RcTable;\n\n return (\n <div\n ref={rootRef}\n style={{ ...mergedStyles.root, ...style }}\n className={cx(\n styles.root,\n `${PREFIX_CLS}-wrapper`,\n rootClassName,\n className,\n mergedClassNames.root,\n )}\n >\n {topPagination}\n <div className={styles.spinContainer} data-table-wrapper=\"\">\n <TableComponent<any>\n {...(virtual && { listItemHeight: VIRTUAL_ROW_HEIGHT[size] })}\n columns={rcColumns}\n components={components as any}\n data={rows as any[]}\n emptyText={emptyNode}\n expandable={mergedExpandable}\n footer={footer as any}\n internalHooks={INTERNAL_HOOKS}\n prefixCls={PREFIX_CLS}\n ref={rcRef}\n rowClassName={mergedRowClassName as any}\n rowHoverable={rowHoverable}\n rowKey={rowKey as string | ((record: T) => Key)}\n scroll={scroll}\n showHeader={showHeader}\n sticky={sticky}\n summary={summary as any}\n tableLayout={mergedTableLayout}\n title={title as any}\n transformColumns={transformSelectionColumns}\n className={cx(\n styles.table,\n sizeClassName[size],\n `${PREFIX_CLS}-${size === 'middle' ? 'medium' : size}`,\n variant === 'outlined' && styles.outlined,\n variant === 'filled' && styles.filled,\n `${PREFIX_CLS}-${variant}`,\n rowHoverable && styles.hoverable,\n )}\n classNames={{\n body: mergedClassNames.body,\n content: mergedClassNames.content,\n footer: mergedClassNames.footer,\n header: mergedClassNames.header,\n section: mergedClassNames.section,\n title: mergedClassNames.title,\n }}\n measureRowRender={(measureRow) =>\n wrapMeasureRow(measureRowRender ? measureRowRender(measureRow) : measureRow)\n }\n styles={{\n body: mergedStyles.body,\n content: mergedStyles.content,\n footer: mergedStyles.footer,\n header: mergedStyles.header,\n section: mergedStyles.section,\n title: mergedStyles.title,\n }}\n onHeaderRow={onHeaderRow as any}\n onRow={mergedOnRow as any}\n onScroll={onScroll}\n />\n {isLoading && (\n <div className={styles.loading} data-table-loading=\"\">\n <Spin {...spinProps} />\n {tip}\n </div>\n )}\n </div>\n {bottomPagination}\n </div>\n );\n};\n\ntype TableComponent = (<T>(props: TableProps<T>) => ReactNode) & {\n Column: typeof Column;\n ColumnGroup: typeof ColumnGroup;\n displayName?: string;\n /** Placeholder in `columns` marking where the expand column goes. */\n EXPAND_COLUMN: TableColumn<any>;\n /** `rowSelection.selections` preset: select every row of every page. */\n SELECTION_ALL: typeof SELECTION_ALL;\n /** Placeholder in `columns` marking where the selection column goes. */\n SELECTION_COLUMN: TableColumn<any>;\n /** Rows rendered by `summary`: `Table.Summary` (`fixed`), `.Row` and `.Cell` (`index`, `colSpan`). */\n Summary: typeof Summary;\n /** `rowSelection.selections` preset: invert the current page. */\n SELECTION_INVERT: typeof SELECTION_INVERT;\n /** `rowSelection.selections` preset: clear the selection. */\n SELECTION_NONE: typeof SELECTION_NONE;\n};\n\nconst Table = memo(TableInner) as unknown as TableComponent;\n\nTable.displayName = 'Table';\nTable.Column = Column;\nTable.ColumnGroup = ColumnGroup;\nTable.EXPAND_COLUMN = EXPAND_COLUMN as TableColumn<any>;\nTable.SELECTION_COLUMN = SELECTION_COLUMN;\nTable.SELECTION_ALL = SELECTION_ALL;\nTable.SELECTION_INVERT = SELECTION_INVERT;\nTable.SELECTION_NONE = SELECTION_NONE;\nTable.Summary = Summary;\n\nexport { TableInner };\n\nexport default Table;\n"],"mappings":"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"}
|
|
@@ -42,7 +42,7 @@ declare const variants: (props?: ({
|
|
|
42
42
|
mark?: boolean | null | undefined;
|
|
43
43
|
shiny?: boolean | null | undefined;
|
|
44
44
|
strong?: boolean | null | undefined;
|
|
45
|
-
type?: "danger" | "
|
|
45
|
+
type?: "danger" | "success" | "info" | "warning" | "secondary" | null | undefined;
|
|
46
46
|
underline?: boolean | null | undefined;
|
|
47
47
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
48
48
|
//#endregion
|
|
@@ -214,7 +214,9 @@ const styles = createStaticStyles(({ css, cssVar, responsive }) => ({
|
|
|
214
214
|
min-block-size: 0;
|
|
215
215
|
margin-block: ${WORKSPACE_INSET}px;
|
|
216
216
|
margin-inline: 0 ${WORKSPACE_INSET}px;
|
|
217
|
-
|
|
217
|
+
|
|
218
|
+
/* A little darker than colorBorderSecondary in both modes: 30% of the way to colorBorder. */
|
|
219
|
+
border: 1px solid color-mix(in srgb, ${cssVar.colorBorderSecondary} 70%, ${cssVar.colorBorder});
|
|
218
220
|
border-radius: ${cssVar.borderRadiusLG};
|
|
219
221
|
|
|
220
222
|
background: ${cssVar.colorBgContainer};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/ConsoleShell/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nconst SIDEBAR_INLINE_SIZE = 248;\n// Twice the nav icon inset (8px nav padding + 10px item padding) plus the 18px icon, so the icons\n// land centered on the rail without moving sideways.\nconst SIDEBAR_RAIL_INLINE_SIZE = 54;\nconst WORKSPACE_INSET = 8;\n\n/**\n * `responsive.laptop`, not `responsive.tablet`. The aliases are named for\n * devices, and only `laptop` (max-width 991px) lines up with `useIsCompact`.\n */\nexport const styles = createStaticStyles(({ css, cssVar, responsive }) => ({\n brand: css`\n display: flex;\n flex: none;\n align-items: center;\n\n block-size: 56px;\n margin-block-start: ${WORKSPACE_INSET}px;\n padding-inline: 15px;\n\n color: ${cssVar.colorText};\n white-space: nowrap;\n\n ${responsive.laptop} {\n margin-block-start: 0;\n }\n `,\n /** Close button in the drawer's brand row: right edge, vertically centred with the brand. */\n brandClose: css`\n flex: none;\n margin-inline: auto -7px;\n `,\n brandAnchor: css`\n display: flex;\n align-items: center;\n\n inline-size: 100%;\n min-inline-size: 0;\n\n color: inherit;\n text-decoration: none;\n `,\n brandLockup: css`\n display: flex;\n gap: 10px;\n align-items: center;\n min-inline-size: 0;\n `,\n brandName: css`\n overflow: hidden;\n\n font-size: 14px;\n font-weight: 600;\n line-height: 1.3;\n color: ${cssVar.colorText};\n text-overflow: ellipsis;\n white-space: nowrap;\n\n transition: opacity 120ms ease 80ms;\n\n [data-collapsed='true'] & {\n text-overflow: clip;\n opacity: 0;\n transition-delay: 0s;\n }\n\n @media (prefers-reduced-motion: reduce) {\n transition: none;\n }\n `,\n main: css`\n overflow: auto;\n display: flex;\n flex: 1;\n flex-direction: column;\n gap: 20px;\n\n min-inline-size: 0;\n min-block-size: 0;\n padding: 24px;\n\n /*\n * A page that owns a full-height split sets data-page-layout=\"flush\" and\n * takes over padding and scrolling, so its sidebar can sit on the card edge.\n */\n &:has([data-page-layout='flush']) {\n overflow: hidden;\n gap: 0;\n padding: 0;\n }\n\n ${responsive.mobile} {\n gap: 16px;\n padding: 16px;\n }\n `,\n /**\n * The drawer body is the scroll container. Without its default padding the scrollbar sits on\n * the panel edge; the brand row, nav and footer keep their own insets.\n */\n drawerBody: css`\n && {\n min-block-size: 100%;\n padding: 0;\n }\n `,\n navSlot: css`\n display: flex;\n flex: 1;\n flex-direction: column;\n min-block-size: 0;\n `,\n shell: css`\n overflow: hidden;\n display: flex;\n flex: 1;\n\n block-size: 100%;\n min-block-size: 0;\n\n background: ${cssVar.colorBgLayout};\n `,\n sidebar: css`\n overflow: hidden;\n display: flex;\n flex: none;\n flex-direction: column;\n\n inline-size: ${SIDEBAR_INLINE_SIZE}px;\n block-size: 100%;\n min-block-size: 0;\n\n transition: inline-size 200ms ease;\n\n &[data-collapsed='true'] {\n inline-size: ${SIDEBAR_RAIL_INLINE_SIZE}px;\n }\n\n &[data-instant='true'] {\n transition: none;\n }\n\n ${responsive.laptop} {\n display: none;\n }\n `,\n sidebarBottom: css`\n flex: none;\n padding: 8px;\n `,\n skipLink: css`\n position: fixed;\n z-index: 2000;\n inset-block-start: -100px;\n inset-inline-start: 12px;\n\n padding-block: 8px;\n padding-inline: 12px;\n border-radius: ${cssVar.borderRadius};\n\n color: ${cssVar.colorText};\n\n background: ${cssVar.colorBgElevated};\n\n &:focus {\n inset-block-start: 12px;\n }\n `,\n topbar: css`\n display: flex;\n flex: none;\n gap: 8px;\n align-items: center;\n\n block-size: 56px;\n padding-inline: 12px;\n border-block-end: 1px solid ${cssVar.colorBorderSecondary};\n `,\n topbarDivider: css`\n flex: none;\n\n inline-size: 1px;\n block-size: 18px;\n margin-inline: 2px;\n\n background: ${cssVar.colorBorderSecondary};\n `,\n topbarMain: css`\n display: flex;\n flex: 1;\n align-items: center;\n min-inline-size: 0;\n `,\n tools: css`\n display: flex;\n flex: none;\n gap: 6px;\n align-items: center;\n\n margin-inline-start: auto;\n `,\n /** Light only: the content area sits midway between the layout canvas and container white. */\n workspaceLight: css`\n && {\n background: color-mix(in srgb, ${cssVar.colorBgLayout} 50%, ${cssVar.colorBgContainer});\n }\n `,\n workspace: css`\n overflow: hidden;\n display: flex;\n flex: 1;\n flex-direction: column;\n\n min-inline-size: 0;\n min-block-size: 0;\n margin-block: ${WORKSPACE_INSET}px;\n margin-inline: 0 ${WORKSPACE_INSET}px;\n border: 1px solid ${cssVar.colorBorderSecondary};\n border-radius: ${cssVar.borderRadiusLG};\n\n background: ${cssVar.colorBgContainer};\n box-shadow: ${cssVar.boxShadowTertiary};\n\n ${responsive.laptop} {\n margin: 0;\n border: none;\n border-radius: 0;\n box-shadow: none;\n }\n `,\n}));\n"],"mappings":";;AAEA,MAAM,sBAAsB;AAG5B,MAAM,2BAA2B;AACjC,MAAM,kBAAkB;;;;;AAMxB,MAAa,SAAS,oBAAoB,EAAE,KAAK,QAAQ,kBAAkB;CACzE,OAAO,GAAG;;;;;;0BAMc,gBAAgB;;;aAG7B,OAAO,UAAU;;;MAGxB,WAAW,OAAO;;;;;CAKtB,YAAY,GAAG;;;;CAIf,aAAa,GAAG;;;;;;;;;;CAUhB,aAAa,GAAG;;;;;;CAMhB,WAAW,GAAG;;;;;;aAMH,OAAO,UAAU;;;;;;;;;;;;;;;;CAgB5B,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;MAqBL,WAAW,OAAO;;;;;;;;;CAStB,YAAY,GAAG;;;;;;CAMf,SAAS,GAAG;;;;;;CAMZ,OAAO,GAAG;;;;;;;;kBAQM,OAAO,cAAc;;CAErC,SAAS,GAAG;;;;;;mBAMK,oBAAoB;;;;;;;qBAOlB,yBAAyB;;;;;;;MAOxC,WAAW,OAAO;;;;CAItB,eAAe,GAAG;;;;CAIlB,UAAU,GAAG;;;;;;;;qBAQM,OAAO,aAAa;;aAE5B,OAAO,UAAU;;kBAEZ,OAAO,gBAAgB;;;;;;CAMvC,QAAQ,GAAG;;;;;;;;kCAQqB,OAAO,qBAAqB;;CAE5D,eAAe,GAAG;;;;;;;kBAOF,OAAO,qBAAqB;;CAE5C,YAAY,GAAG;;;;;;CAMf,OAAO,GAAG;;;;;;;;;CASV,gBAAgB,GAAG;;uCAEkB,OAAO,cAAc,QAAQ,OAAO,iBAAiB;;;CAG1F,WAAW,GAAG;;;;;;;;oBAQI,gBAAgB;uBACb,gBAAgB
|
|
1
|
+
{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/ConsoleShell/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nconst SIDEBAR_INLINE_SIZE = 248;\n// Twice the nav icon inset (8px nav padding + 10px item padding) plus the 18px icon, so the icons\n// land centered on the rail without moving sideways.\nconst SIDEBAR_RAIL_INLINE_SIZE = 54;\nconst WORKSPACE_INSET = 8;\n\n/**\n * `responsive.laptop`, not `responsive.tablet`. The aliases are named for\n * devices, and only `laptop` (max-width 991px) lines up with `useIsCompact`.\n */\nexport const styles = createStaticStyles(({ css, cssVar, responsive }) => ({\n brand: css`\n display: flex;\n flex: none;\n align-items: center;\n\n block-size: 56px;\n margin-block-start: ${WORKSPACE_INSET}px;\n padding-inline: 15px;\n\n color: ${cssVar.colorText};\n white-space: nowrap;\n\n ${responsive.laptop} {\n margin-block-start: 0;\n }\n `,\n /** Close button in the drawer's brand row: right edge, vertically centred with the brand. */\n brandClose: css`\n flex: none;\n margin-inline: auto -7px;\n `,\n brandAnchor: css`\n display: flex;\n align-items: center;\n\n inline-size: 100%;\n min-inline-size: 0;\n\n color: inherit;\n text-decoration: none;\n `,\n brandLockup: css`\n display: flex;\n gap: 10px;\n align-items: center;\n min-inline-size: 0;\n `,\n brandName: css`\n overflow: hidden;\n\n font-size: 14px;\n font-weight: 600;\n line-height: 1.3;\n color: ${cssVar.colorText};\n text-overflow: ellipsis;\n white-space: nowrap;\n\n transition: opacity 120ms ease 80ms;\n\n [data-collapsed='true'] & {\n text-overflow: clip;\n opacity: 0;\n transition-delay: 0s;\n }\n\n @media (prefers-reduced-motion: reduce) {\n transition: none;\n }\n `,\n main: css`\n overflow: auto;\n display: flex;\n flex: 1;\n flex-direction: column;\n gap: 20px;\n\n min-inline-size: 0;\n min-block-size: 0;\n padding: 24px;\n\n /*\n * A page that owns a full-height split sets data-page-layout=\"flush\" and\n * takes over padding and scrolling, so its sidebar can sit on the card edge.\n */\n &:has([data-page-layout='flush']) {\n overflow: hidden;\n gap: 0;\n padding: 0;\n }\n\n ${responsive.mobile} {\n gap: 16px;\n padding: 16px;\n }\n `,\n /**\n * The drawer body is the scroll container. Without its default padding the scrollbar sits on\n * the panel edge; the brand row, nav and footer keep their own insets.\n */\n drawerBody: css`\n && {\n min-block-size: 100%;\n padding: 0;\n }\n `,\n navSlot: css`\n display: flex;\n flex: 1;\n flex-direction: column;\n min-block-size: 0;\n `,\n shell: css`\n overflow: hidden;\n display: flex;\n flex: 1;\n\n block-size: 100%;\n min-block-size: 0;\n\n background: ${cssVar.colorBgLayout};\n `,\n sidebar: css`\n overflow: hidden;\n display: flex;\n flex: none;\n flex-direction: column;\n\n inline-size: ${SIDEBAR_INLINE_SIZE}px;\n block-size: 100%;\n min-block-size: 0;\n\n transition: inline-size 200ms ease;\n\n &[data-collapsed='true'] {\n inline-size: ${SIDEBAR_RAIL_INLINE_SIZE}px;\n }\n\n &[data-instant='true'] {\n transition: none;\n }\n\n ${responsive.laptop} {\n display: none;\n }\n `,\n sidebarBottom: css`\n flex: none;\n padding: 8px;\n `,\n skipLink: css`\n position: fixed;\n z-index: 2000;\n inset-block-start: -100px;\n inset-inline-start: 12px;\n\n padding-block: 8px;\n padding-inline: 12px;\n border-radius: ${cssVar.borderRadius};\n\n color: ${cssVar.colorText};\n\n background: ${cssVar.colorBgElevated};\n\n &:focus {\n inset-block-start: 12px;\n }\n `,\n topbar: css`\n display: flex;\n flex: none;\n gap: 8px;\n align-items: center;\n\n block-size: 56px;\n padding-inline: 12px;\n border-block-end: 1px solid ${cssVar.colorBorderSecondary};\n `,\n topbarDivider: css`\n flex: none;\n\n inline-size: 1px;\n block-size: 18px;\n margin-inline: 2px;\n\n background: ${cssVar.colorBorderSecondary};\n `,\n topbarMain: css`\n display: flex;\n flex: 1;\n align-items: center;\n min-inline-size: 0;\n `,\n tools: css`\n display: flex;\n flex: none;\n gap: 6px;\n align-items: center;\n\n margin-inline-start: auto;\n `,\n /** Light only: the content area sits midway between the layout canvas and container white. */\n workspaceLight: css`\n && {\n background: color-mix(in srgb, ${cssVar.colorBgLayout} 50%, ${cssVar.colorBgContainer});\n }\n `,\n workspace: css`\n overflow: hidden;\n display: flex;\n flex: 1;\n flex-direction: column;\n\n min-inline-size: 0;\n min-block-size: 0;\n margin-block: ${WORKSPACE_INSET}px;\n margin-inline: 0 ${WORKSPACE_INSET}px;\n\n /* A little darker than colorBorderSecondary in both modes: 30% of the way to colorBorder. */\n border: 1px solid color-mix(in srgb, ${cssVar.colorBorderSecondary} 70%, ${cssVar.colorBorder});\n border-radius: ${cssVar.borderRadiusLG};\n\n background: ${cssVar.colorBgContainer};\n box-shadow: ${cssVar.boxShadowTertiary};\n\n ${responsive.laptop} {\n margin: 0;\n border: none;\n border-radius: 0;\n box-shadow: none;\n }\n `,\n}));\n"],"mappings":";;AAEA,MAAM,sBAAsB;AAG5B,MAAM,2BAA2B;AACjC,MAAM,kBAAkB;;;;;AAMxB,MAAa,SAAS,oBAAoB,EAAE,KAAK,QAAQ,kBAAkB;CACzE,OAAO,GAAG;;;;;;0BAMc,gBAAgB;;;aAG7B,OAAO,UAAU;;;MAGxB,WAAW,OAAO;;;;;CAKtB,YAAY,GAAG;;;;CAIf,aAAa,GAAG;;;;;;;;;;CAUhB,aAAa,GAAG;;;;;;CAMhB,WAAW,GAAG;;;;;;aAMH,OAAO,UAAU;;;;;;;;;;;;;;;;CAgB5B,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;MAqBL,WAAW,OAAO;;;;;;;;;CAStB,YAAY,GAAG;;;;;;CAMf,SAAS,GAAG;;;;;;CAMZ,OAAO,GAAG;;;;;;;;kBAQM,OAAO,cAAc;;CAErC,SAAS,GAAG;;;;;;mBAMK,oBAAoB;;;;;;;qBAOlB,yBAAyB;;;;;;;MAOxC,WAAW,OAAO;;;;CAItB,eAAe,GAAG;;;;CAIlB,UAAU,GAAG;;;;;;;;qBAQM,OAAO,aAAa;;aAE5B,OAAO,UAAU;;kBAEZ,OAAO,gBAAgB;;;;;;CAMvC,QAAQ,GAAG;;;;;;;;kCAQqB,OAAO,qBAAqB;;CAE5D,eAAe,GAAG;;;;;;;kBAOF,OAAO,qBAAqB;;CAE5C,YAAY,GAAG;;;;;;CAMf,OAAO,GAAG;;;;;;;;;CASV,gBAAgB,GAAG;;uCAEkB,OAAO,cAAc,QAAQ,OAAO,iBAAiB;;;CAG1F,WAAW,GAAG;;;;;;;;oBAQI,gBAAgB;uBACb,gBAAgB;;;2CAGI,OAAO,qBAAqB,QAAQ,OAAO,YAAY;qBAC7E,OAAO,eAAe;;kBAEzB,OAAO,iBAAiB;kBACxB,OAAO,kBAAkB;;MAErC,WAAW,OAAO;;;;;;;AAOxB,EAAE"}
|
|
@@ -14,20 +14,27 @@ const deltaClass = {
|
|
|
14
14
|
const MetricBody = ({ item, loading }) => /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
15
15
|
/* @__PURE__ */ jsxs("div", {
|
|
16
16
|
className: styles.head,
|
|
17
|
-
children: [
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
17
|
+
children: [
|
|
18
|
+
/* @__PURE__ */ jsx("div", {
|
|
19
|
+
className: styles.headCopy,
|
|
20
|
+
children: /* @__PURE__ */ jsx("div", {
|
|
21
|
+
className: styles.label,
|
|
22
|
+
children: item.label
|
|
23
|
+
})
|
|
24
|
+
}),
|
|
25
|
+
item.action ? /* @__PURE__ */ jsx("div", {
|
|
26
|
+
className: styles.headAction,
|
|
27
|
+
children: item.action
|
|
28
|
+
}) : null,
|
|
29
|
+
item.mark ? /* @__PURE__ */ jsx("span", {
|
|
30
|
+
"aria-hidden": true,
|
|
31
|
+
className: styles.mark,
|
|
32
|
+
children: /* @__PURE__ */ jsx(Icon, {
|
|
33
|
+
icon: item.mark,
|
|
34
|
+
size: 14
|
|
35
|
+
})
|
|
36
|
+
}) : null
|
|
37
|
+
]
|
|
31
38
|
}),
|
|
32
39
|
loading ? /* @__PURE__ */ jsx(Skeleton, {
|
|
33
40
|
height: 28,
|
|
@@ -46,6 +53,10 @@ const MetricBody = ({ item, loading }) => /* @__PURE__ */ jsxs(Fragment, { child
|
|
|
46
53
|
className: styles.hint,
|
|
47
54
|
children: item.hint
|
|
48
55
|
}) : null]
|
|
56
|
+
}) : null,
|
|
57
|
+
!loading && item.chart ? /* @__PURE__ */ jsx("div", {
|
|
58
|
+
className: styles.chart,
|
|
59
|
+
children: item.chart
|
|
49
60
|
}) : null
|
|
50
61
|
] });
|
|
51
62
|
/** One metric: label row, figure, delta and hint. Shared by MetricStrip and StatCard. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MetricCell.mjs","names":[],"sources":["../../../src/dashboard/MetricStrip/MetricCell.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\n\nimport Skeleton from '@/base-ui/Skeleton';\nimport Icon from '@/Icon';\n\nimport { useSurfaceLink } from '../Surface/link';\nimport type { SurfaceRenderLink } from '../Surface/type';\nimport { styles } from './style';\nimport type { MetricItem } from './type';\n\nconst deltaClass = {\n down: styles.deltaDown,\n flat: styles.deltaFlat,\n up: styles.deltaUp,\n} as const;\n\nconst MetricBody = ({ item, loading }: { item: MetricItem; loading?: boolean }) => (\n <>\n <div className={styles.head}>\n <div className={styles.headCopy}>\n <div className={styles.label}>{item.label}</div>\n
|
|
1
|
+
{"version":3,"file":"MetricCell.mjs","names":[],"sources":["../../../src/dashboard/MetricStrip/MetricCell.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\n\nimport Skeleton from '@/base-ui/Skeleton';\nimport Icon from '@/Icon';\n\nimport { useSurfaceLink } from '../Surface/link';\nimport type { SurfaceRenderLink } from '../Surface/type';\nimport { styles } from './style';\nimport type { MetricItem } from './type';\n\nconst deltaClass = {\n down: styles.deltaDown,\n flat: styles.deltaFlat,\n up: styles.deltaUp,\n} as const;\n\nconst MetricBody = ({ item, loading }: { item: MetricItem; loading?: boolean }) => (\n <>\n <div className={styles.head}>\n <div className={styles.headCopy}>\n <div className={styles.label}>{item.label}</div>\n </div>\n {item.action ? <div className={styles.headAction}>{item.action}</div> : null}\n {item.mark ? (\n <span aria-hidden className={styles.mark}>\n <Icon icon={item.mark} size={14} />\n </span>\n ) : null}\n </div>\n {loading ? (\n <Skeleton height={28} radius={6} width={88} />\n ) : (\n <div\n className={cx(\n styles.value,\n item.valueTone === 'danger' && styles.valueDanger,\n item.valueTone === 'warning' && styles.valueWarning,\n )}\n >\n {item.value}\n </div>\n )}\n {!loading && (item.delta || item.hint) ? (\n <div className={styles.foot}>\n {item.delta ? (\n <span className={cx(styles.delta, deltaClass[item.direction ?? 'flat'])}>\n {item.delta}\n </span>\n ) : null}\n {item.hint ? <span className={styles.hint}>{item.hint}</span> : null}\n </div>\n ) : null}\n {!loading && item.chart ? <div className={styles.chart}>{item.chart}</div> : null}\n </>\n);\n\nexport interface MetricCellProps {\n item: MetricItem;\n loading?: boolean;\n renderLink?: SurfaceRenderLink;\n /** Draw the joined-strip divider on the trailing and bottom edges. */\n seam?: boolean;\n}\n\n/** One metric: label row, figure, delta and hint. Shared by MetricStrip and StatCard. */\nconst MetricCell = ({ item, loading, renderLink, seam = false }: MetricCellProps) => {\n const link = useSurfaceLink(renderLink);\n const body = <MetricBody item={item} loading={item.loading ?? loading} />;\n const cell = cx(styles.cell, seam && styles.cellSeam);\n\n if (item.href) {\n return (\n <div className={styles.slot}>\n {link({ children: body, className: cx(cell, styles.link), href: item.href })}\n </div>\n );\n }\n if (item.onClick) {\n return (\n <button className={cx(cell, styles.press)} type=\"button\" onClick={item.onClick}>\n {body}\n </button>\n );\n }\n return <div className={cell}>{body}</div>;\n};\n\nexport default MetricCell;\n"],"mappings":";;;;;;;;AAYA,MAAM,aAAa;CACjB,MAAM,OAAO;CACb,MAAM,OAAO;CACb,IAAI,OAAO;AACb;AAEA,MAAM,cAAc,EAAE,MAAM,cAC1B,qBAAA,UAAA,EAAA,UAAA;CACE,qBAAC,OAAD;EAAK,WAAW,OAAO;EAAvB,UAAA;GACE,oBAAC,OAAD;IAAK,WAAW,OAAO;IACrB,UAAA,oBAAC,OAAD;KAAK,WAAW,OAAO;KAAQ,UAAA,KAAK;IAAW,CAAA;GAC5C,CAAA;GACJ,KAAK,SAAS,oBAAC,OAAD;IAAK,WAAW,OAAO;IAAa,UAAA,KAAK;GAAY,CAAA,IAAI;GACvE,KAAK,OACJ,oBAAC,QAAD;IAAM,eAAA;IAAY,WAAW,OAAO;IAClC,UAAA,oBAAC,MAAD;KAAM,MAAM,KAAK;KAAM,MAAM;IAAK,CAAA;GAC9B,CAAA,IACJ;EACD;;CACJ,UACC,oBAAC,UAAD;EAAU,QAAQ;EAAI,QAAQ;EAAG,OAAO;CAAK,CAAA,IAE7C,oBAAC,OAAD;EACE,WAAW,GACT,OAAO,OACP,KAAK,cAAc,YAAY,OAAO,aACtC,KAAK,cAAc,aAAa,OAAO,YACzC;EAEC,UAAA,KAAK;CACH,CAAA;CAEN,CAAC,YAAY,KAAK,SAAS,KAAK,QAC/B,qBAAC,OAAD;EAAK,WAAW,OAAO;EAAvB,UAAA,CACG,KAAK,QACJ,oBAAC,QAAD;GAAM,WAAW,GAAG,OAAO,OAAO,WAAW,KAAK,aAAa,OAAO;GACnE,UAAA,KAAK;EACF,CAAA,IACJ,MACH,KAAK,OAAO,oBAAC,QAAD;GAAM,WAAW,OAAO;GAAO,UAAA,KAAK;EAAW,CAAA,IAAI,IAC7D;CACH,CAAA,IAAA;CACH,CAAC,WAAW,KAAK,QAAQ,oBAAC,OAAD;EAAK,WAAW,OAAO;EAAQ,UAAA,KAAK;CAAW,CAAA,IAAI;AAC7E,EAAA,CAAA;;AAYJ,MAAM,cAAc,EAAE,MAAM,SAAS,YAAY,OAAO,YAA6B;CACnF,MAAM,OAAO,eAAe,UAAU;CACtC,MAAM,OAAO,oBAAC,YAAD;EAAkB;EAAM,SAAS,KAAK,WAAW;CAAU,CAAA;CACxE,MAAM,OAAO,GAAG,OAAO,MAAM,QAAQ,OAAO,QAAQ;CAEpD,IAAI,KAAK,MACP,OACE,oBAAC,OAAD;EAAK,WAAW,OAAO;EACpB,UAAA,KAAK;GAAE,UAAU;GAAM,WAAW,GAAG,MAAM,OAAO,IAAI;GAAG,MAAM,KAAK;EAAK,CAAC;CACxE,CAAA;CAGT,IAAI,KAAK,SACP,OACE,oBAAC,UAAD;EAAQ,WAAW,GAAG,MAAM,OAAO,KAAK;EAAG,MAAK;EAAS,SAAS,KAAK;EACpE,UAAA;CACK,CAAA;CAGZ,OAAO,oBAAC,OAAD;EAAK,WAAW;EAAO,UAAA;CAAU,CAAA;AAC1C"}
|
|
@@ -35,9 +35,23 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
|
|
|
35
35
|
`,
|
|
36
36
|
headCopy: css`
|
|
37
37
|
display: flex;
|
|
38
|
+
flex: 1;
|
|
38
39
|
gap: 6px;
|
|
39
40
|
align-items: center;
|
|
41
|
+
|
|
42
|
+
min-inline-size: 0;
|
|
43
|
+
`,
|
|
44
|
+
/** Label-row control, pushed to the trailing edge. */
|
|
45
|
+
headAction: css`
|
|
46
|
+
display: flex;
|
|
47
|
+
flex: none;
|
|
48
|
+
align-items: center;
|
|
49
|
+
`,
|
|
50
|
+
/** Full-width chart slot under the delta and hint. */
|
|
51
|
+
chart: css`
|
|
52
|
+
inline-size: 100%;
|
|
40
53
|
min-inline-size: 0;
|
|
54
|
+
margin-block-start: 6px;
|
|
41
55
|
`,
|
|
42
56
|
mark: css`
|
|
43
57
|
display: inline-flex;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/MetricStrip/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n cell: css`\n display: flex;\n flex-direction: column;\n gap: 6px;\n\n min-inline-size: 0;\n padding-block: 16px;\n padding-inline: 20px;\n\n background: transparent;\n `,\n /** Joined strip only: the divider on the cell's trailing and bottom edges. */\n cellSeam: css`\n box-shadow:\n inset -1px 0 0 var(--metric-seam),\n inset 0 -1px 0 var(--metric-seam);\n `,\n /** Split strip and StatCard: one card per item. */\n card: css`\n display: grid;\n min-inline-size: 0;\n `,\n /* One fixed 32px row (a small Segmented or ActionIcon fits): an action or mark in the head must not push the value down, so cells with and\n without header controls line up across a split strip or a row of StatCards. */\n head: css`\n display: flex;\n gap: 8px;\n align-items: center;\n justify-content: space-between;\n\n box-sizing: border-box;\n min-inline-size: 0;\n block-size: 32px;\n `,\n headCopy: css`\n display: flex;\n gap: 6px;\n align-items: center;\n min-inline-size: 0;\n `,\n mark: css`\n display: inline-flex;\n flex: none;\n align-items: center;\n justify-content: center;\n\n inline-size: 24px;\n block-size: 24px;\n border: 1px solid ${cssVar.colorFillSecondary};\n border-radius: ${cssVar.borderRadiusSM};\n\n color: ${cssVar.colorTextTertiary};\n\n background: ${cssVar.colorFillTertiary};\n `,\n split: css`\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n gap: 12px;\n `,\n delta: css`\n font-size: 13px;\n font-variant-numeric: tabular-nums;\n line-height: 1.4;\n `,\n deltaDown: css`\n color: ${cssVar.colorError};\n `,\n deltaFlat: css`\n color: ${cssVar.colorTextSecondary};\n `,\n deltaUp: css`\n color: ${cssVar.colorSuccess};\n `,\n foot: css`\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n align-items: baseline;\n `,\n /**\n * Clips the seam that would otherwise sit on the card's trailing and bottom\n * edges. A short last row used to show the seam color across the empty\n * track, which reads louder than the cells.\n */\n frame: css`\n --metric-seam: ${cssVar.colorFillSecondary};\n\n overflow: hidden;\n border-radius: inherit;\n background: transparent;\n `,\n grid: css`\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n\n inline-size: calc(100% + 1px);\n margin-block-end: -1px;\n\n background: transparent;\n `,\n hint: css`\n font-size: 13px;\n line-height: 1.4;\n color: ${cssVar.colorTextSecondary};\n `,\n label: css`\n font-size: 13px;\n font-weight: 500;\n line-height: 1.4;\n color: ${cssVar.colorTextSecondary};\n `,\n link: css`\n color: inherit;\n text-decoration: none;\n\n &:hover {\n background: ${cssVar.colorFillQuaternary};\n }\n `,\n press: css`\n cursor: pointer;\n\n border: none;\n\n font: inherit;\n color: inherit;\n text-align: start;\n\n &:hover {\n background: ${cssVar.colorFillQuaternary};\n }\n `,\n /** Grid cell around a rendered link, so the link fills it. */\n slot: css`\n display: grid;\n min-inline-size: 0;\n `,\n value: css`\n overflow: hidden;\n\n font-size: ${cssVar.fontSizeHeading3};\n font-weight: 600;\n font-variant-numeric: tabular-nums;\n line-height: 1.15;\n color: ${cssVar.colorText};\n text-overflow: ellipsis;\n white-space: nowrap;\n `,\n valueDanger: css`\n color: ${cssVar.colorError};\n `,\n valueWarning: css`\n color: ${cssVar.colorWarning};\n `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,MAAM,GAAG;;;;;;;;;;;;CAYT,UAAU,GAAG;;;;;;CAMb,MAAM,GAAG;;;;CAMT,MAAM,GAAG;;;;;;;;;;CAUT,UAAU,GAAG;;;;;;
|
|
1
|
+
{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/MetricStrip/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n cell: css`\n display: flex;\n flex-direction: column;\n gap: 6px;\n\n min-inline-size: 0;\n padding-block: 16px;\n padding-inline: 20px;\n\n background: transparent;\n `,\n /** Joined strip only: the divider on the cell's trailing and bottom edges. */\n cellSeam: css`\n box-shadow:\n inset -1px 0 0 var(--metric-seam),\n inset 0 -1px 0 var(--metric-seam);\n `,\n /** Split strip and StatCard: one card per item. */\n card: css`\n display: grid;\n min-inline-size: 0;\n `,\n /* One fixed 32px row (a small Segmented or ActionIcon fits): an action or mark in the head must not push the value down, so cells with and\n without header controls line up across a split strip or a row of StatCards. */\n head: css`\n display: flex;\n gap: 8px;\n align-items: center;\n justify-content: space-between;\n\n box-sizing: border-box;\n min-inline-size: 0;\n block-size: 32px;\n `,\n headCopy: css`\n display: flex;\n flex: 1;\n gap: 6px;\n align-items: center;\n\n min-inline-size: 0;\n `,\n /** Label-row control, pushed to the trailing edge. */\n headAction: css`\n display: flex;\n flex: none;\n align-items: center;\n `,\n /** Full-width chart slot under the delta and hint. */\n chart: css`\n inline-size: 100%;\n min-inline-size: 0;\n margin-block-start: 6px;\n `,\n mark: css`\n display: inline-flex;\n flex: none;\n align-items: center;\n justify-content: center;\n\n inline-size: 24px;\n block-size: 24px;\n border: 1px solid ${cssVar.colorFillSecondary};\n border-radius: ${cssVar.borderRadiusSM};\n\n color: ${cssVar.colorTextTertiary};\n\n background: ${cssVar.colorFillTertiary};\n `,\n split: css`\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n gap: 12px;\n `,\n delta: css`\n font-size: 13px;\n font-variant-numeric: tabular-nums;\n line-height: 1.4;\n `,\n deltaDown: css`\n color: ${cssVar.colorError};\n `,\n deltaFlat: css`\n color: ${cssVar.colorTextSecondary};\n `,\n deltaUp: css`\n color: ${cssVar.colorSuccess};\n `,\n foot: css`\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n align-items: baseline;\n `,\n /**\n * Clips the seam that would otherwise sit on the card's trailing and bottom\n * edges. A short last row used to show the seam color across the empty\n * track, which reads louder than the cells.\n */\n frame: css`\n --metric-seam: ${cssVar.colorFillSecondary};\n\n overflow: hidden;\n border-radius: inherit;\n background: transparent;\n `,\n grid: css`\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n\n inline-size: calc(100% + 1px);\n margin-block-end: -1px;\n\n background: transparent;\n `,\n hint: css`\n font-size: 13px;\n line-height: 1.4;\n color: ${cssVar.colorTextSecondary};\n `,\n label: css`\n font-size: 13px;\n font-weight: 500;\n line-height: 1.4;\n color: ${cssVar.colorTextSecondary};\n `,\n link: css`\n color: inherit;\n text-decoration: none;\n\n &:hover {\n background: ${cssVar.colorFillQuaternary};\n }\n `,\n press: css`\n cursor: pointer;\n\n border: none;\n\n font: inherit;\n color: inherit;\n text-align: start;\n\n &:hover {\n background: ${cssVar.colorFillQuaternary};\n }\n `,\n /** Grid cell around a rendered link, so the link fills it. */\n slot: css`\n display: grid;\n min-inline-size: 0;\n `,\n value: css`\n overflow: hidden;\n\n font-size: ${cssVar.fontSizeHeading3};\n font-weight: 600;\n font-variant-numeric: tabular-nums;\n line-height: 1.15;\n color: ${cssVar.colorText};\n text-overflow: ellipsis;\n white-space: nowrap;\n `,\n valueDanger: css`\n color: ${cssVar.colorError};\n `,\n valueWarning: css`\n color: ${cssVar.colorWarning};\n `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,MAAM,GAAG;;;;;;;;;;;;CAYT,UAAU,GAAG;;;;;;CAMb,MAAM,GAAG;;;;CAMT,MAAM,GAAG;;;;;;;;;;CAUT,UAAU,GAAG;;;;;;;;;CASb,YAAY,GAAG;;;;;;CAMf,OAAO,GAAG;;;;;CAKV,MAAM,GAAG;;;;;;;;wBAQa,OAAO,mBAAmB;qBAC7B,OAAO,eAAe;;aAE9B,OAAO,kBAAkB;;kBAEpB,OAAO,kBAAkB;;CAEzC,OAAO,GAAG;;;;;CAKV,OAAO,GAAG;;;;;CAKV,WAAW,GAAG;aACH,OAAO,WAAW;;CAE7B,WAAW,GAAG;aACH,OAAO,mBAAmB;;CAErC,SAAS,GAAG;aACD,OAAO,aAAa;;CAE/B,MAAM,GAAG;;;;;;;;;;;CAWT,OAAO,GAAG;qBACS,OAAO,mBAAmB;;;;;;CAM7C,MAAM,GAAG;;;;;;;;;CAST,MAAM,GAAG;;;aAGE,OAAO,mBAAmB;;CAErC,OAAO,GAAG;;;;aAIC,OAAO,mBAAmB;;CAErC,MAAM,GAAG;;;;;oBAKS,OAAO,oBAAoB;;;CAG7C,OAAO,GAAG;;;;;;;;;;oBAUQ,OAAO,oBAAoB;;;;CAI7C,MAAM,GAAG;;;;CAIT,OAAO,GAAG;;;iBAGK,OAAO,iBAAiB;;;;aAI5B,OAAO,UAAU;;;;CAI5B,aAAa,GAAG;aACL,OAAO,WAAW;;CAE7B,cAAc,GAAG;aACN,OAAO,aAAa;;AAEjC,EAAE"}
|
|
@@ -6,6 +6,8 @@ import { ReactNode } from "react";
|
|
|
6
6
|
interface MetricItem {
|
|
7
7
|
/** Control on the label row, such as a menu. */
|
|
8
8
|
action?: ReactNode;
|
|
9
|
+
/** Full-width chart (sparkline, area) under the delta and hint. */
|
|
10
|
+
chart?: ReactNode;
|
|
9
11
|
delta?: ReactNode;
|
|
10
12
|
direction?: 'up' | 'down' | 'flat';
|
|
11
13
|
hint?: ReactNode;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { StatCardProps } from "./type.mjs";
|
|
2
2
|
//#region src/dashboard/StatCard/StatCard.d.ts
|
|
3
3
|
/** One metric in its own card: the same item as a `split` MetricStrip. */
|
|
4
|
-
declare function StatCard({ action, className, delta, direction, hint, href, label, loading, mark, onClick, renderLink, value, valueTone }: StatCardProps): import("react").JSX.Element;
|
|
4
|
+
declare function StatCard({ action, chart, className, delta, direction, hint, href, label, loading, mark, onClick, renderLink, value, valueTone }: StatCardProps): import("react").JSX.Element;
|
|
5
5
|
declare namespace StatCard {
|
|
6
6
|
var displayName: string;
|
|
7
7
|
}
|
|
@@ -7,7 +7,7 @@ import { jsx } from "react/jsx-runtime";
|
|
|
7
7
|
import { cx } from "antd-style";
|
|
8
8
|
//#region src/dashboard/StatCard/StatCard.tsx
|
|
9
9
|
/** One metric in its own card: the same item as a `split` MetricStrip. */
|
|
10
|
-
function StatCard({ action, className, delta, direction = "flat", hint, href, label, loading, mark, onClick, renderLink, value, valueTone }) {
|
|
10
|
+
function StatCard({ action, chart, className, delta, direction = "flat", hint, href, label, loading, mark, onClick, renderLink, value, valueTone }) {
|
|
11
11
|
const cardClassName = useSurfaceCardClassName();
|
|
12
12
|
return /* @__PURE__ */ jsx("div", {
|
|
13
13
|
className: cx(styles$1.card, cardClassName, styles.clip, className),
|
|
@@ -15,6 +15,7 @@ function StatCard({ action, className, delta, direction = "flat", hint, href, la
|
|
|
15
15
|
renderLink,
|
|
16
16
|
item: {
|
|
17
17
|
action,
|
|
18
|
+
chart,
|
|
18
19
|
delta,
|
|
19
20
|
direction,
|
|
20
21
|
hint,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StatCard.mjs","names":["metricStyles","surfaceStyles"],"sources":["../../../src/dashboard/StatCard/StatCard.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\n\nimport MetricCell from '../MetricStrip/MetricCell';\nimport { styles as metricStyles } from '../MetricStrip/style';\nimport { useSurfaceCardClassName } from '../Surface/link';\nimport { styles as surfaceStyles } from '../Surface/style';\nimport type { StatCardProps } from './type';\n\n/** One metric in its own card: the same item as a `split` MetricStrip. */\nfunction StatCard({\n action,\n className,\n delta,\n direction = 'flat',\n hint,\n href,\n label,\n loading,\n mark,\n onClick,\n renderLink,\n value,\n valueTone,\n}: StatCardProps) {\n const cardClassName = useSurfaceCardClassName();\n\n return (\n <div className={cx(metricStyles.card, cardClassName, surfaceStyles.clip, className)}>\n <MetricCell\n renderLink={renderLink}\n item={{\n action,\n delta,\n direction,\n hint,\n href,\n label,\n loading,\n mark,\n onClick,\n value,\n valueTone,\n }}\n />\n </div>\n );\n}\n\nStatCard.displayName = 'StatCard';\n\nexport default StatCard;\n"],"mappings":";;;;;;;;;AAWA,SAAS,SAAS,EAChB,QACA,WACA,OACA,YAAY,QACZ,MACA,MACA,OACA,SACA,MACA,SACA,YACA,OACA,aACgB;CAChB,MAAM,gBAAgB,wBAAwB;CAE9C,OACE,oBAAC,OAAD;EAAK,WAAW,GAAGA,SAAa,MAAM,eAAeC,OAAc,MAAM,SAAS;EAChF,UAAA,oBAAC,YAAD;GACc;GACZ,MAAM;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;EACD,CAAA;CACE,CAAA;AAET;AAEA,SAAS,cAAc"}
|
|
1
|
+
{"version":3,"file":"StatCard.mjs","names":["metricStyles","surfaceStyles"],"sources":["../../../src/dashboard/StatCard/StatCard.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\n\nimport MetricCell from '../MetricStrip/MetricCell';\nimport { styles as metricStyles } from '../MetricStrip/style';\nimport { useSurfaceCardClassName } from '../Surface/link';\nimport { styles as surfaceStyles } from '../Surface/style';\nimport type { StatCardProps } from './type';\n\n/** One metric in its own card: the same item as a `split` MetricStrip. */\nfunction StatCard({\n action,\n chart,\n className,\n delta,\n direction = 'flat',\n hint,\n href,\n label,\n loading,\n mark,\n onClick,\n renderLink,\n value,\n valueTone,\n}: StatCardProps) {\n const cardClassName = useSurfaceCardClassName();\n\n return (\n <div className={cx(metricStyles.card, cardClassName, surfaceStyles.clip, className)}>\n <MetricCell\n renderLink={renderLink}\n item={{\n action,\n chart,\n delta,\n direction,\n hint,\n href,\n label,\n loading,\n mark,\n onClick,\n value,\n valueTone,\n }}\n />\n </div>\n );\n}\n\nStatCard.displayName = 'StatCard';\n\nexport default StatCard;\n"],"mappings":";;;;;;;;;AAWA,SAAS,SAAS,EAChB,QACA,OACA,WACA,OACA,YAAY,QACZ,MACA,MACA,OACA,SACA,MACA,SACA,YACA,OACA,aACgB;CAChB,MAAM,gBAAgB,wBAAwB;CAE9C,OACE,oBAAC,OAAD;EAAK,WAAW,GAAGA,SAAa,MAAM,eAAeC,OAAc,MAAM,SAAS;EAChF,UAAA,oBAAC,YAAD;GACc;GACZ,MAAM;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;EACD,CAAA;CACE,CAAA;AAET;AAEA,SAAS,cAAc"}
|
|
@@ -9,6 +9,8 @@ type StatWash = 'gray';
|
|
|
9
9
|
interface StatCardProps {
|
|
10
10
|
/** Control rendered on the label row, such as a menu. */
|
|
11
11
|
action?: ReactNode;
|
|
12
|
+
/** Full-width chart (sparkline, area) under the delta and hint. */
|
|
13
|
+
chart?: ReactNode;
|
|
12
14
|
className?: string;
|
|
13
15
|
/** Change amount, colored by `direction`. */
|
|
14
16
|
delta?: ReactNode;
|
|
@@ -7,8 +7,9 @@
|
|
|
7
7
|
* raised step. `colorFillQuaternary` (white 2%, about #111) would barely separate from the page.
|
|
8
8
|
*
|
|
9
9
|
* Borders and inner dividers (table, header and cell lines, PageSkeleton) use `colorFillSecondary`
|
|
10
|
-
* (white 10%
|
|
11
|
-
*
|
|
10
|
+
* (white 10% in dark, black 6% in light); hover and focus use the stronger `colorFill`. The light
|
|
11
|
+
* card outline itself is one step darker (`colorFill`); dark keeps `colorFillSecondary`, which over
|
|
12
|
+
* the dark card lands near #2f2f2f against #1c1c1c.
|
|
12
13
|
*
|
|
13
14
|
* Anything that must hide content scrolled beneath it (table header cells, pinned and sticky
|
|
14
15
|
* cells, their scroll shadows) uses `--lobe-surface-bg-solid`: the same white 6% blended onto
|