mirror of
https://github.com/fosrl/pangolin.git
synced 2026-02-20 11:56:38 +00:00
small visual improvements
This commit is contained in:
miloschwartz
@@ -135,7 +135,6 @@ export default function Disable2FaForm({ open, setOpen }: Disable2FaProps) {
|
||||
<FormControl>
|
||||
<Input
|
||||
type="password"
|
||||
placeholder="Enter your password"
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
|
||||
@@ -200,7 +200,6 @@ export default function Enable2FaForm({ open, setOpen }: Enable2FaProps) {
|
||||
<FormControl>
|
||||
<Input
|
||||
type="password"
|
||||
placeholder="Enter your password"
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
@@ -246,7 +245,6 @@ export default function Enable2FaForm({ open, setOpen }: Enable2FaProps) {
|
||||
<FormControl>
|
||||
<Input
|
||||
type="code"
|
||||
placeholder="Enter the 6-digit code from your authenticator app"
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
|
||||
@@ -147,7 +147,6 @@ export default function LoginForm({ redirect, onLogin }: LoginFormProps) {
|
||||
<FormLabel>Email</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
placeholder="Enter your email"
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
@@ -166,7 +165,6 @@ export default function LoginForm({ redirect, onLogin }: LoginFormProps) {
|
||||
<FormControl>
|
||||
<Input
|
||||
type="password"
|
||||
placeholder="Enter your password"
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
|
||||
353
src/components/tags/autocomplete.tsx
Normal file
353
src/components/tags/autocomplete.tsx
Normal file
@@ -0,0 +1,353 @@
|
||||
import React, { useCallback, useEffect, useRef, useState } from "react";
|
||||
// import { Command, CommandList, CommandItem, CommandGroup, CommandEmpty } from '../ui/command';
|
||||
import { TagInputStyleClassesProps, type Tag as TagType } from "./tag-input";
|
||||
import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
|
||||
import { Button } from "../ui/button";
|
||||
import { cn } from "@app/lib/cn";
|
||||
|
||||
type AutocompleteProps = {
|
||||
tags: TagType[];
|
||||
setTags: React.Dispatch<React.SetStateAction<TagType[]>>;
|
||||
setInputValue: React.Dispatch<React.SetStateAction<string>>;
|
||||
setTagCount: React.Dispatch<React.SetStateAction<number>>;
|
||||
autocompleteOptions: TagType[];
|
||||
maxTags?: number;
|
||||
onTagAdd?: (tag: string) => void;
|
||||
onTagRemove?: (tag: string) => void;
|
||||
allowDuplicates: boolean;
|
||||
children: React.ReactNode;
|
||||
inlineTags?: boolean;
|
||||
classStyleProps: TagInputStyleClassesProps["autoComplete"];
|
||||
usePortal?: boolean;
|
||||
};
|
||||
|
||||
export const Autocomplete: React.FC<AutocompleteProps> = ({
|
||||
tags,
|
||||
setTags,
|
||||
setInputValue,
|
||||
setTagCount,
|
||||
autocompleteOptions,
|
||||
maxTags,
|
||||
onTagAdd,
|
||||
onTagRemove,
|
||||
allowDuplicates,
|
||||
inlineTags,
|
||||
children,
|
||||
classStyleProps,
|
||||
usePortal
|
||||
}) => {
|
||||
const triggerContainerRef = useRef<HTMLDivElement | null>(null);
|
||||
const triggerRef = useRef<HTMLButtonElement | null>(null);
|
||||
const inputRef = useRef<HTMLInputElement | null>(null);
|
||||
const popoverContentRef = useRef<HTMLDivElement | null>(null);
|
||||
|
||||
const [popoverWidth, setPopoverWidth] = useState<number>(0);
|
||||
const [isPopoverOpen, setIsPopoverOpen] = useState(false);
|
||||
const [inputFocused, setInputFocused] = useState(false);
|
||||
const [popooverContentTop, setPopoverContentTop] = useState<number>(0);
|
||||
const [selectedIndex, setSelectedIndex] = useState<number>(-1);
|
||||
|
||||
// Dynamically calculate the top position for the popover content
|
||||
useEffect(() => {
|
||||
if (!triggerContainerRef.current || !triggerRef.current) return;
|
||||
setPopoverContentTop(
|
||||
triggerContainerRef.current?.getBoundingClientRect().bottom -
|
||||
triggerRef.current?.getBoundingClientRect().bottom
|
||||
);
|
||||
}, [tags]);
|
||||
|
||||
// Close the popover when clicking outside of it
|
||||
useEffect(() => {
|
||||
const handleOutsideClick = (
|
||||
event: MouseEvent | TouchEvent | React.MouseEvent | React.TouchEvent
|
||||
) => {
|
||||
if (
|
||||
isPopoverOpen &&
|
||||
triggerContainerRef.current &&
|
||||
popoverContentRef.current &&
|
||||
!triggerContainerRef.current.contains(event.target as Node) &&
|
||||
!popoverContentRef.current.contains(event.target as Node)
|
||||
) {
|
||||
setIsPopoverOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener("mousedown", handleOutsideClick);
|
||||
|
||||
return () => {
|
||||
document.removeEventListener("mousedown", handleOutsideClick);
|
||||
};
|
||||
}, [isPopoverOpen]);
|
||||
|
||||
const handleOpenChange = useCallback(
|
||||
(open: boolean) => {
|
||||
if (open && triggerContainerRef.current) {
|
||||
const { width } =
|
||||
triggerContainerRef.current.getBoundingClientRect();
|
||||
setPopoverWidth(width);
|
||||
}
|
||||
|
||||
if (open) {
|
||||
inputRef.current?.focus();
|
||||
setIsPopoverOpen(open);
|
||||
}
|
||||
},
|
||||
[inputFocused]
|
||||
);
|
||||
|
||||
const handleInputFocus = (
|
||||
event:
|
||||
| React.FocusEvent<HTMLInputElement>
|
||||
| React.FocusEvent<HTMLTextAreaElement>
|
||||
) => {
|
||||
if (triggerContainerRef.current) {
|
||||
const { width } =
|
||||
triggerContainerRef.current.getBoundingClientRect();
|
||||
setPopoverWidth(width);
|
||||
setIsPopoverOpen(true);
|
||||
}
|
||||
|
||||
// Only set inputFocused to true if the popover is already open.
|
||||
// This will prevent the popover from opening due to an input focus if it was initially closed.
|
||||
if (isPopoverOpen) {
|
||||
setInputFocused(true);
|
||||
}
|
||||
|
||||
const userOnFocus = (children as React.ReactElement<any>).props.onFocus;
|
||||
if (userOnFocus) userOnFocus(event);
|
||||
};
|
||||
|
||||
const handleInputBlur = (
|
||||
event:
|
||||
| React.FocusEvent<HTMLInputElement>
|
||||
| React.FocusEvent<HTMLTextAreaElement>
|
||||
) => {
|
||||
setInputFocused(false);
|
||||
|
||||
// Allow the popover to close if no other interactions keep it open
|
||||
if (!isPopoverOpen) {
|
||||
setIsPopoverOpen(false);
|
||||
}
|
||||
|
||||
const userOnBlur = (children as React.ReactElement<any>).props.onBlur;
|
||||
if (userOnBlur) userOnBlur(event);
|
||||
};
|
||||
|
||||
const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
|
||||
if (!isPopoverOpen) return;
|
||||
|
||||
switch (event.key) {
|
||||
case "ArrowUp":
|
||||
event.preventDefault();
|
||||
setSelectedIndex((prevIndex) =>
|
||||
prevIndex <= 0
|
||||
? autocompleteOptions.length - 1
|
||||
: prevIndex - 1
|
||||
);
|
||||
break;
|
||||
case "ArrowDown":
|
||||
event.preventDefault();
|
||||
setSelectedIndex((prevIndex) =>
|
||||
prevIndex === autocompleteOptions.length - 1
|
||||
? 0
|
||||
: prevIndex + 1
|
||||
);
|
||||
break;
|
||||
case "Enter":
|
||||
event.preventDefault();
|
||||
if (selectedIndex !== -1) {
|
||||
toggleTag(autocompleteOptions[selectedIndex]);
|
||||
setSelectedIndex(-1);
|
||||
}
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const toggleTag = (option: TagType) => {
|
||||
// Check if the tag already exists in the array
|
||||
const index = tags.findIndex((tag) => tag.text === option.text);
|
||||
|
||||
if (index >= 0) {
|
||||
// Tag exists, remove it
|
||||
const newTags = tags.filter((_, i) => i !== index);
|
||||
setTags(newTags);
|
||||
setTagCount((prevCount) => prevCount - 1);
|
||||
if (onTagRemove) {
|
||||
onTagRemove(option.text);
|
||||
}
|
||||
} else {
|
||||
// Tag doesn't exist, add it if allowed
|
||||
if (
|
||||
!allowDuplicates &&
|
||||
tags.some((tag) => tag.text === option.text)
|
||||
) {
|
||||
// If duplicates aren't allowed and a tag with the same text exists, do nothing
|
||||
return;
|
||||
}
|
||||
|
||||
// Add the tag if it doesn't exceed max tags, if applicable
|
||||
if (!maxTags || tags.length < maxTags) {
|
||||
setTags([...tags, option]);
|
||||
setTagCount((prevCount) => prevCount + 1);
|
||||
setInputValue("");
|
||||
if (onTagAdd) {
|
||||
onTagAdd(option.text);
|
||||
}
|
||||
}
|
||||
}
|
||||
setSelectedIndex(-1);
|
||||
};
|
||||
|
||||
const childrenWithProps = React.cloneElement(
|
||||
children as React.ReactElement<any>,
|
||||
{
|
||||
onKeyDown: handleKeyDown,
|
||||
onFocus: handleInputFocus,
|
||||
onBlur: handleInputBlur,
|
||||
ref: inputRef
|
||||
}
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
|
||||
classStyleProps?.command
|
||||
)}
|
||||
>
|
||||
<Popover
|
||||
open={isPopoverOpen}
|
||||
onOpenChange={handleOpenChange}
|
||||
modal={usePortal}
|
||||
>
|
||||
<div
|
||||
className="relative h-full flex items-center rounded-md border-2 bg-transparent pr-3"
|
||||
ref={triggerContainerRef}
|
||||
>
|
||||
{childrenWithProps}
|
||||
<PopoverTrigger asChild ref={triggerRef}>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
role="combobox"
|
||||
className={cn(
|
||||
`hover:bg-transparent ${!inlineTags ? "ml-auto" : ""}`,
|
||||
classStyleProps?.popoverTrigger
|
||||
)}
|
||||
onClick={() => {
|
||||
setIsPopoverOpen(!isPopoverOpen);
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className={`lucide lucide-chevron-down h-4 w-4 shrink-0 opacity-50 ${isPopoverOpen ? "rotate-180" : "rotate-0"}`}
|
||||
>
|
||||
<path d="m6 9 6 6 6-6"></path>
|
||||
</svg>
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
</div>
|
||||
<PopoverContent
|
||||
ref={popoverContentRef}
|
||||
side="bottom"
|
||||
align="start"
|
||||
forceMount
|
||||
className={cn(
|
||||
`p-0 relative`,
|
||||
classStyleProps?.popoverContent
|
||||
)}
|
||||
style={{
|
||||
top: `${popooverContentTop}px`,
|
||||
marginLeft: `calc(-${popoverWidth}px + 36px)`,
|
||||
width: `${popoverWidth}px`,
|
||||
minWidth: `${popoverWidth}px`,
|
||||
zIndex: 9999
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
"max-h-[300px] overflow-y-auto overflow-x-hidden",
|
||||
classStyleProps?.commandList
|
||||
)}
|
||||
style={{
|
||||
minHeight: "68px"
|
||||
}}
|
||||
key={autocompleteOptions.length}
|
||||
>
|
||||
{autocompleteOptions.length > 0 ? (
|
||||
<div
|
||||
key={autocompleteOptions.length}
|
||||
role="group"
|
||||
className={cn(
|
||||
"overflow-y-auto overflow-hidden p-1 text-foreground",
|
||||
classStyleProps?.commandGroup
|
||||
)}
|
||||
style={{
|
||||
minHeight: "68px"
|
||||
}}
|
||||
>
|
||||
<span className="text-muted-foreground font-medium text-sm py-1.5 px-2 pb-2">
|
||||
Suggestions
|
||||
</span>
|
||||
<div role="separator" className="py-0.5" />
|
||||
{autocompleteOptions.map((option, index) => {
|
||||
const isSelected = index === selectedIndex;
|
||||
return (
|
||||
<div
|
||||
key={option.id}
|
||||
role="option"
|
||||
aria-selected={isSelected}
|
||||
className={cn(
|
||||
"relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 hover:bg-accent",
|
||||
isSelected &&
|
||||
"bg-accent text-accent-foreground",
|
||||
classStyleProps?.commandItem
|
||||
)}
|
||||
data-value={option.text}
|
||||
onClick={() => toggleTag(option)}
|
||||
>
|
||||
<div className="w-full flex items-center gap-2">
|
||||
{option.text}
|
||||
{tags.some(
|
||||
(tag) =>
|
||||
tag.text === option.text
|
||||
) && (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="14"
|
||||
height="14"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className="lucide lucide-check"
|
||||
>
|
||||
<path d="M20 6 9 17l-5-5"></path>
|
||||
</svg>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
) : (
|
||||
<div className="py-6 text-center text-sm">
|
||||
No results found.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
949
src/components/tags/tag-input.tsx
Normal file
949
src/components/tags/tag-input.tsx
Normal file
@@ -0,0 +1,949 @@
|
||||
"use client";
|
||||
|
||||
import React, { useMemo } from "react";
|
||||
import { Input } from "../ui/input";
|
||||
import { Button } from "../ui/button";
|
||||
import { type VariantProps } from "class-variance-authority";
|
||||
// import { CommandInput } from '../ui/command';
|
||||
import { TagPopover } from "./tag-popover";
|
||||
import { TagList } from "./tag-list";
|
||||
import { tagVariants } from "./tag";
|
||||
import { Autocomplete } from "./autocomplete";
|
||||
import { cn } from "@app/lib/cn";
|
||||
|
||||
export enum Delimiter {
|
||||
Comma = ",",
|
||||
Enter = "Enter"
|
||||
}
|
||||
|
||||
type OmittedInputProps = Omit<
|
||||
React.InputHTMLAttributes<HTMLInputElement>,
|
||||
"size" | "value"
|
||||
>;
|
||||
|
||||
export type Tag = {
|
||||
id: string;
|
||||
text: string;
|
||||
};
|
||||
|
||||
export interface TagInputStyleClassesProps {
|
||||
inlineTagsContainer?: string;
|
||||
tagPopover?: {
|
||||
popoverTrigger?: string;
|
||||
popoverContent?: string;
|
||||
};
|
||||
tagList?: {
|
||||
container?: string;
|
||||
sortableList?: string;
|
||||
};
|
||||
autoComplete?: {
|
||||
command?: string;
|
||||
popoverTrigger?: string;
|
||||
popoverContent?: string;
|
||||
commandList?: string;
|
||||
commandGroup?: string;
|
||||
commandItem?: string;
|
||||
};
|
||||
tag?: {
|
||||
body?: string;
|
||||
closeButton?: string;
|
||||
};
|
||||
input?: string;
|
||||
clearAllButton?: string;
|
||||
}
|
||||
|
||||
export interface TagInputProps
|
||||
extends OmittedInputProps,
|
||||
VariantProps<typeof tagVariants> {
|
||||
placeholder?: string;
|
||||
tags: Tag[];
|
||||
setTags: React.Dispatch<React.SetStateAction<Tag[]>>;
|
||||
enableAutocomplete?: boolean;
|
||||
autocompleteOptions?: Tag[];
|
||||
maxTags?: number;
|
||||
minTags?: number;
|
||||
readOnly?: boolean;
|
||||
disabled?: boolean;
|
||||
onTagAdd?: (tag: string) => void;
|
||||
onTagRemove?: (tag: string) => void;
|
||||
allowDuplicates?: boolean;
|
||||
validateTag?: (tag: string) => boolean;
|
||||
delimiter?: Delimiter;
|
||||
showCount?: boolean;
|
||||
placeholderWhenFull?: string;
|
||||
sortTags?: boolean;
|
||||
delimiterList?: string[];
|
||||
truncate?: number;
|
||||
minLength?: number;
|
||||
maxLength?: number;
|
||||
usePopoverForTags?: boolean;
|
||||
value?:
|
||||
| string
|
||||
| number
|
||||
| readonly string[]
|
||||
| { id: string; text: string }[];
|
||||
autocompleteFilter?: (option: string) => boolean;
|
||||
direction?: "row" | "column";
|
||||
onInputChange?: (value: string) => void;
|
||||
customTagRenderer?: (tag: Tag, isActiveTag: boolean) => React.ReactNode;
|
||||
onFocus?: React.FocusEventHandler<HTMLInputElement>;
|
||||
onBlur?: React.FocusEventHandler<HTMLInputElement>;
|
||||
onTagClick?: (tag: Tag) => void;
|
||||
draggable?: boolean;
|
||||
inputFieldPosition?: "bottom" | "top";
|
||||
clearAll?: boolean;
|
||||
onClearAll?: () => void;
|
||||
inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
|
||||
restrictTagsToAutocompleteOptions?: boolean;
|
||||
inlineTags?: boolean;
|
||||
activeTagIndex: number | null;
|
||||
setActiveTagIndex: React.Dispatch<React.SetStateAction<number | null>>;
|
||||
styleClasses?: TagInputStyleClassesProps;
|
||||
usePortal?: boolean;
|
||||
addOnPaste?: boolean;
|
||||
addTagsOnBlur?: boolean;
|
||||
generateTagId?: () => string;
|
||||
}
|
||||
|
||||
const TagInput = React.forwardRef<HTMLInputElement, TagInputProps>(
|
||||
(props, ref) => {
|
||||
const {
|
||||
id,
|
||||
placeholder,
|
||||
tags,
|
||||
setTags,
|
||||
variant,
|
||||
size,
|
||||
shape,
|
||||
enableAutocomplete,
|
||||
autocompleteOptions,
|
||||
maxTags,
|
||||
delimiter = Delimiter.Comma,
|
||||
onTagAdd,
|
||||
onTagRemove,
|
||||
allowDuplicates,
|
||||
showCount,
|
||||
validateTag,
|
||||
placeholderWhenFull = "Max tags reached",
|
||||
sortTags,
|
||||
delimiterList,
|
||||
truncate,
|
||||
autocompleteFilter,
|
||||
borderStyle,
|
||||
textCase,
|
||||
interaction,
|
||||
animation,
|
||||
textStyle,
|
||||
minLength,
|
||||
maxLength,
|
||||
direction = "row",
|
||||
onInputChange,
|
||||
customTagRenderer,
|
||||
onFocus,
|
||||
onBlur,
|
||||
onTagClick,
|
||||
draggable = false,
|
||||
inputFieldPosition = "bottom",
|
||||
clearAll = false,
|
||||
onClearAll,
|
||||
usePopoverForTags = false,
|
||||
inputProps = {},
|
||||
restrictTagsToAutocompleteOptions,
|
||||
inlineTags = true,
|
||||
addTagsOnBlur = false,
|
||||
activeTagIndex,
|
||||
setActiveTagIndex,
|
||||
styleClasses = {},
|
||||
disabled = false,
|
||||
usePortal = false,
|
||||
addOnPaste = false,
|
||||
generateTagId = uuid
|
||||
} = props;
|
||||
|
||||
const [inputValue, setInputValue] = React.useState("");
|
||||
const [tagCount, setTagCount] = React.useState(
|
||||
Math.max(0, tags.length)
|
||||
);
|
||||
const inputRef = React.useRef<HTMLInputElement>(null);
|
||||
|
||||
if (
|
||||
(maxTags !== undefined && maxTags < 0) ||
|
||||
(props.minTags !== undefined && props.minTags < 0)
|
||||
) {
|
||||
console.warn("maxTags and minTags cannot be less than 0");
|
||||
// error
|
||||
return null;
|
||||
}
|
||||
|
||||
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const newValue = e.target.value;
|
||||
if (addOnPaste && newValue.includes(delimiter)) {
|
||||
const splitValues = newValue
|
||||
.split(delimiter)
|
||||
.map((v) => v.trim())
|
||||
.filter((v) => v);
|
||||
splitValues.forEach((value) => {
|
||||
if (!value) return; // Skip empty strings from split
|
||||
|
||||
const newTagText = value.trim();
|
||||
|
||||
// Check if the tag is in the autocomplete options if restrictTagsToAutocomplete is true
|
||||
if (
|
||||
restrictTagsToAutocompleteOptions &&
|
||||
!autocompleteOptions?.some(
|
||||
(option) => option.text === newTagText
|
||||
)
|
||||
) {
|
||||
console.warn(
|
||||
"Tag not allowed as per autocomplete options"
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
if (validateTag && !validateTag(newTagText)) {
|
||||
console.warn("Invalid tag as per validateTag");
|
||||
return;
|
||||
}
|
||||
|
||||
if (minLength && newTagText.length < minLength) {
|
||||
console.warn(`Tag "${newTagText}" is too short`);
|
||||
return;
|
||||
}
|
||||
|
||||
if (maxLength && newTagText.length > maxLength) {
|
||||
console.warn(`Tag "${newTagText}" is too long`);
|
||||
return;
|
||||
}
|
||||
|
||||
const newTagId = generateTagId();
|
||||
|
||||
// Add tag if duplicates are allowed or tag does not already exist
|
||||
if (
|
||||
allowDuplicates ||
|
||||
!tags.some((tag) => tag.text === newTagText)
|
||||
) {
|
||||
if (maxTags === undefined || tags.length < maxTags) {
|
||||
// Check for maxTags limit
|
||||
const newTag = { id: newTagId, text: newTagText };
|
||||
setTags((prevTags) => [...prevTags, newTag]);
|
||||
onTagAdd?.(newTagText);
|
||||
} else {
|
||||
console.warn(
|
||||
"Reached the maximum number of tags allowed"
|
||||
);
|
||||
}
|
||||
} else {
|
||||
console.warn(`Duplicate tag "${newTagText}" not added`);
|
||||
}
|
||||
});
|
||||
setInputValue("");
|
||||
} else {
|
||||
setInputValue(newValue);
|
||||
}
|
||||
onInputChange?.(newValue);
|
||||
};
|
||||
|
||||
const handleInputFocus = (
|
||||
event: React.FocusEvent<HTMLInputElement>
|
||||
) => {
|
||||
setActiveTagIndex(null); // Reset active tag index when the input field gains focus
|
||||
onFocus?.(event);
|
||||
};
|
||||
|
||||
const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>) => {
|
||||
if (addTagsOnBlur && inputValue.trim()) {
|
||||
const newTagText = inputValue.trim();
|
||||
|
||||
if (validateTag && !validateTag(newTagText)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (minLength && newTagText.length < minLength) {
|
||||
console.warn("Tag is too short");
|
||||
return;
|
||||
}
|
||||
|
||||
if (maxLength && newTagText.length > maxLength) {
|
||||
console.warn("Tag is too long");
|
||||
return;
|
||||
}
|
||||
|
||||
if (
|
||||
(allowDuplicates ||
|
||||
!tags.some((tag) => tag.text === newTagText)) &&
|
||||
(maxTags === undefined || tags.length < maxTags)
|
||||
) {
|
||||
const newTagId = generateTagId();
|
||||
setTags([...tags, { id: newTagId, text: newTagText }]);
|
||||
onTagAdd?.(newTagText);
|
||||
setTagCount((prevTagCount) => prevTagCount + 1);
|
||||
setInputValue("");
|
||||
}
|
||||
}
|
||||
|
||||
onBlur?.(event);
|
||||
};
|
||||
|
||||
const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
|
||||
if (
|
||||
delimiterList
|
||||
? delimiterList.includes(e.key)
|
||||
: e.key === delimiter || e.key === Delimiter.Enter
|
||||
) {
|
||||
e.preventDefault();
|
||||
const newTagText = inputValue.trim();
|
||||
|
||||
// Check if the tag is in the autocomplete options if restrictTagsToAutocomplete is true
|
||||
if (
|
||||
restrictTagsToAutocompleteOptions &&
|
||||
!autocompleteOptions?.some(
|
||||
(option) => option.text === newTagText
|
||||
)
|
||||
) {
|
||||
// error
|
||||
return;
|
||||
}
|
||||
|
||||
if (validateTag && !validateTag(newTagText)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (minLength && newTagText.length < minLength) {
|
||||
console.warn("Tag is too short");
|
||||
// error
|
||||
return;
|
||||
}
|
||||
|
||||
// Validate maxLength
|
||||
if (maxLength && newTagText.length > maxLength) {
|
||||
// error
|
||||
console.warn("Tag is too long");
|
||||
return;
|
||||
}
|
||||
|
||||
const newTagId = generateTagId();
|
||||
|
||||
if (
|
||||
newTagText &&
|
||||
(allowDuplicates ||
|
||||
!tags.some((tag) => tag.text === newTagText)) &&
|
||||
(maxTags === undefined || tags.length < maxTags)
|
||||
) {
|
||||
setTags([...tags, { id: newTagId, text: newTagText }]);
|
||||
onTagAdd?.(newTagText);
|
||||
setTagCount((prevTagCount) => prevTagCount + 1);
|
||||
}
|
||||
setInputValue("");
|
||||
} else {
|
||||
switch (e.key) {
|
||||
case "Delete":
|
||||
if (activeTagIndex !== null) {
|
||||
e.preventDefault();
|
||||
const newTags = [...tags];
|
||||
newTags.splice(activeTagIndex, 1);
|
||||
setTags(newTags);
|
||||
setActiveTagIndex((prev) =>
|
||||
newTags.length === 0
|
||||
? null
|
||||
: prev! >= newTags.length
|
||||
? newTags.length - 1
|
||||
: prev
|
||||
);
|
||||
setTagCount((prevTagCount) => prevTagCount - 1);
|
||||
onTagRemove?.(tags[activeTagIndex].text);
|
||||
}
|
||||
break;
|
||||
case "Backspace":
|
||||
if (activeTagIndex !== null) {
|
||||
e.preventDefault();
|
||||
const newTags = [...tags];
|
||||
newTags.splice(activeTagIndex, 1);
|
||||
setTags(newTags);
|
||||
setActiveTagIndex((prev) =>
|
||||
prev! === 0 ? null : prev! - 1
|
||||
);
|
||||
setTagCount((prevTagCount) => prevTagCount - 1);
|
||||
onTagRemove?.(tags[activeTagIndex].text);
|
||||
}
|
||||
break;
|
||||
case "ArrowRight":
|
||||
e.preventDefault();
|
||||
if (activeTagIndex === null) {
|
||||
setActiveTagIndex(0);
|
||||
} else {
|
||||
setActiveTagIndex((prev) =>
|
||||
prev! + 1 >= tags.length ? 0 : prev! + 1
|
||||
);
|
||||
}
|
||||
break;
|
||||
case "ArrowLeft":
|
||||
e.preventDefault();
|
||||
if (activeTagIndex === null) {
|
||||
setActiveTagIndex(tags.length - 1);
|
||||
} else {
|
||||
setActiveTagIndex((prev) =>
|
||||
prev! === 0 ? tags.length - 1 : prev! - 1
|
||||
);
|
||||
}
|
||||
break;
|
||||
case "Home":
|
||||
e.preventDefault();
|
||||
setActiveTagIndex(0);
|
||||
break;
|
||||
case "End":
|
||||
e.preventDefault();
|
||||
setActiveTagIndex(tags.length - 1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const removeTag = (idToRemove: string) => {
|
||||
setTags(tags.filter((tag) => tag.id !== idToRemove));
|
||||
onTagRemove?.(
|
||||
tags.find((tag) => tag.id === idToRemove)?.text || ""
|
||||
);
|
||||
setTagCount((prevTagCount) => prevTagCount - 1);
|
||||
};
|
||||
|
||||
const onSortEnd = (oldIndex: number, newIndex: number) => {
|
||||
setTags((currentTags) => {
|
||||
const newTags = [...currentTags];
|
||||
const [removedTag] = newTags.splice(oldIndex, 1);
|
||||
newTags.splice(newIndex, 0, removedTag);
|
||||
|
||||
return newTags;
|
||||
});
|
||||
};
|
||||
|
||||
const handleClearAll = () => {
|
||||
if (!onClearAll) {
|
||||
setActiveTagIndex(-1);
|
||||
setTags([]);
|
||||
return;
|
||||
}
|
||||
onClearAll?.();
|
||||
};
|
||||
|
||||
// const filteredAutocompleteOptions = autocompleteFilter
|
||||
// ? autocompleteOptions?.filter((option) => autocompleteFilter(option.text))
|
||||
// : autocompleteOptions;
|
||||
const filteredAutocompleteOptions = useMemo(() => {
|
||||
return (autocompleteOptions || []).filter((option) =>
|
||||
option.text
|
||||
.toLowerCase()
|
||||
.includes(inputValue ? inputValue.toLowerCase() : "")
|
||||
);
|
||||
}, [inputValue, autocompleteOptions]);
|
||||
|
||||
const displayedTags = sortTags ? [...tags].sort() : tags;
|
||||
|
||||
const truncatedTags = truncate
|
||||
? tags.map((tag) => ({
|
||||
id: tag.id,
|
||||
text:
|
||||
tag.text?.length > truncate
|
||||
? `${tag.text.substring(0, truncate)}...`
|
||||
: tag.text
|
||||
}))
|
||||
: displayedTags;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`w-full flex ${!inlineTags && tags.length > 0 ? "gap-3" : ""} ${
|
||||
inputFieldPosition === "bottom"
|
||||
? "flex-col"
|
||||
: inputFieldPosition === "top"
|
||||
? "flex-col-reverse"
|
||||
: "flex-row"
|
||||
}`}
|
||||
>
|
||||
{!usePopoverForTags &&
|
||||
(!inlineTags ? (
|
||||
<TagList
|
||||
tags={truncatedTags}
|
||||
customTagRenderer={customTagRenderer}
|
||||
variant={variant}
|
||||
size={size}
|
||||
shape={shape}
|
||||
borderStyle={borderStyle}
|
||||
textCase={textCase}
|
||||
interaction={interaction}
|
||||
animation={animation}
|
||||
textStyle={textStyle}
|
||||
onTagClick={onTagClick}
|
||||
draggable={draggable}
|
||||
onSortEnd={onSortEnd}
|
||||
onRemoveTag={removeTag}
|
||||
direction={direction}
|
||||
inlineTags={inlineTags}
|
||||
activeTagIndex={activeTagIndex}
|
||||
setActiveTagIndex={setActiveTagIndex}
|
||||
classStyleProps={{
|
||||
tagListClasses: styleClasses?.tagList,
|
||||
tagClasses: styleClasses?.tag
|
||||
}}
|
||||
disabled={disabled}
|
||||
/>
|
||||
) : (
|
||||
!enableAutocomplete && (
|
||||
<div className="w-full">
|
||||
<div
|
||||
className={cn(
|
||||
`flex flex-row flex-wrap items-center gap-2 p-2 w-full rounded-md border-2 border-input bg-background text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50`,
|
||||
styleClasses?.inlineTagsContainer
|
||||
)}
|
||||
>
|
||||
<TagList
|
||||
tags={truncatedTags}
|
||||
customTagRenderer={customTagRenderer}
|
||||
variant={variant}
|
||||
size={size}
|
||||
shape={shape}
|
||||
borderStyle={borderStyle}
|
||||
textCase={textCase}
|
||||
interaction={interaction}
|
||||
animation={animation}
|
||||
textStyle={textStyle}
|
||||
onTagClick={onTagClick}
|
||||
draggable={draggable}
|
||||
onSortEnd={onSortEnd}
|
||||
onRemoveTag={removeTag}
|
||||
direction={direction}
|
||||
inlineTags={inlineTags}
|
||||
activeTagIndex={activeTagIndex}
|
||||
setActiveTagIndex={setActiveTagIndex}
|
||||
classStyleProps={{
|
||||
tagListClasses:
|
||||
styleClasses?.tagList,
|
||||
tagClasses: styleClasses?.tag
|
||||
}}
|
||||
disabled={disabled}
|
||||
/>
|
||||
<Input
|
||||
ref={inputRef}
|
||||
id={id}
|
||||
type="text"
|
||||
placeholder={
|
||||
maxTags !== undefined &&
|
||||
tags.length >= maxTags
|
||||
? placeholderWhenFull
|
||||
: placeholder
|
||||
}
|
||||
value={inputValue}
|
||||
onChange={handleInputChange}
|
||||
onKeyDown={handleKeyDown}
|
||||
onFocus={handleInputFocus}
|
||||
onBlur={handleInputBlur}
|
||||
{...inputProps}
|
||||
className={cn(
|
||||
"border-0 h-5 bg-transparent focus-visible:ring-0 focus-visible:ring-transparent focus-visible:ring-offset-0 flex-1 w-fit",
|
||||
// className,
|
||||
styleClasses?.input
|
||||
)}
|
||||
autoComplete={
|
||||
enableAutocomplete ? "on" : "off"
|
||||
}
|
||||
list={
|
||||
enableAutocomplete
|
||||
? "autocomplete-options"
|
||||
: undefined
|
||||
}
|
||||
disabled={
|
||||
disabled ||
|
||||
(maxTags !== undefined &&
|
||||
tags.length >= maxTags)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
))}
|
||||
{enableAutocomplete ? (
|
||||
<div className="w-full">
|
||||
<Autocomplete
|
||||
tags={tags}
|
||||
setTags={setTags}
|
||||
setInputValue={setInputValue}
|
||||
autocompleteOptions={
|
||||
filteredAutocompleteOptions as Tag[]
|
||||
}
|
||||
setTagCount={setTagCount}
|
||||
maxTags={maxTags}
|
||||
onTagAdd={onTagAdd}
|
||||
onTagRemove={onTagRemove}
|
||||
allowDuplicates={allowDuplicates ?? false}
|
||||
inlineTags={inlineTags}
|
||||
usePortal={usePortal}
|
||||
classStyleProps={{
|
||||
command: styleClasses?.autoComplete?.command,
|
||||
popoverTrigger:
|
||||
styleClasses?.autoComplete?.popoverTrigger,
|
||||
popoverContent:
|
||||
styleClasses?.autoComplete?.popoverContent,
|
||||
commandList:
|
||||
styleClasses?.autoComplete?.commandList,
|
||||
commandGroup:
|
||||
styleClasses?.autoComplete?.commandGroup,
|
||||
commandItem:
|
||||
styleClasses?.autoComplete?.commandItem
|
||||
}}
|
||||
>
|
||||
{!usePopoverForTags ? (
|
||||
!inlineTags ? (
|
||||
// <CommandInput
|
||||
// placeholder={maxTags !== undefined && tags.length >= maxTags ? placeholderWhenFull : placeholder}
|
||||
// ref={inputRef}
|
||||
// value={inputValue}
|
||||
// disabled={disabled || (maxTags !== undefined && tags.length >= maxTags)}
|
||||
// onChangeCapture={handleInputChange}
|
||||
// onKeyDown={handleKeyDown}
|
||||
// onFocus={handleInputFocus}
|
||||
// onBlur={handleInputBlur}
|
||||
// className={cn(
|
||||
// 'w-full',
|
||||
// // className,
|
||||
// styleClasses?.input,
|
||||
// )}
|
||||
// />
|
||||
<Input
|
||||
ref={inputRef}
|
||||
id={id}
|
||||
type="text"
|
||||
placeholder={
|
||||
maxTags !== undefined &&
|
||||
tags.length >= maxTags
|
||||
? placeholderWhenFull
|
||||
: placeholder
|
||||
}
|
||||
value={inputValue}
|
||||
onChange={handleInputChange}
|
||||
onKeyDown={handleKeyDown}
|
||||
onFocus={handleInputFocus}
|
||||
onBlur={handleInputBlur}
|
||||
{...inputProps}
|
||||
className={cn(
|
||||
"border-0 h-5 bg-transparent focus-visible:ring-0 focus-visible:ring-transparent focus-visible:ring-offset-0 flex-1 w-fit",
|
||||
// className,
|
||||
styleClasses?.input
|
||||
)}
|
||||
autoComplete={
|
||||
enableAutocomplete ? "on" : "off"
|
||||
}
|
||||
list={
|
||||
enableAutocomplete
|
||||
? "autocomplete-options"
|
||||
: undefined
|
||||
}
|
||||
disabled={
|
||||
disabled ||
|
||||
(maxTags !== undefined &&
|
||||
tags.length >= maxTags)
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
className={cn(
|
||||
`flex flex-row flex-wrap items-center p-2 gap-2 h-fit w-full bg-background text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50`,
|
||||
styleClasses?.inlineTagsContainer
|
||||
)}
|
||||
>
|
||||
<TagList
|
||||
tags={truncatedTags}
|
||||
customTagRenderer={
|
||||
customTagRenderer
|
||||
}
|
||||
variant={variant}
|
||||
size={size}
|
||||
shape={shape}
|
||||
borderStyle={borderStyle}
|
||||
textCase={textCase}
|
||||
interaction={interaction}
|
||||
animation={animation}
|
||||
textStyle={textStyle}
|
||||
onTagClick={onTagClick}
|
||||
draggable={draggable}
|
||||
onSortEnd={onSortEnd}
|
||||
onRemoveTag={removeTag}
|
||||
direction={direction}
|
||||
inlineTags={inlineTags}
|
||||
activeTagIndex={activeTagIndex}
|
||||
setActiveTagIndex={
|
||||
setActiveTagIndex
|
||||
}
|
||||
classStyleProps={{
|
||||
tagListClasses:
|
||||
styleClasses?.tagList,
|
||||
tagClasses: styleClasses?.tag
|
||||
}}
|
||||
disabled={disabled}
|
||||
/>
|
||||
{/* <CommandInput
|
||||
placeholder={maxTags !== undefined && tags.length >= maxTags ? placeholderWhenFull : placeholder}
|
||||
ref={inputRef}
|
||||
value={inputValue}
|
||||
disabled={disabled || (maxTags !== undefined && tags.length >= maxTags)}
|
||||
onChangeCapture={handleInputChange}
|
||||
onKeyDown={handleKeyDown}
|
||||
onFocus={handleInputFocus}
|
||||
onBlur={handleInputBlur}
|
||||
inlineTags={inlineTags}
|
||||
className={cn(
|
||||
'border-0 flex-1 w-fit h-5',
|
||||
// className,
|
||||
styleClasses?.input,
|
||||
)}
|
||||
/> */}
|
||||
<Input
|
||||
ref={inputRef}
|
||||
id={id}
|
||||
type="text"
|
||||
placeholder={
|
||||
maxTags !== undefined &&
|
||||
tags.length >= maxTags
|
||||
? placeholderWhenFull
|
||||
: placeholder
|
||||
}
|
||||
value={inputValue}
|
||||
onChange={handleInputChange}
|
||||
onKeyDown={handleKeyDown}
|
||||
onFocus={handleInputFocus}
|
||||
onBlur={handleInputBlur}
|
||||
{...inputProps}
|
||||
className={cn(
|
||||
"border-0 h-5 bg-transparent focus-visible:ring-0 focus-visible:ring-transparent focus-visible:ring-offset-0 flex-1 w-fit",
|
||||
// className,
|
||||
styleClasses?.input
|
||||
)}
|
||||
autoComplete={
|
||||
enableAutocomplete
|
||||
? "on"
|
||||
: "off"
|
||||
}
|
||||
list={
|
||||
enableAutocomplete
|
||||
? "autocomplete-options"
|
||||
: undefined
|
||||
}
|
||||
disabled={
|
||||
disabled ||
|
||||
(maxTags !== undefined &&
|
||||
tags.length >= maxTags)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
) : (
|
||||
<TagPopover
|
||||
tags={truncatedTags}
|
||||
customTagRenderer={customTagRenderer}
|
||||
variant={variant}
|
||||
size={size}
|
||||
shape={shape}
|
||||
borderStyle={borderStyle}
|
||||
textCase={textCase}
|
||||
interaction={interaction}
|
||||
animation={animation}
|
||||
textStyle={textStyle}
|
||||
onTagClick={onTagClick}
|
||||
draggable={draggable}
|
||||
onSortEnd={onSortEnd}
|
||||
onRemoveTag={removeTag}
|
||||
direction={direction}
|
||||
activeTagIndex={activeTagIndex}
|
||||
setActiveTagIndex={setActiveTagIndex}
|
||||
classStyleProps={{
|
||||
popoverClasses:
|
||||
styleClasses?.tagPopover,
|
||||
tagListClasses: styleClasses?.tagList,
|
||||
tagClasses: styleClasses?.tag
|
||||
}}
|
||||
disabled={disabled}
|
||||
>
|
||||
{/* <CommandInput
|
||||
placeholder={maxTags !== undefined && tags.length >= maxTags ? placeholderWhenFull : placeholder}
|
||||
ref={inputRef}
|
||||
value={inputValue}
|
||||
disabled={disabled || (maxTags !== undefined && tags.length >= maxTags)}
|
||||
onChangeCapture={handleInputChange}
|
||||
onKeyDown={handleKeyDown}
|
||||
onFocus={handleInputFocus}
|
||||
onBlur={handleInputBlur}
|
||||
className={cn(
|
||||
'w-full',
|
||||
// className,
|
||||
styleClasses?.input,
|
||||
)}
|
||||
/> */}
|
||||
<Input
|
||||
ref={inputRef}
|
||||
id={id}
|
||||
type="text"
|
||||
placeholder={
|
||||
maxTags !== undefined &&
|
||||
tags.length >= maxTags
|
||||
? placeholderWhenFull
|
||||
: placeholder
|
||||
}
|
||||
value={inputValue}
|
||||
onChange={handleInputChange}
|
||||
onKeyDown={handleKeyDown}
|
||||
onFocus={handleInputFocus}
|
||||
onBlur={handleInputBlur}
|
||||
{...inputProps}
|
||||
className={cn(
|
||||
"border-0 h-5 bg-transparent focus-visible:ring-0 focus-visible:ring-transparent focus-visible:ring-offset-0 flex-1 w-fit",
|
||||
// className,
|
||||
styleClasses?.input
|
||||
)}
|
||||
autoComplete={
|
||||
enableAutocomplete ? "on" : "off"
|
||||
}
|
||||
list={
|
||||
enableAutocomplete
|
||||
? "autocomplete-options"
|
||||
: undefined
|
||||
}
|
||||
disabled={
|
||||
disabled ||
|
||||
(maxTags !== undefined &&
|
||||
tags.length >= maxTags)
|
||||
}
|
||||
/>
|
||||
</TagPopover>
|
||||
)}
|
||||
</Autocomplete>
|
||||
</div>
|
||||
) : (
|
||||
<div className="w-full">
|
||||
{!usePopoverForTags ? (
|
||||
!inlineTags ? (
|
||||
<Input
|
||||
ref={inputRef}
|
||||
id={id}
|
||||
type="text"
|
||||
placeholder={
|
||||
maxTags !== undefined &&
|
||||
tags.length >= maxTags
|
||||
? placeholderWhenFull
|
||||
: placeholder
|
||||
}
|
||||
value={inputValue}
|
||||
onChange={handleInputChange}
|
||||
onKeyDown={handleKeyDown}
|
||||
onFocus={handleInputFocus}
|
||||
onBlur={handleInputBlur}
|
||||
{...inputProps}
|
||||
className={cn(
|
||||
styleClasses?.input
|
||||
// className
|
||||
)}
|
||||
autoComplete={
|
||||
enableAutocomplete ? "on" : "off"
|
||||
}
|
||||
list={
|
||||
enableAutocomplete
|
||||
? "autocomplete-options"
|
||||
: undefined
|
||||
}
|
||||
disabled={
|
||||
disabled ||
|
||||
(maxTags !== undefined &&
|
||||
tags.length >= maxTags)
|
||||
}
|
||||
/>
|
||||
) : null
|
||||
) : (
|
||||
<TagPopover
|
||||
tags={truncatedTags}
|
||||
customTagRenderer={customTagRenderer}
|
||||
variant={variant}
|
||||
size={size}
|
||||
shape={shape}
|
||||
borderStyle={borderStyle}
|
||||
textCase={textCase}
|
||||
interaction={interaction}
|
||||
animation={animation}
|
||||
textStyle={textStyle}
|
||||
onTagClick={onTagClick}
|
||||
draggable={draggable}
|
||||
onSortEnd={onSortEnd}
|
||||
onRemoveTag={removeTag}
|
||||
direction={direction}
|
||||
activeTagIndex={activeTagIndex}
|
||||
setActiveTagIndex={setActiveTagIndex}
|
||||
classStyleProps={{
|
||||
popoverClasses: styleClasses?.tagPopover,
|
||||
tagListClasses: styleClasses?.tagList,
|
||||
tagClasses: styleClasses?.tag
|
||||
}}
|
||||
disabled={disabled}
|
||||
>
|
||||
<Input
|
||||
ref={inputRef}
|
||||
id={id}
|
||||
type="text"
|
||||
placeholder={
|
||||
maxTags !== undefined &&
|
||||
tags.length >= maxTags
|
||||
? placeholderWhenFull
|
||||
: placeholder
|
||||
}
|
||||
value={inputValue}
|
||||
onChange={handleInputChange}
|
||||
onKeyDown={handleKeyDown}
|
||||
onFocus={handleInputFocus}
|
||||
onBlur={handleInputBlur}
|
||||
{...inputProps}
|
||||
autoComplete={
|
||||
enableAutocomplete ? "on" : "off"
|
||||
}
|
||||
list={
|
||||
enableAutocomplete
|
||||
? "autocomplete-options"
|
||||
: undefined
|
||||
}
|
||||
disabled={
|
||||
disabled ||
|
||||
(maxTags !== undefined &&
|
||||
tags.length >= maxTags)
|
||||
}
|
||||
className={cn(
|
||||
"border-0 w-full",
|
||||
styleClasses?.input
|
||||
// className
|
||||
)}
|
||||
/>
|
||||
</TagPopover>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{showCount && maxTags && (
|
||||
<div className="flex">
|
||||
<span className="text-muted-foreground text-sm mt-1 ml-auto">
|
||||
{`${tagCount}`}/{`${maxTags}`}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{clearAll && (
|
||||
<Button
|
||||
type="button"
|
||||
onClick={handleClearAll}
|
||||
className={cn("mt-2", styleClasses?.clearAllButton)}
|
||||
>
|
||||
Clear All
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
TagInput.displayName = "TagInput";
|
||||
|
||||
export function uuid() {
|
||||
return crypto.getRandomValues(new Uint32Array(1))[0].toString();
|
||||
}
|
||||
|
||||
export { TagInput };
|
||||
205
src/components/tags/tag-list.tsx
Normal file
205
src/components/tags/tag-list.tsx
Normal file
@@ -0,0 +1,205 @@
|
||||
import React from "react";
|
||||
import { TagInputStyleClassesProps, type Tag as TagType } from "./tag-input";
|
||||
import { Tag, TagProps } from "./tag";
|
||||
import SortableList, { SortableItem } from "react-easy-sort";
|
||||
import { cn } from "@app/lib/cn";
|
||||
|
||||
export type TagListProps = {
|
||||
tags: TagType[];
|
||||
customTagRenderer?: (tag: TagType, isActiveTag: boolean) => React.ReactNode;
|
||||
direction?: TagProps["direction"];
|
||||
onSortEnd: (oldIndex: number, newIndex: number) => void;
|
||||
className?: string;
|
||||
inlineTags?: boolean;
|
||||
activeTagIndex?: number | null;
|
||||
setActiveTagIndex?: (index: number | null) => void;
|
||||
classStyleProps: {
|
||||
tagListClasses: TagInputStyleClassesProps["tagList"];
|
||||
tagClasses: TagInputStyleClassesProps["tag"];
|
||||
};
|
||||
disabled?: boolean;
|
||||
} & Omit<TagProps, "tagObj">;
|
||||
|
||||
const DropTarget: React.FC = () => {
|
||||
return <div className={cn("h-full rounded-md bg-secondary/50")} />;
|
||||
};
|
||||
|
||||
export const TagList: React.FC<TagListProps> = ({
|
||||
tags,
|
||||
customTagRenderer,
|
||||
direction,
|
||||
draggable,
|
||||
onSortEnd,
|
||||
className,
|
||||
inlineTags,
|
||||
activeTagIndex,
|
||||
setActiveTagIndex,
|
||||
classStyleProps,
|
||||
disabled,
|
||||
...tagListProps
|
||||
}) => {
|
||||
const [draggedTagId, setDraggedTagId] = React.useState<string | null>(null);
|
||||
|
||||
const handleMouseDown = (id: string) => {
|
||||
setDraggedTagId(id);
|
||||
};
|
||||
|
||||
const handleMouseUp = () => {
|
||||
setDraggedTagId(null);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{!inlineTags ? (
|
||||
<div
|
||||
className={cn(
|
||||
"rounded-md w-full",
|
||||
// className,
|
||||
{
|
||||
"flex flex-wrap gap-2": direction === "row",
|
||||
"flex flex-col gap-2": direction === "column"
|
||||
},
|
||||
classStyleProps?.tagListClasses?.container
|
||||
)}
|
||||
>
|
||||
{draggable ? (
|
||||
<SortableList
|
||||
onSortEnd={onSortEnd}
|
||||
// className="flex flex-wrap gap-2 list"
|
||||
className={`flex flex-wrap gap-2 list ${classStyleProps?.tagListClasses?.sortableList}`}
|
||||
dropTarget={<DropTarget />}
|
||||
>
|
||||
{tags.map((tagObj, index) => (
|
||||
<SortableItem key={tagObj.id}>
|
||||
<div
|
||||
onMouseDown={() =>
|
||||
handleMouseDown(tagObj.id)
|
||||
}
|
||||
onMouseLeave={handleMouseUp}
|
||||
className={cn(
|
||||
{
|
||||
"border border-solid border-primary rounded-md":
|
||||
draggedTagId === tagObj.id
|
||||
},
|
||||
"transition-all duration-200 ease-in-out"
|
||||
)}
|
||||
>
|
||||
{customTagRenderer ? (
|
||||
customTagRenderer(
|
||||
tagObj,
|
||||
index === activeTagIndex
|
||||
)
|
||||
) : (
|
||||
<Tag
|
||||
tagObj={tagObj}
|
||||
isActiveTag={
|
||||
index === activeTagIndex
|
||||
}
|
||||
direction={direction}
|
||||
draggable={draggable}
|
||||
tagClasses={
|
||||
classStyleProps?.tagClasses
|
||||
}
|
||||
{...tagListProps}
|
||||
disabled={disabled}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</SortableItem>
|
||||
))}
|
||||
</SortableList>
|
||||
) : (
|
||||
tags.map((tagObj, index) =>
|
||||
customTagRenderer ? (
|
||||
customTagRenderer(
|
||||
tagObj,
|
||||
index === activeTagIndex
|
||||
)
|
||||
) : (
|
||||
<Tag
|
||||
key={tagObj.id}
|
||||
tagObj={tagObj}
|
||||
isActiveTag={index === activeTagIndex}
|
||||
direction={direction}
|
||||
draggable={draggable}
|
||||
tagClasses={classStyleProps?.tagClasses}
|
||||
{...tagListProps}
|
||||
disabled={disabled}
|
||||
/>
|
||||
)
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{draggable ? (
|
||||
<SortableList
|
||||
onSortEnd={onSortEnd}
|
||||
className="flex flex-wrap gap-2 list"
|
||||
dropTarget={<DropTarget />}
|
||||
>
|
||||
{tags.map((tagObj, index) => (
|
||||
<SortableItem key={tagObj.id}>
|
||||
<div
|
||||
onMouseDown={() =>
|
||||
handleMouseDown(tagObj.id)
|
||||
}
|
||||
onMouseLeave={handleMouseUp}
|
||||
className={cn(
|
||||
{
|
||||
"border border-solid border-primary rounded-md":
|
||||
draggedTagId === tagObj.id
|
||||
},
|
||||
"transition-all duration-200 ease-in-out"
|
||||
)}
|
||||
>
|
||||
{customTagRenderer ? (
|
||||
customTagRenderer(
|
||||
tagObj,
|
||||
index === activeTagIndex
|
||||
)
|
||||
) : (
|
||||
<Tag
|
||||
tagObj={tagObj}
|
||||
isActiveTag={
|
||||
index === activeTagIndex
|
||||
}
|
||||
direction={direction}
|
||||
draggable={draggable}
|
||||
tagClasses={
|
||||
classStyleProps?.tagClasses
|
||||
}
|
||||
{...tagListProps}
|
||||
disabled={disabled}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</SortableItem>
|
||||
))}
|
||||
</SortableList>
|
||||
) : (
|
||||
tags.map((tagObj, index) =>
|
||||
customTagRenderer ? (
|
||||
customTagRenderer(
|
||||
tagObj,
|
||||
index === activeTagIndex
|
||||
)
|
||||
) : (
|
||||
<Tag
|
||||
key={tagObj.id}
|
||||
tagObj={tagObj}
|
||||
isActiveTag={index === activeTagIndex}
|
||||
direction={direction}
|
||||
draggable={draggable}
|
||||
tagClasses={classStyleProps?.tagClasses}
|
||||
{...tagListProps}
|
||||
disabled={disabled}
|
||||
/>
|
||||
)
|
||||
)
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
207
src/components/tags/tag-popover.tsx
Normal file
207
src/components/tags/tag-popover.tsx
Normal file
@@ -0,0 +1,207 @@
|
||||
import React, { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
|
||||
import { TagInputStyleClassesProps, type Tag as TagType } from "./tag-input";
|
||||
import { TagList, TagListProps } from "./tag-list";
|
||||
import { Button } from "../ui/button";
|
||||
import { cn } from "@app/lib/cn";
|
||||
|
||||
type TagPopoverProps = {
|
||||
children: React.ReactNode;
|
||||
tags: TagType[];
|
||||
customTagRenderer?: (tag: TagType, isActiveTag: boolean) => React.ReactNode;
|
||||
activeTagIndex?: number | null;
|
||||
setActiveTagIndex?: (index: number | null) => void;
|
||||
classStyleProps: {
|
||||
popoverClasses: TagInputStyleClassesProps["tagPopover"];
|
||||
tagListClasses: TagInputStyleClassesProps["tagList"];
|
||||
tagClasses: TagInputStyleClassesProps["tag"];
|
||||
};
|
||||
disabled?: boolean;
|
||||
usePortal?: boolean;
|
||||
} & TagListProps;
|
||||
|
||||
export const TagPopover: React.FC<TagPopoverProps> = ({
|
||||
children,
|
||||
tags,
|
||||
customTagRenderer,
|
||||
activeTagIndex,
|
||||
setActiveTagIndex,
|
||||
classStyleProps,
|
||||
disabled,
|
||||
usePortal,
|
||||
...tagProps
|
||||
}) => {
|
||||
const triggerContainerRef = useRef<HTMLDivElement | null>(null);
|
||||
const triggerRef = useRef<HTMLButtonElement | null>(null);
|
||||
const popoverContentRef = useRef<HTMLDivElement | null>(null);
|
||||
const inputRef = useRef<HTMLInputElement | null>(null);
|
||||
|
||||
const [popoverWidth, setPopoverWidth] = useState<number>(0);
|
||||
const [isPopoverOpen, setIsPopoverOpen] = useState(false);
|
||||
const [inputFocused, setInputFocused] = useState(false);
|
||||
const [sideOffset, setSideOffset] = useState<number>(0);
|
||||
|
||||
useEffect(() => {
|
||||
const handleResize = () => {
|
||||
if (triggerContainerRef.current && triggerRef.current) {
|
||||
setPopoverWidth(triggerContainerRef.current.offsetWidth);
|
||||
setSideOffset(
|
||||
triggerContainerRef.current.offsetWidth -
|
||||
triggerRef?.current?.offsetWidth
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
handleResize(); // Call on mount and layout changes
|
||||
|
||||
window.addEventListener("resize", handleResize); // Adjust on window resize
|
||||
return () => window.removeEventListener("resize", handleResize);
|
||||
}, [triggerContainerRef, triggerRef]);
|
||||
|
||||
// Close the popover when clicking outside of it
|
||||
useEffect(() => {
|
||||
const handleOutsideClick = (
|
||||
event: MouseEvent | TouchEvent | React.MouseEvent | React.TouchEvent
|
||||
) => {
|
||||
if (
|
||||
isPopoverOpen &&
|
||||
triggerContainerRef.current &&
|
||||
popoverContentRef.current &&
|
||||
!triggerContainerRef.current.contains(event.target as Node) &&
|
||||
!popoverContentRef.current.contains(event.target as Node)
|
||||
) {
|
||||
setIsPopoverOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener("mousedown", handleOutsideClick);
|
||||
|
||||
return () => {
|
||||
document.removeEventListener("mousedown", handleOutsideClick);
|
||||
};
|
||||
}, [isPopoverOpen]);
|
||||
|
||||
const handleOpenChange = useCallback(
|
||||
(open: boolean) => {
|
||||
if (open && triggerContainerRef.current) {
|
||||
setPopoverWidth(triggerContainerRef.current.offsetWidth);
|
||||
}
|
||||
|
||||
if (open) {
|
||||
inputRef.current?.focus();
|
||||
setIsPopoverOpen(open);
|
||||
}
|
||||
},
|
||||
[inputFocused]
|
||||
);
|
||||
|
||||
const handleInputFocus = (
|
||||
event:
|
||||
| React.FocusEvent<HTMLInputElement>
|
||||
| React.FocusEvent<HTMLTextAreaElement>
|
||||
) => {
|
||||
// Only set inputFocused to true if the popover is already open.
|
||||
// This will prevent the popover from opening due to an input focus if it was initially closed.
|
||||
if (isPopoverOpen) {
|
||||
setInputFocused(true);
|
||||
}
|
||||
|
||||
const userOnFocus = (children as React.ReactElement<any>).props.onFocus;
|
||||
if (userOnFocus) userOnFocus(event);
|
||||
};
|
||||
|
||||
const handleInputBlur = (
|
||||
event:
|
||||
| React.FocusEvent<HTMLInputElement>
|
||||
| React.FocusEvent<HTMLTextAreaElement>
|
||||
) => {
|
||||
setInputFocused(false);
|
||||
|
||||
// Allow the popover to close if no other interactions keep it open
|
||||
if (!isPopoverOpen) {
|
||||
setIsPopoverOpen(false);
|
||||
}
|
||||
|
||||
const userOnBlur = (children as React.ReactElement<any>).props.onBlur;
|
||||
if (userOnBlur) userOnBlur(event);
|
||||
};
|
||||
|
||||
return (
|
||||
<Popover
|
||||
open={isPopoverOpen}
|
||||
onOpenChange={handleOpenChange}
|
||||
modal={usePortal}
|
||||
>
|
||||
<div
|
||||
className="relative flex items-center rounded-md border border-input bg-transparent pr-3"
|
||||
ref={triggerContainerRef}
|
||||
>
|
||||
{React.cloneElement(children as React.ReactElement<any>, {
|
||||
onFocus: handleInputFocus,
|
||||
onBlur: handleInputBlur,
|
||||
ref: inputRef
|
||||
})}
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
ref={triggerRef}
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
role="combobox"
|
||||
className={cn(
|
||||
`hover:bg-transparent`,
|
||||
classStyleProps?.popoverClasses?.popoverTrigger
|
||||
)}
|
||||
onClick={() => setIsPopoverOpen(!isPopoverOpen)}
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className={`lucide lucide-chevron-down h-4 w-4 shrink-0 opacity-50 ${isPopoverOpen ? "rotate-180" : "rotate-0"}`}
|
||||
>
|
||||
<path d="m6 9 6 6 6-6"></path>
|
||||
</svg>
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
</div>
|
||||
<PopoverContent
|
||||
ref={popoverContentRef}
|
||||
className={cn(
|
||||
`w-full space-y-3`,
|
||||
classStyleProps?.popoverClasses?.popoverContent
|
||||
)}
|
||||
style={{
|
||||
marginLeft: `-${sideOffset}px`,
|
||||
width: `${popoverWidth}px`
|
||||
}}
|
||||
>
|
||||
<div className="space-y-1">
|
||||
<h4 className="text-sm font-medium leading-none">
|
||||
Entered Tags
|
||||
</h4>
|
||||
<p className="text-sm text-muted-foregrounsd text-left">
|
||||
These are the tags you've entered.
|
||||
</p>
|
||||
</div>
|
||||
<TagList
|
||||
tags={tags}
|
||||
customTagRenderer={customTagRenderer}
|
||||
activeTagIndex={activeTagIndex}
|
||||
setActiveTagIndex={setActiveTagIndex}
|
||||
classStyleProps={{
|
||||
tagListClasses: classStyleProps?.tagListClasses,
|
||||
tagClasses: classStyleProps?.tagClasses
|
||||
}}
|
||||
{...tagProps}
|
||||
disabled={disabled}
|
||||
/>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
);
|
||||
};
|
||||
169
src/components/tags/tag.tsx
Normal file
169
src/components/tags/tag.tsx
Normal file
@@ -0,0 +1,169 @@
|
||||
import React from "react";
|
||||
import { Button } from "../ui/button";
|
||||
import {
|
||||
TagInputProps,
|
||||
TagInputStyleClassesProps,
|
||||
type Tag as TagType
|
||||
} from "./tag-input";
|
||||
|
||||
import { cva } from "class-variance-authority";
|
||||
import { cn } from "@app/lib/cn";
|
||||
|
||||
export const tagVariants = cva(
|
||||
"transition-all border inline-flex items-center text-sm pl-2 rounded-md",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default:
|
||||
"bg-secondary text-secondary-foreground hover:bg-secondary/80 disabled:cursor-not-allowed disabled:opacity-50",
|
||||
primary:
|
||||
"bg-primary border-primary text-primary-foreground hover:bg-primary/90 disabled:cursor-not-allowed disabled:opacity-50",
|
||||
destructive:
|
||||
"bg-destructive border-destructive text-destructive-foreground hover:bg-destructive/90 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
},
|
||||
size: {
|
||||
sm: "text-xs h-7",
|
||||
md: "text-sm h-8",
|
||||
lg: "text-base h-9",
|
||||
xl: "text-lg h-10"
|
||||
},
|
||||
shape: {
|
||||
default: "rounded-sm",
|
||||
rounded: "rounded-lg",
|
||||
square: "rounded-none",
|
||||
pill: "rounded-full"
|
||||
},
|
||||
borderStyle: {
|
||||
default: "border-solid",
|
||||
none: "border-none",
|
||||
dashed: "border-dashed",
|
||||
dotted: "border-dotted",
|
||||
double: "border-double"
|
||||
},
|
||||
textCase: {
|
||||
uppercase: "uppercase",
|
||||
lowercase: "lowercase",
|
||||
capitalize: "capitalize"
|
||||
},
|
||||
interaction: {
|
||||
clickable: "cursor-pointer hover:shadow-md",
|
||||
nonClickable: "cursor-default"
|
||||
},
|
||||
animation: {
|
||||
none: "",
|
||||
fadeIn: "animate-fadeIn",
|
||||
slideIn: "animate-slideIn",
|
||||
bounce: "animate-bounce"
|
||||
},
|
||||
textStyle: {
|
||||
normal: "font-normal",
|
||||
bold: "font-bold",
|
||||
italic: "italic",
|
||||
underline: "underline",
|
||||
lineThrough: "line-through"
|
||||
}
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
size: "md",
|
||||
shape: "default",
|
||||
borderStyle: "default",
|
||||
interaction: "nonClickable",
|
||||
animation: "fadeIn",
|
||||
textStyle: "normal"
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
export type TagProps = {
|
||||
tagObj: TagType;
|
||||
variant: TagInputProps["variant"];
|
||||
size: TagInputProps["size"];
|
||||
shape: TagInputProps["shape"];
|
||||
borderStyle: TagInputProps["borderStyle"];
|
||||
textCase: TagInputProps["textCase"];
|
||||
interaction: TagInputProps["interaction"];
|
||||
animation: TagInputProps["animation"];
|
||||
textStyle: TagInputProps["textStyle"];
|
||||
onRemoveTag: (id: string) => void;
|
||||
isActiveTag?: boolean;
|
||||
tagClasses?: TagInputStyleClassesProps["tag"];
|
||||
disabled?: boolean;
|
||||
} & Pick<TagInputProps, "direction" | "onTagClick" | "draggable">;
|
||||
|
||||
export const Tag: React.FC<TagProps> = ({
|
||||
tagObj,
|
||||
direction,
|
||||
draggable,
|
||||
onTagClick,
|
||||
onRemoveTag,
|
||||
variant,
|
||||
size,
|
||||
shape,
|
||||
borderStyle,
|
||||
textCase,
|
||||
interaction,
|
||||
animation,
|
||||
textStyle,
|
||||
isActiveTag,
|
||||
tagClasses,
|
||||
disabled
|
||||
}) => {
|
||||
return (
|
||||
<span
|
||||
key={tagObj.id}
|
||||
draggable={draggable}
|
||||
className={cn(
|
||||
tagVariants({
|
||||
variant,
|
||||
size,
|
||||
shape,
|
||||
borderStyle,
|
||||
textCase,
|
||||
interaction,
|
||||
animation,
|
||||
textStyle
|
||||
}),
|
||||
{
|
||||
"justify-between w-full": direction === "column",
|
||||
"cursor-pointer": draggable,
|
||||
"ring-ring ring-offset-2 ring-2 ring-offset-background":
|
||||
isActiveTag
|
||||
},
|
||||
tagClasses?.body
|
||||
)}
|
||||
onClick={() => onTagClick?.(tagObj)}
|
||||
>
|
||||
{tagObj.text}
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation(); // Prevent event from bubbling up to the tag span
|
||||
onRemoveTag(tagObj.id);
|
||||
}}
|
||||
disabled={disabled}
|
||||
className={cn(
|
||||
`py-1 px-3 h-full hover:bg-transparent`,
|
||||
tagClasses?.closeButton
|
||||
)}
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="14"
|
||||
height="14"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className="lucide lucide-x"
|
||||
>
|
||||
<path d="M18 6 6 18"></path>
|
||||
<path d="m6 6 12 12"></path>
|
||||
</svg>
|
||||
</Button>
|
||||
</span>
|
||||
);
|
||||
};
|
||||
@@ -15,9 +15,9 @@ const buttonVariants = cva(
|
||||
destructive:
|
||||
"bg-destructive text-destructive-foreground hover:bg-destructive/90",
|
||||
outline:
|
||||
"border border-input bg-card hover:bg-accent hover:text-accent-foreground",
|
||||
"border-2 border-input bg-card hover:bg-accent hover:text-accent-foreground",
|
||||
secondary:
|
||||
"bg-secondary border border-input text-secondary-foreground hover:bg-secondary/80",
|
||||
"bg-secondary border border-input border-2 text-secondary-foreground hover:bg-secondary/80",
|
||||
ghost: "hover:bg-accent hover:text-accent-foreground",
|
||||
text: "",
|
||||
link: "text-primary underline-offset-4 hover:underline",
|
||||
|
||||
@@ -15,7 +15,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
|
||||
<input
|
||||
type={showPassword ? "text" : "password"}
|
||||
className={cn(
|
||||
"flex h-9 w-full rounded-md border border-input bg-card px-3 py-2 text-base md:text-sm ring-offset-background file:border-0 file:bg-transparent file:text-base md:file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
|
||||
"flex h-9 w-full rounded-md border-2 border-input bg-card px-3 py-2 text-base md:text-sm ring-offset-background file:border-0 file:bg-transparent file:text-base md:file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
ref={ref}
|
||||
@@ -39,7 +39,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
|
||||
<input
|
||||
type={type}
|
||||
className={cn(
|
||||
"flex h-9 w-full rounded-md border border-input bg-card px-3 py-2 text-base md:text-sm ring-offset-background file:border-0 file:bg-transparent file:text-base md:file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
|
||||
"flex h-9 w-full rounded-md border-2 border-input bg-card px-3 py-2 text-base md:text-sm ring-offset-background file:border-0 file:bg-transparent file:text-base md:file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
ref={ref}
|
||||
|
||||
@@ -28,7 +28,7 @@ const RadioGroupItem = React.forwardRef<
|
||||
<RadioGroupPrimitive.Item
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
|
||||
"aspect-square h-4 w-4 rounded-full border-2 border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
|
||||
@@ -19,7 +19,7 @@ const SelectTrigger = React.forwardRef<
|
||||
<SelectPrimitive.Trigger
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex h-9 w-full items-center justify-between border border-input bg-card px-3 py-2 text-base md:text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
|
||||
"flex h-9 w-full items-center justify-between border-2 border-input bg-card px-3 py-2 text-base md:text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
|
||||
className,
|
||||
"rounded-md"
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user