bits-ui 0.17.0 → 0.18.0

package/dist/bits/combobox/components/combobox-content.svelte

@@ -0,0 +1,104 @@
+<script>import { createDispatcher } from "../../../internal/events.js";
+import { melt } from "@melt-ui/svelte";
+import { getCtx, updatePositioning } from "../ctx.js";
+export let transition = void 0;
+export let transitionConfig = void 0;
+export let inTransition = void 0;
+export let inTransitionConfig = void 0;
+export let outTransition = void 0;
+export let outTransitionConfig = void 0;
+export let asChild = false;
+export let id = void 0;
+export let side = "bottom";
+export let align = "center";
+export let sideOffset = 0;
+export let alignOffset = 0;
+export let collisionPadding = 8;
+export let avoidCollisions = true;
+export let collisionBoundary = void 0;
+export let sameWidth = true;
+export let fitViewport = false;
+export let el = void 0;
+const {
+  elements: { menu },
+  states: { open },
+  ids,
+  getAttrs
+} = getCtx();
+const dispatch = createDispatcher();
+const attrs = getAttrs("content");
+$:
+  if (id) {
+    ids.menu.set(id);
+  }
+$:
+  builder = $menu;
+$:
+  Object.assign(builder, attrs);
+$:
+  if ($open)
+    updatePositioning({
+      side,
+      align,
+      sideOffset,
+      alignOffset,
+      collisionPadding,
+      avoidCollisions,
+      collisionBoundary,
+      sameWidth,
+      fitViewport
+    });
+</script>
+
+<!-- svelte-ignore a11y-no-static-element-interactions / applied by melt's builder-->
+{#if asChild && $open}
+	<slot {builder} />
+{:else if transition && $open}
+	<div
+		bind:this={el}
+		transition:transition={transitionConfig}
+		{...builder} use:builder.action
+		{...$$restProps}
+		on:m-pointerleave={dispatch}
+		on:keydown
+	>
+		<slot {builder} />
+	</div>
+{:else if inTransition && outTransition && $open}
+	<div
+		bind:this={el}
+		in:inTransition={inTransitionConfig}
+		out:outTransition={outTransitionConfig}
+		{...builder} use:builder.action
+		{...$$restProps}
+		on:m-pointerleave={dispatch}
+		on:keydown
+	>
+		<slot {builder} />
+	</div>
+{:else if inTransition && $open}
+	<div
+		in:inTransition={inTransitionConfig}
+		{...builder} use:builder.action
+		{...$$restProps}
+		on:m-pointerleave={dispatch}
+		on:keydown
+	>
+		<slot {builder} />
+	</div>
+{:else if outTransition && $open}
+	<div
+		bind:this={el}
+		out:outTransition={outTransitionConfig}
+		{...builder} use:builder.action
+		{...$$restProps}
+		on:m-pointerleave={dispatch}
+		on:keydown
+	>
+		<slot {builder} />
+	</div>
+{:else if $open}
+	<div bind:this={el} {...builder} use:builder.action {...$$restProps} on:m-pointerleave={dispatch} on:keydown>
+		<slot {builder} />
+	</div>
+{/if}

package/dist/bits/combobox/components/combobox-content.svelte.d.ts

@@ -0,0 +1,27 @@
+import { SvelteComponent } from "svelte";
+import type { Transition } from "../../../internal/types.js";
+import type { ContentEvents, ContentProps } from "../types.js";
+declare class __sveltets_Render<T extends Transition, In extends Transition, Out extends Transition> {
+    props(): ContentProps<T, In, Out>;
+    events(): ContentEvents;
+    slots(): {
+        default: {
+            builder: {
+                readonly hidden: true | undefined;
+                readonly id: string;
+                readonly role: "listbox";
+                readonly style: string;
+            } & {
+                [x: `data-melt-${string}`]: "";
+            } & {
+                action: (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"pointerleave">;
+            };
+        };
+    };
+}
+export type ComboboxContentProps<T extends Transition, In extends Transition, Out extends Transition> = ReturnType<__sveltets_Render<T, In, Out>['props']>;
+export type ComboboxContentEvents<T extends Transition, In extends Transition, Out extends Transition> = ReturnType<__sveltets_Render<T, In, Out>['events']>;
+export type ComboboxContentSlots<T extends Transition, In extends Transition, Out extends Transition> = ReturnType<__sveltets_Render<T, In, Out>['slots']>;
+export default class ComboboxContent<T extends Transition, In extends Transition, Out extends Transition> extends SvelteComponent<ComboboxContentProps<T, In, Out>, ComboboxContentEvents<T, In, Out>, ComboboxContentSlots<T, In, Out>> {
+}
+export {};

package/dist/bits/combobox/components/combobox-group-label.svelte

@@ -0,0 +1,25 @@
+<script>import { melt } from "@melt-ui/svelte";
+import { getGroupLabel, getCtx } from "../ctx.js";
+export let asChild = false;
+export let id = void 0;
+export let el = void 0;
+const { ids, getAttrs } = getCtx();
+const { groupLabel, id: groupId } = getGroupLabel();
+const attrs = getAttrs("group-label");
+$:
+  if (id) {
+    ids.label.set(id);
+  }
+$:
+  builder = $groupLabel(groupId);
+$:
+  Object.assign(builder, attrs);
+</script>
+
+{#if asChild}
+	<slot {builder} />
+{:else}
+	<div bind:this={el} {...builder} use:builder.action {...$$restProps}>
+		<slot {builder} />
+	</div>
+{/if}

package/dist/bits/combobox/components/combobox-group-label.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+import type { GroupLabelEvents, GroupLabelProps } from "../types.js";
+declare const __propDef: {
+    props: GroupLabelProps;
+    slots: {
+        default: {
+            builder: {
+                id: string;
+            } & {
+                [x: `data-melt-${string}`]: "";
+            } & {
+                action: import("svelte/action").Action<any, any, Record<never, any>>;
+            };
+        };
+    };
+    events: GroupLabelEvents;
+};
+export type ComboboxGroupLabelProps = typeof __propDef.props;
+export type ComboboxGroupLabelEvents = typeof __propDef.events;
+export type ComboboxGroupLabelSlots = typeof __propDef.slots;
+export default class ComboboxGroupLabel extends SvelteComponent<ComboboxGroupLabelProps, ComboboxGroupLabelEvents, ComboboxGroupLabelSlots> {
+}
+export {};

package/dist/bits/combobox/components/combobox-group.svelte

@@ -0,0 +1,19 @@
+<script>import { melt } from "@melt-ui/svelte";
+import { setGroupCtx } from "../ctx.js";
+export let asChild = false;
+export let el = void 0;
+const { group, id, getAttrs } = setGroupCtx();
+const attrs = getAttrs("group");
+$:
+  builder = $group(id);
+$:
+  Object.assign(builder, attrs);
+</script>
+
+{#if asChild}
+	<slot {builder} />
+{:else}
+	<div bind:this={el} {...builder} use:builder.action {...$$restProps}>
+		<slot {builder} />
+	</div>
+{/if}

package/dist/bits/combobox/components/combobox-group.svelte.d.ts

@@ -0,0 +1,26 @@
+import { SvelteComponent } from "svelte";
+import type { GroupProps } from "../types.js";
+declare const __propDef: {
+    props: GroupProps;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            builder: {
+                role: string;
+                'aria-labelledby': string;
+            } & {
+                [x: `data-melt-${string}`]: "";
+            } & {
+                action: import("svelte/action").Action<any, any, Record<never, any>>;
+            };
+        };
+    };
+};
+export type ComboboxGroupProps = typeof __propDef.props;
+export type ComboboxGroupEvents = typeof __propDef.events;
+export type ComboboxGroupSlots = typeof __propDef.slots;
+export default class ComboboxGroup extends SvelteComponent<ComboboxGroupProps, ComboboxGroupEvents, ComboboxGroupSlots> {
+}
+export {};

package/dist/bits/combobox/components/combobox-hidden-input.svelte

@@ -0,0 +1,25 @@
+<script>import { melt } from "@melt-ui/svelte";
+import { getCtx } from "../ctx.js";
+export let asChild = false;
+export let el = void 0;
+const {
+  elements: { hiddenInput },
+  options: { disabled },
+  getAttrs
+} = getCtx();
+$:
+  attrs = {
+    ...getAttrs("input"),
+    disabled: $disabled ? true : void 0
+  };
+$:
+  builder = $hiddenInput;
+$:
+  Object.assign(builder, attrs);
+</script>
+
+{#if asChild}
+	<slot {builder} />
+{:else}
+	<input bind:this={el} {...builder} use:builder.action {...$$restProps} />
+{/if}

package/dist/bits/combobox/components/combobox-hidden-input.svelte.d.ts

@@ -0,0 +1,32 @@
+import { SvelteComponent } from "svelte";
+import type { InputProps } from "../types.js";
+declare const __propDef: {
+    props: InputProps;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            builder: {
+                required: boolean | undefined;
+                value: unknown;
+                name: string | undefined;
+                type: string;
+                'aria-hidden': boolean;
+                hidden: boolean;
+                tabIndex: number;
+                style: string;
+            } & {
+                [x: `data-melt-${string}`]: "";
+            } & {
+                action: import("svelte/action").Action<any, any, Record<never, any>>;
+            };
+        };
+    };
+};
+export type ComboboxHiddenInputProps = typeof __propDef.props;
+export type ComboboxHiddenInputEvents = typeof __propDef.events;
+export type ComboboxHiddenInputSlots = typeof __propDef.slots;
+export default class ComboboxHiddenInput extends SvelteComponent<ComboboxHiddenInputProps, ComboboxHiddenInputEvents, ComboboxHiddenInputSlots> {
+}
+export {};

package/dist/bits/combobox/components/combobox-input.svelte

@@ -0,0 +1,31 @@
+<script>import { melt } from "@melt-ui/svelte";
+import { getCtx } from "../ctx.js";
+import { createDispatcher } from "../../../internal/events.js";
+export let asChild = false;
+export let placeholder = void 0;
+export let el = void 0;
+const {
+  elements: { input },
+  getAttrs
+} = getCtx();
+const dispatch = createDispatcher();
+const attrs = getAttrs("input");
+$:
+  builder = $input;
+$:
+  Object.assign(builder, attrs);
+</script>
+
+{#if asChild}
+	<slot {builder} {placeholder} />
+{:else}
+	<input
+		bind:this={el}
+		{...builder} use:builder.action
+		{...$$restProps}
+		{placeholder}
+		on:m-click={dispatch}
+		on:m-keydown={dispatch}
+		on:m-input={dispatch}
+	/>
+{/if}

package/dist/bits/combobox/components/combobox-input.svelte.d.ts

@@ -0,0 +1,33 @@
+import { SvelteComponent } from "svelte";
+import type { InputProps, InputEvents } from "../types.js";
+declare const __propDef: {
+    props: InputProps;
+    slots: {
+        default: {
+            builder: {
+                readonly role: "combobox";
+                readonly value: string;
+                readonly disabled: true | undefined;
+                readonly type: "button" | undefined;
+                readonly 'aria-expanded': boolean;
+                readonly 'aria-controls': string;
+                readonly 'aria-activedescendant': string | undefined;
+                readonly 'aria-autocomplete': "list";
+                readonly 'aria-labelledby': string;
+                readonly id: string;
+            } & {
+                [x: `data-melt-${string}`]: "";
+            } & {
+                action: (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"input" | "keydown" | "click">;
+            };
+            placeholder: string | null | undefined;
+        };
+    };
+    events: InputEvents;
+};
+export type ComboboxInputProps = typeof __propDef.props;
+export type ComboboxInputEvents = typeof __propDef.events;
+export type ComboboxInputSlots = typeof __propDef.slots;
+export default class ComboboxInput extends SvelteComponent<ComboboxInputProps, ComboboxInputEvents, ComboboxInputSlots> {
+}
+export {};

package/dist/bits/combobox/components/combobox-item-indicator.svelte

@@ -0,0 +1,16 @@
+<script>import { getItemIndicator } from "../ctx.js";
+export let asChild = false;
+export let el = void 0;
+const { isSelected, value, getAttrs } = getItemIndicator();
+const attrs = getAttrs("indicator");
+</script>
+
+{#if asChild}
+	<slot {attrs} isSelected={$isSelected(value)} />
+{:else}
+	<div bind:this={el} {...$$restProps} {...attrs}>
+		{#if $isSelected(value)}
+			<slot {attrs} isSelected={$isSelected(value)} />
+		{/if}
+	</div>
+{/if}

package/dist/bits/combobox/components/combobox-item-indicator.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+import type { IndicatorProps } from "../types.js";
+declare const __propDef: {
+    props: IndicatorProps;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            attrs: Record<string, string>;
+            isSelected: boolean;
+        };
+    };
+};
+export type ComboboxItemIndicatorProps = typeof __propDef.props;
+export type ComboboxItemIndicatorEvents = typeof __propDef.events;
+export type ComboboxItemIndicatorSlots = typeof __propDef.slots;
+export default class ComboboxItemIndicator extends SvelteComponent<ComboboxItemIndicatorProps, ComboboxItemIndicatorEvents, ComboboxItemIndicatorSlots> {
+}
+export {};

package/dist/bits/combobox/components/combobox-item.svelte

@@ -0,0 +1,47 @@
+<script>import { melt } from "@melt-ui/svelte";
+import { setItemCtx } from "../ctx.js";
+import { createDispatcher } from "../../../internal/events.js";
+export let value;
+export let disabled = void 0;
+export let label = void 0;
+export let asChild = false;
+export let el = void 0;
+const {
+  elements: { option: item },
+  helpers: { isSelected: isSelectedStore },
+  getAttrs
+} = setItemCtx(value);
+const dispatch = createDispatcher();
+const attrs = getAttrs("item");
+$:
+  if (!label && typeof value === "string")
+    label = value;
+$:
+  builder = $item({ value, disabled, label });
+$:
+  Object.assign(builder, attrs);
+$:
+  isSelected = $isSelectedStore(value);
+</script>
+
+<!-- svelte-ignore a11y-no-static-element-interactions / applied by melt's builder-->
+
+{#if asChild}
+	<slot {builder} {isSelected} />
+{:else}
+	<div
+		bind:this={el}
+		{...builder} use:builder.action
+		{...$$restProps}
+		on:m-click={dispatch}
+		on:m-pointermove={dispatch}
+		on:focusin
+		on:keydown
+		on:focusout
+		on:pointerleave
+	>
+		<slot {builder} {isSelected}>
+			{label ? label : value}
+		</slot>
+	</div>
+{/if}

package/dist/bits/combobox/components/combobox-item.svelte.d.ts

@@ -0,0 +1,31 @@
+import { SvelteComponent } from "svelte";
+import type { ItemEvents, ItemProps } from "../types.js";
+declare const __propDef: {
+    props: ItemProps;
+    slots: {
+        default: {
+            builder: {
+                readonly 'data-value': string;
+                readonly 'data-label': string | undefined;
+                readonly 'data-disabled': true | undefined;
+                readonly 'aria-disabled': true | undefined;
+                readonly 'aria-selected': boolean;
+                readonly 'data-selected': "" | undefined;
+                readonly id: string;
+                readonly role: "option";
+            } & {
+                [x: `data-melt-${string}`]: "";
+            } & {
+                action: (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"click" | "pointermove">;
+            };
+            isSelected: boolean;
+        };
+    };
+    events: ItemEvents;
+};
+export type ComboboxItemProps = typeof __propDef.props;
+export type ComboboxItemEvents = typeof __propDef.events;
+export type ComboboxItemSlots = typeof __propDef.slots;
+export default class ComboboxItem extends SvelteComponent<ComboboxItemProps, ComboboxItemEvents, ComboboxItemSlots> {
+}
+export {};

package/dist/bits/combobox/components/combobox-label.svelte

@@ -0,0 +1,22 @@
+<script>import { melt } from "@melt-ui/svelte";
+import { getCtx } from "../ctx.js";
+export let asChild = false;
+export let el = void 0;
+const {
+  elements: { label },
+  getAttrs
+} = getCtx();
+const attrs = getAttrs("label");
+$:
+  builder = $label;
+$:
+  Object.assign(builder, attrs);
+</script>
+
+{#if asChild}
+	<slot {builder} />
+{:else}
+	<label bind:this={el} {...builder} use:builder.action {...$$restProps} for={builder.id}>
+		<slot />
+	</label>
+{/if}

package/dist/bits/combobox/components/combobox-label.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+import type { LabelProps } from "../types.js";
+declare const __propDef: {
+    props: LabelProps;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type ComboboxLabelProps = typeof __propDef.props;
+export type ComboboxLabelEvents = typeof __propDef.events;
+export type ComboboxLabelSlots = typeof __propDef.slots;
+export default class ComboboxLabel extends SvelteComponent<ComboboxLabelProps, ComboboxLabelEvents, ComboboxLabelSlots> {
+}
+export {};

package/dist/bits/combobox/components/combobox.svelte

@@ -0,0 +1,113 @@
+<script context="module"></script>
+
+<script generics="T, Multiple extends boolean = false">import { arraysAreEqual } from "../../../internal/arrays.js";
+import { derived } from "svelte/store";
+import { setCtx } from "../ctx.js";
+export let required = void 0;
+export let disabled = void 0;
+export let preventScroll = void 0;
+export let loop = void 0;
+export let closeOnEscape = void 0;
+export let closeOnOutsideClick = void 0;
+export let portal = void 0;
+export let name = void 0;
+export let multiple = false;
+export let selected = void 0;
+export let onSelectedChange = void 0;
+export let open = void 0;
+export let onOpenChange = void 0;
+export let items = [];
+export let onOutsideClick = void 0;
+export let inputValue = "";
+const {
+  states: { open: localOpen, selected: localSelected, inputValue: localInputValue, touchedInput },
+  updateOption,
+  ids
+} = setCtx({
+  required,
+  disabled,
+  preventScroll,
+  loop,
+  closeOnEscape,
+  closeOnOutsideClick,
+  portal,
+  name,
+  onOutsideClick,
+  multiple,
+  forceVisible: true,
+  defaultSelected: Array.isArray(selected) ? [...selected] : (
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    selected
+  ),
+  defaultOpen: open,
+  onSelectedChange: ({ next }) => {
+    if (Array.isArray(next)) {
+      if (!Array.isArray(selected) || !arraysAreEqual(selected, next)) {
+        onSelectedChange?.(next);
+        selected = next;
+        return next;
+      }
+      return next;
+    }
+    if (selected !== next) {
+      onSelectedChange?.(next);
+      selected = next;
+    }
+    inputValue = next?.label ?? (typeof next?.value === "string" ? next?.value : "");
+    localInputValue.set(inputValue);
+    return next;
+  },
+  onOpenChange: ({ next }) => {
+    if (open !== next) {
+      onOpenChange?.(next);
+      open = next;
+    }
+    return next;
+  },
+  items
+});
+const idValues = derived(
+  [ids.menu, ids.trigger, ids.label],
+  ([$menuId, $triggerId, $labelId]) => ({
+    menu: $menuId,
+    trigger: $triggerId,
+    label: $labelId
+  })
+);
+$:
+  if ($touchedInput)
+    inputValue = $localInputValue;
+$:
+  inputValue !== void 0 && localInputValue.set(inputValue);
+$:
+  open !== void 0 && localOpen.set(open);
+$:
+  selected !== void 0 && localSelected.set(
+    Array.isArray(selected) ? [...selected] : (
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      selected
+    )
+  );
+$:
+  updateOption("required", required);
+$:
+  updateOption("disabled", disabled);
+$:
+  updateOption("preventScroll", preventScroll);
+$:
+  updateOption("loop", loop);
+$:
+  updateOption("closeOnEscape", closeOnEscape);
+$:
+  updateOption("closeOnOutsideClick", closeOnOutsideClick);
+$:
+  updateOption("portal", portal);
+$:
+  updateOption("name", name);
+$:
+  updateOption("multiple", multiple);
+$:
+  updateOption("onOutsideClick", onOutsideClick);
+</script>
+
+<slot ids={$idValues} />

package/dist/bits/combobox/components/combobox.svelte.d.ts

@@ -0,0 +1,41 @@
+import { SvelteComponent } from "svelte";
+declare class __sveltets_Render<T, Multiple extends boolean = false> {
+    props(): {
+        disabled?: boolean | undefined;
+        preventScroll?: boolean | undefined;
+        closeOnEscape?: boolean | undefined;
+        closeOnOutsideClick?: boolean | undefined;
+        onOutsideClick?: ((event: PointerEvent) => void) | undefined;
+        portal?: string | HTMLElement | null | undefined;
+        required?: boolean | undefined;
+        name?: string | undefined;
+        scrollAlignment?: "center" | "nearest" | undefined;
+        loop?: boolean | undefined;
+        highlightOnHover?: boolean | undefined;
+        selected?: import("../_types.js").WhenTrue<Multiple, import("../../../index.js").Selected<T>[] | undefined, import("../../../index.js").Selected<T> | undefined, import("../../../index.js").Selected<T> | import("../../../index.js").Selected<T>[] | undefined> | undefined;
+        onSelectedChange?: import("../../../internal/types.js").OnChangeFn<import("../_types.js").WhenTrue<Multiple, import("../../../index.js").Selected<T>[] | undefined, import("../../../index.js").Selected<T> | undefined, import("../../../index.js").Selected<T> | import("../../../index.js").Selected<T>[] | undefined>> | undefined;
+        open?: boolean | undefined;
+        onOpenChange?: import("../../../internal/types.js").OnChangeFn<boolean> | undefined;
+        multiple?: Multiple | undefined;
+        inputValue?: string | undefined;
+        items?: import("../../../index.js").Selected<T>[] | undefined;
+    };
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {
+        default: {
+            ids: {
+                menu: string;
+                trigger: string;
+                label: string;
+            };
+        };
+    };
+}
+export type ComboboxProps<T, Multiple extends boolean = false> = ReturnType<__sveltets_Render<T, Multiple>['props']>;
+export type ComboboxEvents<T, Multiple extends boolean = false> = ReturnType<__sveltets_Render<T, Multiple>['events']>;
+export type ComboboxSlots<T, Multiple extends boolean = false> = ReturnType<__sveltets_Render<T, Multiple>['slots']>;
+export default class Combobox<T, Multiple extends boolean = false> extends SvelteComponent<ComboboxProps<T, Multiple>, ComboboxEvents<T, Multiple>, ComboboxSlots<T, Multiple>> {
+}
+export {};