@cube-dev/ui-kit 0.0.0-canary-8a359ff → 0.0.0-canary-90b6445

package/dist/components/fields/ListBox/ListBox.d.ts

@@ -23,6 +23,11 @@ interface CubeListBoxProps<T> extends AriaListBoxProps<T>, CollectionBase<T>, Fi
   sectionStyles?: Styles;
   /** Custom styles for section headings */
   headingStyles?: Styles;
+  /**
+   * Space between options, in pixels. Defaults to a hairline (`1bw`). It
+   * applies to flat, virtualized, sectioned and reorderable lists alike.
+   */
+  listGap?: number;
   /** Whether the ListBox is disabled */
   isDisabled?: boolean;
   /** The selected key in controlled single selection mode */
@@ -84,6 +89,14 @@ interface CubeListBoxProps<T> extends AriaListBoxProps<T>, CollectionBase<T>, Fi
    * Defaults to false for backward compatibility.
    */
   shouldUseVirtualFocus?: boolean;
+  /**
+   * For a list whose focused option is moved from an input outside it, as
+   * FilterListBox's search input does: whether focus is within that input's
+   * component. The focused option is marked only while it is `true`. Unset, the
+   * list's own focus decides, and with `shouldUseVirtualFocus` the focused
+   * option is always marked.
+   */
+  isFocusWithin?: boolean;
   /**
    * Callback fired when the user presses Escape key.
    * When provided, this prevents React Aria's default Escape behavior (selection reset).

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8a359ff | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-90b6445 | 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";
@@ -63,10 +63,11 @@ const ListBoxWrapperElement = tasty({
 const ListElement = tasty({
 	as: "ul",
 	styles: {
+		"$list-gap": "1bw",
 		display: "block",
-		padding: 0,
+		padding: ".5x bottom",
 		listStyle: "none",
-		boxSizing: "border-box",
+		boxSizing: "content-box",
 		margin: {
 			"": ".5x .5x 0 .5x",
 			"[data-shape=\"plain\"]": "0"
@@ -90,11 +91,11 @@ const ListBoxItem = tasty(_Item, {
 	styles: {
 		display: "grid",
 		margin: {
-			"": "1bw bottom",
-			":last-of-type": "0",
-			"draggable & :last-of-type": ".5x bottom",
+			"": "$list-gap bottom",
+			":not(:has(~ :not([data-drop-indicator])))": "0",
 			all: ".5x"
 		},
+		outlineOffset: "-1bw",
 		Icon: {
 			cursor: { draggable: "grab" },
 			opacity: {
@@ -121,7 +122,10 @@ const ListBoxDropIndicatorElement = tasty({
 			position: "absolute",
 			left: ".5x",
 			right: ".5x",
-			top: "-1px",
+			top: {
+				"": "(-1px - $list-gap / 2)",
+				":first-child | :last-child": "-1px"
+			},
 			height: "2px",
 			fill: "#primary",
 			radius: "round"
@@ -130,13 +134,7 @@ const ListBoxDropIndicatorElement = tasty({
 });
 const SectionWrapperElement = tasty({
 	as: "li",
-	styles: {
-		display: "block",
-		padding: {
-			"": 0,
-			":last-of-type": ".5x bottom"
-		}
-	}
+	styles: { display: "block" }
 });
 const SectionListElement = tasty({
 	qa: "ListBoxSectionList",
@@ -305,7 +303,7 @@ const ListBox = forwardRef(function ListBox(props, ref) {
 		return fieldProps;
 	} });
 	const { t } = useI18n();
-	let { qa, label, extra, id, labelStyles, isRequired, necessityIndicator, isInvalid, isValid, isDisabled, listStyles, optionStyles, optionHighlight, sectionStyles, headingStyles, listRef, message, description, styles, mods: externalMods, size = "medium", labelSuffix, selectedKey, defaultSelectedKey, selectedKeys, defaultSelectedKeys, shouldUseVirtualFocus, 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;
+	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;
@@ -432,6 +430,7 @@ const ListBox = forwardRef(function ListBox(props, ref) {
 		escapeKeyBehavior: onEscape ? "none" : "clearSelection"
 	}, listState, listRef);
 	const { isFocused, focusProps } = useFocus$1({ isDisabled });
+	const isListFocused = isFocusWithin ?? (shouldUseVirtualFocus || listState.selectionManager.isFocused);
 	const itemsArrayRef = useRef(itemsArray);
 	itemsArrayRef.current = itemsArray;
 	const scrollRef = useRef(null);
@@ -442,12 +441,10 @@ const ListBox = forwardRef(function ListBox(props, ref) {
 			return itemsArrayRef.current[index]?.key ?? index;
 		},
 		estimateSize: (index_0) => {
-			if (itemsArrayRef.current[index_0]?.props?.description) return SIZES.XL + 1;
-			return SIZES[SIZE_NAME_TO_KEY[size]] + 1;
-		},
-		measureElement: (el) => {
-			return el.offsetHeight + 1;
+			if (itemsArrayRef.current[index_0]?.props?.description) return SIZES.XL;
+			return SIZES[SIZE_NAME_TO_KEY[size]];
 		},
+		gap: listGap ?? 1,
 		overscan: 10
 	});
 	useEffect(() => {
@@ -455,7 +452,8 @@ const ListBox = forwardRef(function ListBox(props, ref) {
 	}, [
 		shouldVirtualize,
 		itemsArray,
-		rowVirtualizer
+		rowVirtualizer,
+		listGap
 	]);
 	useLayoutEffect(() => {
 		const focusedKey = listState.selectionManager.focusedKey;
@@ -477,6 +475,7 @@ const ListBox = forwardRef(function ListBox(props, ref) {
 		});
 	}, [listState.selectionManager.focusedKey, itemsArray]);
 	const mergedListBoxProps = mergeProps$1(listBoxProps, keyboardProps);
+	if (isDisabled) delete mergedListBoxProps.tabIndex;
 	const orderedKeys = useMemo(() => {
 		if (!isReorderable) return [];
 		return itemsArray.filter((i_0) => i_0.type === "item").map((i_1) => String(i_1.key));
@@ -503,6 +502,7 @@ const ListBox = forwardRef(function ListBox(props, ref) {
 		props.selectionMode,
 		externalMods
 	]);
+	const listGapTokens = listGap == null ? void 0 : { "$list-gap": `${listGap}px` };
 	return wrapWithField(/* @__PURE__ */ jsxs(ListBoxWrapperElement, {
 		ref,
 		qa: "ListBoxWrapper",
@@ -547,6 +547,7 @@ const ListBox = forwardRef(function ListBox(props, ref) {
 						...mergeProps$1(mergedListBoxProps, collectionProps),
 						ref: listRef,
 						styles: listStyles,
+						tokens: listGapTokens,
 						"aria-disabled": isDisabled || void 0,
 						mods: { sections: false },
 						"data-shape": shape,
@@ -561,6 +562,7 @@ const ListBox = forwardRef(function ListBox(props, ref) {
 							isInvalid,
 							isValid,
 							focusOnHover,
+							isListFocused,
 							isCheckable,
 							lastFocusSourceRef,
 							dragState,
@@ -573,13 +575,14 @@ const ListBox = forwardRef(function ListBox(props, ref) {
 					...mergedListBoxProps,
 					ref: listRef,
 					styles: listStyles,
+					tokens: listGapTokens,
 					"aria-disabled": isDisabled || void 0,
 					mods: { sections: hasSections },
 					"data-shape": shape,
 					"data-input-type": "listbox",
 					style: shouldVirtualize ? {
 						position: "relative",
-						height: `${rowVirtualizer.getTotalSize() + 3}px`
+						height: `${rowVirtualizer.getTotalSize()}px`
 					} : void 0,
 					children: shouldVirtualize ? rowVirtualizer.getVirtualItems().map((virtualItem) => {
 						const item_2 = itemsArray[virtualItem.index];
@@ -593,6 +596,7 @@ const ListBox = forwardRef(function ListBox(props, ref) {
 							isInvalid,
 							isValid,
 							focusOnHover,
+							isListFocused,
 							isCheckable,
 							virtualRef: rowVirtualizer.measureElement,
 							virtualStyle: {
@@ -625,6 +629,7 @@ const ListBox = forwardRef(function ListBox(props, ref) {
 								isInvalid,
 								isValid,
 								focusOnHover,
+								isListFocused,
 								isCheckable,
 								size,
 								lastFocusSourceRef,
@@ -641,6 +646,7 @@ const ListBox = forwardRef(function ListBox(props, ref) {
 							isInvalid,
 							isValid,
 							focusOnHover,
+							isListFocused,
 							isCheckable,
 							lastFocusSourceRef,
 							onClick: onOptionClick
@@ -657,12 +663,11 @@ const ListBox = forwardRef(function ListBox(props, ref) {
 		]
 	}), ref, props);
 });
-function Option({ size = "medium", item, state, styles, highlight, isParentDisabled, isInvalid, isValid, focusOnHover = false, isCheckable, onClick: onOptionClick, virtualStyle, virtualRef, virtualIndex, lastFocusSourceRef, dragState, dropState }) {
+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);
 	const combinedRef = useCombinedRefs(localRef, virtualRef);
 	const isDisabled = isParentDisabled || state.disabledKeys.has(item.key);
 	const isSelected = state.selectionManager.isSelected(item.key);
-	const isFocused = state.selectionManager.focusedKey === item.key;
 	const isDraggable = !!dragState && !!dropState;
 	const mockDragState = useMemo(() => createMockDragState(state.collection, state.selectionManager), [state.collection, state.selectionManager]);
 	const dragResult = useDraggableItem({ key: item.key }, dragState ?? mockDragState);
@@ -676,6 +681,7 @@ function Option({ size = "medium", item, state, styles, highlight, isParentDisab
 		shouldSelectOnPressUp: true,
 		shouldFocusOnHover: focusOnHover
 	}, state, combinedRef);
+	const isFocused = !isDisabled && isListFocused && state.selectionManager.focusedKey === item.key;
 	const filteredItemProps = filterCollectionItemProps(item.props);
 	const effectiveIcon = useMemo(() => {
 		if (isDraggable) {
@@ -794,7 +800,10 @@ function ListBoxDropIndicator(t0) {
 	if (isHidden) return null;
 	let t2;
 	if ($[2] !== isDropTarget) {
-		t2 = { "drop-target": isDropTarget };
+		t2 = {
+			"drop-indicator": true,
+			"drop-target": isDropTarget
+		};
 		$[2] = isDropTarget;
 		$[3] = t2;
 	} else t2 = $[3];
@@ -819,8 +828,8 @@ function ListBoxDropIndicator(t0) {
 	return t4;
 }
 function ListBoxSection(props) {
-	const $ = c(32);
-	const { item, state, optionStyles, optionHighlight, headingStyles, sectionStyles, isParentDisabled, isInvalid, isValid, focusOnHover, isCheckable, onClick: onOptionClick, lastFocusSourceRef } = props;
+	const $ = c(33);
+	const { item, state, optionStyles, optionHighlight, headingStyles, sectionStyles, isParentDisabled, isInvalid, isValid, focusOnHover, isListFocused, isCheckable, onClick: onOptionClick, lastFocusSourceRef } = props;
 	const heading = item.rendered;
 	const t0 = item["aria-label"];
 	let t1;
@@ -856,7 +865,7 @@ function ListBoxSection(props) {
 		$[10] = t3;
 	} else t3 = $[10];
 	let t4;
-	if ($[11] !== focusOnHover || $[12] !== isCheckable || $[13] !== isInvalid || $[14] !== isParentDisabled || $[15] !== isValid || $[16] !== lastFocusSourceRef || $[17] !== onOptionClick || $[18] !== optionHighlight || $[19] !== optionStyles || $[20] !== props.size || $[21] !== state || $[22] !== t3) {
+	if ($[11] !== focusOnHover || $[12] !== isCheckable || $[13] !== isInvalid || $[14] !== isListFocused || $[15] !== isParentDisabled || $[16] !== isValid || $[17] !== lastFocusSourceRef || $[18] !== onOptionClick || $[19] !== optionHighlight || $[20] !== optionStyles || $[21] !== props.size || $[22] !== state || $[23] !== t3) {
 		t4 = t3.map((node_0) => /* @__PURE__ */ jsx(Option, {
 			size: props.size,
 			item: node_0,
@@ -867,6 +876,7 @@ function ListBoxSection(props) {
 			isInvalid,
 			isValid,
 			focusOnHover,
+			isListFocused,
 			isCheckable,
 			lastFocusSourceRef,
 			onClick: onOptionClick
@@ -874,40 +884,41 @@ function ListBoxSection(props) {
 		$[11] = focusOnHover;
 		$[12] = isCheckable;
 		$[13] = isInvalid;
-		$[14] = isParentDisabled;
-		$[15] = isValid;
-		$[16] = lastFocusSourceRef;
-		$[17] = onOptionClick;
-		$[18] = optionHighlight;
-		$[19] = optionStyles;
-		$[20] = props.size;
-		$[21] = state;
-		$[22] = t3;
-		$[23] = t4;
-	} else t4 = $[23];
+		$[14] = isListFocused;
+		$[15] = isParentDisabled;
+		$[16] = isValid;
+		$[17] = lastFocusSourceRef;
+		$[18] = onOptionClick;
+		$[19] = optionHighlight;
+		$[20] = optionStyles;
+		$[21] = props.size;
+		$[22] = state;
+		$[23] = t3;
+		$[24] = t4;
+	} else t4 = $[24];
 	let t5;
-	if ($[24] !== groupProps || $[25] !== t4) {
+	if ($[25] !== groupProps || $[26] !== t4) {
 		t5 = /* @__PURE__ */ jsx(SectionListElement, {
 			...groupProps,
 			children: t4
 		});
-		$[24] = groupProps;
-		$[25] = t4;
-		$[26] = t5;
-	} else t5 = $[26];
+		$[25] = groupProps;
+		$[26] = t4;
+		$[27] = t5;
+	} else t5 = $[27];
 	let t6;
-	if ($[27] !== itemProps || $[28] !== sectionStyles || $[29] !== t2 || $[30] !== t5) {
+	if ($[28] !== itemProps || $[29] !== sectionStyles || $[30] !== t2 || $[31] !== t5) {
 		t6 = /* @__PURE__ */ jsxs(SectionWrapperElement, {
 			...itemProps,
 			styles: sectionStyles,
 			children: [t2, t5]
 		});
-		$[27] = itemProps;
-		$[28] = sectionStyles;
-		$[29] = t2;
-		$[30] = t5;
-		$[31] = t6;
-	} else t6 = $[31];
+		$[28] = itemProps;
+		$[29] = sectionStyles;
+		$[30] = t2;
+		$[31] = t5;
+		$[32] = t6;
+	} else t6 = $[32];
 	return t6;
 }
 const ListBoxSectionComponent = Object.assign(Section, { displayName: "Section" });