qpp-style 9.45.8 → 9.45.10

package/.babelrc

@@ -1,4 +1,11 @@
 {
-  "presets": ["@babel/preset-react", "@babel/preset-env"],
+  "presets": [
+    [
+      "@babel/preset-react",
+      {
+        "runtime": "automatic"
+      }
+    ]
+  ],
   "plugins": ["transform-es2015-modules-umd"]
 }

package/.husky/pre-push

@@ -0,0 +1,2 @@
+cd react
+npm run prepush

package/components/Accordion/index.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect } from "react";
+import { useState, useRef, useEffect } from "react";
 import PropTypes from "prop-types";
 import { Chevron } from "../../lib/Chevron.jsx";
 

package/components/Button/index.js

@@ -1,4 +1,3 @@
-import React from "react";
 import PropTypes from "prop-types";
 
 const VARIANTS = ["secondary", "outline", "danger", "white"];

package/components/Dropdown/index.js

@@ -1,4 +1,3 @@
-import React from "react";
 import PropTypes from "prop-types";
 
 const Dropdown = ({

package/components/Error/Collapsible.jsx

@@ -1,4 +1,4 @@
-import React, { Component } from "react";
+import { Component } from "react";
 import PropTypes from "prop-types";
 
 class Collapsible extends Component {

package/components/Error/ErrorUI.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 import Collapsible from "./Collapsible";
 import PropTypes from "prop-types";
 

package/components/Error/error.js

@@ -1,5 +1,4 @@
-import React from "react";
-import { render } from "react-dom";
+import { createRoot } from "react-dom/client";
 import ErrorUI from "./ErrorUI";
 
 /**
@@ -14,13 +13,13 @@ export default class ErrorPage {
    * @param {HTMLElement} options.rootElement - Elem inside which to render
    */
   constructor(options) {
-    render(
+    const root = createRoot(options.rootElement);
+    root.render(
       <ErrorUI
         type={options.type}
         code={options.code}
         message={options.message}
       />,
-      options.rootElement,
     );
   }
 }

package/components/Footer/DevPreFooter.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 import InfoTip from "../Infotip/Infotip";
 import Subscribe from "./Subscribe";
 import SocialLinks from "./SocialLinks";

package/components/Footer/FooterTooltip.jsx

@@ -1,5 +1,5 @@
 /* eslint-disable react/prop-types */
-import React, { useState } from "react";
+import { useState } from "react";
 
 export default function FooterTooltip({ triggerContent, tooltipContent }) {
   const [isHidden, setIsHidden] = useState(true);

package/components/Footer/FooterUI.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 import Subscribe from "./Subscribe";
 import SocialLinks from "./SocialLinks";
 import pjson from "../../package.json";

package/components/Footer/SocialLinks.jsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 const SocialLinks = () => (
   <div className="social-container">
     <a

package/components/Footer/Subscribe.jsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 const Subscribe = () => (
   <div className="subscriber-form">
     <form

package/components/Footer/footer.js

@@ -1,5 +1,4 @@
-import React from "react";
-import { render } from "react-dom";
+import { createRoot } from "react-dom/client";
 import FooterUI from "./FooterUI";
 
 /**
@@ -12,9 +11,11 @@ export default class Footer {
    */
   constructor(options) {
     if ("rootElement" in options) {
-      render(<FooterUI />, options.rootElement);
+      const root = createRoot(options.rootElement);
+      root.render(<FooterUI />);
     } else {
-      render(<FooterUI />, options);
+      const root = createRoot(options);
+      root.render(<FooterUI />);
     }
   }
 }

package/components/GovBanner/index.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState } from "react";
 
 const GovBanner = () => {
   const [hideContent, setHideContent] = useState(true);

package/components/Header/HeaderAccountMenu.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 import PropTypes from "prop-types";
 import { useHeaderState } from "./hooks";
 import { setUtagLink } from "./utag-helpers";

package/components/Header/HeaderCancel.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 import PropTypes from "prop-types";
 
 const HeaderCancel = ({ handleCancel }) => {

package/components/Header/HeaderContainer.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 import PropTypes from "prop-types";
 
 import HeaderLogo from "./HeaderLogo";

package/components/Header/HeaderLogo.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 import PropTypes from "prop-types";
 
 import { useHeaderState } from "./hooks";

package/components/Header/HeaderMenuButton.js

@@ -1,4 +1,3 @@
-import React from "react";
 import PropTypes from "prop-types";
 
 import { useHeaderState } from "./hooks";

package/components/Header/HeaderMenuItem.jsx

@@ -1,4 +1,4 @@
-import React, { Fragment, useRef, useEffect, useState } from "react";
+import { Fragment, useRef, useEffect, useState } from "react";
 import PropTypes from "prop-types";
 
 import { useWindowWidth, useHeaderState } from "./hooks";

package/components/Header/HeaderMenuLink.js

@@ -1,4 +1,3 @@
-import React from "react";
 import PropTypes from "prop-types";
 import { useHeaderState } from "./hooks";
 import { setUtagLink } from "./utag-helpers";

package/components/Header/HeaderMenuSignOutButton.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import PropTypes from "prop-types";
 
 import { LogoutSession } from "../../session";

package/components/Header/HeaderMobileButton.js

@@ -1,4 +1,3 @@
-import React from "react";
 import PropTypes from "prop-types";
 import { CloseXIcon } from "../../lib/SvgComponents.jsx";
 

package/components/Header/HeaderUI.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
 import PropTypes from "prop-types";
 import HeaderAccountMenu from "./HeaderAccountMenu.jsx";
 import HeaderCancel from "./HeaderCancel.jsx";

package/components/Header/HelpIcon.jsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 const HelpIcon = () => (
   <a
     className="header-help"

package/components/Header/ImpersonatorBanner.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { parse } from "cookie";
 import { CloseIcon } from "../../lib/SvgComponents";
 import { TextButton } from "../Button";

package/components/Header/NavigationButtonIcon.jsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 const NavigationButtonIcon = () => (
   <svg
     className="btn-navigation-icon"

package/components/Header/PreviewBanner.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { parse } from "cookie";
 import { TextButton } from "../Button";
 import { CloseIcon } from "../../lib/SvgComponents";

package/components/Header/header.js

@@ -1,5 +1,4 @@
-import React from "react";
-import { render } from "react-dom";
+import { createRoot } from "react-dom/client";
 import HeaderUI from "./HeaderUI.jsx";
 
 /**
@@ -17,7 +16,8 @@ export default class Header {
    * @param {HTMLElement} options.rootElement - Elem inside which to render
    */
   constructor(options) {
-    render(
+    const root = createRoot(options.rootElement);
+    root.render(
       <HeaderUI
         isLoginEnabled={options.isLoginEnabled}
         skipToContentId={options.skipToContentId}
@@ -34,7 +34,6 @@ export default class Header {
         content={options.content}
         isIESupportPage={options.isIESupportPage}
       />,
-      options.rootElement,
     );
   }
 }

package/components/Header/hooks.js

@@ -1,4 +1,4 @@
-import React, { createContext, useState, useEffect, useContext } from "react";
+import { createContext, useState, useEffect, useContext } from "react";
 import PropTypes from "prop-types";
 
 export function useWindowWidth() {

package/components/HeaderSearchBar/index.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState } from "react";
 
 const HeaderSearchBar = () => {
   const [inputValue, setInputValue] = useState("");

package/components/Infotip/Infotip.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 import PropTypes from "prop-types";
 import InfotipContent from "./InfotipContent";
 import InfotipIcon from "./InfotipIcon";

package/components/Infotip/InfotipContent.jsx

@@ -1,18 +1,10 @@
-import React from "react";
 import PropTypes from "prop-types";
-import {
-  Tooltip as TooltipAriaKit,
-  TooltipAnchor,
-  TooltipArrow,
-  useTooltipState,
-} from "ariakit/tooltip";
+import * as AriaKit from "@ariakit/react";
 
 const TEXT_COLOR = "#FFF";
 const BACKGROUND_COLOR = "#333";
 
 const InfotipContent = ({ children, label, ...rest }) => {
-  const tooltip = useTooltipState();
-
   const cssStyles = {
     maxWidth: "300px",
     padding: "8px",
@@ -22,12 +14,13 @@ const InfotipContent = ({ children, label, ...rest }) => {
     color: TEXT_COLOR,
   };
   return (
-    <>
-      <TooltipAnchor as={"span"} state={tooltip} className="tooltip-anchor">
-        {children}
-      </TooltipAnchor>
-      <TooltipAriaKit
-        state={tooltip}
+    <AriaKit.TooltipProvider>
+      <AriaKit.TooltipAnchor
+        as={"span"}
+        className="tooltip-anchor"
+        render={children}
+      />
+      <AriaKit.Tooltip
         id={undefined}
         ariaLabelledBy={undefined}
         className="tooltip-content"
@@ -35,9 +28,8 @@ const InfotipContent = ({ children, label, ...rest }) => {
         {...rest}
       >
         {label}
-        <TooltipArrow />
-      </TooltipAriaKit>
-    </>
+      </AriaKit.Tooltip>
+    </AriaKit.TooltipProvider>
   );
 };
 

package/components/Infotip/InfotipIcon.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 import PropTypes from "prop-types";
 
 const InfotipIcon = ({ lightIcon = false, ...props }) => (

package/components/Modal/LegacyModal.jsx

@@ -1,5 +1,5 @@
-import React, { Component } from "react";
-import { render } from "react-dom";
+import { Component } from "react";
+import { createRoot } from "react-dom/client";
 import ReactModal from "react-modal";
 import { CloseXIcon } from "../../lib/SvgComponents.jsx";
 import SanitizedContent from "../SanitizedContent";
@@ -61,7 +61,8 @@ class Modal extends Component {
 }
 
 const displayModal = ({ content, main }) => {
-  render(<Modal content={content} showModal={true} />, main);
+  const root = createRoot(document.getElementById("root"));
+  root.render(<Modal content={content} showModal={true} />, main);
 };
 
 Modal.propTypes = {

package/components/Modal/Modal.jsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState, useEffect } from "react";
+import { useRef, useState, useEffect } from "react";
 import ReactModal from "react-modal";
 import PropTypes from "prop-types";
 

package/components/Modal/index.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 import PropTypes from "prop-types";
 
 import LegacyModal from "./LegacyModal";

package/components/NotificationBanner/CollapsedView.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from "react";
+import { forwardRef } from "react";
 import PropTypes from "prop-types";
 import { BellOutline } from "../../lib/SvgComponents.jsx";
 

package/components/NotificationBanner/ExpandedView.js

@@ -1,4 +1,3 @@
-import React from "react";
 import PropTypes from "prop-types";
 import SanitizedContent from "../SanitizedContent";
 import { CloseXIcon } from "../../lib/SvgComponents.jsx";

package/components/NotificationBanner/index.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from "react";
+import { useState, useEffect, useRef } from "react";
 import PropTypes from "prop-types";
 import ExpandedView from "./ExpandedView";
 import CollapsedView from "./CollapsedView";

package/components/SanitizedContent/index.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 import xss from "xss";
 import PropTypes from "prop-types";
 

package/components/Session/Session.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { parse } from "cookie";
 import Modal from "../Modal";
 import { fetchTtl } from "../../session";

package/components/Session/SessionDialogWrapped.jsx

@@ -1,5 +1,4 @@
-import React from "react";
-import { render } from "react-dom";
+import { createRoot } from "react-dom/client";
 import SessionDialogUI from "../Session";
 
 /**
@@ -7,6 +6,7 @@ import SessionDialogUI from "../Session";
  */
 export default class SessionDialog {
   constructor(options) {
-    render(<SessionDialogUI />, options.rootElement);
+    const root = createRoot(options.rootElement);
+    root.render(<SessionDialogUI />);
   }
 }

package/components/SideNav/AnimationGroup/AnimationGroup.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 import PropTypes from "prop-types";
 
 const hasDarkerBackground = (darkerBackground) => {

package/components/SideNav/Content/LevelOneContent.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import PropTypes from "prop-types";
 import { parse } from "cookie";
 import { jwtDecode } from "jwt-decode";

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

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import PropTypes from "prop-types";
 import { parse } from "cookie";
 import Dropdown from "../../../Dropdown";

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

@@ -23,6 +23,7 @@ const cmsRoles = [
   "QPP Content Management - Author",
   "QPP Content Management - Approver",
   "QPP Content Management - Admin",
+  "QPP Content Management - Previewer",
   "QPP Front-end - Author",
 ];
 

package/components/SideNav/Details/IndividualDetails.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 import PropTypes from "prop-types";
 
 const IndividualDetails = ({ individualName, individualNpi }) => {

package/components/SideNav/Details/PracticeDetails.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 import PropTypes from "prop-types";
 
 const PracticeDetails = ({

package/components/SideNav/Links/CmsSwitchLink.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 import PropTypes from "prop-types";
 import { handleNavigation } from "../helpers";
 import { SwitchPractice, ChevronRight } from "../../../lib/SvgComponents.jsx";

package/components/SideNav/Links/NavItemInline.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 import AnimationGroup from "../AnimationGroup/AnimationGroup";
 import PropTypes from "prop-types";
 

package/components/SideNav/Links/NavLinkContainer.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { cloneElement, useState } from "react";
 import PropTypes from "prop-types";
 
 const NavLinkContainer = ({ listOfLinks, linkActiveFunc }) => {
@@ -17,7 +17,7 @@ const NavLinkContainer = ({ listOfLinks, linkActiveFunc }) => {
             key={idx.toString()}
             onClick={() => toggleActive(idx, link.props.disabled)}
           >
-            {React.cloneElement(link, { isActive: activeLink === idx })}
+            {cloneElement(link, { isActive: activeLink === idx })}
           </li>
         ))}
       </ul>

package/components/SideNav/Links/NavLinkDrawer.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
 import PropTypes from "prop-types";
 
 import { handleNavigation } from "../helpers";

package/components/SideNav/Links/NavLinkInline.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useRef, useEffect, Fragment, useState } from "react";
 import { handleNavigation } from "../helpers";
 import AnimationGroup from "../AnimationGroup/AnimationGroup";
 import PropTypes from "prop-types";
@@ -20,11 +20,11 @@ const NavLinkInline = ({
   const urlRegExp = new RegExp(`${localUrl}/?$`);
   const path = window.location.href && window.location.href.split("?")[0];
   const currentPage = path && path.match(urlRegExp);
-  const svgRef = React.useRef();
+  const svgRef = useRef();
   const [showTooltip, setShowTooltip] = useState(false);
-  const tooltipRef = React.useRef();
+  const tooltipRef = useRef();
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (!showLabel && svgRef.current) {
       const existingMouseenter = svgRef.current.onmouseover;
       const existingMouseout = svgRef.current.onmouseout;
@@ -56,7 +56,7 @@ const NavLinkInline = ({
   }, [svgRef.current, showLabel]);
 
   return (
-    <React.Fragment>
+    <Fragment>
       <a
         href={disabled ? undefined : url}
         onClick={(e) => handleNavigation(e, linkCallback, label)}
@@ -90,7 +90,7 @@ const NavLinkInline = ({
           <span className="sidebar-tooltip-text">{label}</span>
         </div>
       )}
-    </React.Fragment>
+    </Fragment>
   );
 };
 

package/components/SideNav/Links/NavLinkToggle.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 import PropTypes from "prop-types";
 import { NavCollapse, NavExpand } from "../../../lib/SvgComponents";
 

package/components/SideNav/UI/DynamicContent.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 import PropTypes from "prop-types";
 
 import { NavLinkContainer, NavLinkInline, NavLinkDrawer } from "../Links";

package/components/SideNav/UI/SideNavUI.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect } from "react";
+import { useState, useRef, useEffect } from "react";
 import PropTypes from "prop-types";
 
 import { setSideNavExpanded, isSideNavExpanded } from "../helpers";

package/components/SideNav/index.js

@@ -1,5 +1,4 @@
-import React from "react";
-import { render } from "react-dom";
+import { createRoot } from "react-dom/client";
 import { SideNavUI } from "./UI";
 
 const SideNav = (options = {}) => {
@@ -13,7 +12,8 @@ const SideNav = (options = {}) => {
     rootElement,
   } = options;
 
-  return render(
+  const root = createRoot(rootElement);
+  return root.render(
     <SideNavUI
       onExpanded={onExpanded}
       onCollapsed={onCollapsed}
@@ -22,7 +22,6 @@ const SideNav = (options = {}) => {
       items={items}
       isAltStyle={isAltStyle}
     />,
-    rootElement,
   );
 };
 

package/components/Tabs/Tabs.js

@@ -1,13 +1,8 @@
-import React, { Children } from "react";
+import { Children } from "react";
 import PropTypes from "prop-types";
-import { TabList, Tab, TabPanel, useTabState } from "ariakit/tab";
+import * as AriaKit from "@ariakit/react";
 
 function Tabs({ defaultSelectedId, children, onChange, selected }) {
-  const tab = useTabState({
-    defaultSelectedId: selected ?? defaultSelectedId,
-    selectOnMove: false,
-  });
-
   const onTabClick = (tabHref, id) => {
     if (tabHref) {
       const currentUrl = new URL(window.location.href);
@@ -24,11 +19,11 @@ function Tabs({ defaultSelectedId, children, onChange, selected }) {
   };
 
   return (
-    <>
+    <AriaKit.TabProvider defaultSelectedId={selected ?? defaultSelectedId}>
       <div className="qpp-c-tabs qpp-c-tabs--mui">
-        <TabList state={tab} aria-label="qpp tabs">
+        <AriaKit.TabList aria-label="qpp tabs">
           {Children.map(children, (child) => (
-            <Tab
+            <AriaKit.Tab
               key={child.props.id}
               id={child.props.id}
               className="qpp-c-tabs__item"
@@ -36,24 +31,23 @@ function Tabs({ defaultSelectedId, children, onChange, selected }) {
               onClick={() => onTabClick(child.props.tabHref, child.props.id)}
             >
               {child.props.tab}
-            </Tab>
+            </AriaKit.Tab>
           ))}
-        </TabList>
+        </AriaKit.TabList>
       </div>
       <div className="qpp-c-tabs__panel">
         {Children.map(children, (child) => (
-          <TabPanel
+          <AriaKit.TabPanel
             key={child.props.id}
-            state={tab}
             tabId={child.props.id}
             className={child.props.className}
             disabled={child.props.disabled}
           >
             {child.props.children}
-          </TabPanel>
+          </AriaKit.TabPanel>
         ))}
       </div>
-    </>
+    </AriaKit.TabProvider>
   );
 }