@bsol-oss/react-datatable5 8.0.2 → 8.1.1

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.ts CHANGED
@@ -3,7 +3,7 @@ import { Row, RowData, OnChangeFn, Updater, FilterFn, ColumnDef, RowSelectionSta
3
3
  import * as React$1 from 'react';
4
4
  import React__default, { ReactNode } from 'react';
5
5
  import * as react_jsx_runtime from 'react/jsx-runtime';
6
- import { ImageProps, TableHeaderProps as TableHeaderProps$1, TableRootProps, GridProps, CardBodyProps, FlexProps, TextProps } from '@chakra-ui/react';
6
+ import { ImageProps, TableHeaderProps as TableHeaderProps$1, TableRootProps, GridProps, CardBodyProps, FlexProps, TextProps, BoxProps } from '@chakra-ui/react';
7
7
  import { IconType } from 'react-icons';
8
8
  import { RankingInfo } from '@tanstack/match-sorter-utils';
9
9
  import { UseQueryResult } from '@tanstack/react-query';
@@ -530,6 +530,12 @@ interface GetStyleProps {
530
530
  interface RangeDatePickerProps extends Props, RangeCalendarProps {
531
531
  }
532
532
 
533
+ interface RecordDisplayProps {
534
+ object: object | null;
535
+ boxProps?: BoxProps;
536
+ }
537
+ declare const RecordDisplay: ({ object, boxProps }: RecordDisplayProps) => react_jsx_runtime.JSX.Element;
538
+
533
539
  declare module "@tanstack/react-table" {
534
540
  interface ColumnMeta<TData extends RowData, TValue> {
535
541
  /**
@@ -588,4 +594,4 @@ declare module "@tanstack/react-table" {
588
594
  }
589
595
  }
590
596
 
591
- export { type CalendarProps, CardHeader, type CardHeaderProps, type CustomJSONSchema7Definition, DataDisplay, type DataDisplayProps, type DataResponse, DataTable, type DataTableDefaultState, type DataTableProps, DataTableServer, type DataTableServerProps, type DatePickerProps, DefaultCardTitle, DefaultTable, type DefaultTableProps, DensityToggleButton, type DensityToggleButtonProps, type DisplayTextProps, EditFilterButton, type EditFilterButtonProps, EditOrderButton, type EditOrderButtonProps, EditSortingButton, type EditSortingButtonProps, EditViewButton, type EditViewButtonProps, EmptyState, type EmptyStateProps, ErrorAlert, type ErrorAlertProps, FilterOptions, type FilterOptionsProps, Form, type FormProps, type GetColumnsConfigs, type GetDateColorProps, type GetMultiDatesProps, type GetRangeDatesProps, type GetStyleProps, type GetVariantProps, GlobalFilter, PageSizeControl, type PageSizeControlProps, type RangeCalendarProps, type RangeDatePickerProps, ReloadButton, type ReloadButtonProps, ResetFilteringButton, type ResetFilteringButtonProps, ResetSelectionButton, type ResetSelectionButtonProps, ResetSortingButton, type ResetSortingButtonProps, type Result, RowCountText, Table, TableBody, type TableBodyProps, TableCardContainer, type TableCardContainerProps, TableCards, type TableCardsProps, TableComponent, TableControls, type TableControlsProps, TableFilter, TableFilterTags, TableFooter, type TableFooterProps, TableHeader, type TableHeaderProps, TableLoadingComponent, type TableLoadingComponentProps, TableOrderer, TablePagination, type TableProps, type TableRendererProps, type TableRowSelectorProps, TableSelector, TableSorter, TableViewer, TextCell, type TextCellProps, type UseDataTableProps, type UseDataTableReturn, type UseDataTableServerProps, type UseDataTableServerReturn, getColumns, getMultiDates, getRangeDates, useDataTable, useDataTableContext, useDataTableServer, widthSanityCheck };
597
+ export { type CalendarProps, CardHeader, type CardHeaderProps, type CustomJSONSchema7Definition, DataDisplay, type DataDisplayProps, type DataResponse, DataTable, type DataTableDefaultState, type DataTableProps, DataTableServer, type DataTableServerProps, type DatePickerProps, DefaultCardTitle, DefaultTable, type DefaultTableProps, DensityToggleButton, type DensityToggleButtonProps, type DisplayTextProps, EditFilterButton, type EditFilterButtonProps, EditOrderButton, type EditOrderButtonProps, EditSortingButton, type EditSortingButtonProps, EditViewButton, type EditViewButtonProps, EmptyState, type EmptyStateProps, ErrorAlert, type ErrorAlertProps, FilterOptions, type FilterOptionsProps, Form, type FormProps, type GetColumnsConfigs, type GetDateColorProps, type GetMultiDatesProps, type GetRangeDatesProps, type GetStyleProps, type GetVariantProps, GlobalFilter, PageSizeControl, type PageSizeControlProps, type RangeCalendarProps, type RangeDatePickerProps, RecordDisplay, type RecordDisplayProps, ReloadButton, type ReloadButtonProps, ResetFilteringButton, type ResetFilteringButtonProps, ResetSelectionButton, type ResetSelectionButtonProps, ResetSortingButton, type ResetSortingButtonProps, type Result, RowCountText, Table, TableBody, type TableBodyProps, TableCardContainer, type TableCardContainerProps, TableCards, type TableCardsProps, TableComponent, TableControls, type TableControlsProps, TableFilter, TableFilterTags, TableFooter, type TableFooterProps, TableHeader, type TableHeaderProps, TableLoadingComponent, type TableLoadingComponentProps, TableOrderer, TablePagination, type TableProps, type TableRendererProps, type TableRowSelectorProps, TableSelector, TableSorter, TableViewer, TextCell, type TextCellProps, type UseDataTableProps, type UseDataTableReturn, type UseDataTableServerProps, type UseDataTableServerReturn, getColumns, getMultiDates, getRangeDates, useDataTable, useDataTableContext, useDataTableServer, widthSanityCheck };
package/dist/index.js CHANGED
@@ -371,7 +371,7 @@ const ResetFilteringButton = ({ text = "Reset Filtering", }) => {
371
371
  }, children: text }));
372
372
  };
373
373
 
374
- const EditFilterButton = ({ text, title = "Edit Filter", closeText = "Close", resetText = "Reset", icon = jsxRuntime.jsx(md.MdFilterAlt, {}), }) => {
374
+ const EditFilterButton$1 = ({ text, title = "Edit Filter", closeText = "Close", resetText = "Reset", icon = jsxRuntime.jsx(md.MdFilterAlt, {}), }) => {
375
375
  const filterModal = react.useDisclosure();
376
376
  return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(DialogRoot, { size: ["full", "full", "md", "md"], open: filterModal.open, children: jsxRuntime.jsxs(DialogRoot, { children: [jsxRuntime.jsx(DialogTrigger, { asChild: true, children: jsxRuntime.jsxs(react.Button, { as: react.Box, variant: "ghost", onClick: filterModal.onOpen, children: [icon, " ", text] }) }), jsxRuntime.jsxs(DialogContent, { children: [jsxRuntime.jsx(DialogHeader, { children: jsxRuntime.jsx(DialogTitle, { children: title }) }), jsxRuntime.jsx(DialogBody, { children: jsxRuntime.jsxs(react.Flex, { flexFlow: "column", gap: "1rem", children: [jsxRuntime.jsx(TableFilter, {}), jsxRuntime.jsx(ResetFilteringButton, { text: resetText })] }) }), jsxRuntime.jsxs(DialogFooter, { children: [jsxRuntime.jsx(DialogActionTrigger, { asChild: true, children: jsxRuntime.jsx(react.Button, { onClick: filterModal.onClose, children: closeText }) }), jsxRuntime.jsx(react.Button, { children: "Save" })] }), jsxRuntime.jsx(DialogCloseTrigger, {})] })] }) }) }));
377
377
  };
@@ -2450,7 +2450,7 @@ const TableViewer = () => {
2450
2450
  }) }));
2451
2451
  };
2452
2452
 
2453
- const EditViewButton = ({ text, icon = jsxRuntime.jsx(io.IoMdEye, {}), title = "Edit View", }) => {
2453
+ const EditViewButton$1 = ({ text, icon = jsxRuntime.jsx(io.IoMdEye, {}), title = "Edit View", }) => {
2454
2454
  const viewModel = react.useDisclosure();
2455
2455
  return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(DialogRoot, { children: [jsxRuntime.jsx(react.DialogBackdrop, {}), jsxRuntime.jsx(DialogTrigger, { asChild: true, children: jsxRuntime.jsxs(react.Button, { as: react.Box, variant: "ghost", onClick: viewModel.onOpen, children: [icon, " ", text] }) }), jsxRuntime.jsxs(DialogContent, { children: [jsxRuntime.jsx(DialogCloseTrigger, {}), jsxRuntime.jsxs(DialogHeader, { children: [jsxRuntime.jsx(DialogTitle, {}), title] }), jsxRuntime.jsx(DialogBody, { children: jsxRuntime.jsx(TableViewer, {}) }), jsxRuntime.jsx(DialogFooter, {})] })] }) }));
2456
2456
  };
@@ -2605,7 +2605,6 @@ const snakeToLabel = (str) => {
2605
2605
  };
2606
2606
 
2607
2607
  const RecordDisplay = ({ object, boxProps }) => {
2608
- console.log(object, "dkfos");
2609
2608
  if (object === null) {
2610
2609
  return jsxRuntime.jsx(jsxRuntime.Fragment, { children: "null" });
2611
2610
  }
@@ -3198,7 +3197,7 @@ const useDataTableServerContext = () => {
3198
3197
  return { ...context, isEmpty };
3199
3198
  };
3200
3199
 
3201
- const ReloadButton = ({ text = "Reload", variant = "icon", }) => {
3200
+ const ReloadButton$1 = ({ text = "Reload", variant = "icon", }) => {
3202
3201
  const { url } = useDataTableServerContext();
3203
3202
  const queryClient = reactQuery.useQueryClient();
3204
3203
  if (variant === "icon") {
@@ -3243,7 +3242,7 @@ const TableComponent = ({ render = () => {
3243
3242
  return render(table);
3244
3243
  };
3245
3244
 
3246
- const TableFilterTags = () => {
3245
+ const TableFilterTags$1 = () => {
3247
3246
  const { table } = useDataTableContext();
3248
3247
  return (jsxRuntime.jsx(react.Flex, { gap: "0.5rem", flexFlow: "wrap", children: table.getState().columnFilters.map(({ id, value }) => {
3249
3248
  return (jsxRuntime.jsx(Tag, { gap: "0.5rem", closable: true, cursor: "pointer", onClick: () => {
@@ -3478,7 +3477,7 @@ const ErrorAlert = ({ showMessage = true }) => {
3478
3477
  return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: isError && (jsxRuntime.jsxs(react.Alert.Root, { status: "error", children: [jsxRuntime.jsx(react.Alert.Indicator, {}), jsxRuntime.jsxs(react.Alert.Content, { children: [jsxRuntime.jsx(react.Alert.Title, { children: error.name }), showMessage && (jsxRuntime.jsx(react.Alert.Description, { children: error.message }))] })] })) }));
3479
3478
  };
3480
3479
 
3481
- const FilterOptions = ({ column }) => {
3480
+ const FilterOptions$1 = ({ column }) => {
3482
3481
  const { table } = useDataTableContext();
3483
3482
  const tableColumn = table.getColumn(column);
3484
3483
  const options = tableColumn?.columnDef.meta?.filterOptions ?? [];
@@ -3510,7 +3509,7 @@ const InputGroup = React__namespace.forwardRef(function InputGroup(props, ref) {
3510
3509
  }), endElement && (jsxRuntime.jsx(react.InputElement, { placement: "end", ...endElementProps, children: endElement }))] }));
3511
3510
  });
3512
3511
 
3513
- const GlobalFilter = () => {
3512
+ const GlobalFilter$1 = () => {
3514
3513
  const { table } = useDataTableContext();
3515
3514
  const [searchTerm, setSearchTerm] = React.useState("");
3516
3515
  const debouncedSearchTerm = usehooks.useDebounce(searchTerm, 500);
@@ -4797,17 +4796,18 @@ exports.DataTableServer = DataTableServer;
4797
4796
  exports.DefaultCardTitle = DefaultCardTitle;
4798
4797
  exports.DefaultTable = DefaultTable;
4799
4798
  exports.DensityToggleButton = DensityToggleButton;
4800
- exports.EditFilterButton = EditFilterButton;
4799
+ exports.EditFilterButton = EditFilterButton$1;
4801
4800
  exports.EditOrderButton = EditOrderButton;
4802
4801
  exports.EditSortingButton = EditSortingButton;
4803
- exports.EditViewButton = EditViewButton;
4802
+ exports.EditViewButton = EditViewButton$1;
4804
4803
  exports.EmptyState = EmptyState;
4805
4804
  exports.ErrorAlert = ErrorAlert;
4806
- exports.FilterOptions = FilterOptions;
4805
+ exports.FilterOptions = FilterOptions$1;
4807
4806
  exports.Form = Form;
4808
- exports.GlobalFilter = GlobalFilter;
4807
+ exports.GlobalFilter = GlobalFilter$1;
4809
4808
  exports.PageSizeControl = PageSizeControl;
4810
- exports.ReloadButton = ReloadButton;
4809
+ exports.RecordDisplay = RecordDisplay;
4810
+ exports.ReloadButton = ReloadButton$1;
4811
4811
  exports.ResetFilteringButton = ResetFilteringButton;
4812
4812
  exports.ResetSelectionButton = ResetSelectionButton;
4813
4813
  exports.ResetSortingButton = ResetSortingButton;
@@ -4819,7 +4819,7 @@ exports.TableCards = TableCards;
4819
4819
  exports.TableComponent = TableComponent;
4820
4820
  exports.TableControls = TableControls;
4821
4821
  exports.TableFilter = TableFilter;
4822
- exports.TableFilterTags = TableFilterTags;
4822
+ exports.TableFilterTags = TableFilterTags$1;
4823
4823
  exports.TableFooter = TableFooter;
4824
4824
  exports.TableHeader = TableHeader;
4825
4825
  exports.TableLoadingComponent = TableLoadingComponent;
package/dist/index.mjs CHANGED
@@ -351,7 +351,7 @@ const ResetFilteringButton = ({ text = "Reset Filtering", }) => {
351
351
  }, children: text }));
352
352
  };
353
353
 
354
- const EditFilterButton = ({ text, title = "Edit Filter", closeText = "Close", resetText = "Reset", icon = jsx(MdFilterAlt, {}), }) => {
354
+ const EditFilterButton$1 = ({ text, title = "Edit Filter", closeText = "Close", resetText = "Reset", icon = jsx(MdFilterAlt, {}), }) => {
355
355
  const filterModal = useDisclosure();
356
356
  return (jsx(Fragment, { children: jsx(DialogRoot, { size: ["full", "full", "md", "md"], open: filterModal.open, children: jsxs(DialogRoot, { children: [jsx(DialogTrigger, { asChild: true, children: jsxs(Button$1, { as: Box, variant: "ghost", onClick: filterModal.onOpen, children: [icon, " ", text] }) }), jsxs(DialogContent, { children: [jsx(DialogHeader, { children: jsx(DialogTitle, { children: title }) }), jsx(DialogBody, { children: jsxs(Flex, { flexFlow: "column", gap: "1rem", children: [jsx(TableFilter, {}), jsx(ResetFilteringButton, { text: resetText })] }) }), jsxs(DialogFooter, { children: [jsx(DialogActionTrigger, { asChild: true, children: jsx(Button$1, { onClick: filterModal.onClose, children: closeText }) }), jsx(Button$1, { children: "Save" })] }), jsx(DialogCloseTrigger, {})] })] }) }) }));
357
357
  };
@@ -2430,7 +2430,7 @@ const TableViewer = () => {
2430
2430
  }) }));
2431
2431
  };
2432
2432
 
2433
- const EditViewButton = ({ text, icon = jsx(IoMdEye, {}), title = "Edit View", }) => {
2433
+ const EditViewButton$1 = ({ text, icon = jsx(IoMdEye, {}), title = "Edit View", }) => {
2434
2434
  const viewModel = useDisclosure();
2435
2435
  return (jsx(Fragment, { children: jsxs(DialogRoot, { children: [jsx(DialogBackdrop, {}), jsx(DialogTrigger, { asChild: true, children: jsxs(Button$1, { as: Box, variant: "ghost", onClick: viewModel.onOpen, children: [icon, " ", text] }) }), jsxs(DialogContent, { children: [jsx(DialogCloseTrigger, {}), jsxs(DialogHeader, { children: [jsx(DialogTitle, {}), title] }), jsx(DialogBody, { children: jsx(TableViewer, {}) }), jsx(DialogFooter, {})] })] }) }));
2436
2436
  };
@@ -2585,7 +2585,6 @@ const snakeToLabel = (str) => {
2585
2585
  };
2586
2586
 
2587
2587
  const RecordDisplay = ({ object, boxProps }) => {
2588
- console.log(object, "dkfos");
2589
2588
  if (object === null) {
2590
2589
  return jsx(Fragment, { children: "null" });
2591
2590
  }
@@ -3178,7 +3177,7 @@ const useDataTableServerContext = () => {
3178
3177
  return { ...context, isEmpty };
3179
3178
  };
3180
3179
 
3181
- const ReloadButton = ({ text = "Reload", variant = "icon", }) => {
3180
+ const ReloadButton$1 = ({ text = "Reload", variant = "icon", }) => {
3182
3181
  const { url } = useDataTableServerContext();
3183
3182
  const queryClient = useQueryClient();
3184
3183
  if (variant === "icon") {
@@ -3223,7 +3222,7 @@ const TableComponent = ({ render = () => {
3223
3222
  return render(table);
3224
3223
  };
3225
3224
 
3226
- const TableFilterTags = () => {
3225
+ const TableFilterTags$1 = () => {
3227
3226
  const { table } = useDataTableContext();
3228
3227
  return (jsx(Flex, { gap: "0.5rem", flexFlow: "wrap", children: table.getState().columnFilters.map(({ id, value }) => {
3229
3228
  return (jsx(Tag, { gap: "0.5rem", closable: true, cursor: "pointer", onClick: () => {
@@ -3458,7 +3457,7 @@ const ErrorAlert = ({ showMessage = true }) => {
3458
3457
  return (jsx(Fragment, { children: isError && (jsxs(Alert.Root, { status: "error", children: [jsx(Alert.Indicator, {}), jsxs(Alert.Content, { children: [jsx(Alert.Title, { children: error.name }), showMessage && (jsx(Alert.Description, { children: error.message }))] })] })) }));
3459
3458
  };
3460
3459
 
3461
- const FilterOptions = ({ column }) => {
3460
+ const FilterOptions$1 = ({ column }) => {
3462
3461
  const { table } = useDataTableContext();
3463
3462
  const tableColumn = table.getColumn(column);
3464
3463
  const options = tableColumn?.columnDef.meta?.filterOptions ?? [];
@@ -3490,7 +3489,7 @@ const InputGroup = React.forwardRef(function InputGroup(props, ref) {
3490
3489
  }), endElement && (jsx(InputElement, { placement: "end", ...endElementProps, children: endElement }))] }));
3491
3490
  });
3492
3491
 
3493
- const GlobalFilter = () => {
3492
+ const GlobalFilter$1 = () => {
3494
3493
  const { table } = useDataTableContext();
3495
3494
  const [searchTerm, setSearchTerm] = useState("");
3496
3495
  const debouncedSearchTerm = useDebounce(searchTerm, 500);
@@ -4770,4 +4769,4 @@ const getMultiDates = ({ selected, selectedDate, selectedDates, selectable, }) =
4770
4769
  }
4771
4770
  };
4772
4771
 
4773
- export { CardHeader, DataDisplay, DataTable, DataTableServer, DefaultCardTitle, DefaultTable, DensityToggleButton, EditFilterButton, EditOrderButton, EditSortingButton, EditViewButton, EmptyState, ErrorAlert, FilterOptions, Form, GlobalFilter, PageSizeControl, ReloadButton, ResetFilteringButton, ResetSelectionButton, ResetSortingButton, RowCountText, Table, TableBody, TableCardContainer, TableCards, TableComponent, TableControls, TableFilter, TableFilterTags, TableFooter, TableHeader, TableLoadingComponent, TableOrderer, TablePagination, TableSelector, TableSorter, TableViewer, TextCell, getColumns, getMultiDates, getRangeDates, useDataTable, useDataTableContext, useDataTableServer, widthSanityCheck };
4772
+ export { CardHeader, DataDisplay, DataTable, DataTableServer, DefaultCardTitle, DefaultTable, DensityToggleButton, EditFilterButton$1 as EditFilterButton, EditOrderButton, EditSortingButton, EditViewButton$1 as EditViewButton, EmptyState, ErrorAlert, FilterOptions$1 as FilterOptions, Form, GlobalFilter$1 as GlobalFilter, PageSizeControl, RecordDisplay, ReloadButton$1 as ReloadButton, ResetFilteringButton, ResetSelectionButton, ResetSortingButton, RowCountText, Table, TableBody, TableCardContainer, TableCards, TableComponent, TableControls, TableFilter, TableFilterTags$1 as TableFilterTags, TableFooter, TableHeader, TableLoadingComponent, TableOrderer, TablePagination, TableSelector, TableSorter, TableViewer, TextCell, getColumns, getMultiDates, getRangeDates, useDataTable, useDataTableContext, useDataTableServer, widthSanityCheck };
@@ -103,3 +103,4 @@ export * from "./components/DatePicker/DatePicker";
103
103
  export * from "./components/DatePicker/getMultiDates";
104
104
  export * from "./components/DatePicker/getRangeDates";
105
105
  export * from "./components/DatePicker/RangeDatePicker";
106
+ export * from "./components/DataTable/components/RecordDisplay";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bsol-oss/react-datatable5",
3
- "version": "8.0.2",
3
+ "version": "8.1.1",
4
4
  "type": "module",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",