@g4rcez/components 5.0.1 → 5.0.2

package/dist/components/table/inner-table.jsx

@@ -0,0 +1,102 @@
+import Linq from "linq-arrays";
+import { AnimatePresence } from "motion/react";
+import React, { Fragment, useEffect, useMemo, useRef, useState } from "react";
+import { TableVirtuoso } from "react-virtuoso";
+import { Is } from "sidekicker";
+import { useStableRef } from "../../hooks/use-stable-ref";
+import { Empty } from "../display/empty";
+import { SkeletonCell } from "../display/skeleton";
+import { Pagination } from "./pagination";
+import { Row } from "./row";
+import { multiSort } from "./sort";
+import { useTable } from "./table.context";
+import { TableHeader } from "./thead";
+const TableBody = React.forwardRef(({ context: _context, className = "", ...props }, ref) => (<tbody {...props} role="rowgroup" className={`divide-y divide-table-border ${className}`} ref={ref}>
+            <AnimatePresence>{props.children}</AnimatePresence>
+        </tbody>));
+const VirtualTable = React.forwardRef(({ context: _context, className = "", ...props }, ref) => (<table {...props} role="table" ref={ref} style={{ ...props.style, "--table-cell-padding": "0.75rem" }} className={`table w-full table-fixed border-separate border-spacing-0 text-left ${className ?? ""}`}/>));
+const Thead = React.forwardRef(({ context: _context, ...props }, ref) => {
+    const ctx = useTable();
+    const style = {
+        ...props.style,
+        top: Is.number(ctx.sticky) ? `${ctx.sticky}px` : undefined,
+    };
+    return <thead {...props} ref={ref} style={style} role="rowgroup" className="group:sticky top-0 hidden bg-transparent md:table-header-group"/>;
+});
+const TRow = React.forwardRef(({ context, item, className, ...props }, ref) => {
+    const contextProps = item ? context?.getRowProps?.(item) : undefined;
+    const innerProps = { ...props, ...contextProps };
+    return (<tr {...innerProps} role="row" ref={ref} className={`group-table-row flex h-fit flex-col flex-wrap justify-center gap-table-row-gap pb-table-row-pb md:table-row ${[className, contextProps?.className].filter(Boolean).join(" ")}`}/>);
+});
+const TFoot = React.forwardRef(({ context, ...props }, ref) => {
+    if (context?.loadingMore) {
+        return (<tfoot {...props} ref={ref} className="bg-card-background">
+                <tr role="row" className="bg-card-background">
+                    <td colSpan={999} className="h-table-loading-h bg-card-background px-table-cell-px">
+                        <span className="rounded-table-loading-bar-radius block h-table-loading-bar-h w-full animate-pulse bg-foreground opacity-60"/>
+                    </td>
+                </tr>
+            </tfoot>);
+    }
+    return null;
+});
+const components = {
+    TableRow: TRow,
+    TableFoot: TFoot,
+    TableHead: Thead,
+    Table: VirtualTable,
+    TableBody: TableBody,
+};
+const loadingArray = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
+const EmptyContent = (props) => (<div className="flex h-table-empty-h w-full items-center justify-center px-table-cell-px">{props.loading ? SkeletonCell : <Empty />}</div>);
+const EmptyCell = () => <Fragment />;
+const emptyRows = [];
+export const InnerTable = ({ cols, filters, setCols, sorters, setFilters, setSorters, onScrollEnd, getScrollRef, pagination = null, useControl = false, ...props }) => {
+    const ref = useRef(null);
+    const [, setShowLoadingFooter] = useState(false);
+    const onScrollEndRef = useStableRef(onScrollEnd);
+    const loadingMoreRef = useStableRef(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.loading, props.rows, useControl, filters, sorters]);
+    useEffect(() => {
+        if (ref.current === null)
+            return () => { };
+        const div = ref.current;
+        const observer = new IntersectionObserver((entries) => {
+            const endOfPage = entries[entries.length - 1];
+            const condition = endOfPage.isIntersecting && loadingMoreRef.current;
+            if (condition) {
+                onScrollEndRef.current?.();
+                return void setShowLoadingFooter(true);
+            }
+            return setShowLoadingFooter(false);
+        });
+        observer.observe(div);
+        return () => observer.disconnect();
+    }, [loadingMoreRef, onScrollEndRef]);
+    const empty = rows.length === 0;
+    const context = {
+        cols: cols,
+        Aside: props.Aside,
+        loading: props.loading,
+        getRowProps: props.getRowProps,
+        loadingMore: props.loadingMore,
+    };
+    return (<div className="group relative flex w-full flex-col whitespace-nowrap rounded-table-radius bg-table-background">
+            <TableVirtuoso components={components} context={context} totalCount={rows.length} itemContent={empty ? EmptyCell : Row} data={empty ? emptyRows : rows} useWindowScroll={getScrollRef ? false : true} customScrollParent={getScrollRef ? getScrollRef() : undefined} fixedHeaderContent={() => (<TableHeader headers={cols} filters={filters} setCols={setCols} sorters={sorters} setFilters={setFilters} setSorters={setSorters} loading={!!props.loading} inlineFilter={props.inlineFilter} inlineSorter={props.inlineSorter}/>)}/>
+            {empty ? <EmptyContent loading={props.loading}/> : null}
+            <div aria-hidden="true" ref={ref} className="h-0.5 w-full"/>
+            {pagination !== null ? <Pagination {...pagination}/> : null}
+        </div>);
+};

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

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

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

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

package/dist/components/table/metadata.jsx

@@ -0,0 +1,36 @@
+import { Filter } from "./filter";
+import { Group } from "./group";
+import { Sort } from "./sort";
+import { valueFromType } from "./table-lib";
+export const Metadata = (props) => (<header className="mb-table-metadata-mb min-w-full">
+        <div className="flex min-w-full flex-wrap items-center justify-between gap-x-table-metadata-gap-x gap-y-table-metadata-gap-y">
+            <div className="items-centeend flex w-fit gap-table-ops-gap whitespace-nowrap py-table-ops-py">
+                <span>
+                    <Filter cols={props.cols} options={props.options} filters={props.filters} set={props.setFilters}/>
+                </span>
+                <span>
+                    <Sort options={props.options} cols={props.cols} sorters={props.sorters} set={props.setSorters}/>
+                </span>
+                <span>
+                    <Group rows={props.rows} groups={props.groups} setGroups={props.setGroups} options={props.options} cols={props.cols}/>
+                </span>
+            </div>
+            <ul className="flex w-full flex-1 flex-grow flex-row flex-wrap items-center gap-table-filter-gap md:justify-end">
+                {props.filters.map((x) => (<li key={`filter-table-${x.id}`} className="rounded-table-pill-radius flex items-center gap-table-inline-gap-tight border border-card-border px-table-pill-px py-table-pill-py">
+                        <span>
+                            <span className="mr-table-filter-dot-mr inline-block aspect-square size-table-filter-dot-size rounded-full bg-primary" aria-hidden="true"/>
+                            {x.label} {x.operation.label.toLowerCase()}:
+                        </span>
+                        <div className="relative w-min min-w-table-metadata-min-w">
+                            <span aria-hidden="true" className="invisible whitespace-pre p-0">
+                                {x.value || " "}
+                            </span>
+                            <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 ? { ...item, value } : item)));
+        }}/>
+                        </div>
+                    </li>))}
+            </ul>
+        </div>
+    </header>);

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

@@ -0,0 +1,5 @@
+import React from "react";
+import { TablePagination } from "./table-lib";
+export declare function createPaginationItems(current: number, max: number): (string | number)[];
+export declare const Pagination: (pagination: TablePagination) => React.JSX.Element;
+//# sourceMappingURL=pagination.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../../src/components/table/pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmC,MAAM,OAAO,CAAC;AAGxD,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAE9C,wBAAgB,qBAAqB,CAAC,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,uBAmBjE;AAED,eAAO,MAAM,UAAU,GAAI,YAAY,eAAe,sBA4ErD,CAAC"}

package/dist/components/table/pagination.jsx

@@ -0,0 +1,74 @@
+import React, { Fragment, useId, useMemo } from "react";
+import { useTranslations } from "../../hooks/use-translations";
+import { Polymorph } from "../core/polymorph";
+export function createPaginationItems(current, max) {
+    if (!current || !max)
+        return [];
+    const items = [1];
+    if (current === 1 && max === 1)
+        return items;
+    if (current > 4)
+        items.push("-");
+    const 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 pageNavigation = useMemo(() => createPaginationItems(pagination.current, pagination.pages), [pagination]);
+    const hasNext = pagination.current < pagination.pages;
+    const Link = pagination.asLink ?? "button";
+    return (<footer className="text-typography-sm flex flex-wrap items-center justify-center gap-table-pag-gap border-t-muted p-table-pag-p lg:flex-nowrap lg:justify-between">
+            <p>
+                <translation.tablePaginationFooter {...pagination} sizes={pagination.sizes} select={pagination.onChangeSize && Array.isArray(pagination.sizes) ? (<Fragment>
+                                <label htmlFor={id}>{translation.tablePaginationSelectLabel}</label>
+                                <select id={id} value={pagination.size} className="cursor-pointer bg-transparent" onChange={(e) => {
+                pagination.onChangeSize?.(Number(e.target.value));
+            }}>
+                                    {pagination.sizes.map((value) => (<option key={`pagination-opt-${value}`} value={value}>
+                                            {value}
+                                        </option>))}
+                                </select>{" "}
+                            </Fragment>) : null}/>
+            </p>
+            <nav>
+                <ul className="flex items-center gap-table-pag-items-gap">
+                    {pagination.current > 1 ? (<li>
+                            <Polymorph as={Link} href="previous" className="">
+                                {translation.tablePaginationPrevious}
+                            </Polymorph>
+                        </li>) : null}
+                    {pageNavigation.map((x) => {
+            if (x === null)
+                return null;
+            return (<Fragment key={`pagination-${x}`}>
+                                {typeof x === "string" ? (<li>...</li>) : (<li>
+                                        <Polymorph href={x} as={Link} className={`cursor-pointer border-b-2 px-table-pag-item-px py-table-pag-item-py proportional-nums transition-colors hover:border-primary-subtle hover:text-primary-subtle ${x === pagination.current ? "border-primary text-primary" : "border-transparent"}`}>
+                                            {x}
+                                        </Polymorph>
+                                    </li>)}
+                            </Fragment>);
+        })}
+                    {hasNext ? (<li>
+                            <Polymorph as={Link} href="next" className="">
+                                {translation.tablePaginationNext}
+                            </Polymorph>
+                        </li>) : null}
+                </ul>
+            </nav>
+        </footer>);
+};

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

@@ -0,0 +1,11 @@
+import React from "react";
+import { CellAsideElement, Col } from "./table-lib";
+type ItemContentContext<T extends Record<string, unknown>> = {
+    cols: Col<T>[];
+    loading?: boolean;
+    loadingMore?: boolean;
+    Aside?: React.FC<CellAsideElement<T>>;
+};
+export declare const Row: <T extends Record<string, unknown>>(index: number, row: T, context: ItemContentContext<T>) => React.JSX.Element;
+export {};
+//# sourceMappingURL=row.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"row.d.ts","sourceRoot":"","sources":["../../../src/components/table/row.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwD,MAAM,OAAO,CAAC;AAI7E,OAAO,EAAE,gBAAgB,EAAoB,GAAG,EAAa,MAAM,aAAa,CAAC;AAEjF,KAAK,kBAAkB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAAI;IACzD,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC;CACzC,CAAC;AAoCF,eAAO,MAAM,GAAG,GAAI,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,OAAO,MAAM,EAAE,KAAK,CAAC,EAAE,SAAS,kBAAkB,CAAC,CAAC,CAAC,sBAgD3G,CAAC"}

package/dist/components/table/row.jsx

@@ -0,0 +1,49 @@
+import React, { Fragment, useRef, useState } from "react";
+import { Is } from "sidekicker";
+import { path } from "../../lib/fns";
+import { SkeletonCell } from "../display/skeleton";
+const RowAside = (props) => {
+    const parentRef = useRef(null);
+    const ref = useRef(null);
+    const [className, setClassName] = useState("opacity-0");
+    const ariaHidden = className === "opacity-0";
+    const onLeave = () => setClassName("opacity-0");
+    const onEnter = () => {
+        const child = ref.current;
+        const parent = parentRef.current;
+        if (child !== null && parent !== null) {
+            parent.style.left = `-${child.getBoundingClientRect().width + 4}px`;
+        }
+        setClassName("opacity-100");
+    };
+    return (<div ref={parentRef} onMouseEnter={onEnter} onMouseLeave={onLeave} data-component="cell-aside" inert={ariaHidden ? true : undefined} tabIndex={ariaHidden ? -1 : undefined} className={`group-table-cell-aside absolute inset-0 top-0 flex h-full w-full items-stretch transition-opacity duration-300 ease-in-out ${className}`}>
+            <div ref={ref} className="isolate block">
+                {props.children}
+            </div>
+        </div>);
+};
+export const Row = (index, row, context) => {
+    const cols = context.cols;
+    const loading = context.loading;
+    return (<Fragment>
+            {cols.map((col, colIndex) => {
+            const matrix = `${colIndex},${index}`;
+            const value = path(row, col.id);
+            const Component = col.Element;
+            const className = col.cellProps?.className || "";
+            const exposeAside = colIndex === 0 && context.Aside && loading === false;
+            const Aside = context.Aside;
+            return (<td {...col.cellProps} role="cell" data-matrix={matrix} key={`accessor-${index}-${colIndex}`} className={`typography group-table-cell flex border-collapse flex-col whitespace-pre-wrap border border-y border-b border-table-border p-table-cell-padding md:table-cell md:border-b-0 md:border-r md:border-l-transparent md:last:border-r-transparent ${className}`}>
+                        {exposeAside ? (<RowAside>
+                                <Aside col={col} row={row} rowIndex={index}/>
+                            </RowAside>) : null}
+                        <span className="text-typography-sm block font-bold leading-tight md:hidden">{col.thead}</span>
+                        <span className="relative">
+                            {loading ? (SkeletonCell) : Component ? (<Fragment>
+                                    <Component row={row} matrix={matrix} col={col} rowIndex={index} value={value}/>
+                                </Fragment>) : (<Fragment>{Is.nil(value) ? "" : value}</Fragment>)}
+                        </span>
+                    </td>);
+        })}
+        </Fragment>);
+};

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

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

package/dist/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,KAA6B,MAAM,OAAO,CAAC;AAGlD,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAGzC,OAAO,EAAE,GAAG,EAAY,kBAAkB,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAErF,KAAK,KAAK,CAAC,CAAC,SAAS,GAAG,IAAI,MAAM,CAAC,SAAS,MAAM,CAAC,SAAS,MAAM,GAAG,CAAC,GAAG,KAAK,CAAC;AAE/E,aAAK,KAAK;IACN,GAAG,QAAQ;IACX,IAAI,SAAS;IACb,SAAS,cAAc;CAC1B;AAED,MAAM,MAAM,MAAM,CAAC,CAAC,SAAS,GAAG,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;AAY/F,eAAO,MAAM,SAAS,GAAI,CAAC,SAAS,GAAG,EAAE,OAAO,CAAC,EAAE,EAAE,QAAQ,MAAM,CAAC,CAAC,CAAC,EAAE,QAGvE,CAAC;AAEF,KAAK,KAAK,CAAC,CAAC,SAAS,GAAG,IAAI,kBAAkB,CAC1C,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,GAAG,EAAE,OAAO,KAAK,CAAC,CAAC,CAAC,sBA0ElD,CAAC;AAEF,KAAK,eAAe,CAAC,CAAC,SAAS,GAAG,IAAI,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,SAAS,GAAG,YAAY,CAAC,GAAG;IAAE,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,CAAA;CAAE,CAAC;AAE/G,eAAO,MAAM,UAAU,GAAI,CAAC,SAAS,GAAG,EAAE,OAAO,eAAe,CAAC,CAAC,CAAC,sBAkClE,CAAC"}

package/dist/components/table/sort.jsx

@@ -0,0 +1,109 @@
+"use client";
+import { SortAscendingIcon, SortDescendingIcon, CaretUpDownIcon, PlusIcon, TrashIcon } from "@phosphor-icons/react";
+import React, { Fragment, useState } from "react";
+import { useTranslations } from "../../hooks/use-translations";
+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.sort(createSorterFn(fields));
+    return array;
+};
+const createSorter = (col, label, order) => ({
+    label,
+    id: uuid(),
+    type: order,
+    value: col.id,
+});
+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 ? { ...x, value: value } : x)));
+    };
+    const onSortOrderType = (id) => (e) => {
+        const type = e.target.value;
+        props.set((prev) => prev.map((x) => (x.id === id ? { ...x, type: type } : x)));
+    };
+    const onDelete = (e) => {
+        const id = e.currentTarget.dataset.id || "";
+        props.set((prev) => prev.filter((x) => x.id !== id));
+    };
+    return (<Fragment>
+            <Dropdown title={translation.tableSortDropdownTitle} trigger={<span className="flex items-center gap-table-inline-gap-tight proportional-nums">
+                        <CaretUpDownIcon size={14}/>
+                        {translation.tableSortOrderByLabel} {props.sorters.length === 0 ? "" : ` (${props.sorters.length})`}
+                    </span>}>
+                <ul className="mt-table-groups-mt space-y-2">
+                    {props.sorters.map((sorter) => {
+            return (<li key={`sorter-select-${sorter.id}`} className="flex flex-nowrap gap-3">
+                                <Select options={props.options} value={sorter.value} onChange={onSetSorter(sorter.id)} title={translation.tableSortOrderInputTitle} placeholder={translation.tableSortOrderInputPlaceholder}/>
+                                <Select onChange={onSortOrderType(sorter.id)} value={sorter.type} options={orderOptions} title={translation.tableSortTypeInputTitle} placeholder={translation.tableSortTypeInputPlaceholder}/>
+                                <button className="mt-table-groups-mt" data-id={sorter.id} onClick={onDelete}>
+                                    <TrashIcon className="text-danger" size={14}/>
+                                </button>
+                            </li>);
+        })}
+                    <li>
+                        <button type="button" onClick={onAddSorter} className="flex items-center gap-table-inline-gap-tight text-primary">
+                            <PlusIcon size={14}/> {translation.tableSortAddButton}
+                        </button>
+                    </li>
+                </ul>
+            </Dropdown>
+        </Fragment>);
+};
+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 = () => {
+        const next = status === Order.Undefined ? Order.Asc : status === Order.Asc ? Order.Desc : Order.Undefined;
+        setStatus(next);
+        props.setSorters((prev) => {
+            if (next === 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, next, next);
+            if (findIndex === -1)
+                return [...prev, sorter];
+            prev[findIndex] = sorter;
+            return [...prev];
+        });
+    };
+    const labelId = `${props.col.id}-sorter-id`;
+    const label = getLabel(props.col);
+    return (<button aria-labelledby={labelId} className="isolate flex items-center" onClick={onClick} type="button">
+            <span id={labelId} className="sr-only">
+                {translations.tableSortDropdownTitle} {label}
+            </span>
+            {status === Order.Asc ? <SortAscendingIcon size={14}/> : null}
+            {status === Order.Desc ? <SortDescendingIcon size={14}/> : null}
+            {status === Order.Undefined ? <CaretUpDownIcon size={14}/> : null}
+        </button>);
+};

package/dist/components/table/table-lib.d.ts

@@ -0,0 +1,135 @@
+import React from "react";
+import { AllPaths } from "sidekicker";
+import { Any, POJO, SetState } from "../../types";
+import { OptionProps } from "../form/select";
+import { FilterConfig } from "./filter";
+import { GroupItem } from "./group";
+import { Sorter } from "./sort";
+export declare const getLabel: <T extends POJO>(col: Col<T>) => string | number | bigint | boolean | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined>;
+export type TableConfiguration<T extends POJO, M extends POJO = Any> = M & {
+    cols: Col<T>[];
+    options: OptionProps[];
+};
+export declare const createOptionCols: <T extends POJO>(cols: Col<T>[]) => OptionProps[];
+export declare enum ColType {
+    Boolean = "boolean",
+    Number = "number",
+    Select = "select",
+    Text = "text"
+}
+export declare const valueFromType: (input: HTMLInputElement) => string | number;
+type THead = React.ReactElement | React.ReactNode;
+export type ColMatrix = `${number},${number}`;
+type ParsePath<path, output extends string[] = [], currentChunk extends string = ""> = path extends number ? [`${path}`] : path extends `${infer first}${infer rest}` ? first extends "." | "[" | "]" ? ParsePath<rest, [...output, ...(currentChunk extends "" ? [] : [currentChunk])], ""> : ParsePath<rest, output, `${currentChunk}${first}`> : [...output, ...(currentChunk extends "" ? [] : [currentChunk])];
+type RecursiveGet<Obj, pathList> = Obj extends any ? pathList extends [infer first, ...infer rest] ? first extends keyof Obj ? RecursiveGet<Obj[first], rest> : [first, Obj] extends [`${number}` | "number", readonly any[]] ? RecursiveGet<Extract<Obj, any[]>[number], rest> : undefined : Obj : never;
+type GetFromPath<Obj, path> = RecursiveGet<Obj, ParsePath<path>>;
+export type CellAsideElement<T extends POJO> = {
+    row: T;
+    rowIndex: number;
+    col: ColOptions<T, AllPaths<T>>;
+};
+export type CellPropsElement<T extends POJO, K extends AllPaths<T>> = {
+    row: T;
+    value: GetFromPath<T, K>;
+    rowIndex: number;
+    matrix: ColMatrix;
+    col: ColOptions<T, K> & {
+        id: K;
+        thead: THead;
+    };
+};
+type ColOptions<T extends POJO, K extends AllPaths<T>> = Partial<{
+    type: ColType;
+    allowSort: boolean;
+    headerLabel: string;
+    allowFilter: boolean;
+    Element: React.FC<CellPropsElement<T, K>>;
+    thProps: React.HTMLAttributes<HTMLTableCellElement>;
+    cellProps: React.HTMLAttributes<HTMLTableCellElement>;
+}>;
+export type ColConstructor<T extends POJO> = {
+    getAll: () => Col<T>[];
+    remove: <K extends AllPaths<T>>(id: K) => void;
+    filter: (c: (c: Col<T>) => boolean) => Col<T>[];
+    add: <K extends AllPaths<T>>(id: K, thead: THead, props?: ColOptions<T, K>) => void;
+};
+declare const cols: <T extends POJO>() => <K extends AllPaths<T>>(id: K, thead: THead, options: ColOptions<T, K>) => {
+    id: K;
+    thead: THead;
+    type?: ColType | undefined;
+    allowSort?: boolean | undefined;
+    headerLabel?: string | undefined;
+    allowFilter?: boolean | undefined;
+    Element?: React.FC<CellPropsElement<T, K>> | undefined;
+    thProps?: React.HTMLAttributes<HTMLTableCellElement> | undefined;
+    cellProps?: React.HTMLAttributes<HTMLTableCellElement> | undefined;
+};
+export type Col<T extends POJO> = ReturnType<ReturnType<typeof cols<T>>>;
+export type TablePagination = {
+    size: number;
+    pages: number;
+    current: number;
+    hasNext: boolean;
+    sizes?: number[];
+    totalItems: number;
+    hasPrevious: boolean;
+    onChangeSize?: (size: number) => void;
+    asLink?: React.FC<React.PropsWithChildren<{
+        href: number | "previous" | "next";
+        className: string;
+    }>>;
+};
+export type TableGetters<T extends POJO> = {
+    rows: T[];
+    cols: Col<T>[];
+    sorters: Sorter<T>[];
+    groups: GroupItem<T>[];
+    filters: FilterConfig<T>[];
+    pagination: TablePagination | null;
+};
+type TableSetters<T extends POJO> = {
+    setCols: SetState<Col<T>[]>;
+    setSorters: SetState<Sorter<T>[]>;
+    setGroups: SetState<GroupItem<T>[]>;
+    setFilters: SetState<FilterConfig<T>[]>;
+};
+export type TableOperationProps<T extends POJO> = TableConfiguration<T, TableSetters<T> & TableGetters<T> & {
+    set?: (v: TableGetters<T>) => void;
+} & {
+    inlineSorter: boolean;
+    inlineFilter: boolean;
+}>;
+export declare const createColumns: <T extends POJO>(callback: (o: ColConstructor<T>) => void) => {
+    id: AllPaths<T, never>;
+    thead: THead;
+    type?: ColType | undefined;
+    allowSort?: boolean | undefined;
+    headerLabel?: string | undefined;
+    allowFilter?: boolean | undefined;
+    Element?: React.FC<CellPropsElement<T, AllPaths<T, never>>> | undefined;
+    thProps?: React.HTMLAttributes<HTMLTableCellElement> | undefined;
+    cellProps?: React.HTMLAttributes<HTMLTableCellElement> | undefined;
+}[];
+export declare const useTablePreferences: <T extends POJO>(name: string, cols: Col<T>[], options?: Partial<TableGetters<T>>) => {
+    name: string;
+    set: (getters: TableGetters<T>) => void;
+    cols: {
+        id: AllPaths<T, never>;
+        thead: THead;
+        type?: ColType | undefined;
+        allowSort?: boolean | undefined;
+        headerLabel?: string | undefined;
+        allowFilter?: boolean | undefined;
+        Element?: React.FC<CellPropsElement<T, AllPaths<T, never>>> | undefined;
+        thProps?: React.HTMLAttributes<HTMLTableCellElement> | undefined;
+        cellProps?: React.HTMLAttributes<HTMLTableCellElement> | undefined;
+    }[];
+    sorters: Sorter<T>[];
+    groups: GroupItem<T>[];
+    filters: FilterConfig<T>[];
+    pagination: TablePagination | null;
+};
+export declare const useWidthControl: <T extends object>(reorder: (c: Col<T>[]) => void) => readonly [React.RefObject<HTMLTableRowElement | null>, (cols: Col<T>[]) => void];
+export declare const getModalScrollerRef: () => HTMLElement | undefined;
+export {};
+//# sourceMappingURL=table-lib.d.ts.map

package/dist/components/table/table-lib.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-lib.d.ts","sourceRoot":"","sources":["../../../src/components/table/table-lib.ts"],"names":[],"mappings":"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"}