@stokr/components-library 2.3.65-beta.1 → 2.3.65-beta.10

package/dist/components/2FA/main-flow.js

@@ -10,7 +10,6 @@ var _AuthContext = require("../../context/AuthContext");
 var _ComponentWrapper = _interopRequireDefault(require("../ComponentWrapper/ComponentWrapper.styles"));
 var _Switch = _interopRequireDefault(require("../Switch/Switch"));
 var _Text = _interopRequireDefault(require("../Text/Text.styles"));
-var _Button = _interopRequireDefault(require("../Button/Button.styles"));
 var _loginWithOtpFlow = _interopRequireDefault(require("./login-with-otp-flow"));
 var _enable2faFlow = _interopRequireDefault(require("./enable-2fa-flow"));
 var _disable2faFlow = _interopRequireDefault(require("./disable-2fa-flow"));
@@ -18,7 +17,7 @@ var _colors = _interopRequireDefault(require("../../styles/colors"));
 var _InfoIcon = _interopRequireDefault(require("../InfoIcon/InfoIcon"));
 var _Modal = require("../Modal/Modal");
 var _Sucess2FA = _interopRequireDefault(require("./Sucess2FA"));
-const _excluded = ["onRequiresRecentLoginError", "open2faflow", "onLoginAgainClick", "openDisable2faflow"];
+const _excluded = ["onRequiresRecentLoginError", "open2faflow", "onLoginAgainClick", "openDisable2faflow", "title", "subtitle", "showSwitch", "customComponent"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -33,7 +32,11 @@ const Main2FAFlow = _ref => {
       onRequiresRecentLoginError,
       open2faflow,
       onLoginAgainClick,
-      openDisable2faflow
+      openDisable2faflow,
+      title = 'SET UP YOUR LOG IN TWO FACTOR AUTHENTICATION',
+      subtitle = 'Protect your account with an additional layer of security to log in',
+      showSwitch = true,
+      customComponent
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   const {
@@ -58,6 +61,7 @@ const Main2FAFlow = _ref => {
       checkMfaEnrollment();
       generateTotp();
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [user, userMfaEnrollment]);
 
   //remove succes message after 5 seconds
@@ -70,7 +74,7 @@ const Main2FAFlow = _ref => {
   }, [successMessage]);
   const generateTotp = async () => {
     try {
-      const response = await generateTotpSecret(user);
+      const response = await generateTotpSecret();
       settotpData(response);
     } catch (error) {
       if (error.code === 'auth/requires-recent-login' || error.code === 'auth/unsupported-first-factor') {
@@ -79,7 +83,7 @@ const Main2FAFlow = _ref => {
     }
   };
   const switchOpenFlow = (prevFlowId, nextFlowId) => {
-    setIsFlowOpen(_objectSpread(_objectSpread({}, isFlowopen), {}, {
+    setIsFlowOpen(prev => _objectSpread(_objectSpread({}, prev), {}, {
       [prevFlowId]: false,
       [nextFlowId]: true
     }));
@@ -102,10 +106,25 @@ const Main2FAFlow = _ref => {
     });
     onRequiresRecentLoginError && onRequiresRecentLoginError();
   };
+
+  // Expose flow control functions for customComponent
+  const flowActions = {
+    openEnable2FA: () => switchOpenFlow('disable2fa', 'enable2fa'),
+    openDisable2FA: () => switchOpenFlow('enable2fa', 'disable2fa'),
+    closeFlows: () => {
+      setIsFlowOpen({
+        enable2fa: false,
+        disable2fa: false,
+        requiresRecentLogin: false
+      });
+    },
+    is2FAEnabled,
+    isFlowOpen: isFlowopen
+  };
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
     alignVertically: true,
     noPaddingHorizontal: true
-  }, /*#__PURE__*/_react.default.createElement(_Text.default, null, /*#__PURE__*/_react.default.createElement("h5", null, "SET UP YOUR LOG IN TWO FACTOR AUTHENTICATION"))), /*#__PURE__*/_react.default.createElement(_Text.default, null, /*#__PURE__*/_react.default.createElement("p", null, "Protect your account with an additional layer of security to log in")), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+  }, /*#__PURE__*/_react.default.createElement(_Text.default, null, /*#__PURE__*/_react.default.createElement("h5", null, title))), /*#__PURE__*/_react.default.createElement(_Text.default, null, /*#__PURE__*/_react.default.createElement("p", null, subtitle)), showSwitch && /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
     noPaddingHorizontal: true
   }, /*#__PURE__*/_react.default.createElement(_InfoIcon.default, {
     position: 'top',
@@ -146,7 +165,9 @@ const Main2FAFlow = _ref => {
       bottom: 0,
       left: 0
     }
-  }, /*#__PURE__*/_react.default.createElement("p", null, successMessage))), isFlowopen.enable2fa && /*#__PURE__*/_react.default.createElement(_enable2faFlow.default, {
+  }, /*#__PURE__*/_react.default.createElement("p", null, successMessage))), customComponent && (typeof customComponent === 'function' ? customComponent(flowActions) : /*#__PURE__*/_react.default.isValidElement(customComponent) ? /*#__PURE__*/_react.default.cloneElement(customComponent, {
+    flowActions
+  }) : customComponent), isFlowopen.enable2fa && /*#__PURE__*/_react.default.createElement(_enable2faFlow.default, {
     showFlow: isFlowopen.enable2fa,
     setShowFlow: value => setIsFlowOpen(_objectSpread(_objectSpread({}, isFlowopen), {}, {
       enable2fa: value

package/dist/components/2FA/main-flow.stories.js

@@ -3,31 +3,160 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.MainFlow = void 0;
-var _react = _interopRequireDefault(require("react"));
+exports.default = exports.WithoutSwitch = exports.WithCustomComponentFunction = exports.WithCustomComponent = exports.PreOpenedEnableFlow = exports.PreOpenedDisableFlow = exports.Default = exports.CustomTitles = void 0;
+var _react = _interopRequireWildcard(require("react"));
 var _reactRouterDom = require("react-router-dom");
 var _global = _interopRequireDefault(require("../../styles/global"));
 var _mainFlow = _interopRequireDefault(require("./main-flow"));
 var _AuthContext = require("../../context/AuthContext");
+var _Button = _interopRequireDefault(require("../Button/Button.styles"));
+var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 var _default = exports.default = {
-  title: 'Components Library/2FA',
+  title: 'Components Library/2FA/Main2FAFlow',
   component: _mainFlow.default,
   argTypes: {
-    showFlow: {
-      type: 'boolean',
+    title: {
+      control: 'text',
+      description: 'Title text for the 2FA section'
+    },
+    subtitle: {
+      control: 'text',
+      description: 'Subtitle text for the 2FA section'
+    },
+    showSwitch: {
+      control: 'boolean',
+      description: 'Show/hide the toggle switch',
       defaultValue: true
     },
-    setShowFlow: {},
-    setShowPending: {},
-    withSuccessPage: {
-      type: 'boolean',
-      defaultValue: false
+    open2faflow: {
+      control: 'boolean',
+      description: 'Open enable 2FA flow on mount'
+    },
+    openDisable2faflow: {
+      control: 'boolean',
+      description: 'Open disable 2FA flow on mount'
+    },
+    onRequiresRecentLoginError: {
+      action: 'requiresRecentLogin',
+      description: 'Callback when recent login is required'
+    },
+    onLoginAgainClick: {
+      action: 'loginAgain',
+      description: 'Callback when user clicks login again'
+    }
+  },
+  decorators: [Story => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactRouterDom.BrowserRouter, null, /*#__PURE__*/_react.default.createElement(_AuthContext.AuthProvider, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(Story, null))))]
+};
+const Template = args => /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_mainFlow.default, args));
+
+// Default example
+const Default = exports.Default = Template.bind({});
+Default.args = {};
+
+// With custom component as React element
+const WithCustomComponent = () => {
+  const CustomButtonGroup = _ref => {
+    var _flowActions$isFlowOp, _flowActions$isFlowOp2;
+    let {
+      flowActions
+    } = _ref;
+    if (!flowActions) return null;
+    return /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, {
+      noPaddingHorizontal: true,
+      style: {
+        marginTop: '16px'
+      }
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        display: 'flex',
+        gap: '12px',
+        flexWrap: 'wrap'
+      }
+    }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+      onClick: flowActions.openEnable2FA,
+      disabled: flowActions.is2FAEnabled
+    }, "Enable 2FA"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+      onClick: flowActions.openDisable2FA,
+      disabled: !flowActions.is2FAEnabled,
+      secondary: true
+    }, "Disable 2FA"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+      onClick: flowActions.closeFlows,
+      outline: true
+    }, "Close All Flows")), /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        marginTop: '12px',
+        fontSize: '12px',
+        color: '#666'
+      }
+    }, /*#__PURE__*/_react.default.createElement("p", null, "Status: ", flowActions.is2FAEnabled ? 'Enabled' : 'Disabled', /*#__PURE__*/_react.default.createElement("br", null), "Enable Flow Open: ", (_flowActions$isFlowOp = flowActions.isFlowOpen) !== null && _flowActions$isFlowOp !== void 0 && _flowActions$isFlowOp.enable2fa ? 'Yes' : 'No', /*#__PURE__*/_react.default.createElement("br", null), "Disable Flow Open:", ' ', (_flowActions$isFlowOp2 = flowActions.isFlowOpen) !== null && _flowActions$isFlowOp2 !== void 0 && _flowActions$isFlowOp2.disable2fa ? 'Yes' : 'No')));
+  };
+  return /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_mainFlow.default, {
+    customComponent: /*#__PURE__*/_react.default.createElement(CustomButtonGroup, null)
+  }));
+};
+
+// With custom component as render function
+exports.WithCustomComponent = WithCustomComponent;
+const WithCustomComponentFunction = () => {
+  return /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_mainFlow.default, {
+    customComponent: flowActions => {
+      if (!flowActions) return null;
+      return /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, {
+        noPaddingHorizontal: true,
+        style: {
+          marginTop: '16px'
+        }
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        style: {
+          display: 'flex',
+          gap: '12px',
+          flexWrap: 'wrap'
+        }
+      }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+        onClick: flowActions.openEnable2FA,
+        disabled: flowActions.is2FAEnabled
+      }, "Enable 2FA"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+        onClick: flowActions.openDisable2FA,
+        disabled: !flowActions.is2FAEnabled,
+        secondary: true
+      }, "Disable 2FA"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+        onClick: flowActions.closeFlows,
+        outline: true
+      }, "Close All Flows")), /*#__PURE__*/_react.default.createElement("div", {
+        style: {
+          marginTop: '12px',
+          fontSize: '12px',
+          color: '#666'
+        }
+      }, /*#__PURE__*/_react.default.createElement("p", null, "Status: ", flowActions.is2FAEnabled ? 'Enabled' : 'Disabled')));
     }
-  }
+  }));
 };
-const Template = args => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactRouterDom.BrowserRouter, null, /*#__PURE__*/_react.default.createElement(_AuthContext.AuthProvider, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_mainFlow.default, args), /*#__PURE__*/_react.default.createElement("p", null, "some text"))));
-const MainFlow = exports.MainFlow = Template.bind({});
-MainFlow.args = {
-  //open2faflow: true,
+
+// Without switch
+exports.WithCustomComponentFunction = WithCustomComponentFunction;
+const WithoutSwitch = exports.WithoutSwitch = Template.bind({});
+WithoutSwitch.args = {
+  showSwitch: false
+};
+
+// Custom titles
+const CustomTitles = exports.CustomTitles = Template.bind({});
+CustomTitles.args = {
+  title: 'Two-Factor Authentication',
+  subtitle: 'Add an extra layer of security to your account'
+};
+
+// Pre-opened enable flow
+const PreOpenedEnableFlow = exports.PreOpenedEnableFlow = Template.bind({});
+PreOpenedEnableFlow.args = {
+  open2faflow: true
+};
+
+// Pre-opened disable flow
+const PreOpenedDisableFlow = exports.PreOpenedDisableFlow = Template.bind({});
+PreOpenedDisableFlow.args = {
+  openDisable2faflow: true
 };

package/dist/components/AdminDashboard/Table/ReactTable.js

@@ -18,6 +18,31 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+// Interactive elements that should NOT trigger row click
+const INTERACTIVE_ELEMENTS = ['button', 'a', 'input', 'select', 'textarea', 'label'];
+
+// Check if an element or its parents are interactive
+const isInteractiveElement = element => {
+  let current = element;
+  while (current && current.tagName !== 'TR') {
+    var _current$tagName, _current$getAttribute, _current, _current$dataset;
+    const tagName = (_current$tagName = current.tagName) === null || _current$tagName === void 0 ? void 0 : _current$tagName.toLowerCase();
+    if (INTERACTIVE_ELEMENTS.includes(tagName)) {
+      return true;
+    }
+    // Check for role="button" or other interactive roles
+    const role = (_current$getAttribute = (_current = current).getAttribute) === null || _current$getAttribute === void 0 ? void 0 : _current$getAttribute.call(_current, 'role');
+    if (role === 'button' || role === 'link') {
+      return true;
+    }
+    // Check for data-clickable attribute (escape hatch for custom interactive elements)
+    if (((_current$dataset = current.dataset) === null || _current$dataset === void 0 ? void 0 : _current$dataset.clickable) === 'true') {
+      return true;
+    }
+    current = current.parentElement;
+  }
+  return false;
+};
 function ReactTable(props) {
   const {
     columns,
@@ -37,6 +62,19 @@ function ReactTable(props) {
     getRowDataCy,
     // Function to generate data-cy attribute: (rowData, rowIndex) => string
 
+    // Row click handler: (rowData, rowIndex, event) => void
+    // Will NOT trigger if clicking on buttons, links, inputs, etc.
+    onRowClick,
+    // Custom expanded content renderer: (row, toggleExpanded) => ReactNode
+    // If provided, this will be used instead of the sub-table
+    renderExpandedContent,
+    // Header click handler: (column, event) => void
+    // Called when a header cell is clicked (useful for sorting/filtering)
+    // Won't trigger if clicking on interactive elements inside header
+    onHeaderClick,
+    // Render custom header content: (column, defaultContent) => ReactNode
+    // Allows wrapping/replacing header content (e.g., add sort icons, dropdowns)
+    renderHeaderContent,
     //instead of passing the subData, we pass a function that will calculate the subData
     //subData must be part of the data array (an array or whatever)
     //calculateSubData is a function that receives the row and returns the subData
@@ -75,6 +113,17 @@ function ReactTable(props) {
     setInputPageSize(pageSize);
   }, [pageSize]);
 
+  // Handle row click with interactive element detection
+  const handleRowClick = (0, _react.useCallback)((row, rowIndex, event) => {
+    if (!onRowClick) return;
+
+    // Don't trigger if clicking on interactive elements
+    if (isInteractiveElement(event.target)) {
+      return;
+    }
+    onRowClick(row.original, rowIndex, event);
+  }, [onRowClick]);
+
   // Function to render cell content with hover support
   const renderCellContent = (cell, rowIndex, rowData) => {
     if (customRowHoverContent && hoveredRowIndex === rowIndex) {
@@ -85,21 +134,65 @@ function ReactTable(props) {
     }
     return cell.render('Cell');
   };
+
+  // Determine if row should have expand functionality
+  const shouldEnableExpand = withSubTable || renderExpandedContent;
+
+  // Handle header click with interactive element detection
+  const handleHeaderClick = (0, _react.useCallback)((column, event) => {
+    // Check for column-level click handler first
+    if (column.onHeaderClick) {
+      // Don't trigger if clicking on interactive elements
+      if (!isInteractiveElement(event.target)) {
+        column.onHeaderClick(column, event);
+      }
+      return;
+    }
+
+    // Fall back to global onHeaderClick
+    if (!onHeaderClick) return;
+
+    // Don't trigger if clicking on interactive elements inside header
+    if (isInteractiveElement(event.target)) {
+      return;
+    }
+    onHeaderClick(column, event);
+  }, [onHeaderClick]);
+
+  // Render header content with optional custom rendering
+  const renderHeader = column => {
+    const defaultContent = column.render('Header');
+
+    // If renderHeaderContent is provided, use it to wrap/modify the header
+    if (renderHeaderContent) {
+      return renderHeaderContent(column, defaultContent);
+    }
+    return defaultContent;
+  };
+
+  // Check if header should be clickable
+  const isHeaderClickable = column => {
+    return column.onHeaderClick || onHeaderClick;
+  };
   return /*#__PURE__*/_react.default.createElement(_Table.Styles, null, /*#__PURE__*/_react.default.createElement(_Table.TableWrap, {
     style: tableWrapStyles
   }, /*#__PURE__*/_react.default.createElement(_Table.StyledReactTable, _extends({}, getTableProps(), {
     customTableStyles: customTableStyles
   }), /*#__PURE__*/_react.default.createElement("thead", null, headerGroups.map(headerGroup => /*#__PURE__*/_react.default.createElement(_Table.StyledReactTable.Tr, headerGroup.getHeaderGroupProps(), headerGroup.headers.map(column => {
     const cellStyles = customThStyles ? customThStyles(column) : {};
+    const clickable = isHeaderClickable(column);
     return /*#__PURE__*/_react.default.createElement(_Table.StyledReactTable.Th, _extends({}, column.getHeaderProps({
       className: column.collapse ? 'collapse' : '',
-      style: _objectSpread({}, cellStyles)
+      style: _objectSpread(_objectSpread({}, cellStyles), clickable ? {
+        cursor: 'pointer'
+      } : {})
     }), {
       blue: blue,
       width: column.width,
       minWidth: column.minWidth,
-      maxWidth: column.maxWidth
-    }), column.render('Header'));
+      maxWidth: column.maxWidth,
+      onClick: clickable ? e => handleHeaderClick(column, e) : undefined
+    }), renderHeader(column));
   })))), /*#__PURE__*/_react.default.createElement("tbody", getTableBodyProps(), page.map((row, i) => {
     prepareRow(row);
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
@@ -112,10 +205,17 @@ function ReactTable(props) {
       rowIndex: i,
       rowData: row.original,
       onMouseEnter: () => setHoveredRowIndex(i),
-      onMouseLeave: () => setHoveredRowIndex(null)
+      onMouseLeave: () => setHoveredRowIndex(null),
+      onClick: e => handleRowClick(row, i, e),
+      style: onRowClick ? {
+        cursor: 'pointer'
+      } : undefined
     }), row.cells.map(cell => {
       const cellStyles = customTdStyles ? customTdStyles(i, row.original, cell.column) : {};
-      return /*#__PURE__*/_react.default.createElement(_Table.StyledReactTable.Td, _extends({}, cell.row.getToggleRowExpandedProps(), {
+
+      // Only apply expand toggle props if expansion is enabled
+      const expandProps = shouldEnableExpand ? cell.row.getToggleRowExpandedProps() : {};
+      return /*#__PURE__*/_react.default.createElement(_Table.StyledReactTable.Td, _extends({}, expandProps, {
         title: ""
       }, cell.getCellProps({
         className: cell.column.collapse ? 'collapse' : '',
@@ -126,7 +226,12 @@ function ReactTable(props) {
         minWidth: cell.column.minWidth,
         maxWidth: cell.column.maxWidth
       }), renderCellContent(cell, i, row.original));
-    })), withSubTable && row.isExpanded && /*#__PURE__*/_react.default.createElement(_Table.StyledReactTable.Tr, {
+    })), renderExpandedContent && row.isExpanded && /*#__PURE__*/_react.default.createElement(_Table.StyledReactTable.Tr, {
+      key: "".concat(row.id, "-expanded")
+    }, /*#__PURE__*/_react.default.createElement(_Table.StyledReactTable.Td, {
+      colSpan: visibleColumns.length,
+      subTable: true
+    }, renderExpandedContent(row, row.toggleRowExpanded))), withSubTable && !renderExpandedContent && row.isExpanded && /*#__PURE__*/_react.default.createElement(_Table.StyledReactTable.Tr, {
       key: "".concat(row.id, "-").concat(i)
     }, /*#__PURE__*/_react.default.createElement(_Table.StyledReactTable.Td, {
       colSpan: visibleColumns.length,
@@ -160,7 +265,18 @@ ReactTable.propTypes = {
   customRowHoverContent: _propTypes.default.func,
   customRowStyles: _propTypes.default.func,
   customTableStyles: _propTypes.default.func,
-  getRowDataCy: _propTypes.default.func // (rowData, rowIndex) => string
+  tableWrapStyles: _propTypes.default.object,
+  customTdStyles: _propTypes.default.func,
+  customThStyles: _propTypes.default.func,
+  getRowDataCy: _propTypes.default.func,
+  // (rowData, rowIndex) => string
+  onRowClick: _propTypes.default.func,
+  // (rowData, rowIndex, event) => void
+  renderExpandedContent: _propTypes.default.func,
+  // (row, toggleExpanded) => ReactNode
+  onHeaderClick: _propTypes.default.func,
+  // (column, event) => void
+  renderHeaderContent: _propTypes.default.func // (column, defaultContent) => ReactNode
 };
 ReactTable.defaultProps = {
   blue: false,