@cube-dev/ui-kit 0.182.0 → 0.184.0

package/dist/components/fields/Select/Select.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 { forwardRefWithGenerics } from "../../../utils/react/forwardRefWithGenerics.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
@@ -27,6 +27,7 @@ import { getValidationIcon } from "../../form/validation/ValidationIndicator.js"
 import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
 import { wrapWithField } from "../../form/wrapper.js";
 import { TriggerActions } from "../TriggerActions.js";
+import { c } from "react-compiler-runtime";
 import { BASE_STYLES, COLOR_STYLES, OUTER_STYLES, tasty } from "@tenphi/tasty";
 import React, { useEffect, useMemo, useRef } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -129,7 +130,7 @@ function Select(props, ref) {
 			onSelectionChange: onChange
 		})
 	});
-	let { qa, label, extra, icon, rightIcon, labelStyles, isRequired, necessityIndicator, isInvalid, isValid, prefix, isDisabled = props.isLoading || false, autoFocus, inputProps, triggerRef, popoverRef, listBoxRef, isLoading, loadingIndicator, overlayOffset = 8, inputStyles, triggerStyles, optionStyles, listBoxStyles, overlayStyles, suffix, actions, message, triggerDescription, descriptionPlacement, hotkeys, direction = "bottom", shouldFlip = true, containerPadding = 8, placeholder, tooltip, size = "medium", shape, styles, type = "outline", theme = "default", labelSuffix, suffixPosition = "before", isClearable, clearLabel, onOpenChange, form, ...otherProps } = props;
+	let { qa, label, extra, icon, rightIcon, labelStyles, isRequired, necessityIndicator, isInvalid, isValid, prefix, isDisabled = props.isLoading || false, autoFocus, inputProps, triggerRef, popoverRef, listBoxRef, isLoading, loadingIndicator, overlayOffset = 8, inputStyles, triggerStyles, optionStyles, listBoxStyles, overlayStyles, suffix, actions, message, triggerDescription, descriptionPlacement, hotkeys, direction = "bottom", targetRef, placement: placementProp, shouldFlip = true, containerPadding = 8, placeholder, tooltip, size = "medium", shape, styles, type = "outline", theme = "default", labelSuffix, suffixPosition = "before", isClearable, clearLabel, onOpenChange, form, ...otherProps } = props;
 	const { t } = useI18n();
 	let state = useSelectState(props);
 	const selectId = useMemo(() => generateRandomId(), []);
@@ -161,10 +162,10 @@ function Select(props, ref) {
 	]);
 	let { labelProps, triggerProps, valueProps, menuProps } = useSelect(props, state, triggerRef);
 	let { overlayProps, placement } = useOverlayPosition({
-		targetRef: triggerRef,
+		targetRef: targetRef ?? triggerRef,
 		overlayRef: popoverRef,
 		scrollRef: listBoxRef,
-		placement: `${direction} end`,
+		placement: placementProp ?? `${direction} end`,
 		shouldFlip,
 		isOpen: state.isOpen,
 		onClose: state.close,
@@ -296,21 +297,86 @@ function Select(props, ref) {
 				isDisabled
 			})
 		]
-	}), ref, mergeProps$1({ ...props }, { labelProps }));
+	}), ref, mergeProps$1({
+		...props,
+		tooltip: void 0
+	}, { labelProps }));
 }
-function ListBoxPopup({ state, popoverRef, listBoxRef, listBoxStyles, overlayStyles, optionStyles, overlayProps: parentOverlayProps, shouldUseVirtualFocus = false, placement, minWidth, size = "small", triggerRef, isDisabled, ...otherProps }) {
+function ListBoxPopup(t0) {
+	const $ = c(47);
+	let isDisabled;
+	let listBoxRef;
+	let listBoxStyles;
+	let minWidth;
+	let optionStyles;
+	let otherProps;
+	let overlayStyles;
+	let parentOverlayProps;
+	let placement;
+	let popoverRef;
+	let state;
+	let t1;
+	let t2;
+	let triggerRef;
+	if ($[0] !== t0) {
+		({state, popoverRef, listBoxRef, listBoxStyles, overlayStyles, optionStyles, overlayProps: parentOverlayProps, shouldUseVirtualFocus: t1, placement, minWidth, size: t2, triggerRef, isDisabled, ...otherProps} = t0);
+		$[0] = t0;
+		$[1] = isDisabled;
+		$[2] = listBoxRef;
+		$[3] = listBoxStyles;
+		$[4] = minWidth;
+		$[5] = optionStyles;
+		$[6] = otherProps;
+		$[7] = overlayStyles;
+		$[8] = parentOverlayProps;
+		$[9] = placement;
+		$[10] = popoverRef;
+		$[11] = state;
+		$[12] = t1;
+		$[13] = t2;
+		$[14] = triggerRef;
+	} else {
+		isDisabled = $[1];
+		listBoxRef = $[2];
+		listBoxStyles = $[3];
+		minWidth = $[4];
+		optionStyles = $[5];
+		otherProps = $[6];
+		overlayStyles = $[7];
+		parentOverlayProps = $[8];
+		placement = $[9];
+		popoverRef = $[10];
+		state = $[11];
+		t1 = $[12];
+		t2 = $[13];
+		triggerRef = $[14];
+	}
+	const shouldUseVirtualFocus = t1 === void 0 ? false : t1;
+	const size = t2 === void 0 ? "small" : t2;
 	const listItemSize = size === "small" ? "medium" : size;
-	let { listBoxProps } = useListBox({
-		autoFocus: state.focusStrategy || true,
-		shouldUseVirtualFocus,
-		...otherProps
-	}, state, listBoxRef);
-	let { overlayProps: rawOverlayProps } = useOverlay({
-		onClose: () => state.close(),
-		shouldCloseOnBlur: true,
-		isOpen: state.isOpen,
-		isDismissable: true,
-		shouldCloseOnInteractOutside: (el) => {
+	const t3 = state.focusStrategy || true;
+	let t4;
+	if ($[15] !== otherProps || $[16] !== shouldUseVirtualFocus || $[17] !== t3) {
+		t4 = {
+			autoFocus: t3,
+			shouldUseVirtualFocus,
+			...otherProps
+		};
+		$[15] = otherProps;
+		$[16] = shouldUseVirtualFocus;
+		$[17] = t3;
+		$[18] = t4;
+	} else t4 = $[18];
+	const { listBoxProps } = useListBox(t4, state, listBoxRef);
+	let t5;
+	if ($[19] !== state) {
+		t5 = () => state.close();
+		$[19] = state;
+		$[20] = t5;
+	} else t5 = $[20];
+	let t6;
+	if ($[21] !== state || $[22] !== triggerRef) {
+		t6 = (el) => {
 			if (isOwnActionsPress(el, triggerRef?.current)) return false;
 			const menuTriggerEl = el.closest("[data-popover-trigger]");
 			if (!menuTriggerEl) {
@@ -323,115 +389,256 @@ function ListBoxPopup({ state, popoverRef, listBoxRef, listBoxStyles, overlaySty
 			}
 			if (menuTriggerEl === triggerRef?.current) return true;
 			return false;
-		}
-	}, popoverRef);
+		};
+		$[21] = state;
+		$[22] = triggerRef;
+		$[23] = t6;
+	} else t6 = $[23];
+	let t7;
+	if ($[24] !== state.isOpen || $[25] !== t5 || $[26] !== t6) {
+		t7 = {
+			onClose: t5,
+			shouldCloseOnBlur: true,
+			isOpen: state.isOpen,
+			isDismissable: true,
+			shouldCloseOnInteractOutside: t6
+		};
+		$[24] = state.isOpen;
+		$[25] = t5;
+		$[26] = t6;
+		$[27] = t7;
+	} else t7 = $[27];
+	const { overlayProps: rawOverlayProps } = useOverlay(t7, popoverRef);
 	const overlayProps = useOverlayEscapeGuard(rawOverlayProps, state.isOpen);
-	const placementDirection = placement?.split(" ")[0] || "bottom";
-	return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(DisplayTransition, {
-		isShown: state.isOpen && !isDisabled,
-		children: ({ phase, isShown, ref: transitionRef }) => /* @__PURE__ */ jsx(SelectOverlayWrapper, {
-			...overlayProps,
-			...parentOverlayProps,
-			ref: popoverRef,
-			style: parentOverlayProps?.style,
-			children: /* @__PURE__ */ jsx(OverlayElement, {
-				ref: transitionRef,
-				"data-placement": placementDirection,
-				"data-phase": phase,
-				mods: { open: isShown },
-				styles: overlayStyles,
-				style: { "--overlay-min-width": minWidth ? `${minWidth}px` : "initial" },
-				children: /* @__PURE__ */ jsxs(FocusScope, {
-					autoFocus: true,
-					restoreFocus: true,
-					children: [
-						/* @__PURE__ */ jsx(DismissButton, { onDismiss: () => state.close() }),
-						(() => {
-							const renderedItems = [];
-							let isFirstSection = true;
-							for (const item of state.collection) if (item.type === "section") {
-								if (!isFirstSection) renderedItems.push(/* @__PURE__ */ jsx(StyledDivider, {
-									as: "li",
-									role: "separator",
-									"aria-orientation": "horizontal"
-								}, `divider-${String(item.key)}`));
-								renderedItems.push(/* @__PURE__ */ jsx(SelectSection, {
+	let t8;
+	if ($[28] !== placement) {
+		t8 = placement?.split(" ")[0] || "bottom";
+		$[28] = placement;
+		$[29] = t8;
+	} else t8 = $[29];
+	const placementDirection = t8;
+	const t9 = state.isOpen && !isDisabled;
+	let t10;
+	if ($[30] !== listBoxProps || $[31] !== listBoxRef || $[32] !== listBoxStyles || $[33] !== listItemSize || $[34] !== minWidth || $[35] !== optionStyles || $[36] !== overlayProps || $[37] !== overlayStyles || $[38] !== parentOverlayProps || $[39] !== placementDirection || $[40] !== popoverRef || $[41] !== shouldUseVirtualFocus || $[42] !== state) {
+		t10 = (t11) => {
+			const { phase, isShown, ref: transitionRef } = t11;
+			return /* @__PURE__ */ jsx(SelectOverlayWrapper, {
+				...overlayProps,
+				...parentOverlayProps,
+				ref: popoverRef,
+				style: parentOverlayProps?.style,
+				children: /* @__PURE__ */ jsx(OverlayElement, {
+					ref: transitionRef,
+					"data-placement": placementDirection,
+					"data-phase": phase,
+					mods: { open: isShown },
+					styles: overlayStyles,
+					style: { "--overlay-min-width": minWidth ? `${minWidth}px` : "initial" },
+					children: /* @__PURE__ */ jsxs(FocusScope, {
+						autoFocus: true,
+						restoreFocus: true,
+						children: [
+							/* @__PURE__ */ jsx(DismissButton, { onDismiss: () => state.close() }),
+							(() => {
+								const renderedItems = [];
+								let isFirstSection = true;
+								for (const item of state.collection) if (item.type === "section") {
+									if (!isFirstSection) renderedItems.push(/* @__PURE__ */ jsx(StyledDivider, {
+										as: "li",
+										role: "separator",
+										"aria-orientation": "horizontal"
+									}, `divider-${String(item.key)}`));
+									renderedItems.push(/* @__PURE__ */ jsx(SelectSection, {
+										item,
+										state,
+										optionStyles,
+										sectionStyles: void 0,
+										shouldUseVirtualFocus,
+										size: listItemSize
+									}, item.key));
+									isFirstSection = false;
+								} else renderedItems.push(/* @__PURE__ */ jsx(Option, {
 									item,
 									state,
-									optionStyles,
-									sectionStyles: void 0,
+									styles: optionStyles,
 									shouldUseVirtualFocus,
 									size: listItemSize
 								}, item.key));
-								isFirstSection = false;
-							} else renderedItems.push(/* @__PURE__ */ jsx(Option, {
-								item,
-								state,
-								styles: optionStyles,
-								shouldUseVirtualFocus,
-								size: listItemSize
-							}, item.key));
-							return /* @__PURE__ */ jsx(ListBoxElement, {
-								styles: listBoxStyles,
-								...listBoxProps,
-								ref: listBoxRef,
-								children: renderedItems
-							});
-						})(),
-						/* @__PURE__ */ jsx(DismissButton, { onDismiss: () => state.close() })
-					]
+								return /* @__PURE__ */ jsx(ListBoxElement, {
+									styles: listBoxStyles,
+									...listBoxProps,
+									ref: listBoxRef,
+									children: renderedItems
+								});
+							})(),
+							/* @__PURE__ */ jsx(DismissButton, { onDismiss: () => state.close() })
+						]
+					})
 				})
-			})
-		})
-	}) });
+			});
+		};
+		$[30] = listBoxProps;
+		$[31] = listBoxRef;
+		$[32] = listBoxStyles;
+		$[33] = listItemSize;
+		$[34] = minWidth;
+		$[35] = optionStyles;
+		$[36] = overlayProps;
+		$[37] = overlayStyles;
+		$[38] = parentOverlayProps;
+		$[39] = placementDirection;
+		$[40] = popoverRef;
+		$[41] = shouldUseVirtualFocus;
+		$[42] = state;
+		$[43] = t10;
+	} else t10 = $[43];
+	let t11;
+	if ($[44] !== t10 || $[45] !== t9) {
+		t11 = /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(DisplayTransition, {
+			isShown: t9,
+			children: t10
+		}) });
+		$[44] = t10;
+		$[45] = t9;
+		$[46] = t11;
+	} else t11 = $[46];
+	return t11;
 }
-function Option({ item, state, styles, shouldUseVirtualFocus, size }) {
-	let ref = useRef(null);
-	let isDisabled = state.disabledKeys.has(item.key);
-	let isSelected = state.selectionManager.isSelected(item.key);
-	let isVirtualFocused = state.selectionManager.focusedKey === item.key;
-	let { optionProps, isPressed, labelProps, descriptionProps } = useOption({
-		key: item.key,
-		isDisabled,
-		isSelected,
-		shouldSelectOnPressUp: true,
-		shouldFocusOnHover: true,
-		shouldUseVirtualFocus
-	}, state, ref);
-	let { isFocused, focusProps } = useFocus$1({ isDisabled });
-	const filteredItemProps = filterCollectionItemProps(item.props);
-	return /* @__PURE__ */ jsx(OptionItem, {
-		...mergeProps$1(optionProps, focusProps, filteredItemProps),
-		ref,
-		mods: {
+function Option(t0) {
+	const $ = c(36);
+	const { item, state, styles, shouldUseVirtualFocus, size } = t0;
+	const ref = useRef(null);
+	let t1;
+	if ($[0] !== item.key || $[1] !== state.disabledKeys) {
+		t1 = state.disabledKeys.has(item.key);
+		$[0] = item.key;
+		$[1] = state.disabledKeys;
+		$[2] = t1;
+	} else t1 = $[2];
+	const isDisabled = t1;
+	let t2;
+	if ($[3] !== item.key || $[4] !== state.selectionManager) {
+		t2 = state.selectionManager.isSelected(item.key);
+		$[3] = item.key;
+		$[4] = state.selectionManager;
+		$[5] = t2;
+	} else t2 = $[5];
+	const isSelected = t2;
+	const isVirtualFocused = state.selectionManager.focusedKey === item.key;
+	let t3;
+	if ($[6] !== isDisabled || $[7] !== isSelected || $[8] !== item.key || $[9] !== shouldUseVirtualFocus) {
+		t3 = {
+			key: item.key,
+			isDisabled,
+			isSelected,
+			shouldSelectOnPressUp: true,
+			shouldFocusOnHover: true,
+			shouldUseVirtualFocus
+		};
+		$[6] = isDisabled;
+		$[7] = isSelected;
+		$[8] = item.key;
+		$[9] = shouldUseVirtualFocus;
+		$[10] = t3;
+	} else t3 = $[10];
+	const { optionProps, isPressed, labelProps, descriptionProps } = useOption(t3, state, ref);
+	let t4;
+	if ($[11] !== isDisabled) {
+		t4 = { isDisabled };
+		$[11] = isDisabled;
+		$[12] = t4;
+	} else t4 = $[12];
+	const { isFocused, focusProps } = useFocus$1(t4);
+	let T0;
+	let filteredItemProps;
+	let t5;
+	if ($[13] !== focusProps || $[14] !== item.props || $[15] !== optionProps) {
+		filteredItemProps = filterCollectionItemProps(item.props);
+		T0 = OptionItem;
+		t5 = mergeProps$1(optionProps, focusProps, filteredItemProps);
+		$[13] = focusProps;
+		$[14] = item.props;
+		$[15] = optionProps;
+		$[16] = T0;
+		$[17] = filteredItemProps;
+		$[18] = t5;
+	} else {
+		T0 = $[16];
+		filteredItemProps = $[17];
+		t5 = $[18];
+	}
+	const t6 = shouldUseVirtualFocus ? isVirtualFocused : isFocused;
+	let t7;
+	if ($[19] !== isDisabled || $[20] !== isPressed || $[21] !== isSelected || $[22] !== t6) {
+		t7 = {
 			listboxitem: true,
 			selected: isSelected,
-			focused: shouldUseVirtualFocus ? isVirtualFocused : isFocused,
+			focused: t6,
 			disabled: isDisabled,
 			pressed: isPressed
-		},
-		"data-size": size,
-		styles: {
-			...styles,
-			...filteredItemProps.styles
-		},
-		labelProps,
-		descriptionProps,
-		defaultTooltipPlacement: "right",
-		children: item.rendered
-	});
+		};
+		$[19] = isDisabled;
+		$[20] = isPressed;
+		$[21] = isSelected;
+		$[22] = t6;
+		$[23] = t7;
+	} else t7 = $[23];
+	const t8 = styles;
+	const t9 = filteredItemProps.styles;
+	let t10;
+	if ($[24] !== t8 || $[25] !== t9) {
+		t10 = {
+			...t8,
+			...t9
+		};
+		$[24] = t8;
+		$[25] = t9;
+		$[26] = t10;
+	} else t10 = $[26];
+	let t11;
+	if ($[27] !== T0 || $[28] !== descriptionProps || $[29] !== item.rendered || $[30] !== labelProps || $[31] !== size || $[32] !== t10 || $[33] !== t5 || $[34] !== t7) {
+		t11 = /* @__PURE__ */ jsx(T0, {
+			...t5,
+			ref,
+			mods: t7,
+			"data-size": size,
+			styles: t10,
+			labelProps,
+			descriptionProps,
+			defaultTooltipPlacement: "right",
+			children: item.rendered
+		});
+		$[27] = T0;
+		$[28] = descriptionProps;
+		$[29] = item.rendered;
+		$[30] = labelProps;
+		$[31] = size;
+		$[32] = t10;
+		$[33] = t5;
+		$[34] = t7;
+		$[35] = t11;
+	} else t11 = $[35];
+	return t11;
 }
 function SelectSection(props) {
+	const $ = c(26);
 	const { item, state, optionStyles, headingStyles, sectionStyles, shouldUseVirtualFocus, size } = props;
 	const heading = item.rendered;
-	const { itemProps, headingProps, groupProps } = useListBoxSection({
-		heading,
-		"aria-label": item["aria-label"]
-	});
-	return /* @__PURE__ */ jsxs(StyledSection, {
-		...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] !== size) {
+		t2 = heading && /* @__PURE__ */ jsx(StyledSectionHeading, {
 			...headingProps,
 			size,
 			styles: {
@@ -439,18 +646,66 @@ function SelectSection(props) {
 				"$inline-compensation": "0px"
 			},
 			children: heading
-		}), /* @__PURE__ */ jsx(ListBoxElement, {
+		});
+		$[3] = heading;
+		$[4] = headingProps;
+		$[5] = headingStyles;
+		$[6] = size;
+		$[7] = t2;
+	} else t2 = $[7];
+	let t3;
+	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = { section: true };
+		$[8] = t3;
+	} else t3 = $[8];
+	let t4;
+	if ($[9] !== item.childNodes || $[10] !== state) {
+		t4 = [...item.childNodes].filter((node) => state.collection.getItem(node.key));
+		$[9] = item.childNodes;
+		$[10] = state;
+		$[11] = t4;
+	} else t4 = $[11];
+	let t5;
+	if ($[12] !== optionStyles || $[13] !== shouldUseVirtualFocus || $[14] !== size || $[15] !== state || $[16] !== t4) {
+		t5 = t4.map((node_0) => /* @__PURE__ */ jsx(Option, {
+			item: node_0,
+			state,
+			styles: optionStyles,
+			shouldUseVirtualFocus,
+			size
+		}, node_0.key));
+		$[12] = optionStyles;
+		$[13] = shouldUseVirtualFocus;
+		$[14] = size;
+		$[15] = state;
+		$[16] = t4;
+		$[17] = t5;
+	} else t5 = $[17];
+	let t6;
+	if ($[18] !== groupProps || $[19] !== t5) {
+		t6 = /* @__PURE__ */ jsx(ListBoxElement, {
 			...groupProps,
-			mods: { section: true },
-			children: [...item.childNodes].filter((node) => state.collection.getItem(node.key)).map((node) => /* @__PURE__ */ jsx(Option, {
-				item: node,
-				state,
-				styles: optionStyles,
-				shouldUseVirtualFocus,
-				size
-			}, node.key))
-		})]
-	});
+			mods: t3,
+			children: t5
+		});
+		$[18] = groupProps;
+		$[19] = t5;
+		$[20] = t6;
+	} else t6 = $[20];
+	let t7;
+	if ($[21] !== itemProps || $[22] !== sectionStyles || $[23] !== t2 || $[24] !== t6) {
+		t7 = /* @__PURE__ */ jsxs(StyledSection, {
+			...itemProps,
+			styles: sectionStyles,
+			children: [t2, t6]
+		});
+		$[21] = itemProps;
+		$[22] = sectionStyles;
+		$[23] = t2;
+		$[24] = t6;
+		$[25] = t7;
+	} else t7 = $[25];
+	return t7;
 }
 const _Select = forwardRefWithGenerics(Select);
 _Select.cubeInputType = "Select";