@visns-studio/visns-components 5.6.0 → 5.6.2

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.2",
     "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/TableFilter.jsx

@@ -9,6 +9,7 @@ function TableFilter({
     type,
 }) {
     const [visibleChildren, setVisibleChildren] = useState(null);
+    const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
     const isFirstRender = useRef(true);
 
     useEffect(() => {
@@ -116,6 +117,9 @@ function TableFilter({
         if (collapsible && filtertype === 'parent') {
             setVisibleChildren(id);
         }
+
+        // Close mobile menu after selection on small screens
+        setMobileMenuOpen(false);
     };
 
     const renderContent = (d) => {
@@ -184,14 +188,40 @@ function TableFilter({
         }
     };
 
+    const toggleMobileMenu = () => {
+        setMobileMenuOpen(!mobileMenuOpen);
+    };
+
+    // Find active filter for mobile display
+    const activeFilter = filters.find((filter) => filter.show === true);
+    const activeLabel = activeFilter ? activeFilter.label : 'Select Option';
+
     return (
-        <ul className={styles.tableFilter}>
-            {filters.map((item, key) => (
-                <React.Fragment key={'table-filter-' + key}>
-                    {renderContent(item)}
-                </React.Fragment>
-            ))}
-        </ul>
+        <div className={styles.tableFilterContainer}>
+            <div className={styles.mobileToggle} onClick={toggleMobileMenu}>
+                <span className={styles.activeFilterLabel}>{activeLabel}</span>
+                <span
+                    className={`${styles.mobileMenuIcon} ${
+                        mobileMenuOpen ? styles.open : ''
+                    }`}
+                >
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                </span>
+            </div>
+            <ul
+                className={`${styles.tableFilter} ${
+                    mobileMenuOpen ? styles.mobileOpen : ''
+                }`}
+            >
+                {filters.map((item, key) => (
+                    <React.Fragment key={'table-filter-' + key}>
+                        {renderContent(item)}
+                    </React.Fragment>
+                ))}
+            </ul>
+        </div>
     );
 }
 

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;
+        }
+    }
 }

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

@@ -1,8 +1,15 @@
+.tableFilterContainer {
+    width: 100%;
+    position: relative;
+    display: block;
+}
+
 .tableFilter {
     list-style: none;
     padding: 0;
     margin: 0;
     font-size: 1rem;
+    width: 100%;
 }
 
 .collapsibleMenu {
@@ -51,3 +58,81 @@
     background: var(--item-color) !important;
     color: var(--paragraph-color) !important;
 }
+
+/* Mobile menu toggle button */
+.mobileToggle {
+    display: none;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 15px;
+    background: var(--primary-color, #0b3b2e);
+    color: white;
+    border-radius: 4px;
+    cursor: pointer;
+    margin-bottom: 10px;
+    border: none;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+}
+
+.activeFilterLabel {
+    font-weight: 600;
+    color: white;
+}
+
+.mobileMenuIcon {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    width: 20px;
+    height: 14px;
+    position: relative;
+    transition: all 0.3s ease;
+}
+
+.mobileMenuIcon span {
+    display: block;
+    height: 2px;
+    width: 100%;
+    background-color: white;
+    border-radius: 2px;
+    transition: all 0.3s ease;
+}
+
+.mobileMenuIcon.open span:nth-child(1) {
+    transform: translateY(6px) rotate(45deg);
+}
+
+.mobileMenuIcon.open span:nth-child(2) {
+    opacity: 0;
+}
+
+.mobileMenuIcon.open span:nth-child(3) {
+    transform: translateY(-6px) rotate(-45deg);
+}
+
+/* Media queries for responsive design */
+@media (max-width: 1024px) {
+    .mobileToggle {
+        display: flex;
+    }
+
+    .tableFilter {
+        display: none;
+        max-height: 0;
+        overflow: hidden;
+        transition: max-height 0.3s ease;
+    }
+
+    .tableFilter.mobileOpen {
+        display: block;
+        max-height: 1000px;
+        overflow-y: auto;
+        border: 1px solid rgba(0, 0, 0, 0.1);
+        border-radius: 4px;
+        margin-bottom: 10px;
+    }
+
+    .link {
+        padding: 12px 20px; /* Larger touch targets for mobile */
+    }
+}