@asup/simple-table
Version:
REACT table, because I wanted one that took an array of objects as an input.
930 lines (834 loc) • 84.9 kB
JavaScript
import "./main.css";
import {jsx as $a6CVW$jsx, jsxs as $a6CVW$jsxs, Fragment as $a6CVW$Fragment} from "react/jsx-runtime";
import {useState as $a6CVW$useState, useEffect as $a6CVW$useEffect, useContext as $a6CVW$useContext, createContext as $a6CVW$createContext, useRef as $a6CVW$useRef} from "react";
import {createPortal as $a6CVW$createPortal} from "react-dom";
function $parcel$interopDefault(a) {
return a && a.__esModule ? a.default : a;
}
function $parcel$export(e, n, v, s) {
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
}
const $2121208b4d86b049$export$886dc98a901f1d4f = (s)=>{
const d = s instanceof Date ? s : new Date(s);
return !isNaN(d.getTime()) ? `${new Date(d.getTime() - d.getTimezoneOffset() * 60000).toISOString().slice(0, 16).replace(/[T]/, " ")}` : "Invalid date";
};
const $2d0562c3236da942$export$5813a5ff74a5f299 = (dataItem, showBlank = true)=>{
if (!showBlank && (dataItem === null || dataItem === undefined || typeof dataItem === "string" && dataItem.trim() === "")) return "";
switch(typeof dataItem){
case "number":
case "boolean":
case "bigint":
return `${dataItem}`;
case "string":
return dataItem.trim() === "" ? "<blank>" : dataItem.match(/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(?:\.\d*)?(?:[-+]\d{2}:?\d{2}|Z)?$/) ? (0, $2121208b4d86b049$export$886dc98a901f1d4f)(new Date(dataItem)) : dataItem;
case "object":
if (dataItem === null) return "<blank>";
if (Array.isArray(dataItem)) return "\uD83D\uDCC3\uD83D\uDCC3";
if (dataItem instanceof Date) return (0, $2121208b4d86b049$export$886dc98a901f1d4f)(dataItem);
return "\uD83D\uDCE6\uD83D\uDCE6";
case "function":
return "\uD83D\uDEE0\uFE0F\uD83D\uDEE0\uFE0F";
// Only undefined and Symbol are left
default:
return dataItem === undefined ? "<blank>" : "\u2049\uFE0F\u2049\uFE0F";
}
};
var $e344397c31793d24$exports = {};
$parcel$export($e344397c31793d24$exports, "cell", function () { return $e344397c31793d24$export$e2e1361cdc35271d; }, function (v) { return $e344397c31793d24$export$e2e1361cdc35271d = v; });
$parcel$export($e344397c31793d24$exports, "overflowHidden", function () { return $e344397c31793d24$export$2d30eef276ffb91a; }, function (v) { return $e344397c31793d24$export$2d30eef276ffb91a = v; });
$parcel$export($e344397c31793d24$exports, "textLeft", function () { return $e344397c31793d24$export$354e346024ee0461; }, function (v) { return $e344397c31793d24$export$354e346024ee0461 = v; });
$parcel$export($e344397c31793d24$exports, "textRight", function () { return $e344397c31793d24$export$19e1b6471a572b37; }, function (v) { return $e344397c31793d24$export$19e1b6471a572b37 = v; });
var $e344397c31793d24$export$e2e1361cdc35271d;
var $e344397c31793d24$export$2d30eef276ffb91a;
var $e344397c31793d24$export$354e346024ee0461;
var $e344397c31793d24$export$19e1b6471a572b37;
$e344397c31793d24$export$e2e1361cdc35271d = `ast-SimpleTableCell-module-KqO2pa-cell`;
$e344397c31793d24$export$2d30eef276ffb91a = `ast-SimpleTableCell-module-KqO2pa-overflowHidden`;
$e344397c31793d24$export$354e346024ee0461 = `ast-SimpleTableCell-module-KqO2pa-textLeft`;
$e344397c31793d24$export$19e1b6471a572b37 = `ast-SimpleTableCell-module-KqO2pa-textRight`;
const $143ff5ea38a50f00$export$eaad410fa83c9417 = ({ rowData: rowData, cellField: cellField })=>/*#__PURE__*/ (0, $a6CVW$jsx)("div", {
className: [
`simple-table-null-date-cell`,
(0, (/*@__PURE__*/$parcel$interopDefault($e344397c31793d24$exports))).overflowHidden,
typeof rowData[cellField] === "number" ? (0, (/*@__PURE__*/$parcel$interopDefault($e344397c31793d24$exports))).textRight : (0, (/*@__PURE__*/$parcel$interopDefault($e344397c31793d24$exports))).textLeft
].join(" "),
children: /*#__PURE__*/ (0, $a6CVW$jsx)("span", {
children: (0, $2d0562c3236da942$export$5813a5ff74a5f299)(rowData[cellField], false)
})
});
const $b5ad5f5c6daca351$export$e50c52e1a45b9cde = (s)=>{
const d = new Date(s);
return d instanceof Date && !isNaN(d.getTime()) ? `${new Date(d.getTime()).toISOString()}` : "Invalid date";
};
const $e186acb03c99a462$export$6cbd403afa8090eb = (a, b, sortBy)=>{
const ret = typeof a[sortBy.name] === "number" || typeof b[sortBy.name] === "number" ? (typeof a[sortBy.name] === "number" ? a[sortBy.name] : -Infinity) - (typeof b[sortBy.name] === "number" ? b[sortBy.name] : -Infinity) : a[sortBy.name] instanceof Date && b[sortBy.name] instanceof Date ? a[sortBy.name].getTime() - b[sortBy.name].getTime() : (0, $2d0562c3236da942$export$5813a5ff74a5f299)(a[sortBy.name], false).localeCompare((0, $2d0562c3236da942$export$5813a5ff74a5f299)(b[sortBy.name], false));
return ret;
};
var $b65191f6d0a0a991$exports = {};
$parcel$export($b65191f6d0a0a991$exports, "SimpleTable", function () { return $8bf0d84dcf2ec6e7$export$3fe48f9151d0ecc2; });
var $9a300121ef89926b$exports = {};
$parcel$export($9a300121ef89926b$exports, "footerHolder", function () { return $9a300121ef89926b$export$b203872abf836b30; }, function (v) { return $9a300121ef89926b$export$b203872abf836b30 = v; });
$parcel$export($9a300121ef89926b$exports, "holder", function () { return $9a300121ef89926b$export$f57c6e831b0d072a; }, function (v) { return $9a300121ef89926b$export$f57c6e831b0d072a = v; });
$parcel$export($9a300121ef89926b$exports, "main", function () { return $9a300121ef89926b$export$f22da7240b7add18; }, function (v) { return $9a300121ef89926b$export$f22da7240b7add18 = v; });
$parcel$export($9a300121ef89926b$exports, "scroll", function () { return $9a300121ef89926b$export$209876d7b1ac8f3; }, function (v) { return $9a300121ef89926b$export$209876d7b1ac8f3 = v; });
$parcel$export($9a300121ef89926b$exports, "table", function () { return $9a300121ef89926b$export$9852986a3ec5f6a0; }, function (v) { return $9a300121ef89926b$export$9852986a3ec5f6a0 = v; });
$parcel$export($9a300121ef89926b$exports, "title", function () { return $9a300121ef89926b$export$fb184b623420d9be; }, function (v) { return $9a300121ef89926b$export$fb184b623420d9be = v; });
$parcel$export($9a300121ef89926b$exports, "titleHolder", function () { return $9a300121ef89926b$export$9835d85acf04d22e; }, function (v) { return $9a300121ef89926b$export$9835d85acf04d22e = v; });
var $9a300121ef89926b$export$b203872abf836b30;
var $9a300121ef89926b$export$f57c6e831b0d072a;
var $9a300121ef89926b$export$f22da7240b7add18;
var $9a300121ef89926b$export$209876d7b1ac8f3;
var $9a300121ef89926b$export$9852986a3ec5f6a0;
var $9a300121ef89926b$export$fb184b623420d9be;
var $9a300121ef89926b$export$9835d85acf04d22e;
$9a300121ef89926b$export$b203872abf836b30 = `ast-SimpleTable-module-byZixa-footerHolder`;
$9a300121ef89926b$export$f57c6e831b0d072a = `ast-SimpleTable-module-byZixa-holder`;
$9a300121ef89926b$export$f22da7240b7add18 = `ast-SimpleTable-module-byZixa-main`;
$9a300121ef89926b$export$209876d7b1ac8f3 = `ast-SimpleTable-module-byZixa-scroll`;
$9a300121ef89926b$export$9852986a3ec5f6a0 = `ast-SimpleTable-module-byZixa-table`;
$9a300121ef89926b$export$fb184b623420d9be = `ast-SimpleTable-module-byZixa-title`;
$9a300121ef89926b$export$9835d85acf04d22e = `ast-SimpleTable-module-byZixa-titleHolder`;
var $54193bdb0fc035ea$exports = {};
$parcel$export($54193bdb0fc035ea$exports, "noKeyField", function () { return $54193bdb0fc035ea$export$32cccc561cbc974b; }, function (v) { return $54193bdb0fc035ea$export$32cccc561cbc974b = v; });
$parcel$export($54193bdb0fc035ea$exports, "tbody", function () { return $54193bdb0fc035ea$export$7cdd536eaa8f163c; }, function (v) { return $54193bdb0fc035ea$export$7cdd536eaa8f163c = v; });
var $54193bdb0fc035ea$export$32cccc561cbc974b;
var $54193bdb0fc035ea$export$7cdd536eaa8f163c;
$54193bdb0fc035ea$export$32cccc561cbc974b = `ast-SimpleTableBody-module-Y-lNqW-noKeyField`;
$54193bdb0fc035ea$export$7cdd536eaa8f163c = `ast-SimpleTableBody-module-Y-lNqW-tbody`;
// istanbul ignore next
const $29b1c1a3e3f50a4f$var$defaultFn = ()=>{};
const $29b1c1a3e3f50a4f$export$2fba198b5b2e37fa = {
id: "simple-table",
fields: [],
keyField: "",
viewData: [],
totalRows: 0,
setTableData: $29b1c1a3e3f50a4f$var$defaultFn,
setFilterData: $29b1c1a3e3f50a4f$var$defaultFn,
setSearchText: $29b1c1a3e3f50a4f$var$defaultFn,
updateSortBy: $29b1c1a3e3f50a4f$var$defaultFn,
currentSelection: [],
toggleAllCurrentSelection: $29b1c1a3e3f50a4f$var$defaultFn,
toggleSelection: $29b1c1a3e3f50a4f$var$defaultFn,
setColumnWidth: $29b1c1a3e3f50a4f$var$defaultFn,
pageRows: 50,
setPageRows: $29b1c1a3e3f50a4f$var$defaultFn,
firstRow: 0,
setFirstRow: $29b1c1a3e3f50a4f$var$defaultFn,
columnWidths: [],
allColumnItems: [],
currentColumnItems: [],
currentColumnFilter: null,
currentColumnFilters: [],
setCurrentColumnFilter: $29b1c1a3e3f50a4f$var$defaultFn,
setCurrentColumnFilters: $29b1c1a3e3f50a4f$var$defaultFn
};
const $29b1c1a3e3f50a4f$export$2fa61d0504f4f554 = /*#__PURE__*/ (0, $a6CVW$createContext)($29b1c1a3e3f50a4f$export$2fba198b5b2e37fa);
const $29b1c1a3e3f50a4f$export$bcd2e40cf2ceec0d = ()=>{
const context = (0, $a6CVW$useContext)($29b1c1a3e3f50a4f$export$2fa61d0504f4f554);
return context;
};
const $6fafd1e93a2ba7ab$export$48b23f1dbb795221 = ({ rowId: rowId, cellField: cellField, columnNumber: columnNumber, rowNumber: rowNumber })=>{
const simpleTableContext = (0, $a6CVW$useContext)((0, $29b1c1a3e3f50a4f$export$2fa61d0504f4f554));
const field = simpleTableContext.fields.find((f)=>f.name === cellField);
const rowData = simpleTableContext.viewData.find((d)=>d[simpleTableContext.keyField] === rowId);
return /*#__PURE__*/ (0, $a6CVW$jsx)("td", {
id: `${simpleTableContext.id}-row-${String(rowId).toLowerCase().trim()}-cell-${field?.name ?? columnNumber}`,
className: (0, (/*@__PURE__*/$parcel$interopDefault($e344397c31793d24$exports))).cell,
children: !field || !rowData ? `${!rowData ? "Row data" : ""}${!rowData && !field ? ", " : ""}${!field ? "Field" : ""} not found` : field.renderFn ? field.renderFn({
rowData: rowData,
columnNumber: columnNumber,
field: field,
cellField: field.name,
rowNumber: rowNumber
}) : /*#__PURE__*/ (0, $a6CVW$jsx)((0, $143ff5ea38a50f00$export$eaad410fa83c9417), {
rowData: rowData,
columnNumber: columnNumber,
field: field,
cellField: field.name,
rowNumber: rowNumber
})
}, cellField);
};
$6fafd1e93a2ba7ab$export$48b23f1dbb795221.displayName = "SimpleTableCell";
var $3d4c690f3daa4ef7$exports = {};
$parcel$export($3d4c690f3daa4ef7$exports, "firstcol", function () { return $3d4c690f3daa4ef7$export$209b552db59e98b8; }, function (v) { return $3d4c690f3daa4ef7$export$209b552db59e98b8 = v; });
$parcel$export($3d4c690f3daa4ef7$exports, "selected", function () { return $3d4c690f3daa4ef7$export$d90250155de6d7e7; }, function (v) { return $3d4c690f3daa4ef7$export$d90250155de6d7e7 = v; });
var $3d4c690f3daa4ef7$export$209b552db59e98b8;
var $3d4c690f3daa4ef7$export$d90250155de6d7e7;
$3d4c690f3daa4ef7$export$209b552db59e98b8 = `ast-SimpleTableRow-module-KPelGa-firstcol`;
$3d4c690f3daa4ef7$export$d90250155de6d7e7 = `ast-SimpleTableRow-module-KPelGa-selected`;
const $3b4572511bdc4efe$export$31fe1c7fa47941f3 = ({ rowId: rowId, rowNumber: rowNumber })=>{
const simpleTableContext = (0, $a6CVW$useContext)((0, $29b1c1a3e3f50a4f$export$2fa61d0504f4f554));
return /*#__PURE__*/ (0, $a6CVW$jsxs)("tr", {
id: `${simpleTableContext.id}-row-${rowId}`,
className: simpleTableContext.currentSelection.findIndex((s)=>s === rowId) > -1 ? (0, (/*@__PURE__*/$parcel$interopDefault($3d4c690f3daa4ef7$exports))).selected : undefined,
children: [
simpleTableContext.selectable && /*#__PURE__*/ (0, $a6CVW$jsx)("td", {
className: (0, (/*@__PURE__*/$parcel$interopDefault($3d4c690f3daa4ef7$exports))).firstcol,
children: /*#__PURE__*/ (0, $a6CVW$jsx)("div", {
children: /*#__PURE__*/ (0, $a6CVW$jsx)("input", {
id: `${simpleTableContext.id}-check-row-${rowId}`,
role: "checkbox",
type: "checkbox",
className: simpleTableContext.filterCheckClassName,
checked: simpleTableContext.currentSelection.findIndex((s)=>s === rowId) > -1,
onChange: ()=>simpleTableContext.toggleSelection && simpleTableContext.toggleSelection(rowId)
})
})
}),
simpleTableContext.fields.filter((f)=>!f.hidden).map((field, ci)=>/*#__PURE__*/ (0, $a6CVW$jsx)((0, $6fafd1e93a2ba7ab$export$48b23f1dbb795221), {
rowId: rowId,
rowNumber: rowNumber,
columnNumber: ci,
cellField: field.name
}, ci))
]
});
};
$3b4572511bdc4efe$export$31fe1c7fa47941f3.displayName = "SimpleTableRow";
const $688bd579c4247c44$export$166eb73abdd0a383 = ()=>{
const simpleTableContext = (0, $a6CVW$useContext)((0, $29b1c1a3e3f50a4f$export$2fa61d0504f4f554));
return /*#__PURE__*/ (0, $a6CVW$jsx)("tbody", {
className: (0, (/*@__PURE__*/$parcel$interopDefault($54193bdb0fc035ea$exports))).tbody,
children: simpleTableContext.viewData.slice(simpleTableContext.firstRow, simpleTableContext.firstRow + simpleTableContext.pageRows).map((row, ri)=>{
const chk = typeof row[simpleTableContext.keyField] === "string" || typeof row[simpleTableContext.keyField] === "number";
return chk ? /*#__PURE__*/ (0, $a6CVW$jsx)((0, $3b4572511bdc4efe$export$31fe1c7fa47941f3), {
rowId: row[simpleTableContext.keyField],
rowNumber: ri + simpleTableContext.firstRow
}, row[simpleTableContext.keyField]) : /*#__PURE__*/ (0, $a6CVW$jsx)("tr", {
children: /*#__PURE__*/ (0, $a6CVW$jsx)("td", {
colSpan: simpleTableContext.fields.filter((f)=>!f.hidden).length,
className: (0, (/*@__PURE__*/$parcel$interopDefault($54193bdb0fc035ea$exports))).noKeyField,
children: "keyField has not been found"
})
}, ri);
})
});
};
$688bd579c4247c44$export$166eb73abdd0a383.displayName = "SimpleTableBody";
var $33dfa4f31432acb8$exports = {};
$parcel$export($33dfa4f31432acb8$exports, "checkboxContainer", function () { return $33dfa4f31432acb8$export$be69ea624d82a314; }, function (v) { return $33dfa4f31432acb8$export$be69ea624d82a314 = v; });
var $33dfa4f31432acb8$export$be69ea624d82a314;
$33dfa4f31432acb8$export$be69ea624d82a314 = `ast-SimpleTableCheckBox-module-rhSufG-checkboxContainer`;
var $6121304767059332$exports = {};
$parcel$export($6121304767059332$exports, "holder", function () { return $6121304767059332$export$f57c6e831b0d072a; }, function (v) { return $6121304767059332$export$f57c6e831b0d072a = v; });
$parcel$export($6121304767059332$exports, "label", function () { return $6121304767059332$export$1237798dc640739a; }, function (v) { return $6121304767059332$export$1237798dc640739a = v; });
var $6121304767059332$export$f57c6e831b0d072a;
var $6121304767059332$export$1237798dc640739a;
$6121304767059332$export$f57c6e831b0d072a = `ast-SimpleTableFilter-module-Q8L8jW-holder`;
$6121304767059332$export$1237798dc640739a = `ast-SimpleTableFilter-module-Q8L8jW-label`;
const $37494a5c2c819927$export$3a5aecd8506640b7 = ()=>{
const simpleTableContext = (0, $a6CVW$useContext)((0, $29b1c1a3e3f50a4f$export$2fa61d0504f4f554));
return /*#__PURE__*/ (0, $a6CVW$jsxs)("div", {
className: (0, (/*@__PURE__*/$parcel$interopDefault($6121304767059332$exports))).holder,
onClick: ()=>simpleTableContext.setFilterData && simpleTableContext.setFilterData(!simpleTableContext.filterData),
children: [
/*#__PURE__*/ (0, $a6CVW$jsx)("div", {
className: (0, (/*@__PURE__*/$parcel$interopDefault($33dfa4f31432acb8$exports))).checkboxContainer,
children: /*#__PURE__*/ (0, $a6CVW$jsx)("input", {
id: `${simpleTableContext.id}-filter`,
type: "checkbox",
role: "checkbox",
className: simpleTableContext.filterCheckClassName,
checked: simpleTableContext.filterData !== undefined ? simpleTableContext.filterData : false,
onChange: ()=>true,
"aria-labelledby": `${simpleTableContext.id}-filter-label`
})
}),
/*#__PURE__*/ (0, $a6CVW$jsx)("span", {
id: `${simpleTableContext.id}-filter-label`,
className: (0, (/*@__PURE__*/$parcel$interopDefault($6121304767059332$exports))).label,
children: simpleTableContext.filterLabel ?? "Filter"
})
]
});
};
$37494a5c2c819927$export$3a5aecd8506640b7.displayName = "SimpleTableFilter";
var $3b8de475d255db9f$exports = {};
$parcel$export($3b8de475d255db9f$exports, "cell", function () { return $3b8de475d255db9f$export$e2e1361cdc35271d; }, function (v) { return $3b8de475d255db9f$export$e2e1361cdc35271d = v; });
$parcel$export($3b8de475d255db9f$exports, "resizeHandle", function () { return $3b8de475d255db9f$export$8e36b812ea421d73; }, function (v) { return $3b8de475d255db9f$export$8e36b812ea421d73 = v; });
var $3b8de475d255db9f$export$e2e1361cdc35271d;
var $3b8de475d255db9f$export$8e36b812ea421d73;
$3b8de475d255db9f$export$e2e1361cdc35271d = `ast-SimpleTableHeader-module-rCOiMq-cell`;
$3b8de475d255db9f$export$8e36b812ea421d73 = `ast-SimpleTableHeader-module-rCOiMq-resizeHandle`;
/* eslint-disable react-hooks/exhaustive-deps */
var $a9a06f824c5a210d$exports = {};
$parcel$export($a9a06f824c5a210d$exports, "boxHeader", function () { return $a9a06f824c5a210d$export$67350385bd9f1355; }, function (v) { return $a9a06f824c5a210d$export$67350385bd9f1355 = v; });
$parcel$export($a9a06f824c5a210d$exports, "close", function () { return $a9a06f824c5a210d$export$8360e631d277ea4d; }, function (v) { return $a9a06f824c5a210d$export$8360e631d277ea4d = v; });
$parcel$export($a9a06f824c5a210d$exports, "scroll", function () { return $a9a06f824c5a210d$export$209876d7b1ac8f3; }, function (v) { return $a9a06f824c5a210d$export$209876d7b1ac8f3 = v; });
$parcel$export($a9a06f824c5a210d$exports, "search", function () { return $a9a06f824c5a210d$export$d76128d007d19019; }, function (v) { return $a9a06f824c5a210d$export$d76128d007d19019 = v; });
$parcel$export($a9a06f824c5a210d$exports, "table", function () { return $a9a06f824c5a210d$export$9852986a3ec5f6a0; }, function (v) { return $a9a06f824c5a210d$export$9852986a3ec5f6a0 = v; });
$parcel$export($a9a06f824c5a210d$exports, "toggleButton", function () { return $a9a06f824c5a210d$export$c3f9788a1ddcf2d9; }, function (v) { return $a9a06f824c5a210d$export$c3f9788a1ddcf2d9 = v; });
var $a9a06f824c5a210d$export$67350385bd9f1355;
var $a9a06f824c5a210d$export$8360e631d277ea4d;
var $a9a06f824c5a210d$export$209876d7b1ac8f3;
var $a9a06f824c5a210d$export$d76128d007d19019;
var $a9a06f824c5a210d$export$9852986a3ec5f6a0;
var $a9a06f824c5a210d$export$c3f9788a1ddcf2d9;
$a9a06f824c5a210d$export$67350385bd9f1355 = `ast-SimpleTableColumnFilter-module-us4d8a-boxHeader`;
$a9a06f824c5a210d$export$8360e631d277ea4d = `ast-SimpleTableColumnFilter-module-us4d8a-close`;
$a9a06f824c5a210d$export$209876d7b1ac8f3 = `ast-SimpleTableColumnFilter-module-us4d8a-scroll`;
$a9a06f824c5a210d$export$d76128d007d19019 = `ast-SimpleTableColumnFilter-module-us4d8a-search`;
$a9a06f824c5a210d$export$9852986a3ec5f6a0 = `ast-SimpleTableColumnFilter-module-us4d8a-table`;
$a9a06f824c5a210d$export$c3f9788a1ddcf2d9 = `ast-SimpleTableColumnFilter-module-us4d8a-toggleButton`;
const $67fa7036c02790e7$export$efd2611dc765ff3f = (props)=>/*#__PURE__*/ (0, $a6CVW$jsx)("svg", {
...props,
xmlns: "http://www.w3.org/2000/svg",
width: "16",
height: "16",
fill: "currentColor",
viewBox: "0 0 16 16",
"aria-label": "Close filter",
children: /*#__PURE__*/ (0, $a6CVW$jsx)("path", {
d: "M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"
})
});
$67fa7036c02790e7$export$efd2611dc765ff3f.displayName = "SimpleTableClose";
const $67fa7036c02790e7$export$f9f275e56b491797 = (props)=>/*#__PURE__*/ (0, $a6CVW$jsx)("svg", {
...props,
xmlns: "http://www.w3.org/2000/svg",
width: "16",
height: "16",
fill: "currentColor",
viewBox: "0 0 16 16",
children: /*#__PURE__*/ (0, $a6CVW$jsx)("path", {
d: "M3.5 12.5a.5.5 0 0 1-1 0V3.707L1.354 4.854a.5.5 0 1 1-.708-.708l2-1.999.007-.007a.498.498 0 0 1 .7.006l2 2a.5.5 0 1 1-.707.708L3.5 3.707V12.5zm3.5-9a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zM7.5 6a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1h-5zm0 3a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zm0 3a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1h-1z"
})
});
$67fa7036c02790e7$export$f9f275e56b491797.displayName = "SimpleTableSortAsc";
const $67fa7036c02790e7$export$d6e14943d35dcd63 = (props)=>/*#__PURE__*/ (0, $a6CVW$jsx)("svg", {
...props,
xmlns: "http://www.w3.org/2000/svg",
width: "16",
height: "16",
fill: "currentColor",
viewBox: "0 0 16 16",
children: /*#__PURE__*/ (0, $a6CVW$jsx)("path", {
d: "M3.5 2.5a.5.5 0 0 0-1 0v8.793l-1.146-1.147a.5.5 0 0 0-.708.708l2 1.999.007.007a.497.497 0 0 0 .7-.006l2-2a.5.5 0 0 0-.707-.708L3.5 11.293V2.5zm3.5 1a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zM7.5 6a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1h-5zm0 3a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zm0 3a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1h-1z"
})
});
$67fa7036c02790e7$export$d6e14943d35dcd63.displayName = "SimpleTableSortDesc";
const $67fa7036c02790e7$export$4c49c2f0ba062656 = (props)=>/*#__PURE__*/ (0, $a6CVW$jsx)("svg", {
...props,
xmlns: "http://www.w3.org/2000/svg",
width: "16",
height: "16",
fill: "currentColor",
viewBox: "0 0 16 16",
children: /*#__PURE__*/ (0, $a6CVW$jsx)("path", {
d: "M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5v-2zm1 .5v1.308l4.372 4.858A.5.5 0 0 1 7 8.5v5.306l2-.666V8.5a.5.5 0 0 1 .128-.334L13.5 3.308V2h-11z"
})
});
$67fa7036c02790e7$export$4c49c2f0ba062656.displayName = "SimpleTableFilterInactive";
const $67fa7036c02790e7$export$b72ac73842ff2e5f = (props)=>/*#__PURE__*/ (0, $a6CVW$jsx)("svg", {
...props,
xmlns: "http://www.w3.org/2000/svg",
width: "16",
height: "16",
fill: "var(--st-select-active)",
viewBox: "0 0 16 16",
children: /*#__PURE__*/ (0, $a6CVW$jsx)("path", {
d: "M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5v-2z"
})
});
$67fa7036c02790e7$export$b72ac73842ff2e5f.displayName = "SimpleTableFilterActive";
const $67fa7036c02790e7$export$6d7b1be640d775 = (props)=>/*#__PURE__*/ (0, $a6CVW$jsxs)("svg", {
...props,
xmlns: "http://www.w3.org/2000/svg",
width: "16",
height: "12",
fill: "currentColor",
viewBox: "0 0 16 16",
children: [
/*#__PURE__*/ (0, $a6CVW$jsx)("path", {
d: "M8.404 7.304a.802.802 0 0 0 0 1.392l6.363 3.692c.52.302 1.233-.043 1.233-.696V4.308c0-.653-.713-.998-1.233-.696L8.404 7.304Z"
}),
/*#__PURE__*/ (0, $a6CVW$jsx)("path", {
d: "M.404 7.304a.802.802 0 0 0 0 1.392l6.363 3.692c.52.302 1.233-.043 1.233-.696V4.308c0-.653-.713-.998-1.233-.696L.404 7.304Z"
})
]
});
$67fa7036c02790e7$export$6d7b1be640d775.displayName = "SimpleTablePagerStart";
const $67fa7036c02790e7$export$5843adf024675d72 = (props)=>/*#__PURE__*/ (0, $a6CVW$jsx)("svg", {
...props,
xmlns: "http://www.w3.org/2000/svg",
width: "16",
height: "12",
fill: "currentColor",
viewBox: "0 0 16 16",
children: /*#__PURE__*/ (0, $a6CVW$jsx)("path", {
d: "m3.86 8.753 5.482 4.796c.646.566 1.658.106 1.658-.753V3.204a1 1 0 0 0-1.659-.753l-5.48 4.796a1 1 0 0 0 0 1.506z"
})
});
$67fa7036c02790e7$export$5843adf024675d72.displayName = "SimpleTablePagerPrev";
const $67fa7036c02790e7$export$384c7abeb3a2ff53 = (props)=>/*#__PURE__*/ (0, $a6CVW$jsx)("svg", {
...props,
xmlns: "http://www.w3.org/2000/svg",
width: "16",
height: "12",
fill: "currentColor",
viewBox: "0 0 16 16",
children: /*#__PURE__*/ (0, $a6CVW$jsx)("path", {
d: "m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z"
})
});
$67fa7036c02790e7$export$384c7abeb3a2ff53.displayName = "SimpleTablePagerNext";
const $67fa7036c02790e7$export$f8b8c716218840a = (props)=>/*#__PURE__*/ (0, $a6CVW$jsxs)("svg", {
...props,
xmlns: "http://www.w3.org/2000/svg",
width: "16",
height: "12",
fill: "currentColor",
viewBox: "0 0 16 16",
children: [
/*#__PURE__*/ (0, $a6CVW$jsx)("path", {
d: "M7.596 7.304a.802.802 0 0 1 0 1.392l-6.363 3.692C.713 12.69 0 12.345 0 11.692V4.308c0-.653.713-.998 1.233-.696l6.363 3.692Z"
}),
/*#__PURE__*/ (0, $a6CVW$jsx)("path", {
d: "M15.596 7.304a.802.802 0 0 1 0 1.392l-6.363 3.692C8.713 12.69 8 12.345 8 11.692V4.308c0-.653.713-.998 1.233-.696l6.363 3.692Z"
})
]
});
$67fa7036c02790e7$export$f8b8c716218840a.displayName = "SimpleTablePagerEnd";
var $b8a87bcd44c7ea21$var$ESimpleTableColumnFilterStatus = /*#__PURE__*/ function(ESimpleTableColumnFilterStatus) {
ESimpleTableColumnFilterStatus["FilteredOutByOtherFilters"] = "filteredOutByOtherFilters";
ESimpleTableColumnFilterStatus["AvailableNoLocalFilter"] = "availableNoLocalFilter";
ESimpleTableColumnFilterStatus["AvailableButNotInLocalFilter"] = "availableButNotInLocalFilter";
ESimpleTableColumnFilterStatus["AvailableAndInLocalFilter"] = "availableAndInLocalFilter";
return ESimpleTableColumnFilterStatus;
}($b8a87bcd44c7ea21$var$ESimpleTableColumnFilterStatus || {});
const $b8a87bcd44c7ea21$export$bdb6d3fce58542c9 = ({ columnName: columnName })=>{
const simpleTableContext = (0, $29b1c1a3e3f50a4f$export$bcd2e40cf2ceec0d)();
const allCheck = (0, $a6CVW$useRef)(null);
const inputRef = (0, $a6CVW$useRef)(null);
/** Value of the local search input */ const [localFilterText, setLocalFilterText] = (0, $a6CVW$useState)("");
/** Filter for this column */ const thisFilter = simpleTableContext.currentColumnFilters?.find((cf)=>cf.columnName === columnName);
/**
* Current state of the values for this column
* @param filterItems - All unique items for this column with their current selected and available status
* @param setFilterItems - Function to update the filter items, which will update the checkboxes and the filtered list
*/ const [filterItems, setFilterItems] = (0, $a6CVW$useState)((simpleTableContext.allColumnItems.find((cf)=>cf.columnName === columnName)?.values ?? []).map((value)=>{
const isAvailable = simpleTableContext.currentColumnItems.find((cf)=>cf.columnName === columnName)?.values.includes(value);
const isSelected = thisFilter ? thisFilter.values.includes(value) : true;
return {
value: value,
selected: isSelected,
status: !isAvailable ? "filteredOutByOtherFilters" : "availableNoLocalFilter"
};
}));
/**
* onClose handler for the filter popover, applies the current filter to the table and resets the local filter state
*/ const onClose = (values)=>{
const newColumnFilters = [
...simpleTableContext.currentColumnFilters
];
const ix = simpleTableContext.currentColumnFilters.findIndex((cf)=>cf.columnName === columnName);
// If the current filter is the same as the available list, remove it
if (filterItems.every((fi)=>fi.selected) && ix > -1) newColumnFilters.splice(ix, 1);
else {
const newColumnFilter = {
columnName: columnName,
values: values ?? filterItems.filter((fi)=>fi.selected).map((fi)=>fi.value)
};
if (ix > -1) newColumnFilters.splice(ix, 1, newColumnFilter);
else newColumnFilters.push(newColumnFilter);
}
simpleTableContext.setCurrentColumnFilters(newColumnFilters);
simpleTableContext.setCurrentColumnFilter(null);
setLocalFilterText("");
};
// Handle typing into the filter box
const handleFilterChange = (e)=>{
setLocalFilterText(e.currentTarget.value);
const newFilter = e.currentTarget.value.trim();
const newFilterItems = filterItems.map((fi)=>{
if (fi.status === "filteredOutByOtherFilters") return {
...fi,
selected: fi.value.toLowerCase().includes(newFilter.toLowerCase())
};
else if (newFilter !== "") {
const thisValueMatch = fi.value.toLowerCase().includes(newFilter.toLowerCase());
return {
...fi,
selected: thisValueMatch,
status: thisValueMatch ? "availableAndInLocalFilter" : "availableButNotInLocalFilter"
};
} else return {
...fi,
status: "availableNoLocalFilter"
};
});
setFilterItems(newFilterItems);
};
// Toggle all viewed rows
const handleCheckAll = ()=>{
// Add all items if they are not already in the current filter
if (filterItems.some((fi)=>!fi.selected)) setFilterItems(filterItems.map((fi)=>({
...fi,
selected: true
})));
else setFilterItems(filterItems.map((fi)=>({
...fi,
selected: false
})));
};
// Toggle all viewed rows
const handleCheckSearch = (e)=>{
e.stopPropagation();
e.preventDefault();
if (localFilterText.trim() === "") return;
const trimmedFilterText = localFilterText.trim().toLowerCase();
const newMatchSearch = filterItems.some((fi)=>fi.status === "availableAndInLocalFilter" && !fi.selected);
setFilterItems(filterItems.map((fi)=>{
let newSelected;
if (newMatchSearch) {
if (fi.status === "availableAndInLocalFilter") newSelected = true;
else if (fi.status === "availableButNotInLocalFilter") newSelected = false;
else newSelected = fi.value.toLowerCase().includes(trimmedFilterText);
} else if (fi.status === "availableButNotInLocalFilter") newSelected = true;
else if (fi.status === "availableAndInLocalFilter") newSelected = false;
else newSelected = !fi.value.toLowerCase().includes(trimmedFilterText);
return {
...fi,
selected: newSelected
};
}));
};
// Toggle a single row
const handleCheckRow = (e, v)=>{
e.stopPropagation();
e.preventDefault();
setFilterItems(filterItems.map((fi)=>fi.value === v ? {
...fi,
selected: !fi.selected
} : fi));
};
const BodyRow = (props)=>/*#__PURE__*/ (0, $a6CVW$jsxs)("tr", {
children: [
/*#__PURE__*/ (0, $a6CVW$jsx)("td", {
style: {
backgroundColor: props.colour
},
children: /*#__PURE__*/ (0, $a6CVW$jsx)("div", {
className: (0, (/*@__PURE__*/$parcel$interopDefault($33dfa4f31432acb8$exports))).checkboxContainer,
onClick: (e)=>handleCheckRow(e, props.fi.value),
children: /*#__PURE__*/ (0, $a6CVW$jsx)("input", {
"aria-label": props.fi.value,
id: `${simpleTableContext.id}-columnfilter-${columnName}-check-${props.ix}`,
type: "checkbox",
role: "checkbox",
className: simpleTableContext.filterCheckClassName,
checked: props.fi.selected,
onChange: // istanbul ignore next -- this element is hidden
(e)=>handleCheckRow(e, props.fi.value)
})
})
}),
/*#__PURE__*/ (0, $a6CVW$jsx)("td", {
style: {
backgroundColor: props.colour
},
children: props.fi.value
})
]
});
/**
* Focus the search input when the filter is opened, and refocus if it is closed and reopened
*/ (0, $a6CVW$useEffect)(()=>{
const attemptFocus = ()=>{
if (inputRef.current && document.activeElement !== inputRef.current) inputRef.current.focus();
};
attemptFocus();
const timer1 = setTimeout(attemptFocus, 50);
const timer2 = setTimeout(attemptFocus, 150);
return ()=>{
clearTimeout(timer1);
clearTimeout(timer2);
};
}, []);
/**
* If enter is pressed while the filter is open, apply the filter
*/ (0, $a6CVW$useEffect)(()=>{
const handleKeyDown = (e)=>{
if (e.key === "Enter") onClose();
};
window.addEventListener("keydown", handleKeyDown);
return ()=>{
window.removeEventListener("keydown", handleKeyDown);
};
}, [
onClose
]);
/**
* Manage the state of the select all checkbox based on the current filter and available list
*/ (0, $a6CVW$useEffect)(()=>{
/* istanbul ignore else */ if (allCheck.current) {
if (filterItems.every((fi)=>fi.selected || fi.status === "filteredOutByOtherFilters")) {
allCheck.current.checked = true;
allCheck.current.indeterminate = false;
} else if (filterItems.some((fi)=>fi.selected)) {
allCheck.current.checked = false;
allCheck.current.indeterminate = true;
} else {
allCheck.current.checked = false;
allCheck.current.indeterminate = false;
}
}
}, [
filterItems,
localFilterText
]);
const topItems = filterItems.filter((fi)=>fi.status === "availableAndInLocalFilter" || fi.status === "availableNoLocalFilter");
const middleItems = filterItems.filter((fi)=>fi.status === "availableButNotInLocalFilter");
const bottomItems = filterItems.filter((fi)=>fi.status === "filteredOutByOtherFilters");
const selectedCount = filterItems.filter((fi)=>fi.selected).length;
return /*#__PURE__*/ (0, $a6CVW$jsxs)("table", {
className: (0, (/*@__PURE__*/$parcel$interopDefault($a9a06f824c5a210d$exports))).table,
children: [
/*#__PURE__*/ (0, $a6CVW$jsxs)("thead", {
children: [
/*#__PURE__*/ (0, $a6CVW$jsxs)("tr", {
children: [
/*#__PURE__*/ (0, $a6CVW$jsx)("th", {
children: "\xa0"
}),
/*#__PURE__*/ (0, $a6CVW$jsx)("th", {
children: /*#__PURE__*/ (0, $a6CVW$jsxs)("div", {
className: (0, (/*@__PURE__*/$parcel$interopDefault($a9a06f824c5a210d$exports))).search,
children: [
/*#__PURE__*/ (0, $a6CVW$jsx)("input", {
ref: inputRef,
id: `${simpleTableContext.id}-columnfilter-${columnName}-filter`,
"aria-label": "Column filter search",
value: localFilterText,
onChange: handleFilterChange
}),
/*#__PURE__*/ (0, $a6CVW$jsx)("button", {
className: (0, (/*@__PURE__*/$parcel$interopDefault($a9a06f824c5a210d$exports))).toggleButton,
onClick: handleCheckSearch,
"aria-label": "Toggle search results",
title: "Toggle search results",
children: /*#__PURE__*/ (0, $a6CVW$jsx)("svg", {
xmlns: "http://www.w3.org/2000/svg",
height: "16px",
viewBox: "0 -960 960 960",
width: "16px",
fill: "#1f1f1f",
children: /*#__PURE__*/ (0, $a6CVW$jsx)("path", {
d: "m360-240 56-56-62-64h166v-80H354l62-64-56-56-160 160 160 160Zm240-160 160-160-160-160-56 56 62 64H440v80h166l-62 64 56 56ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"
})
})
}),
/*#__PURE__*/ (0, $a6CVW$jsx)("div", {
className: (0, (/*@__PURE__*/$parcel$interopDefault($a9a06f824c5a210d$exports))).close,
children: /*#__PURE__*/ (0, $a6CVW$jsx)((0, $67fa7036c02790e7$export$efd2611dc765ff3f), {
onClick: ()=>onClose()
})
})
]
})
})
]
}),
/*#__PURE__*/ (0, $a6CVW$jsxs)("tr", {
children: [
/*#__PURE__*/ (0, $a6CVW$jsx)("th", {
className: (0, (/*@__PURE__*/$parcel$interopDefault($a9a06f824c5a210d$exports))).boxHeader,
children: /*#__PURE__*/ (0, $a6CVW$jsx)("div", {
className: (0, (/*@__PURE__*/$parcel$interopDefault($33dfa4f31432acb8$exports))).checkboxContainer,
onClick: ()=>handleCheckAll(),
children: /*#__PURE__*/ (0, $a6CVW$jsx)("input", {
id: `${simpleTableContext.id}-columnfilter-${columnName}-check-all`,
"aria-label": "Select all",
className: simpleTableContext.filterCheckClassName,
ref: allCheck,
type: "checkbox",
role: "checkbox"
})
})
}),
/*#__PURE__*/ (0, $a6CVW$jsx)("th", {
children: "Select all"
})
]
})
]
}),
/*#__PURE__*/ (0, $a6CVW$jsxs)("tbody", {
className: (0, (/*@__PURE__*/$parcel$interopDefault($a9a06f824c5a210d$exports))).scroll,
children: [
topItems.length === 0 ? /*#__PURE__*/ (0, $a6CVW$jsx)("tr", {
children: /*#__PURE__*/ (0, $a6CVW$jsx)("td", {
colSpan: 2,
style: {
textAlign: "center"
},
children: "No matching items"
})
}) : topItems.map((item, ix)=>/*#__PURE__*/ (0, $a6CVW$jsx)(BodyRow, {
ix: ix,
fi: item
}, item.value)),
middleItems.length > 0 && /*#__PURE__*/ (0, $a6CVW$jsxs)((0, $a6CVW$Fragment), {
children: [
/*#__PURE__*/ (0, $a6CVW$jsx)("tr", {
children: /*#__PURE__*/ (0, $a6CVW$jsx)("th", {
colSpan: 2,
style: {
backgroundColor: "lightgrey"
}
})
}),
middleItems.map((item, ix)=>/*#__PURE__*/ (0, $a6CVW$jsx)(BodyRow, {
ix: ix,
fi: item,
colour: "lightgrey"
}, item.value))
]
}),
bottomItems.length > 0 && /*#__PURE__*/ (0, $a6CVW$jsxs)((0, $a6CVW$Fragment), {
children: [
/*#__PURE__*/ (0, $a6CVW$jsx)("tr", {
children: /*#__PURE__*/ (0, $a6CVW$jsx)("th", {
colSpan: 2,
style: {
backgroundColor: "darkgrey",
height: "2px",
textAlign: "left"
},
children: /*#__PURE__*/ (0, $a6CVW$jsx)("small", {
children: "Hidden by other filters"
})
})
}),
bottomItems.map((item, ix)=>/*#__PURE__*/ (0, $a6CVW$jsx)(BodyRow, {
ix: ix,
fi: item,
colour: "darkgrey"
}, item.value))
]
})
]
}),
/*#__PURE__*/ (0, $a6CVW$jsx)("tfoot", {
children: /*#__PURE__*/ (0, $a6CVW$jsx)("tr", {
children: /*#__PURE__*/ (0, $a6CVW$jsx)("td", {
colSpan: 2,
children: /*#__PURE__*/ (0, $a6CVW$jsx)("small", {
children: `${selectedCount} item${selectedCount !== 1 ? "s" : ""} selected`
})
})
})
})
]
});
};
$b8a87bcd44c7ea21$export$bdb6d3fce58542c9.displayName = "SimpleTableColumnFilter";
var $6778322675caae03$exports = {};
$parcel$export($6778322675caae03$exports, "clickable", function () { return $6778322675caae03$export$60d5655c6babb2a0; }, function (v) { return $6778322675caae03$export$60d5655c6babb2a0 = v; });
$parcel$export($6778322675caae03$exports, "filterHolder", function () { return $6778322675caae03$export$f8ca79fc2b1d5fa9; }, function (v) { return $6778322675caae03$export$f8ca79fc2b1d5fa9 = v; });
$parcel$export($6778322675caae03$exports, "iconHolder", function () { return $6778322675caae03$export$8826a4de072b82bd; }, function (v) { return $6778322675caae03$export$8826a4de072b82bd = v; });
$parcel$export($6778322675caae03$exports, "text", function () { return $6778322675caae03$export$6f093cfa640b7166; }, function (v) { return $6778322675caae03$export$6f093cfa640b7166 = v; });
var $6778322675caae03$export$60d5655c6babb2a0;
var $6778322675caae03$export$f8ca79fc2b1d5fa9;
var $6778322675caae03$export$8826a4de072b82bd;
var $6778322675caae03$export$6f093cfa640b7166;
$6778322675caae03$export$60d5655c6babb2a0 = `ast-SimpleTableHeaderContents-module-hte7-q-clickable`;
$6778322675caae03$export$f8ca79fc2b1d5fa9 = `ast-SimpleTableHeaderContents-module-hte7-q-filterHolder`;
$6778322675caae03$export$8826a4de072b82bd = `ast-SimpleTableHeaderContents-module-hte7-q-iconHolder`;
$6778322675caae03$export$6f093cfa640b7166 = `ast-SimpleTableHeaderContents-module-hte7-q-text`;
const $4c31c909a3b65e1b$export$54be34308c33172a = ({ children: children, isVisible: isVisible, anchorElementRef: anchorElementRef, onClose: onClose, ...rest })=>{
const [position, setPosition] = (0, $a6CVW$useState)({
top: undefined,
left: undefined,
right: undefined
});
const [alignment, setAlignment] = (0, $a6CVW$useState)("left");
const popoverRef = (0, $a6CVW$useRef)(null);
(0, $a6CVW$useEffect)(()=>{
const anchorElement = anchorElementRef.current;
const updatePosition = ()=>{
if (!anchorElement || !popoverRef.current) return;
const anchorRect = anchorElement.getBoundingClientRect();
const popoverRect = popoverRef.current.getBoundingClientRect();
const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;
// Close if the anchor is not visible
if (anchorRect.bottom < 8 || anchorRect.right < 8 || anchorRect.top > windowHeight || anchorRect.right > windowWidth) {
onClose();
return;
}
// Default position below the anchor
const top = anchorRect.bottom;
const left = anchorRect.left;
const right = anchorRect.right;
// Check horizontal boundaries
if (alignment === "right") {
// Close if there is no room
if (right - popoverRect.width <= 0 && left + popoverRect.width >= windowWidth) {
onClose();
return;
}
// If right alignment goes out of bounds, switch to left alignment
if (left + popoverRect.width < windowWidth - 8) setAlignment("left");
} else {
// Close if there is no room
if (left + popoverRect.width >= windowWidth - 8 && right - popoverRect.width <= 0) {
onClose();
return;
}
// If left alignment goes out of bounds, switch to right alignment
if (left + popoverRect.width >= windowWidth - 8 && right - popoverRect.width > 0) setAlignment("right");
}
// Check vertical boundaries
if (top + popoverRect.height > windowHeight) {
const newHeight = windowHeight - top - 24;
if (newHeight < 100) {
onClose();
return;
}
popoverRef.current.style.height = `${newHeight}px`;
}
const newPosition = {
top: top,
left: alignment === "left" ? left : undefined,
right: alignment === "right" ? windowWidth - right : undefined
};
setPosition(newPosition);
};
// Initial position update
updatePosition();
// Set up observers and event listeners
const handleScroll = ()=>updatePosition();
const handleResize = ()=>updatePosition();
// Handle escape key press
const handleKeyDown = (event)=>{
// istanbul ignore else
if (event.key === "Escape") {
window.removeEventListener("keydown", handleKeyDown);
onClose();
}
};
const resizeObserver = new ResizeObserver(updatePosition);
// Observe the popover and anchor element for resizing
if (popoverRef.current) {
resizeObserver.observe(popoverRef.current);
// Observe the parent elements up to the body to detect layout changes
let el = anchorElement;
while(el && el !== document.body){
resizeObserver.observe(el);
el = el.parentElement;
}
}
// Listen for scroll and resize events
window.addEventListener("scroll", handleScroll, true);
window.addEventListener("resize", handleResize);
window.addEventListener("keydown", handleKeyDown);
// Clean up all event listeners and observers
return ()=>{
resizeObserver.disconnect();
window.removeEventListener("scroll", handleScroll, true);
window.removeEventListener("resize", handleResize);
window.removeEventListener("keydown", handleKeyDown);
};