@1771technologies/lytenyte-pro 0.0.40 → 0.0.42

package/dist/index.js

@@ -289,27 +289,24 @@ function useHeaderCells(api) {
 }
 function useResizeDivider(api, column) {
   const isResizable = api.columnIsResizable(column);
-  const timeOutRef = useRef(null);
-  const dragStarted = useRef(false);
+  const [active, setActive] = useState(false);
   const resizeProps = useMemo(() => {
     if (!isResizable) return {};
     const onPointerDown = (e) => {
-      e.preventDefault();
+      if (e.pointerType === "mouse" && e.button !== 0) return;
       const startWidth = api.columnVisualWidth(column);
       const isRtl = api.getState().rtl.peek();
       let startX = null;
       let anim = null;
       let delta = 0;
-      if (timeOutRef.current) clearTimeout(timeOutRef.current);
-      timeOutRef.current = setTimeout(() => {
-        dragStarted.current = true;
-        timeOutRef.current = null;
-      }, 100);
+      e.preventDefault();
+      e.stopPropagation();
+      document.body.classList.add("lng1771-column-resize-active");
+      setActive(true);
       const controller = new AbortController();
       document.addEventListener(
         "pointermove",
         (ev) => {
-          if (dragStarted.current === false) return;
           if (startX === null) {
             startX = getClientX(ev);
             return;
@@ -327,9 +324,9 @@ function useResizeDivider(api, column) {
       window.addEventListener(
         "pointerup",
         () => {
-          if (timeOutRef.current) clearTimeout(timeOutRef.current);
           if (anim) cancelAnimationFrame(anim);
-          dragStarted.current = false;
+          setActive(false);
+          document.body.classList.remove("lng1771-column-resize-active");
           const newWidth = startWidth + delta;
           api.columnResize(column, newWidth);
           api.getState().internal.columnWidthDeltas.set(null);
@@ -340,7 +337,7 @@ function useResizeDivider(api, column) {
     };
     return { onPointerDown };
   }, [api, column, isResizable]);
-  return resizeProps;
+  return { ...resizeProps, active };
 }
 function HeaderDivider({
   api,
@@ -358,7 +355,7 @@ function HeaderDivider({
   const isLastStart = startCount > 0 && columnIndex === startCount - 1;
   const isFirstEnd = endCount > 0 && startCount + centerCount === columnIndex;
   const isLast = startCount + centerCount + endCount - 1 === columnIndex;
-  const resizeProps = useResizeDivider(api, column);
+  const { onPointerDown, active: resizeActive } = useResizeDivider(api, column);
   const rtl = api.getState().rtl.use();
   const style = useMemo(() => {
     const isStart = column.pin === "start";
@@ -397,7 +394,8 @@ function HeaderDivider({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      ...resizeProps,
+      onPointerDown,
+      "data-resize-active": resizeActive,
       onDoubleClick: () => {
         const autosize = api.getState().autosizeDoubleClickHeader.peek();
         if (autosize) api.autosizeColumn(column, { includeHeader: true });
@@ -3655,16 +3653,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", { 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",
@@ -3672,6 +3695,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 }),

package/dist/lytenyte-pro.css

@@ -324,6 +324,14 @@ INPUT
   &:hover div {
     background-color: var(--lng1771-primary-50);
   }
+
+  &[data-resize-active="true"] {
+    background-color: var(--lng1771-primary-50);
+  }
+}
+
+.lng1771-column-resize-active {
+  cursor: col-resize;
 }
 .lng1771-header__group {
   grid-column-start: 1;
@@ -553,6 +561,7 @@ INPUT
   height: 1px;
   width: 100%;
   background-color: var(--lng1771-gray-40);
+  box-sizing: border-box;
 }
 
 .lng1771-menu__item,
@@ -589,6 +598,7 @@ INPUT
   display: flex;
   align-items: center;
   justify-content: space-between;
+  box-sizing: border-box;
 }
 
 .lng1771-menu__arrow {
@@ -619,6 +629,7 @@ INPUT
   align-items: center;
   background-color: inherit;
   text-transform: uppercase;
+  box-sizing: border-box;
 }
 
 .lng1771-menu__radio-item-indicator,
@@ -627,6 +638,7 @@ INPUT
   display: flex;
   align-items: center;
   justify-content: center;
+  box-sizing: border-box;
 }
 .lng1771-pill {
   white-space: nowrap;
@@ -1946,8 +1958,54 @@ 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;
+  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--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 {
@@ -1957,11 +2015,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;
 }
@@ -1981,7 +2039,6 @@ body.lng1771-drag-on
 
   &:hover {
     background-color: var(--lng1771-gray-20);
-    border-color: var(--lng1771-gray-30);
     cursor: pointer;
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1771technologies/lytenyte-pro",
-  "version": "0.0.40",
+  "version": "0.0.42",
   "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.40",
-    "@1771technologies/grid-core": "0.0.40",
-    "@1771technologies/grid-design": "0.0.40",
-    "@1771technologies/grid-provider": "0.0.40",
-    "@1771technologies/grid-store-pro": "0.0.40",
-    "@1771technologies/grid-tree-data-source": "0.0.40",
-    "@1771technologies/grid-types": "0.0.40",
-    "@1771technologies/js-utils": "0.0.40",
-    "@1771technologies/lytenyte-core": "0.0.40",
-    "@1771technologies/react-cascada": "0.0.40",
-    "@1771technologies/react-dragon": "0.0.40",
-    "@1771technologies/react-sizer": "0.0.40",
-    "@1771technologies/react-split-pane": "0.0.40",
-    "@1771technologies/react-utils": "0.0.40",
+    "@1771technologies/grid-client-data-source-pro": "0.0.42",
+    "@1771technologies/grid-core": "0.0.42",
+    "@1771technologies/grid-design": "0.0.42",
+    "@1771technologies/grid-provider": "0.0.42",
+    "@1771technologies/grid-store-pro": "0.0.42",
+    "@1771technologies/grid-tree-data-source": "0.0.42",
+    "@1771technologies/grid-types": "0.0.42",
+    "@1771technologies/js-utils": "0.0.42",
+    "@1771technologies/lytenyte-core": "0.0.42",
+    "@1771technologies/react-cascada": "0.0.42",
+    "@1771technologies/react-dragon": "0.0.42",
+    "@1771technologies/react-sizer": "0.0.42",
+    "@1771technologies/react-split-pane": "0.0.42",
+    "@1771technologies/react-utils": "0.0.42",
     "@base-ui-components/react": "1.0.0-alpha.7"
   },
   "devDependencies": {