@vendorflow/components 2.0.81 → 2.0.84

package/lib/components/material-ui/AudioPlayer/AudioPlayer.story.d.ts

@@ -1 +1,2 @@
-export declare const AudioPlayer: () => JSX.Element;
+declare const AudioPlayer: () => JSX.Element;
+export default AudioPlayer;

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

@@ -3,8 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AudioPlayer = void 0;
 var react_1 = __importDefault(require("react"));
 var AudioPlayer_1 = __importDefault(require("./AudioPlayer"));
 var AudioPlayer = function () { return (react_1.default.createElement(AudioPlayer_1.default, { src: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3' })); };
-exports.AudioPlayer = AudioPlayer;
+exports.default = AudioPlayer;

package/lib/components/material-ui/Button/Button.story.d.ts

@@ -1 +1,2 @@
-export declare const Button: () => JSX.Element;
+declare const Button: () => JSX.Element;
+export default Button;

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

@@ -3,8 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Button = void 0;
 var react_1 = __importDefault(require("react"));
 var Button_1 = __importDefault(require("./Button"));
 var Button = function () { return (react_1.default.createElement(Button_1.default, { color: "primary", loading: true }, "Submit")); };
-exports.Button = Button;
+exports.default = Button;

package/lib/components/material-ui/ButtonMenu/ButtonMenu.story.d.ts

@@ -1,2 +1,4 @@
+declare const _default: {};
+export default _default;
 export declare const ButtonMenuUsingDefault: () => JSX.Element;
 export declare const ButtonMenuUsingCustom: () => JSX.Element;

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

@@ -7,6 +7,7 @@ exports.ButtonMenuUsingCustom = exports.ButtonMenuUsingDefault = void 0;
 var react_1 = __importDefault(require("react"));
 var Button_1 = __importDefault(require("../Button"));
 var ButtonMenu_1 = __importDefault(require("./ButtonMenu"));
+exports.default = {};
 var menuItems = [
     {
         content: 'Option 1',

package/lib/components/material-ui/ColorPicker/ColorPicker.story.d.ts

@@ -1 +1,2 @@
-export declare function ColorPicker(): JSX.Element;
+declare function ColorPicker(): JSX.Element;
+export default ColorPicker;

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

@@ -38,11 +38,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ColorPicker = void 0;
 var react_1 = __importStar(require("react"));
 var ColorPicker_1 = __importDefault(require("./ColorPicker"));
 function ColorPicker() {
     var _a = __read((0, react_1.useState)(null), 2), value = _a[0], setValue = _a[1];
     return react_1.default.createElement(ColorPicker_1.default, { label: "Color Picker", value: value, onChange: function (evt) { return setValue(evt.target.value); } });
 }
-exports.ColorPicker = ColorPicker;
+exports.default = ColorPicker;

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.d.ts

@@ -1 +1,2 @@
-export declare function DataTable(): JSX.Element;
+declare function DataTable(): JSX.Element;
+export default DataTable;

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

@@ -19,7 +19,6 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DataTable = void 0;
 var react_1 = __importStar(require("react"));
 var DataTable_1 = __importStar(require("./DataTable"));
 var Data_1 = require("./Data");
@@ -51,7 +50,7 @@ function DataTable() {
             pageSize: 10,
         },
         virtualize: {
-            enabled: true,
+            enabled: false,
         },
         rowSelect: {
             enabled: true,
@@ -75,4 +74,4 @@ function DataTable() {
         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"); } }))));
 }
-exports.DataTable = DataTable;
+exports.default = DataTable;

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/lib/components/material-ui/InputCheckboxGroup/InputCheckboxGroup.story.d.ts

@@ -1 +1,2 @@
-export declare const InputCheckboxGroup: () => JSX.Element;
+declare const InputCheckboxGroup: () => JSX.Element;
+export default InputCheckboxGroup;

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

@@ -38,7 +38,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.InputCheckboxGroup = void 0;
 var react_1 = __importStar(require("react"));
 var InputCheckboxGroup_1 = __importDefault(require("./InputCheckboxGroup"));
 var options = [
@@ -50,4 +49,4 @@ var InputCheckboxGroup = function () {
     var _a = __read((0, react_1.useState)([]), 2), value = _a[0], setValue = _a[1];
     return (react_1.default.createElement(InputCheckboxGroup_1.default, { label: "Fruit", name: "fruit", helperText: "Please choose one", options: options, values: value, onChange: function (evt) { return setValue(evt.target.value || []); } }));
 };
-exports.InputCheckboxGroup = InputCheckboxGroup;
+exports.default = InputCheckboxGroup;

package/lib/components/material-ui/InputDate/InputDate.story.d.ts

@@ -1 +1,2 @@
-export declare const InputDate: () => JSX.Element;
+declare const InputDate: () => JSX.Element;
+export default InputDate;

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

@@ -38,7 +38,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.InputDate = void 0;
 var react_1 = __importStar(require("react"));
 var lab_1 = require("@mui/lab");
 var AdapterDateFns_1 = __importDefault(require("@mui/lab/AdapterDateFns"));
@@ -51,4 +50,4 @@ var InputDate = function () {
                 return setValue(value);
             }, InputProps: { helperText: 'Go to sleep', error: true } })));
 };
-exports.InputDate = InputDate;
+exports.default = InputDate;

package/lib/components/material-ui/InputDateTime/InputDateTime.story.d.ts

@@ -1 +1,2 @@
-export declare const InputDateTime: () => JSX.Element;
+declare const InputDateTime: () => JSX.Element;
+export default InputDateTime;

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

@@ -38,7 +38,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.InputDateTime = void 0;
 var react_1 = __importStar(require("react"));
 var lab_1 = require("@mui/lab");
 var InputDateTime_1 = __importDefault(require("./InputDateTime"));
@@ -51,4 +50,4 @@ var InputDateTime = function () {
                 return setValue(value);
             } })));
 };
-exports.InputDateTime = InputDateTime;
+exports.default = InputDateTime;

package/lib/components/material-ui/InputGroup/InputGroup.story.d.ts

@@ -1 +1,2 @@
-export declare const InputGroup: () => JSX.Element;
+declare const InputGroup: () => JSX.Element;
+export default InputGroup;

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

@@ -38,7 +38,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.InputGroup = void 0;
 var react_1 = __importStar(require("react"));
 var InputGroup_1 = __importDefault(require("./InputGroup"));
 var InputGroup = function () {
@@ -48,4 +47,4 @@ var InputGroup = function () {
     }
     return (react_1.default.createElement(InputGroup_1.default, { name: "name", label: "First Name", fullWidth: true, helperText: "(required)", value: value, charLimit: 20, onChange: onChange }));
 };
-exports.InputGroup = InputGroup;
+exports.default = InputGroup;

package/lib/components/material-ui/InputRadioGroup/InputRadioGroup.story.d.ts

@@ -1 +1,2 @@
-export declare const InputRadioGroup: () => JSX.Element;
+declare const InputRadioGroup: () => JSX.Element;
+export default InputRadioGroup;

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

@@ -38,7 +38,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.InputRadioGroup = void 0;
 var react_1 = __importStar(require("react"));
 var InputRadioGroup_1 = __importDefault(require("./InputRadioGroup"));
 var options = [
@@ -50,4 +49,4 @@ var InputRadioGroup = function () {
     var _a = __read((0, react_1.useState)(null), 2), value = _a[0], setValue = _a[1];
     return (react_1.default.createElement(InputRadioGroup_1.default, { label: "Fruit", name: "fruit", helperText: "Please choose one", options: options, value: value, onChange: function (evt) { return setValue(evt.target.value || null); }, row: true }));
 };
-exports.InputRadioGroup = InputRadioGroup;
+exports.default = InputRadioGroup;

package/lib/components/material-ui/InputSearchDropdown/InputSearchDropdown.story.d.ts

@@ -1,2 +1,4 @@
+declare const _default: {};
+export default _default;
 export declare const InputSearchDropdownSingle: () => JSX.Element;
 export declare const InputSearchDropdownMulti: () => JSX.Element;

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

@@ -41,6 +41,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.InputSearchDropdownMulti = exports.InputSearchDropdownSingle = void 0;
 var react_1 = __importStar(require("react"));
 var InputSearchDropdown_1 = __importDefault(require("./InputSearchDropdown"));
+exports.default = {};
 var options = [
     { firstName: 'Alvin', lastName: 'Kamara' },
     { firstName: 'Michael', lastName: 'Thomas' },

package/lib/components/material-ui/InputTime/InputTime.story.d.ts

@@ -1 +1,2 @@
-export declare const InputTime: () => JSX.Element;
+declare const InputTime: () => JSX.Element;
+export default InputTime;

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

@@ -38,7 +38,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.InputTime = void 0;
 var react_1 = __importStar(require("react"));
 var lab_1 = require("@mui/lab");
 var InputTime_1 = __importDefault(require("./InputTime"));
@@ -51,4 +50,4 @@ var InputTime = function () {
                 return setValue(value);
             } })));
 };
-exports.InputTime = InputTime;
+exports.default = InputTime;

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

@@ -18,6 +18,7 @@ declare type Props = DialogProps & {
     open: boolean;
     title?: string;
     progressValue?: number;
+    footer?: ReactNode;
 };
 export default function Modal(props: Props): JSX.Element;
 export {};

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

@@ -35,22 +35,23 @@ var react_1 = require("@emotion/react");
 var material_1 = require("@mui/material");
 var Button_1 = __importDefault(require("../Button"));
 function Modal(props) {
-    var children = props.children, classes = props.classes, cancelButton = props.cancelButton, okayButton = props.okayButton, onClose = props.onClose, submitting = props.submitting, open = props.open, title = props.title, progressValue = props.progressValue, restOfProps = __rest(props, ["children", "classes", "cancelButton", "okayButton", "onClose", "submitting", "open", "title", "progressValue"]);
+    var children = props.children, classes = props.classes, cancelButton = props.cancelButton, okayButton = props.okayButton, onClose = props.onClose, submitting = props.submitting, open = props.open, title = props.title, progressValue = props.progressValue, footer = props.footer, restOfProps = __rest(props, ["children", "classes", "cancelButton", "okayButton", "onClose", "submitting", "open", "title", "progressValue", "footer"]);
     var showProgressBar = typeof progressValue !== 'undefined' && submitting;
     return ((0, react_1.jsx)(material_1.Dialog, __assign({}, restOfProps, { classes: classes, open: open, onClose: onClose }),
         (0, react_1.jsx)(material_1.DialogTitle, null, title),
         (0, react_1.jsx)(material_1.DialogContent, null, typeof children === 'string' ? (0, react_1.jsx)(material_1.DialogContentText, null, children) : children),
-        (0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          display: flex;\n          flex-direction: row;\n          justify-content: flex-end;\n          align-items: center;\n        "], ["\n          display: flex;\n          flex-direction: row;\n          justify-content: flex-end;\n          align-items: center;\n        "]))) },
+        (0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          margin: 0 24px;\n        "], ["\n          margin: 0 24px;\n        "]))) }, footer),
+        (0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          display: flex;\n          flex-direction: row;\n          justify-content: flex-end;\n          align-items: center;\n        "], ["\n          display: flex;\n          flex-direction: row;\n          justify-content: flex-end;\n          align-items: center;\n        "]))) },
             showProgressBar && ((0, react_1.jsx)(material_1.LinearProgress, { css: function (theme) {
                     var _a, _b;
-                    return (0, react_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n              margin-left: 20px;\n              width: -webkit-fill-available;\n              border-radius: 5px;\n              color: ", ";\n\n              & .MuiLinearProgress-bar {\n                border-radius: 5px;\n              }\n            "], ["\n              margin-left: 20px;\n              width: -webkit-fill-available;\n              border-radius: 5px;\n              color: ", ";\n\n              & .MuiLinearProgress-bar {\n                border-radius: 5px;\n              }\n            "])), ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _a === void 0 ? void 0 : _a.primary) === null || _b === void 0 ? void 0 : _b.main) || 'hsl(321, 53%, 31%)');
+                    return (0, react_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n              margin-left: 20px;\n              width: -webkit-fill-available;\n              border-radius: 5px;\n              color: ", ";\n\n              & .MuiLinearProgress-bar {\n                border-radius: 5px;\n              }\n            "], ["\n              margin-left: 20px;\n              width: -webkit-fill-available;\n              border-radius: 5px;\n              color: ", ";\n\n              & .MuiLinearProgress-bar {\n                border-radius: 5px;\n              }\n            "])), ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _a === void 0 ? void 0 : _a.primary) === null || _b === void 0 ? void 0 : _b.main) || 'hsl(321, 53%, 31%)');
                 }, variant: "determinate", value: progressValue })),
             (0, react_1.jsx)(material_1.DialogActions, null,
                 cancelButton && !showProgressBar && ((0, react_1.jsx)(Button_1.default, { variant: "text", disabled: cancelButton.disabled || submitting, onClick: cancelButton.onClick }, cancelButton.text)),
                 okayButton && ((0, react_1.jsx)(Button_1.default, { css: function (theme) {
                         var _a, _b;
-                        return (0, react_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n                &&.MuiButton-root .MuiCircularProgress-root {\n                  color: ", ";\n                }\n              "], ["\n                &&.MuiButton-root .MuiCircularProgress-root {\n                  color: ", ";\n                }\n              "])), ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _a === void 0 ? void 0 : _a.primary) === null || _b === void 0 ? void 0 : _b.main) || 'hsl(321, 53%, 31%)');
+                        return (0, react_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n                &&.MuiButton-root .MuiCircularProgress-root {\n                  color: ", ";\n                }\n              "], ["\n                &&.MuiButton-root .MuiCircularProgress-root {\n                  color: ", ";\n                }\n              "])), ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _a === void 0 ? void 0 : _a.primary) === null || _b === void 0 ? void 0 : _b.main) || 'hsl(321, 53%, 31%)');
                     }, color: "primary", variant: "text", disabled: okayButton.disabled, onClick: okayButton.onClick, loading: submitting }, okayButton.text))))));
 }
 exports.default = Modal;
-var templateObject_1, templateObject_2, templateObject_3;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/lib/components/material-ui/Modal/Modal.story.d.ts

@@ -1 +1,2 @@
-export declare const Modal: () => JSX.Element;
+declare const Modal: () => JSX.Element;
+export default Modal;

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

@@ -38,7 +38,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Modal = void 0;
 var react_1 = __importStar(require("react"));
 var Button_1 = __importDefault(require("../Button"));
 var Modal_1 = __importDefault(require("./Modal"));
@@ -79,6 +78,6 @@ var Modal = function () {
                     alert('Okay!');
                     setIsSubmitting(true);
                 },
-            }, progressValue: progressValue }, "Hello there! How are you today?")));
+            }, progressValue: progressValue, footer: react_1.default.createElement("div", null, "Cheers!") }, "Hello there! How are you today?")));
 };
-exports.Modal = Modal;
+exports.default = Modal;

package/lib/stories/0-Inputs.stories.d.ts

@@ -2,16 +2,16 @@ declare const _default: {
     title: string;
 };
 export default _default;
-export { AudioPlayer } from '../components/material-ui/AudioPlayer/AudioPlayer.story';
-export { Button } from '../components/material-ui/Button/Button.story';
+export { default as AudioPlayer } from '../components/material-ui/AudioPlayer/AudioPlayer.story';
+export { default as Button } from '../components/material-ui/Button/Button.story';
 export { ButtonMenuUsingDefault, ButtonMenuUsingCustom } from '../components/material-ui/ButtonMenu/ButtonMenu.story';
-export { ColorPicker } from '../components/material-ui/ColorPicker/ColorPicker.story';
-export { DataTable } from '../components/material-ui/DataTable/DataTable.story';
-export { InputDate } from '../components/material-ui/InputDate/InputDate.story';
-export { InputDateTime } from '../components/material-ui/InputDateTime/InputDateTime.story';
-export { InputGroup } from '../components/material-ui/InputGroup/InputGroup.story';
-export { InputCheckboxGroup } from '../components/material-ui/InputCheckboxGroup/InputCheckboxGroup.story';
-export { InputRadioGroup } from '../components/material-ui/InputRadioGroup/InputRadioGroup.story';
+export { default as ColorPicker } from '../components/material-ui/ColorPicker/ColorPicker.story';
+export { default as DataTable } from '../components/material-ui/DataTable/DataTable.story';
+export { default as InputDate } from '../components/material-ui/InputDate/InputDate.story';
+export { default as InputDateTime } from '../components/material-ui/InputDateTime/InputDateTime.story';
+export { default as InputGroup } from '../components/material-ui/InputGroup/InputGroup.story';
+export { default as InputCheckboxGroup } from '../components/material-ui/InputCheckboxGroup/InputCheckboxGroup.story';
+export { default as InputRadioGroup } from '../components/material-ui/InputRadioGroup/InputRadioGroup.story';
 export { InputSearchDropdownSingle, InputSearchDropdownMulti, } from '../components/material-ui/InputSearchDropdown/InputSearchDropdown.story';
-export { InputTime } from '../components/material-ui/InputTime/InputTime.story';
-export { Modal } from '../components/material-ui/Modal/Modal.story';
+export { default as InputTime } from '../components/material-ui/InputTime/InputTime.story';
+export { default as Modal } from '../components/material-ui/Modal/Modal.story';

package/lib/stories/0-Inputs.stories.js

@@ -1,34 +1,37 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Modal = exports.InputTime = exports.InputSearchDropdownMulti = exports.InputSearchDropdownSingle = exports.InputRadioGroup = exports.InputCheckboxGroup = exports.InputGroup = exports.InputDateTime = exports.InputDate = exports.DataTable = exports.ColorPicker = exports.ButtonMenuUsingCustom = exports.ButtonMenuUsingDefault = exports.Button = exports.AudioPlayer = void 0;
 exports.default = {
     title: 'Inputs',
 };
 var AudioPlayer_story_1 = require("../components/material-ui/AudioPlayer/AudioPlayer.story");
-Object.defineProperty(exports, "AudioPlayer", { enumerable: true, get: function () { return AudioPlayer_story_1.AudioPlayer; } });
+Object.defineProperty(exports, "AudioPlayer", { enumerable: true, get: function () { return __importDefault(AudioPlayer_story_1).default; } });
 var Button_story_1 = require("../components/material-ui/Button/Button.story");
-Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return Button_story_1.Button; } });
+Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return __importDefault(Button_story_1).default; } });
 var ButtonMenu_story_1 = require("../components/material-ui/ButtonMenu/ButtonMenu.story");
 Object.defineProperty(exports, "ButtonMenuUsingDefault", { enumerable: true, get: function () { return ButtonMenu_story_1.ButtonMenuUsingDefault; } });
 Object.defineProperty(exports, "ButtonMenuUsingCustom", { enumerable: true, get: function () { return ButtonMenu_story_1.ButtonMenuUsingCustom; } });
 var ColorPicker_story_1 = require("../components/material-ui/ColorPicker/ColorPicker.story");
-Object.defineProperty(exports, "ColorPicker", { enumerable: true, get: function () { return ColorPicker_story_1.ColorPicker; } });
+Object.defineProperty(exports, "ColorPicker", { enumerable: true, get: function () { return __importDefault(ColorPicker_story_1).default; } });
 var DataTable_story_1 = require("../components/material-ui/DataTable/DataTable.story");
-Object.defineProperty(exports, "DataTable", { enumerable: true, get: function () { return DataTable_story_1.DataTable; } });
+Object.defineProperty(exports, "DataTable", { enumerable: true, get: function () { return __importDefault(DataTable_story_1).default; } });
 var InputDate_story_1 = require("../components/material-ui/InputDate/InputDate.story");
-Object.defineProperty(exports, "InputDate", { enumerable: true, get: function () { return InputDate_story_1.InputDate; } });
+Object.defineProperty(exports, "InputDate", { enumerable: true, get: function () { return __importDefault(InputDate_story_1).default; } });
 var InputDateTime_story_1 = require("../components/material-ui/InputDateTime/InputDateTime.story");
-Object.defineProperty(exports, "InputDateTime", { enumerable: true, get: function () { return InputDateTime_story_1.InputDateTime; } });
+Object.defineProperty(exports, "InputDateTime", { enumerable: true, get: function () { return __importDefault(InputDateTime_story_1).default; } });
 var InputGroup_story_1 = require("../components/material-ui/InputGroup/InputGroup.story");
-Object.defineProperty(exports, "InputGroup", { enumerable: true, get: function () { return InputGroup_story_1.InputGroup; } });
+Object.defineProperty(exports, "InputGroup", { enumerable: true, get: function () { return __importDefault(InputGroup_story_1).default; } });
 var InputCheckboxGroup_story_1 = require("../components/material-ui/InputCheckboxGroup/InputCheckboxGroup.story");
-Object.defineProperty(exports, "InputCheckboxGroup", { enumerable: true, get: function () { return InputCheckboxGroup_story_1.InputCheckboxGroup; } });
+Object.defineProperty(exports, "InputCheckboxGroup", { enumerable: true, get: function () { return __importDefault(InputCheckboxGroup_story_1).default; } });
 var InputRadioGroup_story_1 = require("../components/material-ui/InputRadioGroup/InputRadioGroup.story");
-Object.defineProperty(exports, "InputRadioGroup", { enumerable: true, get: function () { return InputRadioGroup_story_1.InputRadioGroup; } });
+Object.defineProperty(exports, "InputRadioGroup", { enumerable: true, get: function () { return __importDefault(InputRadioGroup_story_1).default; } });
 var InputSearchDropdown_story_1 = require("../components/material-ui/InputSearchDropdown/InputSearchDropdown.story");
 Object.defineProperty(exports, "InputSearchDropdownSingle", { enumerable: true, get: function () { return InputSearchDropdown_story_1.InputSearchDropdownSingle; } });
 Object.defineProperty(exports, "InputSearchDropdownMulti", { enumerable: true, get: function () { return InputSearchDropdown_story_1.InputSearchDropdownMulti; } });
 var InputTime_story_1 = require("../components/material-ui/InputTime/InputTime.story");
-Object.defineProperty(exports, "InputTime", { enumerable: true, get: function () { return InputTime_story_1.InputTime; } });
+Object.defineProperty(exports, "InputTime", { enumerable: true, get: function () { return __importDefault(InputTime_story_1).default; } });
 var Modal_story_1 = require("../components/material-ui/Modal/Modal.story");
-Object.defineProperty(exports, "Modal", { enumerable: true, get: function () { return Modal_story_1.Modal; } });
+Object.defineProperty(exports, "Modal", { enumerable: true, get: function () { return __importDefault(Modal_story_1).default; } });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vendorflow/components",
-  "version": "2.0.81",
+  "version": "2.0.84",
   "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",
@@ -138,18 +138,19 @@
   "devDependencies": {
     "@babel/cli": "^7.15.7",
     "@babel/preset-react": "^7.9.4",
-    "@storybook/addon-actions": "^6.3.10",
+    "@storybook/addon-actions": "^6.4.22",
     "@storybook/addon-knobs": "^6.3.1",
-    "@storybook/addon-links": "^6.3.10",
-    "@storybook/addons": "^6.3.10",
+    "@storybook/addon-links": "^6.4.22",
+    "@storybook/addons": "^6.4.22",
     "@storybook/preset-create-react-app": "^2.1.1",
-    "@storybook/react": "^6.3.10",
+    "@storybook/react": "^6.4.22",
     "@types/lodash": "^4.14.150",
     "@types/react-measure": "^2.0.7",
     "@types/react-text-mask": "^5.4.6",
     "@types/react-virtualized": "^9.21.21",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^3.4.0",
+    "eslint-plugin-storybook": "^0.5.11",
     "eslint-webpack-plugin": "^2.5.4",
     "prettier": "^2.0.5",
     "tslint": "^6.1.2",