@1771technologies/lytenyte-pro 0.0.39 → 0.0.41

package/dist/column-manager.js

@@ -10,9 +10,10 @@ import "@1771technologies/grid-core";
 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-C4Jhdf8E.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, a as MoreDotsIcon } from "./row-group-icon-BOOju5Vu.js";
+import { D as DragIcon, M as MeasuresIcon, C as ColumnPivotIcon, R as RowGroupIcon } from "./row-group-icon-D8JA6sh9.js";
 import { createPortal } from "react-dom";
 import { D as DragGroupIcon, S as SearchIcon } from "./search-icon-CcG1lqsn.js";
+import { M as MoreDotsIcon } from "./more-dots-icon-CzAH3xHG.js";
 import { C as CrossIcon } from "./cross-icon-CEMLAlFX.js";
 import { M as MenuRoot, a as MenuPortal, b as MenuPositioner } from "./MenuRoot-9n64jNWP.js";
 function Sizer({

package/dist/icons.js

@@ -1,11 +1,13 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { A, T } from "./tickmark-icon-CoogRMoO.js";
 import { A as A2 } from "./arrow-down-icon-B-3ldODD.js";
-import { C, D, M, a, R } from "./row-group-icon-BOOju5Vu.js";
+import { C, D, M, R } from "./row-group-icon-D8JA6sh9.js";
 import { C as C2 } from "./cross-icon-CEMLAlFX.js";
 import { D as D2, S } from "./search-icon-CcG1lqsn.js";
 import { C as C3, E, M as M2 } from "./manage-columns-icon-D4CElo5H.js";
+import { M as M3 } from "./more-dots-icon-CzAH3xHG.js";
 import { P } from "./plus-icon-ToqW5CC-.js";
+import { S as S2, a } from "./sort-descending-BMtfaa2L.js";
 function AggregationIcon(props) {
   return /* @__PURE__ */ jsxs(
     "svg",
@@ -502,11 +504,13 @@ export {
   HideColumnIcon,
   M2 as ManageColumnsIcon,
   M as MeasuresIcon,
-  a as MoreDotsIcon,
+  M3 as MoreDotsIcon,
   P as PlusIcon,
   ResetColumnsIcon,
   R as RowGroupIcon,
   S as SearchIcon,
+  S2 as SortAscending,
+  a as SortDescending,
   SortIcon,
   T as TickmarkIcon
 };

package/dist/index.js

@@ -19,6 +19,8 @@ import { u as useDialogRootContext, D as DialogPortalContext, b as useOptionalDi
 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 { 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";
 import { createClientDataSource } from "@1771technologies/grid-client-data-source-pro";
 import { createTreeDataSource } from "@1771technologies/grid-tree-data-source";
 function useGrid() {
@@ -38,23 +40,6 @@ function useHeaderDisplayGridTemplate(levelsCount, headerHeight, groupHeaderHeig
   }, [floatingRowEnabled, floatingRowHeight, groupHeaderHeight, headerHeight, levelsCount]);
   return gridTemplateRows;
 }
-function HeaderCellDefault({ column }) {
-  const label = column.headerName ?? column.id;
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      style: {
-        display: "flex",
-        alignItems: "center",
-        boxSizing: "border-box",
-        width: "100%",
-        height: "100%",
-        paddingInline: 12
-      },
-      children: label
-    }
-  );
-}
 function HeaderCellMarker({ api }) {
   const supportsSelectedAll = api.rowSelectionSelectAllSupported();
   const allSelected = api.rowSelectionAllRowsSelected();
@@ -95,17 +80,18 @@ function useHeaderCellRenderer(api, column) {
   const sx = api.getState();
   const renderers = sx.columnHeaderRenderers.use();
   const base = sx.columnBase.use();
+  const defaultRenderer = sx.internal.columnHeaderDefaultRenderer.peek();
   const Renderer = useMemo(() => {
     if (column.id === COLUMN_MARKER_ID) return HeaderCellMarker;
     const fn = column.headerRenderer ?? base.headerRenderer;
-    if (!fn) return HeaderCellDefault;
+    if (!fn) return defaultRenderer;
     if (typeof fn === "string") {
       const cell = renderers[fn];
       if (!cell) throw new Error(`Header cell renderer with name ${fn} does not exist.`);
       return cell;
     }
     return fn;
-  }, [base.headerRenderer, column.headerRenderer, column.id, renderers]);
+  }, [base.headerRenderer, column.headerRenderer, column.id, defaultRenderer, renderers]);
   return Renderer;
 }
 function useHeaderMove(api, column, columnIndex) {
@@ -303,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;
@@ -341,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);
@@ -354,7 +337,7 @@ function useResizeDivider(api, column) {
     };
     return { onPointerDown };
   }, [api, column, isResizable]);
-  return resizeProps;
+  return { ...resizeProps, active };
 }
 function HeaderDivider({
   api,
@@ -372,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";
@@ -411,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 });
@@ -611,6 +595,7 @@ function HeaderGroupCell({
       hierarchyRowIndex: rowStart - 1
     });
   });
+  const Renderer = api.getState().columnGroupHeaderRenderer.use() ?? HeaderGroupDefault;
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -625,7 +610,7 @@ function HeaderGroupCell({
       tabIndex: -1,
       ...headerMove.moveProps,
       className: "lng1771-header__group",
-      children: /* @__PURE__ */ jsx(HeaderGroupDefault, { group: groupItem, api })
+      children: /* @__PURE__ */ jsx(Renderer, { group: groupItem, api })
     }
   );
 }
@@ -2797,7 +2782,7 @@ function GridFrame({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      "data-lng1771-cell-selection-enabled": cellSelectionEnabled ? true : void 0,
+      "data-cell-selection-enabled": cellSelectionEnabled ? true : void 0,
       className: "lng1771-grid-frame",
       style: { gridTemplateColumns: template },
       children: [
@@ -3657,9 +3642,67 @@ function Bottom() {
     /* @__PURE__ */ jsx(CellSelectionBottom, {})
   ] });
 }
+function HeaderCellDefault({ column, api }) {
+  const sx = api.getState();
+  const isSortable = api.columnIsSortable(column);
+  const sortModel = sx.sortModel.use();
+  const currentSort = api.columnSortDirection(column);
+  const currentSortIndex = api.columnSortModelIndex(column);
+  const nextSort = api.columnSortGetNext(column);
+  const displaySortNumber = sortModel.length > 0 && currentSortIndex > 0;
+  const hints = column.uiHints ?? sx.columnBase.peek().uiHints ?? {};
+  const columnMenuOpen = sx.columnMenuActiveColumn.use();
+  const hasControls = hints.columnMenu || hints.sortButton && isSortable;
+  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"
+      ),
+      children: [
+        /* @__PURE__ */ jsx("div", { children: column.headerName ?? column.id }),
+        hasControls && /* @__PURE__ */ jsxs("div", { className: "lng1771-header-default__controls", children: [
+          isSortable && hints.sortButton && /* @__PURE__ */ jsxs(
+            "button",
+            {
+              tabIndex: -1,
+              "data-active": currentSort != null,
+              className: clsx("lng1771-header-default__button"),
+              onClick: () => api.columnSortCycleToNext(column),
+              children: [
+                currentSort === "asc" && /* @__PURE__ */ jsx(SortAscending, { width: 16, height: 16 }),
+                currentSort === "desc" && /* @__PURE__ */ jsx(SortDescending, { width: 16, height: 16 }),
+                !currentSort && nextSort?.includes("asc") && /* @__PURE__ */ jsx(SortAscending, { width: 16, height: 16 }),
+                !currentSort && nextSort?.includes("desc") && /* @__PURE__ */ jsx(SortDescending, { width: 16, height: 16 }),
+                displaySortNumber && currentSortIndex > 0 && /* @__PURE__ */ jsx("span", { className: "lng1771-header-default__sort-count", children: currentSortIndex + 1 })
+              ]
+            }
+          ),
+          hints.columnMenu && /* @__PURE__ */ jsx(
+            "button",
+            {
+              tabIndex: -1,
+              className: "lng1771-header-default__button",
+              onFocus: (ev) => {
+                if (column !== columnMenuOpen) return;
+                ev.currentTarget.parentElement?.parentElement?.parentElement?.focus();
+              },
+              "data-active": column === columnMenuOpen,
+              onClick: (e) => api.columnMenuOpen(column, e.currentTarget),
+              children: /* @__PURE__ */ jsx(MoreDotsIcon, { width: 16, height: 16 })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
 const useLyteNytePro = (p2) => {
   const [grid] = useState(() => {
     const s3 = makeGridPro(p2);
+    s3.state.internal.columnHeaderDefaultRenderer.set(() => HeaderCellDefault);
     const useSignalWatcher = (c, fn) => {
       const signal2 = s3.state[c];
       useEffect(() => {

package/dist/lytenyte-pro.css

@@ -23,21 +23,8 @@
 .lng1771-cell,
 .lng1771-cell__full-width {
   &:focus {
-    outline: none;
-  }
-
-  &:focus:after {
-    content: "";
-    position: absolute;
-    top: 0px;
-    inset-inline-start: 1px;
-    width: calc(100% - 2px);
-    height: 100%;
-    pointer-events: none;
-    box-sizing: border-box;
-    border: 1px solid var(--lng1771-focus-outline);
-    border-radius: 2px;
-    z-index: 10;
+    outline: 1px solid var(--lng1771-focus-outline);
+    outline-offset: -2px;
   }
 }
 
@@ -337,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;
@@ -1946,3 +1941,71 @@ body.lng1771-drag-on
 .lng1771-grid-frame__control-button-icon {
   color: var(--lng1771-gray-70);
 }
+.lng1771-header-default {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  padding-inline: 12px;
+  box-sizing: border-box;
+  text-transform: capitalize;
+  position: relative;
+  font-weight: 400;
+  letter-spacing: 0.25px;
+}
+
+.lng1771-header-default--end-align {
+  justify-content: flex-end;
+}
+
+.lng1771-header-default__controls {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.lng1771-header-default--start-align .lng1771-header-default__controls {
+  inset-inline-end: 12px;
+}
+
+.lng1771-header-default--end-align .lng1771-header-default__controls {
+  inset-inline-start: 12px;
+  flex-direction: row-reverse;
+}
+
+.lng1771-header-default__button {
+  background-color: transparent;
+  background-color: var(--lng1771-gray-05);
+  border: 1px solid transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 3px;
+  border-radius: 4px;
+  opacity: 0;
+  transition: opacity 100ms ease-in;
+  color: var(--lng1771-gray-70);
+
+  &:hover {
+    background-color: var(--lng1771-gray-20);
+    border-color: var(--lng1771-gray-30);
+    cursor: pointer;
+  }
+}
+
+.lng1771-header-default__button[data-active="true"] {
+  opacity: 1;
+  color: var(--lng1771-primary-50);
+  border-color: var(--lng1771-gray-40);
+}
+
+.lng1771-header-default:hover .lng1771-header-default__button {
+  opacity: 1;
+}
+
+.lng1771-header-default__sort-count {
+  font-size: 10px;
+  position: relative;
+  top: -5px;
+}

package/dist/more-dots-icon-CzAH3xHG.js

@@ -0,0 +1,26 @@
+import { jsx } from "react/jsx-runtime";
+const MoreDotsIcon = (props) => {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "20",
+      height: "20",
+      viewBox: "0 0 20 20",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M11.5 3.75C11.5 2.7835 10.7165 2 9.75 2C8.7835 2 8 2.7835 8 3.75C8 4.7165 8.7835 5.5 9.75 5.5C10.7165 5.5 11.5 4.7165 11.5 3.75ZM9.75 8C10.7165 8 11.5 8.7835 11.5 9.75C11.5 10.7165 10.7165 11.5 9.75 11.5C8.7835 11.5 8 10.7165 8 9.75C8 8.7835 8.7835 8 9.75 8ZM9.75 14C10.7165 14 11.5 14.7835 11.5 15.75C11.5 16.7165 10.7165 17.5 9.75 17.5C8.7835 17.5 8 16.7165 8 15.75C8 14.7835 8.7835 14 9.75 14Z",
+          fill: "currentcolor"
+        }
+      )
+    }
+  );
+};
+export {
+  MoreDotsIcon as M
+};

package/dist/pill-manager.js

@@ -8,10 +8,11 @@ import { useCombinedRefs } from "@1771technologies/react-utils";
 import "@1771technologies/grid-provider";
 import "@1771technologies/react-dragon";
 import "@1771technologies/grid-core";
-import { D as DragIcon, M as MeasuresIcon, C as ColumnPivotIcon, R as RowGroupIcon, a as MoreDotsIcon } from "./row-group-icon-BOOju5Vu.js";
+import { D as DragIcon, M as MeasuresIcon, C as ColumnPivotIcon, R as RowGroupIcon } from "./row-group-icon-D8JA6sh9.js";
 import { M as MenuRoot, a as MenuPortal, b as MenuPositioner } from "./MenuRoot-9n64jNWP.js";
 import { M as ManageColumnsIcon, C as CollapseIcon, E as ExpandIcon } from "./manage-columns-icon-D4CElo5H.js";
 import { createPortal } from "react-dom";
+import { M as MoreDotsIcon } from "./more-dots-icon-CzAH3xHG.js";
 function useColumnSource(source) {
   const { api, state: sx } = useGrid();
   const columns = sx.columns.use();

package/dist/{row-group-icon-BOOju5Vu.js → row-group-icon-D8JA6sh9.js}

@@ -109,28 +109,6 @@ const MeasuresIcon = (props) => {
     }
   );
 };
-const MoreDotsIcon = (props) => {
-  return /* @__PURE__ */ jsx(
-    "svg",
-    {
-      width: "20",
-      height: "20",
-      viewBox: "0 0 20 20",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
-      ...props,
-      children: /* @__PURE__ */ jsx(
-        "path",
-        {
-          fillRule: "evenodd",
-          clipRule: "evenodd",
-          d: "M11.5 3.75C11.5 2.7835 10.7165 2 9.75 2C8.7835 2 8 2.7835 8 3.75C8 4.7165 8.7835 5.5 9.75 5.5C10.7165 5.5 11.5 4.7165 11.5 3.75ZM9.75 8C10.7165 8 11.5 8.7835 11.5 9.75C11.5 10.7165 10.7165 11.5 9.75 11.5C8.7835 11.5 8 10.7165 8 9.75C8 8.7835 8.7835 8 9.75 8ZM9.75 14C10.7165 14 11.5 14.7835 11.5 15.75C11.5 16.7165 10.7165 17.5 9.75 17.5C8.7835 17.5 8 16.7165 8 15.75C8 14.7835 8.7835 14 9.75 14Z",
-          fill: "currentcolor"
-        }
-      )
-    }
-  );
-};
 const RowGroupIcon = (p) => {
   return /* @__PURE__ */ jsxs(
     "svg",
@@ -200,6 +178,5 @@ export {
   ColumnPivotIcon as C,
   DragIcon as D,
   MeasuresIcon as M,
-  RowGroupIcon as R,
-  MoreDotsIcon as a
+  RowGroupIcon as R
 };

package/dist/sort-descending-BMtfaa2L.js

@@ -0,0 +1,34 @@
+import { jsx } from "react/jsx-runtime";
+const SortAscending = (p) => {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "20",
+      height: "20",
+      fill: "currentcolor",
+      stroke: "2",
+      viewBox: "0 0 256 256",
+      ...p,
+      children: /* @__PURE__ */ jsx("path", { d: "M202.83,146.83l-72,72a4,4,0,0,1-5.66,0l-72-72a4,4,0,0,1,5.66-5.66L124,206.34V40a4,4,0,0,1,8,0V206.34l65.17-65.17a4,4,0,0,1,5.66,5.66Z" })
+    }
+  );
+};
+const SortDescending = (p) => {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "20",
+      height: "20",
+      fill: "currentcolor",
+      viewBox: "0 0 256 256",
+      ...p,
+      children: /* @__PURE__ */ jsx("path", { d: "M202.83,114.83a4,4,0,0,1-5.66,0L132,49.66V216a4,4,0,0,1-8,0V49.66L58.83,114.83a4,4,0,0,1-5.66-5.66l72-72a4,4,0,0,1,5.66,0l72,72A4,4,0,0,1,202.83,114.83Z" })
+    }
+  );
+};
+export {
+  SortAscending as S,
+  SortDescending as a
+};

package/dist/types/header-cell/header-cell-default.d.ts

@@ -0,0 +1,2 @@
+import { ColumnHeaderRendererParamsProReact } from '../types';
+export declare function HeaderCellDefault({ column, api }: ColumnHeaderRendererParamsProReact): import("react/jsx-runtime").JSX.Element;

package/package.json

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