[WEB-4154] fix: dropdown container classname (#7085)

* fix: dropdown container classname

* improvement: update string utils for joinWithConjunction

* improvement: add more string utils
This commit is contained in:
Prateek Shourya 2025-05-23 13:53:16 +05:30 committed by GitHub
parent 0a8cc24da5
commit 4460529b37
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 48 additions and 55 deletions

View file

@ -4,7 +4,7 @@ export interface IDropdown {
// root props
onOpen?: () => void;
onClose?: () => void;
containerClassName?: (isOpen: boolean) => string;
containerClassName?: string | ((isOpen: boolean) => string);
tabIndex?: number;
placement?: Placement;
disabled?: boolean;

View file

@ -1,19 +1,14 @@
import React, { FC, useMemo, useRef, useState } from "react";
import sortBy from "lodash/sortBy";
// headless ui
import { Combobox } from "@headlessui/react";
// popper-js
import sortBy from "lodash/sortBy";
import React, { FC, useMemo, useRef, useState } from "react";
import { usePopper } from "react-popper";
// plane helpers
// plane imports
import { useOutsideClickDetector } from "@plane/hooks";
// components
// local imports
import { cn } from "../../helpers";
import { useDropdownKeyPressed } from "../hooks/use-dropdown-key-pressed";
import { DropdownButton } from "./common";
import { DropdownOptions } from "./common/options";
// hooks
import { useDropdownKeyPressed } from "../hooks/use-dropdown-key-pressed";
// helper
import { cn } from "../../helpers";
// types
import { IMultiSelectDropdown } from "./dropdown";
export const MultiSelectDropdown: FC<IMultiSelectDropdown> = (props) => {
@ -118,7 +113,10 @@ export const MultiSelectDropdown: FC<IMultiSelectDropdown> = (props) => {
ref={dropdownRef}
value={value}
onChange={onChange}
className={cn("h-full", containerClassName)}
className={cn(
"h-full",
typeof containerClassName === "function" ? containerClassName(isOpen) : containerClassName
)}
tabIndex={tabIndex}
multiple
onKeyDown={handleKeyDown}

View file

@ -1,19 +1,14 @@
import React, { FC, useMemo, useRef, useState } from "react";
import sortBy from "lodash/sortBy";
// headless ui
import { Combobox } from "@headlessui/react";
// popper-js
import sortBy from "lodash/sortBy";
import React, { FC, useMemo, useRef, useState } from "react";
import { usePopper } from "react-popper";
// plane helpers
// plane imports
import { useOutsideClickDetector } from "@plane/hooks";
// components
// local imports
import { cn } from "../../helpers";
import { useDropdownKeyPressed } from "../hooks/use-dropdown-key-pressed";
import { DropdownButton } from "./common";
import { DropdownOptions } from "./common/options";
// hooks
import { useDropdownKeyPressed } from "../hooks/use-dropdown-key-pressed";
// helper
import { cn } from "../../helpers";
// types
import { ISingleSelectDropdown } from "./dropdown";
export const Dropdown: FC<ISingleSelectDropdown> = (props) => {
@ -118,7 +113,10 @@ export const Dropdown: FC<ISingleSelectDropdown> = (props) => {
ref={dropdownRef}
value={value}
onChange={onChange}
className={cn("h-full", containerClassName)}
className={cn(
"h-full",
typeof containerClassName === "function" ? containerClassName(isOpen) : containerClassName
)}
tabIndex={tabIndex}
onKeyDown={handleKeyDown}
disabled={disabled}