@availity/mui-feedback 0.1.6 → 0.1.7

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.1.7](https://github.com/Availity/element/compare/@availity/mui-feedback@0.1.6...@availity/mui-feedback@0.1.7) (2023-12-13)
+
 ## [0.1.6](https://github.com/Availity/element/compare/@availity/mui-feedback@0.1.5...@availity/mui-feedback@0.1.6) (2023-12-04)
 
 ### Dependency Updates

package/dist/index.js

@@ -113,9 +113,9 @@ var FeedbackForm = ({
     },
     { Icon: import_mui_icon.FaceFrownIcon, label: "What don't you like?", value: "frown" }
   ];
+  const smileFieldValue = watch("smileField");
   const getFeedbackLabel = () => {
-    const smile = watch("smileField");
-    const option = options.find((option2) => option2.value === smile);
+    const option = options.find((option2) => option2.value === smileFieldValue);
     return (option == null ? void 0 : option.label) || "What would you improve?";
   };
   if (!sent) {
@@ -147,7 +147,7 @@ var FeedbackForm = ({
             });
           }
         }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_textfield.TextField, {
+        smileFieldValue && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_textfield.TextField, {
           ...register("feedback", {
             required: "This field is required",
             maxLength: { value: 200, message: "This field must not exceed 200 characters" }
@@ -187,7 +187,7 @@ var FeedbackForm = ({
               item: true,
               xs: 6,
               children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_button.LoadingButton, {
-                disabled: !watch("smileField"),
+                disabled: !smileFieldValue,
                 fullWidth: true,
                 loading,
                 type: "submit",
@@ -252,6 +252,7 @@ var Feedback = ({ analytics = import_api_axios2.avLogMessagesApi, appName }) =>
   const [loading, setLoading] = (0, import_react2.useState)(false);
   const handlePopoverOpen = (event) => {
     setAnchorEl(event.currentTarget);
+    setSent(false);
   };
   const handlePopoverClose = () => {
     setAnchorEl(null);

package/dist/index.mjs

@@ -87,9 +87,9 @@ var FeedbackForm = ({
     },
     { Icon: FaceFrownIcon, label: "What don't you like?", value: "frown" }
   ];
+  const smileFieldValue = watch("smileField");
   const getFeedbackLabel = () => {
-    const smile = watch("smileField");
-    const option = options.find((option2) => option2.value === smile);
+    const option = options.find((option2) => option2.value === smileFieldValue);
     return (option == null ? void 0 : option.label) || "What would you improve?";
   };
   if (!sent) {
@@ -121,7 +121,7 @@ var FeedbackForm = ({
             });
           }
         }),
-        /* @__PURE__ */ jsx(TextField, {
+        smileFieldValue && /* @__PURE__ */ jsx(TextField, {
           ...register("feedback", {
             required: "This field is required",
             maxLength: { value: 200, message: "This field must not exceed 200 characters" }
@@ -161,7 +161,7 @@ var FeedbackForm = ({
               item: true,
               xs: 6,
               children: /* @__PURE__ */ jsx(LoadingButton, {
-                disabled: !watch("smileField"),
+                disabled: !smileFieldValue,
                 fullWidth: true,
                 loading,
                 type: "submit",
@@ -226,6 +226,7 @@ var Feedback = ({ analytics = avLogMessagesApi, appName }) => {
   const [loading, setLoading] = useState(false);
   const handlePopoverOpen = (event) => {
     setAnchorEl(event.currentTarget);
+    setSent(false);
   };
   const handlePopoverClose = () => {
     setAnchorEl(null);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-feedback",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "Availity MUI Feedback Component - part of the @availity/element design system",
   "keywords": [
     "react",

package/src/lib/Feedback.tsx

@@ -21,6 +21,7 @@ export const Feedback = ({ analytics = avLogMessagesApi, appName }: FeedbackProp
 
   const handlePopoverOpen = (event: React.MouseEvent<HTMLElement>) => {
     setAnchorEl(event.currentTarget);
+    setSent(false);
   };
 
   const handlePopoverClose = () => {

package/src/lib/FeedbackForm.tsx

@@ -105,10 +105,10 @@ export const FeedbackForm = ({
     { Icon: FaceFrownIcon, label: "What don't you like?", value: 'frown' },
   ];
 
-  const getFeedbackLabel = () => {
-    const smile = watch('smileField');
+  const smileFieldValue = watch('smileField');
 
-    const option = options.find((option) => option.value === smile);
+  const getFeedbackLabel = () => {
+    const option = options.find((option) => option.value === smileFieldValue);
 
     return option?.label || 'What would you improve?';
   };
@@ -143,25 +143,27 @@ export const FeedbackForm = ({
             );
           }}
         />
-        <TextField
-          {...register('feedback', {
-            required: 'This field is required',
-            maxLength: { value: 200, message: 'This field must not exceed 200 characters' },
-          })}
-          fullWidth
-          multiline
-          minRows={3}
-          maxRows={3}
-          label={getFeedbackLabel()}
-          inputProps={{ 'aria-required': 'true' }}
-          InputLabelProps={{
-            component: FormLabel,
-            required: true,
-          }}
-          helperText={errors.feedback?.message || 'Max 200 characters'}
-          error={!!errors.feedback}
-          disabled={loading}
-        />
+        {smileFieldValue && (
+          <TextField
+            {...register('feedback', {
+              required: 'This field is required',
+              maxLength: { value: 200, message: 'This field must not exceed 200 characters' },
+            })}
+            fullWidth
+            multiline
+            minRows={3}
+            maxRows={3}
+            label={getFeedbackLabel()}
+            inputProps={{ 'aria-required': 'true' }}
+            InputLabelProps={{
+              component: FormLabel,
+              required: true,
+            }}
+            helperText={errors.feedback?.message || 'Max 200 characters'}
+            error={!!errors.feedback}
+            disabled={loading}
+          />
+        )}
         <Grid container direction="row" marginTop="16px" spacing={1}>
           <Grid item xs={6}>
             <Button color="secondary" disabled={loading} fullWidth onClick={handleClose}>
@@ -169,13 +171,7 @@ export const FeedbackForm = ({
             </Button>
           </Grid>
           <Grid item xs={6}>
-            <LoadingButton
-              disabled={!watch('smileField')}
-              fullWidth
-              loading={loading}
-              type="submit"
-              variant="contained"
-            >
+            <LoadingButton disabled={!smileFieldValue} fullWidth loading={loading} type="submit" variant="contained">
               Send Feedback
             </LoadingButton>
           </Grid>