ywana-core8 0.1.83 → 0.1.85

package/src/html/actions-cell.js

@@ -0,0 +1,260 @@
+import React, { useState, useRef, useEffect } from 'react'
+import PropTypes from 'prop-types'
+import { MenuIcon, MenuItem } from './menu'
+import './actions-cell.css'
+
+/**
+ * ActionsCell - Componente reutilizable para manejar acciones con overflow automático
+ * 
+ * Características:
+ * - Detecta automáticamente si las acciones exceden el ancho máximo
+ * - Convierte automáticamente a menú desplegable cuando es necesario
+ * - Extrae acciones de componentes React para crear elementos de menú
+ * - Reutilizable en tablas, headers, accordions, listas, etc.
+ */
+export const ActionsCell = ({
+    actions,
+    maxWidth = 200,
+    menuIcon = "more_horiz",
+    menuAlign = "left",
+    menuSize = "small",
+    className = "",
+    style = {},
+    gap = "4px",
+    ...restProps
+}) => {
+    const [isOverflowing, setIsOverflowing] = useState(false)
+    const [isReady, setIsReady] = useState(false)
+    const actionsRef = useRef(null)
+    const containerRef = useRef(null)
+
+    // Check if actions overflow the max width
+    useEffect(() => {
+        const checkOverflow = () => {
+            if (actions) {
+                try {
+                    // Create a temporary element to measure the actual width needed
+                    const tempDiv = document.createElement('div')
+                    tempDiv.style.cssText = `
+                        position: absolute;
+                        visibility: hidden;
+                        white-space: nowrap;
+                        display: flex;
+                        align-items: center;
+                        gap: ${gap};
+                        pointer-events: none;
+                        z-index: -1000;
+                        top: -1000px;
+                        left: -1000px;
+                    `
+
+                    // Create a wrapper to render the actions
+                    const actionsWrapper = document.createElement('div')
+                    actionsWrapper.style.cssText = `
+                        display: flex;
+                        align-items: center;
+                        gap: ${gap};
+                        flex-wrap: nowrap;
+                    `
+
+                    // We need to render the React element to measure it properly
+                    // For now, we'll use a heuristic based on the number of actions
+                    let estimatedWidth = 0
+
+                    if (actions.props && actions.props.children) {
+                        const children = Array.isArray(actions.props.children)
+                            ? actions.props.children
+                            : [actions.props.children]
+
+                        children.forEach((child) => {
+                            if (child && child.props) {
+                                // Estimate width based on button content
+                                const hasText = child.props.children && typeof child.props.children === 'string'
+                                const textLength = hasText ? child.props.children.length : 0
+
+                                if (hasText) {
+                                    // Button with text: ~8px per character + 32px for icon + padding
+                                    estimatedWidth += (textLength * 8) + 32 + 16
+                                } else {
+                                    // Icon-only button: ~32px + padding
+                                    estimatedWidth += 32 + 8
+                                }
+                            }
+                        })
+
+                        // Add gap between buttons
+                        const gapWidth = parseInt(gap) || 4
+                        estimatedWidth += (children.length - 1) * gapWidth
+                    } else {
+                        // Single action
+                        const hasText = actions.props && actions.props.children && typeof actions.props.children === 'string'
+                        const textLength = hasText ? actions.props.children.length : 0
+
+                        if (hasText) {
+                            estimatedWidth = (textLength * 8) + 32 + 16
+                        } else {
+                            estimatedWidth = 32 + 8
+                        }
+                    }
+
+                    // Check if it overflows the max width (with some padding for safety)
+                    const shouldOverflow = estimatedWidth > (maxWidth - 8) // 8px for container padding
+                    setIsOverflowing(shouldOverflow)
+                    setIsReady(true)
+                } catch (error) {
+                    console.warn('ActionsCell: Error measuring width', error)
+                    setIsOverflowing(false)
+                    setIsReady(true)
+                }
+            } else {
+                setIsReady(true)
+            }
+        }
+
+        // Use a small delay to ensure DOM is ready
+        const timer = setTimeout(checkOverflow, 10)
+        return () => clearTimeout(timer)
+    }, [actions, maxWidth, gap])
+
+    // Extract action items from React elements for menu
+    const extractActionItems = (actionsElement) => {
+        if (!actionsElement) return []
+        
+        const items = []
+        
+        try {
+            // If it's a div with children (multiple actions)
+            if (actionsElement.props && actionsElement.props.children) {
+                const children = Array.isArray(actionsElement.props.children) 
+                    ? actionsElement.props.children 
+                    : [actionsElement.props.children]
+                
+                children.forEach((child, index) => {
+                    if (child && child.props) {
+                        const { icon, children: label, onClick, disabled, title } = child.props
+                        items.push({
+                            id: `action-${index}`,
+                            icon: icon,
+                            label: title || label || `Action ${index + 1}`,
+                            onSelect: onClick,
+                            disabled: disabled
+                        })
+                    }
+                })
+            } else if (actionsElement.props) {
+                // Single action
+                const { icon, children: label, onClick, disabled, title } = actionsElement.props
+                items.push({
+                    id: 'action-0',
+                    icon: icon,
+                    label: title || label || 'Action',
+                    onSelect: onClick,
+                    disabled: disabled
+                })
+            }
+        } catch (error) {
+            console.warn('ActionsCell: Error extracting action items', error)
+        }
+        
+        return items
+    }
+
+    if (!actions) return null
+
+    const containerClasses = [
+        'actions-cell',
+        className
+    ].filter(Boolean).join(' ')
+
+    const containerStyles = {
+        maxWidth: `${maxWidth}px`,
+        width: isOverflowing ? 'auto' : 'fit-content',
+        ...style
+    }
+
+    return (
+        <div 
+            ref={containerRef}
+            className={containerClasses}
+            style={containerStyles}
+            {...restProps}
+        >
+            {!isReady ? (
+                // Loading state - show a minimal placeholder
+                <div className="actions-cell__loading" style={{ width: '48px', height: '32px' }} />
+            ) : !isOverflowing ? (
+                // Show actions normally
+                <div 
+                    ref={actionsRef}
+                    className="actions-cell__content"
+                    style={{ 
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: gap,
+                        flexWrap: 'nowrap'
+                    }}
+                >
+                    {actions}
+                </div>
+            ) : (
+                // Show menu when overflowing
+                <>
+                    {/* Hidden div for measurement */}
+                    <div 
+                        ref={actionsRef}
+                        style={{ 
+                            position: 'absolute',
+                            visibility: 'hidden',
+                            whiteSpace: 'nowrap',
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: gap,
+                            pointerEvents: 'none',
+                            zIndex: -1000
+                        }}
+                    >
+                        {actions}
+                    </div>
+                    
+                    {/* Menu icon */}
+                    <MenuIcon 
+                        icon={menuIcon} 
+                        size={menuSize} 
+                        align={menuAlign}
+                    >
+                        {extractActionItems(actions).map((item) => (
+                            <MenuItem
+                                key={item.id}
+                                icon={item.icon}
+                                label={item.label}
+                                onSelect={item.onSelect}
+                                disabled={item.disabled}
+                            />
+                        ))}
+                    </MenuIcon>
+                </>
+            )}
+        </div>
+    )
+}
+
+ActionsCell.propTypes = {
+    /** Acciones a mostrar (componentes React) */
+    actions: PropTypes.node,
+    /** Ancho máximo antes de convertirse en menú */
+    maxWidth: PropTypes.number,
+    /** Icono del menú desplegable */
+    menuIcon: PropTypes.string,
+    /** Alineación del menú (left: se abre hacia la izquierda, right: hacia la derecha, center: centrado) */
+    menuAlign: PropTypes.oneOf(['left', 'right', 'center']),
+    /** Tamaño del icono del menú */
+    menuSize: PropTypes.oneOf(['small', 'medium', 'large']),
+    /** Clase CSS adicional */
+    className: PropTypes.string,
+    /** Estilos adicionales */
+    style: PropTypes.object,
+    /** Espacio entre acciones */
+    gap: PropTypes.string
+}
+
+export default ActionsCell

package/src/html/checkbox.example.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
-import { CheckBox } from '
-import { ExampleLayout, ExampleSection, ExampleSubsection, CodeSnippet } from './ExampleLayout'./checkbox'
+import { CheckBox } from './checkbox'
+import { ExampleLayout, ExampleSection, ExampleSubsection, CodeSnippet } from './ExampleLayout'
 
 /**
  * Ejemplos de uso del componente CheckBox mejorado

package/src/html/chip.example.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
-import { Chip, Chips } from '
-import { ExampleLayout, ExampleSection, ExampleSubsection, CodeSnippet } from './ExampleLayout'./chip'
+import { Chip, Chips } from './chip'
+import { ExampleLayout, ExampleSection, ExampleSubsection, CodeSnippet } from './ExampleLayout'
 
 /**
  * Ejemplos de uso de los componentes Chip mejorados

package/src/html/color.example.js

@@ -1,8 +1,8 @@
 import React, { useState } from 'react'
 import { ColorField, ColorPicker, ColorUtils } from './color'
 import { Button } from './button'
-import { Text } from '
-import { ExampleLayout, ExampleSection, ExampleSubsection, CodeSnippet } from './ExampleLayout'./text'
+import { Text } from './text'
+import { ExampleLayout, ExampleSection, ExampleSubsection, CodeSnippet } from './ExampleLayout'
 
 /**
  * Ejemplos del componente Color mejorado manteniendo 100% compatibilidad

package/src/html/form.example.js

@@ -3,8 +3,8 @@ import { Form } from './form'
 import { TextField2 } from './textfield2'
 import { Button } from './button'
 import { RadioGroup } from './radio'
-import { Chips } from '
-import { ExampleLayout, ExampleSection, ExampleSubsection, CodeSnippet } from './ExampleLayout'./chip'
+import { Chips } from './chip'
+import { ExampleLayout, ExampleSection, ExampleSubsection, CodeSnippet } from './ExampleLayout'
 
 /**
  * Ejemplos de uso del componente Form mejorado

package/src/html/header2.example.js

@@ -1,8 +1,8 @@
 import React, { useState } from 'react'
 import { Header2 } from './header2'
 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 uso del componente Header2 mejorado

package/src/html/index.js

@@ -1,4 +1,5 @@
 export { Accordion } from './accordion'
+export { ActionsCell } from './actions-cell'
 export { Button, ActionButton } from './button'
 export { CheckBox } from './checkbox'
 export { Chips, Chip } from './chip'

package/src/html/menu.css

@@ -2,18 +2,20 @@
   position: relative;
 }
 
+/* Solución simple: z-index muy alto para que aparezca por encima de todo */
+
 .menu-icon > .overlay {
   position: fixed;
   top: 0px;
   left: 0px;
   width: 100vw;
   height: 100vh;
-  z-index: 5;
+  z-index: 9998;
   background-color: transparent;
 }
 
 .menu-icon > menu {
-  z-index: 6;
+  z-index: 9999;
   position: absolute;
   top: 3rem;
   left: 0px;
@@ -33,6 +35,11 @@
   right: 0px;
 }
 
+.menu-icon > menu.alignLeft {
+  left: 0px;
+  right: unset;
+}
+
 .menu-icon > menu ul {
   list-style: none;
   margin: 0;

package/src/html/menu.js

@@ -27,19 +27,31 @@ export const Menu = (props) => {
  */
 export const MenuIcon = (props) => {
 
-    const { icon = "more_vert", children, align, size="normal" } = props
+    const { icon = "more_vert", children, align = "left", size="normal" } = props
     const [open, setOpen] = useState(false)
 
     function toggle() {
         setOpen(!open)
     }
 
+    // Convertir valores de align a clases CSS
+    const getAlignClass = (alignment) => {
+        switch (alignment) {
+            case 'right':
+                return 'alignRight'
+            case 'left':
+                return 'alignLeft'
+            default:
+                return 'alignLeft' // Por defecto a la izquierda
+        }
+    }
+
     return (
         <MenuContext.Provider value={[open, setOpen]}>
             <div className="menu-icon">
                 <Icon icon={icon} size={size} clickable action={toggle} />
                 {open ? (
-                    <menu className={`${align}`}>
+                    <menu className={getAlignClass(align)}>
                         {children}
                     </menu>
                 ) : null}

package/src/html/progress.example.js

@@ -1,8 +1,8 @@
 import React, { useState, useEffect } from 'react'
 import { CircularProgress, LinearProgress, StepProgress, RadialProgress, MultiProgress } from './progress'
 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 espectaculares de los componentes Progress mejorados

package/src/html/property.example.js

@@ -1,8 +1,8 @@
 import React, { useState } from 'react'
 import { Property } from './property'
 import { Button } from './button'
-import { Text } from '
-import { ExampleLayout, ExampleSection, ExampleSubsection, CodeSnippet } from './ExampleLayout'./text'
+import { Text } from './text'
+import { ExampleLayout, ExampleSection, ExampleSubsection, CodeSnippet } from './ExampleLayout'
 
 /**
  * Ejemplos del componente Property mejorado manteniendo 100% compatibilidad

package/src/html/radio.example.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
-import { RadioButton, RadioGroup } from '
-import { ExampleLayout, ExampleSection, ExampleSubsection, CodeSnippet } from './ExampleLayout'./radio'
+import { RadioButton, RadioGroup } from './radio'
+import { ExampleLayout, ExampleSection, ExampleSubsection, CodeSnippet } from './ExampleLayout'
 
 /**
  * Ejemplos de uso de los componentes Radio mejorados

package/src/html/switch.example.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
-import { Switch, Switch2 } from '
-import { ExampleLayout, ExampleSection, ExampleSubsection, CodeSnippet } from './ExampleLayout'./switch'
+import { Switch, Switch2 } from './switch'
+import { ExampleLayout, ExampleSection, ExampleSubsection, CodeSnippet } from './ExampleLayout'
 
 /**
  * Ejemplos de uso de los componentes Switch mejorados

package/src/html/tab.example.js

@@ -1,8 +1,8 @@
 import React, { useState } from 'react'
 import { Tabs, Tab, Stack } from './tab'
 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 Tab mejorados manteniendo 100% compatibilidad

package/src/html/table.css

@@ -12,6 +12,7 @@
 
 .datatable8 table {
     width: 100%;
+    table-layout: auto;
 }
 
 .datatable8 thead  {
@@ -66,7 +67,26 @@
     white-space: nowrap;
     max-width: 10rem;
     color: var(--text-color-light);
-}   
+}
+
+/* Columna de acciones - ajuste automático al contenido */
+.datatable8 tbody td.actions {
+    max-width: none !important;
+    width: auto;
+    min-width: auto;
+    white-space: nowrap;
+    padding: 0 0.25rem;
+    text-align: right;
+    overflow: visible;
+    text-overflow: unset;
+}
+
+/* Header de columna de acciones */
+.datatable8 thead th.actions {
+    width: auto;
+    min-width: auto;
+    padding: 0 0.25rem;
+}
 
 .datatable8 tbody td.index {
     width: 3rem;
@@ -84,6 +104,16 @@
     border-color: var(--text-color-lighter) !important;
 }
 
+.datatable8 tbody td.actions>div {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 0.25rem;
+    overflow: visible;
+    min-width: max-content;
+}
+
 .datatable8 .string-viewer img {
     height: 5rem;
 }
@@ -91,4 +121,20 @@
 .datatable8 th.resizable-column {
     resize: horizontal;
     overflow: hidden;
+}
+
+/* Columna de info - ancho mínimo para el icono de expansión */
+.datatable8 thead th[style*="width: 3rem"] {
+    width: 3rem !important;
+    min-width: 3rem;
+    max-width: 3rem;
+    padding: 0 0.5rem;
+}
+
+.datatable8 tbody td:last-child {
+    width: 3rem;
+    min-width: 3rem;
+    max-width: 3rem;
+    padding: 0 0.5rem;
+    text-align: center;
 }