@g4rcez/components 0.0.38 → 0.0.40

package/dist/src/components/table/filter.d.ts

@@ -0,0 +1,41 @@
+import React from "react";
+import { AllPaths } from "sidekicker";
+import { Label } from "../../types";
+import { OptionProps } from "../form/select";
+import { Col, ColType, TableConfiguration } from "./table-lib";
+type Operators = {
+    value: string;
+    label: string;
+    symbol: string;
+};
+type OperatorTypes = "contains" | "is" | "isNot" | "notContains" | "lessThan" | "greaterThan" | "startsWith" | "endsWith";
+type Operations = Record<OperatorTypes, Operators>;
+type OperationOptions = Partial<Record<ColType, OptionProps[]>>;
+type FilterValue = string | number | string[] | boolean;
+export type FilterConfig<T extends {} = {}> = {
+    id: string;
+    label: Label;
+    name: AllPaths<T>;
+    type: ColType;
+    operation: Operators;
+    value: FilterValue;
+};
+type Props<T extends {}> = TableConfiguration<T, {
+    cols: Col<T>[];
+    filters: FilterConfig<T>[];
+    set: React.Dispatch<React.SetStateAction<FilterConfig<T>[]>>;
+}>;
+export declare const createFilterFromCol: <T extends {}>(f: Col<T>, options: OperationOptions, operations: Operations, rest?: Partial<FilterConfig<T>>) => FilterConfig<T>;
+export declare const useOperators: () => {
+    operationOptions: Partial<Record<ColType, OptionProps[]>>;
+    operations: Operations;
+};
+export declare const Filter: <T extends {}>(props: Props<T>) => import("react/jsx-runtime").JSX.Element;
+type ColumnHeaderFilterProps<T extends {}> = {
+    filter: FilterConfig<T>;
+    onDelete: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    set: React.Dispatch<React.SetStateAction<FilterConfig<T>[]>>;
+};
+export declare const ColumnHeaderFilter: <T extends {}>({ filter, onDelete, set }: ColumnHeaderFilterProps<T>) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=filter.d.ts.map

package/dist/src/components/table/filter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter.d.ts","sourceRoot":"","sources":["../../../../src/components/table/filter.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAGpC,OAAO,EAAE,WAAW,EAAU,MAAM,gBAAgB,CAAC;AACrD,OAAO,EAAE,GAAG,EAAE,OAAO,EAAY,kBAAkB,EAAiB,MAAM,aAAa,CAAC;AAGxF,KAAK,SAAS,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAA;AAEjE,KAAK,aAAa,GAAG,UAAU,GAAG,IAAI,GAAG,OAAO,GAAG,aAAa,GAAG,UAAU,GAAG,aAAa,GAAG,YAAY,GAAG,UAAU,CAAA;AAEzH,KAAK,UAAU,GAAG,MAAM,CAAC,aAAa,EAAE,SAAS,CAAC,CAAA;AAElD,KAAK,gBAAgB,GAAG,OAAO,CAAC,MAAM,CAAC,OAAO,EAAE,WAAW,EAAE,CAAC,CAAC,CAAA;AAE/D,KAAK,WAAW,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,GAAG,OAAO,CAAC;AAExD,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,EAAE,GAAG,EAAE,IAAI;IAC1C,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC;IACb,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC;IAClB,IAAI,EAAE,OAAO,CAAC;IACd,SAAS,EAAE,SAAS,CAAC;IACrB,KAAK,EAAE,WAAW,CAAC;CACtB,CAAC;AAEF,KAAK,KAAK,CAAC,CAAC,SAAS,EAAE,IAAI,kBAAkB,CACzC,CAAC,EACD;IACI,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;IACf,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IAC3B,GAAG,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;CAChE,CACJ,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,CAAC,SAAS,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC,WAAW,gBAAgB,cAAc,UAAU,SAAQ,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,KAAQ,YAAY,CAAC,CAAC,CAMnK,CAAC;AAEF,eAAO,MAAM,YAAY;;;CAwBxB,CAAA;AAED,eAAO,MAAM,MAAM,GAAI,CAAC,SAAS,EAAE,SAAS,KAAK,CAAC,CAAC,CAAC,4CAiGnD,CAAC;AAEF,KAAK,uBAAuB,CAAC,CAAC,SAAS,EAAE,IAAI;IACzC,MAAM,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IACxB,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC3D,GAAG,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;CAChE,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,CAAC,SAAS,EAAE,6BAA6B,uBAAuB,CAAC,CAAC,CAAC,4CAsCrG,CAAC"}

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

@@ -0,0 +1,91 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ListFilterIcon, PlusIcon, Trash2Icon } from "lucide-react";
+import { Fragment, useMemo } from "react";
+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";
+import { useTranslations } from "../../hooks/use-translate-context";
+export const createFilterFromCol = (f, options, operations, rest = {}) => {
+    var _a, _b;
+    const name = f.id;
+    const type = (_a = f.type) !== null && _a !== void 0 ? _a : ColType.Text;
+    const operatorId = (_b = options[type]) === null || _b === void 0 ? void 0 : _b[0].value;
+    const operation = operations[operatorId];
+    return Object.assign({ id: uuid(), operation, label: getLabel(f), name, type, value: "" }, rest);
+};
+export const useOperators = () => {
+    const translation = useTranslations();
+    const operations = useMemo(() => {
+        return {
+            contains: { value: "contains", label: translation.tableFilterTypeContains, symbol: "includes" },
+            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 operationOptions = useMemo(() => {
+        return {
+            [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],
+        };
+    }, [translation]);
+    return { operationOptions, operations };
+};
+export const Filter = (props) => {
+    const translation = useTranslations();
+    const { operationOptions, operations } = useOperators();
+    const onAddFilter = () => {
+        const col = props.cols.at(0);
+        props.set((prev) => [...prev, createFilterFromCol(col, operationOptions, 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, operationOptions, 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 ? Object.assign(Object.assign({}, x), { operation: 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 ? Object.assign(Object.assign({}, x), { value }) : x)));
+    };
+    return (_jsx(Fragment, { children: _jsx(Dropdown, { arrow: true, title: translation.tableFilterDropdownTitle, trigger: _jsxs("span", { className: "flex items-center gap-1 proportional-nums", children: [_jsx(ListFilterIcon, { size: 14 }), translation.tableFilterLabel, " ", props.filters.length === 0 ? "" : ` (${props.filters.length})`] }), children: _jsxs("ul", { className: "mt-4 space-y-2", children: [props.filters.map((filter) => {
+                        const operators = operationOptions[filter.type];
+                        return (_jsxs("li", { className: "flex flex-nowrap gap-3", children: [_jsx(Select, { options: props.options, title: translation.tableFilterColumnTitle, placeholder: translation.tableFilterColumnPlaceholder, value: filter.name, "data-id": filter.id, onChange: onSelectProperty }), _jsx(Select, { "data-id": filter.id, onChange: onSelectOperation, value: filter.operation.value, options: operators, title: translation.tableFilterOperatorTitle, placeholder: translation.tableFilterOperatorPlaceholder }), _jsx(Input, { "data-id": filter.id, onChange: onChangeValue, title: translation.tableFilterValueTitle, placeholder: translation.tableFilterValuePlaceholder, type: filter.type, value: filter.value, optionalText: "" }), _jsx("div", { className: "flex items-center justify-center mt-5", children: _jsx("button", { "data-id": filter.id, type: "button", onClick: onDelete, children: _jsx(Trash2Icon, { className: "text-danger", size: 16 }) }) })] }, `filter-select-${filter.id}`));
+                    }), _jsx("li", { children: _jsxs("button", { type: "button", onClick: onAddFilter, className: "text-primary flex items-center gap-1", children: [_jsx(PlusIcon, { size: 14 }), " ", translation.tableFilterNewFilter] }) })] }) }) }));
+};
+export const ColumnHeaderFilter = ({ filter, onDelete, set }) => {
+    const translation = useTranslations();
+    const { operationOptions, operations } = useOperators();
+    const onSelectOperation = (e) => {
+        const operator = e.target.value;
+        const id = e.target.dataset.id || "";
+        set((prev) => prev.map((x) => (x.id === id ? Object.assign(Object.assign({}, x), { operation: 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 ? Object.assign(Object.assign({}, x), { value }) : x)));
+    };
+    return (_jsxs("div", { className: "flex flex-nowrap items-center gap-4 py-2", children: [_jsx(Select, { "data-id": filter.id, onChange: onSelectOperation, options: operationOptions[filter.type], title: translation.tableFilterColumnTitle, placeholder: translation.tableFilterColumnPlaceholder, value: filter.operation.value }), _jsx(Input, { "data-id": filter.id, onChange: onChangeValue, type: filter.type, value: filter.value, title: translation.tableFilterValueTitle, placeholder: translation.tableFilterValueTitle }), _jsx("button", { onClick: onDelete, "data-id": filter.id, type: "button", className: "mt-4", children: _jsx(Trash2Icon, { className: "text-danger", size: 14 }) })] }));
+};

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

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

package/dist/src/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,EAAE,IAAI,GAAG,CAAC,CAAC,CAAC,GAAG;IAC3C,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,EAAE,IAAI,kBAAkB,CACzC,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,EAAE,SAAS,KAAK,CAAC,CAAC,CAAC,4CA2ElD,CAAC"}

package/dist/src/components/table/group.js

@@ -0,0 +1,43 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LayoutGroup, Reorder, useDragControls, useMotionValue } from "framer-motion";
+import Linq from "linq-arrays";
+import { GripVerticalIcon, Trash2Icon, UngroupIcon } from "lucide-react";
+import { Fragment, useState } from "react";
+import { keys } from "sidekicker";
+import { useTranslations } from "../../hooks/use-translate-context";
+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 (_jsxs(Reorder.Item, { onPointerDown: onPointerDown, id: item.groupId, className: "flex flex-row items-center gap-2", value: item, style: { y }, children: [_jsx("button", { type: "button", className: "cursor-grab", children: _jsx(GripVerticalIcon, { size: 14 }) }), _jsx("span", { children: item.groupName })] }, item.groupId));
+};
+export const Group = (props) => {
+    var _a;
+    const translations = useTranslations();
+    const options = createOptionCols(props.cols);
+    const controls = useDragControls();
+    const [group, setGroup] = useState(((_a = props.groups[0]) === null || _a === void 0 ? void 0 : _a.thead) || "");
+    const onChange = (e) => {
+        var _a;
+        const select = e.target;
+        const key = select.value;
+        const index = select.options.selectedIndex;
+        const label = ((_a = select.options.item(index)) === null || _a === void 0 ? void 0 : _a.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 Object.assign(Object.assign({}, col), { groupId: uuid(), groupKey: key, index, rows, groupName: groupName });
+        }));
+    };
+    const onDelete = () => props.setGroups([]);
+    return (_jsx(Fragment, { children: _jsxs(Dropdown, { arrow: false, title: translations.tableGroupLabel, trigger: _jsxs("span", { className: "flex items-center gap-1 proportional-nums", children: [_jsx(UngroupIcon, { size: 14 }), translations.tableGroupLabelWithCount, props.groups.length > 0 ? ` - ${group}(${props.groups.length})` : ""] }), children: [_jsxs("div", { className: "flex flex-nowrap items-center", children: [_jsx(Select, { value: group, title: "Tipo de agrupamento", onChange: onChange, options: options, placeholder: "Agrupar por..." }), _jsx(Button, { className: "mt-4", onClick: onDelete, theme: "raw", "data-id": group, children: _jsx(Trash2Icon, { size: 16, className: "text-danger" }) })] }), props.groups.length > 0 ? (_jsxs("section", { className: "my-4", children: [_jsx("header", { children: _jsx("h2", { className: "text-xl font-medium", children: "Order groups" }) }), _jsx(LayoutGroup, { children: _jsx(Reorder.Group, { axis: "y", className: "relative space-y-2", drag: true, dragControls: controls, dragListener: false, layoutScroll: true, onReorder: props.setGroups, values: props.groups, children: props.groups.map((item) => (_jsx(Item, { item: item, onPointerDown: (e) => {
+                                        controls.start(e);
+                                        props.setGroups([...props.groups]);
+                                    } }, item.groupId))) }) })] })) : null] }) }));
+};

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

@@ -0,0 +1,38 @@
+import React, { HTMLAttributes } from "react";
+import { OptionProps } from "../form/select";
+import { FilterConfig } from "./filter";
+import { GroupItem } from "./group";
+import { Sorter } from "./sort";
+import { Col, TableOperationProps } from "./table-lib";
+type InnerTableProps<T extends {}> = HTMLAttributes<HTMLTableElement> & TableOperationProps<T> & {
+    border?: boolean;
+    useControl?: boolean;
+    loading?: boolean;
+    group?: GroupItem<T>;
+    groups?: GroupItem<T>[];
+    optionCols: OptionProps[];
+    index: number;
+    rows: T[];
+    cols: Col<T>[];
+    sorters?: Sorter<T>[];
+    showMetadata?: boolean;
+    filters?: FilterConfig<T>[];
+    setGroups: React.Dispatch<React.SetStateAction<GroupItem<T>[]>>;
+    onScrollEnd?: () => void;
+    loadingMore?: boolean;
+};
+export type TableProps<T extends {}> = Pick<InnerTableProps<T>, "cols" | "rows" | "loadingMore" | "border"> & {
+    name: string;
+} & Partial<TableOperationProps<T> & {
+    inlineFilter: boolean;
+    inlineSorter: boolean;
+    loading: boolean;
+    onScrollEnd: () => void;
+    operations: boolean;
+    reference: keyof T;
+    sticky: number;
+    useControl: boolean;
+}>;
+export declare const Table: <T extends {}>(props: TableProps<T>) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/src/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,KAAK,EAAE,EAA2B,cAAc,EAAoD,MAAM,OAAO,CAAC;AAMzH,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAGpC,OAAO,EAAa,MAAM,EAAE,MAAM,QAAQ,CAAC;AAC3C,OAAO,EAAoB,GAAG,EAA+B,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAStG,KAAK,eAAe,CAAC,CAAC,SAAS,EAAE,IAAI,cAAc,CAAC,gBAAgB,CAAC,GACjE,mBAAmB,CAAC,CAAC,CAAC,GAAG;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;IACrB,MAAM,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;IACxB,UAAU,EAAE,WAAW,EAAE,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IAC5B,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IAChE,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAgLN,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,EAAE,IAAI,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,aAAa,GAAG,QAAQ,CAAC,GAAG;IAC1G,IAAI,EAAE,MAAM,CAAC;CAChB,GAAG,OAAO,CACH,mBAAmB,CAAC,CAAC,CAAC,GAAG;IACrB,YAAY,EAAE,OAAO,CAAC;IACtB,YAAY,EAAE,OAAO,CAAC;IACtB,OAAO,EAAE,OAAO,CAAC;IACjB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,OAAO,CAAC;CACvB,CACJ,CAAC;AASN,eAAO,MAAM,KAAK,GAAI,CAAC,SAAS,EAAE,SAAS,UAAU,CAAC,CAAC,CAAC,4CA8GvD,CAAC"}

package/dist/src/components/table/index.js

@@ -0,0 +1,146 @@
+import { __rest } from "tslib";
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AnimatePresence, motion } from "framer-motion";
+import Linq from "linq-arrays";
+import React, { createContext, Fragment, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { TableVirtuoso } from "react-virtuoso";
+import { Is } from "sidekicker";
+import { useReducer } from "use-typed-reducer";
+import { useCallbackRef } from "../../hooks/use-callback-ref";
+import { path } from "../../lib/fns";
+import { Metadata } from "./metadata";
+import { Pagination } from "./pagination";
+import { multiSort } from "./sort";
+import { createOptionCols } from "./table-lib";
+import { TableHeader } from "./thead";
+const TableContext = createContext({});
+const useTable = () => useContext(TableContext);
+const TableBody = React.forwardRef((props, ref) => {
+    var _a;
+    return (_jsx("tbody", Object.assign({}, props, { role: "rowgroup", className: `divide-y divide-table-border ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`, ref: ref, children: _jsx(AnimatePresence, { children: props.children }) })));
+});
+const VirtualTable = React.forwardRef((props, ref) => {
+    var _a;
+    return (_jsx("table", Object.assign({}, props, { ref: ref, role: "table", className: `table min-w-full table-auto divide-y divide-table-border text-left ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}` })));
+});
+const Thead = React.forwardRef((_a, ref) => {
+    var _b;
+    var { context } = _a, props = __rest(_a, ["context"]);
+    const ctx = useTable();
+    const style = Object.assign(Object.assign({}, props === null || props === void 0 ? void 0 : props.style), { sticky: Is.number(ctx.sticky) ? `${ctx.sticky}px` : (_b = props === null || props === void 0 ? void 0 : props.style) === null || _b === void 0 ? void 0 : _b.sticky });
+    return _jsx("thead", Object.assign({}, props, { style: style, role: "rowgroup", className: "shadow-xs group:sticky top-0 bg-card-background", ref: ref }));
+});
+const TRow = React.forwardRef((_a, ref) => {
+    var _b;
+    var { context, item } = _a, props = __rest(_a, ["context", "item"]);
+    return (_jsx("tr", Object.assign({}, props, { role: "row", ref: ref, className: `table-row ${(_b = props === null || props === void 0 ? void 0 : props.className) !== null && _b !== void 0 ? _b : ""}` })));
+});
+const TFoot = React.forwardRef((props, ref) => {
+    if (props.context.loadingMore) {
+        return (_jsx("tfoot", Object.assign({}, props, { ref: ref, className: "bg-card-background", children: _jsx("tr", { role: "row", className: "bg-card-background", children: _jsx("td", { colSpan: 999, className: "h-14 bg-card-background px-2", children: _jsx("span", { className: "block h-2 w-full animate-pulse rounded bg-foreground opacity-60" }) }) }) })));
+    }
+    return null;
+});
+const components = {
+    TableHead: Thead,
+    Table: VirtualTable,
+    TableBody: TableBody,
+    TableRow: TRow,
+    TableFoot: TFoot,
+};
+const loadingArray = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
+const ItemContent = (index, row, context) => {
+    const cols = context.cols;
+    const loading = context.loading;
+    return (_jsx(Fragment, { children: cols.map((col, colIndex) => {
+            var _a;
+            const matrix = `${colIndex},${index}`;
+            const value = path(row, col.id);
+            const Component = col.Element;
+            const className = ((_a = col.cellProps) === null || _a === void 0 ? void 0 : _a.className) || "";
+            return (_createElement("td", Object.assign({}, col.cellProps, { role: "cell", "data-matrix": matrix, key: `accessor-${index}-${colIndex}`, className: `hidden h-14 border-none px-2 first:table-cell md:table-cell ${className}` }), loading ? (_jsx("div", { className: "h-2 w-10/12 animate-pulse rounded bg-table-border" })) : Component ? (_jsx(Component, { row: row, matrix: matrix, col: col, rowIndex: index, value: value })) : (_jsx(Fragment, { children: Is.nil(value) ? "" : value }))));
+        }) }));
+};
+const Frag = () => _jsx(Fragment, {});
+const InnerTable = (_a) => {
+    var { filters, pagination = null, onScrollEnd, useControl = false, setCols, setFilters, sorters, cols, border = false, setSorters } = _a, props = __rest(_a, ["filters", "pagination", "onScrollEnd", "useControl", "setCols", "setFilters", "sorters", "cols", "border", "setSorters"]);
+    const ref = useRef(null);
+    const [showLoadingFooter, setShowLoadingFooter] = useState(false);
+    const onScrollEndRef = useCallbackRef(onScrollEnd);
+    const loadingMoreRef = useCallbackRef(props.loadingMore);
+    const rows = useMemo(() => {
+        if (props.loading)
+            return loadingArray;
+        if (useControl)
+            return props.rows;
+        const linq = new Linq(props.rows);
+        if (filters.length > 0) {
+            filters.forEach((x) => x.value === "" || Number.isNaN(x.value) ? undefined : linq.Where(x.name, x.operation.symbol, x.value));
+        }
+        if (sorters.length === 0)
+            return linq.Select();
+        return multiSort(linq.Select(), sorters);
+    }, [props.rows, filters, sorters, props.loading]);
+    useEffect(() => {
+        if (ref.current === null) {
+            return () => { };
+        }
+        const div = ref.current;
+        const observer = new IntersectionObserver((entries) => {
+            var _a;
+            const endOfPage = entries[entries.length - 1];
+            const condition = endOfPage.isIntersecting && loadingMoreRef.current;
+            if (condition) {
+                (_a = onScrollEndRef.current) === null || _a === void 0 ? void 0 : _a.call(onScrollEndRef);
+                return void setShowLoadingFooter(true);
+            }
+            return setShowLoadingFooter(false);
+        });
+        observer.observe(div);
+        return () => observer.disconnect();
+    }, []);
+    return (_jsxs("div", { className: "min-w-full", children: [_jsxs("div", { className: `group rounded-lg px-1 ${border ? "border border-table-border" : ""}`, children: [_jsx(TableVirtuoso, { data: rows, useWindowScroll: true, components: components, totalCount: rows.length, itemContent: ItemContent, context: { loading: props.loading, loadingMore: props.loadingMore, cols: cols }, fixedFooterContent: showLoadingFooter ? Frag : null, fixedHeaderContent: () => (_jsx(TableHeader, { filters: filters, headers: cols, inlineFilter: props.inlineFilter, inlineSorter: props.inlineSorter, loading: !!props.loading, setCols: setCols, setFilters: setFilters, setSorters: setSorters, sorters: sorters })) }), _jsx("div", { "aria-hidden": "true", ref: ref, className: "h-0.5 w-full" })] }), pagination !== null ? _jsx(Pagination, Object.assign({}, pagination)) : null] }));
+};
+const dispatcherFun = (prev, setter) => typeof setter === "function" ? setter(prev) : setter;
+const compareAndExec = (prev, state, exec) => (prev === state ? undefined : exec === null || exec === void 0 ? void 0 : exec(state));
+export const Table = (props) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    const contextState = useMemo(() => ({ sticky: props.sticky }), [props.sticky]);
+    const operations = (_a = props.operations) !== null && _a !== void 0 ? _a : true;
+    const optionCols = useMemo(() => createOptionCols(props.cols), [props.cols]);
+    const [state, dispatch] = useReducer({
+        cols: props.cols,
+        filters: ((_b = props.filters) !== null && _b !== void 0 ? _b : []),
+        groups: ((_c = props.groups) !== null && _c !== void 0 ? _c : []),
+        sorters: ((_d = props.sorters) !== null && _d !== void 0 ? _d : []),
+    }, (get) => {
+        const create = (key) => (arg) => {
+            const state = get.state();
+            return Object.assign(Object.assign({}, state), { [key]: dispatcherFun(state[key], arg) });
+        };
+        return {
+            cols: create("cols"),
+            filters: create("filters"),
+            groups: create("groups"),
+            sorters: create("sorters"),
+        };
+    }, {
+        postMiddleware: [
+            (state, prev) => {
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+                console.log("->", state, prev);
+                (_a = props.set) === null || _a === void 0 ? void 0 : _a.call(props, state);
+                compareAndExec((_b = prev === null || prev === void 0 ? void 0 : prev.filters) !== null && _b !== void 0 ? _b : [], (_c = state.filters) !== null && _c !== void 0 ? _c : [], props.setFilters);
+                compareAndExec((_d = prev === null || prev === void 0 ? void 0 : prev.sorters) !== null && _d !== void 0 ? _d : [], (_e = state.sorters) !== null && _e !== void 0 ? _e : [], props.setSorters);
+                compareAndExec((_f = prev === null || prev === void 0 ? void 0 : prev.groups) !== null && _f !== void 0 ? _f : [], (_g = state.groups) !== null && _g !== void 0 ? _g : [], props.setGroups);
+                compareAndExec((_h = prev === null || prev === void 0 ? void 0 : prev.cols) !== null && _h !== void 0 ? _h : [], (_j = state.cols) !== null && _j !== void 0 ? _j : [], props.setCols);
+                return state;
+            },
+        ],
+    });
+    return (_jsx(TableContext.Provider, { value: contextState, children: _jsxs("div", { className: "relative min-w-full", children: [operations ? (_jsx(Metadata, { cols: state.cols, filters: state.filters, groups: state.groups, inlineFilter: (_e = props.inlineFilter) !== null && _e !== void 0 ? _e : true, inlineSorter: (_f = props.inlineSorter) !== null && _f !== void 0 ? _f : true, options: optionCols, pagination: (_g = props.pagination) !== null && _g !== void 0 ? _g : null, rows: props.rows, setCols: dispatch.cols, setFilters: dispatch.filters, setGroups: dispatch.groups, setSorters: dispatch.sorters, sorters: state.sorters })) : null, state.groups.length === 0 ? (_jsx(InnerTable, Object.assign({}, props, { inlineFilter: (_h = props.inlineFilter) !== null && _h !== void 0 ? _h : true, inlineSorter: (_j = props.inlineSorter) !== null && _j !== void 0 ? _j : true, onScrollEnd: props.onScrollEnd, cols: state.cols, filters: state.filters, groups: state.groups, index: 0, optionCols: optionCols, options: optionCols, setCols: dispatch.cols, setFilters: dispatch.filters, setGroups: dispatch.groups, setSorters: dispatch.sorters, sorters: state.sorters, pagination: (_k = props.pagination) !== null && _k !== void 0 ? _k : null }))) : (_jsx("div", { className: "flex flex-wrap gap-4", children: state.groups.map((group, index) => {
+                        var _a, _b;
+                        return (_jsx(motion.div, { className: "min-w-full", children: _jsx(InnerTable, Object.assign({}, props, { inlineFilter: (_a = props.inlineFilter) !== null && _a !== void 0 ? _a : true, inlineSorter: (_b = props.inlineSorter) !== null && _b !== void 0 ? _b : true, pagination: null, onScrollEnd: props.onScrollEnd, cols: state.cols, filters: state.filters, group: group, groups: state.groups, index: index, optionCols: optionCols, options: optionCols, rows: group.rows, setCols: dispatch.cols, setFilters: dispatch.filters, setGroups: dispatch.groups, setSorters: dispatch.sorters, sorters: state.sorters })) }, `group-${group.groupId}`));
+                    }) }))] }) }));
+};

package/dist/src/components/table/metadata.d.ts

@@ -0,0 +1,3 @@
+import { TableOperationProps } from "./table-lib";
+export declare const Metadata: <T extends {}>(props: TableOperationProps<T>) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=metadata.d.ts.map

package/dist/src/components/table/metadata.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"metadata.d.ts","sourceRoot":"","sources":["../../../../src/components/table/metadata.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,mBAAmB,EAAiB,MAAM,aAAa,CAAC;AAEjE,eAAO,MAAM,QAAQ,GAAI,CAAC,SAAS,EAAE,SAAS,mBAAmB,CAAC,CAAC,CAAC,4CAiDnE,CAAC"}

package/dist/src/components/table/metadata.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Filter } from "./filter";
+import { Group } from "./group";
+import { Sort } from "./sort";
+import { valueFromType } from "./table-lib";
+export const Metadata = (props) => (_jsx("header", { className: "min-w-full mb-1", children: _jsxs("div", { className: "flex flex-wrap min-w-full items-center justify-between gap-x-4 gap-y-1", children: [_jsxs("div", { className: "flex w-fit items-centeend gap-4 whitespace-nowrap py-2", children: [_jsx("span", { children: _jsx(Filter, { cols: props.cols, options: props.options, filters: props.filters, set: props.setFilters }) }), _jsx("span", { children: _jsx(Sort, { options: props.options, cols: props.cols, sorters: props.sorters, set: props.setSorters }) }), _jsx("span", { children: _jsx(Group, { rows: props.rows, groups: props.groups, setGroups: props.setGroups, options: props.options, cols: props.cols }) })] }), _jsx("ul", { className: "flex flex-wrap w-full flex-1 flex-grow flex-row items-center md:justify-end gap-4", children: props.filters.map((x) => (_jsxs("li", { className: "flex gap-1 items-center rounded-xl border border-card-border px-4 py-0.5", children: [_jsxs("span", { children: [_jsx("span", { className: "size-3 mr-2 aspect-square bg-primary inline-block rounded-full", "aria-hidden": "true" }), x.label, " ", x.operation.label.toLowerCase(), ":"] }), _jsxs("div", { className: "relative w-min min-w-[1ch]", children: [_jsx("span", { "aria-hidden": "true", className: "invisible whitespace-pre p-0", children: x.value || " " }), _jsx("input", { type: x.type, value: x.value, className: "absolute left-0 top-0 m-0 inline-block w-full bg-transparent p-0 placeholder-primary/70 outline-none [appearance:textfield] after:empty:text-primary/70 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none", onChange: (e) => {
+                                        const value = valueFromType(e.target);
+                                        props.setFilters((prev) => prev.map((item) => x.id === item.id
+                                            ? Object.assign(Object.assign({}, item), { value }) : item));
+                                    } })] })] }, `filter-table-${x.id}`))) })] }) }));

package/dist/src/components/table/pagination.d.ts

@@ -0,0 +1,3 @@
+import { TablePagination } from "./table-lib";
+export declare const Pagination: (pagination: TablePagination) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=pagination.d.ts.map

package/dist/src/components/table/pagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../../../src/components/table/pagination.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAwB9C,eAAO,MAAM,UAAU,eAAgB,eAAe,4CAyErD,CAAC"}

package/dist/src/components/table/pagination.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, useId, useMemo } from "react";
+import { useTranslations } from "../../hooks/use-translate-context";
+function createPaginationItems(current, max) {
+    if (!current || !max)
+        return [];
+    const items = [1];
+    if (current === 1 && max === 1)
+        return items;
+    if (current > 4)
+        items.push("-");
+    let r = 2;
+    const r1 = current - r;
+    const r2 = current + r;
+    for (let i = r1 > 2 ? r1 : 2; i <= Math.min(max, r2); i++)
+        items.push(i);
+    const p2 = max - 2;
+    if (r2 + 1 !== p2) {
+        if (r2 + 1 < max)
+            items.push("_");
+    }
+    if (r2 < max) {
+        items.push(max - 2);
+        items.push(max - 1);
+        items.push(max);
+    }
+    return Array.from(new Set(items));
+}
+export const Pagination = (pagination) => {
+    const id = useId();
+    const translation = useTranslations();
+    const Render = pagination.asLink || "button";
+    const pageNavigation = useMemo(() => createPaginationItems(pagination.current, pagination.pages), [pagination.current, pagination.pages]);
+    const hasNext = pagination.current < pagination.pages;
+    return (_jsxs("footer", { className: "flex px-1 py-4 items-center justify-center gap-4 lg:justify-between flex-wrap lg:flex-nowrap", children: [_jsx("p", { children: _jsx(translation.tablePaginationFooter, Object.assign({}, pagination, { sizes: pagination.sizes, select: pagination.onChangeSize && Array.isArray(pagination.sizes) ? (_jsxs(Fragment, { children: [_jsx("label", { htmlFor: id, children: translation.tablePaginationSelectLabel }), _jsx("select", { id: id, value: pagination.size, className: "cursor-pointer bg-transparent", onChange: (e) => {
+                                    var _a;
+                                    (_a = pagination.onChangeSize) === null || _a === void 0 ? void 0 : _a.call(pagination, Number(e.target.value));
+                                }, children: pagination.sizes.map((value) => (_jsx("option", { value: value, children: value }, `pagination-opt-${value}`))) }), " "] })) : null })) }), _jsx("nav", { children: _jsxs("ul", { className: "flex items-center gap-2", children: [pagination.current > 1 ? (_jsx("li", { children: _jsx(Render, { href: "previous", className: "", children: translation.tablePaginationPrevious }) })) : null, pageNavigation.map((x) => {
+                            if (x === null)
+                                return null;
+                            return (_jsx(Fragment, { children: typeof x === "string" ? (_jsx("li", { children: "..." })) : (_jsx("li", { children: _jsx(Render, { href: x, className: `cursor-pointer px-3 py-1 transition-colors border-b-2 hover:text-primary-subtle hover:border-primary-subtle proportional-nums ${x === pagination.current ? "text-primary border-primary" : "border-transparent"}`, children: x }) })) }, `pagination-${x}`));
+                        }), hasNext ? (_jsx("li", { children: _jsx(Render, { href: "next", className: "", children: translation.tablePaginationNext }) })) : null] }) })] }));
+};

package/dist/src/components/table/sort.d.ts

@@ -0,0 +1,28 @@
+import React from "react";
+import { Label } from "../../types";
+import { Col, TableConfiguration, TableOperationProps } from "./table-lib";
+type Keyof<T extends {}> = keyof T extends infer R extends string ? R : never;
+declare enum Order {
+    Asc = "asc",
+    Desc = "desc",
+    Undefined = "undefined"
+}
+export type Sorter<T extends {}> = {
+    value: Keyof<T>;
+    type: Order;
+    label: Label;
+    id: string;
+};
+export declare const multiSort: <T extends {}>(array: T[], fields: Sorter<T>[]) => T[];
+type Props<T extends {}> = TableConfiguration<T, {
+    cols: Col<T>[];
+    sorters: Sorter<T>[];
+    set: React.Dispatch<React.SetStateAction<Sorter<T>[]>>;
+}>;
+export declare const Sort: <T extends {}>(props: Props<T>) => import("react/jsx-runtime").JSX.Element;
+type SorterHeadProps<T extends {}> = Pick<TableOperationProps<T>, "sorters" | "setSorters"> & {
+    col: Col<T>;
+};
+export declare const SorterHead: <T extends {}>(props: SorterHeadProps<T>) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=sort.d.ts.map

package/dist/src/components/table/sort.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sort.d.ts","sourceRoot":"","sources":["../../../../src/components/table/sort.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAG7D,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAGpC,OAAO,EAAE,GAAG,EAAY,kBAAkB,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAErF,KAAK,KAAK,CAAC,CAAC,SAAS,EAAE,IAAI,MAAM,CAAC,SAAS,MAAM,CAAC,SAAS,MAAM,GAAG,CAAC,GAAG,KAAK,CAAC;AAE9E,aAAK,KAAK;IACN,GAAG,QAAQ;IACX,IAAI,SAAS;IACb,SAAS,cAAc;CAC1B;AAED,MAAM,MAAM,MAAM,CAAC,CAAC,SAAS,EAAE,IAAI;IAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;IAAC,IAAI,EAAE,KAAK,CAAC;IAAC,KAAK,EAAE,KAAK,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,CAAC;AAY9F,eAAO,MAAM,SAAS,GAAI,CAAC,SAAS,EAAE,SAAS,CAAC,EAAE,UAAU,MAAM,CAAC,CAAC,CAAC,EAAE,QAA2C,CAAC;AAEnH,KAAK,KAAK,CAAC,CAAC,SAAS,EAAE,IAAI,kBAAkB,CACzC,CAAC,EACD;IACI,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;IACf,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;IACrB,GAAG,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;CAC1D,CACJ,CAAC;AASF,eAAO,MAAM,IAAI,GAAI,CAAC,SAAS,EAAE,SAAS,KAAK,CAAC,CAAC,CAAC,4CA0EjD,CAAC;AAEF,KAAK,eAAe,CAAC,CAAC,SAAS,EAAE,IAAI,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,SAAS,GAAG,YAAY,CAAC,GAAG;IAAE,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,CAAA;CAAE,CAAC;AAE9G,eAAO,MAAM,UAAU,GAAI,CAAC,SAAS,EAAE,SAAS,eAAe,CAAC,CAAC,CAAC,4CAkCjE,CAAC"}

package/dist/src/components/table/sort.js

@@ -0,0 +1,79 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowDown01Icon, ArrowUp01Icon, ArrowUpDownIcon, PlusIcon, Trash2Icon } from "lucide-react";
+import { Fragment, useEffect, useState } from "react";
+import { useTranslations } from "../../hooks/use-translate-context";
+import { uuid } from "../../lib/fns";
+import { Dropdown } from "../floating/dropdown";
+import { Select } from "../form/select";
+import { getLabel } from "./table-lib";
+var Order;
+(function (Order) {
+    Order["Asc"] = "asc";
+    Order["Desc"] = "desc";
+    Order["Undefined"] = "undefined";
+})(Order || (Order = {}));
+const createSorterFn = (fields) => (a, b) => fields.reduce((acc, x) => {
+    const reverse = x.type === "desc" ? -1 : 1;
+    const property = x.value;
+    const p = a[property] > b[property] ? reverse : a[property] < b[property] ? -reverse : 0;
+    return acc !== 0 ? acc : p;
+}, 0);
+export const multiSort = (array, fields) => array.toSorted(createSorterFn(fields));
+const createSorter = (col, label, order) => ({
+    id: uuid(),
+    type: order,
+    value: col.id,
+    label,
+});
+export const Sort = (props) => {
+    const translation = useTranslations();
+    const orders = {
+        asc: { label: translation.tableSortAsc, value: Order.Asc },
+        desc: { label: translation.tableSortDesc, value: Order.Desc },
+    };
+    const orderOptions = [orders.asc, orders.desc];
+    const onAddSorter = () => {
+        const col = props.cols[0];
+        if (col)
+            props.set((prev) => [...prev, createSorter(col, orders.asc.label, orders.asc.value)]);
+    };
+    const onSetSorter = (id) => (e) => {
+        const value = e.target.value;
+        props.set((prev) => prev.map((x) => (x.id === id ? Object.assign(Object.assign({}, x), { value: value }) : x)));
+    };
+    const onSortOrderType = (id) => (e) => {
+        const type = e.target.value;
+        props.set((prev) => prev.map((x) => (x.id === id ? Object.assign(Object.assign({}, x), { type: type }) : x)));
+    };
+    const onDelete = (e) => {
+        const id = e.currentTarget.dataset.id || "";
+        props.set((prev) => prev.filter((x) => x.id !== id));
+    };
+    return (_jsx(Fragment, { children: _jsx(Dropdown, { title: translation.tableSortDropdownTitle, trigger: _jsxs("span", { className: "flex items-center gap-1 proportional-nums", children: [_jsx(ArrowUpDownIcon, { size: 14 }), translation.tableSortOrderByLabel, " ", props.sorters.length === 0 ? "" : ` (${props.sorters.length})`] }), children: _jsxs("ul", { className: "mt-4 space-y-2", children: [props.sorters.map((sorter) => {
+                        return (_jsxs("li", { className: "flex flex-nowrap gap-3", children: [_jsx(Select, { options: props.options, value: sorter.value, onChange: onSetSorter(sorter.id), title: translation.tableSortOrderInputTitle, placeholder: translation.tableSortOrderInputPlaceholder }), _jsx(Select, { onChange: onSortOrderType(sorter.id), value: sorter.type, options: orderOptions, title: translation.tableSortTypeInputTitle, placeholder: translation.tableSortTypeInputPlaceholder }), _jsx("button", { className: "mt-4", "data-id": sorter.id, onClick: onDelete, children: _jsx(Trash2Icon, { className: "text-danger", size: 14 }) })] }, `sorter-select-${sorter.id}`));
+                    }), _jsx("li", { children: _jsxs("button", { type: "button", onClick: onAddSorter, className: "text-primary flex items-center gap-1", children: [_jsx(PlusIcon, { size: 14 }), " ", translation.tableSortAddButton] }) })] }) }) }));
+};
+export const SorterHead = (props) => {
+    const translations = useTranslations();
+    const [status, setStatus] = useState(() => {
+        const sorter = props.sorters.find((sort) => sort.value === props.col.id);
+        return sorter ? sorter.type : Order.Undefined;
+    });
+    const onClick = () => setStatus((prev) => (prev === Order.Undefined ? Order.Asc : prev === Order.Asc ? Order.Desc : Order.Undefined));
+    useEffect(() => {
+        props.setSorters((prev) => {
+            if (status === Order.Undefined)
+                return prev.filter((x) => x.value !== props.col.id);
+            const findIndex = prev.findIndex((p) => p.value === props.col.id);
+            const sorter = createSorter(props.col, status, status);
+            if (findIndex === -1)
+                return [...prev, sorter];
+            prev[findIndex] = sorter;
+            return [...prev];
+        });
+    }, [status, props.col]);
+    const labelId = `${props.col.id}-sorter-id`;
+    const label = getLabel(props.col);
+    return (_jsxs("button", { "aria-labelledby": labelId, className: "isolate flex items-center", onClick: onClick, type: "button", children: [_jsxs("span", { id: labelId, className: "sr-only", children: [translations.tableSortDropdownTitle, " ", label] }), status === Order.Asc ? _jsx(ArrowUp01Icon, { size: 14 }) : null, status === Order.Desc ? _jsx(ArrowDown01Icon, { size: 14 }) : null, status === Order.Undefined ? _jsx(ArrowUpDownIcon, { size: 14 }) : null] }));
+};