Uecko/Uecko_ERP
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

.

Browse Source
This commit is contained in:
David Arranz 2026-06-26 11:21:52 +02:00
parent 1551d65f63
commit ad066b1ad0
1 changed files with 45 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
packages/rdx-ui/src/components/form/select-field.tsx
View File

@ -8,7 +8,6 @@ import {
SelectTrigger, SelectTrigger,
} from "@repo/shadcn-ui/components"; } from "@repo/shadcn-ui/components";
import { cn } from "@repo/shadcn-ui/lib/utils"; import { cn } from "@repo/shadcn-ui/lib/utils";
import { XIcon } from "lucide-react";
import React from "react"; import React from "react";
import { Controller, type FieldPath, type FieldValues, useFormContext } from "react-hook-form"; import { Controller, type FieldPath, type FieldValues, useFormContext } from "react-hook-form";
@ -67,7 +66,6 @@ export function SelectField<TFormValues extends FieldValues>({
clearable = false, clearable = false,
clearLabel = "Sin selección", clearLabel = "Sin selección",
clearButtonLabel = "Quitar selección",
emptyValue = null, emptyValue = null,
placeholder, placeholder,
@ -128,55 +126,27 @@ export function SelectField<TFormValues extends FieldValues>({
}} }}
value={fieldValue} value={fieldValue}
> >
<div className="relative"> <SelectTrigger
<SelectTrigger aria-invalid={fieldState.invalid}
aria-invalid={fieldState.invalid} aria-required={required}
aria-required={required} className={cn(
"bg-muted/50 font-medium",
"hover:border-ring hover:ring-ring/20 hover:ring-[3px]",
"focus-visible:border-ring focus-visible:ring-ring/60 focus-visible:ring-[3px]",
"placeholder:text-muted-foreground/50",
inputClassName
)}
id={triggerId}
>
<span
className={cn( className={cn(
"bg-muted/50 font-medium", "truncate text-left",
"hover:border-ring hover:ring-ring/20 hover:ring-[3px]", selectedItem ? "" : "text-muted-foreground font-normal italic"
"focus-visible:border-ring focus-visible:ring-ring/60 focus-visible:ring-[3px]",
"placeholder:text-muted-foreground/50",
clearable && selectedItem && !isDisabled ? "pr-9" : "",
inputClassName
)} )}
id={triggerId}
> >
<span {selectedItem?.label ?? placeholder}
className={cn( </span>
"truncate text-left", </SelectTrigger>
selectedItem ? "" : "text-muted-foreground font-normal italic"
)}
>
{selectedItem?.label ?? placeholder}
</span>
</SelectTrigger>
{clearable && selectedItem && !isDisabled ? (
<button
aria-label={clearButtonLabel}
className={cn(
"text-muted-foreground hover:text-foreground",
"absolute top-1/2 right-2 z-10 inline-flex size-5 -translate-y-1/2 items-center justify-center rounded-sm",
"focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none"
)}
onClick={(event) => {
event.preventDefault();
event.stopPropagation();
field.onChange(emptyValue);
onChange?.(emptyValue);
}}
onMouseDown={(event) => {
event.preventDefault();
event.stopPropagation();
}}
type="button"
>
<XIcon aria-hidden="true" className="size-3.5" />
</button>
) : null}
</div>
<SelectContent> <SelectContent>
{clearable ? ( {clearable ? (
@ -204,3 +174,30 @@ export function SelectField<TFormValues extends FieldValues>({
/> />
); );
} }
/*
{clearable && selectedItem && !isDisabled ? (
<button
aria-label={clearButtonLabel}
className={cn(
"text-muted-foreground hover:text-foreground",
"absolute top-1/2 right-2 z-10 inline-flex size-5 -translate-y-1/2 items-center justify-center rounded-sm",
"focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none"
)}
onClick={(event) => {
event.preventDefault();
event.stopPropagation();
field.onChange(emptyValue);
onChange?.(emptyValue);
}}
onMouseDown={(event) => {
event.preventDefault();
event.stopPropagation();
}}
type="button"
>
<XIcon aria-hidden="true" className="size-3.5" />
</button>
) : null}
*/