@cube-dev/ui-kit 0.199.1 → 0.200.0

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useLayoutEffect as useLayoutEffect$1 } from "../../../utils/react/useLayoutEffect.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
@@ -454,7 +454,7 @@ const ComboBoxInput = forwardRef(function ComboBoxInput(t0, ref) {
 	return t5;
 });
 const ComboBox = forwardRef(function ComboBox(props, ref) {
-	const $ = c(282);
+	const $ = c(279);
 	let t0;
 	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
 		t0 = { valuePropsMapper: _temp2 };
@@ -1046,59 +1046,52 @@ const ComboBox = forwardRef(function ComboBox(props, ref) {
 		$[176] = t50;
 	} else t50 = $[176];
 	const activeDescendant = t50;
-	const t51 = isFocused ? 1 : "initial";
-	let t52;
-	if ($[177] !== t51) {
-		t52 = { zIndex: t51 };
-		$[177] = t51;
-		$[178] = t52;
-	} else t52 = $[178];
-	let t53;
-	if ($[179] !== prefix) {
-		t53 = prefix ? /* @__PURE__ */ jsx("div", {
+	let t51;
+	if ($[177] !== prefix) {
+		t51 = prefix ? /* @__PURE__ */ jsx("div", {
 			"data-element": "Prefix",
 			children: prefix
 		}) : null;
-		$[179] = prefix;
-		$[180] = t53;
-	} else t53 = $[180];
-	const t54 = qa || "ComboBox";
-	let t55;
-	if ($[181] !== focusProps || $[182] !== handleInputBlur) {
-		t55 = {
+		$[177] = prefix;
+		$[178] = t51;
+	} else t51 = $[178];
+	const t52 = qa || "ComboBox";
+	let t53;
+	if ($[179] !== focusProps || $[180] !== handleInputBlur) {
+		t53 = {
 			...focusProps,
 			onBlur: handleInputBlur
 		};
-		$[181] = focusProps;
-		$[182] = handleInputBlur;
-		$[183] = t55;
-	} else t55 = $[183];
-	let t56;
-	if ($[184] === Symbol.for("react.memo_cache_sentinel")) {
-		t56 = () => {
+		$[179] = focusProps;
+		$[180] = handleInputBlur;
+		$[181] = t53;
+	} else t53 = $[181];
+	let t54;
+	if ($[182] === Symbol.for("react.memo_cache_sentinel")) {
+		t54 = () => {
 			pressStartedOnInputRef.current = true;
 		};
-		$[184] = t56;
-	} else t56 = $[184];
-	const t57 = props["aria-label"];
-	const t58 = props["aria-labelledby"];
-	const t59 = props["aria-describedby"];
-	let t60;
-	if ($[185] !== t57 || $[186] !== t58 || $[187] !== t59) {
-		t60 = {
-			"aria-label": t57,
-			"aria-labelledby": t58,
-			"aria-describedby": t59
+		$[182] = t54;
+	} else t54 = $[182];
+	const t55 = props["aria-label"];
+	const t56 = props["aria-labelledby"];
+	const t57 = props["aria-describedby"];
+	let t58;
+	if ($[183] !== t55 || $[184] !== t56 || $[185] !== t57) {
+		t58 = {
+			"aria-label": t55,
+			"aria-labelledby": t56,
+			"aria-describedby": t57
 		};
+		$[183] = t55;
+		$[184] = t56;
 		$[185] = t57;
 		$[186] = t58;
-		$[187] = t59;
-		$[188] = t60;
-	} else t60 = $[188];
-	let t61;
-	if ($[189] !== activeDescendant || $[190] !== autoComplete || $[191] !== autoFocus || $[192] !== comboBoxId || $[193] !== effectiveInputValue || $[194] !== handleInputChange || $[195] !== handleInputClick || $[196] !== handleInputFocus || $[197] !== id || $[198] !== inputRef || $[199] !== inputStyles || $[200] !== isDisabled || $[201] !== isInvalid || $[202] !== isReadOnly || $[203] !== isRequired || $[204] !== keyboardProps || $[205] !== mods || $[206] !== placeholder || $[207] !== shouldShowPopover || $[208] !== size || $[209] !== t54 || $[210] !== t55 || $[211] !== t60) {
-		t61 = /* @__PURE__ */ jsx(ComboBoxInput, {
-			qa: t54,
+	} else t58 = $[186];
+	let t59;
+	if ($[187] !== activeDescendant || $[188] !== autoComplete || $[189] !== autoFocus || $[190] !== comboBoxId || $[191] !== effectiveInputValue || $[192] !== handleInputChange || $[193] !== handleInputClick || $[194] !== handleInputFocus || $[195] !== id || $[196] !== inputRef || $[197] !== inputStyles || $[198] !== isDisabled || $[199] !== isInvalid || $[200] !== isReadOnly || $[201] !== isRequired || $[202] !== keyboardProps || $[203] !== mods || $[204] !== placeholder || $[205] !== shouldShowPopover || $[206] !== size || $[207] !== t52 || $[208] !== t53 || $[209] !== t58) {
+		t59 = /* @__PURE__ */ jsx(ComboBoxInput, {
+			qa: t52,
 			inputRef,
 			id,
 			value: effectiveInputValue,
@@ -1112,54 +1105,54 @@ const ComboBox = forwardRef(function ComboBox(props, ref) {
 			mods,
 			inputStyles,
 			keyboardProps,
-			focusProps: t55,
+			focusProps: t53,
 			isListShown: shouldShowPopover,
 			comboBoxId,
 			activeDescendant,
 			onChange: handleInputChange,
 			onFocus: handleInputFocus,
-			onPointerDown: t56,
+			onPointerDown: t54,
 			onClick: handleInputClick,
-			ariaProps: t60,
+			ariaProps: t58,
 			isInvalid
 		});
-		$[189] = activeDescendant;
-		$[190] = autoComplete;
-		$[191] = autoFocus;
-		$[192] = comboBoxId;
-		$[193] = effectiveInputValue;
-		$[194] = handleInputChange;
-		$[195] = handleInputClick;
-		$[196] = handleInputFocus;
-		$[197] = id;
-		$[198] = inputRef;
-		$[199] = inputStyles;
-		$[200] = isDisabled;
-		$[201] = isInvalid;
-		$[202] = isReadOnly;
-		$[203] = isRequired;
-		$[204] = keyboardProps;
-		$[205] = mods;
-		$[206] = placeholder;
-		$[207] = shouldShowPopover;
-		$[208] = size;
-		$[209] = t54;
-		$[210] = t55;
-		$[211] = t60;
-		$[212] = t61;
-	} else t61 = $[212];
-	const t62 = suffixPosition === "before" ? suffix : null;
+		$[187] = activeDescendant;
+		$[188] = autoComplete;
+		$[189] = autoFocus;
+		$[190] = comboBoxId;
+		$[191] = effectiveInputValue;
+		$[192] = handleInputChange;
+		$[193] = handleInputClick;
+		$[194] = handleInputFocus;
+		$[195] = id;
+		$[196] = inputRef;
+		$[197] = inputStyles;
+		$[198] = isDisabled;
+		$[199] = isInvalid;
+		$[200] = isReadOnly;
+		$[201] = isRequired;
+		$[202] = keyboardProps;
+		$[203] = mods;
+		$[204] = placeholder;
+		$[205] = shouldShowPopover;
+		$[206] = size;
+		$[207] = t52;
+		$[208] = t53;
+		$[209] = t58;
+		$[210] = t59;
+	} else t59 = $[210];
+	const t60 = suffixPosition === "before" ? suffix : null;
+	let t61;
+	if ($[211] !== isLoading || $[212] !== validationIcon) {
+		t61 = isLoading ? /* @__PURE__ */ jsx(LoadingIcon, { "data-element": "InputIcon" }) : validationIcon;
+		$[211] = isLoading;
+		$[212] = validationIcon;
+		$[213] = t61;
+	} else t61 = $[213];
+	const t62 = suffixPosition === "after" ? suffix : null;
 	let t63;
-	if ($[213] !== isLoading || $[214] !== validationIcon) {
-		t63 = isLoading ? /* @__PURE__ */ jsx(LoadingIcon, { "data-element": "InputIcon" }) : validationIcon;
-		$[213] = isLoading;
-		$[214] = validationIcon;
-		$[215] = t63;
-	} else t63 = $[215];
-	const t64 = suffixPosition === "after" ? suffix : null;
-	let t65;
-	if ($[216] !== clearValue || $[217] !== hideTrigger || $[218] !== showClearButton || $[219] !== size || $[220] !== t) {
-		t65 = showClearButton && /* @__PURE__ */ jsx(_CollectionItem.Action, {
+	if ($[214] !== clearValue || $[215] !== hideTrigger || $[216] !== showClearButton || $[217] !== size || $[218] !== t) {
+		t63 = showClearButton && /* @__PURE__ */ jsx(_CollectionItem.Action, {
 			excludeFromTabOrder: true,
 			icon: /* @__PURE__ */ jsx(CloseIcon, {}),
 			size,
@@ -1169,16 +1162,16 @@ const ComboBox = forwardRef(function ComboBox(props, ref) {
 			"aria-label": t("comboBox.clearValue", "Clear value"),
 			onPress: clearValue
 		});
-		$[216] = clearValue;
-		$[217] = hideTrigger;
-		$[218] = showClearButton;
-		$[219] = size;
-		$[220] = t;
-		$[221] = t65;
-	} else t65 = $[221];
-	let t66;
-	if ($[222] !== hideTrigger || $[223] !== isDisabled || $[224] !== isLoading || $[225] !== shouldShowPopover || $[226] !== size || $[227] !== t || $[228] !== toggleList || $[229] !== triggerRef || $[230] !== triggerStyles) {
-		t66 = !hideTrigger ? /* @__PURE__ */ jsx(_CollectionItem.Action, {
+		$[214] = clearValue;
+		$[215] = hideTrigger;
+		$[216] = showClearButton;
+		$[217] = size;
+		$[218] = t;
+		$[219] = t63;
+	} else t63 = $[219];
+	let t64;
+	if ($[220] !== hideTrigger || $[221] !== isDisabled || $[222] !== isLoading || $[223] !== shouldShowPopover || $[224] !== size || $[225] !== t || $[226] !== toggleList || $[227] !== triggerRef || $[228] !== triggerStyles) {
+		t64 = !hideTrigger ? /* @__PURE__ */ jsx(_CollectionItem.Action, {
 			ref: triggerRef,
 			excludeFromTabOrder: true,
 			"data-popover-trigger": true,
@@ -1197,49 +1190,49 @@ const ComboBox = forwardRef(function ComboBox(props, ref) {
 			"aria-label": t("comboBox.showOptions", "Show options"),
 			onPress: toggleList
 		}) : null;
-		$[222] = hideTrigger;
-		$[223] = isDisabled;
-		$[224] = isLoading;
-		$[225] = shouldShowPopover;
-		$[226] = size;
-		$[227] = t;
-		$[228] = toggleList;
-		$[229] = triggerRef;
-		$[230] = triggerStyles;
-		$[231] = t66;
-	} else t66 = $[231];
-	let t67;
-	if ($[232] !== t62 || $[233] !== t63 || $[234] !== t64 || $[235] !== t65 || $[236] !== t66) {
-		t67 = /* @__PURE__ */ jsxs("div", {
+		$[220] = hideTrigger;
+		$[221] = isDisabled;
+		$[222] = isLoading;
+		$[223] = shouldShowPopover;
+		$[224] = size;
+		$[225] = t;
+		$[226] = toggleList;
+		$[227] = triggerRef;
+		$[228] = triggerStyles;
+		$[229] = t64;
+	} else t64 = $[229];
+	let t65;
+	if ($[230] !== t60 || $[231] !== t61 || $[232] !== t62 || $[233] !== t63 || $[234] !== t64) {
+		t65 = /* @__PURE__ */ jsxs("div", {
 			"data-element": "Suffix",
 			children: [
+				t60,
+				t61,
 				t62,
 				t63,
-				t64,
-				t65,
-				t66
+				t64
 			]
 		});
+		$[230] = t60;
+		$[231] = t61;
 		$[232] = t62;
 		$[233] = t63;
 		$[234] = t64;
 		$[235] = t65;
-		$[236] = t66;
-		$[237] = t67;
-	} else t67 = $[237];
-	const t68 = wrapperRef;
-	const t69 = props["aria-label"];
-	let t70;
-	if ($[238] !== setIsPopoverOpen) {
-		t70 = () => setIsPopoverOpen(false);
-		$[238] = setIsPopoverOpen;
-		$[239] = t70;
-	} else t70 = $[239];
-	let t71;
-	if ($[240] !== children || $[241] !== comboBoxWidth || $[242] !== compositeFocusProps || $[243] !== containerPadding || $[244] !== direction || $[245] !== effectiveSelectedKey || $[246] !== filterFn || $[247] !== handleSelectionChange || $[248] !== headingStyles || $[249] !== isDisabled || $[250] !== label || $[251] !== listBoxRef || $[252] !== listBoxStyles || $[253] !== listGap || $[254] !== optionStyles || $[255] !== overlayOffset || $[256] !== overlayStyles || $[257] !== popoverRef || $[258] !== props.disabledKeys || $[259] !== sectionStyles || $[260] !== shouldFlip || $[261] !== shouldShowPopover || $[262] !== size || $[263] !== sortedItems || $[264] !== t68 || $[265] !== t69 || $[266] !== t70) {
-		t71 = /* @__PURE__ */ jsx(ListBoxPopover, {
+	} else t65 = $[235];
+	const t66 = wrapperRef;
+	const t67 = props["aria-label"];
+	let t68;
+	if ($[236] !== setIsPopoverOpen) {
+		t68 = () => setIsPopoverOpen(false);
+		$[236] = setIsPopoverOpen;
+		$[237] = t68;
+	} else t68 = $[237];
+	let t69;
+	if ($[238] !== children || $[239] !== comboBoxWidth || $[240] !== compositeFocusProps || $[241] !== containerPadding || $[242] !== direction || $[243] !== effectiveSelectedKey || $[244] !== filterFn || $[245] !== handleSelectionChange || $[246] !== headingStyles || $[247] !== isDisabled || $[248] !== label || $[249] !== listBoxRef || $[250] !== listBoxStyles || $[251] !== listGap || $[252] !== optionStyles || $[253] !== overlayOffset || $[254] !== overlayStyles || $[255] !== popoverRef || $[256] !== props.disabledKeys || $[257] !== sectionStyles || $[258] !== shouldFlip || $[259] !== shouldShowPopover || $[260] !== size || $[261] !== sortedItems || $[262] !== t66 || $[263] !== t67 || $[264] !== t68) {
+		t69 = /* @__PURE__ */ jsx(ListBoxPopover, {
 			isOpen: shouldShowPopover,
-			triggerRef: t68,
+			triggerRef: t66,
 			popoverRef,
 			listBoxRef,
 			direction,
@@ -1261,81 +1254,79 @@ const ComboBox = forwardRef(function ComboBox(props, ref) {
 			items: sortedItems,
 			listStateRef,
 			label,
-			ariaLabel: t69,
+			ariaLabel: t67,
 			compositeFocusProps,
 			filter: filterFn,
 			size,
 			onSelectionChange: handleSelectionChange,
-			onClose: t70,
+			onClose: t68,
 			children
 		});
-		$[240] = children;
-		$[241] = comboBoxWidth;
-		$[242] = compositeFocusProps;
-		$[243] = containerPadding;
-		$[244] = direction;
-		$[245] = effectiveSelectedKey;
-		$[246] = filterFn;
-		$[247] = handleSelectionChange;
-		$[248] = headingStyles;
-		$[249] = isDisabled;
-		$[250] = label;
-		$[251] = listBoxRef;
-		$[252] = listBoxStyles;
-		$[253] = listGap;
-		$[254] = optionStyles;
-		$[255] = overlayOffset;
-		$[256] = overlayStyles;
-		$[257] = popoverRef;
-		$[258] = props.disabledKeys;
-		$[259] = sectionStyles;
-		$[260] = shouldFlip;
-		$[261] = shouldShowPopover;
-		$[262] = size;
-		$[263] = sortedItems;
+		$[238] = children;
+		$[239] = comboBoxWidth;
+		$[240] = compositeFocusProps;
+		$[241] = containerPadding;
+		$[242] = direction;
+		$[243] = effectiveSelectedKey;
+		$[244] = filterFn;
+		$[245] = handleSelectionChange;
+		$[246] = headingStyles;
+		$[247] = isDisabled;
+		$[248] = label;
+		$[249] = listBoxRef;
+		$[250] = listBoxStyles;
+		$[251] = listGap;
+		$[252] = optionStyles;
+		$[253] = overlayOffset;
+		$[254] = overlayStyles;
+		$[255] = popoverRef;
+		$[256] = props.disabledKeys;
+		$[257] = sectionStyles;
+		$[258] = shouldFlip;
+		$[259] = shouldShowPopover;
+		$[260] = size;
+		$[261] = sortedItems;
+		$[262] = t66;
+		$[263] = t67;
 		$[264] = t68;
 		$[265] = t69;
-		$[266] = t70;
-		$[267] = t71;
-	} else t71 = $[267];
-	let t72;
-	if ($[268] !== compositeFocusProps || $[269] !== mods || $[270] !== size || $[271] !== styles || $[272] !== t52 || $[273] !== t53 || $[274] !== t61 || $[275] !== t67 || $[276] !== t71 || $[277] !== wrapperRef) {
-		t72 = /* @__PURE__ */ jsxs(ComboBoxWrapperElement, {
+	} else t69 = $[265];
+	let t70;
+	if ($[266] !== compositeFocusProps || $[267] !== mods || $[268] !== size || $[269] !== styles || $[270] !== t51 || $[271] !== t59 || $[272] !== t65 || $[273] !== t69 || $[274] !== wrapperRef) {
+		t70 = /* @__PURE__ */ jsxs(ComboBoxWrapperElement, {
 			ref: wrapperRef,
 			mods,
 			styles,
-			style: t52,
 			"data-size": size,
 			...compositeFocusProps,
 			children: [
-				t53,
-				t61,
-				t67,
-				t71
+				t51,
+				t59,
+				t65,
+				t69
 			]
 		});
-		$[268] = compositeFocusProps;
-		$[269] = mods;
-		$[270] = size;
-		$[271] = styles;
-		$[272] = t52;
-		$[273] = t53;
-		$[274] = t61;
-		$[275] = t67;
-		$[276] = t71;
-		$[277] = wrapperRef;
-		$[278] = t72;
-	} else t72 = $[278];
-	const comboBoxField = t72;
-	let t73;
-	if ($[279] !== comboBoxField || $[280] !== props) {
+		$[266] = compositeFocusProps;
+		$[267] = mods;
+		$[268] = size;
+		$[269] = styles;
+		$[270] = t51;
+		$[271] = t59;
+		$[272] = t65;
+		$[273] = t69;
+		$[274] = wrapperRef;
+		$[275] = t70;
+	} else t70 = $[275];
+	const comboBoxField = t70;
+	let t71;
+	if ($[276] !== comboBoxField || $[277] !== props) {
 		const { children: _, ...propsWithoutChildren } = props;
-		t73 = wrapWithField(comboBoxField, propsWithoutChildren);
-		$[279] = comboBoxField;
-		$[280] = props;
-		$[281] = t73;
-	} else t73 = $[281];
-	return t73;
+		t71 = wrapWithField(comboBoxField, propsWithoutChildren);
+		$[276] = comboBoxField;
+		$[277] = props;
+		$[278] = t71;
+	} else t71 = $[278];
+	return t71;
 });
 ComboBox.Item = _CollectionItem;
 ComboBox.Section = Section;