@ultraviolet/ui 3.24.2 → 3.25.0

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

@@ -0,0 +1,225 @@
+'use client';
+import { __esmMin, __name } from "../../../../../_virtual/_rolldown/runtime.js";
+import { Stack, init_Stack } from "../../../../Layout/Stack/index.js";
+import { Text, init_Text } from "../../../../Typography/Text/index.js";
+import { OPTION_SELECTOR, init_constants } from "../../constants.js";
+import { init_SelectInputProvider, useSelectInput } from "../../SelectInputProvider.js";
+import { Skeleton, init_Skeleton } from "../../../../Feedback/Skeleton/index.js";
+import { init_styles_css, selectInputStyle } from "../../styles.css.js";
+import { AddOption, init_AddOption } from "./AddOption.js";
+import { Group, init_Group } from "./Group.js";
+import { Item, init_Item } from "./Item.js";
+import { SelectAll, init_SelectAll } from "./SelectAll.js";
+import { useEffect, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { PlusIcon } from "@ultraviolet/icons/PlusIcon";
+
+//#region src/components/Data Entry/SelectInput/components/Dropdown/Content.tsx
+var moveFocusDown, moveFocusUp, handleKeyDownSelect, CreateDropdown;
+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 (isLoading) return /* @__PURE__ */ jsx(Stack, {
+				className: selectInputStyle.dropdownContainer,
+				id: "select-dropdown",
+				onKeyDown: handleKeyDownSelect,
+				role: "listbox",
+				children: /* @__PURE__ */ jsx(Skeleton, { variant: "block" })
+			});
+			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,
+					isEmpty,
+					option,
+					searchable,
+					textVariant
+				});
+			}
+			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
+					}),
+					/* @__PURE__ */ jsx(SelectAll, { textVariant }),
+					/* @__PURE__ */ jsxs(Stack, {
+						gap: .25,
+						id: "items",
+						className: selectInputStyle.dropdownSection,
+						children: [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: [
+					/* @__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();
+export { CreateDropdown, init_Content };

package/dist/components/Data Entry/SelectInput/components/Dropdown/Dropdown.d.ts

@@ -0,0 +1,27 @@
+import type { ComponentProps, ReactNode, RefObject } from 'react';
+import { Popup } from '../../../../Overlay/Popup';
+export type DropdownProps = {
+    id?: string;
+    children: ReactNode;
+    emptyState: ReactNode;
+    descriptionDirection: 'row' | 'column';
+    searchable: boolean;
+    placeholder: string;
+    footer?: ((closeDropdown: () => void) => ReactNode) | ReactNode;
+    refSelect: RefObject<HTMLDivElement | null>;
+    loadMore?: ReactNode;
+    optionalInfoPlacement: 'left' | 'right';
+    isLoading?: boolean;
+    size: 'small' | 'medium' | 'large';
+    dropdownAlign?: ComponentProps<typeof Popup>['align'];
+    portalTarget?: ComponentProps<typeof Popup>['portalTarget'];
+    groupError?: Record<string, ReactNode>;
+    groupEmptyState?: Record<string, ReactNode>;
+    addOption?: {
+        text: string;
+        onClick: (searchText: string) => void;
+    };
+    disabled?: boolean;
+};
+export declare const Dropdown: ({ children, emptyState, descriptionDirection, searchable, placeholder, footer, refSelect, loadMore, optionalInfoPlacement, isLoading, size, dropdownAlign, portalTarget, id, groupError, groupEmptyState, addOption, disabled, }: DropdownProps) => import("react").JSX.Element;
+//# sourceMappingURL=Dropdown.d.ts.map

package/dist/components/Data Entry/SelectInput/components/Dropdown/Dropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Data Entry/SelectInput/components/Dropdown/Dropdown.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,cAAc,EAAY,SAAS,EAAE,SAAS,EAAkB,MAAM,OAAO,CAAA;AAG3F,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAA;AASjD,MAAM,MAAM,aAAa,GAAG;IAC1B,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,QAAQ,EAAE,SAAS,CAAA;IACnB,UAAU,EAAE,SAAS,CAAA;IACrB,oBAAoB,EAAE,KAAK,GAAG,QAAQ,CAAA;IACtC,UAAU,EAAE,OAAO,CAAA;IACnB,WAAW,EAAE,MAAM,CAAA;IACnB,MAAM,CAAC,EAAE,CAAC,CAAC,aAAa,EAAE,MAAM,IAAI,KAAK,SAAS,CAAC,GAAG,SAAS,CAAA;IAC/D,SAAS,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IAC3C,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,qBAAqB,EAAE,MAAM,GAAG,OAAO,CAAA;IACvC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IAClC,aAAa,CAAC,EAAE,cAAc,CAAC,OAAO,KAAK,CAAC,CAAC,OAAO,CAAC,CAAA;IACrD,YAAY,CAAC,EAAE,cAAc,CAAC,OAAO,KAAK,CAAC,CAAC,cAAc,CAAC,CAAA;IAC3D,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAA;IACtC,eAAe,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAA;IAC3C,SAAS,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAA;KAAE,CAAA;IACnE,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAiED,eAAO,MAAM,QAAQ,qOAmBlB,aAAa,gCAoLf,CAAA"}

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

@@ -0,0 +1,220 @@
+'use client';
+import { __esmMin, __name } from "../../../../../_virtual/_rolldown/runtime.js";
+import _objectSpread2, { init_objectSpread2 } from "../../../../../_virtual/_@oxc-project_runtime@0.146.0/helpers/esm/objectSpread2.js";
+import { Stack, init_Stack } from "../../../../Layout/Stack/index.js";
+import { Popup, init_Popup } from "../../../../Overlay/Popup/index.js";
+import { ModalContext, init_ModalProvider } from "../../../../Overlay/Modal/ModalProvider.js";
+import { INPUT_SIZE_HEIGHT, init_constants } from "../../constants.js";
+import { init_SelectInputProvider, useSelectInput } from "../../SelectInputProvider.js";
+import { init_styles_css, selectInputStyle } from "../../styles.css.js";
+import { CreateDropdown, init_Content } from "./Content.js";
+import { SearchBar, init_SearchBar } from "./SearchBar.js";
+import { dropdownWidth, init_dropdown_css } from "./dropdown.css.js";
+import { useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { useTheme } from "@ultraviolet/themes";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/Data Entry/SelectInput/components/Dropdown/Dropdown.tsx
+var NON_SEARCHABLE_KEYS, handleKeyDown, Dropdown;
+function init_Dropdown() {
+	return (init_Dropdown = __esmMin(() => {
+		init_Stack();
+		init_ModalProvider();
+		init_Popup();
+		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({
+								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
+					});
+				}
+				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();
+export { Dropdown, init_Dropdown };

package/dist/components/Data Entry/SelectInput/components/Dropdown/Group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Group.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Data Entry/SelectInput/components/Dropdown/Group.tsx"],"names":[],"mappings":"AAMA,eAAO,MAAM,KAAK,qBAAsB;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,uCA+EvE,CAAA"}

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

@@ -0,0 +1,84 @@
+import { __esmMin, __name } from "../../../../../_virtual/_rolldown/runtime.js";
+import { Text, init_Text } from "../../../../Typography/Text/index.js";
+import { init_SelectInputProvider, useSelectInput } from "../../SelectInputProvider.js";
+import { init_styles_css, selectInputStyle } from "../../styles.css.js";
+import { Checkbox, init_Checkbox } from "../../../Checkbox/index.js";
+import { cn } from "@ultraviolet/utils";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/Data Entry/SelectInput/components/Dropdown/Group.tsx
+var Group;
+function init_Group() {
+	return (init_Group = __esmMin(() => {
+		init_Text();
+		init_Checkbox();
+		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();
+						}
+					},
+					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()
+					})
+				}, group)
+			});
+		};
+	}))();
+}
+
+//#endregion
+init_Group();
+export { Group, init_Group };

package/dist/components/Data Entry/SelectInput/components/Dropdown/Item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Data Entry/SelectInput/components/Dropdown/Item.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAA0C,SAAS,EAAE,MAAM,OAAO,CAAA;AAI9E,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAI7C,eAAO,MAAM,IAAI,kIASd;IACD,MAAM,EAAE,UAAU,CAAA;IAClB,WAAW,EAAE,MAAM,CAAA;IACnB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,kBAAkB,EAAE,MAAM,GAAG,IAAI,CAAA;IACjC,cAAc,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IAChD,oBAAoB,EAAE,QAAQ,GAAG,KAAK,CAAA;IACtC,WAAW,EAAE,MAAM,GAAG,WAAW,CAAA;IACjC,qBAAqB,EAAE,MAAM,GAAG,OAAO,CAAA;CACxC,gCA+FA,CAAA"}

package/dist/components/Data Entry/SelectInput/components/Dropdown/Item.js

@@ -0,0 +1,95 @@
+import { __esmMin, __name } from "../../../../../_virtual/_rolldown/runtime.js";
+import { Tooltip, init_Tooltip } from "../../../../Overlay/Tooltip/index.js";
+import { init_SelectInputProvider, useSelectInput } from "../../SelectInputProvider.js";
+import { init_styles_css, selectInputStyle } from "../../styles.css.js";
+import { DisplayOption, init_Option } from "./Option.js";
+import { Checkbox, init_Checkbox } from "../../../Checkbox/index.js";
+import { cn } from "@ultraviolet/utils";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/Data Entry/SelectInput/components/Dropdown/Item.tsx
+var Item;
+function init_Item() {
+	return (init_Item = __esmMin(() => {
+		init_Tooltip();
+		init_Checkbox();
+		init_SelectInputProvider();
+		init_Option();
+		init_styles_css();
+		Item = ({ option, indexOption, group, defaultSearchValue, focusedItemRef, descriptionDirection, textVariant, optionalInfoPlacement }) => {
+			const { setIsDropdownVisible, onChange, multiselect, setSelectedData, selectedData, size } = useSelectInput();
+			const handleClick = ({ clickedOption, event }) => {
+				event.stopPropagation();
+				setSelectedData({
+					clickedOption,
+					group,
+					type: "selectOption"
+				});
+				if (multiselect) {
+					if (selectedData.selectedValues.includes(clickedOption.value)) onChange === null || onChange === void 0 || onChange(selectedData.selectedValues.filter((value) => value !== clickedOption.value));
+					else onChange === null || onChange === void 0 || onChange([...selectedData.selectedValues, clickedOption.value]);
+				} else onChange === null || onChange === void 0 || onChange(clickedOption.value);
+				setIsDropdownVisible(multiselect);
+			};
+			return /* @__PURE__ */ jsx(Tooltip, {
+				containerFullWidth: true,
+				text: option.tooltip,
+				children: /* @__PURE__ */ jsx("div", {
+					"aria-disabled": !!option.disabled,
+					"aria-label": option.value,
+					"aria-selected": selectedData.selectedValues.includes(option.value) && !option.disabled,
+					className: cn(selectInputStyle.dropdownItem({
+						disabled: !!option.disabled,
+						size,
+						selected: selectedData.selectedValues.includes(option.value) && !option.disabled
+					})),
+					"data-testid": `option-${option.value}`,
+					id: `option-${indexOption}`,
+					onClick: (event) => {
+						if (!option.disabled) handleClick({
+							clickedOption: option,
+							event
+						});
+					},
+					onKeyDown: (event) => {
+						if ([" ", "Enter"].includes(event.key) && !option.disabled) handleClick({
+							clickedOption: option,
+							event
+						});
+					},
+					ref: option.value === defaultSearchValue || option.searchText === defaultSearchValue ? focusedItemRef : null,
+					role: "option",
+					tabIndex: 0,
+					children: multiselect ? /* @__PURE__ */ jsx(Checkbox, {
+						checked: selectedData.selectedValues.includes(option.value) && !option.disabled,
+						className: selectInputStyle.dropdownCheckbox,
+						disabled: option.disabled,
+						onChange: (event) => {
+							if (!option.disabled) handleClick({
+								clickedOption: option,
+								event
+							});
+						},
+						tabIndex: -1,
+						value: option.value,
+						children: /* @__PURE__ */ jsx(DisplayOption, {
+							descriptionDirection,
+							option,
+							optionalInfoPlacement,
+							textVariant
+						})
+					}) : /* @__PURE__ */ jsx(DisplayOption, {
+						descriptionDirection,
+						option,
+						optionalInfoPlacement,
+						textVariant
+					})
+				})
+			});
+		};
+	}))();
+}
+
+//#endregion
+init_Item();
+export { Item, init_Item };

package/dist/components/Data Entry/SelectInput/components/Dropdown/Option.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Option.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Data Entry/SelectInput/components/Dropdown/Option.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAG7C,KAAK,kBAAkB,GAAG;IACxB,MAAM,EAAE,UAAU,CAAA;IAClB,oBAAoB,EAAE,KAAK,GAAG,QAAQ,CAAA;IACtC,qBAAqB,EAAE,MAAM,GAAG,OAAO,CAAA;IACvC,WAAW,EAAE,MAAM,GAAG,WAAW,CAAA;CAClC,CAAA;AAED,eAAO,MAAM,aAAa,0EAKvB,kBAAkB,gCA+FpB,CAAA"}