@visns-studio/visns-components 5.11.17 → 5.11.19

package/package.json

@@ -87,7 +87,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.11.17",
+    "version": "5.11.19",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/cms/DataGrid.jsx

@@ -294,15 +294,38 @@ const DataGrid = ({
 
     const onRowClick = useCallback(
         (rowProps, event) => {
+            // Safely get cell element and column index
             const cellElement = event.target.closest(
                 '.InovuaReactDataGrid__cell'
             );
+            
+            // Return early if we can't find the cell element
+            if (!cellElement || !cellElement.parentNode) {
+                // Fallback: open edit modal if available
+                const updateSetting = settings.find(setting => setting.id === 'update');
+                if (updateSetting && form.primaryKey && rowProps.data[form.primaryKey]) {
+                    modalOpen('update', rowProps.data[form.primaryKey]);
+                }
+                return;
+            }
+
             const columnIndex = Array.from(
                 cellElement.parentNode.children
             ).indexOf(cellElement);
 
+            // Return early if column index is invalid
+            if (columnIndex === -1 || !rowProps.columns[columnIndex]) {
+                // Fallback: open edit modal if available
+                const updateSetting = settings.find(setting => setting.id === 'update');
+                if (updateSetting && form.primaryKey && rowProps.data[form.primaryKey]) {
+                    modalOpen('update', rowProps.data[form.primaryKey]);
+                }
+                return;
+            }
+
             let proceed = true;
 
+            // Check if clicked column is a toggle type
             columns.forEach((a, b) => {
                 if (
                     a.id === rowProps.columns[columnIndex].id &&
@@ -313,6 +336,7 @@ const DataGrid = ({
             });
 
             if (proceed) {
+                // Check if column has navigation link
                 if (
                     rowProps.columns[columnIndex].link &&
                     rowProps.columns[columnIndex].link.url
@@ -339,10 +363,16 @@ const DataGrid = ({
                             }
                         );
                     }
+                } else {
+                    // Fallback: open edit modal if no navigation link is configured
+                    const updateSetting = settings.find(setting => setting.id === 'update');
+                    if (updateSetting && form.primaryKey && rowProps.data[form.primaryKey]) {
+                        modalOpen('update', rowProps.data[form.primaryKey]);
+                    }
                 }
             }
         },
-        [form]
+        [form, settings, modalOpen]
     );
 
     const onRenderRow = useCallback((rowProps) => {

package/src/components/crm/MultiSelect.jsx

@@ -39,7 +39,7 @@ const CustomMultiValue = (props) => {
     const { children, data, removeProps, settings, ...rest } = props;
     
     return (
-        <components.MultiValue {...rest}>
+        <components.MultiValue {...rest} data={data}>
             <div className={styles.multiValue}>
                 <div className={styles.multiValueLabel}>
                     {children}
@@ -62,38 +62,51 @@ const CustomMultiValue = (props) => {
     );
 };
 
-// Custom MultiValueRemove component with debug logging
+// Custom MultiValueRemove component with proper removal handling
 const CustomMultiValueRemove = (props) => {
-    const { innerProps, data } = props;
+    const handleRemove = (e) => {
+        e.stopPropagation();
+        
+        // Try to find the data by looking at the DOM structure
+        const removeButton = e.currentTarget;
+        const multiValueContainer = removeButton.closest('.visns-select__multi-value');
+        
+        if (multiValueContainer) {
+            // Get the index of this multi-value item
+            const allMultiValues = removeButton.closest('.visns-select__value-container').querySelectorAll('.visns-select__multi-value');
+            const index = Array.from(allMultiValues).indexOf(multiValueContainer);
+            
+            console.log('MultiSelect: Found index:', index);
+            
+            // Get current value and remove the item at this index
+            const currentValue = props.selectProps?.value || [];
+            console.log('MultiSelect: Current value:', currentValue);
+            
+            if (index >= 0 && index < currentValue.length) {
+                const itemToRemove = currentValue[index];
+                const newValue = currentValue.filter((_, i) => i !== index);
+                
+                console.log('MultiSelect: Removing item at index', index, ':', itemToRemove);
+                console.log('MultiSelect: New value:', newValue);
+                
+                // Call onChange with the filtered value and remove action
+                if (props.selectProps?.onChange) {
+                    props.selectProps.onChange(newValue, {
+                        action: 'remove-value',
+                        removedValue: itemToRemove
+                    });
+                }
+            }
+        }
+    };
     
     return (
         <components.MultiValueRemove 
-            {...props} 
+            {...props}
             innerProps={{
-                ...innerProps,
-                onClick: (e) => {
-                    console.log('MultiSelect: Remove button clicked for item:', data);
-                    console.log('MultiSelect: Event details:', e);
-                    
-                    // Prevent event bubbling
-                    e.stopPropagation();
-                    e.preventDefault();
-                    
-                    // Call the original handler
-                    if (innerProps && innerProps.onClick) {
-                        console.log('MultiSelect: Calling original onClick handler');
-                        innerProps.onClick(e);
-                    } else {
-                        console.log('MultiSelect: No original onClick handler found');
-                    }
-                },
-                onMouseDown: (e) => {
-                    console.log('MultiSelect: Remove button mouse down');
-                    e.stopPropagation();
-                    if (innerProps && innerProps.onMouseDown) {
-                        innerProps.onMouseDown(e);
-                    }
-                }
+                ...props.innerProps,
+                onClick: handleRemove,
+                onMouseDown: (e) => e.stopPropagation()
             }}
         />
     );

package/src/components/crm/styles/TableFilter.module.scss

@@ -195,7 +195,7 @@
 /* Media queries for responsive design */
 
 /* Tablet view (961px to 1024px) - Keep filter expanded in left container */
-@media (max-width: 1024px) and (min-width: 961px) {
+@media (max-width: 1024px) and (min-width: 760px) {
     /* Ensure filter remains visible and properly styled for tablets */
     .tableFilter {
         display: block;
@@ -224,7 +224,7 @@
 }
 
 /* Phone view (960px and below) - Use hamburger menu when navigation moves to top */
-@media (max-width: 960px) {
+@media (max-width: 759px) {
     .mobileToggle {
         display: flex;
     }