@vendorflow/components 2.0.54 → 2.0.58

package/lib/components/index.d.ts

@@ -3,6 +3,7 @@ export { default as Button } from './material-ui/Button';
 export { default as ButtonMenu } from './material-ui/ButtonMenu';
 export { default as ColorPicker } from './material-ui/ColorPicker';
 export { default as DataTable } from './material-ui/DataTable';
+export { default as ErrorBoundary } from './material-ui/ErrorBoundary';
 export { default as InputDate } from './material-ui/InputDate';
 export { default as InputDateTime } from './material-ui/InputDateTime';
 export { default as InputGroup } from './material-ui/InputGroup';

package/lib/components/index.js

@@ -3,7 +3,7 @@ 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.InputSearchDropdown = exports.InputRadioGroup = exports.InputCheckboxGroup = exports.InputGroup = exports.InputDateTime = exports.InputDate = exports.DataTable = exports.ColorPicker = exports.ButtonMenu = exports.Button = exports.AudioPlayer = void 0;
+exports.Modal = exports.InputTime = exports.InputSearchDropdown = exports.InputRadioGroup = exports.InputCheckboxGroup = exports.InputGroup = exports.InputDateTime = exports.InputDate = exports.ErrorBoundary = exports.DataTable = exports.ColorPicker = exports.ButtonMenu = exports.Button = exports.AudioPlayer = void 0;
 var AudioPlayer_1 = require("./material-ui/AudioPlayer");
 Object.defineProperty(exports, "AudioPlayer", { enumerable: true, get: function () { return __importDefault(AudioPlayer_1).default; } });
 var Button_1 = require("./material-ui/Button");
@@ -14,6 +14,8 @@ var ColorPicker_1 = require("./material-ui/ColorPicker");
 Object.defineProperty(exports, "ColorPicker", { enumerable: true, get: function () { return __importDefault(ColorPicker_1).default; } });
 var DataTable_1 = require("./material-ui/DataTable");
 Object.defineProperty(exports, "DataTable", { enumerable: true, get: function () { return __importDefault(DataTable_1).default; } });
+var ErrorBoundary_1 = require("./material-ui/ErrorBoundary");
+Object.defineProperty(exports, "ErrorBoundary", { enumerable: true, get: function () { return __importDefault(ErrorBoundary_1).default; } });
 var InputDate_1 = require("./material-ui/InputDate");
 Object.defineProperty(exports, "InputDate", { enumerable: true, get: function () { return __importDefault(InputDate_1).default; } });
 var InputDateTime_1 = require("./material-ui/InputDateTime");

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

@@ -48,6 +48,7 @@ export interface TableFeatureOptions<D extends object> {
 }
 interface Props<D extends object> {
     title?: string;
+    'data-testid'?: string;
     labels?: {
         noMatchLabel?: string;
         noMatchColSpan?: number;
@@ -58,7 +59,7 @@ interface Props<D extends object> {
     renderActions?: () => ReactNode;
     renderRowSelectActions?: () => ReactNode;
 }
-export default function DataTable<D extends object>({ title, labels, columns, instance, options, renderActions, renderRowSelectActions, }: Props<D>): JSX.Element;
+export default function DataTable<D extends object>({ title, labels, columns, instance, options, renderActions, renderRowSelectActions, ...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

@@ -97,7 +97,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;
+    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 _c = labels || { noMatchLabel: NO_MATCH_TEXT }, _d = _c.noMatchLabel, noMatchLabel = _d === void 0 ? NO_MATCH_TEXT : _d, noMatchColSpan = _c.noMatchColSpan;
     var _e = options || {}, rowExpandingConfig = _e.rowExpanding, filtersConfig = _e.filters, globalSearchConfig = _e.globalSearch, columnHidingConfig = _e.columnHiding, paginationConfig = _e.pagination, rowSelectConfig = _e.rowSelect, sortingConfig = _e.sorting;
     var ExpandedComponent = (rowExpandingConfig || {}).Component;
@@ -139,7 +139,7 @@ function DataTable(_a) {
     var tableRows = (paginationConfig === null || paginationConfig === void 0 ? void 0 : paginationConfig.enabled) ? page : rows;
     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.Paper, { css: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n            width: 100%;\n            position: relative;\n          "], ["\n            width: 100%;\n            position: relative;\n          "]))) },
+        return ((0, react_1.jsx)(material_1.Paper, __assign({ css: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n            width: 100%;\n            position: relative;\n          "], ["\n            width: 100%;\n            position: relative;\n          "]))), className: "vendorflow-table" }, restOfProps),
             (0, react_1.jsx)("div", null,
                 (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 }),
                 (filtersConfig === null || filtersConfig === void 0 ? void 0 : filtersConfig.enabled) && ((0, react_1.jsx)(AppliedFilters_1.default, { columnNameById: columnNameById, filters: filters, setFilter: setFilter }))),

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

@@ -0,0 +1,7 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { ReactNode } from 'react';
+export default function ErrorBoundary({ children, onReset, }: {
+    children: ReactNode;
+    onReset: (...args: Array<unknown>) => void | Promise<void>;
+}): jsx.JSX.Element;

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

@@ -0,0 +1,20 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/** @jsx jsx */
+var react_1 = require("@emotion/react");
+var material_1 = require("@mui/material");
+var react_error_boundary_1 = require("react-error-boundary");
+function ErrorFallback(_a) {
+    var resetErrorBoundary = _a.resetErrorBoundary;
+    return ((0, react_1.jsx)(material_1.Alert, { css: (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        width: 100%;\n      "], ["\n        width: 100%;\n      "]))), severity: "error", action: (0, react_1.jsx)(material_1.Button, { color: "inherit", size: "small", onClick: resetErrorBoundary }, "Reload") }, "Something went wrong when trying to load this view's data. Please try to reload the data again."));
+}
+function ErrorBoundary(_a) {
+    var children = _a.children, onReset = _a.onReset;
+    return ((0, react_1.jsx)(react_error_boundary_1.ErrorBoundary, { FallbackComponent: ErrorFallback, onReset: onReset }, children));
+}
+exports.default = ErrorBoundary;
+var templateObject_1;

package/lib/components/material-ui/ErrorBoundary/index.d.ts

@@ -0,0 +1 @@
+export { default } from './ErrorBoundary';

package/lib/components/material-ui/ErrorBoundary/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var ErrorBoundary_1 = require("./ErrorBoundary");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(ErrorBoundary_1).default; } });

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

@@ -61,20 +61,31 @@ var react_1 = __importStar(require("react"));
 var date_fns_1 = require("date-fns");
 var lab_1 = require("@mui/lab");
 var material_1 = require("@mui/material");
+var lodash_1 = require("lodash");
 function InputDate(props) {
     var _a = props.clearable, clearable = _a === void 0 ? true : _a, label = props.label, name = props.name, onChange = props.onChange, _b = props.inputFormat, inputFormat = _b === void 0 ? 'MM/dd/yyyy' : _b, _c = props.InputProps, InputProps = _c === void 0 ? {} : _c, restOfProps = __rest(props, ["clearable", "label", "name", "onChange", "inputFormat", "InputProps"]);
     var _d = __read((0, react_1.useState)(null), 2), value = _d[0], setValue = _d[1];
     (0, react_1.useEffect)(function () {
-        if (props.value !== value) {
-            setValue(props.value);
+        var datetime = convertToDateTime(props.value);
+        if (((0, lodash_1.isNull)(value) && !(0, lodash_1.isNull)(datetime)) ||
+            (!(0, lodash_1.isNull)(value) && (0, lodash_1.isNull)(datetime)) ||
+            (value && !(0, date_fns_1.isSameDay)(datetime, value))) {
+            setValue(datetime);
         }
     }, [props.value]);
     function handleOnChange(date) {
         setValue(date);
         if (date === null || (0, date_fns_1.isValid)(date)) {
-            onChange({ target: { name: name, value: date ? (0, date_fns_1.formatISO)(date) : null } });
+            var localDate = convertToLocalDate(date);
+            onChange({ target: { name: name, value: localDate } });
         }
     }
+    function convertToLocalDate(date) {
+        return date && (0, date_fns_1.isValid)(date) ? (0, date_fns_1.formatISO)(date, { representation: 'date' }) : null;
+    }
+    function convertToDateTime(date) {
+        return date ? (0, date_fns_1.parseISO)(date) : null;
+    }
     return (react_1.default.createElement(lab_1.DatePicker, __assign({}, restOfProps, { clearable: clearable, inputFormat: inputFormat, renderInput: function (params) { return react_1.default.createElement(material_1.TextField, __assign({}, params, InputProps, { size: (InputProps === null || InputProps === void 0 ? void 0 : InputProps.size) || 'small' })); }, label: label, onChange: handleOnChange, value: value })));
 }
 exports.default = InputDate;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vendorflow/components",
-  "version": "2.0.54",
+  "version": "2.0.58",
   "description": "React components for vendorflow",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -112,6 +112,7 @@
     "react-color-palette": "^6.1.0",
     "react-dev-utils": "^10.2.1",
     "react-dom": "^17.0.2",
+    "react-error-boundary": "^3.1.4",
     "react-h5-audio-player": "^3.8.1",
     "react-measure": "^2.5.2",
     "react-scripts": "^4.0.3",