@vendorflow/components 2.0.91 → 2.0.93

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 (9) hide show
  1. package/lib/components/material-ui/DataTable/DataTable.d.ts +5 -1
  2. package/lib/components/material-ui/DataTable/DataTable.js +2 -2
  3. package/lib/components/material-ui/DataTable/DataTable.story.js +1 -2
  4. package/lib/components/material-ui/DataTable/TablePieces/BodyRow.d.ts +3 -2
  5. package/lib/components/material-ui/DataTable/TablePieces/BodyRow.js +2 -2
  6. package/lib/components/material-ui/DataTable/TablePieces/HeaderCell.js +1 -1
  7. package/lib/components/material-ui/DataTable/TablePieces/TableBodyContent.d.ts +2 -2
  8. package/lib/components/material-ui/DataTable/TablePieces/TableBodyContent.js +8 -10
  9. package/package.json +6 -6
package/lib/components/material-ui/DataTable/DataTable.d.ts CHANGED
@@ -22,7 +22,8 @@ export interface TableFeatureOptions<D extends object> {
22
22
  rowExpanding?: {
23
23
  enabled: boolean;
24
24
  mode: Mode;
25
- Component: (props: {
25
+ /** @deprecated Use the ExpandedRow component prop instead. */
26
+ Component?: (props: {
26
27
  data: D;
27
28
  }) => JSX.Element;
28
29
  autoResetExpanded?: boolean;
@@ -74,6 +75,9 @@ interface Props<D extends object> {
74
75
  options?: TableFeatureOptions<D>;
75
76
  renderActions?: () => ReactNode;
76
77
  renderRowSelectActions?: () => ReactNode;
78
+ ExpandedRow?: (props: {
79
+ data: D;
80
+ }) => JSX.Element;
77
81
  }
78
82
  export default function DataTable<D extends object>({ title, labels, columns, instance, options, renderActions, renderRowSelectActions, ...restOfProps }: Props<D>): JSX.Element;
79
83
  export declare function usePluginConfig<D extends object>(options: TableFeatureOptions<D>): PluginHook<D>[];
package/lib/components/material-ui/DataTable/DataTable.js CHANGED
@@ -114,7 +114,7 @@ function DataTable(_a) {
114
114
  var _h = __read((0, react_2.useState)(0), 2), scrollLeft = _h[0], setScrollLeft = _h[1];
115
115
  var _j = (labels || { noMatchLabel: NO_MATCH_TEXT }).noMatchLabel, noMatchLabel = _j === void 0 ? NO_MATCH_TEXT : _j;
116
116
  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;
117
- var ExpandedComponent = (rowExpandingConfig || {}).Component;
117
+ var ExpandedComponent = restOfProps.ExpandedRow || (rowExpandingConfig === null || rowExpandingConfig === void 0 ? void 0 : rowExpandingConfig.Component) || null;
118
118
  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;
119
119
  var pageOptions = ((_b = options === null || options === void 0 ? void 0 : options.pagination) === null || _b === void 0 ? void 0 : _b.rowsPerPageOptions) || instance.pageOptions;
120
120
  var columnNameById = (0, react_2.useMemo)(function () {
@@ -167,7 +167,7 @@ function DataTable(_a) {
167
167
  (0, react_1.jsx)(Toolbar_1.default, { title: title, allColumns: allColumns, columnNameById: columnNameById, globalFilter: globalFilter, enableFilters: filtersConfig === null || filtersConfig === void 0 ? void 0 : filtersConfig.enabled, enableGlobalSearch: globalSearchConfig === null || globalSearchConfig === void 0 ? void 0 : globalSearchConfig.enabled, enableHideColumns: columnHidingConfig === null || columnHidingConfig === void 0 ? void 0 : columnHidingConfig.enabled, hasRowsSelected: hasRowsSelected, numRowsSelected: numRowsSelected, setAllFilters: setAllFilters, setGlobalFilter: (globalSearchConfig === null || globalSearchConfig === void 0 ? void 0 : globalSearchConfig.setGlobalFilter) ? globalSearchConfig === null || globalSearchConfig === void 0 ? void 0 : globalSearchConfig.setGlobalFilter : setGlobalFilter, renderActions: renderActions, renderRowSelectActions: renderRowSelectActions }),
168
168
  (filtersConfig === null || filtersConfig === void 0 ? void 0 : filtersConfig.enabled) && ((0, react_1.jsx)(AppliedFilters_1.default, { columnNameById: columnNameById, filters: filters, setFilter: setFilter })))),
169
169
  (0, react_1.jsx)("div", { className: "DataTable__TableContainer", css: (0, react_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: ", "px;\n "], ["\n height: ", "px;\n "])), containerHeight) },
170
- (0, react_1.jsx)(Table_1.default, { getTableProps: getTableProps, css: (0, react_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n width: 100%;\n display: grid;\n grid-template-rows: auto 1fr;\n "], ["\n width: 100%;\n display: grid;\n grid-template-rows: auto 1fr;\n "]))) },
170
+ (0, react_1.jsx)(Table_1.default, { getTableProps: getTableProps, css: (0, react_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n width: 100%;\n display: grid;\n grid-template-rows: auto 1fr;\n grid-template-columns: calc(100% + ", "px);\n "], ["\n width: 100%;\n display: grid;\n grid-template-rows: auto 1fr;\n grid-template-columns: calc(100% + ", "px);\n "])), hasScrollbar.vertical ? scrollbarWidth : 0) },
171
171
  (0, react_1.jsx)(material_1.TableHead, { ref: tableHeadRef, className: "DataTable__TableHead", component: "div", css: (0, react_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n && {\n display: block;\n height: auto;\n width: calc(100% - ", "px);\n overflow-x: auto;\n -ms-overflow-style: none; /* IE and Edge */\n scrollbar-width: none; /* Firefox */\n\n &::-webkit-scrollbar {\n /* Hide scrollbar for Chrome, Safari and Opera */\n display: none;\n }\n }\n "], ["\n && {\n display: block;\n height: auto;\n width: calc(100% - ", "px);\n overflow-x: auto;\n -ms-overflow-style: none; /* IE and Edge */\n scrollbar-width: none; /* Firefox */\n\n &::-webkit-scrollbar {\n /* Hide scrollbar for Chrome, Safari and Opera */\n display: none;\n }\n }\n "])), hasScrollbar.vertical ? scrollbarWidth : 0), onScroll: function (evt) {
172
172
  var scrollLeft = evt.target.scrollLeft;
173
173
  setScrollLeft(scrollLeft);
package/lib/components/material-ui/DataTable/DataTable.story.js CHANGED
@@ -30,7 +30,6 @@ function DataTable() {
30
30
  rowExpanding: {
31
31
  enabled: true,
32
32
  mode: 'multi',
33
- Component: function () { return react_1.default.createElement("div", null, "Hello"); },
34
33
  },
35
34
  filters: {
36
35
  enabled: true,
@@ -72,6 +71,6 @@ function DataTable() {
72
71
  });
73
72
  return (react_1.default.createElement(material_1.ThemeProvider, { theme: (0, material_1.createTheme)() },
74
73
  react_1.default.createElement("div", { style: { height: '700px', width: '640px' } },
75
- 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"); } }))));
74
+ 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"); } }))));
76
75
  }
77
76
  exports.default = DataTable;
package/lib/components/material-ui/DataTable/TablePieces/BodyRow.d.ts CHANGED
@@ -7,12 +7,13 @@ import { TableRowProps } from 'react-table';
7
7
  interface Props<D extends object> {
8
8
  ExpandedComponent: ((props: {
9
9
  data: D;
10
- }) => JSX.Element) | undefined;
10
+ }) => JSX.Element) | null | undefined;
11
11
  row: EnhancedRow<D>;
12
12
  rowProps: Omit<TableRowProps, 'key'>;
13
13
  innerRef?: ((element?: Element | undefined) => void) | undefined;
14
14
  style?: CSSProperties;
15
+ className?: string;
15
16
  measure?: () => void;
16
17
  }
17
- export default function BodyRow<D extends object>({ ExpandedComponent, row, rowProps, innerRef, style, measure, }: Props<D>): jsx.JSX.Element;
18
+ export default function BodyRow<D extends object>({ ExpandedComponent, row, rowProps, innerRef, style, className: rootClassName, measure, }: Props<D>): jsx.JSX.Element;
18
19
  export {};
package/lib/components/material-ui/DataTable/TablePieces/BodyRow.js CHANGED
@@ -53,7 +53,7 @@ var material_1 = require("@mui/material");
53
53
  var BodyCell_1 = __importDefault(require("./BodyCell"));
54
54
  var lodash_1 = require("lodash");
55
55
  function BodyRow(_a) {
56
- var ExpandedComponent = _a.ExpandedComponent, row = _a.row, rowProps = _a.rowProps, innerRef = _a.innerRef, style = _a.style, measure = _a.measure;
56
+ var ExpandedComponent = _a.ExpandedComponent, row = _a.row, rowProps = _a.rowProps, innerRef = _a.innerRef, style = _a.style, rootClassName = _a.className, measure = _a.measure;
57
57
  var _b = __read((0, react_2.useState)(null), 2), element = _b[0], setElement = _b[1];
58
58
  var className = rowProps.className, rowPropsStyle = rowProps.style, restOfRowProps = __rest(rowProps, ["className", "style"]);
59
59
  var isExpanded = row.isExpanded;
@@ -71,7 +71,7 @@ function BodyRow(_a) {
71
71
  if (innerRef) {
72
72
  innerRef(node);
73
73
  }
74
- }, css: cx(style && css(style)) },
74
+ }, className: rootClassName, css: cx(style && css(style)) },
75
75
  (0, react_1.jsx)(material_1.TableRow, __assign({}, restOfRowProps, { component: "div", css: cx(
76
76
  // @ts-ignore
77
77
  css(rowPropsStyle), css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n && {\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n align-items: center;\n box-sizing: border-box;\n border-bottom: 1px solid rgba(224, 224, 224, 1);\n }\n "], ["\n && {\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n align-items: center;\n box-sizing: border-box;\n border-bottom: 1px solid rgba(224, 224, 224, 1);\n }\n "])))), className: className }), row.cells.map(function (cell) {
package/lib/components/material-ui/DataTable/TablePieces/HeaderCell.js CHANGED
@@ -46,7 +46,7 @@ function HeaderCell(_a) {
46
46
  // @ts-ignore
47
47
  css(style), css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n && {\n display: flex;\n box-sizing: border-box;\n padding: ", "px;\n }\n "], ["\n && {\n display: flex;\n box-sizing: border-box;\n padding: ", "px;\n }\n "])), DataTable_1.CELL_PADDING), !flexLayoutEnabled &&
48
48
  header.minWidth !== undefined && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n min-width: ", "px;\n "], ["\n min-width: ", "px;\n "])), header.minWidth), !flexLayoutEnabled &&
49
- header.maxWidth !== undefined && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n max-width: ", "px;\n "], ["\n max-width: ", "px;\n "])), header.maxWidth), header.id === DataTable_1.ACTION_COLUMN_ID && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n flex: none;\n "], ["\n flex: none;\n "])))), className: (0, classnames_1.default)(headerPropsClassName, className, "col-" + header.id) }),
49
+ header.maxWidth !== undefined && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n max-width: ", "px;\n "], ["\n max-width: ", "px;\n "])), header.maxWidth), header.id.includes(DataTable_1.ACTION_COLUMN_ID) && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n flex: none;\n "], ["\n flex: none;\n "])))), className: (0, classnames_1.default)(headerPropsClassName, className, "col-" + header.id) }),
50
50
  (0, react_1.jsx)("div", { css: cx(css(templateObject_5 || (templateObject_5 = __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')) },
51
51
  (0, react_1.jsx)("span", { css: cx(css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n font-weight: 600;\n flex: none;\n "], ["\n font-weight: 600;\n flex: none;\n "])))) }, header.render('Header')),
52
52
  (0, react_1.jsx)(SortIndicator_1.default, { canSort: header.canSort, isSorted: header.isSorted, isSortedDesc: header.isSortedDesc }),
package/lib/components/material-ui/DataTable/TablePieces/TableBodyContent.d.ts CHANGED
@@ -6,9 +6,9 @@ import { Row } from 'react-table';
6
6
  import { HasScrollbar } from '@vendorflow/common/lib/hooks';
7
7
  interface Props<D extends object> {
8
8
  defaultRowHeight: number;
9
- ExpandedComponent: ((props: {
9
+ ExpandedComponent?: ((props: {
10
10
  data: D;
11
- }) => JSX.Element) | undefined;
11
+ }) => JSX.Element) | null | undefined;
12
12
  flexLayoutEnabled: boolean;
13
13
  hasScrollbar: HasScrollbar;
14
14
  hasScrollbarRefCallback: (node: HTMLDivElement | null) => void;
package/lib/components/material-ui/DataTable/TablePieces/TableBodyContent.js CHANGED
@@ -28,12 +28,10 @@ var react_2 = require("react");
28
28
  var hooks_1 = require("@vendorflow/common/lib/hooks");
29
29
  function TableBodyContent(_a) {
30
30
  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;
31
+ var trueWidth = width ? width - (hasScrollbar.vertical ? scrollbarWidth : 0) : 0;
31
32
  var scrollContentWidth = (0, react_2.useMemo)(function () {
32
- if (!flexLayoutEnabled || !width) {
33
- return totalColumnsWidth;
34
- }
35
- return width - (hasScrollbar.vertical ? scrollbarWidth : 0);
36
- }, [flexLayoutEnabled, totalColumnsWidth, width, hasScrollbar, scrollbarWidth]);
33
+ return trueWidth > totalColumnsWidth ? trueWidth : totalColumnsWidth;
34
+ }, [flexLayoutEnabled, totalColumnsWidth, trueWidth, hasScrollbar, scrollbarWidth]);
37
35
  var forceUpdate = (0, hooks_1.useForceUpdate)();
38
36
  var cache = (0, react_2.useRef)(new react_virtualized_1.CellMeasurerCache({ fixedWidth: true, defaultHeight: defaultRowHeight, defaultWidth: scrollContentWidth }));
39
37
  (0, react_2.useEffect)(function () {
@@ -81,11 +79,11 @@ function TableBodyContent(_a) {
81
79
  (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) {
82
80
  prepareRow(row);
83
81
  var _a = row.getRowProps(), key = _a.key, restOfRowProps = __rest(_a, ["key"]);
84
- return ((0, react_1.jsx)(BodyRow_1.default, { key: key, ExpandedComponent: ExpandedComponent, row: row, rowProps: restOfRowProps }));
85
- })) : ((0, react_1.jsx)(material_1.TableRow, { component: "div", css: (0, react_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n && {\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n align-items: center;\n box-sizing: border-box;\n min-width: 100%;\n width: 100%;\n border-bottom: 1px solid rgba(224, 224, 224, 1);\n }\n\n &&:last-child {\n border-bottom: none;\n }\n "], ["\n && {\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n align-items: center;\n box-sizing: border-box;\n min-width: 100%;\n width: 100%;\n border-bottom: 1px solid rgba(224, 224, 224, 1);\n }\n\n &&:last-child {\n border-bottom: none;\n }\n "]))) },
86
- (0, react_1.jsx)(material_1.TableCell, { component: "div", variant: "body", css: (0, react_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n && {\n display: block;\n border-bottom: none;\n width: 100%;\n }\n "], ["\n && {\n display: block;\n border-bottom: none;\n width: 100%;\n }\n "]))) },
87
- (0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n text-align: center;\n "], ["\n text-align: center;\n "]))) },
82
+ return ((0, react_1.jsx)(BodyRow_1.default, { key: key, css: (0, react_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n width: ", ";\n "], ["\n width: ", ";\n "])), trueWidth > totalColumnsWidth ? '100%' : 'max-content'), ExpandedComponent: ExpandedComponent, row: row, rowProps: restOfRowProps }));
83
+ })) : ((0, react_1.jsx)(material_1.TableRow, { component: "div", css: (0, react_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n && {\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n align-items: center;\n box-sizing: border-box;\n min-width: 100%;\n width: 100%;\n border-bottom: 1px solid rgba(224, 224, 224, 1);\n }\n\n &&:last-child {\n border-bottom: none;\n }\n "], ["\n && {\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n align-items: center;\n box-sizing: border-box;\n min-width: 100%;\n width: 100%;\n border-bottom: 1px solid rgba(224, 224, 224, 1);\n }\n\n &&:last-child {\n border-bottom: none;\n }\n "]))) },
84
+ (0, react_1.jsx)(material_1.TableCell, { component: "div", variant: "body", css: (0, react_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n && {\n display: block;\n border-bottom: none;\n width: 100%;\n }\n "], ["\n && {\n display: block;\n border-bottom: none;\n width: 100%;\n }\n "]))) },
85
+ (0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n text-align: center;\n "], ["\n text-align: center;\n "]))) },
88
86
  (0, react_1.jsx)("span", null, noMatchLabel))))))))));
89
87
  }
90
88
  exports.default = TableBodyContent;
91
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
89
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vendorflow/components",
3
- "version": "2.0.91",
3
+ "version": "2.0.93",
4
4
  "description": "React components for vendorflow",
5
5
  "main": "lib/index.js",
6
6
  "types": "lib/index.d.ts",
@@ -138,19 +138,19 @@
138
138
  "devDependencies": {
139
139
  "@babel/cli": "^7.15.7",
140
140
  "@babel/preset-react": "^7.9.4",
141
- "@storybook/addon-actions": "^6.4.22",
141
+ "@storybook/addon-actions": "^6.5.14",
142
142
  "@storybook/addon-knobs": "^6.3.1",
143
- "@storybook/addon-links": "^6.4.22",
144
- "@storybook/addons": "^6.4.22",
143
+ "@storybook/addon-links": "^6.5.14",
144
+ "@storybook/addons": "^6.5.14",
145
145
  "@storybook/preset-create-react-app": "^2.1.1",
146
- "@storybook/react": "^6.4.22",
146
+ "@storybook/react": "^6.5.14",
147
147
  "@types/lodash": "^4.14.150",
148
148
  "@types/react-measure": "^2.0.7",
149
149
  "@types/react-text-mask": "^5.4.6",
150
150
  "@types/react-virtualized": "^9.21.21",
151
151
  "eslint-config-prettier": "^8.3.0",
152
152
  "eslint-plugin-prettier": "^3.4.0",
153
- "eslint-plugin-storybook": "^0.5.11",
153
+ "eslint-plugin-storybook": "^0.6.8",
154
154
  "eslint-webpack-plugin": "^2.5.4",
155
155
  "prettier": "^2.0.5",
156
156
  "tslint": "^6.1.2",