@pzerelles/headlessui-svelte 2.0.0-next.1 → 2.1.1-next.1

package/dist/label/Label.svelte

@@ -1,43 +1,68 @@
-<script lang="ts" context="module">import { setContext, untrack } from "svelte";
+<script lang="ts" context="module">import { setContext } from "svelte";
 const DEFAULT_LABEL_TAG = "label";
-export const createLabelContext = () => {
-  let labelledBy = $state();
+export function useLabelContext() {
+  let context = getContext("LabelContext");
+  if (context === null) {
+    let err = new Error("You used a <Label /> component, but it is not inside a relevant parent.");
+    if (Error.captureStackTrace) Error.captureStackTrace(err, useLabelContext);
+    throw err;
+  }
+  return context;
+}
+export function useLabelledBy(alwaysAvailableIds) {
+  const context = getContext("LabelContext");
+  const value = $derived(
+    (alwaysAvailableIds?.length ?? 0) > 0 ? [context?.value, ...alwaysAvailableIds].filter(Boolean).join(" ") : context?.value
+  );
+  return {
+    get value() {
+      return value;
+    }
+  };
+}
+export const useLabels = (options = {}) => {
+  const { slot, name, props, inherit } = $derived(options);
+  const parentLabelledBy = useLabelledBy();
+  let labelIds = $state([]);
+  const allLabelIds = $derived(inherit && parentLabelledBy.value ? [parentLabelledBy.value, ...labelIds] : labelIds);
+  const value = $derived(allLabelIds.length > 0 ? allLabelIds.join(" ") : void 0);
   const context = {
-    get labelledBy() {
-      return labelledBy;
+    get slot() {
+      return slot;
+    },
+    get name() {
+      return name;
     },
-    register(id) {
-      labelledBy = untrack(() => labelledBy === void 0 ? id : `${labelledBy} ${id}`.trim());
+    get props() {
+      return props;
     },
-    unregister(id) {
-      labelledBy = untrack(
-        () => labelledBy?.split(" ").filter((value) => value !== id).join(" ")
-      );
+    get value() {
+      return value;
+    },
+    register(value2) {
+      labelIds.push(value2);
+      return () => {
+        const clone = labelIds.slice();
+        const idx = clone.indexOf(value2);
+        if (idx !== -1) clone.splice(idx, 1);
+        labelIds = clone;
+        return labelIds;
+      };
     }
   };
-  return setContext("Label", context);
-};
-export const getLabelContext = () => getContext("Label");
-const validateLabelContext = () => {
-  const context = getLabelContext();
-  if (context === void 0) {
-    const err = new Error("You used a <Label /> component, but it is not inside a relevant parent.");
-    if (Error.captureStackTrace)
-      Error.captureStackTrace(err, validateLabelContext);
-    throw err;
-  }
+  setContext("LabelContext", context);
   return context;
 };
 </script>
 
-<script lang="ts" generics="TTag extends keyof SvelteHTMLElements">import { getContext } from "svelte";
+<script lang="ts" generics="TTag extends keyof SvelteHTMLElements">import { getContext, onMount } from "svelte";
 import { getIdContext, htmlid } from "../utils/id.js";
-import { getDisabledContext } from "../utils/disabled.js";
+import { useDisabled } from "../hooks/use-disabled.js";
 import { stateFromSlot } from "../utils/state.js";
 const internalId = htmlid();
-const context = validateLabelContext();
+const context = useLabelContext();
 const providedHtmlFor = getIdContext();
-const providedDisabled = getDisabledContext();
+const providedDisabled = useDisabled();
 let {
   as,
   id = `headlessui-label-${internalId}`,
@@ -46,12 +71,8 @@ let {
   children,
   ...theirOriginalProps
 } = $props();
-$effect(() => {
+onMount(() => {
   context.register(id);
-  const registeredId = id;
-  return () => {
-    context.unregister(registeredId);
-  };
 });
 let handleClick = (e) => {
   let current = e.currentTarget;
@@ -76,7 +97,7 @@ let handleClick = (e) => {
     }
   }
 };
-const disabled = $derived(providedDisabled?.disabled ?? false);
+const disabled = $derived(providedDisabled.value ?? false);
 const slot = $derived({ disabled });
 const ourProps = $derived({
   id,

package/dist/label/Label.svelte.d.ts

@@ -10,13 +10,22 @@ export type LabelProps<TTag extends keyof SvelteHTMLElements = typeof DEFAULT_LA
     ]>;
 };
 declare const DEFAULT_LABEL_TAG: "label";
+interface SharedData {
+    slot?: {};
+    name?: string;
+    props?: Record<string, any>;
+}
 export type LabelContext = {
-    labelledBy?: string;
-    register: (id: string) => void;
-    unregister: (id: string) => void;
+    value: string | undefined;
+    register(value: string): () => void;
+} & SharedData;
+export declare function useLabelContext(): LabelContext;
+export declare function useLabelledBy(alwaysAvailableIds?: (string | undefined | null)[]): {
+    readonly value: string | undefined;
 };
-export declare const createLabelContext: () => LabelContext;
-export declare const getLabelContext: () => LabelContext | undefined;
+export declare const useLabels: (options?: SharedData & {
+    inherit?: boolean;
+}) => LabelContext;
 import { type Snippet } from "svelte";
 declare class __sveltets_Render<TTag extends keyof SvelteHTMLElements> {
     props(): LabelProps<TTag>;

package/dist/legend/Legend.svelte.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="svelte" />
 export type LegendProps = SvelteHTMLElements["div"];
 import type { SvelteHTMLElements } from "svelte/elements";
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
@@ -13,6 +12,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const Legend: $$__sveltets_2_IsomorphicComponent<import("svelte/elements").HTMLAttributes<HTMLDivElement>, {
     [evt: string]: CustomEvent<any>;
-}, {}, Record<string, any>, "">;
+}, {}, {}, "">;
 type Legend = InstanceType<typeof Legend>;
 export default Legend;

package/dist/listbox/Listbox.svelte

@@ -0,0 +1,451 @@
+<script lang="ts" context="module">import { useByComparator } from "../hooks/use-by-comparator.js";
+import { useControllable } from "../hooks/use-controllable.svelte.js";
+import { useDisabled } from "../hooks/use-disabled.js";
+import { calculateActiveIndex, Focus } from "../utils/calculate-active-index.js";
+import { FocusableMode, isFocusableElement, sortByDomNode } from "../utils/focus-management.js";
+import { match } from "../utils/match.js";
+import { useRef } from "../utils/ref.svelte.js";
+import { getContext, setContext } from "svelte";
+let DEFAULT_LISTBOX_TAG = "svelte:fragment";
+export var ListboxStates = /* @__PURE__ */ ((ListboxStates2) => {
+  ListboxStates2[ListboxStates2["Open"] = 0] = "Open";
+  ListboxStates2[ListboxStates2["Closed"] = 1] = "Closed";
+  return ListboxStates2;
+})(ListboxStates || {});
+export var ValueMode = /* @__PURE__ */ ((ValueMode2) => {
+  ValueMode2[ValueMode2["Single"] = 0] = "Single";
+  ValueMode2[ValueMode2["Multi"] = 1] = "Multi";
+  return ValueMode2;
+})(ValueMode || {});
+export var ActivationTrigger = /* @__PURE__ */ ((ActivationTrigger2) => {
+  ActivationTrigger2[ActivationTrigger2["Pointer"] = 0] = "Pointer";
+  ActivationTrigger2[ActivationTrigger2["Other"] = 1] = "Other";
+  return ActivationTrigger2;
+})(ActivationTrigger || {});
+export function useActions(component) {
+  const context = getContext("ListboxActionsContext");
+  if (!context) {
+    let err = new Error(`<${component} /> is missing a parent <Listbox /> component.`);
+    if (Error.captureStackTrace) Error.captureStackTrace(err, useActions);
+    throw err;
+  }
+  return context;
+}
+export function useData(component) {
+  const context = getContext("ListboxData");
+  if (context === null) {
+    let err = new Error(`<${component} /> is missing a parent <Listbox /> component.`);
+    if (Error.captureStackTrace) Error.captureStackTrace(err, useData);
+    throw err;
+  }
+  return context;
+}
+</script>
+
+<script lang="ts" generics="TTag extends ElementType, TType, TActualType">import { disposables } from "../utils/disposables.js";
+import FormFields from "../internal/FormFields.svelte";
+import { createFloatingContext } from "../internal/floating.svelte.js";
+import { createOpenClosedContext, State } from "../internal/open-closed.js";
+import { stateFromSlot } from "../utils/state.js";
+import { useLabels } from "../label/Label.svelte";
+import { useOutsideClick } from "../hooks/use-outside-click.svelte.js";
+function adjustOrderedState(state, adjustment = (i) => i) {
+  let currentActiveOption = state.activeOptionIndex !== null ? state.options[state.activeOptionIndex] : null;
+  let sortedOptions = sortByDomNode(
+    adjustment(state.options.slice()),
+    (option) => option.dataRef.current.domRef.current
+  );
+  let adjustedActiveOptionIndex = currentActiveOption ? sortedOptions.indexOf(currentActiveOption) : null;
+  if (adjustedActiveOptionIndex === -1) {
+    adjustedActiveOptionIndex = null;
+  }
+  return {
+    options: sortedOptions,
+    activeOptionIndex: adjustedActiveOptionIndex
+  };
+}
+const stateReducer = (initialState) => {
+  let _state2 = $state(initialState);
+  return {
+    get listboxState() {
+      return _state2.listboxState;
+    },
+    get options() {
+      return _state2.options;
+    },
+    get searchQuery() {
+      return _state2.searchQuery;
+    },
+    get activeOptionIndex() {
+      return _state2.activeOptionIndex;
+    },
+    get activationTrigger() {
+      return _state2.activationTrigger;
+    },
+    get __demoMode() {
+      return _state2.__demoMode;
+    },
+    closeListbox() {
+      if (disabled) return _state2;
+      if (_state2.listboxState === ListboxStates.Closed) return _state2;
+      _state2.activeOptionIndex = null;
+      _state2.listboxState = ListboxStates.Closed;
+      _state2.__demoMode = false;
+      return _state2;
+    },
+    openListbox() {
+      if (disabled) return _state2;
+      if (_state2.listboxState === ListboxStates.Open) return _state2;
+      let activeOptionIndex = _state2.activeOptionIndex;
+      let optionIdx = _state2.options.findIndex((option) => isSelected(option.dataRef.current.value));
+      if (optionIdx !== -1) {
+        activeOptionIndex = optionIdx;
+      }
+      _state2.listboxState = ListboxStates.Open;
+      _state2.activeOptionIndex = activeOptionIndex;
+      _state2.__demoMode = false;
+      return _state2;
+    },
+    goToOption(action) {
+      if (disabled) return _state2;
+      if (_state2.listboxState === ListboxStates.Closed) return _state2;
+      _state2.searchQuery = "";
+      _state2.activationTrigger = action.trigger ?? ActivationTrigger.Other;
+      _state2.__demoMode = false;
+      if (action.focus === Focus.Nothing) {
+        _state2.activeOptionIndex = null;
+        return _state2;
+      }
+      if (action.focus === Focus.Specific) {
+        _state2.activeOptionIndex = _state2.options.findIndex((o) => o.id === action.id);
+        return _state2;
+      } else if (action.focus === Focus.Previous) {
+        let activeOptionIdx = _state2.activeOptionIndex;
+        if (activeOptionIdx !== null) {
+          let currentDom = _state2.options[activeOptionIdx].dataRef.current.domRef;
+          let previousOptionIndex = calculateActiveIndex(action, {
+            resolveItems: () => _state2.options,
+            resolveActiveIndex: () => _state2.activeOptionIndex,
+            resolveId: (option) => option.id,
+            resolveDisabled: (option) => option.dataRef.current.disabled ?? false
+          });
+          if (previousOptionIndex !== null) {
+            let previousDom = _state2.options[previousOptionIndex].dataRef.current.domRef;
+            if (
+              // Next to each other
+              currentDom.current?.previousElementSibling === previousDom?.current || // Or already the first element
+              previousDom.current?.previousElementSibling === null
+            ) {
+              _state2.activeOptionIndex = previousOptionIndex;
+              return _state2;
+            }
+          }
+        }
+      } else if (action.focus === Focus.Next) {
+        let activeOptionIdx = _state2.activeOptionIndex;
+        if (activeOptionIdx !== null) {
+          let currentDom = _state2.options[activeOptionIdx].dataRef.current.domRef;
+          let nextOptionIndex = calculateActiveIndex(action, {
+            resolveItems: () => _state2.options,
+            resolveActiveIndex: () => _state2.activeOptionIndex,
+            resolveId: (option) => option.id,
+            resolveDisabled: (option) => option.dataRef.current.disabled ?? false
+          });
+          if (nextOptionIndex !== null) {
+            let nextDom = _state2.options[nextOptionIndex].dataRef.current.domRef;
+            if (
+              // Next to each other
+              currentDom.current?.nextElementSibling === nextDom.current || // Or already the last element
+              nextDom.current?.nextElementSibling === null
+            ) {
+              _state2.activeOptionIndex = nextOptionIndex;
+              return _state2;
+            }
+          }
+        }
+      }
+      let adjustedState = adjustOrderedState(_state2);
+      let activeOptionIndex = calculateActiveIndex(action, {
+        resolveItems: () => adjustedState.options,
+        resolveActiveIndex: () => adjustedState.activeOptionIndex,
+        resolveId: (option) => option.id,
+        resolveDisabled: (option) => option.dataRef.current.disabled ?? false
+      });
+      _state2.options = adjustedState.options;
+      _state2.activeOptionIndex = activeOptionIndex;
+      return _state2;
+    },
+    search(value2) {
+      if (disabled) return _state2;
+      if (_state2.listboxState === ListboxStates.Closed) return _state2;
+      let wasAlreadySearching = _state2.searchQuery !== "";
+      let offset = wasAlreadySearching ? 0 : 1;
+      let searchQuery = _state2.searchQuery + value2.toLowerCase();
+      let reOrderedOptions = _state2.activeOptionIndex !== null ? _state2.options.slice(_state2.activeOptionIndex + offset).concat(_state2.options.slice(0, _state2.activeOptionIndex + offset)) : _state2.options;
+      let matchingOption = reOrderedOptions.find(
+        (option) => !option.dataRef.current.disabled && option.dataRef.current.textValue?.startsWith(searchQuery)
+      );
+      let matchIdx = matchingOption ? _state2.options.indexOf(matchingOption) : -1;
+      if (matchIdx === -1 || matchIdx === _state2.activeOptionIndex) {
+        _state2.searchQuery = searchQuery;
+      } else {
+        _state2.searchQuery = searchQuery;
+        _state2.activeOptionIndex = matchIdx;
+        _state2.activationTrigger = ActivationTrigger.Other;
+      }
+      return _state2;
+    },
+    clearSearch() {
+      if (disabled) return _state2;
+      if (_state2.listboxState === ListboxStates.Closed) return _state2;
+      if (_state2.searchQuery === "") return _state2;
+      _state2.searchQuery = "";
+      return _state2;
+    },
+    registerOption(action) {
+      let option = { id: action.id, dataRef: action.dataRef };
+      let adjustedState = adjustOrderedState(_state2, (options) => [...options, option]);
+      if (_state2.activeOptionIndex === null) {
+        if (isSelected(action.dataRef.current.value)) {
+          adjustedState.activeOptionIndex = adjustedState.options.indexOf(option);
+        }
+      }
+      _state2.options = adjustedState.options;
+      _state2.activeOptionIndex = adjustedState.activeOptionIndex;
+      return _state2;
+    },
+    unregisterOption(action) {
+      let adjustedState = adjustOrderedState(_state2, (options) => {
+        let idx = options.findIndex((a) => a.id === action.id);
+        if (idx !== -1) options.splice(idx, 1);
+        return options;
+      });
+      _state2.options = adjustedState.options;
+      _state2.activeOptionIndex = adjustedState.activeOptionIndex;
+      _state2.activationTrigger = ActivationTrigger.Other;
+      return _state2;
+    }
+  };
+};
+const listboxActionsContext = null;
+setContext("ListboxActionsContext", listboxActionsContext);
+const listboxDataContext = null;
+setContext("ListboxDataContext", listboxDataContext);
+let {
+  as,
+  value: controlledValue,
+  defaultValue,
+  form,
+  name,
+  onchange: controlledOnChange,
+  by,
+  invalid = false,
+  disabled: ownDisabled = false,
+  horizontal = false,
+  multiple = false,
+  __demoMode = false,
+  children,
+  ...theirProps
+} = $props();
+const providedDisabled = useDisabled();
+const disabled = $derived(providedDisabled.value || ownDisabled);
+const orientation = horizontal ? "horizontal" : "vertical";
+const controllable = useControllable(
+  {
+    get controlledValue() {
+      return controlledValue;
+    }
+  },
+  controlledOnChange,
+  defaultValue
+);
+const { value = multiple ? [] : void 0, onchange: theirOnChange } = $derived(controllable);
+const _state = stateReducer({
+  listboxState: __demoMode ? ListboxStates.Open : ListboxStates.Closed,
+  options: [],
+  searchQuery: "",
+  activeOptionIndex: null,
+  activationTrigger: ActivationTrigger.Other,
+  optionsVisible: false,
+  __demoMode
+});
+const optionsPropsRef = useRef({ static: false, hold: false });
+const buttonRef = useRef(null);
+const optionsRef = useRef(null);
+const listRef = useRef(/* @__PURE__ */ new Map());
+const compare = useByComparator(by);
+const isSelected = (compareValue) => match(data.mode, {
+  [ValueMode.Multi]: () => {
+    return value.some((option) => compare(option, compareValue));
+  },
+  [ValueMode.Single]: () => {
+    return compare(value, compareValue);
+  }
+});
+const data = {
+  get listboxState() {
+    return _state.listboxState;
+  },
+  get options() {
+    return _state.options;
+  },
+  get searchQuery() {
+    return _state.searchQuery;
+  },
+  get activeOptionIndex() {
+    return _state.activeOptionIndex;
+  },
+  get activationTrigger() {
+    return _state.activationTrigger;
+  },
+  get __demoMode() {
+    return _state.__demoMode;
+  },
+  get value() {
+    return value;
+  },
+  get disabled() {
+    return disabled;
+  },
+  get invalid() {
+    return invalid;
+  },
+  get mode() {
+    return multiple ? ValueMode.Multi : ValueMode.Single;
+  },
+  get orientation() {
+    return orientation;
+  },
+  compare,
+  isSelected,
+  get optionsPropsRef() {
+    return optionsPropsRef;
+  },
+  get buttonRef() {
+    return buttonRef;
+  },
+  get optionsRef() {
+    return optionsRef;
+  },
+  get listRef() {
+    return listRef;
+  }
+};
+setContext("ListboxDataContext", data);
+setContext("ListboxData", data);
+const outsideClickEnabled = $derived(data.listboxState === ListboxStates.Open);
+useOutsideClick({
+  get enabled() {
+    return outsideClickEnabled;
+  },
+  get containers() {
+    return [data.buttonRef, data.optionsRef];
+  },
+  cb: (event, target) => {
+    _state.closeListbox();
+    if (!isFocusableElement(target, FocusableMode.Loose)) {
+      event.preventDefault();
+      data.buttonRef.current?.focus();
+    }
+  }
+});
+const slot = $derived({
+  open: _state.listboxState === ListboxStates.Open,
+  disabled,
+  invalid,
+  value
+});
+const selectOption = (id) => {
+  let option = _state.options.find((item) => item.id === id);
+  if (!option) return;
+};
+const selectActiveOption = () => {
+  if (_state.activeOptionIndex !== null) {
+    let { dataRef, id } = _state.options[_state.activeOptionIndex];
+    _state.goToOption({ focus: Focus.Specific, id });
+  }
+  7;
+};
+const d = disposables();
+const goToOption = (focus, id, trigger) => {
+  d.dispose();
+  d.microTask(() => {
+    if (focus === Focus.Specific) {
+      return _state.goToOption({ focus: Focus.Specific, id, trigger });
+    }
+    return _state.goToOption({ focus, trigger });
+  });
+};
+const registerOption = (id, dataRef) => {
+  _state.registerOption({ id, dataRef });
+  return () => _state.unregisterOption({ id });
+};
+const onChange = (value2) => {
+  return match(data.mode, {
+    [ValueMode.Single]() {
+      return theirOnChange?.(value2);
+    },
+    [ValueMode.Multi]() {
+      let copy = data.value.slice();
+      let idx = copy.findIndex((item) => compare(item, value2));
+      if (idx === -1) {
+        copy.push(value2);
+      } else {
+        copy.splice(idx, 1);
+      }
+      return theirOnChange?.(copy);
+    }
+  });
+};
+setContext("ListboxActionsContext", {
+  onChange,
+  registerOption,
+  goToOption,
+  closeListbox: _state.closeListbox,
+  openListbox: _state.openListbox,
+  selectActiveOption,
+  selectOption,
+  search: _state.search,
+  clearSearch: _state.clearSearch
+});
+createFloatingContext();
+const openClosed = $derived(
+  match(data.listboxState, {
+    [ListboxStates.Open]: State.Open,
+    [ListboxStates.Closed]: State.Closed
+  })
+);
+createOpenClosedContext({
+  get value() {
+    return openClosed;
+  }
+});
+useLabels({
+  inherit: true,
+  props: {
+    get htmlFor() {
+      return data.buttonRef.current?.id;
+    }
+  },
+  slot: {
+    get open() {
+      return data.listboxState === ListboxStates.Open;
+    },
+    get disabled() {
+      return disabled;
+    }
+  }
+});
+const ourProps = $derived(stateFromSlot(slot));
+const reset = () => {
+  if (defaultValue === void 0) return;
+  return theirOnChange?.(defaultValue);
+};
+</script>
+
+{#if name && value}
+  <FormFields {disabled} data={{ [name]: value }} {form} onReset={reset} />
+{/if}
+<svelte:element this={as ?? DEFAULT_LISTBOX_TAG} {...ourProps} {...theirProps}>
+  {#if children}{@render children(slot)}{/if}
+</svelte:element>