@splunk/react-ui 4.39.0 → 4.41.0

package/Table.js

@@ -164,10 +164,10 @@
             return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e;
         }, $(e);
     }
-    function B(e, t) {
+    function W(e, t) {
         if (!(e instanceof t)) throw new TypeError("Cannot call a class as a function");
     }
-    function W(e, t) {
+    function B(e, t) {
         for (var n = 0; n < t.length; n++) {
             var r = t[n];
             r.enumerable = r.enumerable || !1, r.configurable = !0, "value" in r && (r.writable = !0), 
@@ -175,7 +175,7 @@
         }
     }
     function K(e, t, n) {
-        return t && W(e.prototype, t), n && W(e, n), Object.defineProperty(e, "prototype", {
+        return t && B(e.prototype, t), n && B(e, n), Object.defineProperty(e, "prototype", {
             writable: !1
         }), e;
     }
@@ -426,7 +426,7 @@
         F(n, e);
         var t = U(n);
         function n() {
-            B(this, n);
+            W(this, n);
             return t.apply(this, arguments);
         }
         K(n, [ {
@@ -532,10 +532,7 @@
     Oe.splunkUiType = "Table.Caption";
     /* harmony default export */    const Ee = Oe;
     // CONCATENATED MODULE: ./src/Table/CellStyles.ts
-    var Re = (0, z.css)([ "box-shadow:", ";", ";" ], N.variables.focusShadowInset, (0, 
-    N.pick)({
-        prisma: (0, z.css)([ "color:", ";" ], N.variables.contentColorDefault)
-    }));
+    var Re = (0, z.css)([ "box-shadow:", ";" ], N.variables.focusShadowInset);
     var je = H().td.withConfig({
         displayName: "CellStyles__Styled",
         componentId: "sc-1955xk2-0"
@@ -562,7 +559,8 @@
             prisma: {
                 comfortable: (0, z.css)([ "padding:4px 8px;" ]),
                 compact: (0, z.css)([ "padding:0 8px 0 0;" ])
-            }
+            },
+            enterprise: (0, z.css)([ "padding:6px 8px;" ])
         },
         toggle: {
             prisma: {
@@ -578,27 +576,30 @@
                 enterprise: (0, z.css)([ "color:", ";*:hover > &&{cursor:pointer;}" ], N.variables.linkColor),
                 prisma: (0, z.css)([ "color:", ";*:hover > &&{cursor:pointer;}" ], N.variables.contentColorDefault)
             },
-            link: {
-                enterprise: (0, z.css)([ "color:", ";&:hover{cursor:pointer;", " box-shadow:", ";}&:focus{", " box-shadow:", ";}" ], N.variables.linkColor, (0, 
-                N.pick)({
-                    dark: (0, z.css)([ "color:", ";" ], N.variables.accentColorL20)
-                }), N.variables.focusShadowInset, (0, N.pick)({
+            link: (0, z.css)([ "color:", ";&:hover{cursor:pointer;", "}&:focus{", " box-shadow:", ";}" ], N.variables.linkColor, (0, 
+            N.pick)({
+                enterprise: {
+                    dark: (0, z.css)([ "color:", ";box-shadow:", ";" ], N.variables.accentColorL20, N.variables.focusShadowInset),
+                    light: (0, z.css)([ "box-shadow:", ";" ], N.variables.focusShadowInset)
+                },
+                prisma: (0, z.css)([ "text-decoration:underline;" ])
+            }), (0, N.pick)({
+                enterprise: {
                     dark: (0, z.css)([ "color:", ";" ], N.variables.accentColorL20),
                     light: (0, z.css)([ "color:", ";" ], N.variables.focusColor)
-                }), N.variables.focusShadowInset)
-            }
+                },
+                prisma: (0, z.css)([ "color:", ";text-decoration:underline;" ], N.variables.interactiveColorPrimary)
+            }), N.variables.focusShadowInset)
         });
     }), (function(e) {
         var t = e.$clickable, n = e.$focusWithin;
-        return t && (0, z.css)([ "cursor:pointer;&:hover{background-color:", ";color:", ";}&:focus{", "}", " &:active{background:", ";}" ], (0, 
+        return t && (0, z.css)([ "cursor:pointer;&:hover{background-color:", ";}&:focus{", "}", " &:active{background:", ";}" ], (0, 
         N.pick)({
             enterprise: {
                 light: N.variables.accentColorL50,
                 dark: N.variables.accentColorD50
             },
             prisma: N.variables.interactiveColorOverlayHover
-        }), (0, N.pick)({
-            prisma: N.variables.contentColorDefault
         }), Re, n && (0, z.css)([ "&:focus-within{", "}" ], Re), (0, N.pick)({
             prisma: N.variables.interactiveColorOverlayActive
         }));
@@ -692,9 +693,9 @@
     function Ne(e) {
         var t = $e();
         return function() {
-            var n, r = Be(e);
+            var n, r = We(e);
             if (t) {
-                var o = Be(this).constructor;
+                var o = We(this).constructor;
                 n = Reflect.construct(r, arguments, o);
             } else n = r.apply(this, arguments);
             return Me(this, n);
@@ -717,12 +718,12 @@
             return !!e;
         })();
     }
-    function Be(e) {
-        return Be = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function(e) {
+    function We(e) {
+        return We = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function(e) {
             return e.__proto__ || Object.getPrototypeOf(e);
-        }, Be(e);
+        }, We(e);
     }
-    function We(e, t, n) {
+    function Be(e, t, n) {
         return (t = Ke(t)) in e ? Object.defineProperty(e, t, {
             value: n,
             enumerable: !0,
@@ -776,13 +777,13 @@
                 o[i] = arguments[i];
             }
             e = t.call.apply(t, [ this ].concat(o));
-            We(Le(e), "el", null);
-            We(Le(e), "handleMount", (function(t) {
+            Be(Le(e), "el", null);
+            Be(Le(e), "handleMount", (function(t) {
                 // eslint-disable-next-line react/no-unused-class-component-methods
                 e.el = t;
                 L(e.props.elementRef, t);
             }));
-            We(Le(e), "handleClick", (function(t) {
+            Be(Le(e), "handleClick", (function(t) {
                 var n = e.props, r = n.data, o = n.onClick, i = n.variant;
                 if (i === "actions") {
                     // Action buttons have their own onClicks inside the cell so we don't want Row onClick to fire
@@ -790,7 +791,7 @@
                 }
                 o === null || o === void 0 ? void 0 : o(t, r);
             }));
-            We(Le(e), "handleKeyDown", (function(t) {
+            Be(Le(e), "handleKeyDown", (function(t) {
                 var n = e.props, r = n.data, o = n.onClick, i = n.onKeyDown;
                 if ((0, E.keycode)(t.nativeEvent) === "enter") {
                     o === null || o === void 0 ? void 0 : o(t, r);
@@ -826,9 +827,9 @@
         } ]);
         return n;
     }(n.Component);
-    We(Ge, "splunkUiType", "Table.Cell");
-    We(Ge, "propTypes", Ve);
-    We(Ge, "defaultProps", Ue);
+    Be(Ge, "splunkUiType", "Table.Cell");
+    Be(Ge, "propTypes", Ve);
+    Be(Ge, "defaultProps", Ue);
     /* harmony default export */    const Xe = Ge;
     // CONCATENATED MODULE: external "lodash/findIndex"
     const Ye = require("lodash/findIndex");
@@ -912,10 +913,18 @@
     }), /* sc-sel */ xt, (0, N.pick)({
         enterprise: wt
     }));
-    var kt = H().div.withConfig({
+    var kt = (0, z.css)([ "box-shadow:", ";outline:none;", ";" ], N.variables.focusShadowInset, (0, 
+    N.pick)({
+        enterprise: {
+            light: (0, z.css)([ "color:", ";" ], N.variables.accentColorD10),
+            dark: (0, z.css)([ "color:", ";" ], N.variables.linkColorHover)
+        },
+        prisma: (0, z.css)([ "background-color:", ";" ], N.variables.interactiveColorOverlaySelected)
+    }));
+    var Ot = H().div.withConfig({
         displayName: "HeadInnerStyles__Styled",
         componentId: "sc-1sa0wng-3"
-    })([ "", " ", ";position:relative;font-size:", ";", ";line-height:", ";justify-content:", ";padding:", ";", " ", " ", " &[data-helper]{background-color:", ";position:absolute;left:-10000px;top:-10000px;box-shadow:", ";box-sizing:border-box;background-repeat:repeat-x;", ";}@media print{background-image:none;}" ], N.mixins.reset("flex"), N.mixins.clearfix(), (0, 
+    })([ "", " ", ";position:relative;width:100%;font-size:", ";", ";line-height:", ";justify-content:", ";padding:", ";", " ", " ", " &[data-helper]{background-color:", ";position:absolute;left:-10000px;top:-10000px;box-shadow:", ";box-sizing:border-box;background-repeat:repeat-x;", ";}@media print{background-image:none;}", "" ], N.mixins.reset("flex"), N.mixins.clearfix(), (0, 
     N.pick)({
         enterprise: "inherit",
         prisma: "12px"
@@ -936,7 +945,10 @@
         }
     }), (function(e) {
         var t = e.$hasActionsHead;
-        return t && (0, z.css)([ "padding:0;" ]);
+        return t && (0, z.css)([ "button:not([disabled]):focus{", ";}padding:0;" ], (0, 
+        N.pick)({
+            enterprise: (0, z.css)([ "box-shadow:", ";" ], N.variables.focusShadowInset)
+        }));
     }), (function(e) {
         var t = e.$dragging;
         return t && (0, z.css)([ "opacity:0;" ]);
@@ -957,8 +969,21 @@
         prisma: N.variables.dragShadow
     }), (0, N.pick)({
         enterprise: (0, z.css)([ "border:1px solid ", ";" ], N.variables.borderColor)
+    }), (function(e) {
+        var t = e.$clickable, n = e.$focusWithin;
+        return t && (0, z.css)([ "cursor:pointer;&:focus{", "}", " &:hover{outline:none;color:", ";background-color:", ";}&:active{background-color:", ";}" ], kt, n && (0, 
+        z.css)([ "&:focus-within{", "}" ], kt), (0, N.pick)({
+            enterprise: {
+                light: N.variables.accentColorD10,
+                dark: N.variables.linkColorHover
+            }
+        }), (0, N.pick)({
+            prisma: N.variables.interactiveColorOverlayHover
+        }), (0, N.pick)({
+            prisma: N.variables.interactiveColorOverlayActive
+        }));
     }));
-    var Ot = H().span.withConfig({
+    var Et = H().span.withConfig({
         displayName: "HeadInnerStyles__StyledSortIcon",
         componentId: "sc-1sa0wng-4"
     })([ "flex:0 0 auto;", ";", " color:", ";", "" ], (0, N.pick)({
@@ -978,32 +1003,24 @@
             prisma: N.variables.contentColorDefault
         }));
     }));
-    var Et = H()(gt()).withConfig({
+    var Rt = H()(gt()).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 */ kt, N.variables.focusColor, N.variables.focusShadow);
+    })([ "", ";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 */ Ot, N.variables.focusColor, N.variables.focusShadow);
     // TODO: SUI-5361 remove StyledCaretUp and StyledCaretDown once have made a general way to address the multicolor icon problem
-        var Rt = H()(pt()).withConfig({
+        var jt = H()(pt()).withConfig({
         displayName: "HeadInnerStyles__StyledCaretDown",
         componentId: "sc-1sa0wng-6"
     })([ "path:last-child{fill:transparent;}" ]);
-    var jt = H()(pt()).withConfig({
+    var It = H()(pt()).withConfig({
         displayName: "HeadInnerStyles__StyledCaretUp",
         componentId: "sc-1sa0wng-7"
     })([ "path:first-child{fill:transparent;}" ]);
     // CONCATENATED MODULE: ./src/Table/HeadCellStyles.ts
-    var It = (0, z.css)([ "box-shadow:", ";outline:none;& > ", "{", ";}" ], N.variables.focusShadowInset, /* sc-sel */ kt, (0, 
-    N.pick)({
-        enterprise: {
-            light: (0, z.css)([ "color:", ";" ], N.variables.accentColorD10),
-            dark: (0, z.css)([ "color:", ";" ], N.variables.linkColorHover)
-        },
-        prisma: (0, z.css)([ "background-color:", ";" ], N.variables.interactiveColorOverlaySelected)
-    }));
     var Tt = H().th.withConfig({
         displayName: "HeadCellStyles__Styled",
         componentId: "sc-1hj81sa-0"
-    })([ "", ";background-color:", ";box-sizing:content-box;text-align:left;vertical-align:", ";& + &{border-left:1px solid ", ";}", " ", " ", " ", "" ], N.mixins.reset("table-cell"), (0, 
+    })([ "", ";background-color:", ";box-sizing:content-box;text-align:left;vertical-align:", ";& + &{border-left:1px solid ", ";}", " ", " ", "" ], N.mixins.reset("table-cell"), (0, 
     N.pick)({
         enterprise: {
             light: N.variables.gray92,
@@ -1026,19 +1043,6 @@
             enterprise: N.variables.backgroundColor,
             prisma: N.variables.backgroundColorPage
         }));
-    }), (function(e) {
-        var t = e.$clickable, n = e.$focusWithin;
-        return t && (0, z.css)([ "cursor:pointer;&:focus{", "}", " &:hover{outline:none;& > ", "{color:", ";background-color:", ";}}&:active{& > ", "{background-color:", ";}}" ], It, n && (0, 
-        z.css)([ "&:focus-within{", "}" ], It), /* sc-sel */ kt, (0, N.pick)({
-            enterprise: {
-                light: N.variables.accentColorD10,
-                dark: N.variables.linkColorHover
-            }
-        }), (0, N.pick)({
-            prisma: N.variables.interactiveColorOverlayHover
-        }), /* sc-sel */ kt, (0, N.pick)({
-            prisma: N.variables.interactiveColorOverlayActive
-        }));
     }), (function(e) {
         var t = e.$dragging;
         return t && (0, z.css)([ "background-color:", ";&:focus{box-shadow:none;}" ], (0, 
@@ -1050,15 +1054,15 @@
             prisma: N.mixins.overlayColors(N.variables.backgroundColorPage, N.variables.interactiveColorOverlayDrag)
         }));
     }), (0, N.pickVariant)("$variant", {
-        actions: (0, z.css)([ "& > ", "{padding-right:8px;}" ], /* sc-sel */ kt),
-        info: (0, z.css)([ "& > ", "{", ";}" ], /* sc-sel */ kt, (0, N.pick)({
+        actions: (0, z.css)([ "& > ", "{padding-right:8px;}" ], /* sc-sel */ Ot),
+        info: (0, z.css)([ "& > ", "{", ";}" ], /* sc-sel */ Ot, (0, N.pick)({
             enterprise: (0, z.css)([ "padding-top:7px;" ]),
             prisma: {
                 comfortable: (0, z.css)([ "padding:16px 12px;" ]),
                 compact: (0, z.css)([ "padding:6px 12px;" ])
             }
         })),
-        toggleAll: (0, z.css)([ "& > ", "{padding-top:", ";}" ], /* sc-sel */ kt, (0, N.pick)({
+        toggleAll: (0, z.css)([ "& > ", "{padding-top:", ";}" ], /* sc-sel */ Ot, (0, N.pick)({
             prisma: {
                 comfortable: "14px",
                 compact: "7px"
@@ -1230,12 +1234,12 @@
         }, Lt.apply(null, arguments);
     }
     function $t(e) {
-        return Kt(e) || Wt(e) || Ut(e) || Bt();
+        return Kt(e) || Bt(e) || Ut(e) || Wt();
     }
-    function Bt() {
+    function Wt() {
         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 Wt(e) {
+    function Bt(e) {
         if ("undefined" != typeof Symbol && null != e[Symbol.iterator] || null != e["@@iterator"]) return Array.from(e);
     }
     function Kt(e) {
@@ -1310,7 +1314,9 @@
     }
     var Zt = {
         align: i().oneOf([ "left", "center", "right" ]),
+        clickable: i().bool,
         columnId: i().any,
+        focusWithin: i().bool,
         hasActionsHead: i().bool,
         id: i().string,
         index: i().number,
@@ -1333,8 +1339,8 @@
     });
     var nn = Object.freeze({
         none: pt(),
-        asc: jt,
-        desc: Rt
+        asc: It,
+        desc: jt
     });
     var rn = Object.freeze({
         none: st(),
@@ -1342,209 +1348,212 @@
         desc: it()
     });
     function on(e) {
-        var t = e.index, o = e.columnId, i = e.id, a = e.width, l = e.onDragEnd, c = e.onAutosizeColumn, s = e.align, u = s === void 0 ? "left" : s, d = e.label, f = e.hasActionsHead, p = f === void 0 ? false : f, v = e.isMenu, b = v === void 0 ? false : v, y = e.onDragStart, h = e.onRequestResize, m = e.resizable, w = m === void 0 ? true : m, x = e.sortDir, C = x === void 0 ? undefined : x, S = e.truncate, k = S === void 0 ? true : S, R = Jt(e, [ "index", "columnId", "id", "width", "onDragEnd", "onAutosizeColumn", "align", "label", "hasActionsHead", "isMenu", "onDragStart", "onRequestResize", "resizable", "sortDir", "truncate" ]);
+        var t = e.index, o = e.clickable, i = e.columnId, a = e.focusWithin, l = e.id, c = e.width, s = e.onDragEnd, u = e.onAutosizeColumn, d = e.align, f = d === void 0 ? "left" : d, p = e.label, v = e.hasActionsHead, b = v === void 0 ? false : v, y = e.isMenu, h = y === void 0 ? false : y, m = e.onDragStart, w = e.onRequestResize, x = e.resizable, C = x === void 0 ? true : x, S = e.sortDir, k = S === void 0 ? undefined : S, R = e.truncate, j = R === void 0 ? true : R, I = Jt(e, [ "index", "clickable", "columnId", "focusWithin", "id", "width", "onDragEnd", "onAutosizeColumn", "align", "label", "hasActionsHead", "isMenu", "onDragStart", "onRequestResize", "resizable", "sortDir", "truncate" ]);
         if (false) {}
-        var j = (0, N.useSplunkTheme)(), I = j.isEnterprise;
-        var D = (0, T._)("Click to open menu");
-        var _ = (0, n.useState)(), q = Ft(_, 2), A = q[0], z = q[1];
-        var H = (0, n.useState)(false), M = Ft(H, 2), L = M[0], $ = M[1];
-        var B = (0, n.useState)(false), W = Ft(B, 2), K = W[0], F = W[1];
-        var V = (0, n.useState)(0), U = Ft(V, 2), G = U[0], X = U[1];
-        var Y = (0, n.useState)(0), J = Ft(Y, 2), Q = J[0], Z = J[1];
-        var ee = (0, n.useRef)(null);
+        var D = (0, N.useSplunkTheme)(), _ = D.isEnterprise;
+        var q = (0, T._)("Click to open menu");
+        var A = (0, n.useState)(), z = Ft(A, 2), H = z[0], M = z[1];
+        var L = (0, n.useState)(false), $ = Ft(L, 2), W = $[0], B = $[1];
+        var K = (0, n.useState)(false), F = Ft(K, 2), V = F[0], U = F[1];
+        var G = (0, n.useState)(0), X = Ft(G, 2), Y = X[0], J = X[1];
+        var Q = (0, n.useState)(0), Z = Ft(Q, 2), ee = Z[0], te = Z[1];
+        var ne = (0, n.useRef)(null);
         // Cleanup dragend, and unmount during drag
                 (0, n.useEffect)((function() {
             return function() {
-                return A === null || A === void 0 ? void 0 : A.remove();
+                return H === null || H === void 0 ? void 0 : H.remove();
             };
-        }), [ A ]);
-        var te;
-        var ne;
+        }), [ H ]);
         var re;
-        if (C !== undefined && en.has(C)) {
-            var oe = I ? nn : rn;
-            ne = oe[C];
-            re = tn[C];
+        var oe;
+        var ie;
+        if (k !== undefined && en.has(k)) {
+            var ae = _ ? nn : rn;
+            oe = ae[k];
+            ie = tn[k];
         }
-        if (a === "auto") {
-            var ie;
-            var ae = ee.current;
-            var le = ae === null || ae === void 0 ? void 0 : (ie = ae.parentElement) === null || ie === void 0 ? void 0 : ie.getBoundingClientRect();
-            te = le === null || le === void 0 ? void 0 : le.width;
+        if (c === "auto") {
+            var le;
+            var ce = ne.current;
+            var se = ce === null || ce === void 0 ? void 0 : (le = ce.parentElement) === null || le === void 0 ? void 0 : le.getBoundingClientRect();
+            re = se === null || se === void 0 ? void 0 : se.width;
         } else {
-            te = a;
+            re = c;
         }
-        var ce = function e(n) {
+        var ue = function e(n) {
             var r = (0, E.keycode)(n.nativeEvent);
-            if (h === undefined || t === undefined) {
+            if (w === undefined || t === undefined) {
                 return;
             }
-            if (a === "auto") {
-                var l;
-                var c = ee.current;
-                var s = c === null || c === void 0 ? void 0 : (l = c.parentElement) === null || l === void 0 ? void 0 : l.getBoundingClientRect();
-                te = s === null || s === void 0 ? void 0 : s.width;
+            if (c === "auto") {
+                var o;
+                var a = ne.current;
+                var s = a === null || a === void 0 ? void 0 : (o = a.parentElement) === null || o === void 0 ? void 0 : o.getBoundingClientRect();
+                re = s === null || s === void 0 ? void 0 : s.width;
             } else {
-                te = a;
+                re = c;
             }
-            if (te === undefined) {
+            if (re === undefined) {
                 return;
             }
             if (r === "left") {
                 n.preventDefault();
  // prevent text selection
-                                var u = Math.max(te - 10, 20);
-                h(n, {
+                                var u = Math.max(re - 10, 20);
+                w(n, {
                     index: t,
-                    columnId: o,
-                    id: i,
+                    columnId: i,
+                    id: l,
                     width: u
                 });
             }
             if (r === "right") {
                 n.preventDefault();
  // prevent text selection
-                                var d = te + 10;
-                h(n, {
+                                var d = re + 10;
+                w(n, {
                     index: t,
-                    columnId: o,
-                    id: i,
+                    columnId: i,
+                    id: l,
                     width: d
                 });
             }
         };
-        var se = function e(t) {
-            if (a === "auto") {
+        var de = function e(t) {
+            if (c === "auto") {
                 var n;
-                var r = ee.current;
+                var r = ne.current;
                 var o = r === null || r === void 0 ? void 0 : (n = r.parentElement) === null || n === void 0 ? void 0 : n.getBoundingClientRect();
-                te = o === null || o === void 0 ? void 0 : o.width;
+                re = o === null || o === void 0 ? void 0 : o.width;
             } else {
-                te = a;
+                re = c;
             }
-            if (te === undefined) {
+            if (re === undefined) {
                 return;
             }
             t.preventDefault();
  // prevent text selection
-                        X(t.clientX);
-            Z(te || 0);
-            $(true);
+                        J(t.clientX);
+            te(re || 0);
+            B(true);
         };
-        var ue = function e(n) {
-            var r = G - n.clientX;
-            var a = Math.max(Q - r, 16);
+        var fe = function e(n) {
+            var r = Y - n.clientX;
+            var o = Math.max(ee - r, 16);
             if (t !== undefined) {
-                h === null || h === void 0 ? void 0 : h(n, {
+                w === null || w === void 0 ? void 0 : w(n, {
                     index: t,
-                    columnId: o,
-                    id: i,
-                    width: a
+                    columnId: i,
+                    id: l,
+                    width: o
                 });
             }
         };
-        var de = function e() {
-            $(false);
+        var pe = function e() {
+            B(false);
         };
-        var fe = function e(n) {
+        var ve = function e(n) {
             var r;
-            var i = Ht();
-            var a = ee.current;
+            var o = Ht();
+            var a = ne.current;
             if (n.dataTransfer.setDragImage && (a === null || a === void 0 ? void 0 : a.parentElement)) {
                 var l = a.parentElement.getBoundingClientRect();
                 var c = a.cloneNode(true);
                 c.style.width = "".concat(l.width, "px");
                 c.style.height = "".concat(l.height, "px");
                 c.setAttribute("data-helper", "true");
-                i.body.appendChild(c);
+                o.body.appendChild(c);
                 n.dataTransfer.setDragImage(c, n.clientX - l.left, n.clientY - l.top);
-                F(true);
-                z(c);
+                U(true);
+                M(c);
             }
             n.dataTransfer.effectAllowed = "move";
             n.dataTransfer.setData("text", (r = a === null || a === void 0 ? void 0 : a.textContent) !== null && r !== void 0 ? r : "");
  // Required for Firefox
-                        y === null || y === void 0 ? void 0 : y(t, o);
+                        m === null || m === void 0 ? void 0 : m(t, i);
         };
-        var pe = function e() {
-            z(undefined);
-            F(false);
-            l === null || l === void 0 ? void 0 : l();
+        var be = function e() {
+            M(undefined);
+            U(false);
+            s === null || s === void 0 ? void 0 : s();
         };
-        var ve = function e(n) {
+        var ye = function e(n) {
             if (t !== undefined) {
-                c === null || c === void 0 ? void 0 : c(n, {
+                u === null || u === void 0 ? void 0 : u(n, {
                     index: t,
-                    columnId: o
+                    columnId: i
                 });
             }
         };
-        var be = !!y;
-        var ye = Mt();
-        var he = te ? (0, P.sprintf)((0, T._)("%(width)d pixels"), {
-            width: te
+        var he = !!m;
+        var me = Mt();
+        var ge = re ? (0, P.sprintf)((0, T._)("%(width)d pixels"), {
+            width: re
         }) : undefined;
-        var me = o ? {
-            ariaControls: o
+        var we = i ? {
+            ariaControls: i
         } : {};
         
-        return r().createElement(kt, Lt({
-            draggable: be || undefined,
-            onDragStart: be ? fe : undefined,
-            onDragEnd: be ? pe : undefined,
-            ref: ee,
-            $hasActionsHead: !!p,
-            $align: u,
-            $draggable: be,
-            $dragging: !!K
-        }, g()(R, [].concat($t(Object.keys(on.propTypes)), [ "id" ]))), L &&  r().createElement(r().Fragment, null,  r().createElement(O(), {
-            target: ye,
+        return r().createElement(Ot, Lt({
+            draggable: he || undefined,
+            onDragStart: he ? ve : undefined,
+            onDragEnd: he ? be : undefined,
+            ref: ne,
+            role: o ? "button" : undefined,
+            $hasActionsHead: !!b,
+            $align: f,
+            $draggable: he,
+            $dragging: !!V,
+            $clickable: o,
+            $focusWithin: a
+        }, g()(I, [].concat($t(Object.keys(on.propTypes)), [ "id" ]))), W &&  r().createElement(r().Fragment, null,  r().createElement(O(), {
+            target: me,
             eventType: "mouseup",
-            listener: de
+            listener: pe
         }),  r().createElement(O(), {
-            target: ye,
+            target: me,
             eventType: "mousemove",
-            listener: ue
-        })), h && w &&  r().createElement(Et, Lt({
+            listener: fe
+        })), w && C &&  r().createElement(Rt, Lt({
             "aria-label": (0, P.sprintf)((0, T._)("Resize %(label)s"), {
-                label: d
+                label: p
             })
-        }, me, {
-            "aria-valuetext": he,
+        }, we, {
+            "aria-valuetext": ge,
             "data-test": "resize",
-            onMouseDown: se,
-            onDoubleClick: ve,
-            onKeyDown: ce,
+            onMouseDown: de,
+            onDoubleClick: ye,
+            onKeyDown: ue,
             orientation: "vertical",
             tabIndex: 0
-        })), be &&  r().createElement(xt, null,  r().createElement(At, {
+        })), he &&  r().createElement(xt, null,  r().createElement(At, {
             screenReaderContent: (0, T._)("Press left or right arrow key to reorder the columns.")
         })),  r().createElement(St, {
-            $align: u,
-            $truncate: k,
-            $fill: b
-        }, d, b && 
+            $align: f,
+            $truncate: j,
+            $fill: h
+        }, p, h && 
         
         // this icon indicates "has a menu" in all themes
-        r().createElement(Ct, null, I ?  r().createElement(bt(), {
+        r().createElement(Ct, null, _ ?  r().createElement(bt(), {
             "data-test": "caret-down",
-            screenReaderText: D,
+            screenReaderText: q,
             hideDefaultTooltip: true,
             size: .5
         }) :  r().createElement(dt(), {
             "data-test": "caret-down",
-            "aria-label": D
-        }))), C &&  r().createElement(Ot, {
-            $sorted: C !== "none"
-        }, ne !== undefined && (I ?  r().createElement(ne, {
+            "aria-label": q
+        }))), k &&  r().createElement(Et, {
+            $sorted: k !== "none"
+        }, oe !== undefined && (_ ?  r().createElement(oe, {
             inline: true,
             "aria-hidden": false,
-            "aria-label": re,
+            "aria-label": ie,
             viewBox: "-8 0 24 24"
-        }) :  r().createElement(ne, {
+        }) :  r().createElement(oe, {
             inline: true,
             "aria-hidden": false,
-            "aria-label": re
+            "aria-label": ie
         }))));
     }
     on.propTypes = Zt;
@@ -1832,10 +1841,7 @@
                     "data-test-sort-dir": y && w,
                     id: k ? u : undefined,
                     onClick: y || I ? this.handleClick : undefined,
-                    tabIndex: k && (R || y || I) ? 0 : undefined,
                     $dragging: this.state.isDragging || undefined,
-                    $clickable: i || R || j || I,
-                    $focusWithin: i,
                     $variant: C,
                     $zIndex: E,
                     $isFixed: D === "fixed"
@@ -1855,7 +1861,10 @@
                     onRequestResize: b,
                     sortDir: y && w,
                     truncate: P,
-                    width: O
+                    width: O,
+                    clickable: i || R || j || I,
+                    tabIndex: k && (R || y || I) ? 0 : undefined,
+                    focusWithin: i
                 }), m !== "none" &&  r().createElement(Pt, {
                     $position: m
                 }));
@@ -1894,8 +1903,8 @@
     const Ln = require("@splunk/react-icons/DotsThreeVertical");
     var $n =  e.n(Ln);
     // CONCATENATED MODULE: external "@splunk/react-ui/Button"
-    const Bn = require("@splunk/react-ui/Button");
-    var Wn =  e.n(Bn);
+    const Wn = require("@splunk/react-ui/Button");
+    var Bn =  e.n(Wn);
     // CONCATENATED MODULE: external "@splunk/react-ui/Dropdown"
     const Kn = require("@splunk/react-ui/Dropdown");
     var Fn =  e.n(Kn);
@@ -2253,9 +2262,9 @@
     function Nr(e) {
         var t = $r();
         return function() {
-            var n, r = Br(e);
+            var n, r = Wr(e);
             if (t) {
-                var o = Br(this).constructor;
+                var o = Wr(this).constructor;
                 n = Reflect.construct(r, arguments, o);
             } else n = r.apply(this, arguments);
             return Mr(this, n);
@@ -2278,12 +2287,12 @@
             return !!e;
         })();
     }
-    function Br(e) {
-        return Br = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function(e) {
+    function Wr(e) {
+        return Wr = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function(e) {
             return e.__proto__ || Object.getPrototypeOf(e);
-        }, Br(e);
+        }, Wr(e);
     }
-    function Wr(e, t) {
+    function Br(e, t) {
         var n = Object.keys(e);
         if (Object.getOwnPropertySymbols) {
             var r = Object.getOwnPropertySymbols(e);
@@ -2296,9 +2305,9 @@
     function Kr(e) {
         for (var t = 1; t < arguments.length; t++) {
             var n = null != arguments[t] ? arguments[t] : {};
-            t % 2 ? Wr(Object(n), !0).forEach((function(t) {
+            t % 2 ? Br(Object(n), !0).forEach((function(t) {
                 Fr(e, t, n[t]);
-            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(n)) : Wr(Object(n)).forEach((function(t) {
+            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(n)) : Br(Object(n)).forEach((function(t) {
                 Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(n, t));
             }));
         }
@@ -2416,8 +2425,8 @@
         return r().createElement(Un(), Yr({
             content: (0, T._)("Actions"),
             contentRelationship: "label"
-        }, e),  r().createElement(Wn(), {
-            appearance: "secondary",
+        }, e),  r().createElement(Bn(), {
+            appearance: "subtle",
             "data-test": "actions-secondary-toggle",
             icon:  r().createElement($n(), {
                 height: i,
@@ -2436,17 +2445,17 @@
             };
         }), [ f, u ]);
         var q = (0, l.useSortable)(_), A = q.attributes, z = q.listeners, H = q.transform, N = q.transition, M = q.setNodeRef, $ = q.setActivatorNodeRef;
-        var B = (0, n.useMemo)((function() {
+        var W = (0, n.useMemo)((function() {
             return f ? Kr(Kr({}, I), {}, {
                 transform: Mn.CSS.Translate.toString(H),
                 transition: N
             }) : I;
         }), [ f, H, N, I ]);
-        var W = (0, n.useRef)(null);
+        var B = (0, n.useRef)(null);
         var K = function e(t) {
             var n = t.target;
             while (n) {
-                if (W.current === n) {
+                if (B.current === n) {
                     break;
                 }
                 // Ignore clicks on row-actions
@@ -2512,7 +2521,7 @@
             return a;
         };
         function Y(e) {
-            W.current = e;
+            B.current = e;
             L(p, e);
             if (f) {
                 M(e);
@@ -2565,7 +2574,7 @@
             onClick: w ? K : undefined,
             onKeyDown: F,
             $rowSelected: !!(S && R),
-            style: B
+            style: W
         }), f && h != null &&  r().createElement(vr, Yr({
             "aria-label": (0, P.sprintf)((0, T._)("Reorder %(rowLabelValue)s"), {
                 rowLabelValue: Q
@@ -3190,7 +3199,7 @@
         }, No.apply(null, arguments);
     }
     function Mo(e) {
-        return Wo(e) || Bo(e) || $o(e) || Lo();
+        return Bo(e) || Wo(e) || $o(e) || Lo();
     }
     function Lo() {
         throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
@@ -3202,10 +3211,10 @@
             return "Object" === n && e.constructor && (n = e.constructor.name), "Map" === n || "Set" === n ? Array.from(e) : "Arguments" === n || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n) ? Ko(e, t) : void 0;
         }
     }
-    function Bo(e) {
+    function Wo(e) {
         if ("undefined" != typeof Symbol && null != e[Symbol.iterator] || null != e["@@iterator"]) return Array.from(e);
     }
-    function Wo(e) {
+    function Bo(e) {
         if (Array.isArray(e)) return Ko(e);
     }
     function Ko(e, t) {
@@ -3546,7 +3555,6 @@
                     }),
                     "data-test": "head-cell",
                     $dragging: this.state.isDragging || undefined,
-                    $clickable: true,
                     $variant: E,
                     id: R ? q : undefined,
                     tabIndex: R ? 0 : undefined,
@@ -3572,7 +3580,8 @@
                     onAutosizeColumn: b,
                     onRequestResize: h,
                     truncate: O,
-                    width: j
+                    width: j,
+                    clickable: true
                 }), C !== "none" &&  r().createElement(Pt, {
                     $position: C
                 }),  r().createElement(zo(), {
@@ -4144,8 +4153,8 @@
         }
     } ]);
     // CONCATENATED MODULE: external "lodash/extend"
-    const Bi = require("lodash/extend");
-    var Wi =  e.n(Bi);
+    const Wi = require("lodash/extend");
+    var Bi =  e.n(Wi);
     // CONCATENATED MODULE: ./src/Table/HeadTableStyles.ts
     var Ki = H()(he).withConfig({
         displayName: "HeadTableStyles__Styled",
@@ -4358,7 +4367,7 @@
                                 var C = d ? n.Children.toArray(v.props.children) : n.Children.toArray(v.props.children).filter(n.isValidElement).map((function(e, t) {
                     
                     return (0, n.cloneElement)(e, {
-                        style: Wi()({}, e.props.style, {
+                        style: Bi()({}, e.props.style, {
                             width: o[t + x]
                         })
                     });
@@ -4377,7 +4386,7 @@
                 },  r().createElement(Ki, Gi({
                     "data-test": "".concat(s, "-head-table"),
                     "data-fixed-column": d ? "true" : undefined,
-                    style: Wi()({}, f, {
+                    style: Bi()({}, f, {
                         marginLeft: u,
                         width: d ? undefined : p
                     })
@@ -4594,7 +4603,7 @@
     // Internal Helper Modules
     /** @public */
     /** @public */
-    /** @public */    var Ba = {
+    /** @public */    var Wa = {
         actions: i().arrayOf(i().element),
         actionsColumnWidth: i().number,
         children: i().node,
@@ -4616,7 +4625,7 @@
         onRequestResizeColumn: i().func,
         resizableFillLayout: i().bool
     };
-    var Wa = {
+    var Ba = {
         actions: [],
         dockOffset: 0,
         headType: "inline",
@@ -4703,7 +4712,7 @@
     function el(e) {
         var t = e.actions, o = e.actionsColumnWidth, i = e.children, c = e.dockOffset, s = e.dockScrollBar, d = e.elementRef, p = e.headType, v = e.innerStyle, b = e.onRequestMoveColumn, h = e.onRequestMoveRow, m = e.onRequestResizeColumn, w = e.onRequestToggleAllRows, C = e.onScroll, k = e.outerStyle, j = e.primaryColumnIndex, T = e.resizableFillLayout, D = e.rowExpansion, _ = e.rowSelection, q = e.stripeRows, A = e.tableStyle, z = La(e, [ "actions", "actionsColumnWidth", "children", "dockOffset", "dockScrollBar", "elementRef", "headType", "innerStyle", "onRequestMoveColumn", "onRequestMoveRow", "onRequestResizeColumn", "onRequestToggleAllRows", "onScroll", "outerStyle", "primaryColumnIndex", "resizableFillLayout", "rowExpansion", "rowSelection", "stripeRows", "tableStyle" ]);
         var H = (0, n.useState)([]), N = qa(H, 2), M = N[0], L = N[1];
-        var $ = (0, n.useState)(), B = qa($, 2), W = B[0], K = B[1];
+        var $ = (0, n.useState)(), W = qa($, 2), B = W[0], K = W[1];
         var F = (0, n.useState)(), V = qa(F, 2), U = V[0], G = V[1];
         var X = (0, n.useState)(), Y = qa(X, 2), J = Y[0], Q = Y[1];
         var Z = (0, n.useState)(), ee = qa(Z, 2), te = ee[0], ne = ee[1];
@@ -4862,7 +4871,7 @@
         var $e = x()(Le, 100, {
             trailing: false
         });
-        var Be = function e(t) {
+        var We = function e(t) {
             t.preventDefault();
  // necessary for the drop event to fire
                         if (t.dataTransfer) {
@@ -4870,7 +4879,7 @@
             }
             $e(t.clientX);
         };
-        var We = function e(t) {
+        var Be = function e(t) {
             t.preventDefault();
  // necessary for the drop event to fire
                         ue(t.clientX);
@@ -4886,8 +4895,8 @@
         };
         var Ve = function e() {
             var t = Mt();
-            t.removeEventListener("dragenter", We);
-            t.removeEventListener("dragover", Be);
+            t.removeEventListener("dragenter", Be);
+            t.removeEventListener("dragover", We);
             t.removeEventListener("drop", Ke);
             t.removeEventListener("dragend", Fe);
             $e.cancel();
@@ -4906,8 +4915,8 @@
             var n = t.dragIndex;
             var r = Mt();
             ae(n);
-            r.addEventListener("dragenter", We);
-            r.addEventListener("dragover", Be);
+            r.addEventListener("dragenter", Be);
+            r.addEventListener("dragover", We);
             r.addEventListener("drop", Ke);
             r.addEventListener("dragend", Fe);
         };
@@ -5005,7 +5014,7 @@
                     headType: "docked",
                     tHead: i,
                     cellWidths: M,
-                    horizontalOffset: W,
+                    horizontalOffset: B,
                     tableWidth: U,
                     top: J,
                     width: te,
@@ -5146,7 +5155,7 @@
             ref: d,
             style: k,
             "data-test-row-selection": w ? _ : undefined
-        }, g()(z, [].concat(Ta(Object.keys(Ba)), [ "style" ]))),  r().createElement(O(), {
+        }, g()(z, [].concat(Ta(Object.keys(Wa)), [ "style" ]))),  r().createElement(O(), {
             target: Mt(),
             eventType: "scroll",
             listener: _e,
@@ -5186,7 +5195,7 @@
             $resizableFillLayout: T
         }, it, rt, ot))))), tt()));
     }
-    el.propTypes = Ba;
+    el.propTypes = Wa;
     var tl =  function(e) {
         ga(n, e);
         var t = xa(n);
@@ -5204,8 +5213,8 @@
         } ]);
         return n;
     }(n.Component);
-    Ea(tl, "propTypes", Ba);
-    Ea(tl, "defaultProps", Wa);
+    Ea(tl, "propTypes", Wa);
+    Ea(tl, "defaultProps", Ba);
     Ea(tl, "Caption", Ee);
     Ea(tl, "Head", To);
     Ea(tl, "HeadCell", _n);