@vendorflow/components 1.1.25 → 1.1.29

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ButtonProps } from '@material-ui/core';
 declare type Props = ButtonProps & {
     loading?: boolean;

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

@@ -1,4 +1,8 @@
 "use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -21,21 +25,13 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
+/** @jsx jsx */
+var react_1 = require("@emotion/react");
 var core_1 = require("@material-ui/core");
-var styles_1 = require("@material-ui/core/styles");
-var useStyles = (0, styles_1.makeStyles)({
-    root: {
-        color: 'white',
-    },
-});
 function Button(props) {
-    var classes = useStyles();
-    var children = props.children, disabled = props.disabled, loading = props.loading, progressClasses = props.progressClasses, _a = props.variant, variant = _a === void 0 ? 'contained' : _a, restOfProps = __rest(props, ["children", "disabled", "loading", "progressClasses", "variant"]);
-    return (react_1.default.createElement(core_1.Button, __assign({ disabled: disabled || loading, variant: variant }, restOfProps), loading ? react_1.default.createElement(core_1.CircularProgress, { size: "1.6rem", classes: progressClasses || classes }) : children));
+    var children = props.children, disabled = props.disabled, loading = props.loading, _a = props.variant, variant = _a === void 0 ? 'contained' : _a, restOfProps = __rest(props, ["children", "disabled", "loading", "variant"]);
+    return ((0, react_1.jsx)(core_1.Button, __assign({ disabled: disabled || loading, variant: variant }, restOfProps), loading ? ((0, react_1.jsx)(core_1.CircularProgress, { css: (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n            && {\n              color: white;\n            }\n          "], ["\n            && {\n              color: white;\n            }\n          "]))), size: "1.6rem" })) : (children)));
 }
 exports.default = Button;
+var templateObject_1;

package/lib/components/material-ui/Button/Button.story.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const Button: () => JSX.Element;

package/lib/components/material-ui/ButtonMenu/ButtonMenu.story.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 export declare const ButtonMenuUsingDefault: () => JSX.Element;
 export declare const ButtonMenuUsingCustom: () => JSX.Element;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface Message {
     id: string;
     userId: string;

package/lib/components/material-ui/ChatInterface/ChatInterface.story.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare function ChatInterface(): JSX.Element;

package/lib/components/material-ui/ChatInterface/MessageItem.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Message } from './ChatInterface';
 interface Props {
     userId: string;

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

@@ -1,6 +1,7 @@
-/// <reference types="react" />
 import { BasicOption, Color, SimpleEventHandler } from 'types';
 interface Props {
+    className?: string;
+    style?: any;
     color?: Color;
     disabled?: boolean;
     error?: boolean;

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

@@ -27,7 +27,7 @@ var immer_1 = __importDefault(require("immer"));
 var lodash_1 = require("lodash");
 var core_1 = require("@material-ui/core");
 function InputCheckboxGroup(props) {
-    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;
+    var className = props.className, style = props.style, _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;
     var _c = (0, react_1.useState)({}), values = _c[0], setValues = _c[1];
     (0, react_1.useEffect)(function () {
         var newValues = {};
@@ -75,7 +75,7 @@ function InputCheckboxGroup(props) {
             return (react_1.default.createElement(core_1.FormControlLabel, { key: label, label: label, control: react_1.default.createElement(core_1.Checkbox, { color: color, disabled: disabled, onChange: handleOnChange, checked: values[value] || false, name: label }) }));
         });
     }
-    return (react_1.default.createElement(core_1.FormControl, { component: "fieldset", error: error },
+    return (react_1.default.createElement(core_1.FormControl, { className: className, style: style, component: "fieldset", error: error },
         react_1.default.createElement(core_1.FormLabel, { component: "legend" }, label),
         react_1.default.createElement(core_1.FormGroup, null, !(0, lodash_1.isEmpty)(options) ? renderOptions() : react_1.default.createElement("div", null)),
         react_1.default.createElement(core_1.FormHelperText, null, helperText)));

package/lib/components/material-ui/InputCheckboxGroup/InputCheckboxGroup.story.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const InputCheckboxGroup: () => JSX.Element;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { KeyboardDatePickerProps } from '@material-ui/pickers';
 import { SimpleEventHandler } from 'types';
 declare type Props<T> = Omit<KeyboardDatePickerProps, 'onChange'> & {

package/lib/components/material-ui/InputDate/InputDate.story.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const InputDate: () => JSX.Element;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { KeyboardDateTimePickerProps } from '@material-ui/pickers';
 import { SimpleEventHandler } from 'types';
 declare type Props<T> = Omit<KeyboardDateTimePickerProps, 'onChange'> & {

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

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const InputDateTime: () => JSX.Element;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TextFieldProps } from '@material-ui/core';
 declare type Props = TextFieldProps & {
     value: string | null;

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

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const InputGroup: () => JSX.Element;

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

@@ -1,6 +1,7 @@
-/// <reference types="react" />
 import { Color, BasicOption, SimpleEventHandler } from 'types/Component.types';
 interface Props {
+    className?: string;
+    style?: any;
     color?: Color;
     disabled?: boolean;
     error?: boolean;

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

@@ -1,4 +1,15 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -18,11 +29,22 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var core_1 = require("@material-ui/core");
 function InputRadioGroup(props) {
-    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;
+    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, restOfProps = __rest(props, ["color", "disabled", "error", "helperText", "label", "name", "onChange", "options", "row"]);
     var _c = (0, react_1.useState)(null), value = _c[0], setValue = _c[1];
     (0, react_1.useEffect)(function () {
         if (props.value !== value) {
@@ -36,7 +58,7 @@ function InputRadioGroup(props) {
     function renderOptions() {
         return options.map(function (option) { return (react_1.default.createElement(core_1.FormControlLabel, { key: option.label, value: option.value, label: option.label, control: react_1.default.createElement(core_1.Radio, { color: color, disabled: disabled }) })); });
     }
-    return (react_1.default.createElement(core_1.FormControl, { component: "fieldset", error: error },
+    return (react_1.default.createElement(core_1.FormControl, __assign({ component: "fieldset", error: error }, restOfProps),
         react_1.default.createElement(core_1.FormLabel, { component: "legend" }, label),
         react_1.default.createElement(core_1.RadioGroup, { name: name, value: value, onChange: handleOnChange, row: row }, renderOptions()),
         react_1.default.createElement(core_1.FormHelperText, null, helperText)));

package/lib/components/material-ui/InputRadioGroup/InputRadioGroup.story.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const InputRadioGroup: () => JSX.Element;

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

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 export declare const InputSearchDropdownSingle: () => JSX.Element;
 export declare const InputSearchDropdownMulti: () => JSX.Element;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { KeyboardTimePickerProps } from '@material-ui/pickers';
 import { SimpleEventHandler } from 'types';
 declare type Props<T> = Omit<KeyboardTimePickerProps, 'onChange'> & {

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

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const InputTime: () => JSX.Element;

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

@@ -1,4 +1,8 @@
 "use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -25,22 +29,21 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
+/** @jsx jsx */
+var react_1 = require("@emotion/react");
 var core_1 = require("@material-ui/core");
 var Button_1 = __importDefault(require("../Button"));
-var useSubmitBtnStyles = (0, core_1.makeStyles)({
-    root: {
-        color: '#3f51b5',
-    },
-});
 function Modal(props) {
     var children = props.children, classes = props.classes, cancelButton = props.cancelButton, okayButton = props.okayButton, onClose = props.onClose, submitting = props.submitting, open = props.open, title = props.title, restOfProps = __rest(props, ["children", "classes", "cancelButton", "okayButton", "onClose", "submitting", "open", "title"]);
-    var submitBtnStyles = useSubmitBtnStyles();
-    return (react_1.default.createElement(core_1.Dialog, __assign({}, restOfProps, { classes: classes, open: open, onClose: onClose }),
-        react_1.default.createElement(core_1.DialogTitle, null, title),
-        react_1.default.createElement(core_1.DialogContent, null, typeof children === 'string' ? react_1.default.createElement(core_1.DialogContentText, null, children) : children),
-        react_1.default.createElement(core_1.DialogActions, null,
-            cancelButton && (react_1.default.createElement(Button_1.default, { color: "default", variant: "text", disabled: cancelButton.disabled || submitting, onClick: cancelButton.onClick }, cancelButton.text)),
-            okayButton && (react_1.default.createElement(Button_1.default, { color: "primary", progressClasses: submitting ? submitBtnStyles : undefined, variant: "text", disabled: okayButton.disabled, onClick: okayButton.onClick, loading: submitting }, okayButton.text)))));
+    return ((0, react_1.jsx)(core_1.Dialog, __assign({}, restOfProps, { classes: classes, open: open, onClose: onClose }),
+        (0, react_1.jsx)(core_1.DialogTitle, null, title),
+        (0, react_1.jsx)(core_1.DialogContent, null, typeof children === 'string' ? (0, react_1.jsx)(core_1.DialogContentText, null, children) : children),
+        (0, react_1.jsx)(core_1.DialogActions, null,
+            cancelButton && ((0, react_1.jsx)(Button_1.default, { color: "default", variant: "text", disabled: cancelButton.disabled || submitting, onClick: cancelButton.onClick }, cancelButton.text)),
+            okayButton && ((0, react_1.jsx)(Button_1.default, { css: function (theme) {
+                    var _a, _b;
+                    return (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n              &&.MuiButton-root .MuiCircularProgress-root {\n                color: ", ";\n              }\n            "], ["\n              &&.MuiButton-root .MuiCircularProgress-root {\n                color: ", ";\n              }\n            "])), ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _a === void 0 ? void 0 : _a.primary) === null || _b === void 0 ? void 0 : _b.main) || 'hsl(321, 53%, 31%)');
+                }, color: "primary", variant: "text", disabled: okayButton.disabled, onClick: okayButton.onClick, loading: submitting }, okayButton.text)))));
 }
 exports.default = Modal;
+var templateObject_1;

package/lib/components/material-ui/Modal/Modal.story.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const Modal: () => JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vendorflow/components",
-  "version": "1.1.25",
+  "version": "1.1.29",
   "description": "React components for vendorflow",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -62,8 +62,8 @@
     "@testing-library/user-event": "^7.1.2",
     "@types/jest": "^24.0.0",
     "@types/node": "^12.0.0",
-    "@types/react": "^16.9.0",
-    "@types/react-dom": "^16.9.0",
+    "@types/react": "^17.0.27",
+    "@types/react-dom": "^17.0.9",
     "@typescript-eslint/eslint-plugin": "^4.32.0",
     "@typescript-eslint/parser": "^4.32.0",
     "babel-eslint": "10.1.0",
@@ -103,10 +103,10 @@
     "postcss-normalize": "8.0.1",
     "postcss-preset-env": "6.7.0",
     "postcss-safe-parser": "4.0.1",
-    "react": "^16.13.1",
+    "react": "^17.0.2",
     "react-app-polyfill": "^1.0.6",
     "react-dev-utils": "^10.2.1",
-    "react-dom": "^16.13.1",
+    "react-dom": "^17.0.2",
     "react-measure": "^2.5.2",
     "react-scripts": "^3.4.1",
     "react-text-mask": "^5.4.3",