@availity/mui-feedback 0.4.1 → 1.0.0-alpha.0

package/CHANGELOG.md

@@ -2,6 +2,25 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [1.0.0-alpha.0](https://github.com/Availity/element/compare/@availity/mui-feedback@0.4.1...@availity/mui-feedback@1.0.0-alpha.0) (2025-02-24)
+
+
+### ⚠ BREAKING CHANGES
+
+* upgraded to @mui/material v6
+* **element:** upgraded to @mui/material v6
+
+### Features
+
+* **element:** upgrade to @mui/material v6 ([cb958bb](https://github.com/Availity/element/commit/cb958bba99a4f1ee6dab323f0ff54b69e6fd3493))
+* upgrade @mui/material ([571453a](https://github.com/Availity/element/commit/571453a34b21c344594ab4c03bc497d19aba942b))
+* upgrade to MUI v6 ([7febd6f](https://github.com/Availity/element/commit/7febd6fd4fd58e87e1c97a832cea3b4595a35d58))
+
+
+### Bug Fixes
+
+* **mui-feedback:** cleanup FormButton styling ([2245012](https://github.com/Availity/element/commit/224501284abf5d5120ce14a34bd11e608af5ad62))
+
 ## [0.4.1](https://github.com/Availity/element/compare/@availity/mui-feedback@0.4.0...@availity/mui-feedback@0.4.1) (2025-02-18)
 
 ### Dependency Updates

package/dist/index.js

@@ -77,11 +77,11 @@ var __async = (__this, __arguments, generator) => {
 };
 
 // src/index.ts
-var src_exports = {};
-__export(src_exports, {
+var index_exports = {};
+__export(index_exports, {
   Feedback: () => Feedback
 });
-module.exports = __toCommonJS(src_exports);
+module.exports = __toCommonJS(index_exports);
 
 // src/lib/Feedback.tsx
 var import_react2 = require("react");
@@ -96,7 +96,7 @@ var import_react = require("react");
 var import_mui_textfield = require("@availity/mui-textfield");
 var import_mui_button = require("@availity/mui-button");
 var import_mui_toggle_button = require("@availity/mui-toggle-button");
-var import_Grid = __toESM(require("@mui/material/Grid"));
+var import_mui_layout = require("@availity/mui-layout");
 var import_styles = require("@mui/material/styles");
 var import_mui_icon = require("@availity/mui-icon");
 var import_mui_form_utils = require("@availity/mui-form-utils");
@@ -104,7 +104,7 @@ var import_api_axios = require("@availity/api-axios");
 var import_react_hook_form = require("react-hook-form");
 var import_jsx_runtime = require("react/jsx-runtime");
 var SmileButtons = (0, import_styles.styled)(import_mui_toggle_button.ToggleButtonGroup, { name: "AvFeedbackContainer", slot: "SmileButtons" })({});
-var FormActions = (0, import_styles.styled)(import_Grid.default, { name: "AvFeedbackContainer", slot: "FormActions" })({});
+var FormActions = (0, import_styles.styled)(import_mui_layout.Grid, { name: "AvFeedbackContainer", slot: "FormActions" })({});
 var SmileButton = (_a) => {
   var _b = _a, { disabled, Icon, label, value } = _b, props = __objRest(_b, ["disabled", "Icon", "label", "value"]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -188,11 +188,11 @@ var FeedbackForm = ({
   };
   if (!sent) {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-      import_Grid.default,
+      import_mui_layout.Grid,
       {
         component: "form",
         container: true,
-        justifyContent: "center",
+        sx: { justifyContent: "center" },
         onSubmit: handleSubmit(onSubmit),
         "aria-label": "Feedback Form",
         "aria-describedby": "feedback-form-header",
@@ -230,29 +230,19 @@ var FeedbackForm = ({
               minRows: 3,
               maxRows: 3,
               label: getFeedbackLabel(),
-              inputProps: { "aria-required": "true" },
               InputLabelProps: {
                 component: import_mui_form_utils.FormLabel,
                 required: true
               },
+              inputProps: { "aria-required": "true" },
               helperText: ((_c = errors.feedback) == null ? void 0 : _c.message) || "Max 200 characters",
               error: !!errors.feedback,
               disabled: loading || !smileFieldValue
             })
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(FormActions, { container: true, direction: "row", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Grid.default, { item: true, flex: 1, minWidth: "147px", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_button.Button, { color: "secondary", disabled: loading, onClick: handleClose, children: "Close" }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Grid.default, { item: true, flex: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              import_mui_button.LoadingButton,
-              {
-                disabled: !smileFieldValue,
-                loading,
-                type: "submit",
-                variant: "contained",
-                sx: { paddingLeft: 0, paddingRight: 0 },
-                children: "Send Feedback"
-              }
-            ) })
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(FormActions, { container: true, direction: "row", width: "100%", spacing: 1, wrap: "wrap", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_layout.Grid, { sx: { flex: 1, minWidth: "147px" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_button.Button, { color: "secondary", disabled: loading, onClick: handleClose, children: "Close" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_layout.Grid, { sx: { flex: 1, minWidth: "147px" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_button.LoadingButton, { disabled: !smileFieldValue, loading, type: "submit", variant: "contained", children: "Send Feedback" }) })
           ] })
         ]
       }
@@ -266,10 +256,10 @@ var FeedbackForm = ({
 var import_mui_button2 = require("@availity/mui-button");
 var import_mui_icon2 = require("@availity/mui-icon");
 var import_mui_typography = require("@availity/mui-typography");
-var import_Grid2 = __toESM(require("@mui/material/Grid"));
+var import_mui_layout2 = require("@availity/mui-layout");
 var import_styles2 = require("@mui/material/styles");
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var FeedbackHeaderContainer = (0, import_styles2.styled)(import_Grid2.default, { name: "AvFeedbackContainer", slot: "FeedbackHeaderContainer" })({});
+var FeedbackHeaderContainer = (0, import_styles2.styled)(import_mui_layout2.Grid, { name: "AvFeedbackContainer", slot: "FeedbackHeaderContainer" })({});
 var FeedbackHeader = ({ appName, handleClose, loading, sent }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     FeedbackHeaderContainer,
@@ -281,8 +271,8 @@ var FeedbackHeader = ({ appName, handleClose, loading, sent }) => {
       flexWrap: "nowrap",
       id: "feedback-form-header",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_Grid2.default, { item: true, whiteSpace: "normal", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_mui_typography.Typography, { component: "h2", variant: "h5", children: sent ? "Thank you for your feedback." : `Tell us what you think about ${appName}` }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_Grid2.default, { item: true, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_mui_button2.IconButton, { disabled: loading, title: "Close", onClick: handleClose, size: "medium", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_mui_icon2.CloseIcon, { fontSize: "xsmall" }) }) })
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_mui_layout2.Grid, { sx: { whiteSpace: "normal" }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_mui_typography.Typography, { component: "h2", variant: "h5", children: sent ? "Thank you for your feedback." : `Tell us what you think about ${appName}` }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_mui_layout2.Grid, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_mui_button2.IconButton, { disabled: loading, title: "Close", onClick: handleClose, size: "medium", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_mui_icon2.CloseIcon, { fontSize: "xsmall" }) }) })
       ]
     }
   );

package/dist/index.mjs

@@ -63,7 +63,7 @@ import { useEffect } from "react";
 import { TextField } from "@availity/mui-textfield";
 import { LoadingButton, Button, IconButton } from "@availity/mui-button";
 import { ToggleButtonGroup, ToggleButton } from "@availity/mui-toggle-button";
-import Grid from "@mui/material/Grid";
+import { Grid } from "@availity/mui-layout";
 import { styled } from "@mui/material/styles";
 import { FaceFrownIcon, FaceNeutralIcon, FaceSmileIcon } from "@availity/mui-icon";
 import { FormLabel } from "@availity/mui-form-utils";
@@ -159,7 +159,7 @@ var FeedbackForm = ({
       {
         component: "form",
         container: true,
-        justifyContent: "center",
+        sx: { justifyContent: "center" },
         onSubmit: handleSubmit(onSubmit),
         "aria-label": "Feedback Form",
         "aria-describedby": "feedback-form-header",
@@ -197,29 +197,19 @@ var FeedbackForm = ({
               minRows: 3,
               maxRows: 3,
               label: getFeedbackLabel(),
-              inputProps: { "aria-required": "true" },
               InputLabelProps: {
                 component: FormLabel,
                 required: true
               },
+              inputProps: { "aria-required": "true" },
               helperText: ((_c = errors.feedback) == null ? void 0 : _c.message) || "Max 200 characters",
               error: !!errors.feedback,
               disabled: loading || !smileFieldValue
             })
           ),
-          /* @__PURE__ */ jsxs(FormActions, { container: true, direction: "row", children: [
-            /* @__PURE__ */ jsx(Grid, { item: true, flex: 1, minWidth: "147px", children: /* @__PURE__ */ jsx(Button, { color: "secondary", disabled: loading, onClick: handleClose, children: "Close" }) }),
-            /* @__PURE__ */ jsx(Grid, { item: true, flex: 1, children: /* @__PURE__ */ jsx(
-              LoadingButton,
-              {
-                disabled: !smileFieldValue,
-                loading,
-                type: "submit",
-                variant: "contained",
-                sx: { paddingLeft: 0, paddingRight: 0 },
-                children: "Send Feedback"
-              }
-            ) })
+          /* @__PURE__ */ jsxs(FormActions, { container: true, direction: "row", width: "100%", spacing: 1, wrap: "wrap", children: [
+            /* @__PURE__ */ jsx(Grid, { sx: { flex: 1, minWidth: "147px" }, children: /* @__PURE__ */ jsx(Button, { color: "secondary", disabled: loading, onClick: handleClose, children: "Close" }) }),
+            /* @__PURE__ */ jsx(Grid, { sx: { flex: 1, minWidth: "147px" }, children: /* @__PURE__ */ jsx(LoadingButton, { disabled: !smileFieldValue, loading, type: "submit", variant: "contained", children: "Send Feedback" }) })
           ] })
         ]
       }
@@ -233,7 +223,7 @@ var FeedbackForm = ({
 import { IconButton as IconButton2 } from "@availity/mui-button";
 import { CloseIcon } from "@availity/mui-icon";
 import { Typography } from "@availity/mui-typography";
-import Grid2 from "@mui/material/Grid";
+import { Grid as Grid2 } from "@availity/mui-layout";
 import { styled as styled2 } from "@mui/material/styles";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var FeedbackHeaderContainer = styled2(Grid2, { name: "AvFeedbackContainer", slot: "FeedbackHeaderContainer" })({});
@@ -248,8 +238,8 @@ var FeedbackHeader = ({ appName, handleClose, loading, sent }) => {
       flexWrap: "nowrap",
       id: "feedback-form-header",
       children: [
-        /* @__PURE__ */ jsx2(Grid2, { item: true, whiteSpace: "normal", children: /* @__PURE__ */ jsx2(Typography, { component: "h2", variant: "h5", children: sent ? "Thank you for your feedback." : `Tell us what you think about ${appName}` }) }),
-        /* @__PURE__ */ jsx2(Grid2, { item: true, children: /* @__PURE__ */ jsx2(IconButton2, { disabled: loading, title: "Close", onClick: handleClose, size: "medium", children: /* @__PURE__ */ jsx2(CloseIcon, { fontSize: "xsmall" }) }) })
+        /* @__PURE__ */ jsx2(Grid2, { sx: { whiteSpace: "normal" }, children: /* @__PURE__ */ jsx2(Typography, { component: "h2", variant: "h5", children: sent ? "Thank you for your feedback." : `Tell us what you think about ${appName}` }) }),
+        /* @__PURE__ */ jsx2(Grid2, { children: /* @__PURE__ */ jsx2(IconButton2, { disabled: loading, title: "Close", onClick: handleClose, size: "medium", children: /* @__PURE__ */ jsx2(CloseIcon, { fontSize: "xsmall" }) }) })
       ]
     }
   );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-feedback",
-  "version": "0.4.1",
+  "version": "1.0.0-alpha.0",
   "description": "Availity MUI Feedback Component - part of the @availity/element design system",
   "keywords": [
     "react",
@@ -40,28 +40,29 @@
     "publish:canary": "yarn npm publish --access public --tag canary"
   },
   "devDependencies": {
-    "@mui/material": "^5.15.15",
+    "@mui/material": "^6.4.5",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "tsup": "^8.0.2",
+    "tsup": "^8.3.6",
     "typescript": "^5.4.5"
   },
   "peerDependencies": {
-    "@mui/material": "^5.11.9",
+    "@mui/material": "^6.4.5",
     "react": ">=16.3.0"
   },
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
-    "@availity/api-axios": "^9.0.6",
-    "@availity/mui-button": "^0.7.0",
-    "@availity/mui-form-utils": "^0.17.1",
-    "@availity/mui-icon": "^0.14.0",
-    "@availity/mui-popover": "^0.2.0",
-    "@availity/mui-textfield": "^0.7.1",
-    "@availity/mui-toggle-button": "^0.2.0",
-    "@availity/mui-typography": "^0.3.0",
-    "react-hook-form": "^7.51.3"
+    "@availity/api-axios": "^10.0.0",
+    "@availity/mui-button": "^1.0.0-alpha.0",
+    "@availity/mui-form-utils": "^1.0.0-alpha.0",
+    "@availity/mui-icon": "^1.0.0-alpha.0",
+    "@availity/mui-layout": "^1.0.0-alpha.0",
+    "@availity/mui-popover": "^1.0.0-alpha.0",
+    "@availity/mui-textfield": "^1.0.0-alpha.0",
+    "@availity/mui-toggle-button": "^1.0.0-alpha.0",
+    "@availity/mui-typography": "^1.0.0-alpha.0",
+    "react-hook-form": "^7.54.2"
   }
 }

package/src/lib/FeedbackForm.tsx

@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
 import { TextField } from '@availity/mui-textfield';
 import { LoadingButton, Button, IconButton } from '@availity/mui-button';
 import { ToggleButtonGroup, ToggleButton } from '@availity/mui-toggle-button';
-import Grid from '@mui/material/Grid';
+import { Grid } from '@availity/mui-layout';
 import { SvgIconProps } from '@mui/material/SvgIcon';
 import { ToggleButtonProps } from '@mui/material/ToggleButton';
 import { styled } from '@mui/material/styles';
@@ -132,7 +132,7 @@ export const FeedbackForm = ({
       <Grid
         component="form"
         container
-        justifyContent="center"
+        sx={{ justifyContent: 'center' }}
         onSubmit={handleSubmit(onSubmit)}
         aria-label="Feedback Form"
         aria-describedby="feedback-form-header"
@@ -167,29 +167,23 @@ export const FeedbackForm = ({
           minRows={3}
           maxRows={3}
           label={getFeedbackLabel()}
-          inputProps={{ 'aria-required': 'true' }}
           InputLabelProps={{
             component: FormLabel,
             required: true,
           }}
+          inputProps={{ 'aria-required': 'true' }}
           helperText={errors.feedback?.message || 'Max 200 characters'}
           error={!!errors.feedback}
           disabled={loading || !smileFieldValue}
         />
-        <FormActions container direction="row">
-          <Grid item flex={1} minWidth="147px">
+        <FormActions container direction="row" width="100%" spacing={1} wrap="wrap">
+          <Grid sx={{ flex: 1, minWidth: '147px' }}>
             <Button color="secondary" disabled={loading} onClick={handleClose}>
               Close
             </Button>
           </Grid>
-          <Grid item flex={1}>
-            <LoadingButton
-              disabled={!smileFieldValue}
-              loading={loading}
-              type="submit"
-              variant="contained"
-              sx={{ paddingLeft: 0, paddingRight: 0 }}
-            >
+          <Grid sx={{ flex: 1, minWidth: '147px' }}>
+            <LoadingButton disabled={!smileFieldValue} loading={loading} type="submit" variant="contained">
               Send Feedback
             </LoadingButton>
           </Grid>

package/src/lib/FeedbackHeader.tsx

@@ -1,7 +1,7 @@
 import { IconButton } from '@availity/mui-button';
 import { CloseIcon } from '@availity/mui-icon';
 import { Typography } from '@availity/mui-typography';
-import Grid from '@mui/material/Grid';
+import { Grid } from '@availity/mui-layout';
 import { styled } from '@mui/material/styles';
 
 interface FeedbackHeaderProps {
@@ -23,12 +23,12 @@ export const FeedbackHeader = ({ appName, handleClose, loading, sent }: Feedback
       flexWrap="nowrap"
       id="feedback-form-header"
     >
-      <Grid item whiteSpace="normal">
+      <Grid sx={{ whiteSpace: 'normal' }}>
         <Typography component="h2" variant="h5">
           {sent ? 'Thank you for your feedback.' : `Tell us what you think about ${appName}`}
         </Typography>
       </Grid>
-      <Grid item>
+      <Grid>
         <IconButton disabled={loading} title="Close" onClick={handleClose} size="medium">
           <CloseIcon fontSize="xsmall" />
         </IconButton>