@databiosphere/findable-ui 5.0.0 → 7.0.0

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;
 `;

package/lib/components/Support/components/SupportRequest/components/SupportRequestSubmitted/supportRequestSubmitted.js

@@ -1,20 +1,13 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+import { Typography } from "@mui/material";
+import React from "react";
+import { TEXT_BODY_400, TEXT_HEADING_SMALL, } from "../../../../../../theme/common/typography";
+import { EmailReadIcon } from "../../../../../common/CustomIcon/components/EmailReadIcon/emailReadIcon";
+import { IconBadge, ICON_BADGE_COLOR, } from "../../../../../common/IconBadge/iconBadge";
+import { Section, SectionContent, } from "../../../../../common/Section/section.styles";
+export const SupportRequestSubmitted = ({ description = "Your request has been submitted.", title = "Thank You!", }) => {
+    return (React.createElement(Section, null,
+        React.createElement(SectionContent, null,
+            React.createElement(IconBadge, { color: ICON_BADGE_COLOR.SUCCESS, Icon: EmailReadIcon }),
+            React.createElement(Typography, { variant: TEXT_HEADING_SMALL }, title),
+            React.createElement(Typography, { color: "ink.light", variant: TEXT_BODY_400 }, description))));
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SupportRequestSubmitted = void 0;
-const material_1 = require("@mui/material");
-const react_1 = __importDefault(require("react"));
-const typography_1 = require("../../../../../../theme/common/typography");
-const emailReadIcon_1 = require("../../../../../common/CustomIcon/components/EmailReadIcon/emailReadIcon");
-const iconBadge_1 = require("../../../../../common/IconBadge/iconBadge");
-const section_styles_1 = require("../../../../../common/Section/section.styles");
-const SupportRequestSubmitted = ({ description = "Your request has been submitted.", title = "Thank You!", }) => {
-    return (react_1.default.createElement(section_styles_1.Section, null,
-        react_1.default.createElement(section_styles_1.SectionContent, null,
-            react_1.default.createElement(iconBadge_1.IconBadge, { color: iconBadge_1.ICON_BADGE_COLOR.SUCCESS, Icon: emailReadIcon_1.EmailReadIcon }),
-            react_1.default.createElement(material_1.Typography, { variant: typography_1.TEXT_HEADING_SMALL }, title),
-            react_1.default.createElement(material_1.Typography, { color: "ink.light", variant: typography_1.TEXT_BODY_400 }, description))));
-};
-exports.SupportRequestSubmitted = SupportRequestSubmitted;

package/lib/components/Support/components/SupportRequest/supportRequest.js

@@ -1,35 +1,8 @@
-"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;
+import React, { useState } from "react";
+import { FormDialog } from "./components/Dialog/dialog";
+import { SupportRequestForm } from "./components/SupportRequestForm/supportRequestForm";
+import { SupportRequestSubmitted } from "./components/SupportRequestSubmitted/supportRequestSubmitted";
+export const SupportRequest = ({ supportRequest, }) => {
+    const [formSubmitted, setFormSubmitted] = useState(false);
+    return (React.createElement(FormDialog, { setFormSubmitted: setFormSubmitted }, formSubmitted ? (React.createElement(SupportRequestSubmitted, null)) : (React.createElement(SupportRequestForm, { setFormSubmitted: setFormSubmitted, supportRequest: supportRequest }))));
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SupportRequest = void 0;
-const react_1 = __importStar(require("react"));
-const dialog_1 = require("./components/Dialog/dialog");
-const supportRequestForm_1 = require("./components/SupportRequestForm/supportRequestForm");
-const supportRequestSubmitted_1 = require("./components/SupportRequestSubmitted/supportRequestSubmitted");
-const SupportRequest = ({ supportRequest, }) => {
-    const [formSubmitted, setFormSubmitted] = (0, react_1.useState)(false);
-    return (react_1.default.createElement(dialog_1.FormDialog, { setFormSubmitted: setFormSubmitted }, formSubmitted ? (react_1.default.createElement(supportRequestSubmitted_1.SupportRequestSubmitted, null)) : (react_1.default.createElement(supportRequestForm_1.SupportRequestForm, { setFormSubmitted: setFormSubmitted, supportRequest: supportRequest }))));
-};
-exports.SupportRequest = SupportRequest;

package/lib/components/Support/components/ViewSupport/viewSupport.js

@@ -1,15 +1,8 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+import React from "react";
+import { ContactSupportIcon } from "../../../common/CustomIcon/components/ContactSupportIcon/contactSupportIcon";
+import { ANCHOR_TARGET } from "../../../Links/common/entities";
+import { Fab } from "./viewSupport.styles";
+export const ViewSupport = ({ className, Icon = ContactSupportIcon, target = ANCHOR_TARGET.BLANK, url, }) => {
+    return (React.createElement(Fab, { className: className, href: url, target: target },
+        React.createElement(Icon, { fontSize: "inherit" })));
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ViewSupport = void 0;
-const react_1 = __importDefault(require("react"));
-const contactSupportIcon_1 = require("../../../common/CustomIcon/components/ContactSupportIcon/contactSupportIcon");
-const entities_1 = require("../../../Links/common/entities");
-const viewSupport_styles_1 = require("./viewSupport.styles");
-const ViewSupport = ({ className, Icon = contactSupportIcon_1.ContactSupportIcon, target = entities_1.ANCHOR_TARGET.BLANK, url, }) => {
-    return (react_1.default.createElement(viewSupport_styles_1.Fab, { className: className, href: url, target: target },
-        react_1.default.createElement(Icon, { fontSize: "inherit" })));
-};
-exports.ViewSupport = ViewSupport;

package/lib/components/Support/components/ViewSupport/viewSupport.styles.js

@@ -1,20 +1,14 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Fab = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-const colors_1 = require("../../../../styles/common/mixins/colors");
-const shadows_1 = require("../../../../styles/common/mixins/shadows");
-exports.Fab = (0, styled_1.default)("a") `
+import styled from "@emotion/styled";
+import { primaryDark, primaryMain, white, } from "../../../../styles/common/mixins/colors";
+import { shadows02 } from "../../../../styles/common/mixins/shadows";
+export const Fab = styled("a") `
   align-items: center;
-  background-color: ${colors_1.primaryMain};
+  background-color: ${primaryMain};
   border: none;
   border-radius: 50%;
   bottom: 16px;
-  box-shadow: ${shadows_1.shadows02};
-  color: ${colors_1.white};
+  box-shadow: ${shadows02};
+  color: ${white};
   cursor: pointer;
   display: flex;
   font-size: 28px; // Determines the size of the support icon.
@@ -26,6 +20,6 @@ exports.Fab = (0, styled_1.default)("a") `
   z-index: 100; // Above loading component.
 
   &:hover {
-    background-color: ${colors_1.primaryDark};
+    background-color: ${primaryDark};
   }
 `;

package/lib/components/Table/common/entities.js

@@ -1,8 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ROW_DIRECTION = void 0;
-var ROW_DIRECTION;
+export var ROW_DIRECTION;
 (function (ROW_DIRECTION) {
     ROW_DIRECTION["DEFAULT"] = "DEFAULT";
     ROW_DIRECTION["VERTICAL"] = "VERTICAL";
-})(ROW_DIRECTION = exports.ROW_DIRECTION || (exports.ROW_DIRECTION = {}));
+})(ROW_DIRECTION || (ROW_DIRECTION = {}));

package/lib/components/Table/common/gridTable.styles.js

@@ -1,13 +1,7 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.GridTable = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-const material_1 = require("@mui/material");
-const colors_1 = require("../../../styles/common/mixins/colors");
-exports.GridTable = (0, styled_1.default)(material_1.Table, {
+import styled from "@emotion/styled";
+import { Table as MTable } from "@mui/material";
+import { smokeLightest, white } from "../../../styles/common/mixins/colors";
+export const GridTable = styled(MTable, {
     shouldForwardProp: (prop) => prop !== "gridTemplateColumns",
 }) `
   align-items: stretch;
@@ -21,9 +15,13 @@ exports.GridTable = (0, styled_1.default)(material_1.Table, {
     display: contents; /* required; allows grandchildren of grid template to appear as though direct child */
   }
 
+  tr {
+    background-color: ${white};
+  }
+
   td,
   th {
-    background-color: ${colors_1.white};
+    background-color: inherit;
   }
 
   td,
@@ -39,8 +37,10 @@ exports.GridTable = (0, styled_1.default)(material_1.Table, {
   }
 
   [id^="grouped-row"] {
+    background-color: ${smokeLightest};
+
     td {
-      background-color: ${colors_1.smokeLightest};
+      background-color: inherit;
       grid-column: 1 / -1;
     }
   }

package/lib/components/Table/common/utils.d.ts

@@ -1,7 +1,5 @@
-import { TableSortLabelProps } from "@mui/material/TableSortLabel/TableSortLabel";
-import { Cell, ColumnFiltersState, ColumnSort, InitialTableState, Row, RowData, SortDirection, Table } from "@tanstack/react-table";
-import { Column } from "@tanstack/table-core";
-import { VisibilityState } from "@tanstack/table-core/src/features/Visibility";
+import { TableSortLabelProps } from "@mui/material";
+import { Cell, Column, ColumnFiltersState, ColumnSort, InitialTableState, PaginationState, Row, RowData, SortDirection, Table, VisibilityState } from "@tanstack/react-table";
 import { SelectCategory } from "../../../common/entities";
 import { ColumnConfig } from "../../../config/entities";
 import { ExploreMode } from "../../../hooks/useExploreMode";
@@ -13,7 +11,7 @@ declare type CountByTerms = Map<any, number>;
 /**
  * Pinned cell and pinned cell index tuple.
  */
-declare type PinnedCell<T> = [Cell<T, unknown>, number];
+declare type PinnedCell<T extends RowData> = [Cell<T, unknown>, number];
 /**
  * Returns true if the row should be included in the filtered rows.
  * The row will be included if:
@@ -25,14 +23,14 @@ declare type PinnedCell<T> = [Cell<T, unknown>, number];
  * @param filterValue - Filter value or values.
  * @returns True if the row should be included in the filtered rows.
  */
-export declare function arrIncludesSome<T>(row: Row<T>, columnId: string, filterValue: unknown[]): boolean;
+export declare function arrIncludesSome<T extends RowData>(row: Row<T>, columnId: string, filterValue: unknown[]): boolean;
 /**
  * Build view-specific models from react table faceted values function.
  * @param columns - Table columns.
  * @param columnFilters - Column filters state.
  * @returns Array of category views objects.
  */
-export declare function buildCategoryViews<T>(columns: Column<T>[], columnFilters: ColumnFiltersState): SelectCategory[];
+export declare function buildCategoryViews<T extends RowData>(columns: Column<T>[], columnFilters: ColumnFiltersState): SelectCategory[];
 /**
  * Returns the column sort direction.
  * @param sortDirection - Column sort direction.
@@ -44,13 +42,13 @@ export declare function getColumnSortDirection(sortDirection: false | SortDirect
  * @param rows - Table rows.
  * @returns filtered entity results as a blob.
  */
-export declare function generateDownloadBlob<T>(rows: Row<T>[]): Blob | undefined;
+export declare function generateDownloadBlob<T extends RowData>(rows: Row<T>[]): Blob | undefined;
 /**
  * Returns edit column checkbox menu options.
  * @param table - Table.
  * @returns a list of edit column options.
  */
-export declare function getEditColumnOptions<T>(table: Table<T>): CheckboxMenuListItem[];
+export declare function getEditColumnOptions<T extends RowData>(table: Table<T>): CheckboxMenuListItem[];
 /**
  * Returns unique category term counts keyed by category terms.
  * Custom function based off react table function getFacetedUniqueValues, see
@@ -65,7 +63,7 @@ export declare function getFacetedUniqueValuesWithArrayValues<T extends RowData>
  * @param columns - Table columns.
  * @returns string value for the css property grid-template-columns.
  */
-export declare function getGridTemplateColumns<T>(columns: Column<T>[]): string;
+export declare function getGridTemplateColumns<T extends RowData>(columns: Column<T>[]): string;
 /**
  * Returns initial table state.
  * @param columns - Column configuration.
@@ -84,19 +82,26 @@ export declare function getInitialTableStateSorting(defaultSort: ColumnSort | un
  * @param row - Row.
  * @returns pinned cell and index tuple.
  */
-export declare function getPinnedCellIndex<T>(row: Row<T>): PinnedCell<T>;
+export declare function getPinnedCellIndex<T extends RowData>(row: Row<T>): PinnedCell<T>;
 /**
  * Returns table sort label props.
  * @param column - Table column.
  * @returns table sort label props.
  */
-export declare function getTableSortLabelProps<T>(column: Column<T>): TableSortLabelProps;
+export declare function getTableSortLabelProps<T extends RowData>(column: Column<T>): TableSortLabelProps;
+/**
+ * Returns table state pagination.
+ * @param pageIndex - Explore state page index.
+ * @param pageSize - Explore state page size.
+ * @returns table state pagination.
+ */
+export declare function getTableStatePagination(pageIndex: number | undefined, pageSize: number): PaginationState;
 /**
  * Returns true if any or all table rows are selected.
  * @param table - Table.
  * @returns true if a row is selected.
  */
-export declare function isAnyRowSelected<T>(table: Table<T>): boolean;
+export declare function isAnyRowSelected<T extends RowData>(table: Table<T>): boolean;
 /**
  * Returns true if client-side filtering is enabled.
  * @param exploreMode - Explore mode.
@@ -108,7 +113,7 @@ export declare function isClientFilteringEnabled(exploreMode: ExploreMode): bool
  * @param tableInstance - Table instance.
  * @returns true if the collapsable row is disabled.
  */
-export declare function isCollapsableRowDisabled<T>(tableInstance: Table<T>): boolean;
+export declare function isCollapsableRowDisabled<T extends RowData>(tableInstance: Table<T>): boolean;
 /**
  * Returns true if column has a sort direction.
  * @param sortDirection - Column sort direction.