@1771technologies/lytenyte-pro 0.0.62 → 0.0.63

package/dist/column-manager.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { IsoResizeObserver, getPreciseElementDimensions, clsx } from "@1771technologies/js-utils";
-import { u as useDragStore, a as useDrag, C as Checkbox, I as Input, D as DragProvider } from "./drag-store-jYWgvRwR.js";
+import { u as useDragStore, a as useDrag, C as Checkbox, I as Input, D as DragProvider } from "./drag-store-D6Jfml4y.js";
 import "@1771technologies/react-sizer";
 import { useCombinedRefs, useEvent } from "@1771technologies/react-utils";
 import "@1771technologies/grid-provider";
@@ -8,7 +8,7 @@ import { useRef, useState, useEffect, useCallback, useMemo, createContext, useCo
 import "@1771technologies/react-dragon";
 import "@1771technologies/grid-core";
 import { c as useGrid, G as GridProvider } from "./useScrollLock-D4UY33Sb.js";
-import { g as useEdgeScroll, h as useDraggable, c as canAgg, a as canMeasure, f as useDroppable, u as useAggregationSource, b as useMeasuresSource, d as useRowGroupsSource, e as useColumnPivotSource, P as Pill, M as MenuTrigger, i as PillManagerAggMenu, j as PillManagerMeasureMenu } from "./pill-DDgH6C0H.js";
+import { g as useEdgeScroll, h as useDraggable, c as canAgg, a as canMeasure, f as useDroppable, u as useAggregationSource, b as useMeasuresSource, d as useRowGroupsSource, e as useColumnPivotSource, P as Pill, M as MenuTrigger, i as PillManagerAggMenu, j as PillManagerMeasureMenu } from "./pill-DA4yxWuW.js";
 import { A as ArrowRightIcon } from "./tickmark-icon-CoogRMoO.js";
 import { A as ArrowDownIcon } from "./arrow-down-icon-B-3ldODD.js";
 import { D as DragIcon, M as MeasuresIcon, C as ColumnPivotIcon, R as RowGroupIcon } from "./row-group-icon-DFUMye0v.js";

package/dist/{drag-store-jYWgvRwR.js → drag-store-D6Jfml4y.js}

@@ -554,6 +554,9 @@ function CellMarkerRenderer({ row, api }) {
     doesRowHaveDetail && (isExpanded ? /* @__PURE__ */ jsx(CollapseButton, { onClick: toggleDetail }) : /* @__PURE__ */ jsx(ExpandButton, { onClick: toggleDetail }))
   ] });
 }
+const LoadingSpinner = () => {
+  return /* @__PURE__ */ jsx("div", { className: "lng1771-spinner", children: /* @__PURE__ */ jsx("div", { className: "lng1771-circle" }) });
+};
 function CellGroupRendererDefault({ api, row, column }) {
   if (!api.rowIsGroup(row)) {
     return /* @__PURE__ */ jsx("div", {});
@@ -568,6 +571,7 @@ function CellGroupRendererDefault({ api, row, column }) {
   if (isMulti && columnDepth !== rowDepth) {
     return /* @__PURE__ */ jsx("div", {});
   }
+  const isLoading = !!row.loading;
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -580,7 +584,7 @@ function CellGroupRendererDefault({ api, row, column }) {
         height: "100%"
       },
       children: [
-        /* @__PURE__ */ jsx(
+        !isLoading && !row.error && /* @__PURE__ */ jsx(
           GridButton,
           {
             onClick: () => api.rowGroupToggle(row),
@@ -592,6 +596,38 @@ function CellGroupRendererDefault({ api, row, column }) {
             children: "›"
           }
         ),
+        row.error && !isLoading && /* @__PURE__ */ jsx(
+          GridButton,
+          {
+            onClick: () => api.rowReloadExpansion?.(row),
+            style: {
+              width: 20,
+              height: 20,
+              color: "red"
+            },
+            children: /* @__PURE__ */ jsx(
+              "svg",
+              {
+                xmlns: "http://www.w3.org/2000/svg",
+                fill: "none",
+                viewBox: "0 0 24 24",
+                strokeWidth: 1.5,
+                stroke: "currentColor",
+                width: 20,
+                height: 20,
+                children: /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    d: "M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z"
+                  }
+                )
+              }
+            )
+          }
+        ),
+        isLoading && /* @__PURE__ */ jsx(LoadingSpinner, {}),
         /* @__PURE__ */ jsx(
           "div",
           {
@@ -718,6 +754,84 @@ function useCellPositionChange(api, rowIndex, columnIndex, rowSpan, columnSpan)
   }, [api, columnIndex, ref, rowIndex, tryFocus]);
   return { handleRef, onFocus };
 }
+const skeletonStyle = {
+  display: "block",
+  width: "80%",
+  height: "60%",
+  backgroundColor: "var(--lng1771-gray-05)",
+  borderRadius: "8px",
+  position: "relative",
+  overflow: "hidden"
+};
+const shimmerStyle = {
+  position: "absolute",
+  top: 0,
+  left: 0,
+  width: "100%",
+  height: "100%",
+  backgroundImage: "linear-gradient(90deg, var(--lng1771-gray-05) 0%, var(--lng1771-primary-10) 50%, var(--lng1771-gray-05) 100%)",
+  animation: "lng1771-shimmer 1.5s infinite"
+};
+const Skeleton = ({ className = "" }) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: "100%",
+        height: "100%"
+      },
+      children: /* @__PURE__ */ jsx("div", { style: skeletonStyle, className, children: /* @__PURE__ */ jsx("div", { style: shimmerStyle }) })
+    }
+  );
+};
+function ErrorCellRenderer({ api }) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      style: {
+        color: "red",
+        display: "flex",
+        alignItems: "center",
+        padding: 4,
+        width: "100%",
+        height: "100%",
+        justifyContent: "center",
+        border: "none",
+        backgroundColor: "transparent",
+        gap: 4
+      },
+      onClick: () => {
+        api.rowReload();
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "svg",
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            fill: "none",
+            viewBox: "0 0 24 24",
+            strokeWidth: 1.5,
+            stroke: "currentColor",
+            width: 20,
+            height: 20,
+            children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                d: "M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z"
+              }
+            )
+          }
+        ),
+        "Retry"
+      ]
+    }
+  );
+}
 function CellImpl({
   rowIndex,
   columnIndex,
@@ -755,7 +869,9 @@ function CellImpl({
     rowSpan,
     colSpan
   );
-  return /* @__PURE__ */ jsx(
+  const isLoading = rowNode.loading && rowNode.data == null;
+  const isError = rowNode.error && rowNode.data === null;
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       style: cx.style,
@@ -778,7 +894,11 @@ function CellImpl({
       tabIndex: -1,
       ...events,
       onFocus,
-      children: /* @__PURE__ */ jsx(Renderer, { api, column, columnIndex, row: rowNode })
+      children: [
+        !isLoading && !isError && /* @__PURE__ */ jsx(Renderer, { api, column, columnIndex, row: rowNode }),
+        isLoading && /* @__PURE__ */ jsx(Skeleton, {}),
+        isError && (columnIndex === 0 && column.id !== COLUMN_MARKER_ID || api.getState().columnsVisible.peek()?.[0].id === COLUMN_MARKER_ID && columnIndex === 1) && /* @__PURE__ */ jsx(ErrorCellRenderer, { api })
+      ]
     }
   );
 }

package/dist/filter-manager.js

@@ -1,8 +1,8 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useState, useEffect, useCallback, createContext, useContext, useMemo, forwardRef } from "react";
 import { c as useGrid, G as GridProvider } from "./useScrollLock-D4UY33Sb.js";
-import { S as Select } from "./select-005D5mHt.js";
-import { I as Input, C as Checkbox } from "./drag-store-jYWgvRwR.js";
+import { S as Select } from "./select-zhKMpeeF.js";
+import { I as Input, C as Checkbox } from "./drag-store-D6Jfml4y.js";
 import "@1771technologies/react-sizer";
 import "@1771technologies/react-utils";
 import "@1771technologies/grid-provider";

package/dist/index.js

@@ -1,5 +1,5 @@
-import { C as Checkbox, d as COLUMN_MARKER_ID, H as HEADER_CELL_POSITION, g as getTransform, e as COLUMN_EMPTY_PREFIX, f as HEADER_GROUP_CELL_POSITION, h as CollapseButton, F as FLOATING_CELL_POSITION, i as FULL_ENCODING, j as CellFullWidth, E as END_ENCODING, k as Cell, I as Input, G as GRID_CELL_POSITION, l as GridButton } from "./drag-store-jYWgvRwR.js";
-import { t, n, v, w, B, J, L, K, M, q, p, r, s, P, x, o, z, m, y, R, A } from "./drag-store-jYWgvRwR.js";
+import { C as Checkbox, d as COLUMN_MARKER_ID, H as HEADER_CELL_POSITION, g as getTransform, e as COLUMN_EMPTY_PREFIX, f as HEADER_GROUP_CELL_POSITION, h as CollapseButton, F as FLOATING_CELL_POSITION, i as FULL_ENCODING, j as CellFullWidth, E as END_ENCODING, k as Cell, I as Input, G as GRID_CELL_POSITION, l as GridButton } from "./drag-store-D6Jfml4y.js";
+import { t, n, v, w, B, J, L, K, M, q, p, r, s, P, x, o, z, m, y, R, A } from "./drag-store-D6Jfml4y.js";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { Sizer } from "@1771technologies/react-sizer";
 import { useEvent, useIsoEffect } from "@1771technologies/react-utils";
@@ -3786,7 +3786,9 @@ const createClientDataSourceReact = (init) => {
   return createClientDataSource(init);
 };
 function useClientDataSource(init) {
-  return useState(() => createClientDataSource(init))[0];
+  return useState(() => {
+    return createClientDataSource(init);
+  })[0];
 }
 function useTreeDataSource(init) {
   const [ds] = useState(() => {

package/dist/lytenyte-pro.css

@@ -514,6 +514,15 @@ INPUT
     background-color: var(--lng1771-gray-50);
   }
 }
+
+@keyframes lng1771-shimmer {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
 .lng1771-cell__marker {
   display: flex;
   align-items: center;
@@ -523,6 +532,32 @@ INPUT
   box-sizing: border-box;
   position: relative;
 }
+.lng1771-spinner {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+
+.lng1771-circle {
+  width: 20px;
+  height: 20px;
+  box-sizing: border-box;
+  border: 3px solid rgba(0, 0, 0, 0.1);
+  border-bottom: 3px solid var(--lng1771-primary-50);
+  border-radius: 50%;
+  animation: lng1771-spin 1s linear infinite;
+}
+
+@keyframes lng1771-spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
 .lng1771-row-container {
   background-color: var(--lng1771-gray-00);
   display: flex;

package/dist/{pill-DDgH6C0H.js → pill-DA4yxWuW.js}

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { useRef, useState, useEffect, useCallback, useMemo, forwardRef } from "react";
-import { u as useDragStore, b as useStore } from "./drag-store-jYWgvRwR.js";
+import { u as useDragStore, b as useStore } from "./drag-store-D6Jfml4y.js";
 import { arrayOverlap, clsx } from "@1771technologies/js-utils";
 import { m as mergeProps, E as contains, P as PropTypes } from "./proptypes-BjYr2nFr.js";
 import { u as useButton } from "./useButton-DWXzFgcr.js";

package/dist/pill-manager.js

@@ -3,8 +3,8 @@ import { c as useGrid, G as GridProvider } from "./useScrollLock-D4UY33Sb.js";
 import { useMemo, createContext, useState, useContext, forwardRef, useEffect, useCallback } from "react";
 import { clsx } from "@1771technologies/js-utils";
 import { useDroppable as useDroppable$1 } from "@1771technologies/react-dragon";
-import { c as canAgg, a as canMeasure, u as useAggregationSource, b as useMeasuresSource, d as useRowGroupsSource, e as useColumnPivotSource, f as useDroppable, g as useEdgeScroll, P as Pill, M as MenuTrigger, h as useDraggable, i as PillManagerAggMenu, j as PillManagerMeasureMenu } from "./pill-DDgH6C0H.js";
-import { u as useDragStore, a as useDrag, D as DragProvider } from "./drag-store-jYWgvRwR.js";
+import { c as canAgg, a as canMeasure, u as useAggregationSource, b as useMeasuresSource, d as useRowGroupsSource, e as useColumnPivotSource, f as useDroppable, g as useEdgeScroll, P as Pill, M as MenuTrigger, h as useDraggable, i as PillManagerAggMenu, j as PillManagerMeasureMenu } from "./pill-DA4yxWuW.js";
+import { u as useDragStore, a as useDrag, D as DragProvider } from "./drag-store-D6Jfml4y.js";
 import "@1771technologies/react-sizer";
 import { useCombinedRefs } from "@1771technologies/react-utils";
 import "@1771technologies/grid-provider";

package/dist/{select-005D5mHt.js → select-zhKMpeeF.js}

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "@1771technologies/js-utils";
 import { A as ArrowDownIcon } from "./arrow-down-icon-B-3ldODD.js";
-import { c as CheckMark } from "./drag-store-jYWgvRwR.js";
+import { c as CheckMark } from "./drag-store-D6Jfml4y.js";
 import "@1771technologies/react-sizer";
 import "@1771technologies/react-utils";
 import "@1771technologies/grid-provider";

package/dist/sort-manager.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { useMemo, useState, useEffect, createContext, useContext, forwardRef } from "react";
 import { c as useGrid, G as GridProvider } from "./useScrollLock-D4UY33Sb.js";
 import { clsx } from "@1771technologies/js-utils";
-import { S as Select } from "./select-005D5mHt.js";
+import { S as Select } from "./select-zhKMpeeF.js";
 import { P as PlusIcon } from "./plus-icon-ToqW5CC-.js";
 import { C as CrossIcon } from "./cross-icon-CEMLAlFX.js";
 import { S as Separator } from "./separator-BnPPeAk8.js";

package/dist/types/use-server-data-source.d.ts

@@ -0,0 +1,3 @@
+import { ServerDataSourceInitial } from '@1771technologies/grid-server-data-source';
+import { ReactNode } from 'react';
+export declare function useServerDataSource<D>(init: ServerDataSourceInitial<D, ReactNode>): import('@1771technologies/grid-types/pro').RowDataSourcePro<D, ReactNode>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1771technologies/lytenyte-pro",
-  "version": "0.0.62",
+  "version": "0.0.63",
   "license": "COMMERCIAL",
   "type": "module",
   "files": [
@@ -70,20 +70,20 @@
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@1771technologies/grid-client-data-source-pro": "0.0.62",
-    "@1771technologies/grid-core": "0.0.62",
-    "@1771technologies/grid-design": "0.0.62",
-    "@1771technologies/grid-provider": "0.0.62",
-    "@1771technologies/grid-store-pro": "0.0.62",
-    "@1771technologies/grid-tree-data-source": "0.0.62",
-    "@1771technologies/grid-types": "0.0.62",
-    "@1771technologies/js-utils": "0.0.62",
-    "@1771technologies/lytenyte-core": "0.0.62",
-    "@1771technologies/react-cascada": "0.0.62",
-    "@1771technologies/react-dragon": "0.0.62",
-    "@1771technologies/react-sizer": "0.0.62",
-    "@1771technologies/react-split-pane": "0.0.62",
-    "@1771technologies/react-utils": "0.0.62",
+    "@1771technologies/grid-client-data-source-pro": "0.0.63",
+    "@1771technologies/grid-core": "0.0.63",
+    "@1771technologies/grid-design": "0.0.63",
+    "@1771technologies/grid-provider": "0.0.63",
+    "@1771technologies/grid-store-pro": "0.0.63",
+    "@1771technologies/grid-tree-data-source": "0.0.63",
+    "@1771technologies/grid-types": "0.0.63",
+    "@1771technologies/js-utils": "0.0.63",
+    "@1771technologies/lytenyte-core": "0.0.63",
+    "@1771technologies/react-cascada": "0.0.63",
+    "@1771technologies/react-dragon": "0.0.63",
+    "@1771technologies/react-sizer": "0.0.63",
+    "@1771technologies/react-split-pane": "0.0.63",
+    "@1771technologies/react-utils": "0.0.63",
     "@base-ui-components/react": "1.0.0-alpha.7"
   },
   "devDependencies": {