@inspirare/design-system 0.0.24 → 0.0.25

package/dist/components/ui/select.js

@@ -7,16 +7,34 @@ import { Select as s } from "@base-ui/react/select";
 //#region src/components/ui/select.tsx
 var c = o.createContext(null);
 function l({ children: e, ...t }) {
-	let [n, r] = o.useState({}), a = o.useCallback((e, t) => {
+	let [n, r] = o.useState({}), a = {
+		...o.useMemo(() => {
+			let t = {}, n = (e) => {
+				o.Children.forEach(e, (e) => {
+					if (o.isValidElement(e)) {
+						if (e.props && e.props.value !== void 0 && e.props.children) {
+							let n = "";
+							o.Children.forEach(e.props.children, (e) => {
+								(typeof e == "string" || typeof e == "number") && (n += e);
+							}), n && (t[e.props.value] = n);
+						}
+						e.props && e.props.children && n(e.props.children);
+					}
+				});
+			};
+			return n(e), t;
+		}, [e]),
+		...n
+	}, l = o.useCallback((e, t) => {
 		r((n) => n[e] === t ? n : {
 			...n,
 			[e]: t
 		});
-	}, []), l = o.useCallback((e) => n[e], [n]);
+	}, []), u = o.useCallback((e) => a[e], [a]);
 	return /* @__PURE__ */ i(c.Provider, {
 		value: {
-			registerLabel: a,
-			getLabel: l
+			registerLabel: l,
+			getLabel: u
 		},
 		children: /* @__PURE__ */ i(s.Root, {
 			...t,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@inspirare/design-system",
   "private": false,
-  "version": "0.0.24",
+  "version": "0.0.25",
   "type": "module",
   "sideEffects": [
     "*.css"

package/src/components/ui/select.test.tsx

@@ -2,6 +2,7 @@ import { render } from '@testing-library/react';
 import { axe } from 'jest-axe';
 import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "./select";
 
+
 describe('Select Accessibility', () => {
   it('should have no accessibility violations in basic render', async () => {
     const Wrapper = () => (
@@ -11,4 +12,21 @@ describe('Select Accessibility', () => {
     const results = await axe(container);
     expect(results).toHaveNoViolations();
   });
-});
+
+  it('should display the default label instead of the value on initial render', () => {
+    const Wrapper = () => (
+      <Select defaultValue="dark">
+        <SelectTrigger aria-label="Select a theme" className="w-[180px]">
+          <SelectValue placeholder="Theme" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="light">Light</SelectItem>
+          <SelectItem value="dark">Dark Theme</SelectItem>
+          <SelectItem value="system">System</SelectItem>
+        </SelectContent>
+      </Select>
+    );
+    const { container } = render(<Wrapper />);
+    expect(container.textContent).toContain('Dark Theme');
+  });
+});

package/src/components/ui/select.tsx

@@ -12,10 +12,37 @@ const SelectContext = React.createContext<{
 } | null>(null);
 
 function Select({ children, ...props }: React.ComponentProps<typeof SelectPrimitive.Root>) {
-  const [labels, setLabels] = React.useState<Record<string, string>>({});
+  const [dynamicLabels, setDynamicLabels] = React.useState<Record<string, string>>({});
   
+  const staticLabels = React.useMemo(() => {
+    const result: Record<string, string> = {};
+    const extract = (node: React.ReactNode) => {
+      React.Children.forEach(node, (child) => {
+        if (!React.isValidElement(child)) return;
+        if ((child as any).props && (child as any).props.value !== undefined) {
+          if ((child as any).props.children) {
+            let label = "";
+            React.Children.forEach((child as any).props.children, (grandChild) => {
+              if (typeof grandChild === "string" || typeof grandChild === "number") {
+                label += grandChild;
+              }
+            });
+            if (label) result[(child as any).props.value] = label;
+          }
+        }
+        if ((child as any).props && (child as any).props.children) {
+          extract((child as any).props.children);
+        }
+      });
+    };
+    extract(children);
+    return result;
+  }, [children]);
+
+  const labels = { ...staticLabels, ...dynamicLabels };
+
   const registerLabel = React.useCallback((val: any, label: string) => {
-    setLabels((prev) => {
+    setDynamicLabels((prev) => {
       if (prev[val] === label) return prev;
       return { ...prev, [val]: label };
     });