@splunk/react-ui 5.2.0 → 5.3.0

package/Table.js

@@ -654,7 +654,7 @@
     var We = M().div.withConfig({
         displayName: "HeadInnerStyles__Styled",
         componentId: "sc-1sa0wng-3"
-    })([ "", ";", ";", ";position:relative;", " grid-template-rows:1lh auto;align-items:start;flex-grow:1;height:100%;padding-block:", ";padding-inline:", ";justify-content:", ";", " ", " @media print{background-image:none;}", "" ], $.mixins.reset("grid"), $.mixins.clearfix(), $.mixins.typography("body", {
+    })([ "", ";", ";", ";position:relative;", " grid-template-rows:1lh 1fr;align-items:start;flex-grow:1;height:100%;padding-block:", ";padding-inline:", ";justify-content:", ";", " ", " @media print{background-image:none;}", "" ], $.mixins.reset("grid"), $.mixins.clearfix(), $.mixins.typography("body", {
         weight: "bold"
     }), (function(e) {
         var n = e.$hasTooltip, t = e.$hasIcon;
@@ -979,7 +979,8 @@
     });
     function Tn(e) {
         var n = e.align, o = n === void 0 ? "left" : n, i = e.clickable, a = e.cellId, l = e.columnId, u = e.elementRef, s = e.focusWithin, c = e.hasTooltip, d = e.index, f = e.isMenu, v = e.label, p = e.onAutosizeColumn, m = e.onRequestResize, b = e.resizable, y = b === void 0 ? true : b, g = e.sortDir, w = e.truncate, C = w === void 0 ? true : w, x = e.variant, O = e.width, k = Sn(e, [ "align", "clickable", "cellId", "columnId", "elementRef", "focusWithin", "hasTooltip", "index", "isMenu", "label", "onAutosizeColumn", "onRequestResize", "resizable", "sortDir", "truncate", "variant", "width" ]);
-        var R = (0, j._)("Click to open menu");
+        // @docs-props-type HeadInnerPropsBase
+                var R = (0, j._)("Click to open menu");
         var E = (0, t.useMemo)((function() {
             return typeof v === "string" ? v.length : 0;
         }), [ v ]);
@@ -1415,7 +1416,8 @@
     };
     var rt = function e(n) {
         var t = n.expanded, o = et(n, [ "expanded" ]);
-        
+        // @docs-props-type ExpandButtonPropsBase
+                
         return r().createElement(Jn, Zn({
             title: t ? (0, j._)("Collapse row") : (0, j._)("Expand row")
         }, o),  r().createElement(Qn, {
@@ -1473,7 +1475,8 @@
     };
     function dt(e) {
         var n = e.listeners, t = e.setActivatorNodeRef, o = ut(e, [ "listeners", "setActivatorNodeRef" ]);
-        
+        // @docs-props-type RowDragCellPropsBase
+                
         return r().createElement(it, {
             "data-helper": true
         },  r().createElement(at, lt({
@@ -1503,19 +1506,19 @@
         var n = e.$clickable;
         return n && (0, z.css)([ "cursor:pointer;&:hover,&:focus{background-color:", ";}" ], $.variables.neutral300);
     }));
-    // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
-    const mt = require("@splunk/react-ui/Clickable");
+    // CONCATENATED MODULE: external "@splunk/react-ui/Checkbox"
+    const mt = require("@splunk/react-ui/Checkbox");
     var bt =  e.n(mt);
-    // CONCATENATED MODULE: external "@splunk/react-ui/NonInteractiveCheckbox"
-    const ht = require("@splunk/react-ui/NonInteractiveCheckbox");
+    // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
+    const ht = require("@splunk/react-ui/Clickable");
     var yt =  e.n(ht);
     // CONCATENATED MODULE: ./src/Table/ToggleStyles.ts
-    var gt = M()(bt()).withConfig({
+    var gt = M()(yt()).withConfig({
         displayName: "ToggleStyles__StyledClickable",
         componentId: "sc-1x3ikch-0"
     })([ "height:100%;width:100%;display:flex;justify-content:center;&[disabled]{cursor:not-allowed;}" ]);
-    var wt = M()(yt()).withConfig({
-        displayName: "ToggleStyles__StyledNonInteractiveCheckbox",
+    var wt = M()(bt()).withConfig({
+        displayName: "ToggleStyles__StyledCheckbox",
         componentId: "sc-1x3ikch-1"
     })([ "align-items:flex-start;padding-block:", ";" ], (0, $.pick)({
         comfortable: "8px",
@@ -1562,17 +1565,20 @@
     };
     function kt(e) {
         var n = e.disabled, t = e.onClick, o = e.selected, i = xt(e, [ "disabled", "onClick", "selected" ]);
-        var a = n === true ? "disabled" : undefined;
+        // @docs-props-type TogglePropsBase
+                var a = n === true ? "disabled" : undefined;
         
-        // 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).
+        // we use a Clickable around the inert Checkbox (which can seem ironic) so that the whole table cell is clickable
+        // we cannot use the Cell's onClick itself because of a11y issues we have faced in the past (see SUI-5958).
         return r().createElement(gt, Ct({
             "aria-checked": o === "some" ? "mixed" : o,
             disabled: a,
             onClick: t,
             role: "checkbox"
         }, i),  r().createElement(wt, {
+            checked: o === "some" ? "indeterminate" : o,
             disabled: !!a,
-            selected: o
+            inert: true
         }));
     }
     kt.propTypes = Ot;
@@ -2010,7 +2016,8 @@
     };
     function er(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, m = e.onRequestToggleAllRows, b = e.rowSelection, h = Vt(e, [ "actions", "actionsColumnWidth", "cellMinWidth", "children", "elementRef", "hasDragColumn", "hasInfoColumn", "onAutosizeColumn", "onRequestMoveColumn", "onRequestResizeColumn", "onRequestToggleAllRows", "rowSelection" ]);
-        var y = (0, t.useContext)(Kt), g = y.headType, w = y.tableContainerWidthWithoutBorders, C = y.resizableFillLayout;
+        // @docs-props-type HeadPropsBase
+                var y = (0, t.useContext)(Kt), g = y.headType, w = y.tableContainerWidthWithoutBorders, C = y.resizableFillLayout;
         var x = (0, t.useRef)(null);
         var S = (0, t.useRef)([]);
         (0, t.useEffect)((function() {
@@ -2632,7 +2639,8 @@
  * then be positioned in different ways outside of the main table.
  */    function Ar(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, y = jr(e, [ "cellWidths", "elementRef", "hasDragColumn", "hasRowExpansion", "hasRowSelection", "headType", "horizontalOffset", "isFixedColumn", "tableStyle", "tableWidth", "tHead", "top", "width" ]);
-        var g = u === "docked";
+        // @docs-props-type HeadTablePropsBase
+                var g = u === "docked";
         var w = g ? Er : Ir;
         var C = (0, t.useRef)(null);
         var x = (0, t.useCallback)((function(e) {