oa-componentbook 0.18.378 → 0.18.380

package/build/components/oa-component-accordion/Accordion.js

@@ -60,7 +60,18 @@ function renderCustomBody(customBody, onActionClick) {
     }, field.title), /*#__PURE__*/_react.default.createElement(_Typography.default, {
       typography: "type-b1-400",
       color: "secondary-content"
-    }, field.subtitle))))), item.dataConfig && item.dataConfig.type === "button" && /*#__PURE__*/_react.default.createElement("div", {
+    }, field.subtitle))))), item.dataConfig && Array.isArray(item.dataConfig) && item.dataConfig.some(config => config.type === "button") && /*#__PURE__*/_react.default.createElement("div", {
+      className: "custom-body-content custom-body-buttons-container"
+    }, item.dataConfig.filter(config => config.type === "button").map((buttonConfig, btnIndex) => /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+      key: btnIndex,
+      type: buttonConfig.subType,
+      onClick: () => {
+        if (onActionClick && buttonConfig.onClick) {
+          onActionClick(buttonConfig.onClick, buttonConfig);
+        }
+      },
+      label: buttonConfig.label
+    }))), item.dataConfig && !Array.isArray(item.dataConfig) && item.dataConfig.type === "button" && /*#__PURE__*/_react.default.createElement("div", {
       className: "custom-body-content"
     }, /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
       type: item.dataConfig.subType,
@@ -168,13 +179,18 @@ Accordion.propTypes = {
         type: _propTypes.default.string.isRequired,
         label: _propTypes.default.string.isRequired
       }),
-      dataConfig: _propTypes.default.shape({
+      dataConfig: _propTypes.default.oneOfType([_propTypes.default.shape({
         type: _propTypes.default.string.isRequired,
         data: _propTypes.default.oneOfType([_propTypes.default.array, _propTypes.default.object]).isRequired,
         subType: _propTypes.default.string,
         label: _propTypes.default.string,
         onClick: _propTypes.default.string
-      })
+      }), _propTypes.default.arrayOf(_propTypes.default.shape({
+        type: _propTypes.default.string.isRequired,
+        subType: _propTypes.default.string,
+        label: _propTypes.default.string,
+        onClick: _propTypes.default.string
+      }))])
     }))
   }),
   onActionClick: _propTypes.default.func

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

@@ -10,4 +10,4 @@ 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) } })); }
 var _default = exports.default = {};
 const SmallText = exports.SmallText = _styledComponents.default.small(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  font-size: 18px;\n  color: #e21616;\n  margin: 0 0 0 4px;\n"])));
-const CollapseStyle = exports.CollapseStyle = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  .ant-collapse .ant-collapse-item-disabled {\n    background: var(--color-disabled-button);\n  }\n  /* .ant-collapse-item-active .ant-collapse-expand-icon{\n    transform: rotate(180deg);\n  } */\n  /* .ant-collapse-expand-icon{\n    padding-inline-start: 0 !important;\n  } */\n  .ant-collapse-header-text {\n    color: var(--color-primary-content);\n  }\n  /* .ant-collapse-arrow{\n    color: var(--color-secondary-content) !important;\n  } */\n  .ant-collapse > .ant-collapse-item:last-child,\n  .ant-collapse > .ant-collapse-item:last-child > .ant-collapse-header,\n  .ant-collapse .ant-collapse-item:last-child > .ant-collapse-content {\n    border-radius: 0 0 4px 4px;\n  }\n  .ant-collapse > .ant-collapse-item {\n    border: none;\n  }\n  .ant-collapse {\n    border: 1px solid var(--color-divider);\n    border-radius: 4px;\n    overflow: hidden;\n  }\n\n  .ant-collapse > .ant-collapse-item > .ant-collapse-header {\n    padding: 12px 12px;\n  }\n\n  /* New styles for header content layout */\n  .header-content {\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n    width: 100%;\n  }\n\n  .header-main {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    flex: 1;\n    gap: 8px;\n  }\n\n  .header-tag {\n    margin-bottom: 4px;\n  }\n\n  .header-text {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n  }\n\n  .header-subtext {\n    margin-top: 4px;\n    color: var(--color-secondary-content);\n  }\n\n  /* Custom body styles */\n  .custom-body-item {\n    margin-bottom: 24px;\n  }\n\n  .custom-body-item:last-child {\n    margin-bottom: 0;\n  }\n\n  .custom-body-heading {\n    margin-bottom: 16px;\n  }\n\n  .custom-body-content {\n    // margin-top: 8px;\n  }\n\n  .custom-body-button {\n    margin-top: 16px;\n    display: flex;\n    justify-content: flex-end;\n  }\n\n  .gst-details-keyvalue {\n    .key-value-item {\n      margin-bottom: 4px;\n    }\n\n    .key {\n      font-weight: 400;\n      color: var(--color-primary-content);\n    }\n\n    .value {\n      font-weight: 700;\n      color: var(--color-primary-content);\n    }\n  }\n\n  @media only screen and (max-width: 600px) {\n    .ant-collapse .ant-collapse-content > .ant-collapse-content-box {\n      padding: 16px;\n    }\n    .ant-collapse > .ant-collapse-item > .ant-collapse-header {\n      padding: 12px 16px;\n    }\n  }\n\n  .custom-body-content-titleSubtitle {\n    display: flex;\n    flex-direction: column;\n    gap: 16px; /* spacing between each item */\n  }\n\n  .title-subtitle-item {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n  }\n\n  .title-subtitle-item .user-details {\n    flex: 1;\n    display: flex; /* \uD83D\uDC48 add this */\n    flex-direction: column; /* stack name & email vertically */\n    gap: 2px; /* optional: tighten spacing between name & email */\n  }\n"])));
+const CollapseStyle = exports.CollapseStyle = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  .ant-collapse .ant-collapse-item-disabled {\n    background: var(--color-disabled-button);\n  }\n  /* .ant-collapse-item-active .ant-collapse-expand-icon{\n    transform: rotate(180deg);\n  } */\n  /* .ant-collapse-expand-icon{\n    padding-inline-start: 0 !important;\n  } */\n  .ant-collapse-header-text {\n    color: var(--color-primary-content);\n  }\n  /* .ant-collapse-arrow{\n    color: var(--color-secondary-content) !important;\n  } */\n  .ant-collapse > .ant-collapse-item:last-child,\n  .ant-collapse > .ant-collapse-item:last-child > .ant-collapse-header,\n  .ant-collapse .ant-collapse-item:last-child > .ant-collapse-content {\n    border-radius: 0 0 4px 4px;\n  }\n  .ant-collapse > .ant-collapse-item {\n    border: none;\n  }\n  .ant-collapse {\n    border: 1px solid var(--color-divider);\n    border-radius: 4px;\n    overflow: hidden;\n  }\n\n  .ant-collapse > .ant-collapse-item > .ant-collapse-header {\n    padding: 12px 12px;\n  }\n\n  /* New styles for header content layout */\n  .header-content {\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n    width: 100%;\n  }\n\n  .header-main {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    flex: 1;\n    gap: 8px;\n  }\n\n  .header-tag {\n    margin-bottom: 4px;\n  }\n\n  .header-text {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n  }\n\n  .header-subtext {\n    margin-top: 4px;\n    color: var(--color-secondary-content);\n  }\n\n  /* Custom body styles */\n  .custom-body-item {\n    margin-bottom: 24px;\n  }\n\n  .custom-body-item:last-child {\n    margin-bottom: 0;\n  }\n\n  .custom-body-heading {\n    margin-bottom: 16px;\n  }\n\n  .custom-body-content {\n    // margin-top: 8px;\n  }\n\n  .custom-body-buttons-container {\n    display: flex;\n    gap: 24px;\n    flex-wrap: wrap;\n  }\n\n  .custom-body-button {\n    margin-top: 16px;\n    display: flex;\n    justify-content: flex-end;\n  }\n\n  .gst-details-keyvalue {\n    .key-value-item {\n      margin-bottom: 4px;\n    }\n\n    .key {\n      font-weight: 400;\n      color: var(--color-primary-content);\n    }\n\n    .value {\n      font-weight: 700;\n      color: var(--color-primary-content);\n    }\n  }\n\n  @media only screen and (max-width: 600px) {\n    .ant-collapse .ant-collapse-content > .ant-collapse-content-box {\n      padding: 16px;\n    }\n    .ant-collapse > .ant-collapse-item > .ant-collapse-header {\n      padding: 12px 16px;\n    }\n  }\n\n  .custom-body-content-titleSubtitle {\n    display: flex;\n    flex-direction: column;\n    gap: 16px; /* spacing between each item */\n  }\n\n  .title-subtitle-item {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n  }\n\n  .title-subtitle-item .user-details {\n    flex: 1;\n    display: flex; /* \uD83D\uDC48 add this */\n    flex-direction: column; /* stack name & email vertically */\n    gap: 2px; /* optional: tighten spacing between name & email */\n  }\n"])));

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

@@ -0,0 +1,154 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _Typography = _interopRequireDefault(require("../oa-component-typography/Typography"));
+var _CustomButton = _interopRequireDefault(require("../oa-component-button/CustomButton"));
+var _templateObject;
+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) } })); }
+/**
+ * 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"])));
+
+/**
+ * DocumentDetailsPanel Component
+ *
+ * A reusable panel for displaying document/invoice details with key-value pairs.
+ * Can be used standalone or as children of DocumentSideDrawer, Modal, etc.
+ * Uses existing Typography and CustomButton components.
+ *
+ * @example
+ * // Standalone usage
+ * <DocumentDetailsPanel
+ *   title="Check if the below details are correct"
+ *   sectionTitle="INVOICE DETAILS"
+ *   details={[
+ *     { label: 'Date', value: '17 Nov 2025' },
+ *     { label: 'Invoice Number', value: 'IEXPS8790L' },
+ *   ]}
+ *   actions={[
+ *     { label: 'Download Invoice', onClick: () => {}, icon: <MaterialIcon icon={GetAppIcon} /> },
+ *   ]}
+ * />
+ *
+ * @example
+ * // With DocumentSideDrawer
+ * <DocumentSideDrawer title="VALIDATE" documentConfig={...}>
+ *   <DocumentDetailsPanel
+ *     title="Verify the details"
+ *     details={[...]}
+ *     actions={[...]}
+ *   />
+ * </DocumentSideDrawer>
+ */
+function DocumentDetailsPanel(_ref) {
+  let {
+    title,
+    sectionTitle,
+    details,
+    actions,
+    children,
+    className,
+    style
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(PanelContainer, {
+    className: className,
+    style: style
+  }, title && /*#__PURE__*/_react.default.createElement("div", {
+    className: "panel-title"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    typography: "type-t2-700",
+    color: "primary-content"
+  }, title)), (sectionTitle || details && details.length > 0) && /*#__PURE__*/_react.default.createElement("div", {
+    className: "table-container"
+  }, sectionTitle && /*#__PURE__*/_react.default.createElement("div", {
+    className: "section-header"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    typography: "type-sl1-700",
+    color: "secondary-content"
+  }, sectionTitle)), details && details.length > 0 && /*#__PURE__*/_react.default.createElement("table", {
+    className: "details-table",
+    role: "table",
+    "aria-label": sectionTitle || 'Details'
+  }, /*#__PURE__*/_react.default.createElement("tbody", null, details.map((detail, index) => {
+    const rowKey = detail.key || "detail-".concat(detail.label, "-").concat(index);
+    return /*#__PURE__*/_react.default.createElement("tr", {
+      className: "details-row",
+      key: rowKey
+    }, /*#__PURE__*/_react.default.createElement("th", {
+      className: "details-label",
+      scope: "row"
+    }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      typography: "type-b2-400",
+      color: "secondary-content"
+    }, detail.label)), /*#__PURE__*/_react.default.createElement("td", {
+      className: "details-value"
+    }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      typography: "type-b2-400",
+      color: "primary-content"
+    }, detail.value)));
+  })))), actions && actions.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
+    className: "details-actions",
+    role: "group",
+    "aria-label": "Document actions"
+  }, actions.map((action, index) => {
+    const actionKey = action.key || "action-".concat(action.label, "-").concat(index);
+    return /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+      key: actionKey,
+      label: action.label,
+      onClick: action.onClick,
+      type: "text-only",
+      size: "medium",
+      "aria-label": action.ariaLabel || action.label,
+      iconConfig: {
+        icon: action.icon || null,
+        position: 'left'
+      }
+    });
+  })), children && /*#__PURE__*/_react.default.createElement("div", {
+    className: "children-container"
+  }, children));
+}
+DocumentDetailsPanel.propTypes = {
+  /** Title text displayed at the top of the panel */
+  title: _propTypes.default.string,
+  /** Section header text (e.g., "INVOICE DETAILS") */
+  sectionTitle: _propTypes.default.string,
+  /** Array of detail items to display as key-value pairs */
+  details: _propTypes.default.arrayOf(_propTypes.default.shape({
+    key: _propTypes.default.string,
+    label: _propTypes.default.string.isRequired,
+    value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.node]).isRequired
+  })),
+  /** Array of action buttons/links to display */
+  actions: _propTypes.default.arrayOf(_propTypes.default.shape({
+    key: _propTypes.default.string,
+    label: _propTypes.default.string.isRequired,
+    onClick: _propTypes.default.func,
+    icon: _propTypes.default.node,
+    ariaLabel: _propTypes.default.string
+  })),
+  /** Additional content to render below the details */
+  children: _propTypes.default.node,
+  /** Additional CSS class */
+  className: _propTypes.default.string,
+  /** Inline styles */
+  style: _propTypes.default.object
+};
+DocumentDetailsPanel.defaultProps = {
+  title: null,
+  sectionTitle: null,
+  details: [],
+  actions: [],
+  children: null,
+  className: '',
+  style: {}
+};
+var _default = exports.default = DocumentDetailsPanel;

package/build/components/oa-component-select/CustomSelect.js

@@ -41,7 +41,7 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 const {
   Option
 } = _antd.Select;
-const StyledSelect = (0, _styledComponents.default)(_antd.Select)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  /* Hiding the last tag in case of All being selected. */\n  .ant-select-selection-overflow-item.ant-select-selection-overflow-item-rest {\n    display: ", ";\n  }\n  .ant-select-selection-item-content {\n    max-width: 70px;\n  }\n"])), props => props.maxTagCount === 1 ? "none" : undefined);
+const StyledSelect = (0, _styledComponents.default)(_antd.Select)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  /* Hiding the last tag in case of All being selected. */\n  .ant-select-selection-overflow-item.ant-select-selection-overflow-item-rest {\n    display: ", ";\n  }\n  .ant-select-selection-item-content {\n    max-width: 70px;\n  }\n  \n  /* Fix clear icon position */\n  .ant-select-clear {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    right: 32px;\n    margin-top: 0;\n    transform: translateY(-50%);\n    top: 50%;\n  }\n  \n  /* Ensure suffix icon (dropdown arrow) stays in correct position */\n  .ant-select-arrow {\n    right: 12px;\n  }\n"])), props => props.maxTagCount === 1 ? "none" : undefined);
 
 /**
  * Takes an array of values and an object mapping values to labels and returns an

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

@@ -0,0 +1,466 @@
+"use strict";
+
+require("core-js/modules/es.symbol.description.js");
+require("core-js/modules/es.object.assign.js");
+require("core-js/modules/es.weak-map.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/web.dom-collections.iterator.js");
+require("core-js/modules/es.json.stringify.js");
+var _react = _interopRequireWildcard(require("react"));
+var _Search = _interopRequireDefault(require("@material-ui/icons/Search"));
+var _FilterList = _interopRequireDefault(require("@material-ui/icons/FilterList"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _CustomTable = _interopRequireDefault(require("../oa-component-table/CustomTable"));
+var _CustomPagination = _interopRequireDefault(require("../oa-component-pagination/CustomPagination"));
+var _MaterialIcon = _interopRequireDefault(require("../oa-component-icons/MaterialIcon"));
+var _CustomDrawer = _interopRequireDefault(require("../oa-component-drawer/CustomDrawer"));
+var _CustomButton = _interopRequireDefault(require("../oa-component-button/CustomButton"));
+var _CustomInput = _interopRequireDefault(require("../oa-component-input/CustomInput"));
+var _CustomSelect = _interopRequireDefault(require("../oa-component-select/CustomSelect"));
+var _CustomRadio = _interopRequireDefault(require("../oa-component-radio/CustomRadio"));
+var _CustomDatePicker = _interopRequireDefault(require("../oa-component-datepicker/CustomDatePicker"));
+var _styles = require("./styles");
+const _excluded = ["dataSource", "columns", "rowKey", "emptyText"];
+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; }
+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; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+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); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+/**
+ * TableWithSearchAndFilter - A complete table component with search, filters and pagination
+ *
+ * @param {Object} tableProps - Table configuration
+ * @param {Object} searchProps - Search configuration
+ * @param {Object} filterProps - Filter configuration
+ *   @param {boolean} filterProps.show - Show/hide filters
+ *   @param {Array} filterProps.config - Filter field configurations
+ *   @param {Function} filterProps.onApply - Callback when filters are applied
+ *   @param {Function} filterProps.onClear - Callback when filters are cleared
+ *   @param {Function} filterProps.onChange - Callback when any filter value changes (key, value, allFilters, action)
+ *     - action can be: 'search', 'select', 'clear', or 'change'
+ *   @param {boolean} filterProps.loading - Global loading state for all filter selects
+ *   @param {string} filterProps.buttonLabel - Custom filter button label
+ *   @param {string} filterProps.drawerTitle - Custom filter drawer title
+ * @param {Object} paginationProps - Pagination configuration
+ * @param {string} className - Additional CSS class
+ *
+ * Filter Config Options:
+ *   - type: 'select' - Supports `loading`, `showSearch`, `filterOption`, `disabled` properties
+ *   - type: 'radio' - Radio button group
+ *   - type: 'date' - Single date picker
+ *   - type: 'dateRange' - Two date pickers with fields array
+ *   - type: 'group' - Group of fields, each supporting `loading`, `showSearch`, `filterOption`, `disabled` (for select type)
+ */
+function TableWithSearchAndFilter(_ref) {
+  let {
+    tableProps = {},
+    searchProps = {},
+    filterProps = {},
+    paginationProps = {},
+    className = ''
+  } = _ref;
+  // Destructure tableProps with defaults
+  const {
+      dataSource = [],
+      columns = [],
+      rowKey = 'id',
+      emptyText = 'No data found'
+    } = tableProps,
+    restTableProps = _objectWithoutProperties(tableProps, _excluded);
+
+  // Destructure searchProps with defaults
+  const {
+    show: showSearch = true,
+    placeholder: searchPlaceholder = 'Search...',
+    onSearch
+  } = searchProps;
+
+  // Destructure filterProps with defaults
+  const {
+    show: showFilters = true,
+    config: filterConfig = [],
+    onApply: onFiltersApply,
+    onClear: onFiltersClear,
+    onChange: onFilterChange,
+    loading: filtersLoading = false,
+    buttonLabel: filterButtonLabel = 'Filters',
+    drawerTitle: filterDrawerTitle = 'FILTERS'
+  } = filterProps;
+
+  // Destructure paginationProps with defaults
+  const {
+    show: showPagination = true,
+    current = 1,
+    pageSize = 10,
+    total,
+    pageSizeOptions = [10, 20, 50, 100],
+    onChange: onPaginationChange,
+    onShowSizeChange
+  } = paginationProps;
+
+  // Constants
+  const SEARCH_INPUT_WIDTH = '350px';
+
+  // Search state
+  const [searchValue, setSearchValue] = (0, _react.useState)('');
+
+  // Filter drawer state
+  const [isFilterDrawerVisible, setIsFilterDrawerVisible] = (0, _react.useState)(false);
+  const [filterValues, setFilterValues] = (0, _react.useState)({});
+
+  // Search handlers
+  const handleSearchChange = e => {
+    const {
+      value
+    } = e.target;
+    setSearchValue(value);
+    if (onSearch) {
+      onSearch(value);
+    }
+  };
+  const handleSearchPressEnter = () => {
+    if (onSearch) {
+      onSearch(searchValue);
+    }
+  };
+
+  // Filter handlers
+  const handleOpenFilterDrawer = () => setIsFilterDrawerVisible(true);
+  const handleCloseFilterDrawer = () => 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
+    const normalizedValue = value === '' ? null : value;
+    const updatedFilters = _objectSpread(_objectSpread({}, filterValues), {}, {
+      [key]: normalizedValue
+    });
+    setFilterValues(updatedFilters);
+
+    // Call onChange callback if provided for real-time filter changes
+    if (onFilterChange) {
+      onFilterChange(key, normalizedValue, updatedFilters, action);
+    }
+  };
+  const handleApplyFilters = () => {
+    setIsFilterDrawerVisible(false);
+    if (onFiltersApply) {
+      onFiltersApply(filterValues);
+    }
+  };
+  const handleClearFilters = () => {
+    setFilterValues({});
+    if (onFiltersClear) {
+      onFiltersClear();
+    }
+  };
+
+  // Memoized required keys calculation for better performance
+  const requiredKeys = (0, _react.useMemo)(() => {
+    const keys = [];
+    filterConfig.forEach(filter => {
+      const {
+        type,
+        key,
+        required,
+        fields = []
+      } = filter;
+      if (required) {
+        if (type === 'dateRange' || type === 'group') {
+          fields.forEach(field => {
+            keys.push(field.key);
+          });
+        } else {
+          keys.push(key);
+        }
+      }
+    });
+    return keys;
+  }, [filterConfig]);
+
+  // Create a stable string representation of filterValues for required keys
+  // This ensures reliable dependency tracking in production builds
+  const requiredFieldsSignature = (0, _react.useMemo)(() => requiredKeys.map(key => {
+    const value = filterValues[key];
+    // Create a stable string representation that changes when value changes
+    if (value === undefined || value === null) return "".concat(key, ":null");
+    if (value instanceof Date) return "".concat(key, ":").concat(value.getTime());
+    return "".concat(key, ":").concat(JSON.stringify(value));
+  }).join('|'), [requiredKeys, filterValues]);
+
+  // Memoized check if all required fields are filled
+  const areAllRequiredFieldsFilled = (0, _react.useMemo)(() => {
+    // If no required fields, button should be enabled
+    if (requiredKeys.length === 0) {
+      return true;
+    }
+
+    // Check each required field has a valid value
+    return requiredKeys.every(requiredKey => {
+      const value = filterValues[requiredKey];
+
+      // Check if value exists and is not empty/null/undefined
+      // Also handle edge cases: empty arrays, empty objects, etc.
+      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;
+    });
+  }, [requiredKeys, requiredFieldsSignature, filterValues]);
+
+  // Helper function to determine notFoundContent message
+  const getNotFoundContent = (isApiCallInProgress, query) => {
+    if (!isApiCallInProgress && (query === null || query === void 0 ? void 0 : query.length) < 3) {
+      return 'Start Typing atleast 3 characters';
+    }
+    if (isApiCallInProgress && (query === null || query === void 0 ? void 0 : query.length) > 0) {
+      return 'Loading...';
+    }
+    return 'No data found';
+  };
+
+  // Helper function to render CustomSelect (DRY principle)
+  const renderSelect = (fieldKey, fieldConfig) => {
+    const {
+      placeholder,
+      options = [],
+      loading = false,
+      isApiCallInProgress = false,
+      searchValue: query = '',
+      showSearch: fieldShowSearch = false,
+      filterOption,
+      disabled = false
+    } = fieldConfig;
+    const fieldValue = filterValues[fieldKey];
+    const isLoading = filtersLoading || loading || isApiCallInProgress;
+    const notFoundContent = getNotFoundContent(isApiCallInProgress, query);
+    return /*#__PURE__*/_react.default.createElement(_CustomSelect.default, {
+      placeholder: placeholder || 'Select an option',
+      value: fieldValue || undefined,
+      options: options,
+      onSelectionChange: val => {
+        // Normalize: null/undefined means clear action
+        const action = val === null || val === undefined ? 'clear' : 'select';
+        handleFilterChange(fieldKey, val, action);
+      },
+      onSearch: searchText => {
+        // For search, pass the search text as-is (don't normalize to null)
+        handleFilterChange(fieldKey, searchText || null, 'search');
+      },
+      onChange: val => {
+        // Catch clear from Ant Design's onChange (passes through {...props})
+        if (val === undefined || val === null) {
+          handleFilterChange(fieldKey, null, 'clear');
+        }
+      },
+      allowClear: true,
+      loading: isLoading,
+      showSearch: fieldShowSearch,
+      filterOption: filterOption,
+      disabled: disabled,
+      notFoundContent: notFoundContent
+    });
+  };
+
+  // Helper function to render CustomDatePicker (DRY principle)
+  const renderDatePicker = (fieldKey, fieldConfig) => {
+    const {
+      placeholder
+    } = fieldConfig;
+    const fieldValue = filterValues[fieldKey];
+    return /*#__PURE__*/_react.default.createElement(_CustomDatePicker.default, {
+      placeholder: placeholder || 'Select date',
+      value: fieldValue,
+      onChange: date => handleFilterChange(fieldKey, date, 'change')
+    });
+  };
+
+  // Helper function to render CustomRadio.Group (DRY principle)
+  const renderRadioGroup = (fieldKey, fieldConfig) => {
+    const {
+      options = []
+    } = fieldConfig;
+    const fieldValue = filterValues[fieldKey];
+    return /*#__PURE__*/_react.default.createElement(_CustomRadio.default.Group, {
+      value: fieldValue,
+      onChange: e => handleFilterChange(fieldKey, e.target.value, 'change')
+    }, options.map(option => /*#__PURE__*/_react.default.createElement(_CustomRadio.default, {
+      key: option.value,
+      value: option.value,
+      label: option.label
+    })));
+  };
+
+  // Render filter input based on type
+  const renderFilterInput = filter => {
+    const {
+      type,
+      key,
+      fields = []
+    } = filter;
+    switch (type) {
+      case 'radio':
+        return renderRadioGroup(key, filter);
+      case 'select':
+        return renderSelect(key, filter);
+      case 'date':
+        return 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
+        }, /*#__PURE__*/_react.default.createElement(_styles.FilterSubLabel, null, field.label), renderDatePicker(field.key, field))));
+      case 'group':
+        return /*#__PURE__*/_react.default.createElement(_styles.FilterGroup, null, fields.map(field => /*#__PURE__*/_react.default.createElement(_styles.FilterSubField, {
+          key: field.key
+        }, /*#__PURE__*/_react.default.createElement(_styles.FilterSubLabel, null, field.label), field.type === 'select' && renderSelect(field.key, field), field.type === 'date' && renderDatePicker(field.key, field), field.type === 'radio' && renderRadioGroup(field.key, field))));
+      default:
+        return null;
+    }
+  };
+  const displayData = dataSource;
+  const totalRecords = total !== null && total !== void 0 ? total : displayData.length;
+  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, {
+    prefix: /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+      icon: _Search.default,
+      size: 20,
+      style: {
+        color: '#8c8c8c'
+      }
+    }),
+    placeholder: searchPlaceholder,
+    value: searchValue,
+    onChange: handleSearchChange,
+    onPressEnter: handleSearchPressEnter,
+    allowClear: true,
+    style: {
+      width: SEARCH_INPUT_WIDTH,
+      flexShrink: 0
+    }
+  }), showFilters && /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+    label: filterButtonLabel,
+    onClick: handleOpenFilterDrawer,
+    type: "secondary",
+    size: "medium",
+    iconConfig: {
+      icon: /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+        icon: _FilterList.default
+      }),
+      position: 'left'
+    }
+  })), showFilters && /*#__PURE__*/_react.default.createElement(_CustomDrawer.default, {
+    title: filterDrawerTitle,
+    placement: "right",
+    isBaseDrawer: true,
+    onClose: handleCloseFilterDrawer,
+    open: isFilterDrawerVisible,
+    visible: isFilterDrawerVisible,
+    closable: false,
+    width: 400
+  }, /*#__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({
+    rowKey: rowKey,
+    dataSource: displayData,
+    columns: columns,
+    pagination: false,
+    emptyText: emptyText
+  }, restTableProps)), showPagination && totalRecords > pageSize && /*#__PURE__*/_react.default.createElement(_styles.PaginationContainer, null, /*#__PURE__*/_react.default.createElement(_CustomPagination.default, {
+    current: current,
+    pageSize: pageSize,
+    total: totalRecords,
+    onChange: onPaginationChange,
+    onShowSizeChange: onShowSizeChange,
+    pageSizeOptions: pageSizeOptions,
+    showSizeChanger: true,
+    showTotal: true
+  })));
+}
+TableWithSearchAndFilter.propTypes = {
+  tableProps: _propTypes.default.shape({
+    dataSource: _propTypes.default.array,
+    columns: _propTypes.default.array.isRequired,
+    rowKey: _propTypes.default.string,
+    emptyText: _propTypes.default.string
+  }),
+  searchProps: _propTypes.default.shape({
+    show: _propTypes.default.bool,
+    placeholder: _propTypes.default.string,
+    onSearch: _propTypes.default.func
+  }),
+  filterProps: _propTypes.default.shape({
+    show: _propTypes.default.bool,
+    config: _propTypes.default.array,
+    onApply: _propTypes.default.func,
+    onClear: _propTypes.default.func,
+    onChange: _propTypes.default.func,
+    loading: _propTypes.default.bool,
+    buttonLabel: _propTypes.default.string,
+    drawerTitle: _propTypes.default.string
+  }),
+  paginationProps: _propTypes.default.shape({
+    show: _propTypes.default.bool,
+    current: _propTypes.default.number,
+    pageSize: _propTypes.default.number,
+    total: _propTypes.default.number,
+    pageSizeOptions: _propTypes.default.array,
+    onChange: _propTypes.default.func,
+    onShowSizeChange: _propTypes.default.func
+  }),
+  className: _propTypes.default.string
+};
+TableWithSearchAndFilter.defaultProps = {
+  tableProps: {
+    dataSource: [],
+    rowKey: 'id',
+    emptyText: 'No data found'
+  },
+  searchProps: {
+    show: true,
+    placeholder: 'Search...'
+  },
+  filterProps: {
+    show: true,
+    config: [],
+    buttonLabel: 'Filters',
+    drawerTitle: 'FILTERS'
+  },
+  paginationProps: {
+    show: true,
+    current: 1,
+    pageSize: 10,
+    pageSizeOptions: [10, 20, 50, 100]
+  },
+  className: ''
+};
+var _default = exports.default = TableWithSearchAndFilter;

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

@@ -0,0 +1,24 @@
+"use strict";
+
+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;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
+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 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"])));

package/build/dev/oa-component-upload/CustomUpload.js

@@ -212,7 +212,7 @@ function DocumentUpload(_ref) {
     }
 
     // If file is done or error, show confirmation modal
-    if ((file === null || file === void 0 ? void 0 : file.status) === 'done' || (file === null || file === void 0 ? void 0 : file.status) === 'error') {
+    if ((file === null || file === void 0 ? void 0 : file.status) === 'done' || (file === null || file === void 0 ? void 0 : file.status) === 'error' || file !== null && file !== void 0 && file.url) {
       setSelectedFile(file);
       setDeleteConfirmation(true);
       resolve(false); // Prevent removal until confirmed

package/build/dev/oa-widget-document-side-drawer/DocumentSideDrawer.js

@@ -19,7 +19,7 @@ var _MaterialIcon = _interopRequireDefault(require("../../components/oa-componen
 var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));
 var _Check = _interopRequireDefault(require("@material-ui/icons/Check"));
 var _styles = _interopRequireDefault(require("./styles"));
-const _excluded = ["title", "handleCloseDrawer", "documentConfig", "drawerWidth", "drawerButtonConfig", "drawerTagConfig", "onlyDocumentView"];
+const _excluded = ["title", "handleCloseDrawer", "documentConfig", "drawerWidth", "drawerButtonConfig", "drawerTagConfig", "onlyDocumentView", "containerClassName"];
 /* 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); }
@@ -50,7 +50,8 @@ function DocumentSideDrawer(_ref) {
       drawerWidth,
       drawerButtonConfig,
       drawerTagConfig,
-      onlyDocumentView
+      onlyDocumentView,
+      containerClassName
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   // Calculate the drawer width based on documentConfig or fallback to 480
@@ -132,14 +133,16 @@ function DocumentSideDrawer(_ref) {
       color: item.type === "positive" ? "positive" : "negative"
     }), /*#__PURE__*/_react.default.createElement("p", null, item.title)))))));
   };
-  return /*#__PURE__*/_react.default.createElement(_CustomDrawer.default, {
+  return /*#__PURE__*/_react.default.createElement(_CustomDrawer.default, _extends({
     buttonConfig: drawerButtonConfig,
     "data-test": "document-side-drawer",
     className: "documentDrawer",
     width: calculatedWidth,
     onClose: handleCloseDrawer,
     title: title
-  }, /*#__PURE__*/_react.default.createElement(_styles.default, null, /*#__PURE__*/_react.default.createElement("div", {
+  }, props), /*#__PURE__*/_react.default.createElement(_styles.default, {
+    className: containerClassName
+  }, /*#__PURE__*/_react.default.createElement("div", {
     className: "viewerContainer"
   }, renderDocumentViewer(), !onlyDocumentView && /*#__PURE__*/_react.default.createElement("div", {
     className: "rightContSection"
@@ -180,7 +183,8 @@ DocumentSideDrawer.propTypes = {
   drawerWidth: _propTypes.default.string,
   drawerButtonConfig: _propTypes.default.object,
   drawerTagConfig: _propTypes.default.object,
-  onlyDocumentView: _propTypes.default.bool
+  onlyDocumentView: _propTypes.default.bool,
+  containerClassName: _propTypes.default.string
 };
 
 // Default props to provide fallback values for optional props

package/build/dev/oa-widget-document-side-drawer/styles.js

@@ -8,5 +8,5 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _templateObject;
 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 ViewerContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.ant-tabs-nav{\n  margin: 0;\n}\n  .ant-tabs-top>.ant-tabs-nav::before {\n  border: none;\n      border-right: 1px solid #E0E0E0;\n  }\n  .ant-tabs-content-holder .customDocumentViewerOverlayHeader{\n        bottom: 60px;\n  }\n  .ant-tabs-tab{\n  border-radius: 0px !important;\n      border: none !important;\n       border-bottom: 2px solid transparent !important;\n  }\n    .ant-tabs-tab-active{\n    border-bottom: 2px solid var(--color-primary) !important;\n    }\n  .viewerContainer > div {\n    flex: 1;\n    box-sizing: border-box;\n  }\n  .viewerContainer {\n    display: flex;\n    flex-direction: row;\n    justify-content: flex-start;\n  }\n  .rightContSection {\n    display: flex;\n    flex-direction: column;\n    padding: 24px;\n  }\n  .grayBoxSec {\n    border-radius: 8px;\n    background: #f6f6f6;\n    padding: 12px 16px;\n  }\n  .statusSec {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n  }\n  .statusSec button {\n    margin-left: 8px;\n  }\n"])));
+const ViewerContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.ant-tabs-nav{\n  margin: 0;\n}\n  .ant-tabs-top>.ant-tabs-nav::before {\n  border: none;\n      border-right: 1px solid #E0E0E0;\n  }\n  .ant-tabs-content-holder .customDocumentViewerOverlayHeader{\n        bottom: 60px;\n  }\n  .ant-tabs-tab{\n  border-radius: 0px !important;\n      border: none !important;\n       border-bottom: 2px solid transparent !important;\n  }\n    .ant-tabs-tab-active{\n    border-bottom: 2px solid var(--color-primary) !important;\n    }\n  .viewerContainer > div {\n    flex: 1;\n    box-sizing: border-box;\n  }\n  .viewerContainer {\n    display: flex;\n    flex-direction: row;\n    justify-content: flex-start;\n  }\n  .rightContSection {\n    display: flex;\n    flex-direction: column;\n    padding: 24px;\n    min-width: 300px;\n    max-width: 450px;\n    overflow-x: visible;\n  }\n  /* Styles specific to DocumentViewerWithDetails */\n  &.documentViewerWithDetails {\n    .viewerContainer > div:first-child {\n      flex: 1;\n      box-sizing: border-box;\n      min-width: 0;\n    }\n    .rightContSection {\n      flex: 0 0 auto;\n      width: fit-content;\n      min-width: auto;\n      max-width: none;\n    }\n  }\n  .grayBoxSec {\n    border-radius: 8px;\n    background: #f6f6f6;\n    padding: 12px 16px;\n  }\n  .statusSec {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n  }\n  .statusSec button {\n    margin-left: 8px;\n  }\n"])));
 var _default = exports.default = ViewerContainer;

package/build/dev/oa-widget-document-viewer-with-details/DocumentViewerWithDetails.js

@@ -0,0 +1,123 @@
+"use strict";
+
+require("core-js/modules/es.object.assign.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _DocumentSideDrawer = _interopRequireDefault(require("../oa-widget-document-side-drawer/DocumentSideDrawer"));
+var _DocumentDetailsPanel = _interopRequireDefault(require("../../components/oa-component-document-details-panel/DocumentDetailsPanel"));
+const _excluded = ["title", "onClose", "drawerWidth", "fileUrl", "fileType", "documentConfig", "detailsTitle", "sectionTitle", "details", "actions", "children"];
+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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+/**
+ * DocumentViewerWithDetails Component
+ *
+ * A split-view component that displays a document viewer on the left
+ * and a details panel with actions on the right.
+ *
+ * Uses DocumentSideDrawer and DocumentDetailsPanel internally.
+ *
+ * @example
+ * <DocumentViewerWithDetails
+ *   title="VIEW DOCUMENT"
+ *   fileUrl="/path/to/document.pdf"
+ *   fileType="pdf"
+ *   detailsTitle="Document Information"
+ *   sectionTitle="DETAILS"
+ *   details={[
+ *     { label: 'Date', value: '17 Nov 2025' },
+ *     { label: 'Document Number', value: 'DOC-12345' },
+ *   ]}
+ *   actions={[
+ *     { label: 'Download', onClick: () => {}, icon: <DownloadIcon /> },
+ *   ]}
+ *   onClose={() => setIsOpen(false)}
+ * />
+ */
+function DocumentViewerWithDetails(_ref) {
+  let {
+      // Drawer props
+      title,
+      onClose,
+      drawerWidth,
+      // Document props
+      fileUrl,
+      fileType,
+      documentConfig,
+      // Details panel props
+      detailsTitle,
+      sectionTitle,
+      details,
+      actions,
+      // Additional children
+      children
+    } = _ref,
+    restProps = _objectWithoutProperties(_ref, _excluded);
+  // Build document config from fileUrl or use provided documentConfig
+  const finalDocumentConfig = documentConfig || (fileUrl ? {
+    fileUrl,
+    fileType: fileType || 'pdf'
+  } : null);
+  return /*#__PURE__*/_react.default.createElement(_DocumentSideDrawer.default, _extends({
+    title: title,
+    handleCloseDrawer: onClose,
+    documentConfig: finalDocumentConfig,
+    drawerWidth: drawerWidth,
+    containerClassName: "documentViewerWithDetails"
+  }, restProps), /*#__PURE__*/_react.default.createElement(_DocumentDetailsPanel.default, {
+    title: detailsTitle,
+    sectionTitle: sectionTitle,
+    details: details,
+    actions: actions
+  }, children));
+}
+DocumentViewerWithDetails.propTypes = {
+  /** Drawer title displayed in the header */
+  title: _propTypes.default.string,
+  /** Callback function when drawer is closed */
+  onClose: _propTypes.default.func,
+  /** Custom drawer width (default: 1200) */
+  drawerWidth: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  /** URL of the document to display */
+  fileUrl: _propTypes.default.string,
+  /** Type of document: 'pdf', 'pdfWithCarousel', or 'image' */
+  fileType: _propTypes.default.oneOf(['pdf', 'pdfWithCarousel', 'image']),
+  /** Full document config (alternative to fileUrl) */
+  documentConfig: _propTypes.default.object,
+  /** Title text for the details panel */
+  detailsTitle: _propTypes.default.string,
+  /** Section header text (e.g., "DETAILS") */
+  sectionTitle: _propTypes.default.string,
+  /** Array of detail items to display */
+  details: _propTypes.default.arrayOf(_propTypes.default.shape({
+    label: _propTypes.default.string.isRequired,
+    value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired
+  })),
+  /** Array of action buttons to display */
+  actions: _propTypes.default.arrayOf(_propTypes.default.shape({
+    label: _propTypes.default.string.isRequired,
+    onClick: _propTypes.default.func,
+    icon: _propTypes.default.node
+  })),
+  /** Additional content to render in the details panel */
+  children: _propTypes.default.node
+};
+DocumentViewerWithDetails.defaultProps = {
+  title: null,
+  onClose: () => {},
+  drawerWidth: '1200',
+  fileUrl: null,
+  fileType: null,
+  documentConfig: null,
+  detailsTitle: null,
+  sectionTitle: null,
+  details: [],
+  actions: [],
+  children: null
+};
+var _default = exports.default = DocumentViewerWithDetails;

package/build/index.js

@@ -335,6 +335,12 @@ Object.defineProperty(exports, "DocUploadWidget", {
     return _DocUploadWidget.default;
   }
 });
+Object.defineProperty(exports, "DocumentDetailsPanel", {
+  enumerable: true,
+  get: function get() {
+    return _DocumentDetailsPanel.default;
+  }
+});
 Object.defineProperty(exports, "DocumentSideDrawer", {
   enumerable: true,
   get: function get() {
@@ -347,6 +353,12 @@ Object.defineProperty(exports, "DocumentSideModal", {
     return _DocumentSideModal.default;
   }
 });
+Object.defineProperty(exports, "DocumentViewerWithDetails", {
+  enumerable: true,
+  get: function get() {
+    return _DocumentViewerWithDetails.default;
+  }
+});
 Object.defineProperty(exports, "DropdownSearchInput", {
   enumerable: true,
   get: function get() {
@@ -575,6 +587,12 @@ Object.defineProperty(exports, "StageTimelineWidget", {
     return _StageTimelineWidget.default;
   }
 });
+Object.defineProperty(exports, "TableWithSearchAndFilter", {
+  enumerable: true,
+  get: function get() {
+    return _TableWithSearchAndFilter.default;
+  }
+});
 Object.defineProperty(exports, "TextArea", {
   enumerable: true,
   get: function get() {
@@ -683,6 +701,7 @@ var _CustomSelect = _interopRequireDefault(require("./components/oa-component-se
 var _CustomTimePicker = _interopRequireDefault(require("./components/oa-component-timepicker/CustomTimePicker"));
 var _CustomDatePicker = _interopRequireDefault(require("./components/oa-component-datepicker/CustomDatePicker"));
 var _CustomTable = _interopRequireDefault(require("./components/oa-component-table/CustomTable"));
+var _TableWithSearchAndFilter = _interopRequireDefault(require("./components/oa-component-table-with-search-and-filter/TableWithSearchAndFilter"));
 var _CustomTabs = _interopRequireDefault(require("./components/oa-component-tabs/CustomTabs"));
 var _CustomTag = _interopRequireDefault(require("./components/oa-component-tag/CustomTag"));
 var _CustomTimeline = _interopRequireDefault(require("./components/oa-component-timeline/CustomTimeline"));
@@ -754,6 +773,8 @@ var _CustomUpload2 = _interopRequireDefault(require("./dev/oa-component-upload/C
 var _DocumentSideDrawer = _interopRequireDefault(require("./dev/oa-widget-document-side-drawer/DocumentSideDrawer"));
 var _CustomDocumentViewer = _interopRequireDefault(require("./dev/oa-component-document-viewer/CustomDocumentViewer"));
 var _DocumentSideModal = _interopRequireDefault(require("./dev/oa-widget-document-modal/DocumentSideModal"));
+var _DocumentDetailsPanel = _interopRequireDefault(require("./components/oa-component-document-details-panel/DocumentDetailsPanel"));
+var _DocumentViewerWithDetails = _interopRequireDefault(require("./dev/oa-widget-document-viewer-with-details/DocumentViewerWithDetails"));
 var _PaymentAndConsent = _interopRequireDefault(require("./layout/paymentAndConsent/PaymentAndConsent"));
 var _GenricLayOut = _interopRequireDefault(require("./layout/GenricLayOut/GenricLayOut"));
 var _EntityOverviewLayout = _interopRequireDefault(require("./layout/EntityOverviewLayout/EntityOverviewLayout"));

package/build/layout/GenricLayOut/GenricLayOut.js

@@ -2229,7 +2229,7 @@ function GenricLayOut(_ref) {
     }
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: "oaheaderButtonsRight"
-  }, (rightHeaderSecondButton === null || rightHeaderSecondButton === void 0 ? void 0 : rightHeaderSecondButton.visible) && /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+  }, !isFiltersEmpty(customDrawer === null || customDrawer === void 0 ? void 0 : customDrawer.appliedFilters) && /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
     label: rightHeaderSecondButton === null || rightHeaderSecondButton === void 0 ? void 0 : rightHeaderSecondButton.label,
     onClick: rightHeaderSecondButtonClick,
     type: rightHeaderSecondButton === null || rightHeaderSecondButton === void 0 ? void 0 : rightHeaderSecondButton.type,

package/package.json

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