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

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

@@ -8,8 +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.sort.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"));
@@ -135,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);
@@ -145,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);
@@ -160,78 +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 signature of required field values for reliable dependency tracking
-  const requiredFieldsSignature = (0, _react.useMemo)(() => {
-    if (requiredKeys.length === 0) return '';
-    return requiredKeys.map(key => {
-      const value = filterValues[key];
-      if (value === undefined || value === null) return "".concat(key, ":null");
-      if (value instanceof Date) return "".concat(key, ":").concat(value.getTime());
-      if (Array.isArray(value)) return "".concat(key, ":array[").concat(value.length, "]");
-      if (typeof value === 'object') return "".concat(key, ":obj[").concat(Object.keys(value).length, "]");
-      return "".concat(key, ":").concat(JSON.stringify(value));
-    }).sort().join('|');
-  }, [requiredKeys, filterValues]);
-
-  // Use useEffect to update validation state whenever filterValues or requiredKeys change
-  // Using signature ensures reliable updates in production builds where object reference comparison might fail
-  (0, _react.useEffect)(() => {
-    // If no required fields, button should be enabled
-    if (requiredKeys.length === 0) {
-      setAreAllRequiredFieldsFilled(true);
-      return;
-    }
-
-    // Check each required field has a valid value
-    const allFilled = requiredKeys.every(requiredKey => {
-      const value = filterValues[requiredKey];
-
-      // Check if value exists and is not empty/null/undefined
-      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;
-    });
-    setAreAllRequiredFieldsFilled(allFilled);
-  }, [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.444",
+  "version": "1.0.1-stage.445",
   "private": false,
   "description": "Reusable components",
   "main": "build/index.js",