@antv/s2-react

--- package/package.json (excerpt) ---
{
  "name": "@antv/s2-react",
  "version": "2.3.1",
  "private": false,
  "description": "use S2 with react",
  "keywords": [
    "antv",
    "s2",
    "s2-react",
    "spreadsheet",
    "pivot table",
    "table"
  ],
  "homepage": "https://s2.antv.antgroup.com",
  "bugs": {
    "url": "https://github.com/antvis/S2/issues"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/antvis/S2.git"
  },
  "license": "MIT",
  "author": "https://github.com/orgs/antvis/people",
  "main": "lib/index.js",
  "unpkg": "dist/s2-react.min.js",
  "module": "esm/index.js",
  "types": "esm/index.d.ts",
  "directories": {
    "lib": "lib",
    "test": "tests"
  },
  "files": [
    "esm",
    "lib",
    "dist",
    "README.md"
  ],
  "scripts": {
    "build": "npm-run-all clean --parallel build:cjs build:esm build:umd",
    "build:analysis": "cross-env FORMAT=es ANALYSIS=true vite build",
    "build:cjs": "tsc --module commonjs --outDir lib -p tsconfig.build.json && pnpm build:sync-assets lib/",
    "build:esm": "tsc --module ESNext --outDir esm -p tsconfig.build.json && pnpm build:sync-assets esm/",
    "build:size-limit": "size-limit",
    "build:size-limit-json": "pnpm build:size-limit -- --json",
    "build:sync-assets": "copyfiles -u 1 \"src/**/*.{less,svg}\"",
    "build:umd": "cross-env FORMAT=umd vite build",
    "clean": "rimraf lib esm dist temp",
    "start": "cross-env PLAYGROUND=true vite",
    "test": "jest --passWithNoTests --detectOpenHandles",
    "test:ci": "p

--- package/lib/hooks/useSpreadSheet.js (excerpt) ---
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.useSpreadSheet = void 0;
const tslib_1 = require("tslib");
const s2_1 = require("@antv/s2");
const extends_1 = require("@antv/s2/extends");
const ahooks_1 = require("ahooks");
const lodash_1 = require("lodash");
const react_1 = tslib_1.__importDefault(require("react"));
const utils_1 = require("../utils");
const useEvents_1 = require("./useEvents");
const useLoading_1 = require("./useLoading");
const usePagination_1 = require("./usePagination");
const useResize_1 = require("./useResize");
function useSpreadSheet(props) {
    const forceUpdate = (0, ahooks_1.useUpdate)();
    const s2Ref = react_1.default.useRef(null);
    const containerRef = react_1.default.useRef(null);
    const wrapperRef = react_1.default.useRef(null);
    const shouldInit = react_1.default.useRef(true);
    const isDevMode = react_1.default.useMemo(() => {
        try {
            return process.env['NODE_ENV'] !== 'production';
        }
        catch (_a) {
            return false;
        }
    }, []);
    const { spreadsheet: customSpreadSheet, dataCfg, options, themeCfg, sheetType, onUpdate = lodash_1.identity, onUpdateAfterRender, onLoading, } = props;
    /** 保存重渲 effect 的 deps */
    const updatePrevDepsRef = react_1.default.useRef([dataCfg, options, themeCfg]);
    const { loading, setLoading } = (0, useLoading_1.useLoading)(s2Ref.current, props.loading);
    const pagination = (0, usePagination_1.usePaginati

--- package/esm/hooks/useSpreadSheet.js (excerpt) ---
import { __awaiter } from "tslib";
import { PivotSheet, TableSheet } from '@antv/s2';
import { PivotChartSheet } from '@antv/s2/extends';
import { useUpdate, useUpdateEffect } from 'ahooks';
import { identity, isEqual } from 'lodash';
import React from 'react';
import { getSheetComponentOptions } from '../utils';
import { useEvents } from './useEvents';
import { useLoading } from './useLoading';
import { usePagination } from './usePagination';
import { useResize } from './useResize';
export function useSpreadSheet(props) {
    const forceUpdate = useUpdate();
    const s2Ref = React.useRef(null);
    const containerRef = React.useRef(null);
    const wrapperRef = React.useRef(null);
    const shouldInit = React.useRef(true);
    const isDevMode = React.useMemo(() => {
        try {
            return process.env['NODE_ENV'] !== 'production';
        }
        catch (_a) {
            return false;
        }
    }, []);
    const { spreadsheet: customSpreadSheet, dataCfg, options, themeCfg, sheetType, onUpdate = identity, onUpdateAfterRender, onLoading, } = props;
    /** 保存重渲 effect 的 deps */
    const updatePrevDepsRef = React.useRef([dataCfg, options, themeCfg]);
    const { loading, setLoading } = useLoading(s2Ref.current, props.loading);
    const pagination = usePagination(s2Ref.current, props.options);
    useEvents(props, s2Ref.current);
    const renderSpreadSheet = React.useCallback((container) => {
        const s2Options = getSheetComponentOptions(options);
       

--- bundled output (OSV-MAL flagged — LLM scope expansion) ---

--- lib/components/tooltip/custom-tooltip.js (bundled) ---
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.CustomTooltip = void 0;
const tslib_1 = require("tslib");
/* eslint-disable import/order */
/* eslint-disable import/no-extraneous-dependencies */
// eslint-disable-next-line prettier/prettier
const s2_1 = require("@antv/s2");
const lodash_1 = require("lodash");
const react_1 = tslib_1.__importDefault(require("react"));
const reactRender_1 = require("../../utils/reactRender");
const index_1 = require("./index");
/**
 * 自定义 Tooltip 组件, 兼容 React 18 参考如下
 * @ref https://github.com/react-component/util/blob/677d3ac177d147572b65af63e67a7796a5104f4c/src/React/render.ts#L69-L106
 */
class CustomTooltip extends s2_1.BaseTooltip {
    constructor(spreadsheet) {
        super(spreadsheet);
    }
    isMobileDevice() {
        var _a;
        return (0, s2_1.isMobile)((_a = this.spreadsheet.options) === null || _a === void 0 ? void 0 : _a.device);
    }
    renderContent() {
        var _a, _b, _c;
        // 配置级 s2.options.tooltip.content = ''
        const { content: contentFromOptions, operation } = this.spreadsheet.options.tooltip;
        // 方法级 s2.showTooltip({ content: '' })
        const showOptions = this.options;
        const cell = this.spreadsheet.getCell((_a = showOptions === null || showOptions === void 0 ? void 0 : showOptions.event) === null || _a === void 0 ? void 0 : _a.target);
        // 优先级: 方法级 > 配置级, 兼容 content 为空字符串的场景
        const content = ((_b = showOptions === null || showOptions === void 0 ? void 0 : showOptions.content) !== null && _b !== void 0 ? _b : contentFromOptions);
        const tooltipProps = (0, s2_1.customMerge)({
            options: {
                operator: {
                    menu: (0, lodash_1.omit)(operation === null || operation === void 0 ? void 0 : operation.menu, 'items'),
                },
            },
        }, Object.assign(Object.assign({}, showOptions), { cell,
            content }));
        if ((_c = showOptions === null || s

--- lib/components/sheets/strategy-sheet/custom-tooltip/col-cell-tooltip.js (bundled) ---
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.StrategySheetColCellTooltip = void 0;
const tslib_1 = require("tslib");
const s2_1 = require("@antv/s2");
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const lodash_1 = require("lodash");
const react_1 = tslib_1.__importDefault(require("react"));
require("./index.less");
const StrategySheetColCellTooltip = ({ cell, label, }) => {
    const meta = cell.getMeta();
    // 趋势分析表叶子节点显示是指标标题, tooltip 中没必要再显示了
    if (meta.isLeaf && meta.level !== 0) {
        return null;
    }
    const cellName = meta.spreadsheet.dataSet.getFieldName(meta.field);
    const customLabel = (0, lodash_1.isFunction)(label) ? label(cell, cellName) : label;
    const name = customLabel !== null && customLabel !== void 0 ? customLabel : cellName;
    return (react_1.default.createElement("div", { className: (0, classnames_1.default)((0, s2_1.getStrategySheetTooltipClsName)(), (0, s2_1.getStrategySheetTooltipClsName)('col')) },
        react_1.default.createElement("span", { className: (0, s2_1.getStrategySheetTooltipClsName)('name') }, name),
        react_1.default.createElement("span", { className: (0, s2_1.getStrategySheetTooltipClsName)('value') }, meta.value)));
};
exports.StrategySheetColCellTooltip = StrategySheetColCellTooltip;
//# sourceMappingURL=col-cell-tooltip.js.map

--- lib/components/sheets/strategy-sheet/custom-tooltip/data-cell-tooltip.js (bundled) ---
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.StrategySheetDataCellTooltip = void 0;
const tslib_1 = require("tslib");
const s2_1 = require("@antv/s2");
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const lodash_1 = require("lodash");
const react_1 = tslib_1.__importDefault(require("react"));
require("./index.less");
exports.StrategySheetDataCellTooltip = react_1.default.memo((props) => {
    var _a, _b;
    const { cell, label, showOriginalValue: showOriginalValueFromTooltip = false, renderDerivedValue, } = props;
    const meta = cell.getMeta();
    const { spreadsheet } = meta;
    const metaFieldValue = meta === null || meta === void 0 ? void 0 : meta.fieldValue;
    const rowDescription = spreadsheet.dataSet.getCustomFieldDescription(cell);
    const defaultRowName = spreadsheet.dataSet.getCustomRowFieldName(cell);
    const customLabel = (0, lodash_1.isFunction)(label) ? label(cell, defaultRowName) : label;
    const rowName = customLabel !== null && customLabel !== void 0 ? customLabel : defaultRowName;
    const colLeafNode = spreadsheet.facet.getColLeafNodeByIndex(meta.colIndex);
    const [, ...derivedLabels] = react_1.default.useMemo(() => {
        try {
            return JSON.parse(colLeafNode === null || colLeafNode === void 0 ? void 0 : colLeafNode.value);
        }
        catch (_a) {
            return [];
        }
    }, [colLeafNode === null || colLeafNode === void 0 ? void 0 : colLeafNode.value]);
    const { placeholder, style } = spreadsheet.options;
    const valuesCfg = (_a = style === null || style === void 0 ? void 0 : style.dataCell) === null || _a === void 0 ? void 0 : _a.valuesCfg;
    const [value, ...derivedValues] = (0, lodash_1.first)(metaFieldValue === null || metaFieldValue === void 0 ? void 0 : metaFieldValue.values) || [
        metaFieldValue,
    ];
    const [originalValue, ...derivedOriginalValues] = (0, lodash_1.first)((0, lodash_1.get)(metaFieldValue, valuesCf

--- lib/components/sheets/strategy-sheet/custom-tooltip/row-cell-tooltip.js (bundled) ---
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.StrategySheetRowCellTooltip = void 0;
const tslib_1 = require("tslib");
const s2_1 = require("@antv/s2");
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const lodash_1 = require("lodash");
const react_1 = tslib_1.__importDefault(require("react"));
require("./index.less");
const StrategySheetRowCellTooltip = ({ cell, label, }) => {
    const { field, spreadsheet, value, extra } = cell.getMeta();
    const customLabel = (0, lodash_1.isFunction)(label) ? label(cell, value) : label;
    const rowName = customLabel !== null && customLabel !== void 0 ? customLabel : value;
    const description = spreadsheet.dataSet.getFieldDescription(field) || (extra === null || extra === void 0 ? void 0 : extra['description']);
    return (react_1.default.createElement("div", { className: (0, classnames_1.default)((0, s2_1.getStrategySheetTooltipClsName)(), (0, s2_1.getStrategySheetTooltipClsName)('row')) },
        react_1.default.createElement("div", { className: (0, s2_1.getStrategySheetTooltipClsName)('value') }, rowName),
        description && (react_1.default.createElement("div", { className: (0, s2_1.getStrategySheetTooltipClsName)('description') },
            react_1.default.createElement("span", { className: (0, s2_1.getStrategySheetTooltipClsName)('description-label') }, (0, s2_1.i18n)('说明')),
            react_1.default.createElement("span", { className: (0, s2_1.getStrategySheetTooltipClsName)('description-text') }, description)))));
};
exports.StrategySheetRowCellTooltip = StrategySheetRowCellTooltip;
//# sourceMappingURL=row-cell-tooltip.js.map

--- lib/common/react-element.js (bundled) ---
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ReactElement = void 0;
const tslib_1 = require("tslib");
const s2_1 = require("@antv/s2");
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const react_1 = tslib_1.__importDefault(require("react"));
const ReactElement = (props) => {
    const { style = {}, className, content } = props;
    const commonProps = {
        style,
        className: (0, classnames_1.default)(`${s2_1.S2_PREFIX_CLS}-react-element`, className),
    };
    // React 组件
    if (react_1.defa