@bmsuisse/datagrid 0.31.2 → 0.32.0
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 +82 -44
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -3155,6 +3155,12 @@ function useGridState(dataSource, initialState, externalState, showPagination =
|
|
|
3155
3155
|
import { Fragment as Fragment4, jsx as jsx33, jsxs as jsxs20 } from "react/jsx-runtime";
|
|
3156
3156
|
var gridTableFeatures = tableFeatures({ columnSizingFeature, columnResizingFeature });
|
|
3157
3157
|
var DEFAULT_COLUMN_SIZE = 150;
|
|
3158
|
+
var MIN_COLUMN_SIZE = 40;
|
|
3159
|
+
function sortDirToAriaSort(dir) {
|
|
3160
|
+
if (dir === "asc") return "ascending";
|
|
3161
|
+
if (dir === "desc") return "descending";
|
|
3162
|
+
return "none";
|
|
3163
|
+
}
|
|
3158
3164
|
var DETAIL_COLUMN_WIDTH = 44;
|
|
3159
3165
|
var ROW_ACTIONS_COLUMN_WIDTH = 44;
|
|
3160
3166
|
var EMPTY_ID_ARRAY = [];
|
|
@@ -3928,52 +3934,84 @@ function DataGrid({
|
|
|
3928
3934
|
const filterable = isFilterable(column) && column.filterDisplay !== "row";
|
|
3929
3935
|
const cellProps = leafHeaderCellPropsByColumn.get(column.id);
|
|
3930
3936
|
const headerContent = column.renderHeader ? column.renderHeader(column) : column.header;
|
|
3931
|
-
return /* @__PURE__ */ jsxs20(
|
|
3932
|
-
|
|
3933
|
-
|
|
3934
|
-
|
|
3935
|
-
|
|
3936
|
-
|
|
3937
|
-
|
|
3938
|
-
|
|
3939
|
-
|
|
3940
|
-
|
|
3941
|
-
|
|
3942
|
-
|
|
3943
|
-
|
|
3944
|
-
|
|
3945
|
-
|
|
3946
|
-
|
|
3947
|
-
|
|
3948
|
-
|
|
3949
|
-
|
|
3950
|
-
|
|
3951
|
-
|
|
3952
|
-
|
|
3953
|
-
|
|
3954
|
-
|
|
3955
|
-
|
|
3937
|
+
return /* @__PURE__ */ jsxs20(
|
|
3938
|
+
"th",
|
|
3939
|
+
{
|
|
3940
|
+
rowSpan,
|
|
3941
|
+
style: cellProps?.style,
|
|
3942
|
+
className: cellProps?.className,
|
|
3943
|
+
"aria-sort": sortable ? sortDirToAriaSort(sortEntry?.dir) : void 0,
|
|
3944
|
+
"aria-label": column.header,
|
|
3945
|
+
children: [
|
|
3946
|
+
/* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-1", children: [
|
|
3947
|
+
sortable ? /* @__PURE__ */ jsxs20(
|
|
3948
|
+
"button",
|
|
3949
|
+
{
|
|
3950
|
+
type: "button",
|
|
3951
|
+
"data-testid": `sort-button-${column.id}`,
|
|
3952
|
+
className: "flex items-center gap-1 rounded-sm px-1 hover:bg-accent hover:text-accent-foreground",
|
|
3953
|
+
onClick: (event) => toggleSort(column.id, enableMultiSort && event.shiftKey, column.sortDescFirst === true),
|
|
3954
|
+
children: [
|
|
3955
|
+
headerContent,
|
|
3956
|
+
sortEntry?.dir === "asc" && /* @__PURE__ */ jsx33(BarsArrowUpIcon, { className: "h-3 w-3", "aria-hidden": true }),
|
|
3957
|
+
sortEntry?.dir === "desc" && /* @__PURE__ */ jsx33(BarsArrowDownIcon, { className: "h-3 w-3", "aria-hidden": true })
|
|
3958
|
+
]
|
|
3959
|
+
}
|
|
3960
|
+
) : (
|
|
3961
|
+
// Not wrapped in a `<button>` (unlike the sortable branch above): a
|
|
3962
|
+
// disabled `<button>` swallows pointer events for its entire subtree,
|
|
3963
|
+
// silently breaking any interactive content a column's own `renderHeader`
|
|
3964
|
+
// embeds directly (bare filter inputs, "select/reject all" buttons) —
|
|
3965
|
+
// clicks never reach them at all, even though nothing looks wrong visually.
|
|
3966
|
+
/* @__PURE__ */ jsx33("div", { className: "flex items-center gap-1 px-1", children: headerContent })
|
|
3967
|
+
),
|
|
3968
|
+
filterable && /* @__PURE__ */ jsxs20(Popover, { children: [
|
|
3969
|
+
/* @__PURE__ */ jsx33(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx33(
|
|
3970
|
+
Button,
|
|
3971
|
+
{
|
|
3972
|
+
variant: "ghost",
|
|
3973
|
+
size: "icon",
|
|
3974
|
+
"data-testid": `filter-trigger-${column.id}`,
|
|
3975
|
+
"aria-label": `Filter ${column.header}`,
|
|
3976
|
+
children: /* @__PURE__ */ jsx33(
|
|
3977
|
+
FunnelIcon7,
|
|
3978
|
+
{
|
|
3979
|
+
className: cn(
|
|
3980
|
+
"h-3 w-3",
|
|
3981
|
+
filtersByColumn.get(column.id) !== void 0 ? "opacity-100 text-primary" : "opacity-40"
|
|
3982
|
+
),
|
|
3983
|
+
"aria-hidden": true
|
|
3984
|
+
}
|
|
3985
|
+
)
|
|
3986
|
+
}
|
|
3987
|
+
) }),
|
|
3988
|
+
/* @__PURE__ */ jsx33(PopoverContent, { children: renderFilterWidget(column) })
|
|
3989
|
+
] })
|
|
3990
|
+
] }),
|
|
3991
|
+
enableColumnResizing && /* @__PURE__ */ jsx33(
|
|
3992
|
+
"div",
|
|
3956
3993
|
{
|
|
3957
|
-
|
|
3958
|
-
|
|
3959
|
-
|
|
3960
|
-
|
|
3961
|
-
|
|
3994
|
+
"data-testid": `resize-handle-${column.id}`,
|
|
3995
|
+
role: "separator",
|
|
3996
|
+
"aria-orientation": "vertical",
|
|
3997
|
+
"aria-label": `Resize ${column.header} column`,
|
|
3998
|
+
tabIndex: 0,
|
|
3999
|
+
onMouseDown: header.getResizeHandler(),
|
|
4000
|
+
onTouchStart: header.getResizeHandler(),
|
|
4001
|
+
onKeyDown: (event) => {
|
|
4002
|
+
if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
|
|
4003
|
+
event.preventDefault();
|
|
4004
|
+
const delta = event.key === "ArrowRight" ? 10 : -10;
|
|
4005
|
+
const nextSize = Math.max(MIN_COLUMN_SIZE, columnSize(column.id) + delta);
|
|
4006
|
+
updateColumnSizing({ ...columnSizing, [column.id]: nextSize });
|
|
4007
|
+
},
|
|
4008
|
+
className: "absolute right-0 top-0 h-full w-1 cursor-col-resize touch-none select-none hover:bg-accent focus-visible:bg-accent focus-visible:outline-none"
|
|
3962
4009
|
}
|
|
3963
|
-
)
|
|
3964
|
-
|
|
3965
|
-
|
|
3966
|
-
|
|
3967
|
-
|
|
3968
|
-
"div",
|
|
3969
|
-
{
|
|
3970
|
-
"data-testid": `resize-handle-${column.id}`,
|
|
3971
|
-
onMouseDown: header.getResizeHandler(),
|
|
3972
|
-
onTouchStart: header.getResizeHandler(),
|
|
3973
|
-
className: "absolute right-0 top-0 h-full w-1 cursor-col-resize touch-none select-none hover:bg-accent"
|
|
3974
|
-
}
|
|
3975
|
-
)
|
|
3976
|
-
] }, header.id);
|
|
4010
|
+
)
|
|
4011
|
+
]
|
|
4012
|
+
},
|
|
4013
|
+
header.id
|
|
4014
|
+
);
|
|
3977
4015
|
}
|
|
3978
4016
|
return /* @__PURE__ */ jsxs20(Fragment3, { children: [
|
|
3979
4017
|
hasHeaderGroups && /* @__PURE__ */ jsxs20("tr", { "data-testid": "header-group-row", className: "divide-x divide-border", children: [
|