Merge branch 'next-release/main' into 5d/update-pinpoint-config

Author: Di Wu

mdx-components.tsx

@@ -9,7 +9,7 @@ import { Block, BlockSwitcher } from './src/components/BlockSwitcher';
 import { Callout } from './src/components/Callout';
 import Fragments from './src/components/Fragments';
 import { MDXCode, MDXHeading, MDXLink } from './src/components/MDXComponents';
-import MigrationAlert from './src/components/MigrationAlert';
+import { MigrationAlert } from './src/components/MigrationAlert';
 import preToCodeBlock from './src/utils/pre-to-code-block';
 import { Overview } from './src/components/Overview';
 import ExternalLink from './src/components/ExternalLink';

src/components/GetStartedPopover/GetStartedPopover.tsx

@@ -16,6 +16,7 @@ import {
 } from '@/components/Icons';
 import { useClickOutside } from '@/utils/useClickOutside';
 import { DEFAULT_PLATFORM } from '@/data/platforms';
+import { useTabKeyDetection } from '@/utils/useTabKeyDetection';
 
 const getStartedHref = '/[platform]/start/getting-started/introduction/';
 
@@ -107,21 +108,32 @@ export const GetStartedPopover = () => {
     }
   });
 
+  const { isTabKeyPressed, setIsTabKeyPressed } =
+    useTabKeyDetection(contentRef);
+
   useEffect(() => {
     if (expanded) {
       contentRef?.current?.focus();
     }
   }, [expanded]);
 
-  const handleBlur = useCallback(
-    (e) => {
-      // Use relatedTarget to see if the target receiving focus is outside of the popover
-      if (contentRef.current && !contentRef.current.contains(e.relatedTarget)) {
+  const handleBlur = (e) => {
+    // Use relatedTarget to see if the target receiving focus is outside of the popover
+    if (
+      contentRef.current &&
+      !contentRef.current.contains(e.relatedTarget) &&
+      isTabKeyPressed
+    ) {
+      if (expanded) {
         setExpanded(false);
+
+        // Since the custom hook is only listening to the keydown and keyup
+        // event on the ref we pass in, the keyup event doesn't get registered
+        // when we lose focus and so the state isn't reset. Reset it here
+        setIsTabKeyPressed(false);
       }
-    },
-    [contentRef]
-  );
+    }
+  };
 
   return (
     <Flex className="split-button">

src/components/GlobalNav/components/icons/AmplifyLogo.tsx

@@ -11,8 +11,15 @@ export function AmplifyLogo({ isGen2 }: AmplifyLogoProps) {
       width="20px"
       height="20px"
       viewBox={{ width: 24, height: 22 }}
-      pathData="M20.6144 19L10.1205 1H13.5019L24 19H20.6144ZM7.80721 5.3588L15.4882 19H18.7952L9.45719 2.42859L7.80721 5.3588ZM4.89082 10.5419L0 19H13.8795L12.1271 15.9696H5.2705L8.70006 10.043L6.94038 7L4.89082 10.5419Z"
       color={isGen2 ? 'font.inverse' : 'brand.primary.60'}
+      paths={[
+        {
+          d: 'M14.3128 20.0394C14.3651 20.1298 14.4618 20.1855 14.5664 20.1855H16.8444C17.0698 20.1855 17.2107 19.942 17.098 19.7472L8.82308 5.44278C8.71037 5.24795 8.4286 5.24795 8.31589 5.44278L7.09981 7.54494C7.09518 7.55294 7.09518 7.56281 7.09981 7.57081L7.10128 7.57334C7.1106 7.58946 7.09894 7.60961 7.08029 7.60961C7.07163 7.60961 7.06363 7.61422 7.0593 7.62171L0.0396396 19.7616C-0.0730193 19.9565 0.0678714 20.2 0.293265 20.2H10.9633C11.1887 20.2 11.3296 19.9564 11.2169 19.7616L10.1254 17.8749C10.0731 17.7845 9.97646 17.7288 9.87184 17.7288H4.4145C4.3018 17.7288 4.23135 17.607 4.28771 17.5096L8.4417 10.3288C8.49805 10.2314 8.63894 10.2314 8.6953 10.3288L14.3128 20.0394Z'
+        },
+        {
+          d: 'M10.1282 2.30989C10.0759 2.40032 10.0759 2.51172 10.1282 2.60214L20.2155 20.0394C20.2678 20.1298 20.3645 20.1855 20.4691 20.1855H22.7412C22.9666 20.1855 23.1075 19.942 22.9948 19.7472L11.7715 0.346077C11.6588 0.151242 11.377 0.151243 11.2643 0.346077L10.1282 2.30989Z'
+        }
+      ]}
     />
   );
 }

src/components/MigrationAlert/MigrationAlert.tsx

@@ -0,0 +1,36 @@
+import { useState } from 'react';
+import { Callout } from '../Callout';
+import Link from 'next/link';
+import { useCurrentPlatform } from '@/utils/useCurrentPlatform';
+import { Platform } from '@/data/platforms';
+
+type MigrationAlert = {
+  isLegacy: boolean;
+  url: string;
+};
+
+export function MigrationAlert({ isLegacy, url }: MigrationAlert) {
+  const currentPlatform = useCurrentPlatform();
+
+  const alertText = isLegacy
+    ? 'You are currently viewing the legacy GraphQL Transformer documentation.'
+    : 'You are currently viewing the new GraphQL transformer v2 docs';
+
+  const alertCTA = isLegacy
+    ? 'View latest documentation'
+    : 'Looking for legacy docs?';
+
+  return (
+    <Callout warning={true}>
+      {alertText}{' '}
+      <Link
+        href={{
+          pathname: url,
+          query: { platform: currentPlatform }
+        }}
+      >
+        {alertCTA}
+      </Link>
+    </Callout>
+  );
+}

src/components/MigrationAlert/index.ts

@@ -0,0 +1 @@
+export { MigrationAlert } from './MigrationAlert';

src/components/MigrationAlert/index.tsx

@@ -7,6 +7,7 @@ import classNames from 'classnames';
 import { useClickOutside } from '@/utils/useClickOutside';
 import { VersionSwitcher } from '../VersionSwitcher';
 import { PLATFORM_VERSIONS, PLATFORM_DISPLAY_NAMES } from '@/data/platforms';
+import { useTabKeyDetection } from '@/utils/useTabKeyDetection';
 
 export function PlatformNavigator({ currentPlatform, isPrev }) {
   const [isOpen, setIsOpen] = useState<boolean>(false);
@@ -22,15 +23,26 @@ export function PlatformNavigator({ currentPlatform, isPrev }) {
     }
   });
 
-  const handleBlur = useCallback(
-    (e) => {
-      // Use relatedTarget to see if the target receiving focus is outside of the popover
-      if (contentRef.current && !contentRef.current.contains(e.relatedTarget)) {
+  const { isTabKeyPressed, setIsTabKeyPressed } =
+    useTabKeyDetection(contentRef);
+
+  const handleBlur = (e) => {
+    // Use relatedTarget to see if the target receiving focus is outside of the popover
+    if (
+      contentRef.current &&
+      !contentRef.current.contains(e.relatedTarget) &&
+      isTabKeyPressed
+    ) {
+      if (isOpen) {
         setIsOpen(false);
+
+        // Since the custom hook is only listening to the keydown and keyup
+        // event on the ref we pass in, the keyup event doesn't get registered
+        // when we lose focus and so the state isn't reset. Reset it here
+        setIsTabKeyPressed(false);
       }
-    },
-    [contentRef]
-  );
+    }
+  };
 
   useEffect(() => {
     if (isOpen) {
@@ -67,7 +79,13 @@ export function PlatformNavigator({ currentPlatform, isPrev }) {
             </Flex>
             <IconChevron className={isOpen ? '' : 'icon-rotate-90-reverse'} />
           </Button>
-          {PLATFORM_VERSIONS[currentPlatform] && <VersionSwitcher platform={currentPlatform} isPrev={isPrev} flex="1 1 0" />}
+          {PLATFORM_VERSIONS[currentPlatform] && (
+            <VersionSwitcher
+              platform={currentPlatform}
+              isPrev={isPrev}
+              flex="1 1 0"
+            />
+          )}
         </Flex>
         <View
           className={classNames('popover', {