@galaxy-io/dls 1.0.3

package/dist/inputs/SelectInput.js

@@ -0,0 +1,528 @@
+import { withTheme } from "../theme/GalaxyTheme.js";
+import { getCssSizeValue } from "../utils/linaria.js";
+import Text, { TextSize, TextVariant } from "../text/Text.js";
+import FlexWrapper, { AlignItems, FlexDirection } from "../containers/FlexWrapper.js";
+import FlexItem from "../containers/FlexItem.js";
+import Icon, { IconVariant, IconWeight } from "../icons/Icon.js";
+import Dropdown, { DropdownVariant } from "../dropdown/Dropdown.js";
+import Spacing from "../containers/Spacing.js";
+import { InputLabel } from "./Input.js";
+import RotateWithTransition from "../animations/RotateWithTransition.js";
+import HorizontalDivider from "../dividers/HorizontalDivider.js";
+import { useElementWidth } from "../hooks/useElementWidth.js";
+import { useControlledOpenState, useDebouncedValue } from "./hooks.js";
+/* empty css                      */
+import { styled } from "@linaria/react";
+import { match } from "ts-pattern";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ArrowCounterClockwiseIcon, CaretDownIcon, CheckIcon } from "@phosphor-icons/react";
+//#region src/inputs/SelectInput.tsx
+var SelectInputVariant = /* @__PURE__ */ function(SelectInputVariant) {
+	SelectInputVariant["BASE"] = "BASE";
+	SelectInputVariant["PRIMARY"] = "PRIMARY";
+	SelectInputVariant["SECONDARY"] = "SECONDARY";
+	SelectInputVariant["TERTIARY"] = "TERTIARY";
+	return SelectInputVariant;
+}({});
+var SelectInputSize = /* @__PURE__ */ function(SelectInputSize) {
+	SelectInputSize["SMALL"] = "SMALL";
+	SelectInputSize["MEDIUM"] = "MEDIUM";
+	SelectInputSize["LARGE"] = "LARGE";
+	return SelectInputSize;
+}({});
+var _exp = () => ({ $size }) => {
+	return match($size).with("SMALL", () => "0 6px").with("MEDIUM", () => "0 8px").with("LARGE", () => "0 10px").exhaustive();
+};
+var _exp2 = () => ({ $size }) => {
+	return match($size).with("SMALL", () => "24px").with("MEDIUM", () => "28px").with("LARGE", () => "32px").exhaustive();
+};
+var _exp3 = () => ({ $fillWidth, $width }) => $fillWidth ? "100%" : $width ? getCssSizeValue($width) : "auto";
+var _exp4 = () => ({ $isDisabled }) => $isDisabled ? "not-allowed" : "pointer";
+var _exp5 = () => ({ $isDisabled }) => $isDisabled ? .5 : 1;
+var _exp6 = () => ({ theme }) => theme.color.background.primary;
+var _exp7 = () => ({ theme, $isActive, $isError }) => {
+	if ($isActive) return theme.color.border.selected;
+	if ($isError) return theme.color.border.error;
+	return theme.color.border.primary;
+};
+var _exp8 = () => ({ theme, $isActive }) => $isActive ? theme.color.border.selected : theme.color.border.primary;
+var StyledSelectInput = withTheme(/*#__PURE__*/ styled("div")({
+	name: "StyledSelectInput",
+	class: "s1ecxi56",
+	propsAsIs: false,
+	vars: {
+		"s1ecxi56-0": [_exp()],
+		"s1ecxi56-1": [_exp2()],
+		"s1ecxi56-2": [_exp3()],
+		"s1ecxi56-3": [_exp4()],
+		"s1ecxi56-4": [_exp5()],
+		"s1ecxi56-5": [_exp6()],
+		"s1ecxi56-6": [_exp7()],
+		"s1ecxi56-7": [_exp8()]
+	}
+}));
+var _exp9 = () => ({ $size }) => {
+	return match($size).with("SMALL", () => "24px").with("MEDIUM", () => "28px").with("LARGE", () => "32px").exhaustive();
+};
+var _exp0 = () => ({ theme }) => theme.color.text.primary;
+var _exp1 = () => ({ theme, $size }) => {
+	return match($size).with("SMALL", () => theme.font.sans.size.body_sm).with("MEDIUM", () => theme.font.sans.size.body_md).with("LARGE", () => theme.font.sans.size.body_lg).exhaustive();
+};
+var _exp10 = () => ({ theme, $size }) => {
+	return match($size).with("SMALL", () => theme.font.sans.height.body_sm).with("MEDIUM", () => theme.font.sans.height.body_md).with("LARGE", () => theme.font.sans.height.body_lg).exhaustive();
+};
+var _exp11 = () => ({ theme }) => theme.font.sans.weight.medium;
+var _exp12 = () => ({ theme }) => theme.font.sans.family;
+var _exp13 = () => ({ theme }) => theme.color.text.tertiary;
+var StyledSearchInput = withTheme(/*#__PURE__*/ styled("input")({
+	name: "StyledSearchInput",
+	class: "s14m69un",
+	propsAsIs: false,
+	vars: {
+		"s14m69un-0": [_exp9()],
+		"s14m69un-1": [_exp0()],
+		"s14m69un-2": [_exp1()],
+		"s14m69un-3": [_exp10()],
+		"s14m69un-4": [_exp11()],
+		"s14m69un-5": [_exp12()],
+		"s14m69un-6": [_exp13()]
+	}
+}));
+var _exp14 = () => ({ $width }) => getCssSizeValue($width, 200);
+var _exp15 = () => ({ $fillWidth, $width }) => {
+	if ($width) return getCssSizeValue($width);
+	return $fillWidth ? "100%" : "auto";
+};
+var SelectInputContent = /*#__PURE__*/ styled("div")({
+	name: "SelectInputContent",
+	class: "sbfl8n6",
+	propsAsIs: false,
+	vars: {
+		"sbfl8n6-0": [_exp14()],
+		"sbfl8n6-1": [_exp15()]
+	}
+});
+var _exp16 = () => ({ $fillWidth, $width }) => $fillWidth || $width ? "100%" : "auto";
+var SelectInputOptionsContainer = /*#__PURE__*/ styled("div")({
+	name: "SelectInputOptionsContainer",
+	class: "sk260f0",
+	propsAsIs: false,
+	vars: { "sk260f0-0": [_exp16()] }
+});
+var _exp17 = () => ({ theme, $isSelected, $isFocused }) => {
+	if ($isSelected || $isFocused) return theme.color.background.tertiary;
+	return "transparent";
+};
+var _exp19 = () => ({ theme }) => theme.color.background.tertiary;
+var SelectInputOption = withTheme(/*#__PURE__*/ styled("button")({
+	name: "SelectInputOption",
+	class: "so10ras",
+	propsAsIs: false,
+	vars: {
+		"so10ras-0": [_exp17()],
+		"so10ras-1": [_exp19()]
+	}
+}));
+var _exp20 = () => ({ theme, $isSelected, $isFocused }) => {
+	if ($isSelected || $isFocused) return theme.color.background.tertiary;
+	return "transparent";
+};
+var _exp22 = () => ({ theme }) => theme.color.background.tertiary;
+var PinnedOptionButton = withTheme(/*#__PURE__*/ styled("button")({
+	name: "PinnedOptionButton",
+	class: "poe2ind",
+	propsAsIs: false,
+	vars: {
+		"poe2ind-0": [_exp20()],
+		"poe2ind-1": [_exp22()]
+	}
+}));
+var OptionIconSlot = /*#__PURE__*/ styled("span")({
+	name: "OptionIconSlot",
+	class: "o9236d8",
+	propsAsIs: false
+});
+var SELECT_INPUT_VARIANT_TO_ICON_VARIANT_MAP = {
+	["BASE"]: IconVariant.SECONDARY,
+	["PRIMARY"]: IconVariant.SECONDARY,
+	["SECONDARY"]: IconVariant.SECONDARY,
+	["TERTIARY"]: IconVariant.PRIMARY
+};
+var SELECT_INPUT_SIZE_TO_ICON_SIZE = {
+	["SMALL"]: 12,
+	["MEDIUM"]: 14,
+	["LARGE"]: 16
+};
+var SELECT_INPUT_SIZE_TO_TEXT_SIZE_MAP = {
+	["SMALL"]: TextSize.BODY_MD,
+	["MEDIUM"]: TextSize.BODY_MD,
+	["LARGE"]: TextSize.BODY_MD
+};
+var SelectInput = ({ label, variant = "PRIMARY", size = "MEDIUM", options, value, placeholder = "Select an option...", onChange, width, fillWidth, dropdownWidth, isDisabled = false, isRequired = false, isOpen: controlledIsOpen, onOpenChange, onReset, pinnedOptions = [], error, onSearch, debounceMs = 300 }) => {
+	const isSearchable = !!onSearch;
+	const [isHovered, setIsHovered] = useState(false);
+	const [searchTerm, setSearchTerm] = useState("");
+	const [focusedOptionIndex, setFocusedOptionIndex] = useState(-1);
+	const inputRef = useRef(null);
+	const triggerRef = useRef(null);
+	const optionsRefs = useRef([]);
+	const { isOpen, setOpen } = useControlledOpenState({
+		isOpen: controlledIsOpen,
+		onOpenChange
+	});
+	const triggerWidth = useElementWidth(triggerRef);
+	const resolvedDropdownWidth = useMemo(() => dropdownWidth ?? triggerWidth ?? width, [
+		dropdownWidth,
+		triggerWidth,
+		width
+	]);
+	const selectedOption = value ?? null;
+	const effectiveIsDisabled = isDisabled || options.length <= 1;
+	const visible = isOpen;
+	const debouncedSearchTerm = useDebouncedValue(searchTerm, debounceMs, isSearchable);
+	useEffect(() => {
+		if (visible && isSearchable && inputRef.current) {
+			inputRef.current.focus();
+			inputRef.current.select();
+		}
+	}, [visible, isSearchable]);
+	const [prevVisible, setPrevVisible] = useState(visible);
+	if (visible !== prevVisible) {
+		setPrevVisible(visible);
+		if (!visible && isSearchable) {
+			setSearchTerm("");
+			setFocusedOptionIndex(-1);
+		}
+	}
+	const filteredOptions = useMemo(() => {
+		if (!isSearchable || !debouncedSearchTerm.trim()) return options;
+		return onSearch(debouncedSearchTerm, options);
+	}, [
+		isSearchable,
+		onSearch,
+		debouncedSearchTerm,
+		options
+	]);
+	const filteredPinnedOptions = useMemo(() => {
+		if (!isSearchable || !debouncedSearchTerm.trim()) return pinnedOptions;
+		return [];
+	}, [
+		isSearchable,
+		debouncedSearchTerm,
+		pinnedOptions
+	]);
+	if (focusedOptionIndex >= filteredPinnedOptions.length + filteredOptions.length && focusedOptionIndex !== -1) setFocusedOptionIndex(-1);
+	useEffect(() => {
+		optionsRefs.current = [];
+	}, [filteredPinnedOptions, filteredOptions]);
+	const handleToggle = useCallback(() => {
+		if (effectiveIsDisabled) return;
+		setOpen(!visible);
+	}, [
+		effectiveIsDisabled,
+		setOpen,
+		visible
+	]);
+	const handleClose = useCallback(() => {
+		setOpen(false);
+	}, [setOpen]);
+	const handleOptionSelect = (option) => {
+		if (onChange) onChange(option);
+		handleClose();
+	};
+	const handlePinnedOptionSelect = (pinnedOption) => {
+		const option = options.find((opt) => opt.id === pinnedOption.optionId);
+		if (option && onChange) onChange(option);
+		handleClose();
+	};
+	const handleReset = () => {
+		if (onReset) onReset();
+		handleClose();
+	};
+	const handleMouseEnter = () => {
+		setIsHovered(true);
+	};
+	const handleMouseLeave = () => {
+		setIsHovered(false);
+	};
+	const handleKeyDown = (e) => {
+		if (effectiveIsDisabled) return;
+		if (isSearchable && visible) {
+			handleSearchKeyDown(e);
+			return;
+		}
+		if (e.key === "Enter" || e.key === " ") {
+			e.preventDefault();
+			handleToggle();
+		}
+	};
+	const handleSearchKeyDown = (e) => {
+		if (!isSearchable) return;
+		const allOptions = [...filteredPinnedOptions, ...filteredOptions];
+		const currentIndex = focusedOptionIndex;
+		const focusOptionAtIndex = (nextIndex) => {
+			setFocusedOptionIndex(nextIndex);
+			optionsRefs.current[nextIndex]?.scrollIntoView({ block: "nearest" });
+		};
+		switch (e.key) {
+			case "ArrowDown":
+				e.preventDefault();
+				if (currentIndex < allOptions.length - 1) focusOptionAtIndex(currentIndex + 1);
+				break;
+			case "ArrowUp":
+				e.preventDefault();
+				if (currentIndex > 0) focusOptionAtIndex(currentIndex - 1);
+				else inputRef.current?.focus();
+				break;
+			case "Enter":
+				e.preventDefault();
+				if (currentIndex >= 0 && currentIndex < allOptions.length) if (currentIndex < filteredPinnedOptions.length) handlePinnedOptionSelect(filteredPinnedOptions[currentIndex]);
+				else handleOptionSelect(filteredOptions[currentIndex - filteredPinnedOptions.length]);
+				else if (filteredOptions.length === 1) handleOptionSelect(filteredOptions[0]);
+				break;
+			case "Escape":
+				e.preventDefault();
+				handleClose();
+				break;
+			default:
+				if (e.key.length === 1 && !e.ctrlKey && !e.metaKey) setFocusedOptionIndex(-1);
+				break;
+		}
+	};
+	const handleInputChange = (e) => {
+		setSearchTerm(e.target.value);
+		setFocusedOptionIndex(-1);
+	};
+	const isPinnedOptionSelected = (pinnedOption) => {
+		return value?.id === pinnedOption.optionId;
+	};
+	const isPinnedOptionFocused = (index) => {
+		return isSearchable && focusedOptionIndex === index && index < filteredPinnedOptions.length;
+	};
+	const isOptionFocused = (index) => {
+		return isSearchable && focusedOptionIndex === index + filteredPinnedOptions.length && index >= 0;
+	};
+	const dropdownBody = /* @__PURE__ */ jsxs(SelectInputContent, {
+		$fillWidth: fillWidth,
+		$width: resolvedDropdownWidth,
+		children: [
+			filteredPinnedOptions.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [filteredPinnedOptions.map((pinnedOption, index) => /* @__PURE__ */ jsxs(PinnedOptionButton, {
+				ref: (el) => {
+					optionsRefs.current[index] = el;
+				},
+				$isSelected: isPinnedOptionSelected(pinnedOption),
+				$isFocused: isPinnedOptionFocused(index),
+				onClick: (e) => {
+					e.preventDefault();
+					handlePinnedOptionSelect(pinnedOption);
+				},
+				onMouseEnter: () => setFocusedOptionIndex(index),
+				children: [/* @__PURE__ */ jsx(Text, {
+					size: SELECT_INPUT_SIZE_TO_TEXT_SIZE_MAP[size],
+					cursor: !effectiveIsDisabled ? "pointer" : "not-allowed",
+					isEllipsis: true,
+					children: pinnedOption.label
+				}), isPinnedOptionSelected(pinnedOption) && /* @__PURE__ */ jsx(Icon, {
+					component: CheckIcon,
+					variant: IconVariant.TERTIARY,
+					weight: IconWeight.BOLD,
+					size: 12
+				})]
+			}, pinnedOption.id)), /* @__PURE__ */ jsx(HorizontalDivider, {})] }),
+			/* @__PURE__ */ jsx(SelectInputOptionsContainer, {
+				$fillWidth: fillWidth,
+				$width: resolvedDropdownWidth,
+				children: filteredOptions.length > 0 ? filteredOptions.map((option, index) => {
+					const absoluteIndex = filteredPinnedOptions.length + index;
+					return /* @__PURE__ */ jsxs(SelectInputOption, {
+						ref: (el) => {
+							optionsRefs.current[absoluteIndex] = el;
+						},
+						$isSelected: option.id === value?.id,
+						$isFocused: isOptionFocused(index),
+						onClick: () => handleOptionSelect(option),
+						onMouseEnter: () => setFocusedOptionIndex(absoluteIndex),
+						children: [/* @__PURE__ */ jsxs(FlexWrapper, {
+							alignItems: AlignItems.CENTER,
+							gap: 8,
+							fillWidth: true,
+							children: [option.icon && /* @__PURE__ */ jsx(OptionIconSlot, { children: option.icon }), /* @__PURE__ */ jsx(FlexItem, {
+								grow: 1,
+								shrink: 1,
+								minWidth: 0,
+								children: /* @__PURE__ */ jsx(Text, {
+									size: SELECT_INPUT_SIZE_TO_TEXT_SIZE_MAP[size],
+									cursor: !effectiveIsDisabled ? "pointer" : "not-allowed",
+									isEllipsis: true,
+									variant: option.variant ?? TextVariant.PRIMARY,
+									children: option.label
+								})
+							})]
+						}), option.id === value?.id && /* @__PURE__ */ jsx(Icon, {
+							component: CheckIcon,
+							variant: IconVariant.TERTIARY,
+							weight: IconWeight.BOLD,
+							size: 12
+						})]
+					}, option.id);
+				}) : /* @__PURE__ */ jsx("div", {
+					style: { padding: "8px" },
+					children: /* @__PURE__ */ jsx(Text, {
+						variant: TextVariant.TERTIARY,
+						size: SELECT_INPUT_SIZE_TO_TEXT_SIZE_MAP[size],
+						children: "No options found"
+					})
+				})
+			}),
+			onReset && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(HorizontalDivider, {}), /* @__PURE__ */ jsx(PinnedOptionButton, {
+				onClick: handleReset,
+				$isSelected: false,
+				$isFocused: false,
+				children: /* @__PURE__ */ jsxs(FlexWrapper, {
+					alignItems: AlignItems.CENTER,
+					gap: 8,
+					children: [/* @__PURE__ */ jsx(Icon, {
+						component: ArrowCounterClockwiseIcon,
+						variant: IconVariant.TERTIARY,
+						size: 12
+					}), /* @__PURE__ */ jsx(Text, {
+						variant: TextVariant.SECONDARY,
+						size: SELECT_INPUT_SIZE_TO_TEXT_SIZE_MAP[size],
+						cursor: !effectiveIsDisabled ? "pointer" : "not-allowed",
+						children: "Reset"
+					})]
+				})
+			})] })
+		]
+	});
+	const textVariant = useMemo(() => {
+		if (selectedOption) return TextVariant.PRIMARY;
+		if (!effectiveIsDisabled && (visible || isHovered)) return TextVariant.SECONDARY;
+		return TextVariant.TERTIARY;
+	}, [
+		selectedOption,
+		visible,
+		isHovered,
+		effectiveIsDisabled
+	]);
+	return /* @__PURE__ */ jsxs(FlexWrapper, {
+		direction: FlexDirection.COLUMN,
+		gap: 4,
+		fillWidth,
+		children: [
+			label && /* @__PURE__ */ jsx(InputLabel, {
+				label,
+				isRequired
+			}),
+			/* @__PURE__ */ jsx(Dropdown, {
+				variant: DropdownVariant.PRIMARY,
+				body: dropdownBody,
+				isOpen: visible,
+				onClose: handleClose,
+				minWidth: resolvedDropdownWidth ?? 200,
+				offset: [0, 3],
+				fillWidth,
+				noPadding: true,
+				children: isSearchable && visible ? /* @__PURE__ */ jsxs(StyledSelectInput, {
+					ref: triggerRef,
+					$variant: variant,
+					$size: size,
+					$isActive: visible ?? false,
+					$isDisabled: effectiveIsDisabled,
+					$isError: !!error,
+					$width: width,
+					$fillWidth: fillWidth,
+					onMouseEnter: handleMouseEnter,
+					onMouseLeave: handleMouseLeave,
+					onClick: handleToggle,
+					children: [
+						/* @__PURE__ */ jsx(StyledSearchInput, {
+							ref: inputRef,
+							$variant: variant,
+							$size: size,
+							$isActive: visible ?? false,
+							$isDisabled: effectiveIsDisabled,
+							$isError: !!error,
+							$width: width,
+							$fillWidth: fillWidth,
+							type: "text",
+							placeholder,
+							value: searchTerm,
+							onChange: handleInputChange,
+							onKeyDown: handleSearchKeyDown,
+							autoComplete: "off",
+							autoCorrect: "off",
+							disabled: effectiveIsDisabled,
+							onClick: (e) => e.stopPropagation()
+						}),
+						/* @__PURE__ */ jsx(Spacing, { left: 8 }),
+						/* @__PURE__ */ jsx(FlexWrapper, { children: /* @__PURE__ */ jsx(RotateWithTransition, {
+							isRotated: visible,
+							deg: -180,
+							children: /* @__PURE__ */ jsx(Icon, {
+								component: CaretDownIcon,
+								size: 10,
+								variant: !effectiveIsDisabled && (isHovered || visible) ? IconVariant.SECONDARY : IconVariant.TERTIARY
+							})
+						}) })
+					]
+				}) : /* @__PURE__ */ jsxs(StyledSelectInput, {
+					ref: triggerRef,
+					$variant: variant,
+					$size: size,
+					$isActive: visible ?? false,
+					$isDisabled: effectiveIsDisabled,
+					$isError: !!error,
+					$width: width,
+					$fillWidth: fillWidth,
+					onClick: handleToggle,
+					onKeyDown: handleKeyDown,
+					onMouseEnter: handleMouseEnter,
+					onMouseLeave: handleMouseLeave,
+					role: "button",
+					tabIndex: effectiveIsDisabled ? -1 : 0,
+					"aria-haspopup": "listbox",
+					"aria-expanded": visible,
+					"aria-label": selectedOption ? selectedOption.label : placeholder,
+					children: [
+						/* @__PURE__ */ jsxs(FlexWrapper, {
+							alignItems: AlignItems.CENTER,
+							gap: 8,
+							fillWidth: true,
+							children: [selectedOption?.icon && /* @__PURE__ */ jsx(OptionIconSlot, { children: selectedOption.icon }), /* @__PURE__ */ jsx(FlexItem, {
+								grow: 1,
+								shrink: 1,
+								minWidth: 0,
+								children: /* @__PURE__ */ jsx(Text, {
+									variant: textVariant,
+									size: SELECT_INPUT_SIZE_TO_TEXT_SIZE_MAP[size],
+									cursor: !effectiveIsDisabled ? "pointer" : "not-allowed",
+									isEllipsis: true,
+									children: selectedOption ? selectedOption.label : placeholder
+								})
+							})]
+						}),
+						/* @__PURE__ */ jsx(Spacing, { left: 8 }),
+						/* @__PURE__ */ jsx(FlexWrapper, { children: /* @__PURE__ */ jsx(RotateWithTransition, {
+							isRotated: visible,
+							deg: -180,
+							children: /* @__PURE__ */ jsx(Icon, {
+								component: CaretDownIcon,
+								size: 10,
+								variant: !effectiveIsDisabled && (isHovered || visible) ? IconVariant.SECONDARY : IconVariant.TERTIARY
+							})
+						}) })
+					]
+				})
+			}),
+			error && /* @__PURE__ */ jsx(Text, {
+				variant: TextVariant.ERROR,
+				size: TextSize.BODY_SM,
+				children: error
+			})
+		]
+	});
+};
+//#endregion
+export { SELECT_INPUT_SIZE_TO_ICON_SIZE, SELECT_INPUT_SIZE_TO_TEXT_SIZE_MAP, SELECT_INPUT_VARIANT_TO_ICON_VARIANT_MAP, SelectInputSize, SelectInputVariant, SelectInput as default };

package/dist/inputs/SliderInput.d.ts

@@ -0,0 +1,16 @@
+export interface SliderInputProps {
+    label?: string;
+    labelTooltip?: string | React.ReactNode;
+    value: number;
+    onChange: (value: number) => void;
+    onInteractionStart?: () => void;
+    onInteractionEnd?: () => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    isDisabled?: boolean;
+    width?: number | string;
+    fillWidth?: boolean;
+}
+declare const SliderInput: ({ label, labelTooltip, value, onChange, onInteractionStart, onInteractionEnd, min, max, step, isDisabled, width, fillWidth, }: SliderInputProps) => import("react").JSX.Element;
+export default SliderInput;