ywana-core8 0.1.75 → 0.1.76

package/src/html/chip.js

@@ -1,49 +1,345 @@
-import React from 'react'
+import React, { useState, useCallback, useEffect } from 'react'
+import PropTypes from 'prop-types'
 import { Icon } from './icon'
 import { Text } from './text'
-import { Tooltip} from './tooltip'
+import { Tooltip } from './tooltip'
 import './chip.css'
 
 /**
- * Chip
+ * Chip component with enhanced features and accessibility
  */
 export const Chip = (props) => {
+    const {
+        id,
+        icon,
+        label,
+        tooltip,
+        action,
+        outlined = false,
+        selected = false,
+        disabled = false,
+        deletable = false,
+        size = 'normal',
+        variant = 'default',
+        className,
+        ariaLabel,
+        onSelect,
+        onDelete,
+        onClick,
+        onKeyDown,
+        ...restProps
+    } = props
 
-    const { id, icon, label, tooltip, action, outlined, selected, onSelect, className } = props
+    // Validate required props
+    if (!label && !icon && !ariaLabel) {
+        console.warn('Chip component: label, icon, or ariaLabel prop is required for accessibility')
+    }
+
+    const handleSelect = useCallback((event) => {
+        if (!disabled) {
+            event.stopPropagation()
+            event.preventDefault()
+
+            if (onSelect) onSelect(id, !selected, event)
+            if (onClick) onClick(event)
+        }
+    }, [disabled, onSelect, onClick, id, selected])
+
+    const handleDelete = useCallback((event) => {
+        if (!disabled && deletable && onDelete) {
+            event.stopPropagation()
+            event.preventDefault()
+            onDelete(id, event)
+        }
+    }, [disabled, deletable, onDelete, id])
+
+    // Handle keyboard events for accessibility
+    const handleKeyDown = useCallback((event) => {
+        if (!disabled) {
+            if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault()
+                handleSelect(event)
+            } else if (event.key === 'Delete' || event.key === 'Backspace') {
+                if (deletable) {
+                    event.preventDefault()
+                    handleDelete(event)
+                }
+            }
+        }
+        if (onKeyDown) onKeyDown(event)
+    }, [disabled, handleSelect, handleDelete, deletable, onKeyDown])
 
-    function select(event) {
-        event.stopPropagation();
-        event.preventDefault();
-        if (onSelect) onSelect(id)
+    // Generate CSS classes
+    const style = outlined ? 'outlined' : 'normal'
+    const safeClassName = className || ''
+
+    const cssClasses = [
+        'chip',
+        style,
+        size,
+        variant,
+        selected && 'selected',
+        disabled && 'disabled',
+        deletable && 'deletable',
+        safeClassName
+    ].filter(Boolean).join(' ')
+
+    // Accessibility attributes
+    const ariaAttributes = {
+        role: onSelect ? 'button' : 'img',
+        'aria-label': ariaLabel || label || (icon ? `${icon} chip` : 'chip'),
+        'aria-pressed': onSelect ? selected : undefined,
+        'aria-disabled': disabled,
+        tabIndex: disabled ? -1 : 0
     }
 
-    let style = outlined ? "outlined" : "normal"
-    if (selected) style = `${style} selected`
+    // Icon size based on chip size
+    const iconSize = size === 'small' ? 'small' : size === 'large' ? 'normal' : 'small'
+
+    const chipContent = (
+        <div
+            className={cssClasses}
+            onClick={handleSelect}
+            onKeyDown={handleKeyDown}
+            {...ariaAttributes}
+            {...restProps}
+        >
+            {icon && (
+                <Icon
+                    icon={icon}
+                    size={iconSize}
+                    disabled={disabled}
+                    className="chip-icon"
+                />
+            )}
+            {label && (
+                <main className="chip-content">
+                    <Text>{label}</Text>
+                </main>
+            )}
+            {action && (
+                <span className="chip-action">
+                    {action}
+                </span>
+            )}
+            {deletable && (
+                <Icon
+                    icon="close"
+                    size="small"
+                    clickable={!disabled}
+                    disabled={disabled}
+                    action={handleDelete}
+                    className="chip-delete"
+                    ariaLabel="Delete chip"
+                />
+            )}
+        </div>
+    )
+
     return tooltip ? (
         <Tooltip {...tooltip}>
-            <div className={`chip ${className} ${style}`} onClick={select}>
-                {icon ? <Icon icon={icon} size="small" /> : null}
-                <main><Text>{label}</Text></main>
-                {action ? <span className="meta">{action}</span> : null}
-            </div>
+            {chipContent}
         </Tooltip>
-    ) : (
-        <div className={`chip ${className} ${style}`} onClick={select}>
-            {icon ? <Icon icon={icon} size="small" /> : null}
-            <main><Text>{label}</Text></main>
-            {action ? <span className="meta">{action}</span> : null}
-        </div>
-    )
+    ) : chipContent
 }
 
 /**
- * Chips
+ * Chips container component for managing multiple chips
  */
 export const Chips = (props) => {
-    const { children } = props
+    const {
+        children,
+        items = [],
+        selected = [],
+        disabled = false,
+        deletable = false,
+        multiSelect = false,
+        size = 'normal',
+        variant = 'default',
+        className,
+        onSelect,
+        onDelete,
+        onChange,
+        ...restProps
+    } = props
+
+    const [selectedItems, setSelectedItems] = useState(selected)
+
+    // Sync with external selected value
+    useEffect(() => {
+        setSelectedItems(selected)
+    }, [selected])
+
+    const handleChipSelect = useCallback((id, isSelected, event) => {
+        if (disabled) return
+
+        let newSelected
+        if (multiSelect) {
+            newSelected = isSelected
+                ? [...selectedItems, id]
+                : selectedItems.filter(item => item !== id)
+        } else {
+            newSelected = isSelected ? [id] : []
+        }
+
+        setSelectedItems(newSelected)
+
+        if (onSelect) onSelect(id, isSelected, event)
+        if (onChange) onChange(newSelected, event)
+    }, [disabled, multiSelect, selectedItems, onSelect, onChange])
+
+    const handleChipDelete = useCallback((id, event) => {
+        if (disabled) return
+
+        // Remove from selected items
+        const newSelected = selectedItems.filter(item => item !== id)
+        setSelectedItems(newSelected)
+
+        if (onDelete) onDelete(id, event)
+        if (onChange) onChange(newSelected, event)
+    }, [disabled, selectedItems, onDelete, onChange])
+
+    const safeClassName = className || ''
+    const cssClasses = [
+        'chips',
+        size,
+        disabled && 'disabled',
+        safeClassName
+    ].filter(Boolean).join(' ')
+
+    // If items are provided, render them as chips
+    if (items && items.length > 0) {
+        return (
+            <div className={cssClasses} {...restProps}>
+                {items.map((item, index) => {
+                    const itemId = item.id || item.value || index
+                    const isSelected = selectedItems.includes(itemId)
+
+                    return (
+                        <Chip
+                            key={itemId}
+                            id={itemId}
+                            label={item.label}
+                            icon={item.icon}
+                            tooltip={item.tooltip}
+                            action={item.action}
+                            outlined={item.outlined}
+                            selected={isSelected}
+                            disabled={disabled || item.disabled}
+                            deletable={deletable || item.deletable}
+                            size={size}
+                            variant={variant}
+                            onSelect={handleChipSelect}
+                            onDelete={handleChipDelete}
+                            ariaLabel={item.ariaLabel}
+                        />
+                    )
+                })}
+            </div>
+        )
+    }
+
+    // Otherwise render children
     return (
-        <div className="chips">
+        <div className={cssClasses} {...restProps}>
             {children}
         </div>
     )
+}
+
+// PropTypes para Chip
+Chip.propTypes = {
+    /** Unique identifier for the chip */
+    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    /** Icon name for Material Icons */
+    icon: PropTypes.string,
+    /** Chip text label */
+    label: PropTypes.string,
+    /** Tooltip configuration */
+    tooltip: PropTypes.object,
+    /** Action element (usually an icon) */
+    action: PropTypes.node,
+    /** Whether the chip has outlined style */
+    outlined: PropTypes.bool,
+    /** Whether the chip is selected */
+    selected: PropTypes.bool,
+    /** Whether the chip is disabled */
+    disabled: PropTypes.bool,
+    /** Whether the chip can be deleted */
+    deletable: PropTypes.bool,
+    /** Size variant of the chip */
+    size: PropTypes.oneOf(['small', 'normal', 'large']),
+    /** Visual variant of the chip */
+    variant: PropTypes.oneOf(['default', 'primary', 'secondary', 'success', 'warning', 'error']),
+    /** Additional CSS classes */
+    className: PropTypes.string,
+    /** Accessibility label for screen readers */
+    ariaLabel: PropTypes.string,
+    /** Selection handler function */
+    onSelect: PropTypes.func,
+    /** Delete handler function */
+    onDelete: PropTypes.func,
+    /** Click event handler */
+    onClick: PropTypes.func,
+    /** KeyDown event handler */
+    onKeyDown: PropTypes.func
+}
+
+Chip.defaultProps = {
+    outlined: false,
+    selected: false,
+    disabled: false,
+    deletable: false,
+    size: 'normal',
+    variant: 'default',
+    className: ''
+}
+
+// PropTypes para Chips
+Chips.propTypes = {
+    /** Child chip components */
+    children: PropTypes.node,
+    /** Array of chip data objects */
+    items: PropTypes.arrayOf(PropTypes.shape({
+        id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+        label: PropTypes.string,
+        icon: PropTypes.string,
+        tooltip: PropTypes.object,
+        action: PropTypes.node,
+        outlined: PropTypes.bool,
+        disabled: PropTypes.bool,
+        deletable: PropTypes.bool,
+        ariaLabel: PropTypes.string
+    })),
+    /** Array of selected chip IDs */
+    selected: PropTypes.array,
+    /** Whether all chips are disabled */
+    disabled: PropTypes.bool,
+    /** Whether chips can be deleted */
+    deletable: PropTypes.bool,
+    /** Whether multiple chips can be selected */
+    multiSelect: PropTypes.bool,
+    /** Size variant for all chips */
+    size: PropTypes.oneOf(['small', 'normal', 'large']),
+    /** Visual variant for all chips */
+    variant: PropTypes.oneOf(['default', 'primary', 'secondary', 'success', 'warning', 'error']),
+    /** Additional CSS classes */
+    className: PropTypes.string,
+    /** Individual chip selection handler */
+    onSelect: PropTypes.func,
+    /** Individual chip delete handler */
+    onDelete: PropTypes.func,
+    /** Selection change handler (receives array of selected IDs) */
+    onChange: PropTypes.func
+}
+
+Chips.defaultProps = {
+    items: [],
+    selected: [],
+    disabled: false,
+    deletable: false,
+    multiSelect: false,
+    size: 'normal',
+    variant: 'default',
+    className: ''
 }