@luminescent/ui-qwik 5.0.1-0 → 5.0.1-1

package/lib/index.qwik.cjs

@@ -911,11 +911,12 @@ const SelectMenu = qwik.component$((props) => {
     ]
   });
 });
-const SelectMenuRaw = qwik.component$(({ id, values, class: Class, customDropdown, hover, align, ...props }) => {
+const SelectMenuRaw = qwik.component$(({ values, class: Class, customDropdown, hover, align, ...props }) => {
   const store = qwik.useStore({
     opened: false,
     value: props.value
   });
+  const selectRef = qwik.useSignal();
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
     class: {
       "relative touch-manipulation": true,
@@ -924,7 +925,7 @@ const SelectMenuRaw = qwik.component$(({ id, values, class: Class, customDropdow
     children: [
       values && /* @__PURE__ */ jsxRuntime.jsx("select", {
         ...props,
-        id,
+        ref: selectRef,
         class: "hidden",
         children: values.map((value, i) => {
           return /* @__PURE__ */ jsxRuntime.jsx("option", {
@@ -947,7 +948,6 @@ const SelectMenuRaw = qwik.component$(({ id, values, class: Class, customDropdow
             name: "dropdown"
           }),
           !customDropdown && /* @__PURE__ */ jsxRuntime.jsxs("span", {
-            id: `lui-${id}-name`,
             children: [
               values && (values.find((value) => value.value.toString() === store.value)?.name ?? values[0].name),
               !values && /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {
@@ -958,7 +958,6 @@ const SelectMenuRaw = qwik.component$(({ id, values, class: Class, customDropdow
         ]
       }),
       /* @__PURE__ */ jsxRuntime.jsx("div", {
-        id: `lui-${id}-opts-container`,
         class: {
           "absolute z-[1000] pt-2 transition-all ease-out": true,
           "left-0": align === "left",
@@ -969,7 +968,6 @@ const SelectMenuRaw = qwik.component$(({ id, values, class: Class, customDropdow
           "focus-within:pointer-events-auto focus-within:scale-100 focus-within:opacity-100 focus-within:duration-75": true
         },
         children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
-          id: `lui-${id}-opts`,
           class: "lum-bg-lum-input-bg lum-scroll flex max-h-72 flex-col gap-1 overflow-auto rounded-lum border p-1 select-none motion-safe:transition-all",
           children: [
             values?.map(({ name, value }, i) => {
@@ -978,7 +976,7 @@ const SelectMenuRaw = qwik.component$(({ id, values, class: Class, customDropdow
                 class: "lum-btn lum-bg-transparent rounded-lum-1",
                 onClick$: () => {
                   store.opened = false;
-                  const select = document.getElementById(id);
+                  const select = selectRef.value;
                   if (select) {
                     select.value = value.toString();
                     select.dispatchEvent(new Event("change"));

package/lib/index.qwik.mjs

@@ -909,11 +909,12 @@ const SelectMenu = component$((props) => {
     ]
   });
 });
-const SelectMenuRaw = component$(({ id, values, class: Class, customDropdown, hover, align, ...props }) => {
+const SelectMenuRaw = component$(({ values, class: Class, customDropdown, hover, align, ...props }) => {
   const store = useStore({
     opened: false,
     value: props.value
   });
+  const selectRef = useSignal();
   return /* @__PURE__ */ jsxs("div", {
     class: {
       "relative touch-manipulation": true,
@@ -922,7 +923,7 @@ const SelectMenuRaw = component$(({ id, values, class: Class, customDropdown, ho
     children: [
       values && /* @__PURE__ */ jsx("select", {
         ...props,
-        id,
+        ref: selectRef,
         class: "hidden",
         children: values.map((value, i) => {
           return /* @__PURE__ */ jsx("option", {
@@ -945,7 +946,6 @@ const SelectMenuRaw = component$(({ id, values, class: Class, customDropdown, ho
             name: "dropdown"
           }),
           !customDropdown && /* @__PURE__ */ jsxs("span", {
-            id: `lui-${id}-name`,
             children: [
               values && (values.find((value) => value.value.toString() === store.value)?.name ?? values[0].name),
               !values && /* @__PURE__ */ jsx(Slot, {
@@ -956,7 +956,6 @@ const SelectMenuRaw = component$(({ id, values, class: Class, customDropdown, ho
         ]
       }),
       /* @__PURE__ */ jsx("div", {
-        id: `lui-${id}-opts-container`,
         class: {
           "absolute z-[1000] pt-2 transition-all ease-out": true,
           "left-0": align === "left",
@@ -967,7 +966,6 @@ const SelectMenuRaw = component$(({ id, values, class: Class, customDropdown, ho
           "focus-within:pointer-events-auto focus-within:scale-100 focus-within:opacity-100 focus-within:duration-75": true
         },
         children: /* @__PURE__ */ jsxs("div", {
-          id: `lui-${id}-opts`,
           class: "lum-bg-lum-input-bg lum-scroll flex max-h-72 flex-col gap-1 overflow-auto rounded-lum border p-1 select-none motion-safe:transition-all",
           children: [
             values?.map(({ name, value }, i) => {
@@ -976,7 +974,7 @@ const SelectMenuRaw = component$(({ id, values, class: Class, customDropdown, ho
                 class: "lum-btn lum-bg-transparent rounded-lum-1",
                 onClick$: () => {
                   store.opened = false;
-                  const select = document.getElementById(id);
+                  const select = selectRef.value;
                   if (select) {
                     select.value = value.toString();
                     select.dispatchEvent(new Event("change"));

package/lib-types/components/elements/SelectMenu.d.ts

@@ -10,7 +10,6 @@ interface SelectMenuProps extends Omit<PropsOf<'select'>, 'class' | 'size'> {
         name: JSXChildren;
         value: string | number;
     }[];
-    id: string;
 }
 export declare const SelectMenu: import("@builder.io/qwik").Component<SelectMenuProps>;
 export declare const SelectMenuRaw: import("@builder.io/qwik").Component<SelectMenuProps>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luminescent/ui-qwik",
-  "version": "5.0.1-0",
+  "version": "5.0.1-1",
   "description": "Luminescent UI library - Qwik",
   "main": "./lib/index.qwik.mjs",
   "qwik": "./lib/index.qwik.mjs",
@@ -50,7 +50,7 @@
     "vite-tsconfig-paths": "^5.1.4"
   },
   "peerDependencies": {
-    "@luminescent/ui": "5.0.1-0"
+    "@luminescent/ui": "5.0.1-1"
   },
   "scripts": {
     "build": "qwik build",