@g4rcez/components 5.0.1 → 5.0.3

package/dist/components/table/filter.js

@@ -0,0 +1,239 @@
+import { t as e } from "../../input-Cmyuea4Y.js";
+import { t } from "../../Funnel.es-DjKVl8Nj.js";
+import { t as n } from "../../Plus.es-DbyRkEE2.js";
+import { t as r } from "../../Trash.es-BFAc8PMf.js";
+import { t as i } from "../../use-translations-BE4PuhLm.js";
+import { c as a } from "../../fns-KbsWlOTG.js";
+import { Select as o } from "../form/select.js";
+import { Dropdown as s } from "../floating/dropdown.js";
+import { c, i as l, t as u } from "../../table-lib-1bkYSklk.js";
+import { Fragment as d, useMemo as f } from "react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+//#region src/components/table/filter.tsx
+var h = (e, t) => t(typeof e.label == "string" ? e.label : e.name), g = (e, t, n, r = {}) => {
+	let i = e.id, o = e.type ?? u.Text, s = t[o] ?? [], c = n[s.find((e) => e["data-default"])?.value ?? s[0]?.value];
+	return {
+		id: a(),
+		operation: c,
+		label: l(e),
+		name: i,
+		type: o,
+		value: "",
+		...r
+	};
+}, _ = () => {
+	let e = i(), t = f(() => ({
+		contains: {
+			value: "contains",
+			label: e.tableFilterTypeContains,
+			symbol: "includes",
+			"data-default": "true"
+		},
+		is: {
+			value: "is",
+			label: e.tableFilterTypeIs,
+			symbol: "is"
+		},
+		isNot: {
+			value: "isNot",
+			label: e.tableFilterTypeIsNot,
+			symbol: "!=="
+		},
+		notContains: {
+			value: "notContains",
+			label: e.tableFilterTypeNotContains,
+			symbol: "notIncludes"
+		},
+		lessThan: {
+			value: "lessThan",
+			label: e.tableFilterTypeLessThan,
+			symbol: "<="
+		},
+		greaterThan: {
+			value: "greaterThan",
+			label: e.tableFilterTypeGreaterThan,
+			symbol: ">="
+		},
+		startsWith: {
+			value: "startsWith",
+			label: e.tableFilterTypeStartsWith,
+			symbol: "startsWith"
+		},
+		endsWith: {
+			value: "endsWith",
+			label: e.tableFilterTypeEndsWith,
+			symbol: "endsWith"
+		}
+	}), [e]);
+	return {
+		options: f(() => ({
+			[u.Text]: [
+				t.is,
+				t.isNot,
+				t.contains,
+				t.notContains,
+				t.startsWith,
+				t.endsWith
+			],
+			[u.Boolean]: [t.is, t.isNot],
+			[u.Number]: [
+				t.is,
+				t.isNot,
+				t.greaterThan,
+				t.lessThan
+			]
+		}), [t]),
+		operations: t
+	};
+}, v = (a) => {
+	let l = i(), u = _(), f = () => {
+		let e = a.cols.at(0);
+		a.set((t) => [...t, g(e, u.options, u.operations)]);
+	}, v = (e) => {
+		let t = e.target.dataset.id || "", n = e.target.value;
+		a.set((e) => e.map((e) => t === e.id ? g(a.cols.find((e) => n === e.id), u.options, u.operations, { value: "" }) : e));
+	}, y = (e) => {
+		let t = e.target.dataset.id || "", n = e.target.value;
+		a.set((e) => e.map((e) => e.id === t ? {
+			...e,
+			operation: u.operations[n]
+		} : e));
+	}, b = (e) => {
+		let t = e.currentTarget.dataset.id || "";
+		a.set((e) => e.filter((e) => e.id !== t));
+	}, x = (e) => {
+		let t = e.target.dataset.id || "", n = c(e.target);
+		a.set((e) => e.map((e) => e.id === t ? {
+			...e,
+			value: n
+		} : e));
+	};
+	return /* @__PURE__ */ p(d, { children: /* @__PURE__ */ p(s, {
+		arrow: !0,
+		title: l.tableFilterDropdownTitle,
+		trigger: /* @__PURE__ */ m("span", {
+			className: "flex items-center gap-table-inline-gap-tight proportional-nums",
+			children: [
+				/* @__PURE__ */ p(t, { size: 14 }),
+				l.tableFilterLabel,
+				" ",
+				a.filters.length === 0 ? "" : ` (${a.filters.length})`
+			]
+		}),
+		children: /* @__PURE__ */ m("ul", {
+			className: "mt-table-filter-list-mt space-y-2",
+			children: [a.filters.map((t) => {
+				let n = u.options[t.type];
+				return /* @__PURE__ */ m("li", {
+					className: "flex flex-nowrap gap-table-filter-row-gap",
+					children: [
+						/* @__PURE__ */ p(o, {
+							options: a.options,
+							title: l.tableFilterColumnTitle,
+							placeholder: l.tableFilterColumnPlaceholder,
+							value: t.name,
+							"data-id": t.id,
+							onChange: v
+						}),
+						/* @__PURE__ */ p(o, {
+							"data-id": t.id,
+							onChange: y,
+							value: t.operation.value,
+							options: n,
+							title: l.tableFilterOperatorTitle,
+							placeholder: l.tableFilterOperatorPlaceholder
+						}),
+						/* @__PURE__ */ p(e, {
+							optionalText: "",
+							"data-id": t.id,
+							onChange: x,
+							value: t.value,
+							type: t.type,
+							title: l.tableFilterValueTitle,
+							placeholder: l.tableFilterValuePlaceholder
+						}),
+						/* @__PURE__ */ p("div", {
+							className: "mt-5 flex items-center justify-center",
+							children: /* @__PURE__ */ p("button", {
+								"data-id": t.id,
+								type: "button",
+								onClick: b,
+								"aria-label": h(t, l.tableFilterDeleteLabel),
+								children: /* @__PURE__ */ p("span", {
+									className: "text-danger",
+									children: /* @__PURE__ */ p(r, {
+										"aria-hidden": "true",
+										size: 16
+									})
+								})
+							})
+						})
+					]
+				}, `filter-select-${t.id}`);
+			}), /* @__PURE__ */ p("li", { children: /* @__PURE__ */ m("button", {
+				type: "button",
+				onClick: f,
+				className: "flex items-center gap-table-inline-gap-tight text-primary",
+				children: [
+					/* @__PURE__ */ p(n, { size: 14 }),
+					" ",
+					l.tableFilterNewFilter
+				]
+			}) })]
+		})
+	}) });
+}, y = ({ filter: t, onDelete: n, set: a }) => {
+	let s = i(), l = _();
+	return /* @__PURE__ */ m("div", {
+		className: "flex flex-nowrap items-center gap-table-filter-inline-gap py-table-filter-inline-py",
+		children: [
+			/* @__PURE__ */ p(o, {
+				"data-id": t.id,
+				onChange: (e) => {
+					let t = e.target.value, n = e.target.dataset.id || "";
+					a((e) => e.map((e) => e.id === n ? {
+						...e,
+						operation: l.operations[t]
+					} : e));
+				},
+				value: t.operation.value,
+				options: l.options[t.type],
+				title: s.tableFilterColumnTitle,
+				placeholder: s.tableFilterColumnPlaceholder
+			}),
+			/* @__PURE__ */ p(e, {
+				optionalText: " ",
+				"data-id": t.id,
+				onChange: (e) => {
+					let t = e.target.dataset.id || "", n = c(e.target);
+					a((e) => e.map((e) => e.id === t ? {
+						...e,
+						value: n
+					} : e));
+				},
+				value: t.value,
+				type: t.type,
+				title: s.tableFilterValueTitle,
+				placeholder: s.tableFilterValueTitle
+			}),
+			/* @__PURE__ */ p("button", {
+				onClick: n,
+				"data-id": t.id,
+				type: "button",
+				className: "mt-4",
+				"aria-label": h(t, s.tableFilterDeleteLabel),
+				children: /* @__PURE__ */ p("span", {
+					className: "text-danger",
+					children: /* @__PURE__ */ p(r, {
+						"aria-hidden": "true",
+						size: 14
+					})
+				})
+			})
+		]
+	});
+};
+//#endregion
+export { y as ColumnHeaderFilter, v as Filter, g as createFilterFromCol, _ as useOperators };
+
+//# sourceMappingURL=filter.js.map

package/dist/components/table/filter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter.js","names":[],"sources":["../../../src/components/table/filter.tsx"],"sourcesContent":["import { Symbols } from \"linq-arrays\";\nimport { FunnelIcon, PlusIcon, TrashIcon } from \"@phosphor-icons/react\";\nimport React, { Fragment, useMemo } from \"react\";\nimport { AllPaths } from \"sidekicker\";\nimport { useTranslations } from \"../../hooks/use-translations\";\nimport { uuid } from \"../../lib/fns\";\nimport { Any, Label } from \"../../types\";\nimport { Dropdown } from \"../floating/dropdown\";\nimport { Input, InputTypes } from \"../form/input\";\nimport { OptionProps, Select } from \"../form/select\";\nimport { Col, ColType, getLabel, TableConfiguration, valueFromType } from \"./table-lib\";\n\ntype Operators = {\n    value: string;\n    label: string;\n    symbol: string;\n    \"data-default\"?: string;\n};\n\ntype OperatorTypes = \"contains\" | \"is\" | \"isNot\" | \"notContains\" | \"lessThan\" | \"greaterThan\" | \"startsWith\" | \"endsWith\";\n\ntype Operations = Record<OperatorTypes, Operators>;\n\ntype OperationOptions = Partial<Record<ColType, OptionProps[]>>;\n\ntype FilterValue = string | number | string[] | boolean;\n\nconst getFilterDeleteLabel = <T extends object>(filter: Pick<FilterConfig<T>, \"label\" | \"name\">, translate: (label: string) => string) =>\n    translate(typeof filter.label === \"string\" ? filter.label : filter.name);\n\nexport type FilterConfig<T extends object = object> = {\n    id: string;\n    label: Label;\n    name: AllPaths<T>;\n    type: ColType;\n    operation: Operators;\n    value: FilterValue;\n};\n\ntype Props<T extends object> = TableConfiguration<\n    T,\n    {\n        cols: Col<T>[];\n        filters: FilterConfig<T>[];\n        set: React.Dispatch<React.SetStateAction<FilterConfig<T>[]>>;\n    }\n>;\n\nexport const createFilterFromCol = <T extends Any>(\n    f: Col<T>,\n    options: OperationOptions,\n    operations: Operations,\n    rest: Partial<FilterConfig<T>> = {}\n): FilterConfig<T> => {\n    const name = f.id;\n    const type = f.type ?? ColType.Text;\n    const typeOptions = options[type] ?? [];\n    const operatorId = (typeOptions.find((x) => x[\"data-default\"])?.value ?? typeOptions[0]?.value) as OperatorTypes;\n    const operation = operations[operatorId];\n    return {\n        id: uuid(),\n        operation,\n        label: getLabel(f),\n        name,\n        type,\n        value: \"\",\n        ...rest,\n    };\n};\n\nexport const useOperators = () => {\n    const translation = useTranslations();\n    const operations = useMemo(\n        (): Operations =>\n            ({\n                contains: {\n                    value: \"contains\",\n                    label: translation.tableFilterTypeContains,\n                    symbol: \"includes\",\n                    \"data-default\": \"true\",\n                },\n                is: { value: \"is\", label: translation.tableFilterTypeIs, symbol: \"is\" },\n                isNot: {\n                    value: \"isNot\",\n                    label: translation.tableFilterTypeIsNot,\n                    symbol: \"!==\",\n                },\n                notContains: {\n                    value: \"notContains\",\n                    label: translation.tableFilterTypeNotContains,\n                    symbol: \"notIncludes\",\n                },\n                lessThan: {\n                    value: \"lessThan\",\n                    label: translation.tableFilterTypeLessThan,\n                    symbol: \"<=\",\n                },\n                greaterThan: {\n                    value: \"greaterThan\",\n                    label: translation.tableFilterTypeGreaterThan,\n                    symbol: \">=\",\n                },\n                startsWith: {\n                    value: \"startsWith\",\n                    label: translation.tableFilterTypeStartsWith,\n                    symbol: \"startsWith\",\n                },\n                endsWith: {\n                    value: \"endsWith\",\n                    label: translation.tableFilterTypeEndsWith,\n                    symbol: \"endsWith\",\n                },\n            }) satisfies Record<string, OptionProps & { symbol: Symbols }>,\n        [translation]\n    );\n\n    const options = useMemo(\n        (): OperationOptions => ({\n            [ColType.Text]: [\n                operations.is,\n                operations.isNot,\n                operations.contains,\n                operations.notContains,\n                operations.startsWith,\n                operations.endsWith,\n            ],\n            [ColType.Boolean]: [operations.is, operations.isNot],\n            [ColType.Number]: [operations.is, operations.isNot, operations.greaterThan, operations.lessThan],\n        }),\n        [operations]\n    );\n    return { options, operations };\n};\n\nexport const Filter = <T extends object>(props: Props<T>) => {\n    const translation = useTranslations();\n    const operators = useOperators();\n\n    const onAddFilter = () => {\n        const col = props.cols.at(0)!;\n        props.set((prev) => [...prev, createFilterFromCol(col, operators.options, operators.operations)]);\n    };\n\n    const onSelectProperty = (e: React.ChangeEvent<HTMLSelectElement>) => {\n        const changedId = e.target.dataset.id || \"\";\n        const newId = e.target.value;\n        props.set((prev) =>\n            prev.map((x) => {\n                if (changedId !== x.id) return x;\n                const col = props.cols.find((x) => newId === x.id)!;\n                return createFilterFromCol(col, operators.options, operators.operations, { value: \"\" });\n            })\n        );\n    };\n\n    const onSelectOperation = (e: React.ChangeEvent<HTMLSelectElement>) => {\n        const id = e.target.dataset.id || \"\";\n        const operator = e.target.value;\n        props.set((prev) =>\n            prev.map((x) =>\n                x.id === id\n                    ? {\n                          ...x,\n                          operation: operators.operations[operator as OperatorTypes],\n                      }\n                    : x\n            )\n        );\n    };\n\n    const onDelete = (e: React.MouseEvent<HTMLButtonElement>) => {\n        const id = e.currentTarget.dataset.id || \"\";\n        props.set((prev) => prev.filter((x) => x.id !== id));\n    };\n\n    const onChangeValue = (e: React.ChangeEvent<HTMLInputElement>) => {\n        const id = e.target.dataset.id || \"\";\n        const value = valueFromType(e.target);\n        props.set((prev) => prev.map((x) => (x.id === id ? { ...x, value } : x)));\n    };\n\n    return (\n        <Fragment>\n            <Dropdown\n                arrow\n                title={translation.tableFilterDropdownTitle}\n                trigger={\n                    <span className=\"flex items-center gap-table-inline-gap-tight proportional-nums\">\n                        <FunnelIcon size={14} />\n                        {translation.tableFilterLabel} {props.filters.length === 0 ? \"\" : ` (${props.filters.length})`}\n                    </span>\n                }\n            >\n                <ul className=\"mt-table-filter-list-mt space-y-2\">\n                    {props.filters.map((filter) => {\n                        const options = operators.options[filter.type]!;\n                        return (\n                            <li key={`filter-select-${filter.id}`} className=\"flex flex-nowrap gap-table-filter-row-gap\">\n                                <Select\n                                    options={props.options}\n                                    title={translation.tableFilterColumnTitle}\n                                    placeholder={translation.tableFilterColumnPlaceholder}\n                                    value={filter.name as string}\n                                    data-id={filter.id}\n                                    onChange={onSelectProperty}\n                                />\n                                <Select\n                                    data-id={filter.id}\n                                    onChange={onSelectOperation}\n                                    value={filter.operation.value}\n                                    options={options}\n                                    title={translation.tableFilterOperatorTitle}\n                                    placeholder={translation.tableFilterOperatorPlaceholder}\n                                />\n                                <Input\n                                    optionalText=\"\"\n                                    data-id={filter.id}\n                                    onChange={onChangeValue}\n                                    value={filter.value as string}\n                                    type={filter.type as InputTypes}\n                                    title={translation.tableFilterValueTitle}\n                                    placeholder={translation.tableFilterValuePlaceholder}\n                                />\n                                <div className=\"mt-5 flex items-center justify-center\">\n                                    <button\n                                        data-id={filter.id}\n                                        type=\"button\"\n                                        onClick={onDelete}\n                                        aria-label={getFilterDeleteLabel(filter, translation.tableFilterDeleteLabel)}\n                                    >\n                                        <span className=\"text-danger\">\n                                            <TrashIcon aria-hidden=\"true\" size={16} />\n                                        </span>\n                                    </button>\n                                </div>\n                            </li>\n                        );\n                    })}\n                    <li>\n                        <button type=\"button\" onClick={onAddFilter} className=\"flex items-center gap-table-inline-gap-tight text-primary\">\n                            <PlusIcon size={14} /> {translation.tableFilterNewFilter}\n                        </button>\n                    </li>\n                </ul>\n            </Dropdown>\n        </Fragment>\n    );\n};\n\ntype ColumnHeaderFilterProps<T extends object> = {\n    filter: FilterConfig<T>;\n    onDelete: (e: React.MouseEvent<HTMLButtonElement>) => void;\n    set: React.Dispatch<React.SetStateAction<FilterConfig<T>[]>>;\n};\n\nexport const ColumnHeaderFilter = <T extends object>({ filter, onDelete, set }: ColumnHeaderFilterProps<T>) => {\n    const translation = useTranslations();\n    const operators = useOperators();\n\n    const onSelectOperation = (e: React.ChangeEvent<HTMLSelectElement>) => {\n        const operator = e.target.value;\n        const id = e.target.dataset.id || \"\";\n        set((prev) =>\n            prev.map((x) =>\n                x.id === id\n                    ? {\n                          ...x,\n                          operation: operators.operations[operator as OperatorTypes],\n                      }\n                    : x\n            )\n        );\n    };\n\n    const onChangeValue = (e: React.ChangeEvent<HTMLInputElement>) => {\n        const id = e.target.dataset.id || \"\";\n        const value = valueFromType(e.target);\n        set((prev) => prev.map((x) => (x.id === id ? { ...x, value } : x)));\n    };\n\n    return (\n        <div className=\"flex flex-nowrap items-center gap-table-filter-inline-gap py-table-filter-inline-py\">\n            <Select\n                data-id={filter.id}\n                onChange={onSelectOperation}\n                value={filter.operation.value}\n                options={operators.options[filter.type]!}\n                title={translation.tableFilterColumnTitle}\n                placeholder={translation.tableFilterColumnPlaceholder}\n            />\n            <Input\n                optionalText=\" \"\n                data-id={filter.id}\n                onChange={onChangeValue}\n                value={filter.value as string}\n                type={filter.type as InputTypes}\n                title={translation.tableFilterValueTitle}\n                placeholder={translation.tableFilterValueTitle}\n            />\n            <button\n                onClick={onDelete}\n                data-id={filter.id}\n                type=\"button\"\n                className=\"mt-4\"\n                aria-label={getFilterDeleteLabel(filter, translation.tableFilterDeleteLabel)}\n            >\n                <span className=\"text-danger\">\n                    <TrashIcon aria-hidden=\"true\" size={14} />\n                </span>\n            </button>\n        </div>\n    );\n};\n"],"mappings":"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"}

package/dist/components/table/filter.jsx

@@ -0,0 +1,174 @@
+import { FunnelIcon, PlusIcon, TrashIcon } from "@phosphor-icons/react";
+import React, { Fragment, useMemo } from "react";
+import { useTranslations } from "../../hooks/use-translations";
+import { uuid } from "../../lib/fns";
+import { Dropdown } from "../floating/dropdown";
+import { Input } from "../form/input";
+import { Select } from "../form/select";
+import { ColType, getLabel, valueFromType } from "./table-lib";
+const getFilterDeleteLabel = (filter, translate) => translate(typeof filter.label === "string" ? filter.label : filter.name);
+export const createFilterFromCol = (f, options, operations, rest = {}) => {
+    const name = f.id;
+    const type = f.type ?? ColType.Text;
+    const typeOptions = options[type] ?? [];
+    const operatorId = (typeOptions.find((x) => x["data-default"])?.value ?? typeOptions[0]?.value);
+    const operation = operations[operatorId];
+    return {
+        id: uuid(),
+        operation,
+        label: getLabel(f),
+        name,
+        type,
+        value: "",
+        ...rest,
+    };
+};
+export const useOperators = () => {
+    const translation = useTranslations();
+    const operations = useMemo(() => ({
+        contains: {
+            value: "contains",
+            label: translation.tableFilterTypeContains,
+            symbol: "includes",
+            "data-default": "true",
+        },
+        is: { value: "is", label: translation.tableFilterTypeIs, symbol: "is" },
+        isNot: {
+            value: "isNot",
+            label: translation.tableFilterTypeIsNot,
+            symbol: "!==",
+        },
+        notContains: {
+            value: "notContains",
+            label: translation.tableFilterTypeNotContains,
+            symbol: "notIncludes",
+        },
+        lessThan: {
+            value: "lessThan",
+            label: translation.tableFilterTypeLessThan,
+            symbol: "<=",
+        },
+        greaterThan: {
+            value: "greaterThan",
+            label: translation.tableFilterTypeGreaterThan,
+            symbol: ">=",
+        },
+        startsWith: {
+            value: "startsWith",
+            label: translation.tableFilterTypeStartsWith,
+            symbol: "startsWith",
+        },
+        endsWith: {
+            value: "endsWith",
+            label: translation.tableFilterTypeEndsWith,
+            symbol: "endsWith",
+        },
+    }), [translation]);
+    const options = useMemo(() => ({
+        [ColType.Text]: [
+            operations.is,
+            operations.isNot,
+            operations.contains,
+            operations.notContains,
+            operations.startsWith,
+            operations.endsWith,
+        ],
+        [ColType.Boolean]: [operations.is, operations.isNot],
+        [ColType.Number]: [operations.is, operations.isNot, operations.greaterThan, operations.lessThan],
+    }), [operations]);
+    return { options, operations };
+};
+export const Filter = (props) => {
+    const translation = useTranslations();
+    const operators = useOperators();
+    const onAddFilter = () => {
+        const col = props.cols.at(0);
+        props.set((prev) => [...prev, createFilterFromCol(col, operators.options, operators.operations)]);
+    };
+    const onSelectProperty = (e) => {
+        const changedId = e.target.dataset.id || "";
+        const newId = e.target.value;
+        props.set((prev) => prev.map((x) => {
+            if (changedId !== x.id)
+                return x;
+            const col = props.cols.find((x) => newId === x.id);
+            return createFilterFromCol(col, operators.options, operators.operations, { value: "" });
+        }));
+    };
+    const onSelectOperation = (e) => {
+        const id = e.target.dataset.id || "";
+        const operator = e.target.value;
+        props.set((prev) => prev.map((x) => x.id === id
+            ? {
+                ...x,
+                operation: operators.operations[operator],
+            }
+            : x));
+    };
+    const onDelete = (e) => {
+        const id = e.currentTarget.dataset.id || "";
+        props.set((prev) => prev.filter((x) => x.id !== id));
+    };
+    const onChangeValue = (e) => {
+        const id = e.target.dataset.id || "";
+        const value = valueFromType(e.target);
+        props.set((prev) => prev.map((x) => (x.id === id ? { ...x, value } : x)));
+    };
+    return (<Fragment>
+            <Dropdown arrow title={translation.tableFilterDropdownTitle} trigger={<span className="flex items-center gap-table-inline-gap-tight proportional-nums">
+                        <FunnelIcon size={14}/>
+                        {translation.tableFilterLabel} {props.filters.length === 0 ? "" : ` (${props.filters.length})`}
+                    </span>}>
+                <ul className="mt-table-filter-list-mt space-y-2">
+                    {props.filters.map((filter) => {
+            const options = operators.options[filter.type];
+            return (<li key={`filter-select-${filter.id}`} className="flex flex-nowrap gap-table-filter-row-gap">
+                                <Select options={props.options} title={translation.tableFilterColumnTitle} placeholder={translation.tableFilterColumnPlaceholder} value={filter.name} data-id={filter.id} onChange={onSelectProperty}/>
+                                <Select data-id={filter.id} onChange={onSelectOperation} value={filter.operation.value} options={options} title={translation.tableFilterOperatorTitle} placeholder={translation.tableFilterOperatorPlaceholder}/>
+                                <Input optionalText="" data-id={filter.id} onChange={onChangeValue} value={filter.value} type={filter.type} title={translation.tableFilterValueTitle} placeholder={translation.tableFilterValuePlaceholder}/>
+                                <div className="mt-5 flex items-center justify-center">
+                                    <button data-id={filter.id} type="button" onClick={onDelete} aria-label={getFilterDeleteLabel(filter, translation.tableFilterDeleteLabel)}>
+                                        <span className="text-danger">
+                                            <TrashIcon aria-hidden="true" size={16}/>
+                                        </span>
+                                    </button>
+                                </div>
+                            </li>);
+        })}
+                    <li>
+                        <button type="button" onClick={onAddFilter} className="flex items-center gap-table-inline-gap-tight text-primary">
+                            <PlusIcon size={14}/> {translation.tableFilterNewFilter}
+                        </button>
+                    </li>
+                </ul>
+            </Dropdown>
+        </Fragment>);
+};
+export const ColumnHeaderFilter = ({ filter, onDelete, set }) => {
+    const translation = useTranslations();
+    const operators = useOperators();
+    const onSelectOperation = (e) => {
+        const operator = e.target.value;
+        const id = e.target.dataset.id || "";
+        set((prev) => prev.map((x) => x.id === id
+            ? {
+                ...x,
+                operation: operators.operations[operator],
+            }
+            : x));
+    };
+    const onChangeValue = (e) => {
+        const id = e.target.dataset.id || "";
+        const value = valueFromType(e.target);
+        set((prev) => prev.map((x) => (x.id === id ? { ...x, value } : x)));
+    };
+    return (<div className="flex flex-nowrap items-center gap-table-filter-inline-gap py-table-filter-inline-py">
+            <Select data-id={filter.id} onChange={onSelectOperation} value={filter.operation.value} options={operators.options[filter.type]} title={translation.tableFilterColumnTitle} placeholder={translation.tableFilterColumnPlaceholder}/>
+            <Input optionalText=" " data-id={filter.id} onChange={onChangeValue} value={filter.value} type={filter.type} title={translation.tableFilterValueTitle} placeholder={translation.tableFilterValueTitle}/>
+            <button onClick={onDelete} data-id={filter.id} type="button" className="mt-4" aria-label={getFilterDeleteLabel(filter, translation.tableFilterDeleteLabel)}>
+                <span className="text-danger">
+                    <TrashIcon aria-hidden="true" size={14}/>
+                </span>
+            </button>
+        </div>);
+};

package/dist/components/table/group.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import { Col, TableConfiguration } from "./table-lib";
+export type GroupItem<T extends object> = Col<T> & {
+    rows: T[];
+    index: number;
+    groupId: string;
+    groupName: string;
+    groupKey: keyof T;
+};
+type Props<T extends object> = TableConfiguration<T, {
+    rows: T[];
+    groups: GroupItem<T>[];
+    setGroups: React.Dispatch<React.SetStateAction<GroupItem<T>[]>>;
+}>;
+export declare const Group: <T extends object>(props: Props<T>) => React.JSX.Element;
+export {};
+//# sourceMappingURL=group.d.ts.map

package/dist/components/table/group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"group.d.ts","sourceRoot":"","sources":["../../../src/components/table/group.tsx"],"names":[],"mappings":"AAIA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAOlD,OAAO,EAAE,GAAG,EAAoB,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAExE,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,MAAM,IAAI,GAAG,CAAC,CAAC,CAAC,GAAG;IAC/C,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC,CAAC;CACrB,CAAC;AAEF,KAAK,KAAK,CAAC,CAAC,SAAS,MAAM,IAAI,kBAAkB,CAC7C,CAAC,EACD;IACI,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,MAAM,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;IACvB,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;CACnE,CACJ,CAAC;AAqBF,eAAO,MAAM,KAAK,GAAI,CAAC,SAAS,MAAM,EAAE,OAAO,KAAK,CAAC,CAAC,CAAC,sBA2FtD,CAAC"}

package/dist/components/table/group.js

@@ -0,0 +1,3 @@
+"use client";
+import { t as e } from "../../group-Dl14TJXO.js";
+export { e as Group };

package/dist/components/table/group.jsx

@@ -0,0 +1,77 @@
+"use client";
+import { LayoutGroup, Reorder, useDragControls, useMotionValue } from "motion/react";
+import Linq from "linq-arrays";
+import { DotsSixVerticalIcon, TrashIcon, StackMinusIcon } from "@phosphor-icons/react";
+import React, { Fragment, useState } from "react";
+import { keys } from "sidekicker";
+import { useTranslations } from "../../hooks/use-translations";
+import { uuid } from "../../lib/fns";
+import { Button } from "../core/button";
+import { Dropdown } from "../floating/dropdown";
+import { Select } from "../form/select";
+import { createOptionCols } from "./table-lib";
+const Item = ({ item, onPointerDown }) => {
+    const y = useMotionValue(0);
+    return (<Reorder.Item onPointerDown={onPointerDown} id={item.groupId} className="flex flex-row items-center gap-2" key={item.groupId} value={item} style={{ y }}>
+            <button type="button" className="cursor-grab">
+                <DotsSixVerticalIcon size={14}/>
+            </button>
+            <span>{item.groupName}</span>
+        </Reorder.Item>);
+};
+export const Group = (props) => {
+    const translations = useTranslations();
+    const options = createOptionCols(props.cols);
+    const controls = useDragControls();
+    const [group, setGroup] = useState(props.groups[0]?.thead || "");
+    const onChange = (e) => {
+        const select = e.target;
+        const key = select.value;
+        const index = select.options.selectedIndex;
+        const label = select.options.item(index)?.label || "";
+        setGroup(label);
+        const groupBy = new Linq(props.rows).GroupBy(key);
+        const col = props.cols.find((x) => x.id === key);
+        props.setGroups(keys(groupBy).map((groupName, index) => {
+            const rows = groupBy[groupName];
+            return {
+                ...col,
+                groupId: uuid(),
+                groupKey: key,
+                index,
+                rows,
+                groupName: groupName,
+            };
+        }));
+    };
+    const onDelete = () => props.setGroups([]);
+    return (<Fragment>
+            <Dropdown arrow={false} title={translations.tableGroupLabel} trigger={<span className="flex items-center gap-table-inline-gap-tight proportional-nums">
+                        <StackMinusIcon size={14}/>
+                        {translations.tableGroupLabelWithCount}
+                        {props.groups.length > 0 ? ` - ${group}(${props.groups.length})` : ""}
+                    </span>}>
+                <div className="flex flex-nowrap items-center">
+                    <Select value={group} title={translations.tableGroupTypeTitle} onChange={onChange} options={options} placeholder={translations.tableGroupPlaceholder}/>
+                    <Button className="mt-table-groups-mt" onClick={onDelete} theme="raw" data-id={group}>
+                        <span className="text-danger">
+                            <TrashIcon size={16} aria-hidden="true"/>
+                        </span>
+                    </Button>
+                </div>
+                {props.groups.length > 0 ? (<section className="my-table-groups-my">
+                        <header>
+                            <h2 className="text-typography-xl font-medium">{translations.tableGroupOrderTitle}</h2>
+                        </header>
+                        <LayoutGroup>
+                            <Reorder.Group axis="y" className="relative space-y-2" drag dragControls={controls} dragListener={false} layoutScroll onReorder={props.setGroups} values={props.groups}>
+                                {props.groups.map((item) => (<Item key={item.groupId} item={item} onPointerDown={(e) => {
+                    controls.start(e);
+                    props.setGroups([...props.groups]);
+                }}/>))}
+                            </Reorder.Group>
+                        </LayoutGroup>
+                    </section>) : null}
+            </Dropdown>
+        </Fragment>);
+};

package/dist/components/table/index.d.ts

@@ -0,0 +1,19 @@
+import { ComponentProps } from "react";
+import { InnerTableProps } from "./inner-table";
+import { TableOperationProps } from "./table-lib";
+export type TableProps<T extends Record<string, unknown>> = Pick<InnerTableProps<T>, "cols" | "rows" | "loadingMore" | "border" | "Aside"> & {
+    name: string;
+} & Partial<TableOperationProps<T> & {
+    loading: boolean;
+    reference: keyof T;
+    operations: boolean;
+    useControl: boolean;
+    inlineFilter: boolean;
+    inlineSorter: boolean;
+    sticky: number | null;
+    onScrollEnd: () => void;
+    getScrollRef?: () => HTMLElement | undefined;
+    getRowProps: (row: T) => ComponentProps<"tr">;
+}>;
+export declare const Table: <T extends Record<string, unknown>>(props: TableProps<T>) => import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/table/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/table/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAsB,MAAM,OAAO,CAAC;AAK3D,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAG5D,OAAO,EAAuC,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAGvF,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAAI,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,aAAa,GAAG,QAAQ,GAAG,OAAO,CAAC,GAAG;IACzI,IAAI,EAAE,MAAM,CAAC;CAChB,GAAG,OAAO,CACH,mBAAmB,CAAC,CAAC,CAAC,GAAG;IACrB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,OAAO,CAAC;IACpB,YAAY,EAAE,OAAO,CAAC;IACtB,YAAY,EAAE,OAAO,CAAC;IACtB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,WAAW,GAAG,SAAS,CAAC;IAC7C,WAAW,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,cAAc,CAAC,IAAI,CAAC,CAAC;CACjD,CACJ,CAAC;AASN,eAAO,MAAM,KAAK,GAAI,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,OAAO,UAAU,CAAC,CAAC,CAAC,gCA2H5E,CAAC"}