@1771technologies/lytenyte-pro 1.0.0-beta.1 → 1.0.0-beta.10

package/dist/column-manager/visibility-checkbox.js

@@ -4,27 +4,40 @@ import { useColumnItemContext } from "./context";
 import { forwardRef, useCallback, useMemo } from "react";
 import { useGrid } from "../grid-provider/use-grid";
 import { useColumnsFromContext } from "./use-columns-from-context";
-export const VisibilityCheckbox = forwardRef(function VisibilityCheckbox({ slot, ...props }, forwarded) {
-    const { item } = useColumnItemContext();
-    const grid = useGrid();
-    const base = grid.state.columnBase.useValue();
-    const columns = useColumnsFromContext(item);
-    const [isVisible, isIndeterminate] = useMemo(() => {
-        const allVisible = columns.every((c) => !(c.hide ?? base.hide));
-        const someVisible = columns.some((c) => !(c.hide ?? base.hide));
-        return [allVisible, !allVisible && someVisible];
-    }, [base.hide, columns]);
-    const toggle = useCallback((s) => {
-        const next = s ?? isVisible;
-        grid.api.columnUpdate(Object.fromEntries(columns.map((c) => [c.id, { hide: next }])));
-    }, [columns, grid.api, isVisible]);
-    const rendered = useSlot({
-        props: [props],
-        ref: forwarded,
-        slot: slot ?? (_jsx("input", { type: "checkbox", checked: isVisible, "aria-label": "visibility toggle", onChange: () => {
-                toggle();
-            } })),
-        state: { visible: isVisible, indeterminate: isIndeterminate, toggle },
-    });
-    return rendered;
+export const VisibilityCheckbox = forwardRef(function VisibilityCheckbox(
+  { slot, ...props },
+  forwarded,
+) {
+  const { item } = useColumnItemContext();
+  const grid = useGrid();
+  const base = grid.state.columnBase.useValue();
+  const columns = useColumnsFromContext(item);
+  const [isVisible, isIndeterminate] = useMemo(() => {
+    const allVisible = columns.every((c) => !(c.hide ?? base.hide));
+    const someVisible = columns.some((c) => !(c.hide ?? base.hide));
+    return [allVisible, !allVisible && someVisible];
+  }, [base.hide, columns]);
+  const toggle = useCallback(
+    (s) => {
+      const next = s ?? isVisible;
+      grid.api.columnUpdate(Object.fromEntries(columns.map((c) => [c.id, { hide: next }])));
+    },
+    [columns, grid.api, isVisible],
+  );
+  const rendered = useSlot({
+    props: [props],
+    ref: forwarded,
+    slot:
+      slot ??
+      _jsx("input", {
+        type: "checkbox",
+        checked: isVisible,
+        "aria-label": "visibility toggle",
+        onChange: () => {
+          toggle();
+        },
+      }),
+    state: { visible: isVisible, indeterminate: isIndeterminate, toggle },
+  });
+  return rendered;
 });

package/dist/context.d.ts

@@ -1,10 +1,10 @@
 import type { Grid } from "./+types";
 import type { InternalAtoms } from "./state/+types";
 export interface GridRootContext {
-    readonly ref: (el: HTMLElement | SVGElement | null) => void;
-    readonly grid: Grid<any> & {
-        internal: InternalAtoms;
-    };
+  readonly ref: (el: HTMLElement | SVGElement | null) => void;
+  readonly grid: Grid<any> & {
+    internal: InternalAtoms;
+  };
 }
 export declare const RootProvider: import("react").Provider<GridRootContext>;
 export declare const useGridRoot: () => GridRootContext;

package/dist/filter-tree/branch.d.ts

@@ -2,9 +2,17 @@ import type { TreeVirtualBranch } from "../tree-view/virtualized/make-virtual-tr
 import type { FilterInFilterItem } from "../+types";
 import { type SlotComponent } from "@1771technologies/lytenyte-react-hooks";
 export interface FilterTreeBranch {
-    readonly item: TreeVirtualBranch<FilterInFilterItem>;
-    readonly label: SlotComponent;
-    readonly labelWrap?: SlotComponent;
-    readonly expander?: SlotComponent;
+  readonly item: TreeVirtualBranch<FilterInFilterItem>;
+  readonly label: SlotComponent;
+  readonly labelWrap?: SlotComponent;
+  readonly expander?: SlotComponent;
 }
-export declare const Branch: import("react").ForwardRefExoticComponent<Omit<FilterTreeBranch & import("react").ClassAttributes<HTMLLIElement> & import("react").LiHTMLAttributes<HTMLLIElement>, "ref"> & import("react").RefAttributes<HTMLLIElement>>;
+export declare const Branch: import("react").ForwardRefExoticComponent<
+  Omit<
+    FilterTreeBranch &
+      import("react").ClassAttributes<HTMLLIElement> &
+      import("react").LiHTMLAttributes<HTMLLIElement>,
+    "ref"
+  > &
+    import("react").RefAttributes<HTMLLIElement>
+>;

package/dist/filter-tree/branch.js

@@ -5,17 +5,27 @@ import { useSlot } from "@1771technologies/lytenyte-react-hooks";
 import { FilterTreeItemContext } from "./context";
 import { useTreeItem } from "./hooks/use-tree-item";
 export const Branch = forwardRef(function Branch({ item, labelWrap, label, ...props }, forwarded) {
-    const value = useTreeItem(item);
-    const labelSlot = useSlot({
-        slot: labelWrap ?? _jsx("div", {}),
-        props: [
-            {
-                onClick: () => value.onCheckChange(),
-            },
-        ],
-    });
-    return (_jsx(FilterTreeItemContext.Provider, { value: value, children: _jsx(TreeBranch, { ...props, itemId: item.branch.data.idOccurrence, ref: forwarded, ...item.attrs, onKeyDown: (ev) => {
-                if (ev.key === " ")
-                    value.onCheckChange();
-            }, label: label, labelWrap: labelSlot }) }));
+  const value = useTreeItem(item);
+  const labelSlot = useSlot({
+    slot: labelWrap ?? _jsx("div", {}),
+    props: [
+      {
+        onClick: () => value.onCheckChange(),
+      },
+    ],
+  });
+  return _jsx(FilterTreeItemContext.Provider, {
+    value: value,
+    children: _jsx(TreeBranch, {
+      ...props,
+      itemId: item.branch.data.idOccurrence,
+      ref: forwarded,
+      ...item.attrs,
+      onKeyDown: (ev) => {
+        if (ev.key === " ") value.onCheckChange();
+      },
+      label: label,
+      labelWrap: labelSlot,
+    }),
+  });
 });

package/dist/filter-tree/context.d.ts

@@ -2,26 +2,26 @@ import { type Dispatch, type SetStateAction } from "react";
 import type { TreeVirtualItem } from "../tree-view/virtualized/make-virtual-tree";
 import type { FilterIn, FilterInFilterItem } from "../+types";
 export interface TreeItemContextValue {
-    readonly item: TreeVirtualItem<FilterInFilterItem>;
-    readonly onCheckChange: (b?: boolean) => void;
-    readonly isChecked: boolean;
-    readonly isIndeterminate: boolean;
+  readonly item: TreeVirtualItem<FilterInFilterItem>;
+  readonly onCheckChange: (b?: boolean) => void;
+  readonly isChecked: boolean;
+  readonly isIndeterminate: boolean;
 }
 export declare const FilterTreeContext: import("react").Context<{
-    items: FilterInFilterItem[];
-    pivotMode: boolean;
-    columnId: string;
-    filter: FilterIn;
-    filterChange: Dispatch<SetStateAction<FilterIn>>;
-    applyChangesImmediately: boolean;
+  items: FilterInFilterItem[];
+  pivotMode: boolean;
+  columnId: string;
+  filter: FilterIn;
+  filterChange: Dispatch<SetStateAction<FilterIn>>;
+  applyChangesImmediately: boolean;
 }>;
 export declare const useTreeContext: () => {
-    items: FilterInFilterItem[];
-    pivotMode: boolean;
-    columnId: string;
-    filter: FilterIn;
-    filterChange: Dispatch<SetStateAction<FilterIn>>;
-    applyChangesImmediately: boolean;
+  items: FilterInFilterItem[];
+  pivotMode: boolean;
+  columnId: string;
+  filter: FilterIn;
+  filterChange: Dispatch<SetStateAction<FilterIn>>;
+  applyChangesImmediately: boolean;
 };
 export declare const FilterTreeItemContext: import("react").Context<TreeItemContextValue>;
 export declare const useTreeItemContext: () => TreeItemContextValue;

package/dist/filter-tree/filter-tree.d.ts

@@ -1,14 +1,55 @@
-import { ForceSyncScrolling } from "../tree-view/virtualized/force-sync-scrolling";
-import { InclusionCheckbox } from "./inclusion-checkbox";
-import { Root } from "./root";
-import { useFilterTree } from "./hooks/use-filter-tree";
+import { ForceSyncScrolling } from "../tree-view/virtualized/force-sync-scrolling.js";
+import { InclusionCheckbox } from "./inclusion-checkbox.js";
+import { Root } from "./root.js";
+import { useFilterTree } from "./hooks/use-filter-tree.js";
 export declare const FilterTree: {
-    Root: typeof Root;
-    Panel: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & import("react").RefAttributes<HTMLUListElement>>;
-    PassiveScroll: typeof ForceSyncScrolling;
-    Leaf: import("react").ForwardRefExoticComponent<Omit<import("./leaf").FilterTreeLeafProps & import("react").ClassAttributes<HTMLLIElement> & import("react").LiHTMLAttributes<HTMLLIElement>, "ref"> & import("react").RefAttributes<HTMLLIElement>>;
-    Branch: import("react").ForwardRefExoticComponent<Omit<import("./branch").FilterTreeBranch & import("react").ClassAttributes<HTMLLIElement> & import("react").LiHTMLAttributes<HTMLLIElement>, "ref"> & import("react").RefAttributes<HTMLLIElement>>;
-    Label: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("./label").LabelProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-    Checkbox: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & InclusionCheckbox, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-    useFilterTree: typeof useFilterTree;
+  Root: typeof Root;
+  Panel: import("react").ForwardRefExoticComponent<
+    Omit<
+      import("react").DetailedHTMLProps<
+        import("react").HTMLAttributes<HTMLUListElement>,
+        HTMLUListElement
+      >,
+      "ref"
+    > &
+      import("react").RefAttributes<HTMLUListElement>
+  >;
+  PassiveScroll: typeof ForceSyncScrolling;
+  Leaf: import("react").ForwardRefExoticComponent<
+    Omit<
+      import("./leaf.js").FilterTreeLeafProps &
+        import("react").ClassAttributes<HTMLLIElement> &
+        import("react").LiHTMLAttributes<HTMLLIElement>,
+      "ref"
+    > &
+      import("react").RefAttributes<HTMLLIElement>
+  >;
+  Branch: import("react").ForwardRefExoticComponent<
+    Omit<
+      import("./branch.js").FilterTreeBranch &
+        import("react").ClassAttributes<HTMLLIElement> &
+        import("react").LiHTMLAttributes<HTMLLIElement>,
+      "ref"
+    > &
+      import("react").RefAttributes<HTMLLIElement>
+  >;
+  Label: import("react").ForwardRefExoticComponent<
+    Omit<
+      import("react").ClassAttributes<HTMLDivElement> &
+        import("react").HTMLAttributes<HTMLDivElement> &
+        import("./label.js").LabelProps,
+      "ref"
+    > &
+      import("react").RefAttributes<HTMLDivElement>
+  >;
+  Checkbox: import("react").ForwardRefExoticComponent<
+    Omit<
+      import("react").ClassAttributes<HTMLDivElement> &
+        import("react").HTMLAttributes<HTMLDivElement> &
+        InclusionCheckbox,
+      "ref"
+    > &
+      import("react").RefAttributes<HTMLDivElement>
+  >;
+  useFilterTree: typeof useFilterTree;
 };

package/dist/filter-tree/filter-tree.js

@@ -1,18 +1,18 @@
-import { TreePanel } from "../tree-view/panel/panel";
-import { ForceSyncScrolling } from "../tree-view/virtualized/force-sync-scrolling";
-import { Branch } from "./branch";
-import { InclusionCheckbox } from "./inclusion-checkbox";
-import { Label } from "./label";
-import { Leaf } from "./leaf";
-import { Root } from "./root";
-import { useFilterTree } from "./hooks/use-filter-tree";
+import { TreePanel } from "../tree-view/panel/panel.js";
+import { ForceSyncScrolling } from "../tree-view/virtualized/force-sync-scrolling.js";
+import { Branch } from "./branch.js";
+import { InclusionCheckbox } from "./inclusion-checkbox.js";
+import { Label } from "./label.js";
+import { Leaf } from "./leaf.js";
+import { Root } from "./root.js";
+import { useFilterTree } from "./hooks/use-filter-tree.js";
 export const FilterTree = {
-    Root,
-    Panel: TreePanel,
-    PassiveScroll: ForceSyncScrolling,
-    Leaf: Leaf,
-    Branch: Branch,
-    Label: Label,
-    Checkbox: InclusionCheckbox,
-    useFilterTree,
+  Root,
+  Panel: TreePanel,
+  PassiveScroll: ForceSyncScrolling,
+  Leaf: Leaf,
+  Branch: Branch,
+  Label: Label,
+  Checkbox: InclusionCheckbox,
+  useFilterTree,
 };

package/dist/filter-tree/hooks/use-filter-tree.d.ts

@@ -3,35 +3,41 @@ import type { Column, FilterIn, FilterInFilterItem, Grid } from "../../+types";
 import type { PathRoot } from "@1771technologies/lytenyte-shared";
 import type { TreeVirtualItem } from "../../tree-view/virtualized/make-virtual-tree";
 export interface UseTreeFilterReturn<T> {
-    readonly rootProps: {
-        readonly fetchItems: () => void;
-        readonly loading: boolean;
-        readonly error: any;
-        readonly pivotMode: boolean;
-        readonly grid: Grid<T>;
-        readonly expansions: Record<string, boolean>;
-        readonly onExpansionChange: Dispatch<SetStateAction<Record<string, boolean>>>;
-        readonly treeRef: (el: HTMLElement | null) => void;
-        readonly getAllIds: () => Set<string>;
-        readonly getIdsBetweenNodes: (left: HTMLElement, right: HTMLElement) => string[];
-        readonly onFocusChange: (el: HTMLElement | null) => void;
-        readonly root: PathRoot<FilterInFilterItem>;
-        readonly columnId: string;
-        readonly items: FilterInFilterItem[];
-        readonly applyChangesImmediately: boolean;
-        readonly filterIn: FilterIn;
-        readonly filterInChange: Dispatch<SetStateAction<FilterIn>>;
-    };
-    readonly tree: TreeVirtualItem<FilterInFilterItem>[];
-    readonly spacer: JSX.Element;
-    readonly apply: () => void;
-    readonly reset: () => void;
+  readonly rootProps: {
+    readonly fetchItems: () => void;
+    readonly loading: boolean;
+    readonly error: any;
+    readonly pivotMode: boolean;
+    readonly grid: Grid<T>;
+    readonly expansions: Record<string, boolean>;
+    readonly onExpansionChange: Dispatch<SetStateAction<Record<string, boolean>>>;
+    readonly treeRef: (el: HTMLElement | null) => void;
+    readonly getAllIds: () => Set<string>;
+    readonly getIdsBetweenNodes: (left: HTMLElement, right: HTMLElement) => string[];
+    readonly onFocusChange: (el: HTMLElement | null) => void;
+    readonly root: PathRoot<FilterInFilterItem>;
+    readonly columnId: string;
+    readonly items: FilterInFilterItem[];
+    readonly applyChangesImmediately: boolean;
+    readonly filterIn: FilterIn;
+    readonly filterInChange: Dispatch<SetStateAction<FilterIn>>;
+  };
+  readonly tree: TreeVirtualItem<FilterInFilterItem>[];
+  readonly spacer: JSX.Element;
+  readonly apply: () => void;
+  readonly reset: () => void;
 }
 export interface UseFilterTreeArgs<T> {
-    grid: Grid<T>;
-    column: Column<T>;
-    treeItemHeight?: number;
-    pivotMode?: boolean;
-    applyChangesImmediately?: boolean;
+  grid: Grid<T>;
+  column: Column<T>;
+  treeItemHeight?: number;
+  pivotMode?: boolean;
+  applyChangesImmediately?: boolean;
 }
-export declare function useFilterTree<T>({ grid, column, treeItemHeight, pivotMode, applyChangesImmediately, }: UseFilterTreeArgs<T>): UseTreeFilterReturn<T>;
+export declare function useFilterTree<T>({
+  grid,
+  column,
+  treeItemHeight,
+  pivotMode,
+  applyChangesImmediately,
+}: UseFilterTreeArgs<T>): UseTreeFilterReturn<T>;

package/dist/filter-tree/hooks/use-filter-tree.js

@@ -1,96 +1,98 @@
 import { useEffect, useMemo, useState } from "react";
 import { useVirtualizedTree } from "../../tree-view/virtualized/use-virtualized-tree";
 import { useEvent } from "@1771technologies/lytenyte-react-hooks";
-export function useFilterTree({ grid, column, treeItemHeight = 24, pivotMode, applyChangesImmediately = false, }) {
-    const [items, setItems] = useState([]);
-    const [expansions, onExpansionChange] = useState({});
-    const [loading, setLoading] = useState(false);
-    const [error, setError] = useState();
-    const rds = grid.state.rowDataSource.useValue();
-    const filterModel = grid.state.filterInModel.useValue();
-    const pivotModel = grid.state.columnPivotModel.useValue().filtersIn;
-    const currentPivotMode = grid.state.columnPivotMode.useValue();
-    const model = (pivotMode ?? currentPivotMode) ? pivotModel : filterModel;
-    const existingFilter = useMemo(() => {
-        const filter = model[column.id];
-        return filter ?? { kind: "in", operator: "not_in", value: new Set() };
-    }, [column.id, model]);
-    const [changes, setChanges] = useState(() => existingFilter);
-    // Keep in sync with any external changes.
-    useEffect(() => {
-        setChanges(existingFilter);
-    }, [existingFilter]);
-    const fetchItems = useEvent(() => {
-        const items = rds.inFilterItems(column);
-        if ("then" in items) {
-            setLoading(true);
-            items
-                .then((res) => {
-                setItems(res);
-                setError(null);
-            })
-                .catch((error) => setError(error))
-                .finally(() => setLoading(false));
-        }
-        else {
-            setItems(items);
-            setError(null);
-            setLoading(false);
-        }
-    });
-    useEffect(() => {
-        fetchItems();
-    }, [column, fetchItems, rds]);
-    const itemsWithSelectAll = useMemo(() => {
-        return [{ id: "__LNG__SELECT_ALL", label: "(Select All)", value: "" }, ...items];
-    }, [items]);
-    const virt = useVirtualizedTree({
-        itemHeight: treeItemHeight,
-        paths: itemsWithSelectAll,
-        expansions,
-        expansionDefault: true,
-        nonAdjacentPathTrees: false,
-    });
-    const apply = useEvent(() => {
-        if (applyChangesImmediately)
-            return;
-        if (pivotMode) {
-            grid.state.columnPivotModel.set((prev) => {
-                return {
-                    ...prev,
-                    filtersIn: { ...prev.filtersIn, [column.id]: changes },
-                };
-            });
-        }
-        else {
-            grid.state.filterInModel.set((prev) => ({ ...prev, [column.id]: changes }));
-        }
-    });
-    const reset = useEvent(() => {
-        if (applyChangesImmediately)
-            return;
-        setChanges(existingFilter);
-    });
-    return {
-        rootProps: {
-            fetchItems,
-            items,
-            grid,
-            columnId: column.id,
-            expansions,
-            pivotMode: pivotMode ?? currentPivotMode,
-            onExpansionChange,
-            treeRef: virt.ref,
-            loading,
-            error,
-            filterIn: changes,
-            filterInChange: setChanges,
-            applyChangesImmediately,
-            ...virt.rootProps,
-        },
-        spacer: virt.spacer,
-        tree: virt.virtualTree,
-        apply,
-        reset,
-    };
+export function useFilterTree({
+  grid,
+  column,
+  treeItemHeight = 24,
+  pivotMode,
+  applyChangesImmediately = false,
+}) {
+  const [items, setItems] = useState([]);
+  const [expansions, onExpansionChange] = useState({});
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState();
+  const rds = grid.state.rowDataSource.useValue();
+  const filterModel = grid.state.filterInModel.useValue();
+  const pivotModel = grid.state.columnPivotModel.useValue().filtersIn;
+  const currentPivotMode = grid.state.columnPivotMode.useValue();
+  const model = (pivotMode ?? currentPivotMode) ? pivotModel : filterModel;
+  const existingFilter = useMemo(() => {
+    const filter = model[column.id];
+    return filter ?? { kind: "in", operator: "not_in", value: new Set() };
+  }, [column.id, model]);
+  const [changes, setChanges] = useState(() => existingFilter);
+  // Keep in sync with any external changes.
+  useEffect(() => {
+    setChanges(existingFilter);
+  }, [existingFilter]);
+  const fetchItems = useEvent(() => {
+    const items = rds.inFilterItems(column);
+    if ("then" in items) {
+      setLoading(true);
+      items
+        .then((res) => {
+          setItems(res);
+          setError(null);
+        })
+        .catch((error) => setError(error))
+        .finally(() => setLoading(false));
+    } else {
+      setItems(items);
+      setError(null);
+      setLoading(false);
+    }
+  });
+  useEffect(() => {
+    fetchItems();
+  }, [column, fetchItems, rds]);
+  const itemsWithSelectAll = useMemo(() => {
+    return [{ id: "__LNG__SELECT_ALL", label: "(Select All)", value: "" }, ...items];
+  }, [items]);
+  const virt = useVirtualizedTree({
+    itemHeight: treeItemHeight,
+    paths: itemsWithSelectAll,
+    expansions,
+    expansionDefault: true,
+    nonAdjacentPathTrees: false,
+  });
+  const apply = useEvent(() => {
+    if (applyChangesImmediately) return;
+    if (pivotMode) {
+      grid.state.columnPivotModel.set((prev) => {
+        return {
+          ...prev,
+          filtersIn: { ...prev.filtersIn, [column.id]: changes },
+        };
+      });
+    } else {
+      grid.state.filterInModel.set((prev) => ({ ...prev, [column.id]: changes }));
+    }
+  });
+  const reset = useEvent(() => {
+    if (applyChangesImmediately) return;
+    setChanges(existingFilter);
+  });
+  return {
+    rootProps: {
+      fetchItems,
+      items,
+      grid,
+      columnId: column.id,
+      expansions,
+      pivotMode: pivotMode ?? currentPivotMode,
+      onExpansionChange,
+      treeRef: virt.ref,
+      loading,
+      error,
+      filterIn: changes,
+      filterInChange: setChanges,
+      applyChangesImmediately,
+      ...virt.rootProps,
+    },
+    spacer: virt.spacer,
+    tree: virt.virtualTree,
+    apply,
+    reset,
+  };
 }

package/dist/filter-tree/hooks/use-tree-item.d.ts

@@ -1,8 +1,8 @@
-import type { FilterInFilterItem } from "../../+types";
-import type { TreeVirtualItem } from "../../tree-view/virtualized/make-virtual-tree";
+import type { FilterInFilterItem } from "../../+types.js";
+import type { TreeVirtualItem } from "../../tree-view/virtualized/make-virtual-tree.js";
 export declare function useTreeItem(item: TreeVirtualItem<FilterInFilterItem>): {
-    onCheckChange: (b?: boolean) => void;
-    isChecked: boolean;
-    isIndeterminate: boolean;
-    item: TreeVirtualItem<FilterInFilterItem>;
+  onCheckChange: (b?: boolean) => void;
+  isChecked: boolean;
+  isIndeterminate: boolean;
+  item: TreeVirtualItem<FilterInFilterItem>;
 };