@liiift-studio/mac-os9-ui 0.1.9 → 0.2.2

package/dist/index.cjs

@@ -704,7 +704,7 @@ var styles$6 = {"window":"Window-module_window","window--active":"Window-module_
  * </Window>
  * ```
  */
-const Window = React.forwardRef(({ children, title, titleBar, active = true, width = 'auto', height = 'auto', className = '', contentClassName = '', showControls = true, onClose, onMinimize, onMaximize, resizable = false, }, ref) => {
+const Window = React.forwardRef(({ children, title, titleBar, active = true, width = 'auto', height = 'auto', className = '', contentClassName = '', showControls = true, onClose, onMinimize, onMaximize, onMouseEnter, resizable = false, }, ref) => {
     // Class names
     const windowClassNames = [
         styles$6.window,
@@ -732,7 +732,7 @@ const Window = React.forwardRef(({ children, title, titleBar, active = true, wid
         }
         return null;
     };
-    return (jsxRuntime.jsxs("div", { ref: ref, className: windowClassNames, style: windowStyle, children: [renderTitleBar(), jsxRuntime.jsx("div", { className: contentClassNames, children: children }), resizable && jsxRuntime.jsx("div", { className: styles$6.resizeHandle, "aria-hidden": "true" })] }));
+    return (jsxRuntime.jsxs("div", { ref: ref, className: windowClassNames, style: windowStyle, onMouseEnter: onMouseEnter, children: [renderTitleBar(), jsxRuntime.jsx("div", { className: contentClassNames, children: children }), resizable && jsxRuntime.jsx("div", { className: styles$6.resizeHandle, "aria-hidden": "true" })] }));
 });
 Window.displayName = 'Window';
 
@@ -1221,10 +1221,11 @@ var styles$1 = {"listView":"ListView-module_listView","header":"ListView-module_
  *   ]}
  *   selectedIds={['1']}
  *   onSelectionChange={(ids) => console.log('Selected:', ids)}
+ *   onItemMouseEnter={(item) => console.log('Hovering:', item.name)}
  * />
  * ```
  */
-const ListView = React.forwardRef(({ columns, items, selectedIds = [], onSelectionChange, onItemOpen, onSort, className = '', height = 'auto', }, ref) => {
+const ListView = React.forwardRef(({ columns, items, selectedIds = [], onSelectionChange, onItemOpen, onItemMouseEnter, onSort, className = '', height = 'auto', }, ref) => {
     const [sortColumn, setSortColumn] = React.useState(null);
     const [sortDirection, setSortDirection] = React.useState('asc');
     // Class names
@@ -1272,6 +1273,12 @@ const ListView = React.forwardRef(({ columns, items, selectedIds = [], onSelecti
             onItemOpen(item);
         }
     }, [onItemOpen]);
+    // Handle row mouse enter
+    const handleRowMouseEnter = React.useCallback((item) => {
+        if (onItemMouseEnter) {
+            onItemMouseEnter(item);
+        }
+    }, [onItemMouseEnter]);
     // Container style
     const containerStyle = {};
     if (height !== 'auto') {
@@ -1283,7 +1290,7 @@ const ListView = React.forwardRef(({ columns, items, selectedIds = [], onSelecti
                             : column.width,
                     }, onClick: () => handleColumnClick(column.key, column.sortable), children: [column.label, sortColumn === column.key && (jsxRuntime.jsx("span", { className: styles$1.sortIndicator, children: sortDirection === 'asc' ? '▲' : '▼' }))] }, column.key))) }), jsxRuntime.jsx("div", { className: styles$1.body, children: items.map((item) => {
                     const isSelected = selectedIds.includes(item.id);
-                    return (jsxRuntime.jsx("div", { className: `${styles$1.row} ${isSelected ? styles$1.selected : ''}`, onClick: (e) => handleRowClick(item.id, e), onDoubleClick: () => handleRowDoubleClick(item), children: columns.map((column, index) => (jsxRuntime.jsxs("div", { className: styles$1.cell, style: {
+                    return (jsxRuntime.jsx("div", { className: `${styles$1.row} ${isSelected ? styles$1.selected : ''}`, onClick: (e) => handleRowClick(item.id, e), onDoubleClick: () => handleRowDoubleClick(item), onMouseEnter: () => handleRowMouseEnter(item), children: columns.map((column, index) => (jsxRuntime.jsxs("div", { className: styles$1.cell, style: {
                                 width: typeof column.width === 'number'
                                     ? `${column.width}px`
                                     : column.width,
@@ -1313,6 +1320,8 @@ var styles = {"folderListContent":"FolderList-module_folderListContent","listVie
  *   selectedIds={['1']}
  *   onSelectionChange={(ids) => console.log('Selected:', ids)}
  *   onItemOpen={(item) => console.log('Open:', item.name)}
+ *   onItemMouseEnter={(item) => console.log('Hovering:', item.name)}
+ *   onMouseEnter={(e) => console.log('Mouse entered folder list')}
  * />
  * ```
  */
@@ -1320,9 +1329,9 @@ const FolderList = React.forwardRef(({ columns = [
     { key: 'name', label: 'Name', width: '40%' },
     { key: 'modified', label: 'Date Modified', width: '30%' },
     { key: 'size', label: 'Size', width: '30%' },
-], items, selectedIds, onSelectionChange, onItemOpen, onSort, listHeight = 400, ...windowProps }, ref) => {
+], items, selectedIds, onSelectionChange, onItemOpen, onItemMouseEnter, onSort, onMouseEnter, listHeight = 400, ...windowProps }, ref) => {
     // Window content with ListView
-    return (jsxRuntime.jsx(Window, { ref: ref, contentClassName: styles.folderListContent, ...windowProps, children: jsxRuntime.jsx(ListView, { columns: columns, items: items, selectedIds: selectedIds, onSelectionChange: onSelectionChange, onItemOpen: onItemOpen, onSort: onSort, height: listHeight, className: styles.listView }) }));
+    return (jsxRuntime.jsx(Window, { ref: ref, contentClassName: styles.folderListContent, onMouseEnter: onMouseEnter, ...windowProps, children: jsxRuntime.jsx(ListView, { columns: columns, items: items, selectedIds: selectedIds, onSelectionChange: onSelectionChange, onItemOpen: onItemOpen, onItemMouseEnter: onItemMouseEnter, onSort: onSort, height: listHeight, className: styles.listView }) }));
 });
 FolderList.displayName = 'FolderList';