@ultraviolet/ui 3.21.0 → 3.21.2

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

@@ -1,6 +1,6 @@
 'use client';
 import { __esmMin, __name } from "../../../../_virtual/_rolldown/runtime.js";
-import _objectSpread2, { init_objectSpread2 } from "../../../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/objectSpread2.js";
+import _objectSpread2, { init_objectSpread2 } from "../../../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/objectSpread2.js";
 import { Stack, init_Stack } from "../../../Stack/index.js";
 import { Popup, init_Popup } from "../../../Popup/index.js";
 import { ModalContext, init_ModalProvider } from "../../../Modal/ModalProvider.js";
@@ -17,201 +17,203 @@ import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/SelectInput/components/Dropdown/Dropdown.tsx
 var NON_SEARCHABLE_KEYS, handleKeyDown, Dropdown;
-var init_Dropdown = __esmMin(() => {
-	init_ModalProvider();
-	init_Popup();
-	init_Stack();
-	init_constants();
-	init_SelectInputProvider();
-	init_Content();
-	init_SearchBar();
-	init_styles_css();
-	init_dropdown_css();
-	init_objectSpread2();
-	NON_SEARCHABLE_KEYS = [
-		"Tab",
-		" ",
-		"Enter",
-		"CapsLock",
-		"Shift",
-		"ArrowDown",
-		"ArrowUp",
-		"ArrowLeft",
-		"ArrowRight",
-		"Escape"
-	];
-	handleKeyDown = (event, ref, options, searchBarActive, setSearch, setDefaultSearch, search) => {
-		var _document$activeEleme;
-		if (ref.current && !searchBarActive && !NON_SEARCHABLE_KEYS.includes(event.key) && ((_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 ? void 0 : _document$activeEleme.ariaLabel) !== "search-bar") {
-			const currentSearch = search + event.key;
-			setSearch(currentSearch);
-			ref.current.focus();
-			if (Array.isArray(options)) {
-				const closestOption = [...options].find((option) => option.searchText ? option.searchText.toLocaleLowerCase().startsWith(currentSearch) : option.value.toLocaleLowerCase().startsWith(currentSearch));
-				if (closestOption) {
-					var _closestOption$search;
-					setDefaultSearch((_closestOption$search = closestOption.searchText) !== null && _closestOption$search !== void 0 ? _closestOption$search : closestOption.value);
-				} else setDefaultSearch(null);
-			} else {
-				const closestOptions = _objectSpread2({}, options);
-				Object.keys(closestOptions).map((group) => {
-					closestOptions[group] = closestOptions[group].filter((option) => option.searchText ? option.searchText.toLocaleLowerCase().startsWith(currentSearch) : option.value.toLocaleLowerCase().startsWith(currentSearch));
-					return null;
-				});
-				const closestOption = closestOptions[Object.keys(closestOptions)[0]][0];
-				if (closestOption) {
-					var _closestOption$search2;
-					setDefaultSearch((_closestOption$search2 = closestOption.searchText) !== null && _closestOption$search2 !== void 0 ? _closestOption$search2 : closestOption.value);
-				} else setDefaultSearch(null);
+function init_Dropdown() {
+	return (init_Dropdown = __esmMin(() => {
+		init_ModalProvider();
+		init_Popup();
+		init_Stack();
+		init_constants();
+		init_SelectInputProvider();
+		init_Content();
+		init_SearchBar();
+		init_styles_css();
+		init_dropdown_css();
+		init_objectSpread2();
+		NON_SEARCHABLE_KEYS = [
+			"Tab",
+			" ",
+			"Enter",
+			"CapsLock",
+			"Shift",
+			"ArrowDown",
+			"ArrowUp",
+			"ArrowLeft",
+			"ArrowRight",
+			"Escape"
+		];
+		handleKeyDown = (event, ref, options, searchBarActive, setSearch, setDefaultSearch, search) => {
+			var _document$activeEleme;
+			if (ref.current && !searchBarActive && !NON_SEARCHABLE_KEYS.includes(event.key) && ((_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 ? void 0 : _document$activeEleme.ariaLabel) !== "search-bar") {
+				const currentSearch = search + event.key;
+				setSearch(currentSearch);
+				ref.current.focus();
+				if (Array.isArray(options)) {
+					const closestOption = [...options].find((option) => option.searchText ? option.searchText.toLocaleLowerCase().startsWith(currentSearch) : option.value.toLocaleLowerCase().startsWith(currentSearch));
+					if (closestOption) {
+						var _closestOption$search;
+						setDefaultSearch((_closestOption$search = closestOption.searchText) !== null && _closestOption$search !== void 0 ? _closestOption$search : closestOption.value);
+					} else setDefaultSearch(null);
+				} else {
+					const closestOptions = _objectSpread2({}, options);
+					Object.keys(closestOptions).map((group) => {
+						closestOptions[group] = closestOptions[group].filter((option) => option.searchText ? option.searchText.toLocaleLowerCase().startsWith(currentSearch) : option.value.toLocaleLowerCase().startsWith(currentSearch));
+						return null;
+					});
+					const closestOption = closestOptions[Object.keys(closestOptions)[0]][0];
+					if (closestOption) {
+						var _closestOption$search2;
+						setDefaultSearch((_closestOption$search2 = closestOption.searchText) !== null && _closestOption$search2 !== void 0 ? _closestOption$search2 : closestOption.value);
+					} else setDefaultSearch(null);
+				}
 			}
-		}
-	};
-	Dropdown = ({ children, emptyState, descriptionDirection, searchable, placeholder, footer, refSelect, loadMore, optionalInfoPlacement, isLoading, size, dropdownAlign, portalTarget, id, groupError, groupEmptyState, addOption, disabled }) => {
-		var _refSelect$current$of;
-		var _refSelect$current;
-		var _refSelect$current2;
-		var _refSelect$current3;
-		const { setIsDropdownVisible, isDropdownVisible, onSearch, searchInput, options, displayedOptions, numberOfOptions } = useSelectInput();
-		const theme = useTheme();
-		const [searchBarActive, setSearchBarActive] = useState(false);
-		const [defaultSearchValue, setDefaultSearch] = useState(null);
-		const ref = useRef(null);
-		const [search, setSearch] = useState("");
-		const [maxWidth, setWidth] = useState((_refSelect$current$of = (_refSelect$current = refSelect.current) === null || _refSelect$current === void 0 ? void 0 : _refSelect$current.offsetWidth) !== null && _refSelect$current$of !== void 0 ? _refSelect$current$of : "100%");
-		const modalContext = useContext(ModalContext);
-		const resizeDropdown = useCallback(() => {
-			if (refSelect.current && refSelect.current.getBoundingClientRect().width > 0 && refSelect.current.getBoundingClientRect().width !== maxWidth) setWidth(refSelect.current.getBoundingClientRect().width);
-		}, [refSelect, maxWidth]);
-		useLayoutEffect(() => {
-			if (refSelect.current && isDropdownVisible) {
-				const overflow = refSelect.current.getBoundingClientRect().bottom + 256 + Number(theme.sizing[INPUT_SIZE_HEIGHT[size]].replace("rem", "")) * 16 + Number.parseInt(theme.space["5"], 10) - window.innerHeight + 32;
-				if (overflow > 0 && modalContext) {
-					const currentModal = modalContext.openedModals[0];
-					const modalElement = currentModal === null || currentModal === void 0 ? void 0 : currentModal.ref.current;
-					if (modalElement) {
-						const parentElement = modalElement.parentNode;
-						if (parentElement instanceof HTMLElement) parentElement.scrollBy({
-							behavior: "smooth",
-							top: overflow
-						});
-						else modalElement.scrollBy({
+		};
+		Dropdown = ({ children, emptyState, descriptionDirection, searchable, placeholder, footer, refSelect, loadMore, optionalInfoPlacement, isLoading, size, dropdownAlign, portalTarget, id, groupError, groupEmptyState, addOption, disabled }) => {
+			var _refSelect$current$of;
+			var _refSelect$current;
+			var _refSelect$current2;
+			var _refSelect$current3;
+			const { setIsDropdownVisible, isDropdownVisible, onSearch, searchInput, options, displayedOptions, numberOfOptions } = useSelectInput();
+			const theme = useTheme();
+			const [searchBarActive, setSearchBarActive] = useState(false);
+			const [defaultSearchValue, setDefaultSearch] = useState(null);
+			const ref = useRef(null);
+			const [search, setSearch] = useState("");
+			const [maxWidth, setWidth] = useState((_refSelect$current$of = (_refSelect$current = refSelect.current) === null || _refSelect$current === void 0 ? void 0 : _refSelect$current.offsetWidth) !== null && _refSelect$current$of !== void 0 ? _refSelect$current$of : "100%");
+			const modalContext = useContext(ModalContext);
+			const resizeDropdown = useCallback(() => {
+				if (refSelect.current && refSelect.current.getBoundingClientRect().width > 0 && refSelect.current.getBoundingClientRect().width !== maxWidth) setWidth(refSelect.current.getBoundingClientRect().width);
+			}, [refSelect, maxWidth]);
+			useLayoutEffect(() => {
+				if (refSelect.current && isDropdownVisible) {
+					const overflow = refSelect.current.getBoundingClientRect().bottom + 256 + Number(theme.sizing[INPUT_SIZE_HEIGHT[size]].replace("rem", "")) * 16 + Number.parseInt(theme.space["5"], 10) - window.innerHeight + 32;
+					if (overflow > 0 && modalContext) {
+						const currentModal = modalContext.openedModals[0];
+						const modalElement = currentModal === null || currentModal === void 0 ? void 0 : currentModal.ref.current;
+						if (modalElement) {
+							const parentElement = modalElement.parentNode;
+							if (parentElement instanceof HTMLElement) parentElement.scrollBy({
+								behavior: "smooth",
+								top: overflow
+							});
+							else modalElement.scrollBy({
+								behavior: "smooth",
+								top: overflow
+							});
+						} else window.scrollBy({
 							behavior: "smooth",
 							top: overflow
 						});
-					} else window.scrollBy({
-						behavior: "smooth",
-						top: overflow
+					}
+				}
+			}, [
+				isDropdownVisible,
+				refSelect,
+				size,
+				modalContext,
+				theme,
+				resizeDropdown
+			]);
+			useEffect(() => {
+				resizeDropdown();
+				window.addEventListener("resize", resizeDropdown);
+				return () => window.removeEventListener("resize", resizeDropdown);
+			}, [resizeDropdown, (_refSelect$current2 = refSelect.current) === null || _refSelect$current2 === void 0 ? void 0 : _refSelect$current2.offsetWidth]);
+			useEffect(() => {
+				if (!searchInput) onSearch(options);
+			}, [
+				onSearch,
+				options,
+				searchInput
+			]);
+			useEffect(() => {
+				if (!isDropdownVisible) {
+					setDefaultSearch(null);
+					setSearch("");
+				}
+				const eventKeydown = (event) => handleKeyDown(event, ref, options, searchBarActive, setSearch, setDefaultSearch, search);
+				if (!searchable) document.addEventListener("keydown", eventKeydown);
+				return () => {
+					if (!searchable) document.removeEventListener("keydown", eventKeydown);
+				};
+			}, [
+				isDropdownVisible,
+				searchBarActive,
+				options,
+				onSearch,
+				search,
+				refSelect,
+				setDefaultSearch,
+				setIsDropdownVisible,
+				searchable
+			]);
+			const isEmpty = useMemo(() => {
+				if (numberOfOptions === 0) return true;
+				if (Array.isArray(displayedOptions)) return displayedOptions.length === 0;
+				const groups = Object.keys(displayedOptions);
+				for (const group of groups) if (displayedOptions[group].length > 0) return false;
+				return true;
+			}, [displayedOptions, numberOfOptions]);
+			const computedFooter = useMemo(() => {
+				if (footer && !isEmpty) {
+					if (typeof footer === "function") return /* @__PURE__ */ jsx("div", {
+						className: selectInputStyle.footer,
+						children: footer(() => setIsDropdownVisible(false))
+					});
+					return /* @__PURE__ */ jsx("div", {
+						className: selectInputStyle.footer,
+						children: footer
 					});
 				}
-			}
-		}, [
-			isDropdownVisible,
-			refSelect,
-			size,
-			modalContext,
-			theme,
-			resizeDropdown
-		]);
-		useEffect(() => {
-			resizeDropdown();
-			window.addEventListener("resize", resizeDropdown);
-			return () => window.removeEventListener("resize", resizeDropdown);
-		}, [resizeDropdown, (_refSelect$current2 = refSelect.current) === null || _refSelect$current2 === void 0 ? void 0 : _refSelect$current2.offsetWidth]);
-		useEffect(() => {
-			if (!searchInput) onSearch(options);
-		}, [
-			onSearch,
-			options,
-			searchInput
-		]);
-		useEffect(() => {
-			if (!isDropdownVisible) {
-				setDefaultSearch(null);
-				setSearch("");
-			}
-			const eventKeydown = (event) => handleKeyDown(event, ref, options, searchBarActive, setSearch, setDefaultSearch, search);
-			if (!searchable) document.addEventListener("keydown", eventKeydown);
-			return () => {
-				if (!searchable) document.removeEventListener("keydown", eventKeydown);
-			};
-		}, [
-			isDropdownVisible,
-			searchBarActive,
-			options,
-			onSearch,
-			search,
-			refSelect,
-			setDefaultSearch,
-			setIsDropdownVisible,
-			searchable
-		]);
-		const isEmpty = useMemo(() => {
-			if (numberOfOptions === 0) return true;
-			if (Array.isArray(displayedOptions)) return displayedOptions.length === 0;
-			const groups = Object.keys(displayedOptions);
-			for (const group of groups) if (displayedOptions[group].length > 0) return false;
-			return true;
-		}, [displayedOptions, numberOfOptions]);
-		const computedFooter = useMemo(() => {
-			if (footer && !isEmpty) {
-				if (typeof footer === "function") return /* @__PURE__ */ jsx("div", {
-					className: selectInputStyle.footer,
-					children: footer(() => setIsDropdownVisible(false))
-				});
-				return /* @__PURE__ */ jsx("div", {
-					className: selectInputStyle.footer,
-					children: footer
-				});
-			}
-			return null;
-		}, [
-			isEmpty,
-			footer,
-			setIsDropdownVisible
-		]);
-		return /* @__PURE__ */ jsx(Popup, {
-			align: dropdownAlign !== null && dropdownAlign !== void 0 ? dropdownAlign : "start",
-			className: selectInputStyle.dropdown,
-			containerFullWidth: true,
-			debounceDelay: 0,
-			disableAnimation: true,
-			hasArrow: false,
-			hideOnClickOutside: true,
-			id,
-			maxWidth: maxWidth !== null && maxWidth !== void 0 ? maxWidth : (_refSelect$current3 = refSelect.current) === null || _refSelect$current3 === void 0 ? void 0 : _refSelect$current3.offsetWidth,
-			onClose: () => setIsDropdownVisible(false),
-			placement: "bottom",
-			portalTarget,
-			ref,
-			role: "dialog",
-			style: assignInlineVars({ [dropdownWidth]: typeof maxWidth === "number" ? `${maxWidth}px` : maxWidth }),
-			tabIndex: -1,
-			text: /* @__PURE__ */ jsxs(Stack, { children: [
-				searchable && !isLoading ? /* @__PURE__ */ jsx(SearchBar, {
-					displayedOptions,
-					placeholder,
-					setSearchBarActive
-				}) : null,
-				/* @__PURE__ */ jsx(CreateDropdown, {
-					addOption,
-					defaultSearchValue,
-					descriptionDirection,
-					emptyState,
-					groupEmptyState,
-					groupError,
-					isEmpty,
-					isLoading,
-					loadMore,
-					optionalInfoPlacement,
-					searchable
-				}),
-				computedFooter
-			] }),
-			visible: !disabled && isDropdownVisible,
-			children
-		});
-	};
-});
+				return null;
+			}, [
+				isEmpty,
+				footer,
+				setIsDropdownVisible
+			]);
+			return /* @__PURE__ */ jsx(Popup, {
+				align: dropdownAlign !== null && dropdownAlign !== void 0 ? dropdownAlign : "start",
+				className: selectInputStyle.dropdown,
+				containerFullWidth: true,
+				debounceDelay: 0,
+				disableAnimation: true,
+				hasArrow: false,
+				hideOnClickOutside: true,
+				id,
+				maxWidth: maxWidth !== null && maxWidth !== void 0 ? maxWidth : (_refSelect$current3 = refSelect.current) === null || _refSelect$current3 === void 0 ? void 0 : _refSelect$current3.offsetWidth,
+				onClose: () => setIsDropdownVisible(false),
+				placement: "bottom",
+				portalTarget,
+				ref,
+				role: "dialog",
+				style: assignInlineVars({ [dropdownWidth]: typeof maxWidth === "number" ? `${maxWidth}px` : maxWidth }),
+				tabIndex: -1,
+				text: /* @__PURE__ */ jsxs(Stack, { children: [
+					searchable && !isLoading ? /* @__PURE__ */ jsx(SearchBar, {
+						displayedOptions,
+						placeholder,
+						setSearchBarActive
+					}) : null,
+					/* @__PURE__ */ jsx(CreateDropdown, {
+						addOption,
+						defaultSearchValue,
+						descriptionDirection,
+						emptyState,
+						groupEmptyState,
+						groupError,
+						isEmpty,
+						isLoading,
+						loadMore,
+						optionalInfoPlacement,
+						searchable
+					}),
+					computedFooter
+				] }),
+				visible: !disabled && isDropdownVisible,
+				children
+			});
+		};
+	}))();
+}
 
 //#endregion
 init_Dropdown();

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

@@ -8,72 +8,74 @@ import { jsx } from "react/jsx-runtime";
 
 //#region src/components/SelectInput/components/Dropdown/Group.tsx
 var Group;
-var init_Group = __esmMin(() => {
-	init_Checkbox();
-	init_Text();
-	init_SelectInputProvider();
-	init_styles_css();
-	Group = ({ group, index }) => {
-		const { selectAllGroup, selectedData, size, setSelectedData, multiselect, options, onChange } = useSelectInput();
-		const handleSelectGroup = () => {
-			if (multiselect) {
-				setSelectedData({
-					selectedGroup: group,
-					type: "selectGroup"
-				});
-				if (!Array.isArray(options)) if (selectedData.selectedGroups.includes(group)) {
-					const newSelectedValues = [...selectedData.selectedValues].filter((selectedValue) => !options[group].find((option) => option.value === selectedValue));
-					onChange === null || onChange === void 0 || onChange(newSelectedValues);
-				} else {
-					const newSelectedValues = [...selectedData.selectedValues];
-					options[group].map((option) => newSelectedValues.includes(option.value) || option.disabled ? null : newSelectedValues.push(option.value));
-					onChange === null || onChange === void 0 || onChange(newSelectedValues);
-				}
-			}
-		};
-		if (!group) return null;
-		return /* @__PURE__ */ jsx("div", {
-			className: selectInputStyle.dropdownGroupWrapper,
-			id: selectAllGroup ? "items" : void 0,
-			children: /* @__PURE__ */ jsx("button", {
-				className: cn(selectAllGroup ? selectInputStyle.dropdownGroupSelectable({ size }) : "", selectInputStyle.dropdownGroup),
-				"data-selectgroup": selectAllGroup,
-				"data-testid": `group-${index}`,
-				onClick: () => selectAllGroup ? handleSelectGroup() : null,
-				onKeyDown: (event) => {
-					if ([" ", "Enter"].includes(event.key)) {
-						event.preventDefault();
-						handleSelectGroup();
+function init_Group() {
+	return (init_Group = __esmMin(() => {
+		init_Checkbox();
+		init_Text();
+		init_SelectInputProvider();
+		init_styles_css();
+		Group = ({ group, index }) => {
+			const { selectAllGroup, selectedData, size, setSelectedData, multiselect, options, onChange } = useSelectInput();
+			const handleSelectGroup = () => {
+				if (multiselect) {
+					setSelectedData({
+						selectedGroup: group,
+						type: "selectGroup"
+					});
+					if (!Array.isArray(options)) if (selectedData.selectedGroups.includes(group)) {
+						const newSelectedValues = [...selectedData.selectedValues].filter((selectedValue) => !options[group].find((option) => option.value === selectedValue));
+						onChange === null || onChange === void 0 || onChange(newSelectedValues);
+					} else {
+						const newSelectedValues = [...selectedData.selectedValues];
+						options[group].map((option) => newSelectedValues.includes(option.value) || option.disabled ? null : newSelectedValues.push(option.value));
+						onChange === null || onChange === void 0 || onChange(newSelectedValues);
 					}
-				},
-				tabIndex: selectAllGroup ? 0 : -1,
-				type: "button",
-				children: selectAllGroup ? /* @__PURE__ */ jsx(Checkbox, {
-					checked: selectedData.selectedGroups.includes(group),
-					className: selectInputStyle.dropdownCheckboxGroup,
-					"data-testid": "select-group",
-					disabled: false,
-					onChange: () => selectAllGroup ? handleSelectGroup() : null,
-					tabIndex: -1,
-					value: group,
-					children: /* @__PURE__ */ jsx(Text, {
+				}
+			};
+			if (!group) return null;
+			return /* @__PURE__ */ jsx("div", {
+				className: selectInputStyle.dropdownGroupWrapper,
+				id: selectAllGroup ? "items" : void 0,
+				children: /* @__PURE__ */ jsx("button", {
+					className: cn(selectAllGroup ? selectInputStyle.dropdownGroupSelectable({ size }) : "", selectInputStyle.dropdownGroup),
+					"data-selectgroup": selectAllGroup,
+					"data-testid": `group-${index}`,
+					onClick: () => selectAllGroup ? handleSelectGroup() : null,
+					onKeyDown: (event) => {
+						if ([" ", "Enter"].includes(event.key)) {
+							event.preventDefault();
+							handleSelectGroup();
+						}
+					},
+					tabIndex: selectAllGroup ? 0 : -1,
+					type: "button",
+					children: selectAllGroup ? /* @__PURE__ */ jsx(Checkbox, {
+						checked: selectedData.selectedGroups.includes(group),
+						className: selectInputStyle.dropdownCheckboxGroup,
+						"data-testid": "select-group",
+						disabled: false,
+						onChange: () => selectAllGroup ? handleSelectGroup() : null,
+						tabIndex: -1,
+						value: group,
+						children: /* @__PURE__ */ jsx(Text, {
+							as: "span",
+							placement: "left",
+							sentiment: "neutral",
+							variant: size === "small" ? "captionSmall" : "caption",
+							children: group.toUpperCase()
+						})
+					}) : /* @__PURE__ */ jsx(Text, {
 						as: "span",
 						placement: "left",
 						sentiment: "neutral",
 						variant: size === "small" ? "captionSmall" : "caption",
 						children: group.toUpperCase()
 					})
-				}) : /* @__PURE__ */ jsx(Text, {
-					as: "span",
-					placement: "left",
-					sentiment: "neutral",
-					variant: size === "small" ? "captionSmall" : "caption",
-					children: group.toUpperCase()
-				})
-			}, group)
-		});
-	};
-});
+				}, group)
+			});
+		};
+	}))();
+}
 
 //#endregion
 init_Group();