oa-componentbook 1.0.1-stage.453 → 1.0.1-stage.454

package/build/components/oa-component-info/CustomInfo.js

@@ -1,19 +1,27 @@
 "use strict";
 
+require("core-js/modules/es.weak-map.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = CustomInfo;
 require("core-js/modules/es.symbol.description.js");
-var _react = _interopRequireDefault(require("react"));
+require("core-js/modules/web.dom-collections.iterator.js");
+var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _antd = require("antd");
+var _CloseRounded = _interopRequireDefault(require("@material-ui/icons/CloseRounded"));
 var _styles = require("./styles");
 var _CustomButton = _interopRequireDefault(require("../oa-component-button/CustomButton"));
 var _Typography = _interopRequireDefault(require("../oa-component-typography/Typography"));
+var _MaterialIcon = _interopRequireDefault(require("../oa-component-icons/MaterialIcon"));
 var _colorOptions = require("../../global-css/color-options");
 require("antd/dist/reset.css");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/* eslint-disable */
+
 /**
  * A component for displaying a single piece of information with an optional icon
  * and/or button. The icon can be placed on either the left or right of the text.
@@ -28,6 +36,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * @param {object} iconConfig - Configuration for the icon.
  * @param {string} title - The title to be displayed.
  * @param {string} borderColor - The border color of the component.
+ * @param {boolean} closable - Whether to show a close button.
+ * @param {function} onClose - Callback function called when close button is clicked.
  *
  * @returns {ReactElement} A styled component with the specified properties.
  */
@@ -39,8 +49,20 @@ function CustomInfo(_ref) {
     fontColor,
     iconConfig,
     title,
-    borderColor
+    borderColor,
+    closable,
+    onClose
   } = _ref;
+  const [visible, setVisible] = (0, _react.useState)(true);
+  const handleClose = () => {
+    setVisible(false);
+    if (onClose) {
+      onClose();
+    }
+  };
+  if (!visible) {
+    return null;
+  }
   /**
    * Renders the icon based on the presence of a title.
    * If a title is not provided and the icon is a valid React element,
@@ -69,7 +91,15 @@ function CustomInfo(_ref) {
   return /*#__PURE__*/_react.default.createElement(_styles.InfoContainer, {
     $color: color,
     $borderColor: borderColor
-  }, /*#__PURE__*/_react.default.createElement(_styles.RowFlex, null, iconConfig.position === 'left' && conditionallyAddTooltipToIcon(), /*#__PURE__*/_react.default.createElement(_styles.ColFlex, null, title && /*#__PURE__*/_react.default.createElement(_Typography.default, {
+  }, /*#__PURE__*/_react.default.createElement(_styles.RowFlex, {
+    style: {
+      width: '100%'
+    }
+  }, iconConfig.position === 'left' && conditionallyAddTooltipToIcon(), /*#__PURE__*/_react.default.createElement(_styles.ColFlex, {
+    style: {
+      flex: 1
+    }
+  }, title && /*#__PURE__*/_react.default.createElement(_Typography.default, {
     color: fontColor,
     typography: "type-t2-700"
   }, title), description && /*#__PURE__*/_react.default.createElement("div", {
@@ -77,7 +107,13 @@ function CustomInfo(_ref) {
     style: {
       color: "var(--color-".concat(fontColor, ")")
     }
-  }, description)), iconConfig.position === 'right' && conditionallyAddTooltipToIcon()), (buttonConfig === null || buttonConfig === void 0 ? void 0 : buttonConfig.label) && /*#__PURE__*/_react.default.createElement(_CustomButton.default, buttonConfig));
+  }, description)), iconConfig.position === 'right' && conditionallyAddTooltipToIcon(), closable && /*#__PURE__*/_react.default.createElement(_styles.CloseButton, {
+    onClick: handleClose
+  }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+    icon: _CloseRounded.default,
+    color: "secondary-content",
+    size: title ? 24 : 20
+  }))), (buttonConfig === null || buttonConfig === void 0 ? void 0 : buttonConfig.label) && /*#__PURE__*/_react.default.createElement(_CustomButton.default, buttonConfig));
 }
 CustomInfo.propTypes = {
   buttonConfig: _propTypes.default.shape({
@@ -100,7 +136,9 @@ CustomInfo.propTypes = {
     tooltipText: _propTypes.default.string
   }),
   title: _propTypes.default.string,
-  borderColor: _propTypes.default.string
+  borderColor: _propTypes.default.string,
+  closable: _propTypes.default.bool,
+  onClose: _propTypes.default.func
 };
 CustomInfo.defaultProps = {
   buttonConfig: {
@@ -115,5 +153,7 @@ CustomInfo.defaultProps = {
   fontColor: 'primary-content',
   title: '',
   description: '',
-  borderColor: ''
+  borderColor: '',
+  closable: false,
+  onClose: null
 };

package/build/components/oa-component-info/styles.js

@@ -3,13 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.RowFlex = exports.InfoContainer = exports.ColFlex = void 0;
+exports.RowFlex = exports.InfoContainer = exports.ColFlex = exports.CloseButton = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 const RowFlex = exports.RowFlex = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n"])));
 const ColFlex = exports.ColFlex = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n"])));
 const InfoContainer = exports.InfoContainer = (0, _styledComponents.default)(RowFlex).attrs({
   as: 'section'
-})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding: 12px;\n  align-items: center;\n  border-radius: 8px;\n  background-color: var(--color-", ");\n  border: 1px solid var(--color-", ");\n\n  button {\n    margin-left: 8px;\n  }\n"])), props => props.$color, props => props.$borderColor);
+})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding: 12px;\n  align-items: center;\n  border-radius: 8px;\n  background-color: var(--color-", ");\n  border: 1px solid var(--color-", ");\n\n  button {\n    margin-left: 8px;\n  }\n"])), props => props.$color, props => props.$borderColor);
+const CloseButton = exports.CloseButton = _styledComponents.default.button(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 0;\n  margin-left: auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 16px;\n  transition: opacity 0.2s;\n\n  &:hover {\n    opacity: 0.7;\n  }\n\n  &:active {\n    opacity: 0.5;\n  }\n"])));

package/build/components/oa-component-table/CustomTableV1.js

@@ -251,9 +251,10 @@ function CustomTableV1(_ref2) {
                   label: (option === null || option === void 0 ? void 0 : option.label) || (record === null || record === void 0 ? void 0 : record[option === null || option === void 0 ? void 0 : option.key]) || "",
                   onClick: () => customTableChange(record, config)
                 }) : (option === null || option === void 0 ? void 0 : option.type) === "tag" ? /*#__PURE__*/_react.default.createElement(_CustomTag.default, {
+                  style: _objectSpread({}, typeof getByPath(record, option === null || option === void 0 ? void 0 : option.styleKey) === "object" ? getByPath(record, option === null || option === void 0 ? void 0 : option.styleKey) : {}),
                   label: getByPath(record, option === null || option === void 0 ? void 0 : option.key) || "",
-                  type: getByPath(record, option === null || option === void 0 ? void 0 : option.tagType) || (option === null || option === void 0 ? void 0 : option.tagType) || "primary",
-                  visible: true
+                  type: getByPath(record, option === null || option === void 0 ? void 0 : option.tagType) || (option === null || option === void 0 ? void 0 : option.tagType) || "primary"
+                  // visible={option?.visible??true}
                 }) : /*#__PURE__*/_react.default.createElement(_Typography.default, {
                   typography: (option === null || option === void 0 ? void 0 : option.typography) || (col === null || col === void 0 ? void 0 : col.customStyle) && (record === null || record === void 0 || (_record$option$styleK = record[option === null || option === void 0 ? void 0 : option.styleKey]) === null || _record$option$styleK === void 0 ? void 0 : _record$option$styleK.typography) || "type-b2-400",
                   color: (option === null || option === void 0 ? void 0 : option.color) || (col === null || col === void 0 ? void 0 : col.customStyle) && (record === null || record === void 0 || (_record$option$styleK2 = record[option === null || option === void 0 ? void 0 : option.styleKey]) === null || _record$option$styleK2 === void 0 ? void 0 : _record$option$styleK2.color)

package/build/components/oa-component-tabs/CustomTabs.js

@@ -10,9 +10,12 @@ var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _antd = require("antd");
 var _utils = require("../../utils");
+var _CustomToggle = _interopRequireDefault(require("../oa-component-toggle/CustomToggle"));
+var _Typography = _interopRequireDefault(require("../oa-component-typography/Typography"));
 var _styles = require("./styles");
-const _excluded = ["data", "data-test", "defaultActiveKey", "disabled", "style", "tabPosition", "type"],
+const _excluded = ["data", "data-test", "defaultActiveKey", "disabled", "extraAction", "style", "tabPosition", "type"],
   _excluded2 = ["body", "disabled", "key", "label"];
+/* eslint-disable */
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 _extends.apply(this, arguments); }
 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; }
@@ -29,6 +32,10 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
  * @param {string} [data-test] - A string to be used as data-test attribute.
  * @param {string} defaultActiveKey - Key of the initially active tab.
  * @param {boolean} disabled - Whether the tabs are disabled.
+ * @param {Object} extraAction - Configuration for extra action on the right side of tabs.
+ * @param {string} extraAction.type - Type of extra action ('switch').
+ * @param {boolean} extraAction.visible - Whether to show the extra action (default: true).
+ * @param {Object} extraAction.props - Props to pass to the extra action component.
  * @param {Object} style - An object containing CSS styles for the component.
  * @param {'top'|'right'|'bottom'|'left'} tabPosition - Position of the tab headers.
  * @param {'line'|'card'} type - Type of the tabs.
@@ -41,6 +48,7 @@ function CustomTabs(_ref) {
       'data-test': dataTest,
       defaultActiveKey,
       disabled,
+      extraAction,
       style,
       tabPosition,
       type
@@ -63,13 +71,42 @@ function CustomTabs(_ref) {
       }, label) : label
     }, otherProps);
   });
+
+  /**
+   * Renders the extra action component based on the type.
+   * @returns {React.ReactNode} The rendered extra action component or null.
+   */
+  const renderExtraAction = () => {
+    if (!extraAction || !extraAction.type) {
+      return null;
+    }
+
+    // Check if extraAction is visible (defaults to true if not specified)
+    if (extraAction.visible === false) {
+      return null;
+    }
+    switch (extraAction.type) {
+      case 'switch':
+        return /*#__PURE__*/_react.default.createElement(_styles.ExtraActionWrapper, null, extraAction.label && /*#__PURE__*/_react.default.createElement(_Typography.default, {
+          color: extraAction.labelColor || 'secondary-content',
+          typography: extraAction.labelTypography || 'type-b2-400'
+        }, extraAction.label), /*#__PURE__*/_react.default.createElement(_CustomToggle.default, _extends({
+          "data-test": dataTest ? "".concat(dataTest, "--extra-action-switch") : undefined,
+          size: extraAction.size || 'small'
+        }, extraAction.props)));
+      default:
+        return null;
+    }
+  };
+  const tabBarExtraContent = renderExtraAction();
   return /*#__PURE__*/_react.default.createElement(_styles.StyledTabs, null, /*#__PURE__*/_react.default.createElement(_antd.Tabs, _extends({
     defaultActiveKey: defaultActiveKey,
-    disabled: true,
+    disabled: disabled,
     items: items,
     style: _objectSpread({}, style),
     tabPosition: tabPosition,
-    type: type
+    type: type,
+    tabBarExtraContent: tabBarExtraContent
   }, antDesignProps)));
 }
 CustomTabs.propTypes = {
@@ -84,6 +121,15 @@ CustomTabs.propTypes = {
   'data-test': _propTypes.default.string,
   defaultActiveKey: _propTypes.default.string,
   disabled: _propTypes.default.bool,
+  extraAction: _propTypes.default.shape({
+    type: _propTypes.default.oneOf(['switch']).isRequired,
+    visible: _propTypes.default.bool,
+    label: _propTypes.default.string,
+    labelColor: _propTypes.default.string,
+    labelTypography: _propTypes.default.string,
+    size: _propTypes.default.oneOf(['large', 'small']),
+    props: _propTypes.default.objectOf(_propTypes.default.any)
+  }),
   tabPosition: _propTypes.default.oneOf(['top', 'right', 'bottom', 'left']),
   type: _propTypes.default.oneOf(['line', 'card'
   // 'editable-card',
@@ -97,6 +143,7 @@ CustomTabs.defaultProps = {
   tabPosition: 'top',
   type: 'line',
   disabled: false,
+  extraAction: null,
   style: {}
 };
 var _default = exports.default = CustomTabs;

package/build/components/oa-component-tabs/styles.js

@@ -3,11 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.StyledTabs = void 0;
+exports.default = exports.StyledTabs = exports.ExtraActionWrapper = void 0;
 var _antd = require("antd");
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _templateObject;
+var _templateObject, _templateObject2;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 var _default = exports.default = {};
-const StyledTabs = exports.StyledTabs = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.ant-tabs .ant-tabs-tab{\n    color: var(--color-secondary-content);\n    padding: 12px;\n    font-size: 14px;\n    font-weight: 400;\n    line-height: 20px;\n  }\n  .ant-tabs-tab-disabled{\n    color: var(--color-disabled-button) !important;\n  }\n  s.ant-tabs-tab-disabled:hover {\n    color: var(--color-disabled-button) !important;\n}\n  .ant-tabs .ant-tabs-tab+.ant-tabs-tab{\n    margin: 0;\n  }\n  .ant-tabs-top >.ant-tabs-nav::before{\n    border-bottom: 1px solid var(--color-divider)\n  }\n  .ant-tabs .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {\n    color: var(--color-primary);\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 20px; \n  }\n  .ant-tabs .ant-tabs-tab:hover{\n    color: var(--color-primary-hover);\n  }\n  .ant-tabs .ant-tabs-ink-bar{\n    background: var(--color-primary);\n  }\n"])));
+const StyledTabs = exports.StyledTabs = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.ant-tabs .ant-tabs-tab{\n    color: var(--color-secondary-content);\n    padding: 12px;\n    font-size: 14px;\n    font-weight: 400;\n    line-height: 20px;\n  }\n  .ant-tabs-tab-disabled{\n    color: var(--color-disabled-button) !important;\n  }\n  s.ant-tabs-tab-disabled:hover {\n    color: var(--color-disabled-button) !important;\n}\n  .ant-tabs .ant-tabs-tab+.ant-tabs-tab{\n    margin: 0;\n  }\n  .ant-tabs-top >.ant-tabs-nav::before{\n    border-bottom: 1px solid var(--color-divider)\n  }\n  .ant-tabs .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {\n    color: var(--color-primary);\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 20px; \n  }\n  .ant-tabs .ant-tabs-tab:hover{\n    color: var(--color-primary-hover);\n  }\n  .ant-tabs .ant-tabs-ink-bar{\n    background: var(--color-primary);\n  }\n"])));
+const ExtraActionWrapper = exports.ExtraActionWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  gap: 12px;\n"])));

package/build/components/oa-component-tag/CustomTag.js

@@ -32,6 +32,7 @@ function CustomTag(_ref) {
     textColor,
     style
   } = _ref;
+  console.log("style", style);
   return /*#__PURE__*/_react.default.createElement(_styles.StyledTag, _extends({
     "data-test": dataTest,
     type: type,

package/build/layout/GenricLayOut/GenricLayOut.js

@@ -53,7 +53,7 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); } /* eslint-disable */
 function GenricLayOut(_ref) {
-  var _state$misc30, _sidebar$mobileMenuIt, _imageViewer$content, _imageViewer$content2, _leftHeaderFirstButto, _leftHeaderFirstButto2, _infoPanel$data, _infoPanel$data2, _infoPanel$data3, _infoPanel$data4, _infoPanel$data5, _state$customDrawer3, _state$customDrawer4, _tabs$list, _tables$columns3, _tables$columns4, _tabs$active3, _state$tables5, _tables$selectionType, _tabs$active4, _tables$selectionType2, _tables$pagination17, _drawer$data, _tabs$active5, _drawer$data$drawer$a, _drawer$data2, _tabs$active6, _tabs$active7, _nestedDrawer$data, _nestedDrawer$data$ca, _nestedDrawer$data2, _customDrawer$data, _customDrawer$data2, _contentPanel$dataSou, _tables$tableFooter, _tables$selectedRowKe, _tables$tableFooter2, _tables$tableFooter3, _tables$tableFooter5;
+  var _state$misc30, _sidebar$mobileMenuIt, _imageViewer$content, _imageViewer$content2, _infoData$iconConfig, _infoData$iconConfig2, _infoData$iconConfig3, _infoData$iconConfig4, _leftHeaderFirstButto, _leftHeaderFirstButto2, _infoPanel$data, _infoPanel$data2, _infoPanel$data3, _infoPanel$data4, _infoPanel$data5, _state$customDrawer3, _state$customDrawer4, _tabs$list, _ref6, _tabs$extraAction$che, _tabs$extraAction$pro, _tables$columns3, _tables$columns4, _tabs$active3, _state$tables5, _tables$selectionType, _tabs$active4, _tables$selectionType2, _tables$pagination19, _drawer$data, _tabs$active5, _drawer$data$drawer$a, _drawer$data2, _tabs$active6, _tabs$active7, _nestedDrawer$data, _nestedDrawer$data$ca, _nestedDrawer$data2, _customDrawer$data, _customDrawer$data2, _contentPanel$dataSou, _tables$tableFooter, _tables$selectedRowKe, _tables$tableFooter2, _tables$tableFooter3, _tables$tableFooter5;
   let {
     config,
     getInitialData,
@@ -83,7 +83,8 @@ function GenricLayOut(_ref) {
       handleTableFooterApi,
       handleSwitchSelectItem,
       handleTableColumnClickParent,
-      handleLeftHeaderFirstButton
+      handleLeftHeaderFirstButton,
+      handleTabExtraActionChange
     } = {}
   } = _ref;
   const [state, dispatch] = (0, _react.useReducer)(_layoutReducer.genericLayoutReducer, config !== null && config !== void 0 ? config : _layoutReducer.initialState);
@@ -110,7 +111,8 @@ function GenricLayOut(_ref) {
     customDrawer,
     staticFilter,
     profileData,
-    infoPanel
+    infoPanel,
+    infoData
   } = state !== null && state !== void 0 ? state : {};
   (0, _react.useEffect)(() => {
     init();
@@ -253,6 +255,18 @@ function GenricLayOut(_ref) {
     });
   };
 
+  /**
+   * Resets the tabs extra action switch state to unchecked
+   */
+  const resetTabsExtraActionSwitch = () => {
+    if (tabs !== null && tabs !== void 0 && tabs.extraAction) {
+      dispatch({
+        type: _layoutReducer.actionTypes.SET_TABS_EXTRA_ACTION_CHECKED,
+        payload: false
+      });
+    }
+  };
+
   /**
    * Handles the change of the search input value.
    *
@@ -275,6 +289,7 @@ function GenricLayOut(_ref) {
       payload: value
     });
     if (value === "") {
+      resetTabsExtraActionSwitch();
       if (handleInputSearchChange) {
         var _state$inputSearch, _state$tabs, _customDrawer$applied, _config$tables, _config$tables2, _tables$sorting, _tables$sorting2, _header$subHeading, _header$subHeading2, _state$misc;
         dispatch({
@@ -353,6 +368,7 @@ function GenricLayOut(_ref) {
       type: _layoutReducer.actionTypes.SET_INPUT_SEARCH_VALUE,
       payload: trimedValue
     });
+    resetTabsExtraActionSwitch();
     if (handleInputSearchEnter) {
       var _state$tabs2, _config$tables5, _config$tables6, _tables$sorting3, _tables$sorting4, _customDrawer$applied2, _header$subHeading3, _header$subHeading4, _state$misc2;
       const {
@@ -420,6 +436,7 @@ function GenricLayOut(_ref) {
       payload: value
     });
     if (value === "") {
+      resetTabsExtraActionSwitch();
       if (handleDropdownSearchInputChange) {
         var _state$tabs3, _config$tables9, _config$tables10, _tables$sorting5, _tables$sorting6, _tables$filter, _staticFilter$data2, _customDrawer$applied3, _header$subHeading5, _header$subHeading6, _state$misc3, _state$staticFilter$m, _state$staticFilter;
         dispatch({
@@ -512,6 +529,7 @@ function GenricLayOut(_ref) {
       type: _layoutReducer.actionTypes.SET_DROPDOWN_SEARCH_VALUE,
       payload: value
     });
+    resetTabsExtraActionSwitch();
     if (handleDropdownSearchEnter) {
       var _state$tabs4, _config$tables13, _config$tables14, _tables$sorting7, _tables$sorting8, _tables$filter2, _staticFilter$data3, _customDrawer$applied4, _header$subHeading7, _header$subHeading8, _state$misc4, _state$staticFilter$m2, _state$staticFilter2;
       const {
@@ -572,6 +590,7 @@ function GenricLayOut(_ref) {
    * @returns {Promise<void>} - Resolves when the data has been fetched and the state has been updated.
    */
   const onDropdownSearchOptionChange = async option => {
+    resetTabsExtraActionSwitch();
     dispatch({
       type: _layoutReducer.actionTypes.SET_DROPDOWN_SEARCH_OPTION,
       payload: option === null || option === void 0 ? void 0 : option.value
@@ -690,6 +709,7 @@ function GenricLayOut(_ref) {
    * @returns {Promise<void>} - Resolves when the table data has been updated.
    */
   const onDropdownSearchClear = async () => {
+    resetTabsExtraActionSwitch();
     dispatch({
       type: _layoutReducer.actionTypes.SET_DROPDOWN_SEARCH_VALUE,
       payload: null
@@ -754,6 +774,7 @@ function GenricLayOut(_ref) {
    * @returns {Promise<void>} - Resolves when the table data has been updated.
    */
   const onInputSearchClear = async () => {
+    resetTabsExtraActionSwitch();
     dispatch({
       type: _layoutReducer.actionTypes.SET_INPUT_SEARCH_VALUE,
       payload: null
@@ -1144,6 +1165,7 @@ function GenricLayOut(_ref) {
         sortDirection: (sorter === null || sorter === void 0 ? void 0 : sorter.order) === "ascend" && "ASC" || (sorter === null || sorter === void 0 ? void 0 : sorter.order) === "descend" && "DESC" || ""
       }
     });
+    resetTabsExtraActionSwitch();
     if (handleTableChange) {
       var _state$dropdownSearch3, _state$inputSearch4, _state$tabs8, _header$subHeading15, _header$subHeading16, _staticFilter$data6, _customDrawer$applied8, _state$misc15, _state$staticFilter$m5, _state$staticFilter5;
       dispatch({
@@ -1202,6 +1224,7 @@ function GenricLayOut(_ref) {
    */
   const onTabClick = async key => {
     var _tables$filter5, _tables$columns2, _staticFilter$data$fi2;
+    resetTabsExtraActionSwitch();
     dispatch({
       type: _layoutReducer.actionTypes.TAB_CLICK,
       payload: {
@@ -1392,6 +1415,7 @@ function GenricLayOut(_ref) {
   };
   const onRemoveAppliedFilter = async filterKey => {
     var _state$customDrawer;
+    resetTabsExtraActionSwitch();
     const currentFilters = _objectSpread({}, state === null || state === void 0 || (_state$customDrawer = state.customDrawer) === null || _state$customDrawer === void 0 ? void 0 : _state$customDrawer.appliedFilters);
 
     // Remove the specific filter
@@ -1674,6 +1698,7 @@ function GenricLayOut(_ref) {
   };
   const onClearAllAppliedFilters = async () => {
     var _state$dropdownSearch9, _state$inputSearch9, _state$tabs15, _tables$pagination9, _tables$pagination10, _tables$filter10, _tables$sorting23, _header$subHeading27, _header$subHeading28, _staticFilter$data11, _tables$sorting24, _state$misc23, _state$staticFilter$m11, _state$staticFilter11;
+    resetTabsExtraActionSwitch();
     const {
       error,
       data
@@ -1895,6 +1920,7 @@ function GenricLayOut(_ref) {
   const rightHeaderSecondButtonClick = async () => {
     if ((rightHeaderSecondButton === null || rightHeaderSecondButton === void 0 ? void 0 : rightHeaderSecondButton.action) === "RESET_CUSTOM_DRAWER") {
       var _state$dropdownSearch10, _state$inputSearch10, _state$tabs16, _tables$pagination11, _tables$pagination12, _tables$filter11, _tables$sorting25, _header$subHeading29, _header$subHeading30, _staticFilter$data12, _tables$sorting26, _state$misc26, _state$staticFilter$m12, _state$staticFilter12;
+      resetTabsExtraActionSwitch();
       const {
         error,
         data
@@ -2004,6 +2030,7 @@ function GenricLayOut(_ref) {
    * @param {string} filterValue - The value of the selected filter
    */
   const onStaticFilterSelect = async filterValue => {
+    resetTabsExtraActionSwitch();
     const selectedFilterStatus = staticFilter.data.map(item => item.selected ? item.value : null).filter(Boolean);
     const currentSelectedIndex = selectedFilterStatus.indexOf(filterValue);
     if (currentSelectedIndex === -1) {
@@ -2078,6 +2105,7 @@ function GenricLayOut(_ref) {
       current,
       pageSize
     } = _ref5;
+    resetTabsExtraActionSwitch();
     dispatch({
       type: _layoutReducer.actionTypes.SET_PAGINATION,
       payload: {
@@ -2187,7 +2215,26 @@ function GenricLayOut(_ref) {
         url: imageViewer === null || imageViewer === void 0 || (_imageViewer$content3 = imageViewer.content) === null || _imageViewer$content3 === void 0 ? void 0 : _imageViewer$content3.url
       });
     }
-  }), (cards === null || cards === void 0 ? void 0 : cards.visible) && /*#__PURE__*/_react.default.createElement(_antd.Skeleton, {
+  }), (infoData === null || infoData === void 0 ? void 0 : infoData.visible) && /*#__PURE__*/_react.default.createElement(_antd.Skeleton, {
+    loading: state === null || state === void 0 ? void 0 : state.isLoading,
+    active: true,
+    paragraph: {
+      rows: 1
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "margin-bottom-12"
+  }, /*#__PURE__*/_react.default.createElement(_CustomInfo.default, {
+    closable: infoData === null || infoData === void 0 ? void 0 : infoData.closable,
+    description: infoData === null || infoData === void 0 ? void 0 : infoData.description,
+    iconConfig: {
+      icon: /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+        color: (infoData === null || infoData === void 0 || (_infoData$iconConfig = infoData.iconConfig) === null || _infoData$iconConfig === void 0 ? void 0 : _infoData$iconConfig.color) || "primary-content",
+        icon: infoData === null || infoData === void 0 || (_infoData$iconConfig2 = infoData.iconConfig) === null || _infoData$iconConfig2 === void 0 ? void 0 : _infoData$iconConfig2.icon,
+        size: (infoData === null || infoData === void 0 || (_infoData$iconConfig3 = infoData.iconConfig) === null || _infoData$iconConfig3 === void 0 ? void 0 : _infoData$iconConfig3.size) || 16
+      }),
+      position: (infoData === null || infoData === void 0 || (_infoData$iconConfig4 = infoData.iconConfig) === null || _infoData$iconConfig4 === void 0 ? void 0 : _infoData$iconConfig4.position) || "left"
+    }
+  }))), (cards === null || cards === void 0 ? void 0 : cards.visible) && /*#__PURE__*/_react.default.createElement(_antd.Skeleton, {
     loading: state === null || state === void 0 ? void 0 : state.isLoading,
     active: true,
     paragraph: {
@@ -2306,7 +2353,73 @@ function GenricLayOut(_ref) {
       }))
     },
     activeKey: tabs === null || tabs === void 0 ? void 0 : tabs.active,
-    onTabClick: onTabClick
+    onTabClick: onTabClick,
+    extraAction: tabs !== null && tabs !== void 0 && tabs.extraAction ? _objectSpread(_objectSpread({}, tabs.extraAction), {}, {
+      props: _objectSpread(_objectSpread({}, tabs.extraAction.props), {}, {
+        checked: (_ref6 = (_tabs$extraAction$che = tabs.extraAction.checked) !== null && _tabs$extraAction$che !== void 0 ? _tabs$extraAction$che : (_tabs$extraAction$pro = tabs.extraAction.props) === null || _tabs$extraAction$pro === void 0 ? void 0 : _tabs$extraAction$pro.defaultChecked) !== null && _ref6 !== void 0 ? _ref6 : false,
+        onChange: async checked => {
+          var _tabs$extraAction$pro2;
+          // Update switch state immediately
+          dispatch({
+            type: _layoutReducer.actionTypes.SET_TABS_EXTRA_ACTION_CHECKED,
+            payload: checked
+          });
+          // Call the original onChange if provided
+          if ((_tabs$extraAction$pro2 = tabs.extraAction.props) !== null && _tabs$extraAction$pro2 !== void 0 && _tabs$extraAction$pro2.onChange) {
+            tabs.extraAction.props.onChange(checked);
+          }
+          // Call handleTabExtraActionChange
+          if (handleTabExtraActionChange) {
+            var _tables$pagination17, _tables$pagination18, _tables$sorting31, _tables$sorting32, _tables$filter13, _staticFilter$data14, _state$misc31;
+            dispatch({
+              type: _layoutReducer.actionTypes.SET_LOADING,
+              payload: true
+            });
+            const {
+              error,
+              data
+            } = await handleTabExtraActionChange(_objectSpread(_objectSpread(_objectSpread({
+              checked,
+              selectedTab: tabs === null || tabs === void 0 ? void 0 : tabs.active,
+              current: tables === null || tables === void 0 || (_tables$pagination17 = tables.pagination) === null || _tables$pagination17 === void 0 ? void 0 : _tables$pagination17.current,
+              pageSize: tables === null || tables === void 0 || (_tables$pagination18 = tables.pagination) === null || _tables$pagination18 === void 0 ? void 0 : _tables$pagination18.pageSize,
+              field: tables === null || tables === void 0 || (_tables$sorting31 = tables.sorting) === null || _tables$sorting31 === void 0 ? void 0 : _tables$sorting31.sortBy,
+              order: tables === null || tables === void 0 || (_tables$sorting32 = tables.sorting) === null || _tables$sorting32 === void 0 ? void 0 : _tables$sorting32.sortDirection
+            }, (tables === null || tables === void 0 || (_tables$filter13 = tables.filter) === null || _tables$filter13 === void 0 ? void 0 : _tables$filter13.key) && {
+              columnFilterStatus: tables === null || tables === void 0 ? void 0 : tables.filter
+            }), (staticFilter === null || staticFilter === void 0 ? void 0 : staticFilter.visible) && ((_staticFilter$data14 = staticFilter.data) === null || _staticFilter$data14 === void 0 || (_staticFilter$data14 = _staticFilter$data14.find(item => item.selected)) === null || _staticFilter$data14 === void 0 ? void 0 : _staticFilter$data14.value) && {
+              staticFilter: staticFilter.data.find(item => item.selected).value
+            }), (_state$misc31 = state === null || state === void 0 ? void 0 : state.misc) !== null && _state$misc31 !== void 0 ? _state$misc31 : {}));
+            if (error) {
+              showErrorNotification(error);
+              dispatch({
+                type: _layoutReducer.actionTypes.SET_TABLE_EMPTY
+              });
+            } else {
+              var _config$tables33, _config$tables34;
+              if (staticFilter !== null && staticFilter !== void 0 && staticFilter.visible) {
+                setStaticFilterData(data);
+              }
+              dispatch({
+                type: _layoutReducer.actionTypes.SET_TABLE_DATA,
+                payload: data
+              });
+              dispatch({
+                type: _layoutReducer.actionTypes.SET_PAGINATION,
+                payload: {
+                  current: config === null || config === void 0 || (_config$tables33 = config.tables) === null || _config$tables33 === void 0 || (_config$tables33 = _config$tables33.pagination) === null || _config$tables33 === void 0 ? void 0 : _config$tables33.current,
+                  pageSize: config === null || config === void 0 || (_config$tables34 = config.tables) === null || _config$tables34 === void 0 || (_config$tables34 = _config$tables34.pagination) === null || _config$tables34 === void 0 ? void 0 : _config$tables34.pageSize
+                }
+              });
+            }
+            dispatch({
+              type: _layoutReducer.actionTypes.SET_LOADING,
+              payload: false
+            });
+          }
+        }
+      })
+    }) : null
   }))), (staticFilter === null || staticFilter === void 0 ? void 0 : staticFilter.visible) && /*#__PURE__*/_react.default.createElement(_antd.Skeleton, {
     loading: state === null || state === void 0 ? void 0 : state.isLoading,
     active: true,
@@ -2338,7 +2451,7 @@ function GenricLayOut(_ref) {
       emptyText: emptyTableState
     },
     emptyStateCard: emptyTableState,
-    onMobilePageChange: tables !== null && tables !== void 0 && (_tables$pagination17 = tables.pagination) !== null && _tables$pagination17 !== void 0 && _tables$pagination17.mwebPagination ? onMobilePageChange : undefined
+    onMobilePageChange: tables !== null && tables !== void 0 && (_tables$pagination19 = tables.pagination) !== null && _tables$pagination19 !== void 0 && _tables$pagination19.mwebPagination ? onMobilePageChange : undefined
   })))), (drawer === null || drawer === void 0 ? void 0 : drawer.visible) && /*#__PURE__*/_react.default.createElement(_CustomDrawer.default, {
     className: "oaDrawer",
     title: drawer === null || drawer === void 0 || (_drawer$data = drawer.data) === null || _drawer$data === void 0 || (_drawer$data = _drawer$data[(_tabs$active5 = tabs === null || tabs === void 0 ? void 0 : tabs.active) !== null && _tabs$active5 !== void 0 ? _tabs$active5 : "default"]) === null || _drawer$data === void 0 || (_drawer$data = _drawer$data[drawer === null || drawer === void 0 ? void 0 : drawer.active]) === null || _drawer$data === void 0 ? void 0 : _drawer$data.title,

package/build/layout/GenricLayOut/reducer/layoutReducer.js

@@ -57,7 +57,8 @@ const actionTypes = exports.actionTypes = {
   UPDATE_FILTER_FORM_VALUES: "UPDATE_FILTER_FORM_VALUES",
   SET_STATIC_FILTER: "SET_STATIC_FILTER",
   SET_PROFILE_DATA: "SET_PROFILE_DATA",
-  CHANGE_ROW: "CHANGE_ROW"
+  CHANGE_ROW: "CHANGE_ROW",
+  SET_TABS_EXTRA_ACTION_CHECKED: "SET_TABS_EXTRA_ACTION_CHECKED"
 };
 function getFieldDefaultValue(widget) {
   switch (widget) {
@@ -74,7 +75,7 @@ function getFieldDefaultValue(widget) {
   }
 }
 const genericLayoutReducer = exports.genericLayoutReducer = (0, _immer.produce)((draft, action) => {
-  var _draft$imageViewer, _action$payload, _action$payload2, _draft$tabs, _draft$customDrawer$d, _draft$tables, _action$payload3, _action$payload4, _action$payload5, _draft$tabs$active, _draft$tabs2, _action$payload6, _action$payload7, _action$payload8, _draft$staticFilter, _draft$tables2, _draft$customDrawer$d2, _draft$customDrawer$d3, _draft$customDrawer$d4;
+  var _draft$imageViewer, _action$payload, _action$payload2, _draft$tabs, _draft$customDrawer$d, _draft$tables, _action$payload3, _action$payload4, _action$payload5, _draft$tabs$active, _draft$tabs2, _action$payload6, _action$payload7, _action$payload8, _draft$staticFilter, _draft$tables2, _draft$customDrawer$d2, _draft$customDrawer$d3, _draft$customDrawer$d4, _draft$tabs4;
   switch (action.type) {
     case actionTypes.INIT:
       return (0, _staticConfigResolver.removeHidden)(action.payload);
@@ -304,6 +305,11 @@ const genericLayoutReducer = exports.genericLayoutReducer = (0, _immer.produce)(
     case actionTypes.CHANGE_ROW:
       draft.tables = action.payload.tables;
       break;
+    case actionTypes.SET_TABS_EXTRA_ACTION_CHECKED:
+      if ((_draft$tabs4 = draft.tabs) !== null && _draft$tabs4 !== void 0 && _draft$tabs4.extraAction) {
+        draft.tabs.extraAction.checked = action.payload;
+      }
+      break;
     default:
       break;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oa-componentbook",
-  "version": "1.0.1-stage.453",
+  "version": "1.0.1-stage.454",
   "private": false,
   "description": "Reusable components",
   "main": "build/index.js",