@liveblocks/react-ui/dist/components/internal/List.js

A set of React pre-built components for the Liveblocks products. Liveblocks is the all-in-one toolkit to build collaborative products like Figma, Notion, and more.

import { jsx } from 'react/jsx-runtime';
import { Slot } from '@radix-ui/react-slot';
import { forwardRef, useMemo } from 'react';
import { useOverrides } from '../../overrides.js';
import { classNames } from '../../utils/class-names.js';
import { listFormat } from '../../utils/intl.js';

const List = forwardRef(
  ({ values, formatRemaining, truncate, locale, className, asChild, ...props }, forwardedRef) => {
    const Component = asChild ? Slot : "span";
    const $ = useOverrides();
    const formatRemainingWithDefault = formatRemaining ?? $.LIST_REMAINING;
    const formattedList = useMemo(() => {
      const elements = truncate && truncate < values.length - 1 ? [
        ...values.slice(0, truncate),
        formatRemainingWithDefault(values.length - truncate)
      ] : [...values];
      const placeholders = Array(elements.length).fill(".");
      const parts = listFormat(locale).formatToParts(placeholders);
      return parts.map(
        (part) => part.type === "element" ? elements.shift() : part.value
      );
    }, [formatRemainingWithDefault, locale, truncate, values]);
    return /* @__PURE__ */ jsx(Component, {
      className: classNames("lb-list", className),
      ...props,
      ref: forwardedRef,
      children: formattedList
    });
  }
);

export { List };
//# sourceMappingURL=List.js.map