bits-ui 0.9.9 → 0.10.0

package/dist/bits/{dropdown-menu → menu}/ctx.js

@@ -1,12 +1,13 @@
 import { createBitAttrs, generateId, getOptionUpdater, removeUndefined } from "../../internal/index.js";
 import { createDropdownMenu } from "@melt-ui/svelte";
 import { getContext, setContext } from "svelte";
-const NAME = "dropdown-menu";
-const SUB_NAME = "dropdown-menu-submenu";
-const RADIO_GROUP_NAME = "dropdown-menu-radiogroup";
-const CHECKBOX_ITEM_NAME = "dropdown-menu-checkboxitem";
-const RADIO_ITEM_NAME = "dropdown-menu-radioitem";
-const GROUP_NAME = "dropdown-menu-group";
+import { getPositioningUpdater } from "../floating/helpers.js";
+const NAME = "menu";
+const SUB_NAME = "menu-submenu";
+const RADIO_GROUP_NAME = "menu-radiogroup";
+const CHECKBOX_ITEM_NAME = "menu-checkboxitem";
+const RADIO_ITEM_NAME = "menu-radioitem";
+const GROUP_NAME = "menu-group";
 const PARTS = [
     "arrow",
     "checkbox-indicator",
@@ -17,12 +18,13 @@ const PARTS = [
     "label",
     "radio-group",
     "radio-item",
+    "radio-indicator",
     "separator",
     "sub-content",
     "sub-trigger",
     "trigger"
 ];
-export const getAttrs = createBitAttrs(NAME, PARTS);
+export const getAttrs = createBitAttrs("menu", PARTS);
 export function getCtx() {
     return getContext(NAME);
 }
@@ -61,15 +63,8 @@ export function getSubTrigger() {
     const submenu = getContext(SUB_NAME);
     return submenu;
 }
-export function getContent(sideoffset = 5) {
-    const menu = getCtx();
-    menu.options.positioning.update((prev) => ({ ...prev, gutter: sideoffset }));
-    return menu;
-}
-export function getSubContent(sideOffset = -1) {
-    const submenu = getContext(SUB_NAME);
-    submenu.options.positioning.update((prev) => ({ ...prev, gutter: sideOffset }));
-    return submenu;
+export function getSubmenuCtx() {
+    return getContext(SUB_NAME);
 }
 export function setCheckboxItem(props) {
     const { builders: { createCheckboxItem } } = getCtx();
@@ -99,3 +94,23 @@ export function setArrow(size = 8) {
     menu.options.arrowSize.set(size);
     return menu;
 }
+const defaultPlacement = {
+    side: "bottom",
+    align: "center"
+};
+export function updatePositioning(props) {
+    const withDefaults = { ...defaultPlacement, ...props };
+    const { options: { positioning } } = getCtx();
+    const updater = getPositioningUpdater(positioning);
+    updater(withDefaults);
+}
+const defaultSubPlacement = {
+    side: "right",
+    align: "start"
+};
+export function updateSubPositioning(props) {
+    const withDefaults = { ...defaultSubPlacement, ...props };
+    const { options: { positioning } } = getSubmenuCtx();
+    const updater = getPositioningUpdater(positioning);
+    updater(withDefaults);
+}

package/dist/bits/menu/index.d.ts

@@ -0,0 +1,17 @@
+export { default as Root } from "./components/menu.svelte";
+export { default as Arrow } from "./components/menu-arrow.svelte";
+export { default as CheckboxIndicator } from "./components/menu-checkbox-indicator.svelte";
+export { default as CheckboxItem } from "./components/menu-checkbox-item.svelte";
+export { default as Content } from "./components/menu-content.svelte";
+export { default as Group } from "./components/menu-group.svelte";
+export { default as Item } from "./components/menu-item.svelte";
+export { default as Label } from "./components/menu-label.svelte";
+export { default as RadioGroup } from "./components/menu-radio-group.svelte";
+export { default as RadioIndicator } from "./components/menu-radio-indicator.svelte";
+export { default as RadioItem } from "./components/menu-radio-item.svelte";
+export { default as Separator } from "./components/menu-separator.svelte";
+export { default as Sub } from "./components/menu-sub.svelte";
+export { default as SubContent } from "./components/menu-sub-content.svelte";
+export { default as SubTrigger } from "./components/menu-sub-trigger.svelte";
+export { default as Trigger } from "./components/menu-trigger.svelte";
+export * from "./types.js";

package/dist/bits/menu/index.js

@@ -0,0 +1,17 @@
+export { default as Root } from "./components/menu.svelte";
+export { default as Arrow } from "./components/menu-arrow.svelte";
+export { default as CheckboxIndicator } from "./components/menu-checkbox-indicator.svelte";
+export { default as CheckboxItem } from "./components/menu-checkbox-item.svelte";
+export { default as Content } from "./components/menu-content.svelte";
+export { default as Group } from "./components/menu-group.svelte";
+export { default as Item } from "./components/menu-item.svelte";
+export { default as Label } from "./components/menu-label.svelte";
+export { default as RadioGroup } from "./components/menu-radio-group.svelte";
+export { default as RadioIndicator } from "./components/menu-radio-indicator.svelte";
+export { default as RadioItem } from "./components/menu-radio-item.svelte";
+export { default as Separator } from "./components/menu-separator.svelte";
+export { default as Sub } from "./components/menu-sub.svelte";
+export { default as SubContent } from "./components/menu-sub-content.svelte";
+export { default as SubTrigger } from "./components/menu-sub-trigger.svelte";
+export { default as Trigger } from "./components/menu-trigger.svelte";
+export * from "./types.js";

package/dist/bits/menu/types.d.ts

@@ -0,0 +1,64 @@
+/**
+ * These types are shared between the various menu components,
+ * such as `DropdownMenu`, `Menubar` & `ContextMenu`.
+ */
+import type { HTMLDivAttributes } from "../../internal/index.js";
+import type { CustomEventHandler } from "../..";
+import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
+import type * as I from "./_types.js";
+import type { ContentProps } from "../floating/types.js";
+type Props = I.Props;
+type CheckboxItemProps = I.CheckboxItemProps & HTMLDivAttributes;
+type RadioGroupProps = I.RadioGroupProps & HTMLDivAttributes;
+type RadioItemProps = I.RadioItemProps & HTMLDivAttributes;
+type GroupProps = I.GroupProps & HTMLDivAttributes;
+type AnchorElement = HTMLAnchorAttributes & {
+    href?: HTMLAnchorAttributes["href"];
+};
+type DivElement = HTMLDivAttributes & {
+    href?: never;
+};
+type ItemProps = I.ItemProps & (AnchorElement | DivElement);
+type CheckboxIndicatorProps = I.CheckboxIndicatorProps & HTMLDivAttributes;
+type RadioIndicatorProps = I.RadioIndicatorProps & HTMLDivAttributes;
+type LabelProps = I.LabelProps & HTMLDivAttributes;
+type SeparatorProps = I.SeparatorProps & HTMLDivAttributes;
+type SubProps = I.SubProps;
+type SubTriggerProps = I.SubTriggerProps & HTMLDivAttributes;
+type ContextTriggerProps = I.TriggerProps & HTMLDivAttributes;
+type DropdownTriggerProps = I.TriggerProps & HTMLButtonAttributes;
+type ArrowProps = I.ArrowProps & HTMLDivAttributes;
+type ItemEvents<T extends Element = HTMLDivElement> = {
+    click: CustomEventHandler<MouseEvent, T>;
+    keydown: CustomEventHandler<KeyboardEvent, T>;
+    focusin: CustomEventHandler<FocusEvent, T>;
+    focusout: CustomEventHandler<FocusEvent, T>;
+    pointerdown: CustomEventHandler<PointerEvent, T>;
+    pointerleave: CustomEventHandler<PointerEvent, T>;
+    pointermove: CustomEventHandler<PointerEvent, T>;
+};
+type CheckboxItemEvents = ItemEvents;
+type RadioItemEvents = ItemEvents;
+type SubTriggerEvents = Omit<ItemEvents, "pointerdown">;
+type ContextTriggerEvents<T extends Element = HTMLDivElement> = {
+    pointerdown: CustomEventHandler<PointerEvent, T>;
+    contextmenu: CustomEventHandler<Event, T>;
+};
+type DropdownTriggerEvents<T extends Element = HTMLButtonElement> = {
+    click: CustomEventHandler<MouseEvent, T>;
+    keydown: CustomEventHandler<KeyboardEvent, T>;
+};
+type MenubarTriggerEvents<T extends Element = HTMLButtonElement> = {
+    click: CustomEventHandler<MouseEvent, T>;
+    keydown: CustomEventHandler<KeyboardEvent, T>;
+    pointerenter: CustomEventHandler<PointerEvent, T>;
+};
+type SubContentEvents<T extends Element = HTMLDivElement> = {
+    keydown: CustomEventHandler<KeyboardEvent, T>;
+    focusout: CustomEventHandler<FocusEvent, T>;
+    pointermove: CustomEventHandler<PointerEvent, T>;
+};
+type ContentEvents<T extends Element = HTMLDivElement> = {
+    keydown: CustomEventHandler<KeyboardEvent, T>;
+};
+export type { Props, ArrowProps, CheckboxItemProps, ContentProps, GroupProps, ItemProps, CheckboxIndicatorProps, RadioIndicatorProps, LabelProps, RadioGroupProps, RadioItemProps, SeparatorProps, SubProps, ContentProps as SubContentProps, SubTriggerProps, ContextTriggerProps, DropdownTriggerProps, DropdownTriggerProps as MenubarTriggerProps, ContentEvents, CheckboxItemEvents, ItemEvents, RadioItemEvents, SubTriggerEvents, ContextTriggerEvents, DropdownTriggerEvents, MenubarTriggerEvents, SubContentEvents };

package/dist/bits/menu/types.js

@@ -0,0 +1,5 @@
+/**
+ * These types are shared between the various menu components,
+ * such as `DropdownMenu`, `Menubar` & `ContextMenu`.
+ */
+export {};

package/dist/bits/menubar/_export.types.d.ts

@@ -0,0 +1 @@
+export type { Props as MenubarProps, SubProps as MenubarSubProps, MenuProps as MenubarMenuProps, ItemProps as MenubarItemProps, ArrowProps as MenubarArrowProps, GroupProps as MenubarGroupProps, LabelProps as MenubarLabelProps, TriggerProps as MenubarTriggerProps, ContentProps as MenubarContentProps, RadioItemProps as MenubarRadioItemProps, SeparatorProps as MenubarSeparatorProps, RadioGroupProps as MenubarRadioGroupProps, SubContentProps as MenubarSubContentProps, SubTriggerProps as MenubarSubTriggerProps, CheckboxItemProps as MenubarCheckboxItemProps, RadioIndicatorProps as MenubarRadioIndicatorProps, CheckboxIndicatorProps as MenubarCheckboxIndicatorProps, ItemEvents as MenubarItemEvents, TriggerEvents as MenubarTriggerEvents, ContentEvents as MenubarContentEvents, RadioItemEvents as MenubarRadioItemEvents, SubTriggerEvents as MenubarSubTriggerEvents, SubContentEvents as MenubarSubContentEvents, CheckboxItemEvents as MenubarCheckboxItemEvents } from "./types.js";

package/dist/bits/menubar/_export.types.js

@@ -0,0 +1 @@
+export {};

package/dist/bits/menubar/_types.d.ts

@@ -0,0 +1,9 @@
+/**
+ * We define prop types without the HTMLAttributes here so that we can use them
+ * to type-check our API documentation, which requires we document each prop,
+ * but we don't want to document the HTML attributes.
+ */
+import type { AsChild, Expand, OmitIds } from "../../internal/index.js";
+import type { CreateMenubarProps } from "@melt-ui/svelte";
+type Props = Expand<OmitIds<CreateMenubarProps> & AsChild>;
+export type { Props };

package/dist/bits/menubar/_types.js

@@ -0,0 +1,6 @@
+/**
+ * We define prop types without the HTMLAttributes here so that we can use them
+ * to type-check our API documentation, which requires we document each prop,
+ * but we don't want to document the HTML attributes.
+ */
+export {};

package/dist/bits/menubar/components/{MenubarMenu.svelte → menubar-menu.svelte}

@@ -1,33 +1,25 @@
 <script>import { setMenuCtx } from "../ctx.js";
-import { generateId } from "../../../internal/id.js";
+import { derived } from "svelte/store";
 export let closeOnOutsideClick = void 0;
 export let closeOnEscape = void 0;
 export let portal = void 0;
 export let open = void 0;
 export let onOpenChange = void 0;
 export let preventScroll = void 0;
-export let arrowSize = void 0;
-export let positioning = void 0;
 export let loop = void 0;
 export let dir = void 0;
 export let typeahead = void 0;
 export let closeFocus = void 0;
 export let disableFocusFirstItem = void 0;
-const ids = {
-  menu: generateId(),
-  trigger: generateId()
-};
 const {
   states: { open: localOpen },
-  updateOption
+  updateOption,
+  ids
 } = setMenuCtx({
   closeOnOutsideClick,
-  ids,
   closeOnEscape,
   portal,
   preventScroll,
-  arrowSize,
-  positioning,
   loop,
   dir,
   typeahead,
@@ -41,6 +33,13 @@ const {
     return next;
   }
 });
+const idValues = derived(
+  [ids.menu, ids.trigger],
+  ([$menuId, $triggerId]) => ({
+    menu: $menuId,
+    trigger: $triggerId
+  })
+);
 $:
   open !== void 0 && localOpen.set(open);
 $:
@@ -51,10 +50,6 @@ $:
   updateOption("portal", portal);
 $:
   updateOption("preventScroll", preventScroll);
-$:
-  updateOption("arrowSize", arrowSize);
-$:
-  updateOption("positioning", positioning);
 $:
   updateOption("loop", loop);
 $:
@@ -67,4 +62,4 @@ $:
   updateOption("typeahead", typeahead);
 </script>
 
-<slot menuIds={ids} />
+<slot menuIds={$idValues} />

package/dist/bits/menubar/components/{MenubarMenu.svelte.d.ts → menubar-menu.svelte.d.ts}

@@ -4,17 +4,10 @@ declare const __propDef: {
         preventScroll?: boolean | undefined;
         closeOnEscape?: boolean | undefined;
         closeOnOutsideClick?: boolean | undefined;
-        loop?: boolean | undefined;
-        positioning?: import("@melt-ui/svelte/internal/actions").FloatingConfig | undefined;
-        arrowSize?: number | undefined;
-        forceVisible?: boolean | undefined;
-        ids?: {
-            trigger: string;
-            menu: string;
-        } | undefined;
         portal?: string | HTMLElement | null | undefined;
         closeFocus?: import("@melt-ui/svelte/index.js").FocusProp | undefined;
         dir?: import("@melt-ui/svelte/internal/types").TextDirection | undefined;
+        loop?: boolean | undefined;
         typeahead?: boolean | undefined;
         disableFocusFirstItem?: boolean | undefined;
         open?: boolean | undefined;

package/dist/bits/menubar/components/menubar-sub.svelte

@@ -0,0 +1,33 @@
+<script>import { derived } from "svelte/store";
+import { setSubMenuCtx } from "../ctx.js";
+export let disabled = void 0;
+export let open = void 0;
+export let onOpenChange = void 0;
+const {
+  updateOption,
+  ids,
+  states: { subOpen }
+} = setSubMenuCtx({
+  disabled,
+  onOpenChange: ({ next }) => {
+    if (open !== next) {
+      onOpenChange?.(next);
+      open = next;
+    }
+    return next;
+  }
+});
+const idValues = derived(
+  [ids.menu, ids.trigger],
+  ([$menuId, $triggerId]) => ({
+    menu: $menuId,
+    trigger: $triggerId
+  })
+);
+$:
+  open !== void 0 && subOpen.set(open);
+$:
+  updateOption("disabled", disabled);
+</script>
+
+<slot subIds={$idValues} />

package/dist/bits/menubar/components/{MenubarSub.svelte.d.ts → menubar-sub.svelte.d.ts}

@@ -1,15 +1,9 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        open?: import("svelte/store").Writable<boolean> | undefined;
-        onOpenChange?: import("@melt-ui/svelte/internal/helpers").ChangeFn<boolean> | undefined;
-        positioning?: import("@melt-ui/svelte/internal/actions").FloatingConfig | undefined;
-        arrowSize?: number | undefined;
-        ids?: {
-            trigger: string;
-            menu: string;
-        } | undefined;
         disabled?: boolean | undefined;
+        open?: boolean | undefined;
+        onOpenChange?: import("../../../internal/types.js").OnChangeFn<boolean> | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/bits/menubar/components/{MenubarTrigger.svelte → menubar-trigger.svelte}

@@ -8,27 +8,28 @@ const {
   ids
 } = getMenuCtx();
 const dispatch = createDispatcher();
+const attrs = getAttrs("trigger");
 $:
   if (id) {
     ids.trigger.set(id);
   }
 $:
   builder = $trigger;
-const attrs = getAttrs("trigger");
+$:
+  Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {builder} />
 {:else}
 	<button
 		{...builder} use:builder.action
 		type="button"
 		{...$$restProps}
-		{...attrs}
 		on:m-click={dispatch}
 		on:m-keydown={dispatch}
 		on:m-pointerenter={dispatch}
 	>
-		<slot {builder} {attrs} />
+		<slot {builder} />
 	</button>
 {/if}

package/dist/bits/menubar/components/{MenubarTrigger.svelte.d.ts → menubar-trigger.svelte.d.ts}

@@ -17,7 +17,6 @@ declare const __propDef: {
             } & {
                 action: (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown" | "click" | "pointerenter">;
             };
-            attrs: Record<string, string>;
         };
     };
     events: TriggerEvents;

package/dist/bits/menubar/components/{Menubar.svelte → menubar.svelte}

@@ -1,5 +1,5 @@
 <script>import { melt } from "@melt-ui/svelte";
-import { setCtx, getAttrs } from "../ctx.js";
+import { setCtx, getMenubarAttrs } from "../ctx.js";
 import { derived } from "svelte/store";
 export let loop = true;
 export let closeOnEscape = true;
@@ -13,6 +13,7 @@ const {
 const idValues = derived([ids.menubar], ([$menubarId]) => ({
   menubar: $menubarId
 }));
+const attrs = getMenubarAttrs("root");
 $:
   if (id) {
     ids.menubar.set(id);
@@ -23,13 +24,19 @@ $:
   updateOption("closeOnEscape", closeOnEscape);
 $:
   builder = $menubar;
-const attrs = getAttrs("root");
+$:
+  Object.assign(builder, attrs);
+$:
+  slotProps = {
+    builder,
+    ids: $idValues
+  };
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} ids={$idValues} />
+	<slot {...slotProps} />
 {:else}
-	<div {...builder} use:builder.action {...$$restProps} {...attrs}>
-		<slot {builder} {attrs} ids={$idValues} />
+	<div {...builder} use:builder.action {...$$restProps}>
+		<slot {...slotProps} />
 	</div>
 {/if}

package/dist/bits/menubar/components/{Menubar.svelte.d.ts → menubar.svelte.d.ts}

@@ -21,7 +21,6 @@ declare const __propDef: {
                     destroy: typeof import("@melt-ui/svelte/internal/helpers").noop;
                 };
             };
-            attrs: Record<string, string>;
             ids: {
                 menubar: string;
             };