@stenajs-webui/grid 18.0.2 → 18.1.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# v18.0.3 (Mon Feb 27 2023)
+
+#### 🐛 Bug Fix
+
+- Add blue bottom line to sorted column header [#539](https://github.com/StenaIT/stenajs-webui/pull/539) (david.zetterdahl@stenaline.com [@mattias800](https://github.com/mattias800) [@LordDz](https://github.com/LordDz))
+
+#### Authors: 3
+
+- David ([@LordDz](https://github.com/LordDz))
+- David Zetterdahl (david.zetterdahl@stenaline.com)
+- Mattias Andersson ([@mattias800](https://github.com/mattias800))
+
+---
+
 # v17.31.0 (Wed Feb 01 2023)
 
 #### 🚀 Enhancement

package/dist/index.es.js

@@ -1,18 +1,18 @@
 (function(){"use strict";try{var e=document.createElement("style");e.appendChild(document.createTextNode("._tableRow_1cphw_1:focus-within{background:var(--focus-within-background, var(--lhds-color-blue-50))}._standardTable_1iok0_1{--swui-standard-table-height: 40px;--swui-sticky-header-shadow: 2px 4px 4px 0 rgba(0, 0, 0, .05);--swui-sticky-header-shadow-and-right: var(--swui-sticky-header-shadow), var(--swui-sticky-column-shadow-right);--swui-sticky-header-shadow-and-left: var(--swui-sticky-header-shadow), var(--swui-sticky-column-shadow-left);--swui-sticky-column-shadow-right: 4px 2px 4px 0 rgba(0, 0, 0, .05);--swui-sticky-column-shadow-left: -4px 2px 4px 0 rgba(0, 0, 0, .05);--swui-sticky-header-z-index: 10;--swui-sticky-column-z-index: 20;--swui-sticky-group-group-z-index: 25;--swui-sticky-group-header-z-index: 26;--swui-sticky-header-column-group-z-index: 30;--swui-sticky-column-group-label-z-index: 40;--swui-sticky-header-in-sticky-column-z-index: 50;--swui-sticky-popover-z-index: 60;--swui-expand-cell-width: 45px;--swui-checkbox-cell-width: 45px;--swui-expand-highlight-border-width: 2px;--current-row-height: var(--swui-standard-table-height);--current-left-offset: 0px;border-spacing:0}._standardTable_1iok0_1 td{border-top:1px solid var(--lhds-color-ui-300);padding:0}._standardTable_1iok0_1 th{padding:0}._standardTable_1iok0_1._relaxed_1iok0_37{--current-row-height: 48px}._standardTable_1iok0_1._condensed_1iok0_41{--current-row-height: 32px}._standardTable_1iok0_1._compact_1iok0_45{--current-row-height: 24px}._standardTableCell_1xzcm_1{outline:none}._textCell_1yv6v_1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}._summaryRow_12x8k_1 td{border-top:1px solid var(--lhds-color-ui-400)}")),document.head.appendChild(e)}catch(i){console.error("vite-plugin-css-injected-by-js",i)}})();
 import * as T from "react";
-import { useMemo as v, useRef as ne, useState as ve, useCallback as I, useEffect as je, useContext as $, createContext as K, useReducer as Et, useId as Rt } from "react";
+import { useMemo as v, useRef as ne, useState as ve, useCallback as I, useEffect as je, useContext as H, createContext as K, useReducer as Et, useId as Rt } from "react";
 import { jsx as r, Fragment as G, jsxs as g } from "react/jsx-runtime";
 import { faExclamationTriangle as ue } from "@fortawesome/free-solid-svg-icons/faExclamationTriangle";
 import { InputSpinner as ye, Icon as F, stenaArrowRight as Gt, stenaInfoCircle as Tt, FlatButton as xe, ResultListBanner as Ot, Banner as Le } from "@stenajs-webui/elements";
 import { cssColor as _ } from "@stenajs-webui/theme";
 import { Tooltip as se, Popover as Pt } from "@stenajs-webui/tooltip";
-import { Text as U, Indent as N, Space as L, Row as E, Box as oe, exhaustSwitchCaseElseThrow as At, Heading as We, booleanOrNumberToNumber as Lt, useArraySet as qe, useOnScreen as Bt, Spacing as we } from "@stenajs-webui/core";
+import { Text as U, Indent as N, Space as B, Row as E, Box as oe, exhaustSwitchCaseElseThrow as At, Heading as We, booleanOrNumberToNumber as Lt, useArraySet as qe, useOnScreen as Bt, Spacing as we } from "@stenajs-webui/core";
 import { faEllipsisV as Dt } from "@fortawesome/free-solid-svg-icons/faEllipsisV";
 import { faSortAlphaDown as Nt } from "@fortawesome/free-solid-svg-icons/faSortAlphaDown";
 import { faSortAlphaUp as zt } from "@fortawesome/free-solid-svg-icons/faSortAlphaUp";
 import { faSortAmountDownAlt as Kt } from "@fortawesome/free-solid-svg-icons/faSortAmountDownAlt";
-import { faSortAmountUpAlt as Ht } from "@fortawesome/free-solid-svg-icons/faSortAmountUpAlt";
-import { faSortNumericDown as $t } from "@fortawesome/free-solid-svg-icons/faSortNumericDown";
+import { faSortAmountUpAlt as $t } from "@fortawesome/free-solid-svg-icons/faSortAmountUpAlt";
+import { faSortNumericDown as Ht } from "@fortawesome/free-solid-svg-icons/faSortNumericDown";
 import { faSortNumericUp as Mt } from "@fortawesome/free-solid-svg-icons/faSortNumericUp";
 import Fe from "classnames";
 import { faArrowRight as Vt } from "@fortawesome/free-solid-svg-icons/faArrowRight";
@@ -107,7 +107,7 @@ const Xe = T.createContext({}), br = ({
         variant: "bold",
         children: o.newValue
       })]
-    }), i && /* @__PURE__ */ r(L, {}), c ? /* @__PURE__ */ r(se, {
+    }), i && /* @__PURE__ */ r(B, {}), c ? /* @__PURE__ */ r(se, {
       label: t,
       zIndex: 100,
       children: /* @__PURE__ */ r(F, {
@@ -151,9 +151,9 @@ const Xe = T.createContext({}), br = ({
     case "alpha":
       return e === "up" ? zt : Nt;
     case "numeric":
-      return e === "up" ? Mt : $t;
+      return e === "up" ? Mt : Ht;
     case "amount":
-      return e === "up" ? Ht : Kt;
+      return e === "up" ? $t : Kt;
     default:
       return At(t);
   }
@@ -171,39 +171,41 @@ const Xe = T.createContext({}), br = ({
   sortOrderIconVariant: a,
   ...p
 }) => {
-  const f = ne(null);
+  const f = ne(null), m = n ? {
+    cursor: "pointer",
+    userSelect: "none"
+  } : void 0, C = !e && !t && !i;
   return /* @__PURE__ */ g(E, {
     height: "100%",
     alignItems: "center",
     ref: f,
     overflow: d,
     justifyContent: u ? "flex-end" : "flex-start",
+    borderTop: "2px solid transparent",
+    borderBottom: `2px solid ${s ? _("--lhds-color-blue-500") : "transparent"}`,
     ...p,
     children: [/* @__PURE__ */ g(E, {
       alignItems: "center",
       indent: !0,
       children: [!t && u && /* @__PURE__ */ g(G, {
-        children: [/* @__PURE__ */ r(L, {}), /* @__PURE__ */ r(oe, {
+        children: [/* @__PURE__ */ r(B, {}), /* @__PURE__ */ r(oe, {
           width: "14px"
-        }), /* @__PURE__ */ r(L, {
+        }), /* @__PURE__ */ r(B, {
           num: 0.5
         })]
       }), (o || e) && /* @__PURE__ */ g(E, {
         onClick: n,
-        style: n ? {
-          cursor: "pointer",
-          userSelect: "none"
-        } : void 0,
+        style: m,
         alignItems: "center",
         children: [o && /* @__PURE__ */ g(G, {
-          children: [o, !(!e && !t && !i) && /* @__PURE__ */ r(L, {
+          children: [o, !C && /* @__PURE__ */ r(B, {
             num: 0.5
           })]
         }), t && u && /* @__PURE__ */ g(G, {
-          children: [/* @__PURE__ */ r(L, {}), /* @__PURE__ */ r(Ke, {
+          children: [/* @__PURE__ */ r(B, {}), /* @__PURE__ */ r(Ke, {
             direction: t,
             iconVariant: a
-          }), /* @__PURE__ */ r(L, {
+          }), /* @__PURE__ */ r(B, {
             num: 0.5
           })]
         }), e && /* @__PURE__ */ r(We, {
@@ -213,15 +215,15 @@ const Xe = T.createContext({}), br = ({
           },
           children: e
         }), t && !u && /* @__PURE__ */ g(G, {
-          children: [/* @__PURE__ */ r(L, {
+          children: [/* @__PURE__ */ r(B, {
             num: 0.5
           }), /* @__PURE__ */ r(Ke, {
             direction: t,
             iconVariant: a
-          }), /* @__PURE__ */ r(L, {})]
+          }), /* @__PURE__ */ r(B, {})]
         })]
       }), i && /* @__PURE__ */ g(G, {
-        children: [/* @__PURE__ */ r(L, {}), /* @__PURE__ */ g(E, {
+        children: [/* @__PURE__ */ r(B, {}), /* @__PURE__ */ g(E, {
           onClick: (h) => h.stopPropagation(),
           children: [/* @__PURE__ */ r(se, {
             label: i,
@@ -231,7 +233,7 @@ const Xe = T.createContext({}), br = ({
               size: 14,
               color: _("--lhds-color-blue-400")
             })
-          }), /* @__PURE__ */ r(L, {})]
+          }), /* @__PURE__ */ r(B, {})]
         })]
       })]
     }), /* @__PURE__ */ r(E, {
@@ -248,9 +250,9 @@ const Xe = T.createContext({}), br = ({
         })
       }) : null
     }), !t && !u && /* @__PURE__ */ g(G, {
-      children: [/* @__PURE__ */ r(L, {}), /* @__PURE__ */ r(oe, {
+      children: [/* @__PURE__ */ r(B, {}), /* @__PURE__ */ r(oe, {
         width: "14px"
-      }), /* @__PURE__ */ r(L, {
+      }), /* @__PURE__ */ r(B, {
         num: 0.5
       })]
     })]
@@ -402,9 +404,9 @@ const Xe = T.createContext({}), br = ({
     realX: s,
     realY: c
   };
-}, He = (e, t, n) => Math.max(Math.min(e, n), t), kn = (e, t, n) => ({
-  rowIndex: He(e.rowIndex, 0, t),
-  colIndex: He(e.colIndex, 0, n)
+}, $e = (e, t, n) => Math.max(Math.min(e, n), t), kn = (e, t, n) => ({
+  rowIndex: $e(e.rowIndex, 0, t),
+  colIndex: $e(e.colIndex, 0, n)
 }), Sn = (e, t, n) => {
   const o = bn(e.colIndex, e.rowIndex, n, t);
   return {
@@ -438,7 +440,7 @@ const Xe = T.createContext({}), br = ({
     throw new Error("numCols is required.");
   return e;
 }, nt = (e) => {
-  const t = $(Xe);
+  const t = H(Xe);
   return v(
     () => Gn({
       ...t,
@@ -591,20 +593,20 @@ const Xe = T.createContext({}), br = ({
   numRows: p,
   warningOnEmpty: f
 }) {
-  const m = _t(), C = Be(i.selectors.getState), h = Be(l.selectors.getState), w = C.entities[o], y = h.entities[o], b = I((H = "") => {
-    m(H === n ? i.actions.clearEntity(o) : i.actions.setEntity({
+  const m = _t(), C = Be(i.selectors.getState), h = Be(l.selectors.getState), w = C.entities[o], y = h.entities[o], b = I(($ = "") => {
+    m($ === n ? i.actions.clearEntity(o) : i.actions.setEntity({
       id: o,
       originalValue: n,
-      newValue: H,
+      newValue: $,
       modified: !0
     }));
   }, [m, o, i.actions, n]), {
     isEditing: S,
     stopEditing: x,
-    editorValue: B,
-    setEditorValue: k,
-    stopEditingAndRevert: A,
-    stopEditingAndMove: O,
+    editorValue: L,
+    setEditorValue: O,
+    stopEditingAndRevert: k,
+    stopEditingAndMove: P,
     lastKeyEvent: z,
     requiredProps: {
       onKeyDown: D,
@@ -619,11 +621,11 @@ const Xe = T.createContext({}), br = ({
     onChange: b,
     isEditable: s,
     allowedInputType: t
-  }), M = I((H) => {
-    H.key === "Delete" ? (m(i.actions.clearEntity(o)), m(l.actions.setEntityFields(o, {
+  }), M = I(($) => {
+    $.key === "Delete" ? (m(i.actions.clearEntity(o)), m(l.actions.setEntityFields(o, {
       hasError: !1,
       errorMessage: void 0
-    }))) : D(H);
+    }))) : D($);
   }, [D, o, m, i.actions, l.actions]);
   return /* @__PURE__ */ g(E, {
     height: Se,
@@ -648,13 +650,13 @@ const Xe = T.createContext({}), br = ({
         row: !0,
         alignItems: "center",
         children: S ? /* @__PURE__ */ r(ge, {
-          onValueChange: k,
-          value: B,
+          onValueChange: O,
+          value: L,
           onDone: x,
-          onEsc: A,
+          onEsc: k,
           autoFocus: !0,
           selectAllOnMount: !z,
-          onMove: O
+          onMove: P
         }) : /* @__PURE__ */ g(G, {
           children: [/* @__PURE__ */ r(U, {
             color: s ? "var(--primary-action-color)" : void 0,
@@ -671,7 +673,7 @@ const Xe = T.createContext({}), br = ({
               variant: "bold",
               children: w.newValue
             })]
-          }), y && be(y) && /* @__PURE__ */ r(L, {
+          }), y && be(y) && /* @__PURE__ */ r(B, {
             num: 2
           }), f && (w == null ? void 0 : w.modified) && (w == null ? void 0 : w.newValue) === "" ? /* @__PURE__ */ r(se, {
             label: f,
@@ -723,7 +725,7 @@ const Xe = T.createContext({}), br = ({
     expandedRows: s,
     fields: c
   });
-}, Re = () => $(st), R = () => $(it), Q = () => $(ct), ce = () => $(lt), dt = K([]), Z = () => $(
+}, Re = () => H(st), R = () => H(it), Q = () => H(ct), ce = () => H(lt), dt = K([]), Z = () => H(
   dt
 ), ut = () => {
   const e = R(), t = Z();
@@ -732,7 +734,7 @@ const Xe = T.createContext({}), br = ({
     () => t.map((o) => o.groupConfig.columnOrder.length).reduce((o, s) => o + s, 0),
     [t]
   );
-}, ht = K(void 0), Bn = () => $(ht), pt = K(void 0), Dn = () => $(pt), mt = K(void 0), Nn = K(!1), zn = () => $(mt), Kn = K("standard"), ft = K({}), Ge = () => $(ft), wt = K(0), Te = () => $(wt), Ct = (e, t, n) => {
+}, ht = K(void 0), Bn = () => H(ht), pt = K(void 0), Dn = () => H(pt), mt = K(void 0), Nn = K(!1), zn = () => H(mt), Kn = K("standard"), ft = K({}), Ge = () => H(ft), wt = K(0), Te = () => H(wt), Ct = (e, t, n) => {
   var o;
   return e ? Yt(
     (o = t == null ? void 0 : t.map((s) => {
@@ -769,11 +771,11 @@ const Xe = T.createContext({}), br = ({
   if (!n)
     throw new Error("No config for column with id=" + e);
   return n;
-}, Hn = () => {
+}, $n = () => {
   var n, o, s;
   const e = R(), t = (s = (o = (n = Z()) == null ? void 0 : n[0]) == null ? void 0 : o.groupConfig.columnOrder) == null ? void 0 : s[0];
   return t ? e.columns[t] : void 0;
-}, $n = () => {
+}, Hn = () => {
   var s;
   const e = R(), t = Z(), n = t[t.length - 1], o = (s = n == null ? void 0 : n.groupConfig.columnOrder[n.groupConfig.columnOrder.length - 1]) != null ? s : void 0;
   return o ? e.columns[o] : void 0;
@@ -801,27 +803,27 @@ const Xe = T.createContext({}), br = ({
   } = le(t), y = R(), {
     stickyHeader: b,
     headerRowOffsetTop: S
-  } = y, x = "columnGroupOrder" in y ? y.stickyColumnGroups : void 0, B = Vn(o, w), k = c && (x === "first" || x === "both"), A = l && (x === "last" || x === "both"), O = k || A || b, z = k || A;
+  } = y, x = "columnGroupOrder" in y ? y.stickyColumnGroups : void 0, L = Vn(o, w), O = c && (x === "first" || x === "both"), k = l && (x === "last" || x === "both"), P = O || k || b, z = O || k;
   return /* @__PURE__ */ r("th", {
     colSpan: s,
     style: {
-      position: O ? "sticky" : void 0,
+      position: P ? "sticky" : void 0,
       height: "var(--current-row-height)",
       width: m,
       minWidth: (D = C != null ? C : m) != null ? D : "20px",
-      background: O ? "white" : "transparent",
-      left: k ? "var(--current-left-offset)" : void 0,
-      right: A ? "0px" : void 0,
+      background: P ? "white" : "transparent",
+      left: O ? "var(--current-left-offset)" : void 0,
+      right: k ? "0px" : void 0,
       top: b ? S != null ? S : "0px" : void 0,
-      borderLeft: B,
+      borderLeft: L,
       zIndex: b && z ? "var(--swui-sticky-column-group-label-z-index)" : z ? "var(--swui-sticky-group-group-z-index)" : b ? h != null ? h : "var(--swui-sticky-header-column-group-z-index)" : h != null ? h : 1,
-      boxShadow: k ? "var(--swui-sticky-column-shadow-right)" : A ? "var(--swui-sticky-column-shadow-left)" : void 0
+      boxShadow: O ? "var(--swui-sticky-column-shadow-right)" : k ? "var(--swui-sticky-column-shadow-left)" : void 0
     },
     children: /* @__PURE__ */ r(E, {
       alignItems: "center",
       children: /* @__PURE__ */ g(G, {
         children: [u && /* @__PURE__ */ g(G, {
-          children: [/* @__PURE__ */ r(L, {}), u, /* @__PURE__ */ r(L, {
+          children: [/* @__PURE__ */ r(B, {}), u, /* @__PURE__ */ r(B, {
             num: 0.5
           })]
         }), d ? d(n) : /* @__PURE__ */ r(N, {
@@ -831,7 +833,7 @@ const Xe = T.createContext({}), br = ({
             children: i
           })
         }), a && /* @__PURE__ */ g(G, {
-          children: [/* @__PURE__ */ r(L, {
+          children: [/* @__PURE__ */ r(B, {
             num: 0.5
           }), a]
         }), (f || p) && /* @__PURE__ */ r(N, {}), p ? /* @__PURE__ */ r(ye, {}) : f ? /* @__PURE__ */ r(se, {
@@ -929,10 +931,10 @@ const Xe = T.createContext({}), br = ({
 }, Fn = (e) => !e.disableGridCell, vt = K({
   columnIndexPerColumnId: {},
   numNavigableColumns: 0
-}), yt = () => $(
+}), yt = () => H(
   vt
 ), Un = (e) => {
-  "columnGroupOrder" in e && (Zn(e), (e.stickyColumnGroups === "first" || e.stickyColumnGroups === "both") && $e(e, 0), (e.stickyColumnGroups === "last" || e.stickyColumnGroups === "both") && $e(
+  "columnGroupOrder" in e && (Zn(e), (e.stickyColumnGroups === "first" || e.stickyColumnGroups === "both") && He(e, 0), (e.stickyColumnGroups === "last" || e.stickyColumnGroups === "both") && He(
     e,
     e.columnGroupOrder.length - 1
   ));
@@ -943,7 +945,7 @@ const Xe = T.createContext({}), br = ({
         "Columns can not be sticky when column groups are used. columnId: " + n
       );
   });
-}, $e = (e, t) => {
+}, He = (e, t) => {
   var s;
   if (!e.columnGroupOrder || e.columnGroupOrder.length === 0)
     throw new Error(
@@ -1338,15 +1340,15 @@ const Xe = T.createContext({}), br = ({
     itemValueResolver: b,
     itemLabelFormatter: S,
     width: x,
-    minWidth: B,
-    justifyContentCell: k = "flex-start",
-    borderLeft: A,
-    renderCell: O,
+    minWidth: L,
+    justifyContentCell: O = "flex-start",
+    borderLeft: k,
+    renderCell: P,
     gridCellOptions: z,
     isEditable: D,
     onChange: j,
     onKeyDown: M,
-    disableGridCell: H,
+    disableGridCell: $,
     disableGridCellFocus: J,
     zIndex: W
   } = le(t), q = v(() => b ? b(n) : t in n ? n[t] : "", [b, n, t]), ee = v(() => S ? S(q, n) : go(q), [q, S, n]), te = typeof D == "boolean" ? D : D ? D(n) : void 0, me = I((ae) => {
@@ -1367,7 +1369,7 @@ const Xe = T.createContext({}), br = ({
     onChange: j ? (ae) => j(n, ae) : void 0,
     ...a,
     ...z
-  }), P = h[t], ie = (Ae = xo(t, n)) != null ? Ae : "inherit", fe = P.sticky ? W != null ? W : "var(--swui-sticky-column-z-index)" : W != null ? W : 1, kt = v(() => O ? O({
+  }), A = h[t], ie = (Ae = xo(t, n)) != null ? Ae : "inherit", fe = A.sticky ? W != null ? W : "var(--swui-sticky-column-z-index)" : W != null ? W : 1, kt = v(() => P ? P({
     label: ee,
     value: q,
     item: n,
@@ -1378,25 +1380,25 @@ const Xe = T.createContext({}), br = ({
     itemKey: w
   }) : /* @__PURE__ */ r(Go, {
     label: ee
-  }), [O, ee, q, n, X, te, y, fe, w]), St = Oe(l, i, A), It = P.sticky && P.type === "last-group" && P.isFirstColumnInLastGroup || P.sticky && P.type === "column" && P.right ? "var(--swui-sticky-column-shadow-left)" : P.sticky ? "var(--swui-sticky-column-shadow-right)" : void 0;
+  }), [P, ee, q, n, X, te, y, fe, w]), St = Oe(l, i, k), It = A.sticky && A.type === "last-group" && A.isFirstColumnInLastGroup || A.sticky && A.type === "column" && A.right ? "var(--swui-sticky-column-shadow-left)" : A.sticky ? "var(--swui-sticky-column-shadow-right)" : void 0;
   return /* @__PURE__ */ r("td", {
     style: {
       borderLeft: St,
-      position: P.sticky ? "sticky" : void 0,
-      left: P.sticky ? P.left : void 0,
-      right: P.sticky ? P.right : void 0,
+      position: A.sticky ? "sticky" : void 0,
+      left: A.sticky ? A.left : void 0,
+      right: A.sticky ? A.right : void 0,
       boxShadow: It,
       zIndex: fe,
       height: "var(--current-row-height)",
       background: ie
     },
     children: /* @__PURE__ */ r(Io, {
-      enableGridCell: u && !H && !J,
+      enableGridCell: u && !$ && !J,
       gridCellRequiredProps: X.requiredProps,
       isEditing: X.isEditing,
       width: x,
-      minWidth: B,
-      justifyContent: k,
+      minWidth: L,
+      justifyContent: O,
       onKeyDown: me,
       children: kt
     })
@@ -1468,12 +1470,12 @@ const Xe = T.createContext({}), br = ({
     isExpanded: S
   } = Pe(t), {
     isSelected: x,
-    toggleSelected: B,
-    shiftAndToggleSelected: k
-  } = Co(t, n), A = Bt(d, {
+    toggleSelected: L,
+    shiftAndToggleSelected: O
+  } = Co(t, n), k = Bt(d, {
     rootMargin: "400px 0px 400px 0px",
     threshold: 0
-  }), O = v(() => C == null ? void 0 : C(t, x), [x, t, C]), z = Ao(O, x, S), D = Lo(O, x, S), j = Bo(O, x, D), M = v(() => h == null ? void 0 : h(t), [t, h]), H = Hn(), J = _e(H, t), W = $n(), q = _e(W, t), ee = v(() => /* @__PURE__ */ r(G, {
+  }), P = v(() => C == null ? void 0 : C(t, x), [x, t, C]), z = Ao(P, x, S), D = Lo(P, x, S), j = Bo(P, x, D), M = v(() => h == null ? void 0 : h(t), [t, h]), $ = $n(), J = _e($, t), W = Hn(), q = _e(W, t), ee = v(() => /* @__PURE__ */ r(G, {
     children: /* @__PURE__ */ g(G, {
       children: [y && /* @__PURE__ */ r("td", {
         style: {
@@ -1519,8 +1521,8 @@ const Xe = T.createContext({}), br = ({
           children: /* @__PURE__ */ r(fo, {
             disabled: M,
             value: x,
-            onValueChange: B,
-            onValueChangeAndShift: k,
+            onValueChange: L,
+            onValueChangeAndShift: O,
             colIndex: c + (b ? 1 : 0),
             rowIndex: o,
             numRows: s,
@@ -1531,15 +1533,15 @@ const Xe = T.createContext({}), br = ({
         groupConfig: te,
         groupId: me
       }, X) => /* @__PURE__ */ r(T.Fragment, {
-        children: te.columnOrder.map((P, ie) => /* @__PURE__ */ r(To, {
-          columnId: P,
+        children: te.columnOrder.map((A, ie) => /* @__PURE__ */ r(To, {
+          columnId: A,
           item: t,
-          colIndex: c + f[P],
+          colIndex: c + f[A],
           rowIndex: o,
           numRows: s,
           borderFromGroup: pe(X, ie, te.borderLeft),
           disableBorderLeft: X === 0 && ie === 0
-        }, P))
+        }, A))
       }, me)), y && /* @__PURE__ */ r("td", {
         style: {
           background: q
@@ -1549,7 +1551,7 @@ const Xe = T.createContext({}), br = ({
         })
       }), /* @__PURE__ */ r("td", {})]
     })
-  }), [c, f, M, b, w, J, p, x, t, q, s, y, o, k, i, m, a, B]);
+  }), [c, f, M, b, w, J, p, x, t, q, s, y, o, O, i, m, a, L]);
   return /* @__PURE__ */ g(G, {
     children: [/* @__PURE__ */ r(gt, {
       hoverBackground: D,
@@ -1557,7 +1559,7 @@ const Xe = T.createContext({}), br = ({
       focusBackground: j,
       borderLeft: S ? et : ke,
       ref: d,
-      children: A || l || S ? ee : /* @__PURE__ */ r("td", {
+      children: k || l || S ? ee : /* @__PURE__ */ r("td", {
         colSpan: u,
         style: {
           height: "var(--current-row-height)"
@@ -1574,7 +1576,7 @@ const Xe = T.createContext({}), br = ({
     return n;
 }, Do = (e) => Object.values(e).some((t) => No(t)), No = (e) => Boolean(e.renderSummaryCell || e.summaryText), zo = "_summaryRow_12x8k_1", Ko = {
   summaryRow: zo
-}, Ho = T.memo(function({
+}, $o = T.memo(function({
   columnId: t,
   items: n,
   disableBorderLeft: o,
@@ -1621,7 +1623,7 @@ const Xe = T.createContext({}), br = ({
       })
     })
   });
-}), $o = (e, t) => {
+}), Ho = (e, t) => {
   const n = [];
   for (let o = 0; o < e.length; o++) {
     const { summaryCellColSpan: s } = t[e[o]], c = Math.min(
@@ -1652,10 +1654,10 @@ const Xe = T.createContext({}), br = ({
       groupConfig: i,
       groupId: d
     }, u) => /* @__PURE__ */ r(T.Fragment, {
-      children: $o(i.columnOrder, c).map(({
+      children: Ho(i.columnOrder, c).map(({
         columnId: a,
         colSpan: p
-      }, f) => /* @__PURE__ */ r(Ho, {
+      }, f) => /* @__PURE__ */ r($o, {
         colSpan: p,
         columnId: a,
         items: t,
@@ -1893,12 +1895,13 @@ const Xe = T.createContext({}), br = ({
     sortOrderIconVariant: w
   } = R(), y = Ge(), {
     arrow: b,
-    onClickColumnHead: S
-  } = Fo(t), x = typeof i == "string" ? i : bo(t), B = Oe(n, o, d), k = y[t];
+    selected: S,
+    onClickColumnHead: x
+  } = Fo(t), L = typeof i == "string" ? i : bo(t), O = Oe(n, o, d), k = y[t];
   return /* @__PURE__ */ r("th", {
     style: {
       background: a != null ? a : "white",
-      borderLeft: B,
+      borderLeft: O,
       position: s || k.sticky ? "sticky" : void 0,
       left: k.left,
       right: k.right,
@@ -1911,12 +1914,14 @@ const Xe = T.createContext({}), br = ({
     children: /* @__PURE__ */ r(Ee, {
       width: "inherit",
       minWidth: "inherit",
-      arrow: !h && x ? b : void 0,
-      onClick: h ? void 0 : S,
-      label: x,
+      arrow: !h && L ? b : void 0,
+      onClick: h ? void 0 : x,
+      label: L,
       infoIconTooltipText: u,
       alignRight: l === "flex-end",
-      sortOrderIconVariant: f != null ? f : w
+      sortOrderIconVariant: f != null ? f : w,
+      selected: S,
+      height: "var(--current-row-height)"
     })
   });
 }), Zo = (e, t, n, o) => {
@@ -2001,17 +2006,17 @@ const Xe = T.createContext({}), br = ({
         })
       })
     }), o.map(({
-      groupConfig: B,
-      groupId: k
-    }, A) => /* @__PURE__ */ r(T.Fragment, {
-      children: B.columnOrder.map((O, z) => /* @__PURE__ */ r(Uo, {
-        columnId: O,
-        borderFromGroup: pe(A, z, B.borderLeft),
-        disableBorderLeft: A === 0 && z === 0,
+      groupConfig: L,
+      groupId: O
+    }, k) => /* @__PURE__ */ r(T.Fragment, {
+      children: L.columnOrder.map((P, z) => /* @__PURE__ */ r(Uo, {
+        columnId: P,
+        borderFromGroup: pe(k, z, L.borderLeft),
+        disableBorderLeft: k === 0 && z === 0,
         stickyHeader: a,
         top: x.top
-      }, O))
-    }, k)), i && /* @__PURE__ */ r("th", {
+      }, P))
+    }, O)), i && /* @__PURE__ */ r("th", {
       style: x,
       children: /* @__PURE__ */ r(E, {
         indent: i
@@ -2045,7 +2050,7 @@ const Xe = T.createContext({}), br = ({
   } = w, x = v(() => ({
     actions: b,
     dispatch: S
-  }), [b, S]), B = Boolean(s != null ? s : "columnGroupOrder" in n), k = "columnGroups" in n ? n.columnGroups : void 0, A = "columnGroupOrder" in n ? n.columnGroupOrder : void 0, O = "columnOrder" in n ? n.columnOrder : void 0, z = v(() => Ct(k, A, O), [k, A, O]), D = v(() => qn(n), [n]), j = v(() => so(n), [n]), M = v(() => eo(n), [n]), H = v(() => {
+  }), [b, S]), L = Boolean(s != null ? s : "columnGroupOrder" in n), O = "columnGroups" in n ? n.columnGroups : void 0, k = "columnGroupOrder" in n ? n.columnGroupOrder : void 0, P = "columnOrder" in n ? n.columnOrder : void 0, z = v(() => Ct(O, k, P), [O, k, P]), D = v(() => qn(n), [n]), j = v(() => so(n), [n]), M = v(() => eo(n), [n]), $ = v(() => {
     try {
       Un(n);
       return;
@@ -2053,8 +2058,8 @@ const Xe = T.createContext({}), br = ({
       return J instanceof Error ? J : new Error("Unknown error");
     }
   }, [n]);
-  return H ? /* @__PURE__ */ r(Xt, {
-    text: H.message
+  return $ ? /* @__PURE__ */ r(Xt, {
+    text: $.message
   }) : /* @__PURE__ */ r("table", {
     className: Fe(Ve.standardTable, Ve[l]),
     style: {
@@ -2081,7 +2086,7 @@ const Xe = T.createContext({}), br = ({
                     children: /* @__PURE__ */ r(vt.Provider, {
                       value: D,
                       children: /* @__PURE__ */ r(Nn.Provider, {
-                        value: B,
+                        value: L,
                         children: /* @__PURE__ */ g(mt.Provider, {
                           value: "columnGroupOrder" in n ? s != null ? s : n.columnGroupOrder : s,
                           children: [/* @__PURE__ */ r(lo, {}), /* @__PURE__ */ r(ht.Provider, {
@@ -2230,11 +2235,11 @@ export {
   le as useColumnConfigById,
   mo as useColumnValueResolver,
   fn as useEditableCell,
-  Hn as useFirstColumnConfig,
+  $n as useFirstColumnConfig,
   he as useGridCell,
   Tn as useGridNavigation,
   nt as useGridNavigationOptionsFromContext,
-  $n as useLastColumnConfig,
+  Hn as useLastColumnConfig,
   ro as useLocalStateTableContext,
   hn as useRevertableValue,
   Co as useRowCheckbox,