@trail-ui/react
Version:
705 lines (693 loc) • 26.4 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/tanstackTable/tanstack-table-faceted-filter.tsx
var tanstack_table_faceted_filter_exports = {};
__export(tanstack_table_faceted_filter_exports, {
TanstackTableFacetedFilter: () => TanstackTableFacetedFilter
});
module.exports = __toCommonJS(tanstack_table_faceted_filter_exports);
var React2 = __toESM(require("react"));
// src/button/button.tsx
var import_react2 = require("react");
var import_react_aria_components = require("react-aria-components");
var import_theme2 = require("@trail-ui/theme");
// src/spinner/spinner.tsx
var import_theme = require("@trail-ui/theme");
var import_react = require("react");
// src/spinner/spinners/bars.tsx
var import_jsx_runtime = require("react/jsx-runtime");
var Bars = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { viewBox: "0 0 135 140", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", ...props, children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("rect", { y: "10", width: "15", height: "120", rx: "6", children: [
/* @__PURE__ */ (0, import_jsx_runtime.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_runtime.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_runtime.jsxs)("rect", { x: "30", y: "10", width: "15", height: "120", rx: "6", children: [
/* @__PURE__ */ (0, import_jsx_runtime.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_runtime.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_runtime.jsxs)("rect", { x: "60", width: "15", height: "140", rx: "6", children: [
/* @__PURE__ */ (0, import_jsx_runtime.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_runtime.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_runtime.jsxs)("rect", { x: "90", y: "10", width: "15", height: "120", rx: "6", children: [
/* @__PURE__ */ (0, import_jsx_runtime.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_runtime.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_runtime.jsxs)("rect", { x: "120", y: "10", width: "15", height: "120", rx: "6", children: [
/* @__PURE__ */ (0, import_jsx_runtime.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_runtime.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_runtime2 = require("react/jsx-runtime");
var Dots = (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { viewBox: "0 0 120 30", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", ...props, children: [
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("circle", { cx: "15", cy: "15", r: "15", children: [
/* @__PURE__ */ (0, import_jsx_runtime2.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_runtime2.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_runtime2.jsxs)("circle", { cx: "60", cy: "15", r: "9", fillOpacity: "0.3", children: [
/* @__PURE__ */ (0, import_jsx_runtime2.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_runtime2.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_runtime2.jsxs)("circle", { cx: "105", cy: "15", r: "15", children: [
/* @__PURE__ */ (0, import_jsx_runtime2.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_runtime2.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_runtime3 = require("react/jsx-runtime");
var Ring = (props) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"svg",
{
fill: "none",
stroke: "currentColor",
viewBox: "0 0 38 38",
xmlns: "http://www.w3.org/2000/svg",
...props,
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("g", { fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("g", { transform: "translate(2.5 2.5)", strokeWidth: "5", children: [
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { strokeOpacity: ".5", cx: "16", cy: "16", r: "16" }),
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M32 16c0-9.94-8.06-16-16-16", children: /* @__PURE__ */ (0, import_jsx_runtime3.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_runtime4 = require("react/jsx-runtime");
var Spin = (props) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("g", { children: [
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("circle", { cx: "12", cy: "12", r: "9.5", fill: "none", strokeWidth: "3", strokeLinecap: "round", children: [
/* @__PURE__ */ (0, import_jsx_runtime4.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_runtime4.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_runtime4.jsx)(
"animateTransform",
{
attributeName: "transform",
type: "rotate",
dur: "2s",
values: "0 12 12;360 12 12",
repeatCount: "indefinite"
}
)
] }) });
// src/spinner/spinner.tsx
var import_jsx_runtime5 = 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_react.useMemo)(
() => (0, import_theme.spinner)({
color,
size,
className
}),
[className, color, size]
);
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SpinnerComponent, { "aria-hidden": true, className: styles, ref, ...spinnerProps });
}
var _Spinner = (0, import_react.forwardRef)(Spinner);
// src/button/button.tsx
var import_jsx_runtime6 = require("react/jsx-runtime");
function Button(props, ref) {
const {
appearance,
// size = 'md',
spacing = "default",
fullWidth,
isLoading,
spinner: spinner2 = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(_Spinner, { color: "current", size: "sm", ...props.spinnerProps }),
spinnerPlacement = "start",
startContent: startContentProp,
endContent: endContentProp,
disableAnimation,
className,
children,
...otherProps
} = props;
const styles = (0, import_react2.useMemo)(
() => (0, import_theme2.button)({
// size,
isLoading,
spinnerPlacement,
startContentProp: !!startContentProp,
endContentProp: !!endContentProp,
appearance,
spacing,
fullWidth,
disableAnimation,
className
}),
[
isLoading,
spinnerPlacement,
startContentProp,
endContentProp,
appearance,
spacing,
fullWidth,
disableAnimation,
className
]
);
const getIconClone = (icon) => (0, import_react2.isValidElement)(icon) ? (0, import_react2.cloneElement)(icon, {
"aria-hidden": true,
focusable: false,
tabIndex: -1
}) : null;
const startContent = getIconClone(startContentProp);
const endContent = getIconClone(endContentProp);
return (
// @ts-ignore
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_aria_components.Button, { ref, className: styles, ...otherProps, children: () => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
!isLoading && startContent,
isLoading && spinnerPlacement === "start" && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "shrink-0", children: [
spinner2,
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { "aria-atomic": "true", "aria-live": "polite", className: "sr-only", children: [
"Loading",
" "
] })
] }),
children,
isLoading && spinnerPlacement === "end" && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "shrink-0", children: [
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { "aria-atomic": "true", "aria-live": "polite", className: "sr-only", children: [
"Loading",
" "
] }),
spinner2
] }),
!isLoading && endContent
] }) })
);
}
var _Button = (0, import_react2.forwardRef)(Button);
// src/chip/chip.tsx
var import_icons = require("@trail-ui/icons");
var import_shared_utils = require("@trail-ui/shared-utils");
var import_theme3 = require("@trail-ui/theme");
var import_utils = require("@react-aria/utils");
var import_react3 = require("react");
var import_react_aria = require("react-aria");
var import_react_aria_components2 = require("react-aria-components");
var import_jsx_runtime7 = require("react/jsx-runtime");
var ChipContext = (0, import_react3.createContext)({});
function Chip(props, ref) {
[props, ref] = (0, import_react_aria_components2.useContextProps)(props, ref, ChipContext);
const ctx = props;
const {
elementType,
children,
avatar,
startContent: startContentProps,
endContent: endContentProps,
classNames,
className,
onClose,
isBordered,
isReadOnly,
...chipProps
} = props;
const variantProps = (0, import_theme3.filterVariantProps)(props, import_theme3.chip.variantKeys);
const Component = elementType || "div";
let componentProps = chipProps;
if (typeof Component === "string") {
componentProps = (0, import_utils.filterDOMProps)(chipProps);
}
const baseStyles = (0, import_shared_utils.clsx)(classNames == null ? void 0 : classNames.base, className);
const isCloseable = !!onClose;
const isDot = props.variant === "dot";
const { focusProps: closeFocusProps, isFocusVisible: isCloseButtonFocusVisible } = (0, import_react_aria.useFocusRing)();
const { pressProps: closePressProps } = (0, import_react_aria.usePress)({
isDisabled: !!(ctx == null ? void 0 : ctx.isDisabled),
onPress: onClose
});
const hasStartContent = (0, import_react3.useMemo)(
() => !!avatar || !!startContentProps,
[avatar, startContentProps]
);
const hasEndContent = (0, import_react3.useMemo)(
() => !!endContentProps || isCloseable,
[endContentProps, isCloseable]
);
const slots = (0, import_react3.useMemo)(
() => (0, import_theme3.chip)({
...variantProps,
hasStartContent,
hasEndContent,
isCloseable,
isCloseButtonFocusVisible,
isBordered,
isReadOnly
}),
[
variantProps,
hasStartContent,
hasEndContent,
isCloseable,
isCloseButtonFocusVisible,
isBordered,
isReadOnly
]
);
const getAvatarClone = (avatar2) => {
if (!(0, import_react3.isValidElement)(avatar2))
return null;
return (0, import_react3.cloneElement)(avatar2, {
// @ts-ignore
className: slots.avatar({ class: classNames == null ? void 0 : classNames.avatar })
});
};
const getContentClone = (content) => (0, import_react3.isValidElement)(content) ? (0, import_react3.cloneElement)(content, {
// @ts-ignore
className: (0, import_shared_utils.clsx)("max-h-[80%]", content.props.className)
}) : null;
const startContent = getAvatarClone(avatar) || getContentClone(startContentProps);
const endContent = getContentClone(endContentProps);
const start = (0, import_react3.useMemo)(() => {
if (isDot && !startContent) {
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: slots.dot({ class: classNames == null ? void 0 : classNames.dot }) });
}
return startContent;
}, [isDot, startContent, slots, classNames == null ? void 0 : classNames.dot]);
const end = (0, import_react3.useMemo)(() => {
if (isCloseable) {
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
"span",
{
role: "button",
tabIndex: 0,
"aria-label": `Remove ${children}`,
className: slots.closeButton({ class: classNames == null ? void 0 : classNames.closeButton }),
...(0, import_react_aria.mergeProps)(closePressProps, closeFocusProps),
children: endContent || /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_icons.CloseIcon, {})
}
);
}
return endContent;
}, [
classNames == null ? void 0 : classNames.closeButton,
closeFocusProps,
closePressProps,
children,
endContent,
isCloseable,
slots
]);
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
Component,
{
ref,
className: `${slots.base({ class: baseStyles })} ${isBordered && slots.border({ class: classNames == null ? void 0 : classNames.border })}`,
...componentProps,
children: [
start,
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: slots.content({ class: classNames == null ? void 0 : classNames.content }), children }),
end
]
}
);
}
var _Chip = (0, import_react3.forwardRef)(Chip);
// src/tanstackTable/tanstack-table-faceted-filter.tsx
var import_icons2 = require("@trail-ui/icons");
var import_theme4 = require("@trail-ui/theme");
var import_jsx_runtime8 = require("react/jsx-runtime");
function TanstackTableFacetedFilter({
column,
title,
options,
selectedFilterValues,
setSelectedFilterValues
// openFilter,
}) {
var _a;
const facets = column == null ? void 0 : column.getFacetedUniqueValues();
const selectedValues = new Set(column == null ? void 0 : column.getFilterValue());
const [openFilterOptions, setOpenFilterOptions] = React2.useState(false);
const filterOptionsToShow = 5;
const [loadMore, setLoadMore] = React2.useState(filterOptionsToShow);
const optionsRef = React2.useRef([]);
const [focusedIndex, setFocusedIndex] = React2.useState(null);
function handleLoadMore() {
const prevLoadMore = loadMore;
setLoadMore((prev) => prev + filterOptionsToShow);
setTimeout(() => {
var _a2;
if (optionsRef.current[prevLoadMore]) {
(_a2 = optionsRef.current[prevLoadMore]) == null ? void 0 : _a2.focus();
}
}, 0);
}
React2.useEffect(() => {
var _a2;
if (focusedIndex !== null && optionsRef.current[focusedIndex]) {
(_a2 = optionsRef.current[focusedIndex]) == null ? void 0 : _a2.focus();
}
}, [focusedIndex, loadMore]);
function handleKeyDown(event, index) {
var _a2;
if (event.key === "ArrowDown") {
setFocusedIndex((prev) => prev !== null && prev < loadMore - 1 ? prev + 1 : 0);
} else if (event.key === "ArrowUp") {
setFocusedIndex((prev) => prev !== null && prev > 0 ? prev - 1 : loadMore - 1);
} else if (event.key === "Enter" || event.key === " ") {
event.preventDefault();
(_a2 = optionsRef.current[index]) == null ? void 0 : _a2.click();
}
}
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "relative flex flex-col items-center after:absolute after:bottom-0 after:left-3 after:block after:h-[1px] after:w-full after:bg-neutral-200 last:after:bg-neutral-50", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "w-full bg-neutral-50 p-0", children: [
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex items-center justify-between px-4 py-[10px]", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
_Button,
{
"aria-expanded": openFilterOptions ? true : false,
id: `filter-${title}`,
"aria-controls": `sect-${title}`,
onPress: () => setOpenFilterOptions(!openFilterOptions),
className: "flex flex-1 justify-between px-0",
appearance: "transparent",
children: [
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center gap-1", children: [
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-sm font-semibold text-neutral-700", children: title }),
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("p", { className: "text-sm font-normal text-neutral-700", children: [
"(",
selectedValues.size,
" selected)"
] })
] }),
openFilterOptions ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_icons2.ChevronUpIcon, { width: 24, height: 24, color: import_theme4.commonColors.neutral[800] }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_icons2.ChevronDownIcon, { width: 24, height: 24, color: import_theme4.commonColors.neutral[800] })
]
}
) }),
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
"ul",
{
id: `sect-${title}`,
"aria-labelledby": `filter-${title}`,
className: `${openFilterOptions ? "h-auto max-h-60 overflow-auto" : "h-0 max-h-0 overflow-hidden"} flex flex-col transition-all`,
children: [
(_a = options == null ? void 0 : options.slice(0, loadMore)) == null ? void 0 : _a.map((option, index) => {
const isSelected = selectedFilterValues.has(option.value);
const statusStyles = {
completed: {
bgColor: "bg-green-50",
borderColor: "border border-green-950"
},
regression: {
bgColor: "bg-red-50",
borderColor: "border-red-950"
},
inProgress: {
bgColor: "bg-yellow-50",
borderColor: "border-yellow-950"
}
};
const { completed } = statusStyles;
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("li", { className: "h-full last:mb-2", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
"button",
{
ref: (el) => optionsRef.current[index] = el,
tabIndex: openFilterOptions ? 0 : -1,
onKeyDown: (event) => handleKeyDown(event, index),
className: ` ${isSelected && "border-l-[3px] !border-l-purple-600 bg-purple-50 font-semibold"} flex h-10 w-full items-center justify-between rounded-none border-l-[3px] border-l-transparent px-4 text-left text-sm text-neutral-900 transition-all hover:border-l-purple-600 hover:bg-purple-50 focus:border-purple-600`,
onClick: () => {
const updatedSelectedValues = new Set(selectedFilterValues);
if (isSelected) {
updatedSelectedValues.delete(option.value);
} else {
updatedSelectedValues.add(option.value);
}
setSelectedFilterValues(updatedSelectedValues);
},
children: [
option.icon && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(option.icon, { className: "text-muted-foreground mr-2 h-4 w-4" }),
(column == null ? void 0 : column.id) === "status" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
_Chip,
{
tabIndex: 0,
classNames: {
base: `${option.value === "Completed" ? completed.bgColor + " " + completed.borderColor : option.value === "In Progress" ? "border border-yellow-950 bg-yellow-50" : option.value === "Regression" ? "border border-red-950 bg-red-50" : ""} ${!isSelected && "!border-0"} pointer-events-none`
},
color: "default",
endContent: isSelected ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_icons2.CloseIcon, { width: 16, height: 16 }) : "",
children: option.label
}
) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "w-full text-left", children: option.label }),
(facets == null ? void 0 : facets.get(option.value)) && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "ml-auto flex h-4 w-4 items-center justify-center font-mono text-xs", children: facets.get(option.value) }),
isSelected ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_icons2.CheckIcon, { width: 24, height: 24, color: import_theme4.commonColors.purple[600] }) : ""
]
}
) }, option.label);
}),
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("li", { className: "flex justify-center pb-2", children: loadMore < options.length && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
"button",
{
tabIndex: openFilterOptions ? 0 : -1,
className: "text-sm font-medium text-purple-600",
onClick: handleLoadMore,
children: "View More"
}
) })
]
}
)
] }) });
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
TanstackTableFacetedFilter
});