@vendorflow/components 2.0.59 → 2.0.63

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

@@ -1,5 +1,6 @@
 import { EnhancedColumn } from './DataTable';
 export interface People {
+    id: string;
     firstName: string;
     lastName: string;
     age: number;

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

@@ -30,6 +30,7 @@ exports.Columns = [
     __assign({ Header: 'Company', id: 'company', accessor: function (originalRow) { return originalRow.company.name; }, disableFilters: false }, (0, DataTable_1.getColumnFilterConfig)('select')),
 ];
 exports.Data = new Array(20).fill(null).map(function () { return ({
+    id: faker_1.default.datatype.uuid(),
     firstName: faker_1.default.name.firstName(),
     lastName: faker_1.default.name.lastName(),
     age: faker_1.default.datatype.number(60),

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

@@ -1,4 +1,4 @@
-import { Column, UseSortByColumnProps, HeaderGroup, UseSortByOptions, TableOptions, UseSortByColumnOptions, PluginHook, UsePaginationOptions, UseSortByInstanceProps, UsePaginationInstanceProps, TableInstance, TableState, UseSortByState, UsePaginationState, UseRowSelectOptions, UseRowSelectInstanceProps, UseRowSelectState, Row, UseRowSelectRowProps, UseExpandedOptions, UseExpandedInstanceProps, UseExpandedState, UseExpandedRowProps, UseGlobalFiltersInstanceProps, UseGlobalFiltersState, UseFiltersOptions, UseFiltersInstanceProps, UseFiltersState, UseFiltersColumnOptions, UseFiltersColumnProps, Renderer, FilterProps } from 'react-table';
+import { Column, UseSortByColumnProps, HeaderGroup, UseSortByOptions, TableOptions, UseSortByColumnOptions, PluginHook, UsePaginationOptions, UseSortByInstanceProps, UsePaginationInstanceProps, TableInstance, TableState, UseSortByState, UsePaginationState, UseRowSelectOptions, UseRowSelectInstanceProps, UseRowSelectState, Row, UseRowSelectRowProps, UseExpandedOptions, UseExpandedInstanceProps, UseExpandedState, UseExpandedRowProps, UseGlobalFiltersInstanceProps, UseGlobalFiltersState, UseFiltersOptions, UseFiltersInstanceProps, UseFiltersState, UseFiltersColumnOptions, UseFiltersColumnProps, Renderer, FilterProps, UseTableOptions } from 'react-table';
 import { ReactNode } from 'react';
 export declare type Mode = 'single' | 'multi';
 export declare type CustomColumnConfigProps<D extends object> = {
@@ -22,6 +22,7 @@ export interface TableFeatureOptions<D extends object> {
         Component: (props: {
             data: D;
         }) => JSX.Element;
+        autoResetExpanded?: boolean;
     };
     filters?: {
         enabled: boolean;
@@ -45,6 +46,9 @@ export interface TableFeatureOptions<D extends object> {
     sorting?: {
         enabled: boolean;
     };
+    table?: {
+        getRowId?: UseTableOptions<D>['getRowId'];
+    };
 }
 interface Props<D extends object> {
     title?: string;

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

@@ -298,7 +298,11 @@ function useDefaultTableInstance(_a) {
             });
         }
     }
+    var getRowId = ((options === null || options === void 0 ? void 0 : options.table) || {}).getRowId;
+    var _e = ((options === null || options === void 0 ? void 0 : options.rowExpanding) || {}).autoResetExpanded, autoResetExpanded = _e === void 0 ? true : _e;
     return react_table_1.useTable.apply(void 0, __spreadArray([{
+            autoResetExpanded: autoResetExpanded,
+            getRowId: getRowId,
             columns: columns,
             data: data,
             filterTypes: filterTypes,

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

@@ -54,6 +54,9 @@ function DataTable() {
         sorting: {
             enabled: true,
         },
+        table: {
+            getRowId: function (person) { return person.id; },
+        },
     };
     var instance = (0, DataTable_1.useDefaultTableInstance)({ columns: columns, data: data, options: options });
     return (react_1.default.createElement(material_1.ThemeProvider, { theme: (0, material_1.createTheme)() },

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/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.59",
+  "version": "2.0.63",
   "description": "React components for vendorflow",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",