@canvas-components/react-list-table 0.3.7 → 0.3.9

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 (7) hide show
  1. package/dist/index.cjs +34 -18
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.d.cts +2 -2
  4. package/dist/index.d.ts +2 -2
  5. package/dist/index.js +34 -18
  6. package/dist/index.js.map +1 -1
  7. package/package.json +3 -3
package/dist/index.cjs CHANGED
@@ -589,6 +589,14 @@ function DensityMenu(props) {
589
589
  onChange("compact");
590
590
  }
591
591
  },
592
+ {
593
+ key: "density-ultra-compact",
594
+ label: "\u8D85\u7D27\u51D1",
595
+ selected: value === "ultra-compact",
596
+ onClick: () => {
597
+ onChange("ultra-compact");
598
+ }
599
+ },
592
600
  {
593
601
  key: "density-auto",
594
602
  label: "\u81EA\u9002\u5E94",
@@ -667,7 +675,7 @@ function ZoomMenu(props) {
667
675
  alignItems: "center",
668
676
  gap: 8,
669
677
  color: "#6b7280",
670
- fontSize: 12
678
+ fontSize: 14
671
679
  },
672
680
  children: [
673
681
  /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
@@ -721,7 +729,7 @@ function ZoomMenu(props) {
721
729
  {
722
730
  style: {
723
731
  color: "#6b7280",
724
- fontSize: 12,
732
+ fontSize: 14,
725
733
  padding: "0 8px"
726
734
  },
727
735
  children: "\u8868\u683C\u7F29\u653E\uFF0850% - 200%\uFF09"
@@ -1070,7 +1078,7 @@ function CustomSelectionDialog(props) {
1070
1078
  },
1071
1079
  bodyStyle: { padding: "4px 20px 18px" },
1072
1080
  children: [
1073
- /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "#6b7280", fontSize: 12, marginBottom: 10 }, children: "\u8F93\u5165\u8D77\u59CB\u4F4D\u7F6E\u548C\u7ED3\u675F\u4F4D\u7F6E" }),
1081
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "#6b7280", fontSize: 14, marginBottom: 10 }, children: "\u8F93\u5165\u8D77\u59CB\u4F4D\u7F6E\u548C\u7ED3\u675F\u4F4D\u7F6E" }),
1074
1082
  /* @__PURE__ */ jsxRuntime.jsxs(
1075
1083
  "div",
1076
1084
  {
@@ -1080,7 +1088,7 @@ function CustomSelectionDialog(props) {
1080
1088
  gap: 8,
1081
1089
  marginBottom: 6,
1082
1090
  color: "#6b7280",
1083
- fontSize: 12,
1091
+ fontSize: 14,
1084
1092
  textAlign: "center"
1085
1093
  },
1086
1094
  children: [
@@ -1126,7 +1134,7 @@ function CustomSelectionRow(props) {
1126
1134
  marginBottom: 6
1127
1135
  },
1128
1136
  children: [
1129
- /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#374151", fontSize: 12 }, children: props.label }),
1137
+ /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#374151", fontSize: 14 }, children: props.label }),
1130
1138
  /* @__PURE__ */ jsxRuntime.jsx(
1131
1139
  reactComponents.ReactInputNumber,
1132
1140
  {
@@ -1214,7 +1222,7 @@ function SummaryMenu(props) {
1214
1222
  },
1215
1223
  children: [
1216
1224
  request.onChangeSummaryPrecision ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
1217
- /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#374151", fontSize: 13 }, children: "\u5C0F\u6570\u4F4D\u6570" }),
1225
+ /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#374151", fontSize: 14 }, children: "\u5C0F\u6570\u4F4D\u6570" }),
1218
1226
  /* @__PURE__ */ jsxRuntime.jsx(
1219
1227
  reactComponents.ReactInputNumber,
1220
1228
  {
@@ -1232,7 +1240,7 @@ function SummaryMenu(props) {
1232
1240
  )
1233
1241
  ] }) : null,
1234
1242
  request.onChangeSummaryRoundingMode ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
1235
- /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#374151", fontSize: 13 }, children: "\u53D6\u6574\u65B9\u5F0F" }),
1243
+ /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#374151", fontSize: 14 }, children: "\u53D6\u6574\u65B9\u5F0F" }),
1236
1244
  /* @__PURE__ */ jsxRuntime.jsx(
1237
1245
  reactComponents.ReactSelect,
1238
1246
  {
@@ -1252,7 +1260,7 @@ function SummaryMenu(props) {
1252
1260
  )
1253
1261
  ] }) : null,
1254
1262
  request.onChangeSummaryPreserveTrailingZeros ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
1255
- /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#374151", fontSize: 13 }, children: "\u4FDD\u7559\u65E0\u6548\u96F6" }),
1263
+ /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#374151", fontSize: 14 }, children: "\u4FDD\u7559\u65E0\u6548\u96F6" }),
1256
1264
  /* @__PURE__ */ jsxRuntime.jsx(
1257
1265
  reactComponents.ReactSelect,
1258
1266
  {
@@ -1312,7 +1320,7 @@ function AlignmentMenu(props) {
1312
1320
  }
1313
1321
  function AlignmentGroup(props) {
1314
1322
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "grid", gap: 6 }, children: [
1315
- /* @__PURE__ */ jsxRuntime.jsx("strong", { style: { color: "#374151", fontSize: 13 }, children: props.label }),
1323
+ /* @__PURE__ */ jsxRuntime.jsx("strong", { style: { color: "#374151", fontSize: 14 }, children: props.label }),
1316
1324
  /* @__PURE__ */ jsxRuntime.jsx(
1317
1325
  AlignmentSegment,
1318
1326
  {
@@ -1352,7 +1360,7 @@ function AlignmentSegment(props) {
1352
1360
  alignItems: "center"
1353
1361
  },
1354
1362
  children: [
1355
- /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#6b7280", fontSize: 12 }, children: props.label }),
1363
+ /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#6b7280", fontSize: 14 }, children: props.label }),
1356
1364
  props.options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
1357
1365
  "button",
1358
1366
  {
@@ -2005,7 +2013,7 @@ function resolveMoreFormatSample(category, customPattern, decimalPlaces = 2, cur
2005
2013
  var moreFormatLabelStyle = {
2006
2014
  marginBottom: 6,
2007
2015
  color: "#4b5563",
2008
- fontSize: 12
2016
+ fontSize: 14
2009
2017
  };
2010
2018
  var moreFormatCategoryListStyle = {
2011
2019
  display: "grid",
@@ -2040,7 +2048,7 @@ var moreFormatExampleStyle = {
2040
2048
  };
2041
2049
  var moreFormatDescriptionStyle = {
2042
2050
  color: "#6b7280",
2043
- fontSize: 12
2051
+ fontSize: 14
2044
2052
  };
2045
2053
  var moreFormatOptionsStyle = {
2046
2054
  display: "flex",
@@ -2159,7 +2167,7 @@ var searchContentStyle = {
2159
2167
  var matchTextStyle = {
2160
2168
  minWidth: 58,
2161
2169
  color: "#64748b",
2162
- fontSize: 12,
2170
+ fontSize: 14,
2163
2171
  whiteSpace: "nowrap"
2164
2172
  };
2165
2173
  var toolButtonStyle = {
@@ -3126,7 +3134,7 @@ function ReactTableTooltipView(props) {
3126
3134
  return null;
3127
3135
  }
3128
3136
  const zoom = typeof request.contentZoom === "number" && Number.isFinite(request.contentZoom) && request.contentZoom > 0 ? request.contentZoom : 1;
3129
- const fontSize = 12 * zoom;
3137
+ const fontSize = 14 * zoom;
3130
3138
  const paddingBlock = 6 * zoom;
3131
3139
  const paddingInline = 10 * zoom;
3132
3140
  const borderRadius = 6 * zoom;
@@ -3368,7 +3376,7 @@ function resolveSortableTransform(index, sourceIndex, targetIndex, height) {
3368
3376
  }
3369
3377
 
3370
3378
  // src/features/toolbar/style.css
3371
- styleInject('.react-list-table-shell {\n background: #fff;\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, .14);\n}\n.react-list-table-tool-menu button {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n padding: 6px 10px;\n border: 0;\n border-radius: 4px;\n background: transparent;\n text-align: left;\n cursor: pointer;\n}\n.react-list-table-tool-menu button.active::after {\n content: "\\2713";\n margin-left: 12px;\n font-size: 12px;\n}\n.react-list-table-tool-menu button:hover,\n.react-list-table-tool-menu button.active {\n color: #1677ff;\n background: #e6f4ff;\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 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: 12px;\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 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');
3379
+ 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, .14);\n}\n.react-list-table-tool-menu button {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n padding: 6px 10px;\n border: 0;\n border-radius: 4px;\n background: transparent;\n text-align: left;\n cursor: pointer;\n}\n.react-list-table-tool-menu button.active::after {\n content: "\\2713";\n margin-left: 12px;\n font-size: 14px;\n}\n.react-list-table-tool-menu button:hover,\n.react-list-table-tool-menu button.active {\n color: #1677ff;\n background: #e6f4ff;\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 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-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 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');
3372
3380
  function ReactTableToolbar(props) {
3373
3381
  const { toolbar, title } = props;
3374
3382
  const [densityOpen, setDensityOpen] = react.useState(false);
@@ -3454,7 +3462,7 @@ function ReactTableToolbar(props) {
3454
3462
  children: /* @__PURE__ */ jsxRuntime.jsx(ColumnHeightOutlined, {})
3455
3463
  }
3456
3464
  ),
3457
- densityOpen ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "react-list-table-tool-menu", children: [56, 48, 32].map((height) => /* @__PURE__ */ jsxRuntime.jsx(
3465
+ densityOpen ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "react-list-table-tool-menu", children: [56, 48, 32, 26].map((height) => /* @__PURE__ */ jsxRuntime.jsx(
3458
3466
  "button",
3459
3467
  {
3460
3468
  type: "button",
@@ -3463,7 +3471,7 @@ function ReactTableToolbar(props) {
3463
3471
  props.onDensityChange(height);
3464
3472
  setDensityOpen(false);
3465
3473
  },
3466
- children: height === 56 ? "\u5BBD\u677E" : height === 48 ? "\u4E2D\u7B49" : "\u7D27\u51D1"
3474
+ children: height === 56 ? "\u5BBD\u677E" : height === 48 ? "\u4E2D\u7B49" : height === 32 ? "\u7D27\u51D1" : "\u8D85\u7D27\u51D1"
3467
3475
  },
3468
3476
  height
3469
3477
  )) }) : null
@@ -3809,6 +3817,7 @@ function ReactListTableInner(props, ref) {
3809
3817
  () => /* @__PURE__ */ new Map()
3810
3818
  );
3811
3819
  const [columnConfig, setColumnConfig] = react.useState(() => /* @__PURE__ */ new Map());
3820
+ const [columnConfigRevision, setColumnConfigRevision] = react.useState(0);
3812
3821
  const resolvedColumns = react.useMemo(
3813
3822
  () => applyColumnManagerState(
3814
3823
  columns,
@@ -3871,6 +3880,7 @@ function ReactListTableInner(props, ref) {
3871
3880
  return {
3872
3881
  ...nextOptions,
3873
3882
  ...fullscreenSize,
3883
+ columnConfigRevision,
3874
3884
  ui: {
3875
3885
  ...nextOptions.ui,
3876
3886
  onDensityChange: setDensityOverride
@@ -3910,7 +3920,8 @@ function ReactListTableInner(props, ref) {
3910
3920
  tableId,
3911
3921
  rowDrag,
3912
3922
  debug,
3913
- isFullscreen
3923
+ isFullscreen,
3924
+ columnConfigRevision
3914
3925
  ]);
3915
3926
  const {
3916
3927
  containerRef,
@@ -3989,6 +4000,7 @@ function ReactListTableInner(props, ref) {
3989
4000
  next.set(columnKey, visible);
3990
4001
  return next;
3991
4002
  });
4003
+ setColumnConfigRevision((current) => current + 1);
3992
4004
  },
3993
4005
  onColumnOrderChange: (parentKey, orderedKeys) => {
3994
4006
  setColumnOrders((current) => {
@@ -3996,6 +4008,7 @@ function ReactListTableInner(props, ref) {
3996
4008
  next.set(parentKey, orderedKeys);
3997
4009
  return next;
3998
4010
  });
4011
+ setColumnConfigRevision((current) => current + 1);
3999
4012
  },
4000
4013
  onColumnWidthChange: (columnKey, width2) => {
4001
4014
  setColumnConfig((current) => {
@@ -4006,6 +4019,7 @@ function ReactListTableInner(props, ref) {
4006
4019
  });
4007
4020
  return next;
4008
4021
  });
4022
+ setColumnConfigRevision((current) => current + 1);
4009
4023
  },
4010
4024
  onColumnFixedChange: (columnKey, fixed) => {
4011
4025
  setColumnConfig((current) => {
@@ -4016,6 +4030,7 @@ function ReactListTableInner(props, ref) {
4016
4030
  });
4017
4031
  return next;
4018
4032
  });
4033
+ setColumnConfigRevision((current) => current + 1);
4019
4034
  },
4020
4035
  onResetColumns: () => {
4021
4036
  const initialColumns = applyColumnManagerState(
@@ -4031,6 +4046,7 @@ function ReactListTableInner(props, ref) {
4031
4046
  setColumnVisibility(/* @__PURE__ */ new Map());
4032
4047
  setColumnOrders(/* @__PURE__ */ new Map());
4033
4048
  setColumnConfig(/* @__PURE__ */ new Map());
4049
+ setColumnConfigRevision((current) => current + 1);
4034
4050
  });
4035
4051
  }
4036
4052
  }