laif-ds 0.2.75 → 0.2.76

package/dist/CHANGELOG.md

@@ -5,8 +5,23 @@ All notable technical changes to the laif-ds core will be documented in this fil
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [laif-ds@0.2.76]
+
+### 🚀 Added
+
+- **FileUploader**: Added support for archive file types including `zip`, `rar`, `7z`, `tar`, `gz`, and `tgz`
+- **TruncatedCell**: Added a new component for displaying truncated text content with tooltip expansion and responsive text handling
+- **DataTable**: Added `rowClassName` prop for custom CSS classes based on row data
+- **DataTable**: Added `headerClassName` and `cellClassName` support in column meta for custom styling
+- **DataTable**: Enhanced utils typing with mapped union for better accessor config type inference
+
 ## [laif-ds@0.2.75]
 
+### ⚠️ Breaking changes
+
+- **DataTable**: the cell value type is now defined better so some small compatibility issues my emerge with strict typing in precedent versions
+- **general**: Since the introduction of strict EsLint in the repository a big number of components has got updated, some small bugs may emerge
+
 ### 🚀 Added
 
 - **Storybook**: Added a dedicated changelog documentation page with markdown rendering and release-oriented navigation

package/dist/agent-docs/adoption-report.json

@@ -1,12 +1,12 @@
 {
   "schemaVersion": "1.0.0",
-  "generatedAt": "2026-03-09T16:04:40.003Z",
+  "generatedAt": "2026-03-13T13:58:51.406Z",
   "package": {
     "name": "laif-ds",
-    "version": "0.2.75"
+    "version": "0.2.76"
   },
   "summary": {
-    "scannedFiles": 387,
+    "scannedFiles": 390,
     "deprecatedComponentsCount": 2,
     "deprecatedComponentsUsedCount": 0,
     "componentsWithoutExamplesCount": 5,
@@ -358,7 +358,7 @@
     "repeatedClassNames": [
       {
         "className": "flex items-center gap-2",
-        "occurrences": 34,
+        "occurrences": 36,
         "files": [
           "src/components/stories/app-checkbox.stories.tsx",
           "src/components/stories/app-dialog.stories.tsx",
@@ -371,6 +371,7 @@
           "src/components/stories/data-table-no-utils-example.stories.tsx",
           "src/components/stories/data-table-utils-example.stories.tsx",
           "src/components/stories/playground.stories.tsx",
+          "src/components/stories/truncated-cell.stories.tsx",
           "src/components/ui/app-form.tsx",
           "src/components/ui/app-kanban.tsx",
           "src/components/ui/app-sidebar.tsx",

package/dist/agent-docs/components/DataTable.md

@@ -32,6 +32,7 @@ Powerful table built on TanStack Table v8. Supports client-side and server-side
 | `disableAutoPageSize`   | `boolean`                             | `false`                | Disable auto pageSize (still updates pageIndex).                                        |
 | `id`                    | `string`                              | `undefined`            | Test/accessibility hook for the root element.                                           |
 | `data-testid`           | `string`                              | `undefined`            | Test identifier forwarded to the root element.                                          |
+| `rowClassName`          | `string \| ((row) => string)`         | `undefined`            | Add custom CSS classes to table rows based on row data or state.                        |
 
 ---
 
@@ -56,6 +57,8 @@ type ColumnMeta = {
   searchable?: boolean;
   pinned?: "left" | "right";
   listOptions?: { value: string; label: string }[];
+  cellClassName?: string | ((value: any, row: TData) => string);
+  headerClassName?: string;
 };
 ```
 

package/dist/agent-docs/components/FileUploader.md

@@ -20,7 +20,7 @@ Drag-and-drop uploader with keyboard activation, file type filtering, limits (co
 | `maxTotalSize`      | `number` (bytes)          | `undefined`                                        | Maximum total size of selected files.                     |
 | `maxFiles`          | `number`                  | `undefined`                                        | Maximum number of files (when `multiple` is true).        |
 
-`AcceptItem` includes: `pdf | doc | docx | xls | xlsx | ppt | pptx | txt | csv | jpg | jpeg | png | gif | image | video | audio`.
+`AcceptItem` includes: `pdf | doc | docx | xls | xlsx | ppt | pptx | txt | csv | jpg | jpeg | png | gif | image | video | audio | zip | rar | 7z | tar | gz | tgz`.
 
 ---
 
@@ -68,6 +68,12 @@ const exts: AcceptItem[] = [
   "image",
   "video",
   "audio",
+  "zip",
+  "rar",
+  "7z",
+  "tar",
+  "gz",
+  "tgz",
 ];
 
 export function MultiUploader() {

package/dist/agent-docs/components-list.md

@@ -85,6 +85,7 @@ This document provides a complete mapping of all components available in the lai
 - **Pagination** - Page navigation component for paginated content
 - **Table** - Basic table component with styling
 - **TableSkeleton** - Loading skeleton for table components
+- **TruncatedCell** - Text display component with automatic truncation detection and popover preview
 - **Typo** - Typography component for consistent text styling
 
 ### Content & Media Components

package/dist/agent-docs/manifest.json

@@ -1,20 +1,22 @@
 {
   "schemaVersion": "1.1.0",
-  "generatedAt": "2026-03-09T16:04:39.745Z",
+  "generatedAt": "2026-03-13T13:58:51.155Z",
   "package": {
     "name": "laif-ds",
-    "version": "0.2.75"
+    "version": "0.2.76"
   },
   "stats": {
     "documentedComponentCount": 91,
-    "catalogedComponentCount": 90,
-    "missingFromDocsCount": 0,
+    "catalogedComponentCount": 91,
+    "missingFromDocsCount": 1,
     "deprecatedComponentCount": 2,
     "averageAiReadinessScore": 54.23,
     "highAiReadinessCount": 35,
     "lowAiReadinessCount": 42
   },
-  "missingFromDocs": [],
+  "missingFromDocs": [
+    "TruncatedCell"
+  ],
   "components": [
     {
       "name": "Accordion",
@@ -2585,10 +2587,10 @@
       },
       "metadata": {
         "props": {
-          "totalProps": 22,
+          "totalProps": 23,
           "requiredPropsCount": 0,
-          "typedPropsCount": 22,
-          "describedPropsCount": 22
+          "typedPropsCount": 23,
+          "describedPropsCount": 23
         },
         "accessibility": {
           "hasCoverage": true
@@ -5975,5 +5977,5 @@
       ]
     }
   ],
-  "checksum": "10e072f1a2d3f682aff594d6c5319ff53034c93de21a31cb6a1b3c2c3407fbd4"
+  "checksum": "49d7886a951266036bed08eafc023f23f4363c035bbc722af5d0b7b2415862cd"
 }

package/dist/agent-docs/truncated-cell.md

@@ -0,0 +1,342 @@
+# TruncatedCell
+
+The TruncatedCell component is designed to display text that may be too long for its container. It automatically detects when text is truncated and provides a popover to show the full content.
+
+## Features
+
+- **Flexible Content**: Accepts plain text or rich ReactNode content
+- **Automatic Truncation Detection**: Uses scrollWidth vs clientWidth comparison to detect if content is truncated
+- **Responsive**: Re-checks truncation on resize using ResizeObserver for better performance
+- **Controlled Popover**: Manages popover state programmatically for better UX
+- **Eye Icon Hint**: Displays an eye icon hint only when content is truncated, with smooth fade-in animation
+- **Button Visibility Control**: Optional `showButton` prop to control eye button visibility
+- **Custom Popover Styling**: `popoverClassName` prop for custom popover content styling
+- **Keyboard Accessibility**: Full keyboard navigation support (Enter/Space to open popover)
+- **Screen Reader Support**: Proper ARIA labels and roles for accessibility
+- **Empty State**: Shows "-" with muted styling when no content is provided
+- **Custom Empty Fallback**: Supports a custom placeholder for empty values
+- **Customizable Styling**: Supports custom CSS classes for container, cell, and popover
+- **Dialog Title**: Optional title for the popover header
+- **Custom Content**: Full JSX support for custom popover content
+- **Hover Effects**: Smooth underline on content hover and button appearance
+- **Scrollable Content**: Long content in popover is scrollable with max height
+- **DX-first API**: Rich children work out of the box, and `text` is only needed when you want explicit popover/accessibility text
+
+## Usage
+
+```tsx
+import { TruncatedCell } from "laif-ds";
+
+// Basic usage with string content
+<TruncatedCell text="Short text" />
+
+// Long text that will be truncated
+<TruncatedCell
+  text="This is a very long text that will be truncated because it exceeds the container width"
+  wrapperClassName="w-56"
+/>
+
+// String children also work without text
+<TruncatedCell wrapperClassName="w-56">
+  This is a string content
+</TruncatedCell>
+
+// Rich content works without duplicating text
+<TruncatedCell wrapperClassName="w-56">
+  <div className="flex items-center gap-2">
+    <Avatar src="/avatar.jpg" />
+    <div className="min-w-0">
+      <p className="font-semibold">John Doe</p>
+      <p className="text-sm text-gray-600">john@example.com</p>
+    </div>
+  </div>
+</TruncatedCell>
+
+// Provide text when you want explicit popover or accessibility content
+<TruncatedCell
+  text="John Doe - john@example.com"
+  title="User details"
+  wrapperClassName="w-56"
+>
+  <UserSummary />
+</TruncatedCell>
+
+// With custom styling and title
+<TruncatedCell
+  text="Custom styled truncated text"
+  title="Full Content"
+  wrapperClassName="w-40"
+  className="max-w-40"
+/>
+
+// With custom popover content and styling
+<TruncatedCell
+  text="Text with custom popover content"
+  title="Custom Content"
+  popoverContent={
+    <div className="space-y-3">
+      <p>Custom JSX content here</p>
+      <button>Action Button</button>
+    </div>
+  }
+  popoverClassName="max-w-md"
+  showButton={true}
+/>
+
+// Hide the eye hint
+<TruncatedCell
+  text="Text without eye button"
+  showButton={false}
+/>
+
+// Empty text
+<TruncatedCell text="" />
+
+// Custom empty fallback
+<TruncatedCell text="" emptyFallback="No value" />
+```
+
+## Props
+
+| Prop               | Type        | Default     | Description                                                                  |
+| ------------------ | ----------- | ----------- | ---------------------------------------------------------------------------- |
+| `children`         | `ReactNode` | `undefined` | Content to display                                                           |
+| `text`             | `string`    | `undefined` | Optional text used for truncation detection, accessibility, and popover copy |
+| `title`            | `string`    | `undefined` | Optional title for the popover dialog                                        |
+| `popoverContent`   | `ReactNode` | `undefined` | Custom popover content (JSX)                                                 |
+| `wrapperClassName` | `string`    | `""`        | Preferred CSS classes for the wrapper container                              |
+| `className`        | `string`    | `""`        | CSS classes for the cell content                                             |
+| `popoverClassName` | `string`    | `""`        | CSS classes for the popover content                                          |
+| `showButton`       | `boolean`   | `true`      | Flag used to show/hide the eye hint                                          |
+| `emptyFallback`    | `ReactNode` | `"-"`       | Custom placeholder rendered when no content is available                     |
+
+## Behavior
+
+### Truncation Detection
+
+- Component monitors the text element's scrollWidth vs clientWidth
+- If scrollWidth > clientWidth, the text is considered truncated
+- Detection runs on mount and on resize
+- When `text` is not provided, the component also extracts `textContent` from the rendered node to power the default popover content
+
+### Visual States
+
+1. **Normal State**: Text is displayed with truncation (CSS `truncate`)
+2. **Truncated State**: Text is truncated + eye icon hint appears
+3. **Empty State**: Shows "-" when text is empty/undefined
+4. **Popover State**: Opens when there is content to inspect, and the eye icon hint appears only when the rendered value is truncated
+
+### Styling
+
+- Container: `flex max-w-60 gap-2` + custom classes
+- Text container: `flex min-w-0 flex-1`
+- Text element: `w-full min-w-0 truncate whitespace-nowrap`
+- Popover: `w-96` with `whitespace-pre-wrap` for multiline support
+
+### Content Types
+
+The TruncatedCell component supports two main usage patterns:
+
+#### 1. String Content (Simple)
+
+```tsx
+// Direct text prop
+<TruncatedCell text="Simple text content" />
+
+// String children (text prop optional)
+<TruncatedCell wrapperClassName="w-56">
+  String content as children
+</TruncatedCell>
+```
+
+#### 2. ReactNode Content (Advanced)
+
+```tsx
+// Rich children work without text
+<TruncatedCell wrapperClassName="w-56">
+  <div className="flex items-center gap-2">
+    <Avatar src="/avatar.jpg" />
+    <div className="min-w-0">
+      <p className="font-semibold">John Doe</p>
+      <p className="text-sm text-gray-600">john@example.com</p>
+    </div>
+  </div>
+</TruncatedCell>
+
+// Add text when you want explicit popover content
+<TruncatedCell text="User profile - John Doe" wrapperClassName="w-56">
+  <UserSummary />
+</TruncatedCell>
+```
+
+### Choosing Between `children` and `text`
+
+- Use `text` for the simplest plain-text case
+- Use `children` when you need custom rendering inside the truncated area
+- Add `text` together with `children` when the rendered content is visual or abbreviated and you want more descriptive text in the popover
+
+```tsx
+// Plain text
+<TruncatedCell text="Contract pending signature" />
+
+// Rich UI with automatic text extraction
+<TruncatedCell wrapperClassName="w-56">
+  <div>Complex content</div>
+</TruncatedCell>
+
+// Rich UI with explicit popover and a11y text
+<TruncatedCell text="Complex content description" wrapperClassName="w-56">
+  <div>Complex content</div>
+</TruncatedCell>
+```
+
+### Custom Popover Content
+
+The `popoverContent` prop allows you to override the default text display with custom JSX content:
+
+- **Full Flexibility**: Any React components can be used as popover content
+- **Backward Compatible**: When not provided, defaults to displaying the text with Typo component
+- **Title Support**: Works seamlessly with the `title` prop for popover headers
+- **Custom Styling**: Use `popoverClassName` to style the popover container
+- **Button Control**: Use `showButton` to control eye hint visibility
+- **Open Behavior**: Custom popover content can open even when the displayed value itself is not truncated
+
+```tsx
+<TruncatedCell
+  text="User profile"
+  title="User Details"
+  popoverContent={
+    <div className="space-y-2">
+      <div className="flex items-center gap-2">
+        <Avatar src="/avatar.jpg" />
+        <div>
+          <p className="font-semibold">John Doe</p>
+          <p className="text-sm text-gray-600">john@example.com</p>
+        </div>
+      </div>
+      <div className="flex gap-2">
+        <Button size="sm">Edit</Button>
+        <Button size="sm" variant="outline">
+          View Profile
+        </Button>
+      </div>
+    </div>
+  }
+  popoverClassName="max-w-md"
+  showButton={true}
+/>
+```
+
+### Button Visibility Control
+
+The `showButton` prop gives you control over the eye hint visibility:
+
+```tsx
+// Show eye hint (default)
+<TruncatedCell text="Long text that will be truncated" showButton={true} />
+
+// Hide eye hint
+<TruncatedCell text="Long text without eye hint" showButton={false} />
+```
+
+### Empty Fallback
+
+```tsx
+// Default placeholder
+<TruncatedCell text="" />
+
+// Custom placeholder
+<TruncatedCell text="" emptyFallback="No value" />
+```
+
+### Popover Styling
+
+The `popoverClassName` prop allows custom styling of the popover container:
+
+```tsx
+<TruncatedCell
+  text="Custom styled popover"
+  popoverClassName="max-w-md bg-blue-50 border-blue-200"
+/>
+```
+
+## Technical Details
+
+### Dependencies
+
+- React hooks: `useState`, `useEffect`, `useRef`, `useCallback`
+- Laif-DS components: `Popover`, `PopoverContent`, `PopoverTrigger`, `Typo`, `Icon`
+- Utility: `cn` for class merging
+
+### Performance Optimizations
+
+- **ResizeObserver**: Uses modern ResizeObserver API for better performance than window resize events
+- **useCallback**: Memoizes truncation check function to prevent unnecessary re-renders
+- **Controlled State**: Manages popover state programmatically to avoid prop drilling
+- **Cleanup**: Proper cleanup of observers and event listeners
+- **Optimized Re-renders**: Only re-checks truncation when content changes
+
+### Event Handling
+
+- ResizeObserver for element-specific resize detection
+- Fallback window resize listener for older browsers
+- Click on the cell trigger opens the popover when available
+- Keyboard support (Enter/Space keys)
+- Hover effects with smooth transitions
+
+### Accessibility Features
+
+- **Semantic Trigger**: Uses a real `button` element as the interactive trigger
+- **Keyboard Navigation**: Full support for Enter and Space keys
+- **Screen Reader Labels**: Dynamic `aria-label` based on truncation state
+- **Focus Management**: Native button focus behavior
+- **Semantic HTML**: Popover content remains accessible even for multiline values
+
+## Accessibility
+
+- Text container has cursor pointer to indicate interactivity
+- Hover state provides visual feedback
+- Popover provides full text access for screen readers
+- Eye icon provides a clear visual hint that more content is available
+
+## Examples
+
+### In a Table Cell
+
+```tsx
+const TableCell = ({ value }: { value: string }) => (
+  <TruncatedCell text={value} wrapperClassName="w-56" className="py-2" />
+);
+```
+
+### With Maximum Width Constraint
+
+```tsx
+<TruncatedCell
+  text="Constrained width text that will truncate"
+  wrapperClassName="w-32"
+/>
+```
+
+### Multiline Text Support
+
+```tsx
+<TruncatedCell text="Line 1\nLine 2\nLine 3" className="max-w-48" />
+```
+
+## Comparison with Alternatives
+
+### vs Tooltip
+
+- **TruncatedCell**: Supports click-to-inspect content, and visually hints with the eye icon when text is actually truncated
+- **Tooltip**: Always shows on hover regardless of truncation
+
+### vs CSS text-overflow alone
+
+- **TruncatedCell**: Provides access to full content
+- **CSS only**: Content is inaccessible when truncated
+
+### vs Expandable Text
+
+- **TruncatedCell**: Compact, popover-based approach
+- **Expandable**: Takes more space, inline expansion