@cube-dev/ui-kit 0.195.0 → 0.197.0

package/dist/components/fields/ListBox/ListBox.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.195.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.197.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
@@ -17,12 +17,13 @@ import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
 import { wrapWithField } from "../../form/wrapper.js";
 import { GripVerticalIcon } from "../../../icons/GripVerticalIcon.js";
 import { createMockDragState } from "../../shared/DraggableCollection.js";
+import { useOptionOriginPress } from "../option-origin-press.js";
 import { DraggableListBox } from "./DraggableListBox.js";
 import { c } from "react/compiler-runtime";
 import { BASE_STYLES, COLOR_STYLES, OUTER_STYLES, mergeStyles, tasty } from "@tenphi/tasty";
-import { forwardRef, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { forwardRef, useEffect, useLayoutEffect, useMemo, useRef } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { useDraggableItem, useDropIndicator, useKeyboard, useListBox, useListBoxSection, useOption } from "react-aria";
+import { mergeProps, useDraggableItem, useDropIndicator, useFocusRing, useKeyboard, useListBox, useListBoxSection, useOption } from "react-aria";
 import { Section, useListState } from "react-stately";
 import { useHover as useHover$1 } from "@react-aria/interactions";
 import { IconMinus } from "@tabler/icons-react";
@@ -65,12 +66,15 @@ const ListElement = tasty({
 	styles: {
 		"$list-gap": "1bw",
 		display: "block",
-		padding: ".5x bottom",
+		padding: {
+			"": ".5x bottom",
+			empty: 0
+		},
 		listStyle: "none",
 		boxSizing: "content-box",
 		margin: {
 			"": ".5x .5x 0 .5x",
-			"[data-shape=\"plain\"]": "0"
+			"[data-shape=\"plain\"] | empty": "0"
 		},
 		height: "max-content"
 	}
@@ -223,79 +227,217 @@ const PROP_STYLES = [
 	...OUTER_STYLES,
 	...COLOR_STYLES
 ];
-const SelectAllOption = ({ label, isSelected, isIndeterminate, isDisabled, isCheckable, size = "medium", state, lastFocusSourceRef, onClick, allValueProps = {} }) => {
+/** A collection with no options, for a list state that isn't needed. */
+const NO_OPTIONS = {
+	children: [],
+	selectionMode: "none"
+};
+/**
+* The "Select All" row: a tri-state checkbox above the list rather than an
+* option in it, since it acts on the options instead of being one. Being
+* outside the listbox keeps the listbox's children to options and groups, and
+* makes it a Tab stop of its own, which a list in virtual focus (searchable
+* lists) could not offer as an option.
+*/
+const SelectAllOption = (t0) => {
+	const $ = c(41);
+	const { label, isSelected, isIndeterminate, isDisabled, isCheckable, size: t1, onClick, focusProps, allValueProps: t2 } = t0;
+	const size = t1 === void 0 ? "medium" : t1;
+	const allValueProps = t2 === void 0 ? {} : t2;
 	const { t } = useI18n();
-	const { hoverProps, isHovered } = useHover$1({ isDisabled });
-	const resolvedLabel = label === "" || label === void 0 || label === null ? t("listBox.selectAll", "Select All") : label;
-	const markIcon = isIndeterminate ? /* @__PURE__ */ jsx(Icon, {
-		size: 12,
-		stroke: 3,
-		"aria-hidden": "true",
-		children: /* @__PURE__ */ jsx(IconMinus, {})
-	}) : /* @__PURE__ */ jsx(CheckIcon, {
-		size: 12,
-		stroke: 3
-	});
-	const localRef = useRef(null);
-	const checkboxIcon = useMemo(() => {
-		if (!isCheckable) return null;
-		return /* @__PURE__ */ jsx(ListBoxCheckboxWrapper, {
+	let t3;
+	if ($[0] !== isDisabled) {
+		t3 = { isDisabled };
+		$[0] = isDisabled;
+		$[1] = t3;
+	} else t3 = $[1];
+	const { hoverProps, isHovered } = useHover$1(t3);
+	const { focusProps: focusRingProps, isFocusVisible } = useFocusRing();
+	let t4;
+	if ($[2] !== label || $[3] !== t) {
+		t4 = label === "" || label === void 0 || label === null ? t("listBox.selectAll", "Select All") : label;
+		$[2] = label;
+		$[3] = t;
+		$[4] = t4;
+	} else t4 = $[4];
+	const resolvedLabel = t4;
+	let t5;
+	if ($[5] !== isIndeterminate) {
+		t5 = isIndeterminate ? /* @__PURE__ */ jsx(Icon, {
+			size: 12,
+			stroke: 3,
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx(IconMinus, {})
+		}) : /* @__PURE__ */ jsx(CheckIcon, {
+			size: 12,
+			stroke: 3
+		});
+		$[5] = isIndeterminate;
+		$[6] = t5;
+	} else t5 = $[6];
+	const markIcon = t5;
+	let t6;
+	if ($[7] !== isDisabled || $[8] !== isHovered || $[9] !== isIndeterminate || $[10] !== isSelected) {
+		t6 = {
+			selected: isSelected,
+			disabled: isDisabled,
+			hovered: isHovered,
+			indeterminate: isIndeterminate
+		};
+		$[7] = isDisabled;
+		$[8] = isHovered;
+		$[9] = isIndeterminate;
+		$[10] = isSelected;
+		$[11] = t6;
+	} else t6 = $[11];
+	const checkboxMods = t6;
+	let t7;
+	if ($[12] !== checkboxMods || $[13] !== isCheckable || $[14] !== isIndeterminate || $[15] !== isSelected || $[16] !== markIcon) {
+		t7 = isCheckable ? /* @__PURE__ */ jsx(ListBoxCheckboxWrapper, {
 			"data-element": "CheckboxWrapper",
-			mods: {
-				selected: isSelected,
-				disabled: isDisabled,
-				hovered: isHovered,
-				indeterminate: isIndeterminate
-			},
+			mods: checkboxMods,
 			children: /* @__PURE__ */ jsx(ListBoxCheckbox, {
 				"data-element": "Checkbox",
-				mods: {
-					selected: isSelected,
-					disabled: isDisabled,
-					hovered: isHovered,
-					indeterminate: isIndeterminate
-				},
+				mods: checkboxMods,
 				children: (isIndeterminate || isSelected) && markIcon
 			})
-		});
-	}, [
-		isCheckable,
-		isSelected,
-		isDisabled,
-		isHovered,
-		isIndeterminate,
-		markIcon
-	]);
-	const handleOptionClick = (e) => {
-		if (lastFocusSourceRef) lastFocusSourceRef.current = "mouse";
-		if (state.selectionManager.selectionMode === "multiple") {
-			const clickTarget = e.target;
-			const checkboxElement = localRef.current?.querySelector("[data-element=\"CheckboxWrapper\"]");
-			if (checkboxElement && (checkboxElement === clickTarget || checkboxElement.contains(clickTarget))) onClick?.(false);
-			else onClick?.(true);
-		} else onClick?.(true);
-	};
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ListBoxItem, {
-		ref: localRef,
-		"data-size": size,
-		size,
-		role: "option",
-		"aria-selected": isSelected,
-		isSelected,
-		isDisabled,
-		icon: checkboxIcon,
-		mods: {
+		}) : null;
+		$[12] = checkboxMods;
+		$[13] = isCheckable;
+		$[14] = isIndeterminate;
+		$[15] = isSelected;
+		$[16] = markIcon;
+		$[17] = t7;
+	} else t7 = $[17];
+	const checkboxIcon = t7;
+	let t8;
+	if ($[18] !== onClick) {
+		t8 = (e) => {
+			onClick(!e.currentTarget.querySelector("[data-element=\"CheckboxWrapper\"]")?.contains(e.target));
+		};
+		$[18] = onClick;
+		$[19] = t8;
+	} else t8 = $[19];
+	const handleClick = t8;
+	let t9;
+	if ($[20] !== onClick) {
+		t9 = (e_0) => {
+			if (e_0.key !== " ") return;
+			e_0.preventDefault();
+			e_0.stopPropagation();
+			onClick(false);
+		};
+		$[20] = onClick;
+		$[21] = t9;
+	} else t9 = $[21];
+	const handleKeyDown = t9;
+	const T0 = ListBoxItem;
+	const t10 = "div";
+	const t11 = "checkbox";
+	const t12 = isIndeterminate ? "mixed" : isSelected;
+	let t13;
+	if ($[22] !== isCheckable || $[23] !== isDisabled || $[24] !== isFocusVisible || $[25] !== isHovered || $[26] !== isIndeterminate || $[27] !== isSelected) {
+		t13 = {
 			listboxitem: true,
+			selected: isSelected,
 			disabled: isDisabled,
 			checkable: isCheckable,
 			hovered: isHovered,
+			focused: isFocusVisible,
 			indeterminate: isIndeterminate,
 			all: true
-		},
-		...mergeProps$1(hoverProps, allValueProps, { onClick: handleOptionClick }),
-		children: resolvedLabel
-	}), /* @__PURE__ */ jsx(StyledDivider, {})] });
+		};
+		$[22] = isCheckable;
+		$[23] = isDisabled;
+		$[24] = isFocusVisible;
+		$[25] = isHovered;
+		$[26] = isIndeterminate;
+		$[27] = isSelected;
+		$[28] = t13;
+	} else t13 = $[28];
+	const t14 = mergeProps$1(hoverProps, focusRingProps, focusProps, allValueProps, {
+		tabIndex: isDisabled ? void 0 : 0,
+		onClick: handleClick,
+		onKeyDown: handleKeyDown
+	});
+	let t15;
+	if ($[29] !== T0 || $[30] !== checkboxIcon || $[31] !== isDisabled || $[32] !== resolvedLabel || $[33] !== size || $[34] !== t12 || $[35] !== t13 || $[36] !== t14) {
+		t15 = /* @__PURE__ */ jsx(T0, {
+			as: t10,
+			role: t11,
+			"aria-checked": t12,
+			"data-size": size,
+			size,
+			isDisabled,
+			icon: checkboxIcon,
+			mods: t13,
+			...t14,
+			children: resolvedLabel
+		});
+		$[29] = T0;
+		$[30] = checkboxIcon;
+		$[31] = isDisabled;
+		$[32] = resolvedLabel;
+		$[33] = size;
+		$[34] = t12;
+		$[35] = t13;
+		$[36] = t14;
+		$[37] = t15;
+	} else t15 = $[37];
+	let t16;
+	if ($[38] === Symbol.for("react.memo_cache_sentinel")) {
+		t16 = /* @__PURE__ */ jsx(StyledDivider, {
+			as: "div",
+			role: "presentation"
+		});
+		$[38] = t16;
+	} else t16 = $[38];
+	let t17;
+	if ($[39] !== t15) {
+		t17 = /* @__PURE__ */ jsxs(Fragment$1, { children: [t15, t16] });
+		$[39] = t15;
+		$[40] = t17;
+	} else t17 = $[40];
+	return t17;
 };
+/** The keys of the options a user can select in a collection: not disabled. */
+function getSelectableKeys(collection, disabledKeys) {
+	const keys = [];
+	for (const key of collection.getKeys()) {
+		const node = collection.getItem(key);
+		if (node?.type === "item" && !disabledKeys.has(key) && !node.props?.isDisabled) keys.push(key);
+	}
+	return keys;
+}
+/**
+* The selection a "Select All" press leaves. While it isn't checked, the press
+* selects all (`'all'`), or under a filter adds the options shown. Once it is,
+* the press takes the options shown out of the selection: selected options
+* the list doesn't show, hidden by a filter or not among its options, stay.
+* `hiddenKeys` are the selectable options a filter hides.
+*/
+function getSelectAllSelection(isAllSelected, selection, shownKeys, hiddenKeys) {
+	if (!isAllSelected) return selection === "all" || hiddenKeys.length === 0 ? "all" : new Set([...selection, ...shownKeys]);
+	if (selection === "all") return new Set(hiddenKeys);
+	const next = new Set(selection);
+	for (const key of shownKeys) next.delete(key);
+	return next;
+}
+/**
+* Whether every option a user can select is selected, which checks "Select
+* All". Disabled options don't count, and a list with nothing to select is
+* never all selected.
+*/
+function isEverySelectableSelected(collection, selectionManager) {
+	if (selectionManager.rawSelection === "all") return true;
+	let hasSelectable = false;
+	for (const key of collection.getKeys()) {
+		if (collection.getItem(key)?.type !== "item" || !selectionManager.canSelectItem(key)) continue;
+		if (!selectionManager.isSelected(key)) return false;
+		hasSelectable = true;
+	}
+	return hasSelectable;
+}
 /**
 * A public selection prop as the Set-based value React Stately expects: a key
 * array (or `'all'`, passed through) in multiple mode, a single key (or
@@ -318,7 +460,6 @@ const ListBox = forwardRef(function ListBox(props, ref) {
 	} });
 	const { t } = useI18n();
 	let { qa, label, extra, id, labelStyles, isRequired, necessityIndicator, isInvalid, isValid, isDisabled, listStyles, optionStyles, optionHighlight, sectionStyles, headingStyles, listGap, listRef, message, description, styles, mods: externalMods, size = "medium", labelSuffix, selectedKey, defaultSelectedKey, selectedKeys, defaultSelectedKeys, shouldUseVirtualFocus, isFocusWithin, onSelectionChange, disableSelectionToggle = false, allowDuplicateSelectionEvents, stateRef, focusOnHover, header, footer, headerStyles, footerStyles, onEscape, isCheckable, onOptionClick, showSelectAll, selectAllLabel, allValueProps, filter, emptyLabel = t("listBox.noItems", "No items"), shape = "card", isReorderable = false, onReorder, form, ...otherProps } = props;
-	const [, forceUpdate] = useState({});
 	const lastSelectedKeyRef = useRef(null);
 	const externalSelectionHandler = onSelectionChange || props.onChange;
 	const wrappedOnSelectionChange = useMemo(() => {
@@ -327,8 +468,8 @@ const ListBox = forwardRef(function ListBox(props, ref) {
 			if (isDisabled) return;
 			if (keys === "all") externalSelectionHandler("all");
 			else if (keys instanceof Set) if (keys.size === 0) {
-				if (disableSelectionToggle && props.selectionMode === "single") {
-					const prevKey = lastSelectedKeyRef.current;
+				if (disableSelectionToggle && props.selectionMode !== "multiple") {
+					const prevKey = selectedKey ?? lastSelectedKeyRef.current;
 					if (prevKey != null) {
 						externalSelectionHandler(prevKey);
 						return;
@@ -350,7 +491,8 @@ const ListBox = forwardRef(function ListBox(props, ref) {
 		externalSelectionHandler,
 		isDisabled,
 		props.selectionMode,
-		disableSelectionToggle
+		disableSelectionToggle,
+		selectedKey
 	]);
 	const listStateProps = {
 		...props,
@@ -366,46 +508,26 @@ const ListBox = forwardRef(function ListBox(props, ref) {
 	if (selection !== void 0) listStateProps.selectedKeys = toStatelySelection(selection, isMultiple);
 	if (defaultSelection !== void 0) listStateProps.defaultSelectedKeys = toStatelySelection(defaultSelection, isMultiple);
 	const listState = getValueSelectionState(useListState(listStateProps));
+	const hasSelectAll = !!showSelectAll && props.selectionMode === "multiple";
+	const { collection: fullCollection } = useListState(hasSelectAll && filter ? {
+		children: props.children,
+		items: props.items,
+		selectionMode: "none"
+	} : NO_OPTIONS);
 	useLayoutEffect(() => {
 		const selected = listState.selectionManager.selectedKeys;
 		if (selected && selected.size > 0) lastSelectedKeyRef.current = Array.from(selected)[0] ?? null;
 	}, [listState.selectionManager.selectedKeys]);
-	const selectAllState = useMemo(() => {
-		if (props.selectionMode !== "multiple" || !showSelectAll) return {
-			isSelected: false,
-			isIndeterminate: false
-		};
-		if (listState.selectionManager.rawSelection === "all") return {
-			isSelected: true,
-			isIndeterminate: false
-		};
-		if (listState.selectionManager.selectedKeys.size === 0) return {
-			isSelected: false,
-			isIndeterminate: false
-		};
-		return {
-			isSelected: false,
-			isIndeterminate: true
-		};
-	}, [
-		props.selectionMode,
-		showSelectAll,
-		listState.collection,
-		listState.disabledKeys,
-		listState.selectionManager.selectedKeys,
-		listState.selectionManager.rawSelection
-	]);
+	const isAllSelected = hasSelectAll && isEverySelectableSelected(listState.collection, listState.selectionManager);
+	const isSomeSelected = hasSelectAll && !isAllSelected && !listState.selectionManager.isEmpty;
 	const handleSelectAllClick = (propagate) => {
-		if (isDisabled || props.selectionMode !== "multiple") return;
-		if (selectAllState.isSelected) {
-			listState.selectionManager.clearSelection();
-			wrappedOnSelectionChange?.(/* @__PURE__ */ new Set());
-		} else {
-			listState.selectionManager.selectAll();
-			wrappedOnSelectionChange?.("all");
-			forceUpdate({});
-		}
-		if (propagate && !selectAllState.isSelected) onOptionClick?.("__ALL__");
+		if (isDisabled || !hasSelectAll) return;
+		const { collection, disabledKeys, selectionManager } = listState;
+		const next = getSelectAllSelection(isAllSelected, selectionManager.rawSelection, getSelectableKeys(collection, disabledKeys), getSelectableKeys(fullCollection, disabledKeys).filter((key_1) => !collection.getItem(key_1)));
+		if (next === "all") selectionManager.selectAll();
+		else if (next.size === 0) selectionManager.clearSelection();
+		else selectionManager.setSelectedKeys(next);
+		if (propagate && !isAllSelected) onOptionClick?.("__ALL__");
 	};
 	const lastFocusSourceRef = useRef("other");
 	if (stateRef) stateRef.current = {
@@ -427,17 +549,18 @@ const ListBox = forwardRef(function ListBox(props, ref) {
 	const itemsArray = useMemo(() => [...listState.collection], [listState.collection]);
 	const hasSections = useMemo(() => itemsArray.some((i) => i.type === "section"), [itemsArray]);
 	const shouldVirtualize = !hasSections && !isReorderable;
-	const { listBoxProps } = useListBox({
+	const { listBoxProps, labelProps } = useListBox({
 		...props,
 		id,
-		"aria-label": props["aria-label"] || label?.toString(),
 		isVirtualized: !isReorderable,
 		shouldUseVirtualFocus: shouldUseVirtualFocus ?? false,
 		escapeKeyBehavior: onEscape ? "none" : "clearSelection",
 		onSelectionChange: wrappedOnSelectionChange
 	}, listState, listRef);
 	const { isFocused, focusProps } = useFocus$1();
-	const isListFocused = isFocusWithin ?? (shouldUseVirtualFocus || listState.selectionManager.isFocused);
+	const { isFocused: isListElementFocused, focusProps: listElementFocusProps } = useFocus$1();
+	const { isFocused: isSelectAllFocused, focusProps: selectAllFocusProps } = useFocus$1();
+	const isListFocused = !isSelectAllFocused && (isFocusWithin ?? (shouldUseVirtualFocus || listState.selectionManager.isFocused));
 	const scrollRef = useRef(null);
 	const rowVirtualizer = useVirtualizer({
 		count: shouldVirtualize ? itemsArray.length : 0,
@@ -457,14 +580,21 @@ const ListBox = forwardRef(function ListBox(props, ref) {
 		rowVirtualizer,
 		listGap
 	]);
+	const lastFocusedKeyRef = useRef(null);
 	useLayoutEffect(() => {
 		const focusedKey = listState.selectionManager.focusedKey;
+		const hasFocusMoved = focusedKey !== lastFocusedKeyRef.current;
+		lastFocusedKeyRef.current = focusedKey;
 		if (focusedKey == null) return;
-		if (lastFocusSourceRef.current !== "keyboard") return;
 		const scrollElement = scrollRef.current;
 		if (!scrollElement) return;
 		const itemElement = scrollElement.querySelector(`[data-key="${CSS.escape(String(focusedKey))}"]`);
-		if (!itemElement) return;
+		if (!itemElement) {
+			const index_1 = shouldVirtualize ? itemsArray.findIndex((item) => item.key === focusedKey) : -1;
+			if (index_1 !== -1 && hasFocusMoved) rowVirtualizer.scrollToIndex(index_1, { align: "auto" });
+			return;
+		}
+		if (lastFocusSourceRef.current !== "keyboard") return;
 		const scrollTop = scrollElement.scrollTop;
 		const viewportBottom = scrollTop + scrollElement.clientHeight;
 		const itemRect = itemElement.getBoundingClientRect();
@@ -475,33 +605,41 @@ const ListBox = forwardRef(function ListBox(props, ref) {
 			block: "nearest",
 			behavior: "auto"
 		});
-	}, [listState.selectionManager.focusedKey, itemsArray]);
-	const mergedListBoxProps = mergeProps$1(listBoxProps, keyboardProps, { "aria-invalid": isInvalid || void 0 });
+	}, [
+		listState.selectionManager.focusedKey,
+		itemsArray,
+		shouldVirtualize,
+		rowVirtualizer
+	]);
+	const mergedListBoxProps = mergeProps$1(listBoxProps, keyboardProps, listElementFocusProps, { "aria-invalid": isInvalid || void 0 });
 	if (isDisabled) delete mergedListBoxProps.tabIndex;
+	const isEmpty = listState.collection.size === 0;
+	const emptyLabelId = `${listBoxProps.id}-empty`;
+	if (isEmpty) mergedListBoxProps["aria-describedby"] = [mergedListBoxProps["aria-describedby"], emptyLabelId].filter(Boolean).join(" ");
 	const orderedKeys = useMemo(() => {
 		if (!isReorderable) return [];
 		return itemsArray.filter((i_0) => i_0.type === "item").map((i_1) => String(i_1.key));
 	}, [isReorderable, itemsArray]);
+	const isCardFocused = isFocused || isEmpty && isListElementFocused;
 	const mods = useMemo(() => ({
 		...getValidationMods({
 			isInvalid,
 			isValid
 		}),
 		disabled: isDisabled,
-		focused: isFocused,
-		header: !!header || showSelectAll && props.selectionMode === "multiple",
+		focused: isCardFocused,
+		header: !!header || hasSelectAll,
 		footer: !!footer,
-		selectAll: showSelectAll && props.selectionMode === "multiple",
+		selectAll: hasSelectAll,
 		...externalMods
 	}), [
 		isInvalid,
 		isValid,
 		isDisabled,
-		isFocused,
+		isCardFocused,
 		header,
 		footer,
-		showSelectAll,
-		props.selectionMode,
+		hasSelectAll,
 		externalMods
 	]);
 	const listGapTokens = listGap == null ? void 0 : { "$list-gap": `${listGap}px` };
@@ -517,29 +655,30 @@ const ListBox = forwardRef(function ListBox(props, ref) {
 				"data-size": size,
 				children: header
 			}) : /* @__PURE__ */ jsx("div", { role: "presentation" }),
-			showSelectAll && props.selectionMode === "multiple" ? /* @__PURE__ */ jsx(SelectAllOption, {
+			hasSelectAll ? /* @__PURE__ */ jsx(SelectAllOption, {
 				label: selectAllLabel,
-				state: listState,
-				lastFocusSourceRef,
-				isSelected: selectAllState.isSelected,
-				isIndeterminate: selectAllState.isIndeterminate,
+				isSelected: isAllSelected,
+				isIndeterminate: isSomeSelected,
 				isDisabled,
 				isCheckable,
 				size,
 				allValueProps,
+				focusProps: selectAllFocusProps,
 				onClick: handleSelectAllClick
 			}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", { role: "presentation" }), /* @__PURE__ */ jsx("div", { role: "presentation" })] }),
-			/* @__PURE__ */ jsx(ListBoxScrollElement, {
+			/* @__PURE__ */ jsxs(ListBoxScrollElement, {
 				ref: scrollRef,
 				mods,
 				...focusProps,
-				children: listState.collection.size === 0 ? /* @__PURE__ */ jsx(_Item, {
+				children: [isEmpty && /* @__PURE__ */ jsx(_Item, {
+					id: emptyLabelId,
+					"aria-hidden": "true",
 					preset: "t4",
 					color: "#dark-03",
 					size,
 					padding: "(.5x - 1bw)",
 					children: emptyLabel
-				}) : isReorderable ? /* @__PURE__ */ jsx(DraggableListBox, {
+				}), isReorderable && !isEmpty ? /* @__PURE__ */ jsx(DraggableListBox, {
 					state: listState,
 					listRef,
 					orderedKeys,
@@ -554,9 +693,9 @@ const ListBox = forwardRef(function ListBox(props, ref) {
 						mods: { sections: false },
 						"data-shape": shape,
 						"data-input-type": "listbox",
-						children: itemsArray.filter((item) => item.type === "item").map((item_0) => /* @__PURE__ */ jsx(Option, {
+						children: itemsArray.filter((item_0) => item_0.type === "item").map((item_1) => /* @__PURE__ */ jsx(Option, {
 							size,
-							item: item_0,
+							item: item_1,
 							state: listState,
 							styles: optionStyles,
 							highlight: optionHighlight,
@@ -570,7 +709,7 @@ const ListBox = forwardRef(function ListBox(props, ref) {
 							dragState,
 							dropState,
 							onClick: onOptionClick
-						}, item_0.key))
+						}, item_1.key))
 					})
 				}) : /* @__PURE__ */ jsx(ListElement, {
 					qa: qa || "ListBox",
@@ -579,7 +718,10 @@ const ListBox = forwardRef(function ListBox(props, ref) {
 					styles: listStyles,
 					tokens: listGapTokens,
 					"aria-disabled": isDisabled || void 0,
-					mods: { sections: hasSections },
+					mods: {
+						sections: hasSections,
+						empty: isEmpty
+					},
 					"data-shape": shape,
 					"data-input-type": "listbox",
 					style: shouldVirtualize ? {
@@ -587,10 +729,10 @@ const ListBox = forwardRef(function ListBox(props, ref) {
 						height: `${rowVirtualizer.getTotalSize()}px`
 					} : void 0,
 					children: shouldVirtualize ? rowVirtualizer.getVirtualItems().map((virtualItem) => {
-						const item_1 = itemsArray[virtualItem.index];
+						const item_2 = itemsArray[virtualItem.index];
 						return /* @__PURE__ */ jsx(Option, {
 							size,
-							item: item_1,
+							item: item_2,
 							state: listState,
 							styles: optionStyles,
 							highlight: optionHighlight,
@@ -611,17 +753,14 @@ const ListBox = forwardRef(function ListBox(props, ref) {
 							virtualIndex: virtualItem.index,
 							lastFocusSourceRef,
 							onClick: onOptionClick
-						}, item_1.key);
+						}, item_2.key);
 					}) : (() => {
 						const renderedItems = [];
 						let isFirstSection = true;
-						for (const item_2 of listState.collection) if (item_2.type === "section") {
-							if (!isFirstSection) renderedItems.push(/* @__PURE__ */ jsx(StyledDivider, {
-								role: "separator",
-								"aria-orientation": "horizontal"
-							}, `divider-${String(item_2.key)}`));
+						for (const item_3 of listState.collection) if (item_3.type === "section") {
+							if (!isFirstSection) renderedItems.push(/* @__PURE__ */ jsx(StyledDivider, { role: "presentation" }, `divider-${String(item_3.key)}`));
 							renderedItems.push(/* @__PURE__ */ jsx(ListBoxSection, {
-								item: item_2,
+								item: item_3,
 								state: listState,
 								optionStyles,
 								optionHighlight,
@@ -636,11 +775,11 @@ const ListBox = forwardRef(function ListBox(props, ref) {
 								size,
 								lastFocusSourceRef,
 								onClick: onOptionClick
-							}, item_2.key));
+							}, item_3.key));
 							isFirstSection = false;
 						} else renderedItems.push(/* @__PURE__ */ jsx(Option, {
 							size,
-							item: item_2,
+							item: item_3,
 							state: listState,
 							styles: optionStyles,
 							highlight: optionHighlight,
@@ -652,10 +791,10 @@ const ListBox = forwardRef(function ListBox(props, ref) {
 							isCheckable,
 							lastFocusSourceRef,
 							onClick: onOptionClick
-						}, item_2.key));
+						}, item_3.key));
 						return renderedItems;
 					})()
-				})
+				})]
 			}),
 			footer ? /* @__PURE__ */ jsx(StyledFooter, {
 				styles: footerStyles,
@@ -663,7 +802,10 @@ const ListBox = forwardRef(function ListBox(props, ref) {
 				children: footer
 			}) : /* @__PURE__ */ jsx("div", { role: "presentation" })
 		]
-	}), ref, props);
+	}), ref, {
+		...props,
+		labelProps: mergeProps(labelProps, props.labelProps)
+	});
 });
 function Option({ size = "medium", item, state, styles, highlight, isParentDisabled, isInvalid, isValid, focusOnHover = false, isListFocused = false, isCheckable, onClick: onOptionClick, virtualStyle, virtualRef, virtualIndex, lastFocusSourceRef, dragState, dropState }) {
 	const localRef = useRef(null);
@@ -712,18 +854,26 @@ function Option({ size = "medium", item, state, styles, highlight, isParentDisab
 		isValid,
 		filteredItemProps.icon
 	]);
-	const handleOptionExtras = (e) => {
+	const runOptionExtras = (target) => {
 		if (lastFocusSourceRef) lastFocusSourceRef.current = "mouse";
 		state.selectionManager.setFocusedKey(item.key);
 		if (!onOptionClick) return;
 		if (isCheckable && state.selectionManager.selectionMode === "multiple") {
-			const clickTarget = e.target;
+			const clickTarget = target;
 			const checkboxElement = localRef.current?.querySelector("[data-element=\"CheckboxWrapper\"]");
 			if (checkboxElement && (checkboxElement === clickTarget || checkboxElement.contains(clickTarget))) return;
 		}
 		onOptionClick(item.key);
 	};
-	const { onKeyDown, onKeyUp, tabIndex, "aria-selected": ariaSelected, "aria-disabled": ariaDisabled, role, ...filteredOptionProps } = filterSelectionItemProps(optionProps);
+	const handleOptionExtras = (e) => runOptionExtras(e.target);
+	const originPress = useOptionOriginPress({
+		key: item.key,
+		ref: localRef,
+		manager: state.selectionManager,
+		isDisabled,
+		onSettle: runOptionExtras
+	});
+	const { onKeyDown, onKeyUp, onPointerUp, tabIndex, "aria-selected": ariaSelected, "aria-disabled": ariaDisabled, role, ...filteredOptionProps } = filterSelectionItemProps(optionProps);
 	const theme = getValidationTheme("default", {
 		isInvalid,
 		isValid
@@ -735,6 +885,8 @@ function Option({ size = "medium", item, state, styles, highlight, isParentDisab
 			onClick: handleOptionExtras,
 			onKeyDown,
 			onKeyUp,
+			onPointerDown: originPress.onPointerDown,
+			onPointerUp: originPress.wrapPointerUp(onPointerUp),
 			tabIndex,
 			"aria-selected": ariaSelected,
 			"aria-disabled": ariaDisabled,