@1771technologies/lytenyte-pro 1.0.14 → 1.0.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (104) hide show
  1. package/dist/__play__/cell-selections/cell-selection.play.d.ts +5 -0
  2. package/dist/__play__/{grid-navigation/normal-layout.play.js → cell-selections/cell-selection.play.js} +32 -24
  3. package/dist/__play__/test-utils/row-handler.js +3 -3
  4. package/dist/cell-selection/cell-selection-driver.js +5 -2
  5. package/dist/context.d.ts +2 -1
  6. package/dist/context.js +5 -4
  7. package/dist/grid/cell.d.ts +6 -0
  8. package/dist/grid/cell.js +3 -0
  9. package/dist/{header → grid}/header-cell.d.ts +2 -2
  10. package/dist/grid/header-cell.js +4 -0
  11. package/dist/grid/header-group-cell.d.ts +6 -0
  12. package/dist/grid/header-group-cell.js +3 -0
  13. package/dist/grid/header-row.d.ts +5 -0
  14. package/dist/grid/header-row.js +2 -0
  15. package/dist/grid/header.js +2 -0
  16. package/dist/{root → grid}/root.d.ts +1 -1
  17. package/dist/grid/root.js +37 -0
  18. package/dist/{rows → grid}/row-full-width.d.ts +2 -1
  19. package/dist/grid/row-full-width.js +4 -0
  20. package/dist/grid/row.d.ts +8 -0
  21. package/dist/grid/row.js +4 -0
  22. package/dist/grid/rows-container.js +2 -0
  23. package/dist/grid/rows-sections.js +13 -0
  24. package/dist/grid/viewport.js +9 -0
  25. package/dist/grid.d.ts +7 -7
  26. package/dist/grid.js +11 -11
  27. package/dist/types/types.d.ts +6 -6
  28. package/package.json +7 -7
  29. package/dist/__play__/grid-navigation/cell-spans-large.play.d.ts +0 -3
  30. package/dist/__play__/grid-navigation/cell-spans-large.play.js +0 -26
  31. package/dist/__play__/grid-navigation/cell-spans-with-pins.play.d.ts +0 -3
  32. package/dist/__play__/grid-navigation/cell-spans-with-pins.play.js +0 -27
  33. package/dist/__play__/grid-navigation/cell-spans.play.d.ts +0 -3
  34. package/dist/__play__/grid-navigation/cell-spans.play.js +0 -52
  35. package/dist/__play__/grid-navigation/cell-with-tabbables.play.d.ts +0 -3
  36. package/dist/__play__/grid-navigation/cell-with-tabbables.play.js +0 -47
  37. package/dist/__play__/grid-navigation/column-groups.play.d.ts +0 -3
  38. package/dist/__play__/grid-navigation/column-groups.play.js +0 -24
  39. package/dist/__play__/grid-navigation/full-width-rows.play.d.ts +0 -6
  40. package/dist/__play__/grid-navigation/full-width-rows.play.js +0 -67
  41. package/dist/__play__/grid-navigation/horizontal-navigation.pt.d.ts +0 -1
  42. package/dist/__play__/grid-navigation/horizontal-navigation.pt.js +0 -877
  43. package/dist/__play__/grid-navigation/normal-layout.play.d.ts +0 -10
  44. package/dist/__play__/grid-navigation/pinned-gap-layout.play.d.ts +0 -3
  45. package/dist/__play__/grid-navigation/pinned-gap-layout.play.js +0 -11
  46. package/dist/__play__/grid-navigation/row-detail-with-spans.play.d.ts +0 -6
  47. package/dist/__play__/grid-navigation/row-detail-with-spans.play.js +0 -79
  48. package/dist/__play__/grid-navigation/row-detail.play.d.ts +0 -6
  49. package/dist/__play__/grid-navigation/row-detail.play.js +0 -78
  50. package/dist/__play__/grid-navigation/row-detail.pt.d.ts +0 -1
  51. package/dist/__play__/grid-navigation/row-detail.pt.js +0 -68
  52. package/dist/__play__/grid-navigation/vertical-navigation.pt.d.ts +0 -1
  53. package/dist/__play__/grid-navigation/vertical-navigation.pt.js +0 -176
  54. package/dist/cells/+types.cell.d.ts +0 -13
  55. package/dist/cells/+types.cell.js +0 -1
  56. package/dist/cells/cell-default.d.ts +0 -2
  57. package/dist/cells/cell-default.js +0 -8
  58. package/dist/cells/cell-editor.d.ts +0 -6
  59. package/dist/cells/cell-editor.js +0 -110
  60. package/dist/cells/cell-spacer.d.ts +0 -9
  61. package/dist/cells/cell-spacer.js +0 -39
  62. package/dist/cells/cell.d.ts +0 -5
  63. package/dist/cells/cell.js +0 -44
  64. package/dist/cells/use-cell-style.d.ts +0 -3
  65. package/dist/cells/use-cell-style.js +0 -51
  66. package/dist/header/header-cell.js +0 -22
  67. package/dist/header/header-group-cell.d.ts +0 -5
  68. package/dist/header/header-group-cell.js +0 -16
  69. package/dist/header/header-row.d.ts +0 -4
  70. package/dist/header/header-row.js +0 -10
  71. package/dist/header/header.js +0 -12
  72. package/dist/header/resize-handler.d.ts +0 -12
  73. package/dist/header/resize-handler.js +0 -136
  74. package/dist/header/use-drag-move.d.ts +0 -14
  75. package/dist/header/use-drag-move.js +0 -97
  76. package/dist/header/use-header-cell-renderer.d.ts +0 -4
  77. package/dist/header/use-header-cell-renderer.js +0 -37
  78. package/dist/root/root.js +0 -108
  79. package/dist/rows/row/context.d.ts +0 -15
  80. package/dist/rows/row/context.js +0 -14
  81. package/dist/rows/row/row.d.ts +0 -7
  82. package/dist/rows/row/row.js +0 -25
  83. package/dist/rows/row/use-row-context-value.d.ts +0 -6
  84. package/dist/rows/row/use-row-context-value.js +0 -45
  85. package/dist/rows/row-detail-row.d.ts +0 -4
  86. package/dist/rows/row-detail-row.js +0 -47
  87. package/dist/rows/row-full-width.js +0 -19
  88. package/dist/rows/rows-container.js +0 -9
  89. package/dist/rows/rows-sections.js +0 -27
  90. package/dist/rows/scrollers/native-scroller.d.ts +0 -2
  91. package/dist/rows/scrollers/native-scroller.js +0 -4
  92. package/dist/utils/cycle-sorts.d.ts +0 -2
  93. package/dist/utils/cycle-sorts.js +0 -16
  94. package/dist/viewport/begin-editing.d.ts +0 -5
  95. package/dist/viewport/begin-editing.js +0 -15
  96. package/dist/viewport/viewport.js +0 -85
  97. /package/dist/{root → grid}/dialog-driver.d.ts +0 -0
  98. /package/dist/{root → grid}/dialog-driver.js +0 -0
  99. /package/dist/{header → grid}/header.d.ts +0 -0
  100. /package/dist/{root → grid}/popover-driver.d.ts +0 -0
  101. /package/dist/{root → grid}/popover-driver.js +0 -0
  102. /package/dist/{rows → grid}/rows-container.d.ts +0 -0
  103. /package/dist/{rows → grid}/rows-sections.d.ts +0 -0
  104. /package/dist/{viewport → grid}/viewport.d.ts +0 -0
@@ -0,0 +1,5 @@
1
+ import "../../../main.css";
2
+ import "./cell-selection.css";
3
+ export default function CellSelection({ data }: {
4
+ data?: any[];
5
+ }): import("react/jsx-runtime").JSX.Element;
@@ -1,21 +1,23 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import "./navigation.css";
1
+ import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
2
+ import "../../../main.css";
3
+ import "./cell-selection.css";
4
+ import { useClientRowDataSource } from "../../row-data-source-client/use-client-data-source.js";
3
5
  import { useLyteNyte } from "../../state/use-lytenyte.js";
4
- import { bankDataSmall } from "../test-utils/bank-data-smaller.js";
5
- import { Root } from "../../root/root.js";
6
- import { Viewport } from "../../viewport/viewport.js";
7
- import { Header } from "../../header/header.js";
8
- import { HeaderRow } from "../../header/header-row.js";
9
- import { HeaderGroupCell } from "../../header/header-group-cell.js";
10
- import { HeaderCell } from "../../header/header-cell.js";
11
- import { RowsContainer } from "../../rows/rows-container.js";
12
- import { RowsBottom, RowsCenter, RowsTop } from "../../rows/rows-sections.js";
6
+ import { useId } from "react";
7
+ import { Viewport } from "../../grid/viewport.js";
8
+ import { Root } from "../../grid/root.js";
9
+ import { Header } from "../../grid/header.js";
10
+ import { HeaderRow } from "../../grid/header-row.js";
11
+ import { HeaderGroupCell } from "../../grid/header-group-cell.js";
12
+ import { HeaderCell } from "../../grid/header-cell.js";
13
+ import { RowsContainer } from "../../grid/rows-container.js";
14
+ import { RowsBottom, RowsCenter, RowsTop } from "../../grid/rows-sections.js";
13
15
  import { RowHandler } from "../test-utils/row-handler.js";
14
- import { useClientRowDataSource } from "../../row-data-source-client/use-client-data-source.js";
15
- const baseColumns = [
16
+ import { bankDataSmall } from "../test-utils/bank-data-smaller.js";
17
+ const columns = [
16
18
  { id: "age" },
17
19
  { id: "job" },
18
- { id: "balance" },
20
+ { id: "balance", pin: "start" },
19
21
  { id: "education" },
20
22
  { id: "marital" },
21
23
  { id: "default" },
@@ -31,21 +33,27 @@ const baseColumns = [
31
33
  { id: "poutcome" },
32
34
  { id: "y" },
33
35
  ];
34
- export default function BasicRendering({ rtl, columns, pinTop, center, pinBot, floatingRow, }) {
36
+ export default function CellSelection({ data = bankDataSmall }) {
35
37
  const ds = useClientRowDataSource({
36
- data: center ? bankDataSmall.slice(0, center) : bankDataSmall,
37
- topData: pinTop ? bankDataSmall.slice(0, pinTop) : [],
38
- bottomData: pinBot ? bankDataSmall.slice(0, pinBot) : [],
38
+ data: data,
39
+ topData: data.slice(0, 2),
40
+ bottomData: data.slice(0, 2),
39
41
  });
40
42
  const g = useLyteNyte({
41
- gridId: "x",
42
- columns: columns ?? baseColumns,
43
+ gridId: useId(),
44
+ columns,
43
45
  rowDataSource: ds,
44
- rtl: rtl,
45
- floatingRowEnabled: floatingRow,
46
+ cellSelectionMode: "range",
47
+ columnBase: {
48
+ uiHints: {
49
+ movable: true,
50
+ resizable: true,
51
+ },
52
+ },
46
53
  });
47
54
  const view = g.view.useValue();
48
- 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) => {
55
+ const selections = g.state.cellSelections.useValue();
56
+ return (_jsxs("div", { children: [_jsxs("div", { children: [_jsxs("button", { onClick: () => g.state.rtl.set((prev) => !prev), children: ["RTL: ", g.state.rtl.get() ? "Yes" : "No"] }), _jsx("button", { onClick: () => g.state.columnMarkerEnabled.set((prev) => !prev), children: "Toggle Marker" }), _jsx("button", { onClick: () => g.state.cellSelectionMode.set((prev) => prev === "multi-range" ? "range" : "multi-range"), children: "Range Selection" }), _jsx("pre", { children: JSON.stringify(selections) })] }), _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) => {
49
57
  return (_jsx(HeaderRow, { headerRowIndex: i, children: row.map((c) => {
50
58
  if (c.kind === "group") {
51
59
  return (_jsx(HeaderGroupCell, { cell: c, style: {
@@ -68,5 +76,5 @@ export default function BasicRendering({ rtl, columns, pinTop, center, pinBot, f
68
76
  borderRight: "1px solid light-dark(gray, #444242)",
69
77
  } }, c.column.id));
70
78
  }) }, i));
71
- }) }), _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" })] }));
79
+ }) }), _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 }) })] })] }) }) })] }));
72
80
  }
@@ -1,8 +1,8 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import { fastDeepMemo } from "@1771technologies/lytenyte-react-hooks";
3
- import { Cell } from "../../cells/cell.js";
4
- import { Row } from "../../rows/row/row.js";
5
- import { RowFullWidth } from "../../rows/row-full-width.js";
3
+ import { Row } from "../../grid/row.js";
4
+ import { Cell } from "../../grid/cell.js";
5
+ import { RowFullWidth } from "../../grid/row-full-width.js";
6
6
  export const RowHandler = fastDeepMemo((props) => {
7
7
  return props.rows.map((row) => {
8
8
  if (row.kind === "full-width")
@@ -117,8 +117,11 @@ export function CellSelectionDriver() {
117
117
  const pointerDown = (event) => {
118
118
  if (!isNormalClick(event)) {
119
119
  document.removeEventListener("pointermove", pointerMove);
120
- // Prevent the default for the context menu, otherwise the cell right clicked will be focused,
121
- // resulting in the cell selection changing. if (event.button == 2) event.preventDefault();
120
+ // Prevent the default for the context menu, otherwise the cell
121
+ // right clicked will be focused,
122
+ // resulting in the cell selection changing.
123
+ if (event.button == 2)
124
+ event.preventDefault();
122
125
  return;
123
126
  }
124
127
  isAdditive = isMultiRange && (event.ctrlKey || event.metaKey);
package/dist/context.d.ts CHANGED
@@ -1,10 +1,11 @@
1
1
  import type { Grid } from "./+types.js";
2
2
  import type { InternalAtoms } from "./state/+types.js";
3
+ import type { Provider } from "react";
3
4
  export interface GridRootContext {
4
5
  readonly ref: (el: HTMLElement | null) => void;
5
6
  readonly grid: Grid<any> & {
6
7
  internal: InternalAtoms;
7
8
  };
8
9
  }
9
- export declare const RootProvider: import("react").Provider<GridRootContext>;
10
+ export declare const RootProvider: Provider<GridRootContext>;
10
11
  export declare const useGridRoot: () => GridRootContext;
package/dist/context.js CHANGED
@@ -1,4 +1,5 @@
1
- import { createContext, useContext } from "react";
2
- const context = createContext(null);
3
- export const RootProvider = context.Provider;
4
- export const useGridRoot = () => useContext(context);
1
+ import { RootProvider as CoreProvider, useGridRoot as useCoreRoot, } from "@1771technologies/lytenyte-core/yinternal";
2
+ // The PRO context is a superset of the Core context, but we still want to leverage some of the core
3
+ // components to share code. Hence we share the context functionality.
4
+ export const RootProvider = CoreProvider;
5
+ export const useGridRoot = useCoreRoot;
@@ -0,0 +1,6 @@
1
+ import { type JSX, type ReactNode } from "react";
2
+ import type { RowCellLayout } from "../+types";
3
+ export interface CellProps {
4
+ readonly cell: RowCellLayout<any>;
5
+ }
6
+ export declare const Cell: (props: Omit<JSX.IntrinsicElements["div"], "children"> & CellProps) => ReactNode;
@@ -0,0 +1,3 @@
1
+ import {} from "react";
2
+ import { Cell as CellCore } from "@1771technologies/lytenyte-core/yinternal";
3
+ export const Cell = CellCore;
@@ -1,4 +1,4 @@
1
- import { type CSSProperties } from "react";
1
+ import { type CSSProperties, type JSX, type ReactNode } from "react";
2
2
  import type { HeaderCellFloating, HeaderCellLayout } from "../+types";
3
3
  import { type SlotComponent } from "@1771technologies/lytenyte-react-hooks";
4
4
  export interface HeaderCellProps<T> {
@@ -7,4 +7,4 @@ export interface HeaderCellProps<T> {
7
7
  readonly resizerClassName?: string;
8
8
  readonly resizerStyle?: CSSProperties;
9
9
  }
10
- export declare const HeaderCell: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & HeaderCellProps<any>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
10
+ export declare const HeaderCell: (props: JSX.IntrinsicElements["div"] & HeaderCellProps<any>) => ReactNode;
@@ -0,0 +1,4 @@
1
+ import {} from "react";
2
+ import {} from "@1771technologies/lytenyte-react-hooks";
3
+ import { HeaderCell as HeaderCellCore } from "@1771technologies/lytenyte-core/yinternal";
4
+ export const HeaderCell = HeaderCellCore;
@@ -0,0 +1,6 @@
1
+ import { type JSX, type ReactNode } from "react";
2
+ import type { HeaderGroupCellLayout } from "../+types";
3
+ export interface HeaderGroupCellProps {
4
+ readonly cell: HeaderGroupCellLayout;
5
+ }
6
+ export declare const HeaderGroupCell: (props: JSX.IntrinsicElements["div"] & HeaderGroupCellProps) => ReactNode;
@@ -0,0 +1,3 @@
1
+ import {} from "react";
2
+ import { HeaderGroupCell as Core } from "@1771technologies/lytenyte-core/yinternal";
3
+ export const HeaderGroupCell = Core;
@@ -0,0 +1,5 @@
1
+ import type { JSX, ReactNode } from "react";
2
+ export interface HeaderRowProps {
3
+ readonly headerRowIndex: number;
4
+ }
5
+ export declare const HeaderRow: (props: JSX.IntrinsicElements["div"] & HeaderRowProps) => ReactNode;
@@ -0,0 +1,2 @@
1
+ import { HeaderRow as Core } from "@1771technologies/lytenyte-core/yinternal";
2
+ export const HeaderRow = Core;
@@ -0,0 +1,2 @@
1
+ import { Header as Core } from "@1771technologies/lytenyte-core/yinternal";
2
+ export const Header = Core;
@@ -5,4 +5,4 @@ export type RootProps<T> = {
5
5
  } & {
6
6
  [k in keyof GridEvents<T> as `on${Capitalize<k>}`]: GridEvents<T>[k];
7
7
  };
8
- export declare function Root<T = any>({ grid, children, ...events }: PropsWithChildren<RootProps<T>>): import("react/jsx-runtime").JSX.Element;
8
+ export declare function Root<T = any>({ children, grid, ...props }: PropsWithChildren<RootProps<T>>): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,37 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { useEffect } from "react";
3
+ import { DialogDriver } from "./dialog-driver.js";
4
+ import { PopoverDriver } from "./popover-driver.js";
5
+ import { CellSelectionDriver } from "../cell-selection/cell-selection-driver.js";
6
+ import { hasAValidLicense, licenseState } from "../license.js";
7
+ import { Root as RootCore } from "@1771technologies/lytenyte-core/yinternal";
8
+ export function Root({ children, grid, ...props }) {
9
+ useEffect(() => {
10
+ if (hasAValidLicense)
11
+ return;
12
+ const existing = document.getElementById("lng1771-watermark");
13
+ if (existing)
14
+ return;
15
+ const invalidLicenseWatermark = document.createElement("div");
16
+ invalidLicenseWatermark.style.position = "fixed";
17
+ invalidLicenseWatermark.style.bottom = "0px";
18
+ invalidLicenseWatermark.style.insetInlineEnd = "0px";
19
+ invalidLicenseWatermark.style.background = "rgb(255, 167, 167)";
20
+ invalidLicenseWatermark.style.color = "black";
21
+ invalidLicenseWatermark.style.fontSize = "1.2rem";
22
+ invalidLicenseWatermark.style.fontWeight = "bold";
23
+ invalidLicenseWatermark.style.border = "1px solid black";
24
+ invalidLicenseWatermark.style.padding = "16px";
25
+ if (licenseState === "expired")
26
+ invalidLicenseWatermark.innerHTML = `LyteNyte Grid: License key expired. Your license covers earlier versions only.`;
27
+ else if (licenseState === "invalid")
28
+ invalidLicenseWatermark.innerHTML = `LyteNyte Grid: Invalid license key. Please verify the key and try again.`;
29
+ else
30
+ invalidLicenseWatermark.innerHTML = `LyteNyte Grid PRO is being used for evaluation.
31
+ <a href="https://1771Technologies.com/pricing">Click here</a> to secure your license.`;
32
+ document.body.appendChild(invalidLicenseWatermark);
33
+ return () => invalidLicenseWatermark.remove();
34
+ }, []);
35
+ const cellSelectionMode = grid.state.cellSelectionMode.useValue();
36
+ return (_jsxs(RootCore, { ...props, grid: grid, children: [_jsx(DialogDriver, {}), _jsx(PopoverDriver, {}), cellSelectionMode !== "none" && _jsx(CellSelectionDriver, {}), children] }));
37
+ }
@@ -1,3 +1,4 @@
1
+ import { type JSX, type ReactNode } from "react";
1
2
  import type { RowFullWidthRowLayout } from "../+types";
2
3
  import { type DropWrapProps } from "@1771technologies/lytenyte-shared";
3
4
  export interface RowFullWidthProps extends Omit<DropWrapProps, "accepted"> {
@@ -5,4 +6,4 @@ export interface RowFullWidthProps extends Omit<DropWrapProps, "accepted"> {
5
6
  readonly space?: "viewport" | "scroll-width";
6
7
  readonly accepted?: string[];
7
8
  }
8
- export declare const RowFullWidth: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & RowFullWidthProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
9
+ export declare const RowFullWidth: (props: JSX.IntrinsicElements["div"] & RowFullWidthProps) => ReactNode;
@@ -0,0 +1,4 @@
1
+ import {} from "react";
2
+ import {} from "@1771technologies/lytenyte-shared";
3
+ import { RowFullWidth as RowFullWidthCore } from "@1771technologies/lytenyte-core/yinternal";
4
+ export const RowFullWidth = RowFullWidthCore;
@@ -0,0 +1,8 @@
1
+ import { type JSX, type ReactNode } from "react";
2
+ import type { RowNormalRowLayout } from "../+types";
3
+ import { type DropWrapProps } from "@1771technologies/lytenyte-shared";
4
+ export interface RowProps extends Omit<DropWrapProps, "accepted"> {
5
+ readonly row: RowNormalRowLayout<any>;
6
+ readonly accepted?: string[];
7
+ }
8
+ export declare const Row: (props: Omit<JSX.IntrinsicElements["div"], "onDrag"> & RowProps) => ReactNode;
@@ -0,0 +1,4 @@
1
+ import {} from "react";
2
+ import {} from "@1771technologies/lytenyte-shared";
3
+ import { Row as RowCore } from "@1771technologies/lytenyte-core/yinternal";
4
+ export const Row = RowCore;
@@ -0,0 +1,2 @@
1
+ import { RowsContainer as RowsContainerCore } from "@1771technologies/lytenyte-core/yinternal";
2
+ export const RowsContainer = RowsContainerCore;
@@ -0,0 +1,13 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { forwardRef } from "react";
3
+ import { RowsTop as RowsTopCore, RowsBottom as RowsBottomCore, RowsCenter as RowsCenterCore, NativeScroller, } from "@1771technologies/lytenyte-core/yinternal";
4
+ import { CellSelectionBottom, CellSelectionCenter, CellSelectionTop, } from "../cell-selection/cell-selection-containers.js";
5
+ export const RowsTop = forwardRef(function RowsTop(props, forwarded) {
6
+ return (_jsxs(RowsTopCore, { ...props, ref: forwarded, children: [props.children, _jsx(CellSelectionTop, {})] }));
7
+ });
8
+ export const RowsCenter = forwardRef(function RowsCenter({ children, ...props }, forwarded) {
9
+ return (_jsx(RowsCenterCore, { ...props, ref: forwarded, children: _jsxs(NativeScroller, { children: [_jsx(CellSelectionCenter, {}), children] }) }));
10
+ });
11
+ export const RowsBottom = forwardRef(function RowsBottom(props, forwarded) {
12
+ return (_jsxs(RowsBottomCore, { ...props, ref: forwarded, children: [_jsx(CellSelectionBottom, {}), props.children] }));
13
+ });
@@ -0,0 +1,9 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { forwardRef } from "react";
3
+ import { useGridRoot } from "../context.js";
4
+ import { Viewport as Core } from "@1771technologies/lytenyte-core/yinternal";
5
+ export const Viewport = forwardRef(function Viewport(props, forwarded) {
6
+ const ctx = useGridRoot();
7
+ const cellSelectionMode = ctx.grid.state.cellSelectionMode.useValue();
8
+ return (_jsx(Core, { ...props, "data-ln-has-cell-selection": cellSelectionMode !== "none", ref: forwarded }));
9
+ });
package/dist/grid.d.ts CHANGED
@@ -1,17 +1,17 @@
1
- import { Root } from "./root/root.js";
1
+ import { Root } from "./grid/root.js";
2
2
  import { useLyteNyte } from "./state/use-lytenyte.js";
3
3
  export declare const Grid: {
4
4
  Root: typeof Root;
5
5
  Header: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
6
- HeaderGroupCell: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("./header/header-group-cell.js").HeaderGroupCellProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
7
- HeaderRow: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("./header/header-row.js").HeaderRowProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
8
- HeaderCell: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("./header/header-cell.js").HeaderCellProps<any>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
9
- Cell: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "children"> & import("./cells/cell.js").CellProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
10
- RowFullWidth: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("./rows/row-full-width.js").RowFullWidthProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
6
+ HeaderGroupCell: (props: import("react").JSX.IntrinsicElements["div"] & import("./grid/header-group-cell.js").HeaderGroupCellProps) => import("react").ReactNode;
7
+ HeaderRow: (props: import("react").JSX.IntrinsicElements["div"] & import("./grid/header-row.js").HeaderRowProps) => import("react").ReactNode;
8
+ HeaderCell: (props: import("react").JSX.IntrinsicElements["div"] & import("./grid/header-cell.js").HeaderCellProps<any>) => import("react").ReactNode;
9
+ Cell: (props: Omit<import("react").JSX.IntrinsicElements["div"], "children"> & import("./grid/cell.js").CellProps) => import("react").ReactNode;
10
+ RowFullWidth: (props: import("react").JSX.IntrinsicElements["div"] & import("./grid/row-full-width.js").RowFullWidthProps) => import("react").ReactNode;
11
11
  RowsContainer: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
12
12
  RowsBottom: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
13
13
  RowsTop: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
14
- Row: import("react").NamedExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "onDrag"> & import("./rows/row/row.js").RowProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
14
+ Row: (props: Omit<import("react").JSX.IntrinsicElements["div"], "onDrag"> & import("./grid/row.js").RowProps) => import("react").ReactNode;
15
15
  RowsCenter: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
16
16
  Viewport: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
17
17
  useLyteNyte: typeof useLyteNyte;
package/dist/grid.js CHANGED
@@ -1,15 +1,15 @@
1
- import { Cell } from "./cells/cell.js";
2
- import { Header } from "./header/header.js";
3
- import { HeaderCell } from "./header/header-cell.js";
4
- import { HeaderGroupCell } from "./header/header-group-cell.js";
5
- import { HeaderRow } from "./header/header-row.js";
6
- import { Root } from "./root/root.js";
7
- import { RowFullWidth } from "./rows/row-full-width.js";
8
- import { Row } from "./rows/row/row.js";
9
- import { RowsContainer } from "./rows/rows-container.js";
10
- import { RowsBottom, RowsCenter, RowsTop } from "./rows/rows-sections.js";
1
+ import { Cell } from "./grid/cell.js";
2
+ import { Header } from "./grid/header.js";
3
+ import { HeaderCell } from "./grid/header-cell.js";
4
+ import { HeaderGroupCell } from "./grid/header-group-cell.js";
5
+ import { HeaderRow } from "./grid/header-row.js";
6
+ import { Root } from "./grid/root.js";
7
+ import { RowFullWidth } from "./grid/row-full-width.js";
8
+ import { Row } from "./grid/row.js";
9
+ import { RowsContainer } from "./grid/rows-container.js";
10
+ import { RowsBottom, RowsCenter, RowsTop } from "./grid/rows-sections.js";
11
11
  import { useLyteNyte } from "./state/use-lytenyte.js";
12
- import { Viewport } from "./viewport/viewport.js";
12
+ import { Viewport } from "./grid/viewport.js";
13
13
  export const Grid = {
14
14
  Root,
15
15
  Header,
@@ -1,8 +1,8 @@
1
1
  export type * from "../+types";
2
- export type { CellProps } from "../cells/cell";
3
- export type { HeaderCellProps } from "../header/header-cell";
4
- export type { HeaderGroupCellProps } from "../header/header-group-cell";
5
- export type { HeaderRowProps } from "../header/header-row";
6
- export type { RootProps } from "../root/root";
7
- export type { RowFullWidthProps } from "../rows/row-full-width";
2
+ export type { CellProps } from "../grid/cell";
3
+ export type { HeaderCellProps } from "../grid/header-cell";
4
+ export type { HeaderRowProps } from "../grid/header-row";
5
+ export type { HeaderGroupCellProps } from "../grid/header-group-cell";
6
+ export type { RootProps } from "../grid/root";
7
+ export type { RowFullWidthProps } from "../grid/row-full-width";
8
8
  export {};
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@1771technologies/lytenyte-pro",
3
3
  "description": "Blazingly fast headless React data grid with 100s of features.",
4
- "version": "1.0.14",
4
+ "version": "1.0.15",
5
5
  "type": "module",
6
6
  "license": "COMMERCIAL",
7
7
  "files": [
@@ -48,12 +48,12 @@
48
48
  "access": "public"
49
49
  },
50
50
  "dependencies": {
51
- "@1771technologies/lytenyte-core": "1.0.14",
52
- "@1771technologies/lytenyte-dragon": "1.0.14",
53
- "@1771technologies/lytenyte-shared": "1.0.14",
54
- "@1771technologies/lytenyte-dom-utils": "1.0.14",
55
- "@1771technologies/lytenyte-js-utils": "1.0.14",
56
- "@1771technologies/lytenyte-react-hooks": "1.0.14"
51
+ "@1771technologies/lytenyte-dragon": "1.0.15",
52
+ "@1771technologies/lytenyte-core": "1.0.15",
53
+ "@1771technologies/lytenyte-shared": "1.0.15",
54
+ "@1771technologies/lytenyte-dom-utils": "1.0.15",
55
+ "@1771technologies/lytenyte-js-utils": "1.0.15",
56
+ "@1771technologies/lytenyte-react-hooks": "1.0.15"
57
57
  },
58
58
  "peerDependencies": {
59
59
  "react": "^18.0.0 || ^19.0.0",
@@ -1,3 +0,0 @@
1
- export default function CellSpansLarge({ rtl }: {
2
- rtl?: boolean;
3
- }): import("react/jsx-runtime").JSX.Element;
@@ -1,26 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import NormalLayout from "./normal-layout.play.js";
3
- const columns = [
4
- {
5
- id: "age",
6
- colSpan: (c) => {
7
- return c.rowIndex === 0 ? 10 : 1;
8
- },
9
- },
10
- { id: "marital" },
11
- { id: "default" },
12
- { id: "housing", colSpan: 2 },
13
- { id: "loan" },
14
- { id: "contact" },
15
- { id: "day" },
16
- { id: "month" },
17
- { id: "duration" },
18
- { id: "campaign" },
19
- { id: "pdays" },
20
- { id: "previous" },
21
- { id: "poutcome", colSpan: 2 },
22
- { id: "y" },
23
- ];
24
- export default function CellSpansLarge({ rtl }) {
25
- return _jsx(NormalLayout, { columns: columns, rtl: rtl });
26
- }
@@ -1,3 +0,0 @@
1
- export default function CellSpansWithPins({ rtl }: {
2
- rtl?: boolean;
3
- }): import("react/jsx-runtime").JSX.Element;
@@ -1,27 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import NormalLayout from "./normal-layout.play.js";
3
- const columns = [
4
- {
5
- id: "age",
6
- pin: "start",
7
- colSpan: (c) => {
8
- return c.rowIndex === 0 ? 10 : 1;
9
- },
10
- },
11
- { id: "marital", pin: "start" },
12
- { id: "default" },
13
- { id: "housing", colSpan: 2 },
14
- { id: "loan" },
15
- { id: "contact", pin: "end" },
16
- { id: "day", pin: "end" },
17
- { id: "month" },
18
- { id: "duration" },
19
- { id: "campaign" },
20
- { id: "pdays" },
21
- { id: "previous" },
22
- { id: "poutcome", colSpan: 2 },
23
- { id: "y" },
24
- ];
25
- export default function CellSpansWithPins({ rtl }) {
26
- return _jsx(NormalLayout, { columns: columns, rtl: rtl });
27
- }
@@ -1,3 +0,0 @@
1
- export default function CellSpans({ rtl }: {
2
- rtl?: boolean;
3
- }): import("react/jsx-runtime").JSX.Element;
@@ -1,52 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import NormalLayout from "./normal-layout.play.js";
3
- const columns = [
4
- {
5
- id: "age",
6
- colSpan: (c) => {
7
- return c.rowIndex === 0 || c.rowIndex === 12 ? 3 : 1;
8
- },
9
- },
10
- {
11
- id: "job",
12
- colSpan: (c) => {
13
- return c.rowIndex === 2 ? 3 : 1;
14
- },
15
- },
16
- { id: "balance" },
17
- {
18
- id: "education",
19
- colSpan: (t) => {
20
- if (t.rowIndex === 4)
21
- return 2;
22
- if (t.rowIndex === 12)
23
- return 2;
24
- return 1;
25
- },
26
- rowSpan: (t) => {
27
- if (t.rowIndex === 4)
28
- return 3;
29
- if (t.rowIndex === 8)
30
- return 3;
31
- if (t.rowIndex === 12)
32
- return 2;
33
- return 1;
34
- },
35
- },
36
- { id: "marital" },
37
- { id: "default" },
38
- { id: "housing", colSpan: 2 },
39
- { id: "loan" },
40
- { id: "contact" },
41
- { id: "day" },
42
- { id: "month" },
43
- { id: "duration" },
44
- { id: "campaign" },
45
- { id: "pdays" },
46
- { id: "previous" },
47
- { id: "poutcome", colSpan: 2 },
48
- { id: "y" },
49
- ];
50
- export default function CellSpans({ rtl }) {
51
- return _jsx(NormalLayout, { columns: columns, rtl: rtl });
52
- }
@@ -1,3 +0,0 @@
1
- export default function CellWithTabbables({ rtl }: {
2
- rtl?: boolean;
3
- }): import("react/jsx-runtime").JSX.Element;
@@ -1,47 +0,0 @@
1
- import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
2
- import NormalLayout from "./normal-layout.play.js";
3
- const columns = [
4
- {
5
- id: "age",
6
- colSpan: (c) => {
7
- return c.rowIndex === 0 || c.rowIndex === 12 ? 3 : 1;
8
- },
9
- cellRenderer: () => {
10
- return (_jsxs(_Fragment, { children: [_jsx("button", { tabIndex: 0, children: "A" }), _jsx("button", { tabIndex: 0, children: "B" }), _jsx("button", { tabIndex: 0, children: "C" })] }));
11
- },
12
- },
13
- {
14
- id: "job",
15
- colSpan: (c) => {
16
- return c.rowIndex === 2 ? 3 : 1;
17
- },
18
- },
19
- { id: "balance" },
20
- {
21
- id: "education",
22
- colSpan: (t) => {
23
- if (t.rowIndex === 4)
24
- return 2;
25
- if (t.rowIndex === 12)
26
- return 2;
27
- return 1;
28
- },
29
- cellRenderer: () => {
30
- return (_jsxs(_Fragment, { children: [_jsx("button", { tabIndex: 0, children: "Prev" }), _jsx("button", { tabIndex: -1, children: "Not Tabbable" }), _jsx("button", { tabIndex: 0, children: "Next" })] }));
31
- },
32
- rowSpan: (t) => {
33
- if (t.rowIndex === 4)
34
- return 3;
35
- if (t.rowIndex === 8)
36
- return 3;
37
- if (t.rowIndex === 12)
38
- return 2;
39
- return 1;
40
- },
41
- },
42
- { id: "marital" },
43
- { id: "default" },
44
- ];
45
- export default function CellWithTabbables({ rtl }) {
46
- return _jsx(NormalLayout, { columns: columns, rtl: rtl });
47
- }
@@ -1,3 +0,0 @@
1
- export default function ColumnGroups({ rtl }: {
2
- rtl?: boolean;
3
- }): import("react/jsx-runtime").JSX.Element;