From 49f4505a5ca2f0ce210a2ff8bdc0dd68799ce61a Mon Sep 17 00:00:00 2001
From: Maina Wycliffe <wmmaina7@gmail.com>
Date: Wed, 20 Sep 2023 22:51:48 +0300
Subject: [PATCH] fix: transition as breaking modal scrolls and sizing

---
 .eslintrc.js                                  |   7 +-
 .../Kratos/KratosUserProfileDropdown.tsx      |   2 +
 src/components/CollapsiblePanel/index.tsx     |   6 +-
 src/components/Dropdown/SubtleDropdown.tsx    |   2 +-
 src/components/Dropdown/index.tsx             | 120 +++++++++---------
 src/components/DropdownMenu/index.tsx         |   2 +
 src/components/Menu/index.tsx                 |   3 +-
 src/components/Modal/index.tsx                |   2 +
 src/components/QueryBuilder/index.tsx         |   2 +
 src/components/RefreshDropdown/index.tsx      |   1 +
 10 files changed, 84 insertions(+), 63 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 1b0062ccf..a3cdeef00 100644
--- 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
index 0cc8f2796..73794c734 100644
--- 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
index d0c434f60..3128be510 100644
--- 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
index 93e522082..158d2a627 100644
--- 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
index 87ea7b55f..1a5895fe0 100644
--- 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
index 4148493d4..3913d0fef 100644
--- 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
index 3f878f02a..aa397f9aa 100644
--- 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
index 5f39a55ae..a0e6b28da 100644
--- 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
index 66fbe8d38..65bf12ccd 100644
--- 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
index 68a40d58a..5c5884e92 100644
--- 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"