@pzerelles/headlessui-svelte 2.1.2-next.11 → 2.1.2-next.13

package/dist/hooks/use-controllable.svelte.js

@@ -27,7 +27,8 @@ export function useControllable(input, onchange, defaultValue) {
             }
             else {
                 internalValue = value;
-                input.controlledValue = value;
+                if (isControlled)
+                    input.controlledValue = value;
             }
         },
     };

package/dist/internal/floating.svelte.js

@@ -234,7 +234,7 @@ function useResolvePxValue(options) {
     const immediateValue = $derived(computeValue(input, element)[0]);
     let explicitValue = $state();
     const setValue = (value) => (explicitValue = value);
-    const value = explicitValue ?? immediateValue;
+    const value = $derived(explicitValue ?? immediateValue);
     $effect(() => {
         const [value, watcher] = computeValue(input, element);
         setValue(value);

package/dist/listbox/Listbox.svelte

@@ -198,7 +198,7 @@ const stateReducer = (initialState) => {
 };
 let {
   ref = $bindable(),
-  value: controlledValue,
+  value: controlledValue = $bindable(),
   defaultValue,
   form,
   name,
@@ -218,6 +218,9 @@ const controllable = useControllable(
   {
     get controlledValue() {
       return controlledValue;
+    },
+    set controlledValue(value2) {
+      controlledValue = value2;
     }
   },
   controlledOnChange,

package/dist/listbox/Listbox.svelte.d.ts

@@ -48,7 +48,7 @@ declare class __sveltets_Render<TType, TActualType, TTag extends ElementType = t
         [evt: string]: CustomEvent<any>;
     };
     slots(): {};
-    bindings(): "ref";
+    bindings(): "ref" | "value";
     exports(): {};
 }
 interface $$IsomorphicComponent {

package/dist/listbox/ListboxOption.svelte

@@ -27,7 +27,8 @@ let {
 const usedInSelectedOption = getContext("SelectedOptionContext") === true;
 const data = useData("ListboxOption");
 const actions = useActions("ListboxOption");
-const active = $derived(data.activeOptionIndex !== null ? data.options[data.activeOptionIndex].id === id : false);
+const { activeOptionIndex, options } = $derived(data);
+const active = $derived(activeOptionIndex !== null ? options[activeOptionIndex].id === id : false);
 const selected = $derived(data.isSelected(value));
 const getTextValue = useTextValue({
   get element() {
@@ -43,6 +44,7 @@ const bag = $derived({
   }
 });
 $effect(() => {
+  if (usedInSelectedOption) return;
   if (!ref) {
     data.listElements.delete(id);
   } else {

package/dist/listbox/ListboxOptions.svelte

@@ -245,14 +245,65 @@ const ourProps = $derived({
   }),
   ...transitionDataAttributes(transitionData)
 });
-const derivedData = {
+const derivedData = $derived({
   ...data,
   get isSelected() {
     return data.mode === ValueMode.Multi ? data.isSelected : isSelected;
   }
-};
-setContext("ListboxDataContext", derivedData);
-$inspect(styles);
+});
+setContext("ListboxDataContext", {
+  get value() {
+    return data.value;
+  },
+  get disabled() {
+    return data.disabled;
+  },
+  get invalid() {
+    return data.invalid;
+  },
+  get mode() {
+    return data.mode;
+  },
+  get orientation() {
+    return data.orientation;
+  },
+  get activeOptionIndex() {
+    return data.activeOptionIndex;
+  },
+  get compare() {
+    return data.compare;
+  },
+  get isSelected() {
+    return data.mode === ValueMode.Multi ? data.isSelected : isSelected;
+  },
+  get optionsProps() {
+    return data.optionsProps;
+  },
+  get listElements() {
+    return data.listElements;
+  },
+  get buttonElement() {
+    return data.buttonElement;
+  },
+  get optionsElement() {
+    return data.optionsElement;
+  },
+  get listboxState() {
+    return data.listboxState;
+  },
+  get options() {
+    return data.options;
+  },
+  get searchQuery() {
+    return data.searchQuery;
+  },
+  get activationTrigger() {
+    return data.activationTrigger;
+  },
+  get __demoMode() {
+    return data.__demoMode;
+  }
+});
 </script>
 
 <Portal enabled={portal ? theirProps.static || visible : false}>

package/dist/utils/floating-ui/svelte-dom/useFloating.svelte.js

@@ -75,7 +75,6 @@ export function useFloating(options = {}) {
             config.platform = platformRef.current;
         }
         computePosition(referenceRef.current, floatingRef.current, config).then(async (data) => {
-            console.log("computing", config);
             const fullData = {
                 ...data,
                 // The floating element's position may be recomputed while it's closed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pzerelles/headlessui-svelte",
-  "version": "2.1.2-next.11",
+  "version": "2.1.2-next.13",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",