@trail-ui/react
Version:
789 lines (769 loc) • 30.2 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/index.ts
var select_exports = {};
__export(select_exports, {
Select: () => _Select,
SelectItem: () => ListBoxItem,
SelectSection: () => ListBoxSection
});
module.exports = __toCommonJS(select_exports);
// src/listbox/listbox.tsx
var import_shared_utils = require("@trail-ui/shared-utils");
var import_theme = require("@trail-ui/theme");
var import_react = require("react");
var import_react_aria_components = require("react-aria-components");
var import_jsx_runtime = require("react/jsx-runtime");
var InternalListBoxContext = (0, import_react.createContext)(
{}
);
function ListBox(props) {
const { children, className, classNames, itemClasses, ...otherProps } = props;
const slots = (0, import_react.useMemo)(() => (0, import_theme.menu)(), []);
const baseStyles = (0, import_shared_utils.clsx)(classNames == null ? void 0 : classNames.base, className);
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InternalListBoxContext.Provider, { value: { itemClasses }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_aria_components.ListBox, { className: slots.base({ class: baseStyles }), ...otherProps, children }) });
}
// src/listbox/listbox-item.tsx
var import_shared_utils2 = require("@trail-ui/shared-utils");
var import_theme2 = require("@trail-ui/theme");
var import_react2 = require("react");
var import_react_aria_components2 = require("react-aria-components");
// src/listbox/listbox-selected-icon.tsx
var import_jsx_runtime2 = require("react/jsx-runtime");
function ListBoxSelectedIcon(props) {
const { isSelected, ...otherProps } = props;
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"svg",
{
"aria-hidden": "true",
"data-selected": isSelected,
role: "presentation",
viewBox: "0 0 24 24",
...otherProps,
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"polyline",
{
fill: "none",
points: "1 9 7 14 15 4",
stroke: "currentColor",
strokeDasharray: 22,
strokeDashoffset: isSelected ? 44 : 66,
strokeWidth: 2.5,
style: {
transition: "stroke-dashoffset 200ms ease"
}
}
)
}
);
}
// src/listbox/listbox-item.tsx
var import_jsx_runtime3 = require("react/jsx-runtime");
function ListBoxItem(props) {
const context = (0, import_react2.useContext)(InternalListBoxContext);
const {
children,
description,
startContent,
endContent,
selectedIcon,
className,
classNames = context.itemClasses,
...otherProps
} = props;
const slots = (0, import_react2.useMemo)(() => (0, import_theme2.menuItem)(), []);
const baseStyles = (0, import_shared_utils2.clsx)(classNames == null ? void 0 : classNames.base, className);
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
import_react_aria_components2.ListBoxItem,
{
...otherProps,
textValue: "ListBoxItem",
className: slots.base({ class: baseStyles }),
children: ({ isSelected, isDisabled, selectionMode }) => {
const selectedContent = () => {
const defaultIcon = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ListBoxSelectedIcon, { isSelected });
if (typeof selectedIcon === "function") {
return selectedIcon({ icon: defaultIcon, isSelected, isDisabled });
}
if (selectedIcon)
return selectedIcon;
return defaultIcon;
};
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
startContent,
description ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: [
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_aria_components2.Text, { slot: "label", className: slots.title({ class: classNames == null ? void 0 : classNames.title }), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children }) }),
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
import_react_aria_components2.Text,
{
slot: "description",
className: slots.description({ class: classNames == null ? void 0 : classNames.description }),
children: description
}
)
] }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_aria_components2.Text, { slot: "label", className: slots.title({ class: classNames == null ? void 0 : classNames.title }), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children }) }),
isSelected && selectionMode !== "none" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"span",
{
"aria-hidden": "true",
className: slots.selectedIcon({ class: classNames == null ? void 0 : classNames.selectedIcon }),
children: selectedContent()
}
),
endContent
] });
}
}
);
}
// src/listbox/listbox-section.tsx
var import_shared_utils3 = require("@trail-ui/shared-utils");
var import_theme3 = require("@trail-ui/theme");
var import_react3 = require("react");
var import_react_aria_components3 = require("react-aria-components");
var import_jsx_runtime4 = require("react/jsx-runtime");
function ListBoxSection(props) {
const { title, children, className, classNames, ...otherProps } = props;
const slots = (0, import_react3.useMemo)(() => (0, import_theme3.menuSection)(), []);
const baseStyles = (0, import_shared_utils3.clsx)(classNames == null ? void 0 : classNames.base, className);
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_aria_components3.Section, { "data-group": "true", className: slots.base({ class: baseStyles }), ...otherProps, children: [
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_aria_components3.Header, { className: slots.header({ class: classNames == null ? void 0 : classNames.header }), children: title }),
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children })
] });
}
// src/select/select.tsx
var import_icons2 = require("@trail-ui/icons");
var import_shared_utils6 = require("@trail-ui/shared-utils");
var import_theme6 = require("@trail-ui/theme");
var import_react8 = require("react");
var import_react_aria_components5 = require("react-aria-components");
// src/spinner/spinner.tsx
var import_theme4 = require("@trail-ui/theme");
var import_react4 = require("react");
// src/spinner/spinners/bars.tsx
var import_jsx_runtime5 = require("react/jsx-runtime");
var Bars = (props) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("svg", { viewBox: "0 0 135 140", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", ...props, children: [
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("rect", { y: "10", width: "15", height: "120", rx: "6", children: [
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
"animate",
{
attributeName: "height",
begin: "0.5s",
dur: "1s",
values: "120;110;100;90;80;70;60;50;40;140;120",
calcMode: "linear",
repeatCount: "indefinite"
}
),
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
"animate",
{
attributeName: "y",
begin: "0.5s",
dur: "1s",
values: "10;15;20;25;30;35;40;45;50;0;10",
calcMode: "linear",
repeatCount: "indefinite"
}
)
] }),
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("rect", { x: "30", y: "10", width: "15", height: "120", rx: "6", children: [
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
"animate",
{
attributeName: "height",
begin: "0.25s",
dur: "1s",
values: "120;110;100;90;80;70;60;50;40;140;120",
calcMode: "linear",
repeatCount: "indefinite"
}
),
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
"animate",
{
attributeName: "y",
begin: "0.25s",
dur: "1s",
values: "10;15;20;25;30;35;40;45;50;0;10",
calcMode: "linear",
repeatCount: "indefinite"
}
)
] }),
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("rect", { x: "60", width: "15", height: "140", rx: "6", children: [
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
"animate",
{
attributeName: "height",
begin: "0s",
dur: "1s",
values: "120;110;100;90;80;70;60;50;40;140;120",
calcMode: "linear",
repeatCount: "indefinite"
}
),
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
"animate",
{
attributeName: "y",
begin: "0s",
dur: "1s",
values: "10;15;20;25;30;35;40;45;50;0;10",
calcMode: "linear",
repeatCount: "indefinite"
}
)
] }),
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("rect", { x: "90", y: "10", width: "15", height: "120", rx: "6", children: [
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
"animate",
{
attributeName: "height",
begin: "0.25s",
dur: "1s",
values: "120;110;100;90;80;70;60;50;40;140;120",
calcMode: "linear",
repeatCount: "indefinite"
}
),
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
"animate",
{
attributeName: "y",
begin: "0.25s",
dur: "1s",
values: "10;15;20;25;30;35;40;45;50;0;10",
calcMode: "linear",
repeatCount: "indefinite"
}
)
] }),
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("rect", { x: "120", y: "10", width: "15", height: "120", rx: "6", children: [
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
"animate",
{
attributeName: "height",
begin: "0.5s",
dur: "1s",
values: "120;110;100;90;80;70;60;50;40;140;120",
calcMode: "linear",
repeatCount: "indefinite"
}
),
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
"animate",
{
attributeName: "y",
begin: "0.5s",
dur: "1s",
values: "10;15;20;25;30;35;40;45;50;0;10",
calcMode: "linear",
repeatCount: "indefinite"
}
)
] })
] });
// src/spinner/spinners/dots.tsx
var import_jsx_runtime6 = require("react/jsx-runtime");
var Dots = (props) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("svg", { viewBox: "0 0 120 30", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", ...props, children: [
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("circle", { cx: "15", cy: "15", r: "15", children: [
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
"animate",
{
attributeName: "r",
from: "15",
to: "15",
begin: "0s",
dur: "0.8s",
values: "15;9;15",
calcMode: "linear",
repeatCount: "indefinite"
}
),
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
"animate",
{
attributeName: "fill-opacity",
from: "1",
to: "1",
begin: "0s",
dur: "0.8s",
values: "1;.5;1",
calcMode: "linear",
repeatCount: "indefinite"
}
)
] }),
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("circle", { cx: "60", cy: "15", r: "9", fillOpacity: "0.3", children: [
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
"animate",
{
attributeName: "r",
from: "9",
to: "9",
begin: "0s",
dur: "0.8s",
values: "9;15;9",
calcMode: "linear",
repeatCount: "indefinite"
}
),
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
"animate",
{
attributeName: "fill-opacity",
from: "0.5",
to: "0.5",
begin: "0s",
dur: "0.8s",
values: ".5;1;.5",
calcMode: "linear",
repeatCount: "indefinite"
}
)
] }),
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("circle", { cx: "105", cy: "15", r: "15", children: [
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
"animate",
{
attributeName: "r",
from: "15",
to: "15",
begin: "0s",
dur: "0.8s",
values: "15;9;15",
calcMode: "linear",
repeatCount: "indefinite"
}
),
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
"animate",
{
attributeName: "fill-opacity",
from: "1",
to: "1",
begin: "0s",
dur: "0.8s",
values: "1;.5;1",
calcMode: "linear",
repeatCount: "indefinite"
}
)
] })
] });
// src/spinner/spinners/ring.tsx
var import_jsx_runtime7 = require("react/jsx-runtime");
var Ring = (props) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
"svg",
{
fill: "none",
stroke: "currentColor",
viewBox: "0 0 38 38",
xmlns: "http://www.w3.org/2000/svg",
...props,
children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("g", { fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("g", { transform: "translate(2.5 2.5)", strokeWidth: "5", children: [
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("circle", { strokeOpacity: ".5", cx: "16", cy: "16", r: "16" }),
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M32 16c0-9.94-8.06-16-16-16", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
"animateTransform",
{
attributeName: "transform",
type: "rotate",
from: "0 16 16",
to: "360 16 16",
dur: "1s",
repeatCount: "indefinite"
}
) })
] }) })
}
);
// src/spinner/spinners/spin.tsx
var import_jsx_runtime8 = require("react/jsx-runtime");
var Spin = (props) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("svg", { stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("g", { children: [
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("circle", { cx: "12", cy: "12", r: "9.5", fill: "none", strokeWidth: "3", strokeLinecap: "round", children: [
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
"animate",
{
attributeName: "stroke-dasharray",
dur: "1.5s",
calcMode: "spline",
values: "0 150;42 150;42 150;42 150",
keyTimes: "0;0.475;0.95;1",
keySplines: "0.42,0,0.58,1;0.42,0,0.58,1;0.42,0,0.58,1",
repeatCount: "indefinite"
}
),
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
"animate",
{
attributeName: "stroke-dashoffset",
dur: "1.5s",
calcMode: "spline",
values: "0;-16;-59;-59",
keyTimes: "0;0.475;0.95;1",
keySplines: "0.42,0,0.58,1;0.42,0,0.58,1;0.42,0,0.58,1",
repeatCount: "indefinite"
}
)
] }),
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
"animateTransform",
{
attributeName: "transform",
type: "rotate",
dur: "2s",
values: "0 12 12;360 12 12",
repeatCount: "indefinite"
}
)
] }) });
// src/spinner/spinner.tsx
var import_jsx_runtime9 = require("react/jsx-runtime");
var SPINNERS = {
bars: Bars,
dots: Dots,
ring: Ring,
spin: Spin
};
var DEFAULT_SPINNER = "spin";
function Spinner(props, ref) {
const { className, variant = DEFAULT_SPINNER, color, size, ...spinnerProps } = props;
const defaultSpinner = variant in SPINNERS ? variant : DEFAULT_SPINNER;
const SpinnerComponent = SPINNERS[defaultSpinner];
const styles = (0, import_react4.useMemo)(
() => (0, import_theme4.spinner)({
color,
size,
className
}),
[className, color, size]
);
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SpinnerComponent, { role: "presentation", className: styles, ref, ...spinnerProps });
}
var _Spinner = (0, import_react4.forwardRef)(Spinner);
// src/input/input.tsx
var import_icons = require("@trail-ui/icons");
var import_shared_utils5 = require("@trail-ui/shared-utils");
var import_theme5 = require("@trail-ui/theme");
var import_react7 = require("react");
var import_react_aria_components4 = require("react-aria-components");
// src/input/use-input.ts
var import_shared_utils4 = require("@trail-ui/shared-utils");
var import_react6 = require("react");
var import_react_aria2 = require("react-aria");
// src/_utils/utils.tsx
var import_utils = require("@react-aria/utils");
var import_react5 = __toESM(require("react"));
var import_react_aria = require("react-aria");
var import_react_dom = __toESM(require("react-dom"));
var import_jsx_runtime10 = require("react/jsx-runtime");
if (typeof HTMLTemplateElement !== "undefined") {
const getFirstChild = Object.getOwnPropertyDescriptor(Node.prototype, "firstChild").get;
Object.defineProperty(HTMLTemplateElement.prototype, "firstChild", {
configurable: true,
enumerable: true,
get: function() {
if (this.dataset.reactAriaHidden) {
return this.content.firstChild;
} else {
return getFirstChild.call(this);
}
}
});
}
var HiddenContext = (0, import_react5.createContext)(false);
var hiddenFragment = typeof DocumentFragment !== "undefined" ? new DocumentFragment() : null;
function useDOMRef(ref) {
const domRef = (0, import_react5.useRef)(null);
(0, import_react5.useImperativeHandle)(ref, () => domRef.current);
return domRef;
}
// src/input/use-input.ts
function useInput(props) {
const { ref, onClear, ...otherProps } = props;
const domRef = useDOMRef(ref);
const handleClear = (0, import_react6.useCallback)(() => {
if (domRef == null ? void 0 : domRef.current) {
domRef.current.value = "";
domRef.current.focus();
}
onClear == null ? void 0 : onClear();
}, [domRef, onClear]);
const { hoverProps, isHovered } = (0, import_react_aria2.useHover)({});
const { isFocused, isFocusVisible, focusProps } = (0, import_react_aria2.useFocusRing)({
isTextInput: true,
autoFocus: props.autoFocus
});
const { focusProps: clearFocusProps, isFocusVisible: isClearButtonFocusVisible } = (0, import_react_aria2.useFocusRing)();
const { pressProps: clearPressProps } = (0, import_react_aria2.usePress)({
isDisabled: !!(props == null ? void 0 : props.disabled),
onPress: handleClear
});
const inputValue = props["data-value"];
const isFilled = !!inputValue;
const isInvalid = !!props["aria-invalid"] && props["aria-invalid"] !== "false";
const getInputWrapperProps = (0, import_react6.useCallback)(
(inputWrapperProps = {}) => {
return {
"data-filled": (0, import_shared_utils4.dataAttr)(isFilled),
"data-focused": (0, import_shared_utils4.dataAttr)(isFocused),
"data-focus-visible": (0, import_shared_utils4.dataAttr)(isFocusVisible),
"data-hovered": (0, import_shared_utils4.dataAttr)(isHovered),
"data-disabled": (0, import_shared_utils4.dataAttr)(props.disabled),
"data-invalid": (0, import_shared_utils4.dataAttr)(isInvalid),
...inputWrapperProps
};
},
[isFilled, isFocusVisible, isFocused, isHovered, isInvalid, props.disabled]
);
const getInputProps = (0, import_react6.useCallback)(
(inputProps = {}) => {
return {
"data-filled": (0, import_shared_utils4.dataAttr)(isFilled),
...(0, import_react_aria2.mergeProps)(otherProps, focusProps, hoverProps, inputProps),
ref: domRef
};
},
[domRef, focusProps, hoverProps, isFilled, otherProps]
);
const getClearButtonProps = (0, import_react6.useCallback)(
(clearButtonProps = {}) => {
return {
role: "button",
tabIndex: 0,
"data-focus-visible": (0, import_shared_utils4.dataAttr)(isClearButtonFocusVisible),
...(0, import_react_aria2.mergeProps)(clearFocusProps, clearPressProps, clearButtonProps)
};
},
[clearFocusProps, clearPressProps, isClearButtonFocusVisible]
);
return {
domRef,
getInputWrapperProps,
getInputProps,
getClearButtonProps
};
}
// src/input/input.tsx
var import_jsx_runtime11 = require("react/jsx-runtime");
function Input(props, ref) {
[props, ref] = (0, import_react_aria_components4.useContextProps)(props, ref, import_react_aria_components4.InputContext);
const { classNames, className, variant, fullWidth, startContent, endContent, ...otherProps } = props;
const { getInputWrapperProps, getInputProps, getClearButtonProps, domRef } = useInput({
...otherProps,
ref
});
const isClearable = !!props.onClear;
const slots = (0, import_react7.useMemo)(
() => (0, import_theme5.input)({ variant, fullWidth, isClearable }),
[fullWidth, variant, isClearable]
);
const end = (0, import_react7.useMemo)(() => {
if (isClearable) {
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
"span",
{
...getClearButtonProps(),
className: slots.clearButton({ class: classNames == null ? void 0 : classNames.clearButton }),
children: endContent || /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_icons.XCircleFilledIcon, {})
}
);
}
return endContent;
}, [classNames == null ? void 0 : classNames.clearButton, endContent, getClearButtonProps, isClearable, slots]);
const baseStyles = (0, import_shared_utils5.clsx)(classNames == null ? void 0 : classNames.base, className);
return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: slots.base({ class: baseStyles }), ...getInputWrapperProps(), children: [
startContent,
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
"input",
{
...getInputProps(),
className: slots.input({ class: classNames == null ? void 0 : classNames.input }),
ref: domRef
}
),
end
] });
}
var _Input = (0, import_react7.forwardRef)(Input);
// src/select/select.tsx
var import_jsx_runtime12 = require("react/jsx-runtime");
function Select(props, ref) {
const [isOpen, setIsOpen] = (0, import_react8.useState)(false);
const [noResultsFound, setNoResultsFound] = (0, import_react8.useState)(false);
const [filteredResults, setFilteredResults] = (0, import_react8.useState)([]);
const searchRef = (0, import_react8.useRef)(null);
const {
children,
className,
classNames,
label,
description,
errorMessage,
items,
placement = "bottom",
isLoading = false,
isSearchable = true,
selectorIcon = isOpen ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_icons2.ChevronUpIcon, { height: 24, width: 24 }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_icons2.ChevronDownIcon, { height: 24, width: 24 }),
spinnerProps,
popoverProps,
listBoxProps,
...otherProps
} = props;
const onInputChange = (value) => {
if (Array.isArray(children)) {
const filteredResults2 = children.filter((item) => {
return item.props.children.toLowerCase().includes(value.toLowerCase());
});
setFilteredResults(filteredResults2);
setNoResultsFound(filteredResults2.length === 0 && value.length > 0);
}
};
(0, import_react8.useEffect)(() => {
setFilteredResults([]);
setNoResultsFound(false);
requestAnimationFrame(() => {
var _a;
(_a = searchRef == null ? void 0 : searchRef.current) == null ? void 0 : _a.focus();
});
}, [isOpen]);
const slots = (0, import_react8.useMemo)(() => (0, import_theme6.select)(), []);
const baseStyles = (0, import_shared_utils6.clsx)(classNames == null ? void 0 : classNames.base, className);
const clonedIcon = (0, import_react8.cloneElement)(selectorIcon, {
"aria-hidden": true,
className: slots.selectorIcon({ class: classNames == null ? void 0 : classNames.selectorIcon })
});
const renderIndicator = (0, import_react8.useMemo)(() => {
if (isLoading) {
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
_Spinner,
{
"aria-hidden": true,
color: "current",
size: "sm",
...spinnerProps,
className: slots.spinner({ class: classNames == null ? void 0 : classNames.spinner })
}
);
}
return clonedIcon;
}, [isLoading, clonedIcon, spinnerProps, slots, classNames == null ? void 0 : classNames.spinner]);
return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
import_react_aria_components5.Select,
{
ref,
isOpen,
onOpenChange: setIsOpen,
className: slots.base({ class: baseStyles }),
...otherProps,
children: [
label && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_aria_components5.Label, { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label }),
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
"div",
{
className: slots.mainWrapper({ class: classNames == null ? void 0 : classNames.mainWrapper }),
role: "combobox",
"aria-expanded": isOpen,
"aria-controls": "listbox-id",
children: [
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react_aria_components5.Button, { className: slots.trigger({ class: classNames == null ? void 0 : classNames.trigger }), children: [
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_aria_components5.SelectValue, { className: slots.value({ class: classNames == null ? void 0 : classNames.value }) }),
renderIndicator
] }),
errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
import_react_aria_components5.Text,
{
slot: "errorMessage",
elementType: "div",
className: `${slots.errorMessage({ class: classNames == null ? void 0 : classNames.errorMessage })} flex gap-1`,
children: [
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
import_icons2.ErrorIcon,
{
height: 16,
width: 16,
className: "text-red-800 dark:text-red-600",
role: "img",
"aria-label": "Error",
"aria-hidden": "false"
}
),
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children: errorMessage })
]
}
) : description ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
import_react_aria_components5.Text,
{
slot: "description",
elementType: "div",
className: slots.description({ class: classNames == null ? void 0 : classNames.description }),
children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children: description })
}
) : null
]
}
),
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
import_react_aria_components5.Popover,
{
placement,
className: slots.popover({ class: classNames == null ? void 0 : classNames.popover }),
...popoverProps,
children: [
isSearchable && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "w-full px-2 pb-2", children: [
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
_Input,
{
ref: searchRef,
variant: "compact",
"aria-label": "Search",
placeholder: "Search",
startContent: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_icons2.SearchIcon, { height: 16, width: 16 }),
onChange: (e) => onInputChange(e.target.value),
className: slots.searchInput({ class: classNames == null ? void 0 : classNames.searchInput })
}
),
noResultsFound && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "mt-4 text-center text-sm text-neutral-400", children: "No results found" })
] }),
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ListBox, { id: "listbox-id", ...listBoxProps, items, children: (filteredResults == null ? void 0 : filteredResults.length) > 0 ? filteredResults : noResultsFound ? [] : children })
]
}
)
]
}
);
}
var _Select = (0, import_react8.forwardRef)(Select);
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
Select,
SelectItem,
SelectSection
});