@vendorflow/components 2.0.81 → 2.0.82

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

@@ -3,6 +3,7 @@
 import { jsx } from '@emotion/react';
 import { Column, UseSortByColumnProps, HeaderGroup, UseSortByOptions, TableOptions, UseSortByColumnOptions, PluginHook, UsePaginationOptions, UseSortByInstanceProps, UsePaginationInstanceProps, TableInstance, TableState, UseSortByState, UsePaginationState, UseRowSelectOptions, UseRowSelectInstanceProps, UseRowSelectState, ColumnInstance, Row, UseRowSelectRowProps, UseExpandedOptions, UseExpandedInstanceProps, UseExpandedState, UseExpandedRowProps, ActionType, UseGlobalFiltersInstanceProps, UseGlobalFiltersState, UseFiltersOptions, UseFiltersInstanceProps, UseFiltersState, UseFiltersColumnOptions, UseFiltersColumnProps, Renderer, FilterProps, UseTableOptions, UseGlobalFiltersOptions, UseResizeColumnsColumnOptions, UseResizeColumnsColumnProps, UseResizeColumnsState } from 'react-table';
 import { ReactNode } from 'react';
+export declare const ACTION_COLUMN_ID = "action-column";
 export declare type Mode = 'single' | 'multi';
 export declare type CustomColumnConfigProps<D extends object> = {
     name?: string;

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

@@ -73,7 +73,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getColumnFilterConfig = exports.renderSingleLineCell = exports.useDefaultTableInstance = exports.usePluginConfig = exports.CELL_PADDING = void 0;
+exports.getColumnFilterConfig = exports.renderSingleLineCell = exports.useDefaultTableInstance = exports.usePluginConfig = exports.CELL_PADDING = exports.ACTION_COLUMN_ID = void 0;
 /** @jsxRuntime classic */
 /** @jsx jsx */
 var react_1 = require("@emotion/react");
@@ -95,6 +95,7 @@ var react_scrollbar_size_1 = __importDefault(require("react-scrollbar-size"));
 var Table_1 = __importDefault(require("./TablePieces/Table"));
 var HeaderCell_1 = __importDefault(require("./TablePieces/HeaderCell"));
 var TableBodyContent_1 = __importDefault(require("./TablePieces/TableBodyContent"));
+exports.ACTION_COLUMN_ID = 'action-column';
 exports.CELL_PADDING = 4;
 var EXPAND_BTN_WIDTH = 24;
 var NO_MATCH_TEXT = 'Sorry, no matching records found';
@@ -179,13 +180,13 @@ function DataTable(_a) {
                         return ((0, react_1.jsx)(HeaderCell_1.default, { key: key, header: header, headerProps: restOfHeaderProps, flexLayoutEnabled: (tableConfig === null || tableConfig === void 0 ? void 0 : tableConfig.flexLayoutEnabled) || false }));
                     })));
                 })),
-                (0, react_1.jsx)(TableBodyContent_1.default, { defaultRowHeight: defaultRowHeight, ExpandedComponent: ExpandedComponent, flexLayoutEnabled: (tableConfig === null || tableConfig === void 0 ? void 0 : tableConfig.flexLayoutEnabled) || false, hasScrollbarRefCallback: hasScrollbarRefCallback, height: tableBodyContentRect.height, isVirtualizeEnabled: !!(virtualizeConfig === null || virtualizeConfig === void 0 ? void 0 : virtualizeConfig.enabled), noMatchLabel: noMatchLabel, prepareRow: prepareRow, scrollContainerRef: scrollContainerRef, setScrollLeft: setScrollLeft, tableBodyRef: tableBodyRef, tableBodyMeasureRefCallback: tableBodyMeasureRefCallback, tableRows: tableRows, totalColumnsWidth: totalColumnsWidth, width: tableBodyContentRect.width }))),
+                (0, react_1.jsx)(TableBodyContent_1.default, { defaultRowHeight: defaultRowHeight, ExpandedComponent: ExpandedComponent, flexLayoutEnabled: (tableConfig === null || tableConfig === void 0 ? void 0 : tableConfig.flexLayoutEnabled) || false, hasScrollbar: hasScrollbar, hasScrollbarRefCallback: hasScrollbarRefCallback, height: tableBodyContentRect.height, isVirtualizeEnabled: !!(virtualizeConfig === null || virtualizeConfig === void 0 ? void 0 : virtualizeConfig.enabled), noMatchLabel: noMatchLabel, prepareRow: prepareRow, scrollContainerRef: scrollContainerRef, scrollbarWidth: scrollbarWidth, setScrollLeft: setScrollLeft, tableBodyRef: tableBodyRef, tableBodyMeasureRefCallback: tableBodyMeasureRefCallback, tableRows: tableRows, totalColumnsWidth: totalColumnsWidth, width: tableBodyContentRect.width }))),
         (paginationConfig === null || paginationConfig === void 0 ? void 0 : paginationConfig.enabled) && ((0, react_1.jsx)(material_1.TablePagination, { ref: paginationRef, className: "DataTable__Pagination", component: "div", count: rows.length, page: pageIndex, onPageChange: function (evt, newPage) { return gotoPage(newPage); }, onRowsPerPageChange: function (evt) { return setPageSize(Number(evt.target.value)); }, rowsPerPage: pageSize, rowsPerPageOptions: pageOptions }))));
 }
 exports.default = DataTable;
 function usePluginConfig(options) {
     var filters = options.filters, globalSearch = options.globalSearch, pagination = options.pagination, rowExpanding = options.rowExpanding, sorting = options.sorting, rowSelect = options.rowSelect, columnHiding = options.columnHiding, columnResizing = options.columnResizing, virtualize = options.virtualize;
-    var customCellWidth = (rowExpanding === null || rowExpanding === void 0 ? void 0 : rowExpanding.enabled) && (rowSelect === null || rowSelect === void 0 ? void 0 : rowSelect.enabled)
+    var actionColumnCellWidth = (rowExpanding === null || rowExpanding === void 0 ? void 0 : rowExpanding.enabled) && (rowSelect === null || rowSelect === void 0 ? void 0 : rowSelect.enabled)
         ? exports.CELL_PADDING * 2 + EXPAND_BTN_WIDTH + IndeterminateCheckbox_1.CHECKBOX_WIDTH
         : Math.max(EXPAND_BTN_WIDTH, IndeterminateCheckbox_1.CHECKBOX_WIDTH) + exports.CELL_PADDING * 2;
     return (0, react_2.useMemo)(function () {
@@ -223,10 +224,10 @@ function usePluginConfig(options) {
             result.push(function (hooks) {
                 hooks.visibleColumns.push(function (columns) { return __spreadArray([
                     {
-                        id: 'custom',
-                        width: customCellWidth,
-                        minWidth: customCellWidth,
-                        maxWidth: customCellWidth,
+                        id: exports.ACTION_COLUMN_ID,
+                        width: actionColumnCellWidth,
+                        minWidth: actionColumnCellWidth,
+                        maxWidth: actionColumnCellWidth,
                         Header: function (props) {
                             var _a = props, getToggleAllRowsSelectedProps = _a.getToggleAllRowsSelectedProps, getToggleAllPageRowsSelectedProps = _a.getToggleAllPageRowsSelectedProps;
                             return ((0, react_1.jsx)(react_2.Fragment, null,

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

@@ -51,7 +51,7 @@ function DataTable() {
             pageSize: 10,
         },
         virtualize: {
-            enabled: true,
+            enabled: false,
         },
         rowSelect: {
             enabled: true,

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

@@ -38,11 +38,12 @@ var DataTable_1 = require("../DataTable");
 function BodyCell(_a) {
     var cell = _a.cell, cellProps = _a.cellProps;
     var style = cellProps.style, className = cellProps.className, restOfCellProps = __rest(cellProps, ["style", "className"]);
+    var isActionColumn = cell.column.id === DataTable_1.ACTION_COLUMN_ID;
     return ((0, react_1.jsx)(react_1.ClassNames, null, function (_a) {
         var css = _a.css, cx = _a.cx;
         return ((0, react_1.jsx)(material_1.TableCell, __assign({ css: cx(
             // @ts-ignore
-            css(style), css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n              && {\n                padding: ", "px;\n                display: block;\n                border-bottom: none;\n              }\n            "], ["\n              && {\n                padding: ", "px;\n                display: block;\n                border-bottom: none;\n              }\n            "])), DataTable_1.CELL_PADDING)), className: (0, classnames_1.default)(className, cell.column.id === 'custom' ? 'cell-Custom' : undefined) }, restOfCellProps, { component: "div", variant: "body" }), cell.render('Cell')));
+            css(style), css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n              && {\n                padding: ", "px;\n                display: block;\n                border-bottom: none;\n                ", "\n              }\n            "], ["\n              && {\n                padding: ", "px;\n                display: block;\n                border-bottom: none;\n                ", "\n              }\n            "])), DataTable_1.CELL_PADDING, isActionColumn ? 'flex: none;' : '')), className: (0, classnames_1.default)(className, isActionColumn ? 'cell-ActionColumn' : undefined) }, restOfCellProps, { component: "div", variant: "body" }), cell.render('Cell')));
     }));
 }
 exports.default = BodyCell;

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

@@ -50,7 +50,7 @@ function HeaderCell(_a) {
             (0, react_1.jsx)("div", { css: cx(css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n                position: relative;\n                display: flex;\n                flex-direction: row;\n                justify-content: ", ";\n                align-items: center;\n                width: 100%;\n                overflow: hidden;\n                white-space: nowrap;\n                text-overflow: ellipsis;\n              "], ["\n                position: relative;\n                display: flex;\n                flex-direction: row;\n                justify-content: ", ";\n                align-items: center;\n                width: 100%;\n                overflow: hidden;\n                white-space: nowrap;\n                text-overflow: ellipsis;\n              "])), header.columns != null ? 'center' : 'flex-start')) },
                 (0, react_1.jsx)("span", { css: cx(css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n                  font-weight: 600;\n                  flex: none;\n                "], ["\n                  font-weight: 600;\n                  flex: none;\n                "])))) }, header.render('Header')),
                 (0, react_1.jsx)(SortIndicator_1.default, { canSort: header.canSort, isSorted: header.isSorted, isSortedDesc: header.isSortedDesc }),
-                header.id !== 'custom' && !header.id.includes('_placeholder') && !!header.getResizerProps && ((0, react_1.jsx)(icons_material_1.DragIndicator, __assign({ css: css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n                  position: absolute;\n                  right: 0;\n                  top: 50%;\n                  transform: translate(-50%, -50%);\n                  color: #b2b2b2;\n                  background-color: white;\n                "], ["\n                  position: absolute;\n                  right: 0;\n                  top: 50%;\n                  transform: translate(-50%, -50%);\n                  color: #b2b2b2;\n                  background-color: white;\n                "]))) }, header.getResizerProps()))))));
+                header.id !== DataTable_1.ACTION_COLUMN_ID && !header.id.includes('_placeholder') && !!header.getResizerProps && ((0, react_1.jsx)(icons_material_1.DragIndicator, __assign({ css: css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n                  position: absolute;\n                  right: 0;\n                  top: 50%;\n                  transform: translate(-50%, -50%);\n                  color: #b2b2b2;\n                  background-color: white;\n                "], ["\n                  position: absolute;\n                  right: 0;\n                  top: 50%;\n                  transform: translate(-50%, -50%);\n                  color: #b2b2b2;\n                  background-color: white;\n                "]))) }, header.getResizerProps()))))));
     }));
 }
 exports.default = HeaderCell;

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

@@ -3,17 +3,20 @@
 import { jsx } from '@emotion/react';
 import { Dispatch, MutableRefObject, SetStateAction } from 'react';
 import { Row } from 'react-table';
+import { HasScrollbar } from '@vendorflow/common/lib/hooks';
 interface Props<D extends object> {
     defaultRowHeight: number;
     ExpandedComponent: ((props: {
         data: D;
     }) => JSX.Element) | undefined;
     flexLayoutEnabled: boolean;
+    hasScrollbar: HasScrollbar;
     hasScrollbarRefCallback: (node: HTMLDivElement | null) => void;
     height: number | undefined;
     isVirtualizeEnabled: boolean;
     noMatchLabel?: string;
     prepareRow: (row: Row<D>) => void;
+    scrollbarWidth: number;
     scrollContainerRef: MutableRefObject<HTMLDivElement | null>;
     setScrollLeft: Dispatch<SetStateAction<number>>;
     tableBodyRef: MutableRefObject<HTMLDivElement | null>;
@@ -22,5 +25,5 @@ interface Props<D extends object> {
     totalColumnsWidth: number;
     width: number | undefined;
 }
-export default function TableBodyContent<D extends object>({ defaultRowHeight, ExpandedComponent, flexLayoutEnabled, hasScrollbarRefCallback, height, isVirtualizeEnabled, noMatchLabel, prepareRow, scrollContainerRef, setScrollLeft, tableBodyRef, tableBodyMeasureRefCallback, tableRows, totalColumnsWidth, width, }: Props<D>): jsx.JSX.Element;
+export default function TableBodyContent<D extends object>({ defaultRowHeight, ExpandedComponent, flexLayoutEnabled, hasScrollbar, hasScrollbarRefCallback, height, isVirtualizeEnabled, noMatchLabel, prepareRow, scrollbarWidth, scrollContainerRef, setScrollLeft, tableBodyRef, tableBodyMeasureRefCallback, tableRows, totalColumnsWidth, width, }: Props<D>): jsx.JSX.Element;
 export {};

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

@@ -25,20 +25,28 @@ var react_virtualized_1 = require("react-virtualized");
 var BodyRow_1 = __importDefault(require("./BodyRow"));
 var material_1 = require("@mui/material");
 var react_2 = require("react");
+var hooks_1 = require("@vendorflow/common/lib/hooks");
 function TableBodyContent(_a) {
-    var defaultRowHeight = _a.defaultRowHeight, ExpandedComponent = _a.ExpandedComponent, flexLayoutEnabled = _a.flexLayoutEnabled, hasScrollbarRefCallback = _a.hasScrollbarRefCallback, height = _a.height, isVirtualizeEnabled = _a.isVirtualizeEnabled, noMatchLabel = _a.noMatchLabel, prepareRow = _a.prepareRow, scrollContainerRef = _a.scrollContainerRef, setScrollLeft = _a.setScrollLeft, tableBodyRef = _a.tableBodyRef, tableBodyMeasureRefCallback = _a.tableBodyMeasureRefCallback, tableRows = _a.tableRows, totalColumnsWidth = _a.totalColumnsWidth, width = _a.width;
-    var defaultWidth = (0, react_2.useMemo)(function () { return (flexLayoutEnabled && width && width > totalColumnsWidth ? width : totalColumnsWidth); }, [flexLayoutEnabled, totalColumnsWidth, width]);
-    var cache = (0, react_2.useRef)(new react_virtualized_1.CellMeasurerCache({ fixedWidth: true, defaultHeight: defaultRowHeight, defaultWidth: defaultWidth }));
+    var defaultRowHeight = _a.defaultRowHeight, ExpandedComponent = _a.ExpandedComponent, flexLayoutEnabled = _a.flexLayoutEnabled, hasScrollbar = _a.hasScrollbar, hasScrollbarRefCallback = _a.hasScrollbarRefCallback, height = _a.height, isVirtualizeEnabled = _a.isVirtualizeEnabled, noMatchLabel = _a.noMatchLabel, prepareRow = _a.prepareRow, scrollbarWidth = _a.scrollbarWidth, scrollContainerRef = _a.scrollContainerRef, setScrollLeft = _a.setScrollLeft, tableBodyRef = _a.tableBodyRef, tableBodyMeasureRefCallback = _a.tableBodyMeasureRefCallback, tableRows = _a.tableRows, totalColumnsWidth = _a.totalColumnsWidth, width = _a.width;
+    var scrollContentWidth = (0, react_2.useMemo)(function () {
+        if (!flexLayoutEnabled || !width) {
+            return totalColumnsWidth;
+        }
+        return width - (hasScrollbar.vertical ? scrollbarWidth : 0);
+    }, [flexLayoutEnabled, totalColumnsWidth, width, hasScrollbar, scrollbarWidth]);
+    var forceUpdate = (0, hooks_1.useForceUpdate)();
+    var cache = (0, react_2.useRef)(new react_virtualized_1.CellMeasurerCache({ fixedWidth: true, defaultHeight: defaultRowHeight, defaultWidth: scrollContentWidth }));
     (0, react_2.useEffect)(function () {
         if (isVirtualizeEnabled) {
             cache.current = new react_virtualized_1.CellMeasurerCache({
                 fixedWidth: true,
                 defaultHeight: defaultRowHeight,
-                defaultWidth: defaultWidth,
+                defaultWidth: scrollContentWidth,
             });
             cache.current.clearAll();
+            forceUpdate();
         }
-    }, [defaultWidth]);
+    }, [scrollContentWidth]);
     function renderRow(_a) {
         var columnIndex = _a.columnIndex, rowIndex = _a.rowIndex, key = _a.key, parent = _a.parent, style = _a.style;
         var row = tableRows[rowIndex];
@@ -70,7 +78,7 @@ function TableBodyContent(_a) {
                 var scrollLeft = evt.target.scrollLeft;
                 setScrollLeft(scrollLeft);
             } },
-            (0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n              width: ", "px;\n            "], ["\n              width: ", "px;\n            "])), defaultWidth) }, tableRows.length > 0 ? (tableRows.map(function (row) {
+            (0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n              width: ", "px;\n            "], ["\n              width: ", "px;\n            "])), scrollContentWidth) }, tableRows.length > 0 ? (tableRows.map(function (row) {
                 prepareRow(row);
                 var _a = row.getRowProps(), key = _a.key, restOfRowProps = __rest(_a, ["key"]);
                 return ((0, react_1.jsx)(BodyRow_1.default, { key: key, ExpandedComponent: ExpandedComponent, row: row, rowProps: restOfRowProps }));

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

@@ -42,6 +42,7 @@ var material_1 = require("@mui/material");
 var icons_material_1 = require("@mui/icons-material");
 var nanoid_1 = require("nanoid");
 var IndeterminateCheckbox_1 = __importDefault(require("./IndeterminateCheckbox"));
+var DataTable_1 = require("../DataTable");
 function ViewColumnTool(_a) {
     var allColumns = _a.allColumns, columnNameById = _a.columnNameById;
     var id = (0, react_2.useMemo)(function () { return (0, nanoid_1.nanoid)(); }, []);
@@ -65,7 +66,7 @@ function ViewColumnTool(_a) {
                         (0, react_1.jsx)(material_1.IconButton, { onClick: handleClose },
                             (0, react_1.jsx)(icons_material_1.Close, null)))),
                 (0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n              display: flex;\n              flex-direction: column;\n              justify-content: flex-start;\n              align-items: flex-start;\n            "], ["\n              display: flex;\n              flex-direction: column;\n              justify-content: flex-start;\n              align-items: flex-start;\n            "]))) }, allColumns
-                    .filter(function (column) { return column.id !== 'custom'; })
+                    .filter(function (column) { return column.id !== DataTable_1.ACTION_COLUMN_ID; })
                     .map(function (column) {
                     return ((0, react_1.jsx)(material_1.FormControlLabel, { key: column.id, label: columnNameById[column.id], 
                         // @ts-ignore

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vendorflow/components",
-  "version": "2.0.81",
+  "version": "2.0.82",
   "description": "React components for vendorflow",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -62,7 +62,7 @@
     "@types/react-table": "^7.7.6",
     "@typescript-eslint/eslint-plugin": "^4.32.0",
     "@typescript-eslint/parser": "^4.32.0",
-    "@vendorflow/common": "^1.0.44",
+    "@vendorflow/common": "^1.0.50",
     "babel-eslint": "10.1.0",
     "babel-jest": "^24.9.0",
     "babel-loader": "^8.2.2",