bits-ui 1.4.7 → 1.5.0

package/dist/bits/checkbox/checkbox.svelte.js

@@ -16,8 +16,9 @@ class CheckboxGroupState {
         if (!checkboxValue)
             return;
         if (!this.opts.value.current.includes(checkboxValue)) {
-            this.opts.value.current.push(checkboxValue);
-            this.opts.onValueChange.current(this.opts.value.current);
+            const newValue = [...$state.snapshot(this.opts.value.current), checkboxValue];
+            this.opts.value.current = newValue;
+            this.opts.onValueChange.current(newValue);
         }
     }
     removeValue(checkboxValue) {
@@ -26,8 +27,9 @@ class CheckboxGroupState {
         const index = this.opts.value.current.indexOf(checkboxValue);
         if (index === -1)
             return;
-        this.opts.value.current.splice(index, 1);
-        this.opts.onValueChange.current(this.opts.value.current);
+        const newValue = this.opts.value.current.filter((v) => v !== checkboxValue);
+        this.opts.value.current = newValue;
+        this.opts.onValueChange.current(newValue);
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,

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

@@ -28,9 +28,9 @@
 		required: box.with(() => Boolean(required)),
 		name: box.with(() => name),
 		value: box.with(
-			() => value,
+			() => $state.snapshot(value),
 			(v) => {
-				value = v;
+				value = $state.snapshot(v);
 				onValueChange(v);
 			}
 		),

package/dist/bits/checkbox/components/checkbox.svelte

@@ -4,6 +4,7 @@
 	import { CheckboxGroupContext, useCheckboxRoot } from "../checkbox.svelte.js";
 	import CheckboxInput from "./checkbox-input.svelte";
 	import { useId } from "../../../internal/use-id.js";
+	import { watch } from "runed";
 
 	let {
 		checked = $bindable(false),
@@ -32,6 +33,19 @@
 		}
 	}
 
+	watch.pre(
+		() => value,
+		() => {
+			if (group && value) {
+				if (group.opts.value.current.includes(value)) {
+					checked = true;
+				} else {
+					checked = false;
+				}
+			}
+		}
+	);
+
 	const rootState = useCheckboxRoot(
 		{
 			checked: box.with(

package/dist/bits/date-picker/exports.d.ts

@@ -19,4 +19,5 @@ export { default as NextButton } from "../calendar/components/calendar-next-butt
 export { default as PrevButton } from "../calendar/components/calendar-prev-button.svelte";
 export { default as Cell } from "../calendar/components/calendar-cell.svelte";
 export { default as Day } from "../calendar/components/calendar-day.svelte";
-export type { DatePickerRootProps as RootProps, DatePickerLabelProps as LabelProps, DatePickerInputProps as InputProps, DatePickerSegmentProps as SegmentProps, DatePickerArrowProps as ArrowProps, DatePickerCloseProps as CloseProps, DatePickerContentProps as ContentProps, DatePickerContentStaticProps as ContentStaticProps, DatePickerTriggerProps as TriggerProps, DatePickerCalendarProps as CalendarProps, DatePickerCellProps as CellProps, DatePickerDayProps as DayProps, DatePickerGridBodyProps as GridBodyProps, DatePickerGridHeadProps as GridHeadProps, DatePickerGridProps as GridProps, DatePickerGridRowProps as GridRowProps, DatePickerHeadCellProps as HeadCellProps, DatePickerHeaderProps as HeaderProps, DatePickerHeadingProps as HeadingProps, DatePickerNextButtonProps as NextButtonProps, DatePickerPrevButtonProps as PrevButtonProps, } from "./types.js";
+export { default as Portal } from "../utilities/portal/portal.svelte";
+export type { DatePickerRootProps as RootProps, DatePickerLabelProps as LabelProps, DatePickerInputProps as InputProps, DatePickerSegmentProps as SegmentProps, DatePickerArrowProps as ArrowProps, DatePickerCloseProps as CloseProps, DatePickerContentProps as ContentProps, DatePickerContentStaticProps as ContentStaticProps, DatePickerTriggerProps as TriggerProps, DatePickerCalendarProps as CalendarProps, DatePickerCellProps as CellProps, DatePickerDayProps as DayProps, DatePickerGridBodyProps as GridBodyProps, DatePickerGridHeadProps as GridHeadProps, DatePickerGridProps as GridProps, DatePickerGridRowProps as GridRowProps, DatePickerHeadCellProps as HeadCellProps, DatePickerHeaderProps as HeaderProps, DatePickerHeadingProps as HeadingProps, DatePickerNextButtonProps as NextButtonProps, DatePickerPrevButtonProps as PrevButtonProps, DatePickerPortalProps as PortalProps, } from "./types.js";

package/dist/bits/date-picker/exports.js

@@ -19,3 +19,4 @@ export { default as NextButton } from "../calendar/components/calendar-next-butt
 export { default as PrevButton } from "../calendar/components/calendar-prev-button.svelte";
 export { default as Cell } from "../calendar/components/calendar-cell.svelte";
 export { default as Day } from "../calendar/components/calendar-day.svelte";
+export { default as Portal } from "../utilities/portal/portal.svelte";

package/dist/bits/date-picker/types.d.ts

@@ -4,6 +4,7 @@ import type { BitsPrimitiveDivAttributes } from "../../shared/attributes.js";
 import type { CalendarRootSnippetProps } from "../../types.js";
 import type { DateMatcher, DateOnInvalid, DateValidator, EditableSegmentPart } from "../../shared/index.js";
 import type { Granularity, WeekStartsOn } from "../../shared/date/types.js";
+import type { PortalProps } from "../utilities/portal/index.js";
 export type DatePickerRootPropsWithoutHTML = WithChildren<{
     /**
      * The value of the date picker.
@@ -231,4 +232,6 @@ export type { PopoverTriggerPropsWithoutHTML as DatePickerTriggerPropsWithoutHTM
 export type { DateFieldInputPropsWithoutHTML as DatePickerInputPropsWithoutHTML, DateFieldInputProps as DatePickerInputProps, DateFieldLabelPropsWithoutHTML as DatePickerLabelPropsWithoutHTML, DateFieldLabelProps as DatePickerLabelProps, DateFieldSegmentPropsWithoutHTML as DatePickerSegmentPropsWithoutHTML, DateFieldSegmentProps as DatePickerSegmentProps, } from "../date-field/types.js";
 export type DatePickerCalendarPropsWithoutHTML = WithChild<{}, CalendarRootSnippetProps>;
 export type DatePickerCalendarProps = DatePickerCalendarPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, DatePickerCalendarPropsWithoutHTML>;
+export type DatePickerPortalPropsWithoutHTML = PortalProps;
+export type DatePickerPortalProps = DatePickerPortalPropsWithoutHTML;
 export type { CalendarCellPropsWithoutHTML as DatePickerCellPropsWithoutHTML, CalendarCellProps as DatePickerCellProps, CalendarDayPropsWithoutHTML as DatePickerDayPropsWithoutHTML, CalendarDayProps as DatePickerDayProps, CalendarGridPropsWithoutHTML as DatePickerGridPropsWithoutHTML, CalendarGridProps as DatePickerGridProps, CalendarGridBodyPropsWithoutHTML as DatePickerGridBodyPropsWithoutHTML, CalendarGridBodyProps as DatePickerGridBodyProps, CalendarGridHeadPropsWithoutHTML as DatePickerGridHeadPropsWithoutHTML, CalendarGridHeadProps as DatePickerGridHeadProps, CalendarGridRowPropsWithoutHTML as DatePickerGridRowPropsWithoutHTML, CalendarGridRowProps as DatePickerGridRowProps, CalendarHeadCellPropsWithoutHTML as DatePickerHeadCellPropsWithoutHTML, CalendarHeadCellProps as DatePickerHeadCellProps, CalendarHeaderPropsWithoutHTML as DatePickerHeaderPropsWithoutHTML, CalendarHeaderProps as DatePickerHeaderProps, CalendarHeadingPropsWithoutHTML as DatePickerHeadingPropsWithoutHTML, CalendarHeadingProps as DatePickerHeadingProps, CalendarNextButtonPropsWithoutHTML as DatePickerNextButtonPropsWithoutHTML, CalendarNextButtonProps as DatePickerNextButtonProps, CalendarPrevButtonPropsWithoutHTML as DatePickerPrevButtonPropsWithoutHTML, CalendarPrevButtonProps as DatePickerPrevButtonProps, } from "../calendar/types.js";

package/dist/bits/menu/components/menu-sub-trigger.svelte

@@ -1,20 +1,23 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
-	import type { MenuItemProps } from "../types.js";
+	import type { MenuSubTriggerProps } from "../types.js";
 	import { useMenuSubTrigger } from "../menu.svelte.js";
 	import { useId } from "../../../internal/use-id.js";
 	import FloatingLayerAnchor from "../../utilities/floating-layer/components/floating-layer-anchor.svelte";
+	import { noop } from "../../../internal/noop.js";
 	let {
 		id = useId(),
 		disabled = false,
 		ref = $bindable(null),
 		children,
 		child,
+		onSelect = noop,
 		...restProps
-	}: MenuItemProps = $props();
+	}: MenuSubTriggerProps = $props();
 
 	const subTriggerState = useMenuSubTrigger({
 		disabled: box.with(() => disabled),
+		onSelect: box.with(() => onSelect),
 		id: box.with(() => id),
 		ref: box.with(
 			() => ref,

package/dist/bits/menu/components/menu-sub-trigger.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { MenuItemProps } from "../types.js";
-declare const MenuSubTrigger: import("svelte").Component<MenuItemProps, {}, "ref">;
+import type { MenuSubTriggerProps } from "../types.js";
+declare const MenuSubTrigger: import("svelte").Component<MenuSubTriggerProps, {}, "ref">;
 type MenuSubTrigger = ReturnType<typeof MenuSubTrigger>;
 export default MenuSubTrigger;

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

@@ -146,10 +146,11 @@ declare class MenuItemState {
 }
 declare class MenuSubTriggerState {
     #private;
+    readonly opts: MenuItemSharedStateProps & Pick<MenuItemStateProps, "onSelect">;
     readonly item: MenuItemSharedState;
     readonly content: MenuContentState;
     readonly submenu: MenuMenuState;
-    constructor(item: MenuItemSharedState, content: MenuContentState, submenu: MenuMenuState);
+    constructor(opts: MenuItemSharedStateProps & Pick<MenuItemStateProps, "onSelect">, item: MenuItemSharedState, content: MenuContentState, submenu: MenuMenuState);
     onpointermove(e: BitsPointerEvent): void;
     onpointerleave(e: BitsPointerEvent): void;
     onkeydown(e: BitsKeyboardEvent): void;
@@ -363,7 +364,7 @@ type MenuItemCombinedProps = MenuItemSharedStateProps & MenuItemStateProps;
 export declare function useMenuRoot(props: MenuRootStateProps): MenuRootState;
 export declare function useMenuMenu(root: MenuRootState, props: MenuMenuStateProps): MenuMenuState;
 export declare function useMenuSubmenu(props: MenuMenuStateProps): MenuMenuState;
-export declare function useMenuSubTrigger(props: MenuItemSharedStateProps): MenuSubTriggerState;
+export declare function useMenuSubTrigger(props: MenuItemSharedStateProps & Pick<MenuItemStateProps, "onSelect">): MenuSubTriggerState;
 export declare function useMenuDropdownTrigger(props: DropdownMenuTriggerStateProps): DropdownMenuTriggerState;
 export declare function useMenuContextTrigger(props: ContextMenuTriggerStateProps): ContextMenuTriggerState;
 export declare function useMenuContent(props: MenuContentStateProps): MenuContentState;

package/dist/bits/menu/menu.svelte.js

@@ -434,11 +434,13 @@ class MenuItemState {
     }));
 }
 class MenuSubTriggerState {
+    opts;
     item;
     content;
     submenu;
     #openTimer = null;
-    constructor(item, content, submenu) {
+    constructor(opts, item, content, submenu) {
+        this.opts = opts;
         this.item = item;
         this.content = content;
         this.submenu = submenu;
@@ -485,13 +487,7 @@ class MenuSubTriggerState {
         if (this.item.opts.disabled.current || (isTypingAhead && e.key === kbd.SPACE))
             return;
         if (SUB_OPEN_KEYS[this.submenu.root.opts.dir.current].includes(e.key)) {
-            this.submenu.onOpen();
-            afterTick(() => {
-                const contentNode = this.submenu.contentNode;
-                if (!contentNode)
-                    return;
-                MenuOpenEvent.dispatch(contentNode);
-            });
+            e.currentTarget.click();
             e.preventDefault();
         }
     }
@@ -506,8 +502,19 @@ class MenuSubTriggerState {
         if (!isHTMLElement(e.currentTarget))
             return;
         e.currentTarget.focus();
+        const selectEvent = new CustomEvent("menusubtriggerselect", {
+            bubbles: true,
+            cancelable: true,
+        });
+        this.opts.onSelect.current(selectEvent);
         if (!this.submenu.opts.open.current) {
             this.submenu.onOpen();
+            afterTick(() => {
+                const contentNode = this.submenu.contentNode;
+                if (!contentNode)
+                    return;
+                MenuOpenEvent.dispatch(contentNode);
+            });
         }
     }
     props = $derived.by(() => mergeProps({
@@ -832,7 +839,7 @@ export function useMenuSubTrigger(props) {
     const content = MenuContentContext.get();
     const item = new MenuItemSharedState(props, content);
     const submenu = MenuMenuContext.get();
-    return new MenuSubTriggerState(item, content, submenu);
+    return new MenuSubTriggerState(props, item, content, submenu);
 }
 export function useMenuDropdownTrigger(props) {
     return new DropdownMenuTriggerState(props, MenuMenuContext.get());

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

@@ -124,8 +124,8 @@ export type MenuSubContentPropsWithoutHTML = Expand<WithChildNoChildrenSnippetPr
 export type MenuSubContentProps = MenuSubContentPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, MenuSubContentPropsWithoutHTML>;
 export type MenuSubContentStaticPropsWithoutHTML = Expand<WithChildNoChildrenSnippetProps<Omit<PopperLayerStaticProps, "content" | "preventScroll"> & _SharedMenuContentProps, StaticContentSnippetProps>>;
 export type MenuSubContentStaticProps = MenuSubContentStaticPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, MenuSubContentStaticPropsWithoutHTML>;
-export type MenuSubTriggerPropsWithoutHTML = MenuItemPropsWithoutHTML;
-export type MenuSubTriggerProps = MenuItemProps;
+export type MenuSubTriggerPropsWithoutHTML = Omit<MenuItemPropsWithoutHTML, "closeOnSelect">;
+export type MenuSubTriggerProps = Omit<MenuItemProps, "closeOnSelect">;
 export type MenuSeparatorPropsWithoutHTML = WithChild;
 export type MenuSeparatorProps = MenuSeparatorPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, MenuSeparatorPropsWithoutHTML>;
 export type MenuArrowPropsWithoutHTML = ArrowPropsWithoutHTML;

package/dist/bits/scroll-area/scroll-area.svelte.js

@@ -251,7 +251,10 @@ class ScrollAreaScrollbarVisibleState {
     });
     thumbRatio = $derived.by(() => getThumbRatio(this.sizes.viewport, this.sizes.content));
     hasThumb = $derived.by(() => Boolean(this.thumbRatio > 0 && this.thumbRatio < 1));
-    prevTransformStyle = "";
+    // this needs to be a $state to properly restore the transform style when the scrollbar
+    // goes from a hidden to visible state, otherwise it will start at the beginning of the
+    // scrollbar and flicker to the correct position after
+    prevTransformStyle = $state("");
     constructor(scrollbar) {
         this.scrollbar = scrollbar;
         this.root = scrollbar.root;
@@ -292,6 +295,7 @@ class ScrollAreaScrollbarVisibleState {
         });
         const transformStyle = `translate3d(${offset}px, 0, 0)`;
         this.thumbNode.style.transform = transformStyle;
+        this.prevTransformStyle = transformStyle;
     }
     xOnWheelScroll(scrollPos) {
         if (!this.root.viewportNode)
@@ -310,6 +314,7 @@ class ScrollAreaScrollbarVisibleState {
         const offset = getThumbOffsetFromScroll({ scrollPos, sizes: this.sizes });
         const transformStyle = `translate3d(0, ${offset}px, 0)`;
         this.thumbNode.style.transform = transformStyle;
+        this.prevTransformStyle = transformStyle;
     }
     yOnWheelScroll(scrollPos) {
         if (!this.root.viewportNode)
@@ -533,12 +538,12 @@ class ScrollAreaScrollbarSharedState {
             });
             return unsubListener;
         });
-        $effect(() => {
+        $effect.pre(() => {
             // react to changes to this:
             this.scrollbarVis.sizes;
             untrack(() => this.handleThumbPositionChange());
         });
-        $effect(() => {
+        $effect.pre(() => {
             this.handleThumbPositionChange();
         });
         useResizeObserver(() => this.scrollbar.opts.ref.current, this.handleResize);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bits-ui",
-  "version": "1.4.7",
+  "version": "1.5.0",
   "license": "MIT",
   "repository": "github:huntabyte/bits-ui",
   "funding": "https://github.com/sponsors/huntabyte",