bits-ui 1.7.0 → 2.1.0

package/dist/bits/range-calendar/range-calendar.svelte.js

@@ -1,5 +1,5 @@
 import { getLocalTimeZone, isSameDay, isSameMonth, isToday, } from "@internationalized/date";
-import { useRefById } from "svelte-toolbelt";
+import { attachRef } from "svelte-toolbelt";
 import { Context, watch } from "runed";
 import { CalendarRootContext } from "../calendar/calendar.svelte.js";
 import { useId } from "../../internal/use-id.js";
@@ -21,7 +21,6 @@ export class RangeCalendarRootState {
         this.opts = opts;
         this.announcer = getAnnouncer();
         this.formatter = createFormatter(this.opts.locale.current);
-        useRefById(opts);
         this.months = createMonths({
             dateObj: this.opts.placeholder.current,
             weekStartsOn: this.opts.weekStartsOn.current,
@@ -416,6 +415,7 @@ export class RangeCalendarRootState {
         [this.getBitsAttr("root")]: "",
         //
         onkeydown: this.onkeydown,
+        ...attachRef(this.opts.ref),
     }));
 }
 export class RangeCalendarCellState {
@@ -443,7 +443,6 @@ export class RangeCalendarCellState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useRefById(opts);
     }
     snippetProps = $derived.by(() => ({
         disabled: this.isDisabled,
@@ -477,6 +476,7 @@ export class RangeCalendarCellState {
         "aria-disabled": getAriaDisabled(this.ariaDisabled),
         ...this.sharedDataAttrs,
         [this.root.getBitsAttr("cell")]: "",
+        ...attachRef(this.opts.ref),
     }));
 }
 class RangeCalendarDayState {
@@ -485,7 +485,6 @@ class RangeCalendarDayState {
     constructor(opts, cell) {
         this.opts = opts;
         this.cell = cell;
-        useRefById(opts);
         this.onclick = this.onclick.bind(this);
         this.onmouseenter = this.onmouseenter.bind(this);
         this.onfocusin = this.onfocusin.bind(this);
@@ -531,6 +530,7 @@ class RangeCalendarDayState {
         onclick: this.onclick,
         onmouseenter: this.onmouseenter,
         onfocusin: this.onfocusin,
+        ...attachRef(this.opts.ref),
     }));
 }
 const RangeCalendarCellContext = new Context("RangeCalendar.Cell");

package/dist/bits/scroll-area/components/scroll-area-corner.svelte

@@ -2,9 +2,15 @@
 	import type { ScrollAreaCornerProps } from "../types.js";
 	import { ScrollAreaRootContext } from "../scroll-area.svelte.js";
 	import ScrollAreaCornerImpl from "./scroll-area-corner-impl.svelte";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 
-	let { ref = $bindable(null), id = useId(), ...restProps }: ScrollAreaCornerProps = $props();
+	const uid = $props.id();
+
+	let {
+		ref = $bindable(null),
+		id = createId(uid),
+		...restProps
+	}: ScrollAreaCornerProps = $props();
 
 	const scrollAreaState = ScrollAreaRootContext.get();
 

package/dist/bits/scroll-area/components/scroll-area-scrollbar-auto.svelte

@@ -11,7 +11,10 @@
 	const mergedProps = $derived(mergeProps(restProps, scrollbarAutoState.props));
 </script>
 
-<PresenceLayer present={forceMount || scrollbarAutoState.isVisible} {...mergedProps}>
+<PresenceLayer
+	present={forceMount || scrollbarAutoState.isVisible}
+	ref={scrollbarAutoState.scrollbar.opts.ref}
+>
 	{#snippet presence()}
 		<ScrollAreaScrollbarVisible {...mergedProps} />
 	{/snippet}

package/dist/bits/scroll-area/components/scroll-area-scrollbar-hover.svelte

@@ -23,7 +23,7 @@
 	);
 </script>
 
-<PresenceLayer {...mergedProps} {present}>
+<PresenceLayer {present} ref={scrollbarAutoState.scrollbar.opts.ref}>
 	{#snippet presence()}
 		<ScrollAreaScrollbarVisible {...mergedProps} />
 	{/snippet}

package/dist/bits/scroll-area/components/scroll-area-scrollbar-scroll.svelte

@@ -12,7 +12,11 @@
 	const mergedProps = $derived(mergeProps(restProps, scrollbarScrollState.props));
 </script>
 
-<PresenceLayer {...mergedProps} present={forceMount || !scrollbarScrollState.isHidden}>
+<PresenceLayer
+	{...mergedProps}
+	present={forceMount || !scrollbarScrollState.isHidden}
+	ref={scrollbarScrollState.scrollbar.opts.ref}
+>
 	{#snippet presence()}
 		<ScrollAreaScrollbarVisible {...mergedProps} />
 	{/snippet}

package/dist/bits/scroll-area/components/scroll-area-scrollbar.svelte

@@ -6,11 +6,13 @@
 	import ScrollAreaScrollbarScroll from "./scroll-area-scrollbar-scroll.svelte";
 	import ScrollAreaScrollbarHover from "./scroll-area-scrollbar-hover.svelte";
 	import ScrollAreaScrollbarVisible from "./scroll-area-scrollbar-visible.svelte";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
 		ref = $bindable(null),
-		id = useId(),
+		id = createId(uid),
 		orientation,
 		...restProps
 	}: ScrollAreaScrollbarProps = $props();

package/dist/bits/scroll-area/components/scroll-area-thumb.svelte

@@ -2,11 +2,13 @@
 	import type { ScrollAreaThumbProps } from "../types.js";
 	import { ScrollAreaScrollbarVisibleContext } from "../scroll-area.svelte.js";
 	import ScrollAreaThumbImpl from "./scroll-area-thumb-impl.svelte";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import PresenceLayer from "../../utilities/presence-layer/presence-layer.svelte";
 
+	const uid = $props.id();
+
 	let {
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		forceMount = false,
 		...restProps
@@ -15,7 +17,10 @@
 	const scrollbarState = ScrollAreaScrollbarVisibleContext.get();
 </script>
 
-<PresenceLayer present={forceMount || scrollbarState.hasThumb} {...restProps} {id}>
+<PresenceLayer
+	present={forceMount || scrollbarState.hasThumb}
+	ref={scrollbarState.scrollbar.opts.ref}
+>
 	{#snippet presence({ present })}
 		<ScrollAreaThumbImpl {...restProps} {id} bind:ref present={present.current} />
 	{/snippet}

package/dist/bits/scroll-area/components/scroll-area-viewport.svelte

@@ -2,11 +2,13 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { ScrollAreaViewportProps } from "../types.js";
 	import { useScrollAreaViewport } from "../scroll-area.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
 		ref = $bindable(null),
-		id = useId(),
+		id = createId(uid),
 		children,
 		...restProps
 	}: ScrollAreaViewportProps = $props();

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

@@ -2,11 +2,13 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { ScrollAreaRootProps } from "../types.js";
 	import { useScrollAreaRoot } from "../scroll-area.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
 		ref = $bindable(null),
-		id = useId(),
+		id = createId(uid),
 		type = "hover",
 		dir = "ltr",
 		scrollHideDelay = 600,

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

@@ -6,7 +6,7 @@
  */
 import { Context, useDebounce } from "runed";
 import { untrack } from "svelte";
-import { box, executeCallbacks, useRefById } from "svelte-toolbelt";
+import { box, executeCallbacks, attachRef } from "svelte-toolbelt";
 import { addEventListener } from "../../internal/events.js";
 import { mergeProps, useId } from "../../shared/index.js";
 import { useStateMachine } from "../../internal/use-state-machine.svelte.js";
@@ -31,12 +31,6 @@ class ScrollAreaRootState {
     scrollbarYEnabled = $state(false);
     constructor(opts) {
         this.opts = opts;
-        useRefById({
-            ...opts,
-            onRefChange: (node) => {
-                this.scrollAreaNode = node;
-            },
-        });
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
@@ -47,6 +41,7 @@ class ScrollAreaRootState {
             "--bits-scroll-area-corner-width": `${this.cornerWidth}px`,
         },
         [SCROLL_AREA_ROOT_ATTR]: "",
+        ...attachRef(this.opts.ref, (v) => (this.scrollAreaNode = v)),
     }));
 }
 class ScrollAreaViewportState {
@@ -57,19 +52,6 @@ class ScrollAreaViewportState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useRefById({
-            ...opts,
-            onRefChange: (node) => {
-                this.root.viewportNode = node;
-            },
-        });
-        useRefById({
-            id: this.#contentId,
-            ref: this.#contentRef,
-            onRefChange: (node) => {
-                this.root.contentNode = node;
-            },
-        });
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
@@ -78,6 +60,7 @@ class ScrollAreaViewportState {
             overflowY: this.root.scrollbarYEnabled ? "scroll" : "hidden",
         },
         [SCROLL_AREA_VIEWPORT_ATTR]: "",
+        ...attachRef(this.opts.ref, (v) => (this.root.viewportNode = v)),
     }));
     contentProps = $derived.by(() => ({
         id: this.#contentId.current,
@@ -90,6 +73,7 @@ class ScrollAreaViewportState {
          * be constrained by the parent container to enable `text-overflow: ellipsis`
          */
         style: { minWidth: this.root.scrollbarXEnabled ? "fit-content" : undefined },
+        ...attachRef(this.#contentRef, (v) => (this.root.contentNode = v)),
     }));
 }
 class ScrollAreaScrollbarState {
@@ -261,7 +245,7 @@ class ScrollAreaScrollbarVisibleState {
         $effect(() => {
             this.scrollbar.hasThumb = this.hasThumb;
         });
-        $effect.pre(() => {
+        $effect(() => {
             if (!this.scrollbar.hasThumb && this.thumbNode) {
                 this.prevTransformStyle = this.thumbNode.style.transform;
             }
@@ -338,13 +322,6 @@ class ScrollAreaScrollbarXState {
         this.scrollbarVis = scrollbarVis;
         this.root = scrollbarVis.root;
         this.scrollbar = scrollbarVis.scrollbar;
-        useRefById({
-            ...this.scrollbar.opts,
-            onRefChange: (node) => {
-                this.root.scrollbarXNode = node;
-            },
-            deps: () => this.opts.mounted.current,
-        });
         $effect(() => {
             if (!this.scrollbar.opts.ref.current)
                 return;
@@ -409,6 +386,7 @@ class ScrollAreaScrollbarXState {
                 : 0,
             "--bits-scroll-area-thumb-width": `${this.thumbSize}px`,
         },
+        ...attachRef(this.scrollbar.opts.ref, (v) => (this.root.scrollbarXNode = v)),
     }));
 }
 class ScrollAreaScrollbarYState {
@@ -422,13 +400,6 @@ class ScrollAreaScrollbarYState {
         this.scrollbarVis = scrollbarVis;
         this.root = scrollbarVis.root;
         this.scrollbar = scrollbarVis.scrollbar;
-        useRefById({
-            ...this.scrollbar.opts,
-            onRefChange: (node) => {
-                this.root.scrollbarYNode = node;
-            },
-            deps: () => this.opts.mounted.current,
-        });
         $effect(() => {
             if (!this.scrollbar.opts.ref.current)
                 return;
@@ -496,6 +467,7 @@ class ScrollAreaScrollbarYState {
             bottom: "var(--bits-scroll-area-corner-height)",
             "--bits-scroll-area-thumb-height": `${this.thumbSize}px`,
         },
+        ...attachRef(this.scrollbar.opts.ref, (v) => (this.root.scrollbarYNode = v)),
     }));
 }
 class ScrollAreaScrollbarSharedState {
@@ -542,9 +514,9 @@ class ScrollAreaScrollbarSharedState {
             this.scrollbarVis.sizes;
             untrack(() => this.handleThumbPositionChange());
         });
-        $effect.pre(() => {
-            this.handleThumbPositionChange();
-        });
+        // $effect.pre(() => {
+        // 	this.handleThumbPositionChange();
+        // });
         useResizeObserver(() => this.scrollbar.opts.ref.current, this.handleResize);
         useResizeObserver(() => this.root.contentNode, this.handleResize);
         this.onpointerdown = this.onpointerdown.bind(this);
@@ -612,13 +584,6 @@ class ScrollAreaThumbImplState {
         this.opts = opts;
         this.scrollbarState = scrollbarState;
         this.#root = scrollbarState.root;
-        useRefById({
-            ...opts,
-            onRefChange: (node) => {
-                this.scrollbarState.scrollbarVis.thumbNode = node;
-            },
-            deps: () => this.opts.mounted.current,
-        });
         $effect(() => {
             const viewportNode = this.#root.viewportNode;
             if (!viewportNode)
@@ -631,7 +596,7 @@ class ScrollAreaThumbImplState {
                     this.scrollbarState.handleThumbPositionChange();
                 }
             };
-            this.scrollbarState.handleThumbPositionChange();
+            untrack(() => this.scrollbarState.handleThumbPositionChange());
             const unsubListener = addEventListener(viewportNode, "scroll", handleScroll);
             return unsubListener;
         });
@@ -661,6 +626,7 @@ class ScrollAreaThumbImplState {
         onpointerdowncapture: this.onpointerdowncapture,
         onpointerup: this.onpointerup,
         [SCROLL_AREA_THUMB_ATTR]: "",
+        ...attachRef(this.opts.ref, (v) => (this.scrollbarState.scrollbarVis.thumbNode = v)),
     }));
 }
 class ScrollAreaCornerImplState {
@@ -682,7 +648,6 @@ class ScrollAreaCornerImplState {
             this.root.cornerWidth = width;
             this.#width = width;
         });
-        useRefById(opts);
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
@@ -695,6 +660,7 @@ class ScrollAreaCornerImplState {
             bottom: 0,
         },
         [SCROLL_AREA_CORNER_ATTR]: "",
+        ...attachRef(this.opts.ref),
     }));
 }
 export const ScrollAreaRootContext = new Context("ScrollArea.Root");

package/dist/bits/select/components/select-content-static.svelte

@@ -3,12 +3,14 @@
 	import type { SelectContentStaticProps } from "../types.js";
 	import { useSelectContent } from "../select.svelte.js";
 	import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import { noop } from "../../../internal/noop.js";
 	import PopperLayerForceMount from "../../utilities/popper-layer/popper-layer-force-mount.svelte";
 
+	const uid = $props.id();
+
 	let {
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		forceMount = false,
 		onInteractOutside = noop,
@@ -36,6 +38,7 @@
 	<PopperLayerForceMount
 		{...mergedProps}
 		{...contentState.popperProps}
+		ref={contentState.opts.ref}
 		isStatic
 		enabled={contentState.root.opts.open.current}
 		{id}
@@ -57,6 +60,7 @@
 	<PopperLayer
 		{...mergedProps}
 		{...contentState.popperProps}
+		ref={contentState.opts.ref}
 		isStatic
 		present={contentState.root.opts.open.current}
 		{id}

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

@@ -3,12 +3,14 @@
 	import type { SelectContentProps } from "../types.js";
 	import { useSelectContent } from "../select.svelte.js";
 	import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";
-	import { useId } from "../../../internal/use-id.js";
 	import { noop } from "../../../internal/noop.js";
 	import PopperLayerForceMount from "../../utilities/popper-layer/popper-layer-force-mount.svelte";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		forceMount = false,
 		side = "bottom",
@@ -37,6 +39,7 @@
 	<PopperLayerForceMount
 		{...mergedProps}
 		{...contentState.popperProps}
+		ref={contentState.opts.ref}
 		{side}
 		enabled={contentState.root.opts.open.current}
 		{id}
@@ -60,6 +63,7 @@
 	<PopperLayer
 		{...mergedProps}
 		{...contentState.popperProps}
+		ref={contentState.opts.ref}
 		{side}
 		present={contentState.root.opts.open.current}
 		{id}

package/dist/bits/select/components/select-group-heading.svelte

@@ -2,10 +2,11 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { SelectGroupHeadingProps } from "../types.js";
 	import { useSelectGroupHeading } from "../select.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 
+	const uid = $props.id();
 	let {
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		child,
 		children,

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

@@ -2,10 +2,12 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import { useSelectGroup } from "../select.svelte.js";
 	import type { SelectGroupProps } from "../types.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		children,
 		child,

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

@@ -2,12 +2,14 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import { useSelectItem } from "../select.svelte.js";
 	import type { SelectItemProps } from "../types.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import { noop } from "../../../internal/noop.js";
 	import Mounted from "../../utilities/mounted.svelte";
 
+	const uid = $props.id();
+
 	let {
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		value,
 		label = value,

package/dist/bits/select/components/select-scroll-down-button.svelte

@@ -2,11 +2,13 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { SelectScrollDownButtonProps } from "../types.js";
 	import { useSelectScrollDownButton } from "../select.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import { Mounted } from "../../utilities/index.js";
 
+	const uid = $props.id();
+
 	let {
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		delay = () => 50,
 		child,

package/dist/bits/select/components/select-scroll-up-button.svelte

@@ -2,11 +2,13 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { SelectScrollUpButtonProps } from "../types.js";
 	import { useSelectScrollUpButton } from "../select.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import { Mounted } from "../../utilities/index.js";
 
+	const uid = $props.id();
+
 	let {
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		delay = () => 50,
 		child,

package/dist/bits/select/components/select-trigger.svelte

@@ -2,11 +2,13 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import { useSelectTrigger } from "../select.svelte.js";
 	import type { SelectTriggerProps } from "../types.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import { FloatingLayer } from "../../utilities/floating-layer/index.js";
 
+	const uid = $props.id();
+
 	let {
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		child,
 		children,
@@ -25,7 +27,7 @@
 	const mergedProps = $derived(mergeProps(restProps, triggerState.props, { type }));
 </script>
 
-<FloatingLayer.Anchor {id}>
+<FloatingLayer.Anchor {id} ref={triggerState.opts.ref}>
 	{#if child}
 		{@render child({ props: mergedProps })}
 	{:else}

package/dist/bits/select/components/select-viewport.svelte

@@ -2,10 +2,12 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { SelectViewportProps } from "../types.js";
 	import { useSelectViewport } from "../select.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		children,
 		child,

package/dist/bits/select/components/select.svelte

@@ -72,7 +72,7 @@
 
 {#if Array.isArray(rootState.opts.value.current)}
 	{#if rootState.opts.value.current.length}
-		{#each rootState.opts.value.current as item}
+		{#each rootState.opts.value.current as item (item)}
 			<SelectHiddenInput value={item} />
 		{/each}
 	{/if}

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

@@ -88,7 +88,6 @@ declare class SelectInputState {
     onkeydown(e: BitsKeyboardEvent): void;
     oninput(e: BitsEvent<Event, HTMLInputElement>): void;
     props: {
-        readonly [x: string]: string | true | ((e: BitsKeyboardEvent) => void) | ((e: BitsEvent<Event, HTMLInputElement>) => void) | undefined;
         readonly id: string;
         readonly role: "combobox";
         readonly disabled: true | undefined;
@@ -113,7 +112,6 @@ declare class SelectComboTriggerState {
      */
     onpointerdown(e: BitsPointerEvent): void;
     props: {
-        readonly [x: string]: string | true | ((e: BitsKeyboardEvent) => void) | ((e: BitsPointerEvent) => void) | undefined;
         readonly id: string;
         readonly disabled: true | undefined;
         readonly "aria-haspopup": "listbox";
@@ -134,7 +132,6 @@ declare class SelectTriggerState {
     onpointerdown(e: BitsPointerEvent): void;
     onpointerup(e: BitsPointerEvent): void;
     props: {
-        readonly [x: string]: string | true | ((e: BitsKeyboardEvent) => void) | ((e: BitsPointerEvent) => void) | undefined;
         readonly id: string;
         readonly disabled: true | undefined;
         readonly "aria-haspopup": "listbox";
@@ -169,13 +166,6 @@ declare class SelectContentState {
         open: boolean;
     };
     props: {
-        readonly [x: string]: string | ((_: BitsPointerEvent) => void) | {
-            readonly display: "flex";
-            readonly flexDirection: "column";
-            readonly outline: "none";
-            readonly boxSizing: "border-box";
-            readonly pointerEvents: "auto";
-        } | undefined;
         readonly id: string;
         readonly role: "listbox";
         readonly "aria-multiselectable": "true" | undefined;
@@ -228,7 +218,6 @@ declare class SelectItemState {
     onpointerup(e: BitsPointerEvent): void;
     onpointermove(e: BitsPointerEvent): void;
     props: {
-        readonly [x: string]: string | ((e: BitsPointerEvent) => void) | undefined;
         readonly id: string;
         readonly role: "option";
         readonly "aria-selected": "true" | undefined;
@@ -249,7 +238,6 @@ declare class SelectGroupState {
     labelNode: HTMLElement | null;
     constructor(opts: SelectGroupStateProps, root: SelectBaseRootState);
     props: {
-        readonly [x: string]: string | undefined;
         readonly id: string;
         readonly role: "group";
         readonly "aria-labelledby": string | undefined;
@@ -261,7 +249,6 @@ declare class SelectGroupHeadingState {
     readonly group: SelectGroupState;
     constructor(opts: SelectGroupHeadingStateProps, group: SelectGroupState);
     props: {
-        readonly [x: string]: string;
         readonly id: string;
     };
 }
@@ -290,11 +277,6 @@ declare class SelectViewportState {
     prevScrollTop: number;
     constructor(opts: SelectViewportStateProps, content: SelectContentState);
     props: {
-        readonly [x: string]: string | {
-            readonly position: "relative";
-            readonly flex: 1;
-            readonly overflow: "auto";
-        };
         readonly id: string;
         readonly role: "presentation";
         readonly style: {