@cube-dev/ui-kit 0.187.2 → 0.188.0

package/dist/components/fields/TagInput/TagInput.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.187.2 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.188.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";
@@ -125,7 +125,7 @@ function isComposingKey(e) {
 	return e.nativeEvent.isComposing || e.keyCode === 229;
 }
 function TagInput(props, ref) {
-	const $ = c(291);
+	const $ = c(296);
 	let t0;
 	if ($[0] !== props) {
 		t0 = castNullableArrayValue(props);
@@ -1250,7 +1250,17 @@ function TagInput(props, ref) {
 		$[208] = t43;
 	} else t43 = $[208];
 	const { labelProps, inputProps } = useTextField(t43, inputRef);
+	const ariaLabel = props["aria-label"];
+	const ariaLabelledby = props["aria-labelledby"];
 	const labelId = label ? labelProps.id : void 0;
+	let t44;
+	if ($[209] !== ariaLabelledby || $[210] !== labelId) {
+		t44 = [labelId, ariaLabelledby].filter(Boolean).join(" ") || void 0;
+		$[209] = ariaLabelledby;
+		$[210] = labelId;
+		$[211] = t44;
+	} else t44 = $[211];
+	const fieldLabelledby = t44;
 	const describedBy = [];
 	if (inputProps["aria-describedby"]) describedBy.push(inputProps["aria-describedby"]);
 	if (tags.length) describedBy.push(summaryId);
@@ -1271,25 +1281,25 @@ function TagInput(props, ref) {
 		"aria-controls": shouldShowPopover ? listBoxId : void 0,
 		"aria-activedescendant": shouldShowPopover && activeOptionKey != null ? getListBoxOptionId(listBoxId, activeOptionKey) : void 0
 	} : null);
-	let t44;
-	if ($[209] !== hasResults || $[210] !== inputRef || $[211] !== setIsFilterActive || $[212] !== setIsPopoverOpen || $[213] !== shouldShowPopover) {
-		t44 = () => {
+	let t45;
+	if ($[212] !== hasResults || $[213] !== inputRef || $[214] !== setIsFilterActive || $[215] !== setIsPopoverOpen || $[216] !== shouldShowPopover) {
+		t45 = () => {
 			const willOpen = !shouldShowPopover;
 			if (willOpen && !hasResults) setIsFilterActive(false);
 			setIsPopoverOpen(willOpen);
 			inputRef.current?.focus();
 		};
-		$[209] = hasResults;
-		$[210] = inputRef;
-		$[211] = setIsFilterActive;
-		$[212] = setIsPopoverOpen;
-		$[213] = shouldShowPopover;
-		$[214] = t44;
-	} else t44 = $[214];
-	const handleTriggerPress = useEvent(t44);
-	let t45;
-	if ($[215] !== handleTriggerPress || $[216] !== hasOptions || $[217] !== hideTrigger || $[218] !== isInteractive || $[219] !== labelId || $[220] !== shouldShowPopover || $[221] !== size || $[222] !== t || $[223] !== triggerId || $[224] !== triggerStyles) {
-		t45 = hasOptions && !hideTrigger ? /* @__PURE__ */ jsx(ItemAction, {
+		$[212] = hasResults;
+		$[213] = inputRef;
+		$[214] = setIsFilterActive;
+		$[215] = setIsPopoverOpen;
+		$[216] = shouldShowPopover;
+		$[217] = t45;
+	} else t45 = $[217];
+	const handleTriggerPress = useEvent(t45);
+	let t46;
+	if ($[218] !== ariaLabel || $[219] !== fieldLabelledby || $[220] !== handleTriggerPress || $[221] !== hasOptions || $[222] !== hideTrigger || $[223] !== isInteractive || $[224] !== shouldShowPopover || $[225] !== size || $[226] !== t || $[227] !== triggerId || $[228] !== triggerStyles) {
+		t46 = hasOptions && !hideTrigger ? /* @__PURE__ */ jsx(ItemAction, {
 			"data-popover-trigger": true,
 			id: triggerId,
 			qa: "TagInputTrigger",
@@ -1301,77 +1311,79 @@ function TagInput(props, ref) {
 			tabIndex: -1,
 			"aria-expanded": shouldShowPopover,
 			"aria-haspopup": "listbox",
-			"aria-label": t("tagInput.showOptions", "Show options"),
-			"aria-labelledby": labelId ? `${triggerId} ${labelId}` : void 0,
+			"aria-label": ariaLabel ? t("tagInput.showOptionsFor", "Show options, {{label}}", { label: ariaLabel }) : t("tagInput.showOptions", "Show options"),
+			"aria-labelledby": fieldLabelledby ? `${triggerId} ${fieldLabelledby}` : void 0,
 			onPress: handleTriggerPress
 		}) : null;
-		$[215] = handleTriggerPress;
-		$[216] = hasOptions;
-		$[217] = hideTrigger;
-		$[218] = isInteractive;
-		$[219] = labelId;
-		$[220] = shouldShowPopover;
-		$[221] = size;
-		$[222] = t;
-		$[223] = triggerId;
-		$[224] = triggerStyles;
-		$[225] = t45;
-	} else t45 = $[225];
-	const trigger = t45;
-	let t46;
-	if ($[226] !== inputRef || $[227] !== onClear || $[228] !== setDraft || $[229] !== setIsPopoverOpen || $[230] !== setTagError) {
-		t46 = () => {
+		$[218] = ariaLabel;
+		$[219] = fieldLabelledby;
+		$[220] = handleTriggerPress;
+		$[221] = hasOptions;
+		$[222] = hideTrigger;
+		$[223] = isInteractive;
+		$[224] = shouldShowPopover;
+		$[225] = size;
+		$[226] = t;
+		$[227] = triggerId;
+		$[228] = triggerStyles;
+		$[229] = t46;
+	} else t46 = $[229];
+	const trigger = t46;
+	let t47;
+	if ($[230] !== inputRef || $[231] !== onClear || $[232] !== setDraft || $[233] !== setIsPopoverOpen || $[234] !== setTagError) {
+		t47 = () => {
 			inputRef.current?.focus();
 			setDraft("");
 			setTagError(null);
 			setIsPopoverOpen(false);
 			onClear?.();
 		};
-		$[226] = inputRef;
-		$[227] = onClear;
-		$[228] = setDraft;
-		$[229] = setIsPopoverOpen;
-		$[230] = setTagError;
-		$[231] = t46;
-	} else t46 = $[231];
-	const clearText = useEvent(t46);
+		$[230] = inputRef;
+		$[231] = onClear;
+		$[232] = setDraft;
+		$[233] = setIsPopoverOpen;
+		$[234] = setTagError;
+		$[235] = t47;
+	} else t47 = $[235];
+	const clearText = useEvent(t47);
 	const canClear = !!isClearable && isInteractive && draft !== "";
-	let t47;
-	if ($[232] !== canClear || $[233] !== clearId || $[234] !== clearText || $[235] !== labelId || $[236] !== size || $[237] !== t) {
-		t47 = canClear ? /* @__PURE__ */ jsx(ItemAction, {
+	let t48;
+	if ($[236] !== ariaLabel || $[237] !== canClear || $[238] !== clearId || $[239] !== clearText || $[240] !== fieldLabelledby || $[241] !== size || $[242] !== t) {
+		t48 = canClear ? /* @__PURE__ */ jsx(ItemAction, {
 			id: clearId,
 			qa: "TagInputClearButton",
 			icon: /* @__PURE__ */ jsx(CloseIcon, {}),
 			size,
 			tabIndex: -1,
-			"aria-label": t("tagInput.clearText", "Clear text"),
-			"aria-labelledby": labelId ? `${clearId} ${labelId}` : void 0,
+			"aria-label": ariaLabel ? t("tagInput.clearTextFor", "Clear text, {{label}}", { label: ariaLabel }) : t("tagInput.clearText", "Clear text"),
+			"aria-labelledby": fieldLabelledby ? `${clearId} ${fieldLabelledby}` : void 0,
 			onPress: clearText
 		}) : null;
-		$[232] = canClear;
-		$[233] = clearId;
-		$[234] = clearText;
-		$[235] = labelId;
-		$[236] = size;
-		$[237] = t;
-		$[238] = t47;
-	} else t47 = $[238];
-	const clearButton = t47;
+		$[236] = ariaLabel;
+		$[237] = canClear;
+		$[238] = clearId;
+		$[239] = clearText;
+		$[240] = fieldLabelledby;
+		$[241] = size;
+		$[242] = t;
+		$[243] = t48;
+	} else t48 = $[243];
+	const clearButton = t48;
 	const hasActions = clearButton != null || trigger != null;
 	const T0 = TagInputElement;
-	const t48 = qa || "TagInput";
-	let t49;
-	if ($[239] !== clearButton || $[240] !== hasActions || $[241] !== trigger) {
-		t49 = hasActions ? /* @__PURE__ */ jsxs(Fragment$1, { children: [clearButton, trigger] }) : null;
-		$[239] = clearButton;
-		$[240] = hasActions;
-		$[241] = trigger;
-		$[242] = t49;
-	} else t49 = $[242];
+	const t49 = qa || "TagInput";
 	let t50;
-	if ($[243] !== autoFocus || $[244] !== effectiveIsInvalid || $[245] !== icon || $[246] !== inputRef || $[247] !== inputStyles || $[248] !== isDisabled || $[249] !== isLoading || $[250] !== isValid || $[251] !== mods || $[252] !== prefix || $[253] !== size || $[254] !== suffix || $[255] !== suffixPosition || $[256] !== t48 || $[257] !== t49 || $[258] !== tagInputProps || $[259] !== wrapperRef || $[260] !== wrapperStyles) {
-		t50 = /* @__PURE__ */ jsx(TextInputBase, {
-			qa: t48,
+	if ($[244] !== clearButton || $[245] !== hasActions || $[246] !== trigger) {
+		t50 = hasActions ? /* @__PURE__ */ jsxs(Fragment$1, { children: [clearButton, trigger] }) : null;
+		$[244] = clearButton;
+		$[245] = hasActions;
+		$[246] = trigger;
+		$[247] = t50;
+	} else t50 = $[247];
+	let t51;
+	if ($[248] !== autoFocus || $[249] !== effectiveIsInvalid || $[250] !== icon || $[251] !== inputRef || $[252] !== inputStyles || $[253] !== isDisabled || $[254] !== isLoading || $[255] !== isValid || $[256] !== mods || $[257] !== prefix || $[258] !== size || $[259] !== suffix || $[260] !== suffixPosition || $[261] !== t49 || $[262] !== t50 || $[263] !== tagInputProps || $[264] !== wrapperRef || $[265] !== wrapperStyles) {
+		t51 = /* @__PURE__ */ jsx(TextInputBase, {
+			qa: t49,
 			inputRef,
 			wrapperRef,
 			inputProps: tagInputProps,
@@ -1380,7 +1392,7 @@ function TagInput(props, ref) {
 			prefix,
 			suffix,
 			suffixPosition,
-			actions: t49,
+			actions: t50,
 			size,
 			autoFocus,
 			isDisabled,
@@ -1390,32 +1402,32 @@ function TagInput(props, ref) {
 			styles: wrapperStyles,
 			inputStyles
 		});
-		$[243] = autoFocus;
-		$[244] = effectiveIsInvalid;
-		$[245] = icon;
-		$[246] = inputRef;
-		$[247] = inputStyles;
-		$[248] = isDisabled;
-		$[249] = isLoading;
-		$[250] = isValid;
-		$[251] = mods;
-		$[252] = prefix;
-		$[253] = size;
-		$[254] = suffix;
-		$[255] = suffixPosition;
-		$[256] = t48;
-		$[257] = t49;
-		$[258] = tagInputProps;
-		$[259] = wrapperRef;
-		$[260] = wrapperStyles;
-		$[261] = t50;
-	} else t50 = $[261];
-	const t51 = tags.length ? /* @__PURE__ */ jsx(TagList, {
+		$[248] = autoFocus;
+		$[249] = effectiveIsInvalid;
+		$[250] = icon;
+		$[251] = inputRef;
+		$[252] = inputStyles;
+		$[253] = isDisabled;
+		$[254] = isLoading;
+		$[255] = isValid;
+		$[256] = mods;
+		$[257] = prefix;
+		$[258] = size;
+		$[259] = suffix;
+		$[260] = suffixPosition;
+		$[261] = t49;
+		$[262] = t50;
+		$[263] = tagInputProps;
+		$[264] = wrapperRef;
+		$[265] = wrapperStyles;
+		$[266] = t51;
+	} else t51 = $[266];
+	const t52 = tags.length ? /* @__PURE__ */ jsx(TagList, {
 		id: tagListId,
 		listRef: tagListRef,
 		inputRef,
-		"aria-label": t("tagInput.selectedValues", "Selected values"),
-		"aria-labelledby": labelId,
+		"aria-label": ariaLabel ? t("tagInput.selectedValuesFor", "Selected values, {{label}}", { label: ariaLabel }) : t("tagInput.selectedValues", "Selected values"),
+		"aria-labelledby": fieldLabelledby,
 		tags,
 		size: TAG_SIZES[size] ?? "xsmall",
 		isDisabled,
@@ -1424,50 +1436,50 @@ function TagInput(props, ref) {
 		tagStyles,
 		onRemove: removeValues
 	}) : null;
-	const t52 = true;
-	const t53 = tags.length ? t("tagInput.summary", "Selected: {{values}}.", { values: formatList(tags.map(_temp10)) }) : null;
-	let t54;
-	if ($[262] !== summaryId || $[263] !== t53) {
-		t54 = /* @__PURE__ */ jsx("span", {
-			hidden: t52,
+	const t53 = true;
+	const t54 = tags.length ? t("tagInput.summary", "Selected: {{values}}.", { values: formatList(tags.map(_temp10)) }) : null;
+	let t55;
+	if ($[267] !== summaryId || $[268] !== t54) {
+		t55 = /* @__PURE__ */ jsx("span", {
+			hidden: t53,
 			id: summaryId,
-			children: t53
+			children: t54
 		});
-		$[262] = summaryId;
-		$[263] = t53;
-		$[264] = t54;
-	} else t54 = $[264];
-	let t55;
-	if ($[265] !== hasBackspaceHint || $[266] !== t) {
-		t55 = hasBackspaceHint ? t("tagInput.backspaceHint", "Press Backspace to go to the selected values.") : null;
-		$[265] = hasBackspaceHint;
-		$[266] = t;
-		$[267] = t55;
-	} else t55 = $[267];
+		$[267] = summaryId;
+		$[268] = t54;
+		$[269] = t55;
+	} else t55 = $[269];
 	let t56;
-	if ($[268] !== hintId || $[269] !== t55) {
-		t56 = /* @__PURE__ */ jsx("span", {
+	if ($[270] !== hasBackspaceHint || $[271] !== t) {
+		t56 = hasBackspaceHint ? t("tagInput.backspaceHint", "Press Backspace to go to the selected values.") : null;
+		$[270] = hasBackspaceHint;
+		$[271] = t;
+		$[272] = t56;
+	} else t56 = $[272];
+	let t57;
+	if ($[273] !== hintId || $[274] !== t56) {
+		t57 = /* @__PURE__ */ jsx("span", {
 			hidden: true,
 			id: hintId,
-			children: t55
+			children: t56
 		});
-		$[268] = hintId;
-		$[269] = t55;
-		$[270] = t56;
-	} else t56 = $[270];
-	let t57;
-	if ($[271] !== announcement.id || $[272] !== announcement.text) {
-		t57 = /* @__PURE__ */ jsx(VisuallyHidden, {
+		$[273] = hintId;
+		$[274] = t56;
+		$[275] = t57;
+	} else t57 = $[275];
+	let t58;
+	if ($[276] !== announcement.id || $[277] !== announcement.text) {
+		t58 = /* @__PURE__ */ jsx(VisuallyHidden, {
 			role: "status",
 			"aria-live": "polite",
 			"aria-atomic": "true",
 			children: /* @__PURE__ */ jsx("span", { children: announcement.text }, announcement.id)
 		});
-		$[271] = announcement.id;
-		$[272] = announcement.text;
-		$[273] = t57;
-	} else t57 = $[273];
-	const t58 = hasOptions ? /* @__PURE__ */ jsx(ListBoxPopover, {
+		$[276] = announcement.id;
+		$[277] = announcement.text;
+		$[278] = t58;
+	} else t58 = $[278];
+	const t59 = hasOptions ? /* @__PURE__ */ jsx(ListBoxPopover, {
 		isOpen: shouldShowPopover,
 		triggerRef: wrapperRef,
 		popoverRef,
@@ -1493,8 +1505,8 @@ function TagInput(props, ref) {
 		isDisabled,
 		disabledKeys: optionDisabledKeys,
 		listStateRef,
-		label,
-		ariaLabel: props["aria-label"],
+		ariaLabel,
+		ariaLabelledby: fieldLabelledby,
 		compositeFocusProps,
 		filter: optionFilterFn,
 		size,
@@ -1502,9 +1514,9 @@ function TagInput(props, ref) {
 		onClose: () => setIsPopoverOpen(false),
 		children: popoverChildren
 	}) : null;
-	let t59;
-	if ($[274] !== T0 || $[275] !== className || $[276] !== compositeFocusProps || $[277] !== qaVal || $[278] !== rootRef || $[279] !== style || $[280] !== styles || $[281] !== t50 || $[282] !== t51 || $[283] !== t54 || $[284] !== t56 || $[285] !== t57 || $[286] !== t58) {
-		t59 = /* @__PURE__ */ jsxs(T0, {
+	let t60;
+	if ($[279] !== T0 || $[280] !== className || $[281] !== compositeFocusProps || $[282] !== qaVal || $[283] !== rootRef || $[284] !== style || $[285] !== styles || $[286] !== t51 || $[287] !== t52 || $[288] !== t55 || $[289] !== t57 || $[290] !== t58 || $[291] !== t59) {
+		t60 = /* @__PURE__ */ jsxs(T0, {
 			ref: rootRef,
 			className,
 			style,
@@ -1512,44 +1524,44 @@ function TagInput(props, ref) {
 			styles,
 			...compositeFocusProps,
 			children: [
-				t50,
 				t51,
-				t54,
-				t56,
+				t52,
+				t55,
 				t57,
-				t58
+				t58,
+				t59
 			]
 		});
-		$[274] = T0;
-		$[275] = className;
-		$[276] = compositeFocusProps;
-		$[277] = qaVal;
-		$[278] = rootRef;
-		$[279] = style;
-		$[280] = styles;
-		$[281] = t50;
-		$[282] = t51;
-		$[283] = t54;
-		$[284] = t56;
-		$[285] = t57;
-		$[286] = t58;
-		$[287] = t59;
-	} else t59 = $[287];
-	const tagInputField = t59;
+		$[279] = T0;
+		$[280] = className;
+		$[281] = compositeFocusProps;
+		$[282] = qaVal;
+		$[283] = rootRef;
+		$[284] = style;
+		$[285] = styles;
+		$[286] = t51;
+		$[287] = t52;
+		$[288] = t55;
+		$[289] = t57;
+		$[290] = t58;
+		$[291] = t59;
+		$[292] = t60;
+	} else t60 = $[292];
+	const tagInputField = t60;
 	const { children: _children, ...fieldProps } = props;
 	const fieldRef = useCombinedRefs();
-	let t60;
-	if ($[288] !== message || $[289] !== tagError) {
-		t60 = tagError ? /* @__PURE__ */ jsx("span", { children: tagError.text }, tagError.id) : message;
-		$[288] = message;
-		$[289] = tagError;
-		$[290] = t60;
-	} else t60 = $[290];
+	let t61;
+	if ($[293] !== message || $[294] !== tagError) {
+		t61 = tagError ? /* @__PURE__ */ jsx("span", { children: tagError.text }, tagError.id) : message;
+		$[293] = message;
+		$[294] = tagError;
+		$[295] = t61;
+	} else t61 = $[295];
 	return wrapWithField(tagInputField, fieldRef, {
 		...fieldProps,
 		labelProps: mergeProps$1(labelProps, userLabelProps),
 		isInvalid: effectiveIsInvalid,
-		message: t60,
+		message: t61,
 		errorMessage: tagError ? void 0 : errorMessage
 	});
 }