thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

chore: drop-downs improvements and bug fixes (#3433)

Browse Source 
* chore: dropdowns should close on selecting an option

* style: @plane/ui dropdown styling

* refactor: @plane/ui dropdowns

* fix: build errors

* fix: list layout dropdowns positioning

* fix: priority dropdown text in dark mode
This commit is contained in:
Aaryan Khandelwal 2024-01-23 14:25:09 +05:30 committed by GitHub
parent f88109ef04
commit 801f75f406
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
52 changed files with 308 additions and 394 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
packages/ui/src/dropdowns/custom-menu.tsx
View File

@ -1,17 +1,15 @@
import * as React from "react";
import ReactDOM from "react-dom";
// react-popper
import { Menu } from "@headlessui/react";
import { usePopper } from "react-popper";
import { ChevronDown, MoreHorizontal } from "lucide-react";
// hooks
import { useDropdownKeyDown } from "../hooks/use-dropdown-key-down";
import useOutsideClickDetector from "../hooks/use-outside-click-detector";
// headless ui
import { Menu } from "@headlessui/react";
// type
import { ICustomMenuDropdownProps, ICustomMenuItemProps } from "./helper";
// icons
import { ChevronDown, MoreHorizontal } from "lucide-react";
// helpers
import { cn } from "../../helpers";
// types
import { ICustomMenuDropdownProps, ICustomMenuItemProps } from "./helper";
const CustomMenu = (props: ICustomMenuDropdownProps) => {
const {
@ -29,7 +27,6 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => {
noChevron = false,
optionsClassName = "",
verticalEllipsis = false,
width = "auto",
portalElement,
menuButtonOnClick,
tabIndex,
@ -63,17 +60,16 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => {
static
>
<div
className={`my-1 overflow-y-scroll rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none ${
maxHeight === "lg"
? "max-h-60"
: maxHeight === "md"
? "max-h-48"
: maxHeight === "rg"
? "max-h-36"
: maxHeight === "sm"
? "max-h-28"
: ""
} ${width === "auto" ? "min-w-[12rem] whitespace-nowrap" : width} ${optionsClassName}`}
className={cn(
"my-1 overflow-y-scroll rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none min-w-[12rem] whitespace-nowrap",
{
"max-h-60": maxHeight === "lg",
"max-h-48": maxHeight === "md",
"max-h-36": maxHeight === "rg",
"max-h-28": maxHeight === "sm",
},
optionsClassName
)}
ref={setPopperElement}
style={styles.popper}
{...attributes.popper}
@ -92,7 +88,7 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => {
as="div"
ref={dropdownRef}
tabIndex={tabIndex}
className={`relative w-min text-left ${className}`}
className={cn("relative w-min text-left", className)}
onKeyDown={handleKeyDown}
>
{({ open }) => (

83
packages/ui/src/dropdowns/custom-search-select.tsx
View File

@ -1,14 +1,12 @@
import React, { useRef, useState } from "react";
// react-popper
import { usePopper } from "react-popper";
import { Combobox } from "@headlessui/react";
import { Check, ChevronDown, Search } from "lucide-react";
// hooks
import { useDropdownKeyDown } from "../hooks/use-dropdown-key-down";
import useOutsideClickDetector from "../hooks/use-outside-click-detector";
// headless ui
import { Combobox } from "@headlessui/react";
// icons
import { Check, ChevronDown, Search } from "lucide-react";
// helpers
import { cn } from "../../helpers";
// types
import { ICustomSearchSelectProps } from "./helper";
@ -31,7 +29,6 @@ export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
onOpen,
optionsClassName = "",
value,
width = "auto",
tabIndex,
} = props;
const [query, setQuery] = useState("");
@ -70,7 +67,7 @@ export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
as="div"
ref={dropdownRef}
tabIndex={tabIndex}
className={`relative flex-shrink-0 text-left ${className}`}
className={cn("relative flex-shrink-0 text-left", className)}
onKeyDown={handleKeyDown}
{...comboboxProps}
>
@ -114,37 +111,33 @@ export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
</Combobox.Button>
)}
{isOpen && (
<Combobox.Options as={React.Fragment} static>
<Combobox.Options className="fixed z-10" static>
<div
className={`z-10 my-1 min-w-[10rem] rounded-md border border-custom-border-300 bg-custom-background-90 p-2 text-xs shadow-custom-shadow-rg focus:outline-none ${
width === "auto" ? "min-w-[8rem] whitespace-nowrap" : width
} ${optionsClassName}`}
className={cn(
"my-1 overflow-y-scroll rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none w-48 whitespace-nowrap",
optionsClassName
)}
ref={setPopperElement}
style={styles.popper}
{...attributes.popper}
>
<div className="flex w-full items-center justify-start rounded-sm border-[0.6px] border-custom-border-200 bg-custom-background-90 px-2">
<Search className="h-3 w-3 text-custom-text-200" />
<div className="flex items-center gap-1.5 rounded border border-custom-border-100 bg-custom-background-90 px-2">
<Search className="h-3.5 w-3.5 text-custom-text-400" strokeWidth={1.5} />
<Combobox.Input
className="w-full bg-transparent px-2 py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
className="w-full bg-transparent py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
value={query}
onChange={(e) => setQuery(e.target.value)}
placeholder="Type to search..."
placeholder="Search"
displayValue={(assigned: any) => assigned?.name}
/>
</div>
<div
className={`mt-2 space-y-1 ${
maxHeight === "lg"
? "max-h-60"
: maxHeight === "md"
? "max-h-48"
: maxHeight === "rg"
? "max-h-36"
: maxHeight === "sm"
? "max-h-28"
: ""
} overflow-y-scroll`}
className={cn("mt-2 space-y-1 overflow-y-scroll", {
"max-h-60": maxHeight === "lg",
"max-h-48": maxHeight === "md",
"max-h-36": maxHeight === "rg",
"max-h-28": maxHeight === "sm",
})}
>
{filteredOptions ? (
filteredOptions.length > 0 ? (
@ -152,37 +145,31 @@ export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
<Combobox.Option
key={option.value}
value={option.value}
className={({ active, selected }) =>
`flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5 ${
active || selected ? "bg-custom-background-80" : ""
} ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
className={({ active }) =>
cn(
"w-full truncate flex items-center justify-between gap-2 rounded px-1 py-1.5 cursor-pointer select-none",
{
"bg-custom-background-80": active,
}
)
}
onClick={() => {
if (!multiple) closeDropdown();
}}
>
{({ active, selected }) => (
{({ selected }) => (
<>
{option.content}
{multiple ? (
<div
className={`flex items-center justify-center rounded border border-custom-border-400 p-0.5 ${
active || selected ? "opacity-100" : "opacity-0"
}`}
>
<Check className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`} />
</div>
) : (
<Check className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`} />
)}
<span className="flex-grow truncate">{option.content}</span>
{selected && <Check className="h-3.5 w-3.5 flex-shrink-0" />}
</>
)}
</Combobox.Option>
))
) : (
<span className="flex items-center gap-2 p-1">
<p className="text-left text-custom-text-200 ">No matching results</p>
</span>
<p className="text-custom-text-400 italic py-1 px-1.5">No matches found</p>
)
) : (
<p className="text-center text-custom-text-200">Loading...</p>
<p className="text-custom-text-400 italic py-1 px-1.5">Loading...</p>
)}
</div>
{footerOption}

52
packages/ui/src/dropdowns/custom-select.tsx
View File

@ -1,14 +1,12 @@
import React, { useRef, useState } from "react";
// react-popper
import { usePopper } from "react-popper";
import { Listbox } from "@headlessui/react";
import { Check, ChevronDown } from "lucide-react";
// hooks
import { useDropdownKeyDown } from "../hooks/use-dropdown-key-down";
import useOutsideClickDetector from "../hooks/use-outside-click-detector";
// headless ui
import { Listbox } from "@headlessui/react";
// icons
import { Check, ChevronDown } from "lucide-react";
// helpers
import { cn } from "../../helpers";
// types
import { ICustomSelectItemProps, ICustomSelectProps } from "./helper";
@ -28,7 +26,6 @@ const CustomSelect = (props: ICustomSelectProps) => {
onChange,
optionsClassName = "",
value,
width = "auto",
tabIndex,
} = props;
// states
@ -57,7 +54,7 @@ const CustomSelect = (props: ICustomSelectProps) => {
tabIndex={tabIndex}
value={value}
onChange={onChange}
className={`relative flex-shrink-0 text-left ${className}`}
className={cn("relative flex-shrink-0 text-left", className)}
onKeyDown={handleKeyDown}
disabled={disabled}
>
@ -94,24 +91,23 @@ const CustomSelect = (props: ICustomSelectProps) => {
)}
</>
{isOpen && (
<Listbox.Options static>
<Listbox.Options className="fixed z-10" onClick={() => closeDropdown()} static>
<div
className={`z-10 my-1 overflow-y-auto rounded-md border border-custom-border-300 bg-custom-background-90 text-xs shadow-custom-shadow-rg focus:outline-none ${
maxHeight === "lg"
? "max-h-60"
: maxHeight === "md"
? "max-h-48"
: maxHeight === "rg"
? "max-h-36"
: maxHeight === "sm"
? "max-h-28"
: ""
} ${width === "auto" ? "min-w-[8rem] whitespace-nowrap" : width} ${optionsClassName}`}
className={cn(
"my-1 overflow-y-scroll rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none min-w-[12rem] whitespace-nowrap",
{
"max-h-60": maxHeight === "lg",
"max-h-48": maxHeight === "md",
"max-h-36": maxHeight === "rg",
"max-h-28": maxHeight === "sm",
},
optionsClassName
)}
ref={setPopperElement}
style={styles.popper}
{...attributes.popper}
>
<div className="space-y-1 p-2">{children}</div>
{children}
</div>
</Listbox.Options>
)}
@ -124,16 +120,20 @@ const Option = (props: ICustomSelectItemProps) => {
return (
<Listbox.Option
value={value}
className={({ active, selected }) =>
`cursor-pointer select-none truncate rounded px-1 py-1.5 ${
active || selected ? "bg-custom-background-80" : ""
} ${selected ? "text-custom-text-100" : "text-custom-text-200"} ${className}`
className={({ active }) =>
cn(
"cursor-pointer select-none truncate rounded px-1 py-1.5 text-custom-text-200",
{
"bg-custom-background-80": active,
},
className
)
}
>
{({ selected }) => (
<div className="flex items-center justify-between gap-2">
<div className="flex items-center gap-2">{children}</div>
{selected && <Check className="h-4 w-4 flex-shrink-0" />}
{selected && <Check className="h-3.5 w-3.5 flex-shrink-0" />}
</div>
)}
</Listbox.Option>

1
packages/ui/src/dropdowns/helper.tsx
View File

@ -13,7 +13,6 @@ export interface IDropdownProps {
noChevron?: boolean;
onOpen?: () => void;
optionsClassName?: string;
width?: "auto" | string;
placement?: Placement;
tabIndex?: number;
}

7
web/components/analytics/custom-analytics/select/project.tsx
View File

@ -21,9 +21,9 @@ export const SelectProject: React.FC<Props> = observer((props) => {
value: projectDetails?.id,
query: `${projectDetails?.name} ${projectDetails?.identifier}`,
content: (
<div className="flex items-center gap-2">
<span className="text-[0.65rem] text-custom-text-200">{projectDetails?.identifier}</span>
{projectDetails?.name}
<div className="flex items-center gap-2 truncate">
<span className="text-[0.65rem] text-custom-text-200 flex-shrink-0">{projectDetails?.identifier}</span>
<span className="flex-grow truncate">{projectDetails?.name}</span>
</div>
),
};
@ -42,7 +42,6 @@ export const SelectProject: React.FC<Props> = observer((props) => {
.join(", ")
: "All projects"
}
optionsClassName="min-w-full max-w-[20rem]"
multiple
/>
);

1
web/components/analytics/custom-analytics/select/segment.tsx
View File

@ -28,7 +28,6 @@ export const SelectSegment: React.FC<Props> = ({ value, onChange, params }) => {
</span>
}
onChange={onChange}
width="w-full"
maxHeight="lg"
>
<CustomSelect.Option value={null}>No value</CustomSelect.Option>

1
web/components/analytics/custom-analytics/select/x-axis.tsx
View File

@ -24,7 +24,6 @@ export const SelectXAxis: React.FC<Props> = (props) => {
value={value}
label={<span>{ANALYTICS_X_AXIS_VALUES.find((v) => v.value === value)?.label}</span>}
onChange={onChange}
width="w-full"
maxHeight="lg"
>
{ANALYTICS_X_AXIS_VALUES.map((item) => {

2
web/components/analytics/custom-analytics/select/y-axis.tsx
View File

@ -15,7 +15,7 @@ export const SelectYAxis: React.FC<Props> = ({ value, onChange }) => (
value={value}
label={<span>{ANALYTICS_Y_AXIS_VALUES.find((v) => v.value === value)?.label ?? "None"}</span>}
onChange={onChange}
width="w-full"
maxHeight="lg"
>
{ANALYTICS_Y_AXIS_VALUES.map((item) => (
<CustomSelect.Option key={item.value} value={item.value}>

1
web/components/automation/auto-archive-automation.tsx
View File

@ -79,7 +79,6 @@ export const AutoArchiveAutomation: React.FC<Props> = observer((props) => {
handleChange({ archive_in: val });
}}
input
width="w-full"
disabled={!isAdmin}
>
<>

2
web/components/automation/auto-close-automation.tsx
View File

@ -106,7 +106,6 @@ export const AutoCloseAutomation: React.FC<Props> = observer((props) => {
handleChange({ close_in: val });
}}
input
width="w-full"
disabled={!isAdmin}
>
<>
@ -161,7 +160,6 @@ export const AutoCloseAutomation: React.FC<Props> = observer((props) => {
}}
options={options}
disabled={!multipleOptions}
width="w-full"
input
/>
</div>

20
web/components/core/activity.tsx
View File

@ -43,7 +43,7 @@ const IssueLink = ({ activity }: { activity: IIssueActivity }) => {
}`}
target={activity.issue === null ? "_self" : "_blank"}
rel={activity.issue === null ? "" : "noopener noreferrer"}
className="inline-flex items-center gap-1 font-medium text-custom-text-100 hover:underline"
className="inline-flex items-center gap-1 font-medium text-custom-text-100 hover:underline whitespace-nowrap"
>
{activity.issue_detail ? `${activity.project_detail.identifier}-${activity.issue_detail.sequence_id}` : "Issue"}{" "}
<span className="font-normal">{activity.issue_detail?.name}</span>
@ -123,7 +123,6 @@ const activityDetails: {
to <IssueLink activity={activity} />
</>
)}
.
</>
);
else
@ -136,7 +135,6 @@ const activityDetails: {
from <IssueLink activity={activity} />
</>
)}
.
</>
);
},
@ -181,7 +179,6 @@ const activityDetails: {
from <IssueLink activity={activity} />
</>
)}
.
</>
);
},
@ -197,7 +194,6 @@ const activityDetails: {
of <IssueLink activity={activity} />
</>
)}
.
</>
),
icon: <MessageSquareIcon size={12} color="#6b7280" aria-hidden="true" />,
@ -214,7 +210,6 @@ const activityDetails: {
from <IssueLink activity={activity} />
</>
)}
.
</>
);
else
@ -227,7 +222,6 @@ const activityDetails: {
for <IssueLink activity={activity} />
</>
)}
.
</>
);
},
@ -297,7 +291,6 @@ const activityDetails: {
to <IssueLink activity={activity} />
</>
)}
.
</>
);
else if (activity.verb === "updated")
@ -318,7 +311,6 @@ const activityDetails: {
from <IssueLink activity={activity} />
</>
)}
.
</>
);
else
@ -339,7 +331,6 @@ const activityDetails: {
from <IssueLink activity={activity} />
</>
)}
.
</>
);
},
@ -449,7 +440,6 @@ const activityDetails: {
of <IssueLink activity={activity} />
</>
)}
.
</>
),
icon: <MessageSquareIcon size={12} color="#6b7280" aria-hidden="true" />,
@ -466,7 +456,6 @@ const activityDetails: {
from <IssueLink activity={activity} />
</>
)}
.
</>
);
else
@ -479,7 +468,6 @@ const activityDetails: {
for <IssueLink activity={activity} />
</>
)}
.
</>
);
},
@ -498,7 +486,6 @@ const activityDetails: {
for <IssueLink activity={activity} />
</>
)}
.
</>
),
icon: <SignalMediumIcon size={12} color="#6b7280" aria-hidden="true" />,
@ -587,7 +574,6 @@ const activityDetails: {
for <IssueLink activity={activity} />
</>
)}
.
</>
),
icon: <LayoutGridIcon size={12} color="#6b7280" aria-hidden="true" />,
@ -604,7 +590,6 @@ const activityDetails: {
from <IssueLink activity={activity} />
</>
)}
.
</>
);
else
@ -618,7 +603,6 @@ const activityDetails: {
for <IssueLink activity={activity} />
</>
)}
.
</>
);
},
@ -636,7 +620,6 @@ const activityDetails: {
from <IssueLink activity={activity} />
</>
)}
.
</>
);
else
@ -650,7 +633,6 @@ const activityDetails: {
for <IssueLink activity={activity} />
</>
)}
.
</>
);
},

1
web/components/core/theme/theme-switch.tsx
View File

@ -46,7 +46,6 @@ export const ThemeSwitch: FC<Props> = (props) => {
}
onChange={onChange}
input
width="w-full z-20"
>
{THEME_OPTIONS.map((themeOption) => (
<CustomSelect.Option key={themeOption.value} value={themeOption}>

2
web/components/cycles/cycles-board-card.tsx
View File

@ -246,7 +246,7 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
<Star className="h-3.5 w-3.5 text-custom-text-200" />
</button>
))}
<CustomMenu width="auto" ellipsis className="z-10">
<CustomMenu ellipsis className="z-10">
{!isCompleted && isEditingAllowed && (
<>
<CustomMenu.MenuItem onClick={handleEditCycle}>

2
web/components/cycles/cycles-list-item.tsx
View File

@ -240,7 +240,7 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
</button>
))}
<CustomMenu width="auto" ellipsis>
<CustomMenu ellipsis>
{!isCompleted && isEditingAllowed && (
<>
<CustomMenu.MenuItem onClick={handleEditCycle}>

2
web/components/cycles/sidebar.tsx
View File

@ -341,7 +341,7 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
<LinkIcon className="h-3 w-3 text-custom-text-300" />
</button>
{!isCompleted && isEditingAllowed && (
<CustomMenu width="lg" placement="bottom-end" ellipsis>
<CustomMenu placement="bottom-end" ellipsis>
<CustomMenu.MenuItem
onClick={() => {
setTrackElement("CYCLE_PAGE_SIDEBAR");

13
web/components/dropdowns/cycle.tsx
View File

@ -2,7 +2,6 @@ import { Fragment, ReactNode, useEffect, useRef, useState } from "react";
import { observer } from "mobx-react-lite";
import { Combobox } from "@headlessui/react";
import { usePopper } from "react-popper";
import { Placement } from "@popperjs/core";
import { Check, ChevronDown, Search } from "lucide-react";
// hooks
import { useApplication, useCycle } from "hooks/store";
@ -14,21 +13,14 @@ import { ContrastIcon } from "@plane/ui";
import { cn } from "helpers/common.helper";
// types
import { ICycle } from "@plane/types";
import { TButtonVariants } from "./types";
import { TDropdownProps } from "./types";
type Props = {
type Props = TDropdownProps & {
button?: ReactNode;
buttonClassName?: string;
buttonContainerClassName?: string;
buttonVariant: TButtonVariants;
className?: string;
disabled?: boolean;
dropdownArrow?: boolean;
onChange: (val: string | null) => void;
placement?: Placement;
projectId: string;
value: string | null;
tabIndex?: number;
};
type ButtonProps = {
@ -291,6 +283,7 @@ export const CycleDropdown: React.FC<Props> = observer((props) => {
active ? "bg-custom-background-80" : ""
} ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
}
onClick={closeDropdown}
>
{({ selected }) => (
<>

204
web/components/dropdowns/date.tsx
View File

@ -3,7 +3,6 @@ import { Popover } from "@headlessui/react";
import DatePicker from "react-datepicker";
import { usePopper } from "react-popper";
import { CalendarDays, X } from "lucide-react";
// import "react-datepicker/dist/react-datepicker.css";
// hooks
import { useDropdownKeyDown } from "hooks/use-dropdown-key-down";
import useOutsideClickDetector from "hooks/use-outside-click-detector";
@ -11,24 +10,17 @@ import useOutsideClickDetector from "hooks/use-outside-click-detector";
import { renderFormattedDate } from "helpers/date-time.helper";
import { cn } from "helpers/common.helper";
// types
import { TButtonVariants } from "./types";
import { Placement } from "@popperjs/core";
import { TDropdownProps } from "./types";
type Props = {
buttonClassName?: string;
buttonContainerClassName?: string;
buttonVariant: TButtonVariants;
disabled?: boolean;
type Props = TDropdownProps & {
icon?: React.ReactNode;
isClearable?: boolean;
minDate?: Date;
maxDate?: Date;
onChange: (val: Date | null) => void;
placeholder: string;
placement?: Placement;
value: Date | string | null;
closeOnSelect?: boolean;
tabIndex?: number;
};
type ButtonProps = {
@ -118,6 +110,7 @@ export const DateDropdown: React.FC<Props> = (props) => {
buttonClassName = "",
buttonContainerClassName,
buttonVariant,
className = "",
disabled = false,
icon = <CalendarDays className="h-3 w-3 flex-shrink-0" />,
isClearable = true,
@ -160,102 +153,103 @@ export const DateDropdown: React.FC<Props> = (props) => {
useOutsideClickDetector(dropdownRef, closeDropdown);
return (
<Popover ref={dropdownRef} tabIndex={tabIndex} className="h-full flex-shrink-0" onKeyDown={handleKeyDown}>
{({ close }) => (
<>
<Popover.Button as={React.Fragment}>
<button
ref={setReferenceElement}
type="button"
className={cn(
"block h-full max-w-full outline-none",
{
"cursor-not-allowed text-custom-text-200": disabled,
"cursor-pointer": !disabled,
},
buttonContainerClassName
)}
onClick={openDropdown}
>
{buttonVariant === "border-with-text" ? (
<BorderButton
date={value}
className={buttonClassName}
icon={icon}
placeholder={placeholder}
isClearable={isClearable && isDateSelected}
onClear={() => onChange(null)}
/>
) : buttonVariant === "border-without-text" ? (
<BorderButton
date={value}
className={buttonClassName}
icon={icon}
placeholder={placeholder}
isClearable={isClearable && isDateSelected}
onClear={() => onChange(null)}
hideText
/>
) : buttonVariant === "background-with-text" ? (
<BackgroundButton
date={value}
className={buttonClassName}
icon={icon}
placeholder={placeholder}
isClearable={isClearable && isDateSelected}
onClear={() => onChange(null)}
/>
) : buttonVariant === "background-without-text" ? (
<BackgroundButton
date={value}
className={buttonClassName}
icon={icon}
placeholder={placeholder}
isClearable={isClearable && isDateSelected}
onClear={() => onChange(null)}
hideText
/>
) : buttonVariant === "transparent-with-text" ? (
<TransparentButton
date={value}
className={buttonClassName}
icon={icon}
placeholder={placeholder}
isClearable={isClearable && isDateSelected}
onClear={() => onChange(null)}
/>
) : buttonVariant === "transparent-without-text" ? (
<TransparentButton
date={value}
className={buttonClassName}
icon={icon}
placeholder={placeholder}
isClearable={isClearable && isDateSelected}
onClear={() => onChange(null)}
hideText
/>
) : null}
</button>
</Popover.Button>
{isOpen && (
<Popover.Panel className="fixed z-10" static>
<div className="my-1" ref={setPopperElement} style={styles.popper} {...attributes.popper}>
<DatePicker
selected={value ? new Date(value) : null}
onChange={(val) => {
onChange(val);
if (closeOnSelect) close();
}}
dateFormat="dd-MM-yyyy"
minDate={minDate}
maxDate={maxDate}
calendarClassName="shadow-custom-shadow-rg rounded"
inline
/>
</div>
</Popover.Panel>
<Popover
ref={dropdownRef}
tabIndex={tabIndex}
className={cn("h-full flex-shrink-0", className)}
onKeyDown={handleKeyDown}
>
<Popover.Button as={React.Fragment}>
<button
ref={setReferenceElement}
type="button"
className={cn(
"block h-full max-w-full outline-none",
{
"cursor-not-allowed text-custom-text-200": disabled,
"cursor-pointer": !disabled,
},
buttonContainerClassName
)}
</>
onClick={openDropdown}
>
{buttonVariant === "border-with-text" ? (
<BorderButton
date={value}
className={buttonClassName}
icon={icon}
placeholder={placeholder}
isClearable={isClearable && isDateSelected}
onClear={() => onChange(null)}
/>
) : buttonVariant === "border-without-text" ? (
<BorderButton
date={value}
className={buttonClassName}
icon={icon}
placeholder={placeholder}
isClearable={isClearable && isDateSelected}
onClear={() => onChange(null)}
hideText
/>
) : buttonVariant === "background-with-text" ? (
<BackgroundButton
date={value}
className={buttonClassName}
icon={icon}
placeholder={placeholder}
isClearable={isClearable && isDateSelected}
onClear={() => onChange(null)}
/>
) : buttonVariant === "background-without-text" ? (
<BackgroundButton
date={value}
className={buttonClassName}
icon={icon}
placeholder={placeholder}
isClearable={isClearable && isDateSelected}
onClear={() => onChange(null)}
hideText
/>
) : buttonVariant === "transparent-with-text" ? (
<TransparentButton
date={value}
className={buttonClassName}
icon={icon}
placeholder={placeholder}
isClearable={isClearable && isDateSelected}
onClear={() => onChange(null)}
/>
) : buttonVariant === "transparent-without-text" ? (
<TransparentButton
date={value}
className={buttonClassName}
icon={icon}
placeholder={placeholder}
isClearable={isClearable && isDateSelected}
onClear={() => onChange(null)}
hideText
/>
) : null}
</button>
</Popover.Button>
{isOpen && (
<Popover.Panel className="fixed z-10" static>
<div className="my-1" ref={setPopperElement} style={styles.popper} {...attributes.popper}>
<DatePicker
selected={value ? new Date(value) : null}
onChange={(val) => {
onChange(val);
if (closeOnSelect) closeDropdown();
}}
dateFormat="dd-MM-yyyy"
minDate={minDate}
maxDate={maxDate}
calendarClassName="shadow-custom-shadow-rg rounded"
inline
/>
</div>
</Popover.Panel>
)}
</Popover>
);

13
web/components/dropdowns/estimate.tsx
View File

@ -2,7 +2,6 @@ import { Fragment, ReactNode, useEffect, useRef, useState } from "react";
import { observer } from "mobx-react-lite";
import { Combobox } from "@headlessui/react";
import { usePopper } from "react-popper";
import { Placement } from "@popperjs/core";
import { Check, ChevronDown, Search, Triangle } from "lucide-react";
import sortBy from "lodash/sortBy";
// hooks
@ -12,21 +11,14 @@ import useOutsideClickDetector from "hooks/use-outside-click-detector";
// helpers
import { cn } from "helpers/common.helper";
// types
import { TButtonVariants } from "./types";
import { TDropdownProps } from "./types";
type Props = {
type Props = TDropdownProps & {
button?: ReactNode;
buttonClassName?: string;
buttonContainerClassName?: string;
buttonVariant: TButtonVariants;
className?: string;
disabled?: boolean;
dropdownArrow?: boolean;
onChange: (val: number | null) => void;
placement?: Placement;
projectId: string;
value: number | null;
tabIndex?: number;
};
type ButtonProps = {
@ -280,6 +272,7 @@ export const EstimateDropdown: React.FC<Props> = observer((props) => {
active ? "bg-custom-background-80" : ""
} ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
}
onClick={closeDropdown}
>
{({ selected }) => (
<>

3
web/components/dropdowns/member/project-member.tsx
View File

@ -217,6 +217,9 @@ export const ProjectMemberDropdown: React.FC<Props> = observer((props) => {
active ? "bg-custom-background-80" : ""
} ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
}
onClick={() => {
if (!multiple) closeDropdown();
}}
>
{({ selected }) => (
<>

34
web/components/dropdowns/member/types.d.ts vendored
View File

@ -1,26 +1,18 @@
import { Placement } from "@popperjs/core";
import { TButtonVariants } from "../types";
import { TDropdownProps } from "../types";
export type MemberDropdownProps = {
export type MemberDropdownProps = TDropdownProps & {
button?: ReactNode;
buttonClassName?: string;
buttonContainerClassName?: string;
buttonVariant: TButtonVariants;
className?: string;
disabled?: boolean;
dropdownArrow?: boolean;
placeholder?: string;
placement?: Placement;
tabIndex?: number;
} & (
| {
multiple: false;
onChange: (val: string | null) => void;
value: string | null;
}
| {
multiple: true;
onChange: (val: string[]) => void;
value: string[];
}
);
| {
multiple: false;
onChange: (val: string | null) => void;
value: string | null;
}
| {
multiple: true;
onChange: (val: string[]) => void;
value: string[];
}
);

22
web/components/dropdowns/member/workspace-member.tsx
View File

@ -1,4 +1,4 @@
import { Fragment, useState } from "react";
import { Fragment, useRef, useState } from "react";
import { observer } from "mobx-react-lite";
import { Combobox } from "@headlessui/react";
import { usePopper } from "react-popper";
@ -13,6 +13,8 @@ import { Avatar } from "@plane/ui";
import { cn } from "helpers/common.helper";
// types
import { MemberDropdownProps } from "./types";
import { useDropdownKeyDown } from "hooks/use-dropdown-key-down";
import useOutsideClickDetector from "hooks/use-outside-click-detector";
export const WorkspaceMemberDropdown: React.FC<MemberDropdownProps> = observer((props) => {
const {
@ -28,9 +30,13 @@ export const WorkspaceMemberDropdown: React.FC<MemberDropdownProps> = observer((
placeholder = "Members",
placement,
value,
tabIndex,
} = props;
// states
const [query, setQuery] = useState("");
const [isOpen, setIsOpen] = useState(false);
// refs
const dropdownRef = useRef<HTMLDivElement | null>(null);
// popper-js refs
const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
@ -78,13 +84,24 @@ export const WorkspaceMemberDropdown: React.FC<MemberDropdownProps> = observer((
};
if (multiple) comboboxProps.multiple = true;
const openDropdown = () => {
setIsOpen(true);
if (referenceElement) referenceElement.focus();
};
const closeDropdown = () => setIsOpen(false);
const handleKeyDown = useDropdownKeyDown(openDropdown, closeDropdown, isOpen);
useOutsideClickDetector(dropdownRef, closeDropdown);
return (
<Combobox
as="div"
ref={dropdownRef}
tabIndex={tabIndex}
className={cn("h-full flex-shrink-0", {
className,
})}
{...comboboxProps}
handleKeyDown={handleKeyDown}
>
<Combobox.Button as={Fragment}>
{button ? (
@ -186,6 +203,9 @@ export const WorkspaceMemberDropdown: React.FC<MemberDropdownProps> = observer((
active ? "bg-custom-background-80" : ""
} ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
}
onClick={() => {
if (!multiple) closeDropdown();
}}
>
{({ selected }) => (
<>

17
web/components/dropdowns/module.tsx
View File

@ -2,7 +2,6 @@ import { Fragment, ReactNode, useEffect, useRef, useState } from "react";
import { observer } from "mobx-react-lite";
import { Combobox } from "@headlessui/react";
import { usePopper } from "react-popper";
import { Placement } from "@popperjs/core";
import { Check, ChevronDown, Search } from "lucide-react";
// hooks
import { useApplication, useModule } from "hooks/store";
@ -14,21 +13,14 @@ import { DiceIcon } from "@plane/ui";
import { cn } from "helpers/common.helper";
// types
import { IModule } from "@plane/types";
import { TButtonVariants } from "./types";
import { TDropdownProps } from "./types";
type Props = {
type Props = TDropdownProps & {
button?: ReactNode;
buttonClassName?: string;
buttonContainerClassName?: string;
buttonVariant: TButtonVariants;
className?: string;
disabled?: boolean;
dropdownArrow?: boolean;
onChange: (val: string | null) => void;
placement?: Placement;
projectId: string;
value: string | null;
tabIndex?: number;
};
type DropdownOptions =
@ -186,9 +178,7 @@ export const ModuleDropdown: React.FC<Props> = observer((props) => {
as="div"
ref={dropdownRef}
tabIndex={tabIndex}
className={cn("h-full flex-shrink-0", {
className,
})}
className={cn("h-full flex-shrink-0", className)}
value={value}
onChange={onChange}
disabled={disabled}
@ -291,6 +281,7 @@ export const ModuleDropdown: React.FC<Props> = observer((props) => {
active ? "bg-custom-background-80" : ""
} ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
}
onClick={closeDropdown}
>
{({ selected }) => (
<>

87
web/components/dropdowns/priority.tsx
View File

@ -1,7 +1,6 @@
import { Fragment, ReactNode, useRef, useState } from "react";
import { Combobox } from "@headlessui/react";
import { usePopper } from "react-popper";
import { Placement } from "@popperjs/core";
import { Check, ChevronDown, Search } from "lucide-react";
// hooks
import { useDropdownKeyDown } from "hooks/use-dropdown-key-down";
@ -12,23 +11,17 @@ import { PriorityIcon } from "@plane/ui";
import { cn } from "helpers/common.helper";
// types
import { TIssuePriorities } from "@plane/types";
import { TButtonVariants } from "./types";
import { TDropdownProps } from "./types";
// constants
import { ISSUE_PRIORITIES } from "constants/issue";
import { useTheme } from "next-themes";
type Props = {
type Props = TDropdownProps & {
button?: ReactNode;
buttonClassName?: string;
buttonContainerClassName?: string;
buttonVariant: TButtonVariants;
className?: string;
disabled?: boolean;
dropdownArrow?: boolean;
highlightUrgent?: boolean;
onChange: (val: TIssuePriorities) => void;
placement?: Placement;
value: TIssuePriorities;
tabIndex?: number;
};
type ButtonProps = {
@ -236,43 +229,20 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
},
],
});
// next-themes
// TODO: remove this after new theming implementation
const { resolvedTheme } = useTheme();
const options = ISSUE_PRIORITIES.map((priority) => {
const priorityClasses = {
urgent: "bg-red-500/20 text-red-950 border-red-500",
high: "bg-orange-500/20 text-orange-950 border-orange-500",
medium: "bg-yellow-500/20 text-yellow-950 border-yellow-500",
low: "bg-custom-primary-100/20 text-custom-primary-950 border-custom-primary-100",
none: "bg-custom-background-80 border-custom-border-300",
};
return {
value: priority.key,
query: priority.key,
content: (
<div className="flex items-center gap-2">
<div
className={cn("grid place-items-center border rounded p-0.5 flex-shrink-0", priorityClasses[priority.key], {
"bg-red-500 border-red-500": priority.key === "urgent" && highlightUrgent,
})}
>
<PriorityIcon
priority={priority.key}
size={14}
className={cn({
"text-white": priority.key === "urgent" && highlightUrgent,
// centre align the icons if text is hidden
"translate-x-[0.0625rem]": priority.key === "high",
"translate-x-0.5": priority.key === "medium",
"translate-x-1": priority.key === "low",
})}
/>
</div>
<span className="flex-grow truncate">{priority.title}</span>
</div>
),
};
});
const options = ISSUE_PRIORITIES.map((priority) => ({
value: priority.key,
query: priority.key,
content: (
<div className="flex items-center gap-2">
<PriorityIcon priority={priority.key} size={14} withContainer />
<span className="flex-grow truncate">{priority.title}</span>
</div>
),
}));
const filteredOptions =
query === "" ? options : options.filter((o) => o.query.toLowerCase().includes(query.toLowerCase()));
@ -325,14 +295,18 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
{buttonVariant === "border-with-text" ? (
<BorderButton
priority={value}
className={buttonClassName}
className={cn(buttonClassName, {
"text-white": resolvedTheme === "dark",
})}
highlightUrgent={highlightUrgent}
dropdownArrow={dropdownArrow && !disabled}
/>
) : buttonVariant === "border-without-text" ? (
<BorderButton
priority={value}
className={buttonClassName}
className={cn(buttonClassName, {
"text-white": resolvedTheme === "dark",
})}
highlightUrgent={highlightUrgent}
dropdownArrow={dropdownArrow && !disabled}
hideText
@ -340,14 +314,18 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
) : buttonVariant === "background-with-text" ? (
<BackgroundButton
priority={value}
className={buttonClassName}
className={cn(buttonClassName, {
"text-white": resolvedTheme === "dark",
})}
highlightUrgent={highlightUrgent}
dropdownArrow={dropdownArrow && !disabled}
/>
) : buttonVariant === "background-without-text" ? (
<BackgroundButton
priority={value}
className={buttonClassName}
className={cn(buttonClassName, {
"text-white": resolvedTheme === "dark",
})}
highlightUrgent={highlightUrgent}
dropdownArrow={dropdownArrow && !disabled}
hideText
@ -355,14 +333,18 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
) : buttonVariant === "transparent-with-text" ? (
<TransparentButton
priority={value}
className={buttonClassName}
className={cn(buttonClassName, {
"text-white": resolvedTheme === "dark",
})}
highlightUrgent={highlightUrgent}
dropdownArrow={dropdownArrow && !disabled}
/>
) : buttonVariant === "transparent-without-text" ? (
<TransparentButton
priority={value}
className={buttonClassName}
className={cn(buttonClassName, {
"text-white": resolvedTheme === "dark",
})}
highlightUrgent={highlightUrgent}
dropdownArrow={dropdownArrow && !disabled}
hideText
@ -400,6 +382,7 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
active ? "bg-custom-background-80" : ""
} ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
}
onClick={closeDropdown}
>
{({ selected }) => (
<>

17
web/components/dropdowns/project.tsx
View File

@ -2,7 +2,6 @@ import { Fragment, ReactNode, useRef, useState } from "react";
import { observer } from "mobx-react-lite";
import { Combobox } from "@headlessui/react";
import { usePopper } from "react-popper";
import { Placement } from "@popperjs/core";
import { Check, ChevronDown, Search } from "lucide-react";
// hooks
import { useProject } from "hooks/store";
@ -13,20 +12,13 @@ import { cn } from "helpers/common.helper";
import { renderEmoji } from "helpers/emoji.helper";
// types
import { IProject } from "@plane/types";
import { TButtonVariants } from "./types";
import { TDropdownProps } from "./types";
type Props = {
type Props = TDropdownProps & {
button?: ReactNode;
buttonClassName?: string;
buttonContainerClassName?: string;
buttonVariant: TButtonVariants;
className?: string;
disabled?: boolean;
dropdownArrow?: boolean;
onChange: (val: string) => void;
placement?: Placement;
value: string | null;
tabIndex?: number;
};
type ButtonProps = {
@ -166,9 +158,7 @@ export const ProjectDropdown: React.FC<Props> = observer((props) => {
as="div"
ref={dropdownRef}
tabIndex={tabIndex}
className={cn("h-full flex-shrink-0", {
className,
})}
className={cn("h-full flex-shrink-0", className)}
value={value}
onChange={onChange}
disabled={disabled}
@ -271,6 +261,7 @@ export const ProjectDropdown: React.FC<Props> = observer((props) => {
active ? "bg-custom-background-80" : ""
} ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
}
onClick={closeDropdown}
>
{({ selected }) => (
<>

17
web/components/dropdowns/state.tsx
View File

@ -2,7 +2,6 @@ import { Fragment, ReactNode, useEffect, useRef, useState } from "react";
import { observer } from "mobx-react-lite";
import { Combobox } from "@headlessui/react";
import { usePopper } from "react-popper";
import { Placement } from "@popperjs/core";
import { Check, ChevronDown, Search } from "lucide-react";
// hooks
import { useApplication, useProjectState } from "hooks/store";
@ -14,21 +13,14 @@ import { StateGroupIcon } from "@plane/ui";
import { cn } from "helpers/common.helper";
// types
import { IState } from "@plane/types";
import { TButtonVariants } from "./types";
import { TDropdownProps } from "./types";
type Props = {
type Props = TDropdownProps & {
button?: ReactNode;
buttonClassName?: string;
buttonContainerClassName?: string;
buttonVariant: TButtonVariants;
className?: string;
disabled?: boolean;
dropdownArrow?: boolean;
onChange: (val: string) => void;
placement?: Placement;
projectId: string;
value: string;
tabIndex?: number;
};
type ButtonProps = {
@ -159,9 +151,7 @@ export const StateDropdown: React.FC<Props> = observer((props) => {
as="div"
ref={dropdownRef}
tabIndex={tabIndex}
className={cn("h-full flex-shrink-0", {
className,
})}
className={cn("h-full flex-shrink-0", className)}
value={value}
onChange={onChange}
disabled={disabled}
@ -264,6 +254,7 @@ export const StateDropdown: React.FC<Props> = observer((props) => {
active ? "bg-custom-background-80" : ""
} ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
}
onClick={closeDropdown}
>
{({ selected }) => (
<>

12
web/components/dropdowns/types.d.ts vendored
View File

@ -1,3 +1,5 @@
import { Placement } from "@popperjs/core";
export type TButtonVariants =
| "border-with-text"
| "border-without-text"
@ -5,3 +7,13 @@ export type TButtonVariants =
| "background-without-text"
| "transparent-with-text"
| "transparent-without-text";
export type TDropdownProps = {
buttonClassName?: string;
buttonContainerClassName?: string;
buttonVariant: TButtonVariants;
className?: string;
disabled?: boolean;
placement?: Placement;
tabIndex?: number;
};

1
web/components/headers/cycle-issues.tsx
View File

@ -180,7 +180,6 @@ export const CycleIssuesHeader: React.FC = observer(() => {
</>
}
className="ml-1.5 flex-shrink-0"
width="auto"
placement="bottom-start"
>
{currentProjectCycleIds?.map((cycleId) => (

1
web/components/headers/module-issues.tsx
View File

@ -183,7 +183,6 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
</>
}
className="ml-1.5 flex-shrink-0"
width="auto"
placement="bottom-start"
>
{projectModuleIds?.map((moduleId) => (

2
web/components/integration/jira/give-details.tsx
View File

@ -161,7 +161,6 @@ export const JiraGetImportDetail: React.FC = observer(() => {
<CustomSelect
value={value}
input
width="w-full"
onChange={onChange}
label={
<span>
@ -172,6 +171,7 @@ export const JiraGetImportDetail: React.FC = observer(() => {
)}
</span>
}
optionsClassName="w-full"
>
{workspaceProjectIds && workspaceProjectIds.length > 0 ? (
workspaceProjectIds.map((projectId) => {

2
web/components/integration/jira/import-users.tsx
View File

@ -82,7 +82,7 @@ export const JiraImportUsers: FC = () => {
input
value={value}
onChange={onChange}
width="w-full"
optionsClassName="w-full"
label={<span className="capitalize">{Boolean(value) ? value : ("Ignore" as any)}</span>}
>
<CustomSelect.Option value="invite">Invite by email</CustomSelect.Option>

1
web/components/issues/issue-detail/cycle-select.tsx
View File

@ -93,7 +93,6 @@ export const IssueCycleSelect: React.FC<TIssueCycleSelect> = observer((props) =>
</Tooltip>
</div>
}
width="max-w-[10rem]"
noChevron
disabled={disableSelect}
/>

1
web/components/issues/issue-detail/module-select.tsx
View File

@ -93,7 +93,6 @@ export const IssueModuleSelect: React.FC<TIssueModuleSelect> = observer((props)
</Tooltip>
</div>
}
width="max-w-[10rem]"
noChevron
disabled={disableSelect}
/>

1
web/components/issues/issue-layouts/kanban/headers/group-by-card.tsx
View File

@ -135,7 +135,6 @@ export const HeaderGroupByCard: FC<IHeaderGroupByCard> = observer((props) => {
{!disableIssueCreation &&
(renderExistingIssueModal ? (
<CustomMenu
width="auto"
customButton={
<span className="flex h-[20px] w-[20px] flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-sm transition-all hover:bg-custom-background-80">
<Plus height={14} width={14} strokeWidth={2} />

2
web/components/issues/issue-layouts/list/block.tsx
View File

@ -73,7 +73,7 @@ export const IssueBlock: React.FC<IssueBlockProps> = observer((props: IssueBlock
{!issue?.tempId ? (
<>
<IssueProperties
className="relative flex items-center gap-2 overflow-x-auto whitespace-nowrap"
className="relative flex items-center gap-2 whitespace-nowrap"
issue={issue}
isReadOnly={!canEditIssueProperties}
handleIssues={updateIssue}

1
web/components/issues/issue-layouts/list/headers/group-by-card.tsx
View File

@ -70,7 +70,6 @@ export const HeaderGroupByCard = observer(
{!disableIssueCreation &&
(renderExistingIssueModal ? (
<CustomMenu
width="auto"
customButton={
<span className="flex h-5 w-5 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-sm transition-all hover:bg-custom-background-80">
<Plus className="h-3.5 w-3.5" strokeWidth={2} />

1
web/components/issues/issue-layouts/spreadsheet/columns/header-column.tsx
View File

@ -62,7 +62,6 @@ export const SpreadsheetHeaderColumn = (props: Props) => {
</div>
</div>
}
width="xl"
placement="bottom-end"
>
<CustomMenu.MenuItem onClick={() => handleOrderBy(propertyDetails.ascendingOrderKey, property)}>

2
web/components/issues/sub-issues/issue-list-item.tsx
View File

@ -134,7 +134,7 @@ export const IssueListItem: React.FC<ISubIssues> = observer((props) => {
</div>
<div className="flex-shrink-0 text-sm">
<CustomMenu width="auto" placement="bottom-end" ellipsis>
<CustomMenu placement="bottom-end" ellipsis>
{disabled && (
<CustomMenu.MenuItem onClick={() => handleIssueCrudState("update", parentIssueId, issue)}>
<div className="flex items-center gap-2">

2
web/components/issues/view-select/estimate.tsx
View File

@ -42,7 +42,7 @@ export const ViewEstimateSelect: React.FC<Props> = observer((props) => {
maxHeight="md"
noChevron
disabled={disabled}
width="w-full min-w-[8rem]"
optionsClassName="w-full"
>
<CustomSelect.Option value={null}>
<>

2
web/components/modules/module-card-item.tsx
View File

@ -232,7 +232,7 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
</button>
))}
<CustomMenu width="auto" ellipsis className="z-10">
<CustomMenu ellipsis className="z-10">
{isEditingAllowed && (
<>
<CustomMenu.MenuItem onClick={handleEditModule}>

2
web/components/modules/module-list-item.tsx
View File

@ -209,7 +209,7 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
</button>
))}
<CustomMenu width="auto" verticalEllipsis buttonClassName="z-[1]">
<CustomMenu verticalEllipsis buttonClassName="z-[1]">
{isEditingAllowed && (
<>
<CustomMenu.MenuItem onClick={handleEditModule}>

2
web/components/modules/sidebar.tsx
View File

@ -291,7 +291,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
<LinkIcon className="h-3 w-3 text-custom-text-300" />
</button>
{isEditingAllowed && (
<CustomMenu width="lg" placement="bottom-end" ellipsis>
<CustomMenu placement="bottom-end" ellipsis>
<CustomMenu.MenuItem onClick={() => setModuleDeleteModal(true)}>
<span className="flex items-center justify-start gap-2">
<Trash2 className="h-3 w-3" />

2
web/components/notifications/select-snooze-till-modal.tsx
View File

@ -200,7 +200,7 @@ export const SnoozeNotificationModal: FC<SnoozeModalProps> = (props) => {
)}
</div>
}
width="w-full"
optionsClassName="w-full"
input
>
<div className="mb-2 flex h-9 w-full overflow-hidden rounded">

2
web/components/pages/pages-list/list-item.tsx
View File

@ -235,7 +235,7 @@ export const PagesListItem: FC<IPagesListItem> = observer(({ pageId, projectId }
>
<AlertCircle className="h-3.5 w-3.5" />
</Tooltip>
<CustomMenu width="auto" placement="bottom-end" className="!-m-1" verticalEllipsis>
<CustomMenu placement="bottom-end" className="!-m-1" verticalEllipsis>
{archived_at ? (
<>
{userCanArchive && (

1
web/components/project/member-select.tsx
View File

@ -69,7 +69,6 @@ export const MemberSelect: React.FC<Props> = observer((props) => {
]
}
maxHeight="md"
width="w-full"
onChange={onChange}
disabled={isDisabled}
/>

4
web/components/project/send-project-invitation-modal.tsx
View File

@ -236,7 +236,7 @@ export const SendProjectInvitationModal: React.FC<Props> = observer((props) => {
onChange(val);
}}
options={options}
width="w-full min-w-[12rem]"
optionsClassName="w-full"
/>
);
}}
@ -266,7 +266,7 @@ export const SendProjectInvitationModal: React.FC<Props> = observer((props) => {
</div>
}
input
width="w-full"
optionsClassName="w-full"
>
{Object.entries(ROLE).map(([key, label]) => {
if (parseInt(key) > (currentProjectRole ?? EUserProjectRoles.GUEST)) return null;

2
web/components/states/create-state-modal.tsx
View File

@ -160,7 +160,7 @@ export const CreateStateModal: React.FC<Props> = observer((props) => {
value={value}
label={GROUP_CHOICES[value as keyof typeof GROUP_CHOICES]}
onChange={onChange}
width="w-full"
optionsClassName="w-full"
input
>
{Object.keys(GROUP_CHOICES).map((key) => (

2
web/components/views/view-list-item.tsx
View File

@ -123,7 +123,7 @@ export const ProjectViewListItem: React.FC<Props> = observer((props) => {
</button>
))}
<CustomMenu width="auto" ellipsis>
<CustomMenu ellipsis>
{isEditingAllowed && (
<>
<CustomMenu.MenuItem

2
web/components/workspace/create-workspace-form.tsx
View File

@ -201,7 +201,7 @@ export const CreateWorkspaceForm: FC<Props> = observer((props) => {
}
buttonClassName="!border-[0.5px] !border-custom-border-200 !shadow-none"
input
width="w-full"
optionsClassName="w-full"
>
{ORGANIZATION_SIZE.map((item) => (
<CustomSelect.Option key={item} value={item}>

2
web/components/workspace/send-workspace-invitation-modal.tsx
View File

@ -165,7 +165,7 @@ export const SendWorkspaceInvitationModal: React.FC<Props> = observer((props) =>
value={value}
label={<span className="text-xs sm:text-sm">{ROLE[value]}</span>}
onChange={onChange}
width="w-full"
optionsClassName="w-full"
input
>
{Object.entries(ROLE).map(([key, value]) => {

2
web/components/workspace/settings/workspace-details.tsx
View File

@ -247,7 +247,7 @@ export const WorkspaceDetails: FC = observer(() => {
value={value}
onChange={onChange}
label={ORGANIZATION_SIZE.find((c) => c === value) ?? "Select organization size"}
width="w-full"
optionsClassName="w-full"
buttonClassName="!border-[0.5px] !border-custom-border-200 !shadow-none"
input
disabled={!isAdmin}

2
web/components/workspace/views/view-list-item.tsx
View File

@ -54,7 +54,7 @@ export const GlobalViewListItem: React.FC<Props> = observer((props) => {
<p className="hidden rounded bg-custom-background-80 px-2 py-1 text-xs text-custom-text-200 group-hover:block">
{totalFilters} {totalFilters === 1 ? "filter" : "filters"}
</p>
<CustomMenu width="auto" ellipsis>
<CustomMenu ellipsis>
<CustomMenu.MenuItem
onClick={(e) => {
e.preventDefault();

6
web/pages/profile/index.tsx
View File

@ -284,7 +284,9 @@ const ProfileSettingsPage: NextPageWithLayout = observer(() => {
ref={ref}
hasError={Boolean(errors.email)}
placeholder="Enter your email"
className={`w-full rounded-md cursor-not-allowed !bg-custom-background-80 ${errors.email ? "border-red-500" : ""}`}
className={`w-full rounded-md cursor-not-allowed !bg-custom-background-80 ${
errors.email ? "border-red-500" : ""
}`}
disabled
/>
)}
@ -306,7 +308,7 @@ const ProfileSettingsPage: NextPageWithLayout = observer(() => {
label={value ? value.toString() : "Select your role"}
buttonClassName={errors.role ? "border-red-500" : "border-none"}
className="rounded-md border-[0.5px] !border-custom-border-200"
width="w-full"
optionsClassName="w-full"
input
>
{USER_ROLES.map((item) => (