@1771technologies/lytenyte-pro 1.0.12-dev.3 → 1.0.13

package/dist/+types.d.ts

@@ -2650,7 +2650,7 @@ export interface FieldFnParams<T> {
  *
  *   Example: `"point.x"` will return `data.point.x`. Useful for deeply nested row data.
  *
- *   @group field
+ *   @group Field
  */
 export interface FieldPath {
     /**
@@ -4715,6 +4715,25 @@ export interface OnEditErrorParams<T> {
      */
     readonly error?: unknown;
 }
+/**
+ * The position value type when the current focus position of the grid is within a detail cell.
+ *
+ *   @group Navigation
+ */
+export interface PositionDetailCell {
+    /**
+     * Discriminant indicating this position refers to a detail cell.
+     */
+    readonly kind: "detail";
+    /**
+     * The zero-based index of the row.
+     */
+    readonly rowIndex: number;
+    /**
+     * The zero-based index of the column.
+     */
+    readonly colIndex: number;
+}
 /**
  * Describes the focus position of a floating header cell.
  *
@@ -4843,7 +4862,7 @@ export interface PositionHeaderGroupCell {
  *
  *   @group Navigation
  */
-export type PositionUnion = PositionGridCell | PositionFloatingCell | PositionHeaderCell | PositionFullWidthRow | PositionHeaderGroupCell;
+export type PositionUnion = PositionGridCell | PositionFloatingCell | PositionHeaderCell | PositionDetailCell | PositionFullWidthRow | PositionHeaderGroupCell;
 /**
  * Specifies the height of the row detail section.
  *   Can be a fixed number of pixels or "auto" to size based on content.

package/dist/__play__/grid-navigation/cell-spans-large.play.d.ts

@@ -0,0 +1,3 @@
+export default function CellSpansLarge({ rtl }: {
+    rtl?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/__play__/grid-navigation/cell-spans-large.play.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import NormalLayout from "./normal-layout.play.js";
+const columns = [
+    {
+        id: "age",
+        colSpan: (c) => {
+            return c.rowIndex === 0 ? 10 : 1;
+        },
+    },
+    { id: "marital" },
+    { id: "default" },
+    { id: "housing", colSpan: 2 },
+    { id: "loan" },
+    { id: "contact" },
+    { id: "day" },
+    { id: "month" },
+    { id: "duration" },
+    { id: "campaign" },
+    { id: "pdays" },
+    { id: "previous" },
+    { id: "poutcome", colSpan: 2 },
+    { id: "y" },
+];
+export default function CellSpansLarge({ rtl }) {
+    return _jsx(NormalLayout, { columns: columns, rtl: rtl });
+}

package/dist/__play__/grid-navigation/cell-spans-with-pins.play.d.ts

@@ -0,0 +1,3 @@
+export default function CellSpansWithPins({ rtl }: {
+    rtl?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/__play__/grid-navigation/cell-spans-with-pins.play.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import NormalLayout from "./normal-layout.play.js";
+const columns = [
+    {
+        id: "age",
+        pin: "start",
+        colSpan: (c) => {
+            return c.rowIndex === 0 ? 10 : 1;
+        },
+    },
+    { id: "marital", pin: "start" },
+    { id: "default" },
+    { id: "housing", colSpan: 2 },
+    { id: "loan" },
+    { id: "contact", pin: "end" },
+    { id: "day", pin: "end" },
+    { id: "month" },
+    { id: "duration" },
+    { id: "campaign" },
+    { id: "pdays" },
+    { id: "previous" },
+    { id: "poutcome", colSpan: 2 },
+    { id: "y" },
+];
+export default function CellSpansWithPins({ rtl }) {
+    return _jsx(NormalLayout, { columns: columns, rtl: rtl });
+}

package/dist/__play__/grid-navigation/cell-spans.play.d.ts

@@ -0,0 +1,3 @@
+export default function CellSpans({ rtl }: {
+    rtl?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/__play__/grid-navigation/cell-spans.play.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import NormalLayout from "./normal-layout.play.js";
+const columns = [
+    {
+        id: "age",
+        colSpan: (c) => {
+            return c.rowIndex === 0 || c.rowIndex === 12 ? 3 : 1;
+        },
+    },
+    {
+        id: "job",
+        colSpan: (c) => {
+            return c.rowIndex === 2 ? 3 : 1;
+        },
+    },
+    { id: "balance" },
+    {
+        id: "education",
+        colSpan: (t) => {
+            if (t.rowIndex === 4)
+                return 2;
+            if (t.rowIndex === 12)
+                return 2;
+            return 1;
+        },
+        rowSpan: (t) => {
+            if (t.rowIndex === 4)
+                return 3;
+            if (t.rowIndex === 8)
+                return 3;
+            if (t.rowIndex === 12)
+                return 2;
+            return 1;
+        },
+    },
+    { id: "marital" },
+    { id: "default" },
+    { id: "housing", colSpan: 2 },
+    { id: "loan" },
+    { id: "contact" },
+    { id: "day" },
+    { id: "month" },
+    { id: "duration" },
+    { id: "campaign" },
+    { id: "pdays" },
+    { id: "previous" },
+    { id: "poutcome", colSpan: 2 },
+    { id: "y" },
+];
+export default function CellSpans({ rtl }) {
+    return _jsx(NormalLayout, { columns: columns, rtl: rtl });
+}

package/dist/__play__/grid-navigation/cell-with-tabbables.play.d.ts

@@ -0,0 +1,3 @@
+export default function CellWithTabbables({ rtl }: {
+    rtl?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/__play__/grid-navigation/cell-with-tabbables.play.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import NormalLayout from "./normal-layout.play.js";
+const columns = [
+    {
+        id: "age",
+        colSpan: (c) => {
+            return c.rowIndex === 0 || c.rowIndex === 12 ? 3 : 1;
+        },
+        cellRenderer: () => {
+            return (_jsxs(_Fragment, { children: [_jsx("button", { tabIndex: 0, children: "A" }), _jsx("button", { tabIndex: 0, children: "B" }), _jsx("button", { tabIndex: 0, children: "C" })] }));
+        },
+    },
+    {
+        id: "job",
+        colSpan: (c) => {
+            return c.rowIndex === 2 ? 3 : 1;
+        },
+    },
+    { id: "balance" },
+    {
+        id: "education",
+        colSpan: (t) => {
+            if (t.rowIndex === 4)
+                return 2;
+            if (t.rowIndex === 12)
+                return 2;
+            return 1;
+        },
+        cellRenderer: () => {
+            return (_jsxs(_Fragment, { children: [_jsx("button", { tabIndex: 0, children: "Prev" }), _jsx("button", { tabIndex: -1, children: "Not Tabbable" }), _jsx("button", { tabIndex: 0, children: "Next" })] }));
+        },
+        rowSpan: (t) => {
+            if (t.rowIndex === 4)
+                return 3;
+            if (t.rowIndex === 8)
+                return 3;
+            if (t.rowIndex === 12)
+                return 2;
+            return 1;
+        },
+    },
+    { id: "marital" },
+    { id: "default" },
+];
+export default function CellWithTabbables({ rtl }) {
+    return _jsx(NormalLayout, { columns: columns, rtl: rtl });
+}

package/dist/__play__/grid-navigation/column-groups.play.d.ts

@@ -0,0 +1,3 @@
+export default function ColumnGroups({ rtl }: {
+    rtl?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/__play__/grid-navigation/column-groups.play.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import NormalLayout from "./normal-layout.play.js";
+const columns = [
+    {
+        id: "age",
+        groupPath: ["A", "B"],
+    },
+    { id: "marital", groupPath: ["A"] },
+    { id: "default", groupPath: ["T"] },
+    { id: "housing" },
+    { id: "loan" },
+    { id: "contact", groupPath: ["A", "B", "C"] },
+    { id: "day", groupPath: ["A", "B"] },
+    { id: "month", groupPath: ["A"] },
+    { id: "duration" },
+    { id: "campaign" },
+    { id: "pdays", groupPath: ["C"] },
+    { id: "previous", groupPath: ["C", "D"] },
+    { id: "poutcome", colSpan: 2 },
+    { id: "y" },
+];
+export default function ColumnGroups({ rtl }) {
+    return _jsx(NormalLayout, { columns: columns, rtl: rtl, floatingRow: true });
+}

package/dist/__play__/grid-navigation/full-width-rows.play.d.ts

@@ -0,0 +1,6 @@
+import "./navigation.css";
+import type { Column } from "../../+types.js";
+export default function FullWidthRows({ rtl, columns, }: {
+    rtl?: boolean;
+    columns?: Column<any>[];
+}): import("react/jsx-runtime").JSX.Element;

package/dist/__play__/grid-navigation/full-width-rows.play.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "./navigation.css";
+import { useLyteNyte } from "../../state/use-lytenyte.js";
+import { bankDataSmall } from "../test-utils/bank-data-smaller.js";
+import { Root } from "../../root/root.js";
+import { Viewport } from "../../viewport/viewport.js";
+import { Header } from "../../header/header.js";
+import { HeaderRow } from "../../header/header-row.js";
+import { HeaderGroupCell } from "../../header/header-group-cell.js";
+import { HeaderCell } from "../../header/header-cell.js";
+import { RowsContainer } from "../../rows/rows-container.js";
+import { RowsBottom, RowsCenter, RowsTop } from "../../rows/rows-sections.js";
+import { RowHandler } from "../test-utils/row-handler.js";
+import { useClientRowDataSource } from "../../row-data-source-client/use-client-data-source.js";
+const baseColumns = [
+    { id: "age" },
+    { id: "job" },
+    { id: "balance" },
+    { id: "education" },
+    { id: "marital" },
+    { id: "default" },
+    { id: "housing" },
+    { id: "loan" },
+    { id: "contact" },
+    { id: "day" },
+    { id: "month" },
+    { id: "duration" },
+    { id: "campaign" },
+    { id: "pdays" },
+    { id: "previous" },
+    { id: "poutcome" },
+    { id: "y" },
+];
+export default function FullWidthRows({ rtl, columns, }) {
+    const ds = useClientRowDataSource({
+        data: bankDataSmall,
+    });
+    const g = useLyteNyte({
+        gridId: "x",
+        columns: columns ?? baseColumns,
+        rowDataSource: ds,
+        rtl: rtl,
+        rowFullWidthPredicate: (r) => r.rowIndex === 2 || r.rowIndex == 4,
+        rowFullWidthRenderer: (r) => {
+            if (r.rowIndex === 2)
+                return _jsx("div", { children: "Nothing" });
+            return (_jsxs("div", { children: [_jsx("button", { tabIndex: 0, children: "A" }), _jsx("button", { tabIndex: 0, children: "B" }), _jsx("button", { tabIndex: 0, children: "C" })] }));
+        },
+    });
+    const view = g.view.useValue();
+    return (_jsxs("div", { children: [_jsx("button", { tabIndex: 0, onClick: () => { }, children: "Top Capture" }), _jsx("div", { style: { width: "100%", height: "90vh", border: "1px solid black" }, children: _jsx(Root, { grid: g, children: _jsxs(Viewport, { children: [_jsx(Header, { children: view.header.layout.map((row, i) => {
+                                    return (_jsx(HeaderRow, { headerRowIndex: i, children: row.map((c) => {
+                                            if (c.kind === "group") {
+                                                return _jsx(HeaderGroupCell, { cell: c }, c.idOccurrence);
+                                            }
+                                            return (_jsx(HeaderCell, { cell: c, style: {
+                                                    paddingInline: "16px",
+                                                    background: "light-dark(rgb(200,200,200),rgb(57, 39, 39))",
+                                                    color: "light-dark(black,white)",
+                                                    display: "flex",
+                                                    alignItems: "center",
+                                                    borderBottom: "1px solid light-dark(gray, #444242)",
+                                                    borderRight: "1px solid light-dark(gray, #444242)",
+                                                } }, c.column.id));
+                                        }) }, i));
+                                }) }), _jsxs(RowsContainer, { children: [_jsx(RowsTop, { children: _jsx(RowHandler, { rows: view.rows.top, withStyles: true, pinned: true }) }), _jsx(RowsCenter, { children: _jsx(RowHandler, { rows: view.rows.center, withStyles: true }) }), _jsx(RowsBottom, { children: _jsx(RowHandler, { rows: view.rows.bottom, withStyles: true, pinned: true }) })] })] }) }) }), _jsx("button", { tabIndex: 0, onClick: () => { }, children: "Bottom Capture" })] }));
+}

package/dist/__play__/grid-navigation/horizontal-navigation.pt.d.ts

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