@visns-studio/visns-components 5.6.0 → 5.6.1

package/package.json

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

package/src/components/crm/MultiSelect.jsx

@@ -5,6 +5,18 @@ import Select, { createFilter } from 'react-select';
 import CreatableSelect from 'react-select/creatable';
 import styles from './styles/MultiSelect.module.scss';
 
+// Helper function to detect if the device is a mobile/touch device
+const isTouchDevice = () => {
+    // Check if window is defined (to avoid SSR issues)
+    if (typeof window === 'undefined') return false;
+
+    return (
+        'ontouchstart' in window ||
+        (navigator && navigator.maxTouchPoints > 0) ||
+        (navigator && navigator.msMaxTouchPoints > 0)
+    );
+};
+
 function MultiSelect({
     className,
     inputValue = [], // Default to an empty array
@@ -20,6 +32,15 @@ function MultiSelect({
     const [selectOptions, setSelectOptions] = useState([]);
     const [selectValue, setSelectValue] = useState([]);
     const prevInputValueRef = useRef();
+    const [menuPlacement, setMenuPlacement] = useState('bottom');
+
+    // Detect if it's a touch device and set menu placement accordingly
+    // This helps prevent the dropdown from being hidden by the onscreen keyboard on mobile devices
+    useEffect(() => {
+        if (isTouchDevice()) {
+            setMenuPlacement('top'); // Open dropdown above the input on touch devices
+        }
+    }, []);
 
     useEffect(() => {
         const _options =
@@ -99,6 +120,24 @@ function MultiSelect({
 
     const SelectComponent = isCreatable ? CreatableSelect : Select;
 
+    // Handle menu opening to ensure it's visible on mobile
+    const handleMenuOpen = () => {
+        if (isTouchDevice()) {
+            // Give a small delay for the menu to render
+            setTimeout(() => {
+                const menuElement = document.querySelector(
+                    '.visns-select__menu'
+                );
+                if (menuElement) {
+                    menuElement.scrollIntoView({
+                        behavior: 'smooth',
+                        block: 'nearest',
+                    });
+                }
+            }, 50);
+        }
+    };
+
     return (
         <SelectComponent
             closeMenuOnSelect={!multi || settings.limit === 1}
@@ -109,6 +148,8 @@ function MultiSelect({
             components={{ SelectList }}
             options={selectOptions}
             menuPortalTarget={document.body}
+            menuPlacement={menuPlacement}
+            onMenuOpen={handleMenuOpen}
             onChange={(inputValue, action) => {
                 // Special handling for limit=1: keep only the most recent selection
                 if (
@@ -135,6 +176,10 @@ function MultiSelect({
                     ...provided,
                     zIndex: 99999,
                 }),
+                option: (base) => ({
+                    ...base,
+                    padding: isTouchDevice() ? '12px 15px' : base.padding, // Larger padding for touch devices
+                }),
                 menuPortal: (base) => ({
                     ...base,
                     zIndex: 99999,
@@ -144,7 +189,9 @@ function MultiSelect({
                     minHeight:
                         style && style.multi_select_height
                             ? style.multi_select_height
-                            : '50px',
+                            : isTouchDevice()
+                            ? '44px'
+                            : '50px', // Apple's recommended minimum touch target size
                     height: 'auto', // Allow height to grow with content
                 }),
                 valueContainer: (base) => ({

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

@@ -40,6 +40,17 @@
 
 .navwrap {
     flex: 1;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch; /* For smooth scrolling on iOS */
+
+    /* Hide scrollbar for most browsers but keep functionality */
+    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none; /* IE and Edge */
+
+    /* Hide scrollbar for Chrome/Safari/Opera */
+    &::-webkit-scrollbar {
+        display: none;
+    }
 }
 
 .app-nav {
@@ -51,6 +62,8 @@
     list-style: none;
     align-items: center;
     padding: 0;
+    width: max-content; /* Ensure it takes the width of all items */
+    min-width: 100%; /* Start at 100% width */
 
     .navDropdown {
         border-radius: var(--br);
@@ -64,6 +77,7 @@
         transition: all 0.15s cubic-bezier(0.25, 0.8, 0.25, 1);
         box-sizing: border-box;
         position: relative;
+        flex-shrink: 0; /* Prevent items from shrinking too much */
 
         a,
         span {
@@ -441,6 +455,15 @@
         .navwrap {
             width: 100%;
             position: relative;
+            overflow-y: auto; /* Enable vertical scrolling */
+            max-height: calc(100vh - 50px); /* Subtract the logo height */
+            scrollbar-width: none; /* Firefox */
+            -ms-overflow-style: none; /* IE and Edge */
+
+            /* Hide scrollbar for Chrome/Safari/Opera */
+            &::-webkit-scrollbar {
+                display: none;
+            }
 
             .app-nav {
                 width: 100%;
@@ -591,6 +614,15 @@
         flex-wrap: nowrap;
         justify-content: space-between;
         align-items: center;
+        overflow-x: auto; /* Allow horizontal scrolling if needed */
+        -webkit-overflow-scrolling: touch;
+        scrollbar-width: none; /* Firefox */
+        -ms-overflow-style: none; /* IE and Edge */
+
+        /* Hide scrollbar for Chrome/Safari/Opera */
+        &::-webkit-scrollbar {
+            display: none;
+        }
     }
 
     .content-title {
@@ -644,6 +676,17 @@
 }
 
 @media (max-width: 1024px) {
+    .hwrap {
+        grid-template-columns: auto 1fr auto;
+    }
+
+    .navwrap {
+        position: relative;
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
+        padding: 0;
+        /* No fade indicators - they don't work well with scrolling */
+    }
     .app-container {
         width: 100%;
         min-height: 100vh;
@@ -914,6 +957,19 @@
 }
 
 @media (max-width: 960px) {
+    .hwrap {
+        grid-template-columns: auto 1fr auto;
+        gap: 0.5rem;
+    }
+
+    .navwrap {
+        margin: 0;
+        padding: 0;
+    }
+
+    .app-nav {
+        gap: 0.25rem; /* Reduce gap between items on smaller screens */
+    }
     .userdetails {
         display: none;
         visibility: hidden;
@@ -953,6 +1009,13 @@
     flex-wrap: nowrap;
     align-content: center;
     width: 50%;
+    min-width: 150px; /* Ensure minimum width on small screens */
+    position: relative;
+
+    input {
+        min-width: 0; /* Allow input to shrink below its content size */
+        flex: 1; /* Take available space */
+    }
 
     button {
         width: max-content;
@@ -962,6 +1025,7 @@
         background: var(--primary-color);
         appearance: none;
         border-radius: var(--br);
+        flex-shrink: 0; /* Prevent button from shrinking */
 
         svg {
             display: block;
@@ -970,4 +1034,14 @@
             max-width: 20px;
         }
     }
+
+    @media (max-width: 768px) {
+        width: auto; /* Allow to take natural width */
+        flex: 1; /* Take available space */
+
+        button {
+            margin: 0 0.25rem;
+            padding: 0.15rem 0.35rem;
+        }
+    }
 }