mithril-materialized 2.0.0-beta.11 → 2.0.0-beta.12

package/dist/index.umd.js

@@ -840,6 +840,18 @@
             'M18.3 5.71a1 1 0 0 0-1.41 0L12 10.59 7.11 5.7A1 1 0 0 0 5.7 7.11L10.59 12l-4.89 4.89a1 1 0 1 0 1.41 1.41L12 13.41l4.89 4.89a1 1 0 0 0 1.41-1.41L13.41 12l4.89-4.89a1 1 0 0 0 0-1.4z',
             'M0 0h24v24H0z',
         ],
+        chevron: [
+            'M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z', // chevron down
+            'M0 0h24v24H0z', // background
+        ],
+        expand: [
+            'M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z', // plus
+            'M0 0h24v24H0z', // background
+        ],
+        collapse: [
+            'M19 13H5v-2h14v2z', // minus
+            'M0 0h24v24H0z', // background
+        ],
     };
     const MaterialIcon = () => {
         return {
@@ -849,8 +861,8 @@
                 const rotationMap = {
                     down: 0,
                     up: 180,
-                    left: -90,
-                    right: 90,
+                    left: 90,
+                    right: -90,
                 };
                 const rotation = (_a = rotationMap[direction]) !== null && _a !== void 0 ? _a : 0;
                 const transform = rotation ? `rotate(${rotation}deg)` : undefined;
@@ -1159,7 +1171,7 @@
             const lang = language || 'lang-TypeScript';
             const label = lang.replace('lang-', '');
             const cb = code instanceof Array ? code.join('\n') : code;
-            const cn = [newRow ? 'clear' : '', lang, className].filter(Boolean).join(' ').trim();
+            const cn = [newRow ? 'clear' : '', lang, className].filter(Boolean).join(' ').trim() || undefined;
             return m(`pre.codeblock${newRow ? '.clear' : ''}`, attrs, [
                 m('div', m('label', label)),
                 m('code', Object.assign(Object.assign({}, params), { className: cn }), cb),
@@ -2212,7 +2224,7 @@
                 var _a;
                 const { className = 'col s12', dataError, dataSuccess, helperText, iconName, id = state.id, initialValue, placeholder, isMandatory, label, maxLength, newRow, oninput, onchange, onkeydown, onkeypress, onkeyup, style, validate } = attrs, params = __rest(attrs, ["className", "dataError", "dataSuccess", "helperText", "iconName", "id", "initialValue", "placeholder", "isMandatory", "label", "maxLength", "newRow", "oninput", "onchange", "onkeydown", "onkeypress", "onkeyup", "style", "validate"]);
                 // const attributes = toAttrs(params);
-                const cn = [newRow ? 'clear' : '', defaultClass, className].filter(Boolean).join(' ').trim();
+                const cn = [newRow ? 'clear' : '', defaultClass, className].filter(Boolean).join(' ').trim() || undefined;
                 const isActive = state.active || ((_a = state.inputElement) === null || _a === void 0 ? void 0 : _a.value) || placeholder || type === 'color' || type === 'range'
                     ? true
                     : false;
@@ -2488,7 +2500,7 @@
                         callback(checkedIds);
                     }
                     : undefined;
-                const cn = [newRow ? 'clear' : '', className].filter(Boolean).join(' ').trim();
+                const cn = [newRow ? 'clear' : '', className].filter(Boolean).join(' ').trim() || undefined;
                 const optionsContent = layout === 'horizontal'
                     ? m('div.grid-container', options.map((option) => m(InputCheckbox, {
                         disabled: disabled || option.disabled,
@@ -3533,7 +3545,7 @@
             view: ({ attrs }) => {
                 const { src, alt, width, height, caption, className, style } = attrs, otherAttrs = __rest(attrs, ["src", "alt", "width", "height", "caption", "className", "style"]);
                 return m('img.materialboxed', Object.assign(Object.assign({}, otherAttrs), { src, alt: alt || '', width,
-                    height, className: ['materialboxed', className].filter(Boolean).join(' '), style: Object.assign({ cursor: 'zoom-in', transition: 'opacity 200ms ease' }, style), onclick: (e) => {
+                    height, className: ['materialboxed', className].filter(Boolean).join(' ') || undefined, style: Object.assign({ cursor: 'zoom-in', transition: 'opacity 200ms ease' }, style), onclick: (e) => {
                         e.preventDefault();
                         openBox(e.target, attrs);
                     } }));
@@ -3615,7 +3627,7 @@
                     .filter(Boolean)
                     .join(' ')
                     .trim();
-                const overlayClasses = ['modal-overlay', state.isOpen ? 'active' : ''].filter(Boolean).join(' ').trim();
+                const overlayClasses = ['modal-overlay', state.isOpen ? 'active' : ''].filter(Boolean).join(' ').trim() || undefined;
                 return m('div', { className: 'modal-container' }, [
                     // Modal overlay
                     m('div', {
@@ -3640,23 +3652,25 @@
                         role: 'dialog',
                         'aria-labelledby': `${id}-title`,
                         'aria-describedby': description ? `${id}-desc` : undefined,
-                        style: Object.assign(Object.assign({ display: state.isOpen ? 'flex' : 'none', position: 'fixed' }, (bottomSheet ? {
-                            // Bottom sheet positioning
-                            top: 'auto',
-                            bottom: '0',
-                            left: '0',
-                            right: '0',
-                            transform: 'none',
-                            maxWidth: '100%',
-                            borderRadius: '8px 8px 0 0',
-                        } : {
-                            // Regular modal positioning
-                            top: '50%',
-                            left: '50%',
-                            transform: 'translate(-50%, -50%)',
-                            maxWidth: '75%',
-                            borderRadius: '4px',
-                        })), { backgroundColor: 'var(--mm-modal-background, #fff)', maxHeight: '85%', overflow: 'auto', zIndex: '1003', padding: '0', flexDirection: 'column', boxShadow: '0 24px 38px 3px rgba(0,0,0,0.14), 0 9px 46px 8px rgba(0,0,0,0.12), 0 11px 15px -7px rgba(0,0,0,0.20)' }),
+                        style: Object.assign(Object.assign({ display: state.isOpen ? 'flex' : 'none', position: 'fixed' }, (bottomSheet
+                            ? {
+                                // Bottom sheet positioning
+                                top: 'auto',
+                                bottom: '0',
+                                left: '0',
+                                right: '0',
+                                transform: 'none',
+                                maxWidth: '100%',
+                                borderRadius: '8px 8px 0 0',
+                            }
+                            : {
+                                // Regular modal positioning
+                                top: '50%',
+                                left: '50%',
+                                transform: 'translate(-50%, -50%)',
+                                maxWidth: '75%',
+                                borderRadius: '4px',
+                            })), { backgroundColor: 'var(--mm-modal-background, #fff)', maxHeight: '85%', overflow: 'auto', zIndex: '1003', padding: '0', flexDirection: 'column', boxShadow: '0 24px 38px 3px rgba(0,0,0,0.14), 0 9px 46px 8px rgba(0,0,0,0.12), 0 11px 15px -7px rgba(0,0,0,0.20)' }),
                         onclick: (e) => e.stopPropagation(), // Prevent backdrop click when clicking inside modal
                     }, [
                         // Close button
@@ -4694,7 +4708,7 @@
                         callback(propId);
                     }
                 };
-                const cn = [newRow ? 'clear' : '', className].filter(Boolean).join(' ').trim();
+                const cn = [newRow ? 'clear' : '', className].filter(Boolean).join(' ').trim() || undefined;
                 const optionsContent = layout === 'horizontal'
                     ? m('div.grid-container', options.map((r) => m(RadioButton, Object.assign(Object.assign({}, r), { onchange,
                         groupId, disabled: disabled || r.disabled, className: checkboxClass, checked: r.id === checkedId, inputId: `${componentId}-${r.id}` }))))
@@ -4967,7 +4981,7 @@
             view: ({ attrs }) => {
                 const id = attrs.id || state.id;
                 const { label, left, right, disabled, newRow, onchange, isMandatory, className = 'col s12' } = attrs, params = __rest(attrs, ["label", "left", "right", "disabled", "newRow", "onchange", "isMandatory", "className"]);
-                const cn = ['input-field', newRow ? 'clear' : '', className].filter(Boolean).join(' ').trim();
+                const cn = ['input-field', newRow ? 'clear' : '', className].filter(Boolean).join(' ').trim() || undefined;
                 return m('div', {
                     className: cn,
                     onclick: (e) => {
@@ -5118,7 +5132,7 @@
             },
             view: ({ attrs }) => {
                 const { tabWidth, tabs, className, style, swipeable = false } = attrs;
-                const cn = [tabWidth === 'fill' ? 'tabs-fixed-width' : '', className].filter(Boolean).join(' ').trim();
+                const cn = [tabWidth === 'fill' ? 'tabs-fixed-width' : '', className].filter(Boolean).join(' ').trim() || undefined;
                 const anchoredTabs = tabs.map(toAnchored());
                 const activeTab = setActiveTabId(anchoredTabs, attrs.selectedTabId);
                 updateIndicator();
@@ -6104,8 +6118,8 @@
             }
             // Check file type
             if (attrs.accept) {
-                const acceptedTypes = attrs.accept.split(',').map(type => type.trim());
-                const isAccepted = acceptedTypes.some(acceptedType => {
+                const acceptedTypes = attrs.accept.split(',').map((type) => type.trim());
+                const isAccepted = acceptedTypes.some((acceptedType) => {
                     if (acceptedType.startsWith('.')) {
                         // Extension check
                         return file.name.toLowerCase().endsWith(acceptedType.toLowerCase());
@@ -6165,11 +6179,11 @@
             }
             // Notify parent component
             if (attrs.onFilesSelected) {
-                attrs.onFilesSelected(state.files.filter(f => !f.uploadError));
+                attrs.onFilesSelected(state.files.filter((f) => !f.uploadError));
             }
         };
         const removeFile = (fileToRemove, attrs) => {
-            state.files = state.files.filter(file => file !== fileToRemove);
+            state.files = state.files.filter((file) => file !== fileToRemove);
             if (attrs.onFileRemoved) {
                 attrs.onFileRemoved(fileToRemove);
             }
@@ -6188,11 +6202,11 @@
                     id: uniqueId(),
                     files: [],
                     isDragOver: false,
-                    isUploading: false
+                    isUploading: false,
                 };
             },
             view: ({ attrs }) => {
-                const { accept, multiple = false, disabled = false, label = 'Choose files or drag them here', helperText, showPreview = true, className = '', error } = attrs;
+                const { accept, multiple = false, disabled = false, label = 'Choose files or drag them here', helperText, showPreview = true, className = '', error, } = attrs;
                 return m('.file-upload-container', { class: className }, [
                     // Upload area
                     m('.file-upload-area', {
@@ -6200,8 +6214,10 @@
                             state.isDragOver ? 'drag-over' : '',
                             disabled ? 'disabled' : '',
                             error ? 'error' : '',
-                            state.files.length > 0 ? 'has-files' : ''
-                        ].filter(Boolean).join(' '),
+                            state.files.length > 0 ? 'has-files' : '',
+                        ]
+                            .filter(Boolean)
+                            .join(' ') || undefined,
                         ondragover: (e) => {
                             if (disabled)
                                 return;
@@ -6232,7 +6248,7 @@
                                 return;
                             const input = document.getElementById(state.id);
                             input === null || input === void 0 ? void 0 : input.click();
-                        }
+                        },
                     }, [
                         m('input[type="file"]', {
                             id: state.id,
@@ -6245,57 +6261,55 @@
                                 if (target.files) {
                                     handleFiles(target.files, attrs);
                                 }
-                            }
+                            },
                         }),
                         m('.file-upload-content', [
                             m('i.material-icons.file-upload-icon', 'cloud_upload'),
                             m('p.file-upload-label', label),
                             helperText && m('p.file-upload-helper', helperText),
-                            accept && m('p.file-upload-types', `Accepted: ${accept}`)
-                        ])
+                            accept && m('p.file-upload-types', `Accepted: ${accept}`),
+                        ]),
                     ]),
                     // Error message
                     error && m('.file-upload-error', error),
                     // File list
-                    state.files.length > 0 && m('.file-upload-list', [
-                        m('h6', 'Selected Files:'),
-                        state.files.map(file => m('.file-upload-item', { key: file.name + file.size }, [
-                            // Preview thumbnail
-                            showPreview && file.preview && m('.file-preview', [
-                                m('img', { src: file.preview, alt: file.name })
-                            ]),
-                            // File info
-                            m('.file-info', [
-                                m('.file-name', file.name),
-                                m('.file-details', [
-                                    m('span.file-size', formatFileSize(file.size)),
-                                    file.type && m('span.file-type', file.type)
-                                ]),
-                                // Progress bar (if uploading)
-                                file.uploadProgress !== undefined && m('.file-progress', [
-                                    m('.progress', [
-                                        m('.determinate', {
-                                            style: { width: `${file.uploadProgress}%` }
-                                        })
-                                    ])
+                    state.files.length > 0 &&
+                        m('.file-upload-list', [
+                            m('h6', 'Selected Files:'),
+                            state.files.map((file) => m('.file-upload-item', { key: file.name + file.size }, [
+                                // Preview thumbnail
+                                showPreview && file.preview && m('.file-preview', [m('img', { src: file.preview, alt: file.name })]),
+                                // File info
+                                m('.file-info', [
+                                    m('.file-name', file.name),
+                                    m('.file-details', [
+                                        m('span.file-size', formatFileSize(file.size)),
+                                        file.type && m('span.file-type', file.type),
+                                    ]),
+                                    // Progress bar (if uploading)
+                                    file.uploadProgress !== undefined &&
+                                        m('.file-progress', [
+                                            m('.progress', [
+                                                m('.determinate', {
+                                                    style: { width: `${file.uploadProgress}%` },
+                                                }),
+                                            ]),
+                                        ]),
+                                    // Error message
+                                    file.uploadError && m('.file-error', file.uploadError),
                                 ]),
-                                // Error message
-                                file.uploadError && m('.file-error', file.uploadError)
-                            ]),
-                            // Remove button
-                            m('button.btn-flat.file-remove', {
-                                onclick: (e) => {
-                                    e.stopPropagation();
-                                    removeFile(file, attrs);
-                                },
-                                title: 'Remove file'
-                            }, [
-                                m('i.material-icons', 'close')
-                            ])
-                        ]))
-                    ])
+                                // Remove button
+                                m('button.btn-flat.file-remove', {
+                                    onclick: (e) => {
+                                        e.stopPropagation();
+                                        removeFile(file, attrs);
+                                    },
+                                    title: 'Remove file',
+                                }, [m('i.material-icons', 'close')]),
+                            ])),
+                        ]),
                 ]);
-            }
+            },
         };
     };
 
@@ -6325,7 +6339,7 @@
                 state = {
                     id: attrs.id || uniqueId(),
                     isOpen: attrs.isOpen || false,
-                    isAnimating: false
+                    isAnimating: false,
                 };
                 // Set up keyboard listener
                 if (typeof document !== 'undefined' && attrs.closeOnEscape !== false) {
@@ -6354,34 +6368,33 @@
                 }
             },
             view: ({ attrs, children }) => {
-                const { position = 'left', mode = 'overlay', width = 300, className = '', showBackdrop = true, animationDuration = 300, fixed = false } = attrs;
+                const { position = 'left', mode = 'overlay', width = 300, className = '', showBackdrop = true, animationDuration = 300, fixed = false, } = attrs;
                 const isOpen = state.isOpen;
                 return [
                     // Backdrop (using existing materialize class)
-                    showBackdrop && mode === 'overlay' && m('.sidenav-overlay', {
-                        style: {
-                            display: isOpen ? 'block' : 'none',
-                            opacity: isOpen ? '1' : '0'
-                        },
-                        onclick: () => handleBackdropClick(attrs)
-                    }),
+                    showBackdrop &&
+                        mode === 'overlay' &&
+                        m('.sidenav-overlay', {
+                            style: {
+                                display: isOpen ? 'block' : 'none',
+                                opacity: isOpen ? '1' : '0',
+                            },
+                            onclick: () => handleBackdropClick(attrs),
+                        }),
                     // Sidenav (using existing materialize structure)
                     m('ul.sidenav', {
                         id: state.id,
-                        class: [
-                            position === 'right' ? 'right-aligned' : '',
-                            fixed ? 'sidenav-fixed' : '',
-                            className
-                        ].filter(Boolean).join(' '),
+                        class: [position === 'right' ? 'right-aligned' : '', fixed ? 'sidenav-fixed' : '', className]
+                            .filter(Boolean)
+                            .join(' ') || undefined,
                         style: {
                             width: `${width}px`,
-                            transform: isOpen ? 'translateX(0)' :
-                                position === 'left' ? 'translateX(-105%)' : 'translateX(105%)',
-                            'transition-duration': `${animationDuration}ms`
-                        }
-                    }, children)
+                            transform: isOpen ? 'translateX(0)' : position === 'left' ? 'translateX(-105%)' : 'translateX(105%)',
+                            'transition-duration': `${animationDuration}ms`,
+                        },
+                    }, children),
                 ];
-            }
+            },
         };
     };
     /**
@@ -6391,37 +6404,30 @@
     const SidenavItem = () => {
         return {
             view: ({ attrs, children }) => {
-                const { text, icon, active = false, disabled = false, onclick, href, className = '', divider = false, subheader = false } = attrs;
+                const { text, icon, active = false, disabled = false, onclick, href, className = '', divider = false, subheader = false, } = attrs;
                 if (divider) {
                     return m('li.divider');
                 }
                 if (subheader) {
                     return m('li.subheader', text || children);
                 }
-                const itemClasses = [
-                    active ? 'active' : '',
-                    disabled ? 'disabled' : '',
-                    className
-                ].filter(Boolean).join(' ');
-                const content = [
-                    icon && m('i.material-icons', icon),
-                    text || children
-                ];
+                const itemClasses = [active ? 'active' : '', disabled ? 'disabled' : '', className].filter(Boolean).join(' ') || undefined;
+                const content = [icon && m('i.material-icons', icon), text || children];
                 if (href && !disabled) {
                     return m('li', { class: itemClasses }, [
                         m('a', {
                             href,
-                            onclick: disabled ? undefined : onclick
-                        }, content)
+                            onclick: disabled ? undefined : onclick,
+                        }, content),
                     ]);
                 }
                 return m('li', { class: itemClasses }, [
                     m('a', {
                         onclick: disabled ? undefined : onclick,
-                        href: '#!'
-                    }, content)
+                        href: '#!',
+                    }, content),
                 ]);
-            }
+            },
         };
     };
     /**
@@ -6472,7 +6478,7 @@
     const Breadcrumb = () => {
         return {
             view: ({ attrs }) => {
-                const { items = [], separator = 'chevron_right', className = '', showIcons = false, maxItems, showHome = false } = attrs;
+                const { items = [], separator = 'chevron_right', className = '', showIcons = false, maxItems, showHome = false, } = attrs;
                 if (items.length === 0) {
                     return null;
                 }
@@ -6481,52 +6487,46 @@
                 if (maxItems && items.length > maxItems) {
                     const firstItem = items[0];
                     const lastItems = items.slice(-(maxItems - 2));
-                    displayItems = [
-                        firstItem,
-                        { text: '...', disabled: true, className: 'breadcrumb-ellipsis' },
-                        ...lastItems
-                    ];
+                    displayItems = [firstItem, { text: '...', disabled: true, className: 'breadcrumb-ellipsis' }, ...lastItems];
                 }
                 return m('nav.breadcrumb', { class: className }, [
-                    m('ol.breadcrumb-list', displayItems.map((item, index) => {
+                    m('ol.breadcrumb-list', displayItems
+                        .map((item, index) => {
                         const isLast = index === displayItems.length - 1;
                         const isFirst = index === 0;
                         return [
                             // Breadcrumb item
                             m('li.breadcrumb-item', {
-                                class: [
-                                    item.active || isLast ? 'active' : '',
-                                    item.disabled ? 'disabled' : '',
-                                    item.className || ''
-                                ].filter(Boolean).join(' ')
+                                class: [item.active || isLast ? 'active' : '', item.disabled ? 'disabled' : '', item.className || '']
+                                    .filter(Boolean)
+                                    .join(' ') || undefined,
                             }, [
-                                item.href && !item.disabled && !isLast ?
-                                    // Link item
-                                    m('a.breadcrumb-link', {
-                                        href: item.href,
-                                        onclick: item.onclick
-                                    }, [
-                                        (showIcons && item.icon) && m('i.material-icons.breadcrumb-icon', item.icon),
-                                        (showHome && isFirst && !item.icon) && m('i.material-icons.breadcrumb-icon', 'home'),
-                                        m('span.breadcrumb-text', item.text)
-                                    ]) :
-                                    // Text item (active or disabled)
-                                    m('span.breadcrumb-text', {
-                                        onclick: item.disabled ? undefined : item.onclick
-                                    }, [
-                                        (showIcons && item.icon) && m('i.material-icons.breadcrumb-icon', item.icon),
-                                        (showHome && isFirst && !item.icon) && m('i.material-icons.breadcrumb-icon', 'home'),
-                                        item.text
-                                    ])
+                                item.href && !item.disabled && !isLast
+                                    ? // Link item
+                                        m('a.breadcrumb-link', {
+                                            href: item.href,
+                                            onclick: item.onclick,
+                                        }, [
+                                            showIcons && item.icon && m('i.material-icons.breadcrumb-icon', item.icon),
+                                            showHome && isFirst && !item.icon && m('i.material-icons.breadcrumb-icon', 'home'),
+                                            m('span.breadcrumb-text', item.text),
+                                        ])
+                                    : // Text item (active or disabled)
+                                        m('span.breadcrumb-text', {
+                                            onclick: item.disabled ? undefined : item.onclick,
+                                        }, [
+                                            showIcons && item.icon && m('i.material-icons.breadcrumb-icon', item.icon),
+                                            showHome && isFirst && !item.icon && m('i.material-icons.breadcrumb-icon', 'home'),
+                                            item.text,
+                                        ]),
                             ]),
                             // Separator (except for last item)
-                            !isLast && m('li.breadcrumb-separator', [
-                                m('i.material-icons', separator)
-                            ])
+                            !isLast && m('li.breadcrumb-separator', [m('i.material-icons', separator)]),
                         ];
-                    }).reduce((acc, val) => acc.concat(val), []))
+                    })
+                        .reduce((acc, val) => acc.concat(val), [])),
                 ]);
-            }
+            },
         };
     };
     /**
@@ -6539,7 +6539,7 @@
         items.push({
             text: 'Home',
             href: basePath,
-            icon: 'home'
+            icon: 'home',
         });
         // Add path segments
         let currentPath = basePath;
@@ -6549,7 +6549,7 @@
             items.push({
                 text: segment.charAt(0).toUpperCase() + segment.slice(1).replace(/-/g, ' '),
                 href: isLast ? undefined : currentPath,
-                active: isLast
+                active: isLast,
             });
         });
         return items;
@@ -6568,19 +6568,18 @@
             items.push({
                 text: 'Home',
                 href: '/',
-                icon: 'home'
+                icon: 'home',
             });
             let currentPath = '';
             segments.forEach((segment, index) => {
                 currentPath += '/' + segment;
                 const isLast = index === segments.length - 1;
                 // Use custom text from config or format segment
-                const text = routeConfig[currentPath] ||
-                    segment.charAt(0).toUpperCase() + segment.slice(1).replace(/-/g, ' ');
+                const text = routeConfig[currentPath] || segment.charAt(0).toUpperCase() + segment.slice(1).replace(/-/g, ' ');
                 items.push({
                     text,
                     href: isLast ? undefined : currentPath,
-                    active: isLast
+                    active: isLast,
                 });
             });
             return items;
@@ -6592,7 +6591,7 @@
             return hierarchy.map((item, index) => ({
                 text: item[textKey],
                 href: index === hierarchy.length - 1 ? undefined : item[pathKey],
-                active: index === hierarchy.length - 1
+                active: index === hierarchy.length - 1,
             }));
         }
     }
@@ -6726,7 +6725,7 @@
                                     hasError ? 'error' : '',
                                     step.disabled ? 'disabled' : '',
                                     step.optional ? 'optional' : ''
-                                ].filter(Boolean).join(' '),
+                                ].filter(Boolean).join(' ') || undefined,
                                 onclick: allowHeaderNavigation && !step.disabled ?
                                     () => goToStep(index, attrs) : undefined
                             }, [
@@ -6800,6 +6799,292 @@
         };
     };
 
+    // Utility function to check if a node is the last in its branch
+    const isNodeLastInBranch = (nodePath, rootNodes) => {
+        // Navigate to the node's position and check if it's the last child at every level
+        let currentNodes = rootNodes;
+        for (let i = 0; i < nodePath.length; i++) {
+            const index = nodePath[i];
+            const isLastAtThisLevel = index === currentNodes.length - 1;
+            // If this is not the last child at this level, then this node is not last in branch
+            if (!isLastAtThisLevel) {
+                return false;
+            }
+            // Move to the next level if it exists
+            if (i < nodePath.length - 1) {
+                const currentNode = currentNodes[index];
+                if (currentNode.children) {
+                    currentNodes = currentNode.children;
+                }
+            }
+        }
+        return true;
+    };
+    const TreeNodeComponent = () => {
+        return {
+            view: ({ attrs }) => {
+                const { node, level, isSelected, isExpanded, isFocused, showConnectors, iconType, selectionMode, onToggleExpand, onToggleSelect, onFocus, } = attrs;
+                const hasChildren = node.children && node.children.length > 0;
+                const indentLevel = level * 24; // 24px per level
+                return m('li.tree-node', {
+                    class: [
+                        isSelected && 'selected',
+                        isFocused && 'focused',
+                        node.disabled && 'disabled',
+                        hasChildren && 'has-children',
+                        attrs.isLastInBranch && 'tree-last-in-branch',
+                    ]
+                        .filter(Boolean)
+                        .join(' ') || undefined,
+                    'data-node-id': node.id,
+                    'data-level': level,
+                }, [
+                    // Node content
+                    m('.tree-node-content', {
+                        style: {
+                            paddingLeft: `${indentLevel}px`,
+                        },
+                        onclick: node.disabled
+                            ? undefined
+                            : () => {
+                                if (selectionMode !== 'none') {
+                                    onToggleSelect(node.id);
+                                }
+                                onFocus(node.id);
+                            },
+                        onkeydown: (e) => {
+                            if (e.key === 'Enter' || e.key === ' ') {
+                                e.preventDefault();
+                                if (!node.disabled && selectionMode !== 'none') {
+                                    onToggleSelect(node.id);
+                                }
+                            }
+                        },
+                        tabindex: node.disabled ? -1 : 0,
+                        role: selectionMode === 'multiple' ? 'option' : 'treeitem',
+                        'aria-selected': selectionMode !== 'none' ? isSelected.toString() : undefined,
+                        'aria-expanded': hasChildren ? isExpanded.toString() : undefined,
+                        'aria-disabled': node.disabled ? 'true' : undefined,
+                    }, [
+                        // Connector lines
+                        showConnectors &&
+                            level > 0 &&
+                            m('.tree-connectors', Array.from({ length: level }, (_, i) => m('.tree-connector', {
+                                key: i,
+                                style: { left: `${i * 24 + 12}px` },
+                            }))),
+                        // Expand/collapse icon or spacer
+                        hasChildren
+                            ? m('.tree-expand-icon', {
+                                onclick: (e) => {
+                                    e.stopPropagation();
+                                    if (!node.disabled) {
+                                        onToggleExpand(node.id);
+                                    }
+                                },
+                                class: iconType,
+                            }, [
+                                iconType === 'plus-minus'
+                                    ? m('span.tree-plus-minus', isExpanded ? '−' : '+')
+                                    : iconType === 'triangle'
+                                        ? m('span.tree-triangle', { class: isExpanded ? 'expanded' : undefined }, '▶')
+                                        : iconType === 'chevron'
+                                            ? m(MaterialIcon, {
+                                                name: 'chevron',
+                                                direction: isExpanded ? 'down' : 'right',
+                                                class: 'tree-chevron-icon',
+                                            })
+                                            : m(MaterialIcon, {
+                                                name: 'caret',
+                                                direction: isExpanded ? 'down' : 'right',
+                                                class: 'tree-caret-icon',
+                                            }),
+                            ])
+                            : m('.tree-expand-spacer'), // Spacer for alignment
+                        // Selection indicator for multiple selection
+                        selectionMode === 'multiple' &&
+                            m('.tree-selection-indicator', [
+                                m('input[type=checkbox]', {
+                                    checked: isSelected,
+                                    disabled: node.disabled,
+                                    onchange: () => {
+                                        if (!node.disabled) {
+                                            onToggleSelect(node.id);
+                                        }
+                                    },
+                                    onclick: (e) => e.stopPropagation(),
+                                }),
+                            ]),
+                        // Node icon (optional)
+                        node.icon && m('i.tree-node-icon.material-icons', node.icon),
+                        // Node label
+                        m('span.tree-node-label', node.label),
+                    ]),
+                    // Children (recursive)
+                    hasChildren &&
+                        isExpanded &&
+                        m('ul.tree-children', {
+                            role: 'group',
+                            'aria-expanded': 'true',
+                        }, node.children.map((child, childIndex) => {
+                            var _a, _b, _c, _d, _e, _f;
+                            // Calculate state for each child using treeState
+                            const childIsSelected = (_b = (_a = attrs.treeState) === null || _a === void 0 ? void 0 : _a.selectedIds.has(child.id)) !== null && _b !== void 0 ? _b : false;
+                            const childIsExpanded = (_d = (_c = attrs.treeState) === null || _c === void 0 ? void 0 : _c.expandedIds.has(child.id)) !== null && _d !== void 0 ? _d : false;
+                            const childIsFocused = ((_e = attrs.treeState) === null || _e === void 0 ? void 0 : _e.focusedNodeId) === child.id;
+                            // Calculate if this child is last in branch
+                            const childPath = [...(attrs.currentPath || []), childIndex];
+                            const childIsLastInBranch = ((_f = attrs.treeAttrs) === null || _f === void 0 ? void 0 : _f.data) ?
+                                isNodeLastInBranch(childPath, attrs.treeAttrs.data) : false;
+                            return m(TreeNodeComponent, {
+                                key: child.id,
+                                node: child,
+                                level: level + 1,
+                                isSelected: childIsSelected,
+                                isExpanded: childIsExpanded,
+                                isFocused: childIsFocused,
+                                showConnectors,
+                                iconType,
+                                selectionMode,
+                                onToggleExpand,
+                                onToggleSelect,
+                                onFocus,
+                                isLastInBranch: childIsLastInBranch,
+                                currentPath: childPath,
+                                treeState: attrs.treeState,
+                                treeAttrs: attrs.treeAttrs,
+                            });
+                        })),
+                ]);
+            },
+        };
+    };
+    const TreeView = () => {
+        const state = {
+            selectedIds: new Set(),
+            expandedIds: new Set(),
+            focusedNodeId: null,
+            treeMap: new Map(),
+        };
+        const buildTreeMap = (nodes, map) => {
+            nodes.forEach((node) => {
+                map.set(node.id, node);
+                if (node.children) {
+                    buildTreeMap(node.children, map);
+                }
+            });
+        };
+        const initializeExpandedNodes = (nodes) => {
+            nodes.forEach((node) => {
+                if (node.expanded) {
+                    state.expandedIds.add(node.id);
+                }
+                if (node.children) {
+                    initializeExpandedNodes(node.children);
+                }
+            });
+        };
+        const handleToggleExpand = (nodeId, attrs) => {
+            var _a;
+            const isExpanded = state.expandedIds.has(nodeId);
+            if (isExpanded) {
+                state.expandedIds.delete(nodeId);
+            }
+            else {
+                state.expandedIds.add(nodeId);
+            }
+            (_a = attrs.onexpand) === null || _a === void 0 ? void 0 : _a.call(attrs, { nodeId, expanded: !isExpanded });
+        };
+        const handleToggleSelect = (nodeId, attrs) => {
+            var _a;
+            const { selectionMode = 'single' } = attrs;
+            if (selectionMode === 'single') {
+                state.selectedIds.clear();
+                state.selectedIds.add(nodeId);
+            }
+            else if (selectionMode === 'multiple') {
+                if (state.selectedIds.has(nodeId)) {
+                    state.selectedIds.delete(nodeId);
+                }
+                else {
+                    state.selectedIds.add(nodeId);
+                }
+            }
+            (_a = attrs.onselection) === null || _a === void 0 ? void 0 : _a.call(attrs, Array.from(state.selectedIds));
+        };
+        const handleFocus = (nodeId) => {
+            state.focusedNodeId = nodeId;
+        };
+        const renderNodes = (nodes, attrs, level = 0, parentPath = []) => {
+            return nodes.map((node, index) => {
+                var _a, _b, _c;
+                const isSelected = state.selectedIds.has(node.id);
+                const isExpanded = state.expandedIds.has(node.id);
+                const isFocused = state.focusedNodeId === node.id;
+                const currentPath = [...parentPath, index];
+                const isLastInBranch = isNodeLastInBranch(currentPath, attrs.data);
+                return m(TreeNodeComponent, {
+                    key: node.id,
+                    node,
+                    level,
+                    isSelected,
+                    isExpanded,
+                    isFocused,
+                    showConnectors: (_a = attrs.showConnectors) !== null && _a !== void 0 ? _a : true,
+                    iconType: (_b = attrs.iconType) !== null && _b !== void 0 ? _b : 'caret',
+                    selectionMode: (_c = attrs.selectionMode) !== null && _c !== void 0 ? _c : 'single',
+                    onToggleExpand: (nodeId) => handleToggleExpand(nodeId, attrs),
+                    onToggleSelect: (nodeId) => handleToggleSelect(nodeId, attrs),
+                    onFocus: handleFocus,
+                    isLastInBranch,
+                    currentPath,
+                    // Pass state and attrs for recursive rendering
+                    treeState: state,
+                    treeAttrs: attrs,
+                });
+            });
+        };
+        return {
+            oninit: ({ attrs }) => {
+                // Build internal tree map for efficient lookups
+                buildTreeMap(attrs.data, state.treeMap);
+                // Initialize expanded nodes from data
+                initializeExpandedNodes(attrs.data);
+                // Initialize selected nodes from props
+                if (attrs.selectedIds) {
+                    state.selectedIds = new Set(attrs.selectedIds);
+                }
+            },
+            onupdate: ({ attrs }) => {
+                // Sync selectedIds prop with internal state
+                if (attrs.selectedIds) {
+                    const newSelection = new Set(attrs.selectedIds);
+                    if (newSelection.size !== state.selectedIds.size ||
+                        !Array.from(newSelection).every((id) => state.selectedIds.has(id))) {
+                        state.selectedIds = newSelection;
+                    }
+                }
+            },
+            view: ({ attrs }) => {
+                const { data, className, style, id, selectionMode = 'single', showConnectors = true } = attrs;
+                return m('div.tree-view', {
+                    class: [
+                        className,
+                        showConnectors && 'show-connectors'
+                    ].filter(Boolean).join(' ') || undefined,
+                    style,
+                    id,
+                    role: selectionMode === 'multiple' ? 'listbox' : 'tree',
+                    'aria-multiselectable': selectionMode === 'multiple' ? 'true' : 'false',
+                }, [
+                    m('ul.tree-root', {
+                        role: 'group',
+                    }, renderNodes(data, attrs)),
+                ]);
+            },
+        };
+    };
+
     /**
      * @fileoverview Core TypeScript utility types for mithril-materialized library
      * These types improve type safety and developer experience across all components
@@ -6851,6 +7136,7 @@
     exports.ListItem = ListItem;
     exports.Mandatory = Mandatory;
     exports.MaterialBox = MaterialBox;
+    exports.MaterialIcon = MaterialIcon;
     exports.ModalPanel = ModalPanel;
     exports.NumberInput = NumberInput;
     exports.Options = Options;
@@ -6885,6 +7171,7 @@
     exports.ToastComponent = ToastComponent;
     exports.Tooltip = Tooltip;
     exports.TooltipComponent = TooltipComponent;
+    exports.TreeView = TreeView;
     exports.UrlInput = UrlInput;
     exports.Wizard = Wizard;
     exports.createBreadcrumb = createBreadcrumb;