@xcelsior/ui-spreadsheets 1.1.12 → 1.1.13
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.js +4 -20
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +4 -20
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
- package/src/components/Spreadsheet.stories.tsx +285 -25
- package/src/components/Spreadsheet.tsx +17 -19
- package/src/components/SpreadsheetCell.tsx +0 -5
- package/src/components/SpreadsheetHeader.tsx +0 -5
package/dist/index.mjs
CHANGED
|
@@ -361,11 +361,6 @@ var SpreadsheetCell = ({
|
|
|
361
361
|
style: {
|
|
362
362
|
backgroundColor: isInSelection ? "rgb(239 246 255)" : getBackgroundColor(),
|
|
363
363
|
minWidth: column.minWidth || column.width,
|
|
364
|
-
// Pinned columns need fixed width so sticky offset calculations are accurate
|
|
365
|
-
...isPinned && {
|
|
366
|
-
width: column.minWidth || column.width,
|
|
367
|
-
maxWidth: column.minWidth || column.width
|
|
368
|
-
},
|
|
369
364
|
...positionStyles,
|
|
370
365
|
...selectionBorderStyles
|
|
371
366
|
},
|
|
@@ -1207,11 +1202,6 @@ var SpreadsheetHeader = ({
|
|
|
1207
1202
|
backgroundColor: highlightColor || "rgb(243 244 246)",
|
|
1208
1203
|
// gray-100
|
|
1209
1204
|
minWidth: column.minWidth || column.width,
|
|
1210
|
-
// Pinned columns need fixed width so sticky offset calculations are accurate
|
|
1211
|
-
...isPinned && {
|
|
1212
|
-
width: column.minWidth || column.width,
|
|
1213
|
-
maxWidth: column.minWidth || column.width
|
|
1214
|
-
},
|
|
1215
1205
|
top: 0,
|
|
1216
1206
|
// For sticky header
|
|
1217
1207
|
...positionStyles
|
|
@@ -3877,9 +3867,7 @@ function Spreadsheet({
|
|
|
3877
3867
|
}
|
|
3878
3868
|
}
|
|
3879
3869
|
}
|
|
3880
|
-
const allGroupedIds = new Set(
|
|
3881
|
-
columnGroups.flatMap((g) => g.columns)
|
|
3882
|
-
);
|
|
3870
|
+
const allGroupedIds = new Set(columnGroups.flatMap((g) => g.columns));
|
|
3883
3871
|
for (const col of visibleColumns) {
|
|
3884
3872
|
if (!allGroupedIds.has(col.id)) {
|
|
3885
3873
|
const pinSide = pinnedColumns.get(col.id);
|
|
@@ -3991,7 +3979,7 @@ function Spreadsheet({
|
|
|
3991
3979
|
style: {
|
|
3992
3980
|
zoom: zoom / 100
|
|
3993
3981
|
},
|
|
3994
|
-
children: /* @__PURE__ */ jsxs12("table", { className: "
|
|
3982
|
+
children: /* @__PURE__ */ jsxs12("table", { className: "border-separate border-spacing-0 text-xs select-none", children: [
|
|
3995
3983
|
/* @__PURE__ */ jsxs12("thead", { children: [
|
|
3996
3984
|
columnGroups && groupHeaderItems && /* @__PURE__ */ jsxs12("tr", { children: [
|
|
3997
3985
|
/* @__PURE__ */ jsx12(
|
|
@@ -4008,9 +3996,7 @@ function Spreadsheet({
|
|
|
4008
3996
|
),
|
|
4009
3997
|
groupHeaderItems.map((item) => {
|
|
4010
3998
|
if (item.type === "pinned-column") {
|
|
4011
|
-
const col = columns.find(
|
|
4012
|
-
(c) => c.id === item.columnId
|
|
4013
|
-
);
|
|
3999
|
+
const col = columns.find((c) => c.id === item.columnId);
|
|
4014
4000
|
const isPinnedLeft = item.pinSide === "left";
|
|
4015
4001
|
return /* @__PURE__ */ jsx12(
|
|
4016
4002
|
"th",
|
|
@@ -4024,9 +4010,7 @@ function Spreadsheet({
|
|
|
4024
4010
|
position: "sticky",
|
|
4025
4011
|
left: isPinnedLeft ? `${getColumnLeftOffset(item.columnId)}px` : void 0,
|
|
4026
4012
|
right: !isPinnedLeft ? `${getColumnRightOffset(item.columnId)}px` : void 0,
|
|
4027
|
-
minWidth: col?.minWidth || col?.width
|
|
4028
|
-
width: col?.minWidth || col?.width,
|
|
4029
|
-
maxWidth: col?.minWidth || col?.width
|
|
4013
|
+
minWidth: col?.minWidth || col?.width
|
|
4030
4014
|
}
|
|
4031
4015
|
},
|
|
4032
4016
|
`pinned-group-${item.columnId}`
|