From 4eaa872a4a480b689a628caeda2a588f335293d5 Mon Sep 17 00:00:00 2001
From: Khavin Shankar <khavinshankar@gmail.com>
Date: Thu, 22 Aug 2024 13:52:26 +0530
Subject: [PATCH] removed transition for ListboxOptions

---
 .../e2e/facility_spec/facility_creation.cy.ts |   1 +
 src/Components/CameraFeed/AssetBedSelect.tsx  |  39 ++--
 src/Components/Form/MultiSelectMenuV2.tsx     | 171 +++++++++---------
 src/Components/Form/SelectMenuV2.tsx          | 154 ++++++++--------
 4 files changed, 173 insertions(+), 192 deletions(-)

diff --git a/cypress/e2e/facility_spec/facility_creation.cy.ts b/cypress/e2e/facility_spec/facility_creation.cy.ts
index 6401ba7bbbe..a092d23390e 100644
--- a/cypress/e2e/facility_spec/facility_creation.cy.ts
+++ b/cypress/e2e/facility_spec/facility_creation.cy.ts
@@ -132,6 +132,7 @@ describe("Facility Creation", () => {
     facilityFeature.forEach((featureText) => {
       cy.get("[role='option']").contains(featureText).click();
     });
+    facilityPage.clickfacilityfeatureoption();
     facilityPage.fillPincode("682001");
     facilityPage.selectStateOnPincode("Kerala");
     facilityPage.selectDistrictOnPincode("Ernakulam");
diff --git a/src/Components/CameraFeed/AssetBedSelect.tsx b/src/Components/CameraFeed/AssetBedSelect.tsx
index 2d7b49d138c..b97675c7b31 100644
--- a/src/Components/CameraFeed/AssetBedSelect.tsx
+++ b/src/Components/CameraFeed/AssetBedSelect.tsx
@@ -4,7 +4,6 @@ import {
   ListboxButton,
   ListboxOption,
   ListboxOptions,
-  Transition,
 } from "@headlessui/react";
 import CareIcon from "../../CAREUI/icons/CareIcon";
 import { classNames } from "../../Utils/utils";
@@ -108,29 +107,23 @@ export const CameraPresetDropdown = (
             <CareIcon icon="l-angle-down" className="text-xl text-zinc-400" />
           </span>
         </ListboxButton>
-        <Transition
-          leave="transition ease-in duration-300"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
+        <ListboxOptions
+          as="ul"
+          className="absolute z-20 max-h-48 w-full overflow-auto rounded-b-lg bg-white py-1 text-base shadow-lg ring-1 ring-secondary-500 focus:outline-none md:max-h-60"
         >
-          <ListboxOptions
-            as="ul"
-            className="absolute z-20 max-h-48 w-full overflow-auto rounded-b-lg bg-white py-1 text-base shadow-lg ring-1 ring-secondary-500 focus:outline-none md:max-h-60"
-          >
-            {options?.map((obj) => (
-              <ListboxOption
-                as="li"
-                key={obj.id}
-                className={(args) =>
-                  classNames(dropdownOptionClassNames(args), "px-2 py-1.5")
-                }
-                value={obj}
-              >
-                <span>{label(obj)}</span>
-              </ListboxOption>
-            ))}
-          </ListboxOptions>
-        </Transition>
+          {options?.map((obj) => (
+            <ListboxOption
+              as="li"
+              key={obj.id}
+              className={(args) =>
+                classNames(dropdownOptionClassNames(args), "px-2 py-1.5")
+              }
+              value={obj}
+            >
+              <span>{label(obj)}</span>
+            </ListboxOption>
+          ))}
+        </ListboxOptions>
       </div>
     </Listbox>
   );
diff --git a/src/Components/Form/MultiSelectMenuV2.tsx b/src/Components/Form/MultiSelectMenuV2.tsx
index eb01d0f837f..97f97cdb8ba 100644
--- a/src/Components/Form/MultiSelectMenuV2.tsx
+++ b/src/Components/Form/MultiSelectMenuV2.tsx
@@ -1,5 +1,4 @@
 import CareIcon from "../../CAREUI/icons/CareIcon";
-import { DropdownTransition } from "../Common/components/HelperComponents";
 import {
   Label,
   Listbox,
@@ -93,97 +92,93 @@ const MultiSelectMenuV2 = <T, V>(props: Props<T, V>) => {
         }
         multiple
       >
-        {({ open }) => (
-          <>
-            <Label className="sr-only !relative">{props.placeholder}</Label>
-            <div className="relative">
-              <div>
-                <ListboxButton
-                  className="cui-input-base flex w-full rounded"
-                  ref={buttonRef}
-                >
-                  <div className="relative z-0 flex w-full items-center">
-                    <div className="relative flex flex-1 items-center pr-4 focus:z-10">
-                      <p className="ml-2.5 text-sm font-normal text-secondary-600">
-                        <Placeholder />
-                      </p>
-
-                      {selectedOptions.length !== 0 && (
-                        <div className="flex flex-wrap gap-2">
-                          {selectedOptions.map((option, index) => (
-                            <MultiSelectOptionChip
-                              key={index}
-                              label={option.selectedLabel}
-                              onRemove={() => {
-                                const updatedOptions = selectedOptions.filter(
-                                  (selectedOption) =>
-                                    selectedOption.value !== option.value,
-                                );
-                                props.onChange(
-                                  updatedOptions.map((o) => o.value) as any,
-                                );
-                              }}
-                            />
-                          ))}
-                        </div>
-                      )}
-                    </div>
-                    <CareIcon
-                      icon="l-angle-down"
-                      className="-mb-0.5 text-lg text-secondary-900"
-                    />
+        <>
+          <Label className="sr-only !relative">{props.placeholder}</Label>
+          <div className="relative">
+            <div>
+              <ListboxButton
+                className="cui-input-base flex w-full rounded"
+                ref={buttonRef}
+              >
+                <div className="relative z-0 flex w-full items-center">
+                  <div className="relative flex flex-1 items-center pr-4 focus:z-10">
+                    <p className="ml-2.5 text-sm font-normal text-secondary-600">
+                      <Placeholder />
+                    </p>
+
+                    {selectedOptions.length !== 0 && (
+                      <div className="flex flex-wrap gap-2">
+                        {selectedOptions.map((option, index) => (
+                          <MultiSelectOptionChip
+                            key={index}
+                            label={option.selectedLabel}
+                            onRemove={() => {
+                              const updatedOptions = selectedOptions.filter(
+                                (selectedOption) =>
+                                  selectedOption.value !== option.value,
+                              );
+                              props.onChange(
+                                updatedOptions.map((o) => o.value) as any,
+                              );
+                            }}
+                          />
+                        ))}
+                      </div>
+                    )}
                   </div>
-                </ListboxButton>
-              </div>
-              <DropdownTransition show={open}>
-                <ListboxOptions
-                  as="ul"
-                  className="cui-dropdown-base absolute top-full"
+                  <CareIcon
+                    icon="l-angle-down"
+                    className="-mb-0.5 text-lg text-secondary-900"
+                  />
+                </div>
+              </ListboxButton>
+            </div>
+            <ListboxOptions
+              as="ul"
+              className="cui-dropdown-base absolute top-full"
+            >
+              {options.map((option, index) => (
+                <ListboxOption
+                  as="li"
+                  id={`${props.id}-option-${index}`}
+                  key={index}
+                  className={dropdownOptionClassNames}
+                  value={option}
+                  onClick={() => handleSingleSelect(option)}
+                  disabled={option.disabled}
                 >
-                  {options.map((option, index) => (
-                    <ListboxOption
-                      as="li"
-                      id={`${props.id}-option-${index}`}
-                      key={index}
-                      className={dropdownOptionClassNames}
-                      value={option}
-                      onClick={() => handleSingleSelect(option)}
-                      disabled={option.disabled}
-                    >
-                      {({ focus }) => (
-                        <div className="flex flex-col gap-2">
-                          <div className="flex justify-between">
-                            {option.label}
-                            {(option.icon || option.isSelected) &&
-                              (option.isSelected ? (
-                                <CareIcon icon="l-check" className="text-lg" />
-                              ) : (
-                                option.icon
-                              ))}
-                          </div>
-                          {option.description && (
-                            <p
-                              className={classNames(
-                                "text-sm font-normal",
-                                option.disabled
-                                  ? "text-secondary-500"
-                                  : focus
-                                    ? "text-primary-200"
-                                    : "text-secondary-500",
-                              )}
-                            >
-                              {option.description}
-                            </p>
+                  {({ focus }) => (
+                    <div className="flex flex-col gap-2">
+                      <div className="flex justify-between">
+                        {option.label}
+                        {(option.icon || option.isSelected) &&
+                          (option.isSelected ? (
+                            <CareIcon icon="l-check" className="text-lg" />
+                          ) : (
+                            option.icon
+                          ))}
+                      </div>
+                      {option.description && (
+                        <p
+                          className={classNames(
+                            "text-sm font-normal",
+                            option.disabled
+                              ? "text-secondary-500"
+                              : focus
+                                ? "text-primary-200"
+                                : "text-secondary-500",
                           )}
-                        </div>
+                        >
+                          {option.description}
+                        </p>
                       )}
-                    </ListboxOption>
-                  ))}
-                </ListboxOptions>
-              </DropdownTransition>
-            </div>
-          </>
-        )}
+                    </div>
+                  )}
+                </ListboxOption>
+              ))}
+            </ListboxOptions>
+          </div>
+        </>
       </Listbox>
     </div>
   );
diff --git a/src/Components/Form/SelectMenuV2.tsx b/src/Components/Form/SelectMenuV2.tsx
index 1b633078571..c416472fc12 100644
--- a/src/Components/Form/SelectMenuV2.tsx
+++ b/src/Components/Form/SelectMenuV2.tsx
@@ -5,7 +5,6 @@ import {
   ListboxOption,
   ListboxOptions,
 } from "@headlessui/react";
-import { DropdownTransition } from "../Common/components/HelperComponents";
 import CareIcon from "../../CAREUI/icons/CareIcon";
 import { dropdownOptionClassNames } from "./MultiSelectMenuV2";
 import { classNames } from "../../Utils/utils";
@@ -94,92 +93,85 @@ const SelectMenuV2 = <T, V>(props: SelectMenuProps<T, V>) => {
         value={value}
         onChange={(selection: any) => props.onChange(selection.value)}
       >
-        {({ open }) => (
-          <>
-            <Label className="sr-only !relative">{props.placeholder}</Label>
-            <div className="relative">
-              <ListboxButton
-               className={classNames(
-                  "cui-input-base flex w-full rounded",
-                  props?.requiredError && "border-red-500",
-                  props.inputClassName,
-                )}
-                onFocus={props.onFocus}
-                onBlur={props.onBlur}
-              >
-                <div className="relative z-0 flex w-full items-center">
-                  <div className="relative flex flex-1 items-center focus:z-10">
-                    {props.showIconWhenSelected && value?.icon && (
-                      <div className="ml-2 text-sm text-secondary-700">
-                        {value.icon}
-                      </div>
-                    )}
-                    <p className="ml-2.5 whitespace-pre-wrap text-start text-sm font-medium">
-                      {value.selectedLabel}
-                    </p>
-                  </div>
-                  {showChevronIcon && (
-                    <CareIcon
-                      icon="l-angle-down"
-                      className="-mb-0.5 text-lg text-secondary-900"
-                    />
+        <>
+          <Label className="sr-only !relative">{props.placeholder}</Label>
+          <div className="relative">
+            <ListboxButton
+              className={classNames(
+                "cui-input-base flex w-full rounded",
+                props?.requiredError && "border-red-500",
+                props.inputClassName,
+              )}
+              onFocus={props.onFocus}
+              onBlur={props.onBlur}
+            >
+              <div className="relative z-0 flex w-full items-center">
+                <div className="relative flex flex-1 items-center focus:z-10">
+                  {props.showIconWhenSelected && value?.icon && (
+                    <div className="ml-2 text-sm text-secondary-700">
+                      {value.icon}
+                    </div>
                   )}
+                  <p className="ml-2.5 whitespace-pre-wrap text-start text-sm font-medium">
+                    {value.selectedLabel}
+                  </p>
                 </div>
-              </ListboxButton>
-              <div
-                className={classNames(
-                  "absolute z-10 w-full",
-                  props.position === "above" ? "bottom-0 mb-12" : "top-0 mt-12",
+                {showChevronIcon && (
+                  <CareIcon
+                    icon="l-angle-down"
+                    className="-mb-0.5 text-lg text-secondary-900"
+                  />
                 )}
-              >
-                <DropdownTransition show={open}>
-                  <ListboxOptions as="ul" className="cui-dropdown-base">
-                    {options.map((option, index) => (
-                      <ListboxOption
-                        as="li"
-                        id={`${props.id}-option-${option.value}`}
-                        key={index}
-                        className={dropdownOptionClassNames}
-                        value={option}
-                        disabled={option.disabled}
-                      >
-                        {({ focus, selected }) => (
-                          <div className="flex flex-col gap-2">
-                            <div className="flex justify-between">
-                              {option.label}
-                              {props.optionIcon
-                                ? option.icon
-                                : selected && (
-                                    <CareIcon
-                                      icon="l-check"
-                                      className="text-lg"
-                                    />
-                                  )}
-                            </div>
-                            {option.description && (
-                              <span
-                                className={classNames(
-                                  "text-sm font-normal",
-                                  option.disabled
-                                    ? "text-secondary-700"
-                                    : focus
-                                      ? "text-primary-200"
-                                      : "text-secondary-700",
-                                )}
-                              >
-                                {option.description}
-                              </span>
+              </div>
+            </ListboxButton>
+            <div
+              className={classNames(
+                "absolute z-10 w-full",
+                props.position === "above" ? "bottom-0 mb-12" : "top-0 mt-12",
+              )}
+            >
+              <ListboxOptions as="ul" className="cui-dropdown-base">
+                {options.map((option, index) => (
+                  <ListboxOption
+                    as="li"
+                    id={`${props.id}-option-${option.value}`}
+                    key={index}
+                    className={dropdownOptionClassNames}
+                    value={option}
+                    disabled={option.disabled}
+                  >
+                    {({ focus, selected }) => (
+                      <div className="flex flex-col gap-2">
+                        <div className="flex justify-between">
+                          {option.label}
+                          {props.optionIcon
+                            ? option.icon
+                            : selected && (
+                                <CareIcon icon="l-check" className="text-lg" />
+                              )}
+                        </div>
+                        {option.description && (
+                          <span
+                            className={classNames(
+                              "text-sm font-normal",
+                              option.disabled
+                                ? "text-secondary-700"
+                                : focus
+                                  ? "text-primary-200"
+                                  : "text-secondary-700",
                             )}
-                          </div>
+                          >
+                            {option.description}
+                          </span>
                         )}
-                      </ListboxOption>
-                    ))}
-                  </ListboxOptions>
-                </DropdownTransition>
-              </div>
+                      </div>
+                    )}
+                  </ListboxOption>
+                ))}
+              </ListboxOptions>
             </div>
-          </>
-        )}
+          </div>
+        </>
       </Listbox>
     </div>
   );