@igne-agency/react-web-ui 0.3.1 → 0.4.0

package/dist/data-table/data-table-selection.d.ts

@@ -7,6 +7,10 @@ export type SelectionColumnOptions = Readonly<{
     selectPageLabel: string;
     /** Each row checkbox's name, such as "Select row". */
     selectRowLabel: string;
+    /** The mark a checked box shows, such as a tick. */
+    checkIcon: ReactNode;
+    /** The mark the page checkbox shows while only some rows on the page are selected, such as a dash. */
+    indeterminateIcon: ReactNode;
 }>;
 /**
  * The selection column: a page checkbox in the header, three-state over the
@@ -15,13 +19,13 @@ export type SelectionColumnOptions = Readonly<{
  *
  * @example
  * const columns = [
- * 	selectionColumn<Declaration>({ sticky: "start", selectPageLabel: "Select page", selectRowLabel: "Select row" }),
+ * 	selectionColumn<Invoice>({ sticky: "start", selectPageLabel: "Select page", selectRowLabel: "Select row", checkIcon: <CheckIcon />, indeterminateIcon: <RemoveIcon /> }),
  * 	...dataColumns,
  * ];
  */
-export declare const selectionColumn: <TRow extends Record<string, unknown>>({ sticky, selectPageLabel, selectRowLabel, }: SelectionColumnOptions) => ColumnDef<DataTableFeatures, TRow>;
+export declare const selectionColumn: <TRow extends Record<string, unknown>>({ sticky, selectPageLabel, selectRowLabel, checkIcon, indeterminateIcon, }: SelectionColumnOptions) => ColumnDef<DataTableFeatures, TRow>;
 export type DataTableSelectionBarProps = Readonly<{
-    /** What the bar says while nothing is selected, such as "30 declarations". */
+    /** What the bar says while nothing is selected, such as "30 invoices". */
     total?: ReactNode;
     totalRows: number;
     /** How many of the matching rows are selected, such as "3 of 30 selected". */

package/dist/data-table/data-table-selection.js

@@ -4,9 +4,9 @@ import { usePresence } from "../lib/hooks/use-presence.js";
 import { useDataTable } from "./data-table-context.js";
 import data_table_module_default from "./data-table.module.js";
 import { c } from "react/compiler-runtime";
-import { useRef } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
 // src/data-table/data-table-selection.tsx
 var useSelection = () => {
 	const { selection } = useDataTable();
@@ -14,8 +14,8 @@ var useSelection = () => {
 	return selection;
 };
 var PageCheckbox = (t0) => {
-	const $ = c(15);
-	const { label } = t0;
+	const $ = c(18);
+	const { label, checkIcon, indeterminateIcon } = t0;
 	const { table } = useDataTable();
 	const selection = useSelection();
 	let pageIds;
@@ -39,36 +39,45 @@ var PageCheckbox = (t0) => {
 	}
 	const selectedOnPage = t1;
 	const allOnPage = pageIds.length > 0 && selectedOnPage.length === pageIds.length;
-	const t2 = selectedOnPage.length > 0 && !allOnPage;
-	let t3;
+	const indeterminate = selectedOnPage.length > 0 && !allOnPage;
+	let t2;
 	if ($[6] !== pageIds || $[7] !== selection || $[8] !== table) {
-		t3 = (checked) => {
+		t2 = (checked) => {
 			for (const id_0 of pageIds) selection.toggleRow(id_0, checked, table.getRowCount());
 		};
 		$[6] = pageIds;
 		$[7] = selection;
 		$[8] = table;
-		$[9] = t3;
-	} else t3 = $[9];
+		$[9] = t2;
+	} else t2 = $[9];
+	const t3 = indeterminate ? indeterminateIcon : checkIcon;
 	let t4;
-	if ($[10] !== allOnPage || $[11] !== label || $[12] !== t2 || $[13] !== t3) {
-		t4 = /* @__PURE__ */ jsx(Checkbox, {
+	if ($[10] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Checkbox.Indicator, { children: t3 });
+		$[10] = t3;
+		$[11] = t4;
+	} else t4 = $[11];
+	let t5;
+	if ($[12] !== allOnPage || $[13] !== indeterminate || $[14] !== label || $[15] !== t2 || $[16] !== t4) {
+		t5 = /* @__PURE__ */ jsx(Checkbox.Control, {
 			"aria-label": label,
 			checked: allOnPage,
-			indeterminate: t2,
-			onCheckedChange: t3
+			indeterminate,
+			onCheckedChange: t2,
+			children: t4
 		});
-		$[10] = allOnPage;
-		$[11] = label;
-		$[12] = t2;
-		$[13] = t3;
-		$[14] = t4;
-	} else t4 = $[14];
-	return t4;
+		$[12] = allOnPage;
+		$[13] = indeterminate;
+		$[14] = label;
+		$[15] = t2;
+		$[16] = t4;
+		$[17] = t5;
+	} else t5 = $[17];
+	return t5;
 };
 var RowCheckbox = (t0) => {
-	const $ = c(11);
-	const { rowId, label } = t0;
+	const $ = c(14);
+	const { rowId, label, checkIcon } = t0;
 	const { table } = useDataTable();
 	const selection = useSelection();
 	let t1;
@@ -89,18 +98,26 @@ var RowCheckbox = (t0) => {
 		$[6] = t2;
 	} else t2 = $[6];
 	let t3;
-	if ($[7] !== label || $[8] !== t1 || $[9] !== t2) {
-		t3 = /* @__PURE__ */ jsx(Checkbox, {
+	if ($[7] !== checkIcon) {
+		t3 = /* @__PURE__ */ jsx(Checkbox.Indicator, { children: checkIcon });
+		$[7] = checkIcon;
+		$[8] = t3;
+	} else t3 = $[8];
+	let t4;
+	if ($[9] !== label || $[10] !== t1 || $[11] !== t2 || $[12] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Checkbox.Control, {
 			"aria-label": label,
 			checked: t1,
-			onCheckedChange: t2
+			onCheckedChange: t2,
+			children: t3
 		});
-		$[7] = label;
-		$[8] = t1;
-		$[9] = t2;
-		$[10] = t3;
-	} else t3 = $[10];
-	return t3;
+		$[9] = label;
+		$[10] = t1;
+		$[11] = t2;
+		$[12] = t3;
+		$[13] = t4;
+	} else t4 = $[13];
+	return t4;
 };
 /**
 * The selection column: a page checkbox in the header, three-state over the
@@ -109,21 +126,29 @@ var RowCheckbox = (t0) => {
 *
 * @example
 * const columns = [
-* 	selectionColumn<Declaration>({ sticky: "start", selectPageLabel: "Select page", selectRowLabel: "Select row" }),
+* 	selectionColumn<Invoice>({ sticky: "start", selectPageLabel: "Select page", selectRowLabel: "Select row", checkIcon: <CheckIcon />, indeterminateIcon: <RemoveIcon /> }),
 * 	...dataColumns,
 * ];
 */
-var selectionColumn = ({ sticky, selectPageLabel, selectRowLabel }) => ({
+var selectionColumn = ({ sticky, selectPageLabel, selectRowLabel, checkIcon, indeterminateIcon }) => ({
 	id: "select",
 	meta: {
 		fit: true,
 		sticky,
-		placeholderCell: () => /* @__PURE__ */ jsx(Checkbox, { "aria-label": selectRowLabel })
+		placeholderCell: () => /* @__PURE__ */ jsx(Checkbox.Control, {
+			"aria-label": selectRowLabel,
+			children: /* @__PURE__ */ jsx(Checkbox.Indicator, { children: checkIcon })
+		})
 	},
-	header: () => /* @__PURE__ */ jsx(PageCheckbox, { label: selectPageLabel }),
+	header: () => /* @__PURE__ */ jsx(PageCheckbox, {
+		label: selectPageLabel,
+		checkIcon,
+		indeterminateIcon
+	}),
 	cell: ({ row }) => /* @__PURE__ */ jsx(RowCheckbox, {
 		rowId: row.id,
-		label: selectRowLabel
+		label: selectRowLabel,
+		checkIcon
 	})
 });
 /**
@@ -160,7 +185,7 @@ var DataTableSelectionBar = (t0) => {
 		$[2] = total;
 		$[3] = t5;
 	} else t5 = $[3];
-	const t6 = totalRows > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+	const t6 = totalRows > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
 		className: data_table_module_default.selectionCount,
 		children: countLabel(selected, totalRows)
 	}), /* @__PURE__ */ jsx("span", {