@ultraviolet/ui 3.21.1 → 3.21.2

package/dist/components/SelectInput/components/Dropdown/Content.js

@@ -16,196 +16,201 @@ import { PlusIcon } from "@ultraviolet/icons/PlusIcon";
 
 //#region src/components/SelectInput/components/Dropdown/Content.tsx
 var moveFocusDown, moveFocusUp, handleKeyDownSelect, CreateDropdown;
-var init_Content = __esmMin(() => {
-	init_Skeleton();
-	init_Stack();
-	init_Text();
-	init_constants();
-	init_SelectInputProvider();
-	init_AddOption();
-	init_Group();
-	init_Item();
-	init_SelectAll();
-	init_styles_css();
-	moveFocusDown = () => {
-		const options = document.querySelectorAll(OPTION_SELECTOR);
-		const activeItem = document.activeElement;
-		if (options) for (let i = 0; i < (options === null || options === void 0 ? void 0 : options.length); i += 1) {
-			const listLength = options.length;
-			if (activeItem === options[i] && activeItem !== options[listLength - 1]) options[i + 1].focus();
-		}
-	};
-	moveFocusUp = () => {
-		const options = document.querySelectorAll(OPTION_SELECTOR);
-		const activeItem = document.activeElement;
-		if (options) {
-			for (let i = 0; i < options.length; i += 1) if (activeItem === options[i] && activeItem !== options[0]) options[i - 1].focus();
-		}
-	};
-	handleKeyDownSelect = (event) => {
-		if (event.key === "ArrowDown") {
-			event.preventDefault();
-			moveFocusDown();
-		}
-		if (event.key === "ArrowUp") {
-			event.preventDefault();
-			moveFocusUp();
-		}
-		if (event.key === " ") event.preventDefault();
-	};
-	CreateDropdown = ({ isEmpty, emptyState, descriptionDirection, loadMore, optionalInfoPlacement, defaultSearchValue, isLoading, groupEmptyState, groupError, addOption, searchable }) => {
-		const { displayedOptions, searchInput, size } = useSelectInput();
-		const focusedItemRef = useRef(null);
-		useEffect(() => {
-			if (defaultSearchValue && (focusedItemRef === null || focusedItemRef === void 0 ? void 0 : focusedItemRef.current)) focusedItemRef.current.focus();
-		}, [defaultSearchValue]);
-		const textVariant = size === "large" ? "body" : "bodySmall";
-		const sizeVariantIcon = size === "small" ? "xsmall" : "small";
-		const computedEmptyState = emptyState !== null && emptyState !== void 0 ? emptyState : /* @__PURE__ */ jsx(Text, {
-			as: "p",
-			variant: size === "small" ? "bodySmallStrong" : "bodyStrong",
-			children: "No options"
-		});
-		const addOptionLabel = /* @__PURE__ */ jsxs(Stack, {
-			alignItems: "center",
-			direction: "row",
-			gap: "1",
-			children: [/* @__PURE__ */ jsx(PlusIcon, {
-				sentiment: "primary",
-				size: sizeVariantIcon
-			}), /* @__PURE__ */ jsxs(Text, {
-				as: "span",
-				sentiment: "primary",
-				variant: "bodySmallStrong",
-				children: [
-					addOption === null || addOption === void 0 ? void 0 : addOption.text,
-					" ",
-					searchInput
-				]
-			})]
-		});
-		if (isEmpty && !addOption) return /* @__PURE__ */ jsx(Stack, {
-			alignItems: "center",
-			className: selectInputStyle.dropdownEmptyState,
-			gap: 2,
-			children: computedEmptyState
-		});
-		if (isEmpty && addOption && searchable) return /* @__PURE__ */ jsx(AddOption, {
-			addOption,
-			isEmpty,
-			option: {
-				label: addOptionLabel,
-				searchText: searchInput,
-				value: `${addOption.text} ${searchInput}`
-			},
-			searchable,
-			textVariant
-		});
-		return Array.isArray(displayedOptions) ? /* @__PURE__ */ jsxs(Stack, {
-			className: selectInputStyle.dropdownContainer,
-			id: "select-dropdown",
-			onKeyDown: handleKeyDownSelect,
-			role: "listbox",
-			children: [
-				/* @__PURE__ */ jsx(AddOption, {
+function init_Content() {
+	return (init_Content = __esmMin(() => {
+		init_Skeleton();
+		init_Stack();
+		init_Text();
+		init_constants();
+		init_SelectInputProvider();
+		init_AddOption();
+		init_Group();
+		init_Item();
+		init_SelectAll();
+		init_styles_css();
+		moveFocusDown = () => {
+			const options = document.querySelectorAll(OPTION_SELECTOR);
+			const activeItem = document.activeElement;
+			if (options) for (let i = 0; i < (options === null || options === void 0 ? void 0 : options.length); i += 1) {
+				const listLength = options.length;
+				if (activeItem === options[i] && activeItem !== options[listLength - 1]) options[i + 1].focus();
+			}
+		};
+		moveFocusUp = () => {
+			const options = document.querySelectorAll(OPTION_SELECTOR);
+			const activeItem = document.activeElement;
+			if (options) {
+				for (let i = 0; i < options.length; i += 1) if (activeItem === options[i] && activeItem !== options[0]) options[i - 1].focus();
+			}
+		};
+		handleKeyDownSelect = (event) => {
+			if (event.key === "ArrowDown") {
+				event.preventDefault();
+				moveFocusDown();
+			}
+			if (event.key === "ArrowUp") {
+				event.preventDefault();
+				moveFocusUp();
+			}
+			if (event.key === " ") event.preventDefault();
+		};
+		CreateDropdown = ({ isEmpty, emptyState, descriptionDirection, loadMore, optionalInfoPlacement, defaultSearchValue, isLoading, groupEmptyState, groupError, addOption, searchable }) => {
+			const { displayedOptions, searchInput, size } = useSelectInput();
+			const focusedItemRef = useRef(null);
+			useEffect(() => {
+				if (defaultSearchValue && (focusedItemRef === null || focusedItemRef === void 0 ? void 0 : focusedItemRef.current)) focusedItemRef.current.focus();
+			}, [defaultSearchValue]);
+			const textVariant = size === "large" ? "body" : "bodySmall";
+			const sizeVariantIcon = size === "small" ? "xsmall" : "small";
+			const computedEmptyState = emptyState !== null && emptyState !== void 0 ? emptyState : /* @__PURE__ */ jsx(Text, {
+				as: "p",
+				variant: size === "small" ? "bodySmallStrong" : "bodyStrong",
+				children: "No options"
+			});
+			const addOptionLabel = /* @__PURE__ */ jsxs(Stack, {
+				alignItems: "center",
+				direction: "row",
+				gap: "1",
+				children: [/* @__PURE__ */ jsx(PlusIcon, {
+					sentiment: "primary",
+					size: sizeVariantIcon
+				}), /* @__PURE__ */ jsxs(Text, {
+					as: "span",
+					sentiment: "primary",
+					variant: "bodySmallStrong",
+					children: [
+						addOption === null || addOption === void 0 ? void 0 : addOption.text,
+						" ",
+						searchInput
+					]
+				})]
+			});
+			if (isEmpty && !addOption) return /* @__PURE__ */ jsx(Stack, {
+				alignItems: "center",
+				className: selectInputStyle.dropdownEmptyState,
+				gap: 2,
+				children: computedEmptyState
+			});
+			if (isEmpty && addOption && searchable) {
+				const option = {
+					label: addOptionLabel,
+					searchText: searchInput,
+					value: `${addOption.text} ${searchInput}`
+				};
+				return /* @__PURE__ */ jsx(AddOption, {
 					addOption,
-					option: {
-						label: addOptionLabel,
-						searchText: searchInput,
-						value: `${addOption === null || addOption === void 0 ? void 0 : addOption.text} ${searchInput}`
-					},
+					isEmpty,
+					option,
 					searchable,
 					textVariant
-				}),
-				/* @__PURE__ */ jsx(SelectAll, { textVariant }),
-				/* @__PURE__ */ jsxs(Stack, {
-					gap: .25,
-					id: "items",
-					className: selectInputStyle.dropdownSection,
-					children: [isLoading ? /* @__PURE__ */ jsx(Skeleton, { variant: "block" }) : displayedOptions.map((option, index) => /* @__PURE__ */ jsx(Item, {
-						defaultSearchValue,
-						descriptionDirection,
-						focusedItemRef,
-						indexOption: index,
-						option,
-						optionalInfoPlacement,
+				});
+			}
+			return Array.isArray(displayedOptions) ? /* @__PURE__ */ jsxs(Stack, {
+				className: selectInputStyle.dropdownContainer,
+				id: "select-dropdown",
+				onKeyDown: handleKeyDownSelect,
+				role: "listbox",
+				children: [
+					/* @__PURE__ */ jsx(AddOption, {
+						addOption,
+						option: {
+							label: addOptionLabel,
+							searchText: searchInput,
+							value: `${addOption === null || addOption === void 0 ? void 0 : addOption.text} ${searchInput}`
+						},
+						searchable,
 						textVariant
-					}, option.value)), loadMore ? /* @__PURE__ */ jsx(Stack, {
-						className: selectInputStyle.dropdownLoadMore,
-						children: loadMore
-					}) : null]
-				})
-			]
-		}) : /* @__PURE__ */ jsxs(Stack, {
-			className: selectInputStyle.dropdownContainer,
-			"data-grouped": true,
-			id: "select-dropdown",
-			onKeyDown: handleKeyDownSelect,
-			role: "listbox",
-			children: [isLoading ? /* @__PURE__ */ jsx(Skeleton, { variant: "block" }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
-				/* @__PURE__ */ jsx(AddOption, {
-					addOption,
-					option: {
-						label: addOptionLabel,
-						searchText: searchInput,
-						value: `${addOption === null || addOption === void 0 ? void 0 : addOption.text} ${searchInput}`
-					},
-					searchable,
-					textVariant
-				}),
-				/* @__PURE__ */ jsx(SelectAll, { textVariant }),
-				Object.keys(displayedOptions).map((group, index) => {
-					var _groupEmptyState$grou;
-					var _groupError$group;
-					const hasElements = displayedOptions[group].length > 0;
-					const emptyStateGroup = (_groupEmptyState$grou = groupEmptyState === null || groupEmptyState === void 0 ? void 0 : groupEmptyState[group]) !== null && _groupEmptyState$grou !== void 0 ? _groupEmptyState$grou : null;
-					const errorGroup = (_groupError$group = groupError === null || groupError === void 0 ? void 0 : groupError[group]) !== null && _groupError$group !== void 0 ? _groupError$group : null;
-					return /* @__PURE__ */ jsxs(Stack, {
+					}),
+					/* @__PURE__ */ jsx(SelectAll, { textVariant }),
+					/* @__PURE__ */ jsxs(Stack, {
 						gap: .25,
+						id: "items",
 						className: selectInputStyle.dropdownSection,
-						children: [hasElements || emptyStateGroup ? /* @__PURE__ */ jsx(Group, {
-							group,
-							index
-						}) : null, /* @__PURE__ */ jsxs(Stack, {
-							gap: "0.25",
-							id: "items",
-							children: [
-								!hasElements && emptyStateGroup ? /* @__PURE__ */ jsx(Text, {
-									as: "span",
-									className: selectInputStyle.emptyStateGroupStyle,
-									prominence: "weak",
-									sentiment: "neutral",
-									variant: textVariant,
-									children: emptyStateGroup
-								}) : null,
-								errorGroup ? /* @__PURE__ */ jsx(Text, {
-									as: "span",
-									className: selectInputStyle.emptyStateGroupStyle,
-									sentiment: "danger",
-									variant: textVariant,
-									children: errorGroup
-								}) : null,
-								displayedOptions[group].map((option, indexOption) => errorGroup ? null : /* @__PURE__ */ jsx(Item, {
-									defaultSearchValue,
-									descriptionDirection,
-									focusedItemRef,
-									group,
-									indexOption,
-									option,
-									optionalInfoPlacement,
-									textVariant
-								}, option.value))
-							]
-						})]
-					}, group);
-				})
-			] }), loadMore ? /* @__PURE__ */ jsx(Stack, {
-				className: selectInputStyle.dropdownLoadMore,
-				children: loadMore
-			}) : null]
-		});
-	};
-});
+						children: [isLoading ? /* @__PURE__ */ jsx(Skeleton, { variant: "block" }) : displayedOptions.map((option, index) => /* @__PURE__ */ jsx(Item, {
+							defaultSearchValue,
+							descriptionDirection,
+							focusedItemRef,
+							indexOption: index,
+							option,
+							optionalInfoPlacement,
+							textVariant
+						}, option.value)), loadMore ? /* @__PURE__ */ jsx(Stack, {
+							className: selectInputStyle.dropdownLoadMore,
+							children: loadMore
+						}) : null]
+					})
+				]
+			}) : /* @__PURE__ */ jsxs(Stack, {
+				className: selectInputStyle.dropdownContainer,
+				"data-grouped": true,
+				id: "select-dropdown",
+				onKeyDown: handleKeyDownSelect,
+				role: "listbox",
+				children: [isLoading ? /* @__PURE__ */ jsx(Skeleton, { variant: "block" }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+					/* @__PURE__ */ jsx(AddOption, {
+						addOption,
+						option: {
+							label: addOptionLabel,
+							searchText: searchInput,
+							value: `${addOption === null || addOption === void 0 ? void 0 : addOption.text} ${searchInput}`
+						},
+						searchable,
+						textVariant
+					}),
+					/* @__PURE__ */ jsx(SelectAll, { textVariant }),
+					Object.keys(displayedOptions).map((group, index) => {
+						var _groupEmptyState$grou;
+						var _groupError$group;
+						const hasElements = displayedOptions[group].length > 0;
+						const emptyStateGroup = (_groupEmptyState$grou = groupEmptyState === null || groupEmptyState === void 0 ? void 0 : groupEmptyState[group]) !== null && _groupEmptyState$grou !== void 0 ? _groupEmptyState$grou : null;
+						const errorGroup = (_groupError$group = groupError === null || groupError === void 0 ? void 0 : groupError[group]) !== null && _groupError$group !== void 0 ? _groupError$group : null;
+						return /* @__PURE__ */ jsxs(Stack, {
+							gap: .25,
+							className: selectInputStyle.dropdownSection,
+							children: [hasElements || emptyStateGroup ? /* @__PURE__ */ jsx(Group, {
+								group,
+								index
+							}) : null, /* @__PURE__ */ jsxs(Stack, {
+								gap: "0.25",
+								id: "items",
+								children: [
+									!hasElements && emptyStateGroup ? /* @__PURE__ */ jsx(Text, {
+										as: "span",
+										className: selectInputStyle.emptyStateGroupStyle,
+										prominence: "weak",
+										sentiment: "neutral",
+										variant: textVariant,
+										children: emptyStateGroup
+									}) : null,
+									errorGroup ? /* @__PURE__ */ jsx(Text, {
+										as: "span",
+										className: selectInputStyle.emptyStateGroupStyle,
+										sentiment: "danger",
+										variant: textVariant,
+										children: errorGroup
+									}) : null,
+									displayedOptions[group].map((option, indexOption) => errorGroup ? null : /* @__PURE__ */ jsx(Item, {
+										defaultSearchValue,
+										descriptionDirection,
+										focusedItemRef,
+										group,
+										indexOption,
+										option,
+										optionalInfoPlacement,
+										textVariant
+									}, option.value))
+								]
+							})]
+						}, group);
+					})
+				] }), loadMore ? /* @__PURE__ */ jsx(Stack, {
+					className: selectInputStyle.dropdownLoadMore,
+					children: loadMore
+				}) : null]
+			});
+		};
+	}))();
+}
 
 //#endregion
 init_Content();