Merge pull request #1413 from flanksource/fix-transition-issues-affec…

…ting-modals Fix Transition Issues Impacting Modal Body Scroll
flanksource · Sep 21, 2023 · eadb799 · eadb799
2 parents a6fe0da + 49f4505
commit eadb799
Show file tree

Hide file tree

Showing 10 changed files with 84 additions and 63 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -7,7 +7,12 @@ module.exports = {
     node: true,
     mocha: true
   },
-  extends: ["react-app", "react-app/jest", "plugin:storybook/recommended", "plugin:jest-dom/recommended",],
+  extends: [
+    "react-app",
+    "react-app/jest",
+    "plugin:storybook/recommended",
+    "plugin:jest-dom/recommended"
+  ],
   rules: {
     "react/function-component-definition": [
       2,

diff --git a/src/components/Authentication/Kratos/KratosUserProfileDropdown.tsx b/src/components/Authentication/Kratos/KratosUserProfileDropdown.tsx
@@ -4,6 +4,7 @@ import { useUser } from "../../../context";
 import { ClickableSvg } from "../../ClickableSvg/ClickableSvg";
 import { VersionInfo } from "../../VersionInfo/VersionInfo";
 import KratosLogoutButton from "./KratosLogoutButton";
+import { Fragment } from "react";
 
 export function KratosUserProfileDropdown() {
   const { user } = useUser();
@@ -29,6 +30,7 @@ export function KratosUserProfileDropdown() {
       </div>
       {/* @ts-ignore */}
       <Transition
+        as={Fragment as any}
         enter="transition ease-out duration-100"
         enterFrom="transform opacity-0 scale-95"
         enterTo="transform opacity-100 scale-100"

diff --git a/src/components/CollapsiblePanel/index.tsx b/src/components/CollapsiblePanel/index.tsx
@@ -1,5 +1,5 @@
 import clsx from "clsx";
-import { useEffect, useState } from "react";
+import { Fragment, useEffect, useState } from "react";
 import { IoChevronUpOutline } from "react-icons/io5";
 import { ClickableSvg } from "../ClickableSvg/ClickableSvg";
 import { Transition } from "@headlessui/react";
@@ -61,8 +61,10 @@ export default function CollapsiblePanel({
           </ClickableSvg>
         </div>
       </div>
-      {/* @ts-expect-error */}
+
+      {/* @ts-ignore */}
       <Transition
+        as={Fragment as any}
         className={`flex-1 max-h-full flex flex-col ${childrenClassName}`}
         show={isOpen}
         enter="transition-opacity duration-75"

diff --git a/src/components/Dropdown/SubtleDropdown.tsx b/src/components/Dropdown/SubtleDropdown.tsx
@@ -102,7 +102,7 @@ export const DropdownListbox = ({
 
           <Transition
             show={open}
-            as={Fragment}
+            as={Fragment as any}
             leave="transition ease-in duration-100"
             leaveFrom="opacity-100"
             leaveTo="opacity-0"

diff --git a/src/components/Dropdown/index.tsx b/src/components/Dropdown/index.tsx
@@ -180,71 +180,75 @@ export function DropdownListbox({
 
             {/* @ts-ignore */}
             <Transition
+              as={Fragment as any}
               show={open}
               leave="transition ease-in duration-100"
               leaveFrom="opacity-100"
               leaveTo="opacity-0"
             >
-              <Listbox.Options className="absolute z-10 mt-1 w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm">
-                {Object.values(items)
-                  .sort((a, b) => {
-                    if (
-                      Object.prototype.hasOwnProperty.call(a, "order") &&
-                      Object.prototype.hasOwnProperty.call(b, "order")
-                    ) {
-                      return a.order - b.order;
-                    }
-                    if (Object.prototype.hasOwnProperty.call(a, "order")) {
-                      return -1;
-                    }
-                    if (Object.prototype.hasOwnProperty.call(b, "order")) {
-                      return 1;
-                    }
-                    return 0;
-                  })
-                  .map((item) => (
-                    <Listbox.Option
-                      key={item.id || item.value}
-                      className={({ active }) =>
-                        clsx(
-                          active ? "text-white bg-blue-600" : "text-gray-900",
-                          "cursor-pointer select-none relative py-2 pl-3 pr-9"
-                        )
+              {/* eslint-disable-next-line react/jsx-no-useless-fragment */}
+              <>
+                <Listbox.Options className="absolute z-10 mt-1 w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm">
+                  {Object.values(items)
+                    .sort((a, b) => {
+                      if (
+                        Object.prototype.hasOwnProperty.call(a, "order") &&
+                        Object.prototype.hasOwnProperty.call(b, "order")
+                      ) {
+                        return a.order - b.order;
                       }
-                      value={item.value}
-                    >
-                      {({ selected, active }) => (
-                        <>
-                          <div className="flex items-center">
-                            <div>{item.icon}</div>
-                            <span
-                              className={clsx(
-                                selected ? "font-semibold" : "font-normal",
-                                "ml-2 block truncate"
-                              )}
-                            >
-                              {item.description}
-                            </span>
-                          </div>
+                      if (Object.prototype.hasOwnProperty.call(a, "order")) {
+                        return -1;
+                      }
+                      if (Object.prototype.hasOwnProperty.call(b, "order")) {
+                        return 1;
+                      }
+                      return 0;
+                    })
+                    .map((item) => (
+                      <Listbox.Option
+                        key={item.id || item.value}
+                        className={({ active }) =>
+                          clsx(
+                            active ? "text-white bg-blue-600" : "text-gray-900",
+                            "cursor-pointer select-none relative py-2 pl-3 pr-9"
+                          )
+                        }
+                        value={item.value}
+                      >
+                        {({ selected, active }) => (
+                          <>
+                            <div className="flex items-center">
+                              <div>{item.icon}</div>
+                              <span
+                                className={clsx(
+                                  selected ? "font-semibold" : "font-normal",
+                                  "ml-2 block truncate"
+                                )}
+                              >
+                                {item.description}
+                              </span>
+                            </div>
 
-                          {!!selected && (
-                            <span
-                              className={clsx(
-                                active ? "text-white" : "text-blue-600",
-                                "absolute inset-y-0 right-0 flex items-center pr-4"
-                              )}
-                            >
-                              <CheckIcon
-                                className="h-5 w-5"
-                                aria-hidden="true"
-                              />
-                            </span>
-                          )}
-                        </>
-                      )}
-                    </Listbox.Option>
-                  ))}
-              </Listbox.Options>
+                            {!!selected && (
+                              <span
+                                className={clsx(
+                                  active ? "text-white" : "text-blue-600",
+                                  "absolute inset-y-0 right-0 flex items-center pr-4"
+                                )}
+                              >
+                                <CheckIcon
+                                  className="h-5 w-5"
+                                  aria-hidden="true"
+                                />
+                              </span>
+                            )}
+                          </>
+                        )}
+                      </Listbox.Option>
+                    ))}
+                </Listbox.Options>
+              </>
             </Transition>
           </div>
         </>

diff --git a/src/components/DropdownMenu/index.tsx b/src/components/DropdownMenu/index.tsx
@@ -1,4 +1,5 @@
 import { Menu, Transition } from "@headlessui/react";
+import { Fragment } from "react";
 
 type DropdownMenuProps = {
   buttonElement: JSX.Element;
@@ -24,6 +25,7 @@ export function DropdownMenu({
       <Menu.Button className={`${buttonClass}`}>{buttonElement}</Menu.Button>
       {/* @ts-ignore */}
       <Transition
+        as={Fragment as any}
         enter="transition ease-out duration-100"
         enterFrom="transform opacity-0 scale-95"
         enterTo="transform opacity-100 scale-100"

diff --git a/src/components/Menu/index.tsx b/src/components/Menu/index.tsx
@@ -1,7 +1,7 @@
 import { Menu as HLMenu, Transition } from "@headlessui/react";
 import { DotsVerticalIcon } from "@heroicons/react/outline";
 import clsx from "clsx";
-import React from "react";
+import React, { Fragment } from "react";
 import { $ElementProps } from "../../types/utility";
 
 type ItemProps = Partial<$ElementProps<typeof HLMenu.Item>>;
@@ -28,6 +28,7 @@ const Items = ({
 }: ItemsProps) => (
   /* @ts-ignore */
   <Transition
+    as={Fragment as any}
     enter="transition ease-out duration-100"
     enterFrom="transform opacity-0 scale-95"
     enterTo="transform opacity-100 scale-100"

diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx
@@ -61,6 +61,7 @@ export function Modal({
         >
           {/* @ts-ignore */}
           <Transition.Child
+            as={Fragment as any}
             enter="ease-out duration-300"
             enterFrom="opacity-0"
             enterTo="opacity-100"
@@ -72,6 +73,7 @@ export function Modal({
           </Transition.Child>
 
           <Transition.Child
+            as={Fragment as any}
             enter="ease-out duration-300"
             enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             enterTo="opacity-100 translate-y-0 sm:scale-100"

diff --git a/src/components/QueryBuilder/index.tsx b/src/components/QueryBuilder/index.tsx
@@ -2,6 +2,7 @@ import { Menu, Transition } from "@headlessui/react";
 import clsx from "clsx";
 import React, {
   ChangeEvent,
+  Fragment,
   memo,
   useCallback,
   useEffect,
@@ -318,6 +319,7 @@ function QueryBuilderActionMenu({
       </Menu.Button>
       {/* @ts-ignore */}
       <Transition
+        as={Fragment as any}
         enter="transition ease-out duration-100"
         enterFrom="transform opacity-0 scale-95"
         enterTo="transform opacity-100 scale-100"

diff --git a/src/components/RefreshDropdown/index.tsx b/src/components/RefreshDropdown/index.tsx
@@ -152,6 +152,7 @@ export default function RefreshDropdown({
           </Menu.Button>
           {/* @ts-ignore */}
           <Transition
+            as={Fragment as any}
             enter="transition ease-out duration-100"
             enterFrom="transform opacity-0 scale-95"
             enterTo="transform opacity-100 scale-100"