@noxickon/onyx 4.1.2 → 4.1.3

package/AI-README.md

@@ -4123,16 +4123,18 @@ function SearchBox() {
 
 ## useOverflowDetection
 
-Detects overflow and hides overflowing elements.
+Calculates how many items fit in a container and returns visible/overflow counts (MUI-style approach).
 
 ### Signature
 
 ```tsx
-function useOverflowDetection(options?: {
+function useOverflowDetection(options: {
+  totalItems: number; // Total number of items (required)
   selector?: string; // Default: '[data-ox-state="selected"]'
+  minVisible?: number; // Minimum items to always show (default: 1)
 }): {
-  overflowAmount: number; // Number of hidden items
-  checkOverflow: () => void;
+  visibleCount: number; // Number of items that fit
+  overflowAmount: number; // Number of hidden items (totalItems - visibleCount)
   handleResize: (node: HTMLDivElement | null) => () => void; // Ref callback with cleanup
 };
 ```
@@ -4141,16 +4143,23 @@ function useOverflowDetection(options?: {
 
 ```tsx
 function TagList({ tags }) {
-  const { overflowAmount, handleResize } = useOverflowDetection();
+  const { visibleCount, overflowAmount, handleResize } = useOverflowDetection({
+    totalItems: tags.length,
+    selector: '[data-tag]',
+  });
+
+  const visibleTags = tags.slice(0, visibleCount);
 
   return (
-    <div ref={handleResize}>
-      {tags.map((tag) => (
-        <span key={tag} data-ox-state="selected">
+    <div className="flex gap-2" ref={handleResize}>
+      {visibleTags.map((tag) => (
+        <span key={tag} data-tag>
           {tag}
         </span>
       ))}
-      {overflowAmount > 0 && <span>+{overflowAmount} more</span>}
+      {overflowAmount > 0 && (
+        <span data-ox-overflow-indicator>+{overflowAmount} more</span>
+      )}
     </div>
   );
 }
@@ -4158,9 +4167,10 @@ function TagList({ tags }) {
 
 **Notes**:
 
-- ResizeObserver integration
-- Automatically hides overflow from end
-- Returns hidden element count
+- ResizeObserver integration for automatic recalculation on resize
+- Consumer controls rendering - only render `visibleCount` items (no display:none)
+- Measures items via selector and calculates how many fit in container width
+- Accounts for gap and overflow indicator width in calculation
 
 ---