fix: correct issues with select

Author: scriptcoded

packages/ui-react/src/components/select/select.stories.tsx

@@ -24,9 +24,15 @@ export default {
 
 export const Simple = {
   args: {
-    placeholder: "Välj ett alternativ",
+    items: [
+      { value: null, label: "Välj ett alternativ" },
+      { value: "option1", label: "Option 1" },
+      { value: "option2", label: "Option 2" },
+      { value: "option3", label: "Option 3" },
+    ],
     children: (
       <>
+        <Select.Item value={null}>Välj ett alternativ</Select.Item>
         <Select.Item value="option1">Option 1</Select.Item>
         <Select.Item value="option2">Option 2</Select.Item>
         <Select.Item value="option3">Option 3</Select.Item>
@@ -37,7 +43,26 @@ export const Simple = {
 
 export const WithGroups = {
   args: {
-    placeholder: "Välj ett alternativ",
+    items: [
+      { value: "option1-1", label: "Råbandsknop", group: "Symmetriska knopar" },
+      {
+        value: "option1-2",
+        label: "Dubbelt halvslag",
+        group: "Symmetriska knopar",
+      },
+      { value: "option1-3", label: "Trumpetstek", group: "Symmetriska knopar" },
+      { value: "option2-1", label: "Skotstek", group: "Osymmetriska knopar" },
+      {
+        value: "option2-2",
+        label: "Smugglarstek",
+        group: "Osymmetriska knopar",
+      },
+      {
+        value: "option2-3",
+        label: "Tältlineknop",
+        group: "Osymmetriska knopar",
+      },
+    ],
     children: (
       <>
         <Select.Group>
@@ -60,7 +85,14 @@ export const WithGroups = {
 
 export const WithDisabledItems = {
   args: {
-    placeholder: "Välj ett alternativ",
+    items: [
+      { value: "option1", label: "Option 1" },
+      { value: "option2", label: "Option 2" },
+      { value: "option3", label: "Option 3" },
+      { value: "option4", label: "Option 4" },
+      { value: "option5", label: "Option 5" },
+      { value: "option6", label: "Option 6" },
+    ],
     children: (
       <>
         <Select.Item value="option1">Option 1</Select.Item>

packages/ui-react/src/components/select/select.tsx

@@ -5,23 +5,18 @@ import { cn } from "../../lib/utils.js";
 
 const Root = <TValue,>({
   children,
-  placeholder,
   ...props
-}: SelectPrimitive.Root.Props<TValue> & {
-  placeholder?: string;
-}) => (
+}: SelectPrimitive.Root.Props<TValue>) => (
   <SelectPrimitive.Root {...props}>
     <Trigger>
-      <Value placeholder={placeholder} />
+      <SelectPrimitive.Value />
     </Trigger>
     <Positioner className="text-gray-dark">{children}</Positioner>
   </SelectPrimitive.Root>
 );
 
 const Group = SelectPrimitive.Group;
 
-const Value = SelectPrimitive.Value;
-
 const Trigger = ({
   className,
   children,
@@ -152,4 +147,4 @@ const Separator = ({
   />
 );
 
-export { Root, Group, Value, GroupLabel, Item, Separator };
+export { Root, Group, GroupLabel, Item, Separator };