From f14379a1c8f79cbbfb54095434f16153f7f183c5 Mon Sep 17 00:00:00 2001 From: miloschwartz Date: Sat, 12 Apr 2025 12:40:52 -0400 Subject: [PATCH] remove forward ref --- src/components/tags/tag-input.tsx | 1370 ++++++++++++++------------- src/components/ui/alert.tsx | 76 +- src/components/ui/avatar.tsx | 81 +- src/components/ui/breadcrumb.tsx | 105 +- src/components/ui/button.tsx | 50 +- src/components/ui/card.tsx | 142 +-- src/components/ui/checkbox.tsx | 49 +- src/components/ui/command.tsx | 196 ++-- src/components/ui/dialog.tsx | 123 +-- src/components/ui/drawer.tsx | 117 ++- src/components/ui/dropdown-menu.tsx | 268 +++--- src/components/ui/form.tsx | 75 +- src/components/ui/input-otp.tsx | 79 +- src/components/ui/input.tsx | 75 +- src/components/ui/label.tsx | 22 +- src/components/ui/popover.tsx | 62 +- src/components/ui/radio-group.tsx | 30 +- src/components/ui/select.tsx | 258 ++--- src/components/ui/separator.tsx | 42 +- src/components/ui/sheet.tsx | 118 ++- src/components/ui/switch.tsx | 37 +- src/components/ui/table.tsx | 198 ++-- src/components/ui/tabs.tsx | 87 +- src/components/ui/textarea.tsx | 32 +- src/components/ui/toast.tsx | 154 +-- 25 files changed, 2067 insertions(+), 1779 deletions(-) diff --git a/src/components/tags/tag-input.tsx b/src/components/tags/tag-input.tsx index 46fabd78..500c31f0 100644 --- a/src/components/tags/tag-input.tsx +++ b/src/components/tags/tag-input.tsx @@ -105,193 +105,93 @@ export interface TagInputProps generateTagId?: () => string; } -const TagInput = React.forwardRef( - (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 TagInput = ( + { + ref, + ...props + }: TagInputProps & { + ref: React.RefObject; + } +) => { + 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(null); + const [inputValue, setInputValue] = React.useState(""); + const [tagCount, setTagCount] = React.useState( + Math.max(0, tags.length) + ); + const inputRef = React.useRef(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; - } + 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) => { - 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 handleInputChange = (e: React.ChangeEvent) => { + 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 - ) => { - setActiveTagIndex(null); // Reset active tag index when the input field gains focus - onFocus?.(event); - }; - - const handleInputBlur = (event: React.FocusEvent) => { - 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) => { - if ( - delimiterList - ? delimiterList.includes(e.key) - : e.key === delimiter || e.key === Delimiter.Enter - ) { - e.preventDefault(); - const newTagText = inputValue.trim(); + const newTagText = value.trim(); // Check if the tag is in the autocomplete options if restrictTagsToAutocomplete is true if ( @@ -300,441 +200,307 @@ const TagInput = React.forwardRef( (option) => option.text === newTagText ) ) { - // error + 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 is too short"); - // error + console.warn(`Tag "${newTagText}" is too short`); return; } - // Validate maxLength if (maxLength && newTagText.length > maxLength) { - // error - console.warn("Tag is too long"); + console.warn(`Tag "${newTagText}" is too long`); return; } const newTagId = generateTagId(); + // Add tag if duplicates are allowed or tag does not already exist if ( - newTagText && - (allowDuplicates || - !tags.some((tag) => tag.text === newTagText)) && - (maxTags === undefined || tags.length < maxTags) + allowDuplicates || + !tags.some((tag) => tag.text === newTagText) ) { - setTags([...tags, { id: newTagId, text: newTagText }]); - onTagAdd?.(newTagText); - setTagCount((prevTagCount) => prevTagCount + 1); + 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 { - 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; }); - }; + setInputValue(""); + } else { + setInputValue(newValue); + } + onInputChange?.(newValue); + }; - const handleClearAll = () => { - if (!onClearAll) { - setActiveTagIndex(-1); - setTags([]); + const handleInputFocus = ( + event: React.FocusEvent + ) => { + setActiveTagIndex(null); // Reset active tag index when the input field gains focus + onFocus?.(event); + }; + + const handleInputBlur = (event: React.FocusEvent) => { + if (addTagsOnBlur && inputValue.trim()) { + const newTagText = inputValue.trim(); + + if (validateTag && !validateTag(newTagText)) { 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]); + if (minLength && newTagText.length < minLength) { + console.warn("Tag is too short"); + return; + } - const displayedTags = sortTags ? [...tags].sort() : tags; + if (maxLength && newTagText.length > maxLength) { + console.warn("Tag is too long"); + return; + } - const truncatedTags = truncate - ? tags.map((tag) => ({ - id: tag.id, - text: - tag.text?.length > truncate - ? `${tag.text.substring(0, truncate)}...` - : tag.text - })) - : displayedTags; + 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(""); + } + } - return ( -
0 ? "gap-3" : ""} ${ - inputFieldPosition === "bottom" - ? "flex-col" - : inputFieldPosition === "top" - ? "flex-col-reverse" - : "flex-row" - }`} - > - {!usePopoverForTags && - (!inlineTags ? ( - - ) : ( - !enableAutocomplete && ( -
-
- - = 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) - } - /> -
-
- ) - ))} - {enableAutocomplete ? ( -
- - {!usePopoverForTags ? ( - !inlineTags ? ( - // = 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, - // )} - // /> - = 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) - } - /> - ) : ( -
- - {/* = 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, - )} - /> */} - = 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) - } - /> -
- ) - ) : ( - ) => { + 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 ( + (
0 ? "gap-3" : ""} ${ + inputFieldPosition === "bottom" + ? "flex-col" + : inputFieldPosition === "top" + ? "flex-col-reverse" + : "flex-row" + }`} + > + {!usePopoverForTags && + (!inlineTags ? ( + + ) : ( + !enableAutocomplete && ( +
+
+ ( onSortEnd={onSortEnd} onRemoveTag={removeTag} direction={direction} + inlineTags={inlineTags} activeTagIndex={activeTagIndex} setActiveTagIndex={setActiveTagIndex} classStyleProps={{ - popoverClasses: - styleClasses?.tagPopover, - tagListClasses: styleClasses?.tagList, + tagListClasses: + styleClasses?.tagList, tagClasses: styleClasses?.tag }} disabled={disabled} - > - {/* = 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, - )} - /> */} - = 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) - } - /> - - )} - -
- ) : ( -
- {!usePopoverForTags ? ( - !inlineTags ? ( + /> ( 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 - // className )} autoComplete={ enableAutocomplete ? "on" : "off" @@ -852,7 +561,184 @@ const TagInput = React.forwardRef( tags.length >= maxTags) } /> - ) : null +
+
+ ) + ))} + {enableAutocomplete ? ( +
+ + {!usePopoverForTags ? ( + !inlineTags ? ( + // = 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, + // )} + // /> + (= 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) + } + />) + ) : ( +
+ + {/* = 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, + )} + /> */} + = 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) + } + /> +
+ ) ) : ( ( activeTagIndex={activeTagIndex} setActiveTagIndex={setActiveTagIndex} classStyleProps={{ - popoverClasses: styleClasses?.tagPopover, + popoverClasses: + styleClasses?.tagPopover, tagListClasses: styleClasses?.tagList, tagClasses: styleClasses?.tag }} disabled={disabled} > + {/* = 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, + )} + /> */} ( 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" } @@ -908,37 +815,134 @@ const TagInput = React.forwardRef( (maxTags !== undefined && tags.length >= maxTags) } - className={cn( - "border-0 w-full", - styleClasses?.input - // className - )} /> )} -
- )} - - {showCount && maxTags && ( -
- - {`${tagCount}`}/{`${maxTags}`} - -
- )} - {clearAll && ( - - )} -
- ); - } -); + +
+ ) : ( +
+ {!usePopoverForTags ? ( + !inlineTags ? ( + = 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 + ) : ( + + = 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 + )} + /> + + )} +
+ )} + {showCount && maxTags && ( +
+ + {`${tagCount}`}/{`${maxTags}`} + +
+ )} + {clearAll && ( + + )} +
) + ); +}; TagInput.displayName = "TagInput"; diff --git a/src/components/ui/alert.tsx b/src/components/ui/alert.tsx index 8d07ca3e..2e167650 100644 --- a/src/components/ui/alert.tsx +++ b/src/components/ui/alert.tsx @@ -22,44 +22,52 @@ const alertVariants = cva( }, ); -const Alert = React.forwardRef< - HTMLDivElement, - React.HTMLAttributes & VariantProps ->(({ className, variant, ...props }, ref) => ( -
-)); +const Alert = ( + { + ref, + className, + variant, + ...props + } +) => (
); Alert.displayName = "Alert"; -const AlertTitle = React.forwardRef< - HTMLParagraphElement, - React.HTMLAttributes ->(({ className, ...props }, ref) => ( -
-)); +const AlertTitle = ( + { + ref, + className, + ...props + }: React.HTMLAttributes & { + ref: React.RefObject; + } +) => (
); AlertTitle.displayName = "AlertTitle"; -const AlertDescription = React.forwardRef< - HTMLParagraphElement, - React.HTMLAttributes ->(({ className, ...props }, ref) => ( -
-)); +const AlertDescription = ( + { + ref, + className, + ...props + }: React.HTMLAttributes & { + ref: React.RefObject; + } +) => (
); AlertDescription.displayName = "AlertDescription"; export { Alert, AlertTitle, AlertDescription }; diff --git a/src/components/ui/avatar.tsx b/src/components/ui/avatar.tsx index ef6e4355..b02832a5 100644 --- a/src/components/ui/avatar.tsx +++ b/src/components/ui/avatar.tsx @@ -5,46 +5,55 @@ import * as AvatarPrimitive from "@radix-ui/react-avatar" import { cn } from "@app/lib/cn" -const Avatar = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ( - -)) +const Avatar = ( + { + ref, + className, + ...props + }: React.ComponentPropsWithoutRef & { + ref: React.RefObject>; + } +) => () Avatar.displayName = AvatarPrimitive.Root.displayName -const AvatarImage = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ( - -)) +const AvatarImage = ( + { + ref, + className, + ...props + }: React.ComponentPropsWithoutRef & { + ref: React.RefObject>; + } +) => () AvatarImage.displayName = AvatarPrimitive.Image.displayName -const AvatarFallback = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ( - -)) +const AvatarFallback = ( + { + ref, + className, + ...props + }: React.ComponentPropsWithoutRef & { + ref: React.RefObject>; + } +) => () AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName export { Avatar, AvatarImage, AvatarFallback } diff --git a/src/components/ui/breadcrumb.tsx b/src/components/ui/breadcrumb.tsx index dd40aa55..464475f8 100644 --- a/src/components/ui/breadcrumb.tsx +++ b/src/components/ui/breadcrumb.tsx @@ -4,47 +4,55 @@ import { ChevronRight, MoreHorizontal } from "lucide-react" import { cn } from "@app/lib/cn" -const Breadcrumb = React.forwardRef< - HTMLElement, - React.ComponentPropsWithoutRef<"nav"> & { - separator?: React.ReactNode +const Breadcrumb = ( + { + ref, + ...props } ->(({ ...props }, ref) =>