@1771technologies/lytenyte-pro 0.0.41 → 0.0.43

package/dist/index.js

@@ -1,5 +1,5 @@
-import { C as Checkbox, e as COLUMN_MARKER_ID, H as HEADER_CELL_POSITION, g as getTransform, f as COLUMN_EMPTY_PREFIX, h as HEADER_GROUP_CELL_POSITION, i as CollapseButton, F as FLOATING_CELL_POSITION, j as FULL_ENCODING, k as CellFullWidth, E as END_ENCODING, l as Cell, I as Input, u as useGrid$1, m as GRID_CELL_POSITION, n as GridButton, G as GridProvider } from "./use-grid-DKvzGZWc.js";
-import { y, q, z, A, L, M, O, N, Q, v, t, w, x, P, r, J, o, B, R, s, p, K } from "./use-grid-DKvzGZWc.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-CO3z13Ju.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-CO3z13Ju.js";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { Sizer } from "@1771technologies/react-sizer";
 import { useEvent, useIsoEffect } from "@1771technologies/react-utils";
@@ -9,15 +9,16 @@ import { useContext, useMemo, useEffect, useRef, useState, useCallback, memo } f
 import { sizeFromCoord, clsx, getClientX, IsoResizeObserver, getPreciseElementDimensions, getClientY, getFocusableElements, clamp, getRelativeXPosition, getRelativeYPosition } from "@1771technologies/js-utils";
 import { useDraggable, useDroppable, dragState } from "@1771technologies/react-dragon";
 import { getHoveredRowIndex, getHoveredColumnIndex, getRootCell } from "@1771technologies/grid-core";
+import { c as useGrid$1, u as useControlled, a as useTransitionStatus, b as useScrollLock, G as GridProvider } from "./useScrollLock-D4UY33Sb.js";
 import * as ReactDOM from "react-dom";
 import { createPortal } from "react-dom";
 import { cascada, signal } from "@1771technologies/react-cascada";
-import { M as MenuRoot, a as MenuPortal, b as MenuPositioner, t as translateOpenChangeReason, P as PATIENT_CLICK_THRESHOLD } from "./MenuRoot-9n64jNWP.js";
+import { M as MenuRoot, a as MenuPortal, t as translateOpenChangeReason, P as PATIENT_CLICK_THRESHOLD, C as ColumnMenuDriver } from "./column-menu-driver-cG-EZgLa.js";
 import { SplitPane, splitPaneAxe } from "@1771technologies/react-split-pane";
-import { F as FloatingPortal, P as PropTypes, H as HTMLElementType, r as refType, j as useEventCallback, y as useOpenChangeComplete, z as useFloatingRootContext, E as useRole, C as useClick, D as useDismiss, S as getTarget, K as useInteractions, m as mergeProps, A as useHover, B as safePolygon } from "./InternalBackdrop-Dm9czgoC.js";
+import { A as AnchorProvider } from "./anchor-context-Cqr_oiJt.js";
+import { F as FloatingPortal, P as PropTypes, H as HTMLElementType, r as refType, j as useEventCallback, n as useOpenChangeComplete, p as useFloatingRootContext, x as useRole, v as useClick, w as useDismiss, L as getTarget, A as useInteractions, m as mergeProps, q as useHover, t as safePolygon } from "./proptypes-BjYr2nFr.js";
 import { u as useDialogRootContext, D as DialogPortalContext, b as useOptionalDialogRootContext, c as DialogContext, d as DialogRootContext } from "./DialogPortalContext-C2WZTqJ3.js";
-import { a as useControlled, b as useTransitionStatus, c as useScrollLock } from "./useScrollLock-D6h5lZYs.js";
-import { P as PopoverRootContext, u as usePopoverRootContext, c as PopoverPortalContext, A as AnchorProvider } from "./anchor-context-B9sGQdR5.js";
+import { P as PopoverRootContext, u as usePopoverRootContext, b as PopoverPortalContext } from "./PopoverPortalContext-BdsDjihw.js";
 import { makeGridPro } from "@1771technologies/grid-store-pro";
 import { M as MoreDotsIcon } from "./more-dots-icon-CzAH3xHG.js";
 import { S as SortAscending, a as SortDescending } from "./sort-descending-BMtfaa2L.js";
@@ -97,8 +98,23 @@ function useHeaderCellRenderer(api, column) {
 function useHeaderMove(api, column, columnIndex) {
   const gridId = api.getState().gridId.use();
   const dragProps = useDraggable({
+    onDragStart: () => {
+      document.body.classList.add("lng1771-drag-on");
+    },
+    onDragEnd: () => {
+      document.body.classList.remove("lng1771-drag-on");
+    },
+    onDragCancel: () => {
+      document.body.classList.remove("lng1771-drag-on");
+    },
     dragData: () => ({ columns: [column], columnIndex }),
-    dragTags: () => [`${gridId}:grid:${column.pin ?? "none"}`],
+    dragTags: () => {
+      const c = [`${gridId}:grid:${column.pin ?? "none"}`];
+      const groupable = api.columnIsRowGroupable(column);
+      const isGrouped = api.getState().rowGroupModel.peek().includes(column.id);
+      if (groupable && !isGrouped) c.push(`${gridId}:grid:groupable`);
+      return c;
+    },
     placeholder: () => /* @__PURE__ */ jsx(DragPlaceholder$1, { column })
   });
   const { canDrop, isOver, ...dropProps } = useDroppable({
@@ -122,7 +138,20 @@ function useHeaderMove(api, column, columnIndex) {
   return { moveProps, dropProps, isBefore, canDrop, isOver, dragIndex };
 }
 function DragPlaceholder$1(c) {
-  return /* @__PURE__ */ jsx("div", { className: "lng1771-drag-placeholder", children: c.column.headerName ?? c.column.id });
+  return /* @__PURE__ */ jsxs("div", { className: "lng1771-pill-manager__drag-placeholder--default", children: [
+    /* @__PURE__ */ jsx(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "20px",
+        height: "20px",
+        fill: "currentcolor",
+        viewBox: "0 0 256 256",
+        children: /* @__PURE__ */ jsx("path", { d: "M90.34,61.66a8,8,0,0,1,0-11.32l32-32a8,8,0,0,1,11.32,0l32,32a8,8,0,0,1-11.32,11.32L136,43.31V96a8,8,0,0,1-16,0V43.31L101.66,61.66A8,8,0,0,1,90.34,61.66Zm64,132.68L136,212.69V160a8,8,0,0,0-16,0v52.69l-18.34-18.35a8,8,0,0,0-11.32,11.32l32,32a8,8,0,0,0,11.32,0l32-32a8,8,0,0,0-11.32-11.32Zm83.32-72-32-32a8,8,0,0,0-11.32,11.32L212.69,120H160a8,8,0,0,0,0,16h52.69l-18.35,18.34a8,8,0,0,0,11.32,11.32l32-32A8,8,0,0,0,237.66,122.34ZM43.31,136H96a8,8,0,0,0,0-16H43.31l18.35-18.34A8,8,0,0,0,50.34,90.34l-32,32a8,8,0,0,0,0,11.32l32,32a8,8,0,0,0,11.32-11.32Z" })
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { children: c.column.headerName ?? c.column.id })
+  ] });
 }
 function useHeaderFocus(api, ref, columnIndex) {
   useEffect(() => {
@@ -2523,7 +2552,7 @@ class MD5 {
     return this.cmn(c ^ (b | ~d), a, b, x2, s3, t2);
   }
   md51(s3) {
-    const n = s3.length;
+    const n2 = s3.length;
     const state = [1732584193, -271733879, -1732584194, 271733878];
     let i;
     for (i = 64; i <= s3.length; i += 64) {
@@ -2541,7 +2570,7 @@ class MD5 {
         tail[i] = 0;
       }
     }
-    tail[14] = n * 8;
+    tail[14] = n2 * 8;
     this.md5cycle(state, tail);
     return state;
   }
@@ -2560,12 +2589,12 @@ class MD5 {
     }
     return md5blks;
   }
-  rhex(n) {
+  rhex(n2) {
     const hex_chr = "0123456789abcdef".split("");
     let s3 = "";
     let j = 0;
     for (; j < 4; j++) {
-      s3 += hex_chr[n >> j * 8 + 4 & 15] + hex_chr[n >> j * 8 & 15];
+      s3 += hex_chr[n2 >> j * 8 + 4 & 15] + hex_chr[n2 >> j * 8 & 15];
     }
     return s3;
   }
@@ -2705,64 +2734,6 @@ function OverlayDriver() {
     }
   );
 }
-const emptyBB = {
-  getBoundingClientRect: () => ({
-    x: 0,
-    y: 0,
-    width: 0,
-    height: 0,
-    top: 0,
-    bottom: 0,
-    left: 0,
-    right: 0,
-    toJSON: () => ""
-  })
-};
-function ColumnMenuDriver() {
-  const grid = useGrid$1();
-  const menuColumn = grid.state.internal.columnMenuColumn.use();
-  const target = grid.state.internal.columnMenuTarget.use();
-  const MenuRenderer = grid.state.columnMenuRenderer.use();
-  const [open, setOpen] = useState(false);
-  useEffect(() => {
-    if (menuColumn == null || target == null) {
-      setOpen(false);
-      return;
-    }
-    setOpen(true);
-  }, [menuColumn, target]);
-  return /* @__PURE__ */ jsx(
-    MenuRoot,
-    {
-      open,
-      onOpenChange: (c) => {
-        setOpen(c);
-      },
-      onOpenChangeComplete: (c) => {
-        if (!c) grid.api.columnMenuClose();
-      },
-      children: /* @__PURE__ */ jsx(MenuPortal, { children: /* @__PURE__ */ jsx(
-        MenuPositioner,
-        {
-          anchor: target ? "getBoundingClientRect" in target ? target : {
-            getBoundingClientRect: () => ({
-              x: target.x,
-              y: target.y,
-              width: target.width,
-              height: target.height,
-              top: target.y,
-              left: target.x,
-              bottom: target.y,
-              right: target.x,
-              toJSON: () => ""
-            })
-          } : emptyBB,
-          children: MenuRenderer && menuColumn && /* @__PURE__ */ jsx(MenuRenderer, { api: grid.api, column: menuColumn })
-        }
-      ) })
-    }
-  );
-}
 function GridFrame({
   grid: { api, state },
   children,
@@ -2794,7 +2765,7 @@ function GridFrame({
             primary: /* @__PURE__ */ jsx("div", { className: "lng1771-grid-frame__grid-area", children }),
             secondary: /* @__PURE__ */ jsx(Sizer, { className: "lng1771-grid-frame__open-panel", children: /* @__PURE__ */ jsx(frame.component, { api, frame }) }),
             split: frame ? frameSplit : 100,
-            onSplitChange: (n) => setFrameSplit(n),
+            onSplitChange: (n2) => setFrameSplit(n2),
             min: 20,
             max: 80,
             splitterClassName: "lng1771-grid-frame__open-panel--splitter"
@@ -2922,35 +2893,15 @@ function ContextMenuDriver() {
           setMenu(null);
         }
       },
-      children: /* @__PURE__ */ jsx(MenuPortal, { children: /* @__PURE__ */ jsx(
-        MenuPositioner,
+      children: /* @__PURE__ */ jsx(MenuPortal, { children: /* @__PURE__ */ jsx(AnchorProvider, { anchor: target, children: menu && MenuRenderer && /* @__PURE__ */ jsx(
+        MenuRenderer,
         {
-          side: "bottom",
-          align: "start",
-          anchor: target ? "getBoundingClientRect" in target ? target : {
-            getBoundingClientRect: () => ({
-              x: target.x,
-              y: target.y,
-              width: target.width,
-              height: target.height,
-              top: target.y,
-              left: target.x,
-              bottom: target.y,
-              right: target.x,
-              toJSON: () => ""
-            })
-          } : emptyBB,
-          children: menu && MenuRenderer && /* @__PURE__ */ jsx(
-            MenuRenderer,
-            {
-              api: grid.api,
-              menuTarget: menu.menuTarget,
-              columnIndex: menu.hoveredColumn,
-              rowIndex: menu.hoveredRow
-            }
-          )
+          api: grid.api,
+          menuTarget: menu.menuTarget,
+          columnIndex: menu.hoveredColumn,
+          rowIndex: menu.hoveredRow
         }
-      ) })
+      ) }) })
     }
   );
 }
@@ -3605,13 +3556,40 @@ function PopoverDriver() {
     }
   );
 }
+function MenuFrameDriver() {
+  const grid = useGrid$1();
+  const frames = grid.state.menuFrames.use();
+  const frameId = grid.state.internal.menuFrameOpen.use();
+  const frameBB = grid.state.internal.menuFrameBB.use();
+  const frame = frameId ? frames[frameId] : null;
+  const [open, setOpen] = useState(false);
+  useEffect(() => {
+    if (!frame || !frameBB) {
+      setOpen(false);
+      return;
+    }
+    setOpen(true);
+  }, [frame, frameBB]);
+  return /* @__PURE__ */ jsx(
+    MenuRoot,
+    {
+      open,
+      onOpenChange: (c) => setOpen(c),
+      onOpenChangeComplete: (c) => {
+        if (!c) grid.api.menuFrameClose();
+      },
+      children: /* @__PURE__ */ jsx(AnchorProvider, { anchor: frameBB, children: /* @__PURE__ */ jsx(MenuPortal, { children: frame && frameBB && /* @__PURE__ */ jsx(frame.component, { api: grid.api, frame }) }) })
+    }
+  );
+}
 function LyteNyteGrid({ grid, frameAxe }) {
   return /* @__PURE__ */ jsx(GridProvider, { value: grid, children: /* @__PURE__ */ jsxs(GridFrame, { grid, axe: frameAxe, children: [
     /* @__PURE__ */ jsx(LyteNyteProImpl, {}),
     /* @__PURE__ */ jsx(ColumnMenuDriver, {}),
     /* @__PURE__ */ jsx(ContextMenuDriver, {}),
     /* @__PURE__ */ jsx(DialogDriver, {}),
-    /* @__PURE__ */ jsx(PopoverDriver, {})
+    /* @__PURE__ */ jsx(PopoverDriver, {}),
+    /* @__PURE__ */ jsx(MenuFrameDriver, {})
   ] }) });
 }
 function LyteNyteProImpl() {
@@ -3653,16 +3631,41 @@ function HeaderCellDefault({ column, api }) {
   const hints = column.uiHints ?? sx.columnBase.peek().uiHints ?? {};
   const columnMenuOpen = sx.columnMenuActiveColumn.use();
   const hasControls = hints.columnMenu || hints.sortButton && isSortable;
+  const rowGroup = sx.rowGroupModel.use();
+  const aggModel = sx.aggModel.use();
+  const agg = aggModel[column.id];
+  const fn = useMemo(() => {
+    return rowGroup.length > 0 && agg ? typeof agg.fn === "string" ? `(${agg.fn})` : "fn(x)" : null;
+  }, [agg, rowGroup.length]);
+  const subTitle = hints.subTitle;
+  const stacked = hints.stacked ?? false;
   return /* @__PURE__ */ jsxs(
     "div",
     {
       className: clsx(
         "lng1771-header-default",
-        column.type === "number" && "lng1771-header-default--end-align",
-        column.type !== "number" && "lng1771-header-default--start-align"
+        column.type === "number" && "lng1771-header-default--end-justify",
+        column.type !== "number" && "lng1771-header-default--start-justify"
       ),
       children: [
-        /* @__PURE__ */ jsx("div", { children: column.headerName ?? column.id }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: clsx(
+              "lng1771-header-default__label",
+              column.type === "number" && "lng1771-header-default__label--end-justify",
+              column.type !== "number" && "lng1771-header-default__label--start-justify",
+              stacked && "lng1771-header-default__label--stacked"
+            ),
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "lng1771-header-default__label-primary", children: column.headerName ?? column.id }),
+              /* @__PURE__ */ jsxs("div", { className: "lng1771-header-default__label-secondary", children: [
+                subTitle && /* @__PURE__ */ jsx("div", { className: "lng1771-header-default__label-secondary-title", children: subTitle }),
+                hints.showAggName && fn && /* @__PURE__ */ jsx("div", { className: "lng1771-header-default__label-secondary-agg", children: fn })
+              ] })
+            ]
+          }
+        ),
         hasControls && /* @__PURE__ */ jsxs("div", { className: "lng1771-header-default__controls", children: [
           isSortable && hints.sortButton && /* @__PURE__ */ jsxs(
             "button",
@@ -3670,6 +3673,7 @@ function HeaderCellDefault({ column, api }) {
               tabIndex: -1,
               "data-active": currentSort != null,
               className: clsx("lng1771-header-default__button"),
+              "data-is-sort": true,
               onClick: () => api.columnSortCycleToNext(column),
               children: [
                 currentSort === "asc" && /* @__PURE__ */ jsx(SortAscending, { width: 16, height: 16 }),
@@ -3734,36 +3738,35 @@ function useTreeDataSource(init) {
 }
 export {
   COLUMN_EMPTY_PREFIX,
-  y as COLUMN_GROUP_HEADER_HEIGHT,
-  q as COLUMN_GROUP_ID_DELIMITER,
-  z as COLUMN_HEADER_HEIGHT,
+  t as COLUMN_GROUP_HEADER_HEIGHT,
+  n as COLUMN_GROUP_ID_DELIMITER,
+  v as COLUMN_HEADER_HEIGHT,
   COLUMN_MARKER_ID,
-  A as COLUMN_SCAN_DISTANCE,
-  L as DEFAULT_MAX_WIDTH,
-  M as DEFAULT_MIN_WIDTH,
-  O as DEFAULT_SORT_CYCLE,
-  N as DEFAULT_WIDTH,
+  w as COLUMN_SCAN_DISTANCE,
+  B as DEFAULT_MAX_WIDTH,
+  J as DEFAULT_MIN_WIDTH,
+  L as DEFAULT_SORT_CYCLE,
+  K as DEFAULT_WIDTH,
   END_ENCODING,
   FLOATING_CELL_POSITION,
   FULL_ENCODING,
-  Q as FULL_WIDTH_POSITION,
+  M as FULL_WIDTH_POSITION,
   GRID_CELL_POSITION,
-  v as GROUP_COLUMN_MULTI_PREFIX,
-  t as GROUP_COLUMN_PREFIX,
-  w as GROUP_COLUMN_SINGLE_ID,
-  x as GROUP_COLUMN_TREE_DATA,
+  q as GROUP_COLUMN_MULTI_PREFIX,
+  p as GROUP_COLUMN_PREFIX,
+  r as GROUP_COLUMN_SINGLE_ID,
+  s as GROUP_COLUMN_TREE_DATA,
   HEADER_CELL_POSITION,
   HEADER_GROUP_CELL_POSITION,
   LyteNyteGrid,
   P as PAGINATE_PAGE_SIZE,
-  r as ROW_DEFAULT_PATH_SEPARATOR,
-  J as ROW_DETAIL_HEIGHT,
-  o as ROW_GROUP_KIND,
-  B as ROW_HEIGHT,
+  x as ROW_BLANK_GROUP_KEY,
+  o as ROW_DEFAULT_PATH_SEPARATOR,
+  z as ROW_DETAIL_HEIGHT,
+  m as ROW_GROUP_KIND,
+  y as ROW_HEIGHT,
   R as ROW_LEAF_KIND,
-  s as ROW_TOTAL_ID,
-  p as ROW_TOTAL_KIND,
-  K as ROW_UPDATE_STACK_SIZE,
+  A as ROW_UPDATE_STACK_SIZE,
   activateLicense,
   createClientDataSourceReact,
   hasAValidLicense,

package/dist/lytenyte-pro.css

@@ -561,6 +561,7 @@ INPUT
   height: 1px;
   width: 100%;
   background-color: var(--lng1771-gray-40);
+  box-sizing: border-box;
 }
 
 .lng1771-menu__item,
@@ -597,6 +598,7 @@ INPUT
   display: flex;
   align-items: center;
   justify-content: space-between;
+  box-sizing: border-box;
 }
 
 .lng1771-menu__arrow {
@@ -627,6 +629,7 @@ INPUT
   align-items: center;
   background-color: inherit;
   text-transform: uppercase;
+  box-sizing: border-box;
 }
 
 .lng1771-menu__radio-item-indicator,
@@ -635,6 +638,7 @@ INPUT
   display: flex;
   align-items: center;
   justify-content: center;
+  box-sizing: border-box;
 }
 .lng1771-pill {
   white-space: nowrap;
@@ -755,6 +759,9 @@ body.lng1771-drag-on
   .lng1771-pill-manager__pill-outer[data-pill-active="false"] {
   display: none;
 }
+body.lng1771-drag-on .lng1771-pill-manager__pill-outer[data-pill-active="false"] {
+  display: none;
+}
 
 /** Pill CONTAINER **/
 .lng1771-pill-manager__pills {
@@ -1954,8 +1961,60 @@ body.lng1771-drag-on
   letter-spacing: 0.25px;
 }
 
-.lng1771-header-default--end-align {
+.lng1771-header-default__label {
+  display: flex;
+  gap: 4px;
+
+  & span:last-child {
+    font-size: 10px;
+    text-transform: uppercase;
+    color: var(--lng1771-primary-50);
+  }
+}
+
+.lng1771-header-default__label:not(
+    .lng1771-header-default__label--stacked
+  ).lng1771-header-default__label--end-justify {
+  flex-direction: row-reverse;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 2px;
+  text-align: end;
+}
+
+.lng1771-header-default__label--stacked {
+  flex-direction: column;
+  gap: 2px;
+}
+
+.lng1771-header-default__label--end-justify {
+  width: 100%;
   justify-content: flex-end;
+  align-items: flex-end;
+  text-align: end;
+}
+
+.lng1771-header-default__label-secondary {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  font-size: 10px;
+}
+
+.lng1771-header-default__label-primary {
+  white-space: nowrap;
+  text-overflow: clip;
+}
+
+.lng1771-header-default--end-justify .lng1771-header-default__label-secondary {
+  flex-direction: row-reverse;
+}
+
+.lng1771-header-default__label-secondary-agg {
+  color: var(--lng1771-primary-50);
+  font-weight: 600;
+  text-transform: lowercase;
 }
 
 .lng1771-header-default__controls {
@@ -1965,11 +2024,11 @@ body.lng1771-drag-on
   gap: 4px;
 }
 
-.lng1771-header-default--start-align .lng1771-header-default__controls {
+.lng1771-header-default--start-justify .lng1771-header-default__controls {
   inset-inline-end: 12px;
 }
 
-.lng1771-header-default--end-align .lng1771-header-default__controls {
+.lng1771-header-default--end-justify .lng1771-header-default__controls {
   inset-inline-start: 12px;
   flex-direction: row-reverse;
 }
@@ -1989,7 +2048,6 @@ body.lng1771-drag-on
 
   &:hover {
     background-color: var(--lng1771-gray-20);
-    border-color: var(--lng1771-gray-30);
     cursor: pointer;
   }
 }