react-fit-list 1.0.0

package/dist/index.js

@@ -0,0 +1,413 @@
+import * as React from 'react';
+import { useRef, useState, useCallback, useEffect, useMemo, useLayoutEffect } from 'react';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+
+// src/components/FitList.tsx
+function useControllableState({
+  value,
+  defaultValue,
+  onChange
+}) {
+  const [internal, setInternal] = useState(defaultValue);
+  const isControlled = value !== void 0;
+  const current = isControlled ? value : internal;
+  const setValue = useCallback(
+    (next) => {
+      if (!isControlled) {
+        setInternal(next);
+      }
+      onChange?.(next);
+    },
+    [isControlled, onChange]
+  );
+  return [current, setValue];
+}
+
+// src/hooks/useFitList.tsx
+var useIsoLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+function getEstimatedWidth(item, index, estimatedItemWidth, fallback) {
+  if (typeof estimatedItemWidth === "function")
+    return estimatedItemWidth(item, index);
+  if (typeof estimatedItemWidth === "number") return estimatedItemWidth;
+  return fallback;
+}
+function useFitList({
+  items,
+  getKey,
+  reserveOverflowSpace = false,
+  overflowWidth,
+  gap = 8,
+  collapseFrom = "end",
+  estimatedItemWidth,
+  measurementMode = "live",
+  expanded,
+  defaultExpanded = false,
+  onExpandedChange,
+  measureOverflowWidth
+}) {
+  const containerRef = useRef(null);
+  const overflowRef = useRef(null);
+  const itemNodeMap = useRef(/* @__PURE__ */ new Map());
+  const measureNodeMap = useRef(/* @__PURE__ */ new Map());
+  const [visibleCount, setVisibleCount] = useState(items.length);
+  const [isExpanded, setExpanded] = useControllableState({
+    value: expanded,
+    defaultValue: defaultExpanded,
+    onChange: onExpandedChange
+  });
+  const compute = useCallback(() => {
+    if (isExpanded) {
+      setVisibleCount(items.length);
+      return;
+    }
+    const container = containerRef.current;
+    if (!container) {
+      setVisibleCount(items.length);
+      return;
+    }
+    const containerWidth = container.clientWidth;
+    if (!containerWidth) {
+      setVisibleCount(items.length);
+      return;
+    }
+    const keys = items.map(getKey);
+    const itemWidths = items.map((item, index) => {
+      const key = keys[index];
+      const measureNode = measureNodeMap.current.get(key);
+      const liveNode = itemNodeMap.current.get(key);
+      if (measurementMode === "live") {
+        if (measureNode) return measureNode.offsetWidth;
+        if (liveNode) return liveNode.offsetWidth;
+      }
+      return getEstimatedWidth(item, index, estimatedItemWidth, 96);
+    });
+    let nextVisible = items.length;
+    for (let count = items.length; count >= 0; count -= 1) {
+      const hiddenCount = items.length - count;
+      const visibleWidths = collapseFrom === "end" ? itemWidths.slice(0, count) : itemWidths.slice(items.length - count);
+      const itemsWidth = visibleWidths.reduce((sum, width) => sum + width, 0);
+      const itemsGap = count > 1 ? gap * (count - 1) : 0;
+      let currentOverflowWidth = 0;
+      if (hiddenCount > 0) {
+        if (typeof overflowWidth === "number") {
+          currentOverflowWidth = overflowWidth;
+        } else if (measureOverflowWidth) {
+          currentOverflowWidth = measureOverflowWidth(hiddenCount);
+        } else {
+          currentOverflowWidth = overflowRef.current?.offsetWidth ?? 44;
+        }
+      } else if (reserveOverflowSpace) {
+        if (typeof overflowWidth === "number") {
+          currentOverflowWidth = overflowWidth;
+        } else {
+          currentOverflowWidth = overflowRef.current?.offsetWidth ?? 44;
+        }
+      }
+      const overflowGap = (hiddenCount > 0 || reserveOverflowSpace) && count > 0 ? gap : 0;
+      const total = itemsWidth + itemsGap + overflowGap + currentOverflowWidth;
+      if (total <= containerWidth) {
+        nextVisible = count;
+        break;
+      }
+    }
+    setVisibleCount((prev) => prev === nextVisible ? prev : nextVisible);
+  }, [
+    collapseFrom,
+    estimatedItemWidth,
+    gap,
+    getKey,
+    isExpanded,
+    items,
+    measurementMode,
+    measureOverflowWidth,
+    overflowWidth,
+    reserveOverflowSpace
+  ]);
+  useIsoLayoutEffect(() => {
+    compute();
+  }, [compute]);
+  useIsoLayoutEffect(() => {
+    const container = containerRef.current;
+    if (!container || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(() => {
+      requestAnimationFrame(compute);
+    });
+    observer.observe(container);
+    return () => observer.disconnect();
+  }, [compute]);
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const onResize = () => compute();
+    window.addEventListener("resize", onResize);
+    return () => window.removeEventListener("resize", onResize);
+  }, [compute]);
+  const registerItem = useCallback(
+    (key) => (node) => {
+      if (node) {
+        itemNodeMap.current.set(key, node);
+      } else {
+        itemNodeMap.current.delete(key);
+      }
+    },
+    []
+  );
+  const registerMeasureItem = useCallback(
+    (key) => (node) => {
+      if (node) {
+        measureNodeMap.current.set(key, node);
+      } else {
+        measureNodeMap.current.delete(key);
+      }
+    },
+    []
+  );
+  const registerOverflow = useCallback((node) => {
+    overflowRef.current = node;
+  }, []);
+  const clampedVisibleCount = Math.max(0, Math.min(visibleCount, items.length));
+  const visibleItems = useMemo(() => {
+    if (isExpanded) return [...items];
+    if (collapseFrom === "end") return items.slice(0, clampedVisibleCount);
+    return items.slice(items.length - clampedVisibleCount);
+  }, [clampedVisibleCount, collapseFrom, isExpanded, items]);
+  const hiddenItems = useMemo(() => {
+    if (isExpanded) return [];
+    if (collapseFrom === "end") return items.slice(clampedVisibleCount);
+    return items.slice(0, items.length - clampedVisibleCount);
+  }, [clampedVisibleCount, collapseFrom, isExpanded, items]);
+  const toggleExpanded = useCallback(() => {
+    setExpanded(!isExpanded);
+  }, [isExpanded, setExpanded]);
+  return {
+    containerRef,
+    registerItem,
+    registerMeasureItem,
+    registerOverflow,
+    visibleItems,
+    hiddenItems,
+    hiddenCount: hiddenItems.length,
+    isExpanded,
+    setExpanded,
+    toggleExpanded,
+    recompute: compute
+  };
+}
+function defaultOverflow({ hiddenCount }) {
+  return /* @__PURE__ */ jsxs("span", { children: [
+    "+",
+    hiddenCount
+  ] });
+}
+function FitList({
+  items,
+  getKey,
+  renderItem,
+  renderOverflow = defaultOverflow,
+  className,
+  listClassName,
+  itemClassName,
+  overflowClassName,
+  measureClassName,
+  emptyFallback = null,
+  gap = 8,
+  collapseFrom = "end",
+  reserveOverflowSpace = false,
+  overflowWidth,
+  estimatedItemWidth,
+  measurementMode = "live",
+  expanded,
+  defaultExpanded = false,
+  onExpandedChange,
+  as = "div",
+  onOverflowClick,
+  overflowAs = "button"
+}) {
+  const Component = as;
+  const OverflowComponent = overflowAs;
+  const overflowMeasureRef = React.useRef(null);
+  const isDefaultOverflowRenderer = renderOverflow === defaultOverflow;
+  const measureOverflowWidth = React.useCallback(
+    (hiddenCount2) => {
+      if (typeof overflowWidth === "number") return overflowWidth;
+      const node = overflowMeasureRef.current;
+      if (!node) return 44;
+      if (isDefaultOverflowRenderer) {
+        const previous = node.textContent;
+        node.textContent = `+${hiddenCount2}`;
+        const width = node.offsetWidth;
+        node.textContent = previous;
+        return width;
+      }
+      return node.offsetWidth;
+    },
+    [isDefaultOverflowRenderer, overflowWidth]
+  );
+  const {
+    containerRef,
+    registerItem,
+    registerMeasureItem,
+    registerOverflow,
+    visibleItems,
+    hiddenItems,
+    hiddenCount,
+    isExpanded,
+    setExpanded,
+    toggleExpanded
+  } = useFitList({
+    items,
+    getKey,
+    gap,
+    collapseFrom,
+    reserveOverflowSpace,
+    overflowWidth,
+    estimatedItemWidth,
+    measurementMode,
+    expanded,
+    defaultExpanded,
+    onExpandedChange,
+    measureOverflowWidth
+  });
+  const visibleEntries = React.useMemo(() => {
+    if (isExpanded) {
+      return items.map((item, index) => ({ item, index }));
+    }
+    if (collapseFrom === "end") {
+      return items.slice(0, visibleItems.length).map((item, index) => ({ item, index }));
+    }
+    const startIndex = items.length - visibleItems.length;
+    return items.slice(startIndex).map((item, index) => ({ item, index: startIndex + index }));
+  }, [collapseFrom, isExpanded, items, visibleItems.length]);
+  if (items.length === 0) {
+    return /* @__PURE__ */ jsx(Fragment, { children: emptyFallback });
+  }
+  const overflowArgs = {
+    hiddenCount,
+    hiddenItems: [...hiddenItems],
+    visibleItems: [...visibleItems],
+    isExpanded,
+    setExpanded,
+    toggle: toggleExpanded
+  };
+  const overflowChildren = renderOverflow(overflowArgs);
+  const overflowButtonProps = {
+    className: overflowClassName,
+    type: "button",
+    onClick: (event) => onOverflowClick?.(overflowArgs, event),
+    "aria-expanded": isExpanded,
+    children: overflowChildren
+  };
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: listClassName,
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap,
+          minWidth: 0,
+          flex: "1 1 auto",
+          overflow: "hidden"
+        },
+        children: visibleEntries.map(({ item, index }) => {
+          const key = getKey(item, index);
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: registerItem(key),
+              className: itemClassName,
+              style: {
+                minWidth: 0,
+                flex: "0 0 auto",
+                whiteSpace: "nowrap"
+              },
+              children: renderItem(item, index)
+            },
+            key
+          );
+        })
+      }
+    ),
+    (hiddenCount > 0 || reserveOverflowSpace) && /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: registerOverflow,
+        style: {
+          visibility: hiddenCount > 0 ? "visible" : "hidden",
+          flex: "0 0 auto",
+          whiteSpace: "nowrap",
+          display: "block"
+        },
+        children: hiddenCount > 0 ? overflowAs === "button" ? /* @__PURE__ */ jsx("button", { ...overflowButtonProps }) : React.createElement(
+          OverflowComponent,
+          { className: overflowClassName },
+          overflowChildren
+        ) : /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "+0" })
+      }
+    )
+  ] });
+  const root = React.createElement(
+    Component,
+    {
+      ref: containerRef,
+      className,
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap,
+        minWidth: 0,
+        whiteSpace: "nowrap"
+      }
+    },
+    content
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    root,
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-hidden": "true",
+        style: {
+          pointerEvents: "none",
+          position: "fixed",
+          top: 0,
+          left: 0,
+          zIndex: -1,
+          overflow: "hidden",
+          opacity: 0
+        },
+        children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap }, children: [
+          items.map((item, index) => {
+            const key = getKey(item, index);
+            return /* @__PURE__ */ jsx(
+              "span",
+              {
+                ref: registerMeasureItem(key),
+                className: measureClassName ?? itemClassName,
+                style: {
+                  display: "inline-flex",
+                  whiteSpace: "nowrap"
+                },
+                children: renderItem(item, index)
+              },
+              `measure:${String(key)}`
+            );
+          }),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              ref: overflowMeasureRef,
+              className: overflowClassName,
+              style: { display: "inline-flex", whiteSpace: "nowrap" },
+              children: overflowChildren
+            }
+          )
+        ] })
+      }
+    )
+  ] });
+}
+
+export { FitList, useFitList };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/useControllableState.ts","../src/hooks/useFitList.tsx","../src/components/FitList.tsx"],"names":["useState","useCallback","hiddenCount"],"mappings":"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","file":"index.js","sourcesContent":["import { useCallback, useState } from \"react\";\n\n/**\n * Shared controlled/uncontrolled state helper.\n *\n * Mirrors the common React component API pattern:\n * - pass `value` to control state externally\n * - omit `value` and use `defaultValue` for internal state\n * - observe changes through `onChange`\n */\nexport function useControllableState<T>({\n  value,\n  defaultValue,\n  onChange,\n}: {\n  /** Controlled value. When defined, internal state is ignored. */\n  value: T | undefined;\n  /** Initial value used for uncontrolled state. */\n  defaultValue: T;\n  /** Called whenever the state setter is invoked. */\n  onChange?: (next: T) => void;\n}) {\n  const [internal, setInternal] = useState(defaultValue);\n  const isControlled = value !== undefined;\n  const current = isControlled ? (value as T) : internal;\n\n  const setValue = useCallback(\n    (next: T) => {\n      if (!isControlled) {\n        setInternal(next);\n      }\n      onChange?.(next);\n    },\n    [isControlled, onChange]\n  );\n\n  return [current, setValue] as const;\n}\n","import type * as React from \"react\";\nimport {\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { useControllableState } from \"./useControllableState\";\nimport type { UseFitListOptions, UseFitListResult } from \"../types\";\n\nconst useIsoLayoutEffect =\n  typeof window !== \"undefined\" ? useLayoutEffect : useEffect;\n\nfunction getEstimatedWidth<T>(\n  item: T,\n  index: number,\n  estimatedItemWidth: number | ((item: T, index: number) => number) | undefined,\n  fallback: number\n) {\n  if (typeof estimatedItemWidth === \"function\")\n    return estimatedItemWidth(item, index);\n  if (typeof estimatedItemWidth === \"number\") return estimatedItemWidth;\n  return fallback;\n}\n\n/**\n * Headless hook that calculates which items can fit in a single horizontal row.\n *\n * The hook measures the container and item widths, then returns visible/hidden\n * slices plus refs and callbacks needed to wire the calculation into your own UI.\n * Use this when you need the fitting logic without the default `FitList`\n * renderer.\n *\n * @example\n * ```tsx\n * const fit = useFitList({\n *   items: tags,\n *   getKey: (tag) => tag.id,\n *   gap: 8,\n * });\n * ```\n */\nexport function useFitList<T>({\n  items,\n  getKey,\n  reserveOverflowSpace = false,\n  overflowWidth,\n  gap = 8,\n  collapseFrom = \"end\",\n  estimatedItemWidth,\n  measurementMode = \"live\",\n  expanded,\n  defaultExpanded = false,\n  onExpandedChange,\n  measureOverflowWidth,\n}: UseFitListOptions<T>): UseFitListResult<T> {\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const overflowRef = useRef<HTMLElement | null>(null);\n  const itemNodeMap = useRef(new Map<React.Key, HTMLElement>());\n  const measureNodeMap = useRef(new Map<React.Key, HTMLElement>());\n  const [visibleCount, setVisibleCount] = useState(items.length);\n  const [isExpanded, setExpanded] = useControllableState<boolean>({\n    value: expanded,\n    defaultValue: defaultExpanded,\n    onChange: onExpandedChange,\n  });\n\n  const compute = useCallback(() => {\n    if (isExpanded) {\n      setVisibleCount(items.length);\n      return;\n    }\n\n    const container = containerRef.current;\n    if (!container) {\n      setVisibleCount(items.length);\n      return;\n    }\n\n    const containerWidth = container.clientWidth;\n    if (!containerWidth) {\n      setVisibleCount(items.length);\n      return;\n    }\n\n    const keys = items.map(getKey);\n    const itemWidths = items.map((item, index) => {\n      const key = keys[index];\n      const measureNode = measureNodeMap.current.get(key);\n      const liveNode = itemNodeMap.current.get(key);\n      if (measurementMode === \"live\") {\n        if (measureNode) return measureNode.offsetWidth;\n        if (liveNode) return liveNode.offsetWidth;\n      }\n      return getEstimatedWidth(item, index, estimatedItemWidth, 96);\n    });\n\n    let nextVisible = items.length;\n\n    // Walk down from \"all items visible\" until the row fits within the container.\n    for (let count = items.length; count >= 0; count -= 1) {\n      const hiddenCount = items.length - count;\n      const visibleWidths =\n        collapseFrom === \"end\"\n          ? itemWidths.slice(0, count)\n          : itemWidths.slice(items.length - count);\n\n      const itemsWidth = visibleWidths.reduce((sum, width) => sum + width, 0);\n      const itemsGap = count > 1 ? gap * (count - 1) : 0;\n\n      let currentOverflowWidth = 0;\n      if (hiddenCount > 0) {\n        if (typeof overflowWidth === \"number\") {\n          currentOverflowWidth = overflowWidth;\n        } else if (measureOverflowWidth) {\n          currentOverflowWidth = measureOverflowWidth(hiddenCount);\n        } else {\n          currentOverflowWidth = overflowRef.current?.offsetWidth ?? 44;\n        }\n      } else if (reserveOverflowSpace) {\n        if (typeof overflowWidth === \"number\") {\n          currentOverflowWidth = overflowWidth;\n        } else {\n          currentOverflowWidth = overflowRef.current?.offsetWidth ?? 44;\n        }\n      }\n\n      const overflowGap =\n        (hiddenCount > 0 || reserveOverflowSpace) && count > 0 ? gap : 0;\n      const total = itemsWidth + itemsGap + overflowGap + currentOverflowWidth;\n\n      if (total <= containerWidth) {\n        nextVisible = count;\n        break;\n      }\n    }\n\n    setVisibleCount((prev) => (prev === nextVisible ? prev : nextVisible));\n  }, [\n    collapseFrom,\n    estimatedItemWidth,\n    gap,\n    getKey,\n    isExpanded,\n    items,\n    measurementMode,\n    measureOverflowWidth,\n    overflowWidth,\n    reserveOverflowSpace,\n  ]);\n\n  useIsoLayoutEffect(() => {\n    compute();\n  }, [compute]);\n\n  useIsoLayoutEffect(() => {\n    const container = containerRef.current;\n    if (!container || typeof ResizeObserver === \"undefined\") return;\n\n    const observer = new ResizeObserver(() => {\n      requestAnimationFrame(compute);\n    });\n\n    observer.observe(container);\n    return () => observer.disconnect();\n  }, [compute]);\n\n  useEffect(() => {\n    if (typeof window === \"undefined\") return;\n    const onResize = () => compute();\n    window.addEventListener(\"resize\", onResize);\n    return () => window.removeEventListener(\"resize\", onResize);\n  }, [compute]);\n\n  const registerItem = useCallback(\n    (key: React.Key) => (node: HTMLElement | null) => {\n      if (node) {\n        itemNodeMap.current.set(key, node);\n      } else {\n        itemNodeMap.current.delete(key);\n      }\n    },\n    []\n  );\n\n  const registerMeasureItem = useCallback(\n    (key: React.Key) => (node: HTMLElement | null) => {\n      if (node) {\n        measureNodeMap.current.set(key, node);\n      } else {\n        measureNodeMap.current.delete(key);\n      }\n    },\n    []\n  );\n\n  const registerOverflow = useCallback((node: HTMLElement | null) => {\n    overflowRef.current = node;\n  }, []);\n\n  const clampedVisibleCount = Math.max(0, Math.min(visibleCount, items.length));\n\n  const visibleItems = useMemo(() => {\n    if (isExpanded) return [...items];\n    if (collapseFrom === \"end\") return items.slice(0, clampedVisibleCount);\n    return items.slice(items.length - clampedVisibleCount);\n  }, [clampedVisibleCount, collapseFrom, isExpanded, items]);\n\n  const hiddenItems = useMemo(() => {\n    if (isExpanded) return [];\n    if (collapseFrom === \"end\") return items.slice(clampedVisibleCount);\n    return items.slice(0, items.length - clampedVisibleCount);\n  }, [clampedVisibleCount, collapseFrom, isExpanded, items]);\n\n  const toggleExpanded = useCallback(() => {\n    setExpanded(!isExpanded);\n  }, [isExpanded, setExpanded]);\n\n  return {\n    containerRef,\n    registerItem,\n    registerMeasureItem,\n    registerOverflow,\n    visibleItems: visibleItems as T[],\n    hiddenItems: hiddenItems as T[],\n    hiddenCount: hiddenItems.length,\n    isExpanded,\n    setExpanded,\n    toggleExpanded,\n    recompute: compute,\n  };\n}\n","import * as React from \"react\";\nimport { useFitList } from \"../hooks/useFitList\";\nimport type { FitListOverflowRenderArgs, FitListProps } from \"../types\";\n\ntype ButtonLikeProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {\n  className?: string;\n  children?: React.ReactNode;\n};\n\nfunction defaultOverflow({ hiddenCount }: { hiddenCount: number }) {\n  return <span>+{hiddenCount}</span>;\n}\n\n/**\n * Responsive single-row list that hides overflowing items behind a configurable\n * overflow affordance.\n *\n * `FitList` is useful for chips, tags, breadcrumbs, recipients, filters, and\n * other horizontally laid out items where preserving a clean single-row layout\n * matters more than showing every element at once.\n *\n * Features:\n * - automatic fit calculation based on available width\n * - customizable overflow renderer (`+3`, `Show more`, badge, etc.)\n * - controlled or uncontrolled expanded state\n * - collapse from the start or the end of the list\n * - live DOM measurement or estimated-width mode\n */\nexport function FitList<T>({\n  items,\n  getKey,\n  renderItem,\n  renderOverflow = defaultOverflow,\n  className,\n  listClassName,\n  itemClassName,\n  overflowClassName,\n  measureClassName,\n  emptyFallback = null,\n  gap = 8,\n  collapseFrom = \"end\",\n  reserveOverflowSpace = false,\n  overflowWidth,\n  estimatedItemWidth,\n  measurementMode = \"live\",\n  expanded,\n  defaultExpanded = false,\n  onExpandedChange,\n  as = \"div\",\n  onOverflowClick,\n  overflowAs = \"button\",\n}: FitListProps<T>) {\n  const Component = as as keyof React.JSX.IntrinsicElements;\n  const OverflowComponent = overflowAs as keyof React.JSX.IntrinsicElements;\n  const overflowMeasureRef = React.useRef<HTMLSpanElement | null>(null);\n  const isDefaultOverflowRenderer = renderOverflow === defaultOverflow;\n\n  const measureOverflowWidth = React.useCallback(\n    (hiddenCount: number) => {\n      if (typeof overflowWidth === \"number\") return overflowWidth;\n      const node = overflowMeasureRef.current;\n      if (!node) return 44;\n\n      // The default overflow label changes width with the hidden count, so we\n      // temporarily swap its text content to measure the exact width needed.\n      if (isDefaultOverflowRenderer) {\n        const previous = node.textContent;\n        node.textContent = `+${hiddenCount}`;\n        const width = node.offsetWidth;\n        node.textContent = previous;\n        return width;\n      }\n\n      return node.offsetWidth;\n    },\n    [isDefaultOverflowRenderer, overflowWidth]\n  );\n\n  const {\n    containerRef,\n    registerItem,\n    registerMeasureItem,\n    registerOverflow,\n    visibleItems,\n    hiddenItems,\n    hiddenCount,\n    isExpanded,\n    setExpanded,\n    toggleExpanded,\n  } = useFitList({\n    items,\n    getKey,\n    gap,\n    collapseFrom,\n    reserveOverflowSpace,\n    overflowWidth,\n    estimatedItemWidth,\n    measurementMode,\n    expanded,\n    defaultExpanded,\n    onExpandedChange,\n    measureOverflowWidth,\n  });\n\n  const visibleEntries = React.useMemo(() => {\n    if (isExpanded) {\n      return items.map((item, index) => ({ item, index }));\n    }\n\n    if (collapseFrom === \"end\") {\n      return items\n        .slice(0, visibleItems.length)\n        .map((item, index) => ({ item, index }));\n    }\n\n    const startIndex = items.length - visibleItems.length;\n    return items\n      .slice(startIndex)\n      .map((item, index) => ({ item, index: startIndex + index }));\n  }, [collapseFrom, isExpanded, items, visibleItems.length]);\n\n  if (items.length === 0) {\n    return <>{emptyFallback}</>;\n  }\n\n  const overflowArgs: FitListOverflowRenderArgs<T> = {\n    hiddenCount,\n    hiddenItems: [...hiddenItems] as T[],\n    visibleItems: [...visibleItems] as T[],\n    isExpanded,\n    setExpanded,\n    toggle: toggleExpanded,\n  };\n\n  const overflowChildren = renderOverflow(overflowArgs);\n\n  const overflowButtonProps: ButtonLikeProps = {\n    className: overflowClassName,\n    type: \"button\",\n    onClick: (event) => onOverflowClick?.(overflowArgs, event as React.MouseEvent<HTMLElement>),\n    \"aria-expanded\": isExpanded,\n    children: overflowChildren,\n  };\n\n  const content = (\n    <>\n      <div\n        className={listClassName}\n        style={{\n          display: \"flex\",\n          alignItems: \"center\",\n          gap,\n          minWidth: 0,\n          flex: \"1 1 auto\",\n          overflow: \"hidden\",\n        }}\n      >\n        {visibleEntries.map(({ item, index }) => {\n          const key = getKey(item, index);\n          return (\n            <div\n              key={key}\n              ref={registerItem(key)}\n              className={itemClassName}\n              style={{\n                minWidth: 0,\n                flex: \"0 0 auto\",\n                whiteSpace: \"nowrap\",\n              }}\n            >\n              {renderItem(item, index)}\n            </div>\n          );\n        })}\n      </div>\n\n      {(hiddenCount > 0 || reserveOverflowSpace) && (\n        <div\n          ref={registerOverflow}\n          style={{\n            visibility: hiddenCount > 0 ? \"visible\" : \"hidden\",\n            flex: \"0 0 auto\",\n            whiteSpace: \"nowrap\",\n            display: \"block\",\n          }}\n        >\n          {hiddenCount > 0 ? (\n            overflowAs === \"button\" ? (\n              <button {...overflowButtonProps} />\n            ) : (\n              React.createElement(\n                OverflowComponent,\n                { className: overflowClassName },\n                overflowChildren\n              )\n            )\n          ) : (\n            <span aria-hidden=\"true\">+0</span>\n          )}\n        </div>\n      )}\n    </>\n  );\n\n  const root = React.createElement(\n    Component,\n    {\n      ref: containerRef as React.Ref<any>,\n      className,\n      style: {\n        display: \"flex\",\n        alignItems: \"center\",\n        gap,\n        minWidth: 0,\n        whiteSpace: \"nowrap\",\n      },\n    },\n    content\n  );\n\n  return (\n    <>\n      {root}\n\n      {/*\n        Hidden measurement tree used to capture accurate intrinsic widths without\n        affecting layout or interactivity.\n      */}\n      <div\n        aria-hidden=\"true\"\n        style={{\n          pointerEvents: \"none\",\n          position: \"fixed\",\n          top: 0,\n          left: 0,\n          zIndex: -1,\n          overflow: \"hidden\",\n          opacity: 0,\n        }}\n      >\n        <div style={{ display: \"flex\", alignItems: \"center\", gap }}>\n          {items.map((item, index) => {\n            const key = getKey(item, index);\n            return (\n              <span\n                key={`measure:${String(key)}`}\n                ref={registerMeasureItem(key)}\n                className={measureClassName ?? itemClassName}\n                style={{\n                  display: \"inline-flex\",\n                  whiteSpace: \"nowrap\",\n                }}\n              >\n                {renderItem(item, index)}\n              </span>\n            );\n          })}\n\n          <span\n            ref={overflowMeasureRef}\n            className={overflowClassName}\n            style={{ display: \"inline-flex\", whiteSpace: \"nowrap\" }}\n          >\n            {overflowChildren}\n          </span>\n        </div>\n      </div>\n    </>\n  );\n}\n"]}

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "react-fit-list",
+  "version": "1.0.0",
+  "description": "A headless React component for rendering a single-line list that collapses overflowing items into a +N indicator.",
+  "keywords": [
+    "react",
+    "overflow",
+    "list",
+    "badges",
+    "chips",
+    "responsive",
+    "headless",
+    "ui"
+  ],
+  "homepage": "https://github.com/SincerelyFaust/react-fit-list#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/SincerelyFaust/react-fit-list.git"
+  },
+  "bugs": {
+    "url": "https://github.com/SincerelyFaust/react-fit-list/issues"
+  },
+  "license": "MIT",
+  "author": "Marin Heđeš",
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^16.3.0",
+    "@types/react": "^19.1.16",
+    "@types/react-dom": "^19.1.9",
+    "jsdom": "^26.1.0",
+    "tsup": "^8.5.0",
+    "typescript": "^5.9.3",
+    "vitest": "^3.2.4"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "prepublishOnly": "npm run typecheck && npm run test && npm run build"
+  }
+}