oa-componentbook 1.0.1-stage.441 → 1.0.1-stage.442

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: #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  .section-header {\n    background: var(--color-tertiary-background, #f5f5f5);\n    padding: 12px 16px;\n  }\n\n  .details-table {\n    width: 100%;\n  }\n\n  .details-row {\n    display: flex;\n    border-bottom: 1px solid var(--color-border, #f0f0f0);\n    padding: 16px 0;\n  }\n\n  .details-label {\n    width: 140px;\n    min-width: 100px;\n    flex-shrink: 0;\n  }\n\n  .details-value {\n    flex: 1;\n    word-break: break-word;\n    font-weight: 500;\n  }\n\n  .details-actions {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 16px;\n    margin-top: 24px;\n    padding-top: 24px;\n    border-top: 1px solid var(--color-border, #e8e8e8);\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  }\n\n  .children-container {\n    margin-top: 24px;\n  }\n"])));
 
 /**
  * DocumentDetailsPanel Component
@@ -66,39 +66,53 @@ function DocumentDetailsPanel(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
     typography: "type-t2-700",
     color: "primary-content"
-  }, title)), sectionTitle && /*#__PURE__*/_react.default.createElement("div", {
+  }, 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("div", {
-    className: "details-table"
-  }, details.map((detail, index) => /*#__PURE__*/_react.default.createElement("div", {
-    className: "details-row",
-    key: detail.key || index
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "details-label"
-  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
-    typography: "type-b2-400",
-    color: "secondary-content"
-  }, detail.label)), /*#__PURE__*/_react.default.createElement("div", {
-    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"
-  }, actions.map((action, index) => /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
-    key: action.key || index,
-    label: action.label,
-    onClick: action.onClick,
-    type: "text-only",
-    size: "medium",
-    iconConfig: {
-      icon: action.icon || null,
-      position: 'left'
-    }
-  }))), children && /*#__PURE__*/_react.default.createElement("div", {
+  }, 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));
 }
@@ -118,7 +132,8 @@ DocumentDetailsPanel.propTypes = {
     key: _propTypes.default.string,
     label: _propTypes.default.string.isRequired,
     onClick: _propTypes.default.func,
-    icon: _propTypes.default.node
+    icon: _propTypes.default.node,
+    ariaLabel: _propTypes.default.string
   })),
   /** Additional content to render below the details */
   children: _propTypes.default.node,

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

@@ -8,9 +8,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 require("core-js/modules/web.dom-collections.iterator.js");
-require("core-js/modules/es.array.includes.js");
-require("core-js/modules/es.string.includes.js");
-require("core-js/modules/es.regexp.to-string.js");
 var _react = _interopRequireWildcard(require("react"));
 var _Search = _interopRequireDefault(require("@material-ui/icons/Search"));
 var _FilterList = _interopRequireDefault(require("@material-ui/icons/FilterList"));
@@ -83,8 +80,6 @@ function TableWithSearchAndFilter(_ref) {
   const {
     show: showSearch = true,
     placeholder: searchPlaceholder = 'Search...',
-    debounceDelay = 500,
-    searchKeys = [],
     onSearch
   } = searchProps;
 
@@ -111,42 +106,15 @@ function TableWithSearchAndFilter(_ref) {
     onShowSizeChange
   } = paginationProps;
 
+  // Constants
+  const SEARCH_INPUT_WIDTH = '350px';
+
   // Search state
   const [searchValue, setSearchValue] = (0, _react.useState)('');
-  const [filteredData, setFilteredData] = (0, _react.useState)(dataSource);
-  const timerRef = (0, _react.useRef)(null);
 
   // Filter drawer state
   const [isFilterDrawerVisible, setIsFilterDrawerVisible] = (0, _react.useState)(false);
   const [filterValues, setFilterValues] = (0, _react.useState)({});
-  const [appliedFilters, setAppliedFilters] = (0, _react.useState)({});
-
-  // Client-side filtering function
-  const applyFiltersAndSearch = (data, search, filters) => {
-    let result = [...data];
-    if (search && searchKeys.length > 0) {
-      const searchLower = search.toLowerCase();
-      result = result.filter(item => searchKeys.some(key => {
-        var _item$key;
-        return (_item$key = item[key]) === null || _item$key === void 0 ? void 0 : _item$key.toString().toLowerCase().includes(searchLower);
-      }));
-    }
-    Object.entries(filters).forEach(_ref2 => {
-      let [key, value] = _ref2;
-      if (value) {
-        result = result.filter(item => {
-          var _item$key2;
-          return ((_item$key2 = item[key]) === null || _item$key2 === void 0 ? void 0 : _item$key2.toString().toLowerCase()) === value.toString().toLowerCase();
-        });
-      }
-    });
-    setFilteredData(result);
-  };
-
-  // Sync filtered data when dataSource changes
-  (0, _react.useEffect)(() => {
-    applyFiltersAndSearch(dataSource, searchValue, appliedFilters);
-  }, [dataSource]);
 
   // Search handlers
   const handleSearchChange = e => {
@@ -154,75 +122,87 @@ function TableWithSearchAndFilter(_ref) {
       value
     } = e.target;
     setSearchValue(value);
-    if (timerRef.current) {
-      clearTimeout(timerRef.current);
-    }
-    if (debounceDelay === 0) {
-      if (onSearch) {
-        onSearch(value);
-      } else {
-        applyFiltersAndSearch(dataSource, value, appliedFilters);
-      }
-      return;
+    if (onSearch) {
+      onSearch(value);
     }
-    timerRef.current = setTimeout(() => {
-      if (onSearch) {
-        onSearch(value);
-      } else {
-        applyFiltersAndSearch(dataSource, value, appliedFilters);
-      }
-    }, debounceDelay);
   };
   const handleSearchPressEnter = () => {
-    if (timerRef.current) {
-      clearTimeout(timerRef.current);
-    }
     if (onSearch) {
       onSearch(searchValue);
-    } else {
-      applyFiltersAndSearch(dataSource, searchValue, appliedFilters);
     }
   };
-  (0, _react.useEffect)(() => () => {
-    if (timerRef.current) {
-      clearTimeout(timerRef.current);
-    }
-  }, []);
 
   // 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]: value
+      [key]: normalizedValue
     });
     setFilterValues(updatedFilters);
 
     // Call onChange callback if provided for real-time filter changes
     if (onFilterChange) {
-      onFilterChange(key, value, updatedFilters, action);
+      onFilterChange(key, normalizedValue, updatedFilters, action);
     }
   };
   const handleApplyFilters = () => {
-    setAppliedFilters(_objectSpread({}, filterValues));
     setIsFilterDrawerVisible(false);
     if (onFiltersApply) {
       onFiltersApply(filterValues);
-    } else {
-      applyFiltersAndSearch(dataSource, searchValue, filterValues);
     }
   };
   const handleClearFilters = () => {
     setFilterValues({});
-    setAppliedFilters({});
     if (onFiltersClear) {
       onFiltersClear();
-    } else {
-      applyFiltersAndSearch(dataSource, searchValue, {});
     }
   };
 
+  // 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]);
+
+  // Memoized check if all required fields are filled
+  const areAllRequiredFieldsFilled = (0, _react.useMemo)(() => requiredKeys.every(requiredKey => {
+    const value = filterValues[requiredKey];
+    // Check if value exists and is not empty/null/undefined
+    return value !== undefined && value !== null && value !== '';
+  }), [requiredKeys, 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 {
@@ -230,22 +210,27 @@ function TableWithSearchAndFilter(_ref) {
       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 => {
-        // If val is null/undefined, it's a clear action
+        // Normalize: null/undefined means clear action
         const action = val === null || val === undefined ? 'clear' : 'select';
         handleFilterChange(fieldKey, val, action);
       },
-      onSearch: searchText => handleFilterChange(fieldKey, searchText, 'search'),
+      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) {
@@ -256,8 +241,8 @@ function TableWithSearchAndFilter(_ref) {
       loading: isLoading,
       showSearch: fieldShowSearch,
       filterOption: filterOption,
-      disabled: disabled
-      // notFoundContent={(!isApiCallInProgress && query?.length < 3) ? "Start Typing atleast 3 characters" : (isApiCallInProgress && query?.length > 0) ? "Loading..." : "No data found"}
+      disabled: disabled,
+      notFoundContent: notFoundContent
     });
   };
 
@@ -307,16 +292,16 @@ function TableWithSearchAndFilter(_ref) {
       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, field.required && /*#__PURE__*/_react.default.createElement(_styles.RequiredMark, null, "*")), renderDatePicker(field.key, field))));
+        }, /*#__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.required && /*#__PURE__*/_react.default.createElement(_styles.RequiredMark, null, "*")), field.type === 'select' && renderSelect(field.key, field), field.type === 'date' && renderDatePicker(field.key, field), field.type === 'radio' && renderRadioGroup(field.key, field))));
+        }, /*#__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 = onSearch || onFiltersApply ? dataSource : filteredData;
+  const displayData = dataSource;
   const totalRecords = total !== null && total !== void 0 ? total : displayData.length;
   return /*#__PURE__*/_react.default.createElement(_styles.TableWithSearchAndFilterContainer, {
     className: className
@@ -334,7 +319,7 @@ function TableWithSearchAndFilter(_ref) {
     onPressEnter: handleSearchPressEnter,
     allowClear: true,
     style: {
-      width: '350px',
+      width: SEARCH_INPUT_WIDTH,
       flexShrink: 0
     }
   }), showFilters && /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
@@ -368,7 +353,8 @@ function TableWithSearchAndFilter(_ref) {
     label: "Apply Filter",
     onClick: handleApplyFilters,
     type: "primary",
-    size: "medium"
+    size: "medium",
+    disabled: !areAllRequiredFieldsFilled
   })))), /*#__PURE__*/_react.default.createElement(_CustomTable.default, _extends({
     rowKey: rowKey,
     dataSource: displayData,
@@ -396,8 +382,6 @@ TableWithSearchAndFilter.propTypes = {
   searchProps: _propTypes.default.shape({
     show: _propTypes.default.bool,
     placeholder: _propTypes.default.string,
-    debounceDelay: _propTypes.default.number,
-    searchKeys: _propTypes.default.arrayOf(_propTypes.default.string),
     onSearch: _propTypes.default.func
   }),
   filterProps: _propTypes.default.shape({
@@ -429,9 +413,7 @@ TableWithSearchAndFilter.defaultProps = {
   },
   searchProps: {
     show: true,
-    placeholder: 'Search...',
-    debounceDelay: 500,
-    searchKeys: []
+    placeholder: 'Search...'
   },
   filterProps: {
     show: true,

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
@@ -139,7 +140,9 @@ function DocumentSideDrawer(_ref) {
     width: calculatedWidth,
     onClose: handleCloseDrawer,
     title: title
-  }, props), /*#__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    min-width: 300px;\n    max-width: 450px;\n    overflow-x: visible;\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

@@ -10,19 +10,18 @@ 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"];
-/* 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 _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"
@@ -68,7 +67,8 @@ function DocumentViewerWithDetails(_ref) {
     title: title,
     handleCloseDrawer: onClose,
     documentConfig: finalDocumentConfig,
-    drawerWidth: drawerWidth
+    drawerWidth: drawerWidth,
+    containerClassName: "documentViewerWithDetails"
   }, restProps), /*#__PURE__*/_react.default.createElement(_DocumentDetailsPanel.default, {
     title: detailsTitle,
     sectionTitle: sectionTitle,
@@ -80,7 +80,7 @@ DocumentViewerWithDetails.propTypes = {
   /** Drawer title displayed in the header */
   title: _propTypes.default.string,
   /** Callback function when drawer is closed */
-  onClose: _propTypes.default.func.isRequired,
+  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 */
@@ -109,7 +109,8 @@ DocumentViewerWithDetails.propTypes = {
 };
 DocumentViewerWithDetails.defaultProps = {
   title: null,
-  drawerWidth: "1200",
+  onClose: () => {},
+  drawerWidth: '1200',
   fileUrl: null,
   fileType: null,
   documentConfig: null,

package/package.json

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