oa-componentbook 0.18.380 → 0.18.381

package/build/components/oa-component-document-details-panel/DocumentDetailsPanel.js

@@ -15,7 +15,7 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 /**
  * Styled container for the details panel
  */
-const PanelContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: var(--color-background, #fff);\n  height: 100%;\n  width: 100%;\n  box-sizing: border-box;\n\n  .panel-title {\n    margin: 0 0 24px 0;\n  }\n\n  .table-container {\n    border: 1px solid var(--color-border, #e8e8e8);\n    border-radius: 4px;\n    overflow: hidden;\n    margin-bottom: 24px;\n  }\n\n  .section-header {\n    background: var(--color-background-secondary, #f5f5f5);\n    padding: 12px 16px;\n    margin: 0;\n    border-bottom: 1px solid var(--color-border, #e8e8e8);\n  }\n\n  .details-table {\n    width: 100%;\n    margin: 0;\n    border-collapse: collapse;\n    background: var(--color-background, #fff);\n  }\n\n  .details-row {\n    border-bottom: 1px solid var(--color-border-light, #f0f0f0);\n  }\n\n  .details-row:last-child {\n    border-bottom: none;\n  }\n\n  .details-label {\n    width: 140px;\n    min-width: 140px;\n    padding: 16px;\n    padding-right: 16px;\n    text-align: left;\n    vertical-align: top;\n  }\n\n  .details-value {\n    padding: 16px;\n    word-break: break-word;\n    font-weight: 500;\n    vertical-align: top;\n  }\n\n  .details-actions {\n    display: flex;\n    flex-direction: row;\n    flex-wrap: wrap;\n    gap: 16px;\n    margin-top: 0;\n    padding-top: 0;\n    border-top: none;\n  }\n\n  .details-actions button {\n    padding: 0;\n  }\n\n  .children-container {\n    margin-top: 24px;\n  }\n"])));
+const PanelContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: var(--color-background, #fff);\n  height: 100%;\n  width: 100%;\n  box-sizing: border-box;\n\n  .panel-title {\n    margin: 0 0 24px 0;\n  }\n\n  .table-container {\n    border: 1px solid var(--color-border, #e8e8e8);\n    border-radius: 4px;\n    overflow: hidden;\n    margin-bottom: 24px;\n  }\n\n  .section-header {\n    background: var(--color-background-secondary, #f5f5f5);\n    padding: 12px 16px;\n    margin: 0;\n    border-bottom: 1px solid var(--color-border, #e8e8e8);\n  }\n\n  .details-table {\n    width: 100%;\n    margin: 0;\n    border-collapse: collapse;\n    background: var(--color-background, #fff);\n  }\n\n  .details-row {\n    border-bottom: 1px solid var(--color-border-light, #f0f0f0);\n  }\n\n  .details-row:last-child {\n    border-bottom: none;\n  }\n\n  .details-label {\n    width: 140px;\n    min-width: 140px;\n    padding: 16px;\n    padding-right: 16px;\n    text-align: left;\n    vertical-align: top;\n  }\n\n  .details-value {\n    padding: 16px;\n    word-break: break-word;\n    font-weight: 500;\n    vertical-align: top;\n  }\n\n  .details-actions {\n    display: flex;\n    flex-direction: row;\n    flex-wrap: wrap;\n    gap: 16px;\n    margin-top: 0;\n    padding-top: 0;\n    border-top: none;\n  }\n\n  .details-actions button {\n    padding: 0;\n    color: #1890ff !important;\n  }\n  .details-actions button:hover {\n    color: #1890ff !important;\n  }\n\n  .children-container {\n    margin-top: 24px;\n  }\n"])));
 
 /**
  * DocumentDetailsPanel Component

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,19 +36,34 @@ 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.
  */
 function CustomInfo(_ref) {
   let {
+    className,
     buttonConfig,
     color,
     description,
     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,
@@ -68,8 +91,13 @@ 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, {
+    $borderColor: borderColor,
+    className: className
+  }, /*#__PURE__*/_react.default.createElement(_styles.RowFlex, null, 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 +105,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 +134,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 +151,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 RowFlex = exports.RowFlex = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n  width: 100%;\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-table-with-search-and-filter/TableWithSearchAndFilter.js

@@ -116,6 +116,7 @@ function TableWithSearchAndFilter(_ref) {
   // Filter drawer state
   const [isFilterDrawerVisible, setIsFilterDrawerVisible] = (0, _react.useState)(false);
   const [filterValues, setFilterValues] = (0, _react.useState)({});
+  const [appliedFilters, setAppliedFilters] = (0, _react.useState)({});
 
   // Search handlers
   const handleSearchChange = e => {
@@ -134,8 +135,16 @@ function TableWithSearchAndFilter(_ref) {
   };
 
   // Filter handlers
-  const handleOpenFilterDrawer = () => setIsFilterDrawerVisible(true);
-  const handleCloseFilterDrawer = () => setIsFilterDrawerVisible(false);
+  const handleOpenFilterDrawer = () => {
+    // Sync filterValues with appliedFilters when opening drawer
+    setFilterValues(appliedFilters);
+    setIsFilterDrawerVisible(true);
+  };
+  const handleCloseFilterDrawer = () => {
+    // Revert filterValues to appliedFilters when closing without applying
+    setFilterValues(appliedFilters);
+    setIsFilterDrawerVisible(false);
+  };
   const handleFilterChange = function handleFilterChange(key, value) {
     let action = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'change';
     // Normalize empty values: convert empty string to null for consistency
@@ -152,12 +161,15 @@ function TableWithSearchAndFilter(_ref) {
   };
   const handleApplyFilters = () => {
     setIsFilterDrawerVisible(false);
+    // Save applied filters
+    setAppliedFilters(filterValues);
     if (onFiltersApply) {
       onFiltersApply(filterValues);
     }
   };
   const handleClearFilters = () => {
     setFilterValues({});
+    setAppliedFilters({});
     if (onFiltersClear) {
       onFiltersClear();
     }
@@ -226,6 +238,36 @@ function TableWithSearchAndFilter(_ref) {
     });
   }, [requiredKeys, requiredFieldsSignature, filterValues]);
 
+  // Helper function to check if a value is non-empty
+  const isValueNonEmpty = value => {
+    if (value === undefined || value === null || value === '') {
+      return false;
+    }
+
+    // Handle arrays
+    if (Array.isArray(value)) {
+      return value.length > 0;
+    }
+
+    // Handle objects (but allow Date objects and other valid objects)
+    if (typeof value === 'object' && !(value instanceof Date)) {
+      return Object.keys(value).length > 0;
+    }
+    return true;
+  };
+
+  // Helper function to check if filters are applied
+  const hasAppliedFilters = (0, _react.useMemo)(() => {
+    // Check if filters were actually applied (Apply Filter button was clicked)
+    const appliedFilterKeys = Object.keys(appliedFilters);
+    if (appliedFilterKeys.length === 0) {
+      return false;
+    }
+
+    // Check if any applied filter has a non-empty value
+    return appliedFilterKeys.some(key => isValueNonEmpty(appliedFilters[key]));
+  }, [appliedFilters]);
+
   // Helper function to determine notFoundContent message
   const getNotFoundContent = (isApiCallInProgress, query) => {
     if (!isApiCallInProgress && (query === null || query === void 0 ? void 0 : query.length) < 3) {
@@ -289,6 +331,7 @@ function TableWithSearchAndFilter(_ref) {
     return /*#__PURE__*/_react.default.createElement(_CustomDatePicker.default, {
       placeholder: placeholder || 'Select date',
       value: fieldValue,
+      containerSize: "small",
       onChange: date => handleFilterChange(fieldKey, date, 'change')
     });
   };
@@ -320,9 +363,9 @@ function TableWithSearchAndFilter(_ref) {
       case 'radio':
         return renderRadioGroup(key, filter);
       case 'select':
-        return renderSelect(key, filter);
+        return /*#__PURE__*/_react.default.createElement(_styles.FilterSubField, null, renderSelect(key, filter));
       case 'date':
-        return renderDatePicker(key, filter);
+        return /*#__PURE__*/_react.default.createElement(_styles.FilterSubField, null, renderDatePicker(key, filter));
       case 'dateRange':
         return /*#__PURE__*/_react.default.createElement(_styles.DateRangeContainer, null, fields.map(field => /*#__PURE__*/_react.default.createElement(_styles.FilterSubField, {
           key: field.key
@@ -337,6 +380,18 @@ function TableWithSearchAndFilter(_ref) {
   };
   const displayData = dataSource;
   const totalRecords = total !== null && total !== void 0 ? total : displayData.length;
+
+  // Button configuration for filter drawer footer
+  const filterDrawerButtonConfig = [{
+    callback: handleClearFilters,
+    label: 'Clear All',
+    type: 'secondary'
+  }, {
+    callback: handleApplyFilters,
+    label: 'Apply Filter',
+    type: 'primary',
+    disabled: !areAllRequiredFieldsFilled
+  }];
   return /*#__PURE__*/_react.default.createElement(_styles.TableWithSearchAndFilterContainer, {
     className: className
   }, (showSearch || showFilters) && /*#__PURE__*/_react.default.createElement(_styles.Toolbar, null, showSearch && /*#__PURE__*/_react.default.createElement(_CustomInput.default, {
@@ -356,7 +411,7 @@ function TableWithSearchAndFilter(_ref) {
       width: SEARCH_INPUT_WIDTH,
       flexShrink: 0
     }
-  }), showFilters && /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+  }), showFilters && /*#__PURE__*/_react.default.createElement(_styles.FilterButtonWrapper, null, /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
     label: filterButtonLabel,
     onClick: handleOpenFilterDrawer,
     type: "secondary",
@@ -366,8 +421,12 @@ function TableWithSearchAndFilter(_ref) {
         icon: _FilterList.default
       }),
       position: 'left'
+    },
+    style: {
+      borderColor: '#1890ff',
+      color: '#1890ff'
     }
-  })), showFilters && /*#__PURE__*/_react.default.createElement(_CustomDrawer.default, {
+  }), hasAppliedFilters && /*#__PURE__*/_react.default.createElement(_styles.FilterIndicatorDot, null))), showFilters && /*#__PURE__*/_react.default.createElement(_CustomDrawer.default, {
     title: filterDrawerTitle,
     placement: "right",
     isBaseDrawer: true,
@@ -375,21 +434,11 @@ function TableWithSearchAndFilter(_ref) {
     open: isFilterDrawerVisible,
     visible: isFilterDrawerVisible,
     closable: false,
-    width: 400
+    width: 400,
+    buttonConfig: filterDrawerButtonConfig
   }, /*#__PURE__*/_react.default.createElement(_styles.FilterDrawerContent, null, /*#__PURE__*/_react.default.createElement(_styles.FilterDrawerBody, null, filterConfig.length > 0 ? filterConfig.map(filter => /*#__PURE__*/_react.default.createElement(_styles.FilterSection, {
     key: filter.key
-  }, /*#__PURE__*/_react.default.createElement(_styles.FilterLabel, null, filter.label, filter.required && /*#__PURE__*/_react.default.createElement(_styles.RequiredMark, null, "*")), renderFilterInput(filter))) : /*#__PURE__*/_react.default.createElement(_styles.FilterSection, null, /*#__PURE__*/_react.default.createElement(_styles.FilterLabel, null, "No filters configured"))), /*#__PURE__*/_react.default.createElement(_styles.FilterDrawerFooter, null, /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
-    label: "Clear All",
-    onClick: handleClearFilters,
-    type: "secondary",
-    size: "medium"
-  }), /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
-    label: "Apply Filter",
-    onClick: handleApplyFilters,
-    type: "primary",
-    size: "medium",
-    disabled: !areAllRequiredFieldsFilled
-  })))), /*#__PURE__*/_react.default.createElement(_CustomTable.default, _extends({
+  }, /*#__PURE__*/_react.default.createElement(_styles.FilterLabel, null, filter.label, filter.required && /*#__PURE__*/_react.default.createElement(_styles.RequiredMark, null, "*")), renderFilterInput(filter))) : /*#__PURE__*/_react.default.createElement(_styles.FilterSection, null, /*#__PURE__*/_react.default.createElement(_styles.FilterLabel, null, "No filters configured"))))), /*#__PURE__*/_react.default.createElement(_CustomTable.default, _extends({
     rowKey: rowKey,
     dataSource: displayData,
     columns: columns,

package/build/components/oa-component-table-with-search-and-filter/styles.js

@@ -3,22 +3,23 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Toolbar = exports.TableWithSearchAndFilterContainer = exports.RequiredMark = exports.PaginationContainer = exports.FilterSubLabelText = exports.FilterSubLabel = exports.FilterSubField = exports.FilterSection = exports.FilterLabel = exports.FilterGroup = exports.FilterDrawerFooter = exports.FilterDrawerContent = exports.FilterDrawerBody = exports.DateRangeContainer = void 0;
+exports.Toolbar = exports.TableWithSearchAndFilterContainer = exports.RequiredMark = exports.PaginationContainer = exports.FilterSubLabelText = exports.FilterSubLabel = exports.FilterSubField = exports.FilterSection = exports.FilterLabel = exports.FilterIndicatorDot = exports.FilterGroup = exports.FilterDrawerContent = exports.FilterDrawerBody = exports.FilterButtonWrapper = exports.DateRangeContainer = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
 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 TableWithSearchAndFilterContainer = exports.TableWithSearchAndFilterContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n"])));
-const Toolbar = exports.Toolbar = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 16px;\n  gap: 16px;\n\n  @media screen and (max-width: 768px) {\n    flex-direction: column;\n    align-items: stretch;\n  }\n"])));
+const Toolbar = exports.Toolbar = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 16px;\n  gap: 16px;\n\n  button.secondary {\n    border-color: #1890ff !important;\n    color: #1890ff !important;\n  }\n  button.secondary:hover {\n    border-color: #1890ff !important;\n    color: #1890ff !important;\n  }\n\n  @media screen and (max-width: 768px) {\n    flex-direction: column;\n    align-items: stretch;\n  }\n"])));
 const FilterSection = exports.FilterSection = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin-bottom: 24px;\n"])));
 const FilterLabel = exports.FilterLabel = _styledComponents.default.label(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  font-weight: 600;\n  font-size: 14px;\n  color: var(--color-primary-content, #212121);\n  margin-bottom: 12px;\n"])));
 const RequiredMark = exports.RequiredMark = _styledComponents.default.span(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  color: #ff4d4f;\n  margin-left: 2px;\n  font-weight: 400;\n"])));
 const PaginationContainer = exports.PaginationContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  margin-top: 16px;\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n"])));
 const FilterDrawerContent = exports.FilterDrawerContent = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  min-height: calc(100vh - 150px);\n"])));
 const FilterDrawerBody = exports.FilterDrawerBody = _styledComponents.default.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  flex: 1;\n  overflow-y: auto;\n  \n  /* Make radio buttons horizontal */\n  .ant-radio-group {\n    display: flex;\n    flex-direction: row;\n    flex-wrap: wrap;\n    gap: 16px;\n  }\n  \n  /* Ensure radio wrapper is visible - override line-height: 0 */\n  .ant-radio-wrapper {\n    display: inline-flex !important;\n    align-items: center !important;\n    margin-right: 0 !important;\n    line-height: 1.5 !important;\n  }\n  \n  /* Ensure radio label text is visible */\n  .ant-radio-wrapper span:not(.ant-radio) {\n    line-height: 1.5 !important;\n  }\n  \n  .ant-radio-wrapper p {\n    margin: 0;\n    line-height: 1.5 !important;\n  }\n"])));
-const FilterDrawerFooter = exports.FilterDrawerFooter = _styledComponents.default.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: flex-end;\n  gap: 12px;\n  padding: 16px 0;\n  border-top: 1px solid #e8e8e8;\n  margin-top: auto;\n"])));
-const FilterGroup = exports.FilterGroup = _styledComponents.default.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n"])));
-const FilterSubField = exports.FilterSubField = _styledComponents.default.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n"])));
-const FilterSubLabel = exports.FilterSubLabel = _styledComponents.default.label(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  font-weight: 400;\n  font-size: 14px;\n  color: var(--color-primary-content, #212121);\n"])));
-const FilterSubLabelText = exports.FilterSubLabelText = _styledComponents.default.span(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  color: var(--color-primary-content, #212121);\n"])));
-const DateRangeContainer = exports.DateRangeContainer = _styledComponents.default.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n"])));
+const FilterGroup = exports.FilterGroup = _styledComponents.default.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n"])));
+const FilterSubField = exports.FilterSubField = _styledComponents.default.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n"])));
+const FilterSubLabel = exports.FilterSubLabel = _styledComponents.default.label(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  font-weight: 400;\n  font-size: 14px;\n  color: var(--color-primary-content, #212121);\n"])));
+const FilterSubLabelText = exports.FilterSubLabelText = _styledComponents.default.span(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  color: var(--color-primary-content, #212121);\n"])));
+const DateRangeContainer = exports.DateRangeContainer = _styledComponents.default.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n"])));
+const FilterButtonWrapper = exports.FilterButtonWrapper = _styledComponents.default.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  position: relative;\n"])));
+const FilterIndicatorDot = exports.FilterIndicatorDot = _styledComponents.default.span(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  width: 12px;\n  height: 12px;\n  background: #de350b;\n  position: absolute;\n  top: -4px;\n  right: -4px;\n  border-radius: 50%;\n  z-index: 1;\n"])));

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, _ref7, _tabs$extraAction$che2, _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({
@@ -1201,7 +1223,9 @@ function GenricLayOut(_ref) {
    * @returns {void}
    */
   const onTabClick = async key => {
-    var _tables$filter5, _tables$columns2, _staticFilter$data$fi2;
+    var _ref4, _tabs$extraAction$che, _tabs$extraAction, _tabs$extraAction2, _tables$filter5, _tables$columns2, _staticFilter$data$fi2;
+    // Store the checked value to pass to handleTabClick
+    const extraActionChecked = (_ref4 = (_tabs$extraAction$che = tabs === null || tabs === void 0 || (_tabs$extraAction = tabs.extraAction) === null || _tabs$extraAction === void 0 ? void 0 : _tabs$extraAction.checked) !== null && _tabs$extraAction$che !== void 0 ? _tabs$extraAction$che : tabs === null || tabs === void 0 || (_tabs$extraAction2 = tabs.extraAction) === null || _tabs$extraAction2 === void 0 || (_tabs$extraAction2 = _tabs$extraAction2.props) === null || _tabs$extraAction2 === void 0 ? void 0 : _tabs$extraAction2.defaultChecked) !== null && _ref4 !== void 0 ? _ref4 : false;
     dispatch({
       type: _layoutReducer.actionTypes.TAB_CLICK,
       payload: {
@@ -1277,6 +1301,8 @@ function GenricLayOut(_ref) {
         subHeadingSelectVal: header === null || header === void 0 || (_header$subHeading18 = header.subHeading) === null || _header$subHeading18 === void 0 || (_header$subHeading18 = _header$subHeading18.jsxConfig) === null || _header$subHeading18 === void 0 ? void 0 : _header$subHeading18.value
       } : {}), (customDrawer === null || customDrawer === void 0 ? void 0 : customDrawer.appliedFilters) && Object.keys((_customDrawer$applied9 = customDrawer === null || customDrawer === void 0 ? void 0 : customDrawer.appliedFilters) !== null && _customDrawer$applied9 !== void 0 ? _customDrawer$applied9 : {}).length > 0 && _objectSpread({}, customDrawer === null || customDrawer === void 0 ? void 0 : customDrawer.appliedFilters)), (_state$misc17 = state === null || state === void 0 ? void 0 : state.misc) !== null && _state$misc17 !== void 0 ? _state$misc17 : {}), {}, {
         multiSelectValue: (_state$staticFilter$m6 = state === null || state === void 0 || (_state$staticFilter6 = state.staticFilter) === null || _state$staticFilter6 === void 0 ? void 0 : _state$staticFilter6.multiSelectValue) !== null && _state$staticFilter$m6 !== void 0 ? _state$staticFilter$m6 : []
+      }, (tabs === null || tabs === void 0 ? void 0 : tabs.extraAction) && extraActionChecked && {
+        checked: extraActionChecked
       }));
       if (error) {
         showErrorNotification(error);
@@ -1392,6 +1418,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
@@ -1538,7 +1565,7 @@ function GenricLayOut(_ref) {
 
     // Only process filter data if this is actually a filter drawer
     if (formData.type === "FILTER-SUBMIT") {
-      var _state$dropdownSearch7, _state$inputSearch7, _ref4, _appliedFilters$filte, _state$tabs13, _config$tables29, _config$tables30, _tables$filter8, _tables$sorting19, _header$subHeading23, _header$subHeading24, _staticFilter$data9, _tables$sorting20, _state$misc21, _state$staticFilter$m9, _state$staticFilter9;
+      var _state$dropdownSearch7, _state$inputSearch7, _ref5, _appliedFilters$filte, _state$tabs13, _config$tables29, _config$tables30, _tables$filter8, _tables$sorting19, _header$subHeading23, _header$subHeading24, _staticFilter$data9, _tables$sorting20, _state$misc21, _state$staticFilter$m9, _state$staticFilter9;
       const appliedFilters = {};
       Object.keys(formData).forEach(key => {
         const value = formData[key];
@@ -1561,7 +1588,7 @@ function GenricLayOut(_ref) {
       }), (state === null || state === void 0 || (_state$inputSearch7 = state.inputSearch) === null || _state$inputSearch7 === void 0 || (_state$inputSearch7 = _state$inputSearch7.value) === null || _state$inputSearch7 === void 0 ? void 0 : _state$inputSearch7.trim()) && {
         searchedValue: state.inputSearch.value
       }), appliedFilters), {}, {
-        filterOn: (_ref4 = (_appliedFilters$filte = appliedFilters === null || appliedFilters === void 0 ? void 0 : appliedFilters.filterBy) !== null && _appliedFilters$filte !== void 0 ? _appliedFilters$filte : customDrawer === null || customDrawer === void 0 ? void 0 : customDrawer.defaultAppliedFilter) !== null && _ref4 !== void 0 ? _ref4 : "",
+        filterOn: (_ref5 = (_appliedFilters$filte = appliedFilters === null || appliedFilters === void 0 ? void 0 : appliedFilters.filterBy) !== null && _appliedFilters$filte !== void 0 ? _appliedFilters$filte : customDrawer === null || customDrawer === void 0 ? void 0 : customDrawer.defaultAppliedFilter) !== null && _ref5 !== void 0 ? _ref5 : "",
         fromDate: appliedFilters === null || appliedFilters === void 0 ? void 0 : appliedFilters.fromDate,
         toDate: appliedFilters === null || appliedFilters === void 0 ? void 0 : appliedFilters.toDate,
         selectedTab: state === null || state === void 0 || (_state$tabs13 = state.tabs) === null || _state$tabs13 === void 0 ? void 0 : _state$tabs13.active,
@@ -1674,6 +1701,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 +1923,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 +2033,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) {
@@ -2073,11 +2103,12 @@ function GenricLayOut(_ref) {
       });
     }
   };
-  const onMobilePageChange = async _ref5 => {
+  const onMobilePageChange = async _ref6 => {
     let {
       current,
       pageSize
-    } = _ref5;
+    } = _ref6;
+    resetTabsExtraActionSwitch();
     dispatch({
       type: _layoutReducer.actionTypes.SET_PAGINATION,
       payload: {
@@ -2187,7 +2218,25 @@ 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(_CustomInfo.default, {
+    closable: infoData === null || infoData === void 0 ? void 0 : infoData.closable,
+    description: infoData === null || infoData === void 0 ? void 0 : infoData.description,
+    className: infoData === null || infoData === void 0 ? void 0 : infoData.className,
+    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 +2355,89 @@ 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: (_ref7 = (_tabs$extraAction$che2 = tabs.extraAction.checked) !== null && _tabs$extraAction$che2 !== void 0 ? _tabs$extraAction$che2 : (_tabs$extraAction$pro = tabs.extraAction.props) === null || _tabs$extraAction$pro === void 0 ? void 0 : _tabs$extraAction$pro.defaultChecked) !== null && _ref7 !== void 0 ? _ref7 : 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, _config$tabs2;
+              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
+                }
+              });
+              // Update tabs extraAction using replaceVariables with response data
+              if (config !== null && config !== void 0 && (_config$tabs2 = config.tabs) !== null && _config$tabs2 !== void 0 && _config$tabs2.extraAction) {
+                const updatedExtraAction = (0, _staticConfigResolver.default)(config.tabs.extraAction, data);
+                dispatch({
+                  type: _layoutReducer.actionTypes.SET_TABS_EXTRA_ACTION,
+                  payload: updatedExtraAction
+                });
+              }
+              // Update infoData using replaceVariables with response data
+              if (config !== null && config !== void 0 && config.infoData) {
+                const updatedInfoData = (0, _staticConfigResolver.default)(config.infoData, data);
+                dispatch({
+                  type: _layoutReducer.actionTypes.SET_INFO_DATA,
+                  payload: updatedInfoData
+                });
+              }
+            }
+            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 +2469,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,10 @@ 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",
+  SET_TABS_EXTRA_ACTION: "SET_TABS_EXTRA_ACTION",
+  SET_INFO_DATA: "SET_INFO_DATA"
 };
 function getFieldDefaultValue(widget) {
   switch (widget) {
@@ -74,7 +77,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, _draft$tabs5;
   switch (action.type) {
     case actionTypes.INIT:
       return (0, _staticConfigResolver.removeHidden)(action.payload);
@@ -304,6 +307,21 @@ 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;
+    case actionTypes.SET_TABS_EXTRA_ACTION:
+      if ((_draft$tabs5 = draft.tabs) !== null && _draft$tabs5 !== void 0 && _draft$tabs5.extraAction && action.payload) {
+        draft.tabs.extraAction = _objectSpread(_objectSpread({}, draft.tabs.extraAction), action.payload);
+      }
+      break;
+    case actionTypes.SET_INFO_DATA:
+      if (action.payload) {
+        draft.infoData = _objectSpread(_objectSpread({}, draft.infoData), action.payload);
+      }
+      break;
     default:
       break;
   }

package/build/widgets/oa-widget-item-info-card/styles.js

@@ -10,5 +10,5 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 const Container = exports.Container = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: #ffffff;\n  border-radius: 12px;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n"])));
 const TotalRow = exports.TotalRow = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    border-top: 1px solid #e0e0e0;\n    padding: 16px 16px 0 16px;\n    margin: 0 0 0 -16px;\n    width: calc(100% + 32px);\n\n\n    .gstAndCost{display: flex;\n    flex-direction: column;\n    align-items: flex-end;\n    justify-content: center;}\n"])));
-const ItemInfoCard = exports.ItemInfoCard = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n.productBox{width:100%; display:flex; flex-direction:row; justify-content: space-between; padding:12px 0;}\n.productIcon{border-radius: 12px; background: #F6F6F6; width:80px; height:80px; display:flex; align-items:center; justify-content:center;}\n.productIcon img{height:64px;}\n.iconAndtextSec{display:flex; flex-direction:row; gap:12px; width:calc(100% - 88px);}\n.product-info {display: flex; flex-direction: column; width: calc(100% - 92px);}\n"])));
+const ItemInfoCard = exports.ItemInfoCard = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n.productBox{width:100%; display:flex; flex-direction:row; justify-content: space-between; padding:12px 0;}\n.productIcon{border-radius: 12px; background: #F6F6F6; width:80px; height:80px; display:flex; align-items:center; justify-content:center;}\n.productIcon img{height:64px; max-width: 64px;}\n.iconAndtextSec{display:flex; flex-direction:row; gap:12px; width:calc(100% - 88px);}\n.product-info {display: flex; flex-direction: column; width: calc(100% - 92px);}\n"])));
 var _default = exports.default = {};

package/package.json

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