@visns-studio/visns-components 5.7.12 → 5.7.14

package/package.json

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

package/src/components/crm/DataGrid.jsx

@@ -515,66 +515,27 @@ const DataGrid = forwardRef(
                     (typeof param.selected === 'object' &&
                         Object.keys(param.selected).length > 0)
                 ) {
-                    // Show confirmation dialog for selection
-                    const selectedCount =
-                        param.selected === true ? param.data.length : 1;
-                    const itemText = selectedCount === 1 ? 'item' : 'items';
-
-                    confirmDialog({
-                        title: 'Selection Confirmation',
-                        message: `You have selected ${selectedCount} ${itemText}. Do you want to proceed with this selection?`,
-                        data:
-                            param.selected === true
-                                ? param.data
-                                : param.selected, // Pass the selected data
-                        buttons: [
-                            {
-                                label: 'Yes',
-                                onClick: () => {
-                                    // Process the selection as before
-                                    if (param.selected === true) {
-                                        const s = {};
-                                        param.data.forEach((obj) => {
-                                            s[obj.id] = obj;
-                                        });
-                                        setSelected(s);
-                                    } else if (
-                                        typeof param.selected === 'object'
-                                    ) {
-                                        const selectedKey = Object.keys(
-                                            param.selected
-                                        )[0];
-                                        const isSelectedAlready =
-                                            selected.hasOwnProperty(
-                                                selectedKey
-                                            );
-
-                                        if (isSelectedAlready) {
-                                            setSelected({});
-                                        } else {
-                                            setSelected((prevSelected) => ({
-                                                ...prevSelected,
-                                                [selectedKey]:
-                                                    param.selected[selectedKey],
-                                            }));
-                                        }
-                                    }
-
-                                    // Show a success message
-                                    toast.success(
-                                        `Selection of ${selectedCount} ${itemText} confirmed`
-                                    );
-                                },
-                            },
-                            {
-                                label: 'No',
-                                onClick: () => {
-                                    // Clear selection if user cancels
-                                    setSelected({});
-                                },
-                            },
-                        ],
-                    });
+                    // Process the selection directly without confirmation
+                    if (param.selected === true) {
+                        const s = {};
+                        param.data.forEach((obj) => {
+                            s[obj.id] = obj;
+                        });
+                        setSelected(s);
+                    } else if (typeof param.selected === 'object') {
+                        const selectedKey = Object.keys(param.selected)[0];
+                        const isSelectedAlready =
+                            selected.hasOwnProperty(selectedKey);
+
+                        if (isSelectedAlready) {
+                            setSelected({});
+                        } else {
+                            setSelected((prevSelected) => ({
+                                ...prevSelected,
+                                [selectedKey]: param.selected[selectedKey],
+                            }));
+                        }
+                    }
                 } else {
                     // Handle deselection directly without confirmation
                     setSelected(param.selected);

package/src/components/crm/MultiSelect.jsx

@@ -32,6 +32,21 @@ const CustomOption = (props) => {
     );
 };
 
+// Custom MultiValue component to display description for selected values
+const CustomMultiValue = (props) => {
+    const { children, data, ...rest } = props;
+    return (
+        <components.MultiValue {...rest}>
+            <div className={styles.multiValue}>
+                <div className={styles.multiValueLabel}>{children}</div>
+                {data.description && (
+                    <div className={styles.multiValueDescription}>{data.description}</div>
+                )}
+            </div>
+        </components.MultiValue>
+    );
+};
+
 function MultiSelect({
     className,
     inputValue = [], // Default to an empty array
@@ -91,14 +106,36 @@ function MultiSelect({
             JSON.stringify(prevInputValueRef.current) !==
             JSON.stringify(inputValue)
         ) {
+            // Find matching options to get descriptions if not present in inputValue
+            const findMatchingOption = (item) => {
+                if (item.description) return item;
+
+                // Try to find a matching option with description
+                const matchingOption = selectOptions.find(opt =>
+                    opt.id === item.id || opt.value === item.id
+                );
+
+                if (matchingOption && matchingOption.description) {
+                    return {
+                        ...item,
+                        description: matchingOption.description
+                    };
+                }
+
+                return item;
+            };
+
             const _values = Array.isArray(inputValue)
-                ? inputValue.map((a) => ({
-                      value: a.id,
-                      label: a.label || a.name || a.description || 'Unknown',
-                      // Make sure description is preserved
-                      description: a.description || null,
-                      ...a,
-                  }))
+                ? inputValue.map((a) => {
+                      const enrichedItem = findMatchingOption(a);
+                      return {
+                          value: enrichedItem.id,
+                          label: enrichedItem.label || enrichedItem.name || enrichedItem.description || 'Unknown',
+                          // Make sure description is preserved
+                          description: enrichedItem.description || null,
+                          ...enrichedItem,
+                      };
+                  })
                 : inputValue && typeof inputValue === 'object'
                 ? [
                       {
@@ -114,10 +151,11 @@ function MultiSelect({
                       },
                   ]
                 : [];
+
             setSelectValue(_values);
             prevInputValueRef.current = inputValue;
         }
-    }, [inputValue]);
+    }, [inputValue, selectOptions]);
 
     const handleCreate = async (inputValue) => {
         if (creatableConfig.url && creatableConfig.method) {
@@ -171,7 +209,8 @@ function MultiSelect({
             filterOption={createFilter({ ignoreAccents: false })}
             components={{
                 SelectList,
-                Option: CustomOption
+                Option: CustomOption,
+                MultiValue: CustomMultiValue
             }}
             options={selectOptions}
             menuPortalTarget={document.body}
@@ -259,6 +298,24 @@ function MultiSelect({
                 multiValue: (base) => ({
                     ...base,
                     margin: '2px',
+                    padding: '2px 4px',
+                    minHeight: '30px',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'flex-start',
+                }),
+                multiValueLabel: (base) => ({
+                    ...base,
+                    padding: '0',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    width: '100%',
+                }),
+                multiValueRemove: (base) => ({
+                    ...base,
+                    padding: '0 4px',
+                    alignSelf: 'flex-start',
+                    marginTop: '2px',
                 }),
             }}
             value={selectValue}

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

@@ -30,6 +30,28 @@
     margin-top: 2px;
 }
 
+.multiValue {
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+}
+
+.multiValueLabel {
+    font-size: 13px;
+    font-weight: 500;
+}
+
+.multiValueDescription {
+    font-size: 11px;
+    color: rgba(0, 0, 0, 0.7); /* Darker color for better contrast */
+    font-weight: 400;
+    line-height: 1.1;
+    background-color: rgba(255, 255, 255, 0.7); /* Semi-transparent white background */
+    padding: 1px 3px;
+    border-radius: 2px;
+    margin-top: 1px;
+}
+
 /* Global styles for react-select to ensure it works in modals */
 :global {
     .visns-select__menu-portal {
@@ -84,6 +106,24 @@
     /* Multi-value styles */
     .visns-select__multi-value {
         margin: 2px !important;
+        padding: 2px 4px !important;
+        min-height: 30px !important;
+        display: flex !important;
+        flex-direction: column !important;
+        align-items: flex-start !important;
+    }
+
+    .visns-select__multi-value__label {
+        padding: 0 !important;
+        display: flex !important;
+        flex-direction: column !important;
+        width: 100% !important;
+    }
+
+    .visns-select__multi-value__remove {
+        padding: 0 4px !important;
+        align-self: flex-start !important;
+        margin-top: 2px !important;
     }
 
     /* Fix for modals */