oa-componentbook 1.0.1-stage.443 → 1.0.1-stage.445

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

@@ -8,7 +8,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 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"));
@@ -116,6 +115,7 @@ function TableWithSearchAndFilter(_ref) {
   // Filter drawer state
   const [isFilterDrawerVisible, setIsFilterDrawerVisible] = (0, _react.useState)(false);
   const [filterValues, setFilterValues] = (0, _react.useState)({});
+  const [areAllRequiredFieldsFilled, setAreAllRequiredFieldsFilled] = (0, _react.useState)(true);
 
   // Search handlers
   const handleSearchChange = e => {
@@ -133,6 +133,47 @@ function TableWithSearchAndFilter(_ref) {
     }
   };
 
+  // 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]);
+
+  // Helper function to validate if all required fields are filled
+  const validateRequiredFields = (filters, keys) => {
+    if (keys.length === 0) return true;
+    return keys.every(requiredKey => {
+      const val = filters[requiredKey];
+      if (val === undefined || val === null || val === '') {
+        return false;
+      }
+      if (Array.isArray(val)) {
+        return val.length > 0;
+      }
+      if (typeof val === 'object' && !(val instanceof Date)) {
+        return Object.keys(val).length > 0;
+      }
+      return true;
+    });
+  };
+
   // Filter handlers
   const handleOpenFilterDrawer = () => setIsFilterDrawerVisible(true);
   const handleCloseFilterDrawer = () => setIsFilterDrawerVisible(false);
@@ -143,8 +184,15 @@ function TableWithSearchAndFilter(_ref) {
     const updatedFilters = _objectSpread(_objectSpread({}, filterValues), {}, {
       [key]: normalizedValue
     });
+
+    // Update filter values
     setFilterValues(updatedFilters);
 
+    // Immediately update validation state to ensure button state is always correct
+    // This avoids React production optimization issues with dependency tracking
+    const isValid = validateRequiredFields(updatedFilters, requiredKeys);
+    setAreAllRequiredFieldsFilled(isValid);
+
     // Call onChange callback if provided for real-time filter changes
     if (onFilterChange) {
       onFilterChange(key, normalizedValue, updatedFilters, action);
@@ -158,73 +206,21 @@ function TableWithSearchAndFilter(_ref) {
   };
   const handleClearFilters = () => {
     setFilterValues({});
+    // Update validation state immediately
+    const isValid = validateRequiredFields({}, requiredKeys);
+    setAreAllRequiredFieldsFilled(isValid);
     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]);
+  // Initialize/update validation state when requiredKeys or filterConfig changes
+  // This handles cases where filterConfig prop changes externally
+  _react.default.useEffect(() => {
+    const isValid = validateRequiredFields(filterValues, requiredKeys);
+    setAreAllRequiredFieldsFilled(isValid);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [requiredKeys]);
 
   // Helper function to determine notFoundContent message
   const getNotFoundContent = (isApiCallInProgress, query) => {

package/package.json

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