@availity/feedback 9.1.14 → 10.0.1

package/index.js

@@ -1,3 +1,3 @@
-export { default } from './src/Feedback';
-export { default as FeedbackForm } from './src/FeedbackForm';
-export { default as FeedbackModal } from './src/FeedbackModal';
+export { default } from './src/Feedback.jsx';
+export { default as FeedbackForm } from './src/FeedbackForm.jsx';
+export { default as FeedbackModal } from './src/FeedbackModal.jsx';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/feedback",
-  "version": "9.1.14",
+  "version": "10.0.1",
   "description": "Availity feedback with smiley faces react component.",
   "keywords": [
     "react",
@@ -17,33 +17,36 @@
     "directory": "packages/feedback"
   },
   "license": "MIT",
+  "type": "module",
   "author": "Evan Sharp <evan.sharp@availity.com>",
-  "main": "index.js",
-  "types": "index.d.ts",
   "scripts": {
+    "build": "tsup index.js --format esm --clean --dts",
+    "dev": "tsup index.js --format esm --watch --dts",
+    "clean": "rm -rf dist",
     "publish": "yarn npm publish --tolerate-republish --access public",
     "publish:canary": "yarn npm publish --access public --tag canary"
   },
   "dependencies": {
-    "@availity/block-ui": "^1.1.7",
-    "@availity/form": "1.10.7",
-    "@availity/hooks": "5.2.0",
-    "@availity/icon": "0.11.11",
-    "@availity/native-form": "^7.0.12",
-    "@availity/select": "4.2.13",
+    "@availity/block-ui": "^2.0.1",
+    "@availity/form": "2.0.1",
+    "@availity/hooks": "6.0.1",
+    "@availity/icon": "1.0.1",
+    "@availity/native-form": "^8.2.0",
+    "@availity/select": "5.0.1",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@availity/api-axios": "^12.1.0",
-    "@availity/yup": "^7.0.1",
-    "axios": "^1.13.2",
-    "formik": "^2.4.6",
+    "@availity/api-axios": "^13.2.0",
+    "@availity/yup": "^7.1.0",
+    "axios": "^1.17.0",
+    "formik": "^2.4.9",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "reactstrap": "^8.10.1"
+    "reactstrap": "^8.10.1",
+    "tsup": "^8.5.1"
   },
   "peerDependencies": {
-    "@availity/api-axios": "^12.0.0",
+    "@availity/api-axios": "^12.0.0 || ^13.0.0",
     "@availity/yup": "^7.0.0",
     "axios": "^1.13.2",
     "formik": "^2.4.6",
@@ -52,5 +55,14 @@
   },
   "publishConfig": {
     "access": "public"
+  },
+  "main": "./dist/index.js",
+  "exports": {
+    ".": {
+      "source": "./index.js",
+      "types": "./index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
   }
 }

package/project.json

@@ -4,10 +4,15 @@
   "projectType": "library",
   "targets": {
     "test": {
-      "executor": "@nx/jest:jest",
-      "outputs": ["{workspaceRoot}/coverage/feedback"],
+      "executor": "nx:run-commands",
       "options": {
-        "jestConfig": "packages/feedback/jest.config.js"
+        "command": "vitest run --project=feedback",
+        "cwd": "."
+      },
+      "configurations": {
+        "ci": {
+          "command": "vitest run --project=feedback --coverage"
+        }
       }
     },
     "version": {
@@ -23,17 +28,20 @@
     "lint": {
       "executor": "@nx/eslint:lint",
       "options": {
-        "eslintConfig": ".eslintrc.yaml",
         "silent": false,
         "fix": false,
         "cache": true,
         "cacheLocation": "./node_modules/.cache/feedback/.eslintcache",
         "maxWarnings": -1,
         "quiet": false,
-        "noEslintrc": false,
-        "hasTypeAwareRules": true,
         "cacheStrategy": "metadata"
       }
+    },
+    "build": {
+      "command": "tsup index.js --format esm",
+      "options": {
+        "cwd": "packages/feedback"
+      }
     }
   }
 }

package/src/{Feedback.js → Feedback.jsx}

@@ -4,8 +4,8 @@ import { Dropdown, DropdownToggle } from 'reactstrap';
 import { avLogMessagesApiV2 } from '@availity/api-axios';
 import { useToggle } from '@availity/hooks';
 
-import FeedbackDropdown from './FeedbackDropdown';
-import FeedbackModal from './FeedbackModal';
+import FeedbackDropdown from './FeedbackDropdown.jsx';
+import FeedbackModal from './FeedbackModal.jsx';
 
 const Feedback = ({
   appName,

package/src/{FeedbackDropdown.js → FeedbackDropdown.jsx}

@@ -2,9 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { DropdownMenu } from 'reactstrap';
 
-import FeedbackForm from './FeedbackForm';
-import SupportModal from './SupportModal';
-import SupportDropdown from './SupportDropdown';
+import FeedbackForm from './FeedbackForm.jsx';
+import SupportModal from './SupportModal.jsx';
+import SupportDropdown from './SupportDropdown.jsx';
 
 const dropdownStyles = { width: '550px', maxWidth: '90vw', padding: 0 };
 

package/src/{FeedbackForm.js → FeedbackForm.jsx}

@@ -6,7 +6,7 @@ import { Form, Field } from '@availity/form';
 import { SelectField } from '@availity/select';
 import * as yup from 'yup';
 
-import SmileField from './SmileField';
+import SmileField from './SmileField.jsx';
 
 yup.addMethod(yup.string, 'isRequired', function format(isRequired, msg) {
   return this.test({

package/src/{FeedbackModal.js → FeedbackModal.jsx}

@@ -2,8 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Modal } from 'reactstrap';
 
-import FeedbackForm from './FeedbackForm';
-import SupportModal from './SupportModal';
+import FeedbackForm from './FeedbackForm.jsx';
+import SupportModal from './SupportModal.jsx';
 
 const FeedbackModal = ({ isOpen, toggle, zIndex, showSupport, supportZIndex, feedbackToggle, ...formOptions }) => {
   const [supportIsActive, setSupportIsActive] = React.useState(false);

package/src/{SmileField.js → SmileField.jsx}

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useField, useFormikContext } from 'formik';
 
-import FeedbackButton from './FeedbackButton';
+import FeedbackButton from './FeedbackButton.jsx';
 
 const btnStyles = { flex: 1, margin: '0 2% 0 2%' };
 const defaultOptions = [

package/src/{SupportDropdown.js → SupportDropdown.jsx}

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { DropdownMenu } from 'reactstrap';
 import BlockUi from '@availity/block-ui';
 
-import SupportForm from './SupportForm';
+import SupportForm from './SupportForm.jsx';
 
 const dropdownStyles = { width: '550px', maxWidth: '90vw', padding: 0 };
 

package/src/{SupportModal.js → SupportModal.jsx}

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { Modal } from 'reactstrap';
 import BlockUi from '@availity/block-ui';
 
-import SupportForm from './SupportForm';
+import SupportForm from './SupportForm.jsx';
 
 const SupportModal = ({ supportIsActive, toggle, supportZIndex, setSupportIsActive, feedbackToggle }) => {
   const [blocking, setBlocking] = useState(false);

package/tests/Feedback.test.jsx

@@ -0,0 +1,228 @@
+import React from 'react';
+import { render, fireEvent, cleanup, waitFor } from '@testing-library/react';
+import Feedback from '../index.js';
+
+global.document.createRange = () => ({
+  setStart: () => {},
+  setEnd: () => {},
+  commonAncestorContainer: {
+    nodeName: 'BODY',
+    ownerDocument: document,
+  },
+});
+
+afterEach(cleanup);
+
+describe('Feedback', () => {
+  test('should show form on click', () => {
+    const { getByTestId, getByText } = render(<Feedback appName="Test Space" />);
+
+    fireEvent.click(getByText('Give Feedback'));
+
+     
+    expect(getByTestId('feedback-form')).toBeDefined();
+  });
+
+  test('should show modal form on click', () => {
+    const { getByTestId, getByText } = render(<Feedback appName="Test Space" modal />);
+
+    fireEvent.click(getByText('Give Feedback'));
+
+     
+    expect(getByTestId('feedbackModal')).toBeDefined();
+  });
+
+  test('should call onClose in form', async () => {
+    const onClose = vi.fn();
+
+    const { getByTestId, getByText } = render(<Feedback appName="Test Space" formProps={{ onClose }} />);
+
+    fireEvent.click(getByText('Give Feedback'));
+
+     
+    expect(getByTestId('feedback-form')).toBeDefined();
+
+    fireEvent.keyDown(getByText('Close'), {
+      key: 'Enter',
+      keyCode: 13,
+    });
+
+    await waitFor(() => {
+      expect(onClose).toHaveBeenCalledTimes(1);
+    });
+
+    fireEvent.click(getByText('Give Feedback'));
+
+    fireEvent.click(getByText('Close'));
+
+    await waitFor(() => {
+      expect(onClose).toHaveBeenCalledTimes(2);
+    });
+  });
+
+  test('should call onClose in modal', async () => {
+    const onClose = vi.fn();
+
+    const { getByTestId, getByText } = render(<Feedback appName="Test Space" formProps={{ onClose }} modal />);
+
+    fireEvent.click(getByText('Give Feedback'));
+
+     
+    expect(getByTestId('feedbackModal')).toBeDefined();
+
+    fireEvent.click(getByText('Close'));
+
+    await waitFor(() => {
+      expect(onClose).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  test('should have proper ARIA attributes on Give Feedback button', () => {
+    const { getByTestId, getByText } = render(<Feedback appName="Test Space" />);
+
+    const giveFeedbackButton = getByText('Give Feedback');
+
+    expect(giveFeedbackButton).toHaveAttribute('aria-expanded', 'false');
+
+    fireEvent.click(giveFeedbackButton);
+
+     
+    expect(getByTestId('feedback-form')).toBeDefined();
+    expect(giveFeedbackButton).toHaveAttribute('aria-expanded', 'true');
+
+    fireEvent.click(getByText('Close'));
+
+    expect(giveFeedbackButton).toHaveAttribute('aria-expanded', 'false');
+  });
+
+  test('should focus FeedbackButton when enter is clicked', async () => {
+    const onChange = vi.fn();
+
+    const { getByTestId, getByText } = render(<Feedback appName="Test Space" formProps={{ onChange }} />);
+
+    fireEvent.click(getByText('Give Feedback'));
+
+     
+    expect(getByTestId('feedback-form')).toBeDefined();
+
+    fireEvent.keyDown(getByText('Smiley face'), {
+      key: 'Enter',
+      keyCode: 13,
+    });
+
+    const submitButton = getByText('Send Feedback');
+
+    expect(submitButton.getAttribute('disabled')).toBe(null);
+  });
+
+  test('should close when first feedbackButton is shift+tabbed', async () => {
+    const onClose = vi.fn();
+
+    const { getByTestId, getByText } = render(<Feedback appName="Test Space" formProps={{ onClose }} />);
+
+    fireEvent.click(getByText('Give Feedback'));
+
+     
+    expect(getByTestId('feedback-form')).toBeDefined();
+
+    fireEvent.keyDown(getByText('Smiley face'), {
+      key: 'Tab',
+      keyCode: 9,
+      shiftKey: true,
+    });
+
+    await waitFor(() => {
+      expect(onClose).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  test('should close when the close button is tabbed and give feedback is disabled', async () => {
+    const onClose = vi.fn();
+
+    const { getByTestId, getByText } = render(<Feedback appName="Test Space" formProps={{ onClose }} />);
+
+    fireEvent.click(getByText('Give Feedback'));
+
+     
+    expect(getByTestId('feedback-form')).toBeDefined();
+
+    fireEvent.keyDown(getByText('Close'), {
+      key: 'Tab',
+      keyCode: 9,
+    });
+
+    await waitFor(() => {
+      expect(onClose).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  test('should not close when the close button is tabbed and give feedback is not disabled', async () => {
+    const onClose = vi.fn();
+
+    const { getByTestId, getByText } = render(<Feedback appName="Test Space" formProps={{ onClose }} />);
+
+    fireEvent.click(getByText('Give Feedback'));
+
+     
+    expect(getByTestId('feedback-form')).toBeDefined();
+
+    fireEvent.click(getByText('Smiley face'));
+
+    fireEvent.keyDown(getByText('Close'), {
+      key: 'Tab',
+      keyCode: 9,
+    });
+
+    await waitFor(() => {
+      expect(onClose).toHaveBeenCalledTimes(0);
+    });
+  });
+
+  test('should close when the send feedback button is tabbed', async () => {
+    const onClose = vi.fn();
+
+    const { getByTestId, getByText } = render(<Feedback appName="Test Space" formProps={{ onClose }} />);
+
+    fireEvent.click(getByText('Give Feedback'));
+
+     
+    expect(getByTestId('feedback-form')).toBeDefined();
+
+    fireEvent.click(getByText('Smiley face'));
+
+    fireEvent.keyDown(getByText('Send Feedback'), {
+      key: 'Tab',
+      keyCode: 9,
+    });
+
+    await waitFor(() => {
+      expect(onClose).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  test('should render passed text on the button', async () => {
+    const displayText = 'This is my Content.';
+    const { getByText } = render(<Feedback>{displayText}</Feedback>);
+
+    const btn = getByText(displayText);
+
+    expect(btn).toBeDefined();
+  });
+
+  test('should render passed children and text', async () => {
+    const displayText = ' User Feedback';
+    const { getByRole } = render(
+      <Feedback>
+        <span className="icon icon-user-plus" />
+        {displayText}
+      </Feedback>
+    );
+
+    const btn = getByRole('button');
+    const span = btn.firstChild;
+
+    expect(span).toBeDefined();
+    expect(span.className).toBe('icon icon-user-plus');
+    expect(btn.textContent).toBe(displayText);
+  });
+});

package/tests/FeedbackButton.test.jsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { render, cleanup } from '@testing-library/react';
+import FeedbackButton from '../src/FeedbackButton';
+
+afterEach(cleanup);
+
+describe('Feedback', () => {
+  test('should render an icon', () => {
+    const { getByTestId } = render(<FeedbackButton icon="home" />);
+
+     
+    expect(getByTestId('feedback-icon').className).toContain('icon-home');
+  });
+
+  test('should highlight when active', () => {
+    const { container } = render(<FeedbackButton icon="home" active="home" />);
+
+    expect(container.firstChild.className).toContain('btn-primary');
+  });
+
+  test('should have proper ARIA attributes when active', () => {
+    const { container, getByText } = render(
+      <FeedbackButton icon="home" active="home">
+        Home
+      </FeedbackButton>
+    );
+
+    expect(container.firstChild).toHaveAttribute('aria-pressed', 'true');
+    expect(getByText('Home')).toHaveClass('sr-only');
+  });
+
+  test('should have proper ARIA attributes', () => {
+    const { container, getByText } = render(<FeedbackButton icon="home">Home</FeedbackButton>);
+
+    expect(container.firstChild).toHaveAttribute('aria-pressed', 'false');
+    expect(getByText('Home')).toHaveClass('sr-only');
+  });
+});