@cube-dev/ui-kit 0.182.0 → 0.184.0

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.182.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.184.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";
@@ -18,6 +18,7 @@ import { GripVerticalIcon } from "../../../icons/GripVerticalIcon.js";
 import { allowEscapeToPropagate } from "../../../utils/react/escapePropagation.js";
 import { createMockDragState } from "../../shared/DraggableCollection.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 { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -323,9 +324,9 @@ const ListBox = forwardRef(function ListBox(props, ref) {
 				externalSelectionHandler(props.selectionMode === "multiple" ? [] : null);
 			} else if (props.selectionMode === "multiple") externalSelectionHandler(Array.from(keys));
 			else {
-				const key = Array.from(keys)[0];
-				lastSelectedKeyRef.current = key ?? null;
-				externalSelectionHandler(key);
+				const key_0 = Array.from(keys)[0];
+				lastSelectedKeyRef.current = key_0 ?? null;
+				externalSelectionHandler(key_0);
 			}
 			else {
 				lastSelectedKeyRef.current = keys;
@@ -439,8 +440,8 @@ const ListBox = forwardRef(function ListBox(props, ref) {
 		getItemKey: (index) => {
 			return itemsArrayRef.current[index]?.key ?? index;
 		},
-		estimateSize: (index) => {
-			if (itemsArrayRef.current[index]?.props?.description) return SIZES.XL + 1;
+		estimateSize: (index_0) => {
+			if (itemsArrayRef.current[index_0]?.props?.description) return SIZES.XL + 1;
 			return SIZES[SIZE_NAME_TO_KEY[size]] + 1;
 		},
 		measureElement: (el) => {
@@ -477,7 +478,7 @@ const ListBox = forwardRef(function ListBox(props, ref) {
 	const mergedListBoxProps = mergeProps$1(listBoxProps, keyboardProps);
 	const orderedKeys = useMemo(() => {
 		if (!isReorderable) return [];
-		return itemsArray.filter((i) => i.type === "item").map((i) => String(i.key));
+		return itemsArray.filter((i_0) => i_0.type === "item").map((i_1) => String(i_1.key));
 	}, [isReorderable, itemsArray]);
 	const mods = useMemo(() => ({
 		...getValidationMods({
@@ -549,9 +550,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) => /* @__PURE__ */ jsx(Option, {
+						children: itemsArray.filter((item_0) => item_0.type === "item").map((item_1) => /* @__PURE__ */ jsx(Option, {
 							size,
-							item,
+							item: item_1,
 							state: listState,
 							styles: optionStyles,
 							highlight: optionHighlight,
@@ -564,7 +565,7 @@ const ListBox = forwardRef(function ListBox(props, ref) {
 							dragState,
 							dropState,
 							onClick: onOptionClick
-						}, item.key))
+						}, item_1.key))
 					})
 				}) : /* @__PURE__ */ jsx(ListElement, {
 					qa: qa || "ListBox",
@@ -580,10 +581,10 @@ const ListBox = forwardRef(function ListBox(props, ref) {
 						height: `${rowVirtualizer.getTotalSize() + 3}px`
 					} : void 0,
 					children: shouldVirtualize ? rowVirtualizer.getVirtualItems().map((virtualItem) => {
-						const item = itemsArray[virtualItem.index];
+						const item_2 = itemsArray[virtualItem.index];
 						return /* @__PURE__ */ jsx(Option, {
 							size,
-							item,
+							item: item_2,
 							state: listState,
 							styles: optionStyles,
 							highlight: optionHighlight,
@@ -603,17 +604,17 @@ const ListBox = forwardRef(function ListBox(props, ref) {
 							virtualIndex: virtualItem.index,
 							lastFocusSourceRef,
 							onClick: onOptionClick
-						}, item.key);
+						}, item_2.key);
 					}) : (() => {
 						const renderedItems = [];
 						let isFirstSection = true;
-						for (const item of listState.collection) if (item.type === "section") {
+						for (const item_3 of listState.collection) if (item_3.type === "section") {
 							if (!isFirstSection) renderedItems.push(/* @__PURE__ */ jsx(StyledDivider, {
 								role: "separator",
 								"aria-orientation": "horizontal"
-							}, `divider-${String(item.key)}`));
+							}, `divider-${String(item_3.key)}`));
 							renderedItems.push(/* @__PURE__ */ jsx(ListBoxSection, {
-								item,
+								item: item_3,
 								state: listState,
 								optionStyles,
 								optionHighlight,
@@ -627,11 +628,11 @@ const ListBox = forwardRef(function ListBox(props, ref) {
 								size,
 								lastFocusSourceRef,
 								onClick: onOptionClick
-							}, item.key));
+							}, item_3.key));
 							isFirstSection = false;
 						} else renderedItems.push(/* @__PURE__ */ jsx(Option, {
 							size,
-							item,
+							item: item_3,
 							state: listState,
 							styles: optionStyles,
 							highlight: optionHighlight,
@@ -642,7 +643,7 @@ const ListBox = forwardRef(function ListBox(props, ref) {
 							isCheckable,
 							lastFocusSourceRef,
 							onClick: onOptionClick
-						}, item.key));
+						}, item_3.key));
 						return renderedItems;
 					})()
 				})
@@ -779,51 +780,135 @@ function Option({ size = "medium", item, state, styles, highlight, isParentDisab
 		})
 	] });
 }
-function ListBoxDropIndicator({ target, dropState }) {
+function ListBoxDropIndicator(t0) {
+	const $ = c(8);
+	const { target, dropState } = t0;
 	const ref = useRef(null);
-	const { dropIndicatorProps, isHidden, isDropTarget } = useDropIndicator({ target }, dropState, ref);
+	let t1;
+	if ($[0] !== target) {
+		t1 = { target };
+		$[0] = target;
+		$[1] = t1;
+	} else t1 = $[1];
+	const { dropIndicatorProps, isHidden, isDropTarget } = useDropIndicator(t1, dropState, ref);
 	if (isHidden) return null;
-	return /* @__PURE__ */ jsx(ListBoxDropIndicatorElement, {
-		ref,
-		role: "option",
-		...dropIndicatorProps,
-		mods: { "drop-target": isDropTarget },
-		children: /* @__PURE__ */ jsx("div", { "data-element": "Indicator" })
-	});
+	let t2;
+	if ($[2] !== isDropTarget) {
+		t2 = { "drop-target": isDropTarget };
+		$[2] = isDropTarget;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsx("div", { "data-element": "Indicator" });
+		$[4] = t3;
+	} else t3 = $[4];
+	let t4;
+	if ($[5] !== dropIndicatorProps || $[6] !== t2) {
+		t4 = /* @__PURE__ */ jsx(ListBoxDropIndicatorElement, {
+			ref,
+			role: "option",
+			...dropIndicatorProps,
+			mods: t2,
+			children: t3
+		});
+		$[5] = dropIndicatorProps;
+		$[6] = t2;
+		$[7] = t4;
+	} else t4 = $[7];
+	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 heading = item.rendered;
-	const { itemProps, headingProps, groupProps } = useListBoxSection({
-		heading,
-		"aria-label": item["aria-label"]
-	});
-	return /* @__PURE__ */ jsxs(SectionWrapperElement, {
-		...itemProps,
-		styles: sectionStyles,
-		children: [heading && /* @__PURE__ */ jsx(StyledSectionHeading, {
+	const t0 = item["aria-label"];
+	let t1;
+	if ($[0] !== heading || $[1] !== t0) {
+		t1 = {
+			heading,
+			"aria-label": t0
+		};
+		$[0] = heading;
+		$[1] = t0;
+		$[2] = t1;
+	} else t1 = $[2];
+	const { itemProps, headingProps, groupProps } = useListBoxSection(t1);
+	let t2;
+	if ($[3] !== heading || $[4] !== headingProps || $[5] !== headingStyles || $[6] !== props.size) {
+		t2 = heading && /* @__PURE__ */ jsx(StyledSectionHeading, {
 			...headingProps,
 			size: props.size,
 			styles: headingStyles,
 			children: heading
-		}), /* @__PURE__ */ jsx(SectionListElement, {
+		});
+		$[3] = heading;
+		$[4] = headingProps;
+		$[5] = headingStyles;
+		$[6] = props.size;
+		$[7] = t2;
+	} else t2 = $[7];
+	let t3;
+	if ($[8] !== item.childNodes || $[9] !== state) {
+		t3 = [...item.childNodes].filter((node) => state.collection.getItem(node.key));
+		$[8] = item.childNodes;
+		$[9] = state;
+		$[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) {
+		t4 = t3.map((node_0) => /* @__PURE__ */ jsx(Option, {
+			size: props.size,
+			item: node_0,
+			state,
+			styles: optionStyles,
+			highlight: optionHighlight,
+			isParentDisabled,
+			isInvalid,
+			isValid,
+			focusOnHover,
+			isCheckable,
+			lastFocusSourceRef,
+			onClick: onOptionClick
+		}, node_0.key));
+		$[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];
+	let t5;
+	if ($[24] !== groupProps || $[25] !== t4) {
+		t5 = /* @__PURE__ */ jsx(SectionListElement, {
 			...groupProps,
-			children: [...item.childNodes].filter((node) => state.collection.getItem(node.key)).map((node) => /* @__PURE__ */ jsx(Option, {
-				size: props.size,
-				item: node,
-				state,
-				styles: optionStyles,
-				highlight: optionHighlight,
-				isParentDisabled,
-				isInvalid,
-				isValid,
-				focusOnHover,
-				isCheckable,
-				lastFocusSourceRef,
-				onClick: onOptionClick
-			}, node.key))
-		})]
-	});
+			children: t4
+		});
+		$[24] = groupProps;
+		$[25] = t4;
+		$[26] = t5;
+	} else t5 = $[26];
+	let t6;
+	if ($[27] !== itemProps || $[28] !== sectionStyles || $[29] !== t2 || $[30] !== t5) {
+		t6 = /* @__PURE__ */ jsxs(SectionWrapperElement, {
+			...itemProps,
+			styles: sectionStyles,
+			children: [t2, t5]
+		});
+		$[27] = itemProps;
+		$[28] = sectionStyles;
+		$[29] = t2;
+		$[30] = t5;
+		$[31] = t6;
+	} else t6 = $[31];
+	return t6;
 }
 const ListBoxSectionComponent = Object.assign(Section, { displayName: "Section" });
 ListBox.Item = _CollectionItem;