@databiosphere/findable-ui 6.0.0 → 8.0.0

package/lib/components/Support/components/SupportRequest/components/Dialog/dialog.js

@@ -1,38 +1,9 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FormDialog = void 0;
-const CloseRounded_1 = __importDefault(require("@mui/icons-material/CloseRounded"));
-const react_1 = __importStar(require("react"));
-const feedbackIcon_1 = require("../../../../../common/CustomIcon/components/FeedbackIcon/feedbackIcon");
-const dialog_styles_1 = require("./dialog.styles");
-const FormDialog = ({ children, setFormSubmitted, }) => {
-    const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
+import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
+import React, { useState, } from "react";
+import { FeedbackIcon } from "../../../../../common/CustomIcon/components/FeedbackIcon/feedbackIcon";
+import { Fab, Popover } from "./dialog.styles";
+export const FormDialog = ({ children, setFormSubmitted, }) => {
+    const [anchorEl, setAnchorEl] = useState(null);
     const open = Boolean(anchorEl);
     const toggleOpen = (event) => {
         setAnchorEl((open) => (open ? null : event.currentTarget));
@@ -40,9 +11,9 @@ const FormDialog = ({ children, setFormSubmitted, }) => {
     const onClose = () => {
         setAnchorEl(null);
     };
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(dialog_styles_1.Fab, { color: "primary", onClick: toggleOpen, open: open, size: "medium" }, open ? react_1.default.createElement(CloseRounded_1.default, null) : react_1.default.createElement(feedbackIcon_1.FeedbackIcon, { fontSize: "medium" })),
-        react_1.default.createElement(dialog_styles_1.Popover, { anchorEl: anchorEl, anchorOrigin: {
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Fab, { color: "primary", onClick: toggleOpen, open: open, size: "medium" }, open ? React.createElement(CloseRoundedIcon, null) : React.createElement(FeedbackIcon, { fontSize: "medium" })),
+        React.createElement(Popover, { anchorEl: anchorEl, anchorOrigin: {
                 horizontal: "right",
                 vertical: -8,
             }, onClose: onClose, open: open, onTransitionExited: () => setFormSubmitted(false), slotProps: { paper: { elevation: 2 } }, transformOrigin: {
@@ -50,4 +21,3 @@ const FormDialog = ({ children, setFormSubmitted, }) => {
                 vertical: "bottom",
             } }, children)));
 };
-exports.FormDialog = FormDialog;

package/lib/components/Support/components/SupportRequest/components/Dialog/dialog.styles.js

@@ -1,32 +1,26 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Popover = exports.Fab = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-const material_1 = require("@mui/material");
-const colors_1 = require("../../../../../../styles/common/mixins/colors");
-const shadows_1 = require("../../../../../../styles/common/mixins/shadows");
-const breakpoints_1 = require("../../../../../../theme/common/breakpoints");
-const palette_1 = require("../../../../../../theme/common/palette");
-exports.Fab = (0, styled_1.default)(material_1.Fab) `
+import styled from "@emotion/styled";
+import { Fab as MFab, Popover as MPopover } from "@mui/material";
+import { smokeMain } from "../../../../../../styles/common/mixins/colors";
+import { shadows02 } from "../../../../../../styles/common/mixins/shadows";
+import { tabletUp } from "../../../../../../theme/common/breakpoints";
+import { alpha80, inkMain } from "../../../../../../theme/common/palette";
+export const Fab = styled(MFab) `
   bottom: 16px;
-  box-shadow: ${shadows_1.shadows02};
+  box-shadow: ${shadows02};
   position: fixed;
   right: 16px;
   z-index: ${({ open }) => (open ? 1350 : 1050)}; // Above backdrop component.
 `;
-exports.Popover = (0, styled_1.default)(material_1.Popover) `
+export const Popover = styled(MPopover) `
   &.MuiPopover-root {
-    background-color: ${palette_1.inkMain}${palette_1.alpha80};
+    background-color: ${inkMain}${alpha80};
 
     > .MuiPaper-root {
-      border: 1px solid ${colors_1.smokeMain};
+      border: 1px solid ${smokeMain};
       border-radius: 8px;
       width: 100%;
 
-      ${breakpoints_1.tabletUp} {
+      ${tabletUp} {
         max-width: 496px;
       }
     }

package/lib/components/Support/components/SupportRequest/components/Dropzone/dropzone.js

@@ -1,34 +1,18 @@
-"use strict";
-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;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Dropzone = void 0;
-const material_1 = require("@mui/material");
-const react_1 = __importDefault(require("react"));
-const react_dropzone_1 = require("react-dropzone");
-const Dropzone = (_a) => {
-    var { activeStyle = {}, children, disabled = false } = _a, props = __rest(_a, ["activeStyle", "children", "disabled"]);
-    const state = (0, react_dropzone_1.useDropzone)(Object.assign({ disabled, 
+import { Box } from "@mui/material";
+import React from "react";
+import { useDropzone, } from "react-dropzone";
+export const Dropzone = ({ activeStyle = {}, children, disabled = false, ...props }) => {
+    const state = useDropzone({
+        disabled,
         // Disable native files selection dialog - we'll handle this manually
-        noClick: true, 
+        noClick: true,
         // Disable space/enter to open native files selection dialog
-        noKeyboard: true }, props));
+        noKeyboard: true,
+        ...props,
+    });
     const { getInputProps, getRootProps } = state;
-    return (react_1.default.createElement(material_1.Box, Object.assign({ component: "div" }, getRootProps(), { sx: state.isDragActive ? activeStyle : {} }),
-        react_1.default.createElement("input", Object.assign({}, getInputProps())),
+    return (React.createElement(Box, { component: "div", ...getRootProps(), sx: state.isDragActive ? activeStyle : {} },
+        React.createElement("input", { ...getInputProps() }),
         children ? children(state) : null));
 };
-exports.Dropzone = Dropzone;
-exports.default = exports.Dropzone;
+export default Dropzone;

package/lib/components/Support/components/SupportRequest/components/SupportRequestForm/common/constants.js

@@ -1,41 +1,38 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.OPTIONS = exports.MAX_ATTACHMENT_SIZE = exports.DRAGGING_STYLE = exports.DEFAULT_FORM_STATE = exports.CONSTRAINTS = void 0;
-const entities_1 = require("./entities");
+import { FORM_CONTROL_NAME } from "./entities";
 // Validation constraints
-exports.CONSTRAINTS = {
-    [entities_1.FORM_CONTROL_NAME.ATTACHMENT_TOKEN]: { presence: { allowEmpty: true } },
-    [entities_1.FORM_CONTROL_NAME.DESCRIPTION]: { presence: { allowEmpty: false } },
-    [entities_1.FORM_CONTROL_NAME.EMAIL]: { email: true, presence: { allowEmpty: false } },
-    [entities_1.FORM_CONTROL_NAME.NAME]: { presence: { allowEmpty: false } },
-    [entities_1.FORM_CONTROL_NAME.SUBJECT]: { presence: { allowEmpty: false } },
-    [entities_1.FORM_CONTROL_NAME.TYPE]: { presence: { allowEmpty: false } },
+export const CONSTRAINTS = {
+    [FORM_CONTROL_NAME.ATTACHMENT_TOKEN]: { presence: { allowEmpty: true } },
+    [FORM_CONTROL_NAME.DESCRIPTION]: { presence: { allowEmpty: false } },
+    [FORM_CONTROL_NAME.EMAIL]: { email: true, presence: { allowEmpty: false } },
+    [FORM_CONTROL_NAME.NAME]: { presence: { allowEmpty: false } },
+    [FORM_CONTROL_NAME.SUBJECT]: { presence: { allowEmpty: false } },
+    [FORM_CONTROL_NAME.TYPE]: { presence: { allowEmpty: false } },
 };
 // Default form state.
-exports.DEFAULT_FORM_STATE = {
+export const DEFAULT_FORM_STATE = {
     attachmentName: "",
     attachmentRejected: false,
     attachmentRejections: [],
     attachmentToken: "",
     attachmentUploading: false,
-    [entities_1.FORM_CONTROL_NAME.DESCRIPTION]: "",
-    [entities_1.FORM_CONTROL_NAME.EMAIL]: "",
-    [entities_1.FORM_CONTROL_NAME.NAME]: "",
-    [entities_1.FORM_CONTROL_NAME.SUBJECT]: "",
-    [entities_1.FORM_CONTROL_NAME.TYPE]: "",
+    [FORM_CONTROL_NAME.DESCRIPTION]: "",
+    [FORM_CONTROL_NAME.EMAIL]: "",
+    [FORM_CONTROL_NAME.NAME]: "",
+    [FORM_CONTROL_NAME.SUBJECT]: "",
+    [FORM_CONTROL_NAME.TYPE]: "",
     submitError: false,
     submitted: false,
     submitting: false,
     touched: {},
 };
 // Active drag styles.
-exports.DRAGGING_STYLE = {
+export const DRAGGING_STYLE = {
     cursor: "copy",
 };
 // Max file attachment
-exports.MAX_ATTACHMENT_SIZE = 20 * 1024 * 1024;
+export const MAX_ATTACHMENT_SIZE = 20 * 1024 * 1024;
 // Set up "Message topic" select options, selected value and styles.
-exports.OPTIONS = [
+export const OPTIONS = [
     { label: "Question", value: "question" },
     { label: "Bug", value: "bug" },
     { label: "Feature Request", value: "feature_request" },

package/lib/components/Support/components/SupportRequest/components/SupportRequestForm/common/entities.js

@@ -1,15 +1,12 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FORM_CONTROL_NAME = exports.FORM_CONTROL_LABEL = exports.REQUEST_FIELD_ID = void 0;
-var REQUEST_FIELD_ID;
+export var REQUEST_FIELD_ID;
 (function (REQUEST_FIELD_ID) {
     REQUEST_FIELD_ID["DESCRIPTION"] = "DESCRIPTION";
     REQUEST_FIELD_ID["EMAIL"] = "EMAIL";
     REQUEST_FIELD_ID["SUBJECT"] = "SUBJECT";
     REQUEST_FIELD_ID["TICKET_FORM_ID"] = "TICKET_FORM_ID";
     REQUEST_FIELD_ID["TYPE"] = "TYPE";
-})(REQUEST_FIELD_ID = exports.REQUEST_FIELD_ID || (exports.REQUEST_FIELD_ID = {}));
-var FORM_CONTROL_LABEL;
+})(REQUEST_FIELD_ID || (REQUEST_FIELD_ID = {}));
+export var FORM_CONTROL_LABEL;
 (function (FORM_CONTROL_LABEL) {
     FORM_CONTROL_LABEL["ATTACHMENT_TOKEN"] = "Attachment (optional)";
     FORM_CONTROL_LABEL["DESCRIPTION"] = "How can we help you?";
@@ -17,8 +14,8 @@ var FORM_CONTROL_LABEL;
     FORM_CONTROL_LABEL["NAME"] = "Your Name";
     FORM_CONTROL_LABEL["SUBJECT"] = "Subject";
     FORM_CONTROL_LABEL["TYPE"] = "Message topic";
-})(FORM_CONTROL_LABEL = exports.FORM_CONTROL_LABEL || (exports.FORM_CONTROL_LABEL = {}));
-var FORM_CONTROL_NAME;
+})(FORM_CONTROL_LABEL || (FORM_CONTROL_LABEL = {}));
+export var FORM_CONTROL_NAME;
 (function (FORM_CONTROL_NAME) {
     FORM_CONTROL_NAME["ATTACHMENT_TOKEN"] = "attachmentToken";
     FORM_CONTROL_NAME["DESCRIPTION"] = "description";
@@ -26,4 +23,4 @@ var FORM_CONTROL_NAME;
     FORM_CONTROL_NAME["NAME"] = "name";
     FORM_CONTROL_NAME["SUBJECT"] = "subject";
     FORM_CONTROL_NAME["TYPE"] = "type";
-})(FORM_CONTROL_NAME = exports.FORM_CONTROL_NAME || (exports.FORM_CONTROL_NAME = {}));
+})(FORM_CONTROL_NAME || (FORM_CONTROL_NAME = {}));

package/lib/components/Support/components/SupportRequest/components/SupportRequestForm/common/utils.js

@@ -1,15 +1,3 @@
-"use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.uploadAttachment = exports.getSupportRequestOptions = exports.createSupportRequest = void 0;
 /**
  * Create support request.
  * @param url - Request URL.
@@ -17,19 +5,16 @@ exports.uploadAttachment = exports.getSupportRequestOptions = exports.createSupp
  * @param FIELD_ID - Request field IDs.
  * @returns support request response.
  */
-function createSupportRequest(url, requestValue, FIELD_ID) {
-    return __awaiter(this, void 0, void 0, function* () {
-        return yield fetchWithErrorRejection(url, getSupportRequestOptions(requestValue, FIELD_ID));
-    });
+export async function createSupportRequest(url, requestValue, FIELD_ID) {
+    return await fetchWithErrorRejection(url, getSupportRequestOptions(requestValue, FIELD_ID));
 }
-exports.createSupportRequest = createSupportRequest;
 /**
  * Returns support request options.
  * @param requestValue - Request values.
  * @param FIELD_ID - Request field IDs.
  * @returns request options.
  */
-function getSupportRequestOptions(requestValue, FIELD_ID) {
+export function getSupportRequestOptions(requestValue, FIELD_ID) {
     const { attachmentToken, description, email, name, subject, type } = requestValue;
     const requestedFromUrl = window.location.href;
     return {
@@ -57,39 +42,33 @@ function getSupportRequestOptions(requestValue, FIELD_ID) {
         method: "POST",
     };
 }
-exports.getSupportRequestOptions = getSupportRequestOptions;
 /**
  * Upload file to add as attachment to request.
  * @param url - Upload URL.
  * @param file - File.
  * @returns upload response.
  */
-function uploadAttachment(url, file) {
-    return __awaiter(this, void 0, void 0, function* () {
-        const res = yield fetchWithErrorRejection(`${url}?filename=${file.name}`, {
-            body: file,
-            headers: {
-                "Content-Type": "application/binary",
-            },
-            method: "POST",
-        });
-        const json = yield res.json();
-        return json.upload;
+export async function uploadAttachment(url, file) {
+    const res = await fetchWithErrorRejection(`${url}?filename=${file.name}`, {
+        body: file,
+        headers: {
+            "Content-Type": "application/binary",
+        },
+        method: "POST",
     });
+    const json = await res.json();
+    return json.upload;
 }
-exports.uploadAttachment = uploadAttachment;
 /**
  * Execute fetch, throwing error on non-200 response.
  * @param input - Request URL.
  * @param options - Request options.
  * @returns response.
  */
-function fetchWithErrorRejection(input, options) {
-    return __awaiter(this, void 0, void 0, function* () {
-        const res = yield fetch(input, options);
-        if (res.ok) {
-            return res;
-        }
-        throw res;
-    });
+async function fetchWithErrorRejection(input, options) {
+    const res = await fetch(input, options);
+    if (res.ok) {
+        return res;
+    }
+    throw res;
 }

package/lib/components/Support/components/SupportRequest/components/SupportRequestForm/supportRequestForm.js

@@ -1,131 +1,138 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SupportRequestForm = void 0;
-const material_1 = require("@mui/material");
-const react_1 = __importStar(require("react"));
-const validate_js_1 = __importDefault(require("validate.js"));
-const typography_1 = require("../../../../../../theme/common/typography");
-const buttonPrimary_1 = require("../../../../../common/Button/components/ButtonPrimary/buttonPrimary");
-const input_1 = require("../../../../../common/Form/components/Input/input");
-const select_1 = require("../../../../../common/Form/components/Select/select");
-const uploadFile_1 = require("../../../../../common/Form/components/UploadFile/uploadFile");
-const paper_styles_1 = require("../../../../../common/Paper/paper.styles");
-const section_styles_1 = require("../../../../../common/Section/section.styles");
-const dropzone_1 = __importDefault(require("../Dropzone/dropzone"));
-const constants_1 = require("./common/constants");
-const entities_1 = require("./common/entities");
-const utils_1 = require("./common/utils");
-const supportRequestForm_styles_1 = require("./supportRequestForm.styles");
-const SupportRequestForm = ({ setFormSubmitted, supportRequest, }) => {
-    const [formState, setFormState] = (0, react_1.useState)(constants_1.DEFAULT_FORM_STATE);
-    const errors = (0, validate_js_1.default)(buildSupportRequest(formState), constants_1.CONSTRAINTS); // Determine error state of form
+import { MenuItem, Typography } from "@mui/material";
+import React, { useState, } from "react";
+import validate from "validate.js";
+import { TEXT_BODY_400 } from "../../../../../../theme/common/typography";
+import { ButtonPrimary } from "../../../../../common/Button/components/ButtonPrimary/buttonPrimary";
+import { Input } from "../../../../../common/Form/components/Input/input";
+import { Select } from "../../../../../common/Form/components/Select/select";
+import { UploadFile } from "../../../../../common/Form/components/UploadFile/uploadFile";
+import { GridPaper } from "../../../../../common/Paper/paper.styles";
+import { SectionActions, SectionContent, } from "../../../../../common/Section/section.styles";
+import Dropzone from "../Dropzone/dropzone";
+import { CONSTRAINTS, DEFAULT_FORM_STATE, DRAGGING_STYLE, MAX_ATTACHMENT_SIZE, OPTIONS, } from "./common/constants";
+import { FORM_CONTROL_LABEL, FORM_CONTROL_NAME, } from "./common/entities";
+import { createSupportRequest, uploadAttachment } from "./common/utils";
+import { Section, Title } from "./supportRequestForm.styles";
+export const SupportRequestForm = ({ setFormSubmitted, supportRequest, }) => {
+    const [formState, setFormState] = useState(DEFAULT_FORM_STATE);
+    const errors = validate(buildSupportRequest(formState), CONSTRAINTS); // Determine error state of form
     const { FIELD_ID, requestURL, uploadURL } = supportRequest;
     // Delete attachment.
     const onAttachmentDeleted = () => {
-        setFormState((formState) => (Object.assign(Object.assign({}, formState), { attachmentToken: "" })));
+        setFormState((formState) => ({
+            ...formState,
+            attachmentToken: "",
+        }));
     };
     // Upload file to add as attachment to request.
-    const onAttachmentDropped = (files) => __awaiter(void 0, void 0, void 0, function* () {
+    const onAttachmentDropped = async (files) => {
         try {
-            setFormState((formState) => (Object.assign(Object.assign({}, formState), { attachmentRejected: false, attachmentRejections: [], attachmentUploading: true })));
-            const response = yield (0, utils_1.uploadAttachment)(uploadURL, files[0]);
-            setFormState((formState) => (Object.assign(Object.assign({}, formState), { attachmentName: response.attachment.file_name, attachmentToken: response.token, attachmentUploading: false })));
+            setFormState((formState) => ({
+                ...formState,
+                attachmentRejected: false,
+                attachmentRejections: [],
+                attachmentUploading: true,
+            }));
+            const response = await uploadAttachment(uploadURL, files[0]);
+            setFormState((formState) => ({
+                ...formState,
+                attachmentName: response.attachment.file_name,
+                attachmentToken: response.token,
+                attachmentUploading: false,
+            }));
         }
         catch (error) {
-            setFormState((formState) => (Object.assign(Object.assign({}, formState), { attachmentRejected: true, attachmentRejections: [], attachmentUploading: false })));
+            setFormState((formState) => ({
+                ...formState,
+                attachmentRejected: true,
+                attachmentRejections: [],
+                attachmentUploading: false,
+            }));
             console.log(error);
         }
-    });
+    };
     // Attachment has been rejected (on drop of file).
     const onAttachmentRejected = (fileRejections) => {
         // We can assume there is a single error as we are not doing multiple uploads.
         const rejection = fileRejections[0] || {};
-        setFormState((formState) => (Object.assign(Object.assign({}, formState), { attachmentRejected: true, attachmentRejections: rejection.errors })));
+        setFormState((formState) => ({
+            ...formState,
+            attachmentRejected: true,
+            attachmentRejections: rejection.errors,
+        }));
     };
     // Indicate input/select field has been touched.
     const onBlur = (event) => {
         const target = event.target;
-        setFormState((formState) => (Object.assign(Object.assign({}, formState), { touched: Object.assign(Object.assign({}, formState.touched), { [target.name]: true }) })));
+        setFormState((formState) => ({
+            ...formState,
+            touched: {
+                ...formState.touched,
+                [target.name]: true,
+            },
+        }));
     };
     // Bind input value to state.
     const onInputChange = (event) => {
         const target = event.target;
         const value = target.value;
         const name = target.name;
-        setFormState((formState) => (Object.assign(Object.assign({}, formState), { [name]: value })));
+        setFormState((formState) => ({
+            ...formState,
+            [name]: value,
+        }));
     };
     // Updates form state with the selected question type.
     const onSelectChange = (event) => {
-        setFormState((formState) => (Object.assign(Object.assign({}, formState), { type: event.target.value })));
+        setFormState((formState) => ({
+            ...formState,
+            type: event.target.value,
+        }));
     };
     // Handle submit of support request form.
-    const onSupportRequestSubmitted = () => __awaiter(void 0, void 0, void 0, function* () {
+    const onSupportRequestSubmitted = async () => {
         const request = buildSupportRequest(formState);
         try {
-            setFormState((formState) => (Object.assign(Object.assign({}, formState), { submitError: false, submitting: true })));
-            yield (0, utils_1.createSupportRequest)(requestURL, request, FIELD_ID);
-            setFormState((formState) => (Object.assign(Object.assign({}, formState), { submitted: true, submitting: false })));
+            setFormState((formState) => ({
+                ...formState,
+                submitError: false,
+                submitting: true,
+            }));
+            await createSupportRequest(requestURL, request, FIELD_ID);
+            setFormState((formState) => ({
+                ...formState,
+                submitted: true,
+                submitting: false,
+            }));
             setFormSubmitted(true); // Shows form submitted message.
             // Execute GTM tracking.
             // TODO(cc) add GTM tracking.
         }
         catch (error) {
-            setFormState((formState) => (Object.assign(Object.assign({}, formState), { submitError: true, submitting: false })));
+            setFormState((formState) => ({
+                ...formState,
+                submitError: true,
+                submitting: false,
+            }));
             console.log(error);
         }
-    });
-    return (react_1.default.createElement(dropzone_1.default, { activeStyle: constants_1.DRAGGING_STYLE, disabled: Boolean(formState[entities_1.FORM_CONTROL_NAME.ATTACHMENT_TOKEN]), maxSize: constants_1.MAX_ATTACHMENT_SIZE, multiple: false, onDropAccepted: onAttachmentDropped, onDropRejected: onAttachmentRejected }, ({ isDragActive, open }) => (react_1.default.createElement(paper_styles_1.GridPaper, null,
-        react_1.default.createElement(supportRequestForm_styles_1.Section, null,
-            react_1.default.createElement(section_styles_1.SectionContent, null,
-                react_1.default.createElement(supportRequestForm_styles_1.Title, null, "Contact Us"),
-                react_1.default.createElement(material_1.Typography, { color: "ink.light", variant: typography_1.TEXT_BODY_400 }, "We\u2019re here to help and answer any questions you might have. We look forward to hearing from you!"))),
-        react_1.default.createElement(supportRequestForm_styles_1.Section, null,
-            react_1.default.createElement(input_1.Input, { error: isFieldError(formState, errors, entities_1.FORM_CONTROL_NAME.NAME), isFilled: Boolean(formState[entities_1.FORM_CONTROL_NAME.NAME]), label: entities_1.FORM_CONTROL_LABEL.NAME, name: entities_1.FORM_CONTROL_NAME.NAME, onBlur: onBlur, onChange: onInputChange }),
-            react_1.default.createElement(input_1.Input, { error: isFieldError(formState, errors, entities_1.FORM_CONTROL_NAME.EMAIL), isFilled: Boolean(formState[entities_1.FORM_CONTROL_NAME.EMAIL]), label: entities_1.FORM_CONTROL_LABEL.EMAIL, name: entities_1.FORM_CONTROL_NAME.EMAIL, onBlur: onBlur, onChange: onInputChange }),
-            react_1.default.createElement(select_1.Select, { displayEmpty: true, error: isFieldError(formState, errors, entities_1.FORM_CONTROL_NAME.TYPE), isFilled: Boolean(formState[entities_1.FORM_CONTROL_NAME.TYPE]), label: entities_1.FORM_CONTROL_LABEL.TYPE, name: entities_1.FORM_CONTROL_NAME.TYPE, onBlur: onBlur, onChange: onSelectChange, renderValue: renderSelectValue, value: formState[entities_1.FORM_CONTROL_NAME.TYPE], variant: "outlined" }, constants_1.OPTIONS.map(({ label, value }) => (react_1.default.createElement(material_1.MenuItem, { key: value, value: value }, label)))),
-            react_1.default.createElement(input_1.Input, { error: isFieldError(formState, errors, entities_1.FORM_CONTROL_NAME.SUBJECT), isFilled: Boolean(formState[entities_1.FORM_CONTROL_NAME.SUBJECT]), label: entities_1.FORM_CONTROL_LABEL.SUBJECT, name: entities_1.FORM_CONTROL_NAME.SUBJECT, onBlur: onBlur, onChange: onInputChange }),
-            react_1.default.createElement(input_1.Input, { error: isFieldError(formState, errors, entities_1.FORM_CONTROL_NAME.DESCRIPTION), isFilled: Boolean(formState[entities_1.FORM_CONTROL_NAME.DESCRIPTION]), label: entities_1.FORM_CONTROL_LABEL.DESCRIPTION, multiline: true, name: entities_1.FORM_CONTROL_NAME.DESCRIPTION, onBlur: onBlur, onChange: onInputChange, placeholder: "Enter a decription", rows: 2 }),
-            react_1.default.createElement(uploadFile_1.UploadFile, Object.assign({ isDragActive: isDragActive, label: entities_1.FORM_CONTROL_LABEL.ATTACHMENT_TOKEN, onAttachmentDeleted: onAttachmentDeleted, open: open }, formState))),
-        react_1.default.createElement(supportRequestForm_styles_1.Section, null,
-            react_1.default.createElement(section_styles_1.SectionActions, null,
-                react_1.default.createElement(buttonPrimary_1.ButtonPrimary, { disabled: Boolean(errors) || formState.submitting, fullWidth: true, onClick: onSupportRequestSubmitted }, "Send")))))));
+    };
+    return (React.createElement(Dropzone, { activeStyle: DRAGGING_STYLE, disabled: Boolean(formState[FORM_CONTROL_NAME.ATTACHMENT_TOKEN]), maxSize: MAX_ATTACHMENT_SIZE, multiple: false, onDropAccepted: onAttachmentDropped, onDropRejected: onAttachmentRejected }, ({ isDragActive, open }) => (React.createElement(GridPaper, null,
+        React.createElement(Section, null,
+            React.createElement(SectionContent, null,
+                React.createElement(Title, null, "Contact Us"),
+                React.createElement(Typography, { color: "ink.light", variant: TEXT_BODY_400 }, "We\u2019re here to help and answer any questions you might have. We look forward to hearing from you!"))),
+        React.createElement(Section, null,
+            React.createElement(Input, { error: isFieldError(formState, errors, FORM_CONTROL_NAME.NAME), isFilled: Boolean(formState[FORM_CONTROL_NAME.NAME]), label: FORM_CONTROL_LABEL.NAME, name: FORM_CONTROL_NAME.NAME, onBlur: onBlur, onChange: onInputChange }),
+            React.createElement(Input, { error: isFieldError(formState, errors, FORM_CONTROL_NAME.EMAIL), isFilled: Boolean(formState[FORM_CONTROL_NAME.EMAIL]), label: FORM_CONTROL_LABEL.EMAIL, name: FORM_CONTROL_NAME.EMAIL, onBlur: onBlur, onChange: onInputChange }),
+            React.createElement(Select, { displayEmpty: true, error: isFieldError(formState, errors, FORM_CONTROL_NAME.TYPE), isFilled: Boolean(formState[FORM_CONTROL_NAME.TYPE]), label: FORM_CONTROL_LABEL.TYPE, name: FORM_CONTROL_NAME.TYPE, onBlur: onBlur, onChange: onSelectChange, renderValue: renderSelectValue, value: formState[FORM_CONTROL_NAME.TYPE], variant: "outlined" }, OPTIONS.map(({ label, value }) => (React.createElement(MenuItem, { key: value, value: value }, label)))),
+            React.createElement(Input, { error: isFieldError(formState, errors, FORM_CONTROL_NAME.SUBJECT), isFilled: Boolean(formState[FORM_CONTROL_NAME.SUBJECT]), label: FORM_CONTROL_LABEL.SUBJECT, name: FORM_CONTROL_NAME.SUBJECT, onBlur: onBlur, onChange: onInputChange }),
+            React.createElement(Input, { error: isFieldError(formState, errors, FORM_CONTROL_NAME.DESCRIPTION), isFilled: Boolean(formState[FORM_CONTROL_NAME.DESCRIPTION]), label: FORM_CONTROL_LABEL.DESCRIPTION, multiline: true, name: FORM_CONTROL_NAME.DESCRIPTION, onBlur: onBlur, onChange: onInputChange, placeholder: "Enter a decription", rows: 2 }),
+            React.createElement(UploadFile, { isDragActive: isDragActive, label: FORM_CONTROL_LABEL.ATTACHMENT_TOKEN, onAttachmentDeleted: onAttachmentDeleted, open: open, ...formState })),
+        React.createElement(Section, null,
+            React.createElement(SectionActions, null,
+                React.createElement(ButtonPrimary, { disabled: Boolean(errors) || formState.submitting, fullWidth: true, onClick: onSupportRequestSubmitted }, "Send")))))));
 };
-exports.SupportRequestForm = SupportRequestForm;
 /**
  * Build support request model from form values.
  * @param formState - Form State.
@@ -150,7 +157,7 @@ function buildSupportRequest(formState) {
  * @returns true if the given field has an error.
  */
 function isFieldError(formState, error, fieldName) {
-    const hasError = Boolean(error === null || error === void 0 ? void 0 : error[fieldName]);
+    const hasError = Boolean(error?.[fieldName]);
     const isTouched = Boolean(formState.touched[fieldName]);
     return isTouched && hasError;
 }
@@ -160,7 +167,6 @@ function isFieldError(formState, error, fieldName) {
  * @returns select value.
  */
 function renderSelectValue(value) {
-    var _a;
-    const label = (_a = constants_1.OPTIONS.find((option) => option.value === value)) === null || _a === void 0 ? void 0 : _a.label;
+    const label = OPTIONS.find((option) => option.value === value)?.label;
     return label || "Choose subject";
 }

package/lib/components/Support/components/SupportRequest/components/SupportRequestForm/supportRequestForm.styles.js

@@ -1,16 +1,10 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Section = exports.Title = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-const fonts_1 = require("../../../../../../styles/common/mixins/fonts");
-const section_styles_1 = require("../../../../../common/Section/section.styles");
-exports.Title = styled_1.default.h3 `
-  ${fonts_1.textHeadingSmall};
+import styled from "@emotion/styled";
+import { textHeadingSmall } from "../../../../../../styles/common/mixins/fonts";
+import { GridPaperSection } from "../../../../../common/Section/section.styles";
+export const Title = styled.h3 `
+  ${textHeadingSmall};
   margin: 0;
 `;
-exports.Section = (0, styled_1.default)(section_styles_1.GridPaperSection) `
+export const Section = styled(GridPaperSection) `
   min-width: 0;
 `;