ywana-core8 0.1.82 → 0.1.84

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.1.82",
+  "version": "0.1.84",
   "description": "ywana-core8",
   "homepage": "https://ywana.github.io/workspace",
   "author": "Ernesto Roldan Garcia",

package/src/html/list.js

@@ -125,8 +125,8 @@ export const List = (props) => {
         if (onSort) onSort(newConfig)
     }, [sortable, sortConfig, onSort])
 
-    // Search component
-    const SearchComponent = () => (
+    // Search component JSX - memoized to prevent focus loss
+    const searchComponent = useMemo(() => (
         searchable && (
             <div className="list__search">
                 <TextField
@@ -140,7 +140,7 @@ export const List = (props) => {
                 />
             </div>
         )
-    )
+    ), [searchable, searchPlaceholder, searchTerm, handleSearch])
 
     // Generate CSS classes
     const cssClasses = [
@@ -178,12 +178,12 @@ export const List = (props) => {
     if (empty || sortedItems.length === 0) {
         return (
             <div className={cssClasses} style={style} {...ariaAttributes} {...restProps}>
-                {searchPosition === 'top' && <SearchComponent />}
+                {searchPosition === 'top' && searchComponent}
                 <div className="list__empty">
                     <Icon icon={emptyIcon} size="large" />
                     <Text>{emptyMessage}</Text>
                 </div>
-                {searchPosition === 'bottom' && <SearchComponent />}
+                {searchPosition === 'bottom' && searchComponent}
                 {children}
             </div>
         )
@@ -204,7 +204,7 @@ export const List = (props) => {
         />
     ) : (
         <div className={cssClasses} style={style} ref={listRef} {...ariaAttributes} {...restProps}>
-            {searchPosition === 'top' && <SearchComponent />}
+            {searchPosition === 'top' && searchComponent}
 
             {sortable && sortBy && (
                 <div className="list__sort">
@@ -241,7 +241,7 @@ export const List = (props) => {
                     />
                 ))}
             </ul>
-            {searchPosition === 'bottom' && <SearchComponent />}
+            {searchPosition === 'bottom' && searchComponent}
             {children}
         </div>
     )
@@ -301,8 +301,8 @@ const GroupedList = (props) => {
         })
     }, [])
 
-    // Search component for grouped list
-    const GroupedSearchComponent = () => (
+    // Search component for grouped list - memoized to prevent focus loss
+    const groupedSearchComponent = useMemo(() => (
         searchable && (
             <div className="list__search">
                 <TextField
@@ -316,11 +316,11 @@ const GroupedList = (props) => {
                 />
             </div>
         )
-    )
+    ), [searchable, searchPlaceholder, searchTerm, onSearch])
 
     return (
         <div className={`${cssClasses} grouped`} style={style} {...ariaAttributes} {...restProps}>
-            {searchPosition === 'top' && <GroupedSearchComponent />}
+            {searchPosition === 'top' && groupedSearchComponent}
 
             {groups.map(group => {
                 const isCollapsed = collapsedGroups.has(group.name)
@@ -377,7 +377,7 @@ const GroupedList = (props) => {
                     </Fragment>
                 )
             })}
-            {searchPosition === 'bottom' && <GroupedSearchComponent />}
+            {searchPosition === 'bottom' && groupedSearchComponent}
             {children}
         </div>
     )

package/src/html/textfield.css

@@ -41,13 +41,18 @@
 
 .textfield>.icon {
   position: absolute;
-  top: 1.5rem;
+  top: 50%;
   right: .2rem;
+  transform: translateY(-50%);
   color: rgba(150,150,150,1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .textfield-outlined.no-label > .icon {
-  top: .5rem;
+  top: 50%;
+  transform: translateY(-50%);
 }
 
 .textfield-date>.icon,
@@ -147,8 +152,12 @@ input:read-only ~ label,
 
 .dropdown>.icon {
   position: absolute;
-  top: 1.7rem;
+  top: 50%;
   right: .2rem;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .dropdown>.decorator {
@@ -161,9 +170,13 @@ input:read-only ~ label,
 .dropdown>.textfield>.icon,
 .dropdown>.textfield-outlined>.icon {
   position: absolute;
-  top: 1.7rem;
+  top: 50%;
   right: 2rem;
+  transform: translateY(-50%);
   color: rgba(150,150,150,1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .dropdown>menu {

package/src/html/tree.css

@@ -14,13 +14,16 @@
     align-items: center;
     font: 1rem;
     color: var(--text-color-light);
+    cursor: pointer;
+    width: 100%;
+    min-height: 2rem;
+    padding: 0.25rem 0;
 }
 
 .tree-item:hover {
-    cursor: pointer;
     background-color: var(--background-color);
     font-weight: 500;
-} 
+}
 
 .tree-item.final {
     margin-left: 1rem;
@@ -35,6 +38,7 @@
 
 .tree-item>i {
     padding-left: .3rem;
+    pointer-events: none;
 }
 
 .tree-item>.label {
@@ -43,10 +47,10 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
+    pointer-events: none;
 }
 
 .tree-item>.label.clickable:hover {
-    cursor: pointer;
     color: var(--accent-color);
 }
 
@@ -56,11 +60,13 @@
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    pointer-events: none;
 }
 
 .tree-item>.actions {
     padding: 0 .5rem;
     color: var(--text-color-lighter);
+    pointer-events: auto;
 }
 
 .tree-item>.actions .rmwc-icon {
@@ -95,14 +101,42 @@
     padding-left: 2rem;
 }
 
-/* Tree search */
-.tree__search {
-    padding: 1rem;
+/* Tree header */
+.tree__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.5rem;
     border-bottom: 1px solid var(--divider-color, #e0e0e0);
     background-color: var(--background-color-light, #fafafa);
+    gap: 0.5rem;
     margin-bottom: 0.5rem;
 }
 
+/* When only expand icon is present, align to right */
+.tree__header:has(.tree__expand-control):not(:has(.tree__search)) {
+    justify-content: flex-end;
+}
+
+/* Alternative for browsers that don't support :has() */
+.tree__header--expand-only {
+    justify-content: flex-end;
+}
+
+/* Tree search */
+.tree__search {
+    flex: 1;
+}
+
+/* Tree expand control */
+.tree__expand-control {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 2rem;
+    height: 2rem;
+}
+
 /* Tree controls */
 .tree__controls {
     display: flex;
@@ -203,6 +237,7 @@
     display: flex;
     align-items: center;
     margin-right: 0.5rem;
+    pointer-events: none;
 }
 
 /* TreeNode loading */
@@ -233,7 +268,7 @@
 
 /* TreeNode children */
 .tree-node__children {
-    margin-left: 1.5rem;
+    margin-left: .8rem;
     border-left: 1px solid var(--divider-color, #e0e0e0);
     padding-left: 0.5rem;
 }

package/src/html/tree.example.js

@@ -1,8 +1,8 @@
 import React, { useState } from 'react'
 import { Tree, TreeNode, TreeItem } from './tree'
 import { Button } from './button'
-import { Icon } from '
-import { ExampleLayout, ExampleSection, ExampleSubsection, CodeSnippet } from './ExampleLayout'./icon'
+import { Icon } from './icon'
+import { ExampleLayout, ExampleSection, ExampleSubsection, CodeSnippet } from './ExampleLayout'
 
 /**
  * Ejemplos de los componentes Tree mejorados manteniendo 100% compatibilidad
@@ -209,7 +209,7 @@ export const TreeExamples = () => {
                 }}>
                     <Tree>
                         <TreeNode id="root" label="Root Folder" icon="folder" open={true}>
-                            <TreeNode id="documents" label="Documents" icon="folder" open={false}>
+                            <TreeNode id="documents" label="Documents" icon="folder">
                                 <TreeItem id="doc1" label="Document 1.pdf" icon="picture_as_pdf" onSelect={handleSelect} selected={selectedItem === 'doc1'} />
                                 <TreeItem id="doc2" label="Document 2.docx" icon="description" onSelect={handleSelect} selected={selectedItem === 'doc2'} />
                             </TreeNode>
@@ -221,6 +221,27 @@ export const TreeExamples = () => {
                         </TreeNode>
                     </Tree>
                 </div>
+                <CodeSnippet
+                    language="jsx"
+                    code={`<Tree>
+    <TreeNode id="root" label="Root Folder" icon="folder" open={true}>
+        <TreeNode id="documents" label="Documents" icon="folder">
+            <TreeItem id="doc1" label="Document 1.pdf" icon="picture_as_pdf"
+                onSelect={handleSelect} selected={selectedItem === 'doc1'} />
+            <TreeItem id="doc2" label="Document 2.docx" icon="description"
+                onSelect={handleSelect} selected={selectedItem === 'doc2'} />
+        </TreeNode>
+        <TreeNode id="images" label="Images" icon="folder" open={true}>
+            <TreeItem id="img1" label="Photo 1.jpg" icon="image"
+                onSelect={handleSelect} selected={selectedItem === 'img1'} />
+            <TreeItem id="img2" label="Photo 2.png" icon="image"
+                onSelect={handleSelect} selected={selectedItem === 'img2'} />
+        </TreeNode>
+        <TreeItem id="readme" label="README.md" icon="description"
+            onSelect={handleSelect} selected={selectedItem === 'readme'} />
+    </TreeNode>
+</Tree>`}
+                />
             </section>
 
             {/* Tree con búsqueda */}
@@ -252,6 +273,24 @@ export const TreeExamples = () => {
                         </TreeNode>
                     </Tree>
                 </div>
+                <CodeSnippet
+                    language="jsx"
+                    code={`<Tree
+    searchable={true}
+    searchPlaceholder="Buscar archivos y carpetas..."
+    searchBy={['label']}
+    ariaLabel="Árbol de archivos con búsqueda"
+>
+    <TreeNode id="projects" label="Projects" icon="work" open={true}>
+        <TreeNode id="project1" label="Website Project" icon="web">
+            <TreeItem id="index" label="index.html" icon="code"
+                onSelect={handleSelect} selected={selectedItem === 'index'} />
+            <TreeItem id="styles" label="styles.css" icon="palette"
+                onSelect={handleSelect} selected={selectedItem === 'styles'} />
+        </TreeNode>
+    </TreeNode>
+</Tree>`}
+                />
             </section>
 
             {/* Tree con checkboxes y selección múltiple */}
@@ -300,6 +339,31 @@ export const TreeExamples = () => {
                         </TreeNode>
                     </Tree>
                 </div>
+                <CodeSnippet
+                    language="jsx"
+                    code={`<Tree
+    multiSelect={true}
+    onMultiSelect={handleMultiSelect}
+    ariaLabel="Árbol con selección múltiple"
+>
+    <TreeNode id="backup" label="Backup Files" icon="backup" open={true}>
+        <TreeItem
+            id="file1"
+            label="Config Backup"
+            icon="settings_backup_restore"
+            onSelect={handleSelect}
+            selected={selectedItems.includes('file1')}
+        />
+        <TreeItem
+            id="file2"
+            label="Database Backup"
+            icon="storage"
+            onSelect={handleSelect}
+            selected={selectedItems.includes('file2')}
+        />
+    </TreeNode>
+</Tree>`}
+                />
             </section>
 
             {/* Tree con badges y drag & drop */}
@@ -371,11 +435,90 @@ export const TreeExamples = () => {
                         </TreeNode>
                     </Tree>
                 </div>
+                <CodeSnippet
+                    language="jsx"
+                    code={`<Tree ariaLabel="Árbol con drag and drop">
+    <TreeNode
+        id="inbox"
+        label="Inbox"
+        icon="inbox"
+        open={true}
+        badge={5}
+        tooltip="5 unread messages"
+        draggable={true}
+        onDragStart={handleDragStart}
+        onDrop={handleDrop}
+    >
+        <TreeItem
+            id="msg1"
+            label="Important Message"
+            icon="priority_high"
+            badge="!"
+            tooltip="High priority message"
+            draggable={true}
+            onDragStart={handleDragStart}
+            onDrop={handleDrop}
+        />
+    </TreeNode>
+</Tree>`}
+                />
+            </section>
+
+            {/* Tree con búsqueda y control de expansión */}
+            <section style={{ marginBottom: '2rem' }}>
+                <h3>Tree con Búsqueda y Control de Expansión</h3>
+                <div style={{
+                    background: '#fff',
+                    border: '1px solid #ddd',
+                    borderRadius: '8px',
+                    overflow: 'hidden',
+                    maxHeight: '400px'
+                }}>
+                    <Tree
+                        searchable={true}
+                        searchPlaceholder="Buscar en la estructura..."
+                        searchBy={['label']}
+                        showExpandIcon={true}
+                        onExpandAll={() => console.log('Expand all')}
+                        onCollapseAll={() => console.log('Collapse all')}
+                        ariaLabel="Árbol con búsqueda y controles de expansión"
+                    >
+                        <TreeNode id="projects" label="Projects" icon="work" open={false}>
+                            <TreeNode id="web-project" label="Web Project" icon="web" open={false}>
+                                <TreeItem id="index-html" label="index.html" icon="code" onSelect={handleSelect} selected={selectedItem === 'index-html'} />
+                                <TreeItem id="styles-css" label="styles.css" icon="palette" onSelect={handleSelect} selected={selectedItem === 'styles-css'} />
+                                <TreeItem id="script-js" label="script.js" icon="javascript" onSelect={handleSelect} selected={selectedItem === 'script-js'} />
+                            </TreeNode>
+                            <TreeNode id="mobile-app" label="Mobile App" icon="phone_android" open={false}>
+                                <TreeItem id="main-dart" label="main.dart" icon="code" onSelect={handleSelect} selected={selectedItem === 'main-dart'} />
+                                <TreeItem id="pubspec" label="pubspec.yaml" icon="settings" onSelect={handleSelect} selected={selectedItem === 'pubspec'} />
+                            </TreeNode>
+                        </TreeNode>
+                    </Tree>
+                </div>
+                <CodeSnippet
+                    language="jsx"
+                    code={`<Tree
+    searchable={true}
+    searchPlaceholder="Buscar en la estructura..."
+    searchBy={['label']}
+    showExpandIcon={true}
+    onExpandAll={() => console.log('Expand all')}
+    onCollapseAll={() => console.log('Collapse all')}
+>
+    <TreeNode id="projects" label="Projects" icon="work">
+        <TreeNode id="web-project" label="Web Project" icon="web">
+            <TreeItem id="index-html" label="index.html" icon="code" />
+            <TreeItem id="styles-css" label="styles.css" icon="palette" />
+        </TreeNode>
+    </TreeNode>
+</Tree>`}
+                />
             </section>
 
             {/* Tree con controles de expansión */}
             <section style={{ marginBottom: '2rem' }}>
-                <h3>Tree con Controles de Expansión</h3>
+                <h3>Tree con Control de Expansión</h3>
                 <div style={{ 
                     background: '#fff', 
                     border: '1px solid #ddd',
@@ -383,9 +526,8 @@ export const TreeExamples = () => {
                     overflow: 'hidden',
                     maxHeight: '400px'
                 }}>
-                    <Tree 
-                        expandAll={true}
-                        collapseAll={true}
+                    <Tree
+                        showExpandIcon={true}
                         onExpandAll={() => console.log('Expand all')}
                         onCollapseAll={() => console.log('Collapse all')}
                         ariaLabel="Árbol con controles de expansión"
@@ -408,6 +550,26 @@ export const TreeExamples = () => {
                         </TreeNode>
                     </Tree>
                 </div>
+                <CodeSnippet
+                    language="jsx"
+                    code={`<Tree
+    showExpandIcon={true}
+    onExpandAll={() => console.log('Expand all')}
+    onCollapseAll={() => console.log('Collapse all')}
+    ariaLabel="Árbol con controles de expansión"
+>
+    <TreeNode id="company" label="Company Structure" icon="business">
+        <TreeNode id="engineering" label="Engineering" icon="engineering">
+            <TreeNode id="frontend" label="Frontend Team" icon="web">
+                <TreeItem id="dev1" label="John Doe - Senior Developer"
+                    icon="person" onSelect={handleSelect} />
+                <TreeItem id="dev2" label="Jane Smith - UI Designer"
+                    icon="design_services" onSelect={handleSelect} />
+            </TreeNode>
+        </TreeNode>
+    </TreeNode>
+</Tree>`}
+                />
             </section>
 
             {/* Estados especiales */}