@bwp-web/components 0.11.7 → 0.12.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/BiampTable/BiampTable.d.ts +3 -1
- package/dist/BiampTable/BiampTable.d.ts.map +1 -1
- package/dist/BiampTable/BiampTableColumnVisibility.d.ts.map +1 -1
- package/dist/BiampTable/tanstack-meta.d.ts +2 -0
- package/dist/BiampTable/tanstack-meta.d.ts.map +1 -1
- package/dist/index.cjs +78 -28
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +89 -37
- package/dist/index.js.map +1 -1
- package/package.json +3 -3
|
@@ -20,10 +20,12 @@ export type BiampTableProps<TData> = BoxProps & {
|
|
|
20
20
|
empty?: boolean | ReactNode;
|
|
21
21
|
/** When true, renders a checkbox column for row selection. @default false */
|
|
22
22
|
enableRowSelection?: boolean;
|
|
23
|
+
/** When true, renders an expand/collapse toggle column for rows that have sub-rows. @default false */
|
|
24
|
+
enableExpanding?: boolean;
|
|
23
25
|
/** When true, hides the "select all" header checkbox while keeping individual row checkboxes. */
|
|
24
26
|
hideSelectAll?: boolean;
|
|
25
27
|
/** Returns a human-readable name for a row, used in ARIA labels (e.g. "Select: Conference Room A"). Falls back to row index. */
|
|
26
28
|
getRowLabel?: (row: TData) => string;
|
|
27
29
|
};
|
|
28
|
-
export declare function BiampTable<TData>({ table, onRowClick, isRowClickable, loading, error, empty, enableRowSelection, hideSelectAll, getRowLabel, sx, ...boxProps }: BiampTableProps<TData>): import("react/jsx-runtime").JSX.Element;
|
|
30
|
+
export declare function BiampTable<TData>({ table, onRowClick, isRowClickable, loading, error, empty, enableRowSelection, enableExpanding, hideSelectAll, getRowLabel, sx, ...boxProps }: BiampTableProps<TData>): import("react/jsx-runtime").JSX.Element;
|
|
29
31
|
//# sourceMappingURL=BiampTable.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BiampTable.d.ts","sourceRoot":"","sources":["../../src/BiampTable/BiampTable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,QAAQ,
|
|
1
|
+
{"version":3,"file":"BiampTable.d.ts","sourceRoot":"","sources":["../../src/BiampTable/BiampTable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,QAAQ,EAWd,MAAM,eAAe,CAAC;AAMvB,OAAO,EAAc,KAAK,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC/D,OAAc,EAAE,KAAK,SAAS,EAAU,MAAM,OAAO,CAAC;AAGtD,OAAO,iBAAiB,CAAC;AAGzB,MAAM,MAAM,eAAe,CAAC,KAAK,IAAI,QAAQ,GAAG;IAC9C,6CAA6C;IAC7C,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;IACpB,qFAAqF;IACrF,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,IAAI,CAAC;IAClC;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,OAAO,CAAC;IACzC,oEAAoE;IACpE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,wKAAwK;IACxK,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,SAAS,CAAC;IACpC,6IAA6I;IAC7I,KAAK,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC5B,6EAA6E;IAC7E,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,sGAAsG;IACtG,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,iGAAiG;IACjG,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,gIAAgI;IAChI,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,MAAM,CAAC;CACtC,CAAC;AAEF,wBAAgB,UAAU,CAAC,KAAK,EAAE,EAChC,KAAK,EACL,UAAU,EACV,cAAc,EACd,OAAO,EACP,KAAK,EACL,KAAK,EACL,kBAA0B,EAC1B,eAAuB,EACvB,aAAa,EACb,WAAW,EACX,EAAE,EACF,GAAG,QAAQ,EACZ,EAAE,eAAe,CAAC,KAAK,CAAC,2CAkVxB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BiampTableColumnVisibility.d.ts","sourceRoot":"","sources":["../../src/BiampTable/BiampTableColumnVisibility.tsx"],"names":[],"mappings":"AAAA,OAAO,EAQL,KAAK,YAAY,EAIlB,MAAM,eAAe,CAAC;AACvB,OAAO,KAAK,EAAE,KAAK,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACpE,OAAO,iBAAiB,CAAC;AAEzB;;;;;GAKG;AACH,MAAM,MAAM,gBAAgB,GAAG,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;AAEhE;;;GAGG;AACH,wBAAgB,iBAAiB,CAC/B,UAAU,EAAE,gBAAgB,GAC3B,eAAe,CAEjB;AAED;;;;GAIG;AACH,wBAAgB,0BAA0B,CAAC,KAAK,EAC9C,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,GAClB,gBAAgB,CAOlB;AAED;;;;GAIG;AACH,wBAAgB,6BAA6B,CAAC,KAAK,EACjD,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,EACnB,iBAAiB,CAAC,EAAE,gBAAgB,GACnC,MAAM,CAUR;AAED,MAAM,MAAM,+BAA+B,CAAC,KAAK,IAAI,IAAI,CACvD,YAAY,EACZ,MAAM,CACP,GAAG;IACF,6CAA6C;IAC7C,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;IACpB,2DAA2D;IAC3D,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAcF,wBAAgB,0BAA0B,CAAC,KAAK,EAAE,EAChD,KAAK,EACL,YAAyB,EACzB,QAAQ,EACR,YAA0D,EAC1D,eAA0D,EAC1D,SAAS,EACT,GAAG,YAAY,EAChB,EAAE,+BAA+B,CAAC,KAAK,CAAC,
|
|
1
|
+
{"version":3,"file":"BiampTableColumnVisibility.d.ts","sourceRoot":"","sources":["../../src/BiampTable/BiampTableColumnVisibility.tsx"],"names":[],"mappings":"AAAA,OAAO,EAQL,KAAK,YAAY,EAIlB,MAAM,eAAe,CAAC;AACvB,OAAO,KAAK,EAAE,KAAK,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACpE,OAAO,iBAAiB,CAAC;AAEzB;;;;;GAKG;AACH,MAAM,MAAM,gBAAgB,GAAG,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;AAEhE;;;GAGG;AACH,wBAAgB,iBAAiB,CAC/B,UAAU,EAAE,gBAAgB,GAC3B,eAAe,CAEjB;AAED;;;;GAIG;AACH,wBAAgB,0BAA0B,CAAC,KAAK,EAC9C,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,GAClB,gBAAgB,CAOlB;AAED;;;;GAIG;AACH,wBAAgB,6BAA6B,CAAC,KAAK,EACjD,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,EACnB,iBAAiB,CAAC,EAAE,gBAAgB,GACnC,MAAM,CAUR;AAED,MAAM,MAAM,+BAA+B,CAAC,KAAK,IAAI,IAAI,CACvD,YAAY,EACZ,MAAM,CACP,GAAG;IACF,6CAA6C;IAC7C,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;IACpB,2DAA2D;IAC3D,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAcF,wBAAgB,0BAA0B,CAAC,KAAK,EAAE,EAChD,KAAK,EACL,YAAyB,EACzB,QAAQ,EACR,YAA0D,EAC1D,eAA0D,EAC1D,SAAS,EACT,GAAG,YAAY,EAChB,EAAE,+BAA+B,CAAC,KAAK,CAAC,2CA6ExC"}
|
|
@@ -7,6 +7,8 @@ declare module '@tanstack/react-table' {
|
|
|
7
7
|
sticky?: 'left' | 'right';
|
|
8
8
|
/** Whether this column is visible by default. Defaults to `true` (visible). */
|
|
9
9
|
defaultVisible?: boolean;
|
|
10
|
+
/** Human-readable label used in the column-visibility menu when `header` is not a string. */
|
|
11
|
+
columnLabel?: string;
|
|
10
12
|
}
|
|
11
13
|
}
|
|
12
14
|
//# sourceMappingURL=tanstack-meta.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tanstack-meta.d.ts","sourceRoot":"","sources":["../../src/BiampTable/tanstack-meta.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAErD,OAAO,QAAQ,uBAAuB,CAAC;IACrC,UAAU,UAAU,CAAC,KAAK,SAAS,OAAO,EAAE,MAAM;QAChD,0DAA0D;QAC1D,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;QAC3B,sEAAsE;QACtE,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;QAC1B,+EAA+E;QAC/E,cAAc,CAAC,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"tanstack-meta.d.ts","sourceRoot":"","sources":["../../src/BiampTable/tanstack-meta.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAErD,OAAO,QAAQ,uBAAuB,CAAC;IACrC,UAAU,UAAU,CAAC,KAAK,SAAS,OAAO,EAAE,MAAM;QAChD,0DAA0D;QAC1D,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;QAC3B,sEAAsE;QACtE,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;QAC1B,+EAA+E;QAC/E,cAAc,CAAC,EAAE,OAAO,CAAC;QACzB,6FAA6F;QAC7F,WAAW,CAAC,EAAE,MAAM,CAAC;KACtB;CACF"}
|
package/dist/index.cjs
CHANGED
|
@@ -614,6 +614,7 @@ function BiampTable({
|
|
|
614
614
|
error,
|
|
615
615
|
empty,
|
|
616
616
|
enableRowSelection = false,
|
|
617
|
+
enableExpanding = false,
|
|
617
618
|
hideSelectAll,
|
|
618
619
|
getRowLabel,
|
|
619
620
|
sx,
|
|
@@ -629,6 +630,7 @@ function BiampTable({
|
|
|
629
630
|
const containerRef = (0, import_react3.useRef)(null);
|
|
630
631
|
const showLoading = useLoadingDelay(!!loading);
|
|
631
632
|
const rows = table.getRowModel().rows;
|
|
633
|
+
const hasExpandableRows = enableExpanding && rows.some((r) => r.getCanExpand());
|
|
632
634
|
const showError = !!error && !loading;
|
|
633
635
|
const showEmpty = !showError && !loading && rows.length === 0;
|
|
634
636
|
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
|
@@ -769,8 +771,11 @@ function BiampTable({
|
|
|
769
771
|
)
|
|
770
772
|
}
|
|
771
773
|
),
|
|
772
|
-
row.getVisibleCells().map((cell) => {
|
|
774
|
+
row.getVisibleCells().map((cell, cellIndex, cells) => {
|
|
773
775
|
const sticky = cell.column.columnDef.meta?.sticky;
|
|
776
|
+
const isExpandCell = enableExpanding && !sticky && cellIndex === cells.findIndex(
|
|
777
|
+
(c) => !c.column.columnDef.meta?.sticky
|
|
778
|
+
);
|
|
774
779
|
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
775
780
|
import_material6.TableCell,
|
|
776
781
|
{
|
|
@@ -790,7 +795,45 @@ function BiampTable({
|
|
|
790
795
|
}
|
|
791
796
|
}
|
|
792
797
|
},
|
|
793
|
-
children: (0,
|
|
798
|
+
children: isExpandCell ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
|
799
|
+
import_material6.Box,
|
|
800
|
+
{
|
|
801
|
+
sx: {
|
|
802
|
+
display: "flex",
|
|
803
|
+
alignItems: "center",
|
|
804
|
+
pl: `${row.depth * 12}px`
|
|
805
|
+
},
|
|
806
|
+
children: [
|
|
807
|
+
row.getCanExpand() ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
808
|
+
import_material6.IconButton,
|
|
809
|
+
{
|
|
810
|
+
variant: "none",
|
|
811
|
+
onClick: (e) => {
|
|
812
|
+
e.stopPropagation();
|
|
813
|
+
row.toggleExpanded();
|
|
814
|
+
},
|
|
815
|
+
"aria-label": row.getIsExpanded() ? `Collapse ${getRowLabel ? getRowLabel(row.original) : `row ${row.index + 1}`}` : `Expand ${getRowLabel ? getRowLabel(row.original) : `row ${row.index + 1}`}`,
|
|
816
|
+
"aria-expanded": row.getIsExpanded(),
|
|
817
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
818
|
+
import_assets5.ChevronRightIcon,
|
|
819
|
+
{
|
|
820
|
+
variant: "xs",
|
|
821
|
+
sx: {
|
|
822
|
+
color: ({ palette }) => palette.text.secondary,
|
|
823
|
+
transition: "transform 150ms ease",
|
|
824
|
+
transform: row.getIsExpanded() ? "rotate(90deg)" : "rotate(0deg)"
|
|
825
|
+
}
|
|
826
|
+
}
|
|
827
|
+
)
|
|
828
|
+
}
|
|
829
|
+
) : hasExpandableRows ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_material6.Box, { sx: { width: 28 } }) : null,
|
|
830
|
+
(0, import_react_table.flexRender)(
|
|
831
|
+
cell.column.columnDef.cell,
|
|
832
|
+
cell.getContext()
|
|
833
|
+
)
|
|
834
|
+
]
|
|
835
|
+
}
|
|
836
|
+
) : (0, import_react_table.flexRender)(
|
|
794
837
|
cell.column.columnDef.cell,
|
|
795
838
|
cell.getContext()
|
|
796
839
|
)
|
|
@@ -967,6 +1010,7 @@ function BiampTableColumnVisibility({
|
|
|
967
1010
|
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
|
|
968
1011
|
import_material9.ListItem,
|
|
969
1012
|
{
|
|
1013
|
+
dense: true,
|
|
970
1014
|
sx: columnListItemSx,
|
|
971
1015
|
onClick: () => table.toggleAllColumnsVisible(!allVisible),
|
|
972
1016
|
children: [
|
|
@@ -975,39 +1019,45 @@ function BiampTableColumnVisibility({
|
|
|
975
1019
|
{
|
|
976
1020
|
checked: allVisible,
|
|
977
1021
|
indeterminate: !allVisible && someVisible,
|
|
978
|
-
size: "small",
|
|
979
1022
|
slotProps: { input: { "aria-label": `${showAllLabel} columns` } }
|
|
980
1023
|
}
|
|
981
1024
|
),
|
|
982
|
-
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_material9.Typography, { variant: "caption", children: showAllLabel })
|
|
1025
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_material9.Typography, { variant: "caption", fontWeight: 600, children: showAllLabel })
|
|
983
1026
|
]
|
|
984
1027
|
}
|
|
985
1028
|
),
|
|
986
1029
|
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_material9.Divider, {}),
|
|
987
|
-
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
988
|
-
|
|
989
|
-
|
|
990
|
-
|
|
991
|
-
{
|
|
992
|
-
|
|
993
|
-
|
|
994
|
-
|
|
995
|
-
|
|
996
|
-
|
|
997
|
-
|
|
998
|
-
|
|
999
|
-
|
|
1000
|
-
|
|
1001
|
-
|
|
1002
|
-
|
|
1003
|
-
|
|
1004
|
-
|
|
1005
|
-
|
|
1006
|
-
|
|
1007
|
-
|
|
1008
|
-
|
|
1009
|
-
|
|
1010
|
-
|
|
1030
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
1031
|
+
import_material9.Box,
|
|
1032
|
+
{
|
|
1033
|
+
sx: { maxHeight: 340, overflow: "auto", overscrollBehavior: "none" },
|
|
1034
|
+
children: table.getAllLeafColumns().map((column) => {
|
|
1035
|
+
const columnName = column.columnDef.meta?.columnLabel ?? (typeof column.columnDef.header === "string" ? column.columnDef.header : column.id);
|
|
1036
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
|
|
1037
|
+
import_material9.ListItem,
|
|
1038
|
+
{
|
|
1039
|
+
dense: true,
|
|
1040
|
+
sx: columnListItemSx,
|
|
1041
|
+
onClick: column.getToggleVisibilityHandler(),
|
|
1042
|
+
children: [
|
|
1043
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
1044
|
+
import_material9.Checkbox,
|
|
1045
|
+
{
|
|
1046
|
+
checked: column.getIsVisible(),
|
|
1047
|
+
sx: { py: 1 },
|
|
1048
|
+
slotProps: {
|
|
1049
|
+
input: { "aria-label": `Show ${columnName}` }
|
|
1050
|
+
}
|
|
1051
|
+
}
|
|
1052
|
+
),
|
|
1053
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_material9.Typography, { variant: "caption", children: columnName })
|
|
1054
|
+
]
|
|
1055
|
+
},
|
|
1056
|
+
column.id
|
|
1057
|
+
);
|
|
1058
|
+
})
|
|
1059
|
+
}
|
|
1060
|
+
)
|
|
1011
1061
|
] })
|
|
1012
1062
|
}
|
|
1013
1063
|
);
|