@trail-ui/react
Version:
542 lines (539 loc) • 17.6 kB
JavaScript
import {
Input,
Label
} from "./chunk-DYJZEB7Z.mjs";
import {
Text
} from "./chunk-VIVC5TFC.mjs";
// src/multiselect/multiselect.tsx
import { clsx } from "@trail-ui/shared-utils";
import {
filterVariantProps,
lozenge,
multiselect
} from "@trail-ui/theme";
import React, {
useState,
useRef,
useEffect,
forwardRef,
useMemo
} from "react";
import { CheckIcon, ChevronDownIcon, CloseIcon, ErrorIcon } from "@trail-ui/icons";
import { jsx, jsxs } from "react/jsx-runtime";
var Keys = {
Backspace: "Backspace",
Clear: "Clear",
Down: "ArrowDown",
End: "End",
Enter: "Enter",
Escape: "Escape",
Home: "Home",
Left: "ArrowLeft",
PageDown: "PageDown",
PageUp: "PageUp",
Right: "ArrowRight",
Space: " ",
Tab: "Tab",
Up: "ArrowUp"
};
var MenuActions = {
Close: "Close",
CloseSelect: "CloseSelect",
First: "First",
Last: "Last",
Next: "Next",
Open: "Open",
Previous: "Previous",
Select: "Select",
Space: "Space",
Type: "Type"
};
function getActionFromKey(key, menuOpen) {
if (!menuOpen && key === Keys.Down)
return MenuActions.Open;
if (!menuOpen && key === Keys.Enter)
return MenuActions.Open;
if (key === Keys.Down)
return MenuActions.Next;
if (key === Keys.Up)
return MenuActions.Previous;
if (key === Keys.Home)
return MenuActions.First;
if (key === Keys.End)
return MenuActions.Last;
if (key === Keys.Escape)
return MenuActions.Close;
if (key === Keys.Enter)
return MenuActions.CloseSelect;
if (key === Keys.Backspace || key === Keys.Clear || key.length === 1)
return MenuActions.Type;
return void 0;
}
function getUpdatedIndex(current, max, action) {
switch (action) {
case MenuActions.First:
return 0;
case MenuActions.Last:
return max;
case MenuActions.Previous:
return Math.max(0, current - 1);
case MenuActions.Next:
return Math.min(max, current + 1);
default:
return current;
}
}
var getTagColor = (value) => {
const firstChar = value == null ? void 0 : value.toLowerCase()[0];
switch (true) {
case ("a" <= firstChar && firstChar <= "d"):
return "green";
case ("e" <= firstChar && firstChar <= "h"):
return "purple";
case ("i" <= firstChar && firstChar <= "l"):
return "red";
case ("m" <= firstChar && firstChar <= "p"):
return "yellow";
case ("q" <= firstChar && firstChar <= "t"):
return "blue";
default:
return "default";
}
};
var handleColor = (color) => {
switch (color) {
case "blue":
return "bg-blue-100 ";
case "green":
return "bg-green-100";
case "purple":
return "bg-purple-100";
case "red":
return "bg-red-100";
case "yellow":
return "bg-yellow-50";
default:
return "bg-neutral-200";
}
};
var MAX_DISPLAYED_TAGS = 50;
function MultiSelect({
options,
label,
labelKey = "value",
valueKey = "id",
id = "multiselect",
onChange,
onBlur,
defaultValue = [],
classNames,
maxTags = MAX_DISPLAYED_TAGS,
errorMessage,
description,
errorIcon = /* @__PURE__ */ jsx(
ErrorIcon,
{
className: "h-4 w-4 text-red-800 dark:text-red-600",
role: "img",
"aria-label": "Error",
"aria-hidden": false
}
),
errorId,
isRequired,
isDisabled,
isInvalid,
placeholder = "Select items",
value,
form,
name,
color,
...otherprops
}, ref) {
const [isOpen, setIsOpen] = useState(false);
const [selectedItems, setSelectedItems] = useState(
Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : []
);
const [searchValue, setSearchValue] = useState("");
const [activeIndex, setActiveIndex] = useState(-1);
const listboxRef = useRef(null);
const inputRef = useRef(null);
const localRef = useRef(null);
const optionRefs = useRef([]);
const hiddenInputRef = useRef(null);
useEffect(() => {
if (!ref)
return;
if (typeof ref === "function") {
ref(localRef.current);
} else {
ref.current = localRef.current;
}
}, [ref]);
const slots = useMemo(() => multiselect(), []);
const getOptionLabel = (option) => {
if (typeof option === "string")
return option;
return option[labelKey] || option.label || "";
};
const getOptionValue = (option) => {
if (typeof option === "string")
return option;
return option[valueKey] || option.value || "";
};
useEffect(() => {
if (value !== void 0) {
setSelectedItems(Array.isArray(value) ? value : []);
}
}, [value]);
const filteredOptions = options.filter(
(option) => getOptionLabel(option).toLowerCase().includes(searchValue.toLowerCase())
);
useEffect(() => {
optionRefs.current = filteredOptions.map(() => React.createRef());
}, [filteredOptions]);
useEffect(() => {
const handleClickOutside = (event) => {
if (localRef.current && !localRef.current.contains(event.target)) {
setIsOpen(false);
}
};
document.addEventListener("mousedown", handleClickOutside, true);
return () => document.removeEventListener("mousedown", handleClickOutside, true);
}, []);
useEffect(() => {
if (activeIndex === -1 && filteredOptions.length > 0) {
setActiveIndex(0);
}
}, [filteredOptions, activeIndex]);
useEffect(() => {
if (!isOpen) {
setActiveIndex(-1);
}
}, [isOpen]);
const toggleItem = (option) => {
var _a;
if (isDisabled)
return;
const isSelected = selectedItems.some(
(item) => getOptionValue(item) === getOptionValue(option)
);
const newItems = isSelected ? selectedItems.filter((item) => getOptionValue(item) !== getOptionValue(option)) : [...selectedItems, option];
setSelectedItems(newItems);
onChange == null ? void 0 : onChange(newItems);
setSearchValue("");
(_a = inputRef.current) == null ? void 0 : _a.focus();
if (hiddenInputRef.current) {
const values = newItems.map(getOptionValue);
hiddenInputRef.current.value = values.join(",");
}
};
const handleInputChange = (e) => {
if (isDisabled)
return;
setSearchValue(e.target.value);
setIsOpen(true);
if (activeIndex === -1) {
setActiveIndex(0);
}
};
const handleInputKeyDown = (e) => {
const max = filteredOptions.length - 1;
const action = getActionFromKey(e.key, isOpen);
if (isDisabled) {
e.preventDefault();
e.stopPropagation();
return;
}
if (e.key === Keys.Tab) {
if (isOpen) {
setIsOpen(false);
setActiveIndex(-1);
setSearchValue("");
}
return;
}
if (!action)
return;
switch (action) {
case MenuActions.Next:
case MenuActions.Last:
case MenuActions.First:
case MenuActions.Previous:
e.preventDefault();
const nextIndex = getUpdatedIndex(activeIndex, max, action);
setActiveIndex(nextIndex);
break;
case MenuActions.CloseSelect:
e.preventDefault();
if (activeIndex >= 0 && filteredOptions[activeIndex]) {
toggleItem(filteredOptions[activeIndex]);
}
break;
case MenuActions.Close:
e.preventDefault();
setIsOpen(false);
setSearchValue("");
break;
case MenuActions.Open:
e.preventDefault();
setIsOpen(true);
break;
}
};
const handleOptionKeyDown = (e, index, option) => {
var _a, _b, _c, _d, _e, _f;
if (isDisabled) {
e.preventDefault();
e.stopPropagation();
return;
}
switch (e.key) {
case Keys.Enter:
case Keys.Space:
e.preventDefault();
toggleItem(option);
break;
case Keys.Escape:
e.preventDefault();
setIsOpen(false);
(_a = inputRef.current) == null ? void 0 : _a.focus();
break;
case Keys.Down:
e.preventDefault();
if (index < filteredOptions.length - 1) {
setActiveIndex(index + 1);
(_c = (_b = optionRefs.current[index + 1]) == null ? void 0 : _b.current) == null ? void 0 : _c.focus();
}
break;
case Keys.Up:
e.preventDefault();
if (index > 0) {
setActiveIndex(index - 1);
(_e = (_d = optionRefs.current[index - 1]) == null ? void 0 : _d.current) == null ? void 0 : _e.focus();
} else {
(_f = inputRef.current) == null ? void 0 : _f.focus();
setActiveIndex(-1);
}
break;
}
};
const handleTagKeyDown = (e, index) => {
var _a, _b;
if (isDisabled) {
e.preventDefault();
e.stopPropagation();
return;
}
switch (e.key) {
case Keys.Enter:
case Keys.Space:
e.preventDefault();
toggleItem(selectedItems[index]);
(_a = inputRef.current) == null ? void 0 : _a.focus();
break;
case Keys.Escape:
e.preventDefault();
(_b = inputRef.current) == null ? void 0 : _b.focus();
break;
}
};
function getLozengeClasses(item) {
let lozengeStyles = "";
if (typeof item !== "string" && ((item == null ? void 0 : item.lozengeColor) || (item == null ? void 0 : item.lozengeVariant) || (item == null ? void 0 : item.lozengeSize))) {
const variantProps = filterVariantProps(
{ color: item.lozengeColor, variant: item.lozengeVariant, size: item.lozengeSize },
lozenge.variantKeys
);
lozengeStyles = lozenge({
...variantProps,
color: item.lozengeColor,
size: item.lozengeSize,
variant: item.lozengeVariant
});
}
return lozengeStyles;
}
const renderTags = () => {
if (!Array.isArray(selectedItems) || selectedItems.length === 0)
return null;
const displayedTags = selectedItems.slice(0, maxTags);
const remainingCount = selectedItems.length - maxTags;
return /* @__PURE__ */ jsxs("ul", { className: "flex w-full flex-wrap items-center gap-1", children: [
displayedTags.map((item, index) => {
const lozengeStyles = getLozengeClasses(item);
return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
"span",
{
id: `${id}-tag-${index}`,
className: `${lozengeStyles.length ? lozengeStyles : handleColor(color != null ? color : getTagColor(getOptionLabel(item)))} focus-visible:outline-focus inline-flex animate-[fadeIn_0.2s_ease-in-out] cursor-pointer items-center rounded px-2 py-0.5 pr-1 ${lozengeStyles.length ? "" : "text-sm text-neutral-950"} focus-visible:outline`,
role: "button",
"aria-label": `Remove ${getOptionLabel(item)}`,
tabIndex: 0,
onClick: (e) => {
e.stopPropagation();
toggleItem(item);
},
onKeyDown: (e) => handleTagKeyDown(e, index),
children: [
getOptionLabel(item),
/* @__PURE__ */ jsx(
CloseIcon,
{
className: `ml-1 h-4 w-4 ${typeof item !== "string" && (item == null ? void 0 : item.lozengeVariant) === "solid" ? "text-neutral-50" : "text-neutral-800"} `
}
)
]
}
) }, getOptionValue(item));
}),
remainingCount > 0 && /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
"span",
{
role: "status",
"aria-label": `${remainingCount} more items selected`,
className: "inline-flex items-center rounded-md bg-neutral-200 px-2 py-0.5 text-sm text-neutral-800",
children: [
"+",
remainingCount,
" more"
]
}
) })
] });
};
return /* @__PURE__ */ jsxs("div", { ref: localRef, className: clsx(slots.base({ className: classNames == null ? void 0 : classNames.base }), "max-w-xs"), children: [
/* @__PURE__ */ jsx(
Label,
{
id: `${id}-label`,
htmlFor: `${id}-input`,
isDisabled,
requiredHint: isRequired,
className: slots.label({ class: classNames == null ? void 0 : classNames.label }),
children: label
}
),
/* @__PURE__ */ jsxs("div", { className: "relative", children: [
/* @__PURE__ */ jsx(
"input",
{
ref: hiddenInputRef,
type: "hidden",
name,
value: Array.isArray(selectedItems) ? selectedItems.map(getOptionValue).join(",") : "",
form,
required: isRequired
}
),
/* @__PURE__ */ jsx("div", { className: slots.inputWrapper({ class: classNames == null ? void 0 : classNames.inputWrapper }), children: /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-wrap items-center gap-2", children: [
renderTags(),
/* @__PURE__ */ jsx(
Input,
{
ref: inputRef,
id: `${id}-input`,
autoComplete: "off",
"aria-autocomplete": "list",
onBlur,
className: clsx(
slots.input({
class: classNames == null ? void 0 : classNames.input
}),
"text-neutral-900 placeholder:text-neutral-600"
),
value: searchValue,
onChange: handleInputChange,
onKeyDown: handleInputKeyDown,
onClick: () => !isDisabled && setIsOpen(true),
placeholder: Array.isArray(selectedItems) && selectedItems.length === 0 ? `${placeholder}` : "",
"aria-expanded": isOpen,
"aria-controls": isOpen ? "multiselect-listbox" : void 0,
"aria-activedescendant": isOpen && activeIndex >= 0 ? `${id}-option-${activeIndex}` : void 0,
disabled: isDisabled,
required: isRequired && (!Array.isArray(selectedItems) || selectedItems.length === 0) && !searchValue,
"aria-invalid": isInvalid,
"aria-required": isRequired,
role: "combobox",
"aria-describedby": `${id}-selection-status ${errorId || ""}`,
"aria-haspopup": "listbox",
...otherprops
}
),
/* @__PURE__ */ jsx(
ChevronDownIcon,
{
height: 24,
width: 24,
onKeyDown: handleInputKeyDown,
onClick: () => !isDisabled && setIsOpen(!isOpen),
className: `${isOpen ? "rotate-180" : ""} cursor-pointer`
}
)
] }) }),
errorMessage ? /* @__PURE__ */ jsxs(
Text,
{
id: errorId,
slot: "errorMessage",
"aria-live": "polite",
elementType: "div",
className: slots.errorMessage({ class: classNames == null ? void 0 : classNames.errorMessage }),
children: [
errorIcon,
/* @__PURE__ */ jsx("span", { children: errorMessage })
]
}
) : description ? /* @__PURE__ */ jsx(
Text,
{
slot: "description",
elementType: "div",
className: slots.description({ class: classNames == null ? void 0 : classNames.description }),
children: /* @__PURE__ */ jsx("span", { children: description })
}
) : null,
/* @__PURE__ */ jsx("div", { id: `${id}-selection-status`, className: "sr-only", "aria-live": "polite", children: Array.isArray(selectedItems) && selectedItems.length > 0 ? `${selectedItems.length} items selected: ${selectedItems.map(getOptionLabel).join(", ")}` : "No items selected" }),
isOpen && filteredOptions.length > 0 && /* @__PURE__ */ jsx(
"ul",
{
ref: listboxRef,
role: "listbox",
id: "multiselect-listbox",
"aria-label": label,
"aria-multiselectable": "true",
className: "absolute z-10 mt-2 max-h-60 w-full overflow-auto rounded-md bg-neutral-50 py-2 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none",
children: filteredOptions.map((option, index) => {
const isSelected = Array.isArray(selectedItems) && selectedItems.some((item) => getOptionValue(item) === getOptionValue(option));
const isActive = index === activeIndex;
const lozengeStyles = getLozengeClasses(option);
return /* @__PURE__ */ jsxs(
"li",
{
ref: optionRefs.current[index],
role: "option",
id: `${id}-option-${index}`,
"aria-selected": isSelected,
tabIndex: isActive ? 0 : -1,
className: `relative flex cursor-pointer justify-between border-l-[3px] p-2 hover:bg-purple-50 focus:bg-purple-50 ${isActive ? "border-purple-600 bg-purple-50" : "border-transparent"} ${isSelected ? "font-medium" : ""}`,
onClick: () => toggleItem(option),
onKeyDown: (e) => handleOptionKeyDown(e, index, option),
onMouseEnter: () => setActiveIndex(index),
children: [
/* @__PURE__ */ jsx("span", { className: `block truncate text-sm ${lozengeStyles != null ? lozengeStyles : "text-neutral-900"}`, children: getOptionLabel(option) }),
isSelected && /* @__PURE__ */ jsx("span", { className: "flex items-center pl-1.5", children: /* @__PURE__ */ jsx(CheckIcon, { className: "h-5 w-5 text-purple-600" }) })
]
},
getOptionValue(option)
);
})
}
)
] })
] });
}
var _MultiSelect = forwardRef(MultiSelect);
export {
_MultiSelect
};