@1771technologies/lytenyte-pro 0.0.41 → 0.0.42

package/dist/index.js

@@ -3653,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",
@@ -3670,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

@@ -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;
@@ -1954,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 {
@@ -1965,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;
 }
@@ -1989,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.41",
+  "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.41",
-    "@1771technologies/grid-core": "0.0.41",
-    "@1771technologies/grid-design": "0.0.41",
-    "@1771technologies/grid-provider": "0.0.41",
-    "@1771technologies/grid-store-pro": "0.0.41",
-    "@1771technologies/grid-tree-data-source": "0.0.41",
-    "@1771technologies/grid-types": "0.0.41",
-    "@1771technologies/js-utils": "0.0.41",
-    "@1771technologies/lytenyte-core": "0.0.41",
-    "@1771technologies/react-cascada": "0.0.41",
-    "@1771technologies/react-dragon": "0.0.41",
-    "@1771technologies/react-sizer": "0.0.41",
-    "@1771technologies/react-split-pane": "0.0.41",
-    "@1771technologies/react-utils": "0.0.41",
+    "@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": {