@bsol-oss/react-datatable5 12.0.0-beta.16 → 12.0.0-beta.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.d.ts +1 -1
  2. package/dist/index.js +13 -17
  3. package/dist/index.mjs +13 -17
  4. package/dist/types/components/DataTable/display/TableBody.d.ts +1 -1
  5. package/package.json +1 -1
package/dist/index.d.ts CHANGED
@@ -309,7 +309,7 @@ interface TableRowSelectorProps<TData> {
309
309
  };
310
310
  alwaysShowSelector?: boolean;
311
311
  }
312
- declare const TableBody: ({ pinnedBgColor, showSelector, alwaysShowSelector, canResize, }: TableBodyProps) => react_jsx_runtime.JSX.Element;
312
+ declare const TableBody: ({ showSelector, alwaysShowSelector, canResize, }: TableBodyProps) => react_jsx_runtime.JSX.Element;
313
313
 
314
314
  interface TableControlsProps {
315
315
  totalText?: string;
package/dist/index.js CHANGED
@@ -2922,7 +2922,7 @@ const Checkbox = React__namespace.forwardRef(function Checkbox(props, ref) {
2922
2922
  return (jsxRuntime.jsxs(react.Checkbox.Root, { ref: rootRef, ...rest, children: [jsxRuntime.jsx(react.Checkbox.HiddenInput, { ref: ref, ...inputProps }), jsxRuntime.jsx(react.Checkbox.Control, { children: icon || jsxRuntime.jsx(react.Checkbox.Indicator, {}) }), children != null && (jsxRuntime.jsx(react.Checkbox.Label, { children: children }))] }));
2923
2923
  });
2924
2924
 
2925
- const TableBody = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, showSelector = false, alwaysShowSelector = true, canResize = true, }) => {
2925
+ const TableBody = ({ showSelector = false, alwaysShowSelector = true, canResize = true, }) => {
2926
2926
  "use no memo";
2927
2927
  const { table } = useDataTableContext();
2928
2928
  const SELECTION_BOX_WIDTH = 20;
@@ -2936,12 +2936,7 @@ const TableBody = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, sho
2936
2936
  left: showSelector
2937
2937
  ? `${cell.column.getStart("left") + SELECTION_BOX_WIDTH + table.getDensityValue() * 2}px`
2938
2938
  : `${cell.column.getStart("left")}px`,
2939
- background: pinnedBgColor.light,
2940
- position: "sticky",
2941
- zIndex: -1,
2942
- _dark: {
2943
- backgroundColor: pinnedBgColor.dark,
2944
- },
2939
+ position: "relative",
2945
2940
  }
2946
2941
  : {};
2947
2942
  return tdProps;
@@ -2963,9 +2958,11 @@ const TableBody = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, sho
2963
2958
  return (jsxRuntime.jsxs(react.Table.Row, { display: "flex", zIndex: 1, onMouseEnter: () => handleRowHover(index), onMouseLeave: () => handleRowHover(-1), ...getTrProps({ hoveredRow, index }), children: [showSelector && (jsxRuntime.jsx(TableRowSelector, { index: index, row: row, hoveredRow: hoveredRow, alwaysShowSelector: alwaysShowSelector })), row.getVisibleCells().map((cell, index) => {
2964
2959
  return (jsxRuntime.jsx(react.Table.Cell, { padding: `${table.getDensityValue()}px`,
2965
2960
  // styling resize and pinning start
2966
- flex: `${canResize ? "0" : "1"} 0 ${cell.column.getSize()}px`, backgroundColor: "white", ...getTdProps(cell), _dark: {
2967
- backgroundColor: "gray.950",
2968
- }, children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }, `chakra-table-rowcell-${cell.id}-${index}`));
2961
+ flex: `${canResize ? "0" : "1"} 0 ${cell.column.getSize()}px`, color: {
2962
+ base: "colorPalette.900",
2963
+ _dark: "colorPalette.100",
2964
+ },
2965
+ bg: { base: "colorPalette.50", _dark: "colorPalette.950" }, ...getTdProps(cell), children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }, `chakra-table-rowcell-${cell.id}-${index}`));
2969
2966
  })] }, `chakra-table-row-${row.id}`));
2970
2967
  }) }));
2971
2968
  };
@@ -3171,12 +3168,8 @@ const TableHeader = ({ canResize = true, pinnedBgColor = { light: "gray.50", dar
3171
3168
  left: showSelector
3172
3169
  ? `${header.getStart("left") + SELECTION_BOX_WIDTH + table.getDensityValue() * 2}px`
3173
3170
  : `${header.getStart("left")}px`,
3174
- background: pinnedBgColor.light,
3175
3171
  position: "sticky",
3176
3172
  zIndex: 100 + 1,
3177
- _dark: {
3178
- backgroundColor: pinnedBgColor.dark,
3179
- },
3180
3173
  }
3181
3174
  : {};
3182
3175
  return thProps;
@@ -3207,7 +3200,11 @@ const TableHeader = ({ canResize = true, pinnedBgColor = { light: "gray.50", dar
3207
3200
  };
3208
3201
  return (jsxRuntime.jsxs(react.Table.ColumnHeader, { padding: 0, columnSpan: `${header.colSpan}`,
3209
3202
  // styling resize and pinning start
3210
- flex: `${canResize ? "0" : "1"} 0 ${header.column.getSize()}px`, display: "grid", gridTemplateColumns: "1fr auto", zIndex: 1500 + header.index, ...getThProps(header), children: [jsxRuntime.jsxs(MenuRoot, { children: [jsxRuntime.jsx(MenuTrigger, { asChild: true, children: jsxRuntime.jsx(react.Flex, { padding: `${table.getDensityValue()}px`, alignItems: "center", justifyContent: "start", borderRadius: "0rem", overflow: "auto", _hover: {
3203
+ flex: `${canResize ? "0" : "1"} 0 ${header.column.getSize()}px`, display: "grid", gridTemplateColumns: "1fr auto", zIndex: 1500 + header.index, color: {
3204
+ base: "colorPalette.800",
3205
+ _dark: "colorPalette.200",
3206
+ },
3207
+ bg: { base: "colorPalette.100", _dark: "colorPalette.900" }, ...getThProps(header), children: [jsxRuntime.jsxs(MenuRoot, { children: [jsxRuntime.jsx(MenuTrigger, { asChild: true, children: jsxRuntime.jsx(react.Flex, { padding: `${table.getDensityValue()}px`, alignItems: "center", justifyContent: "start", borderRadius: "0rem", overflow: "auto", _hover: {
3211
3208
  backgroundColor: "gray.100",
3212
3209
  _dark: {
3213
3210
  backgroundColor: "gray.700",
@@ -3871,7 +3868,6 @@ const EnumPicker = ({ column, isMultiple = false, schema, prefix, }) => {
3871
3868
  return jsxRuntime.jsx(jsxRuntime.Fragment, { children: "undefined" });
3872
3869
  }
3873
3870
  return (jsxRuntime.jsx(Tag, { closable: true, onClick: () => {
3874
- // setSelectedEnums((state) => state.filter((id) => id != item));
3875
3871
  setValue(column, watchEnums.filter((id) => id != item));
3876
3872
  }, children: !!renderDisplay === true
3877
3873
  ? renderDisplay(item)
@@ -3882,7 +3878,7 @@ const EnumPicker = ({ column, isMultiple = false, schema, prefix, }) => {
3882
3878
  setOpenSearchResult(true);
3883
3879
  }, children: watchEnum === undefined
3884
3880
  ? ""
3885
- : translate.t(removeIndex(`${colLabel}.${watchEnum}`)) })), jsxRuntime.jsxs(PopoverRoot, { open: openSearchResult, onOpenChange: (e) => setOpenSearchResult(e.open), closeOnInteractOutside: true, initialFocusEl: () => ref.current, positioning: { placement: "bottom-start" }, children: [jsxRuntime.jsx(PopoverTrigger, {}), jsxRuntime.jsx(PopoverContent, { children: jsxRuntime.jsxs(PopoverBody, { display: "grid", gap: 1, children: [jsxRuntime.jsx(react.Input, { placeholder: translate.t(`${column}.typeToSearch`), onChange: (event) => {
3881
+ : translate.t(removeIndex(`${colLabel}.${watchEnum}`)) })), jsxRuntime.jsxs(PopoverRoot, { open: openSearchResult, onOpenChange: (e) => setOpenSearchResult(e.open), closeOnInteractOutside: true, initialFocusEl: () => ref.current, positioning: { placement: "bottom-start" }, children: [jsxRuntime.jsx(PopoverTrigger, {}), jsxRuntime.jsx(PopoverContent, { children: jsxRuntime.jsxs(PopoverBody, { display: "grid", gap: 1, children: [jsxRuntime.jsx(react.Input, { placeholder: translate.t(`${column}.type_to_search`), onChange: (event) => {
3886
3882
  onSearchChange(event);
3887
3883
  setOpenSearchResult(true);
3888
3884
  }, autoComplete: "off", ref: ref }), jsxRuntime.jsx(PopoverTitle, {}), jsxRuntime.jsx(react.Text, { children: `${translate.t(`${column}.total`)}: ${count}, ${translate.t(`${column}.showing`)} ${limit}` }), jsxRuntime.jsxs(react.Grid, { gridTemplateColumns: "repeat(auto-fit, minmax(15rem, 1fr))", overflow: "auto", maxHeight: "50vh", children: [jsxRuntime.jsx(react.Flex, { flexFlow: "column wrap", children: filterArray(dataList, searchText ?? "").map((item) => {
package/dist/index.mjs CHANGED
@@ -2902,7 +2902,7 @@ const Checkbox = React.forwardRef(function Checkbox(props, ref) {
2902
2902
  return (jsxs(Checkbox$1.Root, { ref: rootRef, ...rest, children: [jsx(Checkbox$1.HiddenInput, { ref: ref, ...inputProps }), jsx(Checkbox$1.Control, { children: icon || jsx(Checkbox$1.Indicator, {}) }), children != null && (jsx(Checkbox$1.Label, { children: children }))] }));
2903
2903
  });
2904
2904
 
2905
- const TableBody = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, showSelector = false, alwaysShowSelector = true, canResize = true, }) => {
2905
+ const TableBody = ({ showSelector = false, alwaysShowSelector = true, canResize = true, }) => {
2906
2906
  "use no memo";
2907
2907
  const { table } = useDataTableContext();
2908
2908
  const SELECTION_BOX_WIDTH = 20;
@@ -2916,12 +2916,7 @@ const TableBody = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, sho
2916
2916
  left: showSelector
2917
2917
  ? `${cell.column.getStart("left") + SELECTION_BOX_WIDTH + table.getDensityValue() * 2}px`
2918
2918
  : `${cell.column.getStart("left")}px`,
2919
- background: pinnedBgColor.light,
2920
- position: "sticky",
2921
- zIndex: -1,
2922
- _dark: {
2923
- backgroundColor: pinnedBgColor.dark,
2924
- },
2919
+ position: "relative",
2925
2920
  }
2926
2921
  : {};
2927
2922
  return tdProps;
@@ -2943,9 +2938,11 @@ const TableBody = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, sho
2943
2938
  return (jsxs(Table$1.Row, { display: "flex", zIndex: 1, onMouseEnter: () => handleRowHover(index), onMouseLeave: () => handleRowHover(-1), ...getTrProps({ hoveredRow, index }), children: [showSelector && (jsx(TableRowSelector, { index: index, row: row, hoveredRow: hoveredRow, alwaysShowSelector: alwaysShowSelector })), row.getVisibleCells().map((cell, index) => {
2944
2939
  return (jsx(Table$1.Cell, { padding: `${table.getDensityValue()}px`,
2945
2940
  // styling resize and pinning start
2946
- flex: `${canResize ? "0" : "1"} 0 ${cell.column.getSize()}px`, backgroundColor: "white", ...getTdProps(cell), _dark: {
2947
- backgroundColor: "gray.950",
2948
- }, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, `chakra-table-rowcell-${cell.id}-${index}`));
2941
+ flex: `${canResize ? "0" : "1"} 0 ${cell.column.getSize()}px`, color: {
2942
+ base: "colorPalette.900",
2943
+ _dark: "colorPalette.100",
2944
+ },
2945
+ bg: { base: "colorPalette.50", _dark: "colorPalette.950" }, ...getTdProps(cell), children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, `chakra-table-rowcell-${cell.id}-${index}`));
2949
2946
  })] }, `chakra-table-row-${row.id}`));
2950
2947
  }) }));
2951
2948
  };
@@ -3151,12 +3148,8 @@ const TableHeader = ({ canResize = true, pinnedBgColor = { light: "gray.50", dar
3151
3148
  left: showSelector
3152
3149
  ? `${header.getStart("left") + SELECTION_BOX_WIDTH + table.getDensityValue() * 2}px`
3153
3150
  : `${header.getStart("left")}px`,
3154
- background: pinnedBgColor.light,
3155
3151
  position: "sticky",
3156
3152
  zIndex: 100 + 1,
3157
- _dark: {
3158
- backgroundColor: pinnedBgColor.dark,
3159
- },
3160
3153
  }
3161
3154
  : {};
3162
3155
  return thProps;
@@ -3187,7 +3180,11 @@ const TableHeader = ({ canResize = true, pinnedBgColor = { light: "gray.50", dar
3187
3180
  };
3188
3181
  return (jsxs(Table$1.ColumnHeader, { padding: 0, columnSpan: `${header.colSpan}`,
3189
3182
  // styling resize and pinning start
3190
- flex: `${canResize ? "0" : "1"} 0 ${header.column.getSize()}px`, display: "grid", gridTemplateColumns: "1fr auto", zIndex: 1500 + header.index, ...getThProps(header), children: [jsxs(MenuRoot, { children: [jsx(MenuTrigger, { asChild: true, children: jsx(Flex, { padding: `${table.getDensityValue()}px`, alignItems: "center", justifyContent: "start", borderRadius: "0rem", overflow: "auto", _hover: {
3183
+ flex: `${canResize ? "0" : "1"} 0 ${header.column.getSize()}px`, display: "grid", gridTemplateColumns: "1fr auto", zIndex: 1500 + header.index, color: {
3184
+ base: "colorPalette.800",
3185
+ _dark: "colorPalette.200",
3186
+ },
3187
+ bg: { base: "colorPalette.100", _dark: "colorPalette.900" }, ...getThProps(header), children: [jsxs(MenuRoot, { children: [jsx(MenuTrigger, { asChild: true, children: jsx(Flex, { padding: `${table.getDensityValue()}px`, alignItems: "center", justifyContent: "start", borderRadius: "0rem", overflow: "auto", _hover: {
3191
3188
  backgroundColor: "gray.100",
3192
3189
  _dark: {
3193
3190
  backgroundColor: "gray.700",
@@ -3851,7 +3848,6 @@ const EnumPicker = ({ column, isMultiple = false, schema, prefix, }) => {
3851
3848
  return jsx(Fragment, { children: "undefined" });
3852
3849
  }
3853
3850
  return (jsx(Tag, { closable: true, onClick: () => {
3854
- // setSelectedEnums((state) => state.filter((id) => id != item));
3855
3851
  setValue(column, watchEnums.filter((id) => id != item));
3856
3852
  }, children: !!renderDisplay === true
3857
3853
  ? renderDisplay(item)
@@ -3862,7 +3858,7 @@ const EnumPicker = ({ column, isMultiple = false, schema, prefix, }) => {
3862
3858
  setOpenSearchResult(true);
3863
3859
  }, children: watchEnum === undefined
3864
3860
  ? ""
3865
- : translate.t(removeIndex(`${colLabel}.${watchEnum}`)) })), jsxs(PopoverRoot, { open: openSearchResult, onOpenChange: (e) => setOpenSearchResult(e.open), closeOnInteractOutside: true, initialFocusEl: () => ref.current, positioning: { placement: "bottom-start" }, children: [jsx(PopoverTrigger, {}), jsx(PopoverContent, { children: jsxs(PopoverBody, { display: "grid", gap: 1, children: [jsx(Input, { placeholder: translate.t(`${column}.typeToSearch`), onChange: (event) => {
3861
+ : translate.t(removeIndex(`${colLabel}.${watchEnum}`)) })), jsxs(PopoverRoot, { open: openSearchResult, onOpenChange: (e) => setOpenSearchResult(e.open), closeOnInteractOutside: true, initialFocusEl: () => ref.current, positioning: { placement: "bottom-start" }, children: [jsx(PopoverTrigger, {}), jsx(PopoverContent, { children: jsxs(PopoverBody, { display: "grid", gap: 1, children: [jsx(Input, { placeholder: translate.t(`${column}.type_to_search`), onChange: (event) => {
3866
3862
  onSearchChange(event);
3867
3863
  setOpenSearchResult(true);
3868
3864
  }, autoComplete: "off", ref: ref }), jsx(PopoverTitle, {}), jsx(Text, { children: `${translate.t(`${column}.total`)}: ${count}, ${translate.t(`${column}.showing`)} ${limit}` }), jsxs(Grid, { gridTemplateColumns: "repeat(auto-fit, minmax(15rem, 1fr))", overflow: "auto", maxHeight: "50vh", children: [jsx(Flex, { flexFlow: "column wrap", children: filterArray(dataList, searchText ?? "").map((item) => {
package/dist/types/components/DataTable/display/TableBody.d.ts CHANGED
@@ -18,4 +18,4 @@ export interface TableRowSelectorProps<TData> {
18
18
  };
19
19
  alwaysShowSelector?: boolean;
20
20
  }
21
- export declare const TableBody: ({ pinnedBgColor, showSelector, alwaysShowSelector, canResize, }: TableBodyProps) => import("react/jsx-runtime").JSX.Element;
21
+ export declare const TableBody: ({ showSelector, alwaysShowSelector, canResize, }: TableBodyProps) => import("react/jsx-runtime").JSX.Element;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bsol-oss/react-datatable5",
3
- "version": "12.0.0-beta.16",
3
+ "version": "12.0.0-beta.17",
4
4
  "type": "module",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",