@vendorflow/components 2.0.59 → 2.0.60

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/lib/components/material-ui/InputDate/InputDate.d.ts +1 -1
  2. package/lib/components/material-ui/InputDate/InputDate.js +3 -1
  3. package/lib/components/material-ui/InputDateTime/InputDateTime.d.ts +1 -1
  4. package/lib/components/material-ui/InputDateTime/InputDateTime.js +3 -1
  5. package/lib/components/material-ui/InputGroup/InputGroup.d.ts +1 -1
  6. package/lib/components/material-ui/InputGroup/InputGroup.js +3 -1
  7. package/lib/components/material-ui/InputSearchDropdown/InputSearchDropdown.d.ts +1 -1
  8. package/lib/components/material-ui/InputSearchDropdown/InputSearchDropdown.js +3 -1
  9. package/lib/components/material-ui/InputTime/InputTime.d.ts +1 -1
  10. package/lib/components/material-ui/InputTime/InputTime.js +3 -1
  11. package/package.json +1 -1
package/lib/components/material-ui/InputDate/InputDate.d.ts CHANGED
@@ -5,7 +5,7 @@ import { TextFieldProps } from '@mui/material';
5
5
  declare type Props = {
6
6
  name?: string;
7
7
  onChange: SimpleEventHandler<string>;
8
- InputProps?: TextFieldProps;
8
+ InputProps?: Omit<TextFieldProps, 'id'>;
9
9
  } & Omit<DatePickerProps, 'onChange' | 'renderInput' | 'date' | 'rawValue' | 'openPicker' | 'InputProps'> & React.RefAttributes<HTMLDivElement>;
10
10
  export default function InputDate(props: Props): JSX.Element;
11
11
  export {};
package/lib/components/material-ui/InputDate/InputDate.js CHANGED
@@ -62,7 +62,9 @@ var date_fns_1 = require("date-fns");
62
62
  var lab_1 = require("@mui/lab");
63
63
  var material_1 = require("@mui/material");
64
64
  var lodash_1 = require("lodash");
65
+ var nanoid_1 = require("nanoid");
65
66
  function InputDate(props) {
67
+ var id = (0, react_1.useRef)((0, nanoid_1.nanoid)());
66
68
  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"]);
67
69
  var _d = __read((0, react_1.useState)(null), 2), value = _d[0], setValue = _d[1];
68
70
  (0, react_1.useEffect)(function () {
@@ -86,6 +88,6 @@ function InputDate(props) {
86
88
  function convertToDateTime(date) {
87
89
  return date ? (0, date_fns_1.parseISO)(date) : null;
88
90
  }
89
- 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 })));
91
+ 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 })));
90
92
  }
91
93
  exports.default = InputDate;
package/lib/components/material-ui/InputDateTime/InputDateTime.d.ts CHANGED
@@ -5,7 +5,7 @@ import { TextFieldProps } from '@mui/material';
5
5
  declare type Props = {
6
6
  name?: string;
7
7
  onChange: SimpleEventHandler<string>;
8
- InputProps?: TextFieldProps;
8
+ InputProps?: Omit<TextFieldProps, 'id'>;
9
9
  } & Omit<DateTimePickerProps, 'onChange' | 'renderInput' | 'date' | 'rawValue' | 'openPicker' | 'InputProps'> & React.RefAttributes<HTMLDivElement>;
10
10
  export default function InputDateTime(props: Props): JSX.Element;
11
11
  export {};
package/lib/components/material-ui/InputDateTime/InputDateTime.js CHANGED
@@ -61,8 +61,10 @@ var react_1 = __importStar(require("react"));
61
61
  var date_fns_1 = require("date-fns");
62
62
  var lab_1 = require("@mui/lab");
63
63
  var material_1 = require("@mui/material");
64
+ var nanoid_1 = require("nanoid");
64
65
  function InputDateTime(props) {
65
66
  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"]);
67
+ var id = (0, react_1.useRef)((0, nanoid_1.nanoid)());
66
68
  var _d = __read((0, react_1.useState)(null), 2), value = _d[0], setValue = _d[1];
67
69
  (0, react_1.useEffect)(function () {
68
70
  if (props.value !== value) {
@@ -75,6 +77,6 @@ function InputDateTime(props) {
75
77
  onChange({ target: { name: name, value: date ? (0, date_fns_1.formatISO)(date) : null } });
76
78
  }
77
79
  }
78
- 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 })));
80
+ 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 })));
79
81
  }
80
82
  exports.default = InputDateTime;
package/lib/components/material-ui/InputGroup/InputGroup.d.ts CHANGED
@@ -5,5 +5,5 @@ export declare type Props = {
5
5
  hideCharCounter?: boolean;
6
6
  enableDebouncedOnChange?: boolean;
7
7
  changeValidator?: (value: string) => boolean;
8
- } & TextFieldProps;
8
+ } & Omit<TextFieldProps, 'id'>;
9
9
  export default function InputGroup(props: Props): JSX.Element;
package/lib/components/material-ui/InputGroup/InputGroup.js CHANGED
@@ -48,8 +48,10 @@ var react_1 = require("@emotion/react");
48
48
  var react_2 = require("react");
49
49
  var lodash_1 = require("lodash");
50
50
  var material_1 = require("@mui/material");
51
+ var nanoid_1 = require("nanoid");
51
52
  function InputGroup(props) {
52
53
  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"]);
54
+ var id = (0, react_2.useRef)((0, nanoid_1.nanoid)());
53
55
  var _d = __read((0, react_2.useState)(''), 2), value = _d[0], setValue = _d[1];
54
56
  (0, react_2.useEffect)(function () {
55
57
  if (propsValue !== value) {
@@ -77,7 +79,7 @@ function InputGroup(props) {
77
79
  }
78
80
  }
79
81
  return ((0, react_1.jsx)("div", { className: className, style: style },
80
- (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)),
82
+ (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)),
81
83
  (0, react_1.jsx)("div", null,
82
84
  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)),
83
85
  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 CHANGED
@@ -15,6 +15,6 @@ declare type Props<T> = {
15
15
  max?: number;
16
16
  count?: number;
17
17
  onChange: (event: ChangeEvent<any>, value: any, reason: AutocompleteChangeReason) => void;
18
- } & Omit<AutocompleteProps<T, MaybeBoolean, MaybeBoolean, MaybeBoolean, any>, 'onChange' | 'renderInput'>;
18
+ } & Omit<AutocompleteProps<T, MaybeBoolean, MaybeBoolean, MaybeBoolean, any>, 'onChange' | 'renderInput' | 'id'>;
19
19
  export default function InputSearchDropdown<T>(props: Props<T>): JSX.Element;
20
20
  export {};
package/lib/components/material-ui/InputSearchDropdown/InputSearchDropdown.js CHANGED
@@ -48,6 +48,7 @@ var react_1 = require("@emotion/react");
48
48
  var react_2 = require("react");
49
49
  var styles_1 = require("@mui/styles");
50
50
  var material_1 = require("@mui/material");
51
+ var nanoid_1 = require("nanoid");
51
52
  var useStyles = (0, styles_1.makeStyles)({
52
53
  option: {
53
54
  '&[data-focus="true"]': { backgroundColor: '#5789ff', color: 'white' },
@@ -55,6 +56,7 @@ var useStyles = (0, styles_1.makeStyles)({
55
56
  });
56
57
  function InputSearchDropdown(props) {
57
58
  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"]);
59
+ var id = (0, react_2.useRef)((0, nanoid_1.nanoid)());
58
60
  var _j = __read((0, react_2.useState)(null), 2), value = _j[0], setValue = _j[1];
59
61
  var mainStyles = useStyles();
60
62
  (0, react_2.useEffect)(function () {
@@ -121,7 +123,7 @@ function InputSearchDropdown(props) {
121
123
  return ((_a = value) === null || _a === void 0 ? void 0 : _a.length) || 0;
122
124
  }
123
125
  return ((0, react_1.jsx)("div", null,
124
- (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() })),
126
+ (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() })),
125
127
  (0, react_1.jsx)("div", null,
126
128
  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)),
127
129
  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 CHANGED
@@ -4,7 +4,7 @@ import { TextFieldProps } from '@mui/material';
4
4
  declare type Props = {
5
5
  name?: string;
6
6
  onChange: SimpleEventHandler<ParsableDate>;
7
- InputProps?: TextFieldProps;
7
+ InputProps?: Omit<TextFieldProps, 'id'>;
8
8
  } & Omit<TimePickerProps, 'onChange' | 'renderInput' | 'openPicker' | 'rawValue' | 'InputProps'>;
9
9
  export default function InputTime(props: Props): JSX.Element;
10
10
  export {};
package/lib/components/material-ui/InputTime/InputTime.js CHANGED
@@ -61,9 +61,11 @@ var react_1 = __importStar(require("react"));
61
61
  var date_fns_1 = require("date-fns");
62
62
  var lab_1 = require("@mui/lab");
63
63
  var material_1 = require("@mui/material");
64
+ var nanoid_1 = require("nanoid");
64
65
  function InputTime(props) {
65
66
  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"]);
66
67
  var _d = __read((0, react_1.useState)(null), 2), value = _d[0], setValue = _d[1];
68
+ var id = (0, react_1.useRef)((0, nanoid_1.nanoid)());
67
69
  (0, react_1.useEffect)(function () {
68
70
  if (props.value) {
69
71
  setValue(props.value);
@@ -75,6 +77,6 @@ function InputTime(props) {
75
77
  onChange({ target: { name: name, value: date ? (0, date_fns_1.formatISO)(date) : null } });
76
78
  }
77
79
  }
78
- 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 })));
80
+ 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 })));
79
81
  }
80
82
  exports.default = InputTime;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vendorflow/components",
3
- "version": "2.0.59",
3
+ "version": "2.0.60",
4
4
  "description": "React components for vendorflow",
5
5
  "main": "lib/index.js",
6
6
  "types": "lib/index.d.ts",