qpp-style 9.31.0 → 9.31.2

package/components/Error/error.js

@@ -20,7 +20,7 @@ export default class ErrorPage {
         code={options.code}
         message={options.message}
       />,
-      options.rootElement
+      options.rootElement,
     );
   }
 }

package/components/FlashNotification/FlashNotificationUI.jsx

@@ -51,14 +51,14 @@ class FlashNotification extends Component {
       function () {
         this.setState({ isClosed: false });
       }.bind(this),
-      250
+      250,
     );
 
     this.timer = setTimeout(
       function () {
         this._fadeOutNotification();
       }.bind(this),
-      10000
+      10000,
     );
   }
 
@@ -71,7 +71,7 @@ class FlashNotification extends Component {
           this.props.onClose();
         }
       }.bind(this),
-      500
+      500,
     );
   }
 

package/components/FlashNotification/index.js

@@ -21,7 +21,7 @@ export default class FlashNotification {
           titleText={options.titleText}
           bodyText={options.bodyText}
         />,
-        options.rootElement
+        options.rootElement,
       );
     } else {
       render(<FlashNotificationUI />, options);

package/components/Header/HeaderMenuItem.jsx

@@ -72,7 +72,7 @@ const HeaderMenuItem = ({
         !menuRef.current ||
         menuRef.current.contains(event.target) ||
         excludedClickOutClasses.some((className) =>
-          event?.target?.classList.contains(className)
+          event?.target?.classList.contains(className),
         )
       ) {
         return;

package/components/Header/HeaderUI.jsx

@@ -34,7 +34,7 @@ const HeaderUI = ({
         return {
           ...section,
           rows: columns[0].map((_, colIndex) =>
-            columns.map((row) => row[colIndex])
+            columns.map((row) => row[colIndex]),
           ),
         };
       }

package/components/Header/ImpersonatorBanner.jsx

@@ -18,7 +18,7 @@ const getViewType = (viewType) =>
     apm_id: 'APM Entity',
     cms_id: 'Registry',
     vg_id: 'Virtual Group',
-  }[viewType]);
+  })[viewType];
 
 const ImpersonatorBanner = () => {
   const {

package/components/Header/header.js

@@ -34,7 +34,7 @@ export default class Header {
         content={options.content}
         isIESupportPage={options.isIESupportPage}
       />,
-      options.rootElement
+      options.rootElement,
     );
   }
 }

package/components/NotificationBanner/CollapsedView.js

@@ -5,7 +5,7 @@ import { BellOutline } from '../../lib/SvgComponents.jsx';
 const CollapsedView = forwardRef(
   (
     { expandNotification, label },
-    { collapsedWrapperRef, collapsedBannerRef }
+    { collapsedWrapperRef, collapsedBannerRef },
   ) => {
     return (
       <div
@@ -26,7 +26,7 @@ const CollapsedView = forwardRef(
         </button>
       </div>
     );
-  }
+  },
 );
 
 CollapsedView.displayName = 'CollapsedView';

package/components/NotificationBanner/index.js

@@ -78,7 +78,7 @@ const NotificationBanner = ({ result }) => {
         : collapsedBannerRef.current.setAttribute('tabIndex', ' ');
 
       setHeight(
-        expanded ? '100%' : `${collapsedWrapperRef.current.offsetHeight}px`
+        expanded ? '100%' : `${collapsedWrapperRef.current.offsetHeight}px`,
       );
     }
   };
@@ -112,7 +112,7 @@ const NotificationBanner = ({ result }) => {
             ...storageNotification.content,
             dateDismissed,
           },
-        })
+        }),
       );
     } else {
       window.localStorage.setItem(
@@ -123,7 +123,7 @@ const NotificationBanner = ({ result }) => {
             name: 'header-notification',
             dateDismissed,
           },
-        })
+        }),
       );
     }
   };

package/components/SessionDialog/sessionDialog.js

@@ -20,7 +20,7 @@ export default class SessionDialog {
         warningTimeout={options.warningTimeout}
         appElement={options.appElement}
       />,
-      options.rootElement
+      options.rootElement,
     );
   }
 }

package/components/SideNav/Chart/ScoreChart.jsx

@@ -54,7 +54,7 @@ const ScoreChart = ({ performanceYear, chartData, linkCallback }) => {
 
     // Removing invalid categories
     const categories = chartData.categories.filter(
-      ({ maxContribution }) => !!maxContribution
+      ({ maxContribution }) => !!maxContribution,
     );
 
     // Calculating the sum of valid categories in order to calculate ratios

package/components/SideNav/Content/SelectRole/index.js

@@ -26,7 +26,7 @@ const SelectRole = ({ selectedRole, setSelectedRole }) => {
     e.preventDefault();
     const dropdownValue = e.target.value;
     const newRoleSelected = ROLE_OPTIONS.filter(
-      (opt) => opt.value === dropdownValue
+      (opt) => opt.value === dropdownValue,
     )[0].value;
     // Update localStorage with the new role selected
     updateLocalStorageRoleState(newRoleSelected);

package/components/SideNav/Links/NavLinkDrawer.jsx

@@ -101,7 +101,7 @@ const NavLinkDrawer = ({
   // Classes for the link drawer button
   const currentPage = isCurrentPage(
     { items, listOfLinks, url },
-    linkActiveFunc
+    linkActiveFunc,
   );
   const expandedClass = currentPage ? 'expanded' : '';
 
@@ -223,10 +223,10 @@ const NavLinkDrawer = ({
             ? { disabled: isAlwaysOpen || disabled }
             : {})}
           className={`${className} ${expandedClass} ${highlightTitle(
-            isHighlighted
+            isHighlighted,
           )} ${hasDarkerTitle(darkerBackground)}
           ${currentPage ? 'currentPage' : ''} ${isLeftBorderHighlightDisabled(
-            leftBorderHighlightDisabled
+            leftBorderHighlightDisabled,
           )}
           ${isLabelSectionHidden(hideLabelSection)}
           ${isHiddenWhileCollapsed(leftBorderHighlightDisabled, isExpanded)}`}
@@ -253,14 +253,14 @@ const NavLinkDrawer = ({
           className={`${currentPage ? 'currentPage' : ''} ${
             isOpen && !disabled ? 'drawer open' : 'drawer'
           } ${hasDarkerBackground(
-            darkerBackground
+            darkerBackground,
           )} ${hasLargerDrawBottomPadding(largerDrawerBottomPadding)}`}
         >
           <ul aria-hidden={!isOpen}>
             {listOfLinks &&
               renderDrawerLinksRecursively(
                 listOfLinks,
-                `parent-link ${adjustItemSpacing(largerDrawerBottomPadding)}`
+                `parent-link ${adjustItemSpacing(largerDrawerBottomPadding)}`,
               )}
           </ul>
         </div>

package/components/SideNav/UI/SideNavUI.jsx

@@ -26,17 +26,21 @@ const SideNavUI = ({
   onExpanded,
   performanceYear,
 }) => {
-  // Use localStorage value to set init state, default to true
-  const [isExpandedState, setIsExpandedState] = useState(
-    sideNavExpandedStorage.setDefault()
-  );
+  const [isExpandedState, setIsExpandedState] = useState(true);
   const [sideNavContent, setSideNavContent] = useState({});
 
   const collapseRef = useRef(null);
 
+  const changeExpandedClass = (currentClass, newClass) => {
+    document
+      .querySelectorAll(`.${currentClass}`)
+      .forEach((e) => e.classList.replace(currentClass, newClass));
+  };
+
   const expand = () => {
     sideNavExpandedStorage.toggle();
     setIsExpandedState(true);
+    changeExpandedClass('animation-group-exit', 'animation-group-enter');
     if (onExpanded) {
       onExpanded();
     }
@@ -45,6 +49,7 @@ const SideNavUI = ({
   const collapse = () => {
     sideNavExpandedStorage.toggle();
     setIsExpandedState(false);
+    changeExpandedClass('animation-group-enter', 'animation-group-exit');
     if (onCollapsed) {
       onCollapsed();
     }
@@ -112,7 +117,7 @@ const SideNavUI = ({
           container: getDynamicContent(
             item.items,
             item.className,
-            containerRecursionId + 1
+            containerRecursionId + 1,
           ),
           linkBack: (
             <AnimationGroup display={isExpandedState} key={key}>
@@ -261,7 +266,7 @@ const SideNavUI = ({
   ) : (
     getDynamicContent(
       items,
-      'sidebar-content' + (isAltStyle ? ' alt-style' : '')
+      'sidebar-content' + (isAltStyle ? ' alt-style' : ''),
     )
   );
 

package/components/SideNav/helpers.js

@@ -119,7 +119,7 @@ const replaceDefaultContentMgrLinks = (defaultContent) => {
     ...defaultContent,
     contentManager: [
       defaultContent.contentManager.find(
-        (obj) => obj.label === 'Dashboard Home'
+        (obj) => obj.label === 'Dashboard Home',
       ),
       {
         url: `${host}.qpp.cms.gov/cm/`,
@@ -316,14 +316,14 @@ const getUrlConditionMap = (userPermissions) => {
     [facilityBasedPreviewBaseUrl]: userPermissions.hasAuthorizations,
     '/user/helpdesk-viewing-tool': userPermissions.canImpersonate,
     '/reviewer/exception': userPermissions.internalReviewerNames?.includes(
-      'QPP Targeted Review & Exceptions'
+      'QPP Targeted Review & Exceptions',
     ),
     '/reviewer/targeted-review':
       userPermissions.internalReviewerNames?.includes(
-        'QPP Targeted Review & Exceptions'
+        'QPP Targeted Review & Exceptions',
       ),
     '/self-nomination': userPermissions.internalReviewerNames?.includes(
-      'QPP Self-Nomination'
+      'QPP Self-Nomination',
     ),
 
     '/case-management': userPermissions.internalReviewerNames?.some((val) =>
@@ -331,7 +331,7 @@ const getUrlConditionMap = (userPermissions) => {
         'QPP Case Management - PIMMS Reviewer',
         'QPP Case Management - ACO PAC Reviewer',
         'QPP Case Management - CMS Reviewer',
-      ].includes(val)
+      ].includes(val),
     ),
 
     // dev pre
@@ -361,7 +361,7 @@ const sideNavExpandedStorage = {
   },
   toggle: function () {
     const isSideNavExpanded = JSON.parse(
-      localStorage.getItem('qpp_side_nav_expanded')
+      localStorage.getItem('qpp_side_nav_expanded'),
     );
     if (!isSideNavExpanded) {
       localStorage.setItem('qpp_side_nav_expanded', true);
@@ -375,13 +375,6 @@ const sideNavExpandedStorage = {
   remove: function () {
     localStorage.removeItem('qpp_side_nav_expanded');
   },
-  setDefault: function () {
-    let defaultValue = true;
-    if (!this.isNullOrUndefined()) {
-      defaultValue = this.get();
-    }
-    return defaultValue;
-  },
 };
 
 module.exports = {

package/components/SideNav/index.js

@@ -42,7 +42,7 @@ const SideNav = (options = {}) => {
       showReportsPortal={showReportsPortal}
       showTargetedReviewLink={showTargetedReviewLink}
     />,
-    rootElement
+    rootElement,
   );
 
   return { expand, collapse };