@vendorflow/components 1.1.20 → 1.1.24

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 (27) hide show
  1. package/lib/components/material-ui/Button/Button.js +1 -1
  2. package/lib/components/material-ui/ButtonMenu/ButtonMenu.js +6 -6
  3. package/lib/components/material-ui/ChatInterface/ChatInterface.d.ts +3 -2
  4. package/lib/components/material-ui/ChatInterface/ChatInterface.js +15 -13
  5. package/lib/components/material-ui/ChatInterface/ChatInterface.story.js +31 -19
  6. package/lib/components/material-ui/ChatInterface/MessageInput.d.ts +2 -1
  7. package/lib/components/material-ui/ChatInterface/MessageInput.js +5 -6
  8. package/lib/components/material-ui/ChatInterface/MessageItem.js +5 -5
  9. package/lib/components/material-ui/ChatInterface/MessageThread.js +2 -2
  10. package/lib/components/material-ui/InputCheckboxGroup/InputCheckboxGroup.js +6 -6
  11. package/lib/components/material-ui/InputCheckboxGroup/InputCheckboxGroup.story.js +1 -1
  12. package/lib/components/material-ui/InputDate/InputDate.js +4 -4
  13. package/lib/components/material-ui/InputDate/InputDate.story.js +1 -1
  14. package/lib/components/material-ui/InputDateTime/InputDateTime.js +4 -4
  15. package/lib/components/material-ui/InputDateTime/InputDateTime.story.js +1 -1
  16. package/lib/components/material-ui/InputGroup/InputGroup.js +8 -8
  17. package/lib/components/material-ui/InputGroup/InputGroup.story.js +1 -1
  18. package/lib/components/material-ui/InputRadioGroup/InputRadioGroup.js +2 -2
  19. package/lib/components/material-ui/InputRadioGroup/InputRadioGroup.story.js +1 -1
  20. package/lib/components/material-ui/InputSearchDropdown/InputSearchDropdown.js +12 -12
  21. package/lib/components/material-ui/InputSearchDropdown/InputSearchDropdown.story.js +2 -2
  22. package/lib/components/material-ui/InputTime/InputTime.js +4 -4
  23. package/lib/components/material-ui/InputTime/InputTime.story.js +1 -1
  24. package/lib/components/material-ui/Modal/Modal.js +1 -1
  25. package/lib/components/material-ui/Modal/Modal.story.js +1 -1
  26. package/lib/types/Component.types.d.ts +1 -1
  27. package/package.json +2 -2
package/lib/components/material-ui/Button/Button.js CHANGED
@@ -28,7 +28,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
28
28
  var react_1 = __importDefault(require("react"));
29
29
  var core_1 = require("@material-ui/core");
30
30
  var styles_1 = require("@material-ui/core/styles");
31
- var useStyles = styles_1.makeStyles({
31
+ var useStyles = (0, styles_1.makeStyles)({
32
32
  root: {
33
33
  color: 'white',
34
34
  },
package/lib/components/material-ui/ButtonMenu/ButtonMenu.js CHANGED
@@ -46,7 +46,7 @@ var lodash_1 = require("lodash");
46
46
  var core_1 = require("@material-ui/core");
47
47
  function ButtonMenu(props) {
48
48
  var buttonRenderer = props.buttonRenderer, button = props.button, id = props.id, menuItems = props.menuItems, _a = props.anchorOrigin, anchorOrigin = _a === void 0 ? { vertical: 'bottom', horizontal: 'left' } : _a, _b = props.transformOrigin, transformOrigin = _b === void 0 ? { vertical: 'top', horizontal: 'left' } : _b, restOfProps = __rest(props, ["buttonRenderer", "button", "id", "menuItems", "anchorOrigin", "transformOrigin"]);
49
- var _c = react_1.useState(null), anchorEl = _c[0], setAnchorEl = _c[1];
49
+ var _c = (0, react_1.useState)(null), anchorEl = _c[0], setAnchorEl = _c[1];
50
50
  var open = !!anchorEl;
51
51
  function onHandleOpen(evt) {
52
52
  setAnchorEl(evt.currentTarget);
@@ -60,17 +60,17 @@ function ButtonMenu(props) {
60
60
  }
61
61
  function renderButton() {
62
62
  if (buttonRenderer) {
63
- if (react_1.isValidElement(buttonRenderer)) {
64
- return react_1.cloneElement(buttonRenderer, {
63
+ if ((0, react_1.isValidElement)(buttonRenderer)) {
64
+ return (0, react_1.cloneElement)(buttonRenderer, {
65
65
  onClick: onHandleOpen,
66
66
  'aria-controls': id,
67
67
  'aria-haspopup': 'true',
68
68
  });
69
69
  }
70
- if (lodash_1.isFunction(buttonRenderer)) {
70
+ if ((0, lodash_1.isFunction)(buttonRenderer)) {
71
71
  var Element_1 = buttonRenderer();
72
- if (react_1.isValidElement(Element_1)) {
73
- return react_1.cloneElement(Element_1, {
72
+ if ((0, react_1.isValidElement)(Element_1)) {
73
+ return (0, react_1.cloneElement)(Element_1, {
74
74
  onClick: onHandleOpen,
75
75
  'aria-controls': id,
76
76
  'aria-haspopup': 'true',
package/lib/components/material-ui/ChatInterface/ChatInterface.d.ts CHANGED
@@ -9,9 +9,10 @@ export interface Message {
9
9
  interface Props {
10
10
  userId: string;
11
11
  messages: Message[];
12
- handleSend: (message: string) => void;
12
+ handleSend: (message: string) => Promise<boolean>;
13
13
  className?: string;
14
14
  style?: any;
15
+ submitting: boolean;
15
16
  }
16
- export default function ChatInterface({ userId, messages, handleSend, className, style }: Props): JSX.Element;
17
+ export default function ChatInterface({ userId, messages, handleSend, className, style, submitting, }: Props): JSX.Element;
17
18
  export {};
package/lib/components/material-ui/ChatInterface/ChatInterface.js CHANGED
@@ -50,11 +50,11 @@ var react_measure_1 = __importDefault(require("react-measure"));
50
50
  var MessageInput_1 = __importDefault(require("./MessageInput"));
51
51
  var MessageThread_1 = __importDefault(require("./MessageThread"));
52
52
  function ChatInterface(_a) {
53
- var userId = _a.userId, messages = _a.messages, handleSend = _a.handleSend, className = _a.className, style = _a.style;
54
- var _b = react_2.useState(''), message = _b[0], setMessage = _b[1];
55
- var _c = react_2.useState(-1), inputHeight = _c[0], setInputHeight = _c[1];
56
- var contentEl = react_2.useRef(null);
57
- react_2.useEffect(function () {
53
+ var userId = _a.userId, messages = _a.messages, handleSend = _a.handleSend, className = _a.className, style = _a.style, submitting = _a.submitting;
54
+ var _b = (0, react_2.useState)(''), message = _b[0], setMessage = _b[1];
55
+ var _c = (0, react_2.useState)(-1), inputHeight = _c[0], setInputHeight = _c[1];
56
+ var contentEl = (0, react_2.useRef)(null);
57
+ (0, react_2.useEffect)(function () {
58
58
  var _a, _b;
59
59
  if (((_b = (_a = contentEl.current) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.scrollTo) !== undefined) {
60
60
  contentEl.current.parentElement.scrollTo(0, contentEl.current.scrollHeight);
@@ -62,15 +62,17 @@ function ChatInterface(_a) {
62
62
  }, [messages.length]);
63
63
  function handleClickSend() {
64
64
  return __awaiter(this, void 0, void 0, function () {
65
- var e_1;
65
+ var success, e_1;
66
66
  return __generator(this, function (_a) {
67
67
  switch (_a.label) {
68
68
  case 0:
69
69
  _a.trys.push([0, 2, , 3]);
70
70
  return [4 /*yield*/, handleSend(message)];
71
71
  case 1:
72
- _a.sent();
73
- setMessage('');
72
+ success = _a.sent();
73
+ if (success) {
74
+ setMessage('');
75
+ }
74
76
  return [3 /*break*/, 3];
75
77
  case 2:
76
78
  e_1 = _a.sent();
@@ -82,15 +84,15 @@ function ChatInterface(_a) {
82
84
  });
83
85
  });
84
86
  }
85
- return (react_1.jsx("div", { css: react_1.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n min-height: 15rem;\n background-color: hsl(229, 44%, 95%);\n position: relative;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',\n 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n "], ["\n width: 100%;\n height: 100%;\n min-height: 15rem;\n background-color: hsl(229, 44%, 95%);\n position: relative;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',\n 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n "]))), className: className, style: style },
86
- react_1.jsx(react_measure_1.default, { bounds: true, onResize: function (_a) {
87
+ return ((0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n min-height: 15rem;\n background-color: hsl(229, 44%, 95%);\n position: relative;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',\n 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n "], ["\n width: 100%;\n height: 100%;\n min-height: 15rem;\n background-color: hsl(229, 44%, 95%);\n position: relative;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',\n 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n "]))), className: className, style: style },
88
+ (0, react_1.jsx)(react_measure_1.default, { bounds: true, onResize: function (_a) {
87
89
  var bounds = _a.bounds;
88
90
  return setInputHeight((bounds === null || bounds === void 0 ? void 0 : bounds.height) || 0);
89
91
  } }, function (_a) {
90
92
  var measureRef = _a.measureRef;
91
- return (react_1.jsx(react_2.Fragment, null,
92
- react_1.jsx(MessageThread_1.default, { userId: userId, messages: messages, inputHeight: inputHeight, contentEl: contentEl }),
93
- react_1.jsx(MessageInput_1.default, { measureRef: measureRef, handleClickSend: handleClickSend, message: message, setMessage: setMessage })));
93
+ return ((0, react_1.jsx)(react_2.Fragment, null,
94
+ (0, react_1.jsx)(MessageThread_1.default, { userId: userId, messages: messages, inputHeight: inputHeight, contentEl: contentEl }),
95
+ (0, react_1.jsx)(MessageInput_1.default, { measureRef: measureRef, handleClickSend: handleClickSend, message: message, setMessage: setMessage, submitting: submitting })));
94
96
  })));
95
97
  }
96
98
  exports.default = ChatInterface;
package/lib/components/material-ui/ChatInterface/ChatInterface.story.js CHANGED
@@ -3,10 +3,14 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
3
3
  if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
4
4
  return cooked;
5
5
  };
6
- var __spreadArray = (this && this.__spreadArray) || function (to, from) {
7
- for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
8
- to[j] = from[i];
9
- return to;
6
+ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
7
+ if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
8
+ if (ar || !(i in from)) {
9
+ if (!ar) ar = Array.prototype.slice.call(from, 0, i);
10
+ ar[i] = from[i];
11
+ }
12
+ }
13
+ return to.concat(ar || Array.prototype.slice.call(from));
10
14
  };
11
15
  var __importDefault = (this && this.__importDefault) || function (mod) {
12
16
  return (mod && mod.__esModule) ? mod : { "default": mod };
@@ -19,8 +23,9 @@ var react_2 = require("react");
19
23
  var ChatInterface_1 = __importDefault(require("./ChatInterface"));
20
24
  // tslint:disable-next-line:no-console
21
25
  function ChatInterface() {
22
- var _a = react_2.useState(4), id = _a[0], setId = _a[1];
23
- var _b = react_2.useState([
26
+ var _a = (0, react_2.useState)(4), id = _a[0], setId = _a[1];
27
+ var _b = (0, react_2.useState)(false), submitting = _b[0], setSubmitting = _b[1];
28
+ var _c = (0, react_2.useState)([
24
29
  {
25
30
  id: '3',
26
31
  userId: 'user1',
@@ -42,21 +47,28 @@ function ChatInterface() {
42
47
  timestamp: new Date().toISOString(),
43
48
  content: 'hello',
44
49
  },
45
- ]), messages = _b[0], setMessages = _b[1];
50
+ ]), messages = _c[0], setMessages = _c[1];
46
51
  function handleSend(message) {
47
- setMessages(__spreadArray([
48
- {
49
- id: id.toString(),
50
- userId: 'user1',
51
- username: 'Socorro Aguilar',
52
- timestamp: new Date().toISOString(),
53
- content: message,
54
- }
55
- ], messages));
56
- setId(id + 1);
52
+ setSubmitting(true);
53
+ return new Promise(function (resolve) {
54
+ setTimeout(function () {
55
+ setMessages(__spreadArray([
56
+ {
57
+ id: id.toString(),
58
+ userId: 'user1',
59
+ username: 'Socorro Aguilar',
60
+ timestamp: new Date().toISOString(),
61
+ content: message,
62
+ }
63
+ ], messages, true));
64
+ setId(id + 1);
65
+ setSubmitting(false);
66
+ resolve(true);
67
+ }, 500);
68
+ });
57
69
  }
58
- return (react_1.jsx("div", { css: react_1.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border: 1px solid #ededed;\n height: 20rem;\n "], ["\n border: 1px solid #ededed;\n height: 20rem;\n "]))) },
59
- react_1.jsx(ChatInterface_1.default, { userId: "user1", messages: messages, handleSend: handleSend })));
70
+ return ((0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border: 1px solid #ededed;\n height: 20rem;\n "], ["\n border: 1px solid #ededed;\n height: 20rem;\n "]))) },
71
+ (0, react_1.jsx)(ChatInterface_1.default, { userId: "user1", messages: messages, handleSend: handleSend, submitting: submitting })));
60
72
  }
61
73
  exports.ChatInterface = ChatInterface;
62
74
  var templateObject_1;
package/lib/components/material-ui/ChatInterface/MessageInput.d.ts CHANGED
@@ -4,6 +4,7 @@ interface Props {
4
4
  handleClickSend: () => Promise<void>;
5
5
  message: string;
6
6
  setMessage: Dispatch<SetStateAction<string>>;
7
+ submitting: boolean;
7
8
  }
8
- export default function MessageInput({ measureRef, handleClickSend, message, setMessage }: Props): JSX.Element;
9
+ export default function MessageInput({ measureRef, handleClickSend, message, setMessage, submitting, }: Props): JSX.Element;
9
10
  export {};
package/lib/components/material-ui/ChatInterface/MessageInput.js CHANGED
@@ -13,7 +13,7 @@ var react_textarea_autosize_1 = __importDefault(require("react-textarea-autosize
13
13
  var core_1 = require("@material-ui/core");
14
14
  var icons_1 = require("@material-ui/icons");
15
15
  function MessageInput(_a) {
16
- var measureRef = _a.measureRef, handleClickSend = _a.handleClickSend, message = _a.message, setMessage = _a.setMessage;
16
+ var measureRef = _a.measureRef, handleClickSend = _a.handleClickSend, message = _a.message, setMessage = _a.setMessage, submitting = _a.submitting;
17
17
  function handleOnChange(_a) {
18
18
  var value = _a.target.value;
19
19
  setMessage(value);
@@ -35,11 +35,10 @@ function MessageInput(_a) {
35
35
  handleClickSend().then();
36
36
  }
37
37
  }
38
- return (react_1.jsx("div", { ref: measureRef, css: react_1.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n background-color: white;\n bottom: 0;\n left: 0;\n position: absolute;\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n "], ["\n width: 100%;\n background-color: white;\n bottom: 0;\n left: 0;\n position: absolute;\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n "]))) },
39
- react_1.jsx(react_textarea_autosize_1.default, { css: react_1.css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',\n 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n border: none;\n resize: none;\n width: 100%;\n outline: 0 none transparent;\n font-size: 16px;\n\n &:focus {\n border: none;\n }\n &:focus-visible {\n border: none;\n }\n "], ["\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',\n 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n border: none;\n resize: none;\n width: 100%;\n outline: 0 none transparent;\n font-size: 16px;\n\n &:focus {\n border: none;\n }\n &:focus-visible {\n border: none;\n }\n "]))), placeholder: "Type your message here...", value: message, onChange: handleOnChange, onKeyDown: handleOnKeyDown, minRows: 3, maxRows: 8 }),
40
- react_1.jsx("div", { css: react_1.css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n height: 2rem;\n width: 2rem;\n padding-right: 0.25rem;\n "], ["\n height: 2rem;\n width: 2rem;\n padding-right: 0.25rem;\n "]))) },
41
- react_1.jsx(core_1.IconButton, { css: react_1.css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n height: 100%;\n width: 100%;\n "], ["\n height: 100%;\n width: 100%;\n "]))), onClick: handleOnClickSend },
42
- react_1.jsx(icons_1.Send, null)))));
38
+ return ((0, react_1.jsx)("div", { ref: measureRef, css: (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n background-color: white;\n bottom: 0;\n left: 0;\n position: absolute;\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n "], ["\n width: 100%;\n background-color: white;\n bottom: 0;\n left: 0;\n position: absolute;\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n "]))) },
39
+ (0, react_1.jsx)(react_textarea_autosize_1.default, { css: (0, react_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',\n 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n border: none;\n resize: none;\n width: calc(100% - 2.5rem);\n outline: 0 none transparent;\n font-size: 16px;\n\n &:focus {\n border: none;\n }\n &:focus-visible {\n border: none;\n }\n "], ["\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',\n 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n border: none;\n resize: none;\n width: calc(100% - 2.5rem);\n outline: 0 none transparent;\n font-size: 16px;\n\n &:focus {\n border: none;\n }\n &:focus-visible {\n border: none;\n }\n "]))), placeholder: "Type your message here...", value: message, onChange: handleOnChange, onKeyDown: handleOnKeyDown, minRows: 3, maxRows: 8 }),
40
+ (0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n height: 2rem;\n width: 2rem;\n padding-right: ", ";\n "], ["\n height: 2rem;\n width: 2rem;\n padding-right: ", ";\n "])), submitting ? '0.5rem' : '0.25rem') }, submitting ? ((0, react_1.jsx)(core_1.CircularProgress, { size: "2rem" })) : ((0, react_1.jsx)(core_1.IconButton, { css: (0, react_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n height: 100%;\n width: 100%;\n "], ["\n height: 100%;\n width: 100%;\n "]))), onClick: handleOnClickSend, disabled: submitting },
41
+ (0, react_1.jsx)(icons_1.Send, null))))));
43
42
  }
44
43
  exports.default = MessageInput;
45
44
  var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
package/lib/components/material-ui/ChatInterface/MessageItem.js CHANGED
@@ -10,11 +10,11 @@ var date_fns_1 = require("date-fns");
10
10
  function MessageItem(_a) {
11
11
  var userId = _a.userId, message = _a.message;
12
12
  var isOwnMessage = message.userId === userId;
13
- return (react_1.jsx("div", { css: react_1.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n max-width: 65%;\n background: white;\n align-self: ", ";\n padding: 0.5rem;\n margin-top: 0.5rem;\n border-radius: 4px;\n "], ["\n max-width: 65%;\n background: white;\n align-self: ", ";\n padding: 0.5rem;\n margin-top: 0.5rem;\n border-radius: 4px;\n "])), isOwnMessage ? 'flex-end' : 'flex-start') },
14
- react_1.jsx("div", null,
15
- react_1.jsx("div", { css: react_1.css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n font-weight: 700;\n font-size: 0.75rem;\n display: inline-block;\n margin-right: 0.25rem;\n "], ["\n font-weight: 700;\n font-size: 0.75rem;\n display: inline-block;\n margin-right: 0.25rem;\n "]))) }, message.username),
16
- react_1.jsx("div", { css: react_1.css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n font-size: 0.75rem;\n display: inline-block;\n "], ["\n font-size: 0.75rem;\n display: inline-block;\n "]))) }, date_fns_1.format(new Date(message.timestamp), 'H:mm MM/dd/yyyy'))),
17
- react_1.jsx("div", { css: react_1.css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n font-size: 0.875rem;\n white-space: break-spaces;\n "], ["\n font-size: 0.875rem;\n white-space: break-spaces;\n "]))) }, message.content)));
13
+ return ((0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n max-width: 65%;\n background: white;\n align-self: ", ";\n padding: 0.5rem;\n margin-top: 0.5rem;\n border-radius: 4px;\n "], ["\n max-width: 65%;\n background: white;\n align-self: ", ";\n padding: 0.5rem;\n margin-top: 0.5rem;\n border-radius: 4px;\n "])), isOwnMessage ? 'flex-end' : 'flex-start') },
14
+ (0, react_1.jsx)("div", null,
15
+ (0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n font-weight: 700;\n font-size: 0.75rem;\n display: inline-block;\n margin-right: 0.25rem;\n "], ["\n font-weight: 700;\n font-size: 0.75rem;\n display: inline-block;\n margin-right: 0.25rem;\n "]))) }, message.username),
16
+ (0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n font-size: 0.75rem;\n display: inline-block;\n "], ["\n font-size: 0.75rem;\n display: inline-block;\n "]))) }, (0, date_fns_1.format)(new Date(message.timestamp), 'H:mm MM/dd/yyyy'))),
17
+ (0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n font-size: 0.875rem;\n white-space: break-spaces;\n "], ["\n font-size: 0.875rem;\n white-space: break-spaces;\n "]))) }, message.content)));
18
18
  }
19
19
  exports.default = MessageItem;
20
20
  var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
package/lib/components/material-ui/ChatInterface/MessageThread.js CHANGED
@@ -12,8 +12,8 @@ var react_1 = require("@emotion/react");
12
12
  var MessageItem_1 = __importDefault(require("./MessageItem"));
13
13
  function MessageThread(_a) {
14
14
  var userId = _a.userId, messages = _a.messages, inputHeight = _a.inputHeight, contentEl = _a.contentEl;
15
- return (react_1.jsx("div", { css: react_1.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: calc(100% - ", "px - 1rem);\n width: calc(100% - 2rem);\n padding: 0.5rem 1rem;\n overflow-y: auto;\n "], ["\n height: calc(100% - ", "px - 1rem);\n width: calc(100% - 2rem);\n padding: 0.5rem 1rem;\n overflow-y: auto;\n "])), inputHeight) },
16
- react_1.jsx("div", { css: react_1.css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column-reverse;\n justify-content: flex-start;\n align-items: flex-start;\n "], ["\n display: flex;\n flex-direction: column-reverse;\n justify-content: flex-start;\n align-items: flex-start;\n "]))), ref: contentEl }, messages.map(function (message) { return (react_1.jsx(MessageItem_1.default, { key: message.id + "-" + message.timestamp, message: message, userId: userId })); }))));
15
+ return ((0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: calc(100% - ", "px - 1rem);\n width: calc(100% - 2rem);\n padding: 0.5rem 1rem;\n overflow-y: auto;\n "], ["\n height: calc(100% - ", "px - 1rem);\n width: calc(100% - 2rem);\n padding: 0.5rem 1rem;\n overflow-y: auto;\n "])), inputHeight) },
16
+ (0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column-reverse;\n justify-content: flex-start;\n align-items: flex-start;\n "], ["\n display: flex;\n flex-direction: column-reverse;\n justify-content: flex-start;\n align-items: flex-start;\n "]))), ref: contentEl }, messages.map(function (message) { return ((0, react_1.jsx)(MessageItem_1.default, { key: message.id + "-" + message.timestamp, message: message, userId: userId })); }))));
17
17
  }
18
18
  exports.default = MessageThread;
19
19
  var templateObject_1, templateObject_2;
package/lib/components/material-ui/InputCheckboxGroup/InputCheckboxGroup.js CHANGED
@@ -28,8 +28,8 @@ var lodash_1 = require("lodash");
28
28
  var core_1 = require("@material-ui/core");
29
29
  function InputCheckboxGroup(props) {
30
30
  var _a = props.color, color = _a === void 0 ? 'primary' : _a, disabled = props.disabled, error = props.error, helperText = props.helperText, label = props.label, name = props.name, onChange = props.onChange, options = props.options, _b = props.multi, multi = _b === void 0 ? true : _b;
31
- var _c = react_1.useState({}), values = _c[0], setValues = _c[1];
32
- react_1.useEffect(function () {
31
+ var _c = (0, react_1.useState)({}), values = _c[0], setValues = _c[1];
32
+ (0, react_1.useEffect)(function () {
33
33
  var newValues = {};
34
34
  options.forEach(function (_a) {
35
35
  var label = _a.label;
@@ -44,12 +44,12 @@ function InputCheckboxGroup(props) {
44
44
  }, [options]); // eslint-disable-line
45
45
  function handleOnChange(event) {
46
46
  var _a = event.target, targetName = _a.name, checked = _a.checked;
47
- var newValues = immer_1.default(values, function (draft) {
47
+ var newValues = (0, immer_1.default)(values, function (draft) {
48
48
  if (multi) {
49
49
  draft[targetName] = checked;
50
50
  }
51
51
  else {
52
- lodash_1.forEach(draft, function (checked, name) {
52
+ (0, lodash_1.forEach)(draft, function (checked, name) {
53
53
  if (name !== targetName) {
54
54
  draft[name] = false;
55
55
  }
@@ -63,7 +63,7 @@ function InputCheckboxGroup(props) {
63
63
  onChange({
64
64
  target: {
65
65
  name: name,
66
- value: lodash_1.reduce(newValues, function (result, checked, key) {
66
+ value: (0, lodash_1.reduce)(newValues, function (result, checked, key) {
67
67
  return checked ? result.concat([key]) : result;
68
68
  }, []),
69
69
  },
@@ -77,7 +77,7 @@ function InputCheckboxGroup(props) {
77
77
  }
78
78
  return (react_1.default.createElement(core_1.FormControl, { component: "fieldset", error: error },
79
79
  react_1.default.createElement(core_1.FormLabel, { component: "legend" }, label),
80
- react_1.default.createElement(core_1.FormGroup, null, !lodash_1.isEmpty(options) ? renderOptions() : react_1.default.createElement("div", null)),
80
+ react_1.default.createElement(core_1.FormGroup, null, !(0, lodash_1.isEmpty)(options) ? renderOptions() : react_1.default.createElement("div", null)),
81
81
  react_1.default.createElement(core_1.FormHelperText, null, helperText)));
82
82
  }
83
83
  exports.default = InputCheckboxGroup;
package/lib/components/material-ui/InputCheckboxGroup/InputCheckboxGroup.story.js CHANGED
@@ -31,7 +31,7 @@ var options = [
31
31
  { label: 'Orange', value: 'orange' },
32
32
  ];
33
33
  var InputCheckboxGroup = function () {
34
- var _a = react_1.useState([]), value = _a[0], setValue = _a[1];
34
+ var _a = (0, react_1.useState)([]), value = _a[0], setValue = _a[1];
35
35
  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 || []); } }));
36
36
  };
37
37
  exports.InputCheckboxGroup = InputCheckboxGroup;
package/lib/components/material-ui/InputDate/InputDate.js CHANGED
@@ -46,16 +46,16 @@ var date_fns_1 = require("date-fns");
46
46
  var pickers_1 = require("@material-ui/pickers");
47
47
  function InputDate(props) {
48
48
  var _a = props.autoOk, autoOk = _a === void 0 ? true : _a, _b = props.clearable, clearable = _b === void 0 ? true : _b, _c = props.format, format = _c === void 0 ? 'MM/dd/yyyy' : _c, _d = props.inputVariant, inputVariant = _d === void 0 ? 'outlined' : _d, label = props.label, name = props.name, onChange = props.onChange, _e = props.variant, variant = _e === void 0 ? 'inline' : _e, restOfProps = __rest(props, ["autoOk", "clearable", "format", "inputVariant", "label", "name", "onChange", "variant"]);
49
- var _f = react_1.useState(null), value = _f[0], setValue = _f[1];
50
- react_1.useEffect(function () {
49
+ var _f = (0, react_1.useState)(null), value = _f[0], setValue = _f[1];
50
+ (0, react_1.useEffect)(function () {
51
51
  if (props.value !== value) {
52
52
  setValue(props.value);
53
53
  }
54
54
  }, [props.value]); // eslint-disable-line
55
55
  function handleOnChange(date) {
56
56
  setValue(date);
57
- if (date === null || date_fns_1.isValid(date)) {
58
- onChange({ target: { name: name, value: date ? date_fns_1.formatISO(date) : null } });
57
+ if (date === null || (0, date_fns_1.isValid)(date)) {
58
+ onChange({ target: { name: name, value: date ? (0, date_fns_1.formatISO)(date) : null } });
59
59
  }
60
60
  }
61
61
  return (react_1.default.createElement(pickers_1.KeyboardDatePicker, __assign({}, restOfProps, { autoOk: autoOk, clearable: clearable, format: format, inputVariant: inputVariant, label: label, name: name, onChange: handleOnChange, value: value, variant: variant })));
package/lib/components/material-ui/InputDate/InputDate.story.js CHANGED
@@ -28,7 +28,7 @@ var pickers_1 = require("@material-ui/pickers");
28
28
  var date_fns_1 = __importDefault(require("@date-io/date-fns"));
29
29
  var InputDate_1 = __importDefault(require("components/material-ui/InputDate"));
30
30
  var InputDate = function () {
31
- var _a = react_1.useState(null), value = _a[0], setValue = _a[1];
31
+ var _a = (0, react_1.useState)(null), value = _a[0], setValue = _a[1];
32
32
  return (react_1.default.createElement(pickers_1.MuiPickersUtilsProvider, { utils: date_fns_1.default },
33
33
  react_1.default.createElement(InputDate_1.default, { label: "Bedtime", value: value, onChange: function (_a) {
34
34
  var value = _a.target.value;
package/lib/components/material-ui/InputDateTime/InputDateTime.js CHANGED
@@ -46,16 +46,16 @@ var date_fns_1 = require("date-fns");
46
46
  var pickers_1 = require("@material-ui/pickers");
47
47
  function InputDateTime(props) {
48
48
  var _a = props.autoOk, autoOk = _a === void 0 ? true : _a, _b = props.clearable, clearable = _b === void 0 ? true : _b, _c = props.format, format = _c === void 0 ? 'MM/dd/yyyy HH:mm' : _c, _d = props.inputVariant, inputVariant = _d === void 0 ? 'outlined' : _d, label = props.label, name = props.name, onChange = props.onChange, _e = props.variant, variant = _e === void 0 ? 'inline' : _e, restOfProps = __rest(props, ["autoOk", "clearable", "format", "inputVariant", "label", "name", "onChange", "variant"]);
49
- var _f = react_1.useState(null), value = _f[0], setValue = _f[1];
50
- react_1.useEffect(function () {
49
+ var _f = (0, react_1.useState)(null), value = _f[0], setValue = _f[1];
50
+ (0, react_1.useEffect)(function () {
51
51
  if (props.value !== value) {
52
52
  setValue(props.value);
53
53
  }
54
54
  }, [props.value]); // eslint-disable-line
55
55
  function handleOnChange(date) {
56
56
  setValue(date);
57
- if (date === null || date_fns_1.isValid(date)) {
58
- onChange({ target: { name: name, value: date ? date_fns_1.formatISO(date) : null } });
57
+ if (date === null || (0, date_fns_1.isValid)(date)) {
58
+ onChange({ target: { name: name, value: date ? (0, date_fns_1.formatISO)(date) : null } });
59
59
  }
60
60
  }
61
61
  return (react_1.default.createElement(pickers_1.KeyboardDateTimePicker, __assign({}, restOfProps, { autoOk: autoOk, clearable: clearable, format: format, inputVariant: inputVariant, label: label, name: name, onChange: handleOnChange, value: value, variant: variant })));
package/lib/components/material-ui/InputDateTime/InputDateTime.story.js CHANGED
@@ -28,7 +28,7 @@ var pickers_1 = require("@material-ui/pickers");
28
28
  var date_fns_1 = __importDefault(require("@date-io/date-fns"));
29
29
  var InputDateTime_1 = __importDefault(require("components/material-ui/InputDateTime"));
30
30
  var InputDateTime = function () {
31
- var _a = react_1.useState(null), value = _a[0], setValue = _a[1];
31
+ var _a = (0, react_1.useState)(null), value = _a[0], setValue = _a[1];
32
32
  return (react_1.default.createElement(pickers_1.MuiPickersUtilsProvider, { utils: date_fns_1.default },
33
33
  react_1.default.createElement(InputDateTime_1.default, { label: "Appointment", value: value, onChange: function (_a) {
34
34
  var value = _a.target.value;
package/lib/components/material-ui/InputGroup/InputGroup.js CHANGED
@@ -33,13 +33,13 @@ var lodash_1 = require("lodash");
33
33
  var core_1 = require("@material-ui/core");
34
34
  function InputGroup(props) {
35
35
  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, restOfProps = __rest(props, ["changeValidator", "charLimit", "className", "hideCharCounter", "enableDebouncedOnChange", "multiline", "error", "label", "name", "onChange", "placeholder", "helperText", "variant", "style", "value"]);
36
- var _c = react_2.useState(''), value = _c[0], setValue = _c[1];
37
- react_2.useEffect(function () {
36
+ var _c = (0, react_2.useState)(''), value = _c[0], setValue = _c[1];
37
+ (0, react_2.useEffect)(function () {
38
38
  if (propsValue !== value) {
39
39
  setValue(propsValue || '');
40
40
  }
41
41
  }, [propsValue]); // eslint-disable-line
42
- var debouncedOnChangeHandler = react_2.useCallback(lodash_1.debounce(function (evt) {
42
+ var debouncedOnChangeHandler = (0, react_2.useCallback)((0, lodash_1.debounce)(function (evt) {
43
43
  if (onChange) {
44
44
  onChange(evt);
45
45
  }
@@ -59,11 +59,11 @@ function InputGroup(props) {
59
59
  }
60
60
  }
61
61
  }
62
- return (react_1.jsx("div", { className: className, style: style },
63
- react_1.jsx(core_1.TextField, __assign({ error: error, label: label, name: name, onChange: handleOnChange, placeholder: placeholder, value: value, variant: variant, multiline: multiline }, restOfProps)),
64
- react_1.jsx("div", null,
65
- helperText && (react_1.jsx(core_1.Typography, { css: 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)),
66
- charLimit !== undefined && !hideCharCounter && (react_1.jsx(core_1.Typography, { css: 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" },
62
+ return ((0, react_1.jsx)("div", { className: className, style: style },
63
+ (0, react_1.jsx)(core_1.TextField, __assign({ error: error, label: label, name: name, onChange: handleOnChange, placeholder: placeholder, value: value, variant: variant, multiline: multiline }, restOfProps)),
64
+ (0, react_1.jsx)("div", null,
65
+ helperText && ((0, react_1.jsx)(core_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)),
66
+ charLimit !== undefined && !hideCharCounter && ((0, react_1.jsx)(core_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" },
67
67
  value.length,
68
68
  "/",
69
69
  charLimit)))));
package/lib/components/material-ui/InputGroup/InputGroup.story.js CHANGED
@@ -26,7 +26,7 @@ exports.InputGroup = void 0;
26
26
  var react_1 = __importStar(require("react"));
27
27
  var InputGroup_1 = __importDefault(require("./InputGroup"));
28
28
  var InputGroup = function () {
29
- var _a = react_1.useState(''), value = _a[0], setValue = _a[1];
29
+ var _a = (0, react_1.useState)(''), value = _a[0], setValue = _a[1];
30
30
  function onChange(evt) {
31
31
  setValue(evt.target.value);
32
32
  }
package/lib/components/material-ui/InputRadioGroup/InputRadioGroup.js CHANGED
@@ -23,8 +23,8 @@ var react_1 = __importStar(require("react"));
23
23
  var core_1 = require("@material-ui/core");
24
24
  function InputRadioGroup(props) {
25
25
  var _a = props.color, color = _a === void 0 ? 'primary' : _a, disabled = props.disabled, error = props.error, helperText = props.helperText, label = props.label, name = props.name, onChange = props.onChange, options = props.options, _b = props.row, row = _b === void 0 ? false : _b;
26
- var _c = react_1.useState(null), value = _c[0], setValue = _c[1];
27
- react_1.useEffect(function () {
26
+ var _c = (0, react_1.useState)(null), value = _c[0], setValue = _c[1];
27
+ (0, react_1.useEffect)(function () {
28
28
  if (props.value !== value) {
29
29
  setValue(props.value);
30
30
  }
package/lib/components/material-ui/InputRadioGroup/InputRadioGroup.story.js CHANGED
@@ -31,7 +31,7 @@ var options = [
31
31
  { label: 'Orange', value: 'orange' },
32
32
  ];
33
33
  var InputRadioGroup = function () {
34
- var _a = react_1.useState(null), value = _a[0], setValue = _a[1];
34
+ var _a = (0, react_1.useState)(null), value = _a[0], setValue = _a[1];
35
35
  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 }));
36
36
  };
37
37
  exports.InputRadioGroup = InputRadioGroup;
package/lib/components/material-ui/InputSearchDropdown/InputSearchDropdown.js CHANGED
@@ -33,16 +33,16 @@ var styles_1 = require("@material-ui/core/styles");
33
33
  var Autocomplete_1 = require("@material-ui/lab/Autocomplete");
34
34
  var core_1 = require("@material-ui/core");
35
35
  var lab_1 = require("@material-ui/lab");
36
- var useStyles = styles_1.makeStyles({
36
+ var useStyles = (0, styles_1.makeStyles)({
37
37
  option: {
38
38
  '&[data-focus="true"]': { backgroundColor: '#5789ff', color: 'white' },
39
39
  },
40
40
  });
41
41
  function InputSearchDropdown(props) {
42
42
  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, onBlur = props.onBlur, 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, restOfProps = __rest(props, ["autoHighlight", "clearOnEscape", "count", "disableFilter", "error", "errors", "filterOptions", "filterSelectedOptions", "label", "helperText", "name", "onBlur", "onChange", "openOnFocus", "renderInput", "renderTags", "selectOnFocus", "variant", "multiple", "max"]);
43
- var _h = react_2.useState(null), value = _h[0], setValue = _h[1];
43
+ var _h = (0, react_2.useState)(null), value = _h[0], setValue = _h[1];
44
44
  var mainStyles = useStyles();
45
- react_2.useEffect(function () {
45
+ (0, react_2.useEffect)(function () {
46
46
  if (props.value !== value) {
47
47
  if (!props.value && props.multiple) {
48
48
  setValue([]);
@@ -82,20 +82,20 @@ function InputSearchDropdown(props) {
82
82
  }
83
83
  }
84
84
  function handleOptionFilter() {
85
- return Autocomplete_1.createFilterOptions({
85
+ return (0, Autocomplete_1.createFilterOptions)({
86
86
  matchFrom: 'any',
87
87
  stringify: props.getOptionLabel,
88
88
  });
89
89
  }
90
90
  function renderDefaultInput(params) {
91
- return react_1.jsx(core_1.TextField, __assign({}, params, { error: error || !!(errors === null || errors === void 0 ? void 0 : errors.length), label: label, variant: variant }));
91
+ return (0, react_1.jsx)(core_1.TextField, __assign({}, params, { error: error || !!(errors === null || errors === void 0 ? void 0 : errors.length), label: label, variant: variant }));
92
92
  }
93
93
  function renderDefaultTags(values, getTagProps) {
94
- return values.map(function (value, index) { return (react_1.jsx(core_1.Chip, __assign({ key: "chip-" + (typeof value === 'string'
94
+ return values.map(function (value, index) { return ((0, react_1.jsx)(core_1.Chip, __assign({ key: "chip-" + (typeof value === 'string'
95
95
  ? value
96
96
  : props.getOptionLabel !== undefined
97
97
  ? props.getOptionLabel(value)
98
- : JSON.stringify(value)), css: react_1.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-color: ", ";\n "], ["\n border-color: ", ";\n "])), errors && errors[index] ? 'red' : 'initial'), variant: "outlined", label: props.getOptionLabel ? props.getOptionLabel(value) : value, size: "small" }, getTagProps({ index: index })))); });
98
+ : JSON.stringify(value)), css: (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-color: ", ";\n "], ["\n border-color: ", ";\n "])), errors && errors[index] ? 'red' : 'initial'), variant: "outlined", label: props.getOptionLabel ? props.getOptionLabel(value) : value, size: "small" }, getTagProps({ index: index })))); });
99
99
  }
100
100
  function getCount() {
101
101
  var _a;
@@ -104,11 +104,11 @@ function InputSearchDropdown(props) {
104
104
  }
105
105
  return ((_a = value) === null || _a === void 0 ? void 0 : _a.length) || 0;
106
106
  }
107
- return (react_1.jsx("div", null,
108
- react_1.jsx(lab_1.Autocomplete, __assign({ 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 }, restOfProps, { value: getValue() })),
109
- react_1.jsx("div", null,
110
- helperText && (react_1.jsx(core_1.Typography, { css: react_1.css(templateObject_2 || (templateObject_2 = __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)),
111
- multiple && max && (react_1.jsx(core_1.Typography, { css: react_1.css(templateObject_3 || (templateObject_3 = __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" },
107
+ return ((0, react_1.jsx)("div", null,
108
+ (0, react_1.jsx)(lab_1.Autocomplete, __assign({ 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 }, restOfProps, { value: getValue() })),
109
+ (0, react_1.jsx)("div", null,
110
+ helperText && ((0, react_1.jsx)(core_1.Typography, { css: (0, react_1.css)(templateObject_2 || (templateObject_2 = __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)),
111
+ multiple && max && ((0, react_1.jsx)(core_1.Typography, { css: (0, react_1.css)(templateObject_3 || (templateObject_3 = __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" },
112
112
  getCount(),
113
113
  "/",
114
114
  max)))));
package/lib/components/material-ui/InputSearchDropdown/InputSearchDropdown.story.js CHANGED
@@ -39,12 +39,12 @@ var getOptionLabel = function (option) {
39
39
  };
40
40
  var errors = [true];
41
41
  var InputSearchDropdownSingle = function () {
42
- var _a = react_1.useState(null), value = _a[0], setValue = _a[1];
42
+ var _a = (0, react_1.useState)(null), value = _a[0], setValue = _a[1];
43
43
  return (react_1.default.createElement(InputSearchDropdown_1.default, { name: "footballPlayer", label: "Football Player", options: options, getOptionLabel: getOptionLabel, onChange: function (evt) { return setValue(evt.target.value || null); }, value: value }));
44
44
  };
45
45
  exports.InputSearchDropdownSingle = InputSearchDropdownSingle;
46
46
  var InputSearchDropdownMulti = function () {
47
- var _a = react_1.useState([]), value = _a[0], setValue = _a[1];
47
+ var _a = (0, react_1.useState)([]), value = _a[0], setValue = _a[1];
48
48
  return (react_1.default.createElement(InputSearchDropdown_1.default, { freeSolo: true, multiple: true, name: "footballPlayer", label: "Football Player", options: options, getOptionLabel: getOptionLabel, onChange: function (evt) { return setValue(evt.target.value); }, errors: errors, value: value, helperText: "hello", max: 10 }));
49
49
  };
50
50
  exports.InputSearchDropdownMulti = InputSearchDropdownMulti;
package/lib/components/material-ui/InputTime/InputTime.js CHANGED
@@ -46,16 +46,16 @@ var date_fns_1 = require("date-fns");
46
46
  var pickers_1 = require("@material-ui/pickers");
47
47
  function InputTime(props) {
48
48
  var _a = props.autoOk, autoOk = _a === void 0 ? true : _a, _b = props.clearable, clearable = _b === void 0 ? true : _b, _c = props.format, format = _c === void 0 ? 'HH:mm' : _c, _d = props.inputVariant, inputVariant = _d === void 0 ? 'outlined' : _d, label = props.label, name = props.name, onChange = props.onChange, _e = props.variant, variant = _e === void 0 ? 'inline' : _e, restOfProps = __rest(props, ["autoOk", "clearable", "format", "inputVariant", "label", "name", "onChange", "variant"]);
49
- var _f = react_1.useState(null), value = _f[0], setValue = _f[1];
50
- react_1.useEffect(function () {
49
+ var _f = (0, react_1.useState)(null), value = _f[0], setValue = _f[1];
50
+ (0, react_1.useEffect)(function () {
51
51
  if (props.value) {
52
52
  setValue(props.value);
53
53
  }
54
54
  }, []); // eslint-disable-line
55
55
  function handleOnChange(date) {
56
56
  setValue(date);
57
- if (date === null || date_fns_1.isValid(date)) {
58
- onChange({ target: { name: name, value: date ? date_fns_1.formatISO(date) : null } });
57
+ if (date === null || (0, date_fns_1.isValid)(date)) {
58
+ onChange({ target: { name: name, value: date ? (0, date_fns_1.formatISO)(date) : null } });
59
59
  }
60
60
  }
61
61
  return (react_1.default.createElement(pickers_1.KeyboardTimePicker, __assign({}, restOfProps, { autoOk: autoOk, clearable: clearable, format: format, inputVariant: inputVariant, label: label, name: name, onChange: handleOnChange, value: value, variant: variant })));
package/lib/components/material-ui/InputTime/InputTime.story.js CHANGED
@@ -28,7 +28,7 @@ var pickers_1 = require("@material-ui/pickers");
28
28
  var date_fns_1 = __importDefault(require("@date-io/date-fns"));
29
29
  var InputTime_1 = __importDefault(require("components/material-ui/InputTime"));
30
30
  var InputTime = function () {
31
- var _a = react_1.useState(null), value = _a[0], setValue = _a[1];
31
+ var _a = (0, react_1.useState)(null), value = _a[0], setValue = _a[1];
32
32
  return (react_1.default.createElement(pickers_1.MuiPickersUtilsProvider, { utils: date_fns_1.default },
33
33
  react_1.default.createElement(InputTime_1.default, { label: "Bedtime", value: value, onChange: function (_a) {
34
34
  var value = _a.target.value;
package/lib/components/material-ui/Modal/Modal.js CHANGED
@@ -28,7 +28,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
28
28
  var react_1 = __importDefault(require("react"));
29
29
  var core_1 = require("@material-ui/core");
30
30
  var Button_1 = __importDefault(require("../Button"));
31
- var useSubmitBtnStyles = core_1.makeStyles({
31
+ var useSubmitBtnStyles = (0, core_1.makeStyles)({
32
32
  root: {
33
33
  color: '#3f51b5',
34
34
  },
package/lib/components/material-ui/Modal/Modal.story.js CHANGED
@@ -27,7 +27,7 @@ var react_1 = __importStar(require("react"));
27
27
  var Button_1 = __importDefault(require("../Button"));
28
28
  var Modal_1 = __importDefault(require("./Modal"));
29
29
  var Modal = function () {
30
- var _a = react_1.useState(false), open = _a[0], setOpen = _a[1];
30
+ var _a = (0, react_1.useState)(false), open = _a[0], setOpen = _a[1];
31
31
  return (react_1.default.createElement(react_1.default.Fragment, null,
32
32
  react_1.default.createElement(Button_1.default, { color: "primary", onClick: function () { return setOpen(true); } }, "Open"),
33
33
  react_1.default.createElement(Modal_1.default, { open: open, submitting: true, title: "My Modal", onClose: function () { return setOpen(false); }, cancelButton: {
package/lib/types/Component.types.d.ts CHANGED
@@ -25,5 +25,5 @@ export interface DropdownEvent {
25
25
  }
26
26
  export declare type MenuItem = {
27
27
  content: ReactNode;
28
- onClick: Function;
28
+ onClick: () => void;
29
29
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vendorflow/components",
3
- "version": "1.1.20",
3
+ "version": "1.1.24",
4
4
  "description": "React components for vendorflow",
5
5
  "main": "lib/index.js",
6
6
  "types": "lib/index.d.ts",
@@ -64,7 +64,7 @@
64
64
  "@types/node": "^12.0.0",
65
65
  "@types/react": "^16.9.0",
66
66
  "@types/react-dom": "^16.9.0",
67
- "@typescript-eslint/eslint-plugin": "^2.10.0",
67
+ "@typescript-eslint/eslint-plugin": "^4.32.0",
68
68
  "@typescript-eslint/parser": "^2.10.0",
69
69
  "babel-eslint": "10.1.0",
70
70
  "babel-jest": "^24.9.0",