@trail-ui/react
Version:
958 lines (951 loc) • 37.1 kB
JavaScript
;
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/select/customSelect.tsx
var customSelect_exports = {};
__export(customSelect_exports, {
default: () => customSelect_default
});
module.exports = __toCommonJS(customSelect_exports);
var import_theme = require("@trail-ui/theme");
var import_react5 = __toESM(require("react"));
var import_icons = require("@trail-ui/icons");
// src/overlay/overlay.tsx
var import_react = __toESM(require("react"));
var import_react2 = require("react");
var import_jsx_runtime = require("react/jsx-runtime");
var Positions = {
top: "top",
topLeft: "topLeft",
topRight: "topRight",
bottom: "bottom",
bottomLeft: "bottomLeft",
bottomRight: "bottomRight",
left: "left",
leftTop: "leftTop",
leftBottom: "leftBottom",
right: "right",
rightTop: "rightTop",
rightBottom: "rightBottom"
};
function Overlay(props) {
var _a, _b, _c;
const [style, setStyle] = (0, import_react2.useState)({
top: 0,
left: 0,
transform: "",
position: "fixed"
});
const elementRef = (0, import_react2.useRef)(null);
const getMaxHeight = () => {
var _a2, _b2, _c2, _d, _e, _f, _g, _h;
const refEl = props.referenceElement.current;
if (!refEl) {
return;
}
const refRect = refEl.getBoundingClientRect();
let maxAvailableHeight = 0;
const windowHeight = window.innerHeight;
switch (props.position) {
case Positions.bottom:
case Positions.bottomLeft:
case Positions.bottomRight:
maxAvailableHeight = windowHeight - refRect.bottom - (((_a2 = props.offset) == null ? void 0 : _a2.y) || 0) * 2;
break;
case Positions.top:
case Positions.topLeft:
case Positions.topRight:
maxAvailableHeight = refRect.top - (((_b2 = props.offset) == null ? void 0 : _b2.y) || 0) * 2;
break;
default:
maxAvailableHeight = Math.min(
windowHeight - (((_c2 = props.offset) == null ? void 0 : _c2.y) || 0) * 2,
((_d = props.style) == null ? void 0 : _d.maxHeight) || Number.POSITIVE_INFINITY,
((_e = props.style) == null ? void 0 : _e.height) || Number.POSITIVE_INFINITY
);
}
if ((_f = props.style) == null ? void 0 : _f.maxHeight) {
maxAvailableHeight = maxAvailableHeight < ((_g = props.style) == null ? void 0 : _g.maxHeight) ? maxAvailableHeight : (_h = props.style) == null ? void 0 : _h.maxHeight;
}
return maxAvailableHeight;
};
const getMaxWidth = () => {
var _a2, _b2, _c2, _d, _e, _f, _g, _h;
const refEl = props.referenceElement.current;
const currentEl = elementRef.current;
if (!refEl || !currentEl) {
return;
}
const refRect = refEl.getBoundingClientRect();
let maxAvailableWidth = 0;
const windowWidth = window.innerWidth;
switch (props.position) {
case Positions.right:
case Positions.rightBottom:
case Positions.rightTop:
maxAvailableWidth = windowWidth - refRect.right - (((_a2 = props.offset) == null ? void 0 : _a2.x) || 0) * 2;
break;
case Positions.left:
case Positions.leftBottom:
case Positions.leftTop:
maxAvailableWidth = refRect.left - (((_b2 = props.offset) == null ? void 0 : _b2.x) || 0) * 2;
break;
default:
maxAvailableWidth = Math.min(
windowWidth - (((_c2 = props.offset) == null ? void 0 : _c2.x) || 0) * 2,
((_d = props.style) == null ? void 0 : _d.width) || Number.POSITIVE_INFINITY,
((_e = props.style) == null ? void 0 : _e.maxWidth) || Number.POSITIVE_INFINITY
);
}
if ((_f = props.style) == null ? void 0 : _f.maxWidth) {
maxAvailableWidth = maxAvailableWidth < ((_g = props.style) == null ? void 0 : _g.maxWidth) ? maxAvailableWidth : (_h = props.style) == null ? void 0 : _h.maxWidth;
}
return maxAvailableWidth;
};
const getUpdatedPositions = () => {
var _a2, _b2, _c2, _d, _e, _f, _g, _h, _i, _j, _k, _l;
const refEl = props.referenceElement.current;
if (!refEl) {
return;
}
const refRect = refEl.getBoundingClientRect();
let top = 0;
let left = 0;
let transform = "";
switch (props.position) {
case Positions.top:
top = refRect.top - (((_a2 = props.offset) == null ? void 0 : _a2.y) || 0);
left = refRect.left + refRect.width / 2;
transform = "translate(-50%, -100%)";
break;
case Positions.topLeft:
top = refRect.top - (((_b2 = props.offset) == null ? void 0 : _b2.y) || 0);
left = refRect.left;
transform = "translateY(-100%)";
break;
case Positions.topRight:
top = refRect.top - (((_c2 = props.offset) == null ? void 0 : _c2.y) || 0);
left = refRect.right;
transform = "translate(-100%, -100%)";
break;
case Positions.bottom:
top = refRect.bottom + (((_d = props.offset) == null ? void 0 : _d.y) || 0);
left = refRect.left + refRect.width / 2;
transform = "translateX(-50%)";
break;
case Positions.bottomLeft:
top = refRect.bottom + (((_e = props.offset) == null ? void 0 : _e.y) || 0);
left = refRect.left;
break;
case Positions.bottomRight:
top = refRect.bottom + (((_f = props.offset) == null ? void 0 : _f.y) || 0);
left = refRect.right;
transform = "translateX(-100%)";
break;
case Positions.left:
top = refRect.top + refRect.height / 2;
left = refRect.left - (((_g = props.offset) == null ? void 0 : _g.x) || 0);
transform = "translate(-100%,-50%)";
break;
case Positions.leftTop:
top = refRect.top;
left = refRect.left - (((_h = props.offset) == null ? void 0 : _h.x) || 0);
transform = "translateX(-100%)";
break;
case Positions.leftBottom:
top = refRect.bottom;
left = refRect.left - (((_i = props.offset) == null ? void 0 : _i.x) || 0);
transform = "translate(-100%, -100%)";
break;
case Positions.right:
top = refRect.top + refRect.height / 2;
left = refRect.right + (((_j = props.offset) == null ? void 0 : _j.x) || 0);
transform = "translateY(-50%)";
break;
case Positions.rightTop:
top = refRect.top;
left = refRect.right + (((_k = props.offset) == null ? void 0 : _k.x) || 0);
break;
case Positions.rightBottom:
top = refRect.bottom;
left = refRect.right + (((_l = props.offset) == null ? void 0 : _l.x) || 0);
transform = "translateY(-100%)";
break;
}
const maxHeight = getMaxHeight();
const maxWidth = getMaxWidth();
setStyle((prevState) => ({
...prevState,
top,
left,
transform,
...maxHeight && { maxHeight },
...maxWidth && { maxWidth }
}));
};
(0, import_react2.useLayoutEffect)(() => {
if (!props.referenceElement.current) {
return;
}
getUpdatedPositions();
const updatePositions = () => getUpdatedPositions();
window.addEventListener("resize", updatePositions);
window.addEventListener("scroll", updatePositions, true);
return () => {
window.removeEventListener("resize", updatePositions);
window.removeEventListener("scroll", updatePositions, true);
};
}, [props.referenceElement.current]);
if ((0, import_react2.isValidElement)(props.children)) {
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
props.onOverlayClick && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"div",
{
role: "button",
className: "z-2 fixed left-[0] top-[0] h-[100vh] w-[100vw]",
onClick: props.onOverlayClick,
onKeyDown: props.onOverlayClick,
"aria-label": "Close dropdown",
tabIndex: -1
}
),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"div",
{
style: {
...style,
overflow: "auto",
width: ((_a = props.style) == null ? void 0 : _a.width) || ((_b = props.referenceElement.current) == null ? void 0 : _b.getBoundingClientRect().width),
height: ((_c = props.style) == null ? void 0 : _c.height) || "fit-content",
zIndex: 30
},
className: "rounded-md border-[1px] bg-neutral-50 shadow-md",
children: import_react.default.cloneElement(props.children, { ref: elementRef })
}
)
] });
} else {
return props.children;
}
}
// src/multiselect/tw-field.tsx
var import_react4 = __toESM(require("react"));
var import_react_aria_components = require("react-aria-components");
var import_tailwind_merge2 = require("tailwind-merge");
// src/multiselect/tw-text.tsx
var import_tailwind_merge = require("tailwind-merge");
var import_react3 = __toESM(require("react"));
var import_jsx_runtime2 = require("react/jsx-runtime");
function Text({ className, elementType, children, ...props }) {
return import_react3.default.createElement(
elementType != null ? elementType : "p",
{
...props,
className: (0, import_tailwind_merge.twMerge)("flex gap-1 pt-1.5 text-xs text-neutral-700", className)
},
children
);
}
// src/multiselect/tw-field.tsx
var import_jsx_runtime3 = require("react/jsx-runtime");
var LabeledGroup = import_react4.default.forwardRef(function(props, ref) {
const labelId = import_react4.default.useId();
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_aria_components.LabelContext.Provider, { value: { id: labelId, elementType: "span" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_aria_components.GroupContext.Provider, { value: { "aria-labelledby": labelId }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
import_react_aria_components.Group,
{
...props,
ref,
className: (0, import_react_aria_components.composeRenderProps)(props.className, (className) => {
return (0, import_tailwind_merge2.twMerge)("relative flex flex-col", className);
})
}
) }) });
});
function Label({
requiredHint,
isDisabled,
...props
}) {
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
import_react_aria_components.Label,
{
...props,
"data-slot": "label",
className: (0, import_tailwind_merge2.twMerge)(
requiredHint && "after:ml-0.5 after:text-red-800 after:content-['*']",
isDisabled && "opacity-50",
props.className
)
}
);
}
var DescriptionContext = import_react4.default.createContext(null);
var InputFieldGroup = import_react4.default.forwardRef(
function InputFieldGroup2(props, ref) {
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
import_react_aria_components.Group,
{
...props,
"data-slot": "control",
ref,
className: (0, import_react_aria_components.composeRenderProps)(props.className, (className) => {
return (0, import_tailwind_merge2.twMerge)(
"group relative flex w-full items-center overflow-hidden rounded-md border bg-inherit shadow-sm",
"[&_svg]:text-muted",
"group-invalid:border-destructive",
// Disabled and readonly style
"[&:has(_[data-disabled=true])]:opacity-50",
"[&:has([readonly])]:opacity-50",
// Prevent double opacity
"[&:has(_[data-disabled=true])_[class*=opacity-]]:opacity-100",
"[&:has([readonly])_[class*=opacity-]]:opacity-100",
// Remove inside input/data-input border style
"[&_:is(input,[data-slot=control])]:border-none",
"[&_:is(input,[data-slot=control])]:shadow-none",
"[&_:is(input,[data-slot=control])]:ring-0",
className
);
})
}
);
}
);
var Input = import_react4.default.forwardRef(function Input2(props, ref) {
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
import_react_aria_components.Input,
{
...props,
ref,
className: (0, import_react_aria_components.composeRenderProps)(props.className, (className, { isDisabled, isInvalid }) => {
return (0, import_tailwind_merge2.twMerge)(
"flex w-full rounded-md border-none bg-inherit px-2 py-[5px] shadow-none outline-none",
"text-sm placeholder:text-neutral-600",
"[&[readonly]]:opacity-50",
isInvalid && "border-destructive",
isDisabled && "opacity-50",
className
);
})
}
);
});
// src/select/customSelect.tsx
var import_react_aria_components2 = require("react-aria-components");
var import_shared_utils = require("@trail-ui/shared-utils");
var import_jsx_runtime4 = require("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;
}
var CustomSelect = (0, import_react5.forwardRef)(
({
options,
label,
labelKey,
valueKey,
id = "select",
onChange,
onTriggerBlur,
onBlur,
classNames,
errorMessage,
description,
errorIcon = /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
import_icons.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: selectedValue,
form,
name,
maxOptionsBeforeConversionToComboBox = 6,
isCombobox,
position = Positions.bottom,
popover = { maxHeight: 240 },
onKeyDown,
onInputChange,
isLoading = false,
allowCustomInput = false,
renderCustomLabel,
...otherprops
}, ref) => {
const [isOpen, setIsOpen] = (0, import_react5.useState)(false);
const [searchValue, setSearchValue] = (0, import_react5.useState)("");
const [activeIndex, setActiveIndex] = (0, import_react5.useState)(-1);
const [value, setValue] = (0, import_react5.useState)({ label: "", value: "" });
const listboxRef = (0, import_react5.useRef)(null);
const inputRef = (0, import_react5.useRef)(null);
const localRef = (0, import_react5.useRef)(null);
const buttonRef = (0, import_react5.useRef)(null);
const optionRefs = (0, import_react5.useRef)([]);
const noSearchResultsRef = (0, import_react5.useRef)(null);
const hiddenInputRef = (0, import_react5.useRef)(null);
const refElementForOverlay = (0, import_react5.useRef)(null);
const slots = (0, import_react5.useMemo)(() => (0, import_theme.multiselect)(), []);
const isComponentCombobox = (0, import_react5.useMemo)(() => {
if (isCombobox !== void 0) {
return isCombobox;
} else {
return options.length > maxOptionsBeforeConversionToComboBox;
}
}, [isCombobox, options, maxOptionsBeforeConversionToComboBox]);
function getOptionLabel(option, isView) {
if (isView && renderCustomLabel && option.value) {
return renderCustomLabel == null ? void 0 : renderCustomLabel(option);
}
return (option == null ? void 0 : option[labelKey != null ? labelKey : "label"]) || "";
}
const getOptionValue = (option) => {
return (option == null ? void 0 : option[valueKey != null ? valueKey : "value"]) || "";
};
const resetIndex = () => setActiveIndex(-1);
const filteredOptions = (0, import_react5.useMemo)(() => {
const optList = [];
if (allowCustomInput) {
if (searchValue && options.findIndex(
(o) => getOptionLabel(o, false).toLowerCase() === searchValue.toLowerCase()
) === -1) {
optList.push({ label: searchValue, value: searchValue, isItalic: true });
} else if (selectedValue && options.findIndex((o) => o.value === selectedValue) === -1) {
optList.push({ label: selectedValue, value: selectedValue, isItalic: true });
}
}
return [
...optList,
...options.filter((option) => {
return getOptionLabel(option, false).toString().toLowerCase().includes(searchValue.toLowerCase());
})
];
}, [searchValue, options, selectedValue]);
const toggleDropdown = () => setIsOpen((prevState) => !prevState);
const toggleItem = (option) => {
if (isDisabled)
return;
let newOption = option;
if (option.value === selectedValue) {
newOption = { label: "", value: "" };
}
onChange(newOption.value);
setSearchValue("");
toggleDropdown();
if (inputRef.current) {
inputRef.current.focus();
inputRef.current.value = getOptionLabel(newOption, false);
}
if (buttonRef.current) {
buttonRef.current.focus();
}
if (hiddenInputRef.current) {
hiddenInputRef.current.value = getOptionLabel(newOption, false);
}
};
const handleInputChange = (e) => {
if (isDisabled)
return;
setSearchValue(e.target.value);
if (!isOpen)
toggleDropdown();
if (activeIndex === -1) {
setActiveIndex(0);
}
};
function getUpdatedIndex(current, action) {
switch (action) {
case MenuActions.First:
return 0;
case MenuActions.Last:
return filteredOptions.length;
case MenuActions.Previous:
return (activeIndex - 1 + filteredOptions.length) % filteredOptions.length;
case MenuActions.Next:
return (activeIndex + 1) % filteredOptions.length;
default:
return current;
}
}
const handleKeyDown = (e) => {
var _a, _b, _c, _d, _e, _f;
const action = getActionFromKey(e.key, isOpen);
if (isDisabled) {
e.preventDefault();
e.stopPropagation();
return;
}
if (e.key === Keys.Tab) {
if (isOpen) {
toggleDropdown();
resetIndex();
setSearchValue("");
}
return;
}
if (!action)
return;
if (MenuActions.Type !== action)
e.preventDefault();
switch (action) {
case MenuActions.Next:
case MenuActions.Last:
case MenuActions.First:
case MenuActions.Previous:
const nextIndex = getUpdatedIndex(activeIndex, action);
setActiveIndex(nextIndex);
(_a = noSearchResultsRef.current) == null ? void 0 : _a.focus();
(_c = (_b = optionRefs.current[nextIndex]) == null ? void 0 : _b.current) == null ? void 0 : _c.focus();
break;
case MenuActions.Type:
if (inputRef.current)
inputRef.current.focus();
break;
case MenuActions.CloseSelect:
if (activeIndex >= 0) {
(_d = optionRefs.current[activeIndex].current) == null ? void 0 : _d.click();
}
break;
case MenuActions.Close:
handleOnClick({ detail: 1 });
setSearchValue("");
resetIndex();
(_e = inputRef.current) == null ? void 0 : _e.focus();
(_f = buttonRef.current) == null ? void 0 : _f.focus();
break;
case MenuActions.Open:
handleOnClick({ detail: 1 });
break;
}
};
const handleOnClick = (e) => {
if (!isDisabled && (e == null ? void 0 : e.detail) === 1) {
toggleDropdown();
if (isOpen) {
resetIndex();
}
}
};
function mergeRefs(...refs) {
return (value2) => {
for (const ref2 of refs) {
if (!ref2)
continue;
if (typeof ref2 === "function") {
ref2(value2);
} else {
ref2.current = value2;
}
}
};
}
function onComponentBlur(e) {
var _a;
const selectedOption = filteredOptions.find((o) => o.value === selectedValue);
if (e.relatedTarget && !((_a = localRef.current) == null ? void 0 : _a.contains(e.relatedTarget))) {
if (selectedOption) {
if (inputRef.current) {
inputRef.current.value = getOptionLabel(selectedOption, false);
}
if (hiddenInputRef.current) {
hiddenInputRef.current.value = getOptionLabel(selectedOption, false);
}
}
onBlur == null ? void 0 : onBlur(e);
}
}
(0, import_react5.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);
}, []);
(0, import_react5.useEffect)(() => {
const index = options.findIndex((item) => item.value === selectedValue);
const newValue = index === -1 ? allowCustomInput ? { label: selectedValue, value: selectedValue, isItalic: true } : { label: "", value: "" } : options[index];
setValue(newValue);
if (inputRef.current) {
inputRef.current.value = getOptionLabel(newValue, false);
}
if (hiddenInputRef.current) {
hiddenInputRef.current.value = getOptionLabel(newValue, false);
}
}, [selectedValue, options]);
(0, import_react5.useEffect)(() => {
var _a;
if (isOpen) {
optionRefs.current = filteredOptions.map(
(_, i) => optionRefs.current[i] || import_react5.default.createRef()
);
if (filteredOptions.length > 1 && !isCombobox) {
setActiveIndex(0);
}
}
(_a = buttonRef.current) == null ? void 0 : _a.setAttribute("role", "combobox");
}, [isOpen]);
(0, import_react5.useEffect)(() => {
var _a;
if (filteredOptions.length > 0) {
resetIndex();
}
if (isRequired) {
(_a = buttonRef.current) == null ? void 0 : _a.setAttribute("aria-required", String(isRequired));
}
}, [filteredOptions]);
(0, import_react5.useEffect)(() => {
var _a, _b;
if (isOpen && activeIndex >= 0) {
requestAnimationFrame(() => {
var _a2, _b2;
(_b2 = (_a2 = optionRefs.current[activeIndex]) == null ? void 0 : _a2.current) == null ? void 0 : _b2.scrollIntoView({ block: "nearest" });
});
}
if (isOpen)
(_a = buttonRef.current) == null ? void 0 : _a.setAttribute("aria-activedescendant", `${id}-option-${activeIndex}`);
else
(_b = buttonRef.current) == null ? void 0 : _b.removeAttribute("aria-activedescendant");
}, [activeIndex]);
(0, import_react5.useEffect)(() => {
var _a;
(_a = buttonRef.current) == null ? void 0 : _a.setAttribute("data-invalid", `${isInvalid}`);
}, [isInvalid, options]);
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
"div",
{
ref: localRef,
className: slots.base({ class: classNames == null ? void 0 : classNames.base }),
onBlur: onComponentBlur,
children: [
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
Label,
{
id: `${id}-label`,
isDisabled,
requiredHint: isRequired,
className: slots.label({ class: classNames == null ? void 0 : classNames.label }),
children: label
}
),
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
"input",
{
ref: hiddenInputRef,
type: "hidden",
name,
value: getOptionValue(value),
form,
required: isRequired
}
),
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
"div",
{
ref: refElementForOverlay,
className: slots.inputWrapper({ className: classNames == null ? void 0 : classNames.inputWrapper }),
children: [
isComponentCombobox ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
Input,
{
id,
ref: mergeRefs(inputRef, ref),
autoComplete: "off",
"aria-busy": isLoading,
"aria-autocomplete": "list",
"aria-labelledby": `${id}-label`,
onBlur: onTriggerBlur,
className: slots.input({ class: classNames == null ? void 0 : classNames.input }),
onChange: (e) => {
handleInputChange(e);
onInputChange == null ? void 0 : onInputChange(e);
},
onKeyDown: (e) => {
handleKeyDown(e);
onKeyDown == null ? void 0 : onKeyDown(e);
},
onClick: handleOnClick,
placeholder: !getOptionValue(value) ? placeholder : "",
"aria-expanded": isOpen,
"aria-controls": isOpen ? "select-combobox" : void 0,
"aria-activedescendant": isOpen && activeIndex >= 0 ? `${id}-option-${activeIndex}` : void 0,
disabled: isDisabled,
"aria-invalid": isInvalid,
"aria-required": isRequired,
role: "combobox",
"aria-describedby": errorId || "",
"aria-haspopup": "listbox",
...otherprops
}
) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
import_react_aria_components2.Button,
{
id,
ref: mergeRefs(buttonRef, ref),
onKeyDown: (e) => {
handleKeyDown(e);
onKeyDown == null ? void 0 : onKeyDown(e);
},
onClick: handleOnClick,
onBlur: onTriggerBlur,
className: (0, import_shared_utils.clsx)(
slots.input({ class: classNames == null ? void 0 : classNames.input }),
"text-left",
value.value ? "text-neutral-900" : "text-neutral-600"
),
"aria-expanded": isOpen,
"aria-controls": isOpen ? "select-listbox" : void 0,
"aria-activedescendant": isOpen && activeIndex >= 0 ? `${id}-option-${activeIndex}` : void 0,
"aria-invalid": isInvalid,
"aria-required": isRequired,
"aria-describedby": errorId || "",
"aria-labelledby": `${id}-label`,
isDisabled,
"aria-haspopup": "listbox",
...otherprops,
children: getOptionLabel(value, true) || placeholder
}
),
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
import_icons.ChevronDownIcon,
{
height: 24,
width: 24,
onKeyDown: handleKeyDown,
onClick: (e) => {
var _a, _b;
handleOnClick(e);
(_a = inputRef.current) == null ? void 0 : _a.focus();
(_b = buttonRef.current) == null ? void 0 : _b.focus();
},
className: `${isOpen ? "rotate-180" : ""} cursor-pointer`
}
)
]
}
),
errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
Text,
{
id: errorId,
slot: "errorMessage",
elementType: "div",
className: slots.errorMessage({
class: classNames == null ? void 0 : classNames.errorMessage
}),
children: [
errorIcon,
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: errorMessage })
]
}
) : description ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
Text,
{
slot: "description",
elementType: "div",
className: slots.description({ class: classNames == null ? void 0 : classNames.description }),
children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: description })
}
) : null,
isOpen && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
Overlay,
{
referenceElement: refElementForOverlay,
position,
style: popover,
offset: { x: 8, y: 8 },
children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
"ul",
{
ref: listboxRef,
role: "listbox",
id: `select-${isComponentCombobox ? "combobox " : "listbox"}`,
"aria-label": label,
"aria-busy": isLoading,
className: slots.popover({ className: classNames == null ? void 0 : classNames.popover }),
children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
"li",
{
id: `${id}-option-loading`,
className: (0, import_shared_utils.clsx)(
slots.listboxItem({
className: classNames == null ? void 0 : classNames.listboxItem
})
),
children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
"span",
{
className: slots.listBoxItemLabel({
className: classNames == null ? void 0 : classNames.listBoxItemLabel
}),
children: "Loading ..."
}
)
}
) : filteredOptions.length > 0 ? filteredOptions.map((option, index) => {
const isActive = index === activeIndex;
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
"li",
{
ref: optionRefs.current[index],
role: "option",
id: `${id}-option-${index}`,
"aria-selected": getOptionValue(value) === getOptionValue(option),
tabIndex: isActive ? 0 : -1,
className: (0, import_shared_utils.clsx)(
slots.listboxItem({
className: classNames == null ? void 0 : classNames.listboxItem
}),
(option == null ? void 0 : option.isItalic) ? "italic" : "",
`${isActive ? "border-purple-600 bg-purple-50" : "border-transparent"} ${getOptionValue(value) === getOptionValue(option) ? "font-medium" : ""}`
),
onClick: () => toggleItem(option),
onKeyDown: handleKeyDown,
onMouseEnter: () => {
var _a;
setActiveIndex(index);
(_a = optionRefs.current[index].current) == null ? void 0 : _a.focus();
},
children: [
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
"span",
{
className: slots.listBoxItemLabel({
className: classNames == null ? void 0 : classNames.listBoxItemLabel
}),
children: getOptionLabel(option, true)
}
),
getOptionValue(value) === getOptionValue(option) && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "flex items-center pl-1.5", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons.CheckIcon, { className: "h-5 w-5 text-purple-600" }) })
]
},
getOptionValue(option)
);
}) : filteredOptions.length === 0 && options.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
"li",
{
id: `${id}-option-no-data`,
className: (0, import_shared_utils.clsx)(
slots.listboxItem({
className: classNames == null ? void 0 : classNames.listboxItem
})
),
children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
"span",
{
className: slots.listBoxItemLabel({
className: classNames == null ? void 0 : classNames.listBoxItemLabel
}),
children: "No Data"
}
)
}
) : filteredOptions.length === 0 && options.length !== 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
"li",
{
id: `${id}-option-no-data`,
ref: noSearchResultsRef,
className: (0, import_shared_utils.clsx)(
slots.listboxItem({
className: classNames == null ? void 0 : classNames.listboxItem
})
),
tabIndex: 0,
children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
"span",
{
className: slots.listBoxItemLabel({
className: classNames == null ? void 0 : classNames.listBoxItemLabel
}),
children: "No Search Results"
}
)
}
) : ""
}
)
}
)
]
}
);
}
);
CustomSelect.displayName = "CustomSelectComponent";
var customSelect_default = CustomSelect;