From 04dc8537b649b3d75692c9fcdd171a02a0322cda Mon Sep 17 00:00:00 2001 From: Carla Goncalves Date: Wed, 18 Mar 2026 13:15:51 +0000 Subject: [PATCH 1/7] Add new native select --- .../design-system/components/meta.json | 3 +- .../design-system/components/select.mdx | 714 ++++++++++++++++++ packages/eclipse/src/components/index.ts | 13 + packages/eclipse/src/components/select.tsx | 214 ++++++ 4 files changed, 943 insertions(+), 1 deletion(-) create mode 100644 apps/eclipse/content/design-system/components/select.mdx create mode 100644 packages/eclipse/src/components/select.tsx diff --git a/apps/eclipse/content/design-system/components/meta.json b/apps/eclipse/content/design-system/components/meta.json index 84aacaa8e9..f157e50d35 100644 --- a/apps/eclipse/content/design-system/components/meta.json +++ b/apps/eclipse/content/design-system/components/meta.json @@ -25,6 +25,7 @@ "pagination", "radio-group", "separator", + "select", "slider", "spinner", "statistic", @@ -36,4 +37,4 @@ "tooltip", "typetable" ] -} \ No newline at end of file +} diff --git a/apps/eclipse/content/design-system/components/select.mdx b/apps/eclipse/content/design-system/components/select.mdx new file mode 100644 index 0000000000..d3fe884238 --- /dev/null +++ b/apps/eclipse/content/design-system/components/select.mdx @@ -0,0 +1,714 @@ +--- +title: Select +description: A select component for choosing a value from a list of options. Features keyboard navigation, grouped options, custom positioning, and full accessibility support. +--- + +import { + Select, + SelectContent, + SelectGroup, + SelectItem, + SelectLabel, + SelectSeparator, + SelectTrigger, + SelectValue, + Field, + FieldLabel, + FieldDescription, + FieldError, +} from "@prisma/eclipse"; + +### Usage + +**Basic Select** + +A simple select with options: + +```tsx +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "@prisma/eclipse"; + +export function BasicSelect() { + return ( + + ); +} +``` + +**Live Example:** + +
+

Live Example:

+ +
+ +**Grouped Options** + +Organize options into labeled groups: + +```tsx +import { + Select, + SelectContent, + SelectGroup, + SelectItem, + SelectLabel, + SelectSeparator, + SelectTrigger, + SelectValue, +} from "@prisma/eclipse"; + +export function GroupedSelect() { + return ( + + ); +} +``` + +**Live Example:** + +
+

Live Example:

+ +
+ +**Small Size** + +Use the `sm` size for compact layouts: + +```tsx +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "@prisma/eclipse"; + +export function SmallSelect() { + return ( + + ); +} +``` + +**Live Example:** + +
+

Live Example:

+ +
+ +**Disabled State** + +Disable the select when interaction should be prevented: + +```tsx +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "@prisma/eclipse"; + +export function DisabledSelect() { + return ( + + ); +} +``` + +**Live Example:** + +
+

Live Example:

+ +
+ +**With Field Component** + +Use with Field for proper form structure: + +```tsx +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, + Field, + FieldLabel, + FieldDescription, +} from "@prisma/eclipse"; + +export function SelectWithField() { + return ( + + Country + + Choose your country of residence. + + ); +} +``` + +**Live Example:** + +
+

Live Example:

+ + Country + + Choose your country of residence. + +
+ +**Position Control** + +Control the position and alignment of the dropdown: + +```tsx +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "@prisma/eclipse"; + +export function PositionedSelect() { + return ( + + ); +} +``` + +**Live Example:** + +
+

Live Example:

+ +
+ +**Disabled Items** + +Disable individual items: + +```tsx +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "@prisma/eclipse"; + +export function SelectWithDisabledItems() { + return ( + + ); +} +``` + +**Live Example:** + +
+

Live Example:

+ +
+ +### API Reference + +#### Select + +The root component that manages select state. + +**Props:** +- `value` - Controlled value (string, optional) +- `onValueChange` - Callback when value changes ((value: string) => void, optional) +- `open` - Controlled open state (boolean, optional) +- `onOpenChange` - Callback when open state changes ((open: boolean) => void, optional) +- `disabled` - Disable the select (boolean, default: false) +- `defaultValue` - Default value for uncontrolled mode (string, optional) +- `defaultOpen` - Default open state (boolean, default: false) +- `name` - Form input name (string, optional) +- `required` - Mark as required (boolean, default: false) + +```tsx + +``` + +#### SelectTrigger + +The button that triggers the select dropdown. + +**Props:** +- `size` - Size variant ("sm" | "default", default: "default") +- `className` - Additional CSS classes (string or function, optional) +- `disabled` - Disable the trigger (boolean, default: false) +- All standard HTML button attributes + +```tsx + + + +``` + +#### SelectValue + +Displays the currently selected value or placeholder. + +**Props:** +- `placeholder` - Text to show when no value is selected (string, optional) +- `className` - Additional CSS classes (string or function, optional) + +```tsx + +``` + +#### SelectContent + +The dropdown container that holds the list of options. + +**Props:** +- `side` - Position relative to trigger ("top" | "bottom" | "left" | "right", default: "bottom") +- `align` - Alignment relative to trigger ("start" | "center" | "end", default: "center") +- `sideOffset` - Distance from trigger in pixels (number, default: 4) +- `alignOffset` - Alignment offset in pixels (number, default: 0) +- `alignItemWithTrigger` - Align selected item with trigger (boolean, default: true) +- `className` - Additional CSS classes (string or function, optional) + +```tsx + + {/* SelectItem components */} + +``` + +#### SelectItem + +An individual option in the select list. + +**Props:** +- `value` - The value of the item (string, required) +- `disabled` - Disable the item (boolean, default: false) +- `className` - Additional CSS classes (string or function, optional) +- `children` - Item content (ReactNode) + +```tsx +Option 1 +Disabled Option +``` + +#### SelectGroup + +A container for grouping related items. + +**Props:** +- `className` - Additional CSS classes (string or function, optional) +- `children` - Group content (ReactNode) + +```tsx + + Category + Item 1 + +``` + +#### SelectLabel + +A label for a group of items. + +**Props:** +- `className` - Additional CSS classes (string or function, optional) +- `children` - Label content (ReactNode) + +```tsx +Frontend Languages +``` + +#### SelectSeparator + +A visual separator between groups or items. + +**Props:** +- `className` - Additional CSS classes (string or function, optional) + +```tsx + +``` + +#### SelectScrollUpButton + +Internal component for scrolling up in long lists. Automatically rendered. + +#### SelectScrollDownButton + +Internal component for scrolling down in long lists. Automatically rendered. + +### Features + +- ✅ Two size variants (default and small) +- ✅ Keyboard navigation (Arrow keys, Enter, Escape, Tab, Home, End) +- ✅ Grouped options with labels +- ✅ Custom positioning and alignment +- ✅ Disabled state for select and individual items +- ✅ Controlled and uncontrolled modes +- ✅ Scroll buttons for long lists +- ✅ Item indicator with checkmark +- ✅ Accessible with ARIA attributes +- ✅ Portal rendering for z-index management +- ✅ Animations for open/close transitions +- ✅ Auto-alignment of selected item with trigger +- ✅ Form integration with name and required attributes +- ✅ Fully typed with TypeScript + +### Best Practices + +- Always provide a placeholder for better UX +- Use SelectGroup and SelectLabel for organized lists +- Consider using the small size in dense layouts +- Disable items that are temporarily unavailable rather than hiding them +- Keep option text concise and scannable +- Use Field component for proper form structure with labels +- Test keyboard navigation thoroughly +- Avoid extremely long lists (consider search/filter for 50+ items) +- Use consistent option formatting +- Provide clear value descriptions + +### Accessibility + +The Select component follows ARIA combobox pattern specifications: + +- Uses semantic ARIA roles (`combobox`, `listbox`, `option`) +- Supports full keyboard navigation: + - `Space/Enter` - Open/close and select + - `Arrow Down/Up` - Navigate through options + - `Home/End` - Jump to first/last option + - `Escape` - Close the dropdown + - `Tab` - Move focus and close dropdown +- Focus management and trapped focus in dropdown +- Screen reader announcements for selections and state changes +- Proper labeling with `aria-label` and `aria-labelledby` +- Visual focus indicators +- Selected state announced to assistive technologies +- Disabled items are properly marked and unfocusable +- Required attribute for form validation + +### Common Use Cases + +The Select component is perfect for: + +- **Form inputs** - Collecting user choices in forms +- **Settings** - Configuration and preference selection +- **Filters** - Filtering data by category +- **Language/locale switchers** - Selecting language or region +- **Status updates** - Changing item status +- **Priority selection** - Setting task or issue priority +- **Category selection** - Choosing from predefined categories +- **Time zones** - Selecting time zone +- **Country/region pickers** - Location selection +- **Sorting options** - Choosing sort order +- **Role assignment** - Selecting user roles + +### Styling + +The Select component uses design tokens and can be customized: + +- **Trigger**: Border, rounded corners, padding, hover/focus states +- **Content**: Popover with shadow, rounded corners, animations +- **Items**: Hover/focus states with accent colors +- **Selected indicator**: Checkmark icon aligned right +- **Groups**: Scroll margin and padding +- **Labels**: Muted text, small font size +- **Separator**: Border line between groups +- **Scroll buttons**: Positioned at top/bottom with icons + +Customize by passing `className` props: + +```tsx + +``` + +### Integration with Forms + +Use with form libraries like React Hook Form: + +```tsx +import { useForm, Controller } from "react-hook-form"; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "@prisma/eclipse"; + +export function SelectForm() { + const { control, handleSubmit } = useForm(); + + return ( +
console.log(data))}> + ( + + )} + /> + + + ); +} +``` + +### Controlled vs Uncontrolled + +**Uncontrolled (with defaultValue):** +```tsx + +``` + +**Controlled (with value and onValueChange):** +```tsx +const [value, setValue] = useState("option1"); + + +``` + +### Performance Tips + +For large option lists: + +1. **Virtualization** - Consider using virtual scrolling for 100+ items +2. **Lazy loading** - Load options on-demand +3. **Memoization** - Use React.memo for SelectItem components +4. **Search/filter** - Add search for easier navigation +5. **Pagination** - Load options in batches + +```tsx +import { useMemo } from "react"; + +export function OptimizedSelect({ items }) { + const memoizedItems = useMemo( + () => items.map((item) => ( + + {item.name} + + )), + [items] + ); + + return ( + + ); +} +``` diff --git a/packages/eclipse/src/components/index.ts b/packages/eclipse/src/components/index.ts index 175f4ec4de..a6118e35ec 100644 --- a/packages/eclipse/src/components/index.ts +++ b/packages/eclipse/src/components/index.ts @@ -156,3 +156,16 @@ export { export { Alert } from "./alert"; export { Switch } from "./switch"; + +export { + Select, + SelectContent, + SelectGroup, + SelectItem, + SelectLabel, + SelectScrollDownButton, + SelectScrollUpButton, + SelectSeparator, + SelectTrigger, + SelectValue, +} from "./select"; diff --git a/packages/eclipse/src/components/select.tsx b/packages/eclipse/src/components/select.tsx new file mode 100644 index 0000000000..237f2679f8 --- /dev/null +++ b/packages/eclipse/src/components/select.tsx @@ -0,0 +1,214 @@ +"use client"; + +import * as React from "react"; +import { Select as SelectPrimitive } from "@base-ui/react/select"; + +import { cn } from "../lib/cn"; + +// Helper to handle className that can be a string or function +function handleClassName( + className: string | ((state: T) => string | undefined) | undefined, + staticClasses: string, +): string | ((state: T) => string | undefined) { + if (typeof className === "function") { + return (state: T) => cn(staticClasses, className(state)); + } + return cn(staticClasses, className); +} + +const Select = SelectPrimitive.Root; + +function SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) { + return ( + + ); +} + +function SelectValue({ className, ...props }: SelectPrimitive.Value.Props) { + return ( + + ); +} + +function SelectTrigger({ + className, + size = "default", + children, + ...props +}: SelectPrimitive.Trigger.Props & { + size?: "sm" | "default"; +}) { + return ( + + {children} + + + ); +} + +function SelectContent({ + className, + children, + side = "bottom", + sideOffset = 4, + align = "start", + alignOffset = 0, + alignItemWithTrigger = false, + ...props +}: SelectPrimitive.Popup.Props & + Pick< + SelectPrimitive.Positioner.Props, + "align" | "alignOffset" | "side" | "sideOffset" | "alignItemWithTrigger" + >) { + return ( + + + + + {children} + + + + + ); +} + +function SelectLabel({ + className, + ...props +}: SelectPrimitive.GroupLabel.Props) { + return ( + + ); +} + +function SelectItem({ + className, + children, + ...props +}: SelectPrimitive.Item.Props) { + return ( + + + {children} + + + + + } + /> + + ); +} + +function SelectSeparator({ + className, + ...props +}: SelectPrimitive.Separator.Props) { + return ( + + ); +} + +function SelectScrollUpButton({ + className, + ...props +}: React.ComponentProps) { + return ( + + + + ); +} + +function SelectScrollDownButton({ + className, + ...props +}: React.ComponentProps) { + return ( + + + + ); +} + +export { + Select, + SelectContent, + SelectGroup, + SelectItem, + SelectLabel, + SelectScrollDownButton, + SelectScrollUpButton, + SelectSeparator, + SelectTrigger, + SelectValue, +}; From a80a8899cc929d2e984af764a73896b241fb56d8 Mon Sep 17 00:00:00 2001 From: Carla Goncalves Date: Wed, 18 Mar 2026 13:38:55 +0000 Subject: [PATCH 2/7] capitalize selectvalue --- .../design-system/components/select.mdx | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/apps/eclipse/content/design-system/components/select.mdx b/apps/eclipse/content/design-system/components/select.mdx index d3fe884238..94b560fb57 100644 --- a/apps/eclipse/content/design-system/components/select.mdx +++ b/apps/eclipse/content/design-system/components/select.mdx @@ -87,7 +87,7 @@ export function GroupedSelect() { return ( - + @@ -150,7 +150,7 @@ export function SmallSelect() { return ( - + Extra Small @@ -197,7 +197,7 @@ export function DisabledSelect() { return ( - + Option 1 @@ -245,7 +245,7 @@ export function SelectWithField() { Country - + United States @@ -298,7 +298,7 @@ export function PositionedSelect() { return ( - + Top @@ -345,7 +345,7 @@ export function SelectWithDisabledItems() { return ( - + Available Option From 7433ea3b733810e10b598e80e385e67ddbbb188c Mon Sep 17 00:00:00 2001 From: Carla Goncalves Date: Mon, 23 Mar 2026 18:07:31 +0000 Subject: [PATCH 3/7] Update native select hover --- packages/eclipse/src/components/select.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/eclipse/src/components/select.tsx b/packages/eclipse/src/components/select.tsx index 237f2679f8..8c2da48d57 100644 --- a/packages/eclipse/src/components/select.tsx +++ b/packages/eclipse/src/components/select.tsx @@ -52,7 +52,7 @@ function SelectTrigger({ data-size={size} className={handleClassName( className, - "border-input data-placeholder:text-foreground-neutral-weak aria-invalid:text-foreground-error aria-invalid:border-destructive gap-1.5 rounded-lg border bg-transparent py-2 pr-2 pl-2.5 text-sm transition-colors select-none focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0", + "border-input data-placeholder:text-foreground-neutral-weak aria-invalid:text-foreground-error aria-invalid:border-destructive gap-1.5 rounded-lg border bg-transparent py-2 pr-2 pl-2.5 text-sm transition-colors select-none focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0 cursor-pointer data-placeholder:hover:text-foreground-neutral hover:border-foreground-neutral-weaker", )} {...props} > @@ -84,14 +84,14 @@ function SelectContent({ align={align} alignOffset={alignOffset} alignItemWithTrigger={alignItemWithTrigger} - className="isolate z-50" + className="isolate z-50 shadow-none!" > @@ -130,7 +130,7 @@ function SelectItem({ data-slot="select-item" className={handleClassName( className, - "focus:bg-background-neutral-weak focus:text-foreground-neutral not-data-[variant=destructive]:focus:**:text-foreground-neutral gap-1.5 rounded-square py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", + "focus:bg-background-neutral-weak focus:text-foreground-neutral not-data-[variant=destructive]:focus:**:text-foreground-neutral gap-1.5 rounded-square py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-pointer items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", )} {...props} > From cd1dad88fec5aef90a758d73c70d72f9e08be88c Mon Sep 17 00:00:00 2001 From: Carla Goncalves Date: Mon, 23 Mar 2026 18:25:00 +0000 Subject: [PATCH 4/7] support forward ref --- packages/eclipse/src/components/select.tsx | 138 ++++++++++++--------- 1 file changed, 78 insertions(+), 60 deletions(-) diff --git a/packages/eclipse/src/components/select.tsx b/packages/eclipse/src/components/select.tsx index 8c2da48d57..a6b0553576 100644 --- a/packages/eclipse/src/components/select.tsx +++ b/packages/eclipse/src/components/select.tsx @@ -18,36 +18,45 @@ function handleClassName( const Select = SelectPrimitive.Root; -function SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) { +const SelectGroup = React.forwardRef< + HTMLDivElement, + SelectPrimitive.Group.Props +>(({ className, ...props }, ref) => { return ( ); -} +}); +SelectGroup.displayName = "SelectGroup"; -function SelectValue({ className, ...props }: SelectPrimitive.Value.Props) { +const SelectValue = React.forwardRef< + HTMLSpanElement, + SelectPrimitive.Value.Props +>(({ className, ...props }, ref) => { return ( ); -} +}); +SelectValue.displayName = "SelectValue"; -function SelectTrigger({ - className, - size = "default", - children, - ...props -}: SelectPrimitive.Trigger.Props & { - size?: "sm" | "default"; -}) { +const SelectTrigger = React.forwardRef< + HTMLButtonElement, + SelectPrimitive.Trigger.Props & { + size?: "sm" | "default"; + } +>(({ className, size = "default", children, ...props }, ref) => { return ( ); -} +}); +SelectTrigger.displayName = "SelectTrigger"; function SelectContent({ className, @@ -104,12 +114,13 @@ function SelectContent({ ); } -function SelectLabel({ - className, - ...props -}: SelectPrimitive.GroupLabel.Props) { +const SelectLabel = React.forwardRef< + HTMLDivElement, + SelectPrimitive.GroupLabel.Props +>(({ className, ...props }, ref) => { return ( ); -} +}); +SelectLabel.displayName = "SelectLabel"; -function SelectItem({ - className, - children, - ...props -}: SelectPrimitive.Item.Props) { - return ( - - - {children} - - - - - } - /> - - ); -} +const SelectItem = React.forwardRef( + ({ className, children, ...props }, ref) => { + return ( + + + {children} + + + + + } + /> + + ); + }, +); +SelectItem.displayName = "SelectItem"; -function SelectSeparator({ - className, - ...props -}: SelectPrimitive.Separator.Props) { +const SelectSeparator = React.forwardRef< + HTMLDivElement, + SelectPrimitive.Separator.Props +>(({ className, ...props }, ref) => { return ( ); -} +}); +SelectSeparator.displayName = "SelectSeparator"; -function SelectScrollUpButton({ - className, - ...props -}: React.ComponentProps) { +const SelectScrollUpButton = React.forwardRef< + HTMLDivElement, + React.ComponentProps +>(({ className, ...props }, ref) => { return ( ); -} +}); +SelectScrollUpButton.displayName = "SelectScrollUpButton"; -function SelectScrollDownButton({ - className, - ...props -}: React.ComponentProps) { +const SelectScrollDownButton = React.forwardRef< + HTMLDivElement, + React.ComponentProps +>(({ className, ...props }, ref) => { return ( ); -} +}); +SelectScrollDownButton.displayName = "SelectScrollDownButton"; export { Select, From e8519fcacd50eae48e79c2626879b6e648836537 Mon Sep 17 00:00:00 2001 From: Carla Goncalves Date: Mon, 23 Mar 2026 18:35:55 +0000 Subject: [PATCH 5/7] Trigger Build From dde49b34eea7c973f93ccf695315a63bc1eca16f Mon Sep 17 00:00:00 2001 From: Carla Goncalves Date: Mon, 23 Mar 2026 18:41:53 +0000 Subject: [PATCH 6/7] try something --- packages/eclipse/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/eclipse/package.json b/packages/eclipse/package.json index fdeef469cd..3ca42b7ae5 100644 --- a/packages/eclipse/package.json +++ b/packages/eclipse/package.json @@ -38,7 +38,7 @@ "scripts": { "build": "rimraf dist && pnpm run build:ts && pnpm run build:styles", "build:ts": "tsdown --config tsdown.config.ts", - "build:styles": "mkdir -p dist/styles dist/static/fonts && cp ./src/styles/globals.css ./dist/styles/globals.css && cp ./src/styles/fonts.css ./dist/styles/fonts.css && cp ./src/styles/steps.css ./dist/styles/steps.css && cp ./src/static/fonts/* ./dist/static/fonts/", + "build:styles": "mkdir -p dist/styles dist/static/fonts && cp ./src/styles/globals.css ./dist/styles/globals.css && cp ./src/styles/fonts.css ./dist/styles/fonts.css && cp ./src/styles/steps.css ./dist/styles/steps.css && cp -r ./src/static/fonts/. ./dist/static/fonts/", "check": "oxfmt . --write && oxlint . --fix", "types:check": "tsc --noEmit", "prepublishOnly": "pnpm run build && pnpm run types:check" From 7a931c72bd6b45765a209f6b314e3fe6f27b7bcc Mon Sep 17 00:00:00 2001 From: Carla Goncalves Date: Mon, 23 Mar 2026 18:46:32 +0000 Subject: [PATCH 7/7] revert the foward ref --- packages/eclipse/src/components/select.tsx | 138 +++++++++------------ 1 file changed, 60 insertions(+), 78 deletions(-) diff --git a/packages/eclipse/src/components/select.tsx b/packages/eclipse/src/components/select.tsx index a6b0553576..8c2da48d57 100644 --- a/packages/eclipse/src/components/select.tsx +++ b/packages/eclipse/src/components/select.tsx @@ -18,45 +18,36 @@ function handleClassName( const Select = SelectPrimitive.Root; -const SelectGroup = React.forwardRef< - HTMLDivElement, - SelectPrimitive.Group.Props ->(({ className, ...props }, ref) => { +function SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) { return ( ); -}); -SelectGroup.displayName = "SelectGroup"; +} -const SelectValue = React.forwardRef< - HTMLSpanElement, - SelectPrimitive.Value.Props ->(({ className, ...props }, ref) => { +function SelectValue({ className, ...props }: SelectPrimitive.Value.Props) { return ( ); -}); -SelectValue.displayName = "SelectValue"; +} -const SelectTrigger = React.forwardRef< - HTMLButtonElement, - SelectPrimitive.Trigger.Props & { - size?: "sm" | "default"; - } ->(({ className, size = "default", children, ...props }, ref) => { +function SelectTrigger({ + className, + size = "default", + children, + ...props +}: SelectPrimitive.Trigger.Props & { + size?: "sm" | "default"; +}) { return ( ); -}); -SelectTrigger.displayName = "SelectTrigger"; +} function SelectContent({ className, @@ -114,13 +104,12 @@ function SelectContent({ ); } -const SelectLabel = React.forwardRef< - HTMLDivElement, - SelectPrimitive.GroupLabel.Props ->(({ className, ...props }, ref) => { +function SelectLabel({ + className, + ...props +}: SelectPrimitive.GroupLabel.Props) { return ( ); -}); -SelectLabel.displayName = "SelectLabel"; +} -const SelectItem = React.forwardRef( - ({ className, children, ...props }, ref) => { - return ( - - - {children} - - - - - } - /> - - ); - }, -); -SelectItem.displayName = "SelectItem"; +function SelectItem({ + className, + children, + ...props +}: SelectPrimitive.Item.Props) { + return ( + + + {children} + + + + + } + /> + + ); +} -const SelectSeparator = React.forwardRef< - HTMLDivElement, - SelectPrimitive.Separator.Props ->(({ className, ...props }, ref) => { +function SelectSeparator({ + className, + ...props +}: SelectPrimitive.Separator.Props) { return ( ); -}); -SelectSeparator.displayName = "SelectSeparator"; +} -const SelectScrollUpButton = React.forwardRef< - HTMLDivElement, - React.ComponentProps ->(({ className, ...props }, ref) => { +function SelectScrollUpButton({ + className, + ...props +}: React.ComponentProps) { return ( ); -}); -SelectScrollUpButton.displayName = "SelectScrollUpButton"; +} -const SelectScrollDownButton = React.forwardRef< - HTMLDivElement, - React.ComponentProps ->(({ className, ...props }, ref) => { +function SelectScrollDownButton({ + className, + ...props +}: React.ComponentProps) { return ( ); -}); -SelectScrollDownButton.displayName = "SelectScrollDownButton"; +} export { Select,