@vendorflow/components 2.0.92 → 2.0.94

package/lib/components/material-ui/DataTable/DataTable.d.ts

@@ -22,7 +22,8 @@ export interface TableFeatureOptions<D extends object> {
     rowExpanding?: {
         enabled: boolean;
         mode: Mode;
-        Component: (props: {
+        /** @deprecated Use the ExpandedRow component prop instead. */
+        Component?: (props: {
             data: D;
         }) => JSX.Element;
         autoResetExpanded?: boolean;
@@ -74,8 +75,11 @@ interface Props<D extends object> {
     options?: TableFeatureOptions<D>;
     renderActions?: () => ReactNode;
     renderRowSelectActions?: () => ReactNode;
+    ExpandedRow?: (props: {
+        data: D;
+    }) => JSX.Element;
 }
-export default function DataTable<D extends object>({ title, labels, columns, instance, options, renderActions, renderRowSelectActions, ...restOfProps }: Props<D>): JSX.Element;
+export default function DataTable<D extends object>({ title, labels, columns, instance, options, renderActions, renderRowSelectActions, ExpandedRow, ...restOfProps }: Props<D>): JSX.Element;
 export declare function usePluginConfig<D extends object>(options: TableFeatureOptions<D>): PluginHook<D>[];
 export interface UseDefaultTableInstanceProps<D extends object> {
     columns: EnhancedColumn<D>[];

package/lib/components/material-ui/DataTable/DataTable.js

@@ -101,7 +101,7 @@ var EXPAND_BTN_WIDTH = 24;
 var NO_MATCH_TEXT = 'Sorry, no matching records found';
 function DataTable(_a) {
     var _b;
-    var title = _a.title, labels = _a.labels, columns = _a.columns, instance = _a.instance, options = _a.options, renderActions = _a.renderActions, renderRowSelectActions = _a.renderRowSelectActions, restOfProps = __rest(_a, ["title", "labels", "columns", "instance", "options", "renderActions", "renderRowSelectActions"]);
+    var title = _a.title, labels = _a.labels, columns = _a.columns, instance = _a.instance, options = _a.options, renderActions = _a.renderActions, renderRowSelectActions = _a.renderRowSelectActions, ExpandedRow = _a.ExpandedRow, restOfProps = __rest(_a, ["title", "labels", "columns", "instance", "options", "renderActions", "renderRowSelectActions", "ExpandedRow"]);
     var tableHeadRef = (0, react_2.useRef)(null);
     var tableBodyRef = (0, react_2.useRef)(null);
     var scrollContainerRef = (0, react_2.useRef)(null);
@@ -114,7 +114,7 @@ function DataTable(_a) {
     var _h = __read((0, react_2.useState)(0), 2), scrollLeft = _h[0], setScrollLeft = _h[1];
     var _j = (labels || { noMatchLabel: NO_MATCH_TEXT }).noMatchLabel, noMatchLabel = _j === void 0 ? NO_MATCH_TEXT : _j;
     var _k = options || {}, rowExpandingConfig = _k.rowExpanding, filtersConfig = _k.filters, globalSearchConfig = _k.globalSearch, columnHidingConfig = _k.columnHiding, paginationConfig = _k.pagination, sortingConfig = _k.sorting, tableConfig = _k.table, virtualizeConfig = _k.virtualize;
-    var ExpandedComponent = (rowExpandingConfig || {}).Component;
+    var ExpandedComponent = ExpandedRow || (rowExpandingConfig === null || rowExpandingConfig === void 0 ? void 0 : rowExpandingConfig.Component) || null;
     var allColumns = instance.allColumns, getTableProps = instance.getTableProps, gotoPage = instance.gotoPage, headerGroups = instance.headerGroups, page = instance.page, prepareRow = instance.prepareRow, rows = instance.rows, setAllFilters = instance.setAllFilters, setPageSize = instance.setPageSize, setFilter = instance.setFilter, setGlobalFilter = instance.setGlobalFilter, state = instance.state, totalColumnsWidth = instance.totalColumnsWidth;
     var pageOptions = ((_b = options === null || options === void 0 ? void 0 : options.pagination) === null || _b === void 0 ? void 0 : _b.rowsPerPageOptions) || instance.pageOptions;
     var columnNameById = (0, react_2.useMemo)(function () {

package/lib/components/material-ui/DataTable/DataTable.story.js

@@ -30,7 +30,6 @@ function DataTable() {
         rowExpanding: {
             enabled: true,
             mode: 'multi',
-            Component: function () { return react_1.default.createElement("div", null, "Hello"); },
         },
         filters: {
             enabled: true,
@@ -72,6 +71,6 @@ function DataTable() {
     });
     return (react_1.default.createElement(material_1.ThemeProvider, { theme: (0, material_1.createTheme)() },
         react_1.default.createElement("div", { style: { height: '700px', width: '640px' } },
-            react_1.default.createElement(DataTable_1.default, { title: "People", columns: columns, instance: instance, options: options, renderActions: function () { return react_1.default.createElement(material_1.Button, { onClick: function () { return alert('Thanks!'); } }, "Click Me"); }, renderRowSelectActions: function () { return react_1.default.createElement(material_1.Button, { onClick: function () { return alert('Thanks!'); } }, "Click Me"); } }))));
+            react_1.default.createElement(DataTable_1.default, { title: "People", columns: columns, instance: instance, options: options, renderActions: function () { return react_1.default.createElement(material_1.Button, { onClick: function () { return alert('Thanks!'); } }, "Click Me"); }, renderRowSelectActions: function () { return react_1.default.createElement(material_1.Button, { onClick: function () { return alert('Thanks!'); } }, "Click Me"); }, ExpandedRow: function () { return react_1.default.createElement("div", null, "Hello"); } }))));
 }
 exports.default = DataTable;

package/lib/components/material-ui/DataTable/TablePieces/BodyRow.d.ts

@@ -7,7 +7,7 @@ import { TableRowProps } from 'react-table';
 interface Props<D extends object> {
     ExpandedComponent: ((props: {
         data: D;
-    }) => JSX.Element) | undefined;
+    }) => JSX.Element) | null | undefined;
     row: EnhancedRow<D>;
     rowProps: Omit<TableRowProps, 'key'>;
     innerRef?: ((element?: Element | undefined) => void) | undefined;

package/lib/components/material-ui/DataTable/TablePieces/TableBodyContent.d.ts

@@ -6,9 +6,9 @@ import { Row } from 'react-table';
 import { HasScrollbar } from '@vendorflow/common/lib/hooks';
 interface Props<D extends object> {
     defaultRowHeight: number;
-    ExpandedComponent: ((props: {
+    ExpandedComponent?: ((props: {
         data: D;
-    }) => JSX.Element) | undefined;
+    }) => JSX.Element) | null | undefined;
     flexLayoutEnabled: boolean;
     hasScrollbar: HasScrollbar;
     hasScrollbarRefCallback: (node: HTMLDivElement | null) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vendorflow/components",
-  "version": "2.0.92",
+  "version": "2.0.94",
   "description": "React components for vendorflow",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",