@splunk/react-ui 4.18.0 → 4.20.0

package/Table.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 168);
+/******/ 	return __webpack_require__(__webpack_require__.s = 170);
 /******/ })
 /************************************************************************/
 /******/ ([
@@ -142,12 +142,6 @@ module.exports = require("lodash/keys");
 
 /***/ }),
 /* 10 */
-/***/ (function(module, exports) {
-
-module.exports = require("lodash/has");
-
-/***/ }),
-/* 11 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -172,6 +166,12 @@ function updateReactRef(ref, current) {
 
 
 
+/***/ }),
+/* 11 */
+/***/ (function(module, exports) {
+
+module.exports = require("lodash/has");
+
 /***/ }),
 /* 12 */,
 /* 13 */,
@@ -205,7 +205,7 @@ module.exports = require("@splunk/react-ui/Button");
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return getWindow; });
 /* unused harmony export ssrWindow */
-/* harmony import */ var _ssrDocument__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(27);
+/* harmony import */ var _ssrDocument__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(28);
 /* eslint-disable @typescript-eslint/no-empty-function */
 
 var ssrWindow = {
@@ -302,7 +302,8 @@ module.exports = require("lodash/isString");
 /* 24 */,
 /* 25 */,
 /* 26 */,
-/* 27 */
+/* 27 */,
+/* 28 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -372,95 +373,94 @@ function getDocument() {
 
 
 /***/ }),
-/* 28 */
+/* 29 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/ui-utils/format");
 
 /***/ }),
-/* 29 */,
 /* 30 */,
-/* 31 */
+/* 31 */,
+/* 32 */,
+/* 33 */
 /***/ (function(module, exports) {
 
 module.exports = require("lodash/throttle");
 
 /***/ }),
-/* 32 */,
-/* 33 */,
 /* 34 */,
-/* 35 */
+/* 35 */,
+/* 36 */,
+/* 37 */,
+/* 38 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/enterprise/ChevronRight");
 
 /***/ }),
-/* 36 */,
-/* 37 */,
-/* 38 */,
-/* 39 */,
+/* 39 */
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/react-ui/Switch");
+
+/***/ }),
 /* 40 */,
 /* 41 */,
-/* 42 */
+/* 42 */,
+/* 43 */,
+/* 44 */,
+/* 45 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Tooltip");
 
 /***/ }),
-/* 43 */
+/* 46 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/ChevronRight");
 
 /***/ }),
-/* 44 */,
-/* 45 */,
-/* 46 */,
 /* 47 */,
 /* 48 */,
-/* 49 */
+/* 49 */,
+/* 50 */,
+/* 51 */,
+/* 52 */
 /***/ (function(module, exports) {
 
 module.exports = require("lodash/extend");
 
 /***/ }),
-/* 50 */
+/* 53 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/ScrollContainerContext");
 
 /***/ }),
-/* 51 */,
-/* 52 */,
-/* 53 */
+/* 54 */,
+/* 55 */,
+/* 56 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/CaretSmallDown");
 
 /***/ }),
-/* 54 */
+/* 57 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/enterprise/Caret");
 
 /***/ }),
-/* 55 */,
-/* 56 */,
-/* 57 */,
-/* 58 */
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/react-ui/Switch");
-
-/***/ }),
-/* 59 */
+/* 58 */,
+/* 59 */,
+/* 60 */,
+/* 61 */
 /***/ (function(module, exports) {
 
 module.exports = require("lodash/without");
 
 /***/ }),
-/* 60 */,
-/* 61 */,
 /* 62 */,
 /* 63 */,
 /* 64 */,
@@ -468,24 +468,27 @@ module.exports = require("lodash/without");
 /* 66 */,
 /* 67 */,
 /* 68 */,
-/* 69 */
+/* 69 */,
+/* 70 */,
+/* 71 */
 /***/ (function(module, exports) {
 
 module.exports = require("lodash/isFunction");
 
 /***/ }),
-/* 70 */,
-/* 71 */,
 /* 72 */,
 /* 73 */,
-/* 74 */
+/* 74 */,
+/* 75 */,
+/* 76 */,
+/* 77 */
 /***/ (function(module, exports) {
 
 module.exports = require("lodash/isNumber");
 
 /***/ }),
-/* 75 */,
-/* 76 */
+/* 78 */,
+/* 79 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -508,27 +511,24 @@ function assertDefined(val, msg) {
 
 
 /***/ }),
-/* 77 */,
-/* 78 */,
-/* 79 */,
 /* 80 */,
-/* 81 */
+/* 81 */,
+/* 82 */,
+/* 83 */,
+/* 84 */
 /***/ (function(module, exports) {
 
 module.exports = require("lodash/indexOf");
 
 /***/ }),
-/* 82 */,
-/* 83 */,
-/* 84 */
+/* 85 */,
+/* 86 */,
+/* 87 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/DotsThreeVertical");
 
 /***/ }),
-/* 85 */,
-/* 86 */,
-/* 87 */,
 /* 88 */,
 /* 89 */,
 /* 90 */,
@@ -549,31 +549,36 @@ module.exports = require("@splunk/react-icons/DotsThreeVertical");
 /* 105 */,
 /* 106 */,
 /* 107 */,
-/* 108 */
+/* 108 */,
+/* 109 */,
+/* 110 */,
+/* 111 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/CaretsSmallUpDown");
 
 /***/ }),
-/* 109 */,
-/* 110 */,
-/* 111 */
+/* 112 */,
+/* 113 */,
+/* 114 */
 /***/ (function(module, exports) {
 
 module.exports = require("lodash/findIndex");
 
 /***/ }),
-/* 112 */
+/* 115 */
 /***/ (function(module, exports) {
 
 module.exports = require("lodash/merge");
 
 /***/ }),
-/* 113 */,
-/* 114 */,
-/* 115 */,
 /* 116 */,
-/* 117 */,
+/* 117 */
+/***/ (function(module, exports) {
+
+module.exports = require("lodash/isEqual");
+
+/***/ }),
 /* 118 */,
 /* 119 */,
 /* 120 */,
@@ -613,53 +618,50 @@ module.exports = require("lodash/merge");
 /* 154 */,
 /* 155 */,
 /* 156 */,
-/* 157 */
+/* 157 */,
+/* 158 */,
+/* 159 */,
+/* 160 */
 /***/ (function(module, exports) {
 
 module.exports = require("lodash/forEach");
 
 /***/ }),
-/* 158 */
-/***/ (function(module, exports) {
-
-module.exports = require("lodash/isEqual");
-
-/***/ }),
-/* 159 */
+/* 161 */
 /***/ (function(module, exports) {
 
 module.exports = require("react-resize-detector");
 
 /***/ }),
-/* 160 */
+/* 162 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/ArrowDown");
 
 /***/ }),
-/* 161 */
+/* 163 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/ArrowUp");
 
 /***/ }),
-/* 162 */
+/* 164 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/ArrowUpDown");
 
 /***/ }),
-/* 163 */
+/* 165 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/enterprise/Info");
 
 /***/ }),
-/* 164 */,
-/* 165 */,
 /* 166 */,
 /* 167 */,
-/* 168 */
+/* 168 */,
+/* 169 */,
+/* 170 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -685,34 +687,34 @@ var external_prop_types_ = __webpack_require__(1);
 var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_prop_types_);
 
 // EXTERNAL MODULE: external "lodash/forEach"
-var forEach_ = __webpack_require__(157);
+var forEach_ = __webpack_require__(160);
 var forEach_default = /*#__PURE__*/__webpack_require__.n(forEach_);
 
 // EXTERNAL MODULE: external "lodash/has"
-var has_ = __webpack_require__(10);
+var has_ = __webpack_require__(11);
 var has_default = /*#__PURE__*/__webpack_require__.n(has_);
 
 // EXTERNAL MODULE: external "lodash/indexOf"
-var indexOf_ = __webpack_require__(81);
+var indexOf_ = __webpack_require__(84);
 var indexOf_default = /*#__PURE__*/__webpack_require__.n(indexOf_);
 
 // EXTERNAL MODULE: external "lodash/isEqual"
-var isEqual_ = __webpack_require__(158);
+var isEqual_ = __webpack_require__(117);
 var isEqual_default = /*#__PURE__*/__webpack_require__.n(isEqual_);
 
 // EXTERNAL MODULE: external "lodash/isNumber"
-var isNumber_ = __webpack_require__(74);
+var isNumber_ = __webpack_require__(77);
 
 // EXTERNAL MODULE: external "lodash/omit"
 var omit_ = __webpack_require__(5);
 var omit_default = /*#__PURE__*/__webpack_require__.n(omit_);
 
 // EXTERNAL MODULE: external "lodash/throttle"
-var throttle_ = __webpack_require__(31);
+var throttle_ = __webpack_require__(33);
 var throttle_default = /*#__PURE__*/__webpack_require__.n(throttle_);
 
 // EXTERNAL MODULE: external "react-resize-detector"
-var external_react_resize_detector_ = __webpack_require__(159);
+var external_react_resize_detector_ = __webpack_require__(161);
 var external_react_resize_detector_default = /*#__PURE__*/__webpack_require__.n(external_react_resize_detector_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/EventListener"
@@ -723,10 +725,10 @@ var EventListener_default = /*#__PURE__*/__webpack_require__.n(EventListener_);
 var keyboard_ = __webpack_require__(7);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/ScrollContainerContext"
-var ScrollContainerContext_ = __webpack_require__(50);
+var ScrollContainerContext_ = __webpack_require__(53);
 
 // EXTERNAL MODULE: external "lodash/findIndex"
-var findIndex_ = __webpack_require__(111);
+var findIndex_ = __webpack_require__(114);
 var findIndex_default = /*#__PURE__*/__webpack_require__.n(findIndex_);
 
 // EXTERNAL MODULE: external "lodash/includes"
@@ -734,7 +736,7 @@ var includes_ = __webpack_require__(15);
 var includes_default = /*#__PURE__*/__webpack_require__.n(includes_);
 
 // EXTERNAL MODULE: external "lodash/without"
-var without_ = __webpack_require__(59);
+var without_ = __webpack_require__(61);
 var without_default = /*#__PURE__*/__webpack_require__.n(without_);
 
 // EXTERNAL MODULE: external "styled-components"
@@ -753,7 +755,7 @@ var Styled = external_styled_components_default.a.tbody.withConfig({
 })(["", " z-index:0;"], themes_["mixins"].reset('table-row-group'));
 
 // EXTERNAL MODULE: ./src/utils/updateReactRef.ts
-var updateReactRef = __webpack_require__(11);
+var updateReactRef = __webpack_require__(10);
 
 // EXTERNAL MODULE: ./src/utils/ssrWindow.ts
 var ssrWindow = __webpack_require__(18);
@@ -1448,31 +1450,31 @@ var isString_ = __webpack_require__(23);
 var isString_default = /*#__PURE__*/__webpack_require__.n(isString_);
 
 // EXTERNAL MODULE: external "lodash/merge"
-var merge_ = __webpack_require__(112);
+var merge_ = __webpack_require__(115);
 var merge_default = /*#__PURE__*/__webpack_require__.n(merge_);
 
 // EXTERNAL MODULE: external "@splunk/react-icons/ArrowDown"
-var ArrowDown_ = __webpack_require__(160);
+var ArrowDown_ = __webpack_require__(162);
 var ArrowDown_default = /*#__PURE__*/__webpack_require__.n(ArrowDown_);
 
 // EXTERNAL MODULE: external "@splunk/react-icons/ArrowUp"
-var ArrowUp_ = __webpack_require__(161);
+var ArrowUp_ = __webpack_require__(163);
 var ArrowUp_default = /*#__PURE__*/__webpack_require__.n(ArrowUp_);
 
 // EXTERNAL MODULE: external "@splunk/react-icons/ArrowUpDown"
-var ArrowUpDown_ = __webpack_require__(162);
+var ArrowUpDown_ = __webpack_require__(164);
 var ArrowUpDown_default = /*#__PURE__*/__webpack_require__.n(ArrowUpDown_);
 
 // EXTERNAL MODULE: external "@splunk/react-icons/CaretSmallDown"
-var CaretSmallDown_ = __webpack_require__(53);
+var CaretSmallDown_ = __webpack_require__(56);
 var CaretSmallDown_default = /*#__PURE__*/__webpack_require__.n(CaretSmallDown_);
 
 // EXTERNAL MODULE: external "@splunk/react-icons/CaretsSmallUpDown"
-var CaretsSmallUpDown_ = __webpack_require__(108);
+var CaretsSmallUpDown_ = __webpack_require__(111);
 var CaretsSmallUpDown_default = /*#__PURE__*/__webpack_require__.n(CaretsSmallUpDown_);
 
 // EXTERNAL MODULE: external "@splunk/react-icons/enterprise/Caret"
-var Caret_ = __webpack_require__(54);
+var Caret_ = __webpack_require__(57);
 var Caret_default = /*#__PURE__*/__webpack_require__.n(Caret_);
 
 // EXTERNAL MODULE: external "@splunk/ui-utils/i18n"
@@ -1814,7 +1816,7 @@ function DragHandle(_ref) {
 DragHandle.propTypes = DragHandle_propTypes;
 /* harmony default export */ var Table_DragHandle = (DragHandle);
 // EXTERNAL MODULE: ./src/utils/ssrDocument.ts
-var ssrDocument = __webpack_require__(27);
+var ssrDocument = __webpack_require__(28);
 
 // CONCATENATED MODULE: ./src/Table/HeadInner.tsx
 function HeadInner_extends() { HeadInner_extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return HeadInner_extends.apply(this, arguments); }
@@ -2467,11 +2469,11 @@ HeadCell_defineProperty(HeadCell_HeadCell, "contextType", Table_TableContext);
 
 /* harmony default export */ var Table_HeadCell = (HeadCell_HeadCell);
 // EXTERNAL MODULE: external "@splunk/react-icons/enterprise/Info"
-var Info_ = __webpack_require__(163);
+var Info_ = __webpack_require__(165);
 var Info_default = /*#__PURE__*/__webpack_require__.n(Info_);
 
 // EXTERNAL MODULE: external "@splunk/react-icons/ChevronRight"
-var ChevronRight_ = __webpack_require__(43);
+var ChevronRight_ = __webpack_require__(46);
 var ChevronRight_default = /*#__PURE__*/__webpack_require__.n(ChevronRight_);
 
 // CONCATENATED MODULE: ./src/Table/icons/HeadExpandRows.tsx
@@ -2498,7 +2500,7 @@ function HeadExpandRows() {
   });
 }
 // EXTERNAL MODULE: external "@splunk/react-icons/DotsThreeVertical"
-var DotsThreeVertical_ = __webpack_require__(84);
+var DotsThreeVertical_ = __webpack_require__(87);
 var DotsThreeVertical_default = /*#__PURE__*/__webpack_require__.n(DotsThreeVertical_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/Button"
@@ -2510,14 +2512,14 @@ var Dropdown_ = __webpack_require__(22);
 var Dropdown_default = /*#__PURE__*/__webpack_require__.n(Dropdown_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/Tooltip"
-var Tooltip_ = __webpack_require__(42);
+var Tooltip_ = __webpack_require__(45);
 var Tooltip_default = /*#__PURE__*/__webpack_require__.n(Tooltip_);
 
 // EXTERNAL MODULE: external "@splunk/ui-utils/format"
-var format_ = __webpack_require__(28);
+var format_ = __webpack_require__(29);
 
 // EXTERNAL MODULE: external "@splunk/react-icons/enterprise/ChevronRight"
-var enterprise_ChevronRight_ = __webpack_require__(35);
+var enterprise_ChevronRight_ = __webpack_require__(38);
 var enterprise_ChevronRight_default = /*#__PURE__*/__webpack_require__.n(enterprise_ChevronRight_);
 
 // CONCATENATED MODULE: ./src/Table/icons/ExpansionRow.tsx
@@ -2857,7 +2859,7 @@ var StyledCellExpansionDisabled = external_styled_components_default()(Table_Cel
 }));
 
 // EXTERNAL MODULE: external "@splunk/react-ui/Switch"
-var Switch_ = __webpack_require__(58);
+var Switch_ = __webpack_require__(39);
 var Switch_default = /*#__PURE__*/__webpack_require__.n(Switch_);
 
 // CONCATENATED MODULE: ./src/Table/ToggleStyles.ts
@@ -3738,7 +3740,7 @@ var isFinite_ = __webpack_require__(19);
 var isFinite_default = /*#__PURE__*/__webpack_require__.n(isFinite_);
 
 // EXTERNAL MODULE: external "lodash/isFunction"
-var isFunction_ = __webpack_require__(69);
+var isFunction_ = __webpack_require__(71);
 var isFunction_default = /*#__PURE__*/__webpack_require__.n(isFunction_);
 
 // EXTERNAL MODULE: external "@splunk/ui-utils/id"
@@ -4208,7 +4210,7 @@ HeadDropdownCell_defineProperty(HeadDropdownCell_HeadDropdownCell, "contextType"
 
 /* harmony default export */ var Table_HeadDropdownCell = (HeadDropdownCell_HeadDropdownCell);
 // EXTERNAL MODULE: external "lodash/extend"
-var extend_ = __webpack_require__(49);
+var extend_ = __webpack_require__(52);
 var extend_default = /*#__PURE__*/__webpack_require__.n(extend_);
 
 // CONCATENATED MODULE: ./src/Table/HeadTableStyles.ts
@@ -4397,7 +4399,7 @@ HeadTable_defineProperty(HeadTable_HeadTable, "defaultProps", HeadTable_defaultP
 
 /* harmony default export */ var Table_HeadTable = (HeadTable_HeadTable);
 // EXTERNAL MODULE: ./src/utils/types.ts
-var types = __webpack_require__(76);
+var types = __webpack_require__(79);
 
 // CONCATENATED MODULE: ./src/Table/Table.tsx
 function Table_typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { Table_typeof = function _typeof(obj) { return typeof obj; }; } else { Table_typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return Table_typeof(obj); }
@@ -4838,6 +4840,38 @@ var Table_Table = /*#__PURE__*/function (_Component) {
 
       if (false) {}
     }
+    /**
+     * Add this lifecycle method to improve the performance of this giant component.
+     */
+
+  }, {
+    key: "shouldComponentUpdate",
+    value: function shouldComponentUpdate(nextProps, nextState) {
+      if (this.props.dockScrollBar) {
+        /**
+         * We should always re-render the component when dockScrollBar is true for now.
+         * Because the docked scroll bar needs to know its accurate position every time scroll event happens.
+         *
+         * A more proper way to fix this is probably putting the docked scroll bar into its own component definition class and letting it listen to the scroll event from the parent.
+         * So only the scroll bar component is rerendering itself every time the table scrolls.
+         */
+        return true;
+      }
+
+      return (
+        /**
+         * Using deep equal from lodash here to compare the rest of the properties and states to avoid unnecessary re-rendering.
+         * Although it's suggested by React Official(https://react.dev/reference/react/Component#shouldcomponentupdate)
+         * that deep equal shouldn't be used in shouldComponentUpdate, for this component's case, the re-rendering cost is much more than
+         * the calculation cost of the deep equal operations.
+         *
+         * Alternatively, we could consider
+         * 1. using https://www.npmjs.com/package/react-fast-compare or
+         * 2. listing all the object-like properties and states and optimatize the comparing algorithm based on their structure.
+         */
+        !isEqual_default()(this.props, nextProps) || !isEqual_default()(this.state, nextState)
+      );
+    }
   }, {
     key: "componentDidMount",
     value: function componentDidMount() {