bits-ui 1.8.0 → 2.1.0

package/dist/bits/time-range-field/time-range-field.svelte.js

@@ -0,0 +1,210 @@
+import { box, onDestroyEffect, attachRef } from "svelte-toolbelt";
+import { Context, watch } from "runed";
+import { TimeFieldInputState, useTimeFieldRoot } from "../time-field/time-field.svelte.js";
+import { useId } from "../../internal/use-id.js";
+import { getDataDisabled, getDataInvalid } from "../../internal/attrs.js";
+import { createTimeFormatter } from "../../internal/date-time/formatter.js";
+import { removeDescriptionElement } from "../../internal/date-time/field/helpers.js";
+import { getFirstSegment } from "../../internal/date-time/field/segments.js";
+import { convertTimeValueToTime, isTimeBefore, } from "../../internal/date-time/field/time-helpers.js";
+export const TIME_RANGE_FIELD_ROOT_ATTR = "data-time-range-field-root";
+const TIME_RANGE_FIELD_LABEL_ATTR = "data-time-range-field-label";
+export class TimeRangeFieldRootState {
+    opts;
+    startFieldState = undefined;
+    endFieldState = undefined;
+    descriptionId = useId();
+    formatter;
+    fieldNode = $state(null);
+    labelNode = $state(null);
+    descriptionNode = $state(null);
+    startValueComplete = $derived.by(() => this.opts.startValue.current !== undefined);
+    endValueComplete = $derived.by(() => this.opts.endValue.current !== undefined);
+    rangeComplete = $derived(this.startValueComplete && this.endValueComplete);
+    startValueTime = $derived.by(() => {
+        if (!this.opts.startValue.current)
+            return undefined;
+        return convertTimeValueToTime(this.opts.startValue.current);
+    });
+    endValueTime = $derived.by(() => {
+        if (!this.opts.endValue.current)
+            return undefined;
+        return convertTimeValueToTime(this.opts.endValue.current);
+    });
+    minValueTime = $derived.by(() => {
+        if (!this.opts.minValue.current)
+            return undefined;
+        return convertTimeValueToTime(this.opts.minValue.current);
+    });
+    maxValueTime = $derived.by(() => {
+        if (!this.opts.maxValue.current)
+            return undefined;
+        return convertTimeValueToTime(this.opts.maxValue.current);
+    });
+    constructor(opts) {
+        this.opts = opts;
+        this.formatter = createTimeFormatter(this.opts.locale.current);
+        onDestroyEffect(() => {
+            removeDescriptionElement(this.descriptionId);
+        });
+        $effect(() => {
+            if (this.formatter.getLocale() === this.opts.locale.current)
+                return;
+            this.formatter.setLocale(this.opts.locale.current);
+        });
+        /**
+         * Synchronize the start and end values with the `value` in case
+         * it is updated externally.
+         */
+        watch(() => this.opts.value.current, (value) => {
+            if (value.start && value.end) {
+                this.opts.startValue.current = value.start;
+                this.opts.endValue.current = value.end;
+            }
+            else if (value.start) {
+                this.opts.startValue.current = value.start;
+                this.opts.endValue.current = undefined;
+            }
+            else if (value.start === undefined && value.end === undefined) {
+                this.opts.startValue.current = undefined;
+                this.opts.endValue.current = undefined;
+            }
+        });
+        /**
+         * Synchronize the placeholder value with the current start value
+         */
+        watch(() => this.opts.value.current, (value) => {
+            const startValue = value.start;
+            if (startValue && this.opts.placeholder.current !== startValue) {
+                this.opts.placeholder.current = startValue;
+            }
+        });
+        watch([() => this.opts.startValue.current, () => this.opts.endValue.current], ([startValue, endValue]) => {
+            if (this.opts.value.current &&
+                this.opts.value.current.start === startValue &&
+                this.opts.value.current.end === endValue) {
+                return;
+            }
+            if (startValue && endValue) {
+                this.#updateValue((prev) => {
+                    if (prev.start === startValue && prev.end === endValue) {
+                        return prev;
+                    }
+                    return {
+                        start: startValue,
+                        end: endValue,
+                    };
+                });
+            }
+            else if (this.opts.value.current &&
+                this.opts.value.current.start &&
+                this.opts.value.current.end) {
+                this.opts.value.current.start = undefined;
+                this.opts.value.current.end = undefined;
+            }
+        });
+    }
+    validationStatus = $derived.by(() => {
+        const value = this.opts.value.current;
+        if (value === undefined)
+            return false;
+        if (value.start === undefined || value.end === undefined)
+            return false;
+        const msg = this.opts.validate.current?.({
+            start: value.start,
+            end: value.end,
+        });
+        if (msg) {
+            return {
+                reason: "custom",
+                message: msg,
+            };
+        }
+        if (this.minValueTime &&
+            this.startValueTime &&
+            isTimeBefore(this.startValueTime, this.minValueTime)) {
+            return {
+                reason: "min",
+            };
+        }
+        if (this.maxValueTime &&
+            this.endValueTime &&
+            isTimeBefore(this.maxValueTime, this.endValueTime)) {
+            return {
+                reason: "max",
+            };
+        }
+        return false;
+    });
+    isInvalid = $derived.by(() => {
+        if (this.validationStatus === false)
+            return false;
+        return true;
+    });
+    #updateValue(cb) {
+        const value = this.opts.value.current;
+        const newValue = cb(value);
+        this.opts.value.current = newValue;
+    }
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        role: "group",
+        [TIME_RANGE_FIELD_ROOT_ATTR]: "",
+        "data-invalid": getDataInvalid(this.isInvalid),
+        ...attachRef(this.opts.ref, (v) => (this.fieldNode = v)),
+    }));
+}
+class TimeRangeFieldLabelState {
+    opts;
+    root;
+    constructor(opts, root) {
+        this.opts = opts;
+        this.root = root;
+    }
+    #onclick = () => {
+        if (this.root.opts.disabled.current)
+            return;
+        const firstSegment = getFirstSegment(this.root.fieldNode);
+        if (!firstSegment)
+            return;
+        firstSegment.focus();
+    };
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        // TODO: invalid state for field
+        "data-invalid": getDataInvalid(this.root.isInvalid),
+        "data-disabled": getDataDisabled(this.root.opts.disabled.current),
+        [TIME_RANGE_FIELD_LABEL_ATTR]: "",
+        onclick: this.#onclick,
+        ...attachRef(this.opts.ref, (v) => (this.root.labelNode = v)),
+    }));
+}
+export const TimeRangeFieldRootContext = new Context("TimeRangeField.Root");
+export function useTimeRangeFieldRoot(props) {
+    return TimeRangeFieldRootContext.set(new TimeRangeFieldRootState(props));
+}
+export function useTimeRangeFieldLabel(props) {
+    return new TimeRangeFieldLabelState(props, TimeRangeFieldRootContext.get());
+}
+export function useTimeRangeFieldInput(props, type) {
+    const root = TimeRangeFieldRootContext.get();
+    const fieldState = useTimeFieldRoot({
+        value: type === "start" ? root.opts.startValue : root.opts.endValue,
+        disabled: root.opts.disabled,
+        readonly: root.opts.readonly,
+        readonlySegments: root.opts.readonlySegments,
+        validate: box.with(() => undefined),
+        minValue: root.opts.minValue,
+        maxValue: root.opts.maxValue,
+        hourCycle: root.opts.hourCycle,
+        locale: root.opts.locale,
+        hideTimeZone: root.opts.hideTimeZone,
+        required: root.opts.required,
+        granularity: root.opts.granularity,
+        placeholder: root.opts.placeholder,
+        onInvalid: root.opts.onInvalid,
+        errorMessageId: root.opts.errorMessageId,
+        isInvalidProp: box.with(() => root.isInvalid),
+    }, root);
+    return new TimeFieldInputState({ name: props.name, id: props.id, ref: props.ref }, fieldState);
+}

package/dist/bits/time-range-field/types.d.ts

@@ -0,0 +1,150 @@
+import type { Time } from "@internationalized/date";
+import type { OnChangeFn, WithChild, Without } from "../../internal/types.js";
+import type { BitsPrimitiveDivAttributes, BitsPrimitiveSpanAttributes } from "../../shared/attributes.js";
+import type { TimeSegmentPart } from "../../shared/index.js";
+import type { TimeFieldSegmentProps, TimeFieldSegmentPropsWithoutHTML } from "../time-field/types.js";
+import type { EditableTimeSegmentPart, TimeGranularity, TimeOnInvalid, TimeRange, TimeRangeValidator, TimeValue } from "../../shared/date/types.js";
+export type TimeRangeFieldRootPropsWithoutHTML<T extends TimeValue = Time> = WithChild<{
+    /**
+     * The value of the date range field.
+     *
+     * @bindable
+     */
+    value?: TimeRange<T>;
+    /**
+     * A callback that is called when the value of the date range field changes.
+     */
+    onValueChange?: OnChangeFn<TimeRange<T> | undefined>;
+    /**
+     * The placeholder value of the time field. This determines the format
+     * and what date the field starts at when it is empty.
+     *
+     * @bindable
+     */
+    placeholder?: TimeValue;
+    /**
+     * A callback that is called when the time field's placeholder value changes.
+     */
+    onPlaceholderChange?: OnChangeFn<TimeValue | undefined>;
+    /**
+     * A function that returns a string or array of strings as validation errors if the date is
+     * invalid, or nothing if the date is valid
+     */
+    validate?: TimeRangeValidator<T>;
+    /**
+     * A callback fired when the time field's value is invalid. Use this to display an error
+     * message to the user.
+     */
+    onInvalid?: TimeOnInvalid;
+    /**
+     * The minimum acceptable date. When provided, the time field
+     * will be marked as invalid if the user enters a date before this date.
+     */
+    minValue?: TimeValue;
+    /**
+     * The maximum acceptable date. When provided, the time field
+     * will be marked as invalid if the user enters a date after this date.
+     */
+    maxValue?: TimeValue;
+    /**
+     * If true, the time field will be disabled and users will not be able
+     * to interact with it. This also disables the hidden input element if
+     * the time field is used in a form.
+     *
+     * @defaultValue false
+     */
+    disabled?: boolean;
+    /**
+     * If true, the time field will be readonly, and users will not be able to
+     * edit the values of any of the individual segments.
+     *
+     * @default false
+     */
+    readonly?: boolean;
+    /**
+     * If true, the time field will be required, which is useful when used within
+     * a form. If the time field is empty when the form is submitted, the form
+     * will not be valid.
+     *
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * An array of segment names that should be readonly. If provided, only the
+     * segments not in this array will be editable.
+     */
+    readonlySegments?: EditableTimeSegmentPart[];
+    /**
+     * The format to use for displaying the time in the input.
+     * If using a 12 hour clock, ensure you also include the `dayPeriod`
+     * segment in your input to ensure the user can select AM/PM.
+     *
+     * @default - the locale's default time format
+     */
+    hourCycle?: 12 | 24;
+    /**
+     * The locale to use for formatting the time field.
+     *
+     * @default 'en'
+     */
+    locale?: string;
+    /**
+     * The granularity of the time field. This determines which
+     * segments will be includes in the segments array used to
+     * build the time field.
+     *
+     * Granularity is only used for visual purposes, and does not impact
+     * the value of the time field. You can have the same value synced
+     * between multiple time fields with different granularities and they
+     * will all contain the same value.
+     *
+     * @default 'minute'
+     */
+    granularity?: TimeGranularity;
+    /**
+     * Whether or not to hide the timeZoneName segment from the time field.
+     *
+     * @defaultValue false;
+     */
+    hideTimeZone?: boolean;
+    /**
+     * A callback function called when the start value changes. This doesn't necessarily mean
+     * the `value` has updated and should be used to apply cosmetic changes to the field when
+     * only part of the value is changed/completed.
+     */
+    onStartValueChange?: OnChangeFn<T | undefined>;
+    /**
+     * A callback function called when the end value changes. This doesn't necessarily mean
+     * the `value` has updated and should be used to apply cosmetic changes to the field when
+     * only part of the value is changed/completed.
+     */
+    onEndValueChange?: OnChangeFn<T | undefined>;
+    /**
+     * The `id` of the element which contains the error messages for the time field when the
+     * time is invalid.
+     */
+    errorMessageId?: string;
+}>;
+export type TimeRangeFieldRootProps<T extends TimeValue = Time> = TimeRangeFieldRootPropsWithoutHTML<T> & Without<BitsPrimitiveDivAttributes, TimeRangeFieldRootPropsWithoutHTML<T>>;
+export type TimeRangeFieldLabelPropsWithoutHTML = WithChild;
+export type TimeRangeFieldLabelProps = TimeRangeFieldLabelPropsWithoutHTML & Without<BitsPrimitiveSpanAttributes, TimeRangeFieldLabelPropsWithoutHTML>;
+export type TimeRangeFieldInputSnippetProps = {
+    segments: Array<{
+        part: TimeSegmentPart;
+        value: string;
+    }>;
+};
+export type TimeRangeFieldInputPropsWithoutHTML = WithChild<{
+    /**
+     * The name to use for the hidden input element associated with this input
+     * used for form submission.
+     */
+    name?: string;
+    /**
+     * Whether this input represents the start or end of the date range.
+     */
+    type: "start" | "end";
+}, TimeRangeFieldInputSnippetProps>;
+export type TimeRangeFieldInputProps = TimeRangeFieldInputPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, TimeRangeFieldInputPropsWithoutHTML>;
+export type TimeRangeFieldSegmentPropsWithoutHTML = TimeFieldSegmentPropsWithoutHTML;
+export type TimeRangeFieldSegmentProps = TimeFieldSegmentProps;

package/dist/bits/time-range-field/types.js

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

package/dist/bits/toggle/components/toggle.svelte

@@ -2,12 +2,14 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { ToggleRootProps } from "../types.js";
 	import { useToggleRoot } from "../toggle.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import { noop } from "../../../internal/noop.js";
 
+	const uid = $props.id();
+
 	let {
 		ref = $bindable(null),
-		id = useId(),
+		id = createId(uid),
 		pressed = $bindable(false),
 		onPressedChange = noop,
 		disabled = false,

package/dist/bits/toggle/toggle.svelte.js

@@ -1,11 +1,10 @@
-import { useRefById } from "svelte-toolbelt";
+import { attachRef } from "svelte-toolbelt";
 import { getAriaPressed, getDataDisabled, getDisabled } from "../../internal/attrs.js";
 const TOGGLE_ROOT_ATTR = "data-toggle-root";
 class ToggleRootState {
     opts;
     constructor(opts) {
         this.opts = opts;
-        useRefById(opts);
         this.onclick = this.onclick.bind(this);
     }
     #togglePressed() {
@@ -29,6 +28,7 @@ class ToggleRootState {
         "data-state": getToggleDataState(this.opts.pressed.current),
         disabled: getDisabled(this.opts.disabled.current),
         onclick: this.onclick,
+        ...attachRef(this.opts.ref),
     }));
 }
 export function useToggleRoot(props) {

package/dist/bits/toggle-group/components/toggle-group-item.svelte

@@ -2,7 +2,9 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { ToggleGroupItemProps } from "../types.js";
 	import { useToggleGroupItem } from "../toggle-group.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
 		children,
@@ -10,7 +12,7 @@
 		ref = $bindable(null),
 		value,
 		disabled = false,
-		id = useId(),
+		id = createId(uid),
 		type = "button",
 		...restProps
 	}: ToggleGroupItemProps = $props();

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

@@ -3,12 +3,14 @@
 	import { mergeProps } from "svelte-toolbelt";
 	import type { ToggleGroupRootProps } from "../types.js";
 	import { useToggleGroupRoot } from "../toggle-group.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import { noop } from "../../../internal/noop.js";
 	import { watch } from "runed";
 
+	const uid = $props.id();
+
 	let {
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		value = $bindable(),
 		onValueChange = noop,

package/dist/bits/toggle-group/toggle-group.svelte.js

@@ -1,4 +1,4 @@
-import { useRefById } from "svelte-toolbelt";
+import { attachRef } from "svelte-toolbelt";
 import { Context } from "runed";
 import { getAriaChecked, getAriaPressed, getDataDisabled, getDataOrientation, getDisabled, } from "../../internal/attrs.js";
 import { kbd } from "../../internal/kbd.js";
@@ -12,11 +12,10 @@ class ToggleGroupBaseState {
         this.opts = opts;
         this.rovingFocusGroup = useRovingFocus({
             candidateAttr: TOGGLE_GROUP_ITEM_ATTR,
-            rootNodeId: opts.id,
+            rootNode: opts.ref,
             loop: opts.loop,
             orientation: opts.orientation,
         });
-        useRefById(opts);
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
@@ -24,6 +23,7 @@ class ToggleGroupBaseState {
         role: "group",
         "data-orientation": getDataOrientation(this.opts.orientation.current),
         "data-disabled": getDataDisabled(this.opts.disabled.current),
+        ...attachRef(this.opts.ref),
     }));
 }
 class ToggleGroupSingleState extends ToggleGroupBaseState {
@@ -75,7 +75,6 @@ class ToggleGroupItemState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useRefById(opts);
         $effect(() => {
             if (!this.root.opts.rovingFocus.current) {
                 this.#tabIndex = 0;
@@ -135,6 +134,7 @@ class ToggleGroupItemState {
         //
         onclick: this.onclick,
         onkeydown: this.onkeydown,
+        ...attachRef(this.opts.ref),
     }));
 }
 //

package/dist/bits/toolbar/components/toolbar-button.svelte

@@ -2,14 +2,16 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { ToolbarButtonProps } from "../types.js";
 	import { useToolbarButton } from "../toolbar.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
 		child,
 		children,
 		disabled = false,
 		type = "button",
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		...restProps
 	}: ToolbarButtonProps = $props();

package/dist/bits/toolbar/components/toolbar-group-item.svelte

@@ -2,7 +2,9 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { ToolbarGroupItemProps } from "../types.js";
 	import { useToolbarGroupItem } from "../toolbar.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
 		child,
@@ -10,7 +12,7 @@
 		value,
 		disabled = false,
 		type = "button",
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		...restProps
 	}: ToolbarGroupItemProps = $props();

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

@@ -3,12 +3,14 @@
 	import { mergeProps } from "svelte-toolbelt";
 	import type { ToolbarGroupProps } from "../types.js";
 	import { useToolbarGroup } from "../toolbar.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import { noop } from "../../../internal/noop.js";
 	import { watch } from "runed";
 
+	const uid = $props.id();
+
 	let {
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		value = $bindable(),
 		onValueChange = noop,

package/dist/bits/toolbar/components/toolbar-link.svelte

@@ -2,14 +2,16 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import { useToolbarLink } from "../toolbar.svelte.js";
 	import type { ToolbarLinkProps } from "../types.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
 		children,
 		href,
 		child,
 		ref = $bindable(null),
-		id = useId(),
+		id = createId(uid),
 		...restProps
 	}: ToolbarLinkProps = $props();
 

package/dist/bits/toolbar/components/toolbar.svelte

@@ -2,11 +2,13 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { ToolbarRootProps } from "../types.js";
 	import { useToolbarRoot } from "../toolbar.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),
 		orientation = "horizontal",
 		loop = true,
 		child,

package/dist/bits/toolbar/toolbar.svelte.js

@@ -1,4 +1,4 @@
-import { useRefById } from "svelte-toolbelt";
+import { attachRef } from "svelte-toolbelt";
 import { Context } from "runed";
 import { getAriaChecked, getAriaPressed, getDataDisabled, getDataOrientation, getDisabled, } from "../../internal/attrs.js";
 import { kbd } from "../../internal/kbd.js";
@@ -15,11 +15,10 @@ class ToolbarRootState {
     rovingFocusGroup;
     constructor(opts) {
         this.opts = opts;
-        useRefById(opts);
         this.rovingFocusGroup = useRovingFocus({
             orientation: this.opts.orientation,
             loop: this.opts.loop,
-            rootNodeId: this.opts.id,
+            rootNode: this.opts.ref,
             candidateAttr: TOOLBAR_ITEM_ATTR,
         });
     }
@@ -28,6 +27,7 @@ class ToolbarRootState {
         role: "toolbar",
         "data-orientation": this.opts.orientation.current,
         [TOOLBAR_ROOT_ATTR]: "",
+        ...attachRef(this.opts.ref),
     }));
 }
 class ToolbarGroupBaseState {
@@ -36,7 +36,6 @@ class ToolbarGroupBaseState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useRefById(opts);
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
@@ -44,6 +43,7 @@ class ToolbarGroupBaseState {
         role: "group",
         "data-orientation": getDataOrientation(this.root.opts.orientation.current),
         "data-disabled": getDataDisabled(this.opts.disabled.current),
+        ...attachRef(this.opts.ref),
     }));
 }
 class ToolbarGroupSingleState extends ToolbarGroupBaseState {
@@ -99,7 +99,6 @@ class ToolbarGroupItemState {
         this.opts = opts;
         this.group = group;
         this.root = root;
-        useRefById(opts);
         $effect(() => {
             this.#tabIndex = this.root.rovingFocusGroup.getTabIndex(this.opts.ref.current);
         });
@@ -150,6 +149,7 @@ class ToolbarGroupItemState {
         //
         onclick: this.onclick,
         onkeydown: this.onkeydown,
+        ...attachRef(this.opts.ref),
     }));
 }
 class ToolbarLinkState {
@@ -158,7 +158,6 @@ class ToolbarLinkState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useRefById(opts);
         $effect(() => {
             this.#tabIndex = this.root.rovingFocusGroup.getTabIndex(this.opts.ref.current);
         });
@@ -185,6 +184,7 @@ class ToolbarLinkState {
         "data-orientation": getDataOrientation(this.root.opts.orientation.current),
         //
         onkeydown: this.onkeydown,
+        ...attachRef(this.opts.ref),
     }));
 }
 class ToolbarButtonState {
@@ -193,7 +193,6 @@ class ToolbarButtonState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useRefById(opts);
         $effect(() => {
             this.#tabIndex = this.root.rovingFocusGroup.getTabIndex(this.opts.ref.current);
         });
@@ -222,6 +221,7 @@ class ToolbarButtonState {
         disabled: getDisabled(this.opts.disabled.current),
         //
         onkeydown: this.onkeydown,
+        ...attachRef(this.opts.ref),
     }));
 }
 //