@trail-ui/react
Version:
1,264 lines (1,241 loc) • 48.3 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/table-header.tsx
var table_header_exports = {};
__export(table_header_exports, {
default: () => table_header_default
});
module.exports = __toCommonJS(table_header_exports);
var import_icons6 = require("@trail-ui/icons");
// 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/text-field/index.ts
var import_react_aria_components3 = require("react-aria-components");
// src/text-field/text-field.tsx
var import_shared_utils = require("@trail-ui/shared-utils");
var import_theme3 = require("@trail-ui/theme");
var import_utils2 = require("@react-aria/utils");
var import_utils3 = require("@react-stately/utils");
var import_react4 = require("react");
var import_react_aria2 = require("react-aria");
var import_react_aria_components2 = require("react-aria-components");
// src/_utils/utils.tsx
var import_utils = require("@react-aria/utils");
var import_react3 = __toESM(require("react"));
var import_react_aria = require("react-aria");
var import_react_dom = __toESM(require("react-dom"));
var import_jsx_runtime7 = require("react/jsx-runtime");
function useSlot() {
let [hasSlot, setHasSlot] = (0, import_react3.useState)(true);
let hasRun = (0, import_react3.useRef)(false);
let ref = (0, import_react3.useCallback)((el) => {
hasRun.current = true;
setHasSlot(!!el);
}, []);
(0, import_utils.useLayoutEffect)(() => {
if (!hasRun.current) {
setHasSlot(false);
}
}, []);
return [ref, hasSlot];
}
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_react3.createContext)(false);
var hiddenFragment = typeof DocumentFragment !== "undefined" ? new DocumentFragment() : null;
function removeDataAttributes(props) {
const prefix = /^(data-.*)$/;
let filteredProps = {};
for (const prop in props) {
if (!prefix.test(prop)) {
filteredProps[prop] = props[prop];
}
}
return filteredProps;
}
function useDOMRef(ref) {
const domRef = (0, import_react3.useRef)(null);
(0, import_react3.useImperativeHandle)(ref, () => domRef.current);
return domRef;
}
// src/text-field/text-field.tsx
var import_icons = require("@trail-ui/icons");
var import_jsx_runtime8 = require("react/jsx-runtime");
var TextFieldContext = (0, import_react4.createContext)(null);
function TextField(props, ref) {
[props, ref] = (0, import_react_aria_components2.useContextProps)(props, ref, TextFieldContext);
let inputRef = (0, import_react4.useRef)(null);
let [labelRef, label] = useSlot();
let [inputElementType, setInputElementType] = (0, import_react4.useState)("input");
const {
onValueChange = () => {
},
onClear,
className,
classNames,
children,
label: labelValue,
description,
errorMessage,
errorId,
errorIcon = /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
import_icons.ErrorIcon,
{
className: "h-4 w-4 text-red-800 dark:text-red-600",
role: "img",
"aria-label": "Error",
"aria-hidden": false
}
)
} = props;
const handleValueChange = (0, import_react4.useCallback)(
(value) => {
onValueChange(value != null ? value : "");
},
[onValueChange]
);
const [inputValue, setInputValue] = (0, import_utils3.useControlledState)(
props.value,
props.defaultValue,
handleValueChange
);
const handleValueClear = (0, import_react4.useCallback)(() => {
setInputValue("");
onClear == null ? void 0 : onClear();
}, [onClear, setInputValue]);
let { labelProps, inputProps, descriptionProps } = (0, import_react_aria2.useTextField)(
{
...removeDataAttributes(props),
value: inputValue,
inputElementType,
label,
onChange: setInputValue
},
inputRef
);
let inputOrTextAreaRef = (0, import_react4.useCallback)((el) => {
inputRef.current = el;
if (el) {
setInputElementType(el instanceof HTMLTextAreaElement ? "textarea" : "input");
}
}, []);
const baseStyles = (0, import_shared_utils.clsx)(classNames == null ? void 0 : classNames.base, className);
const slots = (0, import_react4.useMemo)(() => (0, import_theme3.textField)(), []);
const hasHelper = !!description || !!errorMessage;
const helpComponent = (0, import_react4.useMemo)(() => {
if (!hasHelper)
return null;
return errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
import_react_aria_components2.Text,
{
id: errorId,
slot: "errorMessage",
"aria-live": "polite",
elementType: "div",
className: `${slots.errorMessage({ class: classNames == null ? void 0 : classNames.errorMessage })}`,
children: [
errorIcon,
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: errorMessage })
]
}
) : description ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
import_react_aria_components2.Text,
{
slot: "description",
elementType: "div",
className: slots.description({ class: classNames == null ? void 0 : classNames.description }),
...descriptionProps,
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: description })
}
) : null;
}, [
classNames == null ? void 0 : classNames.description,
classNames == null ? void 0 : classNames.errorMessage,
description,
descriptionProps,
hasHelper,
errorIcon,
errorMessage,
errorId,
slots
]);
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
"div",
{
...(0, import_utils2.filterDOMProps)(props),
className: slots.base({ class: baseStyles }),
ref,
slot: props.slot || void 0,
"data-disabled": props.isDisabled || void 0,
"data-invalid": props.isInvalid || void 0,
"data-required": props.isRequired || void 0,
"data-readonly": props.isReadOnly || void 0,
"data-orientation": props.orientation || "vertical",
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
import_react_aria_components2.Provider,
{
values: [
[
import_react_aria_components2.InputContext,
{
...inputProps,
"data-value": inputValue,
onClear: onClear ? handleValueClear : void 0,
ref: inputOrTextAreaRef
}
],
[
import_react_aria_components2.TextAreaContext,
{
...inputProps,
"data-value": inputValue,
onClear: onClear ? handleValueClear : void 0,
ref: inputOrTextAreaRef
}
]
],
children: [
labelValue && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
import_react_aria_components2.Label,
{
...labelProps,
ref: labelRef,
className: slots.label({ class: classNames == null ? void 0 : classNames.label }),
children: labelValue
}
),
children,
helpComponent
]
}
)
}
);
}
var _TextField = (0, import_react4.forwardRef)(TextField);
// src/input/input.tsx
var import_icons2 = require("@trail-ui/icons");
var import_shared_utils3 = require("@trail-ui/shared-utils");
var import_theme4 = require("@trail-ui/theme");
var import_react6 = require("react");
var import_react_aria_components4 = require("react-aria-components");
// src/input/use-input.ts
var import_shared_utils2 = require("@trail-ui/shared-utils");
var import_react5 = require("react");
var import_react_aria3 = require("react-aria");
function useInput(props) {
const { ref, onClear, ...otherProps } = props;
const domRef = useDOMRef(ref);
const handleClear = (0, import_react5.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_aria3.useHover)({});
const { isFocused, isFocusVisible, focusProps } = (0, import_react_aria3.useFocusRing)({
isTextInput: true,
autoFocus: props.autoFocus
});
const { focusProps: clearFocusProps, isFocusVisible: isClearButtonFocusVisible } = (0, import_react_aria3.useFocusRing)();
const { pressProps: clearPressProps } = (0, import_react_aria3.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_react5.useCallback)(
(inputWrapperProps = {}) => {
return {
"data-filled": (0, import_shared_utils2.dataAttr)(isFilled),
"data-focused": (0, import_shared_utils2.dataAttr)(isFocused),
"data-focus-visible": (0, import_shared_utils2.dataAttr)(isFocusVisible),
"data-hovered": (0, import_shared_utils2.dataAttr)(isHovered),
"data-disabled": (0, import_shared_utils2.dataAttr)(props.disabled),
"data-invalid": (0, import_shared_utils2.dataAttr)(isInvalid),
...inputWrapperProps
};
},
[isFilled, isFocusVisible, isFocused, isHovered, isInvalid, props.disabled]
);
const getInputProps = (0, import_react5.useCallback)(
(inputProps = {}) => {
return {
"data-filled": (0, import_shared_utils2.dataAttr)(isFilled),
...(0, import_react_aria3.mergeProps)(otherProps, focusProps, hoverProps, inputProps),
ref: domRef
};
},
[domRef, focusProps, hoverProps, isFilled, otherProps]
);
const getClearButtonProps = (0, import_react5.useCallback)(
(clearButtonProps = {}) => {
return {
role: "button",
tabIndex: 0,
"data-focus-visible": (0, import_shared_utils2.dataAttr)(isClearButtonFocusVisible),
...(0, import_react_aria3.mergeProps)(clearFocusProps, clearPressProps, clearButtonProps)
};
},
[clearFocusProps, clearPressProps, isClearButtonFocusVisible]
);
return {
domRef,
getInputWrapperProps,
getInputProps,
getClearButtonProps
};
}
// src/input/input.tsx
var import_jsx_runtime9 = 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_react6.useMemo)(
() => (0, import_theme4.input)({ variant, fullWidth, isClearable }),
[fullWidth, variant, isClearable]
);
const end = (0, import_react6.useMemo)(() => {
if (isClearable) {
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
"span",
{
...getClearButtonProps(),
className: slots.clearButton({ class: classNames == null ? void 0 : classNames.clearButton }),
children: endContent || /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_icons2.XCircleFilledIcon, {})
}
);
}
return endContent;
}, [classNames == null ? void 0 : classNames.clearButton, endContent, getClearButtonProps, isClearable, slots]);
const baseStyles = (0, import_shared_utils3.clsx)(classNames == null ? void 0 : classNames.base, className);
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: slots.base({ class: baseStyles }), ...getInputWrapperProps(), children: [
startContent,
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
"input",
{
...getInputProps(),
className: slots.input({ class: classNames == null ? void 0 : classNames.input }),
ref: domRef
}
),
end
] });
}
var _Input = (0, import_react6.forwardRef)(Input);
// src/tanstackTable/table-header.tsx
var import_react9 = require("react");
var import_theme8 = require("@trail-ui/theme");
// src/tanstackTable/tanstack-table-faceted-filter.tsx
var React3 = __toESM(require("react"));
// src/chip/chip.tsx
var import_icons3 = require("@trail-ui/icons");
var import_shared_utils4 = require("@trail-ui/shared-utils");
var import_theme5 = require("@trail-ui/theme");
var import_utils6 = require("@react-aria/utils");
var import_react7 = require("react");
var import_react_aria4 = require("react-aria");
var import_react_aria_components5 = require("react-aria-components");
var import_jsx_runtime10 = require("react/jsx-runtime");
var ChipContext = (0, import_react7.createContext)({});
function Chip(props, ref) {
[props, ref] = (0, import_react_aria_components5.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_theme5.filterVariantProps)(props, import_theme5.chip.variantKeys);
const Component = elementType || "div";
let componentProps = chipProps;
if (typeof Component === "string") {
componentProps = (0, import_utils6.filterDOMProps)(chipProps);
}
const baseStyles = (0, import_shared_utils4.clsx)(classNames == null ? void 0 : classNames.base, className);
const isCloseable = !!onClose;
const isDot = props.variant === "dot";
const { focusProps: closeFocusProps, isFocusVisible: isCloseButtonFocusVisible } = (0, import_react_aria4.useFocusRing)();
const { pressProps: closePressProps } = (0, import_react_aria4.usePress)({
isDisabled: !!(ctx == null ? void 0 : ctx.isDisabled),
onPress: onClose
});
const hasStartContent = (0, import_react7.useMemo)(
() => !!avatar || !!startContentProps,
[avatar, startContentProps]
);
const hasEndContent = (0, import_react7.useMemo)(
() => !!endContentProps || isCloseable,
[endContentProps, isCloseable]
);
const slots = (0, import_react7.useMemo)(
() => (0, import_theme5.chip)({
...variantProps,
hasStartContent,
hasEndContent,
isCloseable,
isCloseButtonFocusVisible,
isBordered,
isReadOnly
}),
[
variantProps,
hasStartContent,
hasEndContent,
isCloseable,
isCloseButtonFocusVisible,
isBordered,
isReadOnly
]
);
const getAvatarClone = (avatar2) => {
if (!(0, import_react7.isValidElement)(avatar2))
return null;
return (0, import_react7.cloneElement)(avatar2, {
// @ts-ignore
className: slots.avatar({ class: classNames == null ? void 0 : classNames.avatar })
});
};
const getContentClone = (content) => (0, import_react7.isValidElement)(content) ? (0, import_react7.cloneElement)(content, {
// @ts-ignore
className: (0, import_shared_utils4.clsx)("max-h-[80%]", content.props.className)
}) : null;
const startContent = getAvatarClone(avatar) || getContentClone(startContentProps);
const endContent = getContentClone(endContentProps);
const start = (0, import_react7.useMemo)(() => {
if (isDot && !startContent) {
return /* @__PURE__ */ (0, import_jsx_runtime10.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_react7.useMemo)(() => {
if (isCloseable) {
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
"span",
{
role: "button",
tabIndex: 0,
"aria-label": `Remove ${children}`,
className: slots.closeButton({ class: classNames == null ? void 0 : classNames.closeButton }),
...(0, import_react_aria4.mergeProps)(closePressProps, closeFocusProps),
children: endContent || /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_icons3.CloseIcon, {})
}
);
}
return endContent;
}, [
classNames == null ? void 0 : classNames.closeButton,
closeFocusProps,
closePressProps,
children,
endContent,
isCloseable,
slots
]);
return /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime10.jsx)("span", { className: slots.content({ class: classNames == null ? void 0 : classNames.content }), children }),
end
]
}
);
}
var _Chip = (0, import_react7.forwardRef)(Chip);
// src/tanstackTable/tanstack-table-faceted-filter.tsx
var import_icons4 = require("@trail-ui/icons");
var import_theme6 = require("@trail-ui/theme");
var import_jsx_runtime11 = 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] = React3.useState(false);
const filterOptionsToShow = 5;
const [loadMore, setLoadMore] = React3.useState(filterOptionsToShow);
const optionsRef = React3.useRef([]);
const [focusedIndex, setFocusedIndex] = React3.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);
}
React3.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_runtime11.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_runtime11.jsxs)("div", { className: "w-full bg-neutral-50 p-0", children: [
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "flex items-center justify-between px-4 py-[10px]", children: /* @__PURE__ */ (0, import_jsx_runtime11.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_runtime11.jsxs)("div", { className: "flex items-center gap-1", children: [
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "text-sm font-semibold text-neutral-700", children: title }),
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("p", { className: "text-sm font-normal text-neutral-700", children: [
"(",
selectedValues.size,
" selected)"
] })
] }),
openFilterOptions ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_icons4.ChevronUpIcon, { width: 24, height: 24, color: import_theme6.commonColors.neutral[800] }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_icons4.ChevronDownIcon, { width: 24, height: 24, color: import_theme6.commonColors.neutral[800] })
]
}
) }),
/* @__PURE__ */ (0, import_jsx_runtime11.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_runtime11.jsx)("li", { className: "h-full last:mb-2", children: /* @__PURE__ */ (0, import_jsx_runtime11.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_runtime11.jsx)(option.icon, { className: "text-muted-foreground mr-2 h-4 w-4" }),
(column == null ? void 0 : column.id) === "status" ? /* @__PURE__ */ (0, import_jsx_runtime11.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_runtime11.jsx)(import_icons4.CloseIcon, { width: 16, height: 16 }) : "",
children: option.label
}
) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "w-full text-left", children: option.label }),
(facets == null ? void 0 : facets.get(option.value)) && /* @__PURE__ */ (0, import_jsx_runtime11.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_runtime11.jsx)(import_icons4.CheckIcon, { width: 24, height: 24, color: import_theme6.commonColors.purple[600] }) : ""
]
}
) }, option.label);
}),
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("li", { className: "flex justify-center pb-2", children: loadMore < options.length && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
"button",
{
tabIndex: openFilterOptions ? 0 : -1,
className: "text-sm font-medium text-purple-600",
onClick: handleLoadMore,
children: "View More"
}
) })
]
}
)
] }) });
}
// src/tanstackTable/tanstack-table-toolbar.tsx
var import_theme7 = require("@trail-ui/theme");
var import_icons5 = require("@trail-ui/icons");
var import_react8 = require("react");
var import_jsx_runtime12 = require("react/jsx-runtime");
function TanstackTableToolBar({
table,
data,
columns,
openFilter,
selectedFilterValues,
setSelectedFilterValues
}) {
const isFiltered = table.getState().columnFilters.length > 0;
const getUniqueValues = (data2, columnId) => {
const uniqueValues = /* @__PURE__ */ new Set();
data2.forEach((row) => uniqueValues.add(row[columnId]));
return Array.from(uniqueValues).map((value) => ({ label: value, value }));
};
const filterColumns = columns.filter((column) => column.filterFn === "multiSelectFilter");
const [filterSearch, setFilterSearch] = (0, import_react8.useState)("");
const updatedSearchFilter = filterColumns.filter(
(column) => column.name.toLowerCase().includes(filterSearch.toLowerCase())
);
const applyFilters = () => {
selectedFilterValues.forEach((values, columnId) => {
const column = table.getColumn(columnId);
if (column) {
column.setFilterValue(values.size > 0 ? Array.from(values) : void 0);
}
});
};
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex flex-col items-center justify-between", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex max-h-[600px] w-[360px] flex-col justify-between overflow-auto rounded border border-neutral-200 bg-neutral-50 shadow-sm", children: [
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { children: [
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
_TextField,
{
classNames: {
base: "filter-input ml-3 sticky top-0 bg-neutral-50 z-20",
description: "test"
},
children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
_Input,
{
classNames: {
base: "border-t-0 border-r-0 border-l-0 rounded-none border-b-neutral-200 p-0 h-[45px] hover:p-2 hover:!border-t-0 hover:!border-r-0 hover:!border-l-0 hover:!border-b-[2px] data-[focused=true]:p-2 data-[focused=true]:!border-r-0 data-[focused=true]:!border-l-0 data-[focused=true]:!border-t-0"
},
type: "text",
placeholder: "Search",
value: filterSearch,
onChange: (e) => setFilterSearch(e.target.value),
startContent: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_icons5.SearchIcon, { width: 16, height: 16, color: import_theme7.commonColors.neutral[600] })
}
)
}
),
updatedSearchFilter.length > 0 ? updatedSearchFilter.map((column) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
TanstackTableFacetedFilter,
{
openFilter,
column: table.getColumn(column.id),
title: column.name,
options: getUniqueValues(data, column.id),
selectedFilterValues: selectedFilterValues.get(column.id) || /* @__PURE__ */ new Set(),
setSelectedFilterValues: (values) => {
setSelectedFilterValues(new Map(selectedFilterValues).set(column.id, values));
}
},
column.id
)) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "p-4 text-center text-sm text-neutral-900", children: "No Results Found" })
] }),
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex w-full justify-end gap-3 border-t border-t-neutral-200 bg-neutral-100 px-4 py-3", children: [
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
_Button,
{
appearance: "transparent",
isDisabled: !isFiltered,
onPress: () => {
table.resetColumnFilters();
setSelectedFilterValues(/* @__PURE__ */ new Map());
},
className: `${!isFiltered ? "opacity-50" : ""} h-8 !bg-neutral-100 px-2 lg:px-3`,
children: "Clear"
}
),
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
_Button,
{
className: `${selectedFilterValues.size < 1 ? "!bg-neutral-200 opacity-50" : ""}`,
isDisabled: selectedFilterValues.size < 1,
onPress: applyFilters,
appearance: "primary",
children: "Apply"
}
)
] })
] }) }) });
}
// src/tanstackTable/table-header.tsx
var import_react_aria_components6 = require("react-aria-components");
var import_jsx_runtime13 = require("react/jsx-runtime");
var TableSubHeader = ({
setOpenFilter,
openFilter,
table,
globalFilter,
setGlobalFilter,
data,
columns,
tableName
}) => {
const [referenceElement, setReferenceElement] = (0, import_react9.useState)(null);
const [popperElement, setPopperElement] = (0, import_react9.useState)(null);
const [selectedFilterValues, setSelectedFilterValues] = (0, import_react9.useState)(/* @__PURE__ */ new Map());
(0, import_react9.useEffect)(() => {
const handleClickOutside = (event) => {
const refElement = referenceElement;
const popper = popperElement;
if (refElement && popper && !refElement.contains(event.target) && !popper.contains(event.target)) {
setOpenFilter(false);
}
};
document.addEventListener("mousedown", handleClickOutside);
return () => {
document.removeEventListener("mousedown", handleClickOutside);
};
}, [referenceElement, popperElement, setOpenFilter]);
return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex h-14 items-center justify-between border-b border-neutral-200 px-6 py-3", children: [
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-base font-semibold text-neutral-950", children: tableName }) }),
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex flex-1 items-center justify-end gap-4", children: [
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "search-container w-52", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(_TextField, { className: "w-full", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
_Input,
{
variant: "compact",
type: "text",
placeholder: "Search",
value: globalFilter,
onChange: (e) => setGlobalFilter(e.target.value),
startContent: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_icons6.SearchIcon, { color: import_theme8.commonColors.neutral[600], width: 16, height: 16 })
}
) }) }),
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center gap-3", children: [
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react_aria_components6.DialogTrigger, { children: [
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
_Button,
{
ref: setReferenceElement,
onPress: () => setOpenFilter(!openFilter),
endContent: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_icons6.FilterIcon, { color: import_theme8.commonColors.neutral[800], width: 16, height: 16 }),
className: "font-normal",
children: "Filter"
}
),
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
import_react_aria_components6.Popover,
{
placement: "bottom end",
className: "focus:!border focus:!border-purple-600 data-[focused=true]:!border-purple-600",
children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_aria_components6.Dialog, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
TanstackTableToolBar,
{
openFilter,
table,
data,
columns,
selectedFilterValues,
setSelectedFilterValues
}
) })
}
)
] }),
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
_Button,
{
endContent: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_icons6.TrashIcon, { color: import_theme8.commonColors.neutral[800], width: 16, height: 16 }),
className: "font-normal",
children: "Delete"
}
),
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
_Button,
{
endContent: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_icons6.EditIcon, { color: import_theme8.commonColors.neutral[800], width: 16, height: 16 }),
className: "font-normal",
children: "Edit"
}
),
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
_Button,
{
className: "font-normal",
appearance: "primary",
endContent: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_icons6.PlusIcon, { width: 16, height: 16 }),
children: "Create"
}
)
] })
] }),
openFilter && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
"div",
{
ref: setPopperElement,
style: {
// ...styles.popper,
zIndex: 9999,
top: "12px"
// display: showAvatarDropdown ? 'block' : 'none',
}
}
)
] });
};
var table_header_default = TableSubHeader;