@liveblocks/react-ui/dist/components/InboxNotificationList.cjs.map

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.

{"version":3,"file":"InboxNotificationList.cjs","sources":["../../src/components/InboxNotificationList.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport { Children, forwardRef, useRef } from \"react\";\n\nimport { classNames } from \"../utils/class-names\";\nimport { useVisibleCallback } from \"../utils/use-visible\";\n\nexport interface InboxNotificationListProps\n  extends ComponentPropsWithoutRef<\"ol\"> {\n  /**\n   * This API is *EXPERIMENTAL* and likely not going to be the final API. Do\n   * not rely on it.\n   *\n   * @private\n   */\n  onReachEnd?: () => void;\n}\n\nfunction ReachEndMarker({\n  enabled,\n  onReachEnd,\n}: {\n  enabled: boolean;\n  onReachEnd: () => void;\n}) {\n  const markerRef = useRef<HTMLDivElement>(null);\n\n  useVisibleCallback(markerRef, onReachEnd, {\n    enabled,\n  });\n\n  return <div ref={markerRef} style={{ height: 0 }} />;\n}\n\n/**\n * Displays inbox notifications as a list.\n *\n * @example\n * <InboxNotificationList>\n *   {inboxNotifications.map((inboxNotification) => (\n *     <InboxNotification key={inboxNotification.id} inboxNotification={inboxNotification} />\n *   ))}\n * </InboxNotificationList>\n */\nexport const InboxNotificationList = forwardRef<\n  HTMLOListElement,\n  InboxNotificationListProps\n>(({ onReachEnd, children, className, ...props }, forwardedRef) => {\n  return (\n    <ol\n      className={classNames(\"lb-root lb-inbox-notification-list\", className)}\n      {...props}\n      ref={forwardedRef}\n    >\n      {Children.map(children, (child, index) => (\n        <li key={index} className=\"lb-inbox-notification-list-item\">\n          {child}\n        </li>\n      ))}\n      {/* Render an invisible marker at the end which is tied to an IntersectionObserver to be alerted when the end of the list has been reached */}\n      {onReachEnd && (\n        <ReachEndMarker\n          onReachEnd={onReachEnd}\n          enabled={Children.count(children) > 0}\n        />\n      )}\n    </ol>\n  );\n});\n"],"names":[],"mappings":";;;;;;;;;AAmBA;AAAwB;AACtB;AAEF;AAIE;AAEA;AAA0C;AACxC;AAGF;AAAQ;AAAS;AAA8B;AACjD;AAYa;AAIX;AACG;AACsE;AACjE;AACC;AAEJ;AACE;AAAyB;AACvB;AAEJ;AAGE;AACC;AACoC;AACtC;AAAA;AAIR;;"}