@vendorflow/components 2.0.57 → 2.0.61

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

@@ -38,7 +38,7 @@ function GlobalSearchFilter(_a) {
         (0, react_1.jsx)(material_1.TextField, { value: value || '', onChange: function (evt) {
                 setValue(evt.target.value);
                 onChange(evt.target.value);
-            }, fullWidth: true, variant: "standard" }),
+            }, fullWidth: true, variant: "standard", autoFocus: true }),
         (0, react_1.jsx)(material_1.IconButton, { onClick: function () {
                 setGlobalFilter(null);
                 setShowSearch(false);

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

@@ -5,7 +5,7 @@ import { TextFieldProps } from '@mui/material';
 declare type Props = {
     name?: string;
     onChange: SimpleEventHandler<string>;
-    InputProps?: TextFieldProps;
+    InputProps?: Omit<TextFieldProps, 'id'>;
 } & Omit<DatePickerProps, 'onChange' | 'renderInput' | 'date' | 'rawValue' | 'openPicker' | 'InputProps'> & React.RefAttributes<HTMLDivElement>;
 export default function InputDate(props: Props): JSX.Element;
 export {};

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

@@ -62,7 +62,9 @@ var date_fns_1 = require("date-fns");
 var lab_1 = require("@mui/lab");
 var material_1 = require("@mui/material");
 var lodash_1 = require("lodash");
+var nanoid_1 = require("nanoid");
 function InputDate(props) {
+    var id = (0, react_1.useRef)((0, nanoid_1.nanoid)());
     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 () {
@@ -86,6 +88,6 @@ function InputDate(props) {
     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 })));
+    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, { id: id.current, size: (InputProps === null || InputProps === void 0 ? void 0 : InputProps.size) || 'small' }))); }, label: label, onChange: handleOnChange, value: value })));
 }
 exports.default = InputDate;

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

@@ -5,7 +5,7 @@ import { TextFieldProps } from '@mui/material';
 declare type Props = {
     name?: string;
     onChange: SimpleEventHandler<string>;
-    InputProps?: TextFieldProps;
+    InputProps?: Omit<TextFieldProps, 'id'>;
 } & Omit<DateTimePickerProps, 'onChange' | 'renderInput' | 'date' | 'rawValue' | 'openPicker' | 'InputProps'> & React.RefAttributes<HTMLDivElement>;
 export default function InputDateTime(props: Props): JSX.Element;
 export {};

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

@@ -61,8 +61,10 @@ 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 nanoid_1 = require("nanoid");
 function InputDateTime(props) {
     var _a = props.clearable, clearable = _a === void 0 ? true : _a, _b = props.inputFormat, inputFormat = _b === void 0 ? 'MM/dd/yyyy HH:mm' : _b, _c = props.InputProps, InputProps = _c === void 0 ? {} : _c, label = props.label, name = props.name, onChange = props.onChange, restOfProps = __rest(props, ["clearable", "inputFormat", "InputProps", "label", "name", "onChange"]);
+    var id = (0, react_1.useRef)((0, nanoid_1.nanoid)());
     var _d = __read((0, react_1.useState)(null), 2), value = _d[0], setValue = _d[1];
     (0, react_1.useEffect)(function () {
         if (props.value !== value) {
@@ -75,6 +77,6 @@ function InputDateTime(props) {
             onChange({ target: { name: name, value: date ? (0, date_fns_1.formatISO)(date) : null } });
         }
     }
-    return (react_1.default.createElement(lab_1.DateTimePicker, __assign({}, restOfProps, { clearable: clearable, inputFormat: inputFormat, label: label, onChange: handleOnChange, 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' })); }, value: value })));
+    return (react_1.default.createElement(lab_1.DateTimePicker, __assign({}, restOfProps, { clearable: clearable, inputFormat: inputFormat, label: label, onChange: handleOnChange, renderInput: function (params) { return (react_1.default.createElement(material_1.TextField, __assign({}, params, InputProps, { id: id.current, size: (InputProps === null || InputProps === void 0 ? void 0 : InputProps.size) || 'small' }))); }, value: value })));
 }
 exports.default = InputDateTime;

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

@@ -5,5 +5,5 @@ export declare type Props = {
     hideCharCounter?: boolean;
     enableDebouncedOnChange?: boolean;
     changeValidator?: (value: string) => boolean;
-} & TextFieldProps;
+} & Omit<TextFieldProps, 'id'>;
 export default function InputGroup(props: Props): JSX.Element;

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

@@ -48,8 +48,10 @@ var react_1 = require("@emotion/react");
 var react_2 = require("react");
 var lodash_1 = require("lodash");
 var material_1 = require("@mui/material");
+var nanoid_1 = require("nanoid");
 function InputGroup(props) {
     var changeValidator = props.changeValidator, charLimit = props.charLimit, className = props.className, hideCharCounter = props.hideCharCounter, _a = props.enableDebouncedOnChange, enableDebouncedOnChange = _a === void 0 ? true : _a, multiline = props.multiline, error = props.error, label = props.label, name = props.name, onChange = props.onChange, placeholder = props.placeholder, helperText = props.helperText, _b = props.variant, variant = _b === void 0 ? 'outlined' : _b, style = props.style, propsValue = props.value, _c = props.size, size = _c === void 0 ? 'small' : _c, restOfProps = __rest(props, ["changeValidator", "charLimit", "className", "hideCharCounter", "enableDebouncedOnChange", "multiline", "error", "label", "name", "onChange", "placeholder", "helperText", "variant", "style", "value", "size"]);
+    var id = (0, react_2.useRef)((0, nanoid_1.nanoid)());
     var _d = __read((0, react_2.useState)(''), 2), value = _d[0], setValue = _d[1];
     (0, react_2.useEffect)(function () {
         if (propsValue !== value) {
@@ -77,7 +79,7 @@ function InputGroup(props) {
         }
     }
     return ((0, react_1.jsx)("div", { className: className, style: style },
-        (0, react_1.jsx)(material_1.TextField, __assign({ error: error, label: label, name: name, onChange: handleOnChange, placeholder: placeholder, value: value, variant: variant, multiline: multiline, size: size }, restOfProps)),
+        (0, react_1.jsx)(material_1.TextField, __assign({ id: id.current, error: error, label: label, name: name, onChange: handleOnChange, placeholder: placeholder, value: value, variant: variant, multiline: multiline, size: size }, restOfProps)),
         (0, react_1.jsx)("div", null,
             helperText && ((0, react_1.jsx)(material_1.Typography, { css: (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n              float: left;\n              margin-left: 14px;\n              margin-top: 4px;\n              color: ", ";\n              width: calc(100% - 82px);\n            "], ["\n              float: left;\n              margin-left: 14px;\n              margin-top: 4px;\n              color: ", ";\n              width: calc(100% - 82px);\n            "])), error ? 'red' : 'rgba(0, 0, 0, 0.54)'), variant: "caption" }, helperText)),
             charLimit !== undefined && !hideCharCounter && ((0, react_1.jsx)(material_1.Typography, { css: (0, react_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n              font-size: 0.75rem;\n              text-align: right;\n              float: right;\n              margin-left: 14px;\n              margin-right: 14px;\n              margin-top: 4px;\n              color: ", ";\n              width: 40px;\n            "], ["\n              font-size: 0.75rem;\n              text-align: right;\n              float: right;\n              margin-left: 14px;\n              margin-right: 14px;\n              margin-top: 4px;\n              color: ", ";\n              width: 40px;\n            "])), error ? 'red' : 'rgba(0, 0, 0, 0.54)'), variant: "subtitle1" },

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

@@ -15,6 +15,6 @@ declare type Props<T> = {
     max?: number;
     count?: number;
     onChange: (event: ChangeEvent<any>, value: any, reason: AutocompleteChangeReason) => void;
-} & Omit<AutocompleteProps<T, MaybeBoolean, MaybeBoolean, MaybeBoolean, any>, 'onChange' | 'renderInput'>;
+} & Omit<AutocompleteProps<T, MaybeBoolean, MaybeBoolean, MaybeBoolean, any>, 'onChange' | 'renderInput' | 'id'>;
 export default function InputSearchDropdown<T>(props: Props<T>): JSX.Element;
 export {};

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

@@ -48,6 +48,7 @@ var react_1 = require("@emotion/react");
 var react_2 = require("react");
 var styles_1 = require("@mui/styles");
 var material_1 = require("@mui/material");
+var nanoid_1 = require("nanoid");
 var useStyles = (0, styles_1.makeStyles)({
     option: {
         '&[data-focus="true"]': { backgroundColor: '#5789ff', color: 'white' },
@@ -55,6 +56,7 @@ var useStyles = (0, styles_1.makeStyles)({
 });
 function InputSearchDropdown(props) {
     var _a = props.autoHighlight, autoHighlight = _a === void 0 ? true : _a, _b = props.clearOnEscape, clearOnEscape = _b === void 0 ? true : _b, count = props.count, disableFilter = props.disableFilter, error = props.error, errors = props.errors, filterOptions = props.filterOptions, _c = props.filterSelectedOptions, filterSelectedOptions = _c === void 0 ? true : _c, label = props.label, helperText = props.helperText, name = props.name, onChange = props.onChange, _d = props.openOnFocus, openOnFocus = _d === void 0 ? true : _d, _e = props.renderInput, renderInput = _e === void 0 ? null : _e, renderTags = props.renderTags, _f = props.selectOnFocus, selectOnFocus = _f === void 0 ? true : _f, _g = props.variant, variant = _g === void 0 ? 'outlined' : _g, multiple = props.multiple, max = props.max, _h = props.size, size = _h === void 0 ? 'small' : _h, restOfProps = __rest(props, ["autoHighlight", "clearOnEscape", "count", "disableFilter", "error", "errors", "filterOptions", "filterSelectedOptions", "label", "helperText", "name", "onChange", "openOnFocus", "renderInput", "renderTags", "selectOnFocus", "variant", "multiple", "max", "size"]);
+    var id = (0, react_2.useRef)((0, nanoid_1.nanoid)());
     var _j = __read((0, react_2.useState)(null), 2), value = _j[0], setValue = _j[1];
     var mainStyles = useStyles();
     (0, react_2.useEffect)(function () {
@@ -121,7 +123,7 @@ function InputSearchDropdown(props) {
         return ((_a = value) === null || _a === void 0 ? void 0 : _a.length) || 0;
     }
     return ((0, react_1.jsx)("div", null,
-        (0, react_1.jsx)(material_1.Autocomplete, __assign({ css: (0, react_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          // TODO: this is due to a bug in MaterialUI clear up when resolve -- should file a PR ticket\n          &&& .MuiInputBase-root {\n            padding-right: 39px;\n          }\n        "], ["\n          // TODO: this is due to a bug in MaterialUI clear up when resolve -- should file a PR ticket\n          &&& .MuiInputBase-root {\n            padding-right: 39px;\n          }\n        "]))), autoHighlight: autoHighlight, clearOnEscape: clearOnEscape, filterOptions: !disableFilter ? filterOptions || handleOptionFilter() : function (options) { return options; }, filterSelectedOptions: filterSelectedOptions, onChange: handleOnChange, openOnFocus: openOnFocus, renderInput: renderInput || renderDefaultInput, renderTags: renderTags || renderDefaultTags, selectOnFocus: selectOnFocus, multiple: multiple, classes: mainStyles, size: size }, restOfProps, { value: getValue() })),
+        (0, react_1.jsx)(material_1.Autocomplete, __assign({ id: id.current, css: (0, react_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          // TODO: this is due to a bug in MaterialUI clear up when resolve -- should file a PR ticket\n          &&& .MuiInputBase-root {\n            padding-right: 39px;\n          }\n        "], ["\n          // TODO: this is due to a bug in MaterialUI clear up when resolve -- should file a PR ticket\n          &&& .MuiInputBase-root {\n            padding-right: 39px;\n          }\n        "]))), autoHighlight: autoHighlight, clearOnEscape: clearOnEscape, filterOptions: !disableFilter ? filterOptions || handleOptionFilter() : function (options) { return options; }, filterSelectedOptions: filterSelectedOptions, onChange: handleOnChange, openOnFocus: openOnFocus, renderInput: renderInput || renderDefaultInput, renderTags: renderTags || renderDefaultTags, selectOnFocus: selectOnFocus, multiple: multiple, classes: mainStyles, size: size }, restOfProps, { value: getValue() })),
         (0, react_1.jsx)("div", null,
             helperText && ((0, react_1.jsx)(material_1.Typography, { css: (0, react_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n              float: left;\n              margin-left: 14px;\n              margin-top: 4px;\n              color: ", ";\n              width: calc(100% - 82px);\n            "], ["\n              float: left;\n              margin-left: 14px;\n              margin-top: 4px;\n              color: ", ";\n              width: calc(100% - 82px);\n            "])), error ? 'red' : 'rgba(0, 0, 0, 0.54)'), variant: "caption" }, helperText)),
             multiple && max && ((0, react_1.jsx)(material_1.Typography, { css: (0, react_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n              font-size: 0.75rem;\n              text-align: right;\n              float: right;\n              margin-left: 14px;\n              margin-right: 14px;\n              margin-top: 4px;\n              color: ", ";\n              width: 40px;\n            "], ["\n              font-size: 0.75rem;\n              text-align: right;\n              float: right;\n              margin-left: 14px;\n              margin-right: 14px;\n              margin-top: 4px;\n              color: ", ";\n              width: 40px;\n            "])), error ? 'red' : 'rgba(0, 0, 0, 0.54)'), variant: "subtitle1" },

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

@@ -4,7 +4,7 @@ import { TextFieldProps } from '@mui/material';
 declare type Props = {
     name?: string;
     onChange: SimpleEventHandler<ParsableDate>;
-    InputProps?: TextFieldProps;
+    InputProps?: Omit<TextFieldProps, 'id'>;
 } & Omit<TimePickerProps, 'onChange' | 'renderInput' | 'openPicker' | 'rawValue' | 'InputProps'>;
 export default function InputTime(props: Props): JSX.Element;
 export {};

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

@@ -61,9 +61,11 @@ 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 nanoid_1 = require("nanoid");
 function InputTime(props) {
     var _a = props.clearable, clearable = _a === void 0 ? true : _a, _b = props.inputFormat, inputFormat = _b === void 0 ? 'HH:mm' : _b, _c = props.InputProps, InputProps = _c === void 0 ? {} : _c, label = props.label, name = props.name, onChange = props.onChange, restOfProps = __rest(props, ["clearable", "inputFormat", "InputProps", "label", "name", "onChange"]);
     var _d = __read((0, react_1.useState)(null), 2), value = _d[0], setValue = _d[1];
+    var id = (0, react_1.useRef)((0, nanoid_1.nanoid)());
     (0, react_1.useEffect)(function () {
         if (props.value) {
             setValue(props.value);
@@ -75,6 +77,6 @@ function InputTime(props) {
             onChange({ target: { name: name, value: date ? (0, date_fns_1.formatISO)(date) : null } });
         }
     }
-    return (react_1.default.createElement(lab_1.TimePicker, __assign({}, restOfProps, { clearable: clearable, inputFormat: inputFormat, label: label, onChange: handleOnChange, 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' })); }, value: value })));
+    return (react_1.default.createElement(lab_1.TimePicker, __assign({}, restOfProps, { clearable: clearable, inputFormat: inputFormat, label: label, onChange: handleOnChange, renderInput: function (params) { return (react_1.default.createElement(material_1.TextField, __assign({}, params, InputProps, { id: id.current, size: (InputProps === null || InputProps === void 0 ? void 0 : InputProps.size) || 'small' }))); }, value: value })));
 }
 exports.default = InputTime;

package/package.json

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