@splunk/react-ui 5.0.0-beta.3 → 5.0.0-beta.4

package/Table.js

@@ -62,13 +62,13 @@
     // EXPORTS
         e.d(n, {
         Body: () => /* reexport */ Z,
-        Caption: () => /* reexport */ de,
-        Cell: () => /* reexport */ xe,
-        Head: () => /* reexport */ ar,
-        HeadCell: () => /* reexport */ Pn,
-        HeadDropdownCell: () => /* reexport */ Ir,
-        Row: () => /* reexport */ Wt,
-        default: () => /* reexport */ Xo
+        Caption: () => /* reexport */ ve,
+        Cell: () => /* reexport */ ke,
+        Head: () => /* reexport */ Jt,
+        HeadCell: () => /* reexport */ En,
+        HeadDropdownCell: () => /* reexport */ gr,
+        Row: () => /* reexport */ At,
+        default: () => /* reexport */ Yo
     });
     // CONCATENATED MODULE: external "react"
     const t = require("react");
@@ -92,8 +92,8 @@
     const v = require("lodash/indexOf");
     var p =  e.n(v);
     // CONCATENATED MODULE: external "lodash/isEqual"
-    const m = require("lodash/isEqual");
-    var b =  e.n(m);
+    const b = require("lodash/isEqual");
+    var m =  e.n(b);
     // CONCATENATED MODULE: external "lodash/isNumber"
     const h = require("lodash/isNumber");
     // CONCATENATED MODULE: external "lodash/omit"
@@ -102,38 +102,38 @@
     // CONCATENATED MODULE: external "lodash/throttle"
     const w = require("lodash/throttle");
     var C =  e.n(w);
-    // CONCATENATED MODULE: external "react-resize-detector"
-    const x = require("react-resize-detector");
-    var S =  e.n(x);
     // CONCATENATED MODULE: external "@splunk/react-ui/EventListener"
-    const k = require("@splunk/react-ui/EventListener");
+    const x = require("@splunk/react-ui/EventListener");
+    var S =  e.n(x);
+    // CONCATENATED MODULE: external "@splunk/react-ui/useResizeObserver"
+    const k = require("@splunk/react-ui/useResizeObserver");
     var O =  e.n(k);
+    // CONCATENATED MODULE: external "@splunk/ui-utils/id"
+    const R = require("@splunk/ui-utils/id");
     // CONCATENATED MODULE: external "@splunk/ui-utils/keyboard"
-    const R = require("@splunk/ui-utils/keyboard");
+    const E = require("@splunk/ui-utils/keyboard");
     // CONCATENATED MODULE: external "@splunk/react-ui/ScrollContainerContext"
-    const E = require("@splunk/react-ui/ScrollContainerContext");
+    const I = require("@splunk/react-ui/ScrollContainerContext");
     // CONCATENATED MODULE: external "@splunk/react-ui/usePrevious"
-    const I = require("@splunk/react-ui/usePrevious");
-    var T =  e.n(I);
+    const T = require("@splunk/react-ui/usePrevious");
+    var j =  e.n(T);
     // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
     const D = require("@splunk/ui-utils/i18n");
     // CONCATENATED MODULE: external "@splunk/ui-utils/format"
-    const A = require("@splunk/ui-utils/format");
+    const q = require("@splunk/ui-utils/format");
     // CONCATENATED MODULE: external "lodash/includes"
-    const j = require("lodash/includes");
-    var q =  e.n(j);
+    const A = require("lodash/includes");
+    var P =  e.n(A);
     // CONCATENATED MODULE: external "lodash/without"
-    const z = require("lodash/without");
-    var P =  e.n(z);
-    // CONCATENATED MODULE: external "@splunk/ui-utils/id"
-    const _ = require("@splunk/ui-utils/id");
+    const _ = require("lodash/without");
+    var z =  e.n(_);
     // CONCATENATED MODULE: external "styled-components"
     const M = require("styled-components");
     var $ =  e.n(M);
     // CONCATENATED MODULE: external "@splunk/themes"
     const N = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/Table/BodyStyles.ts
-    var L = $().tbody.withConfig({
+    var W = $().tbody.withConfig({
         displayName: "BodyStyles__Styled",
         componentId: "sc-1k5p6pq-0"
     })([ "", " z-index:0;" ], N.mixins.reset("table-row-group"));
@@ -144,7 +144,7 @@
  * @param ref - The React callback or object ref. Can be `null` or `undefined`.
  * @param current - The new value of the ref.
  */
-    function H(e, n) {
+    function L(e, n) {
         if (e) {
             if (typeof e === "function") {
                 e(n);
@@ -157,8 +157,8 @@
         }
     }
     // CONCATENATED MODULE: ./src/Table/Body.tsx
-    function W() {
-        return W = Object.assign ? Object.assign.bind() : function(e) {
+    function H() {
+        return H = Object.assign ? Object.assign.bind() : function(e) {
             for (var n = 1; n < arguments.length; n++) {
                 var t = arguments[n];
                 for (var r in t) {
@@ -166,22 +166,22 @@
                 }
             }
             return e;
-        }, W.apply(null, arguments);
+        }, H.apply(null, arguments);
     }
     function K(e, n) {
-        return X(e) || U(e, n) || F(e, n) || B();
+        return X(e) || U(e, n) || V(e, n) || B();
     }
     function B() {
         throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
     }
-    function F(e, n) {
+    function V(e, n) {
         if (e) {
-            if ("string" == typeof e) return V(e, n);
+            if ("string" == typeof e) return F(e, n);
             var t = {}.toString.call(e).slice(8, -1);
-            return "Object" === t && e.constructor && (t = e.constructor.name), "Map" === t || "Set" === t ? Array.from(e) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? V(e, n) : void 0;
+            return "Object" === t && e.constructor && (t = e.constructor.name), "Map" === t || "Set" === t ? Array.from(e) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? F(e, n) : void 0;
         }
     }
-    function V(e, n) {
+    function F(e, n) {
         (null == n || n > e.length) && (n = e.length);
         for (var t = 0, r = Array(n); t < n; t++) {
             r[t] = e[t];
@@ -213,9 +213,9 @@
     function X(e) {
         if (Array.isArray(e)) return e;
     }
-    function G(e, n) {
+    function Y(e, n) {
         if (null == e) return {};
-        var t, r, o = Y(e, n);
+        var t, r, o = G(e, n);
         if (Object.getOwnPropertySymbols) {
             var i = Object.getOwnPropertySymbols(e);
             for (r = 0; r < i.length; r++) {
@@ -224,7 +224,7 @@
         }
         return o;
     }
-    function Y(e, n) {
+    function G(e, n) {
         if (null == e) return {};
         var t = {};
         for (var r in e) {
@@ -252,26 +252,26 @@
         stripeRows: i().bool
     };
     function Q(e) {
-        var n = e.actions, o = e.children, i = e.elementRef, a = e.movableColumns, l = e.onRequestMoveRow, u = e.rowExpansion, s = u === void 0 ? "none" : u, c = e.primaryColumnIndex, d = e.stripeRows, f = G(e, [ "actions", "children", "elementRef", "movableColumns", "onRequestMoveRow", "rowExpansion", "primaryColumnIndex", "stripeRows" ]);
+        var n = e.actions, o = e.children, i = e.elementRef, a = e.movableColumns, l = e.onRequestMoveRow, u = e.rowExpansion, s = u === void 0 ? "none" : u, c = e.primaryColumnIndex, d = e.stripeRows, f = Y(e, [ "actions", "children", "elementRef", "movableColumns", "onRequestMoveRow", "rowExpansion", "primaryColumnIndex", "stripeRows" ]);
  // @docs-props-type BodyPropsBase
                 var v = [];
-        var p = (0, t.useState)([]), m = K(p, 2), b = m[0], h = m[1];
+        var p = (0, t.useState)([]), b = K(p, 2), m = b[0], h = b[1];
         var y = (0, t.useRef)(null);
         var g = (0, t.useCallback)((function(e) {
             y.current = e;
-            H(i, e);
+            L(i, e);
         }), [ i, y ]);
         var w = function e(n, t, r) {
-            var o = b;
+            var o = m;
             if (s === "single") {
-                if (q()(o, t)) {
+                if (P()(o, t)) {
                     h([]);
                 } else {
                     h([ t ]);
                 }
             } else if (s === "multi") {
-                if (q()(o, t)) {
-                    h(P()(o, t));
+                if (P()(o, t)) {
+                    h(z()(o, t));
                 } else {
                     h(o === null || o === void 0 ? void 0 : o.concat(t));
                 }
@@ -283,7 +283,7 @@
                 var x = (0, t.useMemo)((function() {
             return C.map((function(e) {
                 return e.props.expansionRow ? t.Children.map(e.props.expansionRow, (function() {
-                    return (0, _.createDOMID)();
+                    return (0, R.createDOMID)();
                 })) : undefined;
             }));
         }), [ C ]);
@@ -293,27 +293,27 @@
                 var o = e.key;
                 var i = r % 2 ? "even" : "odd";
                 var u = d ? i : "none";
-                var f = s === "controlled" ? e.props.expanded : q()(b, o);
+                var f = s === "controlled" ? e.props.expanded : P()(m, o);
                 var p = function n(t) {
                     w(t, o, e.props.onExpansion);
                 };
-                var m = x[r];
-                var h = m === null || m === void 0 ? void 0 : m.join(" ");
+                var b = x[r];
+                var h = b === null || b === void 0 ? void 0 : b.join(" ");
                 v.push( (0, t.cloneElement)(e, {
                     stripe: u,
                     actions: n,
                     expanded: f,
                     expansionRowIds: h,
                     expandable: s !== "none",
-                    draggable: !!l,
+                    isDraggable: !!l,
                     movableColumns: a,
                     primaryColumnIndex: c,
                     onExpansion: p,
-                    key: e.key || e.props.dataId || r
+                    key: e.key || r
                 }));
-                if (f && e.props.expansionRow && Array.isArray(m)) {
+                if (f && e.props.expansionRow && Array.isArray(b)) {
                     t.Children.forEach(e.props.expansionRow, (function(e, n) {
-                        var r = m[n];
+                        var r = b[n];
                         v.push( (0, t.cloneElement)(e, {
                             key: r,
                             id: r,
@@ -329,7 +329,7 @@
             return null;
         }
         
-        return r().createElement(L, W({
+        return r().createElement(W, H({
             "data-test": "body"
         }, f, {
             ref: g
@@ -346,7 +346,10 @@
     var ne = $().div.withConfig({
         displayName: "TableStyles__StyledTableContainer",
         componentId: "sc-1cmfss7-1"
-    })([ "overflow:auto;&::before{content:'';width:100%;height:0;top:0;position:absolute;}" ]);
+    })([ "overflow:auto;", " &::before{content:'';width:100%;height:0;top:0;position:absolute;}" ], (function(e) {
+        var n = e.$dragging;
+        return n && (0, M.css)([ "overflow:hidden;" ]);
+    }));
     var te = $().table.withConfig({
         displayName: "TableStyles__StyledTable",
         componentId: "sc-1cmfss7-2"
@@ -369,9 +372,29 @@
         var n = e.side;
         return n;
     }));
+    var ae = $().table.withConfig({
+        displayName: "TableStyles__StyledDragShadowTable",
+        componentId: "sc-1cmfss7-6"
+    })([ "display:block;background:", ";border-collapse:collapse;height:", ";width:", ";" ], N.variables.interactiveColorOverlayDrag, (function(e) {
+        var n = e.$height;
+        return "".concat(n, "px");
+    }), (function(e) {
+        var n = e.$width;
+        return "".concat(n, "px");
+    }));
+    var le = $().div.withConfig({
+        displayName: "TableStyles__StyledGuideLine",
+        componentId: "sc-1cmfss7-7"
+    })([ "position:absolute;width:1px;left:", ";top:0;height:", ";pointer-events:none;background-color:", ";" ], (function(e) {
+        var n = e.$left;
+        return "".concat(n, "px");
+    }), (function(e) {
+        var n = e.$height;
+        return "".concat(n, "px");
+    }), N.variables.interactiveColorAccent);
     // CONCATENATED MODULE: ./src/Table/Caption.tsx
-    function ae() {
-        return ae = Object.assign ? Object.assign.bind() : function(e) {
+    function ue() {
+        return ue = Object.assign ? Object.assign.bind() : function(e) {
             for (var n = 1; n < arguments.length; n++) {
                 var t = arguments[n];
                 for (var r in t) {
@@ -379,11 +402,11 @@
                 }
             }
             return e;
-        }, ae.apply(null, arguments);
+        }, ue.apply(null, arguments);
     }
-    function le(e, n) {
+    function se(e, n) {
         if (null == e) return {};
-        var t, r, o = ue(e, n);
+        var t, r, o = ce(e, n);
         if (Object.getOwnPropertySymbols) {
             var i = Object.getOwnPropertySymbols(e);
             for (r = 0; r < i.length; r++) {
@@ -392,7 +415,7 @@
         }
         return o;
     }
-    function ue(e, n) {
+    function ce(e, n) {
         if (null == e) return {};
         var t = {};
         for (var r in e) {
@@ -403,34 +426,34 @@
         }
         return t;
     }
-    var se = {
+    var de = {
         children: i().node.isRequired,
         side: i().oneOf([ "top", "bottom" ])
     };
     /**
  * Tables that use a docked header must place the caption on the bottom side.
  * Tables that use a fixed header cannot use captions.
- */    function ce(e) {
-        var n = e.children, t = e.side, o = t === void 0 ? "top" : t, i = le(e, [ "children", "side" ]);
+ */    function fe(e) {
+        var n = e.children, t = e.side, o = t === void 0 ? "top" : t, i = se(e, [ "children", "side" ]);
         // @docs-props-type CaptionPropsBase
                 
-        return r().createElement(ie, ae({
+        return r().createElement(ie, ue({
             "data-test": "caption",
             side: o
         }, i), n);
     }
-    ce.propTypes = se;
-    ce.splunkUiType = "Table.Caption";
-    /* harmony default export */    const de = ce;
+    fe.propTypes = de;
+    fe.splunkUiType = "Table.Caption";
+    /* harmony default export */    const ve = fe;
     // CONCATENATED MODULE: external "@splunk/react-ui/ButtonSimple"
-    const fe = require("@splunk/react-ui/ButtonSimple");
+    const pe = require("@splunk/react-ui/ButtonSimple");
     // CONCATENATED MODULE: ./src/Table/CellStyles.ts
-    var ve = "2px";
-    var pe = (0, M.css)([ "box-shadow:", ";" ], N.variables.focusShadowInset);
-    var me = $().td.withConfig({
+    var be = "2px";
+    var me = (0, M.css)([ "box-shadow:", ";" ], N.variables.focusShadowInset);
+    var he = $().td.withConfig({
         displayName: "CellStyles__Styled",
         componentId: "sc-1955xk2-0"
-    })([ "", " padding:", " ", ";border-left:0 solid transparent;border-right:0 solid transparent;color:", ";word-wrap:break-word;line-height:20px;vertical-align:top;*:where(button):focus,*:is(:has(> input:focus)):not([disabled]){box-shadow:", ";}", " ", " ", " [data-expansion-row='true'] > &:first-child{padding-top:8px;}[data-expansion-row='true'] > &:last-child{padding-bottom:14px;}" ], N.mixins.reset("table-cell"), ve, N.variables.spacingSmall, N.variables.contentColorDefault, N.variables.focusShadowInset, (0, 
+    })([ "", " padding:", " ", ";border-left:0 solid transparent;border-right:0 solid transparent;color:", ";word-wrap:break-word;line-height:20px;vertical-align:top;*:where(button):focus,&& *:is(:has(> input:focus)):not([disabled]){box-shadow:", ";}", " ", " ", " [data-expansion-row='true'] > &:first-child{padding-top:8px;}[data-expansion-row='true'] > &:last-child{padding-bottom:14px;}" ], N.mixins.reset("table-cell"), be, N.variables.spacingSmall, N.variables.contentColorDefault, N.variables.focusShadowInset, (0, 
     N.pickVariant)("$variant", {
         expand: (0, M.css)([ "padding:0;vertical-align:top;height:100%;" ]),
         toggle: (0, M.css)([ "padding:0;vertical-align:top;height:100%;" ])
@@ -438,7 +461,7 @@
         var n = e.$variant, t = e.$isPrimaryCell;
         return (0, N.pickVariant)("$appearance", {
             data: (0, M.css)([ "", "" ], n === "actions" && (0, M.css)([ "cursor:default;*:where(button){", " &:focus{box-shadow:", ";}}" ], (0, 
-            fe.buttonMixin)("subtle", {
+            pe.buttonMixin)("subtle", {
                 color: N.variables.contentColorDefault
             }), N.variables.focusShadowInset)),
             rowLink: (0, M.css)([ "color:", ";*:hover > &&{cursor:pointer;", "}" ], N.variables.contentColorActive, t && (0, 
@@ -447,13 +470,13 @@
         });
     }), (function(e) {
         var n = e.$clickable, t = e.$focusWithin, r = e.$stripe;
-        return n && (0, M.css)([ "cursor:pointer;&:hover{background-color:", ";}&:focus{", " background-color:", ";}", "" ], r === "even" ? N.variables.neutral300 : N.variables.neutral100, pe, r === "even" ? N.variables.neutral300 : N.variables.neutral100, t && (0, 
-        M.css)([ "&:focus-within{", " background-color:", ";}" ], pe, r === "even" ? N.variables.neutral300 : N.variables.neutral100));
+        return n && (0, M.css)([ "cursor:pointer;&:hover{background-color:", ";}&:focus{", " background-color:", ";}", "" ], r === "even" ? N.variables.neutral300 : N.variables.neutral100, me, r === "even" ? N.variables.neutral300 : N.variables.neutral100, t && (0, 
+        M.css)([ "&:focus-within{", " background-color:", ";}" ], me, r === "even" ? N.variables.neutral300 : N.variables.neutral100));
     }));
     /*
  * A wrapper ensures that the Table Cell contents align to the top while staying within the height of inputHeight.
  * This allows text to align properly with expand and select icons when other cell contents are larger.
- */    var be = $().div.withConfig({
+ */    var ye = $().div.withConfig({
         displayName: "CellStyles__StyledCellContent",
         componentId: "sc-1955xk2-1"
     })([ "display:flex;align-items:center;word-break:break-word;min-height:", ";", " ", "" ], N.variables.inputHeight, (0, 
@@ -465,8 +488,8 @@
         return n ? (0, M.css)([ "display:block;text-align:", ";" ], t) : (0, M.css)([ "justify-content:", ";" ], t);
     }));
     // CONCATENATED MODULE: ./src/Table/Cell.tsx
-    function he() {
-        return he = Object.assign ? Object.assign.bind() : function(e) {
+    function ge() {
+        return ge = Object.assign ? Object.assign.bind() : function(e) {
             for (var n = 1; n < arguments.length; n++) {
                 var t = arguments[n];
                 for (var r in t) {
@@ -474,11 +497,11 @@
                 }
             }
             return e;
-        }, he.apply(null, arguments);
+        }, ge.apply(null, arguments);
     }
-    function ye(e, n) {
+    function we(e, n) {
         if (null == e) return {};
-        var t, r, o = ge(e, n);
+        var t, r, o = Ce(e, n);
         if (Object.getOwnPropertySymbols) {
             var i = Object.getOwnPropertySymbols(e);
             for (r = 0; r < i.length; r++) {
@@ -487,7 +510,7 @@
         }
         return o;
     }
-    function ge(e, n) {
+    function Ce(e, n) {
         if (null == e) return {};
         var t = {};
         for (var r in e) {
@@ -498,7 +521,7 @@
         }
         return t;
     }
-    /** @public */    var we = {
+    /** @public */    var xe = {
         align: i().oneOf([ "left", "center", "right" ]),
         /** @private */
         appearance: i().oneOf([ "data", "link", "rowLink" ]),
@@ -521,30 +544,30 @@
         /** @private. */
         variant: i().oneOf([ "toggle", "expand", "drag", "actions" ])
     };
-    function Ce(e) {
-        var n = e.align, o = n === void 0 ? "left" : n, i = e.appearance, a = e.appearClickable, l = e.children, u = e.data, s = e.disabled, c = e.elementRef, d = e.isPrimaryCell, f = e.onClick, v = e.onKeyDown, p = e.stripe, m = e.variant, b = ye(e, [ "align", "appearance", "appearClickable", "children", "data", "disabled", "elementRef", "isPrimaryCell", "onClick", "onKeyDown", "stripe", "variant" ]);
+    function Se(e) {
+        var n = e.align, o = n === void 0 ? "left" : n, i = e.appearance, a = e.appearClickable, l = e.children, u = e.data, s = e.disabled, c = e.elementRef, d = e.isPrimaryCell, f = e.onClick, v = e.onKeyDown, p = e.stripe, b = e.variant, m = we(e, [ "align", "appearance", "appearClickable", "children", "data", "disabled", "elementRef", "isPrimaryCell", "onClick", "onKeyDown", "stripe", "variant" ]);
         // @docs-props-type CellPropsBase
                 var h = f !== undefined;
         var y = a || h;
         var g = y ? "link" : "data";
         var w = (0, t.useCallback)((function(e) {
-            H(c, e);
+            L(c, e);
         }), [ c ]);
         var C = (0, t.useCallback)((function(e) {
-            if (m === "actions") {
+            if (b === "actions") {
                 // Action buttons have their own onClicks inside the cell so we don't want Row onClick to fire
                 e.stopPropagation();
             }
             f === null || f === void 0 ? void 0 : f(e, u);
-        }), [ u, f, m ]);
+        }), [ u, f, b ]);
         var x = (0, t.useCallback)((function(e) {
-            if ((0, R.keycode)(e.nativeEvent) === "enter") {
+            if ((0, E.keycode)(e.nativeEvent) === "enter") {
                 f === null || f === void 0 ? void 0 : f(e, u);
             }
             v === null || v === void 0 ? void 0 : v(e);
         }), [ u, f, v ]);
         
-        return r().createElement(me, he({
+        return r().createElement(he, ge({
             "data-test": "cell",
             $appearance: i || g,
             $clickable: y ? true : undefined,
@@ -552,59 +575,52 @@
             $focusWithin: a,
             $isPrimaryCell: d,
             $stripe: p,
-            $variant: m,
+            $variant: b,
             onClick: C,
             onKeyDown: x,
             ref: w,
             tabIndex: h ? 0 : undefined
-        }, b),  r().createElement(be, {
+        }, m),  r().createElement(ye, {
             $align: o,
-            $variant: m
+            $variant: b
         }, l));
     }
-    Ce.propTypes = we;
-    Ce.splunkUiType = "Table.Cell";
-    /* harmony default export */    const xe = Ce;
+    Se.propTypes = xe;
+    Se.splunkUiType = "Table.Cell";
+    /* harmony default export */    const ke = Se;
     // CONCATENATED MODULE: external "lodash/isString"
-    const Se = require("lodash/isString");
-    var ke =  e.n(Se);
-    // CONCATENATED MODULE: external "lodash/merge"
-    const Oe = require("lodash/merge");
+    const Oe = require("lodash/isString");
     var Re =  e.n(Oe);
-    // CONCATENATED MODULE: external "@splunk/react-icons/ArrowDown"
-    const Ee = require("@splunk/react-icons/ArrowDown");
+    // CONCATENATED MODULE: external "lodash/merge"
+    const Ee = require("lodash/merge");
     var Ie =  e.n(Ee);
+    // CONCATENATED MODULE: external "@splunk/react-icons/ParallelDots"
+    const Te = require("@splunk/react-icons/ParallelDots");
+    var je =  e.n(Te);
+    // CONCATENATED MODULE: external "@splunk/react-icons/ArrowDown"
+    const De = require("@splunk/react-icons/ArrowDown");
+    var qe =  e.n(De);
     // CONCATENATED MODULE: external "@splunk/react-icons/ArrowUp"
-    const Te = require("@splunk/react-icons/ArrowUp");
-    var De =  e.n(Te);
+    const Ae = require("@splunk/react-icons/ArrowUp");
+    var Pe =  e.n(Ae);
     // CONCATENATED MODULE: external "@splunk/react-icons/ArrowUpDown"
-    const Ae = require("@splunk/react-icons/ArrowUpDown");
-    var je =  e.n(Ae);
+    const _e = require("@splunk/react-icons/ArrowUpDown");
+    var ze =  e.n(_e);
     // CONCATENATED MODULE: external "@splunk/react-icons/CaretSmallDown"
-    const qe = require("@splunk/react-icons/CaretSmallDown");
-    var ze =  e.n(qe);
-    // CONCATENATED MODULE: external "@splunk/react-icons/ParallelDots"
-    const Pe = require("@splunk/react-icons/ParallelDots");
-    var _e =  e.n(Pe);
-    // CONCATENATED MODULE: external "@splunk/react-ui/ScreenReaderContent"
-    const Me = require("@splunk/react-ui/ScreenReaderContent");
+    const Me = require("@splunk/react-icons/CaretSmallDown");
     var $e =  e.n(Me);
     // CONCATENATED MODULE: external "@splunk/react-ui/Divider"
     const Ne = require("@splunk/react-ui/Divider");
-    var Le =  e.n(Ne);
+    var We =  e.n(Ne);
     // CONCATENATED MODULE: ./src/Table/HeadInnerStyles.ts
-    var He = "2px";
-    var We = $().div.withConfig({
-        displayName: "HeadInnerStyles__StyledDragContainer",
-        componentId: "sc-1sa0wng-0"
-    })([ "display:flex;cursor:move;align-items:center;justify-content:center;height:100%;user-select:none;-webkit-user-drag:element;" ]);
-    var Ke = $().span.withConfig({
+    var Le = "2px";
+    var He = $().span.withConfig({
         displayName: "HeadInnerStyles__StyledMenuIcon",
-        componentId: "sc-1sa0wng-1"
+        componentId: "sc-1sa0wng-0"
     })([ "position:relative;color:", ";" ], N.variables.contentColorDefault);
-    var Be = $().span.withConfig({
+    var Ke = $().span.withConfig({
         displayName: "HeadInnerStyles__StyledLabel",
-        componentId: "sc-1sa0wng-2"
+        componentId: "sc-1sa0wng-1"
     })([ "display:flex;flex:0 1 auto;position:relative;word-wrap:break-word;word-break:break-word;", " ", " ", " ", "" ], (0, 
     N.pickVariant)("$truncate", {
         true: (0, M.css)([ "overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" ])
@@ -618,41 +634,35 @@
         var n = e.$variant;
         return n === "toggleAll" && (0, M.css)([ "width:100%;" ]);
     }));
-    var Fe = $().span.withConfig({
+    var Be = $().span.withConfig({
         displayName: "HeadInnerStyles__StyledSortIcon",
-        componentId: "sc-1sa0wng-3"
+        componentId: "sc-1sa0wng-2"
     })([ "color:", ";" ], N.variables.contentColorDefault);
-    var Ve = (0, M.css)([ "box-shadow:", ";outline:none;color:", ";text-decoration:underline;", ",", "{color:", ";}" ], N.variables.focusShadowInset, N.variables.contentColorActive, /* sc-sel */ Fe, /* sc-sel */ Ke, N.variables.contentColorActive);
-    var Ue = $().div.withConfig({
+    var Ve = (0, M.css)([ "box-shadow:", ";outline:none;color:", ";text-decoration:underline;", ",", "{color:", ";}" ], N.variables.focusShadowInset, N.variables.contentColorActive, /* sc-sel */ Be, /* sc-sel */ He, N.variables.contentColorActive);
+    var Fe = $().div.withConfig({
         displayName: "HeadInnerStyles__Styled",
-        componentId: "sc-1sa0wng-4"
-    })([ "", ";", ";", ";position:relative;width:100%;justify-content:", ";gap:", ";padding:", " ", ";min-height:calc(", " + ", "*2);align-items:center;", " ", " ", " &[data-helper]{position:absolute;left:-10000px;top:-10000px;background-color:", ";box-shadow:", ";box-sizing:border-box;background-repeat:repeat-x;}@media print{background-image:none;}", "" ], N.mixins.reset("flex"), N.mixins.clearfix(), N.mixins.typography("body", {
+        componentId: "sc-1sa0wng-3"
+    })([ "", ";", ";", ";position:relative;flex-grow:1;justify-content:", ";gap:", ";padding:", " ", ";min-height:calc(", " + ", "*2);align-items:center;", " @media print{background-image:none;}", "" ], N.mixins.reset("flex"), N.mixins.clearfix(), N.mixins.typography("body", {
         weight: "bold"
     }), (0, N.pickVariant)("$align", {
         center: "center",
         left: "flex-start",
         right: "flex-end"
-    }), N.variables.spacingXSmall, He, N.variables.spacingSmall, N.variables.inputHeight, He, (function(e) {
+    }), N.variables.spacingXSmall, Le, N.variables.spacingSmall, N.variables.inputHeight, Le, (function(e) {
         var n = e.$variant;
         return n === "toggleAll" && (0, M.css)([ "padding:0;" ]);
     }), (function(e) {
-        var n = e.$dragging;
-        return n && (0, M.css)([ "opacity:0;" ]);
-    }), (function(e) {
-        var n = e.$draggable;
-        return n && (0, M.css)([ "-webkit-user-drag:element;user-select:none;" ]);
-    }), N.variables.neutral300, N.variables.focusShadowInset, (function(e) {
         var n = e.$clickable, t = e.$focusWithin;
         return n && (0, M.css)([ "cursor:pointer;&:focus{", "}", " &:hover{outline:none;text-decoration:underline;color:", ";", ",", "{color:", ";}}" ], Ve, t && (0, 
-        M.css)([ "&:focus-within{", "}" ], Ve), N.variables.contentColorActive, /* sc-sel */ Fe, /* sc-sel */ Ke, N.variables.contentColorActive);
+        M.css)([ "&:focus-within{", "}" ], Ve), N.variables.contentColorActive, /* sc-sel */ Be, /* sc-sel */ He, N.variables.contentColorActive);
     }));
-    var Xe = $()(Le()).withConfig({
+    var Ue = $()(We()).withConfig({
         displayName: "HeadInnerStyles__StyledResize",
-        componentId: "sc-1sa0wng-5"
-    })([ "", ";position:absolute;right:-5px;width:9px;top:0;bottom:0;z-index:1;cursor:col-resize;th:last-child > ", " > &{right:0;width:5px;}&::-moz-focus-inner{border:0;padding:0;}&:focus{outline:none;&::before{content:'';position:absolute;background:", ";box-shadow:", ";left:4px;width:1px;top:0;bottom:0;}}" ], N.mixins.reset("block"), /* sc-sel */ Ue, N.variables.focusColor, N.variables.focusShadow);
+        componentId: "sc-1sa0wng-4"
+    })([ "", ";position:absolute;right:-5px;width:9px;top:0;bottom:0;z-index:1;cursor:col-resize;th:last-child > ", " > &{right:0;width:5px;}&::-moz-focus-inner{border:0;padding:0;}&:focus{outline:none;&::before{content:'';position:absolute;background:", ";box-shadow:", ";left:4px;width:1px;top:0;bottom:0;}}" ], N.mixins.reset("block"), /* sc-sel */ Fe, N.variables.focusColor, N.variables.focusShadow);
     // CONCATENATED MODULE: ./src/utils/ssrDocument.ts
     /* eslint-disable @typescript-eslint/no-empty-function */
-    var Ge = {
+    var Xe = {
         body: {
             appendChild: function e() {
                 return [];
@@ -707,13 +717,13 @@
         }
     };
     function Ye() {
-        var e = typeof document !== "undefined" ? document : Ge;
+        var e = typeof document !== "undefined" ? document : Xe;
         return e;
     }
     // CONCATENATED MODULE: ./src/utils/ssrWindow.ts
     /* eslint-disable @typescript-eslint/no-empty-function */
-    var Je = {
-        document: Ge,
+    var Ge = {
+        document: Xe,
         navigator: {
             userAgent: ""
         },
@@ -767,13 +777,13 @@
             clearTimeout(n);
         }
     };
-    function Qe() {
-        var e = typeof window !== "undefined" ? window : Je;
+    function Je() {
+        var e = typeof window !== "undefined" ? window : Ge;
         return e;
     }
     // CONCATENATED MODULE: ./src/Table/HeadInner.tsx
-    function Ze() {
-        return Ze = Object.assign ? Object.assign.bind() : function(e) {
+    function Qe() {
+        return Qe = Object.assign ? Object.assign.bind() : function(e) {
             for (var n = 1; n < arguments.length; n++) {
                 var t = arguments[n];
                 for (var r in t) {
@@ -781,41 +791,41 @@
                 }
             }
             return e;
-        }, Ze.apply(null, arguments);
+        }, Qe.apply(null, arguments);
     }
-    function en(e) {
-        return rn(e) || tn(e) || ln(e) || nn();
+    function Ze(e) {
+        return tn(e) || nn(e) || an(e) || en();
     }
-    function nn() {
+    function en() {
         throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
     }
-    function tn(e) {
+    function nn(e) {
         if ("undefined" != typeof Symbol && null != e[Symbol.iterator] || null != e["@@iterator"]) return Array.from(e);
     }
-    function rn(e) {
-        if (Array.isArray(e)) return un(e);
+    function tn(e) {
+        if (Array.isArray(e)) return ln(e);
     }
-    function on(e, n) {
-        return cn(e) || sn(e, n) || ln(e, n) || an();
+    function rn(e, n) {
+        return sn(e) || un(e, n) || an(e, n) || on();
     }
-    function an() {
+    function on() {
         throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
     }
-    function ln(e, n) {
+    function an(e, n) {
         if (e) {
-            if ("string" == typeof e) return un(e, n);
+            if ("string" == typeof e) return ln(e, n);
             var t = {}.toString.call(e).slice(8, -1);
-            return "Object" === t && e.constructor && (t = e.constructor.name), "Map" === t || "Set" === t ? Array.from(e) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? un(e, n) : void 0;
+            return "Object" === t && e.constructor && (t = e.constructor.name), "Map" === t || "Set" === t ? Array.from(e) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? ln(e, n) : void 0;
         }
     }
-    function un(e, n) {
+    function ln(e, n) {
         (null == n || n > e.length) && (n = e.length);
         for (var t = 0, r = Array(n); t < n; t++) {
             r[t] = e[t];
         }
         return r;
     }
-    function sn(e, n) {
+    function un(e, n) {
         var t = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
         if (null != t) {
             var r, o, i, a, l = [], u = !0, s = !1;
@@ -837,12 +847,12 @@
             return l;
         }
     }
-    function cn(e) {
+    function sn(e) {
         if (Array.isArray(e)) return e;
     }
-    function dn(e, n) {
+    function cn(e, n) {
         if (null == e) return {};
-        var t, r, o = fn(e, n);
+        var t, r, o = dn(e, n);
         if (Object.getOwnPropertySymbols) {
             var i = Object.getOwnPropertySymbols(e);
             for (r = 0; r < i.length; r++) {
@@ -851,7 +861,7 @@
         }
         return o;
     }
-    function fn(e, n) {
+    function dn(e, n) {
         if (null == e) return {};
         var t = {};
         for (var r in e) {
@@ -862,10 +872,10 @@
         }
         return t;
     }
-    var vn = {
+    var fn = {
         align: i().oneOf([ "left", "center", "right" ]),
         clickable: i().bool,
-        columnId: i().any,
+        columnId: i().string,
         elementRef: i().oneOfType([ i().func, i().object ]),
         focusWithin: i().bool,
         id: i().string,
@@ -873,8 +883,6 @@
         isMenu: i().bool,
         label: i().node,
         onAutosizeColumn: i().func,
-        onDragEnd: i().func,
-        onDragStart: i().func,
         onRequestResize: i().func,
         resizable: i().bool,
         sortDir: i().oneOf([ "none", "asc", "desc" ]),
@@ -882,254 +890,208 @@
         width: i().oneOfType([ i().number, i().oneOf([ "auto" ]) ]),
         variant: i().oneOf([ "toggleAll", "info", "actions" ])
     };
-    var pn = new Set([ "none", "asc", "desc" ]);
-    var mn = Object.freeze({
+    var vn = new Set([ "none", "asc", "desc" ]);
+    var pn = Object.freeze({
         none: (0, D._)("Click to sort"),
         asc: (0, D._)("Press to sort descending"),
         desc: (0, D._)("Press to sort ascending")
     });
     var bn = Object.freeze({
-        none: je(),
-        asc: De(),
-        desc: Ie()
+        none: ze(),
+        asc: Pe(),
+        desc: qe()
     });
-    function hn(e) {
-        var n = e.index, o = e.clickable, i = e.columnId, a = e.elementRef, l = e.focusWithin, u = e.id, s = e.width, c = e.onDragEnd, d = e.onAutosizeColumn, f = e.align, v = f === void 0 ? "left" : f, p = e.label, m = e.isMenu, b = m === void 0 ? false : m, h = e.onDragStart, y = e.onRequestResize, w = e.resizable, C = w === void 0 ? true : w, x = e.sortDir, S = x === void 0 ? undefined : x, k = e.truncate, E = k === void 0 ? true : k, I = e.variant, T = dn(e, [ "index", "clickable", "columnId", "elementRef", "focusWithin", "id", "width", "onDragEnd", "onAutosizeColumn", "align", "label", "isMenu", "onDragStart", "onRequestResize", "resizable", "sortDir", "truncate", "variant" ]);
+    function mn(e) {
+        var n = e.align, o = n === void 0 ? "left" : n, i = e.clickable, a = e.columnId, l = e.elementRef, u = e.focusWithin, s = e.id, c = e.index, d = e.isMenu, f = d === void 0 ? false : d, v = e.label, p = e.onAutosizeColumn, b = e.onRequestResize, m = e.resizable, h = m === void 0 ? true : m, y = e.sortDir, w = e.truncate, C = w === void 0 ? true : w, x = e.variant, k = e.width, O = cn(e, [ "align", "clickable", "columnId", "elementRef", "focusWithin", "id", "index", "isMenu", "label", "onAutosizeColumn", "onRequestResize", "resizable", "sortDir", "truncate", "variant", "width" ]);
         if (false) {}
-        var j = (0, D._)("Click to open menu");
-        var q = (0, t.useState)(), z = on(q, 2), P = z[0], _ = z[1];
-        var M = (0, t.useState)(false), $ = on(M, 2), N = $[0], L = $[1];
-        var W = (0, t.useState)(false), K = on(W, 2), B = K[0], F = K[1];
-        var V = (0, t.useState)(0), U = on(V, 2), X = U[0], G = U[1];
-        var Y = (0, t.useState)(0), J = on(Y, 2), Q = J[0], Z = J[1];
-        var ee = (0, t.useRef)(null);
-        var ne = (0, t.useRef)(s === "auto" ? undefined : s);
-        // Cleanup dragend, and unmount during drag
-                (0, t.useEffect)((function() {
-            return function() {
-                return P === null || P === void 0 ? void 0 : P.remove();
-            };
-        }), [ P ]);
-        var te;
-        var re;
-        if (S !== undefined && pn.has(S)) {
-            te = bn[S];
-            re = mn[S];
+        var R = (0, D._)("Click to open menu");
+        var I = (0, t.useState)(false), T = rn(I, 2), j = T[0], A = T[1];
+        var P = (0, t.useState)(0), _ = rn(P, 2), z = _[0], M = _[1];
+        var $ = (0, t.useState)(0), N = rn($, 2), W = N[0], H = N[1];
+        var K = (0, t.useRef)(null);
+        var B = (0, t.useRef)(k === "auto" ? undefined : k);
+        var V;
+        var F;
+        if (y !== undefined && vn.has(y)) {
+            V = bn[y];
+            F = pn[y];
         }
-        if (s === "auto") {
-            var oe;
-            var ie = ee.current;
-            var ae = ie === null || ie === void 0 ? void 0 : (oe = ie.parentElement) === null || oe === void 0 ? void 0 : oe.getBoundingClientRect();
-            ne.current = ae === null || ae === void 0 ? void 0 : ae.width;
+        if (k === "auto") {
+            var U;
+            var X = K.current;
+            var Y = X === null || X === void 0 ? void 0 : (U = X.parentElement) === null || U === void 0 ? void 0 : U.getBoundingClientRect();
+            B.current = Y === null || Y === void 0 ? void 0 : Y.width;
         } else {
-            ne.current = s;
-        }
-        var le = (0, t.useCallback)((function(e) {
-            ee.current = e;
-            H(a, e);
-        }), [ a, ee ]);
-        var ue = (0, t.useCallback)((function(e) {
-            var t = (0, R.keycode)(e.nativeEvent);
-            if (y === undefined || n === undefined) {
+            B.current = k;
+        }
+        var G = (0, t.useCallback)((function(e) {
+            K.current = e;
+            L(l, e);
+        }), [ l, K ]);
+        var J = (0, t.useCallback)((function(e) {
+            var n = (0, E.keycode)(e.nativeEvent);
+            if (b === undefined || c === undefined) {
                 return;
             }
-            if (s === "auto") {
-                var r;
-                var o = ee.current;
-                var a = o === null || o === void 0 ? void 0 : (r = o.parentElement) === null || r === void 0 ? void 0 : r.getBoundingClientRect();
-                ne.current = a === null || a === void 0 ? void 0 : a.width;
+            if (k === "auto") {
+                var t;
+                var r = K.current;
+                var o = r === null || r === void 0 ? void 0 : (t = r.parentElement) === null || t === void 0 ? void 0 : t.getBoundingClientRect();
+                B.current = o === null || o === void 0 ? void 0 : o.width;
             } else {
-                ne.current = s;
+                B.current = k;
             }
-            if (ne.current === undefined) {
+            if (B.current === undefined) {
                 return;
             }
-            if (t === "left") {
+            if (n === "left") {
                 e.preventDefault();
  // prevent text selection
-                                var l = Math.max(ne.current - 10, 20);
-                y(e, {
-                    index: n,
-                    columnId: i,
-                    id: u,
-                    width: l
+                                var i = Math.max(B.current - 10, 20);
+                b(e, {
+                    index: c,
+                    columnId: a,
+                    id: s,
+                    width: i
                 });
             }
-            if (t === "right") {
+            if (n === "right") {
                 e.preventDefault();
  // prevent text selection
-                                var c = ne.current + 10;
-                y(e, {
-                    index: n,
-                    columnId: i,
-                    id: u,
-                    width: c
+                                var l = B.current + 10;
+                b(e, {
+                    index: c,
+                    columnId: a,
+                    id: s,
+                    width: l
                 });
             }
-            if (t === "enter") {
+            if (n === "enter") {
                 e.preventDefault();
  // SUI-7320: prevent sorting and dropdown opening
                         }
-        }), [ i, u, n, y, s ]);
-        var se = (0, t.useCallback)((function(e) {
-            if (s === "auto") {
+        }), [ a, s, c, b, k ]);
+        var Q = (0, t.useCallback)((function(e) {
+            if (k === "auto") {
                 var n;
-                var t = ee.current;
+                var t = K.current;
                 var r = t === null || t === void 0 ? void 0 : (n = t.parentElement) === null || n === void 0 ? void 0 : n.getBoundingClientRect();
-                ne.current = r === null || r === void 0 ? void 0 : r.width;
+                B.current = r === null || r === void 0 ? void 0 : r.width;
             } else {
-                ne.current = s;
+                B.current = k;
             }
-            if (ne.current === undefined) {
+            if (B.current === undefined) {
                 return;
             }
             e.preventDefault();
  // prevent text selection
-                        G(e.clientX);
-            Z(ne.current || 0);
-            L(true);
-        }), [ s ]);
-        var ce = function e(t) {
-            var r = X - t.clientX;
-            var o = Math.max(Q - r, 16);
-            if (n !== undefined) {
-                y === null || y === void 0 ? void 0 : y(t, {
-                    index: n,
-                    columnId: i,
-                    id: u,
-                    width: o
+                        M(e.clientX);
+            H(B.current || 0);
+            A(true);
+        }), [ k ]);
+        var Z = function e(n) {
+            var t = z - n.clientX;
+            var r = Math.max(W - t, 16);
+            if (c !== undefined) {
+                b === null || b === void 0 ? void 0 : b(n, {
+                    index: c,
+                    columnId: a,
+                    id: s,
+                    width: r
                 });
             }
         };
-        var de = function e() {
-            L(false);
+        var ee = function e() {
+            A(false);
         };
-        var fe = (0, t.useCallback)((function(e) {
-            var t;
-            var r = Ye();
-            var o = ee.current;
-            if (e.dataTransfer.setDragImage && (o === null || o === void 0 ? void 0 : o.parentElement)) {
-                var a = o.parentElement.getBoundingClientRect();
-                var l = o.cloneNode(true);
-                l.style.width = "".concat(a.width, "px");
-                l.style.height = "".concat(a.height, "px");
-                l.setAttribute("data-helper", "true");
-                r.body.appendChild(l);
-                e.dataTransfer.setDragImage(l, e.clientX - a.left, e.clientY - a.top);
-                F(true);
-                _(l);
-            }
-            e.dataTransfer.effectAllowed = "move";
-            e.dataTransfer.setData("text", (t = o === null || o === void 0 ? void 0 : o.textContent) !== null && t !== void 0 ? t : "");
- // Required for Firefox
-                        h === null || h === void 0 ? void 0 : h(n, i);
-        }), [ i, n, h ]);
-        var ve = (0, t.useCallback)((function() {
-            _(undefined);
-            F(false);
-            c === null || c === void 0 ? void 0 : c();
-        }), [ c ]);
-        var pe = (0, t.useCallback)((function(e) {
-            if (n !== undefined) {
-                d === null || d === void 0 ? void 0 : d(e, {
-                    index: n,
-                    columnId: i
+        var ne = (0, t.useCallback)((function(e) {
+            if (c !== undefined) {
+                p === null || p === void 0 ? void 0 : p(e, {
+                    index: c,
+                    columnId: a
                 });
             }
-        }), [ i, n, d ]);
-        var me = !!h;
-        var be = Qe();
-        var he = ne.current ? (0, A.sprintf)((0, D._)("%(width)d pixels"), {
-            width: ne.current
+        }), [ a, c, p ]);
+        var te = Je();
+        var re = B.current ? (0, q.sprintf)((0, D._)("%(width)d pixels"), {
+            width: B.current
         }) : undefined;
-        var ye = i ? {
-            ariaControls: i
+        var oe = a ? {
+            ariaControls: a
         } : {};
         
-        return r().createElement(Ue, Ze({
-            draggable: me || undefined,
-            onDragStart: me ? fe : undefined,
-            onDragEnd: me ? ve : undefined,
-            ref: le,
-            as: o ? "button" : "div",
-            $align: v,
-            $draggable: me,
-            $dragging: !!B,
-            $clickable: o,
-            $focusWithin: l,
-            $variant: I
-        }, g()(T, [].concat(en(Object.keys(hn.propTypes)), [ "id" ]))), N &&  r().createElement(r().Fragment, null,  r().createElement(O(), {
-            target: be,
+        return r().createElement(Fe, Qe({
+            as: i ? "button" : "div",
+            ref: G,
+            $align: o,
+            $clickable: i,
+            $focusWithin: u,
+            $variant: x
+        }, g()(O, [].concat(Ze(Object.keys(mn.propTypes)), [ "id" ]))), j &&  r().createElement(r().Fragment, null,  r().createElement(S(), {
+            target: te,
             eventType: "mouseup",
-            listener: de
-        }),  r().createElement(O(), {
-            target: be,
+            listener: ee
+        }),  r().createElement(S(), {
+            target: te,
             eventType: "mousemove",
-            listener: ce
-        })), y && C &&  r().createElement(Xe, Ze({
-            "aria-label": (0, A.sprintf)((0, D._)("Resize %(label)s"), {
-                label: p
+            listener: Z
+        })), b && h &&  r().createElement(Ue, Qe({
+            "aria-label": (0, q.sprintf)((0, D._)("Resize %(label)s"), {
+                label: v
             })
-        }, ye, {
-            "aria-valuetext": he,
+        }, oe, {
+            "aria-valuetext": re,
             "data-test": "resize",
-            onMouseDown: se,
-            onDoubleClick: pe,
-            onKeyDown: ue,
+            onMouseDown: Q,
+            onDoubleClick: ne,
+            onKeyDown: J,
             orientation: "vertical",
             tabIndex: 0
-        })), me &&  r().createElement(r().Fragment, null,  r().createElement(We, null,  r().createElement(_e(), null)),  r().createElement($e(), null, (0, 
-        D._)("Press left or right arrow key to reorder the columns."))),  r().createElement(Be, {
-            $align: v,
-            $truncate: E,
-            $fill: b,
-            $variant: I
-        }, p, b && 
+        })),  r().createElement(Ke, {
+            $align: o,
+            $truncate: C,
+            $fill: !!f,
+            $variant: x
+        }, v, f && 
         
         // this icon indicates "has a menu" in all themes
-        r().createElement(Ke, null,  r().createElement(ze(), {
+        r().createElement(He, null,  r().createElement($e(), {
             "data-test": "caret-down",
-            "aria-label": j
-        }))), S &&  r().createElement(Fe, null, te !== undefined &&  r().createElement(te, {
+            "aria-label": R
+        }))), y &&  r().createElement(Be, null, V !== undefined &&  r().createElement(V, {
             "aria-hidden": false,
-            "aria-label": re
+            "aria-label": F
         })));
     }
-    hn.propTypes = vn;
-    /* harmony default export */    const yn = hn;
+    mn.propTypes = fn;
+    /* harmony default export */    const hn = mn;
     // CONCATENATED MODULE: ./src/Table/HeadCellStyles.ts
+    var yn = $().div.withConfig({
+        displayName: "HeadCellStyles__StyledInnerWrapper",
+        componentId: "sc-1hj81sa-0"
+    })([ "display:flex;" ]);
     var gn = $().th.withConfig({
         displayName: "HeadCellStyles__Styled",
-        componentId: "sc-1hj81sa-0"
-    })([ "", ";background-color:", ";box-sizing:content-box;text-align:left;vertical-align:", ";& + &{border-left:1px solid ", ";}*:where(button):focus{box-shadow:", ";}", " ", " ", "" ], N.mixins.reset("table-cell"), N.variables.neutral100, (function(e) {
+        componentId: "sc-1hj81sa-1"
+    })([ "", ";background-color:", ";box-sizing:content-box;text-align:left;vertical-align:", ";position:relative;&:not(:first-child){", "{border-left:1px solid ", ";}}*:where(button):focus{box-shadow:", ";}", " ", "" ], N.mixins.reset("table-cell"), N.variables.neutral100, (function(e) {
         var n = e.$variant;
         return n ? "middle" : "top";
-    }), N.variables.borderColorWeak, N.variables.focusShadowInset, (function(e) {
-        var n = e.$isFixed, t = e.$zIndex;
-        return n && (0, M.css)([ "position:sticky;top:0;z-index:", ";&:not(:first-child)::before{content:'';height:100%;position:absolute;top:0;bottom:0;box-shadow:-1px 0 0 0 ", ";width:2px;border:0;left:0;margin-right:-2px;color:transparent;}&:not(:last-child)::after{content:'';height:100%;position:absolute;top:0;bottom:0;box-shadow:1px 0 0 0 ", ";width:2px;border:0;right:0;margin-left:-2px;color:transparent;}" ], t, N.variables.backgroundColorPage, N.variables.backgroundColorPage);
-    }), (function(e) {
-        var n = e.$dragging;
-        return n && (0, M.css)([ "background-color:", ";&:focus{box-shadow:none;}" ], N.variables.interactiveColorOverlayDrag);
+    }), /* sc-sel */ yn, N.variables.borderColorWeak, N.variables.focusShadowInset, (function(e) {
+        var n = e.$isDragging;
+        return n && (0, M.css)([ "background-color:", ";&:focus{box-shadow:none;}" ], N.variables.backgroundColorPage);
     }), (0, N.pickVariant)("$variant", {
-        actions: (0, M.css)([ "*:where(button){", " &:focus{box-shadow:", ";}}" ], (0, fe.buttonMixin)("subtle", {
+        actions: (0, M.css)([ "*:where(button){", " &:focus{box-shadow:", ";}}" ], (0, pe.buttonMixin)("subtle", {
             color: N.variables.contentColorDefault
         }), N.variables.focusShadowInset)
     }));
-    var wn = $().div.withConfig({
-        displayName: "HeadCellStyles__StyledGuideLine",
-        componentId: "sc-1hj81sa-1"
-    })([ "", " width:1px;position:absolute;background-color:", ";height:100%;top:0;z-index:1;", "" ], N.mixins.reset("block"), N.variables.interactiveColorAccent, (0, 
-    N.pickVariant)("$position", {
-        before: (0, M.css)([ "float:left;", ":not(:first-child) > &{margin-left:-1px;}" ], /* sc-sel */ gn),
-        after: (0, M.css)([ "right:0;" ])
-    }));
-    // CONCATENATED MODULE: ./src/Table/TableContext.ts
-    var Cn =  (0, t.createContext)({});
-    Cn.displayName = "Table";
-    /* harmony default export */    const xn = Cn;
+    // TODO(SUI-7400): Refactor the drag handler of re-order column
+        var wn = $().div.withConfig({
+        displayName: "HeadCellStyles__StyledDragHandler",
+        componentId: "sc-1hj81sa-2"
+    })([ "display:inline-flex;align-items:center;justify-content:center;width:20px;cursor:move;-webkit-user-select:none;-moz-user-select:none;user-select:none;&:hover{background:", ";color:", ";}&:focus{background:", ";box-shadow:", ";color:", ";}" ], N.variables.interactiveColorOverlayHover, N.variables.contentColorActive, N.variables.interactiveColorOverlayDrag, N.variables.focusShadowInset, N.variables.contentColorActive);
     // CONCATENATED MODULE: ./src/Table/HeadCell.tsx
-    function Sn() {
-        return Sn = Object.assign ? Object.assign.bind() : function(e) {
+    function Cn() {
+        return Cn = Object.assign ? Object.assign.bind() : function(e) {
             for (var n = 1; n < arguments.length; n++) {
                 var t = arguments[n];
                 for (var r in t) {
@@ -1137,56 +1099,11 @@
                 }
             }
             return e;
-        }, Sn.apply(null, arguments);
-    }
-    function kn(e, n) {
-        return Tn(e) || In(e, n) || Rn(e, n) || On();
-    }
-    function On() {
-        throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-    }
-    function Rn(e, n) {
-        if (e) {
-            if ("string" == typeof e) return En(e, n);
-            var t = {}.toString.call(e).slice(8, -1);
-            return "Object" === t && e.constructor && (t = e.constructor.name), "Map" === t || "Set" === t ? Array.from(e) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? En(e, n) : void 0;
-        }
-    }
-    function En(e, n) {
-        (null == n || n > e.length) && (n = e.length);
-        for (var t = 0, r = Array(n); t < n; t++) {
-            r[t] = e[t];
-        }
-        return r;
-    }
-    function In(e, n) {
-        var t = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
-        if (null != t) {
-            var r, o, i, a, l = [], u = !0, s = !1;
-            try {
-                if (i = (t = t.call(e)).next, 0 === n) {
-                    if (Object(t) !== t) return;
-                    u = !1;
-                } else for (;!(u = (r = i.call(t)).done) && (l.push(r.value), l.length !== n); u = !0) {
-                }
-            } catch (e) {
-                s = !0, o = e;
-            } finally {
-                try {
-                    if (!u && null != t["return"] && (a = t["return"](), Object(a) !== a)) return;
-                } finally {
-                    if (s) throw o;
-                }
-            }
-            return l;
-        }
+        }, Cn.apply(null, arguments);
     }
-    function Tn(e) {
-        if (Array.isArray(e)) return e;
-    }
-    function Dn(e, n) {
+    function xn(e, n) {
         if (null == e) return {};
-        var t, r, o = An(e, n);
+        var t, r, o = Sn(e, n);
         if (Object.getOwnPropertySymbols) {
             var i = Object.getOwnPropertySymbols(e);
             for (r = 0; r < i.length; r++) {
@@ -1195,7 +1112,7 @@
         }
         return o;
     }
-    function An(e, n) {
+    function Sn(e, n) {
         if (null == e) return {};
         var t = {};
         for (var r in e) {
@@ -1206,21 +1123,23 @@
         }
         return t;
     }
-    /** @public */    var jn = {
+    /** @public */
+    /** @public */    var kn = {
         align: i().oneOf([ "left", "center", "right" ]),
         /** @private Used to set the $clickable appearance without an onClick */
         appearClickable: i().bool,
         children: i().node,
-        columnId: i().any,
+        columnId: i().string,
+        /** @private. */
+        dragId: i().oneOfType([ i().string, i().number ]),
         elementRef: i().oneOfType([ i().func, i().object ]),
+        headCellScreenReaderText: i().string,
         /** @private The index of the cell, skipping the info column. */
         index: i().number,
         /** @private. */
         onAutosizeColumn: i().func,
         /** @private. */
         onClick: i().func,
-        /** @private. */
-        onDragStart: i().func,
         /**
    * @private. Passed through and works as expected.
    */
@@ -1231,8 +1150,6 @@
         onRequestResize: i().func,
         onSort: i().func,
         resizable: i().bool,
-        /** @private. */
-        showGuideline: i().oneOf([ "none", "before", "after" ]),
         sortDir: i().oneOf([ "asc", "desc", "none" ]),
         sortKey: i().string,
         truncate: i().bool,
@@ -1244,135 +1161,128 @@
    * @private
    */
         visible: i().bool,
-        width: i().oneOfType([ i().number, i().oneOf([ "auto" ]) ]),
-        /** @private. */
-        zIndex: i().number
+        width: i().oneOfType([ i().number, i().oneOf([ "auto" ]) ])
     };
-    var qn = {
+    var On = {
         asc: "ascending",
         desc: "descending",
         none: "none"
     };
-    function zn(e) {
-        var n = e.align, o = n === void 0 ? "left" : n, i = e.appearClickable, a = e.children, l = e.columnId, u = e.elementRef, s = e.id, c = e.index, d = e.onAutosizeColumn, f = e.onClick, v = e.onDragStart, p = e.onKeyDown, m = e.onRequestMoveColumn, b = e.onRequestResize, h = e.onSort, y = e.resizable, g = y === void 0 ? true : y, w = e.showGuideline, C = w === void 0 ? "none" : w, x = e.sortDir, S = x === void 0 ? "none" : x, k = e.sortKey, O = e.style, E = e.truncate, I = E === void 0 ? true : E, T = e.variant, D = e.visible, A = D === void 0 ? true : D, j = e.width, q = e.zIndex, z = q === void 0 ? 1 : q, P = Dn(e, [ "align", "appearClickable", "children", "columnId", "elementRef", "id", "index", "onAutosizeColumn", "onClick", "onDragStart", "onKeyDown", "onRequestMoveColumn", "onRequestResize", "onSort", "resizable", "showGuideline", "sortDir", "sortKey", "style", "truncate", "variant", "visible", "width", "zIndex" ]);
+    function Rn(e) {
+        var n = e.align, o = n === void 0 ? "left" : n, i = e.appearClickable, a = e.children, u = e.columnId, s = e.elementRef, c = e.dragId, d = e.headCellScreenReaderText, f = e.id, v = e.index, p = e.onAutosizeColumn, b = e.onClick, m = e.onKeyDown, h = e.onRequestMoveColumn, y = e.onRequestResize, g = e.onSort, w = e.resizable, C = w === void 0 ? true : w, x = e.sortDir, S = x === void 0 ? "none" : x, k = e.sortKey, O = e.style, R = e.truncate, E = R === void 0 ? true : R, I = e.variant, T = e.visible, j = T === void 0 ? true : T, A = e.width, P = xn(e, [ "align", "appearClickable", "children", "columnId", "elementRef", "dragId", "headCellScreenReaderText", "id", "index", "onAutosizeColumn", "onClick", "onKeyDown", "onRequestMoveColumn", "onRequestResize", "onSort", "resizable", "sortDir", "sortKey", "style", "truncate", "variant", "visible", "width" ]);
         // @docs-props-type HeadCellPropsBase
-                var _ = (0, t.useState)(false), M = kn(_, 2), $ = M[0], N = M[1];
-        var L = (0, t.useContext)(xn), H = L.headType;
-        var W = (0, t.useCallback)((function(e) {
+                var _ = !!h;
+        var z = (0, l.useSortable)({
+            // dragId is optional in HeadCell but required by useSortable
+            // since it is always set in Table, use a type assertion here to avoid TypeScript error
+            id: c
+        }), M = z.attributes, $ = z.isDragging, N = z.listeners, W = z.setNodeRef;
+        var H = (0, t.useCallback)((function(e) {
+            L(s, e);
+            if (_) {
+                W(e);
+            }
+        }), [ _, s, W ]);
+        var K = (0, t.useCallback)((function(e) {
             // ignore clicks on the resize handle
-            if (e.target.getAttribute("data-test") !== "resize" && h && c !== undefined) {
-                h(e, {
+            if (e.target.getAttribute("data-test") !== "resize" && g && v !== undefined) {
+                g(e, {
                     sortKey: k,
                     sortDir: S,
-                    id: s,
-                    columnId: l,
-                    index: c
+                    id: f,
+                    columnId: u,
+                    index: v
                 });
             }
-            f === null || f === void 0 ? void 0 : f();
-        }), [ l, s, c, f, h, S, k ]);
-        var K = (0, t.useCallback)((function(e) {
-            if (e.target.getAttribute("data-test") !== "resize") {
-                if ((0, R.keycode)(e.nativeEvent) === "left" && c !== undefined && c > 0) {
-                    m === null || m === void 0 ? void 0 : m({
-                        fromIndex: c,
-                        toIndex: c - 1,
-                        columnId: l
-                    });
-                } else if ((0, R.keycode)(e.nativeEvent) === "right" && c !== undefined) {
-                    m === null || m === void 0 ? void 0 : m({
-                        fromIndex: c,
-                        toIndex: c + 1,
-                        columnId: l
-                    });
-                }
-            }
-            if (c !== undefined) {
-                p === null || p === void 0 ? void 0 : p(e, {
-                    index: c,
-                    columnId: l
+            b === null || b === void 0 ? void 0 : b();
+        }), [ u, f, v, b, g, S, k ]);
+        var B = (0, t.useCallback)((function(e) {
+            if (v !== undefined) {
+                m === null || m === void 0 ? void 0 : m(e, {
+                    index: v,
+                    columnId: u
                 });
             }
-        }), [ l, c, p, m ]);
-        var B = (0, t.useCallback)((function(e, n) {
-            N(true);
-            v === null || v === void 0 ? void 0 : v(e, n);
-        }), [ v ]);
-        var F = (0, t.useCallback)((function() {
-            N(false);
-        }), []);
-        var V = !!v;
-        var U = !!h && !!S;
-        var X = f !== undefined;
-        var G = Re()(O, {
-            width: j
-        });
-        var Y = T === "actions" ? false : I;
+        }), [ u, v, m ]);
+        var V = !!g && !!S;
+        var F = b !== undefined;
+        var U = I === "actions" ? false : E;
+        var X = (0, t.useMemo)((function() {
+            return Ie()({}, O, {
+                width: A
+            });
+        }), [ O, A ]);
+        var Y;
+        if (d) {
+            Y = d;
+        } else if (Re()(a)) {
+            Y = a;
+        }
         
-        return r().createElement(gn, Sn({
-            style: G,
-            ref: u,
-            "aria-sort": h && (qn[S] || "none"),
+        return r().createElement(gn, Cn({
+            style: X,
+            ref: H,
+            "aria-sort": g && (On[S] || "none"),
             "data-test": "head-cell",
-            "data-test-label": ke()(a) ? a : undefined,
-            "data-test-sort-dir": h && S,
-            id: A ? s : undefined,
-            onClick: h || X ? W : undefined,
-            $dragging: $ || undefined,
-            $variant: T,
-            $zIndex: z,
-            $isFixed: H === "fixed",
-            onKeyDown: V || h || X ? K : undefined
-        }, P),  r().createElement(yn, {
-            label: a,
+            "data-test-label": Re()(a) ? a : undefined,
+            "data-test-sort-dir": g && S,
+            id: j ? f : undefined,
+            $isDragging: _ && $,
+            $variant: I
+        }, P),  r().createElement(yn, null, _ &&  r().createElement(wn, Cn({
+            "aria-label": (0, q.sprintf)((0, D._)("Reorder %(labelString)s"), {
+                labelString: Y
+            }),
+            "data-test": "drag",
+            draggable: true
+        }, M, N),  r().createElement(je(), null)),  r().createElement(hn, {
             align: o,
-            columnId: l,
-            id: s,
-            index: c,
-            resizable: A && g,
-            onDragStart: v ? B : undefined,
-            onDragEnd: v ? F : undefined,
-            onAutosizeColumn: d,
-            onRequestResize: b,
-            sortDir: h && S,
-            truncate: Y,
-            width: j,
-            clickable: i || V || U || X,
+            clickable: i || V || F,
+            columnId: u,
             focusWithin: i,
-            variant: T
-        }), C !== "none" &&  r().createElement(wn, {
-            $position: C
-        }));
+            label: a,
+            id: f,
+            index: v,
+            onAutosizeColumn: p,
+            onClick: g || F ? K : undefined,
+            onKeyDown: g || F ? B : undefined,
+            onRequestResize: y,
+            resizable: j && C,
+            sortDir: g && S,
+            truncate: U,
+            variant: I,
+            width: A
+        })));
     }
-    zn.propTypes = jn;
-    zn.splunkUiType = "Table.HeadCell";
-    /* harmony default export */    const Pn = zn;
+    Rn.propTypes = kn;
+    Rn.splunkUiType = "Table.HeadCell";
+    /* harmony default export */    const En = Rn;
     // CONCATENATED MODULE: external "@dnd-kit/utilities"
-    const _n = require("@dnd-kit/utilities");
+    const In = require("@dnd-kit/utilities");
     // CONCATENATED MODULE: external "@splunk/react-icons/DotsThreeVertical"
-    const Mn = require("@splunk/react-icons/DotsThreeVertical");
-    var $n =  e.n(Mn);
+    const Tn = require("@splunk/react-icons/DotsThreeVertical");
+    var jn =  e.n(Tn);
     // CONCATENATED MODULE: external "@splunk/react-ui/Button"
-    const Nn = require("@splunk/react-ui/Button");
-    var Ln =  e.n(Nn);
+    const Dn = require("@splunk/react-ui/Button");
+    var qn =  e.n(Dn);
     // CONCATENATED MODULE: external "@splunk/react-ui/Dropdown"
-    const Hn = require("@splunk/react-ui/Dropdown");
-    var Wn =  e.n(Hn);
+    const An = require("@splunk/react-ui/Dropdown");
+    var Pn =  e.n(An);
     // CONCATENATED MODULE: external "@splunk/react-ui/Tooltip"
-    const Kn = require("@splunk/react-ui/Tooltip");
-    var Bn =  e.n(Kn);
+    const _n = require("@splunk/react-ui/Tooltip");
+    var zn =  e.n(_n);
     // CONCATENATED MODULE: external "@splunk/react-icons/ChevronRight"
-    const Fn = require("@splunk/react-icons/ChevronRight");
-    var Vn =  e.n(Fn);
+    const Mn = require("@splunk/react-icons/ChevronRight");
+    var $n =  e.n(Mn);
     // CONCATENATED MODULE: ./src/Table/ExpandButtonStyles.ts
-    var Un = "2px";
-    var Xn = "16px";
-    var Gn = (0, M.css)([ "padding-top:calc((", " + ", "*2 - ", ") / 2);" ], N.variables.inputHeight, Un, Xn);
-    var Yn = $().button.withConfig({
+    var Nn = "2px";
+    var Wn = "16px";
+    var Ln = (0, M.css)([ "padding-top:calc((", " + ", "*2 - ", ") / 2);" ], N.variables.inputHeight, Nn, Wn);
+    var Hn = $().button.withConfig({
         displayName: "ExpandButtonStyles__StyledButton",
         componentId: "sc-7nlw5q-0"
-    })([ "", ";height:100%;width:100%;cursor:pointer;justify-content:center;padding:", ";", ";color:", " &:hover{color:", ";}&:focus{color:", ";box-shadow:", ";}" ], N.mixins.reset("flex"), N.variables.spacingXSmall, Gn, N.variables.contentColorDefault, N.variables.contentColorActive, N.variables.contentColorActive, N.variables.focusShadowInset);
-    var Jn = $()(Vn()).withConfig({
+    })([ "", ";height:100%;width:100%;cursor:pointer;justify-content:center;padding:", ";", ";color:", " &:hover{color:", ";}&:focus{color:", ";box-shadow:", ";}" ], N.mixins.reset("flex"), N.variables.spacingXSmall, Ln, N.variables.contentColorDefault, N.variables.contentColorActive, N.variables.contentColorActive, N.variables.focusShadowInset);
+    var Kn = $()($n()).withConfig({
         displayName: "ExpandButtonStyles__StyledChevron",
         componentId: "sc-7nlw5q-1"
     })([ "transition:transform 200ms;", "" ], (function(e) {
@@ -1380,8 +1290,8 @@
         return n && (0, M.css)([ "transform:rotate(90deg);" ]);
     }));
     // CONCATENATED MODULE: ./src/Table/ExpandButton.tsx
-    function Qn() {
-        return Qn = Object.assign ? Object.assign.bind() : function(e) {
+    function Bn() {
+        return Bn = Object.assign ? Object.assign.bind() : function(e) {
             for (var n = 1; n < arguments.length; n++) {
                 var t = arguments[n];
                 for (var r in t) {
@@ -1389,11 +1299,11 @@
                 }
             }
             return e;
-        }, Qn.apply(null, arguments);
+        }, Bn.apply(null, arguments);
     }
-    function Zn(e, n) {
+    function Vn(e, n) {
         if (null == e) return {};
-        var t, r, o = et(e, n);
+        var t, r, o = Fn(e, n);
         if (Object.getOwnPropertySymbols) {
             var i = Object.getOwnPropertySymbols(e);
             for (r = 0; r < i.length; r++) {
@@ -1402,7 +1312,7 @@
         }
         return o;
     }
-    function et(e, n) {
+    function Fn(e, n) {
         if (null == e) return {};
         var t = {};
         for (var r in e) {
@@ -1413,32 +1323,32 @@
         }
         return t;
     }
-    var nt = {
+    var Un = {
         expanded: i().bool
     };
-    var tt = function e(n) {
-        var t = n.expanded, o = Zn(n, [ "expanded" ]);
+    var Xn = function e(n) {
+        var t = n.expanded, o = Vn(n, [ "expanded" ]);
         
-        return r().createElement(Yn, Qn({
+        return r().createElement(Hn, Bn({
             title: t ? (0, D._)("Collapse row") : (0, D._)("Expand row")
-        }, o),  r().createElement(Jn, {
+        }, o),  r().createElement(Kn, {
             $expanded: t
         }));
     };
-    tt.propTypes = nt;
-    /* harmony default export */    const rt = tt;
+    Xn.propTypes = Un;
+    /* harmony default export */    const Yn = Xn;
     // CONCATENATED MODULE: ./src/Table/RowDragCellStyles.ts
-    var ot = $().td.withConfig({
+    var Gn = $().td.withConfig({
         displayName: "RowDragCellStyles__StyledCell",
         componentId: "sc-9kbaj2-0"
     })([ "", " cursor:move;touch-action:none;position:relative;vertical-align:middle;" ], N.mixins.reset("table-cell"));
-    var it = $().div.withConfig({
+    var Jn = $().div.withConfig({
         displayName: "RowDragCellStyles__StyledDrag",
         componentId: "sc-9kbaj2-1"
     })([ "", " ", ";justify-content:center;cursor:move;-webkit-user-drag:element;user-select:none;align-items:center;position:absolute;width:100%;top:0;bottom:0;&:focus{outline:0;box-shadow:", ";}&:hover{background-color:", ";outline:none;}&:active{background-color:", ";box-shadow:", ";}& > div{margin:0;}@media print{background-image:none;}" ], N.mixins.reset("flex"), N.mixins.clearfix(), N.variables.focusShadowInset, N.variables.interactiveColorOverlayDrag, N.variables.interactiveColorOverlayActive, N.variables.focusShadowInset);
     // CONCATENATED MODULE: ./src/Table/RowDragCell.tsx
-    function at() {
-        return at = Object.assign ? Object.assign.bind() : function(e) {
+    function Qn() {
+        return Qn = Object.assign ? Object.assign.bind() : function(e) {
             for (var n = 1; n < arguments.length; n++) {
                 var t = arguments[n];
                 for (var r in t) {
@@ -1446,11 +1356,11 @@
                 }
             }
             return e;
-        }, at.apply(null, arguments);
+        }, Qn.apply(null, arguments);
     }
-    function lt(e, n) {
+    function Zn(e, n) {
         if (null == e) return {};
-        var t, r, o = ut(e, n);
+        var t, r, o = et(e, n);
         if (Object.getOwnPropertySymbols) {
             var i = Object.getOwnPropertySymbols(e);
             for (r = 0; r < i.length; r++) {
@@ -1459,7 +1369,7 @@
         }
         return o;
     }
-    function ut(e, n) {
+    function et(e, n) {
         if (null == e) return {};
         var t = {};
         for (var r in e) {
@@ -1470,58 +1380,61 @@
         }
         return t;
     }
-    var st = {
+    var nt = {
         setActivatorNodeRef: i().func.isRequired,
         listeners: i().objectOf(i().func)
     };
-    function ct(e) {
-        var n = e.listeners, t = e.setActivatorNodeRef, o = lt(e, [ "listeners", "setActivatorNodeRef" ]);
+    function tt(e) {
+        var n = e.listeners, t = e.setActivatorNodeRef, o = Zn(e, [ "listeners", "setActivatorNodeRef" ]);
         
-        return r().createElement(ot, {
+        return r().createElement(Gn, {
             "data-helper": true
-        },  r().createElement(it, at({
+        },  r().createElement(Jn, Qn({
             "data-test": "drag",
+            draggable: true,
             ref: t,
             tabIndex: 0
-        }, n, o),  r().createElement(_e(), null)));
+        }, n, o),  r().createElement(je(), null)));
     }
-    ct.propTypes = st;
-    /* harmony default export */    const dt = ct;
+    tt.propTypes = nt;
+    /* harmony default export */    const rt = tt;
     // CONCATENATED MODULE: ./src/Table/RowStyles.ts
-    var ft = $().tr.withConfig({
+    var ot = $().tr.withConfig({
         displayName: "RowStyles__StyledStripeNone",
         componentId: "f0igqq-0"
     })([ "", ";", ";", " @media print{background-color:none;}" ], N.mixins.reset("table-row"), (function(e) {
         var n = e.$clickable;
         return n && (0, M.css)([ "cursor:pointer;&:hover{background-color:", ";}&:focus{background-color:", ";box-shadow:", ";}" ], N.variables.neutral100, N.variables.neutral100, N.variables.focusShadowInset);
     }), (function(e) {
-        var n = e.disabled, t = e.$expandable, r = e.$draggable;
+        var n = e.disabled, t = e.$expandable, r = e.$isDraggable;
         return !n && !t && r && (0, M.css)([ "&:hover{background-color:", ";}" ], N.variables.interactiveColorOverlayHover);
     }));
-    var vt = $()(ft).withConfig({
+    var it = $()(ot).withConfig({
         displayName: "RowStyles__StyledStripeEven",
         componentId: "f0igqq-1"
     })([ "background-color:", ";", ";" ], N.variables.neutral50, (function(e) {
         var n = e.$clickable;
         return n && (0, M.css)([ "cursor:pointer;&:hover,&:focus{background-color:", ";}" ], N.variables.neutral300);
     }));
-    // CONCATENATED MODULE: external "@splunk/react-ui/NonInteractiveCheckbox"
-    const pt = require("@splunk/react-ui/NonInteractiveCheckbox");
-    var mt =  e.n(pt);
     // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
-    const bt = require("@splunk/react-ui/Clickable");
-    var ht =  e.n(bt);
+    const at = require("@splunk/react-ui/Clickable");
+    var lt =  e.n(at);
+    // CONCATENATED MODULE: external "@splunk/react-ui/NonInteractiveCheckbox"
+    const ut = require("@splunk/react-ui/NonInteractiveCheckbox");
+    var st =  e.n(ut);
     // CONCATENATED MODULE: ./src/Table/ToggleStyles.ts
-    var yt = "2px";
-    var gt = "20px";
-    var wt = (0, M.css)([ "padding-top:calc((", " + ", "*2 - ", ") / 2);" ], N.variables.inputHeight, yt, gt);
-    var Ct = $()(ht()).withConfig({
+    var ct = "2px";
+    var dt = $()(lt()).withConfig({
         displayName: "ToggleStyles__StyledClickable",
         componentId: "sc-1x3ikch-0"
-    })([ "height:100%;width:100%;display:flex;justify-content:center;", ";min-height:calc(", " + ", "*2);&[disabled]{cursor:not-allowed;}" ], wt, N.variables.inputHeight, yt);
+    })([ "height:100%;width:100%;display:flex;justify-content:center;min-height:calc(", " + ", "*2);&[disabled]{cursor:not-allowed;}" ], N.variables.inputHeight, ct);
+    var ft = $()(st()).withConfig({
+        displayName: "ToggleStyles__StyledNonInteractiveCheckbox",
+        componentId: "sc-1x3ikch-1"
+    })([ "align-items:flex-start;padding-top:", ";" ], N.variables.spacingSmall);
     // CONCATENATED MODULE: ./src/Table/Toggle.tsx
-    function xt() {
-        return xt = Object.assign ? Object.assign.bind() : function(e) {
+    function vt() {
+        return vt = Object.assign ? Object.assign.bind() : function(e) {
             for (var n = 1; n < arguments.length; n++) {
                 var t = arguments[n];
                 for (var r in t) {
@@ -1529,11 +1442,11 @@
                 }
             }
             return e;
-        }, xt.apply(null, arguments);
+        }, vt.apply(null, arguments);
     }
-    function St(e, n) {
+    function pt(e, n) {
         if (null == e) return {};
-        var t, r, o = kt(e, n);
+        var t, r, o = bt(e, n);
         if (Object.getOwnPropertySymbols) {
             var i = Object.getOwnPropertySymbols(e);
             for (r = 0; r < i.length; r++) {
@@ -1542,7 +1455,7 @@
         }
         return o;
     }
-    function kt(e, n) {
+    function bt(e, n) {
         if (null == e) return {};
         var t = {};
         for (var r in e) {
@@ -1553,37 +1466,38 @@
         }
         return t;
     }
-    var Ot = {
+    var mt = {
         disabled: i().bool,
         onClick: i().func,
         selected: i().oneOf([ true, false, "some" ])
     };
-    function Rt(e) {
-        var n = e.disabled, t = e.onClick, o = e.selected, i = St(e, [ "disabled", "onClick", "selected" ]);
+    function ht(e) {
+        var n = e.disabled, t = e.onClick, o = e.selected, i = pt(e, [ "disabled", "onClick", "selected" ]);
         var a = n === true ? "disabled" : undefined;
         
-        return r().createElement(Ct, xt({
+        // Note we use a clickable around the NonInteractiveCheckbox (which can seem ironic) so that the whole table cell is clickable and we cannot use the Cell's onClick itself because of a11y issues we have faced in the past (see SUI-5958).
+        return r().createElement(dt, vt({
             "aria-checked": o === "some" ? "mixed" : o,
             disabled: a,
             onClick: t,
             role: "checkbox"
-        }, i),  r().createElement(mt(), {
+        }, i),  r().createElement(ft, {
             disabled: !!a,
             selected: o
         }));
     }
-    Rt.propTypes = Ot;
-    /* harmony default export */    const Et = Rt;
+    ht.propTypes = mt;
+    /* harmony default export */    const yt = ht;
     // CONCATENATED MODULE: ./src/Table/Row.tsx
-    function It(e) {
+    function gt(e) {
         "@babel/helpers - typeof";
-        return It = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
+        return gt = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
             return typeof e;
         } : function(e) {
             return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e;
-        }, It(e);
+        }, gt(e);
     }
-    function Tt(e, n) {
+    function wt(e, n) {
         var t = Object.keys(e);
         if (Object.getOwnPropertySymbols) {
             var r = Object.getOwnPropertySymbols(e);
@@ -1593,42 +1507,42 @@
         }
         return t;
     }
-    function Dt(e) {
+    function Ct(e) {
         for (var n = 1; n < arguments.length; n++) {
             var t = null != arguments[n] ? arguments[n] : {};
-            n % 2 ? Tt(Object(t), !0).forEach((function(n) {
-                At(e, n, t[n]);
-            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : Tt(Object(t)).forEach((function(n) {
+            n % 2 ? wt(Object(t), !0).forEach((function(n) {
+                xt(e, n, t[n]);
+            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : wt(Object(t)).forEach((function(n) {
                 Object.defineProperty(e, n, Object.getOwnPropertyDescriptor(t, n));
             }));
         }
         return e;
     }
-    function At(e, n, t) {
-        return (n = jt(n)) in e ? Object.defineProperty(e, n, {
+    function xt(e, n, t) {
+        return (n = St(n)) in e ? Object.defineProperty(e, n, {
             value: t,
             enumerable: !0,
             configurable: !0,
             writable: !0
         }) : e[n] = t, e;
     }
-    function jt(e) {
-        var n = qt(e, "string");
-        return "symbol" == It(n) ? n : n + "";
+    function St(e) {
+        var n = kt(e, "string");
+        return "symbol" == gt(n) ? n : n + "";
     }
-    function qt(e, n) {
-        if ("object" != It(e) || !e) return e;
+    function kt(e, n) {
+        if ("object" != gt(e) || !e) return e;
         var t = e[Symbol.toPrimitive];
         if (void 0 !== t) {
             var r = t.call(e, n || "default");
-            if ("object" != It(r)) return r;
+            if ("object" != gt(r)) return r;
             throw new TypeError("@@toPrimitive must return a primitive value.");
         }
         return ("string" === n ? String : Number)(e);
     }
-    function zt(e, n) {
+    function Ot(e, n) {
         if (null == e) return {};
-        var t, r, o = Pt(e, n);
+        var t, r, o = Rt(e, n);
         if (Object.getOwnPropertySymbols) {
             var i = Object.getOwnPropertySymbols(e);
             for (r = 0; r < i.length; r++) {
@@ -1637,7 +1551,7 @@
         }
         return o;
     }
-    function Pt(e, n) {
+    function Rt(e, n) {
         if (null == e) return {};
         var t = {};
         for (var r in e) {
@@ -1648,8 +1562,8 @@
         }
         return t;
     }
-    function _t() {
-        return _t = Object.assign ? Object.assign.bind() : function(e) {
+    function Et() {
+        return Et = Object.assign ? Object.assign.bind() : function(e) {
             for (var n = 1; n < arguments.length; n++) {
                 var t = arguments[n];
                 for (var r in t) {
@@ -1657,29 +1571,29 @@
                 }
             }
             return e;
-        }, _t.apply(null, arguments);
+        }, Et.apply(null, arguments);
     }
-    var Mt = {
-        odd: ft,
-        even: vt,
-        none: ft
+    var It = {
+        odd: ot,
+        even: it,
+        none: ot
     };
     /** @public */
     /** @public */
     /** @public */
     /** @public */
-    /** @public */    var $t = {
+    /** @public */    var Tt = {
         /** @private. Generally passed by Table rather than added directly. */
         activeElementId: i().string,
         actionPrimary: i().element,
         actionsSecondary: i().element,
         children: i().node,
         data: i().any,
-        /** @private. Generally passed by Table rather than added directly. */
-        dataId: i().oneOfType([ i().string, i().number ]),
         disabled: i().bool,
         /** @private. Generally passed by Table rather than added directly. */
-        draggable: i().bool,
+        isDraggable: i().bool,
+        /** @private. Generally passed by Table rather than added directly. */
+        dragId: i().oneOfType([ i().string, i().number ]),
         elementRef: i().oneOfType([ i().func, i().object ]),
         /** @private. */
         expandable: i().bool,
@@ -1707,36 +1621,36 @@
         /** @private. */
         stripe: i().oneOf([ "odd", "even", "none" ])
     };
-    var Nt =  r().createElement($n(), null);
-    var Lt =  r().forwardRef((function(e, n) {
+    var jt =  r().createElement(jn(), null);
+    var Dt =  r().forwardRef((function(e, n) {
         
-        return r().createElement(Bn(), _t({
+        return r().createElement(zn(), Et({
             content: (0, D._)("Actions"),
             contentRelationship: "label"
-        }, e),  r().createElement(Ln(), {
+        }, e),  r().createElement(qn(), {
             appearance: "subtle",
             "data-test": "actions-secondary-toggle",
-            icon: Nt,
+            icon: jt,
             elementRef: n
         }));
     }));
-    function Ht(e) {
+    function qt(e) {
         var n;
-        var o = e.actions, i = e.actionPrimary, a = e.actionsSecondary, u = e.children, s = e.data, c = e.dataId, d = e.disabled, f = e.draggable, v = e.elementRef, p = e.expandable, m = e.expanded, b = e.expansionRowIds, h = e.expansionRow, y = e.index, w = e.movableColumns, C = e.onClick, x = e.onExpansion, S = e.onKeyDown, k = e.onRequestToggle, O = e.primaryColumnIndex, E = O === void 0 ? 0 : O, I = e.rowScreenReaderText, T = e.selected, j = e.stripe, q = j === void 0 ? "none" : j, z = e.style, P = zt(e, [ "actions", "actionPrimary", "actionsSecondary", "children", "data", "dataId", "disabled", "draggable", "elementRef", "expandable", "expanded", "expansionRowIds", "expansionRow", "index", "movableColumns", "onClick", "onExpansion", "onKeyDown", "onRequestToggle", "primaryColumnIndex", "rowScreenReaderText", "selected", "stripe", "style" ]);
+        var o = e.actions, i = e.actionPrimary, a = e.actionsSecondary, u = e.children, s = e.data, c = e.dragId, d = e.disabled, f = e.isDraggable, v = e.elementRef, p = e.expandable, b = e.expanded, m = e.expansionRowIds, h = e.expansionRow, y = e.index, w = e.movableColumns, C = e.onClick, x = e.onExpansion, S = e.onKeyDown, k = e.onRequestToggle, O = e.primaryColumnIndex, I = O === void 0 ? 0 : O, T = e.rowScreenReaderText, j = e.selected, A = e.stripe, P = A === void 0 ? "none" : A, _ = e.style, z = Ot(e, [ "actions", "actionPrimary", "actionsSecondary", "children", "data", "dragId", "disabled", "isDraggable", "elementRef", "expandable", "expanded", "expansionRowIds", "expansionRow", "index", "movableColumns", "onClick", "onExpansion", "onKeyDown", "onRequestToggle", "primaryColumnIndex", "rowScreenReaderText", "selected", "stripe", "style" ]);
  // @docs-props-type RowPropsBase
                 var M = (0, t.useMemo)((function() {
             return {
-                id: f ? c : (0, _.createGUID)(),
+                id: f ? c : (0, R.createGUID)(),
                 disabled: !f
             };
         }), [ f, c ]);
-        var $ = (0, l.useSortable)(M), N = $.attributes, L = $.listeners, W = $.transform, K = $.transition, B = $.setNodeRef, F = $.setActivatorNodeRef;
-        var V = (0, t.useMemo)((function() {
-            return f ? Dt(Dt({}, z), {}, {
-                transform: _n.CSS.Translate.toString(W),
+        var $ = (0, l.useSortable)(M), N = $.attributes, W = $.listeners, H = $.transform, K = $.transition, B = $.setNodeRef, V = $.setActivatorNodeRef;
+        var F = (0, t.useMemo)((function() {
+            return f ? Ct(Ct({}, _), {}, {
+                transform: In.CSS.Translate.toString(H),
                 transition: K
-            }) : z;
-        }), [ f, W, K, z ]);
+            }) : _;
+        }), [ f, H, K, _ ]);
         var U = (0, t.useRef)(null);
         var X = (0, t.useCallback)((function(e) {
             var n = e.target;
@@ -1754,13 +1668,13 @@
                 C === null || C === void 0 ? void 0 : C(e, s);
             }
         }), [ s, C ]);
-        var G = (0, t.useCallback)((function(e) {
-            if ((0, R.keycode)(e.nativeEvent) === "enter" && C) {
+        var Y = (0, t.useCallback)((function(e) {
+            if ((0, E.keycode)(e.nativeEvent) === "enter" && C) {
                 C(e, s);
             }
             S === null || S === void 0 ? void 0 : S(e);
         }), [ s, C, S ]);
-        var Y = (0, t.useCallback)((function(e) {
+        var G = (0, t.useCallback)((function(e) {
             if (!d) {
                 e.preventDefault();
                 k === null || k === void 0 ? void 0 : k(e, s);
@@ -1808,7 +1722,7 @@
         };
         function ee(e) {
             U.current = e;
-            H(v, e);
+            L(v, e);
             if (f) {
                 B(e);
             }
@@ -1818,60 +1732,60 @@
             return (0, t.cloneElement)(e, {
                 appearance: C ? "rowLink" : e.props.appearance,
                 disabled: d,
-                isPrimaryCell: E === n,
-                stripe: q
+                isPrimaryCell: I === n,
+                stripe: P
             });
         }));
         var te;
-        if (I) {
-            te = I;
-        } else if ((n = ne[E]) === null || n === void 0 ? void 0 : n.props.children) {
+        if (T) {
+            te = T;
+        } else if ((n = ne[I]) === null || n === void 0 ? void 0 : n.props.children) {
             var re;
-            te = "".concat((re = ne[E]) === null || re === void 0 ? void 0 : re.props.children);
+            te = "".concat((re = ne[I]) === null || re === void 0 ? void 0 : re.props.children);
         } else {
             var oe;
             te = "".concat((oe = ne[0]) === null || oe === void 0 ? void 0 : oe.props.children);
             if (false) {}
         }
-        var ie = (0, A.sprintf)((0, D._)("%(selected)s"), {
-            selected: T ? "selected" : "unselected"
+        var ie = (0, q.sprintf)((0, D._)("%(selected)s"), {
+            selected: j ? "selected" : "unselected"
         });
-        var ae = Mt[q];
-        var le = m ? t.Children.count(h) + 1 : undefined;
+        var ae = It[P];
+        var le = b ? t.Children.count(h) + 1 : undefined;
         var ue = w ? "false" : undefined;
         var se = function e() {
             
-            return r().createElement(Lt, null);
+            return r().createElement(Dt, null);
         };
-        var ce = (0, A.sprintf)((0, D._)("Collapse row - %(rowLabelValue)s"), {
+        var ce = (0, q.sprintf)((0, D._)("Collapse row - %(rowLabelValue)s"), {
             rowLabelValue: te
         });
-        var de = (0, A.sprintf)((0, D._)("Expand row - %(rowLabelValue)s"), {
+        var de = (0, q.sprintf)((0, D._)("Expand row - %(rowLabelValue)s"), {
             rowLabelValue: te
         });
         
-        return r().createElement(ae, _t({
+        return r().createElement(ae, Et({
             "data-test": "row",
-            "data-test-selected": k ? T : undefined,
+            "data-test-selected": k ? j : undefined,
             $clickable: !!C,
             "data-has-movable-columns": w ? "true" : undefined,
             disabled: !!d,
             $expandable: !!p,
-            $draggable: !!f,
+            $isDraggable: !!f,
             ref: ee,
             tabIndex: C ? 0 : undefined
-        }, g()(P, "data"), {
+        }, g()(z, "data"), {
             onClick: C ? X : undefined,
-            onKeyDown: G,
-            $rowSelected: !!(k && T),
-            style: V
-        }), f && y != null &&  r().createElement(dt, _t({
-            "aria-label": (0, A.sprintf)((0, D._)("Reorder %(rowLabelValue)s"), {
+            onKeyDown: Y,
+            $rowSelected: !!(k && j),
+            style: F
+        }), f && y != null &&  r().createElement(rt, Et({
+            "aria-label": (0, q.sprintf)((0, D._)("Reorder %(rowLabelValue)s"), {
                 rowLabelValue: te
             }),
-            setActivatorNodeRef: F,
-            listeners: L
-        }, N)), k &&  r().createElement(xe, {
+            setActivatorNodeRef: V,
+            listeners: W
+        }, N)), k &&  r().createElement(ke, {
             align: "center",
             appearance: C ? "rowLink" : "data",
             disabled: d,
@@ -1879,70 +1793,77 @@
             "data-movable-column": ue,
             rowSpan: le,
             "data-test": "toggle"
-        },  r().createElement(Et, {
-            "aria-label": (0, A.sprintf)((0, D._)("%(rowLabelValue)s %(selectedString)s"), {
+        },  r().createElement(yt, {
+            "aria-label": (0, q.sprintf)((0, D._)("%(rowLabelValue)s %(selectedString)s"), {
                 rowLabelValue: te,
                 selectedString: ie
             }),
             disabled: d,
-            onClick: Y,
-            selected: T
-        })), p && h &&  r().createElement(xe, {
+            onClick: G,
+            selected: j
+        })), p && h &&  r().createElement(ke, {
             align: "center",
             appearance: "data",
             "data-movable-column": ue,
             "data-test": "expand",
-            expand: m,
+            expand: b,
             rowSpan: le,
             variant: "expand"
-        },  r().createElement(rt, {
-            expanded: m,
+        },  r().createElement(Yn, {
+            expanded: b,
             onClick: J,
-            title: m ? ce : de,
-            "aria-controls": m ? b : undefined,
-            "aria-expanded": m
-        })), p && !h &&  r().createElement(xe, {
+            title: b ? ce : de,
+            "aria-controls": b ? m : undefined,
+            "aria-expanded": b
+        })), p && !h &&  r().createElement(ke, {
             variant: "expand",
             "data-movable-column": ue
-        }), ne, o && !i && !a &&  r().createElement(xe, {
+        }), ne, o && !i && !a &&  r().createElement(ke, {
             align: "right",
-            appearance: d ? "data" : "rowLink",
+            appearance: C ? "rowLink" : "data",
             "data-test": "row-actions",
             variant: "actions",
             "data-movable-column": ue
-        }), (i || a) &&  r().createElement(xe, {
+        }), (i || a) &&  r().createElement(ke, {
             align: "right",
             appearance: "data",
             "data-test": "row-actions",
             variant: "actions",
             "data-movable-column": ue
-        }, i && Q(), a &&  r().createElement(Wn(), {
+        }, i && Q(), a &&  r().createElement(Pn(), {
             toggle: se()
         }, Z())));
     }
-    Ht.propTypes = $t;
-    Ht.splunkUiType = "Table.Row";
-    /* harmony default export */    const Wt = Ht;
+    qt.propTypes = Tt;
+    qt.splunkUiType = "Table.Row";
+    /* harmony default export */    const At = qt;
+    // CONCATENATED MODULE: ./src/Table/TableContext.ts
+    var Pt =  (0, t.createContext)({});
+    Pt.displayName = "Table";
+    /* harmony default export */    const _t = Pt;
     // CONCATENATED MODULE: ./src/Table/HeadStyles.ts
-    var Kt = $().thead.withConfig({
+    var zt = $().thead.withConfig({
         displayName: "HeadStyles__Styled",
         componentId: "iap21t-0"
-    })([ "", ";" ], N.mixins.reset("table-header-group"));
-    var Bt = $()(Pn).withConfig({
+    })([ "", ";", "" ], N.mixins.reset("table-header-group"), (function(e) {
+        var n = e.$isFixed, t = e.$zIndex;
+        return n && (0, M.css)([ "position:sticky;top:0;z-index:", ";" ], t);
+    }));
+    var Mt = $()(En).withConfig({
         displayName: "HeadStyles__StyledToggleAll",
         componentId: "iap21t-1"
-    })([ "width:32px;", "{gap:0;}" ], /* sc-sel */ Ue);
-    var Ft = $()(Pn).withConfig({
+    })([ "width:32px;", "{gap:0;}" ], /* sc-sel */ Fe);
+    var $t = $()(En).withConfig({
         displayName: "HeadStyles__StyledInfo",
         componentId: "iap21t-2"
     })([ "width:32px;" ]);
-    var Vt = $()(Pn).withConfig({
+    var Nt = $()(En).withConfig({
         displayName: "HeadStyles__StyledDragRow",
         componentId: "iap21t-3"
     })([ "width:32px;" ]);
     // CONCATENATED MODULE: ./src/Table/Head.tsx
-    function Ut() {
-        return Ut = Object.assign ? Object.assign.bind() : function(e) {
+    function Wt() {
+        return Wt = Object.assign ? Object.assign.bind() : function(e) {
             for (var n = 1; n < arguments.length; n++) {
                 var t = arguments[n];
                 for (var r in t) {
@@ -1950,11 +1871,11 @@
                 }
             }
             return e;
-        }, Ut.apply(null, arguments);
+        }, Wt.apply(null, arguments);
     }
-    function Xt(e, n) {
+    function Lt(e, n) {
         if (null == e) return {};
-        var t, r, o = Gt(e, n);
+        var t, r, o = Ht(e, n);
         if (Object.getOwnPropertySymbols) {
             var i = Object.getOwnPropertySymbols(e);
             for (r = 0; r < i.length; r++) {
@@ -1963,7 +1884,7 @@
         }
         return o;
     }
-    function Gt(e, n) {
+    function Ht(e, n) {
         if (null == e) return {};
         var t = {};
         for (var r in e) {
@@ -1974,7 +1895,7 @@
         }
         return t;
     }
-    var Yt = {
+    var Kt = {
         /** @private. */
         actions: i().arrayOf(i().node),
         /** @private. */
@@ -1984,16 +1905,12 @@
         children: i().node,
         elementRef: i().oneOfType([ i().func, i().object ]),
         /** @private. */
-        guidelineIndex: i().number,
-        /** @private. */
         hasDragColumn: i().bool,
         /** @private. */
         hasInfoColumn: i().bool,
         /** @private. */
         onAutosizeColumn: i().func,
         /** @private. */
-        onDragStart: i().func,
-        /** @private. */
         onRequestMoveColumn: i().func,
         /** @private. */
         onRequestResizeColumn: i().func,
@@ -2002,20 +1919,18 @@
         /** @private. */
         rowSelection: i().oneOf([ "all", "some", "none" ])
     };
-    var Jt = 3;
-    var Qt = 2;
-    var Zt = 1;
-    var er = {
+    var Bt = 1;
+    var Vt = {
         all: true,
         none: false,
         some: "some"
     };
-    var nr = (0, D._)("No rows selected");
-    var tr = (0, D._)("Some rows selected");
-    var rr = (0, D._)("All rows selected");
-    var or = function e(n) {
+    var Ft = (0, D._)("No rows selected");
+    var Ut = (0, D._)("Some rows selected");
+    var Xt = (0, D._)("All rows selected");
+    var Yt = function e(n) {
         var t, r;
-        var o = Qe();
+        var o = Je();
         if (!n) {
             return [];
         }
@@ -2024,33 +1939,32 @@
             return e.clientWidth - parseFloat(n.getPropertyValue("padding-right")) - parseFloat(n.getPropertyValue("padding-left"));
         }));
     };
-    function ir(e) {
-        var n = e.actions, o = n === void 0 ? [] : n, i = e.actionsColumnWidth, a = e.cellMinWidth, l = a === void 0 ? 60 : a, u = e.children, s = e.elementRef, c = e.guidelineIndex, d = e.hasDragColumn, f = e.hasInfoColumn, v = e.onAutosizeColumn, p = e.onDragStart, m = e.onRequestMoveColumn, b = e.onRequestResizeColumn, h = e.onRequestToggleAllRows, y = e.rowSelection, g = Xt(e, [ "actions", "actionsColumnWidth", "cellMinWidth", "children", "elementRef", "guidelineIndex", "hasDragColumn", "hasInfoColumn", "onAutosizeColumn", "onDragStart", "onRequestMoveColumn", "onRequestResizeColumn", "onRequestToggleAllRows", "rowSelection" ]);
-        var w = (0, t.useContext)(xn), C = w.headType, x = w.tableContainerWidthWithoutBorders, S = w.resizableFillLayout;
-        var k = (0, t.useRef)(null);
-        var O = (0, t.useRef)([]);
+    function Gt(e) {
+        var n = e.actions, o = n === void 0 ? [] : n, i = e.actionsColumnWidth, a = e.cellMinWidth, l = a === void 0 ? 60 : a, u = e.children, s = e.elementRef, c = e.hasDragColumn, d = e.hasInfoColumn, f = e.onAutosizeColumn, v = e.onRequestMoveColumn, p = e.onRequestResizeColumn, b = e.onRequestToggleAllRows, m = e.rowSelection, h = Lt(e, [ "actions", "actionsColumnWidth", "cellMinWidth", "children", "elementRef", "hasDragColumn", "hasInfoColumn", "onAutosizeColumn", "onRequestMoveColumn", "onRequestResizeColumn", "onRequestToggleAllRows", "rowSelection" ]);
+        var y = (0, t.useContext)(_t), g = y.headType, w = y.tableContainerWidthWithoutBorders, C = y.resizableFillLayout;
+        var x = (0, t.useRef)(null);
+        var S = (0, t.useRef)([]);
         (0, t.useEffect)((function() {
             // Validate children width
             if (false) {
                 var e;
             }
-        }), [ u, b, S ]);
-        var R = (0, t.useCallback)((function(e) {
-            var n = e.columnId, r = e.fromIndex, o = e.toIndex;
-            if (o < t.Children.toArray(u).length) {
+        }), [ u, p, C ]);
+        var k = (0, t.useCallback)((function(e) {
+            var n = e.fromIndex, r = e.toIndex;
+            if (r < t.Children.toArray(u).length) {
                 // HeadCell never requests less than zero
-                m === null || m === void 0 ? void 0 : m({
-                    fromIndex: r,
-                    toIndex: o,
-                    columnId: n
+                v === null || v === void 0 ? void 0 : v({
+                    fromIndex: n,
+                    toIndex: r
                 });
             }
-        }), [ u, m ]);
-        var E = (0, t.useCallback)((function(e, n) {
+        }), [ u, v ]);
+        var O = (0, t.useCallback)((function(e, n) {
             var t = n.columnId, r = n.id, o = n.index, i = n.width;
-            var a = or(k.current);
+            var a = Yt(x.current);
             if (o >= a.length) {
-                b === null || b === void 0 ? void 0 : b(e, n);
+                p === null || p === void 0 ? void 0 : p(e, n);
                 return;
             }
             var u = a[o];
@@ -2058,10 +1972,10 @@
             if (s <= 0) {
                 // handle shrinking
                 if (i >= l) {
-                    b === null || b === void 0 ? void 0 : b(e, n);
+                    p === null || p === void 0 ? void 0 : p(e, n);
                 } else {
                     // shrink the cell as small as we can
-                    b === null || b === void 0 ? void 0 : b(e, {
+                    p === null || p === void 0 ? void 0 : p(e, {
                         columnId: t,
                         id: r,
                         index: o,
@@ -2073,11 +1987,11 @@
                 var c = [];
                 var d = 0;
                 var f = true;
-                if (O.current.length !== a.length) {
-                    b === null || b === void 0 ? void 0 : b(e, n);
+                if (S.current.length !== a.length) {
+                    p === null || p === void 0 ? void 0 : p(e, n);
                     return;
                 }
-                O.current.forEach((function(e, n) {
+                S.current.forEach((function(e, n) {
                     if (e === "auto") {
                         d += 1;
                         c.push(n);
@@ -2094,25 +2008,25 @@
                         return true;
                     }));
                     if (f) {
-                        b === null || b === void 0 ? void 0 : b(e, n);
+                        p === null || p === void 0 ? void 0 : p(e, n);
                     } else {
                         // make the cell as big as we can without letting any cells go below cellMinWidth
                         // that means all auto cells are at cellMinWidth and all the set width cells stay the same size
-                        var p = 0;
+                        var b = 0;
                         c.forEach((function(e) {
                             if (e < a.length) {
-                                p += Math.max(a[e] - l, 0);
+                                b += Math.max(a[e] - l, 0);
                             }
                         }));
-                        var m = a[o] + p;
-                        b === null || b === void 0 ? void 0 : b(e, {
+                        var m = a[o] + b;
+                        p === null || p === void 0 ? void 0 : p(e, {
                             columnId: t,
                             id: r,
                             index: o,
                             width: m
                         });
                     }
-                } else if (x != null) {
+                } else if (w != null) {
                     // if there are no auto width cells, check if shrinking the last cell by requested change makes it smaller than cellMinWidth
                     /**
          * We need to calculate the percieved width of the last cell, because if the user modifies the size of the last head cell,
@@ -2123,18 +2037,18 @@
                     var y = h.reduce((function(e, n) {
                         return e + n;
                     }));
-                    var g = x - y;
+                    var g = w - y;
                     if (g - s >= l) {
-                        b === null || b === void 0 ? void 0 : b(e, n);
+                        p === null || p === void 0 ? void 0 : p(e, n);
                     } else {
                         // make the cell as big as we can without letting perceivedWidthOfLastCell go below cellMinWidth
-                        var w = g - l;
-                        var C = u + w;
-                        b === null || b === void 0 ? void 0 : b(e, {
+                        var C = g - l;
+                        var k = u + C;
+                        p === null || p === void 0 ? void 0 : p(e, {
                             columnId: t,
                             id: r,
                             index: o,
-                            width: C
+                            width: k
                         });
                     }
                 } else {
@@ -2143,135 +2057,118 @@
          * the perceived width so this case will result in columns possibly going offscreen. In testing,
          * tableContainerWidthWithoutBorders attains a value quickly enough that it isn't a problem.
          */
-                    b === null || b === void 0 ? void 0 : b(e, n);
+                    p === null || p === void 0 ? void 0 : p(e, n);
                 }
             }
-        }), [ l, b, x ]);
-        var I = (0, t.useCallback)((function(e) {
-            H(s, e);
-            k.current = e;
+        }), [ l, p, w ]);
+        var R = (0, t.useCallback)((function(e) {
+            L(s, e);
+            x.current = e;
         }), [ s ]);
-        var T = (0, t.useCallback)((function(e) {
-            p === null || p === void 0 ? void 0 : p({
-                dragIndex: e
-            });
-        }), [ p ]);
-        var D = (0, t.useMemo)((function() {
+        var E = (0, t.useMemo)((function() {
             return t.Children.toArray(u).filter(t.isValidElement);
         }), [ u ]);
-        var A = D.length + (o.length || i ? 1 : 0);
-        var j = (0, t.useMemo)((function() {
+        var I = E.length + (o.length || i ? 1 : 0);
+        var T = (0, t.useMemo)((function() {
             var e = [];
-            var n = D.map((function(n, r, o) {
-                var i = "none";
-                if (c === o.length && r + 1 === o.length) {
-                    i = "after";
-                } else if (c === r) {
-                    i = "before";
-                }
+            var n = E.map((function(n, r) {
                 e.push(n.props.width);
                 
                 return (0, t.cloneElement)(n, {
                     index: r,
-                    showGuideline: i,
-                    onRequestResize: S ? E : b,
-                    onDragStart: m ? T : undefined,
-                    onRequestMoveColumn: m ? R : undefined,
-                    onAutosizeColumn: v,
-                    key: n.key || n.props.columnId || r,
-                    zIndex: A - r
+                    onRequestResize: C ? O : p,
+                    onRequestMoveColumn: v ? k : undefined,
+                    onAutosizeColumn: f,
+                    key: n.key || n.props.columnId || r
                 });
             }));
-            O.current = e;
+            S.current = e;
             return n;
-        }), [ D, c, S, E, b, m, T, R, v, A ]);
-        var q = y === undefined ? undefined : er[y];
-        var z = i || 48;
-        var P = C === "fixed" ? "fixed-head" : "head";
-        var _;
-        if (q === "some") {
-            _ = tr;
-        } else if (q) {
-            _ = rr;
+        }), [ E, C, O, p, v, k, f ]);
+        var j = m === undefined ? undefined : Vt[m];
+        var D = i || 48;
+        var q = g === "fixed" ? "fixed-head" : "head";
+        var A;
+        if (j === "some") {
+            A = Ut;
+        } else if (j) {
+            A = Xt;
         } else {
-            _ = nr;
+            A = Ft;
         }
-        var M = (0, t.useMemo)((function() {
+        var P = (0, t.useMemo)((function() {
             return {
-                minWidth: z
+                minWidth: D
             };
-        }), [ z ]);
-        var $ = (0, t.useMemo)((function() {
+        }), [ D ]);
+        var _ = (0, t.useMemo)((function() {
             return {
                 minWidth: i
             };
         }), [ i ]);
         
-        return r().createElement(Kt, Ut({
-            ref: I,
-            "data-test": P
-        }, g),  r().createElement(Wt, null, d &&  r().createElement(Vt, {
+        return r().createElement(zt, Wt({
+            ref: R,
+            "data-test": q,
+            $isFixed: g === "fixed",
+            $zIndex: I + Bt
+        }, h),  r().createElement(At, null, c &&  r().createElement(Nt, {
             key: "drag_rows_head_cell",
             "data-test": "drag-rows-head-cell",
             align: "center",
-            resizable: false,
-            zIndex: A + Jt
-        }), h &&  r().createElement(Bt, {
+            resizable: false
+        }), b &&  r().createElement(Mt, {
             key: "toggle_all",
             resizable: false,
             align: "center",
             variant: "toggleAll",
             truncate: false,
-            zIndex: A + Qt,
             "data-test": "toggle-all"
-        },  r().createElement(Et, {
-            "aria-label": _,
-            onClick: h,
-            selected: q
-        })), f &&  r().createElement(Ft, {
+        },  r().createElement(yt, {
+            "aria-label": A,
+            onClick: b,
+            selected: j
+        })), d &&  r().createElement($t, {
             key: "more_info_head_cell",
             "data-test": "more-info-head-cell",
             resizable: false,
-            variant: "info",
-            zIndex: A + Zt
-        }), j, o.length > 0 &&  r().createElement(Pn, {
+            variant: "info"
+        }), T, o.length > 0 &&  r().createElement(En, {
             key: "actions_head_cell",
             "data-test": "actions-head-cell",
             align: "right",
             resizable: false,
-            width: z,
-            style: M,
-            variant: "actions",
-            zIndex: 1
-        }, o), o.length === 0 && i &&  r().createElement(Pn, {
+            width: D,
+            style: P,
+            variant: "actions"
+        }, o), o.length === 0 && i &&  r().createElement(En, {
             key: "actions_head_cell",
             "data-test": "actions-head-cell",
             align: "right",
             resizable: false,
             width: i,
-            style: $,
-            variant: "actions",
-            zIndex: 1
+            style: _,
+            variant: "actions"
         }, " ")));
     }
-    ir.propTypes = Yt;
-    ir.splunkUiType = "Table.Head";
-    /* harmony default export */    const ar = ir;
+    Gt.propTypes = Kt;
+    Gt.splunkUiType = "Table.Head";
+    /* harmony default export */    const Jt = Gt;
     // CONCATENATED MODULE: external "lodash/isFinite"
-    const lr = require("lodash/isFinite");
-    var ur =  e.n(lr);
+    const Qt = require("lodash/isFinite");
+    var Zt =  e.n(Qt);
     // CONCATENATED MODULE: external "lodash/isFunction"
-    const sr = require("lodash/isFunction");
-    var cr =  e.n(sr);
+    const er = require("lodash/isFunction");
+    var nr =  e.n(er);
     // CONCATENATED MODULE: external "@splunk/react-ui/Popover"
-    const dr = require("@splunk/react-ui/Popover");
-    var fr =  e.n(dr);
+    const tr = require("@splunk/react-ui/Popover");
+    var rr =  e.n(tr);
     // CONCATENATED MODULE: external "@splunk/react-ui/useControlled"
-    const vr = require("@splunk/react-ui/useControlled");
-    var pr =  e.n(vr);
+    const or = require("@splunk/react-ui/useControlled");
+    var ir =  e.n(or);
     // CONCATENATED MODULE: ./src/Table/HeadDropdownCell.tsx
-    function mr() {
-        return mr = Object.assign ? Object.assign.bind() : function(e) {
+    function ar() {
+        return ar = Object.assign ? Object.assign.bind() : function(e) {
             for (var n = 1; n < arguments.length; n++) {
                 var t = arguments[n];
                 for (var r in t) {
@@ -2279,29 +2176,29 @@
                 }
             }
             return e;
-        }, mr.apply(null, arguments);
+        }, ar.apply(null, arguments);
     }
-    function br(e, n) {
-        return Cr(e) || wr(e, n) || yr(e, n) || hr();
+    function lr(e, n) {
+        return fr(e) || dr(e, n) || sr(e, n) || ur();
     }
-    function hr() {
+    function ur() {
         throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
     }
-    function yr(e, n) {
+    function sr(e, n) {
         if (e) {
-            if ("string" == typeof e) return gr(e, n);
+            if ("string" == typeof e) return cr(e, n);
             var t = {}.toString.call(e).slice(8, -1);
-            return "Object" === t && e.constructor && (t = e.constructor.name), "Map" === t || "Set" === t ? Array.from(e) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? gr(e, n) : void 0;
+            return "Object" === t && e.constructor && (t = e.constructor.name), "Map" === t || "Set" === t ? Array.from(e) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? cr(e, n) : void 0;
         }
     }
-    function gr(e, n) {
+    function cr(e, n) {
         (null == n || n > e.length) && (n = e.length);
         for (var t = 0, r = Array(n); t < n; t++) {
             r[t] = e[t];
         }
         return r;
     }
-    function wr(e, n) {
+    function dr(e, n) {
         var t = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
         if (null != t) {
             var r, o, i, a, l = [], u = !0, s = !1;
@@ -2323,12 +2220,12 @@
             return l;
         }
     }
-    function Cr(e) {
+    function fr(e) {
         if (Array.isArray(e)) return e;
     }
-    function xr(e, n) {
+    function vr(e, n) {
         if (null == e) return {};
-        var t, r, o = Sr(e, n);
+        var t, r, o = pr(e, n);
         if (Object.getOwnPropertySymbols) {
             var i = Object.getOwnPropertySymbols(e);
             for (r = 0; r < i.length; r++) {
@@ -2337,7 +2234,7 @@
         }
         return o;
     }
-    function Sr(e, n) {
+    function pr(e, n) {
         if (null == e) return {};
         var t = {};
         for (var r in e) {
@@ -2350,23 +2247,24 @@
     }
     /** @public */
     /** @public */
-    /** @public */    var kr = [ "clickAway", "contentClick", "escapeKey", "offScreen", "tabKey", "toggleClick" ];
-    var Or = {
+    /** @public */    var br = [ "clickAway", "contentClick", "escapeKey", "offScreen", "tabKey", "toggleClick" ];
+    var mr = {
         align: i().oneOf([ "left", "center", "right" ]),
         buttonRef: i().oneOfType([ i().func, i().object ]),
         canCoverHead: i().bool,
         children: i().node.isRequired,
-        closeReasons: i().arrayOf(i().oneOf(kr)),
-        columnId: i().any,
+        closeReasons: i().arrayOf(i().oneOf(br)),
+        columnId: i().string,
+        /** @private. */
+        dragId: i().oneOfType([ i().string, i().number ]),
         elementRef: i().oneOfType([ i().func, i().object ]),
-        focusToggleReasons: i().arrayOf(i().oneOf(kr)),
+        headCellScreenReaderText: i().string,
+        focusToggleReasons: i().arrayOf(i().oneOf(br)),
         /** @private The index of the cell, skipping the info column. */
         index: i().number,
         label: i().node,
         /** @private. */
         onAutosizeColumn: i().func,
-        /** @private. */
-        onDragStart: i().func,
         /**
    * @private. This will be passed through, and will work as expected.
    */
@@ -2381,8 +2279,6 @@
         repositionMode: i().oneOf([ "none", "flip", "any" ]),
         resizable: i().bool,
         retainFocus: i().bool,
-        /** @private. */
-        showGuideline: i().oneOf([ "none", "before", "after" ]),
         takeFocus: i().bool,
         truncate: i().bool,
         /**
@@ -2393,37 +2289,39 @@
         visible: i().bool,
         width: i().number,
         /** @private. */
-        variant: i().oneOf([ "toggleAll", "info", "actions" ]),
-        /** @private. */
-        zIndex: i().number
+        variant: i().oneOf([ "toggleAll", "info", "actions" ])
     };
-    var Rr = [ "contentClick", "escapeKey", "toggleClick" ];
-    function Er(e) {
-        var n = e.align, o = n === void 0 ? "left" : n, i = e.canCoverHead, a = i === void 0 ? true : i, l = e.children, u = e.closeReasons, s = u === void 0 ? kr : u, c = e.columnId, d = e.elementRef, f = e.focusToggleReasons, v = f === void 0 ? Rr : f, p = e.id, m = e.index, b = e.buttonRef, h = e.label, y = e.onAutosizeColumn, g = e.onDragStart, w = e.onKeyDown, C = e.onRequestClose, x = e.onRequestMoveColumn, S = e.onRequestOpen, k = e.onRequestResize, O = e.open, E = e.repositionMode, I = E === void 0 ? "flip" : E, D = e.resizable, A = D === void 0 ? true : D, j = e.retainFocus, z = e.showGuideline, P = e.style, M = e.takeFocus, $ = M === void 0 ? true : M, N = e.truncate, L = N === void 0 ? true : N, W = e.variant, K = e.visible, B = K === void 0 ? true : K, F = e.width, V = e.zIndex, U = V === void 0 ? 1 : V, X = xr(e, [ "align", "canCoverHead", "children", "closeReasons", "columnId", "elementRef", "focusToggleReasons", "id", "index", "buttonRef", "label", "onAutosizeColumn", "onDragStart", "onKeyDown", "onRequestClose", "onRequestMoveColumn", "onRequestOpen", "onRequestResize", "open", "repositionMode", "resizable", "retainFocus", "showGuideline", "style", "takeFocus", "truncate", "variant", "visible", "width", "zIndex" ]);
+    var hr = [ "contentClick", "escapeKey", "toggleClick" ];
+    function yr(e) {
+        var n = e.align, o = n === void 0 ? "left" : n, i = e.buttonRef, a = e.canCoverHead, u = a === void 0 ? true : a, s = e.children, c = e.closeReasons, d = c === void 0 ? br : c, f = e.columnId, v = e.dragId, p = e.elementRef, b = e.headCellScreenReaderText, m = e.focusToggleReasons, h = m === void 0 ? hr : m, y = e.id, g = e.index, w = e.label, C = e.onAutosizeColumn, x = e.onKeyDown, S = e.onRequestClose, k = e.onRequestMoveColumn, O = e.onRequestOpen, E = e.onRequestResize, I = e.open, T = e.repositionMode, A = T === void 0 ? "flip" : T, _ = e.resizable, z = _ === void 0 ? true : _, M = e.retainFocus, $ = e.style, N = e.takeFocus, W = N === void 0 ? true : N, H = e.truncate, K = H === void 0 ? true : H, B = e.variant, V = e.visible, F = V === void 0 ? true : V, U = e.width, X = vr(e, [ "align", "buttonRef", "canCoverHead", "children", "closeReasons", "columnId", "dragId", "elementRef", "headCellScreenReaderText", "focusToggleReasons", "id", "index", "label", "onAutosizeColumn", "onKeyDown", "onRequestClose", "onRequestMoveColumn", "onRequestOpen", "onRequestResize", "open", "repositionMode", "resizable", "retainFocus", "style", "takeFocus", "truncate", "variant", "visible", "width" ]);
         // @docs-props-type HeadDropdownCellPropsBase
-                var G = pr()({
+                var Y = ir()({
             componentName: "HeadDropdownCell",
             /* eslint-disable-next-line prefer-rest-params */
             componentProps: arguments[0],
             // see SUI-7028
             valuePropName: "open"
         });
-        var Y = (0, t.useState)(), J = br(Y, 2), Q = J[0], Z = J[1];
-        var ee = (0, t.useState)(null), ne = br(ee, 2), te = ne[0], re = ne[1];
-        var oe = (0, t.useState)(null), ie = br(oe, 2), ae = ie[0], le = ie[1];
-        var ue = (0, t.useState)(false), se = br(ue, 2), ce = se[0], de = se[1];
-        var fe = (0, t.useState)(false), ve = br(fe, 2), pe = ve[0], me = ve[1];
-        var be = (0, _.createDOMID)("popover");
-        var he = (0, _.createDOMID)("cellId");
-        var ye = (0, t.useContext)(xn), ge = ye.headType;
+        var G = (0, t.useState)(), J = lr(G, 2), Q = J[0], Z = J[1];
+        var ee = (0, t.useState)(null), ne = lr(ee, 2), te = ne[0], re = ne[1];
+        var oe = (0, t.useState)(null), ie = lr(oe, 2), ae = ie[0], le = ie[1];
+        var ue = (0, t.useState)(false), se = lr(ue, 2), ce = se[0], de = se[1];
+        var fe = (0, R.createDOMID)("popover");
+        var ve = (0, R.createDOMID)("cellId");
+        var pe = !!k;
+        var be = (0, l.useSortable)({
+            // dragId is optional in HeadCell but required by useSortable
+            // since it is always set in Table, use a type assertion here to avoid TypeScript error
+            id: v
+        }), me = be.attributes, he = be.listeners, ye = be.setNodeRef, ge = be.isDragging;
         var we = (0, t.useMemo)((function() {
-            return G ? O : pe;
-        }), [ G, pe, O ]);
-        var Ce = T()(B);
-        var xe = p || he;
+            return Y ? I : ce;
+        }), [ Y, ce, I ]);
+        var Ce = j()(F);
+        var xe = y || ve;
         (0, t.useEffect)((function() {
             if (false) {}
-        }), [ k, L ]);
+        }), [ E, K ]);
         var Se = (0, t.useCallback)((function(e) {
             var n = e.reason, t = e.event;
             if (n === "clickAway" && t !== undefined) {
@@ -2436,38 +2334,42 @@
                     r = r.parentNode;
                 }
             }
-            if (we && q()(s, n) && m !== undefined) {
-                if (q()(v, n)) {
+            if (we && P()(d, n) && g !== undefined) {
+                if (P()(h, n)) {
                     ae === null || ae === void 0 ? void 0 : ae.focus();
                 }
-                if (!G) {
-                    me(false);
+                if (!Y) {
+                    de(false);
                 }
-                C === null || C === void 0 ? void 0 : C(t, {
-                    index: m,
+                S === null || S === void 0 ? void 0 : S(t, {
+                    index: g,
                     reason: n,
-                    columnId: c
+                    columnId: f
                 });
             }
-        }), [ s, c, v, m, ae, G, we, C ]);
+        }), [ d, f, h, g, ae, Y, we, S ]);
         (0, t.useEffect)((function() {
-            if (Ce && !B) {
+            if (Ce && !F) {
                 Se({
                     reason: "offScreen"
                 });
             }
-        }), [ Se, Ce, B ]);
+        }), [ Se, Ce, F ]);
         var ke = (0, t.useCallback)((function(e) {
-            re(e);
-            H(d, e);
-        }), [ d ]);
+            L(p, e);
+            if (pe) {
+                ye(e);
+            }
+        }), [ pe, p, ye ]);
         var Oe = (0, t.useCallback)((function(e) {
             le(e);
-            H(b, e);
-        }), [ b ]);
-        var Ee = (0, t.useCallback)((function(e) {
+            re(e);
+            L(i, e);
+        }), [ i ]);
+        var Re = (0, t.useCallback)((function(e) {
+            e.stopPropagation();
             // ignore clicks on the resize handle
-            if (e.target.getAttribute("data-test") === "resize") {
+                        if (e.target.getAttribute("data-test") === "resize") {
                 return;
             }
             if (!we) {
@@ -2478,57 +2380,33 @@
                     reason: "toggleClick",
                     event: e
                 });
-            } else if (m !== undefined) {
-                S === null || S === void 0 ? void 0 : S(e, {
+            } else if (g !== undefined) {
+                O === null || O === void 0 ? void 0 : O(e, {
                     reason: "toggleClick",
-                    columnId: c,
-                    index: m
+                    columnId: f,
+                    index: g
                 });
-                if (!G) {
-                    me(true);
-                }
-            }
-        }), [ c, Se, m, G, we, S ]);
-        var Ie = (0, t.useCallback)((function(e) {
-            var n = e.nativeEvent, t = e.target;
-            var r = (0, R.keycode)(n);
-            if (t.getAttribute("data-test") !== "resize") {
-                if (r === "left" && m !== undefined && m > 0) {
-                    x === null || x === void 0 ? void 0 : x({
-                        fromIndex: m,
-                        toIndex: m - 1,
-                        columnId: c
-                    });
-                } else if (r === "right" && m !== undefined) {
-                    x === null || x === void 0 ? void 0 : x({
-                        fromIndex: m,
-                        toIndex: m + 1,
-                        columnId: c
-                    });
+                if (!Y) {
+                    de(true);
                 }
             }
-            if (m !== undefined) {
-                w === null || w === void 0 ? void 0 : w(e, {
-                    index: m,
-                    columnId: c
+        }), [ f, Se, g, Y, we, O ]);
+        var Ee = (0, t.useCallback)((function(e) {
+            if (g !== undefined) {
+                x === null || x === void 0 ? void 0 : x(e, {
+                    index: g,
+                    columnId: f
                 });
             }
-        }), [ c, m, w, x ]);
+        }), [ f, g, x ]);
         var Te = (0, t.useCallback)((function(e) {
             Se({
                 reason: "contentClick",
                 event: e
             });
         }), [ Se ]);
-        var De = (0, t.useCallback)((function(e, n) {
-            de(true);
-            g === null || g === void 0 ? void 0 : g(e, n);
-        }), [ g ]);
-        var Ae = (0, t.useCallback)((function() {
-            de(false);
-        }), []);
-        var je = (0, t.useMemo)((function() {
-            if (Q !== undefined && ur()(Q)) {
+        var De = (0, t.useMemo)((function() {
+            if (Q !== undefined && Zt()(Q)) {
                 var e;
                 return {
                     x: Q - ((e = te === null || te === void 0 ? void 0 : te.getBoundingClientRect().left) !== null && e !== void 0 ? e : 0)
@@ -2536,89 +2414,97 @@
             }
             return undefined;
         }), [ Q, te ]);
+        var qe = (0, t.useMemo)((function() {
+            return Ie()({}, $, {
+                width: U
+            });
+        }), [ $, U ]);
+        var Ae;
+        if (b) {
+            Ae = b;
+        } else if (typeof w === "string") {
+            Ae = w;
+        }
         
-        return r().createElement(gn, mr({
-            style: Re()(P, {
-                width: F
-            }),
+        return r().createElement(gn, ar({
+            style: qe,
             "data-test": "head-cell",
-            $dragging: ce || undefined,
-            $variant: W,
-            id: B ? xe : undefined,
+            $isDragging: pe && ge,
+            $variant: B,
+            id: F ? xe : undefined,
             ref: ke
-        }, X, {
-            onClick: Ee,
-            onKeyDown: Ie,
-            $isFixed: ge === "fixed",
-            $zIndex: U
-        }),  r().createElement(yn, {
-            elementRef: Oe,
-            label: h,
+        }, X),  r().createElement(yn, null, pe &&  r().createElement(wn, ar({
+            "aria-label": (0, q.sprintf)((0, D._)("Reorder %(labelString)s"), {
+                labelString: Ae
+            }),
+            "data-test": "drag"
+        }, me, he),  r().createElement(je(), null)),  r().createElement(hn, {
             align: o,
-            columnId: c,
-            id: p,
-            index: m,
-            isMenu: true,
-            resizable: B && A,
-            onDragStart: g ? De : undefined,
-            onDragEnd: g ? Ae : undefined,
-            onAutosizeColumn: y,
-            onRequestResize: k,
-            truncate: L,
-            width: F,
-            clickable: true,
+            "aria-expanded": we,
             "aria-haspopup": true,
-            "aria-owns": be,
-            "aria-expanded": we
-        }), z !== "none" &&  r().createElement(wn, {
-            $position: z
-        }),  r().createElement(fr(), {
+            "aria-owns": fe,
+            clickable: true,
+            columnId: f,
+            elementRef: Oe,
+            id: y,
+            index: g,
+            isMenu: true,
+            label: w,
+            resizable: F && z,
+            onAutosizeColumn: C,
+            onRequestResize: E,
+            onClick: Re,
+            onKeyDown: Ee,
+            truncate: K,
+            width: U,
+            "data-test": "inner"
+        }),  r().createElement(rr(), {
             align: "center",
-            open: !!te && we,
-            autoCloseWhenOffScreen: q()(s, "offScreen"),
             anchor: te,
-            canCoverAnchor: a,
-            retainFocus: j,
+            "aria-labelledby": xe,
+            autoCloseWhenOffScreen: P()(d, "offScreen"),
+            canCoverAnchor: u,
             defaultPlacement: "below",
+            id: fe,
             onRequestClose: Se,
-            repositionMode: I,
-            id: be,
-            "aria-labelledby": xe,
-            takeFocus: $,
-            pointTo: je
-        }, cr()(l) ? function() {
+            open: !!te && we,
+            pointTo: De,
+            repositionMode: A,
+            retainFocus: M,
+            takeFocus: W
+        }, nr()(s) ? function() {
             
             // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
             return r().createElement("div", {
                 onClick: Te
-            }, l.apply(void 0, arguments));
+            }, s.apply(void 0, arguments));
         } : 
         
         // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
         r().createElement("div", {
             onClick: Te
-        }, l)));
+        }, s))));
     }
-    Er.propTypes = Or;
-    Er.splunkUiType = "Table.HeadDropdownCell";
-    Er.possibleCloseReasons = kr;
-    /* harmony default export */    const Ir = Er;
+    yr.propTypes = mr;
+    yr.splunkUiType = "Table.HeadDropdownCell";
+    yr.possibleCloseReasons = br;
+    /* harmony default export */    const gr = yr;
     // CONCATENATED MODULE: ./src/Table/KeyboardSensor.ts
-    function Tr(e) {
+    function wr(e) {
         "@babel/helpers - typeof";
-        return Tr = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
+        return wr = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
             return typeof e;
         } : function(e) {
             return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e;
-        }, Tr(e);
+        }, wr(e);
     }
-    function Dr(e, n) {
-        return qr(e) || jr(e, n) || _r(e, n) || Ar();
+    function Cr(e, n) {
+        return kr(e) || Sr(e, n) || Er(e, n) || xr();
     }
-    function Ar() {
+    function xr() {
         throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
     }
-    function jr(e, n) {
+    function Sr(e, n) {
         var t = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
         if (null != t) {
             var r, o, i, a, l = [], u = !0, s = !1;
@@ -2640,68 +2526,68 @@
             return l;
         }
     }
-    function qr(e) {
+    function kr(e) {
         if (Array.isArray(e)) return e;
     }
-    function zr(e) {
-        return $r(e) || Mr(e) || _r(e) || Pr();
+    function Or(e) {
+        return Tr(e) || Ir(e) || Er(e) || Rr();
     }
-    function Pr() {
+    function Rr() {
         throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
     }
-    function _r(e, n) {
+    function Er(e, n) {
         if (e) {
-            if ("string" == typeof e) return Nr(e, n);
+            if ("string" == typeof e) return jr(e, n);
             var t = {}.toString.call(e).slice(8, -1);
-            return "Object" === t && e.constructor && (t = e.constructor.name), "Map" === t || "Set" === t ? Array.from(e) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? Nr(e, n) : void 0;
+            return "Object" === t && e.constructor && (t = e.constructor.name), "Map" === t || "Set" === t ? Array.from(e) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? jr(e, n) : void 0;
         }
     }
-    function Mr(e) {
+    function Ir(e) {
         if ("undefined" != typeof Symbol && null != e[Symbol.iterator] || null != e["@@iterator"]) return Array.from(e);
     }
-    function $r(e) {
-        if (Array.isArray(e)) return Nr(e);
+    function Tr(e) {
+        if (Array.isArray(e)) return jr(e);
     }
-    function Nr(e, n) {
+    function jr(e, n) {
         (null == n || n > e.length) && (n = e.length);
         for (var t = 0, r = Array(n); t < n; t++) {
             r[t] = e[t];
         }
         return r;
     }
-    function Lr(e, n) {
+    function Dr(e, n) {
         if (!(e instanceof n)) throw new TypeError("Cannot call a class as a function");
     }
-    function Hr(e, n) {
+    function qr(e, n) {
         for (var t = 0; t < n.length; t++) {
             var r = n[t];
             r.enumerable = r.enumerable || !1, r.configurable = !0, "value" in r && (r.writable = !0), 
-            Object.defineProperty(e, Br(r.key), r);
+            Object.defineProperty(e, _r(r.key), r);
         }
     }
-    function Wr(e, n, t) {
-        return n && Hr(e.prototype, n), t && Hr(e, t), Object.defineProperty(e, "prototype", {
+    function Ar(e, n, t) {
+        return n && qr(e.prototype, n), t && qr(e, t), Object.defineProperty(e, "prototype", {
             writable: !1
         }), e;
     }
-    function Kr(e, n, t) {
-        return (n = Br(n)) in e ? Object.defineProperty(e, n, {
+    function Pr(e, n, t) {
+        return (n = _r(n)) in e ? Object.defineProperty(e, n, {
             value: t,
             enumerable: !0,
             configurable: !0,
             writable: !0
         }) : e[n] = t, e;
     }
-    function Br(e) {
-        var n = Fr(e, "string");
-        return "symbol" == Tr(n) ? n : n + "";
+    function _r(e) {
+        var n = zr(e, "string");
+        return "symbol" == wr(n) ? n : n + "";
     }
-    function Fr(e, n) {
-        if ("object" != Tr(e) || !e) return e;
+    function zr(e, n) {
+        if ("object" != wr(e) || !e) return e;
         var t = e[Symbol.toPrimitive];
         if (void 0 !== t) {
             var r = t.call(e, n || "default");
-            if ("object" != Tr(r)) return r;
+            if ("object" != wr(r)) return r;
             throw new TypeError("@@toPrimitive must return a primitive value.");
         }
         return ("string" === n ? String : Number)(e);
@@ -2709,21 +2595,21 @@
     // based on https://github.com/clauderic/dnd-kit/blob/694dcc2f62e5269541fc941fa6c9af46ccd682ad/packages/core/src/sensors/keyboard/KeyboardSensor.ts
     // eslint-disable-next-line max-classes-per-file
     // https://github.com/clauderic/dnd-kit/blob/694dcc2f62e5269541fc941fa6c9af46ccd682ad/packages/core/src/sensors/utilities/Listeners.ts
-        var Vr =  function() {
+        var Mr =  function() {
         function e(n) {
             var t = this;
-            Lr(this, e);
-            Kr(this, "listeners", []);
-            Kr(this, "removeAll", (function() {
+            Dr(this, e);
+            Pr(this, "listeners", []);
+            Pr(this, "removeAll", (function() {
                 t.listeners.forEach((function(e) {
                     var n;
-                    return (n = t.target) === null || n === void 0 ? void 0 : n.removeEventListener.apply(n, zr(e));
+                    return (n = t.target) === null || n === void 0 ? void 0 : n.removeEventListener.apply(n, Or(e));
                 }));
             }));
             this.target = n;
             this.target = n;
         }
-        Wr(e, [ {
+        Ar(e, [ {
             key: "add",
             value: function e(n, t, r) {
                 var o;
@@ -2734,7 +2620,7 @@
         return e;
     }();
     // https://github.com/clauderic/dnd-kit/blob/694dcc2f62e5269541fc941fa6c9af46ccd682ad/packages/core/src/utilities/transform/parseTransform.ts
-        function Ur(e) {
+        function $r(e) {
         if (e.startsWith("matrix3d(")) {
             var n = e.slice(9, -1).split(/, /);
             return {
@@ -2756,8 +2642,8 @@
         return null;
     }
     // https://github.com/clauderic/dnd-kit/blob/694dcc2f62e5269541fc941fa6c9af46ccd682ad/packages/core/src/utilities/transform/inverseTransform.ts
-        function Xr(e, n, t) {
-        var r = Ur(n);
+        function Nr(e, n, t) {
+        var r = $r(n);
         if (!r) {
             return e;
         }
@@ -2775,17 +2661,17 @@
             left: u
         };
     }
-    var Gr = {
+    var Wr = {
         ignoreTransform: false
     };
     // https://github.com/clauderic/dnd-kit/blob/694dcc2f62e5269541fc941fa6c9af46ccd682ad/packages/core/src/utilities/rect/getRect.ts
-        function Yr(e) {
-        var n = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : Gr;
+        function Lr(e) {
+        var n = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : Wr;
         var t = e.getBoundingClientRect();
         if (n.ignoreTransform) {
-            var r = (0, _n.getWindow)(e).getComputedStyle(e), o = r.transform, i = r.transformOrigin;
+            var r = (0, In.getWindow)(e).getComputedStyle(e), o = r.transform, i = r.transformOrigin;
             if (o) {
-                t = Xr(t, o, i);
+                t = Nr(t, o, i);
             }
         }
         var a = t, l = a.top, u = a.left, s = a.width, c = a.height, d = a.bottom, f = a.right;
@@ -2798,7 +2684,7 @@
             right: f
         };
     }
-    function Jr(e) {
+    function Hr(e) {
         if (e === document.scrollingElement) {
             var n = window, t = n.innerWidth, r = n.innerHeight;
             return {
@@ -2821,19 +2707,19 @@
         };
     }
     // https://github.com/clauderic/dnd-kit/blob/694dcc2f62e5269541fc941fa6c9af46ccd682ad/packages/core/src/utilities/scroll/documentScrollingElement.ts
-        function Qr(e) {
-        if (!_n.canUseDOM || !e) {
+        function Kr(e) {
+        if (!In.canUseDOM || !e) {
             return false;
         }
         return e === document.scrollingElement;
     }
     // https://github.com/clauderic/dnd-kit/blob/694dcc2f62e5269541fc941fa6c9af46ccd682ad/packages/core/src/utilities/scroll/getScrollPosition.ts
-        function Zr(e) {
+        function Br(e) {
         var n = {
             x: 0,
             y: 0
         };
-        var t = Qr(e) ? {
+        var t = Kr(e) ? {
             height: window.innerHeight,
             width: window.innerWidth
         } : {
@@ -2858,20 +2744,20 @@
         };
     }
     // https://github.com/clauderic/dnd-kit/blob/694dcc2f62e5269541fc941fa6c9af46ccd682ad/packages/core/src/utilities/coordinates/constants.ts
-        var eo = {
+        var Vr = {
         x: 0,
         y: 0
     };
     // https://github.com/clauderic/dnd-kit/blob/694dcc2f62e5269541fc941fa6c9af46ccd682ad/packages/core/src/utilities/scroll/isFixed.ts
-        function no(e) {
+        function Fr(e) {
         var n = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : (0, 
-        _n.getWindow)(e).getComputedStyle(e);
+        In.getWindow)(e).getComputedStyle(e);
         return n.position === "fixed";
     }
     // https://github.com/clauderic/dnd-kit/blob/694dcc2f62e5269541fc941fa6c9af46ccd682ad/packages/core/src/utilities/scroll/isScrollable.ts
-        function to(e) {
+        function Ur(e) {
         var n = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : (0, 
-        _n.getWindow)(e).getComputedStyle(e);
+        In.getWindow)(e).getComputedStyle(e);
         var t = /(auto|scroll|overlay)/;
         var r = [ "overflow", "overflowX", "overflowY" ];
         return r.some((function(e) {
@@ -2880,7 +2766,7 @@
         }));
     }
     // https://github.com/clauderic/dnd-kit/blob/694dcc2f62e5269541fc941fa6c9af46ccd682ad/packages/core/src/utilities/scroll/getScrollableAncestors.ts
-        function ro(e, n) {
+        function Xr(e, n) {
         var t = [];
         function r(o) {
             if (n != null && t.length >= n) {
@@ -2889,23 +2775,23 @@
             if (!o) {
                 return t;
             }
-            if ((0, _n.isDocument)(o) && o.scrollingElement != null && !t.includes(o.scrollingElement)) {
+            if ((0, In.isDocument)(o) && o.scrollingElement != null && !t.includes(o.scrollingElement)) {
                 t.push(o.scrollingElement);
                 return t;
             }
-            if (!(0, _n.isHTMLElement)(o) || (0, _n.isSVGElement)(o)) {
+            if (!(0, In.isHTMLElement)(o) || (0, In.isSVGElement)(o)) {
                 return t;
             }
             if (t.includes(o)) {
                 return t;
             }
-            var i = (0, _n.getWindow)(e).getComputedStyle(o);
+            var i = (0, In.getWindow)(e).getComputedStyle(o);
             if (o !== e) {
-                if (to(o, i)) {
+                if (Ur(o, i)) {
                     t.push(o);
                 }
             }
-            if (no(o, i)) {
+            if (Fr(o, i)) {
                 return t;
             }
             return r(o.parentNode);
@@ -2916,23 +2802,23 @@
         return r(e);
     }
     // https://github.com/clauderic/dnd-kit/blob/694dcc2f62e5269541fc941fa6c9af46ccd682ad/packages/core/src/utilities/scroll/getScrollableAncestors.ts
-        function oo(e) {
-        var n = ro(e, 1), t = Dr(n, 1), r = t[0];
+        function Yr(e) {
+        var n = Xr(e, 1), t = Cr(n, 1), r = t[0];
         return r !== null && r !== void 0 ? r : null;
     }
-    var io = {
+    var Gr = {
         start: [ a.KeyboardCode.Space, a.KeyboardCode.Enter ],
         cancel: [ a.KeyboardCode.Esc ],
         end: [ a.KeyboardCode.Space, a.KeyboardCode.Enter ]
     };
     // https://github.com/clauderic/dnd-kit/blob/694dcc2f62e5269541fc941fa6c9af46ccd682ad/packages/core/src/utilities/scroll/scrollIntoViewIfNeeded.ts
-        function ao(e) {
-        var n = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : Yr;
+        function Jr(e) {
+        var n = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : Lr;
         if (!e) {
             return;
         }
         var t = n(e), r = t.top, o = t.left, i = t.bottom, a = t.right;
-        var l = oo(e);
+        var l = Yr(e);
         if (!l) {
             return;
         }
@@ -2943,23 +2829,23 @@
             });
         }
     }
-    var lo =  function() {
+    var Qr =  function() {
         function e(n) {
-            Lr(this, e);
-            Kr(this, "autoScrollEnabled", false);
-            Kr(this, "referenceCoordinates", void 0);
-            Kr(this, "listeners", void 0);
-            Kr(this, "windowListeners", void 0);
+            Dr(this, e);
+            Pr(this, "autoScrollEnabled", false);
+            Pr(this, "referenceCoordinates", void 0);
+            Pr(this, "listeners", void 0);
+            Pr(this, "windowListeners", void 0);
             this.props = n;
             var t = n.event.target;
             this.props = n;
-            this.listeners = new Vr((0, _n.getOwnerDocument)(t));
-            this.windowListeners = new Vr((0, _n.getWindow)(t));
+            this.listeners = new Mr((0, In.getOwnerDocument)(t));
+            this.windowListeners = new Mr((0, In.getWindow)(t));
             this.handleKeyDown = this.handleKeyDown.bind(this);
             this.handleCancel = this.handleCancel.bind(this);
             this.attach();
         }
-        Wr(e, [ {
+        Ar(e, [ {
             key: "attach",
             value: function e() {
                 var n = this;
@@ -2976,16 +2862,16 @@
                 var n = this.props, t = n.activeNode, r = n.onStart;
                 var o = t.node.current;
                 if (o) {
-                    ao(o);
+                    Jr(o);
                 }
-                r(eo);
+                r(Vr);
             }
         }, {
             key: "handleKeyDown",
             value: function e(n) {
-                if ((0, _n.isKeyboardEvent)(n)) {
+                if ((0, In.isKeyboardEvent)(n)) {
                     var t = this.props, r = t.active, o = t.context, i = t.options;
-                    var l = i.keyboardCodes, u = l === void 0 ? io : l, s = i.coordinateGetter, c = i.scrollBehavior, d = c === void 0 ? "smooth" : c;
+                    var l = i.keyboardCodes, u = l === void 0 ? Gr : l, s = i.coordinateGetter, c = i.scrollBehavior, d = c === void 0 ? "smooth" : c;
                     var f = n.code;
                     if (u.end.includes(f)) {
                         this.handleEnd(n);
@@ -2999,17 +2885,17 @@
                     var p = v ? {
                         x: v.left,
                         y: v.top
-                    } : eo;
+                    } : Vr;
                     if (!this.referenceCoordinates) {
                         this.referenceCoordinates = p;
                     }
-                    var m = s(n, {
+                    var b = s(n, {
                         active: r,
                         context: o.current,
                         currentCoordinates: p
                     });
-                    if (m) {
-                        var b = (0, _n.subtract)(m, p);
+                    if (b) {
+                        var m = (0, In.subtract)(b, p);
                         var h = {
                             x: 0,
                             y: 0
@@ -3018,29 +2904,29 @@
                         for (var g = 0; g < y.length; g += 1) {
                             var w = y[g];
                             var C = n.code;
-                            var x = Zr(w), S = x.isTop, k = x.isRight, O = x.isLeft, R = x.isBottom, E = x.maxScroll, I = x.minScroll;
-                            var T = Jr(w);
+                            var x = Br(w), S = x.isTop, k = x.isRight, O = x.isLeft, R = x.isBottom, E = x.maxScroll, I = x.minScroll;
+                            var T = Hr(w);
                             // isDraggableNodeVerticallyInView and isDraggableNodeHorizontallyInView are custom
                             // we want to scroll only when a dragging node will be out of view,
                             // originally it tries to always place a dragging node in the middle of the container
-                                                        var D = T.top <= m.y && T.bottom >= m.y + ((v === null || v === void 0 ? void 0 : v.height) || 0);
-                            var A = T.left <= m.x && T.right >= m.x + ((v === null || v === void 0 ? void 0 : v.width) || 0);
-                            var j = (C === a.KeyboardCode.Right && !k || C === a.KeyboardCode.Left && !O) && !A;
-                            var q = (C === a.KeyboardCode.Down && !R || C === a.KeyboardCode.Up && !S) && !D;
-                            if (j) {
-                                var z = w.scrollLeft + b.x;
-                                var P = C === a.KeyboardCode.Right && z <= E.x || C === a.KeyboardCode.Left && z >= I.x;
-                                if (P && !b.y) {
+                                                        var j = T.top <= b.y && T.bottom >= b.y + ((v === null || v === void 0 ? void 0 : v.height) || 0);
+                            var D = T.left <= b.x && T.right >= b.x + ((v === null || v === void 0 ? void 0 : v.width) || 0);
+                            var q = (C === a.KeyboardCode.Right && !k || C === a.KeyboardCode.Left && !O) && !D;
+                            var A = (C === a.KeyboardCode.Down && !R || C === a.KeyboardCode.Up && !S) && !j;
+                            if (q) {
+                                var P = w.scrollLeft + m.x;
+                                var _ = C === a.KeyboardCode.Right && P <= E.x || C === a.KeyboardCode.Left && P >= I.x;
+                                if (_ && !m.y) {
                                     // We don't need to update coordinates, the scroll adjustment alone will trigger
                                     // logic to auto-detect the new container we are over
                                     w.scrollTo({
-                                        left: z,
+                                        left: P,
                                         behavior: d
                                     });
                                     return;
                                 }
-                                if (P) {
-                                    h.x = w.scrollLeft - z;
+                                if (_) {
+                                    h.x = w.scrollLeft - P;
                                 } else {
                                     h.x = C === a.KeyboardCode.Right ? w.scrollLeft - E.x : w.scrollLeft - I.x;
                                 }
@@ -3051,20 +2937,20 @@
                                     });
                                 }
                                 break;
-                            } else if (q) {
-                                var _ = w.scrollTop + b.y;
-                                var M = C === a.KeyboardCode.Down && _ <= E.y || C === a.KeyboardCode.Up && _ >= I.y;
-                                if (M && !b.x) {
+                            } else if (A) {
+                                var z = w.scrollTop + m.y;
+                                var M = C === a.KeyboardCode.Down && z <= E.y || C === a.KeyboardCode.Up && z >= I.y;
+                                if (M && !m.x) {
                                     // We don't need to update coordinates, the scroll adjustment alone will trigger
                                     // logic to auto-detect the new container we are over
                                     w.scrollTo({
-                                        top: _,
+                                        top: z,
                                         behavior: d
                                     });
                                     return;
                                 }
                                 if (M) {
-                                    h.y = w.scrollTop - _;
+                                    h.y = w.scrollTop - z;
                                 } else {
                                     h.y = C === a.KeyboardCode.Down ? w.scrollTop - E.y : w.scrollTop - I.y;
                                 }
@@ -3077,7 +2963,7 @@
                                 break;
                             }
                         }
-                        this.handleMove(n, (0, _n.add)((0, _n.subtract)(m, this.referenceCoordinates), h));
+                        this.handleMove(n, (0, In.add)((0, In.subtract)(b, this.referenceCoordinates), h));
                     }
                 }
             }
@@ -3113,10 +2999,10 @@
         } ]);
         return e;
     }();
-    Kr(lo, "activators", [ {
+    Pr(Qr, "activators", [ {
         eventName: "onKeyDown",
         handler: function e(n, t, r) {
-            var o = t.keyboardCodes, i = o === void 0 ? io : o, a = t.onActivation;
+            var o = t.keyboardCodes, i = o === void 0 ? Gr : o, a = t.onActivation;
             var l = r.active;
             var u = n.nativeEvent.code;
             if (i.start.includes(u)) {
@@ -3134,24 +3020,24 @@
         }
     } ]);
     // CONCATENATED MODULE: external "lodash/extend"
-    const uo = require("lodash/extend");
-    var so =  e.n(uo);
+    const Zr = require("lodash/extend");
+    var eo =  e.n(Zr);
     // CONCATENATED MODULE: ./src/Table/HeadTableStyles.ts
-    var co = $()(te).withConfig({
+    var no = $()(te).withConfig({
         displayName: "HeadTableStyles__Styled",
         componentId: "g85wgf-0"
     })([ "min-width:0;table-layout:fixed;" ]);
-    var fo = $().div.withConfig({
+    var to = $().div.withConfig({
         displayName: "HeadTableStyles__StyledDockedContainer",
         componentId: "g85wgf-1"
     })([ "overflow:hidden;position:fixed;z-index:", ";@media print{display:none;}" ], N.variables.zindexFixedNavbar);
-    var vo = $()(fo).withConfig({
+    var ro = $()(to).withConfig({
         displayName: "HeadTableStyles__StyledFixedContainer",
         componentId: "g85wgf-2"
     })([ "position:absolute;box-shadow:none;z-index:1;" ]);
     // CONCATENATED MODULE: ./src/Table/HeadTable.tsx
-    function po() {
-        return po = Object.assign ? Object.assign.bind() : function(e) {
+    function oo() {
+        return oo = Object.assign ? Object.assign.bind() : function(e) {
             for (var n = 1; n < arguments.length; n++) {
                 var t = arguments[n];
                 for (var r in t) {
@@ -3159,11 +3045,11 @@
                 }
             }
             return e;
-        }, po.apply(null, arguments);
+        }, oo.apply(null, arguments);
     }
-    function mo(e, n) {
+    function io(e, n) {
         if (null == e) return {};
-        var t, r, o = bo(e, n);
+        var t, r, o = ao(e, n);
         if (Object.getOwnPropertySymbols) {
             var i = Object.getOwnPropertySymbols(e);
             for (r = 0; r < i.length; r++) {
@@ -3172,7 +3058,7 @@
         }
         return o;
     }
-    function bo(e, n) {
+    function ao(e, n) {
         if (null == e) return {};
         var t = {};
         for (var r in e) {
@@ -3183,7 +3069,7 @@
         }
         return t;
     }
-    var ho = {
+    var lo = {
         cellWidths: i().arrayOf(i().number).isRequired,
         dragIndex: i().number,
         elementRef: i().oneOfType([ i().func, i().object ]),
@@ -3204,13 +3090,13 @@
  * @private
  * HeadTable is an internal component that provides a detached table head that can
  * then be positioned in different ways outside of the main table.
- */    function yo(e) {
-        var n = e.cellWidths, o = e.elementRef, i = e.hasDragColumn, a = e.hasRowExpansion, l = e.hasRowSelection, u = e.headType, s = e.horizontalOffset, c = s === void 0 ? 0 : s, d = e.isFixedColumn, f = e.tableStyle, v = e.tableWidth, p = e.tHead, m = e.top, b = e.width, h = mo(e, [ "cellWidths", "elementRef", "hasDragColumn", "hasRowExpansion", "hasRowSelection", "headType", "horizontalOffset", "isFixedColumn", "tableStyle", "tableWidth", "tHead", "top", "width" ]);
+ */    function uo(e) {
+        var n = e.cellWidths, o = e.elementRef, i = e.hasDragColumn, a = e.hasRowExpansion, l = e.hasRowSelection, u = e.headType, s = e.horizontalOffset, c = s === void 0 ? 0 : s, d = e.isFixedColumn, f = e.tableStyle, v = e.tableWidth, p = e.tHead, b = e.top, m = e.width, h = io(e, [ "cellWidths", "elementRef", "hasDragColumn", "hasRowExpansion", "hasRowSelection", "headType", "horizontalOffset", "isFixedColumn", "tableStyle", "tableWidth", "tHead", "top", "width" ]);
         var y = u === "docked";
-        var w = y ? fo : vo;
+        var w = y ? to : ro;
         var C = (0, t.useRef)(null);
         var x = (0, t.useCallback)((function(e) {
-            H(C, e);
+            L(C, e);
         }), [ C ]);
         var S = 0;
         if (a) {
@@ -3234,7 +3120,7 @@
             return k.filter(t.isValidElement).map((function(e, r) {
                 
                 return (0, t.cloneElement)(e, {
-                    style: so()({}, e.props.style, {
+                    style: eo()({}, e.props.style, {
                         width: n[r + S]
                     })
                 });
@@ -3246,25 +3132,115 @@
         }, O);
         var E = (0, t.useMemo)((function() {
             return {
-                top: m,
-                width: b
+                top: b,
+                width: m
             };
-        }), [ m, b ]);
+        }), [ b, m ]);
         
         return r().createElement(w, {
             style: E,
             ref: o
-        },  r().createElement(co, po({
+        },  r().createElement(no, oo({
             "data-test": "".concat(u, "-head-table"),
             "data-fixed-column": d ? "true" : undefined,
-            style: so()({}, f, {
+            style: eo()({}, f, {
                 marginLeft: c,
                 width: d ? undefined : v
             })
         }, g()(h, "dragIndex")), R));
     }
-    yo.propTypes = ho;
-    /* harmony default export */    const go = yo;
+    uo.propTypes = lo;
+    /* harmony default export */    const so = uo;
+    // CONCATENATED MODULE: ./src/utils/getBoundingClientRect.ts
+    function co(e) {
+        "@babel/helpers - typeof";
+        return co = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
+            return typeof e;
+        } : function(e) {
+            return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e;
+        }, co(e);
+    }
+    function fo(e, n) {
+        var t = Object.keys(e);
+        if (Object.getOwnPropertySymbols) {
+            var r = Object.getOwnPropertySymbols(e);
+            n && (r = r.filter((function(n) {
+                return Object.getOwnPropertyDescriptor(e, n).enumerable;
+            }))), t.push.apply(t, r);
+        }
+        return t;
+    }
+    function vo(e) {
+        for (var n = 1; n < arguments.length; n++) {
+            var t = null != arguments[n] ? arguments[n] : {};
+            n % 2 ? fo(Object(t), !0).forEach((function(n) {
+                po(e, n, t[n]);
+            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : fo(Object(t)).forEach((function(n) {
+                Object.defineProperty(e, n, Object.getOwnPropertyDescriptor(t, n));
+            }));
+        }
+        return e;
+    }
+    function po(e, n, t) {
+        return (n = bo(n)) in e ? Object.defineProperty(e, n, {
+            value: t,
+            enumerable: !0,
+            configurable: !0,
+            writable: !0
+        }) : e[n] = t, e;
+    }
+    function bo(e) {
+        var n = mo(e, "string");
+        return "symbol" == co(n) ? n : n + "";
+    }
+    function mo(e, n) {
+        if ("object" != co(e) || !e) return e;
+        var t = e[Symbol.toPrimitive];
+        if (void 0 !== t) {
+            var r = t.call(e, n || "default");
+            if ("object" != co(r)) return r;
+            throw new TypeError("@@toPrimitive must return a primitive value.");
+        }
+        return ("string" === n ? String : Number)(e);
+    }
+    // Checks if browser is Safari
+        function ho() {
+        return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+    }
+    // Formats return value to DOMRect
+        function yo(e) {
+        return vo(vo({}, e), {}, {
+            top: e.y,
+            left: e.x,
+            right: e.x + e.width,
+            bottom: e.y + e.height
+        });
+    }
+    /**
+ * Provides DOMRect information about the size of an element and its position relative to the viewport.
+ * Accounts for Safari's use of visual viewport and adds offsets to set as layout viewport.
+ * @param {Element} element - The element to be evaluated
+ * @param {boolean} offsets - Use when position of element relative to the layout viewport offsets are needed for Safari.
+ * @returns {Omit<DOMRect, 'toJSON'>}
+ * @public
+ */    function go(e, n) {
+        var t, r;
+        var o = e.getBoundingClientRect();
+        var i = ho();
+        if (!n || !i) {
+            return o;
+        }
+        var a = Je();
+        var l = o.left + (((t = a.visualViewport) === null || t === void 0 ? void 0 : t.offsetLeft) || 0);
+        var u = o.top + (((r = a.visualViewport) === null || r === void 0 ? void 0 : r.offsetTop) || 0);
+        var s = o.width, c = o.height;
+        return yo({
+            width: s,
+            height: c,
+            x: l,
+            y: u
+        });
+    }
     // CONCATENATED MODULE: ./src/utils/types.ts
     // see https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31245 for details
     // regarding the css prop. certain (versions of) libraries included in the compilation
@@ -3305,7 +3281,7 @@
         if (Array.isArray(e)) return To(e);
     }
     function Ro(e, n) {
-        return Ao(e) || Do(e, n) || Io(e, n) || Eo();
+        return Do(e) || jo(e, n) || Io(e, n) || Eo();
     }
     function Eo() {
         throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
@@ -3324,7 +3300,7 @@
         }
         return r;
     }
-    function Do(e, n) {
+    function jo(e, n) {
         var t = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
         if (null != t) {
             var r, o, i, a, l = [], u = !0, s = !1;
@@ -3346,12 +3322,12 @@
             return l;
         }
     }
-    function Ao(e) {
+    function Do(e) {
         if (Array.isArray(e)) return e;
     }
-    function jo(e, n) {
+    function qo(e, n) {
         if (null == e) return {};
-        var t, r, o = qo(e, n);
+        var t, r, o = Ao(e, n);
         if (Object.getOwnPropertySymbols) {
             var i = Object.getOwnPropertySymbols(e);
             for (r = 0; r < i.length; r++) {
@@ -3360,7 +3336,7 @@
         }
         return o;
     }
-    function qo(e, n) {
+    function Ao(e, n) {
         if (null == e) return {};
         var t = {};
         for (var r in e) {
@@ -3375,7 +3351,7 @@
     // Internal Helper Modules
     /** @public */
     /** @public */
-    /** @public */    var zo = {
+    /** @public */    var Po = {
         actions: i().arrayOf(i().element),
         actionsColumnWidth: i().number,
         children: i().node,
@@ -3397,18 +3373,18 @@
         onRequestResizeColumn: i().func,
         resizableFillLayout: i().bool
     };
-    var Po = function e(n) {
+    var _o = function e(n) {
         return n === "inline";
     };
-    var _o = function e(n) {
+    var zo = function e(n) {
         return n === "docked";
     };
     var Mo = function e(n) {
         return n === "fixed";
     };
     var $o = function e(n) {
-        var t = Qe();
-        var r = n.getBoundingClientRect();
+        var t = Je();
+        var r = go(n);
         return {
             top: r.top + t.pageYOffset,
             left: r.left + t.pageXOffset
@@ -3437,15 +3413,20 @@
         }
         return undefined;
     };
+    var Wo = function e(n, t) {
+        return n.indexOf(t) + 1;
+    };
     var Lo = function e(n, t) {
         return n.indexOf(t) + 1;
     };
     var Ho = {
         coordinateGetter: l.sortableKeyboardCoordinates
     };
-    var Wo = [ u.restrictToParentElement ];
     var Ko = {
-        draggable: (0, D._)("To pick up a sortable row, press space or enter.\n        Use the up and down arrow keys to update the position of the row.\n        Press space or enter again to drop the row in its new position, or press escape to cancel.")
+        draggable: (0, D._)("To pick up a sortable row, press space or enter.\n            Use the up and down arrow keys to update the position of the row.\n            Press space or enter again to drop the row in its new position, or press escape to cancel.")
+    };
+    var Bo = {
+        draggable: (0, D._)("To pick up a sortable column, press space or enter.\n            Use the left and right arrow keys to update the position of the column.\n            Press space or enter again to drop the column in its new position, or press escape to cancel.")
     };
     /**
  * @private
@@ -3456,7 +3437,7 @@
  * @param {String} headFocusState.target - Focus can be applied to a 'headCell' or a
  * 'resizeButton'.
  * @param {Number} headFocusState.index - The index of the element to set focus on.
- */    function Bo(e, n) {
+ */    function Vo(e, n) {
         var t, r;
         var o = n.target, i = n.index;
         if (false) {}
@@ -3473,140 +3454,145 @@
         passive: false,
         capture: true
     };
-    var Vo = [];
-    function Uo(e) {
-        var n = e.actions, o = n === void 0 ? Vo : n, i = e.actionsColumnWidth, u = e.children, s = e.dockOffset, d = s === void 0 ? 0 : s, v = e.dockScrollBar, p = e.elementRef, m = e.headType, h = m === void 0 ? "inline" : m, y = e.innerStyle, w = e.onRequestMoveColumn, x = e.onRequestMoveRow, k = e.onRequestResizeColumn, I = e.onRequestToggleAllRows, D = e.onScroll, j = e.outerStyle, q = e.primaryColumnIndex, z = q === void 0 ? 0 : q, P = e.resizableFillLayout, _ = e.rowExpansion, M = _ === void 0 ? "none" : _, $ = e.rowSelection, N = $ === void 0 ? "none" : $, L = e.stripeRows, W = e.tableStyle, K = jo(e, [ "actions", "actionsColumnWidth", "children", "dockOffset", "dockScrollBar", "elementRef", "headType", "innerStyle", "onRequestMoveColumn", "onRequestMoveRow", "onRequestResizeColumn", "onRequestToggleAllRows", "onScroll", "outerStyle", "primaryColumnIndex", "resizableFillLayout", "rowExpansion", "rowSelection", "stripeRows", "tableStyle" ]);
+    var Uo = [];
+    function Xo(e) {
+        var n = e.actions, o = n === void 0 ? Uo : n, i = e.actionsColumnWidth, s = e.children, d = e.dockOffset, v = d === void 0 ? 0 : d, p = e.dockScrollBar, b = e.elementRef, h = e.headType, y = h === void 0 ? "inline" : h, w = e.innerStyle, x = e.onRequestMoveColumn, k = e.onRequestMoveRow, T = e.onRequestResizeColumn, A = e.onRequestToggleAllRows, P = e.onScroll, _ = e.outerStyle, z = e.primaryColumnIndex, M = z === void 0 ? 0 : z, $ = e.resizableFillLayout, N = e.rowExpansion, W = N === void 0 ? "none" : N, H = e.rowSelection, K = H === void 0 ? "none" : H, B = e.stripeRows, V = e.tableStyle, F = qo(e, [ "actions", "actionsColumnWidth", "children", "dockOffset", "dockScrollBar", "elementRef", "headType", "innerStyle", "onRequestMoveColumn", "onRequestMoveRow", "onRequestResizeColumn", "onRequestToggleAllRows", "onScroll", "outerStyle", "primaryColumnIndex", "resizableFillLayout", "rowExpansion", "rowSelection", "stripeRows", "tableStyle" ]);
  // @docs-props-type TablePropsBase
-                var B = (0, t.useState)([]), F = Ro(B, 2), V = F[0], U = F[1];
-        var X = (0, t.useState)(), G = Ro(X, 2), Y = G[0], J = G[1];
-        var Q = (0, t.useState)(), Z = Ro(Q, 2), ie = Z[0], ae = Z[1];
-        var le = (0, t.useState)(), ue = Ro(le, 2), se = ue[0], ce = ue[1];
-        var de = (0, t.useState)(), fe = Ro(de, 2), ve = fe[0], pe = fe[1];
-        var me = (0, t.useRef)();
-        var be = (0, t.useRef)();
-        var he = (0, t.useState)(), ye = Ro(he, 2), ge = ye[0], we = ye[1];
-        var Ce = (0, t.useRef)(true);
-        var xe = (0, t.useContext)(E.ScrollContainerContext);
-        var Se = (0, a.useSensors)((0, a.useSensor)(a.MouseSensor, {}), (0, a.useSensor)(a.TouchSensor, {}), (0, 
-        a.useSensor)(lo, Ho));
-        var ke = (0, t.useRef)(null);
-        var Oe = (0, t.useRef)(null);
-        var Re = (0, t.useRef)();
-        var Ee = (0, t.useRef)(null);
-        var Ie = (0, t.useRef)();
-        var Te = (0, t.useRef)(null);
-        var De = (0, t.useRef)(null);
-        var Ae = T()(h);
-        var je = [];
-        var qe = [];
-        var ze = (0, t.useCallback)((function() {
+                var U = (0, t.useState)([]), X = Ro(U, 2), Y = X[0], G = X[1];
+        var J = (0, t.useState)(), Q = Ro(J, 2), Z = Q[0], ie = Q[1];
+        var ue = (0, t.useState)(), se = Ro(ue, 2), ce = se[0], de = se[1];
+        var fe = (0, t.useState)(), ve = Ro(fe, 2), pe = ve[0], be = ve[1];
+        var me = (0, t.useState)(), he = Ro(me, 2), ye = he[0], ge = he[1];
+        var we = (0, t.useRef)(true);
+        var Ce = (0, t.useContext)(I.ScrollContainerContext);
+        var xe = (0, a.useSensors)((0, a.useSensor)(a.MouseSensor, {}), (0, a.useSensor)(a.TouchSensor, {}), (0, 
+        a.useSensor)(Qr, Ho));
+        var Se = (0, t.useState)([]), ke = Ro(Se, 2), Oe = ke[0], Re = ke[1];
+        var Ee = (0, t.useState)(-1), Ie = Ro(Ee, 2), Te = Ie[0], je = Ie[1];
+        var De = (0, t.useRef)();
+        var qe = (0, t.useRef)();
+        var Ae = (0, t.useState)(), Pe = Ro(Ae, 2), _e = Pe[0], ze = Pe[1];
+        var Me = (0, t.useRef)(null);
+        var $e = (0, t.useRef)(null);
+        var Ne = (0, t.useRef)();
+        var We = (0, t.useRef)(null);
+        var Le = (0, t.useRef)();
+        var He = (0, t.useRef)(null);
+        var Ke = (0, t.useRef)(null);
+        var Be = j()(y);
+        var Ve = [];
+        var Fe = [];
+        var Ue = [];
+        var Xe = [];
+        var Ge = (0, t.useCallback)((function() {
             var e;
-            var n = Qe();
-            if (Po(h)) {
+            var n = Je();
+            if (_o(y)) {
                 return;
             }
-            var t = De.current;
-            var r = Oe.current;
-            var o = Te.current;
+            var t = Ke.current;
+            var r = $e.current;
+            var o = He.current;
             if (!o || !r) {
                 return;
             }
-            var i = or(Oe.current);
-            var a = (e = Oe.current) === null || e === void 0 ? void 0 : e.clientHeight;
+            var i = Yt($e.current);
+            var a = (e = $e.current) === null || e === void 0 ? void 0 : e.clientHeight;
             var l = $o(o).top - n.pageYOffset - (a || 0) + o.offsetHeight;
-            var u = Math.min(l, Number(d));
-            pe(t === null || t === void 0 ? void 0 : t.clientWidth);
-            ae(o === null || o === void 0 ? void 0 : o.clientWidth);
-            U(i);
-            ce(u);
-        }), [ d, h ]);
+            var u = Math.min(l, Number(v));
+            ge(t === null || t === void 0 ? void 0 : t.clientWidth);
+            de(o === null || o === void 0 ? void 0 : o.clientWidth);
+            G(i);
+            be(u);
+        }), [ v, y ]);
         (0, t.useEffect)((function() {
-            var e = Oe.current;
-            var n = Ee.current;
+            var e = $e.current;
+            var n = We.current;
             if (e && n) {
-                var t = or(Oe.current);
-                if (!b()(V, t)) {
-                    ze();
+                var t = Yt($e.current);
+                if (!m()(Y, t)) {
+                    Ge();
                 }
             }
-            if (Ae === "inline" && h === "inline") {
-                ze();
+            if (Be === "inline" && y === "inline") {
+                Ge();
             }
             if (false) {}
-        }), [ V, h, Ae, e, ze ]);
-        var Pe = (0, t.useCallback)((function(e) {
-            var n = De.current;
-            D === null || D === void 0 ? void 0 : D(e);
-            if ((Mo(h) || _o(h)) && n) {
-                J(-n.scrollLeft);
-            }
-            if (ke.current && Ie.current !== "dockedScrollBar" && n) {
-                Ie.current = "container";
-                ke.current.scrollLeft = n.scrollLeft;
+        }), [ Y, y, Be, e, Ge ]);
+        var Qe = (0, t.useCallback)((function(e) {
+            var n = Ke.current;
+            P === null || P === void 0 ? void 0 : P(e);
+            if ((Mo(y) || zo(y)) && n) {
+                ie(-n.scrollLeft);
+            }
+            if (Me.current && Le.current !== "dockedScrollBar" && n) {
+                Le.current = "container";
+                Me.current.scrollLeft = n.scrollLeft;
             } else {
-                Ie.current = undefined;
-            }
-        }), [ h, D ]);
-        var _e = function e() {
-            var n = De.current;
-            if (Ie.current !== "container" && n && ke.current) {
-                Ie.current = "dockedScrollBar";
-                n.scrollLeft = ke.current.scrollLeft;
+                Le.current = undefined;
+            }
+        }), [ y, P ]);
+        var Ze = function e() {
+            var n = Ke.current;
+            if (Le.current !== "container" && n && Me.current) {
+                Le.current = "dockedScrollBar";
+                n.scrollLeft = Me.current.scrollLeft;
             } else {
-                Ie.current = undefined;
+                Le.current = undefined;
             }
         };
-        var Me = C()(ze, 0);
-        var $e = C()(ze, 50);
+        var en = C()(Ge, 0);
+        var nn = C()(Ge, 50);
+        O()(Ke, nn);
         (0, t.useEffect)((function() {
             // Using the return value of useCallback to recreate componentWillUnmount
             return function() {
-                Me.cancel();
-                $e.cancel();
+                en.cancel();
+                nn.cancel();
             };
         }));
-        var Ne = function e(n) {
+        var tn = function e(n) {
             return function(e) {
-                Oe.current = e;
-                H(n.props.elementRef, e);
+                $e.current = e;
+                L(n.props.elementRef, e);
             };
         };
-        var Le = function e(n) {
+        var rn = function e(n) {
             if (n) {
                 // On mount, focus the applicable docked head cell if a primary head cell was focused.
-                if (Re.current) {
-                    Bo(Ee.current, Re.current);
-                    Re.current = undefined;
+                if (Ne.current) {
+                    Vo(We.current, Ne.current);
+                    Ne.current = undefined;
                 }
             } else {
                 // On unmount, focus the applicable primary head cell if a docked head cell was focused.
-                var t = No(Ee.current);
+                var t = No(We.current);
                 if (t) {
-                    Bo(Oe.current, t);
+                    Vo($e.current, t);
                 }
             }
-            Ee.current = n;
+            We.current = n;
         };
-        var He = function e(n) {
-            var t = De.current;
-            if (!Ee.current || !t || (0, R.keycode)(n.nativeEvent) !== "tab") {
+        var on = function e(n) {
+            var t = Ke.current;
+            if (!We.current || !t || (0, E.keycode)(n.nativeEvent) !== "tab") {
                 return;
             }
-            var r = Ee.current.scrollLeft;
+            var r = We.current.scrollLeft;
             if (r !== 0) {
-                Ee.current.scrollLeft = 0;
+                We.current.scrollLeft = 0;
                 t.scrollLeft += r;
             }
         };
-        var We = function e(n, t) {
+        var an = function e(n, t) {
             var r, o;
             var i = t.index, a = t.columnId;
             var l = Ye();
             if (i === undefined) {
                 return;
             }
-            var u = M === "none" ? 1 : 2;
-            var s = (r = De.current) === null || r === void 0 ? void 0 : r.querySelectorAll("thead th:nth-child(".concat(i + u, "), tbody td:nth-child(").concat(i + u, ")"));
+            var u = W === "none" ? 1 : 2;
+            var s = (r = Ke.current) === null || r === void 0 ? void 0 : r.querySelectorAll("thead th:nth-child(".concat(i + u, "), tbody td:nth-child(").concat(i + u, ")"));
             var d = l.createElement("div");
             // TODO: find a styled-components compliant way to do this
                         d.style["float"] = "left";
@@ -3623,262 +3609,259 @@
                 d.appendChild(n);
             }));
             l.body.appendChild(d);
-            k === null || k === void 0 ? void 0 : k(n, {
+            T === null || T === void 0 ? void 0 : T(n, {
                 index: i,
                 columnId: a,
                 width: d.clientWidth + 1
             });
             (o = d.parentNode) === null || o === void 0 ? void 0 : o.removeChild(d);
         };
-        var Ke = (0, t.useCallback)((function(e) {
-            be.current = e;
-        }), [ be ]);
-        var Be = C()(Ke, 100, {
-            trailing: false
-        });
-        var Fe = (0, t.useCallback)((function() {
-            var e, n;
-            if (!Oe.current || !be.current) return -1;
-            var t = !!x;
-            var r = M !== "none";
-            var o = Array.from((e = (n = Oe.current.firstElementChild) === null || n === void 0 ? void 0 : n.children) !== null && e !== void 0 ? e : []).slice(r ? 1 : 0).slice(t ? 1 : 0).slice(I ? 1 : 0);
-            if (o.length === 0) return -1;
-            var i = o.findIndex((function(e) {
-                var n = e.getBoundingClientRect();
-                return be.current !== undefined && be.current > n.left && be.current < n.right;
-            }));
-            if (i === -1) {
-                var a;
-                // must be too far left or right
-                                var l = (a = Oe.current) === null || a === void 0 ? void 0 : a.getBoundingClientRect();
-                return be.current && l && be.current < l.left ? 0 : o.length;
-            }
-            if (me.current !== undefined && i > me.current) {
-                return i + 1;
-            }
-            return i;
-        }), [ x, M, I ]);
-        var Ve = C()((function() {
-            var e = Fe();
-            we((function(n) {
-                return n === e ? n : e;
-            }));
-        }), 100);
-        var Ue = function e(n) {
-            n.preventDefault();
- // necessary for the drop event to fire
-                        if (n.dataTransfer) {
-                n.dataTransfer.dropEffect = "move";
-            }
-            Be(n.clientX);
-            Ve();
-        };
-        var Xe = function e(n) {
-            n.preventDefault();
- // necessary for the drop event to fire
-                        be.current = n.clientX;
-        };
-        var Ge = function e(n) {
-            n.preventDefault();
- // necessary to prevent cell from animating to original position;
-                };
-        var Je = function e() {
-            var n = me.current !== undefined && me.current < Fe() ? Fe() - 1 : Fe();
-            if (me.current !== undefined && me.current !== n) {
-                w === null || w === void 0 ? void 0 : w({
-                    fromIndex: me.current,
-                    toIndex: n,
-                    columnId: me.current
-                });
+        var ln = (0, t.useCallback)((function(e) {
+            var n = e.active;
+            var t = n.id;
+            De.current = Xe.indexOf(t);
+            ze(t);
+        }), [ Xe ]);
+        var un = (0, t.useCallback)((function(e) {
+            if (e.over) {
+                var n = e.over.id;
+                var t = Xe.indexOf(n);
+                var r = t;
+                if (De.current !== undefined && t > De.current) {
+                    r = t + 1;
+                }
+                je(r);
+            } else {
+                je(-1);
             }
-            be.current = undefined;
-            we(undefined);
-            // eslint-disable-next-line @typescript-eslint/no-use-before-define
-                        Ze();
-        };
-        var Ze = function e() {
-            var n = Qe();
-            n.removeEventListener("dragenter", Xe);
-            n.removeEventListener("dragover", Ue);
-            n.removeEventListener("drop", Ge);
-            n.removeEventListener("dragend", Je);
-            Be.cancel();
- // cancel throttle
-                };
+        }), [ Xe ]);
+        // these are useMemo rather than useCallback so that ESLint can correctly analyze the dependencies
+        // see https://github.com/facebook/react/issues/19240#issuecomment-652945246
+                var sn = (0, t.useMemo)((function() {
+            return C()(un, 100);
+        }), [ un ]);
         (0, t.useEffect)((function() {
-            // Using the return value of useCallback to recreate componentWillUnmount
             return function() {
-                Ze();
+                sn.cancel();
             };
-            // The warning can be safely ignored here, as we intend for the component to run only once when it unmounts,
-            // rather than rerunning whenever dependencies change.
-            // eslint-disable-next-line react-hooks/exhaustive-deps
-                }), []);
-        var en = function e(n) {
-            var t = n.dragIndex;
-            var r = Qe();
-            me.current = t;
-            r.addEventListener("dragenter", Xe);
-            r.addEventListener("dragover", Ue);
-            r.addEventListener("drop", Ge);
-            r.addEventListener("dragend", Je);
-        };
-        var nn = (0, t.useCallback)((function(e) {
+        }), [ sn ]);
+        var cn = (0, t.useCallback)((function(e) {
             var n = e.active, t = e.over;
-            Ce.current = true;
             if (t && n.id !== t.id) {
-                var r;
-                var o = qe.indexOf(n.id);
-                var i = qe.indexOf(t === null || t === void 0 ? void 0 : t.id);
-                var a = (r = je[o]) === null || r === void 0 ? void 0 : r.props.dataId;
+                var r = Xe.indexOf(n.id);
+                var o = Xe.indexOf(t === null || t === void 0 ? void 0 : t.id);
                 x === null || x === void 0 ? void 0 : x({
-                    fromIndex: o,
-                    toIndex: i,
-                    dataId: a
+                    fromIndex: r,
+                    toIndex: o
                 });
             }
-        }), [ qe, x, je ]);
-        var tn = (0, t.useCallback)((function() {
-            Ce.current = true;
+            ze(undefined);
+            je(-1);
+            qe.current = undefined;
+            De.current = undefined;
+        }), [ Xe, x ]);
+        var dn = (0, t.useCallback)((function(e) {
+            var n = e.active, t = e.over;
+            we.current = true;
+            if (t && n.id !== t.id) {
+                var r = Fe.indexOf(n.id);
+                var o = Fe.indexOf(t === null || t === void 0 ? void 0 : t.id);
+                k === null || k === void 0 ? void 0 : k({
+                    fromIndex: r,
+                    toIndex: o
+                });
+            }
+        }), [ Fe, k ]);
+        var fn = (0, t.useCallback)((function() {
+            we.current = true;
         }), []);
-        var rn = function e(n) {
-            var r = t.Children.toArray(n.props.children).filter(t.isValidElement);
+        var vn = (0, t.useRef)({});
+        var pn = function e(n) {
+            var r = t.Children.toArray(n.props.children).filter(t.isValidElement).map((function(e, n) {
+                var r = e;
+                var o = r.key || (0, R.createDOMID)("col-");
+                o = String(o);
+                // `col-` prefix is necessary to distinguish row or column reordering.
+                // Append the `col-` prefix if is missing from dragId
+                                if (!o.startsWith("col-")) {
+                    o = "col-".concat(o);
+                }
+                Ue.push(r);
+                Xe.push(o);
+                
+                return (0, t.cloneElement)(r, {
+                    index: n,
+                    dragId: o,
+                    elementRef: function e(n) {
+                        vn.current[o] = n;
+                        L(r.props.elementRef, n);
+                    }
+                });
+            }));
             var a = o === null || o === void 0 ? void 0 : o.filter(t.isValidElement);
             var l =  (0, t.cloneElement)(n, {
                 actions: a,
                 actionsColumnWidth: i,
-                guidelineIndex: ge,
-                hasInfoColumn: M !== "none",
-                hasDragColumn: !!x,
-                onAutosizeColumn: We,
-                onDragStart: w ? en : undefined,
-                onRequestMoveColumn: w,
-                onRequestResizeColumn: k,
-                onRequestToggleAllRows: I,
-                elementRef: Ne(n),
-                rowSelection: N
+                hasInfoColumn: W !== "none",
+                hasDragColumn: !!k,
+                onAutosizeColumn: an,
+                onRequestMoveColumn: x,
+                onRequestResizeColumn: T,
+                onRequestToggleAllRows: A,
+                elementRef: tn(n),
+                rowSelection: K
             }, r);
             return l;
         };
-        var on = function e(n) {
+        var bn = (0, t.useMemo)((function() {
+            var e, n;
+            if (Te === -1 || !$e.current || !Ke.current) return null;
+            var t = !!k;
+            var o = W !== "none";
+            var i = Array.from((e = (n = $e.current.firstElementChild) === null || n === void 0 ? void 0 : n.children) !== null && e !== void 0 ? e : []).slice(o ? 1 : 0).slice(t ? 1 : 0).slice(A ? 1 : 0);
+            var a;
+            if (Te === 0) {
+                var l;
+                a = ((l = i[0]) === null || l === void 0 ? void 0 : l.offsetLeft) || 0;
+            } else if (Te >= i.length) {
+                var u = i[i.length - 1];
+                a = ((u === null || u === void 0 ? void 0 : u.offsetLeft) || 0) + ((u === null || u === void 0 ? void 0 : u.offsetWidth) || 0) - 1;
+ // -1 makes the last guideline visible
+                        } else {
+                var s;
+                a = ((s = i[Te]) === null || s === void 0 ? void 0 : s.offsetLeft) || 0;
+            }
+            
+            return r().createElement(le, {
+                $height: Ke.current.clientHeight,
+                $left: a
+            });
+        }), [ Te, k, W, A ]);
+        var mn = function e(n) {
             var r = (o === null || o === void 0 ? void 0 : o.filter(t.isValidElement).length) > 0;
             var a = false;
             t.Children.toArray(n === null || n === void 0 ? void 0 : n.props.children).filter(t.isValidElement).forEach((function(e, n) {
-                var r, o, i;
-                var l = e.key || ((r = e.props) === null || r === void 0 ? void 0 : r.dataId) || n + 1;
-                if (((o = e.props) === null || o === void 0 ? void 0 : o.actionPrimary) || ((i = e.props) === null || i === void 0 ? void 0 : i.actionsSecondary)) {
+                var r, o;
+                if (((r = e.props) === null || r === void 0 ? void 0 : r.actionPrimary) || ((o = e.props) === null || o === void 0 ? void 0 : o.actionsSecondary)) {
                     a = true;
                 }
-                je.push( (0, t.cloneElement)(e, {
+                var i = e.key || (0, R.createDOMID)("row-");
+                i = String(i);
+                // `row-` prefix is necessary to distinguish row or column reordering.
+                // Append the `row-` prefix if is missing from dragId
+                                if (!i.startsWith("row-")) {
+                    i = "row-".concat(i);
+                }
+                Ve.push( (0, t.cloneElement)(e, {
                     index: n,
-                    dataId: l
+                    dragId: i
                 }));
-                qe.push(l);
+                Fe.push(i);
             }));
             var l = r || a || !!i;
             
             return (0, t.cloneElement)(n, {
                 actions: l,
-                movableColumns: !!w,
-                onRequestMoveRow: x,
-                primaryColumnIndex: z,
-                rowExpansion: M,
-                stripeRows: L
-            }, je);
+                movableColumns: !!x,
+                onRequestMoveRow: k,
+                primaryColumnIndex: M,
+                rowExpansion: W,
+                stripeRows: B
+            }, Ve);
         };
-        var an = function e() {
-            var n = De.current;
-            var t = Qe();
-            if (!_o(h) || !Te.current || !Oe.current || !n) {
+        var hn = function e() {
+            var n = Ke.current;
+            var t = Je();
+            if (!zo(y) || !He.current || !$e.current || !n) {
                 return false;
             }
             var r = $o(n).top;
-            return t.pageYOffset >= r - (d || 0);
+            return t.pageYOffset >= r - (v || 0);
         };
-        var ln = function e() {
-            var n = Qe();
-            var t = De.current;
-            if (!v || !Te.current || !t) {
+        var yn = function e() {
+            var n = Je();
+            var t = Ke.current;
+            if (!p || !He.current || !t) {
                 return false;
             }
-            var r = t.getBoundingClientRect();
+            var r = go(t);
             return r.bottom > n.innerHeight && r.top < n.innerHeight;
         };
-        var un = function e(n, o) {
-            if (an()) {
+        var gn = function e(n, o) {
+            if (hn()) {
                 // FIXME: handle inline
                 // Save the current head focus state so that it can be applied to the docked version
                 // after the `HeadTable` mounts.
-                Re.current = No(Oe.current);
-                if (V === undefined || ie === undefined || se === undefined || ve === undefined) {
+                Ne.current = No($e.current);
+                if (Y === undefined || ce === undefined || pe === undefined || ye === undefined) {
                     return false;
                 }
                 var i =  (0, t.cloneElement)(n);
                 
-                return r().createElement(go, {
+                return r().createElement(so, {
                     headType: "docked",
                     tHead: i,
-                    cellWidths: V,
-                    horizontalOffset: Y,
-                    tableWidth: ie,
-                    top: se,
-                    width: ve,
-                    tableStyle: W,
+                    cellWidths: Y,
+                    horizontalOffset: Z,
+                    tableWidth: ce,
+                    top: pe,
+                    width: ye,
+                    tableStyle: V,
                     isFixedColumn: o,
-                    onKeyUp: He,
-                    elementRef: Le,
-                    hasDragColumn: !!x,
-                    hasRowExpansion: M !== "none",
-                    hasRowSelection: !!I
+                    onKeyUp: on,
+                    elementRef: rn,
+                    hasDragColumn: !!k,
+                    hasRowExpansion: W !== "none",
+                    hasRowSelection: !!A
                 });
             }
             return false;
         };
-        var sn = (0, t.useMemo)((function() {
-            var e, n, t, r;
-            if (!ke.current || !Oe.current || !Te.current) {
+        var wn = (0, t.useMemo)((function() {
+            var e, n, t;
+            if (!Me.current || !$e.current || !He.current) {
                 return 0;
             }
-            var o = Qe();
-            var i = (e = (n = Te.current) === null || n === void 0 ? void 0 : n.getBoundingClientRect().top) !== null && e !== void 0 ? e : 0;
-            var a = (t = (r = Oe.current) === null || r === void 0 ? void 0 : r.offsetHeight) !== null && t !== void 0 ? t : 0;
-            var l = o.innerHeight - i - a;
-            return Math.min(l - ke.current.offsetHeight, 0);
+            var r = Je();
+            var o = (e = go(He.current).top) !== null && e !== void 0 ? e : 0;
+            var i = (n = (t = $e.current) === null || t === void 0 ? void 0 : t.offsetHeight) !== null && n !== void 0 ? n : 0;
+            var a = r.innerHeight - o - i;
+            return Math.min(a - Me.current.offsetHeight, 0);
         }), []);
-        var cn = (0, t.useMemo)((function() {
+        var Cn = (0, t.useMemo)((function() {
             return {
-                width: ve,
-                marginBottom: sn
+                width: ye,
+                marginBottom: wn
             };
-        }), [ ve, sn ]);
-        var dn = (0, t.useMemo)((function() {
+        }), [ ye, wn ]);
+        var xn = (0, t.useMemo)((function() {
             return {
-                width: ie
+                width: ce
             };
-        }), [ ie ]);
-        var fn = function e() {
-            if (!ln()) {
+        }), [ ce ]);
+        var Sn = function e() {
+            if (!yn()) {
                 return false;
             }
             
             return r().createElement(re, {
-                style: cn,
-                onScroll: _e,
+                style: Cn,
+                onScroll: Ze,
                 "data-test": "docked-scroll-bar",
-                ref: ke
+                ref: Me
             },  r().createElement(oe, {
-                style: dn,
+                style: xn,
                 "data-test": "docked-scroll-content"
             }));
         };
-        var vn = function e() {
-            var n = Oe.current;
-            var t = De.current;
+        var kn = function e() {
+            var n = $e.current;
+            var t = Ke.current;
             /**
      * there is slightly less space for the table than tableContainer's width,
      * because there is a 1 px border added to every column but the first
      */            if (n) {
-                var r = or(Oe.current);
+                var r = Yt($e.current);
                 var o = r === null || r === void 0 ? void 0 : r.length;
                 var i = t === null || t === void 0 ? void 0 : t.clientWidth;
                 if (i != null) {
@@ -3888,137 +3871,300 @@
             }
             return null;
         };
-        var pn;
-        var mn;
-        var bn;
-        var hn = !!k;
-        t.Children.toArray(u).forEach((function(e) {
+        var On;
+        var Rn;
+        var En;
+        var In = !!T;
+        t.Children.toArray(s).forEach((function(e) {
             var n = e.type.splunkUiType;
             if (n === "Table.Head") {
-                pn = rn(e);
-                if (!hn) {
+                On = pn(e);
+                if (!In) {
                     // if all the HeadCells are fixed width, then the table is fixed.
-                    hn = !t.Children.toArray(e.props.children).filter(t.isValidElement).some((function(e) {
+                    In = !t.Children.toArray(e.props.children).filter(t.isValidElement).some((function(e) {
                         return !f()(e.props, "width");
                     }));
                 }
             } else if (n === "Table.Body") {
-                mn = on(e);
+                Rn = mn(e);
             } else if (n === "Table.Caption") {
                 // the html spec mandates that a caption must be the first table child.
                 // catch the caption here so that it can be placed first later. note: a
                 // caption can be placed on the bottom side of a table by adjusting the
                 // caption's side prop.
-                bn = e;
+                En = e;
             }
         }));
-        wo(pn, "A Table.Head is required.");
-        var yn = un(pn, hn);
+        wo(On, "A Table.Head is required.");
+        var Tn = gn(On, In);
         // When a `headTable` is used, suppress focus interactions in the primary `Head`. Focus
         // interactions will be handled by the overlaid `headTable` instead.
-                var gn = t.Children.toArray(pn.props.children).filter(t.isValidElement).map((function(e) {
+                var jn = t.Children.toArray(On.props.children).filter(t.isValidElement).map((function(e) {
             
             // TS: onClick is different for regular/dropdown head cells, that's ok
             return (0, t.cloneElement)(e, {
-                visible: !yn
+                visible: !Tn
             });
         }));
-        pn =  (0, t.cloneElement)(pn, {}, gn);
-        var wn = xe || Qe();
-        var Cn = Mo(h) ? De.current : wn;
-        if (P) {
-            hn = false;
-        }
-        var Sn = vn();
-        var kn = (0, t.useMemo)((function() {
+        On =  (0, t.cloneElement)(On, {}, jn);
+        var Dn = Ce || Je();
+        var qn = Mo(y) ? Ke.current : Dn;
+        if ($) {
+            In = false;
+        }
+        var An = kn();
+        var Pn = (0, t.useMemo)((function() {
             return {
-                headType: h,
-                resizableFillLayout: P,
-                tableContainerWidthWithoutBorders: Sn
+                headType: y,
+                resizableFillLayout: $,
+                tableContainerWidthWithoutBorders: An
             };
-        }), [ h, P, Sn ]);
-        var On = (0, t.useMemo)((function() {
+        }), [ y, $, An ]);
+        var _n = (0, t.useMemo)((function() {
+            if (!k) {
+                return {
+                    onDragStart: function e() {
+                        return undefined;
+                    },
+                    onDragOver: function e() {
+                        return undefined;
+                    },
+                    onDragEnd: function e() {
+                        return undefined;
+                    },
+                    onDragCancel: function e() {
+                        return undefined;
+                    }
+                };
+            }
             return {
                 onDragStart: function e(n) {
                     var t = n.active.id;
-                    return (0, A.sprintf)("Picked up sortable row in position %d of %d.", Lo(qe, t), qe.length);
+                    if (t === undefined) {
+                        return undefined;
+                    }
+                    var r = Wo(Fe, t);
+                    return typeof r === "number" ? (0, q.sprintf)((0, D._)("Picked up sortable row in position %(pos)d of %(total)d."), {
+                        pos: r,
+                        total: Fe.length
+                    }) : undefined;
                 },
                 onDragOver: function e(n) {
                     var t = n.active, r = n.over;
-                    // In this specific use-case, the picked up item's `id` is always the same as the first `over` id.
-                    // The first `onDragOver` event therefore doesn't need to be announced, because it is called
-                    // immediately after the `onDragStart` announcement and is redundant.
-                                        if (Ce.current) {
-                        Ce.current = false;
+                    if (we.current) {
+                        we.current = false;
+                        return undefined;
+                    }
+                    if (!t.id || !(r === null || r === void 0 ? void 0 : r.id)) {
                         return undefined;
                     }
-                    return r ? (0, A.sprintf)("Row moved from position %d to position %d of %d.", Lo(qe, t.id), Lo(qe, r.id), qe.length) : undefined;
+                    var o = Wo(Fe, t.id);
+                    var i = Wo(Fe, r.id);
+                    return (0, q.sprintf)((0, D._)("Row moved from position %(from)d to position %(to)d of %(total)d."), {
+                        from: o,
+                        to: i,
+                        total: Fe.length
+                    });
+                },
+                onDragEnd: function e(n) {
+                    var t = n.over;
+                    if (!(t === null || t === void 0 ? void 0 : t.id)) {
+                        return undefined;
+                    }
+                    var r = Wo(Fe, t.id);
+                    return typeof r === "number" ? (0, q.sprintf)((0, D._)("Row dropped at position %(pos)d of %(total)d."), {
+                        pos: r,
+                        total: Fe.length
+                    }) : undefined;
+                },
+                onDragCancel: function e(n) {
+                    var t = n.active.id;
+                    if (t === undefined) {
+                        return undefined;
+                    }
+                    var r = Wo(Fe, t);
+                    return typeof r === "number" ? (0, q.sprintf)((0, D._)("Row returned to its starting position of %(pos)d."), {
+                        pos: r
+                    }) : undefined;
+                }
+            };
+        }), [ Fe, k ]);
+        var zn = (0, t.useMemo)((function() {
+            if (!x) {
+                return {
+                    onDragStart: function e() {
+                        return undefined;
+                    },
+                    onDragOver: function e() {
+                        return undefined;
+                    },
+                    onDragEnd: function e() {
+                        return undefined;
+                    },
+                    onDragCancel: function e() {
+                        return undefined;
+                    }
+                };
+            }
+            return {
+                onDragStart: function e(n) {
+                    var t = n.active.id;
+                    if (t === undefined) {
+                        return undefined;
+                    }
+                    var r = Lo(Xe, t);
+                    return typeof r === "number" ? (0, q.sprintf)((0, D._)("Picked up sortable column in position %(pos)d of %(total)d."), {
+                        pos: r,
+                        total: Xe.length
+                    }) : undefined;
+                },
+                onDragOver: function e(n) {
+                    var t = n.active, r = n.over;
+                    if (we.current) {
+                        we.current = false;
+                        return undefined;
+                    }
+                    if (!t.id || !(r === null || r === void 0 ? void 0 : r.id)) {
+                        return undefined;
+                    }
+                    var o = Lo(Xe, t.id);
+                    var i = Lo(Xe, r.id);
+                    if (typeof o !== "number" || typeof i !== "number") return undefined;
+                    return (0, q.sprintf)((0, D._)("Column moved from position %(from)d to position %(to)d of %(total)d."), {
+                        from: o,
+                        to: i,
+                        total: Xe.length
+                    });
                 },
                 onDragEnd: function e(n) {
                     var t = n.over;
-                    return t ? (0, A.sprintf)("Row dropped at position %d of %d.", Lo(qe, t.id), qe.length) : undefined;
+                    if (!(t === null || t === void 0 ? void 0 : t.id)) {
+                        return undefined;
+                    }
+                    var r = Lo(Xe, t.id);
+                    return typeof r === "number" ? (0, q.sprintf)((0, D._)("Column dropped at position %(pos)d of %(total)d."), {
+                        pos: r,
+                        total: Xe.length
+                    }) : undefined;
                 },
                 onDragCancel: function e(n) {
                     var t = n.active.id;
-                    return (0, A.sprintf)("Row returned to it's starting position of %d.", Lo(qe, t));
+                    if (t === undefined) {
+                        return undefined;
+                    }
+                    var r = Lo(Xe, t);
+                    return typeof r === "number" ? (0, q.sprintf)((0, D._)("Column returned to its starting position of %(pos)d."), {
+                        pos: r
+                    }) : undefined;
                 }
             };
-        }), [ qe ]);
-        var Rn = (0, t.useMemo)((function() {
+        }), [ Xe, x ]);
+        var Mn = (0, t.useMemo)((function() {
             return {
-                screenReaderInstructions: Ko,
-                announcements: On
+                screenReaderInstructions: k ? Ko : Bo,
+                announcements: k ? _n : zn
             };
-        }), [ On ]);
+        }), [ _n, zn, k ]);
+        var $n = (0, t.useCallback)((function(e) {
+            var n = e.active.id;
+            if (n.startsWith("col-") && x) {
+                Re([ u.restrictToHorizontalAxis ]);
+                ln(e);
+            } else if (n.startsWith("row-") && k) {
+                Re([ u.restrictToVerticalAxis ]);
+            }
+        }), [ x, k, ln ]);
+        var Nn = (0, t.useCallback)((function(e) {
+            Re([]);
+            var n = e.active.id;
+            if (n.startsWith("col-") && x) {
+                cn(e);
+            } else if (n.startsWith("row-") && k) {
+                dn(e);
+            }
+        }), [ cn, dn, x, k ]);
+        var Wn = (0, t.useCallback)((function(e) {
+            var n = e.active.id;
+            if (n.startsWith("col-") && x) {
+                sn(e);
+            }
+        }), [ sn, x ]);
+        var Ln = (0, t.useCallback)((function(e) {
+            Re([]);
+            var n = e.active.id;
+            if (n.startsWith("row-") && k) {
+                fn();
+            }
+        }), [ fn, k ]);
+        var Hn = (0, t.useMemo)((function() {
+            return function(e) {
+                var n = (0, a.pointerWithin)(e);
+                // Collision detection algorithms return an array of collisions
+                                if (n.length > 0) {
+                    return n;
+                }
+                // If there are no collisions with the pointer, return rectangle intersections
+                                return (0, a.rectIntersection)(e);
+            };
+        }), []);
+        var Kn = _e ? vn.current[_e] : null;
+        var Bn = Kn ? go(Kn).width : undefined;
+        var Vn = Ke.current ? go(Ke.current).height : undefined;
         
         return r().createElement(ee, Co({
             "data-test": "table",
-            ref: p,
-            style: j,
-            "data-test-row-selection": I ? N : undefined
-        }, g()(K, [].concat(xo(Object.keys(zo)), [ "style" ]))),  r().createElement(O(), {
-            target: Qe(),
+            ref: b,
+            style: _,
+            "data-test-row-selection": A ? K : undefined
+        }, g()(F, [].concat(xo(Object.keys(Po)), [ "style" ]))),  r().createElement(S(), {
+            target: Je(),
             eventType: "scroll",
-            listener: Me,
+            listener: en,
             options: Fo
-        }),  r().createElement(S(), {
-            handleWidth: true,
-            onResize: $e
-        }),  r().createElement(xn.Provider, {
-            value: kn
-        }, yn,  r().createElement(ne, {
-            onScroll: Pe,
-            ref: De,
-            style: y
-        },  r().createElement(E.ScrollContainerProvider, {
-            value: Cn
+        }),  r().createElement(_t.Provider, {
+            value: Pn
+        }, Tn,  r().createElement(ne, {
+            onScroll: Qe,
+            ref: Ke,
+            style: w,
+            $dragging: !!_e
+        },  r().createElement(I.ScrollContainerProvider, {
+            value: qn
         },  r().createElement(a.DndContext, {
-            accessibility: Rn,
-            sensors: Se,
-            onDragEnd: nn,
-            onDragCancel: tn,
-            collisionDetection: a.closestCenter,
-            modifiers: Wo
-        },  r().createElement(l.SortableContext, {
-            items: qe,
-            strategy: l.verticalListSortingStrategy
+            accessibility: Mn,
+            collisionDetection: Hn,
+            modifiers: Oe,
+            onDragCancel: Ln,
+            onDragEnd: Nn,
+            onDragOver: Wn,
+            onDragStart: $n,
+            sensors: xe
         },  r().createElement(te, {
-            ref: Te,
+            ref: He,
             "data-test": "main-table",
-            style: W,
-            "data-fixed-column": hn ? "true" : undefined,
-            $resizableFillLayout: P
-        }, bn, pn, mn))))), fn()));
-    }
-    Uo.propTypes = zo;
-    Uo.Body = Z;
-    Uo.Caption = de;
-    Uo.Cell = xe;
-    Uo.Head = ar;
-    Uo.HeadCell = Pn;
-    Uo.HeadDropdownCell = Ir;
-    Uo.Row = Wt;
-    /* harmony default export */    const Xo = Uo;
+            style: V,
+            "data-fixed-column": In ? "true" : undefined,
+            $resizableFillLayout: $
+        }, En, x ?  r().createElement(l.SortableContext, {
+            items: Xe,
+            strategy: l.horizontalListSortingStrategy
+        }, On) : On, k ?  r().createElement(l.SortableContext, {
+            items: Fe,
+            strategy: l.verticalListSortingStrategy
+        }, Rn) : Rn), _e &&  r().createElement(a.DragOverlay, null,  r().createElement(ae, {
+            $width: Bn,
+            $height: Vn
+        })), _e && bn))), Sn()));
+    }
+    Xo.propTypes = Po;
+    Xo.Body = Z;
+    Xo.Caption = ve;
+    Xo.Cell = ke;
+    Xo.Head = Jt;
+    Xo.HeadCell = En;
+    Xo.HeadDropdownCell = gr;
+    Xo.Row = At;
+    /* harmony default export */    const Yo = Xo;
     // CONCATENATED MODULE: ./src/Table/index.ts
     module.exports = n;
     /******/})();