@1771technologies/lytenyte-pro 0.9.4 → 1.0.0-beta.0

package/dist/row-data-source-server/utils/get-request-id.d.ts

@@ -0,0 +1 @@
+export declare function getRequestId(path: (string | null)[], start: number, end: number): string;

package/dist/row-data-source-server/utils/get-request-id.js

@@ -0,0 +1,6 @@
+export function getRequestId(path, start, end) {
+    if (path.length === 0)
+        return `__ROOT__/${start}-${end}`;
+    const key = path.map((s) => (s == null ? `__null__` : s)).join("/") + `${start}-${end}`;
+    return key;
+}

package/dist/rows/row/context.d.ts

@@ -0,0 +1,6 @@
+export interface RowMetaData {
+    readonly selected: boolean;
+    readonly indeterminate: boolean;
+}
+export declare const RowContext: import("react").Context<RowMetaData>;
+export declare const useRowMeta: () => RowMetaData;

package/dist/rows/row/context.js

@@ -0,0 +1,3 @@
+import { createContext, useContext } from "react";
+export const RowContext = createContext({ selected: false, indeterminate: false });
+export const useRowMeta = () => useContext(RowContext);

package/dist/rows/row/row.d.ts

@@ -0,0 +1,7 @@
+import type { RowNormalRowLayout } from "../../+types";
+import { type DropWrapProps } from "@1771technologies/lytenyte-shared";
+export interface RowProps extends Omit<DropWrapProps, "accepted"> {
+    readonly row: RowNormalRowLayout<any>;
+    readonly accepted?: string[];
+}
+export declare const Row: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "onDrag"> & RowProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/rows/row/row.js

@@ -0,0 +1,16 @@
+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";
+import { RowDetailRow } from "../row-detail-row";
+import { RowReact } from "@1771technologies/lytenyte-shared";
+import { useRowContextValue } from "./use-row-context-value";
+import { RowContext } from "./context";
+const empty = [];
+const RowImpl = forwardRef(function Rows({ row, ...props }, forwarded) {
+    const ctx = useGridRoot().grid;
+    const rowMeta = useRowContextValue(ctx, row.row);
+    const accepted = props.accepted ?? empty;
+    return (_jsx(RowContext.Provider, { value: rowMeta, children: _jsxs(RowReact, { ...props, ref: forwarded, accepted: accepted, gridId: ctx.state.gridId.useValue(), rowIndex: row.rowIndex, rowFirstPinBottom: row.rowFirstPinBottom, rowLastPinTop: row.rowLastPinTop, rowIsFocusRow: row.rowIsFocusRow ?? false, yPositions: ctx.state.yPositions.useValue(), "data-ln-row-selected": rowMeta.selected, children: [props.children, _jsx(RowDetailRow, { layout: row })] }) }));
+});
+export const Row = fastDeepMemo(RowImpl);

package/dist/rows/row/use-row-context-value.d.ts

@@ -0,0 +1,6 @@
+import type { Grid, GridAtomReadonlyUnwatchable, RowNode } from "../../+types";
+import type { InternalAtoms } from "../../state/+types";
+import type { RowMetaData } from "./context";
+export declare function useRowContextValue(grid: Grid<any> & {
+    internal: InternalAtoms;
+}, row: GridAtomReadonlyUnwatchable<RowNode<any> | null>): RowMetaData;

package/dist/rows/row/use-row-context-value.js

@@ -0,0 +1,29 @@
+import { useEffect, useMemo, useState } from "react";
+export function useRowContextValue(grid, row) {
+    const r = row.useValue();
+    const [indeterminate, setIndeterminate] = useState(false);
+    const [selected, setSelected] = useState(false);
+    useEffect(() => {
+        function handleSelection() {
+            if (!r)
+                return;
+            const selectedIds = grid.state.rowSelectedIds.get();
+            if (selectedIds.has(r.id))
+                setSelected(true);
+            else
+                setSelected(false);
+            if (r.kind === "branch") {
+                const childIds = grid.state.rowDataSource.get().rowAllChildIds(r.id);
+                setIndeterminate(childIds.some((c) => selectedIds.has(c)) && childIds.some((c) => !selectedIds.has(c)));
+            }
+            else
+                setIndeterminate(false);
+        }
+        handleSelection();
+        return grid.state.rowSelectedIds.watch(() => handleSelection());
+    }, [grid.state.rowDataSource, grid.state.rowSelectedIds, r]);
+    const value = useMemo(() => {
+        return { selected, indeterminate };
+    }, [indeterminate, selected]);
+    return value;
+}

package/dist/rows/row-detail-row.d.ts

@@ -0,0 +1,4 @@
+import type { RowFullWidthRowLayout, RowNormalRowLayout } from "../+types";
+export declare function RowDetailRow<T>({ layout, }: {
+    layout: RowNormalRowLayout<T> | RowFullWidthRowLayout<T>;
+}): import("react/jsx-runtime").JSX.Element | null;

package/dist/rows/row-detail-row.js

@@ -0,0 +1,131 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getNearestRow, getRowIndexFromEl, sizeFromCoord, VIEWPORT_WIDTH_VARIABLE_USE, } from "@1771technologies/lytenyte-shared";
+import { useGridRoot } from "../context";
+import { useEffect, useState } from "react";
+import { getTabbables, isHTMLElement } from "@1771technologies/lytenyte-dom-utils";
+export function RowDetailRow({ layout, }) {
+    const cx = useGridRoot();
+    const row = layout.row.useValue();
+    if (!row || !cx.grid.api.rowDetailIsExpanded(row))
+        return null;
+    return _jsx(RowDetailImpl, { row: row, rowIndex: layout.rowIndex });
+}
+function RowDetailImpl({ row, rowIndex }) {
+    const cx = useGridRoot();
+    const rtl = cx.grid.state.rtl.useValue();
+    const height = cx.grid.api.rowDetailRenderedHeight(row);
+    const rowHeight = sizeFromCoord(rowIndex, cx.grid.state.yPositions.get()) - height;
+    const Renderer = cx.grid.state.rowDetailRenderer.useValue().fn;
+    const [ref, setRef] = useState(null);
+    useEffect(() => {
+        const parent = ref?.parentElement;
+        const first = ref?.firstElementChild;
+        if (!parent || !first)
+            return;
+        const controller = new AbortController();
+        let focusTime = false;
+        const vp = cx.grid.state.viewport.get();
+        vp?.addEventListener("keydown", () => {
+            focusTime = true;
+            setTimeout(() => {
+                focusTime = false;
+            }, 20);
+        }, { capture: true, signal: controller.signal });
+        parent.addEventListener("focusin", (e) => {
+            if (focusTime && e.relatedTarget && isHTMLElement(e.relatedTarget)) {
+                const row = getNearestRow(e.relatedTarget);
+                const gridId = cx.grid.state.gridId.get();
+                if (gridId !== row?.getAttribute("data-ln-gridid"))
+                    return;
+                const prevIndex = getRowIndexFromEl(row);
+                if (prevIndex - 1 === rowIndex) {
+                    first.focus();
+                }
+            }
+        }, { signal: controller.signal });
+        parent.addEventListener("keydown", (e) => {
+            if (e.key === "ArrowDown" && document.activeElement !== first) {
+                e.stopPropagation();
+                e.preventDefault();
+                first.focus();
+            }
+        }, { signal: controller.signal });
+        first.addEventListener("keydown", (e) => {
+            const next = rtl ? "ArrowLeft" : "ArrowRight";
+            const prev = rtl ? "ArrowRight" : "ArrowLeft";
+            if (e.key === "Escape") {
+                first.focus();
+                return;
+            }
+            if (e.key === "ArrowUp") {
+                e.stopPropagation();
+                e.preventDefault();
+                cx.grid.api.focusCell({
+                    row: rowIndex,
+                    column: cx.grid.internal.focusActive.get()?.colIndex ?? 0,
+                });
+            }
+            if (e.key === next) {
+                e.preventDefault();
+                e.stopPropagation();
+                const focusables = getTabbables(first);
+                const index = focusables.indexOf(document.activeElement);
+                if (index === -1)
+                    focusables.at(0)?.focus();
+                else
+                    focusables.at(index + 1)?.focus();
+            }
+            if (e.key === prev) {
+                e.preventDefault();
+                e.stopPropagation();
+                const focusables = getTabbables(first);
+                const index = focusables.indexOf(document.activeElement);
+                if (index === -1)
+                    focusables.at(-1)?.focus();
+                else
+                    focusables[index - 1]?.focus();
+            }
+        }, { signal: controller.signal });
+        return () => {
+            controller.abort();
+        };
+    }, [
+        cx.grid.api,
+        cx.grid.internal.focusActive,
+        cx.grid.internal.focusPrevRowIndex,
+        cx.grid.state.gridId,
+        cx.grid.state.rtl,
+        cx.grid.state.viewport,
+        ref,
+        rowIndex,
+        rtl,
+    ]);
+    useEffect(() => {
+        const first = ref?.firstElementChild;
+        if (!first)
+            return;
+        const obs = new ResizeObserver(() => {
+            cx.grid.internal.rowDetailAutoHeightCache.set((prev) => ({
+                ...prev,
+                [rowIndex]: first.offsetHeight,
+            }));
+        });
+        obs.observe(first);
+        return () => obs.disconnect();
+    }, [cx.grid.internal.rowDetailAutoHeightCache, ref?.firstElementChild, rowIndex]);
+    const isAuto = cx.grid.state.rowDetailHeight.useValue() === "auto";
+    return (_jsx("div", { ref: setRef, role: "gridcell", style: {
+            gridColumnStart: "1",
+            gridColumnEnd: "2",
+            gridRowStart: "1",
+            gridRowEnd: "2",
+            marginTop: rowHeight,
+            pointerEvents: "all",
+        }, children: _jsx("div", { tabIndex: -1, "data-ln-row-detail": true, style: {
+                position: "sticky",
+                right: rtl ? "0px" : undefined,
+                left: rtl ? undefined : "0px",
+                width: VIEWPORT_WIDTH_VARIABLE_USE,
+                height: isAuto ? "auto" : height,
+            }, children: _jsx(Renderer, { grid: cx.grid, row: row, rowIndex: rowIndex }) }) }));
+}

package/dist/rows/row-full-width.d.ts

@@ -0,0 +1,8 @@
+import type { RowFullWidthRowLayout } from "../+types";
+import { type DropWrapProps } from "@1771technologies/lytenyte-shared";
+export interface RowFullWidthProps extends Omit<DropWrapProps, "accepted"> {
+    readonly row: RowFullWidthRowLayout<any>;
+    readonly space?: "viewport" | "scroll-width";
+    readonly accepted?: string[];
+}
+export declare const RowFullWidth: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & RowFullWidthProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/rows/row-full-width.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { fastDeepMemo } from "@1771technologies/lytenyte-react-hooks";
+import { useGridRoot } from "../context";
+import { RowFullWidthReact } from "@1771technologies/lytenyte-shared";
+import { RowDetailRow } from "./row-detail-row";
+import { useRowContextValue } from "./row/use-row-context-value";
+const empty = [];
+const RowFullWidthImpl = forwardRef(function RowFullWidth({ row: layout, space, children, ...props }, forwarded) {
+    const grid = useGridRoot().grid;
+    const Renderer = grid.state.rowFullWidthRenderer.useValue().fn;
+    const row = layout.row.useValue();
+    const meta = useRowContextValue(grid, layout.row);
+    return (_jsx(RowFullWidthReact, { ...props, ref: forwarded, accepted: props.accepted ?? empty, detail: _jsx(RowDetailRow, { layout: layout }), detailHeight: grid.api.rowDetailRenderedHeight(row ?? ""), gridId: grid.state.gridId.useValue(), rtl: grid.state.rtl.useValue(), rowFirstPinBottom: layout.rowFirstPinBottom, rowLastPinTop: layout.rowLastPinTop, rowIndex: layout.rowIndex, rowIsFocusRow: layout.rowIsFocusRow ?? false, yPositions: grid.state.yPositions.useValue(), space: space, "data-ln-row-selected": meta.selected, children: children ??
+            (row ? (_jsx(Renderer, { grid: grid, row: row, rowIndex: layout.rowIndex, rowSelected: meta.selected, rowIndeterminate: meta.indeterminate })) : null) }));
+});
+export const RowFullWidth = fastDeepMemo(RowFullWidthImpl);

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

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

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";
+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";
+import { NativeScroller } from "./scrollers/native-scroller";
+import { RowsBottomReact, RowsCenterReact, RowsTopReact } from "@1771technologies/lytenyte-shared";
+import { CellSelectionBottom, CellSelectionCenter, CellSelectionTop, } from "../cell-selection/cell-selection-containers";
+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, 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,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useGridRoot } from "../../context";
+import { sizeFromCoord } from "@1771technologies/lytenyte-shared";
+export function NativeScroller(props) {
+    const cx = useGridRoot().grid;
+    const view = cx.view.useValue().rows;
+    const yPos = cx.state.yPositions.useValue();
+    let offset = yPos[view.rowFirstCenter] - view.rowTopTotalHeight;
+    if (view.rowFocusedIndex != null && view.rowFocusedIndex < view.rowFirstCenter) {
+        const size = sizeFromCoord(view.rowFocusedIndex, yPos);
+        offset -= size;
+    }
+    const offsetPx = `${offset}px`;
+    return (_jsx("div", { role: "presentation", style: {
+            transform: `translate3d(0px, ${offset}px, 0px)`,
+            "--ln-y-offset": offsetPx,
+        }, children: props.children }));
+}

package/dist/{types/sort-manager/use-sort-state.d.ts → sort-manager/+types.d.ts}

@@ -1,8 +1,11 @@
-import { GridProReact } from '../types.js';
 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";
 }
-export declare function useSortState<D>(grid: GridProReact<D>): readonly [SortItem[], import('react').Dispatch<import('react').SetStateAction<SortItem[]>>];
+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";
+import type { SortRowItem } from "./hooks/use-sort-row-item";
+import type { Grid } from "../+types";
+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";
+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").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";
+import { itemsWithIdToMap } from "@1771technologies/lytenyte-js-utils";
+import { useSortRowItems } from "./use-sort-row-item";
+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/{types/sort-manager/sort-manager-container.d.ts → sort-manager/hooks/use-sort-row-item.d.ts}

@@ -1,5 +1,8 @@
-import { ReactNode } from 'react';
+import { type Dispatch, type SetStateAction } from "react";
+import type { SortItem } from "../+types";
+import type { Grid } from "../../+types";
 export interface SortRowItem {
+    readonly isCustom: boolean;
     readonly columnItem: {
         value: string;
         label: string;
@@ -45,9 +48,4 @@ export interface SortRowItem {
     readonly onAdd: () => void;
     readonly onDelete: () => void;
 }
-export interface SortContainerProps {
-    readonly children: (c: {
-        items: SortRowItem[];
-    }) => ReactNode;
-}
-export declare const SortManagerContainer: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "children"> & SortContainerProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+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";
+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: "value_insensitive_ignore" },
+    { label: "Insensitive, Trim", value: "value_insensitive_trim" },
+    { label: "Insensitive, Ignore Punctuation, Trim", value: "value_insensitive_ignore_trim" },
+    { label: "Ignore Punctuation", value: "values_ignore_punctuation" },
+    { label: "Ignore Punctuation, Trim", value: "values_ignore_punctuation_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_insensitive_first_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";
+export declare function Root({ sortItems, setSortItems, grid, mode, children, }: PropsWithChildren<SortManagerContext>): import("react/jsx-runtime").JSX.Element;