@xcelsior/ui-spreadsheets 1.1.14 → 1.1.16
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/dist/index.d.mts +28 -1
- package/dist/index.d.ts +28 -1
- package/dist/index.js +659 -401
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +652 -395
- package/dist/index.mjs.map +1 -1
- package/dist/styles/globals.css +58 -0
- package/dist/styles/globals.css.map +1 -1
- package/package.json +1 -1
- package/src/components/ActiveFiltersDisplay.tsx +257 -0
- package/src/components/Spreadsheet.tsx +39 -5
- package/src/components/SpreadsheetCell.tsx +8 -2
- package/src/components/SpreadsheetHeader.tsx +8 -2
- package/src/components/SpreadsheetToolbar.tsx +249 -203
- package/src/hooks/useSpreadsheetPinning.ts +1 -1
- package/src/index.ts +2 -0
- package/src/types.ts +10 -0
package/dist/index.js
CHANGED
|
@@ -30,6 +30,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
30
30
|
// src/index.ts
|
|
31
31
|
var index_exports = {};
|
|
32
32
|
__export(index_exports, {
|
|
33
|
+
ActiveFiltersDisplay: () => ActiveFiltersDisplay,
|
|
33
34
|
RowContextMenu: () => RowContextMenu,
|
|
34
35
|
Spreadsheet: () => Spreadsheet,
|
|
35
36
|
SpreadsheetCell: () => MemoizedSpreadsheetCell,
|
|
@@ -193,7 +194,7 @@ var import_react4 = require("react");
|
|
|
193
194
|
var import_react3 = require("react");
|
|
194
195
|
var ROW_INDEX_COLUMN_ID = "__row_index__";
|
|
195
196
|
var ROW_INDEX_COLUMN_WIDTH = 80;
|
|
196
|
-
var MIN_PINNED_COLUMN_WIDTH =
|
|
197
|
+
var MIN_PINNED_COLUMN_WIDTH = 150;
|
|
197
198
|
function useSpreadsheetPinning({
|
|
198
199
|
columns,
|
|
199
200
|
columnGroups,
|
|
@@ -561,8 +562,14 @@ var SpreadsheetCell = ({
|
|
|
561
562
|
// Pinned columns must have a fixed width so sticky offsets stay correct.
|
|
562
563
|
// Enforce MIN_PINNED_COLUMN_WIDTH so header actions always fit.
|
|
563
564
|
...isPinned && {
|
|
564
|
-
width: Math.max(
|
|
565
|
-
|
|
565
|
+
width: Math.max(
|
|
566
|
+
column.minWidth || column.width || MIN_PINNED_COLUMN_WIDTH,
|
|
567
|
+
MIN_PINNED_COLUMN_WIDTH
|
|
568
|
+
),
|
|
569
|
+
maxWidth: Math.max(
|
|
570
|
+
column.minWidth || column.width || MIN_PINNED_COLUMN_WIDTH,
|
|
571
|
+
MIN_PINNED_COLUMN_WIDTH
|
|
572
|
+
)
|
|
566
573
|
},
|
|
567
574
|
...positionStyles,
|
|
568
575
|
...selectionBorderStyles
|
|
@@ -970,7 +977,198 @@ SpreadsheetFilterDropdown.displayName = "SpreadsheetFilterDropdown";
|
|
|
970
977
|
|
|
971
978
|
// src/components/SpreadsheetToolbar.tsx
|
|
972
979
|
var import_react6 = __toESM(require("react"));
|
|
980
|
+
|
|
981
|
+
// src/components/ActiveFiltersDisplay.tsx
|
|
973
982
|
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
983
|
+
var TEXT_OPERATOR_LABELS = {
|
|
984
|
+
contains: "contains",
|
|
985
|
+
notContains: "does not contain",
|
|
986
|
+
equals: "equals",
|
|
987
|
+
notEquals: "does not equal",
|
|
988
|
+
startsWith: "starts with",
|
|
989
|
+
endsWith: "ends with",
|
|
990
|
+
isEmpty: "is empty",
|
|
991
|
+
isNotEmpty: "is not empty"
|
|
992
|
+
};
|
|
993
|
+
var NUMBER_OPERATOR_LABELS = {
|
|
994
|
+
equals: "=",
|
|
995
|
+
notEquals: "\u2260",
|
|
996
|
+
greaterThan: ">",
|
|
997
|
+
greaterThanOrEqual: "\u2265",
|
|
998
|
+
lessThan: "<",
|
|
999
|
+
lessThanOrEqual: "\u2264",
|
|
1000
|
+
between: "between",
|
|
1001
|
+
isEmpty: "is empty",
|
|
1002
|
+
isNotEmpty: "is not empty"
|
|
1003
|
+
};
|
|
1004
|
+
var DATE_OPERATOR_LABELS = {
|
|
1005
|
+
equals: "is",
|
|
1006
|
+
notEquals: "is not",
|
|
1007
|
+
before: "before",
|
|
1008
|
+
after: "after",
|
|
1009
|
+
between: "between",
|
|
1010
|
+
today: "is today",
|
|
1011
|
+
yesterday: "is yesterday",
|
|
1012
|
+
thisWeek: "is this week",
|
|
1013
|
+
lastWeek: "is last week",
|
|
1014
|
+
thisMonth: "is this month",
|
|
1015
|
+
lastMonth: "is last month",
|
|
1016
|
+
thisYear: "is this year",
|
|
1017
|
+
isEmpty: "is empty",
|
|
1018
|
+
isNotEmpty: "is not empty"
|
|
1019
|
+
};
|
|
1020
|
+
function formatFilter(filter, _column) {
|
|
1021
|
+
const parts = [];
|
|
1022
|
+
if (filter.textCondition) {
|
|
1023
|
+
const { operator, value } = filter.textCondition;
|
|
1024
|
+
const label = TEXT_OPERATOR_LABELS[operator];
|
|
1025
|
+
if (["isEmpty", "isNotEmpty"].includes(operator)) {
|
|
1026
|
+
parts.push(label);
|
|
1027
|
+
} else if (value) {
|
|
1028
|
+
parts.push(`${label} "${value}"`);
|
|
1029
|
+
}
|
|
1030
|
+
}
|
|
1031
|
+
if (filter.numberCondition) {
|
|
1032
|
+
const { operator, value, valueTo } = filter.numberCondition;
|
|
1033
|
+
const label = NUMBER_OPERATOR_LABELS[operator];
|
|
1034
|
+
if (["isEmpty", "isNotEmpty"].includes(operator)) {
|
|
1035
|
+
parts.push(label);
|
|
1036
|
+
} else if (operator === "between" && value !== void 0 && valueTo !== void 0) {
|
|
1037
|
+
parts.push(`${label} ${value} and ${valueTo}`);
|
|
1038
|
+
} else if (value !== void 0) {
|
|
1039
|
+
parts.push(`${label} ${value}`);
|
|
1040
|
+
}
|
|
1041
|
+
}
|
|
1042
|
+
if (filter.dateCondition) {
|
|
1043
|
+
const { operator, value, valueTo } = filter.dateCondition;
|
|
1044
|
+
const label = DATE_OPERATOR_LABELS[operator];
|
|
1045
|
+
const noValueOperators = [
|
|
1046
|
+
"isEmpty",
|
|
1047
|
+
"isNotEmpty",
|
|
1048
|
+
"today",
|
|
1049
|
+
"yesterday",
|
|
1050
|
+
"thisWeek",
|
|
1051
|
+
"lastWeek",
|
|
1052
|
+
"thisMonth",
|
|
1053
|
+
"lastMonth",
|
|
1054
|
+
"thisYear"
|
|
1055
|
+
];
|
|
1056
|
+
if (noValueOperators.includes(operator)) {
|
|
1057
|
+
parts.push(label);
|
|
1058
|
+
} else if (operator === "between" && value && valueTo) {
|
|
1059
|
+
parts.push(`${label} ${formatDate(value)} and ${formatDate(valueTo)}`);
|
|
1060
|
+
} else if (value) {
|
|
1061
|
+
parts.push(`${label} ${formatDate(value)}`);
|
|
1062
|
+
}
|
|
1063
|
+
}
|
|
1064
|
+
if (filter.text) {
|
|
1065
|
+
parts.push(`contains "${filter.text}"`);
|
|
1066
|
+
}
|
|
1067
|
+
if (filter.selectedValues && filter.selectedValues.length > 0) {
|
|
1068
|
+
if (filter.selectedValues.length === 1) {
|
|
1069
|
+
parts.push(`is "${filter.selectedValues[0]}"`);
|
|
1070
|
+
} else {
|
|
1071
|
+
parts.push(`is one of ${filter.selectedValues.length} values`);
|
|
1072
|
+
}
|
|
1073
|
+
}
|
|
1074
|
+
if (filter.min !== void 0 && filter.max !== void 0) {
|
|
1075
|
+
parts.push(`between ${filter.min} and ${filter.max}`);
|
|
1076
|
+
} else if (filter.min !== void 0) {
|
|
1077
|
+
parts.push(`\u2265 ${filter.min}`);
|
|
1078
|
+
} else if (filter.max !== void 0) {
|
|
1079
|
+
parts.push(`\u2264 ${filter.max}`);
|
|
1080
|
+
}
|
|
1081
|
+
if (filter.includeBlanks) {
|
|
1082
|
+
parts.push("includes blanks");
|
|
1083
|
+
}
|
|
1084
|
+
if (filter.excludeBlanks) {
|
|
1085
|
+
parts.push("excludes blanks");
|
|
1086
|
+
}
|
|
1087
|
+
return parts.join(", ") || "filtered";
|
|
1088
|
+
}
|
|
1089
|
+
function formatDate(dateStr) {
|
|
1090
|
+
try {
|
|
1091
|
+
const date = new Date(dateStr);
|
|
1092
|
+
return date.toLocaleDateString("en-US", {
|
|
1093
|
+
month: "short",
|
|
1094
|
+
day: "numeric",
|
|
1095
|
+
year: "numeric"
|
|
1096
|
+
});
|
|
1097
|
+
} catch {
|
|
1098
|
+
return dateStr;
|
|
1099
|
+
}
|
|
1100
|
+
}
|
|
1101
|
+
var ActiveFiltersDisplay = ({
|
|
1102
|
+
filters,
|
|
1103
|
+
columns,
|
|
1104
|
+
onClearFilter,
|
|
1105
|
+
onClearAllFilters,
|
|
1106
|
+
className
|
|
1107
|
+
}) => {
|
|
1108
|
+
const activeFilters = Object.entries(filters).filter(([_, filter]) => {
|
|
1109
|
+
return filter.textCondition || filter.numberCondition || filter.dateCondition || filter.text || filter.selectedValues && filter.selectedValues.length > 0 || filter.min !== void 0 || filter.max !== void 0 || filter.includeBlanks || filter.excludeBlanks;
|
|
1110
|
+
});
|
|
1111
|
+
if (activeFilters.length === 0) {
|
|
1112
|
+
return null;
|
|
1113
|
+
}
|
|
1114
|
+
const getColumnLabel = (columnId) => {
|
|
1115
|
+
const column = columns.find((c) => c.id === columnId);
|
|
1116
|
+
return column?.label || columnId;
|
|
1117
|
+
};
|
|
1118
|
+
const getColumn = (columnId) => {
|
|
1119
|
+
return columns.find((c) => c.id === columnId);
|
|
1120
|
+
};
|
|
1121
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
1122
|
+
"div",
|
|
1123
|
+
{
|
|
1124
|
+
className: cn(
|
|
1125
|
+
"flex flex-wrap items-center gap-2 px-4 py-2 bg-amber-50 border-b border-amber-200",
|
|
1126
|
+
className
|
|
1127
|
+
),
|
|
1128
|
+
children: [
|
|
1129
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-xs font-medium text-amber-700 mr-1", children: "Active filters:" }),
|
|
1130
|
+
activeFilters.map(([columnId, filter]) => {
|
|
1131
|
+
const column = getColumn(columnId);
|
|
1132
|
+
const filterDescription = column ? formatFilter(filter, column) : formatFilter(filter, { id: columnId, label: columnId });
|
|
1133
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
1134
|
+
"div",
|
|
1135
|
+
{
|
|
1136
|
+
className: "inline-flex items-center gap-1.5 px-2.5 py-1 bg-white border border-amber-300 rounded-full shadow-sm",
|
|
1137
|
+
children: [
|
|
1138
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-xs font-medium text-gray-700", children: getColumnLabel(columnId) }),
|
|
1139
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-xs text-gray-500", children: filterDescription }),
|
|
1140
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
1141
|
+
"button",
|
|
1142
|
+
{
|
|
1143
|
+
type: "button",
|
|
1144
|
+
onClick: () => onClearFilter(columnId),
|
|
1145
|
+
className: "p-0.5 hover:bg-amber-100 rounded-full transition-colors",
|
|
1146
|
+
title: `Clear filter for ${getColumnLabel(columnId)}`,
|
|
1147
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(HiX, { className: "h-3 w-3 text-amber-600 hover:text-amber-800" })
|
|
1148
|
+
}
|
|
1149
|
+
)
|
|
1150
|
+
]
|
|
1151
|
+
},
|
|
1152
|
+
columnId
|
|
1153
|
+
);
|
|
1154
|
+
}),
|
|
1155
|
+
activeFilters.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
1156
|
+
"button",
|
|
1157
|
+
{
|
|
1158
|
+
type: "button",
|
|
1159
|
+
onClick: onClearAllFilters,
|
|
1160
|
+
className: "text-xs text-amber-700 hover:text-amber-900 underline ml-2 transition-colors",
|
|
1161
|
+
children: "Clear all"
|
|
1162
|
+
}
|
|
1163
|
+
)
|
|
1164
|
+
]
|
|
1165
|
+
}
|
|
1166
|
+
);
|
|
1167
|
+
};
|
|
1168
|
+
ActiveFiltersDisplay.displayName = "ActiveFiltersDisplay";
|
|
1169
|
+
|
|
1170
|
+
// src/components/SpreadsheetToolbar.tsx
|
|
1171
|
+
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
974
1172
|
var SpreadsheetToolbar = ({
|
|
975
1173
|
zoom,
|
|
976
1174
|
canUndo,
|
|
@@ -994,6 +1192,11 @@ var SpreadsheetToolbar = ({
|
|
|
994
1192
|
onShowShortcuts,
|
|
995
1193
|
hasActiveFilters,
|
|
996
1194
|
onClearFilters,
|
|
1195
|
+
filters,
|
|
1196
|
+
columns,
|
|
1197
|
+
onClearFilter,
|
|
1198
|
+
showFiltersPanel,
|
|
1199
|
+
onToggleFiltersPanel,
|
|
997
1200
|
className
|
|
998
1201
|
}) => {
|
|
999
1202
|
const [showMoreMenu, setShowMoreMenu] = import_react6.default.useState(false);
|
|
@@ -1047,231 +1250,254 @@ var SpreadsheetToolbar = ({
|
|
|
1047
1250
|
return "bg-blue-50 border-blue-200 text-blue-700";
|
|
1048
1251
|
}
|
|
1049
1252
|
};
|
|
1050
|
-
|
|
1051
|
-
|
|
1052
|
-
|
|
1053
|
-
|
|
1054
|
-
|
|
1055
|
-
|
|
1056
|
-
|
|
1057
|
-
|
|
1058
|
-
|
|
1059
|
-
|
|
1060
|
-
|
|
1253
|
+
const activeFilterCount = filters ? Object.values(filters).filter(
|
|
1254
|
+
(f) => f.textCondition || f.numberCondition || f.dateCondition || f.text || f.selectedValues && f.selectedValues.length > 0 || f.min !== void 0 || f.max !== void 0 || f.includeBlanks || f.excludeBlanks
|
|
1255
|
+
).length : 0;
|
|
1256
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-col", children: [
|
|
1257
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
1258
|
+
"div",
|
|
1259
|
+
{
|
|
1260
|
+
className: cn(
|
|
1261
|
+
"flex flex-wrap items-center justify-between gap-2 px-4 py-2 border-b border-gray-200 bg-white",
|
|
1262
|
+
className
|
|
1263
|
+
),
|
|
1264
|
+
children: [
|
|
1265
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
1266
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-1", children: [
|
|
1267
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
1268
|
+
"button",
|
|
1269
|
+
{
|
|
1270
|
+
type: "button",
|
|
1271
|
+
onClick: onUndo,
|
|
1272
|
+
disabled: !canUndo,
|
|
1273
|
+
className: cn(
|
|
1274
|
+
buttonBaseClasses,
|
|
1275
|
+
canUndo ? "bg-gray-100 text-gray-700 hover:bg-gray-200" : "bg-gray-50 text-gray-400"
|
|
1276
|
+
),
|
|
1277
|
+
title: `Undo (${undoCount} changes)`,
|
|
1278
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(HiReply, { className: "h-4 w-4" })
|
|
1279
|
+
}
|
|
1280
|
+
),
|
|
1281
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
1282
|
+
"button",
|
|
1283
|
+
{
|
|
1284
|
+
type: "button",
|
|
1285
|
+
onClick: onRedo,
|
|
1286
|
+
disabled: !canRedo,
|
|
1287
|
+
className: cn(
|
|
1288
|
+
buttonBaseClasses,
|
|
1289
|
+
canRedo ? "bg-gray-100 text-gray-700 hover:bg-gray-200" : "bg-gray-50 text-gray-400"
|
|
1290
|
+
),
|
|
1291
|
+
title: `Redo (${redoCount} changes)`,
|
|
1292
|
+
style: { transform: "scaleX(-1)" },
|
|
1293
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(HiReply, { className: "h-4 w-4" })
|
|
1294
|
+
}
|
|
1295
|
+
)
|
|
1296
|
+
] }),
|
|
1297
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-1 px-1.5 py-1 bg-gray-100 rounded", children: [
|
|
1298
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
1299
|
+
"button",
|
|
1300
|
+
{
|
|
1301
|
+
type: "button",
|
|
1302
|
+
onClick: onZoomOut,
|
|
1303
|
+
className: "p-1 hover:bg-white rounded",
|
|
1304
|
+
title: "Zoom out",
|
|
1305
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(HiZoomOut, { className: "h-4 w-4 text-gray-600" })
|
|
1306
|
+
}
|
|
1307
|
+
),
|
|
1308
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
1309
|
+
"button",
|
|
1310
|
+
{
|
|
1311
|
+
type: "button",
|
|
1312
|
+
onClick: onZoomReset,
|
|
1313
|
+
className: "px-2 py-0.5 hover:bg-white rounded text-xs min-w-[45px] text-center text-gray-600",
|
|
1314
|
+
title: "Reset zoom",
|
|
1315
|
+
children: [
|
|
1316
|
+
zoom,
|
|
1317
|
+
"%"
|
|
1318
|
+
]
|
|
1319
|
+
}
|
|
1320
|
+
),
|
|
1321
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
1322
|
+
"button",
|
|
1323
|
+
{
|
|
1324
|
+
type: "button",
|
|
1325
|
+
onClick: onZoomIn,
|
|
1326
|
+
className: "p-1 hover:bg-white rounded",
|
|
1327
|
+
title: "Zoom in",
|
|
1328
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(HiZoomIn, { className: "h-4 w-4 text-gray-600" })
|
|
1329
|
+
}
|
|
1330
|
+
)
|
|
1331
|
+
] })
|
|
1332
|
+
] }),
|
|
1333
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-2 flex-1 min-w-0", children: [
|
|
1334
|
+
selectedRowCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-2 px-2.5 py-1.5 bg-blue-600 text-white rounded", children: [
|
|
1335
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "text-xs font-medium whitespace-nowrap", children: [
|
|
1336
|
+
selectedRowCount,
|
|
1337
|
+
" row",
|
|
1338
|
+
selectedRowCount !== 1 ? "s" : "",
|
|
1339
|
+
" selected"
|
|
1340
|
+
] }),
|
|
1341
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
1342
|
+
"button",
|
|
1343
|
+
{
|
|
1344
|
+
type: "button",
|
|
1345
|
+
onClick: onClearSelection,
|
|
1346
|
+
className: "p-0.5 hover:bg-blue-700 rounded",
|
|
1347
|
+
title: "Clear selection",
|
|
1348
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(HiX, { className: "h-3 w-3" })
|
|
1349
|
+
}
|
|
1350
|
+
)
|
|
1351
|
+
] }),
|
|
1352
|
+
hasActiveFilters && onToggleFiltersPanel && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
1061
1353
|
"button",
|
|
1062
1354
|
{
|
|
1063
1355
|
type: "button",
|
|
1064
|
-
onClick:
|
|
1065
|
-
disabled: !canUndo,
|
|
1356
|
+
onClick: onToggleFiltersPanel,
|
|
1066
1357
|
className: cn(
|
|
1067
|
-
|
|
1068
|
-
|
|
1358
|
+
"flex items-center gap-2 px-2.5 py-1.5 rounded transition-colors",
|
|
1359
|
+
showFiltersPanel ? "bg-amber-600 text-white hover:bg-amber-700" : "bg-amber-500 text-white hover:bg-amber-600"
|
|
1069
1360
|
),
|
|
1070
|
-
title:
|
|
1071
|
-
children:
|
|
1361
|
+
title: showFiltersPanel ? "Hide active filters" : "Show active filters",
|
|
1362
|
+
children: [
|
|
1363
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(HiFilter, { className: "h-3.5 w-3.5" }),
|
|
1364
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "text-xs font-medium whitespace-nowrap", children: [
|
|
1365
|
+
activeFilterCount,
|
|
1366
|
+
" filter",
|
|
1367
|
+
activeFilterCount !== 1 ? "s" : "",
|
|
1368
|
+
" ",
|
|
1369
|
+
"active"
|
|
1370
|
+
] }),
|
|
1371
|
+
showFiltersPanel ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(HiChevronUp, { className: "h-3 w-3" }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(HiChevronDown, { className: "h-3 w-3" })
|
|
1372
|
+
]
|
|
1072
1373
|
}
|
|
1073
1374
|
),
|
|
1074
|
-
/* @__PURE__ */ (0,
|
|
1075
|
-
"
|
|
1375
|
+
summary && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
1376
|
+
"div",
|
|
1076
1377
|
{
|
|
1077
|
-
type: "button",
|
|
1078
|
-
onClick: onRedo,
|
|
1079
|
-
disabled: !canRedo,
|
|
1080
1378
|
className: cn(
|
|
1081
|
-
|
|
1082
|
-
|
|
1379
|
+
"flex items-center gap-2 px-2.5 py-1.5 rounded border text-xs",
|
|
1380
|
+
getSummaryVariantClasses(summary.variant)
|
|
1083
1381
|
),
|
|
1084
|
-
title: `Redo (${redoCount} changes)`,
|
|
1085
|
-
style: { transform: "scaleX(-1)" },
|
|
1086
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(HiReply, { className: "h-4 w-4" })
|
|
1087
|
-
}
|
|
1088
|
-
)
|
|
1089
|
-
] }),
|
|
1090
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center gap-1 px-1.5 py-1 bg-gray-100 rounded", children: [
|
|
1091
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
1092
|
-
"button",
|
|
1093
|
-
{
|
|
1094
|
-
type: "button",
|
|
1095
|
-
onClick: onZoomOut,
|
|
1096
|
-
className: "p-1 hover:bg-white rounded",
|
|
1097
|
-
title: "Zoom out",
|
|
1098
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(HiZoomOut, { className: "h-4 w-4 text-gray-600" })
|
|
1099
|
-
}
|
|
1100
|
-
),
|
|
1101
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
1102
|
-
"button",
|
|
1103
|
-
{
|
|
1104
|
-
type: "button",
|
|
1105
|
-
onClick: onZoomReset,
|
|
1106
|
-
className: "px-2 py-0.5 hover:bg-white rounded text-xs min-w-[45px] text-center text-gray-600",
|
|
1107
|
-
title: "Reset zoom",
|
|
1108
1382
|
children: [
|
|
1109
|
-
|
|
1110
|
-
|
|
1383
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "font-semibold whitespace-nowrap", children: [
|
|
1384
|
+
summary.label,
|
|
1385
|
+
":"
|
|
1386
|
+
] }),
|
|
1387
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "font-bold whitespace-nowrap", children: summary.value })
|
|
1111
1388
|
]
|
|
1112
1389
|
}
|
|
1113
|
-
),
|
|
1114
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
1115
|
-
"button",
|
|
1116
|
-
{
|
|
1117
|
-
type: "button",
|
|
1118
|
-
onClick: onZoomIn,
|
|
1119
|
-
className: "p-1 hover:bg-white rounded",
|
|
1120
|
-
title: "Zoom in",
|
|
1121
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(HiZoomIn, { className: "h-4 w-4 text-gray-600" })
|
|
1122
|
-
}
|
|
1123
|
-
)
|
|
1124
|
-
] })
|
|
1125
|
-
] }),
|
|
1126
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center gap-2 flex-1 min-w-0", children: [
|
|
1127
|
-
selectedRowCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center gap-2 px-2.5 py-1.5 bg-blue-600 text-white rounded", children: [
|
|
1128
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "text-xs font-medium whitespace-nowrap", children: [
|
|
1129
|
-
selectedRowCount,
|
|
1130
|
-
" row",
|
|
1131
|
-
selectedRowCount !== 1 ? "s" : "",
|
|
1132
|
-
" selected"
|
|
1133
|
-
] }),
|
|
1134
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
1135
|
-
"button",
|
|
1136
|
-
{
|
|
1137
|
-
type: "button",
|
|
1138
|
-
onClick: onClearSelection,
|
|
1139
|
-
className: "p-0.5 hover:bg-blue-700 rounded",
|
|
1140
|
-
title: "Clear selection",
|
|
1141
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(HiX, { className: "h-3 w-3" })
|
|
1142
|
-
}
|
|
1143
1390
|
)
|
|
1144
1391
|
] }),
|
|
1145
|
-
|
|
1146
|
-
/* @__PURE__ */ (0,
|
|
1147
|
-
|
|
1148
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
1149
|
-
"button",
|
|
1392
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
1393
|
+
saveStatusDisplay && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
1394
|
+
"span",
|
|
1150
1395
|
{
|
|
1151
|
-
|
|
1152
|
-
|
|
1153
|
-
|
|
1154
|
-
|
|
1155
|
-
children:
|
|
1396
|
+
className: cn(
|
|
1397
|
+
"text-xs flex items-center gap-1",
|
|
1398
|
+
saveStatusDisplay.className
|
|
1399
|
+
),
|
|
1400
|
+
children: saveStatusDisplay.text
|
|
1156
1401
|
}
|
|
1157
|
-
)
|
|
1158
|
-
|
|
1159
|
-
summary && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
1160
|
-
"div",
|
|
1161
|
-
{
|
|
1162
|
-
className: cn(
|
|
1163
|
-
"flex items-center gap-2 px-2.5 py-1.5 rounded border text-xs",
|
|
1164
|
-
getSummaryVariantClasses(summary.variant)
|
|
1165
|
-
),
|
|
1166
|
-
children: [
|
|
1167
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "font-semibold whitespace-nowrap", children: [
|
|
1168
|
-
summary.label,
|
|
1169
|
-
":"
|
|
1170
|
-
] }),
|
|
1171
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "font-bold whitespace-nowrap", children: summary.value })
|
|
1172
|
-
]
|
|
1173
|
-
}
|
|
1174
|
-
)
|
|
1175
|
-
] }),
|
|
1176
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
1177
|
-
saveStatusDisplay && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
1178
|
-
"span",
|
|
1179
|
-
{
|
|
1180
|
-
className: cn(
|
|
1181
|
-
"text-xs flex items-center gap-1",
|
|
1182
|
-
saveStatusDisplay.className
|
|
1183
|
-
),
|
|
1184
|
-
children: saveStatusDisplay.text
|
|
1185
|
-
}
|
|
1186
|
-
),
|
|
1187
|
-
!autoSave && onSave && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
1188
|
-
"button",
|
|
1189
|
-
{
|
|
1190
|
-
type: "button",
|
|
1191
|
-
onClick: onSave,
|
|
1192
|
-
disabled: !hasUnsavedChanges,
|
|
1193
|
-
className: cn(
|
|
1194
|
-
"px-3 py-1.5 text-xs bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors flex items-center gap-1.5",
|
|
1195
|
-
"disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-blue-600"
|
|
1196
|
-
),
|
|
1197
|
-
children: [
|
|
1198
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(HiCheck, { className: "h-3.5 w-3.5" }),
|
|
1199
|
-
"Save"
|
|
1200
|
-
]
|
|
1201
|
-
}
|
|
1202
|
-
),
|
|
1203
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "relative", ref: menuRef, children: [
|
|
1204
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
1402
|
+
),
|
|
1403
|
+
!autoSave && onSave && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
1205
1404
|
"button",
|
|
1206
1405
|
{
|
|
1207
1406
|
type: "button",
|
|
1208
|
-
onClick:
|
|
1209
|
-
|
|
1210
|
-
|
|
1407
|
+
onClick: onSave,
|
|
1408
|
+
disabled: !hasUnsavedChanges,
|
|
1409
|
+
className: cn(
|
|
1410
|
+
"px-3 py-1.5 text-xs bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors flex items-center gap-1.5",
|
|
1411
|
+
"disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-blue-600"
|
|
1412
|
+
),
|
|
1211
1413
|
children: [
|
|
1212
|
-
/* @__PURE__ */ (0,
|
|
1213
|
-
|
|
1414
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(HiCheck, { className: "h-3.5 w-3.5" }),
|
|
1415
|
+
"Save"
|
|
1214
1416
|
]
|
|
1215
1417
|
}
|
|
1216
1418
|
),
|
|
1217
|
-
|
|
1218
|
-
|
|
1219
|
-
"button",
|
|
1220
|
-
{
|
|
1221
|
-
type: "button",
|
|
1222
|
-
onClick: () => {
|
|
1223
|
-
onSettings();
|
|
1224
|
-
setShowMoreMenu(false);
|
|
1225
|
-
},
|
|
1226
|
-
className: "w-full px-3 py-2 text-left hover:bg-gray-50 flex items-center gap-2 text-xs transition-colors",
|
|
1227
|
-
children: [
|
|
1228
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(HiCog, { className: "h-3.5 w-3.5 text-gray-500" }),
|
|
1229
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-gray-700", children: "Settings" })
|
|
1230
|
-
]
|
|
1231
|
-
}
|
|
1232
|
-
),
|
|
1233
|
-
onShowShortcuts && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
1419
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "relative", ref: menuRef, children: [
|
|
1420
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
1234
1421
|
"button",
|
|
1235
1422
|
{
|
|
1236
1423
|
type: "button",
|
|
1237
|
-
onClick: () =>
|
|
1238
|
-
|
|
1239
|
-
|
|
1240
|
-
},
|
|
1241
|
-
className: "w-full px-3 py-2 text-left hover:bg-gray-50 flex items-center gap-2 text-xs transition-colors",
|
|
1424
|
+
onClick: () => setShowMoreMenu(!showMoreMenu),
|
|
1425
|
+
className: "px-2.5 py-1.5 bg-gray-100 text-gray-700 rounded hover:bg-gray-200 transition-colors flex items-center gap-1.5 text-xs",
|
|
1426
|
+
title: "More actions",
|
|
1242
1427
|
children: [
|
|
1243
|
-
/* @__PURE__ */ (0,
|
|
1244
|
-
/* @__PURE__ */ (0,
|
|
1428
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(HiDotsVertical, { className: "h-3.5 w-3.5" }),
|
|
1429
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "hidden lg:inline", children: "More" })
|
|
1245
1430
|
]
|
|
1246
1431
|
}
|
|
1247
1432
|
),
|
|
1248
|
-
|
|
1249
|
-
|
|
1250
|
-
|
|
1251
|
-
|
|
1252
|
-
|
|
1253
|
-
|
|
1254
|
-
|
|
1255
|
-
|
|
1256
|
-
|
|
1433
|
+
showMoreMenu && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "absolute right-0 top-full mt-1 bg-white border border-gray-200 shadow-lg rounded py-1 min-w-[180px] z-50", children: [
|
|
1434
|
+
onSettings && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
1435
|
+
"button",
|
|
1436
|
+
{
|
|
1437
|
+
type: "button",
|
|
1438
|
+
onClick: () => {
|
|
1439
|
+
onSettings();
|
|
1440
|
+
setShowMoreMenu(false);
|
|
1441
|
+
},
|
|
1442
|
+
className: "w-full px-3 py-2 text-left hover:bg-gray-50 flex items-center gap-2 text-xs transition-colors",
|
|
1443
|
+
children: [
|
|
1444
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(HiCog, { className: "h-3.5 w-3.5 text-gray-500" }),
|
|
1445
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-gray-700", children: "Settings" })
|
|
1446
|
+
]
|
|
1447
|
+
}
|
|
1448
|
+
),
|
|
1449
|
+
onShowShortcuts && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
1450
|
+
"button",
|
|
1451
|
+
{
|
|
1452
|
+
type: "button",
|
|
1453
|
+
onClick: () => {
|
|
1454
|
+
onShowShortcuts();
|
|
1455
|
+
setShowMoreMenu(false);
|
|
1456
|
+
},
|
|
1457
|
+
className: "w-full px-3 py-2 text-left hover:bg-gray-50 flex items-center gap-2 text-xs transition-colors",
|
|
1458
|
+
children: [
|
|
1459
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(HiOutlineQuestionMarkCircle, { className: "h-3.5 w-3.5 text-gray-500" }),
|
|
1460
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-gray-700", children: "Keyboard Shortcuts" })
|
|
1461
|
+
]
|
|
1462
|
+
}
|
|
1463
|
+
),
|
|
1464
|
+
menuItems && menuItems.length > 0 && (onSettings || onShowShortcuts) && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "border-t border-gray-100 my-1" }),
|
|
1465
|
+
menuItems?.map((item) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
1466
|
+
"button",
|
|
1467
|
+
{
|
|
1468
|
+
type: "button",
|
|
1469
|
+
disabled: item.disabled,
|
|
1470
|
+
onClick: () => {
|
|
1471
|
+
item.onClick();
|
|
1472
|
+
setShowMoreMenu(false);
|
|
1473
|
+
},
|
|
1474
|
+
className: cn(
|
|
1475
|
+
"w-full px-3 py-2 text-left hover:bg-gray-50 flex items-center gap-2 text-xs transition-colors",
|
|
1476
|
+
item.disabled && "opacity-50 cursor-not-allowed"
|
|
1477
|
+
),
|
|
1478
|
+
children: [
|
|
1479
|
+
item.icon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "h-3.5 w-3.5 text-gray-500 flex items-center justify-center", children: item.icon }),
|
|
1480
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-gray-700", children: item.label })
|
|
1481
|
+
]
|
|
1257
1482
|
},
|
|
1258
|
-
|
|
1259
|
-
|
|
1260
|
-
|
|
1261
|
-
),
|
|
1262
|
-
children: [
|
|
1263
|
-
item.icon && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "h-3.5 w-3.5 text-gray-500 flex items-center justify-center", children: item.icon }),
|
|
1264
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-gray-700", children: item.label })
|
|
1265
|
-
]
|
|
1266
|
-
},
|
|
1267
|
-
item.id
|
|
1268
|
-
))
|
|
1483
|
+
item.id
|
|
1484
|
+
))
|
|
1485
|
+
] })
|
|
1269
1486
|
] })
|
|
1270
1487
|
] })
|
|
1271
|
-
]
|
|
1272
|
-
|
|
1273
|
-
|
|
1274
|
-
|
|
1488
|
+
]
|
|
1489
|
+
}
|
|
1490
|
+
),
|
|
1491
|
+
showFiltersPanel && filters && columns && onClearFilter && onClearFilters && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
1492
|
+
ActiveFiltersDisplay,
|
|
1493
|
+
{
|
|
1494
|
+
filters,
|
|
1495
|
+
columns,
|
|
1496
|
+
onClearFilter,
|
|
1497
|
+
onClearAllFilters: onClearFilters
|
|
1498
|
+
}
|
|
1499
|
+
)
|
|
1500
|
+
] });
|
|
1275
1501
|
};
|
|
1276
1502
|
SpreadsheetToolbar.displayName = "SpreadsheetToolbar";
|
|
1277
1503
|
|
|
@@ -1284,7 +1510,7 @@ function MdOutlinePushPin(props) {
|
|
|
1284
1510
|
}
|
|
1285
1511
|
|
|
1286
1512
|
// src/components/ColumnHeaderActions.tsx
|
|
1287
|
-
var
|
|
1513
|
+
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
1288
1514
|
function ColumnHeaderActions({
|
|
1289
1515
|
enableFiltering = false,
|
|
1290
1516
|
enableHighlighting = false,
|
|
@@ -1301,8 +1527,8 @@ function ColumnHeaderActions({
|
|
|
1301
1527
|
unpinnedTitle = "Pin column",
|
|
1302
1528
|
className
|
|
1303
1529
|
}) {
|
|
1304
|
-
return /* @__PURE__ */ (0,
|
|
1305
|
-
enableFiltering && onFilterClick && /* @__PURE__ */ (0,
|
|
1530
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: cn("flex items-center gap-0.5", className), children: [
|
|
1531
|
+
enableFiltering && onFilterClick && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
1306
1532
|
"button",
|
|
1307
1533
|
{
|
|
1308
1534
|
type: "button",
|
|
@@ -1315,10 +1541,10 @@ function ColumnHeaderActions({
|
|
|
1315
1541
|
hasActiveFilter ? "text-blue-600 opacity-100" : "text-gray-400 opacity-0 group-hover:opacity-100"
|
|
1316
1542
|
),
|
|
1317
1543
|
title: filterTitle,
|
|
1318
|
-
children: /* @__PURE__ */ (0,
|
|
1544
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(HiFilter, { className: "h-3 w-3" })
|
|
1319
1545
|
}
|
|
1320
1546
|
),
|
|
1321
|
-
enableHighlighting && onHighlightClick && /* @__PURE__ */ (0,
|
|
1547
|
+
enableHighlighting && onHighlightClick && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
1322
1548
|
"button",
|
|
1323
1549
|
{
|
|
1324
1550
|
type: "button",
|
|
@@ -1331,10 +1557,10 @@ function ColumnHeaderActions({
|
|
|
1331
1557
|
hasActiveHighlight ? "text-amber-500 opacity-100" : "text-gray-400 opacity-0 group-hover:opacity-100"
|
|
1332
1558
|
),
|
|
1333
1559
|
title: highlightTitle,
|
|
1334
|
-
children: /* @__PURE__ */ (0,
|
|
1560
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(AiFillHighlight, { className: "h-3 w-3" })
|
|
1335
1561
|
}
|
|
1336
1562
|
),
|
|
1337
|
-
enablePinning && onPinClick && /* @__PURE__ */ (0,
|
|
1563
|
+
enablePinning && onPinClick && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
1338
1564
|
"button",
|
|
1339
1565
|
{
|
|
1340
1566
|
type: "button",
|
|
@@ -1347,7 +1573,7 @@ function ColumnHeaderActions({
|
|
|
1347
1573
|
isPinned ? "text-blue-600 opacity-100" : "text-gray-400 opacity-0 group-hover:opacity-100"
|
|
1348
1574
|
),
|
|
1349
1575
|
title: isPinned ? pinnedTitle : unpinnedTitle,
|
|
1350
|
-
children: isPinned ? /* @__PURE__ */ (0,
|
|
1576
|
+
children: isPinned ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MdPushPin, { className: "h-3 w-3" }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MdOutlinePushPin, { className: "h-3 w-3" })
|
|
1351
1577
|
}
|
|
1352
1578
|
)
|
|
1353
1579
|
] });
|
|
@@ -1355,7 +1581,7 @@ function ColumnHeaderActions({
|
|
|
1355
1581
|
ColumnHeaderActions.displayName = "ColumnHeaderActions";
|
|
1356
1582
|
|
|
1357
1583
|
// src/components/SpreadsheetHeader.tsx
|
|
1358
|
-
var
|
|
1584
|
+
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
1359
1585
|
var cellPaddingCompact2 = "px-1 py-0.5";
|
|
1360
1586
|
var cellPaddingNormal2 = "px-2 py-1.5";
|
|
1361
1587
|
var SpreadsheetHeader = ({
|
|
@@ -1387,7 +1613,7 @@ var SpreadsheetHeader = ({
|
|
|
1387
1613
|
positionStyles.right = `${rightOffset}px`;
|
|
1388
1614
|
}
|
|
1389
1615
|
}
|
|
1390
|
-
return /* @__PURE__ */ (0,
|
|
1616
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
|
|
1391
1617
|
"th",
|
|
1392
1618
|
{
|
|
1393
1619
|
onClick: column.sortable ? onClick : void 0,
|
|
@@ -1408,20 +1634,26 @@ var SpreadsheetHeader = ({
|
|
|
1408
1634
|
// Pinned columns must have a fixed width so sticky offsets stay correct.
|
|
1409
1635
|
// Enforce MIN_PINNED_COLUMN_WIDTH so header actions (pin/filter/highlight) always fit.
|
|
1410
1636
|
...isPinned && {
|
|
1411
|
-
width: Math.max(
|
|
1412
|
-
|
|
1637
|
+
width: Math.max(
|
|
1638
|
+
column.minWidth || column.width || MIN_PINNED_COLUMN_WIDTH,
|
|
1639
|
+
MIN_PINNED_COLUMN_WIDTH
|
|
1640
|
+
),
|
|
1641
|
+
maxWidth: Math.max(
|
|
1642
|
+
column.minWidth || column.width || MIN_PINNED_COLUMN_WIDTH,
|
|
1643
|
+
MIN_PINNED_COLUMN_WIDTH
|
|
1644
|
+
)
|
|
1413
1645
|
},
|
|
1414
1646
|
top: 0,
|
|
1415
1647
|
// For sticky header
|
|
1416
1648
|
...positionStyles
|
|
1417
1649
|
},
|
|
1418
1650
|
children: [
|
|
1419
|
-
/* @__PURE__ */ (0,
|
|
1420
|
-
/* @__PURE__ */ (0,
|
|
1651
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center justify-between gap-1", children: [
|
|
1652
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "flex-1 flex items-center gap-1", children: [
|
|
1421
1653
|
column.label,
|
|
1422
|
-
isSorted && /* @__PURE__ */ (0,
|
|
1654
|
+
isSorted && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-blue-600", children: sortDirection === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(HiChevronUp, { className: "h-3 w-3" }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(HiChevronDown, { className: "h-3 w-3" }) })
|
|
1423
1655
|
] }),
|
|
1424
|
-
/* @__PURE__ */ (0,
|
|
1656
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
1425
1657
|
ColumnHeaderActions,
|
|
1426
1658
|
{
|
|
1427
1659
|
enableFiltering: column.filterable,
|
|
@@ -1444,7 +1676,7 @@ var SpreadsheetHeader = ({
|
|
|
1444
1676
|
SpreadsheetHeader.displayName = "SpreadsheetHeader";
|
|
1445
1677
|
|
|
1446
1678
|
// src/components/RowIndexColumnHeader.tsx
|
|
1447
|
-
var
|
|
1679
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
1448
1680
|
var cellPaddingCompact3 = "px-1 py-0.5";
|
|
1449
1681
|
var cellPaddingNormal3 = "px-2 py-1.5";
|
|
1450
1682
|
function RowIndexColumnHeader({
|
|
@@ -1458,7 +1690,7 @@ function RowIndexColumnHeader({
|
|
|
1458
1690
|
className
|
|
1459
1691
|
}) {
|
|
1460
1692
|
const cellPadding = compactMode ? cellPaddingCompact3 : cellPaddingNormal3;
|
|
1461
|
-
return /* @__PURE__ */ (0,
|
|
1693
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
1462
1694
|
"th",
|
|
1463
1695
|
{
|
|
1464
1696
|
className: cn(
|
|
@@ -1477,9 +1709,9 @@ function RowIndexColumnHeader({
|
|
|
1477
1709
|
left: isPinned ? 0 : void 0,
|
|
1478
1710
|
backgroundColor: highlightColor || "rgb(243 244 246)"
|
|
1479
1711
|
},
|
|
1480
|
-
children: /* @__PURE__ */ (0,
|
|
1481
|
-
/* @__PURE__ */ (0,
|
|
1482
|
-
/* @__PURE__ */ (0,
|
|
1712
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center justify-center gap-1", children: [
|
|
1713
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "#" }),
|
|
1714
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
1483
1715
|
ColumnHeaderActions,
|
|
1484
1716
|
{
|
|
1485
1717
|
enableHighlighting,
|
|
@@ -1682,7 +1914,7 @@ function useSpreadsheetHighlighting({
|
|
|
1682
1914
|
}
|
|
1683
1915
|
|
|
1684
1916
|
// src/components/ColorPickerPopover.tsx
|
|
1685
|
-
var
|
|
1917
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
1686
1918
|
function ColorPickerPopover({
|
|
1687
1919
|
title,
|
|
1688
1920
|
paletteType = "column",
|
|
@@ -1692,9 +1924,9 @@ function ColorPickerPopover({
|
|
|
1692
1924
|
className
|
|
1693
1925
|
}) {
|
|
1694
1926
|
const colorPalette = colors ?? [...HIGHLIGHT_COLORS[paletteType], null];
|
|
1695
|
-
return /* @__PURE__ */ (0,
|
|
1696
|
-
/* @__PURE__ */ (0,
|
|
1697
|
-
/* @__PURE__ */ (0,
|
|
1927
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: cn("bg-white rounded-lg shadow-xl p-4 w-64", className), children: [
|
|
1928
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h3", { className: "text-sm font-semibold mb-3", children: title }),
|
|
1929
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "grid grid-cols-5 gap-2", children: colorPalette.map((color) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
1698
1930
|
"button",
|
|
1699
1931
|
{
|
|
1700
1932
|
type: "button",
|
|
@@ -1709,7 +1941,7 @@ function ColorPickerPopover({
|
|
|
1709
1941
|
},
|
|
1710
1942
|
color || "clear"
|
|
1711
1943
|
)) }),
|
|
1712
|
-
/* @__PURE__ */ (0,
|
|
1944
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex justify-end mt-4", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
1713
1945
|
"button",
|
|
1714
1946
|
{
|
|
1715
1947
|
type: "button",
|
|
@@ -1724,7 +1956,7 @@ ColorPickerPopover.displayName = "ColorPickerPopover";
|
|
|
1724
1956
|
|
|
1725
1957
|
// src/components/SpreadsheetSettingsModal.tsx
|
|
1726
1958
|
var import_react8 = require("react");
|
|
1727
|
-
var
|
|
1959
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
1728
1960
|
var DEFAULT_SETTINGS = {
|
|
1729
1961
|
defaultPinnedColumns: [],
|
|
1730
1962
|
defaultSort: null,
|
|
@@ -1799,7 +2031,7 @@ var SpreadsheetSettingsModal = ({
|
|
|
1799
2031
|
{ id: "sorting", label: "Default Sorting", Icon: HiSortAscending },
|
|
1800
2032
|
{ id: "display", label: "Display Options", Icon: HiEye }
|
|
1801
2033
|
];
|
|
1802
|
-
return /* @__PURE__ */ (0,
|
|
2034
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
1803
2035
|
"div",
|
|
1804
2036
|
{
|
|
1805
2037
|
className: "fixed inset-0 bg-black/50 flex items-center justify-center z-50",
|
|
@@ -1807,7 +2039,7 @@ var SpreadsheetSettingsModal = ({
|
|
|
1807
2039
|
"aria-modal": "true",
|
|
1808
2040
|
"aria-labelledby": "settings-modal-title",
|
|
1809
2041
|
children: [
|
|
1810
|
-
/* @__PURE__ */ (0,
|
|
2042
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
1811
2043
|
"button",
|
|
1812
2044
|
{
|
|
1813
2045
|
type: "button",
|
|
@@ -1817,55 +2049,55 @@ var SpreadsheetSettingsModal = ({
|
|
|
1817
2049
|
"aria-label": "Close settings"
|
|
1818
2050
|
}
|
|
1819
2051
|
),
|
|
1820
|
-
/* @__PURE__ */ (0,
|
|
1821
|
-
/* @__PURE__ */ (0,
|
|
1822
|
-
/* @__PURE__ */ (0,
|
|
1823
|
-
/* @__PURE__ */ (0,
|
|
1824
|
-
/* @__PURE__ */ (0,
|
|
2052
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "bg-white rounded-lg w-[90%] max-w-[700px] max-h-[90vh] flex flex-col shadow-xl relative z-10", children: [
|
|
2053
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "px-6 py-5 border-b border-gray-200 flex items-center justify-between", children: [
|
|
2054
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-3", children: [
|
|
2055
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(HiCog, { className: "h-6 w-6 text-blue-600" }),
|
|
2056
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h2", { id: "settings-modal-title", className: "text-xl font-bold text-gray-900", children: title })
|
|
1825
2057
|
] }),
|
|
1826
|
-
/* @__PURE__ */ (0,
|
|
2058
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
1827
2059
|
"button",
|
|
1828
2060
|
{
|
|
1829
2061
|
type: "button",
|
|
1830
2062
|
onClick: onClose,
|
|
1831
2063
|
className: "p-2 hover:bg-gray-100 rounded-lg transition-colors text-gray-500 hover:text-gray-700",
|
|
1832
|
-
children: /* @__PURE__ */ (0,
|
|
2064
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(HiX, { className: "h-5 w-5" })
|
|
1833
2065
|
}
|
|
1834
2066
|
)
|
|
1835
2067
|
] }),
|
|
1836
|
-
/* @__PURE__ */ (0,
|
|
2068
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex border-b border-gray-200 px-6", children: tabs.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
1837
2069
|
"button",
|
|
1838
2070
|
{
|
|
1839
2071
|
type: "button",
|
|
1840
2072
|
onClick: () => setActiveTab(tab.id),
|
|
1841
2073
|
className: `px-4 py-3 flex items-center gap-2 text-sm font-medium transition-colors border-b-2 ${activeTab === tab.id ? "text-blue-600 border-blue-600" : "text-gray-500 border-transparent hover:text-gray-700"}`,
|
|
1842
2074
|
children: [
|
|
1843
|
-
/* @__PURE__ */ (0,
|
|
2075
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(tab.Icon, { className: "h-4 w-4" }),
|
|
1844
2076
|
tab.label
|
|
1845
2077
|
]
|
|
1846
2078
|
},
|
|
1847
2079
|
tab.id
|
|
1848
2080
|
)) }),
|
|
1849
|
-
/* @__PURE__ */ (0,
|
|
1850
|
-
activeTab === "columns" && /* @__PURE__ */ (0,
|
|
1851
|
-
/* @__PURE__ */ (0,
|
|
1852
|
-
/* @__PURE__ */ (0,
|
|
1853
|
-
/* @__PURE__ */ (0,
|
|
1854
|
-
/* @__PURE__ */ (0,
|
|
1855
|
-
/* @__PURE__ */ (0,
|
|
2081
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex-1 overflow-auto p-6", children: [
|
|
2082
|
+
activeTab === "columns" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
|
|
2083
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "p-4 bg-blue-50 border border-blue-200 rounded-lg mb-4 flex gap-3", children: [
|
|
2084
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(HiViewBoards, { className: "h-4 w-4 text-blue-600 shrink-0 mt-0.5" }),
|
|
2085
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
|
|
2086
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-sm font-semibold text-gray-900 mb-1", children: "About Pinned Columns" }),
|
|
2087
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-sm text-gray-600", children: "Pinned columns stay visible while you scroll horizontally through the table." })
|
|
1856
2088
|
] })
|
|
1857
2089
|
] }),
|
|
1858
|
-
/* @__PURE__ */ (0,
|
|
1859
|
-
/* @__PURE__ */ (0,
|
|
1860
|
-
/* @__PURE__ */ (0,
|
|
2090
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-sm text-gray-600 mb-4", children: "Select which columns should be pinned to the left by default." }),
|
|
2091
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2", children: [
|
|
2092
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
1861
2093
|
"button",
|
|
1862
2094
|
{
|
|
1863
2095
|
type: "button",
|
|
1864
2096
|
onClick: () => togglePinnedColumn("__row_index__"),
|
|
1865
2097
|
className: `flex items-center gap-2 p-3 rounded-lg border transition-colors text-left ${localSettings.defaultPinnedColumns.includes("__row_index__") ? "bg-blue-50 border-blue-300 text-blue-700" : "bg-gray-50 border-gray-200 text-gray-700 hover:border-blue-300"}`,
|
|
1866
2098
|
children: [
|
|
1867
|
-
/* @__PURE__ */ (0,
|
|
1868
|
-
/* @__PURE__ */ (0,
|
|
2099
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(HiViewBoards, { className: "h-4 w-4 shrink-0" }),
|
|
2100
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-sm flex-1 truncate", children: "# (Row Index)" })
|
|
1869
2101
|
]
|
|
1870
2102
|
}
|
|
1871
2103
|
),
|
|
@@ -1873,15 +2105,15 @@ var SpreadsheetSettingsModal = ({
|
|
|
1873
2105
|
const isPinned = localSettings.defaultPinnedColumns.includes(
|
|
1874
2106
|
column.id
|
|
1875
2107
|
);
|
|
1876
|
-
return /* @__PURE__ */ (0,
|
|
2108
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
1877
2109
|
"button",
|
|
1878
2110
|
{
|
|
1879
2111
|
type: "button",
|
|
1880
2112
|
onClick: () => togglePinnedColumn(column.id),
|
|
1881
2113
|
className: `flex items-center gap-2 p-3 rounded-lg border transition-colors text-left ${isPinned ? "bg-blue-50 border-blue-300 text-blue-700" : "bg-gray-50 border-gray-200 text-gray-700 hover:border-blue-300"}`,
|
|
1882
2114
|
children: [
|
|
1883
|
-
/* @__PURE__ */ (0,
|
|
1884
|
-
/* @__PURE__ */ (0,
|
|
2115
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(HiViewBoards, { className: "h-4 w-4 shrink-0" }),
|
|
2116
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-sm flex-1 truncate", children: column.label })
|
|
1885
2117
|
]
|
|
1886
2118
|
},
|
|
1887
2119
|
column.id
|
|
@@ -1889,12 +2121,12 @@ var SpreadsheetSettingsModal = ({
|
|
|
1889
2121
|
})
|
|
1890
2122
|
] })
|
|
1891
2123
|
] }),
|
|
1892
|
-
activeTab === "sorting" && /* @__PURE__ */ (0,
|
|
1893
|
-
/* @__PURE__ */ (0,
|
|
1894
|
-
/* @__PURE__ */ (0,
|
|
1895
|
-
/* @__PURE__ */ (0,
|
|
1896
|
-
/* @__PURE__ */ (0,
|
|
1897
|
-
/* @__PURE__ */ (0,
|
|
2124
|
+
activeTab === "sorting" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
|
|
2125
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-sm text-gray-600 mb-4", children: "Set the default column sorting when opening the spreadsheet." }),
|
|
2126
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-4", children: [
|
|
2127
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
|
|
2128
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "block text-sm font-medium text-gray-900 mb-2", children: "Sort Column" }),
|
|
2129
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
1898
2130
|
"select",
|
|
1899
2131
|
{
|
|
1900
2132
|
value: localSettings.defaultSort?.columnId || "",
|
|
@@ -1904,15 +2136,15 @@ var SpreadsheetSettingsModal = ({
|
|
|
1904
2136
|
),
|
|
1905
2137
|
className: "w-full p-3 text-sm bg-white border border-gray-300 rounded-lg text-gray-900 cursor-pointer focus:ring-2 focus:ring-blue-500 focus:border-blue-500",
|
|
1906
2138
|
children: [
|
|
1907
|
-
/* @__PURE__ */ (0,
|
|
1908
|
-
columns.filter((col) => col.sortable !== false).map((column) => /* @__PURE__ */ (0,
|
|
2139
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "", children: "No default sorting" }),
|
|
2140
|
+
columns.filter((col) => col.sortable !== false).map((column) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: column.id, children: column.label }, column.id))
|
|
1909
2141
|
]
|
|
1910
2142
|
}
|
|
1911
2143
|
)
|
|
1912
2144
|
] }),
|
|
1913
|
-
localSettings.defaultSort && /* @__PURE__ */ (0,
|
|
1914
|
-
/* @__PURE__ */ (0,
|
|
1915
|
-
/* @__PURE__ */ (0,
|
|
2145
|
+
localSettings.defaultSort && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
|
|
2146
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "block text-sm font-medium text-gray-900 mb-2", children: "Sort Direction" }),
|
|
2147
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
1916
2148
|
"select",
|
|
1917
2149
|
{
|
|
1918
2150
|
value: localSettings.defaultSort.direction,
|
|
@@ -1922,19 +2154,19 @@ var SpreadsheetSettingsModal = ({
|
|
|
1922
2154
|
),
|
|
1923
2155
|
className: "w-full p-3 text-sm bg-white border border-gray-300 rounded-lg text-gray-900 cursor-pointer focus:ring-2 focus:ring-blue-500 focus:border-blue-500",
|
|
1924
2156
|
children: [
|
|
1925
|
-
/* @__PURE__ */ (0,
|
|
1926
|
-
/* @__PURE__ */ (0,
|
|
2157
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "asc", children: "Ascending (A \u2192 Z, 0 \u2192 9)" }),
|
|
2158
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "desc", children: "Descending (Z \u2192 A, 9 \u2192 0)" })
|
|
1927
2159
|
]
|
|
1928
2160
|
}
|
|
1929
2161
|
)
|
|
1930
2162
|
] })
|
|
1931
2163
|
] })
|
|
1932
2164
|
] }),
|
|
1933
|
-
activeTab === "display" && /* @__PURE__ */ (0,
|
|
1934
|
-
/* @__PURE__ */ (0,
|
|
1935
|
-
/* @__PURE__ */ (0,
|
|
1936
|
-
/* @__PURE__ */ (0,
|
|
1937
|
-
/* @__PURE__ */ (0,
|
|
2165
|
+
activeTab === "display" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-5", children: [
|
|
2166
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-sm text-gray-600", children: "Customize the display and behavior of the spreadsheet." }),
|
|
2167
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
|
|
2168
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "block text-sm font-medium text-gray-900 mb-2", children: "Default Page Size" }),
|
|
2169
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
1938
2170
|
"select",
|
|
1939
2171
|
{
|
|
1940
2172
|
value: localSettings.defaultPageSize,
|
|
@@ -1943,20 +2175,20 @@ var SpreadsheetSettingsModal = ({
|
|
|
1943
2175
|
defaultPageSize: parseInt(e.target.value, 10)
|
|
1944
2176
|
}),
|
|
1945
2177
|
className: "w-full p-3 text-sm bg-white border border-gray-300 rounded-lg text-gray-900 cursor-pointer focus:ring-2 focus:ring-blue-500 focus:border-blue-500",
|
|
1946
|
-
children: pageSizeOptions.map((size) => /* @__PURE__ */ (0,
|
|
2178
|
+
children: pageSizeOptions.map((size) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("option", { value: size, children: [
|
|
1947
2179
|
size,
|
|
1948
2180
|
" rows"
|
|
1949
2181
|
] }, size))
|
|
1950
2182
|
}
|
|
1951
2183
|
)
|
|
1952
2184
|
] }),
|
|
1953
|
-
/* @__PURE__ */ (0,
|
|
1954
|
-
/* @__PURE__ */ (0,
|
|
2185
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
|
|
2186
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("label", { className: "block text-sm font-medium text-gray-900 mb-2", children: [
|
|
1955
2187
|
"Default Zoom Level: ",
|
|
1956
2188
|
localSettings.defaultZoom,
|
|
1957
2189
|
"%"
|
|
1958
2190
|
] }),
|
|
1959
|
-
/* @__PURE__ */ (0,
|
|
2191
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
1960
2192
|
"input",
|
|
1961
2193
|
{
|
|
1962
2194
|
type: "range",
|
|
@@ -1971,14 +2203,14 @@ var SpreadsheetSettingsModal = ({
|
|
|
1971
2203
|
className: "w-full cursor-pointer"
|
|
1972
2204
|
}
|
|
1973
2205
|
),
|
|
1974
|
-
/* @__PURE__ */ (0,
|
|
1975
|
-
/* @__PURE__ */ (0,
|
|
1976
|
-
/* @__PURE__ */ (0,
|
|
2206
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex justify-between mt-1 text-xs text-gray-500", children: [
|
|
2207
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: "50%" }),
|
|
2208
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: "150%" })
|
|
1977
2209
|
] })
|
|
1978
2210
|
] }),
|
|
1979
|
-
/* @__PURE__ */ (0,
|
|
1980
|
-
/* @__PURE__ */ (0,
|
|
1981
|
-
/* @__PURE__ */ (0,
|
|
2211
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-3", children: [
|
|
2212
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("label", { className: "flex items-center gap-3 p-4 bg-gray-50 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-100 transition-colors", children: [
|
|
2213
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
1982
2214
|
"input",
|
|
1983
2215
|
{
|
|
1984
2216
|
type: "checkbox",
|
|
@@ -1987,13 +2219,13 @@ var SpreadsheetSettingsModal = ({
|
|
|
1987
2219
|
className: "w-5 h-5 cursor-pointer rounded border-gray-300 text-blue-600 focus:ring-blue-500"
|
|
1988
2220
|
}
|
|
1989
2221
|
),
|
|
1990
|
-
/* @__PURE__ */ (0,
|
|
1991
|
-
/* @__PURE__ */ (0,
|
|
1992
|
-
/* @__PURE__ */ (0,
|
|
2222
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex-1", children: [
|
|
2223
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "text-sm font-medium text-gray-900", children: "Auto-save changes" }),
|
|
2224
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "text-sm text-gray-500 mt-0.5", children: "Automatically save changes without confirmation" })
|
|
1993
2225
|
] })
|
|
1994
2226
|
] }),
|
|
1995
|
-
/* @__PURE__ */ (0,
|
|
1996
|
-
/* @__PURE__ */ (0,
|
|
2227
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("label", { className: "flex items-center gap-3 p-4 bg-gray-50 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-100 transition-colors", children: [
|
|
2228
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
1997
2229
|
"input",
|
|
1998
2230
|
{
|
|
1999
2231
|
type: "checkbox",
|
|
@@ -2005,16 +2237,16 @@ var SpreadsheetSettingsModal = ({
|
|
|
2005
2237
|
className: "w-5 h-5 cursor-pointer rounded border-gray-300 text-blue-600 focus:ring-blue-500"
|
|
2006
2238
|
}
|
|
2007
2239
|
),
|
|
2008
|
-
/* @__PURE__ */ (0,
|
|
2009
|
-
/* @__PURE__ */ (0,
|
|
2010
|
-
/* @__PURE__ */ (0,
|
|
2240
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex-1", children: [
|
|
2241
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "text-sm font-medium text-gray-900", children: "Compact view" }),
|
|
2242
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "text-sm text-gray-500 mt-0.5", children: "Reduce padding and spacing to show more rows on screen" })
|
|
2011
2243
|
] })
|
|
2012
2244
|
] })
|
|
2013
2245
|
] })
|
|
2014
2246
|
] })
|
|
2015
2247
|
] }),
|
|
2016
|
-
/* @__PURE__ */ (0,
|
|
2017
|
-
/* @__PURE__ */ (0,
|
|
2248
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "px-6 py-4 border-t border-gray-200 flex justify-between items-center gap-3", children: [
|
|
2249
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
2018
2250
|
"button",
|
|
2019
2251
|
{
|
|
2020
2252
|
type: "button",
|
|
@@ -2023,8 +2255,8 @@ var SpreadsheetSettingsModal = ({
|
|
|
2023
2255
|
children: "Reset to Defaults"
|
|
2024
2256
|
}
|
|
2025
2257
|
),
|
|
2026
|
-
/* @__PURE__ */ (0,
|
|
2027
|
-
/* @__PURE__ */ (0,
|
|
2258
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex gap-2", children: [
|
|
2259
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
2028
2260
|
"button",
|
|
2029
2261
|
{
|
|
2030
2262
|
type: "button",
|
|
@@ -2033,7 +2265,7 @@ var SpreadsheetSettingsModal = ({
|
|
|
2033
2265
|
children: "Cancel"
|
|
2034
2266
|
}
|
|
2035
2267
|
),
|
|
2036
|
-
/* @__PURE__ */ (0,
|
|
2268
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
2037
2269
|
"button",
|
|
2038
2270
|
{
|
|
2039
2271
|
type: "button",
|
|
@@ -2053,7 +2285,7 @@ SpreadsheetSettingsModal.displayName = "SpreadsheetSettingsModal";
|
|
|
2053
2285
|
|
|
2054
2286
|
// src/components/CommentModals.tsx
|
|
2055
2287
|
var import_react9 = require("react");
|
|
2056
|
-
var
|
|
2288
|
+
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
2057
2289
|
function AddCommentModal({ isOpen, columnLabel, onAdd, onClose }) {
|
|
2058
2290
|
const [commentText, setCommentText] = (0, import_react9.useState)("");
|
|
2059
2291
|
(0, import_react9.useEffect)(() => {
|
|
@@ -2072,12 +2304,12 @@ function AddCommentModal({ isOpen, columnLabel, onAdd, onClose }) {
|
|
|
2072
2304
|
setCommentText("");
|
|
2073
2305
|
onClose();
|
|
2074
2306
|
};
|
|
2075
|
-
return /* @__PURE__ */ (0,
|
|
2076
|
-
/* @__PURE__ */ (0,
|
|
2307
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "bg-white rounded-lg shadow-xl p-6 w-96 max-w-full mx-4", children: [
|
|
2308
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("h3", { className: "text-lg font-semibold mb-4", children: [
|
|
2077
2309
|
"Add Comment",
|
|
2078
2310
|
columnLabel ? ` - ${columnLabel}` : ""
|
|
2079
2311
|
] }),
|
|
2080
|
-
/* @__PURE__ */ (0,
|
|
2312
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
2081
2313
|
"textarea",
|
|
2082
2314
|
{
|
|
2083
2315
|
value: commentText,
|
|
@@ -2091,8 +2323,8 @@ function AddCommentModal({ isOpen, columnLabel, onAdd, onClose }) {
|
|
|
2091
2323
|
autoFocus: true
|
|
2092
2324
|
}
|
|
2093
2325
|
),
|
|
2094
|
-
/* @__PURE__ */ (0,
|
|
2095
|
-
/* @__PURE__ */ (0,
|
|
2326
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex justify-end gap-2 mt-4", children: [
|
|
2327
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
2096
2328
|
"button",
|
|
2097
2329
|
{
|
|
2098
2330
|
type: "button",
|
|
@@ -2101,7 +2333,7 @@ function AddCommentModal({ isOpen, columnLabel, onAdd, onClose }) {
|
|
|
2101
2333
|
children: "Cancel"
|
|
2102
2334
|
}
|
|
2103
2335
|
),
|
|
2104
|
-
/* @__PURE__ */ (0,
|
|
2336
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
2105
2337
|
"button",
|
|
2106
2338
|
{
|
|
2107
2339
|
type: "button",
|
|
@@ -2124,13 +2356,13 @@ function ViewCommentsModal({
|
|
|
2124
2356
|
onClose
|
|
2125
2357
|
}) {
|
|
2126
2358
|
if (!isOpen) return null;
|
|
2127
|
-
return /* @__PURE__ */ (0,
|
|
2128
|
-
/* @__PURE__ */ (0,
|
|
2129
|
-
/* @__PURE__ */ (0,
|
|
2359
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "bg-white rounded-lg shadow-xl p-6 w-[480px] max-w-full mx-4 max-h-[80vh] flex flex-col", children: [
|
|
2360
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center justify-between mb-4", children: [
|
|
2361
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("h3", { className: "text-lg font-semibold", children: [
|
|
2130
2362
|
"Comments",
|
|
2131
2363
|
columnLabel ? ` - ${columnLabel}` : ""
|
|
2132
2364
|
] }),
|
|
2133
|
-
/* @__PURE__ */ (0,
|
|
2365
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
2134
2366
|
"button",
|
|
2135
2367
|
{
|
|
2136
2368
|
type: "button",
|
|
@@ -2140,8 +2372,8 @@ function ViewCommentsModal({
|
|
|
2140
2372
|
}
|
|
2141
2373
|
)
|
|
2142
2374
|
] }),
|
|
2143
|
-
/* @__PURE__ */ (0,
|
|
2144
|
-
comments.map((comment) => /* @__PURE__ */ (0,
|
|
2375
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex-1 overflow-y-auto space-y-3", children: [
|
|
2376
|
+
comments.map((comment) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
|
|
2145
2377
|
"div",
|
|
2146
2378
|
{
|
|
2147
2379
|
className: cn(
|
|
@@ -2149,9 +2381,9 @@ function ViewCommentsModal({
|
|
|
2149
2381
|
comment.resolved ? "bg-gray-50 border-gray-200" : "bg-yellow-50 border-yellow-200"
|
|
2150
2382
|
),
|
|
2151
2383
|
children: [
|
|
2152
|
-
/* @__PURE__ */ (0,
|
|
2153
|
-
/* @__PURE__ */ (0,
|
|
2154
|
-
/* @__PURE__ */ (0,
|
|
2384
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-start justify-between gap-2", children: [
|
|
2385
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-sm text-gray-700", children: comment.text }),
|
|
2386
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
2155
2387
|
"button",
|
|
2156
2388
|
{
|
|
2157
2389
|
type: "button",
|
|
@@ -2164,23 +2396,23 @@ function ViewCommentsModal({
|
|
|
2164
2396
|
}
|
|
2165
2397
|
)
|
|
2166
2398
|
] }),
|
|
2167
|
-
/* @__PURE__ */ (0,
|
|
2168
|
-
comment.author && /* @__PURE__ */ (0,
|
|
2169
|
-
/* @__PURE__ */ (0,
|
|
2399
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-2 mt-2 text-xs text-gray-500", children: [
|
|
2400
|
+
comment.author && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: comment.author }),
|
|
2401
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: new Date(comment.timestamp).toLocaleString() })
|
|
2170
2402
|
] })
|
|
2171
2403
|
]
|
|
2172
2404
|
},
|
|
2173
2405
|
comment.id
|
|
2174
2406
|
)),
|
|
2175
|
-
comments.length === 0 && /* @__PURE__ */ (0,
|
|
2407
|
+
comments.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-center text-gray-500 py-8", children: "No comments for this cell." })
|
|
2176
2408
|
] }),
|
|
2177
|
-
onAddComment && /* @__PURE__ */ (0,
|
|
2409
|
+
onAddComment && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "mt-4 pt-4 border-t border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
2178
2410
|
"button",
|
|
2179
2411
|
{
|
|
2180
2412
|
type: "button",
|
|
2181
2413
|
onClick: onAddComment,
|
|
2182
2414
|
className: "w-full px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors flex items-center justify-center gap-2",
|
|
2183
|
-
children: /* @__PURE__ */ (0,
|
|
2415
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: "+ Add Comment" })
|
|
2184
2416
|
}
|
|
2185
2417
|
) })
|
|
2186
2418
|
] }) });
|
|
@@ -2195,11 +2427,11 @@ function DeleteConfirmationModal({
|
|
|
2195
2427
|
onClose
|
|
2196
2428
|
}) {
|
|
2197
2429
|
if (!isOpen) return null;
|
|
2198
|
-
return /* @__PURE__ */ (0,
|
|
2199
|
-
/* @__PURE__ */ (0,
|
|
2200
|
-
/* @__PURE__ */ (0,
|
|
2201
|
-
/* @__PURE__ */ (0,
|
|
2202
|
-
/* @__PURE__ */ (0,
|
|
2430
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "bg-white rounded-lg shadow-xl p-6 w-96 max-w-full mx-4", children: [
|
|
2431
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h3", { className: "text-lg font-semibold mb-2", children: title }),
|
|
2432
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-gray-600 mb-6", children: message }),
|
|
2433
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex justify-end gap-2", children: [
|
|
2434
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
2203
2435
|
"button",
|
|
2204
2436
|
{
|
|
2205
2437
|
type: "button",
|
|
@@ -2208,7 +2440,7 @@ function DeleteConfirmationModal({
|
|
|
2208
2440
|
children: "Cancel"
|
|
2209
2441
|
}
|
|
2210
2442
|
),
|
|
2211
|
-
/* @__PURE__ */ (0,
|
|
2443
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
2212
2444
|
"button",
|
|
2213
2445
|
{
|
|
2214
2446
|
type: "button",
|
|
@@ -2227,50 +2459,50 @@ DeleteConfirmationModal.displayName = "DeleteConfirmationModal";
|
|
|
2227
2459
|
|
|
2228
2460
|
// src/components/KeyboardShortcutsModal.tsx
|
|
2229
2461
|
var import_react10 = __toESM(require("react"));
|
|
2230
|
-
var
|
|
2462
|
+
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
2231
2463
|
function KeyboardShortcutsModal({
|
|
2232
2464
|
isOpen,
|
|
2233
2465
|
onClose,
|
|
2234
2466
|
shortcuts
|
|
2235
2467
|
}) {
|
|
2236
2468
|
if (!isOpen) return null;
|
|
2237
|
-
return /* @__PURE__ */ (0,
|
|
2238
|
-
/* @__PURE__ */ (0,
|
|
2239
|
-
/* @__PURE__ */ (0,
|
|
2240
|
-
/* @__PURE__ */ (0,
|
|
2469
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "fixed inset-0 bg-black/50 flex items-center justify-center z-50", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "bg-white rounded-lg shadow-xl p-6 w-full max-w-2xl max-h-[80vh] overflow-y-auto mx-4", children: [
|
|
2470
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center justify-between mb-4", children: [
|
|
2471
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("h3", { className: "text-xl font-bold text-gray-900", children: "Keyboard Shortcuts" }),
|
|
2472
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
2241
2473
|
"button",
|
|
2242
2474
|
{
|
|
2243
2475
|
type: "button",
|
|
2244
2476
|
onClick: onClose,
|
|
2245
2477
|
className: "p-1 hover:bg-gray-100 rounded",
|
|
2246
|
-
children: /* @__PURE__ */ (0,
|
|
2478
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-gray-500 text-xl", children: "\u2715" })
|
|
2247
2479
|
}
|
|
2248
2480
|
)
|
|
2249
2481
|
] }),
|
|
2250
|
-
/* @__PURE__ */ (0,
|
|
2251
|
-
/* @__PURE__ */ (0,
|
|
2252
|
-
/* @__PURE__ */ (0,
|
|
2253
|
-
/* @__PURE__ */ (0,
|
|
2254
|
-
/* @__PURE__ */ (0,
|
|
2255
|
-
/* @__PURE__ */ (0,
|
|
2256
|
-
/* @__PURE__ */ (0,
|
|
2257
|
-
/* @__PURE__ */ (0,
|
|
2482
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "space-y-6", children: [
|
|
2483
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ShortcutSection, { title: "General", children: shortcuts.general.map((shortcut, index) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ShortcutRow, { label: shortcut.label, keys: shortcut.keys }, index)) }),
|
|
2484
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ShortcutSection, { title: "Row Selection", children: shortcuts.rowSelection.map((shortcut, index) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ShortcutRow, { label: shortcut.label, keys: shortcut.keys }, index)) }),
|
|
2485
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ShortcutSection, { title: "Editing", children: shortcuts.editing.map((shortcut, index) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ShortcutRow, { label: shortcut.label, keys: shortcut.keys }, index)) }),
|
|
2486
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ShortcutSection, { title: "Cell Navigation", children: shortcuts.navigation.map((shortcut, index) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ShortcutRow, { label: shortcut.label, keys: shortcut.keys }, index)) }),
|
|
2487
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ShortcutSection, { title: "Row Actions (hover over row #)", children: shortcuts.rowActions.map((action, index) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center justify-between", children: [
|
|
2488
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-gray-600 text-sm", children: action.label }),
|
|
2489
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-gray-500 text-xs", children: action.description })
|
|
2258
2490
|
] }, index)) })
|
|
2259
2491
|
] })
|
|
2260
2492
|
] }) });
|
|
2261
2493
|
}
|
|
2262
2494
|
function ShortcutSection({ title, children }) {
|
|
2263
|
-
return /* @__PURE__ */ (0,
|
|
2264
|
-
/* @__PURE__ */ (0,
|
|
2265
|
-
/* @__PURE__ */ (0,
|
|
2495
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { children: [
|
|
2496
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("h4", { className: "text-gray-900 font-semibold mb-3", children: title }),
|
|
2497
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "space-y-2", children })
|
|
2266
2498
|
] });
|
|
2267
2499
|
}
|
|
2268
2500
|
function ShortcutRow({ label, keys }) {
|
|
2269
|
-
return /* @__PURE__ */ (0,
|
|
2270
|
-
/* @__PURE__ */ (0,
|
|
2271
|
-
/* @__PURE__ */ (0,
|
|
2272
|
-
index > 0 && /* @__PURE__ */ (0,
|
|
2273
|
-
key.includes("Click") ? /* @__PURE__ */ (0,
|
|
2501
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center justify-between", children: [
|
|
2502
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-gray-600 text-sm", children: label }),
|
|
2503
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "flex items-center gap-1", children: keys.map((key, index) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react10.default.Fragment, { children: [
|
|
2504
|
+
index > 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-gray-400", children: "+" }),
|
|
2505
|
+
key.includes("Click") ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-gray-500 text-xs", children: key }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("kbd", { className: "px-2 py-1 bg-gray-100 text-gray-800 rounded text-xs border border-gray-200", children: key })
|
|
2274
2506
|
] }, index)) })
|
|
2275
2507
|
] });
|
|
2276
2508
|
}
|
|
@@ -2279,7 +2511,7 @@ KeyboardShortcutsModal.displayName = "KeyboardShortcutsModal";
|
|
|
2279
2511
|
// src/components/RowContextMenu.tsx
|
|
2280
2512
|
var import_react11 = require("react");
|
|
2281
2513
|
var import_design_system = require("@xcelsior/design-system");
|
|
2282
|
-
var
|
|
2514
|
+
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
2283
2515
|
function RowContextMenu({
|
|
2284
2516
|
row,
|
|
2285
2517
|
rowId,
|
|
@@ -2293,10 +2525,10 @@ function RowContextMenu({
|
|
|
2293
2525
|
if (visibleItems.length === 0) {
|
|
2294
2526
|
return null;
|
|
2295
2527
|
}
|
|
2296
|
-
return /* @__PURE__ */ (0,
|
|
2528
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
2297
2529
|
import_design_system.ContextMenu,
|
|
2298
2530
|
{
|
|
2299
|
-
trigger: /* @__PURE__ */ (0,
|
|
2531
|
+
trigger: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
2300
2532
|
"button",
|
|
2301
2533
|
{
|
|
2302
2534
|
type: "button",
|
|
@@ -2305,7 +2537,7 @@ function RowContextMenu({
|
|
|
2305
2537
|
className
|
|
2306
2538
|
),
|
|
2307
2539
|
title: "More actions",
|
|
2308
|
-
children: /* @__PURE__ */ (0,
|
|
2540
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
2309
2541
|
HiDotsVertical,
|
|
2310
2542
|
{
|
|
2311
2543
|
className: cn("text-gray-500", compactMode ? "h-2.5 w-2.5" : "h-3 w-3")
|
|
@@ -2317,7 +2549,7 @@ function RowContextMenu({
|
|
|
2317
2549
|
children: visibleItems.map((item) => {
|
|
2318
2550
|
const isDisabled = item.disabled?.(row);
|
|
2319
2551
|
const variantClass = item.variant === "destructive" ? "text-red-600 hover:bg-red-50" : "";
|
|
2320
|
-
return /* @__PURE__ */ (0,
|
|
2552
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
|
|
2321
2553
|
import_design_system.ContextMenuItem,
|
|
2322
2554
|
{
|
|
2323
2555
|
onClick: (e) => {
|
|
@@ -2327,7 +2559,7 @@ function RowContextMenu({
|
|
|
2327
2559
|
disabled: isDisabled,
|
|
2328
2560
|
className: `${variantClass} ${item.className || ""}`,
|
|
2329
2561
|
children: [
|
|
2330
|
-
item.icon && /* @__PURE__ */ (0,
|
|
2562
|
+
item.icon && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "mr-2", children: item.icon }),
|
|
2331
2563
|
item.label
|
|
2332
2564
|
]
|
|
2333
2565
|
},
|
|
@@ -2344,7 +2576,7 @@ var import_design_system2 = require("@xcelsior/design-system");
|
|
|
2344
2576
|
|
|
2345
2577
|
// src/hooks/useSpreadsheetFiltering.ts
|
|
2346
2578
|
var import_react12 = require("react");
|
|
2347
|
-
var
|
|
2579
|
+
var import_utils11 = require("@xcelsior/utils");
|
|
2348
2580
|
function useSpreadsheetFiltering({
|
|
2349
2581
|
data,
|
|
2350
2582
|
columns,
|
|
@@ -2542,13 +2774,13 @@ function useSpreadsheetFiltering({
|
|
|
2542
2774
|
[sortConfig?.columnId]
|
|
2543
2775
|
);
|
|
2544
2776
|
const filteredData = (0, import_react12.useMemo)(() => {
|
|
2545
|
-
if (!data || !Array.isArray(data)) return
|
|
2777
|
+
if (!data || !Array.isArray(data)) return import_utils11.LazyArray.empty();
|
|
2546
2778
|
if (serverSide) {
|
|
2547
|
-
return
|
|
2779
|
+
return import_utils11.LazyArray.from(data);
|
|
2548
2780
|
}
|
|
2549
|
-
if (!columns || !Array.isArray(columns)) return
|
|
2550
|
-
let lazyResult =
|
|
2551
|
-
const filterChain = new
|
|
2781
|
+
if (!columns || !Array.isArray(columns)) return import_utils11.LazyArray.from(data);
|
|
2782
|
+
let lazyResult = import_utils11.LazyArray.from(data);
|
|
2783
|
+
const filterChain = new import_utils11.FilterChain();
|
|
2552
2784
|
for (const [columnId, filter] of Object.entries(filters)) {
|
|
2553
2785
|
if (!filter) continue;
|
|
2554
2786
|
const column = columns.find((c) => c.id === columnId);
|
|
@@ -3426,7 +3658,7 @@ function useSpreadsheetSelection({
|
|
|
3426
3658
|
}
|
|
3427
3659
|
|
|
3428
3660
|
// src/components/Spreadsheet.tsx
|
|
3429
|
-
var
|
|
3661
|
+
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
3430
3662
|
function Spreadsheet({
|
|
3431
3663
|
data,
|
|
3432
3664
|
columns,
|
|
@@ -3557,6 +3789,7 @@ function Spreadsheet({
|
|
|
3557
3789
|
onToggleCommentResolved
|
|
3558
3790
|
});
|
|
3559
3791
|
const [showSettingsModal, setShowSettingsModal] = (0, import_react17.useState)(false);
|
|
3792
|
+
const [showFiltersPanel, setShowFiltersPanel] = (0, import_react17.useState)(false);
|
|
3560
3793
|
const {
|
|
3561
3794
|
canUndo,
|
|
3562
3795
|
canRedo,
|
|
@@ -3603,6 +3836,23 @@ function Spreadsheet({
|
|
|
3603
3836
|
},
|
|
3604
3837
|
[controlledPageSize, controlledCurrentPage, onPageChange]
|
|
3605
3838
|
);
|
|
3839
|
+
const resetPaginationToFirstPage = (0, import_react17.useCallback)(() => {
|
|
3840
|
+
if (controlledCurrentPage === void 0) {
|
|
3841
|
+
setInternalCurrentPage(1);
|
|
3842
|
+
}
|
|
3843
|
+
onPageChange?.(1, pageSize);
|
|
3844
|
+
}, [controlledCurrentPage, onPageChange, pageSize]);
|
|
3845
|
+
const handleFilterChangeWithReset = (0, import_react17.useCallback)(
|
|
3846
|
+
(columnId, filter) => {
|
|
3847
|
+
handleFilterChange(columnId, filter);
|
|
3848
|
+
resetPaginationToFirstPage();
|
|
3849
|
+
},
|
|
3850
|
+
[handleFilterChange, resetPaginationToFirstPage]
|
|
3851
|
+
);
|
|
3852
|
+
const clearAllFiltersWithReset = (0, import_react17.useCallback)(() => {
|
|
3853
|
+
clearAllFilters();
|
|
3854
|
+
resetPaginationToFirstPage();
|
|
3855
|
+
}, [clearAllFilters, resetPaginationToFirstPage]);
|
|
3606
3856
|
(0, import_react17.useEffect)(() => {
|
|
3607
3857
|
setSpreadsheetSettings((prev) => ({
|
|
3608
3858
|
...prev,
|
|
@@ -4001,8 +4251,8 @@ function Spreadsheet({
|
|
|
4001
4251
|
);
|
|
4002
4252
|
return [...leftPinned, ...groups, ...rightPinned];
|
|
4003
4253
|
}, [columnGroups, collapsedGroups, columns, pinnedColumns]);
|
|
4004
|
-
return /* @__PURE__ */ (0,
|
|
4005
|
-
showToolbar && /* @__PURE__ */ (0,
|
|
4254
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: cn("flex flex-col h-full bg-white", className), children: [
|
|
4255
|
+
showToolbar && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
4006
4256
|
SpreadsheetToolbar,
|
|
4007
4257
|
{
|
|
4008
4258
|
zoom,
|
|
@@ -4015,7 +4265,12 @@ function Spreadsheet({
|
|
|
4015
4265
|
saveStatus,
|
|
4016
4266
|
autoSave: spreadsheetSettings.autoSave,
|
|
4017
4267
|
hasActiveFilters,
|
|
4018
|
-
onClearFilters:
|
|
4268
|
+
onClearFilters: clearAllFiltersWithReset,
|
|
4269
|
+
filters,
|
|
4270
|
+
columns,
|
|
4271
|
+
onClearFilter: (columnId) => handleFilterChangeWithReset(columnId, void 0),
|
|
4272
|
+
showFiltersPanel,
|
|
4273
|
+
onToggleFiltersPanel: () => setShowFiltersPanel(!showFiltersPanel),
|
|
4019
4274
|
onZoomIn: () => setZoom((z) => Math.min(z + 10, 200)),
|
|
4020
4275
|
onZoomOut: () => setZoom((z) => Math.max(z - 10, 50)),
|
|
4021
4276
|
onZoomReset: () => setZoom(100),
|
|
@@ -4032,16 +4287,16 @@ function Spreadsheet({
|
|
|
4032
4287
|
menuItems: toolbarMenuItems
|
|
4033
4288
|
}
|
|
4034
4289
|
),
|
|
4035
|
-
/* @__PURE__ */ (0,
|
|
4290
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { ref: tableRef, className: "flex-1 overflow-auto border border-gray-200 rounded", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
4036
4291
|
"div",
|
|
4037
4292
|
{
|
|
4038
4293
|
style: {
|
|
4039
4294
|
zoom: zoom / 100
|
|
4040
4295
|
},
|
|
4041
|
-
children: /* @__PURE__ */ (0,
|
|
4042
|
-
/* @__PURE__ */ (0,
|
|
4043
|
-
columnGroups && groupHeaderItems && /* @__PURE__ */ (0,
|
|
4044
|
-
/* @__PURE__ */ (0,
|
|
4296
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("table", { className: "border-separate border-spacing-0 text-xs select-none", children: [
|
|
4297
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("thead", { children: [
|
|
4298
|
+
columnGroups && groupHeaderItems && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("tr", { children: [
|
|
4299
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
4045
4300
|
RowIndexColumnHeader,
|
|
4046
4301
|
{
|
|
4047
4302
|
enableHighlighting,
|
|
@@ -4057,7 +4312,11 @@ function Spreadsheet({
|
|
|
4057
4312
|
if (item.type === "pinned-column") {
|
|
4058
4313
|
const col = columns.find((c) => c.id === item.columnId);
|
|
4059
4314
|
const isPinnedLeft = item.pinSide === "left";
|
|
4060
|
-
|
|
4315
|
+
const pinnedWidth = Math.max(
|
|
4316
|
+
col?.minWidth || col?.width || MIN_PINNED_COLUMN_WIDTH,
|
|
4317
|
+
MIN_PINNED_COLUMN_WIDTH
|
|
4318
|
+
);
|
|
4319
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
4061
4320
|
"th",
|
|
4062
4321
|
{
|
|
4063
4322
|
className: cn(
|
|
@@ -4069,16 +4328,14 @@ function Spreadsheet({
|
|
|
4069
4328
|
position: "sticky",
|
|
4070
4329
|
left: isPinnedLeft ? `${getColumnLeftOffset(item.columnId)}px` : void 0,
|
|
4071
4330
|
right: !isPinnedLeft ? `${getColumnRightOffset(item.columnId)}px` : void 0,
|
|
4072
|
-
minWidth:
|
|
4073
|
-
width: Math.max(col?.minWidth || col?.width || MIN_PINNED_COLUMN_WIDTH, MIN_PINNED_COLUMN_WIDTH),
|
|
4074
|
-
maxWidth: Math.max(col?.minWidth || col?.width || MIN_PINNED_COLUMN_WIDTH, MIN_PINNED_COLUMN_WIDTH)
|
|
4331
|
+
minWidth: pinnedWidth
|
|
4075
4332
|
}
|
|
4076
4333
|
},
|
|
4077
4334
|
`pinned-group-${item.columnId}`
|
|
4078
4335
|
);
|
|
4079
4336
|
}
|
|
4080
4337
|
const { group, colSpan, isCollapsed } = item;
|
|
4081
|
-
return /* @__PURE__ */ (0,
|
|
4338
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
4082
4339
|
"th",
|
|
4083
4340
|
{
|
|
4084
4341
|
colSpan,
|
|
@@ -4090,17 +4347,17 @@ function Spreadsheet({
|
|
|
4090
4347
|
backgroundColor: group.headerColor || "rgb(243 244 246)"
|
|
4091
4348
|
},
|
|
4092
4349
|
onClick: () => group.collapsible && handleToggleGroupCollapse(group.id),
|
|
4093
|
-
children: /* @__PURE__ */ (0,
|
|
4094
|
-
group.collapsible && (isCollapsed ? /* @__PURE__ */ (0,
|
|
4095
|
-
/* @__PURE__ */ (0,
|
|
4350
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center justify-center gap-1", children: [
|
|
4351
|
+
group.collapsible && (isCollapsed ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(HiChevronRight, { className: "h-3 w-3" }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(HiChevronDown, { className: "h-3 w-3" })),
|
|
4352
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: group.label })
|
|
4096
4353
|
] })
|
|
4097
4354
|
},
|
|
4098
4355
|
group.id
|
|
4099
4356
|
);
|
|
4100
4357
|
})
|
|
4101
4358
|
] }),
|
|
4102
|
-
/* @__PURE__ */ (0,
|
|
4103
|
-
!columnGroups && /* @__PURE__ */ (0,
|
|
4359
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("tr", { children: [
|
|
4360
|
+
!columnGroups && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
4104
4361
|
RowIndexColumnHeader,
|
|
4105
4362
|
{
|
|
4106
4363
|
enableHighlighting,
|
|
@@ -4114,7 +4371,7 @@ function Spreadsheet({
|
|
|
4114
4371
|
),
|
|
4115
4372
|
columnRenderItems.map((item) => {
|
|
4116
4373
|
if (item.type === "collapsed-placeholder") {
|
|
4117
|
-
return /* @__PURE__ */ (0,
|
|
4374
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
4118
4375
|
"th",
|
|
4119
4376
|
{
|
|
4120
4377
|
className: "border border-gray-200 px-2 py-1 text-center text-gray-400",
|
|
@@ -4130,7 +4387,7 @@ function Spreadsheet({
|
|
|
4130
4387
|
const column = item.column;
|
|
4131
4388
|
const isPinnedLeft = isColumnPinned(column.id) && getColumnPinSide(column.id) === "left";
|
|
4132
4389
|
const isPinnedRight = isColumnPinned(column.id) && getColumnPinSide(column.id) === "right";
|
|
4133
|
-
return /* @__PURE__ */ (0,
|
|
4390
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
4134
4391
|
SpreadsheetHeader,
|
|
4135
4392
|
{
|
|
4136
4393
|
column,
|
|
@@ -4148,12 +4405,12 @@ function Spreadsheet({
|
|
|
4148
4405
|
),
|
|
4149
4406
|
onPinClick: () => handleTogglePin(column.id),
|
|
4150
4407
|
onHighlightClick: enableHighlighting ? () => setHighlightPickerColumn(column.id) : void 0,
|
|
4151
|
-
children: activeFilterColumn === column.id && /* @__PURE__ */ (0,
|
|
4408
|
+
children: activeFilterColumn === column.id && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
4152
4409
|
SpreadsheetFilterDropdown,
|
|
4153
4410
|
{
|
|
4154
4411
|
column,
|
|
4155
4412
|
filter: filters[column.id],
|
|
4156
|
-
onFilterChange: (filter) =>
|
|
4413
|
+
onFilterChange: (filter) => handleFilterChangeWithReset(column.id, filter),
|
|
4157
4414
|
onClose: () => setActiveFilterColumn(null)
|
|
4158
4415
|
}
|
|
4159
4416
|
)
|
|
@@ -4163,17 +4420,17 @@ function Spreadsheet({
|
|
|
4163
4420
|
})
|
|
4164
4421
|
] })
|
|
4165
4422
|
] }),
|
|
4166
|
-
/* @__PURE__ */ (0,
|
|
4423
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("tbody", { children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
4167
4424
|
"td",
|
|
4168
4425
|
{
|
|
4169
4426
|
colSpan: columnRenderItems.length + 1,
|
|
4170
4427
|
className: "text-center py-8 text-gray-500",
|
|
4171
|
-
children: /* @__PURE__ */ (0,
|
|
4172
|
-
/* @__PURE__ */ (0,
|
|
4428
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center justify-center gap-2", children: [
|
|
4429
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "w-4 h-4 border-2 border-blue-600 border-t-transparent rounded-full animate-spin" }),
|
|
4173
4430
|
"Loading..."
|
|
4174
4431
|
] })
|
|
4175
4432
|
}
|
|
4176
|
-
) }) : paginatedData.length === 0 ? /* @__PURE__ */ (0,
|
|
4433
|
+
) }) : paginatedData.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
4177
4434
|
"td",
|
|
4178
4435
|
{
|
|
4179
4436
|
colSpan: columnRenderItems.length + 1,
|
|
@@ -4186,7 +4443,7 @@ function Spreadsheet({
|
|
|
4186
4443
|
const isRowHovered = hoveredRow === rowId;
|
|
4187
4444
|
const rowHighlight = getRowHighlight(rowId);
|
|
4188
4445
|
const displayIndex = rowIndex + 1 + (currentPage - 1) * pageSize;
|
|
4189
|
-
return /* @__PURE__ */ (0,
|
|
4446
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
|
|
4190
4447
|
"tr",
|
|
4191
4448
|
{
|
|
4192
4449
|
onMouseEnter: () => setHoveredRow(rowId),
|
|
@@ -4196,7 +4453,7 @@ function Spreadsheet({
|
|
|
4196
4453
|
},
|
|
4197
4454
|
onDoubleClick: () => onRowDoubleClick?.(row, rowIndex),
|
|
4198
4455
|
children: [
|
|
4199
|
-
/* @__PURE__ */ (0,
|
|
4456
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
4200
4457
|
"td",
|
|
4201
4458
|
{
|
|
4202
4459
|
onClick: (e) => handleRowSelect(rowId, e),
|
|
@@ -4217,10 +4474,10 @@ function Spreadsheet({
|
|
|
4217
4474
|
left: 0
|
|
4218
4475
|
}
|
|
4219
4476
|
},
|
|
4220
|
-
children: /* @__PURE__ */ (0,
|
|
4221
|
-
/* @__PURE__ */ (0,
|
|
4222
|
-
/* @__PURE__ */ (0,
|
|
4223
|
-
rowContextMenuItems && rowContextMenuItems.length > 0 && /* @__PURE__ */ (0,
|
|
4477
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "relative flex items-center justify-center w-full h-full", children: [
|
|
4478
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: displayIndex }),
|
|
4479
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "absolute inset-0 flex items-center justify-evenly", children: [
|
|
4480
|
+
rowContextMenuItems && rowContextMenuItems.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
4224
4481
|
RowContextMenu,
|
|
4225
4482
|
{
|
|
4226
4483
|
row,
|
|
@@ -4229,7 +4486,7 @@ function Spreadsheet({
|
|
|
4229
4486
|
compactMode: effectiveCompactMode
|
|
4230
4487
|
}
|
|
4231
4488
|
),
|
|
4232
|
-
enableHighlighting && /* @__PURE__ */ (0,
|
|
4489
|
+
enableHighlighting && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
4233
4490
|
"button",
|
|
4234
4491
|
{
|
|
4235
4492
|
type: "button",
|
|
@@ -4239,7 +4496,7 @@ function Spreadsheet({
|
|
|
4239
4496
|
},
|
|
4240
4497
|
className: "opacity-0 group-hover:opacity-100 transition-opacity p-0.5 bg-gray-100 hover:bg-gray-200 rounded",
|
|
4241
4498
|
title: "Highlight row",
|
|
4242
|
-
children: /* @__PURE__ */ (0,
|
|
4499
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
4243
4500
|
AiFillHighlight,
|
|
4244
4501
|
{
|
|
4245
4502
|
className: cn(
|
|
@@ -4253,7 +4510,7 @@ function Spreadsheet({
|
|
|
4253
4510
|
enableComments && (cellHasComments(
|
|
4254
4511
|
rowId,
|
|
4255
4512
|
ROW_INDEX_COLUMN_ID
|
|
4256
|
-
) ? /* @__PURE__ */ (0,
|
|
4513
|
+
) ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
|
|
4257
4514
|
"button",
|
|
4258
4515
|
{
|
|
4259
4516
|
type: "button",
|
|
@@ -4267,11 +4524,11 @@ function Spreadsheet({
|
|
|
4267
4524
|
className: "p-0.5 bg-amber-100 hover:bg-amber-200 rounded transition-colors flex items-center gap-0.5",
|
|
4268
4525
|
title: `${getCellUnresolvedCommentCount(rowId, ROW_INDEX_COLUMN_ID)} comment(s) - click to view`,
|
|
4269
4526
|
children: [
|
|
4270
|
-
/* @__PURE__ */ (0,
|
|
4527
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(FaComment, { className: "h-2.5 w-2.5 text-amber-500" }),
|
|
4271
4528
|
getCellUnresolvedCommentCount(
|
|
4272
4529
|
rowId,
|
|
4273
4530
|
ROW_INDEX_COLUMN_ID
|
|
4274
|
-
) > 0 && /* @__PURE__ */ (0,
|
|
4531
|
+
) > 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-[9px] font-medium text-amber-600", children: getCellUnresolvedCommentCount(
|
|
4275
4532
|
rowId,
|
|
4276
4533
|
ROW_INDEX_COLUMN_ID
|
|
4277
4534
|
) > 99 ? "99+" : getCellUnresolvedCommentCount(
|
|
@@ -4280,7 +4537,7 @@ function Spreadsheet({
|
|
|
4280
4537
|
) })
|
|
4281
4538
|
]
|
|
4282
4539
|
}
|
|
4283
|
-
) : /* @__PURE__ */ (0,
|
|
4540
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
4284
4541
|
"button",
|
|
4285
4542
|
{
|
|
4286
4543
|
type: "button",
|
|
@@ -4293,13 +4550,13 @@ function Spreadsheet({
|
|
|
4293
4550
|
},
|
|
4294
4551
|
className: "opacity-0 group-hover:opacity-100 transition-opacity p-0.5 bg-gray-100 hover:bg-gray-200 rounded",
|
|
4295
4552
|
title: "Add comment",
|
|
4296
|
-
children: /* @__PURE__ */ (0,
|
|
4553
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(FaRegComment, { className: "h-2.5 w-2.5 text-gray-500" })
|
|
4297
4554
|
}
|
|
4298
4555
|
)),
|
|
4299
4556
|
rowActions?.map((action) => {
|
|
4300
4557
|
if (action.visible && !action.visible(row))
|
|
4301
4558
|
return null;
|
|
4302
|
-
return /* @__PURE__ */ (0,
|
|
4559
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
4303
4560
|
"button",
|
|
4304
4561
|
{
|
|
4305
4562
|
type: "button",
|
|
@@ -4323,7 +4580,7 @@ function Spreadsheet({
|
|
|
4323
4580
|
),
|
|
4324
4581
|
columnRenderItems.map((item) => {
|
|
4325
4582
|
if (item.type === "collapsed-placeholder") {
|
|
4326
|
-
return /* @__PURE__ */ (0,
|
|
4583
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
4327
4584
|
"td",
|
|
4328
4585
|
{
|
|
4329
4586
|
className: "border border-gray-200 px-2 py-1 text-center text-gray-300",
|
|
@@ -4349,7 +4606,7 @@ function Spreadsheet({
|
|
|
4349
4606
|
const cellOrRowOrColumnHighlight = getCellHighlight(rowId, column.id) || rowHighlight?.color || getColumnHighlight(column.id);
|
|
4350
4607
|
const isColPinned = isColumnPinned(column.id);
|
|
4351
4608
|
const colPinSide = getColumnPinSide(column.id);
|
|
4352
|
-
return /* @__PURE__ */ (0,
|
|
4609
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
4353
4610
|
MemoizedSpreadsheetCell,
|
|
4354
4611
|
{
|
|
4355
4612
|
value,
|
|
@@ -4409,7 +4666,7 @@ function Spreadsheet({
|
|
|
4409
4666
|
] })
|
|
4410
4667
|
}
|
|
4411
4668
|
) }),
|
|
4412
|
-
showPagination && effectiveTotalItems > 0 && /* @__PURE__ */ (0,
|
|
4669
|
+
showPagination && effectiveTotalItems > 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
4413
4670
|
import_design_system2.Pagination,
|
|
4414
4671
|
{
|
|
4415
4672
|
currentPage,
|
|
@@ -4424,7 +4681,7 @@ function Spreadsheet({
|
|
|
4424
4681
|
onPageSizeChange: handlePageSizeChange
|
|
4425
4682
|
}
|
|
4426
4683
|
),
|
|
4427
|
-
/* @__PURE__ */ (0,
|
|
4684
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
4428
4685
|
AddCommentModal,
|
|
4429
4686
|
{
|
|
4430
4687
|
isOpen: commentModalCell !== null,
|
|
@@ -4435,7 +4692,7 @@ function Spreadsheet({
|
|
|
4435
4692
|
}
|
|
4436
4693
|
}
|
|
4437
4694
|
),
|
|
4438
|
-
/* @__PURE__ */ (0,
|
|
4695
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
4439
4696
|
ViewCommentsModal,
|
|
4440
4697
|
{
|
|
4441
4698
|
isOpen: viewCommentsCell !== null,
|
|
@@ -4450,7 +4707,7 @@ function Spreadsheet({
|
|
|
4450
4707
|
onClose: () => setViewCommentsCell(null)
|
|
4451
4708
|
}
|
|
4452
4709
|
),
|
|
4453
|
-
highlightPickerRow !== null && /* @__PURE__ */ (0,
|
|
4710
|
+
highlightPickerRow !== null && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
4454
4711
|
ColorPickerPopover,
|
|
4455
4712
|
{
|
|
4456
4713
|
title: "Highlight Row",
|
|
@@ -4459,7 +4716,7 @@ function Spreadsheet({
|
|
|
4459
4716
|
onClose: () => setHighlightPickerRow(null)
|
|
4460
4717
|
}
|
|
4461
4718
|
),
|
|
4462
|
-
highlightPickerColumn !== null && /* @__PURE__ */ (0,
|
|
4719
|
+
highlightPickerColumn !== null && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
4463
4720
|
ColorPickerPopover,
|
|
4464
4721
|
{
|
|
4465
4722
|
title: highlightPickerColumn === ROW_INDEX_COLUMN_ID ? "Highlight Row Index Column" : `Highlight Column: ${columns.find((c) => c.id === highlightPickerColumn)?.label || ""}`,
|
|
@@ -4468,7 +4725,7 @@ function Spreadsheet({
|
|
|
4468
4725
|
onClose: () => setHighlightPickerColumn(null)
|
|
4469
4726
|
}
|
|
4470
4727
|
),
|
|
4471
|
-
highlightPickerCell !== null && /* @__PURE__ */ (0,
|
|
4728
|
+
highlightPickerCell !== null && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
4472
4729
|
ColorPickerPopover,
|
|
4473
4730
|
{
|
|
4474
4731
|
title: "Highlight Cell",
|
|
@@ -4481,7 +4738,7 @@ function Spreadsheet({
|
|
|
4481
4738
|
onClose: () => setHighlightPickerCell(null)
|
|
4482
4739
|
}
|
|
4483
4740
|
),
|
|
4484
|
-
/* @__PURE__ */ (0,
|
|
4741
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
4485
4742
|
KeyboardShortcutsModal,
|
|
4486
4743
|
{
|
|
4487
4744
|
isOpen: showKeyboardShortcuts,
|
|
@@ -4489,7 +4746,7 @@ function Spreadsheet({
|
|
|
4489
4746
|
shortcuts
|
|
4490
4747
|
}
|
|
4491
4748
|
),
|
|
4492
|
-
/* @__PURE__ */ (0,
|
|
4749
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
4493
4750
|
SpreadsheetSettingsModal,
|
|
4494
4751
|
{
|
|
4495
4752
|
isOpen: showSettingsModal,
|
|
@@ -4517,6 +4774,7 @@ function Spreadsheet({
|
|
|
4517
4774
|
Spreadsheet.displayName = "Spreadsheet";
|
|
4518
4775
|
// Annotate the CommonJS export names for ESM import in node:
|
|
4519
4776
|
0 && (module.exports = {
|
|
4777
|
+
ActiveFiltersDisplay,
|
|
4520
4778
|
RowContextMenu,
|
|
4521
4779
|
Spreadsheet,
|
|
4522
4780
|
SpreadsheetCell,
|