@canvas-components/react-list-table 0.3.38 → 0.3.40

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.
Files changed (4) hide show
  1. package/README.md +7 -0
  2. package/dist/index.cjs +125 -6
  3. package/dist/index.js +126 -7
  4. package/package.json +4 -4
package/README.md CHANGED
@@ -4,6 +4,13 @@
4
4
 
5
5
  通过顶层 `loading` 属性控制数据加载状态：`<ReactListTable loading={loading} dataSource={rows} columns={columns} />`。加载期间展示加载提示并保留汇总标题；加载完成后，组件自动计算并统一展示完整汇总结果。服务端汇总可通过 `query.summaryValues` 提供，业务侧无需单独管理汇总计算状态。
6
6
 
7
+ ## 属性更新与性能
8
+
9
+ - 相同属性引用的父组件重渲染由 `React.memo` 跳过；组件内部交互仍正常更新。
10
+ - `onChange`、`onRow` 以及查询、分页、行选择、展开、拖拽和性能通知等事件使用稳定入口，调用时读取最近一次已提交的回调，避免仅回调引用变化就重置底层查询。
11
+ - `scroll`、`theme`、`pagination` 等常用配置进行第一层字段比较，内容相同的新对象复用之前的配置。嵌套对象和数组仍按引用判断。
12
+ - `columns`、`dataSource`、受控选中/展开数组，以及 `rowKey`、列渲染、`getCheckboxProps` 等影响数据或展示的函数，变化时继续刷新。大数据数组不做深比较，建议用 `useMemo` 或稳定状态保存，并在内容改变时更新引用。
13
+
7
14
  ## 示例效果
8
15
 
9
16
  ![React List Table 基础示例](./assets/examples/basic.gif)
package/dist/index.cjs CHANGED
@@ -477,6 +477,22 @@ function createSelectionChartOption(data, chartType, seriesIndex = 0) {
477
477
  const area = chartType.includes("area");
478
478
  const bumpData = chartType === "bump" ? resolveBumpRanks(data) : null;
479
479
  const option = {
480
+ dataZoom: data.labels.length > 30 ? [
481
+ {
482
+ type: "slider",
483
+ xAxisIndex: 0,
484
+ start: 0,
485
+ end: horizontal ? 100 : Math.max(1, 3e3 / data.labels.length)
486
+ },
487
+ { type: "inside", xAxisIndex: 0 },
488
+ {
489
+ type: "slider",
490
+ yAxisIndex: 0,
491
+ start: 0,
492
+ end: horizontal ? Math.max(1, 3e3 / data.labels.length) : 100
493
+ },
494
+ { type: "inside", yAxisIndex: 0 }
495
+ ] : void 0,
480
496
  categoryKeys: data.keys,
481
497
  grid: {
482
498
  show: true,
@@ -612,6 +628,7 @@ function ChartDialog(props) {
612
628
  display: "flex",
613
629
  flexDirection: "column",
614
630
  flex: 1,
631
+ minWidth: 0,
615
632
  minHeight: 0,
616
633
  gap: 12
617
634
  },
@@ -679,6 +696,8 @@ function ChartDialog(props) {
679
696
  ref: chartHostRef,
680
697
  style: {
681
698
  width: "100%",
699
+ minWidth: 0,
700
+ overflow: "hidden",
682
701
  height: 400,
683
702
  flex: "1 1 200px",
684
703
  minHeight: 160
@@ -796,7 +815,6 @@ function ResetMenu(props) {
796
815
  function ReactTableContextMenuView(props) {
797
816
  const { request } = props;
798
817
  const [closedRequest, setClosedRequest] = react.useState(null);
799
- const menuOpen = request !== null && closedRequest !== request;
800
818
  const setMenuOpen = (open) => {
801
819
  setClosedRequest(open ? null : request);
802
820
  };
@@ -839,6 +857,7 @@ function ReactTableContextMenuView(props) {
839
857
  ) : null;
840
858
  const [customSelectionRequest, setCustomSelectionRequest] = react.useState(null);
841
859
  const [chartRequest, setChartRequest] = react.useState(null);
860
+ const menuOpen = request !== null && closedRequest !== request && !chartRequest;
842
861
  const [columnEditor, setColumnEditor] = react.useState(null);
843
862
  const columnDialogs = /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: columnEditor ? /* @__PURE__ */ jsxRuntime.jsx(
844
863
  ColumnEditorDialog,
@@ -883,6 +902,7 @@ function ReactTableContextMenuView(props) {
883
902
  getData: chartRequest.request.onCreateChart,
884
903
  onClose: () => {
885
904
  chartRequest.request.onClose();
905
+ setMenuOpen(false);
886
906
  setChartRequest(null);
887
907
  }
888
908
  }
@@ -1366,6 +1386,7 @@ function ReactTableContextMenuView(props) {
1366
1386
  getData: chartRequest.request.onCreateChart,
1367
1387
  onClose: () => {
1368
1388
  chartRequest.request.onClose();
1389
+ setMenuOpen(false);
1369
1390
  setChartRequest(null);
1370
1391
  }
1371
1392
  }
@@ -4445,6 +4466,10 @@ function SelectEditor(props) {
4445
4466
  handleEditorBlur(event, skipBlurCommitRef, request);
4446
4467
  },
4447
4468
  onKeyDown: (event) => {
4469
+ if (event.key === "ArrowUp" || event.key === "ArrowDown") {
4470
+ event.stopPropagation();
4471
+ return;
4472
+ }
4448
4473
  if (handleEditorNavigationKey(event, request, skipBlurCommitRef)) {
4449
4474
  return;
4450
4475
  }
@@ -5308,7 +5333,7 @@ function resolveSortableTransform(index, sourceIndex, targetIndex, height) {
5308
5333
  }
5309
5334
 
5310
5335
  // src/features/toolbar/style.css
5311
- styleInject(".react-list-table-shell {\n background: #fff;\n font-size: 14px;\n}\n.react-list-table-titlebar {\n height: 44px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 0;\n box-sizing: border-box;\n background: #fff;\n}\n.react-list-table-shell-fullscreen {\n width: 100% !important;\n height: 100% !important;\n}\n.react-list-table-shell-fullscreen .canvas-list-table-root {\n height: 100% !important;\n}\n.react-list-table-title {\n min-width: 0;\n color: #1f2937;\n font-size: 14px;\n font-weight: 600;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n.react-list-table-tools {\n display: flex;\n align-items: center;\n gap: 14px;\n color: #475569;\n}\n.react-list-table-tool-wrap {\n position: relative;\n display: inline-flex;\n}\n.react-list-table-tool {\n width: 20px;\n height: 24px;\n padding: 0;\n border: 0;\n color: inherit;\n background: transparent;\n font: 16px/24px sans-serif;\n cursor: pointer;\n}\n.react-list-table-tool:hover {\n color: #1677ff;\n}\n.react-list-table-tool-menu,\n.react-list-table-column-setting {\n position: absolute;\n z-index: 120;\n top: 28px;\n right: 0;\n min-width: 112px;\n padding: 6px;\n border: 1px solid #e5e7eb;\n border-radius: 6px;\n background: #fff;\n box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);\n}\n.react-list-table-tool-menu button {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n width: 100%;\n height: 32px;\n padding: 0 10px;\n border: 0;\n border-radius: 8px;\n background: transparent;\n color: #374151;\n font-size: 14px;\n text-align: left;\n cursor: pointer;\n}\n.react-list-table-tool-menu {\n width: max-content;\n min-width: 0;\n padding: 8px;\n border-radius: 8px;\n}\n.react-list-table-tool-menu-check {\n width: 16px;\n flex: 0 0 16px;\n margin-right: 6px;\n text-align: center;\n}\n.react-list-table-tool-menu button:hover {\n background: #f3f4f6;\n}\n.react-list-table-column-setting {\n width: 328px;\n max-height: 360px;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n.react-list-table-column-setting-head {\n display: flex;\n gap: 12px;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n padding: 4px 6px 8px;\n border-bottom: 1px solid #f0f0f0;\n flex: 0 0 auto;\n}\n.react-list-table-column-setting-head button {\n border: 0;\n color: #1677ff;\n background: transparent;\n cursor: pointer;\n}\n.react-list-table-column-setting-body {\n flex: 1 1 auto;\n min-height: 0;\n overflow: auto;\n}\n.react-list-table-column-item {\n display: flex;\n align-items: center;\n gap: 8px;\n justify-content: space-between;\n padding: 7px 6px;\n box-sizing: border-box;\n cursor: pointer;\n}\n.react-list-table-column-main,\n.react-list-table-column-actions {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n}\n.react-list-table-column-main {\n min-width: 0;\n}\n.react-list-table-column-actions {\n flex: 0 0 auto;\n}\n.react-list-table-column-actions > .canvas-react-select-wrap {\n flex: 0 0 96px;\n width: 96px;\n height: 24px;\n}\n.react-list-table-column-label {\n min-width: 64px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n.react-list-table-column-width-input {\n height: 22px;\n padding-inline: 5px;\n}\n.react-list-table-column-fixed-input {\n height: 22px;\n padding-inline: 6px;\n font-size: 14px;\n}\n.react-list-table-column-sort-input {\n height: 22px;\n padding-inline: 6px;\n font-size: 14px;\n}\n.react-list-table-column-setting label.dragging {\n opacity: 0.45;\n background: #e6f4ff;\n}\n.react-list-table-column-setting [data-sortable-key].dragging {\n opacity: 0.28;\n}\n.react-list-table-column-drag {\n touch-action: none;\n color: #94a3b8;\n display: inline-flex;\n font-size: 14px;\n cursor: grab;\n user-select: none;\n}\nbody.react-list-table-sorting,\nbody.react-list-table-sorting * {\n cursor: grabbing !important;\n}\n.react-list-table-sort-overlay {\n position: fixed;\n z-index: 1400;\n display: block;\n padding: 0;\n box-sizing: border-box;\n color: #334155;\n background: #fff;\n border: 1px solid #91caff;\n border-radius: 6px;\n box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);\n pointer-events: none;\n}\n.react-list-table-sort-overlay .react-list-table-column-item {\n width: 100%;\n height: 100%;\n}\n");
5336
+ styleInject(".react-list-table-shell {\n background: #fff;\n font-size: 14px;\n}\n.react-list-table-titlebar {\n height: 44px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 0;\n box-sizing: border-box;\n background: #fff;\n}\n.react-list-table-shell-fullscreen {\n width: 100% !important;\n height: 100% !important;\n}\n.react-list-table-shell-fullscreen .canvas-list-table-root {\n height: 100% !important;\n}\n.react-list-table-title {\n min-width: 0;\n color: #1f2937;\n font-size: 14px;\n font-weight: 600;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n.react-list-table-tools {\n display: flex;\n align-items: center;\n gap: 14px;\n color: #475569;\n}\n.react-list-table-tool-wrap {\n position: relative;\n display: inline-flex;\n}\n.react-list-table-tool {\n width: 20px;\n height: 24px;\n padding: 0;\n border: 0;\n color: inherit;\n background: transparent;\n font: 16px/24px sans-serif;\n cursor: pointer;\n}\n.react-list-table-tool:hover {\n color: #1677ff;\n}\n.react-list-table-tool-menu,\n.react-list-table-column-setting {\n position: absolute;\n z-index: 120;\n top: 28px;\n right: 0;\n min-width: 112px;\n padding: 6px;\n border: 1px solid #e5e7eb;\n border-radius: 6px;\n background: #fff;\n box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);\n}\n.react-list-table-tool-menu button {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n width: 100%;\n height: 32px;\n padding: 0 10px;\n border: 0;\n border-radius: 8px;\n background: transparent;\n color: #374151;\n font-size: 14px;\n text-align: left;\n cursor: pointer;\n}\n.react-list-table-tool-menu {\n width: max-content;\n min-width: 0;\n padding: 8px;\n border-radius: 8px;\n}\n.react-list-table-tool-menu-check {\n width: 16px;\n flex: 0 0 16px;\n margin-right: 6px;\n text-align: center;\n}\n.react-list-table-tool-menu button:hover {\n background: #f3f4f6;\n}\n.react-list-table-column-setting {\n width: 328px;\n max-height: 360px;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n.react-list-table-column-setting-head {\n display: flex;\n gap: 12px;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n padding: 4px 6px 8px;\n border-bottom: 1px solid #f0f0f0;\n flex: 0 0 auto;\n}\n.react-list-table-column-setting-head button {\n border: 0;\n color: #1677ff;\n background: transparent;\n cursor: pointer;\n}\n.react-list-table-column-setting-body {\n flex: 1 1 auto;\n min-height: 0;\n overflow: auto;\n}\n.react-list-table-column-item {\n display: flex;\n align-items: center;\n gap: 8px;\n justify-content: space-between;\n padding: 7px 6px;\n box-sizing: border-box;\n cursor: pointer;\n}\n.react-list-table-column-position {\n flex: 0 0 28px;\n text-align: center;\n color: #64748b;\n font-variant-numeric: tabular-nums;\n}\n.react-list-table-column-main,\n.react-list-table-column-actions {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n}\n.react-list-table-column-main {\n min-width: 0;\n}\n.react-list-table-column-actions {\n flex: 0 0 auto;\n}\n.react-list-table-column-actions > .canvas-react-select-wrap {\n flex: 0 0 96px;\n width: 96px;\n height: 24px;\n}\n.react-list-table-column-label {\n min-width: 64px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n.react-list-table-column-width-input {\n height: 22px;\n padding-inline: 5px;\n}\n.react-list-table-column-fixed-input {\n height: 22px;\n padding-inline: 6px;\n font-size: 14px;\n}\n.react-list-table-column-sort-input {\n height: 22px;\n padding-inline: 6px;\n font-size: 14px;\n}\n.react-list-table-column-setting label.dragging {\n opacity: 0.45;\n background: #e6f4ff;\n}\n.react-list-table-column-setting [data-sortable-key].dragging {\n opacity: 0.28;\n}\n.react-list-table-column-drag {\n touch-action: none;\n color: #94a3b8;\n display: inline-flex;\n font-size: 14px;\n cursor: grab;\n user-select: none;\n}\nbody.react-list-table-sorting,\nbody.react-list-table-sorting * {\n cursor: grabbing !important;\n}\n.react-list-table-sort-overlay {\n position: fixed;\n z-index: 1400;\n display: block;\n padding: 0;\n box-sizing: border-box;\n color: #334155;\n background: #fff;\n border: 1px solid #91caff;\n border-radius: 6px;\n box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);\n pointer-events: none;\n}\n.react-list-table-sort-overlay .react-list-table-column-item {\n width: 100%;\n height: 100%;\n}\n");
5312
5337
  function ReactTableToolbar(props) {
5313
5338
  const { toolbar, title } = props;
5314
5339
  const [densityOpen, setDensityOpen] = react.useState(false);
@@ -5435,7 +5460,7 @@ function ReactTableToolbar(props) {
5435
5460
  "div",
5436
5461
  {
5437
5462
  className: "react-list-table-column-setting",
5438
- style: { width: config.columnSettingWidth ?? 430 },
5463
+ style: { width: config.columnSettingWidth ?? 470 },
5439
5464
  children: [
5440
5465
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "react-list-table-column-setting-head", children: [
5441
5466
  /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "\u5217\u8BBE\u7F6E" }),
@@ -5463,9 +5488,21 @@ function ReactTableToolbar(props) {
5463
5488
  SortableList,
5464
5489
  {
5465
5490
  scrollContainerRef: columnSettingsBodyRef,
5466
- items: flattenColumns(props.columns),
5491
+ items: flattenColumns(props.columns).map((column, index) => ({
5492
+ ...column,
5493
+ position: index + 1
5494
+ })),
5467
5495
  onOrderChange: props.onColumnOrderChange,
5468
5496
  renderItem: (column, handleProps) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "react-list-table-column-item", children: [
5497
+ /* @__PURE__ */ jsxRuntime.jsx(
5498
+ "span",
5499
+ {
5500
+ className: "react-list-table-column-position",
5501
+ "aria-label": `\u5E8F\u53F7 ${column.position}`,
5502
+ title: "\u5E8F\u53F7",
5503
+ children: column.position
5504
+ }
5505
+ ),
5469
5506
  /* @__PURE__ */ jsxRuntime.jsxs(
5470
5507
  "span",
5471
5508
  {
@@ -5744,6 +5781,87 @@ function useReactListTableState(options) {
5744
5781
  }
5745
5782
  };
5746
5783
  }
5784
+ function retainShallowEqual(previous, next) {
5785
+ if (Object.is(previous, next)) return previous;
5786
+ if (!previous || !next || typeof previous !== "object" || typeof next !== "object" || Array.isArray(previous) || Array.isArray(next))
5787
+ return next;
5788
+ const left = previous;
5789
+ const right = next;
5790
+ const keys = Object.keys(right);
5791
+ return Object.keys(left).length === keys.length && keys.every(
5792
+ (key) => Object.prototype.hasOwnProperty.call(left, key) && Object.is(left[key], right[key])
5793
+ ) ? previous : next;
5794
+ }
5795
+ var CONFIG_KEYS = [
5796
+ "scroll",
5797
+ "locale",
5798
+ "theme",
5799
+ "styles",
5800
+ "keyboardNavigation",
5801
+ "contextMenu",
5802
+ "grouping",
5803
+ "query",
5804
+ "experimental",
5805
+ "rowSelector",
5806
+ "rowSelection",
5807
+ "expandable",
5808
+ "pagination",
5809
+ "scrollbar",
5810
+ "carouselScroll",
5811
+ "cachePreferences",
5812
+ "rowDrag",
5813
+ "debug",
5814
+ "exportOptions"
5815
+ ];
5816
+ var EVENT_KEYS = {
5817
+ query: ["onChange", "onError"],
5818
+ pagination: ["onChange", "onShowSizeChange"],
5819
+ rowSelection: ["onChange", "onSelect"],
5820
+ expandable: ["onExpand", "onExpandedRowsChange"],
5821
+ experimental: ["onOffscreenCanvasStatus"],
5822
+ rowDrag: ["onDrop", "onDragEndRemove"],
5823
+ debug: ["onPerformance"]
5824
+ };
5825
+ function useStableTableProps(props) {
5826
+ const committedProps = react.useRef(props);
5827
+ const previous = react.useRef();
5828
+ const handlers = react.useRef(/* @__PURE__ */ new Map());
5829
+ const next = { ...props };
5830
+ const event = (group, key) => {
5831
+ const path = group ? `${group}.${key}` : key;
5832
+ let handler = handlers.current.get(path);
5833
+ if (!handler) {
5834
+ handler = (...args) => {
5835
+ const current = committedProps.current;
5836
+ const owner = group ? current[group] : current;
5837
+ const callback = owner?.[key];
5838
+ return typeof callback === "function" ? Reflect.apply(callback, owner, args) : void 0;
5839
+ };
5840
+ handlers.current.set(path, handler);
5841
+ }
5842
+ return handler;
5843
+ };
5844
+ for (const key of ["onChange", "onRow"]) {
5845
+ if (typeof props[key] === "function") next[key] = event(void 0, key);
5846
+ }
5847
+ for (const key of CONFIG_KEYS) {
5848
+ let value = props[key];
5849
+ if (value && typeof value === "object" && EVENT_KEYS[key]) {
5850
+ const config = { ...value };
5851
+ for (const name of EVENT_KEYS[key]) {
5852
+ if (typeof config[name] === "function") config[name] = event(key, name);
5853
+ }
5854
+ value = config;
5855
+ }
5856
+ next[key] = retainShallowEqual(previous.current?.[key], value);
5857
+ }
5858
+ const result = next;
5859
+ react.useLayoutEffect(() => {
5860
+ committedProps.current = props;
5861
+ previous.current = result;
5862
+ });
5863
+ return result;
5864
+ }
5747
5865
 
5748
5866
  // src/components/build-list-table-options.ts
5749
5867
  function resolveDensityLinkedHeight(densityOverride, configuredHeight) {
@@ -5881,6 +5999,7 @@ function retainEqualQueryOption(previous, next) {
5881
5999
  return previousKeys.length === nextKeys.length && previousKeys.every((key) => Object.is(previous[key], next[key])) ? previous : next;
5882
6000
  }
5883
6001
  function ReactListTableInner(props, ref) {
6002
+ props = useStableTableProps(props);
5884
6003
  const {
5885
6004
  className,
5886
6005
  style,
@@ -6387,8 +6506,8 @@ function ReactListTableInner(props, ref) {
6387
6506
  ) : null
6388
6507
  ] });
6389
6508
  }
6390
- var ReactListTable = react.forwardRef(
6391
- ReactListTableInner
6509
+ var ReactListTable = react.memo(
6510
+ react.forwardRef(ReactListTableInner)
6392
6511
  );
6393
6512
  ReactListTable.EXPAND_COLUMN = listTable.EXPAND_COLUMN;
6394
6513
  ReactListTable.SELECTION_COLUMN = listTable.SELECTION_COLUMN;
package/dist/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import { createContext, forwardRef, useMemo, useRef, useState, useEffect, useImperativeHandle, useContext, useLayoutEffect, useId, Fragment as Fragment$1 } from 'react';
1
+ import { createContext, memo, forwardRef, useMemo, useRef, useState, useEffect, useImperativeHandle, useLayoutEffect, useContext, useId, Fragment as Fragment$1 } from 'react';
2
2
  import { createPortal } from 'react-dom';
3
3
  import { getSharedScrollbarSettings, subscribeSharedScrollbarSettings, setSharedScrollbarSettings, ReactImagePreview, ReactCheckbox, ReactNumberInput, ReactSelect, ReactPagination, ReactFilterPanel, ReactPopup, ReactScrollbarSettingsDialog, ReactScrollbarPositionDialog, ReactModal, ReactInput, ReactPopconfirm, ReactContentScaleProvider, ReactButton, ReactColorPicker, ReactInputNumber, resolveReactScrollbarMode, ReactAutoComplete, ReactTimeRangePicker, ReactDateTimeRangePicker, ReactDateTimePicker, ReactTimePicker, ReactDateRangePicker, ReactDatePicker, ReactMonthPicker, ReactQuarterPicker, ReactYearPicker, ReactInputRange, ReactCascader, ReactTreeSelect } from '@canvas-components/react-components';
4
4
  import { EXPAND_COLUMN, SELECTION_COLUMN, ROW_SELECTION_COLUMN, resetListTableStoredColumnConfig, ListTable } from '@canvas-components/list-table';
@@ -476,6 +476,22 @@ function createSelectionChartOption(data, chartType, seriesIndex = 0) {
476
476
  const area = chartType.includes("area");
477
477
  const bumpData = chartType === "bump" ? resolveBumpRanks(data) : null;
478
478
  const option = {
479
+ dataZoom: data.labels.length > 30 ? [
480
+ {
481
+ type: "slider",
482
+ xAxisIndex: 0,
483
+ start: 0,
484
+ end: horizontal ? 100 : Math.max(1, 3e3 / data.labels.length)
485
+ },
486
+ { type: "inside", xAxisIndex: 0 },
487
+ {
488
+ type: "slider",
489
+ yAxisIndex: 0,
490
+ start: 0,
491
+ end: horizontal ? Math.max(1, 3e3 / data.labels.length) : 100
492
+ },
493
+ { type: "inside", yAxisIndex: 0 }
494
+ ] : void 0,
479
495
  categoryKeys: data.keys,
480
496
  grid: {
481
497
  show: true,
@@ -611,6 +627,7 @@ function ChartDialog(props) {
611
627
  display: "flex",
612
628
  flexDirection: "column",
613
629
  flex: 1,
630
+ minWidth: 0,
614
631
  minHeight: 0,
615
632
  gap: 12
616
633
  },
@@ -678,6 +695,8 @@ function ChartDialog(props) {
678
695
  ref: chartHostRef,
679
696
  style: {
680
697
  width: "100%",
698
+ minWidth: 0,
699
+ overflow: "hidden",
681
700
  height: 400,
682
701
  flex: "1 1 200px",
683
702
  minHeight: 160
@@ -795,7 +814,6 @@ function ResetMenu(props) {
795
814
  function ReactTableContextMenuView(props) {
796
815
  const { request } = props;
797
816
  const [closedRequest, setClosedRequest] = useState(null);
798
- const menuOpen = request !== null && closedRequest !== request;
799
817
  const setMenuOpen = (open) => {
800
818
  setClosedRequest(open ? null : request);
801
819
  };
@@ -838,6 +856,7 @@ function ReactTableContextMenuView(props) {
838
856
  ) : null;
839
857
  const [customSelectionRequest, setCustomSelectionRequest] = useState(null);
840
858
  const [chartRequest, setChartRequest] = useState(null);
859
+ const menuOpen = request !== null && closedRequest !== request && !chartRequest;
841
860
  const [columnEditor, setColumnEditor] = useState(null);
842
861
  const columnDialogs = /* @__PURE__ */ jsx(Fragment, { children: columnEditor ? /* @__PURE__ */ jsx(
843
862
  ColumnEditorDialog,
@@ -882,6 +901,7 @@ function ReactTableContextMenuView(props) {
882
901
  getData: chartRequest.request.onCreateChart,
883
902
  onClose: () => {
884
903
  chartRequest.request.onClose();
904
+ setMenuOpen(false);
885
905
  setChartRequest(null);
886
906
  }
887
907
  }
@@ -1365,6 +1385,7 @@ function ReactTableContextMenuView(props) {
1365
1385
  getData: chartRequest.request.onCreateChart,
1366
1386
  onClose: () => {
1367
1387
  chartRequest.request.onClose();
1388
+ setMenuOpen(false);
1368
1389
  setChartRequest(null);
1369
1390
  }
1370
1391
  }
@@ -4444,6 +4465,10 @@ function SelectEditor(props) {
4444
4465
  handleEditorBlur(event, skipBlurCommitRef, request);
4445
4466
  },
4446
4467
  onKeyDown: (event) => {
4468
+ if (event.key === "ArrowUp" || event.key === "ArrowDown") {
4469
+ event.stopPropagation();
4470
+ return;
4471
+ }
4447
4472
  if (handleEditorNavigationKey(event, request, skipBlurCommitRef)) {
4448
4473
  return;
4449
4474
  }
@@ -5307,7 +5332,7 @@ function resolveSortableTransform(index, sourceIndex, targetIndex, height) {
5307
5332
  }
5308
5333
 
5309
5334
  // src/features/toolbar/style.css
5310
- styleInject(".react-list-table-shell {\n background: #fff;\n font-size: 14px;\n}\n.react-list-table-titlebar {\n height: 44px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 0;\n box-sizing: border-box;\n background: #fff;\n}\n.react-list-table-shell-fullscreen {\n width: 100% !important;\n height: 100% !important;\n}\n.react-list-table-shell-fullscreen .canvas-list-table-root {\n height: 100% !important;\n}\n.react-list-table-title {\n min-width: 0;\n color: #1f2937;\n font-size: 14px;\n font-weight: 600;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n.react-list-table-tools {\n display: flex;\n align-items: center;\n gap: 14px;\n color: #475569;\n}\n.react-list-table-tool-wrap {\n position: relative;\n display: inline-flex;\n}\n.react-list-table-tool {\n width: 20px;\n height: 24px;\n padding: 0;\n border: 0;\n color: inherit;\n background: transparent;\n font: 16px/24px sans-serif;\n cursor: pointer;\n}\n.react-list-table-tool:hover {\n color: #1677ff;\n}\n.react-list-table-tool-menu,\n.react-list-table-column-setting {\n position: absolute;\n z-index: 120;\n top: 28px;\n right: 0;\n min-width: 112px;\n padding: 6px;\n border: 1px solid #e5e7eb;\n border-radius: 6px;\n background: #fff;\n box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);\n}\n.react-list-table-tool-menu button {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n width: 100%;\n height: 32px;\n padding: 0 10px;\n border: 0;\n border-radius: 8px;\n background: transparent;\n color: #374151;\n font-size: 14px;\n text-align: left;\n cursor: pointer;\n}\n.react-list-table-tool-menu {\n width: max-content;\n min-width: 0;\n padding: 8px;\n border-radius: 8px;\n}\n.react-list-table-tool-menu-check {\n width: 16px;\n flex: 0 0 16px;\n margin-right: 6px;\n text-align: center;\n}\n.react-list-table-tool-menu button:hover {\n background: #f3f4f6;\n}\n.react-list-table-column-setting {\n width: 328px;\n max-height: 360px;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n.react-list-table-column-setting-head {\n display: flex;\n gap: 12px;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n padding: 4px 6px 8px;\n border-bottom: 1px solid #f0f0f0;\n flex: 0 0 auto;\n}\n.react-list-table-column-setting-head button {\n border: 0;\n color: #1677ff;\n background: transparent;\n cursor: pointer;\n}\n.react-list-table-column-setting-body {\n flex: 1 1 auto;\n min-height: 0;\n overflow: auto;\n}\n.react-list-table-column-item {\n display: flex;\n align-items: center;\n gap: 8px;\n justify-content: space-between;\n padding: 7px 6px;\n box-sizing: border-box;\n cursor: pointer;\n}\n.react-list-table-column-main,\n.react-list-table-column-actions {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n}\n.react-list-table-column-main {\n min-width: 0;\n}\n.react-list-table-column-actions {\n flex: 0 0 auto;\n}\n.react-list-table-column-actions > .canvas-react-select-wrap {\n flex: 0 0 96px;\n width: 96px;\n height: 24px;\n}\n.react-list-table-column-label {\n min-width: 64px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n.react-list-table-column-width-input {\n height: 22px;\n padding-inline: 5px;\n}\n.react-list-table-column-fixed-input {\n height: 22px;\n padding-inline: 6px;\n font-size: 14px;\n}\n.react-list-table-column-sort-input {\n height: 22px;\n padding-inline: 6px;\n font-size: 14px;\n}\n.react-list-table-column-setting label.dragging {\n opacity: 0.45;\n background: #e6f4ff;\n}\n.react-list-table-column-setting [data-sortable-key].dragging {\n opacity: 0.28;\n}\n.react-list-table-column-drag {\n touch-action: none;\n color: #94a3b8;\n display: inline-flex;\n font-size: 14px;\n cursor: grab;\n user-select: none;\n}\nbody.react-list-table-sorting,\nbody.react-list-table-sorting * {\n cursor: grabbing !important;\n}\n.react-list-table-sort-overlay {\n position: fixed;\n z-index: 1400;\n display: block;\n padding: 0;\n box-sizing: border-box;\n color: #334155;\n background: #fff;\n border: 1px solid #91caff;\n border-radius: 6px;\n box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);\n pointer-events: none;\n}\n.react-list-table-sort-overlay .react-list-table-column-item {\n width: 100%;\n height: 100%;\n}\n");
5335
+ styleInject(".react-list-table-shell {\n background: #fff;\n font-size: 14px;\n}\n.react-list-table-titlebar {\n height: 44px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 0;\n box-sizing: border-box;\n background: #fff;\n}\n.react-list-table-shell-fullscreen {\n width: 100% !important;\n height: 100% !important;\n}\n.react-list-table-shell-fullscreen .canvas-list-table-root {\n height: 100% !important;\n}\n.react-list-table-title {\n min-width: 0;\n color: #1f2937;\n font-size: 14px;\n font-weight: 600;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n.react-list-table-tools {\n display: flex;\n align-items: center;\n gap: 14px;\n color: #475569;\n}\n.react-list-table-tool-wrap {\n position: relative;\n display: inline-flex;\n}\n.react-list-table-tool {\n width: 20px;\n height: 24px;\n padding: 0;\n border: 0;\n color: inherit;\n background: transparent;\n font: 16px/24px sans-serif;\n cursor: pointer;\n}\n.react-list-table-tool:hover {\n color: #1677ff;\n}\n.react-list-table-tool-menu,\n.react-list-table-column-setting {\n position: absolute;\n z-index: 120;\n top: 28px;\n right: 0;\n min-width: 112px;\n padding: 6px;\n border: 1px solid #e5e7eb;\n border-radius: 6px;\n background: #fff;\n box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);\n}\n.react-list-table-tool-menu button {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n width: 100%;\n height: 32px;\n padding: 0 10px;\n border: 0;\n border-radius: 8px;\n background: transparent;\n color: #374151;\n font-size: 14px;\n text-align: left;\n cursor: pointer;\n}\n.react-list-table-tool-menu {\n width: max-content;\n min-width: 0;\n padding: 8px;\n border-radius: 8px;\n}\n.react-list-table-tool-menu-check {\n width: 16px;\n flex: 0 0 16px;\n margin-right: 6px;\n text-align: center;\n}\n.react-list-table-tool-menu button:hover {\n background: #f3f4f6;\n}\n.react-list-table-column-setting {\n width: 328px;\n max-height: 360px;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n.react-list-table-column-setting-head {\n display: flex;\n gap: 12px;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n padding: 4px 6px 8px;\n border-bottom: 1px solid #f0f0f0;\n flex: 0 0 auto;\n}\n.react-list-table-column-setting-head button {\n border: 0;\n color: #1677ff;\n background: transparent;\n cursor: pointer;\n}\n.react-list-table-column-setting-body {\n flex: 1 1 auto;\n min-height: 0;\n overflow: auto;\n}\n.react-list-table-column-item {\n display: flex;\n align-items: center;\n gap: 8px;\n justify-content: space-between;\n padding: 7px 6px;\n box-sizing: border-box;\n cursor: pointer;\n}\n.react-list-table-column-position {\n flex: 0 0 28px;\n text-align: center;\n color: #64748b;\n font-variant-numeric: tabular-nums;\n}\n.react-list-table-column-main,\n.react-list-table-column-actions {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n}\n.react-list-table-column-main {\n min-width: 0;\n}\n.react-list-table-column-actions {\n flex: 0 0 auto;\n}\n.react-list-table-column-actions > .canvas-react-select-wrap {\n flex: 0 0 96px;\n width: 96px;\n height: 24px;\n}\n.react-list-table-column-label {\n min-width: 64px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n.react-list-table-column-width-input {\n height: 22px;\n padding-inline: 5px;\n}\n.react-list-table-column-fixed-input {\n height: 22px;\n padding-inline: 6px;\n font-size: 14px;\n}\n.react-list-table-column-sort-input {\n height: 22px;\n padding-inline: 6px;\n font-size: 14px;\n}\n.react-list-table-column-setting label.dragging {\n opacity: 0.45;\n background: #e6f4ff;\n}\n.react-list-table-column-setting [data-sortable-key].dragging {\n opacity: 0.28;\n}\n.react-list-table-column-drag {\n touch-action: none;\n color: #94a3b8;\n display: inline-flex;\n font-size: 14px;\n cursor: grab;\n user-select: none;\n}\nbody.react-list-table-sorting,\nbody.react-list-table-sorting * {\n cursor: grabbing !important;\n}\n.react-list-table-sort-overlay {\n position: fixed;\n z-index: 1400;\n display: block;\n padding: 0;\n box-sizing: border-box;\n color: #334155;\n background: #fff;\n border: 1px solid #91caff;\n border-radius: 6px;\n box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);\n pointer-events: none;\n}\n.react-list-table-sort-overlay .react-list-table-column-item {\n width: 100%;\n height: 100%;\n}\n");
5311
5336
  function ReactTableToolbar(props) {
5312
5337
  const { toolbar, title } = props;
5313
5338
  const [densityOpen, setDensityOpen] = useState(false);
@@ -5434,7 +5459,7 @@ function ReactTableToolbar(props) {
5434
5459
  "div",
5435
5460
  {
5436
5461
  className: "react-list-table-column-setting",
5437
- style: { width: config.columnSettingWidth ?? 430 },
5462
+ style: { width: config.columnSettingWidth ?? 470 },
5438
5463
  children: [
5439
5464
  /* @__PURE__ */ jsxs("div", { className: "react-list-table-column-setting-head", children: [
5440
5465
  /* @__PURE__ */ jsx("strong", { children: "\u5217\u8BBE\u7F6E" }),
@@ -5462,9 +5487,21 @@ function ReactTableToolbar(props) {
5462
5487
  SortableList,
5463
5488
  {
5464
5489
  scrollContainerRef: columnSettingsBodyRef,
5465
- items: flattenColumns(props.columns),
5490
+ items: flattenColumns(props.columns).map((column, index) => ({
5491
+ ...column,
5492
+ position: index + 1
5493
+ })),
5466
5494
  onOrderChange: props.onColumnOrderChange,
5467
5495
  renderItem: (column, handleProps) => /* @__PURE__ */ jsxs("div", { className: "react-list-table-column-item", children: [
5496
+ /* @__PURE__ */ jsx(
5497
+ "span",
5498
+ {
5499
+ className: "react-list-table-column-position",
5500
+ "aria-label": `\u5E8F\u53F7 ${column.position}`,
5501
+ title: "\u5E8F\u53F7",
5502
+ children: column.position
5503
+ }
5504
+ ),
5468
5505
  /* @__PURE__ */ jsxs(
5469
5506
  "span",
5470
5507
  {
@@ -5743,6 +5780,87 @@ function useReactListTableState(options) {
5743
5780
  }
5744
5781
  };
5745
5782
  }
5783
+ function retainShallowEqual(previous, next) {
5784
+ if (Object.is(previous, next)) return previous;
5785
+ if (!previous || !next || typeof previous !== "object" || typeof next !== "object" || Array.isArray(previous) || Array.isArray(next))
5786
+ return next;
5787
+ const left = previous;
5788
+ const right = next;
5789
+ const keys = Object.keys(right);
5790
+ return Object.keys(left).length === keys.length && keys.every(
5791
+ (key) => Object.prototype.hasOwnProperty.call(left, key) && Object.is(left[key], right[key])
5792
+ ) ? previous : next;
5793
+ }
5794
+ var CONFIG_KEYS = [
5795
+ "scroll",
5796
+ "locale",
5797
+ "theme",
5798
+ "styles",
5799
+ "keyboardNavigation",
5800
+ "contextMenu",
5801
+ "grouping",
5802
+ "query",
5803
+ "experimental",
5804
+ "rowSelector",
5805
+ "rowSelection",
5806
+ "expandable",
5807
+ "pagination",
5808
+ "scrollbar",
5809
+ "carouselScroll",
5810
+ "cachePreferences",
5811
+ "rowDrag",
5812
+ "debug",
5813
+ "exportOptions"
5814
+ ];
5815
+ var EVENT_KEYS = {
5816
+ query: ["onChange", "onError"],
5817
+ pagination: ["onChange", "onShowSizeChange"],
5818
+ rowSelection: ["onChange", "onSelect"],
5819
+ expandable: ["onExpand", "onExpandedRowsChange"],
5820
+ experimental: ["onOffscreenCanvasStatus"],
5821
+ rowDrag: ["onDrop", "onDragEndRemove"],
5822
+ debug: ["onPerformance"]
5823
+ };
5824
+ function useStableTableProps(props) {
5825
+ const committedProps = useRef(props);
5826
+ const previous = useRef();
5827
+ const handlers = useRef(/* @__PURE__ */ new Map());
5828
+ const next = { ...props };
5829
+ const event = (group, key) => {
5830
+ const path = group ? `${group}.${key}` : key;
5831
+ let handler = handlers.current.get(path);
5832
+ if (!handler) {
5833
+ handler = (...args) => {
5834
+ const current = committedProps.current;
5835
+ const owner = group ? current[group] : current;
5836
+ const callback = owner?.[key];
5837
+ return typeof callback === "function" ? Reflect.apply(callback, owner, args) : void 0;
5838
+ };
5839
+ handlers.current.set(path, handler);
5840
+ }
5841
+ return handler;
5842
+ };
5843
+ for (const key of ["onChange", "onRow"]) {
5844
+ if (typeof props[key] === "function") next[key] = event(void 0, key);
5845
+ }
5846
+ for (const key of CONFIG_KEYS) {
5847
+ let value = props[key];
5848
+ if (value && typeof value === "object" && EVENT_KEYS[key]) {
5849
+ const config = { ...value };
5850
+ for (const name of EVENT_KEYS[key]) {
5851
+ if (typeof config[name] === "function") config[name] = event(key, name);
5852
+ }
5853
+ value = config;
5854
+ }
5855
+ next[key] = retainShallowEqual(previous.current?.[key], value);
5856
+ }
5857
+ const result = next;
5858
+ useLayoutEffect(() => {
5859
+ committedProps.current = props;
5860
+ previous.current = result;
5861
+ });
5862
+ return result;
5863
+ }
5746
5864
 
5747
5865
  // src/components/build-list-table-options.ts
5748
5866
  function resolveDensityLinkedHeight(densityOverride, configuredHeight) {
@@ -5880,6 +5998,7 @@ function retainEqualQueryOption(previous, next) {
5880
5998
  return previousKeys.length === nextKeys.length && previousKeys.every((key) => Object.is(previous[key], next[key])) ? previous : next;
5881
5999
  }
5882
6000
  function ReactListTableInner(props, ref) {
6001
+ props = useStableTableProps(props);
5883
6002
  const {
5884
6003
  className,
5885
6004
  style,
@@ -6386,8 +6505,8 @@ function ReactListTableInner(props, ref) {
6386
6505
  ) : null
6387
6506
  ] });
6388
6507
  }
6389
- var ReactListTable = forwardRef(
6390
- ReactListTableInner
6508
+ var ReactListTable = memo(
6509
+ forwardRef(ReactListTableInner)
6391
6510
  );
6392
6511
  ReactListTable.EXPAND_COLUMN = EXPAND_COLUMN;
6393
6512
  ReactListTable.SELECTION_COLUMN = SELECTION_COLUMN;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@canvas-components/react-list-table",
3
- "version": "0.3.38",
3
+ "version": "0.3.40",
4
4
  "description": "React adapter for the list table core engine.",
5
5
  "license": "MIT",
6
6
  "type": "module",
@@ -28,9 +28,9 @@
28
28
  "pnpm": ">=9.0.0"
29
29
  },
30
30
  "dependencies": {
31
- "@canvas-components/chart": "0.3.7",
32
- "@canvas-components/list-table": "0.3.32",
33
- "@canvas-components/react-components": "0.3.16"
31
+ "@canvas-components/chart": "0.3.8",
32
+ "@canvas-components/list-table": "0.3.34",
33
+ "@canvas-components/react-components": "0.3.18"
34
34
  },
35
35
  "peerDependencies": {
36
36
  "react": ">=16.8.0",