@g4rcez/components 4.1.1 → 4.1.3

package/dist/components/table/group.jsx

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

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

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

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

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

package/dist/components/table/index.jsx

@@ -0,0 +1,60 @@
+"use client";
+import { AnimatePresence } from "motion/react";
+import { useEffect, useMemo } from "react";
+import { useReducer } from "use-typed-reducer";
+import { useTweaks } from "../../hooks/use-tweaks";
+import { InnerTable } from "./inner-table";
+import { Metadata } from "./metadata";
+import { createOptionCols } from "./table-lib";
+import { TableProvider } from "./table.context";
+const dispatcherFun = (prev, setter) => typeof setter === "function" ? setter(prev) : setter;
+const compareAndExec = (prev, state, exec) => (prev === state ? undefined : exec?.(state));
+export const Table = (props) => {
+    const tweaks = useTweaks();
+    const contextState = useMemo(() => ({
+        sticky: props.sticky === undefined ? (tweaks.table.sticky ?? undefined) : (props.sticky ?? undefined),
+    }), [props.sticky, tweaks.table.sticky]);
+    const operations = props.operations ?? tweaks.table.operations ?? true;
+    const optionCols = useMemo(() => createOptionCols(props.cols), [props.cols]);
+    const [state, dispatch] = useReducer({
+        cols: props.cols,
+        sorters: (props.sorters ?? []),
+        groups: (props.groups ?? []),
+        filters: (props.filters ?? []),
+    }, (get) => {
+        const create = (key) => (arg) => {
+            const state = get.state();
+            return { ...state, [key]: dispatcherFun(state[key], arg) };
+        };
+        return {
+            cols: create("cols"),
+            sorters: create("sorters"),
+            groups: create("groups"),
+            filters: create("filters"),
+        };
+    }, {
+        postMiddleware: [
+            (state, prev) => {
+                props.set?.(state);
+                compareAndExec(prev?.filters ?? [], state.filters ?? [], props.setFilters);
+                compareAndExec(prev?.sorters ?? [], state.sorters ?? [], props.setSorters);
+                compareAndExec(prev?.groups ?? [], state.groups ?? [], props.setGroups);
+                compareAndExec(prev?.cols ?? [], state.cols ?? [], props.setCols);
+                return state;
+            },
+        ],
+    });
+    useEffect(() => {
+        dispatch.cols(props.cols);
+    }, [props.cols]);
+    return (<TableProvider value={contextState}>
+            <AnimatePresence propagate initial={false}>
+                {operations ? (<Metadata cols={state.cols} rows={props.rows} options={optionCols} groups={state.groups} filters={state.filters} setCols={dispatch.cols} sorters={state.sorters} setGroups={dispatch.groups} setFilters={dispatch.filters} setSorters={dispatch.sorters} pagination={props.pagination ?? null} inlineFilter={props.inlineFilter ?? true} inlineSorter={props.inlineSorter ?? true}/>) : null}
+                {state.groups.length === 0 ? (<InnerTable {...props} index={0} cols={state.cols} options={optionCols} groups={state.groups} filters={state.filters} optionCols={optionCols} setCols={dispatch.cols} sorters={state.sorters} setGroups={dispatch.groups} setFilters={dispatch.filters} setSorters={dispatch.sorters} onScrollEnd={props.onScrollEnd} pagination={props.pagination ?? null} inlineFilter={props.inlineFilter ?? true} inlineSorter={props.inlineSorter ?? true}/>) : (<div className="flex flex-wrap gap-4">
+                        {state.groups.map((group, index) => (<div className="min-w-full" key={`group-${group.groupId}`}>
+                                <InnerTable {...props} group={group} index={index} cols={state.cols} pagination={null} rows={group.rows} options={optionCols} groups={state.groups} filters={state.filters} optionCols={optionCols} setCols={dispatch.cols} sorters={state.sorters} setGroups={dispatch.groups} setFilters={dispatch.filters} setSorters={dispatch.sorters} onScrollEnd={props.onScrollEnd} inlineFilter={props.inlineFilter ?? true} inlineSorter={props.inlineSorter ?? true}/>
+                            </div>))}
+                    </div>)}
+            </AnimatePresence>
+        </TableProvider>);
+};

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

@@ -0,0 +1,29 @@
+import React, { ComponentProps, HTMLAttributes } from "react";
+import { OptionProps } from "../form/select";
+import { FilterConfig } from "./filter";
+import { GroupItem } from "./group";
+import { Sorter } from "./sort";
+import { CellAsideElement, Col, TableOperationProps } from "./table-lib";
+import { Any } from "../../types";
+export type InnerTableProps<T extends Any> = HTMLAttributes<HTMLTableElement> & TableOperationProps<T> & {
+    rows: T[];
+    index: number;
+    cols: Col<T>[];
+    border?: boolean;
+    loading?: boolean;
+    group?: GroupItem<T>;
+    useControl?: boolean;
+    loadingMore?: boolean;
+    sorters?: Sorter<T>[];
+    showMetadata?: boolean;
+    groups?: GroupItem<T>[];
+    onScrollEnd?: () => void;
+    optionCols: OptionProps[];
+    filters?: FilterConfig<T>[];
+    Aside?: React.FC<CellAsideElement<T>>;
+    getScrollRef?: () => HTMLElement | undefined;
+    getRowProps?: (_: T) => ComponentProps<"tr">;
+    setGroups: React.Dispatch<React.SetStateAction<GroupItem<T>[]>>;
+};
+export declare const InnerTable: <T extends Record<string, unknown>>({ cols, filters, setCols, sorters, setFilters, setSorters, onScrollEnd, getScrollRef, pagination, useControl, ...props }: InnerTableProps<T>) => React.JSX.Element;
+//# sourceMappingURL=inner-table.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"inner-table.d.ts","sourceRoot":"","sources":["../../../src/components/table/inner-table.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,EAAE,cAAc,EAA2B,cAAc,EAAwC,MAAM,OAAO,CAAC;AAM7H,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,EAAE,gBAAgB,EAAE,GAAG,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAGzE,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAYlC,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,GAAG,IAAI,cAAc,CAAC,gBAAgB,CAAC,GACzE,mBAAmB,CAAC,CAAC,CAAC,GAAG;IACrB,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,MAAM,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,UAAU,EAAE,WAAW,EAAE,CAAC;IAC1B,OAAO,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IAC5B,KAAK,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC;IACtC,YAAY,CAAC,EAAE,MAAM,WAAW,GAAG,SAAS,CAAC;IAC7C,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,cAAc,CAAC,IAAI,CAAC,CAAC;IAC7C,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;CACnE,CAAC;AAmFN,eAAO,MAAM,UAAU,GAAI,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,0HAY3D,eAAe,CAAC,CAAC,CAAC,sBA0EpB,CAAC"}

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-1 pb-4 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-14 bg-card-background px-2">
+                        <span className="block h-2 w-full animate-pulse rounded 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-48 w-full items-center justify-center px-2">{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-lg 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,gCAwCpE,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-1 min-w-full">
+        <div className="flex min-w-full flex-wrap items-center justify-between gap-x-4 gap-y-1">
+            <div className="items-centeend flex w-fit gap-4 whitespace-nowrap py-2">
+                <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-4 md:justify-end">
+                {props.filters.map((x) => (<li key={`filter-table-${x.id}`} className="flex items-center gap-1 rounded-xl border border-card-border px-4 py-0.5">
+                        <span>
+                            <span className="mr-2 inline-block aspect-square size-3 rounded-full bg-primary" aria-hidden="true"/>
+                            {x.label} {x.operation.label.toLowerCase()}:
+                        </span>
+                        <div className="relative w-min min-w-[1ch]">
+                            <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.current, pagination.pages]);
+    const hasNext = pagination.current < pagination.pages;
+    const Link = pagination.asLink ?? "button";
+    return (<footer className="flex flex-wrap items-center justify-center gap-4 border-t-muted p-3 text-sm 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-2">
+                    {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-3 py-1 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-[var(--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="block text-sm 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-1 proportional-nums">
+                        <CaretUpDownIcon size={14}/>
+                        {translation.tableSortOrderByLabel} {props.sorters.length === 0 ? "" : ` (${props.sorters.length})`}
+                    </span>}>
+                <ul className="mt-4 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-4" 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-1 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>);
+};