@asup/simple-table
Version:
REACT table, because I wanted one that took an array of objects as an input.
894 lines (797 loc) • 88.2 kB
JavaScript
import "./main.css";
import {jsx as $a6CVW$jsx, jsxs as $a6CVW$jsxs, Fragment as $a6CVW$Fragment} from "react/jsx-runtime";
import {_ as $a6CVW$_} from "@swc/helpers/_/_object_spread";
import {_ as $a6CVW$_1} from "@swc/helpers/_/_object_spread_props";
import {_ as $a6CVW$_2} from "@swc/helpers/_/_object_without_properties";
import {useState as $a6CVW$useState, useEffect as $a6CVW$useEffect, useCallback as $a6CVW$useCallback, useMemo as $a6CVW$useMemo, useContext as $a6CVW$useContext, createContext as $a6CVW$createContext, useRef as $a6CVW$useRef} from "react";
import {isEqual as $a6CVW$isEqual} from "lodash";
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});
}
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 $a2fddbb329c800f2$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 $a2fddbb329c800f2$export$e50c52e1a45b9cde = (s)=>{
const d = new Date(s);
return d instanceof Date && !isNaN(d.getTime()) ? `${new Date(d.getTime()).toISOString()}` : "Invalid date";
};
const $a2fddbb329c800f2$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)?$/) ? $a2fddbb329c800f2$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 $a2fddbb329c800f2$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";
}
};
const $a2fddbb329c800f2$export$618396a2e22e3f71 = ({ rowData: rowData, cellField: cellField })=>/*#__PURE__*/ (0, $a6CVW$jsx)("div", {
className: `simple-table-null-date-cell overflow-hidden ${typeof rowData[cellField] === "number" ? (0, (/*@__PURE__*/$parcel$interopDefault($e344397c31793d24$exports))).textRight : (0, (/*@__PURE__*/$parcel$interopDefault($e344397c31793d24$exports))).textLeft}`,
children: /*#__PURE__*/ (0, $a6CVW$jsx)("span", {
children: $a2fddbb329c800f2$export$5813a5ff74a5f299(rowData[cellField], false)
})
});
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, $a2fddbb329c800f2$export$5813a5ff74a5f299)(a[sortBy.name], false).localeCompare((0, $a2fddbb329c800f2$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`;
// 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: [],
currentColumnItems: [],
currentColumnFilter: null,
currentColumnFilters: [],
setCurrentColumnFilter: $29b1c1a3e3f50a4f$var$defaultFn,
setCurrentColumnFilters: $29b1c1a3e3f50a4f$var$defaultFn
};
const $29b1c1a3e3f50a4f$export$2fa61d0504f4f554 = /*#__PURE__*/ (0, $a6CVW$createContext)($29b1c1a3e3f50a4f$export$2fba198b5b2e37fa);
const $6fafd1e93a2ba7ab$export$48b23f1dbb795221 = ({ rowId: rowId, cellField: cellField, columnNumber: columnNumber, rowNumber: rowNumber })=>{
const simpleTableContext = (0, $a6CVW$useContext)((0, $29b1c1a3e3f50a4f$export$2fa61d0504f4f554));
const field = (0, $a6CVW$useMemo)(()=>simpleTableContext.fields.find((f)=>f.name === cellField), [
cellField,
simpleTableContext.fields
]);
const rowData = (0, $a6CVW$useMemo)(()=>simpleTableContext.viewData.find((d)=>d[simpleTableContext.keyField] === rowId), [
rowId,
simpleTableContext.keyField,
simpleTableContext.viewData
]);
var _field_name;
return /*#__PURE__*/ (0, $a6CVW$jsx)("td", {
id: `${simpleTableContext.id}-row-${String(rowId).toLowerCase().trim()}-cell-${(_field_name = field === null || field === void 0 ? void 0 : field.name) !== null && _field_name !== void 0 ? _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
}) : (0, $a2fddbb329c800f2$export$618396a2e22e3f71)({
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";
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`;
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));
var _simpleTableContext_filterLabel;
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 = simpleTableContext.filterLabel) !== null && _simpleTableContext_filterLabel !== void 0 ? _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`;
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; });
var $a9a06f824c5a210d$export$67350385bd9f1355;
var $a9a06f824c5a210d$export$8360e631d277ea4d;
var $a9a06f824c5a210d$export$209876d7b1ac8f3;
var $a9a06f824c5a210d$export$d76128d007d19019;
var $a9a06f824c5a210d$export$9852986a3ec5f6a0;
$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`;
const $67fa7036c02790e7$export$efd2611dc765ff3f = (props)=>/*#__PURE__*/ (0, $a6CVW$jsx)("svg", (0, $a6CVW$_1)((0, $a6CVW$_)({}, 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", (0, $a6CVW$_1)((0, $a6CVW$_)({}, 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", (0, $a6CVW$_1)((0, $a6CVW$_)({}, 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", (0, $a6CVW$_1)((0, $a6CVW$_)({}, 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", (0, $a6CVW$_1)((0, $a6CVW$_)({}, 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", (0, $a6CVW$_1)((0, $a6CVW$_)({}, 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", (0, $a6CVW$_1)((0, $a6CVW$_)({}, 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", (0, $a6CVW$_1)((0, $a6CVW$_)({}, 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", (0, $a6CVW$_1)((0, $a6CVW$_)({}, 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";
const $b8a87bcd44c7ea21$export$bdb6d3fce58542c9 = ({ columnName: columnName })=>{
var _simpleTableContext_currentColumnFilters_find, _simpleTableContext_currentColumnFilters;
const simpleTableContext = (0, $a6CVW$useContext)((0, $29b1c1a3e3f50a4f$export$2fa61d0504f4f554));
const allCheck = (0, $a6CVW$useRef)(null);
const searchCheck = (0, $a6CVW$useRef)(null);
const inputRef = (0, $a6CVW$useRef)(null);
const [localFilter, setLocalFilter] = (0, $a6CVW$useState)("");
const matchCheck = (0, $a6CVW$useRef)(null);
const [matchSearch, setMatchSearch] = (0, $a6CVW$useState)(true);
const availableList = (0, $a6CVW$useMemo)(()=>{
var _simpleTableContext_currentColumnItems_find;
var _simpleTableContext_currentColumnItems_find_values_sort;
return (_simpleTableContext_currentColumnItems_find_values_sort = (_simpleTableContext_currentColumnItems_find = simpleTableContext.currentColumnItems.find((cf)=>cf.columnName === columnName)) === null || _simpleTableContext_currentColumnItems_find === void 0 ? void 0 : _simpleTableContext_currentColumnItems_find.values.sort((a, b)=>a.localeCompare(b))) !== null && _simpleTableContext_currentColumnItems_find_values_sort !== void 0 ? _simpleTableContext_currentColumnItems_find_values_sort : [];
}, [
columnName,
simpleTableContext
]);
var _simpleTableContext_currentColumnFilters_find_values;
const [currentFilter, setCurrentFilter] = (0, $a6CVW$useState)((_simpleTableContext_currentColumnFilters_find_values = (_simpleTableContext_currentColumnFilters = simpleTableContext.currentColumnFilters) === null || _simpleTableContext_currentColumnFilters === void 0 ? void 0 : (_simpleTableContext_currentColumnFilters_find = _simpleTableContext_currentColumnFilters.find((cf)=>cf.columnName === columnName)) === null || _simpleTableContext_currentColumnFilters_find === void 0 ? void 0 : _simpleTableContext_currentColumnFilters_find.values) !== null && _simpleTableContext_currentColumnFilters_find_values !== void 0 ? _simpleTableContext_currentColumnFilters_find_values : availableList);
const onClose = (0, $a6CVW$useCallback)((values)=>{
if (simpleTableContext.setCurrentColumnFilters) {
const newColumnFilters = [
...simpleTableContext.currentColumnFilters
];
const newColumnFilter = {
columnName: columnName,
values: values !== null && values !== void 0 ? values : currentFilter
};
const ix = simpleTableContext.currentColumnFilters.findIndex((cf)=>cf.columnName === columnName);
// If the current filter is the same as the available list, remove it
if ((0, $a6CVW$isEqual)(availableList, currentFilter)) {
if (ix > -1) newColumnFilters.splice(ix, 1);
} else if (ix > -1) newColumnFilters.splice(ix, 1, newColumnFilter);
else newColumnFilters.push(newColumnFilter);
simpleTableContext.setCurrentColumnFilters(newColumnFilters);
}
setLocalFilter("");
setCurrentFilter([]);
simpleTableContext.setCurrentColumnFilter(null);
}, [
availableList,
columnName,
currentFilter,
simpleTableContext
]);
// Toggle all viewed rows
const toggleCurrentColumnFilter = (0, $a6CVW$useCallback)(()=>{
// Add all items if they are not already in the current filter
if (currentFilter.length < availableList.length) setCurrentFilter(availableList);
else setCurrentFilter([]);
}, [
availableList,
currentFilter.length
]);
// Toggle all viewed rows
const toggleCurrentColumnSearchFilter = (0, $a6CVW$useCallback)(()=>{
if (availableList) {
const searchedItems = availableList.filter((v)=>v.toLowerCase().includes(localFilter.toLowerCase()));
// Add selection if any are not included
if (searchedItems.some((item)=>!currentFilter.includes(item))) setCurrentFilter([
...searchedItems,
...currentFilter.filter((v)=>!searchedItems.includes(v))
]);
else {
setCurrentFilter(currentFilter.filter((v)=>!searchedItems.includes(v)));
setMatchSearch(false);
}
}
}, [
availableList,
currentFilter,
localFilter
]);
const selectBodyRow = (0, $a6CVW$useCallback)((e, v)=>{
e.stopPropagation();
e.preventDefault();
const newFilter = [
...currentFilter
];
const ix = newFilter.findIndex((cf)=>cf === v);
if (ix > -1) newFilter.splice(ix, 1);
else newFilter.push(v);
setCurrentFilter(newFilter);
}, [
currentFilter
]);
const bodyRow = (v, i)=>/*#__PURE__*/ (0, $a6CVW$jsxs)("tr", {
children: [
/*#__PURE__*/ (0, $a6CVW$jsx)("td", {
children: /*#__PURE__*/ (0, $a6CVW$jsx)("div", {
className: (0, (/*@__PURE__*/$parcel$interopDefault($33dfa4f31432acb8$exports))).checkboxContainer,
onClick: (e)=>selectBodyRow(e, v),
children: /*#__PURE__*/ (0, $a6CVW$jsx)("input", {
"aria-label": v,
id: `${simpleTableContext.id}-columnfilter-${columnName}-check-${i}`,
type: "checkbox",
role: "checkbox",
className: simpleTableContext.filterCheckClassName,
checked: currentFilter.includes(v),
onChange: (e)=>selectBodyRow(e, v)
})
})
}),
/*#__PURE__*/ (0, $a6CVW$jsx)("td", {
children: v
})
]
}, i);
(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 match search checkbox
(0, $a6CVW$useEffect)(()=>{
if (matchCheck.current) matchCheck.current.checked = matchSearch;
}, [
matchSearch
]);
// Manage the state of the checkboxes based on the current filter and available list
(0, $a6CVW$useEffect)(()=>{
if (allCheck.current) {
if ((currentFilter === null || currentFilter === void 0 ? void 0 : currentFilter.length) === (availableList === null || availableList === void 0 ? void 0 : availableList.length)) {
allCheck.current.checked = true;
allCheck.current.indeterminate = false;
} else if (currentFilter.length === 0) {
allCheck.current.checked = false;
allCheck.current.indeterminate = false;
} else {
allCheck.current.checked = false;
allCheck.current.indeterminate = true;
}
}
if (searchCheck.current) {
const searchResults = availableList === null || availableList === void 0 ? void 0 : availableList.filter((v)=>v.toLowerCase().includes(localFilter.toLowerCase()));
if (localFilter.trim().length === 0 || (searchResults === null || searchResults === void 0 ? void 0 : searchResults.length) === 0 || !(searchResults === null || searchResults === void 0 ? void 0 : searchResults.some((v)=>currentFilter.includes(v)))) {
searchCheck.current.checked = false;
searchCheck.current.indeterminate = false;
} else if (searchResults === null || searchResults === void 0 ? void 0 : searchResults.every((v)=>currentFilter.includes(v))) {
searchCheck.current.checked = true;
searchCheck.current.indeterminate = false;
} else {
searchCheck.current.checked = false;
searchCheck.current.indeterminate = true;
}
}
}, [
availableList,
availableList === null || availableList === void 0 ? void 0 : availableList.length,
currentFilter,
currentFilter === null || currentFilter === void 0 ? void 0 : currentFilter.length,
localFilter
]);
return /*#__PURE__*/ (0, $a6CVW$jsx)((0, $a6CVW$Fragment), {
children: /*#__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: localFilter,
onChange: (e)=>{
setLocalFilter(e.currentTarget.value);
if (matchSearch) setCurrentFilter(availableList.filter((v)=>v.toLowerCase().includes(e.currentTarget.value.toLowerCase())));
}
}),
/*#__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: ()=>setMatchSearch(!matchSearch),
children: /*#__PURE__*/ (0, $a6CVW$jsx)("input", {
ref: matchCheck,
id: `${simpleTableContext.id}-columnfilter-${columnName}-match-search`,
"aria-label": "Match search filter",
className: simpleTableContext.filterCheckClassName,
type: "checkbox",
role: "checkbox"
})
})
}),
/*#__PURE__*/ (0, $a6CVW$jsx)("th", {
children: "Match search filter"
})
]
}),
/*#__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: ()=>{
if (localFilter.trim().length > 0) toggleCurrentColumnSearchFilter();
},
children: /*#__PURE__*/ (0, $a6CVW$jsx)("input", {
id: `${simpleTableContext.id}-columnsearchfilter-${columnName}-check-all`,
"aria-label": "Column search filter toggle",
className: simpleTableContext.filterCheckClassName,
ref: searchCheck,
type: "checkbox",
role: "checkbox"
})
})
}),
/*#__PURE__*/ (0, $a6CVW$jsx)("th", {
children: "Toggle search values"
})
]
}),
/*#__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: ()=>toggleCurrentColumnFilter(),
children: /*#__PURE__*/ (0, $a6CVW$jsx)("input", {
id: `${simpleTableContext.id}-columnfilter-${columnName}-check-all`,
"aria-label": "Column filter toggle",
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: [
availableList.filter((v)=>v.toLowerCase().includes(localFilter.toLowerCase())).map(bodyRow),
availableList.filter((v)=>!v.toLowerCase().includes(localFilter.toLowerCase()) && currentFilter.includes(v)).length > 0 && /*#__PURE__*/ (0, $a6CVW$jsx)("tr", {
children: /*#__PURE__*/ (0, $a6CVW$jsx)("th", {
colSpan: 2,
style: {
backgroundColor: "grey"
}
})
}),
availableList.filter((v)=>!v.toLowerCase().includes(localFilter.toLowerCase()) && currentFilter.includes(v)).map(bodyRow)
]
}),
/*#__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: `${currentFilter.length} item${currentFilter.length !== 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 = (_param)=>{
var { children: children, isVisible: isVisible, anchorElement: anchorElement, onClose: onClose } = _param, rest = (0, $a6CVW$_2)(_param, [
"children",
"isVisible",
"anchorElement",
"onClose"
]);
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 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)=>{
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 li