@g4rcez/components 5.0.0 → 5.0.1

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

@@ -1,102 +0,0 @@
-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/src/components/table/metadata.d.ts

@@ -1,4 +0,0 @@
-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/src/components/table/metadata.d.ts.map

@@ -1 +0,0 @@
-{"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/src/components/table/metadata.jsx

@@ -1,36 +0,0 @@
-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/src/components/table/pagination.d.ts

@@ -1,5 +0,0 @@
-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/src/components/table/pagination.d.ts.map

@@ -1 +0,0 @@
-{"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/src/components/table/pagination.jsx

@@ -1,74 +0,0 @@
-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/src/components/table/row.d.ts

@@ -1,11 +0,0 @@
-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/src/components/table/row.d.ts.map

@@ -1 +0,0 @@
-{"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/src/components/table/row.jsx

@@ -1,49 +0,0 @@
-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/src/components/table/sort.d.ts

@@ -1,28 +0,0 @@
-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/src/components/table/sort.d.ts.map

@@ -1 +0,0 @@
-{"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/src/components/table/sort.jsx

@@ -1,109 +0,0 @@
-"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/src/components/table/table-lib.d.ts

@@ -1,135 +0,0 @@
-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/src/components/table/table-lib.d.ts.map

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