@cube-dev/ui-kit 0.0.0-canary-8e09ade → 0.0.0-canary-a5508da

package/dist/components/content/Placeholder/Placeholder.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8e09ade | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a5508da | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { CONTAINER_STYLES, filterBaseProps, keyframes, tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";

package/dist/components/content/PrismCode/PrismCode.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8e09ade | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a5508da | Cube Dev Team */
 import { RendererPrism, ensureYamlSqlExtensions } from "./prismSetup.js";
 import { CONTAINER_STYLES, tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";

package/dist/components/content/PrismCode/prismSetup.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8e09ade | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a5508da | Cube Dev Team */
 import { Prism as RendererPrism } from "prism-react-renderer";
 
 //#region src/components/content/PrismCode/prismSetup.tsx

package/dist/components/content/PrismDiffCode/PrismDiffCode.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8e09ade | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a5508da | Cube Dev Team */
 import { _PrismCode } from "../PrismCode/PrismCode.js";
 import { jsx } from "react/jsx-runtime";
 import { diffLines } from "diff";

package/dist/components/content/Result/Result.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8e09ade | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a5508da | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps } from "../../../utils/react/mergeProps.js";
 import { wrapNodeIfPlain } from "../../../utils/react/wrapNodeIfPlain.js";

package/dist/components/content/Skeleton/Skeleton.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8e09ade | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a5508da | Cube Dev Team */
 import { Space } from "../../layout/Space.js";
 import { Grid } from "../../layout/Grid.js";
 import { Flow } from "../../layout/Flow.js";

package/dist/components/content/Tag/Tag.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8e09ade | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a5508da | Cube Dev Team */
 import { _Item } from "../Item/Item.js";
 import { CloseIcon } from "../../../icons/CloseIcon.js";
 import { tasty } from "@tenphi/tasty";

package/dist/components/content/Text.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8e09ade | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a5508da | Cube Dev Team */
 import { extractStyles } from "../../utils/styles.js";
 import { useSlotProps } from "../../utils/react/Slots.js";
 import { BASE_STYLES, COLOR_STYLES, TEXT_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";

package/dist/components/content/TextItem/TextItem.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8e09ade | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a5508da | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { TEXT_PROP_MAP, _Text } from "../Text.js";
 import { highlightText } from "../highlightText.js";

package/dist/components/content/Title.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8e09ade | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a5508da | Cube Dev Team */
 import { extractStyles } from "../../utils/styles.js";
 import { useSlotProps } from "../../utils/react/Slots.js";
 import { TEXT_PROP_MAP } from "./Text.js";

package/dist/components/content/Tree/Tree.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8e09ade | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a5508da | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeRefs } from "../../../utils/react/useCombinedRefs.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";

package/dist/components/content/Tree/TreeNode.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8e09ade | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a5508da | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { mergeRefs } from "../../../utils/react/useCombinedRefs.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";

package/dist/components/content/Tree/styled.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8e09ade | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a5508da | Cube Dev Team */
 import { _Item } from "../Item/Item.js";
 import { Action } from "../../actions/Action/Action.js";
 import { tasty } from "@tenphi/tasty";

package/dist/components/content/Tree/tree-index.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8e09ade | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a5508da | Cube Dev Team */
 //#region src/components/content/Tree/tree-index.ts
 function buildTreeIndex(treeData) {
 	const byKey = /* @__PURE__ */ new Map();

package/dist/components/content/Tree/use-checkbox-tree.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8e09ade | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a5508da | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { useMemo, useState } from "react";
 

package/dist/components/content/Tree/use-load-data.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8e09ade | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a5508da | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { useRef, useState } from "react";
 

package/dist/components/content/highlightText.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8e09ade | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a5508da | Cube Dev Team */
 import { _Text } from "./Text.js";
 import { jsx } from "react/jsx-runtime";
 

package/dist/components/content/use-auto-tooltip.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8e09ade | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a5508da | Cube Dev Team */
 import { TooltipProvider } from "../overlays/Tooltip/TooltipProvider.js";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/fields/Checkbox/Checkbox.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8e09ade | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a5508da | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { _Text } from "../../content/Text.js";

package/dist/components/fields/Checkbox/CheckboxGroup.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8e09ade | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a5508da | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useProviderProps } from "../../../provider.js";

package/dist/components/fields/Checkbox/context.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8e09ade | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a5508da | Cube Dev Team */
 import { createContext } from "react";
 
 //#region src/components/fields/Checkbox/context.ts

package/dist/components/fields/ComboBox/ComboBox.js

@@ -1,10 +1,13 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8e09ade | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-a5508da | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useLayoutEffect as useLayoutEffect$1 } from "../../../utils/react/useLayoutEffect.js";
+import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { usePopoverSync } from "../../../utils/react/usePopoverSync.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { useFocus as useFocus$1 } from "../../../utils/react/interactions.js";
+import { DisplayTransition } from "../../helpers/DisplayTransition/DisplayTransition.js";
+import { Portal } from "../../portal/Portal.js";
 import { LoadingIcon } from "../../../icons/LoadingIcon.js";
 import { useProviderProps } from "../../../provider.js";
 import { _CollectionItem } from "../../CollectionItem.js";
@@ -14,16 +17,14 @@ import { generateRandomId } from "../../../utils/random.js";
 import { useFormProps } from "../../form/Form/Form.js";
 import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
 import { wrapWithField } from "../../form/wrapper.js";
+import { ListBox } from "../ListBox/ListBox.js";
 import { InvalidIcon } from "../../shared/InvalidIcon.js";
 import { ValidIcon } from "../../shared/ValidIcon.js";
 import { DEFAULT_INPUT_STYLES, INPUT_WRAPPER_STYLES } from "../TextInput/TextInputBase.js";
-import { ListBoxPopover } from "../ListBoxPopover/ListBoxPopover.js";
-import { useCompositeFocus } from "../ListBoxPopover/useCompositeFocus.js";
-import { filterCollectionNodes, getEdgeVisibleKey, getNextVisibleKey, markKeyboardFocus } from "../ListBoxPopover/listNavigation.js";
 import { BASE_STYLES, COLOR_STYLES, OUTER_STYLES, tasty } from "@tenphi/tasty";
 import React, { cloneElement, forwardRef, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { useFilter, useKeyboard } from "react-aria";
+import { useFilter, useKeyboard, useOverlay, useOverlayPosition } from "react-aria";
 import { Section, useListState } from "react-stately";
 
 //#region src/components/fields/ComboBox/ComboBox.tsx
@@ -35,6 +36,55 @@ const InputElement = tasty({
 	as: "input",
 	styles: DEFAULT_INPUT_STYLES
 });
+const ComboBoxOverlayWrapper = tasty({
+	qa: "ComboBoxOverlayWrapper",
+	styles: {
+		position: "absolute",
+		zIndex: 1e3
+	}
+});
+const ComboBoxOverlayElement = tasty({
+	qa: "ComboBoxOverlay",
+	styles: {
+		display: "grid",
+		gridRows: "1sf",
+		gridColumns: "1sf",
+		width: "$overlay-min-width max-content 50vw",
+		height: "initial max-content (50vh - 5x)",
+		overflow: "auto",
+		fill: "#surface",
+		radius: "1cr",
+		shadow: true,
+		padding: "0",
+		border: "#border",
+		hide: {
+			"": false,
+			hidden: true
+		},
+		boxSizing: "border-box",
+		transition: "translate $transition ease-out, scale $transition ease-out, theme $transition ease-out",
+		translate: {
+			"": "0 0",
+			"open & [data-placement=\"top\"]": "0 0",
+			"!open & [data-placement=\"top\"]": "0 1x",
+			"open & ([data-placement=\"bottom\"] | ![data-placement])": "0 0",
+			"!open & ([data-placement=\"bottom\"] | ![data-placement])": "0 -1x"
+		},
+		transformOrigin: {
+			"": "top center",
+			"[data-placement=\"top\"]": "bottom center"
+		},
+		scale: {
+			"": "1 1",
+			"!open": "1 .9"
+		},
+		opacity: {
+			"": 1,
+			"!open": .001
+		},
+		"$overlay-min-width": "min 30x"
+	}
+});
 const PROP_STYLES = [
 	...BASE_STYLES,
 	...OUTER_STYLES,
@@ -74,7 +124,18 @@ function useComboBoxFiltering({ effectiveInputValue, filter }) {
 		filterFn: useCallback((nodes) => {
 			const term = effectiveInputValue.trim();
 			if (!isFilterActive || !term) return nodes;
-			return filterCollectionNodes(nodes, term, textFilterFn);
+			return [...nodes].map((node) => {
+				if (node.type === "section" && node.childNodes) {
+					const filteredChildren = [...node.childNodes].filter((child) => textFilterFn(child.textValue || "", term));
+					if (filteredChildren.length === 0) return null;
+					return {
+						...node,
+						childNodes: filteredChildren,
+						hasChildNodes: true
+					};
+				}
+				return textFilterFn(node.textValue || "", term) ? node : null;
+			}).filter(Boolean);
 		}, [
 			isFilterActive,
 			effectiveInputValue,
@@ -84,6 +145,42 @@ function useComboBoxFiltering({ effectiveInputValue, filter }) {
 		setIsFilterActive
 	};
 }
+function useCompositeFocus({ wrapperRef, popoverRef, onFocus, onBlur, isDisabled }) {
+	const wasInsideRef = useRef(false);
+	const rafRef = useRef(null);
+	const checkFocus = useCallback(() => {
+		if (isDisabled) return;
+		const activeElement = document.activeElement;
+		const isInside = (wrapperRef.current?.contains(activeElement) ?? false) || (popoverRef.current?.contains(activeElement) ?? false);
+		if (isInside !== wasInsideRef.current) {
+			wasInsideRef.current = isInside;
+			if (isInside) onFocus?.();
+			else onBlur?.();
+		}
+	}, [
+		wrapperRef,
+		popoverRef,
+		onFocus,
+		onBlur,
+		isDisabled
+	]);
+	const handleFocusOrBlur = useCallback((e) => {
+		if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);
+		rafRef.current = requestAnimationFrame(() => {
+			rafRef.current = null;
+			checkFocus();
+		});
+	}, [checkFocus]);
+	useEffect(() => {
+		return () => {
+			if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);
+		};
+	}, []);
+	return { compositeFocusProps: {
+		onFocus: handleFocusOrBlur,
+		onBlur: handleFocusOrBlur
+	} };
+}
 function useComboBoxKeyboard({ isPopoverOpen, listStateRef, hasResults, allowsCustomValue, effectiveInputValue, isClearable, onSelectionChange, onClearValue, onOpenPopover, onClosePopover, inputRef, setIsFilterActive, onKeyDown }) {
 	const { keyboardProps } = useKeyboard({ onKeyDown: (e) => {
 		onKeyDown?.(e);
@@ -96,10 +193,29 @@ function useComboBoxKeyboard({ isPopoverOpen, listStateRef, hasResults, allowsCu
 			}
 			const listState = listStateRef.current;
 			if (!listState) return;
-			const nextKey = getNextVisibleKey(listState, e.key === "ArrowDown" ? 1 : -1);
+			const { selectionManager, collection, disabledKeys } = listState;
+			const collectVisibleKeys = (nodes, out) => {
+				for (const node of nodes) if (node.type === "item") {
+					if (!disabledKeys?.has(node.key)) out.push(node.key);
+				} else if (node.childNodes) collectVisibleKeys(node.childNodes, out);
+			};
+			const visibleKeys = [];
+			collectVisibleKeys(collection, visibleKeys);
+			if (visibleKeys.length === 0) return;
+			const isArrowDown = e.key === "ArrowDown";
+			const currentKey = selectionManager.focusedKey;
+			let nextKey = null;
+			if (currentKey == null) nextKey = isArrowDown ? visibleKeys[0] : visibleKeys[visibleKeys.length - 1];
+			else {
+				const currentIndex = visibleKeys.indexOf(currentKey);
+				if (currentIndex !== -1) {
+					const newIndex = currentIndex + (isArrowDown ? 1 : -1);
+					if (newIndex >= 0 && newIndex < visibleKeys.length) nextKey = visibleKeys[newIndex];
+				} else nextKey = isArrowDown ? visibleKeys[0] : visibleKeys[visibleKeys.length - 1];
+			}
 			if (nextKey != null) {
-				markKeyboardFocus(listState);
-				listState.selectionManager.setFocusedKey(nextKey);
+				if (listState.lastFocusSourceRef) listState.lastFocusSourceRef.current = "keyboard";
+				selectionManager.setFocusedKey(nextKey);
 			}
 		} else if (e.key === "Enter") {
 			if (isPopoverOpen) {
@@ -145,11 +261,18 @@ function useComboBoxKeyboard({ isPopoverOpen, listStateRef, hasResults, allowsCu
 				e.preventDefault();
 				const listState = listStateRef.current;
 				if (!listState) return;
-				const targetKey = getEdgeVisibleKey(listState, e.key === "Home" ? "first" : "last");
-				if (targetKey != null) {
-					markKeyboardFocus(listState);
-					listState.selectionManager.setFocusedKey(targetKey);
-				}
+				const { selectionManager, collection, disabledKeys } = listState;
+				const collectVisibleKeys = (nodes, out) => {
+					for (const node of nodes) if (node.type === "item") {
+						if (!disabledKeys?.has(node.key)) out.push(node.key);
+					} else if (node.childNodes) collectVisibleKeys(node.childNodes, out);
+				};
+				const visibleKeys = [];
+				collectVisibleKeys(collection, visibleKeys);
+				if (visibleKeys.length === 0) return;
+				const targetKey = e.key === "Home" ? visibleKeys[0] : visibleKeys[visibleKeys.length - 1];
+				if (listState.lastFocusSourceRef) listState.lastFocusSourceRef.current = "keyboard";
+				selectionManager.setFocusedKey(targetKey);
 			}
 		}
 	} });
@@ -183,6 +306,79 @@ const ComboBoxInput = forwardRef(function ComboBoxInput({ qa, inputRef, id, valu
 		"aria-activedescendant": isPopoverOpen && hasResults && listStateRef.current?.selectionManager.focusedKey != null ? `ListBoxItem-${listStateRef.current?.selectionManager.focusedKey}` : void 0
 	});
 });
+function ComboBoxOverlay({ isOpen, triggerRef, popoverRef, listBoxRef, direction, shouldFlip, overlayOffset, containerPadding, comboBoxWidth, comboBoxId, overlayStyles, listBoxStyles, optionStyles, sectionStyles, headingStyles, effectiveSelectedKey, isDisabled, disabledKeys, items, children, listStateRef, onSelectionChange, onClose, label, ariaLabel, compositeFocusProps, filter, size = "medium" }) {
+	const { overlayProps: overlayPositionProps, placement } = useOverlayPosition({
+		targetRef: triggerRef,
+		overlayRef: popoverRef,
+		placement: `${direction} start`,
+		shouldFlip,
+		isOpen,
+		offset: overlayOffset,
+		containerPadding
+	});
+	const { overlayProps: overlayBehaviorProps } = useOverlay({
+		onClose,
+		shouldCloseOnBlur: true,
+		isOpen,
+		isDismissable: true,
+		shouldCloseOnInteractOutside: (el) => {
+			const menuTriggerEl = el.closest("[data-popover-trigger]");
+			if (!menuTriggerEl) {
+				if (el.closest("[data-popover-keep]")) return false;
+				if (el.closest("[data-popover-dismiss]")) {
+					setTimeout(onClose, 0);
+					return false;
+				}
+				return true;
+			}
+			if (menuTriggerEl === triggerRef?.current) return true;
+			return false;
+		}
+	}, popoverRef);
+	const placementDirection = placement?.split(" ")[0] || direction;
+	return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(DisplayTransition, {
+		isShown: isOpen,
+		children: ({ phase, isShown, ref: transitionRef }) => /* @__PURE__ */ jsx(ComboBoxOverlayWrapper, {
+			...mergeProps$1(overlayPositionProps, overlayBehaviorProps, compositeFocusProps),
+			ref: popoverRef,
+			style: overlayPositionProps.style,
+			children: /* @__PURE__ */ jsx(ComboBoxOverlayElement, {
+				ref: transitionRef,
+				"data-placement": placementDirection,
+				"data-phase": phase,
+				mods: {
+					open: isShown,
+					hidden: phase === "unmounted"
+				},
+				styles: overlayStyles,
+				style: { "--overlay-min-width": comboBoxWidth ? `${comboBoxWidth}px` : void 0 },
+				children: /* @__PURE__ */ jsx(ListBox, {
+					ref: listBoxRef,
+					focusOnHover: true,
+					disableSelectionToggle: true,
+					id: `ComboBoxListBox-${comboBoxId}`,
+					"aria-label": ariaLabel || (typeof label === "string" ? label : "Options"),
+					selectedKey: effectiveSelectedKey,
+					selectionMode: "single",
+					isDisabled,
+					disabledKeys,
+					shouldUseVirtualFocus: true,
+					items,
+					filter,
+					styles: listBoxStyles,
+					optionStyles,
+					sectionStyles,
+					headingStyles,
+					stateRef: listStateRef,
+					size: "medium",
+					shape: "popover",
+					onSelectionChange,
+					children
+				})
+			})
+		})
+	}) });
+}
 const ComboBox = forwardRef(function ComboBox(props, ref) {
 	props = useProviderProps(props);
 	props = useFormProps(props);
@@ -645,7 +841,7 @@ const ComboBox = forwardRef(function ComboBox(props, ref) {
 					}) : null
 				]
 			}),
-			/* @__PURE__ */ jsx(ListBoxPopover, {
+			/* @__PURE__ */ jsx(ComboBoxOverlay, {
 				isOpen: shouldShowPopover,
 				triggerRef: wrapperRef,
 				popoverRef,
@@ -655,13 +851,13 @@ const ComboBox = forwardRef(function ComboBox(props, ref) {
 				overlayOffset,
 				containerPadding,
 				comboBoxWidth,
-				listBoxId: `ComboBoxListBox-${comboBoxId}`,
+				comboBoxId,
 				overlayStyles,
 				listBoxStyles,
 				optionStyles,
 				sectionStyles,
 				headingStyles,
-				selectedKey: effectiveSelectedKey,
+				effectiveSelectedKey,
 				isDisabled,
 				disabledKeys: props.disabledKeys,
 				items: sortedItems,