schummar-table 1.0.0 → 1.0.2

package/dist/index.cjs

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_tableTheme = require("./tableTheme-CSqMIpLB.cjs");
-const require_useTheme = require("./useTheme-BxEsZbTm.cjs");
+const require_tableTheme = require("./tableTheme-CsTWp3yn.cjs");
+const require_useTheme = require("./useTheme-BrKiZfIC.cjs");
 let react = require("react");
 let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
 let _emotion_react = require("@emotion/react");
@@ -1603,6 +1603,70 @@ function FilterPopover({ anchor, onClose, column, children }) {
 	});
 }
 //#endregion
+//#region src/components/hiddenColumnFilters.tsx
+/** Lets users edit the filters of columns that are not visible, see `enableHiddenColumnFilters`. */
+function HiddenColumnFilters() {
+	const { props, visibleColumns, filterValues, actions } = useTableStructure();
+	const IconButton = require_useTheme.useTheme((t) => t.components.IconButton);
+	const Button = require_useTheme.useTheme((t) => t.components.Button);
+	const FilterList = require_useTheme.useTheme((t) => t.icons.FilterList);
+	const title = require_useTheme.useTheme((t) => t.text.hiddenColumnFilters);
+	const [anchor, setAnchor] = (0, react.useState)(null);
+	const [selected, setSelected] = (0, react.useState)();
+	const columns = props.columns.filter((column) => column.filter && !visibleColumns.some((visible) => visible.id === column.id));
+	if (columns.length === 0) return null;
+	const isActive = (columnId) => isActiveFilter(columns.find((column) => column.id === columnId)?.filter, filterValues.get(columnId));
+	const anyActive = columns.some((column) => isActive(column.id));
+	const selectedColumn = columns.find((column) => column.id === selected);
+	function close() {
+		setAnchor(null);
+		setSelected(void 0);
+	}
+	const color = (active) => active ? "var(--primaryMain)" : "#b0bac9";
+	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(_emotion_react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(IconButton, {
+		onClick: (event) => setAnchor(event.currentTarget),
+		css: { color: color(anyActive) },
+		children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(FilterList, {})
+	}), anchor && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(FilterPopover, {
+		anchor,
+		onClose: close,
+		column: selectedColumn,
+		children: selectedColumn ? /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("div", {
+			css: { display: "grid" },
+			children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(Button, {
+				onClick: () => setSelected(void 0),
+				css: {
+					justifyContent: "flex-start",
+					color: "inherit"
+				},
+				children: ["‹ ", selectedColumn.header]
+			}), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(FilterPanel, {
+				column: selectedColumn,
+				close
+			}, selectedColumn.id)]
+		}) : /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("div", {
+			css: {
+				padding: "calc(var(--spacing) * 2)",
+				display: "grid",
+				gap: "var(--spacing)"
+			},
+			children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", { children: title }), columns.map((column) => /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(Button, {
+				onClick: () => setSelected(column.id),
+				onContextMenu: (event) => {
+					actions.setFilterValue(column.id, void 0);
+					event.preventDefault();
+				},
+				startIcon: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(FilterList, { css: { color: color(isActive(column.id)) } }),
+				css: {
+					justifyContent: "flex-start",
+					color: isActive(column.id) ? "var(--primaryMain)" : "inherit"
+				},
+				children: column.header
+			}, column.id))]
+		})
+	})] });
+}
+//#endregion
 //#region src/components/sortComponent.tsx
 function SortComponent({ children }) {
 	const { sort, activeColumns, props, actions } = useTableStructure();
@@ -1662,7 +1726,7 @@ function SortComponent({ children }) {
 //#region src/components/columnHeader.tsx
 function ColumnHeader() {
 	const columnId = useColumnContext();
-	const { activeColumns } = useTableStructure();
+	const { props, activeColumns, visibleColumns } = useTableStructure();
 	const column = activeColumns.find((column) => column.id === columnId);
 	const { classes, styles } = require_useTheme.useTheme((theme) => require_useTheme.columnTheme(theme, column));
 	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("div", {
@@ -1680,6 +1744,7 @@ function ColumnHeader() {
 			/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(SortComponent, { children: column?.header }),
 			/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", { css: { flex: 1 } }),
 			/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(FilterControl, {}),
+			props.enableHiddenColumnFilters && visibleColumns[visibleColumns.length - 1]?.id === columnId && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(HiddenColumnFilters, {}),
 			/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(ResizeHandle, {})
 		]
 	});
@@ -1854,70 +1919,6 @@ function Export() {
 	})] });
 }
 //#endregion
-//#region src/components/hiddenColumnFilters.tsx
-/** Lets users edit the filters of columns that are not visible, see `enableHiddenColumnFilters`. */
-function HiddenColumnFilters() {
-	const { props, visibleColumns, filterValues, actions } = useTableStructure();
-	const IconButton = require_useTheme.useTheme((t) => t.components.IconButton);
-	const Button = require_useTheme.useTheme((t) => t.components.Button);
-	const FilterList = require_useTheme.useTheme((t) => t.icons.FilterList);
-	const title = require_useTheme.useTheme((t) => t.text.hiddenColumnFilters);
-	const [anchor, setAnchor] = (0, react.useState)(null);
-	const [selected, setSelected] = (0, react.useState)();
-	const columns = props.columns.filter((column) => column.filter && !visibleColumns.some((visible) => visible.id === column.id));
-	if (columns.length === 0) return null;
-	const isActive = (columnId) => isActiveFilter(columns.find((column) => column.id === columnId)?.filter, filterValues.get(columnId));
-	const anyActive = columns.some((column) => isActive(column.id));
-	const selectedColumn = columns.find((column) => column.id === selected);
-	function close() {
-		setAnchor(null);
-		setSelected(void 0);
-	}
-	const color = (active) => active ? "var(--primaryMain)" : "#b0bac9";
-	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(_emotion_react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(IconButton, {
-		onClick: (event) => setAnchor(event.currentTarget),
-		css: { color: color(anyActive) },
-		children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(FilterList, {})
-	}), anchor && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(FilterPopover, {
-		anchor,
-		onClose: close,
-		column: selectedColumn,
-		children: selectedColumn ? /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("div", {
-			css: { display: "grid" },
-			children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(Button, {
-				onClick: () => setSelected(void 0),
-				css: {
-					justifyContent: "flex-start",
-					color: "inherit"
-				},
-				children: ["‹ ", selectedColumn.header]
-			}), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(FilterPanel, {
-				column: selectedColumn,
-				close
-			}, selectedColumn.id)]
-		}) : /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("div", {
-			css: {
-				padding: "calc(var(--spacing) * 2)",
-				display: "grid",
-				gap: "var(--spacing)"
-			},
-			children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", { children: title }), columns.map((column) => /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(Button, {
-				onClick: () => setSelected(column.id),
-				onContextMenu: (event) => {
-					actions.setFilterValue(column.id, void 0);
-					event.preventDefault();
-				},
-				startIcon: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(FilterList, { css: { color: color(isActive(column.id)) } }),
-				css: {
-					justifyContent: "flex-start",
-					color: isActive(column.id) ? "var(--primaryMain)" : "inherit"
-				},
-				children: column.header
-			}, column.id))]
-		})
-	})] });
-}
-//#endregion
 //#region src/components/tableHeader.tsx
 const TableHeader = (0, react.memo)(function TableHeader() {
 	const { props, visibleColumns } = useTableStructure();
@@ -1947,8 +1948,8 @@ const TableHeader = (0, react.memo)(function TableHeader() {
 					enableSelection && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(SelectAll, {}),
 					enableColumnSelection && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(ColumnSelection, {}),
 					enableExport && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(Export, {}),
-					enableHiddenColumnFilters && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(HiddenColumnFilters, {}),
-					(enableSelection || enableColumnSelection || enableExport || enableHiddenColumnFilters) && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(_emotion_react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", { css: { flex: 1 } }), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(ResizeHandleView, {})] })
+					enableHiddenColumnFilters && visibleColumns.length === 0 && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(HiddenColumnFilters, {}),
+					(enableSelection || enableColumnSelection || enableExport || enableHiddenColumnFilters && visibleColumns.length === 0) && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(_emotion_react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", { css: { flex: 1 } }), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(ResizeHandleView, {})] })
 				]
 			}),
 			visibleColumns.map((column) => /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(ColumnContext.Provider, {