@sprawlify/primitives 0.0.112 → 0.0.114

package/dist/machines/angle-slider/index.mjs

@@ -1,5 +1,5 @@
 import { t as createAnatomy } from "../../create-anatomy-Dr0evdYy.mjs";
-import { E as trackPointerMove, St as isLeftClick, W as raf, ct as setElementValue, gt as getNativeEvent, mt as getEventStep, pt as getEventPoint, xn as dataAttr } from "../../dom-query-BFuRs3l4.mjs";
+import { E as trackPointerMove, St as isLeftClick, W as raf, ct as setElementValue, ft as getEventKey, gt as getNativeEvent, mt as getEventStep, pt as getEventPoint, xn as dataAttr } from "../../dom-query-BFuRs3l4.mjs";
 import { B as snapValueToStep, u as createSplitProps } from "../../utils-VVoZ_v29.mjs";
 import { a as createMachine } from "../../core-Ci9Yu6QI.mjs";
 import { R as createRect, q as getPointAngle } from "../../rect-utils-B5xqFvKC.mjs";
@@ -18,11 +18,24 @@ const getLabelId = (ctx) => ctx.ids?.label ?? `angle-slider:${ctx.id}:label`;
 const getHiddenInputEl = (ctx) => ctx.getById(getHiddenInputId(ctx));
 const getControlEl = (ctx) => ctx.getById(getControlId(ctx));
 const getThumbEl = (ctx) => ctx.getById(getThumbId(ctx));
-function getAngle(controlEl, point, angularOffset) {
-	const angle = getPointAngle(createRect(controlEl.getBoundingClientRect()), point);
+function mirrorAngle(angle) {
+	return (360 - angle) % 360;
+}
+function getAngle(controlEl, point, angularOffset, dir) {
+	let angle = getPointAngle(createRect(controlEl.getBoundingClientRect()), point);
 	if (angularOffset != null) return angle - angularOffset;
+	if (dir === "rtl") angle = mirrorAngle(angle);
 	return angle;
 }
+function getPointerValue(controlEl, point, angularOffset, value, dir) {
+	if (angularOffset == null) return getAngle(controlEl, point, null, dir);
+	const angle = getAngle(controlEl, point);
+	const clickAngle = value + angularOffset;
+	return dir === "rtl" ? value + clickAngle - angle : angle - angularOffset;
+}
+function getDisplayAngle(value, dir) {
+	return dir === "rtl" ? mirrorAngle(value) : value;
+}
 function clampAngle(degree) {
 	return Math.min(Math.max(degree, 0), 359);
 }
@@ -42,6 +55,8 @@ function connect(service, normalize) {
 	const dragging = state.matches("dragging");
 	const value = context.get("value");
 	const valueAsDegree = computed("valueAsDegree");
+	const dir = prop("dir");
+	const displayAngle = getDisplayAngle(value, dir);
 	const disabled = prop("disabled");
 	const invalid = prop("invalid");
 	const readOnly = prop("readOnly");
@@ -62,12 +77,13 @@ function connect(service, normalize) {
 			return normalize.element({
 				...parts.root.attrs,
 				id: getRootId(scope),
+				dir: prop("dir"),
 				"data-disabled": dataAttr(disabled),
 				"data-invalid": dataAttr(invalid),
 				"data-readonly": dataAttr(readOnly),
 				style: {
 					"--value": value,
-					"--angle": valueAsDegree
+					"--angle": `${displayAngle}deg`
 				}
 			});
 		},
@@ -76,6 +92,7 @@ function connect(service, normalize) {
 				...parts.label.attrs,
 				id: getLabelId(scope),
 				htmlFor: getHiddenInputId(scope),
+				dir: prop("dir"),
 				"data-disabled": dataAttr(disabled),
 				"data-invalid": dataAttr(invalid),
 				"data-readonly": dataAttr(readOnly),
@@ -91,7 +108,8 @@ function connect(service, normalize) {
 				type: "hidden",
 				value,
 				name: prop("name"),
-				id: getHiddenInputId(scope)
+				id: getHiddenInputId(scope),
+				dir: prop("dir")
 			});
 		},
 		getControlProps() {
@@ -99,6 +117,7 @@ function connect(service, normalize) {
 				...parts.control.attrs,
 				role: "presentation",
 				id: getControlId(scope),
+				dir: prop("dir"),
 				"data-disabled": dataAttr(disabled),
 				"data-invalid": dataAttr(invalid),
 				"data-readonly": dataAttr(readOnly),
@@ -131,6 +150,7 @@ function connect(service, normalize) {
 				...parts.thumb.attrs,
 				id: getThumbId(scope),
 				role: "slider",
+				dir: prop("dir"),
 				"aria-label": ariaLabel,
 				"aria-labelledby": ariaLabelledBy ?? getLabelId(scope),
 				"aria-valuemax": 360,
@@ -149,32 +169,44 @@ function connect(service, normalize) {
 				onKeyDown(event) {
 					if (!interactive) return;
 					const step = getEventStep(event) * prop("step");
-					switch (event.key) {
-						case "ArrowLeft":
-						case "ArrowUp":
-							event.preventDefault();
+					const exec = {
+						ArrowLeft() {
+							send({
+								type: "THUMB.ARROW_DEC",
+								step
+							});
+						},
+						ArrowUp() {
 							send({
 								type: "THUMB.ARROW_DEC",
 								step
 							});
-							break;
-						case "ArrowRight":
-						case "ArrowDown":
-							event.preventDefault();
+						},
+						ArrowRight() {
 							send({
 								type: "THUMB.ARROW_INC",
 								step
 							});
-							break;
-						case "Home":
-							event.preventDefault();
+						},
+						ArrowDown() {
+							send({
+								type: "THUMB.ARROW_INC",
+								step
+							});
+						},
+						Home() {
 							send({ type: "THUMB.HOME" });
-							break;
-						case "End":
-							event.preventDefault();
+						},
+						End() {
 							send({ type: "THUMB.END" });
-							break;
-						default: break;
+						}
+					}[getEventKey(event, {
+						dir: prop("dir"),
+						orientation: "horizontal"
+					})];
+					if (exec) {
+						exec(event);
+						event.preventDefault();
 					}
 				},
 				style: { rotate: `var(--angle)` }
@@ -183,25 +215,32 @@ function connect(service, normalize) {
 		getValueTextProps() {
 			return normalize.element({
 				...parts.valueText.attrs,
-				id: getValueTextId(scope)
+				id: getValueTextId(scope),
+				dir: prop("dir")
 			});
 		},
 		getMarkerGroupProps() {
-			return normalize.element({ ...parts.markerGroup.attrs });
+			return normalize.element({
+				...parts.markerGroup.attrs,
+				dir: prop("dir")
+			});
 		},
 		getMarkerProps(props) {
 			let markerState;
 			if (props.value < value) markerState = "under-value";
 			else if (props.value > value) markerState = "over-value";
 			else markerState = "at-value";
+			const markerDisplayAngle = getDisplayAngle(props.value, dir);
 			return normalize.element({
 				...parts.marker.attrs,
+				dir: prop("dir"),
 				"data-value": props.value,
 				"data-state": markerState,
 				"data-disabled": dataAttr(disabled),
 				style: {
 					"--marker-value": props.value,
-					rotate: `calc(var(--marker-value) * 1deg)`
+					"--marker-display-value": markerDisplayAngle,
+					rotate: `calc(var(--marker-display-value) * 1deg)`
 				}
 			});
 		}
@@ -312,7 +351,8 @@ const machine = createMachine({
 				const controlEl = getControlEl(scope);
 				if (!controlEl) return;
 				const angularOffset = refs.get("thumbDragOffset");
-				const deg = getAngle(controlEl, event.point, angularOffset);
+				const value = context.get("value");
+				const deg = getPointerValue(controlEl, event.point, angularOffset, value, prop("dir"));
 				context.set("value", constrainAngle(deg, prop("step")));
 			},
 			setValueToMin({ context }) {

package/dist/machines/carousel/index.d.cts

@@ -3,7 +3,7 @@ import { p as Machine, u as EventObject, y as Service } from "../../types-B24gMT
 import { b as NormalizeProps, d as Orientation, f as OrientationProperty, g as RequiredBy, r as DirectionProperty, t as CommonProperties, x as PropTypes } from "../../index-CLRsezW5.cjs";
 
 //#region src/machines/carousel/carousel.anatomy.d.ts
-declare const anatomy: AnatomyInstance<"root" | "indicator" | "control" | "item" | "prevTrigger" | "nextTrigger" | "itemGroup" | "indicatorGroup" | "autoplayTrigger" | "progressText">;
+declare const anatomy: AnatomyInstance<"root" | "indicator" | "control" | "item" | "itemGroup" | "nextTrigger" | "prevTrigger" | "indicatorGroup" | "autoplayTrigger" | "progressText">;
 //#endregion
 //#region src/machines/carousel/carousel.types.d.ts
 interface PageChangeDetails {

package/dist/machines/carousel/index.d.mts

@@ -3,7 +3,7 @@ import { p as Machine, u as EventObject, y as Service } from "../../types-DUM9rz
 import { b as NormalizeProps, d as Orientation, f as OrientationProperty, g as RequiredBy, r as DirectionProperty, t as CommonProperties, x as PropTypes } from "../../index-BVFlU3b9.mjs";
 
 //#region src/machines/carousel/carousel.anatomy.d.ts
-declare const anatomy: AnatomyInstance<"root" | "indicator" | "control" | "item" | "prevTrigger" | "nextTrigger" | "itemGroup" | "indicatorGroup" | "autoplayTrigger" | "progressText">;
+declare const anatomy: AnatomyInstance<"root" | "indicator" | "control" | "item" | "itemGroup" | "nextTrigger" | "prevTrigger" | "indicatorGroup" | "autoplayTrigger" | "progressText">;
 //#endregion
 //#region src/machines/carousel/carousel.types.d.ts
 interface PageChangeDetails {

package/dist/machines/cascade-select/index.cjs

@@ -70,7 +70,7 @@ function connect(service, normalize) {
 	const disabled = prop("disabled") || context.get("fieldsetDisabled");
 	const interactive = computed("isInteractive");
 	const valueAsString = computed("valueAsString");
-	const highlightedItem = context.get("highlightedItem");
+	const highlightedItems = context.get("highlightedItems");
 	const selectedItems = context.get("selectedItems");
 	const popperStyles = require_popper.getPlacementStyles({
 		...prop("positioning"),
@@ -95,6 +95,7 @@ function connect(service, normalize) {
 		};
 	};
 	const hasSelectedItems = value.length > 0;
+	const empty = value.length === 0;
 	return {
 		collection,
 		open,
@@ -103,9 +104,10 @@ function connect(service, normalize) {
 		disabled,
 		value,
 		highlightedValue,
-		highlightedItem,
+		highlightedItems,
 		selectedItems,
 		hasSelectedItems,
+		empty,
 		valueAsString,
 		reposition(options = {}) {
 			send({
@@ -120,12 +122,15 @@ function connect(service, normalize) {
 			if (nextOpen === open) return;
 			send({ type: nextOpen ? "OPEN" : "CLOSE" });
 		},
-		highlightValue(value) {
+		setHighlightValue(value) {
 			send({
 				type: "HIGHLIGHTED_VALUE.SET",
 				value
 			});
 		},
+		clearHighlightValue() {
+			send({ type: "HIGHLIGHTED_VALUE.CLEAR" });
+		},
 		setValue(value) {
 			send({
 				type: "VALUE.SET",
@@ -179,7 +184,7 @@ function connect(service, normalize) {
 				dir: prop("dir"),
 				id: dom.getControlId(scope),
 				"data-disabled": require_dom_query.dataAttr(disabled),
-				"data-focused": require_dom_query.dataAttr(focused),
+				"data-focus": require_dom_query.dataAttr(focused),
 				"data-readonly": require_dom_query.dataAttr(prop("readOnly")),
 				"data-invalid": require_dom_query.dataAttr(prop("invalid")),
 				"data-state": open ? "open" : "closed"
@@ -200,8 +205,9 @@ function connect(service, normalize) {
 				"data-disabled": require_dom_query.dataAttr(disabled),
 				"data-readonly": require_dom_query.dataAttr(prop("readOnly")),
 				"data-invalid": require_dom_query.dataAttr(prop("invalid")),
-				"data-focused": require_dom_query.dataAttr(focused),
+				"data-focus": require_dom_query.dataAttr(focused),
 				"data-placement": currentPlacement,
+				"data-placeholder-shown": require_dom_query.dataAttr(!hasSelectedItems),
 				disabled,
 				onClick(event) {
 					if (event.defaultPrevented) return;
@@ -449,6 +455,15 @@ function connect(service, normalize) {
 				hidden: !itemState.selected
 			});
 		},
+		getValueTextProps() {
+			return normalize.element({
+				...parts.valueText.attrs,
+				dir: prop("dir"),
+				"data-disabled": require_dom_query.dataAttr(disabled),
+				"data-invalid": require_dom_query.dataAttr(prop("invalid")),
+				"data-focus": require_dom_query.dataAttr(focused)
+			});
+		},
 		getHiddenInputProps() {
 			const defaultValue = context.hash("value");
 			return normalize.input({
@@ -576,7 +591,7 @@ const machine = require_core.createMachine({
 				const value = prop("highlightedValue") ?? prop("defaultHighlightedValue") ?? null;
 				return { defaultValue: value ? prop("collection").getIndexPath(value) : [] };
 			}),
-			highlightedItem: bindable(() => ({ defaultValue: null })),
+			highlightedItems: bindable(() => ({ defaultValue: [] })),
 			selectedItems: bindable(() => ({ defaultValue: [] })),
 			currentPlacement: bindable(() => ({ defaultValue: void 0 })),
 			fieldsetDisabled: bindable(() => ({ defaultValue: false })),
@@ -616,6 +631,7 @@ const machine = require_core.createMachine({
 		"VALUE.CLEAR": { actions: ["clearValue"] },
 		"CLEAR_TRIGGER.CLICK": { actions: ["clearValue", "focusTriggerEl"] },
 		"HIGHLIGHTED_VALUE.SET": { actions: ["setHighlightedValue"] },
+		"HIGHLIGHTED_VALUE.CLEAR": { actions: ["clearHighlightedValue"] },
 		"ITEM.SELECT": { actions: ["selectItem"] },
 		"ITEM.CLEAR": { actions: ["clearItem"] }
 	},
@@ -902,8 +918,8 @@ const machine = require_core.createMachine({
 			},
 			shouldCloseOnSelectHighlighted: ({ prop, context }) => {
 				const collection = prop("collection");
-				const node = context.get("highlightedItem");
-				return prop("closeOnSelect") && !collection.isBranchNode(node);
+				const node = require_utils.last(context.get("highlightedItems"));
+				return prop("closeOnSelect") && node != null && !collection.isBranchNode(node);
 			},
 			canSelectItem: ({ prop, event }) => {
 				const collection = prop("collection");
@@ -1015,7 +1031,7 @@ const machine = require_core.createMachine({
 					const highlightedValue = context.get("highlightedValue");
 					const highlightedIndexPath = context.get("highlightedIndexPath");
 					if (!highlightedIndexPath.length) return;
-					if (require_focus_visible.getInteractionModality() !== "keyboard") return;
+					if (require_focus_visible.getInteractionModality() === "pointer") return;
 					dom.getListEls(scope).forEach((listEl, index) => {
 						const itemPath = highlightedIndexPath.slice(0, index + 1);
 						const itemEl = dom.getItemEl(scope, highlightedValue.toString());
@@ -1038,7 +1054,10 @@ const machine = require_core.createMachine({
 						cleanups.push(raf_cleanup);
 					});
 				};
-				require_dom_query.raf(() => exec(true));
+				require_dom_query.raf(() => {
+					require_focus_visible.setInteractionModality("virtual");
+					exec(true);
+				});
 				const rafCleanup = require_dom_query.raf(() => exec(true));
 				cleanups.push(rafCleanup);
 				const observerCleanup = require_dom_query.observeAttributes(dom.getContentEl(scope), {
@@ -1219,11 +1238,17 @@ const machine = require_core.createMachine({
 					dom.getTriggerEl(scope)?.focus({ preventScroll: true });
 				});
 			},
-			invokeOnOpen({ prop }) {
-				prop("onOpenChange")?.({ open: true });
+			invokeOnOpen({ prop, context }) {
+				prop("onOpenChange")?.({
+					open: true,
+					value: context.get("value")
+				});
 			},
-			invokeOnClose({ prop }) {
-				prop("onOpenChange")?.({ open: false });
+			invokeOnClose({ prop, context }) {
+				prop("onOpenChange")?.({
+					open: false,
+					value: context.get("value")
+				});
 			},
 			toggleVisibility({ send, prop }) {
 				if (prop("open") != null) send({ type: prop("open") ? "CONTROLLED.OPEN" : "CONTROLLED.CLOSE" });
@@ -1309,16 +1334,16 @@ const set = {
 	highlightedValue({ context, prop }, value) {
 		const collection = prop("collection");
 		context.set("highlightedValue", value);
-		const highlightedIndexPath = value == null ? [] : collection.getIndexPath(value);
+		const highlightedIndexPath = (value == null ? [] : collection.getIndexPath(value)) ?? [];
 		context.set("highlightedIndexPath", highlightedIndexPath);
-		const highlightedItem = highlightedIndexPath.map((_, index) => {
+		const highlightedItems = highlightedIndexPath.map((_, index) => {
 			const partialPath = highlightedIndexPath.slice(0, index + 1);
 			return collection.at(partialPath);
 		});
-		context.set("highlightedItem", highlightedItem);
+		context.set("highlightedItems", highlightedItems);
 		prop("onHighlightChange")?.({
-			value,
-			items: highlightedItem
+			highlightedValue: value,
+			highlightedItems
 		});
 	}
 };

package/dist/machines/cascade-select/index.d.cts

@@ -8,8 +8,8 @@ import { c as Placement, d as PositioningOptions } from "../../types-CZAtqGqH.cj
 import { a as Point } from "../../types-CLXYEgfm.cjs";
 
 //#region src/machines/cascade-select/cascade-select.anatomy.d.ts
-declare const anatomy: AnatomyInstance<"root" | "indicator" | "label" | "control" | "content" | "item" | "itemIndicator" | "itemText" | "trigger" | "valueText" | "clearTrigger" | "positioner" | "list">;
-declare const parts: Record<"root" | "indicator" | "label" | "control" | "content" | "item" | "itemIndicator" | "itemText" | "trigger" | "valueText" | "clearTrigger" | "positioner" | "list", AnatomyPart>;
+declare const anatomy: AnatomyInstance<"root" | "trigger" | "content" | "indicator" | "label" | "control" | "item" | "itemIndicator" | "positioner" | "clearTrigger" | "itemText" | "list" | "valueText">;
+declare const parts: Record<"root" | "trigger" | "content" | "indicator" | "label" | "control" | "item" | "itemIndicator" | "positioner" | "clearTrigger" | "itemText" | "list" | "valueText", AnatomyPart>;
 //#endregion
 //#region src/machines/cascade-select/cascade-select.collection.d.ts
 declare const collection: {
@@ -23,11 +23,12 @@ interface ValueChangeDetails<T = TreeNode> {
   items: T[][];
 }
 interface HighlightChangeDetails<T = TreeNode> {
-  value: string[];
-  items: T[];
+  highlightedValue: string[];
+  highlightedItems: T[];
 }
 interface OpenChangeDetails {
   open: boolean;
+  value: string[][];
 }
 interface ScrollToIndexDetails {
   index: number;
@@ -44,8 +45,8 @@ type ElementIds = Partial<{
   positioner: string;
   content: string;
   hiddenInput: string;
-  list(value: number): string;
-  item(value: string): string;
+  list(valuePath: string): string;
+  item(valuePath: string): string;
 }>;
 interface CascadeSelectProps<T = any> extends DirectionProperty, CommonProperties, InteractOutsideHandlers {
   collection?: TreeCollection<T> | undefined;
@@ -86,7 +87,7 @@ interface CascadeSelectSchema<T extends TreeNode = TreeNode> {
     graceArea: Point[] | null;
     valueIndexPath: IndexPath[];
     highlightedIndexPath: IndexPath;
-    highlightedItem: T[] | null;
+    highlightedItems: T[];
     selectedItems: T[][];
   };
   computed: {
@@ -122,16 +123,17 @@ interface CascadeSelectApi<T extends PropTypes = PropTypes, V = TreeNode> {
   multiple: boolean;
   disabled: boolean;
   highlightedValue: string[];
-  highlightedItem: V[] | null;
+  highlightedItems: V[];
   selectedItems: V[][];
   hasSelectedItems: boolean;
+  empty: boolean;
   value: string[][];
   valueAsString: string;
   focus(): void;
-  focus(): void;
   reposition(options?: Partial<PositioningOptions>): void;
   setOpen(open: boolean): void;
-  highlightValue(value: string): void;
+  setHighlightValue(value: string | string[]): void;
+  clearHighlightValue(): void;
   selectValue(value: string[]): void;
   setValue(value: string[][]): void;
   clearValue(value?: string[]): void;
@@ -148,6 +150,7 @@ interface CascadeSelectApi<T extends PropTypes = PropTypes, V = TreeNode> {
   getItemProps(props: ItemProps<V>): T["element"];
   getItemTextProps(props: ItemProps<V>): T["element"];
   getItemIndicatorProps(props: ItemProps<V>): T["element"];
+  getValueTextProps(): T["element"];
   getHiddenInputProps(): T["input"];
 }
 //#endregion

package/dist/machines/cascade-select/index.d.mts

@@ -8,8 +8,8 @@ import { p as PositioningOptions, u as Placement } from "../../index-fMh0VDkR.mj
 import { a as Point } from "../../types-DU764tY_.mjs";
 
 //#region src/machines/cascade-select/cascade-select.anatomy.d.ts
-declare const anatomy: AnatomyInstance<"root" | "indicator" | "label" | "control" | "content" | "item" | "itemIndicator" | "itemText" | "trigger" | "valueText" | "clearTrigger" | "positioner" | "list">;
-declare const parts: Record<"root" | "indicator" | "label" | "control" | "content" | "item" | "itemIndicator" | "itemText" | "trigger" | "valueText" | "clearTrigger" | "positioner" | "list", AnatomyPart>;
+declare const anatomy: AnatomyInstance<"root" | "trigger" | "content" | "indicator" | "label" | "control" | "item" | "itemIndicator" | "positioner" | "clearTrigger" | "itemText" | "list" | "valueText">;
+declare const parts: Record<"root" | "trigger" | "content" | "indicator" | "label" | "control" | "item" | "itemIndicator" | "positioner" | "clearTrigger" | "itemText" | "list" | "valueText", AnatomyPart>;
 //#endregion
 //#region src/machines/cascade-select/cascade-select.collection.d.ts
 declare const collection: {
@@ -23,11 +23,12 @@ interface ValueChangeDetails<T = TreeNode> {
   items: T[][];
 }
 interface HighlightChangeDetails<T = TreeNode> {
-  value: string[];
-  items: T[];
+  highlightedValue: string[];
+  highlightedItems: T[];
 }
 interface OpenChangeDetails {
   open: boolean;
+  value: string[][];
 }
 interface ScrollToIndexDetails {
   index: number;
@@ -44,8 +45,8 @@ type ElementIds = Partial<{
   positioner: string;
   content: string;
   hiddenInput: string;
-  list(value: number): string;
-  item(value: string): string;
+  list(valuePath: string): string;
+  item(valuePath: string): string;
 }>;
 interface CascadeSelectProps<T = any> extends DirectionProperty, CommonProperties, InteractOutsideHandlers {
   collection?: TreeCollection<T> | undefined;
@@ -86,7 +87,7 @@ interface CascadeSelectSchema<T extends TreeNode = TreeNode> {
     graceArea: Point[] | null;
     valueIndexPath: IndexPath[];
     highlightedIndexPath: IndexPath;
-    highlightedItem: T[] | null;
+    highlightedItems: T[];
     selectedItems: T[][];
   };
   computed: {
@@ -122,16 +123,17 @@ interface CascadeSelectApi<T extends PropTypes = PropTypes, V = TreeNode> {
   multiple: boolean;
   disabled: boolean;
   highlightedValue: string[];
-  highlightedItem: V[] | null;
+  highlightedItems: V[];
   selectedItems: V[][];
   hasSelectedItems: boolean;
+  empty: boolean;
   value: string[][];
   valueAsString: string;
   focus(): void;
-  focus(): void;
   reposition(options?: Partial<PositioningOptions>): void;
   setOpen(open: boolean): void;
-  highlightValue(value: string): void;
+  setHighlightValue(value: string | string[]): void;
+  clearHighlightValue(): void;
   selectValue(value: string[]): void;
   setValue(value: string[][]): void;
   clearValue(value?: string[]): void;
@@ -148,6 +150,7 @@ interface CascadeSelectApi<T extends PropTypes = PropTypes, V = TreeNode> {
   getItemProps(props: ItemProps<V>): T["element"];
   getItemTextProps(props: ItemProps<V>): T["element"];
   getItemIndicatorProps(props: ItemProps<V>): T["element"];
+  getValueTextProps(): T["element"];
   getHiddenInputProps(): T["input"];
 }
 //#endregion