@1771technologies/lytenyte-pro 1.0.12-dev.1 → 1.0.12-dev.2

package/dist/rows/rows-container.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useGridRoot } from "../context.js";
+import { fastDeepMemo } from "@1771technologies/lytenyte-react-hooks";
+import { RowsContainerReact } from "@1771technologies/lytenyte-shared";
+export const RowsContainer = fastDeepMemo(forwardRef(function Rows(props, forwarded) {
+    const ctx = useGridRoot().grid;
+    return (_jsx(RowsContainerReact, { ...props, ref: forwarded, height: ctx.state.heightTotal.useValue(), width: ctx.state.widthTotal.useValue(), viewportHeight: ctx.state.viewportHeightInner.useValue(), viewportWidth: ctx.state.viewportWidthInner.useValue() }));
+}));

package/dist/rows/rows-sections.d.ts

@@ -0,0 +1,3 @@
+export declare const RowsTop: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const RowsCenter: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const RowsBottom: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/rows/rows-sections.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { fastDeepMemo } from "@1771technologies/lytenyte-react-hooks";
+import { useGridRoot } from "../context.js";
+import { NativeScroller } from "./scrollers/native-scroller.js";
+import { RowsBottomReact, RowsCenterReact, RowsTopReact } from "@1771technologies/lytenyte-shared";
+import { CellSelectionBottom, CellSelectionCenter, CellSelectionTop, } from "../cell-selection/cell-selection-containers.js";
+export const RowsTop = fastDeepMemo(forwardRef(function RowsTop(props, forwarded) {
+    const cx = useGridRoot().grid;
+    const view = cx.view.useValue().rows;
+    const topCount = cx.state.rowDataStore.rowTopCount.useValue();
+    return (_jsxs(RowsTopReact, { ...props, rowFirst: topCount || -1, rowLast: topCount, ref: forwarded, top: cx.internal.headerHeightTotal.useValue(), height: view.rowTopTotalHeight, children: [props.children, _jsx(CellSelectionTop, {})] }));
+}));
+export const RowsCenter = fastDeepMemo(forwardRef(function RowsCenter({ children, ...props }, forwarded) {
+    const cx = useGridRoot().grid;
+    const view = cx.view.useValue().rows;
+    const rowCenterCount = cx.state.rowDataStore.rowCenterCount.useValue();
+    return (_jsx(RowsCenterReact, { ...props, ref: forwarded, rowFirst: cx.state.rowDataStore.rowTopCount.useValue(), rowLast: rowCenterCount + cx.state.rowDataStore.rowTopCount.useValue(), height: view.rowCenterTotalHeight, pinSectionHeights: view.rowBottomTotalHeight + view.rowTopTotalHeight, children: _jsxs(NativeScroller, { children: [_jsx(CellSelectionCenter, {}), children] }) }));
+}));
+export const RowsBottom = fastDeepMemo(forwardRef(function RowsBottom(props, forwarded) {
+    const cx = useGridRoot().grid;
+    const view = cx.view.useValue().rows;
+    const rowCenterCount = cx.state.rowDataStore.rowCenterCount.useValue();
+    const rowTopCount = cx.state.rowDataStore.rowTopCount.useValue();
+    const rowBottomCount = cx.state.rowDataStore.rowBottomCount.useValue();
+    return (_jsxs(RowsBottomReact, { ...props, ref: forwarded, rowFirst: rowCenterCount + rowTopCount, rowLast: rowCenterCount + rowBottomCount + rowTopCount, height: view.rowBottomTotalHeight, children: [_jsx(CellSelectionBottom, {}), props.children] }));
+}));

package/dist/rows/scrollers/native-scroller.d.ts

@@ -0,0 +1,2 @@
+import type { PropsWithChildren } from "react";
+export declare function NativeScroller(props: PropsWithChildren): import("react/jsx-runtime").JSX.Element;

package/dist/rows/scrollers/native-scroller.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function NativeScroller(props) {
+    return _jsx("div", { role: "presentation", children: props.children });
+}

package/dist/sort-manager/+types.d.ts

@@ -0,0 +1,13 @@
+import type { SortModelItem } from "../+types";
+export interface SortItem {
+    readonly isCustom: boolean;
+    readonly columnId?: string;
+    readonly label?: string;
+    readonly sortOn?: "values" | "values_absolute" | "values_accented" | "values_nulls_first" | "values_absolute_nulls_first" | "values_accented_nulls_first" | "values_absolute_accented_nulls_first";
+    readonly sortDirection: "ascending" | "descending";
+    readonly originalSort?: SortModelItem<any>;
+}
+export interface Option {
+    readonly label: string;
+    readonly value: string;
+}

package/dist/sort-manager/+types.js

@@ -0,0 +1 @@
+export {};

package/dist/sort-manager/context.d.ts

@@ -0,0 +1,14 @@
+import { type Dispatch, type SetStateAction } from "react";
+import type { SortItem } from "./+types.js";
+import type { SortRowItem } from "./hooks/use-sort-row-item.js";
+import type { Grid } from "../+types.js";
+export interface SortManagerContext {
+    readonly grid: Grid<any>;
+    readonly sortItems: SortItem[];
+    readonly setSortItems: Dispatch<SetStateAction<SortItem[]>>;
+    readonly mode: boolean;
+}
+export declare const context: import("react").Context<SortManagerContext>;
+export declare const useSortManagerCtx: () => SortManagerContext;
+export declare const rowContext: import("react").Context<SortRowItem>;
+export declare const useSortRowCtx: () => SortRowItem;

package/dist/sort-manager/context.js

@@ -0,0 +1,5 @@
+import { createContext, useContext } from "react";
+export const context = createContext({});
+export const useSortManagerCtx = () => useContext(context);
+export const rowContext = createContext({});
+export const useSortRowCtx = () => useContext(rowContext);

package/dist/sort-manager/hooks/use-sort-manager.d.ts

@@ -0,0 +1,15 @@
+import type { Grid } from "../../+types";
+import type { SortItem } from "../+types.js";
+export interface UseSortManagerArgs<T> {
+    readonly grid: Grid<T>;
+    readonly pivotMode?: boolean;
+}
+export declare function useSortManager<T>({ grid, pivotMode }: UseSortManagerArgs<T>): {
+    rootProps: {
+        sortItems: SortItem[];
+        setSortItems: import("react").Dispatch<import("react").SetStateAction<SortItem[]>>;
+        mode: boolean;
+        grid: Grid<T>;
+    };
+    rows: import("./use-sort-row-item.js").SortRowItem[];
+};

package/dist/sort-manager/hooks/use-sort-manager.js

@@ -0,0 +1,56 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { sortModelToSortItems } from "../utils/sort-model-to-sort-items.js";
+import { itemsWithIdToMap } from "@1771technologies/lytenyte-js-utils";
+import { useSortRowItems } from "./use-sort-row-item.js";
+import { useEvent } from "@1771technologies/lytenyte-react-hooks";
+export function useSortManager({ grid, pivotMode }) {
+    const statePivotMode = grid.state.columnPivotMode.useValue();
+    const mode = pivotMode ?? statePivotMode;
+    const cb = useCallback(() => {
+        if (mode) {
+            const pivotSortModel = grid.state.columnPivotModel.get().sorts;
+            const lookup = itemsWithIdToMap(grid.state.columnPivotColumns.get());
+            const model = sortModelToSortItems(pivotSortModel, lookup);
+            if (!model.length)
+                return [{ sortDirection: "ascending", isCustom: false }];
+            return model;
+        }
+        else {
+            const sortModel = grid.state.sortModel.get();
+            const lookup = itemsWithIdToMap(grid.state.columns.get());
+            const model = sortModelToSortItems(sortModel, lookup);
+            if (!model.length)
+                return [{ sortDirection: "ascending", isCustom: false }];
+            return model;
+        }
+    }, [
+        grid.state.columnPivotColumns,
+        grid.state.columnPivotModel,
+        grid.state.columns,
+        grid.state.sortModel,
+        mode,
+    ]);
+    const fn = useEvent(() => cb());
+    const [sortItems, setSortItems] = useState(() => {
+        return cb();
+    });
+    const prevMode = useRef(mode);
+    useEffect(() => {
+        if (prevMode.current !== mode) {
+            setSortItems(fn());
+            prevMode.current = mode;
+        }
+        if (mode) {
+            return grid.state.columnPivotModel.watch(() => {
+                setSortItems(fn());
+            });
+        }
+        else {
+            return grid.state.sortModel.watch(() => {
+                setSortItems(fn());
+            });
+        }
+    }, [fn, grid.state.columnPivotModel, grid.state.sortModel, mode]);
+    const sortRows = useSortRowItems(sortItems, setSortItems, grid, mode);
+    return { rootProps: { sortItems, setSortItems, mode, grid }, rows: sortRows };
+}

package/dist/sort-manager/hooks/use-sort-row-item.d.ts

@@ -0,0 +1,51 @@
+import { type Dispatch, type SetStateAction } from "react";
+import type { SortItem } from "../+types.js";
+import type { Grid } from "../../+types";
+export interface SortRowItem {
+    readonly isCustom: boolean;
+    readonly columnItem: {
+        value: string;
+        label: string;
+    } | null;
+    readonly index: number;
+    readonly columnOptions: {
+        value: string;
+        label: string;
+    }[];
+    readonly columnSelected: {
+        value: string;
+        label: string;
+    } | null;
+    readonly columnOnSelect: (c: {
+        value: string;
+        label: string;
+    } | null) => void;
+    readonly sortOptions: {
+        value: string;
+        label: string;
+    }[];
+    readonly sortSelected: {
+        value: string;
+        label: string;
+    } | null;
+    readonly sortOnSelect: (c: {
+        value: string;
+        label: string;
+    } | null) => void;
+    readonly sortDirectionOptions: {
+        value: string;
+        label: string;
+    }[];
+    readonly sortDirectionSelected: {
+        value: string;
+        label: string;
+    } | null;
+    readonly sortDirectionOnSelect: (c: {
+        value: string;
+        label: string;
+    } | null) => void;
+    readonly canAdd: boolean;
+    readonly onAdd: () => void;
+    readonly onDelete: () => void;
+}
+export declare function useSortRowItems(sortItems: SortItem[], setSortItems: Dispatch<SetStateAction<SortItem[]>>, grid: Grid<any>, pivotMode: boolean): SortRowItem[];

package/dist/sort-manager/hooks/use-sort-row-item.js

@@ -0,0 +1,145 @@
+import { useMemo } from "react";
+import { useSortableColumnItems } from "./use-sortable-column-items.js";
+import { itemsWithIdToMap } from "@1771technologies/lytenyte-js-utils";
+export function useSortRowItems(sortItems, setSortItems, grid, pivotMode) {
+    const columnItems = useSortableColumnItems(grid, pivotMode);
+    const pivotColumns = grid.state.columnPivotColumns.useValue();
+    const columns = grid.state.columns.useValue();
+    const lookup = useMemo(() => {
+        return itemsWithIdToMap(pivotMode ? pivotColumns : columns);
+    }, [columns, pivotColumns, pivotMode]);
+    const unselectedSortedColumns = useMemo(() => {
+        const selected = new Set(sortItems.map((c) => c.columnId).filter((c) => c != null));
+        return columnItems.filter((c) => !selected.has(c.value));
+    }, [columnItems, sortItems]);
+    const sortRows = useMemo(() => {
+        return sortItems.map((item, i) => {
+            const columnItem = columnItems.find((s) => item.columnId === s.value) ?? null;
+            const columnOptions = columnItem
+                ? [columnItem, ...unselectedSortedColumns]
+                : unselectedSortedColumns;
+            // Handle select
+            const columnOnSelect = (column) => {
+                setSortItems((prev) => {
+                    const v = { ...prev[i] };
+                    v.columnId = column?.value;
+                    const next = [...prev];
+                    next.splice(i, 1, v);
+                    return next;
+                });
+            };
+            const columnSelected = columnItem;
+            const column = lookup.get(item.columnId);
+            let sortOptions;
+            if (!column)
+                sortOptions = [];
+            else if (column?.type === "number")
+                sortOptions = sortValuesForNumber;
+            else if (column?.type === "date")
+                sortOptions = sortValuesForDateAndDateTime;
+            else
+                sortOptions = sortValuesString;
+            const sortSelected = sortOptions.find((v) => v.value === item.sortOn) ?? null;
+            const sortOnSelect = (sortOn) => {
+                if (!sortOn)
+                    return;
+                setSortItems((prev) => {
+                    const v = { ...prev[i] };
+                    v.sortOn = sortOn.value;
+                    const next = [...prev];
+                    next.splice(i, 1, v);
+                    return next;
+                });
+            };
+            const sortDirectionOptions = sortDirectionValues;
+            const sortDirectionSelected = item.sortDirection === "ascending"
+                ? { label: "Asc", value: "ascending" }
+                : { label: "Desc", value: "descending" };
+            const sortDirectionOnSelect = (item) => {
+                if (!item)
+                    return;
+                setSortItems((prev) => {
+                    const v = { ...prev[i] };
+                    v.sortDirection = item.value;
+                    const next = [...prev];
+                    next.splice(i, 1, v);
+                    return next;
+                });
+            };
+            const onDelete = () => {
+                setSortItems((prev) => {
+                    const next = [...prev];
+                    next.splice(i, 1);
+                    if (!next.length) {
+                        return [{ sortDirection: "ascending", isCustom: false }];
+                    }
+                    return next;
+                });
+            };
+            const onAdd = () => {
+                setSortItems((prev) => {
+                    const next = [...prev];
+                    next.splice(i + 1, 0, { sortDirection: "ascending", isCustom: false });
+                    return next;
+                });
+            };
+            const maxSortCount = columnItems.length;
+            return {
+                index: i,
+                isCustom: item.isCustom,
+                columnItem,
+                columnOptions,
+                columnSelected,
+                columnOnSelect,
+                sortOptions,
+                sortSelected,
+                sortOnSelect,
+                sortDirectionOptions,
+                sortDirectionSelected,
+                sortDirectionOnSelect,
+                canAdd: maxSortCount > sortItems.length,
+                onAdd,
+                onDelete,
+            };
+        });
+    }, [columnItems, lookup, setSortItems, sortItems, unselectedSortedColumns]);
+    return sortRows;
+}
+const sortValuesForNumber = [
+    { label: "Values", value: "values" },
+    { label: "Absolute", value: "values_absolute" },
+    { label: "Nulls First", value: "values_nulls_first" },
+    { label: "Nulls First, Absolute", value: "values_nulls_first_absolute" },
+];
+const sortValuesForDateAndDateTime = [
+    { label: "Values", value: "values" },
+    { label: "Nulls First", value: "values_nulls_first" },
+];
+const sortValuesString = [
+    { label: "Values", value: "values" },
+    { label: "Insensitive", value: "values_insensitive" },
+    { label: "Insensitive, Ignore Punctuation", value: "values_insensitive_ignore" },
+    { label: "Insensitive, Trim", value: "values_insensitive_trim" },
+    { label: "Insensitive, Ignore Punctuation, Trim", value: "values_insensitive_ignore_trim" },
+    { label: "Ignore Punctuation", value: "values_ignore" },
+    { label: "Ignore Punctuation, Trim", value: "values_ignore_trim" },
+    { label: "Trim Whitespace", value: "values_trim" },
+    { label: "Nulls First", value: "values_nulls_first" },
+    { label: "Nulls First, Insensitive", value: "values_nulls_first_insensitive" },
+    { label: "Nulls First, Trim", value: "values_nulls_first_trim" },
+    { label: "Nulls First, Ignore Punctuation", value: "values_nulls_first_ignore" },
+    { label: "Nulls First, Insensitive, Trim", value: "values_nulls_first_insensitive_trim" },
+    {
+        label: "Nulls First, Insensitive, Ignore Punctuation",
+        value: "values_nulls_first_insensitive_ignore",
+    },
+    {
+        label: "Nulls First, Insensitive, Ignore Punctuation, Trim",
+        value: "values_nulls_first_insensitive_ignore_trim",
+    },
+    { label: "Nulls First, Ignore Punctuation, Trim", value: "values_nulls_first_ignore_trim" },
+];
+const sortDirectionValues = [
+    { label: "Asc", value: "ascending" },
+    { label: "Desc", value: "descending" },
+];

package/dist/sort-manager/hooks/use-sortable-column-items.d.ts

@@ -0,0 +1,5 @@
+import type { Grid } from "../../+types";
+export declare function useSortableColumnItems(grid: Grid<any>, pivotMode: boolean): {
+    label: string;
+    value: string;
+}[];

package/dist/sort-manager/hooks/use-sortable-column-items.js

@@ -0,0 +1,13 @@
+import { useMemo } from "react";
+export function useSortableColumnItems(grid, pivotMode) {
+    const columns = grid.state.columns.useValue();
+    const pivotColumns = grid.state.columnPivotColumns.useValue();
+    const base = grid.state.columnBase.useValue();
+    const candidateColumns = useMemo(() => {
+        const candidates = pivotMode ? pivotColumns : columns;
+        return candidates.filter((c) => c.uiHints?.sortable ?? base.uiHints?.sortable);
+    }, [base.uiHints?.sortable, columns, pivotColumns, pivotMode]);
+    return useMemo(() => {
+        return candidateColumns.map((c) => ({ label: c.name ?? c.id, value: c.id }));
+    }, [candidateColumns]);
+}

package/dist/sort-manager/root.d.ts

@@ -0,0 +1,3 @@
+import { type PropsWithChildren } from "react";
+import { type SortManagerContext } from "./context.js";
+export declare function Root({ sortItems, setSortItems, grid, mode, children, }: PropsWithChildren<SortManagerContext>): import("react/jsx-runtime").JSX.Element;

package/dist/sort-manager/root.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { context } from "./context.js";
+export function Root({ sortItems, setSortItems, grid, mode, children, }) {
+    const value = useMemo(() => {
+        return {
+            sortItems,
+            setSortItems,
+            grid,
+            mode,
+        };
+    }, [grid, mode, setSortItems, sortItems]);
+    return _jsx(context.Provider, { value: value, children: children });
+}

package/dist/sort-manager/sort-add.d.ts

@@ -0,0 +1,8 @@
+import { type SlotComponent } from "@1771technologies/lytenyte-react-hooks";
+export interface SortAddProps {
+    readonly as?: SlotComponent<{
+        onAdd: () => void;
+        disabled: boolean;
+    }>;
+}
+export declare const SortAdd: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & SortAddProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/sort-manager/sort-add.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useSlot } from "@1771technologies/lytenyte-react-hooks";
+import { forwardRef } from "react";
+import { useSortRowCtx } from "./context.js";
+export const SortAdd = forwardRef(function SortAdd({ as: as, ...props }, forwarded) {
+    const row = useSortRowCtx();
+    const renderer = useSlot({
+        props: [typeof as !== "function" ? { onClick: row.onAdd, disabled: !row.canAdd } : {}, props],
+        ref: forwarded,
+        slot: as ?? _jsx("button", { children: "+" }),
+        state: { onAdd: row.onAdd, disabled: !row.canAdd },
+    });
+    return renderer;
+});

package/dist/sort-manager/sort-apply.d.ts

@@ -0,0 +1,7 @@
+import { type SlotComponent } from "@1771technologies/lytenyte-react-hooks";
+export interface SortApplyProps {
+    readonly as?: SlotComponent<{
+        onApply: () => void;
+    }>;
+}
+export declare const SortApply: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & SortApplyProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/sort-manager/sort-apply.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEvent, useSlot } from "@1771technologies/lytenyte-react-hooks";
+import { forwardRef } from "react";
+import { useSortManagerCtx } from "./context.js";
+import { itemsWithIdToMap } from "@1771technologies/lytenyte-js-utils";
+import { sortItemsToSortModel } from "./utils/sort-item-to-sort-model.js";
+export const SortApply = forwardRef(function SortApply({ as, ...props }, forwarded) {
+    const ctx = useSortManagerCtx();
+    const onApply = useEvent(() => {
+        const lookup = itemsWithIdToMap(ctx.mode ? ctx.grid.state.columnPivotColumns.get() : ctx.grid.state.columns.get());
+        const model = sortItemsToSortModel(ctx.sortItems, lookup);
+        if (ctx.mode)
+            ctx.grid.state.columnPivotModel.set((prev) => ({ ...prev, sort: model }));
+        else
+            ctx.grid.state.sortModel.set(model);
+    });
+    const renderer = useSlot({
+        props: [typeof as !== "function" ? { onClick: onApply } : {}, props],
+        ref: forwarded,
+        slot: as ?? _jsx("button", {}),
+        state: { onApply },
+    });
+    return renderer;
+});

package/dist/sort-manager/sort-cancel.d.ts

@@ -0,0 +1,7 @@
+import { type SlotComponent } from "@1771technologies/lytenyte-react-hooks";
+export interface SortCancelProps {
+    readonly as?: SlotComponent<{
+        onCancel: () => void;
+    }>;
+}
+export declare const SortCancel: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & SortCancelProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/sort-manager/sort-cancel.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEvent, useSlot } from "@1771technologies/lytenyte-react-hooks";
+import { forwardRef } from "react";
+import { useSortManagerCtx } from "./context.js";
+import { sortModelToSortItems } from "./utils/sort-model-to-sort-items.js";
+import { itemsWithIdToMap } from "@1771technologies/lytenyte-js-utils";
+export const SortCancel = forwardRef(function SortCancel({ as, ...props }, forwarded) {
+    const ctx = useSortManagerCtx();
+    const onCancel = useEvent(() => {
+        const model = ctx.mode
+            ? ctx.grid.state.columnPivotModel.get().sorts
+            : ctx.grid.state.sortModel.get();
+        const lookup = itemsWithIdToMap(ctx.mode ? ctx.grid.state.columnPivotColumns.get() : ctx.grid.state.columns.get());
+        const state = sortModelToSortItems(model, lookup);
+        if (!state.length)
+            ctx.setSortItems([{ isCustom: false, sortDirection: "ascending" }]);
+        else
+            ctx.setSortItems(state);
+    });
+    const renderer = useSlot({
+        props: [typeof as !== "function" ? { onClick: onCancel } : {}, props],
+        ref: forwarded,
+        slot: as ?? _jsx("button", {}),
+        state: { onCancel },
+    });
+    return renderer;
+});

package/dist/sort-manager/sort-clear.d.ts

@@ -0,0 +1,7 @@
+import { type SlotComponent } from "@1771technologies/lytenyte-react-hooks";
+export interface SortClearProps {
+    readonly as?: SlotComponent<{
+        onClear: () => void;
+    }>;
+}
+export declare const SortClear: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & SortClearProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/sort-manager/sort-clear.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEvent, useSlot } from "@1771technologies/lytenyte-react-hooks";
+import { forwardRef } from "react";
+import { useSortManagerCtx } from "./context.js";
+export const SortClear = forwardRef(function SortClear({ as, ...props }, forwarded) {
+    const ctx = useSortManagerCtx();
+    const onClear = useEvent(() => {
+        if (ctx.mode) {
+            ctx.grid.state.columnPivotModel.set((prev) => ({ ...prev, sorts: [] }));
+        }
+        else {
+            ctx.grid.state.sortModel.set([]);
+        }
+    });
+    const renderer = useSlot({
+        props: [typeof as !== "function" ? { onClick: onClear } : {}, props],
+        ref: forwarded,
+        slot: as ?? _jsx("button", {}),
+        state: { onClear },
+    });
+    return renderer;
+});

package/dist/sort-manager/sort-column-select.d.ts

@@ -0,0 +1,10 @@
+import { type SlotComponent } from "@1771technologies/lytenyte-react-hooks";
+import type { Option } from "./+types";
+export interface SortColumnSelectProps {
+    readonly as?: SlotComponent<{
+        options: Option[];
+        onSelect: (v: Option | null) => void;
+        value: Option | null;
+    }>;
+}
+export declare const SortColumnSelect: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & SortColumnSelectProps, "ref"> & import("react").RefAttributes<HTMLSelectElement>>;

package/dist/sort-manager/sort-column-select.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useSlot } from "@1771technologies/lytenyte-react-hooks";
+import { forwardRef } from "react";
+import { useSortRowCtx } from "./context.js";
+export const SortColumnSelect = forwardRef(function SortColumnSelect({ as, ...props }, forwarded) {
+    const row = useSortRowCtx();
+    const el = (_jsxs("select", { "aria-label": "Select column to sort", value: row.columnItem?.value ?? "", onChange: (e) => {
+            const item = row.columnOptions.find((c) => c.value === e.target.value);
+            row.columnOnSelect(item ?? null);
+        }, children: [_jsx("option", { value: "", children: "Select..." }), row.columnOptions.map((c) => {
+                return (_jsx("option", { value: c.value, children: c.label }, c.value));
+            })] }));
+    const renderer = useSlot({
+        props: [props],
+        ref: forwarded,
+        slot: as ?? el,
+        state: { options: row.columnOptions, onSelect: row.columnOnSelect, value: row.columnSelected },
+    });
+    return renderer;
+});

package/dist/sort-manager/sort-direction-select.d.ts

@@ -0,0 +1,10 @@
+import { type SlotComponent } from "@1771technologies/lytenyte-react-hooks";
+import type { Option } from "./+types";
+export interface SortDirectionSelectProps {
+    readonly as?: SlotComponent<{
+        options: Option[];
+        onSelect: (v: Option | null) => void;
+        value: Option | null;
+    }>;
+}
+export declare const SortDirectionSelect: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & SortDirectionSelectProps, "ref"> & import("react").RefAttributes<HTMLSelectElement>>;

package/dist/sort-manager/sort-direction-select.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useSlot } from "@1771technologies/lytenyte-react-hooks";
+import { forwardRef } from "react";
+import { useSortRowCtx } from "./context.js";
+export const SortDirectionSelect = forwardRef(function SortDirectionSelect({ as, ...props }, forwarded) {
+    const row = useSortRowCtx();
+    const el = (_jsx("select", { "aria-label": "Select sort direction", value: row.sortDirectionSelected?.value ?? "", onChange: (e) => {
+            const item = row.sortDirectionOptions.find((c) => c.value === e.target.value);
+            row.sortDirectionOnSelect(item ?? null);
+        }, children: row.sortDirectionOptions.map((c) => {
+            return (_jsx("option", { value: c.value, children: c.label }, c.value));
+        }) }));
+    const renderer = useSlot({
+        props: [props],
+        ref: forwarded,
+        slot: as ?? el,
+        state: {
+            options: row.sortDirectionOptions,
+            onSelect: row.sortDirectionOnSelect,
+            value: row.sortDirectionSelected,
+        },
+    });
+    return renderer;
+});

package/dist/sort-manager/sort-manager.d.ts

@@ -0,0 +1,16 @@
+import { Root } from "./root.js";
+import { useSortManager } from "./hooks/use-sort-manager.js";
+export declare const SortManager: {
+    Root: typeof Root;
+    Row: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("./sort-row.js").SortRowProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Rows: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    ColumnSelect: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("./sort-column-select.js").SortColumnSelectProps, "ref"> & import("react").RefAttributes<HTMLSelectElement>>;
+    ValueSelect: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("./sort-value-select.js").SortValueSelectProps, "ref"> & import("react").RefAttributes<HTMLSelectElement>>;
+    DirectionSelect: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("./sort-direction-select.js").SortDirectionSelectProps, "ref"> & import("react").RefAttributes<HTMLSelectElement>>;
+    Add: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("./sort-add.js").SortAddProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Remove: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("./sort-remove.js").SortRemoveProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Cancel: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("./sort-cancel.js").SortCancelProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Clear: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("./sort-clear.js").SortClearProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Apply: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("./sort-apply.js").SortApplyProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    useSortManager: typeof useSortManager;
+};