@availity/mui-feedback 0.1.17 → 0.1.19

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.1.19](https://github.com/Availity/element/compare/@availity/mui-feedback@0.1.18...@availity/mui-feedback@0.1.19) (2024-02-06)
+
+## [0.1.18](https://github.com/Availity/element/compare/@availity/mui-feedback@0.1.17...@availity/mui-feedback@0.1.18) (2024-01-31)
+
+### Dependency Updates
+
+* `mui-form-utils` updated to version `0.9.5`
+* `mui-textfield` updated to version `0.5.10`
 ## [0.1.17](https://github.com/Availity/element/compare/@availity/mui-feedback@0.1.16...@availity/mui-feedback@0.1.17) (2024-01-25)
 
 ### Dependency Updates

package/dist/index.js

@@ -43,6 +43,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_material.styled)(import_mui_toggle_button.ToggleButtonGroup, { name: "AvFeedbackContainer", slot: "SmileButtons" })({});
+var FormActions = (0, import_material.styled)(import_material.Grid, { name: "AvFeedbackContainer", slot: "FormActions" })({});
 var SmileButton = ({ disabled, Icon, label, value, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
   children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_toggle_button.ToggleButton, {
     "aria-label": value,
@@ -166,29 +167,24 @@ var FeedbackForm = ({
           error: !!errors.feedback,
           disabled: loading
         }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Grid, {
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(FormActions, {
           container: true,
           direction: "row",
-          marginTop: "16px",
           spacing: 1,
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Grid, {
               item: true,
-              xs: 6,
               children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_button.Button, {
                 color: "secondary",
                 disabled: loading,
-                fullWidth: true,
                 onClick: handleClose,
                 children: "Cancel"
               })
             }),
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Grid, {
               item: true,
-              xs: 6,
               children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_button.LoadingButton, {
                 disabled: !smileFieldValue,
-                fullWidth: true,
                 loading,
                 type: "submit",
                 variant: "contained",
@@ -210,8 +206,9 @@ var import_mui_icon2 = require("@availity/mui-icon");
 var import_mui_typography = require("@availity/mui-typography");
 var import_material2 = require("@mui/material");
 var import_jsx_runtime = require("react/jsx-runtime");
+var FeedbackHeaderContainer = (0, import_material2.styled)(import_material2.Grid, { name: "AvFeedbackContainer", slot: "FeedbackHeaderContainer" })({});
 var FeedbackHeader = ({ appName, handleClose, loading, sent }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material2.Grid, {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(FeedbackHeaderContainer, {
     alignItems: "center",
     container: true,
     direction: "row",
@@ -246,6 +243,7 @@ var FeedbackHeader = ({ appName, handleClose, loading, sent }) => {
 // src/lib/Feedback.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var FeedbackContainer = (0, import_material3.styled)(import_material3.Container, { name: "AvFeedbackContainer", slot: "root" })({});
+var GiveFeedbackButton = (0, import_material3.styled)(import_mui_button3.Button, { name: "AvGiveFeedbackButton", slot: "root" })({});
 var Feedback = ({ analytics = import_api_axios2.avLogMessagesApi, appName }) => {
   const [anchorEl, setAnchorEl] = (0, import_react2.useState)(null);
   const [sent, setSent] = (0, import_react2.useState)(false);
@@ -260,10 +258,9 @@ var Feedback = ({ analytics = import_api_axios2.avLogMessagesApi, appName }) =>
   const open = Boolean(anchorEl);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_button3.Button, {
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GiveFeedbackButton, {
         onClick: handlePopoverOpen,
         color: "secondary",
-        size: "large",
         children: "Give Feedback"
       }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_popover.Popover, {

package/dist/index.mjs

@@ -2,7 +2,7 @@
 import { useState } from "react";
 import { Popover } from "@availity/mui-popover";
 import { Button as Button2 } from "@availity/mui-button";
-import { Container, styled as styled2 } from "@mui/material";
+import { Container, styled as styled3 } from "@mui/material";
 import { avLogMessagesApi } from "@availity/api-axios";
 
 // src/lib/FeedbackForm.tsx
@@ -17,6 +17,7 @@ import { avRegionsApi } from "@availity/api-axios";
 import { useForm, Controller } from "react-hook-form";
 import { jsx, jsxs } from "react/jsx-runtime";
 var SmileButtons = styled(ToggleButtonGroup, { name: "AvFeedbackContainer", slot: "SmileButtons" })({});
+var FormActions = styled(Grid, { name: "AvFeedbackContainer", slot: "FormActions" })({});
 var SmileButton = ({ disabled, Icon, label, value, ...props }) => /* @__PURE__ */ jsx("div", {
   children: /* @__PURE__ */ jsx(ToggleButton, {
     "aria-label": value,
@@ -140,29 +141,24 @@ var FeedbackForm = ({
           error: !!errors.feedback,
           disabled: loading
         }),
-        /* @__PURE__ */ jsxs(Grid, {
+        /* @__PURE__ */ jsxs(FormActions, {
           container: true,
           direction: "row",
-          marginTop: "16px",
           spacing: 1,
           children: [
             /* @__PURE__ */ jsx(Grid, {
               item: true,
-              xs: 6,
               children: /* @__PURE__ */ jsx(Button, {
                 color: "secondary",
                 disabled: loading,
-                fullWidth: true,
                 onClick: handleClose,
                 children: "Cancel"
               })
             }),
             /* @__PURE__ */ jsx(Grid, {
               item: true,
-              xs: 6,
               children: /* @__PURE__ */ jsx(LoadingButton, {
                 disabled: !smileFieldValue,
-                fullWidth: true,
                 loading,
                 type: "submit",
                 variant: "contained",
@@ -182,10 +178,11 @@ var FeedbackForm = ({
 import { IconButton } from "@availity/mui-button";
 import { CloseIcon } from "@availity/mui-icon";
 import { Typography } from "@availity/mui-typography";
-import { Grid as Grid2 } from "@mui/material";
+import { Grid as Grid2, styled as styled2 } from "@mui/material";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var FeedbackHeaderContainer = styled2(Grid2, { name: "AvFeedbackContainer", slot: "FeedbackHeaderContainer" })({});
 var FeedbackHeader = ({ appName, handleClose, loading, sent }) => {
-  return /* @__PURE__ */ jsxs2(Grid2, {
+  return /* @__PURE__ */ jsxs2(FeedbackHeaderContainer, {
     alignItems: "center",
     container: true,
     direction: "row",
@@ -219,7 +216,8 @@ var FeedbackHeader = ({ appName, handleClose, loading, sent }) => {
 
 // src/lib/Feedback.tsx
 import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-var FeedbackContainer = styled2(Container, { name: "AvFeedbackContainer", slot: "root" })({});
+var FeedbackContainer = styled3(Container, { name: "AvFeedbackContainer", slot: "root" })({});
+var GiveFeedbackButton = styled3(Button2, { name: "AvGiveFeedbackButton", slot: "root" })({});
 var Feedback = ({ analytics = avLogMessagesApi, appName }) => {
   const [anchorEl, setAnchorEl] = useState(null);
   const [sent, setSent] = useState(false);
@@ -234,10 +232,9 @@ var Feedback = ({ analytics = avLogMessagesApi, appName }) => {
   const open = Boolean(anchorEl);
   return /* @__PURE__ */ jsxs3(Fragment, {
     children: [
-      /* @__PURE__ */ jsx3(Button2, {
+      /* @__PURE__ */ jsx3(GiveFeedbackButton, {
         onClick: handlePopoverOpen,
         color: "secondary",
-        size: "large",
         children: "Give Feedback"
       }),
       /* @__PURE__ */ jsx3(Popover, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-feedback",
-  "version": "0.1.17",
+  "version": "0.1.19",
   "description": "Availity MUI Feedback Component - part of the @availity/element design system",
   "keywords": [
     "react",
@@ -48,10 +48,10 @@
   "dependencies": {
     "@availity/api-axios": "^8.0.3",
     "@availity/mui-button": "^0.6.1",
-    "@availity/mui-form-utils": "^0.9.4",
+    "@availity/mui-form-utils": "^0.9.5",
     "@availity/mui-icon": "^0.7.3",
     "@availity/mui-popover": "^0.1.1",
-    "@availity/mui-textfield": "^0.5.9",
+    "@availity/mui-textfield": "^0.5.10",
     "@availity/mui-toggle-button": "^0.1.7",
     "@availity/mui-typography": "^0.1.5",
     "react-hook-form": "^7.48.2"

package/src/lib/Feedback.tsx

@@ -14,6 +14,8 @@ export interface FeedbackProps {
 
 const FeedbackContainer = styled(Container, { name: 'AvFeedbackContainer', slot: 'root' })({});
 
+const GiveFeedbackButton = styled(Button, { name: 'AvGiveFeedbackButton', slot: 'root' })({});
+
 export const Feedback = ({ analytics = avLogMessagesApi, appName }: FeedbackProps): JSX.Element => {
   const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
   const [sent, setSent] = useState<boolean>(false);
@@ -32,9 +34,9 @@ export const Feedback = ({ analytics = avLogMessagesApi, appName }: FeedbackProp
 
   return (
     <>
-      <Button onClick={handlePopoverOpen} color="secondary" size="large">
+      <GiveFeedbackButton onClick={handlePopoverOpen} color="secondary">
         Give Feedback
-      </Button>
+      </GiveFeedbackButton>
       <Popover
         anchorEl={anchorEl}
         anchorOrigin={{

package/src/lib/FeedbackForm.tsx

@@ -33,6 +33,8 @@ interface FeedbackFormProps {
 
 const SmileButtons = styled(ToggleButtonGroup, { name: 'AvFeedbackContainer', slot: 'SmileButtons' })({});
 
+const FormActions = styled(Grid, { name: 'AvFeedbackContainer', slot: 'FormActions' })({});
+
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const SmileButton = ({ disabled, Icon, label, value, ...props }: SmileButtonProps) => (
   <div>
@@ -164,18 +166,18 @@ export const FeedbackForm = ({
             disabled={loading}
           />
         )}
-        <Grid container direction="row" marginTop="16px" spacing={1}>
-          <Grid item xs={6}>
-            <Button color="secondary" disabled={loading} fullWidth onClick={handleClose}>
+        <FormActions container direction="row" spacing={1}>
+          <Grid item>
+            <Button color="secondary" disabled={loading} onClick={handleClose}>
               Cancel
             </Button>
           </Grid>
-          <Grid item xs={6}>
-            <LoadingButton disabled={!smileFieldValue} fullWidth loading={loading} type="submit" variant="contained">
+          <Grid item>
+            <LoadingButton disabled={!smileFieldValue} loading={loading} type="submit" variant="contained">
               Send Feedback
             </LoadingButton>
           </Grid>
-        </Grid>
+        </FormActions>
       </Grid>
     );
   } else {

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';
+import { Grid, styled } from '@mui/material';
 
 interface FeedbackHeaderProps {
   appName: string;
@@ -10,9 +10,11 @@ interface FeedbackHeaderProps {
   sent: boolean;
 }
 
+const FeedbackHeaderContainer = styled(Grid, { name: 'AvFeedbackContainer', slot: 'FeedbackHeaderContainer' })({});
+
 export const FeedbackHeader = ({ appName, handleClose, loading, sent }: FeedbackHeaderProps): JSX.Element => {
   return (
-    <Grid
+    <FeedbackHeaderContainer
       alignItems="center"
       container
       direction="row"
@@ -31,6 +33,6 @@ export const FeedbackHeader = ({ appName, handleClose, loading, sent }: Feedback
           <CloseIcon />
         </IconButton>
       </Grid>
-    </Grid>
+    </FeedbackHeaderContainer>
   );
 };