@visns-studio/visns-components 5.7.12 → 5.7.13

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.13",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

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 */