@trail-ui/react
Version:
769 lines (754 loc) • 31.5 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/table/index.ts
var table_exports = {};
__export(table_exports, {
Table: () => CustomTable
});
module.exports = __toCommonJS(table_exports);
// src/table/table.tsx
var import_react4 = __toESM(require("react"));
var import_icons2 = require("@trail-ui/icons");
var import_icons3 = require("@trail-ui/icons");
// 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/checkbox/checkbox.tsx
var import_shared_utils2 = require("@trail-ui/shared-utils");
var import_theme3 = require("@trail-ui/theme");
var import_react3 = require("react");
var import_react_aria_components2 = require("react-aria-components");
// src/checkbox/checkbox-group.tsx
var import_shared_utils = require("@trail-ui/shared-utils");
var import_theme2 = require("@trail-ui/theme");
var import_react2 = require("react");
var import_react_aria_components = require("react-aria-components");
var import_icons = require("@trail-ui/icons");
var import_jsx_runtime6 = require("react/jsx-runtime");
var CheckboxGroupThemeContext = (0, import_react2.createContext)({});
function CheckboxGroup(props, ref) {
const {
lineThrough,
orientation = "vertical",
label,
className,
classNames,
isInvalid,
children,
...otherProps
} = props;
const slots = (0, import_react2.useMemo)(() => (0, import_theme2.checkboxGroup)(), []);
const baseStyles = (0, import_shared_utils.clsx)(classNames == null ? void 0 : classNames.base, className);
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_aria_components.CheckboxGroup, { ref, className: slots.base({ class: baseStyles }), ...otherProps, children: (renderProps) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
label && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_aria_components.Label, { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label }),
children && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
"div",
{
"data-orientation": orientation,
className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }),
children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CheckboxGroupThemeContext.Provider, { value: { isInvalid, lineThrough }, children: typeof children === "function" ? children(renderProps) : children })
}
),
props.errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
import_react_aria_components.Text,
{
slot: "errorMessage",
className: `${slots.errorMessage({ class: classNames == null ? void 0 : classNames.errorMessage })} flex flex-row items-center gap-0.5`,
children: [
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
import_icons.ErrorIcon,
{
role: "img",
"aria-label": "Error",
"aria-hidden": "false",
className: "h-4 w-4 text-red-600"
}
),
props.errorMessage
]
}
) : props.description ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
import_react_aria_components.Text,
{
slot: "description",
className: slots.description({ class: classNames == null ? void 0 : classNames.description }),
children: props.description
}
) : null
] }) });
}
var _CheckboxGroup = (0, import_react2.forwardRef)(CheckboxGroup);
// src/checkbox/checkbox-icon.tsx
var import_jsx_runtime7 = require("react/jsx-runtime");
function CheckIcon(props) {
const { isSelected } = props;
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { "aria-hidden": "true", role: "presentation", viewBox: "0 0 17 18", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
"polyline",
{
fill: "none",
points: "1 9 7 14 15 4",
stroke: "currentColor",
strokeDasharray: 22,
strokeDashoffset: isSelected ? 44 : 66,
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: 2,
style: isSelected ? {
transition: "stroke-dashoffset 250ms linear 0s"
} : {}
}
) });
}
function IndeterminateIcon() {
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { stroke: "white", strokeWidth: 3, viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: "21", x2: "3", y1: "12", y2: "12" }) });
}
function CheckboxIcon(props) {
const { isIndeterminate, ...otherProps } = props;
const BaseIcon = isIndeterminate ? IndeterminateIcon : CheckIcon;
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(BaseIcon, { ...otherProps });
}
// src/checkbox/checkbox.tsx
var import_jsx_runtime8 = require("react/jsx-runtime");
function Checkbox(props, ref) {
var _a, _b;
const groupThemeContext = (0, import_react3.useContext)(CheckboxGroupThemeContext);
const {
icon = /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CheckboxIcon, {}),
lineThrough = (_a = groupThemeContext == null ? void 0 : groupThemeContext.lineThrough) != null ? _a : false,
isInvalid = (_b = groupThemeContext == null ? void 0 : groupThemeContext.isInvalid) != null ? _b : false,
className,
classNames,
children,
...otherProps
} = props;
const slots = (0, import_react3.useMemo)(
() => (0, import_theme3.checkbox)({
lineThrough,
isInvalid
}),
[isInvalid, lineThrough]
);
const baseStyles = (0, import_shared_utils2.clsx)(classNames == null ? void 0 : classNames.base, className);
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_aria_components2.Checkbox, { ref, className: slots.base({ class: baseStyles }), ...otherProps, children: (renderProps) => {
const iconProps = {
"data-checked": String(renderProps.isSelected),
isSelected: renderProps.isSelected,
isIndeterminate: renderProps.isIndeterminate,
isInvalid: renderProps.isInvalid,
className: slots.icon({ class: classNames == null ? void 0 : classNames.icon })
};
const clonedIcon = typeof icon === "function" ? icon(iconProps) : (0, import_react3.cloneElement)(icon, iconProps);
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
"span",
{
"aria-hidden": "true",
className: slots.control({ class: classNames == null ? void 0 : classNames.control }),
"data-indeterminate": props.isIndeterminate,
children: clonedIcon
}
),
children && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: typeof children === "function" ? children(renderProps) : children })
] });
} });
}
var _Checkbox = (0, import_react3.forwardRef)(Checkbox);
// src/checkbox/index.tsx
var import_react_aria_components3 = require("react-aria-components");
// src/table/table.tsx
var import_jsx_runtime9 = require("react/jsx-runtime");
var sortOptions = {
asc: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_icons3.ArrowUpIcon, { "aria-hidden": true, className: "h-4 w-4 text-purple-600" }),
desc: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_icons3.ArrowDownIcon, { "aria-hidden": true, className: "h-4 w-4 text-purple-600" })
};
var sortOrder = [false, "asc", "desc"];
function SelectAllCheckboxComponent({
tableName,
data,
selectedIds,
onToggle,
idSelector,
selectionCheckFn
}) {
const allSelected = selectedIds.size > 0 && data.filter((d) => !(selectionCheckFn == null ? void 0 : selectionCheckFn(d))).every((d) => selectedIds.has(idSelector(d)));
const someSelected = data.filter((d) => !(selectionCheckFn == null ? void 0 : selectionCheckFn(d))).some((d) => selectedIds.has(idSelector(d)));
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
_Checkbox,
{
"aria-label": `Select All ${tableName}`,
isSelected: allSelected,
isIndeterminate: !allSelected && someSelected,
onChange: () => onToggle(!allSelected)
}
) });
}
var SelectAllCheckbox = import_react4.default.memo(SelectAllCheckboxComponent);
function CustomTable(props) {
var _a, _b, _c;
const toggleRowSelection = (0, import_react4.useCallback)(
(id) => {
var _a2;
(_a2 = props.selection) == null ? void 0 : _a2.setSelectedIds((prev) => {
const updated = new Set(prev);
if (updated.has(id)) {
updated.delete(id);
} else {
updated.add(id);
}
return updated;
});
},
[props.selection]
);
const toggleAllSelection = (0, import_react4.useCallback)(
(select) => {
var _a2, _b2, _c2;
if ((_a2 = props.selection) == null ? void 0 : _a2.onSelectAll) {
(_b2 = props.selection) == null ? void 0 : _b2.onSelectAll();
} else {
(_c2 = props.selection) == null ? void 0 : _c2.setSelectedIds((prev) => {
const updated = new Set(prev);
props.data.forEach((item) => {
var _a3, _b3, _c3, _d, _e;
if (!((_b3 = (_a3 = props.selection) == null ? void 0 : _a3.isRowSelectionDisabled) == null ? void 0 : _b3.call(_a3, item)) && ((_c3 = props.selection) == null ? void 0 : _c3.idSelector)) {
if (select) {
updated.add((_d = props.selection) == null ? void 0 : _d.idSelector(item));
} else {
updated.delete((_e = props.selection) == null ? void 0 : _e.idSelector(item));
}
}
});
return updated;
});
}
},
[props.data, props.selection]
);
const toggleGroupSelection = (0, import_react4.useCallback)(
(items, select) => {
var _a2;
(_a2 = props.selection) == null ? void 0 : _a2.setSelectedIds((prev) => {
const updated = new Set(prev);
items.forEach((item) => {
var _a3, _b2;
if ((_a3 = props.selection) == null ? void 0 : _a3.idSelector) {
const id = (_b2 = props.selection) == null ? void 0 : _b2.idSelector(item);
if (select) {
updated.add(id);
} else {
updated.delete(id);
}
}
});
return updated;
});
},
[props.selection]
);
const handleSortChange = (0, import_react4.useCallback)(
(sortBy) => {
if (!props.sort) {
return;
}
const index = props.sort.sortBy === sortBy ? sortOrder.indexOf(props.sort.sortDirection) : 0;
const nextDirection = sortOrder[(index + 1) % sortOrder.length];
props.sort.onSortClick(sortBy, nextDirection);
},
[props.sort]
);
const renderRow = (0, import_react4.useCallback)(
(item, index) => {
var _a2, _b2, _c2;
const isChecked = (_a2 = props.selection) == null ? void 0 : _a2.selectedIds.has(props.selection.idSelector(item));
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
"tr",
{
className: "border-b border-b-neutral-200 last:border-b-0",
children: [
props.selection && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("td", { className: `${isChecked ? "bg-purple-50" : "bg-neutral-50"} px-2 py-2 text-sm`, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
_Checkbox,
{
"aria-label": ((_c2 = props.selection) == null ? void 0 : _c2.checkBoxLabel) ? props.selection.checkBoxLabel(item) : `Select ${props.selection.idSelector(item)}`,
isSelected: isChecked,
onChange: () => {
var _a3;
return ((_a3 = props.selection) == null ? void 0 : _a3.idSelector) && toggleRowSelection(props.selection.idSelector(item));
},
...props.selection.isRowSelectionDisabled && {
isDisabled: props.selection.isRowSelectionDisabled(item)
}
}
) }) }),
props.headers.map((column) => {
const Element = column.columnType || "td";
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
Element,
{
headers: column.id,
className: `${isChecked ? "bg-purple-50" : "bg-neutral-50"} px-2 py-2 text-sm`,
style: {
minWidth: column.width,
maxWidth: column.width,
width: column.width
},
children: column.cellRenderFn ? column.cellRenderFn(item) : column.accessorKey && item[column.accessorKey]
},
column.id
);
})
]
},
((_b2 = props.selection) == null ? void 0 : _b2.idSelector(item)) || index
);
},
[props.selection, props.headers, toggleRowSelection]
);
const renderGroup = (0, import_react4.useCallback)(
(group) => {
const allSelected = group.items.every(
(item) => {
var _a2;
return (_a2 = props.selection) == null ? void 0 : _a2.selectedIds.has(props.selection.idSelector(item));
}
);
const someSelected = group.items.some(
(item) => {
var _a2;
return (_a2 = props.selection) == null ? void 0 : _a2.selectedIds.has(props.selection.idSelector(item));
}
);
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react4.default.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("tr", { children: [
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("td", { className: "border-b border-r bg-neutral-50 p-0", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
_Checkbox,
{
"aria-label": `Select group ${group.groupName}`,
isSelected: allSelected,
isIndeterminate: !allSelected && someSelected,
onChange: () => toggleGroupSelection(group.items, !allSelected)
}
) }) }),
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("th", { colSpan: props.headers.length, className: "border-b bg-neutral-50 text-left", children: [
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-sm font-semibold", children: group.groupName }),
" ",
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "text-sm font-normal text-neutral-600", children: [
"(",
group.items.length,
" ",
group.items.length === 1 ? "issue" : "issues",
")"
] })
] })
] }),
group.items.map(renderRow)
] }, group.groupId);
},
[props.selection, props.headers.length, toggleGroupSelection, renderRow]
);
const columnCells = (0, import_react4.useMemo)(() => {
return props.headers.map((column) => {
var _a2, _b2, _c2;
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
"th",
{
id: column.id,
scope: "col",
className: "h-10 border-r border-neutral-200 bg-neutral-100 p-2 text-left text-sm font-semibold last:border-r-0",
style: {
minWidth: column.width === 100 ? "max-content" : column.width,
maxWidth: column.width === 100 ? "max-content" : column.width,
width: column.width
},
...column.isSortable ? {
"aria-sort": ((_a2 = props.sort) == null ? void 0 : _a2.sortBy) === column.id ? ((_b2 = props.sort) == null ? void 0 : _b2.sortDirection) === "asc" ? "ascending" : "descending" : "none"
} : {},
children: column.isSortable ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
"button",
{
type: "button",
onClick: () => handleSortChange(column.id),
className: "flex w-full items-center justify-between gap-4 px-1 outline-purple-600",
children: [
column.headerRenderFn ? column.headerRenderFn() : /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "text-left", children: [
column.label,
" ",
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "sr-only", children: " Sortable" })
] }),
((_c2 = props.sort) == null ? void 0 : _c2.sortBy) === column.id && props.sort.sortDirection !== false ? sortOptions[props.sort.sortDirection] : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_icons2.CaretUpDownIcon, { className: "h-4 w-4 text-neutral-600" })
]
}
) : column.headerRenderFn ? column.headerRenderFn() : column.label
},
column.id
);
});
}, [props.headers, props.sort, handleSortChange]);
(0, import_react4.useEffect)(() => {
var _a2, _b2;
if (!((_a2 = props.selection) == null ? void 0 : _a2.retainSelectionAccrossPages)) {
(_b2 = props.selection) == null ? void 0 : _b2.setSelectedIds(/* @__PURE__ */ new Set());
}
}, [props.data]);
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "rounded", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "h-full overflow-auto rounded border border-neutral-200", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: (_a = props.maxHeight) != null ? _a : "max-h-[60vh]", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
"table",
{
"aria-label": (_b = props.tableName) != null ? _b : "",
className: "w-full table-auto border-collapse bg-white",
children: [
props.headers.some((header) => header.isSortable) && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("caption", { className: "sr-only", children: "column headers with buttons are sortable" }),
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("thead", { className: "sticky top-0 z-[1] before:absolute before:bottom-0 before:w-full before:border-b before:border-b-neutral-200", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("tr", { className: "bg-gray-200", children: [
props.selection && props.tableType === "normal" && !props.selection.hideSelectAll ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("td", { className: "h-10 w-10 border-r border-neutral-200 bg-neutral-100 p-2 text-sm font-semibold", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
SelectAllCheckbox,
{
tableName: props.tableName,
data: props.data,
selectedIds: props.selection.selectedIds,
onToggle: toggleAllSelection,
idSelector: props.selection.idSelector,
selectionCheckFn: props.selection.isRowSelectionDisabled
}
) }) : props.selection && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("td", { className: "h-10 w-10 border-r border-neutral-200 bg-neutral-100 p-2" }),
columnCells
] }) }),
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("tbody", { children: props.isLoading ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("tr", { className: "h-[300px]", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("td", { colSpan: props.headers.length + 1, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex flex-col items-center justify-center gap-1", children: [
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(_Spinner, { className: "h-8 w-8 animate-spin" }),
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "pt-1 text-neutral-700", children: "Loading..." })
] }) }) }) : !((_c = props.data) == null ? void 0 : _c.length) ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("tr", { className: "h-[300px]", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("td", { colSpan: props.headers.length + 1, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex flex-col items-center justify-center gap-1", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { role: "alert", "aria-live": "polite", className: "text-neutral-700", children: "No data" }) }) }) }) : props.data.map(
(item, index) => props.tableType === "normal" ? renderRow(item, index) : renderGroup(item)
) })
]
}
) }) }) });
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
Table
});