added dismissable layer and upgraded radix packages

fern-api · Oct 3, 2024 · c20e46f · c20e46f
1 parent 8b83cf9
commit c20e46f
Show file tree

Hide file tree

Showing 3 changed files with 7,210 additions and 1,722 deletions.
diff --git a/packages/ui/app/package.json b/packages/ui/app/package.json
@@ -47,14 +47,16 @@
     "@inkeep/widgets": "^0.2.288",
     "@next/third-parties": "14.2.9",
     "@radix-ui/colors": "^3.0.0",
-    "@radix-ui/react-accordion": "^1.1.2",
-    "@radix-ui/react-collapsible": "^1.1.0",
-    "@radix-ui/react-dialog": "^1.1.1",
-    "@radix-ui/react-popover": "^1.1.1",
-    "@radix-ui/react-select": "^2.0.0",
+    "@radix-ui/react-accordion": "^1.2.1",
+    "@radix-ui/react-collapsible": "^1.1.1",
+    "@radix-ui/react-dialog": "^1.1.2",
+    "@radix-ui/react-dismissable-layer": "^1.1.1",
+    "@radix-ui/react-focus-scope": "^1.1.0",
+    "@radix-ui/react-popover": "^1.1.2",
+    "@radix-ui/react-select": "^2.1.2",
     "@radix-ui/react-separator": "^1.1.0",
-    "@radix-ui/react-tabs": "^1.1.0",
-    "@radix-ui/react-tooltip": "^1.1.2",
+    "@radix-ui/react-tabs": "^1.1.1",
+    "@radix-ui/react-tooltip": "^1.1.3",
     "@radix-ui/react-visually-hidden": "^1.1.0",
     "@segment/snippet": "^5.2.1",
     "@sentry/nextjs": "^8.30.0",

diff --git a/packages/ui/app/src/components/MaybeEnvironmentDropdown.tsx b/packages/ui/app/src/components/MaybeEnvironmentDropdown.tsx
@@ -1,6 +1,8 @@
 import type { APIV1Read } from "@fern-api/fdr-sdk/client/types";
 import { FernButton, FernDropdown, FernInput } from "@fern-ui/components";
 import { useBooleanState } from "@fern-ui/react-commons";
+import { DismissableLayer } from "@radix-ui/react-dismissable-layer";
+import { FocusScope } from "@radix-ui/react-focus-scope";
 import cn from "clsx";
 import { useAtom } from "jotai";
 import { ReactElement, useEffect, useState } from "react";
@@ -65,58 +67,70 @@ export function MaybeEnvironmentDropdown({
         <>
             {isEditingEnvironment.value ? (
                 <span key="url" className="inline-flex whitespace-nowrap max-sm:hidden font-mono">
-                    <FernInput
-                        autoFocus={isEditingEnvironment.value}
-                        size={inputValue?.length ?? 0}
-                        placeholder={inputValue}
-                        value={inputValue}
-                        onClick={(e) => {
+                    <DismissableLayer
+                        onEscapeKeyDown={(e) => {
+                            setInputValue(initialState);
+                            setPlaygroundEnvironment(initialState);
+                            isEditingEnvironment.setFalse();
                             e.stopPropagation();
+                            e.preventDefault();
                         }}
-                        onBlur={(e) => {
-                            if (isValidInput) {
-                                if (playgroundEnvironment) {
-                                    setInputValue(playgroundEnvironment);
-                                }
-                                isEditingEnvironment.setFalse();
-                            } else {
-                                e.preventDefault();
-                                e.stopPropagation();
-                                setInputValue(initialState);
-                                setPlaygroundEnvironment(initialState);
-                                isEditingEnvironment.setFalse();
-                            }
-                        }}
-                        onValueChange={(value) => {
-                            if (
-                                value === "" ||
-                                value == null ||
-                                parse(value).host == null ||
-                                parse(value).protocol == null
-                            ) {
-                                setInputValue(value);
-                            } else {
-                                setInputValue(value);
-                                setPlaygroundEnvironment(value);
-                            }
-                        }}
-                        onKeyDownCapture={(e) => {
-                            if (e.key === "Enter" && isValidInput) {
-                                if (playgroundEnvironment) {
-                                    setInputValue(playgroundEnvironment);
-                                }
-                                isEditingEnvironment.setFalse();
-                            } else if (e.key === "Escape") {
-                                e.preventDefault();
-                                e.stopPropagation();
-                                setInputValue(initialState);
-                                setPlaygroundEnvironment(initialState);
-                                isEditingEnvironment.setFalse();
-                            }
-                        }}
-                        className={cn("p-0", isValidInput ? "" : "error", "h-auto", "flex flex-col")}
-                        inputClassName={cn("px-1", "py-0.5", "h-auto", "font-mono", small ? "text-xs" : "text-sm")}
-                    />
+                    >
+                        <FocusScope trapped>
+                            <FernInput
+                                autoFocus={isEditingEnvironment.value}
+                                size={inputValue?.length ?? 0}
+                                placeholder={inputValue}
+                                value={inputValue}
+                                onClick={(e) => {
+                                    e.stopPropagation();
+                                }}
+                                onBlur={(e) => {
+                                    if (isValidInput) {
+                                        if (playgroundEnvironment) {
+                                            setInputValue(playgroundEnvironment);
+                                        }
+                                        isEditingEnvironment.setFalse();
+                                    } else {
+                                        e.preventDefault();
+                                        e.stopPropagation();
+                                        setInputValue(initialState);
+                                        setPlaygroundEnvironment(initialState);
+                                        isEditingEnvironment.setFalse();
+                                    }
+                                }}
+                                onValueChange={(value) => {
+                                    if (
+                                        value === "" ||
+                                        value == null ||
+                                        parse(value).host == null ||
+                                        parse(value).protocol == null
+                                    ) {
+                                        setInputValue(value);
+                                    } else {
+                                        setInputValue(value);
+                                        setPlaygroundEnvironment(value);
+                                    }
+                                }}
+                                onKeyDownCapture={(e) => {
+                                    if (e.key === "Enter" && isValidInput) {
+                                        if (playgroundEnvironment) {
+                                            setInputValue(playgroundEnvironment);
+                                        }
+                                        isEditingEnvironment.setFalse();
+                                    }
+                                }}
+                                className={cn("p-0", isValidInput ? "" : "error", "h-auto", "flex flex-col")}
+                                inputClassName={cn(
+                                    "px-1",
+                                    "py-0.5",
+                                    "h-auto",
+                                    "font-mono",
+                                    small ? "text-xs" : "text-sm",
+                                )}
+                            />
+                        </FocusScope>
+                    </DismissableLayer>
                 </span>
             ) : (
                 <>