@visns-studio/visns-components 5.0.19 → 5.0.20

package/package.json

@@ -4,10 +4,10 @@
         "@fontsource/barlow": "^5.1.0",
         "@inovua/reactdatagrid-community": "^5.10.2",
         "@inovua/reactdatagrid-enterprise": "^5.10.2",
-        "@nivo/bar": "^0.87.0",
-        "@nivo/core": "^0.87.0",
-        "@nivo/line": "^0.87.0",
-        "@nivo/pie": "^0.87.0",
+        "@nivo/bar": "^0.88.0",
+        "@nivo/core": "^0.88.0",
+        "@nivo/line": "^0.88.0",
+        "@nivo/pie": "^0.88.0",
         "@tinymce/tinymce-react": "^5.1.1",
         "@vitejs/plugin-react": "^4.3.3",
         "add": "^2.0.6",
@@ -40,7 +40,7 @@
         "react-quill": "^2.0.0",
         "react-reveal": "^1.2.2",
         "react-router-dom": "^6.27.0",
-        "react-select": "^5.8.1",
+        "react-select": "^5.9.0",
         "react-signature-pad-wrapper": "^4.0.4",
         "react-slugify": "^4.0.1",
         "react-sortable-hoc": "^2.0.0",
@@ -77,7 +77,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.0.19",
+    "version": "5.0.20",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/crm/MultiSelect.jsx

@@ -1,28 +1,16 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import CustomFetch from './Fetch';
-import Select, { createFilter, components } from 'react-select';
+import SelectList from './SelectList';
+import Select, { createFilter } from 'react-select';
 import CreatableSelect from 'react-select/creatable';
-import styles from './styles/AsyncSelect.module.scss';
-
-const CustomOption = (props) => (
-    <components.Option {...props}>
-        <div>
-            {props.data.label}
-            {props.data.description && props.data.description !== '' && (
-                <div style={{ fontSize: '0.85em', color: '#888' }}>
-                    {props.data.description}
-                </div>
-            )}
-        </div>
-    </components.Option>
-);
+import styles from './styles/MultiSelect.module.scss';
 
 function MultiSelect({
     className,
-    inputValue = [],
+    inputValue = [], // Default to an empty array
     multi,
     onChange,
-    options = [],
+    options = [], // Default to an empty array
     placeholder,
     settings,
     style,
@@ -31,49 +19,49 @@ function MultiSelect({
 }) {
     const [selectOptions, setSelectOptions] = useState([]);
     const [selectValue, setSelectValue] = useState([]);
+    const prevInputValueRef = useRef();
 
-    // Memoize transformed options
-    const memoizedOptions = useMemo(() => {
-        return options
-            .filter((a) => a?.label || a?.name || a?.description) // Filter out options with no label, name, or description
-            .map((a) => ({
-                value: a?.id,
-                label: a?.label || a?.name || a?.description || 'Unknown',
-                description: a?.description || '',
-                ...a,
-            }));
-    }, [options]);
-
-    // Memoize transformed input values
-    const memoizedInputValue = useMemo(() => {
-        const normalizeInputValue = (value) =>
-            Array.isArray(value) ? value : value ? [value] : [];
-
-        return normalizeInputValue(inputValue)
-            .filter((a) => a?.label || a?.name || a?.description) // Filter out values with no label, name, or description
-            .map((a) => ({
-                value: a?.id,
-                label: a?.label || a?.name || a?.description || 'Unknown',
-                description: a?.description || '',
-                ...a,
-            }));
-    }, [inputValue]);
-
-    // Set options when memoizedOptions changes
     useEffect(() => {
-        if (JSON.stringify(selectOptions) !== JSON.stringify(memoizedOptions)) {
-            setSelectOptions(memoizedOptions);
-        }
-    }, [memoizedOptions, selectOptions]);
+        const _options = Array.isArray(options)
+            ? options.map((a) => ({
+                  value: a.id,
+                  label: a.label || a.name || a.description || 'Unknown',
+                  ...a,
+              }))
+            : [];
+        setSelectOptions(_options);
+    }, [options]);
 
-    // Set value when memoizedInputValue changes
     useEffect(() => {
+        // Only update if `inputValue` content has changed
         if (
-            JSON.stringify(selectValue) !== JSON.stringify(memoizedInputValue)
+            JSON.stringify(prevInputValueRef.current) !==
+            JSON.stringify(inputValue)
         ) {
-            setSelectValue(memoizedInputValue);
+            const _values = Array.isArray(inputValue)
+                ? inputValue.map((a) => ({
+                      value: a.id,
+                      label: a.label || a.name || a.description || 'Unknown',
+                      ...a,
+                  }))
+                : inputValue && typeof inputValue === 'object'
+                ? [
+                      {
+                          value: inputValue.id,
+                          label:
+                              inputValue.label ||
+                              inputValue.name ||
+                              inputValue.description ||
+                              'Unknown',
+                          ...inputValue,
+                      },
+                  ]
+                : [];
+
+            setSelectValue(_values);
+            prevInputValueRef.current = inputValue;
         }
-    }, [memoizedInputValue, selectValue]);
+    }, [inputValue]);
 
     const handleCreate = async (inputValue) => {
         if (creatableConfig.url && creatableConfig.method) {
@@ -87,20 +75,11 @@ function MultiSelect({
                 const newOption = {
                     value: res.data.id,
                     label: res.data.label || inputValue,
-                    description: res.data.description || 'Newly created item',
                     ...res.data,
                 };
 
                 setSelectOptions((prevOptions) => [...prevOptions, newOption]);
-                setSelectValue((prevValues) =>
-                    multi ? [...prevValues, newOption] : [newOption]
-                );
-
-                onChange(
-                    multi ? [...selectValue, newOption] : newOption,
-                    { action: 'create-option' },
-                    settings.id
-                );
+                setSelectValue((prevValues) => [...prevValues, newOption]);
             }
         }
     };
@@ -114,7 +93,7 @@ function MultiSelect({
             isSearchable
             isMulti={multi}
             filterOption={createFilter({ ignoreAccents: false })}
-            components={{ Option: CustomOption }}
+            components={{ SelectList }}
             options={selectOptions}
             onChange={(inputValue, action) => {
                 onChange(inputValue, action, settings.id);
@@ -136,8 +115,8 @@ function MultiSelect({
                 }),
             }}
             value={selectValue}
-            onCreateOption={isCreatable ? handleCreate : undefined}
-            placeholder={placeholder || 'Select...'}
+            onCreateOption={handleCreate}
+            placeholder={placeholder ? placeholder : 'Select...'}
         />
     );
 }

package/src/components/crm/auth/styles/Profile.module.scss

@@ -38,7 +38,7 @@ select:not(:placeholder-shown) + .fi__span {
     position: relative;
     padding: 2px;
     margin: 8px 0;
-    box-shadow: 0 4px 0 rgba(var(--primary-color-rgb), 0.05);
+    box-shadow: 0 4px 0 rgba(var(--primary-rgb), 0.05);
 }
 
 .grid__subrow {
@@ -68,7 +68,7 @@ select:not(:placeholder-shown) + .fi__span {
     padding: 5px;
     margin: 8px 0;
     height: auto;
-    box-shadow: 0 4px 0 rgba(var(--primary-color-rgb), 0.05);
+    box-shadow: 0 4px 0 rgba(var(--primary-rgb), 0.05);
 }
 
 .grid__subnav > ul {
@@ -280,7 +280,7 @@ select:not(:placeholder-shown) + .fi__span {
     text-decoration: none;
     overflow: hidden;
     background: var(--primary-color);
-    border: 1px solid rgba(var(--primary-color-rgb), 1.1);
+    border: 1px solid rgba(var(--primary-rgb), 1.1);
     border-radius: var(--br);
     outline: none;
     transition: all 0.2s cubic-bezier(0.85, 0, 0.15, 1) 0s;
@@ -296,7 +296,6 @@ select:not(:placeholder-shown) + .fi__span {
     border-color: red !important;
 }
 
-
 .crmtitle {
     min-height: auto;
     padding: 1rem;
@@ -323,7 +322,7 @@ select:not(:placeholder-shown) + .fi__span {
         }
 
         svg {
-            color: rgba(var(--primary-color-rgb), 0.5);
+            color: rgba(var(--primary-rgb), 0.5);
             position: relative;
             top: 2px;
             margin: 0 0.25rem;
@@ -333,9 +332,9 @@ select:not(:placeholder-shown) + .fi__span {
     .titleInfo {
         width: max-content;
     }
-    
+
     .titleInfo span {
         font-size: 0.875em;
         color: rgba(var(--paragraph-color-rgb), 0.65);
     }
-}
+}