[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:
parent
0a8cc24da5
commit
4460529b37
4 changed files with 48 additions and 55 deletions
2
packages/ui/src/dropdown/dropdown.d.ts
vendored
2
packages/ui/src/dropdown/dropdown.d.ts
vendored
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue